From ed60ec042e8b4d429e881ef31b4d6332e0da459a Mon Sep 17 00:00:00 2001
From: dai_siki <851733175@qq.com>
Date: Mon, 23 Mar 2020 11:26:43 +0800
Subject: [PATCH] =?UTF-8?q?=E5=90=8E=E7=AB=AF=E8=81=94=E8=B0=83=E5=BC=80?=
 =?UTF-8?q?=E5=A7=8B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 epmet-oper-web/public/index.html              |   6 +-
 .../scss/modules/wx-mini/index-set.scss       |   2 +
 .../src/components/wx-index/cpt-item.vue      | 154 +++++++++++++
 .../src/views/modules/wx-mini/index-set.vue   | 204 +++---------------
 epmet-oper-web/vue.config.js                  |   2 +-
 5 files changed, 192 insertions(+), 176 deletions(-)
 create mode 100644 epmet-oper-web/src/components/wx-index/cpt-item.vue
diff --git a/epmet-oper-web/public/index.html b/epmet-oper-web/public/index.html
index 4e072fb..e3e7b15 100644
--- a/epmet-oper-web/public/index.html
+++ b/epmet-oper-web/public/index.html
@@ -33,15 +33,15 @@
   <% } %>
   <!-- 集成测试环境 -->
   <% if (process.env.VUE_APP_NODE_ENV === 'prod:sit') { %>
-    <script>window.SITE_CONFIG['apiURL'] = 'http://localhost:8080/api';</script>
+    <script>window.SITE_CONFIG['apiURL'] = 'http://10.10.10.77:8080/api';</script>
   <% } %>
   <!-- 验收测试环境 -->
   <% if (process.env.VUE_APP_NODE_ENV === 'prod:uat') { %>
-    <script>window.SITE_CONFIG['apiURL'] = 'http://localhost:8080/api';</script>
+    <script>window.SITE_CONFIG['apiURL'] = 'http://10.10.10.77:8080/api';</script>
   <% } %>
   <!-- 生产环境 -->
   <% if (process.env.VUE_APP_NODE_ENV === 'prod') { %>
-    <script>window.SITE_CONFIG['apiURL'] = 'http://localhost:8080/api';</script>
+    <script>window.SITE_CONFIG['apiURL'] = 'http://10.10.10.77:8080/api';</script>
   <% } %>
 </head>
 <body>
diff --git a/epmet-oper-web/src/assets/scss/modules/wx-mini/index-set.scss b/epmet-oper-web/src/assets/scss/modules/wx-mini/index-set.scss
index c4aa5d7..e7f5daa 100644
--- a/epmet-oper-web/src/assets/scss/modules/wx-mini/index-set.scss
+++ b/epmet-oper-web/src/assets/scss/modules/wx-mini/index-set.scss
@@ -6,6 +6,8 @@
 		margin-top: 10px;
 	}
 	.mw-cpt_type {
+		position: relative;
+		z-index: 10;
 		padding: 10px;
 		min-height: 250px;
 		border-radius: 4px;
diff --git a/epmet-oper-web/src/components/wx-index/cpt-item.vue b/epmet-oper-web/src/components/wx-index/cpt-item.vue
new file mode 100644
index 0000000..981eb5f
--- /dev/null
+++ b/epmet-oper-web/src/components/wx-index/cpt-item.vue
@@ -0,0 +1,154 @@
+<template>
+  <div class="mw-cpt"
+    :class="{'z-focused': isFocused}"
+    @click="focusCpt">
+    <!-- 最顶部标题组件 -->
+    <div class="mw-cpt-top_title"
+      v-if="item.componentFrontId==='resi-titleList-home-gridNameTitle'">
+      <div class="d-cpt-wrap">
+        <img class="d-cpt-ico" v-if="item.demoData.ico" :src="item.demoData.ico">
+        <img class="d-cpt-ico" v-else src="@/assets/img/modules/wx-mini/index-set/page/dang.png">
+        <span>{{ item.demoData.title }}</span>
+
+        <img class="d-cpt-avatar" v-if="item.demoData.avatar" :src="item.demoData.avatar">
+        <img class="d-cpt-avatar" v-else src="@/assets/img/modules/wx-mini/index-set/page/avatar-mini.png">
+      </div>
+    </div>
+    <!-- 轮播图组件 -->
+    <div class="mw-cpt-swiper"
+      v-else-if="item.componentFrontId==='resi-topList-voice-hotNewsSwiper'">
+      <div class="d-cpt-wrap">
+        <div class="d-cpt-subwrap">
+          <img v-if="item.demoData.pic" :src="item.demoData.pic">
+          <img v-else src="@/assets/img/modules/wx-mini/index-set/page/swiper-bg.png">
+          <div>
+            <span>{{ item.demoData.title }}</span>
+            <i></i>
+            <i></i>
+            <i></i>
+            <i class="z-on"></i>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 新消息组件 -->
+    <div class="mw-cpt-new_msg"
+      v-else-if="item.componentFrontId==='resi-floatingList-mine-newMessageButton'">
+      <div class="d-cpt-wrap">
+        <img v-if="item.demoData.ico" :src="item.demoData.ico">
+        <img v-else src="@/assets/img/modules/wx-mini/index-set/page/msg.png">
+        <span>{{ item.demoData.text }}</span>
+      </div>
+    </div>
+    <!-- 新闻组件 -->
+    <div class="mw-cpt-cnt_news"
+      v-else-if="item.componentFrontId==='resi-functionList-hall-hotSubjectList'">
+      <div class="d-cpt-wrap">
+        <div class="list">
+          <div class="item" :key="subindex" v-for="(subitem, subindex) in item.demoData.list">
+            <img v-if="subitem.pic" :src="subitem.pic">
+            <img v-else src="@/assets/img/modules/wx-mini/index-set/page/news-pic.png">
+            <div class="d-news-title">{{ subitem.title }}</div>
+            <div class="d-news-info">
+              <span>来源：{{ subitem.author }}</span>
+              <span class="f-fr">{{ subitem.date }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 中间菜单栏组件 -->
+    <div class="mw-cpt-cnt_menus"
+      v-else-if="item.componentFrontId==='resi-functionList-extend-moreFunctionIcons'">
+      <div class="d-cpt-wrap">
+        <div class="list">
+          <div class="item" :key="subindex" v-for="(subitem, subindex) in item.demoData.list">
+            <img v-if="subitem.ico" :src="subitem.ico">
+            <img v-else-if="subindex==0" src="@/assets/img/modules/wx-mini/index-set/page/menu-1.png">
+            <img v-else-if="subindex==1" src="@/assets/img/modules/wx-mini/index-set/page/menu-2.png">
+            <img v-else-if="subindex==2" src="@/assets/img/modules/wx-mini/index-set/page/menu-3.png">
+            <img v-else src="@/assets/img/modules/wx-mini/index-set/page/menu-4.png">
+            <p>{{ subitem.text }}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 群组件 -->
+    <div class="mw-cpt-cnt_groups"
+      v-else-if="item.componentFrontId==='resi-functionList-group-recommendGroupSlider'">
+      <div class="d-cpt-wrap">
+        <div class="list">
+          <div class="item" :key="subindex" v-for="(subitem, subindex) in item.demoData.list">
+            <div class="d-group-no">
+              <img v-if="subitem.ico" :src="subitem.ico">
+              <img v-else-if="subindex === 0" src="@/assets/img/modules/wx-mini/index-set/page/qi.png">
+              <img v-else src="@/assets/img/modules/wx-mini/index-set/page/qi2.png">
+              <span>{{ subitem.no }}</span>
+            </div>
+            <div class="d-group-avatar">
+              <img v-if="subitem.avatar" :src="subitem.avatar">
+              <img v-else src="@/assets/img/modules/wx-mini/index-set/page/avatar.jpg">
+            </div>
+            <div class="d-group-name">{{ subitem.title  }}</div>
+            <div class="d-group-info">
+              <span>{{ subitem.info1 }}</span>
+            </div>
+            <div class="d-group-info">
+              <span>{{ subitem.info2 }}</span>
+              <span>{{ subitem.info3 }}</span>
+            </div>
+            <div class="d-group-btn">加入</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 占位组件 -->
+    <div class="mw-cpt-placeholder" v-else>
+      <div class="d-cpt-wrap">
+        {{ item.componentName }}
+      </div>
+    </div>
+    <!-- 操作区 -->
+    <div class="d-cpt-operate"
+      :class="{'z-small': item.region!=='functionList'}"
+      v-show="isFocused"
+      @click.stop>
+      <div class="d-cpt-btn" v-show="item.region==='functionList'" @click="changeCptDisplayOrder('up')">
+        <img src="@/assets/img/modules/wx-mini/index-set/up.png">
+        <p>上移</p>
+      </div>
+      <div class="d-cpt-btn" @click="delCpt">
+        <img src="@/assets/img/modules/wx-mini/index-set/del.png">
+        <p>删除</p>
+      </div>
+      <div class="d-cpt-btn" v-show="item.region==='functionList'" @click="changeCptDisplayOrder('down')">
+        <img src="@/assets/img/modules/wx-mini/index-set/down.png">
+        <p>下移</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'cptItem',
+  data () {
+    return {}
+  },
+  props: {
+    isFocused: Boolean,
+    item: Object
+  },
+  methods: {
+    delCpt () {
+      this.$emit('del', this.item)
+    },
+    changeCptDisplayOrder (direction) {
+      this.$emit('sort', this.item, direction)
+    },
+    focusCpt () {
+      this.$emit('focus', this.item)
+    }
+  }
+}
+</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 7319a9c..74a6904 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
@@ -72,187 +72,43 @@
 
               <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>
-                <div class="mw-cpt"
-                  :class="{'z-focused': focusedCpt.tempOnlyId===item.tempOnlyId}"
-                  @click="focusCpt(item)" :key="item.componentId"
-                  v-for="item in topCptList">
-                  <div class="mw-cpt-top_title" v-if="item.componentFrontId==='resi-titleList-home-gridNameTitle'">
-                    <div class="d-cpt-wrap">
-                      <img class="d-cpt-ico" v-if="item.demoData.ico" :src="item.demoData.ico">
-                      <img class="d-cpt-ico" v-else src="@/assets/img/modules/wx-mini/index-set/page/dang.png">
-                      <span>{{ item.demoData.title }}</span>
-
-                      <img class="d-cpt-avatar" v-if="item.demoData.avatar" :src="item.demoData.avatar">
-                      <img class="d-cpt-avatar" v-else src="@/assets/img/modules/wx-mini/index-set/page/avatar-mini.png">
-                    </div>
-                  </div>
-                  <div class="mw-cpt-placeholder" v-else>
-                    <div class="d-cpt-wrap">
-                      {{ item.componentName }}
-                    </div>
-                  </div>
-                  <div class="d-cpt-operate z-small"
-                    v-show="focusedCpt.tempOnlyId===item.tempOnlyId"
-                    @click.stop>
-                    <div class="d-cpt-btn" @click="delCpt(item)">
-                      <img src="@/assets/img/modules/wx-mini/index-set/del.png">
-                      <p>删除</p>
-                    </div>
-                  </div>
-                </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>
-                <div class="mw-cpt"
-                  :class="{'z-focused': focusedCpt.tempOnlyId===item.tempOnlyId}"
-                  @click="focusCpt(item)" :key="item.componentId"
-                  v-for="item in banCptList">
-                  <div class="mw-cpt-swiper" v-if="item.componentFrontId==='resi-topList-voice-hotNewsSwiper'">
-                    <div class="d-cpt-wrap">
-                      <div class="d-cpt-subwrap">
-                        <img v-if="item.demoData.pic" :src="item.demoData.pic">
-                        <img v-else src="@/assets/img/modules/wx-mini/index-set/page/swiper-bg.png">
-                        <div>
-                          <span>{{ item.demoData.title }}</span>
-                          <i></i>
-                          <i></i>
-                          <i></i>
-                          <i class="z-on"></i>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                  <div class="mw-cpt-placeholder" v-else>
-                    <div class="d-cpt-wrap">
-                      {{ item.componentName }}
-                    </div>
-                  </div>
-                  <div class="d-cpt-operate z-small"
-                    v-show="focusedCpt.tempOnlyId===item.tempOnlyId"
-                    @click.stop>
-                    <div class="d-cpt-btn" @click="delCpt(item)">
-                      <img src="@/assets/img/modules/wx-mini/index-set/del.png">
-                      <p>删除</p>
-                    </div>
-                  </div>
-                </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>
-                <div class="mw-cpt"
-                  :class="{'z-focused': focusedCpt.tempOnlyId===item.tempOnlyId}"
-                  @click="focusCpt(item)" :key="item.componentId"
-                  v-for="item in fixedCptList">
-                  <div class="mw-cpt-new_msg" v-if="item.componentFrontId==='resi-floatingList-mine-newMessageButton'">
-                    <div class="d-cpt-wrap">
-                      <img v-if="item.demoData.ico" :src="item.demoData.ico">
-                      <img v-else src="@/assets/img/modules/wx-mini/index-set/page/msg.png">
-                      <span>{{ item.demoData.text }}</span>
-                    </div>
-                  </div>
-                  <div class="mw-cpt-placeholder" v-else>
-                    <div class="d-cpt-wrap">
-                      {{ item.componentName }}
-                    </div>
-                  </div>
-                  <div class="d-cpt-operate z-small"
-                    v-show="focusedCpt.tempOnlyId===item.tempOnlyId"
-                    @click.stop>
-                    <div class="d-cpt-btn" @click="delCpt(item)">
-                      <img src="@/assets/img/modules/wx-mini/index-set/del.png">
-                      <p>删除</p>
-                    </div>
-                  </div>
-                </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>
-                <div class="mw-cpt"
-                  :class="{'z-focused': focusedCpt.tempOnlyId===item.tempOnlyId}"
-                  @click="focusCpt(item)"
-                  :key="index"
-                  v-for="(item, index) in cntCptList">
-                  <div class="mw-cpt-cnt_news"
-                    v-if="item.componentFrontId==='resi-functionList-hall-hotSubjectList'">
-                    <div class="d-cpt-wrap">
-                      <div class="list">
-                        <div class="item" :key="subindex" v-for="(subitem, subindex) in item.demoData.list">
-                          <img v-if="subitem.pic" :src="subitem.pic">
-                          <img v-else src="@/assets/img/modules/wx-mini/index-set/page/news-pic.png">
-                          <div class="d-news-title">{{ subitem.title }}</div>
-                          <div class="d-news-info">
-                            <span>来源：{{ subitem.author }}</span>
-                            <span class="f-fr">{{ subitem.date }}</span>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                  <div class="mw-cpt-cnt_menus"
-                    v-else-if="item.componentFrontId==='resi-functionList-extend-moreFunctionIcons'">
-                    <div class="d-cpt-wrap">
-                      <div class="list">
-                        <div class="item" :key="subindex" v-for="(subitem, subindex) in item.demoData.list">
-                          <img v-if="subitem.ico" :src="subitem.ico">
-                          <img v-else-if="subindex==0" src="@/assets/img/modules/wx-mini/index-set/page/menu-1.png">
-                          <img v-else-if="subindex==1" src="@/assets/img/modules/wx-mini/index-set/page/menu-2.png">
-                          <img v-else-if="subindex==2" src="@/assets/img/modules/wx-mini/index-set/page/menu-3.png">
-                          <img v-else src="@/assets/img/modules/wx-mini/index-set/page/menu-4.png">
-                          <p>{{ subitem.text }}</p>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                  <div class="mw-cpt-cnt_groups"
-                    v-else-if="item.componentFrontId==='resi-functionList-group-recommendGroupSlider'">
-                    <div class="d-cpt-wrap">
-                      <div class="list">
-                        <div class="item" :key="subindex" v-for="(subitem, subindex) in item.demoData.list">
-                          <div class="d-group-no">
-                            <img v-if="subitem.ico" :src="subitem.ico">
-                            <img v-else-if="subindex === 0" src="@/assets/img/modules/wx-mini/index-set/page/qi.png">
-                            <img v-else src="@/assets/img/modules/wx-mini/index-set/page/qi2.png">
-                            <span>{{ subitem.no }}</span>
-                          </div>
-                          <div class="d-group-avatar">
-                            <img v-if="subitem.avatar" :src="subitem.avatar">
-                            <img v-else src="@/assets/img/modules/wx-mini/index-set/page/avatar.jpg">
-                          </div>
-                          <div class="d-group-name">{{ subitem.title  }}</div>
-                          <div class="d-group-info">
-                            <span>{{ subitem.info1 }}</span>
-                          </div>
-                          <div class="d-group-info">
-                            <span>{{ subitem.info2 }}</span>
-                            <span>{{ subitem.info3 }}</span>
-                          </div>
-                          <div class="d-group-btn">加入</div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                  <div class="mw-cpt-placeholder" v-else>
-                    <div class="d-cpt-wrap">
-                      {{ item.componentName }}
-                    </div>
-                  </div>
-                  <div class="d-cpt-operate"
-                    v-show="focusedCpt.tempOnlyId===item.tempOnlyId"
-                    @click.stop>
-                    <div class="d-cpt-btn" @click="changeCptDisplayOrder(item, 'up')">
-                      <img src="@/assets/img/modules/wx-mini/index-set/up.png">
-                      <p>上移</p>
-                    </div>
-                    <div class="d-cpt-btn" @click="delCpt(item)">
-                      <img src="@/assets/img/modules/wx-mini/index-set/del.png">
-                      <p>删除</p>
-                    </div>
-                    <div class="d-cpt-btn" @click="changeCptDisplayOrder(item, 'down')">
-                      <img src="@/assets/img/modules/wx-mini/index-set/down.png">
-                      <p>下移</p>
-                    </div>
-                  </div>
-                </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>
@@ -306,6 +162,7 @@
 
 <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'
@@ -548,6 +405,7 @@ export default {
   },
 
   components: {
+    'cpt-item': componentWxcpt
   },
 
   computed: {
@@ -802,6 +660,7 @@ export default {
           this.addCpt(item, tempOnlyId, 3)
         }
       } else if (regionType === 'cnt') {
+        this.cntCptListResort()
         this.addCpt(item, tempOnlyId, 4, (this.cntCptList.length + 1) * 10)
       } else {
         return false
@@ -840,6 +699,7 @@ export default {
       if (this.focusedCpt.tempOnlyId === item.tempOnlyId) {
         this.focusedCpt = { tempOnlyId: '' }
       }
+      this.cntCptListResort()
     },
     // 检测实例中是否存在某种类型组件
     checkExistCpt (item) {
diff --git a/epmet-oper-web/vue.config.js b/epmet-oper-web/vue.config.js
index 279b280..a64244c 100644
--- a/epmet-oper-web/vue.config.js
+++ b/epmet-oper-web/vue.config.js
@@ -2,7 +2,7 @@
  * 配置参考: https://cli.vuejs.org/zh/config/
  */
 module.exports = {
-  baseUrl: process.env.NODE_ENV === 'production' ? '/epmet-oper' : '/epmet-oper',
+  baseUrl: process.env.NODE_ENV === 'production' ? '' : '/epmet-oper',
   chainWebpack: config => {
     const svgRule = config.module.rule('svg')
     svgRule.uses.clear()
