vue更新3.5，以及mime打更新

cdTMP/src/components/ma-form/js/columnService.js

@@ -0,0 +1,175 @@
+import { loadDict } from "@cps/ma-form/js/networkRequest"
+
+/**
+ * columnService 列服务处理类
+ * 首先感谢 @NEKGod 提交的PR，此功能原本写在了 Ma-Crud 组件，我特意摘出来，封装成类通过引用来调用
+ * @author NEKGod, X.Mo <root@imoi.cn>
+ */
+
+const objectService = function (item) {
+    this.setAttr = (key, value) => {
+        item[key] = value
+    }
+
+    this.getAttr = (key) => {
+        return item[key]
+    }
+
+    this.get = () => {
+        return item
+    }
+
+    this.set = (config = {}) => {
+        for (let [key, value] of Object.entries(config)) {
+            item[key] = value
+        }
+    }
+}
+
+/**
+ * dict项服务类
+ * @param dataIndex
+ * @param dictData
+ * @constructor
+ */
+const dictService = function (dataIndex, dictData, dicts, columns) {
+    this.columns = columns
+    this.dicts = dicts
+    this.dictData = dictData
+    this.dataIndex = dataIndex
+
+    /**
+     * 返回原DictData对象
+     * @returns {*}
+     */
+    this.getRawDictData = () => {
+        return this.dictData
+    }
+    /**
+     * 追加
+     * @param label
+     * @param value
+     * @param extend
+     */
+    this.append = (label, value, extend = {}) => {
+        this.getRawDictData().push(
+            Object.assign(
+                {
+                    label: label,
+                    value: value
+                },
+                extend
+            )
+        )
+    }
+    /**
+     * 重新加载dict
+     * @param dictConfig
+     * @returns {Promise<void>}
+     */
+    this.loadDict = async (dictConfig) => {
+        this.columns.setAttr("dict", dictConfig)
+        await loadDict(this.dicts, { formType: "select", dict: dictConfig, dataIndex: this.dataIndex })
+    }
+}
+
+class ColumnService {
+    /**
+     * @type {Map<string, Object>}
+     */
+    columnMap = new Map()
+
+    dictMap = new Map()
+
+    columns
+
+    cascaders
+
+    dicts
+
+    refs
+
+    strictMode
+
+    /**
+     * @param data
+     * @param strictMode
+     */
+    constructor(data, strictMode) {
+        this.columns = data.columns
+        this.cascaders = data.cascaders
+        this.dicts = data.dicts
+        this.refs = data?.refs ?? {}
+        this.strictMode = strictMode
+
+        this.columns.forEach((item) => {
+            this.columnMap.set(item.dataIndex, new objectService(item))
+        })
+
+        for (const [dataIndex, dictData] of Object.entries(this.dicts)) {
+            this.dictMap.set(dataIndex, new dictService(dataIndex, dictData, this.dicts, this.columnMap.get(dataIndex)))
+        }
+    }
+
+    getDialogRefs(refName = undefined) {
+        return refName ? this.refs[refName] : this.refs
+    }
+
+    getDictService(dataIndex) {
+        return this.dictMap.get(dataIndex)
+    }
+
+    get(dataIndex) {
+        return this.columnMap.get(dataIndex)
+    }
+
+    isEmpty(dataIndex) {
+        return !this.columnMap.has(dataIndex)
+    }
+
+    exist(dataIndex) {
+        return !this.isEmpty(dataIndex)
+    }
+
+    async append(item, appendStartDataIndex = null) {
+        if (this.strictMode === true && item.dataIndex && this.exist(item.dataIndex)) {
+            console.warn(
+                `严格模式：columnService.append(item) 参数中未有item.dataIndex属性或者item.dataIndex已存在column.${item.dataIndex}`
+            )
+            return false
+        }
+        if (this.cascaders.includes(item.dataIndex) && item.dict) {
+            await loadDict(this.dicts, item)
+        }
+        this.columns.push(item)
+        this.columnMap.set(item.dataIndex, new objectService(item))
+        // 获取排序
+        if (appendStartDataIndex !== null) {
+            let appendIndex =
+                this.columns
+                    .map((item) => {
+                        return item.dataIndex
+                    })
+                    ?.indexOf(appendStartDataIndex) ?? -1
+            if (appendIndex === -1) {
+                return this.append(item, null)
+            }
+            let sortIndex = 0
+            let appendPosIndex = 0
+            this.columns.forEach((sortItem) => {
+                if (sortItem.dataIndex === appendStartDataIndex) {
+                    appendPosIndex = sortIndex
+                } else if (sortItem.dataIndex === item.dataIndex) {
+                    sortIndex = appendPosIndex + 1
+                } else {
+                }
+                sortItem.sortIndex = sortIndex
+                sortIndex += 2
+            })
+            this.columns.sort((a, b) => a.sortIndex - b.sortIndex)
+        }
+        return true
+    }
+}
+
+export default ColumnService

cdTMP/src/components/ma-form/js/defaultOptions.js

@@ -47,5 +47,13 @@ export default {
     // 自定义标题样式css
     formTitleStyle: "",
     // 自定义标题样式class
-    formTitleClass: []
+    formTitleClass: [],
+
+    // 数据源列表，配合表单设计器使用，单独无法使用
+    sourceList: [],
+
+    // 全局CSS class
+    globalCss: "",
+    // 全局function
+    globalFunction: ""
 }

cdTMP/src/components/ma-form/js/event.js

@@ -0,0 +1,39 @@
+import { isString, isFunction } from "lodash-es"
+
+export const haveArgsEvent = async (component, value, evName, maformObj) => {
+    if (component[evName]) {
+        if (isFunction(component[evName])) {
+            return await component[evName](value, maformObj)
+        }
+        if (isString(component[evName])) {
+            const customFn = new Function("value", "maFormObject", component[evName])
+            return await customFn.call(component, value, maformObj)
+        }
+    }
+}
+
+export const notHaveArgsEvent = async (component, evName, maformObj) => {
+    if (component[evName]) {
+        if (isFunction(component[evName])) {
+            return await component[evName](maformObj)
+        }
+        if (isString(component[evName])) {
+            const customFn = new Function("maFormObject", component[evName])
+            return await customFn.call(component[evName], maformObj)
+        }
+    }
+}
+
+export const tabAddEvent = (component, maformObj) => {
+    haveArgsEvent(component, component?.tabs, "onTabAdd", maformObj)
+}
+
+export const tabDeleteEvent = (component, value, maformObj) => {
+    haveArgsEvent(component, { tabs: component?.tabs, value }, "onTabDelete", maformObj)
+}
+
+export const runEvent = async (component, evName, maformObj, value = undefined) => {
+    return value
+        ? await haveArgsEvent(component, value, evName, maformObj)
+        : await notHaveArgsEvent(component, evName, maformObj)
+}

cdTMP/src/components/ma-form/js/formItemMixin.js

@@ -1,4 +1,4 @@
-import { isString, isFunction } from "lodash"
+import { isString, isFunction } from "lodash-es"
 export const maEvent = {
     customeEvent: async (component, value, evName) => {
         if (component[evName]) {

cdTMP/src/components/ma-form/js/networkRequest.js

@@ -1,6 +1,8 @@
-import { isArray, isFunction, set } from "lodash"
+import { toRaw } from "vue"
+import { isArray, isFunction, set, isUndefined } from "lodash-es"
 import { request } from "@/utils/request"
 import commonApi from "@/api/common"
+import { Message } from "@arco-design/web-vue"
 import tool from "@/utils/tool"
 
 export const allowUseDictComponent = [
@@ -14,8 +16,49 @@ export const allowUseDictComponent = [
 ]
 export const allowCoverComponent = ["radio", "checkbox", "select", "transfer", "cascader"]
 
-export const requestDict = (url, method, params, data, timeout = 10 * 1000) =>
-    request({ url, method, params, data, timeout })
+export const coverSourceArrayToObj = (arr) => {
+    if (arr === null || arr.length === 0) {
+        return null
+    }
+    let obj = {}
+    const checkDataType = (type, value) => {
+        if (type === "string") {
+            return value.toString()
+        }
+        if (type === "number") {
+            return parseInt(value)
+        }
+        if (type === "bool") {
+            return value !== "false" && value !== 0 && (value === "true" || value) ? true : false
+        }
+    }
+    arr.map((item) => (obj[item.name] = checkDataType(item.type, item.value)))
+
+    return obj
+}
+
+export const requestDict = (url, method, params, data, header = {}, timeout = 10 * 1000) => {
+    return request({ url, method, params, data, header, timeout })
+}
+
+export const requestDataSource = async (config, maFormObject = {}) => {
+    try {
+        const response = await requestDict(
+            config.url,
+            config.type,
+            coverSourceArrayToObj(config.params),
+            coverSourceArrayToObj(config.data),
+            coverSourceArrayToObj(config.header),
+            config.timeout * 1000
+        )
+        const func = new Function("response", "config", "maFormObject", toRaw(config.response).getValue())
+        return await func.call(null, response, config, maFormObject)
+    } catch (err) {
+        const func = new Function("message", "response", "config", toRaw(config.errorHandle).getValue())
+        await func.call(null, Message, err, config)
+        return err
+    }
+}
 
 export const handlerDictProps = (item, tmpArr) => {
     let data = []
@@ -23,7 +66,7 @@ export const handlerDictProps = (item, tmpArr) => {
     let colors = {}
     let labelName = "label"
     let valueName = "value"
-    if (item.dict.name && (!item.dict.url || !item.dict.data)) {
+    if (item?.dict?.name && (!item.dict.url || !item.dict.data)) {
         labelName = "title"
         valueName = "key"
     }
@@ -37,10 +80,10 @@ export const handlerDictProps = (item, tmpArr) => {
                 typeof dicItem["indeterminate"] == "undefined"
                     ? false
                     : dicItem["indeterminate"] === true
-                    ? true
-                    : false
+                      ? true
+                      : false
             let value
-            if (item.dict.name || item.dict.data) value = tmp.toString()
+            if (item.dict.name || item.dict.data) value = tmp?.toString() ?? tmp
             else if (tmp === "true") value = true
             else if (tmp === "false") value = false
             else value = tmp
@@ -56,61 +99,122 @@ export const handlerDictProps = (item, tmpArr) => {
     return data
 }
 
-export const loadDict = async (dictList, item) => {
-    if (allowUseDictComponent.includes(item.formType) && item.dict) {
-        if (item.dict.name) {
-            const response = await commonApi.getDict(item.dict.name)
-            if (response.data) {
-                dictList[item.dataIndex] = handlerDictProps(item, response.data)
-            }
-        } else if (item.dict.url) {
-            const dictData = tool.local.get("dictData")
-            if (item.dict.cache && dictData[item.dataIndex]) {
-                dictList[item.dataIndex] = dictData[item.dataIndex]
+export const loadDict = async (dictList, item, sourceList = [], maFormObject = {}) => {
+    if (!allowUseDictComponent.includes(item.formType)) {
+        return
+    }
+    const dataIndex = item.parentDataIndex ? `${item.parentDataIndex}.${item.dataIndex}` : item.dataIndex
+    if (item.dict.name) {
+        const response = await commonApi.getDict(item.dict.name)
+        if (response.data) {
+            dictList[dataIndex] = handlerDictProps(item, response.data)
+        }
+    } else if (item.dict.remote) {
+        let requestData = {
+            openPage: item.dict?.openPage ?? false,
+            remoteOption: item.dict.remoteOption ?? {}
+        }
+        requestData = Object.assign(requestData, item.dict.pageOption)
+
+        if (requestData.openPage) {
+            const { data } = await requestDict(item.dict.remote, "POST", {}, requestData)
+            dictList[dataIndex] = handlerDictProps(item, data.items)
+            dictList[dataIndex].pageInfo = data.pageInfo
+        } else {
+            const dictData = tool.local.get("dictData") ?? {}
+            if (item.dict.cache && dictData[dataIndex]) {
+                dictList[dataIndex] = handlerDictProps(item, dictData[dataIndex])
             } else {
-                const response = await requestDict(
+                const { data } = await requestDict(item.dict.remote, "POST", {}, requestData)
+                dictList[dataIndex] = handlerDictProps(item, data)
+                if (item.dict.cache) {
+                    dictData[dataIndex] = data
+                    tool.local.set("dictData", dictData)
+                }
+            }
+        }
+    } else if (item.dict.url) {
+        let requestData = {
+            openPage: item.dict?.openPage ?? false,
+            remoteOption: item.dict.remoteOption ?? {}
+        }
+        requestData = Object.assign(requestData, item.dict.pageOption)
+
+        if (requestData.openPage) {
+            if (item.dict?.method === "GET" || item.dict?.method === "get") {
+                item.dict.params = Object.assign(item.dict.params ?? {}, requestData)
+            } else {
+                item.dict.body = Object.assign(item.dict.body ?? {}, requestData)
+            }
+            const { data } = await requestDict(
+                item.dict.url,
+                item.dict.method || "GET",
+                item.dict.params || {},
+                item.dict.body || {}
+            )
+            dictList[dataIndex] = handlerDictProps(item, data.items)
+            dictList[dataIndex].pageInfo = data.pageInfo
+        } else {
+            const dictData = tool.local.get("dictData") ?? {}
+            if (item.dict.cache && dictData[dataIndex]) {
+                dictList[dataIndex] = handlerDictProps(item, dictData[dataIndex])
+            } else {
+                const { data } = await requestDict(
                     item.dict.url,
                     item.dict.method || "GET",
                     item.dict.params || {},
                     item.dict.body || {}
                 )
-                if (response.data) {
-                    dictList[item.dataIndex] = handlerDictProps(item, response.data)
-                    if (item.dict.cache) {
-                        dictData[item.dataIndex] = dictList[item.dataIndex]
-                        tool.local.set("dictData", dictData)
-                    }
+                dictList[dataIndex] = handlerDictProps(item, data)
+                if (item.dict.cache) {
+                    dictData[dataIndex] = data
+                    tool.local.set("dictData", dictData)
                 }
             }
-        } else if (item.dict.data) {
-            if (isArray(item.dict.data)) {
-                dictList[item.dataIndex] = handlerDictProps(item, item.dict.data)
-            } else if (isFunction(item.dict.data)) {
-                const response = await item.dict.data()
-                dictList[item.dataIndex] = handlerDictProps(item, response)
-            }
+        }
+    } else if ((item?.sourceIndex || item?.sourceIndex === 0) && !isUndefined(sourceList[item?.sourceIndex])) {
+        const config = sourceList[item.sourceIndex]
+        const data = await requestDataSource(config, maFormObject)
+        dictList[dataIndex] = handlerDictProps(item, data)
+    } else if (item.dict.data) {
+        if (isArray(item.dict.data)) {
+            dictList[dataIndex] = handlerDictProps(item, item.dict.data)
+        } else if (isFunction(item.dict.data)) {
+            const response = await item.dict.data()
+            dictList[dataIndex] = handlerDictProps(item, response)
         }
     }
 }
 
 const requestCascaderData = async (val, dict, dictList, name) => {
-    if (dict && dict.url) {
+    if (dict && (dict.remote || dict.url)) {
+        let requestData = { openPage: dict?.openPage ?? false, remoteOption: dict.remoteOption ?? {} }
         let response
-        if (dict && dict.url.indexOf("{{key}}") > 0) {
+        const pageOption = Object.assign(requestData, dict.pageOption)
+        let url = dict.remote ?? dict.url
+        if (dict && url.indexOf("{{key}}") > 0) {
+            url = url.replace("{{key}}", val)
+            // 解析参数
+            let queryParams = tool.getRequestParams(url)
+            let urlIndex = url.indexOf("?")
+            if (urlIndex !== -1) {
+                url = url.substring(0, urlIndex)
+            }
             response = await requestDict(
-                dict.url.replace("{{key}}", val),
-                dict.method || "GET",
-                dict.params || {},
-                dict.data || {}
+                url,
+                dict.method ?? "GET",
+                Object.assign(dict.params || {}, requestData.openPage ? pageOption : {}, queryParams),
+                Object.assign(dict.data || {}, requestData.openPage ? pageOption : {})
             )
         } else {
-            let temp = { key: val }
+            let temp = Object.assign({ key: val }, requestData.openPage ? pageOption : {})
             const params = Object.assign(dict.params || {}, temp)
             const data = Object.assign(dict.data || {}, temp)
-            response = await requestDict(dict.url, dict.method || "GET", params || {}, data || {})
+            response = await requestDict(url, dict.method ?? "GET", params || {}, data || {})
         }
         if (response.data && response.code === 200) {
-            dictList[name] = response.data.map((dicItem) => {
+            let dataIems = requestData.openPage ? response.data.items : response.data
+            dictList[name] = dataIems.map((dicItem) => {
                 return {
                     label: dicItem[(dict.props && dict.props.label) || "label"],
                     value: dicItem[(dict.props && dict.props.value) || "value"],
@@ -120,10 +224,11 @@ const requestCascaderData = async (val, dict, dictList, name) => {
                         typeof dicItem["indeterminate"] == "undefined"
                             ? false
                             : dicItem["indeterminate"] === true
-                            ? true
-                            : false
+                              ? true
+                              : false
                 }
             })
+            dictList[name].pageInfo = response.data.pageInfo ?? undefined
         } else {
             console.error(response)
         }
@@ -133,9 +238,12 @@ const requestCascaderData = async (val, dict, dictList, name) => {
 export const handlerCascader = async (val, column, columns, dictList, formModel, clearData = true) => {
     if (column.cascaderItem && isArray(column.cascaderItem)) {
         column.cascaderItem.map(async (name) => {
-            const dict = columns.find((col) => col.dataIndex === name && col.dict).dict
-            clearData && set(formModel, name, undefined)
-            requestCascaderData(val, dict, dictList, name)
+            const columnItem = columns.find((col) => col.dataIndex === name && col.dict)
+            const dataIndex = columnItem.parentDataIndex
+                ? `${columnItem.parentDataIndex}.${columnItem.dataIndex}`
+                : columnItem.dataIndex
+            clearData && set(formModel, dataIndex, undefined)
+            await requestCascaderData(val, columnItem.dict, dictList, dataIndex)
         })
     }
 }

cdTMP/src/components/ma-form/js/utils.js

@@ -1,15 +1,30 @@
-import { isEmpty, isFunction, get, set } from "lodash"
+import { isEmpty, isFunction, get, set } from "lodash-es"
 
 export const containerItems = ["tabs", "table", "card", "grid", "grid-tailwind", "children-form"]
 export const inputType = ["input", "input-password", "input-search"]
 export const pickerType = ["date", "month", "year", "week", "quarter", "range", "time"]
 
-export const interactiveControl = (form, columns) => {
+export const interactiveControl = (form, columns, maFormObject) => {
     const obj = []
+    const names = []
+    const keys = Object.keys(form)
+    if (keys && keys.length > 0) {
+        keys.map((item) => {
+            if (form[item] && typeof form[item] === "object") {
+                for (let name in form[item]) {
+                    names.push(`${item}.${name}`)
+                }
+            }
+        })
+    }
     for (let name in form) {
         columns.map((item) => {
-            if (item.dataIndex === name && item.control && isFunction(item.control)) {
-                obj.push(item.control(get(form, name), form))
+            if (
+                (item.dataIndex === name || names.includes(item.dataIndex)) &&
+                item.onControl &&
+                isFunction(item.onControl)
+            ) {
+                obj.push(item.onControl(get(form, item.dataIndex), maFormObject))
             }
         })
     }
@@ -56,7 +71,7 @@ export const getComponentName = (formType) => {
     return `MaForm${toHump(formType)}`
 }
 
-export const handleFlatteningColumns = (data, columns, isChildrenForm = undefined) => {
+export const handleFlatteningColumns = (data, columns) => {
     for (let key in data) {
         const item = data[key]
         if (containerItems.includes(item.formType)) {
@@ -90,15 +105,42 @@ export const handleFlatteningColumns = (data, columns, isChildrenForm = undefine
                         })
                     }
                     break
-                // case 'children-form':
-                //   item.formList && handleFlatteningColumns(item.formList, columns, item.dataIndex, true)
-                //   break
+                case "children-form":
+                    item.formList.map((list) => (list.parentDataIndex = item.dataIndex))
+                    item.formList && handleFlatteningColumns(item.formList, columns)
+                    break
             }
         } else {
-            // if (isChildrenForm) {
-            //   item['isChildrenForm'] = true
-            // }
             columns.push(item)
         }
     }
 }
+
+export const insertGlobalCssToHead = (cssCode) => {
+    const head = document.getElementsByTagName("head")[0]
+    const oldStyle = document.getElementById("mineadmin-global-css")
+    oldStyle && head.removeChild(oldStyle)
+
+    const newStyle = document.createElement("style")
+    newStyle.rel = "stylesheet"
+    newStyle.id = "mineadmin-global-css"
+    try {
+        newStyle.appendChild(document.createTextNode(cssCode))
+    } catch (ex) {
+        newStyle.styleSheet.cssText = cssCode
+    }
+
+    head.appendChild(newStyle)
+}
+
+export const insertGlobalFunctionsToHtml = (functionsCode) => {
+    const bodyEle = document.getElementsByTagName("body")[0]
+    const oldScriptEle = document.getElementById("mineadmin-global-functions")
+    oldScriptEle && bodyEle.removeChild(oldScriptEle)
+
+    const newScriptEle = document.createElement("script")
+    newScriptEle.id = "mineadmin-global-functions"
+    newScriptEle.type = "text/javascript"
+    newScriptEle.innerHTML = functionsCode
+    bodyEle.appendChild(newScriptEle)
+}