jiangxiGaizao/src/views/PblmRectify/Components/pblmTable_over.vue

<template>
  <div id="">
    <a-table
      ref="pblmDataTable"
      :row-selection="{
        columnWidth: 60,
        selectedRowKeys: selectedRowKeys,
        onChange: handleSelectionChange
      }"
      :columns="columns"
      :data-source="tableSetting.data"
      :rowClassName="tableRowClassName"
      :loading="loading"
      :pagination="false"
      row-key="id"
      style="width: 100%;"
      :style="{height: height + 'px'}"
      class="mainTable"
      :scroll="{x: 'max-content', y: height - 60}"
      bordered>
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'fileNoNumber'">
          <span style="position: relative;">
            <span>{{ record.fileNoNumber }}</span>
          </span>
        </template>
        <template v-else-if="column.dataIndex === 'inspPblmDesc'">
          <a-tooltip placement="top">
            <template #title>
              <span>{{ record.inspPblmDesc }}</span>
            </template>
            <span class="ellipsis200">{{ record.inspPblmDesc }}</span>
          </a-tooltip>
        </template>
        <template v-else-if="column.dataIndex === 'nm'">
          <a-tooltip placement="top">
            <template #title>
              <span>{{ record.nm }}</span>
            </template>
            <span class="ellipsis100">{{ record.nm }}</span>
          </a-tooltip>
        </template>
        <template v-else-if="column.dataIndex === 'pblmSource'">
          <a-tooltip placement="top">
            <template #title>
              <span>{{ record.pblmSource }}</span>
            </template>
            <span class="ellipsis200">{{ record.pblmSource }}</span>
          </a-tooltip>
        </template>
        <template v-else-if="column.dataIndex === 'zgMemo'">
          <a-tooltip placement="top">
            <template #title>
              <span>{{ record.zgMemo }}</span>
            </template>
            <span class="ellipsis200">{{ record.zgMemo }}</span>
          </a-tooltip>
        </template>
        <template v-else-if="column.dataIndex === 'dutyDept'">
          <a-tooltip placement="top">
            <template #title>
              <span>{{ record.dutyDept }}</span>
            </template>
            <span class="ellipsis200">{{ record.dutyDept }}</span>
          </a-tooltip>
        </template>
        <template v-else-if="column.dataIndex === 'objType'">
          <a-tooltip placement="top">
            <template #title>
              <span>{{ record.objType }}</span>
            </template>
            <span class="ellipsis200">{{ record.objType }}</span>
          </a-tooltip>
        </template>
        <template v-else-if="column.dataIndex === 'zgNotes'">
          <a-tooltip placement="top">
            <template #title>
              <span>{{ record.zgNotes }}</span>
            </template>
            <span class="ellipsis250">{{ record.zgNotes }}</span>
          </a-tooltip>
        </template>
        <template v-else-if="column.dataIndex === 'reviewStatus'">
          <a-tooltip placement="top">
            <template #title>
              <span>{{ record.reviewStatus }}</span>
            </template>
            <span class="ellipsis200">{{ record.reviewStatus }}</span>
          </a-tooltip>
        </template>
        <template v-else-if="column.dataIndex === 'reviewTm'">
          <a-tooltip placement="top">
            <template #title>
              <span>{{ record.reviewTm }}</span>
            </template>
            <span class="ellipsis200">{{ record.reviewTm }}</span>
          </a-tooltip>
        </template>
        <template v-else-if="column.dataIndex === 'action'">
          <a-button @click.stop="showPblmDetailDialog(record)" type="link">查看</a-button>
          <a-button @click.stop="handleAppeal(record.id,record.stat)" type="link">申诉</a-button>
        </template>
      </template>
    </a-table>
    <a-pagination
      show-size-changer
      :pageSize="tableSetting.pagination.pageSize"
      @update:pageSize="val => { tableSetting.pagination.pageSize = val }"
      :total="tableSetting.pagination.pblmCount"
      :page-size-options="['10','20','50','100']"
      :show-total="total => `共${total}条`"
      @showSizeChange="handleSizeChange"
      @change="handlePageNumChange"
      style="margin-top: 35px;"
    />
    <a-modal
        v-model:visible="changeSupervisionVisible"
        v-if="changeSupervisionVisible"
        width="90%"
        @cancel="closeModal"
        @after-close="closeModal"
        title="整改问题查看"
        class="outerDialog custom_dialog">
        <cqsssh v-if="changeSupervisionVisible" :isNotShow="true" :msgNo="curRow.id" :isModel="true" @closeModel="closeModel"></cqsssh>
    </a-modal>
    <a-modal
        title="超期整改申诉"
        v-model:visible="showAppeal"
        @ok="submitAppeal"
        @cancel="showAppeal = false"
        width="50%"
        :confirm-loading="confirmLoading">
      <a-form :model="appealForm" ref="appealRef" :label-col="{span: 6}" :wrapper-col="{span: 18}" :rules="rules">
        <a-form-item label="申诉说明" prop="appealContent">
          <a-input v-model:value="appealForm.appealContent" type="textarea" autocomplete="off" placeholder="申诉说明" allow-clear/>
        </a-form-item>
        <a-form-item label="申诉附件">
          <a-upload-dragger
              name="file"
              :multiple="true"
              :file-list="fileList"
              :action="appealUrl"
              :show-upload-list="true"
              @change="handleChange"
          >
            <p class="ant-upload-drag-icon">
              <a-icon type="plus-square" />
            </p>
            <p>把文件拖入指定区域，完成上传，同样支持点击上传。</p>
          </a-upload-dragger>
        </a-form-item>
        <a-form-item label="附件">
          <a-table
              bordered
              :data-source="fileArray"
              :columns="columns4"
              style="width: 100%;margin: 0 auto;">
                <template #bodyCell="{ column, record, index }">
                  <template v-if="column.dataIndex === 'action'">
                    <a-button size="small" @click="removeFile(record.id, index)" type="danger">删除</a-button>
                    <a-button size="small" @click="downloadFile(record.id,record.fileName)">下载</a-button>
                  </template>
                </template>
          </a-table>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import moment from 'moment';
import { deleteFileById } from '@/api/duChaAPI';
import request from '@/utils/gw_ajax_request';
import pblmRectifyTimeLine from '@/views/PblmRectify/Components/pblmRectifyTimeLine.vue';
import pblmRectifyTimeLineOver from '@/views/PblmRectify/Components/pblmRectifyTimeLineOver.vue';
import upload from '@/widgets/uploadFile.vue';
import { formatDateTime2 } from '../../../utils/gw_date';
import pblmMonthlyReport from '../../PblmRectifyMonthlyReport/Components/pblmMonthlyReport.vue';
import {
  distributePblmToSjdw,
  formatWorkflowStat,
  savePblmDelayInfo,
  savePblmRectifyInfo,
  savePblmRectifyInfoX,
} from '../Common/rectify_api';
import { formatDeadLineDate } from '../Common/rectify_date';
import cqsssh from './cqsssh.vue';
import pblmDelayInfo from './pblmDelayInfo.vue';
import pblmDetail from './pblmDetail.vue';
import pblmRectifyEdit from './pblmRectifyEdit.vue';
import pblmRectifyInfo from './pblmRectifyInfo.vue';
export default {
  props: {
    pblmTableSetting: {
      type: Object,
      default: () => {
        return {
          currentFllow: '',
          isYwcs: false,
          isJc: false,
          isShowBtn: false,
          isEditVisible: '',
          adType: '',
          cType: '',
          data: [], // 主数据源
          pagination: {
            pageSize: 10,
            pageNum: 1,
            pblmCount: 0,
          }, // 翻页相关配置项
          height: 470,
          currentPblmId: '', // 当前选中的问题的ID
          currentPblmFileNoNumber: '', // 当前选中的问题的编号
          currentPblmWorkflowStat: '', // 当前选中的问题的流程状态
          selectedPblms: [], // 多选模式下选中的所有问题集合
          multiSelect: true, // 是否出现行复选框
          enablePblmRectifyInfo: false, // 是否在操作栏显示输入整改信息按钮
          showWorkflowStat: true, // 是否显示整改状态,默认显示
          enableMonthlyReport: false,
          isZGZWTBtn: false,
          ifChao: null,
        };
      },
    },
    isJdcjbr: {
      type: Boolean,
      default: false,
    },
    isGDXH: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      showAppeal: false,
      confirmLoading: false,
      appealForm: {
        appealContent: '',
      },
      fileList: [],
      bizId: '',
      rules: {
        appealContent: [
          { required: true, message: '申诉说明不能为空', trigger: 'change' },
        ],
      },
      fileArray: [],
      currentId: '',
      columns4: [
        {
          title: '文件名',
          dataIndex: 'fileName',
          align: 'center',
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
        },
      ],
      moment,
      curRow: {},
      curData: {},
      showEdit: false,
      showPblmDetail: false, // 是否显示问题详情
      showPblmRectifyInfo: false, // 是否显示整改内容输入窗体
      showPblmDelayInfo: false, // 是否显示整改内容输入窗体
      showPblmMonthlyReportDialog: false, // 是否显示整改进度月报输入窗体
      tableSetting: this.pblmTableSetting,
      height: window.innerHeight - 400,
      loading: false,
      selectedRowKeys: [],
      columns: [
        {
          title: '问题编码',
          dataIndex: 'fileNoNumber',
          width: 80,
          fixed: 'left',
          align: 'center',
        },
        {
          title: '问题',
          dataIndex: 'inspPblmDesc',
          width: 200,
          fixed: 'left',
          align: 'center',
        },
        {
          title: '工程名称',
          dataIndex: 'nm',
          width: 100,
          fixed: 'left',
          align: 'center',
        },
        {
          title: '问题来源',
          dataIndex: 'pblmSource',
          width: 200,
          fixed: 'left',
          align: 'center',
        },
        {
          title: '问题印发文件名',
          dataIndex: 'zgMemo',
          width: 200,
          align: 'center',
        },
        {
          title: '县（市、区）',
          dataIndex: 'adName',
          width: 120,
          align: 'center',
        },
        {
          title: '设区市/直管县',
          dataIndex: 'upAdName',
          width: 120,
          align: 'center',
        },
        {
          title: '责任处室',
          dataIndex: 'dutyDept',
          width: 200,
          align: 'center',
        },
        {
          title: '问题归类',
          dataIndex: 'objType',
          width: 200,
          align: 'center',
        },
        {
          title: '超期记录',
          dataIndex: 'zgNotes',
          width: 250,
          align: 'center',
        },
        {
          title: '申述审核状态',
          dataIndex: 'reviewStatus',
          width: 200,
          align: 'center',
        },
        {
          title: '审核日期',
          dataIndex: 'reviewTm',
          width: 200,
          align: 'center',
        },
        {
          title: '申诉通道',
          dataIndex: 'ifOpen',
          width: 100,
          align: 'center',
        },
        {
          title: '操作',
          dataIndex: 'action',
          width: 200,
          align: 'center',
          fixed: 'right',
        },
      ],
      readOnlyRole: localStorage.getItem('readOnlyRole'),
      changeSupervisionVisible: false,
    };
  },
  components: {
    upload,
    pblmRectifyTimeLine,
    pblmRectifyTimeLineOver,
    pblmDetail,
    pblmRectifyInfo,
    pblmDelayInfo,
    pblmRectifyEdit,
    pblmMonthlyReportInfo: pblmMonthlyReport,
    cqsssh,
  },
  computed: {
    formatDateTime() {
      return formatDateTime2;
    },
    formatDeadLineDate() {
      return formatDeadLineDate;
    },
    formatWorkflowStat() {
      return formatWorkflowStat;
    },
    appealUrl() {
      return process.env.NODE_ENV === 'development'
        ? `/pdcApi/file/insert?bizId=${this.bizId}&bizType=2`
        : `/modular-dev-source/7446637943aa4c50b5d69c814517fca0/pdcApi/file/insert?bizId=${this.bizId}&bizType=2`;
    },
  },
  created() {
    console.log(this.isJdcjbr, 'isJdcjbr');
    if (typeof this.pblmTableSetting.showWorkflowStat === undefined) {
      this.pblmTableSetting.showWorkflowStat = true;
    }
  },
  methods: {
    clearSelection() {
      this.selectedRowKeys = [];
      this.tableSetting.selectedPblms = [];
    },
    closeModel() {
      this.changeSupervisionVisible = false;
    },
    downloadFile(downloadFiles, fileName) {
      request
        .get(`file/downFile/` + downloadFiles, { responseType: 'arraybuffer' })
        .then((res) => {
          const blob = new Blob([res], { type: 'application/vnd.ms-excel' });
          const objectUrl = URL.createObjectURL(blob);
          // window.location.href = objectUrl;
          const link = document.createElement('a');
          link.href = objectUrl;
          link.download = fileName; // 文件名
          link.click(); // 下载文件
          URL.revokeObjectURL(objectUrl); // 释放内存
        });
    },
    removeFile(id, index) {
      this.$confirm({
        title: '提示',
        content: '此操作将永久删除该文件, 是否继续?',
        okType: 'warning',
        onOk: () => {
          deleteFileById(id, this.userId).then((res) => {
            if (res.success) {
              this.getFileList(this.currentId);
            } else {
              this.failInfo();
            }
          });
        },
      });
    },
    handleChange(info) {
      this.fileList = info.fileList;
      const status = info.file.status;
      if (status === 'done') {
        this.$message.success(`${info.file.name}上传成功!`);
      } else if (status === 'error') {
        this.$message.error(`${info.file.name}上传失败,请联系管理员!`);
      }
    },
    handleAppeal(id, stat) {
      if (stat == '1') {
        return this.$message.info('正在申诉中...');
      } else if (stat == '3') {
        return this.$message.info('申诉通道已被监督处关闭,无法申诉!');
      }
      this.bizId = id;
      this.showAppeal = true;
      this.getFileList(id);
    },
    getFileList(id) {
      const params = {
        id,
      };
      this.currentId = id;
      request
        .post(`/bis/insp/BisInspZgPblmRecord/getAuditListInfo`, params)
        .then((res) => {
          this.fileArray = res.data.gwComFiles;
        });
    },
    submitAppeal() {
      this.$refs.appealRef.validate((valid) => {
        if (valid) {
          this.confirmLoading = true;
          const params = {
            id: this.bizId,
            appealContent: this.appealForm.appealContent,
          };
          request
            .post(`/bis/insp/BisInspZgPblmRecord/overdueStatementAudit`, params)
            .then((res) => {
              if (res.success) {
                this.confirmLoading = false;
                this.$message.success('申诉成功!');
                this.appealForm.appealContent = '';
                this.showAppeal = false;
                this.fileList = [];
              } else {
                this.$message.warning(res.message);
              }
            });
        } else {
          return false;
        }
      });
    },
    tableRowClassName(record) {
      if (record.isJcFlow == '1') {
        return 'success-jcflow';
      }
      return '';
    },
    handleSizeChange(current, size) {
      this.tableSetting.pagination.pageSize = size;
      // 触发父组件更新主数据源数据(主要将分页信息传回)
      this.$emit('sizeChange', {
        pageSize: this.tableSetting.pagination.pageSize,
      });
    },
    handleSelectionChange(val, row) {
      this.selectedRowKeys = val;
      this.tableSetting.selectedPblms = row;
      this.$emit('selectionChange', {
        selectedPblms: this.tableSetting.selectedPblms,
      });
    },
    handlePageNumChange(item) {
      this.tableSetting.pagination.pageNum = item;
      // 触发父组件更新主数据源数据(主要将分页信息传回)
      this.$emit('pageChange', {
        pageNum: this.tableSetting.pagination.pageNum,
      });
    },
    closePblmDetailDialog(id) {
      this.tableSetting.currentPblmId = '';
      this.tableSetting.currentPblmWorkflowStat = '';
      this.showPblmDetail = false;
    },
    showPblmDetailDialog(row) {
      this.changeSupervisionVisible = true;
      this.curRow = row;
    },
    closeModal() {
      this.changeSupervisionVisible = false;
    },
  },
};
</script>

<style lang='less' scoped>
:deep(.ant-table-pagination ) {
  float: left;
}
/deep/ .ant-table-thead>tr>th,
/deep/ .ant-table-tbody>tr>td {
  padding: 0;
  height: 45px;
}
.ellipsis200 {
   display: block;
   width: 198px;
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
 }
 .ellipsis100 {
   display: block;
   width: 98px;
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
 }
 .ellipsis120 {
  display: block;
  width: 118px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.ellipsis250 {
  display: block;
  width: 248px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
:deep(.success-jcflow ) {
  background: #bbf5ff !important;
}
:deep(.ant-table-scroll ) {
  position: relative;
  z-index: 1;
}

/deep/.ant-table-fixed-left,
:deep(.ant-table-fixed-right ) {
  z-index: 2;
}

.overFlow {
  width: 15px;
  height: 15px;
  position: absolute;
  z-index: 100000;
  top: 15px;
  left: -20px;
  opacity: 0;
}
.overFlow:hover {
  opacity: 1;
}
</style>