tire-platform-ui/src/views/basicData/customerManagement/supplierMaterial/detailsPageEdit.vue

<template>
  <div class="borderless">
    <div class="customer-head">
      <div class="customer-back">
        <!--        <i class="back-icon el-icon-arrow-left"></i><i style="font-style:normal">返回管理列表</i>-->
        <el-button type="danger" style="border: none;background: none;color: red" icon="el-icon-arrow-left"
          @click="backToList">返回列表
        </el-button>
      </div>
      <div class="add-customer-btn">
        <el-button type="primary" @click="openFlow" size="small">审 核
        </el-button>
        <el-button type="primary" :disabled="disabled" @click="editCustomer" size="small">{{ form.id ? "确认修改" : "确认新增"
        }}
        </el-button>
      </div>
    </div>
    <div class="customer-main">
      <el-form :model="form" ref="form" label-width="100px" class="demo-ruleForm">
        <containerTitle title="基础资料"></containerTitle>
        <basic-container>
          <el-row>
            <el-col v-for="(item, index) in basicData.column" :key="index" :span="item.span ? item.span : 8">
              <el-form-item :label="item.label" :prop="item.prop" :rules="item.rules">
                <avue-input-tree v-if="item.prop === 'corpsTypeId'" leaf-only multiple style="width: 100%;" size="small"
                  :props="{ label: 'title' }" v-model="form[item.prop]" placeholder=" " type="tree" :dic="dic">
                </avue-input-tree>
                <el-cascader v-else-if="item.prop === 'belongtoarea'" v-model="form[item.prop]" collapse-tags
                  :options="dicArea" :props="props" size="small" style="width: 100%;" :show-all-levels="false">
                </el-cascader>
                <el-select v-else-if="item.prop === 'adminProfiles'" size="small" style="width: 100%;"
                  v-model="form[item.prop]" multiple placeholder="">
                  <el-option v-for="item in userList" :key="item.id" :label="item.name" :value="item.id">
                  </el-option>
                </el-select>
                <el-select v-else-if="item.prop === 'creditRating'" size="small" style="width: 100%;"
                  v-model="form[item.prop]" placeholder="">
                  <el-option v-for="item in creditRatingList" :key="item.id" :label="item.dictValue"
                    :value="item.dictValue">
                  </el-option>
                </el-select>
                <crop-select v-else-if="item.prop === 'belongtocompany'" v-model="form[item.prop]" corpType="GS">
                </crop-select>
                <el-input type="textarea" v-else-if="item.prop === 'remarks'" :rows="2" placeholder="请输入内容"
                  v-model="form[item.prop]">
                </el-input>
                <el-input type="age" v-else v-model="form[item.prop]" size="small" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </basic-container>
        <containerTitle title="联系方式"></containerTitle>
        <basic-container>
          <el-row>
            <el-col v-for="(item, index) in contactInformation.column" :key="index" :span="item.span ? item.span : 8">
              <el-form-item :label="item.label" :prop="item.prop" :rules="item.rules">
                <el-input type="textarea" v-if="item.prop === 'addr'" :rows="2" placeholder="请输入内容"
                  v-model="form[item.prop]">
                </el-input>
                <el-input type="textarea" v-else-if="item.prop === 'storageAddr'" :rows="2" placeholder="请输入内容"
                  v-model="form[item.prop]">
                </el-input>
                <el-input type="textarea" v-else-if="item.prop === 'subStorageAddr'" :rows="2" placeholder="请输入内容"
                  v-model="form[item.prop]">
                </el-input>
                <el-input v-else type="age" v-model="form[item.prop]" size="small" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </basic-container>
        <containerTitle title="财务资料"></containerTitle>
        <basic-container>
          <el-row>
            <el-col v-for="(item, index) in financialInformation.column" :key="index" :span="item.span ? item.span : 8">
              <el-form-item :label="item.label" :prop="item.prop" :rules="item.rules">
                <el-switch v-if="item.prop === 'creditstatus'" v-model="form[item.prop]" active-value="0"
                  inactive-value="1" active-text="开启" inactive-text="关闭">
                </el-switch>
                <el-select v-else-if="item.prop === 'paymentType'" v-model="form[item.prop]" clearable filterable
                  size="small" style="width: 100%;">
                  <el-option v-for="(item, index) in paymentOption" :key="index" :label="item.dictValue"
                    :value="item.dictValue"></el-option>
                </el-select>
                <el-input v-else type="age" v-model="form[item.prop]" size="small" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </basic-container>
        <containerTitle title="客户联系人"></containerTitle>
        <basic-container>
          <avue-crud ref="crud" :option="customerContact" v-model="contactsForm" :data="contactsData"
            @saveColumn="saveColumn" @resetColumn="resetColumn" @row-save="rowSave" @row-update="rowUpdate"
            @row-del="rowDel"></avue-crud>
        </basic-container>
        <!-- <containerTitle title="客户优势项目"></containerTitle>
        <basic-container style="margin-bottom: 10px">
          <avue-crud
            :option="advantageProject"
            v-model="advantageProjectForm"
            :data="advantageProjectData"
            @row-save="rowSaveProject"
            @row-update="rowUpdateProject"
            @row-del="rowDelProject"
          ></avue-crud>
        </basic-container> -->
        <containerTitle title="客户开户行"></containerTitle>
        <basic-container>
          <avue-crud ref="crud2" :option="bankOfDeposit" v-model="bankOfDepositForm" :data="bankOfDepositData"
            @saveColumn="saveColumn2" @resetColumn="resetColumn2" @row-save="rowSaveBankOfDeposit"
            @row-update="rowUpdateBankOfDeposit" @row-del="rowDelBankOfDeposit"></avue-crud>
        </basic-container>
        <containerTitle title="收发货地址"></containerTitle>
        <basic-container>
          <avue-crud ref="crud3" :option="addressOption" v-model="addressForm" :data="addressData"
            @saveColumn="saveColumn3" @resetColumn="resetColumn3" @row-save="rowSaveAddress"
            @row-update="rowUpdateAddress" @row-del="rowDelAddress"></avue-crud>
        </basic-container>
      </el-form>
    </div>
    <flow-dialog :switchDialog="switchDialog" @onClose="onClose()">
      <template slot="content"> </template>
    </flow-dialog>
  </div>
</template>

<script>
import {
  customerList,
  typeSave,
  detail,
  deleteDetails,
  corpstypeTree,
  corpsattn,
  corpsbank,
  corpsfiles,
  corpsitem,
  areaTypeTree,
  corpsAddrDelete
} from "@/api/basicData/customerInformation";
import customerContact from "./configuration/customerContact.json";
import advantageProject from "./configuration/advantageProject.json";
import bankOfDeposit from "./configuration/bankOfDeposit.json";
import flowDialog from "@/components/flow-dialog/main";
import { supplierParameter } from "@/enums/management-type";
import { gainUser } from "@/api/basicData/customerInquiry";
import addressOption from "./configuration/addressOption.json";
export default {
  name: "detailsPage",
  data() {
    return {
      switchDialog: false,
      form: {},
      disabled: false,
      contactsForm: {},
      creditRatingList: [],
      advantageProjectForm: {},
      bankOfDepositForm: {},
      contactsData: [],
      advantageProjectData: [],
      bankOfDepositData: [],
      dic: [],
      dicArea: [],
      props: {
        value: "name",
        label: "name",
        multiple: true
      },
      customerContact: {},
      advantageProject: advantageProject,
      bankOfDeposit: {},
      contactInformation: {
        column: [
          {
            label: "联系人",
            prop: "attn",
            rules: [
              {
                required: false,
                message: "请输入联系人",
                trigger: "blur"
              }
            ]
          },
          {
            label: "联系电话",
            prop: "tel",
            rules: [
              {
                required: false,
                message: "请输入联系电话",
                trigger: "blur"
              }
            ]
          },
          {
            label: "职位",
            prop: "position",
            rules: [
              {
                required: false,
                message: "请输入联系电话",
                trigger: "blur"
              }
            ]
          },
          {
            label: "单位地址",
            prop: "addr",
            rules: [
              {
                required: false,
                message: "请输入单位地址",
                trigger: "blur"
              }
            ]
          },
          {
            label: "仓库地址",
            prop: "storageAddr",
            rules: [
              {
                required: false,
                message: "请输入仓库地址",
                trigger: "blur"
              }
            ]
          },
          {
            label: "分仓地址",
            prop: "subStorageAddr",
            rules: [
              {
                required: false,
                message: "请输入分仓地址",
                trigger: "blur"
              }
            ]
          }
        ]
      },
      financialInformation: {
        column: [
          {
            label: "账户名称",
            prop: "accountName",
            rules: [
              {
                required: false,
                message: " ",
                trigger: "blur"
              }
            ]
          },
          {
            label: "开户银行",
            prop: "accountBank",
            rules: [
              {
                required: false,
                message: " ",
                trigger: "blur"
              }
            ]
          },
          {
            label: "银行帐号",
            prop: "accountNo",
            rules: [
              {
                required: false,
                message: " ",
                trigger: "blur"
              }
            ]
          },
          {
            label: "外币账户名称",
            prop: "accountNameFcy",
            rules: [
              {
                required: false,
                message: " ",
                trigger: "blur"
              }
            ]
          },
          {
            label: "外币开户银行",
            prop: "accountBankFcy",
            rules: [
              {
                required: false,
                message: " ",
                trigger: "blur"
              }
            ]
          },
          {
            label: "外币银行账号",
            prop: "accountNoFcy",
            rules: [
              {
                required: false,
                message: " ",
                trigger: "blur"
              }
            ]
          },
          {
            label: "授信状态",
            prop: "creditstatus",
            rules: [
              {
                required: false,
                message: " ",
                trigger: "blur"
              }
            ]
          },
          {
            label: "授信等级",
            prop: "creditLevel",
            rules: [
              {
                required: false,
                message: " ",
                trigger: "blur"
              }
            ]
          },
          {
            label: "授信额度",
            prop: "creditGrant",
            rules: [
              {
                required: false,
                message: " ",
                trigger: "blur"
              }
            ]
          },
          {
            label: "授信天数",
            prop: "creditDay",
            rules: [
              {
                required: false,
                message: " ",
                trigger: "blur"
              }
            ]
          },
          {
            label: "授信利率",
            prop: "creditRate",
            rules: [
              {
                required: false,
                message: " ",
                trigger: "blur"
              }
            ]
          },
          {
            label: "FOB系数",
            prop: "coefficient"
          },
          {
            label: "付款方式",
            prop: "paymentType"
          }
        ]
      },
      basicData: {
        column: [
          {
            label: "编码",
            prop: "code",
            rules: [
              {
                required: true,
                message: " ",
                trigger: "blur"
              }
            ]
          },
          {
            label: "名称",
            prop: "cname",
            rules: [
              {
                required: true,
                message: " ",
                trigger: "blur"
              }
            ]
          },
          {
            label: "类别",
            prop: "corpsTypeId",
            rules: [
              {
                required: true,
                message: " ",
                trigger: "blur"
              }
            ]
          },
          {
            label: "企业类型",
            prop: "companytype",
            rules: [
              {
                required: false,
                message: " ",
                trigger: "blur"
              }
            ]
          },
          {
            label: "代理品牌",
            prop: "goodtypes",
            rules: [
              {
                required: false,
                message: " ",
                trigger: "blur"
              }
            ]
          },
          {
            label: "所属公司",
            prop: "belongtocompany",
            rules: [
              {
                required: false,
                message: " ",
                trigger: "blur"
              }
            ]
          },
          {
            label: "分管员",
            prop: "adminProfiles",
            span: 8
          },
          {
            label: "代理区域",
            prop: "belongtoarea",
            span: 16,
            mock: {
              type: "county"
            }
          },
          {
            label: "信用等级",
            prop: "creditRating",
            span: 8
          }, {
            label: "首字母",
            prop: "initials",
            span: 8
          },
          {
            label: "备注",
            prop: "remarks",
            span: 24,
            mock: {
              type: "county"
            }
          }
        ]
      },
      paymentOption: [],
      addressOption: {},
      addressForm: {},
      addressData: []
    };
  },
  props: {
    detailData: {
      type: Object
    }
  },
  components: {
    flowDialog
  },
  async created() {
    this.customerContact = await this.getColumnData(
      this.getColumnName(147),
      customerContact
    );
    this.bankOfDeposit = await this.getColumnData(
      this.getColumnName(148),
      bankOfDeposit
    );
    this.addressOption = await this.getColumnData(
      this.getColumnName(149),
      addressOption
    );
    corpstypeTree({ corpType: supplierParameter.code }).then(res => {
      this.dic = res.data.data;
    });
    areaTypeTree().then(res => {
      this.dicArea = res.data.data;
    });
    this.getWorkDicts("payment_term").then(res => {
      this.paymentOption = res.data.data;
    });
    this.getWorkDicts("credit_rating").then(res => {
      this.creditRatingList = res.data.data;
    });
    if (this.detailData.id) {
      detail(this.detailData.id).then(res => {
        if (res.data.data.adminProfiles) {
          res.data.data.adminProfiles = res.data.data.adminProfiles.split(",");
        }
        this.form = res.data.data;
        this.contactsData = this.form.corpsAttnList;
        this.bankOfDepositData = this.form.corpsBankList;
        this.advantageProjectData = this.form.corpsItems;
        this.addressData =
          this.form.corpsAddrList.length > 0 ? this.form.corpsAddrList : [];
        if (this.form.belongtoarea) {
          this.form.belongtoarea = this.form.belongtoarea
            .split(",")
            .map(item => item.split("/"));
        }
        delete this.form.corpsAttnList;
        delete this.form.corpsBankList;
        delete this.form.corpsItems;
        delete this.form.corpsAddrList;
      });
    } else if (this.detailData.treeDeptId) {
      this.$set(this.form, "corpsTypeId", this.detailData.treeDeptId);
      if (this.$route.query.customerName) {
        this.$set(this.form, "cname", this.$route.query.customerName);
        this.$router.$avueRouter.closeTag(window.location.hash.slice(1))
      } else if (this.$route.query) {
        this.$set(this.form, "cname", this.$route.query.corpName);
      }
    } else {
      if (this.$route.query.customerName) {
        this.$set(this.form, "cname", this.$route.query.customerName);
        this.$router.$avueRouter.closeTag(window.location.hash.slice(1))
      } else if (this.$route.query) {
        this.$set(this.form, "cname", this.$route.query.corpName);
      }
    }
    gainUser().then(res => {
      this.userList = res.data.data;
    });
    this.getWorkDicts("currency").then(res => {
      this.findObject(this.bankOfDeposit.column, "fcyno").dicData =
        res.data.data;
    });
  },
  methods: {
    //新增客户联系人保存触发
    rowSave(row, done, loading) {
      console.log(row, done, loading);
      this.contactsData.push(row);
      done();
    },
    //修改客户联系人触发
    rowUpdate(row, index, done, loading) {
      done(row);
    },
    //删除客户联系人触发
    rowDel(row, index, donerowDel) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        // 数据回调进行刷新
        if (row.id) {
          corpsattn(row.id).then(res => {
            this.$message({
              type: "success",
              message: "操作成功!"
            });
            this.contactsData.splice(index, 1);
          });
        } else {
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          this.contactsData.splice(index, 1);
        }
      });
    },
    //新增客户优势项目保存触发
    rowSaveProject(row, done, loading) {
      console.log(row, done, loading);
      this.advantageProjectData.push(row);
      done();
    },
    //修改客户优势项目触发
    rowUpdateProject(row, index, done, loading) {
      done(row);
    },
    //删除客户优势项目触发
    rowDelProject(row, index, donerowDel) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        if (row.id) {
          corpsitem(row.id).then(res => {
            this.$message({
              type: "success",
              message: "操作成功!"
            });
            this.advantageProjectData.splice(index, 1);
          });
        } else {
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          this.advantageProjectData.splice(index, 1);
        }
      });
    },
    //新增客户优势项目保存触发
    rowSaveBankOfDeposit(row, done, loading) {
      console.log(row, done, loading);
      this.bankOfDepositData.push(row);
      done();
    },
    //修改客户优势项目触发
    rowUpdateBankOfDeposit(row, index, done, loading) {
      done(row);
    },
    //删除客户优势项目触发
    rowDelBankOfDeposit(row, index, donerowDel) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        if (row.id) {
          corpsbank(row.id).then(res => {
            this.$message({
              type: "success",
              message: "操作成功!"
            });
            this.bankOfDepositData.splice(index, 1);
          });
        } else {
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          this.bankOfDepositData.splice(index, 1);
        }
      });
    },
    //修改提交触发
    editCustomer() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.form.corpsAttnList = this.contactsData;
          this.form.corpsBankList = this.bankOfDepositData;
          this.form.corpsItems = this.advantageProjectData;
          this.form.corpsAddrList = this.addressData;
          if (typeof this.form.corpsTypeId == "object") {
            this.form.corpsTypeId = this.form.corpsTypeId.join(",");
          }
          this.disabled = true;
          if (this.form.belongtoarea) {
            this.form.belongtoarea = this.form.belongtoarea
              .map(e => e.join("/"))
              .join(",");
          }
          if (this.form.adminProfiles) {
            this.form.adminProfiles = this.form.adminProfiles.join(",");
          }
          this.form.corpType = supplierParameter.code;
          typeSave(this.form).then(res => {
            if (res.data.data === "error") {
              this.disabled = false;
              this.$message({
                showClose: true,
                message: res.data.msg,
                type: "error"
              });
            } else {
              this.$message({
                type: "success",
                message: this.form.id ? "修改成功!" : "新增成功!"
              });
              this.form = res.data.data;
              if (this.form.belongtoarea) {
                this.form.belongtoarea = this.form.belongtoarea
                  .split(",")
                  .map(item => item.split("/"));
              }
              this.disabled = false;
            }
          });
        } else {
          return false;
        }
      });
    },
    backToList(value) {
      if (value == '0') {
        this.$emit("goBack");
      } else {
        this.$emit('goBack', true)
      }
    },
    openFlow() {
      this.switchDialog = !this.switchDialog;
    },
    onClose(val) {
      this.switchDialog = val;
    },
    //新增收发货地址保存触发
    rowSaveAddress(row, done, loading) {
      this.addressData.push(row);
      done();
    },
    //修改收发货地址优势项目触发
    rowUpdateAddress(row, index, done, loading) {
      done(row);
    },
    async saveColumn() {
      const inSave = await this.saveColumnData(
        this.getColumnName(147),
        this.customerContact
      );
      if (inSave) {
        this.$nextTick(() => {
          this.$refs.crud.doLayout();
        });
        this.$message.success("保存成功");
        //关闭窗口
        this.$refs.crud.$refs.dialogColumn.columnBox = false;
      }
    },
    async resetColumn() {
      this.customerContact = customerContact;
      const inSave = await this.delColumnData(
        this.getColumnName(147),
        customerContact
      );
      if (inSave) {
        this.$nextTick(() => {
          this.$refs.crud.doLayout();
        });
        this.$message.success("重置成功");
        this.$refs.crud.$refs.dialogColumn.columnBox = false;
      }
    },
    async saveColumn2() {
      const inSave = await this.saveColumnData(
        this.getColumnName(148),
        this.bankOfDeposit
      );
      if (inSave) {
        this.$nextTick(() => {
          this.$refs.crud2.doLayout();
        });
        this.$message.success("保存成功");
        //关闭窗口
        this.$refs.crud2.$refs.dialogColumn.columnBox = false;
      }
    },
    async resetColumn2() {
      this.bankOfDeposit = bankOfDeposit;
      const inSave = await this.delColumnData(
        this.getColumnName(148),
        bankOfDeposit
      );
      if (inSave) {
        this.$nextTick(() => {
          this.$refs.crud2.doLayout();
        });
        this.$message.success("重置成功");
        this.$refs.crud2.$refs.dialogColumn.columnBox = false;
      }
    },
    async saveColumn3() {
      const inSave = await this.saveColumnData(
        this.getColumnName(149),
        this.addressOption
      );
      if (inSave) {
        this.$nextTick(() => {
          this.$refs.crud3.doLayout();
        });
        this.$message.success("保存成功");
        //关闭窗口
        this.$refs.crud3.$refs.dialogColumn.columnBox = false;
      }
    },
    async resetColumn3() {
      this.addressOption = addressOption;
      const inSave = await this.delColumnData(
        this.getColumnName(149),
        addressOption
      );
      if (inSave) {
        this.$nextTick(() => {
          this.$refs.crud3.doLayout();
        });
        this.$message.success("重置成功");
        this.$refs.crud3.$refs.dialogColumn.columnBox = false;
      }
    },
    //删除收发货地址优势项目触发
    rowDelAddress(row, index, donerowDel) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        if (row.id) {
          corpsAddrDelete(row.id).then(res => {
            this.$message({
              type: "success",
              message: "操作成功!"
            });
            this.addressData.splice(index, 1);
          });
        } else {
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          this.addressData.splice(index, 1);
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep .el-form-item {
  margin-bottom: 0;
}
</style>