279 lines
9.0 KiB
Vue
279 lines
9.0 KiB
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 { 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>
|