✨ feat(下拉框控件): 样式调整和功能调整

hookehuyr
Commit 3594cac49739df191a3b86ca6cc9863962751e80 3594cac4 1 parent 4cb3f1d5
Showing 4 changed files with 103 additions and 30 deletions
components.d.ts
src/components/PickerField/index.vue
src/hooks/useComponentType.js
src/pages/table/index.vue
--- a/components.d.ts
View file @3594cac
+++ b/components.d.ts
View file @3594cac
@@ -36,6 +36,8 @@ declare module '@vue/runtime-core' {
     NutInput: typeof import('@nutui/nutui-taro')['Input']
     NutNoticebar: typeof import('@nutui/nutui-taro')['Noticebar']
     NutOverlay: typeof import('@nutui/nutui-taro')['Overlay']
+    NutPicker: typeof import('@nutui/nutui-taro')['Picker']
+    NutPopup: typeof import('@nutui/nutui-taro')['Popup']
     NutRadio: typeof import('@nutui/nutui-taro')['Radio']
     NutRadioGroup: typeof import('@nutui/nutui-taro')['RadioGroup']
     NutSwiper: typeof import('@nutui/nutui-taro')['Swiper']
--- a/src/components/PickerField/index.vue
View file @3594cac
+++ b/src/components/PickerField/index.vue
View file @3594cac
 <!--
  * @Date: 2022-08-30 13:46:51
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-03-03 21:11:24
+ * @LastEditTime: 2023-04-06 13:34:46
- * @FilePath: /data-table/src/components/PickerField/index.vue
+ * @FilePath: /custom_form/src/components/PickerField/index.vue
  * @Description: 单列选择器组件
 -->
 <template>
   <div v-if="HideShow" class="picker-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>
-    <van-field
+    <div style="margin: 10px 20px;">
+      <nut-input
         v-model="picker_value"
         is-link
         readonly
-      :name="item.key"
+        :label="item.key"
         :required="item.component_props.required"
         :placeholder="item.component_props.placeholder"
-      :rules="item.rules"
+        @click-input="onClick()"
-      @click="showPicker = true"
         :border="false"
-    />
+        style="padding: 0px;"
+      >
+        <template #right> <RectRight color="#eaeaea"></RectRight></template>
+      </nut-input>
+      <div
+        v-if="show_error"
+        style="padding: 5px; color: red; font-size: 12px;"
+      >
+        {{ error_msg }}
+      </div>
+    </div>
     <!-- <van-field v-if="has_add_info" :name="add_info_name" v-model="add_info" label="" placeholder="请输入补充信息" :border="false" style="border: 1px solid #eaeaea;border-radius: 0.25rem; padding: 0.25rem 0.5rem; margin-top: 0.25rem;" /> -->
-    <van-popup v-model:show="showPicker" position="bottom">
+    <nut-popup v-model:visible="showPicker" position="bottom">
-      <van-picker
+      <nut-picker
         :columns="item.component_props.options"
         @confirm="onConfirm"
         @cancel="showPicker = false"
       />
-    </van-popup>
+    </nut-popup>
   </div>
 </template>
 <script setup>
+import { ref, computed, watch, onMounted, reactive } from "vue";
+import { RectRight } from '@nutui/icons-vue-taro';
+
 const props = defineProps({
   item: Object,
 });
@@ -59,12 +72,21 @@ const selectedValues = ref("");
 const showPicker = ref(false);
 const picker_value = ref(props.item.component_props.default);
+const onClick = () => {
+  showPicker.value = true;
+}
+
 const onConfirm = ({ selectedOptions }) => {
   picker_value.value = selectedOptions[0]?.value;
   showPicker.value = false;
   // 触发点自定义监听事件，配合规则显示隐藏其他字段
-  props.item.value = { key: props.item.key, value: picker_value.value, type: "picker" };
+  props.item.value = {
+    key: "picker",
+    filed_name: props.item.key,
+    value: picker_value.value,
+  };
   emit("active", props.item.value);
+  validPicker();
   // if (add_info_key.value === props.item.value) {
   //   has_add_info.value = true;
   // }
@@ -73,26 +95,58 @@ const onConfirm = ({ selectedOptions }) => {
 const HideShow = computed(() => {
   return !props.item.component_props.disabled
 })
+
+// 错误提示
+const show_error = ref(false);
+const error_msg = ref('');
+
+// 校验模块
+const validPicker = () => {
+  // 必填项
+  if (props.item.component_props.required && !picker_value.value) {
+    show_error.value = true;
+    error_msg.value = '必填项不能为空'
+  } else {
+    show_error.value = false;
+    error_msg.value = ''
+  }
+  return !show_error.value;
+};
+
+defineExpose({ validPicker, id: props.item.key });
 </script>
-<style lang="less" scoped>
+<style lang="less">
 .picker-field-page {
-  margin: 1rem;
   .label {
-    // padding: 1rem 1rem 0 0;
+    padding: 30px 30px 0 30px;
-    font-size: 0.9rem;
+    font-size: 26px;
     font-weight: bold;
-
+    text {
-    span {
       color: red;
     }
+
+    .note-wrapper {
+      font-size: 24px;
+      margin-left: 30px;
+      color: gray;
+      padding-bottom: 15px;
+      padding-top: 7px;
+      white-space: pre-wrap;
+    }
   }
-}
-:deep(.van-cell--clickable) {
+  .nut-input {
+    padding: 10px;
     border: 1px solid #eaeaea;
-  border-radius: 0.25rem;
+    border-radius: 8px;
-  padding: 0.25rem 0.5rem;
+  }
-  margin-top: 0.5rem;
 }
+
+// :deep(.van-cell--clickable) {
+//   border: 1px solid #eaeaea;
+//   border-radius: 0.25rem;
+//   padding: 0.25rem 0.5rem;
+//   margin-top: 0.5rem;
+// }
 </style>
--- a/src/hooks/useComponentType.js
View file @3594cac
+++ b/src/hooks/useComponentType.js
View file @3594cac
@@ -3,7 +3,7 @@ import TextField from '@/components/TextField/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'
+import PickerField from '@/components/PickerField/index.vue'
 // import AreaPickerField from '@/components/AreaPickerField/index.vue'
 // import DatePickerField from '@/components/DatePickerField/index.vue'
 // import TimePickerField from '@/components/TimePickerField/index.vue'
@@ -90,9 +90,9 @@ export function createComponentType(data) {
     if (item.component_props.tag === 'checkbox') {
       item.component = CheckboxField
     }
-    // if (item.component_props.tag === 'select') {
+    if (item.component_props.tag === 'select') {
-    //   item.component = PickerField
+      item.component = PickerField
-    // }
+    }
     // if (item.component_props.tag === 'address') {
     //   item.component = AreaPickerField
     // }
--- a/src/pages/table/index.vue
View file @3594cac
+++ b/src/pages/table/index.vue
View file @3594cac
 <!--
  * @Date: 2023-03-24 09:19:27
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-04-04 18:09:30
+ * @LastEditTime: 2023-04-06 13:37:04
  * @FilePath: /custom_form/src/pages/table/index.vue
  * @Description: 文件描述
 -->
@@ -131,6 +131,7 @@ const textarea = ref([]);
 const radio = ref([]);
 const checkbox = ref([]);
 const multi_rule = ref([]);
+const picker = ref([]);
 const area_picker = ref([]);
 const image_uploader = ref([]);
 const file_uploader = ref([]);
@@ -154,6 +155,9 @@ const setRefMap = (el, item) => {
     if (item.component_props.tag === "multi_rule") {
       multi_rule.value.push(el);
     }
+    if (item.component_props.tag === "select") {
+      picker.value.push(el);
+    }
     if (item.component_props.tag === "area_picker") {
       area_picker.value.push(el);
     }
@@ -425,8 +429,8 @@ const onActive = (item) => {
   if (item.type === "rate") {
     postData.value = _.assign(postData.value, { [item.key]: item.value });
   }
-  if (item.type === "picker") { // 下拉框控件
+  if (item.key === "picker") { // 下拉框控件
-    postData.value = _.assign(postData.value, { [item.key]: item.value });
+    postData.value = Object.assign(postData.value, { [item.filed_name]: item.value });
   }
   // 检查规则，会影响字段显示
   checkRules();
@@ -504,6 +508,19 @@ const validOther = () => {
       }
     });
   }
+  if (picker.value) {
+    // 下拉框
+    picker.value.forEach((item, index) => {
+      if (!picker.value[index].validPicker()) {
+        valid = {
+          status: picker.value[index].validPicker(),
+          key: "picker",
+          id: picker.value[index]?.id
+        };
+        return false;
+      }
+    });
+  }
   if (area_picker.value) {
     // 省市区地址
     area_picker.value.forEach((item, index) => {