centaline-data-driven 1.3.21 → 1.3.24

package/src/centaline/dynamicContact/src/dynamicContact.vue

@@ -1,325 +1,330 @@
 <template>
-  <div ref="contact" v-if="apiRouter!=={} && model && model.listData.length>0"
-    style="border: 1px solid #ECEFF2;box-shadow: 0 2px 4px 0 rgba(0,0,0,0.06);border-radius: 6px;
+  <div ref="contact" id="contactWidth" v-if="apiRouter !== {} && model && model.listData.length > 0" style="border: 1px solid #ECEFF2;box-shadow: 0 2px 4px 0 rgba(0,0,0,0.06);border-radius: 6px;
     padding-bottom: 10px;padding-top: 10px;padding-left: 10px;display: flex;font-size: 12px;width:100%">
-    <div class="ct-so" style="width:auto;margin-right: 10px;flex:1">        
+    <div class="ct-so"
+      style="width:auto;margin-right: 10px;flex:1;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
       <el-popover ref="pop" placement="bottom-start" v-model="showDrop" trigger="click">
         <div>
           <ctSelectOptionVertical :model="model" @click="selectOption($event)"></ctSelectOptionVertical>
         </div>
         <div slot="reference" readonly="readonly" ref="ct-input"
-        style="font-weight: Bold;color:#333333 !important;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;display: flex;"
-        :style="{height:inputHeight + 'px','line-height':inputLineHeight + 'px',width:'auto'}"
-        @focus="focusHandle" @blur="blurHandle" @click="clickHandle" @input="inputHandler($event)" v-html="model.text"
-        @change="changeHandler($event)" :disabled="model.lock" :class="model.lock ? 'ct-is-disabled' : 'ct-input_inner'"></div>
+          style="font-weight: Bold;color:#333333 !important;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"
+          :style="{ height: inputHeight + 'px', 'line-height': inputLineHeight + 'px', }" @focus="focusHandle"
+          @blur="blurHandle" @click="clickHandle" @input="inputHandler($event)" v-html="model.text"
+          @change="changeHandler($event)" :disabled="model.lock"
+          :class="model.lock ? 'ct-is-disabled' : 'ct-input_inner'"></div>
       </el-popover>
-      <span class="el-input__suffix" @click="clickHandle" :class="[model.attrs.size?'el-input--'+model.attrs.size:'']">
+      <span class="el-input__suffix" @click="clickHandle"
+        :class="[model.attrs.size ? 'el-input--' + model.attrs.size : '']">
         <span class="el-input__suffix-inner">
-          <i class="el-select__caret el-input__icon el-icon-arrow-up" :class="{'is-reverse':showDrop}"></i>
+          <i class="el-select__caret el-input__icon el-icon-arrow-up" :class="{ 'is-reverse': showDrop }"></i>
         </span>
       </span>
     </div>
-    <div ref="routers" style="margin-right: 5px;display: flex;">
-      <component v-for="(router, index) in model.rowRouter" :key="index" :ref="'router'+router.id"
-      v-if="!router.rightField || model.listData[model.value][router.rightField] == 1" 
-      :is="router.is" :vmodel="router" :api="model.optionApi" @click="fieldClickHandler(router)">
+    <div ref="routers" style="margin-right: 5px;" id="routersWidth">
+      <component v-for="(router, index) in model.rowRouter" :key="index" :ref="'router' + router.id"
+        v-if="!router.rightField || model.listData[model.value][router.rightField] == 1" :is="router.is"
+        :vmodel="router" :api="model.optionApi" @click="fieldClickHandler(router)">
       </component>
     </div>
   </div>
 </template>
 
 <script>
-  import dynamicElement from '../../mixins/dynamicElement';
-  import selectOption from '../../selectOption/src/selectOption.vue';
-  import ctSelectOptionVertical from '../../selectOption/src/selectOptionVertical';
-  export default {
-    name: 'ct-contact',
-    mixins: [dynamicElement],
-    components: {
-      'ct-select-option': selectOption,
-      'ctSelectOptionVertical': ctSelectOptionVertical,
+import dynamicElement from '../../mixins/dynamicElement';
+import selectOption from '../../selectOption/src/selectOption.vue';
+import ctSelectOptionVertical from '../../selectOption/src/selectOptionVertical';
+export default {
+  name: 'ct-contact',
+  mixins: [dynamicElement],
+  components: {
+    'ct-select-option': selectOption,
+    'ctSelectOptionVertical': ctSelectOptionVertical,
+  },
+  props: {
+    vmodel: Object,
+    api: String,
+    apiParam: Object,
+    apiRouter: {
+      Object,
+      default: {}
     },
-    props: {
-      vmodel: Object,
-      api: String,
-      apiParam: Object,
-      apiRouter: {
-        Object,
-        default:{}
-      },
-    },
-    data() {
-      return {
-        focus: false,
-        showDrop: false,
-        inputHeight: 26,
-        inputLineHeight: 26,
-        inputLinewidth: 150,
+  },
+  data() {
+    return {
+      focus: false,
+      showDrop: false,
+      inputHeight: 26,
+      inputLineHeight: 26,
+      inputLinewidth: 150,
+    }
+  },
+  created() {
+    var self = this;
+    this.$nextTick(function () {
+      if (self.vmodel) {
+        self.load(self.vmodel);
       }
-    },
-    created() {
+      else if (typeof self.source !== 'undefined') {
+        self.loaderObj.Contact(self.source, null, self.load);
+      }
+      else if (typeof self.api !== 'undefined' && self.apiParam) {
+        self.loaderObj.Contact(self.api, self.apiParam, self.load);
+      }
+
+    });
+
+  },
+  activated() {
+    this.$nextTick(() => {
+      this.setCss();
+    })
+  },
+  methods: {
+    load(data) {
       var self = this;
-      this.$nextTick(function () {
-        if (self.vmodel) {
-          self.load(self.vmodel);
-        }
-        else if (typeof self.source !== 'undefined') {
-          self.loaderObj.Contact(self.source,null,self.load);
-        }
-        else if (typeof self.api !== 'undefined' && self.apiParam) {
-          self.loaderObj.Contact(self.api,self.apiParam, self.load);
-        }
-      });   
-    },
-    activated() {
+      this.model = data;
+      this.model.$vue = self;
+      if (this.model.listData.length > 0) {
+        this.model.text = data.listData[0][data.columns[0].id];
+        this.model.value = 0;
+      }
+      this.setCss();
       this.$nextTick(() => {
-        this.setCss();
-      })
-    },
-    methods: {
-      load(data) {
-        var self=this;
-        this.model = data;
-        this.model.$vue = self;
-        if(this.model.listData.length>0){
-          this.model.text=data.listData[0][data.columns[0].id];
-          this.model.value=0;
-        }
-        this.setCss();
-        this.$nextTick(() => {
-          window.addEventListener("resize", (ev) => {
-            self.setCss();
-          });
+        window.addEventListener("resize", (ev) => {
+          self.setCss();
         });
-      },
-      focusHandle: function () {
-        this.$refs['ct-input'].focus();
-        this.$set(this, 'focus', true);
-      },
-      blurHandle: function () {
-        this.$set(this, 'focus', false);
-      },
-      clickHandle: function () {
-        if (this.model.lock) {
-          return false;
-        }
-        this.$set(this, 'showDrop', !this.showDrop);
-        if (this.showDrop) {
-          this.getOptions();
-        }
-        this.focusHandle();
-      },
-      selectOption(value) {
-        if (this.model.value === value) {
-          this.$set(this, 'showDrop', false);
-          return;
-        }
-        else {
-          this.model.value = value;
-        }
-        this.soChange();
+      });
+
+    },
+
+    focusHandle: function () {
+      this.$refs['ct-input'].focus();
+      this.$set(this, 'focus', true);
+    },
+    blurHandle: function () {
+      this.$set(this, 'focus', false);
+    },
+    clickHandle: function () {
+      if (this.model.lock) {
+        return false;
+      }
+      this.$set(this, 'showDrop', !this.showDrop);
+      if (this.showDrop) {
+        this.getOptions();
+      }
+      this.focusHandle();
+    },
+    selectOption(value) {
+      if (this.model.value === value) {
         this.$set(this, 'showDrop', false);
-      },
-      getOptions: function () {
-        this.model.getOptions();
-      },
-      soChange: function () {
-        var self = this;
-        if (typeof this.model.child !== 'undefined') {
-          this.model.child.value = this.model.child.defaultValue || '';
-          this.model.child.text = this.model.child.defaultText || '';
-        }
-        var currentOption = this.model.options.find((value) => {
-          return self.model.value === value[self.model.optionAttrs.value];
+        return;
+      }
+      else {
+        this.model.value = value;
+      }
+      this.soChange();
+      this.$set(this, 'showDrop', false);
+    },
+    getOptions: function () {
+      this.model.getOptions();
+    },
+    soChange: function () {
+      var self = this;
+      if (typeof this.model.child !== 'undefined') {
+        this.model.child.value = this.model.child.defaultValue || '';
+        this.model.child.text = this.model.child.defaultText || '';
+      }
+      var currentOption = this.model.options.find((value) => {
+        return self.model.value === value[self.model.optionAttrs.value];
+      });
+      if (currentOption) {
+        this.model.text = currentOption[self.model.optionAttrs.label];
+      }
+      else {
+        this.model.text = '';
+      }
+      this.inputHandler(self.model.value);
+      this.changeHandler(self.model.value);
+      if (this.model.autoSearch) this.$emit('click');
+    },
+    fieldClickHandler(field) {
+      var self = this;
+      let submitData = {};
+      var router = this.model.buttons.find((v) => {
+        return v.id === field.id;
+      });
+      if (router == undefined && this.model.actionRouter) {
+        router = this.model.actionRouter.find((v) => {
+          return v.id === field.id;
         });
-        if (currentOption) {
-          this.model.text = currentOption[self.model.optionAttrs.label];
-        }
-        else {
-          this.model.text = '';
+      }
+      if (router == undefined && this.model.otherTradeActionRouter) {
+        if (field.id === this.model.otherTradeActionRouter.id) {
+          router = this.model.otherTradeActionRouter
         }
-        this.inputHandler(self.model.value);
-        this.changeHandler(self.model.value);
-        if(this.model.autoSearch) this.$emit('click');
-      },
-      fieldClickHandler(field) {
-        var self = this;
-        let submitData={};
-        var router = this.model.buttons.find((v) => {
+      }
+      if (router == undefined && this.model.operationRouters) {
+        router = this.model.operationRouters.find((v) => {
           return v.id === field.id;
         });
-        if(router==undefined && this.model.actionRouter){
-          router = this.model.actionRouter.find((v) => {
-            return v.id === field.id;
+        callBack = "loadOperation";
+      }
+
+      if (router) {
+        if (field.isSubmitDataFromSelf) {
+          router.submitFormField.forEach((v) => {
+            submitData[v] = field.list[field.listIndex].code;
           });
         }
-        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";
+        else {
+          router.submitFormField.forEach((v) => {
+            submitData[v] = self.model.listData[self.model.value][v];
+          });
         }
+      }
 
-        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.listData[self.model.value][v];
-            });
-          }
-        }
-        
-        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.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);
+      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.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);
                   }
-                }]
-              };
-              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: submitData,
-                    width: field.dialogWidth + 'px',
-                    height: field.dialogHeight + 'px'
-                  },
-                  on: {
-                    submit(ev) {
-                      self.model.updateFields(ev, () => {
-                        self.$refs.Fields.forEach((fd) => {
-                          fd.$forceUpdate();
-                        });
+                }
+              }]
+            };
+            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: submitData,
+                  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);
-                    }
+                    });
+                    self.$common.closeDialog(dialogOption.dialog);
                   }
-                }]
-              };
-              self.$common.openDialog(dialogOption);
-            }
-            else if (field.isFormPageInTab) {// 外部框架tab页打开
-              submitData = field.getActionPara(submitData).para;
-              self.$common.getDataDrivenOpts().handler.openTab(field.action, submitData, field.pageTitle);
-            }
-            else if (field.isSearchPageInTab) {// 外部框架tab页打开
-              submitData = field.getActionPara(submitData).para;
-              self.$common.getDataDrivenOpts().handler.openTabSearch(field, submitData);
-            }
-            else if (field.isBrowserNewTab) {// 浏览器打开
-              submitData = field.getActionPara(submitData).para;
-              let query = self.$common.objectToQueryStr(submitData);
-              window.open(field.action + query, "_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) => {
-                self.model.doAction(data,field);
-                if(callBack){
-                  callBack();
-                }
-                if(field.actionType===10){
-                  self.loaderObj.Contact(data,null,self.load);
-                }
-                else if(field.actionType===19){
-                  self.$refs['router'+field.id][0].callTelClick(data);
                 }
-              })
-            }
+              }]
+            };
+            self.$common.openDialog(dialogOption);
           }
-          //执行客户端脚本
-          else {
+          else if (field.isFormPageInTab) {// 外部框架tab页打开
             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);
+            self.$common.getDataDrivenOpts().handler.openTab(field.action, submitData, field.pageTitle);
+          }
+          else if (field.isSearchPageInTab) {// 外部框架tab页打开
+            submitData = field.getActionPara(submitData).para;
+            self.$common.getDataDrivenOpts().handler.openTabSearch(field, submitData);
+          }
+          else if (field.isBrowserNewTab) {// 浏览器打开
+            submitData = field.getActionPara(submitData).para;
+            let query = self.$common.objectToQueryStr(submitData);
+            window.open(field.action + query, "_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) => {
+              self.model.doAction(data, field);
+              if (callBack) {
+                callBack();
+              }
+              if (field.actionType === 10) {
+                self.loaderObj.Contact(data, null, self.load);
+              }
+              else if (field.actionType === 19) {
+                self.$refs['router' + field.id][0].callTelClick(data);
+              }
+            })
           }
         }
-
-        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);
+          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);
         }
-      },
-      setCss() {
-        this.$nextTick(() => {
-          if (this.$refs.contact) {
-            var w1 = this.$refs.contact.clientWidth | 0;
-            var w2 = this.$refs.routers.clientWidth | 0;
-            this.inputLinewidth=w1-w2-80;
-          }
+      }
+
+      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);
+      }
+    },
+    setCss() {
+      this.$nextTick(() => {
+        if (this.$refs.contact) {
+          var w1 = this.$refs.contact.clientWidth | 0;
+          var w2 = this.$refs.routers.clientWidth | 0;
+          this.inputLinewidth = w1 - w2 - 80;
+        }
+      });
+    },
   }
+}
 </script>
 <style lang="scss" scoped>
-
 </style>