simple-frame-unit 1.0.2

package/lib/packages/EasyDataList/hooks/useEmits.js

@@ -0,0 +1,30 @@
+export default {
+  methods: {
+    loadDataOk(result) {
+      this.$emit('loadDataOk', result)
+    },
+
+    /**
+     * @name getControlInfo
+     * @param controlInfos
+     * @returns {*}
+     * @description 获取表单控件属性
+     */
+    getControlInfo(controlInfos) {
+      this.$emit('editControlInfos', controlInfos)
+      return controlInfos
+    },
+
+    /**
+     * @name rowSelectionSelect
+     * @param record
+     * @param selectedRowKeys
+     * @param selectedRows
+     * @description
+     */
+    rowSelectionSelect(record, selectedRowKeys, selectedRows) {
+      this.selectedRowKeys = selectedRowKeys
+      this.$emit('rowSelectionSelect', record, selectedRowKeys, selectedRows)
+    },
+  }
+}

package/lib/packages/EasyDataList/hooks/useForm.js

@@ -0,0 +1,62 @@
+export default {
+  data() {
+    return {
+      // 查询条件参数
+      formKeyInfo: {},
+      // form 表单高度
+      formHeight: "auto"
+    }
+  },
+  methods: {
+    /**
+     * @name bindFormProps
+     * @return {Object}
+     * @description 设置form组件参数
+     */
+    bindFormProps() {
+      let baseProps= {
+        inline: true,
+        isSearchForm: true,
+        height: this.formHeight,
+        formData: this.formData,
+        controlConfig: this.controlConfig,
+      }
+
+      return Object.assign({},  baseProps, this.formProps)
+    },
+
+    /**
+     * @name renderModalSlot
+     * @description 组装form按钮区插槽
+     */
+    renderFormSlot() {
+      const slots = ['resetBefore', 'queryBefore', 'exportBefore', 'addBefore', 'extra']
+      const scopedSlots = []
+      Object.keys(this.$scopedSlots).map(slot => {
+        if (slots.includes(slot)) {
+          scopedSlots.push(slot)
+        }
+      })
+      return scopedSlots
+    },
+
+    /**
+     * @name searchQuery
+     * @description 搜索方法
+     */
+    async searchQuery() {
+      let form = await this.$refs.EasyDataForm.getFormData(true)
+      this.formKeyInfo = form.key
+      await this.loadTableData();
+    },
+
+    /**
+     * @name searchReset
+     * @description 重写查询重置方法，默认显示值
+     */
+    async searchReset() {
+      await this.$refs.EasyDataForm.watchFormData();
+      await this.searchQuery();
+    },
+  }
+}

package/lib/packages/EasyDataList/hooks/useTable.js

@@ -0,0 +1,314 @@
+import {DefaultUrl, pageQueryList}             from "../../../api/easyData";
+import {getVarType, sign, underlineToHumpJson} from "../../../utils/utils";
+import {postAction}                            from "../../../api";
+import {getControlProp, setFormData}           from "../../../utils/useBusiness";
+
+export default {
+    data() {
+        return {
+            // table 数据数组
+            tableData: [],
+            // 表格loading动画
+            tableLoading: false,
+            // 表格列的配置描述
+            columns: this.diyColums,
+            cacheColumns: [],
+            // 分页
+            pagination: {
+                current: 1,
+                pageSize: 10,
+                total: 0,
+                pageSizes: [10, 20, 30]
+            },
+        }
+    },
+    methods: {
+        /**
+         * @private
+         */
+        bindTableProps() {
+            return {
+                ...this.tableProps,
+                columnType: this.columnType,
+                pagination: this.pagination,
+                data: this.tableData,
+                columns: this.columns,
+                loading: this.initLoading
+            }
+        },
+        /**
+         * @name handleTableChange
+         * @description 分页、排序、筛选变化时触发
+         */
+        handleTableChange({pagination}) {
+            this.loadTableData(pagination.current)
+        },
+        /**
+         * @name loadTableData
+         * @param arg
+         * @returns {Promise<void>}
+         * @description 加载列表数据
+         */
+        async loadTableData(arg = 1) {
+            this.rowSelectionSelect(null, [], [])
+            if (arg === 1) this.pagination.current = 1
+            this.tableLoading = true
+            try {
+                let res = null
+                if (this.httpUrl.pageUrl === DefaultUrl.page) {
+                    res = await pageQueryList(sign(this.getQueryParams()))
+                } else {
+                    res = await postAction(this.httpUrl.pageUrl, this.getQueryParams())
+                }
+
+                this.tableLoading = false
+                if (res.success) {
+                    let result = res.data
+                    if (Number(result.total) > 0) {
+                        this.pagination.total = Number(result.total)
+                        this.tableData = setFormData(result.records, this.controlInfos, this)
+                    } else {
+                        this.pagination.total = 0
+                        this.tableData = []
+                    }
+                } else {
+                    this.$message.warning(res.message)
+                }
+                this.loadDataOk(res)
+            } catch (e) {
+                console.log(e)
+                this.tableLoading = false
+            }
+        },
+
+        /**
+         * @private
+         * @name getQueryParams
+         * @returns {*}
+         * @description 组装表格查询参数
+         */
+        getQueryParams() {
+            const {dataSource, controlProps, controlInfos} = this.controlConfig
+            //查询参数
+            let param = this.initQueryParams(dataSource);
+            // console.info("param", param, this.formKeyInfo)
+            //where
+            let whereList = [];
+            if (controlInfos) {
+                controlInfos.map(control => {
+                    //查询参数
+                    let controlValue = this.formKeyInfo[control.controlName]
+                    const controlProp = getControlProp(control, controlProps);
+                    if (control.isQuery && getVarType(controlValue) !== 'undefined') {
+                        let where = {}
+                        if (['cascader', 'select'].includes(control.controlType)) {
+                            let isMultiple = getVarType(controlProp.multiple) === 'boolean' && controlProp.multiple
+                            where = this.addWhereCascader(control, isMultiple, controlValue)
+                        } else if (control.controlType === 'datePicker') {
+                            where = this.addWhereDatePicker(control, controlValue)
+                        } else {
+                            where = this.addWhereOther(control, controlProp, controlValue)
+                        }
+
+                        if (where) whereList.push(where)
+
+                    }
+                    //传递参数
+                    if (getVarType(this.queryParams) === 'object') {
+                        if (this.queryParams && this.hasObject(this.queryParams, control.controlName)) {
+                            whereList.push({
+                                fieldName: control.controlName,
+                                fieldValue: this.queryParams[control.controlName],
+                                operator: 'like',
+                            })
+                            control.hidden = true
+                        }
+                    }
+                })
+                if (getVarType(this.queryParams) === 'array') {
+                    whereList = whereList.concat(this.queryParams)
+                }
+                param.wheres = whereList
+                param.orders = this.orderBy
+            }
+
+            //加签
+            return sign(param);
+        },
+        /**
+         * @private
+         * 查询条件创建默认参数
+         * @param {} dataSource
+         * @returns
+         */
+        initQueryParams(dataSource) {
+            let param = {}
+            for (let i in this.formKeyInfo) {
+                if (getVarType(this.formKeyInfo[i]) === 'string') {
+                    this.formKeyInfo[i] = this.formKeyInfo[i].trimEnd().trimStart()
+                }
+            }
+            param = Object.assign({}, underlineToHumpJson(this.formKeyInfo))
+            param.key = Object.assign({}, this.formKeyInfo)
+            /**
+             * 判断key里面的属性在是否在查询项,不在查询项属性一律不要
+             */
+            let keys = param.key;
+            for (let i in keys) {
+                let control = this.controlInfos.find(control => control.controlName === i)
+                const isQuery = control ? control.isQuery : false;
+                if (!isQuery) {
+                    delete keys[i]
+                }
+            }
+            param.key = keys
+            param.dataSourceName = dataSource.dataSourceName
+            param.page = {
+                current: this.pagination.current,
+                size: this.pagination.pageSize
+            }
+            param.viewId = this.viewId
+            param.easyFormId = this.easyFormId
+            param.sqlId = this.sqlId
+            param.sqlIdAddWhere = this.sqlIdAddWhere
+            //转换数据库存id的字段为{label:'',value:''}格式
+            param.convertToTag = true
+            return param
+        },
+        /**
+         * 添加级连参数的查询条件
+         * @private
+         * @param {*} control
+         * @param isMultiple
+         * @param {*} controlValue
+         * @returns 查询参数是级连下拉、下拉列表
+         */
+        addWhereCascader(control, isMultiple, controlValue) {
+            let where = {
+                fieldName: control.controlName
+            }
+            let isCascader = control.controlType === 'cascader'
+            if (isMultiple && getVarType(controlValue) === 'array' && controlValue.length > 1) {
+                this.$message.warning(`[${control.label}]只支持勾选一个作为查询条件,当前查询忽略该条件`);
+                return false
+            } else if (isMultiple && getVarType(controlValue) === 'array' && controlValue.length === 0) {
+                return false
+            }
+
+
+            let operator = isMultiple ? 'like' : '='
+            let fieldValue = isMultiple && controlValue.length === 1 ? controlValue[0] : controlValue
+            where.fieldValue = isCascader ? fieldValue.join("~") : fieldValue
+            where.operator = operator
+            return where
+        },
+        /**
+         * 日期查询条件
+         * @private
+         * @param control
+         * @param controlValue
+         * @returns {{sql: string}|{fieldName: ([]|*), fieldValue, operator: string}|boolean}
+         */
+        addWhereDatePicker(control, controlValue) {
+            if (getVarType(controlValue) == 'string') {
+                return {
+                    fieldName: control.controlName,
+                    fieldValue: controlValue,
+                    operator: 'like'
+                }
+            } else if (getVarType(controlValue) == 'array' && controlValue.length == 2) {
+                return {
+                    sql: control.controlName + ' between "' + controlValue[0] + '" and "' + controlValue[1] + '"'
+                }
+            }
+            return false;
+        },
+        /**
+         * @private
+         * 其他查询条件
+         * @param control
+         * @param controlProp
+         * @param controlValue
+         * @returns {{fieldName: ([]|*)}}
+         */
+        addWhereOther(control, controlProp, controlValue) {
+            let where = {
+                fieldName: control.controlName,
+            }
+            if (typeof controlValue == 'object' && Array.isArray(controlValue)) {
+                //当参数是数组时
+                let formKey = []
+                controlValue.forEach(key => {
+                    if (typeof key == 'object') {
+                        formKey.push(key.key ? key.key : key.value)
+                    } else {
+                        formKey.push(key)
+                    }
+                })
+                if (formKey.length > 0) {
+                    where.fieldValue = formKey
+                    where.operator = 'in'
+                }
+            } else {
+                where.fieldValue = controlValue
+                where.operator = control.isAccurateQuery ? '=' : 'like'
+            }
+
+            return where
+        },
+        /**
+         * 编辑数据
+         * @param {*} row  一行数据
+         * @param {*} index 行索引
+         * @param {*} viewId 自定义viewId
+         */
+        handlerEdit(row, index, viewId) {
+            let fd = row
+            if (this.formData && Object.keys(this.formData).length > 0) {
+                fd = JSON.parse(JSON.stringify(row))
+                let {keyInfo, keyInfoObject} = fd
+                Object.assign(keyInfo, this.formData.key ? this.formData.key : this.formData)
+                Object.assign(keyInfoObject, this.formData.key ? this.formData.key : this.formData)
+            }
+            this.$refs.BasicModal.showModal({
+                formData: fd,
+                isDescribe: false,
+                submitUrl: this.httpUrl.updateUrl,
+                title: '更新-' + this.dataSource.remark,
+                useControlConfig: !viewId,
+                viewId: viewId
+            })
+        },
+        /**
+         * 查看数据
+         * @param {*} row  一行数据
+         * @param {*} index 行索引
+         */
+        handlerDetail(row, index) {
+            this.$refs.BasicModal.showModal({
+                formData: row,
+                isDescribe: true,
+                title: '查看-' + this.dataSource.remark,
+            })
+        },
+        /**
+         * 删除数据
+         * @param {*} id 行ID
+         */
+        async handlerDelete(id) {
+            if (id) {
+                const params = {
+                    id,
+                    dataSourceName: this.dataSource.dataSourceName
+                }
+                const res = await postAction(this.httpUrl.deleteUrl, params);
+                if (res.success) {
+                    this.$message.success(res.msg)
+                    await this.loadTableData(this.pagination.current)
+                } else {
+                    this.$message.error(res.msg)
+                }
+            }
+        },
+    }
+}

package/lib/packages/EasyDataTable/EasyDataTable.vue

@@ -0,0 +1,233 @@
+<template>
+  <div>
+    <slot name="header">
+      <el-button v-if="moduleProp?.showAddBtn" class="btn" plain type="primary" @click="handlerAdd">新增</el-button>
+    </slot>
+
+    <ed-table :columns="columns" :data="tableData" :loading="initLoading" :pagination="false" v-bind="tableProps">
+      <!-- 表格列插槽 -->
+      <template v-for="name in slotNames" v-slot:[name]="scope">
+        <slot :name="name" v-bind="scope"></slot>
+      </template>
+
+
+      <template v-if="moduleProp?.showAction" v-slot:operate="{row, $index}">
+        <slot name="operate" v-bind="{row, $index}">
+          <el-button size="mini" type="text" @click="handlerEdit(row, $index)">编辑</el-button>
+          <el-divider direction='vertical'></el-divider>
+          <el-popconfirm title="确定删除数据吗？" @confirm="handlerDelete(row, $index)">
+            <el-button slot="reference" size="mini" style="color: red" type="text">删除</el-button>
+          </el-popconfirm>
+        </slot>
+      </template>
+    </ed-table>
+
+    <!--  编辑  -->
+    <ed-drawer ref="elsDrawer" :title="drawerTit" :visible="visible" @close="handlerClose" @ok="handlerOk">
+      <easy-data-form ref="easyDataForm" :control-config="edFormConfig" :form-data="edFormData"></easy-data-form>
+    </ed-drawer>
+  </div>
+</template>
+
+<script>
+import EasyDataMixins              from '../mixins/EasyDataMixins'
+import {getPath, getVarType}       from "../../utils/utils";
+import {setFormData, setTableData} from "../../utils/useBusiness";
+import {TempType}                  from "../../api/easyData";
+
+/**
+ * EasyDataTable组件
+ * - 示例
+ *
+ * ```vue
+ * <easy-data-table ref="EasyDataTable" :columnType="columnType" :dataSourceName="dataSourceName" :viewId="viewId">
+ * </easy-data-table>
+ * ```
+ * 详细用法参考下方链接
+ *
+ * [EasyDataTable组件使用示例](./web-comp/ExampleEasyDataTableCode.md)
+ *
+ * 混入属性参考
+ *
+ * [EasyDataMixins](./EasyDataMixins.md)
+ */
+export default {
+  name: "EasyDataTable",
+  mixins: [EasyDataMixins],
+  data() {
+    return {
+      tableData: [],
+      columns: [],
+      visible: false,
+      drawerTit: '',
+      cacheIndex: null,
+      edFormData: {},
+      edFormConfig: {},
+      // 插槽名
+      slotNames: []
+    }
+  },
+  props: {
+    /**
+     * Table 表格props(参考[EdTable](web-comp/new/Table.md?id=dtable-props)组件)
+     * @default {}
+     */
+    tableProps: {
+      type: Object,
+      default: () => {
+      }
+    },
+
+    // 数据源配置信息
+    controlConfig: {
+      type: Object,
+      default: () => {
+      }
+    }
+  },
+  watch: {
+    controlConfig: {
+      handler(newVal, oldVal) {
+        if (newVal && Object.keys(newVal).length > 0) {
+          this.initColumns(newVal)
+        }
+      },
+      deep: true,
+      immediate: true
+    },
+    dataSourceName: {
+      handler(nVal, oVal) {
+        if (nVal && nVal !== oVal && (!this.controlConfig || Object.keys(this.controlConfig).length === 0)) {
+          this.initControls().then(config => {
+            this.initColumns(config)
+          })
+        }
+      },
+      deep: true,
+      immediate: true
+    },
+
+    formData: {
+      deep: true,
+      immediate: true,
+      handler(newVal, oldVal) {
+        if (newVal && this.controlInfos) {
+          let data = []
+          if (!this.hasObject(newVal, 'data') && getVarType(newVal) === 'array' && newVal.length > 0) {
+            newVal.map(i => {
+              data.push({
+                id: i.keyInfoView.id,
+                keyInfo: i.keyInfo,
+                keyInfoView: i.keyInfoView,
+                keyInfoObject: i.keyInfoObject
+              })
+            })
+          }
+          if (this.hasObject(newVal, 'data') && getVarType(newVal.data) === 'array') {
+            newVal.data.map(i => {
+              data.push({
+                id: i.keyInfo.id,
+                keyInfo: i.keyInfo,
+                keyInfoView: i.keyInfo,
+                keyInfoObject: i.keyInfo
+              })
+            })
+          }
+          this.tableData = setFormData(data, this.controlInfos, this)
+        }
+      }
+    }
+  },
+  methods: {
+    // 初始化
+    initColumns(config) {
+      const {controlInfos, controlProps, dataSource} = config
+      // 解除js对象指向同一内存地址 JSON.parse(JSON.stringify(Object | Array))
+      this.controlInfos = JSON.parse(JSON.stringify(controlInfos))
+      this.controlProps = JSON.parse(JSON.stringify(controlProps))
+      this.dataSource = JSON.parse(JSON.stringify(dataSource))
+      this.edFormConfig = JSON.parse(JSON.stringify(config))
+      this.columns = this.columns.length === 0 ? this.getColumns(controlInfos, controlProps) : this.columns
+      this.getSlotNames(this.columns)
+    },
+
+    // 插槽项
+    getSlotNames(columns) {
+      columns.map(column => {
+        this.slotNames.push(getPath(column.prop) + 'Column')
+      })
+    },
+
+    // 编辑
+    handlerEdit(row, index) {
+      this.visible = true
+      this.drawerTit = '编辑'
+      this.cacheIndex = index
+      this.edFormData = row
+    },
+
+    // 删除
+    handlerDelete(row, index) {
+      this.tableData.splice(index, 1)
+    },
+
+    // 新增
+    handlerAdd() {
+      this.visible = true
+      this.drawerTit = '新增'
+      this.cacheIndex = null
+      this.edFormData = {}
+      setTimeout(() => {
+        this.$refs.easyDataForm.resetFields()
+      }, 100)
+    },
+
+    // 确认弹窗
+    async handlerOk() {
+      const data = await this.$refs.easyDataForm.getFormData(true, true)
+      if (data) {
+        data.keyInfoView = Object.assign(data.key, this.bizParams)
+        if (this.cacheIndex != null) {
+          this.tableData.splice(this.cacheIndex, 1, data)
+        } else {
+          this.tableData.push(data)
+        }
+        this.tableData = setFormData(this.tableData, this.controlInfos, this)
+        this.handlerClose()
+      }
+    },
+
+    // 关闭弹窗
+    handlerClose() {
+      this.visible = false
+    },
+    /**
+     * 获取表单数据
+     * @param isValidate
+     * @returns {Promise<unknown>}
+     */
+    getFormData() {
+      return new Promise((resolve) => {
+        resolve(Object.assign({}, {
+          dataSourceName: this.dataSourceName,
+          data: setTableData(this.tableData)
+        }))
+      })
+    },
+    /**
+     * @name getType
+     * @returns {string}
+     * @description 设置当前模版类型
+     */
+    getType() {
+      return this.moduleProp?.showAddBtn || this.moduleProp?.showAction ? TempType.save : TempType.view
+    },
+  }
+}
+</script>
+
+<style scoped>
+.btn {
+  margin-bottom: 10px;
+}
+</style>