feat:增加Drawer组件

src/components/Product/ProductDrawer.vue

@@ -0,0 +1,168 @@
+<template>
+  <el-drawer v-model="productStore.productDrawer" destroy-on-close
+             :with-header="false" direction="btt" size="95%">
+    <div class="common-mobile-view">
+      <el-form ref="formRef" :model="productStore.currentProduct"
+               :rules="rules" label-position="top" label-width="80px"
+               class="form-item">
+        <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="物品图片">
+          <el-upload
+              v-model:file-list="imageFileList"
+              list-type="picture-card"
+              :accept="acceptImageTypes"
+              :limit="1"
+              :before-upload="beforeUpload"
+              :http-request="httpRequest"
+              :on-success="handleSuccess"
+              :on-exceed="handleExceed"
+              :before-remove="beforeRemove"
+              :on-remove="handleRemove"
+          >
+            <el-icon><Plus /></el-icon>
+            <template #tip>
+              <div class="el-upload__tip">
+                请上传小于10M的图片
+              </div>
+            </template>
+          </el-upload>
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <template #footer>
+      <div style="flex: auto">
+        <el-button type="primary" @click="confirmClick">确认</el-button>
+        <el-button type="info" @click="cancelClick">取消</el-button>
+      </div>
+    </template>
+  </el-drawer>
+</template>
+
+<script lang="ts" setup>
+import { useProductStore } from '@/store/product.ts'
+import { ElMessage, ElMessageBox, FormRules, UploadProps, UploadRawFile, UploadRequestOptions, UploadUserFile } from 'element-plus'
+import { productRules } from '@/utils/element/elRules.ts'
+import { reactive, ref, watch } from 'vue'
+import { acceptImageTypes } from '@/utils/file.ts'
+import { Plus } from '@element-plus/icons-vue'
+import { beforeUploadImage, httpRequestFile } from '@/utils/element/elUpload.ts'
+
+const formRef = ref()
+const rules = reactive<FormRules>(productRules)
+const productStore = useProductStore()
+
+const imageFileList = ref<UploadUserFile[]>([])
+
+watch(() => productStore.productDrawer, (value) => {
+  if (value) {
+    initImageFileList()
+  }
+})
+
+const initImageFileList = () => {
+  imageFileList.value = []
+  const { imageUrl } = productStore.currentProduct
+  if (imageUrl) {
+    imageFileList.value.push({
+      name: 'image',
+      url: imageUrl
+    })
+  }
+}
+
+const beforeUpload: UploadProps['beforeUpload'] = (rawFile: UploadRawFile) => {
+  return beforeUploadImage(rawFile)
+}
+
+const httpRequest: UploadProps['httpRequest'] = async (options: UploadRequestOptions): Promise<any> => {
+  return await httpRequestFile(productStore.productImagePath, options)
+}
+
+const handleSuccess = (response: string) => {
+  productStore.currentProduct.imageUrl = response
+}
+
+const handleExceed: UploadProps['onExceed'] = () => {
+  ElMessage.warning('最多上传1张图片')
+}
+
+const handleRemove: UploadProps['onRemove'] = () => {
+  productStore.currentProduct.imageUrl = ''
+}
+
+const beforeRemove: UploadProps['beforeRemove'] = () => {
+  return ElMessageBox.confirm('确认删除该文件?').then(() => true, () => false)
+}
+
+/**
+ * 点击确认按钮
+ */
+const confirmClick = () => {
+  formRef.value.validate().then(async () => {
+    await productStore.handleProductApi(productStore.currentProduct)
+    productStore.productDrawer = false
+  })
+}
+
+const cancelClick = () => {
+  productStore.productDrawer = false
+}
+</script>