feat(custom): i

src/views/goods/add/api.js

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

src/views/goods/add/index.vue

@@ -0,0 +1,173 @@
+<template>
+  <CommonPage show-footer :title="$route.title">
+    <!-- {{ model }} -->
+    <n-spin size="large" :show="isShowSpin">
+      <n-form ref="formRef" label-width="100" :model="model" :rules="rules" label-placement="left">
+        <n-grid :cols="2" :x-gap="24">
+          <n-form-item-gi :span="12" label="商品分类:" path="class_id">
+            <n-select
+              v-model:value="model.class_id"
+              label-field="name"
+              value-field="ID"
+              :options="classList"
+              placeholder="选择商品分类"
+            />
+          </n-form-item-gi>
+          <n-form-item-gi :span="12" label="商品名称:" path="name">
+            <n-input v-model:value="model.name" placeholder="输入商品名称" />
+          </n-form-item-gi>
+          <n-form-item-gi :span="12" label="商品封面:" path="cover">
+            <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" />
+          </n-form-item-gi>
+          <n-form-item-gi :span="12" label="商品价格:" path="number">
+            <n-input-number v-model:value="model.number" placeholder="输入商品价格" />
+          </n-form-item-gi>
+          <n-form-item-gi :span="12" label="市场价格:" path="market_num">
+            <n-input-number v-model:value="model.market_num" placeholder="输入市场价格" />
+          </n-form-item-gi>
+          <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="details">
+            <Editor v-model:valueHtml="model.details" />
+          </n-form-item-gi>
+          <n-form-item-gi :span="12">
+            <n-button class="m-auto" type="primary" @click="submit">提交</n-button>
+          </n-form-item-gi>
+        </n-grid>
+      </n-form>
+    </n-spin>
+  </CommonPage>
+</template>
+
+<script setup>
+import Upload from '@/components/Upload.vue'
+import Editor from '@/components/Editor.vue'
+import api from './api'
+import { useGoodsStore } from '@/store/modules/goods'
+import { useRouter } from 'vue-router'
+
+const formRef = ref(null)
+
+const model = ref({
+  name: '',
+  class_id: null,
+  cover: [],
+  rotation: [],
+  profile: '',
+  details: '',
+  stock: null,
+  number: null,
+  market_num: null,
+})
+
+const rules = {
+  name: {
+    required: true,
+    message: '请输入商品名称',
+    trigger: 'blur',
+  },
+  class_id: {
+    required: true,
+    type: 'number',
+    message: '请选择商品分类',
+    trigger: 'change',
+  },
+  cover: {
+    required: true,
+    type: 'array',
+    message: '请上传商品封面',
+    trigger: 'change',
+  },
+  rotation: {
+    required: true,
+    type: 'array',
+    message: '请上传商品轮播图',
+    trigger: 'change',
+  },
+  number: {
+    required: true,
+    type: 'number',
+    message: '请输入商品价格',
+    trigger: 'blur',
+  },
+  market_num: {
+    required: true,
+    type: 'number',
+    message: '请输入市场价格',
+    trigger: 'blur',
+  },
+  stock: {
+    required: true,
+    type: 'number',
+    message: '请输入商品库存',
+    trigger: 'blur',
+  },
+}
+const { row, setRow, goodType } = useGoodsStore()
+
+const type = ref('')
+
+const isShowSpin = ref(false)
+
+onMounted(() => {
+  type.value = goodType
+  getClassList()
+})
+
+const classList = ref([])
+
+const getClassList = async () => {
+  isShowSpin.value = true
+  const res = await api.getGoodClass()
+  classList.value = res.data.data
+
+  if (row && type.value === 'edit') {
+    console.log(row)
+    type.value = 'edit'
+    model.value = {
+      ...row,
+      cover: [{ url: row.cover, status: 'finished', id: 1 }],
+      rotation: row.rotation?.split(',').map((item, index) => ({
+        url: item,
+        status: 'finished',
+        id: index + 1,
+      })),
+    }
+  }
+  isShowSpin.value = false
+}
+
+const route = useRouter()
+
+const submit = () => {
+  formRef.value.validate(async (errors) => {
+    if (errors) return
+    try {
+      const data = {
+        ...model.value,
+        cover: model.value.cover.map((item) => item.url)[0],
+        rotation: model.value.rotation.map((item) => item.url).join(','),
+        status: 3,
+      }
+      const res = await api.addGoods(data)
+      console.log(res)
+      //   $message.success(res.data.msg)
+      route.back()
+      setRow({})
+    } catch (error) {
+      $message.error(error.msg)
+    }
+  })
+}
+</script>
+
+<style lang="scss" scoped></style>

src/views/goods/index/api.js

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

src/views/goods/index/index.vue

@@ -0,0 +1,170 @@
+<template>
+  <CommonPage show-footer :title="$route.title">
+    <n-button type="primary" @click="addGood(1)">添加商品</n-button>
+    <n-data-table
+      :loading="loading"
+      :columns="columns"
+      :data="data"
+      :pagination="pagination"
+      :bordered="false"
+      remote
+    />
+  </CommonPage>
+</template>
+
+<script setup>
+import { useRouter } from 'vue-router'
+import { NButton, NEllipsis } from 'naive-ui'
+import api from './api'
+import { useGoodsStore } from '@/store/modules/goods'
+
+const loading = ref(false)
+
+const columns = ref([
+  {
+    title: 'ID',
+    align: 'center',
+    key: 'ID',
+  },
+  {
+    title: '封面',
+    align: 'center',
+    slot: 'cover',
+    render(row) {
+      return h('img', {
+        src: row.cover,
+        style: {
+          width: '30px',
+          height: '30px',
+        },
+      })
+    },
+  },
+  {
+    title: '商品分类',
+    align: 'center',
+    slot: 'class_id',
+    render(row) {
+      const data = optList.value.filter((item) => item.ID === row.class_id)
+      return h('span', data[0]?.name)
+    },
+  },
+  {
+    title: '商品名称',
+    align: 'center',
+    slot: 'name',
+    render(row) {
+      return h(
+        NEllipsis,
+        {
+          class: 'w-300',
+        },
+        { default: () => row.name }
+      )
+    },
+  },
+  {
+    title: '商品价格',
+    align: 'center',
+    key: 'number',
+  },
+  {
+    title: '商品库存',
+    align: 'center',
+    key: 'stock',
+  },
+  {
+    title: '状态',
+    align: 'center',
+    slot: 'status',
+    render(row) {
+      return h('span', row.status === 1 ? '已审核' : row.status === 2 ? '已拒绝' : '待审核')
+    },
+  },
+  {
+    title: '备注',
+    key: 'notes',
+    align: 'center',
+  },
+  {
+    title: '操作',
+    align: 'center',
+    slot: 'action',
+    render(row) {
+      if (row.status === 1 || row.status === 2) {
+        return [
+          h(
+            NButton,
+            {
+              type: 'primary',
+              size: 'small',
+              onClick: () => toEdit(row),
+            },
+            () => '编辑'
+          ),
+        ]
+      }
+    },
+  },
+])
+
+const data = ref([])
+
+const pagination = ref({
+  page: 1,
+  pageSize: 10,
+  itemCount: 0,
+  onChange: (page) => {
+    pagination.value.page = page
+    getList()
+  },
+  onUpdatePageSize: (pageSize) => {
+    pagination.value.pageSize = pageSize
+    pagination.value.page = 1
+    getList()
+  },
+})
+
+onMounted(() => {
+  getList()
+  getclasslist()
+})
+
+const optList = ref([])
+
+const getclasslist = async () => {
+  const res = await api.getGoodClass()
+  optList.value = res.data.data
+}
+
+const getList = async () => {
+  loading.value = true
+  try {
+    const res = await api.getGoods({
+      pageNum: pagination.value.page,
+      pageSize: pagination.value.pageSize,
+    })
+    data.value = res.data.data || []
+    pagination.value.itemCount = res.data.total
+  } catch (error) {
+    $message.error(error.msg)
+  }
+  loading.value = false
+}
+const route = useRouter()
+const { setRow, setType } = useGoodsStore()
+
+const addGood = (type) => {
+  setType(type === 1 ? 'add' : 'edit')
+  route.push({
+    path: '/goods/goods_add',
+  })
+}
+
+const toEdit = (item) => {
+  setRow(item)
+  addGood()
+}
+</script>
+
+<style lang="scss" scoped></style>

src/views/goods/route.js

@@ -0,0 +1,31 @@
+const Layout = () => import('@/layout/index.vue')
+
+export default {
+  name: '商品管理',
+  path: '/goods',
+  component: Layout,
+  redirect: '/goods_list',
+  children: [
+    {
+      name: 'Goodslist',
+      path: 'goods_list',
+      component: () => import('./index/index.vue'),
+      meta: {
+        title: '商品列表',
+        icon: 'mdi:account-multiple',
+        order: 10,
+      },
+    },
+    {
+      name: 'Goodsadd',
+      path: 'goods_add',
+      isHidden: true,
+      component: () => import('./add/index.vue'),
+      meta: {
+        title: '添加/编辑商品',
+        icon: 'mdi:account-multiple',
+        order: 10,
+      },
+    },
+  ],
+}