@smallwei/avue 3.8.5 → 3.8.6

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

@@ -1,353 +0,0 @@
-<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.js";
-import props from "../../core/common/props.js";
-import event from "../../core/common/event.js";
-import { getColumn } from '../../../utils/util.js'
-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/lib/packages/element-plus/flow/index.vue

@@ -1,339 +0,0 @@
-<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.js";
-import locale from "../../../core/locale.js";
-import flowNode from './node.vue'
-import { randomId } from '../../../utils/util.js';
-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>