feat: 表单分类 + 表单模板增删改 100%

src/views/flow/form/index.vue

@@ -15,7 +15,7 @@
 							:current-node-key="''"
 							:highlight-current="true"
 							:expand-on-click-node="false"
-							:props="{ label: 'name' }"
+							:props="{ label: 'name', children: 'children' }"
 							default-expand-all
 							:filter-node-method="filterNode"
 							@node-click="leftTreeClick"
@@ -23,8 +23,9 @@
 							<template #default="{ node, data }">
 								<span class="custom-tree-node">
 									<span class="label">{{ node.label }}</span>
-									<span class="code">{{ data.code }}</span>
+									<span v-if="false" class="code">{{ data.code }}</span>
 									<span class="do">
+										<el-icon @click.stop="addHandler('table')"><Plus /></el-icon>
 										<el-icon @click.stop="dicEdit(data)"><Edit /></el-icon>
 										<el-icon @click.stop="dictDel(node, data)"><Delete /></el-icon>
 									</span>
@@ -56,7 +57,7 @@
 				:columns="activeColumns"
 			>
 				<template #toolLeft>
-					<el-button type="primary" @click="addHandler('table')">
+					<el-button type="primary" @click="addHandler('tableTemplate')">
 						<el-icon class="btn-icon">
 							<Plus />
 						</el-icon>
@@ -79,12 +80,12 @@
 
 				<template #actionSlot="scope">
 					<el-tooltip content="编辑" placement="bottom" effect="light">
-						<el-icon class="ibt0" @click="table_edit(scope.row)">
+						<el-icon class="ibt0" @click="tableTemplateEdit(scope.row)">
 							<Edit />
 						</el-icon>
 					</el-tooltip>
 					<el-divider direction="vertical"></el-divider>
-					<el-popconfirm title="确定删除吗？" @confirm="table_del(scope.row)">
+					<el-popconfirm title="确定删除吗？" @confirm="deleteTemplateItem([scope.row.id])">
 						<template #reference>
 							<el-icon class="ibt0">
 								<Delete />
@@ -105,11 +106,23 @@
 			:form-options="formOptions"
 			@submit="submitHandler"
 		/>
+
+		<LeFormConfigDialog
+			v-if="visibleTemplate"
+			ref="dialogTemplateRef"
+			v-model="visibleTemplate"
+			:title="`${isCreate ? '新增' : '编辑'}表单模板`"
+			width="600px"
+			:form-data="activeDataTemplate"
+			:form-options="formTemplateOptions"
+			@submit="submitTemplateHandler"
+		/>
 	</div>
 </template>
 <script lang="tsx" setup>
 import dict from '@/api/system/dict'
 import formCategory from '@/api/flow/formcategory'
+import formtemplate from '@/api/flow/formtemplate.ts'
 import { computed, nextTick, ref, watch } from 'vue'
 import { ElMessage, ElTree, ElMessageBox } from 'element-plus'
 import { useTablePage } from '@/hooks/useTablePage'
@@ -117,22 +130,26 @@ import { Plus, Delete, Edit } from '@element-plus/icons-vue'
 import StatusIndicator from '@/components/StatusIndicator/index.vue'
 
 const visible = ref(false) // 弹窗显示隐藏
+const visibleTemplate = ref(false) // 弹窗显示隐藏
 const isCreate = ref(true)
 const activeData = ref({})
+const activeDataTemplate = ref({})
 const current_mode = ref('') // 当前模式 (tree | table)
 const formsDialog = [
+	{
+		prop: 'pid',
+		label: '所属分类',
+		itemType: 'select',
+		filterable: true,
+		options: [],
+		rules: [{ required: true, message: '请选择所属分类', trigger: 'blur' }]
+	},
 	{
 		prop: 'name',
 		label: '分类名称',
 		itemType: 'input',
 		rules: [{ required: true, message: '请输入分类名称', trigger: 'blur' }]
 	},
-	{
-		prop: 'code',
-		label: '分类编码',
-		itemType: 'input',
-		rules: [{ required: true, message: '请输入分类编码', trigger: 'blur' }]
-	},
 	{
 		prop: 'status',
 		label: '状态',
@@ -181,6 +198,61 @@ const showGroupLoading = ref(false)
 const groupFilterText = ref('')
 const treeRef = ref<InstanceType<typeof ElTree>>()
 
+// 新增编辑表单模板
+const formTemplateDialog = [
+	{
+		prop: 'pid',
+		label: '所属表单分类',
+		itemType: 'select',
+		filterable: true,
+		options: [],
+		rules: [{ required: true, message: '请选择所属表单分类', trigger: 'blur' }]
+	},
+	{
+		prop: 'name',
+		label: '模板名称',
+		itemType: 'input',
+		rules: [{ required: true, message: '请输入模板名称', trigger: 'blur' }]
+	},
+	{
+		prop: 'code',
+		label: '模板编码',
+		itemType: 'input',
+		rules: [{ required: true, message: '请输入模板编码', trigger: 'blur' }]
+	},
+	{
+		prop: 'status',
+		label: '状态',
+		itemType: 'switch',
+		activeText: '是',
+		inactiveText: '否'
+	},
+	{
+		prop: 'sort',
+		label: '排序',
+		itemType: 'inputNumber',
+		rules: [{ required: true, message: '请输入排序', trigger: 'blur' }]
+	},
+	{
+		prop: 'remark',
+		label: '备注',
+		itemType: 'input'
+	}
+]
+// 新增的表单模板 和 编辑的表单模板
+const formTemplateOptions = computed(() => {
+	return {
+		forms: formTemplateDialog,
+		labelWidth: 120,
+		span: 30,
+		showResetBtn: true,
+		formConfig: {
+			showCancelBtn: true,
+			submitLoading: false
+		}
+	}
+})
+
 const filterNode = (value: string, data: Tree) => {
 	if (!value) return true
 	return data.name.includes(value)
@@ -188,21 +260,35 @@ const filterNode = (value: string, data: Tree) => {
 
 const treeData = ref([])
 
+// 将树形结构扁平化
+const treeForArr = data => {
+	const flattened = []
+	for (const item of data) {
+		flattened.push(item)
+		if (item.children && item.children.length > 0) {
+			flattened.push(...treeForArr(item.children))
+		}
+	}
+	return flattened
+}
+
 // 获取左侧菜单数据
 const getGroup = async () => {
 	showGroupLoading.value = true
-	let data = await formCategory.formCategoryListTreeApi()
-	formOptions.value.forms[0].options = data.map(item => {
+	let data = await formCategory.formCategoryListTreeApi({})
+	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 => {
 		return { value: item.id, label: item.name }
 	})
 	showGroupLoading.value = false
-	data.unshift({ id: '', name: '所有' })
 	treeData.value = data
 }
 
 // 左侧菜单点击
 const leftTreeClick = data => {
-	searchData.value = { ...searchData.value, pid: data.id ? data.id : null }
+	searchData.value = { ...searchData.value, pid: data.id ? data.id : 0 }
 }
 
 // 表格搜索条件
@@ -213,12 +299,6 @@ const forms = ref([
 		itemType: 'input',
 		placeholder: '请输入名称'
 	},
-	{
-		prop: 'code',
-		label: '编码：',
-		itemType: 'input',
-		placeholder: '请输入编码'
-	},
 	{
 		prop: 'status',
 		label: '状态：',
@@ -241,7 +321,7 @@ const queryList = async () => {
 	const { options, searchParams } = tableOpts
 	options.loading = true
 	try {
-		const { records: list, total } = await dict.dictPageApi(searchParams)
+		const { records: list, total } = await formtemplate.formTemplatePageApi(searchParams)
 		tableOpts.total = total
 		tableOpts.list = list
 	} catch {
@@ -256,13 +336,13 @@ const queryList = async () => {
 const columns = [
 	{
 		prop: 'name',
-		label: '名称',
+		label: '模板名称',
 		minWidth: 80
 	},
 	{
 		prop: 'code',
 		label: '编码',
-		minWidth: 100
+		minWidth: 150
 	},
 	{
 		prop: 'status',
@@ -272,11 +352,6 @@ const columns = [
 			default: 'statusSlot'
 		}
 	},
-	{
-		prop: 'content',
-		label: '内容',
-		minWidth: 150
-	},
 	{
 		prop: 'remark',
 		label: '备注',
@@ -340,7 +415,7 @@ const batch_del = () => {
 		type: 'error',
 		buttonSize: 'default'
 	}).then(() => {
-		deleteItem(ids)
+		deleteTemplateItem(ids)
 	})
 }
 
@@ -350,29 +425,59 @@ const table_edit = async row => {
 	visible.value = true
 }
 
+const tableTemplateEdit = async row => {
+	isCreate.value = false
+	activeDataTemplate.value = { ...row, status: row.status ? true : false }
+	visibleTemplate.value = true
+}
+
+const deleteTemplateItem = async ids => {
+	await formtemplate.formTemplateDeleteApi(ids)
+	updateParams()
+	ElMessage.success(`删除成功~`)
+}
 // 弹窗事件
 const submitHandler = async params => {
 	try {
 		formOptions.value.formConfig.submitLoading = true
 		params.status = params.status ? 1 : 0
-		params.pid = 0
+		params.id = activeData.value.id ? activeData.value.id : 0
 		await formCategory.formCategoryAddOrEditSaveApi(params)
 		ElMessage.success(`${isCreate.value ? '新增' : '修改'}成功~`)
 		visible.value = false
-		if (current_mode.value === 'tree') {
-			getGroup()
-		}
-		updateParams()
+		getGroup()
+		// updateParams()
 	} finally {
 		formOptions.value.formConfig.submitLoading = false
 	}
 }
 
+// 模板弹窗
+const submitTemplateHandler = async params => {
+	try {
+		formTemplateOptions.value.formConfig.submitLoading = true
+		params.status = params.status ? 1 : 0
+		params.content = JSON.stringify({name: 1, age:2})
+		params.id = activeDataTemplate.value.id ? activeDataTemplate.value.id : null
+		await formtemplate.formTemplateAddOrEditSaveApi(params)
+		ElMessage.success(`${isCreate.value ? '新增' : '修改'}成功~`)
+		visibleTemplate.value = false
+		updateParams()
+	} finally {
+		formTemplateOptions.value.formConfig.submitLoading = false
+	}
+}
+
 const addHandler = mode => {
 	isCreate.value = true
-	activeData.value = {}
-	visible.value = true
-	current_mode.value = mode
+	if (mode !== 'tableTemplate') {
+		activeData.value = {}
+		visible.value = true
+		current_mode.value = mode
+	} else {
+		activeDataTemplate.value = {}
+		visibleTemplate.value = true
+	}
 }
 
 // 删除左侧树
@@ -390,30 +495,43 @@ const dictDel = (node, data) => {
 }
 
 const dicEdit = data => {
-	current_mode.value = 'tree'
+	current_mode.value = data.pid !== '0' ? 'table' : 'tree'
 	table_edit(data)
 }
 
 nextTick(() => {
 	getGroup()
-	queryList()
+	// queryList()
 })
 
 watch(groupFilterText, val => {
 	treeRef.value!.filter(val)
 })
+
+watch(
+	treeData.value,
+	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 }
+)
 </script>
 <style scoped lang="scss">
 // 表单的树结构样式
 :deep(.menu-tree) {
 	.el-tree-node {
-		&:first-child {
-			.custom-tree-node {
-				.do {
-					display: none !important;
-				}
-			}
-		}
+		//&:first-child {
+		//	.custom-tree-node {
+		//		.do {
+		//			display: none !important;
+		//		}
+		//	}
+		//}
 	}
 }