|
@@ -1,230 +0,0 @@
|
|
|
-<template>
|
|
|
- <div class="progressLc">
|
|
|
- <div class="search-box">
|
|
|
- <a-form :model="formSearch" layout="inline" :label-col="labelCol">
|
|
|
- <a-form-item label="流程名称:">
|
|
|
- <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="请输入..." allowClear v-model:value="formSearch.key" />
|
|
|
- </a-form-item>
|
|
|
- <a-form-item label="">
|
|
|
- <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">
|
|
|
-
|
|
|
- <template #action="{ record }">
|
|
|
- <a-button type="link" style="color:#3DF6FF" @click="getClick({ event: 'gq', row: record })">
|
|
|
- 挂起
|
|
|
- </a-button>
|
|
|
- <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" width="1000px" :footer="null" :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>
|
|
|
- <!-- 删除弹窗 -->
|
|
|
- <a-modal v-model:visible="visibleDel" :footer="null" width="600px" :title="titleDel" centered destroyOnClose>
|
|
|
- <formDel @confirmClick="confirmClick" @cancelClick="cancelClick"></formDel>
|
|
|
- </a-modal>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script setup lang="ts">
|
|
|
-import { ref, reactive, onMounted, createVNode } from 'vue'
|
|
|
-import HistorySp from './common/HistorySp.vue'
|
|
|
-import formSp from './common/formSp.vue'
|
|
|
-import formDel from './common/formDel.vue'
|
|
|
-import { Modal } from 'ant-design-vue';
|
|
|
-import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
|
|
-import { columns } from './progressLc.data'
|
|
|
-import { getRunningProcess, getHistoricFlow, getForm, getdelInsByIds } from './progressLc.api'
|
|
|
-
|
|
|
-const labelCol = { style: { width: '80px' } };
|
|
|
-//查询参数
|
|
|
-let formSearch = reactive({
|
|
|
- name: '',
|
|
|
- key: ''
|
|
|
-})
|
|
|
-//数据列表
|
|
|
-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',], // 可选的每页显示条数
|
|
|
-})
|
|
|
-
|
|
|
-//审批详情弹窗数据
|
|
|
-let visibleSp = ref(false)
|
|
|
-let titleSp = ref('审批历史')
|
|
|
-//审批详情历史数据
|
|
|
-let historySpList = reactive<any[]>([])
|
|
|
-
|
|
|
-//表单数据
|
|
|
-let visibleForm = ref(false)
|
|
|
-let titleForm = ref('')
|
|
|
-let formSpData = ref({})
|
|
|
-
|
|
|
-//删除流程数据
|
|
|
-let visibleDel = ref(false)
|
|
|
-let titleDel = ref('')
|
|
|
-
|
|
|
-
|
|
|
-//审批详情-审批历史列表
|
|
|
-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
|
|
|
-}
|
|
|
-
|
|
|
-//获取列表
|
|
|
-async function getRunningProcessList() {
|
|
|
- let res = await getRunningProcess({ name: formSearch.name, key: formSearch.key, pageNumber: pagination.current, pageSize: pagination.pageSize })
|
|
|
- console.log(res, 'tableList--------------')
|
|
|
- if (res.length != 0) {
|
|
|
- res.forEach(el => {
|
|
|
- el.versionC = 'v.1'
|
|
|
- el.isSuspended = el.isSuspended ? '未激活' : '已激活'
|
|
|
- })
|
|
|
- dataSource.value = res
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-//确认删除
|
|
|
-async function confirmClick(data) {
|
|
|
- let res = await getdelInsByIds({ reason: data })
|
|
|
- if (res.success) {
|
|
|
- getRunningProcessList()
|
|
|
- visibleDel.value = false
|
|
|
- }
|
|
|
-}
|
|
|
-//取消删除
|
|
|
-function cancelClick() {
|
|
|
- visibleDel.value = false
|
|
|
-}
|
|
|
-
|
|
|
-//table操作
|
|
|
-function getClick(data) {
|
|
|
- console.log(data, 'data------------------')
|
|
|
- switch (data.event) {
|
|
|
- case 'gq':
|
|
|
- Modal.confirm({
|
|
|
- title: '确认暂停挂起',
|
|
|
- centered: true,
|
|
|
- icon: createVNode(ExclamationCircleOutlined),
|
|
|
- content: createVNode('div', { style: 'color:#fff' }, `您确认要暂停挂起流程实例${data.row.name}`),
|
|
|
- okText: '确认',
|
|
|
- cancelText: '取消',
|
|
|
- onOk: () => {
|
|
|
- Modal.destroyAll();
|
|
|
- },
|
|
|
- });
|
|
|
- break;
|
|
|
- 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':
|
|
|
- visibleDel.value = true
|
|
|
- titleDel.value = `确认删除流程${data.row.name}`
|
|
|
- break;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-//查询
|
|
|
-function getSearch() {
|
|
|
- pagination.current = 1
|
|
|
- getRunningProcessList()
|
|
|
-}
|
|
|
-//重置
|
|
|
-function reset() {
|
|
|
- formSearch.key = ''
|
|
|
- formSearch.name = ''
|
|
|
- pagination.current = 1
|
|
|
- getRunningProcessList()
|
|
|
-}
|
|
|
-
|
|
|
-onMounted(() => {
|
|
|
- getRunningProcessList()
|
|
|
-})
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="less" scoped>
|
|
|
-.progressLc {
|
|
|
- position: relative;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- padding: 15px;
|
|
|
- box-sizing: border-box;
|
|
|
-
|
|
|
- .search-box {
|
|
|
- height: 50px;
|
|
|
- }
|
|
|
-
|
|
|
- .content-box {
|
|
|
- height: calc(100% - 40px);
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-:deep(.zxm-form-item-label > label) {
|
|
|
- color: #fff;
|
|
|
-}
|
|
|
-
|
|
|
-: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(.anticon.zxm-input-clear-icon){
|
|
|
- color:#fff;
|
|
|
-}
|
|
|
-</style>
|