[积分商城]优化页面样式

web/src/views/backend/mall/item/popupForm.vue

@@ -29,6 +29,7 @@
                     :label-width="baTable.form.labelWidth + 'px'"
                     :rules="rules"
                 >
+                    <!-- 先选类型：未选类型时只显示标题与类型，避免看到无关字段 -->
                     <FormItem
                         :label="t('mall.item.title')"
                         type="string"
@@ -36,6 +37,16 @@
                         prop="title"
                         :placeholder="t('Please input field', { field: t('mall.item.title') })"
                     />
+                    <FormItem
+                        :label="t('mall.item.type')"
+                        type="select"
+                        v-model="baTable.form.items!.type"
+                        prop="type"
+                        :input-attr="{ content: { '1': t('mall.item.type 1'), '2': t('mall.item.type 2'), '3': t('mall.item.type 3') } }"
+                        :placeholder="t('Please select field', { field: t('mall.item.type') })"
+                    />
+
+                    <template v-if="hasItemType">
                         <FormItem
                             :label="t('mall.item.description')"
                             type="textarea"
@@ -46,6 +57,62 @@
                             @keyup.ctrl.enter="baTable.onSubmit(formRef)"
                             :placeholder="t('Please input field', { field: t('mall.item.description') })"
                         />
+                        <FormItem
+                            :label="t('mall.item.score')"
+                            type="number"
+                            v-model="baTable.form.items!.score"
+                            prop="score"
+                            :input-attr="{ step: 1 }"
+                            :placeholder="t('Please input field', { field: t('mall.item.score') })"
+                        />
+
+                        <!-- BONUS / WITHDRAW：现金面值、流水倍数 -->
+                        <FormItem
+                            v-if="isBonusOrWithdraw"
+                            :label="t('mall.item.amount')"
+                            type="number"
+                            v-model="baTable.form.items!.amount"
+                            prop="amount"
+                            :input-attr="{ step: 0.01 }"
+                            :placeholder="t('Please input field', { field: t('mall.item.amount') })"
+                        />
+                        <FormItem
+                            v-if="isBonusOrWithdraw"
+                            :label="t('mall.item.multiplier')"
+                            type="number"
+                            v-model="baTable.form.items!.multiplier"
+                            prop="multiplier"
+                            :input-attr="{ step: 1 }"
+                            :placeholder="t('Please input field', { field: t('mall.item.multiplier') })"
+                        />
+                        <!-- 仅 BONUS：Bonus Grant 需要 -->
+                        <FormItem
+                            v-if="isBonus"
+                            :label="t('mall.item.category')"
+                            type="string"
+                            v-model="baTable.form.items!.category"
+                            prop="category"
+                            :placeholder="t('Please input field', { field: t('mall.item.category') })"
+                        />
+                        <FormItem
+                            v-if="isBonus"
+                            :label="t('mall.item.category_title')"
+                            type="string"
+                            v-model="baTable.form.items!.category_title"
+                            prop="category_title"
+                            :placeholder="t('Please input field', { field: t('mall.item.category_title') })"
+                        />
+                        <!-- 仅 PHYSICAL：库存 -->
+                        <FormItem
+                            v-if="isPhysical"
+                            :label="t('mall.item.stock')"
+                            type="number"
+                            v-model="baTable.form.items!.stock"
+                            prop="stock"
+                            :input-attr="{ step: 1 }"
+                            :placeholder="t('Please input field', { field: t('mall.item.stock') })"
+                        />
+
                         <FormItem
                             :label="t('mall.item.remark')"
                             type="textarea"
@@ -56,66 +123,7 @@
                             @keyup.ctrl.enter="baTable.onSubmit(formRef)"
                             :placeholder="t('Please input field', { field: t('mall.item.remark') })"
                         />
-                    <FormItem
-                        :label="t('mall.item.score')"
-                        type="number"
-                        v-model="baTable.form.items!.score"
-                        prop="score"
-                        :input-attr="{ step: 1 }"
-                        :placeholder="t('Please input field', { field: t('mall.item.score') })"
-                    />
-                    <FormItem
-                        :label="t('mall.item.type')"
-                        type="select"
-                        v-model="baTable.form.items!.type"
-                        prop="type"
-                        :input-attr="{ content: { '1': t('mall.item.type 1'), '2': t('mall.item.type 2'), '3': t('mall.item.type 3') } }"
-                        :placeholder="t('Please select field', { field: t('mall.item.type') })"
-                    />
-                    <FormItem
-                        :label="t('mall.item.amount')"
-                        type="number"
-                        v-model="baTable.form.items!.amount"
-                        prop="amount"
-                        :input-attr="{ step: 0.01 }"
-                        :placeholder="t('Please input field', { field: t('mall.item.amount') })"
-                        v-if="isBonusOrWithdraw"
-                    />
-                    <FormItem
-                        :label="t('mall.item.multiplier')"
-                        type="number"
-                        v-model="baTable.form.items!.multiplier"
-                        prop="multiplier"
-                        :input-attr="{ step: 1 }"
-                        :placeholder="t('Please input field', { field: t('mall.item.multiplier') })"
-                        v-if="isBonusOrWithdraw"
-                    />
-                    <FormItem
-                        :label="t('mall.item.category')"
-                        type="string"
-                        v-model="baTable.form.items!.category"
-                        prop="category"
-                        :placeholder="t('Please input field', { field: t('mall.item.category') })"
-                        v-if="isBonusOrWithdraw"
-                    />
-                    <FormItem
-                        :label="t('mall.item.category_title')"
-                        type="string"
-                        v-model="baTable.form.items!.category_title"
-                        prop="category_title"
-                        :placeholder="t('Please input field', { field: t('mall.item.category_title') })"
-                        v-if="isBonusOrWithdraw"
-                    />
                         <FormItem :label="t('mall.item.image')" type="image" v-model="baTable.form.items!.image" />
-                    <FormItem
-                        :label="t('mall.item.stock')"
-                        type="number"
-                        v-model="baTable.form.items!.stock"
-                        prop="stock"
-                        :input-attr="{ step: 1 }"
-                        :placeholder="t('Please input field', { field: t('mall.item.stock') })"
-                        v-if="isPhysical"
-                    />
                         <FormItem
                             :label="t('mall.item.sort')"
                             type="number"
@@ -131,6 +139,7 @@
                             prop="status"
                             :input-attr="{ content: { '0': t('mall.item.status 0'), '1': t('mall.item.status 1') } }"
                         />
+                    </template>
                 </el-form>
             </div>
         </el-scrollbar>
@@ -166,7 +175,10 @@ const isPhysical = computed(() => itemType.value === 2 || itemType.value === '2'
 const isWithdraw = computed(() => itemType.value === 3 || itemType.value === '3')
 const isBonusOrWithdraw = computed(() => isBonus.value || isWithdraw.value)
 
-// 切换类型后，清理不适用的字段，避免“隐藏字段仍保留上一次的值”导致提交脏数据
+/** 已选择商品类型（1/2/3）后，才展示其余表单项 */
+const hasItemType = computed(() => isBonus.value || isPhysical.value || isWithdraw.value)
+
+// 切换类型后，清理不适用的字段（严格：WITHDRAW 不保留红利类别字段）
 watch(
     itemType,
     (n, o) => {
@@ -176,14 +188,20 @@ watch(
         const typeNum = Number(n)
         if (!Number.isFinite(typeNum)) return
 
-        if (typeNum === 2) {
+        if (typeNum === 1) {
+            // BONUS：实物库存不适用
+            baTable.form.items.stock = 0
+        } else if (typeNum === 2) {
+            // PHYSICAL：现金/倍数/类别不适用
             baTable.form.items.amount = 0
             baTable.form.items.multiplier = 0
             baTable.form.items.category = ''
             baTable.form.items.category_title = ''
-        } else {
+        } else if (typeNum === 3) {
-            // BONUS / WITHDRAW
+            // WITHDRAW：提现接口不使用 category，清空避免误存
             baTable.form.items.stock = 0
+            baTable.form.items.category = ''
+            baTable.form.items.category_title = ''
         }
     },
     { flush: 'post' },
@@ -191,10 +209,33 @@ watch(
 
 const rules: Partial<Record<string, FormItemRule[]>> = reactive({
     title: [buildValidatorData({ name: 'required', title: t('mall.item.title') })],
-    description: [buildValidatorData({ name: 'required', title: t('mall.item.description') })],
+    description: [
+        {
+            validator: (rule: any, val: any, callback: Function) => {
+                if (!hasItemType.value) return callback()
+                if (val === '' || val === null || val === undefined) {
+                    return callback(new Error(t('Please input field', { field: t('mall.item.description') })))
+                }
+                return callback()
+            },
+            trigger: 'blur',
+        },
+    ],
     score: [
-        buildValidatorData({ name: 'number', title: t('mall.item.score') }),
+        {
-        buildValidatorData({ name: 'required', title: t('mall.item.score') }),
+            validator: (rule: any, val: any, callback: Function) => {
+                if (!hasItemType.value) return callback()
+                if (val === '' || val === null || val === undefined) {
+                    return callback(new Error(t('Please input field', { field: t('mall.item.score') })))
+                }
+                const num = Number(val)
+                if (!Number.isFinite(num)) {
+                    return callback(new Error(t('Please enter the correct field', { field: t('mall.item.score') })))
+                }
+                return callback()
+            },
+            trigger: 'blur',
+        },
     ],
     type: [buildValidatorData({ name: 'required', title: t('mall.item.type') })],
     amount: [
@@ -238,7 +279,7 @@ const rules: Partial<Record<string, FormItemRule[]>> = reactive({
     category: [
         {
             validator: (rule: any, val: any, callback: Function) => {
-                if (!isBonusOrWithdraw.value) return callback()
+                if (!isBonus.value) return callback()
                 if (!val) {
                     return callback(new Error(t('Please input field', { field: t('mall.item.category') })))
                 }
@@ -250,7 +291,7 @@ const rules: Partial<Record<string, FormItemRule[]>> = reactive({
     category_title: [
         {
             validator: (rule: any, val: any, callback: Function) => {
-                if (!isBonusOrWithdraw.value) return callback()
+                if (!isBonus.value) return callback()
                 if (!val) {
                     return callback(new Error(t('Please input field', { field: t('mall.item.category_title') })))
                 }

web/types/tableRenderer.d.ts

@@ -4,6 +4,7 @@ type TableRenderer =
     | 'color'
     | 'customRender'
     | 'customTemplate'
+    | 'date'
     | 'datetime'
     | 'icon'
     | 'image'