From 35a7a8b16f683a9f0ed1683c423581ee4d63ece2 Mon Sep 17 00:00:00 2001
From: jiangyy <jiang478938504@126.com>
Date: Mon, 22 Mar 2021 15:27:19 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=A2=E6=88=B7=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../customer/customize/CategoryList.vue       | 332 ++++++++++++++++++
 .../customer/customize/CustomerList.vue       |  27 +-
 .../modules/workPc/customer-add-or-update.vue |  64 ++--
 3 files changed, 388 insertions(+), 35 deletions(-)
 create mode 100644 epmet-oper-web/src/views/modules/customer/customize/CategoryList.vue

diff --git a/epmet-oper-web/src/views/modules/customer/customize/CategoryList.vue b/epmet-oper-web/src/views/modules/customer/customize/CategoryList.vue
new file mode 100644
index 0000000..25da92a
--- /dev/null
+++ b/epmet-oper-web/src/views/modules/customer/customize/CategoryList.vue
@@ -0,0 +1,332 @@
+<template>
+  <div>
+
+    <div class="div_btn">
+      <span style="margin-right:20px">{{customerName}}</span>
+      <el-button type="default"
+                 size="mini"
+                 @click="diaCancel">取消返回</el-button>
+      <el-button type="primary"
+                 size="mini"
+                 @click="addShow">自定义初始化</el-button>
+
+    </div>
+    <el-tabs v-model="activeName"
+             @tab-click="tabClick"
+             class="el-tabs">
+      <el-tab-pane label="居民端"
+                   name="resi">
+
+        <c-table column-type="index"
+                 ref="table_resi"
+                 :url="tableUrl"
+                 :params="tableParamsResi"
+                 :operationWidth="80"
+                 keyword="FootBarCustomize"
+                 :operations="operations"
+                 :orderOperations="orderOperations"
+                 :tableHeight="tableHeight"
+                 @editShow="editShow"
+                 @changeState="changeState"
+                 @moveUp="moveUp">
+        </c-table>
+      </el-tab-pane>
+      <el-tab-pane label="工作端"
+                   name="gov">
+        <c-table column-type="index"
+                 ref="table_work"
+                 :url="tableUrl"
+                 :params="tableParamsWork"
+                 :operationWidth="80"
+                 keyword="FootBar"
+                 :operations="operations"
+                 :orderOperations="orderOperations"
+                 :tableHeight="tableHeight"
+                 @editShow="editShow"
+                 @changeState="changeState"
+                 @moveUp="moveUp">
+        </c-table>
+      </el-tab-pane>
+    </el-tabs>
+
+    <edit ref="ref_edit"
+          @editDiaOK="editDiaOK">
+
+    </edit>
+
+  </div>
+</template>
+
+<script>
+import CDialog from '@c/CDialog'
+import CTable from '@c/CTableNoPage'
+import Edit from './FootbarEdit'
+
+import { mapGetters } from 'vuex'
+import { Loading } from 'element-ui' // 引入Loading服务
+
+let loading// 加载动画
+
+export default {
+  data () {
+    return {
+      activeName: 'resi',
+      customerId: '', // 客户id，父组件传
+      customerName: '', // 客户名称，父组件传
+
+      // 查询相关
+      tableParamsWork: {
+        appType: 'gov',
+      },
+      tableParamsResi: {
+        appType: 'resi',
+      },
+      tableData: [],
+      // 列表相关
+      tableUrl: 'https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/oper/customize/customerfootbar/customerfootbars',
+      // tableUrl: '/oper/customize/customerfootbar/customerfootbars',
+
+      operations: [
+        {
+          lable: (display) => {
+            if (display === 0) {
+              return '隐藏'
+            } else {
+              return '显示'
+            }
+          }, // 按钮显示名称
+
+          size: 'mini',
+          style: 'margin: 0 6px;',
+          type: 'text',
+          slot: '',
+          plain: false,
+          methodName: 'changeState', // 回调方法名称
+          isShow: (row) => {
+            return true
+          }
+        },
+        {
+          lable: '修改', // 按钮显示名称
+          size: 'mini',
+          style: 'margin: 0 6px;',
+          type: 'text',
+          slot: '',
+          plain: false,
+          methodName: 'editShow', // 回调方法名称
+          isShow: (row) => {
+            return true
+          }
+        }
+      ],
+      orderOperations: [
+
+        {
+          style: 'width=100px;height=100px',
+          type: 'text',
+          icon: "el-icon-top",
+          methodName: 'moveUp', // 回调方法名称
+          isShow: (row) => {
+            return true
+          }
+        },
+      ],
+
+      // 查询栏下拉框数据
+      form: {
+        dataUrl: [], // 下拉框/单选框/复选框等获取数据的url
+        data: { // 全部下拉框数据
+          fromApp: [
+            {
+              value: 'resi',
+              label: '居民端'
+            },
+            {
+              value: 'gov',
+              label: '工作端'
+            }
+          ]
+
+        }
+      }
+    }
+  },
+  components: {
+    CDialog, CTable, Edit
+  },
+
+  mounted () {
+
+  },
+  computed: {
+    tableHeight () {
+      return this.clientHeight - 60 - 80 - 80
+    },
+    ...mapGetters(['clientHeight', 'env'])
+  },
+  activated () {
+    debugger
+    this.$nextTick(() => {
+      if (this.activeName === 'gov') {
+        this.$refs['table_work'].doLayout() // 解决表格错位
+      } else if (this.activeName === 'resi') {
+        this.$refs['table_resi'].doLayout() // 解决表格错位
+      }
+
+
+    })
+  },
+  methods: {
+    initData (customerId, customerName) {
+      this.customerId = customerId
+      this.customerName = customerName
+      this.tableParamsWork.customerId = customerId
+      this.tableParamsResi.customerId = customerId
+      this.loadResiTableData()
+    },
+    // 刷新
+    refresh () {
+
+      if (this.activeName === 'gov') {
+        this.loadWorkTableData() // 获取表格数据
+      } else if (this.activeName === 'resi') {
+        this.loadResiTableData() // 获取表格数据
+      }
+    },
+    tabClick (tab) {
+      if (tab.name === 'gov') {
+        this.loadWorkTableData() // 获取表格数据
+      }
+      if (tab.name === 'resi') {
+        this.loadResiTableData() // 获取表格数据
+      }
+    },
+    // 加载列表数据
+    loadWorkTableData () {
+      this.$nextTick(() => {
+        this.$refs['table_work'].loadData() // 获取表格数据
+      })
+    },
+    // 加载列表数据
+    loadResiTableData () {
+      this.$nextTick(() => {
+        this.$refs['table_resi'].loadData() // 获取表格数据
+      })
+    },
+    // 新增
+    addShow () {
+      this.$refs['ref_edit'].init('', 'A', this.activeName)
+    },
+    // 编辑
+    editShow (row) {
+      this.$refs['ref_edit'].init(row.id, 'U')
+    },
+    // 改变状态
+    changeState (row, index) {
+      let display = row.display === 0 ? 1 : 0
+      const url = 'https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/oper/customize/customerfootbar/updatedisplaystatus'
+      // const url = '/oper/customize/customerfootbar/updatedisplaystatus'
+      const param = {
+        id: row.id,
+        display: display
+      }
+      window.app.ajax.post(url, param,
+        (data, rspMsg) => {
+          this.$message.success('操作成功' + rspMsg)
+          this.refresh()
+        },
+        (rspMsg, data) => {
+          this.$message.error(rspMsg)
+        })
+    },
+    // 上移
+    moveUp (row, index) {
+
+      if (index > 0) {
+        this.tableData = this.$refs.table.getTableData() // 获取表格数据
+        //console.log(this.tableData)
+        this.startLoading()
+        let resultList = []
+        let one = {}
+        for (let i = 0; i < this.tableData.length; i++) {
+          let obj = {}
+          // eslint-disable-next-line
+          // debugger
+          if (i === index - 1) {
+            one.id = this.tableData[i].id
+            one.orderIndex = index
+          } else if (i === index) {
+            obj.id = this.tableData[i].id
+            obj.orderIndex = index - 1
+            resultList.push(obj)
+            resultList.push(one)
+          } else {
+            obj.id = this.tableData[i].id
+            obj.orderIndex = i
+            resultList.push(obj)
+          }
+        }
+        //console.log(resultList)
+
+        // const url = 'https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/oper/customize/customerfunctiondetail/updatedisplayorder'
+        const url = '/oper/customize/customerfunctiondetail/updatedisplayorder'
+        window.app.ajax.post(url, resultList,
+          (data, rspMsg) => {
+            this.endLoading()
+            this.loadTableData()
+          },
+          (rspMsg, data) => {
+            this.endLoading()
+            this.$message.error(rspMsg)
+          })
+
+      } else {
+        this.$message.warning('无法上移')
+
+        return false
+      }
+    },
+
+    // 取消
+    diaCancel () {
+      this.$emit('cancleBack')
+    },
+
+    editDiaOK () {
+      this.refresh()
+    },
+    editDiaCancel () {
+
+    },
+
+    async renderSelData () { // 渲染下拉框/单选框/复选框等数据
+
+    },
+
+    // 开启加载动画
+    startLoading () {
+      loading = Loading.service({
+        lock: true, // 是否锁定
+        text: '正在加载……', // 加载中需要显示的文字
+        background: 'rgba(0,0,0,.7)' // 背景颜色
+      })
+    },
+    // 结束加载动画
+    endLoading () {
+      // clearTimeout(timer);
+      if (loading) {
+        loading.close()
+      }
+    }
+  }
+}
+</script>
+<style>
+.div_btn {
+  z-index: 10;
+  position: absolute;
+  right: 40px;
+  top: 35px;
+  /* margin: 0 0 20px 0; */
+}
+</style>
diff --git a/epmet-oper-web/src/views/modules/customer/customize/CustomerList.vue b/epmet-oper-web/src/views/modules/customer/customize/CustomerList.vue
index 9e3aca6..5a77ca5 100644
--- a/epmet-oper-web/src/views/modules/customer/customize/CustomerList.vue
+++ b/epmet-oper-web/src/views/modules/customer/customize/CustomerList.vue
@@ -62,6 +62,9 @@
               <el-button type="text"
                          size="small"
                          @click="showMost(scope.row.customerId,scope.row.customerName)">高级配置</el-button>
+              <el-button type="text"
+                         size="small"
+                         @click="showCategory(scope.row.customerId,scope.row.customerName)">分类配置</el-button>
             </template>
           </el-table-column>
         </el-table>
@@ -87,10 +90,14 @@
                       :tableKeywork="'FootBarCustomize'"
                       @cancleBack="cancleBack"></footbar-list>
       </div>
-	  <div v-if="showType==='mostedit'">
-	    <most-list ref="ref_mostlist" @cancleBack="cancleBack"></most-list>
-	  </div>
-
+      <div v-if="showType==='mostedit'">
+        <most-list ref="ref_mostlist"
+                   @cancleBack="cancleBack"></most-list>
+      </div>
+      <div v-if="showType==='category'">
+        <category-list ref="ref_category"
+                       @cancleBack="cancleBack"></category-list>
+      </div>
 
       <el-dialog :visible.sync="funcVisible"
                  title="功能列表"
@@ -112,6 +119,7 @@ import FootbarList from '../../productConfig/footbar/FootbarList'
 import MiniHome from './MiniHome'
 import MostList from './MostList'
 import RoleList from './roleList'
+import categoryList from './CategoryList'
 export default {
   data () {
     return {
@@ -138,7 +146,8 @@ export default {
     MiniHome,
     RoleList,
     FootbarList,
-    MostList
+    MostList,
+    categoryList
   },
   activated () {
     if (this.showType === 'footbar') {
@@ -218,6 +227,14 @@ export default {
         this.$refs['ref_mostlist'].initData(customerId, customerName)
       })
     },
+    // 显示分类配置
+    showCategory (customerId, customerName) {
+      this.showType = 'category'
+      console.log('ref_category', this.$refs['ref_category'])
+      this.$nextTick(() => {
+        this.$refs['ref_category'].initData(customerId, customerName)
+      })
+    },
     // 显示权限配置
     showLimitConfig (customerId, customerName) {
       this.customerId = customerId
diff --git a/epmet-oper-web/src/views/modules/workPc/customer-add-or-update.vue b/epmet-oper-web/src/views/modules/workPc/customer-add-or-update.vue
index dda569a..f8ed7a4 100644
--- a/epmet-oper-web/src/views/modules/workPc/customer-add-or-update.vue
+++ b/epmet-oper-web/src/views/modules/workPc/customer-add-or-update.vue
@@ -5,14 +5,17 @@
              :close-on-press-escape="false">
 
     <div class="customerDiv">
-      <div class="customerItem"
-           v-for="(item,index) in customerList"
-           :key="index">
-        <el-checkbox class="item_check"
-                     v-model="item.check"></el-checkbox>
-        <span class="item_span">{{item.customerName}}</span>
-
-      </div>
+
+      <el-checkbox-group v-model="menuList">
+
+        <el-checkbox v-for="(item,index) in customerList"
+                     :key="index"
+                     class="customerItem"
+                     :label="item.customerId"
+                     @change="changeCheck($event,index)">{{item.customerName}}</el-checkbox>
+
+      </el-checkbox-group>
+
     </div>
 
     <!-- <el-row>
@@ -59,6 +62,11 @@ export default {
   computed: {
   },
   methods: {
+    changeCheck (value, index) {
+      console.log(value, index)
+      this.$set(this.customerList[index], "check", value)
+      // this.customerList[index].check = value
+    },
     async init (tableId) {
       this.visible = true
       this.tableId = tableId
@@ -95,23 +103,20 @@ export default {
         {},
         (data, rspMsg) => {
           this.customerList = data;
-          if (this.menuList.length > 0) {
+          // if (this.menuList.length > 0) {
 
-            this.customerList.forEach(item => {
+          //   this.customerList.forEach(item => {
 
-              for (let i = 0; i < this.menuList.length; i++) {
+          //     for (let i = 0; i < this.menuList.length; i++) {
+          //       console.log(this.menuList[i])
+          //       if (item.customerId === this.menuList[i]) {
+          //         item.check = true
+          //         // break
+          //       }
+          //     }
 
-
-                console.log(this.menuList[i])
-                if (item.customerId === this.menuList[i]) {
-
-                  item.check = true
-                  // break
-                }
-              }
-
-            });
-          }
+          //   });
+          // }
           console.log(this.customerList)
         },
         (rspMsg, data) => {
@@ -126,15 +131,15 @@ export default {
       const url = "/gov/access/govcustomermenu/addcustomermenu"
       // this.upOrDownForm.roleList = roleList
 
-      this.customerList.forEach(element => {
+      // this.customerList.forEach(element => {
 
-        if (element.check) {
-          this.checkCustomerList.push(element.customerId)
-        }
-      });
+      //   if (element.check) {
+      //     this.checkCustomerList.push(element.customerId)
+      //   }
+      // });
       const parmas = {
         tableId: this.tableId,
-        customerIds: this.checkCustomerList
+        customerIds: this.menuList
       }
 
       const { data, code, msg, internalMsg } = await requestPost(url, parmas)
@@ -173,12 +178,11 @@ export default {
   margin-left: 100px;
 }
 .customerItem {
+  display: block;
   margin: 20px;
   font-size: 15px;
 }
 
-.item_check {
-}
 .item_span {
   margin-left: 20px;
 }