feat: 审批菜单

src/views/approve/await/index.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts"></script>
+
+<template>
+	<div class="content-container">
+		<section class="flow-approve-box">
+			<div class="flow-content"></div>
+			<div class="flow-detail-content"></div>
+		</section>
+	</div>
+</template>
+
+<style scoped lang="scss">
+.content-container {
+	height: calc(100% - 45px);
+	.flow-approve-box {
+		width: 100%;
+		height: calc(100vh - 105px);
+		overflow: hidden;
+		padding: 0 12px;
+		display: flex;
+		gap: 12px;
+
+		.flow-content {
+			width: 330px;
+			min-width: 330px;
+			height: 100%;
+			overflow: hidden;
+			//background: #fff;
+			border-radius: 6px;
+			background: #0d84ff;
+		}
+		.flow-detail-content {
+			height: 100%;
+			overflow: hidden;
+			//background: #fff;
+			border-radius: 6px;
+			flex: auto;
+			background: #0934ff;
+		}
+	}
+}
+</style>

src/views/approve/me/index.vue

@@ -0,0 +1,5 @@
+<script setup lang="ts"></script>
+
+<template></template>
+
+<style scoped lang="scss"></style>

src/views/approve/mycc/index.vue

@@ -0,0 +1,5 @@
+<script setup lang="ts"></script>
+
+<template></template>
+
+<style scoped lang="scss"></style>

src/views/approve/record/index.vue

@@ -0,0 +1,5 @@
+<script setup lang="ts"></script>
+
+<template></template>
+
+<style scoped lang="scss"></style>

src/views/flow/group/index1.vue

@@ -1,524 +0,0 @@
-<template>
-	<div class="pageWrap">
-		<el-aside style="background: #fff; margin-right: 10px" width="200px">
-			<el-container style="height: 100%">
-				<el-header>
-					<el-input v-model="groupFilterText" placeholder="输入关键字进行过滤" clearable style="margin-top: 10px" />
-				</el-header>
-				<el-main class="nopadding" style="flex-basis: 100%">
-					<el-tree
-						ref="treeRef"
-						class="menu-tree"
-						:data="treeData"
-						node-key="id"
-						:current-node-key="''"
-						:highlight-current="true"
-						:expand-on-click-node="false"
-						:props="{ label: 'name' }"
-						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 class="code">{{ data.code }}</span>
-								<span class="do">
-									<el-icon @click.stop="dicEdit(data)"><Edit /></el-icon>
-									<el-icon @click.stop="dictDel(node, data)"><Delete /></el-icon>
-								</span>
-							</span>
-						</template>
-					</el-tree>
-				</el-main>
-				<el-footer style="height: 51px">
-					<el-button type="primary" size="small" :icon="Plus" style="width: 100%" @click="addDicTree"> 流程组 </el-button>
-				</el-footer>
-			</el-container>
-		</el-aside>
-		<div class="content-warp flex-column-page-wrap">
-			<!--  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" @click="addHandler">
-						<el-icon class="btn-icon">
-							<Plus />
-						</el-icon>
-					</el-button>
-					<el-button type="danger" :disabled="curSelectionRows.length === 0" @click="batch_del">
-						<el-icon class="btn-icon">
-							<Delete />
-						</el-icon>
-					</el-button>
-				</template>
-
-				<template #filterAvatarSlot="scope">
-					<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>
-
-				<template #actionSlot="scope">
-					<el-tooltip content="编辑" placement="bottom" effect="light">
-						<el-icon class="ibt0" @click="table_edit(scope.row)">
-							<Edit />
-						</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">
-								<Delete />
-							</el-icon>
-						</template>
-					</el-popconfirm>
-				</template>
-			</LeTable>
-		</div>
-
-		<LeFormConfigDialog
-			v-if="visible"
-			ref="dialogDictRef"
-			v-model="visible"
-			:title="`${isCreate ? '新增' : '编辑'}项`"
-			width="600px"
-			:form-data="activeData"
-			:form-options="formOptions"
-			@submit="submitHandler"
-		/>
-	</div>
-</template>
-<script lang="tsx" setup name="flow_group1">
-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, CopyDocument } from '@element-plus/icons-vue'
-import { Plus } from '@element-plus/icons-vue'
-import StatusIndicator from '@/components/StatusIndicator'
-
-const visible = ref(false) // 弹窗显示隐藏
-const isCreate = ref(true)
-const activeData = 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: '状态',
-		itemType: 'switch',
-		activeText: '是',
-		inactiveText: '否'
-	},
-	{
-		prop: 'sort',
-		label: '排序',
-		itemType: 'inputNumber',
-		rules: [{ required: true, message: '请输入排序', trigger: 'blur' }]
-	},
-	{
-		prop: 'remark',
-		label: '备注',
-		itemType: 'input'
-	}
-]
-// 新增的表单 和 编辑的表单
-const formOptions = computed(() => {
-	// 去掉 formsDialog 下标为 0 的数据
-	const { 0: pid, ...rest } = formsDialog
-	let treeFormDialog = []
-	for (let i in rest) {
-		treeFormDialog.push(rest[i])
-	}
-
-	return {
-		forms: current_mode.value === 'tree' ? treeFormDialog : formsDialog,
-		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 filterNode = (value: string, data: Tree) => {
-	if (!value) return true
-	return data.name.includes(value)
-}
-
-const treeData = ref([])
-
-// 获取左侧菜单数据
-const getGroup = async () => {
-	showGroupLoading.value = true
-	let data = await dict.dictListParentApi()
-	formOptions.value.forms[0].options = data.map(item => {
-		return { value: item.id, label: item.name }
-	})
-	showGroupLoading.value = false
-	const data1 =  [
-		{
-			"id": "1696539662002233345",
-			"name": "分组1",
-			"items": [
-				{
-					"flowId": "pzm1nggtdh0000000013",
-					"rangeShow": "综合行政部",
-					"name": "wewewe",
-					"logo": "https://pro.cxygzl.com/wj//2023-08-30/94a982f4800644638373f91732da305a-WIN_20221017_15_35_20_Pro.jpg",
-					"stop": false,
-					"remark": "",
-					"updated": "2023-08-30 16:50:53"
-				},
-				{
-					"flowId": "p1kj39jcat0000000013",
-					"rangeShow": "",
-					"name": "Hier",
-					"logo": "https://pro.cxygzl.com/wj//2023-08-29/b4845dd87e9743389fa09b9c812e03f4-cefc1e178a82b901024241fa778da9773812ef08.jfif",
-					"stop": false,
-					"remark": "",
-					"updated": "2023-08-30 17:49:02"
-				}
-			]
-		},
-		{
-			"id": "1696764397248126978",
-			"name": "行政",
-			"items": [
-				{
-					"flowId": "pk8y13zwre0000000007",
-					"rangeShow": "",
-					"name": "请假流程",
-					"logo": "https://pro.cxygzl.com/wj//2023-08-30/c5ce69ba37f64bceb4273da91247df2a-dd4a0447a8ed4b15915062cbc61a929c.jpg",
-					"stop": false,
-					"remark": "",
-					"updated": "2023-08-30 14:25:58"
-				}
-			]
-		},
-		{
-			"id": "1696764414604156929",
-			"name": "财务",
-			"items": [
-				{
-					"flowId": "peast0rvfr0000000007",
-					"rangeShow": "",
-					"name": "报销申请",
-					"logo": "https://pro.cxygzl.com/wj//2023-08-30/39bc32dd889f44189e8b1b95db1481c5-Capture001.png",
-					"stop": false,
-					"remark": "",
-					"updated": "2023-08-30 13:59:53"
-				}
-			]
-		},
-		{
-			"id": "1696802661602500609",
-			"name": "出差申请",
-			"items": []
-		}
-	]
-	data1.unshift({ id: '', name: '所有' })
-	treeData.value = data1 // console.log('获取左侧菜单数据')
-}
-
-// 左侧菜单点击
-const leftTreeClick = data => {
-	console.log(data.id, 'data.id')
-	// 修改search参数 watch 变更 自动刷新 列表
-	searchData.value = { ...searchData.value, data: { pid: data.id ? data.id : null } }
-}
-
-// table列表数据请求
-const queryList = async () => {
-	const { options, searchParams } = tableOpts
-	options.loading = true
-	console.log('搜索参数： ', JSON.stringify(tableOpts.searchParams))
-	try {
-		const { records: list, total } = await dict.dictPageApi(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: 'name',
-		label: '流程图标',
-		minWidth: 80
-	},
-	{
-		prop: 'code',
-		label: '流程名字',
-		minWidth: 100
-	},
-	{
-		prop: 'content',
-		label: '流程说明',
-		minWidth: 150
-	},
-	{
-		prop: 'remark',
-		label: '流程发起人',
-		minWidth: 100
-	},
-	{
-		prop: 'action',
-		label: '操作',
-		width: 100,
-		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 => {
-	try {
-		await dict.dictDeleteApi(ids)
-		if (current_mode.value === 'tree') {
-			getGroup()
-		}
-		updateParams()
-		ElMessage({
-			type: 'success',
-			message: '操作成功'
-		})
-	} catch (e) {
-		console.log('删除失败')
-	}
-}
-
-// 单个删除
-const table_del = row => {
-	deleteItem([row.id])
-}
-
-//批量删除
-const batch_del = () => {
-	const ids = curSelectionRows.value.map(item => item.id) // 多选数据
-	deleteItem(ids)
-}
-
-const table_edit = async row => {
-	isCreate.value = false
-	activeData.value = { ...row, status: row.status ? true : false }
-	visible.value = true
-}
-
-// 弹窗事件
-const submitHandler = async params => {
-	formOptions.value.formConfig.submitLoading = true
-	try {
-		params.status = params.status ? 1 : 0
-		params.id = activeData.value.id ? activeData.value.id : null
-		await dict.dictAddOrEditSaveApi(params)
-		ElMessage.success(`${isCreate.value ? '新增' : '修改'}成功~`)
-		visible.value = false
-		if (current_mode.value === 'tree') {
-			getGroup()
-		}
-		updateParams()
-		formOptions.value.formConfig.submitLoading = false
-	} catch (e) {
-		console.log(e)
-		formOptions.value.formConfig.submitLoading = false
-	}
-}
-
-const addHandler = () => {
-	isCreate.value = true
-	activeData.value = {}
-	visible.value = true
-}
-
-// 删除左侧树
-const dictDel = (node, data) => {
-	current_mode.value = 'tree'
-	ElMessageBox.confirm(`确定删除 ${data.name} 项吗？`, '提示')
-		.then(async () => {
-			try {
-				deleteItem([data.id])
-			} catch (e) {
-				ElMessage({
-					type: 'error',
-					message: '操作失败'
-				})
-			}
-		})
-		.catch(() => {})
-}
-
-const dicEdit = data => {
-	current_mode.value = 'tree'
-	table_edit(data)
-}
-
-const addDicTree = () => {
-	current_mode.value = 'tree'
-	addHandler()
-}
-
-nextTick(() => {
-	getGroup()
-	queryList()
-})
-
-watch(groupFilterText, val => {
-	console.log(val, '====value');
-	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;
-	}
-}*/
-
-// 角色的树结构样式
-:deep(.menu-tree) {
-	.el-tree-node {
-		&:first-child {
-			.custom-tree-node {
-				.do {
-					display: none !important;
-				}
-			}
-		}
-	}
-	.el-tree-node__content {
-		height: 36px;
-	}
-	.el-tree-node__content .el-tree-node__label .icon {
-		margin-right: 5px;
-	}
-}
-
-.nopadding {
-	padding: 0px;
-}
-
-.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: 5px;
-	color: #999;
-	padding: 5px;
-	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;
-}
-</style>