feat:重构模块

src/views/product/detail[id].vue

@@ -0,0 +1,122 @@
+<template>
+  <div class="mobile-product-detail common-mobile-view">
+    <el-form ref="formRef" :model="productStore.currentProduct"
+             :rules="rules" label-width="80px">
+      <el-form-item label="物品名称" prop="name">
+        <el-input v-model="productStore.currentProduct.name" autocomplete="off"
+                  placeholder="请输入物品名称" clearable
+                  show-word-limit maxlength="20">
+        </el-input>
+      </el-form-item>
+
+      <el-form-item label="物品价格" prop="price">
+        <el-input
+            v-model="productStore.currentProduct.price"
+            placeholder="请输入物品价格" clearable
+            :formatter="(value: string) => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
+            :parser="(value: string) => value.replace(/\$\s?|(,*)/g, '')"
+        />
+      </el-form-item>
+
+      <el-form-item label="购买日期" prop="purchaseDate">
+        <el-date-picker
+            v-model="productStore.currentProduct.purchaseDate"
+            type="date" :editable="false" placeholder="请选择购买日期"
+            value-format="YYYY-MM-DD"/>
+      </el-form-item>
+
+      <el-form-item label="购买人" prop="purchaser">
+        <el-select v-model="productStore.currentProduct.purchaser"
+                   placeholder="请选择购买人" clearable>
+          <el-option
+              v-for="(item, index) in ['哥哥', '宝宝']"
+              :key="index" :label="item" :value="item"
+          />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="过期日期" prop="expiryDate">
+        <el-date-picker
+            v-model="productStore.currentProduct.expiryDate"
+            type="date" :editable="false" placeholder="请选择过期日期"
+            value-format="YYYY-MM-DD"/>
+      </el-form-item>
+
+      <el-form-item label="物品分类" prop="category">
+        <el-select v-model="productStore.currentProduct.category"
+                   placeholder="请选择物品分类" clearable
+                   :allow-create="true" :filterable="true">
+          <el-option
+              v-for="(item, index) in productStore.categoryList"
+              :key="index" :label="item" :value="item"
+          />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="购买渠道" prop="channel">
+        <el-input v-model="productStore.currentProduct.channel" autocomplete="off"
+                  placeholder="请输入购买渠道" clearable
+                  show-word-limit maxlength="10">
+        </el-input>
+      </el-form-item>
+
+      <el-form-item label="物品图片">
+        <upload-image v-model="productStore.currentProduct.imageUrl"
+                      :image-limit="1"
+                      :service-url="fileServiceUrl"
+                      :service-file-root-path="serviceFileRootPath"
+                      :image-path="productStore.productImagePath"/>
+      </el-form-item>
+    </el-form>
+
+    <div class="button-container">
+      <el-button type="primary" @click="confirmClick">确认</el-button>
+      <el-button type="info" @click="cancelClick">取消</el-button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { UploadImage } from 'vue3-common'
+import { useProductStore } from '@/store/product.ts'
+import { useAppStore } from '@/store/app.ts'
+import { FormRules } from 'element-plus'
+import { productRules } from '@/utils/element/elRules.ts'
+import { onMounted, reactive, ref } from 'vue'
+import { fileServiceUrl, serviceFileRootPath } from '@/utils'
+
+const formRef = ref()
+const rules = reactive<FormRules>(productRules)
+const productStore = useProductStore()
+const appStore = useAppStore()
+
+onMounted(async () => {
+  appStore.isShowMobileBack = true
+})
+
+/**
+ * 点击确认按钮
+ */
+const confirmClick = () => {
+  formRef.value.validate().then(async () => {
+    await productStore.handleProductApi(productStore.currentProduct)
+    history.back()
+  })
+}
+
+const cancelClick = () => {
+  history.back()
+}
+</script>
+
+<style scoped lang="scss">
+.mobile-product-detail {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+
+  .button-container {
+    align-self: center;
+  }
+}
+</style>

src/views/product/list.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="mobile-product-list common-mobile-view">
+    <product-query />
+
+    <el-empty v-if="productStore.productList.length === 0" description="暂无物品记录"/>
+
+    <div v-else class="product-list">
+      <product-card v-for="(item, index) in productStore.productList"
+                    :key="index" :product-item="item"/>
+    </div>
+
+    <draggable-button @click="addClick"/>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import DraggableButton from '@/components/Common/DraggableButton.vue'
+import ProductQuery from '@/components/Product/ProductQuery.vue'
+import ProductCard from '@/components/Product/ProductCard.vue'
+import { useProductStore } from '@/store/product.ts'
+import { onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+
+const productStore = useProductStore()
+const router = useRouter()
+
+onMounted(async () => {
+  await productStore.queryProductList()
+})
+
+const addClick = () => {
+  productStore.productApiType = 'ADD'
+  productStore.currentProduct = productStore.getEmptyProduct()
+  router.push({ name: 'ProductDetailId', params: { id: 0 } })
+}
+</script>
+
+<style lang="scss">
+.mobile-product-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+
+  .product-list {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+}
+</style>