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

<template>
  <div>
    <div class="p-2">
      <el-form
        :inline="true"
        size="small"
        :model="formInline"
        class="demo-form-inline"
      >
        <el-col :span="6">
          <el-form-item label="选择年份：">
            <el-date-picker
              v-model="formInline.monthValue"
              type="year"
              value-format="yyyy"
              placeholder="选择年"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="保险公司：">
            <el-select
              v-model="pageRequest.insuranceId"
              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-col>
        <el-form-item>
          <el-button type="primary" @click="formQuery">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-main ref="elMain" style="padding: 0px">
      <kt-common-table
        :SerialShow="false"
        :operationWidth="150"
        :showOperation="false"
        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="批量生成"
        :isshowpagination="false"
        @handleSettled="handleTableSettled"
      >
      </kt-common-table>
    </el-main>
  </div>
</template>
<script>
import KtCommonTable from "@/views/Core/KtCommonTable.vue"; //表格组件
import CommonUtil from "@/utils/comutil.js";
export default {
  components: {
    KtCommonTable,
  },
  data() {
    return {
      companyList:[],//保险公司数据
      insuranceIdlist: [],//保险公司值
      //地区编码数据
      regionalCode: [],
      formInline: {
        monthValue: "2024",
      },
      pageRequest: {
        //查询的默认条件
        insuranceId:'',
      },
      dateTime: [],
      companyList: [],
      institutionOptions: [],
      dialogVisible: false,
      docOrderid: "",
      plyNoList: [],
      // 右侧列表查询数据Start
      pageResult: [],
      columns: [
        //数据列
        { prop: "yearmonth", label: "签单日期", minWidth: 160 },
        { prop: "jqPremiumTax", label: "交强保费", minWidth: 160 },
        { prop: "syPremiumTax", label: "商业保费", minWidth: 160 },
        { prop: "nonCarPremiumTax", label: "非车保费", minWidth: 160 },
        { prop: "writtenPremium", label: "签单保费", minWidth: 160 },
        { prop: "settlementAmount", label: "应收金额", minWidth: 160 },
      ],
    };
  },
  created() {
    this.companyInt();
  },
  mounted() {
    this.formInline.monthValue = this.monthProcess();
  },
  methods: {
    //选择保险公司change事件
    companySelectChange(val) {
      this.pageRequest.insuranceId = val
    },
    //获取保险公司数据
    companyInt() {
      this.$api.letter.gainTopList().then((res) => {
        this.companyList = res.data;
      });
    },
    formQuery() {
      // this.findPage();
      this.$api.task
        .signingSourceResult(this.formInline.monthValue,this.pageRequest.insuranceId)
        .then((res) => {
          this.pageResult = res.data;
        });
    },
    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) {
          that[typeName + "options"] = res.data; // 把获取到的数据赋给this.data
        })
        .catch(function (error) {
          that[typeName + "options"] = [];
        });
    },
    //--数据字典 end --
    // 右侧列表的方法Start
    findPage(data) {
      let year = this.monthProcess();
      // 获取分页数据
      let that = this;
      that.$api.task
        .signingSourceResult(year,that.pageRequest.insuranceId)
        .then((res) => {
          if(res.code==200){
            that.pageResult = res.data;
          }else{
            that.$message.error(res.msg)
          }
        })
        .then(data != null ? data.callback : "");
    },
    monthProcess() {
      // 创建一个新的Date对象，默认构造函数会生成当前日期和时间
      const now = new Date();
      // 获取当前年份
      const year = now.getFullYear();

      // // 获取当前月份，加1得到常规表示的月份
      // const month = now.getMonth() + 1;

      // // 转换月份为两位数字符串
      // const formattedMonth = month.toString().padStart(2, "0");

      // // 合并年份和月份为"年-月"格式
      return `${year}`;
    },
  },
};
</script>
<style lang="scss" scoped>
.widths {
  width: 220px;
}
.demo-form-inline{
  height: 80px;
  display: flex;
  align-items: center;
}
</style>