hd-idevvue3 3.0.0 → 3.0.2

package/src/hdcom/GridShow.vue

@@ -0,0 +1,238 @@
+<template>
+  <el-dialog title="展示设置" :visible.sync="visible" width='50%' append-to-body top="2vh">
+    <el-container style="height: 80vh; border: 1px solid #eee">
+      <el-main class="gridShow">
+        <el-table :data="list" row-key="property">
+          <el-table-column align="center" label="名称" prop="label" width="150" noQuery>
+          </el-table-column>
+          <el-table-column align="center" label="宽度(px)" prop="width" width="150" noQuery>
+            <template slot-scope="scope">
+              <hd-num v-model.number="scope.row.width" :step="10"></hd-num>
+            </template>
+          </el-table-column>
+          <el-table-column align="center" label="展示" prop="showFlg" noQuery>
+            <template slot-scope="scope">
+              <el-switch v-model="scope.row.showFlg" active-value="1" inactive-value="0"></el-switch>
+            </template>
+          </el-table-column>
+          <el-table-column align="center" label="冻结" prop="freezeFlg" noQuery>
+            <template slot-scope="scope">
+              <el-switch v-model="scope.row.freezeFlg" active-value="1" inactive-value="0"></el-switch>
+            </template>
+          </el-table-column>
+          <el-table-column align="center" label="排序" width="80" noQuery>
+            <template slot-scope="scope">
+              <svg-icon class='drag-handler' icon-class="drag"></svg-icon>
+            </template>
+          </el-table-column>
+        </el-table>
+
+      </el-main>
+    </el-container>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="reset">{{ $t('重置') }}</el-button>
+      <el-button @click="visible = false">{{ $t('取 消') }}</el-button>
+      <el-button type="primary" @click="submit" :loading="loading"> {{ $t('确 定') }}</el-button>
+    </div>
+  </el-dialog>
+</template>
+<script>
+
+import Sortable from 'sortablejs'
+
+export default {
+  name: 'gridshow',
+  components: {},
+  data() {
+    return {
+      hdQuery: new HdQuery(this),
+      list: [],
+      oldList: [],
+      newList: [],
+      visible: false,
+      loading: false,
+      menuId: '',
+      gridId: '',
+      specCkForGrid: true // HdTableColumn判断是否来自HdGrid用
+      // shipId: ""
+
+    }
+  },
+  mounted() {
+    this.loading = false
+  },
+  methods: {
+    show(disCol, menuId, gridId) {
+      this.menuId = menuId
+      this.gridId = gridId
+      this.visible = true
+      this.list = JSON.parse(JSON.stringify(disCol.filter(item => item.property)))// 判断有property的展示,使用复制采用新对象(否则chrome有问题)
+      // console.log('list',this.list)
+      //过滤掉子序列
+      this.list.forEach(v => v.children = []);
+      this.oldList = this.list.map(v => v.property)
+      this.newList = this.oldList.slice() //清空
+      this.$nextTick(() => {
+        this.setSort()
+      })
+    },
+    setSort() {
+      const elAll = document.querySelectorAll('.gridShow .el-table__body-wrapper > table > tbody')
+      for (let i = 0; i < elAll.length; i++) {
+        const el = elAll[i]
+        this.sortable = Sortable.create(el, {
+          ghostClass: 'sortable-ghost', // Class name for the drop placeholder,
+          onEnd: evt => {
+            const targetRow = this.list.splice(evt.oldIndex, 1)[0]
+            this.list.splice(evt.newIndex, 0, targetRow)
+
+            // for show the changes, you can delete in you code
+            const tempIndex = this.newList.splice(evt.oldIndex, 1)[0]
+            this.newList.splice(evt.newIndex, 0, tempIndex)
+          }
+        })
+      }
+    },
+    submit() {
+      const url = '/webresources/login/com/ComGridShow/save?menuId=' + this.menuId + '&gridId=' + this.gridId
+      this.loading = true
+      this.$http.post(url, this.list).then(response => {
+        this.loading = false
+        const data = response.data
+        this.$message({
+          type: data.code == '-1' ? 'error' : 'success',
+          message: data.message
+        })
+        if (data.code == '-1') {
+          return
+        }
+        this.visible = false
+        this.$emit('save-ok')
+      })
+    },
+    reset() {
+      //江阴港特色，重置需要弹窗确认框，确认后方可重置
+      let resetFlag = this.$store.state.app.sysParam.JYG_CONTROL.RESET_BUTTON_CONFIRM
+      if (resetFlag && resetFlag == '1') {
+        this.$confirm('是否确认重置？', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          // 确定
+          this.resetColumn()
+        })
+      } else {
+        this.resetColumn()
+      }
+    },
+    resetColumn() {
+      const url = '/webresources/login/com/ComGridShow/reset?menuId=' + this.menuId + '&gridId=' + this.gridId
+      this.$http.post(url, this.list).then(response => {
+        const data = response.data
+        this.$message({
+          type: data.code == '-1' ? 'error' : 'success',
+          message: data.message
+        })
+        if (data.code == '-1') {
+          return
+        }
+        this.visible = false
+        this.$emit('save-ok')
+      })
+    }
+
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss">
+.sortable-ghost {
+  opacity: .8;
+  color: #fff !important;
+  background: #42b983 !important;
+}
+
+.gridShow {
+  display: flex;
+  flex-direction: column;
+
+  .el-table {
+    height: 100%;
+    width: 100%;
+    flex: 1;
+
+    .el-table__body-wrapper {
+      width: 100%;
+      padding-bottom: 30px;
+    }
+
+    .el-table__header-wrapper th { //列表标题
+      background-color: #f6f6f6;
+    }
+
+    .el-table__fixed-header-wrapper th { //固定的列表标题
+      background-color: #8cbda4;
+    }
+
+    td, th { //列表标题及内容
+      padding: 2px 0;
+    }
+
+    .cell, .el-table th div, .el-table--border th:first-child .cell, .el-table--border td:first-child .cell { //列表的margin
+      padding-left: 2px !important;
+      padding-right: 2px !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>
+
+<style scoped>
+.icon-star {
+  margin-right: 2px;
+}
+
+.drag-handler {
+  width: 20px;
+  height: 20px;
+  cursor: pointer;
+}
+
+.show-d {
+  margin-top: 15px;
+}
+</style>

package/src/hdcom/HdAside.vue

@@ -0,0 +1,178 @@
+<template>
+  <ExAside :width="nowWidth" ref="aside" style="display: flex;">
+    <div class="hdAside">
+      <template v-if="title">
+        <div class="hd-title" v-show="!isShrink">{{$t(title)}}
+          <slot name="title"></slot>
+          <div align="right" style="margin: -15px 10px 0px 0px;" v-if="arrowShow">
+            <i @click="isShrink?doShrink(false):doShrink(true)"
+               style="cursor:pointer;" v-bind:class="['fa', isShrink?'fa-chevron-right':'fa-chevron-left']">
+            </i>
+          </div>
+        </div>
+      </template>
+      <div class="hd-title" v-show="isShrink">
+        <i @click="isShrink?doShrink(false):doShrink(true)"
+           style="cursor:pointer;" v-bind:class="['fa', isShrink?'fa-chevron-right':'fa-chevron-left']">
+        </i>
+      </div>
+      <div style="flex:1;position: relative;height:100%; width: 100%" v-show="!isShrink">
+        <div style="position: absolute; width: 100%;height: 100%;">
+          <slot></slot>
+        </div>
+      </div>
+    </div>
+    <div :class="{asideDrag:true,dragShowCls:dragShow}" @mousedown="mousedown($event)" @mouseout="dragShow=false"
+         @mouseover="dragShow=true" v-if="!noDrag"></div>
+    <div class="moveline" ref="moveline" v-show="dragFrom!=null"></div>
+  </ExAside>
+</template>
+
+<script>
+  /**
+   * 覆写ElAside,增加拖动和title
+   * @module HdAside
+   */
+  export default {
+    name: 'HdAside',
+    component: {},
+    inheritAttrs: false,
+    /**
+     * Props 继承ELAside属性和事件,如果仅需要elementui的ElAside请使用ExAside
+     * 插槽:<slot name="title"></slot> title进行额外扩展如增加按钮等
+     * @prop {String} title 标题
+     * @prop {String} width 禁止在style中写width
+     * @prop {Boolen} arrowShow 是否显示一键收缩
+     * @prop {Boolen} noDrag 是否可拖动,默认否
+     * @prop {String} showType 字符串:"1" 普通 2 收缩 3 全屏
+     *
+     */
+    props: {
+      width: String,
+      title: String, arrowShow: {type: Boolean, default: true},
+      noDrag: {type: Boolean, default: false},
+      showType: {type: String, default: '1'} // 注意是字符串:"1" 普通 2 收缩 3 全屏
+    },
+    data() {
+      return {
+        isShrink: false, // 收缩还是展开
+        isFull: false,// 是否全屏
+        differ: 0,//鼠标点击的位置与元素上级位置的差
+        dragFrom: null, //开始点击的点
+        inputWidth: 0, //第一次进来时的,宽度
+        nowWidth: '300px',//无设置默认300px
+        dragShow: false
+
+      }
+    },
+    mounted() {
+      if (this.width) {
+        this.nowWidth = this.width
+      }
+      this.inputWidth = this.nowWidth
+    },
+    methods: {
+      doShrink(isShrink) {
+        this.isShrink = isShrink
+        this.isFull = false // 收缩时,全屏还原
+        if (isShrink) {
+          this.$emit('update:showType', '2')
+          this.nowWidth = '15px'
+        } else {//点还原按钮
+          this.$emit('update:showType', '1')
+          this.nowWidth = this.inputWidth
+        }
+      },
+      doFullScreen(isFull) { // 全屏
+        this.isFull = isFull
+        this.isShrink = false //
+        if (isFull) {
+          this.$emit('update:showType', '3')
+          this.nowWidth = "100%"
+        } else {
+          this.$emit('update:showType', '1')
+          this.nowWidth = this.inputWidth
+        }
+      },
+      mousedown: function (event) {
+        this.$set(this.$store.state, 'hotKey', "-1") //避免热键样式影响体验
+        this.dragFrom = event.x
+        this.$refs.moveline.style.left = this.dragFrom + "px"
+        document.documentElement.addEventListener('mousemove', this.handleMove, true)
+        document.documentElement.addEventListener('mouseup', this.handleMouseup, true)
+      },
+      handleMove: function (event) {
+        this.$refs.moveline.style.left = event.x + "px"
+      },
+      handleMouseup: function (event) {
+        document.documentElement.removeEventListener('mousemove', this.handleMove, true)
+        document.documentElement.removeEventListener('mouseup', this.handleMouseup, true)
+        let newWidth = this.$refs.aside.$el.offsetWidth + event.x - this.dragFrom
+        this.nowWidth = newWidth + 'px';
+        this.dragFrom = null
+        this.$set(this.$store.state, 'hotKey', null) //避免热键样式影响体验
+        if (newWidth <= 100) { // 少于一定宽度自动收缩
+          this.doShrink(true)
+        }
+        if (newWidth >= 150) { // 少于一定宽度自动收缩
+          this.isShrink = false
+        }
+      },
+    },
+    watch: {
+      // 如果 `activeName` 发生改变，这个函数就会运行
+      showType: {
+        immediate: true,
+        handler:
+          function (newVal) {
+            this.$nextTick(() => {
+              if (newVal == '1') { // 第一次显示查询,以后不查询
+                this.doShrink(false)
+              } else if (newVal == '2') { // 第一次显示查询,以后不查询
+                this.doShrink(true)
+              } else if (newVal == '3') { // 第一次显示查询,以后不查询
+                this.doFullScreen(true)
+              }
+            })
+          }
+      },
+      nowWidth(val) {
+        this.$emit('update:width', val);
+      },
+      width(val) {
+        this.nowWidth = val
+      }
+    }
+  }
+
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .hdAside {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+  }
+
+  .asideDrag {
+    width: 5px;
+    height: 100%;
+    overflow: hidden;
+    cursor: ew-resize;
+    user-select: none;
+  }
+
+  .moveline {
+    width: 5px;
+    height: 100%;
+    overflow: hidden;
+    position: fixed;
+    cursor: ew-resize;
+    background-color: red;
+    z-index: 9999;
+    user-select: none;
+  }
+
+  .dragShowCls {
+    background-color: #409EFF;
+  }
+</style>

package/src/hdcom/HdBtn.vue

@@ -0,0 +1,113 @@
+<template>
+  <el-tooltip
+    v-if="btnRight"
+    ref="hdbtn"
+    :content="$t(hint+addTextProp)"
+    :hide-after="2"
+    :enterable="true"
+    :open-delay="500"
+    placement="bottom"
+    effect="light"
+    transition="">
+    <i :class="'hdBtn '+icon" @click="handleClick">
+      <slot v-if="!icon"/>
+      <hd-hot-key v-if="nowKeyMap" :hot-key-range="hotKeyRange" :key-map="nowKeyMap" @do="click('hotkey')"/>
+    </i>
+
+  </el-tooltip>
+</template>
+
+<script>
+import BtnRight from './BtnRight'
+/**
+   * 通常为列表内用的按钮图标
+   * @module HdBtn
+   */
+export default {
+  name: 'HdBtn',
+  mixins: [BtnRight],
+  /**
+     * Props slot或者icon方式传入图标
+     * @prop {String} icon svgicon的名称,或者以slot形式传入
+     * @prop {String} hint 图标提示文字
+     * @prop {String} vid 按钮授权时,必须指定按钮id
+     */
+  /* props: ['icon', 'hint', 'vid'],*/
+  props: {
+    noRoleManage: Boolean, // 设置不受角色控制
+    keyMap: Array,
+    keyType: String,
+    hotKeyRange: { type: String, default: 'hd-com-grid' },
+    icon: String, // svgicon的名称,或者以slot形式传入
+    hint: String, // hint 图标提示文字
+    vid: String // 按钮指定id时,授权用不指定默认生成
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    addTextProp() {
+      let append = ''
+      if (this.$store.getters.isSuperAdmin && this.vid) {
+        append = '[' + this.vid + ']'
+      }
+
+      if (this.nowKeyMap && this.nowKeyMap.length == 2) {
+        return '(' + this.nowKeyMap[1].toUpperCase() + ')' + append
+      }
+      return '' + append
+    },
+    nowKeyMap() {
+      if (this.keyMap) {
+        return this.keyMap
+      } else if (this.keyType && this.$keyMap) { // $keyMap是在keymap.js配置的对象
+        return this.$keyMap[this.keyType]
+      }
+    }
+  },
+  created() { // 列表内循环,数量无法控制,需要手工加入
+    if (!this.noRoleManage) {
+      if (this.$route && this.$route.meta.btnRoleCheck) { // 角色管理下激活
+        this.addBtnMetaToParent()
+      }
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      if (this.$refs.hdbtn && this.$refs.hdbtn.referenceElm) { this.$refs.hdbtn.referenceElm.setAttribute('tabindex', -1) }
+    })
+    this.checkRight()
+  },
+  methods: {
+    getName() {
+      const parentName = this.$parent.$parent.$options.name
+      if (parentName == 'ElTable') {
+        return '[表格]_' + this.hint
+      }
+      return this.hint
+    },
+    getClass() {
+      return 'hdBtn ' + this.icon
+    },
+    getType() {
+      return 'hdBtn'
+    },
+    handleClick(evt) {
+      this.$emit('click', evt)
+    },
+    handleTooltipClick() {
+    },
+    click(evt) {
+      if (this.$attrs.disabled === undefined || this.$attrs.disabled === false) {
+        this.handleClick(evt)
+      }
+    }
+  }
+}
+
+</script>
+<style rel="stylesheet/scss" lang="scss">
+  .hdBtn {
+    cursor: pointer;
+  }
+</style>

package/src/hdcom/HdButton.vue

@@ -0,0 +1,137 @@
+<template>
+  <ExButton ref="elbtn"
+            v-bind="$attrs" v-if="btnRight" v-on="$listeners" :class="buttonClass">
+    {{nowText()}}
+    <hd-hot-key :hotKeyRange="hotKeyRange" :keyMap="nowKeyMap" @do="click('hotkey')" v-if="nowKeyMap"></hd-hot-key>
+  </ExButton>
+</template>
+
+<script>
+  import BtnRight from './BtnRight'
+
+  /**
+   * 继承之 ElButton 直接用ElButton
+   * HdButton和HdBtn覆写是为了进行按钮权限,校验形式:(name_按钮文字),没有name也行,但是如果一个菜单下多个同名按钮要分别控制就需要加name
+   * @module HdButton
+   */
+  export default {
+    name: 'HdButton',
+    mixins: [BtnRight],
+    data() {
+      return {
+        classmap: [
+          {name: "增加", value: "hd-bn bn-add"},
+          {name: "新增", value: "hd-bn bn-add"},
+          {name: "删除", value: "hd-bn bn-del"},
+          {name: "保存", value: "hd-bn bn-save"},
+          {name: "搜索", value: "hd-bn bn-search"},
+          {name: "查询", value: "hd-bn bn-search"},
+          {name: "复制", value: "hd-bn bn-copy"},
+          {name: "粘贴", value: "hd-bn bn-paste"},
+          {name: "作废", value: "hd-bn bn-docdel"},
+          {name: "新建文件夹", value: "hd-bn bn-folde"},
+          {name: "上传", value: "hd-bn bn-upload"},
+          {name: "下载", value: "hd-bn bn-download"},
+          {name: "切换查看模式", value: "hd-bn bn-sort"},
+          {name: "发起", value: "hd-bn bn-start"},
+          {name: "刷新", value: "hd-bn bn-refresh"},
+          {name: "导入", value: "hd-bn bn-import"},
+          {name: "设置", value: "hd-bn bn-setting"},
+          {name: "更新", value: "hd-bn bn-renew"},
+          {name: "选择", value: "hd-bn bn-selected"},
+          {name: "读取", value: "hd-bn bn-finished"},
+          {name: "预览", value: "hd-bn bn-view"},
+          {name: "生成", value: "hd-bn bn-create"},
+          {name: "确定", value: "hd-bn bn-fix"},
+          {name: "取消", value: "hd-bn bn-cancel"}]
+      }
+    },
+    inheritAttrs: false,
+    /**
+     * Props 继承ElButton的属性和事件
+     * @prop {Boolean} noRoleManage 设置是否按钮授权时,该按钮被扫描到
+     * @prop {Array} keyMap 绑定快捷键
+     * @prop {String} keyType 绑定快捷键类型,keyType='del'可在keymap.js中修改匹配,keyMap有值时,此无效
+     * @prop {String} hotKeyRange 快捷键的鼠标有效区域
+     * @prop {String} vid 按钮授权时,按钮id,此处可以不指定会根据页面名_title生成
+     */
+    props: {
+      noRoleManage: Boolean, // 设置不受角色控制
+      keyMap: Array,
+      keyType: String,
+      hotKeyRange: {type: String, default: 'hd-com-grid'},
+      vid: String, // 按钮指定id时,授权用不指定默认生成
+      customClass : {
+        type: String
+      }
+    },
+
+    components: {},
+    created() {
+      if (!this.noRoleManage) {
+        if (this.$route && this.$route.meta.btnRoleCheck) { // 角色管理下激活
+          this.addBtnMetaToParent()
+        }
+      }
+    },
+    mounted() {
+      this.checkRight()
+    },
+
+    computed: {
+      addTextProp() {
+        if (this.nowKeyMap && this.nowKeyMap.length == 2) {
+          return '(' + this.nowKeyMap[1].toUpperCase() + ')'
+        }
+        return ''
+      },
+      nowKeyMap() {
+        if (this.keyMap) {
+          return this.keyMap
+        } else if (this.keyType && this.$keyMap) {//$keyMap是在keymap.js配置的对象
+          return this.$keyMap[this.keyType]
+        }
+      },
+      buttonClass() {
+        let classObj = this.classmap.find(v => v.name == this.$slots.default[0].text.replace(/\s/g, ""));
+        // console.log(this.$slots.default[0].text.replace(/\s/g,""), classObj, 'buttonClass')
+        // console.log(this.customClass)
+        return classObj ? `${classObj.value} ${this.customClass}` : `hd-bn bn-finished ${this.customClass}`;
+      }
+    },
+    methods: {
+      nowText() {
+        if (!this.$slots.default || this.$slots.default.length == 0) {
+          return ''
+        }
+        if (this.$i18n) { // 国际化
+          //去掉2边空格
+          return this.$t(this.$slots.default[0].text.replace(/(^\s*)|(\s*$)/g, "")) + this.addTextProp
+        } else {
+          return this.$slots.default[0].text + this.addTextProp
+        }
+      },
+      addText(text) { // 快捷键自动增加(a)等
+        this.addTextProp = text
+      },
+      getName() {
+        if (!this.$slots.default || this.$slots.default.length == 0) {
+          return ''
+        }
+        return this.$slots.default[0].text.trim()
+      },
+      getClass(){
+        return this.buttonClass
+      },
+      getType(){
+        return 'hdButton'
+      },
+      click(evt) {
+        if (this.$attrs.disabled === undefined || this.$attrs.disabled === false) {
+          this.$refs.elbtn.handleClick(evt)
+        }
+      }
+    }
+  }
+
+</script>