hd-idevvue3 3.0.0 → 3.0.1

package/src/hdcom/HdDialog.vue

@@ -0,0 +1,63 @@
+<template>
+  <ExDialog :fullscreen="fullscreen" v-el-drag-dialog v-bind="$attrs" v-on="$listeners" :close-on-click-modal="false"
+            append-to-body v-if="$attrs.modal==null||$attrs.modal==true" :title="$t($attrs.title)">
+    <slot></slot>
+    <div slot="footer">
+      <slot name="footer"></slot>
+    </div>
+  </ExDialog>
+  <ExDialog :fullscreen="fullscreen" v-el-drag-dialog v-bind="$attrs" v-on="$listeners" :close-on-click-modal="false"
+            append-to-body class="wrapperChg" custom-class="dialogChg" v-else>
+    <slot></slot>
+    <div slot="footer">
+      <slot name="footer"></slot>
+    </div>
+  </ExDialog>
+</template>
+
+<script>
+  /**
+   * 继承并重写ElDialog 使弹窗可拖动
+   * 7.6实现 在modal=false时,可以点击底层内容
+   * @module HdDialog
+   */
+  import elDragDialog from '../directive/el-dragDialog' // base on element-ui
+  export default {
+    name: 'HdDialog',
+    directives: {elDragDialog},
+    inheritAttrs: false,
+    components: {},
+    data() {
+      return {nowFull: false}
+    },
+    mounted() {
+      //      $(".el-dialog").draggable({handle: '.el-dialog__header'});
+      //      $(".el-dialog__header").css("cursor", "move")
+    },
+    computed: {
+      fullscreen() {
+        if (this.nowFull) {
+          return true
+        }
+
+        if (this.$attrs.fullscreen === '' || this.$attrs.fullscreen === true) {
+          return true
+        }
+      }
+    }
+  }
+</script>
+<style rel="stylesheet/scss" lang="scss">
+  .wrapperChg { //为了让弹窗底层的内容可以修改,在model:false时增加class
+    position: static !important;
+    z-index: 1;
+  }
+
+  .dialogChg {
+    position: absolute !important;
+    z-index: 1001;
+    left: 0;
+    right: 0;
+  }
+</style>
+

package/src/hdcom/HdDrop.vue

@@ -0,0 +1,163 @@
+<template>
+  <el-select v-model="selVal" filterable :clearable="clearable" :placeholder="placeholder?$t(placeholder):$t('请选择')"
+             style="width:100%"
+             v-bind="$attrs" v-on="$listeners" @change="change" :filter-method="filterMe"
+             @visible-change="visibleChange">
+    <el-option v-for="item in options" :key="item.codeId" :label="item.name" :value="item.code">
+
+      <!--item[myts]可以实现动态label-->
+      <span style="float: left">{{ item.name }}</span>
+      <span style="float: right; color: #8492a6; font-size: 13px">{{ item.code }}</span>
+    </el-option>
+  </el-select>
+</template>
+
+<script>
+  /**
+   * 继承ElSelect属性和事件,syscode下的field只需要传入field,其它的需要传入url
+   * @module HdDrop
+   */
+  export default {
+    name: 'HdDrop',
+    data() {
+      return {
+        options: [],
+        backUpArr: []// 备份
+      }
+    },
+    /**
+     * Props
+     * @prop {String} value v-model双向绑定
+     * @prop {String} field syscode时,传入下拉field
+     * @prop {String} placeholder
+     * @prop {String} url 不使用syscode下拉时指定url
+     * @prop {String} txtVal  加.sync双向绑定 选择的label
+     * @prop {Array} codeIn  有值时,只显示指定的code :codeIn="['A','S']"
+     */
+    props: {
+      value: String,
+      field: String,
+      placeholder: String,
+      name: String,
+      url: String,
+      txtVal: String,
+      codeIn: Array,
+      clearable: {
+        type: Boolean,
+        default: true
+      }
+    }, // 设置value为props属性-必须,name.sync(不能用)和txtVal.sync双向
+    inheritAttrs: false,
+    mounted() {
+      if (this.url || this.field) {
+        this.doQuery()
+      }
+    },
+    methods: {
+      doQuery() {
+        let quUrl = ''
+        if (!this.url) {
+          quUrl = '/webresources/login/privilege/SysCode/findAll?fieldCod=' + this.field
+        } else {
+          quUrl = this.url
+        }
+        this.$http.get(quUrl).then(response => {
+          this.options = response.data
+          if (this.codeIn) { // 如果options的code和codeIn相同,就显示
+            this.options = this.options.filter((item) => {
+              return this.codeIn.find(v => v == item.code)
+            })
+          }
+          this.backUpArr = this.options
+        })
+      },
+      change(val) {
+        this.upName(val)
+        //this.$emit('change', val) 不用写,el-select会传递到上层
+      },
+      visibleChange(val) { // 下拉隐藏时还原
+        if (!val) { // 隐藏时
+          this.options = this.backUpArr
+        }
+      },
+      filterMe(val) { // 过滤 根据name code
+        if (val) { // val存在
+          this.options = this.backUpArr.filter((item) => {
+            if (item.code.indexOf(val) >= 0 || item.name.indexOf(val) >= 0) {
+              return true
+            }
+          })
+        } else { // val为空时，还原数组
+          this.options = this.backUpArr
+        }
+      },
+      upName(value) {
+        if (!value) {
+          this.$emit('update:name', null)// 匹配不上
+        }
+        for (let i = 0; i < this.options.length; i++) {
+          if (this.options[i].code == value) {
+            const obj = this.options[i]
+            this.$emit('update:name', obj.name)// 用txtVal
+            this.$emit('update:txtVal', obj.name)
+            return true
+          }
+        }
+      }
+    },
+    watch: {
+      //      // 针对编辑时，不改变 hddrop里的内容
+      //      val: function (value) {
+      //        for (let i = 0; i < this.options.length; i++) {
+      //          if (this.options[i].code == value) {
+      //            let obj = this.options[i]
+      //            this.$emit('update:name', obj.name)
+      //            return true
+      //          }
+      //        }
+      //      },
+      //      //针对增加编辑时，改变了hddrop里的值
+      //      value: function (value) {
+      //        for (let i = 0; i < this.options.length; i++) {
+      //          if (this.options[i].code == value) {
+      //            let obj = this.options[i]
+      //            this.$emit('update:name', obj.name)
+      //            return true
+      //          }
+      //        }
+      //      }
+      url: function () {
+        this.doQuery()
+      },
+      field: function () {
+        this.doQuery()
+      },
+      codeIn: {
+        handler(newValue, oldValue) { // codeIn改变时计算
+          for (let i = 0; i < newValue.length; i++) {
+            if (newValue[i] != oldValue[i]) {
+              this.doQuery()
+              return true
+            }
+          }
+        },
+        deep: true
+      }
+    },
+    computed: {// 给外层v-model赋值
+      selVal: {
+        // 动态计算selVal的值
+        get: function () {
+          if (!this.value) { // filterMe在null时不触发,''就没问题
+            return ''
+          }
+          return this.value
+        },
+        set: function (val) { // v-model input
+          // upName(val)//更新name
+          this.$emit('input', val)
+        }
+      }
+    }
+  }
+</script>

package/src/hdcom/HdFileUpload.vue

@@ -0,0 +1,148 @@
+<template>
+  <el-dialog :visible.sync="fileUploadVisible" append-to-body title="文件上传" width="450px">
+    <el-alert :closable='false' :title="$t('点击文件即可下载')" type="warning"></el-alert>
+    <el-upload :action="upUrl"
+               :auto-upload="false"
+               :before-remove="beforeRemove"
+               :before-upload="beforeUpload"
+               :file-list="fileList"
+               :multiple="multiple"
+               :on-preview="handlePreview"
+               :on-remove="handleRemove"
+               :on-success="onUpSuccess"
+               ref="upload"
+               style="min-height:300px;width:400px"
+               v-bind="$attrs">
+      <el-button slot="trigger" type="primary" v-if="canEdit">{{$t('选取文件')}}</el-button>
+      <el-button @click="submitUpload" style="margin-left: 10px;" type="success" v-if="canEdit">{{$t('上传到服务器')}}
+      </el-button>
+      <div class="el-upload__tip" slot="tip"></div>
+    </el-upload>
+  </el-dialog>
+</template>
+
+<script>
+  var FileSaver = require('file-saver')
+  /**
+   * 文件上传 包括上传和下载后台idev8入口为comfileupload
+   * @module HdFileUpload
+   */
+
+  export default {
+    components: {},
+    name: 'HdFileUpload',
+    /**
+     * @prop 参考element-ui的el-upload
+     * */
+    props: {
+      url: {
+        type: String,
+        default: '/webresources/login/com/SysFile/comfileupload'
+      },
+    },
+    inheritAttrs: false,
+    data() {
+      return {
+        upUrl: '',
+        fileUploadVisible: false,
+        fileDownVisible: false,
+        fileList: [],
+        entityId: '',
+        entityName: '',
+        canEdit: true,
+        uploadNum: 0
+      }
+    },
+    mounted() {
+    },
+    methods: {
+      beforeUpload(file) {
+        this.uploadNum++;
+      },
+      /**
+       * @method open
+       * @param entityName 区分名
+       * @param entityId 区分id
+       * @param canEdit 是否可编辑
+       * @event complete 文件全部上传完结束的事件
+       */
+      open(entityName, entityId, canEdit) {
+        this.entityId = entityId
+        this.entityName = entityName
+        this.fileUploadVisible = true
+        this.canEdit = canEdit
+        this.upUrl = `${this.url}/upload?entityId=${this.entityId}&entityName=${this.entityName}`
+        this.doQuery()
+      },
+      downShow() {
+        this.fileDownVisible = true
+      },
+      doQuery() {
+        const url = `${this.url}/find?entityId=${this.entityId}&entityName=${this.entityName}`
+        this.$http.post(url).then(response => {
+          const fileLs = response.data
+          this.fileList = []
+          for (let i = 0; i < fileLs.length; i++) {
+            const fileOne = fileLs[i]
+            const oneObj = {}
+            oneObj.name = fileOne.fileName
+            oneObj.uploadId = fileOne.uploadId
+            this.fileList.push(oneObj)
+          }
+        })
+      },
+      submitUpload() {
+        this.$refs.upload.submit()
+      },
+      onUpSuccess(response, file, fileList) {
+        this.uploadNum--;
+        if (this.uploadNum == 0) {
+          this.$emit('complete')
+        }
+        file.uploadId = response.message
+      },
+      beforeRemove(file, fileList) {
+        if (!this.canEdit) {
+          this.$message({
+            type: 'error',
+            message: this.$t('无权删除')
+          })
+          return false
+        }
+        return this.$confirm(this.$t('确定删除') + file.name + '？').then(() => {
+          if (!file.uploadId) {
+            return true
+          }
+          this.$http.post(`${this.url}/delete?uploadId=${file.uploadId}`).then(response => {
+            const data = response.data
+            this.$message({
+              type: data.code == '-1' ? 'error' : 'success',
+              message: this.$t('操作成功')
+            })
+            if (data.code == '-1') {
+              return false
+            }
+            // this.doQuery()
+          })
+        })
+      },
+      handleRemove(file, fileList) {
+
+      },
+      handlePreview(file) {
+        if (!file.uploadId) {
+          this.$message({
+            type: 'error',
+            message: this.$t('这是未上传的文件')
+          })
+          return false
+        }
+        const url = `${this.url}/download?uploadId=${file.uploadId}`
+        this.$http.post(url, {}, {responseType: 'arraybuffer'}).then(response => {
+          var blob = new Blob([response.data])
+          FileSaver.saveAs(blob, file.name)
+        })
+      }
+    }
+  }
+</script>

package/src/hdcom/HdFilterBox.vue

@@ -0,0 +1,90 @@
+<template>
+  <el-row>
+    <el-col :span="10" align="left">
+      <div class="icon" @click.stop.prevent="doShrink" v-show="shrinkVisable">
+        <i :class="[fa, arrowClass]" style="cursor:pointer;"/>
+      </div>
+      <div ref="searchBox" class="filter-item-box" :style="{'height':nowHeight}">
+        <slot>
+        </slot>
+      </div>
+    </el-col>
+    <el-col :span="4" align="left">
+      <div class="filter-btn-search">
+        <slot name="searchBtn">
+        </slot>
+      </div>
+    </el-col>
+    <el-col :span="10" align="right">
+      <div class="filter-btn-otheritem">
+        <slot name="otherBtn"></slot>
+      </div>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+  export default {
+    name: "HdFilterBoxTmp",
+    data() {
+      return {
+        arrowClass: 'fa-chevron-down',
+        fa: 'fa',
+        isShrink: false,
+        nowHeight: '28px',
+        nowWidth: null,
+        shrinkVisable: false
+      }
+    },
+    mounted() {
+
+      let elementResizeDetectorMaker = require("element-resize-detector")
+      let erd = elementResizeDetectorMaker()
+      // console.log('this.$refs.searchBox.$el', this.$refs.searchBox)
+      erd.listenTo(this.$refs.searchBox, element => {
+        if (element.scrollHeight < 40) {
+          this.shrinkVisable = false
+        } else {
+          this.shrinkVisable = true
+        }
+      })
+    },
+    methods: {
+      doShrink() {
+        if (this.isShrink) {
+          this.nowHeight = "28px"
+          this.arrowClass = 'fa-chevron-down'
+        } else {
+          this.nowHeight = "100%"
+          this.arrowClass = 'fa-chevron-up'
+        }
+        this.isShrink = !this.isShrink
+      },
+    },
+    computed: {
+      searchBoxWidth() {
+        // return this.nowWidth ? this.nowWidth%180 + 'px'  : 'auto';
+        return 'auto'
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  .filter-item-box {
+    overflow: hidden;
+    display: flex;
+    flex-wrap: wrap;
+    /*height: 28px;*/
+  }
+
+  .icon {
+    margin-top: 0px;
+    /*margin-right: 10px;*/
+    line-height: 28px;
+    font-size: 14px;
+    color: #bbbbbb;
+    float: right;
+  }
+
+</style>

package/src/hdcom/HdFooter.vue

@@ -0,0 +1,149 @@
+<template>
+  <ExFooter :height="nowHeight" ref="footer" style="display: flex; flex-direction: column;">
+    <div class="asideDrag" @mousedown="mousedown($event)" v-if="!noDrag" :class="{dragShowCls:dragShow}"
+         @mouseover="dragShow=true" @mouseout="dragShow=false"></div>
+    <div ref="moveline" class="moveline" v-show="dragFrom!=null"></div>
+    <div class="hdFooter">
+      <template v-if="title">
+        <div class="hd-title">
+          <div align="left" style="float:left">{{$t(title)}}</div>
+          <slot name="title"></slot>
+          <div align="right" v-if="arrowShow">
+            <i v-bind:class="[fa, arrowClass]" @click="isShrink?doShrink(false):doShrink(true)" style="cursor:pointer;">
+            </i>
+          </div>
+        </div>
+      </template>
+      <div style="flex:1;height: 100%;position: relative;  ">
+        <div style="position: absolute; width: 100%;height: 100%;" v-show="!isShrink">
+          <slot></slot>
+        </div>
+      </div>
+    </div>
+
+  </ExFooter>
+</template>
+
+<script>
+
+  /**
+   * 覆写ElFooter,增加拖动和title
+   * 插槽:<slot name="title"></slot> title进行额外扩展如增加按钮等
+   * @module HdFooter
+   */
+  export default {
+    name: 'HdFooter',
+    component: {},
+    /**
+     * Props 继承ElFooter属性和事件,,如果仅需要elementui的ElFooter请使用ExFooter
+     * @prop {String} title 标题
+     * @prop {Boolen} arrowShow 是否显示一键收缩
+     * @prop {Boolen} noDrag 是否可拖动,默认否
+     */
+    props: {
+      height: String,
+      title: String,
+      arrowShow: {type: Boolean, default: true},
+      noDrag: {type: Boolean, default: false}
+    },
+    inheritAttrs: false,
+    data() {
+      return {
+        isShrink: false, // 收缩还是展开
+        dragFrom: null,
+        iconCls: 'el-icon-d-caret',
+        arrowClass: 'fa-chevron-down',
+        fa: 'fa',
+        inputHeight: 0,
+        nowHeight: '100px',
+        dragShow: false
+      }
+    },
+    mounted() {
+      if (this.height) {
+        this.nowHeight = this.height
+      }
+      this.inputHeight = this.nowHeight
+    },
+    methods: {
+      doShrink(isShrink) {
+        if (isShrink) {
+          if (this.title) {
+            this.nowHeight = "30px"
+          } else {
+            this.nowHeight = "15px"
+          }
+          this.arrowClass = 'fa-chevron-up'
+        } else {
+          this.nowHeight = this.inputHeight
+          this.arrowClass = 'fa-chevron-down'
+        }
+        this.isShrink = isShrink
+      },
+      mousedown: function (event) {
+        this.$set(this.$store.state, 'hotKey', "-1") //避免热键样式影响体验
+        this.dragFrom = event.y
+        this.$refs.moveline.style.top = this.dragFrom + "px"
+        document.documentElement.addEventListener('mousemove', this.handleMove, true)
+        document.documentElement.addEventListener('mouseup', this.handleMouseup, true)
+      },
+      handleMove: function (event) {
+        this.$refs.moveline.style.top = event.y + "px"
+      },
+      handleMouseup: function (event) {
+        document.documentElement.removeEventListener('mousemove', this.handleMove, true)
+        document.documentElement.removeEventListener('mouseup', this.handleMouseup, true)
+        let newHeight = this.$refs.footer.$el.offsetHeight - event.y + this.dragFrom
+        this.nowHeight = newHeight + 'px';
+        this.dragFrom = null
+        this.$set(this.$store.state, 'hotKey', null) //避免热键样式影响体验
+        if (newHeight <= 70) { // 少于一定宽度自动收缩
+          this.doShrink(true)
+        }
+        if (newHeight >= 100) { // 少于一定宽度自动收缩
+          this.isShrink = false
+        }
+      }
+    },
+    watch: {
+      nowHeight(val) {
+
+        this.$emit('update:height', val);
+      },
+      width(val) {
+        this.nowHeight = val
+      }
+    }
+  }
+
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .hdFooter {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+  }
+
+  .asideDrag {
+    width: 100%;
+    height: 5px;
+    overflow: hidden;
+    cursor: ns-resize;
+    user-select: none;
+  }
+
+  .moveline {
+    width: 100%;
+    height: 5px;
+    overflow: hidden;
+    position: fixed;
+    cursor: ns-resize;
+    background-color: red;
+    z-index: 9999;
+    user-select: none;
+  }
+
+  .dragShowCls {
+    background-color: #409EFF;
+  }
+</style>