simple-frame-unit 1.0.2

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

@@ -0,0 +1,48 @@
+/**
+ * EdInputPop组件悬浮属性
+ */
+export const PopverProps = {
+  // 触发方式  click/focus/hover/manual
+  trigger: {type: String, default: "manual"},
+  // 标题
+  title: {type: String, default: ""},
+  // 显示的内容，也可以通过 slot 传入 DOM
+  content: {type: String, default: ""},
+  // 宽度
+  width: {type: Number, default: 300},
+  // 出现位置 top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end
+  placement: {type: String, default: "left-start"},
+  // Popover 是否可用
+  disabled: {type: Boolean, default: false},
+  // 出现位置的偏移量
+  offset: {type: Number, default: 0},
+  // 定义渐变动画
+  transition: {type: String, default: 'fade-in-linear'},
+  // 是否显示 Tooltip 箭头，更多参数可见Vue-popper
+  visibleArrow: {type: Boolean, default: true},
+  // popper.js 的参数
+  popperOptions: {type: Object, default: () => {}},
+  // 为 popper 添加类名
+  popperClass: {type: String, default: ''},
+  // 触发方式为 hover 时的显示延迟，单位为毫秒
+  openDelay: {type: Number},
+  // 触发方式为 hover 时的隐藏延迟，单位为毫秒
+  closeDelay: {type: Number, default: 200},
+  // Popover 组件的 tabindex
+  tabindex: {type: Number, default: 0}
+}
+
+
+/**
+ * EdInputPop组件属性
+ */
+export default {
+  // 值
+  value: {type: String, default: ""},
+  height: {type: Number, default: 200,},
+  placeholder: {type: String, default: ""},
+  // 尺寸 medium / small / mini
+  size: {type: String},
+
+  ...PopverProps
+}

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

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

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

@@ -0,0 +1,368 @@
+<template>
+  <div>
+    <el-input v-model="dataValue" :disabled="disabled" placeholder="请输入内容" readonly @focus="handlerFocus"/>
+    <ed-dialog ref="elsDialog" :height="height" :title="title" :visible="visible" :width="width" @close="handlerClose"
+               @ok="handlerOk">
+      <!-- 查询表单 -->
+      <ed-form ref="elsForm" v-model="model" :form-desc="formDesc">
+        <template v-for="item in formSlots" #[item]="data">
+          <slot :name="item" v-bind="data || {}"></slot>
+        </template>
+        <template v-slot:form-btn>
+          <el-button icon="el-icon-search" type="primary" @click="handlerSearch">搜索</el-button>
+          <el-button icon="el-icon-delete" @click="handlerClear">清空</el-button>
+        </template>
+      </ed-form>
+
+      <!-- 数据表格 -->
+      <ed-table ref="elsTable" :column-type="columnType" :columns="columns" :data="tables" :height="tableHeight"
+                :loading.sync="loading" :pagination.sync="paging ? pagination : undefined"
+                @change="initRequest" @row-click="handlerRowClick" @selection-change="handleSelectionChange">
+        <template v-for="item in tableSlots" #[item]="data">
+          <slot :name="item" v-bind="data || {}"></slot>
+        </template>
+      </ed-table>
+
+    </ed-dialog>
+  </div>
+</template>
+
+<script>
+import Fetch        from "./Fetch"
+import {getVarType} from "../../../tools/utils";
+
+/**
+ * 弹窗表格组件
+ * - 示例
+ *
+ * ```vue
+ * <ed-input-table v-model="value" :columns="columns" :data="data">
+ * </ed-input-table>
+ * ```
+ *
+ * [](./EdInputTableProps.md ':include')
+ */
+export default {
+  name: "EdInputTable",
+  props: {
+    // 是否多选
+    multiple: {type: Boolean, default: false},
+    // 是否禁用
+    disabled: {type: Boolean, default: false},
+    // 值
+    value: {type: [String, Object, Array], default: () => []},
+    // 标题
+    title: {type: String, default: "表格选择器"},
+    // 表格列的配置描述
+    columns: {type: [Array, String]},
+    // table 数据数组
+    data: {type: Array, default: () => []},
+    // 输入框显示字段分隔符
+    split: {type: String, default: "-"},
+    // 弹窗宽度
+    width: {type: [String, Number]},
+    // 弹窗高度
+    height: {type: [String, Number]},
+    // 表格高度
+    tbHeight: {type: [String, Number]},
+    // 覆盖默认的上传行为，可以自定义上传的实现：仅支持Promise
+    httpRequest: {type: Function, default: Fetch},
+    // 是否分页查询
+    paging: {type: Boolean, default: false},
+    // 上传的地址
+    action: {type: String, default: ""},
+    // 设置查询的请求头部
+    headers: {type: [Object, String]},
+    // 查询时附带的额外参数
+    params: {type: [Object, String]},
+    // 查询成功时的钩子
+    onSuccess: {
+      type: Function,
+      default: function () {
+      }
+    },
+    // 查询失败时的钩子
+    onError: {
+      type: Function,
+      default: function () {
+      }
+    },
+    // 请求的类型；GET 或 POST
+    method: {type: String, default: "POST"},
+  },
+  data() {
+    return {
+      loading: true,
+      visible: false,
+      dataValue: "", // input值
+      currentRow: {},
+      formDesc: [],
+      model: {},
+      tables: this.data,
+      radioVal: "",
+      defHeaders: {
+        'Content-Type': 'application/json;charset=utf-8'
+      },
+      // 输入框显示字段
+      rowKey: [],
+      pagination: {
+        current: 1,
+        pageSize: 10,
+        total: 0,
+        pageSizes: [10, 20, 30]
+      },
+      cardHeight: "300px"
+    }
+  },
+  computed: {
+    columnType() {
+      return this.multiple ? 'selection' : "radio"
+    },
+    isAjax() {
+      return this.action !== ""
+    },
+    tableSlots() {
+      let slots = []
+      this.columns.map(col => slots.push(col.prop + 'Column'))
+      return slots
+    },
+    formSlots() {
+      let slots = []
+      this.formDesc.map(col => slots.push(col.prop))
+      return slots
+    },
+    tableHeight() {
+      if (!this.tbHeight) {
+        return this.paging ? 315 - 32 : 315
+      } else {
+        return this.tbHeight
+      }
+    }
+  },
+  watch: {
+    columns: {
+      handler(nVal, oVal) {
+        if (nVal) {
+          let column = this.columns.filter(i => i.rowKey)
+          if (column.length > 0) this.rowKey = column.map(col => col.prop)
+
+          this.initTableColumns()
+          this.initFormDesc()
+          this.initDataValue()
+        }
+      },
+      deep: true,
+      immediate: true
+    },
+    value: {
+      handler(nVal, oVal) {
+        if (nVal && this.columns.length > 0) {
+          this.initDataValue()
+        }
+      },
+      deep: true
+    },
+    action: {
+      deep: true,
+      immediate: true,
+      handler(newVal, oldVal) {
+        if (newVal && this.data.length === 0) {
+          this.initRequest()
+        }
+      }
+    }
+  },
+  methods: {
+    // 初始化Columns，formDesc
+    initRequest() {
+      const options = {
+        method: this.method,
+        headers: Object.assign({}, this.defHeaders, this.headers),
+        action: this.action,
+        data: this.getAjaxData(),
+      }
+
+      this.httpRequest(options).then(res => {
+        if (getVarType(res.data) === 'array') {
+          this.tables = res.data
+        } else {
+          this.tables = res.data.records
+          if (Object.keys(res.data).includes("total")) this.pagination.total = res.data.total
+        }
+
+        this.onSuccess(res);
+      }).catch(error => {
+        this.onError(error)
+      })
+    },
+
+    // 初始化TableColumns
+    initTableColumns() {
+      this.columns.map(column => {
+        if (column.formatter && getVarType(column.formatter) === 'string') {
+          column.formatter = new Function('return ' + column.formatter)();
+        }
+      })
+    },
+
+    // 初始化FormDesc
+    initFormDesc() {
+      this.formDesc = []
+      this.columns.map(i => {
+        if (i.query) {
+          this.formDesc.push({
+            label: i.label,
+            prop: i.map ? i.map : i.prop,
+            precise: i.precise ? i.precise : false,
+            children: {
+              tags: "el-input",
+              attrs: {
+                placeholder: `请输入${i.label}`
+              }
+            }
+          })
+          this.model[i.map ? i.map : i.prop] = ""
+        }
+      })
+    },
+
+    // 初始化input值
+    initDataValue() {
+      if (getVarType(this.value) === 'object') {
+        this.dataValue = this.rowKey.map(prop => this.value[prop]).join(this.split)
+      } else if (getVarType(this.value) === 'array') {
+        let value = this.value.map(val => this.rowKey.map(prop => val[prop]).join(this.split))
+        this.dataValue = value.join(",")
+      }
+    },
+
+    // 获取焦点时,打开弹窗
+    handlerFocus() {
+      this.visible = true
+      this.$nextTick(() => {
+        this.multiple ? this.toggleRowSelection() : this.setCurrentRow()
+      })
+    },
+
+    // 初始化table选中项 - 单选
+    setCurrentRow() {
+      if (getVarType(this.value === 'object')) {
+        let index = this.isEqualIndex(this.tables, this.value)
+        this.$refs.elsTable.setCurrentRow(this.tables[index])
+      } else if (getVarType(this.value) === 'array') {
+        let index = this.isEqualIndex(this.tables, this.value[0])
+        this.$refs.elsTable.setCurrentRow(this.tables[index])
+        console.warn("请注意：取值数组第一项，单选模式下传入了Array，应为Object")
+      }
+    },
+
+    // 初始化table选中项 - 多选
+    toggleRowSelection() {
+      if (getVarType(this.value) === 'array') {
+        this.value.map((row) => {
+          let index = this.isEqualIndex(this.tables, row)
+          this.$refs.elsTable.toggleRowSelection(this.tables[index])
+        })
+      } else if (getVarType(this.value) === 'object') {
+        let index = this.isEqualIndex(this.tables, this.value)
+        this.$refs.elsTable.toggleRowSelection(this.tables[index])
+        console.warn("请注意：多选模式下传入了Object，应为Array")
+      }
+    },
+
+    // 弹窗确认
+    handlerOk() {
+      this.$emit('input', this.currentRow)
+      this.handlerClose()
+    },
+
+    // 关闭弹窗
+    handlerClose() {
+      this.visible = false
+    },
+
+    // table单选
+    handlerRowClick(row, column, event) {
+      if (!this.multiple) {
+        this.currentRow = row
+      }
+    },
+
+    // table多选
+    handleSelectionChange(val) {
+      if (this.multiple) {
+        this.currentRow = val
+      }
+    },
+
+    // 搜索
+    handlerSearch() {
+      if (this.isAjax) {
+        this.initRequest()
+      } else {
+        let tableData = []
+        Object.keys(this.model).map(key => {
+          let data = this.tables.filter(i => i[key].includes(this.model[key]))
+          if (this.model[key] && data.length > 0) {
+            tableData = [...tableData, ...data]
+          } else {
+            tableData = this.data
+          }
+        })
+        this.tables = tableData
+      }
+    },
+
+    // 清空
+    handlerClear() {
+      this.$refs.elsForm.resetFields()
+
+      if (this.isAjax) {
+        this.init()
+      } else {
+        this.tables = this.data
+      }
+    },
+
+    // 检测table数组中是否包含传输值，返回其索引值
+    isEqualIndex(arr, obj) {
+      return arr.findIndex(i => this.rowKey.find(prop => i[prop] === obj[prop]))
+    },
+
+    // 组装请求数据
+    getAjaxData() {
+      let data = Object.assign({}, this.params)
+      let page = {current: this.pagination.current, size: this.pagination.pageSize}
+
+      if (this.paging && this.method.toUpperCase() !== "GET") {
+        data.page = page
+        data.wheres = this.getWheresData()
+      } else {
+        data = this.paging ? Object.assign(data, page, this.model) : Object.assign(data, this.model)
+      }
+      return data
+    },
+
+    // 组装分页请求数据
+    getWheresData() {
+      return this.formDesc.map(item => {
+        return {label: item.prop, value: this.model[item.prop], precise: item.precise}
+      })
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "../../../style/index";
+
+.ed-input-table--card {
+  border: none;
+}
+
+::v-deep {
+  .ed-input-table--card .el-card__body {
+    height: 100%;
+  }
+}
+</style>

package/src/components/ed-base-vue/package/EdInputTable/src/Fetch.js

@@ -0,0 +1,40 @@
+export default async function request(options) {
+    let action = options.action;
+    if (options.method.toUpperCase() === 'GET') {
+        let dataStr = ''; //数据拼接字符串
+        Object.keys(options.data).forEach(key => {
+            dataStr += key + '=' + options.data[key] + '&';
+        })
+        if (dataStr !== '') {
+            dataStr = dataStr.slice(0, dataStr.lastIndexOf('&'));
+            action = action + '?' + dataStr;
+        }
+    }
+
+    let requestConfig = {
+        credentials: 'same-origin',
+        method: options.method.toUpperCase(),
+        headers: options.headers,
+        mode: "cors", // 用来决定是否允许跨域请求  值有 三个 same-origin，no-cors（默认）以及 cores;
+        cache: "force-cache" // 是否缓存请求资源 可选值有 default 、 no-store 、 reload 、 no-cache 、 force-cache 或者 only-if-cached 。
+    }
+
+    if (options.method.toUpperCase() === 'POST') {
+        Object.defineProperty(requestConfig, 'body', {
+            value: JSON.stringify(options.data)
+        })
+    }
+
+    try {
+        const response = await fetch(action, requestConfig);
+        const responseJson = await response.json()
+
+        if(responseJson.data.list){
+            responseJson.data.records = responseJson.data.list
+            delete responseJson.data.list
+        }
+        return responseJson
+    } catch (error) {
+        return error
+    }
+}

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

@@ -0,0 +1,13 @@
+/**
+ * JSON编辑器
+ * 依赖：jsoneditor { https://jsoneditoronline.org/}
+ */
+
+import EdJsonEditor from './src/EdJsonEditor.vue'
+
+/* istanbul ignore next */
+EdJsonEditor.install = function (Vue) {
+  Vue.component(EdJsonEditor.name, EdJsonEditor)
+}
+
+export default EdJsonEditor

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

@@ -0,0 +1,198 @@
+<template>
+  <div :class="{'max-box':max, 'min-box':!max, ...customClass}" :style="{height: height, ...customStyle}"
+       class="jsonEditor-container">
+    <div ref="jsonEditor" class="jsonEditor-box"></div>
+    <button v-if="mode === 'code'" class="max-btn" type="button" @click="max = !max"></button>
+  </div>
+</template>
+
+<script>
+// 引入组件
+import JSONEditor from "jsoneditor/dist/jsoneditor.min"
+import './assets/jsoneditor.css'
+import {OPTIONS} from './hooks'
+
+/**
+ * JSON编辑器
+ * - 示例
+ *
+ * ```vue
+ * <ed-json-editor v-model="value"></ed-json-editor>
+ * ```
+ *
+ * [](./EdJsonEditorProps.md ':include')
+ */
+export default {
+  name: "EdJsonEditor",
+  data() {
+    return {
+      editor: null,
+      expandedModes: ["tree", "view", "form"],
+      max: false,
+      internalChange: false,
+    }
+  },
+  props: {
+    // 显示模式
+    mode: {type: String, default: 'code'},
+    // 值
+    value: [Array, Object, String],
+    // 高度
+    height: {type: [String, Number], default: '500px'},
+    // 属性
+    options: {type: Object, default: () => {return OPTIONS}},
+    // 自定义class 类名
+    customClass: {type: Object, default: () => ({})},
+    // 自定义样式
+    customStyle: {type: Object, default: () => ({})},
+    // 是否启动时展开所有
+    expandedOnStart: {type: Boolean, default: true}
+  },
+  model: {
+    prop: "value",
+    event: "change"
+  },
+  methods: {
+    /**
+     * @private
+     */
+    onChange() {
+      let error = null
+      let json = {}
+      try {
+        json = this.editor.get()
+      } catch (err) {
+        error = err
+      }
+      if (error) {
+        this.$emit("error", error)
+      } else {
+        if (this.editor) {
+          this.internalChange = true
+          this.$emit("change", json)
+          this.$nextTick(() => {
+            this.internalChange = false
+          })
+        }
+      }
+    },
+    // 初始化
+    initView() {
+      if (!this.editor) {
+        const container = this.$refs.jsonEditor;
+        this.editor = new JSONEditor(container, {
+          mode: this.mode, // 默认模式
+          ...this.options,
+          onChange: this.onChange,
+          onModeChange: this.expandAll
+        })
+      }
+      this.editor.set(this.value !== undefined ? this.value : {})
+    },
+
+    // 启动时展开所有
+    expandAll() {
+      if (this.expandedOnStart && this.expandedModes.includes(this.editor.getMode())) {
+        this.editor.expandAll();
+      }
+    },
+
+    // 销毁
+    destroyView() {
+      if (this.editor) {
+        this.editor.destroy()
+        this.editor = null
+      }
+    }
+  },
+  watch: {
+    value: {
+      handler(value) {
+        if (this.editor && value !== undefined && !this.internalChange) {
+          this.editor.set(value)
+        }
+      },
+      deep: true
+    },
+    max(value) {
+      this.$nextTick(() => {
+        this.initView()
+      })
+    },
+    options: {
+      handler(value) {
+        if (this.options && this.options.mode && this.editor) {
+          this.editor.setMode(this.options.mode)
+        }
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    this.initView()
+  },
+  beforeDestroy() {
+    this.destroyView()
+  },
+  computed: {
+    getHeight() {
+      if (this.height && !this.max) {
+        return {
+          height: this.height
+        }
+      }
+      return {}
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+::v-deep {
+  .jsoneditor-poweredBy, .jsoneditor-jmespath-label, #wizard {
+    display: none !important;
+  }
+}
+
+.jsonEditor-container.max-box {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh !important;
+  z-index: 10000;
+}
+
+.jsonEditor-container.min-box {
+  position: relative;
+  min-width: 300px;
+  width: 100%;
+}
+
+.jsonEditor-box {
+  height: 100%;
+}
+
+.jsonEditor-container:hover .max-btn {
+  display: block;
+}
+
+.max-btn {
+  display: none;
+  position: absolute;
+  top: 7px;
+  right: 10px;
+  color: #fff;
+  width: 24px;
+  height: 24px;
+  background: rgba(0, 0, 0, 0) url(./assets/plus.svg) no-repeat 3px;
+  border: 1px solid rgba(0, 0, 0, 0);
+  border-radius: 3px;
+}
+
+.max-btn:hover {
+  border: 1px solid #d7e6fe;
+}
+
+
+</style>