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

src/views/product/components/EditDialog.vue

@@ -20,7 +20,7 @@
 <!--                                <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.value }}</a-select-option>
+                                        <a-select-option v-for="item in areaList" :value="item.value">{{ item.categoryIDName }}</a-select-option>
                                     </a-select>
 <!--                                    <a-button type="primary" @click="childOpen = true">新增产品类别</a-button>-->
                                 </div>
@@ -51,17 +51,55 @@
 <!--                            </a-form-item>-->
 <!--                        </a-col>-->
                         <a-col :span="24">
-                            <a-form-item :label="'功能特点'" name="feature">
+                            <a-form-item
-                                <a-select
+                                v-for="(item, index) in formData.feature"
-                                    v-model:value="formData.feature"
+                                :key="index"
-                                    mode="tags"
+                                :label="`产品功能特点 ${index + 1}`">
-                                    :placeholder="'请输入功能特点，按回车分隔'"
+                                <a-input
-                                    :token-separators="[',']"
+                                    v-model:value="item.label"
-                                    style="width: 100%;"
+                                    placeholder="请输入功能特点标题"
+                                    class="inputPhone"
                                 />
+<!--                                <a-input-->
+<!--                                    v-model:value="item.data"-->
+<!--                                    placeholder="请输入功能特点"-->
+<!--                                    class="inputPhone"-->
+<!--                                />-->
+                                    <a-select
+                                        v-model:value="item.data"
+                                        mode="tags"
+                                        :placeholder="'请输入功能特点，按回车分隔'"
+                                        :token-separators="[',']"
+                                        style="width: 100%;"
+                                    />
+                                <a-button
+                                    danger
+                                    @click="removeFeature(index)"
+                                    size="small"
+                                    style="margin-top: 8px">
+                                    删除
+                                </a-button>
+                            </a-form-item>
+
+                            <a-form-item>
+                                <a-button type="dashed" block @click="addFeature">
+                                    新增产品功能特点
+                                </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"
@@ -113,11 +151,11 @@
 <!--                            </a-form-item>-->
 
 <!--                        </a-col>-->
-                        <a-form-item :label="'产品主图'" name="mainImage">
+                        <a-form-item :label="'产品主图'" >
                             <gx-upload v-model="formData.mainImage" :fileNumber="1" />
                         </a-form-item>
 
-                        <a-form-item :label="'内容物图'" name="contentImage">
+                        <a-form-item :label="'内容物图'" >
                             <gx-upload v-model="formData.contentImage" :fileNumber="1" />
                         </a-form-item>
 <!--                        <a-col :span="24">-->
@@ -186,6 +224,7 @@ import apis from '@/apis'
 import { useForm, useModal,useSpining } from '@/hooks'
 import { message } from 'ant-design-vue'
 import { useI18n } from 'vue-i18n'
+
 import dayjs from 'dayjs'
 import {
     createProductCategory,
@@ -194,6 +233,7 @@ import {
     getProductObj,
     getProductsItem, updateProductsItem,
 } from '@/apis/modules/products'
+import { spliceUrl } from '@/utils/util'
 const areaFormRef = ref()
 const emit = defineEmits(['ok'])
 const { t } = useI18n() // 解构出t方法
@@ -207,6 +247,8 @@ const roles = ref([])
 const imgUrl = ref('')
 const areaList = ref([])
 const images = ref([])
+const mainImage = ref([])
+const contentImage = ref([])
 const childOpen = ref(false)
 const formArea = ref({ name: '', status: 'enabled' })
 formRules.value = {
@@ -219,7 +261,7 @@ formRules.value = {
     standard: [{ required: true, message: '请输入产品标准' }],
     images: [{ required: true, message: '请上传产品图片' }],
     mainImage: { required: true, message: '请上传产品图片' },
-    contentImage: { required: true, message: '请上传产品内容图片' },
+    contentImage: { required: false, message: '请上传产品内容图片' },
     sequence: [{ required: true, message: '请输入产品排序' }],
     status: [{ required: true, message: '请选择状态', trigger: 'change' }],
 }
@@ -247,6 +289,7 @@ const initDataBatch = async (configs) => {
                 })
 
                 areaList.value = [...areaList.value, ...mapped]
+                console.log(areaList.value)
                 console.log('after merge:', areaList.value)
             }
         })
@@ -284,7 +327,12 @@ function handleCreate() {
         categoryID: '',
         compose: '',
         target: '',
-        feature: [],
+        feature: [{
+                label:'功能特点',
+                data:[{
+                        msg:[''],
+                    }]
+            }],
         standard: [{
             label: '',
             val: '' ,
@@ -364,11 +412,19 @@ async function handleEdit(record = {}) {
             fu_hoao: '' ,
             prx: '' ,
         }],
+        feature:data.feature|| [{
+            label:'功能特点',
+            data:[{
+                msg:[''],
+            }]
+        }],
        // images:data.images || [''],
-        mainImage: data.images?.[0] || '',
+        mainImage: data.images?[config('http.apiBasic')+data.images[0]]:[''],
-        contentImage: data.images?.[1] || '',
+        contentImage:data.images?[config('http.apiBasic')+data.images[1]]:[''],
     }
-    imgUrl.value = config('http.apiBasic') + data.img
+    // imgUrl.value = config('http.apiBasic') + data.img
+    mainImage.value =  config('http.apiBasic') + data.images?.[0] ,
+    contentImage.value =  config('http.apiBasic') + data.images?.[1] ,
     console.log('编辑产品数据：',formData.value);
 }
 
@@ -382,23 +438,29 @@ function handleOk() {
             showLoading()
             const params = {
                 ...values,
-                standard:formData.value.standard||
+                standard:formData.value.standard ||
                     [{
                     label: '',
                     val: '' ,
                     fu_hoao: '' ,
                     prx: '' ,
                     }],
+                feature:formData.value.feature|| [{
+                    label:'功能特点',
+                    data:[{
+                        msg:[''],
+                    }]
+                }],
                 images: [
                     ...(Array.isArray(formData.value.mainImage)
                             ? formData.value.mainImage
                             : [formData.value.mainImage]
-                    ).filter(Boolean).map(item => String(item)),
+                    ).filter(Boolean).map(item => spliceUrl(item)),
 
                     ...(Array.isArray(formData.value.contentImage)
                             ? formData.value.contentImage
                             : [formData.value.contentImage]
-                    ).filter(Boolean).map(item => String(item))
+                    ).filter(Boolean).map(item => spliceUrl(item))
                 ],
             }
             let result = null
@@ -463,7 +525,17 @@ function removeStandard(index) {
         formData.value.standard.splice(index, 1)
     }
 }
+// 添加标准
+function addFeature() {
+    formData.value.feature.push({ label: '', value: '' })
+}
 
+// 删除标准
+function removeFeature(index) {
+    if (formData.value.feature.length > 1) {
+        formData.value.feature.splice(index, 1)
+    }
+}
 </script>
 
 <style lang="less" scoped>