feat(客户管理): 客户管理页面优化

src/views/saleManage/contact/components/addContactDialog.vue

@@ -1,18 +1,19 @@
 <template>
   <ele-modal
     custom-class="ele-dialog-form"
-    :visible.sync="visible"
     v-if="visible"
+    :visible.sync="visible"
     :title="title"
     :close-on-click-modal="false"
     width="80%"
     @close="cancel"
   >
+
     <el-tabs v-model="activeName" type="card">
       <el-tab-pane label="基本信息" name="base">
         <el-form
           label-width="100px"
-          ref="form"
+          ref="formRef"
           :model="form"
           :rules="rules"
           style="margin-top: 30px"
@@ -163,9 +164,9 @@
               </el-form-item>
             </el-col>
             <el-col :span="8">
-              <el-form-item prop="businessLicenseFile" label="营业执照附件">
+              <el-form-item prop="businessLicenseFiles" label="营业执照附件">
                 <fileUpload
-                  v-model="form.businessLicenseFile"
+                  v-model="form.businessLicenseFiles"
                   module="main"
                   :showLib="false"
                   :limit="1"
@@ -430,6 +431,7 @@ export default {
           addressId: 0,
           addressName: '',
           authorizationLimit: 0,
+          businessLicenseFiles: [],
           businessLicenseFile: {},
           businessScope: '',
           categoryId: '',
@@ -606,7 +608,9 @@ export default {
         // 是否是修改
         isUpdate: false,
 
+        // 组织机构树形结构数据
         groupTreeData: [],
+        // 组织机构平铺数据
         groupData: [],
       };
     },
@@ -696,6 +700,17 @@ export default {
         }
       },
       async save() {
+
+        const data1 = {
+          base: this.form,
+          other: this.otherForm,
+          bankList: this.tableBankData,
+          linkList: this.tableLinkData
+        };
+        console.log("data1", data1);
+        return;
+
+
         const isBaseValid = await this.$refs.form.validate();
         const isOtherValid = await this.$refs.form.validate();
         if (!isBaseValid || !isOtherValid) {
@@ -708,7 +723,6 @@ export default {
 
         this.loading = true;
         // 基本信息处理
-        // this.form.categoryId = this.categoryId;
         if (this.$refs.address.getCheckedNodes()) {
           let node = this.$refs.address.getCheckedNodes()[0];
           if (node) {
@@ -729,6 +743,10 @@ export default {
             this.form.companyCategoryId
           );
         }
+        if(this.form.businessLicenseFiles && this.form.businessLicenseFiles.length > 0){
+          this.form.businessLicenseFile = this.form.businessLicenseFiles[0];
+        }
+
         // 其他信息处理
         if (this.form.settlementMode) {
           this.form.settlementModeName = this.getDictValue(
@@ -781,7 +799,13 @@ export default {
         }
       },
       cancel() {
-        this.visible = false;
+        this.$nextTick(() => {
+          this.tableBankData = []
+          this.tableLinkData = []
+          this.$refs['otherForm'] &&  this.$refs['otherForm'].resetFields();
+          this.$refs['formRef'] &&  this.$refs['formRef'].resetFields();
+          this.visible = false;
+        })
       },
       async _getById(id) {
         const data = await contactDetail(id);
@@ -789,6 +813,8 @@ export default {
         this.otherForm = data.other;
         this.tableBankData = data.bankList;
         this.tableLinkData = data.linkList;
+        this.$set(this.form,'businessLicenseFiles',[data.base.businessLicenseFile])
+
         if(this.tableLinkData && this.tableLinkData.length > 0){
           this.tableLinkData.forEach(e => e.status = e.status+"");
         }
@@ -811,25 +837,7 @@ export default {
           })
         }
       },
-      // 文件上传
-      async handlSuccess(params) {
-        let res = await uploadFile({
-          multiPartFile: params.file,
-          module: this.module
-        });
-        if (res?.data) {
-          this.$emit('input', res.data);
-        }
-      },
-      async clearImg() {
-        await removeFile({ fileId: this.value.id });
-        this.$emit('input', {});
-        this.$refs.uploadRef.clearFiles();
-      },
-      // 限制上传的数量
-      handleExceed(files, fileList) {
-        this.$message.warning(`最多允许上传一张图片！`);
-      }
+
     }
   };
 </script>

src/views/saleManage/contact/index.vue

@@ -6,16 +6,14 @@
         allow-collapse
         :right-style="{ overflow: 'hidden' }"
       >
-        <div class="ele-border-lighter sys-organization-list">
-          <el-tree
-            :data="treeList"
-            :props="defaultProps"
-            ref="treeRef"
-            default-expand-all
-            :highlight-current="true"
-            node-key="id"
-            @node-click="handleNodeClick"
-          ></el-tree>
+        <div>
+          <div class="ele-border-lighter sys-organization-list">
+            <AssetTree
+              @handleNodeClick="handleNodeClick"
+              id="17"
+              ref="treeList"
+            />
+          </div>
         </div>
 
         <template v-slot:content>
@@ -27,7 +25,10 @@
               ref="table"
               :columns="columns"
               :datasource="datasource"
-              cache-key="systemRoleTable"
+              height="calc(100vh - 300px)"
+              full-height="calc(100vh - 116px)"
+              tool-class="ele-toolbar-form"
+              cache-key="eomContactPageTable"
             >
               <!-- 表头工具栏 -->
               <template v-slot:toolbar>
@@ -60,6 +61,25 @@
                 >
                   修改
                 </el-link>
+                <el-link
+                  v-if="row.status===0"
+                  type="primary"
+                  :underline="false"
+                  icon="el-icon-check"
+                  @click="openEdit('编辑客户',row)"
+                >
+                  启用
+                </el-link>
+                <el-link
+                  v-if="row.status===1"
+                  type="primary"
+                  :underline="false"
+                  icon="el-icon-close"
+                  @click="openEdit('编辑客户',row)"
+                >
+                  禁用
+                </el-link>
+
                 <el-popconfirm
                   class="ele-action"
                   title="确定要删除此客户信息吗？"
@@ -81,83 +101,118 @@
         </template>
       </ele-split-layout>
     </el-card>
+
+
     <AddContactDialog ref="addContactDialogRef" :categoryTreeList="treeList" @done="reload"></AddContactDialog>
 
   </div>
 </template>
 
 <script>
-  import ContactSearch from './components/contactSearch.vue';
-  import AddContactDialog from './components/addContactDialog.vue';
-  import {
-    contactPage,
-    contactDelete,
-    contactTypeTree
-  } from '@/api/saleManage/contact';
-  import dictMixins from '@/mixins/dictMixins';
+import ContactSearch from './components/contactSearch.vue';
+import AddContactDialog from './components/addContactDialog.vue';
+import AssetTree from '@/components/AssetTree';
+import {contactDelete, contactPage, contactTypeTree} from '@/api/saleManage/contact';
+import dictMixins from '@/mixins/dictMixins';
 
-  export default {
+export default {
     mixins: [dictMixins],
     components: {
       ContactSearch,
-      AddContactDialog
+      AddContactDialog,
+      AssetTree
     },
     data() {
       return {
         // 加载状态
         loading: false,
         columns: [
+          {
+            columnKey: 'index',
+            label: '序号',
+            type: 'index',
+            width: 55,
+            align: 'center',
+            showOverflowTooltip: true,
+            fixed: 'left'
+          },
+          {
+            prop: 'code',
+            label: '客户编码',
+            align: 'center',
+            showOverflowTooltip: true,
+            minWidth: 140
+          },
           {
             prop: 'name',
             label: '客户名称',
             align: 'center',
             showOverflowTooltip: true,
-            minWidth: 110
+            minWidth: 150
+          },
+          {
+            prop: 'serialNo',
+            label: '客户代码',
+            align: 'center',
+            showOverflowTooltip: true,
+            minWidth: 140
           },
           {
-            prop: 'simpleName',
-            label: '客户简称',
+            prop: 'phone',
+            label: '客户电话',
             align: 'center',
             showOverflowTooltip: true,
-            minWidth: 110
+            minWidth: 120
           },
           {
             prop: 'addressName',
-            label: '地址名称',
+            label: '单位地址',
             align: 'center',
             showOverflowTooltip: true,
-            minWidth: 110
+            minWidth: 120,
+            formatter: (_row, _column, cellValue) => {
+              let addr = '' + _row.addressName ? _row.addressName.replaceAll(',', '') : '';
+              addr += _row.address ? _row.address : '';
+              return addr;
+            }
           },
           {
-            prop: 'unifiedSocialCreditCode',
-            label: '统一社会信用代码',
+            prop: 'linkName',
+            label: '联系人',
             align: 'center',
             showOverflowTooltip: true,
-            minWidth: 110
+            minWidth: 120
+          },
+          {
+            prop: 'linkPhone',
+            label: '联系人电话',
+            align: 'center',
+            showOverflowTooltip: true,
+            minWidth: 120
           },
           {
             prop: 'status',
             label: '状态',
             align: 'center',
             showOverflowTooltip: true,
-            minWidth: 110,
+            minWidth: 100,
             formatter: (_row, _column, cellValue) => {
-              return this.getDictValue('客户状态', _row.status);
+              return _row.status === 1 ? '正常' : '停用';
             }
           },
           {
-            prop: 'createUserName',
+            prop: 'createUsername',
             label: '创建人',
             align: 'center',
             showOverflowTooltip: true,
-            minWidth: 110
+            minWidth: 100
           },
           {
             prop: 'createTime',
             label: '创建时间',
             align: 'center',
             showOverflowTooltip: true,
-            minWidth: 110,
+            minWidth: 160,
             formatter: (_row, _column, cellValue) => {
               return this.$util.toDateString(cellValue);
             }
@@ -165,11 +220,12 @@
           {
             columnKey: 'action',
             label: '操作',
-            width: 150,
+            width: 200,
             align: 'center',
             resizable: false,
             slot: 'action',
-            showOverflowTooltip: true
+            showOverflowTooltip: true,
+            fixed: 'right',
           }
         ],
         current: {},
@@ -223,36 +279,8 @@
       },
       handleNodeClick(data, node) {
         this.curNodeData = data;
-        /*this.pathList = this.findParent([], data, this.treeList);
-        this.rootTreeId = null;
-        if (this.pathList.length == 0) {
-          this.rootTreeId = data.id;
-        } else {
-          this.rootTreeId =
-            this.pathList[this.pathList.length - 1] &&
-            this.pathList[this.pathList.length - 1].id;
-        }*/
         this.reload({ categoryId: data.id });
       },
-      // parents:用于返回的数组，childNode:要查询的节点，treeList：json树形数据
-      /*findParent(parents, childNode, treeList) {
-        for (let i = 0; i < treeList.length; i++) {
-          // 父节点查询条件
-          if (treeList[i].id === childNode.parentId) {
-            // 如果找到结果,保存当前节点
-            parents.push(treeList[i]);
-            // 用当前节点再去原数据查找当前节点的父节点
-            this.findParent(parents, treeList[i], this.treeList);
-            break;
-          } else {
-            if (treeList[i].children instanceof Array) {
-              //	没找到，遍历该节点的子节点
-              this.findParent(parents, childNode, treeList[i].children);
-            }
-          }
-        }
-        return parents;
-      },*/
       /* 刷新表格 */
       reload(where) {
         this.$refs.table.reload({ page: 1, where });
@@ -274,4 +302,18 @@
   };
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.sys-organization-list {
+  height: calc(100vh - 264px);
+  box-sizing: border-box;
+  border-width: 1px;
+  border-style: solid;
+  overflow: auto;
+}
+.sys-organization-list :deep(.el-tree-node__content) {
+  height: 40px;
+  & > .el-tree-node__expand-icon {
+    margin-left: 10px;
+  }
+}
+</style>