feat: 增加云日报页面结构

package.json

 {
   "name": "gicfront",
-  "version": "1.0.10",
+  "version": "1.0.11",
   "description": "A Vue.js project",
   "author": "haoban",
   "private": true,

src/components/app/app-detail-left.vue

@@ -2,20 +2,24 @@
   应用公共左侧菜单：
   <common-detail-left
     :tabListData="tabListData"
+    :activeSelTab="activeSelTab"
     @setSelectTab="setSelectTab">
   </common-detail-left>
+  // activeSelTab: 刷新时候传入的选中 tabId
+  // tabListData: 列表数据
+  // @setSelectTab: 选择后把选择的 tabId 返给父级
  -->
 <template>
   <div>
     <ul class="tab-left-list">
-      <template v-for="(item, index) in tabListData">
-        <li :class="['tab-left-list-cell color-303133 font-14 border-box p-l-14', item.tabId == activeTab ? 'active-tab' : '']" :key="index" @click="selectTab(item)"><i :class="['p-r-10 color-303133 iconfont', item.icon]"></i>{{ item.tabName }}</li>
+      <template v-for="(item, index) in tabData">
+        <li :class="['tab-left-list-cell color-303133 font-14 border-box p-l-14', item.tabId == activeTab ? 'active-tab' : '']" :key="index" @click="selectTab(item, false, index)"><i :class="['p-r-10 color-303133 iconfont', item.icon, !!item.onlyIconActive ? 'iconActive' : '']"></i>{{ item.tabName }}</li>
         <ul class="child-tab-left-list" :key="'childitem' + index">
           <template v-for="(childitem, childIndex) in item.children">
-            <li :class="['tab-left-list-cell color-303133 font-14 border-box', childitem.tabId == activeTab ? 'active-tab' : '']" :key="childIndex" @click="selectTab(childitem)">{{ childitem.tabName }}</li>
+            <li :class="['tab-left-list-cell color-303133 font-14 border-box p-l-40', childitem.tabId == activeTab ? 'active-tab' : '']" :key="childIndex" @click="selectTab(childitem, 'child', index)">{{ childitem.tabName }}</li>
             <ul class="third-tab-left-list" :key="'thirditem' + childIndex">
               <template v-for="(thirditem, thirdIndex) in childitem.children">
-                <li :class="['tab-left-list-cell color-303133 font-14 border-box', thirditem.tabId == activeTab ? 'active-tab' : '']" :key="thirdIndex" @click="selectTab(thirditem)">{{ thirditem.tabName }}</li>
+                <li :class="['tab-left-list-cell color-303133 font-14 border-box p-l-60', thirditem.tabId == activeTab ? 'active-tab' : '']" :key="thirdIndex" @click="selectTab(thirditem, 'child', index)">{{ thirditem.tabName }}</li>
               </template>
             </ul>
           </template>
@@ -34,6 +38,14 @@ export default {
         return '';
       }
     },
+    // 刷新时候传入的选中 tabId
+    activeSelTab: {
+      type: [String, Number],
+      default() {
+        return '1';
+      }
+    },
+    // 传入的 tabListData
     tabListData: {
       type: [Array, Object],
       default() {
@@ -44,23 +56,56 @@ export default {
   data() {
     return {
       projectName: '', // 当前项目名
-      activeTab: '1'
+      activeTab: '1',
+      tabData: this.tabListData
     };
   },
 
   methods: {
     /**
-     * 返回
+     * 路由跳转
      */
     returnBack() {
       let that = this;
       that.$router.push('appcenter');
     },
-    selectTab(item) {
+    /**
+     * 选择后触发方法，返回 tabId
+     */
+    selectTab(item, flag, index) {
       let that = this;
+      if (!!flag) {
+        that.tabData[index].onlyIconActive = true;
+      } else {
+        that.tabData.forEach(ele => {
+          ele.onlyIconActive = false;
+        });
+      }
+      // 判断已选 item, 判断只让 icon 变色
+      if (item.hasOwnProperty('children')) {
+        that.tabData[index].onlyIconActive = true;
+        if (item.children[0].hasOwnProperty('children')) {
+          that.activeTab = item.children[0].children[0].tabId;
+          that.$emit('setSelectTab', item);
+          return false;
+        }
+        that.activeTab = item.children[0].tabId;
+        that.$emit('setSelectTab', item);
+        return false;
+      }
       that.activeTab = item.tabId;
       that.$emit('setSelectTab', item);
     }
+  },
+  watch: {
+    tabListData: function(newData, oldData) {
+      let that = this;
+      that.tabData = newData;
+    },
+    activeSelTab: function(newData, oldData) {
+      let that = this;
+      that.activeTab = newData;
+    }
   }
 };
 </script>
@@ -75,7 +120,9 @@ export default {
     white-space: nowrap;
     overflow: hidden;
     cursor: pointer;
-
+    .iconActive {
+      color: #1890ff;
+    }
     &:hover {
       background: rgba(24, 144, 255, 0.06);
       i {

src/components/app/visiable-dialog.vue

@@ -63,8 +63,8 @@
         <el-button type="primary" @click="customConfirm">确 定</el-button>
       </div>
     </el-dialog>
-    <vue-select-employee :defaultSelection="defaultSelection" :onlyPerson="onlyPerson" :treeSet="treeSet" :changed="changed" @handleSelectedList="handleSelectedList"> </vue-select-employee>
-    <vue-select-store ref="storeSelector" :treeSet="storeTreeSet" :selectType="'all'" :defaultList="defaultStoreList" @handleSelectedList="handleSelectedList"> </vue-select-store>
+    <vue-select-employee :appScene="appScene" :defaultSelection="defaultSelection" :onlyPerson="onlyPerson" :treeSet="treeSet" :changed="changed" @handleSelectedList="handleSelectedList"> </vue-select-employee>
+    <vue-select-store ref="storeSelector" :appScene="appScene" :treeSet="storeTreeSet" :selectType="'all'" :defaultList="defaultStoreList" @handleSelectedList="handleSelectedList"> </vue-select-store>
   </div>
 </template>
 <script>
@@ -104,6 +104,7 @@ export default {
         departList: [],
         storeList: []
       },
+      appScene: 2,
       treeSet: {
         isSelectPerson: false, // 控制只能选部门(false)
         dialogVisible: false, // 控制显示/隐藏

src/components/common/vueSelectEmployee.vue

@@ -88,6 +88,11 @@ export default {
       //同一页面多个场景使用组建，切换场景时要传一个changed字符串告诉组建场景已切换，进行重组数据
       type: [String, Number],
       default: ''
+    },
+    appScene: {
+      // 使用场景
+      type: [String, Number],
+      default: ''
     }
   },
   data() {
@@ -111,7 +116,8 @@ export default {
     getGroupData() {
       let that = this;
       let params = {
-        isStoreGroup: 0
+        isStoreGroup: 0,
+        appScene: that.appScene
       };
       getRequest('/haoban-manage-web/dept/deptListForCompany', params)
         .then(res => {

src/components/common/vueSelectStore.vue

@@ -87,6 +87,11 @@ export default {
       default() {
         return [];
       }
+    },
+    appScene: {
+      // 使用场景
+      type: [String, Number],
+      default: ''
     }
   },
   data() {
@@ -114,7 +119,8 @@ export default {
     getGroupData() {
       let that = this;
       let params = {
-        isStoreGroup: 1
+        isStoreGroup: 1,
+        appScene: that.appScene
       };
       getRequest('/haoban-manage-web/dept/deptList', params)
         .then(res => {

src/router/index.js

@@ -157,25 +157,34 @@ export const constantRouterMap = [
         component: _import('enterpriseApp', 'mycustomer')
       },
       {
-        path: '/dailyRecorde',
-        name: '云日报记录',
-        component: _import('enterpriseApp/cloudDaily', 'dailyRecorde')
-      },
+        path: '/cloudDaily',
+        name: '云日报',
+        redirect: '/dailyRecord',
+        component: _import('enterpriseApp/cloudDaily', 'index'),
+        children: [
           {
+            path: '/dailyRecord',
+            name: '云日报记录',
+            component: _import('enterpriseApp/cloudDaily', 'dailyRecord')
+          }, {
             path: '/dailyDetail',
             name: '日报详情',
             component: _import('enterpriseApp/cloudDaily', 'dailyDetail')
-      },
-      {
+          }, {
             path: '/taskAssign',
             name: '任务下发设置',
             component: _import('enterpriseApp/cloudDaily', 'taskAssign')
-      },
-      {
+          }, {
             path: '/systemReport',
             name: '系统报表',
             component: _import('enterpriseApp/cloudDaily', 'systemReport')
-      },
+          }, {
+            path: '/customReport',
+            name: '自定义报表',
+            component: _import('enterpriseApp/cloudDaily', 'customReport')
+          }
+        ]
+      }
     ]
   },
   {

src/views/enterpriseApp/cloudDaily/customReport.vue

+<template>
+  <div>
+    <app-detail :brandId="activeBrand" :tabType="activeTab"></app-detail>
+  </div>
+</template>
+<script>
+// import navCrumb from '@/components/nav/nav.vue';
+import appDetail from '@/components/app/app-detail.vue';
+
+export default {
+  name: 'reviewed',
+  props: {
+    brandId: {
+      type: String,
+      default() {
+        return '';
+      }
+    }
+  },
+  data() {
+    return {
+      tableH: window.screen.availHeight - 464 - 126 + 'px',
+      activeTab: '1',
+      activeBrand: '1' // 商户(品牌) id
+    };
+  },
+  computed: {},
+  methods: {
+    /**
+     * 返回 的 brandId
+     */
+    selectBrandId(id) {
+      let that = this;
+      that.activeBrand = id;
+    },
+
+    setSelectTab(item) {
+      let that = this;
+      that.activeTab = item.tabId;
+    }
+  },
+  watch: {
+    activeBrand: function(newData, oldData) {
+      const that = this;
+      that.activeBrand = newData;
+    }
+  },
+  mounted() {
+    document.documentElement.style.backgroundColor = '#f0f2f5';
+    this.$emit('showTab', '212');
+  },
+  destroyed() {
+    document.documentElement.style.backgroundColor = '#fff';
+  },
+  components: {
+    appDetail
+  }
+};
+</script>
+<style type="text/scss" lang="scss" scoped>
+.bg-82C5FF {
+  background: #82c5ff;
+}
+
+.color-508CEE {
+  color: #508cee;
+}
+
+.color-FF585C {
+  color: #ff585c;
+}
+
+.line-h-18 {
+  line-height: 18px;
+}
+
+.tooltip-text {
+  width: 100%;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+.right-content {
+  /*width: 100%;*/
+  padding: 24px;
+  min-height: calc(100% - 240px);
+
+  .my-customer-top {
+    position: relative;
+    height: 43px;
+    line-height: 43px;
+    .my-customer-return {
+      position: absolute;
+      left: 0px;
+      bottom: 10px;
+      width: 78px;
+      height: 32px;
+      border-radius: 18px;
+    }
+
+    .my-customer-brand {
+      position: absolute;
+      right: 0;
+      bottom: 18px;
+      width: 93px;
+      height: 32px;
+    }
+
+    .my-customer-name {
+      width: 200px;
+      margin: 0 auto;
+
+      i {
+        font-size: 14px;
+        color: #fff;
+      }
+      span {
+        font-size: 16px;
+        color: #000;
+      }
+
+      .app-icon {
+        display: inline-block;
+        width: 22px;
+        height: 22px;
+        line-height: 22px;
+        text-align: center;
+        border-radius: 4px;
+        background: -webkit-linear-gradient(left, #7ab6fb, #508bfe);
+        background: -moz-linear-gradient(left, #7ab6fb, #508bfe);
+        background: linear-gradient(left, #7ab6fb, #508bfe);
+      }
+    }
+  }
+  .right-box {
+    // background: #fff;
+    min-height: 500px;
+    padding: 0px;
+
+    .apps-content {
+      .apps-content-left {
+        height: 100%;
+        background: #fff;
+        overflow-x: hidden;
+        overflow-y: auto;
+
+        .apps-content-left__title {
+          height: 55px;
+          line-height: 55px;
+          padding: 0 0 0 18px;
+        }
+
+        .tab-left-list-cell {
+          position: relative;
+          text-align: left;
+          margin-top: 15px;
+          height: 30px;
+          line-height: 30px;
+          white-space: nowrap;
+          overflow: hidden;
+          cursor: pointer;
+
+          &:hover {
+            background: rgba(24, 144, 255, 0.06);
+            i {
+              color: #1890ff;
+            }
+          }
+          &.active-tab {
+            background: rgba(24, 144, 255, 0.06);
+            &::before {
+              content: ' ';
+              position: absolute;
+              left: 0;
+              top: 0;
+              bottom: 0;
+              width: 2px;
+              background: #1890ff;
+              z-index: 1;
+            }
+            i {
+              color: #1890ff;
+            }
+          }
+
+          .child-tab-left-list {
+            li {
+              position: relative;
+              text-align: left;
+              height: 30px;
+              line-height: 30px;
+              white-space: nowrap;
+              overflow: hidden;
+              cursor: pointer;
+
+              &:hover {
+                background: rgba(24, 144, 255, 0.06);
+                i {
+                  color: #1890ff;
+                }
+              }
+              &.active-tab {
+                background: rgba(24, 144, 255, 0.06);
+                &::before {
+                  content: ' ';
+                  position: absolute;
+                  left: 0;
+                  top: 0;
+                  bottom: 0;
+                  width: 2px;
+                  background: #1890ff;
+                  z-index: 1;
+                }
+                i {
+                  color: #1890ff;
+                }
+              }
+            }
+          }
+        }
+      }
+      .apps-content-right {
+        width: calc(100% - 10px);
+        margin-left: 10px;
+        background: #fff;
+      }
+    }
+  }
+}
+</style>

src/views/enterpriseApp/cloudDaily/dailyDetail.vue

+<template>
+  <div class="my-customer-wrap common-set-wrap">
+    <app-detail :brandId="activeBrand" :tabType="activeTab"></app-detail>
+  </div>
+</template>
+<script>
+import appDetail from '@/components/app/app-detail.vue';
+export default {
+  name: 'reviewed',
+  data() {
+    return {
+      tableH: window.screen.availHeight - 464 - 126 + 'px',
+      activeTab: '1',
+      tabListData: [
+        {
+          tabId: '1',
+          tabName: '云日报记录',
+          icon: 'icon-ribao'
+        },
+        {
+          tabId: '2',
+          tabName: '云日报设置',
+          icon: 'icon-ribaoshezhi',
+          children: [
+            {
+              tabId: '21',
+              tabName: '模板配置',
+              icon: '',
+              children: [
+                {
+                  tabId: '211',
+                  tabName: '系统报表',
+                  icon: ''
+                },
+                {
+                  tabId: '212',
+                  tabName: '自定义报表',
+                  icon: ''
+                }
+              ]
+            },
+            {
+              tabId: '22',
+              tabName: '任务下发设置',
+              icon: ''
+            }
+          ]
+        }
+      ],
+      activeBrand: '1' // 商户(品牌) id
+    };
+  },
+  computed: {},
+  methods: {
+    /**
+     * 返回 的 brandId
+     */
+    selectBrandId(id) {
+      let that = this;
+      that.activeBrand = id;
+    },
+
+    setSelectTab(item) {
+      let that = this;
+      that.activeTab = item.tabId;
+    }
+  },
+  watch: {
+    activeBrand: function(newData, oldData) {
+      const that = this;
+      that.activeBrand = newData;
+    }
+  },
+  mounted() {
+    document.documentElement.style.backgroundColor = '#f0f2f5';
+    this.$emit('showTab', '1');
+  },
+  destroyed() {
+    document.documentElement.style.backgroundColor = '#fff';
+  },
+  components: {
+    appDetail
+  }
+};
+</script>
+<style type="text/scss" lang="scss" scoped>
+.bg-82C5FF {
+  background: #82c5ff;
+}
+
+.color-508CEE {
+  color: #508cee;
+}
+
+.color-FF585C {
+  color: #ff585c;
+}
+
+.line-h-18 {
+  line-height: 18px;
+}
+
+.tooltip-text {
+  width: 100%;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+.right-content {
+  /*width: 100%;*/
+  padding: 24px;
+  min-height: calc(100% - 240px);
+
+  .my-customer-top {
+    position: relative;
+    height: 43px;
+    line-height: 43px;
+    .my-customer-return {
+      position: absolute;
+      left: 0px;
+      bottom: 10px;
+      width: 78px;
+      height: 32px;
+      border-radius: 18px;
+    }
+
+    .my-customer-brand {
+      position: absolute;
+      right: 0;
+      bottom: 18px;
+      width: 93px;
+      height: 32px;
+    }
+
+    .my-customer-name {
+      width: 200px;
+      margin: 0 auto;
+
+      i {
+        font-size: 14px;
+        color: #fff;
+      }
+      span {
+        font-size: 16px;
+        color: #000;
+      }
+
+      .app-icon {
+        display: inline-block;
+        width: 22px;
+        height: 22px;
+        line-height: 22px;
+        text-align: center;
+        border-radius: 4px;
+        background: -webkit-linear-gradient(left, #7ab6fb, #508bfe);
+        background: -moz-linear-gradient(left, #7ab6fb, #508bfe);
+        background: linear-gradient(left, #7ab6fb, #508bfe);
+      }
+    }
+  }
+  .right-box {
+    // background: #fff;
+    min-height: 500px;
+    padding: 0px;
+
+    .apps-content {
+      .apps-content-left {
+        height: 100%;
+        background: #fff;
+        overflow-x: hidden;
+        overflow-y: auto;
+
+        .apps-content-left__title {
+          height: 55px;
+          line-height: 55px;
+          padding: 0 0 0 18px;
+        }
+
+        .tab-left-list-cell {
+          position: relative;
+          text-align: left;
+          margin-top: 15px;
+          height: 30px;
+          line-height: 30px;
+          white-space: nowrap;
+          overflow: hidden;
+          cursor: pointer;
+
+          &:hover {
+            background: rgba(24, 144, 255, 0.06);
+            i {
+              color: #1890ff;
+            }
+          }
+          &.active-tab {
+            background: rgba(24, 144, 255, 0.06);
+            &::before {
+              content: ' ';
+              position: absolute;
+              left: 0;
+              top: 0;
+              bottom: 0;
+              width: 2px;
+              background: #1890ff;
+              z-index: 1;
+            }
+            i {
+              color: #1890ff;
+            }
+          }
+
+          .child-tab-left-list {
+            li {
+              position: relative;
+              text-align: left;
+              height: 30px;
+              line-height: 30px;
+              white-space: nowrap;
+              overflow: hidden;
+              cursor: pointer;
+
+              &:hover {
+                background: rgba(24, 144, 255, 0.06);
+                i {
+                  color: #1890ff;
+                }
+              }
+              &.active-tab {
+                background: rgba(24, 144, 255, 0.06);
+                &::before {
+                  content: ' ';
+                  position: absolute;
+                  left: 0;
+                  top: 0;
+                  bottom: 0;
+                  width: 2px;
+                  background: #1890ff;
+                  z-index: 1;
+                }
+                i {
+                  color: #1890ff;
+                }
+              }
+            }
+          }
+        }
+      }
+      .apps-content-right {
+        width: calc(100% - 10px);
+        margin-left: 10px;
+        background: #fff;
+      }
+    }
+  }
+}
+</style>

src/views/enterpriseApp/cloudDaily/dailyRecord.vue

+<template>
+  <div class="daily-set-wrap ">
+    <common-detail-top :topMenuData="topMenuData" :activeId="activeId"></common-detail-top>
+    <div class="daily-set-content boder-box"></div>
+  </div>
+</template>
+<script>
+// import navCrumb from '@/components/nav/nav.vue';
+import appDetail from '@/components/app/app-detail.vue';
+import commonDetailTop from '@/components/app/common-detail-top.vue';
+export default {
+  name: 'reviewed',
+  props: {
+    brandId: {
+      type: String,
+      default() {
+        return '';
+      }
+    }
+  },
+  data() {
+    return {
+      activeTab: '1',
+      activeBrand: this.brandId, // 商户(品牌) id
+      topMenuData: [
+        {
+          id: '1',
+          name: '云日报记录'
+        }
+      ],
+      activeId: '1'
+    };
+  },
+  computed: {},
+  methods: {
+    /**
+     * 返回 的 brandId
+     */
+    selectBrandId(id) {
+      let that = this;
+      that.activeBrand = id;
+    },
+
+    setSelectTab(item) {
+      let that = this;
+      that.activeTab = item.tabId;
+    }
+  },
+  watch: {
+    activeBrand: function(newData, oldData) {
+      const that = this;
+      that.activeBrand = newData;
+    }
+  },
+  mounted() {
+    document.documentElement.style.backgroundColor = '#f0f2f5';
+    console.log(this.brandId);
+  },
+  destroyed() {
+    document.documentElement.style.backgroundColor = '#fff';
+  },
+  components: {
+    appDetail,
+    commonDetailTop
+  }
+};
+</script>
+<style type="text/scss" lang="scss" scoped>
+.daily-set-wrap {
+  .daily-set-content {
+    padding: 16px;
+  }
+}
+</style>

src/views/enterpriseApp/cloudDaily/index.vue

+<template>
+  <div class="my-customer-wrap common-set-wrap">
+    <!-- <nav-crumb :navpath="navpath"> </nav-crumb> -->
+    <div class="right-content">
+      <common-app-top :appName="appName" :appIcon="appIcon" @selectBrandId="selectBrandId"> </common-app-top>
+      <div class="right-box" :style="{ 'min-height': $store.state.bgHeight }">
+        <div class="apps-content flex" :style="{ height: $store.state.bgHeight }">
+          <div class="apps-content-left w-157">
+            <common-detail-left :tabListData="tabListData" :activeSelTab="activeSelTab" @setSelectTab="setSelectTab"></common-detail-left>
+          </div>
+          <div class="apps-content-right">
+            <transition name="fade" mode="out-in">
+              <router-view :brandId="activeBrand" :tabType="activeTab" @showTab="showTab"></router-view>
+            </transition>
+          </div>
+        </div>
+      </div>
+    </div>
+    <vue-gic-footer></vue-gic-footer>
+    <!-- 公共组件 -->
+  </div>
+</template>
+<script>
+// import navCrumb from '@/components/nav/nav.vue';
+import appDetail from '@/components/app/app-detail.vue';
+import commonAppTop from '@/components/app/common-app-top.vue';
+import commonDetailLeft from '@/components/app/app-detail-left.vue';
+export default {
+  name: 'reviewed',
+  data() {
+    return {
+      tableH: window.screen.availHeight - 464 - 126 + 'px',
+      // 面包屑参数
+      /* navpath: [
+        {
+          name: '首页',
+          path: '/index'
+        },
+        {
+          name: '企业应用',
+          path: ''
+        }
+      ], */
+      appName: '云日报',
+      appIcon: 'icon-ribao',
+      activeSelTab: '1',
+      activeTab: '1',
+      tabListData: [
+        {
+          tabId: '1',
+          tabName: '云日报记录',
+          icon: 'icon-ribao1',
+          onlyIconActive: false
+        },
+        {
+          tabId: '2',
+          tabName: '云日报设置',
+          icon: 'icon-ribaoshezhi',
+          onlyIconActive: false,
+          children: [
+            {
+              tabId: '21',
+              tabName: '模板配置',
+              icon: '',
+              children: [
+                {
+                  tabId: '211',
+                  tabName: '系统报表',
+                  icon: ''
+                },
+                {
+                  tabId: '212',
+                  tabName: '自定义报表',
+                  icon: ''
+                }
+              ]
+            },
+            {
+              tabId: '22',
+              tabName: '任务下发设置',
+              icon: ''
+            }
+          ]
+        }
+      ],
+      activeBrand: '1' // 商户(品牌) id
+    };
+  },
+  computed: {},
+  methods: {
+    /**
+     * 路由跳转
+     */
+    changeRoute(path) {
+      this.$router.push(path);
+    },
+
+    /**
+     * 返回 的 brandId
+     */
+    selectBrandId(id) {
+      let that = this;
+      that.activeBrand = id;
+    },
+
+    /**
+     * 选择后返回tabId，做各路由判断
+     */
+    setSelectTab(item) {
+      let that = this;
+      that.activeTab = item.tabId;
+      switch (item.tabId) {
+        case '1':
+          that.changeRoute('dailyRecord');
+          break;
+        case '211':
+          that.changeRoute('systemReport');
+          break;
+        case '212':
+          that.changeRoute('customReport');
+          break;
+        case '22':
+          that.changeRoute('taskAssign');
+          break;
+      }
+    },
+
+    /**
+     * 各路由返回 tabId
+     */
+    showTab(id) {
+      let that = this;
+      that.activeTab = id;
+      that.activeSelTab = id;
+      that.tabListData.forEach(ele => {
+        if (ele.tabId == id) {
+          ele.onlyIconActive = false;
+        }
+        if (!!ele.children) {
+          ele.children.forEach(el => {
+            if (el.tabId == id) {
+              ele.onlyIconActive = true;
+            }
+            if (!!el.children) {
+              el.children.forEach(item => {
+                if (item.tabId == id) {
+                  ele.onlyIconActive = true;
+                }
+              });
+            }
+          });
+        }
+      });
+    }
+  },
+  watch: {
+    activeBrand: function(newData, oldData) {
+      const that = this;
+      that.activeBrand = newData;
+    }
+  },
+  mounted() {
+    document.documentElement.style.backgroundColor = '#f0f2f5';
+  },
+  destroyed() {
+    document.documentElement.style.backgroundColor = '#fff';
+  },
+  components: {
+    // navCrumb,
+    appDetail,
+    commonAppTop,
+    commonDetailLeft
+  }
+};
+</script>
+<style type="text/scss" lang="scss" scoped>
+.bg-82C5FF {
+  background: #82c5ff;
+}
+
+.color-508CEE {
+  color: #508cee;
+}
+
+.color-FF585C {
+  color: #ff585c;
+}
+
+.line-h-18 {
+  line-height: 18px;
+}
+
+.tooltip-text {
+  width: 100%;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+.right-content {
+  /*width: 100%;*/
+  padding: 24px;
+  min-height: calc(100% - 240px);
+
+  .my-customer-top {
+    position: relative;
+    height: 43px;
+    line-height: 43px;
+    .my-customer-return {
+      position: absolute;
+      left: 0px;
+      bottom: 10px;
+      width: 78px;
+      height: 32px;
+      border-radius: 18px;
+    }
+
+    .my-customer-brand {
+      position: absolute;
+      right: 0;
+      bottom: 18px;
+      width: 93px;
+      height: 32px;
+    }
+
+    .my-customer-name {
+      width: 200px;
+      margin: 0 auto;
+
+      i {
+        font-size: 14px;
+        color: #fff;
+      }
+      span {
+        font-size: 16px;
+        color: #000;
+      }
+
+      .app-icon {
+        display: inline-block;
+        width: 22px;
+        height: 22px;
+        line-height: 22px;
+        text-align: center;
+        border-radius: 4px;
+        background: -webkit-linear-gradient(left, #7ab6fb, #508bfe);
+        background: -moz-linear-gradient(left, #7ab6fb, #508bfe);
+        background: linear-gradient(left, #7ab6fb, #508bfe);
+      }
+    }
+  }
+  .right-box {
+    // background: #fff;
+    min-height: 500px;
+    padding: 0px;
+
+    .apps-content {
+      .apps-content-left {
+        height: 100%;
+        background: #fff;
+        overflow-x: hidden;
+        overflow-y: auto;
+
+        .apps-content-left__title {
+          height: 55px;
+          line-height: 55px;
+          padding: 0 0 0 18px;
+        }
+
+        .tab-left-list-cell {
+          position: relative;
+          text-align: left;
+          margin-top: 15px;
+          height: 30px;
+          line-height: 30px;
+          white-space: nowrap;
+          overflow: hidden;
+          cursor: pointer;
+
+          &:hover {
+            background: rgba(24, 144, 255, 0.06);
+            i {
+              color: #1890ff;
+            }
+          }
+          &.active-tab {
+            background: rgba(24, 144, 255, 0.06);
+            &::before {
+              content: ' ';
+              position: absolute;
+              left: 0;
+              top: 0;
+              bottom: 0;
+              width: 2px;
+              background: #1890ff;
+              z-index: 1;
+            }
+            i {
+              color: #1890ff;
+            }
+          }
+
+          .child-tab-left-list {
+            li {
+              position: relative;
+              text-align: left;
+              height: 30px;
+              line-height: 30px;
+              white-space: nowrap;
+              overflow: hidden;
+              cursor: pointer;
+
+              &:hover {
+                background: rgba(24, 144, 255, 0.06);
+                i {
+                  color: #1890ff;
+                }
+              }
+              &.active-tab {
+                background: rgba(24, 144, 255, 0.06);
+                &::before {
+                  content: ' ';
+                  position: absolute;
+                  left: 0;
+                  top: 0;
+                  bottom: 0;
+                  width: 2px;
+                  background: #1890ff;
+                  z-index: 1;
+                }
+                i {
+                  color: #1890ff;
+                }
+              }
+            }
+          }
+        }
+      }
+      .apps-content-right {
+        width: calc(100% - 10px);
+        margin-left: 10px;
+        background: #fff;
+      }
+    }
+  }
+}
+</style>

src/views/enterpriseApp/cloudDaily/systemReport.vue

+<template>
+  <div class="system-set-wrap">
+    <common-detail-top :topMenuData="topMenuData" :activeId="activeId"></common-detail-top>
+    <div class="system-set-content boder-box">
+      <div class="system-set-cell">
+        <div class="font-14 color-606266">云日报系统报表：提供系统能够智能识别的指标（例如：销售额、达成率等），配置成报表融入云日报上报模板中</div>
+        <div class="m-t-30"><el-button type="primary" @click="toEdit">编辑模板</el-button></div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import appDetail from '@/components/app/app-detail.vue';
+import commonDetailTop from '@/components/app/common-detail-top.vue';
+export default {
+  name: 'reviewed',
+  brandId: {
+    type: String,
+    default() {
+      return '';
+    }
+  },
+  data() {
+    return {
+      activeBrand: this.brandId, // 商户(品牌) id
+      topMenuData: [
+        {
+          id: '1',
+          name: '系统报表'
+        }
+      ],
+      activeId: '1'
+    };
+  },
+  computed: {},
+  methods: {
+    /**
+     * 跳转系统模板编辑
+     */
+    toEdit() {
+      let that = this;
+      that.$router.push(`/systemReportSet?brandId=${that.activeBrand}`);
+    }
+  },
+  watch: {
+    brandId: function(newData, oldData) {
+      const that = this;
+      that.activeBrand = newData;
+    }
+  },
+  mounted() {
+    document.documentElement.style.backgroundColor = '#f0f2f5';
+    this.$emit('showTab', '211');
+  },
+  destroyed() {
+    document.documentElement.style.backgroundColor = '#fff';
+  },
+  components: {
+    appDetail,
+    commonDetailTop
+  }
+};
+</script>
+<style type="text/scss" lang="scss" scoped>
+.system-set-wrap {
+  .system-set-content {
+    padding: 30px 50px 50px 50px;
+  }
+}
+</style>

src/views/enterpriseApp/cloudDaily/systemReportSet.vue

+<template>
+  <div class="template-wrap" :style="{ height: bodyHeight }">
+    <div class="template-contain">
+      <!-- 头部标题 -->
+      <div class="template-head">
+        <div class="template-title flex-1">
+          <img src="../../../assets/logo45_45.png" alt="logo" />
+          <span class="template-title-span">员工档案设置</span>
+        </div>
+        <div class="template-btns flex-1 flex-r">
+          <el-button type="primary" plain @click="saveAndBack('preview')">预 览</el-button>
+          <el-button type="primary" plain @click="changeRoute('/fileSet')">返 回</el-button>
+          <el-button type="primary" @click="saveAndBack('save')">保存并启用</el-button>
+        </div>
+      </div>
+      <!-- 模板body -->
+      <div class="template-body">
+        <!-- 左侧 -->
+        <div class="template-cell template-cell-l">
+          <!-- tab 切换 -->
+          <el-tabs v-model="activeName">
+            <el-tab-pane label="系统字段" name="first">
+              <div class="filed-item-title">基本信息</div>
+              <ul>
+                <draggable id="list1" @clone="baseInfoClone" :list="baseInfo" class="compenent" :options="leftOption" :move="onMove" @start="isDragging = true" @end="itemMoveEnd"
+                  ><!-- @end="itemMoveEnd" -->
+                  <li :class="['compenent-item', item.fixed == true ? 'fixed-item' : '']" :data-type="item.fieldCode" v-for="(item, index) in baseInfo" :key="index" @mousedown="clickItem(item)" aria-hidden="true">
+                    <span>{{ item.fieldName }}</span>
+                  </li>
+                </draggable>
+              </ul>
+              <div class="filed-item-title">工作信息</div>
+              <ul>
+                <draggable id="list2" :list="jobInfo" class="compenent" :options="leftOption" :move="onMove" @start="isDragging = true" @end="itemMoveEnd">
+                  <li :class="['compenent-item', item.fixed == true ? 'fixed-item' : '']" :data-type="item.fieldCode" v-for="(item, index) in jobInfo" :key="index" @mousedown="clickItem(item)">
+                    <span>{{ item.fieldName }}</span>
+                  </li>
+                </draggable>
+              </ul>
+              <div class="filed-item-title">个人信息</div>
+              <ul>
+                <draggable id="list3" :list="selfInfo" class="compenent" :options="leftOption" :move="onMove" @start="isDragging = true" @end="itemMoveEnd">
+                  <li :class="['compenent-item', item.fixed == true ? 'fixed-item' : '']" :data-type="item.fieldCode" v-for="(item, index) in selfInfo" :key="index" @mousedown="clickItem(item)">
+                    <span>{{ item.fieldName }}</span>
+                  </li>
+                </draggable>
+              </ul>
+              <div class="filed-item-title">学历信息</div>
+              <ul>
+                <draggable id="list4" :list="eduInfo" class="compenent" :options="leftOption" :move="onMove" @start="isDragging = true" @end="itemMoveEnd">
+                  <li :class="['compenent-item', item.fixed == true ? 'fixed-item' : '']" :data-type="item.fieldCode" v-for="(item, index) in eduInfo" :key="index" @mousedown="clickItem(item)">
+                    <span>{{ item.fieldName }}</span>
+                  </li>
+                </draggable>
+              </ul>
+              <div class="filed-item-title">合同信息</div>
+              <ul>
+                <draggable id="list5" :list="contractInfo" class="compenent" :options="leftOption" :move="onMove" @start="isDragging = true" @end="itemMoveEnd">
+                  <li :class="['compenent-item', item.fixed == true ? 'fixed-item' : '']" :data-type="item.fieldCode" v-for="(item, index) in contractInfo" :key="index" @mousedown="clickItem(item)">
+                    <span>{{ item.fieldName }}</span>
+                  </li>
+                </draggable>
+              </ul>
+              <div class="filed-item-title">紧急联系人</div>
+              <ul>
+                <draggable id="list5" :list="contactInfo" class="compenent" :options="leftOption" :move="onMove" @start="isDragging = true" @end="itemMoveEnd">
+                  <li :class="['compenent-item', item.fixed == true ? 'fixed-item' : '']" :data-type="item.fieldCode" v-for="(item, index) in contactInfo" :key="index" @mousedown="clickItem(item)">
+                    <span>{{ item.fieldName }}</span>
+                  </li>
+                </draggable>
+              </ul>
+              <div class="filed-item-title">个人材料</div>
+              <ul>
+                <draggable id="list5" :list="personalInfo" class="compenent" :options="leftOption" :move="onMove" @start="isDragging = true" @end="itemMoveEnd">
+                  <li :class="['compenent-item', item.fixed == true ? 'fixed-item' : '']" :data-type="item.fieldCode" v-for="(item, index) in personalInfo" :key="index" @mousedown="clickItem(item)">
+                    <span>{{ item.fieldName }}</span>
+                  </li>
+                </draggable>
+              </ul>
+            </el-tab-pane>
+            <el-tab-pane label="自定义字段" name="second">
+              <div class="filed-item-title"><!-- 其他信息 --></div>
+              <ul>
+                <draggable id="list5" :list="defineInfo" class="compenent" :options="leftDefineOption" :move="onChildMove" @start="isDragging = true" @end="itemMoveEnd" @clone="cloneDefine">
+                  <li :class="['compenent-item', item.fixed == true ? 'fixed-item' : '']" :data-type="item.fieldCode" v-for="(item, index) in defineInfo" :key="index" @mousedown="clickItem(item)">
+                    <span v-if="!item.systemFlag && item.fieldType == 0">{{ item.fieldName }}</span>
+                    <span v-if="!item.systemFlag && item.fieldType == 1">{{ item.fieldName }}</span>
+                    <span v-if="!item.systemFlag && item.fieldType == 2">{{ item.fieldName }}</span>
+                    <span v-if="!item.systemFlag && item.fieldType == 3">{{ item.fieldName }}</span>
+                    <span v-if="!item.systemFlag && item.fieldType == 4">{{ item.fieldName }}</span>
+                    <span v-if="!item.systemFlag && item.fieldType == 5">{{ item.fieldName }}</span>
+                    <span v-if="!item.systemFlag && item.fieldType == 6">{{ item.fieldName }}</span>
+                    <span v-if="!item.systemFlag && item.fieldType == 7">{{ item.fieldName }}</span>
+
+                    <i v-if="!item.systemFlag && item.fieldType == 0" class="bg-icon bg-icon-one"></i>
+                    <i v-if="!item.systemFlag && item.fieldType == 1" class="bg-icon bg-icon-two"></i>
+                    <i v-if="!item.systemFlag && item.fieldType == 2" class="bg-icon bg-icon-three"></i>
+                    <i v-if="!item.systemFlag && item.fieldType == 3" class="bg-icon bg-icon-four"></i>
+                    <i v-if="!item.systemFlag && item.fieldType == 4" class="bg-icon bg-icon-five"></i>
+                    <i v-if="!item.systemFlag && item.fieldType == 5" class="bg-icon bg-icon-six"></i>
+                    <i v-if="!item.systemFlag && item.fieldType == 6" class="bg-icon bg-icon-seven"></i>
+                    <i v-if="!item.systemFlag && item.fieldType == 7" class="bg-icon bg-icon-eight"></i>
+                  </li>
+                </draggable>
+              </ul>
+            </el-tab-pane>
+          </el-tabs>
+        </div>
+        <!-- 中间 -->
+        <div class="template-cell template-cell-m">
+          <div class="phone-view">
+            <div class="phone-show-content">
+              <!-- 拖拽展示区域 -->
+              <div class="drag-show-content">
+                <div class="view-container">
+                  <ul class="view-content" id="showPhoneView">
+                    <template v-if="tempaletDataList.length == 0">
+                      <img class="templet-null-img" src="../../../assets/templet_null_img.png" />
+                    </template>
+                    <draggable :options="{ group: { name: 'people', pull: false, put: false }, sort: true }" v-model="tempaletDataList" class="drag-wrap" @add="addItem">
+                      <li :class="['filed-item', currentIndex == index ? 'active-item' : '', 'li-block']" v-for="(item, index) in tempaletDataList" :key="'li1' + index" @click="selectItem(item.fieldCode, index)">
+                        <!-- 删除 -->
+                        <span v-if="item.fieldCode != 'baseInfo'" class="item-close p-item-close" @click.stop="deleteItem(item.fieldCode, index)">
+                          <i class="el-icon-close"></i>
+                        </span>
+
+                        <template>
+                          <div class="block">
+                            <div class="block-head">
+                              <div :class="['opencard-item-title', item.fieldName.length > 6 ? 'block-pre-wrap' : '']">{{ item.fieldName }}</div>
+                            </div>
+                            <ul class="view-content">
+                              <draggable :options="{ group: { name: 'people', pull: false, put: true }, sort: true }" v-model="item.children" :class="['drag-wrap', 'block-wrap', item.fieldCode]" @add="addDragItem">
+                                <li :class="['filed-item', 'child-filed-item', currentChildKey == childItem.fieldCode && currentChildIndex == ind ? 'active-item' : '']" v-for="(childItem, ind) in item.children" :key="'li' + ind" @click.stop="selectChildItem(childItem.fieldCode, index, ind, item.children)">
+                                  <!-- 删除 -->
+                                  <span class="item-close child-item-close" @click.stop="deleteChildItem(childItem.fieldCode, index, ind, item.children, childItem)" v-if="childItem.fieldCode != 'clerkPhone'"
+                                    ><!--手机号禁止删除-->
+                                    <i class="el-icon-close"></i>
+                                  </span>
+                                  <!-- item -->
+                                  <!-- 单择/多选/日期 -->
+                                  <div v-if="childItem.fieldType == 2 || childItem.fieldType == 3 || childItem.fieldType == 4">
+                                    <div :class="['opencard-item-title', childItem.fieldName.length > 6 ? 'title-pre-wrap' : '']">{{ childItem.fieldName }}</div>
+                                    <div class="draged-item-show">
+                                      <span class="show-warm-text show-warm-text-flag select-flag">{{ childItem.fieldDescription }} <i class="el-icon-arrow-right"></i></span>
+                                    </div>
+                                  </div>
+                                  <!-- 日期区间 -->
+                                  <div v-if="childItem.fieldType == 5">
+                                    <div>
+                                      <div :class="['opencard-item-title', childItem.fieldOperations.startName.length > 6 ? 'title-pre-wrap' : '']">{{ childItem.fieldOperations.startName }}</div>
+                                      <div class="draged-item-show">
+                                        <span class="show-warm-text show-warm-text-flag select-flag">{{ childItem.fieldOperations.startDescription }}<i class="el-icon-arrow-right"></i></span>
+                                      </div>
+                                    </div>
+                                    <div class="b-t-1">
+                                      <div :class="['opencard-item-title', childItem.fieldOperations.endName.length > 6 ? 'title-pre-wrap' : '']">{{ childItem.fieldOperations.endName }}</div>
+                                      <div class="draged-item-show">
+                                        <span class="show-warm-text show-warm-text-flag select-flag">{{ childItem.fieldOperations.endDescription }}<i class="el-icon-arrow-right"></i></span>
+                                      </div>
+                                    </div>
+                                  </div>
+                                  <!-- 图片 -->
+                                  <div v-if="childItem.fieldType == 7">
+                                    <div :class="['opencard-item-title', childItem.fieldName.length > 6 ? 'title-pre-wrap' : '']">{{ childItem.fieldName }}</div>
+                                    <div class="draged-item-show">
+                                      <span class="show-warm-text show-warm-text-flag select-flag"><i class="iconfont icon-icon"></i></span>
+                                    </div>
+                                  </div>
+                                  <!-- 单行/多行/数字输入框 -->
+                                  <div v-if="childItem.fieldType == 0 || childItem.fieldType == 1 || childItem.fieldType == 6">
+                                    <div :class="['opencard-item-title', childItem.fieldName.length > 6 ? 'title-pre-wrap' : '']">{{ childItem.fieldName }}</div>
+                                    <div class="draged-item-show">
+                                      <span class="show-warm-text show-warm-text-flag">{{ childItem.fieldDescription }}</span>
+                                    </div>
+                                  </div>
+                                </li>
+                              </draggable>
+                            </ul>
+                          </div>
+                        </template>
+                      </li>
+                    </draggable>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- 右侧 -->
+        <div class="template-cell template-cell-r">
+          <el-tabs v-model="rightName">
+            <el-tab-pane label="控件设置" name="first">
+              <div id="edit-box">
+                <div class="edit-view baby-info-flag baby-info">
+                  <template v-for="(item, index) in tempaletDataList">
+                    <!-- 公共 -->
+                    <template v-if="currentIndex == index && item.parentCode == '0'">
+                      <div class="edit-item " :key="'parent' + index">
+                        <div class="edit-item-title edit-title-padding">标题</div>
+                        <limitInput :inputWidth="340" :limitClass="'limit-color'" :inputValue.sync="item.fieldName" :holder="''" :disflag="true" :getByType="'word'" :maxLength="10"> </limitInput>
+                      </div>
+                    </template>
+
+                    <!-- 组块内部 -->
+                    <template v-if="childIndex == index && !!item.children && !!item.children.length">
+                      <template v-for="(childItem, ind) in item.children">
+                        <!-- 标题 日期区间例外-->
+                        <template v-if="currentChildIndex == ind">
+                          <div class="edit-item test-title limit-w-340" :key="'child' + ind">
+                            <div class="edit-item-title">标题</div>
+                            <limitInput :inputWidth="340" :limitClass="'limit-color'" :inputValue.sync="childItem.fieldName" :holder="''" :disflag="childItem.systemFlag" :getByType="'word'" :maxLength="10"> </limitInput>
+                            <p v-if="childItem.fieldType == 7" style="margin-top: 8px;font-size: 12px;color: rgba(255, 255, 255, 0.7)">
+                              {{ childItem.fieldDescription }}
+                            </p>
+                          </div>
+                        </template>
+
+                        <!-- 提示 -->
+                        <template v-if="currentChildIndex == ind && !(childItem.fieldType == 5 || childItem.fieldType == 7)">
+                          <div class="edit-item test-title limit-w-340" :key="'child1' + ind">
+                            <div class="edit-item-title">提示文字</div>
+                            <limitInput :inputWidth="340" :limitClass="'limit-color'" :inputValue.sync="childItem.fieldDescription" :holder="''" :disflag="false" :getByType="'word'" :maxLength="20"> </limitInput>
+                          </div>
+                        </template>
+
+                        <template v-if="currentChildIndex == ind && childItem.fieldType == 5">
+                          <div class="edit-item test-title limit-w-340" :key="'child2' + ind">
+                            <div class="edit-item-title">开始时间</div>
+                            <limitInput :inputWidth="340" :limitClass="'limit-color'" :inputValue.sync="childItem.fieldOperations.startName" :holder="''" :disflag="childItem.systemFlag" :getByType="'word'" :maxLength="10"> </limitInput>
+                          </div>
+                          <div class="edit-item test-title limit-w-340" :key="'child3' + ind">
+                            <div class="edit-item-title">提示文字</div>
+                            <limitInput :inputWidth="340" :limitClass="'limit-color'" :inputValue.sync="childItem.fieldOperations.startDescription" :holder="''" :disflag="false" :getByType="'word'" :maxLength="20"> </limitInput>
+                          </div>
+                          <div class="edit-item test-title limit-w-340" :key="'child4' + ind">
+                            <div class="edit-item-title">结束时间</div>
+                            <limitInput :inputWidth="340" :limitClass="'limit-color'" :inputValue.sync="childItem.fieldOperations.endName" :holder="''" :disflag="childItem.systemFlag" :getByType="'word'" :maxLength="10"> </limitInput>
+                          </div>
+                          <div class="edit-item test-title limit-w-340" :key="'child5' + ind">
+                            <div class="edit-item-title">提示文字</div>
+                            <limitInput :inputWidth="340" :limitClass="'limit-color'" :inputValue.sync="childItem.fieldOperations.endDescription" :holder="''" :disflag="false" :getByType="'word'" :maxLength="20"> </limitInput>
+                          </div>
+                        </template>
+
+                        <!-- 单位 -->
+                        <template v-if="currentChildIndex == ind && childItem.fieldType == 6">
+                          <div class="edit-item test-title limit-w-340" :key="'child6' + ind">
+                            <div class="edit-item-title">单位</div>
+                            <limitInput :inputWidth="340" :limitClass="'limit-color'" :inputValue.sync="childItem.fieldOperations.unit" :holder="''" :disflag="false" :getByType="'word'" :maxLength="20"> </limitInput>
+                          </div>
+                        </template>
+
+                        <!-- 类型 -->
+                        <template v-if="currentChildIndex == ind && (childItem.fieldType == 4 || childItem.fieldType == 5)">
+                          <div class="edit-item " :key="'child7' + ind">
+                            <div class="edit-item-title">日期类型</div>
+                            <!-- 日期 -->
+                            <template v-for="(types, ind) in childItem.fieldOperations.ruleContent">
+                              <el-radio v-model="childItem.fieldOperations.typeValue" :label="types.key" :key="'child8' + ind" @change="changeRadio($event, ind, childItem)">
+                                {{ types.name }}
+                              </el-radio>
+                            </template>
+                          </div>
+                        </template>
+
+                        <!-- 选项 -->
+                        <template v-if="currentChildIndex == ind && (childItem.fieldType == '2' || childItem.fieldType == '3')">
+                          <div class="edit-item " :key="'child9' + ind">
+                            <div class="edit-item-title">选项 <span v-if="!childItem.systemFlag">最多20项，每项最多10个字</span></div>
+                            <template v-for="(types, ind) in childItem.fieldOperations.fieldContent">
+                              <div class="margin-t-15 limit-w-340" :style="ind == 0 ? 'margin-top: 0' : ''" :key="'child10' + ind">
+                                <limitInput :inputWidth="340" :limitClass="'limit-color'" :inputValue.sync="types.name" :holder="''" :disflag="childItem.systemFlag" :getByType="'word'" :maxLength="10"> </limitInput>
+                                <i class="opt-btn el-icon-remove del-item" v-if="!childItem.systemFlag && childItem.fieldOperations.fieldContent.length > 1" @click="delChildItem(index, ind, childItem)"></i>
+                                <template v-if="!childItem.systemFlag && ind < 19">
+                                  <i class="opt-btn el-icon-circle-plus add-item" v-if="ind == childItem.fieldOperations.fieldContent.length - 1" @click="addChildItem(index, ind, childItem)"></i>
+                                </template>
+                              </div>
+                            </template>
+                          </div>
+                        </template>
+
+                        <!-- 必填 -->
+                        <template v-if="currentChildIndex == ind">
+                          <div class="edit-item" :key="'child11' + ind">
+                            <div class="edit-item-title">验证</div>
+                            <el-checkbox v-model="childItem.isMust">必填</el-checkbox>
+                          </div>
+                        </template>
+
+                        <!-- 公共 -->
+                        <template v-if="currentChildIndex == ind">
+                          <!-- 员工档案中 -->
+                          <div class="edit-item " :key="'parent2' + ind">
+                            <div class="edit-item-title">员工档案中</div>
+                            <div class="staffRecords-limit">
+                              <el-radio class="label-cell" v-model="childItem.staffRecordsIds.staffVisible" label="1">对员工可见</el-radio>
+                              <el-radio class="label-cell" v-model="childItem.staffRecordsIds.staffVisible" label="0">对员工不可见</el-radio>
+                            </div>
+                            <div class="staffRecords-limit">
+                              <el-radio class="label-cell" v-model="childItem.staffRecordsIds.staffModify" label="1">对员工可修改</el-radio>
+                              <el-radio class="label-cell" v-model="childItem.staffRecordsIds.staffModify" label="0">对员工不可修改</el-radio>
+                            </div>
+                          </div>
+                        </template>
+                      </template>
+                    </template>
+                    <!-- 组块内部 -->
+                  </template>
+                </div>
+              </div>
+            </el-tab-pane>
+          </el-tabs>
+        </div>
+      </div>
+    </div>
+
+    <div class="qr-dialog-content" style="opacity: 1;" v-show="dialogVisible">
+      <div class="qr-mask" @click.stop="closeDialog"></div>
+      <div class="qr-dialog">
+        <div class="qr-dialog__hd">
+          <strong class="qr-dialog__title">预览</strong>
+          <i class="el-icon-close" @click.stop="closeDialog"></i>
+        </div>
+        <div class="qr-dialog__bd">
+          <div id="qrcode"></div>
+          <div class="qr-dialog__p">请使用好办 APP 扫一扫预览</div>
+        </div>
+        <div class="qr--dialog__ft"></div>
+      </div>
+    </div>
+    <!-- <vue-gic-footer></vue-gic-footer> -->
+  </div>
+</template>
+<script>
+import draggable from 'vuedraggable';
+import AddInput from '@/components/templateSet/add-input';
+import limitInput from '@/components/limit-input.vue';
+import QRCode from 'qrcodejs2';
+import allInfo from '@/components/contacts/staffInfoTemplate';
+import showMsg from '@/common/js/showmsg';
+import errMsg from '@/common/js/error';
+// import strLength from '@/common/js/strlen';
+// import { _debounce } from '@/common/js/public';
+import { postRequest } from '@/api/api';
+
+export default {
+  name: 'staffRecordsTemplate',
+  data() {
+    return {
+      // tab
+      activeName: 'first',
+      // right tab
+      rightName: 'first',
+      dialogVisible: false,
+      bodyHeight: (document.documentElement.clientHeight || document.body.clientHeight) + 'px',
+      // option
+      isDragging: false,
+      delayedDragging: false,
+      // leftOption
+      leftOption: {
+        group: { name: 'people', pull: 'clone', put: false },
+        sort: false,
+        disabled: false
+      },
+      leftDefineOption: {
+        group: { name: 'people', pull: 'clone', put: false },
+        sort: false,
+        disabled: false
+      },
+      // rightOption
+      selectKey: '',
+      // 基本信息
+      baseInfo: [],
+      // 工作信息
+      jobInfo: [],
+      // 个人信息
+      selfInfo: [],
+      // 学历信息
+      eduInfo: [],
+      // 合同信息
+      contractInfo: [],
+      // 紧急联系人
+      contactInfo: [],
+      // 个人材料
+      personalInfo: [],
+      // 自定义
+      defineInfo: allInfo.defineInfo(),
+      // 中间数据集合
+      currentIndex: 0, //当前选择的 item
+      // children
+      currentChildKey: null,
+      currentChildIndex: null,
+      childIndex: 0,
+
+      tempaletDataList: [
+        {
+          parentCode: '0',
+          fieldTemplateId: '',
+          parentFieldTemplateId: '0',
+          minCount: 10,
+          maxCount: 20,
+          fieldCode: 'baseInfo',
+          fieldName: '基本信息',
+          fieldEdited: false, // 修改（0：不可修改，1：可修改）
+          fieldOperations: {
+            ruleContent: [], // 单选 日期有
+            fieldContent: [] // 选项
+          },
+          isMust: false,
+          fieldDescription: '',
+          children: [],
+          fieldType: '',
+          staffRecordsIds: {},
+          status: ''
+        },
+        {
+          parentCode: '0',
+          fieldTemplateId: '',
+          parentFieldTemplateId: '0',
+          minCount: 10,
+          maxCount: 20,
+          fieldCode: 'jobInfo',
+          fieldName: '工作信息',
+          fieldEdited: false, // 修改（0：不可修改，1：可修改）
+          isMust: false,
+          fieldDescription: '',
+          children: [],
+          fieldType: '',
+          staffRecordsIds: {},
+          status: ''
+        },
+        {
+          parentCode: '0',
+          fieldTemplateId: '',
+          parentFieldTemplateId: '0',
+          minCount: 10,
+          maxCount: 20,
+          fieldCode: 'selfInfo',
+          fieldName: '个人信息',
+          fieldEdited: false, // 修改（0：不可修改，1：可修改）
+          isMust: false,
+          fieldDescription: '',
+          children: [],
+          fieldType: '',
+          staffRecordsIds: {},
+          status: ''
+        },
+        {
+          parentCode: '0',
+          fieldTemplateId: '',
+          parentFieldTemplateId: '0',
+          minCount: 10,
+          maxCount: 20,
+          fieldCode: 'eduInfo',
+          fieldName: '学历信息',
+          fieldEdited: false, // 修改（0：不可修改，1：可修改）
+          isMust: false,
+          fieldDescription: '',
+          children: [],
+          fieldType: '',
+          staffRecordsIds: {},
+          status: ''
+        },
+        {
+          parentCode: '0',
+          fieldTemplateId: '',
+          parentFieldTemplateId: '0',
+          minCount: 10,
+          maxCount: 20,
+          fieldCode: 'contractInfo',
+          fieldName: '合同信息',
+          fieldEdited: false, // 修改（0：不可修改，1：可修改）
+          isMust: false,
+          fieldDescription: '',
+          children: [],
+          fieldType: '',
+          staffRecordsIds: {},
+          status: ''
+        },
+        {
+          parentCode: '0',
+          fieldTemplateId: '',
+          parentFieldTemplateId: '0',
+          minCount: 10,
+          maxCount: 20,
+          fieldCode: 'contactInfo',
+          fieldName: '紧急联系人',
+          fieldEdited: false, // 修改（0：不可修改，1：可修改）
+          isMust: false,
+          fieldDescription: '',
+          children: [],
+          fieldType: '',
+          staffRecordsIds: {},
+          status: ''
+        },
+        {
+          parentCode: '0',
+          fieldTemplateId: '',
+          parentFieldTemplateId: '0',
+          minCount: 10,
+          maxCount: 20,
+          fieldCode: 'personalInfo',
+          fieldName: '个人资料',
+          fieldEdited: false, // 修改（0：不可修改，1：可修改）
+          isMust: false,
+          fieldDescription: '',
+          children: [],
+          fieldType: '',
+          staffRecordsIds: {},
+          status: ''
+        }
+      ],
+      // 添加父级集合
+      fieldParent: {
+        baseInfo: {},
+        jobInfo: {},
+        selfInfo: {},
+        eduInfo: {},
+        contractInfo: {},
+        contactInfo: {},
+        personalInfo: {}
+      },
+      // 已经选择的字段集合
+      setList: [],
+      // 二维码
+      qrcodeCase: '', // 二维码实例
+      qrcodeNum: ''
+    };
+  },
+  created() {
+    // this.selectReplayStyle()
+  },
+  methods: {
+    /**
+     * baseInfoClone
+     */
+    baseInfoClone() {
+      // const that = this;
+      // that.baseInfo = JSON.parse(JSON.stringify(that.baseInfo))
+    },
+
+    /**
+     * 点击左侧字段 item
+     */
+    clickItem(item) {
+      const that = this;
+      // item.fixed = !item.fixed
+      // 判断 中间数据中是否存在父级
+      let fieldArr = that.tempaletDataList.map(item => item.fieldCode);
+      if (!fieldArr.includes(item.parentCode) && item.parentCode !== 'defineInfo') {
+        that.tempaletDataList.push(that.fieldParent[item.parentCode]);
+        that.tempaletDataList = JSON.parse(JSON.stringify(that.tempaletDataList));
+      }
+    },
+
+    /**
+     * move 检查对应所在组
+     */
+    checkMove(evt) {
+      let flag = true;
+      if (evt.draggedContext.element.parentCode == 'baseInfo' && !evt.to.className.includes('baseInfo')) {
+        flag = false;
+      }
+      if (evt.draggedContext.element.parentCode == 'jobInfo' && !evt.to.className.includes('jobInfo')) {
+        flag = false;
+      }
+      if (evt.draggedContext.element.parentCode == 'selfInfo' && !evt.to.className.includes('selfInfo')) {
+        flag = false;
+      }
+      if (evt.draggedContext.element.parentCode == 'eduInfo' && !evt.to.className.includes('eduInfo')) {
+        flag = false;
+      }
+      if (evt.draggedContext.element.parentCode == 'contractInfo' && !evt.to.className.includes('contractInfo')) {
+        flag = false;
+      }
+      if (evt.draggedContext.element.parentCode == 'contactInfo' && !evt.to.className.includes('contactInfo')) {
+        flag = false;
+      }
+      if (evt.draggedContext.element.parentCode == 'personalInfo' && !evt.to.className.includes('personalInfo')) {
+        flag = false;
+      }
+      return flag;
+    },
+
+    /**
+     *  move{relatedContext, draggedContext}
+     */
+    onMove(evt) {
+      const that = this;
+      // 判断中间是否存在父级
+      if (!that.checkMove(evt)) {
+        return false;
+      }
+      // const relatedElement = evt.relatedContext.element;
+      const draggedElement = evt.draggedContext.element;
+      //console.log(draggedElement.fixed)(!relatedElement || !relatedElement.fixed) &&
+      return !draggedElement.fixed;
+    },
+
+    /**
+     *  move child
+     */
+    onChildMove(evt) {
+      let tag = true;
+      if (evt.dragged.className.indexOf('block-class') != -1) {
+        if (evt.to.className.indexOf('block-wrap') != -1) {
+          // tag = false
+        }
+      }
+      return tag;
+    },
+
+    /**
+     *  move end
+     */
+    itemMoveEnd(evt) {
+      const that = this;
+      that.isDragging = false;
+      that.selectKey = '';
+      that.selectKey = evt.clone.dataset.type;
+      // 判断中间是否已经添加
+      that.tempaletDataList.forEach(function(ele, index) {
+        ele.children.forEach(function(child, key) {
+          if (!!child.systemFlag && child.fieldCode == that.selectKey) {
+            setKey(child.parentCode);
+          }
+        });
+      });
+      /* eslint-disable */
+      function setKey(parentCode) {
+        /* eslint-disable */
+        that[parentCode].forEach(function(ele, index) {
+          /* eslint-disable */
+          if (ele.fieldCode == that.selectKey) {
+            ele.fixed = true;
+          }
+        });
+      }
+      that.selectKey = '';
+      that.tempaletDataList = JSON.parse(JSON.stringify(that.tempaletDataList));
+      that.$forceUpdate();
+    },
+
+    cloneDefine(evt) {
+
+    },
+
+    // 中间部分方法
+
+    /**
+     *  选择 item 即父级 item
+     */
+    selectItem(key, index) {
+      const that = this;
+      that.currentIndex = index; // 父级：当前选中的索引
+      that.currentChildIndex = null; // 子级未有选中
+    },
+
+    /**
+     *   删除 item 即父级 item
+     */
+    deleteItem(key, index) {
+      const that = this;
+      that.tempaletDataList.splice(index, 1);
+      that.currentIndex--;
+      if (that.currentIndex <= 0) {
+        that.currentIndex = 0;
+      }
+      // 删除后重新设置 fixed 值
+      that[key].forEach(function(ele, index) {
+        ele.fixed = false;
+      });
+    },
+
+    /**
+     *  添加 item
+     */
+    /* eslint-disable */
+    addItem() {
+
+    },
+
+    /**
+     *  添加 child
+     */
+    addDragItem(evt) {
+      return false;
+    },
+
+    /**
+     *  选择 item 即子级 item
+     */
+    selectChildItem(key, index, ind, list) {
+      const that = this;
+      that.currentIndex = null;
+      that.currentChildKey = key;
+      that.childIndex = index;
+      that.currentChildIndex = ind;
+    },
+
+    /**
+     *  删除 item 即子级 item
+     */
+    deleteChildItem(key, index, ind, list, childItem) {
+      const that = this;
+      that.childIndex = index;
+      that.currentIndex = null;
+      that.currentChildKey = that.tempaletDataList[index].children[ind].fieldCode;
+      that.currentChildIndex--;
+      if (that.currentChildIndex <= 0) {
+        that.currentChildIndex = 0;
+      }
+      // list.splice(ind,1)
+      that.tempaletDataList = JSON.parse(JSON.stringify(that.tempaletDataList));
+      that.tempaletDataList[index].children.splice(ind, 1);
+
+      // 重新设置左侧的 fixed
+      that[childItem.parentCode].forEach(function(ele, index) {
+        if (ele.fieldCode === key) {
+          ele.fixed = false;
+        }
+      });
+    },
+
+    /**
+     *  右侧方法
+     */
+    /* eslint-disable */
+    checkedChange(e, item) {
+      // const that = this;
+    },
+
+    /**
+     *  添加删除选项
+     */
+    delChildItem(index, ind, item) {
+      item.fieldOperations.fieldContent.splice(ind, 1);
+    },
+    addChildItem(index, ind, item) {
+      const that = this;
+      // 多选
+      if (ind == 19) {
+        that.$message.error({
+          duration: 1000,
+          message: '最多可添加 20 项'
+        });
+        return;
+      } else {
+        let type = 'radio';
+        if (!item.systemFlag && parseInt(item.fieldType) === 3) {
+          type = 'checkbox';
+        }
+        item.fieldOperations.fieldContent.push({ type: type, name: '请输入选项' });
+        // 判断重复字段
+        let arrValues = item.fieldOperations.fieldContent.map(ite => ite.name); // 返回对象中键值集合的数组
+        if (that.isRepeat(arrValues)) {
+          item.fieldOperations.fieldContent.splice(item.fieldOperations.fieldContent.length - 1, 1);
+          arrValues.splice(item.fieldOperations.fieldContent.length - 1, 1);
+          that.$message.error({
+            duration: 1000,
+            message: '选项不能重复'
+          });
+        }
+      }
+    },
+
+    /**
+     *  自定义单选(日期)
+     */
+    /* eslint-disable */
+    changeRadio(e, ind, item) {
+      // const that = this;
+    },
+
+    /**
+     *  判断添加重复字段
+     */
+    isRepeat(arr) {
+      let hash = {};
+      for (let i in arr) {
+        if (hash[arr[i]]) {
+          return true;
+        }
+        hash[arr[i]] = true;
+      }
+      return false;
+    },
+
+    /**
+     *  路由跳转
+     */
+    changeRoute(route) {
+      this.$router.push(route);
+    },
+
+    /**
+     *  检查
+     */
+    checkTag(data) {
+      const that = this;
+      let tag = {};
+      tag.filedFlag = true;
+      tag.filedRepeat = false;
+      let filedArr = [];
+      data.forEach(function(ele, index) {
+        if (ele.fieldName == '') {
+          tag.filedFlag = false;
+          tag.name = ele.fieldName || '';
+          return false;
+        }
+        // 判断子级
+        if (!!ele.children.length) {
+          ele.children.forEach(function(el, index) {
+            if (!!el.systemFlag && el.fieldName == '') {
+              tag.filedFlag = false;
+              tag.name = el.fieldName || '';
+              return false;
+            }
+            filedArr.push(el.fieldName);
+          });
+        }
+      });
+      // 判断重复 fieldName
+      if (that.isRepeat(filedArr)) {
+        tag.filedRepeat = true;
+      }
+      return tag;
+    },
+
+    /**
+     *  获取 uuid
+     */
+    getUuid() {
+      return 'xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+        let r = (Math.random() * 16) | 0;
+        let v = c == 'x' ? r : (r & 0x3) | 0x8;
+        return v.toString(16);
+      });
+    },
+
+    /**
+     *  保存
+     */
+    saveAndBack(opt) {
+      const that = this;
+      let data = JSON.parse(JSON.stringify(that.tempaletDataList));
+      let tagObj = that.checkTag(data);
+      let allLengthData = [];
+      // 检查空字段
+      if (!tagObj.filedFlag) {
+        that.$message.error({
+          duration: 1000,
+          message: tagObj.name + '字段标题不能为空'
+        });
+        return;
+      }
+      if (tagObj.filedRepeat) {
+        that.$message.error({
+          duration: 1000,
+          message: '字段标题不能重复'
+        });
+        return;
+      }
+      data.forEach(function(ele, index) {
+        ele.sort = index;
+        ele.fixed = ele.fixed === true ? 1 : 0;
+        ele.isMust = ele.isMust === true ? 1 : 0;
+        ele.systemFlag = ele.systemFlag === true ? 1 : 0;
+        ele.parentFieldTemplateId = ele.parentFieldTemplateId ? ele.parentFieldTemplateId : -1;
+        ele.fieldTemplateId = ele.fieldTemplateId ? ele.fieldTemplateId : -1;
+        ele.children.forEach(function(el, ind) {
+          allLengthData.push(el);
+          el.sort = ind;
+          el.fixed = el.fixed === true ? 1 : 0;
+          el.isMust = el.isMust === true ? 1 : 0;
+          el.systemFlag = el.systemFlag === true ? 1 : 0;
+          if (!ele.systemFlag) {
+            el.fieldEdited = 1;
+          }
+          // 选项 key
+          if (parseInt(el.fieldType) === 2 || parseInt(el.fieldType) === 3) {
+            el.fieldOperations.fieldContent.forEach(function(child, key) {
+              child.key = !!String(child.key) ? String(child.key) : '';
+              if (!el.systemFlag && (!child.hasOwnProperty('key') || child.key == '' || child.key == 'undefined')) {
+                child.key = child.name;
+              }
+            });
+          }
+          // 设置自定义
+          if (!el.systemFlag) {
+            el.parentCode = ele.fieldCode;
+          }
+          // 设置 uuid
+          el.fieldTemplateId = el.fieldTemplateId ? el.fieldTemplateId : -1;
+          el.parentFieldTemplateId = ele.fieldTemplateId;
+          // data.push(el)
+        });
+      });
+
+      // data.forEach(function(ele,index){
+      //   if (ele.hasOwnProperty('children')) {
+      //     delete ele.children;
+      //   }
+      // })
+      if (allLengthData.length >40) {
+        that.$message.error({
+          duration: 1000,
+          message: '最多设置 40 个字段'
+        });
+        return false;
+      }
+      // console.log(JSON.stringify(data))
+      if (opt === 'save') {
+        that.saveAllData(data);
+      } else {
+        that.postPreview(data);
+      }
+    },
+
+    /**
+     *  保存---api
+     */
+    saveAllData(data) {
+      const that = this;
+      let para = {
+        templateContent: JSON.stringify(data)
+      };
+      postRequest('/haoban-manage-web/record/record-template-save.json', para)
+        .then(res => {
+          let resData = res.data;
+          if (resData.errorCode == 1) {
+            showMsg.showmsg('保存成功', 'success');
+            that.changeRoute('/fileSet');
+            return;
+          }
+          errMsg.errorMsg(resData);
+        })
+        .catch(function(error) {
+          that.$message.error({
+            duration: 1000,
+            message: error.message
+          });
+        });
+    },
+
+    /**
+     *  预览---api
+     */
+    postPreview(data) {
+      const that = this;
+      let para = {
+        templateContent: JSON.stringify(data)
+      };
+      postRequest('/haoban-manage-web/record/record-template-preview.json', para)
+        .then(res => {
+          let resData = res.data;
+          if (resData.errorCode == 1) {
+            // 生成二维码需要的 url
+            let webUrl = `${window.location.origin}/office-mobile/#/staffRecordsTemplate?enterpriseId=${resData.result}`;
+            that.qrcode(webUrl);
+            that.dialogVisible = true;
+            return;
+          }
+          errMsg.errorMsg(resData);
+        })
+        .catch(function(error) {
+          that.$message.error({
+            duration: 1000,
+            message: error.message
+          });
+        });
+    },
+
+    /**
+     *  生成二维码
+     */
+    qrcode(text) {
+      const that = this;
+      if (!!that.qrcodeCase) {
+        document.getElementById('qrcode').innerHTML = '';
+        that.qrcodeCase.clear(); // 先清除原有的
+      }
+      let qrObj = {
+        type: 'record',
+        data: text
+      };
+      that.qrcodeCase = new QRCode('qrcode', {
+        width: 210,
+        height: 210, // 高度
+        text: JSON.stringify(qrObj) // 二维码内容 //
+        //render: 'canvas', // 设置渲染方式（有两种方式 table和canvas，默认是canvas） //
+        //background: '#f0f',
+        //foreground: '#ff0'
+      });
+    },
+
+    /**
+     *  关闭预览窗口
+     */
+    closeDialog() {
+      const that = this;
+      that.dialogVisible = false;
+    },
+
+    /**
+     *  获取所有字段
+     */
+    getAllFields() {
+      const that = this;
+      postRequest('/haoban-manage-web/record/employee-find-system-template.json', {})
+        .then(res => {
+          let resData = res.data;
+          if (resData.errorCode == 1) {
+            that.handleAllFields(resData.result);
+            return;
+          }
+          errMsg.errorMsg(resData);
+        })
+        .catch(function(error) {
+          that.$message.error({
+            duration: 1000,
+            message: error.message
+          });
+        });
+    },
+
+    /**
+     *  处理所有系统模板信息
+     */
+    handleAllFields(result) {
+      const that = this;
+      result.forEach(function(ele, index) {
+        if (!!that.hasOwnProperty(ele.parentCode)) {
+          ele.fixed = parseInt(ele.fixed) === 1 ? true : false;
+          ele.isMust = parseInt(ele.isMust) === 1 ? true : false;
+          ele.systemFlag = true;
+          ele.fieldOperations = !!ele.fieldOperations ? JSON.parse(ele.fieldOperations) : {};
+          ele.staffRecordsIds = !!ele.staffRecordsIds ? JSON.parse(ele.staffRecordsIds) : [];
+          that[ele.parentCode].push(ele);
+        }
+        // 设置 fieldParent
+        if (!!that.fieldParent.hasOwnProperty(ele.fieldCode)) {
+          ele.children = [];
+          that.fieldParent[ele.fieldCode] = ele;
+          ele.systemFlag = true;
+        }
+      });
+    },
+
+    /**
+     *  获取已经保存模板信息---api
+     */
+    getInfo() {
+      const that = this;
+      postRequest('/haoban-manage-web/record/employee-find-template.json', {})
+        .then(res => {
+          let resData = res.data;
+          if (resData.errorCode == 1) {
+            that.setList = [];
+            if (!!resData.result && !!resData.result.length) {
+              that.handleGetInfo(resData.result);
+            }
+            return;
+          }
+          errMsg.errorMsg(resData);
+        })
+        .catch(function(error) {
+          that.$message.error({
+            duration: 1000,
+            message: error.message
+          });
+        });
+    },
+
+    /**
+     * 简单数组-->父子数组对象
+     */
+    treeData(data) {
+      let tree = data.filter(father => {
+        //循环所有项
+        let branchArr = data.filter(child => {
+          return father.fieldCode == child.parentCode; //返回每一项的子级数组
+        });
+        if (branchArr.length > 0) {
+          father.children = branchArr; //如果存在子级，则给父级添加一个children属性，并赋值
+        }
+        return father.parentCode == 0; //返回第一层
+      });
+      // 排序
+      tree.sort(function(a, b) {
+        return a.sort - b.sort;
+      });
+
+      tree.forEach(function(ele, index) {
+        ele.children.sort(function(a, b) {
+          return a.sort - b.sort;
+        });
+      });
+      return tree;
+    },
+
+    /**
+     * 处理已存配置信息
+     */
+    handleGetInfo(result) {
+      const that = this;
+      let data = JSON.parse(JSON.stringify(result));
+      that.setParent = [];
+      data.forEach(function(ele, index) {
+        ele.fixed = Number.parseInt(ele.fixed) === 1 ? true : false;
+        ele.isMust = Number.parseInt(ele.isMust) === 1 ? true : false;
+        ele.systemFlag = Number.parseInt(ele.systemFlag) === 1 ? true : false;
+        ele.fieldOperations = !!ele.fieldOperations ? JSON.parse(ele.fieldOperations) : {};
+        ele.staffRecordsIds = !!ele.staffRecordsIds ? JSON.parse(ele.staffRecordsIds) : [];
+        // 设置禁止拖拽
+        if (!!ele.systemFlag && ele.parentCode == 0) {
+          that.setParent.push(ele.fieldCode);
+        }
+        if (!!ele.systemFlag && ele.parentCode != 0) {
+          that.setList.push(ele.fieldCode);
+        }
+      });
+      // console.log(JSON.stringify(that.treeData(data)))
+      that.tempaletDataList = that.treeData(data);
+      setTimeout(function() {
+        that.setFixed();
+      }, 100);
+    },
+
+    /**
+     * 设置禁止拖拽
+     */
+    setFixed() {
+      const that = this;
+      // console.log("that.setParent:",that.setParent,that.setList)
+      that.setParent.forEach(function(ele, index) {
+        that[ele].forEach(function(obj, key) {
+          if (that.setList.includes(obj.fieldCode)) {
+            obj.fixed = true;
+          }
+        });
+      });
+    }
+  },
+  watch: {
+    isDragging(newValue) {
+      const that = this;
+      if (newValue) {
+        that.delayedDragging = true;
+        return;
+      }
+      that.$nextTick(() => {
+        that.delayedDragging = false;
+      });
+    }
+  },
+  components: {
+    draggable,
+    AddInput,
+    limitInput
+  },
+  mounted() {
+    const that = this;
+    // 获取已经配置的数据
+    // that.getInfo()
+    Promise.all([that.getAllFields(), that.getInfo()]);
+    document.body.ondrop = function(event) {
+      event.preventDefault();
+      event.stopPropagation();
+    };
+  }
+};
+</script>
+<style lang="less" scoped>
+.template-wrap {
+  width: 100%;
+  /*height: 100%;*/
+  min-height: 860px;
+  padding: 0;
+  margin: 0;
+  background: url('../../../assets/template-bg.jpg') no-repeat center center;
+  background-size: 100% 100%;
+
+  .b-t-1 {
+    border-top: 1px solid #e4e7ed;
+  }
+
+  .template-contain {
+    width: 1200px;
+    margin: 0 auto;
+  }
+
+  .qr-mask {
+    position: fixed;
+    z-index: 1000;
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.6);
+    cursor: pointer;
+  }
+
+  .qr-dialog {
+    position: fixed;
+    z-index: 5000;
+    width: 80%;
+    max-width: 300px;
+    top: 50%;
+    left: 50%;
+    -webkit-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
+    background-color: #fff;
+    text-align: center;
+    border-radius: 3px;
+    overflow: hidden;
+
+    .qr-dialog__hd {
+      position: relative;
+      .qr-dialog__title {
+        display: block;
+        padding: 32px 0;
+        font-size: 18px;
+        color: #303133;
+      }
+
+      i {
+        position: absolute;
+        top: 0;
+        right: 0;
+        display: block;
+        width: 46px;
+        height: 46px;
+        line-height: 46px;
+        text-align: center;
+        font-size: 10px;
+        color: #9b9da3;
+        cursor: pointer;
+      }
+    }
+
+    .qr-dialog__bd {
+      padding: 0 1.6em 0.8em;
+      min-height: 40px;
+      font-size: 15px;
+      line-height: 1.3;
+      word-wrap: break-word;
+      word-break: break-all;
+      color: #808080;
+
+      #qrcode {
+        display: -webkit-flex;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+
+      .qr-dialog__p {
+        padding: 20px 0;
+        font-size: 14px;
+        color: #606266;
+      }
+    }
+
+    .qr-dialog__ft {
+    }
+  }
+
+  .template-head {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: flex;
+    justify-content: space-between;
+    height: 80px;
+    align-items: center;
+
+    .flex-1 {
+      -webkit-flex: 1;
+      -moz-flex: 1;
+      -ms-flex: 1;
+      -o-flex: 1;
+      flex: 1;
+      display: -webkit-box;
+      display: -webkit-flex;
+      display: flex;
+      align-items: center;
+    }
+
+    .flex-r {
+      justify-content: flex-end;
+    }
+
+    .template-title-span {
+      color: #fff;
+      font-size: 30px;
+      padding-left: 18px;
+    }
+
+    .el-button--default.is-plain {
+      background: rgba(255, 255, 255, 0);
+      color: #fff;
+      &:hover {
+        color: #fff;
+        background: #1890ff;
+      }
+    }
+    .el-button--primary.is-plain {
+      background: transparent;
+      border-color: #1890ff;
+      &:hover {
+        background: #1890ff;
+      }
+    }
+  }
+
+  .template-body {
+    width: 100%;
+    position: relative;
+    overflow: hidden;
+
+    .template-cell {
+    }
+
+    .el-tab-pane {
+      height: 660px;
+      overflow-y: scroll;
+    }
+
+    /* 左侧 */
+    .template-cell-l {
+      width: 350px;
+      float: left;
+      height: 740px;
+      padding-top: 40px;
+
+      .el-tabs {
+        /deep/ .el-tabs__item {
+          width: 50%;
+          width: 175px;
+          /*padding: 0;*/
+          color: rgba(255, 255, 255, 0.5);
+          &.is-active {
+            color: #1890ff;
+          }
+        }
+      }
+
+      .compenent-item {
+        position: relative;
+        width: 148px;
+        height: 42px;
+        margin: 0 15px 15px 0;
+        line-height: 40px;
+        padding: 0 10px;
+        display: inline-block;
+        text-align: center;
+        cursor: move;
+        color: #fff;
+        padding: 0;
+        overflow: hidden;
+        font-size: 12px;
+        border: 1px dashed rgba(255, 255, 255, 0.6);
+        background: rgba(255, 255, 255, 0.1);
+        &.fixed-item {
+          opacity: 0.5;
+          cursor: not-allowed;
+        }
+      }
+
+      #list5 {
+        .compenent-item {
+          text-align: left;
+          padding: 0 16px;
+          -webkit-box-sizing: border-box;
+          -moz-box-sizing: border-box;
+          box-sizing: border-box;
+          overflow: hidden;
+          span,
+          .bg-icon {
+            display: inline-block;
+            vertical-align: middle;
+          }
+          .bg-icon {
+            position: absolute;
+            top: 50%;
+            right: 16px;
+            -webkit-transform: translate(0, -50%);
+            -ms-transform: translate(0, -50%);
+            -o-transform: translate(0, -50%);
+            transform: translate(0, -50%);
+            width: 17px;
+            height: 17px;
+            background: url('../../../assets/icon-template.png') no-repeat center center;
+            background-size: 35px;
+            &.bg-icon-one {
+              background-position: 0 -16px;
+            }
+            &.bg-icon-two {
+              background-position: 0 0;
+            }
+            &.bg-icon-three {
+              background-position: 0 -50px;
+            }
+            &.bg-icon-four {
+              background-position: 0 -180px;
+            }
+            &.bg-icon-five {
+              background-position: 0 -66.5px;
+            }
+            &.bg-icon-six {
+              background-position: 0 -83px;
+            }
+            &.bg-icon-seven {
+              background-position: 0 -33px;
+            }
+            &.bg-icon-eight {
+              background-position: 0 -98px;
+            }
+          }
+          &:hover {
+            color: #1890ff;
+            border-color: #1890ff;
+            .bg-icon {
+              &.bg-icon-one {
+                background-position: -18px -16px;
+              }
+              &.bg-icon-two {
+                background-position: -18px 0;
+              }
+              &.bg-icon-three {
+                background-position: -18px -50px;
+              }
+              &.bg-icon-four {
+                background-position: -18px -180px;
+              }
+              &.bg-icon-five {
+                background-position: -18px -66px;
+              }
+              &.bg-icon-six {
+                background-position: -18px -83px;
+              }
+              &.bg-icon-seven {
+                background-position: -18px -33px;
+              }
+              &.bg-icon-eight {
+                background-position: -18px -98px;
+              }
+            }
+          }
+        }
+      }
+      .filed-item-title {
+        padding: 15px 0;
+        font-size: 14px;
+        color: #ffffff;
+      }
+    }
+    /* 中间 */
+    /* 模板 */
+    .template-cell-m {
+      float: left;
+      width: 410px;
+      height: 740px;
+      margin: 0 20px;
+      position: relative;
+
+      .view-content {
+        position: relative;
+      }
+
+      .templet-null-img {
+        width: 249px;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        -webkit-transform: translate(-50%, -50%);
+        -ms-transform: translate(-50%, -50%);
+        -o-transform: translate(-50%, -50%);
+        transform: translate(-50%, -50%);
+      }
+    }
+
+    .drag-wrap {
+      min-height: 530px;
+      overflow-x: hidden;
+      overflow-y: auto;
+    }
+    .phone-container {
+      margin-top: 40px;
+    }
+    .phone-view {
+      background: url(../../../assets/iphone.png) no-repeat;
+      background-size: 100%;
+      width: 410px;
+      height: 740px;
+      /*margin: 0 20px;*/
+      position: relative;
+    }
+
+    .phone-show-content {
+      width: 330px;
+      height: 537px;
+      position: absolute;
+      left: 41px;
+      top: 83px;
+      overflow-y: auto;
+    }
+
+    .opend-card-item {
+      height: 46px;
+      line-height: 46px;
+      background: #fff;
+      border-bottom: 1px solid #e7e7eb;
+      font-size: 14px;
+      position: relative;
+
+      &.sex::after {
+        content: '';
+        width: 100%;
+        height: 100%;
+        z-index: 2;
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+      }
+    }
+
+    .opend-card-group-title {
+      height: 40px;
+      line-height: 40px;
+      padding-left: 10px;
+    }
+
+    .opend-card-item {
+      height: 46px;
+      line-height: 46px;
+      background: #fff;
+      border-bottom: 1px solid #e7e7eb;
+    }
+
+    .phone-list-item {
+      height: 44px;
+      line-height: 44px;
+      background: #fff;
+      margin-bottom: 5px;
+    }
+
+    .item-title {
+      width: 100px;
+      float: left;
+      padding-left: 10px;
+    }
+
+    .filed-item {
+      background: #fff;
+      height: 46px;
+      width: 100%;
+      height: auto;
+      background: #fff;
+      position: relative;
+      cursor: move;
+      padding: 0px;
+      margin: 0;
+      font-size: 12px;
+      color: #292929;
+
+      -webkit-box-sizing: border-box;
+      -moz-box-sizing: border-box;
+      box-sizing: border-box;
+      &.active-item {
+        border: 1px solid #1890ff;
+      }
+
+      & + .filed-item {
+        margin-top: 5px;
+
+        &.li-block {
+          margin-top: 15px;
+        }
+      }
+      /*删除*/
+      .item-close {
+        position: absolute;
+        top: 0;
+        right: 0;
+        width: 18px;
+        height: 18px;
+        line-height: 18px;
+        text-align: center;
+        background: #1890ff;
+        color: #fff;
+        font-size: 14px;
+        font-weight: 700;
+        cursor: pointer;
+        display: none;
+        z-index: 2;
+      }
+      &:hover {
+        border: 1px dashed #1890ff;
+        .p-item-close {
+          display: block;
+        }
+      }
+
+      &.child-filed-item {
+        &:hover {
+          .child-item-close {
+            display: block;
+          }
+        }
+      }
+    }
+    /* 组块 */
+    .block {
+      min-height: 308px;
+      background: #f0eff4;
+
+      .block-head {
+        width: 100%;
+        background: #f5f5f8;
+        padding: 0;
+        height: 35px;
+
+        .opencard-item-title {
+          height: 35px;
+          line-height: 35px;
+          /* &.block-pre-wrap{
+            line-height: 12px;
+            word-break: break-all;
+            white-space: pre-wrap;
+            padding-top: 7px;
+            -webkit-box-sizing: border-box;
+            -moz-box-sizing: border-box;
+            box-sizing: border-box;
+          }*/
+        }
+      }
+      .drag-wrap {
+        min-height: 250px;
+      }
+    }
+
+    .opencard-drag {
+      background: #fff;
+      height: 46px;
+    }
+
+    .opencard-item-title {
+      width: 90px;
+      height: 46px;
+      line-height: 46px;
+      text-align: left;
+      float: left;
+      padding-left: 10px;
+      overflow: hidden;
+      white-space: nowrap;
+      -webkit-box-sizing: border-box;
+      -moz-box-sizing: border-box;
+      box-sizing: border-box;
+      font-size: 14px;
+      &.title-pre-wrap {
+        line-height: 15px;
+        word-break: break-all;
+        white-space: pre-wrap;
+        padding-top: 9px;
+      }
+      /*&.block-pre-wrap{
+        line-height: 12px;
+        word-break: break-all;
+        white-space: pre-wrap;
+        padding-top: 9px;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        box-sizing: border-box;
+      }*/
+    }
+
+    .show-warm-text {
+      color: #c0c4cc;
+      width: 185px;
+      text-align: left;
+      display: inline-block;
+      white-space: nowrap;
+      height: 46px;
+      line-height: 46px;
+      font-size: 14px;
+
+      .el-icon-arrow-right {
+        font-size: 20px;
+        vertical-align: middle;
+      }
+
+      .iconfont.icon-icon {
+        font-size: 20px;
+        color: #808995;
+      }
+
+      &.select-flag {
+        width: 225px;
+        text-align: right;
+      }
+    }
+
+    .limit-w-340 {
+      /deep/ .el-input__inner {
+        font-size: 12px;
+        color: #fff;
+        background-color: rgba(255, 255, 255, 0.1);
+      }
+
+      .tip {
+        color: rgba(255, 255, 255, 0.7);
+      }
+    }
+
+    /* 右侧 */
+    .template-cell-r {
+      width: 400px;
+      float: left;
+      overflow: hidden;
+      padding-top: 40px;
+
+      .input-line-cell {
+        .tip {
+          color: rgba(255, 255, 255, 0.7);
+        }
+      }
+
+      .limit-w-340 {
+        /deep/ .el-input__inner {
+          font-size: 12px;
+          color: #fff;
+          background-color: rgba(255, 255, 255, 0.1);
+        }
+
+        .tip {
+          color: rgba(255, 255, 255, 0.7);
+        }
+      }
+
+      .el-tabs {
+        /deep/.el-tabs__item {
+          width: 175px;
+          /* padding: 0; */
+          /*color: rgba(255, 255, 255, 0.5);*/
+        }
+
+        /deep/.el-tabs__nav-wrap::after {
+          content: none;
+        }
+      }
+
+      .label-txt {
+        margin: 0 10px;
+        font-size: 14px;
+        color: #fff;
+      }
+
+      .margin-t-15 {
+        margin-top: 15px;
+      }
+
+      .margin-t-30 {
+        margin-top: 30px;
+      }
+
+      .margin-l-15 {
+        margin-left: 15px;
+      }
+
+      .margin-b-15 {
+        margin-bottom: 15px;
+      }
+
+      .w-60 {
+        width: 60px;
+      }
+
+      .w-120 {
+        width: 120px;
+      }
+
+      .w-316 {
+        width: 316px;
+      }
+
+      .limit-w-340 {
+        /deep/ .el-input__inner {
+          color: #fff;
+          background-color: rgba(255, 255, 255, 0.1);
+        }
+      }
+
+      .opt-btn {
+        cursor: pointer;
+        color: #c9d3df;
+        vertical-align: middle;
+
+        &.add-item:hover {
+          /*color: #1890ff;*/
+        }
+        &.del-item:hover {
+          /*color: #F56C6C;*/
+        }
+      }
+
+      .flex {
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: -ms-flexbox;
+        display: flex;
+      }
+
+      .flex-wrap {
+        -webkit-flex-wrap: wrap;
+        -moz-flex-wrap: wrap;
+        -ms-flex-wrap: wrap;
+        -o-flex-wrap: wrap;
+        flex-wrap: wrap;
+      }
+
+      .staffRecords-limit {
+        .flex();
+        .flex-wrap();
+
+        .label-cell {
+          min-width: 50%;
+          max-width: 50%;
+          margin-left: 0;
+        }
+      }
+
+      .label-cell {
+        margin-bottom: 15px;
+        color: #fff;
+      }
+
+      .el-checkbox {
+        /deep/ span.el-checkbox__label {
+          color: #fff;
+        }
+        &.is-disabled {
+          /deep/ span.el-checkbox__label {
+            color: #fff;
+          }
+        }
+      }
+
+      .el-radio {
+        /deep/ span.el-radio__label {
+          color: #fff;
+        }
+        &.is-disabled {
+          /deep/ span.el-radio__label {
+            color: #fff;
+          }
+        }
+      }
+
+      .el-input {
+        /deep/ .el-input__inner {
+          color: #fff;
+          background-color: rgba(255, 255, 255, 0.1);
+        }
+
+        .is-disabled {
+          /deep/ .el-input__inner {
+            color: #fff;
+            background-color: rgba(255, 255, 255, 0.1);
+          }
+        }
+      }
+
+      .el-checkbox {
+        color: #fff;
+      }
+
+      .edit-view {
+        /*height: 700px;*/
+        /*overflow-y: auto;*/
+        /*margin-top:40px;*/
+      }
+
+      .edit-item {
+        color: #fff;
+        padding-bottom: 10px;
+
+        .tip {
+          margin-left: -40px;
+          color: rgba(255, 255, 255, 0.7);
+          width: 30px;
+          display: inline-block;
+          text-align: right;
+          margin-right: 10px;
+          font-size: 12px;
+        }
+      }
+
+      .edit-item-title {
+        color: #ffffff;
+        font-size: 14px;
+        font-weight: normal;
+        padding: 20px 0;
+
+        &.edit-title-padding {
+          padding-top: 15px;
+        }
+      }
+
+      .edit-item-title span {
+        font-size: 12px;
+        margin-left: 5px;
+      }
+    }
+  }
+}
+</style>

src/views/enterpriseApp/cloudDaily/taskAssign.vue

 <template>
-  <div class="my-customer-wrap common-set-wrap">
-    <!-- <nav-crumb :navpath="navpath"> </nav-crumb> -->
-    <div class="right-content">
-      <common-app-top :appName="appName" :appIcon="appIcon" @selectBrandId="selectBrandId"> </common-app-top>
-      <div class="right-box" :style="{ 'min-height': $store.state.bgHeight }">
-        <div class="apps-content flex" :style="{ height: $store.state.bgHeight }">
-          <div class="apps-content-left w-157">
-            <common-detail-left :tabListData="tabListData" @setSelectTab="setSelectTab"></common-detail-left>
+  <div class="app-detail-wrap">
+    <common-detail-top :topMenuData="topMenuData" :activeId="activeId"></common-detail-top>
+    <div class="task-set-content boder-box">
+      <div class="task-set-cell">
+        <div class="font-16 color-606266 m-b-10 font-w-500">日报开关设置</div>
+        <div class="font-14 color-606266 m-b-16">开启后，日报将定时发送</div>
+        <div class="">
+          <el-switch v-model="setData.switch" active-text=" " inactive-text=" "> </el-switch>
         </div>
-          <div class="apps-content-right">
-            <app-detail :brandId="activeBrand" :tabType="activeTab"></app-detail>
       </div>
+      <div class="task-set-cell">
+        <div class="font-16 color-606266 m-b-10 font-w-500">日报每日下发时间设置</div>
+        <div class="font-14 color-606266 m-b-16">该事件设置将在次日生效，为避免影响当日日报的发送，请在日报发送后设置</div>
+        <div>
+          <el-time-select
+            class="w-118"
+            :editable="false"
+            :clearable="false"
+            v-model="setData.setTime"
+            :picker-options="{
+              start: '00:00',
+              step: '00:15',
+              end: '23:45'
+            }"
+            placeholder="选择时间"
+          >
+          </el-time-select>
         </div>
       </div>
+      <div class="task-set-save m-t-30">
+        <el-button type="primary" @click="saveSet">保 存</el-button>
+      </div>
     </div>
-    <vue-gic-footer></vue-gic-footer>
-    <!-- 公共组件 -->
   </div>
 </template>
 <script>
-// import navCrumb from '@/components/nav/nav.vue';
 import appDetail from '@/components/app/app-detail.vue';
-import commonAppTop from '@/components/app/common-app-top.vue';
-import commonDetailLeft from '@/components/app/app-detail-left.vue';
+import commonDetailTop from '@/components/app/common-detail-top.vue';
+import { _debounce } from '@/common/js/public';
+import { postRequest } from '@/api/api';
 export default {
   name: 'reviewed',
-  data() {
-    return {
-      tableH: window.screen.availHeight - 464 - 126 + 'px',
-      // 面包屑参数
-      /* navpath: [
-        {
-          name: '首页',
-          path: '/index'
-        },
-        {
-          name: '企业应用',
-          path: ''
+  props: {
+    brandId: {
+      type: String,
+      default() {
+        return '';
       }
-      ], */
-      appName: '云日报',
-      appIcon: 'icon-ribao',
-
-      activeTab: '1',
-      tabListData: [
-        {
-          tabId: '1',
-          tabName: '云日报记录',
-          icon: 'icon-ribao'
-        },
-        {
-          tabId: '2',
-          tabName: '云日报设置',
-          icon: 'icon-ribaoshezhi',
-          children: [
-            {
-              tabId: '21',
-              tabName: '模板配置',
-              icon: '',
-              children: [
-                {
-                  tabId: '211',
-                  tabName: '系统报表',
-                  icon: ''
-                },
-                {
-                  tabId: '212',
-                  tabName: '自定义报表',
-                  icon: ''
     }
-              ]
   },
+  data() {
+    return {
+      activeTab: '1',
+      activeBrand: this.brandId, // 商户(品牌) id
+      topMenuData: [
         {
-              tabId: '22',
-              tabName: '任务下发设置',
-              icon: ''
-            }
-          ]
+          id: '1',
+          name: '任务下发设置'
         }
       ],
-      activeBrand: '1' // 商户(品牌) id
+      activeId: '1',
+      setData: {
+        switch: false,
+        setTime: '12:00'
+      }
     };
   },
   computed: {},
   methods: {
     /**
-     * 返回 的 brandId
+     * 保存
      */
-    selectBrandId(id) {
+    saveSet: _debounce(function() {
       let that = this;
-      that.activeBrand = id;
-    },
-
-    setSelectTab(item) {
+      that.postSave();
+    }, 500),
+    postSave() {
       let that = this;
-      that.activeTab = item.tabId;
+      let para = {};
+      postRequest('/haoban-manage-web/save', para)
+        .then(res => {
+          let resData = res.data;
+          if (resData.errorCode == 1) {
+            showMsg.showmsg('保存成功', 'success');
+            return;
+          }
+          errMsg.errorMsg(resData);
+        })
+        .catch(function(error) {
+          that.$message.error({
+            duration: 1000,
+            message: error.message
+          });
+        });
     }
   },
   watch: {
-    activeBrand: function(newData, oldData) {
+    brandId: function(newData, oldData) {
       const that = this;
       that.activeBrand = newData;
     }
   },
   mounted() {
     document.documentElement.style.backgroundColor = '#f0f2f5';
+    this.$emit('showTab', '22');
   },
   destroyed() {
     document.documentElement.style.backgroundColor = '#fff';
   },
   components: {
-    // navCrumb,
     appDetail,
-    commonAppTop,
-    commonDetailLeft
+    commonDetailTop
   }
 };
 </script>
 <style type="text/scss" lang="scss" scoped>
-.bg-82C5FF {
-  background: #82c5ff;
-}
-
-.color-508CEE {
-  color: #508cee;
-}
-
-.color-FF585C {
-  color: #ff585c;
-}
-
-.line-h-18 {
-  line-height: 18px;
-}
-
-.tooltip-text {
-  width: 100%;
-  white-space: pre-wrap;
-  word-break: break-all;
-}
-
-.right-content {
-  /*width: 100%;*/
-  padding: 24px;
-  min-height: calc(100% - 240px);
-
-  .my-customer-top {
-    position: relative;
-    height: 43px;
-    line-height: 43px;
-    .my-customer-return {
-      position: absolute;
-      left: 0px;
-      bottom: 10px;
-      width: 78px;
-      height: 32px;
-      border-radius: 18px;
-    }
-
-    .my-customer-brand {
-      position: absolute;
-      right: 0;
-      bottom: 18px;
-      width: 93px;
-      height: 32px;
-    }
-
-    .my-customer-name {
-      width: 200px;
-      margin: 0 auto;
-
-      i {
-        font-size: 14px;
-        color: #fff;
-      }
-      span {
-        font-size: 16px;
-        color: #000;
-      }
-
-      .app-icon {
-        display: inline-block;
-        width: 22px;
-        height: 22px;
-        line-height: 22px;
-        text-align: center;
-        border-radius: 4px;
-        background: -webkit-linear-gradient(left, #7ab6fb, #508bfe);
-        background: -moz-linear-gradient(left, #7ab6fb, #508bfe);
-        background: linear-gradient(left, #7ab6fb, #508bfe);
-      }
-    }
-  }
-  .right-box {
-    // background: #fff;
-    min-height: 500px;
-    padding: 0px;
-
-    .apps-content {
-      .apps-content-left {
-        height: 100%;
-        background: #fff;
-        overflow-x: hidden;
-        overflow-y: auto;
-
-        .apps-content-left__title {
-          height: 55px;
-          line-height: 55px;
-          padding: 0 0 0 18px;
-        }
-
-        .tab-left-list-cell {
-          position: relative;
-          text-align: left;
-          margin-top: 15px;
-          height: 30px;
-          line-height: 30px;
-          white-space: nowrap;
-          overflow: hidden;
-          cursor: pointer;
-
-          &:hover {
-            background: rgba(24, 144, 255, 0.06);
-            i {
-              color: #1890ff;
-            }
-          }
-          &.active-tab {
-            background: rgba(24, 144, 255, 0.06);
-            &::before {
-              content: ' ';
-              position: absolute;
-              left: 0;
-              top: 0;
-              bottom: 0;
-              width: 2px;
-              background: #1890ff;
-              z-index: 1;
-            }
-            i {
-              color: #1890ff;
-            }
-          }
-
-          .child-tab-left-list {
-            li {
-              position: relative;
-              text-align: left;
-              height: 30px;
-              line-height: 30px;
-              white-space: nowrap;
-              overflow: hidden;
-              cursor: pointer;
-
-              &:hover {
-                background: rgba(24, 144, 255, 0.06);
-                i {
-                  color: #1890ff;
-                }
-              }
-              &.active-tab {
-                background: rgba(24, 144, 255, 0.06);
-                &::before {
-                  content: ' ';
-                  position: absolute;
-                  left: 0;
-                  top: 0;
-                  bottom: 0;
-                  width: 2px;
-                  background: #1890ff;
-                  z-index: 1;
-                }
-                i {
-                  color: #1890ff;
-                }
-              }
-            }
-          }
-        }
-      }
-      .apps-content-right {
-        width: calc(100% - 10px);
-        margin-left: 10px;
-        background: #fff;
-      }
+.task-set-content {
+  padding: 0 40px 40px 40px;
+  .task-set-cell {
+    padding: 30px 0;
+    border-bottom: 1px solid #e4e7ed;
+
+    .el-date-editor.el-input {
+      width: 118px;
     }
   }
 }

src/views/enterpriseApp/mycustomer.vue

@@ -6,22 +6,6 @@
       <div class="right-box" :style="{ 'min-height': $store.state.bgHeight }">
         <div class="apps-content flex" :style="{ height: $store.state.bgHeight }">
           <div class="apps-content-left w-157">
-            <!-- <div class="apps-content-left__title border-box color-606266 font-14"></div> -->
-            <!-- <ul class="tab-left-list">
-              <template v-for="(item, index) in tabListData">
-                <li :class="['tab-left-list-cell color-303133 font-14 border-box p-l-14', item.tabId == activeTab ? 'active-tab' : '']" :key="index" @click="selectTab(item)"><i :class="['p-r-10 color-303133 iconfont', item.icon]"></i>{{ item.tabName }}</li>
-                <ul class="child-tab-left-list" :key="'childitem' + index">
-                  <template v-for="(childitem, childIndex) in item.children">
-                    <li :class="['tab-left-list-cell color-303133 font-14 border-box', childitem.tabId == activeTab ? 'active-tab' : '']" :key="childIndex" @click="selectTab(childitem)">{{ childitem.tabName }}</li>
-                    <ul class="third-tab-left-list" :key="'thirditem' + childIndex">
-                      <template v-for="(thirditem, thirdIndex) in childitem.children">
-                        <li :class="['tab-left-list-cell color-303133 font-14 border-box', thirditem.tabId == activeTab ? 'active-tab' : '']" :key="thirdIndex" @click="selectTab(thirditem)">{{ thirditem.tabName }}</li>
-                      </template>
-                    </ul>
-                  </template>
-                </ul>
-              </template>
-            </ul> -->
             <common-detail-left :tabListData="tabListData" @setSelectTab="setSelectTab"></common-detail-left>
           </div>
           <div class="apps-content-right">
@@ -44,20 +28,8 @@ export default {
   data() {
     return {
       tableH: window.screen.availHeight - 464 - 126 + 'px',
-      // 面包屑参数
-      /* navpath: [
-        {
-          name: '首页',
-          path: '/index'
-        },
-        {
-          name: '企业应用',
-          path: ''
-        }
-      ], */
       appName: '我的顾客',
       appIcon: 'icon-gukedown',
-
       activeTab: '1',
       tabListData: [
         {

src/views/login/index.vue

@@ -64,7 +64,7 @@
 <script>
 import 'swiper/dist/css/swiper.css';
 import { swiper, swiperSlide } from 'vue-awesome-swiper';
-
+import { _debounce } from '@/common/js/public';
 import QRCode from 'qrcodejs2';
 import errMsg from '@/common/js/error';
 import { postRequest } from '@/api/api';
@@ -164,21 +164,23 @@ export default {
     /**
      *  刷新二维码
      */
-    refreshCode() {
+    refreshCode: _debounce(function() {
       const that = this;
+      if (!!that.qrcodeCase) {
         document.getElementById('qrcode').innerHTML = '';
         that.qrcodeCase.clear(); // 先清除原有的
+      }
       that.getQrcode();
       that.expiredFlag = false; //隐藏过期遮罩层
-    },
+    }, 500),
 
     /**
      *  登录
      */
-    toIndex() {
+    toIndex: _debounce(function() {
       const that = this;
       that.toLogin();
-    },
+    }, 500),
 
     /**
      *  登录 --- api

static/css/public.css

@@ -392,6 +392,14 @@ input:focus {
   padding-left: 14px;
 }
 
+.p-l-40 {
+  padding-left: 40px;
+}
+
+.p-l-60 {
+  padding-left: 60px;
+}
+
 .p-lr-11 {
   padding: 0 11px;
 }
@@ -460,6 +468,10 @@ input:focus {
   margin-bottom: 10px;
 }
 
+.m-b-16 {
+  margin-bottom: 16px;
+}
+
 .m-b-48 {
   margin-bottom: 48px;
 }
@@ -516,6 +528,10 @@ input:focus {
   width: 80px;
 }
 
+.w-118 {
+  width: 118px;
+}
+
 .w-130 {
   width: 130px;
 }