aizuda-web-vue3/src/views/flow/form/index.vue

<template>
	<div class="pageWrap bgc">
		<div :class="['h-full mr-2 aside-wrap', isCollapsed ? 'aside-wrap--collapsed' : '']">
			<div :class="['trigger-bar', isCollapsed ? 'trigger-bar--collapsed' : '']" @click="isCollapsed = !isCollapsed">
				<div class="bar__top"></div>
				<div class="bar__bottom"></div>
			</div>
			<el-card class="h-full border-none menu-card" shadow="never">
				<template #header>
					<div class="flex justify-between">
						<div class="card-header">
							<span>表单分类</span>
						</div>
						<div class="">
							<el-space>
								<el-icon :style="{ color: 'var(--el-color-primary)' }" class="cursor-pointer" size="22" @click="addHandler('tree')"
									><Plus />
								</el-icon>
								<el-icon class="cursor-pointer" size="22" @click="getGroup"><Refresh /></el-icon>
							</el-space>
						</div>
					</div>
				</template>

				<el-input v-model="groupFilterText" placeholder="输入关键字进行过滤" clearable />
				<el-tree
					ref="treeRef"
					v-loading="showGroupLoading"
					class="menu-tree-box py-3"
					:data="treeData"
					node-key="id"
					:current-node-key="''"
					:highlight-current="true"
					:expand-on-click-node="false"
					:props="{ label: 'name', children: 'children' }"
					default-expand-all
					:filter-node-method="filterNode"
					@node-click="leftTreeClick"
				>
					<template #default="{ node, data }">
						<span class="custom-tree-node">
							<span class="label">{{ node.label }}</span>
							<!--<span v-if="false" class="code">{{ data.code }}</span>-->
							<span v-if="node.label !== treeParentName" class="do">
								<el-icon :style="{ color: 'var(--el-color-primary)' }" size="24" @click.stop="addHandler('table')"><Plus /></el-icon>
								<el-icon :style="{ color: 'var(--el-color-primary)' }" size="24" @click.stop="dicEdit(data)"><Edit /></el-icon>
								<el-icon :style="{ color: 'var(--el-color-error)' }" size="24" @click.stop="dictDel(node, data)"><Delete /></el-icon>
							</span>
						</span>
					</template>
				</el-tree>
			</el-card>
		</div>
		<div class="content-warp flex-column-page-wrap">
			<!-- 公用搜索组件 -->
			<LeSearchForm ref="searchForm" v-model:searchData="searchData" :forms="forms" :loading="tableOpts.options.loading"></LeSearchForm>
			<!--  LeTable 组件使用  -->
			<LeTable
				ref="tableRef"
				v-model:searchParams="tableOpts.searchParams"
				v-bind="tableOpts"
				v-model:curRow="tableOpts.curRow"
				v-model:checked-options="checkedColumns"
				:columns="activeColumns"
			>
				<template #toolLeft>
					<el-button plain :icon="Plus" type="primary" @click="addHandler('tableTemplate')">新增</el-button>
					<el-button plain :icon="Delete" :disabled="curSelectionRows.length === 0" type="danger" @click="batch_del">删除</el-button>
				</template>

				<template #filterAvatarSlot="scope">
					<el-avatar :src="scope.row.avatar" size="small"></el-avatar>
				</template>

				<template #statusSlot="{ row }">
					<el-tag v-if="row.status === 3">已绑定</el-tag>
					<el-switch v-else v-model="row.status" :active-value="1" :inactive-value="0" @change="handleStatusChange(row)"></el-switch>
				</template>

				<template #actionSlot="{ row }">
					<div class="flex flex-align-pack-center">
						<template v-if="row.type === 0">
							<el-tooltip effect="dark" content="设计表单" placement="top">
								<LeIcon class="text-lg text-icon-color" icon-class="icon-processInfo-material-design" @click="designTemplateEv(row)" />
							</el-tooltip>
						</template>

						<LeIcon
							class="text-lg ml-2 text-icon-color cursor-pointer icon-mage--edit"
							icon-class="icon-processInfo-mage--edit"
							@click="tableTemplateEdit(row)"
						/>

						<LeIcon
							v-if="row.status !== 3"
							class="text-lg ml-2 text-rose-700 cursor-pointer"
							icon-class="icon-processInfo-iconoir--trash"
							@click="table_del1(row)"
						/>
					</div>
				</template>
			</LeTable>
		</div>

		<LeFormConfigDialog
			v-if="visible"
			ref="dialogDictRef"
			v-model="visible"
			:title="`${isCreate ? '新增' : '编辑'}表单分类`"
			width="600px"
			:form-data="activeData"
			: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"
		/>

		<!-- 表单设计Dialog -->
		<design-form ref="designForm" v-model="visibleDesignForm" :record="recordObject" @success-fn="queryList"></design-form>
	</div>
</template>
<script lang="tsx" setup>
import formCategory from '@/api/flow/formcategory'
import formtemplate from '@/api/flow/formtemplate'
import { computed, nextTick, ref, watch } from 'vue'
import { ElMessage, ElTree, ElMessageBox } from 'element-plus'
import { Plus, Delete, Refresh } from '@element-plus/icons-vue'
import { useTablePage } from '@/hooks/useTablePage'
// import { Plus, Delete, Edit } from '@element-plus/icons-vue'
import StatusIndicator from '@/components/StatusIndicator/index.vue'
import DesignForm from './designForm.vue'
import { statusOptions, templateForms, typeOptions, typeOptions_config } from './data.tsx'
import post from '@/api/system/post'
const treeParentName = '所有'
const isCollapsed = ref(false)
const visible = ref(false) // 弹窗显示隐藏
const visibleTemplate = ref(false) // 弹窗显示隐藏
const visibleDesignForm = ref(false) // 弹窗显示隐藏
const isCreate = ref(true)
const activeData = ref({})
const recordObject = 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: 'status',
		label: '状态',
		itemType: 'switch',
		activeText: '正常',
		inactiveText: '禁用'
	},
	{
		prop: 'sort',
		label: '排序',
		itemType: 'inputNumber',
		rules: [{ required: true, message: '请输入排序', trigger: 'blur' }]
	},
	{
		prop: 'remark',
		label: '备注',
		itemType: 'input'
	}
]
// 新增的表单 和 编辑的表单
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 showGroupLoading = ref(false)
const groupFilterText = ref('')
const treeRef = ref<InstanceType<typeof ElTree>>()

// 新增的表单模板 和 编辑的表单模板
const formTemplateOptions = computed(() => {
	return {
		forms: templateForms,
		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)
}

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({})
	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 => {
			return { value: item.id, label: item.name }
		})
		showGroupLoading.value = false
		treeData.value = [{ id: '', name: treeParentName, children: data }]
		// treeData.value = data
	}
}

// 左侧菜单点击
const leftTreeClick = data => {
	searchData.value = { ...searchData.value, formCategoryId: data.id ? data.id : null }
}

// 表格搜索条件
const forms = ref([
	{
		prop: 'name',
		label: '模板名称：',
		itemType: 'input',
		placeholder: '请输入模板名称'
	},
	{
		prop: 'type',
		label: '类型：',
		itemType: 'select',
		placeholder: '请选择类型',
		options: typeOptions
	},
	{
		prop: 'status',
		label: '状态：',
		itemType: 'select',
		placeholder: '请选择状态',
		options: statusOptions
	}
])
// table列表数据请求
const queryList = async () => {
	const { options, searchParams } = tableOpts
	options.loading = true
	try {
		const { records: list, total } = await formtemplate.formTemplatePageApi(searchParams)
		tableOpts.total = total
		tableOpts.list = list
	} catch {
		tableOpts.total = 0
		tableOpts.list = []
	} finally {
		options.loading = false
	}
}

// table 参数
const columns = [
	{
		prop: 'name',
		label: '模板名称',
		minWidth: 80
	},
	{
		prop: 'code',
		label: '编码',
		minWidth: 150
	},
	{
		prop: 'type',
		label: '类型',
		minWidth: 100,
		formatter: (row, column, cellValue) => {
			return typeOptions_config[cellValue] || '-'
		}
	},
	{
		prop: 'status',
		label: '状态',
		minWidth: 100,
		slots: {
			default: 'statusSlot'
		}
	},
	{
		prop: 'remark',
		label: '备注',
		minWidth: 100
	},
	{
		prop: 'sort',
		label: '排序',
		minWidth: 50
	},
	{
		prop: 'action',
		label: '操作',
		width: 100,
		align: 'center',
		fixed: 'right',
		slots: {
			default: 'actionSlot'
		}
	}
]

const { searchData, tableOpts, checkedColumns, activeColumns, curSelectionRows, updateParams } = useTablePage(
	{
		options: {
			showIndex: false
		},
		// 需要展示的列
		columns,
		// 控制列配置
		columnsConfig: {
			columns
		}
	},
	{
		queryList,
		fetchImmediate: false
	}
)

// 删除
const deleteItem = async ids => {
	await formCategory.formCategoryDeleteApi(ids)
	if (current_mode.value === 'tree') {
		getGroup()
	}
	updateParams()
	ElMessage.success(`删除成功~`)
}

// 单个删除
const table_del = row => {
	deleteItem([row.id])
}

//批量删除
const batch_del = () => {
	const ids = curSelectionRows.value.map(item => item.id) // 多选数据
	ElMessageBox.confirm('是否删除选中数据？', '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'error',
		buttonSize: 'default'
	}).then(() => {
		deleteTemplateItem(ids)
	})
}

const table_edit = async row => {
	isCreate.value = false
	activeData.value = { ...row, status: row.status ? true : false }
	visible.value = true
}

const tableTemplateEdit = async row => {
	isCreate.value = false
	activeDataTemplate.value = { ...row, status: row.status ? true : false }
	visibleTemplate.value = true
}

const designTemplateEv = async row => {
	recordObject.value = { ...row }
	visibleDesignForm.value = true
}

const table_del1 = (row: any) => {
	ElMessageBox.confirm(`确认删除「${row.name}」这条数据？`, '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'error'
	}).then(async () => {
		deleteTemplateItem([row.id])
	})
}

const deleteTemplateItem = async ids => {
	await formtemplate.formTemplateDeleteApi(ids)
	ElMessage.success(`删除成功~`)
	updateParams()
}
// 弹窗事件
const submitHandler = async params => {
	try {
		formOptions.value.formConfig.submitLoading = true
		console.log('------activeData----', activeData.value)
		params.status = params.status ? 1 : 0
		if (activeData.value.id) {
			params.id = activeData.value.id
		} else {
			params.pid = 0
		}
		await formCategory.formCategoryAddOrEditSaveApi(params)
		ElMessage.success(`${isCreate.value ? '新增' : '修改'}成功~`)
		visible.value = false
		getGroup()
		// updateParams()
	} finally {
		formOptions.value.formConfig.submitLoading = false
	}
}

// 模板弹窗
const submitTemplateHandler = async params => {
	try {
		formTemplateOptions.value.formConfig.submitLoading = true
		params.status = params.status ? 1 : 0
		console.log('------activeDataTemplate-----', activeDataTemplate)
		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
	if (mode !== 'tableTemplate') {
		activeData.value = {
			status: true
		}
		visible.value = true
		current_mode.value = mode
	} else {
		activeDataTemplate.value = {
			// 设计表单
			type: 0,
			status: true
		}
		visibleTemplate.value = true
	}
}

// 删除左侧树
const dictDel = (node, data) => {
	current_mode.value = 'tree'
	ElMessageBox.confirm(`确定删除 ${data.name} 项吗？`, '提示')
		.then(async () => {
			// try {
			deleteItem([data.id])
			// } catch (e) {
			// 	ElMessage.error(`删除失败~`)
			// }
		})
		.catch(() => {})
}

const dicEdit = data => {
	current_mode.value = data.pid !== '0' ? 'table' : 'tree'
	table_edit(data)
}

const handleStatusChange = (row: any) => {
	// 状态 0、禁用 1、正常
	const status = row.status
	let text = Number(row.status) === 0 ? '禁用' : '启用'
	ElMessageBox.confirm('请确认是否' + text + '当前数据?', '提示', { type: 'warning' })
		.then(async () => {
			await formtemplate.formTemplateAddOrEditSaveApi({ id: row.id, status })
			ElMessage.success(`${text}成功`)
		})
		.catch(status => {
			if (status == 'cancel') {
				row.status = Number(row.status) === 0 ? 1 : 0
			}
		})
}

nextTick(() => {
	getGroup()
	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">
.custom-tree-node {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: space-between;
	font-size: 14px;
	padding-right: 24px;
	height: 100%;
}

.custom-tree-node .code {
	font-size: 12px;
	color: #999;
}

.custom-tree-node {
	.do {
		display: none;
	}
}

.custom-tree-node .do i {
	margin-left: 3px;
	color: #999;
	padding: 3px;
	font-size: 20px;
}

.custom-tree-node .do i:hover {
	color: #333;
}

.custom-tree-node {
	&:hover {
		.code {
			display: none;
		}
	}
}

.custom-tree-node:hover .do {
	display: inline-block;
}

.content-warp {
	// 300 + 28
	width: calc(100% - 328px);
}
.aside-wrap--collapsed {
	margin-left: -10px;
	.menu-card {
		width: 0;
	}
}
</style>