✨ ERP：完成 product 信息、分类、单位的实现

36a03302 · YunaiV · ce9317e3 · 36a03302 · 36a03302 · 36a03302
Commit 36a03302 authored Feb 05, 2024 by YunaiV
8 changed files
--- a/src/api/erp/product/category/index.ts
+++ b/src/api/erp/product/category/index.ts
@@ -18,33 +18,38 @@ export interface ProductCategoryVO {
 // ERP 商品分类 API
 export const ProductCategoryApi = {
-  // 查询ERP 商品分类列表
+  // 查询商品分类列表
  getProductCategoryList: async (params) => {
    return await request.get({ url: `/erp/product-category/list`, params })
  },
-  // 查询ERP 商品分类详情
+  // 查询商品分类精简列表
+  getProductCategorySimpleList: async () => {
+    return await request.get({ url: `/erp/product-category/simple-list` })
+  },
+  // 查询商品分类详情
  getProductCategory: async (id: number) => {
    return await request.get({ url: `/erp/product-category/get?id=` + id })
  },
-  // 新增ERP 商品分类
+  // 新增商品分类
  createProductCategory: async (data: ProductCategoryVO) => {
    return await request.post({ url: `/erp/product-category/create`, data })
  },
-  // 修改ERP 商品分类
+  // 修改商品分类
  updateProductCategory: async (data: ProductCategoryVO) => {
    return await request.put({ url: `/erp/product-category/update`, data })
  },
-  // 删除ERP 商品分类
+  // 删除商品分类
  deleteProductCategory: async (id: number) => {
    return await request.delete({ url: `/erp/product-category/delete?id=` + id })
  },
-  // 导出ERP 商品分类 Excel
+  // 导出商品分类 Excel
  exportProductCategory: async (params) => {
    return await request.download({ url: `/erp/product-category/export-excel`, params })
  }
 }
\ No newline at end of file
--- a/src/api/erp/product/index.ts
+++ b/src/api/erp/product/index.ts
@@ -32,33 +32,33 @@ export interface ProductVO {
 // ERP 产品 API
 export const ProductApi = {
-  // 查询ERP 产品分页
+  // 查询产品分页
  getProductPage: async (params: any) => {
    return await request.get({ url: `/erp/product/page`, params })
  },
-  // 查询ERP 产品详情
+  // 查询产品详情
  getProduct: async (id: number) => {
    return await request.get({ url: `/erp/product/get?id=` + id })
  },
-  // 新增ERP 产品
+  // 新增产品
  createProduct: async (data: ProductVO) => {
    return await request.post({ url: `/erp/product/create`, data })
  },
-  // 修改ERP 产品
+  // 修改产品
  updateProduct: async (data: ProductVO) => {
    return await request.put({ url: `/erp/product/update`, data })
  },
-  // 删除ERP 产品
+  // 删除产品
  deleteProduct: async (id: number) => {
    return await request.delete({ url: `/erp/product/delete?id=` + id })
  },
-  // 导出ERP 产品 Excel
+  // 导出产品 Excel
  exportProduct: async (params) => {
    return await request.download({ url: `/erp/product/export-excel`, params })
  }
 }
\ No newline at end of file
--- a/src/api/erp/product/unit/index.ts
+++ b/src/api/erp/product/unit/index.ts
@@ -12,33 +12,38 @@ export interface ProductUnitVO {
 // ERP 产品单位 API
 export const ProductUnitApi = {
-  // 查询ERP 产品单位分页
+  // 查询产品单位分页
  getProductUnitPage: async (params: any) => {
    return await request.get({ url: `/erp/product-unit/page`, params })
  },
-  // 查询ERP 产品单位详情
+  // 查询商品单位精简列表
+  getProductUnitSimpleList: async () => {
+    return await request.get({ url: `/erp/product-unit/simple-list` })
+  },
+  // 查询产品单位详情
  getProductUnit: async (id: number) => {
    return await request.get({ url: `/erp/product-unit/get?id=` + id })
  },
-  // 新增ERP 产品单位
+  // 新增产品单位
  createProductUnit: async (data: ProductUnitVO) => {
    return await request.post({ url: `/erp/product-unit/create`, data })
  },
-  // 修改ERP 产品单位
+  // 修改产品单位
  updateProductUnit: async (data: ProductUnitVO) => {
    return await request.put({ url: `/erp/product-unit/update`, data })
  },
-  // 删除ERP 产品单位
+  // 删除产品单位
  deleteProductUnit: async (id: number) => {
    return await request.delete({ url: `/erp/product-unit/delete?id=` + id })
  },
-  // 导出ERP 产品单位 Excel
+  // 导出产品单位 Excel
  exportProductUnit: async (params) => {
    return await request.download({ url: `/erp/product-unit/export-excel`, params })
  }
 }
\ No newline at end of file
--- a/src/views/erp/product/ProductForm.vue
+++ b/src/views/erp/product/ProductForm.vue
@@ -8,44 +8,120 @@
      label-width="100px"
      v-loading="formLoading"
    >
-      <el-form-item label="名称" prop="name">
+      <el-row :gutter="20">
-        <el-input v-model="formData.name" placeholder="请输入名称" />
+        <el-col :span="12">
-      </el-form-item>
+          <el-form-item label="名称" prop="name">
-      <el-form-item label="条码" prop="barCode">
+            <el-input v-model="formData.name" placeholder="请输入名称" />
-        <el-input v-model="formData.barCode" placeholder="请输入条码" />
+          </el-form-item>
-      </el-form-item>
+        </el-col>
-      <el-form-item label="分类编号" prop="categoryId">
+        <el-col :span="12">
-        <el-input v-model="formData.categoryId" placeholder="请输入分类编号" />
+          <el-form-item label="条码" prop="barCode">
-      </el-form-item>
+            <el-input v-model="formData.barCode" placeholder="请输入条码" />
-      <el-form-item label="单位编号" prop="unitId">
+          </el-form-item>
-        <el-input v-model="formData.unitId" placeholder="请输入单位编号" />
+        </el-col>
-      </el-form-item>
+        <el-col :span="12">
-      <el-form-item label="状态" prop="status">
+          <el-form-item label="分类" prop="categoryId">
-        <el-radio-group v-model="formData.status">
+            <el-tree-select
-          <el-radio label="1">请选择字典生成</el-radio>
+              v-model="formData.categoryId"
-        </el-radio-group>
+              :data="categoryList"
-      </el-form-item>
+              :props="defaultProps"
-      <el-form-item label="规格" prop="standard">
+              check-strictly
-        <el-input v-model="formData.standard" placeholder="请输入规格" />
+              default-expand-all
-      </el-form-item>
+              placeholder="请选择分类"
-      <el-form-item label="备注" prop="remark">
+              class="w-1/1"
-        <el-input v-model="formData.remark" placeholder="请输入备注" />
+            />
-      </el-form-item>
+          </el-form-item>
-      <el-form-item label="保质期天数" prop="expiryDay">
+        </el-col>
-        <el-input v-model="formData.expiryDay" placeholder="请输入保质期天数" />
+        <el-col :span="12">
-      </el-form-item>
+          <el-form-item label="单位" prop="unitId">
-      <el-form-item label="基础重量（kg）" prop="weight">
+            <el-select v-model="formData.unitId" clearable placeholder="请选择单位" class="w-1/1">
-        <el-input v-model="formData.weight" placeholder="请输入基础重量（kg）" />
+              <el-option
-      </el-form-item>
+                v-for="unit in unitList"
-      <el-form-item label="采购价格，单位：元" prop="purchasePrice">
+                :key="unit.id"
-        <el-input v-model="formData.purchasePrice" placeholder="请输入采购价格，单位：元" />
+                :label="unit.name"
-      </el-form-item>
+                :value="unit.id"
-      <el-form-item label="销售价格，单位：元" prop="salePrice">
+              />
-        <el-input v-model="formData.salePrice" placeholder="请输入销售价格，单位：元" />
+            </el-select>
-      </el-form-item>
+          </el-form-item>
-      <el-form-item label="最低价格，单位：元" prop="minPrice">
+        </el-col>
-        <el-input v-model="formData.minPrice" placeholder="请输入最低价格，单位：元" />
+        <el-col :span="12">
-      </el-form-item>
+          <el-form-item label="状态" prop="status">
+            <el-radio-group v-model="formData.status">
+              <el-radio
+                v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+                :key="dict.value"
+                :label="dict.value"
+              >
+                {{ dict.label }}
+              </el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="规格" prop="standard">
+            <el-input v-model="formData.standard" placeholder="请输入规格" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="保质期天数" prop="expiryDay">
+            <el-input-number
+              v-model="formData.expiryDay"
+              placeholder="请输入保质期天数"
+              :min="0"
+              :precision="0"
+              class="!w-1/1"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="重量（kg）" prop="weight">
+            <el-input-number
+              v-model="formData.weight"
+              placeholder="请输入重量（kg）"
+              :min="0"
+              class="!w-1/1"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="采购价格" prop="purchasePrice">
+            <el-input-number
+              v-model="formData.purchasePrice"
+              placeholder="请输入采购价格，单位：元"
+              :min="0"
+              :precision="2"
+              class="!w-1/1"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="销售价格" prop="salePrice">
+            <el-input-number
+              v-model="formData.salePrice"
+              placeholder="请输入销售价格，单位：元"
+              :min="0"
+              :precision="2"
+              class="!w-1/1"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="最低价格" prop="minPrice">
+            <el-input-number
+              v-model="formData.minPrice"
+              placeholder="请输入最低价格，单位：元"
+              :min="0"
+              :precision="2"
+              class="!w-1/1"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="备注" prop="remark">
+            <el-input type="textarea" v-model="formData.remark" placeholder="请输入备注" />
+          </el-form-item>
+        </el-col>
+      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
@@ -54,7 +130,12 @@
  </Dialog>
 </template>
 <script setup lang="ts">
-import { ProductApi } from '@/api/erp/product'
+import { ProductApi, ProductVO } from '@/api/erp/product'
+import { ProductCategoryApi, ProductCategoryVO } from '@/api/erp/product/category'
+import { ProductUnitApi, ProductUnitVO } from '@/api/erp/product/unit'
+import { CommonStatusEnum } from '@/utils/constants'
+import { defaultProps, handleTree } from '@/utils/tree'
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 /** ERP 产品 表单 */
 defineOptions({ name: 'ProductForm' })
@@ -89,6 +170,8 @@ const formRules = reactive({
  status: [{ required: true, message: '产品状态不能为空', trigger: 'blur' }]
 })
 const formRef = ref() // 表单 Ref
+const categoryList = ref<ProductCategoryVO[]>([]) // 产品分类列表
+const unitList = ref<ProductUnitVO[]>([]) // 产品单位列表
 /** 打开弹窗 */
 const open = async (type: string, id?: number) => {
@@ -105,6 +188,11 @@ const open = async (type: string, id?: number) => {
      formLoading.value = false
    }
  }
+  // 产品分类
+  const categoryData = await ProductCategoryApi.getProductCategorySimpleList()
+  categoryList.value = handleTree(categoryData, 'id', 'parentId')
+  // 产品单位
+  unitList.value = await ProductUnitApi.getProductUnitSimpleList()
 }
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
@@ -116,7 +204,7 @@ const submitForm = async () => {
  // 提交请求
  formLoading.value = true
  try {
-    const data = formData.value as unknown as ProductApi.ProductVO
+    const data = formData.value as unknown as ProductVO
    if (formType.value === 'create') {
      await ProductApi.createProduct(data)
      message.success(t('common.createSuccess'))
@@ -140,7 +228,7 @@ const resetForm = () => {
    barCode: undefined,
    categoryId: undefined,
    unitId: undefined,
-    status: undefined,
+    status: CommonStatusEnum.ENABLE,
    standard: undefined,
    remark: undefined,
    expiryDay: undefined,

--- a/src/views/erp/product/category/index.vue
+++ b/src/views/erp/product/category/index.vue
@@ -136,12 +136,8 @@ const { t } = useI18n() // 国际化
 const loading = ref(true) // 列表的加载中
 const list = ref<ProductCategoryVO[]>([]) // 列表的数据
 const queryParams = reactive({
-  parentId: undefined,
  name: undefined,
-  code: undefined,
+  status: undefined
-  sort: undefined,
-  status: undefined,
-  createTime: []
 })
 const queryFormRef = ref() // 搜索的表单
 const exportLoading = ref(false) // 导出的加载中

--- a/src/views/erp/product/index.vue
+++ b/src/views/erp/product/index.vue
@@ -9,32 +9,23 @@
      :inline="true"
      label-width="68px"
    >
-      <el-form-item label="产品名称" prop="name">
+      <el-form-item label="名称" prop="name">
        <el-input
          v-model="queryParams.name"
-          placeholder="请输入产品名称"
+          placeholder="请输入名称"
          clearable
          @keyup.enter="handleQuery"
          class="!w-240px"
        />
      </el-form-item>
-      <el-form-item label="产品分类" prop="categoryId">
+      <el-form-item label="分类" prop="categoryId">
-        <el-input
+        <el-tree-select
          v-model="queryParams.categoryId"
-          placeholder="请输入产品分类"
+          :data="categoryList"
-          clearable
+          :props="defaultProps"
-          @keyup.enter="handleQuery"
+          check-strictly
-          class="!w-240px"
+          default-expand-all
-        />
+          placeholder="请输入分类"
-      </el-form-item>
-      <el-form-item label="创建时间" prop="createTime">
-        <el-date-picker
-          v-model="queryParams.createTime"
-          value-format="YYYY-MM-DD HH:mm:ss"
-          type="daterange"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
-          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
          class="!w-240px"
        />
      </el-form-item>
@@ -68,15 +59,16 @@
      <el-table-column label="条码" align="center" prop="barCode" />
      <el-table-column label="名称" align="center" prop="name" />
      <el-table-column label="规格" align="center" prop="standard" />
-      <!-- TODO 芋艿：待实现 -->
+      <el-table-column label="分类" align="center" prop="categoryName" />
-      <el-table-column label="分类" align="center" prop="categoryId" />
+      <el-table-column label="单位" align="center" prop="unitName" />
-      <!-- TODO 芋艿：待实现 -->
-      <el-table-column label="单位" align="center" prop="unitId" />
      <el-table-column label="采购价格" align="center" prop="purchasePrice" />
      <el-table-column label="销售价格" align="center" prop="salePrice" />
      <el-table-column label="最低价格" align="center" prop="minPrice" />
-      <!-- TODO 芋艿：待实现 -->
+      <el-table-column label="状态" align="center" prop="status">
-      <el-table-column label="产品状态" align="center" prop="status" />
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
+        </template>
+      </el-table-column>
      <el-table-column
        label="创建时间"
        align="center"
@@ -122,7 +114,10 @@
 import { dateFormatter } from '@/utils/formatTime'
 import download from '@/utils/download'
 import { ProductApi, ProductVO } from '@/api/erp/product'
+import { ProductCategoryApi, ProductCategoryVO } from '@/api/erp/product/category'
 import ProductForm from './ProductForm.vue'
+import { DICT_TYPE } from '@/utils/dict'
+import { defaultProps, handleTree } from '@/utils/tree'
 /** ERP 产品列表 */
 defineOptions({ name: 'ErpProduct' })
@@ -137,11 +132,11 @@ const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  name: undefined,
-  categoryId: undefined,
+  categoryId: undefined
-  createTime: []
 })
 const queryFormRef = ref() // 搜索的表单
 const exportLoading = ref(false) // 导出的加载中
+const categoryList = ref<ProductCategoryVO[]>([]) // 产品分类列表
 /** 查询列表 */
 const getList = async () => {
@@ -202,7 +197,10 @@ const handleExport = async () => {
 }
 /** 初始化 **/
-onMounted(() => {
+onMounted(async () => {
-  getList()
+  await getList()
+  // 产品分类
+  const categoryData = await ProductCategoryApi.getProductCategorySimpleList()
+  categoryList.value = handleTree(categoryData, 'id', 'parentId')
 })
 </script>
--- a/src/views/erp/product/unit/ProductUnitForm.vue
+++ b/src/views/erp/product/unit/ProductUnitForm.vue
@@ -12,7 +12,13 @@
      </el-form-item>
      <el-form-item label="单位状态" prop="status">
        <el-radio-group v-model="formData.status">
-          <el-radio label="1">请选择字典生成</el-radio>
+          <el-radio
+            v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+            :key="dict.value"
+            :label="dict.value"
+          >
+            {{ dict.label }}
+          </el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
@@ -24,6 +30,8 @@
 </template>
 <script setup lang="ts">
 import { ProductUnitApi } from '@/api/erp/product/unit'
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { CommonStatusEnum } from '@/utils/constants'
 /** ERP 产品单位表单 */
 defineOptions({ name: 'ProductUnitForm' })
@@ -93,7 +101,7 @@ const resetForm = () => {
  formData.value = {
    id: undefined,
    name: undefined,
-    status: undefined
+    status: CommonStatusEnum.ENABLE
  }
  formRef.value?.resetFields()
 }

--- a/src/views/erp/product/unit/index.vue
+++ b/src/views/erp/product/unit/index.vue
@@ -24,20 +24,14 @@
          clearable
          class="!w-240px"
        >
-          <el-option label="请选择字典生成" value="" />
+          <el-option
+            v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
        </el-select>
      </el-form-item>
-      <el-form-item label="创建时间" prop="createTime">
-        <el-date-picker
-          v-model="queryParams.createTime"
-          value-format="YYYY-MM-DD HH:mm:ss"
-          type="daterange"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
-          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
-          class="!w-240px"
-        />
-      </el-form-item>
      <el-form-item>
        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
@@ -65,9 +59,12 @@
  <!-- 列表 -->
  <ContentWrap>
    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
-      <el-table-column label="单位编号" align="center" prop="id" />
+      <el-table-column label="名字" align="center" prop="name" />
-      <el-table-column label="单位名字" align="center" prop="name" />
+      <el-table-column label="状态" align="center" prop="status">
-      <el-table-column label="单位状态" align="center" prop="status" />
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
+        </template>
+      </el-table-column>
      <el-table-column
        label="创建时间"
        align="center"
@@ -114,6 +111,7 @@ import { dateFormatter } from '@/utils/formatTime'
 import download from '@/utils/download'
 import { ProductUnitApi, ProductUnitVO } from '@/api/erp/product/unit'
 import ProductUnitForm from './ProductUnitForm.vue'
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 /** ERP 产品单位列表 */
 defineOptions({ name: 'ErpProductUnit' })
@@ -129,8 +127,7 @@ const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  name: undefined,
-  status: undefined,
+  status: undefined
-  createTime: []
 })
 const queryFormRef = ref() // 搜索的表单
 const exportLoading = ref(false) // 导出的加载中
@@ -186,7 +183,7 @@ const handleExport = async () => {
    // 发起导出
    exportLoading.value = true
    const data = await ProductUnitApi.exportProductUnit(queryParams)
-    download.excel(data, 'ERP 产品单位.xls')
+    download.excel(data, '产品单位.xls')
  } catch {
  } finally {
    exportLoading.value = false