src/views/baseListHazardousSamples/index.vue

<template>
  <div class="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="4">
                <el-form-item label="">
                  <el-date-picker
                    v-model="query.inputTime"
                    type="daterange"
                    value-format="timestamp"
                    format="yyyy-MM-dd"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col> -->
              <!-- <el-col :span="6">
                <el-form-item label="">
                  <el-input v-model="query.content" placeholder="请输入具体内容" />
                </el-form-item>
              </el-col> -->
              <el-col :span="5">
                <el-form-item label="">
                  <el-select v-model="query.source" placeholder="请选择来源" clearable>
                    <el-option
                      v-for="(item, index) in levelOptions"
                      :key="index"
                      :label="item.fullName"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="">
                  <CompanySelect v-model="query.company" :isInput="true" placeholder="请选择运营主体"></CompanySelect>
                  <!-- <el-select
                    v-model="query.company"
                    placeholder="请选择运营主体"
                    clearable
                    filterable 
                    v-selectLoadMore="moreCompanyList"
                    :loading="name_loading"
                    :teleported="false"
                    :filter-method="filterMethod"
                  >
                    <el-option
                      v-for="(item, index) in companyOptions.slice(0, company_currentPage)"
                      :key="index"
                      :label="item.companyName"
                      :value="item.id"
                    />
                  </el-select> -->
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="">
                  <el-input v-model="query.questionType" clearable placeholder="请输入问题类型" />
                </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>
                <div class="NCC-common-search-box-right">
                  <el-button type="primary" icon="el-icon-download" size="mini" @click="toExport" :loading="exportBtnLoading">导出</el-button>
                </div>
              </el-col>
            </el-form>
          </el-row>
          <div class="NCC-common-layout-main NCC-flex-main">
            <NCC-table v-loading="listLoading" :data="list">
              <!-- <el-table-column prop="id" label="主键" align="left" show-overflow-tooltip/> -->
              <el-table-column prop="inputTime" label="录入时间" align="left" :formatter="ncc.tableDateFormat" show-overflow-tooltip/>
              <el-table-column label="运营主体" prop="companyStr" align="left" show-overflow-tooltip />
              <el-table-column label="应用名称" prop="websitePlatformStr" align="left" show-overflow-tooltip />
              <el-table-column label="来源" prop="source" align="left" show-overflow-tooltip />
              <el-table-column label="问题类型" prop="questionType" align="left" show-overflow-tooltip />
              <el-table-column label="问题内容" prop="questionContent" align="left" show-overflow-tooltip />
              <el-table-column label="违法原因" prop="unlawfulReason" align="left" show-overflow-tooltip />
              <el-table-column label="处罚内容" prop="penaltyContent" align="left" show-overflow-tooltip/>
              <!-- <el-table-column prop="creatorUserId" label="创建用户" show-overflow-tooltip align="left"/> -->
              <!-- <el-table-column prop="creatorTime" label="创建时间" align="left" show-overflow-tooltip :formatter="ncc.tableDateFormat"/> -->
              <!-- <el-table-column prop="lastModifyUserId" label="修改用户" align="left" show-overflow-tooltip/> -->
              <!-- <el-table-column prop="lastModifyTime" label="修改时间" :formatter="ncc.tableDateFormat" show-overflow-tooltip align="left"/> -->
              <el-table-column label="操作" fixed="right" width="100">
                <template slot-scope="scope">
                  <el-button type="text" @click="addOrUpdateHandle(scope.row, true)">详情</el-button>
                </template>
              </el-table-column>
            </NCC-table>
            <pagination :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize" @pagination="initData"/>
          </div>
        </div>
        <NCC-Form v-if="formVisible" ref="NCCForm" @refresh="refresh" />
        <ExportBox v-if="exportBoxVisible" ref="ExportBox" @download="download"/>
         <!-- 案件处理 -->
        <HandForm v-if="HandFormVisible" ref="HandForm" @refresh="(val) => {taskRefresh('HandFormVisible', val)}" />
          <!-- 巡查处置 -->
        <ReportForm v-if="ReportFormVisible" ref="ReportForm" @refresh="(val) => {taskRefresh('ReportFormVisible', val)}" />
      </div>
    </div>
  </div>
</template>
<script>
import request from "@/utils/request";
import { getDictionaryDataSelector } from "@/api/systemData/dictionary";
import NCCForm from "./Form";
import ExportBox from "./ExportBox";
import { previewDataInterface } from "@/api/systemData/dataInterface";
import HandForm from '@/views/baseCaseHandling/Form.vue' // 案件处理
import ReportForm from '@/views/baseInspectionReport/Form.vue' // 巡查处置
export default {
  components: { NCCForm, ExportBox, HandForm, ReportForm },
  data() {
    return {
      showAll: false,
      query: {
        inputTime: undefined,
        content: undefined,
        harmfulInformationTypes: undefined, // 有害类型
        company: undefined,
        questionType: undefined,
      },
      list: [],
      listLoading: false,
      multipleSelection: [],
      total: 0,
      listQuery: {
        currentPage: 1,
        pageSize: 20,
        sort: "desc",
        sidx: "",
      },
      formVisible: false,
      exportBoxVisible: false,
      columnList: [
        { prop: "id", label: "主键" },
        { prop: "inputTime", label: "录入时间" },
        { prop: "content", label: "具体内容" },
        { prop: "harmfulInformationTypes", label: "有害信息类型" },
        { prop: "level", label: "级别" },
        { prop: "frequency", label: "频率" },
        { prop: "company", label: "涉及的企业" },
        { prop: "websitePlatform", label: "网站平台" },
        { prop: "creatorUserId", label: "创建用户" },
        { prop: "creatorTime", label: "创建时间" },
        { prop: "lastModifyUserId", label: "修改用户" },
        { prop: "lastModifyTime", label: "修改时间" },
      ],
      levelOptions: [
        { fullName: "核查处置", id: "核查处置" },
        { fullName: "网信执法", id: "网信执法" },
      ],
      companyOptions: [],
      // 导出
      exportBtnLoading: false,
      HandFormVisible: false,
      ReportFormVisible: false,
      company_currentPage: 20,
      name_loading: false,
    };
  },
  computed: {},
  created() {
    this.initData();
    // this.getcompanyOptions();
  },
  methods: {
    // getcompanyOptions() {
    //   this.name_loading = true;
    //   request({
    //     url: `/Extend/basecomapnyinfo/GetNoPagingList`,
    //     method: "GET",
    //   }).then(({data}) => {
    //     this.companyOptions = data;
    //     this.name_loading = false;
    //   })
    // },
    // moreCompanyList() {
    //   if(this.company_currentPage > this.companyOptions.length) return
    //   this.company_currentPage += 10;
    // },
    // filterMethod(val) {
    //   this.company_currentPage = 20;
    //   this.name_loading = true;
    //   request({
    //     url: `/Extend/basecomapnyinfo/GetNoPagingList`,
    //     method: "GET",
    //     params: { companyName: val }
    //   }).then(({data}) => {
    //     this.companyOptions = data;
    //     this.name_loading = false;
    //   })
    // },
    initData() {
      this.listLoading = true;
      let _query = {
        ...this.listQuery,
        ...this.query,
      };
      let query = {};
      for (let key in _query) {
        if (Array.isArray(_query[key])) {
          query[key] = _query[key].join();
        } else {
          query[key] = _query[key];
        }
      }
      request({
        url: `/extend/BaseListHazardousSamples`,
        method: "GET",
        params: query,
      }).then((res) => {
        this.list = res.data.list;
        this.total = res.data.pagination.total;
        this.listLoading = false;
      });
    },
    // 导出
    toExport() {
      let _query = {
        ...this.query,
      };
      let query = {};
      for (let key in _query) {
        if (Array.isArray(_query[key])) {
          query[key] = _query[key].join();
        } else {
          query[key] = _query[key];
        }
      }
      this.exportBtnLoading = true;
      request({
        url: `/extend/BaseListHazardousSamples/Actions/Export`,
        method: "POST",
        data: query,
      }).then((res) => {
        const url = process.env.VUE_APP_BASE_API + res.data.url;
        const link = document.createElement("a");
        link.href = url;
        link.download = res.data.name;
        link.click();
        this.exportBtnLoading = false;
      }).catch(() => this.exportBtnLoading = false);
    },
    handleDel(id) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        type: "warning",
      })
        .then(() => {
          request({
            url: `/Extend/BaseListHazardousSamples/${id}`,
            method: "DELETE",
          }).then((res) => {
            this.$message({
              type: "success",
              message: res.msg,
              onClose: () => {
                this.initData();
              },
            });
          });
        })
        .catch(() => {});
    },
    addOrUpdateHandle(row, isDetail) {
      switch (row.source) {
        case "核查处置":
        this.ReportFormVisible = true;
          this.$nextTick(() => {
            this.$refs.ReportForm.init(row.inspectionReportId, true);
          });
          break;
        case "网信执法":
          this.HandFormVisible = true;
          this.$nextTick(() => {
            this.$refs.HandForm.init(row.caseHandlingId, true);
          });
          break;
      
        default:
          break;
      }
    },
    search() {
      this.listQuery = {
        currentPage: 1,
        pageSize: 20,
        sort: "desc",
        sidx: "",
      };
      this.initData();
    },
    taskRefresh(key ,isrRefresh) {
      this[`${key}`] = false;
      if (isrRefresh) this.reset();
    },
    reset() {
      for (let key in this.query) {
        this.query[key] = undefined;
      }
      this.listQuery = {
        currentPage: 1,
        pageSize: 20,
        sort: "desc",
        sidx: "",
      };
      this.initData();
    },
  },
};
</script>
<style scoped lang="scss">
.common-info-box {
  :deep(.el-table__body-wrapper.is-scrolling-none) {
    height: calc(100% - 47px);
    overflow-y: scroll;
  }
}
</style>