mky-vent-base/src/views/vent/performance/progressLc/index.vue

<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="请输入..." v-model:value="formSearch.name" />
                </a-form-item>
                <a-form-item label="标识Key：">
                    <a-input style="width:240px" placeholder="请输入..." 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">查询</a-button>
                    <a-button type="primary">重置</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">
                        表单数据
                    </a-button>
                    <a-button type="link" style="color:#3DF6FF">
                        删除
                    </a-button>
                </template>
            </a-table>
        </div>
        <!-- 审批详情弹窗 -->
        <a-modal v-model:visible="visibleSp" width="1000px" :title="titleSp" centered destroyOnClose>
           <HistorySp :historySpList="historySpList"></HistorySp>
        </a-modal>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, createVNode } from 'vue'
import HistorySp from './common/HistorySp.vue'
import { Modal } from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { columns } from './progressLc.data'
import { getRunningProcess,getHistoricFlow } 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[]>([])


//审批详情-审批历史列表
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})
        })
    }
}

//获取列表
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
    }
}

//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
            break;
    }
}

onMounted(() => {
    getRunningProcessList()
    getHistoricFlowList()
})
</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) {
    color: #fff;
    background-color: #ffffff00;
    border: 1px solid #3ad8ff77 !important;
}
</style>