字典项配置增加颜色选择

src/views/system/dict/components/DictItemModal.vue

@@ -1,6 +1,22 @@
 <template>
   <BasicModal v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit" width="800px">
-    <BasicForm @register="registerForm" />
+    <!-- update-begin---author:wangshuai---date:2023-10-23---for:【QQYUN-6804】后台模式字典没有颜色配置---  -->
+    <BasicForm @register="registerForm" >
+      <template #itemColor="{ model, field }">
+        <div class="item-tool">
+          <div
+              v-for="(item,index) in Colors"
+              :style="{ color: item[0] }"
+              :class="model.itemColor===item[0]?'item-active':''"
+              class="item-color"
+              @click="itemColorClick(item)">
+            <div class="item-color-border"></div>
+            <div class="item-back" :style="{ background: item[0] }"></div>
+          </div>
+        </div>
+      </template>
+    </BasicForm>
+    <!-- update-end---author:wangshuai---date:2023-10-23---for:【QQYUN-6804】后台模式字典没有颜色配置---  -->
   </BasicModal>
 </template>
 <script lang="ts" setup>
@@ -9,6 +25,8 @@
   import { BasicForm, useForm } from '/src/components/Form';
   import { itemFormSchema } from '../dict.data';
   import { saveOrUpdateDictItem } from '../dict.api';
+  import { Colors } from '/@/utils/dict/DictColors.js'
+  
   // 声明Emits
   const emit = defineEmits(['success', 'register']);
   const props = defineProps({ dictId: String });
@@ -60,4 +78,49 @@
       setModalProps({ confirmLoading: false });
     }
   }
+  
+  /**
+   * 字典颜色点击事件
+   * 
+   * @param index
+   * @param item
+   * @param model
+   */
+  function itemColorClick(item) {
+    console.log(item)
+    setFieldsValue({ itemColor: item[0] })
+  }
+  
 </script>
+<style lang="less" scoped>
+   /*begin 字典颜色配置样式*/
+  .item-tool{
+    display: flex;
+    flex-wrap: wrap;
+    .item-color{
+      width: 18px;
+      display: flex;
+      justify-content: center;
+      cursor: pointer;
+      align-items: center;
+      margin-right: 10px;
+    }
+    .item-back{
+      width: 18px;
+      height: 18px;
+      border-radius: 50%;
+    }
+  }
+  .item-color-border{
+    visibility: hidden;
+  }
+  .item-active .item-color-border{
+    visibility: visible;
+    position: absolute;
+    border: 1px solid;
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+  }
+   /*end 字典颜色配置样式*/
+</style>

src/views/system/dict/dict.data.ts

@@ -2,6 +2,8 @@ import { BasicColumn } from '/@/components/Table';
 import { FormSchema } from '/@/components/Table';
 import { dictItemCheck } from './dict.api';
 import { rules } from '/@/utils/helper/validator';
+import { h } from "vue";
+
 export const columns: BasicColumn[] = [
   {
     title: '字典名称',
@@ -93,6 +95,17 @@ export const dictItemColumns: BasicColumn[] = [
     dataIndex: 'itemValue',
     width: 80,
   },
+  {
+    title: '字典颜色',
+    dataIndex: 'itemColor',
+    width: 80,
+    align:'center',
+    customRender:({ text }) => {
+      return h('div', {
+        style: {"background": text, "width":"18px","height":"18px","border-radius":"50%","margin":"0 auto"}
+      })
+    }
+  },
 ];
 
 export const dictItemSearchFormSchema: FormSchema[] = [
@@ -159,6 +172,12 @@ export const itemFormSchema: FormSchema[] = [
       ];
     },
   },
+  {
+    label: '颜色值',
+    field: 'itemColor',
+    component: 'Input',
+    slot:'itemColor'
+  },
   {
     label: '描述',
     field: 'description',