JNBusiness/ruoyi-ui/src/views/mobile/customerMobile/addCustomer.vue

<template>
  <div>
    <van-form ref="form" :model="form" :rules="rules">
      <van-field
        ref="cusCode"
        v-model="form.cusCode"
        label="客户编码"
        placeholder="系统自动生成"
        readonly>
      </van-field>
      <van-field
        ref="cusSapCode"
        v-model="form.cusSapCode"
        label="SAP客户编码"
        placeholder="审批通过自动生成"
        readonly>
      </van-field>
      <van-field
        ref="cusName"
        v-model="form.cusName"
        required
        readonly
        name="cusName"
        label="客户名称"
        placeholder="企查查带出"
        :rules="[{ required: true, message: '客户未选择' }]">
        <template #button>
          <van-button :disabled="form.cusApprovalStatus === '1' || form.cusApprovalStatus === '2' || form.cusApprovalStatus === '3'"
                      size="small" @click="openQcc" v-hasPermi="['customer:customer:qcclist']" type="primary">点击查询</van-button>
        </template>
      </van-field>
      <van-field
        ref="cusQccStreet"
        v-model="form.cusQccStreet"
        label="街道"
        placeholder="企查查带出"
        readonly>
      </van-field>
      <van-field
        ref="cusVatNo"
        v-model="form.cusVatNo"
        label="增值税号"
        placeholder="企查查带出"
        readonly>
      </van-field>
      <van-field
        re="cusStreet"
        v-model="form.cusStreet"
        name="cusStreet"
        required
        label="街道/门牌号"
        placeholder="请输入街道/门牌号"
        :readonly="form.cusApprovalStatus === '1' || form.cusApprovalStatus === '2' || form.cusApprovalStatus === '3'"
        :rules="[{ required: true, message: '' }]">
      </van-field>
      <van-field
        ref="cusPhoneNumber"
        name="cusPhoneNumber"
        v-model="form.cusPhoneNumber"
        label="电话号码"
        required
        placeholder="请输入电话号码"
        :readonly="form.cusApprovalStatus === '1' || form.cusApprovalStatus === '2' || form.cusApprovalStatus === '3'"
        :rules="[{ required: true, message: '' }]">
      </van-field>
      <van-field
        readonly
        name="khzbText"
        required
        :value="khzbText"
        label="客户组类别"
        placeholder="点击选择客户组类别"
        @click="(form.cusApprovalStatus === '1' || form.cusApprovalStatus === '2' || form.cusApprovalStatus === '3') ? khzbShowPicker = false : khzbShowPicker = true"
        :rules="[{ required: true, message: '' }]"
      />
      <van-popup v-model="khzbShowPicker" position="bottom">
        <van-picker
          show-toolbar
          :columns="khzbColumns"
          :default-index="2"
          @confirm="khzbOnConfirm"
          @cancel="khzbShowPicker = false"
        />
      </van-popup>
      <van-field
        readonly
        :value="khlxText"
        name="khlxText"
        required
        label="客户类型"
        placeholder="点击选择客户类型"
        @click="(form.cusApprovalStatus === '1' || form.cusApprovalStatus === '2' || form.cusApprovalStatus === '3') ? khlxShowPicker = false : khlxShowPicker = true"
        :rules="[{ required: true, message: '' }]"
      />
      <van-popup v-model="khlxShowPicker" position="bottom">
        <van-picker
          show-toolbar
          :columns="khlxColumns"
          @confirm="khlxOnConfirm"
          @cancel="khlxShowPicker = false"
        />
      </van-popup>
      <van-field
        readonly
        required
        :value="countryText"
        name="countryText"
        label="国家"
        placeholder="点击选择国家"
        @click="(form.cusApprovalStatus === '1' || form.cusApprovalStatus === '2' || form.cusApprovalStatus === '3') ? countryShowPicker = false : countryShowPicker = true"
        :rules="[{ required: true, message: '' }]"
      />
      <van-popup v-model="countryShowPicker" position="bottom">
        <van-picker
          value-key="label"
          show-toolbar
          :columns="countrysDicts"
          @confirm="countryOnConfirm"
          @cancel="countryShowPicker = false"
        />
      </van-popup>
      <van-field
        readonly
        required
        :value="languageText"
        name="languageText"
        label="语言"
        placeholder="点击选择语言"
        @click="(form.cusApprovalStatus === '1' || form.cusApprovalStatus === '2' || form.cusApprovalStatus === '3') ? languageShowPicker = false : languageShowPicker = true "
        :rules="[{ required: true, message: '' }]"
      />
      <van-popup v-model="languageShowPicker" position="bottom">
        <van-picker
          :default-index="1"
          show-toolbar
          value-key="label"
          :columns="languageDicts"
          @confirm="languageOnConfirm"
          @cancel="languageShowPicker = false"
        />
      </van-popup>
    </van-form>
    <el-divider content-position="left" class="customer_divider_text">银行信息</el-divider>
    <el-row class="mb8" :gutter="8" style="margin: 10px">
      <el-col :span="1.5">
        <div v-hasPermi="['customer:customer:bankAdd']">
          <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAddBank" v-if="bankButtonShow">添加</el-button>
        </div>
      </el-col>
      <el-col :span="1.5">
        <div v-hasPermi="['customer:customer:bankDel']">
          <el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDeleteBank" v-if="bankButtonShow">删除</el-button>
        </div>
      </el-col>
    </el-row>
    <el-table :data="bankList" @selection-change="handleBankSelectionChange" :row-class-name="rowBankIndex" ref="bank">
      <el-table-column type="selection" width="50" align="center" />
      <el-table-column label="序号" align="center" v-if="false" prop="index" width="50"/>
      <el-table-column label="国家" prop="bankCountry" v-if="false">
        <template slot-scope="scope">
          <el-input v-model="scope.row.bankCountry"  placeholder="选择银行代码自动带出" :disabled="true"/>
        </template>
      </el-table-column>
      <el-table-column label="银行代码" prop="bankCode" v-if="false">
        <template slot-scope="scope">
          <el-input v-model="scope.row.bankCode" placeholder="请输入银行代码" :disabled="true" >
            <i v-if="!isDisSjz" slot="suffix" class="el-input__icon el-icon-search" @click="handleSearchBankCode(scope)"></i>
          </el-input>
        </template>
      </el-table-column>
      <el-table-column label="银行名称" prop="bankName">
        <template slot-scope="scope">
          <el-input v-model="scope.row.bankName" placeholder="请输入银行名称" :disabled="isDisSalesman"/>
        </template>
      </el-table-column>
      <el-table-column label="银行账户" prop="bankAccount">
        <template slot-scope="scope">
          <el-input v-model="scope.row.bankAccount" placeholder="请输入银行账户" :disabled="isDisSalesman" />
        </template>
      </el-table-column>
    </el-table>
    <div slot="footer" class="dialog-footer fixed-buttons-container">
        <span v-hasPermi="['customer:customer:save']">
          <el-button @click="saveForm" v-if="buttonShowSalesman">保 存</el-button>
        </span>
      <span style="margin-left: 10px"  v-hasPermi="['customer:customer:commit']">
          <el-button type="primary" plain  @click="commitForm" v-if="buttonShowSalesman">提 交</el-button>
        </span>
      <span style="margin-left: 10px"  v-hasPermi="['customer:customer:return']">
          <el-button type="danger" plain  @click="returnForm" v-if="buttonShowSjz">驳 回</el-button>
        </span>
      <span style="margin-left: 10px"  v-hasPermi="['customer:customer:commitSAP']">
          <el-button type="primary" plain  @click="commitSAPForm" v-if="buttonShowSjz">提 交SAP</el-button>
        </span>
    </div>
    <el-dialog :title="qccTitle" :visible.sync="qccOpen" :width="dialogWidth" append-to-body>
      <el-form :model="queryQccParams" ref="queryQccForm" size="small" :inline="true" label-width="100px" @submit.native.prevent>
        <el-form-item label="公司名称" prop="Name">
          <el-input
            v-model="queryQccParams.Name"
            placeholder="请输入公司名称"
            @keyup.enter.native="handleQccQuery"
            clearable
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQccQuery">搜索</el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="qccLoading" ref="qccTable" :data="qccCustomerList" @selection-change="handleSelectionQccChange" :height="tableHeight">
        <el-table-column type="selection" width="45" align="center" />
        <el-table-column label="公司名" width="250" align="left" prop="name" />
        <el-table-column label="法人" align="center" prop="operName" />
        <el-table-column label="注册时间" width="100" align="center" prop="startDate" />
        <el-table-column label="增值税号" width="170" align="left" prop="creditCode" />
        <el-table-column label="地址" width="300" align="left" prop="address" />
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="qccConfirm" :disabled="qccSingle">确 定</el-button>
        <el-button @click="qccCancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listCustomer, getCustomer, delCustomer,changCusStatus, addCustomer, updateCustomer,getReturnUpdateCustomer, commitCustomer,returnCustomer, commitSAPCustomer, checkQccCount, qccListCustomer, getIndustryCodeQcc } from "@/api/customer/customer";
import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数
import { bankCodeList,getCountrys,getIndustryCode,getLanguage,getPaymentTerms,getSalesOrganization,getDistributionChannel,getSalesTerritory,getSaleOffice,getTax,getReconciliationAccount, getAccountAllocationGroup  } from "@/api/common/sapRfc";// sap-rfc 函数

/** 弹窗放大、拖拽 */
import elDragDialog from "@/directive/dialog/dragDialog";

// 自定义校验-付款条件
const validateCusPaymentTerms = (rule, value, callback) => {
  if (!value) {
    callback(new Error("付款条件不能为空"));
  } else {
    callback();
  }
};
// 自定义校验-行业代码
const validateCusIndustryCode = (rule, value, callback) => {
  if (!value) {
    callback(new Error("行业代码不能为空"));
  } else {
    callback();
  }
};
// 自定义校验-销售地区
const validateCusSalesTerritory = (rule, value, callback) => {
  if (!value) {
    callback(new Error("销售地区不能为空"));
  } else {
    callback();
  }
};
// 自定义校验-销售办公室
const validateCusSaleOffice = (rule, value, callback) => {
  if (!value) {
    callback(new Error("销售办公室不能为空"));
  } else {
    callback();
  }
};
// 自定义校验-客户税分类
const validateCusTax = (rule, value, callback) => {
  if (!value) {
    callback(new Error("客户税分类不能为空"));
  } else {
    callback();
  }
};
// 自定义校验-统驭科目
const validateCusReconciliationAccount = (rule, value, callback) => {
  if (!value) {
    callback(new Error("统驭科目不能为空"));
  } else {
    callback();
  }
};
// 自定义校验-统驭科目
const cusAccountAllocationGroup = (rule, value, callback) => {
  if (!value) {
    callback(new Error("账户分配组不能为空"));
  } else {
    callback();
  }
};


export default {
  name: "addCustomer",
  data() {
    return {
      value1: '',
      khzbText: '',
      khzbColumns: [
        { text: '国内客户', value: 'Z001' },
      ],
      khzbShowPicker: false,
      khlxText: '',
      khlxColumns: [
        { text: '销售客户', value: '0' },
      ],
      khlxShowPicker: false,
      countrysDicts: [], // 国家数据列表
      languageDicts: [],  //语言
      countryText: '',
      countryShowPicker: false,
      languageText: '',
      languageShowPicker: false,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        cusCode: null,
        cusName: null,
        cusSapCode: null,
        cusState: null,
        cusApprovalStatus: null
      },
      /*****************************企查查查询模块*************************************/
      // 遮罩层
      qccLoading: false,
      // 弹出层标题
      qccTitle: "",
      // 是否显示弹出层
      qccOpen: false,

      // 企查查客户表格数据
      /*qccCurrentPage: 1,
      qccPageSize: 10,
      qccTotal: 0,*/
      qccCustomerList: [], // 企查查客户数据

      // 非单个禁用
      qccSingle: true,
      // 非多个禁用
      qccMultiple: true,
      queryQccParams:{
        Name: null
      },
      dialogWidth: '100%',
      tableHeight: '300px', // 表格高度固定
      /*****************************企查查查询模块*************************************/
      //选项卡默认
      activeName: 'customerInfo',

      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 子表选中数据
      checkedBank: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 客户管理表格数据
      customerList: [],
      // 银行表格数据
      bankList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        cusName: [{ required: true, message: '客户名称不可为空' }],
        cusStreet: [{ required: true, message: '请输入街道/门牌号' }],
        cusPhoneNumber: [{ required: true, message: '请输入电话号码' }],
        khzbText: [{ required: true, message: '请选择客户组类别' }],
        khlxText: [{ required: true, message: '请选择客户类型' }],
        countryText: [{ required: true, message: '请选择国家' }],
        languageText: [{ required: true, message: '请选择语言' }]
      },
      // 保存\提交 按钮显示 - 业务员
      buttonShowSalesman: true,

      // 明细添加、删除 按钮显示
      bankButtonShow: true,

      // 提交OA 按钮显示 - 数据组
      buttonShowSjz: true,

      // 审批中 设置禁用 - 业务员
      isDisSalesman: false,
      // 审批中 设置禁用 - 数据组
      isDisSjz: false,

      // 客户名称、街道、增值税号设置禁用
      isDisCustomer: true,
      /*****************************银行代码查询模块*************************************/
      // 遮罩层
      bankCodeLoading: false,
      // 弹出层标题
      bankCodeTitle: "",
      // 是否显示弹出层
      bankCodeOpen: false,

      // 银行代码表格数据
      bankSelectedIndex: "",
      bankCodeTotal: 0,
      bankCodeCurrentPage: 1,
      bankCodePageSize: 10,
      bankCodeList: [], // 银行代码数据

      // 非单个禁用
      bankCodeSingle: true,
      // 非多个禁用
      bankCodeMultiple: true,
      queryBankCodeParams:{
        bankName: null
      },
      /*****************************银行代码查询模块*************************************/
      /*****************************SAP-RFC查询模块*************************************/
      industryCodeDicts: [], // 行业代码数据列表
      paymentTermsDicts: [], // 付款条件数据列表
      salesOrganizationDicts: [], // 销售组织数据列表
      distributionChannelDicts: [], // 分销渠道数据列表
      salesTerritoryDicts: [], // 销售地区数据列表
      saleOfficeDicts: [], // 销售办公室数据列表
      taxDicts: [], // 客户税分类数据列表
      reconciliationAccountDicts: [], // 统驭科目数据列表
      accountAllocationGroupDicts: [], // 账户分配组数据列表
      /*****************************SAP-RFC查询模块*************************************/
    }
  },
  created() {
    console.log("触发create函数")
    this.getCountrys();
    this.getLanguage();
    const param = this.$route.query;
    console.log("输出" + param.cusId)
    if (param.cusId !== undefined && param.cusId !== null) {
      const row = {'cusId':param.cusId}
      this.handleUpdate(row);
    }
  },
  computed: {

  },
  mounted() {
    this.$store.dispatch('app/toggleSideBarHide', true);
    document.querySelector('.navbar').style.display = "none";
    document.querySelector('.tags-view-container').style.display = "none";
  },
  methods: {
    checkPermi,
    checkRole,
    /** 查询客户管理列表 */
    getList() {
      this.loading = true;
      listCustomer(this.queryParams).then(response => {
        this.customerList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        cusId: null,
        cusCode: null,
        cusName: null,
        cusSapCode: null,
        cusStreet: null,
        cusPhoneNumber: null,
        cusGroup: null,
        cusVatNo: null,
        cusType: null,
        cusCountry: null,
        cusLanguage: null,
        cusSalesman: null,
        cusRemark: null,
        cusState: null,
        cusApprovalStatus: null,

        cusPaymentTerms: null,
        cusIndustryCode: null,
        cusIndustryCodeQcc: null,
        cusSalesTerritory: null,
        cusDistributionChannel: null,
        cusSaleOffice: null,
        cusCurrency: null,
        cusTax: null,
        cusReconciliationAccount: null,
        cusAccountAllocationGroup: null,
      };
      this.bankList = [];
      this.resetForm("form");
      this.setInitF();
      this.setInitV();
      // 保存\提交 按钮显示 - 业务员
      this.buttonShowSalesman = true;
      // 明细添加、删除 按钮显示
      this.bankButtonShow = true;
      // 提交OA 按钮显示 - 数据组
      this.buttonShowSjz = true;
      // 审批中 设置禁用 - 业务员
      this.isDisSalesman = false;
      // 审批中 设置禁用 - 数据组
      this.isDisSjz = false;
      // 客户名称、街道、增值税号设置禁用
      this.isDisCustomer = true;
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.cusId)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    // 客户状态修改
    handleStatusChange(row) {
      let text = row.cusState === "0" ? "启用" : "停用";
      this.$modal.confirm('确认要"' + text + '""' + row.cusName + '"吗？').then(function() {
        return changCusStatus(row.cusId, row.cusState);
      }).then(() => {
        this.$modal.msgSuccess(text + "成功");
      }).catch(function() {
        row.cusState = row.cusState === "0" ? "1" : "0";
      });
    },
    /** 新增按钮操作 */
    async handleAdd() {
      await this.reset();
      this.open = true;
      this.title = "添加客户信息";

      this.form.cusSalesman = this.$store.state.user.nickName;
      this.buttonShowSalesman = checkRole(['ITZX_SJZ']) ? false : true; // 如果是业务员角色 则保存、提交 按钮显示 反之不显示
      this.buttonShowSjz = checkRole(['ITZX_SJZ']) ? true : false;// 如果是业务员角色 则保存、提交 按钮不显示 反之显示
      this.isDisCustomer = checkRole(['ITZX_SJZ']) ? false : true;// 如果是数据组角色角色则可编辑客户名称
      this.handleAddBank();//默认添加一行
    },
    /** 修改按钮操作 */
    async handleUpdate(row) {
      await this.reset();
      const cusId = row.cusId || this.ids
      getCustomer(cusId).then(response => {
        this.setInfo(response);
      });
    },

    /** 错误修订按钮操作 */
    async handleReturnUpdate(row) {
      this.reset();
      const cusId = row.cusId || this.ids
      getReturnUpdateCustomer(cusId).then(response => {
        this.setInfo(response);
      });
    },
    /** 修改按钮操作-详细信息设置 */
    setInfo(response){
      this.form = response.data;
      // 获取 cusType 对应的 text 值并打印
      const cusGroup = this.khzbColumns.find(item => item.value === this.form.cusGroup);
      if (cusGroup) {
        this.khzbText = cusGroup.text;
      }
      const cusTypeItem = this.khlxColumns.find(item => item.value === this.form.cusType);
      if (cusTypeItem) {
        this.khlxText = cusTypeItem.text;
      }
      const cusCountryItem = this.countrysDicts.find(item => item.value === this.form.cusCountry);
      if (cusCountryItem) {
        this.countryText = cusCountryItem.label;
      }
      const cusLanguageItem = this.languageDicts.find(item => item.value === this.form.cusLanguage);
      if (cusLanguageItem) {
        this.languageText = cusLanguageItem.label;
      }
      console.log(this.form)
      // 业务员角色-如果是保存状态则显示 反之不显示
      this.buttonShowSalesman = this.form.cusApprovalStatus == '0'?true:false;
      // 业务员待提交的数据 或者 数据组审核业务员提交的数据时可编辑
      this.isDisSalesman = this.form.cusApprovalStatus == '0' ? false : (checkRole(['ITZX_SJZ'])&&this.form.cusApprovalStatus == '1') ? false : true;
      // 数据组角色-如果不是完成且驳回状态、提交SAP、驳回 按钮显示
      this.buttonShowSjz = (this.form.cusApprovalStatus != '2' && this.form.cusApprovalStatus != '3') ?true:false;
      // 数据组角色-如果是审批中状态， 则可编辑
      this.isDisSjz = this.form.cusApprovalStatus == '1'?false:true;
      // 业务员待审核的数据 或者 数据组审核业务员提交的数据时显示
      this.bankButtonShow = this.form.cusApprovalStatus == '0'?true:(checkRole(['ITZX_SJZ'])&&this.form.cusApprovalStatus == '1') ? true : false;

      // 数据组创建或者审核时 客户名称、街道、增值税号可编辑
      this.isDisCustomer = (checkRole(['ITZX_SJZ'])&&this.form.cusApprovalStatus != '2'&&this.form.cusApprovalStatus != '3')?false:true;

      this.bankList = response.data.bankList;
      if(this.bankList.length==0){
        this.handleAddBank();//默认添加一行
      }
    },

    async validateForm() {
      try {
        await this.$refs.form.validate();
        return true;
      } catch (error) {
        console.error('Form validation failed:', error);
        return false;
      }
    },

    /** 保存按钮 */
    async saveForm() {
      const valid = await this.validateForm();
      console.log(11111111)

      if (valid) {
        console.log(11111111)
        this.form.bankList = this.bankList;
        if (this.form.cusId != null) {
          updateCustomer(this.form).then(response => {
            this.$modal.msgSuccess("修改成功");
          });
        } else {
          addCustomer(this.form).then(response => {
            this.$modal.msgSuccess("新增成功");
            this.$store.dispatch('tagsView/delView',this.$route)
            this.$router.go(-1)
          });
        }
      }
    },
    /** 提交按钮 */
    async commitForm() {
      const valid = await this.validateForm();
      if (valid) {
        this.form.bankList = this.bankList;
        // 遍历表格数据
        try{
          if(this.bankList.length==0){
            this.$modal.msgError("未添加银行信息");
            return;
          }

          this.bankList.forEach((row, index) => {
            if(!row.bankName || !row.bankAccount){
              this.$modal.msgError("银行名称或银行账户不能为空");
              throw new Error;
            }
          })
        }catch(e){
          return;
        }
        commitCustomer(this.form).then(response => {
          this.$modal.msgSuccess("提交成功");
          this.$store.dispatch('tagsView/delView',this.$route)
          this.$router.go(-1)
        });

      }
    },
    /** 驳回 */
    returnForm() {
      if(!this.form.cusReturnRemark){
        this.$modal.msgError("请填写驳回备注");
        return;
      }

      this.$modal.confirm('是否确认驳回该客户？').then(function() {}).then(() => {
        returnCustomer(this.form).then(response => {
          this.$modal.msgSuccess("驳回成功");
          this.open = false;
          this.getList();
        });
      }).catch(() => {});
    },
    /** 提交SAP按钮 */
    commitSAPForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.form.bankList = this.bankList;

          if (this.form.cusId != null) {//数据组审核
            this.bankList.forEach((row, index) => {
              if(!row.bankCode){
                this.$modal.msgError("银行代码不能为空");
                throw new Error;
              }
            })
          }

          this.$modal.confirm('是否确认提交该客户至SAP？').then(function() {}).then(() => {
            commitSAPCustomer(this.form).then(response => {
              this.$modal.msgSuccess("提交SAP成功");
              this.open = false;
              this.getList();
            });
          }).catch(() => {});
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const cusIds = row.cusId || this.ids;
      this.$modal.confirm('是否确认删除所选客户？').then(function() {
        return delCustomer(cusIds);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 银行添加按钮操作 */
    handleAddBank() {
      let obj = {};
      obj.bankCountry = "";
      obj.bankCode = "";
      obj.bankName = "";
      obj.bankAccount = "";
      this.bankList.push(obj);
    },
    /** 银行删除按钮操作 */
    handleDeleteBank() {
      if (this.checkedBank.length == 0) {
        this.$modal.msgError("请先选择要删除的银行数据");
      } else {
        const bankList = this.bankList;
        const checkedBank = this.checkedBank;
        this.bankList = bankList.filter(function(item) {
          return checkedBank.indexOf(item.index) == -1
        });
      }
    },

    /** 复选框选中数据 */
    handleBankSelectionChange(selection) {
      this.checkedBank = selection.map(item => item.index)
      console.log(this.checkedBank)
    },
    /** 序号 */
    rowBankIndex({ row, rowIndex }) {
      row.index = rowIndex + 1;
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('customer/customer/export', {
        ...this.queryParams
      }, `customer_${new Date().getTime()}.xlsx`)
    },
    /*****************************银行代码查询模块*************************************/
    /** 选择银行代码弹出框 */
    handleSearchBankCode(scope) {
      this.bankCodeOpen = true;
      this.bankCodeTitle = "银行代码信息";
      this.resetBankCodeQuery();
      this.bankSelectedIndex = scope.$index;
    },

    /** 切换每页显示条数 */
    handleBankCodeSizeChange(val) {
      this.bankCodePageSize = val;
      this.bankCodeCurrentPage = 1;
    },
    /** 页码选择 */
    handleBankCodeCurrentChange(val) {
      this.bankCodeCurrentPage = val;
    },

    /** 银行代码查询 */
    handleBankCodeQuery(){
      if(!this.queryBankCodeParams.bankName){
        this.$message.warning("请输入银行名称!");
        return;
      }

      this.bankCodeLoading = true;
      bankCodeList(this.queryBankCodeParams).then(response => {
        this.bankCodeList = response.rows;
        this.bankCodeTotal = response.total;
        this.bankCodeCurrentPage = 1;
        this.bankCodeLoading = false;
      },response => {
        this.bankCodeLoading = false;
      });
    },

    // 多选框选中数据
    handleSelectionBankCodeChange(selection) {
      this.bankCodeSingle = selection.length!==1
      this.bankCodeMultiple = !selection.length
    },

    // 确认按钮
    bankCodeConfirm(){
      const bankCodeTable = this.$refs.bankCodeTable;
      const selectedData = bankCodeTable.selection;
      const bankCode = selectedData[0].bankCode;
      const bankName = selectedData[0].bankName;
      const bankCountry = selectedData[0].bankCountry;

      // 获取指定行的数据
      const bank = this.bankList[this.bankSelectedIndex];

      bank.bankCode = bankCode;
      bank.bankName = bankName;
      bank.bankCountry = bankCountry;
      this.bankCodeOpen = false;
    },
    // 取消按钮
    bankCodeCancel() {
      this.bankCodeOpen = false;
      this.resetBankCodeQuery();
    },
    /** 重置按钮操作 */
    resetBankCodeQuery() {
      this.bankCodeList = [];
      this.bankCodeTotal = 0;
      this.queryBankCodeParams = {
        bankName: ""
      }
    },
    /*****************************银行代码查询模块*************************************/
    /*****************************SAP-RFC查询模块*************************************/
    // 默认值设置
    setInitV(){
      this.activeName = 'customerInfo';

      this.form.cusGroup = 'Z001';
      this.form.cusType = '0';
      this.form.cusCountry = 'CN';
      this.form.cusLanguage = '1';
      this.form.cusSalesOrganization = '1100';
      this.form.cusDistributionChannel = '10';
      this.form.cusCurrency = 'CNY';
      this.form.cusTax = '1';
      this.form.cusReconciliationAccount = '1122010100';
      this.form.cusAccountAllocationGroup = '01';
    },
    // 加载SAP公共数据
    setInitF(){
      this.activeName = 'customerInfo';

      this.getCountrys();
      this.getIndustryCode();
      this.getLanguage();
      this.getPaymentTerms();
      this.getSalesOrganization();
      this.getDistributionChannel();
      this.getSalesTerritory();
      this.getSaleOffice();
      this.getTax();
      this.getReconciliationAccount();
      this.getAccountAllocationGroup();
    },
    //SAP行业代码数据列表
    getIndustryCode(){
      getIndustryCode(this.queryParams).then(response => {
        this.industryCodeDicts = response.industryCodeDicts;
      });
    },
    //SAP付款条件数据列表
    getPaymentTerms(){
      getPaymentTerms(this.queryParams).then(response => {
        this.paymentTermsDicts = response.paymentTermsDicts;
      });
    },
    //SAP销售组织数据列表
    getSalesOrganization(){
      getSalesOrganization(this.queryParams).then(response => {
        this.salesOrganizationDicts = response.salesOrganizationDicts;
      });
    },
    //SAP分销渠道数据列表
    getDistributionChannel(){
      getDistributionChannel(this.queryParams).then(response => {
        this.distributionChannelDicts = response.distributionChannelDicts;
      });
    },
    //SAP销售地区数据列表
    getSalesTerritory(){
      getSalesTerritory(this.queryParams).then(response => {
        this.salesTerritoryDicts = response.salesTerritoryDicts;
      });
    },
    //SAP销售办公室数据列表
    getSaleOffice(){
      getSaleOffice(this.queryParams).then(response => {
        this.saleOfficeDicts = response.saleOfficeDicts;
      });
    },
    //客户税分类数据列表
    getTax(){
      getTax(this.queryParams).then(response => {
        this.taxDicts = response.taxDicts;
      });
    },
    //客户税分类数据列表
    getReconciliationAccount(){
      getReconciliationAccount(this.queryParams).then(response => {
        this.reconciliationAccountDicts = response.reconciliationAccountDicts;
      });
    },
    getAccountAllocationGroup(){
      getAccountAllocationGroup(this.queryParams).then(response => {
        this.accountAllocationGroupDicts = response.accountAllocationGroupDicts;
      });
    },
    /*****************************SAP-RFC查询模块*************************************/
    //SAP语言数据列表
    getLanguage(){
      getLanguage(this.queryParams).then(response => {
        this.languageDicts = response.languageDicts;
      });
    },
    /**------------------SAP国家数据列表-------------------**/
    getCountrys(){
      getCountrys(this.queryParams).then(response => {
        this.countrysDicts = response.countrysDicts;
      });
    },
    /**-------------选择器确认按钮---------**/
    khzbOnConfirm(columns) {
      this.form.cusGroup = columns.value
      this.khzbText = columns.text;
      this.khzbShowPicker = false;
    },
    khlxOnConfirm(columns) {
      this.form.cusType = columns.value
      this.khlxText = columns.text;
      this.khlxShowPicker = false;
    },
    countryOnConfirm(columns) {
      this.form.cusCountry = columns.value
      this.countryText = columns.label
      this.countryShowPicker = false;
    },
    languageOnConfirm(columns) {
      this.form.cusLanguage = columns.value
      this.languageText = columns.label
      this.languageShowPicker = false;
    },
    /*****************************企查查查询模块*************************************/
    /** 企查查客户弹出框 */
    openQcc(){
      this.qccOpen = true;
      this.qccTitle = "企查查客户信息";
      this.resetQccQuery();
    },

    /** 切换每页显示条数 */
    /*handleQccSizeChange(val) {
      this.qccPageSize = val;
      this.qccCurrentPage = 1;
    },*/
    /** 页码选择 */
    /*handleQccCurrentChange(val) {
      this.qccCurrentPage = val;
    },*/

    /** 企查查客户查询 */
    handleQccQuery(){
      if(!this.queryQccParams.Name){
        this.$message.warning("请输入公司名称!");
        return;
      }

      // 校验是否超过企查查接口查询次数
      checkQccCount().then(response => {
        this.qccLoading = true;
        qccListCustomer(this.queryQccParams).then(response => {
          this.qccCustomerList = response.rows;
          //this.qccTotal = response.total;
          //this.qccCurrentPage = 1;
          this.qccLoading = false;
        },response => {
          this.qccLoading = false;
        });
      });
    },

    // 多选框选中数据
    handleSelectionQccChange(selection) {
      this.qccSingle = selection.length!==1
      this.qccMultiple = !selection.length
    },

    // 确认按钮
    async qccConfirm() {
      const qccTable = this.$refs.qccTable;
      const selectedData = qccTable.selection;
      this.form.cusName = selectedData[0].name;
      this.form.cusVatNo = selectedData[0].creditCode;
      this.form.cusQccStreet = selectedData[0].address;

      //获取客户行业代码
      await getIndustryCodeQcc(selectedData[0].name).then(response => {
        console.log(response)
        this.form.cusIndustryCodeQcc = response.cusIndustryCodeQcc;
      })
      this.qccOpen = false;
    },

    // 取消按钮
    qccCancel() {
      this.qccOpen = false;
      this.resetQccQuery();
    },
    /** 重置按钮操作 */
    resetQccQuery() {
      this.qccCustomerList = [];
      this.queryQccParams = {
        Name: ""
      }
    },
    /*****************************企查查查询模块*************************************/
  },
}
</script>

<style>
.fixed-buttons-container {
  padding: 10px;
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #fff; /* 背景颜色，根据你的页面设计调整 */
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); /* 阴影效果，根据需要调整 */
  justify-content: center; /* 居中对齐 */
  text-align: center;
}

</style>