修改楼盘管理

package.json

@@ -35,6 +35,7 @@
     "less-loader": "^6.0.0",
     "nprogress": "^0.2.0",
     "pizzip": "^3.1.1",
+    "promise-indexeddb": "^1.0.4",
     "quill": "^1.3.7",
     "script-loader": "^0.7.2",
     "sockjs-client": "1.0.0",

src/main.js

@@ -20,13 +20,8 @@ import AvueFormDesign from '@sscfaith/avue-form-design'
 import basicContainer from './components/basic-container/main'
 import api from './api'
 import AvueUeditor from 'avue-plugin-ueditor'
-import indexDb from './util/indexedDb'
+import './util/indexedDb/index'
 
-let storeName = { name: 'tableOption', key: 'tableIdName' } // name 表名  key 主键
-indexDb.openDB('hxz', 1, storeName, function(db) {
-  Vue.prototype.$tableDb = db
-  Vue.prototype.$indexDb = indexDb
-})
 Vue.use(AvueUeditor);
 
 import VueQuillEditor from 'vue-quill-editor' //vue-quill-editor其它文件可在应用页面直接引入
@@ -81,8 +76,6 @@ iconfontVersion.forEach(ele => {
 Vue.config.productionTip = false
 import APlayer from '@moefe/vue-aplayer';
 
-import tableOption from './util/table'
-Vue.prototype.$tableOption = tableOption
 
 Vue.use(APlayer, {
   productionTip: true,

src/page/wel.vue

@@ -2189,8 +2189,6 @@ export default {
   },
 
   mounted() {
-    console.log(this.$tableOption)
-    console.log(this.$tableOption, '多久啊开始了的接口撒了就的克拉斯绝地狂龙撒')
     this.role = localStorage.getItem("orgType");
     if (this.role == 3) {
       this.houseId = localStorage.getItem("houseId");

src/store/modules/indexedDb.js

@@ -0,0 +1 @@
+import { getStore, removeStore ,setStore } from '@/util/store'

src/util/indexedDb.js

@@ -1,206 +0,0 @@
-export default {
-    // indexedDB 兼容
-    indexedDB: window.indexedDB || window.webkitindexedDB || window.msIndexedDB || window.mozIndexedDB,
-
-    /**
-     * 打开数据库
-     * 新对象存储空间newStore参数：name、key
-     * 新增对象存储空间要更改数据库版本
-     * @param {数据库名称} dbname
-     * @param {版本} version
-     * @param {数据库} db
-     * @param {配置} newStore
-     * @param {回调函数} callback
-     * */
-    openDB(dbname, version, newStore, callback) {
-        let db
-        version = version || 1;
-        const request = this.indexedDB.open(dbname, version);
-
-        // 打开失败回调
-        request.onerror = function () {
-            throw "IndexedDb数据库打开错误"
-        }
-
-        // 打开成功回调
-        request.onsuccess = function (event) {
-            db = event.target.result;
-            if (callback && (typeof callback === 'function')) {
-                callback(db);
-            }
-        }
-
-        // 调用创建新的存储空间
-        request.onupgradeneeded = function (event) {
-            db = event.target.result;
-            if (newStore) {
-                if (!db.objectStoreNames.contains(newStore.name)) {
-                    const objectStore = db.createObjectStore(newStore.name, {
-                        keyPath: newStore.key
-                    }, {
-                        unique: false,
-                        autoIncrement: true
-                    })
-                    // newStore.index.forEach(item => {
-                    //     objectStore.createIndex(`${item}`, item, {
-                    //         unique: false,
-                    //         autoIncrement: true
-                    //     })
-                    // })
-                }
-            }
-        }
-    },
-
-    /**
-     * 删除数据库
-     * @params {*} dbname
-     * @params {*} callback
-     * */
-    deleteDb(dbname, callback) {
-        const deleteQuest = this.indexedDB.deleteDatabase(dbname);
-        deleteQuest.onerror = function () {
-            throw "删除数据库出错";
-        }
-
-        deleteQuest.onsuccess = function () {
-            if (callback && (typeof callback === 'function')) {
-                callback();
-            }
-        }
-    },
-
-    /**
-     * 关闭数据库
-     * @params {*} dbname
-     * */
-    closeDB(dbname) {
-        dbname.close();
-    },
-
-    /**
-     * 删除数据
-     * @params {*} db
-     * @params {*} storename
-     * @params {*} key
-     * @params {*} callback
-     * */
-    deleteData(db, storename, key, callback) {
-        const store = db.transaction(storename, 'readwrite').objectStore(storename)
-        const request = store.delete(key);
-        request.onsuccess = function () {
-            if (callback && (typeof callback === 'function')) {
-                callback(`删除${storename}成功`)
-            }
-        }
-        request.onerror = function () {
-            if (callback && (typeof callback === 'function')) {
-                callback(`删除${storename}失败`)
-            }
-        }
-    },
-
-
-    /**
-     * 清空数据
-     * @params {*} db
-     * @params {*} storename
-     * @params {*} callback
-     * */
-    clearData(db, storename, callback) {
-        const store = db.transaction(storename, 'readwrite').objectStore(storename);
-        const request = store.clear();
-
-        request.onsuccess = function () {
-            if (callback && (typeof callback === 'function')) {
-                callback(`清空${storename}成功`)
-            }
-        }
-        request.onerror = function () {
-            if (callback && (typeof callback === 'function')) {
-                callback(`清空${storename}失败`)
-            }
-        }
-    },
-
-
-    /**
-     * 添加数据
-     * @params {*} db
-     * @params {*} storename
-     * @params {*} obj
-     * */
-    addData(db, storename, obj) {
-        const store = db.transaction(storename, 'readwrite').objectStore(storename);
-        const request = store.add(obj);
-        request.onsuccess = function () {
-            console.log(`写入${storename}数据成功`)
-        }
-        request.onerror = function (e) {
-            console.log(`写入${storename}数据失败`)
-            console.log(e)
-        }
-    },
-
-    /**
-     * 更新数据
-     * @params {*} db
-     * @params {*} storename
-     * @params {*} obj
-     * */
-    updateData(db, storename, obj) {
-        const store = db.transaction(storename, 'readwrite').objectStore(storename);
-        const request = store.put(obj);
-        request.onsuccess = function () {
-            console.log(`更新${storename}数据成功`)
-        }
-        request.onerror = function () {
-            console.log(`更新${storename}数据失败`)
-        }
-    },
-
-    /**
-     * 根据主键获取数据
-     * @params {*} db
-     * @params {*} storename
-     * @params {*} key
-     * @return
-     * */
-    getData(db, storename, key) {
-        const store = db.transaction(storename, 'readwrite').objectStore(storename);
-        const request = store.get(key);
-        request.onerror = function () {
-            console.log(`获取${storename} 里主键 ${key} 的数据失败`)
-        }
-        return new Promise(resolve => {
-            request.onsuccess = function (e) {
-                resolve(e.target.result)
-            }
-        })
-    },
-
-    /**
-     * 获取全部数据
-     * @params {*} db
-     * @params {*} storename
-     * @return
-     * */
-    getAllData(db, storename) {
-        const store = db.transaction(storename, 'readwrite').objectStore(storename);
-        const request = store.openCursor();
-
-        let data = [];
-        return new Promise(resolve => {
-            request.onsuccess = function (e) {
-                let cursor = e.target.result;
-                if (cursor) {
-                    data.push(cursor.value);
-                    cursor.continue();
-                } else {
-                    resolve(data)
-                }
-            }
-        })
-    },
-
-}

src/util/indexedDb/index.js

@@ -0,0 +1,19 @@
+import Vue from 'vue'
+import tableOption from './table'
+import IndexDBCache from './indexedDB'
+
+//初始化数据库
+const indexDb = new IndexDBCache()
+indexDb.initDB().then(async(res) => {
+    if (res.type == 'upgradeneeded') {
+        console.log('indexDB 数据库创建或更新成功!')
+    } else {
+        console.log('indexDB 数据库初始化成功!')
+    }
+}).catch((err) => {
+    console.log('indexDB 数据库初始化失败! ', err)
+})
+
+
+Vue.prototype.$db = indexDb
+Vue.prototype.$tableOption = tableOption

src/util/indexedDb/indexedDB.js

@@ -0,0 +1,148 @@
+const indexDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB
+class IndexDBCache {
+    // 构造函数
+    constructor() {
+        this._db = null //数据库
+        this._transaction = null //事务
+        this._request = null
+        this._dbName = 'hxz' //数据库名
+        this._cacheTableName = 'tableOption' //表名
+        this._keyPath = 'tableIdName'
+        this._dbversion = 1 //数据库版本 
+    }
+
+    // 初始化数据库
+    initDB() {
+        return new Promise((resolve, reject) => {
+            this._request = indexDB.open(this._dbName, this._dbversion) // 打开数据库
+            // 数据库初始化成功
+            this._request.onsuccess = (event) => {
+                this._db = this._request.result
+                resolve(event)
+            }
+            // 数据库初始化失败
+            this._request.onerror = (event) => {
+                reject(event)
+            }
+            // 数据库初次创建或更新时会触发
+            this._request.onupgradeneeded = (event) => {
+                let db = this._request.result
+                if (!db.objectStoreNames.contains(this._cacheTableName)) {
+                    db.createObjectStore(this._cacheTableName, {
+                        keyPath: this._keyPath, // 设置主键
+                    })
+                }
+                resolve(event)
+            }
+        })
+    }
+
+    /**
+     * @description : 新增数据
+     * @param        {Object} params { tableName, optionData } //两个参数
+     * @return       {*}
+     */
+    addData(params) {
+        params.optionData = JSON.stringify(params.optionData, this.serialize)
+        return new Promise((resolve, reject) => {
+            let transaction = this._db.transaction(this._cacheTableName, 'readwrite')
+            let store = transaction.objectStore(this._cacheTableName)
+            let response = store.add(params)
+            // 操作成功
+            response.onsuccess = (event) => {
+                resolve(event)
+            }
+            // 操作失败
+            response.onerror = (event) => {
+                reject(event)
+            }
+        })
+    }
+
+    // 通过主键读取数据
+    getDataByKey(key) {
+        return new Promise((resolve, reject) => {
+            let transaction = this._db.transaction(this._cacheTableName)
+            let objectStore = transaction.objectStore(this._cacheTableName)
+            // 通过主键读取数据
+            let request = objectStore.get(key)
+            // 操作成功
+            request.onsuccess = () => {
+                console.log('拿到数据了')
+                request.result.optionData = JSON.parse(request.result.optionData, this.deserialize)
+                resolve(request.result)
+            }
+            // 操作失败
+            request.onerror = (event) => {
+                console.log('获取失败')
+                reject(event)
+            }
+        })
+    }
+
+    /**
+     * @description : 更新数据
+     * @param        {Object} params 
+     * @return       {*}
+     */
+    upDate(params) {
+        params.optionData = JSON.stringify(params.optionData, this.serialize)
+        return new Promise((resolve, reject) => {
+            let transaction = this._db.transaction(this._cacheTableName, 'readwrite')
+            let store = transaction.objectStore(this._cacheTableName)
+            let response = store.put(params)
+            // 操作成功
+            response.onsuccess = (event) => {
+                resolve(event)
+            }
+            // 操作失败
+            response.onerror = (event) => {
+                reject(event)
+            }
+        })
+    }
+
+    // 获取所有数据
+    getAllDate() {
+        return new Promise((resolve, reject) => {
+            let transaction = this._db.transaction(this._cacheTableName, 'readwrite')
+            let store = transaction.objectStore(this._cacheTableName)
+            let response = store.getAll()
+            // 操作成功
+            response.onsuccess = (event) => {
+                console.log(event, 'adsklasjdkalsjdklasjdklasjkdls')
+                resolve(event)
+            }
+            // 操作失败
+            response.onerror = (event) => {
+                reject(event)
+            }
+        })
+    }
+
+
+
+
+    // 使用string调用 JSON.stringify(obj, serialize)
+    serialize(key, value) {
+        if (typeof value === 'function') {
+            return value.toString();
+        }
+        return value;
+    }
+
+    // 使用parse调用 JSON.parse(obj, deserialize)
+    deserialize(key, value) {
+        if (value && typeof value === "string" && value.substr(0, 8) == "function") {
+            var startBody = value.indexOf('{') + 1;
+            var endBody = value.lastIndexOf('}');
+            var startArgs = value.indexOf('(') + 1;
+            var endArgs = value.indexOf(')');
+
+            return new Function(value.substring(startArgs, endArgs), value.substring(startBody, endBody));
+        }
+        return value;
+    }
+
+}
+export default IndexDBCache

src/util/indexedDb/table.js

@@ -0,0 +1,86 @@
+// 公共配置项，示例
+const publicOption = {
+    // CustomerAgentManagement: {
+    //     border: true,
+    //     index: true,
+    //     height: 527,
+    //     indexLabel: "序号",
+    //     stripe: true,
+    //     menuAlign: "center",
+    //     menuWidth: 250,
+    //     menu: false,
+    //     align: "center",
+    //     refreshBtn: false,
+    //     showColumnBtn: false,
+    //     searchSize: "mini",
+    //     searchMenuSpan: 9,
+    //     delBtn: false,
+    //     addBtn: false,
+    //     editBtn: false,
+    //     viewBtn: true,
+    //     size: "small",
+    //     column: [
+    //         {
+    //             label: "操作人",
+    //             prop: "name",
+    //             search: true
+    //         },
+    //         {
+    //             label: "操作手机",
+    //             prop: "createBy",
+    //             search: true
+    //         },
+    //         {
+    //             label: "登录IP",
+    //             prop: "remoteAddr"
+    //         },
+    //         {
+    //             label: "操作时间",
+    //             prop: "createTime",
+    //         },
+    //         {
+    //             label: "操作类型",
+    //             prop: "type",
+    //             dicData: [{
+    //                 label: '新增管理',
+    //                 value: "0"
+    //             }, {
+    //                 label: '编辑项目',
+    //                 value: "1"
+    //             }, {
+    //                 label: '删除项目',
+    //                 value: "2"
+    //             }, {
+    //                 label: '新增公司',
+    //                 value: "3"
+    //             }, {
+    //                 label: '编辑公司',
+    //                 value: "4"
+    //             }, {
+    //                 label: '删除公司',
+    //                 value: "5"
+    //             }, {
+    //                 label: '新增代理商',
+    //                 value: "6"
+    //             }, {
+    //                 label: '系统运营',
+    //                 value: '7'
+    //             }]
+    //         },
+    //         {
+    //             label: '操作内容',
+    //             prop: 'title',
+    //             search: true
+    //         }
+    //     ]
+    // }
+}
+
+const modulesFiles = require.context('@/views',true,/\.js$/);
+const modules = modulesFiles.keys().reduce((modules, modulePath) => {
+    const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1');
+    const value = modulesFiles(modulePath);
+    Object.assign(modules, value.default);
+    return modules;
+}, publicOption);
+export default modules;

src/util/table.js

@@ -1,87 +0,0 @@
-// 公共配置项，示例
-const publicOption = {
-    CustomerAgentManagement: {
-        tableIdName: 'CustomerAgentManagement',
-        border: true,
-        index: true,
-        height: 527,
-        indexLabel: "序号",
-        stripe: true,
-        menuAlign: "center",
-        menuWidth: 250,
-        menu: false,
-        align: "center",
-        refreshBtn: false,
-        showColumnBtn: false,
-        searchSize: "mini",
-        searchMenuSpan: 9,
-        delBtn: false,
-        addBtn: false,
-        editBtn: false,
-        viewBtn: true,
-        size: "small",
-        column: [
-            {
-                label: "操作人",
-                prop: "name",
-                search: true
-            },
-            {
-                label: "操作手机",
-                prop: "createBy",
-                search: true
-            },
-            {
-                label: "登录IP",
-                prop: "remoteAddr"
-            },
-            {
-                label: "操作时间",
-                prop: "createTime",
-            },
-            {
-                label: "操作类型",
-                prop: "type",
-                dicData: [{
-                    label: '新增管理',
-                    value: "0"
-                }, {
-                    label: '编辑项目',
-                    value: "1"
-                }, {
-                    label: '删除项目',
-                    value: "2"
-                }, {
-                    label: '新增公司',
-                    value: "3"
-                }, {
-                    label: '编辑公司',
-                    value: "4"
-                }, {
-                    label: '删除公司',
-                    value: "5"
-                }, {
-                    label: '新增代理商',
-                    value: "6"
-                }, {
-                    label: '系统运营',
-                    value: '7'
-                }]
-            },
-            {
-                label: '操作内容',
-                prop: 'title',
-                search: true
-            }
-        ]
-    }
-}
-
-const modulesFiles = require.context('@/views',true,/\.js$/);
-const modules = modulesFiles.keys().reduce((modules, modulePath) => {
-    const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1');
-    const value = modulesFiles(modulePath);
-    Object.assign(modules, value.default);
-    return modules;
-}, publicOption);
-export default modules;

src/views/Customer/AgentManagement.vue

@@ -5,324 +5,471 @@
       <div class="app-titel" style="margin-top: 15px">
         <div class="label">合同结束日期：</div>
         <div>
-          <el-date-picker @change="confirmtime" v-model="timelist" type="daterange" style="width: 250px"
-            range-separator="-" :default-time="['00:00:00', '23:59:59']" value-format="yyyy-MM-dd"
-            start-placeholder="开始日期" end-placeholder="结束日期">
+          <el-date-picker
+            @change="confirmtime"
+            v-model="timelist"
+            type="daterange"
+            style="width: 250px"
+            range-separator="-"
+            :default-time="['00:00:00', '23:59:59']"
+            value-format="yyyy-MM-dd"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+          >
           </el-date-picker>
         </div>
         <div class="label">服务状态：</div>
         <div>
-          <el-select v-model="serviceStatus" clearable filterable placeholder="请选择" class="div-inp">
-            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+          <el-select
+            v-model="serviceStatus"
+            clearable
+            filterable
+            placeholder="请选择"
+            class="div-inp"
+          >
+            <el-option
+              v-for="item in options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            >
             </el-option>
           </el-select>
         </div>
 
         <div class="div-lab">
           <div class="label" style="line-height: 30px">地区：</div>
-          <el-cascader :props="props1" @change="locationsChange1" :options="addressOptions" placeholder="省/市"
-            size="small" separator="/" v-model="area" filterable clearable></el-cascader>
+          <el-cascader
+            :props="props1"
+            @change="locationsChange1"
+            :options="addressOptions"
+            placeholder="省/市"
+            size="small"
+            separator="/"
+            v-model="area"
+            filterable
+            clearable
+          ></el-cascader>
         </div>
       </div>
       <div class="app-titel" style="margin-top: 15px">
         <div class="label">代理商名称：</div>
         <div>
-          <el-input class="div-inp" maxlength="30" placeholder="代理商名称" clearable v-model="agentName"></el-input>
+          <el-input
+            class="div-inp"
+            maxlength="30"
+            placeholder="代理商名称"
+            clearable
+            v-model="agentName"
+          ></el-input>
         </div>
         <div class="label">运营人员：</div>
         <div>
           <!-- <el-input maxlength="10" class="div-inp" clearable v-model="operationalName"></el-input> -->
-          <el-select v-model="operationalId" placeholder="请选择" class="div-inp" filterable clearable>
-            <el-option v-for="item in operaList" :key="item.accountId" :label="item.name" :value="item.accountId">
+          <el-select
+            v-model="operationalId"
+            placeholder="请选择"
+            class="div-inp"
+            filterable
+            clearable
+          >
+            <el-option
+              v-for="item in operaList"
+              :key="item.accountId"
+              :label="item.name"
+              :value="item.accountId"
+            >
             </el-option>
           </el-select>
         </div>
       </div>
-      <div style="display:flex;justify-content: space-between;align-items: center;padding: 0 20px;">
+      <div
+        style="
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          padding: 0 20px;
+        "
+      >
         <div class="app-titel" style="margin-top: 15px">
-        <div>
-          <el-button @click="Screening()" type="primary">筛选</el-button>
+          <div>
+            <el-button @click="Screening()" type="primary">筛选</el-button>
+          </div>
+          <div style="margin-left: 20px">
+            <el-button @click="Screeningofempty()" type="text"
+              >清空筛选条件</el-button
+            >
+          </div>
         </div>
-        <div style="margin-left: 20px">
-          <el-button @click="Screeningofempty()" type="text">清空筛选条件</el-button>
+        <div>
+          <el-button v-if="cus_ag_add" @click="infoadd()" type="primary"
+            >新增</el-button
+          >
         </div>
       </div>
-      <div>
-          <el-button v-if="cus_ag_add" @click="infoadd()" type="primary">新增</el-button>
-      </div>
-      </div>
-      
     </div>
 
     <!-- 表格 -->
     <div class="cen-tab">
-      <el-table ref="table" :header-cell-style="{background:'#F5F7FA',color:'#333333'}" :data="tableData" height="500px" stripe style="width: 100%">
-        <el-table-column :show-overflow-tooltip="true" width="120" prop="agentName" label="代理商" align="center">
-        </el-table-column>
-        <el-table-column :show-overflow-tooltip="true" width="140" prop="provinceName,cityName" label="地区"
-          align="center">
-          <template slot-scope="scope">
-            {{ scope.row.provinceName }}{{ scope.row.cityName }}
-          </template>
-        </el-table-column>
-        <el-table-column width="140" prop="linkman" label="联系人信息" align="center">
-          <template slot-scope="{ row }">
-            {{ row.linkman || "-" }}-{{ row.linkmanPhone || "-" }}
-          </template>
-        </el-table-column>
-
-        <el-table-column :show-overflow-tooltip="true" width="140" prop="operationalName" label="系统运营" align="center">
-        <template slot-scope="{ row }">
-              <span> {{row.operationalName || "-"}}</span>
-          </template>
-        </el-table-column>
-        <el-table-column prop="managerPhone" label="管理员账号" width="120" align="center">
-        </el-table-column>
-        <el-table-column prop="createTime" label="添加日期" width="100" align="center">
-          <template slot-scope="{ row }">
-            <span>{{ row.createTime.substr(0, 10) }}</span>
-          </template>
-        </el-table-column>
-
-        <el-table-column prop="contractStartDate" label="合同开始日期" width="100" align="center">
-        </el-table-column>
-        <el-table-column prop="contractEndDate" label="合同结束日期" width="100" align="center">
-        </el-table-column>
-        <!-- <el-table-column
-            prop="residueTime"
-            label="剩余天数"
-             align="center">
-          </el-table-column> -->
-        <el-table-column label="服务状态" width="150" align="center">
-          <template slot-scope="scope">
-            <!-- <div v-if="scope.row.residueTime >0&&scope.row.lockFlag==0">在服务期内({{scope.row.residueTime*1>=0?scope.row.residueTime:scope.row.residueTime*-1}})</div>
-                   <div v-if="scope.row.residueTime <=0&&scope.row.lockFlag==0">过期({{scope.row.residueTime*1>=0?scope.row.residueTime:scope.row.residueTime*-1}})</div>
-                   <div v-if="scope.row.lockFlag==1">禁用</div> -->
-            <div v-if="scope.row.residueTime > 0">
-              服务中({{
-                  scope.row.residueTime * 1 >= 0
-                    ? scope.row.residueTime
-                    : scope.row.residueTime * -1
-              }})
-            </div>
-            <div v-if="scope.row.residueTime <= 0">
-              过期({{
-                  scope.row.residueTime * 1 >= 0
-                    ? scope.row.residueTime
-                    : scope.row.residueTime * -1
-              }})
-            </div>
-          </template>
-        </el-table-column>
-        <el-table-column prop="lockFlag" label="状态" align="center">
-          <template slot-scope="{ row }">
-            {{ row.lockFlag == 1 ? "禁用" : "启用" }}
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" align="center" fixed="right" width="200">
-          <template slot-scope="scope">
-            <el-button type="text" v-if="cus_ag_edit" size="small" @click="infoeditor(scope.row)">编辑</el-button>
-            <el-button type="text" v-if="cus_ag_change" size="small" @click="inforeplace(scope.row)">更换账号</el-button>
-            <el-dropdown>
-              <el-button type="text" size="small" style="margin-left:10px;">更多</el-button>
-              <el-dropdown-menu slot="dropdown">
-                <el-dropdown-item>
-                  <el-button type="text" v-if="cus_ag_del" size="small" @click="toinifodelete(scope)">删除</el-button>
-                </el-dropdown-item>
-                <el-dropdown-item>
-                  <el-button type="text" v-if="cus_ag_manage" size="small" @click="editOpera(scope.row)">系统运营
-                  </el-button>
-                </el-dropdown-item>
-                <el-dropdown-item>
-                  <el-button type="text" v-if="cus_ag_open" size="small" @click="toDisable(scope.row)">{{
-                      scope.row.lockFlag == 0 ? "禁用" : "启用"
-                  }}</el-button>
-                </el-dropdown-item>
-              </el-dropdown-menu>
-            </el-dropdown>
-          </template>
-        </el-table-column>
-      </el-table>
-      <div style="display: flex; justify-content: flex-end; margin-top: 10px">
-        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
-          :current-page="currentPage4" :page-sizes="[10,20,30,40,50,100]" :page-size="pageSize"
-          layout="total, sizes, prev, pager, next, jumper" :total="total">
-        </el-pagination>
-      </div>
+      <avue-crud
+        ref="crud"
+        :page.sync="page"
+        :data="tableData"
+        :table-loading="tableLoading"
+        :option="tableOption"
+        :show-column.sync="showColumn"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      >
+        <template slot-scope="{ row }" slot="menu">
+          <el-button
+            type="text"
+            v-if="cus_ag_edit"
+            size="small"
+            @click="infoeditor(row)"
+            >编辑</el-button
+          >
+          <el-button
+            type="text"
+            v-if="cus_ag_change"
+            size="small"
+            @click="inforeplace(row)"
+            >更换账号</el-button
+          >
+          <el-dropdown>
+            <el-button type="text" size="small" style="margin-left: 10px"
+              >更多</el-button
+            >
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item>
+                <el-button
+                  type="text"
+                  v-if="cus_ag_del"
+                  size="small"
+                  @click="toinifodelete(row)"
+                  >删除</el-button
+                >
+              </el-dropdown-item>
+              <el-dropdown-item>
+                <el-button
+                  type="text"
+                  v-if="cus_ag_manage"
+                  size="small"
+                  @click="editOpera(row)"
+                  >系统运营
+                </el-button>
+              </el-dropdown-item>
+              <el-dropdown-item>
+                <el-button
+                  type="text"
+                  v-if="cus_ag_open"
+                  size="small"
+                  @click="toDisable(row)"
+                  >{{ row.lockFlag == 0 ? "禁用" : "启用" }}</el-button
+                >
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+        </template>
+      </avue-crud>
     </div>
 
-    <el-dialog title="新增代理" :visible.sync="dialogVisible" @close="reset1" :center="true" width="600px">
-      <el-form :model="addagentobj" label-position="labelPosition" :rules="rules" ref="addagentobj" label-width="140px"
-        style="width: 80%; margin: 0 auto">
+    <el-dialog
+      title="新增代理"
+      :visible.sync="dialogVisible"
+      @close="reset1"
+      :center="true"
+      width="600px"
+    >
+      <el-form
+        :model="addagentobj"
+        label-position="labelPosition"
+        :rules="rules"
+        ref="addagentobj"
+        label-width="140px"
+        style="width: 80%; margin: 0 auto"
+      >
         <el-form-item label="代理商名称：" prop="agentName">
-          <el-input v-model="addagentobj.agentName" placeholder="代理商名称" maxlength="30" clearable></el-input>
+          <el-input
+            v-model="addagentobj.agentName"
+            placeholder="代理商名称"
+            maxlength="30"
+            clearable
+          ></el-input>
         </el-form-item>
         <el-form-item label="合同起止日期：" prop="rulestimelist">
-          <el-date-picker v-model="addagentobj.rulestimelist" style="width:100%" @change="confirmtime2()" type="daterange"
-            range-separator="-" :default-time="['00:00:00', '23:59:59']" :clearable="false" value-format="yyyy-MM-dd"
-            start-placeholder="开始日期" end-placeholder="结束日期">
+          <el-date-picker
+            v-model="addagentobj.rulestimelist"
+            style="width: 100%"
+            @change="confirmtime2()"
+            type="daterange"
+            range-separator="-"
+            :default-time="['00:00:00', '23:59:59']"
+            :clearable="false"
+            value-format="yyyy-MM-dd"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+          >
           </el-date-picker>
         </el-form-item>
         <el-form-item label="联系人：" prop="linkman">
-          <el-input v-model="addagentobj.linkman" placeholder="联系人" maxlength="20" clearable></el-input>
+          <el-input
+            v-model="addagentobj.linkman"
+            placeholder="联系人"
+            maxlength="20"
+            clearable
+          ></el-input>
         </el-form-item>
         <el-form-item label="联系手机：" prop="linkmanPhone">
-          <el-input v-model="addagentobj.linkmanPhone" placeholder="联系手机" type="tel" maxlength="11"
-            onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)));"></el-input>
+          <el-input
+            v-model="addagentobj.linkmanPhone"
+            placeholder="联系手机"
+            type="tel"
+            maxlength="11"
+            onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)));"
+          ></el-input>
         </el-form-item>
 
-        <!-- <el-form-item label="省：" prop="provinceId">
-            <el-select v-model="addagentobj.provinceId" placeholder="请选择" @change='clickprovinceId()'>
-              <el-option
-                v-for="item in optionsparentId"
-                :key="item.value"
-                :label="item.name"
-                :value="item.id"
-              >
-              </el-option>
-          </el-select>
-          </el-form-item>
-          <el-form-item label="市：" prop="cityId">
-            <el-select v-model="addagentobj.cityId" placeholder="请选择">
-              <el-option
-                v-for="item in optionscityId"
-                :key="item.value"
-                :label="item.name"
-                :value="item.id"
-              >
-              </el-option>
-          </el-select>
-          </el-form-item> -->
-
         <el-form-item label="地区" prop="provinceId">
-          <el-cascader :props="props" style="width:100%" @change="locationsChange" :options="addressOptions" placeholder="省/市" size="small"
-            separator="/" v-model="addagentobj.area" clearable></el-cascader>
+          <el-cascader
+            :props="props"
+            style="width: 100%"
+            @change="locationsChange"
+            :options="addressOptions"
+            placeholder="省/市"
+            size="small"
+            separator="/"
+            v-model="addagentobj.area"
+            clearable
+          ></el-cascader>
         </el-form-item>
         <el-form-item label="详细地址：" prop="address">
-          <el-input v-model="addagentobj.address" placeholder="详细地址" type="textarea" maxlength="60" show-word-limit></el-input>
+          <el-input
+            v-model="addagentobj.address"
+            placeholder="详细地址"
+            type="textarea"
+            maxlength="60"
+            show-word-limit
+          ></el-input>
         </el-form-item>
-        <!-- <el-form-item label="运营人员：" prop="operationalPeople">
-              <el-select v-model="addagentobj.operationalPeople" placeholder="请选择">
-                  <el-option
-                    v-for="item in optionsoperationalPeople"
-                    :key="item.value"
-                    :label="item.name"
-                    :value="item.accountId"
-                  >
-                  </el-option>
-              </el-select>
-
-          </el-form-item> -->
         <el-form-item label="管理员账号：" prop="managerPhone">
-          <el-input auto-complete="new-password" placeholder="管理员账号" v-model="addagentobj.managerPhone" maxlength="11"
-            onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)));"></el-input>
+          <el-input
+            auto-complete="new-password"
+            placeholder="管理员账号"
+            v-model="addagentobj.managerPhone"
+            maxlength="11"
+            onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)));"
+          ></el-input>
         </el-form-item>
         <el-form-item label="密码：" prop="managerPassword">
-          <el-input auto-complete="new-password" placeholder="密码" :disabled="passFlag" show-password
-            v-model="addagentobj.managerPassword"></el-input>
+          <el-input
+            auto-complete="new-password"
+            placeholder="密码"
+            :disabled="passFlag"
+            show-password
+            v-model="addagentobj.managerPassword"
+          ></el-input>
         </el-form-item>
       </el-form>
-      <div slot="footer" class="dialog-footer" style="border-top:1px solid #eee;padding-top: 20px;display: flex;justify-content: end;">
+      <div
+        slot="footer"
+        class="dialog-footer"
+        style="
+          border-top: 1px solid #eee;
+          padding-top: 20px;
+          display: flex;
+          justify-content: end;
+        "
+      >
         <el-button @click="dialogVisible = false">取 消</el-button>
-        <el-button type="primary" @click="add()" :loading="loadingFlag">保存</el-button>
+        <el-button type="primary" @click="add()" :loading="loadingFlag"
+          >保存</el-button
+        >
       </div>
     </el-dialog>
 
-    <el-dialog title="编辑" :visible.sync="dialogVisible2" @close="reset2" :center="true" width="600px">
-      <el-form :model="editoragentobj" label-position="labelPosition" :rules="editorrules" ref="editoragentobj"
-        label-width="140px" style="width: 80%; margin: 0 auto">
+    <el-dialog
+      title="编辑"
+      :visible.sync="dialogVisible2"
+      @close="reset2"
+      :center="true"
+      width="600px"
+    >
+      <el-form
+        :model="editoragentobj"
+        label-position="labelPosition"
+        :rules="editorrules"
+        ref="editoragentobj"
+        label-width="140px"
+        style="width: 80%; margin: 0 auto"
+      >
         <el-form-item label="代理商名称：" prop="agentName">
-          <el-input v-model="editoragentobj.agentName" placeholder="代理商名称" maxlength="30" clearable></el-input>
+          <el-input
+            v-model="editoragentobj.agentName"
+            placeholder="代理商名称"
+            maxlength="30"
+            clearable
+          ></el-input>
         </el-form-item>
         <el-form-item label="合同起止日期：" prop="rulestimelist">
-          <el-date-picker v-model="editoragentobj.rulestimelist" style="width:100%" @change="confirmtime3()" type="daterange"
-            range-separator="-" :default-time="['00:00:00', '23:59:59']" :clearable="false" value-format="yyyy-MM-dd"
-            start-placeholder="开始日期" end-placeholder="结束日期">
+          <el-date-picker
+            v-model="editoragentobj.rulestimelist"
+            style="width: 100%"
+            @change="confirmtime3()"
+            type="daterange"
+            range-separator="-"
+            :default-time="['00:00:00', '23:59:59']"
+            :clearable="false"
+            value-format="yyyy-MM-dd"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+          >
           </el-date-picker>
         </el-form-item>
         <el-form-item label="联系人：" prop="linkman">
-          <el-input v-model="editoragentobj.linkman" placeholder="联系人" maxlength="20" clearable></el-input>
+          <el-input
+            v-model="editoragentobj.linkman"
+            placeholder="联系人"
+            maxlength="20"
+            clearable
+          ></el-input>
         </el-form-item>
         <el-form-item label="联系手机：" prop="linkmanPhone">
-          <el-input v-model="editoragentobj.linkmanPhone" placeholder="联系手机" type="tel" maxlength="11"
-            onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)));"></el-input>
+          <el-input
+            v-model="editoragentobj.linkmanPhone"
+            placeholder="联系手机"
+            type="tel"
+            maxlength="11"
+            onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)));"
+          ></el-input>
         </el-form-item>
-
-        <el-form-item label="地区" prop="provinceId" >
-          <el-cascader :props="props" @change="locationsChange" style="width:100%" :options="addressOptions" placeholder="省/市" size="small"
-            separator="/" v-model="editoragentobj.area" clearable></el-cascader>
+        <el-form-item label="地区" prop="provinceId">
+          <el-cascader
+            :props="props"
+            @change="locationsChange"
+            style="width: 100%"
+            :options="addressOptions"
+            placeholder="省/市"
+            size="small"
+            separator="/"
+            v-model="editoragentobj.area"
+            clearable
+          ></el-cascader>
         </el-form-item>
-        <!-- <el-form-item label="省：" prop="provinceId">
-            <el-select v-model="editoragentobj.provinceId" placeholder="请选择" @change='clickprovinceId3()'>
-              <el-option
-                v-for="item in optionsparentId"
-                :key="item.value"
-                :label="item.name"
-                :value="item.id" >
-              </el-option>
-          </el-select>
-          </el-form-item>
-          <el-form-item label="市：" prop="cityId">
-            <el-select v-model="editoragentobj.cityId" placeholder="请选择">
-              <el-option
-                v-for="item in optionscityId"
-                :key="item.value"
-                :label="item.name"
-                :value="item.id" >
-              </el-option>
-          </el-select>
-          </el-form-item> -->
         <el-form-item label="详细地址：" prop="address">
-          <el-input v-model="editoragentobj.address" placeholder="详细地址" type="textarea" maxlength="60" show-word-limit></el-input>
+          <el-input
+            v-model="editoragentobj.address"
+            placeholder="详细地址"
+            type="textarea"
+            maxlength="60"
+            show-word-limit
+          ></el-input>
         </el-form-item>
-        <!-- <el-form-item label="运营人员：" prop="operationalPeople">
-              <el-select v-model="editoragentobj.operationalPeople" placeholder="请选择">
-                  <el-option
-                    v-for="item in optionsoperationalPeople"
-                    :key="item.value"
-                    :label="item.name"
-                    :value="item.accountId"
-                  >
-                  </el-option>
-              </el-select>
-          </el-form-item> -->
       </el-form>
-      <div slot="footer" class="dialog-footer" style="border-top:1px solid #eee;padding-top: 20px;display: flex;justify-content: end;">
+      <div
+        slot="footer"
+        class="dialog-footer"
+        style="
+          border-top: 1px solid #eee;
+          padding-top: 20px;
+          display: flex;
+          justify-content: end;
+        "
+      >
         <el-button @click="dialogVisible2 = false">取 消</el-button>
-        <el-button type="primary" @click="editor()" :loading="loadingFlag">保存</el-button>
+        <el-button type="primary" @click="editor()" :loading="loadingFlag"
+          >保存</el-button
+        >
       </div>
     </el-dialog>
 
-    <el-dialog title="更换账号" :visible.sync="dialogVisible3" @close="replaceClose" :center="true">
-      <el-form :model="replaceagentobj" label-position="labelPosition" :rules="ruleser" ref="replaceagentobj"
-        label-width="140px" style="width: 60%; margin: 0 auto">
+    <el-dialog
+      title="更换账号"
+      :visible.sync="dialogVisible3"
+      @close="replaceClose"
+      :center="true"
+    >
+      <el-form
+        :model="replaceagentobj"
+        label-position="labelPosition"
+        :rules="ruleser"
+        ref="replaceagentobj"
+        label-width="140px"
+        style="width: 60%; margin: 0 auto"
+      >
         <el-form-item label="管理员账号：" prop="managerPhone">
-          <el-input maxlength="11" placeholder="管理员账号" v-model="replaceagentobj.managerPhone"></el-input>
+          <el-input
+            maxlength="11"
+            placeholder="管理员账号"
+            v-model="replaceagentobj.managerPhone"
+          ></el-input>
         </el-form-item>
         <el-form-item label="密码：" prop="managerPassword">
-          <el-input show-password  placeholder="密码" :disabled="passFlag" v-model="replaceagentobj.managerPassword"></el-input>
+          <el-input
+            show-password
+            placeholder="密码"
+            :disabled="passFlag"
+            v-model="replaceagentobj.managerPassword"
+          ></el-input>
         </el-form-item>
       </el-form>
-      <div slot="footer" class="dialog-footer" style="border-top:1px solid #eee;padding-top: 20px;display: flex;justify-content: end;">
+      <div
+        slot="footer"
+        class="dialog-footer"
+        style="
+          border-top: 1px solid #eee;
+          padding-top: 20px;
+          display: flex;
+          justify-content: end;
+        "
+      >
         <el-button @click="dialogVisible3 = false">取 消</el-button>
-        <el-button type="primary" @click="replace()" :loading="loadingFlag">保存</el-button>
+        <el-button type="primary" @click="replace()" :loading="loadingFlag"
+          >保存</el-button
+        >
       </div>
     </el-dialog>
 
     <el-dialog title="编辑运营人员" :visible.sync="operaVisible" :center="true">
-      <el-form :model="operaForm" label-position="labelPosition" :rules="operaRules" ref="operaForm"
-        label-width="140px">
+      <el-form
+        :model="operaForm"
+        label-position="labelPosition"
+        :rules="operaRules"
+        ref="operaForm"
+        label-width="140px"
+      >
         <el-form-item label="运营人员：" prop="operationalPeople">
-          <el-select v-model="operaForm.operationalPeople" style="width: 80%" filterable multiple placeholder="请选择">
-            <el-option v-for="item in optionsoperationalPeople" :key="item.value" :label="item.name"
-              :value="item.accountId">
+          <el-select
+            v-model="operaForm.operationalPeople"
+            style="width: 80%"
+            filterable
+            multiple
+            placeholder="请选择"
+          >
+            <el-option
+              v-for="item in optionsoperationalPeople"
+              :key="item.value"
+              :label="item.name"
+              :value="item.accountId"
+            >
             </el-option>
           </el-select>
         </el-form-item>
       </el-form>
-      <div slot="footer" class="dialog-footer" style="border-top:1px solid #eee;padding-top: 20px;display: flex;justify-content: end;">
+      <div
+        slot="footer"
+        class="dialog-footer"
+        style="
+          border-top: 1px solid #eee;
+          padding-top: 20px;
+          display: flex;
+          justify-content: end;
+        "
+      >
         <el-button @click="operaVisible = false">取 消</el-button>
-        <el-button type="primary" :loading="loadingFlag" @click="saveOpera()">保存</el-button>
+        <el-button type="primary" :loading="loadingFlag" @click="saveOpera()"
+          >保存</el-button
+        >
       </div>
     </el-dialog>
   </div>
@@ -409,6 +556,17 @@ export default {
       }
     };
     return {
+      tableIdName: "CustomerAgentManagement", // 当前页面需要的变量
+      tableOption: this.$tableOption.CustomerAgentManagement, // 当前table配置项
+      tableLoading: false, // 是否显示加载中
+      showColumn: [], // 监听的显示列的变量
+      page: {
+        total: 0, // 总页数
+        currentPage: 1, // 当前页数
+        pageSize: 10, // 每页显示多少条
+      },
+
+
       props: {
         lazy: true,
         async lazyLoad(node, resolve) {
@@ -498,9 +656,7 @@ export default {
       tableData: [],
       addressOptions: [],
       currentPage4: 1,
-      total: 0, //总条数
-      pageNum: 1,
-      pageSize: 10,
+
       contractStartDate: "", //开始时间
       contractEndDate: "", //结束时间
       serviceStatus: "", //状态
@@ -515,7 +671,6 @@ export default {
         area: [],
         cityId: "", // 市id
         address: "", // 详细地址
-        // operationalPeople:'',// 运营人员id
         managerPhone: "", // 管理员账号
         managerPassword: "", // 管理员账号密码
         linkmanPhone: "", // 联系人手机号
@@ -530,7 +685,6 @@ export default {
         provinceId: "", // 省id
         cityId: "", // 市id
         address: "", // 详细地址
-        // operationalPeople:'',// 运营人员id
         linkmanPhone: "", // 联系人手机号
         rulestimelist: [],
       },
@@ -541,19 +695,10 @@ export default {
         rulestimelist: [
           { required: true, message: "请选择时间", trigger: "blur" },
         ],
-        linkman: [
-          // { required: true, message: '请输入联系人名称', trigger: 'blur' },
-        ],
         provinceId: [
           { required: false, message: "请输入选择省", trigger: "blur" },
         ],
         cityId: [{ required: false, message: "请输入选择市", trigger: "blur" }],
-        address: [
-          // { required: true, message: '请输入详细地址', trigger: 'blur' },
-        ],
-        // operationalPeople: [
-        //   { required: true, message: '请选择运营人员', trigger: 'blur' },
-        // ],
         managerPhone: [
           { required: true, message: "请输入管理员账号", trigger: "blur" },
           { validator: validatePass, trigger: "blur" },
@@ -568,8 +713,6 @@ export default {
           },
         ],
         linkmanPhone: [
-          // { required: true, message: '请输入联系人手机号', trigger: 'blur' },
-          // { min: 11, max: 11, message: '请输入手机号', trigger: 'blur' }
           { validator: validatePass1, trigger: "blur" },
         ],
       },
@@ -580,9 +723,6 @@ export default {
         rulestimelist: [
           { required: true, message: "请选择时间", trigger: "blur" },
         ],
-        linkman: [
-          // { required: true, message: '请输入联系人名称', trigger: 'blur' },
-        ],
         provinceId: [
           { required: false, message: "请输入选择省", trigger: "blur" },
         ],
@@ -590,12 +730,7 @@ export default {
         address: [
           { required: false, message: "请输入详细地址", trigger: "blur" },
         ],
-        // operationalPeople: [
-        //   { required: true, message: '请选择运营人员', trigger: 'blur' },
-        // ],
         linkmanPhone: [
-          // { required: true, message: '请输入联系人手机号', trigger: 'blur' },
-          // { min: 11, max: 11, message: '请输入手机号', trigger: 'blur' }
           { validator: validatePass1, trigger: "blur" },
         ],
       },
@@ -635,7 +770,19 @@ export default {
   computed: {
     ...mapGetters(["permissions"]),
   },
+  
+  watch: {
+    showColumn(nowV) {
+      let params = {
+        tableIdName: this.tableIdName,
+        optionData: nowV,
+      };
+      this.$db.upDate(params);
+    },
+  },
   created() {
+    // 获取显隐的列表
+    this.setTableOption();
     this.cus_ag_add = this.permissions["cus_ag_add"];
     this.cus_ag_edit = this.permissions["cus_ag_edit"];
     this.cus_ag_change = this.permissions["cus_ag_change"];
@@ -652,11 +799,19 @@ export default {
     }
     // 获取运营人员
     this.getOperaList();
-    // 获取地区列表
-    // this.getCityList()
     this.getAgentList();
   },
   methods: {
+
+    // 获取当前页面的显隐
+    setTableOption() {
+      this.$db.getDataByKey(this.tableIdName).then((res) => {
+        if (res.tableIdName == this.tableIdName) {
+          this.showColumn = res.optionData;
+        }
+      });
+    },
+
     getOperaList() {
       if (this.orgType == 1) {
         this.$api.http
@@ -664,28 +819,22 @@ export default {
             agentId: localStorage.getItem("agentId"),
           })
           .then((res) => {
-            // console.log(1);
             this.operaList = res.data;
-            // this.operaVisible = true;
           });
       } else {
         this.$api.http.getAllOperationsStaff().then((res) => {
           this.operaList = res.data;
-          // this.operaVisible = true;
-          // console.log(2);
         });
       }
     },
     getCityList() {
       this.$api.api.getAreaList({ parentId: 0 }).then((res) => {
-        // console.log(res,'地区列表');
         this.areaList = res.data;
       });
     },
     saveOpera() {
       this.$refs.operaForm.validate((valid) => {
         if (valid) {
-          // console.log(valid,this.operaForm);
           this.loadingFlag = true;
           this.$api.api
             .zkoperationrecord({
@@ -806,10 +955,6 @@ export default {
     },
     //确认编辑
     editor() {
-      //   if(!this.resetFlag){
-      //     this.$message.error('平台用户与项目用户不能重复添加！')
-      //     return
-      // }
       this.$refs.editoragentobj.validate((valid) => {
         if (valid) {
           if (!this.resetFlag) {
@@ -977,7 +1122,7 @@ export default {
         type: "warning",
       })
         .then(() => {
-          this.$api.http.delAgent({ id: item.row.id }).then((res) => {
+          this.$api.http.delAgent({ id: item.id }).then((res) => {
             if (res.code == 0) {
               this.$message({
                 type: "success",
@@ -1053,7 +1198,7 @@ export default {
       this.provinceId = "";
       this.cityId = "";
       this.operationalId = "";
-      this.pageNum = 1;
+      this.page.currentPage = 1;
       this.area = [];
       this.getAgentList();
     },
@@ -1066,8 +1211,8 @@ export default {
       this.tableData = [];
       this.$api.http
         .getAgentList({
-          current: this.pageNum,
-          size: this.pageSize,
+          current: this.page.currentPage,
+          size: this.page.pageSize,
           contractStartDate: this.contractStartDate,
           contractEndDate: this.contractEndDate,
           serviceStatus: this.serviceStatus,
@@ -1079,16 +1224,16 @@ export default {
         })
         .then((res) => {
           this.tableData = res.data.records;
-          this.total = res.data.total;
-          
+          this.page.total = res.data.total;
+
           // 表格中设置ref属性，在数据渲染之后或者updated()之后
           this.$nextTick(() => {
-            this.$refs.table.doLayout();
+            this.$refs.crud.doLayout();
           });
         });
     },
     handleSizeChange(val) {
-      this.pageSize = val;
+      this.page.pageSize = val;
       this.getAgentList();
     },
     locationsChange(e) {
@@ -1109,7 +1254,7 @@ export default {
       this.cityId = e[1];
     },
     handleCurrentChange(val) {
-      this.pageNum = val;
+      this.page.currentPage = val;
       this.getAgentList();
     },
   },
@@ -1186,27 +1331,27 @@ export default {
 .div-inp {
   width: 250px;
 }
-/deep/ .el-table__header-wrapper{
-  thead{
-    tr{
-      th{
-        background: #F5F7FA;
+/deep/ .el-table__header-wrapper {
+  thead {
+    tr {
+      th {
+        background: #f5f7fa;
         color: #333333;
       }
     }
   }
 }
-/deep/ .el-dialog--center{
+/deep/ .el-dialog--center {
   border-radius: 8px;
-  .el-dialog__title{
+  .el-dialog__title {
     font-weight: bold;
   }
 }
-/deep/ .el-button--primary{
-  background: #2671E2 !important;
-  border: 1px solid #2671E2 !important;
+/deep/ .el-button--primary {
+  background: #2671e2 !important;
+  border: 1px solid #2671e2 !important;
 }
-/deep/ .el-button--text{
-  color: #2671E2;
+/deep/ .el-button--text {
+  color: #2671e2;
 }
 </style>

src/views/Customer/CompanyRecord.vue

@@ -9,46 +9,56 @@
         </div>
         <div class="label">公司名称：</div>
         <div>
-          <el-input maxlength="30" clearable v-model="name" placeholder="公司名称"></el-input>
-        </div>
-        <!-- <div v-if="orgType == 0" class="label">运营人员：</div>
-        <div v-if="orgType == 0">
           <el-input
-            maxlength="10"
+            maxlength="30"
             clearable
-            v-model="operationStaffName"
+            v-model="name"
+            placeholder="公司名称"
           ></el-input>
-        </div> -->
+        </div>
         <div class="label">运营人员：</div>
         <div>
           <!-- <el-input maxlength="10" class="div-inp" clearable v-model="operationalName"></el-input> -->
-          <el-select v-model="operationStaffId" placeholder="请选择" class="div-inp" filterable clearable>
-            <el-option v-for="item in operaList" :key="item.accountId" :label="item.name" :value="item.accountId">
+          <el-select
+            v-model="operationStaffId"
+            placeholder="请选择"
+            class="div-inp"
+            filterable
+            clearable
+          >
+            <el-option
+              v-for="item in operaList"
+              :key="item.accountId"
+              :label="item.name"
+              :value="item.accountId"
+            >
             </el-option>
           </el-select>
         </div>
         <div class="label" style="line-height: 30px; min-width: 80px">
           地区：
         </div>
-        <!-- <el-select
-          v-model="provinceId"
-          placeholder="请选择"
-          class="div-inp"
+        <el-cascader
+          :props="props1"
+          @change="locationsChange1"
+          :options="addressOptions"
+          placeholder="省/市"
+          size="small"
+          separator="/"
+          v-model="area"
           filterable
           clearable
-        >
-          <el-option
-            v-for="item in areaList"
-            :key="item.id"
-            :label="item.name"
-            :value="item.id"
-          >
-          </el-option>
-        </el-select> -->
-        <el-cascader :props="props1" @change="locationsChange1" :options="addressOptions" placeholder="省/市" size="small"
-          separator="/" v-model="area" filterable clearable></el-cascader>
+        ></el-cascader>
       </div>
-      <div style="display:flex;justify-content: space-between;align-items: center;margin-top: 15px;padding-right: 10px;">
+      <div
+        style="
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-top: 15px;
+          padding-right: 10px;
+        "
+      >
         <div class="app-titel">
           <div class="label" style="color: #ffffff">筛选相关：</div>
 
@@ -56,18 +66,92 @@
             <el-button @click="Screening()" type="primary">筛选</el-button>
           </div>
           <div style="margin-left: 20px">
-            <el-button @click="Screeningofempty()" type="text">清空筛选条件</el-button>
+            <el-button @click="Screeningofempty()" type="text"
+              >清空筛选条件</el-button
+            >
           </div>
         </div>
         <div>
-          <el-button v-if="cus_crd_add" @click="infoadd()" type="primary">新增</el-button>
+          <el-button v-if="cus_crd_add" @click="infoadd()" type="primary"
+            >新增</el-button
+          >
         </div>
       </div>
     </div>
 
     <!-- 表格 -->
     <div class="cen-tab">
-      <el-table ref="table" :header-cell-style="{background:'#F5F7FA',color:'#333333'}" height="572px" :data="tableData" stripe style="width: 100%">
+      <avue-crud
+        ref="crud"
+        :page.sync="page"
+        :data="tableData"
+        :table-loading="tableLoading"
+        :option="tableOption"
+        :show-column.sync="showColumn"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      >
+        <template slot-scope="{ row }" slot="menu">
+          <el-button
+            type="text"
+            v-if="cus_crd_edit"
+            size="small"
+            @click="infoeditor(row)"
+            >编辑</el-button
+          >
+          <el-button
+            type="text"
+            v-if="cus_crd_change"
+            size="small"
+            @click="inforeplace(row)"
+            >更换账号</el-button
+          >
+          <el-dropdown>
+            <el-button type="text" size="small" style="margin-left: 10px"
+              >更多</el-button
+            >
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item>
+                <el-button
+                  type="text"
+                  v-if="cus_crd_del"
+                  size="small"
+                  @click="toinifodelete(row)"
+                  >删除</el-button
+                >
+              </el-dropdown-item>
+              <el-dropdown-item>
+                <el-button
+                  type="text"
+                  size="small"
+                  v-if="cus_com_sys"
+                  @click="editOpera(row, 0)"
+                  >系统运营
+                </el-button>
+              </el-dropdown-item>
+              <el-dropdown-item>
+                <el-button
+                  type="text"
+                  v-if="cus_crd_bindAgent"
+                  size="small"
+                  @click="bindAgent(row)"
+                  >绑定代理商
+                </el-button>
+              </el-dropdown-item>
+              <el-dropdown-item>
+                <el-button
+                  type="text"
+                  v-if="cus_crd_open"
+                  size="small"
+                  @click="toDisable(row)"
+                  >{{ row.lockFlag == 0 ? "禁用" : "启用" }}</el-button
+                >
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+        </template>
+      </avue-crud>
+      <!-- <el-table ref="table" :header-cell-style="{background:'#F5F7FA',color:'#333333'}" height="572px" :data="tableData" stripe style="width: 100%">
         <el-table-column :show-overflow-tooltip="true" width="120px" prop="name" label="公司名称" align="center">
         </el-table-column>
         <el-table-column prop="operatorName" label="代理商" align="center">
@@ -121,205 +205,329 @@
                 </el-dropdown-item>
               </el-dropdown-menu>
             </el-dropdown>
-
-
-            <!-- <el-button  type="text" size="small"  @click="editOpera(scope.row,0)">管理系统运营</el-button>
-              <el-button  type="text" size="small"  @click="editOpera(scope.row,1)">绑定售后运营</el-button> -->
-
-
-
           </template>
         </el-table-column>
-      </el-table>
-      <div style="display: flex; justify-content: flex-end; margin-top: 10px">
+      </el-table> -->
+      <!-- <div style="display: flex; justify-content: flex-end; margin-top: 10px">
         <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
           :page-sizes="[10, 20,30,40, 50,100]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
         </el-pagination>
-      </div>
+      </div> -->
     </div>
 
-    <el-dialog title="新增公司" :visible.sync="dialogVisible" @close="reset1" :center="true" width="600px">
-      <el-form :model="addagentobj" label-position="labelPosition" :rules="rules" ref="addagentobj" label-width="140px"
-        style="width: 80%; margin: 0 auto">
-        <!-- <el-form-item label="代理商名称：" prop="agentId"> -->
-        <!-- <el-select v-model="addagentobj.agentId" placeholder="请选择" @change='clickagentId()'> -->
-        <!-- <el-select v-model="addagentobj.agentId" placeholder="请选择">
-                <el-option  v-for="item in optionsagentId" :key="item.value"  :label="item.agentName" :value="item.id" ></el-option>
-              </el-select> -->
-        <!-- </el-form-item> -->
+    <el-dialog
+      title="新增公司"
+      :visible.sync="dialogVisible"
+      @close="reset1"
+      :center="true"
+      width="600px"
+    >
+      <el-form
+        :model="addagentobj"
+        label-position="labelPosition"
+        :rules="rules"
+        ref="addagentobj"
+        label-width="140px"
+        style="width: 80%; margin: 0 auto"
+      >
         <el-form-item label="公司名称：" prop="name">
-          <el-input v-model="addagentobj.name" maxlength="60" placeholder="公司名称"></el-input>
+          <el-input
+            v-model="addagentobj.name"
+            maxlength="60"
+            placeholder="公司名称"
+          ></el-input>
         </el-form-item>
         <el-form-item label="联系人：" prop="contactPerson">
-          <el-input v-model="addagentobj.contactPerson" maxlength="20" placeholder="联系人"></el-input>
+          <el-input
+            v-model="addagentobj.contactPerson"
+            maxlength="20"
+            placeholder="联系人"
+          ></el-input>
         </el-form-item>
         <el-form-item label="联系手机：" prop="contactNumber">
-          <el-input v-model="addagentobj.contactNumber"
-          placeholder="联系手机"
-            onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)));" maxlength="11"></el-input>
+          <el-input
+            v-model="addagentobj.contactNumber"
+            placeholder="联系手机"
+            onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)));"
+            maxlength="11"
+          ></el-input>
         </el-form-item>
 
         <el-form-item label="地区" prop="provinceId">
-          <el-cascader :props="props" @change="locationsChange" style="width:100%" :options="addressOptions"
-            placeholder="省/市" size="small" separator="/" v-model="editoragentobj.area" clearable></el-cascader>
+          <el-cascader
+            :props="props"
+            @change="locationsChange"
+            style="width: 100%"
+            :options="addressOptions"
+            placeholder="省/市"
+            size="small"
+            separator="/"
+            v-model="editoragentobj.area"
+            clearable
+          ></el-cascader>
         </el-form-item>
-        <!-- <el-form-item label="省：" prop="provinceId">
-            <el-select v-model="addagentobj.provinceId" placeholder="请选择" @change='clickprovinceId()'>
-              <el-option v-for="item in optionsparentId" :key="item.value" :label="item.name" :value="item.id" >  </el-option>
-            </el-select>
-          </el-form-item>
-          <el-form-item label="市：" prop="cityId">
-            <el-select v-model="addagentobj.cityId" placeholder="请选择">
-              <el-option
-                v-for="item in optionscityId"
-                :key="item.value"
-                :label="item.name"
-                :value="item.id"
-              >
-              </el-option>
-          </el-select>
-          </el-form-item> -->
         <el-form-item label="详细地址：" prop="address">
-          <el-input v-model="addagentobj.address" placeholder="详细地址" type="textarea" maxlength="60" show-word-limit></el-input>
+          <el-input
+            v-model="addagentobj.address"
+            placeholder="详细地址"
+            type="textarea"
+            maxlength="60"
+            show-word-limit
+          ></el-input>
         </el-form-item>
-        <!-- <el-form-item label="运营人员：" prop="operationStaff">
-              <el-select v-model="addagentobj.operationStaff" placeholder="请选择">
-                  <el-option
-                    v-for="item in optionsoperationStaff"
-                    :key="item.value"
-                    :label="item.name"
-                    :value="item.accountId"
-                  >
-                  </el-option>
-              </el-select>
-
-          </el-form-item> -->
         <el-form-item label="管理员账号：" prop="managerPhone">
-          <el-input auto-complete="new-password" placeholder="管理员账号" maxlength="11" v-model="addagentobj.managerPhone"></el-input>
+          <el-input
+            auto-complete="new-password"
+            placeholder="管理员账号"
+            maxlength="11"
+            v-model="addagentobj.managerPhone"
+          ></el-input>
         </el-form-item>
         <el-form-item label="密码：" prop="managerPassword">
-          <el-input auto-complete="new-password" show-password :disabled="passFlag"
-            v-model="addagentobj.managerPassword" placeholder="密码"></el-input>
+          <el-input
+            auto-complete="new-password"
+            show-password
+            :disabled="passFlag"
+            v-model="addagentobj.managerPassword"
+            placeholder="密码"
+          ></el-input>
         </el-form-item>
       </el-form>
-      <div slot="footer" class="dialog-footer"
-        style="border-top:1px solid #eee;padding-top: 20px;display: flex;justify-content: end;">
+      <div
+        slot="footer"
+        class="dialog-footer"
+        style="
+          border-top: 1px solid #eee;
+          padding-top: 20px;
+          display: flex;
+          justify-content: end;
+        "
+      >
         <el-button @click="dialogVisible = false">取 消</el-button>
-        <el-button type="primary" :loading="loadingFlag" @click="add()">保存</el-button>
+        <el-button type="primary" :loading="loadingFlag" @click="add()"
+          >保存</el-button
+        >
       </div>
     </el-dialog>
 
-    <el-dialog title="编辑" :visible.sync="dialogVisible2" @close="reset2" :center="true" width="600px">
-      <el-form :model="editoragentobj" label-position="labelPosition" :rules="editorrules" ref="editoragentobj"
-        label-width="140px" style="width: 80%; margin: 0 auto">
-        <!-- <el-form-item label="代理商名称：" prop="operator"> -->
-        <!-- <el-select v-model="editoragentobj.operator" placeholder="请选择" @change='clickagentId22()'> -->
-        <!-- <el-select v-model="editoragentobj.operator" placeholder="请选择">
-                <el-option  v-for="item in optionsagentId" :key="item.value"  :label="item.agentName" :value="item.id" ></el-option>
-              </el-select> -->
-        <!-- </el-form-item> -->
+    <el-dialog
+      title="编辑"
+      :visible.sync="dialogVisible2"
+      @close="reset2"
+      :center="true"
+      width="600px"
+    >
+      <el-form
+        :model="editoragentobj"
+        label-position="labelPosition"
+        :rules="editorrules"
+        ref="editoragentobj"
+        label-width="140px"
+        style="width: 80%; margin: 0 auto"
+      >
         <el-form-item label="公司名称：" prop="name">
-          <el-input v-model="editoragentobj.name" maxlength="60" placeholder="公司名称"></el-input>
+          <el-input
+            v-model="editoragentobj.name"
+            maxlength="60"
+            placeholder="公司名称"
+          ></el-input>
         </el-form-item>
         <el-form-item label="联系人：" prop="contactPerson">
-          <el-input v-model="editoragentobj.contactPerson" maxlength="20" placeholder="联系人"></el-input>
+          <el-input
+            v-model="editoragentobj.contactPerson"
+            maxlength="20"
+            placeholder="联系人"
+          ></el-input>
         </el-form-item>
         <el-form-item label="联系手机：" prop="contactNumber">
-          <el-input v-model="editoragentobj.contactNumber"
-          placeholder="联系手机"
-            onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)));" maxlength="11"></el-input>
+          <el-input
+            v-model="editoragentobj.contactNumber"
+            placeholder="联系手机"
+            onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)));"
+            maxlength="11"
+          ></el-input>
         </el-form-item>
 
         <el-form-item label="地区" prop="provinceId">
-          <el-cascader :props="props" style="width:100%" @change="locationsChange" :options="addressOptions"
-            placeholder="省/市" size="small" separator="/" v-model="editoragentobj.area" clearable></el-cascader>
+          <el-cascader
+            :props="props"
+            style="width: 100%"
+            @change="locationsChange"
+            :options="addressOptions"
+            placeholder="省/市"
+            size="small"
+            separator="/"
+            v-model="editoragentobj.area"
+            clearable
+          ></el-cascader>
         </el-form-item>
-        <!-- <el-form-item label="省：" prop="provinceId">
-            <el-select v-model="editoragentobj.provinceId" placeholder="请选择" @change='clickprovinceId3()'>
-              <el-option v-for="item in optionsparentId" :key="item.value" :label="item.name" :value="item.id" >  </el-option>
-            </el-select>
-          </el-form-item>
-          <el-form-item label="市：" prop="cityId">
-            <el-select v-model="editoragentobj.cityId" placeholder="请选择">
-              <el-option
-                v-for="item in optionscityId"
-                :key="item.value"
-                :label="item.name"
-                :value="item.id"
-              >
-              </el-option>
-          </el-select>
-          </el-form-item> -->
         <el-form-item label="详细地址：" prop="address">
-          <el-input v-model="editoragentobj.address" placeholder="详细地址" type="textarea" maxlength="60" show-word-limit></el-input>
+          <el-input
+            v-model="editoragentobj.address"
+            placeholder="详细地址"
+            type="textarea"
+            maxlength="60"
+            show-word-limit
+          ></el-input>
         </el-form-item>
-        <!-- <el-form-item label="运营人员：" prop="operationStaff">
-              <el-select v-model="editoragentobj.operationStaff" placeholder="请选择">
-                  <el-option
-                    v-for="item in optionsoperationStaff"
-                    :key="item.value"
-                    :label="item.name"
-                    :value="item.accountId"
-                  >
-                  </el-option>
-              </el-select>
-          </el-form-item> -->
       </el-form>
-      <div slot="footer" class="dialog-footer"
-        style="border-top:1px solid #eee;padding-top: 20px;display: flex;justify-content: end;">
+      <div
+        slot="footer"
+        class="dialog-footer"
+        style="
+          border-top: 1px solid #eee;
+          padding-top: 20px;
+          display: flex;
+          justify-content: end;
+        "
+      >
         <el-button @click="dialogVisible2 = false">取 消</el-button>
-        <el-button type="primary" :loading="loadingFlag" @click="editor()">保存</el-button>
+        <el-button type="primary" :loading="loadingFlag" @click="editor()"
+          >保存</el-button
+        >
       </div>
     </el-dialog>
 
-    <el-dialog title="更换账号" :visible.sync="dialogVisible3" @close="replaceClose" :center="true" width="600px">
-      <el-form :model="replaceagentobj" label-position="labelPosition" :rules="ruleser" ref="replaceagentobj"
-        label-width="140px" style="width: 80%; margin: 0 auto">
+    <el-dialog
+      title="更换账号"
+      :visible.sync="dialogVisible3"
+      @close="replaceClose"
+      :center="true"
+      width="600px"
+    >
+      <el-form
+        :model="replaceagentobj"
+        label-position="labelPosition"
+        :rules="ruleser"
+        ref="replaceagentobj"
+        label-width="140px"
+        style="width: 80%; margin: 0 auto"
+      >
         <el-form-item label="管理员账号：" prop="managerPhone">
-          <el-input maxlength="11" placeholder="管理员账号" v-model="replaceagentobj.managerPhone"></el-input>
+          <el-input
+            maxlength="11"
+            placeholder="管理员账号"
+            v-model="replaceagentobj.managerPhone"
+          ></el-input>
         </el-form-item>
         <el-form-item label="密码：" prop="managerPassword">
-          <el-input show-password :disabled="passFlag" placeholder="密码" v-model="replaceagentobj.managerPassword"></el-input>
+          <el-input
+            show-password
+            :disabled="passFlag"
+            placeholder="密码"
+            v-model="replaceagentobj.managerPassword"
+          ></el-input>
         </el-form-item>
       </el-form>
-      <div slot="footer" class="dialog-footer"
-        style="border-top:1px solid #eee;padding-top: 20px;display: flex;justify-content: end;">
+      <div
+        slot="footer"
+        class="dialog-footer"
+        style="
+          border-top: 1px solid #eee;
+          padding-top: 20px;
+          display: flex;
+          justify-content: end;
+        "
+      >
         <el-button @click="dialogVisible3 = false">取 消</el-button>
-        <el-button type="primary" :loading="loadingFlag" @click="replace()">保存</el-button>
+        <el-button type="primary" :loading="loadingFlag" @click="replace()"
+          >保存</el-button
+        >
       </div>
     </el-dialog>
 
-    <el-dialog :title="sysFlag == 0 ? '绑定系统运营' : '绑定售后运营'" :visible.sync="operaVisible" :center="true" width="600px">
-      <el-form :model="operaForm" label-position="labelPosition" :rules="operaRules" ref="operaForm"
-        label-width="140px">
+    <el-dialog
+      :title="sysFlag == 0 ? '绑定系统运营' : '绑定售后运营'"
+      :visible.sync="operaVisible"
+      :center="true"
+      width="600px"
+    >
+      <el-form
+        :model="operaForm"
+        label-position="labelPosition"
+        :rules="operaRules"
+        ref="operaForm"
+        label-width="140px"
+      >
         <el-form-item label="运营人员：" prop="operationalPeople">
-          <el-select v-model="operaForm.operationalPeople" style="width: 80%" multiple placeholder="请选择">
-            <el-option v-for="item in optionsoperationStaff" :key="item.value" :label="item.name"
-              :value="item.accountId">
+          <el-select
+            v-model="operaForm.operationalPeople"
+            style="width: 80%"
+            multiple
+            placeholder="请选择"
+          >
+            <el-option
+              v-for="item in optionsoperationStaff"
+              :key="item.value"
+              :label="item.name"
+              :value="item.accountId"
+            >
             </el-option>
           </el-select>
         </el-form-item>
       </el-form>
-      <div slot="footer" class="dialog-footer"
-        style="border-top:1px solid #eee;padding-top: 20px;display: flex;justify-content: end;">
+      <div
+        slot="footer"
+        class="dialog-footer"
+        style="
+          border-top: 1px solid #eee;
+          padding-top: 20px;
+          display: flex;
+          justify-content: end;
+        "
+      >
         <el-button @click="operaVisible = false">取 消</el-button>
-        <el-button type="primary" :loading="loadingFlag" @click="saveOpera()">保存</el-button>
+        <el-button type="primary" :loading="loadingFlag" @click="saveOpera()"
+          >保存</el-button
+        >
       </div>
     </el-dialog>
 
-    <el-dialog title="绑定代理商" :visible.sync="agentVisible" :center="true" width="600px">
-      <el-form :model="agentForm" label-position="labelPosition" :rules="agentRule" ref="agentForm" label-width="140px">
+    <el-dialog
+      title="绑定代理商"
+      :visible.sync="agentVisible"
+      :center="true"
+      width="600px"
+    >
+      <el-form
+        :model="agentForm"
+        label-position="labelPosition"
+        :rules="agentRule"
+        ref="agentForm"
+        label-width="140px"
+      >
         <el-form-item label="代理商：" prop="agentId">
-          <el-select v-model="agentForm.agentId" style="width: 80%" multiple filterable placeholder="请选择">
-            <el-option v-for="item in optionsagentId" :key="item.id" :label="item.agentName" :value="item.id">
+          <el-select
+            v-model="agentForm.agentId"
+            style="width: 80%"
+            multiple
+            filterable
+            placeholder="请选择"
+          >
+            <el-option
+              v-for="item in optionsagentId"
+              :key="item.id"
+              :label="item.agentName"
+              :value="item.id"
+            >
             </el-option>
           </el-select>
         </el-form-item>
       </el-form>
-      <div slot="footer" class="dialog-footer"
-        style="border-top:1px solid #eee;padding-top: 20px;display: flex;justify-content: end;">
+      <div
+        slot="footer"
+        class="dialog-footer"
+        style="
+          border-top: 1px solid #eee;
+          padding-top: 20px;
+          display: flex;
+          justify-content: end;
+        "
+      >
         <el-button @click="agentVisible = false">取 消</el-button>
-        <el-button type="primary" :loading="loadingFlag" @click="saveAgent()">保存</el-button>
+        <el-button type="primary" :loading="loadingFlag" @click="saveAgent()"
+          >保存</el-button
+        >
       </div>
     </el-dialog>
   </div>
@@ -405,6 +613,16 @@ export default {
       }
     };
     return {
+      tableIdName: "CustomerCompanyRecord", // 当前页面需要的变量
+      tableOption: this.$tableOption.CustomerCompanyRecord, // 当前table配置项
+      tableLoading: false, // 是否显示加载中
+      showColumn: [], // 监听的显示列的变量
+      page: {
+        total: 0, // 总页数
+        currentPage: 1, // 当前页数
+        pageSize: 10, // 每页显示多少条
+      },
+
       props: {
         lazy: true,
         async lazyLoad(node, resolve) {
@@ -580,7 +798,6 @@ export default {
         cityId: "", // 市id
         area: [],
         address: "", // 详细地址
-        // operationStaff:'',// 运营人员id
       },
       idx: "0",
       operaForm: {
@@ -631,7 +848,21 @@ export default {
   computed: {
     ...mapGetters(["permissions"]),
   },
+
+  watch: {
+    showColumn(nowV) {
+      let params = {
+        tableIdName: this.tableIdName,
+        optionData: nowV,
+      };
+      this.$db.upDate(params);
+    },
+  },
+
   created() {
+    // 获取显隐的列表
+    this.setTableOption();
+
     this.cus_crd_add = this.permissions["cus_crd_add"];
     this.cus_crd_edit = this.permissions["cus_crd_edit"];
     this.cus_crd_change = this.permissions["cus_crd_change"];
@@ -643,17 +874,42 @@ export default {
   },
   mounted() {
     this.orgType = localStorage.getItem("orgType");
-    // 获取地区列表
-    // this.getCityList();
+    // 检测某些字段是否可以展示
+    this.checkOption();
     this.getOperaList();
     this.getcompanyList();
   },
   methods: {
+    // 检测是否可以展示某些字段
+    checkOption() {
+      let checkArr = ["运营人员"];
+      checkArr.forEach((item) => {
+        let index = this.$tableOption[this.tableIdName].column.findIndex(
+          (findObj) => item == findObj.label
+        );
+        if (index >= 0) {
+          let obj = this.$tableOption[this.tableIdName].column[index];
+          if (
+            obj.label == "运营人员" &&
+            (this.orgType == 0 || this.orgType == 1)
+          ) {
+            obj.hide = false;
+            obj.showColumn = true;
+          }
+        }
+      });
+    },
+    // 获取当前页面的显隐
+    setTableOption() {
+      this.$db.getDataByKey(this.tableIdName).then((res) => {
+        if (res.tableIdName == this.tableIdName) {
+          this.showColumn = res.optionData;
+        }
+      });
+    },
     getOperaList() {
       this.$api.http.getAllOperationsStaff().then((res) => {
         this.operaList = res.data;
-        // this.operaVisible = true;
-        // console.log(2);
       });
     },
     getCityList() {
@@ -734,8 +990,6 @@ export default {
       // this.operaVisible=true
     },
     zkoperationrecordFindByOrg(orgId, idx) {
-      // console.log(idx,orgId);
-      // return
       this.$api.api
         .zkoperationrecordFindByOrg({
           orgType: 2,
@@ -769,7 +1023,6 @@ export default {
         this.editoragentobj.provinceId = res.data.provinceId;
         this.editoragentobj.cityId = res.data.cityId;
         this.editoragentobj.address = res.data.address;
-        // this.editoragentobj.operationStaff=res.data.operationStaff;
         this.editoragentobj.area = [
           this.editoragentobj.provinceId,
           this.editoragentobj.cityId,
@@ -818,10 +1071,6 @@ export default {
     },
     //确认编辑
     editor() {
-      //         if(!this.resetFlag){
-      //     this.$message.error('平台用户与项目用户不能重复添加！')
-      //     return
-      // }
       this.$refs.editoragentobj.validate((valid) => {
         if (valid) {
           if (!this.resetFlag) {
@@ -853,8 +1102,6 @@ export default {
         }
       )
         .then(() => {
-          // return
-          // console.log(123);
           this.$api.http
             .updateOrg({ id: row.id, lockFlag: row.lockFlag == 0 ? "1" : "0" })
             .then((res) => {
@@ -869,10 +1116,7 @@ export default {
               }
             });
         })
-        .catch((err) => {
-          // console.log('关闭');
-          // console.log(err);
-        });
+        .catch((err) => {});
     },
 
     reset1() {
@@ -935,7 +1179,7 @@ export default {
         type: "warning",
       })
         .then(() => {
-          this.$api.http.delOrg({ id: item.row.id }).then((res) => {
+          this.$api.http.delOrg({ id: item.id }).then((res) => {
             if (res.code == 0) {
               this.$message({
                 type: "success",
@@ -947,22 +1191,16 @@ export default {
             }
           });
         })
-        .catch(() => {
-          // this.$message({
-          //   type: 'info',
-          //   message: '已取消删除'
-          // });
-        });
+        .catch(() => {});
     },
 
     //新增
     infoadd() {
-      // this.findMyAgent()
       this.getparentIdList();
       this.dialogVisible = true;
       this.passFlag = false;
     },
-    //获取运营人员
+
     //获取运营人员
     getAllOperationsStaff(idx, row) {
       this.optionsoperationStaff = [];
@@ -1017,7 +1255,6 @@ export default {
             res.data.map((item) => {
               arr.push(item.agentId);
             });
-            // console.log(arr,'123');
             this.agentForm.agentId = arr;
           }
         });
@@ -1048,10 +1285,6 @@ export default {
 
     //确认新增
     add() {
-      //         if(!this.resetFlag){
-      //     this.$message.error('平台用户与项目用户不能重复添加！')
-      //     return
-      // }
       this.$refs.addagentobj.validate((valid) => {
         if (valid) {
           if (!this.resetFlag) {
@@ -1103,9 +1336,9 @@ export default {
     getcompanyList() {
       this.tableData = [];
       let parmest = {
-        current: this.pageNum,
+        current: this.page.currentPage,
         provinceId: this.provinceId,
-        size: this.pageSize,
+        size: this.page.pageSize,
         cityId: this.cityId,
         operatorName: this.operatorName,
         operationStaffName: this.operationStaffName,
@@ -1118,20 +1351,20 @@ export default {
       this.$api.http.getcompanyList(parmest).then((res) => {
         console.log(res.data);
         this.tableData = res.data.records;
-        this.total = res.data.total;
-        
-          // 表格中设置ref属性，在数据渲染之后或者updated()之后
-          this.$nextTick(() => {
-            this.$refs.table.doLayout();
-          });
+        this.page.total = res.data.total;
+
+        // 表格中设置ref属性，在数据渲染之后或者updated()之后
+        this.$nextTick(() => {
+          this.$refs.crud.doLayout();
+        });
       });
     },
     handleSizeChange(val) {
-      this.pageSize = val;
+      this.page.pageSize = val;
       this.getcompanyList();
     },
     handleCurrentChange(val) {
-      this.pageNum = val;
+      this.page.currentPage = val;
       this.getcompanyList();
     },
     locationsChange(e) {
@@ -1222,7 +1455,7 @@ export default {
   thead {
     tr {
       th {
-        background: #F5F7FA;
+        background: #f5f7fa;
         color: #333333;
       }
     }
@@ -1236,11 +1469,11 @@ export default {
     font-weight: bold;
   }
 }
-/deep/ .el-button--primary{
-  background: #2671E2 !important;
-  border: 1px solid #2671E2 !important;
+/deep/ .el-button--primary {
+  background: #2671e2 !important;
+  border: 1px solid #2671e2 !important;
 }
-/deep/ .el-button--text{
-  color: #2671E2;
+/deep/ .el-button--text {
+  color: #2671e2;
 }
 </style>

src/views/Customer/Companymanagement.vue

@@ -5,11 +5,16 @@
       <div class="app-titel" style="margin-top: 5px">
         <div class="label">代理商：</div>
         <div>
-         <el-input v-model="operatorName" placeholder="代理商"></el-input>
+          <el-input v-model="operatorName" placeholder="代理商"></el-input>
         </div>
         <div class="label">公司名称：</div>
         <div>
-          <el-input maxlength="30" clearable placeholder="公司名称" v-model="name"></el-input>
+          <el-input
+            maxlength="30"
+            clearable
+            placeholder="公司名称"
+            v-model="name"
+          ></el-input>
         </div>
         <!-- <div v-if="orgType == 0" class="label">运营人员：</div>
         <div v-if="orgType == 0">
@@ -19,8 +24,8 @@
             v-model="operationStaffName"
           ></el-input>
         </div> -->
-          <div class="label">运营人员：</div>
-        <div >
+        <div class="label">运营人员：</div>
+        <div>
           <!-- <el-input maxlength="10" class="div-inp" clearable v-model="operationalName"></el-input> -->
           <el-select
             v-model="operationStaffId"
@@ -38,8 +43,10 @@
             </el-option>
           </el-select>
         </div>
-          <div class="label" style="line-height: 30px;min-width: 80px;">地区：</div>
-          <!-- <el-select
+        <div class="label" style="line-height: 30px; min-width: 80px">
+          地区：
+        </div>
+        <!-- <el-select
             v-model="provinceId"
             placeholder="请选择"
             class="div-inp"
@@ -54,18 +61,17 @@
             >
             </el-option>
           </el-select> -->
-            <el-cascader
-            :props="props1"
-            @change="locationsChange1"
-            :options="addressOptions"
-            placeholder="省/市"
-            size="small"
-            separator="/"
-            v-model="area"
-            filterable
-            clearable
-          ></el-cascader>
-
+        <el-cascader
+          :props="props1"
+          @change="locationsChange1"
+          :options="addressOptions"
+          placeholder="省/市"
+          size="small"
+          separator="/"
+          v-model="area"
+          filterable
+          clearable
+        ></el-cascader>
       </div>
 
       <div class="app-titel" style="margin-top: 15px">
@@ -79,14 +85,36 @@
           <el-button @click="Screening()" type="primary">筛选</el-button>
         </div>
         <div style="margin-left: 20px">
-          <el-button @click="Screeningofempty()" type="text">清空筛选条件</el-button>
+          <el-button @click="Screeningofempty()" type="text"
+            >清空筛选条件</el-button
+          >
         </div>
       </div>
     </div>
 
     <!-- 表格 -->
     <div class="cen-tab">
-      <el-table :header-cell-style="{background:'#F5F7FA',color:'#333333'}" height="572px" ref="table" :data="tableData" stripe style="width: 100%">
+      <avue-crud
+        ref="crud"
+        :page.sync="page"
+        :data="tableData"
+        :table-loading="tableLoading"
+        :option="tableOption"
+        :show-column.sync="showColumn"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      >
+        <template slot-scope="{ row }" slot="menu">
+          <el-button
+            type="text"
+            size="small"
+            v-if="cus_com_sys1"
+            @click="editOpera(row, 1)"
+            >售后运营</el-button
+          >
+        </template>
+      </avue-crud>
+      <!-- <el-table :header-cell-style="{background:'#F5F7FA',color:'#333333'}" height="572px" ref="table" :data="tableData" stripe style="width: 100%">
         <el-table-column prop="name" label="公司名称" align="center">
         </el-table-column>
         <el-table-column
@@ -104,28 +132,10 @@
         <el-table-column prop="provinceName,cityName" label="公司地区" align="center">
           <template slot-scope="scope"> {{scope.row.provinceName}}{{scope.row.cityName}} </template>
         </el-table-column>
-        <!-- <el-table-column
-            label="联系人信息"
-             align="center">
-              <template slot-scope="scope">
-                <p>{{scope.row.contactPerson}}:{{scope.row.contactNumber}}</p>
-              </template>
-          </el-table-column> -->
-        <!--
-          <el-table-column
-            prop="managerPhone"
-            label="管理员账号"
-            align="center"
-          >
-          </el-table-column> -->
         <el-table-column prop="houseNum" label="服务期项目" align="center">
         </el-table-column>
         <el-table-column label="操作" align="center" width="80">
           <template slot-scope="scope">
-            <!-- <el-button type="text" size="small" @click="infoeditor(scope.row)">编辑</el-button>
-              <el-button type="text" size="small" @click="inforeplace(scope.row)">更换账号</el-button>
-              <el-button type="text" size="small" @click="toinifodelete(scope)">删除</el-button> -->
-            <!-- <el-button  type="text" size="small" v-if="cus_com_sys" @click="editOpera(scope.row,0)">系统运营</el-button> -->
             <el-button
               type="text"
               size="small"
@@ -133,7 +143,6 @@
               @click="editOpera(scope.row, 1)"
               >售后运营</el-button
             >
-            <!-- <el-button  type="text" size="small"  @click="bindAgent(scope.row)">绑定代理商</el-button> -->
           </template>
         </el-table-column>
       </el-table>
@@ -148,10 +157,15 @@
           :total="total"
         >
         </el-pagination>
-      </div>
+      </div> -->
     </div>
 
-    <el-dialog title="新增公司" :visible.sync="dialogVisible" :center="true" width="600px">
+    <el-dialog
+      title="新增公司"
+      :visible.sync="dialogVisible"
+      :center="true"
+      width="600px"
+    >
       <el-form
         :model="addagentobj"
         label-position="labelPosition"
@@ -160,12 +174,6 @@
         label-width="140px"
         style="width: 60%; margin: 0 auto"
       >
-        <!-- <el-form-item label="代理商名称：" prop="agentId"> -->
-        <!-- <el-select v-model="addagentobj.agentId" placeholder="请选择" @change='clickagentId()'> -->
-        <!-- <el-select v-model="addagentobj.agentId" placeholder="请选择">
-                <el-option  v-for="item in optionsagentId" :key="item.value"  :label="item.agentName" :value="item.id" ></el-option>
-              </el-select> -->
-        <!-- </el-form-item> -->
         <el-form-item label="公司名称：" prop="name">
           <el-input
             v-model="addagentobj.name"
@@ -219,7 +227,10 @@
           </el-select>
         </el-form-item>
         <el-form-item label="详细地址：" prop="address">
-          <el-input v-model="addagentobj.address" placeholder="详细地址"></el-input>
+          <el-input
+            v-model="addagentobj.address"
+            placeholder="详细地址"
+          ></el-input>
         </el-form-item>
         <!-- <el-form-item label="运营人员：" prop="operationStaff">
               <el-select v-model="addagentobj.operationStaff" placeholder="请选择">
@@ -234,19 +245,39 @@
 
           </el-form-item> -->
         <el-form-item label="管理员账号：" prop="managerPhone">
-          <el-input v-model="addagentobj.managerPhone" placeholder="管理员账号"></el-input>
+          <el-input
+            v-model="addagentobj.managerPhone"
+            placeholder="管理员账号"
+          ></el-input>
         </el-form-item>
         <el-form-item label="密码：" prop="managerPassword">
-          <el-input v-model="addagentobj.managerPassword" placeholder="密码"></el-input>
+          <el-input
+            v-model="addagentobj.managerPassword"
+            placeholder="密码"
+          ></el-input>
         </el-form-item>
       </el-form>
-      <div slot="footer" class="dialog-footer" style="border-top:1px solid #eee;padding-top: 20px;display: flex;justify-content: end;">
+      <div
+        slot="footer"
+        class="dialog-footer"
+        style="
+          border-top: 1px solid #eee;
+          padding-top: 20px;
+          display: flex;
+          justify-content: end;
+        "
+      >
         <el-button @click="dialogVisible = false">取 消</el-button>
         <el-button type="primary" @click="add()">保存</el-button>
       </div>
     </el-dialog>
 
-    <el-dialog title="编辑" :visible.sync="dialogVisible2" :center="true" width="600px">
+    <el-dialog
+      title="编辑"
+      :visible.sync="dialogVisible2"
+      :center="true"
+      width="600px"
+    >
       <el-form
         :model="editoragentobj"
         label-position="labelPosition"
@@ -255,20 +286,23 @@
         label-width="140px"
         style="width: 60%; margin: 0 auto"
       >
-        <!-- <el-form-item label="代理商名称：" prop="operator"> -->
-        <!-- <el-select v-model="editoragentobj.operator" placeholder="请选择" @change='clickagentId22()'> -->
-        <!-- <el-select v-model="editoragentobj.operator" placeholder="请选择">
-                <el-option  v-for="item in optionsagentId" :key="item.value"  :label="item.agentName" :value="item.id" ></el-option>
-              </el-select> -->
-        <!-- </el-form-item> -->
         <el-form-item label="公司名称：" prop="name">
-          <el-input v-model="editoragentobj.name" placeholder="公司名称"></el-input>
+          <el-input
+            v-model="editoragentobj.name"
+            placeholder="公司名称"
+          ></el-input>
         </el-form-item>
         <el-form-item label="联系人：" prop="contactPerson">
-          <el-input v-model="editoragentobj.contactPerson" placeholder="联系人"></el-input>
+          <el-input
+            v-model="editoragentobj.contactPerson"
+            placeholder="联系人"
+          ></el-input>
         </el-form-item>
         <el-form-item label="联系手机：" prop="contactNumber">
-          <el-input v-model="editoragentobj.contactNumber" placeholder="联系手机"></el-input>
+          <el-input
+            v-model="editoragentobj.contactNumber"
+            placeholder="联系手机"
+          ></el-input>
         </el-form-item>
         <el-form-item label="省：" prop="provinceId">
           <el-select
@@ -297,7 +331,10 @@
           </el-select>
         </el-form-item>
         <el-form-item label="详细地址：" prop="address">
-          <el-input v-model="editoragentobj.address" placeholder="详细地址"></el-input>
+          <el-input
+            v-model="editoragentobj.address"
+            placeholder="详细地址"
+          ></el-input>
         </el-form-item>
         <!-- <el-form-item label="运营人员：" prop="operationStaff">
               <el-select v-model="editoragentobj.operationStaff" placeholder="请选择">
@@ -311,13 +348,27 @@
               </el-select>
           </el-form-item> -->
       </el-form>
-      <div slot="footer" class="dialog-footer" style="border-top:1px solid #eee;padding-top: 20px;display: flex;justify-content: end;">
+      <div
+        slot="footer"
+        class="dialog-footer"
+        style="
+          border-top: 1px solid #eee;
+          padding-top: 20px;
+          display: flex;
+          justify-content: end;
+        "
+      >
         <el-button @click="dialogVisible2 = false">取 消</el-button>
         <el-button type="primary" @click="editor()">保存</el-button>
       </div>
     </el-dialog>
 
-    <el-dialog title="更换账号" :visible.sync="dialogVisible3" :center="true" width="600px">
+    <el-dialog
+      title="更换账号"
+      :visible.sync="dialogVisible3"
+      :center="true"
+      width="600px"
+    >
       <el-form
         :model="replaceagentobj"
         label-position="labelPosition"
@@ -327,13 +378,28 @@
         style="width: 60%; margin: 0 auto"
       >
         <el-form-item label="管理员账号：" prop="managerPhone">
-          <el-input v-model="replaceagentobj.managerPhone" placeholder="管理员账号"></el-input>
+          <el-input
+            v-model="replaceagentobj.managerPhone"
+            placeholder="管理员账号"
+          ></el-input>
         </el-form-item>
         <el-form-item label="密码：" prop="managerPassword">
-          <el-input v-model="replaceagentobj.managerPassword" placeholder="密码"></el-input>
+          <el-input
+            v-model="replaceagentobj.managerPassword"
+            placeholder="密码"
+          ></el-input>
         </el-form-item>
       </el-form>
-      <div slot="footer" class="dialog-footer" style="border-top:1px solid #eee;padding-top: 20px;display: flex;justify-content: end;">
+      <div
+        slot="footer"
+        class="dialog-footer"
+        style="
+          border-top: 1px solid #eee;
+          padding-top: 20px;
+          display: flex;
+          justify-content: end;
+        "
+      >
         <el-button @click="dialogVisible3 = false">取 消</el-button>
         <el-button type="primary" @click="replace()">保存</el-button>
       </div>
@@ -342,7 +408,8 @@
     <el-dialog
       :title="sysFlag == 0 ? '绑定系统运营' : '绑定售后运营'"
       :visible.sync="operaVisible"
-      :center="true" width="600px"
+      :center="true"
+      width="600px"
     >
       <el-form
         :model="operaForm"
@@ -368,13 +435,29 @@
           </el-select>
         </el-form-item>
       </el-form>
-      <div slot="footer" class="dialog-footer" style="border-top:1px solid #eee;padding-top: 20px;display: flex;justify-content: end;">
+      <div
+        slot="footer"
+        class="dialog-footer"
+        style="
+          border-top: 1px solid #eee;
+          padding-top: 20px;
+          display: flex;
+          justify-content: end;
+        "
+      >
         <el-button @click="operaVisible = false">取 消</el-button>
-        <el-button type="primary" :loading="loadingFlag" @click="saveOpera()">保存</el-button>
+        <el-button type="primary" :loading="loadingFlag" @click="saveOpera()"
+          >保存</el-button
+        >
       </div>
     </el-dialog>
 
-    <el-dialog title="绑定代理商" :visible.sync="agentVisible" :center="true" width="600px">
+    <el-dialog
+      title="绑定代理商"
+      :visible.sync="agentVisible"
+      :center="true"
+      width="600px"
+    >
       <el-form
         :model="agentForm"
         label-position="labelPosition"
@@ -400,7 +483,16 @@
           </el-select>
         </el-form-item>
       </el-form>
-      <div slot="footer" class="dialog-footer" style="border-top:1px solid #eee;padding-top: 20px;display: flex;justify-content: end;">
+      <div
+        slot="footer"
+        class="dialog-footer"
+        style="
+          border-top: 1px solid #eee;
+          padding-top: 20px;
+          display: flex;
+          justify-content: end;
+        "
+      >
         <el-button @click="agentVisible = false">取 消</el-button>
         <el-button type="primary" @click="saveAgent()">保存</el-button>
       </div>
@@ -427,10 +519,20 @@ export default {
       }
     };
     return {
+      tableIdName: "CustomerCompanymanagement", // 当前页面需要的变量
+      tableOption: this.$tableOption.CustomerCompanymanagement, // 当前table配置项
+      tableLoading: false, // 是否显示加载中
+      showColumn: [], // 监听的显示列的变量
+      page: {
+        total: 0, // 总页数
+        currentPage: 1, // 当前页数
+        pageSize: 30, // 每页显示多少条
+      },
+
       props1: {
         lazy: true,
         checkStrictly: true,
-        expandTrigger:'hover',
+        expandTrigger: "hover",
         async lazyLoad(node, resolve) {
           // console.log(node, 123);
           const { level } = node;
@@ -455,13 +557,13 @@ export default {
               };
             });
             resolve(nodes);
-          }else{
-            resolve()
+          } else {
+            resolve();
           }
         },
       },
-      area:[],
-      addressOptions:[],
+      area: [],
+      addressOptions: [],
       addagentobj: {
         agentId: "", // 代理商名称
         name: "", // 公司名称
@@ -519,22 +621,19 @@ export default {
       dialogVisible: false,
       dialogVisible2: false,
       provinceId: "",
-      cityId:'',
+      cityId: "",
       areaList: [],
-      operaList:[],
-      operationStaffId:'',
+      operaList: [],
+      operationStaffId: "",
       dialogVisible3: false,
       resetFlag: false,
       operaVisible: false,
       agentVisible: false,
-      loadingFlag:false,
+      loadingFlag: false,
       currentPage4: 1,
       operatorName: "", //代理商名称
       operationStaffName: "", //运营人员名称
       name: "", //公司名称
-      total: 0, //总条数
-      pageNum: 1,
-      pageSize: 30,
       orgType: "",
       sysFlag: "0",
       replaceagentobj: {
@@ -605,16 +704,28 @@ export default {
           { required: true, message: "请输入详细地址", trigger: "blur" },
           { min: 1, max: 30, message: "最多输入30个汉字", trigger: "blur" },
         ],
-        // operationStaff: [
-        //   { required: true, message: '请选择运营人员', trigger: 'blur' },
-        // ],
       },
     };
   },
   computed: {
     ...mapGetters(["permissions"]),
   },
+
+  watch: {
+    showColumn(nowV) {
+      let params = {
+        tableIdName: this.tableIdName,
+        optionData: nowV,
+      };
+      this.$db.upDate(params);
+    },
+  },
+
   created() {
+    
+    // 获取显隐的列表
+    this.setTableOption();
+
     this.cus_com_sys = this.permissions["cus_com_sys"];
     this.cus_com_sys1 = this.permissions["cus_com_sys1"];
   },
@@ -622,18 +733,29 @@ export default {
     this.orgType = localStorage.getItem("orgType");
     // 获取地区列表
     // this.getCityList();
-    this.getOperaList()
+    this.getOperaList();
     this.getcompanyList();
   },
   methods: {
-    getOperaList(){
-        this.$api.http
-          .getAllOperationsStaffByAgent({
-            agentId: localStorage.getItem('agentId'),
-          })
-          .then((res) => {
-            this.operaList = res.data;
-          });
+
+    // 获取当前页面的显隐
+    setTableOption() {
+      this.$db.getDataByKey(this.tableIdName).then((res) => {
+        if (res.tableIdName == this.tableIdName) {
+          this.showColumn = res.optionData;
+        }
+      });
+    },
+
+
+    getOperaList() {
+      this.$api.http
+        .getAllOperationsStaffByAgent({
+          agentId: localStorage.getItem("agentId"),
+        })
+        .then((res) => {
+          this.operaList = res.data;
+        });
     },
     getCityList() {
       this.$api.api.getAreaList({ parentId: 0 }).then((res) => {
@@ -669,7 +791,7 @@ export default {
       this.$refs.operaForm.validate((valid) => {
         if (valid) {
           // console.log(valid,this.operaForm);
-          this.loadingFlag=true
+          this.loadingFlag = true;
           this.$api.api
             .zkoperationrecordSaveCompany({
               // orgType:this.idx==0?'1':'2',
@@ -681,9 +803,9 @@ export default {
             .then((res) => {
               console.log(res);
               setTimeout(() => {
-                  this.loadingFlag=false
-                  console.log('防重')
-                }, 1);
+                this.loadingFlag = false;
+                console.log("防重");
+              }, 1);
               this.$message.success("操作成功");
               this.operaVisible = false;
               this.Screeningofempty();
@@ -969,8 +1091,8 @@ export default {
       this.provinceId = "";
       this.cityId = "";
       this.operationStaffId = "";
-      this.pageNum = 1;
-      this.area=[]
+      this.page.currentPage = 1;
+      this.area = [];
       this.getcompanyList();
     },
     //筛选
@@ -981,8 +1103,8 @@ export default {
     getcompanyList() {
       this.tableData = [];
       let parmest = {
-        current: this.pageNum,
-        size: this.pageSize,
+        current: this.page.currentPage,
+        size: this.page.pageSize,
         provinceId: this.provinceId,
         cityId: this.cityId,
         operatorName: this.operatorName,
@@ -996,12 +1118,12 @@ export default {
       this.$api.http.getcompanyList(parmest).then((res) => {
         console.log(res.data);
         this.tableData = res.data.records;
-        this.total = res.data.total;
-        
-          // 表格中设置ref属性，在数据渲染之后或者updated()之后
-          this.$nextTick(() => {
-            this.$refs.table.doLayout();
-          });
+        this.page.total = res.data.total;
+
+        // 表格中设置ref属性，在数据渲染之后或者updated()之后
+        this.$nextTick(() => {
+          this.$refs.crud.doLayout();
+        });
       });
     },
     locationsChange1(e) {
@@ -1011,11 +1133,11 @@ export default {
       this.cityId = e[1];
     },
     handleSizeChange(val) {
-      this.pageSize = val;
+      this.page.pageSize = val;
       this.getcompanyList();
     },
     handleCurrentChange(val) {
-      this.pageNum = val;
+      this.page.currentPage = val;
       this.getcompanyList();
     },
   },
@@ -1023,11 +1145,11 @@ export default {
 </script>
 
 <style scoped="scoped" lang="scss" >
-/deep/ .el-table__header-wrapper{
-  thead{
-    tr{
-      th{
-        background: #F5F7FA;
+/deep/ .el-table__header-wrapper {
+  thead {
+    tr {
+      th {
+        background: #f5f7fa;
         color: #333333;
       }
     }
@@ -1085,17 +1207,17 @@ export default {
     }
   }
 }
-/deep/ .el-dialog--center{
+/deep/ .el-dialog--center {
   border-radius: 8px;
-  .el-dialog__title{
+  .el-dialog__title {
     font-weight: bold;
   }
 }
-/deep/ .el-button--primary{
-  background: #2671E2 !important;
-  border: 1px solid #2671E2 !important;
+/deep/ .el-button--primary {
+  background: #2671e2 !important;
+  border: 1px solid #2671e2 !important;
 }
-/deep/ .el-button--text{
-  color: #2671E2;
+/deep/ .el-button--text {
+  color: #2671e2;
 }
 </style>

src/views/Customer/table.js

@@ -0,0 +1,212 @@
+export default {
+    CustomerAgentManagement: {
+        border: true,
+        index: false,
+        height: 450,
+        indexLabel: "序号",
+        stripe: true,
+        menuAlign: "center",
+        menuWidth: 146,
+        menu: true,
+        align: "center",
+        refreshBtn: false,
+        searchSize: "mini",
+        searchMenuSpan: 9,
+        delBtn: false,
+        addBtn: false,
+        editBtn: false,
+        viewBtn: false,
+        size: "small",
+        column: [
+            {
+                label: "代理商",
+                prop: "agentName",
+                width: "120px",
+            },
+            {
+                label: "地区",
+                prop: "provinceName",
+                width: "120px",
+                formatter: (data) => {
+                    return `${data.provinceName || '-'}${data.cityName || ''}`
+                }
+            },
+            {
+                label: "联系人信息",
+                prop: "linkman",
+                width: "110px",
+                formatter: (data) => {
+                    return `${data.linkman}-${data.linkmanPhone}`
+                }
+            },
+            {
+                label: "系统运营",
+                prop: "operationalName",
+            },
+            {
+                label: "管理员账号",
+                prop: "managerPhone",
+                width: "110px",
+            },
+            
+            {
+                label: "添加日期",
+                prop: "createTime",
+                width: "100px",
+                formatter: (data) => {
+                    return data.createTime.substring(0, 10)
+                }
+            },
+            {
+                label: "合同开始日期",
+                prop: "contractStartDate",
+                width: "100px",
+            },
+            {
+                label: "合同结束日期",
+                prop: "contractEndDate",
+                width: "100px",
+            },
+            {
+                label: "服务状态",
+                prop: "residueTime",
+                width: "100px",
+                formatter: data => {
+                    let str = ''
+                    if (Number(data.residueTime) >= 0) {
+                        str = `服务中(${data.residueTime})`
+                    } else {
+                        str = `过期(${Math.abs(data.residueTime)})`
+                    }
+                    return str
+                }
+            },
+            {
+                label: "状态",
+                prop: "lockFlag",
+                width: "100px",
+                formatter: data => {
+                    return data.lockFlag == 1 ? "禁用" : "启用"
+                }
+            },
+        ]
+    },
+    CustomerCompanymanagement: {
+        border: true,
+        index: false,
+        height: 572,
+        indexLabel: "序号",
+        stripe: true,
+        menuAlign: "center",
+        menuWidth: 146,
+        menu: true,
+        align: "center",
+        refreshBtn: false,
+        searchSize: "mini",
+        searchMenuSpan: 9,
+        delBtn: false,
+        addBtn: false,
+        editBtn: false,
+        viewBtn: false,
+        size: "small",
+        column: [
+            {
+                label: '公司名称',
+                prop: 'name'
+            },
+            {
+                label: "代理商",
+                prop: "operatorName",
+            },
+            
+            {
+                label: "运营人员",
+                prop: "operationStaffName",
+            },
+
+            {
+                label: "公司地区",
+                prop: "provinceName",
+                width: "120px",
+                formatter: (data) => {
+                    return `${data.provinceName || '-'}${data.cityName || ''}`
+                }
+            },
+            {
+                label: "服务期项目",
+                prop: "houseNum",
+            },
+        ]
+    },
+
+    CustomerCompanyRecord: {
+        border: true,
+        index: false,
+        height: 500,
+        indexLabel: "序号",
+        stripe: true,
+        menuAlign: "center",
+        menuWidth: 146,
+        menu: true,
+        align: "center",
+        refreshBtn: false,
+        searchSize: "mini",
+        searchMenuSpan: 9,
+        delBtn: false,
+        addBtn: false,
+        editBtn: false,
+        viewBtn: false,
+        size: "small",
+        column: [
+            {
+                label: "公司名称",
+                prop: "name",
+                width: "120px",
+            },
+            {
+                label: "代理商",
+                prop: "operatorName",
+            },
+            {
+                label: "运营人员",
+                prop: "operationStaffName",
+            },
+            
+            {
+                label: "公司地区",
+                prop: "provinceName",
+                width: "120px",
+                formatter: (data) => {
+                    return `${data.provinceName || '-'}${data.cityName || ''}`
+                }
+            },
+            
+            {
+                label: "联系人信息",
+                prop: "contactPerson",
+                width: "140px",
+                formatter: (data) => {
+                    return `${data.contactPerson || '-'}${data.contactNumber || ''}`
+                }
+            },
+            
+            {
+                label: "管理员账号",
+                prop: "managerPhone",
+            },
+            
+            {
+                label: "服务期项目",
+                prop: "houseNum",
+            },
+            {
+                label: "状态",
+                prop: "lockFlag",
+                width: "100px",
+                formatter: data => {
+                    return data.lockFlag == 1 ? "禁用" : "启用"
+                }
+            },
+        ]
+    }
+}

src/views/building/area.vue

@@ -3,7 +3,7 @@
     <div class="center-er">
       <div class="app-titel">
         <div class="app-titel-name">
-          <div style=" line-height: 32px"></div>
+          <div style="line-height: 32px"></div>
           <div style="margin-left: 20px" v-if="orgType == 0">
             <el-select
               v-model="orgCode"
@@ -21,12 +21,41 @@
             </el-select>
           </div>
         </div>
-        <el-button v-if="cus_build_area_add" class="app-titel-btn" type="primary" @click="addClick"
+        <el-button
+          v-if="cus_build_area_add"
+          class="app-titel-btn"
+          type="primary"
+          @click="addClick"
           >新增</el-button
         >
       </div>
       <div class="app-box">
-        <el-table
+        <avue-crud
+          ref="crud"
+          :page.sync="page"
+          :data="tableData"
+          :table-loading="tableLoading"
+          :option="tableOption"
+          :show-column.sync="showColumn"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        >
+          <template slot-scope="{ row }" slot="menu">
+            <el-button
+              type="text"
+              v-if="cus_build_area_edit"
+              @click="edit(row)"
+              >编辑</el-button
+            >
+            <el-button
+              type="text"
+              v-if="cus_build_area_del"
+              @click="del(row)"
+              >删除</el-button
+            >
+          </template>
+        </avue-crud>
+        <!-- <el-table
           :data="tableData"
           border
           style="width: 100%"
@@ -44,9 +73,9 @@
               <el-button type="text" v-if="cus_build_area_del" @click="del(scope.row)">删除</el-button>
             </template>
           </el-table-column>
-        </el-table>
+        </el-table> -->
       </div>
-      <div class="block">
+      <!-- <div class="block">
         <div class="blockbox">
           <el-pagination
             @size-change="handleSizeChange"
@@ -59,12 +88,14 @@
           >
           </el-pagination>
         </div>
-      </div>
+      </div> -->
+
       <el-dialog
         title="新增区域"
         :visible.sync="dialogVisible"
         @close="formClose"
-        :center="true" width="600px"
+        :center="true"
+        width="600px"
       >
         <el-form
           :model="ruleForm"
@@ -73,7 +104,12 @@
           label-width="100px"
         >
           <el-form-item label="区域名称" prop="areaName">
-            <el-input v-model="ruleForm.areaName" placeholder="区域名称" maxlength="8" clearable></el-input>
+            <el-input
+              v-model="ruleForm.areaName"
+              placeholder="区域名称"
+              maxlength="8"
+              clearable
+            ></el-input>
           </el-form-item>
           <el-form-item label="负责省份" prop="provinceItem">
             <el-select
@@ -92,7 +128,16 @@
             </el-select>
           </el-form-item>
         </el-form>
-        <div slot="footer" class="dialog-footer" style="border-top:1px solid #eee;padding-top: 20px;display: flex;justify-content: end;">
+        <div
+          slot="footer"
+          class="dialog-footer"
+          style="
+            border-top: 1px solid #eee;
+            padding-top: 20px;
+            display: flex;
+            justify-content: end;
+          "
+        >
           <el-button @click="dialogVisible = false">取 消</el-button>
           <el-button type="primary" @click="add" :loading="loadingFlag">{{
             editFlag ? "保 存" : "确 定"
@@ -108,16 +153,21 @@ import { mapGetters } from "vuex";
 export default {
   data() {
     return {
-      tableData: [],
+      tableIdName: "buildingArea", // 当前页面需要的变量
+      tableOption: this.$tableOption.buildingArea, // 当前table配置项
+      tableLoading: false, // 是否显示加载中
+      showColumn: [], // 监听的显示列的变量
       page: {
-        pageNum: 1,
-        pageSize: 30,
-        total: 100,
+        total: 0, // 总页数
+        currentPage: 1, // 当前页数
+        pageSize: 30, // 每页显示多少条
       },
+
+      tableData: [],
       currentPage: 1,
       dialogVisible: false,
       editFlag: false,
-      loadingFlag:false,
+      loadingFlag: false,
       //公司列表
       optionsOrg: [],
       ruleForm: {
@@ -125,7 +175,7 @@ export default {
         provinceItem: [],
       },
       orgCode: "",
-      orgType:localStorage.getItem("orgType"),
+      orgType: localStorage.getItem("orgType"),
       rules: {
         areaName: [
           { required: true, message: "请输入区域名称", trigger: "blur" },
@@ -138,10 +188,23 @@ export default {
       roleFlag: "",
     };
   },
-      computed: {
+  computed: {
     ...mapGetters(["permissions"]),
   },
+
+  watch: {
+    showColumn(nowV) {
+      let params = {
+        tableIdName: this.tableIdName,
+        optionData: nowV,
+      };
+      this.$db.upDate(params);
+    },
+  },
   created() {
+    // 获取显隐的列表
+    this.setTableOption();
+
     this.cus_build_area_add = this.permissions["cus_build_area_add"];
     this.cus_build_area_del = this.permissions["cus_build_area_del"];
     this.cus_build_area_edit = this.permissions["cus_build_area_edit"];
@@ -151,6 +214,16 @@ export default {
     this.getCompanyList();
   },
   methods: {
+    // 获取当前页面的显隐
+    setTableOption() {
+      this.$db.getDataByKey(this.tableIdName).then((res) => {
+        console.log(res, "获取存储的res");
+        if (res.tableIdName == this.tableIdName) {
+          this.showColumn = res.optionData;
+        }
+      });
+    },
+
     addClick() {
       this.dialogVisible = true;
       this.editFlag = false;
@@ -194,7 +267,7 @@ export default {
       this.$refs.ruleForm.validate((valid) => {
         if (valid) {
           // console.log(this.ruleForm)
-          this.loadingFlag=true
+          this.loadingFlag = true;
           if (this.editFlag) {
             axios({
               url: `/autoSR/areamanager`,
@@ -207,9 +280,9 @@ export default {
               },
             }).then((res) => {
               if (res.code == 0) {
-                      setTimeout(() => {
-                  this.loadingFlag=false
-                  console.log('防重')
+                setTimeout(() => {
+                  this.loadingFlag = false;
+                  console.log("防重");
                 }, 1);
                 this.$message.success("编辑成功");
                 this.dialogVisible = false;
@@ -226,9 +299,9 @@ export default {
               },
             }).then((res) => {
               if (res.code == 0) {
-                  setTimeout(() => {
-                  this.loadingFlag=false
-                  console.log('防重')
+                setTimeout(() => {
+                  this.loadingFlag = false;
+                  console.log("防重");
                 }, 1);
                 this.$message.success("添加成功");
                 this.dialogVisible = false;
@@ -252,16 +325,15 @@ export default {
         url: `/autoSR/areamanager/list`,
         method: "get",
         params: {
-          current: this.page.pageNum,
+          current: this.page.currentPage,
           size: this.page.pageSize,
           orgCode: this.orgCode,
         },
       }).then((res) => {
         if (res.code == 0) {
-          console.log(res)
+          console.log(res);
           this.tableData = res.data.records;
           if (res.data.total != 0 && this.tableData.length == 0) {
-            this.page.pageNum--;
             this.getTableList();
           }
           this.page.total = res.data.total;
@@ -275,7 +347,7 @@ export default {
         method: "get",
         params: {
           orgType: localStorage.getItem("orgType"),
-          orgCode:localStorage.getItem('orgCode')
+          orgCode: localStorage.getItem("orgCode"),
         },
       }).then((res) => {
         if (res.code == 0) {
@@ -283,10 +355,10 @@ export default {
           this.optionsOrg = res.data;
           if (this.orgType == 0) {
             this.orgCode = this.optionsOrg[0].orgCode;
-            console.log(this.orgCode,'123')
+            console.log(this.orgCode, "123");
           }
-          if(this.orgType==2){
-            this.orgCode=localStorage.getItem('orgCode')
+          if (this.orgType == 2) {
+            this.orgCode = localStorage.getItem("orgCode");
           }
           this.getTableList();
         }
@@ -316,7 +388,7 @@ export default {
     },
     handleCurrentChange(val) {
       console.log("当前页" + val);
-      this.page.pageNum = val;
+      this.page.currentPage = val;
       this.getTableList();
     },
   },
@@ -370,28 +442,28 @@ export default {
     }
   }
 }
-/deep/ .el-table__header-wrapper{
-  thead{
-    tr{
-      th{
-        background: #F5F7FA;
+/deep/ .el-table__header-wrapper {
+  thead {
+    tr {
+      th {
+        background: #f5f7fa;
         color: #333333;
       }
     }
   }
 }
-/deep/ .el-dialog--center{
+/deep/ .el-dialog--center {
   border-radius: 8px;
-  .el-dialog__title{
+  .el-dialog__title {
     font-weight: bold;
   }
 }
-/deep/ .el-button--primary{
-  background: #2671E2 !important;
-  border: 1px solid #2671E2 !important;
+/deep/ .el-button--primary {
+  background: #2671e2 !important;
+  border: 1px solid #2671e2 !important;
 }
-/deep/ .el-button--text{
-  color: #2671E2;
+/deep/ .el-button--text {
+  color: #2671e2;
 }
 </style>
 

src/views/building/index.vue

@@ -3,45 +3,6 @@
     <!-- 头 -->
     <div class="app-top">
       <div class="app-titel" style="margin-top: 10px">
-        <!-- <div v-if="orgType != 0" class="div-lab">
-          <div class="label">服务到期：</div>
-          <div class="toptimeqhuan">
-            <div
-              :class="{ tophove: searchForm.residueTime == 7 }"
-              @click="tabtimetap(7)"
-            >
-              7天内
-            </div>
-            <div
-              :class="{ tophove: searchForm.residueTime == 15 }"
-              @click="tabtimetap(15)"
-            >
-              15天内
-            </div>
-            <div
-              :class="{ tophove: searchForm.residueTime == 30 }"
-              @click="tabtimetap(30)"
-            >
-              30天内
-            </div>
-          </div>
-        </div>
-        <div v-if="orgType == 0" class="div-lab">
-          <div class="label">合同结束日期：</div>
-          <el-date-picker
-            v-model="starTime"
-            class="div-inp"
-            @change="timeChange1"
-            type="daterange"
-            range-separator="-"
-            :default-time="['00:00:00', '23:59:59']"
-            value-format="yyyy-MM-dd"
-            start-placeholder="开始日期"
-            end-placeholder="结束日期"
-          >
-          </el-date-picker>
-        </div> -->
-
         <div class="div-lab">
           <!-- <div class="label">合同结束日期：</div> -->
           <div class="label" style="min-width: 80px">
@@ -112,21 +73,6 @@
         </div>
         <div class="div-lab" v-show="isOpen">
           <div class="label">地区：</div>
-          <!-- <el-select
-            v-model="searchForm.provinceId"
-            placeholder="请选择"
-            class="div-inp"
-            filterable
-            clearable
-          >
-            <el-option
-              v-for="item in areaList"
-              :key="item.id"
-              :label="item.name"
-              :value="item.id"
-            >
-            </el-option>
-          </el-select> -->
           <el-cascader
             :props="props1"
             @change="locationsChange1"
@@ -145,13 +91,6 @@
           v-show="isOpen"
         >
           <div class="label">运营人员：</div>
-          <!-- <el-input
-            v-model="searchForm.operationalPeople"
-            maxlength="8"
-            clearable
-            class="div-inp"
-            placeholder="请输入内容"
-          ></el-input> -->
           <el-select
             v-model="searchForm.operationStaffId"
             placeholder="请选择"
@@ -209,18 +148,8 @@
             >
             </el-option>
           </el-select>
-          <!-- <el-input
-            class="div-inp"
-            v-model="searchForm.propertyName"
-            placeholder="请输入内容"
-            maxlength="30"
-            clearable
-          ></el-input> -->
         </div>
       </div>
-      <!-- <div class="app-titel" style="margin-top: 10px">
-
-      </div> -->
       <div class="app-titel" style="margin-top: 10px">
         <div class="label" style="color: #ffffff">筛选相关：</div>
         <div style="margin-left: 5px">
@@ -246,15 +175,13 @@
 
     <!-- 表格 -->
     <div class="cen-tab">
-      <!-- currentPage: 1,
-      size: 10,
-      total: 10, -->
       <avue-crud
         ref="crud"
         :page.sync="page"
         :data="tableData"
         :table-loading="tableLoading"
-        :option="$tableOption.buildingIndex"
+        :option="tableOption"
+        :show-column.sync="showColumn"
         @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
       >
@@ -724,6 +651,16 @@ export default {
       }
     };
     return {
+      tableIdName: "buildingIndex", // 当前页面需要的变量
+      tableOption: this.$tableOption.buildingIndex, // 当前table配置项
+      tableLoading: false, // 监听的显示列的变量
+      showColumn: [], // 监听的显示列的变量
+      page: {
+        total: this.total, // 总页数
+        currentPage: 1, // 当前页数
+        pageSize: this.size, // 每页显示多少条
+      },
+
       isOpen: false,
       props: {
         lazy: true,
@@ -809,7 +746,6 @@ export default {
         operationalPeople: "",
         operationStaffId: "",
       },
-      tableLoading: false,
       areaList: [],
       operaList: [],
       options1: [
@@ -851,12 +787,6 @@ export default {
         },
       ],
 
-      page: {
-        total: this.total, // 总页数
-        currentPage: 1, // 当前页数
-        pageSize: this.size, // 每页显示多少条
-      },
-
       value: "",
       input: "",
       sysFlag: "0",
@@ -959,7 +889,18 @@ export default {
   computed: {
     ...mapGetters(["permissions"]),
   },
+  watch: {
+    showColumn(nowV) {
+      let params = {
+        tableIdName: this.tableIdName,
+        optionData: nowV,
+      };
+      this.$db.upDate(params);
+    },
+  },
   created() {
+    // 获取显隐的列表
+    this.setTableOption();
     this.cus_build_index_add = this.permissions["cus_build_index_add"];
     this.cus_build_index_edit = this.permissions["cus_build_index_edit"];
     this.cus_build_index_change = this.permissions["cus_build_index_change"];
@@ -1009,32 +950,46 @@ export default {
     this.zkhousePages();
   },
   methods: {
+    // 获取当前页面的显隐
+    setTableOption() {
+      this.$db.getDataByKey(this.tableIdName).then((res) => {
+        console.log(res, "获取存储的res");
+        if (res.tableIdName == this.tableIdName) {
+          this.showColumn = res.optionData;
+        }
+      });
+    },
+
     // 检测是否可以展示某些字段
     checkOption() {
       let checkArr = ["代理商", "公司", "运营人员", "项目类型"];
       checkArr.forEach((item) => {
-        let index = this.$tableOption.buildingIndex.column.findIndex(
+        let index = this.$tableOption[this.tableIdName].column.findIndex(
           (findObj) => item == findObj.label
         );
-        let obj = this.$tableOption.buildingIndex.column[index];
-        if (obj.label == "代理商" && this.orgType == 0) {
-          obj.hide = false;
-          obj.showColumn = true;
-        }
-        if ((obj.label == "公司" || obj.label == "项目类型") && this.orgType != 2) {
-          obj.hide = false;
-          obj.showColumn = true;
-        }
+        if (index >= 0) {
+          let obj = this.$tableOption[this.tableIdName].column[index];
+          if (obj.label == "代理商" && this.orgType == 0) {
+            obj.hide = false;
+            obj.showColumn = true;
+          }
+          if (
+            (obj.label == "公司" || obj.label == "项目类型") &&
+            this.orgType != 2
+          ) {
+            obj.hide = false;
+            obj.showColumn = true;
+          }
 
-        if (obj.label == "运营人员" && (this.orgType == 0 || this.orgType == 1)) {
-          obj.hide = false;
-          obj.showColumn = true;
+          if (
+            obj.label == "运营人员" &&
+            (this.orgType == 0 || this.orgType == 1)
+          ) {
+            obj.hide = false;
+            obj.showColumn = true;
+          }
         }
       });
-
-      console.log(this.$tableOption.buildingIndex);
-
-      // return this.$tableOption.buildingIndex
     },
 
     isSystoleForm() {
@@ -1473,6 +1428,10 @@ export default {
         // console.log(res)
         this.tableData = res.data.records;
         this.page.total = res.data.total;
+
+        this.$nextTick(() => {
+          this.$refs.crud.doLayout();
+        });
       });
     },
     async getProvinceList(parentId = 0) {

src/views/building/table.js

@@ -1,6 +1,5 @@
 export default {
     buildingIndex: {
-        tableIdName: "buildingIndex",
         border: true,
         index: false,
         height: 500,
@@ -11,13 +10,12 @@ export default {
         menu: true,
         align: "center",
         refreshBtn: false,
-        showColumnBtn: false,
         searchSize: "mini",
         searchMenuSpan: 9,
         delBtn: false,
         addBtn: false,
         editBtn: false,
-        viewBtn: true,
+        viewBtn: false,
         size: "small",
         column: [
             {
@@ -125,7 +123,35 @@ export default {
                     return data.lockFlag == 1 ? "禁用" : "启用"
                 }
             },
-
+        ]
+    },
+    buildingArea: {
+        border: true,
+        index: false,
+        height: 500,
+        indexLabel: "序号",
+        stripe: true,
+        menuAlign: "center",
+        menuWidth: 146,
+        menu: true,
+        align: "center",
+        refreshBtn: false,
+        searchSize: "mini",
+        searchMenuSpan: 9,
+        delBtn: false,
+        addBtn: false,
+        editBtn: false,
+        viewBtn: false,
+        size: "small",
+        column: [
+            {
+                label: "区域名称",
+                prop: "areaName",
+            },
+            {
+                label: "负责区域",
+                prop: "provinceName",
+            },
         ]
     }
 }