gas-injection/src/views/vent/performance/comment/NormalTable.vue

<template>
  <div>
    <BasicTable @register="registerTable">
      <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="handleEdit(record)">编辑</a>
        <a-popconfirm title="确定删除?" @confirm="handleDelete(record)">
          <a class="table-action-link">删除</a>
        </a-popconfirm>
        <a class="table-action-link" @click="handleDownLoad(record)">下载</a>
        <a class="table-action-link" @click="handleSpDetail(record)">审批详情</a>
      </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"></HistorySp>
    </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} from './comment.api'
import { message } from 'ant-design-vue';


const props = defineProps({
  //文件审批-提交信息
  submitInfo: {
    type: Array,
    default: () => {
      return []
    }
  },
  //各矿参数
  selfParam: {
    type: Object,
    default: () => {
      return {};
    },
  },
  //查询参数
  searchParam: {
    type: String,
    default: '',
  },
  //菜单树传递参数
  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 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('')

// 列表页面公共参数、方法
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 ? props.searchParam : '';
      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
    }
  } else {
    message.warning('请先选择要提交的文件!');
  }
}
//取消提交
function handleTjCancel() {
  formStateTj.file = ''
  visibleTj.value = false
}
//审批详情点击
function handleSpDetail(data) {
  visibleSp.value = true
  getHistoricFlowNewList({tableId:data.id,tableName:data.tableName})
  getHighlightImgNewList({tableId:data.id,tableName:data.tableName})
}
//审批详情-审批历史列表
async function getHistoricFlowNewList(params) {
    let res = await historicFlowNew({...params})
    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
}
/**
 * 编辑事件
 */
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>