首次提交

2023-06-04 20:01:58 +08:00
parent 00c64c53bb
commit 587f078d21
560 changed files with 106725 additions and 0 deletions
--- a/chengduTestPlant/src/components/ma-form/containerItem/card.vue
+++ b/chengduTestPlant/src/components/ma-form/containerItem/card.vue
@@ -0,0 +1,54 @@
+<!--
+ - MineAdmin is committed to providing solutions for quickly building web applications
+ - Please view the LICENSE file that was distributed with this source code,
+ - For the full copyright and license information.
+ - Thank you very much for using MineAdmin.
+ -
+ - @Author X.Mo<root@imoi.cn>
+ - @Link   https://gitee.com/xmo/mineadmin-vue
+-->
+<template>
+    <a-card
+        v-show="typeof props.component?.display == 'undefined' || props.component?.display === true"
+        :class="[props.component?.customClass]"
+        :extra="props.component?.extra"
+        :bordered="props.component?.bordered"
+        :loading="props.component?.loading"
+        :hoverable="props.component?.hoverable"
+        :size="props.component?.size"
+        :header-style="props.component?.headerStyle"
+        :body-style="props.component?.bodyStyle"
+    >
+        <template #title>
+            <slot :name="`cardTitle-${props.component?.dataIndex ?? ''}`">{{ props.component?.title }}</slot>
+        </template>
+        <template #actions>
+            <slot :name="`cardAction-${props.component?.dataIndex ?? ''}`"></slot>
+        </template>
+        <template #cover>
+            <slot :name="`cardCover-${props.component?.dataIndex ?? ''}`"></slot>
+        </template>
+        <template #extra>
+            <slot :name="`cardExtra-${props.component?.dataIndex ?? ''}`"></slot>
+        </template>
+        <template v-for="(component, componentIndex) in props.component?.formList ?? []" :key="componentIndex">
+            <component :is="getComponentName(component?.formType ?? 'input')" :component="component">
+                <template v-for="slot in Object.keys($slots)" #[slot]="component">
+                    <slot :name="slot" v-bind="component" />
+                </template>
+            </component>
+        </template>
+    </a-card>
+</template>
+
+<script setup>
+import { onMounted } from "vue"
+import { getComponentName } from "../js/utils.js"
+import { maEvent } from "../js/formItemMixin.js"
+const props = defineProps({ component: Object })
+
+maEvent.handleCommonEvent(props.component, "onCreated")
+onMounted(() => {
+    maEvent.handleCommonEvent(props.component, "onMounted")
+})
+</script>
--- a/chengduTestPlant/src/components/ma-form/containerItem/children-form.vue
+++ b/chengduTestPlant/src/components/ma-form/containerItem/children-form.vue
@@ -0,0 +1,219 @@
+<template>
+    <a-form-item
+        v-if="typeof props.component.display == 'undefined' || props.component.display === true"
+        :label="props.component.title"
+        :field="props.component.dataIndex"
+        :tooltip="props.component.tooltip"
+        :show-colon="props.component.showColon"
+        :label-col-flex="props.component.labelColFlex ?? 'auto'"
+        :label-col-style="{
+            width: props.component.labelWidth ? props.component.labelWidth : options.labelWidth || '100px'
+        }"
+        :rules="props.component.rules || []"
+        :disabled="props.component.disabled"
+        :help="props.component.help"
+        :extra="props.component.extra"
+        :required="props.component.required"
+        :hide-label="props.component.hideLabel"
+        :content-class="props.component.contentClass"
+        :feedback="props.component.feedback"
+        :validate-trigger="props.component.validateTrigger"
+        :validate-status="props.component.validateStatus"
+        :class="[props.component.customClass]"
+    >
+        <a-collapse
+            :default-active-key="defaultOpenKeys"
+            expand-icon-position="right"
+            v-if="(props.component?.type ?? 'group') === 'group'"
+            :show-expand-icon="false"
+        >
+            <a-collapse-item
+                v-for="(item, itemIndex) in formModel[props.component.dataIndex]"
+                :key="itemIndex"
+                :header="`${props.component.title} ${itemIndex + 1}项`"
+            >
+                <template #extra>
+                    <a-space>
+                        <a-tooltip content="添加新子项" v-if="!(props.component.hideAdd ?? false)">
+                            <a-button @click.stop="addItem()" type="primary" size="small" shape="round">
+                                <template #icon><icon-plus /></template>
+                            </a-button>
+                        </a-tooltip>
+                        <a-tooltip content="删除该子项" v-if="!(props.component.hideDelete ?? false)">
+                            <a-button
+                                @click.stop="deleteItem(itemIndex)"
+                                :disabled="formModel[props.component.dataIndex].length === 1"
+                                type="primary"
+                                size="small"
+                                shape="round"
+                                status="danger"
+                            >
+                                <template #icon><icon-minus /></template>
+                            </a-button>
+                        </a-tooltip>
+                    </a-space>
+                </template>
+                <template v-for="(component, componentIndex) in viewFormList[itemIndex]" :key="componentIndex">
+                    <component
+                        v-if="!containerItems.includes(component.formType)"
+                        :is="getComponentName(component?.formType ?? 'input')"
+                        :component="component"
+                        :customField="getChildrenDataIndex(itemIndex, component.dataIndex)"
+                    >
+                        <template v-for="slot in Object.keys($slots)" #[slot]="component">
+                            <slot :name="slot" v-bind="component" />
+                        </template>
+                    </component>
+                </template>
+            </a-collapse-item>
+        </a-collapse>
+
+        <a-table v-else class="w-full" :data="formModel[props.component.dataIndex]" :pagination="false" bordered stripe>
+            <template #columns id="children-columns">
+                <!-- 新增、删除列 -->
+                <a-table-column :width="60" fixed="left">
+                    <template #title>
+                        <a-button type="primary" @click="addItem()" size="small" shape="round">
+                            <template #icon>
+                                <icon-plus />
+                            </template>
+                        </a-button>
+                    </template>
+                    <template #cell="{ rowIndex }">
+                        <a-button
+                            type="primary"
+                            status="danger"
+                            size="small"
+                            shape="round"
+                            :disabled="formModel[props.component.dataIndex].length === 1"
+                            @click="deleteItem(rowIndex)"
+                        >
+                            <template #icon><icon-minus /></template>
+                        </a-button>
+                    </template>
+                </a-table-column>
+
+                <a-table-column :width="60" fixed="left">
+                    <template #title>序号</template>
+                    <template #cell="{ rowIndex }"> {{ rowIndex + 1 }} </template>
+                </a-table-column>
+
+                <template v-for="(component, itemIndex) in viewFormList[0]" :key="itemIndex">
+                    <a-table-column
+                        :width="component.width"
+                        :title="component.title ?? '未命名'"
+                        :align="component.align || 'left'"
+                        :fixed="component.fixed"
+                    >
+                        <template #cell="{ rowIndex }">
+                            <component
+                                v-if="!containerItems.includes(component.formType)"
+                                :is="getComponentName(component.formType ?? 'input')"
+                                :component="component"
+                                :customField="getChildrenDataIndex(rowIndex, component.dataIndex)"
+                            >
+                                <template v-for="slot in Object.keys($slots)" #[slot]="component">
+                                    <slot :name="slot" v-bind="component" />
+                                </template>
+                            </component>
+                        </template>
+                    </a-table-column>
+                </template>
+            </template>
+        </a-table>
+    </a-form-item>
+</template>
+
+<script setup>
+import { ref, inject, provide, onMounted, watch, nextTick, shallowRef, isRef } from "vue"
+import { cloneDeep, get, isArray, isUndefined, set } from "lodash"
+import { getComponentName, containerItems } from "../js/utils.js"
+import { maEvent } from "../js/formItemMixin.js"
+import { loadDict, handlerCascader } from "../js/networkRequest.js"
+import arrayComponentDefault from "../js/defaultArrayComponent.js"
+
+const props = defineProps({ component: Object })
+const formList = props.component.formList
+const viewFormList = ref([])
+const options = inject("options")
+const formModel = inject("formModel")
+const dictList = inject("dictList")
+const defaultOpenKeys = [0]
+
+if (!formModel.value[props.component.dataIndex]) {
+    formModel.value[props.component.dataIndex] = []
+}
+
+formList.map(async (item) => {
+    const tmp = cloneDeep(item)
+    tmp["dataIndex"] = [props.component.dataIndex, tmp.dataIndex].join(".")
+    await loadDict(dictList.value, tmp)
+})
+
+watch(
+    () => formModel.value[props.component.dataIndex],
+    (value) => {
+        if (isArray(value)) {
+            value.forEach((data, index) => {
+                if (isArray(data)) {
+                    value[index] = Object.fromEntries(data)
+                }
+                viewFormList.value[index] = cloneDeep(formList)
+                maEvent.customeEvent(props.component, { formList: viewFormList.value[index], data, index }, "onAdd")
+            })
+        }
+    },
+    {
+        immediate: true
+    }
+)
+
+if (props.component.type == "table") {
+    formList.map((item) => {
+        item["hideLabel"] = true
+    })
+} else {
+    formModel.value[props.component.dataIndex].map((item, index) => {
+        if (index > 0) defaultOpenKeys.push(index)
+    })
+}
+
+const addItem = async (data = {}) => {
+    let index = formModel.value[props.component.dataIndex].length
+    viewFormList.value[index] = cloneDeep(formList)
+    maEvent.customeEvent(props.component, { formList: viewFormList.value[index], data, index: index }, "onAdd")
+    formModel.value[props.component.dataIndex].push(data)
+}
+
+const deleteItem = async (index) => {
+    let res = await maEvent.customeEvent(props.component, { index }, "onDelete")
+    if (isUndefined(res) || res === true) {
+        viewFormList.value.splice(index, 1)
+        await nextTick()
+        formModel.value[props.component.dataIndex].splice(index, 1)
+    }
+}
+
+const getChildrenDataIndex = (index, dataIndex) => {
+    return [props.component.dataIndex, index, dataIndex].join(".")
+}
+
+maEvent.handleCommonEvent(props.component, "onCreated")
+onMounted(async () => {
+    if (formModel.value[props.component.dataIndex].length === 0) {
+        for (let i = 0; i < (props.component.emptyRow ?? 1); i++) {
+            await addItem()
+        }
+    }
+    maEvent.handleCommonEvent(props.component, "onMounted")
+})
+</script>
+
+<style scoped>
+:deep(.arco-form-item-content-flex) {
+    display: block;
+}
+:deep(.arco-table-cell .arco-form-item) {
+    margin-bottom: 0;
+}
+</style>
--- a/chengduTestPlant/src/components/ma-form/containerItem/grid-col.vue
+++ b/chengduTestPlant/src/components/ma-form/containerItem/grid-col.vue
@@ -0,0 +1,39 @@
+<!--
+ - MineAdmin is committed to providing solutions for quickly building web applications
+ - Please view the LICENSE file that was distributed with this source code,
+ - For the full copyright and license information.
+ - Thank you very much for using MineAdmin.
+ -
+ - @Author X.Mo<root@imoi.cn>
+ - @Link   https://gitee.com/xmo/mineadmin-vue
+-->
+<template>
+    <a-col
+        v-show="typeof props.component?.display == 'undefined' || props.component?.display === true"
+        :class="[props.component?.customClass]"
+        :span="props.component?.span ?? 12"
+        :offset="props.component?.offset"
+        :order="props.component?.order"
+        :xs="props.component?.xs"
+        :sm="props.component?.sm"
+        :md="props.component?.md"
+        :lg="props.component?.lg"
+        :xl="props.component?.xl"
+        :xxl="props.component?.xxl"
+        :flex="props.component?.flex"
+    >
+        <template v-for="(component, componentIndex) in props.component?.formList ?? []" :key="componentIndex">
+            <component :is="getComponentName(component?.formType ?? 'input')" :component="component">
+                <template v-for="slot in Object.keys($slots)" #[slot]="component">
+                    <slot :name="slot" v-bind="component" />
+                </template>
+            </component>
+        </template>
+    </a-col>
+</template>
+
+<script setup>
+import { ref, getCurrentInstance } from "vue"
+import { getComponentName } from "../js/utils.js"
+const props = defineProps({ component: Object })
+</script>
--- a/chengduTestPlant/src/components/ma-form/containerItem/grid-tailwind-col.vue
+++ b/chengduTestPlant/src/components/ma-form/containerItem/grid-tailwind-col.vue
@@ -0,0 +1,36 @@
+<!--
+ - MineAdmin is committed to providing solutions for quickly building web applications
+ - Please view the LICENSE file that was distributed with this source code,
+ - For the full copyright and license information.
+ - Thank you very much for using MineAdmin.
+ -
+ - @Author X.Mo<root@imoi.cn>
+ - @Link   https://gitee.com/xmo/mineadmin-vue
+-->
+<template>
+    <div
+        v-show="typeof props.component?.display == 'undefined' || props.component?.display === true"
+        :class="['grid-responsive-padding', props.component?.customClass]"
+        :style="props.component?.style"
+        :span="props.component?.span ?? 12"
+    >
+        <template v-for="(component, componentIndex) in props.component?.formList ?? []" :key="componentIndex">
+            <component :is="getComponentName(component.formType ?? 'input')" :component="component">
+                <template v-for="slot in Object.keys($slots)" #[slot]="component">
+                    <slot :name="slot" v-bind="component" />
+                </template>
+            </component>
+        </template>
+    </div>
+</template>
+
+<script setup>
+import { getComponentName } from "../js/utils.js"
+const props = defineProps({ component: Object })
+</script>
+
+<style>
+.grid-responsive-padding {
+    padding: 0 0.2em;
+}
+</style>
--- a/chengduTestPlant/src/components/ma-form/containerItem/grid-tailwind.vue
+++ b/chengduTestPlant/src/components/ma-form/containerItem/grid-tailwind.vue
@@ -0,0 +1,78 @@
+<!--
+ - MineAdmin is committed to providing solutions for quickly building web applications
+ - Please view the LICENSE file that was distributed with this source code,
+ - For the full copyright and license information.
+ - Thank you very much for using MineAdmin.
+ -
+ - @Author X.Mo<root@imoi.cn>
+ - @Link   https://gitee.com/xmo/mineadmin-vue
+-->
+<template>
+    <div
+        v-show="typeof props.component?.display == 'undefined' || props.component?.display === true"
+        :class="[gridClass, props.component?.customClass]"
+        :style="props.component?.style"
+    >
+        <template v-for="(col, colIndex) in props.component?.cols ?? []" :key="colIndex">
+            <ma-grid-tailwind-col :component="col">
+                <template v-for="slot in Object.keys($slots)" #[slot]="component">
+                    <slot :name="slot" v-bind="component" />
+                </template>
+            </ma-grid-tailwind-col>
+        </template>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue"
+import MaGridTailwindCol from "./grid-tailwind-col.vue"
+import { maEvent } from "../js/formItemMixin.js"
+const props = defineProps({ component: Object })
+const gridClass = ref(["ma-grid", "grid", "lg:grid-cols-" + props.component?.colNumber ?? 1])
+
+maEvent.handleCommonEvent(props.component, "onCreated")
+onMounted(() => {
+    maEvent.handleCommonEvent(props.component, "onMounted")
+})
+</script>
+
+<style scoped>
+@media (min-width: 1024px) {
+    .lg\:grid-cols-1 {
+        grid-template-columns: repeat(1, minmax(0, 1fr));
+    }
+    .lg\:grid-cols-2 {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+    .lg\:grid-cols-3 {
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+    .lg\:grid-cols-4 {
+        grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+    .lg\:grid-cols-5 {
+        grid-template-columns: repeat(5, minmax(0, 1fr));
+    }
+    .lg\:grid-cols-6 {
+        grid-template-columns: repeat(6, minmax(0, 1fr));
+    }
+    .lg\:grid-cols-7 {
+        grid-template-columns: repeat(7, minmax(0, 1fr));
+    }
+    .lg\:grid-cols-8 {
+        grid-template-columns: repeat(8, minmax(0, 1fr));
+    }
+    .lg\:grid-cols-9 {
+        grid-template-columns: repeat(9, minmax(0, 1fr));
+    }
+    .lg\:grid-cols-10 {
+        grid-template-columns: repeat(10, minmax(0, 1fr));
+    }
+    .lg\:grid-cols-11 {
+        grid-template-columns: repeat(11, minmax(0, 1fr));
+    }
+    .lg\:grid-cols-12 {
+        grid-template-columns: repeat(12, minmax(0, 1fr));
+    }
+}
+</style>
--- a/chengduTestPlant/src/components/ma-form/containerItem/grid.vue
+++ b/chengduTestPlant/src/components/ma-form/containerItem/grid.vue
@@ -0,0 +1,40 @@
+<!--
+ - MineAdmin is committed to providing solutions for quickly building web applications
+ - Please view the LICENSE file that was distributed with this source code,
+ - For the full copyright and license information.
+ - Thank you very much for using MineAdmin.
+ -
+ - @Author X.Mo<root@imoi.cn>
+ - @Link   https://gitee.com/xmo/mineadmin-vue
+-->
+<template>
+    <a-row
+        v-show="typeof props.component?.display == 'undefined' || props.component?.display === true"
+        :class="[props.component?.customClass]"
+        :gutter="props.component?.gutter"
+        :justify="props.component?.justify"
+        :align="props.component?.align"
+        :div="props.component?.div"
+        :wrap="props.component?.wrap"
+    >
+        <template v-for="(col, colIndex) in props.component?.cols ?? []" :key="colIndex">
+            <ma-grid-col :component="col">
+                <template v-for="slot in Object.keys($slots)" #[slot]="component">
+                    <slot :name="slot" v-bind="component" />
+                </template>
+            </ma-grid-col>
+        </template>
+    </a-row>
+</template>
+
+<script setup>
+import { onMounted } from "vue"
+import MaGridCol from "./grid-col.vue"
+import { maEvent } from "../js/formItemMixin.js"
+const props = defineProps({ component: Object })
+
+maEvent.handleCommonEvent(props.component, "onCreated")
+onMounted(() => {
+    maEvent.handleCommonEvent(props.component, "onMounted")
+})
+</script>
--- a/chengduTestPlant/src/components/ma-form/containerItem/table-cell.vue
+++ b/chengduTestPlant/src/components/ma-form/containerItem/table-cell.vue
@@ -0,0 +1,32 @@
+<!--
+ - MineAdmin is committed to providing solutions for quickly building web applications
+ - Please view the LICENSE file that was distributed with this source code,
+ - For the full copyright and license information.
+ - Thank you very much for using MineAdmin.
+ -
+ - @Author X.Mo<root@imoi.cn>
+ - @Link   https://gitee.com/xmo/mineadmin-vue
+-->
+<template>
+    <td
+        v-show="typeof props.component?.display == 'undefined' || props.component?.display === true"
+        :class="['table-cell', props.component?.customClass]"
+        :style="props.component?.style"
+        :colspan="props.component.colSpan"
+        :rowspan="props.component.rowSpan"
+    >
+        <template v-for="(component, componentIndex) in props.component?.formList ?? []" :key="componentIndex">
+            <component :is="getComponentName(component?.formType ?? 'input')" :component="component">
+                <template v-for="slot in Object.keys($slots)" #[slot]="component">
+                    <slot :name="slot" v-bind="component" />
+                </template>
+            </component>
+        </template>
+    </td>
+</template>
+
+<script setup>
+import { ref, getCurrentInstance } from "vue"
+import { getComponentName } from "../js/utils.js"
+const props = defineProps({ component: Object })
+</script>
--- a/chengduTestPlant/src/components/ma-form/containerItem/table.vue
+++ b/chengduTestPlant/src/components/ma-form/containerItem/table.vue
@@ -0,0 +1,57 @@
+<!--
+ - MineAdmin is committed to providing solutions for quickly building web applications
+ - Please view the LICENSE file that was distributed with this source code,
+ - For the full copyright and license information.
+ - Thank you very much for using MineAdmin.
+ -
+ - @Author X.Mo<root@imoi.cn>
+ - @Link   https://gitee.com/xmo/mineadmin-vue
+-->
+<template>
+    <table
+        v-show="typeof props.component?.display == 'undefined' || props.component?.display === true"
+        :class="['table-container', props.component?.customClass]"
+        :style="props.component?.style"
+    >
+        <tbody>
+            <tr
+                v-for="(row, rowIndex) in props.component?.rows ?? []"
+                :key="rowIndex"
+                :class="['table-row', row?.customClass]"
+                :style="row?.style"
+            >
+                <template v-for="(col, colIndex) in row.cols ?? []" :key="colIndex">
+                    <ma-table-cell :component="col">
+                        <template v-for="slot in Object.keys($slots)" #[slot]="component">
+                            <slot :name="slot" v-bind="component" />
+                        </template>
+                    </ma-table-cell>
+                </template>
+            </tr>
+        </tbody>
+    </table>
+</template>
+
+<script setup>
+import { onMounted } from "vue"
+import MaTableCell from "./table-cell.vue"
+import { maEvent } from "../js/formItemMixin.js"
+const props = defineProps({ component: Object })
+
+maEvent.handleCommonEvent(props.component, "onCreated")
+onMounted(() => {
+    maEvent.handleCommonEvent(props.component, "onMounted")
+})
+</script>
+
+<style lang="less">
+table.table-container {
+    width: 100%;
+    table-layout: fixed;
+    border-collapse: collapse;
+    .table-cell {
+        border: 1px solid var(--color-neutral-3);
+        padding: 0.2em;
+    }
+}
+</style>
--- a/chengduTestPlant/src/components/ma-form/containerItem/tabs.vue
+++ b/chengduTestPlant/src/components/ma-form/containerItem/tabs.vue
@@ -0,0 +1,66 @@
+<!--
+ - MineAdmin is committed to providing solutions for quickly building web applications
+ - Please view the LICENSE file that was distributed with this source code,
+ - For the full copyright and license information.
+ - Thank you very much for using MineAdmin.
+ -
+ - @Author X.Mo<root@imoi.cn>
+ - @Link   https://gitee.com/xmo/mineadmin-vue
+-->
+<template>
+    <a-tabs
+        v-show="typeof props.component?.display == 'undefined' || props.component?.display === true"
+        :class="[props.component?.customClass]"
+        :trigger="props.component?.trigger"
+        :position="props.component?.position"
+        :size="props.component?.size"
+        :type="props.component?.type"
+        :direction="props.component?.direction"
+        :editable="props.component?.editable"
+        :animation="props.component?.animation"
+        :justify="props.component?.justify"
+        :show-add-button="props.component?.showAddButton"
+        :hide-content="props.component?.hideContent"
+        :lazy-load="props.component?.lazyLoad"
+        :destroy-on-hide="props.component?.destroyOnHide"
+        @change="maEvent.handleChangeEvent(props.component, $event)"
+        @tab-click="maEvent.handleTabClickEvent(props.component, $event)"
+        @add="maEvent.handleTabAddEvent(props.component)"
+        @delete="maEvent.handleTabDeleteEvent(props.component, $event)"
+    >
+        <template #extra>
+            <slot :name="`tabExtra-${props.component?.dataIndex ?? ''}`"></slot>
+        </template>
+        <a-tab-pane
+            v-for="(tab, index) in props.component?.tabs ?? []"
+            :key="tab.key ?? index"
+            :disabled="tab?.disabled"
+            :closable="tab?.closable"
+        >
+            <template #title>
+                <slot :name="`tabPanelTitle-${props.component?.dataIndex ?? ''}-${tab.key ?? index}`">
+                    {{ tab.title ?? `Tab ${index + 1}` }}
+                </slot>
+            </template>
+            <template v-for="(component, componentIndex) in tab.formList ?? []" :key="componentIndex">
+                <component :is="getComponentName(component?.formType ?? 'input')" :component="component">
+                    <template v-for="slot in Object.keys($slots)" #[slot]="component">
+                        <slot :name="slot" v-bind="component" />
+                    </template>
+                </component>
+            </template>
+        </a-tab-pane>
+    </a-tabs>
+</template>
+
+<script setup>
+import { onMounted } from "vue"
+import { getComponentName } from "../js/utils.js"
+import { maEvent } from "../js/formItemMixin.js"
+const props = defineProps({ component: Object })
+
+maEvent.handleCommonEvent(props.component, "onCreated")
+onMounted(() => {
+    maEvent.handleCommonEvent(props.component, "onMounted")
+})
+</script>
--- a/chengduTestPlant/src/components/ma-form/formItem/form-auto-complete.vue
+++ b/chengduTestPlant/src/components/ma-form/formItem/form-auto-complete.vue
@@ -0,0 +1,68 @@
+<!--
+ - MineAdmin is committed to providing solutions for quickly building web applications
+ - Please view the LICENSE file that was distributed with this source code,
+ - For the full copyright and license information.
+ - Thank you very much for using MineAdmin.
+ -
+ - @Author X.Mo<root@imoi.cn>
+ - @Link   https://gitee.com/xmo/mineadmin-vue
+-->
+<template>
+    <ma-form-item
+        v-if="typeof props.component.display == 'undefined' || props.component.display === true"
+        :component="props.component"
+        :custom-field="props.customField"
+    >
+        <slot :name="`form-${props.component.dataIndex}`" v-bind="props.component">
+            <a-auto-complete
+                v-model="value"
+                :disabled="props.component.disabled"
+                :size="props.component.size"
+                :placeholder="props.component.placeholder ?? `请输入${props.component.title}`"
+                :readonly="props.component.readonly"
+                :data="props.component.data ?? []"
+                :strict="props.component.strict"
+                :filter-option="props.component.filterOption"
+                :allow-clear="props.component.allowClear ?? true"
+                @change="maEvent.customeEvent(props.component, $event, 'onChange')"
+                @search="maEvent.customeEvent(props.component, $event, 'onSearch')"
+                @select="maEvent.customeEvent(props.component, $event, 'onSelect')"
+                @clear="maEvent.customeEvent(props.component, $event, 'onClear')"
+            >
+                <slot :name="`autoCompleteFooter-${props.component.dataIndex}`"></slot>
+            </a-auto-complete>
+        </slot>
+    </ma-form-item>
+</template>
+
+<script setup>
+import { ref, inject, onMounted, watch } from "vue"
+import { get, set } from "lodash"
+import MaFormItem from "./form-item.vue"
+import { maEvent } from "../js/formItemMixin.js"
+const props = defineProps({
+    component: Object,
+    customField: { type: String, default: undefined }
+})
+
+const formModel = inject("formModel")
+const index = props.customField ?? props.component.dataIndex
+const value = ref(get(formModel.value, index, ""))
+
+watch(
+    () => get(formModel.value, index),
+    (vl) => (value.value = vl)
+)
+watch(
+    () => value.value,
+    (v) => {
+        set(formModel.value, index, v)
+        index.indexOf(".") > -1 && delete formModel.value[index]
+    }
+)
+
+maEvent.handleCommonEvent(props.component, "onCreated")
+onMounted(() => {
+    maEvent.handleCommonEvent(props.component, "onMounted")
+})
+</script>
--- a/chengduTestPlant/src/components/ma-form/formItem/form-button.vue
+++ b/chengduTestPlant/src/components/ma-form/formItem/form-button.vue
@@ -0,0 +1,43 @@
+<!--
+ - MineAdmin is committed to providing solutions for quickly building web applications
+ - Please view the LICENSE file that was distributed with this source code,
+ - For the full copyright and license information.
+ - Thank you very much for using MineAdmin.
+ -
+ - @Author X.Mo<root@imoi.cn>
+ - @Link   https://gitee.com/xmo/mineadmin-vue
+-->
+<template>
+    <slot :name="`form-${props.component.dataIndex}`" v-bind="props.component">
+        <a-button
+            :type="props.component.type"
+            :status="props.component.status"
+            :size="props.component.size"
+            :shape="props.component.shape"
+            :disabled="props.component.disabled"
+            :long="props.component.long"
+            :loading="props.component.loading"
+            :html-type="props.component.htmlType"
+            :href="props.component.href"
+            @click="maEvent.handleCommonEvent(props.component, 'onClick')"
+        >
+            <template #icon v-if="props.component.icon">
+                <component :is="props.component.icon" />
+            </template>
+            {{ props.component.title ?? "button" }}
+        </a-button>
+    </slot>
+</template>
+
+<script setup>
+import { onMounted } from "vue"
+import { maEvent } from "../js/formItemMixin.js"
+const props = defineProps({
+    component: Object
+})
+
+maEvent.handleCommonEvent(props.component, "onCreated")
+onMounted(() => {
+    maEvent.handleCommonEvent(props.component, "onMounted")
+})
+</script>
--- a/chengduTestPlant/src/components/ma-form/formItem/form-cascader.vue
+++ b/chengduTestPlant/src/components/ma-form/formItem/form-cascader.vue
@@ -0,0 +1,106 @@
+<!--
+ - MineAdmin is committed to providing solutions for quickly building web applications
+ - Please view the LICENSE file that was distributed with this source code,
+ - For the full copyright and license information.
+ - Thank you very much for using MineAdmin.
+ -
+ - @Author X.Mo<root@imoi.cn>
+ - @Link   https://gitee.com/xmo/mineadmin-vue
+-->
+<template>
+    <ma-form-item
+        v-if="typeof props.component.display == 'undefined' || props.component.display === true"
+        :component="props.component"
+        :custom-field="props.customField"
+    >
+        <slot :name="`form-${props.component.dataIndex}`" v-bind="props.component">
+            <a-cascader
+                v-model="value"
+                :path-mode="props.component.pathMode"
+                :placeholder="props.component.placeholder || `请选择${props.component.title}`"
+                :allow-clear="props.component.allowClear ?? true"
+                :allow-search="props.component.allowSearch ?? true"
+                :size="props.component.size"
+                :disabled="props.component.disabled"
+                :multiple="props.component.multiple"
+                :options="props.component.options ?? dictList[dictIndex] ?? []"
+                :input-value="props.component.inputValue"
+                :default-input-value="props.component.defaultInputValue"
+                :popup-visible="props.component.popupVisible"
+                :default-popup-visible="props.component.defaultPopupVisible"
+                :expand-trigger="props.component.expandTrigger"
+                :filter-option="props.component.filterOption"
+                :popup-container="props.component.popupContainer"
+                :max-tag-count="props.component.maxTagCount"
+                :format-label="props.component.formatLabel"
+                :trigger-props="props.component.triggerProps"
+                :check-strictly="props.component.checkStrictly"
+                :load-more="props.component.loadMore"
+                :loading="props.component.loading"
+                :search-option-only-label="props.component.searchOptionOnlyLabel"
+                :search-delay="props.component.searchDelay"
+                :field-names="
+                    props.component.fieldNames ?? props.component?.dict?.props ?? { key: 'value', title: 'label' }
+                "
+                :value-key="props.component.valueKey"
+                :fallback="props.component.fallback"
+                :expand-child="props.component.expandChild"
+                @change="maEvent.handleChangeEvent(props.component, $event)"
+                @input-value-change="maEvent.handleInputEvent(props.component, $event)"
+                @popup-visible-change="maEvent.customeEvent(props.component, $event, 'onPopupVisibleChange')"
+                @clear="maEvent.handleCommonEvent(props.component, 'onClear')"
+                @focus="maEvent.handleCommonEvent(props.component, 'onFocus')"
+                @blur="maEvent.handleCommonEvent(props.component, 'onBlur')"
+                @search="maEvent.customeEvent(props.component, $event, 'onSearch')"
+            >
+            </a-cascader>
+        </slot>
+    </ma-form-item>
+</template>
+
+<script setup>
+import { ref, inject, onMounted, watch } from "vue"
+import { get, set } from "lodash"
+import MaFormItem from "./form-item.vue"
+import { maEvent } from "../js/formItemMixin.js"
+
+const props = defineProps({
+    component: Object,
+    customField: { type: String, default: undefined }
+})
+
+const formModel = inject("formModel")
+const dictList = inject("dictList")
+const index = props.customField ?? props.component.dataIndex
+const dictIndex = index.match(/^(\w+\.)\d+\./)
+    ? index.match(/^(\w+\.)\d+\./)[1] + props.component.dataIndex
+    : props.component.dataIndex
+const value = ref(get(formModel.value, index))
+
+watch(
+    () => get(formModel.value, index),
+    (vl) => (value.value = vl)
+)
+watch(
+    () => value.value,
+    (v) => {
+        set(formModel.value, index, v)
+        index.indexOf(".") > -1 && delete formModel.value[index]
+    }
+)
+
+if (
+    props.component.dict &&
+    (props.component.dict.name || props.component.dict.data) &&
+    !value.value &&
+    !props.component.multiple &&
+    !props.component.pathMode
+) {
+    value.value = value.value + ""
+}
+
+maEvent.handleCommonEvent(props.component, "onCreated")
+onMounted(() => {
+    maEvent.handleCommonEvent(props.component, "onMounted")
+})
+</script>
--- a/chengduTestPlant/src/components/ma-form/formItem/form-checkbox.vue
+++ b/chengduTestPlant/src/components/ma-form/formItem/form-checkbox.vue
@@ -0,0 +1,70 @@
+<!--
+ - MineAdmin is committed to providing solutions for quickly building web applications
+ - Please view the LICENSE file that was distributed with this source code,
+ - For the full copyright and license information.
+ - Thank you very much for using MineAdmin.
+ -
+ - @Author X.Mo<root@imoi.cn>
+ - @Link   https://gitee.com/xmo/mineadmin-vue
+-->
+<template>
+    <ma-form-item
+        v-if="typeof props.component.display == 'undefined' || props.component.display === true"
+        :component="props.component"
+        :custom-field="props.customField"
+    >
+        <slot :name="`form-${props.component.dataIndex}`" v-bind="props.component">
+            <a-checkbox-group
+                v-model="value"
+                :size="props.component.size"
+                :max="props.component.max"
+                :direction="props.component.direction"
+                :disabled="props.component.disabled"
+                @change="maEvent.handleChangeEvent(props.component, $event)"
+            >
+                <template v-for="(item, index) in dictList[dictIndex] ?? []">
+                    <a-checkbox :value="item.value" :disabled="item.disabled" :indeterminate="item.indeterminate">{{
+                        item.label
+                    }}</a-checkbox>
+                </template>
+            </a-checkbox-group>
+        </slot>
+    </ma-form-item>
+</template>
+
+<script setup>
+import { ref, inject, onMounted, watch } from "vue"
+import { get, set } from "lodash"
+import MaFormItem from "./form-item.vue"
+import { maEvent } from "../js/formItemMixin.js"
+
+const props = defineProps({
+    component: Object,
+    customField: { type: String, default: undefined }
+})
+
+const formModel = inject("formModel")
+const dictList = inject("dictList")
+const index = props.customField ?? props.component.dataIndex
+const dictIndex = index.match(/^(\w+\.)\d+\./)
+    ? index.match(/^(\w+\.)\d+\./)[1] + props.component.dataIndex
+    : props.component.dataIndex
+const value = ref(get(formModel.value, index))
+
+watch(
+    () => get(formModel.value, index),
+    (vl) => (value.value = vl)
+)
+watch(
+    () => value.value,
+    (v) => {
+        set(formModel.value, index, v)
+        index.indexOf(".") > -1 && delete formModel.value[index]
+    }
+)
+
+maEvent.handleCommonEvent(props.component, "onCreated")
+onMounted(() => {
+    maEvent.handleCommonEvent(props.component, "onMounted")
+})
+</script>
--- a/chengduTestPlant/src/components/ma-form/formItem/form-city-linkage.vue
+++ b/chengduTestPlant/src/components/ma-form/formItem/form-city-linkage.vue
@@ -0,0 +1,55 @@
+<!--
+ - MineAdmin is committed to providing solutions for quickly building web applications
+ - Please view the LICENSE file that was distributed with this source code,
+ - For the full copyright and license information.
+ - Thank you very much for using MineAdmin.
+ -
+ - @Author X.Mo<root@imoi.cn>
+ - @Link   https://gitee.com/xmo/mineadmin-vue
+-->
+<template>
+    <ma-form-item
+        v-if="typeof props.component.display == 'undefined' || props.component.display === true"
+        :component="props.component"
+        :custom-field="props.customField"
+    >
+        <slot :name="`form-${props.component.dataIndex}`" v-bind="props.component">
+            <ma-city-linkage v-model="value" :type="props.component.type" :mode="props.component.mode">
+            </ma-city-linkage>
+        </slot>
+    </ma-form-item>
+</template>
+
+<script setup>
+import { ref, inject, onMounted, watch } from "vue"
+import { get, set } from "lodash"
+import MaCityLinkage from "@/components/ma-cityLinkage/index.vue"
+import MaFormItem from "./form-item.vue"
+import { maEvent } from "../js/formItemMixin.js"
+
+const props = defineProps({
+    component: Object,
+    customField: { type: String, default: undefined }
+})
+
+const formModel = inject("formModel")
+const index = props.customField ?? props.component.dataIndex
+const value = ref(get(formModel.value, index))
+
+watch(
+    () => get(formModel.value, index),
+    (vl) => (value.value = vl)
+)
+watch(
+    () => value.value,
+    (v) => {
+        set(formModel.value, index, v)
+        index.indexOf(".") > -1 && delete formModel.value[index]
+    }
+)
+
+maEvent.handleCommonEvent(props.component, "onCreated")
+onMounted(() => {
+    maEvent.handleCommonEvent(props.component, "onMounted")
+})
+</script>
--- a/chengduTestPlant/src/components/ma-form/formItem/form-code-editor.vue
+++ b/chengduTestPlant/src/components/ma-form/formItem/form-code-editor.vue
@@ -0,0 +1,62 @@
+<!--
+ - MineAdmin is committed to providing solutions for quickly building web applications
+ - Please view the LICENSE file that was distributed with this source code,
+ - For the full copyright and license information.
+ - Thank you very much for using MineAdmin.
+ -
+ - @Author X.Mo<root@imoi.cn>
+ - @Link   https://gitee.com/xmo/mineadmin-vue
+-->
+<template>
+    <ma-form-item
+        v-if="typeof props.component.display == 'undefined' || props.component.display === true"
+        :component="props.component"
+        :custom-field="props.customField"
+    >
+        <slot :name="`form-${props.component.dataIndex}`" v-bind="props.component">
+            <ma-code-editor
+                v-model="value"
+                style="width: 100%"
+                :height="props.component.height"
+                :isBind="props.component.isBind"
+                :language="props.component.language"
+                :readonly="props.component.readonly"
+                @change="maEvent.handleChangeEvent(props.component, $event)"
+            >
+            </ma-code-editor>
+        </slot>
+    </ma-form-item>
+</template>
+
+<script setup>
+import { ref, inject, onMounted, watch } from "vue"
+import { get, set } from "lodash"
+import MaCodeEditor from "@/components/ma-codeEditor/index.vue"
+import MaFormItem from "./form-item.vue"
+import { maEvent } from "../js/formItemMixin.js"
+const props = defineProps({
+    component: Object,
+    customField: { type: String, default: undefined }
+})
+
+const formModel = inject("formModel")
+const index = props.customField ?? props.component.dataIndex
+const value = ref(get(formModel.value, index))
+
+watch(
+    () => get(formModel.value, index),
+    (vl) => (value.value = vl)
+)
+watch(
+    () => value.value,
+    (v) => {
+        set(formModel.value, index, v)
+        index.indexOf(".") > -1 && delete formModel.value[index]
+    }
+)
+
+maEvent.handleCommonEvent(props.component, "onCreated")
+onMounted(() => {
+    maEvent.handleCommonEvent(props.component, "onMounted")
+})
+</script>
--- a/chengduTestPlant/src/components/ma-form/formItem/form-color-picker.vue
+++ b/chengduTestPlant/src/components/ma-form/formItem/form-color-picker.vue
@@ -0,0 +1,54 @@
+<!--
+ - MineAdmin is committed to providing solutions for quickly building web applications
+ - Please view the LICENSE file that was distributed with this source code,
+ - For the full copyright and license information.
+ - Thank you very much for using MineAdmin.
+ -
+ - @Author X.Mo<root@imoi.cn>
+ - @Link   https://gitee.com/xmo/mineadmin-vue
+-->
+<template>
+    <ma-form-item
+        v-if="typeof props.component.display == 'undefined' || props.component.display === true"
+        :component="props.component"
+        :custom-field="props.customField"
+    >
+        <slot :name="`form-${props.component.dataIndex}`" v-bind="props.component">
+            <ma-color-picker v-model="value"> </ma-color-picker>
+        </slot>
+    </ma-form-item>
+</template>
+
+<script setup>
+import { ref, inject, onMounted, watch } from "vue"
+import { get, set } from "lodash"
+import MaColorPicker from "@/components/ma-colorPicker/index.vue"
+import MaFormItem from "./form-item.vue"
+import { maEvent } from "../js/formItemMixin.js"
+
+const props = defineProps({
+    component: Object,
+    customField: { type: String, default: undefined }
+})
+
+const formModel = inject("formModel")
+const index = props.customField ?? props.component.dataIndex
+const value = ref(get(formModel.value, index))
+
+watch(
+    () => get(formModel.value, index),
+    (vl) => (value.value = vl)
+)
+watch(
+    () => value.value,
+    (v) => {
+        set(formModel.value, index, v)
+        index.indexOf(".") > -1 && delete formModel.value[index]
+    }
+)
+
+maEvent.handleCommonEvent(props.component, "onCreated")
+onMounted(() => {
+    maEvent.handleCommonEvent(props.component, "onMounted")
+})
+</script>
--- a/chengduTestPlant/src/components/ma-form/formItem/form-component.vue
+++ b/chengduTestPlant/src/components/ma-form/formItem/form-component.vue
@@ -0,0 +1,47 @@
+<!--
+ - MineAdmin is committed to providing solutions for quickly building web applications
+ - Please view the LICENSE file that was distributed with this source code,
+ - For the full copyright and license information.
+ - Thank you very much for using MineAdmin.
+ -
+ - @Author X.Mo<root@imoi.cn>
+ - @Link   https://gitee.com/xmo/mineadmin-vue
+-->
+<template>
+    <ma-form-item
+        v-if="typeof props.component.display == 'undefined' || props.component.display === true"
+        :component="props.component"
+        :custom-field="props.customField"
+    >
+        <slot :name="`form-${props.component.dataIndex}`" v-bind="props.component">
+            <component :is="props.component.dataIndex" :component="props.component" :customField="props.customField" />
+        </slot>
+    </ma-form-item>
+</template>
+
+<script setup>
+import { onMounted, getCurrentInstance, watch } from "vue"
+import { get, set } from "lodash"
+import MaFormItem from "./form-item.vue"
+import { maEvent } from "../js/formItemMixin.js"
+
+const props = defineProps({
+    component: Object,
+    customField: { type: String, default: undefined }
+})
+
+const app = getCurrentInstance().appContext.app
+
+if (
+    props.component.formType === "component" &&
+    props.component.component &&
+    !app._context.components[props.component.dataIndex]
+) {
+    app.component(props.component.dataIndex, props.component.component)
+}
+
+maEvent.handleCommonEvent(props.component, "onCreated")
+onMounted(() => {
+    maEvent.handleCommonEvent(props.component, "onMounted")
+})
+</script>
--- a/chengduTestPlant/src/components/ma-form/formItem/form-divider.vue
+++ b/chengduTestPlant/src/components/ma-form/formItem/form-divider.vue
@@ -0,0 +1,37 @@
+<!--
+ - MineAdmin is committed to providing solutions for quickly building web applications
+ - Please view the LICENSE file that was distributed with this source code,
+ - For the full copyright and license information.
+ - Thank you very much for using MineAdmin.
+ -
+ - @Author X.Mo<root@imoi.cn>
+ - @Link   https://gitee.com/xmo/mineadmin-vue
+-->
+<template>
+    <slot :name="`form-${props.component.dataIndex}`" v-bind="props.component">
+        <a-divider
+            v-if="typeof props.component.display == 'undefined' || props.component.display === true"
+            :class="[props.component.customClass]"
+            :margin="props.component.margin"
+            :direction="props.component.direction"
+            :orientation="props.component.orientation"
+            :type="props.component.type"
+            :size="props.component.size"
+        >
+            {{ props.component?.title ?? "" }}
+        </a-divider>
+    </slot>
+</template>
+
+<script setup>
+import { onMounted } from "vue"
+import { maEvent } from "../js/formItemMixin.js"
+const props = defineProps({
+    component: Object
+})
+
+maEvent.handleCommonEvent(props.component, "onCreated")
+onMounted(() => {
+    maEvent.handleCommonEvent(props.component, "onMounted")
+})
+</script>
--- a/chengduTestPlant/src/components/ma-form/formItem/form-editor.vue
+++ b/chengduTestPlant/src/components/ma-form/formItem/form-editor.vue
@@ -0,0 +1,60 @@
+<!--
+ - MineAdmin is committed to providing solutions for quickly building web applications
+ - Please view the LICENSE file that was distributed with this source code,
+ - For the full copyright and license information.
+ - Thank you very much for using MineAdmin.
+ -
+ - @Author X.Mo<root@imoi.cn>
+ - @Link   https://gitee.com/xmo/mineadmin-vue
+-->
+<template>
+    <ma-form-item
+        v-if="typeof props.component.display == 'undefined' || props.component.display === true"
+        :component="props.component"
+        :custom-field="props.customField"
+    >
+        <slot :name="`form-${props.component.dataIndex}`" v-bind="props.component">
+            <ma-editor
+                v-model="value"
+                style="width: 100%"
+                :height="props.component.height"
+                :id="props.component.id"
+                @change="maEvent.handleChangeEvent(props.component, $event)"
+            >
+            </ma-editor>
+        </slot>
+    </ma-form-item>
+</template>
+
+<script setup>
+import { ref, inject, onMounted, watch } from "vue"
+import { get, set } from "lodash"
+import MaEditor from "@/components/ma-editor/index.vue"
+import MaFormItem from "./form-item.vue"
+import { maEvent } from "../js/formItemMixin.js"
+const props = defineProps({
+    component: Object,
+    customField: { type: String, default: undefined }
+})
+
+const formModel = inject("formModel")
+const index = props.customField ?? props.component.dataIndex
+const value = ref(get(formModel.value, index))
+
+watch(
+    () => get(formModel.value, index),
+    (vl) => (value.value = vl)
+)
+watch(
+    () => value.value,
+    (v) => {
+        set(formModel.value, index, v)
+        index.indexOf(".") > -1 && delete formModel.value[index]
+    }
+)
+
+maEvent.handleCommonEvent(props.component, "onCreated")
+onMounted(() => {
+    maEvent.handleCommonEvent(props.component, "onMounted")
+})
+</script>
--- a/chengduTestPlant/src/components/ma-form/formItem/form-icon-picker.vue
+++ b/chengduTestPlant/src/components/ma-form/formItem/form-icon-picker.vue
@@ -0,0 +1,54 @@
+<!--
+ - MineAdmin is committed to providing solutions for quickly building web applications
+ - Please view the LICENSE file that was distributed with this source code,
+ - For the full copyright and license information.
+ - Thank you very much for using MineAdmin.
+ -
+ - @Author X.Mo<root@imoi.cn>
+ - @Link   https://gitee.com/xmo/mineadmin-vue
+-->
+<template>
+    <ma-form-item
+        v-if="typeof props.component.display == 'undefined' || props.component.display === true"
+        :component="props.component"
+        :custom-field="props.customField"
+    >
+        <slot :name="`form-${props.component.dataIndex}`" v-bind="props.component">
+            <ma-icon-picker v-model="value"> </ma-icon-picker>
+        </slot>
+    </ma-form-item>
+</template>
+
+<script setup>
+import { ref, inject, onMounted, watch } from "vue"
+import { get, set } from "lodash"
+import MaIconPicker from "@/components/ma-icon/index.vue"
+import MaFormItem from "./form-item.vue"
+import { maEvent } from "../js/formItemMixin.js"
+const props = defineProps({
+    component: Object,
+    customField: { type: String, default: undefined }
+})
+
+const formModel = inject("formModel")
+const dictList = inject("dictList")
+const index = props.customField ?? props.component.dataIndex
+const value = ref(get(formModel.value, index))
+
+watch(
+    () => get(formModel.value, index),
+    (vl) => (value.value = vl)
+)
+watch(
+    () => value.value,
+    (v) => {
+        set(formModel.value, index, v)
+        index.indexOf(".") > -1 && delete formModel.value[index]
+    }
+)
+
+maEvent.handleCommonEvent(props.component, "onCreated")
+onMounted(() => {
+    maEvent.handleCommonEvent(props.component, "onMounted")
+})
+</script>
--- a/chengduTestPlant/src/components/ma-form/formItem/form-input-number.vue
+++ b/chengduTestPlant/src/components/ma-form/formItem/form-input-number.vue
@@ -0,0 +1,81 @@
+<!--
+ - MineAdmin is committed to providing solutions for quickly building web applications
+ - Please view the LICENSE file that was distributed with this source code,
+ - For the full copyright and license information.
+ - Thank you very much for using MineAdmin.
+ -
+ - @Author X.Mo<root@imoi.cn>
+ - @Link   https://gitee.com/xmo/mineadmin-vue
+-->
+<template>
+    <ma-form-item
+        v-if="typeof props.component.display == 'undefined' || props.component.display === true"
+        :component="props.component"
+        :custom-field="props.customField"
+    >
+        <slot :name="`form-${props.component.dataIndex}`" v-bind="props.component">
+            <a-input-number
+                v-model="value"
+                :size="props.component.size"
+                :allow-clear="props.component.allowClear ?? true"
+                :disabled="props.component.disabled"
+                :read-only="props.component.readonly"
+                :error="props.component.error"
+                :placeholder="props.component.placeholder ?? `请输入${props.component.title}`"
+                :mode="props.component.mode"
+                :precision="props.component.precision"
+                :step="props.component.step"
+                :max="props.component.max"
+                :min="props.component.min"
+                :formatter="props.component.formatter"
+                :parser="props.component.parser"
+                :model-event="props.component.modelEvent"
+                @input="maEvent.handleInputEvent(props.component, $event)"
+                @change="maEvent.handleChangeEvent(props.component, $event)"
+                @clear="maEvent.handleCommonEvent(props.component, 'onClear')"
+                @focus="maEvent.handleCommonEvent(props.component, 'onFocus')"
+                @blur="maEvent.handleCommonEvent(props.component, 'onBlur')"
+            >
+                <template #suffix v-if="props.component.openSuffix">
+                    <slot :name="`inputSuffix-${props.component.dataIndex}`" />
+                </template>
+                <template #prefix v-if="props.component.openPrefix">
+                    <slot :name="`inputPrefix-${props.component.dataIndex}`" />
+                </template>
+            </a-input-number>
+        </slot>
+    </ma-form-item>
+</template>
+
+<script setup>
+import { ref, inject, onMounted, watch } from "vue"
+import { get, set, toNumber, isNaN } from "lodash"
+import MaFormItem from "./form-item.vue"
+import { maEvent } from "../js/formItemMixin.js"
+const props = defineProps({
+    component: Object,
+    customField: { type: String, default: undefined }
+})
+
+const formModel = inject("formModel")
+const index = props.customField ?? props.component.dataIndex
+const value = ref(toNumber(get(formModel.value, index)))
+
+watch(
+    () => get(formModel.value, index),
+    (vl) => (value.value = toNumber(vl))
+)
+watch(
+    () => value.value,
+    (v) => {
+        if (isNaN(v)) v = undefined
+        set(formModel.value, index, v)
+        index.indexOf(".") > -1 && delete formModel.value[index]
+    }
+)
+
+maEvent.handleCommonEvent(props.component, "onCreated")
+onMounted(() => {
+    maEvent.handleCommonEvent(props.component, "onMounted")
+})
+</script>
--- a/chengduTestPlant/src/components/ma-form/formItem/form-input-tag.vue
+++ b/chengduTestPlant/src/components/ma-form/formItem/form-input-tag.vue
@@ -0,0 +1,80 @@
+<!--
+ - MineAdmin is committed to providing solutions for quickly building web applications
+ - Please view the LICENSE file that was distributed with this source code,
+ - For the full copyright and license information.
+ - Thank you very much for using MineAdmin.
+ -
+ - @Author X.Mo<root@imoi.cn>
+ - @Link   https://gitee.com/xmo/mineadmin-vue
+-->
+<template>
+    <ma-form-item
+        v-if="typeof props.component.display == 'undefined' || props.component.display === true"
+        :component="props.component"
+        :custom-field="props.customField"
+    >
+        <slot :name="`form-${props.component.dataIndex}`" v-bind="props.component">
+            <a-input-tag
+                v-model="value"
+                :input-value="props.component.inputValue"
+                :size="props.component.size"
+                :allow-clear="props.component.allowClear ?? true"
+                :disabled="props.component.disabled"
+                :readonly="props.component.readonly"
+                :error="props.component.error"
+                :placeholder="props.component.placeholder ?? `请输入${props.component.title}`"
+                :max-tag-count="props.component.maxTagCount"
+                :retain-input-value="props.component.retainInputValue"
+                :format-tag="props.component.formatTag"
+                :unique-value="props.component.uniqueValue"
+                :field-names="props.component.fieldNames"
+                @input-value-change="maEvent.customeEvent(props.component, $event, 'onInputValueChange')"
+                @change="maEvent.handleChangeEvent(props.component, $event)"
+                @remove="maEvent.customeEvent(props.component, $event, 'onRemove')"
+                @press-enter="maEvent.customeEvent(props.component, $event, 'onPressEnter')"
+                @clear="maEvent.handleCommonEvent(props.component, 'onClear')"
+                @focus="maEvent.handleCommonEvent(props.component, 'onFocus')"
+                @blur="maEvent.handleCommonEvent(props.component, 'onBlur')"
+            >
+                <template #suffix v-if="props.component.openSuffix">
+                    <slot :name="`inputSuffix-${props.component.dataIndex}`" />
+                </template>
+                <template #prefix v-if="props.component.openPrefix">
+                    <slot :name="`inputPrefix-${props.component.dataIndex}`" />
+                </template>
+            </a-input-tag>
+        </slot>
+    </ma-form-item>
+</template>
+
+<script setup>
+import { ref, inject, onMounted, watch } from "vue"
+import { get, set } from "lodash"
+import MaFormItem from "./form-item.vue"
+import { maEvent } from "../js/formItemMixin.js"
+const props = defineProps({
+    component: Object,
+    customField: { type: String, default: undefined }
+})
+
+const formModel = inject("formModel")
+const index = props.customField ?? props.component.dataIndex
+const value = ref(get(formModel.value, index))
+
+watch(
+    () => get(formModel.value, index),
+    (vl) => (value.value = vl)
+)
+watch(
+    () => value.value,
+    (v) => {
+        set(formModel.value, index, v)
+        index.indexOf(".") > -1 && delete formModel.value[index]
+    }
+)
+
+maEvent.handleCommonEvent(props.component, "onCreated")
+onMounted(() => {
+    maEvent.handleCommonEvent(props.component, "onMounted")
+})
+</script>
--- a/chengduTestPlant/src/components/ma-form/formItem/form-input.vue
+++ b/chengduTestPlant/src/components/ma-form/formItem/form-input.vue
@@ -0,0 +1,102 @@
+<!--
+ - MineAdmin is committed to providing solutions for quickly building web applications
+ - Please view the LICENSE file that was distributed with this source code,
+ - For the full copyright and license information.
+ - Thank you very much for using MineAdmin.
+ -
+ - @Author X.Mo<root@imoi.cn>
+ - @Link   https://gitee.com/xmo/mineadmin-vue
+-->
+<template>
+    <ma-form-item
+        v-if="typeof props.component.display == 'undefined' || props.component.display === true"
+        :component="props.component"
+        :custom-field="props.customField"
+    >
+        <slot :name="`form-${props.component.dataIndex}`" v-bind="props.component">
+            <component
+                :is="getComponentName()"
+                v-model="value"
+                :size="props.component.size"
+                :allow-clear="props.component.allowClear ?? true"
+                :disabled="props.component.disabled"
+                :readonly="props.component.readonly"
+                :read-only="props.component.readonly"
+                :error="props.component.error"
+                :placeholder="props.component.placeholder ?? `请输入${props.component.title}`"
+                :max-length="props.component.maxLength"
+                :show-word-limit="props.component.showWordLimit"
+                :word-length="props.component.wordLength"
+                :word-slice="props.component.wordSlice"
+                :invisible-button="props.component.invisibleButton"
+                :search-button="props.component.searchButton"
+                :loading="props.component.invisibleButton"
+                :button-text="props.component.buttonText"
+                @input="maEvent.handleInputEvent(props.component, $event)"
+                @change="maEvent.handleChangeEvent(props.component, $event)"
+                @press-enter="maEvent.handleCommonEvent(props.component, 'onPressEnter')"
+                @clear="maEvent.handleCommonEvent(props.component, 'onClear')"
+                @focus="maEvent.handleCommonEvent(props.component, 'onFocus')"
+                @blur="maEvent.handleCommonEvent(props.component, 'onBlur')"
+                @search="maEvent.handleInputSearchEvent(props.component, $event)"
+            >
+                <template #prepend v-if="props.component.openPrepend">
+                    <slot :name="`inputPrepend-${props.component.dataIndex}`" />
+                </template>
+                <template #append v-if="props.component.openAppend">
+                    <slot :name="`inputAppend-${props.component.dataIndex}`" />
+                </template>
+                <template #suffix v-if="props.component.openSuffix">
+                    <slot :name="`inputSuffix-${props.component.dataIndex}`" />
+                </template>
+                <template #prefix v-if="props.component.openPrefix">
+                    <slot :name="`inputPrefix-${props.component.dataIndex}`" />
+                </template>
+            </component>
+        </slot>
+    </ma-form-item>
+</template>
+
+<script setup>
+import { ref, inject, onMounted, watch } from "vue"
+import { get, set } from "lodash"
+import MaFormItem from "./form-item.vue"
+import { maEvent } from "../js/formItemMixin.js"
+const props = defineProps({
+    component: Object,
+    customField: { type: String, default: undefined }
+})
+
+const formModel = inject("formModel")
+const index = props.customField ?? props.component.dataIndex
+const value = ref(get(formModel.value, index))
+
+watch(
+    () => get(formModel.value, index),
+    (vl) => (value.value = vl)
+)
+watch(
+    () => value.value,
+    (v) => {
+        set(formModel.value, index, v)
+        index.indexOf(".") > -1 && delete formModel.value[index]
+    }
+)
+
+const getComponentName = () => {
+    if (props.component.formType === "input") {
+        return "a-input"
+    } else if (props.component.formType === "input-password") {
+        return "a-input-password"
+    } else if (props.component.formType === "input-search") {
+        return "a-input-search"
+    } else {
+        return "a-input"
+    }
+}
+
+maEvent.handleCommonEvent(props.component, "onCreated")
+onMounted(() => {
+    maEvent.handleCommonEvent(props.component, "onMounted")
+})
+</script>
--- a/chengduTestPlant/src/components/ma-form/formItem/form-item.vue
+++ b/chengduTestPlant/src/components/ma-form/formItem/form-item.vue
@@ -0,0 +1,42 @@
+<!--
+ - MineAdmin is committed to providing solutions for quickly building web applications
+ - Please view the LICENSE file that was distributed with this source code,
+ - For the full copyright and license information.
+ - Thank you very much for using MineAdmin.
+ -
+ - @Author X.Mo<root@imoi.cn>
+ - @Link   https://gitee.com/xmo/mineadmin-vue
+-->
+<template>
+    <a-form-item
+        :label="props.component.title"
+        :field="props.customField ?? props.component.dataIndex"
+        :tooltip="props.component.tooltip"
+        :show-colon="props.component.showColon"
+        :label-col-flex="props.component.labelColFlex ?? 'auto'"
+        :label-col-style="{
+            width: props.component.labelWidth ? props.component.labelWidth : options.labelWidth || '100px'
+        }"
+        :rules="props.component.rules"
+        :disabled="props.component.disabled"
+        :help="props.component.help"
+        :extra="props.component.extra"
+        :required="props.component.required"
+        :hide-label="props.component.hideLabel"
+        :content-class="props.component.contentClass"
+        :feedback="props.component.feedback"
+        :validate-trigger="props.component.validateTrigger ?? 'blur'"
+        :validate-status="props.component.validateStatus"
+        :class="[props.component.customClass]"
+    >
+        <slot></slot>
+    </a-form-item>
+</template>
+<script setup>
+import { inject } from "vue"
+const options = inject("options")
+const props = defineProps({
+    component: Object,
+    customField: { type: String, default: null }
+})
+</script>
--- a/chengduTestPlant/src/components/ma-form/formItem/form-link.vue
+++ b/chengduTestPlant/src/components/ma-form/formItem/form-link.vue
@@ -0,0 +1,39 @@
+<!--
+ - MineAdmin is committed to providing solutions for quickly building web applications
+ - Please view the LICENSE file that was distributed with this source code,
+ - For the full copyright and license information.
+ - Thank you very much for using MineAdmin.
+ -
+ - @Author X.Mo<root@imoi.cn>
+ - @Link   https://gitee.com/xmo/mineadmin-vue
+-->
+<template>
+    <slot :name="`form-${props.component.dataIndex}`" v-bind="props.component">
+        <a-link
+            :status="props.component.status"
+            :hoverable="props.component.hoverable"
+            :disabled="props.component.disabled"
+            :loading="props.component.loading"
+            :href="props.component.href"
+            @click="maEvent.handleCommonEvent(props.component, 'onClick')"
+        >
+            <template #icon v-if="props.component.icon">
+                <component :is="props.component.icon" />
+            </template>
+            {{ props.component.title ?? "link" }}
+        </a-link>
+    </slot>
+</template>
+
+<script setup>
+import { onMounted } from "vue"
+import { maEvent } from "../js/formItemMixin.js"
+const props = defineProps({
+    component: Object
+})
+
+maEvent.handleCommonEvent(props.component, "onCreated")
+onMounted(() => {
+    maEvent.handleCommonEvent(props.component, "onMounted")
+})
+</script>
--- a/chengduTestPlant/src/components/ma-form/formItem/form-mention.vue
+++ b/chengduTestPlant/src/components/ma-form/formItem/form-mention.vue
@@ -0,0 +1,71 @@
+<!--
+ - MineAdmin is committed to providing solutions for quickly building web applications
+ - Please view the LICENSE file that was distributed with this source code,
+ - For the full copyright and license information.
+ - Thank you very much for using MineAdmin.
+ -
+ - @Author X.Mo<root@imoi.cn>
+ - @Link   https://gitee.com/xmo/mineadmin-vue
+-->
+<template>
+    <ma-form-item
+        v-if="typeof props.component.display == 'undefined' || props.component.display === true"
+        :component="props.component"
+        :custom-field="props.customField"
+    >
+        <slot :name="`form-${props.component.dataIndex}`" v-bind="props.component">
+            <a-mention
+                v-model="value"
+                :size="props.component.size"
+                :allow-clear="props.component.allowClear ?? true"
+                :disabled="props.component.disabled"
+                :readonly="props.component.readonly"
+                :data="props.component.data ?? []"
+                :prefix="props.component.prefix"
+                :split="props.component.split"
+                :error="props.component.error"
+                :placeholder="props.component.placeholder ?? `请输入${props.component.title}`"
+                :type="props.component.type"
+                @input="maEvent.handleInputEvent(props.component, $event)"
+                @clear="maEvent.handleCommonEvent(props.component, 'onClear')"
+                @focus="maEvent.handleCommonEvent(props.component, 'onFocus')"
+                @blur="maEvent.handleCommonEvent(props.component, 'onBlur')"
+                @search="maEvent.customeEvent(props.component, $event, 'onSearch')"
+                @select="maEvent.customeEvent(props.component, $event, 'onSelect')"
+            >
+            </a-mention>
+        </slot>
+    </ma-form-item>
+</template>
+
+<script setup>
+import { ref, inject, onMounted, watch } from "vue"
+import { get, set } from "lodash"
+import MaFormItem from "./form-item.vue"
+import { maEvent } from "../js/formItemMixin.js"
+const props = defineProps({
+    component: Object,
+    customField: { type: String, default: undefined }
+})
+
+const formModel = inject("formModel")
+const index = props.customField ?? props.component.dataIndex
+const value = ref(get(formModel.value, index))
+
+watch(
+    () => get(formModel.value, index),
+    (vl) => (value.value = vl)
+)
+watch(
+    () => value.value,
+    (v) => {
+        set(formModel.value, index, v)
+        index.indexOf(".") > -1 && delete formModel.value[index]
+    }
+)
+
+maEvent.handleCommonEvent(props.component, "onCreated")
+onMounted(() => {
+    maEvent.handleCommonEvent(props.component, "onMounted")
+})
+</script>
--- a/chengduTestPlant/src/components/ma-form/formItem/form-picker.vue
+++ b/chengduTestPlant/src/components/ma-form/formItem/form-picker.vue
@@ -0,0 +1,116 @@
+<!--
+ - MineAdmin is committed to providing solutions for quickly building web applications
+ - Please view the LICENSE file that was distributed with this source code,
+ - For the full copyright and license information.
+ - Thank you very much for using MineAdmin.
+ -
+ - @Author X.Mo<root@imoi.cn>
+ - @Link   https://gitee.com/xmo/mineadmin-vue
+-->
+<template>
+    <ma-form-item
+        v-if="typeof props.component.display == 'undefined' || props.component.display === true"
+        :component="props.component"
+        :custom-field="props.customField"
+    >
+        <slot :name="`form-${props.component.dataIndex}`" v-bind="props.component">
+            <component
+                :is="getComponentName()"
+                v-model="value"
+                :placeholder="
+                    props.component.formType === 'range'
+                        ? ['请选择开始时间', '请选择结束时间']
+                        : `请选择${props.component.title}`
+                "
+                :hide-trigger="props.component.hideTrigger"
+                :allow-clear="props.component.allowClear ?? true"
+                :format="props.component.format"
+                :size="props.component.size"
+                :shortcuts="props.component.shortcuts"
+                :shortcuts-position="props.component.shortcutsPosition"
+                :position="props.component.position"
+                :popup-visible="props.component.popupVisible"
+                :default-popup-visible="props.component.defaultPopupVisible"
+                :trigger-props="props.component.triggerProps"
+                :unmount-on-close="props.component.unmountOnClose"
+                :disabled="props.component.disabled"
+                :disabled-input="props.component.disabledInput"
+                :disabled-date="props.component.disabledDate"
+                :disabled-time="props.component.disabledTime"
+                :value-format="props.component.valueFormat"
+                :readonly="props.component.readonly"
+                :error="props.component.error"
+                :show-time="props.component.showTime"
+                :preview-shortcut="props.component.previewShortcut"
+                :show-confirm-btn="props.component.showConfirmBtn"
+                :time-picker-props="
+                    props.component.formType == 'range' ? { defaultValue: ['00:00:00', '23:59:59'] } : {}
+                "
+                :separator="props.component.separator"
+                :mode="props.component.mode"
+                style="width: 100%"
+                @change="handlePickerChangeEvent"
+                @select="handlePickerSelectEvent"
+                @ok="handlePickerOkEvent"
+                @clear="maEvent.handleCommonEvent(props.component, 'onClear')"
+                @popup-visible-change="maEvent.customeEvent(props.component, $event, 'onvVisibleChange')"
+                @select-shortcut="maEvent.customeEvent(props.component, $event, 'onSelectShortcut')"
+                @picker-value-change="handlePickerValueChangeEvent"
+            />
+        </slot>
+    </ma-form-item>
+</template>
+
+<script setup>
+import { ref, inject, onMounted, watch } from "vue"
+import { get, set } from "lodash"
+import MaFormItem from "./form-item.vue"
+import { maEvent } from "../js/formItemMixin.js"
+const props = defineProps({
+    component: Object,
+    customField: { type: String, default: undefined }
+})
+
+const formModel = inject("formModel")
+const index = props.customField ?? props.component.dataIndex
+const value = ref(get(formModel.value, index))
+
+watch(
+    () => get(formModel.value, index),
+    (vl) => (value.value = vl)
+)
+watch(
+    () => value.value,
+    (v) => {
+        set(formModel.value, index, v)
+        index.indexOf(".") > -1 && delete formModel.value[index]
+    }
+)
+
+const getComponentName = () => {
+    if (["date", "month", "year", "week", "quarter", "range", "time"].includes(props.component.formType)) {
+        return `a-${props.component.formType}-picker`
+    }
+}
+
+const handlePickerChangeEvent = (value, date, dateString) => {
+    maEvent.handleChangeEvent(props.component, { value, date, dateString })
+}
+
+const handlePickerSelectEvent = (value, date, dateString) => {
+    maEvent.customeEvent(props.component, { value, date, dateString }, "onSelect")
+}
+
+const handlePickerValueChangeEvent = (value, date, dateString) => {
+    maEvent.customeEvent(props.component, { value, date, dateString }, "onPickerValueChange")
+}
+
+const handlePickerOkEvent = (value, date, dateString) => {
+    maEvent.customeEvent(props.component, { value, date, dateString }, "onOk")
+}
+
+maEvent.handleCommonEvent(props.component, "onCreated")
+onMounted(() => {
+    maEvent.handleCommonEvent(props.component, "onMounted")
+})
+</script>
--- a/chengduTestPlant/src/components/ma-form/formItem/form-radio.vue
+++ b/chengduTestPlant/src/components/ma-form/formItem/form-radio.vue
@@ -0,0 +1,97 @@
+<!--
+ - MineAdmin is committed to providing solutions for quickly building web applications
+ - Please view the LICENSE file that was distributed with this source code,
+ - For the full copyright and license information.
+ - Thank you very much for using MineAdmin.
+ -
+ - @Author X.Mo<root@imoi.cn>
+ - @Link   https://gitee.com/xmo/mineadmin-vue
+-->
+<template>
+    <ma-form-item
+        v-if="typeof props.component.display == 'undefined' || props.component.display === true"
+        :component="props.component"
+        :custom-field="props.customField"
+    >
+        <slot :name="`form-${props.component.dataIndex}`" v-bind="props.component">
+            <a-radio-group
+                v-model="value"
+                :size="props.component.size"
+                :direction="props.component.direction"
+                :type="props.component.type"
+                :disabled="props.component.disabled"
+                @change="handleCascaderChangeEvent($event)"
+            >
+                <template v-for="(item, index) in dictList[dictIndex] ?? []">
+                    <a-radio :value="item.value" :disabled="item.disabled">{{ item.label }}</a-radio>
+                </template>
+            </a-radio-group>
+        </slot>
+    </ma-form-item>
+</template>
+
+<script setup>
+import { ref, inject, onMounted, nextTick, watch } from "vue"
+import MaFormItem from "./form-item.vue"
+import { get, set, isUndefined } from "lodash"
+import { maEvent } from "../js/formItemMixin.js"
+import { handlerCascader } from "../js/networkRequest.js"
+
+const props = defineProps({
+    component: Object,
+    customField: { type: String, default: undefined }
+})
+
+const formModel = inject("formModel")
+const dictList = inject("dictList")
+const formLoading = inject("formLoading")
+const columns = inject("columns")
+
+const index = props.customField ?? props.component.dataIndex
+const dictIndex = index.match(/^(\w+\.)\d+\./)
+    ? index.match(/^(\w+\.)\d+\./)[1] + props.component.dataIndex
+    : props.component.dataIndex
+const value = ref(get(formModel.value, index, ""))
+
+watch(
+    () => get(formModel.value, index),
+    (vl) => (value.value = vl)
+)
+watch(
+    () => value.value,
+    (v) => {
+        set(formModel.value, index, v)
+        index.indexOf(".") > -1 && delete formModel.value[index]
+    }
+)
+
+if (value.value === "") {
+    value.value = undefined
+} else if (
+    !isUndefined(value.value) &&
+    props.component.dict &&
+    (props.component.dict.name || props.component.dict.data)
+) {
+    value.value = value.value + ""
+}
+
+const handleCascaderChangeEvent = async (value) => {
+    formLoading.value = true
+    const component = props.component
+    // 执行自定义事件
+    if (component.onChange) {
+        maEvent.handleChangeEvent(component, value)
+    }
+
+    // 处理联动
+    if (!index.match(/^(\w+)\.\d+\./)) {
+        await handlerCascader(value, component, columns.value, dictList.value, formModel.value)
+    }
+    nextTick(() => (formLoading.value = false))
+}
+
+maEvent.handleCommonEvent(props.component, "onCreated")
+onMounted(() => {
+    maEvent.handleCommonEvent(props.component, "onMounted")
+})
+</script>
--- a/chengduTestPlant/src/components/ma-form/formItem/form-rate.vue
+++ b/chengduTestPlant/src/components/ma-form/formItem/form-rate.vue
@@ -0,0 +1,65 @@
+<!--
+ - MineAdmin is committed to providing solutions for quickly building web applications
+ - Please view the LICENSE file that was distributed with this source code,
+ - For the full copyright and license information.
+ - Thank you very much for using MineAdmin.
+ -
+ - @Author X.Mo<root@imoi.cn>
+ - @Link   https://gitee.com/xmo/mineadmin-vue
+-->
+<template>
+    <ma-form-item
+        v-if="typeof props.component.display == 'undefined' || props.component.display === true"
+        :component="props.component"
+        :custom-field="props.customField"
+    >
+        <slot :name="`form-${props.component.dataIndex}`" v-bind="props.component">
+            <a-rate
+                v-model="value"
+                :size="props.component.size"
+                :allow-clear="props.component.allowClear"
+                :disabled="props.component.disabled"
+                :readonly="props.component.readonly"
+                :count="props.component.count"
+                :allow-half="props.component.allowHalf"
+                :grading="props.component.grading"
+                :color="props.component.color"
+                @change="maEvent.handleInputEvent(props.component, $event)"
+                @hover-change="maEvent.customeEvent(props.component, $event, 'onHoverChange')"
+            >
+            </a-rate>
+        </slot>
+    </ma-form-item>
+</template>
+
+<script setup>
+import { ref, inject, onMounted, watch } from "vue"
+import { get, set } from "lodash"
+import MaFormItem from "./form-item.vue"
+import { maEvent } from "../js/formItemMixin.js"
+const props = defineProps({
+    component: Object,
+    customField: { type: String, default: undefined }
+})
+
+const formModel = inject("formModel")
+const index = props.customField ?? props.component.dataIndex
+const value = ref(get(formModel.value, index))
+
+watch(
+    () => get(formModel.value, index),
+    (vl) => (value.value = vl)
+)
+watch(
+    () => value.value,
+    (v) => {
+        set(formModel.value, index, v)
+        index.indexOf(".") > -1 && delete formModel.value[index]
+    }
+)
+
+maEvent.handleCommonEvent(props.component, "onCreated")
+onMounted(() => {
+    maEvent.handleCommonEvent(props.component, "onMounted")
+})
+</script>
--- a/chengduTestPlant/src/components/ma-form/formItem/form-resource.vue
+++ b/chengduTestPlant/src/components/ma-form/formItem/form-resource.vue
@@ -0,0 +1,71 @@
+<!--
+ - MineAdmin is committed to providing solutions for quickly building web applications
+ - Please view the LICENSE file that was distributed with this source code,
+ - For the full copyright and license information.
+ - Thank you very much for using MineAdmin.
+ -
+ - @Author X.Mo<root@imoi.cn>
+ - @Link   https://gitee.com/xmo/mineadmin-vue
+-->
+<template>
+    <ma-form-item
+        v-if="typeof props.component.display == 'undefined' || props.component.display === true"
+        :component="props.component"
+        :custom-field="props.customField"
+    >
+        <slot :name="`form-${props.component.dataIndex}`" v-bind="props.component">
+            <ma-resource
+                v-if="(props.component.type ?? 'preview') == 'preview'"
+                v-model="value"
+                :multiple="props.component.multiple"
+                :onlyData="props.component.onlyData"
+                :returnType="props.component.returnType"
+            />
+            <ma-resource-button
+                v-else
+                v-model="value"
+                :multiple="props.component.multiple"
+                :onlyData="props.component.onlyData"
+                :returnType="props.component.returnType"
+            />
+        </slot>
+    </ma-form-item>
+</template>
+
+<script setup>
+import { ref, inject, onMounted, watch } from "vue"
+import { get, set } from "lodash"
+import MaResource from "@/components/ma-resource/index.vue"
+import MaResourceButton from "@/components/ma-resource/button.vue"
+import MaFormItem from "./form-item.vue"
+import { maEvent } from "../js/formItemMixin.js"
+const props = defineProps({
+    component: Object,
+    customField: { type: String, default: undefined }
+})
+
+const formModel = inject("formModel")
+const index = props.customField ?? props.component.dataIndex
+const value = ref(get(formModel.value, index))
+
+watch(
+    () => get(formModel.value, index),
+    (vl) => (value.value = vl)
+)
+watch(
+    () => value.value,
+    (v) => {
+        set(formModel.value, index, v)
+        index.indexOf(".") > -1 && delete formModel.value[index]
+    }
+)
+
+if (props.component.multiple && !value.value) {
+    value.value = []
+}
+
+maEvent.handleCommonEvent(props.component, "onCreated")
+onMounted(() => {
+    maEvent.handleCommonEvent(props.component, "onMounted")
+})
+</script>
--- a/chengduTestPlant/src/components/ma-form/formItem/form-select.vue
+++ b/chengduTestPlant/src/components/ma-form/formItem/form-select.vue
@@ -0,0 +1,168 @@
+<!--
+ - MineAdmin is committed to providing solutions for quickly building web applications
+ - Please view the LICENSE file that was distributed with this source code,
+ - For the full copyright and license information.
+ - Thank you very much for using MineAdmin.
+ -
+ - @Author X.Mo<root@imoi.cn>
+ - @Link   https://gitee.com/xmo/mineadmin-vue
+-->
+<template>
+    <ma-form-item
+        v-if="typeof props.component.display == 'undefined' || props.component.display === true"
+        :component="props.component"
+        :custom-field="props.customField"
+    >
+        <slot :name="`form-${props.component.dataIndex}`" v-bind="props.component">
+            <a-select
+                v-model:model-value="value"
+                :multiple="props.component.multiple"
+                :size="props.component.size"
+                :allow-clear="props.component.allowClear ?? true"
+                :disabled="props.component.disabled"
+                :readonly="props.component.readonly"
+                :error="props.component.error"
+                :placeholder="props.component.placeholder ?? `请选择${props.component.title}`"
+                :loading="props.component.loading"
+                :allow-search="props.component.allowSearch ?? true"
+                :allow-create="props.component.allowCreate"
+                :max-tag-count="props.component.maxTagCount"
+                :bordered="props.component.bordered"
+                :unmount-on-close="props.component.unmountOnClose"
+                :popup-container="props.component.popupContainer"
+                :filter-option="props.component.filterOption"
+                :virtual-list-props="props.component.virtualListProps"
+                :trigger-props="props.component.triggerProps"
+                :format-label="props.component.formatLabel"
+                :fallback-option="props.component.fallbackOption"
+                :show-extra-options="props.component.showExtraOptions"
+                :value-key="props.component.valueKey"
+                :search-delay="props.component.searchDelay"
+                :limit="props.component.limit"
+                :field-names="props.component.fieldNames"
+                :scrollbar="props.component.scrollbar"
+                @input-value-change="maEvent.handleInputEvent(props.component, $event)"
+                @change="handleCascaderChangeEvent($event)"
+                @remove="maEvent.customeEvent(props.component, $event, 'onRemove')"
+                @popup-visible-change="maEvent.customeEvent(props.component, $event, 'onPopupVisibleChange')"
+                @dropdown-scroll="maEvent.handleCommonEvent(props.component, 'onDropdownScroll')"
+                @dropdown-reach-bottom="maEvent.handleCommonEvent(props.component, 'onDropdownReachBottom')"
+                @exceed-limit="maEvent.customeEvent(props.component, $event, 'onExceedLimit')"
+                @clear="maEvent.handleCommonEvent(props.component, 'onClear')"
+                @focus="maEvent.handleCommonEvent(props.component, 'onFocus')"
+                @blur="maEvent.handleCommonEvent(props.component, 'onBlur')"
+                @search="maEvent.customeEvent(props.component, $event, 'onSearch')"
+            >
+                <template v-for="(item, index) in dictList[dictIndex] ?? []">
+                    <a-option :value="item.value" :disabled="item.disabled">{{ item.label }}</a-option>
+                </template>
+                <template #header v-if="props.component.multiple">
+                    <div style="padding: 6px 12px">
+                        <a-space>
+                            <a-checkbox :value="false" @change="handleSelectAll">全选/清除</a-checkbox>
+                            <a-button size="mini" type="outline" @click="handleInverse">反选</a-button>
+                        </a-space>
+                    </div>
+                </template>
+                <template #footer v-if="props.component?.dict.pageOption ?? false">
+                    <div class="flex justify-center">
+                        <a-pagination class="p-2" size="mini" :total="200" simple>
+                            <template #page-item-step="{ type }">
+                                <div>{{ type === "previous" ? "上一页" : "下一页" }}</div>
+                            </template>
+                        </a-pagination>
+                    </div>
+                </template>
+            </a-select>
+        </slot>
+    </ma-form-item>
+</template>
+
+<script setup>
+import { ref, inject, onMounted, nextTick, watch } from "vue"
+import MaFormItem from "./form-item.vue"
+import { get, isUndefined, set, xor } from "lodash"
+import { maEvent } from "../js/formItemMixin.js"
+import { handlerCascader } from "../js/networkRequest.js"
+
+const props = defineProps({
+    component: Object,
+    customField: { type: String, default: undefined }
+})
+
+const formModel = inject("formModel")
+const dictList = inject("dictList")
+const formLoading = inject("formLoading")
+const columns = inject("columns")
+
+const index = props.customField ?? props.component.dataIndex
+const dictIndex = index.match(/^(\w+\.)\d+\./)
+    ? index.match(/^(\w+\.)\d+\./)[1] + props.component.dataIndex
+    : props.component.dataIndex
+const value = ref(get(formModel.value, index, ""))
+
+watch(
+    () => get(formModel.value, index),
+    (vl) => (value.value = vl)
+)
+watch(
+    () => value.value,
+    (v) => {
+        set(formModel.value, index, v)
+        index.indexOf(".") > -1 && delete formModel.value[index]
+    }
+)
+
+if (value.value === "") {
+    value.value = undefined
+} else if (
+    !isUndefined(value.value) &&
+    props.component.dict &&
+    (props.component.dict.name || props.component.dict.data) &&
+    !props.component.multiple
+) {
+    value.value = value.value + ""
+}
+
+const handleSelectAll = (status) => {
+    if (isUndefined(value.value)) {
+        value.value = []
+    }
+    if (status) {
+        dictList.value[dictIndex].map((item) => {
+            value.value.push(item.value)
+        })
+    } else {
+        value.value = []
+    }
+}
+
+const handleInverse = () => {
+    if (isUndefined(value.value)) {
+        value.value = []
+    }
+    const ids = []
+    dictList.value[dictIndex].map((item) => ids.push(item.value))
+    value.value = xor(ids, value.value)
+}
+
+const handleCascaderChangeEvent = async (value) => {
+    formLoading.value = true
+    const component = props.component
+    // 执行自定义事件
+    if (component.onChange) {
+        maEvent.handleChangeEvent(component, value)
+    }
+
+    // 处理联动
+    if (!index.match(/^(\w+)\.\d+\./)) {
+        await handlerCascader(value, component, columns.value, dictList.value, formModel.value)
+    }
+    nextTick(() => (formLoading.value = false))
+}
+
+maEvent.handleCommonEvent(props.component, "onCreated")
+onMounted(() => {
+    maEvent.handleCommonEvent(props.component, "onMounted")
+})
+</script>
--- a/chengduTestPlant/src/components/ma-form/formItem/form-slider.vue
+++ b/chengduTestPlant/src/components/ma-form/formItem/form-slider.vue
@@ -0,0 +1,68 @@
+<!--
+ - MineAdmin is committed to providing solutions for quickly building web applications
+ - Please view the LICENSE file that was distributed with this source code,
+ - For the full copyright and license information.
+ - Thank you very much for using MineAdmin.
+ -
+ - @Author X.Mo<root@imoi.cn>
+ - @Link   https://gitee.com/xmo/mineadmin-vue
+-->
+<template>
+    <ma-form-item
+        v-if="typeof props.component.display == 'undefined' || props.component.display === true"
+        :component="props.component"
+        :custom-field="props.customField"
+    >
+        <slot :name="`form-${props.component.dataIndex}`" v-bind="props.component">
+            <a-slider
+                v-model="value"
+                :size="props.component.size"
+                :allow-clear="props.component.allowClear"
+                :disabled="props.component.disabled"
+                :step="props.component.step"
+                :show-tooltip="props.component.showTooltip"
+                :range="props.component.range"
+                :direction="props.component.direction"
+                :max="props.component.max"
+                :min="props.component.min"
+                :marks="props.component.marks"
+                :show-input="props.component.showInput"
+                :show-ticks="props.component.showTicks"
+                @change="maEvent.handleChangeEvent(props.component, $event)"
+            >
+            </a-slider>
+        </slot>
+    </ma-form-item>
+</template>
+
+<script setup>
+import { ref, inject, onMounted, watch } from "vue"
+import { get, set } from "lodash"
+import MaFormItem from "./form-item.vue"
+import { maEvent } from "../js/formItemMixin.js"
+const props = defineProps({
+    component: Object,
+    customField: { type: String, default: undefined }
+})
+
+const formModel = inject("formModel")
+const index = props.customField ?? props.component.dataIndex
+const value = ref(get(formModel.value, index))
+
+watch(
+    () => get(formModel.value, index),
+    (vl) => (value.value = vl)
+)
+watch(
+    () => value.value,
+    (v) => {
+        set(formModel.value, index, v)
+        index.indexOf(".") > -1 && delete formModel.value[index]
+    }
+)
+
+maEvent.handleCommonEvent(props.component, "onCreated")
+onMounted(() => {
+    maEvent.handleCommonEvent(props.component, "onMounted")
+})
+</script>
--- a/chengduTestPlant/src/components/ma-form/formItem/form-static-text.vue
+++ b/chengduTestPlant/src/components/ma-form/formItem/form-static-text.vue
@@ -0,0 +1,33 @@
+<!--
+ - MineAdmin is committed to providing solutions for quickly building web applications
+ - Please view the LICENSE file that was distributed with this source code,
+ - For the full copyright and license information.
+ - Thank you very much for using MineAdmin.
+ -
+ - @Author X.Mo<root@imoi.cn>
+ - @Link   https://gitee.com/xmo/mineadmin-vue
+-->
+<template>
+    <slot :name="`form-${props.component.dataIndex}`" v-bind="props.component">
+        <div
+            v-if="typeof props.component.display == 'undefined' || props.component.display === true"
+            :class="['static-text', props.component.customClass]"
+            :style="props.component.style"
+        >
+            {{ props.component.title ?? "" }}
+        </div>
+    </slot>
+</template>
+
+<script setup>
+import { onMounted } from "vue"
+import { maEvent } from "../js/formItemMixin.js"
+const props = defineProps({
+    component: Object
+})
+
+maEvent.handleCommonEvent(props.component, "onCreated")
+onMounted(() => {
+    maEvent.handleCommonEvent(props.component, "onMounted")
+})
+</script>
--- a/chengduTestPlant/src/components/ma-form/formItem/form-switch.vue
+++ b/chengduTestPlant/src/components/ma-form/formItem/form-switch.vue
@@ -0,0 +1,79 @@
+<!--
+ - MineAdmin is committed to providing solutions for quickly building web applications
+ - Please view the LICENSE file that was distributed with this source code,
+ - For the full copyright and license information.
+ - Thank you very much for using MineAdmin.
+ -
+ - @Author X.Mo<root@imoi.cn>
+ - @Link   https://gitee.com/xmo/mineadmin-vue
+-->
+<template>
+    <ma-form-item
+        v-if="typeof props.component.display == 'undefined' || props.component.display === true"
+        :component="props.component"
+        :custom-field="props.customField"
+    >
+        <slot :name="`form-${props.component.dataIndex}`" v-bind="props.component">
+            <a-switch
+                v-model="value"
+                :size="props.component.size"
+                :disabled="props.component.disabled"
+                :loading="props.component.loading"
+                :type="props.component.type"
+                :checked-value="props.component.checkedValue"
+                :unchecked-value="props.component.uncheckedValue"
+                :checked-color="props.component.checkedColor"
+                :unchecked-color="props.component.uncheckedColor"
+                :before-change="props.component.beforeChange"
+                @change="maEvent.handleChangeEvent(props.component, $event)"
+                @focus="maEvent.handleCommonEvent(props.component, 'onFocus')"
+                @blur="maEvent.handleCommonEvent(props.component, 'onBlur')"
+            >
+                <template #checked>
+                    <slot :name="`switchChecked-${props.component.dataIndex}`" />
+                </template>
+                <template #unchecked>
+                    <slot :name="`switchUnchecked-${props.component.dataIndex}`" />
+                </template>
+                <template #checked-icon>
+                    <slot :name="`switchChecked-${props.component.dataIndex}`" />
+                </template>
+                <template #unchecked-icon>
+                    <slot :name="`switchUncheckedIcon-${props.component.dataIndex}`" />
+                </template>
+            </a-switch>
+        </slot>
+    </ma-form-item>
+</template>
+
+<script setup>
+import { ref, inject, onMounted, watch } from "vue"
+import { get, set } from "lodash"
+import MaFormItem from "./form-item.vue"
+import { maEvent } from "../js/formItemMixin.js"
+const props = defineProps({
+    component: Object,
+    customField: { type: String, default: undefined }
+})
+
+const formModel = inject("formModel")
+const index = props.customField ?? props.component.dataIndex
+const value = ref(get(formModel.value, index))
+
+watch(
+    () => get(formModel.value, index),
+    (vl) => (value.value = vl)
+)
+watch(
+    () => value.value,
+    (v) => {
+        set(formModel.value, index, v)
+        index.indexOf(".") > -1 && delete formModel.value[index]
+    }
+)
+
+maEvent.handleCommonEvent(props.component, "onCreated")
+onMounted(() => {
+    maEvent.handleCommonEvent(props.component, "onMounted")
+})
+</script>
--- a/chengduTestPlant/src/components/ma-form/formItem/form-textarea.vue
+++ b/chengduTestPlant/src/components/ma-form/formItem/form-textarea.vue
@@ -0,0 +1,71 @@
+<!--
+ - MineAdmin is committed to providing solutions for quickly building web applications
+ - Please view the LICENSE file that was distributed with this source code,
+ - For the full copyright and license information.
+ - Thank you very much for using MineAdmin.
+ -
+ - @Author X.Mo<root@imoi.cn>
+ - @Link   https://gitee.com/xmo/mineadmin-vue
+-->
+<template>
+    <ma-form-item
+        v-if="typeof props.component.display == 'undefined' || props.component.display === true"
+        :component="props.component"
+        :custom-field="props.customField"
+    >
+        <slot :name="`form-${props.component.dataIndex}`" v-bind="props.component">
+            <a-textarea
+                v-model="value"
+                :size="props.component.size"
+                :allow-clear="props.component.allowClear ?? true"
+                :disabled="props.component.disabled"
+                :readonly="props.component.readonly"
+                :auto-size="props.component.autoSize"
+                :error="props.component.error"
+                :placeholder="props.component.placeholder ?? `请输入${props.component.title}`"
+                :max-length="props.component.maxLength"
+                :show-word-limit="props.component.showWordLimit"
+                :word-length="props.component.wordLength"
+                :word-slice="props.component.wordSlice"
+                @input="maEvent.handleInputEvent(props.component, $event)"
+                @change="maEvent.handleChangeEvent(props.component, $event)"
+                @clear="maEvent.handleCommonEvent(props.component, 'onClear')"
+                @focus="maEvent.handleCommonEvent(props.component, 'onFocus')"
+                @blur="maEvent.handleCommonEvent(props.component, 'onBlur')"
+            >
+            </a-textarea>
+        </slot>
+    </ma-form-item>
+</template>
+
+<script setup>
+import { ref, inject, onMounted, watch } from "vue"
+import { get, set } from "lodash"
+import MaFormItem from "./form-item.vue"
+import { maEvent } from "../js/formItemMixin.js"
+const props = defineProps({
+    component: Object,
+    customField: { type: String, default: undefined }
+})
+
+const formModel = inject("formModel")
+const index = props.customField ?? props.component.dataIndex
+const value = ref(get(formModel.value, index))
+
+watch(
+    () => get(formModel.value, index),
+    (vl) => (value.value = vl)
+)
+watch(
+    () => value.value,
+    (v) => {
+        set(formModel.value, index, v)
+        index.indexOf(".") > -1 && delete formModel.value[index]
+    }
+)
+
+maEvent.handleCommonEvent(props.component, "onCreated")
+onMounted(() => {
+    maEvent.handleCommonEvent(props.component, "onMounted")
+})
+</script>
--- a/chengduTestPlant/src/components/ma-form/formItem/form-transfer.vue
+++ b/chengduTestPlant/src/components/ma-form/formItem/form-transfer.vue
@@ -0,0 +1,73 @@
+<!--
+ - MineAdmin is committed to providing solutions for quickly building web applications
+ - Please view the LICENSE file that was distributed with this source code,
+ - For the full copyright and license information.
+ - Thank you very much for using MineAdmin.
+ -
+ - @Author X.Mo<root@imoi.cn>
+ - @Link   https://gitee.com/xmo/mineadmin-vue
+-->
+<template>
+    <ma-form-item
+        v-if="typeof props.component.display == 'undefined' || props.component.display === true"
+        :component="props.component"
+        :custom-field="props.customField"
+    >
+        <slot :name="`form-${props.component.dataIndex}`" v-bind="props.component">
+            <a-transfer
+                v-model="value"
+                :show-search="props.component.showSearch"
+                :show-select-all="props.component.showSelectAll"
+                :title="typeof props.component.title == 'array' ? props.component.title : ['源数据', '目标数据']"
+                :disabled="props.component.disabled"
+                :simple="props.component.simple"
+                :data="props.component.data ?? dictList[dictIndex] ?? []"
+                :fallback="props.component.fallback"
+                @change="maEvent.handleChangeEvent(props.component, $event)"
+                @select="maEvent.customeEvent(props.component, $event, 'onSelect')"
+            >
+            </a-transfer>
+        </slot>
+    </ma-form-item>
+</template>
+
+<script setup>
+import { ref, inject, onMounted, watch } from "vue"
+import { get, set } from "lodash"
+import MaFormItem from "./form-item.vue"
+import { maEvent } from "../js/formItemMixin.js"
+
+const props = defineProps({
+    component: Object,
+    customField: { type: String, default: undefined }
+})
+
+const formModel = inject("formModel")
+const dictList = inject("dictList")
+const index = props.customField ?? props.component.dataIndex
+const dictIndex = index.match(/^(\w+\.)\d+\./)
+    ? index.match(/^(\w+\.)\d+\./)[1] + props.component.dataIndex
+    : props.component.dataIndex
+const value = ref(get(formModel.value, index))
+
+watch(
+    () => get(formModel.value, index),
+    (vl) => (value.value = vl)
+)
+watch(
+    () => value.value,
+    (v) => {
+        set(formModel.value, index, v)
+        index.indexOf(".") > -1 && delete formModel.value[index]
+    }
+)
+
+if (props.component.dict && (props.component.dict.name || props.component.dict.data)) {
+    value.value = value.value + ""
+}
+
+maEvent.handleCommonEvent(props.component, "onCreated")
+onMounted(() => {
+    maEvent.handleCommonEvent(props.component, "onMounted")
+})
+</script>
--- a/chengduTestPlant/src/components/ma-form/formItem/form-tree-select.vue
+++ b/chengduTestPlant/src/components/ma-form/formItem/form-tree-select.vue
@@ -0,0 +1,101 @@
+<!--
+ - MineAdmin is committed to providing solutions for quickly building web applications
+ - Please view the LICENSE file that was distributed with this source code,
+ - For the full copyright and license information.
+ - Thank you very much for using MineAdmin.
+ -
+ - @Author X.Mo<root@imoi.cn>
+ - @Link   https://gitee.com/xmo/mineadmin-vue
+-->
+<template>
+    <ma-form-item
+        v-if="typeof props.component.display == 'undefined' || props.component.display === true"
+        :component="props.component"
+        :custom-field="props.customField"
+    >
+        <slot :name="`form-${props.component.dataIndex}`" v-bind="props.component">
+            <a-tree-select
+                v-model="value"
+                :data="props.component.data ?? dictList[dictIndex] ?? []"
+                :disabled="props.component.disabled"
+                :readonly="props.component.readonly"
+                :loading="props.component.loading"
+                :error="props.component.error"
+                :size="props.component.size"
+                :border="props.component.border"
+                :allow-search="props.component.allowSearch ?? true"
+                :allow-clear="props.component.allowClear ?? true"
+                :placeholder="props.component.placeholder ?? `请选择${props.component.title}`"
+                :max-tag-count="props.component.maxTagCount"
+                :multiple="props.component.multiple"
+                :field-names="
+                    props.component.fieldNames ?? props.component?.dict?.props ?? { key: 'value', title: 'label' }
+                "
+                :label-in-value="props.component.labelInValue"
+                :tree-checkable="props.component.treeCheckable"
+                :tree-check-strictly="props.component.treeCheckStrictly"
+                :tree-checked-strategy="props.component.treeCheckedStrategy"
+                :tree-props="props.component.treeProps"
+                :trigger-props="props.component.triggerProps"
+                :popup-visible="props.component.popupVisible"
+                :default-popup-visible="props.component.defaultPopupVisible"
+                :dropdown-style="props.component.dropdownStyle"
+                :dropdown-class-name="props.component.dropdownClassName"
+                :filter-tree-node="props.component.filterTreeNode"
+                :load-more="props.component.loadMore"
+                :disable-filter="props.component.disableFilter"
+                :popup-container="props.component.popupContainer"
+                :fallback-option="props.component.fallbackOption"
+                :selectable="props.component.selectable"
+                :scrollbar="props.component.scrollbar"
+                @change="maEvent.handleChangeEvent(props.component, $event)"
+                @popup-visible-change="maEvent.customeEvent(props.component, $event, 'onPopupVisibleChange')"
+                @clear="maEvent.handleCommonEvent(props.component, 'onClear')"
+                @search="maEvent.customeEvent(props.component, $event, 'onSearch')"
+            >
+            </a-tree-select>
+        </slot>
+    </ma-form-item>
+</template>
+
+<script setup>
+import { ref, inject, onMounted, watch } from "vue"
+import { get, set } from "lodash"
+import MaFormItem from "./form-item.vue"
+import { maEvent } from "../js/formItemMixin.js"
+import { handlerCascader } from "../js/networkRequest.js"
+
+const props = defineProps({
+    component: Object,
+    customField: { type: String, default: undefined }
+})
+
+const formModel = inject("formModel")
+const dictList = inject("dictList")
+const index = props.customField ?? props.component.dataIndex
+const dictIndex = index.match(/^(\w+\.)\d+\./)
+    ? index.match(/^(\w+\.)\d+\./)[1] + props.component.dataIndex
+    : props.component.dataIndex
+const value = ref(get(formModel.value, index))
+
+watch(
+    () => get(formModel.value, index),
+    (vl) => (value.value = vl)
+)
+watch(
+    () => value.value,
+    (v) => {
+        set(formModel.value, index, v)
+        index.indexOf(".") > -1 && delete formModel.value[index]
+    }
+)
+
+if (props.component.dict && (props.component.dict.name || props.component.dict.data) && !props.component.multiple) {
+    value.value = value.value + ""
+}
+
+maEvent.handleCommonEvent(props.component, "onCreated")
+onMounted(() => {
+    maEvent.handleCommonEvent(props.component, "onMounted")
+})
+</script>
--- a/chengduTestPlant/src/components/ma-form/formItem/form-upload.vue
+++ b/chengduTestPlant/src/components/ma-form/formItem/form-upload.vue
@@ -0,0 +1,73 @@
+<!--
+ - MineAdmin is committed to providing solutions for quickly building web applications
+ - Please view the LICENSE file that was distributed with this source code,
+ - For the full copyright and license information.
+ - Thank you very much for using MineAdmin.
+ -
+ - @Author X.Mo<root@imoi.cn>
+ - @Link   https://gitee.com/xmo/mineadmin-vue
+-->
+<template>
+    <ma-form-item
+        v-if="typeof props.component.display == 'undefined' || props.component.display === true"
+        :component="props.component"
+        :custom-field="props.customField"
+    >
+        <slot :name="`form-${props.component.dataIndex}`" v-bind="props.component">
+            <ma-upload
+                v-model="value"
+                :title="props.component.title"
+                :disabled="props.component.disabled"
+                :icon="props.component.icon"
+                :rounded="props.component.rounded"
+                :multiple="props.component.multiple"
+                :draggable="props.component.draggable"
+                :size="props.component.size"
+                :chunk="props.component.chunk"
+                :chunkSize="props.component.chunkSize"
+                :limit="props.component.limit"
+                :tip="props.component.tip"
+                :type="props.component.type"
+                :accept="props.component.accept"
+                :returnType="props.component.returnType"
+                :fileType="props.component.fileType"
+                :showList="props.component.showList"
+                :requestData="props.component.requestData"
+            >
+            </ma-upload>
+        </slot>
+    </ma-form-item>
+</template>
+
+<script setup>
+import { ref, inject, onMounted, watch } from "vue"
+import { get, set } from "lodash"
+import MaUpload from "@/components/ma-upload/index.vue"
+import MaFormItem from "./form-item.vue"
+import { maEvent } from "../js/formItemMixin.js"
+const props = defineProps({
+    component: Object,
+    customField: { type: String, default: undefined }
+})
+
+const formModel = inject("formModel")
+const index = props.customField ?? props.component.dataIndex
+const value = ref(get(formModel.value, index))
+
+watch(
+    () => get(formModel.value, index),
+    (vl) => (value.value = vl)
+)
+watch(
+    () => value.value,
+    (v) => {
+        set(formModel.value, index, v)
+        index.indexOf(".") > -1 && delete formModel.value[index]
+    }
+)
+
+maEvent.handleCommonEvent(props.component, "onCreated")
+onMounted(() => {
+    maEvent.handleCommonEvent(props.component, "onMounted")
+})
+</script>
--- a/chengduTestPlant/src/components/ma-form/formItem/form-user-select.vue
+++ b/chengduTestPlant/src/components/ma-form/formItem/form-user-select.vue
@@ -0,0 +1,63 @@
+<!--
+ - MineAdmin is committed to providing solutions for quickly building web applications
+ - Please view the LICENSE file that was distributed with this source code,
+ - For the full copyright and license information.
+ - Thank you very much for using MineAdmin.
+ -
+ - @Author X.Mo<root@imoi.cn>
+ - @Link   https://gitee.com/xmo/mineadmin-vue
+-->
+<template>
+    <ma-form-item
+        v-if="typeof props.component.display == 'undefined' || props.component.display === true"
+        :component="props.component"
+        :custom-field="props.customField"
+    >
+        <slot :name="`form-${props.component.dataIndex}`" v-bind="props.component">
+            <ma-user-select
+                v-model="value"
+                :text="props.component.text"
+                :multiple="props.component.multiple ?? true"
+                :onlyId="props.component.onlyId"
+                :isEcho="props.component.isEcho ?? true"
+            />
+        </slot>
+    </ma-form-item>
+</template>
+
+<script setup>
+import { ref, inject, onMounted, watch } from "vue"
+import { get, set } from "lodash"
+import MaUserSelect from "@/components/ma-user/index.vue"
+import MaFormItem from "./form-item.vue"
+import { maEvent } from "../js/formItemMixin.js"
+const props = defineProps({
+    component: Object,
+    customField: { type: String, default: undefined }
+})
+
+const formModel = inject("formModel")
+const index = props.customField ?? props.component.dataIndex
+const value = ref(get(formModel.value, index))
+
+watch(
+    () => get(formModel.value, index),
+    (vl) => (value.value = vl)
+)
+watch(
+    () => value.value,
+    (v) => {
+        set(formModel.value, index, v)
+        index.indexOf(".") > -1 && delete formModel.value[index]
+    }
+)
+
+if (props.component.multiple && !value.value) {
+    value.value = []
+}
+
+maEvent.handleCommonEvent(props.component, "onCreated")
+onMounted(() => {
+    maEvent.handleCommonEvent(props.component, "onMounted")
+})
+</script>
--- a/chengduTestPlant/src/components/ma-form/formItem/form-userinfo.vue
+++ b/chengduTestPlant/src/components/ma-form/formItem/form-userinfo.vue
@@ -0,0 +1,53 @@
+<!--
+ - MineAdmin is committed to providing solutions for quickly building web applications
+ - Please view the LICENSE file that was distributed with this source code,
+ - For the full copyright and license information.
+ - Thank you very much for using MineAdmin.
+ -
+ - @Author X.Mo<root@imoi.cn>
+ - @Link   https://gitee.com/xmo/mineadmin-vue
+-->
+<template>
+    <ma-form-item
+        v-if="typeof props.component.display == 'undefined' || props.component.display === true"
+        :component="props.component"
+        :custom-field="props.customField"
+    >
+        <slot :name="`form-${props.component.dataIndex}`" v-bind="props.component">
+            <ma-user-info v-model="value" :field="props.component.field"> </ma-user-info>
+        </slot>
+    </ma-form-item>
+</template>
+
+<script setup>
+import { ref, inject, onMounted, watch } from "vue"
+import { get, set } from "lodash"
+import MaUserInfo from "@/components/ma-userInfo/index.vue"
+import MaFormItem from "./form-item.vue"
+import { maEvent } from "../js/formItemMixin.js"
+const props = defineProps({
+    component: Object,
+    customField: { type: String, default: undefined }
+})
+
+const formModel = inject("formModel")
+const index = props.customField ?? props.component.dataIndex
+const value = ref(get(formModel.value, index))
+
+watch(
+    () => get(formModel.value, index),
+    (vl) => (value.value = vl)
+)
+watch(
+    () => value.value,
+    (v) => {
+        set(formModel.value, index, v)
+        index.indexOf(".") > -1 && delete formModel.value[index]
+    }
+)
+
+maEvent.handleCommonEvent(props.component, "onCreated")
+onMounted(() => {
+    maEvent.handleCommonEvent(props.component, "onMounted")
+})
+</script>
--- a/chengduTestPlant/src/components/ma-form/formItem/form-verify-code.vue
+++ b/chengduTestPlant/src/components/ma-form/formItem/form-verify-code.vue
@@ -0,0 +1,85 @@
+<!--
+ - MineAdmin is committed to providing solutions for quickly building web applications
+ - Please view the LICENSE file that was distributed with this source code,
+ - For the full copyright and license information.
+ - Thank you very much for using MineAdmin.
+ -
+ - @Author X.Mo<root@imoi.cn>
+ - @Link   https://gitee.com/xmo/mineadmin-vue
+-->
+<template>
+    <ma-form-item
+        v-if="typeof props.component.display == 'undefined' || props.component.display === true"
+        :component="props.component"
+        :custom-field="props.customField"
+    >
+        <slot :name="`form-${props.component.dataIndex}`" v-bind="props.component">
+            <a-input v-model="value" :placeholder="props.component.placeholder ?? '请输入验证码'" allow-clear>
+                <template #append>
+                    <ma-verify-code
+                        ref="formVerifyCode"
+                        :height="props.component.height ?? 32"
+                        :width="props.component.width"
+                        :size="props.component.size"
+                        :pool="props.component.pool"
+                        :showError="false"
+                    />
+                </template>
+            </a-input>
+        </slot>
+    </ma-form-item>
+</template>
+
+<script setup>
+import { ref, inject, onMounted, watch } from "vue"
+import { get, set } from "lodash"
+import MaVerifyCode from "@/components/ma-verifyCode/index.vue"
+import MaFormItem from "./form-item.vue"
+import { maEvent } from "../js/formItemMixin.js"
+
+const props = defineProps({
+    component: Object,
+    customField: { type: String, default: undefined }
+})
+
+const formVerifyCode = ref()
+const formModel = inject("formModel")
+const index = props.customField ?? props.component.dataIndex
+const value = ref(get(formModel.value, index))
+
+watch(
+    () => get(formModel.value, index),
+    (vl) => (value.value = vl)
+)
+watch(
+    () => value.value,
+    (v) => {
+        set(formModel.value, index, v)
+        index.indexOf(".") > -1 && delete formModel.value[index]
+    }
+)
+
+const component = props.component
+component.rules = [
+    { required: true, message: "请输入验证码" },
+    {
+        validator: (value, callback) => {
+            if (!formVerifyCode.value.checkResult(value)) {
+                callback("验证码错误")
+                return false
+            }
+        }
+    }
+]
+
+maEvent.handleCommonEvent(props.component, "onCreated")
+onMounted(() => {
+    maEvent.handleCommonEvent(props.component, "onMounted")
+})
+</script>
+
+<style scoped>
+:deep(.arco-input-append) {
+    padding: 0;
+}
+</style>
--- a/chengduTestPlant/src/components/ma-form/index.vue
+++ b/chengduTestPlant/src/components/ma-form/index.vue
@@ -0,0 +1,287 @@
+<!--
+ - MineAdmin is committed to providing solutions for quickly building web applications
+ - Please view the LICENSE file that was distributed with this source code,
+ - For the full copyright and license information.
+ - Thank you very much for using MineAdmin.
+ -
+ - @Author X.Mo<root@imoi.cn>
+ - @Link   https://gitee.com/xmo/mineadmin-vue
+-->
+<template>
+    <div class="w-full">
+        <a-spin :loading="formLoading" :tip="options.loadingText" class="w-full">
+            <div
+                v-if="options.showFormTitle"
+                :class="['ma-form-title', options.formTitleClass]"
+                :style="options.formTitleStyle"
+            >
+                {{ options.formTitle }}
+            </div>
+            <a-form
+                ref="maFormRef"
+                :model="form"
+                :class="['ma-form', options?.customClass]"
+                :label-align="options?.labelAlign"
+                :layout="options?.layout"
+                :size="options?.size"
+                :disabled="options?.disabled"
+                :rules="options?.rules"
+                @submit="formSubmit"
+            >
+                <template v-for="(component, componentIndex) in columns" :key="componentIndex">
+                    <component :is="getComponentName(component?.formType ?? 'input')" :component="component">
+                        <template v-for="slot in Object.keys($slots)" #[slot]="component">
+                            <slot :name="slot" v-bind="component" />
+                        </template>
+                    </component>
+                </template>
+                <div class="text-center" v-if="options.showButtons">
+                    <a-space>
+                        <slot name="formBeforeButtons" />
+                        <slot name="formButtons">
+                            <a-button
+                                :type="options.submitType"
+                                :status="options.submitStatus"
+                                v-if="options.submitShowBtn"
+                                html-type="submit"
+                            >
+                                <template #icon v-if="options?.submitIcon">
+                                    <component :is="options.submitIcon" />
+                                </template>
+                                {{ options.submitText }}
+                            </a-button>
+                            <a-button
+                                :type="options.resetType"
+                                :status="options.resetStatus"
+                                v-if="options.resetShowBtn"
+                                @click="resetForm"
+                            >
+                                <template #icon v-if="options?.resetIcon">
+                                    <component :is="options.resetIcon" />
+                                </template>
+                                {{ options.resetText }}
+                            </a-button>
+                        </slot>
+                        <slot name="formAfterButtons" />
+                    </a-space>
+                </div>
+            </a-form>
+        </a-spin>
+    </div>
+</template>
+
+<script setup>
+import { ref, watch, provide, onMounted, nextTick, getCurrentInstance } from "vue"
+import { isNil, get } from "lodash"
+import defaultOptions from "./js/defaultOptions.js"
+import { getComponentName, toHump, interactiveControl, handleFlatteningColumns } from "./js/utils.js"
+import { loadDict, handlerCascader } from "./js/networkRequest.js"
+import arrayComponentDefault from "./js/defaultArrayComponent.js"
+
+import { maEvent } from "./js/formItemMixin.js"
+import { Message } from "@arco-design/web-vue"
+
+const containerList = import.meta.globEager("./containerItem/*.vue")
+const componentList = import.meta.globEager("./formItem/*.vue")
+const _this = getCurrentInstance().appContext
+for (const path in containerList) {
+    const name = path.match(/([A-Za-z0-9_-]+)/g)[1]
+    const containerName = `Ma${toHump(name)}`
+    if (!_this.components[containerName]) {
+        _this.app.component(containerName, containerList[path].default)
+    }
+}
+
+for (const path in componentList) {
+    const name = path.match(/([A-Za-z0-9_-]+)/g)[1]
+    const componentName = `Ma${toHump(name)}`
+    if (!_this.components[componentName]) {
+        _this.app.component(componentName, componentList[path].default)
+    }
+}
+
+const formLoading = ref(false)
+const maFormRef = ref()
+const flatteningColumns = ref([])
+const dictList = ref({})
+const cascaderList = ref([])
+const form = ref({})
+
+const props = defineProps({
+    modelValue: { type: Object, default: {} },
+    columns: { type: Array },
+    options: { type: Object, default: {} }
+})
+const emit = defineEmits(["onSubmit", "update:modelValue"])
+
+watch(
+    () => props.modelValue,
+    (vl) => (form.value = vl),
+    { immediate: true, deep: true }
+)
+
+watch(
+    () => form.value,
+    (vl) => {
+        interactiveControl(vl, flatteningColumns.value)
+        emit("update:modelValue", vl)
+    },
+    { deep: true }
+)
+
+const options = ref(Object.assign(JSON.parse(JSON.stringify(defaultOptions)), props.options))
+
+// 初始化
+const init = async () => {
+    formLoading.value = true
+
+    handleFlatteningColumns(props.columns, flatteningColumns.value)
+
+    // 收集数据列表
+    flatteningColumns.value.map((item) => {
+        if (item.cascaderItem && item.cascaderItem.length > 0) {
+            cascaderList.value.push(...item.cascaderItem)
+        }
+    })
+
+    // 初始化数据
+    flatteningColumns.value.map(async (item) => {
+        if (isNil(form.value[item.dataIndex]) && !item.isChildrenForm) {
+            form.value[item.dataIndex] = undefined
+            if (arrayComponentDefault.includes(item.formType) && !item.isChildrenForm) {
+                form.value[item.dataIndex] = []
+            }
+        }
+
+        // 字典
+        if (!cascaderList.value.includes(item.dataIndex) && item.dict) {
+            await loadDict(dictList.value, item)
+        }
+
+        // 联动
+        await handlerCascader(
+            get(form.value, item.dataIndex),
+            item,
+            flatteningColumns.value,
+            dictList.value,
+            form.value,
+            false
+        )
+    })
+
+    await nextTick(() => {
+        interactiveControl(form.value, flatteningColumns.value)
+        formLoading.value = false
+    })
+}
+
+provide("options", options.value)
+provide("columns", flatteningColumns)
+provide("dictList", dictList)
+provide("formModel", form)
+provide("formLoading", formLoading)
+maEvent.handleCommonEvent(options.value, "onCreated")
+
+onMounted(() => {
+    maEvent.handleCommonEvent(options.value, "onMounted")
+    options.value.init && init()
+    maEvent.handleCommonEvent(options.value, "onInit")
+})
+
+const done = (status) => (formLoading.value = status)
+const validateForm = async () => {
+    const valid = await maFormRef.value.validate()
+    if (valid) {
+        let message = ""
+        for (let name in valid) message += valid[name].message + "、"
+        Message.error(message.substring(0, message.length - 1))
+    }
+    return valid
+}
+const resetForm = async () => await maFormRef.value.resetFields()
+const clearValidate = async () => await maFormRef.value.clearValidate()
+
+const formSubmit = async () => ((await validateForm()) && !formLoading.value) || emit("onSubmit", form.value, done)
+
+const getFormRef = () => maFormRef.value
+const getDictList = () => dictList.value
+const getDictService = () => {
+    const DictService = function (dictList) {
+        /**
+         * dict项服务类
+         * @param dataIndex
+         * @param dictData
+         * @constructor
+         */
+        const DictItemService = function (dataIndex, dictData) {
+            this.dict = dictData
+            this.dataIndex = dataIndex
+
+            /**
+             * 返回原DictData对象
+             * @returns {*}
+             */
+            this.getRawDictData = () => {
+                return this.dict
+            }
+            /**
+             * 追加
+             * @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 = (dictConfig) => {
+                return loadDict(dictList, { formType: "select", dict: dictConfig, dataIndex: this.dataIndex })
+            }
+        }
+
+        this.dictMap = new Map()
+        for (const [dataIndex, dictData] of Object.entries(dictList)) {
+            this.dictMap.set(dataIndex, new DictItemService(dataIndex, dictData))
+        }
+        this.get = (key) => {
+            return this.dictMap.get(key)
+        }
+    }
+    return new DictService(getDictList())
+}
+const getColumns = () => flatteningColumns.value
+const getCascaderList = () => cascaderList.value
+const getFormData = () => form.value
+
+defineExpose({
+    init,
+    getFormRef,
+    getColumns,
+    getDictList,
+    getDictService,
+    getCascaderList,
+    getFormData,
+    validateForm,
+    resetForm,
+    clearValidate
+})
+</script>
+
+<style lang="less" scoped>
+.ma-form-title {
+    font-size: 18px;
+    text-align: center;
+}
+</style>
--- a/chengduTestPlant/src/components/ma-form/js/defaultArrayComponent.js
+++ b/chengduTestPlant/src/components/ma-form/js/defaultArrayComponent.js
@@ -0,0 +1 @@
+export default ["checkbox", "user-select", "children-form", "resource"]
--- a/chengduTestPlant/src/components/ma-form/js/defaultOptions.js
+++ b/chengduTestPlant/src/components/ma-form/js/defaultOptions.js
@@ -0,0 +1,51 @@
+export default {
+    // 是否自动初始化表单并加载字典及联动远程数据
+    init: true,
+    // 表单加载数据中提示文案
+    loadingText: "加载中...",
+    // 表单样式class
+    customClass: [],
+    // 表单控件尺寸（全局） 'mini' | 'small' | 'medium' | 'large'
+    size: "medium",
+    // 标签的对齐方向
+    labelAlign: "right",
+    // horizontal 水平排列 vertical 垂直排列 inline 行内排列
+    layout: "horizontal",
+    // 表单是否禁用
+    disabled: false,
+    // 表单项验证规则整体配置，例子：{ title: [{ required: true, message: '请输入标题'}] }
+    rules: [],
+    // 是否显示按钮
+    showButtons: true,
+
+    // 提交按钮图标
+    submitIcon: "icon-send",
+    // 提交按钮类型
+    submitType: "primary",
+    // 提交按钮状态
+    submitStatus: "normal",
+    // 提交按钮文案
+    submitText: "提交",
+    // 是否显示提交按钮
+    submitShowBtn: true,
+
+    // 重置按钮图标
+    resetIcon: "icon-refresh",
+    // 重置按钮类型
+    resetType: "secondary",
+    // 重置按钮状态
+    resetStatus: "normal",
+    // 重置按钮文案
+    resetText: "重置",
+    // 是否显示重置按钮
+    resetShowBtn: true,
+
+    // 表单标题文案
+    formTitle: "未命名表单",
+    // 是否显示表单标题
+    showFormTitle: false,
+    // 自定义标题样式css
+    formTitleStyle: "",
+    // 自定义标题样式class
+    formTitleClass: []
+}
--- a/chengduTestPlant/src/components/ma-form/js/formItemMixin.js
+++ b/chengduTestPlant/src/components/ma-form/js/formItemMixin.js
@@ -0,0 +1,50 @@
+import { isString, isFunction } from "lodash"
+export const maEvent = {
+    customeEvent: async (component, value, evName) => {
+        if (component[evName]) {
+            if (isFunction(component[evName])) {
+                return await component[evName](value)
+            }
+            if (isString(component[evName])) {
+                let customFn = new Function("value", component[evName])
+                return await customFn.call(component, value)
+            }
+        }
+    },
+
+    handleCommonEvent: (component, evName) => {
+        if (component[evName]) {
+            if (isFunction(component[evName])) {
+                return component[evName]()
+            }
+            if (isString(component[evName])) {
+                let customFn = new Function("value", component[evName])
+                return customFn.call(component[evName])
+            }
+        }
+    },
+
+    handleInputEvent: (component, value) => {
+        maEvent.customeEvent(component, value, "onInput")
+    },
+
+    handleChangeEvent: (component, value) => {
+        maEvent.customeEvent(component, value, "onChange")
+    },
+
+    handleInputSearchEvent: (component, value) => {
+        maEvent.customeEvent(component, value, "onInputSearch")
+    },
+
+    handleTabClickEvent: (component, value) => {
+        maEvent.customeEvent(component, value, "onTabClick")
+    },
+
+    handleTabAddEvent: (component) => {
+        maEvent.customeEvent(component, component?.tabs, "onTabAdd")
+    },
+
+    handleTabDeleteEvent: (component, value) => {
+        maEvent.customeEvent(component, { tabs: component?.tabs, value }, "onTabDelete")
+    }
+}
--- a/chengduTestPlant/src/components/ma-form/js/networkRequest.js
+++ b/chengduTestPlant/src/components/ma-form/js/networkRequest.js
@@ -0,0 +1,141 @@
+import { isArray, isFunction, set } from "lodash"
+import { request } from "@/utils/request"
+import commonApi from "@/api/common"
+import tool from "@/utils/tool"
+
+export const allowUseDictComponent = [
+    "radio",
+    "checkbox",
+    "select",
+    "transfer",
+    "treeSelect",
+    "tree-select",
+    "cascader"
+]
+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 handlerDictProps = (item, tmpArr) => {
+    let data = []
+    let tran = {}
+    let colors = {}
+    let labelName = "label"
+    let valueName = "value"
+    if (item.dict.name && (!item.dict.url || !item.dict.data)) {
+        labelName = "title"
+        valueName = "key"
+    }
+    if (allowCoverComponent.includes(item.formType)) {
+        data = tmpArr.map((dicItem) => {
+            const label = dicItem[(item.dict.props && item.dict.props.label) || labelName]
+            let tmp = dicItem[(item.dict.props && item.dict.props.value) || valueName]
+            let disabled =
+                typeof dicItem["disabled"] == "undefined" ? false : dicItem["disabled"] === true ? true : false
+            let indeterminate =
+                typeof dicItem["indeterminate"] == "undefined"
+                    ? false
+                    : dicItem["indeterminate"] === true
+                    ? true
+                    : false
+            let value
+            if (item.dict.name || item.dict.data) value = tmp.toString()
+            else if (tmp === "true") value = true
+            else if (tmp === "false") value = false
+            else value = tmp
+            tran[value] = label
+            colors[value] = (item.dict.tagColors && item.dict.tagColors[value]) || undefined
+            return { label, value, disabled, indeterminate }
+        })
+    } else {
+        data = tmpArr
+    }
+    data.tran = tran
+    data.colors = colors
+    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]
+            } else {
+                const response = 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)
+                    }
+                }
+            }
+        } 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)
+            }
+        }
+    }
+}
+
+const requestCascaderData = async (val, dict, dictList, name) => {
+    if (dict && dict.url) {
+        let response
+        if (dict && dict.url.indexOf("{{key}}") > 0) {
+            response = await requestDict(
+                dict.url.replace("{{key}}", val),
+                dict.method || "GET",
+                dict.params || {},
+                dict.data || {}
+            )
+        } else {
+            let temp = { key: val }
+            const params = Object.assign(dict.params || {}, temp)
+            const data = Object.assign(dict.data || {}, temp)
+            response = await requestDict(dict.url, dict.method || "GET", params || {}, data || {})
+        }
+        if (response.data && response.code === 200) {
+            dictList[name] = response.data.map((dicItem) => {
+                return {
+                    label: dicItem[(dict.props && dict.props.label) || "label"],
+                    value: dicItem[(dict.props && dict.props.value) || "value"],
+                    disabled:
+                        typeof dicItem["disabled"] == "undefined" ? false : dicItem["disabled"] === true ? true : false,
+                    indeterminate:
+                        typeof dicItem["indeterminate"] == "undefined"
+                            ? false
+                            : dicItem["indeterminate"] === true
+                            ? true
+                            : false
+                }
+            })
+        } else {
+            console.error(response)
+        }
+    }
+}
+
+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)
+        })
+    }
+}
--- a/chengduTestPlant/src/components/ma-form/js/utils.js
+++ b/chengduTestPlant/src/components/ma-form/js/utils.js
@@ -0,0 +1,104 @@
+import { isEmpty, isFunction, get, set } from "lodash"
+
+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) => {
+    const obj = []
+    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))
+            }
+        })
+    }
+    obj.map((changItem) => {
+        columns.map((item, idx) => {
+            for (let name in changItem) {
+                if (name === item.dataIndex) {
+                    columns[idx] = Object.assign(item, changItem[name] || {})
+                }
+            }
+        })
+    })
+}
+
+export const upperCaseFirst = (str) => {
+    if (isEmpty(str)) return ""
+    return str[0].toUpperCase() + str.substr(1)
+}
+
+export const toHump = (str) => {
+    let temp = str[0].toUpperCase()
+    let step = 1
+    while (str.indexOf("-") > -1) {
+        let index = str.indexOf("-")
+        temp += str.substring(step, index)
+        temp += str[index + 1].toUpperCase()
+        str = str.replace("-", "")
+        step = index + 1
+    }
+    temp += str.substring(step)
+    return temp
+}
+
+export const getComponentName = (formType) => {
+    if (containerItems.includes(formType)) {
+        return `Ma${toHump(formType)}`
+    }
+    if (pickerType.includes(formType)) {
+        return "MaFormPicker"
+    }
+    if (inputType.includes(formType)) {
+        return "MaFormInput"
+    }
+    return `MaForm${toHump(formType)}`
+}
+
+export const handleFlatteningColumns = (data, columns, isChildrenForm = undefined) => {
+    for (let key in data) {
+        const item = data[key]
+        if (containerItems.includes(item.formType)) {
+            switch (item.formType) {
+                case "tabs":
+                    if (item.tabs) {
+                        item.tabs.map((tab) => {
+                            tab.formList && handleFlatteningColumns(tab.formList, columns)
+                        })
+                    }
+                    break
+                case "card":
+                    item.formList && handleFlatteningColumns(item.formList, columns)
+                    break
+                case "grid-tailwind":
+                case "grid":
+                    if (item.cols) {
+                        item.cols.map((col) => {
+                            col.formList && handleFlatteningColumns(col.formList, columns)
+                        })
+                    }
+                    break
+                case "table":
+                    if (item.rows) {
+                        item.rows.map((row) => {
+                            if (row.cols) {
+                                row.cols.map((col) => {
+                                    col.formList && handleFlatteningColumns(col.formList, columns)
+                                })
+                            }
+                        })
+                    }
+                    break
+                // case 'children-form':
+                //   item.formList && handleFlatteningColumns(item.formList, columns, item.dataIndex, true)
+                //   break
+            }
+        } else {
+            // if (isChildrenForm) {
+            //   item['isChildrenForm'] = true
+            // }
+            columns.push(item)
+        }
+    }
+}
				`@@ -0,0 +1 @@`
				`export default ["checkbox", "user-select", "children-form", "resource"]`