feat: 流程实例 80%

src/views/flow/group/index.vue

@@ -75,6 +75,12 @@
 						</el-icon>
 					</el-tooltip>
 					<el-divider direction="vertical"></el-divider>
+					<el-tooltip content="复制" placement="bottom" effect="light">
+						<el-icon class="ibt0">
+							<CopyDocument />
+						</el-icon>
+					</el-tooltip>
+					<el-divider direction="vertical"></el-divider>
 					<el-popconfirm title="确定删除吗？" @confirm="table_del(scope.row)">
 						<template #reference>
 							<el-icon class="ibt0">
@@ -103,7 +109,7 @@ import dict from '@/api/system/dict'
 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, CopyDocument } from '@element-plus/icons-vue'
 import StatusIndicator from '@/components/StatusIndicator'
 
 const visible = ref(false) // 弹窗显示隐藏

src/views/flow/instance/index.vue

@@ -1,11 +1,200 @@
 <template>
-	<h4>流程实例</h4>
+	<div class="pageWrap">
+		<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 type="primary">撤回</el-button>
+					<el-button type="primary">定位</el-button>
+					<el-button type="primary">激活</el-button>
+					<el-button type="primary">挂起</el-button>
+					<el-button type="danger">作废</el-button>
+				</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>
+			</LeTable>
+		</div>
+	</div>
 </template>
+<script lang="tsx" setup>
+import app from '@/api/system/app'
+import { nextTick, ref } from 'vue'
+import { useTablePage } from '@/hooks/useTablePage'
+import StatusIndicator from '@/components/StatusIndicator'
+
+// 表格搜索条件
+const forms = ref([
+	{
+		prop: 'keyword',
+		label: '审批标题：',
+		itemType: 'input',
+		placeholder: '请输入审批标题'
+	},
+	{
+		prop: 'keyword',
+		label: '单据名称：',
+		itemType: 'input',
+		placeholder: '请输入单据名称'
+	},
+	{
+		prop: 'keyword',
+		label: '类型：',
+		itemType: 'input',
+		placeholder: '请输入类型'
+	}
+])
 
-<script>
-export default {
-	name: 'index'
+// table列表数据请求
+const queryList = async () => {
+	const { options, searchParams } = tableOpts
+	options.loading = true
+	try {
+		const { records: list, total } = await app.appPageApi(searchParams)
+		tableOpts.total = total
+		tableOpts.list = list
+	} catch {
+		console.log('获取列表数据失败')
+		tableOpts.total = 0
+		tableOpts.list = []
+		options.loading = false // 更改加载中的 loading值
+	} finally {
+		options.loading = false
+	}
 }
+
+// table 参数
+const columns = [
+	{
+		prop: 'identification',
+		label: '审批标题',
+		minWidth: 80
+	},
+	{
+		prop: 'name',
+		label: '单据名称',
+		minWidth: 100
+	},
+	{
+		prop: 'secretKey',
+		label: '类型',
+		minWidth: 100
+	},
+	{
+		prop: 'sort',
+		label: '子类型',
+		minWidth: 80
+	},
+	{
+		prop: 'sort',
+		label: '机构',
+		minWidth: 80
+	},
+	{
+		prop: 'sort',
+		label: '岗位',
+		minWidth: 80
+	},
+	{
+		prop: 'sort',
+		label: '提交人',
+		minWidth: 80
+	},
+	{
+		prop: 'sort',
+		label: '代理人',
+		minWidth: 80
+	},
+	{
+		prop: 'sort',
+		label: '发起时间',
+		minWidth: 80
+	},
+	{
+		prop: 'sort',
+		label: '完成时间',
+		minWidth: 80
+	},
+	{
+		prop: 'status',
+		label: '流程状态',
+		minWidth: 50,
+		slots: {
+			default: 'statusSlot'
+		}
+	},
+	{
+		prop: 'sort',
+		label: '流程版本',
+		minWidth: 80
+	}
+]
+
+const { searchData, tableOpts, checkedColumns, activeColumns } = useTablePage(
+	{
+		options: {
+			showIndex: false
+		},
+		// 需要展示的列
+		columns,
+		// 控制列配置
+		columnsConfig: {
+			columns
+		}
+	},
+	{
+		queryList,
+		fetchImmediate: false
+	}
+)
+
+nextTick(() => {
+	queryList()
+})
 </script>
+<style scoped lang="scss">
+.pageWrap {
+	flex: 1;
+	display: flex;
+	height: 100%;
+	//background: #fff;
+}
+.content-warp {
+	flex: 1;
+	//width: calc(100% - 250px);
+	width: calc(100% - 210px);
+}
+// 单独自己写的
+/*:deep(.box-card) {
+	height: 100%;
+	.el-card__body {
+		padding: 0;
+	}
+}*/
 
-<style scoped></style>
+// 应用的树结构样式
+:deep(.menu-tree) {
+	.el-tree-node__content {
+		height: 36px;
+	}
+	.el-tree-node__content .el-tree-node__label .icon {
+		margin-right: 5px;
+	}
+}
+
+.nopadding {
+	padding: 0px;
+}
+</style>

src/views/flow/instance/instance-detail.vue

@@ -0,0 +1,15 @@
+<template>
+	<el-drawer v-model="drawer" title="I am the title" :direction="direction">
+		<span>Hi, there!</span>
+	</el-drawer>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const drawer = ref(false)
+const direction = ref('rtl')
+
+</script>
+
+<style scoped></style>

src/views/flow/task/index.vue

@@ -1,11 +1,178 @@
 <template>
-	<h4>流程任务</h4>
+	<div class="pageWrap">
+		<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 #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>
+			</LeTable>
+		</div>
+	</div>
 </template>
+<script lang="tsx" setup>
+import app from '@/api/system/app'
+import { nextTick, ref, watch } from 'vue'
+import { ElTree } from 'element-plus'
+import { useTablePage } from '@/hooks/useTablePage'
+import StatusIndicator from '@/components/StatusIndicator'
+
+const groupFilterText = ref('')
+const treeRef = ref<InstanceType<typeof ElTree>>()
+
+// 表格搜索条件
+const forms = ref([
+	{
+		prop: 'keyword',
+		label: '处理人：',
+		itemType: 'input',
+		placeholder: '请输入处理人'
+	}
+])
 
-<script>
-export default {
-	name: 'index'
+// table列表数据请求
+const queryList = async () => {
+	const { options, searchParams } = tableOpts
+	options.loading = true
+	try {
+		const { records: list, total } = await app.appPageApi(searchParams)
+		tableOpts.total = total
+		tableOpts.list = list
+	} catch {
+		console.log('获取列表数据失败')
+		tableOpts.total = 0
+		tableOpts.list = []
+		options.loading = false // 更改加载中的 loading值
+	} finally {
+		options.loading = false
+	}
 }
+
+// table 参数
+const columns = [
+	{
+		prop: 'identification',
+		label: '审批标题',
+		minWidth: 80
+	},
+	{
+		prop: 'name',
+		label: '单据名称',
+		minWidth: 100
+	},
+	{
+		prop: 'secretKey',
+		label: '处理人',
+		minWidth: 100
+	},
+	{
+		prop: 'secretKey',
+		label: '转交人',
+		minWidth: 100
+	},
+	{
+		prop: 'secretKey',
+		label: '原处理人',
+		minWidth: 100
+	},
+	{
+		prop: 'secretKey',
+		label: '任务类型',
+		minWidth: 100
+	},
+	{
+		prop: 'secretKey',
+		label: '节点名称',
+		minWidth: 100
+	},
+	{
+		prop: 'status',
+		label: '任务状态',
+		minWidth: 50,
+		slots: {
+			default: 'statusSlot'
+		}
+	},
+	{
+		prop: 'updateTime',
+		label: '接受时间',
+		minWidth: 126
+	},
+	{
+		prop: 'secretKey',
+		label: '审批意见',
+		minWidth: 100
+	}
+]
+
+const { searchData, tableOpts, checkedColumns, activeColumns } = useTablePage(
+	{
+		options: {
+			showIndex: false
+		},
+		// 需要展示的列
+		columns,
+		// 控制列配置
+		columnsConfig: {
+			columns
+		}
+	},
+	{
+		queryList,
+		fetchImmediate: false
+	}
+)
+
+nextTick(() => {
+	queryList()
+})
+
+watch(groupFilterText, val => {
+	treeRef.value!.filter(val)
+})
 </script>
+<style scoped lang="scss">
+.pageWrap {
+	flex: 1;
+	display: flex;
+	height: 100%;
+	//background: #fff;
+}
+.content-warp {
+	flex: 1;
+	//width: calc(100% - 250px);
+	width: calc(100% - 210px);
+}
+// 单独自己写的
+/*:deep(.box-card) {
+	height: 100%;
+	.el-card__body {
+		padding: 0;
+	}
+}*/
 
-<style scoped></style>
+// 应用的树结构样式
+:deep(.menu-tree) {
+	.el-tree-node__content {
+		height: 36px;
+	}
+	.el-tree-node__content .el-tree-node__label .icon {
+		margin-right: 5px;
+	}
+}
+
+.nopadding {
+	padding: 0px;
+}
+</style>