feat: 字典项数据优化

components.d.ts

@@ -10,6 +10,7 @@ declare module 'vue' {
         // 全局组件
         GlobalAlbum: typeof import('./src/mocp/components/global-album/global-album.vue')['default']
         GlobalButton: typeof import('./src/mocp/components/global-button/global-button.vue')['default']
+        GlobalCheckbox: typeof import('./src/mocp/components/global-checkbox/global-checkbox.vue')['default']
         GlobalDate: typeof import('./src/mocp/components/global-date/global-date.vue')['default']
         GlobalEmpty: typeof import('./src/mocp/components/global-empty/global-empty.vue')['default']
         GlobalField: typeof import('./src/mocp/components/global-field/global-field.vue')['default']

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

+<template>
+    <view class="checkbox" :style="getStyle">
+        <up-checkbox-group
+            :placement="placement"
+            @change="checkboxChange"
+            :disabled="disabled"
+            :activeColor="activeColor"
+            :labelSize="labelSize"
+            :labelColor="labelColor"
+            :borderBottom="borderBottom"
+        >
+            <up-checkbox
+                :customStyle="getCustomStyle"
+                v-for="(item, index) in getColumns"
+                :key="index"
+                :label="item.label"
+                :name="item.value"
+            ></up-checkbox>
+        </up-checkbox-group>
+    </view>
+</template>
+
+<script setup>
+import { computed, ref } from 'vue'
+import * as dictData from 'mocp/hooks/use-dict/dict-data'
+import { cloneDeep } from 'lodash'
+
+const es = defineEmits(['update:modelValue', 'change'])
+const ps = defineProps({
+    //显示为空的value值
+    emptyValue: {
+        type: [String, Number],
+        default: ''
+    },
+    dictkey: {
+        type: String,
+        default: ''
+    },
+    modelValue: {
+        type: String,
+        default: ''
+    },
+    options: {
+        type: Array,
+        default: () => {
+            return [
+                {
+                    label: '苹果',
+                    value: 1
+                },
+                {
+                    label: '香蕉',
+                    value: 2
+                },
+                {
+                    label: '橙子',
+                    value: 3
+                }
+            ]
+        }
+    },
+    labelField: {
+        type: String,
+        default: 'label'
+    },
+    valueField: {
+        type: String,
+        default: 'value'
+    },
+    valueSplit: {
+        type: String,
+        default: ','
+    },
+    checkboxAlign: {
+        type: String,
+        default: 'left'
+    },
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+    customStyle: {
+        type: Object,
+        default: () => {
+            return {}
+        }
+    },
+    activeColor: {
+        type: String,
+        default: '#165dff'
+    },
+    // row|column
+    placement: {
+        type: String,
+        default: 'row'
+    },
+    labelSize: {
+        type: String,
+        default: '28rpx'
+    },
+    labelColor: {
+        type: String,
+        default: '#1D2129'
+    },
+    borderBottom: {
+        type: Boolean,
+        default: false
+    }
+})
+//获取复选框样式
+const getStyle = computed(() => {
+    let checkboxAlign = 'flex-start'
+    if (ps.checkboxAlign == 'center') {
+        checkboxAlign = 'center'
+    } else if (ps.checkboxAlign == 'right') {
+        checkboxAlign = 'flex-end'
+    }
+    return {
+        justifyContent: checkboxAlign
+    }
+})
+const getCustomStyle = computed(() => {
+    const _style = {
+        ...ps.customStyle
+    }
+    if (ps.placement == 'row') {
+        _style.marginLeft = '32rpx'
+    }
+    return _style
+})
+//获取下拉框的内容Columns
+const getColumns = computed(() => {
+    if (ps.dictkey) {
+        return cloneDeep(dictData[ps.dictkey])
+    } else {
+        if (ps.options && Object.prototype.toString.call(ps.options[0]) == '[object Object]') {
+            return ps.options
+        } else {
+            return ps.options.map((item) => {
+                return {
+                    [ps.labelField]: item,
+                    [ps.valueField]: item
+                }
+            })
+        }
+    }
+})
+const checkboxChange = (value) => {
+    es('update:modelValue', value.join(ps.valueSplit))
+    es('change', value.join(ps.valueSplit))
+}
+</script>
+<style lang="scss" scoped>
+.checkbox {
+    display: flex;
+}
+</style>

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

@@ -131,11 +131,6 @@ const ps = defineProps({
         type: String,
         default: '保存'
     },
-    //是否显示返回
-    showBack: {
-        type: Boolean,
-        default: true
-    },
     //页面标题
     title: {
         type: String,

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

@@ -29,7 +29,7 @@
 
 <script setup>
 import { computed, ref, watch } from 'vue'
-import * as dictData from './dictData'
+import * as dictData from 'mocp/hooks/use-dict/dict-data'
 import { cloneDeep } from 'lodash'
 
 const es = defineEmits(['update:modelValue', 'change'])

src/mocp/components/global-picker/dictData.js → src/mocp/hooks/use-dict/dict-data/appraisal-record.js

-/**
- * 下拉框字典项
- */
 export const opinionType = [
     { label: 'N/A', value: 0 },
     { label: '不同意', value: 1 },
@@ -15,16 +12,3 @@ export const eventType = [
     { label: '扣分', value: 0 },
     { label: '加分', value: 1 }
 ]
-export const feedbackOpts = [
-    { label: '是', value: 1 },
-    { label: '落实执行', value: 0 }
-]
-export const feedbackState = [
-    { label: 'OPEN', value: 1 },
-    { label: 'CLOSE', value: 2 }
-]
-export const leaderState = [
-    { label: '同意', value: '1' },
-    { label: '不同意', value: '0' },
-    { label: '部分同意', value: '2' }
-]

src/mocp/hooks/use-dict/dict-data/assign-work.js

+export const feedbackOpts = [
+    { label: '是', value: 1 },
+    { label: '落实执行', value: 0 }
+]
+export const feedbackState = [
+    { label: 'OPEN', value: 1 },
+    { label: 'CLOSE', value: 2 }
+]
+export const leaderState = [
+    { label: '同意', value: '1' },
+    { label: '不同意', value: '0' },
+    { label: '部分同意', value: '2' }
+]

src/mocp/hooks/use-dict/dict-data/index.js

+export * from './appraisal-record'
+export * from './assign-work'

src/mocp/components/global-picker/useDict.js → src/mocp/hooks/use-dict/useDict.js

-import * as dictData from './dictData'
+import * as dictData from './dict-data'
 import { cloneDeep } from 'lodash'
 
 export function useDict(dictkey, opt) {

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

@@ -80,10 +80,10 @@
 import CardDetails from './components/card-details.vue'
 import CardDetailsItem from './components/card-details-item.vue'
 import { timeStampFormat } from 'mocp/utils/tool'
-import { useGetDictByValue } from 'mocp/components/global-picker/useDict'
 import useAppraisalRecordStore from 'mocp/store/appraisal-record'
 import { storeToRefs } from 'pinia'
 import { onLoad } from '@dcloudio/uni-app'
+import { useGetDictByValue } from 'mocp/hooks/use-dict/useDict'
 
 const query = defineProps(['id'])
 const appraisalRecordStore = useAppraisalRecordStore()

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

@@ -131,7 +131,7 @@ import CardDetails from './components/card-details.vue'
 import CardDetailsItem from './components/card-details-item.vue'
 import { onShow } from '@dcloudio/uni-app'
 import useBaseStore from 'mocp/store/base'
-import { useGetDictByValue } from 'mocp/components/global-picker/useDict'
+import { useGetDictByValue } from 'mocp/hooks/use-dict/useDict'
 import { rules, formData, fileList, formRef } from './constants/edit.compositions'
 import { changeAc, handleUpload } from './constants/edit.functionals'
 import useAppraisalRecordStore from 'mocp/store/appraisal-record'

src/pages/modules/mocp/panel/assign-work/details.vue

@@ -128,7 +128,7 @@ import { storeToRefs } from 'pinia'
 import { onLoad, onUnload } from '@dcloudio/uni-app'
 import useBaseStore from 'mocp/store/base'
 import { timeStampFormat } from 'mocp/utils/tool'
-import { useGetDictByValue } from 'mocp/components/global-picker/useDict'
+import { useGetDictByValue } from 'mocp/hooks/use-dict/useDict'
 
 const baseStore = useBaseStore()
 const query = defineProps(['id'])

src/pages/modules/mocp/panel/assign-work/edit-validate.vue

@@ -13,7 +13,7 @@
                     <global-picker pickAlign="right" clearable></global-picker>
                 </up-form-item>
                 <up-form-item label="重复/同类事件" :borderBottom="true">
-                    <global-picker pickAlign="right" clearable></global-picker>
+                    <global-checkbox checkboxAlign="right" v-model="box"></global-checkbox>
                 </up-form-item>
                 <up-form-item label="验证附件" labelPosition="top" :borderBottom="true">
                     <view style="margin-top: 24rpx">
@@ -28,11 +28,17 @@
     </global-page>
 </template>
 
-<script setup></script>
+<script setup>
+import { ref, watch } from 'vue'
+
+const box = ref('')
+watch(box, (value) => {
+    console.log(value)
+})
+</script>
 <style lang="scss" scoped>
 .mocp-form {
     background: #fff;
-    margin-bottom: 24rpx;
     padding: 0 32rpx;
 }
 </style>