simple-frame-unit 1.0.2

package/lib/packages/mixins/useTable.jsx

@@ -0,0 +1,130 @@
+import {getControlProp} from "../../utils/useBusiness";
+import {getVarType} from "../../utils/utils";
+import {formatDate} from "../../utils/dateUtils";
+import FileView from "../components/FileView.vue";
+
+export default {
+  methods: {
+    /**
+     * @name getColumns
+     * @returns {*[]}
+     */
+    getColumns(controlInfos, controlProps) {
+      let columns = []
+      controlInfos.forEach((control) => {
+        if (control.isShow) {
+          //展示字段
+          let column = {
+            label: control.label,
+            prop: control.virtualColumn ? 'keyInfoView.' + control.controlName : control.controlName,
+          }
+          if (control.controlType === 'textarea') column.showOverflowTooltip = true
+          //数据渲染
+          this.renderColumn(control, column, controlProps);
+          columns.push(column)
+        }
+      })
+
+      // 调用编辑
+      if (Object.keys(this.$listeners).includes('editColumns')) {
+        this.$listeners.editColumns(columns)
+      }
+      return columns;
+    },
+
+    /**
+     * 渲染下拉框
+     * @param {*} control
+     * @param column
+     * @param controlProps
+     */
+    renderColumn(control, column, controlProps) {
+      const controlProp = getControlProp(control, controlProps);
+      if (control.controlType === 'select' || control.controlType === '_switch') {
+        // form，视图配置的下拉列表，模式，数据绑定方式
+        column.formatter = function (row, column, cellValue, index) {
+
+          if (getVarType(cellValue) !== 'undefined') {
+            if (getVarType(cellValue) === 'array') {
+              return cellValue.map(i => i.label).join(',')
+            } else if (getVarType(cellValue) === 'object') {
+              return cellValue.label
+            } else if (getVarType(cellValue) === 'string') {
+              if (controlProp.dataSource && controlProp.dataSource.length > 0) {
+                for(let i = 0; i < controlProp.dataSource.length; i++) {
+                  if(cellValue === controlProp.dataSource[i].value) {
+                    return controlProp.dataSource[i].label
+                  }
+                }
+              }
+            }
+            return cellValue + ""
+          }
+          return cellValue
+        }
+      } else if (control.controlType === "popup") {
+        column.formatter = function (row, column, cellValue, index) {
+          if (cellValue) {
+            if (getVarType(cellValue) === 'array') {
+              return <div class="table-tag">{cellValue.map(i => <el-tag size="small">{i.label}</el-tag>)}</div>
+            }else if (getVarType(cellValue) === 'object') {
+              return <div className="table-tag">{cellValue.label}</div>
+            }
+            return cellValue.label
+          }
+        }
+      } else if (control.controlType === "checkbox") {
+        column.formatter = function (row, column, cellValue, index) {
+          if (cellValue && cellValue instanceof Array) {
+            return <div class="table-tag">{cellValue.map(i => <el-tag size="small">{i.label}</el-tag>)}</div>
+          }
+        }
+      } else if (control.controlType === "radio") {
+        column.formatter = function (row, column, cellValue, index) {
+          if (cellValue) {
+            return <div class="table-tag">
+              <el-tag size="small">{cellValue.label}</el-tag>
+            </div>
+          }
+        }
+      } else if (["datePicker"].includes(control.controlType)) {
+        column.formatter = function (row, column, cellValue, index) {
+          if (cellValue) {
+            const {format} = controlProp
+            let data = new Date(cellValue)
+            return formatDate(data, format)
+          }
+        }
+      } else if (control.controlType === 'cascader') {
+        const showAllLevels = getVarType(controlProp.showAllLevels) === 'boolean' && controlProp.showAllLevels === false;
+        column.formatter = function (row, column, cellValue, index) {
+          if (cellValue) {
+            if (getVarType(cellValue) === 'object') {
+              if (showAllLevels) {
+                const temp = cellValue.label.split("/");
+                return temp[temp.length - 1];
+              } else return cellValue.label;
+            } else if (getVarType(cellValue) === 'array') {
+              return cellValue.map(item => {
+                if (showAllLevels) {
+                  const temp = item.label.split("/");
+                  return temp[temp.length - 1];
+                } else return item.label;
+              }).join(",")
+            }
+          }
+          return cellValue
+        }
+      } else if (control.controlType === 'upload') {  //控件为上传控件时
+        column.formatter = (row, column, cellValue, index) => {
+          if (cellValue) {
+            if (cellValue && getVarType(cellValue) === 'array') {
+              return <FileView list={cellValue}></FileView>
+            }
+          }
+          return cellValue;
+        }
+      }
+    },
+  }
+}

package/lib/pages/DataSource/index.js

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

package/lib/pages/DataSource/src/components/ControlViews/BaseProps.js

@@ -0,0 +1,103 @@
+// 表单描述
+export const FormDesc =  [
+  {
+    label: '默认值',
+    prop: "defaultValue",
+    children: {
+      tags: "el-input",
+      attrs: {
+        placeholder: '请输入默认值'
+      }
+    },
+  },
+  {
+    label: '验证表达式',
+    prop: "validateExpression",
+    tooltip: "示例：/^[0-9]{8}$/ 8位数字",
+    children: {
+      tags: "el-input",
+      attrs: {
+        placeholder: '请输入默认值'
+      }
+    },
+  },
+  {
+    label: '存储为label',
+    prop: "isLabelValue",
+    tooltip: "示例：/^[0-9]{8}$/ 8位数字",
+    children: {
+      tags: "el-input",
+      attrs: {
+        placeholder: '请输入默认值'
+      }
+    },
+  },
+]
+
+
+/**
+ * 下拉元素Table列配置
+ * @type {[{label: string, type: string, align: string},{children: {tags: string, attrs: {placeholder: string}}, prop: string, label: string, align: string},{children: {tags: string, attrs: {placeholder: string}}, prop: string, label: string, align: string},{children: {tags: string, attrs: {placeholder: string}}, prop: string, label: string, align: string},{children: {tags: string, attrs: {placeholder: string}}, prop: string, label: string, align: string}]}
+ */
+export const TableEditorColumns = [
+  {
+    label: "#",
+    type: "index",
+    align: "center"
+  },
+  {
+    label: "Label",
+    prop: "label",
+    align: "center",
+    children: {
+      tags: "ed-input-pop",
+      attrs: {
+        placeholder: "Label"
+      }
+    }
+  },
+  {
+    label: "Value",
+    prop: "value",
+    align: "center",
+    children: {
+      tags: "ed-input-pop",
+      attrs: {
+        placeholder: "Value"
+      }
+    }
+  },
+  {
+    label: "触发控件",
+    prop: "triggerControl",
+    align: "center",
+    children: {
+      tags: "ed-input-pop",
+      attrs: {
+        placeholder: "触发控件"
+      }
+    }
+  },
+  {
+    label: "默认选中",
+    prop: "isChecked",
+    align: "center",
+    children: {
+      tags: "el-switch",
+      attrs: {
+        placeholder: "默认选中"
+      }
+    }
+  }
+]
+
+export const  TableEditorRules = {
+  label: [
+    {required: true, message: '必填', trigger: 'blur'}
+  ],
+
+  value: [
+    {required: true, message: '必填', trigger: 'blur'}
+  ]
+}
+