generated from Leo_Ding/web-template
修改产品部分内容--功能特点
This commit is contained in:
qingyu
parent
c514f7a1c0
commit
26fd822328
@ -11,18 +11,38 @@
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-item :label="'产品类别名称'" name="title">
|
||||
<a-input :placeholder="'请输入产品类别名称'" v-model:value="formData.title"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-item :label="'产品类别'" name="categoryID">
|
||||
<a-form-item :label="'产品类别名称'" name="categoryID">
|
||||
<!-- <a-input :placeholder="'请输入产品类别名称'" v-model:value="formData.categoryID"></a-input>-->
|
||||
<div style="display: flex;justify-content: space-between;">
|
||||
<a-select v-model:value="formData.categoryID" allowClear>
|
||||
<a-select-option v-for="item in areaList" :value="item.value">{{ item.categoryIDName }}</a-select-option>
|
||||
<a-select-option v-for="item in categoryList" :value="item.value">{{ item.categoryIDName }}</a-select-option>
|
||||
</a-select>
|
||||
<!-- <a-button type="primary" @click="childOpen = true">新增产品类别</a-button>-->
|
||||
<a-button type="primary" @click="childOpen = true">新增产品类别</a-button>
|
||||
</div>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-item :label="'适用对象'" name="target">
|
||||
<a-input :placeholder="'请输入适用对象'" v-model:value="formData.target"></a-input>
|
||||
<!-- <div style="display: flex;justify-content: space-between;">-->
|
||||
<!-- <a-select v-model:value="formData.target" allowClear>-->
|
||||
<!-- <a-select-option v-for="item in areaList" :value="item.code">{{ item.targetName }}</a-select-option>-->
|
||||
<!-- </a-select>-->
|
||||
<!--<!– <a-button type="primary" @click="childOpen = true">新增适用对象</a-button>–>-->
|
||||
<!-- </div>-->
|
||||
</a-form-item>
|
||||
<!-- <a-form-item :label="'适用对象'" name="target">-->
|
||||
<!-- <a-textarea :placeholder="'请输入岗位职责'" v-model:value="formData.target"></a-textarea>-->
|
||||
<!-- </a-form-item>-->
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-item :label="'产品适用对象类别'" name="CategoryRootID">
|
||||
<!-- <a-input :placeholder="'请输入产品类别名称'" v-model:value="formData.categoryID"></a-input>-->
|
||||
<div style="display: flex;justify-content: space-between;" >
|
||||
<a-select v-model:value="formData.CategoryRootID" allowClear>
|
||||
<a-select-option v-for="item in targetList" :value="item.value">{{ item.targetName }}</a-select-option>
|
||||
</a-select>
|
||||
<a-button type="primary" @click="childOpen = true">新增产品适用对象类别</a-button>
|
||||
</div>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
@ -31,25 +51,6 @@
|
||||
<a-textarea :placeholder="'请输入原料组成'" v-model:value="formData.compose"></a-textarea>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-item :label="'适用对象'" name="target">
|
||||
<a-input :placeholder="'请输入适用对象'" v-model:value="formData.target"></a-input>
|
||||
<!-- <div style="display: flex;justify-content: space-between;">-->
|
||||
<!-- <a-select v-model:value="formData.target" allowClear>-->
|
||||
<!-- <a-select-option v-for="item in areaList" :value="item.code">{{ item.targetName }}</a-select-option>-->
|
||||
<!-- </a-select>-->
|
||||
<!--<!– <a-button type="primary" @click="childOpen = true">新增适用对象</a-button>–>-->
|
||||
<!-- </div>-->
|
||||
</a-form-item>
|
||||
<!-- <a-form-item :label="'适用对象'" name="target">-->
|
||||
<!-- <a-textarea :placeholder="'请输入岗位职责'" v-model:value="formData.target"></a-textarea>-->
|
||||
<!-- </a-form-item>-->
|
||||
</a-col>
|
||||
<!-- <a-col :span="24">-->
|
||||
<!-- <a-form-item :label="'原料组成'" name="feature">-->
|
||||
<!-- <a-textarea :placeholder="'请输入原料组成'" v-model:value="formData.feature"></a-textarea>-->
|
||||
<!-- </a-form-item>-->
|
||||
<!-- </a-col>-->
|
||||
<a-col :span="24">
|
||||
<a-form-item
|
||||
v-for="(item, index) in formData.feature"
|
||||
@ -60,11 +61,6 @@
|
||||
placeholder="请输入功能特点标题"
|
||||
class="inputPhone"
|
||||
/>
|
||||
<!-- <a-input-->
|
||||
<!-- v-model:value="item.data"-->
|
||||
<!-- placeholder="请输入功能特点"-->
|
||||
<!-- class="inputPhone"-->
|
||||
<!-- />-->
|
||||
<a-select
|
||||
v-model:value="item.data"
|
||||
mode="tags"
|
||||
@ -86,20 +82,7 @@
|
||||
新增产品功能特点
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
|
||||
</a-col>
|
||||
<!-- <a-col :span="24">-->
|
||||
<!-- <a-form-item :label="'功能特点'" name="feature">-->
|
||||
<!-- <a-select-->
|
||||
<!-- v-model:value="formData.feature"-->
|
||||
<!-- mode="tags"-->
|
||||
<!-- :placeholder="'请输入功能特点，按回车分隔'"-->
|
||||
<!-- :token-separators="[',']"-->
|
||||
<!-- style="width: 100%;"-->
|
||||
<!-- />-->
|
||||
<!-- </a-form-item>-->
|
||||
|
||||
<!-- </a-col>-->
|
||||
<a-col :span="24">
|
||||
<a-form-item
|
||||
v-for="(item, index) in formData.standard"
|
||||
@ -170,8 +153,6 @@
|
||||
<!-- </a-form-item>-->
|
||||
|
||||
<!-- </a-col>-->
|
||||
|
||||
|
||||
<a-col :span="24">
|
||||
<a-form-item :label="'产品排序'" name="sequence">
|
||||
<a-input-number v-model:value="formData.sequence" :placeholder="'请输入排序'" style="width: 100%;" />
|
||||
@ -190,16 +171,41 @@
|
||||
</a-spin>
|
||||
<a-modal ref="modalRef" v-model:open="childOpen" :wrap-style="{ overflow: 'hidden' }" @ok="handleCombinedOk">
|
||||
<a-card class="mb-8-2">
|
||||
<a-form ref="areaFormRef" :model="formArea" :rules="areaFormRules">
|
||||
<a-form ref="areaFormRef" :model="categoryForm" :rules="areaFormRules">
|
||||
<a-row :gutter="12">
|
||||
<a-col :span="24">
|
||||
<a-form-item :label="'产品类别名称'" name="name">
|
||||
<a-input v-model:value="formArea.name" :placeholder="'请输入产品类别名称'" />
|
||||
<a-input v-model:value="categoryForm.name" :placeholder="'请输入产品类别名称'" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-item :label="'状态'" name="status" style="width: 100%;">
|
||||
<a-radio-group v-model:value="formArea.status" :options="[
|
||||
<a-radio-group v-model:value="categoryForm.status" :options="[
|
||||
{ label: '启用', value: 'enabled' },
|
||||
{ label: '停用', value: 'disabled' },
|
||||
]"></a-radio-group>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</a-card>
|
||||
<template #title>
|
||||
<div ref="modalTitleRef" style="width: 100%; cursor: move">新增产品类别</div>
|
||||
</template>
|
||||
|
||||
</a-modal>
|
||||
<a-modal ref="modalRef" v-model:open="childOpen" :wrap-style="{ overflow: 'hidden' }" @ok="handleCombinedOk">
|
||||
<a-card class="mb-8-2">
|
||||
<a-form ref="areaFormRef" :model="targetForm" :rules="areaFormRules">
|
||||
<a-row :gutter="12">
|
||||
<a-col :span="24">
|
||||
<a-form-item :label="'产品适用对象类别'" name="name">
|
||||
<a-input v-model:value="targetForm.name" :placeholder="'请输入产品类别名称'" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-item :label="'状态'" name="status" style="width: 100%;">
|
||||
<a-radio-group v-model:value="targetForm.status" :options="[
|
||||
{ label: '启用', value: 'enabled' },
|
||||
{ label: '停用', value: 'disabled' },
|
||||
]"></a-radio-group>
|
||||
@ -245,12 +251,15 @@ const okText = ref(t('button.confirm'))
|
||||
const rolesValue = ref([])
|
||||
const roles = ref([])
|
||||
const imgUrl = ref('')
|
||||
const areaList = ref([])
|
||||
const categoryList = ref([])
|
||||
const targetList = ref([])
|
||||
const images = ref([])
|
||||
const mainImage = ref([])
|
||||
const contentImage = ref([])
|
||||
const childOpen = ref(false)
|
||||
const formArea = ref({ name: '', status: 'enabled' })
|
||||
const categoryForm = ref({ name: '', status: 'enabled' })
|
||||
const targetForm = ref({ name: '', status: 'enabled' })
|
||||
formRules.value = {
|
||||
title: { required: true, message: '请输入产品类别名称' },
|
||||
code: { required: true, message: '请输入产品名称' },
|
||||
@ -267,52 +276,33 @@ formRules.value = {
|
||||
}
|
||||
const areaFormRules = {
|
||||
categoryIDName: [{ required: true, message: '请输入产品类别' }],
|
||||
// targetName: [{ required: true, message: '请输入产品适用对象' }],
|
||||
targetName: [{ required: true, message: '请输入产品适用对象' }],
|
||||
status: [{ required: true, message: '请选择状态', trigger: 'change' }],
|
||||
}
|
||||
const initDataBatch = async (configs) => {
|
||||
const initData = async () => {
|
||||
try {
|
||||
showSpining()
|
||||
const responses = await Promise.all(
|
||||
configs.map(({ apiFunc }) => apiFunc({ pageSize: 999, page: 1 }))
|
||||
)
|
||||
configs.forEach(({ nameKey, resultKey }, index) => {
|
||||
const { success, data } = responses[index]
|
||||
showSpining();
|
||||
|
||||
if (config('http.code.success') === success) {
|
||||
const mapped = data.map(item => {
|
||||
return {
|
||||
value: item.value,
|
||||
children:item.children,
|
||||
[resultKey]: item.label,// e.g. item['label']
|
||||
}
|
||||
})
|
||||
const { success: catSuccess, data: catData } = await apis.products.getProductCategory({ pageSize: 999, page: 1 });
|
||||
if (config('http.code.success') === catSuccess) {
|
||||
categoryList.value = catData
|
||||
.filter(item => item.status === 'enabled')
|
||||
.map(item => ({ code: item.id, name: item.name }));
|
||||
}
|
||||
|
||||
areaList.value = [...areaList.value, ...mapped]
|
||||
console.log(areaList.value)
|
||||
console.log('after merge:', areaList.value)
|
||||
}
|
||||
})
|
||||
const { success: prodSuccess, data: prodData } = await apis.products.getProductObj({ pageSize: 999, page: 1 });
|
||||
if (config('http.code.success') === prodSuccess) {
|
||||
targetList.value = prodData
|
||||
.filter(item => item.status === 'enabled')
|
||||
.map(item => ({ code: item.id, name: item.name }));
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
message.error({ content: error.message })
|
||||
message.error({ content: error.message });
|
||||
} finally {
|
||||
hideSpining()
|
||||
hideSpining();
|
||||
}
|
||||
}
|
||||
initDataBatch([
|
||||
{
|
||||
apiFunc: apis.products.getProductCategory,
|
||||
nameKey: 'name',
|
||||
resultKey: 'categoryIDName'
|
||||
},
|
||||
// {
|
||||
// apiFunc: apis.products.getProductObj,
|
||||
// nameKey: 'name',
|
||||
// resultKey: 'targetName'
|
||||
// }
|
||||
])
|
||||
|
||||
/**
|
||||
* 新建
|
||||
*/
|
||||
@ -329,9 +319,9 @@ function handleCreate() {
|
||||
target: '',
|
||||
feature: [{
|
||||
label:'功能特点',
|
||||
data:[{
|
||||
msg:[''],
|
||||
}]
|
||||
data:[
|
||||
// { msg:[''], }
|
||||
]
|
||||
}],
|
||||
standard: [{
|
||||
label: '',
|
||||
@ -361,11 +351,11 @@ function handleCreate() {
|
||||
const childHandleOk = async () => {
|
||||
areaFormRef.value.validateFields().then(async (values) => {
|
||||
try {
|
||||
const params = { ...formArea.value }
|
||||
const params = { ...categoryForm.value }
|
||||
const { success } = await apis.products.createProductCategory(params)
|
||||
if (success) message.success('新增成功')
|
||||
childOpen.value = false
|
||||
formArea.value = { categoryIDName: '', status: 'enabled' }
|
||||
categoryForm.value = { categoryIDName: '', status: 'enabled' }
|
||||
initData()
|
||||
} catch (error) {
|
||||
message.error(error.message)
|
||||
@ -376,11 +366,11 @@ const childHandleOk = async () => {
|
||||
const childHandleObjOk = async () => {
|
||||
areaFormRef.value.validateFields().then(async (values) => {
|
||||
try {
|
||||
const params = { ...formArea.value }
|
||||
const params = { ...targetForm.value }
|
||||
const { success } = await apis.products.createProductObj(params)
|
||||
if (success) message.success('新增成功')
|
||||
childOpen.value = false
|
||||
formArea.value = { targetName: '', status: 'enabled' }
|
||||
targetForm.value = { targetName: '', status: 'enabled' }
|
||||
initData()
|
||||
} catch (error) {
|
||||
message.error(error.message)
|
||||
@ -414,9 +404,9 @@ async function handleEdit(record = {}) {
|
||||
}],
|
||||
feature:data.feature|| [{
|
||||
label:'功能特点',
|
||||
data:[{
|
||||
msg:[''],
|
||||
}]
|
||||
data:[
|
||||
// {msg:[''],}
|
||||
]
|
||||
}],
|
||||
// images:data.images || [''],
|
||||
mainImage: data.images?[config('http.apiBasic')+data.images[0]]:[''],
|
||||
@ -447,9 +437,9 @@ function handleOk() {
|
||||
}],
|
||||
feature:formData.value.feature|| [{
|
||||
label:'功能特点',
|
||||
data:[{
|
||||
msg:[''],
|
||||
}]
|
||||
data:[
|
||||
// { msg:[''], }
|
||||
]
|
||||
}],
|
||||
images: [
|
||||
...(Array.isArray(formData.value.mainImage)
|
||||
|
||||
@ -60,17 +60,21 @@
|
||||
<div class="text-ellipsis">{{ record.categoryID }}</div>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<template v-if="column.dataIndex === 'compose'">
|
||||
<a-tooltip :title="record.compose">
|
||||
<div class="text-ellipsis">{{ record.compose }}</div>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
|
||||
<template v-if="column.dataIndex === 'target'">
|
||||
<a-tooltip :title="record.target">
|
||||
<div class="text-ellipsis">{{ record.target }}</div>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<template v-if="column.dataIndex === 'CategoryRootID'">
|
||||
<a-tooltip :title="record.CategoryRootID">
|
||||
<div class="text-ellipsis">{{ record.CategoryRootID }}</div>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<template v-if="column.dataIndex === 'compose'">
|
||||
<a-tooltip :title="record.compose">
|
||||
<div class="text-ellipsis">{{ record.compose }}</div>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<template v-if="'mainImage' === column.dataIndex">
|
||||
<a-image :width="60" :alt="column.title" :src="config('http.apiBasic') + record.mainImage || $imageErr.imgErr" />
|
||||
</template>
|
||||
@ -121,9 +125,10 @@ const { t } = useI18n() // 解构出t方法
|
||||
const columns = [
|
||||
{ title: '产品名称', dataIndex: 'code', width: 120 },
|
||||
{ title: '产品类别名称', dataIndex: 'title', width: 120 },
|
||||
{ title: '产品类别', dataIndex: 'categoryID', key: 'categoryID', width: 120 },
|
||||
{ title: '原料组成', dataIndex: 'compose', key: 'compose', width: 120 },
|
||||
{ title: '产品类别ID', dataIndex: 'categoryID', key: 'categoryID', width: 120 },
|
||||
{ title: '适用对象', dataIndex: 'target', width: 120 },
|
||||
{ title: '产品适用类别ID', dataIndex: 'CategoryRootID', key: 'CategoryRootID', width: 120 },
|
||||
{ title: '原料组成', dataIndex: 'compose', key: 'compose', width: 120 },
|
||||
{
|
||||
title: '功能特点',
|
||||
dataIndex: 'feature',
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user