厂商账号管理

src/App.vue

@@ -74,10 +74,10 @@ export default {
         if(res.status === 200){
           if(res.data.code === 200) {
             let userInfo = res.data.data;
-            if (userInfo.role == '1') {
-              this.isManufacturer = 'manufacturer';
-            } else {
+            if (userInfo.role == '1' || userInfo.role == '2') {
               this.isManufacturer = 'distributor';
+            } else {
+              this.isManufacturer = 'manufacturer';
             }
             this.userAccount = userInfo.userAccount;
             localStorage.setItem("userId", userInfo.userAccount);

src/views/account/AccountIndex.vue

@@ -4,174 +4,174 @@
     <div class="search">
       <div class="input">
         <img src="../../img/search.png" />
-        <input type="text" @focus="focusInput" v-model="inputValue" />
+        <input
+          type="text"
+          v-model="inputValue"
+          placeholder="请输入要搜索的经销商或DLR Code"
+        />
       </div>
       <div class="current_button" @click="search">搜索</div>
     </div>
-    <div class="option">
-      <div class="selectArea">
-        <p>选择区域</p>
-        <select v-model="areaValue" @change="areaOption">
-          <option value="">请选择</option>
-          <option v-for="(item, index) in areaList" :key="index">
-            {{ item.area }}
-          </option>
-        </select>
+    <div class="count">
+      <div class="option">
+        <div class="selectArea">
+          <p>选择区域</p>
+          <select v-model="areaValue">
+            <option value="">请选择</option>
+            <option v-for="(item, index) in areaList" :key="index">
+              {{ item }}
+            </option>
+          </select>
+        </div>
+        <div class="selectPlate">
+          <p>媒体平台</p>
+          <select v-model="plateValue">
+            <option value="">请选择</option>
+            <option v-for="(item, index) in platesList" :key="index">
+              {{ item.dictName }}
+            </option>
+          </select>
+        </div>
+        <div class="current_button" @click="submit">确定</div>
       </div>
-      <div class="selectPlate">
-        <p>媒体平台</p>
-        <select v-model="plateValue" @change="plateOption">
-          <option v-for="(item, index) in platesList" :key="index">
-            {{ item }}
-          </option>
-        </select>
-      </div>
-      <div class="current_button" @click="submit">确定</div>
+      <Count :sum="sum" />
+    </div>
+
+    <Table :tableData="tableData" @edit_data="editData"> </Table>
+    <div v-if="sum > 0">
+      <TablePage
+        :totalPage="totalPage"
+        :currentPage="currentPage"
+        @change_page="changePage"
+        @jump_page="jumpPage"
+      >
+      </TablePage>
     </div>
-    <Table
-      :tableData='getDateList'
-      @edit_data='editData'
-    > </Table>
   </div>
 </template>
 
 <script>
 import Table from "./components/AccountTable";
+import TablePage from "../../components/TablePage";
+import Count from "../../components/Count";
 export default {
   components: {
     Table,
+    TablePage,
+    Count,
   },
   data() {
     return {
-      inputValue: "请输入要搜索的经销商或DLR Code",
-      areaList: [
-        {
-          sign: "all",
-          area: "全区",
-          checked: false,
-        },
-        {
-          sign: "n",
-          area: "北区",
-          checked: false,
-        },
-        {
-          sign: "s",
-          area: "南区",
-          checked: false,
-        },
-        {
-          sign: "e",
-          area: "东区",
-          checked: false,
-        },
-        {
-          sign: "self",
-          area: "自定义分组",
-          checked: false,
-        },
-      ],
-      platesList: ["全部", "微信订阅号", "微信服务号", "抖音", "今日头条", "微信视频号"],
+      inputValue: "",
+      areaList: [],
+      platesList: [],
       areaValue: "",
       plateValue: "",
       tableData: [],
-      getDateList: [
-        // { num: "1", id: "123", dlr: 'L0201', area: '北区', distributor: '北京博瑞',plate:'微信公众号', account: '雷克萨斯北京博瑞4S店', isAttest: 0, fans: 118529},
-        // { num: "1", id: "123", dlr: 'L0201', area: '北区', distributor: '北京博瑞',plate:'微信公众号', account: '雷克萨斯北京博瑞4S店', isAttest: 0, fans: 118529},
-        // { num: "1", id: "123", dlr: 'L0201', area: '北区', distributor: '北京博瑞',plate:'微信公众号', account: '雷克萨斯北京博瑞4S店', isAttest: 0, fans: 118529},
-        // { num: "1", id: "123", dlr: 'L0201', area: '北区', distributor: '北京博瑞',plate:'微信公众号', account: '雷克萨斯北京博瑞4S店', isAttest: 1, fans: 118529}
-      ],
-      functionData: [],
+      dictList: [],
+      currentPage: 1,
+      sum: 0,
+      pageSize: 20,
     };
   },
+  computed: {
+    // 表格总页数
+    totalPage() {
+      return Math.ceil(this.sum / this.pageSize);
+    },
+  },
   methods: {
-    focusInput: function () {
-      this.inputValue = "";
+    // 获取某一页面的数据，展示在表格
+    changePage: function (page) {
+      this.currentPage = page;
+      let req = {
+        page: this.currentPage,
+        rows: this.pageSize,
+      };
+      this.getDealerListRequest(req);
     },
-    search: function () { //通过经销商或DLR CODE查询
-      console.log(this.inputValue);
-      this.$http({
-        method: 'post',
-        url: '/sys/agent/selectAgentInfoPage',
-        data: {
-          queryParams:this.inputValue
-        },
-      }).then((res) => {
-        if(res.data.code === 200) {
-          this.getDateList = res.data.data;
-        }else {
-          console.log('message', res.data.message);
-        }
-      }).catch((err) => {
-        console.log(err);
-      })
-
+    // 点击上一页，下一页，首页，尾页
+    jumpPage: function (item) {
+      switch (item) {
+        case 1:
+          this.currentPage = 1;
+          break;
+        case 2:
+          this.currentPage = this.currentPage - 1;
+          break;
+        case 3:
+          this.currentPage = this.currentPage + 1;
+          break;
+        case 4:
+          this.currentPage = this.totalPage;
+          break;
+      }
+      let req = {
+        page: this.currentPage,
+        rows: this.pageSize,
+      };
+      this.getDealerListRequest(req);
     },
-    areaOption: function () {
-      console.log(this.areaValue);
+    search: function () {
+      //通过经销商或DLR CODE查询
+      console.log(this.inputValue);
+      let req = {
+        queryParams: this.inputValue,
+        page: this.currentPage,
+        rows: this.pageSize,
+      };
+      this.getDealerListRequest(req);
     },
-    plateOption: function () {
-      console.log(this.plateValue);
+    plateOption: function (e) {
+      let index = e.target.options.selectedIndex;
+      console.log(index);
     },
     submit: function () {
-      console.log(this.plateValue);
-      console.log(this.areaValue);
-        this.$http({
-            method: 'post',
-            url: '/sys/agent/selectAgentInfoPage',
-            data: {
-                queryParams:this.areaValue
-            },
-        }).then((res) => {
-            if(res.data.code === 200) {
-                this.getDateList = res.data.data;
-            }else {
-                console.log('message', res.data.message);
-            }
-        }).catch((err) => {
-            console.log(err);
-        })
+      let req = {
+        localArea: this.areaValue,
+        platformName: this.plateValue,
+        page: this.currentPage,
+        rows: this.pageSize,
+      };
+      this.getDealerListRequest(req);
     },
-    getData: function () {
-      this.tableData = [];
-      this.functionData = [];
-      this.getDateList.forEach((element) => {
-        this.tableData.push({
-          num: element.num,
-          dlr: element.dlr,
-          area: element.area,
-          distributor: element.distributor,
-          plate: element.plate,
-          account: element.account,
-          isAttest: element.isAttest,
-          fans: element.fans
-
-        });
-        this.functionData.push({
-          id: element.id,
-        });
+    editData: function (i, isAttesta, fansNum, accountCode) {
+      console.log("完成编辑", i, isAttesta, fansNum, accountCode);
+      let req = {
+        id: this.tableData[i]["id"],
+        authentication: isAttesta === "是" ? true : false,
+        fansCount: fansNum,
+        accountCode,
+      };
+      this.updateMediaAccountInfo(req).then(() => {
+        let dataObj = {
+          page: this.currentPage,
+          rows: this.pageSize,
+        };
+        this.getDealerListRequest(dataObj);
       });
     },
-    editData: function (i, isAttesta, fansNum) {
-      console.log('完成编辑', i, isAttesta, fansNum);
-    },
-    getDealerListRequest(){//获取经销商列表
+    //获取经销商列表
+    getDealerListRequest(data = {}) {
       this.$http({
-        method: 'post',
-        url: '/sys/mediaAccount/selectMediaAccountPage',
-        data: {
-        },
-      }).then((res) => {
-          if(res.data.code === 200) {
-            this.getDateList = res.data.data;
-           // alert('success!')
-          }else {
-            console.log('message', res.data.message);
-          }
-      }).catch((err) => {
-        console.log(err);
+        method: "post",
+        url: "/sys/mediaAccount/selectMediaAccountPage",
+        data,
       })
-    }
+        .then((res) => {
+          if (res.data.code === 200) {
+            console.log(res);
+            this.tableData = res.data.data;
+            this.sum = res.data.count;
+            // alert('success!')
+          } else {
+            console.log("message", res.data.message);
+          }
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    },
     // testSyncInterFace(){//测试同步接口
     //   this.$http({
     //     method: 'post',
@@ -193,11 +193,101 @@ export default {
     //     console.log(err);
     //   })
     // }
+    // 获取 所有区域  接口
+    getAreaList: function () {
+      this.$http({
+        method: "post",
+        url: "/sys/agent/selectAgentAreaInfoList",
+      })
+        .then((res) => {
+          if (res.data && res.data.code === 200) {
+            this.areaList = res.data.data;
+          } else {
+            console.log(res);
+          }
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    },
+    // 获取内容分类、媒体平台、常用参数接口的标识，再调接口时需要用到
+    selectSysDataDictList: function () {
+      return new Promise((resolve, reject) => {
+        this.$http({
+          method: "post",
+          url: "/sys/dataDict/selectSysDataDictList",
+          data: {},
+        })
+          .then((res) => {
+            if (res.data && res.data.code === 200) {
+              let dictCode = res.data.data[3]["dictCode"];
+              let id = res.data.data[3]["id"];
+              this.getMediaList(dictCode, id);
+              resolve();
+            } else {
+              console.log(res);
+              reject();
+            }
+          })
+          .catch((err) => {
+            console.log(err);
+            reject();
+          });
+      });
+    },
+    // 获取列表数据   接口
+    getMediaList: function (dictCode, parentId) {
+      this.$http({
+        method: "post",
+        url: "/sys/dataDict/selectSysDataDictPage",
+        data: {
+          dictCode,
+          parentId,
+        },
+      })
+        .then((res) => {
+          if (res.data && res.data.code === 200) {
+            this.platesList = res.data.data;
+          } else {
+            console.log(res);
+          }
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    },
+    // 编辑  接口
+    updateMediaAccountInfo: function (data) {
+      return new Promise((resolve, reject) => {
+        this.$http({
+          url: "/sys/mediaAccount/updateMediaAccountInfo",
+          method: "post",
+          data,
+        })
+          .then((res) => {
+            if (res.data && res.data.code === 200) {
+              console.log(res);
+              resolve();
+            } else {
+              alert("编辑失败，请重试");
+              console.log(res);
+            }
+          })
+          .catch((err) => {
+            alert("编辑失败，请重试");
+            reject(err);
+          });
+      });
+    },
   },
   mounted() {
-    this.plateValue = this.platesList[0];
-    this.getData();
-    this.getDealerListRequest();
+    this.selectSysDataDictList();
+    this.getAreaList();
+    let req = {
+      page: this.currentPage,
+      rows: this.pageSize,
+    };
+    this.getDealerListRequest(req);
   },
 };
 </script>
@@ -263,5 +353,9 @@ export default {
       }
     }
   }
+  .count{
+    display: flex;
+    justify-content: space-between;
+  }
 }
 </style>

src/views/account/components/AccountTable.vue

@@ -29,10 +29,10 @@
           <td>{{ obj.dlrCode }}</td>
           <td>{{ obj.localArea }}</td>
           <td>{{ obj.dlrName }}</td>
-          <td>{{ obj.plate || '微信公众号' }}</td>
-          <td>{{ obj.account || '雷克萨斯北京博瑞4S店'}}</td>
-          <td>{{ obj.showable === 1 ? "是" : "否" }}</td>
-          <td>{{ obj.fans || 118529}}</td>
+          <td>{{ obj.platformName }}</td>
+          <td>{{ obj.accountCode }}</td>
+          <td>{{ obj.authorizationName }}</td>
+          <td>{{ obj.fansCount}}</td>
           <td class="operation">
             <span @click="edit(index)">编辑</span>
           </td>
@@ -62,7 +62,7 @@ export default {
     //  表格一页共有多少数据
     pageSize: {
       type: Number,
-      default: 2,
+      default: 20,
     },
   },
   components: {
@@ -83,15 +83,16 @@ export default {
       this.modalData = this.tableData[i];
     },
     // 模态框确认
-    editData: function (isAttesta, fansNum) {
+    editData: function (isAttesta, fansNum, accountCode) {
       this.deleteModalFlag = false;
-      this.$emit("edit_data", this.index, isAttesta, fansNum);
+      this.$emit("edit_data", this.index, isAttesta, fansNum, accountCode);
     },
     // 模态框取消
     closeModal: function () {
       this.deleteModalFlag = false;
     },
-    mounted() {},
+    mounted() {
+    },
   },
 };
 </script>

src/views/account/components/EditModal.vue

@@ -17,23 +17,23 @@
         </div>
         <div class="plate">
           <p style="width: 100px">所属平台</p>
-          <p>{{ dataObj.plate || '微信公众号' }}</p>
+          <p>{{ dataObj.platformName}}</p>
         </div>
         <div class="account">
           <p style="width: 100px">平台账号</p>
-          <input ref="inputValue" :value="dataObj.account" />
+          <input v-model="accountCode"/>
         </div>
         <div class="isAttest">
           <p style="width: 100px">是否认证</p>
           <select ref="selectValue">
             <!-- 原来列表展示什么，select默认展示 -->
-            <option>{{ dataObj.showable === 0 ? "否" : "是" }}</option>
-            <option>{{ dataObj.showable === 0 ? "是" : "否" }}</option>
+            <option>{{ dataObj.authorizationName === '是' ? "是" : "否" }}</option>
+            <option>{{ dataObj.authorizationName === '是' ? "否" : "是" }}</option>
           </select>
         </div>
         <div class="fans">
           <p style="width: 100px">粉丝数</p>
-          <input ref="inputValue" :value="dataObj.fans" />
+          <input ref="inputValue" v-model="fansNums"/>
         </div>
       </div>
       <div class="btn">
@@ -61,26 +61,30 @@ export default {
     },
   },
   data() {
-    return {};
+    return {
+      accountCode: this.dataObj['accountCode'],
+      fansNums: this.dataObj['fansNums']
+    };
   },
   methods: {
     submit: function () {
       let isAttesta = this.$refs.selectValue.value || "";
-      let fansNum = this.$refs.inputValue.value || 0;
+      let fansNum = this.fansNums;
       fansNum = +fansNum;
       if (fansNum <= 0) {
         alert("请填写大于零的整数");
       } else if (Math.ceil(fansNum) !== fansNum) {
         alert("请填写大于零的整数");
       } else {
-        this.$emit("edit_data", isAttesta, fansNum);
+        this.$emit("edit_data", isAttesta, fansNum, this.accountCode);
       }
     },
     hideModal: function () {
       this.$emit("hide_modal");
     },
   },
-  mounted() {},
+  mounted() {
+  },
 };
 </script>
 

src/views/data/UploadInfor.vue

@@ -111,7 +111,7 @@
         :totalPage="totalPage"
         :currentPage="currentPage"
         @change_page="changePage"
-        @jump_page="jumpPage"
+        @jump_page="jumpPage "
       />
     </div>
     <div class="uploadFile">