From 02d0c92e8993f2f0c2bee36fb2f1914b6410f7f8 Mon Sep 17 00:00:00 2001
From: dap1 <15891557205@163.com>
Date: Sat, 10 Jun 2023 13:47:57 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AD=97=E5=85=B8=E6=A0=87=E7=AD=BE?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=94=AF=E6=8C=81=E9=A2=84=E8=A7=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/system/dict/dict.data.ts | 126 ++++++++++++++++-------------
 1 file changed, 71 insertions(+), 55 deletions(-)

diff --git a/src/views/system/dict/dict.data.ts b/src/views/system/dict/dict.data.ts
index b1173b99..1d21ed9e 100644
--- a/src/views/system/dict/dict.data.ts
+++ b/src/views/system/dict/dict.data.ts
@@ -1,6 +1,74 @@
 import { BasicColumn, FormSchema, useRender } from '@/components/Table'
 import { DICT_TYPE, getDictOptions } from '@/utils/dict'
 
+const options = [
+  {
+    value: '',
+    label: '无'
+  },
+  {
+    value: 'processing',
+    label: '主要'
+  },
+  {
+    value: 'success',
+    label: '成功'
+  },
+  {
+    value: 'default',
+    label: '默认'
+  },
+  {
+    value: 'warning',
+    label: '警告'
+  },
+  {
+    value: 'error',
+    label: '危险'
+  },
+  {
+    value: 'pink',
+    label: 'pink'
+  },
+  {
+    value: 'red',
+    label: 'red'
+  },
+  {
+    value: 'orange',
+    label: 'orange'
+  },
+  {
+    value: 'green',
+    label: 'green'
+  },
+  {
+    value: 'cyan',
+    label: 'cyan'
+  },
+  {
+    value: 'blue',
+    label: 'blue'
+  },
+  {
+    value: 'purple',
+    label: 'purple'
+  }
+]
+
+function previewOptions() {
+  return options.map((option) => {
+    const { value, label } = option
+    if (value === '') {
+      return option
+    }
+    return {
+      label: useRender.renderTag(label, value),
+      value
+    }
+  })
+}
+
 export const dataColumns: BasicColumn[] = [
   {
     title: '字典编码',
@@ -119,67 +187,15 @@ export const dataFormSchema: FormSchema[] = [
     field: 'colorType',
     component: 'Select',
     componentProps: {
-      options: [
-        {
-          value: '',
-          label: '空'
-        },
-        {
-          value: 'processing',
-          label: '主要'
-        },
-        {
-          value: 'success',
-          label: '成功'
-        },
-        {
-          value: 'default',
-          label: '默认'
-        },
-        {
-          value: 'warning',
-          label: '警告'
-        },
-        {
-          value: 'error',
-          label: '危险'
-        },
-        {
-          value: 'pink',
-          label: 'pink'
-        },
-        {
-          value: 'red',
-          label: 'red'
-        },
-        {
-          value: 'orange',
-          label: 'orange'
-        },
-        {
-          value: 'green',
-          label: 'green'
-        },
-        {
-          value: 'cyan',
-          label: 'cyan'
-        },
-        {
-          value: 'blue',
-          label: 'blue'
-        },
-        {
-          value: 'purple',
-          label: 'purple'
-        }
-      ]
+      options: previewOptions()
     }
   },
   {
     label: 'CSS Class',
     field: 'cssClass',
     component: 'Input',
-    helpMessage: '输入hex模式的颜色，例如#108ee9'
+    helpMessage: '输入hex模式的颜色, 例如#108ee9',
+    rules: [{ required: false, message: '输入正确的16进制颜色', pattern: /^#([0-9a-fA-F]{3}){1,2}$/, trigger: 'blur' }]
   },
   {
     label: '备注',