controlPc/src/pages/task/insurance.vue

<template>
  <div class="back-line-main">
    <div class="back-line-header">
      <div class="back-line-header-title">
        <h2>保险公司</h2>
        <div class="area-city">
          <div>
            省份：<a-select
              style="width: 200px"
              @change="getList()"
              v-model="formState.provinceId"
              allowClear
            >
              <a-select-option
                v-for="item in areaList"
                :key="item.areaCode"
                :label="item.areaCname"
                :value="item.areaCode"
              >
                {{ item.areaCname }}
              </a-select-option>
            </a-select>
          </div>
          <div>
            <span>城市：</span>
            <a-select
              style="width: 200px"
              v-model="formState.cityId"
              @change="getList()"
              allowClear
            >
              <a-select-option
                v-for="item in cityList"
                :key="item.areaCode"
                :label="item.areaCname"
                :value="item.areaCode"
              >
                {{ item.areaCname }}
              </a-select-option>
            </a-select>
          </div>
        </div>
        <div>
          <span>时间筛选</span>
          <a-range-picker
            @change="onChangeTime"
            v-model="formState.time"
            valueFormat="YYYY-MM-DD"
          >
            <a-icon slot="suffixIcon" type="calendar" />
          </a-range-picker>
          <a-radio-group
            default-value="0"
            button-style="solid"
            v-model="formState.days"
          >
            <a-radio-button
              value="1"
              @click="
                (formState.time = []),
                  (formState.beginDate = ''),
                  (formState.endDate = '')
              "
            >
              当天
            </a-radio-button>
            <a-radio-button
              value="7"
              @click="
                (formState.time = []),
                  (formState.beginDate = ''),
                  (formState.endDate = '')
              "
            >
              近7天
            </a-radio-button>
            <a-radio-button
              value="30"
              @click="
                (formState.time = []),
                  (formState.beginDate = ''),
                  (formState.endDate = '')
              "
            >
              近30天
            </a-radio-button>
          </a-radio-group>
        </div>
      </div>
      <a-row class="insurer-list">
        <a-button shape="circle" icon="left" class="left btn" @click="prev">
        </a-button>
        <a-col
          :span="5"
          v-for="item in companyList.slice(
            (this.companyPage.page - 1) * this.companyPage.size,
            this.companyPage.size * this.companyPage.page
          )"
          :key="item.insuranceCompanyId"
          @click="chooseInsurer(item)"
        >
          <div
            class="insurer"
            :class="companyId === item.insuranceCompanyId ? 'on' : 'insurer'"
          >
            <div>
              <img :width="50" :height="50" :src="item.logo" />
            </div>
            <div>
              <p>{{ item.namesimple }}</p>
              <!-- <p>保险公司</p>  -->
            </div>
          </div>
        </a-col>
        <a-button shape="circle" icon="right" class="right btn" @click="next">
        </a-button>
      </a-row>
    </div>
    <div class="btn-opreation">
      <a-button type="primary" @click="exportList">导出</a-button>
    </div>
    <standard-table
      bordered
      :columns="columns"
      :dataSource="tableList"
      :pagination="pagination"
      @clear="onClear"
      @change="onChange"
      :loading="loading"
    >
      <div slot="qutationCount" slot-scope="{ text }">
        {{ text + "条" }}
      </div>
      <div slot="quotationRate" slot-scope="{ text }">
        {{ (text * 100).toFixed(2) + "%" }}
      </div>
    </standard-table>
  </div>
</template>
    
    <script>
import StandardTable from "@/components/table/StandardTable";
import mixin from "../../minins/mixin";
const columns = [
  {
    title: "保险公司",
    dataIndex: "insuranceCompanyName",
    // scopedSlots: { customRender: "qutationCount" },
  },
  {
    title: "合作公司",
    dataIndex: "partnerCompaniesName",
    // scopedSlots: { customRender: "qutationCount" },
  },

  {
    title: "报价中",
    dataIndex: "qutationCount",
    scopedSlots: { customRender: "qutationCount" },
  },
  {
    title: "待审核",
    dataIndex: "auditOrder",
    scopedSlots: { customRender: "qutationCount" },
  },
  {
    title: "已核保待缴费",
    dataIndex: "underwritingCount",
    scopedSlots: { customRender: "qutationCount" },

    // sorter: true,
    needTotal: true,
  },
  {
    title: "已承保",
    dataIndex: "qutationInsureCount",
    needTotal: true,
    scopedSlots: { customRender: "qutationCount" },
  },
  {
    title: "核保退回",
    dataIndex: "underwritingReturn",
    scopedSlots: { customRender: "qutationCount" },
  },
  // {
  //   title: "报价率",
  //   dataIndex: "quotationRate",
  //   scopedSlots: { customRender: "quotationRate" },
  // },
  // {
  //   title: "承保率",
  //   dataIndex: "contributionRate",
  //   scopedSlots: { customRender: "quotationRate" },
  // },
  // {
  //   title: "核保通过率",
  //   dataIndex: "passingRate",
  //   scopedSlots: { customRender: "quotationRate" },
  // },
];
import moment from "moment";
export default {
  components: {
    StandardTable,
  },
  mixins: [mixin],
  data() {
    return {
      formState: {
        cityId: undefined,

        provinceId: undefined,
        days: undefined,
        time: [moment().format("YYYY-MM-DD"), moment().format("YYYY-MM-DD")],
        endDate: moment().format("YYYY-MM-DD"),
        beginDate: moment().format("YYYY-MM-DD"),
      },
      backLinePersonnel: {},
      columns: columns,
      companyList: [],
      tableList: [],
      pagination: {
        current: 1,
        defaultPageSize: 10,
        total: 0,
        pagesize0ptions: ["10", "20", "30", "50", "100"],
        hideOnSinglePage: false,
        showQuickJumper: true, //
        showSizeChanger: true, //是否可以改变pagesize
        showTotal: (total) => `共 ${total} 条数据`,
      },
      loading: false,
      wholeList: [],
      provinceList: [],
      cityList: [],
      areaList: [],
      storeList: [],

      companyPage: {
        page: 1,
        size: 15,
        total: 0,
        perPage: 0,
      },
      companyId: "",
      process: process.env.VUE_APP_API_BASE_URL,
      city: [],
    };
  },
  watch: {
    "formState.days"() {
      this.getBackLinePersonnel();
    },
    "formState.provinceId"(val) {
      console.log(val);
      if (val != undefined) {
        this.cityList = [...this.city];
      } else {
        this.formState.cityId = undefined;
        this.cityList = [];
      }
    },
  },
  mounted() {
    this.getBackLinePersonnel();
    this.getAreaList();
    // setTimeout(() => {

    // }, 1000);
    this.getCompanyList();
  },
  methods: {
    getList() {
      this.pagination.current = 1;
      this.getBackLinePersonnel();
    },
    getAreaList() {
      this.$API.personnel.getAreaList().then((res) => {
        // console.log(res);
        if (res.data.code === 200) {
          let arr = [];
          res.data.data.map((item) => {
            if (item.areaCname === "山西省") {
              arr.push(item);
            }
          });
          this.areaList = [...arr];
          // this.cityList = [...arr[0].child];
          this.city = [...arr[0].child];
        }
      });
    },
    exportList() {
      delete this.formState.time;
      this.$API.task
        .exportInsurancelList({
          ...this.formState,
        })
        .then((res) => {
          console.log(res);
          if (res.data.code == 200) {
            let url = this.process + res.data.data; // 3.创建一个临时的url指向blob对象
            let a = document.createElement("a");
            a.href = url;
            a.download = "导出文件.xlsx";
            a.click();
            window.URL.revokeObjectURL(url);
          } else {
            this.$message.error(res.msg);
          }
        });
    },
    prev() {
      if (this.companyPage.page != 1) this.companyPage.page -= 1;
    },
    next() {
      this.companyPage.page += 1;
      // this.getCompanyList();
      if (this.companyPage.page >= this.companyPage.perPage) {
        this.companyPage.page = this.companyPage.perPage;
      }
      // console.log(this.companyPage.page);
    },
    chooseInsurer(item) {
      this.companyId = item.insuranceCompanyId;
      //   // console.log(item,this.companyId)
      this.getBackLinePersonnel();
    },
    onChangeTime(val) {
      // console.log(val);
      this.formState.beginDate = val[0];
      this.formState.endDate = val[1];
      this.pagination.current = 1;
      this.formState.days = undefined;

      this.getBackLinePersonnel();
    },
    getCompanyList() {
      this.$API.agreement
        .getCompanyList({
          areaId: "",
          deptId: "",

          partnerCompaniesId: "",
          warningDay: "",
          warningStatus: "",
        })
        .then((res) => {
          if (res.data.code === 200) {
            this.companyList = res.data.data;

            this.companyPage.perPage = Math.ceil(
              res.data.data.length / this.companyPage.size
            );

            // console.log(this.companyPage);
            this.companyPage.total = res.data.data.length;
          }
        });
    },
    handleFinish() {
      //
    },

    getBackLinePersonnel() {
      this.loading = true;
      this.$API.task
        .getCompanyList({
          pageNum: this.pagination.current,
          pageSize: this.pagination.defaultPageSize,
          ...this.formState,
          companyId: this.companyId,
        })
        .then((res) => {
          if (res.data.code === 200) {
            this.loading = false;
            this.tableList = res.data.data.records;
            this.pagination = {
              current: res.data.data.current,
              defaultPageSize: res.data.data.size,
              total: res.data.data.total,
            };
          } else {
            this.loading = false;
            this.tableList = [];
            this.$message.error(res.data.msg);
          }
        });
    },
    onClear() {
      this.$message.info("您清空了勾选的所有行");
    },

    onChange(pagination, filters, sorter, { currentDataSource }) {
      // this.$message.info('表格状态改变了')
      console.log(pagination, filters, sorter, { currentDataSource });
      this.pagination = {
        current: pagination.current,
        defaultPageSize: pagination.pageSize,
        total: pagination.total,
      };
      this.getBackLinePersonnel();
    },
  },
};
</script>
    <style lang='less' scoped>
.back-line-main {
  display: flex;
  flex-direction: column;
  .back-line-header {
    padding: 15px;
    box-sizing: border-box;
    position: relative;
    // padding: 0px 35px;

    box-sizing: border-box;
    .insurer-list {
      // display:flex;
      // flex-wrap: wrap;
      width: 100%;
      // justify-content: stretch;
      position: relative;
      padding: 0px 35px;

      box-sizing: border-box;
      .btn {
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 999;
      }
      .btn.left {
        left: 20px;
      }
      .btn.right {
        right: -10px;
      }
      .ant-col {
        height: 90px;
        flex: none;
        // width: 18%;
        padding: 5px 10px;
        margin-bottom: 15px;
        box-sizing: border-box;
        width: 20%;
      }
      .insurer {
        width: 100%;
        height: 100%;
        background: #fff;
        border-radius: 3px;
        display: flex;
        align-items: center;
        // justify-content: space-between;
        padding: 0 15px;
        box-shadow: 0px 2px 8px 0px rgba(42, 85, 229, 0.15);
        border-radius: 8px 8px 8px 8px;
        border: 2px solid rgba(255, 255, 255, 0.2);
        > a-image {
          display: block;
        }
        p {
          margin: 0;
        }
        > div:first-child {
          background: #000;
          width: 50px;
          height: 50px;
        }
        > div:last-child {
          padding-left: 30px;
          box-sizing: border-box;
          font-size: 16px;
          font-style: "PingFang SC-Medium";
          color: #181818;
        }
      }
      .on {
        background: rgb(234, 238, 253);
      }
    }

    .back-line-header-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 15px;
      border-bottom: 1px solid #f0f0f0;
      box-sizing: border-box;
      h2 {
        margin: 0;
      }
      > div.area-city {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        > div {
          // flex: 1;
          display: flex;
          align-items: center;
          > span {
            margin-left: 10px;
          }
        }
      }
      > div:last-child {
        flex: none;
        display: flex;
        align-items: center;
        justify-content: flex-end;
      }
      span {
        display: block;
        margin-right: 15px;
      }
      /deep/.ant-calendar-picker {
        width: 300px;
      }
    }
  }
  > div {
    // height: 152px;
    background: #fff;
    .ant-form {
      display: flex;
      > .ant-form-item {
        flex: 1;
        /deep/.ant-form-item-control-wrapper {
          width: 100%;
        }
      }
    }
    .form-item-search {
      // display: flex;
      // justify-content: flex-end;
      /deep/ .ant-form-item-control {
        display: flex;
        justify-content: flex-end;
      }
    }
  }
}
.btn-opreation {
  display: flex;
  justify-content: flex-end;

  padding: 0 15px;
  box-sizing: border-box;
}
</style>