simple-frame-unit 1.0.2

package/lib/packages/EasyDataForm/components/FormItem.vue

@@ -0,0 +1,228 @@
+<template>
+  <!-- 表单内容渲染 -->
+  <div id="EasyDataFormContent">
+    <component :is="getComponent(control)" :ref="control.id"
+               v-model="formModel[control.controlName]"
+               v-bind="buildProps(control, controlProp)"
+               @change="(e) => handleChange(e, control)"
+               @visible-change="selectVisibleChange">
+
+      <!-- 下拉|单选|多选 子元素插槽 -->
+      <template v-if="showOptions(control.controlType)">
+        <ed-option-slot v-for="(ds, i) in  controlProp.dataSource"
+                        :key="i" :data="ds" :tags="getComponent(control)"></ed-option-slot>
+      </template>
+
+      <!-- 输入框后置内容插槽 -->
+      <template #append>
+        <slot :control="control" :prop="controlProp" name="append"></slot>
+      </template>
+
+      <!-- 上传组件样式插槽 -->
+      <template #upload>
+        <slot :control="control" :prop="controlProp" name="upload"></slot>
+      </template>
+
+      <!-- 文本框 -->
+      <template v-if="control.controlType === 'label'">
+        {{ formModel[control.controlName] }}
+      </template>
+    </component>
+  </div>
+</template>
+
+<script>
+import {controlType} from "../../../utils/setting";
+import {getVarType}  from "../../../utils/utils";
+import {initHeaders} from "../../../utils/useBusiness";
+import {DefaultUrl}  from "../../../api/easyData";
+import useUpload     from "../hooks/useUpload";
+
+export default {
+  name: "FormItem",
+  mixins: [useUpload],
+  props: {
+    control: {type: Object, default: () => {}},
+    controlProp: {type: Object, default: () => {}},
+    isSearchForm: {type: Boolean, default: false},
+    formModel: {type: Object, default: () => {}}
+  },
+  methods: {
+    /**
+     * 获取组件配置信息
+     * @name getComponent
+     * @param control
+     * @returns {object}
+     */
+    getComponent(control) {
+      const {attribute} = controlType.find(i => i.value === control.controlType)
+
+      // 搜索表单下，switch转为select
+      if (control.controlType === '_switch' && this.isSearchForm === true) {
+        return 'el-select'
+      }
+
+      // 读取渲染组件
+      if (getVarType(attribute) === 'string') {
+        return attribute
+      }
+    },
+
+    /**
+     * 设置单项组件配置信息
+     * @name buildProps
+     * @param control
+     * @param controlProps
+     * @returns {{}}
+     */
+    buildProps(control, controlProps) {
+      let props = {}
+      if (controlProps) {
+        const controlProp = controlProps.form ? controlProps.form : controlProps
+
+        for (let prop in controlProp) {
+          if (controlProp[prop] || controlProp[prop] === false) props[prop] = controlProp[prop]
+        }
+
+        // upload 组件
+        if (control.controlType === 'upload') {
+          props = Object.assign({}, props, this.bindUploadProps(control, controlProps))
+        }
+
+        //多行输入框
+        if (control.controlType === 'textarea') {
+          props.type = 'textarea'
+        }
+
+        //级连选择框
+        if (control.controlType === 'cascader') {
+          props.options = controlProps.dataSource
+          props.props = props.props ? Object.assign(props.props, {multiple: controlProps.multiple}) : {multiple: controlProps.multiple}
+        }
+
+        //级连选择框
+        if (control.controlType === 'checkbox') {
+          delete props.dataSource
+        }
+
+        //单选框
+        if (control.controlType === 'select') {
+          if (props.isCreate === true) {
+            props.multiple = true
+            props.filterable = true
+            props.allowCreate = true
+            props.defaultFirstOption = true
+          }
+        }
+
+        //数字输入框
+        if (control.controlType === 'inputNumber') {
+          props.controlsPosition = 'right'
+        }
+
+        //搜索项开关
+        if (control.controlType === '_switch' && this.isSearchForm) {
+          props.clearable = true
+        }
+
+        //选择弹窗
+        if (control.controlType === 'popup') {
+          props.disabled = true
+        }
+        //富文本
+        if (control.controlType === 'editor') {
+          props = Object.assign({}, props, this.bindEditorProps(control, controlProps))
+        }
+      }
+
+      return props
+    },
+
+    /**
+     * @name bindUploadProps
+     * @param control
+     * @param controlProps
+     * @returns {{}}
+     * @description 设置upload组件props参数
+     */
+    bindUploadProps(control, controlProps) {
+      let props = {}
+      props.headers = this.$EdFrame.BASE_HEADERS()
+
+      props.action = this.$EdFrame.BASE_API + '/admin-api' + DefaultUrl.uploadUrl
+      props.limit = controlProps.limit
+      props.subDir = controlProps.subDir
+      props.listType = controlProps.listType ? controlProps.listType : 'text'
+      props.beforeUpload = (file) => this.beforeUpload(file, control)
+      props.onPreview = (v) => this.uploadHandleDownload(v, control)
+      props.onSuccess = (res, file, fileList) => this.uploadHandleSuccess(res, file, fileList, control)
+      props.onExceed = (v) => this.uploadHandleExceed(v, controlProps)
+      props.onRemove = (file, fileList) => this.uploadHandleRemove(file, fileList, control.controlName)
+      props.fileList = this.initFileList(this.formModel[control.controlName])
+      props.data = controlProps
+      return props
+    },
+
+    bindEditorProps(control, controlProps) {
+      let props = {}
+      props.editorConfig = {
+        placeholder: "<p style='font-size: 14px'>请输入内容...</p>",
+        // 所有的菜单配置，都要在 MENU_CONF 属性下
+        MENU_CONF: {
+            uploadImage: {
+                server: this.$EdFrame.BASE_API + '/admin-api' + DefaultUrl.uploadUrl,
+                fieldName: 'file',
+                maxNumberOfFiles: 10,
+                allowedFileTypes: ['image/*'],
+                meta: {
+                    subDir: 'tours'
+                },
+                metaWithUrl: false,
+                headers: this.$EdFrame.BASE_HEADERS(),
+                withCredentials: false,
+                timeout: 10 * 1000,
+                ...props,
+                maxFileSize: props.maxFileSize * 1024 * 1024,
+                customInsert(res, insertFn) {
+                    if(res.code == 0) {
+                        console.log(`${res.data.name} 上传成功`, res)
+                        insertFn(res.data.url, res.data.name, res.data.filePath);
+                    }else {
+                        this.$message.error("上传失败：" + res.msg)
+                    }
+                    
+                },
+                onSuccess(file, res) {
+                    console.log(`${file.name} 上传成功`, res);
+                },
+                onFailed(file, res) {
+                    console.log(`${file.name} 上传失败`, res);
+                },
+                onError(file, err, res) {
+                    console.log(`${file.name} 上传出错`, err, res);
+                }
+            }
+        }
+      }
+      return props;
+    },
+
+    /**
+     * @name handleChange
+     * @param e
+     * @param value
+     */
+    handleChange(e, value) {
+      this.$emit('change', e, value)
+    },
+
+    selectVisibleChange(e) {
+      if (!e && this.isSearchForm) this.$refs[this.control.id].blur()
+    },
+    showOptions(type) {
+      return ['checkbox', 'select', 'radio', '_switch'].includes(type)
+    }
+  }
+}
+</script>
+

package/lib/packages/EasyDataForm/hooks/useChosePopup.js

@@ -0,0 +1,85 @@
+import {getControlProp} from "../../../utils/useBusiness";
+
+export default {
+  methods: {
+    /**
+     * @name chosePopup
+     * @param control
+     * @description 打开选择弹窗
+     */
+    chosePopup(control) {
+      this.visible = true
+      this.$nextTick(() => {
+        if (this.controlProps[control.id]) {
+          let controlProp = getControlProp(control, this.controlProps)
+          let componentName = controlProp.compType === 'system' ? controlProp.popupMode + control.id : controlProp.component + control.id
+          this.currentPopupComponent = this.popupComponents[componentName]
+          this.popupCache = {
+            ref: componentName,
+            control: control
+          }
+          if (controlProp.params) {
+            let params = {}
+            if (controlProp.params.indexOf(",") > 0) {
+              let tr = controlProp.params.split(',')
+              tr.forEach(t => {
+                params[t] = this.popupFormModel[t] ? this.popupFormModel[t] : this.formModel[t]
+              })
+            } else {
+              params[controlProp.params] = this.popupFormModel[controlProp.params] ? this.popupFormModel[controlProp.params] : this.formModel[controlProp.params]
+            }
+            this.$nextTick(() => {
+              try {
+                let componentRef = this.$refs[componentName]
+                if (componentRef) {
+                  componentRef.loadData(params)
+                }
+              } catch (e) {
+                throw "错误的加载方法：" + e
+              }
+            })
+          }
+        }
+      })
+    },
+
+    /**
+     * @name handleOk
+     * @description 选择弹窗关闭取值
+     */
+    async handleOk() {
+      const {
+        ref,
+        control
+      } = this.popupCache
+      let controlProp = getControlProp(control, this.controlProps)
+      let componentName = controlProp.compType === 'system' ? controlProp.popupMode + control.id : controlProp.component + control.id
+      const data = await this.$refs[componentName].getData()
+      if (data) {
+        if(data instanceof Array){
+          let arr = []
+          data.forEach(item => {
+            arr.push(item.label)
+          })
+          this.$set(this.formModel, control.controlName, arr.join(','))
+        }else {
+          this.$set(this.formModel, control.controlName, data.label);
+        }
+        this.$set(this.popupFormModel, control.controlName, data);
+        this.$refs.EasyDataForm.clearValidate(control.controlName)
+        this.$emit("chosePopupOk", data, control)
+        this.customizeChangeHandler(data.value, control)
+        this.visible = false
+      } else {
+        this.$message.warn('未选中~')
+      }
+    },
+
+    /**
+     * @name handleClose
+     */
+    handleClose() {
+      this.visible = false
+    },
+  }
+}

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

@@ -0,0 +1,19 @@
+export default {
+  methods: {
+    /**
+     * @name customizeChangeHandler
+     * @param value
+     * @param control
+     */
+    customizeChangeHandler(value, control) {
+      this.$emit('customizeChange', this, value, control)
+    },
+
+    /**
+     * @name initOk
+     */
+    initOk() {
+      this.$emit('ok', this)
+    }
+  }
+}

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

@@ -0,0 +1,169 @@
+import {getControlProp}        from "../../../utils/useBusiness";
+import * as popupComponentList from '../../../popup'
+import {postAction}            from '../../../api'
+import {DefaultUrl}            from "../../../api/easyData";
+
+export default {
+    data() {
+        return {
+            triggerControls: {},
+            // 选择弹窗组件列表
+            popupComponents: [],
+        }
+    },
+    methods: {
+        /**
+         * @description 配置form表单校验规则
+         */
+        initRules() {
+            return new Promise((resolve, reject) => {
+                this.formRules = {}
+                if (this.controlInfos) {
+                    if (this.$refs.EasyDataForm) {
+                        this.$refs.EasyDataForm.clearValidate()
+                    }
+                    this.controlInfos.forEach(async control => {
+                        let controlProp = getControlProp(control, this.controlProps);
+                        control['isShow'] = this.isShowItem(control)
+
+                        // 添加验证
+                        if (!this.formRules[control.controlName]) {
+                            this.formRules[control.controlName] = []
+                        }
+
+                        //控件基础属性
+                        this.formRules[control.controlName].push({
+                            required: this.getFormItemRequired(control),
+                            message: '请输入' + control.label
+                        })
+
+                        // 设置控件属性 - 最大长度
+                        if (controlProp.maxLength) {
+                            this.formRules[control.controlName].push({
+                                max: controlProp.maxLength,
+                                message: '最大长度' + controlProp.maxLength
+                            })
+                        }
+
+                        // 设置控件属性 - 最小长度
+                        if (controlProp.minLength) {
+                            this.formRules[control.controlName].push({
+                                min: controlProp.minLength,
+                                message: '最小长度' + controlProp.minLength
+                            })
+                        }
+
+                        // 设置验证表达式
+                        if (controlProp.validateExpression) {
+                            this.formRules[control.controlName].push({
+                                pattern: eval(controlProp.validateExpression),
+                                message: control.label + '格式不正确'
+                            })
+                        }
+                        // }
+                        // 设置控件默认组件
+                        await this.initFormComp(control, controlProp)
+                    })
+                    resolve(true)
+                }
+            })
+        },
+        /**
+         * @param control
+         * @param controlProp
+         * @description 表单初始组件装填
+         */
+        async initFormComp(control, controlProp) {
+            //为弹窗时，动态加载组件
+            if (control.controlType === 'popup') {
+                if (controlProp) {
+                    let templateName = controlProp.compType === 'system' ? controlProp.popupMode : controlProp.component
+                    if (templateName) {
+                        let componentName = templateName + control.id
+                        this.popupComponents[componentName] = {
+                            component: popupComponentList[templateName] ? popupComponentList[templateName] : templateName,
+                            ref: componentName,
+                            control: control,
+                            controlProp: controlProp
+                        }
+                    }
+                }
+            }
+
+            //写入触发控件
+            if (controlProp && controlProp.dataSource && controlProp.dataSource.length > 0) {
+                controlProp.dataSource.forEach(ds => {
+                    if (ds.triggerControl) {
+                        if (!this.triggerControls[control.controlName]) {
+                            this.triggerControls[control.controlName] = []
+                        }
+                        this.triggerControls[control.controlName].push({
+                            trigger: ds.triggerControl,
+                            value: ds.value
+                        })
+                    }
+                })
+            }
+        },
+
+        /**
+         * @name validateForm
+         * @returns {Promise<unknown>}
+         * @description 验证form表单
+         */
+        validateForm() {
+            return new Promise(async (resolve, reject) => {
+                try {
+                    await this.$refs.EasyDataForm.validate();
+
+                    //查询参数
+                    this.controlInfos.forEach((control) => {
+                        //获取数据
+                        if (!control.isInput && control.defaultValue && control.isShow) {
+                            this.formModel[control.controlName] = control.defaultValue === 'true' ? true : control.defaultValue === 'false' ? false : control.defaultValue
+                        }
+
+                        //判断文件是否为空
+                        if (control.controlType === 'upload' && control.isRequired && control.isShow) {
+                            if (!this.formModel[control.controlName] || this.formModel[control.controlName].length === 0) {
+                                reject('请上传' + control.label);
+                            }
+                        }
+                    })
+                    resolve()
+                } catch (e) {
+                    reject(e)
+                }
+            })
+        },
+
+        /**
+         * 计算联动公式
+         */
+        clickExpression(controlInfo, controlProp) {
+            const {expression} = controlProp
+            if (!expression) {
+                this.$message.error('请配置联动公式')
+                return;
+            }
+            this.$set(this.formModel, controlInfo.controlName, eval(expression));
+        },
+
+        /**
+         * 查询表单数据
+         */
+        async queryFormData() {
+            return new Promise((resolve, reject) => {
+                let url = this.loadQuery.url || DefaultUrl.selectData
+                let param = Object.assign({dataSourceName: this.dataSourceName}, this.loadQuery.param)
+                postAction(url, param).then(res => {
+                    if (res.success && res.data) {
+                        resolve(res.data)
+                    }
+                }).catch(e => {
+                    reject(e)
+                })
+            })
+        }
+    }
+}

package/lib/packages/EasyDataForm/hooks/useUpload.js

@@ -0,0 +1,168 @@
+import {getControlProp}                   from "../../../utils/useBusiness";
+import {DefaultUrl, getFileAccessHttpUrl} from "../../../api/easyData";
+
+export default {
+    data() {
+        return {
+            downloadUrl: '/admin-api/infra/file/'
+        }
+    },
+    methods: {
+        /**
+         * @name beforeUpload
+         * @param file
+         * @param control
+         * @return {Promise<unknown>|*}
+         */
+        beforeUpload(file, control) {
+            let controlProp = getControlProp(control, this.controlProps);
+            if (controlProp.isWatermark) {
+                return new Promise(async (resolve, reject) => {
+                    let info = ''
+                    if (controlProp.watermarkType === '1') {
+                        let geolocation = MapLoader.initMap("map-container"); //定位
+                        AMap.event.addListener(geolocation, "complete", result => {
+                            info = result.formattedAddress + '||' + new Date().toLocaleString()
+                            this.transformFile(file, info).then(res => {
+                                resolve(res)
+                            }).catch(error => {
+                                reject(error)
+                            })
+                        });
+                    } else {
+                        info = controlProp.watermarkInfo
+                        this.transformFile(file, info).then(res => {
+                            resolve(res)
+                        }).catch(error => {
+                            reject(error)
+                        })
+                    }
+                })
+            } else {
+                return file
+            }
+        },
+
+        /**
+         * @name transformFile
+         * @param file
+         * @param info
+         * @return {Promise<unknown>}
+         */
+        transformFile(file, info) {
+            return new Promise(resolve => {
+                const reader = new FileReader();
+                reader.readAsDataURL(file);
+                reader.onload = () => {
+                    const canvas = document.createElement('canvas');
+                    const img = document.createElement('img');
+                    img.src = reader.result;
+                    img.onload = () => {
+                        const ctx = canvas.getContext('2d');
+                        let width = img.width;
+                        let height = img.height;
+                        canvas.width = width;
+                        canvas.height = height;
+                        ctx.drawImage(img, 0, 0, width, height);
+                        ctx.font = "800 30px Microsoft JhengHei";
+                        ctx.fillStyle = "red";
+                        ctx.textAlign = 'right';
+                        ctx.textBaseline = 'Middle';
+                        let text = info.split('||')
+                        text.forEach((t, i) => {
+                            ctx.fillText(t, width - 50, height - (50 + 30 * (text.length - (i + 1))))
+                        })
+                        let dataUrl = canvas.toDataURL("image/jpeg", 1)
+                        resolve(this.dataURLtoFile(dataUrl, file.name))
+                    };
+                };
+            });
+        },
+
+
+        /**
+         * @name uploadHandlePreview
+         * @param file
+         * @param control
+         * @description 文件预览
+         */
+        uploadHandlePreview(file, control) {
+            if (file.url) {
+                let fileType = file.type
+                if (fileType.indexOf('image') > -1) {
+                    this.previewImage = getFileAccessHttpUrl(file.url)
+                } else if (fileType.indexOf('pdf') > -1) {
+                    this.$refs.PdfPreviewModal.previewFiles(getFileAccessHttpUrl(file.url))
+                } else {
+                    this.uploadHandleDownload(file, control)
+                }
+            }
+        },
+
+        /**
+         * @name uploadHandleSuccess
+         * @param res
+         * @param file
+         * @param fileList
+         * @param control
+         */
+        uploadHandleSuccess(res, file, fileList, control) {
+            const files = this.formModel[control.controlName] || []
+            if (res.code === 0) {
+                //参考如下代码即可
+                if (fileList.every(item => item.status === "success")) {
+                    //由于fileList是所有的文件包含之前已上传过的，这里需要做区分（带response的即为新上传的）
+                    fileList.map(item => {
+                        item.response && files.push(item.response.data);
+                    })
+                }
+            } else {
+                let index = fileList.findIndex(i => i.uid === file.uid)
+                if (index !== -1) {
+                    fileList.splice(index, 1)
+                }
+                this.$message({message: res.msg || "上传失败!", type: 'error', duration: 1500})
+            }
+        },
+
+        /**
+         * @name 文件下载
+         * @param file
+         * @description 新窗口打开
+         */
+        uploadHandleDownload(file) {
+            if (file.filePath) window.open(getFileAccessHttpUrl(DefaultUrl.downloadUrl + file.configId + "/get/" + file.filePath))
+        },
+
+        /**
+         * 超过设置文件上传上限时
+         * @param file
+         * @param controlProps
+         */
+        uploadHandleExceed(file, controlProps) {
+            this.$message.error(`文件数量超过限制,最大允许上传 ${controlProps.limit} 个文件`)
+        },
+
+        /**
+         * @name uploadHandleRemove
+         * @param file
+         * @param controlName
+         */
+        uploadHandleRemove(file, fileList, controlName) {
+            this.formModel[controlName] = fileList.filter(i => i.uid !== file.uid)
+        },
+
+        initFileList(fileList) {
+            let result = []
+            if (fileList && fileList instanceof Array) {
+                return fileList.map(file => {
+                    if (!file.url.includes(this.$EdFrame.BASE_API)) {
+                        file.url = getFileAccessHttpUrl(DefaultUrl.downloadUrl + file.configId + "/get/" + file.filePath)
+                    }
+                    return file
+                })
+            }
+            return result;
+        }
+    }
+}