temp
/
pc_vue_admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

基础资料模块优化

main
GaoF 2024-08-01 17:09:22 +08:00
parent 090141d19f
commit 85eda80c13
14 changed files with 436 additions and 358 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/OperationalInformation/index.vue
View File

@ -59,6 +59,7 @@
watch( watch(
() => props.detailData, () => props.detailData,
() => { () => {
console.log(props.detailData, 'props.detailData')
detailDataProps.value = props.detailData detailDataProps.value = props.detailData
}, },
{ {

71
src/hook/useFormHandler.js
View File

@ -1,6 +1,7 @@
import { useRoute, useRouter } from 'vue-router' import { useRoute, useRouter } from 'vue-router'
import { cloneDeep } from 'lodash-es' import { cloneDeep } from 'lodash-es'
import useTabs from '@/utils/useTabs' import useTabs from '@/utils/useTabs'
import extendFieldApi from '@/api/base/extendfield/extendFieldApi'
/** /**
* 使用表单处理程序封装表单的提交、初始化和回退逻辑。 * 使用表单处理程序封装表单的提交、初始化和回退逻辑。
@ -13,7 +14,14 @@ export default function useFormHandler(formItems, api) {
const state = reactive({ const state = reactive({
PAGE_TYPE: '' PAGE_TYPE: ''
}) })
let detailData = reactive({}) let extendFormData = ref({})
// 操作信息
let inform = reactive({
createUserName: '',
createTime: '',
updateUserName: '',
updateTime: ''
})
// 初始化表单数据对象 // 初始化表单数据对象
let formData = reactive({}) let formData = reactive({})
@ -86,7 +94,7 @@ export default function useFormHandler(formItems, api) {
*/ */
const handleBack = () => { const handleBack = () => {
useTabs.close(route) useTabs.close(route)
router.go(-1) // 优化为通用的返回上一页操作 // router.push('/basicData/unit') // 优化为通用的返回上一页操作
} }
/** /**
@ -107,6 +115,17 @@ export default function useFormHandler(formItems, api) {
} }
} }
// 操作信息
for (let key in inform) {
if (res[key] !== undefined) {
inform[key] = res[key]
}
}
// 扩展字段
if (res.extJson) {
extendFormData.value = JSON.parse(res.extJson)
}
return res return res
} catch (error) { } catch (error) {
console.error('API request failed:', error) console.error('API request failed:', error)
@ -114,12 +133,58 @@ export default function useFormHandler(formItems, api) {
} }
} }
/**
* 扩展字段。
*/
const getExtendField = async (model) => {
let extendData = []
// 字段扩展
const resExtendField = await extendFieldApi.extendFieldTypeList({
enabledState: 'ENABLE',
model
})
console.log(resExtendField, 'resExtendField')
if (resExtendField) {
resExtendField.forEach((item) => {
const showValues = JSON.parse(item.showValues)
let options = []
showValues.forEach((value) => {
options.push({
value: value.name,
label: value.name
})
})
extendData.push({
label: item.name,
name: item.fieldName,
type: item.showType,
span: 6,
attrs: {
placeholder: '请输入内容',
options
}
})
})
extendData.forEach((item) => {
if (item.fieldName) extendFormData.value[item.fieldName] = null
})
return extendData
} else {
return []
}
}
// 返回包含各种处理函数和状态的对象 // 返回包含各种处理函数和状态的对象
return { return {
formData, formData,
submitLoading, submitLoading,
formRefs, formRefs,
detailData, inform,
extendFormData,
getExtendField,
onSubmit, onSubmit,
handleBack, handleBack,
fetchData, fetchData,

2
src/layout/components/tags.vue
View File

@ -110,7 +110,7 @@
activeKey.value = to.path activeKey.value = to.path
if (to.name) { if (to.name) {
vStore.pushViewTags(to) vStore.pushViewTags(to)
// kStore.pushKeepLive(to.name) kStore.pushKeepLive(to.name)
} }
if (tagList.value.length - 1 > maxTabs.value) { if (tagList.value.length - 1 > maxTabs.value) {
const firstTag = tagList.value[1] const firstTag = tagList.value[1]

2
src/utils/useTabs.js
View File

@ -31,12 +31,12 @@ export default {
close(tag) { close(tag) {
const route = tag || router.currentRoute.value const route = tag || router.currentRoute.value
const store = viewTagsStore() const store = viewTagsStore()
console.log(route, 'route')
store.removeViewTags(route) store.removeViewTags(route)
iframeStore().removeIframeList(route) iframeStore().removeIframeList(route)
keepAliveStore().removeKeepLive(route.name) keepAliveStore().removeKeepLive(route.name)
const tagList = store.viewTags const tagList = store.viewTags
const latestView = tagList.slice(-1)[0] const latestView = tagList.slice(-1)[0]
console.log(latestView, 'route')
if (latestView) { if (latestView) {
router.push(latestView) router.push(latestView)
} else { } else {

49
src/views/basicData/brand/detail/index.vue
View File

@ -15,21 +15,24 @@
/> />
</a-card> </a-card>
<!-- <a-card :bordered="false" title="域名" class="mt-4"> <a-card :bordered="false" class="mt-4" style="height: 100%">
<a-button @click="handleAddDomain">新增域名</a-button> <a-tabs v-model:activeKey="activeKey">
<a-form class="mt-8" :model="domainFormData" :rules="domainFormRules" ref="domainFormRef"> <a-tab-pane key="1" tab="扩展字段" forceRender v-if="extendData.length > 0">
<a-row v-for="(item, index) in domainFormItems" :key="item.value" :gutter="12"> <DynamicForm
<a-col :span="12"> :allDisabled="route.query.type === 'SEARCH'"
<a-form-item :label="item.label" :name="item.value" :props="item.value"> :formItems="extendData"
<a-input v-model:value="domainFormData[item.value]" placeholder="请输入域名" /> :model="extendFormData"
</a-form-item> :rules="formRules"
</a-col> v-if="extendData.length > 0"
<a-col :span="12" v-if="index > 0"> />
<a-button @click="handleDelDomain(index)">删除</a-button>
</a-col> <a-empty v-else />
</a-row> </a-tab-pane>
</a-form> <a-tab-pane key="2" tab="操作信息" v-if="route.query.type !== 'ADD'">
</a-card>--> <OperationalInformation :detailData="inform" :colSpan="6"></OperationalInformation>
</a-tab-pane>
</a-tabs>
</a-card>
</template> </template>
<script setup name="brandDetail"> <script setup name="brandDetail">
@ -128,11 +131,15 @@
]) ])
const formRef1 = ref(null) const formRef1 = ref(null)
let extendData = ref([])
let { formData, formRefs, onSubmit, handleBack, fetchData } = useFormHandler(brandFormItems, { let { formData, formRefs, inform, extendFormData, onSubmit, handleBack, fetchData, getExtendField } = useFormHandler(
submitForm: sysBrandApi.sysBrandSubmitForm, brandFormItems,
getDetail: sysBrandApi.sysBrandDetail {
}) submitForm: sysBrandApi.sysBrandSubmitForm,
getDetail: sysBrandApi.sysBrandDetail
}
)
onMounted(async () => { onMounted(async () => {
formRefs.value = [formRef1.value] formRefs.value = [formRef1.value]
@ -149,6 +156,8 @@
} }
}) })
}) })
extendData.value = await getExtendField('MATERIAL')
}) })
// 添加域名 // 添加域名
@ -183,4 +192,6 @@
const onSubmitForm = async () => { const onSubmitForm = async () => {
await onSubmit({ ...formData, ...domainFormData }) await onSubmit({ ...formData, ...domainFormData })
} }
let activeKey = ref('1')
</script> </script>

10
src/views/basicData/client/detail/CustomerCategoryForm.vue
View File

@ -42,6 +42,9 @@
</a-col> </a-col>
</a-row> </a-row>
</a-form> </a-form>
<OperationalInformation v-if="route.query.id" :detailData="formData" :colSpan="12"></OperationalInformation>
<template #footer> <template #footer>
<a-button style="margin-right: 8px" @click="onClose">关闭</a-button> <a-button style="margin-right: 8px" @click="onClose">关闭</a-button>
<a-button type="primary" @click="onSubmit" :loading="submitLoading">保存</a-button> <a-button type="primary" @click="onSubmit" :loading="submitLoading">保存</a-button>
@ -54,6 +57,9 @@
import { cloneDeep } from 'lodash-es' import { cloneDeep } from 'lodash-es'
import { required } from '@/utils/formRules' import { required } from '@/utils/formRules'
import customerCategoryApi from '@/api/base/customer/customerCategoryApi' import customerCategoryApi from '@/api/base/customer/customerCategoryApi'
import { useRoute } from 'vue-router'
const route = useRoute()
// 抽屉状态 // 抽屉状态
const visible = ref(false) const visible = ref(false)
const emit = defineEmits({ successful: null }) const emit = defineEmits({ successful: null })
@ -74,7 +80,7 @@
} }
enabledStateOptions.value = tool.dictList('COMMON_STATUS') enabledStateOptions.value = tool.dictList('COMMON_STATUS')
customerCategoryApi.customerCategoryTree().then(res => { customerCategoryApi.customerCategoryTree().then((res) => {
parentTreeData.value = [ parentTreeData.value = [
{ {
id: 0, id: 0,
@ -94,7 +100,7 @@
// 默认要校验的 // 默认要校验的
const formRules = { const formRules = {
name: [required('请输入名称')], name: [required('请输入名称')],
parentId: [required('请选择上级')], parentId: [required('请选择上级')]
} }
// 验证并提交数据 // 验证并提交数据
const onSubmit = () => { const onSubmit = () => {

2
src/views/basicData/client/detail/index.vue
View File

@ -71,7 +71,7 @@
</a-table> </a-table>
</a-tab-pane> </a-tab-pane>
<a-tab-pane key="3" tab="操作信息" v-if="route.query.type !== 'ADD'"> <a-tab-pane key="3" tab="操作信息" v-if="route.query.type !== 'ADD'">
<OperationalInformation :detailData="detailData" :colSpan="12"></OperationalInformation> <OperationalInformation :detailData="detailData" :colSpan="6"></OperationalInformation>
</a-tab-pane> </a-tab-pane>
</a-tabs> </a-tabs>
</a-card> </a-card>

91
src/views/basicData/materiel/detail/index.vue
View File

@ -15,9 +15,9 @@
/> />
</a-card> </a-card>
<a-card :bordered="false" class="mt-4"> <a-card :bordered="false" class="mt-4" style="height: 100%">
<a-tabs v-model:activeKey="activeKey"> <a-tabs v-model:activeKey="activeKey">
<a-tab-pane key="1" tab="基本信息"> <a-tab-pane key="1" tab="基本信息" forceRender>
<DynamicForm <DynamicForm
:allDisabled="route.query.type === 'SEARCH'" :allDisabled="route.query.type === 'SEARCH'"
:formItems="baseFormItems" :formItems="baseFormItems"
@ -26,7 +26,7 @@
ref="formRef2" ref="formRef2"
/> />
</a-tab-pane> </a-tab-pane>
<a-tab-pane key="2" tab="单位信息" force-render> <a-tab-pane key="2" tab="单位信息" forceRender>
<DynamicForm <DynamicForm
:allDisabled="route.query.type === 'SEARCH'" :allDisabled="route.query.type === 'SEARCH'"
:formItems="unitFormItems" :formItems="unitFormItems"
@ -35,7 +35,7 @@
ref="formRef3" ref="formRef3"
/> />
</a-tab-pane> </a-tab-pane>
<a-tab-pane key="3" tab="包装关系" force-render> <a-tab-pane key="3" tab="包装关系" forceRender>
<a-table :dataSource="dataSource" :columns="columns"> <a-table :dataSource="dataSource" :columns="columns">
<template #bodyCell="{ column, record }"> <template #bodyCell="{ column, record }">
<template v-if="column.dataIndex === 'enabledState'"> <template v-if="column.dataIndex === 'enabledState'">
@ -74,7 +74,7 @@
</template> </template>
</a-table> </a-table>
</a-tab-pane> </a-tab-pane>
<a-tab-pane key="4" tab="商品推广" force-render> <a-tab-pane key="4" tab="商品推广" forceRender>
<a-form :model="productFormData" class="w-1/3" layout="vertical"> <a-form :model="productFormData" class="w-1/3" layout="vertical">
<a-form-item label="是否启用" name="promoteEnabledState"> <a-form-item label="是否启用" name="promoteEnabledState">
<a-select <a-select
@ -106,21 +106,19 @@
</a-form-item> </a-form-item>
</a-form> </a-form>
</a-tab-pane> </a-tab-pane>
<a-tab-pane key="5" tab="扩展字段" force-render> <a-tab-pane key="5" tab="扩展字段" forceRender v-if="extendData.length > 0">
<a-form layout="vertical" :model="extendFormData"> <DynamicForm
<a-row :gutter="16"> :allDisabled="route.query.type === 'SEARCH'"
<a-col :span="item.span || 6" v-for="(item, index) in extendData" :key="index"> :formItems="extendData"
<a-form-item :label="item.label" :name="item.name" :rules="item.rules"> :model="extendFormData"
<component :rules="formRules"
style="width: 100%" v-if="extendData.length > 0"
:is="item.type" />
v-model:value="extendFormData[item.name]"
v-bind="item.attrs" <a-empty v-else />
/> </a-tab-pane>
</a-form-item> <a-tab-pane key="6" tab="操作信息" v-if="route.query.type !== 'ADD'">
</a-col> <OperationalInformation :detailData="inform" :colSpan="6"></OperationalInformation>
</a-row>
</a-form>
</a-tab-pane> </a-tab-pane>
</a-tabs> </a-tabs>
</a-card> </a-card>
@ -129,7 +127,6 @@
<script setup name="materielDetail"> <script setup name="materielDetail">
import unitGroupsApi from '@/api/base/unit/unitGroupsApi' import unitGroupsApi from '@/api/base/unit/unitGroupsApi'
import unitApi from '@/api/base/unit/unitApi' import unitApi from '@/api/base/unit/unitApi'
import extendFieldApi from '@/api/base/extendfield/extendFieldApi'
import { required } from '@/utils/formRules' import { required } from '@/utils/formRules'
import useFormHandler from '@/hook/useFormHandler' import useFormHandler from '@/hook/useFormHandler'
@ -151,7 +148,6 @@
promoteEnabledState: 'ENABLE' promoteEnabledState: 'ENABLE'
}) })
let extendData = ref([]) // 扩展字段 let extendData = ref([]) // 扩展字段
let extendFormData = ref({}) // 扩展字段
onMounted(async () => { onMounted(async () => {
formRefs.value = [formRef1.value, formRef2.value, formRef3.value] formRefs.value = [formRef1.value, formRef2.value, formRef3.value]
@ -176,11 +172,6 @@
unitOptions = unitList unitOptions = unitList
dataSource.value = packageData dataSource.value = packageData
if (res.extJson) {
extendFormData.value = JSON.parse(res.extJson)
console.log(extendFormData.value, 'extendFormData.value')
}
} }
}) })
@ -234,40 +225,7 @@
} }
}) })
// 字段扩展 extendData.value = await getExtendField('MATERIAL')
extendFieldApi
.extendFieldTypeList({
enabledState: 'ENABLE',
model: 'MATERIAL'
})
.then((res) => {
if (res) {
res.forEach((item) => {
const showValues = JSON.parse(item.showValues)
let options = []
showValues.forEach((value) => {
options.push({
value: value.name,
label: value.name
})
})
extendData.value.push({
label: item.name,
name: item.fieldName,
type: item.showType,
span: 6,
attrs: {
placeholder: '请输入内容',
options
}
})
})
extendData.value.forEach((item) => {
if (item.fieldName) extendFormData.value[item.fieldName] = null
})
}
})
}) })
let activeKey = ref('1') let activeKey = ref('1')
@ -298,13 +256,12 @@
} }
const onSubmitForm = () => { const onSubmitForm = () => {
console.log(extendFormData.value, 'extendFormData.value')
onSubmit({ onSubmit({
isDeep: true, isDeep: true,
materialPackageList: dataSource.value, materialPackageList: dataSource.value,
...formData, ...formData,
...productFormData.value, ...productFormData.value,
extJson: JSON.stringify(extendFormData.value) extJson: JSON.stringify(extendFormData.value) || ''
}) })
} }
@ -711,11 +668,9 @@
} }
] ]
const { formData, formRefs, onSubmit, handleBack, fetchData } = useFormHandler( const { formData, formRefs, inform, extendFormData, onSubmit, handleBack, fetchData, getExtendField } =
[...materialFormItems, ...baseFormItems, ...unitFormItems], useFormHandler([...materialFormItems, ...baseFormItems, ...unitFormItems], {
{
submitForm: materialApi.materialSubmitForm, submitForm: materialApi.materialSubmitForm,
getDetail: materialApi.materialDetail getDetail: materialApi.materialDetail
} })
)
</script> </script>

48
src/views/basicData/publicAccount/detail/index.vue
View File

@ -15,18 +15,32 @@
/> />
</a-card> </a-card>
<a-card :bordered="false" title="基本信息" class="mt-4"> <a-card :bordered="false" class="mt-4" style="height: 100%">
<DynamicForm <a-tabs v-model:activeKey="activeKey">
:allDisabled="route.query.type === 'SEARCH'" <a-tab-pane key="1" tab="基本信息" forceRender>
:formItems="basicInfoFormItems" <DynamicForm
:model="formData" :allDisabled="route.query.type === 'SEARCH'"
:rules="formRules" :formItems="basicInfoFormItems"
ref="formRef2" :model="formData"
/> :rules="formRules"
</a-card> ref="formRef2"
/>
</a-tab-pane>
<a-tab-pane key="2" tab="扩展字段" forceRender v-if="extendData.length > 0">
<DynamicForm
:allDisabled="route.query.type === 'SEARCH'"
:formItems="extendData"
:model="extendFormData"
:rules="formRules"
v-if="extendData.length > 0"
/>
<a-card :bordered="false" title="操作信息" class="mt-4" v-if="route.query.type !== 'ADD'"> <a-empty v-else />
<OperationalInformation :detailData="detailData" :colSpan="12"></OperationalInformation> </a-tab-pane>
<a-tab-pane key="3" tab="操作信息" v-if="route.query.type !== 'ADD'">
<OperationalInformation :detailData="inform" :colSpan="6"></OperationalInformation>
</a-tab-pane>
</a-tabs>
</a-card> </a-card>
</template> </template>
@ -48,14 +62,14 @@
const formRef1 = ref(null) const formRef1 = ref(null)
const formRef2 = ref(null) const formRef2 = ref(null)
let detailData = ref({}) let detailData = ref({})
let activeKey = ref('1')
let extendData = ref([])
const { formData, formRefs, onSubmit, handleBack, fetchData } = useFormHandler( const { formData, formRefs, inform, extendFormData, onSubmit, handleBack, fetchData, getExtendField } =
[...officialAccountFormItems, ...basicInfoFormItems], useFormHandler([...officialAccountFormItems, ...basicInfoFormItems], {
{
submitForm: officialAccountApi.officialAccountSubmitForm, submitForm: officialAccountApi.officialAccountSubmitForm,
getDetail: officialAccountApi.officialAccountDetail getDetail: officialAccountApi.officialAccountDetail
} })
)
onMounted(async () => { onMounted(async () => {
formRefs.value = [formRef1.value, formRef2.value] formRefs.value = [formRef1.value, formRef2.value]
@ -64,5 +78,7 @@
detailData.value = res detailData.value = res
} }
}) })
extendData.value = await getExtendField('MATERIAL')
}) })
</script> </script>

57
src/views/basicData/stash/detail/index.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<a-page-header style="padding: 10px; font-size: 20px" @back="handleBack"> <a-page-header style="padding: 10px; font-size: 20px" @back="handleBack">
<template #extra> <template #extra>
<a-button v-if="route.query.type !== 'SEARCH'" key="1" type="primary" @click="onSubmit">保存</a-button> <a-button v-if="route.query.type !== 'SEARCH'" key="1" type="primary" @click="onSubmitForm">保存</a-button>
</template> </template>
</a-page-header> </a-page-header>
@ -15,7 +15,7 @@
/> />
</a-card> </a-card>
<a-card :bordered="false" class="mt-4"> <a-card :bordered="false" class="mt-4" style="height: 100%">
<a-tabs v-model:activeKey="activeKey"> <a-tabs v-model:activeKey="activeKey">
<a-tab-pane key="1" tab="基本信息"> <a-tab-pane key="1" tab="基本信息">
<DynamicForm <DynamicForm
@ -26,6 +26,20 @@
ref="formRef2" ref="formRef2"
/> />
</a-tab-pane> </a-tab-pane>
<a-tab-pane key="2" tab="扩展字段" forceRender v-if="extendData.length > 0">
<DynamicForm
:allDisabled="route.query.type === 'SEARCH'"
:formItems="extendData"
:model="extendFormData"
:rules="formRules"
v-if="extendData.length > 0"
/>
<a-empty v-else />
</a-tab-pane>
<a-tab-pane key="3" tab="操作信息" v-if="route.query.type !== 'ADD'">
<OperationalInformation :detailData="inform" :colSpan="6"></OperationalInformation>
</a-tab-pane>
</a-tabs> </a-tabs>
<user-selector-plus <user-selector-plus
ref="userSelectorPlusProRef" ref="userSelectorPlusProRef"
@ -49,6 +63,7 @@
import userCenterApi from '@/api/sys/userCenterApi' import userCenterApi from '@/api/sys/userCenterApi'
const route = useRoute() const route = useRoute()
const userSelectorPlusProRef = ref(null) const userSelectorPlusProRef = ref(null)
let extendData = ref([])
// 传递设计器需要的API // 传递设计器需要的API
const selectorApiFunction = { const selectorApiFunction = {
@ -219,13 +234,19 @@
const formRef1 = ref(null) const formRef1 = ref(null)
const formRef2 = ref(null) const formRef2 = ref(null)
const { state, formData, submitLoading, formRefs, onSubmit, handleBack, fetchData } = useFormHandler( const { inform, formData, extendFormData, formRefs, onSubmit, handleBack, fetchData, getExtendField } =
[...officialAccountFormItems, ...baseFormItems], useFormHandler([...officialAccountFormItems, ...baseFormItems], {
{
submitForm: sysStoreApi.sysStoreSubmitForm, submitForm: sysStoreApi.sysStoreSubmitForm,
getDetail: sysStoreApi.sysStoreDetail getDetail: sysStoreApi.sysStoreDetail
} })
)
const onSubmitForm = () => {
onSubmit({
isDeep: true,
...formData,
extJson: JSON.stringify(extendFormData.value) || ''
})
}
onMounted(async () => { onMounted(async () => {
formRefs.value = [formRef1.value, formRef2.value] formRefs.value = [formRef1.value, formRef2.value]
@ -248,27 +269,9 @@
] ]
} }
}) })
extendData.value = await getExtendField('MATERIAL')
}) })
let activeKey = ref('1') let activeKey = ref('1')
const data = ref([
{ id: '1', name: 'John', age: 28 },
{ id: '2', name: 'Jane', age: 22 }
])
const columns = [
{
title: '上游仓库代码',
dataIndex: 'name',
editable: true,
dataType: 'text' // 或 'number', 'select'
},
{
title: '上游仓库名称',
dataIndex: 'age',
editable: true,
dataType: 'number'
}
]
</script> </script>

41
src/views/basicData/unit/columns/unitColumns.js
View File

@ -2,37 +2,62 @@ export const unitColumns = [
{ {
title: '编码', title: '编码',
dataIndex: 'number', dataIndex: 'number',
width: 150, width: 200,
resizable: true, resizable: true,
align: 'center' align: 'center',
sorter: true,
sortDirections: ['descend', 'ascend'],
ellipsis: true
}, },
{ {
title: '名称', title: '名称',
dataIndex: 'name', dataIndex: 'name',
width: 150, width: 200,
resizable: true, resizable: true,
align: 'center' align: 'center',
ellipsis: true
},
{
title: '单位组',
dataIndex: 'unitGroupName',
width: 200,
resizable: true,
align: 'center',
ellipsis: true
}, },
{ {
title: '可用状态', title: '可用状态',
dataIndex: 'enabledState', dataIndex: 'enabledState',
width: 150, width: 200,
resizable: true, resizable: true,
align: 'center' align: 'center',
ellipsis: true
}, },
{ {
title: '换算率', title: '换算率',
dataIndex: 'rate', dataIndex: 'rate',
width: 200, width: 200,
resizable: true, resizable: true,
align: 'center' align: 'center',
ellipsis: true
}, },
{ {
title: '是否基本单位', title: '是否基本单位',
dataIndex: 'isBase', dataIndex: 'isBase',
width: 200, width: 200,
resizable: true, resizable: true,
align: 'center' align: 'center',
ellipsis: true
},
{
title: '换算率',
dataIndex: 'rate',
width: 200,
resizable: true,
align: 'center',
sorter: true,
sortDirections: ['descend', 'ascend'],
ellipsis: true
} }
] ]

4
src/views/basicData/unit/detail/UnitGroupForm.vue
View File

@ -21,6 +21,7 @@
/> />
</a-form-item> </a-form-item>
</a-form> </a-form>
<OperationalInformation :detailData="formData" :colSpan="12" v-if="formData.id"></OperationalInformation>
<template #footer> <template #footer>
<a-button style="margin-right: 8px" @click="onClose">关闭</a-button> <a-button style="margin-right: 8px" @click="onClose">关闭</a-button>
<a-button type="primary" @click="onSubmit" :loading="submitLoading">保存</a-button> <a-button type="primary" @click="onSubmit" :loading="submitLoading">保存</a-button>
@ -41,7 +42,7 @@
const formData = ref({ const formData = ref({
number: '', number: '',
name: '', name: '',
enabledState: 'ENABLE', enabledState: 'ENABLE'
}) })
const submitLoading = ref(false) const submitLoading = ref(false)
const enabledStateOptions = ref([]) const enabledStateOptions = ref([])
@ -56,6 +57,7 @@
formData.value.number = '' formData.value.number = ''
formData.value.name = '' formData.value.name = ''
formData.value.enabledState = 'ENABLE' formData.value.enabledState = 'ENABLE'
formData.id = ''
} }
} }
// 关闭抽屉 // 关闭抽屉

261
src/views/basicData/unit/detail/index.vue
View File

@ -1,89 +1,51 @@
<template> <template>
<a-page-header style="padding: 10px; font-size: 20px" @back="handleBack"> <a-page-header style="padding: 10px; font-size: 20px" @back="handleBack">
<template #extra> <template #extra>
<a-button key="1" type="primary" @click="onSubmit">保存</a-button> <a-button key="1" type="primary" @click="onSubmitForm">保存</a-button>
</template> </template>
</a-page-header> </a-page-header>
<a-card :bordered="false" title="基本信息"> <a-card :bordered="false" title="单位信息">
<a-form ref="formRef" :model="formData" :rules="formRules" layout="vertical"> <DynamicForm
<a-row :gutter="16"> :allDisabled="route.query.type === 'SEARCH'"
<a-col :span="6"> :formItems="unitFormItems"
<a-form-item label="单位组：" name="unitGroupId"> :model="formData"
<a-select :rules="formRules"
v-model:value="formData.unitGroupId" ref="formRef1"
placeholder="请选择单位组" />
:options="unitGroupList" </a-card>
:fieldNames="{
label: 'name', <a-card :bordered="false" class="mt-4" style="height: 100%">
value: 'id' <a-tabs v-model:activeKey="activeKey">
}" <a-tab-pane key="1" tab="扩展字段" forceRender v-if="extendData.length > 0">
/> <DynamicForm
</a-form-item> :allDisabled="route.query.type === 'SEARCH'"
</a-col> :formItems="extendData"
<a-col :span="6"> :model="extendFormData"
<a-form-item label="编码：" name="number"> :rules="formRules"
<a-input v-model:value="formData.number" placeholder="请输入编码" allow-clear /> v-if="extendData.length > 0"
</a-form-item> />
</a-col>
<a-col :span="6"> <a-empty v-else />
<a-form-item label="名称：" name="name"> </a-tab-pane>
<a-input v-model:value="formData.name" placeholder="请输入名称" allow-clear /> <a-tab-pane key="2" tab="操作信息" v-if="route.query.type !== 'ADD'">
</a-form-item> <OperationalInformation :detailData="inform" :colSpan="6"></OperationalInformation>
</a-col> </a-tab-pane>
<a-col :span="6"> </a-tabs>
<a-form-item label="可用状态：">
<a-select
v-model:value="formData.enabledState"
placeholder="请选择可用状态"
:options="tool.dictList('COMMON_STATUS')"
/>
</a-form-item>
</a-col>
<a-col :span="6">
<a-form-item label="换算率：" name="rate">
<a-input v-model:value="formData.rate" placeholder="请输入换算率" allow-clear />
</a-form-item>
</a-col>
<a-col :span="6">
<a-form-item label="是否基本单位：" name="isBase">
<a-select
v-model:value="formData.isBase"
placeholder="请选择是否基本单位"
:options="tool.dictList('YES_NO')"
/>
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="备注：" name="remarks">
<a-textarea v-model:value="formData.remarks" placeholder="请输入备注" allow-clear />
</a-form-item>
</a-col>
</a-row>
</a-form>
</a-card> </a-card>
</template> </template>
<script setup name="basicDataUnitDetail"> <script setup name="basicDataUnitDetail">
import tool from '@/utils/tool' import tool from '@/utils/tool'
import { cloneDeep } from 'lodash-es'
import { required } from '@/utils/formRules' import { required } from '@/utils/formRules'
import useTabs from '@/utils/useTabs'
import router from '@/router'
import unitGroupsApi from '@/api/base/unit/unitGroupsApi' import unitGroupsApi from '@/api/base/unit/unitGroupsApi'
import unitApi from '@/api/base/unit/unitApi' import useFormHandler from '@/hook/useFormHandler'
import { useRoute } from 'vue-router' import { useRoute } from 'vue-router'
const useRouter = useRoute() import unitApi from '@/api/base/unit/unitApi'
const route = useRoute()
// 抽屉状态 const formRef1 = ref()
const visible = ref(false) let activeKey = ref('1')
const emit = defineEmits({ successful: null }) let extendData = ref([])
const formRef = ref()
// 表单数据
const formData = ref({
enabledState: 'ENABLE',
isBase: 'NO'
})
const submitLoading = ref(false)
// 默认要校验的 // 默认要校验的
const formRules = { const formRules = {
@ -91,52 +53,119 @@
name: [required('请输入名称')], name: [required('请输入名称')],
isBase: [required('请选择是否基本单位')] isBase: [required('请选择是否基本单位')]
} }
// 验证并提交数据
const onSubmit = () => { let unitGroupList = ref([])
formRef.value.validate().then(() => { onMounted(async () => {
submitLoading.value = true formRefs.value = [formRef1.value]
const formDataParam = cloneDeep(formData.value) await fetchData(route.query.type)
unitApi
.sysUnitSubmitForm(formDataParam, formDataParam.id) // 单位组
.then(() => { const unitGroupsList = await unitGroupsApi.sysUnitGroupList({
// emit('successful') enabledState: 'ENABLE'
handleBack() })
})
.finally(() => { unitGroupsList &&
submitLoading.value = false unitFormItems.forEach((item) => {
}) if (item.name === 'unitGroupId') {
item.attrs.options = unitGroupsList
}
})
extendData.value = await getExtendField('MATERIAL')
})
const onSubmitForm = () => {
onSubmit({
isDeep: true,
...formData,
extJson: JSON.stringify(extendFormData.value) || ''
}) })
} }
// 返回之后关闭标签
const handleBack = () => {
router.replace('/basicData/unit')
useTabs.close()
}
let state = reactive({ const unitFormItems = reactive([
PAGE_TYPE: '' {
}) label: '名称：',
let unitGroupList = ref([]) name: 'name',
onMounted(() => { type: 'a-input',
// 单位组 span: 6,
unitGroupsApi rules: [required('请输入名称')],
.sysUnitGroupList({ attrs: {
enabledState: 'ENABLE' placeholder: '请输入名称',
}) allowClear: true
.then((res) => { }
unitGroupList.value = res },
}) {
label: '编码：',
state.PAGE_TYPE = useRouter.query.type name: 'number',
if (state.PAGE_TYPE && state.PAGE_TYPE !== 'ADD') { type: 'a-input-number',
state.detailId = useRouter.query.id span: 6,
unitApi attrs: {
.sysUnitDetail({ placeholder: '请输入编码',
id: useRouter.query.id allowClear: true
}) }
.then((res) => { },
formData.value = res {
}) label: '单位组：',
name: 'unitGroupId',
type: 'a-select',
span: 6,
attrs: {
placeholder: '请选择可用状态',
options: [],
fieldNames: {
label: 'name',
value: 'id'
}
},
defaultValue: ''
},
{
label: '换算率：',
name: 'number',
type: 'a-input-number',
span: 6,
attrs: {
placeholder: '请输入换算率',
allowClear: true
}
},
{
label: '是否基本单位：',
name: 'isBase',
type: 'a-select',
span: 6,
attrs: {
placeholder: '请选择是否基本单位',
options: tool.dictList('YES_NO')
},
defaultValue: 'NO'
},
{
label: '可用状态：',
name: 'enabledState',
type: 'a-select',
span: 6,
attrs: {
placeholder: '请选择可用状态',
options: tool.dictList('COMMON_STATUS')
},
defaultValue: 'ENABLE'
},
{
label: '备注：',
name: 'remarks',
type: 'a-textarea',
span: 24,
attrs: {
placeholder: '请输入备注',
allowClear: true
}
} }
}) ])
const { formData, formRefs, inform, extendFormData, onSubmit, handleBack, fetchData, getExtendField } =
useFormHandler([...unitFormItems], {
submitForm: unitApi.sysUnitSubmitForm,
getDetail: unitApi.sysUnitDetail
})
</script> </script>

155
src/views/basicData/unit/index.vue
View File

@ -8,8 +8,12 @@
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :span="6"> <a-col :span="6">
<a-form-item label="状态" name="enabledState"> <a-form-item label="可用状态" name="enabledState">
<a-select v-model:value="searchFormState.enabledState" placeholder="请选择状态" :options="stateOptions" /> <a-select
v-model:value="searchFormState.enabledState"
placeholder="请选择状态"
:options="tool.dictList('COMMON_STATUS')"
/>
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :span="6"> <a-col :span="6">
@ -22,12 +26,12 @@
<a-select <a-select
v-model:value="searchFormState.isBase" v-model:value="searchFormState.isBase"
placeholder="请选择是否基本单位" placeholder="请选择是否基本单位"
:options="isBaseOptions" :options="tool.dictList('YES_NO')"
/> />
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :span="6"> <a-col :span="6">
<a-button type="primary" @click="unitTableRef.refresh()">查询</a-button> <a-button type="primary" @click="tableRef.refresh()">查询</a-button>
<a-button style="margin: 0 8px" @click="reset">重置</a-button> <a-button style="margin: 0 8px" @click="reset">重置</a-button>
<a @click="toggleAdvanced" style="margin-left: 8px"> <a @click="toggleAdvanced" style="margin-left: 8px">
{{ advanced ? '收起' : '展开' }} {{ advanced ? '收起' : '展开' }}
@ -39,7 +43,7 @@
</a-card> </a-card>
<a-card class="mt-4" :border="false" style="height: 100%"> <a-card class="mt-4" :border="false" style="height: 100%">
<a-row :gutter="30"> <a-row :gutter="24">
<a-col :span="6"> <a-col :span="6">
<s-table <s-table
ref="unitGroupTableRef" ref="unitGroupTableRef"
@ -52,6 +56,10 @@
@editRowData="handleEditRowData" @editRowData="handleEditRowData"
@deleteRowData="handleDeleteRowData" @deleteRowData="handleDeleteRowData"
:rowSelection="unitGroupRowSelection" :rowSelection="unitGroupRowSelection"
:scroll="{
x: 100,
y: 'calc(100vh - 300px)'
}"
> >
<template #operator class="table-operator"> <template #operator class="table-operator">
<span>单位组</span> <span>单位组</span>
@ -65,20 +73,21 @@
un-checked-children="停用" un-checked-children="停用"
v-model:checked="record.enabledState" v-model:checked="record.enabledState"
/>--> />-->
{{ $TOOL.dictTypeData('COMMON_STATUS', record.enabledState) }} <a-tag color="#87d068" v-if="record.enabledState === 'ENABLE'">启用</a-tag>
<a-tag color="#f50" v-if="record.enabledState === 'DISABLED'">停用</a-tag>
</template> </template>
</template> </template>
</s-table> </s-table>
</a-col> </a-col>
<a-col :span="18"> <a-col :span="18">
<s-table <s-table
ref="unitTableRef" ref="tableRef"
:columns="unitColumns" :columns="columns"
:data="loadData" :data="loadData"
:alert="options.alert.show" :alert="options.alert.show"
bordered bordered
:row-key="(record) => record.id" :row-key="(record) => record.id"
:tool-config="unitToolConfig" :tool-config="options.toolConfig"
:row-selection="options.rowSelection" :row-selection="options.rowSelection"
:scroll="{ :scroll="{
x: 100, x: 100,
@ -102,7 +111,7 @@
<xn-batch-delete <xn-batch-delete
v-if="hasPerm('customerBatchDelete')" v-if="hasPerm('customerBatchDelete')"
:selectedRowKeys="selectedRowKeys" :selectedRowKeys="selectedRowKeys"
@batchDelete="deleteBatchSysUnit" @batchDelete="deleteBatchRecords"
/> />
</a-space> </a-space>
</template> </template>
@ -171,20 +180,38 @@
<script setup name="basicDataUnit"> <script setup name="basicDataUnit">
import sysUnitApi from '@/api/base/unit/unitApi' import sysUnitApi from '@/api/base/unit/unitApi'
import sysUnitGroupsApi from '@/api/base/unit/unitGroupsApi' import sysUnitGroupsApi from '@/api/base/unit/unitGroupsApi'
import tool from '@/utils/tool'
import { cloneDeep } from 'lodash-es'
import { useNavigation } from '@/hook/useNavigation'
import { message } from 'ant-design-vue' import { message } from 'ant-design-vue'
import { unitColumns, unitGroupColumns } from '@/views/basicData/unit/columns/unitColumns' import { unitColumns, unitGroupColumns } from '@/views/basicData/unit/columns/unitColumns'
import UnitGroupForm from '@/views/basicData/unit/detail/UnitGroupForm.vue' import UnitGroupForm from '@/views/basicData/unit/detail/UnitGroupForm.vue'
import { useTableManagement } from '@/hook/useTableManagement'
import tool from '@/utils/tool'
// ------------------------------ 组件 REF 变量定义 ------------------------------ // // ------------------------------ 组件 REF 变量定义 ------------------------------ //
const searchFormRef = ref() const {
searchFormState,
tableRef,
selectedRowKeys,
columns,
loadData,
reset,
deleteBatchRecords,
options,
searchFormRef,
navigateTo,
toggleAdvanced,
advanced
} = useTableManagement(
{
page: sysUnitApi.sysUnitPage,
delete: sysUnitApi.sysUnitDelete
},
unitColumns,
['officialAccountEdit', 'officialAccountDelete']
)
const searchFormState = ref({}) // 单位组
const UnitGroupFormRef = ref() const UnitGroupFormRef = ref()
const unitTableRef = ref()
const unitToolConfig = { refresh: true, height: true, columnSetting: true, striped: false }
const unitGroupTableRef = ref() const unitGroupTableRef = ref()
const unitGroupToolConfig = { const unitGroupToolConfig = {
refresh: true, refresh: true,
@ -195,80 +222,6 @@
edit: true, edit: true,
delete: true delete: true
} }
// 查询区域显示更多控制
const advanced = ref(false)
const toggleAdvanced = () => {
advanced.value = !advanced.value
}
// 操作栏通过权限判断是否显示
if (hasPerm(['sysUnitEdit', 'sysUnitDelete'])) {
const columnsFilter = unitColumns.filter((item) => item.dataIndex === 'action')
if (columnsFilter.length === 0)
unitColumns.unshift({
title: '操作',
dataIndex: 'action',
align: 'center',
fixed: 'left',
width: 150
})
}
const selectedRowKeys = ref([])
// 列表选择配置
const options = {
// columns数字类型字段加入 needTotal: true 可以勾选自动算账
alert: {
show: true,
clear: () => {
selectedRowKeys.value = ref([])
}
},
rowSelection: {
onChange: (selectedRowKey, selectedRows) => {
selectedRowKeys.value = selectedRowKey
}
}
}
const loadData = (parameter) => {
const searchFormParam = cloneDeep(searchFormState.value)
return sysUnitApi.sysUnitPage(Object.assign(parameter, searchFormParam)).then((data) => {
return data
})
}
const loadGroupsData = (parameter) => {
return sysUnitGroupsApi.sysUnitGroupPage(Object.assign(parameter)).then((data) => {
return data
})
}
// 重置
const reset = () => {
searchFormRef.value.resetFields()
unitTableRef.value.refresh(true)
}
// 删除
const deleteSysUnit = (record) => {
let params = [
{
id: record.id
}
]
sysUnitApi.sysUnitDelete(params).then(() => {
unitTableRef.value.refresh(true)
})
}
// 批量删除
const deleteBatchSysUnit = (params) => {
sysUnitApi.sysUnitDelete(params).then(() => {
unitTableRef.value.clearRefreshSelected()
})
}
const stateOptions = tool.dictList('COMMON_STATUS')
const isBaseOptions = tool.dictList('YES_NO')
// 跳转
const { navigateTo } = useNavigation()
// 单位组
let unitGroupRecord = '' let unitGroupRecord = ''
let unitGroupSelectedRowKeys = ref([]) let unitGroupSelectedRowKeys = ref([])
const unitGroupRowSelection = { const unitGroupRowSelection = {
@ -276,13 +229,19 @@
onChange: (selectedRowKey, selectedRows) => { onChange: (selectedRowKey, selectedRows) => {
unitGroupRecord = selectedRows[0] unitGroupRecord = selectedRows[0]
searchFormState.value.unitGroupId = selectedRowKey[0] searchFormState.value.unitGroupId = selectedRowKey[0]
unitTableRef.value.refresh() tableRef.value.refresh()
unitGroupSelectedRowKeys.value = selectedRowKey unitGroupSelectedRowKeys.value = selectedRowKey
} }
} }
const loadGroupsData = (parameter) => {
return sysUnitGroupsApi.sysUnitGroupPage(Object.assign(parameter)).then((data) => {
return data
})
}
const handlePlusRowData = () => { const handlePlusRowData = () => {
unitGroupRecord = '' unitGroupRecord = ''
unitGroupTableRef.value.clearSelected() tableRef.value.clearSelected()
UnitGroupFormRef.value.onOpen() UnitGroupFormRef.value.onOpen()
} }
@ -301,15 +260,21 @@
]) ])
.then(() => { .then(() => {
searchFormState.value.unitGroupId = '' searchFormState.value.unitGroupId = ''
unitGroupTableRef.value.clearSelected() tableRef.value.clearSelected()
tableRef.value.refresh()
unitGroupTableRef.value.refresh() unitGroupTableRef.value.refresh()
unitGroupTableRef.value.clearSelected()
}) })
} }
const successful = () => { const successful = () => {
searchFormState.value.unitGroupId = '' searchFormState.value.unitGroupId = ''
unitGroupTableRef.value.refresh() tableRef.value.refresh()
unitGroupRecord = '' unitGroupRecord = ''
tableRef.value.clearSelected()
unitGroupTableRef.value.refresh()
unitGroupTableRef.value.clearSelected() unitGroupTableRef.value.clearSelected()
} }
</script> </script>