账号管理，添加字段。

src/App.vue

@@ -37,8 +37,8 @@
 .search-span {
   font-size: 16px;
   line-height: 32px;
-  margin-left: 20px;
+  margin-left: 10px;
-  margin-right: 20px;
+  margin-right: 10px;
 }
 
 .search-row{

src/pages/user/AccountManager.vue

@@ -2,29 +2,28 @@
     <div class="div-page">
         <template>
             <Row class="search-row">
-                <i-col span="18">
+                <!--                    <span class="search-span">账户名</span>-->
-                    <span class="search-span">账户名</span>
+                <i-input placeholder="搜索用户名/账户" class="left-15 search-select" v-model="searchContent"/>
-                    <i-input placeholder="搜索用户名/账户" class="search-select" v-model="searchContent"/>
                 <span class="search-span">角色</span>
-                    <Select filterable placeholder="请选择角色" v-model="changeRoleId" class="left-15 search-select">
+                <Select filterable placeholder="请选择角色" v-model="selectedRoleId" class="left-15 search-select" @on-change="onRoleChangeLister">
                     <Option v-for="item in roleList" :value="item.id" :key="item.id">{{ item.name }}</Option>
                 </Select>
-                    <span class="search-span">店铺</span>
+                <span class="left-15 txt-font-a">零售公司</span>
-                    <Select filterable placeholder="请选择店铺" v-model="changeShopId" class="left-15 search-select">
+                <Select v-model="selectedCompanyId" filterable class="left-15 txt-font-a search-select"
-                        <Option v-for="item in shopList" :value="item.id" :key="item.name">{{ item.name }}</Option>
+                        @on-change="companySelect">
+                    <Option v-for="item in companyList" :value="item.id" :key="item.id">{{ item.name }}</Option>
+                </Select>
+                <span class="left-15 txt-font-a">店铺</span>
+                <Select filterable placeholder="全部" v-model="selectedShopId" class="left-15 txt-font-a search-select"
+                        @on-change="downShopChange">
+                    <Option v-for="item in shopList" :value="item.id" :key="item.id">{{ item.name }}</Option>
                 </Select>
                 <Button type="primary" class="search-btn" @click="listAccountInfoFunction">查询</Button>
-                </i-col>
+                <div class="search-div-btn">
-                <i-col span="6" class="search-btn-add-row">
+                    <Button type="primary" class="search-btn"
-                    <Button type="primary"
                             @click="addOneAccount()">+添加账户
                     </Button>
-                    <!--                <Button type="primary" ghost style="margin-bottom: 20px;margin-right: 20px;float:right;margin-top: 25px"-->
+                </div>
-                    <!--                        @click="uploadAccount">批量导入账户-->
-                    <!--                </Button>-->
-                </i-col>
-
-
             </Row>
         </template>
         <Table :loading="loading" :columns="columns1" :data="data1" class="table-account" size="small"></Table>
@@ -45,10 +44,13 @@
 
 <script>
     import accountManagement from "../../services/account/AccountManagement";
+    import zeroExtend from "../../services/customer/zeroExtend";
+    import staff from "../../services/staff/staff";
 
     export default {
         data() {
             return {
+                userId: JSON.parse(sessionStorage.getItem("loginInfo")).userId,
                 loading: false,
                 modal13: false,
                 roleList: [
@@ -73,8 +75,6 @@
                         name: '导购',
                     },
                 ],
-                shopList: [
-                ],
                 columns1: [
                     {
                         type: 'index2',
@@ -82,8 +82,7 @@
                         title: "序号",
                         align: 'center',
                         render: (h, params) => {
-                            debugger
+                            return h('span', params.index + (this.pageNum - 1) * this.pageSize + 1);
-                            return h('span', params.index + (this.pageNum- 1) * this.pageSize + 1);
                         }
                     },
                     {
@@ -110,6 +109,10 @@
                         title: '零售公司',
                         key: 'companyName'
                     },
+                    {
+                        title: '零售公司编码',
+                        key: 'companyCode'
+                    },
                     {
                         title: '店铺',
                         key: 'shopName'
@@ -174,26 +177,30 @@
                         }
                     },
                 ],
-                data1: [
+                data1: [],
-                ],
+                selectedRoleId: 0,
-                roleId: '',
-                shopId: '',
                 //分页内容
                 totalSize: 0,
                 pageNum: 1,
                 pageSize: 10,
                 //搜索内容
-                searchContent: null,
+                searchContent: '',
-                changeShopId: null,
-                changeRoleId: null,
                 updateAccountId: 0,
                 updateUserId: 0,
                 item: null,
+                companyList: [], // 零售公司列表
+                selectedCompanyId: 0, // 选中的零售公司ID
+                organizationalList: [],
+                selectedShopId: 0, // 店铺ID
+                shopList: [], // 店铺列表
             }
         },
         mounted: function () {
+            this.getSelectList();
             this.listRoleInfo();
-            this.listOfShop();
+            // this.listOfShop();
+
+            this.listAccountInfoFunction();
             // 绑定enter事件
             this.enterKeyup();
         },
@@ -233,24 +240,23 @@
                             that.item = that.$route.query;
                             //别的页面跳转过来
                             if (that.item.id === undefined) {
-                                that.changeRoleId = "0";
+                                that.selectedRoleId = "0";
                             } else {
-                                that.changeRoleId = that.item.id;
+                                that.selectedRoleId = that.item.id;
                             }
                         } else {
-                            that.changeRoleId = "0";
+                            that.selectedRoleId = "0";
                         }
-                        that.listAccountInfoFunction();
+                        // that.listAccountInfoFunction();
                     }
                 })
             },
             //查询所有店铺
             listOfShop() {
                 let that = this;
-                this.loading = true;
                 that.shopList = [];
                 let request = {
-                    userId: JSON.parse(sessionStorage.getItem("loginInfo")).userId
+                    userId: this.userId
                 };
                 accountManagement.listAllShopApi(request, function (data) {
                     data = data.data;
@@ -264,36 +270,61 @@
                             id: '-1',
                             name: "全部"
                         });
-                        that.changeShopId = '-1';
+                        that.selectedShopId = '-1';
                         data = data.results;
                         for (let i = 0; i < data.length; i++) {
                             let row = data[i];
                             that.shopList.push(row);
                         }
+
+                        that.listAccountInfoFunction();
                     }
                 }, function () {
                     that.loading = false;
                 });
             },
-            //搜索账号内容
+            /**基础数据：区域list、零售公司list、好友list*/
-            listAccountInfoFunction: function () {
+            getSelectList: function () {
                 let that = this;
-                let roleId = that.changeRoleId;
+                let request = {
-                if (that.changeRoleId === "0") {
+                    userId: this.userId,
-                    roleId = null;
+                };
+                zeroExtend.getSelectListRequest(request, function (data) {
+                    if (data.data.code !== "0000") {
+                        that.$Message.error("系统异常");
                     }
-                let shopId = that.changeShopId;
+                    data = data.data.results;
-                if (that.changeShopId === "-1") {
+                    if (data) {
-                    shopId = null;
+                        that.organizationalList = data;
+                        that.companyList = that.organizationalList.filter(item => item.level === 2);
                     }
+                    //插入全部选项
+                    that.insertAllOption();
+                });
+            },
+            insertAllOption: function () {
+                if (this.companyList.length === 0 || this.companyList[0].id !== 0) {
+                    this.companyList.splice(0, 0, {"id": 0, "name": "全部"});
+                }
+                if (this.shopList.length === 0 || this.shopList[0].id !== 0) {
+                    this.shopList.splice(0, 0, {"id": 0, "name": "全部"});
+                }
+            },
+            //搜索账号内容
+            listAccountInfoFunction: function () {
+                this.loading = true;
+                let that = this;
                 let request = {
                     searchContent: that.searchContent,
                     pageNum: that.pageNum,
                     pageSize: that.pageSize,
-                    roleId: roleId,
+                    roleId: that.selectedRoleId,
-                    shopId: shopId
+                    companyId: that.selectedCompanyId,
+                    shopId: that.selectedShopId
                 };
                 accountManagement.listAccountInfoApi(request, function (data) {
+                    that.loading = false;
+
                     that.data1 = [];
                     data = data.data;
                     if (data.code === '0001') {
@@ -302,7 +333,7 @@
                     }
                     if (data.code === '0000') {
                         if (data) {
-                            let row = data.results.records;
+                            let row = data.results.list;
                             that.totalSize = data.results.total;
                             for (let i = 0; i < row.length; i++) {
                                 let entity = row[i];
@@ -328,7 +359,9 @@
                             }
                         }
                     }
-                })
+                }, function () {
+                    that.loading = false;
+                });
 
             },
             //删除账号
@@ -374,18 +407,75 @@
                     this.listAccountInfoFunction();
                 }
             },
+            // 角色选择改变事件
+            onRoleChangeLister: function(value){
+                let val = value;
+
+            },
+            //零售公司选择
+            companySelect: function (value) {
+                this.selectedCompanyId = value;
+                //加载店铺
+                this.downShopData(this.selectedCompanyId);
+                this.selectedStore = 0;
+                this.shopList = [];
+            },
+            // 店铺选择
+            downShopChange: function (value) {
+                let val = value;
+                let that = this;
+                this.selectedStore = val;
+
+            },
+            downShopData: function (selected) {
+                let that = this;
+                let companyId = selected;
+                if (!selected) {
+                    companyId = that.companyId;
+                }
+                let customerIds = [];
+                this.customerList = [];
+                if (companyId === 0) {
+                    //
+                    that.selectedShopId = 0;
+                } else {
+                    this.customerList = this.organizationalList.filter(item => item.parentId === companyId && item.level === 3);
+                    this.insertAllOption();
+                }
+                customerIds = this.customerList.map(item => item.id);
+
+                let request =
+                    {userId: that.userId, customerIds: JSON.stringify(customerIds)};
+                staff.downShopData(request, function (data) {
+                    data = data.data.results;
+                    if (data) {
+                        that.shopList = [{"id": 0, "name": "全部"}];
+                        for (let i = 0; i < data.length; i++) {
+                            let entity = data[i];
+                            if (entity) {
+                                that.shopList.push(entity);
+                            }
+                        }
+                    }
+                })
+            },
         },
 
     }
 </script>
 
 <style scoped>
+
+    .left-15 {
+        margin-left: 15px;
+    }
+
     .div-page {
         margin-top: 20px;
         margin-left: 20px;
     }
 
-    .search-row{
+    .search-row {
         background-color: #F7F8FA;
         line-height: 80px;
     }
@@ -399,7 +489,7 @@
         padding-right: 20px;
     }
 
-    .table-account{
+    .table-account {
         margin-top: 30px;
     }
 </style>

src/services/account/AccountManagement.js

@@ -11,8 +11,8 @@ import http from '../CommonHttp'
  * @param call
  * @returns {Promise<any | never>}
  */
-export function listAccountInfoApi(params, call) {
+export function listAccountInfoApi(params, call, errorCallback) {
-  return http.post('account/info/list', params).then(call);
+  return http.post('account/info/list', params).then(call).catch(errorCallback);
 }
 /**
  * 删除账号