整理商品管理模块

src/views/shop/spec/components/specEdit.vue

@@ -1,10 +1,11 @@
 <!-- 编辑弹窗 -->
 <template>
   <ele-modal
-    :width="500"
+    :width="800"
     :visible="visible"
     :maskClosable="false"
-    :title="isUpdate ? '编辑商品规格' : '添加商品规格'"
+    :maxable="maxable"
+    :title="isUpdate ? '编辑规格' : '添加规格'"
     :body-style="{ paddingBottom: '28px' }"
     @update:visible="updateVisible"
     @ok="save"
@@ -13,48 +14,65 @@
       ref="formRef"
       :model="form"
       :rules="rules"
-      :label-col="styleResponsive ? { md: 5, sm: 5, xs: 24 } : { flex: '90px' }"
+      :label-col="styleResponsive ? { md: 4, sm: 5, xs: 24 } : { flex: '90px' }"
       :wrapper-col="
-        styleResponsive ? { md: 18, sm: 19, xs: 24 } : { flex: '1' }
+        styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
       "
     >
       <a-form-item label="规格名称" name="specName">
         <a-input
           allow-clear
-          :maxlength="100"
-          placeholder="机型"
+          placeholder="请输入规格名称"
           v-model:value="form.specName"
-          @pressEnter="save"
         />
       </a-form-item>
-      <a-form-item label="排序号" name="sortNumber" v-if="isUpdate">
-        <a-input-number
-          :min="0"
-          :max="9999"
-          class="ele-fluid"
-          placeholder="请输入排序号"
-          v-model:value="form.sortNumber"
-        />
+      <a-form-item name="specValue">
+        <a-space direction="vertical" class="ml-[124px]">
+          <template v-for="(item, index) in spec" :key="index">
+            <div class="text-left flex items-center leading-10 text-gray-400">
+              <div class="mr-2">{{ item.value }} :</div>
+              <CloseCircleOutlined
+                class="cursor-pointer"
+                @click="onClose(index)"
+              />
+            </div>
+            <ele-edit-tag
+              v-model:data="item.detail"
+              size="middle"
+              shape="round"
+            />
+          </template>
+          <a-card class="ml-[124px]" v-if="showSpecForm">
+            <a-form-item name="name">
+              <a-input
+                allow-clear
+                placeholder="请输入规格"
+                v-model:value="name"
+              />
+            </a-form-item>
+            <a-form-item name="value">
+              <a-input
+                allow-clear
+                placeholder="请输入规格值"
+                v-model:value="value"
+              />
+            </a-form-item>
+            <a-space>
+              <a-button type="primary" @click="addSpecValue">确定</a-button>
+              <a-button @click="openSpecForm">取消</a-button>
+            </a-space>
+          </a-card>
+          <a-button type="primary" class="mt-5" v-else @click="openSpecForm"
+            >添加新规格</a-button
+          >
+        </a-space>
       </a-form-item>
-      <a-form-item label="描述" name="comments">
-        <a-textarea
-          :rows="4"
-          :maxlength="200"
-          placeholder="iphone15"
-          v-model:value="form.comments"
-        />
-      </a-form-item>
-      <!--      <a-form-item label="状态" name="status">-->
-      <!--        <a-radio-group v-model:value="form.status">-->
-      <!--          <a-radio :value="0">已启用</a-radio>-->
-      <!--          <a-radio :value="1">未启用</a-radio>-->
-      <!--        </a-radio-group>-->
-      <!--      </a-form-item>-->
     </a-form>
   </ele-modal>
 </template>
 
 <script lang="ts" setup>
+  import { CloseCircleOutlined } from '@ant-design/icons-vue';
   import { ref, reactive, watch } from 'vue';
   import { Form, message } from 'ant-design-vue';
   import { assignObject } from 'ele-admin-pro';
@@ -62,7 +80,9 @@
   import { Spec } from '@/api/shop/spec/model';
   import { useThemeStore } from '@/store/modules/theme';
   import { storeToRefs } from 'pinia';
+  import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
   import { FormInstance } from 'ant-design-vue/es/form';
+  import { SpecValue } from '@/api/shop/specValue/model';
 
   // 是否是修改
   const isUpdate = ref(false);
@@ -85,16 +105,24 @@
 
   // 提交状态
   const loading = ref(false);
+  // 是否显示最大化切换按钮
+  const maxable = ref(true);
+  const showSpecForm = ref(false);
   // 表格选中数据
   const formRef = ref<FormInstance | null>(null);
+  const images = ref<ItemType[]>([]);
+  const spec = ref<SpecValue[]>([]);
+  const name = ref();
+  const value = ref();
 
   // 用户信息
   const form = reactive<Spec>({
     specId: undefined,
-    specName: '',
+    specName: undefined,
+    specValue: undefined,
+    status: 0,
     comments: '',
-    sortNumber: 100,
-    status: 0
+    sortNumber: 100
   });
 
   /* 更新visible */
@@ -108,12 +136,48 @@
       {
         required: true,
         type: 'string',
-        message: '请填写商品规格名称',
+        message: '请填写规格名称',
         trigger: 'blur'
       }
     ]
   });
 
+  // const validator = (value: string) => {
+  //   return new Promise<void>((_resolve, reject) => {
+  //     setTimeout(() => {
+  //       reject(new Error(value + '不合法, 请重新输入'));
+  //     }, 1000);
+  //   });
+  // };
+
+  // 新增规格
+  const addSpecValue = () => {
+    if (!name.value || !value.value) {
+      message.error(`请输入规格和规格值)`);
+      return false;
+    }
+    const findIndex = spec.value.findIndex((d) => d.value == name.value);
+    if (findIndex == 0) {
+      message.error(`${name.value}已存在)`);
+      return false;
+    }
+    spec.value.push({
+      value: name.value,
+      detail: [value.value]
+    });
+    name.value = '';
+    value.value = '';
+    openSpecForm();
+  };
+
+  const openSpecForm = () => {
+    showSpecForm.value = !showSpecForm.value;
+  };
+
+  const onClose = (index) => {
+    spec.value.splice(index, 1);
+  };
+
   const { resetFields } = useForm(form, rules);
 
   /* 保存编辑 */
@@ -125,8 +189,13 @@
       .validate()
       .then(() => {
         loading.value = true;
+        if (spec.value.length === 0) {
+          message.error('请添加规格');
+          return;
+        }
         const formData = {
-          ...form
+          ...form,
+          specValue: JSON.stringify(spec.value)
         };
         const saveOrUpdate = isUpdate.value ? updateSpec : addSpec;
         saveOrUpdate(formData)
@@ -148,10 +217,15 @@
     () => props.visible,
     (visible) => {
       if (visible) {
+        images.value = [];
         if (props.data) {
           assignObject(form, props.data);
+          if (props.data.specValue) {
+            spec.value = JSON.parse(props.data.specValue);
+          }
           isUpdate.value = true;
         } else {
+          spec.value = [];
           isUpdate.value = false;
         }
       } else {

src/views/shop/spec/index.vue

@@ -21,16 +21,32 @@
             />
           </template>
           <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'specValue'">
+              <a-space direction="vertical">
+                <template
+                  v-for="(item, index) in JSON.parse(record.specValue)"
+                  :key="index"
+                >
+                  <div class="text-left">
+                    <span class="text-gray-400 mr-2">{{ item.value }} :</span>
+                    <ele-tag
+                      shape="round"
+                      size="small"
+                      v-for="(sub, subIndex) in item.detail"
+                      :key="subIndex"
+                    >
+                      {{ sub }}
+                    </ele-tag>
+                  </div>
+                </template>
+              </a-space>
+            </template>
             <template v-if="column.key === 'status'">
-              <a-tag v-if="record.status === 0" color="green">已启用</a-tag>
-              <a-tag v-if="record.status === 1" color="red">未启用</a-tag>
+              <a-tag v-if="record.status === 0" color="green">显示</a-tag>
+              <a-tag v-if="record.status === 1" color="red">隐藏</a-tag>
             </template>
             <template v-if="column.key === 'action'">
               <a-space>
-                <a @click="openSpecValue(record)">规格值</a>
-                <a-divider type="vertical" />
-                <a @click="moveUp(record)">上移<ArrowUpOutlined /></a>
-                <a-divider type="vertical" />
                 <a @click="openEdit(record)">修改</a>
                 <a-divider type="vertical" />
                 <a-popconfirm
@@ -47,13 +63,6 @@
 
       <!-- 编辑弹窗 -->
       <SpecEdit v-model:visible="showEdit" :data="current" @done="reload" />
-
-      <!-- 规则值弹窗 -->
-      <SpecValueEdit
-        v-model:visible="showSpecValueEdit"
-        :data="current"
-        @done="reload"
-      />
     </div>
   </div>
 </template>
@@ -61,25 +70,17 @@
 <script lang="ts" setup>
   import { createVNode, ref } from 'vue';
   import { message, Modal } from 'ant-design-vue';
-  import {
-    ArrowUpOutlined,
-    ExclamationCircleOutlined
-  } from '@ant-design/icons-vue';
+  import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
   import type { EleProTable } from 'ele-admin-pro';
+  import { toDateString } from 'ele-admin-pro';
   import type {
     DatasourceFunction,
     ColumnItem
   } from 'ele-admin-pro/es/ele-pro-table/types';
   import Search from './components/search.vue';
   import SpecEdit from './components/specEdit.vue';
-  import {
-    pageSpec,
-    removeSpec,
-    removeBatchSpec,
-    updateSpec
-  } from '@/api/shop/spec';
+  import { pageSpec, removeSpec, removeBatchSpec } from '@/api/shop/spec';
   import type { Spec, SpecParam } from '@/api/shop/spec/model';
-  import SpecValueEdit from '../specValue/index.vue';
 
   // 表格实例
   const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
@@ -90,8 +91,6 @@
   const current = ref<Spec | null>(null);
   // 是否显示编辑弹窗
   const showEdit = ref(false);
-  // 是否显示规格值弹窗
-  const showSpecValueEdit = ref(false);
   // 是否显示批量移动弹窗
   const showMove = ref(false);
   // 加载状态
@@ -120,24 +119,49 @@
   const columns = ref<ColumnItem[]>([
     {
       title: 'ID',
-      width: 90,
-      dataIndex: 'specId'
+      dataIndex: 'specId',
+      key: 'specId',
+      align: 'center',
+      width: 90
     },
     {
       title: '规格名称',
       dataIndex: 'specName',
-      width: 240,
-      key: 'specName'
+      key: 'specName',
+      align: 'center'
+    },
+    {
+      title: '规格值',
+      dataIndex: 'specValue',
+      key: 'specValue'
     },
     {
       title: '备注',
       dataIndex: 'comments',
-      key: 'comments'
+      key: 'comments',
+      align: 'center',
+      hideInTable: true
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      key: 'status',
+      align: 'center',
+      hideInTable: true
+    },
+    {
+      title: '创建时间',
+      dataIndex: 'createTime',
+      key: 'createTime',
+      align: 'center',
+      sorter: true,
+      ellipsis: true,
+      customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd')
     },
     {
       title: '操作',
       key: 'action',
-      width: 280,
+      width: 180,
       fixed: 'right',
       align: 'center',
       hideInSetting: true
@@ -156,11 +180,6 @@
     showEdit.value = true;
   };
 
-  const openSpecValue = (row?: Spec) => {
-    current.value = row ?? null;
-    showSpecValueEdit.value = true;
-  };
-
   /* 打开批量移动弹窗 */
   const openMove = () => {
     showMove.value = true;
@@ -208,17 +227,6 @@
     });
   };
 
-  // 上移
-  const moveUp = (row?: Spec) => {
-    updateSpec({
-      specId: row?.specId,
-      sortNumber: Number(row?.sortNumber) - 1
-    }).then((msg) => {
-      message.success(msg);
-      reload();
-    });
-  };
-
   /* 查询 */
   const query = () => {
     loading.value = true;
@@ -233,11 +241,10 @@
       },
       // 行双击事件
       onDblclick: () => {
-        openSpecValue(record);
+        openEdit(record);
       }
     };
   };
-
   query();
 </script>