chenjunyi/cdTestPlant3
1
1
Fork 0
Code Issues Pull Requests Actions Packages Releases Wiki Activity

vue更新3.5，以及mime打更新

Browse Source
This commit is contained in:
管理员
2024-09-06 10:48:22 +08:00
parent 9984041eec
commit 3914762c85
117 changed files with 4348 additions and 8000 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
cdTMP/src/components/ma-form/containerItem/card.vue
View File

@@ -1,15 +1,13 @@
<!--
- 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
- @Author XXX
- @Link XXX
-->
<template>
<a-card
v-show="typeof props.component?.display == 'undefined' || props.component?.display === true"
v-if="
(typeof props.component?.display == 'undefined' || props.component?.display === true) &&
(hasDisplayTrue(props.component?.formList ?? []) || props.component?.forceShow)
"
:class="[props.component?.customClass]"
:extra="props.component?.extra"
:bordered="props.component?.bordered"
@@ -42,13 +40,22 @@
</template>
<script setup>
import { onMounted } from "vue"
import { onMounted, inject } from "vue"
import { getComponentName } from "../js/utils.js"
import { maEvent } from "../js/formItemMixin.js"
import { runEvent } from "../js/event.js"
const props = defineProps({ component: Object })
maEvent.handleCommonEvent(props.component, "onCreated")
onMounted(() => {
maEvent.handleCommonEvent(props.component, "onMounted")
})
const formModel = inject("formModel")
const getColumnService = inject("getColumnService")
const columns = inject("columns")
const hasDisplayTrue = (list) => {
return list.some((item) => item.display ?? true)
}
const rv = async (ev, value = undefined) =>
await runEvent(props.component, ev, { formModel, getColumnService, columns }, value)
rv("onCreated")
onMounted(() => rv("onMounted"))
</script>

159
cdTMP/src/components/ma-form/containerItem/children-form.vue
View File

@@ -1,3 +1,7 @@
<!--
- @Author XXX
- @Link XXX
-->
<template>
<a-form-item
v-if="typeof props.component.display == 'undefined' || props.component.display === true"
@@ -55,7 +59,6 @@
</template>
<template v-for="(component, componentIndex) in viewFormList[itemIndex]" :key="componentIndex">
<component
style="line-height:32px;"
v-if="!containerItems.includes(component.formType)"
:is="getComponentName(component?.formType ?? 'input')"
:component="component"
@@ -69,69 +72,88 @@
</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 />
<div v-else class="arco-table arco-table-size-large arco-table-border arco-table-stripe arco-table-hover">
<div class="arco-table-container">
<table class="arco-table-element" cellpadding="0" cellspacing="0">
<thead>
<tr class="arco-table-tr">
<th class="arco-table-th" width="60">
<span class="arco-table-cell arco-table-cell-align-center">
<a-button type="primary" @click="addItem()" size="small" shape="round">
<template #icon>
<icon-plus />
</template>
</a-button>
</span>
</th>
<th class="arco-table-th" :width="60">
<span class="arco-table-cell arco-table-cell-align-center">
<span class="arco-table-th-title">序号</span>
</span>
</th>
<template v-for="component in viewFormList[0]">
<th class="arco-table-th" :width="component.width">
<span class="arco-table-cell arco-table-cell-align-center">
<span class="arco-table-th-title">{{ component.title }}</span>
</span>
</th>
</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" />
</tr>
</thead>
<tbody>
<template v-for="(item, index) in formModel[props.component.dataIndex]">
<tr class="arco-table-tr">
<td class="arco-table-td">
<span class="arco-table-cell">
<a-button
type="primary"
status="danger"
size="small"
shape="round"
:disabled="formModel[props.component.dataIndex].length === 1"
@click="deleteItem(index)"
>
<template #icon><icon-minus /></template>
</a-button>
</span>
</td>
<td class="arco-table-td">
<span class="arco-table-cell">
<span class="arco-table-td-content">{{ index + 1 }}</span>
</span>
</td>
<template v-for="component in viewFormList[index]">
<td class="arco-table-td">
{{ (component.hideLabel = true ? "" : "") }}
<span class="arco-table-cell">
<component
v-if="!containerItems.includes(component.formType)"
:is="getComponentName(component.formType ?? 'input')"
:component="component"
:customField="getChildrenDataIndex(index, component.dataIndex)"
>
<template v-for="slot in Object.keys($slots)" #[slot]="component">
<slot :name="slot" v-bind="component" />
</template>
</component>
</span>
</td>
</template>
</component>
</tr>
</template>
</a-table-column>
</template>
</template>
</a-table>
</tbody>
</table>
</div>
</div>
</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 { ref, inject, onMounted, watch, nextTick } from "vue"
import { cloneDeep, isArray, isUndefined } from "lodash-es"
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"
import { runEvent } from "../js/event.js"
import { loadDict } from "../js/networkRequest.js"
const props = defineProps({ component: Object })
const formList = props.component.formList
@@ -139,6 +161,11 @@ const viewFormList = ref([])
const options = inject("options")
const formModel = inject("formModel")
const dictList = inject("dictList")
const getColumnService = inject("getColumnService")
const columns = inject("columns")
const rv = async (ev, value = undefined) =>
await runEvent(props.component, ev, { formModel, getColumnService, columns }, value)
const defaultOpenKeys = [0]
if (!formModel.value[props.component.dataIndex]) {
@@ -160,7 +187,7 @@ watch(
value[index] = Object.fromEntries(data)
}
viewFormList.value[index] = cloneDeep(formList)
maEvent.customeEvent(props.component, { formList: viewFormList.value[index], data, index }, "onAdd")
rv("onAdd", { formList: viewFormList.value[index], data, index })
})
}
},
@@ -173,23 +200,21 @@ 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)
})
}
// 默认不展开所有的collapse
// 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")
rv("onAdd", { formList: viewFormList.value[index], data, index })
formModel.value[props.component.dataIndex].push(data)
}
const deleteItem = async (index) => {
let res = await maEvent.customeEvent(props.component, { index }, "onDelete")
let res = await rv("onDelete", { index })
if (isUndefined(res) || res === true) {
viewFormList.value.splice(index, 1)
await nextTick()
@@ -201,14 +226,14 @@ const getChildrenDataIndex = (index, dataIndex) => {
return [props.component.dataIndex, index, dataIndex].join(".")
}
maEvent.handleCommonEvent(props.component, "onCreated")
rv("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")
rv("onMounted")
})
</script>

11
cdTMP/src/components/ma-form/containerItem/grid-col.vue
View File

@@ -1,15 +1,10 @@
<!--
- 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
- @Author XXX
- @Link XXX
-->
<template>
<a-col
v-show="typeof props.component?.display == 'undefined' || props.component?.display === true"
v-if="typeof props.component?.display == 'undefined' || props.component?.display === true"
:class="[props.component?.customClass]"
:span="props.component?.span ?? 12"
:offset="props.component?.offset"

11
cdTMP/src/components/ma-form/containerItem/grid-tailwind-col.vue
View File

@@ -1,15 +1,10 @@
<!--
- 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
- @Author XXX
- @Link XXX
-->
<template>
<div
v-show="typeof props.component?.display == 'undefined' || props.component?.display === true"
v-if="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"

27
cdTMP/src/components/ma-form/containerItem/grid-tailwind.vue
View File

@@ -1,15 +1,10 @@
<!--
- 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
- @Author XXX
- @Link XXX
-->
<template>
<div
v-show="typeof props.component?.display == 'undefined' || props.component?.display === true"
v-if="typeof props.component?.display == 'undefined' || props.component?.display === true"
:class="[gridClass, props.component?.customClass]"
:style="props.component?.style"
>
@@ -24,16 +19,20 @@
</template>
<script setup>
import { ref, onMounted } from "vue"
import { ref, onMounted, inject } from "vue"
import MaGridTailwindCol from "./grid-tailwind-col.vue"
import { maEvent } from "../js/formItemMixin.js"
import { runEvent } from "../js/event.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")
})
const formModel = inject("formModel")
const getColumnService = inject("getColumnService")
const columns = inject("columns")
const rv = async (ev, value = undefined) =>
await runEvent(props.component, ev, { formModel, getColumnService, columns }, value)
rv("onCreated")
onMounted(() => rv("onMounted"))
</script>
<style scoped>

27
cdTMP/src/components/ma-form/containerItem/grid.vue
View File

@@ -1,15 +1,10 @@
<!--
- 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
- @Author XXX
- @Link XXX
-->
<template>
<a-row
v-show="typeof props.component?.display == 'undefined' || props.component?.display === true"
v-if="typeof props.component?.display == 'undefined' || props.component?.display === true"
:class="[props.component?.customClass]"
:gutter="props.component?.gutter"
:justify="props.component?.justify"
@@ -28,13 +23,17 @@
</template>
<script setup>
import { onMounted } from "vue"
import { onMounted, inject } from "vue"
import MaGridCol from "./grid-col.vue"
import { maEvent } from "../js/formItemMixin.js"
import { runEvent } from "../js/event.js"
const props = defineProps({ component: Object })
maEvent.handleCommonEvent(props.component, "onCreated")
onMounted(() => {
maEvent.handleCommonEvent(props.component, "onMounted")
})
const formModel = inject("formModel")
const getColumnService = inject("getColumnService")
const columns = inject("columns")
const rv = async (ev, value = undefined) =>
await runEvent(props.component, ev, { formModel, getColumnService, columns }, value)
rv("onCreated")
onMounted(() => rv("onMounted"))
</script>

6
cdTMP/src/components/ma-form/containerItem/table-cell.vue
View File

@@ -1,6 +1,10 @@
<!--
- @Author XXX
- @Link XXX
-->
<template>
<td
v-show="typeof props.component?.display == 'undefined' || props.component?.display === true"
v-if="typeof props.component?.display == 'undefined' || props.component?.display === true"
:class="['table-cell', props.component?.customClass]"
:style="props.component?.style"
:colspan="props.component.colSpan"

27
cdTMP/src/components/ma-form/containerItem/table.vue
View File

@@ -1,15 +1,10 @@
<!--
- 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
- @Author XXX
- @Link XXX
-->
<template>
<table
v-show="typeof props.component?.display == 'undefined' || props.component?.display === true"
v-if="typeof props.component?.display == 'undefined' || props.component?.display === true"
:class="['table-container', props.component?.customClass]"
:style="props.component?.style"
>
@@ -33,15 +28,19 @@
</template>
<script setup>
import { onMounted } from "vue"
import { onMounted, inject } from "vue"
import MaTableCell from "./table-cell.vue"
import { maEvent } from "../js/formItemMixin.js"
import { runEvent } from "../js/event.js"
const props = defineProps({ component: Object })
maEvent.handleCommonEvent(props.component, "onCreated")
onMounted(() => {
maEvent.handleCommonEvent(props.component, "onMounted")
})
const formModel = inject("formModel")
const getColumnService = inject("getColumnService")
const columns = inject("columns")
const rv = async (ev, value = undefined) =>
await runEvent(props.component, ev, { formModel, getColumnService, columns }, value)
rv("onCreated")
onMounted(() => rv("onMounted"))
</script>
<style lang="less">

35
cdTMP/src/components/ma-form/containerItem/tabs.vue
View File

@@ -1,15 +1,10 @@
<!--
- 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
- @Author XXX
- @Link XXX
-->
<template>
<a-tabs
v-show="typeof props.component?.display == 'undefined' || props.component?.display === true"
v-if="typeof props.component?.display == 'undefined' || props.component?.display === true"
:class="[props.component?.customClass]"
:trigger="props.component?.trigger"
:position="props.component?.position"
@@ -23,10 +18,10 @@
: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)"
@change="rv('onChange', $event)"
@tab-click="rv('onTabClick', $event)"
@add="tabAddEvent(props.component, { formModel, getColumnService, columns })"
@delete="tabDeleteEvent(props.component, $event, { formModel, getColumnService, columns })"
>
<template #extra>
<slot :name="`tabExtra-${props.component?.dataIndex ?? ''}`"></slot>
@@ -54,13 +49,17 @@
</template>
<script setup>
import { onMounted } from "vue"
import { onMounted, inject } from "vue"
import { getComponentName } from "../js/utils.js"
import { maEvent } from "../js/formItemMixin.js"
import { runEvent, tabAddEvent, tabDeleteEvent } from "../js/event.js"
const props = defineProps({ component: Object })
maEvent.handleCommonEvent(props.component, "onCreated")
onMounted(() => {
maEvent.handleCommonEvent(props.component, "onMounted")
})
const formModel = inject("formModel")
const getColumnService = inject("getColumnService")
const columns = inject("columns")
const rv = async (ev, value = undefined) =>
await runEvent(props.component, ev, { formModel, getColumnService, columns }, value)
rv("onCreated")
onMounted(() => rv("onMounted"))
</script>

33
cdTMP/src/components/ma-form/formItem/form-auto-complete.vue
View File

@@ -1,11 +1,6 @@
<!--
- 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
- @Author XXX
- @Link XXX
-->
<template>
<ma-form-item
@@ -24,10 +19,12 @@
: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')"
@change="rv('onChange', $event)"
@search="rv('onSearch', $event)"
@select="rv('onSelect', $event)"
@clear="rv('onClear')"
@dropdown-scroll="rv('onDropdownScroll')"
@dropdown-reach-bottom="rv('onDropdownReachBottom')"
>
<slot :name="`autoCompleteFooter-${props.component.dataIndex}`"></slot>
</a-auto-complete>
@@ -37,15 +34,19 @@
<script setup>
import { ref, inject, onMounted, watch } from "vue"
import { get, set } from "lodash"
import { get, set } from "lodash-es"
import MaFormItem from "./form-item.vue"
import { maEvent } from "../js/formItemMixin.js"
import { runEvent } from "../js/event.js"
const props = defineProps({
component: Object,
customField: { type: String, default: undefined }
})
const formModel = inject("formModel")
const getColumnService = inject("getColumnService")
const columns = inject("columns")
const rv = async (ev, value = undefined) =>
await runEvent(props.component, ev, { formModel, getColumnService, columns }, value)
const index = props.customField ?? props.component.dataIndex
const value = ref(get(formModel.value, index, ""))
@@ -61,8 +62,6 @@ watch(
}
)
maEvent.handleCommonEvent(props.component, "onCreated")
onMounted(() => {
maEvent.handleCommonEvent(props.component, "onMounted")
})
rv("onCreated")
onMounted(() => rv("onMounted"))
</script>

65
cdTMP/src/components/ma-form/formItem/form-button.vue
View File

@@ -1,43 +1,44 @@
<!--
- 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
- @Author XXX
- @Link XXX
-->
<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>
<div>
<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="rv('onClick')"
>
<template #icon v-if="props.component.icon">
<component :is="props.component.icon" />
</template>
{{ props.component.title ?? "button" }}
</a-button>
</slot>
</div>
</template>
<script setup>
import { onMounted } from "vue"
import { maEvent } from "../js/formItemMixin.js"
import { onMounted, inject } from "vue"
import { runEvent } from "../js/event.js"
const props = defineProps({
component: Object
})
maEvent.handleCommonEvent(props.component, "onCreated")
onMounted(() => {
maEvent.handleCommonEvent(props.component, "onMounted")
})
const formModel = inject("formModel")
const getColumnService = inject("getColumnService")
const columns = inject("columns")
const rv = async (ev, value = undefined) =>
await runEvent(props.component, ev, { formModel, getColumnService, columns }, value)
rv("onCreated")
onMounted(() => rv("onMounted"))
</script>

37
cdTMP/src/components/ma-form/formItem/form-cascader.vue
View File

@@ -1,11 +1,6 @@
<!--
- 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
- @Author XXX
- @Link XXX
-->
<template>
<ma-form-item
@@ -45,13 +40,13 @@
: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')"
@change="rv('onChange', $event)"
@search="rv('onSearch', $event)"
@input-value-change="rv('onInputValueChange', $event)"
@popup-visible-change="rv('onPopupVisibleChange', $event)"
@clear="rv('onClear')"
@focus="rv('onFocus')"
@blur="rv('onBlur')"
>
</a-cascader>
</slot>
@@ -60,9 +55,9 @@
<script setup>
import { ref, inject, onMounted, watch } from "vue"
import { get, set } from "lodash"
import { get, set } from "lodash-es"
import MaFormItem from "./form-item.vue"
import { maEvent } from "../js/formItemMixin.js"
import { runEvent } from "../js/event.js"
const props = defineProps({
component: Object,
@@ -71,6 +66,10 @@ const props = defineProps({
const formModel = inject("formModel")
const dictList = inject("dictList")
const getColumnService = inject("getColumnService")
const columns = inject("columns")
const rv = async (ev, value = undefined) =>
await runEvent(props.component, ev, { formModel, getColumnService, columns }, value)
const index = props.customField ?? props.component.dataIndex
const dictIndex = index.match(/^(\w+\.)\d+\./)
? index.match(/^(\w+\.)\d+\./)[1] + props.component.dataIndex
@@ -99,8 +98,6 @@ if (
value.value = value.value + ""
}
maEvent.handleCommonEvent(props.component, "onCreated")
onMounted(() => {
maEvent.handleCommonEvent(props.component, "onMounted")
})
rv("onCreated")
onMounted(() => rv("onMounted"))
</script>

25
cdTMP/src/components/ma-form/formItem/form-checkbox.vue
View File

@@ -1,11 +1,6 @@
<!--
- 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
- @Author XXX
- @Link XXX
-->
<template>
<ma-form-item
@@ -20,7 +15,7 @@
:max="props.component.max"
:direction="props.component.direction"
:disabled="props.component.disabled"
@change="maEvent.handleChangeEvent(props.component, $event)"
@change="rv('onChange', $event)"
>
<template v-for="(item, index) in dictList[dictIndex] ?? []">
<a-checkbox :value="item.value" :disabled="item.disabled" :indeterminate="item.indeterminate">{{
@@ -34,9 +29,9 @@
<script setup>
import { ref, inject, onMounted, watch } from "vue"
import { get, set } from "lodash"
import { get, set } from "lodash-es"
import MaFormItem from "./form-item.vue"
import { maEvent } from "../js/formItemMixin.js"
import { runEvent } from "../js/event.js"
const props = defineProps({
component: Object,
@@ -45,6 +40,10 @@ const props = defineProps({
const formModel = inject("formModel")
const dictList = inject("dictList")
const getColumnService = inject("getColumnService")
const columns = inject("columns")
const rv = async (ev, value = undefined) =>
await runEvent(props.component, ev, { formModel, getColumnService, columns }, value)
const index = props.customField ?? props.component.dataIndex
const dictIndex = index.match(/^(\w+\.)\d+\./)
? index.match(/^(\w+\.)\d+\./)[1] + props.component.dataIndex
@@ -63,8 +62,6 @@ watch(
}
)
maEvent.handleCommonEvent(props.component, "onCreated")
onMounted(() => {
maEvent.handleCommonEvent(props.component, "onMounted")
})
rv("onCreated")
onMounted(() => rv("onMounted"))
</script>

23
cdTMP/src/components/ma-form/formItem/form-city-linkage.vue
View File

@@ -1,11 +1,6 @@
<!--
- 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
- @Author XXX
- @Link XXX
-->
<template>
<ma-form-item
@@ -22,10 +17,10 @@
<script setup>
import { ref, inject, onMounted, watch } from "vue"
import { get, set } from "lodash"
import { get, set } from "lodash-es"
import MaCityLinkage from "@/components/ma-cityLinkage/index.vue"
import MaFormItem from "./form-item.vue"
import { maEvent } from "../js/formItemMixin.js"
import { runEvent } from "../js/event.js"
const props = defineProps({
component: Object,
@@ -33,6 +28,10 @@ const props = defineProps({
})
const formModel = inject("formModel")
const getColumnService = inject("getColumnService")
const columns = inject("columns")
const rv = async (ev, value = undefined) =>
await runEvent(props.component, ev, { formModel, getColumnService, columns }, value)
const index = props.customField ?? props.component.dataIndex
const value = ref(get(formModel.value, index))
@@ -48,8 +47,6 @@ watch(
}
)
maEvent.handleCommonEvent(props.component, "onCreated")
onMounted(() => {
maEvent.handleCommonEvent(props.component, "onMounted")
})
rv("onCreated")
onMounted(() => rv("onMounted"))
</script>

22
cdTMP/src/components/ma-form/formItem/form-color-picker.vue
View File

@@ -1,11 +1,6 @@
<!--
- 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
- @Author XXX
- @Link XXX
-->
<template>
<ma-form-item
@@ -21,10 +16,10 @@
<script setup>
import { ref, inject, onMounted, watch } from "vue"
import { get, set } from "lodash"
import { get, set } from "lodash-es"
import MaColorPicker from "@/components/ma-colorPicker/index.vue"
import MaFormItem from "./form-item.vue"
import { maEvent } from "../js/formItemMixin.js"
import { runEvent } from "../js/event.js"
const props = defineProps({
component: Object,
@@ -32,6 +27,9 @@ const props = defineProps({
})
const formModel = inject("formModel")
const dictList = inject("dictList")
const columns = inject("columns")
const rv = async (ev, value = undefined) => await runEvent(props.component, ev, value, { formModel, dictList, columns })
const index = props.customField ?? props.component.dataIndex
const value = ref(get(formModel.value, index))
@@ -47,8 +45,6 @@ watch(
}
)
maEvent.handleCommonEvent(props.component, "onCreated")
onMounted(() => {
maEvent.handleCommonEvent(props.component, "onMounted")
})
rv("onCreated")
onMounted(() => rv("onMounted"))
</script>

25
cdTMP/src/components/ma-form/formItem/form-component.vue
View File

@@ -1,11 +1,6 @@
<!--
- 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
- @Author XXX
- @Link XXX
-->
<template>
<ma-form-item
@@ -20,16 +15,22 @@
</template>
<script setup>
import { onMounted, getCurrentInstance, watch } from "vue"
import { get, set } from "lodash"
import { onMounted, getCurrentInstance, watch, inject } from "vue"
import { get, set } from "lodash-es"
import MaFormItem from "./form-item.vue"
import { maEvent } from "../js/formItemMixin.js"
import { runEvent } from "../js/event.js"
const props = defineProps({
component: Object,
customField: { type: String, default: undefined }
})
const formModel = inject("formModel")
const getColumnService = inject("getColumnService")
const columns = inject("columns")
const rv = async (ev, value = undefined) =>
await runEvent(props.component, ev, { formModel, getColumnService, columns }, value)
const app = getCurrentInstance().appContext.app
if (
@@ -40,8 +41,8 @@ if (
app.component(props.component.dataIndex, props.component.component)
}
maEvent.handleCommonEvent(props.component, "onCreated")
runEvent("onCreated", "handleCommonEvent")
onMounted(() => {
maEvent.handleCommonEvent(props.component, "onMounted")
runEvent("onMounted", "handleCommonEvent")
})
</script>

85
cdTMP/src/components/ma-form/formItem/form-dialog.vue Normal file
View File

@@ -0,0 +1,85 @@
<!--
- @Author XXX
- @Link XXX
-->
<template>
<maDialog v-model:visible="visible" :footer="false" />
</template>
<script setup>
import { onMounted, inject, ref, h, computed } from "vue"
import { runEvent } from "../js/event.js"
import { Modal, Drawer } from "@arco-design/web-vue"
import MaForm from "@/components/ma-form/index.vue"
import { isFunction } from "lodash-es"
const props = defineProps({
component: Object
})
const visible = ref(false)
const openDialog = () => (visible.value = true)
const getDataIndex = () => props.component?.dataIndex
const formModel = inject("formModel")
const getColumnService = inject("getColumnService")
const columns = inject("columns")
const rv = async (ev, value = undefined) =>
await runEvent(props.component, ev, { formModel, getColumnService, columns }, value)
const form = computed({
get() {
return formModel.value[getDataIndex()]
},
set(newVal) {
formModel.value[getDataIndex()] = newVal
}
})
const maDialog = (p, ctx) => {
const componentProps = { formList: {}, options: {} }
const evs = {}
Object.keys(props.component).map((key) => {
if (!/^on[A-Za-z]+/g.test(key)) {
componentProps[key] = props.component[key]
} else {
if (isFunction(props.component[key])) {
evs[key] = function () {
const argsList = Array.prototype.slice.call(arguments)
props.component[key](...argsList, { formModel, getColumnService, columns })
}
} else {
evs[key] = function () {
const argsList = Array.prototype.slice.call(arguments)
rv(key, { ...argsList })
}
}
}
})
return h(
componentProps?.type === "drawer" ? Drawer : Modal,
{
...Object.assign(componentProps, p),
...evs
},
{
default: () =>
h(
MaForm,
{
columns: componentProps.formList,
options: Object.assign(componentProps.options),
modelValue: form.value,
onSubmit: async (data, done) => await rv("onSubmit", { data, done })
},
componentProps?.formSlot
),
...componentProps?.dialogSlot
}
)
}
rv("onCreated")
onMounted(() => rv("onMounted"))
defineExpose({ openDialog, getDataIndex })
</script>

53
cdTMP/src/components/ma-form/formItem/form-divider.vue
View File

@@ -1,37 +1,38 @@
<!--
- 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
- @Author XXX
- @Link XXX
-->
<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>
<div>
<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>
</div>
</template>
<script setup>
import { onMounted } from "vue"
import { maEvent } from "../js/formItemMixin.js"
import { onMounted, inject } from "vue"
import { runEvent } from "../js/event.js"
const props = defineProps({
component: Object
})
maEvent.handleCommonEvent(props.component, "onCreated")
onMounted(() => {
maEvent.handleCommonEvent(props.component, "onMounted")
})
const formModel = inject("formModel")
const getColumnService = inject("getColumnService")
const columns = inject("columns")
const rv = async (ev, value = undefined) =>
await runEvent(props.component, ev, { formModel, getColumnService, columns }, value)
rv("onCreated")
onMounted(() => rv("onMounted"))
</script>

20
cdTMP/src/components/ma-form/formItem/form-editor.vue
View File

@@ -1,3 +1,7 @@
<!--
- @Author XXX
- @Link XXX
-->
<template>
<ma-form-item
v-if="typeof props.component.display == 'undefined' || props.component.display === true"
@@ -10,7 +14,7 @@
style="width: 100%"
:height="props.component.height"
:id="props.component.id"
@change="maEvent.handleChangeEvent(props.component, $event)"
@change="rv('onChange', $event)"
>
</ma-editor>
</slot>
@@ -19,16 +23,20 @@
<script setup>
import { ref, inject, onMounted, watch } from "vue"
import { get, set } from "lodash"
import { get, set } from "lodash-es"
import MaEditor from "@/components/ma-editor/index.vue"
import MaFormItem from "./form-item.vue"
import { maEvent } from "../js/formItemMixin.js"
import { runEvent } from "../js/event.js"
const props = defineProps({
component: Object,
customField: { type: String, default: undefined }
})
const formModel = inject("formModel")
const getColumnService = inject("getColumnService")
const columns = inject("columns")
const rv = async (ev, value = undefined) =>
await runEvent(props.component, ev, { formModel, getColumnService, columns }, value)
const index = props.customField ?? props.component.dataIndex
const value = ref(get(formModel.value, index))
@@ -44,8 +52,6 @@ watch(
}
)
maEvent.handleCommonEvent(props.component, "onCreated")
onMounted(() => {
maEvent.handleCommonEvent(props.component, "onMounted")
})
rv("onCreated")
onMounted(() => rv("onMounted"))
</script>

24
cdTMP/src/components/ma-form/formItem/form-icon-picker.vue
View File

@@ -1,11 +1,6 @@
<!--
- 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
- @Author XXX
- @Link XXX
-->
<template>
<ma-form-item
@@ -21,17 +16,20 @@
<script setup>
import { ref, inject, onMounted, watch } from "vue"
import { get, set } from "lodash"
import { get, set } from "lodash-es"
import MaIconPicker from "@/components/ma-icon/index.vue"
import MaFormItem from "./form-item.vue"
import { maEvent } from "../js/formItemMixin.js"
import { runEvent } from "../js/event.js"
const props = defineProps({
component: Object,
customField: { type: String, default: undefined }
})
const formModel = inject("formModel")
const dictList = inject("dictList")
const getColumnService = inject("getColumnService")
const columns = inject("columns")
const rv = async (ev, value = undefined) =>
await runEvent(props.component, ev, { formModel, getColumnService, columns }, value)
const index = props.customField ?? props.component.dataIndex
const value = ref(get(formModel.value, index))
@@ -47,8 +45,6 @@ watch(
}
)
maEvent.handleCommonEvent(props.component, "onCreated")
onMounted(() => {
maEvent.handleCommonEvent(props.component, "onMounted")
})
rv("onCreated")
onMounted(() => rv("onMounted"))
</script>

35
cdTMP/src/components/ma-form/formItem/form-input-number.vue
View File

@@ -6,7 +6,7 @@
>
<slot :name="`form-${props.component.dataIndex}`" v-bind="props.component">
<a-input-number
v-model="value"
v-model.trim="value"
:size="props.component.size"
:allow-clear="props.component.allowClear ?? true"
:disabled="props.component.disabled"
@@ -21,12 +21,18 @@
: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')"
@input="rv('onInput', $event)"
@change="rv('onChange', $event)"
@clear="rv('onClear')"
@focus="rv('onFocus')"
@blur="rv('onBlur')"
>
<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>
@@ -40,18 +46,25 @@
<script setup>
import { ref, inject, onMounted, watch } from "vue"
import { get, set, toNumber, isNaN } from "lodash"
import { get, set, toNumber, isNaN } from "lodash-es"
import MaFormItem from "./form-item.vue"
import { maEvent } from "../js/formItemMixin.js"
import { runEvent } from "../js/event.js"
const props = defineProps({
component: Object,
customField: { type: String, default: undefined }
})
const formModel = inject("formModel")
const getColumnService = inject("getColumnService")
const columns = inject("columns")
const index = props.customField ?? props.component.dataIndex
const value = ref(toNumber(get(formModel.value, index)))
const rv = async (ev, value = undefined) => {
if (ev === "onChange") set(formModel.value, index, value)
await runEvent(props.component, ev, { formModel, getColumnService, columns }, value)
}
watch(
() => get(formModel.value, index),
(vl) => (value.value = toNumber(vl))
@@ -65,8 +78,6 @@ watch(
}
)
maEvent.handleCommonEvent(props.component, "onCreated")
onMounted(() => {
maEvent.handleCommonEvent(props.component, "onMounted")
})
rv("onCreated")
onMounted(() => rv("onMounted"))
</script>

32
cdTMP/src/components/ma-form/formItem/form-input-tag.vue
View File

@@ -1,3 +1,7 @@
<!--
- @Author XXX
- @Link XXX
-->
<template>
<ma-form-item
v-if="typeof props.component.display == 'undefined' || props.component.display === true"
@@ -19,13 +23,13 @@
: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')"
@input-value-change="rv('onInputValueChange', $event)"
@change="rv('onChange', $event)"
@remove="rv('onRemove', $event)"
@press-enter="rv('onPressEnter', $event)"
@clear="rv('onClear')"
@focus="rv('onFocus')"
@blur="rv('onBlur')"
>
<template #suffix v-if="props.component.openSuffix">
<slot :name="`inputSuffix-${props.component.dataIndex}`" />
@@ -40,15 +44,19 @@
<script setup>
import { ref, inject, onMounted, watch } from "vue"
import { get, set } from "lodash"
import { get, set } from "lodash-es"
import MaFormItem from "./form-item.vue"
import { maEvent } from "../js/formItemMixin.js"
import { runEvent } from "../js/event.js"
const props = defineProps({
component: Object,
customField: { type: String, default: undefined }
})
const formModel = inject("formModel")
const getColumnService = inject("getColumnService")
const columns = inject("columns")
const rv = async (ev, value = undefined) =>
await runEvent(props.component, ev, { formModel, getColumnService, columns }, value)
const index = props.customField ?? props.component.dataIndex
const value = ref(get(formModel.value, index))
@@ -64,8 +72,6 @@ watch(
}
)
maEvent.handleCommonEvent(props.component, "onCreated")
onMounted(() => {
maEvent.handleCommonEvent(props.component, "onMounted")
})
rv("onCreated")
onMounted(() => rv("onMounted"))
</script>

40
cdTMP/src/components/ma-form/formItem/form-input.vue
View File

@@ -1,3 +1,7 @@
<!--
- @Author XXX
- @Link XXX
-->
<template>
<ma-form-item
v-if="typeof props.component.display == 'undefined' || props.component.display === true"
@@ -5,7 +9,6 @@
:custom-field="props.customField"
>
<slot :name="`form-${props.component.dataIndex}`" v-bind="props.component">
<!-- chen.xiugai-warning -->
<component
:is="getComponentName()"
v-model.trim="value"
@@ -24,13 +27,13 @@
: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)"
@input="rv('onInput', $event)"
@change="rv('onChange', $event)"
@press-enter="rv('onPressEnter')"
@clear="rv('onClear')"
@focus="rv('onFocus')"
@blur="rv('onBlur')"
@search="rv('onSearch', $event)"
>
<template #prepend v-if="props.component.openPrepend">
<slot :name="`inputPrepend-${props.component.dataIndex}`" />
@@ -51,17 +54,26 @@
<script setup>
import { ref, inject, onMounted, watch } from "vue"
import { get, set } from "lodash"
import { get, set } from "lodash-es"
import MaFormItem from "./form-item.vue"
import { maEvent } from "../js/formItemMixin.js"
import { runEvent } from "../js/event.js"
const props = defineProps({
component: Object,
customField: { type: String, default: undefined }
})
const formModel = inject("formModel")
const getColumnService = inject("getColumnService")
const columns = inject("columns")
const rv = async (ev, value = undefined) =>
await runEvent(props.component, ev, { formModel, getColumnService, columns }, value)
const index = props.customField ?? props.component.dataIndex
const value = ref(get(formModel.value, index))
//后端传入数字类型导致报错 Invalid prop: type check failed for prop "modelValue". Expected String with value "0", got Number with value 0
const toVal = ref(`${get(formModel.value, index)}`)
const value = ref()
if (toVal.value != "undefined") {
value.value = toVal.value
}
watch(
() => get(formModel.value, index),
@@ -87,8 +99,6 @@ const getComponentName = () => {
}
}
maEvent.handleCommonEvent(props.component, "onCreated")
onMounted(() => {
maEvent.handleCommonEvent(props.component, "onMounted")
})
rv("onCreated")
onMounted(() => rv("onMounted"))
</script>

9
cdTMP/src/components/ma-form/formItem/form-item.vue
View File

@@ -1,11 +1,6 @@
<!--
- 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
- @Author XXX
- @Link XXX
-->
<template>
<a-form-item

109
cdTMP/src/components/ma-form/formItem/form-key-value.vue Normal file
View File

@@ -0,0 +1,109 @@
<!--
- @Author XXX
- @Link XXX
-->
<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-table
class="w-full"
row-key="keys"
:pagination="false"
@change="handleChange"
:data="value"
:draggable="{ type: 'handle', width: 40 }"
>
<template #columns>
<a-table-column title="Key" align="center">
<template #cell="{ record }">
<a-input v-model="record.key" />
</template>
</a-table-column>
<a-table-column title="Value" align="center">
<template #cell="{ record }">
<a-input v-model="record.value" />
</template>
</a-table-column>
<a-table-column title="操作" align="center">
<template #cell="{ rowIndex }">
<a-space>
<a-button size="small" type="primary" @click="plus(rowIndex)"
><template #icon><icon-plus /></template
></a-button>
<a-button size="small" type="primary" @click="minus(rowIndex)"
><template #icon><icon-minus /></template
></a-button>
</a-space>
</template>
</a-table-column>
</template>
</a-table>
</slot>
</ma-form-item>
</template>
<script setup>
import { ref, inject, onMounted, watch } from "vue"
import { get, set, cloneDeep, isArray } from "lodash-es"
import MaFormItem from "./form-item.vue"
import { runEvent } from "../js/event.js"
import { Message } from "@arco-design/web-vue"
const props = defineProps({
component: Object,
customField: { type: String, default: undefined }
})
const formModel = inject("formModel")
const getColumnService = inject("getColumnService")
const columns = inject("columns")
const dictList = inject("dictList")
const rv = async (ev, value = undefined) =>
await runEvent(props.component, ev, { formModel, getColumnService, columns }, value)
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 (!isArray(value.value) || value.value.length === 0) {
value.value = [{ key: "", value: "" }]
}
const handleChange = (data) => {
value.value = data
}
const plus = (index) => {
value.value.splice(index + 1, 0, { key: "", value: "" })
}
const minus = (index) => {
if (value.value.length === 1) {
Message.info("最少要保留一个")
return false
}
const data = cloneDeep(value.value)
data.splice(index, 1)
value.value = cloneDeep(data)
}
rv("onCreated")
onMounted(() => rv("onMounted"))
</script>

27
cdTMP/src/components/ma-form/formItem/form-link.vue
View File

@@ -1,11 +1,6 @@
<!--
- 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
- @Author XXX
- @Link XXX
-->
<template>
<slot :name="`form-${props.component.dataIndex}`" v-bind="props.component">
@@ -15,7 +10,7 @@
:disabled="props.component.disabled"
:loading="props.component.loading"
:href="props.component.href"
@click="maEvent.handleCommonEvent(props.component, 'onClick')"
@click="rv('onClick')"
>
<template #icon v-if="props.component.icon">
<component :is="props.component.icon" />
@@ -26,14 +21,18 @@
</template>
<script setup>
import { onMounted } from "vue"
import { maEvent } from "../js/formItemMixin.js"
import { onMounted, inject } from "vue"
import { runEvent } from "../js/event.js"
const props = defineProps({
component: Object
})
maEvent.handleCommonEvent(props.component, "onCreated")
onMounted(() => {
maEvent.handleCommonEvent(props.component, "onMounted")
})
const formModel = inject("formModel")
const getColumnService = inject("getColumnService")
const columns = inject("columns")
const rv = async (ev, value = undefined) =>
await runEvent(props.component, ev, { formModel, getColumnService, columns }, value)
rv("onCreated")
onMounted(() => rv("onMounted"))
</script>

35
cdTMP/src/components/ma-form/formItem/form-mention.vue
View File

@@ -1,11 +1,6 @@
<!--
- 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
- @Author XXX
- @Link XXX
-->
<template>
<ma-form-item
@@ -26,12 +21,12 @@
: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')"
@input="rv('onInput', $event)"
@clear="rv('onClear')"
@focus="rv('onFocus')"
@blur="rv('onBlur')"
@search="rv('onSearch', $event)"
@select="rv('onSelect', $event)"
>
</a-mention>
</slot>
@@ -40,15 +35,19 @@
<script setup>
import { ref, inject, onMounted, watch } from "vue"
import { get, set } from "lodash"
import { get, set } from "lodash-es"
import MaFormItem from "./form-item.vue"
import { maEvent } from "../js/formItemMixin.js"
import { runEvent } from "../js/event.js"
const props = defineProps({
component: Object,
customField: { type: String, default: undefined }
})
const formModel = inject("formModel")
const getColumnService = inject("getColumnService")
const columns = inject("columns")
const rv = async (ev, value = undefined) =>
await runEvent(props.component, ev, { formModel, getColumnService, columns }, value)
const index = props.customField ?? props.component.dataIndex
const value = ref(get(formModel.value, index))
@@ -64,8 +63,6 @@ watch(
}
)
maEvent.handleCommonEvent(props.component, "onCreated")
onMounted(() => {
maEvent.handleCommonEvent(props.component, "onMounted")
})
rv("onCreated")
onMounted(() => rv("onMounted"))
</script>

42
cdTMP/src/components/ma-form/formItem/form-picker.vue
View File

@@ -1,11 +1,6 @@
<!--
- 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
- @Author XXX
- @Link XXX
-->
<template>
<ma-form-item
@@ -19,8 +14,8 @@
v-model="value"
:placeholder="
props.component.formType === 'range'
? ['请选择开始时间', '请选择结束时间']
: `请选择${props.component.title}`
? (props.component.placeholder ?? ['请选择开始时间', '请选择结束时间'])
: (props.component.placeholder ?? `请选择${props.component.title}`)
"
:hide-trigger="props.component.hideTrigger"
:allow-clear="props.component.allowClear ?? true"
@@ -43,6 +38,7 @@
:show-time="props.component.showTime"
:preview-shortcut="props.component.previewShortcut"
:show-confirm-btn="props.component.showConfirmBtn"
:type="props.component.range ? (props.component.formType === 'time' ? 'time-range' : 'range') : ''"
:time-picker-props="
props.component.formType == 'range' ? { defaultValue: ['00:00:00', '23:59:59'] } : {}
"
@@ -52,9 +48,9 @@
@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')"
@clear="rv('onClear')"
@popup-visible-change="rv('onvVisibleChange', $event)"
@select-shortcut="rv('onSelectShortcut', $event)"
@picker-value-change="handlePickerValueChangeEvent"
/>
</slot>
@@ -63,15 +59,19 @@
<script setup>
import { ref, inject, onMounted, watch } from "vue"
import { get, set } from "lodash"
import { get, set } from "lodash-es"
import MaFormItem from "./form-item.vue"
import { maEvent } from "../js/formItemMixin.js"
import { runEvent } from "../js/event.js"
const props = defineProps({
component: Object,
customField: { type: String, default: undefined }
})
const formModel = inject("formModel")
const getColumnService = inject("getColumnService")
const columns = inject("columns")
const rv = async (ev, value = undefined) =>
await runEvent(props.component, ev, { formModel, getColumnService, columns }, value)
const index = props.customField ?? props.component.dataIndex
const value = ref(get(formModel.value, index))
@@ -94,23 +94,21 @@ const getComponentName = () => {
}
const handlePickerChangeEvent = (value, date, dateString) => {
maEvent.handleChangeEvent(props.component, { value, date, dateString })
rv("onPickerChange", { value, date, dateString })
}
const handlePickerSelectEvent = (value, date, dateString) => {
maEvent.customeEvent(props.component, { value, date, dateString }, "onSelect")
rv("onSelect", { value, date, dateString })
}
const handlePickerValueChangeEvent = (value, date, dateString) => {
maEvent.customeEvent(props.component, { value, date, dateString }, "onPickerValueChange")
rv("onPickerValueChange", { value, date, dateString })
}
const handlePickerOkEvent = (value, date, dateString) => {
maEvent.customeEvent(props.component, { value, date, dateString }, "onOk")
rv("onOk", { value, date, dateString })
}
maEvent.handleCommonEvent(props.component, "onCreated")
onMounted(() => {
maEvent.handleCommonEvent(props.component, "onMounted")
})
rv("onCreated")
onMounted(() => rv("onMounted"))
</script>

24
cdTMP/src/components/ma-form/formItem/form-radio.vue
View File

@@ -1,11 +1,6 @@
<!--
- 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
- @Author XXX
- @Link XXX
-->
<template>
<ma-form-item
@@ -33,8 +28,8 @@
<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 { get, set, isUndefined } from "lodash-es"
import { runEvent } from "../js/event.js"
import { handlerCascader } from "../js/networkRequest.js"
const props = defineProps({
@@ -45,7 +40,10 @@ const props = defineProps({
const formModel = inject("formModel")
const dictList = inject("dictList")
const formLoading = inject("formLoading")
const getColumnService = inject("getColumnService")
const columns = inject("columns")
const rv = async (ev, value = undefined) =>
await runEvent(props.component, ev, { formModel, getColumnService, columns }, value)
const index = props.customField ?? props.component.dataIndex
const dictIndex = index.match(/^(\w+\.)\d+\./)
@@ -80,7 +78,7 @@ const handleCascaderChangeEvent = async (value) => {
const component = props.component
// 执行自定义事件
if (component.onChange) {
maEvent.handleChangeEvent(component, value)
rv("onChange", value)
}
// 处理联动
@@ -90,8 +88,6 @@ const handleCascaderChangeEvent = async (value) => {
nextTick(() => (formLoading.value = false))
}
maEvent.handleCommonEvent(props.component, "onCreated")
onMounted(() => {
maEvent.handleCommonEvent(props.component, "onMounted")
})
rv("onCreated")
onMounted(() => rv("onMounted"))
</script>

28
cdTMP/src/components/ma-form/formItem/form-rate.vue
View File

@@ -1,11 +1,6 @@
<!--
- 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
- @Author XXX
- @Link XXX
-->
<template>
<ma-form-item
@@ -24,8 +19,8 @@
: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')"
@change="rv('onChange', $event)"
@hover-change="rv('onHoverChange', $event)"
>
</a-rate>
</slot>
@@ -34,15 +29,20 @@
<script setup>
import { ref, inject, onMounted, watch } from "vue"
import { get, set } from "lodash"
import { get, set } from "lodash-es"
import MaFormItem from "./form-item.vue"
import { maEvent } from "../js/formItemMixin.js"
import { runEvent } from "../js/event.js"
const props = defineProps({
component: Object,
customField: { type: String, default: undefined }
})
const formModel = inject("formModel")
const getColumnService = inject("getColumnService")
const columns = inject("columns")
const rv = async (ev, value = undefined) =>
await runEvent(props.component, ev, { formModel, getColumnService, columns }, value)
const index = props.customField ?? props.component.dataIndex
const value = ref(get(formModel.value, index))
@@ -58,8 +58,6 @@ watch(
}
)
maEvent.handleCommonEvent(props.component, "onCreated")
onMounted(() => {
maEvent.handleCommonEvent(props.component, "onMounted")
})
rv("onCreated")
onMounted(() => rv("onMounted"))
</script>

23
cdTMP/src/components/ma-form/formItem/form-resource.vue
View File

@@ -1,11 +1,6 @@
<!--
- 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
- @Author XXX
- @Link XXX
-->
<template>
<ma-form-item
@@ -34,17 +29,21 @@
<script setup>
import { ref, inject, onMounted, watch } from "vue"
import { get, set } from "lodash"
import { get, set } from "lodash-es"
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"
import { runEvent } from "../js/event.js"
const props = defineProps({
component: Object,
customField: { type: String, default: undefined }
})
const formModel = inject("formModel")
const getColumnService = inject("getColumnService")
const columns = inject("columns")
const rv = async (ev, value = undefined) =>
await runEvent(props.component, ev, { formModel, getColumnService, columns }, value)
const index = props.customField ?? props.component.dataIndex
const value = ref(get(formModel.value, index))
@@ -64,8 +63,6 @@ if (props.component.multiple && !value.value) {
value.value = []
}
maEvent.handleCommonEvent(props.component, "onCreated")
onMounted(() => {
maEvent.handleCommonEvent(props.component, "onMounted")
})
rv("onCreated")
onMounted(() => rv("onMounted"))
</script>

238
cdTMP/src/components/ma-form/formItem/form-select.vue
View File

@@ -1,11 +1,6 @@
<!--
- 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
- @Author XXX
- @Link XXX
-->
<template>
<ma-form-item
@@ -16,6 +11,7 @@
<slot :name="`form-${props.component.dataIndex}`" v-bind="props.component">
<a-select
v-model:model-value="value"
:options="props.component.data ?? dictList[dictIndex] ?? []"
:multiple="props.component.multiple"
:size="props.component.size"
:allow-clear="props.component.allowClear ?? true"
@@ -23,10 +19,10 @@
:readonly="props.component.readonly"
:error="props.component.error"
:placeholder="props.component.placeholder ?? `请选择${props.component.title}`"
:loading="props.component.loading"
:loading="props.component.loading ?? loading"
:allow-search="props.component.allowSearch ?? true"
:allow-create="props.component.allowCreate"
:max-tag-count="props.component.maxTagCount"
:max-tag-count="props.component.maxTagCount ?? 1"
:bordered="props.component.bordered"
:unmount-on-close="props.component.unmountOnClose"
:popup-container="props.component.popupContainer"
@@ -34,39 +30,100 @@
: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"
:fallback-option="props.component.fallbackOption ?? handlerFallback"
:show-extra-options="props.component.showExtraOptions ?? false"
: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)"
@input-value-change="rv('onInputValueChange', $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')"
@remove="rv('onRemove', $event)"
@popup-visible-change="rv('onPopupVisibleChange', $event)"
@dropdown-scroll="rv('onDropdownScroll')"
@dropdown-reach-bottom="rv('onDropdownReachBottom')"
@exceed-limit="rv('onExceedLimit', $event)"
@search="rv('onSearch', $event)"
>
<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">
<template #header v-if="props.component.multiple && props.component.multipleTools">
<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 fill>
<a-checkbox
v-if="
isBoolean(props.component.multipleTools) || props.component.multipleTools.selectAll
"
:model-value="checkedAll"
:indeterminate="indeterminate"
:disabled="loading"
@change="handleSelectAll"
>全选/清除</a-checkbox
>
<a-button
v-if="isBoolean(props.component.multipleTools) || props.component.multipleTools.inverse"
class="ml-2"
size="mini"
type="outline"
:disabled="loading"
@click="handleInverse"
>反选</a-button
>
<a-popover
:content-style="{ padding: '0px', width: '256px' }"
position="rt"
trigger="click"
v-if="
isBoolean(props.component.multipleTools) ||
props.component.multipleTools.showSelectAll
"
>
<a-button class="ml-2" size="mini">已选 {{ value.length }}</a-button>
<template #title>
<a-space fill style="padding: 12px 12px 8px 12px">
<a-button
:disabled="loading || !value.length"
size="mini"
status="danger"
@click="value = []"
>清空 {{ value.length }}</a-button
>
<a-input-search v-model="keyword" size="mini" allow-clear />
</a-space>
</template>
<template #content>
<a-scrollbar style="height: 200px; overflow: auto">
<a-checkbox-group
v-if="
(value.length && keyword === '') ||
Object.keys(filteredOptions).length > 0
"
direction="vertical"
v-model="value"
>
<div v-for="item in filteredOptions" class="select-all-options">
<a-checkbox :value="item.value">{{ item.label }}</a-checkbox>
</div>
</a-checkbox-group>
<a-empty v-else />
</a-scrollbar>
</template>
</a-popover>
</a-space>
</div>
</template>
<template #footer v-if="props.component?.dict.pageOption ?? false">
<template #footer v-if="props.component?.dict?.openPage ?? false">
<div class="flex justify-center">
<a-pagination class="p-2" size="mini" :total="200" simple>
<a-pagination
class="p-2"
size="mini"
:total="dataTotal"
:page-size="props.component.dict.pageOption.pageSize"
:disabled="loading"
simple
@change="handlePage"
>
<template #page-item-step="{ type }">
<div>{{ type === "previous" ? "上一页" : "下一页" }}</div>
</template>
@@ -79,27 +136,41 @@
</template>
<script setup>
import { ref, inject, onMounted, nextTick, watch } from "vue"
import { ref, inject, onMounted, nextTick, watch, computed } 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"
import { get, isUndefined, set, xor, isObject, isBoolean } from "lodash-es"
import { runEvent } from "../js/event.js"
import { handlerCascader, loadDict } from "../js/networkRequest.js"
const props = defineProps({
component: Object,
customField: { type: String, default: undefined }
})
if (isObject(props.component.dict)) {
props.component.dict.pageOption = {
page: 1,
pageSize: props.component?.dict?.pageOption?.pageSize ?? props.component?.dict?.pageSize ?? 15
}
}
const formModel = inject("formModel")
const dictList = inject("dictList")
const formLoading = inject("formLoading")
const columns = inject("columns")
const getColumnService = inject("getColumnService")
const rv = async (ev, value = "") =>
await runEvent(props.component, ev, { formModel, getColumnService, columns }, value)
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, ""))
const dataTotal = ref(0)
const loading = ref(false)
const optionMap = ref({})
const keyword = ref("")
watch(
() => get(formModel.value, index),
@@ -108,13 +179,57 @@ watch(
watch(
() => value.value,
(v) => {
if (props.component.multiple) {
v.forEach((k) => {
if (!optionMap.value[k]) {
optionMap.value[k] = dictList.value[dictIndex].find((i) => i.value === k)
}
})
for (const k in optionMap.value) {
if (!v.includes(k)) delete optionMap.value[k]
}
}
set(formModel.value, index, v)
index.indexOf(".") > -1 && delete formModel.value[index]
}
)
watch(
() => dictList.value[index],
async (v) => {
dataTotal.value = v?.pageInfo?.total || 0
}
)
const checkedAll = computed(() => {
const { multiple, multipleTools } = props.component
const currentDicts = dictList.value[dictIndex]
if (multiple && multipleTools && currentDicts) {
return currentDicts.every((item) => value.value.includes(item.value))
}
return false
})
const filteredOptions = computed(() => {
const { multiple, multipleTools } = props.component
if (multiple && multipleTools && keyword.value !== "") {
const lowerCaseKeyword = keyword.value.toLowerCase()
return Object.values(optionMap.value).filter((option) => option.label.toLowerCase().includes(lowerCaseKeyword))
}
return optionMap.value
})
const indeterminate = computed(() => {
if (props.component.multiple && props.component.multipleTools && checkedAll.value == false) {
const currentDicts = dictList.value[dictIndex]
return currentDicts.some((item) => value.value.includes(item.value))
}
return false
})
if (value.value === "") {
value.value = undefined
value.value = props.component.multiple === true ? [] : ""
} else if (
!isUndefined(value.value) &&
props.component.dict &&
@@ -124,14 +239,17 @@ if (value.value === "") {
value.value = value.value + ""
}
if (isUndefined(props.component.multipleTools)) props.component.multipleTools = true
const handleSelectAll = (status) => {
if (isUndefined(value.value)) {
value.value = []
}
if (status) {
dictList.value[dictIndex].map((item) => {
value.value.push(item.value)
})
const currentSet = new Set(value.value)
const newValues = dictList.value[dictIndex]
.filter((item) => !currentSet.has(item.value))
.map((item) => item.value)
value.value = [...value.value, ...newValues]
} else {
value.value = []
}
@@ -143,15 +261,25 @@ const handleInverse = () => {
}
const ids = []
dictList.value[dictIndex].map((item) => ids.push(item.value))
value.value = xor(ids, value.value)
value.value = xor(value.value, ids)
}
const handlePage = async (page) => {
loading.value = true
props.component.dict.pageOption.page = page
await loadDict(dictList.value, props.component)
loading.value = false
}
const handlerFallback = (key) => {
return optionMap.value[key] || key
}
const handleCascaderChangeEvent = async (value) => {
formLoading.value = true
const component = props.component
// 执行自定义事件
if (component.onChange) {
maEvent.handleChangeEvent(component, value)
rv("onChange", value)
}
// 处理联动
@@ -161,8 +289,30 @@ const handleCascaderChangeEvent = async (value) => {
nextTick(() => (formLoading.value = false))
}
maEvent.handleCommonEvent(props.component, "onCreated")
onMounted(() => {
maEvent.handleCommonEvent(props.component, "onMounted")
})
rv("onCreated")
onMounted(() => {})
</script>
<style lang="less" scoped>
.arco-checkbox-group {
width: 100%;
.select-all-options {
width: 100%;
height: 36px;
padding: 0 15px 0 7px;
color: inherit;
background-color: transparent;
transition: all 0.1s cubic-bezier(0, 0, 1, 1);
::v-deep(.arco-checkbox .arco-checkbox-label) {
height: 36px;
line-height: 36px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
&:hover {
color: var(--color-text-1);
background-color: var(--color-fill-2);
}
}
}
</style>

601
cdTMP/src/components/ma-form/formItem/form-sku.vue Normal file
View File

@@ -0,0 +1,601 @@
<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">
<div style="flex: 1 1 auto" class="arco-col arco-form-item-wrapper-col">
<div class="add-spec">
<a-button type="primary" :disabled="specification.length >= 5" @click="addSpec">添加规格</a-button>
</div>
<div style="margin-top: 10px; width: 100%; height: auto">
<div class="specification">
<ul class="spec-list" v-if="specification.length">
<li class="item" v-for="(item, index) in specification" :key="index">
<div class="name">
<a-input placeholder="输入产品规格" allow-clear v-model="item.name" />
<i class="icon el-icon-circle-close" @click="delSpec(index)"></i>
</div>
<div class="values" style="display: flex">
<div style="margin-bottom: 5px">
<span
class="el-tag"
v-for="(tag, num) in item.value"
:key="tag"
style="margin: 15px 5px"
>
<a-tag closable @close="delSpecTag(index, num)">{{ tag }}</a-tag>
</span>
</div>
<div class="add-attr" style="margin: 0 0 0 5px">
<div style="display: flex">
<a-input
style="width: 120px"
allow-clear
size="small"
v-model="addValues[index]"
placeholder="请输入规格值"
/>
<a-button
type="primary"
size="mini"
@click="addSpecTag(index)"
style="margin-left: 5px"
>确定</a-button
>
</div>
</div>
</div>
</li>
</ul>
</div>
<div>
<table class="stock-table">
<thead>
<tr>
<th v-for="(item, index) in specification" :key="index">
{{ item.name }}
</th>
<th style="width: 160px">规格编码</th>
<th>成本价（元）</th>
<th>库存</th>
<th>销售价（元）</th>
<th>是否启用</th>
</tr>
</thead>
<tbody v-if="specification[0] && specification[0].value.length">
<tr :key="index" v-for="(item, index) in countSum(0)">
<template v-for="(n, specIndex) in specification.length">
<td v-if="showTda(specIndex, index)" :key="n" :rowspan="countSum(n)">
{{ getSpecAttr(specIndex, index) }}
</td>
</template>
<td>
<a-input
type="text"
:disabled="!childProductArray[index].isUse"
v-model="childProductArray[index].childProductNo"
@blur="handleNo(index)"
placeholder="输入商品规格编号"
allow-clear
/>
</td>
<td>
<a-input
type="text"
v-model.number="childProductArray[index].childProductCost"
placeholder="输入成本价"
:disabled="!childProductArray[index].isUse"
allow-clear
/>
</td>
<td>
<a-input
type="text"
v-model.number="childProductArray[index].childProductStock"
placeholder="输入库存"
:disabled="!childProductArray[index].isUse"
allow-clear
/>
</td>
<td>
<a-input
type="text"
v-model.number="childProductArray[index].childProductPrice"
placeholder="输入销售价"
:disabled="!childProductArray[index].isUse"
allow-clear
/>
</td>
<td>
<a-switch
v-model="childProductArray[index].isUse"
size="small"
@change="
(val) => {
handleUserChange(index, val)
}
"
/>
</td>
</tr>
<tr>
<td colspan="8" class="wh-foot">
<span class="label">批量设置：</span>
<ul class="set-list" v-if="isSetListShow">
<li class="set-item" @click="openBatch('childProductCost')">成本价</li>
<li class="set-item" @click="openBatch('childProductStock')">库存</li>
<li class="set-item" @click="openBatch('childProductPrice')">销售价</li>
</ul>
<div class="set-form" v-else>
<a-input-number
v-model="batchValue"
placeholder="输入要设置的数量"
class="input-demo"
:min="1"
:max="99999"
/>
<a-button
style="margin-right: 5px"
type="primary"
@click="setBatch"
size="mini"
>确定</a-button
>
<a-button type="primary" @click="cancelBatch" size="mini">取消</a-button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- <div class="example">-->
<!-- <h4 class="title">数据格式</h4>-->
<!-- <textarea class="code-area" :value="JSON.stringify(childProductArray)"></textarea>-->
<!-- </div>-->
</slot>
</ma-form-item>
</template>
<script setup>
// 引入相关vue必要的api
import { inject, onMounted, reactive, ref, watch } from "vue"
// 引入处理索引的函数
import { get, set } from "lodash-es"
// 引入 MaFormItem 组件
import MaFormItem from "./form-item.vue"
// 引入处理事件的函数
import { runEvent } from "../js/event.js"
// 组件都需要定义以下的props
const props = defineProps({
component: Object,
customField: { type: String, default: undefined }
})
// 该组件在form数据的索引名称
const index = props.customField ?? props.component.dataIndex
const formModel = inject("formModel")
const getColumnService = inject("getColumnService")
const columns = inject("columns")
const rv = async (ev, value = undefined) =>
await runEvent(props.component, ev, { formModel, getColumnService, columns }, value)
const value = ref(get(formModel.value, index))
// 规格
let specification = reactive([])
let addValues = reactive([])
let isSetListShow = ref(true)
let batchValue = ref(1)
let currentType = ref("")
let defaultProductNo = "P_"
let childProductArray = reactive([])
childProductArray = value.value && value.value.sku ? value.value.sku : reactive([])
specification = value.value && value.value.spec ? value.value.spec : reactive([])
onMounted(() => {
return childProductArray.map((item) => item.childProductSpec)
})
// 监听组件数据的改变
watch(
() => addValues,
(vl) => {
value.value = vl
let json = {
sku: childProductArray,
spec: specification
}
set(formModel.value, index, json)
},
{ immediate: true, deep: true }
)
watch(
() => specification,
(v) => {
let json = {
sku: childProductArray,
spec: specification
}
set(formModel.value, index, json)
},
{ immediate: true, deep: true }
)
watch(
() => childProductArray,
(v) => {
let json = {
sku: childProductArray,
spec: specification
}
set(formModel.value, index, json)
// set(formModel.value, index, v)
},
{ immediate: true, deep: true }
)
// 打开设置框
function openBatch(type) {
currentType.value = type
isSetListShow.value = false
}
// 批量设置
function setBatch() {
if (typeof batchValue.value === "string") {
alert("请输入正确的值")
return
}
childProductArray.forEach((item) => {
if (item.isUse) {
item[currentType.value] = batchValue.value
}
})
cancelBatch()
}
// 取消批量设置
function cancelBatch() {
batchValue.value = 1
currentType.value = ""
isSetListShow.value = true
}
// 监听规格启用操作
function handleUserChange(index, value) {
// 启用规格时，生成不重复的商品编号；关闭规格时，清空商品编号
if (value) {
childProductArray[index].childProductNo = makeProductNoNotRepet(index)
} else {
childProductArray[index].childProductNo = ""
}
}
// 监听商品编号的blur事件
function handleNo(index, attr) {
// 1.当用户输入完商品编号时，判断是否重复，如有重复，则提示客户并自动修改为不重复的商品编号
const value = childProductArray[index].childProductNo
let isRepet
childProductArray.forEach((item, i) => {
if (item.childProductNo === value && i !== index) {
isRepet = true
}
})
if (isRepet) {
alert("不允许输入重复的商品编号")
childProductArray[index].childProductNo = makeProductNoNotRepet(index)
// this.$set(this.childProductArray[index], 'childProductNo', this.)
}
}
// 生成不重复的商品编号
function makeProductNoNotRepet(index) {
let No
let i = index
let isRepet = true
while (isRepet) {
No = defaultProductNo + i
isRepet = isProductNoRepet(No)
i++
}
return No
}
// 商品编号判重
function isProductNoRepet(No) {
const result = childProductArray.findIndex((item) => {
return item.childProductNo === No
})
return result > -1
}
// 根据传入的条件，来判断是否显示该td
function showTda(specIndex, index) {
// 如果当前项目下没有属性，则不显示
if (!specification[specIndex]) {
return false
// 自己悟一下吧
} else if (index % countSum(specIndex + 1) === 0) {
return true
} else {
return false
}
}
// 添加规格属性
function addSpecTag(index) {
let str = addValues[index] || ""
if (!str.trim()) return // 判空
str = str.trim()
let arr = str.split(/\s+/) // 使用空格分割成数组
let newArr = specification[index].value.concat(arr)
newArr = Array.from(new Set(newArr)) // 去重
specification[index].value = newArr
clearAddValues(index)
handleSpecChange("add")
}
// 清空 addValues
function clearAddValues(index) {
addValues[index] = ""
}
// 删除规格属性
function delSpecTag(index, num) {
specification[index].value.splice(num, 1)
handleSpecChange("del")
}
function addSpec() {
if (specification.length < 5) {
specification.push({
name: "",
value: []
})
}
}
function delSpec(index) {
specification.splice(index, 1)
handleSpecChange("del")
}
/**
* [handleSpecChange 监听标签的变化,当添加标签时；求出每一行的hash id，再动态变更库存信息；当删除标签时，先清空已有库存信息，然后将原有库存信息暂存到stockCopy中，方便后面调用]
* @param {[string]} option ['add'|'del' 操作类型，添加或删除]
* @return {[type]} [description]
*/
function handleSpecChange(option) {
const stockCopy = JSON.parse(JSON.stringify(childProductArray))
if (option === "del") {
childProductArray = []
}
for (let i = 0; i < countSum(0); i++) {
changeStock(option, i, stockCopy)
}
}
// 获取childProductArray的childProductSpec属性
function getChildProductSpec(index) {
let obj = {}
specification.forEach((item, specIndex) => {
obj[item.name] = getSpecAttr(specIndex, index)
})
return obj
}
/*
根据传入的属性值，拿到相应规格的属性
@params
specIndex 规格项目在 advancedSpecification 中的序号
index 所有属性在遍历时的序号
*/
function getSpecAttr(specIndex, index) {
// 获取当前规格项目下的属性值
const currentValues = specification[specIndex].value
let indexCopy
// 判断是否是最后一个规格项目
if (specification[specIndex + 1] && specification[specIndex + 1].value.length) {
indexCopy = index / countSum(specIndex + 1)
} else {
indexCopy = index
}
const i = Math.floor(indexCopy % currentValues.length)
if (i.toString() !== "NaN") {
return currentValues[i]
} else {
return ""
}
}
/**
* [根据规格，动态改变库存相关信息]
* @param {[string]} option ['add'|'del' 操作类型，添加或删除]
* @param {[array]} stockCopy [库存信息的拷贝]
* @return {[type]} [description]
*/
function changeStock(option, index, stockCopy) {
let childProduct = {
childProductId: 0,
childProductSpec: getChildProductSpec(index),
childProductNo: defaultProductNo + index,
childProductStock: 0,
childProductPrice: 0,
childProductCost: 0,
isUse: true
}
const spec = childProduct.childProductSpec
if (option === "add") {
// 如果此id不存在，说明为新增属性，则向 childProductArray 中添加一条数据
// if (stockSpecArr.value.findIndex((item) => objEquals(spec, item)) === -1) {
childProductArray[index] = childProduct
// }
} else if (option === "del") {
// 因为是删除操作，理论上所有数据都能从stockCopy中获取到
let origin = ""
stockCopy.forEach((item) => {
if (objEquals(spec, item.childProductSpec)) {
origin = item
return false
}
})
childProductArray.push(origin || childProduct)
}
}
function objEquals(aObj, bObj) {
if (typeof aObj == "object" && typeof bObj == "object") {
if (aObj.constructor == Array && bObj.constructor == Array) {
return aObj.length == bObj.length && JSON.stringify(aObj) == JSON.stringify(bObj)
} else {
return Object.keys(aObj) == Object.keys(bObj) && Object.values(aObj) == Object.values(bObj)
}
return false
} else {
return aObj === bObj
}
}
/*
计算属性的乘积
@params
specIndex 规格项目在 advancedSpecification 中的序号
*/
function countSum(specIndex) {
let num = 1
specification.forEach((item, index) => {
if (index >= specIndex && item.value.length) {
num *= item.value.length
}
})
return num
}
//
// 绑定组件事件
rv("onCreated")
onMounted(() => rv("onMounted"))
</script>
<script>
export default {
name: "form-sku"
}
</script>
<style scoped>
.specification {
display: inline-block;
vertical-align: top;
width: 100%;
}
.specification .spec-list {
background-color: #fff;
border: 1px solid #d8d8d8;
padding: 10px;
margin-bottom: 20px;
}
.specification .spec-list .item {
margin-top: 5px;
}
.specification .spec-list .item:first-child {
margin-top: 0;
}
.specification .spec-list .item .name {
/*background: #f3f6fb;*/
padding: 2px 8px;
text-align: right;
overflow: hidden;
margin-bottom: 10px;
}
.specification .spec-list .item .name .icon {
display: none;
color: #929292;
cursor: pointer;
}
.specification .spec-list .item .name .icon:hover {
color: #880000;
}
.stock-table td,
.stock-table th {
padding: 4px 10px;
border-bottom: 1px solid #dfe6ec;
border-right: 1px solid #dfe6ec;
border-left: 1px solid #dfe6ec;
}
.stock-table th {
line-height: 30px;
background-color: #eef1f6;
}
.stock-table .wh-foot {
line-height: 30px;
}
.stock-table .wh-foot .label {
display: inline-block;
vertical-align: top;
}
.stock-table .wh-foot .set-list {
display: inline-block;
vertical-align: top;
font-size: 0;
}
.stock-table .wh-foot .set-list .set-item {
display: inline-block;
vertical-align: top;
margin-left: 15px;
font-size: 13px;
cursor: pointer;
color: #0088ee;
}
.stock-table .wh-foot .set-form {
display: inline-block;
margin-left: 10px;
}
</style>

25
cdTMP/src/components/ma-form/formItem/form-slider.vue
View File

@@ -1,11 +1,6 @@
<!--
- 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
- @Author XXX
- @Link XXX
-->
<template>
<ma-form-item
@@ -28,7 +23,7 @@
:marks="props.component.marks"
:show-input="props.component.showInput"
:show-ticks="props.component.showTicks"
@change="maEvent.handleChangeEvent(props.component, $event)"
@change="rv('onChange', $event)"
>
</a-slider>
</slot>
@@ -37,15 +32,19 @@
<script setup>
import { ref, inject, onMounted, watch } from "vue"
import { get, set } from "lodash"
import { get, set } from "lodash-es"
import MaFormItem from "./form-item.vue"
import { maEvent } from "../js/formItemMixin.js"
import { runEvent } from "../js/event.js"
const props = defineProps({
component: Object,
customField: { type: String, default: undefined }
})
const formModel = inject("formModel")
const getColumnService = inject("getColumnService")
const columns = inject("columns")
const rv = async (ev, value = undefined) =>
await runEvent(props.component, ev, { formModel, getColumnService, columns }, value)
const index = props.customField ?? props.component.dataIndex
const value = ref(get(formModel.value, index))
@@ -61,8 +60,6 @@ watch(
}
)
maEvent.handleCommonEvent(props.component, "onCreated")
onMounted(() => {
maEvent.handleCommonEvent(props.component, "onMounted")
})
rv("onCreated")
onMounted(() => rv("onMounted"))
</script>

45
cdTMP/src/components/ma-form/formItem/form-static-text.vue
View File

@@ -1,33 +1,34 @@
<!--
- 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
- @Author XXX
- @Link XXX
-->
<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>
<div>
<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>
</div>
</template>
<script setup>
import { onMounted } from "vue"
import { maEvent } from "../js/formItemMixin.js"
import { onMounted, inject } from "vue"
import { runEvent } from "../js/event.js"
const props = defineProps({
component: Object
})
maEvent.handleCommonEvent(props.component, "onCreated")
onMounted(() => {
maEvent.handleCommonEvent(props.component, "onMounted")
})
const formModel = inject("formModel")
const getColumnService = inject("getColumnService")
const columns = inject("columns")
const rv = async (ev, value = undefined) =>
await runEvent(props.component, ev, { formModel, getColumnService, columns }, value)
rv("onCreated")
onMounted(() => rv("onMounted"))
</script>

25
cdTMP/src/components/ma-form/formItem/form-switch.vue
View File

@@ -1,3 +1,7 @@
<!--
- @Author XXX
- @Link XXX
-->
<template>
<ma-form-item
v-if="typeof props.component.display == 'undefined' || props.component.display === true"
@@ -16,9 +20,9 @@
: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')"
@change="rv('onChange', $event)"
@focus="rv('onFocus')"
@blur="rv('onBlur')"
>
<template #checked>
<slot :name="`switchChecked-${props.component.dataIndex}`" />
@@ -39,15 +43,20 @@
<script setup>
import { ref, inject, onMounted, watch } from "vue"
import { get, set } from "lodash"
import { get, set } from "lodash-es"
import MaFormItem from "./form-item.vue"
import { maEvent } from "../js/formItemMixin.js"
import { runEvent } from "../js/event.js"
const props = defineProps({
component: Object,
customField: { type: String, default: undefined }
})
const formModel = inject("formModel")
const getColumnService = inject("getColumnService")
const columns = inject("columns")
const rv = async (ev, value = undefined) =>
await runEvent(props.component, ev, { formModel, getColumnService, columns }, value)
const index = props.customField ?? props.component.dataIndex
const value = ref(get(formModel.value, index))
@@ -63,8 +72,6 @@ watch(
}
)
maEvent.handleCommonEvent(props.component, "onCreated")
onMounted(() => {
maEvent.handleCommonEvent(props.component, "onMounted")
})
rv("onCreated")
onMounted(() => rv("onMounted"))
</script>

34
cdTMP/src/components/ma-form/formItem/form-textarea.vue
View File

@@ -1,12 +1,3 @@
<!--
- 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"
@@ -27,11 +18,11 @@
: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')"
@input="rv('onInput', $event)"
@change="rv('onChange', $event)"
@clear="rv('onClear')"
@focus="rv('onFocus')"
@blur="rv('onBlur')"
>
</a-textarea>
</slot>
@@ -40,15 +31,20 @@
<script setup>
import { ref, inject, onMounted, watch } from "vue"
import { get, set } from "lodash"
import { get, set } from "lodash-es"
import MaFormItem from "./form-item.vue"
import { maEvent } from "../js/formItemMixin.js"
import { runEvent } from "../js/event.js"
const props = defineProps({
component: Object,
customField: { type: String, default: undefined }
})
const formModel = inject("formModel")
const getColumnService = inject("getColumnService")
const columns = inject("columns")
const rv = async (ev, value = undefined) =>
await runEvent(props.component, ev, { formModel, getColumnService, columns }, value)
const index = props.customField ?? props.component.dataIndex
const value = ref(get(formModel.value, index))
@@ -64,8 +60,6 @@ watch(
}
)
maEvent.handleCommonEvent(props.component, "onCreated")
onMounted(() => {
maEvent.handleCommonEvent(props.component, "onMounted")
})
rv("onCreated")
onMounted(() => rv("onMounted"))
</script>

27
cdTMP/src/components/ma-form/formItem/form-transfer.vue
View File

@@ -1,11 +1,6 @@
<!--
- 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
- @Author XXX
- @Link XXX
-->
<template>
<ma-form-item
@@ -23,8 +18,8 @@
: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')"
@change="rv('onChange', $event)"
@select="rv('onSelect', $event)"
>
</a-transfer>
</slot>
@@ -33,9 +28,9 @@
<script setup>
import { ref, inject, onMounted, watch } from "vue"
import { get, set } from "lodash"
import { get, set } from "lodash-es"
import MaFormItem from "./form-item.vue"
import { maEvent } from "../js/formItemMixin.js"
import { runEvent } from "../js/event.js"
const props = defineProps({
component: Object,
@@ -43,7 +38,11 @@ const props = defineProps({
})
const formModel = inject("formModel")
const getColumnService = inject("getColumnService")
const columns = inject("columns")
const dictList = inject("dictList")
const rv = async (ev, value = undefined) =>
await runEvent(props.component, ev, { formModel, getColumnService, columns }, value)
const index = props.customField ?? props.component.dataIndex
const dictIndex = index.match(/^(\w+\.)\d+\./)
? index.match(/^(\w+\.)\d+\./)[1] + props.component.dataIndex
@@ -66,8 +65,6 @@ if (props.component.dict && (props.component.dict.name || props.component.dict.d
value.value = value.value + ""
}
maEvent.handleCommonEvent(props.component, "onCreated")
onMounted(() => {
maEvent.handleCommonEvent(props.component, "onMounted")
})
rv("onCreated")
onMounted(() => rv("onMounted"))
</script>

33
cdTMP/src/components/ma-form/formItem/form-tree-select.vue
View File

@@ -1,11 +1,6 @@
<!--
- 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
- @Author XXX
- @Link XXX
-->
<template>
<ma-form-item
@@ -48,10 +43,10 @@
: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')"
@change="rv('onChange', $event)"
@popup-visible-change="rv('onPopupVisibleChange', $event)"
@clear="rv('onClear')"
@search="rv('onSearch', $event)"
>
</a-tree-select>
</slot>
@@ -60,9 +55,9 @@
<script setup>
import { ref, inject, onMounted, watch } from "vue"
import { get, set } from "lodash"
import { get, set } from "lodash-es"
import MaFormItem from "./form-item.vue"
import { maEvent } from "../js/formItemMixin.js"
import { runEvent } from "../js/event.js"
import { handlerCascader } from "../js/networkRequest.js"
const props = defineProps({
@@ -71,12 +66,16 @@ const props = defineProps({
})
const formModel = inject("formModel")
const getColumnService = inject("getColumnService")
const columns = inject("columns")
const dictList = inject("dictList")
const rv = async (ev, value = undefined) =>
await runEvent(props.component, ev, { formModel, getColumnService, columns }, value)
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))
const value = ref(get(formModel.value, index) ?? "")
watch(
() => get(formModel.value, index),
@@ -94,8 +93,6 @@ if (props.component.dict && (props.component.dict.name || props.component.dict.d
value.value = value.value + ""
}
maEvent.handleCommonEvent(props.component, "onCreated")
onMounted(() => {
maEvent.handleCommonEvent(props.component, "onMounted")
})
rv("onCreated")
onMounted(() => rv("onMounted"))
</script>

23
cdTMP/src/components/ma-form/formItem/form-upload.vue
View File

@@ -1,11 +1,6 @@
<!--
- 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
- @Author XXX
- @Link XXX
-->
<template>
<ma-form-item
@@ -41,16 +36,20 @@
<script setup>
import { ref, inject, onMounted, watch } from "vue"
import { get, set } from "lodash"
import { get, set } from "lodash-es"
import MaUpload from "@/components/ma-upload/index.vue"
import MaFormItem from "./form-item.vue"
import { maEvent } from "../js/formItemMixin.js"
import { runEvent } from "../js/event.js"
const props = defineProps({
component: Object,
customField: { type: String, default: undefined }
})
const formModel = inject("formModel")
const getColumnService = inject("getColumnService")
const columns = inject("columns")
const rv = async (ev, value = undefined) =>
await runEvent(props.component, ev, { formModel, getColumnService, columns }, value)
const index = props.customField ?? props.component.dataIndex
const value = ref(get(formModel.value, index))
@@ -66,8 +65,6 @@ watch(
}
)
maEvent.handleCommonEvent(props.component, "onCreated")
onMounted(() => {
maEvent.handleCommonEvent(props.component, "onMounted")
})
rv("onCreated")
onMounted(() => rv("onMounted"))
</script>

23
cdTMP/src/components/ma-form/formItem/form-user-select.vue
View File

@@ -1,11 +1,6 @@
<!--
- 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
- @Author XXX
- @Link XXX
-->
<template>
<ma-form-item
@@ -27,16 +22,20 @@
<script setup>
import { ref, inject, onMounted, watch } from "vue"
import { get, set } from "lodash"
import { get, set } from "lodash-es"
import MaUserSelect from "@/components/ma-user/index.vue"
import MaFormItem from "./form-item.vue"
import { maEvent } from "../js/formItemMixin.js"
import { runEvent } from "../js/event.js"
const props = defineProps({
component: Object,
customField: { type: String, default: undefined }
})
const formModel = inject("formModel")
const getColumnService = inject("getColumnService")
const columns = inject("columns")
const rv = async (ev, value = undefined) =>
await runEvent(props.component, ev, { formModel, getColumnService, columns }, value)
const index = props.customField ?? props.component.dataIndex
const value = ref(get(formModel.value, index))
@@ -56,8 +55,6 @@ if (props.component.multiple && !value.value) {
value.value = []
}
maEvent.handleCommonEvent(props.component, "onCreated")
onMounted(() => {
maEvent.handleCommonEvent(props.component, "onMounted")
})
rv("onCreated")
onMounted(() => rv("onMounted"))
</script>

18
cdTMP/src/components/ma-form/formItem/form-userinfo.vue
View File

@@ -1,3 +1,7 @@
<!--
- @Author XXX
- @Link XXX
-->
<template>
<ma-form-item
v-if="typeof props.component.display == 'undefined' || props.component.display === true"
@@ -12,16 +16,20 @@
<script setup>
import { ref, inject, onMounted, watch } from "vue"
import { get, set } from "lodash"
import { get, set } from "lodash-es"
import MaUserInfo from "@/components/ma-userInfo/index.vue"
import MaFormItem from "./form-item.vue"
import { maEvent } from "../js/formItemMixin.js"
import { runEvent } from "../js/event.js"
const props = defineProps({
component: Object,
customField: { type: String, default: undefined }
})
const formModel = inject("formModel")
const getColumnService = inject("getColumnService")
const columns = inject("columns")
const rv = async (ev, value = undefined) =>
await runEvent(props.component, ev, { formModel, getColumnService, columns }, value)
const index = props.customField ?? props.component.dataIndex
const value = ref(get(formModel.value, index))
@@ -37,8 +45,6 @@ watch(
}
)
maEvent.handleCommonEvent(props.component, "onCreated")
onMounted(() => {
maEvent.handleCommonEvent(props.component, "onMounted")
})
rv("onCreated")
onMounted(() => rv("onMounted"))
</script>

18
cdTMP/src/components/ma-form/formItem/form-verify-code.vue
View File

@@ -1,3 +1,7 @@
<!--
- @Author XXX
- @Link XXX
-->
<template>
<ma-form-item
v-if="typeof props.component.display == 'undefined' || props.component.display === true"
@@ -23,10 +27,10 @@
<script setup>
import { ref, inject, onMounted, watch } from "vue"
import { get, set } from "lodash"
import { get, set } from "lodash-es"
import MaVerifyCode from "@/components/ma-verifyCode/index.vue"
import MaFormItem from "./form-item.vue"
import { maEvent } from "../js/formItemMixin.js"
import { runEvent } from "../js/event.js"
const props = defineProps({
component: Object,
@@ -35,6 +39,10 @@ const props = defineProps({
const formVerifyCode = ref()
const formModel = inject("formModel")
const getColumnService = inject("getColumnService")
const columns = inject("columns")
const rv = async (ev, value = undefined) =>
await runEvent(props.component, ev, { formModel, getColumnService, columns }, value)
const index = props.customField ?? props.component.dataIndex
const value = ref(get(formModel.value, index))
@@ -63,10 +71,8 @@ component.rules = [
}
]
maEvent.handleCommonEvent(props.component, "onCreated")
onMounted(() => {
maEvent.handleCommonEvent(props.component, "onMounted")
})
rv("onCreated")
onMounted(() => rv("onMounted"))
</script>
<style scoped>

291
cdTMP/src/components/ma-form/index.vue
View File

@@ -1,6 +1,10 @@
<!--
- @Author XXX
- @Link XXX
-->
<template>
<div class="w-full">
<a-spin :loading="formLoading" :tip="options.loadingText" class="w-full">
<a-spin :loading="formLoading" :tip="options.loadingText" class="w-full ma-form-spin">
<div
v-if="options.showFormTitle"
:class="['ma-form-title', options.formTitleClass]"
@@ -19,80 +23,76 @@
: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>
<slot name="formContent">
<template v-for="(component, componentIndex) in columns" :key="componentIndex">
<component
:is="getComponentName(component?.formType ?? 'input')"
:component="component"
:ref="setDialogRef"
>
<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>
</slot>
</a-form>
</a-spin>
</div>
</template>
<script setup>
import { isNil, get } from "lodash"
import { ref, watch, provide, onMounted, nextTick, getCurrentInstance } from "vue"
import { isNil, set, get, cloneDeep } from "lodash"
import defaultOptions from "./js/defaultOptions.js"
import { getComponentName, toHump, interactiveControl, handleFlatteningColumns } from "./js/utils.js"
import {
getComponentName,
toHump,
interactiveControl,
handleFlatteningColumns,
insertGlobalCssToHead,
insertGlobalFunctionsToHtml
} from "./js/utils.js"
import { loadDict, handlerCascader } from "./js/networkRequest.js"
import arrayComponentDefault from "./js/defaultArrayComponent.js"
import ColumnService from "./js/columnService.js"
import { maEvent } from "./js/formItemMixin.js"
import { runEvent } from "./js/event.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 dialogRefs = ref({})
const flatteningColumns = ref([])
const dictList = ref({})
const cascaderList = ref([])
@@ -103,7 +103,7 @@ const props = defineProps({
columns: { type: Array },
options: { type: Object, default: {} }
})
const emit = defineEmits(["onSubmit", "update:modelValue"])
const emit = defineEmits(["submit", "update:modelValue"])
watch(
() => props.modelValue,
@@ -114,16 +114,38 @@ watch(
watch(
() => form.value,
(vl) => {
interactiveControl(vl, flatteningColumns.value)
interactiveControl(vl, flatteningColumns.value, { getColumnService, dictList })
emit("update:modelValue", vl)
},
{ deep: true }
)
const options = ref(Object.assign(JSON.parse(JSON.stringify(defaultOptions)), props.options))
const options = ref({})
// 初始化
const init = async () => {
const containerList = import.meta.glob("./containerItem/*.vue", { eager: true })
const componentList = import.meta.glob("./formItem/*.vue", { eager: true })
const _this = getCurrentInstance()?.appContext ?? undefined
if (_this) {
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)
}
}
}
formLoading.value = true
handleFlatteningColumns(props.columns, flatteningColumns.value)
@@ -137,16 +159,29 @@ const init = async () => {
// 初始化数据
flatteningColumns.value.map(async (item) => {
if (isNil(form.value[item.dataIndex]) && !item.isChildrenForm) {
if (isNil(form.value[item.dataIndex])) {
form.value[item.dataIndex] = undefined
if (arrayComponentDefault.includes(item.formType) && !item.isChildrenForm) {
if (arrayComponentDefault.includes(item.formType)) {
form.value[item.dataIndex] = []
}
}
// 处理带点的字段
if (typeof item.dataIndex === "string") {
if (item.dataIndex.indexOf(".") > -1) {
const value = cloneDeep(form.value[item.dataIndex])
delete form.value[item.dataIndex]
set(form.value, item.dataIndex, value)
}
}
// 字典
if (!cascaderList.value.includes(item.dataIndex) && item.dict) {
await loadDict(dictList.value, item)
await loadDict(dictList.value, item, options.value.sourceList, {
formModel: form.value,
getColumnService,
columns: flatteningColumns.value
})
}
// 联动
@@ -161,22 +196,31 @@ const init = async () => {
})
await nextTick(() => {
interactiveControl(form.value, flatteningColumns.value)
interactiveControl(form.value, flatteningColumns.value, { getColumnService, dictList })
formLoading.value = false
})
}
provide("options", options.value)
provide("columns", flatteningColumns)
provide("dictList", dictList)
provide("formModel", form)
provide("formLoading", formLoading)
maEvent.handleCommonEvent(options.value, "onCreated")
const setDialogRef = async (ref) => {
await nextTick(() => {
if (ref?.getDataIndex) {
dialogRefs.value[ref.getDataIndex()] = ref
if (!form.value[ref.getDataIndex()]) {
form.value[ref.getDataIndex()] = {}
}
}
})
}
onMounted(() => {
maEvent.handleCommonEvent(options.value, "onMounted")
options.value.init && init()
maEvent.handleCommonEvent(options.value, "onInit")
// maEvent.handleCommonEvent(options.value, 'onCreated')
onMounted(async () => {
updateOptions()
insertGlobalCssToHead(options.value.globalCss)
insertGlobalFunctionsToHtml(options.value.globalFunction)
// maEvent.handleCommonEvent(options.value, 'onMounted')
options.value.init && (await init())
// maEvent.handleCommonEvent(options.value, 'onInit')
})
const done = (status) => (formLoading.value = status)
@@ -192,81 +236,56 @@ const validateForm = async () => {
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 formSubmit = async () => {
if (await validateForm()) {
return false
}
emit("submit", form.value, done)
}
/**
* 获取column属性服务类
* @returns ColumnService
*/
const getColumnService = (strictMode = true) => {
return new ColumnService(
{
columns: flatteningColumns.value,
cascaders: cascaderList.value,
dicts: dictList.value,
refs: dialogRefs.value
},
strictMode
)
}
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
const updateOptions = () => (options.value = Object.assign(cloneDeep(defaultOptions), props.options))
provide("options", options.value)
provide("columns", flatteningColumns)
provide("dictList", dictList)
provide("formModel", form)
provide("formLoading", formLoading)
provide("getColumnService", getColumnService)
provide("maFormRef", maFormRef)
defineExpose({
init,
getFormRef,
getColumns,
getDictList,
getDictService,
getColumnService,
getCascaderList,
getFormData,
validateForm,
resetForm,
clearValidate
clearValidate,
updateOptions
})
</script>

175
cdTMP/src/components/ma-form/js/columnService.js Normal file
View File

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

10
cdTMP/src/components/ma-form/js/defaultOptions.js
View File

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

39
cdTMP/src/components/ma-form/js/event.js Normal file
View File

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

2
cdTMP/src/components/ma-form/js/formItemMixin.js
View File

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

200
cdTMP/src/components/ma-form/js/networkRequest.js
View File

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

64
cdTMP/src/components/ma-form/js/utils.js
View File

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