feat: 表单管理功能调整

src/components/scWorkflow/nodes/approver.vue

@@ -4,7 +4,7 @@
 			<div class="title" style="background: var(--el-color-warning)">
 				<el-icon class="icon"><user-filled /></el-icon>
 				<span v-show="!isEditTitle" class="title_label" @click="editTitle('box_nodeTitle')"
-				>{{ nodeConfig.nodeName }}<el-icon v-if="!disabled" class="edit-icon"><edit /></el-icon
+					>{{ nodeConfig.nodeName }}<el-icon v-if="!disabled" class="edit-icon"><edit /></el-icon
 				></span>
 				<el-input
 					v-show="isEditTitle"
@@ -27,7 +27,7 @@
 			<template #header>
 				<div class="node-wrap-drawer__title">
 					<label v-show="!isEditTitle" @click="editTitle('nodeTitle')"
-					>{{ form.nodeName }}<el-icon class="node-wrap-drawer__title-edit"><edit /></el-icon
+						>{{ form.nodeName }}<el-icon class="node-wrap-drawer__title-edit"><edit /></el-icon
 					></label>
 					<el-input
 						v-show="isEditTitle"
@@ -89,8 +89,8 @@
 								<el-button type="primary" icon="plus" round @click="selectHandle(3, form.nodeAssigneeList)">选择角色</el-button>
 								<div class="tags-list">
 									<el-tag v-for="(role, index) in form.nodeAssigneeList" :key="role.id" type="info" closable @close="delRole(index)">{{
-											role.name
-										}}</el-tag>
+										role.name
+									}}</el-tag>
 								</div>
 							</el-form-item>
 
@@ -197,7 +197,7 @@
 		</el-drawer>
 
 		<!-- 预览子表单 -->
-		<form-detail ref="formDetail" v-model="visibleFormDetail" v-if="visibleFormDetail" :template-id="templateId"></form-detail>
+		<form-detail v-if="visibleFormDetail" ref="formDetail" v-model="visibleFormDetail" :template-id="templateId"></form-detail>
 	</div>
 </template>
 

src/views/flow/form/data.tsx

@@ -0,0 +1,88 @@
+export const typeOptions = [
+	{
+		label: '设计表单',
+		value: 0
+	},
+	{
+		label: '系统表单',
+		value: 1
+	}
+]
+export const typeOptions_config = typeOptions.reduce((res, v) => {
+	res[v.value] = v.label
+	return res
+}, {} as { [key: string]: string })
+
+export const statusOptions = [
+	{
+		label: '禁用',
+		value: 0
+	},
+	{
+		label: '正常',
+		value: 1
+	}
+]
+export const statusOptions_config = statusOptions.reduce((res, v) => {
+	res[v.value] = v.label
+	return res
+}, {} as { [key: string]: string })
+
+// 新增编辑表单模板
+export const templateForms = [
+	{
+		prop: 'formCategoryId',
+		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: 'type',
+		label: '类型',
+		itemType: 'radio',
+		options: typeOptions
+	},
+	{
+		prop: 'pcUrl',
+		label: 'PC端地址',
+		itemType: 'input',
+		rules: [{ required: true, message: '请输入PC端地址', trigger: 'blur' }]
+	},
+	{
+		prop: 'appUrl',
+		label: 'APP端地址',
+		itemType: 'input'
+	},
+	{
+		prop: 'status',
+		label: '状态',
+		itemType: 'switch',
+		activeText: '正常',
+		inactiveText: '禁用'
+	},
+	{
+		prop: 'sort',
+		label: '排序',
+		itemType: 'inputNumber',
+		rules: [{ required: true, message: '请输入排序', trigger: 'blur' }]
+	},
+	{
+		prop: 'remark',
+		label: '备注',
+		itemType: 'input'
+	}
+]

src/views/flow/form/index.vue

@@ -73,31 +73,35 @@
 					<el-avatar :src="scope.row.avatar" size="small"></el-avatar>
 				</template>
 
-				<template #statusSlot="scope">
-					<status-indicator v-if="scope.row.status === 1" pulse type="success"></status-indicator>
-					<status-indicator v-else pulse type="danger"></status-indicator>
+				<template #statusSlot="{ row }">
+					<status-indicator pulse :type="row.status === 1 ? 'success' : 'danger'"></status-indicator>
 				</template>
 
-				<template #actionSlot="scope">
-					<el-tooltip content="设计" placement="bottom" effect="light">
-						<el-icon class="ibt0" @click="designTemplateEv(scope.row)">
-							<Money />
-						</el-icon>
-					</el-tooltip>
-					<el-divider direction="vertical"></el-divider>
-					<el-tooltip content="编辑" placement="bottom" effect="light">
-						<el-icon class="ibt0" @click="tableTemplateEdit(scope.row)">
-							<Edit />
-						</el-icon>
-					</el-tooltip>
-					<el-divider direction="vertical"></el-divider>
-					<el-popconfirm title="确定删除吗？" @confirm="deleteTemplateItem([scope.row.id])">
-						<template #reference>
-							<el-icon class="ibt0">
-								<Delete />
-							</el-icon>
+				<template #actionSlot="{ row }">
+					<div style="display: flex; align-items: center; justify-content: flex-end">
+						<!--设计表单才有-->
+						<template v-if="row.type === 0">
+							<el-tooltip content="设计" placement="bottom" effect="light">
+								<el-icon class="ibt0" @click="designTemplateEv(row)">
+									<Money />
+								</el-icon>
+							</el-tooltip>
+							<el-divider direction="vertical"></el-divider>
 						</template>
-					</el-popconfirm>
+						<el-tooltip content="编辑" placement="bottom" effect="light">
+							<el-icon class="ibt0" @click="tableTemplateEdit(row)">
+								<Edit />
+							</el-icon>
+						</el-tooltip>
+						<el-divider direction="vertical"></el-divider>
+						<el-popconfirm title="确定删除吗？" @confirm="deleteTemplateItem([row.id])">
+							<template #reference>
+								<el-icon class="ibt0">
+									<Delete />
+								</el-icon>
+							</template>
+						</el-popconfirm>
+					</div>
 				</template>
 			</LeTable>
 		</div>
@@ -134,9 +138,10 @@ import formtemplate from '@/api/flow/formtemplate'
 import { computed, nextTick, ref, watch } from 'vue'
 import { ElMessage, ElTree, ElMessageBox } from 'element-plus'
 import { useTablePage } from '@/hooks/useTablePage'
-import { Plus, Delete, Edit } from '@element-plus/icons-vue'
+// 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'
 
 const visible = ref(false) // 弹窗显示隐藏
 const visibleTemplate = ref(false) // 弹窗显示隐藏
@@ -209,51 +214,10 @@ const showGroupLoading = ref(false)
 const groupFilterText = ref('')
 const treeRef = ref<InstanceType<typeof ElTree>>()
 
-// 新增编辑表单模板
-const formTemplateDialog = [
-	{
-		prop: 'formCategoryId',
-		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,
+		forms: templateForms,
 		labelWidth: 120,
 		span: 30,
 		showResetBtn: true,
@@ -313,21 +277,19 @@ const forms = ref([
 		itemType: 'input',
 		placeholder: '请输入名称'
 	},
+	{
+		prop: 'type',
+		label: '类型：',
+		itemType: 'select',
+		placeholder: '请选择类型',
+		options: typeOptions
+	},
 	{
 		prop: 'status',
 		label: '状态：',
 		itemType: 'select',
 		placeholder: '请选择状态',
-		options: [
-			{
-				label: '禁用',
-				value: 0
-			},
-			{
-				label: '正常',
-				value: 1
-			}
-		]
+		options: statusOptions
 	}
 ])
 // table列表数据请求
@@ -358,6 +320,14 @@ const columns = [
 		label: '编码',
 		minWidth: 150
 	},
+	{
+		prop: 'type',
+		label: '类型',
+		minWidth: 100,
+		formatter: (row, column, cellValue) => {
+			return typeOptions_config[cellValue] || '-'
+		}
+	},
 	{
 		prop: 'status',
 		label: '状态',
@@ -499,7 +469,10 @@ const addHandler = mode => {
 		visible.value = true
 		current_mode.value = mode
 	} else {
-		activeDataTemplate.value = {}
+		activeDataTemplate.value = {
+			// 设计表单
+			type: 0
+		}
 		visibleTemplate.value = true
 	}
 }