vue-insagent-pc/src/views/FinancialManagement/AcountWithdrawal/ExtendFee.vue

<template>
  <div>
      <!-- 搜索区域Start -->
      <el-form
        class="queryForm"
        ref="queryFormRef"
        :inline="true"
        size="small"
        :model="queryForm"
        label-width="80px"
      >
        <el-row >
          <el-col :span="8">
            <el-form-item label="机构编码">
              <el-input style="width: 220px;"
                clearable
                placeholder="机构编码"
                v-model="queryForm.deptid"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="工号">
              <el-input style="width: 220px;"
                clearable
                placeholder="工号"
                v-model="queryForm.userid"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="保单号">
              <el-input style="width: 220px;"
                clearable
                placeholder="保单号"
                v-model="queryForm.policyno"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="姓名">
              <el-input style="width: 220px;"
                clearable
                placeholder="姓名"
                v-model="queryForm.username"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="车牌号">
              <el-input style="width: 220px;"
                clearable
                placeholder="车牌号"
                v-model="queryForm.licenseNo"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="保险公司">
              <el-select style="width: 220px;"
                v-model="queryForm.inscompany"
                placeholder="请选择"
                clearable
              >
                <el-option label="华农财险" value="华农财险"></el-option>
                <el-option label="恒邦财险" value="恒邦财险"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8" style="height: 40px;">
              <el-form-item label="结算状态">
                <el-select v-model="queryForm.settlestatus" placeholder="请选择" style="width: 100%;" clearable>
                    <el-option label="未结算" value="0"></el-option>
                    <el-option label="已结算" value="1"></el-option>
                  </el-select>
              </el-form-item>
            </el-col>
          <el-col :span="8">
            <el-form-item label="签单时间">
              <el-date-picker style="width: 220px;"
                size="small"
                v-model="queryForm.signDate"
                type="daterange"
                @change="dateChange"
                range-separator="至"
                value-format="yyyy-MM-dd"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item>
              <el-button @click="queryEsmInfo" type="primary" size="small" >查询</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <kt-common-table
        permsDelete="sys:user:delete"
        :showBatchDelete="false"
        :showBatchPrint="true"
        permsButton3="sys:user:edit"
        :data="pageResult"
        :columns="columns"
        @findPage="findPage"
        :showOperation="false"
        @handlePrint="handlePrint"
      >
      </kt-common-table>
  </div>
</template>
<script>
import KtCommonTable from "@/views/Core/KtCommonTable.vue"; //表格组件
import KtButton from "@/views/Core/KtButton";
import CommonUtil from "@/utils/comutil.js";
import { formatWithSeperator, format } from "@/utils/datetime.js";
export default {
  components: {
    KtCommonTable,
    KtButton,
  },
  data() {
    return {
      // 右侧列表查询数据Start
      queryForm: {},
      pageResult: {},
      pageRequest: {
        //查询的默认条件
        pageNum: 1,
        pageSize: 10,
        columnFilters: {
          deptid: {
            name: "deptid",
            value: "",
          },
          userid: {
            name: "userid",
            value: "",
          },
          policyno: {
            name: "policyno",
            value: "",
          },
          username: {
            name: "username",
            value: "",
          },
          licenseNo: {
            name: "licenseNo",
            value: "",
          },
          inscompany: {
            name: "inscompany",
            value: "",
          },
          startdate: {
            name: "startdate",
            value: "",
          },
          settlestatus: {
            name: "settlestatus",
            value: "",
          },
          enddate: {
            name: "enddate",
            value: "",
          },
        },
      },
      columns: [
        //数据列
        { prop: "orderno", label: "订单号", minWidth: 120 },
        { prop: "policyno", label: "保单号", minWidth: 100 },
        { prop: "licenseno", label: "车牌号", minWidth: 100 },
        { prop: "riskcode", label: "险种", minWidth: 100 },
        { prop: "deptname", label: "机构", minWidth: 100 },
        { prop: "settlestatus", label: "结算状态"},
        { prop: "signDate", label: "签单时间"},
        { prop: "inscompany", label: "保险公司", minWidth: 100 },
        { prop: "refereescode", label: "工号", minWidth: 100 },
        { prop: "refereesname", label: "姓名", minWidth: 100 },
        { prop: "commissionrate", label: "佣金比例", minWidth: 100 },
        { prop: "commissionamount", label: "佣金金额", minWidth: 100 },
        { prop: "level", label: "佣金级别", minWidth: 100 },
      ],
      //------------协议下拉框数据   begin-----------------
      agreementtypeoptions: [], //协议类型
      //------------协议下拉框数据   end-----------------
    };
  },
  created() {
    //获取所有下拉框数据
    this.getDictItems("agreementtype");
  },
  mounted() {},
  methods: {
    handlePrint() {
      this.$api.task.excelExport(this.pageRequest).then((res) => {
        console.log(res);
        let blob = new Blob([res], {
          type: "application/vnd.ms-excel",
        }); // 2.获取请求返回的response对象中的blob 设置文件类型，这里以excel为例
        let url = window.URL.createObjectURL(blob); // 3.创建一个临时的url指向blob对象
        // 4.创建url之后可以模拟对此文件对象的一系列操作，例如：预览、下载
        let a = document.createElement("a");
        a.href = url;
        a.download = "推广费用清单.xlsx";
        a.click();
        // 5.释放这个临时的对象url
        window.URL.revokeObjectURL(url);
      });
    },

    //-- formatter begin--
    statusFormatter(row, column) {
      //协议类型
      return "提现成功";
    },
    //-- formatter end--
    dateChange(e){
      if (e == null) {
          this.pageRequest.columnFilters.startdate.value = ''
          this.pageRequest.columnFilters.enddate.value = ''
        } else {
      this.pageRequest.columnFilters.startdate.value=e[0];
      this.pageRequest.columnFilters.enddate.value=e[1];
        }
    },
    //--数据字典 begin --
    getDictItems: function (typeName) {
      let that = this;
      that.$api.dict
        .findByLableName(typeName)
        .then(function (res) {
          that[typeName + "options"] = res.data; // 把获取到的数据赋给this.data
        })
        .catch(function (error) {
          that[typeName + "options"] = [];
        });
    },
    //--数据字典 end --
    queryEsmInfo() {
      this.pageRequest.columnFilters.deptid.value = this.queryForm.deptid;
      this.pageRequest.columnFilters.userid.value = this.queryForm.userid;
      this.pageRequest.columnFilters.policyno.value = this.queryForm.policyno;
      this.pageRequest.columnFilters.username.value = this.queryForm.username;
      this.pageRequest.columnFilters.licenseNo.value = this.queryForm.licenseNo;
      this.pageRequest.columnFilters.inscompany.value = this.queryForm.inscompany;
      this.pageRequest.columnFilters.settlestatus.value = this.queryForm.settlestatus;
      this.pageRequest.pageNum = 1;
      this.findPage();
    },
    // 右侧列表的方法Start
    findPage(data) {
      // 获取分页数据
      let that = this;
      if (data && data.pageRequest) {
        this.pageRequest.pageNum = data.pageRequest.pageNum;
        this.pageRequest.pageSize = data.pageRequest.pageSize;
      }
      that.$api.task
        .queryCommission(that.pageRequest)
        .then((res) => {
          res.data.content.forEach(row=>{
            row.settlestatus=row.settlestatus==='1'?'已结算':'未结算'
          })
          that.pageResult = res.data;
        })
        .then(data != null ? data.callback : "");
    },
  },
};
</script>
<style scoped>

</style>