enterpriseList.vue 7.78 KB
<template>
  <div style="background-color: #fafafa;">
    <div class="mb10">
      <div class="common_con w80">
        <div class="search_bar">
          <el-row>
            <el-col :span="20">
              <el-input placeholder="请输入企业名称关键字" v-model="state.queryParams.ename" class="search_input">
                <template #prefix>
                  <el-icon class="el-input__icon"><Search /></el-icon>
                </template>
              </el-input>
            </el-col>
            <el-col :span="4">
              <el-button @click="getList" type="primary" style="height: 60px; width: 100%;font-size: 24px">
                <span>马上查</span>
              </el-button>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <div style="padding-bottom: 50px; min-height: 300px">
      <div class="common_con w80 table_wrap">
        <div class="loader_warp" v-if="state.isLoading">
          <div class="loader" ></div>
        </div>
        <template v-for="(item, index) in state.tableList">
          <el-row :gutter="40">
            <el-col :span="2" style="position: relative">
              <div class="col_title" :class="'title_color_' + getIndex(index)">
                <div>{{item.name.substring(0, 2)}}</div>
                <div>{{item.name.substring(2, 4)}}</div>
              </div>
            </el-col>
            <el-col :span="21">
              <el-descriptions>
                <template #title>
                  <!--              <el-link :underline="false" :href="'/enterpriseDetail?name=' + item.name" :style="{'font-size': '22px'}">{{item.name}}</el-link>-->
                  <span :style="{'font-size': '22px', cursor: 'pointer'}" @click="toDetail(item)">{{item.name}}</span>
                  <el-tag class="ml20" type="primary">{{item.regStatus}}</el-tag>
                </template>
                <template v-for="col in state.columnsList">
                  <el-descriptions-item v-if="col.prop != 'regStatus'" :label="col.label+ ':'" width="300px">
                    <template v-if="col.type === 'date'">
                      {{item[col.prop] && item[col.prop].substring(0, 10)}}
                    </template>
                    <template v-else>
                      {{item[col.prop]}}
                    </template>
                  </el-descriptions-item>
                </template>

                <template #extra>
                  <el-button type="success" icon="CirclePlus" link size="large" v-if="isHaveButton('front:creditCalculate')" @click="handleCredit(1, item)">授信测算</el-button>
                  <el-button type="danger" icon="Warning" link size="large" v-if="isHaveButton('front:riskInfo')" @click="()=>handleCredit(2, item)">风险信息</el-button>
                  <el-button type="primary" icon="Position" link size="large" v-if="isHaveButton('front:reportOrder') && item.isOrder === '0'" @click="handleSubmit('reportOrderOpen', item)">报告下单</el-button>
                  <el-button type="warning" icon="Watch" link size="large" :loading="state.isLoading" v-if="isHaveButton('front:addMonitor') && item.monitorStatus === '1'" @click="handleSubmitMonitor(item)">添加监控</el-button>
                </template>
              </el-descriptions>
            </el-col>
<!--            <el-col :span="6" class="center_col">
              <el-button type="primary" icon="Position" size="small" v-if="item.isOrder === '0'" v-debounceClick="()=>handleSubmit('reportOrderOpen', item)">报告下单</el-button>
              <el-button type="warning" icon="Watch" size="small" :loading="state.isLoading" v-if="item.monitorStatus === '1'" v-debounceClick="()=>handleSubmitMonitor(item)">添加监控</el-button>
            </el-col>-->
          </el-row>
          <el-divider />
        </template>

        <pagination
            v-show="state.total > 0"
            :total="state.total"
            :page.sync="state.queryParams.pageNum"
            :limit.sync="state.queryParams.pageSize"
            @pagination="getList"
        />

        <report-order title="报告下单"
                      :open="state.reportOrderOpen"
                      open-name="reportOrderOpen"
                      :is-show-footer="true"
                      :entryType="1"
                      @handleClose="handleClose"
        >
        </report-order>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import * as api from './../interface/api'
  import ReportOrder from "../components/reportOrder/reportOrder.vue";

  import { orderInfo } from './../store/index'
  let orderInfoAct = orderInfo()

  import router from "./../router/index"
  import {isHaveButton} from "../utils/until.ts";
  import {getToken} from "../utils/auth.ts";

  const route = useRoute();

  let state = reactive({
    tableList: [],
    columnsList: [
      {
        label: "法定代表人",
        prop: "legalPersonName"
      }, {
        label: "注册资本",
        prop: "regCapital"
      }, {
        label: "成立时间",
        prop: "estiblishTime",
        type: 'date'
      }, {
        label: "状态",
        prop: "regStatus",
      }
    ],
    total: 0,
    queryParams: {
      pageNum: 1,
      pageSize: 10,
      ename: ""
    },
    reportOrderOpen: false,
    isLoading: false,
  })

  onMounted(()=> {
    state.queryParams.ename = route.query.name
    getList()
  })

  let getList = () => {
    state.isLoading = true
    api.searchCompany(state.queryParams).then((res: any)=> {
      state.tableList = res.data.rows
    }).finally(()=> {
      state.isLoading = false
    })
  }

  let toDetail = (item: Object) => {
    if (isHaveButton("front:riskInfo") && !isHaveButton("front:reportOrder")) {
      orderInfoAct.setProjectInfo(item)
      router.push('/riskDetail?name=' + item.name)
    } else {
      orderInfoAct.setProjectInfo(item)
      router.push('/enterpriseDetail?name=' + item.name)
    }
  }

  // 立即下单
  let handleSubmit = (name: string, row: Object) => {
    state[name] = true
    orderInfoAct.setProjectInfo(row)
  }

  let handleCredit = (type: number, row: object) => {
    if (type === 1) {
      router.push('/addCredit?name=' + row.name)
    } else {
      router.push('/riskDetail?name=' + row.name)
    }
  }

  // 添加监控
  let handleSubmitMonitor = (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("添加成功")
      getList()
    })
  }

  let getIndex = (index: number) => {
    if (index < 10) {
      return index
    } else if (index < 20) {
      return index - 10
    } else if (index < 30) {
      return index - 20
    }
  }

  let handleClose = (name: string, value: boolean, isRefresh: boolean) => {
    state[name] = value
  }
</script>

<style scoped lang="scss">
  .el-main {
    background-color: #fafafa;
  }
  .search_bar {
    width: 80%;
    margin: 30px auto;

    .search_input {
      height: 60px;
      font-size: 18px;
      margin-bottom: 20px;
    }
  }
  .center_col {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .col_title {
    text-align: center;
    border-radius: 10px;
    color: #ffffff;
    font-size: 22px;
    padding: 5px;
    position: absolute;
    right: 0;
    div {
      letter-spacing: 10px;
      padding-left: 10px;
    }
    &.title_color_0, &.title_color_5 {
      background-color: #93BBF2;
    }
    &.title_color_1, &.title_color_6 {
      background-color: #93DDF2;
    }
    &.title_color_2, &.title_color_7 {
      background-color: #B693F2;
    }
    &.title_color_3, &.title_color_8 {
      background-color: #F6AEAE;
    }
    &.title_color_4, &.title_color_9 {
      background-color: #EEC5AB;
    }
  }
</style>