feat: 选择部门 自定义表单嵌入

src/components/SelectRole.vue

@@ -136,7 +136,7 @@ const selectHandler = () => {
 const queryRoleData = () => {
 	dataInfo.value.loading = true
 	role
-		.rolePageApi({ page: 1, pageSize: 999 })
+		.rolePageApi({ page: 1, pageSize: 99999 })
 		.then((res: any) => {
 			dataInfo.value = {
 				list: res.records || [],

src/components/SelectUser.vue

@@ -188,7 +188,7 @@ const groupClick = (data: any) => {
 const queryGroupData = () => {
 	groupData.value.loading = true
 	department
-		.departmentPageApi({ page: 1, pageSize: 20 })
+		.departmentPageApi({ page: 1, pageSize: 9999 })
 		.then((res: any) => {
 			const list = res || []
 			list.unshift({ id: '', name: '所有' })

src/components/packages/formEditor/components/FormTypes/SelectDepart/mobile.vue

@@ -0,0 +1,38 @@
+<script>
+import hooks from '@ER/hooks'
+export default {
+	name: 'ErSelectDepart',
+	inheritAttrs: false,
+	customOptions: {}
+}
+</script>
+<script setup>
+import { watch, ref } from 'vue'
+import department from '@/api/system/department'
+const props = defineProps(['data', 'params'])
+const ns = hooks.useNamespace('FormTypesSelectDepart_mobile')
+const loadOptions = ref({ list: [], loading: false })
+const queryDepartOptions = () => {
+	// {title, content}[]
+	/*if (!dictCode) {
+		loadOptions.value = {
+			loading: false,
+			list: []
+		}
+		return
+	}*/
+	loadOptions.value.loading = true
+	department.departmentPageApi({ page: 1, pageSize: 99999 }).then(list => {
+		loadOptions.value = {
+			loading: false,
+			list
+		}
+	})
+}
+queryDepartOptions()
+</script>
+<template>
+	<el-cascader v-model="data.options.defaultValue" :loading="loadOptions.loading" :class="[ns.b()]" v-bind="params" :options="loadOptions.list" />
+</template>
+
+<style scoped></style>

src/components/packages/formEditor/components/FormTypes/SelectDepart/pc.vue

@@ -0,0 +1,48 @@
+<script>
+import hooks from '@ER/hooks'
+export default {
+	name: 'ErSelectDepart',
+	inheritAttrs: false,
+	customOptions: {}
+}
+</script>
+<script setup>
+import { watch, ref } from 'vue'
+import department from '@/api/system/department'
+const props = defineProps(['data', 'params'])
+const ns = hooks.useNamespace('FormTypesSelectDepart_pc')
+const loadOptions = ref({ list: [], loading: false })
+const queryDepartOptions = () => {
+	// {title, content}[]
+	/*if (!dictCode) {
+		loadOptions.value = {
+			loading: false,
+			list: []
+		}
+		return
+	}*/
+	loadOptions.value.loading = true
+	department.departmentPageApi({ page: 1, pageSize: 99999 }).then(list => {
+		loadOptions.value = {
+			loading: false,
+			list
+		}
+	})
+}
+queryDepartOptions()
+/*watch(
+	() => props.params?.dictCode,
+	dictCode => {
+		queryDepartOptions(dictCode)
+		// console.error(dictCode, 'SelectDepart params')
+	},
+	{
+		immediate: true
+	}
+)*/
+</script>
+<template>
+	<el-cascader v-model="data.options.defaultValue" :loading="loadOptions.loading" :class="[ns.b()]" v-bind="params" :options="loadOptions.list"/>
+</template>
+
+<style scoped></style>

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

@@ -437,7 +437,7 @@ onMounted(() => {
 				checkTypeBySelected(['subform'], 'defaultValue')
 					? target.list[0].length
 					: checkTypeBySelected(
-							['input', 'textarea', 'time', 'date', 'number', 'rate', 'color', 'switch', 'slider', 'button', 'divider', 'cascader', 'region'],
+							['input', 'textarea', 'time', 'date', 'number', 'rate', 'color', 'switch', 'slider', 'button', 'divider', 'cascader', 'selectDepart', 'region'],
 							'defaultValue'
 					  ) ||
 					  ([2, 3].indexOf(target.options.renderType) > -1 && target.type === 'select')
@@ -445,7 +445,7 @@ onMounted(() => {
 			:label="t('er.config.propsPanel.defaultContent')"
 			:layout-type="0"
 		>
-			<template v-if="checkTypeBySelected(['cascader', 'region'], 'defaultValue')">
+			<template v-if="checkTypeBySelected(['cascader', 'selectDepart', 'region'], 'defaultValue')">
 				<el-cascader
 					v-model="target.options.defaultValue"
 					:class="[utils.addTestId('configPanel-defaultValue', 'id')]"
@@ -522,12 +522,12 @@ onMounted(() => {
 		</PanelsConfigComponentsTypeComponent>
 		<!-- placeholder -->
 		<PanelsConfigComponentsTypeComponent
-			v-if="checkTypeBySelected(['input', 'textarea', 'select', 'selectDict', 'cascader', 'time', 'date', 'html', 'region'], 'placeholder')"
+			v-if="checkTypeBySelected(['input', 'textarea', 'select', 'selectDict', 'selectDepart', 'cascader', 'time', 'date', 'html', 'region'], 'placeholder')"
 			:layout-type="0"
 			:label="t('er.config.propsPanel.placeholder')"
 		>
 			<el-input
-				v-if="checkTypeBySelected(['input', 'select', 'selectDict', 'cascader', 'time', 'date', 'html', 'region'], 'placeholder')"
+				v-if="checkTypeBySelected(['input', 'select', 'selectDict', 'selectDepart', 'cascader', 'time', 'date', 'html', 'region'], 'placeholder')"
 				v-model="target.options.placeholder"
 				clearable
 				v-bind="utils.addTestId('configPanel:placeholder')"
@@ -908,7 +908,7 @@ onMounted(() => {
 			>
 			</PanelsConfigComponentsCheckboxComponent>
 			<PanelsConfigComponentsCheckboxComponent
-				v-if="checkTypeBySelected(['select', 'selectDict', 'cascader', 'uploadfile'], 'multiple')"
+				v-if="checkTypeBySelected(['select', 'selectDict', 'selectDepart', 'cascader', 'uploadfile'], 'multiple')"
 				:label="t('er.config.propsPanel.multiple')"
 				field="multiple"
 				v-bind="utils.addTestId('configPanel:multiple')"
@@ -916,7 +916,7 @@ onMounted(() => {
 			>
 			</PanelsConfigComponentsCheckboxComponent>
 			<PanelsConfigComponentsCheckboxComponent
-				v-if="checkTypeBySelected(['select', 'selectDict', 'cascader', 'transfer', 'region'], 'filterable')"
+				v-if="checkTypeBySelected(['select', 'selectDict', 'selectDepart', 'cascader', 'transfer', 'region'], 'filterable')"
 				:label="t('er.config.propsPanel.filterable')"
 				field="filterable"
 				v-bind="utils.addTestId('configPanel:filterable')"
@@ -951,14 +951,14 @@ onMounted(() => {
 			>
 			</PanelsConfigComponentsCheckboxComponent>
 			<PanelsConfigComponentsCheckboxComponent
-				v-if="checkTypeBySelected(['cascader'], 'anyNode')"
+				v-if="checkTypeBySelected(['cascader', 'selectDepart'], 'anyNode')"
 				:label="t('er.config.propsPanel.anyNode')"
 				field="checkStrictly"
 				v-bind="utils.addTestId('configPanel:anyNode')"
 				@change="checkLogicData"
 			/>
 			<PanelsConfigComponentsCheckboxComponent
-				v-if="checkTypeBySelected(['input', 'select', 'selectDict', 'time', 'date', 'cascader', 'region'], 'clearable')"
+				v-if="checkTypeBySelected(['input', 'select', 'selectDict', 'time', 'date', 'cascader', 'selectDepart', 'region'], 'clearable')"
 				:label="t('er.config.propsPanel.clearable')"
 				field="clearable"
 				v-bind="utils.addTestId('configPanel:clearable')"

src/components/packages/formEditor/componentsConfig.js

@@ -183,7 +183,7 @@ export const fieldsConfig = [
 				}
 			},
 			{
-				type: 'cascader',
+				type: 'selectDepart',
 				label: '部门',
 				icon: 'cascader',
 				key: '',
@@ -199,7 +199,7 @@ export const fieldsConfig = [
 					required: false,
 					disabled: false,
 					clearable: true,
-					renderType: 2,
+					// renderType: 2,
 					props: { value: 'id', label: 'name' }
 				}
 			}

src/components/packages/formEditor/index.vue

@@ -21,13 +21,13 @@ export default {
 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 departmentOptList = ref([])
 const dictParentList = ref([])
 const emit = defineEmits(['listener'])
 const props = defineProps(
@@ -167,12 +167,12 @@ const getRoleList = async () => {
 }
 getRoleList()
 
-// 部门列表
+/*// 部门列表
 const getDepartmentList = async () => {
 	let data = await department.departmentPageApi({ page: 1, pageSize: 99999 })
 	departmentOptList.value = data || []
 }
-getDepartmentList()
+getDepartmentList()*/
 // 字典下拉配置
 const getDictParentList = async () => {
 	let data = await dict.dictListParentApi().then(async res => {
@@ -180,9 +180,6 @@ const getDictParentList = async () => {
 			return {
 				...v,
 				label: v.name,
-				value: v.code,
-				// 下拉数据
-				options: []
 				value: v.code
 				// // 下拉数据
 				// options: []
@@ -252,20 +249,20 @@ const addFieldData = (node, isCopy = false) => {
 			if (node.options.renderType === 2) {
 				// 选择人员
 				node.options.options = userOptList.value
-			} else 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...
-			}
-		} else if (node.type === 'cascader') {
+				node.options.options = dictParentList.value
+			}*/
+		} /* else if (node.type === 'cascader') {
 			// 部门类型
 			if (node.options.renderType === 2) {
 				node.options.options = departmentOptList.value
 			}
-		}
+		}*/
 		if (isCopy) {
 			state.data[node.id] = _.cloneDeep(state.data[node.options.dataKey])
 			node.options.dataKey = node.id

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

@@ -13,6 +13,7 @@ export default {
 			selectUser: 'Employee',
 			selectRole: 'Role',
 			selectDict: 'Dict',
+			selectDepart: 'Department',
 			time: 'Time',
 			date: 'Date',
 			rate: 'Rate',

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

@@ -13,6 +13,7 @@ export default {
 			selectUser: '员工',
 			selectDict: '字典',
 			selectRole: '角色',
+			selectDepart: '部门',
 			time: '时间',
 			date: '日期',
 			rate: '评分',

src/components/packages/hooks/use-props/index.js

@@ -305,6 +305,13 @@ export const useProps = (state, data, isPc = true, isRoot = false, specialHandli
 				result.multiple = options.multiple
 				result.filterable = options.filterable
 				break
+			case 'selectDepart': // 部门
+				result.props = {
+					multiple: options.multiple,
+					checkStrictly: options.checkStrictly,
+					...options.props
+				}
+				break
 			case 'select':
 				// 当前选中的值，如果是人员就获取人员的api，部门就获取部门的api
 				if ([2, 3].indexOf(renderType) > -1) {
@@ -408,12 +415,13 @@ export const useProps = (state, data, isPc = true, isRoot = false, specialHandli
 				}
 				break
 			case 'cascader':
-				if (renderType === 2) {
+				/*if (renderType === 2) {
 					// 部门类型
 					result.options = options?.options
 				} else if (renderType === 1) {
 					result.options = _.get(state, `data[${options.dataKey}].list`, [])
-				}
+				}*/
+				result.options = _.get(state, `data[${options.dataKey}].list`, [])
 				result.props = {
 					multiple: options.multiple,
 					checkStrictly: options.checkStrictly,

src/components/packages/theme/formEditor/FormTypes/Cascader.scss

@@ -17,3 +17,9 @@
 @include b(FormTypesCascader_pc) {
   width: 100%;
 }
+@include b(FormTypesSelectDepart_pc) {
+  width: 100%;
+}
+@include b(FormTypesSelectDepart_mobile) {
+  width: 100%;
+}

src/components/packages/utils/field.js

@@ -2,7 +2,7 @@ import _ from 'lodash-es'
 import { nanoid } from './nanoid'
 // 正则匹配type(itemType 类型)
 const fieldsRe =
-	/^(input|textarea|number|radio|checkbox|select|selectUser|selectRole|selectDict|time|date|rate|switch|slider|html|cascader|uploadfile|signature|region|subform|iframe)$/
+	/^(input|textarea|number|radio|checkbox|select|selectUser|selectRole|selectDict|selectDepart|time|date|rate|switch|slider|html|cascader|uploadfile|signature|region|subform|iframe)$/
 const deepTraversal = (node, fn) => {
 	fn(node)
 	const nodes = node.type === 'subform' ? node.list[0] : node.list || node.rows || node.columns || node.children || []