<template> <div> <BasicTable @register="registerTable" :key="resetTable"> <template #action="{ record }"> <!-- <TableAction :actions="getActions(record)" :dropDownActions="getDropDownAction(record)" /> --> <a class="table-action-link" @click="handleTo(record)">提交</a> <a class="table-action-link" @click="handleSpDetail(record)">审批详情</a> <a class="table-action-link" @click="handleSpRevoke(record)">撤回</a> <a class="table-action-link" @click="handleEdit(record)">编辑</a> <a class="table-action-link" @click="handleDownLoad(record)">下载</a> <a-popconfirm title="确定删除?" @confirm="handleDelete(record)"> <a class="table-action-link">删除</a> </a-popconfirm> </template> <template #bodyCell="{ column, record }"> <slot name="filterCell" v-bind="{ column, record }"></slot> </template> </BasicTable> <DeviceModal :editID="editID" :fileType="fileType" @register="registerDeviceModal" /> <CADModal @register="registerCADModal" /> <!-- 审批-提交弹窗 --> <a-modal v-model:visible="visibleTj" centered :width="600" title="提交文件" @ok="handleTjOk" @cancel="handleTjCancel"> <a-form :model="formStateTj" labelAlign="right" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }"> <a-form-item label="选择审批" :rules="[{ required: true, message: '请选择是否提交' }]"> <a-select v-model:value="formStateTj.file" style="width: 260px"> <a-select-option v-for="file in fileList " :key="file.label" :value="file.value">{{ file.label }}</a-select-option> </a-select> </a-form-item> </a-form> </a-modal> <!-- 审批详情弹窗 --> <a-modal v-model:visible="visibleSp" width="1000px" :footer="null" :title="titleSp" centered destroyOnClose> <HistorySp :historySpList="historySpList" :imgSrc="imgSrc" :isShow="isShow" :spInfo="spInfo" @spClose="spClose"> </HistorySp> </a-modal> <!-- 审批-撤销申请弹窗 --> <a-modal v-model:visible="visibleCx" centered :width="600" title="撤销申请" @ok="handleCxOk" @cancel="handleCxCancel"> <a-textarea v-model:value="revokeDes" placeholder="请输入撤回原因..." :rows="4" style="width:96%;margin:10px;background-color: transparent;color: #fff;" /> </a-modal> </div> </template> <script lang="ts" name="system-user" setup> //ts语法 import { ref, provide, reactive, toRaw, defineExpose } from 'vue'; import { BasicTable, TableAction } from '/@/components/Table'; import DeviceModal from './DeviceModal.vue'; import CADModal from './CADModal.vue'; import HistorySp from './HistorySp.vue' import { useModal } from '/@/components/Modal'; import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns'; import { useListPage } from '/@/hooks/system/useListPage'; import { commit } from '../fileDetail/fileDetail.api' import { historicFlowNew, getHighlightImgNew, getTodoTask, getCancelNew } from './comment.api' import { message } from 'ant-design-vue'; const props = defineProps({ //文件审批-提交信息 submitInfo: { type: Array, default: () => { return [] } }, //各矿参数 selfParam: { type: Object, default: () => { return {}; }, }, //查询参数 searchParam: { type: Object, default:()=>{ return {} }, }, //菜单树传递参数 nodeParam: { type: Object, default: () => { return {}; }, }, columnsType: { type: String, // required: true, }, columns: { type: Array, // required: true, default: () => [], }, list: { type: Function, required: true, }, //下载文件接口 downLoad: { type: Function, required: true, }, deleteById: { type: Function, required: true, }, pointList: { type: Function, // required: true, }, designScope: { type: String, }, title: { type: String, }, }); let resetTable=ref(0) let fileType = ref(''); //文件类型 let editID = ref(0); //文件ID const isUpdate = ref(false); const record = reactive<Record<string, any>>({}); provide('formData', record); const [registerDeviceModal, { openModal, closeModal }] = useModal(); const columnList = getTableHeaderColumns(props.columnsType); //是否显示文件审批弹窗 let visibleTj = ref(false) //文件审批-弹窗参数 let formStateTj = reactive({ file: '', id: '', }) //文件审批-提交信息弹窗下拉选项数据 let fileList = reactive<any[]>([]) //审批详情弹窗数据 let visibleSp = ref(false) let titleSp = ref('审批详情') //审批详情历史数据 let historySpList = reactive<any[]>([]) let imgSrc = ref('') //审批-是否显示撤回/驳回按钮 let isShow = ref(true) //审批通过/驳回参数信息 let spInfo = reactive({}) //审批-撤销 let visibleCx = ref(false) let revokeDes = ref('') let cxInfo = reactive({}) // 列表页面公共参数、方法 const { tableContext, doRequest } = useListPage({ designScope: props.designScope, tableProps: { title: props.title, api: props.list, columns: props.columns.length > 0 ? (props.columns as any[]) : columnList, // size: 'small', bordered: false, scroll: { y: 620 }, // formConfig: { // // labelWidth: 100, // labelAlign: 'left', // labelCol: { // xs: 24, // sm: 24, // md: 24, // lg: 9, // xl: 7, // xxl: 5, // }, // schemas: props.searchFormSchema as any[], // }, striped: true, showIndexColumn: true, //是否显示序列号 actionColumn: { width: 400, }, useSearchForm: false, //不使用查询条件 // pagination: false, //不使用分页组件 beforeFetch: (params) => { params.parentId = props.nodeParam.id ? props.nodeParam.id : ''; params.selectFlag = props.nodeParam.id ? false : true; params.likeFileName = props.searchParam.fileName ? props.searchParam.fileName : ''; params.fileSuffix = props.searchParam.fileType ? '.'+ props.searchParam.fileType : ''; params.bpmStatus = props.selfParam.bpmStatus ? props.selfParam.bpmStatus : ''; params.sysOrgCode = props.selfParam.sysOrgCode ? props.selfParam.sysOrgCode : ''; }, }, }); //注册table数据 const [registerTable, { reload }, { selectedRowKeys }] = tableContext; // 审批提交 function handleTo(data) { visibleTj.value = true fileList.length = 0 props.submitInfo.forEach(el => { fileList.push({ label: el.name, value: el.id }) }) formStateTj.id = data.id } //确认提交 async function handleTjOk() { if (formStateTj.file) { let res = await commit({ procDefId: formStateTj.file, tableId: formStateTj.id, firstGateway: true }) if (res == '提交成功') { message.success(res); visibleTj.value = false resetTable.value=new Date().getTime() } else { message.warning(res.message); } } else { message.warning('请先选择要提交的文件!'); } } //取消提交 function handleTjCancel() { formStateTj.file = '' visibleTj.value = false } //审批详情点击 function handleSpDetail(data) { visibleSp.value = true getTodoTaskShow({ tableId: data.id, tableName: data.tableName }) getHistoricFlowNewList({ tableId: data.id, tableName: data.tableName }) getHighlightImgNewList({ tableId: data.id, tableName: data.tableName }) } //审批详情-审批历史列表 async function getHistoricFlowNewList(params) { let res = await historicFlowNew({ ...params }) console.log(res,'res99999999999999') 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, status: el.status || '待处理' }) }) } } //审批详情-流程轨迹 async function getHighlightImgNewList(params) { let res = await getHighlightImgNew({ ...params }) let imageUrl = window.URL.createObjectURL(res); imgSrc.value = imageUrl } //判断是否显示撤回/驳回按钮 async function getTodoTaskShow(params) { let res = await getTodoTask({ ...params }) spInfo = res.result if (spInfo) { isShow.value = true } else { isShow.value = false } } //审批通过/驳回弹窗关闭 function spClose() { visibleSp.value = false resetTable.value=new Date().getTime() } //审批-撤回提交 function handleSpRevoke(data) { visibleCx.value = true cxInfo = Object.assign({}, data) } //审批-撤销-确定 async function handleCxOk() { let res = await getCancelNew({ reason: revokeDes.value, tableId: cxInfo.id, tableName: cxInfo.tableName }) if (res == '操作成功') { message.success(res); } else { message.warning(res.message); } visibleCx.value = false revokeDes.value = '' resetTable.value=new Date().getTime() } //审批-撤销-取消 function handleCxCancel() { revokeDes.value = '' visibleCx.value = false } /** * 编辑事件 */ function handleEdit(data) { isUpdate.value = true; Object.assign(record, toRaw(data)); let index = record.fileSuffix.indexOf('.'); fileType.value = record.fileSuffix.substring(index + 1); editID.value = record.id; // 根据文件后缀名打开不同的模态框 if (['.dwg', '.mxcad'].includes(data.fileSuffix)) { openCADModal(true, { record, }); } else { openModal(true, { record, }); } } /** * 删除事件 */ async function handleDelete(record) { await props.deleteById({ id: record.id }, reload); } //下载文件 function handleDownLoad(record) { props.downLoad({ id: record.id }).then((res) => { let filename = `${record.fileName}`; downFilePublic(res, filename); }); } // 下载公用方法 function downFilePublic(content, fileName) { const blob = new Blob([content], { type: 'application/xlsx;charset=UTF-8' }); // 构造一个blob对象来处理数据 // 对于<a>标签,只有 Firefox 和 Chrome(内核) 支持 download 属性 // IE10以上支持blob但是依然不支持download if ('download' in document.createElement('a')) { // 支持a标签download的浏览器 const link = document.createElement('a'); // 创建a标签 link.download = fileName; // a标签添加属性 link.style.display = 'none'; link.href = URL.createObjectURL(blob); document.body.appendChild(link); link.click(); // 执行下载 URL.revokeObjectURL(link.href); // 释放url document.body.removeChild(link); // 释放标签 } else { // 其他浏览器 navigator.msSaveBlob(blob, fileName); } } // CAD预览相关的逻辑 const [registerCADModal, { openModal: openCADModal }] = useModal(); defineExpose({ doRequest, }); </script> <style scoped lang="less"> @ventSpace: zxm; @vent-table-no-hover: #00bfff10; :deep(.@{ventSpace}-table-cell-row-hover) { background: #264d8833 !important; } :deep(.@{ventSpace}-table-row-selected) { background: #268bc522 !important; } :deep(.@{ventSpace}-table-tbody > tr > td) { background-color: #0dc3ff05; } :deep(.jeecg-basic-table-row__striped) { td { background-color: @vent-table-no-hover !important; } } ::v-deep .zxm-table-title { display: none; } .zxm-form { padding-top: 20px !important; box-sizing: border-box; } </style>