|
@@ -3,52 +3,155 @@
|
|
|
<div class="search-box">
|
|
|
<a-form :model="formSearch" layout="inline" :label-col="labelCol">
|
|
|
<a-form-item label="流程名称:">
|
|
|
- <a-input style="width:240px" placeholder="请输入..." v-model:value="formSearch.name" />
|
|
|
+ <a-input style="width:240px" placeholder="请输入..." allowClear v-model:value="formSearch.name" />
|
|
|
</a-form-item>
|
|
|
<a-form-item label="标识Key:">
|
|
|
- <a-input style="width:240px" placeholder="请输入..." v-model:value="formSearch.name" />
|
|
|
+ <a-input style="width:240px" placeholder="请输入..." allowClear v-model:value="formSearch.key" />
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="结束时间:">
|
|
|
+ <a-range-picker v-model:value="formSearch.timer" :forfmat="dateFormat" />
|
|
|
</a-form-item>
|
|
|
<a-form-item label="">
|
|
|
- <a-button style="margin-right:10px" type="primary"
|
|
|
- preIcon="ant-design:search-outlined">查询</a-button>
|
|
|
- <a-button type="primary">重置</a-button>
|
|
|
+ <a-button style="margin-right:10px" type="primary" preIcon="ant-design:search-outlined"
|
|
|
+ @click="getSearch">查询</a-button>
|
|
|
+ <a-button type="plain" @click="reset">重置</a-button>
|
|
|
</a-form-item>
|
|
|
</a-form>
|
|
|
</div>
|
|
|
<div class="content-box">
|
|
|
<a-table size="small" :dataSource="dataSource" :columns="columns" :scroll="{ y: 730 }"
|
|
|
- :pagination="pagination" @change="pageChange">
|
|
|
-
|
|
|
+ :pagination="pagination">
|
|
|
<template #action="{ record }">
|
|
|
- <a-button type="link" style="color:#3DF6FF" @click="getViews">
|
|
|
- 查看
|
|
|
+ <a-button type="link" style="color:#3DF6FF" @click="getClick({ event: 'sp', row: record })">
|
|
|
+ 审批历史
|
|
|
</a-button>
|
|
|
+ <a-button type="link" style="color:#3DF6FF" @click="getClick({ event: 'bd', row: record })">
|
|
|
+ 表单数据
|
|
|
+ </a-button>
|
|
|
+ <a-popconfirm title="是否确认删除!" ok-text="确定" cancel-text="取消"
|
|
|
+ @confirm="getClick({ event: 'del', row: record })">
|
|
|
+ <a-button type="link" style="color:#3DF6FF">
|
|
|
+ 删除
|
|
|
+ </a-button>
|
|
|
+ </a-popconfirm>
|
|
|
</template>
|
|
|
</a-table>
|
|
|
</div>
|
|
|
+ <!-- 审批详情弹窗 -->
|
|
|
+ <a-modal v-model:visible="visibleSp" :footer="null" width="1000px" :title="titleSp" centered destroyOnClose>
|
|
|
+ <HistorySp :historySpList="historySpList"></HistorySp>
|
|
|
+ </a-modal>
|
|
|
+ <!-- 表单数据弹窗 -->
|
|
|
+ <a-modal v-model:visible="visibleForm" width="1000px" :footer="null" :title="titleForm" centered destroyOnClose>
|
|
|
+ <formSp :formSpData="formSpData"></formSp>
|
|
|
+ </a-modal>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
-import { ref, reactive, } from 'vue'
|
|
|
-import { columns} from './completeLc.data'
|
|
|
+import { ref, reactive, onMounted } from 'vue'
|
|
|
+import HistorySp from '../progressLc/common/HistorySp.vue'
|
|
|
+import formSp from '../progressLc/common/formSp.vue'
|
|
|
+import { columns } from './completeLc.data'
|
|
|
+import { getFinishedProcess, getHistoricFlow, getForm } from './completeLc.api'
|
|
|
|
|
|
const labelCol = { style: { width: '80px' } };
|
|
|
+
|
|
|
+let dateFormat = ref('YYYY-MM-DD')
|
|
|
//查询参数
|
|
|
let formSearch = reactive({
|
|
|
- name: ''
|
|
|
+ name: '',
|
|
|
+ key: '',
|
|
|
+ timer: [],
|
|
|
})
|
|
|
//数据列表
|
|
|
-let dataSource=ref<any[]>([])
|
|
|
+let dataSource = ref<any[]>([])
|
|
|
|
|
|
//分页参数配置
|
|
|
let pagination = reactive({
|
|
|
- current: 1, // 当前页码
|
|
|
- pageSize: 10, // 每页显示条数
|
|
|
- total: 0, // 总条目数,后端返回
|
|
|
- // showTotal: (total, range) => `${range[0]}-${range[1]} 条,总共 ${total} 条`, // 分页右下角显示信息
|
|
|
- showSizeChanger: true, // 是否可改变每页显示条数
|
|
|
- pageSizeOptions: ['10', '20', '50',], // 可选的每页显示条数
|
|
|
+ current: 1, // 当前页码
|
|
|
+ pageSize: 10, // 每页显示条数
|
|
|
+ total: 0, // 总条目数,后端返回
|
|
|
+ // showTotal: (total, range) => `${range[0]}-${range[1]} 条,总共 ${total} 条`, // 分页右下角显示信息
|
|
|
+ showSizeChanger: true, // 是否可改变每页显示条数
|
|
|
+ pageSizeOptions: ['10', '20', '50',], // 可选的每页显示条数
|
|
|
+})
|
|
|
+
|
|
|
+//审批历史数据
|
|
|
+let visibleSp = ref(false)
|
|
|
+let titleSp = ref('审批历史')
|
|
|
+let historySpList = reactive<any[]>([])
|
|
|
+
|
|
|
+//表单数据
|
|
|
+let visibleForm = ref(false)
|
|
|
+let titleForm = ref('')
|
|
|
+let formSpData = ref({})
|
|
|
+
|
|
|
+
|
|
|
+//获取列表数据
|
|
|
+async function getFinishedProcessList() {
|
|
|
+ let res = await getFinishedProcess({ name: formSearch.name, key: formSearch.key, pageNumber: pagination.current, pageSize: pagination.pageSize })
|
|
|
+ console.log(res, '列表数据------------')
|
|
|
+ if (res.length != 0) {
|
|
|
+ res.forEach(el => {
|
|
|
+ el.versionC = 'v.1'
|
|
|
+ })
|
|
|
+ dataSource.value = res
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+//获取审批历史列表数据
|
|
|
+async function getHistoricFlowList() {
|
|
|
+ let res = await getHistoricFlow()
|
|
|
+ console.log(res, '审批历史------------')
|
|
|
+ if (res.length != 0) {
|
|
|
+ historySpList.length = 0
|
|
|
+ res.forEach(el => {
|
|
|
+ historySpList.push({ name: el.name, username: el.assignees[0].username, deleteReason: el.deleteReason, comment: el.comment, startTime: el.startTime, endTime: el.endTime })
|
|
|
+ })
|
|
|
+
|
|
|
+ }
|
|
|
+}
|
|
|
+//获取审批-表单数据
|
|
|
+async function getFormList(param) {
|
|
|
+ let res = await getForm(param)
|
|
|
+ console.log(res, '表单数据------------')
|
|
|
+ formSpData.value = res
|
|
|
+}
|
|
|
+
|
|
|
+//table操作
|
|
|
+function getClick(data) {
|
|
|
+ switch (data.event) {
|
|
|
+ case 'sp':
|
|
|
+ visibleSp.value = true
|
|
|
+ getHistoricFlowList()
|
|
|
+ break;
|
|
|
+ case 'bd':
|
|
|
+ visibleForm.value = true
|
|
|
+ titleForm.value = `查看流程业务信息${data.row.name}`
|
|
|
+ getFormList({ tableId: data.row.tableId, tableName: data.row.tableName })
|
|
|
+ break;
|
|
|
+ case 'del':
|
|
|
+ break;
|
|
|
+
|
|
|
+ }
|
|
|
+}
|
|
|
+//查询
|
|
|
+function getSearch() {
|
|
|
+ pagination.current = 1
|
|
|
+ getFinishedProcessList()
|
|
|
+}
|
|
|
+//重置
|
|
|
+function reset() {
|
|
|
+ formSearch.key = ''
|
|
|
+ formSearch.name = ''
|
|
|
+ formSearch.timer.length = 0
|
|
|
+ pagination.current = 1
|
|
|
+ getFinishedProcessList()
|
|
|
+}
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ getFinishedProcessList()
|
|
|
})
|
|
|
</script>
|
|
|
|
|
@@ -73,9 +176,26 @@ let pagination = reactive({
|
|
|
color: #fff;
|
|
|
}
|
|
|
|
|
|
-:deep(.zxm-input) {
|
|
|
+:deep(.zxm-input-affix-wrapper) {
|
|
|
+ color: #fff;
|
|
|
+ background-color: #ffffff00;
|
|
|
+ border: 1px solid #3ad8ff77 !important;
|
|
|
+}
|
|
|
+:deep(.zxm-input){
|
|
|
+ color: #fff !important;
|
|
|
+ background-color: #ffffff00 !important;
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.zxm-picker) {
|
|
|
color: #fff;
|
|
|
background-color: #ffffff00;
|
|
|
border: 1px solid #3ad8ff77 !important;
|
|
|
}
|
|
|
+
|
|
|
+:deep(.zxm-picker-separator) {
|
|
|
+ color: #fff !important;
|
|
|
+}
|
|
|
+:deep(.anticon.zxm-input-clear-icon){
|
|
|
+ color:#fff;
|
|
|
+}
|
|
|
</style>
|