front / ningxia-credit-web · Files

<template>
  <div>
    <div class="common_con mb10">
      <el-form ref="form" :model="state.queryParams" label-position="left" label-width="100px">
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="企业名称">
              <el-input v-model.trim="state.queryParams.ename" placeholder="请输入企业名称" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item>
              <el-button type="primary" icon="Search" v-debounceClick="()=>handleSearch()">查询</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="common_con">
      <el-row :gutter="10" class="mb10">
        <el-col :span="1.5">
          <el-button type="primary" icon="Plus" v-debounceClick="()=>handleAdd('addMonitorOpen')">添加企业监控</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button type="primary" icon="Minus" :disabled="state.multiple" :loading="state['cancelAll']" v-debounceClick="()=>handleRemove({}, 'cancelAll')">批量取消监控</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button type="primary" icon="Download" v-debounceClick="()=>handleDownload()">下载监控模版</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-upload
              ref="upload"
              :show-file-list="false"
              action="/api/web/monitorCompany/impExcel"
              accept=".xls,.xlsx"
              :headers="{authorization: getStoreToken}"
              :auto-upload="true"
              :disabled="state['isUpload']"
              :before-upload="(rawFile)=>beforeUpload(rawFile, 'isUpload')"
              :on-success="(response, uploadFile, uploadFiles)=>handleFileSuccess(response, uploadFile, uploadFiles, 'isUpload')">
            <el-button type="primary" icon="Upload" :loading="state['isUpload']">导入监控名单</el-button>
          </el-upload>
        </el-col>
      </el-row>

      <div style="padding-bottom: 60px;">
        <el-table :data="state.tableList" style="width: 100%" @selection-change="handleSelectionChange" border v-loading="state.isLoading" class="own_table" :row-class-name="rowClassName">
          <el-table-column type="selection" width="55" />
          <el-table-column v-for="(table, index) in state.tableColumns" :key="'table'+index" :label="table.label" :prop="table.prop" :min-width="table.width"></el-table-column>
          <el-table-column label="操作" min-width="30%">
            <template #default="scope">
              <el-button type="primary" size="small" icon="Minus" @click="handleRemove(scope.row,'cancel'+scope.row.index)" :loading="state['cancel'+scope.row.index]">取消监控</el-button>
            </template>
          </el-table-column>
        </el-table>

        <pagination
            v-show="state.total > 0"
            :total="state.total"
            :page.sync="state.queryParams.pageNum"
            :limit.sync="state.queryParams.pageSize"
            @pagination="({page, limit})=>getList(page, limit)"
        />
      </div>

      <find-enterprise :title="state.title" :open="state.addMonitorOpen" :openName="'addMonitorOpen'" @handleClose="handleClose">
        <template #cop="{row}">
          <el-button type="primary" size="small" icon="Plus" @click="handleSubmit(row)">添加监控</el-button>
        </template>
      </find-enterprise>
    </div>
  </div>
</template>

<script setup lang="ts">
  import '../../assets/css/index.scss'
  import FindEnterprise from "../../components/findEnterprise.vue";
  import * as api from '../../interface/api.ts'
  import {ElMessageBox} from "element-plus";
  import { downloadFileGet } from "../../utils/request.ts";

  import { loginMain } from '../../store'
  import { storeToRefs } from 'pinia';

  let loginAct = loginMain()
  let { getStoreToken, getUserInfo } = storeToRefs(loginAct)

  let state = reactive({
    isLoading: false,
    tableList: [],
    // 选中数组
    enames: [],
    // 非单个禁用
    single: true,
    // 非多个禁用
    multiple: true,
    total: 0,
    addMonitorOpen: false,
    title: "添加企业监控",
    userInfo: getUserInfo.value,
    queryParams: {
      pageNum: 1,
      pageSize: 10,
      ename: null,
    },
    tableColumns: [
      {
        label: "企业名称",
        prop: "ename",
      },{
        label: "统一信用代码",
        prop: "creditCode",
        width: "40%"
      },{
        label: "法定代表人",
        prop: "lrName",
        width: "20%"
      },{
        label: "状态",
        prop: "regStatus",
        width: "20%"
      },{
        label: "注册资本",
        prop: "regCapital",
        width: "30%"
      },{
        label: "成立日期",
        prop: "establishDate",
        width: "30%"
      },
    ],
    fileList: [],
  }) as any;

  let rules = reactive<FormRules>({
  })

  let handleSearch = () => {
    state.queryParams.pageNum = 1
    getList()
  }

  // 多选框选中数据
  let handleSelectionChange = (selection: Array<any>) => {
    state.enames = selection.map((item: Object) => item.ename)
    state.single = selection.length !== 1
    state.multiple = !selection.length
  }

  let handleAdd = (name: string) => {
    state[name] = true
  }

  let handleRemove = (row: Object, nameStatus: string) => {
    let enames = (row && row.ename) || state.enames.join(",")
    state[nameStatus] = true
    ElMessageBox.confirm('是否取消"'+enames+'"监控', '取消监控', {
      confirmButtonText: '确定',
      cancelButtonText: '取消'
    }).then(()=> {
      let tempJson = {ename: enames}
      api.removeMonitor(tempJson).then((res: any)=> {
        ElMessage.success("取消监控成功")
        getList()
      })
    }).finally(()=> {
      state[nameStatus] = false
    })
  }

  let handleDownload = () => {
    downloadFileGet('/web/monitorCompany/downExcel')
  }

  let beforeUpload = (rawFile: UploadRawFile, isUpload: string) => {
    state[isUpload] = true
  }

  let handleFileSuccess = (response: any, uploadFile: UploadFile, uploadFiles: UploadFiles, isUpload: string) => {
    state[isUpload] = false
    if (response.code != 2000) {
      ElMessage.error(response.msg)
      return false
    }
    let { fail, success} = response.data
    if (fail.length > 0) {
      ElMessage.error(fail.join(',') + "导入失败")
    } else {
      ElMessage.success("导入成功")
    }
    getList()
  }

  let handleClose = (name: string, value: boolean, isRefresh: boolean) => {
    state[name] = value
    if (isRefresh) {
      getList()
    }
  }

  let getList = (page = state.queryParams.pageNum, limit = state.queryParams.pageSize) => {
    state.isLoading = true
    state.tableList = []
    state.queryParams.pageNum = page
    state.queryParams.pageSize = limit
    api.getMonitorList(state.queryParams).then((res: Object)=> {
      state.total = res.data.total
      state.tableList = res.data.rows
    }).finally(()=> {
      state.isLoading = false
    })
  }

  let rowClassName = ({row={}, rowIndex = -1}) => {
    row.index = rowIndex
  }

  let handleSubmit = (row: Object) => {
    let tempJson = {ename: row.name, lrName: row.legalPersonName, regStatus: row.regStatus, regCapital: row.regCapital, establishDate: row.estiblishTime, creditCode: row.creditCode}
    api.addMonitor(tempJson).then((res: Object)=> {
      ElMessage.success("添加成功")
      handleClose('addMonitorOpen',false, true)
    })
  }

  onMounted(()=> {
    getList()
  })

</script>

<style scoped>
/*@import '../assets/css/global.scss';*/
/*@import '../assets/css/style.css';*/

</style>