feat: #0000 流程实例

README.md

@@ -1,2 +1,40 @@
 # Vue 3 + TypeScript + Vite + element-plus
-开箱即用的 vue3 admin项目
+开箱即用的 vue3 admin项目
+
+- 流程实例 
+  - 列表 ✅
+  - 实例审批流过程 ✅
+  - 详情
+
+- 流程任务
+  - 列表 ✅
+  - 详情
+
+- 流程组
+  - 列表 ✅
+  - 新增 ✅
+  - 删除 ✅
+
+- 流程
+  - 列表 ✅
+  - 操作按钮 编辑 复制 停用 删除  ✅
+  - 基础信息
+  - 表单设计
+  - 流程设计
+  - 扩展设置
+
+- 流程表单
+  - 列表
+  - 新增 编辑
+  - 预览
+  - 字段
+  - 设计
+
+- 流程模型
+  - 列表
+  - 创建审批
+  - 设计
+  - 修改
+  - 复制
+  - 移动
+  - 停用

src/components/StatusIndicator/textIndex.vue

@@ -0,0 +1,37 @@
+<template>
+	<span class="sc-state-text" :class="['sc-state-bg--' + type]">{{ text }}</span>
+</template>
+
+<script>
+export default {
+	props: {
+		type: { type: String, default: 'primary' },
+		text: { type: String, default: '无' }
+	}
+}
+</script>
+
+<style scoped>
+.sc-state-text {
+	display: inline-block;
+	padding: 12px 8px;
+	border-radius: 15px;
+	vertical-align: middle;
+}
+
+.sc-state-bg--primary {
+	background: var(--el-color-primary);
+}
+.sc-state-bg--success {
+	background: var(--el-color-success);
+}
+.sc-state-bg--warning {
+	background: var(--el-color-warning);
+}
+.sc-state-bg--danger {
+	background: var(--el-color-danger);
+}
+.sc-state-bg--info {
+	background: var(--el-color-info);
+}
+</style>

src/views/flow/group/index.vue

@@ -289,37 +289,24 @@ const queryList = async () => {
 const columns = [
 	{
 		prop: 'name',
-		label: '名称',
+		label: '流程图标',
 		minWidth: 80
 	},
 	{
 		prop: 'code',
-		label: '编码',
+		label: '流程名字',
 		minWidth: 100
 	},
-	{
-		prop: 'status',
-		label: '状态',
-		minWidth: 50,
-		slots: {
-			default: 'statusSlot'
-		}
-	},
 	{
 		prop: 'content',
-		label: '内容',
+		label: '流程说明',
 		minWidth: 150
 	},
 	{
 		prop: 'remark',
-		label: '备注',
+		label: '流程发起人',
 		minWidth: 100
 	},
-	{
-		prop: 'sort',
-		label: '排序',
-		minWidth: 50
-	},
 	{
 		prop: 'action',
 		label: '操作',

src/views/flow/instance/index.vue

@@ -21,12 +21,32 @@
 					<el-button type="danger">作废</el-button>
 				</template>
 
+				<template #identificationSlot="scope">
+					<el-dropdown>
+						<span class="el-dropdown-link">
+							{{ scope.row.name }}
+							<el-icon class="el-icon--right">
+								<ArrowDown />
+							</el-icon>
+						</span>
+						<template #dropdown>
+							<el-dropdown-menu>
+								<el-dropdown-item @click="test1Ev">审批流</el-dropdown-item>
+								<el-dropdown-item  @click="test2Ev">详情</el-dropdown-item>
+							</el-dropdown-menu>
+						</template>
+					</el-dropdown>
+				</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>
+
+		<instance-detail 	v-if="detailVisibile"
+											v-model="detailVisibile"></instance-detail>
 	</div>
 </template>
 <script lang="tsx" setup>
@@ -34,7 +54,10 @@ import app from '@/api/system/app'
 import { nextTick, ref } from 'vue'
 import { useTablePage } from '@/hooks/useTablePage'
 import StatusIndicator from '@/components/StatusIndicator'
+import { ArrowDown } from '@element-plus/icons-vue'
+import InstanceDetail from './instance-detail.vue'
 
+const detailVisibile = ref(false)
 // 表格搜索条件
 const forms = ref([
 	{
@@ -78,12 +101,17 @@ const queryList = async () => {
 // table 参数
 const columns = [
 	{
-		prop: 'identification',
+		prop: 'name',
 		label: '审批标题',
-		minWidth: 80
+		minWidth: 150,
+
+		showOverflowTooltip: true,
+		slots: {
+			default: 'identificationSlot'
+		}
 	},
 	{
-		prop: 'name',
+		prop: 'name1',
 		label: '单据名称',
 		minWidth: 100
 	},
@@ -98,32 +126,32 @@ const columns = [
 		minWidth: 80
 	},
 	{
-		prop: 'sort',
+		prop: 'sort1',
 		label: '机构',
 		minWidth: 80
 	},
 	{
-		prop: 'sort',
+		prop: 'sort2',
 		label: '岗位',
 		minWidth: 80
 	},
 	{
-		prop: 'sort',
+		prop: 'sort3',
 		label: '提交人',
 		minWidth: 80
 	},
 	{
-		prop: 'sort',
+		prop: 'sort4',
 		label: '代理人',
 		minWidth: 80
 	},
 	{
-		prop: 'sort',
+		prop: 'sort5',
 		label: '发起时间',
 		minWidth: 80
 	},
 	{
-		prop: 'sort',
+		prop: 'sort6',
 		label: '完成时间',
 		minWidth: 80
 	},
@@ -136,12 +164,20 @@ const columns = [
 		}
 	},
 	{
-		prop: 'sort',
+		prop: 'sort7',
 		label: '流程版本',
 		minWidth: 80
 	}
 ]
 
+const test1Ev = () => {
+	detailVisibile.value = true
+}
+
+const test2Ev = () => {
+
+}
+
 const { searchData, tableOpts, checkedColumns, activeColumns } = useTablePage(
 	{
 		options: {

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

@@ -1,15 +1,147 @@
 <template>
-	<el-drawer v-model="drawer" title="I am the title" :direction="direction">
-		<span>Hi, there!</span>
+	<el-drawer v-model="visibleDialog" title="审批流程" :direction="direction" size="900" @close="handleCancel">
+		<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>
 	</el-drawer>
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import app from '@/api/system/app'
+import { computed, defineEmits, defineProps, nextTick, ref } from 'vue'
+import { useTablePage } from '@/hooks/useTablePage'
 
-const drawer = ref(false)
 const direction = ref('rtl')
 
+const myProps = defineProps({
+	modelValue: {
+		type: Boolean,
+		default: false
+	},
+	userIds: {
+		type: Array,
+		default: () => []
+	}
+})
+
+// 同步值
+const $myEmit = defineEmits(['update:modelValue', 'successFn'])
+
+
+// 关闭按钮
+const closeDrawer = () => {
+	$myEmit('successFn')
+	$myEmit('update:modelValue', false)
+}
+
+// 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: 'sort1',
+		label: '节点名称',
+		minWidth: 80
+	},
+	{
+		prop: 'sort2',
+		label: '任务状态',
+		minWidth: 80
+	},
+	{
+		prop: 'sort3',
+		label: '接收时间',
+		minWidth: 80
+	},
+	{
+		prop: 'sort4',
+		label: '捎话',
+		minWidth: 80
+	},
+	{
+		prop: 'sort5',
+		label: '审批意见',
+		minWidth: 80
+	}
+]
+
+const { searchData, tableOpts, checkedColumns, activeColumns } = useTablePage(
+	{
+		options: {
+			showIndex: false,
+			multipleSelect: false
+		},
+		// 需要展示的列
+		columns,
+		// 控制列配置
+		columnsConfig: {
+			columns
+		}
+	},
+	{
+		queryList,
+		fetchImmediate: false
+	}
+)
+
+nextTick(() => {
+	queryList()
+})
+
+const visibleDialog = computed({
+	get() {
+		return myProps.modelValue
+	},
+	set(val) {
+		$myEmit('update:modelValue', val)
+	}
+})
 </script>
 
 <style scoped></style>