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

<template>
  <div>
    <BasicTable @register="registerTable" :key="resetTable">
      <template #actionSp="{ record }">
        <a class="table-action-link" @click="handleSpDetail(record)">审批详情</a>
        <!-- <a class="table-action-link" @click="handleTo(record)" :disabled="userName==record.createBy">提交</a>
        <a class="table-action-link" @click="handleSpRevoke(record)" :disabled="userName==record.createBy">撤回</a> -->
        <a class="table-action-link" @click="handleTo(record)">提交</a>
        <a class="table-action-link" @click="handleSpRevoke(record)">撤回</a>
      </template>
      <template #actionWj="{ record }">
        <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>
        <a class="table-action-link" @click="handlerJc(nodeParam.id)">{{
          nodeParam.id == '1600000000000000001'
            ? '报表分析'
            : nodeParam.id == '1500000000000000002'
            ? '报表分析'
            : nodeParam.id == '1500000000000000003'
            ? '色谱仪分析'
            : nodeParam.id == '1400000000000000003' || nodeParam.id == '1400000000000000002'
            ? '报表分析'
            : ''
        }}</a>
      </template>

      <template #bodyCell="{ column, record }">
        <slot name="filterCell" v-bind="{ column, record }"></slot>
      </template>
    </BasicTable>
    <DeviceModal :editID="editID" :fileType="fileType" @register="registerDeviceModal" />
    <CADModal :fileid="editID" @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" />
    </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, unref } 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';
  import { useUserStore } from '/@/store/modules/user';
  import { useRouter } from 'vue-router';

  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 router = useRouter(); //路由
  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({});

  let userStore = useUserStore(); //获取用户信息
  let userName = unref(userStore.getUserInfo).username;

  // 列表页面公共参数、方法
  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: 200,
      // },
      showActionColumn: false,
      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) {
    historySpList.length = 0;
    let res = await historicFlowNew({ ...params });
    if (res.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.assignees[0].isExecutor ? '已处理' : '待处理',
        });
      });
    }
  }
  //审批详情-流程轨迹
  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 = Object.assign({}, res);
    if (res.result) {
      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);
    }
  }

  //报表监测跳转
  function handlerJc(data) {
    switch (data) {
      case '1600000000000000001':
        //粉尘报表
        router.push('/dust-sheet');
        break;
      case '1500000000000000002':
        //束管日报
        router.push('/dubdle-monitor-table');
        break;
      case '1500000000000000003':
        //束管色谱仪
        router.push('/sundle-spy');
        break;
      case '1400000000000000002':
        //瓦斯日报巡检分析
        router.push('/gas/gas-report-inspect');
        break;
      case '1400000000000000003':
        //瓦斯日报巡检分析
        router.push('/gas/gas-report-inspect');
        break;
    }
  }
  // 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;
  }
  a[disabled] {
    color: #ccc;
  }
</style>