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] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E9=BB=98=E8=AE=A4=E9=A6=96?=
 =?UTF-8?q?=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">