hd-idevvue3 3.0.0 → 3.0.2

package/src/hdcom/HdTableColumn.vue

@@ -0,0 +1,334 @@
+<template>
+  <!--改动说明,btnRight 和isShow是该column是否显示,只在fixed:right时使用,-->
+  <div v-if="!btnRight||!isShow"></div>
+  <ExTableColumn :class-name="getClassName($attrs)" :label="$t($attrs.label)" :sortable="realSortable"
+    :width="autoWidth" :showOverflowTooltip="showOverflowTooltip" v-bind="$attrs" v-else-if="!$slots.default"
+    v-on="$listeners" :filters="filterData" :filter-method="isOpenFilter ? ()=>true : null">
+    <template slot="header" slot-scope="scope">
+      <slot name="header" :index="scope.$index" :row="scope.row">
+        {{$t($attrs.label)}}
+      </slot>
+    </template>
+    <template slot-scope="scope">
+      <slot :index="scope.$index" :row="scope.row">
+        <!--noEdit不允许编辑-->
+        <template v-if="scope.row.isEdit&&!noEdit">
+          <component :gridRow="scope.row" :idVal.sync="scope.row[$attrs.idVal]" :is="input"
+            :txtVal.sync="scope.row[$attrs.txtVal]" @blur="checkErr(scope.row)"
+            @change="(v)=>{$emit('change',v,scope.row)}" @selItem="(v)=>{selItem(scope.row,v)}" style="width: 100%;"
+            v-bind="inputProp" v-model="scope.row[$attrs.prop]"></component>
+        </template>
+        <template v-else-if="!isHtml">{{getValueByPath(scope.row, $attrs.prop)}}</template>
+        <template v-else>
+          <div v-html="getValueByPath(scope.row, $attrs.prop)"></div>
+        </template>
+      </slot>
+      <template v-if="scope.row.isEdit&&!noEdit">
+        <ErrHint :errMsg="scope.row['_err_'+$attrs.prop]" @checkErr="(v)=>{checkErr(scope.row,v)}"
+          v-model="scope.row[$attrs.prop]"></ErrHint>
+      </template>
+    </template>
+  </ExTableColumn>
+  <!--复合表头时,但是复合表头里的具体表头依然会进入第一个条件-->
+  <ExTableColumn :label="$t($attrs.label)" :sortable="realSortable" :width="autoWidth"
+    :showOverflowTooltip="showOverflowTooltip" v-bind="$attrs" v-else-if="$slots.default" v-on="$listeners">
+    <slot></slot>
+  </ExTableColumn>
+  <!--没啥用-->
+  <ExTableColumn :label="$t($attrs.label)" :sortable="realSortable" :width="autoWidth"
+    :showOverflowTooltip="showOverflowTooltip" v-bind="$attrs" v-else v-on="$listeners">
+  </ExTableColumn>
+</template>
+<script>
+import AsyncValidator from "async-validator";
+import BtnRight from "./BtnRight";
+
+/**
+ *覆盖ElTableColumn 主要增加行内编辑的校验,及增加inputProp input inputFormat selFormat属性(与高级查询配合),在多数情况可以不用写templeate
+ * @module HdTableColumn
+ */
+export default {
+  name: "ElTableColumn",
+  inheritAttrs: false,
+  components: {},
+  mixins: [BtnRight],
+  /**
+   * Props  input属性对应的自定义组件,行内编辑的特殊性,开发时,可能会使用以下属性和事件
+   * @prop {Object} gridRow 组件获取当前行数据
+   * @prop {Event} blur 触发校验
+   * @prop {String} txtVal 自定义下拉hdgridsel 选择文本内容
+   * @prop {String} idVal  自定义下拉hdgridsel 选择id值
+   * @prop {Event} selItem(row, v) 选择时触发selFormat(row, prop,sel)格式化
+   * @prop {Event} change(v) 对组件的change增加第2参数为当前行 参考onlineunloadform.vue的件重计算
+   */
+  /**
+   * Props  继承ElTableColumn的属性和事件,
+   * @prop {Object} 或String,可参考demo/hightquery,input 行内编辑或高级查询时,输入区的类型默认ElInput,系统或框架组件,可以直接写字符串,自定义组件需要这样写: :input="require('@/views/comgctos/sel_sbccargokind').default"
+   * @prop {Object} inputProp input对应的属性
+   * @prop {Function} inputFormat(value, row, prop) 展示时格式化,value当前值,row当前行,prop属性名
+   * @prop {Function} selFormat(row, prop,sel) 选择时格式化
+   * @prop {Boolean} noEdit 行内编辑时是否不编辑
+   * @prop {Boolean} noQuery 高级查询时,不计入选择
+   * @prop {event} @change(v,row) 对组件的change增加第2参数为当前行 参考onlineunloadform.vue的件重计算
+   * @prop {String} width 增加一个auto属性,会根据label自动计算宽度(国际化会自动展开)
+   * @prop {Boolean} showOverflowTooltip 是否缩进过长内容
+   */
+  props: {
+    input: {
+      // 输入类型
+      type: [String, Object],
+      default: function () {
+        // updTimFirst是因为会触发HdQuery的排序及查询,默认不让查询
+        return "ElInput";
+      },
+    },
+    inputProp: Object, // input的属性
+    inputFormat: Function, // result, object, prop 展示时格式化
+    selFormat: Function, // row, prop,sel 选择时格式化
+    noEdit: {
+      // 编辑时是否可编辑
+      type: Boolean,
+      default: function () {
+        return false;
+      },
+    },
+    noZeroHide: {
+      type: Boolean,
+      default: false,
+    },
+    noQuery: Boolean, // 不需要高级查询
+    sortable: {
+      // 排序只用custom不用前端排序
+      type: Boolean,
+      default: function () {
+        return false;
+      },
+    },
+    rules: Array, // 校验
+    perWidth: {
+      type: Number,
+      default: 12,
+    }, //每个字节的宽度(中文为2个字节)
+    showOverflowTooltip: {
+      // 编辑时是否可编辑
+      type: Boolean,
+      default: function () {
+        return true;
+      },
+    },
+    openFilter: {
+      type: Boolean,
+      default: function () {
+        return false;
+      },
+    },
+    isHtml: {
+      // 编辑时是否可编辑
+      type: Boolean,
+      default: function () {
+        return false;
+      },
+    },
+  },
+  mounted() {
+    this.isFixDo();
+    const comPar = this.getHdComGrid();
+    if (comPar) {
+      const allrules = comPar.validate; // hdcomgrid的rules
+      if (allrules && this.rules) {
+        allrules[this.$attrs.prop] = this.rules;
+      }
+      if (this.$attrs.prop && !this.noQuery) {
+        // 高级查询用
+        comPar.allColumn.push(this);
+      }
+    }
+    const hdPar = this.getHdGrid();
+    if (hdPar) {
+      hdPar.colThis.push(this);
+    }
+    // this.flushFilterData()
+  },
+  data() {
+    return {
+      comdata: null,
+      btnRight: true, // 按钮权限判断 浮动区 隐藏显示
+      isShow: true, // 是否显示
+      // filterData: null
+    };
+  },
+  updated() {},
+  methods: {
+    isFixDo() {
+      // 浮动区权限控制
+      if (this.$attrs.fixed && this.$attrs.fixed == "right") {
+        // 剧右的是按钮,左侧的不管
+        this.addBtnMetaToParent();
+        this.checkRight();
+        this.getHdComGrid().columnFlowThis = this;
+      }
+    },
+    getName() {
+      // 按钮权限控制
+      return this.$t("列表浮动区");
+    },
+    selItem(row, data) {
+      if (this.selFormat) {
+        // 有format的情况
+        return this.selFormat(row, this.$attrs.prop, data);
+      }
+    },
+    checkErr(row) {
+      this.validate(row[this.$attrs.prop], (msg) => {
+        this.$set(row, "_err_" + this.$attrs.prop, msg);
+      });
+    },
+    getRules() {
+      const comPar = this.getHdComGrid();
+      if (comPar) {
+        const allrules = comPar.validate; // hdcomgrid的rules
+        return allrules;
+      } else {
+        return false;
+      }
+    },
+    getHdComGrid() {
+      let par = this.$parent;
+      while (par) {
+        if (par.$options.name == "HdComGrid") {
+          return par;
+        }
+        par = par.$parent;
+      }
+      return null;
+    },
+    getHdGrid() {
+      let par = this.$parent;
+      while (par) {
+        if (par.$options.name == "HdGrid") {
+          return par;
+        }
+        par = par.$parent;
+      }
+      return null;
+    },
+    validate(data, callback) {
+      var descriptor = {};
+      const rules = this.getRules();
+      if (!rules) {
+        return false;
+      }
+      const oneRule = rules[this.$attrs.prop];
+      if (!oneRule) {
+        return false;
+      }
+      descriptor[this.$attrs.prop] = oneRule;
+      var validator = new AsyncValidator(descriptor);
+      var model = {};
+      model[this.$attrs.prop] = data;
+      validator.validate(model, { firstFields: true }, (errors, fields) => {
+        callback(errors ? errors[0].message : "");
+      });
+    },
+    getValueByPath(row, prop) {
+      // 支持多级
+      prop = prop || "";
+      const paths = prop.split(".");
+      let current = row;
+      let result = null;
+      for (let i = 0, j = paths.length; i < j; i++) {
+        const path = paths[i];
+        if (!current) break;
+
+        if (i === j - 1) {
+          result = current[path];
+          break;
+        }
+        current = current[path];
+      }
+      if (this.inputFormat) {
+        // 有format的情况
+        return this.inputFormat(result, row, prop);
+      } else {
+        if (this.$attrs.txtVal) {
+          return row[this.$attrs.txtVal];
+        } else if (result === 0 && !this.noZeroHide) {
+          return "";
+        } else {
+          return result;
+        }
+      }
+    },
+    getRealWidth(str) {
+      //获取字符长度,中文为2英文为1
+      let l = str.length;
+      let blen = 0;
+      for (let i = 0; i < l; i++) {
+        if ((str.charCodeAt(i) & 0xff00) != 0) {
+          blen++;
+        }
+        blen++;
+      }
+      return blen;
+    },
+    getClassName(attr) {
+      let c1 = attr["class-name"] ? attr["class-name"] : "";
+      let c2 = attr.fixed ? `backFF` : "";
+      return c2 + c1;
+    },
+  },
+  computed: {
+    autoWidth() {
+      //增加一个auto属性
+      if (this.$attrs.width == "auto") {
+        if (this.$attrs.label) {
+          return (
+            this.perWidth * this.getRealWidth(this.$t(this.$attrs.label)) + 17
+          );
+        } else {
+          return 100;
+        }
+      } else {
+        return this.$attrs.width;
+      }
+    },
+    filterData() {
+      if (
+        this.getHdComGrid() &&
+        this.getHdComGrid().hdResult &&
+        this.getHdComGrid().hdResult._rows
+      ) {
+        let filter = [];
+        let obj = {};
+
+        this.getHdComGrid().hdResult._rows.forEach((row) => {
+          let value = row[this.$attrs.prop] || null;
+          let text = this.getValueByPath(row, this.$attrs.prop) || "";
+
+          if (!obj[value]) {
+            obj[value] = { number: 1, text: text };
+          } else {
+            obj[value].number++;
+          }
+        });
+        this.$nextTick((v) => {
+          Object.keys(obj).forEach((v) => {
+            filter.push({ text: `${obj[v].text}(${obj[v].number})`, value: v });
+          });
+        });
+        // console.log('filterData', this.getHdComGrid().hdResult._rows, filter)
+        return filter;
+      }
+    },
+    isOpenFilter() {
+      return this.openFilter && this.$attrs.label != "操作";
+    },
+    realSortable() {
+      // return this.sortable
+      return this.sortable ? "custom" : false;
+    },
+  },
+};
+</script>
+
+

package/src/hdcom/HdTempSave.vue

@@ -0,0 +1,140 @@
+<template>
+  <span>
+
+  <el-dropdown @command="handleCommand">
+   <span class="el-dropdown-link">
+      <a @click="save">{{$t('存盘')}}</a>
+     <i class="el-icon-arrow-down el-icon--right"></i></span>
+    <el-dropdown-menu slot="dropdown" style="max-height: 400px;overflow: auto">
+    <el-dropdown-item :command="lastAuto" v-if="lastAuto">{{lastAuto.title}}</el-dropdown-item>
+      <el-dropdown-item divided></el-dropdown-item>
+      <el-dropdown-item v-for="(item, key, index) in allTemp" :key="item.id" :command="item">
+              <div v-if="!item.isEdit">
+        {{item.title}} &nbsp;&nbsp;<i class="el-icon-edit" @click.stop="rename(item)"></i>
+               &nbsp; <i class="el-icon-delete" @click.stop="remove(item)"></i>
+        </div>
+      </el-dropdown-item>
+    </el-dropdown-menu>
+  </el-dropdown>
+    </span>
+</template>
+
+<script>
+  /**
+   * 页面暂存,实现模板和定时save,由于有定时任务,在页面关闭时需要写v-if,触发关闭定时任务
+   * @module HdTempSave
+   */
+  export default {
+    name: 'HdTempSave',
+    data() {
+      return {
+        allTemp: [],
+        lastAuto: {},
+        timeInterval: null
+      }
+    },
+    inheritAttrs: false,
+    /**
+     * Props
+     * @prop {Function} saveFun 备份时的存储
+     * @prop {event} reload 还原时的触发事件
+     * @prop {boolean}  auto true会自动保存(5秒),弹窗必须加v-if 来关闭定时
+     */
+    props: ['saveFun', 'auto'],
+    mounted() {
+      this.find()
+      this.findAuto()
+    },
+    beforeDestroy() {
+      console.info("close")
+      this.close()
+    },
+    methods: {
+      save() {
+        let ts = new Date().getTime()
+        //id是唯一标识,disName是当前页面区分
+        let obj = {id: ts, disName: this.$route.name, title: new Date().format("MM-dd HH:mm"), result: this.saveFun()}
+        let tempStore = localStorage.getItem('HdTempStore')
+        let storeObj = []
+        if (tempStore) {
+          storeObj = JSON.parse(tempStore)
+        }
+        storeObj.unshift(obj)
+        localStorage.setItem('HdTempStore', JSON.stringify(storeObj))
+        this.find()
+      },
+      saveForAuto() {
+        let ts = new Date().getTime()
+        //id是唯一标识,disName是当前页面区分
+        let obj = {
+          id: ts,
+          disName: this.$route.name,
+          title: this.$t('自动存盘') + new Date().format("MM-dd HH:mm"),
+          result: this.saveFun()
+        }
+        localStorage.setItem('HdTempAutoStore' + this.$route.name, JSON.stringify(obj))
+      },
+      find() {
+        let tempStore = localStorage.getItem('HdTempStore')
+        if (!tempStore) {
+            return;
+        }
+        let storeObj = JSON.parse(tempStore)
+        this.allTemp = storeObj.filter(v => v.disName == this.$route.name)
+      },
+      findAuto() {
+        let tempStore = localStorage.getItem('HdTempAutoStore' + this.$route.name)
+        this.lastAuto = JSON.parse(tempStore)
+      },
+      remove(item) {
+        let tempStore = localStorage.getItem('HdTempStore')
+        let storeObj = JSON.parse(tempStore)
+        let newSt = storeObj.filter(v => v.id != item.id)
+        localStorage.setItem('HdTempStore', JSON.stringify(newSt))
+        this.find()
+      },
+      rename(item) {
+        this.$prompt(this.$t('请输入名称'), this.$t('提示'), {}).then(({value}) => {
+          let tempStore = localStorage.getItem('HdTempStore')
+          let storeObj = JSON.parse(tempStore)
+          let newSt = storeObj.map(v => {
+            if (v.id == item.id) {
+              v.title = value
+            }
+            return v
+          })
+          localStorage.setItem('HdTempStore', JSON.stringify(newSt))
+          this.find()
+        }).catch(() => {
+        })
+      },
+      autoSave() {
+        this.timeInterval = setInterval(() => {
+          this.saveForAuto()
+        }, 5000)
+      },
+      close() {
+        if (this.timeInterval)
+          clearInterval(this.timeInterval)
+        this.timeInterval = null
+      },
+      handleCommand(cmd) {
+        if (cmd && cmd.result)
+          this.$emit('reload', cmd.result)
+      }
+    },
+    watch: {
+      'auto': {//定时执行
+        immediate: true,
+        handler(newVal) {
+          if (newVal) {
+            this.autoSave()
+          } else {
+            this.close()
+          }
+        }
+      }
+    }
+  }
+
+</script>

package/src/hdcom/HdTree.vue

@@ -0,0 +1,86 @@
+<template>
+  <div style="height: 100%;overflow: auto">
+    <el-tree :expand-on-click-node="false" :renderContent="myrenderContent" highlight-current node-key="id" ref="eltree"
+             v-bind="$attrs" v-on="$listeners">
+    </el-tree>
+  </div>
+</template>
+
+<script>
+  /**
+   * HdTree 对 ElTree 封装了一些样式 idev8请使用EzTreeBean,能控制到展示与伸缩 可参考orgTree和orgnselect(下拉树)
+   * @module HdNum
+   */
+  export default {
+    name: 'HdTree',
+    data() {
+      return {}
+    },
+    inheritAttrs: false,
+    updated() {
+      const treeData = this.$attrs.data
+      const rs = []
+      this.initChecked(treeData, rs)
+      if (rs) {
+        this.$refs.eltree.setCheckedNodes(rs)
+      }
+    },
+    methods: {
+      getCheckedNodes(onlyLeaf = true) {
+        return this.$refs.eltree.getCheckedNodes(onlyLeaf)
+      },
+      initChecked(treeData, rs) {
+        if (!treeData) {
+          return false
+        }
+        for (let i = 0; i < treeData.length; i++) {
+          const one = treeData[i]
+          if (one.checked == 'Y') {
+            rs.push(one)
+          }
+          if (one.children) {
+            this.initChecked(one.children, rs)
+          }
+        }
+      },
+      myrenderContent(h, {node, data, store}) {
+        if (data.state == 'open') {
+          node.expanded = true
+        }
+        //        if (data.checked == 'Y') {
+        //
+        //          //node.checked = true
+        // //          let par = node.parent
+        // //          while (par) {
+        // //            if (par.checked) {
+        // //              break;
+        // //            }
+        // //            par.indeterminate = true
+        // //            par = par.parent
+        // //          }
+        //        }
+        return h('span', {
+          'class': {
+            'el-tree-node__label': true
+          },
+          style: {
+            'width': 'auto',
+            'padding-right': '10px'
+          }
+        }, [h('i', {
+          'class': {
+            'el-icon-star-off': true
+          },
+          style: {
+            'paddingRight': '4px'
+          }
+        }), h('span', {
+          'class': {
+            'el-tree-node__label': true
+          }
+        }, data.text)])
+      }
+    }
+  }
+
+</script>

package/src/hdcom/HdTreeTable/eval.js

@@ -0,0 +1,34 @@
+/**
+ * @Author: jianglei
+ * @Date:   2017-10-12 12:06:49
+ */
+'use strict'
+import {createApp} from 'vue'
+const Vue = createApp({})
+
+export default function treeToArray(data, expandAll, parent = null, level = null) {
+  let tmp = []
+  Array.from(data).forEach(function(record) {
+    if (record.state === 'open') {
+      record._expanded = true
+    }
+    if (record._expanded === undefined) {
+      Vue.set(record, '_expanded', expandAll)
+    }
+    let _level = 1
+    if (level !== undefined && level !== null) {
+      _level = level + 1
+    }
+    Vue.set(record, '_level', _level)
+    // 如果有父元素
+    if (parent) {
+      Vue.set(record, 'parent', parent)
+    }
+    tmp.push(record)
+    if (record.children && record.children.length > 0) {
+      const children = treeToArray(record.children, expandAll, record, _level)
+      tmp = tmp.concat(children)
+    }
+  })
+  return tmp
+}