feat: 字典类型处理

src/api/system/dict.ts

@@ -5,6 +5,7 @@ import { AxiosPromise } from 'axios'
 const api = {
 	page: '/sys/dict/page',
 	listParent: '/sys/dict/list-parent',
+	listSelectOption: '/sys/dict/list-select-options',
 	create: '/sys/dict/create',
 	update: '/sys/dict/update',
 	delete: '/sys/dict/delete'
@@ -27,6 +28,14 @@ function dictListParentApi(): AxiosPromise {
 	})
 }
 
+// 通过字典编码查询表单下拉选择项列表
+function dictListSelectOptionApi(code: string): AxiosPromise {
+	return request({
+		url: `${api.listSelectOption}?code=${code}`,
+		method: 'get'
+	})
+}
+
 /**
  * 字典管理  - 新增编辑保存
  */

src/components/packages/formEditor/components/Panels/Config/components/PropsPanel.vue

@@ -536,6 +536,16 @@ onMounted(() => {
 				v-bind="utils.addTestId('configPanel:placeholder')"
 			/>
 		</PanelsConfigComponentsTypeComponent>
+		<!-- select dict类型(renderType === 4) 选择字典类型 -->
+		<PanelsConfigComponentsTypeComponent
+			v-if="checkTypeBySelected(['select'], 'dictCode') && target.options.renderType === 4"
+			:layout-type="0"
+			:label="t('er.config.propsPanel.dictCode')"
+		>
+			<el-select v-model="target.options.dictCode" style="width: 100%" v-bind="utils.addTestId('configPanel:dictCode')">
+				<el-option v-for="item in ER.dictParentList.value" :label="item.label" :value="item.value" />
+			</el-select>
+		</PanelsConfigComponentsTypeComponent>
 		<!-- signature 签名配置 笔画颜色  -->
 		<PanelsConfigComponentsTypeComponent
 			v-if="checkTypeBySelected(['signature'], 'brushColor')"

src/components/packages/formEditor/componentsConfig.js

@@ -151,6 +151,33 @@ export const fieldsConfig = [
 					renderType: 3
 				}
 			},
+			{
+				// 渲染组件类型
+				type: 'select',
+				label: '字典',
+				// icon 名称
+				icon: 'dict',
+				key: '', // 暂无用
+				id: '', // 暂无用
+				// 配置相关
+				options: {
+					filterable: true,
+					multiple: false,
+					checkStrictly: false,
+					// 默认值
+					defaultValue: '',
+					placeholder: '',
+					labelWidth: 100,
+					isShowLabel: true,
+					required: false,
+					disabled: false,
+					clearable: true,
+					// 额外渲染类型标记(label转义 render 配置等)
+					renderType: 4,
+					props: { value: 'id', label: 'name' },
+					dictCode: '' // 字典编码
+				}
+			},
 			{
 				type: 'cascader',
 				label: '部门',

src/components/packages/formEditor/index.vue

@@ -22,12 +22,13 @@ import { ls } from '@/utils/index'
 import user from '@/api/system/user'
 import role from '@/api/system/role'
 import department from '@/api/system/department'
-// import department from '@/api/system/department'
+import dict from '@/api/system/dict'
 
 const token = ls.get('token')
 const userOptList = ref([])
 const roleOptList = ref([])
 const departmentOptList = ref([])
+const dictParentList = ref([])
 const emit = defineEmits(['listener'])
 const props = defineProps(
 	_.merge(
@@ -172,6 +173,22 @@ const getDepartmentList = async () => {
 	departmentOptList.value = data || []
 }
 getDepartmentList()
+// 字典下拉配置
+const getDictParentList = async () => {
+	let data = await dict.dictListParentApi().then(res => {
+		return (res || []).map(v => {
+			return {
+				...v,
+				label: v.name,
+				value: v.code,
+				// 下拉数据
+				options: []
+			}
+		})
+	})
+	dictParentList.value = data
+}
+getDictParentList()
 
 const setSelection = node => {
 	let result = ''
@@ -224,13 +241,18 @@ const addFieldData = (node, isCopy = false) => {
 	if (/^(radio|cascader|checkbox|select)$/.test(node.type)) {
 		if (node.type === 'select') {
 			if (node.options.renderType === 2) {
+				// 选择人员
 				node.options.options = userOptList.value
-			}
-			if (node.options.renderType === 3) {
+			} else if (node.options.renderType === 3) {
+				// 选择角色
 				node.options.options = roleOptList.value
+			} else if (node.options.renderType === 4) {
+				// dictListSelectOptionApi
+				// 字典父级 // 选择 todo...字典 dict
+				node.options.options = dictParentList.value // .xxxx todo...
 			}
-		}
-		if (node.type === 'cascader') {
+		} else if (node.type === 'cascader') {
+			// 部门类型
 			if (node.options.renderType === 2) {
 				node.options.options = departmentOptList.value
 			}
@@ -540,7 +562,8 @@ provide('Everright', {
 	addFieldData,
 	canvesScrollRef,
 	fireEvent,
-	getData
+	getData,
+	dictParentList
 })
 </script>
 <template>

src/components/packages/formEditor/locale/en.js

@@ -9,7 +9,7 @@ export default {
 			number: 'Number',
 			radio: 'Radio',
 			checkbox: 'Checkbox',
-			select: ['Select', 'Employee', 'Role', 'Department'],
+			select: ['Select', 'Employee', 'Role', 'Dict'], //, 'Department'
 			time: 'Time',
 			date: 'Date',
 			rate: 'Rate',
@@ -96,6 +96,7 @@ export default {
 				id: 'Id',
 				defaultContent: 'Default content',
 				placeholder: 'Placeholder',
+				dictCode: 'Dict Code',
 				brushColor: 'Brush color',
 				format: 'Format',
 				dateType: 'Date type',

src/components/packages/formEditor/locale/zh-cn.js

@@ -9,7 +9,7 @@ export default {
 			number: '数字',
 			radio: '单选框',
 			checkbox: '复选框',
-			select: ['下拉框', '人员', '角色', '部门'],
+			select: ['下拉框', '人员', '角色', '字典'], //, '部门'
 			time: '时间',
 			date: '日期',
 			rate: '评分',
@@ -96,6 +96,7 @@ export default {
 				id: '字段标识',
 				defaultContent: '默认内容',
 				placeholder: '提示文字',
+				dictCode: '字典Code',
 				brushColor: '画笔颜色',
 				format: '显示格式',
 				dateType: '日期类型',

src/components/packages/icon/svg/dict.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1715845711850" class="icon" viewBox="0 0 1026 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17424" xmlns:xlink="http://www.w3.org/1999/xlink" width="48.09375" height="48"><path d="M739.265306 929.959184h-449.306122c-45.97551 0-83.591837-37.616327-83.591837-83.591837V177.632653c0-45.97551 37.616327-83.591837 83.591837-83.591837h449.306122c45.97551 0 83.591837 37.616327 83.591837 83.591837v668.734694c0 45.97551-37.616327 83.591837-83.591837 83.591837z m-449.306122-794.122449c-22.987755 0-41.795918 18.808163-41.795919 41.795918v668.734694c0 22.987755 18.808163 41.795918 41.795919 41.795918h449.306122c22.987755 0 41.795918-18.808163 41.795918-41.795918V177.632653c0-22.987755-18.808163-41.795918-41.795918-41.795918h-449.306122z" fill="currentColor" p-id="17425"></path><path d="M540.734694 463.412245l-114.938776-62.693878-114.938775 62.693878V94.040816h229.877551v369.371429z m-114.938776-110.236735l73.142858 40.228572V135.836735h-146.285715v257.567347l73.142857-40.228572zM697.469388 760.685714h-365.714286c-11.493878 0-20.897959-9.404082-20.897959-20.897959s9.404082-20.897959 20.897959-20.897959h365.714286c11.493878 0 20.897959 9.404082 20.897959 20.897959s-9.404082 20.897959-20.897959 20.897959zM514.612245 652.538776h-182.857143c-11.493878 0-20.897959-9.404082-20.897959-20.89796s9.404082-20.897959 20.897959-20.897959h182.857143c11.493878 0 20.897959 9.404082 20.897959 20.897959s-9.404082 20.897959-20.897959 20.89796z" fill="currentColor" p-id="17426"></path></svg>