修改产品部分内容

src/views/product/components/EditDialog.vue

@@ -20,9 +20,9 @@
 <!--                                <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.code">{{ item.categoryIDName }}</a-select-option>
+                                        <a-select-option v-for="item in areaList" :value="item.value">{{ item.value }}</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>
@@ -45,23 +45,23 @@
 <!--                                <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 :label="'功能特点'" name="feature">-->
+<!--                            <a-form-item :label="'原料组成'" name="feature">-->
-<!--                                <a-select-->
+<!--                                <a-textarea :placeholder="'请输入原料组成'" v-model:value="formData.feature"></a-textarea>-->
-<!--                                    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 :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"
@@ -69,12 +69,24 @@
                                     :label="`产品标准 ${index + 1}`">
                                     <a-input
                                         v-model:value="item.label"
-                                        placeholder="请输入标准名称（label）"
+                                        placeholder="请输入标准名称"
                                         class="inputPhone"
                                     />
                                     <a-input
-                                        v-model:value="item.value"
+                                        v-model:value="item.fu_hoao"
-                                        placeholder="请输入标准值（value）"
+                                        placeholder="请输入符号"
+                                        class="inputPhone"
+                                        style="margin-top: 8px"
+                                    />
+                                    <a-input
+                                        v-model:value="item.val"
+                                        placeholder="请输入标准值"
+                                        class="inputPhone"
+                                        style="margin-top: 8px"
+                                    />
+                                    <a-input
+                                        v-model:value="item.prx"
+                                        placeholder="请输入标准值单位"
                                         class="inputPhone"
                                         style="margin-top: 8px"
                                     />
@@ -95,12 +107,31 @@
 
                         </a-col>
 
-                        <a-col :span="24">
+<!--                        <a-col :span="24">-->
-                            <a-form-item :label="'产品图片'" name="images">
+<!--                            <a-form-item :label="'产品图片'" name="images">-->
-                                <gx-upload v-model="formData.images" accept-types=".jpg,.png,.webp" :fileNumber="2" />
+<!--                                <gx-upload v-model="formData.images" accept-types=".jpg,.png,.webp" :fileNumber="2" />-->
-                            </a-form-item>
+<!--                            </a-form-item>-->
 
-                        </a-col>
+<!--                        </a-col>-->
+                        <a-form-item :label="'产品主图'" name="mainImage">
+                            <gx-upload v-model="formData.mainImage" :fileNumber="1" />
+                        </a-form-item>
+
+                        <a-form-item :label="'内容物图'" name="contentImage">
+                            <gx-upload v-model="formData.contentImage" :fileNumber="1" />
+                        </a-form-item>
+<!--                        <a-col :span="24">-->
+<!--                            <a-form-item :label="'产品图片'" name="images">-->
+<!--                                <gx-upload v-model="formData.images[0]" accept-types=".jpg,.png,.webp" :fileNumber="1" />-->
+<!--                            </a-form-item>-->
+
+<!--                        </a-col>-->
+<!--                        <a-col :span="24">-->
+<!--                            <a-form-item :label="'产品内容物图片'" name="images">-->
+<!--                                <gx-upload v-model="formData.images[1]" accept-types=".jpg,.png,.webp" :fileNumber="1" />-->
+<!--                            </a-form-item>-->
+
+<!--                        </a-col>-->
 
 
                         <a-col :span="24">
@@ -175,6 +206,7 @@ const rolesValue = ref([])
 const roles = ref([])
 const imgUrl = ref('')
 const areaList = ref([])
+const images = ref([])
 const childOpen = ref(false)
 const formArea = ref({ name: '', status: 'enabled' })
 formRules.value = {
@@ -182,10 +214,12 @@ formRules.value = {
     code: { required: true, message: '请输入产品名称' },
     categoryID: { required: true, message: '请选择产品类别', trigger: 'change' },
     compose: { required: true, message: '请选择产品适用对象', trigger: 'change' },
-    feature: { required: true, message: '请输入产品功能特点', trigger: 'change' },
+    feature: [{ required: true, message: '请输入产品功能特点', trigger: 'change' }],
     // feature: [{ required: true, message: '请输入产品功能特点' }],
     standard: [{ required: true, message: '请输入产品标准' }],
     images: [{ required: true, message: '请上传产品图片' }],
+    mainImage: { required: true, message: '请上传产品图片' },
+    contentImage: { required: true, message: '请上传产品内容图片' },
     sequence: [{ required: true, message: '请输入产品排序' }],
     status: [{ required: true, message: '请选择状态', trigger: 'change' }],
 }
@@ -200,21 +234,23 @@ const initDataBatch = async (configs) => {
         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) {
-                areaList.value = [
+                const mapped = data.map(item => {
-                    ...areaList.value,
+                    return {
-                    ...data
+                        value: item.value,
-                        .filter(item => item.status === 'enabled')
+                        children:item.children,
-                        .map(item => ({
+                        [resultKey]: item.label,// e.g. item['label']
-                            code: item.id,
+                    }
-                            [resultKey]: item[nameKey],
+                })
-                        }))
+
-                ]
+                areaList.value = [...areaList.value, ...mapped]
+                console.log('after merge:', areaList.value)
             }
         })
+
     } catch (error) {
         message.error({ content: error.message })
     } finally {
@@ -249,10 +285,26 @@ function handleCreate() {
         compose: '',
         target: '',
         feature: [],
-        standard: [{ label: '', value: '' }],
+        standard: [{
-        images: [''],
+            label: '',
-        sequence: 1,
+            val: '' ,
-        status: 'enabled'
+            fu_hoao: '' ,
+            prx: '' ,
+        }],
+        images: [
+            ...(Array.isArray(formData.value.mainImage)
+                    ? formData.value.mainImage
+                    : [formData.value.mainImage]
+            ).filter(Boolean).map(item => String(item)),
+
+            ...(Array.isArray(formData.value.contentImage)
+                    ? formData.value.contentImage
+                    : [formData.value.contentImage]
+            ).filter(Boolean).map(item => String(item))
+        ],
+
+        sequence: null,
+        status: 'enabled',
     }
     initData()
 }
@@ -306,25 +358,48 @@ async function handleEdit(record = {}) {
     }
     formData.value = {
         ...data,
-        standard:data.standard||[{ label: '', value: '' }],
+        standard:data.standard||   [{
-        images:data.images || ['']
+            label: '',
+            val: '' ,
+            fu_hoao: '' ,
+            prx: '' ,
+        }],
+       // images:data.images || [''],
+        mainImage: data.images?.[0] || '',
+        contentImage: data.images?.[1] || '',
     }
     imgUrl.value = config('http.apiBasic') + data.img
+    console.log('编辑产品数据：',formData.value);
 }
 
 /**
  * 确定
  */
 function handleOk() {
-    console.log(formData.value)
+    console.log('编辑产品列表', formData.value)
     formRef.value.validateFields().then(async (values) => {
         try {
             showLoading()
             const params = {
                 ...values,
-                sequence:'1',
+                standard:formData.value.standard||
-                standard:formData.value.standard||[{ label: '', value: '' }],
+                    [{
+                    label: '',
+                    val: '' ,
+                    fu_hoao: '' ,
+                    prx: '' ,
+                    }],
+                images: [
+                    ...(Array.isArray(formData.value.mainImage)
+                            ? formData.value.mainImage
+                            : [formData.value.mainImage]
+                    ).filter(Boolean).map(item => String(item)),
 
+                    ...(Array.isArray(formData.value.contentImage)
+                            ? formData.value.contentImage
+                            : [formData.value.contentImage]
+                    ).filter(Boolean).map(item => String(item))
+                ],
             }
             let result = null
             switch (modal.value.type) {

src/views/product/index.vue

@@ -71,6 +71,12 @@
                                 <div class="text-ellipsis">{{ record.target }}</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>
+                        <template v-if="'contentImage' === column.dataIndex">
+                            <a-image :width="60" :alt="column.title" :src="config('http.apiBasic') + record.contentImage || $imageErr.imgErr" />
+                        </template>
                         <template v-if="'status' === column.dataIndex">
                             <a-tag v-if="record.status === 'enabled'" :color="'green'">启用</a-tag>
                             <a-tag v-if="record.status === 'disabled'" :color="'red'">停用</a-tag>
@@ -118,44 +124,39 @@ const columns = [
     { title: '产品类别', dataIndex: 'categoryID', key: 'categoryID', width: 120 },
     { title: '原料组成', dataIndex: 'compose', key: 'compose', width: 120 },
     { title: '适用对象', dataIndex: 'target', width: 120 },
-
     {
         title: '功能特点',
         dataIndex: 'feature',
         width: 120,
         align: 'center',
-        // customRender: ({ text }) => Array.isArray(text) ? text.join(', ') : ''
+        customRender: ({ text }) => Array.isArray(text) ? text.join(', ') : ''
     },
-
     {
         title: '产品标准',
         dataIndex: 'standard',
         width: 120,
         align: 'center',
         customRender: ({ text }) => Array.isArray(text)
-            ? text.map(item => `${item.label}: ${item.value}`).join(', ')
+            ? text.map(item => `${item.label}: ${item.fu_hoao}${item.val}${item.prx}`).join(', ')
             : ''
     },
-
     {
         title: '产品图片',
-        dataIndex: 'images',
+        dataIndex: 'mainImage',
+        width: 120,
+        align: 'center',
+    },
+    {
+        title: '产品内容图片',
+        dataIndex: 'contentImage',
         width: 120,
         align: 'center',
-        customRender: ({ text }) => {
-            if (Array.isArray(text) && text.length > 0) {
-                return `<img src="${text[0]}" alt="产品图" style="width:40px;height:40px;object-fit:cover;" />`
-            }
-            return '-'
-        }
     },
 
     { title: '产品排序', dataIndex: 'sequence', width: 120, align: 'center' },
     { title: '产品状态', dataIndex: 'status', width: 120, align: 'center' },
     { title: t('button.action'), key: 'action', fixed: 'right', width: 100, align: 'center' },
 ]
-
-
 const { listData, loading, showLoading, hideLoading, paginationState, resetPagination, searchFormData } =
     usePagination()
 
@@ -180,7 +181,14 @@ async function getPageList() {
             })
         hideLoading()
         if (config('http.code.success') === success) {
-            listData.value = data
+            listData.value = data.map(item => ({
+                ...item,
+                mainImage: item.images?.[0] || '',
+                contentImage: item.images?.[1] || '',
+            }))
+
+            console.log('接口数据', data)
+            console.log('接口过滤数据', listData.value)
             paginationState.total = total
         }
     } catch (error) {