simple-frame-unit 1.0.2

package/src/components/ed-base-vue/package/EdTableEditor/src/EdTableEditor.vue

@@ -0,0 +1,282 @@
+<template>
+  <component class="es-box-card ed-table-editor-card" :is="tempName" :title="title" :shadow="shadow" :body-style="bodyStyle" :is-title="isTitle">
+    <template #operate>
+      <slot name="extra">
+        <el-button v-if="isAdd" icon="el-icon-plus" size="small" type="text" @click="handleAdd">新增</el-button>
+      </slot>
+    </template>
+
+    <el-form ref="ElForm" :model="form" :rules="rules">
+      <el-table ref="ElTable" :data="form.data" v-bind="_bindTableAttrs()" v-on="tableOn" v-loading="loading">
+        <!-- 是否显示拖拽-->
+        <el-table-column v-if="isDrag" align="center" class-name="ed-drag--cursor_move" width="40px">
+          <i class="el-icon-rank"></i>
+        </el-table-column>
+
+        <!-- element-ui table-column组件 -->
+        <template v-for="(col, index) in columns">
+          <el-table-column :key="index" v-bind="col">
+            <!-- table-column 作用域插槽； type 为 index / selection 时直接显示序号  -->
+            <template v-if="!col.type || !['selection', 'index'].includes(col.type)" v-slot:default="scope">
+              <!-- 对外暴露的作用域插槽 -->
+              <slot :data="form.data[scope.$index]" :name="col.prop" v-bind="scope">
+                <!-- 判断是否定义了children 属性 -->
+                <template v-if="col.children">
+                  <!-- children 为字符串类型, 直接渲染 span 标签 -->
+                  <span v-if="typeof col.children === 'string'">{{ col.children }}</span>
+
+                  <!-- children 为其它类型, 则按照动态组件渲染 -->
+                  <el-form-item :prop="`data.${scope.$index}.${col.prop}`" :rules="rules[col.prop]">
+                    <!-- 组件 -->
+                    <component :is="col.children.tags"
+                               v-model="scope.row[col.children.valueKey || col.prop]"
+                               :class="col.children.class"
+                               :style="col.children.style"
+                               v-bind="getAttrs(scope, col.children)"
+                               @change="emitChange(col, $event, scope.row, scope.$index)"
+                               @input="handleChange(col.children.valueKey || col.prop, scope.$index, $event)">
+                      <template v-if="col.children.options">
+                        <ed-option-slot
+                            v-for="(option, index) of col.children.options"
+                            :key="index"
+                            :data="option"
+                            :optionAttrs="option.attrs"
+                            :tags="col.children.tags"
+                        ></ed-option-slot>
+                      </template>
+                    </component>
+                  </el-form-item>
+                </template>
+
+                <!-- 没有定义children则这显示对应的文本值 -->
+                <template v-else>{{ col.prop && getContentText(scope, col) }}</template>
+              </slot>
+            </template>
+          </el-table-column>
+
+          <!-- type 为 index / selection -->
+          <!-- <el-table-column v-if="col.type && ['selection', 'type'].includes(col.type)" :key="index"
+                           v-bind="col"></el-table-column> -->
+        </template>
+        <!-- 操作 -->
+        <el-table-column v-if="isOperate"  v-bind="operateProps">
+          <template v-slot:default="scope">
+            <slot name="operate" v-bind="{ self, scope, ...scope }">
+              <el-button type="text" @click="handleDelete(scope.$index)">删除</el-button>
+            </slot>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-form>
+  </component>
+</template>
+
+<script>
+import props, {TableProps} from './Props'
+import validate            from "./hooks/validate";
+import {getVarType}        from "../../../tools/utils";
+import Sortable            from '../../../plugin/sortable';
+
+export default {
+  name: "EdTableEditor",
+  props: props,
+  mixins: [validate],
+  data() {
+    return {
+      self: this,
+      // 表单数据对象
+      form: {
+        data: []
+      },
+      bodyStyle:{
+        padding: '5px'
+      },
+    }
+  },
+  model: {
+    prop: 'value',
+    event: 'change'
+  },
+  watch: {
+    value: {
+      handler(newVal, oldVal) {
+        if (newVal) {
+          this._setTableData(JSON.parse(JSON.stringify(newVal)))
+        }
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  computed:{
+    tempName(){
+      return this.isCard ? "ed-card" : "div"
+    },
+    isOperate(){
+      if(getVarType(this.operate) === 'boolean') {
+        return this.operate
+      }
+      else if(getVarType(this.operate) === 'object'){
+        return Object.keys(this.operate).length > 0
+      }
+      return false
+    },
+    operateProps(){
+      let  defProp = {
+        align:"center",
+        fixed:"right",
+        headerAlign:"center",
+        label:"操作",
+        minWidth: '140px'
+      }
+      if(getVarType(this.operate) === 'object') {
+        return Object.assign(defProp, this.operate)
+      }
+      else {
+        return defProp
+      }
+    }
+  },
+  mounted() {
+    this._rowDrop()
+  },
+  methods: {
+    _bindTableAttrs() {
+      const props = Object.assign({}, this.$attrs, this.$props);
+      Object.keys(props).map(prop => {
+        if (!Object.prototype.hasOwnProperty.call(TableProps, prop)) {
+          delete props[prop]
+        }
+      })
+      return props
+    },
+
+    // 处理checkbox，radio的值
+    _setTableData(newVal) {
+      newVal.map((item, index) => {
+        this.columns.map((col, i) => {
+          if (col.children && col.children.tags === 'el-radio-group' && getVarType(item[col.prop]) === 'object') {
+            item[col.prop] = item[col.prop].value
+          } else if (col.children && col.children.tags === 'el-checkbox-group' && getVarType(item[col.prop]) === 'object') {
+            let data = []
+            item[col.prop].map(i => data.push(i.value))
+            item[col.prop] = data
+          }
+        })
+      })
+      this.$set(this.form, 'data', newVal)
+    },
+
+    // 行拖拽
+    _rowDrop() {
+      const tbody = this.$refs.ElTable.$el.querySelectorAll(".el-table__body-wrapper > table > tbody")[0];
+      let _this = this
+      Sortable.create(tbody, {
+        disabled: !this.isDrag, // 是否开启拖拽
+        ghostClass: 'sortable-ghost', //拖拽样式
+        group: {
+          name: 'words',
+          pull: true,
+          put: true
+        },
+        animation: 150, // ms, number 单位：ms，定义排序动画的时间
+        onEnd({newIndex, oldIndex}) { // 结束拖拽
+          let currRow = _this.form.data.splice(oldIndex, 1)[0]
+          _this.form.data.splice(newIndex, 0, currRow)
+          _this.emitChange()
+        }
+      })
+    },
+
+    // 获取数据
+    getData() {
+      return this.form.data
+    },
+
+    /**
+     * @name validate
+     * @return {Promise<unknown>}
+     * @description 数据校验
+     */
+    validate(callback) {
+      return this.$refs.ElForm.validate(callback)
+    },
+
+    /**
+     * 调用父组件的 change 函数
+     */
+    emitChange(col, val, row, index) {
+      if (col && col.change) {
+        col.change(col, val, row, index)
+      }
+      this.$emit('change', this.form.data)
+      this.$emit("valueChange", {col: col, val: val, row: row, index: index});
+    },
+
+    // 值变化
+    handleChange(prop, index, value) {
+      this.validateOneValue(prop, index, value)
+    },
+
+    // 新增
+    handleAdd() {
+      let data = {}
+      this.columns.filter(i=> !Object.prototype.hasOwnProperty.call(i, 'type')).map(col => {
+        if (col.children?.tags === 'el-checkbox-group') {
+          data[col.prop] = []
+        } else if (col.children?.tags === 'el-switch') {
+          data[col.prop] = false
+        } else {
+          data[col.prop] = ""
+        }
+      })
+      this.form.data.push(data)
+      this.emitChange()
+    },
+
+    // 删除
+    handleDelete(index) {
+      this.form.data.splice(index, 1)
+      this.$emit('change', this.form.data)
+    },
+
+    // 获取属性 (为了将disabled统一设置)
+    getAttrs(scope, item) {
+      const attrs = typeof item.attrs === 'function' ? item.attrs(scope, this.value) : item.attrs
+      return Object.assign({}, {disabled: this.disabled}, attrs)
+    },
+
+    // 获取文本内容
+    getContentText(scope, item) {
+      let text = scope.row[item.prop]
+      // 通过options获取枚举值
+      if (item.options && item.options[text]) {
+        text = item.options[text]
+      }
+      // 通过 formatter 获取格式化的值
+      if (item.formatter) {
+        text = item.formatter(scope.row, scope.column)
+      }
+      return text
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "../../../style/index";
+
+::v-deep {
+  .el-table .cell {
+    overflow: visible;
+  }
+
+  .el-form-item {
+    margin-bottom: 0;
+  }
+
+  .el-icon-s-operation {
+    font-size: 20px;
+  }
+}
+</style>

package/src/components/ed-base-vue/package/EdTableEditor/src/Props.js

@@ -0,0 +1,107 @@
+/**
+ * EdTable通用属性
+ */
+export const TableProps = {
+    // table 数据数组
+    data: {type: Array, default: () => []},
+    // 列的宽度是否自撑开
+    fit: {type: Boolean, default: true},
+    // table 高度
+    height: {type: [String, Number]},
+    // 是否带有纵向边框
+    border: {type: Boolean, default: true},
+    // Table 的尺寸 medium / small / mini
+    size: {type: String},
+    // 是否要高亮当前行
+    highlightCurrentRow: {type: Boolean, default: true},
+    // 是否为斑马纹 table
+    stripe: {type: Boolean, default: false},
+    // Table 的最大高度。合法的值为数字或者单位为 px 的高度。
+    maxHeight: {type: [String, Number]},
+    // 是否显示表头
+    showHeader: {type: Boolean, default: true},
+    // 当前行的 key，只写属性
+    currentRowKey: {type: [String, Number]},
+    // 行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className。
+    rowClassName: { type: Function },
+    // 行的 style 的回调方法，也可以使用一个固定的 Object 为所有行设置一样的 Style。
+    rowStyle: { type: [Function, Object] },
+    // 单元格的 className 的回调方法，也可以使用字符串为所有单元格设置一个固定的 className。
+    cellClassName: { type: [Function, String] },
+    // 单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有单元格设置一样的 Style。
+    cellStyle: { type: [Function, Object] },
+    // 表头行的 className 的回调方法，也可以使用字符串为所有表头行设置一个固定的 className。
+    headerRowClassName: { type: [Function, String] },
+    // 表头行的 style 的回调方法，也可以使用一个固定的 Object 为所有表头行设置一样的 Style。
+    headerRowStyle: {type: [Function, Object]},
+    // 表头单元格的 className 的回调方法，也可以使用字符串为所有表头单元格设置一个固定的 className。
+    headerCellClassName: {type: [Function, String]},
+    // 表头单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有表头单元格设置一样的 Style。
+    headerCellStyle: {type: [Function, Object]},
+    // 行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能与显示树形数据时，该属性是必填的。
+    rowKey: {type: [Function, String]},
+    // 空数据时显示的文本内容，也可以通过 slot="empty" 设置
+    emptyText: {type: String},
+    // 是否默认展开所有行，当 Table 包含展开行存在或者为树形表格时有效
+    defaultExpandAll: {type: Boolean, default: false},
+    // 可以通过该属性设置 Table 目前的展开行，需要设置 row-key 属性才能使用，该属性为展开行的 keys 数组。
+    expandRowKeys: { type: Array },
+    // 默认的排序列的 prop 和顺序。它的prop属性指定默认的排序的列，order指定默认排序的顺序
+    defaultSort: { type: Object },
+    // tooltip effect 属性 | dark/light
+    tooltipEffect: { type: String },
+    // 是否在表尾显示合计行
+    showSummary: {type: Boolean, default: false},
+    // 合计行第一列的文本
+    sumText: {type: String},
+    // 自定义的合计计算方法
+    summaryMethod: { type: Function },
+    // 合并行或列的计算方法
+    spanMethod: { type: Function },
+    // 在多选表格中，当仅有部分行被选中时，点击表头的多选框时的行为。若为 true，则选中所有行；若为 false，则取消选择所有行
+    selectOnIndeterminate: {type: Boolean, default: true},
+    // 展示树形数据时，树节点的缩进
+    indent: {type: Number, default: 16},
+    // 是否懒加载子节点数据
+    lazy: {type: Boolean, default: true},
+    // 加载子节点数据的函数，lazy 为 true 时生效，函数第二个参数包含了节点的层级信息
+    load: { type: Function },
+    // 渲染嵌套数据的配置选项
+    treeProps: {type: Object}
+}
+
+
+/**
+ * EdTableEditor组件属性
+ */
+export default {
+    // 表格的属性
+    ...TableProps,
+
+    // 名称
+    title: {type: String, default: ''},
+    // 是否显示名称
+    isTitle: {type: Boolean, default: true},
+    // 表格事件
+    tableOn: {type: Object},
+    // table 列
+    columns: {type: Array, default: () => []},
+    // 校检规则
+    rules: {type: Object, default: () => {return {}}},
+    // 表单数据
+    value: {type: Array, default: () => []},
+    // 禁用 (对所有form禁用))
+    disabled: {type: Boolean, default: false},
+    // 是否新增
+    isAdd: {type: Boolean, default: true},
+    // 是否拖拽排序
+    isDrag: {type: Boolean, default: false},
+    // 是否显示操作区域
+    operate: {type: [Boolean, Object], default: true},
+    // loading
+    loading: false,
+    //always / hover / never
+    shadow: {type: String, default: 'hover'},
+    // 是否启用卡片模式
+    isCard: {type: Boolean, default: true},
+}

package/src/components/ed-base-vue/package/EdTableEditor/src/hooks/validate.js

@@ -0,0 +1,90 @@
+import Schema from 'async-validator'
+
+export default {
+  data () {
+    return {
+      // 错误列表
+      errorList: {}
+    }
+  },
+  methods: {
+    // 数据校检 (对外暴露)
+    validate () {
+      // 没有数据 或者 没有校检, 则直接返回 resolve
+      if (!this.rules || !this.value.length) return Promise.resolve()
+
+      // 检测单个值, 用于界面提示
+      this.validateAllValue()
+
+      // 循环遍历每列数据, 进行校检
+      const validator = new Schema(this.rules)
+      const validators = this.value.map((item) => {
+        return new Promise((resolve, reject) => {
+          return validator.validate(item).then(resolve).catch(reject)
+        })
+      })
+      return Promise.all(validators)
+    },
+    // 检测每一个行的每个值的数据
+    validateAllValue () {
+      const ruleKeys = Object.keys(this.rules || {})
+      this.value.forEach((item, index) => {
+        ruleKeys.forEach(async (prop, i) => {
+          await this.validateOneValue(prop, index, item[prop])
+        })
+      })
+    },
+    // 检测单个数据
+    validateOneValue (prop, index, value) {
+      return new Promise(async (resolve) => {
+        try {
+          // 参数校检
+          await this.checkValue(prop, value)
+          this.handleCheckSuccess(prop, index)
+          resolve(true)
+        } catch (errors) {
+          // 处理错误
+          this.handleCheckError(prop, index, errors)
+          resolve(false)
+        }
+      })
+    },
+    // 数据校检
+    checkValue (prop, value) {
+      return new Promise((resolve, reject) => {
+        // 如果校检规则存在, 且当前字段的校检规则存在
+        if (this.rules && this.rules[prop]) {
+          const validator = new Schema({ [prop]: this.rules[prop] })
+          validator.validate({ [prop]: value }, (errors, fields) => {
+            if (errors) {
+              reject(errors, fields)
+            } else {
+              resolve()
+            }
+          })
+        } else {
+          resolve()
+        }
+      })
+    },
+    // 检查通过
+    // 重置 errorList 的值
+    handleCheckSuccess (prop, index) {
+      if (this.errorList[index] && this.errorList[index][prop]) {
+        this.errorList[index][prop] = null
+      }
+    },
+    // 处理错误, 将错误拼接字符串, 并保存在 errorList 中
+    handleCheckError (prop, index, errors) {
+      if (!this.errorList[index]) {
+        this.$set(this.errorList, index, {})
+      }
+      this.$set(this.errorList[index], prop, errors.map((item) => item.message).join(','))
+    },
+    // 判断是否出错
+    // 用于加 class 样式和 tooltip 的 disabled 属性
+    isError (index, valueKey, prop) {
+      return this.errorList && this.errorList[index] && this.errorList[index][prop]
+    }
+  }
+}

package/src/components/ed-base-vue/package/EdUpload/index.js

@@ -0,0 +1,8 @@
+import EdUpload from './src/index.vue'
+
+/* istanbul ignore next */
+EdUpload.install = function (Vue) {
+  Vue.component(EdUpload.name, EdUpload)
+}
+
+export default EdUpload

package/src/components/ed-base-vue/package/EdUpload/src/Props.js

@@ -0,0 +1,90 @@
+function noop() {
+}
+
+const ButtonAttrs = {
+  tags: "el-button",
+  text: "点击上传",
+  attrs:{
+    icon: "el-icon-upload",
+    size: "small",
+    type: "primary",
+    style:{
+      fontSize: "12px"
+    }
+  }
+}
+
+// 自定义属性
+export const CustomProps = {
+  // 上传样式分类
+  model: {
+    type: [Object, String],
+    default: () => {
+      // return ButtonAttrs
+      return 'button'
+    }
+  },
+
+  // 提示说明文字
+  tipText:{
+    type: String,
+    default:""
+  }
+}
+
+// ElUpload 继承属性
+export default {
+  ...CustomProps,
+  // 必选参数，上传的地址
+  action: {type: String, required: true},
+  // 设置上传的请求头部
+  headers: {type: Object, default() {return {};}},
+  // 是否支持多选文件
+  multiple: Boolean,
+  // 上传时附带的额外参数
+  data: Object,
+  // 上传的文件字段名
+  name: {type: String, default: 'file'},
+  // 是否启用拖拽上传
+  drag: Boolean,
+  // 支持发送 cookie 凭证信息
+  withCredentials: Boolean,
+  // 是否显示已上传文件列表
+  showFileList: {type: Boolean, default: true},
+  // 接受上传的文件类型（thumbnail-mode 模式下此参数无效）
+  accept: String,
+  // 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。
+  beforeUpload: Function,
+  // 删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止删除。
+  beforeRemove: Function,
+  // 文件列表移除文件时的钩子
+  onRemove: {type: Function, default: noop},
+  // 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
+  onChange: {type: Function, default: noop},
+  // 点击文件列表中已上传的文件时的钩子
+  onPreview: Function,
+  // 文件上传成功时的钩子
+  onSuccess: {type: Function, default: noop},
+  // 文件上传时的钩子
+  onProgress: {type: Function, default: noop},
+  // 文件上传失败时的钩子
+  onError: {type: Function, default: noop},
+  // 上传的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}]
+  fileList: {
+    type: Array, default() {
+      return []
+    }
+  },
+  // 是否在选取文件后立即进行上传
+  autoUpload: {type: Boolean, default: true},
+  // 文件列表的类型text,picture,picture-card
+  listType: {type: String},
+  // 覆盖默认的上传行为，可以自定义上传的实现
+  httpRequest: Function,
+  // 是否禁用
+  disabled: Boolean,
+  // 最大允许上传个数
+  limit: Number,
+  // 文件超出个数限制时的钩子
+  onExceed: {type: Function, default: noop}
+}

package/src/components/ed-base-vue/package/EdUpload/src/index.vue

@@ -0,0 +1,88 @@
+<template>
+  <div v-loading="loading" class="ed-upload-warp">
+    <el-upload class="ed-upload" v-bind="uploadProps">
+      <!-- 上传组件--触发文件选择框的内容 -->
+      <template #trigger>
+        <slot name="trigger"></slot>
+      </template>
+
+      <slot name="upload">
+        <!-- 拖拽上传 -->
+        <div v-if="drag===true" class="ed-upload--content">
+          <i class="el-icon-upload"></i>
+          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+        </div>
+
+        <!-- 上传组件样式 -->
+        <div v-else class="ed-upload--content">
+          <!-- 自定义组件 -->
+          <component :is="model.tags" v-if="modelType==='component'" v-bind="model.attrs">
+            {{ model.text }}
+          </component>
+
+          <!-- 按钮图标 -->
+          <el-button v-if="modelType==='button'" icon="el-icon-upload" size="small" type="primary"/>
+
+          <!-- 图片框: 仅listType==='picture-card' 时才能使用 -->
+          <i v-if="modelType==='image' && listType==='picture-card'" class="el-icon-plus"></i>
+        </div>
+      </slot>
+
+
+      <!-- 上传组件 -- 提示说明文字 -->
+      <template #tip>
+        <slot name="tip">
+          <div class="el-upload__tip">{{ tipText }}</div>
+        </slot>
+      </template>
+
+      <!-- 上传组件 -- 自定义文件列表展示样式 -->
+      <template v-slot:file="scope">
+        <slot name="file" v-bind="scope"></slot>
+      </template>
+    </el-upload>
+
+    <template v-if="!showFileList">
+      <slot name="fileList"></slot>
+    </template>
+  </div>
+</template>
+
+<script>
+import Props, {CustomProps} from "./Props";
+import {getVarType}         from "../../../tools/utils";
+
+export default {
+  name: "EdUpload",
+  props: Props,
+  data() {
+    return {
+      loading: false
+    }
+  },
+
+  computed: {
+    // 装载ElUpload属性
+    uploadProps() {
+      let props = Object.assign({}, this.$props);
+      for (const key in props) {
+        if (CustomProps[key]) delete props[key]
+      }
+      return props
+    },
+
+    // 上传组件样式
+    modelType() {
+      if (getVarType(this.model) === "object") {
+        return "component"
+      } else if (getVarType(this.model) === "string") {
+        return this.model
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

package/src/components/ed-base-vue/package/EdViewer/index.js

@@ -0,0 +1,8 @@
+import EdViewer from './src/EdViewer.vue';
+
+/* istanbul ignore next */
+EdViewer.install = function (Vue) {
+    Vue.component(EdViewer.name, EdViewer)
+}
+
+export default EdViewer;