修改产品部分内容--功能特点

src/views/product/components/EditDialog.vue

@@ -11,18 +11,38 @@
                             </a-form-item>
                         </a-col>
                         <a-col :span="24">
-                            <a-form-item :label="'产品类别名称'" name="title">
+                            <a-form-item :label="'产品类别名称'" name="categoryID">
-                                <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-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>-->
+                                <!--&lt;!&ndash;                                    <a-button type="primary" @click="childOpen = true">新增适用对象</a-button>&ndash;&gt;-->
+                                <!--                                </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>-->
-<!--&lt;!&ndash;                                    <a-button type="primary" @click="childOpen = true">新增适用对象</a-button>&ndash;&gt;-->
-<!--                                </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()
+        showSpining();
-        const responses = await Promise.all(
-            configs.map(({ apiFunc }) => apiFunc({ pageSize: 999, page: 1 }))
-        )
-        configs.forEach(({ nameKey, resultKey }, index) => {
-            const { success, data } = responses[index]
 
-            if (config('http.code.success') === success) {
+        const { success: catSuccess, data: catData } = await apis.products.getProductCategory({ pageSize: 999, page: 1 });
-                const mapped = data.map(item => {
+        if (config('http.code.success') === catSuccess) {
-                    return {
+            categoryList.value = catData
-                        value: item.value,
+                .filter(item => item.status === 'enabled')
-                        children:item.children,
+                .map(item => ({ code: item.id, name: item.name }));
-                        [resultKey]: item.label,// e.g. item['label']
+        }
-                    }
-                })
 
-                areaList.value = [...areaList.value, ...mapped]
+        const { success: prodSuccess, data: prodData } = await apis.products.getProductObj({ pageSize: 999, page: 1 });
-                console.log(areaList.value)
+        if (config('http.code.success') === prodSuccess) {
-                console.log('after merge:', areaList.value)
+            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:[{
+                data:[
-                        msg:[''],
+                    // { 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:[{
+            data:[
-                msg:[''],
+                // {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:[{
+                    data:[
-                        msg:[''],
+                        // { msg:[''], }
-                    }]
+                    ]
                 }],
                 images: [
                     ...(Array.isArray(formData.value.mainImage)

src/views/product/index.vue

@@ -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: '产品类别ID', dataIndex: 'categoryID', key: 'categoryID', width: 120 },
-    { title: '原料组成', dataIndex: 'compose', key: 'compose', 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',