|
@@ -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>
|