feat: 下拉框多选功能

src/mocp/components/global-button/global-button.vue

@@ -94,6 +94,7 @@ const getRadius = computed(() => {
 .global-button {
     border-radius: v-bind(getRadius);
     height: v-bind(getSize);
+    min-height: v-bind(getSize);
     line-height: v-bind(getSize);
     .icon {
         margin-right: 8rpx;

src/mocp/components/global-picker/global-picker.vue

 <template>
     <!-- 全局下拉框控件 -->
     <view class="picker" :class="{ 'u-border': ps.border }" :style="style">
-        <global-popup v-model="show" :height="592" :customStyle="{ padding: '28rpx 32rpx' }" v-if="filter" :distance="distance">
+        <global-popup v-model="show" :height="592" :customStyle="{ padding: '28rpx 32rpx' }" v-if="filter || multiple" :distance="distance">
             <template #top>
                 <view>
                     <up-search :placeholder="placeholder" :showAction="false" v-model="searchKey"></up-search>
@@ -10,7 +10,9 @@
             <view class="popup-content-list" v-if="getFilterColumns.length">
                 <view
                     class="popup-content-item u-line-1"
-                    :class="{ 'mocp-color-primary-6': modelValue == item[valueField] }"
+                    :class="{
+                        'mocp-color-primary-6': multipleValue.includes(item[valueField])
+                    }"
                     v-for="(item, index) in getFilterColumns"
                     :key="index"
                     @tap="handleChoose(item[valueField])"
@@ -21,6 +23,11 @@
             <view style="width: 100%; height: 100%" v-else>
                 <global-empty></global-empty>
             </view>
+            <template #bottom>
+                <view style="margin-top: 20rpx">
+                    <global-button type="primary" :radius="5" @tap="confirmMultiple">确定</global-button>
+                </view>
+            </template>
         </global-popup>
         <up-picker
             v-else
@@ -52,7 +59,7 @@
 <script setup>
 import { computed, nextTick, ref, watch } from 'vue'
 import * as dictData from 'mocp/hooks/use-dict/dict-data'
-import { cloneDeep } from 'lodash'
+import { cloneDeep, min } from 'lodash'
 import { getParamsByType } from 'mocp/hooks/use-params/useParams'
 
 const es = defineEmits(['update:modelValue', 'change', 'getScrollTop'])
@@ -67,11 +74,11 @@ const ps = defineProps({
         type: Boolean,
         default: false
     },
-    //是否多选(只对filter有效)---待优化
-    // multiple: {
-    //     type: Boolean,
-    //     default: false
-    // },
+    //是否多选(只对filter有效)
+    multiple: {
+        type: Boolean,
+        default: false
+    },
     style: {
         type: Object,
         default: () => {
@@ -113,6 +120,10 @@ const ps = defineProps({
         type: String,
         default: 'value'
     },
+    valueSplit: {
+        type: String,
+        default: ','
+    },
     pickAlign: {
         type: String,
         default: 'left'
@@ -186,6 +197,11 @@ const open = async () => {
     }
     searchKey.value = ''
     show.value = true
+    if (ps.modelValue) {
+        multipleValue.value = ps.modelValue.split(ps.valueSplit)
+    } else {
+        multipleValue.value = []
+    }
 }
 //设置下拉框打开的默认值
 const defaultIndex = ref(0)
@@ -225,9 +241,28 @@ const getColumns = computed(() => {
     return []
 })
 //监听设置labelValue的值
+const multipleValue = ref([])
 watch(
     [() => ps.modelValue, () => ps.options],
     () => {
+        if (ps.multiple) {
+            if (ps.modelValue) {
+                labelValue.value = ps.modelValue
+                    .split(ps.valueSplit)
+                    .map((item) => {
+                        return getColumns.value.find((option) => String(option[ps.valueField]) === String(item))[ps.labelField]
+                    })
+                    .join(ps.valueSplit)
+                const indexs = ps.modelValue.split(ps.valueSplit).map((item) => {
+                    return getColumns.value.findIndex((option) => String(option[ps.valueField]) === String(item))
+                })
+                nextTick(() => {
+                    defaultIndex.value = min(indexs)
+                })
+            } else {
+                defaultIndex.value = 0
+            }
+        } else {
             const option = getColumns.value?.find((option) => String(option[ps.valueField]) === String(ps.modelValue))
             const index = getColumns.value?.findIndex((option) => String(option[ps.valueField]) === String(ps.modelValue))
             if (option) {
@@ -239,6 +274,7 @@ watch(
                 labelValue.value = ps.modelValue
                 defaultIndex.value = 0
             }
+        }
     },
     { immediate: true }
 )
@@ -250,6 +286,11 @@ const confirm = (e) => {
     es('update:modelValue', getColumns.value[index][ps.valueField])
     es('change', getColumns.value[index][ps.valueField], getColumns.value[index])
 }
+const confirmMultiple = () => {
+    show.value = false
+    es('update:modelValue', multipleValue.value.join(ps.valueSplit))
+    es('change', multipleValue.value.join(ps.valueSplit))
+}
 //点击清空按钮
 const clear = () => {
     labelValue.value = ''
@@ -265,6 +306,13 @@ const getFilterColumns = computed(() => {
 //弹出层列表点击
 const distance = ref(0)
 const handleChoose = (value) => {
+    if (ps.multiple) {
+        if (multipleValue.value.includes(value)) {
+            multipleValue.value = multipleValue.value.filter((item) => item != value)
+        } else {
+            multipleValue.value.push(value)
+        }
+    } else {
         es('update:modelValue', value)
         es(
             'change',
@@ -272,6 +320,7 @@ const handleChoose = (value) => {
             getColumns.value.find((item) => item[ps.valueField] == value)
         )
         show.value = false
+    }
 }
 //打开默认滑动到选中的位置
 watch(
@@ -306,6 +355,7 @@ watch(
     &-value {
         color: $mocp-text-4;
         margin-right: 8rpx;
+        word-break: break-all;
     }
     &-icon {
         display: flex;

src/mocp/components/global-popup/global-popup.vue

@@ -18,6 +18,7 @@
             <scroll-view scroll-y class="content" :scroll-top="scrollTop" @scroll="scroll">
                 <slot></slot>
             </scroll-view>
+            <slot name="bottom"></slot>
         </view>
     </up-popup>
 </template>

src/pages/modules/mocp/panel/unplanApply/add.vue

@@ -16,7 +16,7 @@
                     <up-input v-model="formData.delayDay" type="number" border="none" inputAlign="right" placeholder="请输入" clearable></up-input>
                 </up-form-item>
                 <up-form-item label="申请原因" prop="warningReason" :borderBottom="true" required>
-                    <global-picker v-model="formData.warningReason" pickAlign="right" paramsType="WarningReason" clearable></global-picker>
+                    <global-picker v-model="formData.warningReason" pickAlign="right" paramsType="WarningReason" clearable multiple></global-picker>
                 </up-form-item>
                 <up-form-item label="缺件航材" :borderBottom="true">
                     <global-switch v-model="formData.materialDelay" switchAlign="right"></global-switch>

src/pages/modules/mocp/panel/unplanApply/constants/add.compositions.js

@@ -47,7 +47,7 @@ export const formData = reactive({
     delayDay: '',
     approver: '',
     warningReason: '',
-    materialDelay: 0,
+    materialDelay: '0',
     materialPns: '',
     reason: '',
     delayDay: null

src/pages/modules/mocp/panel/unplanApply/constants/add.functionals.js

@@ -8,7 +8,7 @@ export const resetData = () => {
         delayDay: '',
         approver: '',
         warningReason: '',
-        materialDelay: 0,
+        materialDelay: '0',
         materialPns: '',
         reason: '',
         delayDay: null

src/pages/modules/mocp/panel/unplanWarning/add.vue

@@ -13,7 +13,7 @@
                     ></up-input>
                 </up-form-item>
                 <up-form-item label="申请原因" prop="warningReason" :borderBottom="true" required>
-                    <global-picker v-model="formData.warningReason" pickAlign="right" paramsType="WarningReason" clearable></global-picker>
+                    <global-picker v-model="formData.warningReason" pickAlign="right" paramsType="WarningReason" clearable multiple></global-picker>
                 </up-form-item>
                 <up-form-item label="缺件航材" :borderBottom="true">
                     <global-switch v-model="formData.materialDelay" switchAlign="right"></global-switch>

src/pages/modules/mocp/panel/unplanWarning/constants/add.compositions.js

@@ -39,7 +39,7 @@ export const formData = reactive({
     delayDay: '',
     approver: '',
     warningReason: '',
-    materialDelay: 0,
+    materialDelay: '0',
     materialPns: '',
     reason: ''
 })

src/pages/modules/mocp/panel/unplanWarning/constants/add.functionals.js

@@ -9,7 +9,7 @@ export const resetData = () => {
         delayDay: '',
         approver: '',
         warningReason: '',
-        materialDelay: 0,
+        materialDelay: '0',
         materialPns: '',
         reason: ''
     })