feat:重构模块

src/components/Food/Form/FoodMaterialDialog.vue

@@ -0,0 +1,92 @@
+<template>
+  <el-dialog v-model="foodStore.foodMaterialDialog.visible"
+             :title="foodStore.foodMaterialDialog.title"
+             center @open="openDialogEvent"
+             class="food-material-dialog">
+    <el-form ref="formRef" :model="foodStore.foodMaterialDialog.data"
+             :rules="rules">
+      <el-form-item label="类型" prop="type">
+        <el-select
+            v-model="foodStore.foodMaterialDialog.data.type"
+            placeholder="请选择类型">
+          <el-option
+              v-for="(item, index) in foodMaterialTypeList"
+              :key="index" :label="item" :value="item"
+          />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="名称" prop="name">
+        <el-input v-model="foodStore.foodMaterialDialog.data.name" autocomplete="off"
+                  placeholder="请输入名称" clearable
+                  show-word-limit maxlength="20">
+        </el-input>
+      </el-form-item>
+
+      <el-form-item label="分量" prop="amount">
+        <el-input v-model="foodStore.foodMaterialDialog.data.amount" autocomplete="off"
+                  placeholder="请输入分量（1斤/2勺/适量）" clearable
+                  show-word-limit maxlength="20">
+        </el-input>
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="cancelClick">取消</el-button>
+        <el-button type="primary" @click="confirmClick">保存</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script lang="ts" setup>
+import { useFoodStore } from '@/store/food.ts'
+import { nextTick, reactive, ref } from 'vue'
+import { FormRules } from 'element-plus'
+import { foodMaterialRules } from '@/utils/element/elRules.ts'
+const rules = reactive<FormRules>(foodMaterialRules)
+
+const formRef = ref()
+const foodStore = useFoodStore()
+
+const foodMaterialTypeList = ['主料', '辅料', '调料']
+
+/**
+ * 打开对话框事件
+ */
+const openDialogEvent = () => {
+  nextTick(() => {
+    formRef.value?.clearValidate()
+  })
+}
+
+/**
+ * 点击确认按钮
+ */
+const confirmClick = () => {
+  formRef.value.validate().then(async () => {
+    if (foodStore.foodMaterialApiType === 'UPDATE') {
+      const { editFoodMaterialIndex: index } = foodStore
+      foodStore.foodRecipeDialog.data.materialList[index] = foodStore.foodMaterialDialog.data
+    } else {
+      foodStore.foodRecipeDialog.data.materialList.push(foodStore.foodMaterialDialog.data)
+    }
+    foodStore.foodMaterialDialog.visible = false
+  })
+}
+
+const cancelClick = () => {
+  foodStore.foodMaterialDialog.visible = false
+}
+</script>
+
+<style lang="scss">
+.food-material-dialog {
+  width: 30%;
+
+  .el-dialog__body {
+    // height: 50vh;
+  }
+}
+</style>

src/components/Food/Form/FoodMaterialForm.vue

@@ -0,0 +1,56 @@
+<template>
+  <el-table :data="foodStore.foodRecipeDialog.data.materialList"
+            border stripe class="material-table">
+    <el-table-column type="index" align="center" width="90">
+      <template #header>
+        <el-button type="primary" @click="handleAddClick">新增</el-button>
+      </template>
+    </el-table-column>
+    <el-table-column prop="type" label="类型" align="center" min-width="10%"/>
+    <el-table-column prop="name" label="名称" align="center" min-width="20%"/>
+    <el-table-column prop="amount" label="分量" align="center" min-width="20%"/>
+    <el-table-column label="操作" align="center" width="100">
+      <template #default="scope">
+        <el-button type="primary" text
+                   @click="handleEditClick(scope.$index, scope.row)">编辑</el-button>
+        <el-button type="danger" text
+                   @click="handleDeleteClick(scope.$index, scope.row)">删除</el-button>
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+
+<script setup lang="ts">
+import { useFoodStore } from '@/store/food.ts'
+import { IFoodMaterial } from '@/types/food.ts'
+import { deepCopyObject } from 'vue3-common/utils/dataUtil'
+import { commonElMessageBox } from 'vue3-common/utils/elUtil'
+
+const foodStore = useFoodStore()
+
+const handleAddClick = () => {
+  foodStore.foodMaterialApiType = 'ADD'
+  foodStore.foodMaterialDialog = {
+    title: '新增食材',
+    visible: true,
+    data: foodStore.getEmptyFoodMaterial()
+  }
+}
+
+const handleEditClick = (index: number, material: IFoodMaterial) => {
+  foodStore.editFoodMaterialIndex = index
+  foodStore.foodMaterialApiType = 'UPDATE'
+  foodStore.foodMaterialDialog = {
+    title: '编辑食材',
+    visible: true,
+    data: deepCopyObject(material)
+  }
+}
+
+const handleDeleteClick = (index: number, material: IFoodMaterial) => {
+  foodStore.foodMaterialApiType = 'DELETE'
+  commonElMessageBox(`确认删除该食材: ${material.name}?`).then(() => {
+    foodStore.foodRecipeDialog.data.materialList.splice(index, 1)
+  })
+}
+</script>

src/components/Food/Form/FoodRecordDialog.vue

@@ -0,0 +1,107 @@
+<template>
+  <el-dialog v-model="dialogData.visible" :title="dialogData.title"
+             center @open="openDialogEvent" class="food-record-dialog">
+    <el-form ref="formRef" :model="dialogData.data"
+             :rules="rules" label-width="80">
+      <el-form-item label="菜谱名称" prop="name">
+        <el-select
+            v-model="dialogData.data.name"
+            @focus="foodStore.queryFoodNameList()"
+            :disabled="foodStore.foodRecordApiType === 'UPDATE'"
+            placeholder="请选择菜谱名称">
+          <el-option
+              v-for="(item, index) in foodStore.foodNameList"
+              :key="index" :label="item" :value="item"
+          />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="完成时间" prop="date">
+        <el-date-picker
+            v-model="dialogData.data.date"
+            type="date" :editable="false" placeholder="请选择完成时间"
+            value-format="YYYY-MM-DD"/>
+      </el-form-item>
+
+      <el-form-item label="完成人" prop="person">
+        <el-select
+            v-model="dialogData.data.person"
+            placeholder="请选择完成人">
+          <el-option
+              v-for="(item, index) in ['哥哥', '宝宝']"
+              :key="index" :label="item" :value="item"
+          />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="图片">
+        <upload-image v-model="dialogData.data.imageUrl"
+                      :service-url="fileServiceUrl"
+                      :image-limit="1"
+                      :service-file-root-path="serviceFileRootPath"
+                      :image-path="foodStore.foodImagePath"/>
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="cancelClick">取消</el-button>
+        <el-button type="primary" @click="confirmClick">保存</el-button>
+        <el-button v-if="foodStore.foodRecordApiType === 'UPDATE'"
+                   type="danger" @click="deleteClick">删除</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script lang="ts" setup>
+import { UploadImage } from 'vue3-common'
+import { useFoodStore } from '@/store/food.ts'
+import { computed, ref, reactive, nextTick } from 'vue'
+import { FormInstance, FormRules } from 'element-plus'
+import { foodRecordRules } from '@/utils/element/elRules.ts'
+import { fileServiceUrl, serviceFileRootPath } from '@/utils'
+import { commonElMessageBox } from 'vue3-common/utils/elUtil'
+
+const rules = reactive<FormRules>(foodRecordRules)
+
+const formRef = ref<FormInstance>()
+const foodStore = useFoodStore()
+
+const dialogData = computed(() => foodStore.foodRecordDialog)
+
+/**
+ * 打开对话框事件
+ */
+const openDialogEvent = async () => {
+  await nextTick(() => {
+    formRef.value?.clearValidate()
+  })
+}
+
+/**
+ * 点击确认按钮
+ */
+const confirmClick = () => {
+  formRef.value?.validate().then(() => {
+    foodStore.handleFoodRecordApi(foodStore.foodRecordDialog.data)
+  })
+}
+
+const cancelClick = () => {
+  dialogData.value.visible = false
+}
+
+const deleteClick = () => {
+  commonElMessageBox('是否确认删除该记录?').then(() => {
+    foodStore.foodRecordApiType = 'DELETE'
+    foodStore.handleFoodRecordApi(dialogData.value.data)
+  })
+}
+</script>
+
+<style lang="scss">
+.food-record-dialog {
+  max-width: 600px;
+}
+</style>

src/components/Food/Form/FoodStepDialog.vue

@@ -0,0 +1,84 @@
+<template>
+  <el-dialog v-model="foodStore.foodStepDialog.visible"
+             :title="foodStore.foodStepDialog.title"
+             center @open="openDialogEvent"
+             class="food-step-dialog">
+    <el-form ref="formRef" :model="foodStore.foodStepDialog.data"
+             :rules="rules">
+      <el-form-item label="内容" prop="content">
+        <el-input v-model="foodStore.foodStepDialog.data.content" autocomplete="off"
+                  placeholder="请输入内容" clearable
+                  show-word-limit maxlength="20">
+        </el-input>
+      </el-form-item>
+
+      <el-form-item label="图片">
+        <upload-image v-model="foodStore.foodStepDialog.data.imageUrl"
+                      :service-url="fileServiceUrl"
+                      :image-limit="1"
+                      :service-file-root-path="serviceFileRootPath"
+                      :image-path="foodStore.foodImagePath"/>
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="cancelClick">取消</el-button>
+        <el-button type="primary" @click="confirmClick">保存</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script lang="ts" setup>
+import { UploadImage } from 'vue3-common'
+import { useFoodStore } from '@/store/food.ts'
+import { ref, reactive, nextTick } from 'vue'
+import { FormRules } from 'element-plus'
+import { foodStepRules } from '@/utils/element/elRules.ts'
+import { fileServiceUrl, serviceFileRootPath } from '@/utils'
+
+const rules = reactive<FormRules>(foodStepRules)
+
+const formRef = ref()
+const foodStore = useFoodStore()
+
+/**
+ * 打开对话框事件
+ */
+const openDialogEvent = () => {
+  nextTick(() => {
+    formRef.value?.clearValidate()
+  })
+}
+
+/**
+ * 点击确认按钮
+ */
+const confirmClick = () => {
+  formRef.value.validate()
+    .then(async () => {
+      if (foodStore.foodStepApiType === 'UPDATE') {
+        const { editFoodStepIndex: index } = foodStore
+        foodStore.foodRecipeDialog.data.stepList[index] = foodStore.foodStepDialog.data
+      } else {
+        foodStore.foodRecipeDialog.data.stepList.push(foodStore.foodStepDialog.data)
+      }
+      foodStore.foodStepDialog.visible = false
+    })
+}
+
+const cancelClick = () => {
+  foodStore.foodStepDialog.visible = false
+}
+</script>
+
+<style lang="scss">
+.food-step-dialog {
+  width: 30%;
+
+  .el-dialog__body {
+    // height: 50vh;
+  }
+}
+</style>

src/components/Food/Form/FoodStepForm.vue

@@ -0,0 +1,79 @@
+<template>
+  <el-table :data="foodStore.foodRecipeDialog.data.stepList"
+            border class="food-step-table">
+    <el-table-column type="index" align="center" width="90">
+      <template #header>
+        <el-button type="primary" @click="handleAddClick">新增</el-button>
+      </template>
+    </el-table-column>
+    <el-table-column prop="content" label="内容" align="center" min-width="20%" />
+    <el-table-column prop="imageUrl" label="图片" align="center" min-width="20%">
+      <template #default="scope">
+        <el-image v-if="scope.row.imageUrl" :src="serviceFileRootPath + scope.row.imageUrl" />
+      </template>
+    </el-table-column>
+
+    <el-table-column label="操作" align="center" width="100">
+      <template #default="scope">
+        <el-button type="primary" text
+                   @click="handleEditClick(scope.$index, scope.row)">编辑</el-button>
+        <el-button type="danger" text
+                   @click="handleDeleteClick(scope.$index)">删除</el-button>
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+
+<script setup lang="ts">
+import { useFoodStore } from '@/store/food.ts'
+import { IFoodStep } from '@/types/food.ts'
+import { deepCopyObject } from 'vue3-common/utils/dataUtil'
+import { commonElMessageBox } from 'vue3-common/utils/elUtil'
+import { serviceFileRootPath } from '@/utils'
+
+const foodStore = useFoodStore()
+
+const handleAddClick = () => {
+  foodStore.foodStepApiType = 'ADD'
+  foodStore.foodStepImageList = []
+  foodStore.foodStepDialog = {
+    title: '新增步骤',
+    visible: true,
+    data: foodStore.getEmptyFoodStep()
+  }
+}
+
+const handleEditClick = (index: number, step: IFoodStep) => {
+  foodStore.editFoodStepIndex = index
+  foodStore.foodStepApiType = 'UPDATE'
+  foodStore.foodStepDialog = {
+    title: '编辑步骤',
+    visible: true,
+    data: deepCopyObject(step)
+  }
+}
+
+const handleDeleteClick = (index: number) => {
+  commonElMessageBox('确认删除该步骤?').then(() => {
+    foodStore.foodStepApiType = 'DELETE'
+    foodStore.foodRecipeDialog.data.stepList.splice(index, 1)
+    foodStore.foodRecipeDialog.data.stepList.forEach((item) => {
+      if (item.sort > index) {
+        item.sort -= 1
+      }
+    })
+  })
+}
+</script>
+
+<style lang="scss">
+.food-step-table {
+  .el-image {
+    width: 100%;
+    height: 100%;
+
+    max-height: 200px;
+    max-width: 200px;
+  }
+}
+</style>