vent-template/src/views/vent/performance/completeLc/index.vue

<template>
    <div class="completeLc">
        <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-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"
                        @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: '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, 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: '',
    key: '',
    timer: [],
})
//数据列表
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({})


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

<style lang="less" scoped>
.completeLc {
    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(.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>