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

src/views/erp/product/ProductForm.vue

@@ -8,44 +8,120 @@
       label-width="100px"
       v-loading="formLoading"
     >
-      <el-form-item label="名称" prop="name">
-        <el-input v-model="formData.name" placeholder="请输入名称" />
-      </el-form-item>
-      <el-form-item label="条码" prop="barCode">
-        <el-input v-model="formData.barCode" placeholder="请输入条码" />
-      </el-form-item>
-      <el-form-item label="分类编号" prop="categoryId">
-        <el-input v-model="formData.categoryId" placeholder="请输入分类编号" />
-      </el-form-item>
-      <el-form-item label="单位编号" prop="unitId">
-        <el-input v-model="formData.unitId" placeholder="请输入单位编号" />
-      </el-form-item>
-      <el-form-item label="状态" prop="status">
-        <el-radio-group v-model="formData.status">
-          <el-radio label="1">请选择字典生成</el-radio>
-        </el-radio-group>
-      </el-form-item>
-      <el-form-item label="规格" prop="standard">
-        <el-input v-model="formData.standard" placeholder="请输入规格" />
-      </el-form-item>
-      <el-form-item label="备注" prop="remark">
-        <el-input v-model="formData.remark" placeholder="请输入备注" />
-      </el-form-item>
-      <el-form-item label="保质期天数" prop="expiryDay">
-        <el-input v-model="formData.expiryDay" placeholder="请输入保质期天数" />
-      </el-form-item>
-      <el-form-item label="基础重量（kg）" prop="weight">
-        <el-input v-model="formData.weight" placeholder="请输入基础重量（kg）" />
-      </el-form-item>
-      <el-form-item label="采购价格，单位：元" prop="purchasePrice">
-        <el-input v-model="formData.purchasePrice" placeholder="请输入采购价格，单位：元" />
-      </el-form-item>
-      <el-form-item label="销售价格，单位：元" prop="salePrice">
-        <el-input v-model="formData.salePrice" placeholder="请输入销售价格，单位：元" />
-      </el-form-item>
-      <el-form-item label="最低价格，单位：元" prop="minPrice">
-        <el-input v-model="formData.minPrice" placeholder="请输入最低价格，单位：元" />
-      </el-form-item>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="名称" prop="name">
+            <el-input v-model="formData.name" placeholder="请输入名称" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="条码" prop="barCode">
+            <el-input v-model="formData.barCode" placeholder="请输入条码" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="分类" prop="categoryId">
+            <el-tree-select
+              v-model="formData.categoryId"
+              :data="categoryList"
+              :props="defaultProps"
+              check-strictly
+              default-expand-all
+              placeholder="请选择分类"
+              class="w-1/1"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="单位" prop="unitId">
+            <el-select v-model="formData.unitId" clearable placeholder="请选择单位" class="w-1/1">
+              <el-option
+                v-for="unit in unitList"
+                :key="unit.id"
+                :label="unit.name"
+                :value="unit.id"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <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,

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,
-  sort: undefined,
-  status: undefined,
-  createTime: []
+  status: undefined
 })
 const queryFormRef = ref() // 搜索的表单
 const exportLoading = ref(false) // 导出的加载中

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-input
+      <el-form-item label="分类" prop="categoryId">
+        <el-tree-select
           v-model="queryParams.categoryId"
-          placeholder="请输入产品分类"
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
-        />
-      </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')]"
+          :data="categoryList"
+          :props="defaultProps"
+          check-strictly
+          default-expand-all
+          placeholder="请输入分类"
           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="categoryId" />
-      <!-- TODO 芋艿：待实现 -->
-      <el-table-column label="单位" align="center" prop="unitId" />
+      <el-table-column label="分类" align="center" prop="categoryName" />
+      <el-table-column label="单位" align="center" prop="unitName" />
       <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,
-  createTime: []
+  categoryId: undefined
 })
 const queryFormRef = ref() // 搜索的表单
 const exportLoading = ref(false) // 导出的加载中
+const categoryList = ref<ProductCategoryVO[]>([]) // 产品分类列表
 
 /** 查询列表 */
 const getList = async () => {
@@ -202,7 +197,10 @@ const handleExport = async () => {
 }
 
 /** 初始化 **/
-onMounted(() => {
-  getList()
+onMounted(async () => {
+  await getList()
+  // 产品分类
+  const categoryData = await ProductCategoryApi.getProductCategorySimpleList()
+  categoryList.value = handleTree(categoryData, 'id', 'parentId')
 })
 </script>

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()
 }

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="status" />
+      <el-table-column label="名字" align="center" prop="name" />
+      <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,
-  createTime: []
+  status: undefined
 })
 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