1122
This commit is contained in:
278
cdTMP/src/components/ma-form/index.vue
Normal file
278
cdTMP/src/components/ma-form/index.vue
Normal file
@@ -0,0 +1,278 @@
|
||||
<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 { isNil, get } from "lodash"
|
||||
import { ref, watch, provide, onMounted, nextTick, getCurrentInstance } from "vue"
|
||||
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.glob("./containerItem/*.vue", { eager: true })
|
||||
const componentList = import.meta.glob("./formItem/*.vue", { eager: true })
|
||||
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>
|
||||
Reference in New Issue
Block a user