@smallwei/avue 3.8.1 → 3.8.3

package/es/packages/element-plus/dynamic/index.vue

@@ -0,0 +1,353 @@
+<template>
+  <div :class="b()"
+       :key="reload">
+    <template v-if="isForm">
+      <div :class="b('header')">
+        <el-button :size="size"
+                   circle
+                   v-if="!readonly && !disabled && !addBtn"
+                   :disabled="disabled"
+                   type="primary"
+                   icon="el-icon-plus"
+                   @click="addRow"></el-button>
+      </div>
+      <div>
+        <div v-for="(item,index) in text"
+             :class="b('row')"
+             :key="index"
+             @mouseenter="cellMouseenter({$index:index})"
+             @mouseleave="cellMouseLeave({$index:index})">
+          <el-button v-if="!readonly && !disabled  && !delBtn && hoverList[index]"
+                     @click="delRow(item.$index)"
+                     type="danger"
+                     :class="b('menu')"
+                     :size="size"
+                     :disabled="disabled"
+                     icon="el-icon-delete"
+                     circle></el-button>
+          <avue-form :key="index"
+                     ref="main"
+                     :table-data="{row:text[index],index}"
+                     :option="option"
+                     v-bind="$uploadFun(null,this)"
+                     v-model="text[index]">
+            <template #index="{}">
+              <span>{{item.$index+1}}</span>
+            </template>
+            <template v-for="item in columnSlot"
+                      #[item]="scope">
+              <slot v-bind="Object.assign(scope,{
+                  row:text[index]
+                })"
+                    :name="item"></slot>
+            </template>
+          </avue-form>
+        </div>
+      </div>
+    </template>
+    <avue-crud v-else-if="isCrud"
+               ref="main"
+               :option="option"
+               :disabled="disabled"
+               v-bind="$uploadFun(null,this)"
+               @cell-mouse-enter="cellMouseenter"
+               @cell-mouse-leave="cellMouseLeave"
+               @selection-change="handleSelectionChange"
+               @sortable-change="handleSortableChange"
+               :data="text">
+      <template #index-header="{}">
+        <el-button v-if="!(addBtn || readonly) && maxFlag"
+                   @click="addRow()"
+                   type="primary"
+                   :size="size"
+                   :disabled="disabled"
+                   icon="el-icon-plus"
+                   circle></el-button>
+      </template>
+      <template #index="scope">
+        <el-button v-if="!readonly && !disabled  && !delBtn && hoverList[scope.row.$index]"
+                   @click="delRow(scope.row.$index)"
+                   type="danger"
+                   :size="size"
+                   :disabled="disabled"
+                   icon="el-icon-delete"
+                   circle></el-button>
+        <div v-else>{{scope.row.$index+1}}</div>
+      </template>
+      <template v-for="item in columnSlot"
+                #[getSlotName({prop:item},`F`)]="scope">
+        <slot v-bind="scope"
+              :name="item"></slot>
+      </template>
+
+    </avue-crud>
+  </div>
+</template>
+
+<script>
+import create from "../../../core/create.mjs";
+import props from "../../core/common/props.mjs";
+import event from "../../core/common/event.mjs";
+import { getColumn } from '../../../utils/util.mjs'
+export default create({
+  name: "dynamic",
+  mixins: [props(), event()],
+  data () {
+    return {
+      reload: Math.random(),
+      hoverList: []
+    }
+  },
+  props: {
+    uploadSized: Function,
+    uploadBefore: Function,
+    uploadAfter: Function,
+    uploadDelete: Function,
+    uploadPreview: Function,
+    uploadError: Function,
+    uploadExceed: Function,
+    max: Number,
+    boxType: String,
+    columnSlot: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    children: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    }
+  },
+  computed: {
+    isAdd () {
+      return this.boxType === "add"
+    },
+    isEdit () {
+      return this.boxType === "edit"
+    },
+    isView () {
+      return this.boxType === "view"
+    },
+    textLen () {
+      return this.text.length;
+    },
+    maxFlag () {
+      if (this.max) {
+        return !(this.text.length == this.max)
+      }
+      return true
+    },
+    showIndex () {
+      return this.validData(this.children.index, true)
+    },
+    showType () {
+      return this.children.type || 'crud'
+    },
+    isForm () {
+      return this.showType === 'form'
+    },
+    isCrud () {
+      return this.showType === 'crud'
+    },
+    selectionChange () {
+      return this.children.selectionChange
+    },
+    sortableChange () {
+      return this.children.sortableChange
+    },
+    rowAdd () {
+      return this.children.rowAdd
+    },
+    rowDel () {
+      return this.children.rowDel
+    },
+    viewBtn () {
+      return this.children.viewBtn === false
+    },
+    addBtn () {
+      return this.children.addBtn === false
+    },
+    delBtn () {
+      return this.children.delBtn === false
+    },
+    valueOption () {
+      let result = {};
+      this.columnOption.forEach(ele => {
+        if (ele.value) {
+          result[ele.prop] = ele.value;
+        }
+      })
+      return result;
+    },
+    rulesOption () {
+      let rules = {};
+      this.columnOption.forEach(ele => {
+        if (ele.rules) {
+          rules[ele.prop] = ele.rules;
+        }
+      })
+      return rules;
+    },
+    columnOption () {
+      return getColumn(this.children.column)
+    },
+    option () {
+      // 默认选项
+      let options = {
+        boxType: this.boxType,
+        border: true,
+        header: false,
+        menu: false,
+        size: this.size,
+        disabled: this.disabled,
+        readonly: this.readonly,
+        menuBtn: false,
+      };
+
+      // 处理子选项
+      let childOptions = this.deepClone(this.children);
+      delete childOptions.column;
+
+      let columnOption = this.deepClone(this.columnOption);
+      const callback = (list) => {
+        list.forEach((ele, index) => {
+          if (ele.children && Array.isArray(ele.children)) callback(ele.children)
+          else {
+            list[index] = {
+              ...ele,
+              ...{
+                hide: this.validData(ele.hide, !this.validParams(ele, 'display', true)),
+                disabled: this.validParams(ele, 'disabled', false),
+                detail: this.validParams(ele, 'detail', false),
+                cell: this.validData(ele.cell, this.isCrud)
+              }
+            }
+          }
+        })
+      }
+      callback(columnOption)
+      // 处理列选项
+      columnOption.unshift({
+        label: this.children.indexLabel || '#',
+        prop: 'index',
+        display: this.showIndex,
+        hide: !this.showIndex,
+        fixed: true,
+        align: 'center',
+        headerAlign: 'center',
+        span: 24,
+        width: 60
+      })
+
+      // 返回合并后的选项对象
+      return {
+        ...options,
+        ...{ column: columnOption },
+        ...childOptions
+      };
+    }
+  },
+  mounted () {
+    this.initData();
+  },
+  methods: {
+    validParams (column, type, value) {
+      function replaceStr (str) { // 正则法
+        str = str.toLowerCase();
+        var reg = /\b(\w)|\s(\w)/g; //  \b判断边界\s判断空格
+        return str.replace(reg, function (m) {
+          return m.toUpperCase()
+        });
+      }
+      let key, caseKey = replaceStr(type);
+      if (!this.validatenull(column[type])) {
+        key = type
+      } else if (this.isAdd) {
+        key = 'add' + caseKey
+      } else if (this.isEdit) {
+        key = 'edit' + caseKey
+      } else if (this.isView) {
+        key = 'view' + caseKey
+      }
+      return this.validData(column[key], value)
+    },
+    handleTextValue (val) {
+      this.initData();
+    },
+    handleSelectionChange (val) {
+      this.selectionChange && this.selectionChange(val);
+    },
+    handleSortableChange (oldindex, newindex, row, list) {
+      this.sortableChange && this.sortableChange(oldindex, newindex, row, list);
+    },
+    cellMouseenter (row) {
+      let index = row.$index;
+      this.mouseoverRow(index);
+    },
+    cellMouseLeave (row, column, cell, event) {
+      let index = row.$index;
+      this.mouseoutRow(index)
+    },
+    initData () {
+      this.text.forEach((ele, index) => {
+        ele = Object.assign(ele, {
+          $cellEdit: true,
+          $index: index,
+        })
+      })
+    },
+    mouseoverRow (index) {
+      if (this.delBtn) return
+      this.flagList();
+      this.hoverList[index] = true;
+    },
+    mouseoutRow (index) {
+      if (this.delBtn) return
+      this.flagList();
+      this.hoverList[index] = false
+    },
+    flagList () {
+      this.hoverList.forEach((ele, index) => {
+        ele = false;
+      })
+    },
+    delRow (index) {
+      const callback = () => {
+        let list = this.deepClone(this.text)
+        list.splice(index, 1);
+        this.text = list;
+        this.reload = Math.random();
+      }
+      if (typeof this.rowDel === 'function') {
+        this.rowDel(this.text[index], callback);
+      } else {
+        callback();
+      }
+    },
+    addRow () {
+      const callback = (obj = {}) => {
+        let row = this.deepClone({
+          ...this.valueOption,
+          ...obj,
+          ...{
+            $index: this.textLen
+          }
+        })
+        if (this.isCrud) {
+          this.$refs.main.rowCellAdd(row);
+        } else if (this.isForm) {
+          this.text.push(row)
+        }
+      }
+      if (typeof this.rowAdd === 'function') {
+        this.rowAdd(callback);
+      } else {
+        callback();
+      }
+    }
+  }
+});
+</script>

package/es/packages/element-plus/flow/index.vue

@@ -0,0 +1,339 @@
+<template>
+  <div :class="b()"
+       :style="styleName">
+    <div :id="id"
+         :style="styleName">
+      <div class="avue-grid"></div>
+      <template v-for="(node,index) in option.nodeList">
+        <flow-node :node="node"
+                   :id="node.id"
+                   v-if="!node.display"
+                   @click="handleClick(node)"
+                   @changeNodeSite="changeNodeSite"
+                   :index="index"
+                   :active="active"
+                   :key="index">
+          <template #header="{node}">
+            <slot name="header"
+                  :node="node">
+            </slot>
+          </template>
+          <template #="{node}">
+            <slot :node="node"></slot>
+          </template>
+        </flow-node>
+      </template>
+
+    </div>
+  </div>
+</template>
+
+<script>
+import create from "../../../core/create.mjs";
+import locale from "../../../core/locale.mjs";
+import flowNode from './node.vue'
+import { randomId } from '../../../utils/util.mjs';
+export default create({
+  name: "flow",
+  mixins: [locale],
+  components: {
+    flowNode
+  },
+  data () {
+    return {
+      active: '',
+      jsPlumb: {},
+      id: '',
+      // 默认设置参数
+      jsplumbSetting: {
+        // 动态锚点、位置自适应
+        Anchors: ['Top', 'TopCenter', 'TopRight', 'TopLeft', 'Right', 'RightMiddle', 'Bottom', 'BottomCenter', 'BottomRight', 'BottomLeft', 'Left', 'LeftMiddle'],
+        Container: '',
+        // 连线的样式 StateMachine、Flowchart
+        Connector: 'Flowchart',
+        // 鼠标不能拖动删除线
+        ConnectionsDetachable: false,
+        // 删除线的时候节点不删除
+        DeleteEndpointsOnDetach: false,
+        // 连线的端点
+        // Endpoint: ["Dot", {radius: 5}],
+        Endpoint: ['Rectangle', { height: 10, width: 10 }],
+        // 线端点的样式
+        EndpointStyle: { fill: 'rgba(255,255,255,0)', outlineWidth: 1 },
+        LogEnabled: true, // 是否打开jsPlumb的内部日志记录
+        // 绘制线
+        PaintStyle: { stroke: 'black', strokeWidth: 3 },
+        // 绘制箭头
+        Overlays: [['Arrow', { width: 12, length: 12, location: 1 }]],
+        RenderMode: 'svg'
+      },
+      // jsplumb连接参数
+      jsplumbConnectOptions: {
+        isSource: true,
+        isTarget: true,
+        // 动态锚点、提供了4个方向 Continuous、AutoDefault
+        anchor: 'Continuous'
+      },
+
+      jsplumbSourceOptions: {
+        filter: '.avue-flow__node-drag', /* "span"表示标签，".className"表示类，"#id"表示元素id*/
+        filterExclude: false,
+        anchor: 'Continuous',
+        allowLoopback: false
+      },
+      jsplumbTargetOptions: {
+        filter: '.avue-flow__node-drag', /*"span"表示标签，".className"表示类，"#id"表示元素id */
+        filterExclude: false,
+        anchor: 'Continuous',
+        allowLoopback: false
+      },
+      loadEasyFlowFinish: false,
+    }
+  },
+  props: {
+    modelValue: {
+      type: String,
+      default: () => {
+        return {}
+      }
+    },
+    option: {
+      type: Object
+    },
+    width: {
+      type: [Number, String],
+      default: '100%'
+    },
+    height: {
+      type: [Number, String],
+      default: '100%'
+    }
+  },
+  created () {
+    this.id = randomId();
+    this.jsplumbSetting.Container = this.id;
+  },
+  mounted () {
+    this.init();
+  },
+  watch: {
+    modelValue: {
+      handler (val) {
+        this.active = val;
+      },
+      immediate: true
+    },
+    active (val) {
+      this.$emit('update:modelValue', val)
+    }
+  },
+  computed: {
+    styleName () {
+      return {
+        position: 'relative',
+        width: this.setPx(this.width),
+        height: this.setPx(this.height)
+      }
+    }
+  },
+  methods: {
+    init () {
+      this.jsPlumb = jsPlumb.getInstance()
+      this.$nextTick(() => {
+        this.jsPlumbInit()
+      })
+    },
+    handleClick (node) {
+      this.$emit('click', node)
+    },
+    // 是否具有该线
+    hasLine (from, to) {
+      for (var i = 0; i < this.data.lineList.length; i++) {
+        var line = this.data.lineList[i]
+        if (line.from === from && line.to === to) {
+          return true
+        }
+      }
+      return false
+    },
+    // 是否含有相反的线
+    hashOppositeLine (from, to) {
+      return this.hasLine(to, from)
+    },
+    // 删除线
+    deleteLine (from, to) {
+      this.option.lineList = this.option.lineList.filter(function (line) {
+        return line.from !== from && line.to !== to
+      })
+    },
+    // 改变连线
+    changeLine (oldFrom, oldTo) {
+      this.deleteLine(oldFrom, oldTo)
+    },
+    // 改变节点的位置
+    changeNodeSite ({ index, left, top }) {
+      for (var i = 0; i < this.option.nodeList.length; i++) {
+        let node = this.option.nodeList[i]
+        if (i === index) {
+          this.option.nodeList[i].left = left;
+          this.option.nodeList[i].top = top
+        }
+      }
+    },
+    //删除节点
+    deleteNode (nodeId) {
+      this.$confirm(this.t('flow.deleteNodeConfirm', { nodeId }), this.t('common.tip'), {
+        confirmButtonText: this.t('common.submitBtn'),
+        cancelButtonText: this.t('common.cancelBtn'),
+        type: 'warning',
+        closeOnClickModal: false
+      }).then(() => {
+        this.option.nodeList.forEach(node => {
+          if (node.id === nodeId) {
+            node.display = true;
+          }
+        })
+        this.$nextTick(function () {
+          this.jsPlumb.removeAllEndpoints(nodeId);
+        })
+      }).catch(() => {
+      })
+      return true
+    },
+    // 添加新的节点
+    addNode (name) {
+      const index = this.option.nodeList.length;
+      let nodeId = 'node' + index
+      this.option.nodeList.push({
+        id: 'node' + index,
+        name: name,
+        left: 0,
+        top: 0,
+      })
+      this.$nextTick(function () {
+
+        this.jsPlumb.makeSource(nodeId, this.jsplumbSourceOptions)
+
+        this.jsPlumb.makeTarget(nodeId, this.jsplumbTargetOptions)
+
+        this.jsPlumb.draggable(nodeId, {
+          containment: 'parent'
+        })
+
+      })
+    },
+    loadEasyFlow () {
+      // 初始化节点
+      for (var i = 0; i < this.option.nodeList.length; i++) {
+        let node = this.option.nodeList[i]
+        // 设置源点，可以拖出线连接其他节点
+        this.jsPlumb.makeSource(node.id, this.jsplumbSourceOptions)
+        // // 设置目标点，其他源点拖出的线可以连接该节点
+        this.jsPlumb.makeTarget(node.id, this.jsplumbTargetOptions)
+        this.jsPlumb.draggable(node.id)
+      }
+
+      // 初始化连线
+      for (var i = 0; i < this.option.lineList.length; i++) {
+        let line = this.option.lineList[i]
+        this.jsPlumb.connect({
+          source: line.from,
+          target: line.to
+        }, this.jsplumbConnectOptions)
+      }
+      this.$nextTick(function () {
+        this.loadEasyFlowFinish = true
+      })
+    },
+    jsPlumbInit () {
+      const _this = this
+      this.jsPlumb.ready(function () {
+        // 导入默认配置
+        _this.jsPlumb.importDefaults(_this.jsplumbSetting)
+        // 会使整个jsPlumb立即重绘。
+        _this.jsPlumb.setSuspendDrawing(false, true)
+        // 初始化节点
+        _this.loadEasyFlow()
+
+        // 单点击了连接线,
+        _this.jsPlumb.bind('click', function (conn, originalEvent) {
+          console.log('click', conn)
+
+          _this.$confirm(_this.t('flow.deleteLineConfirm'), _this.t('common.tip'), {
+            confirmButtonText: _this.t('common.submitBtn'),
+            cancelButtonText: _this.t('common.cancelBtn'),
+            type: 'warning'
+          }).then(() => {
+            _this.jsPlumb.deleteConnection(conn)
+          }).catch(() => {
+          })
+        })
+        // 连线
+        _this.jsPlumb.bind('connection', function (evt) {
+          console.log('connection', evt)
+          let from = evt.source.id
+          let to = evt.target.id
+          if (_this.loadEasyFlowFinish) {
+            _this.option.lineList.push({
+              from: from,
+              to: to
+            })
+          }
+        })
+
+        // 删除连线
+        _this.jsPlumb.bind('connectionDetached', function (evt) {
+          console.log('connectionDetached', evt)
+          _this.deleteLine(evt.sourceId, evt.targetId)
+        })
+
+        // 改变线的连接节点
+        _this.jsPlumb.bind('connectionMoved', function (evt) {
+          console.log('connectionMoved', evt)
+          _this.changeLine(evt.originalSourceId, evt.originalTargetId)
+        })
+
+        // 单击endpoint
+        // jsPlumb.bind("endpointClick", function (evt) {
+        //   console.log('endpointClick', evt)
+        // })
+        //
+        // // 双击endpoint
+        // jsPlumb.bind("endpointDblClick", function (evt) {
+        //   console.log('endpointDblClick', evt)
+        // })
+
+        // contextmenu
+        _this.jsPlumb.bind('contextmenu', function (evt) {
+          console.log('contextmenu', evt)
+        })
+
+        // beforeDrop
+        _this.jsPlumb.bind('beforeDrop', function (evt) {
+          console.log('beforeDrop', evt)
+          let from = evt.sourceId
+          let to = evt.targetId
+          if (from === to) {
+            _this.$message.error(_this.t('flow.noSelfConnect'))
+            return false
+          }
+          if (_this.hasLine(from, to)) {
+            _this.$message.error(_this.t('flow.noDuplicateConnect'))
+            return false
+          }
+          if (_this.hashOppositeLine(from, to)) {
+            _this.$message.error(_this.t('flow.noLoopConnect'))
+            return false
+          }
+          return true
+        })
+
+        // beforeDetach
+        _this.jsPlumb.bind('beforeDetach', function (evt) {
+          console.log('beforeDetach', evt)
+        })
+      })
+    }
+  }
+});
+</script>