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

<template>
  <div>
    <div class="p-2">
      <el-form
        :inline="true"
        size="small"
        :model="pageRequest"
        class="demo-form-inline"
      >
        <el-form-item label="选择月份：">
          <el-date-picker
            v-model="pageRequest.monthValue"
            type="month"
            value-format="yyyy-MM"
            placeholder="选择月"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="保险公司：">
          <el-select
            v-model="insuranceIdlist"
            filterable
            class="widths"
            clearable
            @change="companySelectChange"
            collapse-tags
          >
            <el-option
              v-for="val in companyList"
              :key="val.id"
              :label="val.name"
              :value="val.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="formQuery">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-main ref="elMain" style="padding: 0px">
      <el-table
        :data="pageResult"
        size="small"
        stripe
        height="700"
        :header-cell-style="{
          background: '#F2F7FC',
          fontWeight: '900',
          color: '#606266',
        }"
      >
        <el-table-column
          prop="signDate"
          label="签单日期"
          header-align="center"
          align="center"
          width="150"
        ></el-table-column>
        <el-table-column label="总计" header-align="center">
          <el-table-column
            prop="signPremium"
            label="签单保费"
            header-align="center"
            width="100"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="signReceivableAmount"
            label="总应收金额"
            header-align="center"
            width="100"
            align="center"
          ></el-table-column>
        </el-table-column>
        <el-table-column label="已结算" header-align="center">
          <el-table-column
            v-for="(item,index) in settlementColumns"
            :key=" index"
            :label="item.settlementDate"
            header-align="center"
          >
            <el-table-column
              label="签单保费"
              header-align="center"
              width="100"
              align="center"
            >
              <template slot-scope="scope">
                <div>
                  {{ scope.row.settlementData[index].agentCommission}}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              label="代理人佣金"
              header-align="center"
              width="100"
              align="center"
            >
              <template slot-scope="scope">
                <div>
                  {{ scope.row.settlementData[index].settlementPremium }}
                </div>
              </template>
            </el-table-column>
          </el-table-column>
        </el-table-column>
        <el-table-column label="未结算预计" header-align="center">
          <el-table-column
            prop="unCalculatedAmount"
            label="签单保费"
            header-align="center"
            width="100"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="agentAmount"
            label="代理人佣金"
            header-align="center"
            width="100"
            align="center"
          ></el-table-column>
        </el-table-column>
        <el-table-column label="利润" header-align="center">
          <el-table-column
            prop="settledProfit"
            label="已结算利润"
            header-align="center"
            width="100"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="unsettledProfitCalculation"
            label="未结算利润测算"
            header-align="center"
            width="150"
            align="center"
          ></el-table-column>
        </el-table-column>
        <!-- 使用v-for动态生成每个月的结算数据列 -->
      </el-table>
    </el-main>
  </div>
</template>
<script>
import CommonUtil from "@/utils/comutil.js";
export default {
  data() {
    return {
      //地区编码数据
      regionalCode: [],
      insuranceIdlist: [],
      companyList: [],
      pageRequest: {
        //查询的默认条件
        monthValue: "",
        insuranceId: "",
      },
      dateTime: [],
      institutionOptions: [],
      dialogVisible: false,
      docOrderid: "",
      plyNoList: [],
      // 右侧列表查询数据Start
      pageResult: [],
      settlementColumns: [], //数据列标题
    };
  },
  created() {
    this.companyInt();
  },
  mounted() {

  },
  methods: {
    //查询
    formQuery() {
      this.findPage();
    },
    //保险公司查询
    companyInt() {
      this.$api.letter.gainTopList().then((res) => {
        this.companyList = res.data;
      });
    },
    companySelectChange(val) {
      this.pageRequest.insuranceId = val.toString();
    },
    handleTableSettled(ids) {
      this.plyNoList = ids;
      this.dialogVisible11 = true;
    },

    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;
      that.$api.task
        .settlementSourceResult(
          this.pageRequest.monthValue,
          this.pageRequest.insuranceId
        )
        .then((res) => {
          if (res.code == "200") {
            that.pageResult = res.data.content;
            if (res.data.content.length > 0) {
              this.settlementColumns = res.data.content[0].settlementData;
            }
          } else {
            this.$message({
              type: "error",
              message: res.msg,
            });
          }
        })
        .then(data != null ? data.callback : "");
    },
  },
};
</script>
<style lang="scss" scoped>
.widths {
  width: 220px;
}
</style>