fix: 修复人员选择

components.d.ts

@@ -34,6 +34,7 @@ declare module 'vue' {
         GlobalUpload: typeof import('./src/mocp/components/global-upload/global-upload.vue')['default']
         GlobalUploadImage: typeof import('./src/mocp/components/global-upload-image/global-upload-image.vue')['default']
         // 自定义组件
+        CustomAdminPicker: typeof import('./src/mocp/components/widget/custom-admin-picker.vue')['default']
         CustomCardDetails: typeof import('./src/mocp/components/widget/custom-card-details.vue')['default']
         CustomCardDetailsItem: typeof import('./src/mocp/components/widget/custom-card-details-item.vue')['default']
         CustomScore: typeof import('./src/mocp/components/widget/custom-score.vue')['default']

src/mocp/components/widget/custom-admin-picker.vue

+<template>
+    <!-- 选择人员 -->
+    <view class="picker" :style="style">
+        <global-popup v-model="show" :height="592" :customStyle="{ padding: '28rpx 32rpx' }">
+            <template #top>
+                <view>
+                    <up-search placeholder="请输入内容后选择" :showAction="false" v-model="searchKey" @change="onChange"></up-search>
+                </view>
+            </template>
+            <view class="popup-content-list" v-if="columns.length">
+                <view
+                    class="popup-content-item u-line-1"
+                    :class="{ 'mocp-color-primary-6': modelValue == item[valueField] }"
+                    v-for="(item, index) in columns"
+                    :key="index"
+                    @tap="handleChoose(item)"
+                >
+                    {{ item[labelField] }}
+                </view>
+            </view>
+            <view style="width: 100%; height: 100%" v-else>
+                <global-empty></global-empty>
+            </view>
+        </global-popup>
+        <view class="picker-content" :class="getPickerClass" @tap="open" :style="getContentStyle">
+            <text class="picker-value">{{ getLabelValue }}</text>
+            <view class="picker-icon">
+                <view class="picker-icon-close" v-if="clearable && !showPlaceholder && !disabled" @tap.stop="clear">
+                    <up-icon name="close-circle-fill" color="#c0c4cc" size="36rpx"></up-icon>
+                </view>
+                <up-icon name="arrow-right" color="#86909C" size="36rpx"></up-icon>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script setup>
+import { debounce } from 'lodash'
+import { getAdminListApi } from 'mocp/api/base'
+import { computed, ref, watch, watchEffect } from 'vue'
+
+const es = defineEmits(['update:modelValue', 'change'])
+const ps = defineProps({
+    style: {
+        type: Object,
+        default: () => {
+            return {}
+        }
+    },
+    //默认搜索的内容
+    searchValue: {
+        type: String,
+        default: ''
+    },
+    //显示为空的value值
+    emptyValue: {
+        type: [String, Number],
+        default: ''
+    },
+    modelValue: {
+        type: [String, Number],
+        default: ''
+    },
+    options: {
+        type: Array,
+        default: () => {
+            return []
+        }
+    },
+    clearable: {
+        type: Boolean,
+        default: false
+    },
+    labelField: {
+        type: String,
+        default: 'label'
+    },
+    valueField: {
+        type: String,
+        default: 'value'
+    },
+    pickAlign: {
+        type: String,
+        default: 'left'
+    },
+    placeholder: {
+        type: String,
+        default: '请选择'
+    },
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+    //打开前判断
+    onBeforeOpen: {
+        type: Function,
+        default: null
+    }
+})
+//获取人员列表接口
+const getAdminList = async (realName = '') => {
+    return new Promise((resolve, reject) => {
+        const params = {
+            pageIndex: 1,
+            pageSize: 1000,
+            realName
+        }
+        getAdminListApi(params, { loading: true }).then((res) => {
+            if (res.code == 200) {
+                const selectList = res.data.list.map((item) => {
+                    return {
+                        nickname: item.nickname,
+                        [ps.labelField]: `${item.nickname}(${(item.enetAccount || '无易网号') + '-' + (item.deptFullName || '无机构')})`,
+                        value: item.id
+                    }
+                })
+                resolve(selectList)
+            } else {
+                uni.$mocpMessage.error(res.message)
+                reject()
+            }
+        })
+    })
+}
+//获取下拉框样式
+const getContentStyle = computed(() => {
+    let pickAlign = 'flex-start'
+    if (ps.pickAlign == 'center') {
+        pickAlign = 'center'
+    } else if (ps.pickAlign == 'right') {
+        pickAlign = 'flex-end'
+    }
+    return {
+        justifyContent: pickAlign
+    }
+})
+//下拉框显示的内容
+const labelValue = ref('')
+const getLabelValue = computed(() => {
+    if (labelValue.value == ps.emptyValue) {
+        return ps.placeholder
+    }
+    return labelValue.value || ps.placeholder
+})
+//获取下拉框class
+const showPlaceholder = computed(() => {
+    return !labelValue.value || labelValue.value == ps.emptyValue
+})
+const getPickerClass = computed(() => {
+    return {
+        disabled: ps.disabled,
+        placeholder: showPlaceholder.value
+    }
+})
+const show = ref(false)
+//打开
+const open = async () => {
+    if (ps.onBeforeOpen) {
+        const flag = await ps.onBeforeOpen()
+        if (!flag) return
+    }
+    show.value = true
+}
+//获取下拉框的内容Columns
+const columns = ref([])
+//弹出层输入框搜索
+const searchKey = ref()
+//点击清空按钮
+const clear = () => {
+    labelValue.value = ''
+    es('update:modelValue', ps.emptyValue)
+    es('change', ps.emptyValue)
+}
+//搜索
+const search = (value) => {
+    if (value && value != ps.emptyValue) {
+        getAdminList(value).then((data) => {
+            columns.value = data
+        })
+    } else {
+        columns.value = []
+    }
+}
+//设置默认搜索的内容
+watch(
+    () => ps.searchValue,
+    (value) => {
+        if (ps.valueField == 'label') {
+            searchKey.value = value?.split('(')[0]
+        } else {
+            searchKey.value = value
+        }
+        if (value != ps.modelValue) {
+            search(searchKey.value)
+        }
+    },
+    { immediate: true }
+)
+//监听搜索
+const onChange = debounce((value) => {
+    if (value != ps.searchValue) {
+        search(value)
+    }
+}, 200)
+//获取label的内容
+watchEffect(() => {
+    const option = columns.value?.find((option) => String(option[ps.valueField]) === String(ps.modelValue))
+    if (option) {
+        labelValue.value = option[ps.labelField]
+    } else {
+        labelValue.value = ps.emptyValue
+    }
+})
+//弹出层列表点击
+const handleChoose = (row) => {
+    es('update:modelValue', row[ps.valueField], row)
+    es('change', row[ps.valueField], row)
+    show.value = false
+}
+</script>
+<style lang="scss" scoped>
+.picker {
+    flex: auto;
+    &-content {
+        display: flex;
+        align-items: center;
+        line-height: 48rpx;
+        &.placeholder {
+            .picker-value {
+                color: $mocp-text-3;
+            }
+        }
+        &.disabled {
+            background: #f5f7fa;
+        }
+    }
+    &-value {
+        color: $mocp-text-4;
+        margin-right: 8rpx;
+    }
+    &-icon {
+        display: flex;
+        align-items: center;
+        &-close {
+            margin-left: 4rpx;
+        }
+    }
+    .popup-content {
+        &-list {
+            padding-top: 20rpx;
+            color: $mocp-text-4;
+        }
+        &-item {
+            margin-bottom: 40rpx;
+            &:last-child {
+                margin-bottom: 0;
+            }
+        }
+    }
+}
+</style>

src/mocp/store/appraisal-record.js

@@ -70,6 +70,16 @@ const useAppraisalRecordStore = defineStore('appraisalRecord', {
         }
     },
     // 配置持久化
-    persist: false
+    persist: {
+        // 调整为兼容多端的API
+        storage: {
+            setItem(key, value) {
+                uni.setStorageSync(key, value)
+            },
+            getItem(key) {
+                return uni.getStorageSync(key)
+            }
+        }
+    }
 })
 export default useAppraisalRecordStore

src/pages/modules/mocp/panel/appraisal-record/details.vue

@@ -110,8 +110,10 @@ const handleAdd = (isDuty) => {
     let realName = ''
     if (isDuty == 0) {
         params = { id: details.value.id, isDuty, mid: details.value.dmUid, opinionType: details.value.opinionType, msg: details.value.dmMsg }
+        realName = details.value.dmName
     } else {
         params = { id: details.value.id, isDuty, mid: details.value.qmUid, opinionType: details.value.qualityOpinionType, msg: details.value.qmMsg }
+        realName = details.value.qmName
     }
     uni.$mocpJump.navigateTo('/panel/appraisal-record/edit-rqm-opinion').then(() => {
         uni.$emit('appraisalRecordOpinionEdit', params, realName)

src/pages/modules/mocp/panel/appraisal-record/edit-rqm-opinion.vue

@@ -10,7 +10,13 @@
         <view class="mocp-form">
             <up-form labelPosition="left" labelWidth="auto">
                 <up-form-item :label="formData.isDuty == 0 ? '公司值班经理' : '品质中心经理'" :borderBottom="true">
-                    <global-picker pickAlign="right" clearable v-model="formData.mid" :options="selectList" emptyValue="-1" filter></global-picker>
+                    <custom-admin-picker
+                        pickAlign="right"
+                        clearable
+                        v-model="formData.mid"
+                        :searchValue="searchValue"
+                        emptyValue="-1"
+                    ></custom-admin-picker>
                 </up-form-item>
                 <up-form-item :label="formData.isDuty == 0 ? '公司值班经理意见' : '品质中心经理意见'" :borderBottom="true">
                     <global-radio
@@ -43,9 +49,7 @@ import { saveRqmOpinionApi } from 'mocp/api/appraisal-record'
 import { onLoad } from '@dcloudio/uni-app'
 import { reactive, ref } from 'vue'
 import useAppraisalRecordStore from 'mocp/store/appraisal-record'
-import useBaseStore from 'mocp/store/base'
 
-const baseStore = useBaseStore()
 const appraisalRecordStore = useAppraisalRecordStore()
 //表单数据
 const formData = reactive({
@@ -55,14 +59,11 @@ const formData = reactive({
     opinionType: -1,
     msg: ''
 })
-//获取下拉框列表
-const selectList = ref([])
+const searchValue = ref('')
 onLoad(() => {
-    uni.$once('appraisalRecordOpinionEdit', (data) => {
+    uni.$once('appraisalRecordOpinionEdit', (data, realName) => {
         Object.assign(formData, data)
-        baseStore.getAdminList().then((res) => {
-            selectList.value = res
-        })
+        searchValue.value = realName
     })
 })
 const handleRightClick = async () => {

src/pages/modules/mocp/panel/mco/step-back.vue

@@ -17,14 +17,13 @@
                         <global-picker v-model.number="formData.state" pickAlign="right" clearable dictkey="mco_stepState"></global-picker>
                     </up-form-item>
                     <up-form-item label="工作人" :borderBottom="true">
-                        <global-picker
+                        <custom-admin-picker
                             pickAlign="right"
                             clearable
                             v-model="formData.staff"
-                            :options="selectList"
-                            emptyValue="-1"
-                            filter
-                        ></global-picker>
+                            valueField="label"
+                            :searchValue="formData.staff"
+                        ></custom-admin-picker>
                     </up-form-item>
                     <up-form-item label="实际工时" :borderBottom="true">
                         <up-input v-model="formData.stateP" inputAlign="right" border="none" placeholder="请输入" clearable type="number">
@@ -62,12 +61,10 @@
 import { storeToRefs } from 'pinia'
 import useMcoStore from 'mocp/store/mco'
 import { timeStampFormat } from 'mocp/utils/tool'
-import useBaseStore from 'mocp/store/base'
 import { reactive, ref } from 'vue'
 import { onLoad } from '@dcloudio/uni-app'
 import { addBackApi } from 'mocp/api/mco'
 
-const baseStore = useBaseStore()
 const mcoStore = useMcoStore()
 const { getStepDetails } = storeToRefs(mcoStore)
 const formData = reactive({
@@ -78,8 +75,6 @@ const formData = reactive({
     content: '',
     contentFile: ''
 })
-//获取下拉框列表
-const selectList = ref([])
 onLoad(() => {
     const details = getStepDetails.value.backList || {}
     formData.state = details.state
@@ -87,15 +82,12 @@ onLoad(() => {
     formData.stateP = details.actualWork.split('X')[0]
     formData.stateH = details.actualWork.split('X')[1]
     formData.content = details.content
-    baseStore.getAdminList().then((res) => {
-        selectList.value = res
-    })
 })
 //提交
 const handleFooterClick = async () => {
     const params = {}
     params.id = getStepDetails.value.id
-    if (getStepDetails.value.backList) {
+    if (getStepDetails.value?.backList?.id) {
         params.isAdd = 2
     } else {
         params.isAdd = 1