From 15406b5d1c430e2749a6ea16b171645deabc810f Mon Sep 17 00:00:00 2001
From: dai_siki <851733175@qq.com>
Date: Tue, 25 Aug 2020 09:49:22 +0800
Subject: [PATCH 1/3] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E9=BB=98=E8=AE=A4?=
 =?UTF-8?q?=E9=A6=96=E9=A1=B5=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../productConfig/homeCustom/index.vue        | 877 ++++++++++++++++++
 .../src/views/modules/wx-mini/index-set.vue   |   4 +-
 2 files changed, 879 insertions(+), 2 deletions(-)
 create mode 100644 epmet-oper-web/src/views/modules/productConfig/homeCustom/index.vue

diff --git a/epmet-oper-web/src/views/modules/productConfig/homeCustom/index.vue b/epmet-oper-web/src/views/modules/productConfig/homeCustom/index.vue
new file mode 100644
index 0000000..5d8ede7
--- /dev/null
+++ b/epmet-oper-web/src/views/modules/productConfig/homeCustom/index.vue
@@ -0,0 +1,877 @@
+<template>
+  <div>
+    <el-card v-show="step==1"
+             shadow="never"
+             class="aui-card--fill">
+      <el-button type="text"
+            size="small"
+            @click="startSetWxIndex('', '', 0)">居民端</el-button>
+      <el-button type="text"
+            size="small"
+            @click="startSetWxIndex('', '', 1)">工作端</el-button>
+    </el-card>
+
+    <div class="m-wx_index"
+         v-show="step==2">
+      <el-button type="default"
+                 @click="toStep(1)">取消返回</el-button>
+      <el-button type="info"
+                 @click="isInPreview = true">预览</el-button>
+      <el-button type="success"
+                 @click="save">保存</el-button>
+      <!-- <el-button type="danger"
+                 @click="publish">发布</el-button> -->
+      <span style="margin-left:20px; color:#aaa; font-size:13px">({{ wxIndex.clientType===1 ? '工作端' : '居民端' }})</span>
+
+      <el-row class="wrap"
+              :gutter="20">
+        <el-col :span="5">
+          <h4>选择组件</h4>
+          <div class="mw-cpt_type">
+            <div class="d-function"
+                 v-show="item.componentList.length > 0"
+                 :key="item.functionId"
+                 v-for="item in cptTypeList">
+              <div class="d-info"
+                   @click="shiftCptTypeItemUnfold(item)">
+                <img v-if="item.functionName=='议事厅'"
+                     class="d-ico"
+                     src="@/assets/img/modules/wx-mini/index-set/function-cpt1.png">
+                <img v-else-if="item.functionName=='社群'"
+                     class="d-ico"
+                     src="@/assets/img/modules/wx-mini/index-set/function-cpt2.png">
+                <img v-else-if="item.functionName=='党建声音'"
+                     class="d-ico"
+                     src="@/assets/img/modules/wx-mini/index-set/function-cpt3.png">
+                <img v-else-if="item.functionName=='消息通知'"
+                     class="d-ico"
+                     src="@/assets/img/modules/wx-mini/index-set/function-cpt4.png">
+                <img v-else
+                     class="d-ico"
+                     src="@/assets/img/modules/wx-mini/index-set/common-cpt.png">
+
+                <span class="d-name">{{ item.functionName }}</span>
+
+                <img class="d-arrow"
+                     :class="{'z-unfold': item.isUnfold}"
+                     src="@/assets/img/modules/wx-mini/index-set/arrow-down.png">
+              </div>
+              <div class="d-list"
+                   v-show="item.isUnfold">
+                <div class="d-item"
+                     :key="cptItem.componentId"
+                     v-for="cptItem in item.componentList">
+                  <span class="d-item-region">({{ getCptRegionName(checkCptRegion(cptItem)) }})</span>
+                  <span class="d-item-name">{{ cptItem.componentName }}</span>
+                  <span class="d-item-btn z-disabled"
+                        v-if="!checkCptReuse(cptItem) && checkExistCpt(cptItem)">已添加</span>
+                  <span class="d-item-btn"
+                        v-else
+                        @click="beforeAddCpt(cptItem)">
+                    <img src="@/assets/img/modules/wx-mini/index-set/add.png">
+                    <span>添加</span>
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </el-col>
+        <el-col :span="13">
+          <div class="mw-show"
+               :class="{'z-preview': isInPreview}">
+            <div v-show="isInPreview"
+                 class="mw-show-close">
+              <el-button type="default"
+                         @click="isInPreview = false"
+                         icon="el-icon-close"
+                         circle></el-button>
+            </div>
+            <div class="mw-phone">
+              <img class="mw-phone-topbar"
+                   v-show="isInPreview"
+                   src="@/assets/img/modules/wx-mini/index-set/page/wx-top.png">
+
+              <div class="mw-phone-top"
+                   v-show="!isInPreview || topCptList.length>0"
+                   :class="{'z-none': !isInPreview}">
+                <div class="mw-phone-hint"
+                     v-show="!isInPreview"
+                     :class="{'z-out-left': topCptList.length>0}">（{{ getCptRegionName('top') }}）</div>
+                <cpt-item :item="item"
+                          :key="item.tempOnlyId"
+                          :is-focused="focusedCpt.tempOnlyId===item.tempOnlyId"
+                          @del="delCpt"
+                          @sort="changeCptDisplayOrder"
+                          @focus="focusCpt"
+                          v-for="item in topCptList"></cpt-item>
+              </div>
+              <div class="mw-phone-ban"
+                   v-show="!isInPreview || banCptList.length>0"
+                   :class="{'z-none': !isInPreview}">
+                <div class="mw-phone-hint"
+                     v-show="!isInPreview"
+                     :class="{'z-out-left': banCptList.length>0}">（{{ getCptRegionName('ban') }}）</div>
+                <cpt-item :item="item"
+                          :key="item.tempOnlyId"
+                          :is-focused="focusedCpt.tempOnlyId===item.tempOnlyId"
+                          @del="delCpt"
+                          @sort="changeCptDisplayOrder"
+                          @focus="focusCpt"
+                          v-for="item in banCptList"></cpt-item>
+              </div>
+              <div class="mw-phone-fixed"
+                   v-show="!isInPreview || fixedCptList.length>0"
+                   :class="{'z-none': !isInPreview}">
+                <div class="mw-phone-hint"
+                     v-show="!isInPreview"
+                     :class="{'z-out-down': fixedCptList.length>0}">（{{ getCptRegionName('fixed') }}）</div>
+                <cpt-item :item="item"
+                          :key="item.tempOnlyId"
+                          :is-focused="focusedCpt.tempOnlyId===item.tempOnlyId"
+                          @del="delCpt"
+                          @sort="changeCptDisplayOrder"
+                          @focus="focusCpt"
+                          v-for="item in fixedCptList"></cpt-item>
+              </div>
+              <div class="mw-phone-cnt"
+                   v-show="!isInPreview || cntCptList.length>0"
+                   :class="{'z-none': !isInPreview}">
+                <div class="mw-phone-hint"
+                     v-show="!isInPreview"
+                     :class="{'z-out-left': cntCptList.length>0}">（{{ getCptRegionName('cnt') }}）</div>
+                <cpt-item :item="item"
+                          :key="item.tempOnlyId"
+                          :is-focused="focusedCpt.tempOnlyId===item.tempOnlyId"
+                          @del="delCpt"
+                          @sort="changeCptDisplayOrder"
+                          @focus="focusCpt"
+                          v-for="item in cntCptList"></cpt-item>
+              </div>
+            </div>
+          </div>
+        </el-col>
+        <el-col :span="6">
+          <transition v-show="focusedCpt.tempOnlyId"
+                      name="el-zoom-in-top">
+            <div class="mw-set el-zoom-in-top"
+                 v-if="focusedCpt.tempOnlyId">
+              <div class="d-set-head"
+                   @click="focusedCpt.demoIsUnfold = !focusedCpt.demoIsUnfold">
+                <span class="d-title">演示数据</span>
+                <img class="d-arrow"
+                     :class="{'z-unfold': focusedCpt.demoIsUnfold}"
+                     src="@/assets/img/modules/wx-mini/index-set/arrow-down.png">
+              </div>
+              <el-form v-show="focusedCpt.demoIsUnfold"
+                       ref="form">
+                <el-form-item>
+                  <el-input type="textarea"
+                            v-model="focusedCpt.demoData"></el-input>
+                </el-form-item>
+              </el-form>
+
+              <div class="d-set-head"
+                   @click="focusedCpt.confIsUnfold = !focusedCpt.confIsUnfold">
+                <span class="d-title">高级选项</span>
+                <img class="d-arrow"
+                     :class="{'z-unfold': focusedCpt.confIsUnfold}"
+                     src="@/assets/img/modules/wx-mini/index-set/arrow-down.png">
+              </div>
+              <el-form v-show="focusedCpt.confIsUnfold"
+                       ref="form">
+                <el-form-item>
+                  <el-input type="textarea"
+                            v-model="focusedCpt.configuration"></el-input>
+                </el-form-item>
+                <div class="d-config-hint"
+                     v-show="focusedCpt.configurationDescription">
+                  <img src="@/assets/img/modules/wx-mini/index-set/info.png">
+                  <span>{{ focusedCpt.configurationDescription }}</span>
+                </div>
+              </el-form>
+
+              <div class="d-operate">
+                <el-button type="default"
+                           size="small"
+                           round
+                           @click="resetFocusedCptData">重置</el-button>
+                <el-button type="success"
+                           size="small"
+                           round
+                           @click="saveFocusedCptData">保存</el-button>
+              </div>
+            </div>
+          </transition>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" src="@/assets/scss/modules/wx-mini/index-set.scss"></style>
+
+<script>
+import mixinViewModule from '@/mixins/view-module'
+import componentWxcpt from '@/components/wx-index/cpt-item'
+import { Loading } from 'element-ui'
+import nextTick from 'dai-js/tools/nextTick'
+import getRandomString from 'dai-js/tools/getRandomString'
+import cloneDeep from 'lodash/cloneDeep'
+
+// 处理获得mock测试接口地址
+const getMockFilterUrl = (url) => {
+  const usedMockTest = false
+  const mockBaseUrl = 'https://nei.netease.com/api/apimock/30f0251f1b7dc90a8c38e3c634ef2a8b/api'
+  if (usedMockTest) {
+    return mockBaseUrl + url
+  } else {
+    return url
+  }
+}
+
+// 当前是否是开发环境
+const envIsDev = process.env.VUE_APP_NODE_ENV === 'dev'
+
+export default {
+  mixins: [mixinViewModule],
+  data () {
+    const cptTypeListTestdata = [
+      // 通用组件
+      {
+        functionId: '0',
+        functionName: '通用组件',
+        functionType: 1, // 1通用 2功能
+        isUnfold: true,
+        componentList: [
+          {
+            componentId: '7',
+            componentName: '最新议题',
+            componentFrontId: 'resi-functionList-hall-latestIssueList',
+            region: 'functionList',
+            configuration: {
+              num: 3
+            },
+            demoData: {
+              list: [
+                {
+                  avatar: '',
+                  title: '最新议题的标题。最新议题的标题。最新议题的标题。最新议题的标题。',
+                  content: '最新议题的内容，最新议题的内容，最新议题的内容。',
+                  author: '山东路45号-刘女士',
+                  date: '2020-01-02'
+                },
+                {
+                  avatar: '',
+                  title: '最新议题的标题。',
+                  content: '最新议题的内容，最新议题的内容，最新议题的内容。',
+                  author: '山东路45号-刘女士',
+                  date: '2020-01-02'
+                },
+                {
+                  avatar: '',
+                  title: '最新议题的标题。',
+                  content: '最新议题的内容，最新议题的内容，最新议题的内容。',
+                  author: '山东路45号-刘女士',
+                  date: '2020-01-02'
+                }
+              ]
+            },
+            configurationDescription: ''
+          },
+          {
+            componentId: '8',
+            componentName: '最新发布',
+            componentFrontId: 'resi-functionList-voice-newsList',
+            region: 'functionList',
+            configuration: {
+              num: 3
+            },
+            demoData: {
+              list: [
+                {
+                  pic: '',
+                  title: '新型冠状病毒检测重大突破！新型冠状病毒检测重大突破！！！',
+                  author: '大港路党支部',
+                  date: '2020-01-02'
+                },
+                {
+                  pic: '',
+                  title: '新型冠状病毒检测重大突破！',
+                  author: '大港路党支部',
+                  date: '2020-01-02'
+                },
+                {
+                  pic: '',
+                  title: '新型冠状病毒检测重大突破！',
+                  author: '大港路党支部',
+                  date: '2020-01-02'
+                }
+              ]
+            },
+            configurationDescription: ''
+          },
+          {
+            componentId: '9',
+            componentName: '结案项目',
+            componentFrontId: 'resi-functionList-hall-closedProjectList',
+            region: 'functionList',
+            configuration: {
+              num: 3
+            },
+            demoData: {
+              list: [
+                {
+                  title: '结案项目的标题。',
+                  content: '结案项目的内容，结案项目的内容，结案项目的内容。',
+                  author: '党支部-卫生部门',
+                  date: '2020-01-02'
+                },
+                {
+                  title: '结案项目的标题。',
+                  content: '结案项目的内容，结案项目的内容，结案项目的内容。',
+                  author: '党支部-卫生部门',
+                  date: '2020-01-02'
+                },
+                {
+                  title: '结案项目的标题。',
+                  content: '结案项目的内容，结案项目的内容，结案项目的内容。',
+                  author: '党支部-卫生部门',
+                  date: '2020-01-02'
+                }
+              ]
+            },
+            configurationDescription: ''
+          }
+        ]
+      },
+      // 功能组件
+      {
+        functionId: '1',
+        functionName: '议事厅',
+        functionType: 2, // 1通用 2功能
+        isUnfold: false,
+        componentList: [
+          {
+            componentId: '1',
+            componentName: '顶部标题',
+            componentFrontId: 'resi-titleList-home-gridNameTitle',
+            configuration: {
+              // content: ''
+            },
+            demoData: {
+              ico: '',
+              avatar: '',
+              title: '青岛市市北区大港路第二网格'
+            },
+            region: 'titleList',
+            configurationDescription: '请配置具体内容'
+          },
+          {
+            componentId: '2',
+            componentName: '轮播图',
+            componentFrontId: 'resi-topList-voice-hotNewsSwiper',
+            configuration: {
+              // content: ''
+            },
+            demoData: {
+              pic: '',
+              title: '轮播图新闻标题'
+            },
+            region: 'topList',
+            configurationDescription: '请配置具体内容'
+          },
+          {
+            componentId: '3',
+            componentName: '消息通知',
+            componentFrontId: 'resi-floatingList-mine-newMessageButton',
+            configuration: {
+              // content: ''
+            },
+            demoData: {
+              ico: '',
+              text: '有新消息！'
+            },
+            region: 'floatingList',
+            configurationDescription: ''
+          },
+          {
+            componentId: '5',
+            componentName: '功能菜单',
+            componentFrontId: 'resi-functionList-extend-moreFunctionIcons',
+            region: 'functionList',
+            configuration: {
+              // bgc: '#eee'
+            },
+            demoData: {
+              list: [
+                {
+                  ico: '',
+                  text: '议事厅'
+                },
+                {
+                  ico: '',
+                  text: '社群'
+                },
+                {
+                  ico: '',
+                  text: '党建声音'
+                },
+                {
+                  ico: '',
+                  text: '更多功能'
+                }
+              ]
+            },
+            configurationDescription: ''
+          },
+          {
+            componentId: '6',
+            componentName: '热门群',
+            componentFrontId: 'resi-functionList-group-recommendGroupSlider',
+            region: 'functionList',
+            configuration: {
+              // bgc: '#fff'
+            },
+            demoData: {
+              list: [
+                {
+                  ico: '',
+                  no: '1',
+                  avatar: '',
+                  title: '群名称',
+                  info1: '山东路45号-张三',
+                  info2: '共240人',
+                  info3: '党员11人'
+                },
+                {
+                  ico: '',
+                  no: '2',
+                  avatar: '',
+                  title: '群名称',
+                  info1: '山东路45号-张三',
+                  info2: '共240人',
+                  info3: '党员11人'
+                },
+                {
+                  ico: '',
+                  no: '3',
+                  avatar: '',
+                  title: '群名称',
+                  info1: '山东路45号-张三',
+                  info2: '共240人',
+                  info3: '党员11人'
+                }
+              ]
+            },
+            configurationDescription: ''
+          }
+        ]
+      }
+    ]
+    return {
+      mixinViewModuleOptions: {
+        getDataListURL: getMockFilterUrl('/oper/crm/customer/getvalidcustomerlist'),
+        getDataListIsPage: false
+      },
+
+      dataList: !envIsDev ? [] : [
+        {
+          customerName: '测试1',
+          customerId: '1'
+        },
+        {
+          customerName: '测试2',
+          customerId: '2'
+        }
+      ],
+
+      // 步骤: 1列表选择 2首页配置
+      step: 1,
+
+      wxIndex: {
+        customerId: '',
+        customerName: '',
+        clientType: ''
+      },
+
+      // 在预览中状态
+      isInPreview: false,
+
+      // 可用列表
+      cptTypeList: !envIsDev ? [] : cptTypeListTestdata,
+      // 当前应用组件列表
+      cptList: [
+        // {
+        //   componentId: '1',
+        //   componentName: '顶部标题',
+        //   componentFrontId: 'top_title',
+        //   configuration: {
+        //     content: '青岛市党委'
+        //   },
+        //   demoData: {
+        //     content: '我是标题'
+        //   },
+        //   configurationDescription: '请配置具体内容',
+        //   displayOrder: 1,
+        //   region: 1 // 区域 1top 2ban 3fixed 4cnt
+        // }
+      ],
+      lastSavedCptList: [],
+      focusedCpt: {
+        tempOnlyId: ''
+      }
+    }
+  },
+
+  components: {
+    'cpt-item': componentWxcpt
+  },
+
+  computed: {
+    cptTypeListTiled () {
+      const { cptTypeList } = this
+      let list = []
+      cptTypeList.forEach(item => {
+        list = [...list, ...item.componentList]
+      })
+      return list
+    },
+    topCptList () {
+      return this.cptList.filter(item => this.checkCptRegion(item) === 'top')
+    },
+    banCptList () {
+      return this.cptList.filter(item => this.checkCptRegion(item) === 'ban')
+    },
+    cntCptList () {
+      console.log('cntCpt发生了变化')
+      let arr = this.cptList.filter(item => this.checkCptRegion(item) === 'cnt')
+      arr.sort((f, s) => f.displayOrder - s.displayOrder)
+      return arr
+    },
+    fixedCptList () {
+      return this.cptList.filter(item => this.checkCptRegion(item) === 'fixed')
+    }
+  },
+
+  methods: {
+    // 改变步骤
+    toStep (s) {
+      this.step = s
+    },
+    // 选择用户开始配置
+    async startSetWxIndex (id, name, type) {
+      this.wxIndex.customerId = id
+      this.wxIndex.customerName = name
+      this.wxIndex.clientType = type
+      console.log(this.wxIndex)
+      let loadingInstance = Loading.service()
+      await this.getCptTypeList()
+      await this.getCptList()
+      this.toStep(2)
+      this.cleanFocusCpt()
+      loadingInstance.close()
+    },
+    processBackendCptData (item) {
+      let demoData = {}
+      let configuration = {}
+      const tempOnlyId = getRandomString(20)
+      try {
+        demoData = JSON.parse(item.demoData)
+        configuration = JSON.parse(item.configuration)
+      } catch (err) {
+        console.log(err)
+      }
+      return { tempOnlyId, ...item, demoData, configuration }
+    },
+    // 获取用户可用组件列表
+    getCptTypeList () {
+      const url = getMockFilterUrl('/oper/customize/customerhometemplate/getcomponentlist')
+      const { wxIndex: { clientType, customerId } } = this
+      return this.$http.post(
+        url,
+        { clientType, customerId }
+      ).then(({ data: res }) => {
+        if (res.code !== 0) {
+          return this.$message.error(res.msg)
+        } else {
+          let list = [{
+            functionId: '0',
+            functionName: '通用组件',
+            functionType: 1, // 1通用 2功能
+            isUnfold: true,
+            componentList: res.data.commonList.map(this.processBackendCptData)
+          }, ...res.data.functionList.map(item => {
+            return {
+              functionId: item.functionId,
+              functionName: item.functionName,
+              functionType: 2, // 1通用 2功能
+              isUnfold: false,
+              componentList: item.componentList.map(this.processBackendCptData)
+            }
+          })]
+          this.cptTypeList = list
+          console.log('可用组件列表', list)
+        }
+      }).catch((err) => {
+        console.log(err)
+        return this.$message.error('网络错误')
+      })
+    },
+    // 获取用户当前保存的组件列表
+    getCptList () {
+      const url = getMockFilterUrl('/oper/customize/customerhometemplate/gethometemplate')
+      const { wxIndex: { clientType, customerId } } = this
+      return this.$http.post(
+        url,
+        { clientType, customerId }
+      ).then(({ data: res }) => {
+        if (res.code !== 0) {
+          return this.$message.error(res.msg)
+        } else {
+          let list = [
+            ...res.data.titleList,
+            ...res.data.topList,
+            ...res.data.functionList,
+            ...res.data.floatingList
+          ]
+          this.cptList = list.map(this.processBackendCptData)
+          this.lastSavedCptList = cloneDeep(this.cptList)
+          console.log('用户储存组件列表', list)
+        }
+      }).catch((err) => {
+        console.log(err)
+        return this.$message.error('网络错误')
+      })
+    },
+
+    // 保存配置
+    save () {
+      console.log('保存配置')
+      const url = getMockFilterUrl('/oper/customize/customerhometemplate/savecustomerhometemplate')
+      const { wxIndex: { clientType, customerId }, cptList } = this
+      const componentList = cptList.map(item => {
+        return {
+          componentId: item.componentId,
+          region: item.region,
+          displayOrder: item.displayOrder,
+          demoData: JSON.stringify(item.demoData),
+          configuration: JSON.stringify(item.configuration)
+        }
+      })
+      return this.$http.post(
+        url,
+        { clientType, customerId, componentList }
+      ).then(({ data: res }) => {
+        if (res.code !== 0) {
+          return this.$message.error(res.msg)
+        } else {
+          console.log(res)
+          this.lastSavedCptList = cloneDeep(this.cptList)
+          return this.$message.success('保存成功')
+        }
+      }).catch((err) => {
+        console.log(err)
+        return this.$message.error('网络错误')
+      })
+    },
+    // 发布配置
+    publish () {
+      console.log('发布配置')
+      const url = getMockFilterUrl('/oper/customize/home/distributehomedesign')
+      const { wxIndex: { clientType, customerId }, cptList } = this
+      const componentList = cptList.map(item => {
+        return {
+          componentId: item.componentId,
+          region: item.region,
+          displayOrder: item.displayOrder,
+          demoData: JSON.stringify(item.demoData),
+          configuration: JSON.stringify(item.configuration)
+        }
+      })
+      if (componentList.length === 0) {
+        return this.$message.error('您尚未选择任何组件，不能发布')
+      }
+      return this.$confirm('目前的设置会呈现在所有用户的小程序上，是否继续发布？', '确认发布', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        return this.$http.post(
+          url,
+          { clientType, customerId, componentList }
+        ).then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg)
+          } else {
+            console.log(res)
+            this.lastSavedCptList = cloneDeep(this.cptList)
+            return this.$message.success('发布成功')
+          }
+        }).catch((err) => {
+          console.log(err)
+          return this.$message.error('网络错误')
+        })
+      }).catch((err) => {
+        console.log(err)
+      })
+    },
+    // 判断组件所属区域类别
+    checkCptRegion (item) {
+      const { region } = item
+      if (region === 'titleList') {
+        return 'top'
+      } else if (region === 'topList') {
+        return 'ban'
+      } else if (region === 'functionList') {
+        return 'cnt'
+      } else if (region === 'floatingList') {
+        return 'fixed'
+      } else {
+        return 'none'
+      }
+    },
+    // 判断组件是否可用复用
+    checkCptReuse (item) {
+      const { componentFrontId } = item
+      const reuseList = this.cptTypeList[0].componentList.map(v => v.componentFrontId)
+      const fun = name => name === componentFrontId
+      return reuseList.findIndex(fun) !== -1
+    },
+    // 根据所属区域简称得到名字
+    getCptRegionName (id) {
+      return {
+        'top': '标题区',
+        'ban': '置顶区',
+        'fixed': '浮窗区',
+        'cnt': '功能区',
+        'none': ''
+      }[id]
+    },
+    // 添加组件到实例-前验证
+    beforeAddCpt (item) {
+      console.log('添加组件到实例-前验证')
+      const regionType = this.checkCptRegion(item)
+      const tempOnlyId = getRandomString(20)
+      if (regionType === 'top') {
+        if (this.topCptList.length > 0) {
+          this.$message('标题区已有组件，请删除后再添加')
+        } else {
+          this.addCpt(item, tempOnlyId)
+        }
+      } else if (regionType === 'ban') {
+        if (this.banCptList.length > 0) {
+          this.$message('置顶区已有组件，请删除后再添加')
+        } else {
+          this.addCpt(item, tempOnlyId)
+        }
+      } else if (regionType === 'fixed') {
+        if (this.fixedCptList.length > 0) {
+          this.$message('浮窗区已有组件，请删除后再添加')
+        } else {
+          this.addCpt(item, tempOnlyId)
+        }
+      } else if (regionType === 'cnt') {
+        this.cntCptListResort()
+        this.addCpt(item, tempOnlyId, (this.cntCptList.length + 1) * 10)
+      } else {
+        return false
+      }
+    },
+    // 实例内容组件重置displayOrder属性
+    cntCptListResort () {
+      console.log('实例内容组件重置displayOrder属性')
+      this.cntCptList.forEach((item, index) => {
+        item.displayOrder = (index + 1) * 10
+      })
+    },
+    // 添加组件到实例
+    addCpt (item, tempOnlyId, displayOrder = 0) {
+      console.log('添加组件到实例')
+      let trueItem = cloneDeep(item)
+      trueItem.tempOnlyId = tempOnlyId
+      trueItem.displayOrder = displayOrder
+      this.cptList.push(trueItem)
+    },
+    // 改变实例组件显示顺序
+    async changeCptDisplayOrder (item, type) {
+      console.log('改变实例组件显示顺序')
+      if (type === 'up') {
+        item.displayOrder -= 11
+      } else if (type === 'down') {
+        item.displayOrder += 11
+      }
+      await nextTick()
+      this.cntCptListResort()
+    },
+    // 删除组件
+    delCpt (item) {
+      this.cptList = this.cptList.filter(cptItem => item.tempOnlyId !== cptItem.tempOnlyId)
+      if (this.focusedCpt.tempOnlyId === item.tempOnlyId) {
+        this.focusedCpt = { tempOnlyId: '' }
+      }
+      this.cntCptListResort()
+    },
+    // 检测实例中是否存在某种类型组件
+    checkExistCpt (item) {
+      return this.cptList.some(cptItem => item.componentFrontId === cptItem.componentFrontId)
+    },
+    // 清空聚焦实例组件
+    cleanFocusCpt () {
+      this.focusedCpt = { tempOnlyId: '' }
+    },
+    // 聚焦实例组件
+    focusCpt (item) {
+      console.log('聚焦实例组件')
+      if (this.isInPreview) return
+      if (this.focusedCpt.tempOnlyId === item.tempOnlyId) {
+        this.cleanFocusCpt()
+      } else {
+        this.focusedCpt = { ...cloneDeep(item), demoData: JSON.stringify(item.demoData), configuration: JSON.stringify(item.configuration), demoIsUnfold: true, confIsUnfold: false }
+      }
+    },
+    // 保存聚焦组件数据
+    saveFocusedCptData () {
+      const { focusedCpt } = this
+      this.cptList.forEach(item => {
+        if (item.tempOnlyId === focusedCpt.tempOnlyId) {
+          try {
+            item.demoData = JSON.parse(focusedCpt.demoData)
+            item.configuration = JSON.parse(focusedCpt.configuration)
+          } catch (err) {
+            this.$alert('json数据格式有误', '无法保存', {
+              confirmButtonText: '确定'
+            })
+            console.log(err)
+          }
+        }
+      })
+    },
+    // 重置聚焦组件数据，重置为上次整体保存时的数据
+    resetFocusedCptData () {
+      const { focusedCpt } = this
+      const fun = item => {
+        if (item.tempOnlyId === focusedCpt.tempOnlyId) {
+          focusedCpt.demoData = JSON.stringify(item.demoData)
+          focusedCpt.configuration = JSON.stringify(item.configuration)
+          return true
+        } else {
+          return false
+        }
+      }
+      if (!this.lastSavedCptList.some(fun)) {
+        this.cptTypeListTiled.forEach(item => {
+          if (item.componentFrontId === focusedCpt.componentFrontId) {
+            focusedCpt.demoData = JSON.stringify(item.demoData)
+            focusedCpt.configuration = JSON.stringify(item.configuration)
+          }
+        })
+      }
+    },
+
+    // 改变可用列表组件展开与收起
+    shiftCptTypeItemUnfold (item) {
+      item.isUnfold = !item.isUnfold
+    }
+  }
+}
+</script>
diff --git a/epmet-oper-web/src/views/modules/wx-mini/index-set.vue b/epmet-oper-web/src/views/modules/wx-mini/index-set.vue
index 725d0d0..1f30650 100644
--- a/epmet-oper-web/src/views/modules/wx-mini/index-set.vue
+++ b/epmet-oper-web/src/views/modules/wx-mini/index-set.vue
@@ -24,7 +24,7 @@
                        @click="startSetWxIndex(scope.row.customerId, scope.row.customerName, 0)">居民端</el-button>
             <el-button type="text"
                        size="small"
-                       @click="startSetWxIndex(scope.row.customerId, scope.row.customerName, 1)">政府端</el-button>
+                       @click="startSetWxIndex(scope.row.customerId, scope.row.customerName, 1)">工作端</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -40,7 +40,7 @@
                  @click="save">保存</el-button>
       <el-button type="danger"
                  @click="publish">发布</el-button>
-      <span style="margin-left:20px; color:#aaa; font-size:13px">({{ wxIndex.customerName }} - {{ wxIndex.clientType===1 ? '政府端' : '居民端' }})</span>
+      <span style="margin-left:20px; color:#aaa; font-size:13px">({{ wxIndex.customerName }} - {{ wxIndex.clientType===1 ? '工作端' : '居民端' }})</span>
 
       <el-row class="wrap"
               :gutter="20">

From bfad30ff204912faf58c9f45afe207950221780a Mon Sep 17 00:00:00 2001
From: 13176889840 <13176889840@163.com>
Date: Tue, 25 Aug 2020 15:11:50 +0800
Subject: [PATCH 2/3] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=9D=83=E9=99=90?=
 =?UTF-8?q?=E5=88=86=E9=85=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/modules/customer/customize/roleList.vue      | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/epmet-oper-web/src/views/modules/customer/customize/roleList.vue b/epmet-oper-web/src/views/modules/customer/customize/roleList.vue
index 59fa256..3855232 100644
--- a/epmet-oper-web/src/views/modules/customer/customize/roleList.vue
+++ b/epmet-oper-web/src/views/modules/customer/customize/roleList.vue
@@ -47,7 +47,6 @@
                 v-for="scope in scopeOptions"
                 :label="scope.scopeKey"
                 :key="scope.scopeKey"
-                :checked="scope.assigned"
               >{{scope.scopeName}}</el-checkbox>
             </el-checkbox-group>
           </el-card>
@@ -112,7 +111,6 @@ export default {
       if (typeof _data[n] === 'boolean') _data[n] = false
       if (typeof _data[n] === 'string') _data[n] = ''
       if (typeof _data[n] === 'object') _data[n] = []
-      console.log(n, _data[n])
     }
   },
   methods: {
@@ -148,12 +146,17 @@ export default {
         roleId: this.roleId,
         operationKey: operationKey
       }
+      console.log('checkedScopes', this.checkedScopes)
       this.loading3 = true
       this.$http
         .post('/gov/access/config/configoptions', params)
         .then(resp => {
           console.log('scopeOptions', resp.data)
           this.scopeOptions = resp.data.data.scopeOptions
+          resp.data.data.scopeOptions.forEach(item => {
+            if (item.assigned) this.checkedScopes.push(item.scopeKey)
+          })
+          console.log('checkedScopes222', this.checkedScopes)
           this.settingOptions = resp.data.data.settingOptions
           setTimeout(() => {
             this.loading3 = false

From f13403e30684864265a741eb7be0e8ea9d05e653 Mon Sep 17 00:00:00 2001
From: dai_siki <851733175@qq.com>
Date: Tue, 25 Aug 2020 17:07:16 +0800
Subject: [PATCH 3/3] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E5=B7=A5=E4=BD=9C?=
 =?UTF-8?q?=E7=AB=AF=E8=8F=9C=E5=8D=95=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../modules/workPc/menu-add-or-update.vue     | 274 ++++++++++++++++++
 .../src/views/modules/workPc/menu.vue         |  55 ++++
 epmet-oper-web/src/views/pages/login.vue      |   2 +-
 3 files changed, 330 insertions(+), 1 deletion(-)
 create mode 100644 epmet-oper-web/src/views/modules/workPc/menu-add-or-update.vue
 create mode 100644 epmet-oper-web/src/views/modules/workPc/menu.vue

diff --git a/epmet-oper-web/src/views/modules/workPc/menu-add-or-update.vue b/epmet-oper-web/src/views/modules/workPc/menu-add-or-update.vue
new file mode 100644
index 0000000..42e8b9c
--- /dev/null
+++ b/epmet-oper-web/src/views/modules/workPc/menu-add-or-update.vue
@@ -0,0 +1,274 @@
+<template>
+  <el-dialog :visible.sync="visible" :title="!dataForm.id ? $t('add') : $t('update')" :close-on-click-modal="false" :close-on-press-escape="false">
+    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" label-width="120px">
+      <el-form-item prop="type" :label="$t('menu.type')" size="mini">
+        <el-radio-group v-model="dataForm.type" :disabled="!!dataForm.id">
+          <el-radio :label="0">{{ $t('menu.type0') }}</el-radio>
+          <el-radio :label="1">{{ $t('menu.type1') }}</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item prop="name" :label="$t('menu.name')">
+        <el-input v-model="dataForm.name" :placeholder="$t('menu.name')"></el-input>
+      </el-form-item>
+      <el-form-item prop="parentName" :label="$t('menu.parentName')" class="menu-list">
+        <el-popover v-model="menuListVisible" ref="menuListPopover" placement="bottom-start" trigger="click">
+          <el-tree
+            :data="menuList"
+            :props="{ label: 'name', children: 'children' }"
+            node-key="id"
+            ref="menuListTree"
+            :highlight-current="true"
+            :expand-on-click-node="false"
+            accordion
+            @current-change="menuListTreeCurrentChangeHandle">
+          </el-tree>
+        </el-popover>
+        <el-input v-model="dataForm.parentName" v-popover:menuListPopover :readonly="true" :placeholder="$t('menu.parentName')">
+          <i v-if="dataForm.pid !== '0'" slot="suffix" @click.stop="deptListTreeSetDefaultHandle()" class="el-icon-circle-close el-input__icon"></i>
+        </el-input>
+      </el-form-item>
+      <el-form-item v-if="dataForm.type === 0" prop="url" :label="$t('menu.url')">
+        <el-input v-model="dataForm.url" :placeholder="$t('menu.url')"></el-input>
+      </el-form-item>
+      <el-form-item  prop="showFlag" :label="$t('menu.showFlag')" size="mini">
+        <el-radio-group v-model="dataForm.showFlag">
+          <el-radio :label="1">{{ $t('menu.show1') }}</el-radio>
+          <el-radio :label="0">{{ $t('menu.show2') }}</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item prop="sort" :label="$t('menu.sort')">
+        <el-input-number v-model="dataForm.sort" controls-position="right" :min="0" :label="$t('menu.sort')"></el-input-number>
+      </el-form-item>
+      <el-form-item v-if="dataForm.type === 0" prop="icon" :label="$t('menu.icon')" class="icon-list">
+        <el-popover v-model="iconListVisible" ref="iconListPopover" placement="bottom-start" trigger="click" popper-class="mod-sys__menu-icon-popover">
+          <div class="mod-sys__menu-icon-inner">
+            <div class="mod-sys__menu-icon-list">
+              <el-button
+                v-for="(item, index) in iconList"
+                :key="index"
+                @click="iconListCurrentChangeHandle(item)"
+                :class="{ 'is-active': dataForm.icon === item }">
+                <svg class="icon-svg" aria-hidden="true"><use :xlink:href="`#${item}`"></use></svg>
+              </el-button>
+            </div>
+          </div>
+        </el-popover>
+        <el-input v-model="dataForm.icon" v-popover:iconListPopover :readonly="true" :placeholder="$t('menu.icon')"></el-input>
+      </el-form-item>
+      <el-form-item v-if="dataForm.type === 1" prop="permissions" :label="$t('menu.permissions')">
+        <el-input v-model="dataForm.permissions" :placeholder="$t('menu.permissionsTips')"></el-input>
+      </el-form-item>
+      <el-form-item
+        v-for="(item, index) in dataForm.resourceList"
+        :key="item.key"
+        :prop="`resourceList.${index}.resourceUrl`"
+        :rules="{ required: true, message: $t('validate.required'), trigger: 'blur' }"
+        :label="index === 0 ? $t('menu.resource') : ''"
+        class="resource-list">
+        <el-row>
+          <el-col :span="22">
+            <el-input v-model="item.resourceUrl" :placeholder="$t('menu.resourceUrl')">
+              <el-select v-model="item.resourceMethod" slot="prepend" :placeholder="$t('menu.resourceMethod')">
+                <el-option label="GET" value="GET"></el-option>
+                <el-option label="POST" value="POST"></el-option>
+                <el-option label="PUT" value="PUT"></el-option>
+                <el-option label="DELETE" value="DELETE"></el-option>
+              </el-select>
+            </el-input>
+          </el-col>
+          <el-col :span="2" class="text-center">
+            <el-button @click="resourceDeleteHandle(item)" size="small" type="text">{{ $t('delete') }}</el-button>
+          </el-col>
+        </el-row>
+      </el-form-item>
+      <el-form-item :label="dataForm.resourceList==null || dataForm.resourceList.length <= 0 ? $t('menu.resource') : ''">
+        <el-button @click="resourceAddHandle()" class="aui-button--dashed w-percent-100">{{ $t('menu.resourceAddItem') }}</el-button>
+      </el-form-item>
+    </el-form>
+    <template slot="footer">
+      <el-button @click="visible = false">{{ $t('cancel') }}</el-button>
+      <el-button type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+import debounce from 'lodash/debounce'
+import { getIconList } from '@/utils'
+export default {
+  data () {
+    return {
+      visible: false,
+      menuList: [],
+      menuListVisible: false,
+      iconList: [],
+      iconListVisible: false,
+      dataForm: {
+        id: '',
+        type: 0,
+        name: '',
+        pid: '0',
+        parentName: '',
+        url: '',
+        showFlag: 1,
+        resourceList: [],
+        permissions: '',
+        sort: 0,
+        icon: ''
+      }
+    }
+  },
+  computed: {
+    dataRule () {
+      return {
+        name: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        parentName: [
+          { required: true, message: this.$t('validate.required'), trigger: 'change' }
+        ]
+      }
+    }
+  },
+  watch: {
+    'dataForm.type' (val) {
+      this.$refs['dataForm'].clearValidate()
+    }
+  },
+  methods: {
+    init () {
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        this.iconList = getIconList()
+        this.dataForm.parentName = this.$t('menu.parentNameDefault')
+        this.dataForm.resourceList = []
+        this.getMenuList().then(() => {
+          if (this.dataForm.id) {
+            this.getInfo()
+          }
+        })
+      })
+    },
+    // 获取菜单列表
+    getMenuList () {
+      return this.$http.get('/gov/access/menu/list?type=0').then(({ data: res }) => {
+        if (res.code !== 0) {
+          return this.$message.error(res.msg)
+        }
+        this.menuList = res.data
+      }).catch(() => {})
+    },
+    // 获取信息
+    getInfo () {
+      this.$http.get(`/gov/access/menu/${this.dataForm.id}`).then(({ data: res }) => {
+        if (res.code !== 0) {
+          return this.$message.error(res.msg)
+        }
+        this.dataForm = {
+          ...this.dataForm,
+          ...res.data
+        }
+        if (this.dataForm.pid === '0') {
+          return this.deptListTreeSetDefaultHandle()
+        }
+        this.$refs.menuListTree.setCurrentKey(this.dataForm.pid)
+      }).catch(() => {})
+    },
+    // 上级菜单树, 设置默认值
+    deptListTreeSetDefaultHandle () {
+      this.dataForm.pid = '0'
+      this.dataForm.parentName = this.$t('menu.parentNameDefault')
+    },
+    // 上级菜单树, 选中
+    menuListTreeCurrentChangeHandle (data) {
+      this.dataForm.pid = data.id
+      this.dataForm.parentName = data.name
+      this.menuListVisible = false
+    },
+    // 图标, 选中
+    iconListCurrentChangeHandle (icon) {
+      this.dataForm.icon = icon
+      this.iconListVisible = false
+    },
+    // 菜单资源, 添加
+    resourceAddHandle () {
+      this.dataForm.resourceList.push({
+        key: new Date().getTime(),
+        resourceMethod: 'GET',
+        resourceUrl: ''
+      })
+    },
+    // 菜单资源, 删除
+    resourceDeleteHandle (resource) {
+      this.dataForm.resourceList = this.dataForm.resourceList.filter(item => item.key !== resource.key)
+    },
+    // 表单提交
+    dataFormSubmitHandle: debounce(function () {
+      this.$refs['dataForm'].validate((valid) => {
+        if (!valid) {
+          return false
+        }
+        this.$http[!this.dataForm.id ? 'post' : 'put']('/gov/access/menu', this.dataForm).then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg)
+          }
+          this.$message({
+            message: this.$t('prompt.success'),
+            type: 'success',
+            duration: 500,
+            onClose: () => {
+              this.visible = false
+              this.$emit('refreshDataList')
+            }
+          })
+        }).catch(() => {})
+      })
+    }, 1000, { 'leading': true, 'trailing': false })
+  }
+}
+</script>
+
+<style lang="scss">
+.mod-sys__menu {
+  .resource-list {
+    .el-select .el-input__inner {
+      min-width: 110px;
+      text-align: center;
+    }
+  }
+  .menu-list,
+  .icon-list {
+    .el-input__inner,
+    .el-input__suffix {
+      cursor: pointer;
+    }
+  }
+  &-icon-popover {
+    width: 458px;
+    overflow: hidden;
+  }
+  &-icon-inner {
+    width: 478px;
+    max-height: 258px;
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+  &-icon-list {
+    width: 458px;
+    padding: 0;
+    margin: -8px 0 0 -8px;
+    > .el-button {
+      padding: 8px;
+      margin: 8px 0 0 8px;
+      > span {
+        display: inline-block;
+        vertical-align: middle;
+        width: 18px;
+        height: 18px;
+        font-size: 18px;
+      }
+    }
+  }
+}
+</style>
diff --git a/epmet-oper-web/src/views/modules/workPc/menu.vue b/epmet-oper-web/src/views/modules/workPc/menu.vue
new file mode 100644
index 0000000..00f9198
--- /dev/null
+++ b/epmet-oper-web/src/views/modules/workPc/menu.vue
@@ -0,0 +1,55 @@
+<template>
+  <el-card shadow="never" class="aui-card--fill">
+    <div class="mod-sys__menu">
+      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+        <el-form-item>
+          <el-button v-if="$hasPermission('sys:menu:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
+        </el-form-item>
+      </el-form>
+      <el-table v-loading="dataListLoading" :data="dataList" row-key="id" border style="width: 100%;">
+        <el-table-column prop="name" :label="$t('menu.name')" header-align="center" min-width="150"></el-table-column>
+        <el-table-column prop="icon" :label="$t('menu.icon')" header-align="center" align="center">
+          <template slot-scope="scope">
+            <svg class="icon-svg" aria-hidden="true"><use :xlink:href="`#${scope.row.icon}`"></use></svg>
+          </template>
+        </el-table-column>
+        <el-table-column prop="type" :label="$t('menu.type')" header-align="center" align="center">
+          <template slot-scope="scope">
+            <el-tag v-if="scope.row.type === 0" size="small">{{ $t('menu.type0') }}</el-tag>
+            <el-tag v-else size="small" type="info">{{ $t('menu.type1') }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="sort" :label="$t('menu.sort')" header-align="center" align="center"></el-table-column>
+        <el-table-column prop="url" :label="$t('menu.url')" header-align="center" align="center" width="150" :show-overflow-tooltip="true" ></el-table-column>
+        <el-table-column prop="permissions" :label="$t('menu.permissions')" header-align="center" align="center" width="150" :show-overflow-tooltip="true"></el-table-column>
+        <el-table-column  :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
+          <template slot-scope="scope">
+            <el-button v-if="$hasPermission('sys:menu:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">{{ $t('update') }}</el-button>
+            <el-button v-if="$hasPermission('sys:menu:delete')" type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <!-- 弹窗, 新增 / 修改 -->
+      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
+    </div>
+  </el-card>
+</template>
+
+<script>
+import mixinViewModule from '@/mixins/view-module'
+import AddOrUpdate from './menu-add-or-update'
+export default {
+  mixins: [mixinViewModule],
+  data () {
+    return {
+      mixinViewModuleOptions: {
+        getDataListURL: '/gov/access/menu/list',
+        deleteURL: '/gov/access/menu'
+      }
+    }
+  },
+  components: {
+    AddOrUpdate
+  }
+}
+</script>
diff --git a/epmet-oper-web/src/views/pages/login.vue b/epmet-oper-web/src/views/pages/login.vue
index d0f1942..73b3c7e 100644
--- a/epmet-oper-web/src/views/pages/login.vue
+++ b/epmet-oper-web/src/views/pages/login.vue
@@ -3,7 +3,7 @@
     <div class="aui-content__wrapper">
       <main class="aui-content">
         <div class="login-header">
-          <h2 class="login-brand">{{ $t('brand.lg') }}</h2>
+          <h2 class="login-brand">{{ 'e' }}</h2>
         </div>
         <div class="login-body">
           <h3 class="login-title">{{ $t('login.title') }}</h3>