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>
                <avue-input-tree
                  v-else-if="item.prop === 'belongtoarea'"
                  leaf-only
                  multiple
                  tags
                  style="width: 100%;"
                  size="small"
                  :props="{ label: 'name', value: 'name' }"
                  v-model="form[item.prop]"
                  placeholder=" "
                  type="tree"
                  :dic="dicArea"
                ></avue-input-tree>
                <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>
                <crop-select
                  v-else-if="item.prop === 'belongtocompany'"
                  v-model="form[item.prop]"
                  corpType="GS"
                ></crop-select>
                <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="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
            :option="customerContact"
            v-model="contactsForm"
            :data="contactsData"
            @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
            :option="bankOfDeposit"
            v-model="bankOfDepositForm"
            :data="bankOfDepositData"
            @row-save="rowSaveBankOfDeposit"
            @row-update="rowUpdateBankOfDeposit"
            @row-del="rowDelBankOfDeposit"
          ></avue-crud>
        </basic-container>
        <containerTitle title="收发货地址"></containerTitle>
        <basic-container>
          <avue-crud
            :option="addressOption"
            v-model="addressForm"
            :data="addressData"
            @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: {},
      advantageProjectForm: {},
      bankOfDepositForm: {},
      contactsData: [],
      advantageProjectData: [],
      bankOfDepositData: [],
      dic: [],
      dicArea: [],
      customerContact: customerContact,
      advantageProject: advantageProject,
      bankOfDeposit: 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: "remarks",
            span: 24,
            mock: {
              type: "county"
            }
          }
        ]
      },
      paymentOption: [],
      addressOption: addressOption,
      addressForm: {},
      addressData: []
    };
  },
    props: {
    detailData: {
      type: Object
    }
  },
  components: {
    flowDialog
  },
  created() {
    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;
    });
    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: [];
        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)
    }
    gainUser().then(res => {
      this.userList = 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.toString();
          }
          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
              this.disabled = false;
            }
          });
        } else {
          return false;
        }
      });
    },
    backToList() {
       this.$emit("goBack");
    },
    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);
    },
    //删除收发货地址优势项目触发
    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>