feat: dictTag

src/components/DictTag/index.ts

@@ -0,0 +1,4 @@
+import { withInstall } from '@/utils'
+import dictTag from './src/DictTag.vue'
+
+export const DictTag = withInstall(dictTag)

src/components/DictTag/src/DictTag.vue

@@ -0,0 +1,55 @@
+<script lang="tsx">
+import { defineComponent, PropType, ref } from 'vue'
+import { isHexColor } from '@/utils/color'
+import { Tag } from 'ant-design-vue'
+import { DictDataType, getDictOptions } from '@/utils/dict'
+
+export default defineComponent({
+  name: 'DictTag',
+  props: {
+    type: {
+      type: String as PropType<string>,
+      required: true
+    },
+    value: {
+      type: [String, Number, Boolean] as PropType<string | number | boolean>,
+      required: true
+    }
+  },
+  setup(props) {
+    const dictData = ref<DictDataType>()
+    const getDictObj = (dictType: string, value: string) => {
+      const dictOptions = getDictOptions(dictType)
+      dictOptions.forEach((dict: DictDataType) => {
+        if (dict.value === value) {
+          if (dict.colorType + '' === 'primary' || dict.colorType + '' === 'default') {
+            dict.colorType = ''
+          }
+          dictData.value = dict
+        }
+      })
+    }
+    const rederDictTag = () => {
+      if (!props.type) {
+        return null
+      }
+      // 解决自定义字典标签值为零时标签不渲染的问题
+      if (props.value === undefined) {
+        return null
+      }
+      getDictObj(props.type, props.value.toString())
+      // 添加标签的文字颜色为白色，解决自定义背景颜色时标签文字看不清的问题
+      return (
+        <Tag
+          style={dictData.value?.cssClass ? 'color: #108ee9' : ''}
+          type={dictData.value?.colorType}
+          color={dictData.value?.cssClass && isHexColor(dictData.value?.cssClass) ? dictData.value?.cssClass : ''}
+        >
+          {dictData.value?.label}
+        </Tag>
+      )
+    }
+    return () => rederDictTag()
+  }
+})
+</script>

src/components/Table/index.ts

@@ -7,5 +7,6 @@ export * from './src/types/table'
 export * from './src/types/pagination'
 export * from './src/types/tableAction'
 export { useTable } from './src/hooks/useTable'
+export { useRender } from './src/hooks/useRender'
 export type { FormSchema, FormProps } from '@/components/Form/src/types/form'
 export type { EditRecordRow } from './src/components/editable'

src/components/Table/src/hooks/useRender.ts

@@ -0,0 +1,39 @@
+import { DictTag } from '@/components/DictTag'
+import { Image, Tag } from 'ant-design-vue'
+import dayjs from 'dayjs'
+import { h } from 'vue'
+
+export const useRender = {
+  // 渲染图片
+  renderImg: (text) => {
+    if (text) {
+      return h(Image, {
+        src: text,
+        height: 80,
+        width: 80
+      })
+    }
+  },
+  renderTag: (text, color?) => {
+    if (!color) {
+      return h(Tag, { color }, () => text)
+    } else {
+      return h('span', text)
+    }
+  },
+  renderDate: (text, format?) => {
+    if (!format) {
+      return dayjs(text).format('YYYY-MM-DD HH:mm:ss')
+    } else {
+      return dayjs(text).format(format)
+    }
+  },
+  renderDict: (text, type) => {
+    if (type) {
+      return h(DictTag, {
+        type: type,
+        value: text
+      })
+    }
+  }
+}

src/views/system/post/index.vue

@@ -30,11 +30,11 @@
   </div>
 </template>
 <script lang="ts" setup name="Post">
-import { BasicTable, useTable, TableAction, BasicColumn, FormSchema } from '@/components/Table'
+import { BasicTable, useTable, useRender, TableAction, BasicColumn, FormSchema } from '@/components/Table'
 import { getPostPageApi } from '@/api/system/post'
 import { useModal } from '@/components/Modal'
 import PostModel from './PostModel.vue'
-import dayjs from 'dayjs'
+import { DICT_TYPE } from '@/utils/dict'
 
 const columns: BasicColumn[] = [
   {
@@ -60,7 +60,10 @@ const columns: BasicColumn[] = [
   {
     title: '状态',
     dataIndex: 'status',
-    width: 180
+    width: 180,
+    customRender: ({ text }) => {
+      return useRender.renderDict(text, DICT_TYPE.COMMON_STATUS)
+    }
   },
   {
     title: '备注',
@@ -70,7 +73,7 @@ const columns: BasicColumn[] = [
     title: '创建时间',
     dataIndex: 'createTime',
     customRender: ({ text }) => {
-      return dayjs(text).format('YYYY-MM-DD HH:mm:ss')
+      return useRender.renderDate(text)
     }
   }
 ]
@@ -85,7 +88,8 @@ const searchFormSchema: FormSchema[] = [
   {
     field: 'code',
     label: '岗位编码',
-    component: 'Input'
+    component: 'Input',
+    colProps: { span: 8 }
   },
   {
     field: 'status',