fix: 表单管理 分类修改为 级联选择

src/views/flow/form/data.tsx

@@ -33,7 +33,13 @@ export const templateForms = [
 	{
 		prop: 'formCategoryId',
 		label: '所属表单分类',
-		itemType: 'select',
+		itemType: 'cascader',
+		props: {
+			value: 'id',
+			label: 'name',
+			emitPath: false,
+			checkStrictly: true
+		},
 		filterable: true,
 		options: [],
 		rules: [{ required: true, message: '请选择所属表单分类', trigger: 'blur' }]

src/views/flow/form/index.vue

@@ -149,15 +149,27 @@ const isCreate = ref(true)
 const activeData = ref({})
 const recordObject = ref({})
 const activeDataTemplate = ref({})
-const current_mode = ref('') // 当前模式 (tree | table)
+// 当前模式
+type CurMode = 'tree' | 'table'
+const current_mode = ref<CurMode>('table')
+const findFormItemByProp = (_forms: any[], prop: string) => {
+	return _forms.find(v => v.prop === prop) || {}
+}
 const formsDialog = [
 	{
 		prop: 'pid',
 		label: '所属分类',
-		itemType: 'select',
+		itemType: 'cascader',
+		props: {
+			value: 'id',
+			label: 'name',
+			emitPath: false,
+			checkStrictly: true
+		},
 		filterable: true,
 		options: [],
-		rules: [{ required: true, message: '请选择所属分类', trigger: 'blur' }]
+		rules: [{ required: true, message: '请选择所属分类', trigger: 'blur' }],
+		visible: true
 	},
 	{
 		prop: 'name',
@@ -185,30 +197,21 @@ const formsDialog = [
 	}
 ]
 // 新增的表单 和 编辑的表单
-const formOptions = computed(() => {
-	let tempForm = []
-	if (current_mode.value === 'tree') {
-		for (let i in formsDialog) {
-			let fd = formsDialog[i]
-			if (fd.prop == 'pid') {
-				continue
-			}
-			tempForm.push(fd)
-		}
-	} else {
-		tempForm = formsDialog
-	}
-	return {
-		forms: tempForm,
-		labelWidth: 120,
-		span: 30,
-		showResetBtn: true,
-		formConfig: {
-			showCancelBtn: true,
-			submitLoading: false
-		}
+const formOptions = ref({
+	forms: formsDialog,
+	labelWidth: 120,
+	span: 30,
+	showResetBtn: true,
+	formConfig: {
+		showCancelBtn: true,
+		submitLoading: false
 	}
 })
+
+watch(current_mode, (mode: CurMode) => {
+	const curFormItem = findFormItemByProp(formOptions.value.forms, 'pid')
+	curFormItem.visible = mode === 'table'
+})
 const showGroupLoading = ref(false)
 const groupFilterText = ref('')
 const treeRef = ref<InstanceType<typeof ElTree>>()
@@ -251,12 +254,13 @@ const getGroup = async () => {
 	showGroupLoading.value = true
 	let data = await formCategory.formCategoryListTreeApi({})
 	if (data) {
-		formOptions.value.forms[0].options = treeForArr(data).map(item => {
-			return { value: item.id, label: item.name }
-		})
-		formTemplateOptions.value.forms[0].options = treeForArr(data).map(item => {
+		findFormItemByProp(formOptions.value.forms, 'pid').options = data
+		// formOptions.value.forms[0].options = treeForArr(data).map(item => {
+		// 	return { value: item.id, label: item.name }
+		// })
+		findFormItemByProp(formTemplateOptions.value.forms, 'formCategoryId').options = data /*treeForArr(data).map(item => {
 			return { value: item.id, label: item.name }
-		})
+		})*/
 		showGroupLoading.value = false
 		treeData.value = [{ id: '', name: treeParentName, children: data }]
 		// treeData.value = data
@@ -405,13 +409,13 @@ const batch_del = () => {
 
 const table_edit = async row => {
 	isCreate.value = false
-	activeData.value = { ...row, status: row.status ? true : false }
+	activeData.value = { ...row, status: !!row.status }
 	visible.value = true
 }
 
 const tableTemplateEdit = async row => {
 	isCreate.value = false
-	activeDataTemplate.value = { ...row, status: row.status ? true : false }
+	activeDataTemplate.value = { ...row, status: !!row.status }
 	visibleTemplate.value = true
 }
 
@@ -444,7 +448,7 @@ const submitHandler = async params => {
 		if (activeData.value.id) {
 			params.id = activeData.value.id
 		} else {
-			params.pid = 0
+			params.pid = params.pid || 0
 		}
 		await formCategory.formCategoryAddOrEditSaveApi(params)
 		ElMessage.success(`${isCreate.value ? '新增' : '修改'}成功~`)
@@ -537,12 +541,14 @@ watch(groupFilterText, val => {
 watch(
 	treeData.value,
 	val => {
-		formOptions.value.forms[0].options = treeForArr(val).map(item => {
+		findFormItemByProp(formOptions.value.forms, 'pid').options = val
+		findFormItemByProp(formTemplateOptions.value.forms, 'formCategoryId').options = val
+		/*formOptions.value.forms[0].options = treeForArr(val).map(item => {
 			return { value: item.id, label: item.name }
 		})
 		formTemplateOptions.value.forms[0].options = treeForArr(val).map(item => {
 			return { value: item.id, label: item.name }
-		})
+		})*/
 	},
 	{ immediate: true }
 )