hd-idevvue3 3.0.3 → 3.0.4

package/src/hdcom/HdComQueryDetail.vue

@@ -4,17 +4,38 @@
       <el-table :data="list" row-key="property">
         <el-table-column align="center" label="条件" width="120px" noQuery>
           <template slot-scope="scope">
-            <el-select v-model="scope.row.selCol" clearable :placeholder="$t('请选择')" style="width:100%" value-key="$attrs.prop"
-                       @change="(v)=>change(v,scope.row)">
-              <el-option v-for="one in allColumn" :key="one.$attrs.prop" :label="one.$attrs.label" :value="one">
+            <el-select
+              v-model="scope.row.selCol"
+              clearable
+              :placeholder="$t('请选择')"
+              style="width: 100%"
+              value-key="$attrs.prop"
+              @change="(v) => change(v, scope.row)"
+            >
+              <el-option
+                v-for="one in allColumn"
+                :key="one.$attrs.prop"
+                :label="one.$attrs.label"
+                :value="one"
+              >
               </el-option>
             </el-select>
           </template>
         </el-table-column>
-        <el-table-column align="center" label="关系" prop="width" width="80px" noQuery>
+        <el-table-column
+          align="center"
+          label="关系"
+          prop="width"
+          width="80px"
+          noQuery
+        >
           <template slot-scope="scope">
-            <el-select v-model="scope.row.rel" :placeholder="$t('请选择')" style="width:100%">
-              <el-option label="=" value="="></el-option>
+            <el-select
+              v-model="scope.row.rel"
+              :placeholder="$t('请选择')"
+              style="width: 100%"
+            >
+              <el-option :label="'='" :value="'='"></el-option>
               <el-option :label="$t('包含')" value="%like%"></el-option>
               <el-option label=">=" value=">="></el-option>
               <el-option label="<=" value="<="></el-option>
@@ -25,137 +46,160 @@
         </el-table-column>
         <el-table-column align="center" label="值" noQuery width="160px">
           <template slot-scope="scope">
-            <component :is="scope.row.selCol.input?scope.row.selCol.input:'ElInput'" v-model="scope.row.value"
-                       v-bind="scope.row.selCol.inputProp" :idVal.sync="scope.row.value"
-                       :txtVal.sync="scope.row.showName"
-                       style="width: 100%;"></component>
+            <component
+              :is="scope.row.selCol.input ? scope.row.selCol.input : 'ElInput'"
+              v-model="scope.row.value"
+              v-bind="scope.row.selCol.inputProp"
+              :idVal.sync="scope.row.value"
+              :txtVal.sync="scope.row.showName"
+              style="width: 100%"
+            ></component>
           </template>
         </el-table-column>
         <el-table-column width="100px" align="center" label="操作">
           <template slot-scope="scope">
-            <hd-btn icon="el-icon-circle-plus-outline" hint="复制" @click.stop="doCopy(scope.row,scope.index)"></hd-btn>
-            <hd-btn icon="el-icon-delete" hint="删除" @click.stop="doRemove(scope.row)"></hd-btn>
+            <hd-btn
+              icon="el-icon-circle-plus-outline"
+              hint="复制"
+              @click.stop="doCopy(scope.row, scope.index)"
+            ></hd-btn>
+            <hd-btn
+              icon="el-icon-delete"
+              hint="删除"
+              @click.stop="doRemove(scope.row)"
+            ></hd-btn>
           </template>
         </el-table-column>
       </el-table>
-
     </el-main>
   </el-container>
 </template>
 
 <script>
-
-  export default {
-    data() {
-      return {
-        // showName: '',//自定义下拉会用到
-        // selCol: {},
-        // queryRel: {key: '', rel: '=', value: '', type: ''},//查询的关系 prop='结果'
-      }
-    },
-    inheritAttrs: false,
-    props: {
-      allColumn: Array,
-      list: Array,
-      title: String
+export default {
+  data() {
+    return {
+      // showName: '',//自定义下拉会用到
+      // selCol: {},
+      // queryRel: {key: '', rel: '=', value: '', type: ''},//查询的关系 prop='结果'
+    }
+  },
+  inheritAttrs: false,
+  props: {
+    allColumn: Array,
+    list: Array,
+    title: String,
+  },
+  mounted() {},
+  methods: {
+    doCopy(row, index) {
+      this.list.splice(index, 0, Object.assign({}, row))
     },
-    mounted() {
-
+    doRemove(index) {
+      this.list.splice(index, 1)
     },
-    methods: {
-      doCopy(row, index) {
-        this.list.splice(index, 0, Object.assign({}, row))
-      },
-      doRemove(index) {
-        this.list.splice(index, 1)
-      },
-      change(val, row) {
-        if (!val) { // clear触发
-          row.key = ''
-          // this.queryRel.value = ''
-          return false
-        }
-        row.selCol = val
-        row.key = val.$attrs.prop
-        // this.queryRel.value = ''//切换时先清
-        if (!row.selCol.input) {
-          return false
-        }
+    change(val, row) {
+      if (!val) {
+        // clear触发
+        row.key = ''
+        // this.queryRel.value = ''
+        return false
+      }
+      row.selCol = val
+      row.key = val.$attrs.prop
+      // this.queryRel.value = ''//切换时先清
+      if (!row.selCol.input) {
+        return false
+      }
 
-        row.type = ''// 默认字符串
-        if (typeof val.input != 'string') { // 自定义组件会传入function
-          return false
-        }
-        if (val.input.indexOf('date') >= 0 || val.input.indexOf('Date') >= 0) { // 日期格式
-          if (val.inputProp.type == 'date') {
-            row.type = 'date'
-          }
-          if (val.inputProp.type == 'datetime') {
-            row.type = 'datetime'
-          }
-          // row = val
+      row.type = '' // 默认字符串
+      if (typeof val.input != 'string') {
+        // 自定义组件会传入function
+        return false
+      }
+      if (val.input.indexOf('date') >= 0 || val.input.indexOf('Date') >= 0) {
+        // 日期格式
+        if (val.inputProp.type == 'date') {
+          row.type = 'date'
         }
-        if (val.input.indexOf('num') >= 0 || val.input.indexOf('Num') >= 0) { // 数字格式
-          row.type = 'number'
+        if (val.inputProp.type == 'datetime') {
+          row.type = 'datetime'
         }
+        // row = val
       }
-
-    }
-  }
-</script>
-<style rel="stylesheet/scss" lang="scss">
-  .gridShow {
-    .el-table {
-      height: 100%;
-      width: 100%;
-      .el-table__body-wrapper {
-        width: 100%;
-      }
-      .el-table__header-wrapper th { //列表标题
-        background-color: #f6f6f6;
+      if (val.input.indexOf('num') >= 0 || val.input.indexOf('Num') >= 0) {
+        // 数字格式
+        row.type = 'number'
       }
+    },
+  },
+}
+</script>
 
-      .el-table__fixed-header-wrapper th { //固定的列表标题
-        background-color: #f6f6f6;
-      }
+<style lang="scss" rel="stylesheet/scss">
+.gridShow {
+  .el-table {
+    height: 100%;
+    width: 100%;
+    .el-table__body-wrapper {
+      width: 100%;
+    }
+    .el-table__header-wrapper th {
+      //列表标题
+      background-color: #f6f6f6;
+    }
 
-      td, th { //列表标题及内容
-        padding: 1px 0;
-      }
-      .cell, .el-table th div, .el-table--border th:first-child .cell, .el-table--border td:first-child .cell { //列表的margin
-        padding-left: 5px !important;
-        padding-right: 1px !important;
-        padding-top: 1.5px !important;
-        padding-bottom: 1.5px !important;
-      }
-      .el-table__empty-block {
-        position: static;
-        text-align: center;
-        width: 100%;
-        height: 80%
-      }
-      .el-table__body { //列表下面加了空白
-        margin-bottom: 10px;
-      }
-      .el-table__body-wrapper {
-        height: 100%;
-        overflow-y: auto;
-      }
-      .el-input__inner {
-        height: 27px;
-        margin-bottom: 0px;
-      }
-      .el-input, .el-form-item__content, .el-form-item__label, .el-input__icon {
-        line-height: 30px;
-      }
-      .el-input__inner {
-        padding: 5px;
-      }
-      .el-input--prefix .el-input__inner { //日期的有logo不一样
-        padding-left: 30px;
-      }
+    .el-table__fixed-header-wrapper th {
+      //固定的列表标题
+      background-color: #f6f6f6;
+    }
 
+    td,
+    th {
+      //列表标题及内容
+      padding: 1px 0;
+    }
+    .cell,
+    .el-table th div,
+    .el-table--border th:first-child .cell,
+    .el-table--border td:first-child .cell {
+      //列表的margin
+      padding-left: 5px !important;
+      padding-right: 1px !important;
+      padding-top: 1.5px !important;
+      padding-bottom: 1.5px !important;
+    }
+    .el-table__empty-block {
+      position: static;
+      text-align: center;
+      width: 100%;
+      height: 80%;
+    }
+    .el-table__body {
+      //列表下面加了空白
+      margin-bottom: 10px;
+    }
+    .el-table__body-wrapper {
+      height: 100%;
+      overflow-y: auto;
+    }
+    .el-input__inner {
+      height: 27px;
+      margin-bottom: 0px;
+    }
+    .el-input,
+    .el-form-item__content,
+    .el-form-item__label,
+    .el-input__icon {
+      line-height: 30px;
+    }
+    .el-input__inner {
+      padding: 5px;
+    }
+    .el-input--prefix .el-input__inner {
+      //日期的有logo不一样
+      padding-left: 30px;
     }
   }
-
+}
 </style>

package/src/hdcom/HdComSortDetail.vue

@@ -2,154 +2,160 @@
   <el-container>
     <el-main class="gridShow" :title="title">
       <el-tag
-              v-for="tag in list"
-              :key="tag.text"
-              closable
-              :disable-transitions="false"
-              @close="handleClose(tag)">
-        {{tag.text}}
+        v-for="tag in list"
+        :key="tag.text"
+        closable
+        :disable-transitions="false"
+        @close="handleClose(tag)"
+      >
+        {{ tag.text }}
       </el-tag>
-      <el-cascader v-model="inputValue"
-                   :placeholder="$t('请选择')"
-                   class="input-new-tag"
-                   ref="saveTagInput"
-                   v-if="inputVisible"
-                   @keyup.enter.native="handleInputConfirm"
-                   size="small"
-                   @change="(v)=>change(v)"
-                   :options="sortOption"
-                   :props="{ expandTrigger: 'hover' }">
-
+      <el-cascader
+        v-model="inputValue"
+        :placeholder="$t('请选择')"
+        class="input-new-tag"
+        ref="saveTagInput"
+        v-if="inputVisible"
+        @keyup.enter.native="handleInputConfirm"
+        size="small"
+        @change="(v) => change(v)"
+        :options="sortOption"
+        :props="{ expandTrigger: 'hover' }"
+      >
       </el-cascader>
-      <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
+      <el-button v-else class="button-new-tag" size="small" @click="showInput"
+        >+ New Tag</el-button
+      >
     </el-main>
   </el-container>
 </template>
 
 <script>
-
-  export default {
-    name: "HdComSortDetail",
-    data() {
-      return {
-        inputVisible: false,
-        inputValue: ''
-      }
-    },
-    inheritAttrs: false,
-    props: {
-      allColumn: Array,
-      list: Array,
-      title: String
+export default {
+  name: 'HdComSortDetail',
+  data() {
+    return {
+      inputVisible: false,
+      inputValue: '',
+    }
+  },
+  inheritAttrs: false,
+  props: {
+    allColumn: Array,
+    list: Array,
+    title: String,
+  },
+  mounted() {},
+  methods: {
+    handleClose(tag) {
+      this.list.splice(this.list.indexOf(tag), 1)
     },
-    mounted() {
 
+    showInput() {
+      this.inputVisible = true
+      this.$nextTick((_) => {
+        this.$refs.saveTagInput.$refs.input.focus()
+      })
     },
-    methods: {
-      handleClose(tag) {
-        this.list.splice(this.list.indexOf(tag), 1);
-      },
 
-      showInput() {
-        this.inputVisible = true;
-        this.$nextTick(_ => {
-          this.$refs.saveTagInput.$refs.input.focus();
-        });
-      },
-
-      change(val) {
-        console.log('inputValue', val)
-        let inputValue = this.inputValue;
-        if (inputValue) {
-          let item = this.genItem(inputValue);
-          this.list.forEach((v, i)=>{
-            if(v.sortProperty == item.sortProperty) {
-              this.list.splice(i, 1)
-            }
-          })
-          this.list.push(item);
-        }
-        console.log('list', this.list)
-        this.inputVisible = false;
-        this.inputValue = '';
-        // if (!val) { // clear触发
-        //   row.key = ''
-        //   // this.queryRel.value = ''
-        //   return false
-        // }
-        // row.selCol = val
-        // row.key = val.$attrs.prop
-        // // this.queryRel.value = ''//切换时先清
-        // if (!row.selCol.input) {
-        //   return false
-        // }
-        //
-        // row.type = ''// 默认字符串
-        // if (typeof val.input != 'string') { // 自定义组件会传入function
-        //   return false
-        // }
-        // if (val.input.indexOf('date') >= 0 || val.input.indexOf('Date') >= 0) { // 日期格式
-        //   if (val.inputProp.type == 'date') {
-        //     row.type = 'date'
-        //   }
-        //   if (val.inputProp.type == 'datetime') {
-        //     row.type = 'datetime'
-        //   }
-        //   // row = val
-        // }
-        // if (val.input.indexOf('num') >= 0 || val.input.indexOf('Num') >= 0) { // 数字格式
-        //   row.type = 'number'
-        // }
-      },
-      genItem(val) {
-        return {
-          sortProperty: val[0],
-          sortType: val[1],
-          alias: 'a',
-          text: this.allColumn.find(v => v.$attrs.prop == val[0]).$attrs.label + '/' + (val[1] == 'ASC' ? '升序' : '降序')
-        }
+    change(val) {
+      console.log('inputValue', val)
+      let inputValue = this.inputValue
+      if (inputValue) {
+        let item = this.genItem(inputValue)
+        this.list.forEach((v, i) => {
+          if (v.sortProperty == item.sortProperty) {
+            this.list.splice(i, 1)
+          }
+        })
+        this.list.push(item)
       }
-
+      console.log('list', this.list)
+      this.inputVisible = false
+      this.inputValue = ''
+      // if (!val) { // clear触发
+      //   row.key = ''
+      //   // this.queryRel.value = ''
+      //   return false
+      // }
+      // row.selCol = val
+      // row.key = val.$attrs.prop
+      // // this.queryRel.value = ''//切换时先清
+      // if (!row.selCol.input) {
+      //   return false
+      // }
+      //
+      // row.type = ''// 默认字符串
+      // if (typeof val.input != 'string') { // 自定义组件会传入function
+      //   return false
+      // }
+      // if (val.input.indexOf('date') >= 0 || val.input.indexOf('Date') >= 0) { // 日期格式
+      //   if (val.inputProp.type == 'date') {
+      //     row.type = 'date'
+      //   }
+      //   if (val.inputProp.type == 'datetime') {
+      //     row.type = 'datetime'
+      //   }
+      //   // row = val
+      // }
+      // if (val.input.indexOf('num') >= 0 || val.input.indexOf('Num') >= 0) { // 数字格式
+      //   row.type = 'number'
+      // }
     },
-    computed: {
-      sortOption() {
-        let rtn = this.allColumn.map(v => {
-          return {
-            value: v.$attrs.prop,
-            label: v.$attrs.label,
-            children: [{
+    genItem(val) {
+      return {
+        sortProperty: val[0],
+        sortType: val[1],
+        alias: 'a',
+        text:
+          this.allColumn.find((v) => v.$attrs.prop == val[0]).$attrs.label +
+          '/' +
+          (val[1] == 'ASC' ? '升序' : '降序'),
+      }
+    },
+  },
+  computed: {
+    sortOption() {
+      let rtn = this.allColumn.map((v) => {
+        return {
+          value: v.$attrs.prop,
+          label: v.$attrs.label,
+          children: [
+            {
               value: 'ASC',
-              label: '升序'
-            }, {
+              label: '升序',
+            },
+            {
               value: 'DESC',
-              label: '降序'
-            }]
-          }
-        })
-        return rtn
-      }
-    }
-  }
+              label: '降序',
+            },
+          ],
+        }
+      })
+      return rtn
+    },
+  },
+}
 </script>
-<style rel="stylesheet/scss" lang="scss">
-  .gridShow {
-    .el-tag + .el-tag {
-      margin-left: 10px;
-    }
 
-    .button-new-tag {
-      margin-left: 10px;
-      height: 32px;
-      line-height: 30px;
-      padding-top: 0;
-      padding-bottom: 0;
-    }
+<style lang="scss" rel="stylesheet/scss">
+.gridShow {
+  .el-tag + .el-tag {
+    margin-left: 10px;
+  }
 
-    .input-new-tag {
-      width: 90px;
-      margin-left: 10px;
-      vertical-align: bottom;
-    }
+  .button-new-tag {
+    margin-left: 10px;
+    height: 32px;
+    line-height: 30px;
+    padding-top: 0;
+    padding-bottom: 0;
   }
 
+  .input-new-tag {
+    width: 90px;
+    margin-left: 10px;
+    vertical-align: bottom;
+  }
+}
 </style>