hd-idevvue3 3.0.0 → 3.0.2

package/src/hdcom/HdComQuery.vue

@@ -0,0 +1,273 @@
+<template>
+  <el-dialog title="高级查询" :visible.sync="visible" width='80%' append-to-body top="2vh">
+    <div class="filter-container" style="padding: 0">
+      <el-select v-model="selQueryId" filterable default-first-option placeholder="请选择方案" @change="change">
+        <el-option v-for="item in proLs" :key="item.queryId" :label="item.name" :value="item.queryId">
+        </el-option>
+      </el-select>
+
+      <el-button class="filter-item" @click="remove" type="primary" :hotKeyRange="$options.name">{{$t('删除方案')}}
+      </el-button>
+      <el-button class="filter-item" @click="proSaveVisible=true" type="primary" :hotKeyRange="$options.name">
+        {{$t('方案保存')}}
+      </el-button>
+      <el-button class="filter-item" @click="add" type="primary" :hotKeyRange="$options.name">{{$t('新增条件')}}
+      </el-button>
+    </div>
+    <div style="height: 360px">
+      <el-row>
+        <el-col :span="11">
+          <div style="padding-top: 0px;height: 250px">
+            <HdComQueryDetail :allColumn="allColumn" ref="LQuery" :list="leftLs" title="组一"></HdComQueryDetail>
+          </div>
+        </el-col>
+        <el-col :span="2">
+          <div style="width: 100%;position: relative;top:50px;text-align: center">{{$t('或者')}}</div>
+        </el-col>
+        <el-col :span="11">
+          <div style="padding-top: 0px;height: 250px">
+            <HdComQueryDetail :allColumn="allColumn" ref="RQuery" :list="rightLs" title="组二"></HdComQueryDetail>
+          </div>
+        </el-col>
+      </el-row>
+
+      <el-row>
+        <div style="padding-top: 0px;height: 100px">
+          <HdComSortDetail :allColumn="allColumn" ref="RQuery" :list="sortLs" title="排序"></HdComSortDetail>
+        </div>
+      </el-row>
+    </div>
+    <!--    <el-container style="height: 260px">
+          <el-main>
+            <el-container>
+              <el-aside width="45%" title="组1" :arrowShow="false" style="padding-top: 0px">
+                <HdComQueryDetail :allColumn="allColumn" ref="LQuery" :list="leftLs"></HdComQueryDetail>
+              </el-aside>
+              <ex-aside width="5%" :arrowShow="false">
+                <div style="width: 100%;position: relative;top:50px;text-align: center">{{$t('或者')}}</div>
+              </ex-aside>
+              <el-aside width="45%" title="组2" :arrowShow="false" style="padding-top: 0px">
+                <HdComQueryDetail :allColumn="allColumn" ref="RQuery" :list="rightLs"></HdComQueryDetail>
+              </el-aside>
+            </el-container>
+          </el-main>
+          <el-footer :arrowShow="false" height="100px" title="排序">
+          </el-footer>
+        </el-container>-->
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="doCloseAndKeep()">{{$t('关闭') + '(' + $t('保留条件') + ')'}}</el-button>
+      <el-button @click="doCloseAndClear">{{$t('关闭')}}</el-button>
+      <el-button @click="doQueryRs" type="primary" :hotKeyRange="$options.name">{{$t('查询')}}</el-button>
+    </div>
+    <el-dialog title="方案保存" :visible.sync="proSaveVisible" width='30%' append-to-body top="2vh">
+      <el-row>
+        <el-col :span="20">
+          <el-input v-model="proName"></el-input>
+        </el-col>
+        <el-col :span="4">
+          <el-button @click="doSave" type="primary">{{$t('保存')}}</el-button>
+        </el-col>
+      </el-row>
+    </el-dialog>
+  </el-dialog>
+
+</template>
+
+<script>
+import HdComQueryDetail from './HdComQueryDetail'
+import HdComSortDetail from "./HdComSortDetail";
+
+export default {
+  name: 'HdComQuery',
+  components: { HdComSortDetail, HdComQueryDetail },
+  data() {
+    return {
+      isFirst: true,
+      visible: false,
+      proSaveVisible: false,
+      leftLs: [],
+      rightLs: [],
+      sortLs: [],
+      selQueryId: '',
+      proName: '',
+      proLs: [],
+      keepQueryUse: false
+    }
+  },
+  inheritAttrs: false,
+  props: {
+    hdQuery: Object,
+    allColumn: Array
+  },
+  mounted() {
+    this.doQuery()
+  },
+  methods: {
+    doSave() {
+      const comQuery = {}
+      comQuery.name = this.proName
+      comQuery.menuId = this.$route.name
+      comQuery.gridId = this.getHdComGrid().$refs.hdgrid.gridId
+      const innHdQuery = { vueleftQueryLs: [], vuerightQueryLs: [], sorts: { params: this.sortLs } }
+      this.addToHdQuery(innHdQuery.vueleftQueryLs, this.leftLs)
+      innHdQuery.vueGroupRel = 'or'
+      this.addToHdQuery(innHdQuery.vuerightQueryLs, this.rightLs)
+      comQuery.hdQuery = innHdQuery
+      this.$http.post('/webresources/login/com/ComQuery/saveone/', comQuery).then(response => {
+        const data = response.data
+        this.$message({
+          type: data.code == '-1' ? 'error' : 'success',
+          showClose: true,
+          duration: 1500,
+          message: data.message
+        })
+        this.proLs.push(data.data)
+        this.selQueryId = data.data.queryId
+        this.proSaveVisible = false
+        this.getHdComGrid().adQueryTemplateNameList = this.proLs;
+      })
+    },
+    remove() {
+      if (!this.selQueryId) {
+        this.$message({
+          type: 'error',
+          message: this.$t('请先选择要删除的方案'),
+          showClose: true,
+          duration: 1500
+        })
+        return false
+      }
+      const comQuery = {}
+      comQuery.queryId = this.selQueryId
+      this.$http.post('/webresources/login/com/ComQuery/remove/', comQuery).then(response => {
+        const data = response.data
+        for (let i = 0; i < this.proLs.length; i++) {
+          if (this.proLs[i].queryId == this.selQueryId) {
+            this.proLs.splice(i, 1)
+            this.selQueryId = null
+            break
+          }
+        }
+        this.$message({
+          type: data.code == '-1' ? 'error' : 'success',
+          showClose: true,
+          duration: 1500,
+          message: data.message
+        })
+        this.getHdComGrid().adQueryTemplateNameList = this.proLs;
+      })
+    },
+    doQuery() {
+      // 默认三个
+      this.leftLs.push({ selCol: {}, rel: '=' })
+      this.leftLs.push({ selCol: {}, rel: '=' })
+      this.leftLs.push({ selCol: {}, rel: '=' })
+      this.rightLs.push({ selCol: {}, rel: '=' })
+      this.rightLs.push({ selCol: {}, rel: '=' })
+      this.rightLs.push({ selCol: {}, rel: '=' })
+    },
+    add() {
+      this.leftLs.push({ selCol: {}, rel: '=' })
+      this.rightLs.push({ selCol: {}, rel: '=' })
+    },
+    show() {
+      this.visible = true
+      const innHdQuery = { query: {} }
+      innHdQuery.query.menuId = this.$route.name
+      innHdQuery.query.gridId = this.getHdComGrid().$refs.hdgrid.gridId
+      if (this.isFirst) {
+        this.$http.post('/webresources/login/com/ComQuery/find/', innHdQuery).then(response => {
+          this.proLs = response.data
+        })
+      }
+      this.isFirst = false
+    },
+    doCloseAndClear() {
+      this.visible = false
+    },
+    doCloseAndKeep() {
+      this.keepQueryUse = true
+      this.visible = false
+    },
+    change(val) {
+      this.$http.post('/webresources/login/com/ComQuery/findDetail?queryId=' + val).then(response => {
+        const data = response.data
+        this.leftLs = this.listInit(data[0])
+        this.rightLs = this.listInit(data[1])
+        this.sortLs = this.sortInit(data[2])
+      })
+      // this.selCol = val
+    },
+    listInit(list) {
+      for (let i = 0; i < list.length; i++) {
+        const one = list[i]
+        for (let j = 0; j < this.allColumn.length; j++) {
+          const column = this.allColumn[j]
+          if (column.$attrs && one.key == column.$attrs.prop) {
+            one.selCol = column
+            break
+          }
+        }
+      }
+      return list
+    },
+    sortInit(list) {
+      return list.map(sort => {
+        return {
+          sortProperty: sort.key,
+          sortType: sort.value,
+          alias: sort.rel,
+          text: this.allColumn.find(v => v.$attrs.prop == sort.key).$attrs.label + '/' + (sort.value == 'ASC' ? '升序' : '降序')
+        }
+      })
+    },
+    doQueryRs() {
+      this.hdQuery.vueleftQueryLs = []
+      this.hdQuery.vuerightQueryLs = []
+      this.addToHdQuery(this.hdQuery.vueleftQueryLs, this.leftLs)
+      this.hdQuery.vueGroupRel = 'or'
+      this.addToHdQuery(this.hdQuery.vuerightQueryLs, this.rightLs)
+      this.hdQuery.sorts = { params: this.sortLs }
+      this.hdQuery.sort = ''
+      // 
+      // console.log(this.hdQuery, this.leftLs, this.rightLs)
+      this.getHdComGrid().doQuery().then(() => {
+        this.visible = false
+      })
+
+
+    },
+    addToHdQuery(queryLs, inputLs) {
+      for (let i = 0; i < inputLs.length; i++) {
+        const input = inputLs[i]
+        if (input.key) {
+          queryLs.push({ key: input.key, rel: input.rel, value: input.value, type: input.type })
+        }
+      }
+    },
+    getHdComGrid() {
+      let par = this.$parent
+      while (par) {
+        if (par.$options.name == 'HdComGrid') {
+          return par
+        }
+        par = par.$parent
+      }
+      return null
+    }
+  },
+  watch: {
+    visible: function (val) {
+      if (!val) { // 隐藏时
+        if (!this.keepQueryUse) {
+          this.hdQuery.vueleftQueryLs = []
+          this.hdQuery.vuerightQueryLs = []
+          this.hdQuery.vueGroupRel = null
+        } else {
+          this.keepQueryUse = false
+        }
+      }
+    }
+  }
+}
+</script>

package/src/hdcom/HdComQueryDetail.vue

@@ -0,0 +1,161 @@
+<template>
+  <el-container>
+    <el-main class="gridShow" :title="title">
+      <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-option>
+            </el-select>
+          </template>
+        </el-table-column>
+        <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-option :label="$t('包含')" value="%like%"></el-option>
+              <el-option label=">=" value=">="></el-option>
+              <el-option label="<=" value="<="></el-option>
+              <el-option :label="$t('非空')" value="not null"></el-option>
+              <el-option :label="$t('为空')" value="is null"></el-option>
+            </el-select>
+          </template>
+        </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>
+          </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>
+          </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
+    },
+    mounted() {
+
+    },
+    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
+        }
+
+        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'
+        }
+      }
+
+    }
+  }
+</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;
+      }
+
+      .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

@@ -0,0 +1,155 @@
+<template>
+  <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}}
+      </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>
+      <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
+    },
+    mounted() {
+
+    },
+    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' ? '升序' : '降序')
+        }
+      }
+
+    },
+    computed: {
+      sortOption() {
+        let rtn = this.allColumn.map(v => {
+          return {
+            value: v.$attrs.prop,
+            label: v.$attrs.label,
+            children: [{
+              value: 'ASC',
+              label: '升序'
+            }, {
+              value: 'DESC',
+              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;
+    }
+
+    .input-new-tag {
+      width: 90px;
+      margin-left: 10px;
+      vertical-align: bottom;
+    }
+  }
+
+</style>

package/src/hdcom/HdDatePicker.vue

@@ -0,0 +1,78 @@
+<template>
+  <ExDatePicker ref="exDatePicker" v-model="selVal" v-bind="$attrs" v-on="$listeners" :format="dateFormat"
+                :valueFormat="$attrs.valueFormat || valueFormat" :placeholder="placeholder" @focus="dateFocus"
+                @blur="dateBlur" :clearable="false">
+  </ExDatePicker>
+
+</template>
+
+<script>
+/**
+   * 继承ElDatePicker ElementUi的日期以时间戳形式,这里改为字符串形式'yyyy-MM-dd HH:mm' 简化调用
+   * @module HdDatePicker
+   */
+export default {
+  name: 'HdDatePicker',
+  data() {
+    return {
+      format: '',
+      valueFormat: '',
+      placeholder: this.$t('选择日期'),
+      dateFormat: '',
+      focusValue: '',
+    }
+  },
+  props: ['value'],
+  inheritAttrs: false,
+  created() { // 判断
+    if (this.$attrs.type == 'date' || this.$attrs.type == 'daterange') {
+      this.format = 'yyyy-MM-dd'
+      this.valueFormat = 'yyyy-MM-dd'
+      this.placeholder = this.$t('选择日期')
+    } else if (this.$attrs.type == 'datetime' || this.$attrs.type == 'datetimerange') {
+      this.format = 'yyyy-MM-dd HH:mm'
+      this.valueFormat = 'yyyy-MM-dd HH:mm'
+      this.placeholder = this.$t('选择日期时间')
+    } else if (this.$attrs.type == 'month') {
+      this.format = 'yyyy-MM'
+      this.valueFormat = 'yyyy-MM'
+      this.placeholder = this.$t('选择月份')
+    } else if (this.$attrs.type == 'year') {
+      this.format = 'yyyy'
+      this.valueFormat = 'yyyy'
+      this.placeholder = this.$t('选择年份')
+    } else {
+      this.format = 'yyyy-MM-dd'
+      this.valueFormat = 'yyyy-MM-dd'
+      this.placeholder = this.$t('选择日期')
+    }
+    console.log('created', this.format, this.valueFormat)
+    this.dateFormat = this.$attrs.format || this.format
+  },
+  methods: {
+    dateFocus(v) {
+      this.dateFormat = (this.$attrs.format || this.format).replaceAll(/(-|:|\s|y)/, "");
+      if (!this.value) {
+        this.$set(this.$refs.exDatePicker, 'userInput', new Date().format('MM'))
+      }
+    },
+    dateBlur() {
+      this.dateFormat = this.$attrs.format || this.format
+    }
+  },
+  computed: {// 给外层v-model赋值
+    selVal: {
+      // 动态计算selVal的值
+      get: function () {
+        console.log('调用了get属性')
+        return this.value
+      },
+      set: function (val) { // v-model input
+        console.log('调用了set属性', val)
+        this.$emit('input', val)
+      }
+    },
+  }
+}
+
+</script>