release(custom): i

src/views/goods/add/api.js

@@ -1,6 +1,6 @@
 import { request } from '@/utils'
 
 export default {
-  getGoodClass: (data) => request.post('/goods/class', data),
+  getGoodClass: (data) => request.post('/classify', data),
   addGoods: (data) => request.post('/goods/edit', data),
 }

src/views/goods/add/index.vue

@@ -20,7 +20,7 @@
             <Upload v-model:list="model.cover" />
           </n-form-item-gi>
           <n-form-item-gi :span="12" label="商品轮播图:" path="rotation">
-            <Upload v-model:list="model.rotation" :max="5" />
+            <Upload v-model:list="model.rotation" :max="5" multiple />
           </n-form-item-gi>
           <n-form-item-gi :span="12" label="商品价格:" path="number">
             <n-input-number v-model:value="model.number" placeholder="输入商品价格" />
@@ -31,11 +31,12 @@
           <n-form-item-gi :span="12" label="商品库存:" path="stock">
             <n-input-number v-model:value="model.stock" placeholder="输入商品库存" />
           </n-form-item-gi>
-
           <n-form-item-gi :span="12" label="商品简介:" path="profile">
             <n-input v-model:value="model.profile" type="textarea" placeholder="输入商品简介" />
           </n-form-item-gi>
-
+          <n-form-item-gi :span="12" label="上架状态:" path="state">
+            <n-switch v-model:value="model.state" :checked-value="1" :unchecked-value="2" />
+          </n-form-item-gi>
           <n-form-item-gi :span="12" label="商品详情:" path="details">
             <Editor v-model:valueHtml="model.details" />
           </n-form-item-gi>
@@ -67,6 +68,7 @@ const model = ref({
   stock: null,
   number: null,
   market_num: null,
+  state: 2,
 })
 
 const rules = {

src/views/goods/class/api.js

@@ -0,0 +1,7 @@
+import { request } from '@/utils'
+
+export default {
+  getGoodClass: (data) => request.post('/classify', data),
+  //   添加或修改
+  addGoodClass: (data) => request.post('/classify/edit', data),
+}

src/views/goods/class/index.vue

@@ -0,0 +1,171 @@
+<template>
+  <CommonPage show-footer :title="$route.title">
+    <n-button type="primary" @click="addClass(1)">添加商品分类</n-button>
+    <n-data-table
+      class="mt-10"
+      :loading="loading"
+      :columns="columns"
+      :data="data"
+      :pagination="pagination"
+      :bordered="false"
+      remote
+    />
+    <!-- 添加/编辑对话框 -->
+    <n-modal v-model:show="showModal">
+      <n-card
+        style="width: 500px"
+        :title="showModalTitle"
+        :bordered="false"
+        size="huge"
+        role="dialog"
+        aria-modal="true"
+      >
+        <n-form ref="formRef" :model="model" :rules="rules" label-placement="left">
+          <n-grid :cols="24" :x-gap="24">
+            <n-form-item-gi label="商品分类:" :span="14" path="name">
+              <n-input v-model:value="model.name" placeholder="请输入商品分类" />
+            </n-form-item-gi>
+            <n-form-item-gi label="是否显示:" :span="14" path="status">
+              <n-switch v-model:value="model.status" :unchecked-value="2" :checked-value="1" />
+            </n-form-item-gi>
+            <n-form-item-gi :span="14">
+              <div class="m-auto">
+                <n-button type="primary" @click="submit">提交</n-button>
+                <n-button ml-10 @click="clear">取消</n-button>
+              </div>
+            </n-form-item-gi>
+          </n-grid>
+        </n-form>
+      </n-card>
+    </n-modal>
+  </CommonPage>
+</template>
+
+<script setup>
+import api from './api.js'
+import { NTag, NButton } from 'naive-ui'
+
+const loading = ref(false)
+
+const data = ref([])
+
+const showModal = ref(false)
+
+const showModalTitle = ref('')
+
+const model = ref({
+  name: '',
+  status: 2,
+})
+
+const columns = ref([
+  {
+    title: '分类名称',
+    key: 'name',
+    align: 'center',
+  },
+  {
+    title: '是否显示',
+    slot: 'status',
+    align: 'center',
+    render: (row) => {
+      return h(
+        NTag,
+        {
+          type: row.status === 1 ? 'success' : 'warning',
+          bordered: false,
+        },
+        {
+          default: () => (row.status === 1 ? '显示' : '隐藏'),
+        }
+      )
+    },
+  },
+  {
+    title: '操作',
+    slot: 'action',
+    align: 'center',
+    render: (row) => {
+      return [
+        h(
+          NButton,
+          {
+            text: true,
+            size: 'small',
+            type: 'primary',
+            onClick: () => {
+              addClass(2, row)
+            },
+          },
+          {
+            default: () => '编辑',
+          }
+        ),
+      ]
+    },
+  },
+])
+
+const formRef = ref(null)
+
+const rules = {
+  name: {
+    required: true,
+    message: '请输入商品分类',
+    trigger: 'blur',
+  },
+}
+
+const pagination = ref({
+  page: 1,
+  pageSize: 10,
+  itemCount: 0,
+  onChange: (page) => {
+    pagination.value.page = page
+    get_data()
+  },
+})
+
+onMounted(() => {
+  get_data()
+})
+
+const get_data = async () => {
+  loading.value = true
+  const res = await api.getGoodClass({
+    PageNum: pagination.value.page,
+    PageSize: pagination.value.pageSize,
+  })
+  data.value = res.data.data || []
+  pagination.value.itemCount = res.data.total
+  loading.value = false
+}
+
+const addClass = (e, row = {}) => {
+  showModalTitle.value = e === 1 ? '添加商品分类' : '编辑商品分类'
+  if (e === 2) model.value = { ...row }
+  showModal.value = true
+}
+
+const submit = () => {
+  formRef.value?.validate(async (errors) => {
+    if (!errors) {
+      const res = await api.addGoodClass(model.value)
+      $message.success(res.msg)
+      clear()
+    }
+  })
+}
+
+const clear = () => {
+  formRef.value.restoreValidation()
+  model.value = {
+    name: '',
+    status: 2,
+  }
+  showModal.value = false
+  get_data()
+}
+</script>
+
+<style lang="scss" scoped></style>

src/views/goods/index/api.js

@@ -2,5 +2,5 @@ import { request } from '@/utils'
 
 export default {
   getGoods: (data) => request.post('/goods', data),
-  getGoodClass: (data) => request.post('/goods/class', data),
+  getGoodClass: (data) => request.post('/classify', data),
 }

src/views/goods/index/index.vue

@@ -14,8 +14,9 @@
 
 <script setup>
 import { useRouter } from 'vue-router'
-import { NButton, NEllipsis } from 'naive-ui'
+import { NButton, NEllipsis, NImage, NSwitch } from 'naive-ui'
 import api from './api'
+import api1 from '../add/api'
 import { useGoodsStore } from '@/store/modules/goods'
 
 const loading = ref(false)
@@ -31,12 +32,9 @@ const columns = ref([
     align: 'center',
     slot: 'cover',
     render(row) {
-      return h('img', {
+      return h(NImage, {
+        width: '50',
         src: row.cover,
-        style: {
-          width: '30px',
-          height: '30px',
-        },
       })
     },
   },
@@ -74,13 +72,34 @@ const columns = ref([
     key: 'stock',
   },
   {
-    title: '状态',
+    title: '审核状态',
     align: 'center',
     slot: 'status',
     render(row) {
       return h('span', row.status === 1 ? '已审核' : row.status === 2 ? '已拒绝' : '待审核')
     },
   },
+  {
+    title: '是否上架',
+    align: 'center',
+    slot: 'state',
+    render(row) {
+      return [
+        h(NSwitch, {
+          checkedValue: 1,
+          uncheckedValue: 2,
+          value: row.state,
+          onUpdateValue: async (val) => {
+            await api1.addGoods({
+              ...row,
+              state: val,
+            })
+            getList()
+          },
+        }),
+      ]
+    },
+  },
   {
     title: '备注',
     key: 'notes',
@@ -91,19 +110,17 @@ const columns = ref([
     align: 'center',
     slot: 'action',
     render(row) {
-      if (row.status === 1 || row.status === 2) {
-        return [
-          h(
-            NButton,
-            {
-              type: 'primary',
-              size: 'small',
-              onClick: () => toEdit(row),
-            },
-            () => '编辑'
-          ),
-        ]
-      }
+      return [
+        h(
+          NButton,
+          {
+            type: 'primary',
+            size: 'small',
+            onClick: () => toEdit(row),
+          },
+          () => '编辑'
+        ),
+      ]
     },
   },
 ])

src/views/goods/route.js

@@ -5,6 +5,11 @@ export default {
   path: '/goods',
   component: Layout,
   redirect: '/goods_list',
+  meta: {
+    title: '商品管理',
+    icon: 'mdi:account-multiple',
+    order: 10,
+  },
   children: [
     {
       name: 'Goodslist',
@@ -13,7 +18,17 @@ export default {
       meta: {
         title: '商品列表',
         icon: 'mdi:account-multiple',
-        order: 10,
+        order: 4,
+      },
+    },
+    {
+      name: 'Goodsclass',
+      path: 'goods_class',
+      component: () => import('./class/index.vue'),
+      meta: {
+        title: '商品分类',
+        icon: 'mdi:account-multiple',
+        order: 4,
       },
     },
     {