centaline-data-driven 1.1.54 → 1.1.55

package/src/centaline/dynamicSearchList/src/dynamicSearchScreen.vue

@@ -1,206 +1,206 @@
-<template>
-  <div class="st-serach-screen">
-    <div v-bind="model.attrs" style="width:100%" v-if="!isLoading">
-      <div class="ct-ptb5" v-if="showScreen">
-        <template v-for="(col, index) in model.screen" v-if="col.show !== false">
-          <br v-if="col.is === 'ct-linefeed'" />
-          <component v-else class="list-field" v-bind="col.listBind" :is="col.is" :vmodel="col" :api="model.optionApi" @click="clickHandler(col)"></component>
-        </template>
-        <component v-for="(col, index) in model.btnScreen" :key="index" :is="col.is" :vmodel="col" :api="model.optionApi" @click="clickHandler(col)"></component>
-      </div>
-      <!--<el-row>
-        <el-col v-for="(col, index) in model.screen" :key="index" :span="col.colspan" style="padding:10px" v-if="col.show !== false">
-          <component :is="col.is" :vmodel="col" :api="model.optionApi" @click="clickHandler(col)"></component>
-        </el-col>-->
-        <!--搜索后面跟的按钮,直接挨个排序-->
-        <!--<el-col style="padding:5px" v-if="model.btnScreen && model.btnScreen[0]" :span="model.btnScreen[0].colspan">
-          <component v-for="(col, index) in model.btnScreen" :key="index" :is="col.is" :vmodel="col" :api="model.optionApi" @click="clickHandler(col)"></component>
-        </el-col>
-      </el-row>-->
-      <el-popover class="SeachScreenPop max-seachpopper" placement="top" transition="el-zoom-in-top" v-model="highScreen" trigger="click" visible-arrow="false">
-        <div style="width:100%">
-          <!--<el-row v-if="highScreenRow.length > 0">
-            <el-col v-for="(col, index) in highScreenRow" :key="index" :span="col.colspan" style="padding:10px" v-if="col.show !== false">
-              <component :is="col.is" :vmodel="col" :api="model.optionApi" :popShow="highScreen" @click="clickHandler(col)"></component>
-            </el-col>
-          </el-row>-->
-          <template v-for="(col, index) in highScreenRow" v-if="col.show !== false">
-            <br v-if="col.is === 'ct-linefeed'" />
-            <component v-else class="list-field" v-bind="col.listBind" :is="col.is" :vmodel="col" :api="model.optionApi" @click="clickHandler(col)"></component>
-          </template>
-        </div>
-      </el-popover>
-    </div>
-    <div v-if="isLoading" v-loading="isLoading" style="min-height:100px">
-
-    </div>
-  </div>
-</template>
-<script>
-  import dynamicElement from '../../mixins/dynamicElement';
-  export default {
-    name: 'ct-searchscreen',
-    mixins: [dynamicElement],
-    props: {
-      api: String,
-      vmodel: Object,
-      categoryLoaded:{
-        type:Boolean,
-        default:true
-      },
-      screenPara: {
-        type: Object,
-        default: () => { }
-      },
-    },
-    data() {
-      return {
-        isLoading: true,
-        screenRow: [],
-        highScreenRow: [],
-        highScreen: false,
-        showScreen: true
-      }
-    },
-    mounted() {
-      var self = this;
-      if(self.categoryLoaded){
-        this.$nextTick(function () {
-          if (typeof self.api !== 'undefined') {
-            self.loaderObj.SearchScreen(self.api, self.load, self.screenPara);
-          }
-          if (typeof self.source !== 'undefined') {
-            self.load(self.loaderObj.SearchScreen(self.source));
-          }
-          if (self.vmodel) {
-            self.load(self.vmodel);
-          }
-        });
-      }
-    },
-    methods: {
-      clickHandler(model) {
-        switch (model.action) {
-          case 'showHigh':
-            this.$set(this, 'highScreen', !this.highScreen);
-            //高级搜索需要切换icon样式
-            if(model.icon==='max-open')
-            {
-              model.icon='max-fold'
-            }else
-            {
-              model.icon='max-open'
-            }
-            break;
-          case 'search':
-            this.$emit('search', this.model);
-            this.$set(this, 'highScreen', false);
-            break;
-          case 'reset':
-            this.model.reset();
-            this.$emit('search', this.model);
-            break;
-          default:
-            break;
-        }
-
-      },
-      loadScreen() {
-        var self = this;
-        var hasParent = self.model.screen.filter((v) => {
-          return typeof v.parentName !== 'undefined';
-        });
-        hasParent.forEach((v, index) => {
-          var parent = self.model.screen.find((v1) => {
-            return v1.id === v.parentName;
-          });
-          if (parent) {
-            parent.child = v;
-            v.parent = parent;
-          }
-        });
-      },
-      loadHighScreen() {
-        var self = this;
-        self.highScreenRow = self.model.highScreen;
-
-        var hasParent = self.model.highScreen.filter((v) => {
-          return typeof v.parentName !== 'undefined';
-        });
-        hasParent.forEach((v, index) => {
-          var parent = self.model.highScreen.find((v1) => {
-            return v1.id === v.parentName;
-          });
-          if (parent) {
-            parent.child = v;
-            v.parent = parent;
-          }
-        });
-      },
-      //无任何筛选条件时，不显示该div
-      setScreenShow() {
-        let showField = this.model.screen.find((v) => {
-          return v.show !== false;
-        });
-        if (!showField) {
-          showField = this.model.btnScreen.find((v) => {
-            return v.show !== false;
-          });
-          if (!showField) {
-            this.showScreen = false;
-          }
-        }
-      },
-      load(data) {
-        var self = this;
-        self.model = data;
-        self.model.$vue = self;
-        self.loadScreen();
-        self.loadHighScreen();
-        self.setScreenShow();
-        self.isLoading = false;
-        self.$emit('loaded', self.model.defaultSearch);
-        self.$emit('showTitle');
-      },
-      searchComplate() {
-        var self = this;
-        this.$nextTick(function () {
-          if (typeof self.api !== 'undefined') {
-            self.loaderObj.SearchScreen(self.api, self.load, self.screenPara);
-          }
-          if (typeof self.source !== 'undefined') {
-            self.load(self.loaderObj.SearchScreen(self.source));
-          }
-          if (self.vmodel) {
-            self.load(self.vmodel);
-          }
-        });
-      },
-    }
-  }
-</script>
-<style>
-  body {
-    margin:0px;
-    padding:0px;
-  }
-  .SeachScreenPop .el-popper {
-    width: 100%;
-    padding: 5px 0px 5px 0px;
-    border: 0px;
-    box-shadow: none;
-    -webkit-box-shadow: none;
-    border-radius: 0px;
-    background-color: #fafafa;
-    z-index:1990;
-  }
-    .SeachScreenPop .el-popper .el-time-panel {
-      -webkit-box-shadow: none;
-      box-shadow: none;
-    }
-
-  .list-field {
-    padding: 5px;
-  }
-
-</style>
+<template>
+  <div class="st-serach-screen">
+    <div v-bind="model.attrs" style="width:100%" v-if="!isLoading">
+      <div class="ct-ptb5" v-if="showScreen">
+        <template v-for="(col, index) in model.screen" v-if="col.show !== false">
+          <br v-if="col.is === 'ct-linefeed'" />
+          <component v-else class="list-field" v-bind="col.listBind" :is="col.is" :vmodel="col" :api="model.optionApi" @click="clickHandler(col)"></component>
+        </template>
+        <component v-for="(col, index) in model.btnScreen" :key="index" :is="col.is" :vmodel="col" :api="model.optionApi" @click="clickHandler(col)"></component>
+      </div>
+      <!--<el-row>
+        <el-col v-for="(col, index) in model.screen" :key="index" :span="col.colspan" style="padding:10px" v-if="col.show !== false">
+          <component :is="col.is" :vmodel="col" :api="model.optionApi" @click="clickHandler(col)"></component>
+        </el-col>-->
+        <!--搜索后面跟的按钮,直接挨个排序-->
+        <!--<el-col style="padding:5px" v-if="model.btnScreen && model.btnScreen[0]" :span="model.btnScreen[0].colspan">
+          <component v-for="(col, index) in model.btnScreen" :key="index" :is="col.is" :vmodel="col" :api="model.optionApi" @click="clickHandler(col)"></component>
+        </el-col>
+      </el-row>-->
+      <el-popover class="SeachScreenPop max-seachpopper" placement="top" transition="el-zoom-in-top" v-model="highScreen" trigger="click" visible-arrow="false">
+        <div style="width:100%">
+          <!--<el-row v-if="highScreenRow.length > 0">
+            <el-col v-for="(col, index) in highScreenRow" :key="index" :span="col.colspan" style="padding:10px" v-if="col.show !== false">
+              <component :is="col.is" :vmodel="col" :api="model.optionApi" :popShow="highScreen" @click="clickHandler(col)"></component>
+            </el-col>
+          </el-row>-->
+          <template v-for="(col, index) in highScreenRow" v-if="col.show !== false">
+            <br v-if="col.is === 'ct-linefeed'" />
+            <component v-else class="list-field" v-bind="col.listBind" :is="col.is" :vmodel="col" :api="model.optionApi" @click="clickHandler(col)"></component>
+          </template>
+        </div>
+      </el-popover>
+    </div>
+    <div v-if="isLoading" v-loading="isLoading" style="min-height:100px">
+
+    </div>
+  </div>
+</template>
+<script>
+  import dynamicElement from '../../mixins/dynamicElement';
+  export default {
+    name: 'ct-searchscreen',
+    mixins: [dynamicElement],
+    props: {
+      api: String,
+      vmodel: Object,
+      categoryLoaded:{
+        type:Boolean,
+        default:true
+      },
+      screenPara: {
+        type: Object,
+        default: () => { }
+      },
+    },
+    data() {
+      return {
+        isLoading: true,
+        screenRow: [],
+        highScreenRow: [],
+        highScreen: false,
+        showScreen: true
+      }
+    },
+    mounted() {
+      var self = this;
+      if(self.categoryLoaded){
+        this.$nextTick(function () {
+          if (typeof self.api !== 'undefined') {
+            self.loaderObj.SearchScreen(self.api, self.load, self.screenPara);
+          }
+          if (typeof self.source !== 'undefined') {
+            self.load(self.loaderObj.SearchScreen(self.source));
+          }
+          if (self.vmodel) {
+            self.load(self.vmodel);
+          }
+        });
+      }
+    },
+    methods: {
+      clickHandler(model) {
+        switch (model.action) {
+          case 'showHigh':
+            this.$set(this, 'highScreen', !this.highScreen);
+            //高级搜索需要切换icon样式
+            if(model.icon==='max-open')
+            {
+              model.icon='max-fold'
+            }else
+            {
+              model.icon='max-open'
+            }
+            break;
+          case 'search':
+            this.$emit('search', this.model);
+            this.$set(this, 'highScreen', false);
+            break;
+          case 'reset':
+            this.model.reset();
+            this.$emit('search', this.model);
+            break;
+          default:
+            break;
+        }
+
+      },
+      loadScreen() {
+        var self = this;
+        var hasParent = self.model.screen.filter((v) => {
+          return typeof v.parentName !== 'undefined';
+        });
+        hasParent.forEach((v, index) => {
+          var parent = self.model.screen.find((v1) => {
+            return v1.id === v.parentName;
+          });
+          if (parent) {
+            parent.child = v;
+            v.parent = parent;
+          }
+        });
+      },
+      loadHighScreen() {
+        var self = this;
+        self.highScreenRow = self.model.highScreen;
+
+        var hasParent = self.model.highScreen.filter((v) => {
+          return typeof v.parentName !== 'undefined';
+        });
+        hasParent.forEach((v, index) => {
+          var parent = self.model.highScreen.find((v1) => {
+            return v1.id === v.parentName;
+          });
+          if (parent) {
+            parent.child = v;
+            v.parent = parent;
+          }
+        });
+      },
+      //无任何筛选条件时，不显示该div
+      setScreenShow() {
+        let showField = this.model.screen.find((v) => {
+          return v.show !== false;
+        });
+        if (!showField) {
+          showField = this.model.btnScreen.find((v) => {
+            return v.show !== false;
+          });
+          if (!showField) {
+            this.showScreen = false;
+          }
+        }
+      },
+      load(data) {
+        var self = this;
+        self.model = data;
+        self.model.$vue = self;
+        self.loadScreen();
+        self.loadHighScreen();
+        self.setScreenShow();
+        self.isLoading = false;
+        self.$emit('loaded', self.model.defaultSearch);
+        self.$emit('showTitle');
+      },
+      searchComplate() {
+        var self = this;
+        this.$nextTick(function () {
+          if (typeof self.api !== 'undefined') {
+            self.loaderObj.SearchScreen(self.api, self.load, self.screenPara);
+          }
+          if (typeof self.source !== 'undefined') {
+            self.load(self.loaderObj.SearchScreen(self.source));
+          }
+          if (self.vmodel) {
+            self.load(self.vmodel);
+          }
+        });
+      },
+    }
+  }
+</script>
+<style>
+  body {
+    margin:0px;
+    padding:0px;
+  }
+  .SeachScreenPop .el-popper {
+    width: 100%;
+    padding: 5px 0px 5px 0px;
+    border: 0px;
+    box-shadow: none;
+    -webkit-box-shadow: none;
+    border-radius: 0px;
+    background-color: #fafafa;
+    z-index:1990;
+  }
+    .SeachScreenPop .el-popper .el-time-panel {
+      -webkit-box-shadow: none;
+      box-shadow: none;
+    }
+
+  .list-field {
+    padding: 5px;
+  }
+
+</style>