|
@@ -0,0 +1,573 @@
|
|
|
+<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>
|
|
|
+ <el-button
|
|
|
+ class="el-button--small-yh add-customer-btn"
|
|
|
+ type="primary"
|
|
|
+ @click="editCustomer"
|
|
|
+ >{{form.id?'确认修改':'确认新增'}}
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ <div style="margin-top: 60px">
|
|
|
+ <el-form :model="form" ref="form" label-width="100px" class="demo-ruleForm">
|
|
|
+ <containerTitle title="基础资料"></containerTitle>
|
|
|
+ <basic-container style="margin-bottom: 10px">
|
|
|
+ <el-row>
|
|
|
+ <el-col v-for="item in basicData.column" :span="item.span?item.span:8">
|
|
|
+ <el-form-item :label="item.label" :prop="item.prop" :rules="item.rules">
|
|
|
+ <avue-input-tree disabled v-if="item.prop === 'companytype'" leaf-only multiple :props="{label:'title'}" v-model="form[item.prop]" placeholder="请选择内容" type="tree" :dic="dic"></avue-input-tree>
|
|
|
+ <el-input type="age" disabled 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 style="margin-bottom: 10px">
|
|
|
+ <el-row>
|
|
|
+ <el-col v-for="item in contactInformation.column" :span="item.span?item.span:8">
|
|
|
+ <el-form-item :label="item.label" :prop="item.prop" :rules="item.rules">
|
|
|
+ <el-input type="age" disabled 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 style="margin-bottom: 10px">
|
|
|
+ <el-row>
|
|
|
+ <el-col v-for="item in financialInformation.column" :span="item.span?item.span:8">
|
|
|
+ <el-form-item :label="item.label" :prop="item.prop" :rules="item.rules">
|
|
|
+ <el-switch
|
|
|
+ disabled
|
|
|
+ v-if="item.prop === 'creditstatus'"
|
|
|
+ v-model="form[item.prop]"
|
|
|
+ active-text="开启"
|
|
|
+ inactive-text="关闭">
|
|
|
+ </el-switch>
|
|
|
+ <el-input v-else type="age" disabled 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 style="margin-bottom: 10px">
|
|
|
+ <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 style="margin-bottom: 40px">
|
|
|
+ <avue-crud
|
|
|
+ :option="bankOfDeposit"
|
|
|
+ v-model="bankOfDepositForm"
|
|
|
+ :data="bankOfDepositData"
|
|
|
+ @row-save="rowSaveBankOfDeposit"
|
|
|
+ @row-update="rowUpdateBankOfDeposit"
|
|
|
+ @row-del="rowDelBankOfDeposit"
|
|
|
+ ></avue-crud>
|
|
|
+ </basic-container>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import {customerList, typeSave, detail, deleteDetails,
|
|
|
+ corpstypeTree,
|
|
|
+ corpsattn,
|
|
|
+ corpsbank,
|
|
|
+ corpsfiles,
|
|
|
+ corpsitem} from "@/api/basicData/customerInformation"
|
|
|
+import customerContact from "./configuration/customerContact.json"
|
|
|
+import advantageProject from "./configuration/advantageProject.json"
|
|
|
+import bankOfDeposit from "./configuration/bankOfDeposit.json"
|
|
|
+export default {
|
|
|
+ name: "detailsPage",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ form: {},
|
|
|
+ contactsForm: {},
|
|
|
+ advantageProjectForm: {},
|
|
|
+ bankOfDepositForm: {},
|
|
|
+ contactsData: [],
|
|
|
+ advantageProjectData: [],
|
|
|
+ bankOfDepositData: [],
|
|
|
+ dic:[],
|
|
|
+ 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: 'positoin',
|
|
|
+ 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'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ basicData: {
|
|
|
+ column: [
|
|
|
+ {
|
|
|
+ label: '客户编码',
|
|
|
+ prop: 'code',
|
|
|
+ rules: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: ' ',
|
|
|
+ trigger: 'blur'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }, {
|
|
|
+ label: '代理品牌',
|
|
|
+ prop: 'goodtypes',
|
|
|
+ rules: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: ' ',
|
|
|
+ trigger: 'blur'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }, {
|
|
|
+ label: '所属公司',
|
|
|
+ prop: 'belongtocompany',
|
|
|
+ rules: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: ' ',
|
|
|
+ trigger: 'blur'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }, {
|
|
|
+ label: '客户名称',
|
|
|
+ prop: 'cname',
|
|
|
+ }, {
|
|
|
+ label: '企业类型',
|
|
|
+ prop: 'companytype',
|
|
|
+ rules: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: ' ',
|
|
|
+ trigger: 'blur'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }, {
|
|
|
+ label: "代理区域",
|
|
|
+ span: 24,
|
|
|
+ prop: "belongtoarea",
|
|
|
+ mock: {
|
|
|
+ type: 'county'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.customerContact.menu = false
|
|
|
+ this.customerContact.addBtn = false
|
|
|
+ this.advantageProject.menu = false
|
|
|
+ this.advantageProject.addBtn = false
|
|
|
+ this.bankOfDeposit.menu = false
|
|
|
+ this.bankOfDeposit.addBtn = false
|
|
|
+ this.bankOfDeposit.viewBtn = false
|
|
|
+ this.bankOfDeposit.editBtn = false
|
|
|
+ this.bankOfDeposit.delBtn = false
|
|
|
+ corpstypeTree().then(res=>{
|
|
|
+ console.log(res)
|
|
|
+ this.dic = res.data.data
|
|
|
+ })
|
|
|
+ if (this.$route.query.id){
|
|
|
+ detail(this.$route.query.id).then(res => {
|
|
|
+ console.log(res.data.data)
|
|
|
+ this.form = res.data.data;
|
|
|
+ this.contactsData = this.form.corpsAttnList
|
|
|
+ this.bankOfDepositData = this.form.corpsBankList
|
|
|
+ this.advantageProjectData = this.form.corpsItems
|
|
|
+ delete this.form.corpsAttnList
|
|
|
+ delete this.form.corpsBankList
|
|
|
+ delete this.form.corpsItems
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch:{
|
|
|
+ '$route'(to,from) {
|
|
|
+ console.log(to,from);
|
|
|
+ if (this.$route.query.id){
|
|
|
+ detail(this.$route.query.id).then(res => {
|
|
|
+ console.log(res.data.data)
|
|
|
+ this.form = res.data.data;
|
|
|
+ });
|
|
|
+ }else {
|
|
|
+ this.form = {}
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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() {
|
|
|
+ console.log(this.form)
|
|
|
+ this.$refs["form"].validate((valid) => {
|
|
|
+ console.log(valid)
|
|
|
+ if (valid) {
|
|
|
+ this.form.corpsAttnList = this.contactsData
|
|
|
+ this.form.corpsBankList = this.bankOfDepositData
|
|
|
+ this.form.corpsItems = this.advantageProjectData
|
|
|
+ this.form.corpsTypeId = this.form.companytype.replace(/[\[\]]/g,"")
|
|
|
+ typeSave(this.form).then(res => {
|
|
|
+ console.log(res.data)
|
|
|
+ this.$message({
|
|
|
+ type: "success",
|
|
|
+ message: this.form.id ? "修改成功!" : "新增成功!"
|
|
|
+ });
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ console.log('error submit!!');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ backToList() {
|
|
|
+ // this.$router.$avueRouter.closeTag();
|
|
|
+ console.log(this.$router.$avueRouter)
|
|
|
+ this.$router.push({
|
|
|
+ path: '/basicData/customerInformation/index',
|
|
|
+ query: {}
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.customer-head {
|
|
|
+ position: fixed;
|
|
|
+ top: 105px;
|
|
|
+ width: 100%;
|
|
|
+ margin-left: -10px;
|
|
|
+ height: 62px;
|
|
|
+ background: #ffffff;
|
|
|
+ box-shadow: 0 4px 12px 0px rgba(232, 232, 235, 1);
|
|
|
+ z-index: 999;
|
|
|
+ /* display: flex;
|
|
|
+ justify-content: left; */
|
|
|
+}
|
|
|
+
|
|
|
+.customer-back {
|
|
|
+ cursor: pointer;
|
|
|
+ line-height: 62px;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #323233;
|
|
|
+ font-weight: 400;
|
|
|
+}
|
|
|
+
|
|
|
+.back-icon {
|
|
|
+ line-height: 64px;
|
|
|
+ font-size: 20px;
|
|
|
+ margin-right: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.add-customer-btn {
|
|
|
+ position: fixed;
|
|
|
+ right: 36px;
|
|
|
+ top: 115px;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .el-form-item {
|
|
|
+ margin-bottom: 0;
|
|
|
+}
|
|
|
+</style>
|