vue-insagent-pc/src/views/FinancialManagement/ReconciliationSystem/ReceivablePayableCollection/SettlementSource.vue

<template>
  <div>
    <div class="p-2">
      <el-form
        :inline="true"
        :model="pageRequest"
        size="small"
        label-width="120px"
      >
        <el-row>
          <el-col :span="6">
            <el-form-item label="车牌号：">
              <el-input
                v-model="pageRequest.licenseno"
                placeholder="请输入车牌号"
                class="widths"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="交强保单号：">
              <el-input
                v-model="pageRequest.jqPolicyId"
                placeholder="请输入交强保单号"
                class="widths"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="商业保单号：">
              <el-input
                v-model="pageRequest.jqPolicyId"
                placeholder="请输入商业保单号"
                class="widths"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="非车保单号：">
              <el-input
                v-model="pageRequest.nonCarPolicyId"
                placeholder="请输入非车保单号"
                class="widths"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="flex j-end" style="margin-right: 100px">
        <el-button
          type="primary"
          size="small"
          @click="Search"
          style="margin-right: 20px"
          >查询</el-button
        >
        <el-upload
          class="upload-demo"
          :auto-upload="false"
          :on-change="writeOffUpload"
          action="###"
          :show-file-list="false"
        >
          <el-button size="small" type="primary">数据导入</el-button>
        </el-upload>
      </div>
    </div>
    <el-main ref="elMain" style="padding: 0px">
      <kt-common-table
        :SerialShow="false"
        :operationWidth="150"
        :showOperation="true"
        permsDelete="sys:user:delete"
        :showBatchDelete="false"
        :showBatchSettled="false"
        :showBatchPrint="false"
        permsButton1="sys:user:edit"
        permsButton2="sys:user:edit"
        permsButton3="sys:user:edit"
        :data="pageResult"
        :columns="columns"
        @findPage="findPage"
        keyName="policyno"
        settledName="批量生成"
        @handleSettled="handleTableSettled"
        @handlePrint="handlePrint"
        button1Name="修改"
        button1Background="#E6A23C"
        @handleButton1="sourceUpdate"
        button1Icon=""
      >
      </kt-common-table>
    </el-main>
    <el-dialog title="信息修改" :visible.sync="dialogFormVisible" width="60%">
      <el-form
        :model="updateform"
        :inline="true"
        label-width="130px"
        size="small"
      >
        <el-form-item label="渠道：">
          <el-input
            v-model="updateform.channel"
            autocomplete="off"
            class="widths"
          ></el-input>
        </el-form-item>
        <el-form-item label="车牌号：">
          <el-input
            v-model="updateform.licenseno"
            autocomplete="off"
            class="widths"
          ></el-input>
        </el-form-item>
        <el-form-item label="被保险人：">
          <el-input
            v-model="updateform.insuredName"
            autocomplete="off"
            class="widths"
          ></el-input>
        </el-form-item>
        <el-form-item label="险种：">
          <el-input
            v-model="updateform.insuranceType"
            autocomplete="off"
            class="widths"
          ></el-input>
        </el-form-item>
        <el-form-item label="业务归属：">
          <el-input
            v-model="updateform.businessOwner"
            autocomplete="off"
            class="widths"
          ></el-input>
        </el-form-item>
        <el-form-item label="交强保费：">
          <el-input
            v-model="updateform.jqPremiumTax"
            autocomplete="off"
            class="widths"
          ></el-input>
        </el-form-item>
        <el-form-item label="商业保费：">
          <el-input
            v-model="updateform.syPremiumTax"
            autocomplete="off"
            class="widths"
          ></el-input>
        </el-form-item>
        <el-form-item label="非车保费：">
          <el-input
            v-model="updateform.nonCarPremiumTax"
            autocomplete="off"
            class="widths"
          ></el-input>
        </el-form-item>
        <el-form-item label="交强应收比例：">
          <el-input
            v-model="updateform.compulsoryExportRatio"
            autocomplete="off"
            class="widths"
          ></el-input>
        </el-form-item>
        <el-form-item label="商业应收比例：">
          <el-input
            v-model="updateform.commercialExportRatio"
            autocomplete="off"
            class="widths"
          ></el-input>
        </el-form-item>
        <el-form-item label="非车应收比例：">
          <el-input
            v-model="updateform.nonVehicleExportRatio"
            autocomplete="off"
            class="widths"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogFormVisible = false"
          >取 消</el-button
        >
        <el-button size="small" type="primary" @click="updateSubmit"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import KtCommonTable from "@/views/Core/KtCommonTable.vue"; //表格组件
import KtButton from "@/views/Core/KtButton";
import CommonUtil from "@/utils/comutil.js";
export default {
  components: {
    KtCommonTable,
    KtButton,
  },
  data() {
    return {
      pageRequest: {
        //查询的默认条件
        pageNum: 1,
        pageSize: 20,
        licenseno: "",
        jqPolicyId: "",
        syPolicyId: "",
        nonCarPolicyId: "",
      },
      // 右侧列表查询数据Start
      dialogFormVisible: false,
      pageResult: [],
      updateform: {
        channel: "",
        licenseno: "",
        insuredName: "",
        insuranceType: "",
        businessOwner: "",
        jqPremiumTax: "",
        syPremiumTax: "",
        nonCarPremiumTax: "",
        compulsoryExportRatio: "",
        commercialExportRatio: "",
        nonVehicleExportRatio: "",
      },
      columns: [
        //数据列
        { prop: "id", label: " 编号", minWidth: 160 },
        { prop: "operationsTeam", label: "运营小组", minWidth: 160 },
        { prop: "channelClassification", label: "渠道分级", minWidth: 160 },
        { prop: "channel", label: "渠道", minWidth: 160 },
        { prop: "employeeId", label: "工号", minWidth: 160 },
        { prop: "signDate", label: "签单日期", minWidth: 160 },
        { prop: "licenseno", label: "车牌号", minWidth: 160 },
        { prop: "insuredName", label: "被保险人", minWidth: 100 },
        { prop: "insuranceCompany", label: "保险公司", minWidth: 160 },
        { prop: "insuranceType", label: "险种", minWidth: 160 },
        { prop: "businessOwner", label: "业务归属", minWidth: 160 },
        {
          prop: "jqPolicyId",
          label: "交强保单号",
          minWidth: 160,
        },
        { prop: "syPolicyId", label: "商业保单号", minWidth: 160 },
        { prop: "nonCarPolicyId", label: "非车保单号", minWidth: 160 },
        { prop: "jqPremiumTax", label: "交强保费", minWidth: 160 },
        { prop: "vehicleTax", label: "车船税", minWidth: 160 },
        { prop: "syPremiumTax", label: "商业保费", minWidth: 160 },
        { prop: "nonCarPremiumTax", label: "非车保费", minWidth: 160 },
        { prop: "compulsoryExportRatio", label: "交强出口比例", minWidth: 160 },
        { prop: "commercialExportRatio", label: "商业出口比例", minWidth: 160 },
        { prop: "nonVehicleExportRatio", label: "非车出口比例", minWidth: 160 },
        { prop: "settlementAmount", label: "结算金额", minWidth: 160 },
        { prop: "agencySettlementTime", label: "代理结算时间", minWidth: 160 },
      ],
    };
  },
  created() {},
  mounted() {},
  methods: {
    //附件上传
    writeOffUpload(file) {
      var file = file.raw;
      const params = new FormData(); // 声明formData数据类型
      params.append("multipartFile", file);
      params.append("type", "settle");
      this.$api.letter.uploadFile(params).then((res) => {
        if (res.code == "200") {
          let url = process.env.BASE_URL + res.data.url;
          this.$api.task.settlementExcel(url).then((res) => {});
        }
      });
    },
    handleTableSettled(ids) {
      this.plyNoList = ids;
      this.dialogVisible11 = true;
    },
    sourceUpdate({ row, column }) {
      this.dialogFormVisible = true;
      this.updateform = row;
    },
    Search() {
      this.findPage();
    },
    updateSubmit() {
      this.$api.task.settlementUpdate(this.updateform).then((res) => {
        if (res.code == "200") {
          this.$message({
            type: "success",
            message: res.msg,
          });
          this.dialogFormVisible = false;
          this.findPage();
        } else {
          this.$message({
            type: "error",
            message: res.msg,
          });
        }
      });
    },

    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);
      });
    },
    //联级选择器触发事件
    handleChange(val) {
      console.log(val);
      if (val.length !== 0) {
        this.pageRequest.deptId = val.at(-1);
      } else {
        this.pageRequest.deptId = "";
      }
    },
    //-- formatter begin--
    agreetypeFormatter(row, column) {
      //协议类型
      let agreetype = row.agreetype;
      return CommonUtil.getDataName({
        dataList: this.agreementtypeoptions,
        value: "value",
        label: "label",
        data: agreetype,
      });
    },
    inscompanyFormatter(row, column) {
      //协议类型
      let inscompany = row.inscompany;
      return CommonUtil.getDataName({
        dataList: this.global.insCompanyList,
        value: "code",
        label: "name",
        data: inscompany,
      });
    },
    timeFormatter(row, column) {
      let time = this.transformTime(row.createTime);
      return time;
    },
    totalmoenyFormatter(row, column) {
      //协议类型
      let inscompany = row.inscompany;
      return (row.feeamount + row.disamount).toFixed(2);
    },
    //点击查询按钮
    //--数据字典 begin --
    getDictItems: function (typeName) {
      let that = this;
      that.$api.dict
        .findByLableName(typeName)
        .then(function (res) {
          console.log(res);
          that[typeName + "options"] = res.data; // 把获取到的数据赋给this.data
        })
        .catch(function (error) {
          that[typeName + "options"] = [];
        });
    },
    //--数据字典 end --
    // 右侧列表的方法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
        .settlementExcelpage(that.pageRequest)
        .then((res) => {
          that.pageResult = res.data;
        })
        .then(data != null ? data.callback : "");
    },
  },
};
</script>
<style lang="scss" scoped>
.widths {
  width: 220px;
}
</style>