centaline-data-driven 1.5.37 → 1.5.39

package/src/centaline/dynamicDetail/src/dynamicCustomerSimpleDetail.vue

@@ -0,0 +1,761 @@
+<template>
+  <div ref="main" class="main" style="position: relative;overflow: hidden;">
+    <div v-if="model !== null" style="height:36px;margin-top: 10px;display: flex;border-bottom: solid 2px var(--chinaRed);">
+      <el-popover v-if="model.routerForQRCode !== null" placement="left-start" trigger="hover" @show="fieldClickHandler(model.routerForQRCode, $event)">
+        <div style="border-bottom:none">
+          <div style="text-align: center;margin-bottom:10px;">APP扫码</div>
+          <div style="width:200px; height:200px;"><img :src="model.QRCode" @click="fieldClickHandler(model.routerForQRCode, $event)" /></div>
+          <div style="text-align: center;margin-top:10px;">点击二维码刷新</div>
+        </div>
+        <img class="code-ewm" slot="reference" :src="model.fields1Dic.ewmUrl.value" style="width: 26px;height: 26px;vertical-align: bottom;margin-left:22px;" />
+      </el-popover>
+      <div :style="{ 'width': topWidth + 'px' }" style="font-size: 14px;color: var(--centalineBlack);padding-left: 10px;line-height: 26px;">
+        <span>{{ model.fields1Dic.CustNo.label }}</span>
+        <span>{{ model.fields1Dic.CustNo.value }}</span>
+      </div>
+      <img :class="{ 'domDisabled': selectIndex <= 0 }" @click="clickPrevHandler" src="../../../assets/T1.png" alt=""
+        style="width: 26px;height: 26px;vertical-align: bottom;margin-right:11px;cursor: pointer">
+      <img :class="{ 'domDisabled': selectIndex === rowCount - 1 }" @click="clickNextHandler" src="../../../assets/B1.png"
+        alt="" style="width: 26px;height: 26px;vertical-align: bottom;margin-right:8px;cursor: pointer">
+      <div v-if="!model.flagAppMode && showIndex < 4" class="el-icon-close cursor" style="padding-top: 5px;" @click="closeSideHandler">
+      </div>
+      <span v-if="model.flagAppMode ||showIndex > 3 " :slot="showIndex > 0 ? 'reference' : ''" class="more" style="margin-right: 10px;"
+        @click="drawer = true"></span>
+      <el-drawer title="更多操作" :visible.sync="drawer" direction="ttb" :modal="false" class="drawerMore" size="30%"  style="position: absolute;">
+        <div style="display: flex;flex-flow:row wrap ">
+          <component v-for="(router, index) in model.actionRoutersSimple.slice(showIndex)" :key="index"
+            class="drawerButton"
+            v-if="!router.rightField || (model.fields1Dic[router.rightField] && model.fields1Dic[router.rightField].value == 1)"
+            :is="router.is" :vmodel="router" :flagAppMode="true" :api="model.optionApi"
+            @click="fieldClickHandler(router)">
+          </component>
+        </div>
+      </el-drawer>
+    </div>
+    <div v-if="model !== null" style="padding-left: 20px;padding-right: 20px;">
+      <div ref="title" style="margin-top: 18px;">
+        <div style="font-weight: Bold;font-size: 16px;color: #333333;display: flex;">
+          <img v-if="model.actionRouterFavorite" :src="model.actionRouterFavorite.imgUrl" alt="" @click="fieldClickHandler(model.actionRouterFavorite, $event)" class="Simplecollection" />          
+          <span>{{ model.fields1Dic.CustName.value }}</span>
+          <div style="border: 1px solid #E0E0E0;font-size: 12px;color: #333333;padding-top: 3px;
+                width: 68px;height: 26px;border-radius: 6px;text-align: center;margin-left: auto;">
+            {{ model.fields1Dic.StatusName.value }}
+          </div>
+        </div>
+        <div v-if="model.fields1Dic.DistrictName" style="font-size: 12px;color: #999999;margin-top: 7px;">
+          <span>{{ model.fields1Dic.DistrictName.value }}</span>
+          <span>{{ model.fields1Dic.AreaName.value }}</span>
+        </div>
+        <div style="display: flex;flex-wrap: wrap;">
+          <div v-for="(tag, index) in model.actionRouterLabel" :key="index" class="t-tag" style="margin-top: 7px;"
+            :style="{ color: tag.textColor, backgroundColor: tag.bgColor, borderColor: tag.borderColor }">
+            {{ tag.label }}
+          </div>
+        </div>
+        <div v-if="model.fields1Dic.PropertyDepict && model.fields1Dic.PropertyDepict.value !== ''"
+          v-html="model.fields1Dic.PropertyDepict.value"
+          style="font-weight: bold;font-size: 13px; margin-top: 10px;background: rgb(236, 249, 255); flex: 1;align-items: center;padding: 5px;border-radius: 5px;    word-break: break-all;">
+        </div>
+      </div>
+      <div v-if="model.flagHiddenSensitiveInfo" style="display: flex;align-items: center;justify-content: center;margin-top: 50%;height: 0px;">
+        <div v-html="model.hiddenSensitiveInfoReason"></div>
+      </div>
+      <div v-if="!model.flagHiddenSensitiveInfo" class="areaValue">
+        <div style="width: 33.33%;">
+          <div class="areaValuetile">{{ model.fields1Dic.Area.label.replace('：', '') }}</div>
+          <div class="areaValueRed"> {{ model.fields1Dic.Area.value }}{{ model.fields1Dic.Area.unitName }}</div>
+        </div>
+        <div style="width: 33.33%;">
+          <div class="areaValuetile">{{ model.fields1Dic.Price.label.replace('：', '') }}</div>
+          <div class="areaValueRed"><span v-html="model.fields1Dic.Price.value"></span><span>{{ model.fields1Dic.Price.unitName }}</span></div>
+        </div>
+        <div style="width: 33.33%;">
+          <div class="areaValuetile">{{ model.fields1Dic.BusinessUnit.label.replace('：', '') }}</div>
+          <div class="areaValueRed">{{ model.fields1Dic.BusinessUnit.value }}</div>
+        </div>
+      </div>
+      <div ref="contact" id="contact" style="margin-top: 16px;"
+        v-if="!model.flagHiddenSensitiveInfo && model.contactApiRouter !== null">
+        <ct-contact :key="refreshKey" :apiRouter="model.contactApiRouter" :api="model.contactApiRouter.action"
+          :apiParam="model.contactApiRouter.getSearchPara()"></ct-contact>
+      </div>
+      <div ref="routers" v-if="!model.flagAppMode && !model.flagHiddenSensitiveInfo && model.actionRoutersSimple !== null"
+        style="margin-top: 16px;display: flex;">
+        <component
+          v-for="(router, index) in model.actionRoutersSimple.slice(0, showIndex > 0 ? showIndex : model.actionRoutersSimple.length)"
+          :key="index" :ref="'routers' + index" :flagAppMode="true"
+          v-if="!router.rightField || (model.fields1Dic[router.rightField] && model.fields1Dic[router.rightField].value == 1)"
+          :is="router.is" :vmodel="router" :api="model.optionApi" @click="fieldClickHandler(router)" class="crossButton">
+        </component>
+      </div>
+      <div ref="shortcutFollow"
+        v-if="!model.flagHiddenSensitiveInfo && model.shortcutFollowForm !== undefined && model.shortcutFollowForm !== null"
+        class="shortcutFollow" style="margin-top: 16px;">
+        <ct-form :source="model.shortcutFollowForm" @submit="saveShortcutFollow" :openType="'detail'"></ct-form>
+      </div>
+      <div v-if="!model.flagHiddenSensitiveInfo" class="tablist-info base-box">
+        <div class="details-tabs-box">
+          <el-tabs :value="model.activeIndex1" @tab-click="handleSelect">
+            <el-tab-pane v-for="(col, index) in model.tags1" :key="col.appID" :index="index.toString()"
+              :name="index.toString()">
+              <div slot="label" v-html="col.appName"></div>
+            </el-tab-pane>
+          </el-tabs>
+          <ct-searchlist ref="searchlist" v-if="model.searchConditionApiTags1"
+            :key="'list' + listKey.toString() + refershKey" :apiParam="model.paramDataTags1" :flagFocus="false"
+            :searchConditionApi="model.searchConditionApiTags1" :searchDataApi="model.searchDataApiTags1"
+            :flagAppMode="model.flagAppMode"></ct-searchlist>
+        </div>
+      </div>
+    </div>
+    <div v-if="isLoading" v-loading="isLoading" :style="{'height': loadingHeight+'px',}"></div>
+  </div>
+</template>
+
+<script>
+import dynamicElement from '../../mixins/dynamicElement';
+import dynamicContact from '../../dynamicContact/src/dynamicContact.vue';
+import dynamicForm from '../../dynamicForm/src/dynamicForm.vue';
+export default {
+  name: 'ct-CustomerSimpleDetail',
+  mixins: [dynamicElement],
+  components: {
+    'ct-contact': dynamicContact,
+    'ct-form': dynamicForm,
+  },
+  props: {
+    vmodel: Object,
+    api: String,
+    apiParam: Object,
+    selectIndex: Number,
+    rowCount: Number,
+    drowerClose: String,
+  },
+  computed: {
+  },
+  data() {
+    return {
+      refreshKey: 0,
+      topWidth: 300,
+      showIndex: 0,
+      listKey: 0,
+      option: {
+        isHidden: true,//是否开启操作栏隐藏设置，默认开启
+        showNum: 3,//如果isHidden为true时，个数大于3就会隐藏，默认是3
+        appendId: '',//将浮动栏添加到对应id或者class节点中。或者.xxx。传空字符串是添加到body中。
+        trigger: 'hover',//触发方式，传值可查看Popper UI组件trigger属性
+        placement: 'left-start',//方向，传值可查看Popper UI组件placement属性
+      },
+      drawer: false,
+      isLoading:true,
+      loadingHeight:0,
+    }
+  },
+  watch: {
+    drowerClose(newValue) {
+      if (newValue == 'open') {
+        this.handleClose();
+      }
+    }
+  },
+  mounted() {
+    var self = this;
+    this.$nextTick(function () {
+      this.loadingHeight=this.$refs.main.parentElement.parentElement.offsetHeight;
+      if (self.vmodel) {
+        self.load(self.vmodel);
+      }
+      else if (typeof self.source !== 'undefined') {
+        self.loaderObj.Detail(self.source, null, self.load);
+      }
+      else if (typeof self.api !== 'undefined' && self.apiParam) {
+        self.loaderObj.Detail(self.api, self.apiParam, self.load);
+      }
+    });
+  },
+  activated() {
+    this.$nextTick(() => {
+      this.setDetailStyle();
+    })
+  },
+  methods: {
+    load(data) {
+      this.isLoading=false;
+      var self = this;
+      this.refershKey = this.refershKey + 1;
+      this.model = data;
+      this.model.$vue = self;
+      this.loadFields();
+      if (this.model.tags2 && this.model.tags2[0]) {
+        this.model.getTags2List(0);
+      }
+      if (typeof window.localStorage !== 'undefined') {
+        var tagkey = window.localStorage.getItem('simpletagkey');
+        if (self.model.tags1) {
+          for (var i = 0; i < self.model.tags1.length; i++) {
+            if (tagkey == self.model.tags1[i].appID) {
+              self.model.activeIndex1 = i.toString();
+              if (self.model.tags1 && self.model.tags1[i]) {
+                self.listKey = self.listKey + 1;
+                self.model.searchConditionApiTags1 = self.model.tags1[i].searchConditionAction || '';
+                self.model.searchDataApiTags1 = self.model.tags1[i].searchDataAction || '';
+                self.model.paramDataTags1 = self.model.tags1[i].paramData || '';
+              }
+            }
+          }
+        }
+      }
+      this.setDetailStyle();
+      this.$nextTick(() => {
+        window.addEventListener("resize", (ev) => {
+          self.setDetailStyle();
+        });
+      });
+    },
+    setDetailStyle() {
+      let self = this;
+      this.$nextTick(() => {
+        if (this.$refs.main) {
+          this.topWidth = this.$refs.main.clientWidth - 140;
+        }
+
+        let totalWidth = 0;
+        let sumWidth = 0;
+        let moreWidth = 20;
+        if (self.$refs.routers) {
+          totalWidth = self.$refs.routers.offsetWidth;
+        }
+        if (self.model && self.model.actionRoutersSimple) {
+          self.model.actionRoutersSimple.forEach((v, i) => {
+            if (!v.rightField || (self.model.fields1Dic[v.rightField] && self.model.fields1Dic[v.rightField].value == 1)) {
+              if (self.$refs['routers' + i] && self.$refs['routers' + i].length > 0 && self.$refs['routers' + i][0] && self.$refs['routers' + i][0].$el) {
+                if (sumWidth + self.$refs['routers' + i][0].$el.offsetWidth -8 > totalWidth && self.showIndex === 0) {               
+                  self.showIndex = i;
+                }   
+                else {
+                  sumWidth = sumWidth + self.$refs['routers' + i][0].$el.offsetWidth + (i > 0 ? 10 : 0);
+                }
+              }
+            }
+          });
+        }
+      });
+    },
+    refreshPage() {
+      this.refreshKey = this.refreshKey + 1;
+      this.showIndex = 0;
+      this.setDetailStyle();
+    },
+    loadFields() {
+      var self = this;
+      if (!self.model.fields2Dic) return;
+      self.collapse = [];
+      var collapseItemArr = [];
+      var col = 0;
+      var colCount = 4;
+      self.model.fields2Dic.forEach((v, index) => {
+        if (v.type === 13) {
+          collapseItemArr = [];
+          col = 0;
+        }
+        else if (v.singleLine) {
+          if (collapseItemArr.length > 0) {
+            self.collapse.push(collapseItemArr);
+            collapseItemArr = [];
+          }
+          collapseItemArr.push(v);
+          self.collapse.push(collapseItemArr);
+          collapseItemArr = [];
+          col = 0;
+        }
+        else if (v.spanCols) {
+          collapseItemArr.push(v);
+          col = col + v.spanCols;
+          if (col === colCount || index === self.model.fields2Dic.length - 1) {
+            self.collapse.push(collapseItemArr);
+            collapseItemArr = [];
+            col = 0;
+          }
+        }
+        else {
+          collapseItemArr.push(v);
+          col = col + 1;
+          if (col === colCount || index === self.model.fields2Dic.length - 1) {
+            self.collapse.push(collapseItemArr);
+            collapseItemArr = [];
+            col = 0;
+          }
+        }
+      });
+    },
+    loadBaseInfo() {
+      this.model.loadBaseInfo();
+    },
+    loadFavorite() {
+      this.model.loadFavorite();
+    },
+    loadqrCode() {
+      this.model.loadqrCode();
+    },
+    handleClick(tab, event) {
+      let i = tab.index;
+      if (this.model.tags2 && this.model.tags2[i]) {
+        this.model.getTags2List(i);
+      }
+    },
+    handleSelect(key, keyPath) {
+      let i = key.index;
+      this.model.activeIndex1 = i;
+      if (this.model.tags1 && this.model.tags1[i]) {
+        this.listKey = this.listKey + 1;
+        this.model.searchConditionApiTags1 = this.model.tags1[i].searchConditionAction || '';
+        this.model.searchDataApiTags1 = this.model.tags1[i].searchDataAction || '';
+        this.model.paramDataTags1 = this.model.tags1[i].paramData || '';
+        window.localStorage.setItem("simpletagkey", this.model.tags1[i].appID);//存储
+      }
+    },
+    fieldClickHandler(field) {
+      if (this.$refs['popover0']) {
+        this.$refs['popover0'].doClose();
+      }
+      if (field == null || field == undefined) {
+        return;
+      }
+      var self = this;
+      self.handleClose();
+      var callBack = null;
+      let submitData = {};
+      var router = this.model.actionRouters.find((v) => {
+        return v.id === field.id;
+      });
+      if (router == undefined && this.model.actionRoutersMoreList) {
+        router = this.model.actionRoutersMoreList.find((v) => {
+          return v.id === field.id;
+        });
+      }
+      if (router == undefined && this.model.otherTradeActionRouter) {
+        if (field.id === this.model.otherTradeActionRouter.id) {
+          router = this.model.otherTradeActionRouter
+        }
+      }
+      if (router == undefined && this.model.operationRouters) {
+        router = this.model.operationRouters.find((v) => {
+          return v.id === field.id;
+        });
+        callBack = "loadOperation";
+      }
+      if (router == undefined && this.model.actionRouterFavorite) {
+        if (field.id === this.model.actionRouterFavorite.id) {
+          router = this.model.actionRouterFavorite;
+        }
+      }
+      if (router == undefined && this.model.routerForQRCode) {
+        if (field.id === this.model.routerForQRCode.id) {
+          router = this.model.routerForQRCode;
+        }
+      }
+      if (router == undefined && this.model.actionRouterEstate) {
+        if (field.id === this.model.actionRouterEstate.id) {
+          router = this.model.actionRouterEstate;
+        }
+      }
+      if (router == undefined && this.model.actionRouterMap) {
+        if (field.id === this.model.actionRouterMap.id) {
+          router = this.model.actionRouterMap;
+        }
+      }
+
+      if (router) {
+        if (field.isSubmitDataFromSelf) {
+          router.submitFormField.forEach((v) => {
+            submitData[v] = field.list[field.listIndex].code;
+          });
+        }
+        else {
+          router.submitFormField.forEach((v) => {
+            submitData[v] = self.model.fields1Dic[v].value;
+          });
+        }
+        if (router.id == "PropertyEdit") {
+          callBack = "loadBaseInfo"
+        }
+        else if (router.id == "Favorite") {
+          callBack = "loadFavorite"
+        }
+        else if (router.id == "qrCode") {
+          callBack = "loadqrCode"
+        }
+      }
+
+      if (callBack) {
+        if (callBack == 'loadOperation') {
+          this.routerClickHandler(router, submitData, self.loadOperation);
+        }
+        else if (callBack == 'loadBaseInfo') {
+          this.routerClickHandler(router, submitData, self.loadBaseInfo);
+        }
+        else if (callBack == 'loadFavorite') {
+          this.routerClickHandler(router, submitData, self.loadFavorite);
+        }
+        else if (callBack == 'loadqrCode') {
+          self.loadqrCode();
+        }
+      }
+      else {
+        this.routerClickHandler(router, submitData);
+      }
+    },
+    routerClickHandler(field, submitData, callBack) {
+      var self = this;
+      // this.model.scripts.$fd = field.id;
+      // this.model.scripts.$result = [];
+
+      var clickAcion = function (field) {
+        //若不是客户端方法，则直接访问接口
+        if (!field.isClientFuntion) {
+          // if (typeof field.onClick !== 'undefined') {
+          //   verified = self.$common.excute.call(self.model.scripts, field.onClick);
+          // }
+
+          if (field.isTabInSystem) {
+            if (field.isOpenBaiduMap) {
+              submitData = field.getActionPara(submitData).para;
+              self.$common.getDataDrivenOpts().handler.openTabBaiduMap(submitData, field.pageTitle || field.label);
+            }
+          }
+          else if (field.isTabInBrowse) {
+
+          }
+          else if (field.isLayerInSystem) {
+            if (field.isOpenBaiduMap) {
+              var dialogOption = {
+                title: field.pageTitle,
+                pane: self.$common.getParentPane(self),
+                content: [
+                  {
+                    component: "ct-mapBaidu",
+                    attrs: {
+                      field: field,
+                      apiParam: field.getActionPara(submitData).para,
+                      width: field.dialogWidth + "px",
+                      height: field.dialogHeight + "px",
+                    },
+                    on: {
+                      submit(ev) {
+                        if (callBack) {
+                          callBack(field);
+                        }
+                        self.$common.closeDialog(dialogOption.dialog);
+                      },
+                      closeDialog(ev) {
+                      }
+                    },
+                  },
+                ],
+              };
+              self.$common.openDialog(dialogOption);
+            }
+          }
+          else if (field.isOpenForm) {
+            var dialogOption = {
+              title: field.pageTitle,
+              pane: self.$common.getParentPane(self),
+              content: [{
+                component: 'ct-form',
+                attrs: {
+                  api: field.action,
+                  apiParam: field.getActionPara(submitData).para,
+                  showTitle: false,
+                  width: field.dialogWidth + 'px',
+                  height: field.dialogHeight + 'px'
+                },
+                on: {
+                  submit(ev) {
+                    self.model.doAction(ev, field);
+                    if (callBack) {
+                      callBack();
+                    }
+                    self.$common.closeDialog(dialogOption.dialog);
+                    if (field.id != "Favorite") {
+                      self.$emit('simpleRouterclickHandler', field, ev);
+                    }
+                  }
+                }
+              }]
+            };
+            self.$common.openDialog(dialogOption);
+          }
+          else if (field.isOpenList) {
+            var dialogOption = {
+              title: field.pageTitle,
+              pane: self.$common.getParentPane(self),
+              content: [{
+                component: 'ct-searchlist',
+                attrs: {
+                  searchConditionApi: field.actionForSearchLayout,
+                  searchDataApi: field.actionForSearch,
+                  apiParam: field.getActionPara(submitData).para,
+                  width: field.dialogWidth + 'px',
+                  height: field.dialogHeight + 'px'
+                },
+                on: {
+                  submit(ev) {
+                    self.model.updateFields(ev, () => {
+                      self.$refs.Fields.forEach((fd) => {
+                        fd.$forceUpdate();
+                      });
+                    });
+                    self.$common.closeDialog(dialogOption.dialog);
+                  },
+                  closeDialog(ev) {
+                    if (field.id == "Favorite" && callBack) {
+                      callBack();
+                    }
+                  }
+                }
+              }]
+            };
+            self.$common.openDialog(dialogOption);
+          }
+          else if (field.isFormPageInTab) {// 外部框架tab页打开
+            submitData = field.getActionPara(submitData).para;
+            self.$common.getDataDrivenOpts().handler.openTab(field.action, submitData, field.pageTitle, self.model, field.dialogWidth);
+          }
+          else if (field.isSearchPageInTab) {// 外部框架tab页打开
+            submitData = field.getActionPara(submitData).para;
+            self.$common.getDataDrivenOpts().handler.openTabSearch(field, submitData);
+          }
+          else if (field.isUrlInSystemTab) {//外部框架tab页打开URl
+            submitData = field.getActionPara(submitData).para;
+            let query = self.$common.objectToQueryStr(submitData);
+            let urlTab = field.action + query;
+            if (field.action.indexOf('?') > -1 && query.indexOf('?') > -1) {
+              urlTab = field.action + '&' + query.substr(1, query.length);
+            }
+            self.$common.getDataDrivenOpts().handler.openTabUrl(urlTab, field.pageTitle || field.label);
+          }
+          else if (field.isBrowserNewTab) {// 浏览器打开
+            submitData = field.getActionPara(submitData).para;
+            let query = self.$common.objectToQueryStr(submitData);
+            let urlTab = field.action + query;
+            if (field.action.indexOf('?') > -1 && query.indexOf('?') > -1) {
+              urlTab = field.action + '&' + query.substr(1, query.length);
+            }
+            window.open(urlTab, "_blank");
+          }
+          else if (field.isOpenUrlInBrowse) {// 浏览器打开
+            window.open(submitData[field.submitFormField], "_blank");
+          }
+          else if (field.isSeeVoice) {//看视频              
+            self.$common.browseVideo(field, submitData)
+          }
+          else {
+            field.doAction(submitData, (data) => {
+              if (callBack) {
+                callBack();
+              }
+              if (field.isCallTel) {
+                self.model.doAction(data, field);
+                if (self.model.currentCallTel) {
+                  self.$refs[self.model.currentCallTel][0].closeCallTel()
+                }
+                self.model.currentCallTel = 'router' + field.id + field.rowindex;
+                self.$refs['router' + field.id + field.rowindex][0].callTelClick(data);
+              }
+              else {
+                self.model.doAction(data, field);
+                self.$emit('simpleRouterclickHandler', field, data);
+              }
+            })
+          }
+        }
+        //执行客户端脚本
+        else {
+          submitData = field.getActionPara(submitData).para;
+          let title = field.pageTitle == undefined ? field.label : field.pageTitle;
+          submitData.actionType = field.actionType;
+          var fun = self.$common.getDataDrivenOpts().handler[field.action];
+          fun(submitData, title, self.model);
+        }
+      }
+
+      if (field.isSubmit && !self.validExcute()) {
+        return;
+      }
+
+      if (field.alert) {
+        self.$common.confirm(field.alertMsg, field.alertCaption, {
+          confirmButtonText: field.alertOKButtonText,
+          cancelButtonText: field.alertCancelButtonText,
+          //type: 'warning'
+          center: field.alertCenter
+        }).then(() => {
+          clickAcion(field, submitData);
+        }).catch(() => {
+        });
+      }
+      else {
+        clickAcion(field, submitData);
+      }
+    },
+    handleClose() {
+      let self = this;
+      self.drawer = false;
+    },
+    closeSideHandler() {
+      this.$emit('closeSideHandler');
+    },
+    setBtnHandler(index, count) {
+      this.selectIndex = index;
+      this.count = count;
+    },
+    clickNextHandler() {
+      this.$emit('clickNextHandler');
+    },
+    clickPrevHandler() {
+      this.$emit('clickPrevHandler');
+    },
+    saveShortcutFollow() {
+      var self = this;
+      self.model.tags1.forEach((v, i) => {
+        if (v.appID == 'Follow') {
+          self.model.activeIndex1 = i.toString();
+          self.listKey = self.listKey + 1;
+          self.model.searchConditionApiTags1 = v.searchConditionAction || '';
+          self.model.searchDataApiTags1 = v.searchDataAction || '';
+          self.model.paramDataTags1 = v.paramData || '';
+        }
+      });
+    },
+  }
+}
+</script>
+<style lang="scss" scoped>
+.t-tag {
+  color: #999;
+  background: #f3f3f3;
+  border: 1px solid #d8d8d8;
+  padding: 2px 9px;
+  border-radius: 3px;
+  margin-right: 10px;
+  font-size: 12px;
+}
+
+.more {
+  background: url('../../../assets/more1.png')no-repeat;
+  background-size: 100% 100%;
+  width: 26px;
+  height: 26px;
+  display: table-caption;
+  cursor: pointer;
+}
+</style>
+<style>
+.drawerMore {
+  width: 410px;
+  left: auto;
+  top: 0;
+}
+
+.v-modal {
+  position: relative;
+}
+
+/* .drawerMore  .el-drawer__container {
+  top: 27px;
+} */
+.drawerMore .el-drawer.ttb {
+  height: auto !important;
+  background: rgba(47, 47, 47, 0.8);
+  padding-bottom: 10px;
+  padding-left: 10px;
+}
+
+.drawerMore .el-drawer__header {
+  margin-bottom: 5px;
+  color: #fff;
+  padding-top: 10px;
+  padding-left: 10px;
+  font-size: 14px;
+}
+
+.drawerMore .el-drawer__body {
+  padding-left: 3px;
+}
+
+.drawerMore .el-drawer__header i.el-dialog__close.el-icon.el-icon-close {
+  color: #fff;
+  font-size: 20px;
+    margin-right: -8px;
+    margin-top: 3px;
+}
+
+.drawerButton {
+  margin-bottom: 10px !important;
+  margin-left: 5px !important;
+  background-color: #181818 !important;
+  border-color: #181818 !important;
+  width: 92px !important;
+  height: 56px !important;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.drawerButton.el-button--primary:hover {
+  background: #2b2b2b;
+  border-color: #2b2b2b;
+  color: #FFF;
+}
+
+.drawerMore .el-icon-close:before {
+  content: "\E6DB";
+}
+.crossButton {
+  margin-bottom: 10px !important;
+  background-color: #777 !important;
+  border-color: #777 !important;
+  width: 86px !important;
+  height: 56px !important;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.crossButton:not(:first-child) {
+  margin-left: 5px !important;
+}
+.Simplecollection {
+  font-size: 18px;
+  margin-right: 10px;
+  cursor: pointer;
+  vertical-align: -2.85px;
+  width: 18px;
+  height: 18px;
+  margin-top: 2px;
+}
+
+.areaValue {
+  margin-top: 16px;
+  display: flex;
+  height: 65px;
+  border: 1px solid #ECEFF2;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+  border-radius: 6px;
+  text-align: center;
+  color: var(--centalineBlack);
+}
+
+.areaValuetile {
+  margin-top: 13px;
+  font-size: 12px;
+}
+
+.areaValueRed {
+  margin-top: 7px;
+  font-size: 14px;
+  font-weight: Bold;
+  color: var(--chinaRed);
+}
+</style>
+
+