src/views/DisposalSuggestions/index.vue

<template>
  <div class="SystemInfo item-box common-info-box">
    <div class="item-title">核查处置</div>
    <div class="item-body">
      <div class="NCC-common-layout">
        <div class="NCC-common-layout-center">
          <el-row class="NCC-common-search-box" :gutter="16">
            <el-form @submit.native.prevent size="mini">
              <el-col :span="5">
                <el-form-item label="">
                  <el-date-picker v-model="query.creatorTime" type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss" start-placeholder="登记开始日期" end-placeholder="登记结束日期"/>
                </el-form-item>
              </el-col>
              <el-col :span="3">
                <el-form-item label="">
                  <el-input v-model="query.platformName" placeholder="请输入应用名称" clearable/>
                </el-form-item>
              </el-col>
              <el-col :span="3">
                <el-form-item label="">
                  <el-select v-model="query.platformType" placeholder="请选择应用类型" clearable>
                    <el-option v-for="(item, index) in systemTypeOptions" :key="index" :label="item.FullName" :value="item.Id"/>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="3">
                <el-form-item label="">
                  <el-select v-model="query.reportSource" placeholder="请选择问题来源" clearable>
                    <el-option v-for="(item, index) in sourceOptions" :key="index" :label="item.FullName" :value="item.Id"/>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="3">
                <el-form-item label="">
                  <el-input v-model="query.questionType" placeholder="请选择问题类型" clearable/>
                </el-form-item>
              </el-col>
              <el-col :span="3">
                <el-form-item label="">
                  <el-select v-model="query.state" placeholder="请选择类型" clearable>
                    <el-option v-for="item in stateOptions" :key="item" :label="item" :value="item"/>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="3">
                <el-form-item>
                  <el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
                  <el-button icon="el-icon-refresh-right" @click="reset()">重置</el-button>
                </el-form-item>
              </el-col>
              <div class="NCC-common-search-box-right"></div>
            </el-form>
          </el-row>
          <div class="btns-box">
            <el-button type="success" icon="el-icon-plus" @click="addForm()" size="mini" >新增</el-button>
            <el-button type="primary" icon="el-icon-download" size="mini" @click="exportDemo()">{{ isSHILevel ? '模板' : '线索上报模板' }}</el-button>
            <el-upload
                class="uploadXlax"
                :action="define.APIURl + '/api/Extend/BaseInspectionReport/Actions/ImportByExcel'"
                :headers="uploadHeaders"
                :on-success="uploadSuccess"
                :on-error="uploadError"
                :show-file-list="false"
                name="excelfile"
              >
                <div class="avatar-box">
                  <el-button type="info" icon="el-icon-upload" size="mini">线索上报导入</el-button>
                </div>
              </el-upload>
            <el-button type="primary" icon="el-icon-download" size="mini" @click="exportData()" >导出</el-button>
            <el-button v-if="!isSHILevel" type="primary" icon="el-icon-download" size="mini" @click="exportMakeDemo()">处置结果模板</el-button>
            <el-upload
                v-if="!isSHILevel"
                class="uploadXlax"
                :action="define.APIURl + '/api/Extend/BaseInspectionReport/TaskBatchReport'"
                :headers="uploadHeaders"
                :on-success="uploadSuccess"
                :on-error="uploadError"
                :show-file-list="false"
                name="excelfile"
              >
                <div class="avatar-box">
                  <el-button type="info" icon="el-icon-upload" size="mini">处置结果导入</el-button>
                </div>
              </el-upload>
          </div>
          <div class="NCC-common-layout-main NCC-flex-main">
            <NCC-table v-loading="listLoading" :data="list">
              <el-table-column show-overflow-tooltip prop="platformNameStr" label="应用名称" align="left"/>
              <el-table-column label="应用类型" prop="platformType" align="left" show-overflow-tooltip>
                <template slot-scope="scope">{{ scope.row.platformType | dynamicTextUP(systemTypeOptions) }}</template>
              </el-table-column>
              <el-table-column label="问题来源" prop="reportSource" align="left" show-overflow-tooltip>
                <template slot-scope="scope">{{ scope.row.reportSource | dynamicTextUP(sourceOptions) }}</template>
              </el-table-column>
              <el-table-column show-overflow-tooltip label="问题类型" prop="questionTypeStr" align="left"/>
              <el-table-column show-overflow-tooltip label="线索编号" prop="leadNumber" align="left" width="180"/>
              <!-- <el-table-column show-overflow-tooltip prop="link" label="有害链接" align="left" /> -->
              <!-- <el-table-column show-overflow-tooltip prop="questionClass" label="关键词" align="left" /> -->
              <el-table-column show-overflow-tooltip prop="creatorTime" label="录入时间" align="left" :formatter="ncc.tableDateFormat"/>
              <el-table-column show-overflow-tooltip prop="state" label="状态" align="left"/>
              <!-- <el-table-column show-overflow-tooltip prop="disposalSuggestions" label="处置建议" align="left" />
                   <el-table-column show-overflow-tooltip prop="id" label="主键" align="left" />
                   <el-table-column show-overflow-tooltip prop="department" label="部门" align="left" />
                   <el-table-column show-overflow-tooltip label="问题分类" prop="questionClass" align="left">
                           <template slot-scope="scope">{{ scope.row.questionClass | dynamicText(questionClassOptions) }}</template>
                   </el-table-column>
                   <el-table-column show-overflow-tooltip label="阶段" prop="stage" align="left">
                           <template slot-scope="scope">{{ scope.row.stage | dynamicText(stageOptions) }}</template>
                   </el-table-column> -->
              <el-table-column label="操作" fixed="right" width="200">
                <template slot-scope="scope">
                  <template v-if="userId == scope.row.creatorUserId">
                    <el-button type="text" @click="addForm(scope.row.id)" :disabled="scope.row.stage != '577006621985604869' && scope.row.stage !='577006641364189019'">编辑</el-button>
                    <el-button type="text" @click="handleDel(scope.row.id)" class="NCC-table-delBtn" :disabled="scope.row.stage != '577006621985604869' && scope.row.stage !='577006641364189019'">删除</el-button>
                  </template>
                  <el-button type="text" @click="addOrUpdateHandle(scope.row.id, false, 'edit')" v-if="isSHILevel && scope.row.stage == '577006666214540549'" >建议修改</el-button>
                  <!-- 未研判 ‘577006621985604869’/未下发 ‘577006641364189019’ / 已处置 ‘577006696312866053’ 可以研判 -->
                  <!-- <el-button type="text" v-if="isSHILevel" @click="addOrUpdateHandle(scope.row.id)" :disabled="['577006621985604869', '577006641364189019', '577006696312866053'].includes(scope.row.stage) == -1">{{ scope.row.stage == '577006641364189019' ? '下发' : '研判'}}</el-button> -->
                  <el-button type="text" v-if="isSHILevel && scope.row.stage != '577006666214540549'" @click="addOrUpdateHandle(scope.row.id)" :disabled="!['577006621985604869','577006641364189019','577006696312866053'].includes(scope.row.stage)">研判</el-button>
                  <!-- 待处置进行处理 -->
                  <el-button type="text" v-if="!isSHILevel" @click="toHandle(scope.row.id)" :disabled="scope.row.stage != '577006131314196155'" >处理</el-button>
                  <el-button type="text" @click="toDetail(scope.row.id)">详情</el-button>
                </template>
              </el-table-column>
            </NCC-table>
            <pagination :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize" @pagination="initData"/>
          </div>
        </div>
		    <ADDNCCForm v-if="addformVisible" ref="ADDNCCForm" @refresh="refresh" />
        <NCC-Form v-if="formVisible" ref="NCCForm" @refresh="refresh" />
        <HandleForm v-if="HandleFormVisible" ref="HandleForm" @refresh="refresh"/>
        <ReportForm v-if="ReportFormVisible" ref="ReportForm" @refresh="refresh"/>
      </div>
    </div>
  </div>
</template>
<script>
import request from "@/utils/request";
import infoMixin from "@/mixins/info";
import NCCForm from "./Form";
import ADDNCCForm from '@/views/baseInspectionReport/Form.vue'
import HandleForm from "./HandleForm";
import {
  getListForJudge,
  previewDataInterface,
} from "@/api/systemData/dataInterface";
import ReportForm from "@/views/baseInspectionReport/Form.vue"; // 巡查处置
import define from '@/utils/define'
export default {
  components: { NCCForm, HandleForm, ReportForm, ADDNCCForm },
  mixins: [infoMixin],
  data() {
    return {
      showAll: false,
      query: {
        platformName: undefined,
        platformNameStr: undefined,
        platformType: undefined,
        department: undefined,
        questionType: undefined,
        questionClass: undefined,
        creatorTime: [],
        state: undefined,
      },
      list: [],
      listLoading: true,
      multipleSelection: [],
      total: 0,
      listQuery: {
        currentPage: 1,
        pageSize: 20,
        sort: "desc",
        sidx: "",
      },
      formVisible: false,
      exportBoxVisible: false,
      columnList: [
        { prop: "platformName", label: "平台名称" },
        { prop: "platformType", label: "平台类型" },
        { prop: "questionType", label: "问题类型" },
        { prop: "link", label: "有害链接" },
        { prop: "disposalSuggestions", label: "处置建议" },
        { prop: "id", label: "主键" },
        { prop: "department", label: "部门" },
        { prop: "questionClass", label: "问题分类" },
        { prop: "stage", label: "阶段" },
      ],
      sourceOptions: [
        { fullName: "市网信办线索", id: "市网信办线索" },
        { fullName: "自主巡查发现", id: "自主巡查发现" },
      ],
      systemTypeOptions: [],
      questionTypeOptions: [],
      questionClassOptions: [
        { fullName: "选项一", id: "1" },
        { fullName: "选项二", id: "2" },
      ],
      stageOptions: [
        { fullName: "选项一", id: "1" },
        { fullName: "选项二", id: "2" },
      ],
      uploadHeaders: { 
        Authorization: this.$store.getters.token,
        IsLogin: true,
      },
      HandleFormVisible: false,
      ReportFormVisible: false,
      addformVisible: false,
      stateOptions: ['待研判', '待进一步处置', '已处置待研判', '转执法', '已存档', '不采纳'],
    };
  },
  computed: {
    isSHILevel() {
      // 判断角色是否为‘市级办公室’
      return this.$store.state.user.islader;
    },
    userId() {
      return this.$store.state.user.id
    }
  },
  created() {
    this.initSystemTypeList();
    this.getSourceOptions();
    this.initData();
  },
  methods: {
    async getSourceOptions() {
      let { data } = await request({
        url: `/Extend/baseinspectionreport/GetReportSourceList`,
        method: "GET",
      });
      this.sourceOptions = data;
    },
    getTime() {
      if(!this.query.creatorTime) return;
      return {
        startTime: this.query.creatorTime[0] || '',
        endTime: this.query.creatorTime[1] || '',
      }
    },
    initData() {
      this.listLoading = true;
      let _query = {
        ...this.listQuery,
        ...this.query,
        ...this.getTime()
      };
      let query = {};
      for (let key in _query) {
        if (Array.isArray(_query[key])) {
          query[key] = _query[key].join();
        } else {
          query[key] = _query[key];
        }
      }
      query.creatorTime && delete query.creatorTime;
      getListForJudge(query).then((res) => {
        this.list = res.data.list;
        this.total = res.data.pagination.total;
        this.listLoading = false;
      });
    },
    addOrUpdateHandle(id, isDetail, type) {
      this.formVisible = true;
      this.$nextTick(() => {
        this.$refs.NCCForm.init(id, isDetail, type);
      });
    },
    search() {
      this.listQuery = {
        currentPage: 1,
        pageSize: 20,
        sort: "desc",
        sidx: "",
      };
      this.initData();
    },
    refresh(isrRefresh) {
      this.formVisible = false;
      this.HandleFormVisible = false;
      this.ReportFormVisible = false;
      if (isrRefresh) this.reset();
    },
		handleDel(id) {
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
            type: 'warning'
        }).then(() => {
            request({
                url: `/Extend/BaseInspectionReport/${id}`,
                method: 'DELETE'
            }).then(res => {
                this.$message({
                    type: 'success',
                    message: res.msg,
                    onClose: () => {
                        this.initData()
                    }
                });
            })
        }).catch(() => {
        });
    },
    // 处理
    toHandle(id, isDetail) {
      this.HandleFormVisible = true;
      this.$nextTick(() => {
        this.$refs.HandleForm.init(id, isDetail);
      });
    },
    // 详情
    toDetail(id) {
      this.ReportFormVisible = true;
      this.$nextTick(() => {
        this.$refs.ReportForm.init(id, true);
      });
    },
    reset() {
      for (let key in this.query) {
        this.query[key] = undefined;
      }
      this.query.creatorTime = [];
      this.listQuery = {
        currentPage: 1,
        pageSize: 20,
        sort: "desc",
        sidx: "",
      };
      this.initData();
    },
    exportData() {
      let _query = {
        ...this.query,
        startTime: this.query.creatorTime[0],
        endTime: this.query.creatorTime[1],
      };
      let query = {};
      for (let key in _query) {
        if (Array.isArray(_query[key])) {
          query[key] = _query[key].join();
        } else {
          query[key] = _query[key];
        }
      }
      delete query.creatorTime;
      let obj = {
        url: "/Extend/BaseInspectionReport/Actions/ExportByJudge",
        method: "POST",
        data: query,
      };
      request(obj).then((res) => {
        if (res.code != 200) return;
        const url = define.APIURl + res.data.url;
        const link = document.createElement("a");
        link.href = url;
        link.download = res.data ? res.data.name : "研判列表.xlsx";
        link.click();
      });
    },
    // 巡查上报列表方法-----------------------------------------------------------------------
    addForm(id, isDetail) {
        this.addformVisible = true
        this.$nextTick(() => {
            this.$refs.ADDNCCForm.init(id, isDetail)
        })
    },
    exportDemo() {
      let obj = {
        url: '/Extend/BaseInspectionReport/Actions/GenerateImportTemplate',
        method: "GET",
        responseType: 'blob',
      };
      request(obj).then((res) => {
        const blob = new Blob([res], {type: 'application/json'});
        const url = window.URL.createObjectURL(blob);
        let link = document.createElement('a');
        link.style.display = 'none';
        link.href = url;
        link.download = '线索录入模板.xlsx';
        link.click();
      });
    },
    exportMakeDemo() {
      let obj = {
        url: '/Extend/BaseInspectionReport/Actions/GenerateImportTemplateBatchReport',
        method: "GET",
        responseType: 'blob',
      };
      request(obj).then((res) => {
        const blob = new Blob([res], {type: 'application/json'});
        const url = window.URL.createObjectURL(blob);
        let link = document.createElement('a');
        link.style.display = 'none';
        link.href = url;
        link.download = '处理表单模板.xlsx';
        link.click();
      });
    },
    uploadSuccess(response, file, fileList) {
      if(response.code == 200) {
        this.$message({
          message: response.msg,
          type: 'success'
        });
      } else {
        this.$message.error(response.msg);
      }
      response.code == 200 && this.initData();
    },
    uploadError() { 
      console.log('erroe');
    },
  },
};
</script>
<style scoped lang="scss">
.common-info-box {
  :deep(.el-table__body-wrapper.is-scrolling-none) {
    height: calc(100% - 47px);
    overflow-y: scroll;
  }
}
.uploadXlax {
  display: inline-block;
  margin: 0 8px;
}
.NCC-common-search-box {
  margin-bottom: 0;
}
.btns-box {
  margin-bottom: 14px;
}
</style>