hsq-pro/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>
        <a class="table-action-link"  v-if="hasPermission('editPermiss:return')" @click="handlePermission(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 :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>
    <!-- 权限编辑弹窗 -->
    <a-modal v-model:visible="visiblePermission" width="450px" :footer="null" :title="titlePermission" centered
      destroyOnClose>
      <a-form :model="formStateQx" name="basic" :label-col="{ span: 8 }" :wrapper-col="{ span: 12 }" autocomplete="off">
        <a-form-item label="选择权限：">
          <JDictSelectTag v-model:value="formStateQx.filePerm" placeholder="请选择权限" dictCode="file_perm"
            style="width: 240px" />
        </a-form-item>
        <div class="opertion-btn">
          <a-button type="primary" @click="confirmQx">确定</a-button>
          <a-button type="success" style="margin-left:10px" @click="cancelQx">取消</a-button>
        </div>
      </a-form>
    </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 JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
import { useModal } from '/@/components/Modal';
import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
import { useListPage } from '/@/hooks/system/useListPage';
import { commit,updataFileParam } 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';
import { usePermission } from '/@/hooks/web/usePermission';

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,
  },
});
const { hasPermission } = usePermission();
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 visiblePermission = ref(false)
let titlePermission = ref('权限编辑')
let formStateQx = reactive({
  filePerm: ''
})
let permissionId = ref('')

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 handlePermission(record) {
  visiblePermission.value = true
  formStateQx.filePerm = record.filePerm  
  permissionId.value = record.id
}
//编辑权限-确定
async function confirmQx() {
  await updataFileParam({ id: permissionId.value, filePerm: formStateQx.filePerm },reload)
  visiblePermission.value = false
}
//编辑权限-取消
function cancelQx() {
  visiblePermission.value = false
  formStateQx.filePerm = ''
}

//下载文件
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('/dustDayReport/home');
      break;
    case '1500000000000000002':
      //束管日报
      router.push('/bundleDayReport/home');
      break;
    case '1500000000000000003':
      //束管色谱仪
      router.push('/bundleSpyDayReport/home');
      break;
    case '1400000000000000002':
      //瓦斯日报巡检分析
      router.push('/gas/gasDayReport/home');
      break;
    case '1400000000000000003':
      //瓦斯日报巡检分析
      router.push('/gas/gasDayReport/home');
      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: 20px 0px !important;
  box-sizing: border-box;
}

.opertion-btn {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  padding: 0px 20px;

}

a[disabled] {
  color: #ccc;
}
</style>