vue-insagent-pc/src/views/FinancialManagement/ReconciliationSystem/ReceivablePayableCollection/AccountsReceivable.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-date-picker
                v-model="pageRequest.yearMonthStr"
                type="month"
                value-format="yyyy-MM"
                placeholder="选择一个月"
                class="widths"
              >
              </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
                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-col :span="1">
            <el-button type="primary" size="small" @click="Search"
              >查询</el-button
            >
          </el-col>
          <el-col :span="1">
            <!-- <el-upload
              class="upload-demo"
              :auto-upload="false"
              :on-change="writeOffUpload"
              action="###"
            >
              <el-button type="primary" size="small">数据导入</el-button>
            </el-upload> -->
          </el-col>
        </el-row>
      </el-form>
    </div>
    <el-main ref="elMain" style="padding: 0px">
      <kt-common-table
        :SerialShow="true"
        :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="批量导出"
        @handlePrint="handlePrint"
        button1Name="修改"
        button1Background="#E6A23C"
        @handleButton1="accountUpdate"
        button1Icon=""
        button2Name="删除"
        button2Background="#F56C6C"
        @handleButton2="accountDelete"
        button2Icon=""
        :isshowpagination="false"
      >
      </kt-common-table>
    </el-main>
  </div>
</template>
<script>
import KtCommonTable from "@/views/Core/KtCommonTable.vue"; //表格组件
import CommonUtil from "@/utils/comutil.js";
import { searchkey } from "@/utils/validate.js";
import { regionData, codeToText } from "element-china-area-data";
export default {
  components: {
    KtCommonTable,
  },
  data() {
    return {
      value5: "",
      //地区编码数据
      areaOptions: regionData,
      regionalCode: [],
      accountsRequest: {
        //录入信息
        employeeId: "", //工号
        province: "", //省
        city: "", //市
        county: "", //区
        group: "", //组
        member: "", //组员
        account: "", //收款人账户
        payee: "", // 收款人名称
        bank: "", // 收款人开户行
      },
      pageRequest: {
        //查询的默认条件
        insuranceId: "", //保险公司
        yearMonthStr: "",
        pageNum:"1",
        pageSize:"10",
      },
      companyList: [],
      dateTime: [],
      institutionOptions: [],
      dialogVisible: false,
      companyList: [], //保险公司数据
      // 右侧列表查询数据Start
      pageResult: [],
      columns: [
        //数据列
        { prop: "day", label: " 日期", minWidth: 160 },
        { prop: "yearmonth", label: " 月份", minWidth: 160 },
        { prop: "insuranceName", label: "保险公司名称", minWidth: 160 },
        { prop: "jqPremiumTax", label: "交强", minWidth: 160 },
        { prop: "syPremiumTax", label: "商业", minWidth: 160 },
        { prop: "taxamount", label: "车船税", minWidth: 160 },
        { prop: "nonCarPremiumTax", label: "非车", minWidth: 160 },
        { prop: "totalPermium", label: "保费合计", minWidth: 160 },
        { prop: "premium", label: "手续费", minWidth: 100 },
        { prop: "nonCopying", label: "车跟单", minWidth: 160 },
        { prop: "totalReceivable", label: "应收合计", minWidth: 160 },
        { prop: "subsidyAmount", label: "补贴金额", minWidth: 160 },
        { prop: "totalReceivableAmount", label: "总应收金额", minWidth: 160 },
      ],
      imcccsw: "",
    };
  },
  created() {
    //获取当前年和月
    let date = new Date();
    let month = date.getMonth() + 1;
    month = month > 9 ? month : "0" + month;
    let year = date.getFullYear();
    this.pageRequest.yearMonthStr = year + "-" + month;
    this.companyInt();
  },
  mounted() {},
  methods: {
    //省市区
    areahandleChange(event) {
      if (event[0] != null && event[1] != null && event[2] != null) {
        this.accountsRequest.province = codeToText[event[0]];
        this.accountsRequest.city = codeToText[event[1]];
        this.accountsRequest.county = codeToText[event[2]];
      }
    },
    Search() {
      this.findPage();
    },
    companyInt() {
      this.$api.letter.gainTopList().then((res) => {
        this.companyList = res.data;
      });
    },
    // 右侧列表的方法Start
    findPage(data) {
      // 获取分页数据
      let that = this;
      if(that.pageRequest.yearMonthStr==''||that.pageRequest.yearMonthStr==null||that.pageRequest.yearMonthStr==undefined){
        that.$message.error('月份不能为空！')
        return
      }
      that.$api.task
        .accountsResult(
          that.pageRequest.yearMonthStr,
          that.pageRequest.insuranceId
        )
        .then((res) => {
          that.pageResult = res.data;
        })
        .then(data != null ? data.callback : "");
    },
    //修改
    accountUpdate({ row, column }) {
      this.dialogType = "edit";
      this.dialogTitle = "渠道账户修改";
      this.accountsRequest = row;
      const cityObject = {
        province: row.province,
        city: row.city,
        county: row.county,
      };
      this.regionalCode = searchkey(Object.values(cityObject));
      this.dialogVisible = true;
    },
    //删除
    accountDelete({ row, column }) {
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "error",
      })
        .then(() => {
          this.$api.task.channelAccountDelete(row.id).then((res) => {
            if (res.code == "200") {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.findPage();
            } else {
              this.$message({
                type: "error",
                message: res.msg,
              });
            }
          });
        })
        .catch(() => {});
    },

    //导出
    handlePrint() {
      this.$api.task.excelExport(this.pageRequest).then((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) {
      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) {
          that[typeName + "options"] = res.data; // 把获取到的数据赋给this.data
        })
        .catch(function (error) {
          that[typeName + "options"] = [];
        });
    },
    //--数据字典 end --
    transformTime(date) {
      var d = new Date(date);
      var strYear = d.getFullYear();
      var strMonth = d.getMonth() + 1;
      var strDay = d.getDate();
      var hh = d.getHours();
      var minutes = d.getMinutes(); // 分
      var Seconds = d.getSeconds();
      if (hh < 10) {
        hh = "0" + hh;
      }
      if (minutes < 10) {
        minutes = "0" + minutes;
      }
      if (Seconds < 10) {
        Seconds = "0" + Seconds;
      }
      if (strMonth < 10) {
        strMonth = "0" + strMonth;
      }
      if (strDay < 10) {
        strDay = "0" + strDay;
      }
      var datetime =
        strYear +
        "-" +
        strMonth +
        "-" +
        strDay +
        " " +
        hh +
        ":" +
        minutes +
        ":" +
        Seconds;
      return datetime;
    },
    lastMonth() {
      // 获取当前日期
      var currentDate = new Date();
      // 获取上个月的年份和月份
      var year = currentDate.getFullYear();
      var month = currentDate.getMonth() - 1;
      // 如果当前是1月份，则年份减1，月份变为12月
      if (month < 0) {
        year--;
        month = 11;
      }
      // 获取上个月的最后一天
      var lastDayOfLastMonth = new Date(year, month + 1, 0);
      // 格式化为两位数的字符串
      var formatNumber = function (num) {
        return num < 10 ? "0" + num : num;
      };
      // 上月1日的日期字符串
      var startDate = year + "-" + formatNumber(month + 1) + "-01";
      // 上月最后一日的日期字符串
      var endDate =
        year +
        "-" +
        formatNumber(month + 1) +
        "-" +
        formatNumber(lastDayOfLastMonth.getDate());
      return [startDate, endDate];
    },
  },
};
</script>
<style lang="scss" scoped>
.widths {
  width: 220px;
}
</style>