✨ feat(多行文本控件): 调整样式和组件属性

hookehuyr
Commit d35c0f10d5456deab5ed7ad241adc7ca11495cf7 d35c0f10 1 parent d4aa579d
Showing 4 changed files with 109 additions and 31 deletions
components.d.ts
src/components/TextareaField/index.vue
src/hooks/useComponentType.js
src/pages/table/index.vue
--- a/components.d.ts
View file @d35c0f1
+++ b/components.d.ts
View file @d35c0f1
@@ -35,6 +35,7 @@ declare module '@vue/runtime-core' {
     NutNoticebar: typeof import('@nutui/nutui-taro')['Noticebar']
     NutSwiper: typeof import('@nutui/nutui-taro')['Swiper']
     NutSwiperItem: typeof import('@nutui/nutui-taro')['SwiperItem']
+    NutTextarea: typeof import('@nutui/nutui-taro')['Textarea']
     PhoneField: typeof import('./src/components/PhoneField/index.vue')['default']
     PickerField: typeof import('./src/components/PickerField/index.vue')['default']
     RadioField: typeof import('./src/components/RadioField/index.vue')['default']
--- a/src/components/TextareaField/index.vue
View file @d35c0f1
+++ b/src/components/TextareaField/index.vue
View file @d35c0f1
 <!--
  * @Date: 2022-08-29 14:31:20
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-03-22 09:13:58
+ * @LastEditTime: 2023-04-03 14:07:03
- * @FilePath: /data-table/src/components/TextareaField/index.vue
+ * @FilePath: /custom_form/src/components/TextareaField/index.vue
  * @Description: 多行文本输入框
 -->
 <template>
   <div v-if="HideShow" class="textarea-field-page">
     <div class="label">
-      <span v-if="item.component_props.required">&nbsp;*</span>
+      <text v-if="item.component_props.required">&nbsp;*</text>
       {{ item.component_props.label }}
     </div>
-    <div
+    <!-- <div
       v-if="item.component_props.note"
       v-html="item.component_props.note"
       style="font-size: 0.9rem; margin-left: 1rem; color: gray; padding-bottom: 0.5rem; padding-top: 0.25rem; white-space: pre-wrap;"
-    />
+    /> -->
-    <van-field
+    <nut-textarea
-      v-model="item.value"
+      v-model="input_value"
-      :name="item.name"
       :type="item.type"
+      :border="false"
       :placeholder="item.component_props.placeholder ? item.component_props.placeholder : '请输入'"
-      :rules="item.rules"
-      :required="item.component_props.required"
       :readonly="item.component_props.readonly"
-      :rows="item.component_props.rows"
+      :max-length="item.component_props.maxlength ? item.component_props.maxlength : null"
-      autosize
+      :limit-show="!!item.component_props.maxlength && !item.component_props.readonly"
-      :maxlength="item.component_props.maxlength ? item.component_props.maxlength : null"
+      :autosize="{ maxHeight: 200, minHeight: 100 }"
-      :show-word-limit="item.component_props.maxlength"
+      style="border: 1px solid #eaeaea; border-radius: 0.25rem; padding: 10px;"
     />
+    <div
+      v-if="show_error"
+      style="padding: 5px 20px; color: red; font-size: 12px;"
+    >
+      {{ error_msg }}
+    </div>
   </div>
 </template>
 <script setup>
+import { ref, computed, watch, onMounted, reactive } from "vue";
+
 const props = defineProps({
   item: Object,
 });
@@ -40,15 +46,56 @@ const props = defineProps({
 const HideShow = computed(() => {
   return !props.item.component_props.disabled
 })
+
+const emit = defineEmits(["active"]);
+const input_value = ref('');
+
+// 错误提示
+const show_error = ref(false);
+const error_msg = ref('');
+
+onMounted(() => {
+  if (props.item.component_props.default) {
+    input_value.value = props.item.component_props.default;
+  }
+})
+
+watch(
+  () => input_value.value,
+  (newValue, oldValue) => {
+    props.item.value = {
+      key: "textarea",
+      filed_name: props.item.key,
+      value: newValue,
+    };
+    emit("active", props.item.value);
+  },
+  { immediate: true }
+);
+
+// 校验模块
+const validTextarea = () => {
+  // 必填项
+  if (props.item.component_props.required && !input_value.value) {
+    show_error.value = true;
+    error_msg.value = '必填项不能为空'
+  } else {
+    show_error.value = false;
+    error_msg.value = ''
+  }
+  return !show_error.value;
+};
+
+defineExpose({ validTextarea });
 </script>
-<style lang="less" scoped>
+<style lang="less">
 .textarea-field-page {
   .label {
-    padding: 1rem 1rem 0 1rem;
+    padding: 30px 30px 0 30px;
-    font-size: 0.9rem;
+    font-size: 26px;
     font-weight: bold;
-    span {
+    text {
       color: red;
     }
   }
@@ -59,9 +106,22 @@ const HideShow = computed(() => {
   // border-radius: 0.25rem;
   // padding: 0.25rem 0.5rem;
 // }
-:deep(.van-cell__value) {
+// :deep(.van-cell__value) {
-  border: 1px solid #eaeaea;
+//   border: 1px solid #eaeaea;
-  border-radius: 0.25rem;
+//   border-radius: 0.25rem;
-  padding: 0.25rem 0.5rem;
+//   padding: 0.25rem 0.5rem;
+// }
+
+input {
+  color: #000 !important;
+}
+.nut-textarea {
+  padding-left: 35px;
+  padding-right: 35px;
+  white-space: pre-wrap;
+}
+.nut-textarea__limit {
+  right: 50px;
+  bottom: 30px;
 }
 </style>
--- a/src/hooks/useComponentType.js
View file @d35c0f1
+++ b/src/hooks/useComponentType.js
View file @d35c0f1
 import _ from '@/utils/lodash'
 import TextField from '@/components/TextField/index.vue'
-// import TextareaField from '@/components/TextareaField/index.vue'
+import TextareaField from '@/components/TextareaField/index.vue'
 // import RadioField from '@/components/RadioField/index.vue'
 // import CheckboxField from '@/components/CheckboxField/index.vue'
 // import PickerField from '@/components/PickerField/index.vue'
@@ -75,13 +75,11 @@ export function createComponentType(data) {
       item.name = item.key
       item.component = TextField
     }
-    // if (item.component_props.tag === 'textarea') {
+    if (item.component_props.tag === 'textarea') {
-    //   item.type = 'textarea'
+      item.type = 'textarea'
-    //   item.name = item.key
+      item.name = item.key
-    //   // item.rows = 10;
+      item.component = TextareaField
-    //   item.autosize = true
+    }
-    //   item.component = TextareaField
-    // }
     // if (item.component_props.tag === 'number') {
     //   item.name = item.key
     //   item.component = NumberField
--- a/src/pages/table/index.vue
View file @d35c0f1
+++ b/src/pages/table/index.vue
View file @d35c0f1
 <!--
  * @Date: 2023-03-24 09:19:27
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-03-31 18:02:51
+ * @LastEditTime: 2023-04-03 13:32:11
  * @FilePath: /custom_form/src/pages/table/index.vue
  * @Description: 文件描述
 -->
@@ -127,6 +127,7 @@ const formatData = (data) => {
 // 处理没有绑定值的组件的赋值
 // 省市区选择，图片上传，文件上传，电子签名，评分组件
 const input = ref([]);
+const textarea = ref([]);
 const area_picker = ref([]);
 const image_uploader = ref([]);
 const file_uploader = ref([]);
@@ -138,6 +139,9 @@ const setRefMap = (el, item) => {
     if (item.component_props.tag === "input") {
       input.value.push(el);
     }
+    if (item.component_props.tag === "textarea") {
+      textarea.value.push(el);
+    }
     if (item.component_props.tag === "area_picker") {
       area_picker.value.push(el);
     }
@@ -364,6 +368,9 @@ const onActive = (item) => {
   if (item.key === "input") {
     postData.value[item.filed_name] = item.value;
   }
+  if (item.key === "textarea") {
+    postData.value[item.filed_name] = item.value;
+  }
   if (item.key === "area_picker") {
     postData.value[item.filed_name] = item.value;
   }
@@ -418,6 +425,18 @@ const validOther = () => {
       }
     });
   }
+  if (textarea.value) {
+    // 多行文本
+    textarea.value.forEach((item, index) => {
+      if (!textarea.value[index].validTextarea()) {
+        valid = {
+          status: textarea.value[index].validTextarea(),
+          key: "textarea",
+        };
+        return false;
+      }
+    });
+  }
   if (area_picker.value) {
     // 省市区地址
     area_picker.value.forEach((item, index) => {