vue-insagent-pc/src/views/FinancialManagement/ReconciliationSystem/ReceivablePayableCollection/ChannelAccount.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.member"
                placeholder="请输入组员姓名"
                class="widths"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" >
            <el-form-item label="收款人名称：">
              <el-input
                v-model="pageRequest.payee"
                placeholder="请输入收款人名称"
                class="widths"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" >
            <el-form-item label="渠道名称：">
              <el-input
                v-model="pageRequest.channelName"
                placeholder="请输入渠道名称"
                class="widths"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" >
          <el-button type="primary" size="small" @click="Search"
              >查询</el-button
            >
            <el-button type="primary" size="small" @click="handleAdd"
              >数据录入</el-button
            >
          </el-col>
        </el-row>
      </el-form>
    </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="accountUpdate"
        button1Icon=""
        button2Name="删除"
        button2Background="#F56C6C"
        @handleButton2="accountDelete"
        button2Icon=""
      >
      </kt-common-table>
    </el-main>
    <el-dialog :title="dialogTitle" v-dialogDrag :close-on-click-modal="false" :visible.sync="dialogVisible" width="60%">
      <el-form
        :model="accountsRequest"
        :inline="true"
        label-width="130px"
        size="small"
        ref="accountsForm"
        :rules="accountsRules"
      >
        <el-form-item label="工号：" prop="employeeId">
          <el-input
            v-model="accountsRequest.employeeId"
            autocomplete="off"
            class="widths"
            placeholder="输入工号"
          ></el-input>
        </el-form-item>
        <el-form-item label="省市县选择：" prop="province">
          <el-cascader
            v-model="regionalCode"
            :options="areaOptions"
            @change="areahandleChange"
            class="widths"
            placeholder="选择省市区"
            style="width: 220px"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="组：" prop="group">
          <el-input
            type="number"
            v-model="accountsRequest.group"
            autocomplete="off"
            placeholder="输入几组"
            class="widths"
          ></el-input>
        </el-form-item>
        <el-form-item label="组员：" prop="member">
          <el-input
            type="text"
            v-model="accountsRequest.member"
            autocomplete="off"
            placeholder="输入组员"
            class="widths"
          ></el-input>
        </el-form-item>
        <el-form-item label="渠道名称：" prop="channelName">
          <el-input
            type="text"
            v-model="accountsRequest.channelName"
            autocomplete="off"
            placeholder="输入渠道名称"
            class="widths"
          ></el-input>
        </el-form-item>
        <el-form-item label="收款人账户：" prop="account">
          <el-input
            v-model="accountsRequest.account"
            autocomplete="off"
            placeholder="输入收款人账户"
            class="widths"
          ></el-input>
        </el-form-item>
        <el-form-item label="收款人名称：" prop="payee">
          <el-input
            type="text"
            v-model="accountsRequest.payee"
            class="widths"
            placeholder="输入收款人名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="收款人开户行：" prop="bank">
          <el-input
            type="text"
            v-model="accountsRequest.bank"
            placeholder="输入收款人开户行"
            style="width: 350px"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogVisible = false">取 消</el-button>
        <el-button
          size="small"
          type="primary"
          @click="accountsSubmit('accountsForm')"
          >提交</el-button
        >
      </div>
    </el-dialog>
  </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 {
      xlcell: 6,
      lgcell: 12,
      mdcell: 12,
      smcell: 24,
      xscell: 24,
      dialogType: "add",
      dialogTitle: "渠道账户录入",
      //地区编码数据
      areaOptions: regionData,
      regionalCode: [],
      accountsRequest: {
        //录入信息
        channelName:"",
        employeeId: "", //工号
        province: "", //省
        city: "", //市
        county: "", //区
        group: "", //组
        member: "", //组员
        account: "", //收款人账户
        payee: "", // 收款人名称
        bank: "", // 收款人开户行
      },
      accountsRules: {
        employeeId: [
          { required: true, message: "请输入工号", trigger: "blur" },
        ],
        channelName: [
          { required: true, message: "请输入渠道", trigger: "blur" },
        ],
        province: [
          { required: true, message: "省市区必填", trigger: "change" },
        ],
        group: [{ required: true, message: "请输入组", trigger: "blur" }],
        member: [{ required: true, message: "请输入组员", trigger: "blur" }],
        account: [
          { required: true, message: "收款人账户必填", trigger: "blur" },
        ],
        payee: [
          {
            required: true,
            message: "收款人必填",
            trigger: "blur",
          },
        ],
        bank: [{ required: true, message: "开户行必填", trigger: "blur" }],
      },
      pageRequest: {
        //查询的默认条件
        member: "", //组员
        payee: "", // 收款人名称
        channelName:"",
        pageNum: 1,
        pageSize: 20,
      },
      dateTime: [],
      companyList: [],
      institutionOptions: [],
      dialogVisible: false,
      monthvalue: "",
      docOrderid: "",
      plyNoList: [],
      // 右侧列表查询数据Start
      pageResult: [],
      columns: [
        //数据列
        { prop: "id", label: " 编号", minWidth: 160 },
        { prop: "employeeId", label: "工号", minWidth: 160 },
        { prop: "province", label: "省", minWidth: 160 },
        { prop: "city", label: "地级市", minWidth: 160 },
        { prop: "county", label: "县级市", minWidth: 160 },
        { prop: "group", label: "组", minWidth: 160 },
        { prop: "member", label: "组员", minWidth: 160 },
        { prop: "channelName", label: "渠道名称", minWidth: 100 },
        { prop: "account", label: "收款人账户", minWidth: 100 },
        { prop: "payee", label: "收款人名称", minWidth: 160 },
        { prop: "bank", label: "收款人开户行", minWidth: 160 },
        { prop: "createName", label: "创建人", minWidth: 160 },
        { prop: "createTime", label: "创建时间", minWidth: 160 },
        { prop: "updateName", label: "更新人", minWidth: 160 },
        { prop: "updateTime", label: "更新时间", minWidth: 160 },
        // {
        //   prop: "companyName",
        //   label: "保险公司",
        //   minWidth: 100,
        //   formatter: this.inscompanyFormatter,
        // },
      ],
    };
  },
  created() {
  },
  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();
    },
    handleAdd() {
      this.dialogType = "add";
      Object.keys(this.accountsRequest).forEach((key) => {
        this.accountsRequest[key] = "";
      });
      this.regionalCode = [];
      this.dialogVisible = true;
    },
    //插入事件
    accountsSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(this.dialogType);
          if (this.dialogType == "add") {
            this.$api.task
              .channelAccountAdd(this.accountsRequest)
              .then((res) => {
                if (res.code == "200") {
                  this.$message({
                    message: "插入成功",
                    type: "success",
                  });
                  this.findPage();
                  this.dialogVisible = false;
                } else {
                  this.$message({
                    message: res.msg,
                    type: "error",
                  });
                }
              });
          } else if (this.dialogType == "edit") {
            this.$api.task
              .channelAccountUpdate(this.accountsRequest)
              .then((res) => {
                if (res.code == "200") {
                  this.$message({
                    message: "修改成功",
                    type: "success",
                  });
                  this.findPage();
                  this.dialogVisible = false;
                } else {
                  this.$message({
                    message: res.msg,
                    type: "error",
                  });
                }
              });
          }
        }
      });
    },
    //修改
    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(() => {});
    },
    handleTableSettled(ids) {
      this.plyNoList = ids;
      this.dialogVisible11 = true;
    },

    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;
      that.$api.task
        .channelAccountQuery(that.pageRequest)
        .then((res) => {
          that.pageResult = res.data;
        })
        .then(data != null ? data.callback : "");
    },

    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;
    },
  },
};
</script>
<style lang="scss" scoped>
.widths {
  width: 220px;
}
</style>