餐饮计划增加中餐附加菜品选择

src/views/system/food/CateringPlan/AddForm.vue

@@ -147,6 +147,19 @@
             placeholder="请选择"
             style="width: 100%"
           />
+          <el-select-v2
+            v-if="isLunchMeal(scope.row.mealTimes)"
+            filterable
+            :options="foodLists"
+            :props="{ label: 'foodName', value: 'foodName' }"
+            multiple
+            :multiple-limit="2"
+            collapse-tags
+            collapse-tags-tooltip
+            v-model="scope.row.mondayExtra"
+            placeholder="附加菜品（最多2个）"
+            style="width: 100%; margin-top: 6px"
+          />
         </template>
       </el-table-column>
       <el-table-column prop="outDate" header-align="center" align="center" label="周二">
@@ -163,6 +176,19 @@
             placeholder="请选择"
             style="width: 100%"
           />
+          <el-select-v2
+            v-if="isLunchMeal(scope.row.mealTimes)"
+            filterable
+            :options="foodLists"
+            :props="{ label: 'foodName', value: 'foodName' }"
+            multiple
+            :multiple-limit="2"
+            collapse-tags
+            collapse-tags-tooltip
+            v-model="scope.row.tuesdayExtra"
+            placeholder="附加菜品（最多2个）"
+            style="width: 100%; margin-top: 6px"
+          />
         </template>
       </el-table-column>
       <el-table-column prop="comeDate" header-align="center" align="center" label="周三">
@@ -179,6 +205,19 @@
             placeholder="请选择"
             style="width: 100%"
           />
+          <el-select-v2
+            v-if="isLunchMeal(scope.row.mealTimes)"
+            filterable
+            :options="foodLists"
+            :props="{ label: 'foodName', value: 'foodName' }"
+            multiple
+            :multiple-limit="2"
+            collapse-tags
+            collapse-tags-tooltip
+            v-model="scope.row.wednesdayExtra"
+            placeholder="附加菜品（最多2个）"
+            style="width: 100%; margin-top: 6px"
+          />
         </template>
       </el-table-column>
       <el-table-column prop="updateDate" header-align="center" align="center" label="周四">
@@ -195,6 +234,19 @@
             placeholder="请选择"
             style="width: 100%"
           />
+          <el-select-v2
+            v-if="isLunchMeal(scope.row.mealTimes)"
+            filterable
+            :options="foodLists"
+            :props="{ label: 'foodName', value: 'foodName' }"
+            multiple
+            :multiple-limit="2"
+            collapse-tags
+            collapse-tags-tooltip
+            v-model="scope.row.thursdayExtra"
+            placeholder="附加菜品（最多2个）"
+            style="width: 100%; margin-top: 6px"
+          />
         </template>
       </el-table-column>
       <el-table-column prop="updateDate" header-align="center" align="center" label="周五">
@@ -211,6 +263,19 @@
             placeholder="请选择"
             style="width: 100%"
           />
+          <el-select-v2
+            v-if="isLunchMeal(scope.row.mealTimes)"
+            filterable
+            :options="foodLists"
+            :props="{ label: 'foodName', value: 'foodName' }"
+            multiple
+            :multiple-limit="2"
+            collapse-tags
+            collapse-tags-tooltip
+            v-model="scope.row.fridayExtra"
+            placeholder="附加菜品（最多2个）"
+            style="width: 100%; margin-top: 6px"
+          />
         </template>
       </el-table-column>
       <el-table-column prop="updateDate" header-align="center" align="center" label="周六">
@@ -227,6 +292,19 @@
             placeholder="请选择"
             style="width: 100%"
           />
+          <el-select-v2
+            v-if="isLunchMeal(scope.row.mealTimes)"
+            filterable
+            :options="foodLists"
+            :props="{ label: 'foodName', value: 'foodName' }"
+            multiple
+            :multiple-limit="2"
+            collapse-tags
+            collapse-tags-tooltip
+            v-model="scope.row.saturdayExtra"
+            placeholder="附加菜品（最多2个）"
+            style="width: 100%; margin-top: 6px"
+          />
         </template>
       </el-table-column>
       <el-table-column prop="updateDate" header-align="center" align="center" label="周日">
@@ -243,6 +321,19 @@
             placeholder="请选择"
             style="width: 100%"
           />
+          <el-select-v2
+            v-if="isLunchMeal(scope.row.mealTimes)"
+            filterable
+            :options="foodLists"
+            :props="{ label: 'foodName', value: 'foodName' }"
+            multiple
+            :multiple-limit="2"
+            collapse-tags
+            collapse-tags-tooltip
+            v-model="scope.row.sundayExtra"
+            placeholder="附加菜品（最多2个）"
+            style="width: 100%; margin-top: 6px"
+          />
         </template>
       </el-table-column>
     </el-table>
@@ -294,7 +385,7 @@ const currentMonth = ref() //当前时间
 
 const isDetail = ref(false) // 是否详情打开
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
-let dataForm = ref({
+let dataForm = ref<any>({
   // 表单字段
   id: undefined,
   restaurantId: '',
@@ -315,6 +406,87 @@ const dataRule = reactive<FormRules>({
 
 //const selectable = (row: any) => ![0,1, 2].includes(row.indexs)
 
+const isLunchMeal = (mealTimes?: string) => {
+  return mealTimes === '中餐' || mealTimes === '午餐'
+}
+
+const createMealItem = (mealTimes: string, indexs?: number) => {
+  const base = {
+    mealTimes,
+    monday: [],
+    tuesday: [],
+    wednesday: [],
+    thursday: [],
+    friday: [],
+    saturday: [],
+    sunday: [],
+    mondayExtra: [],
+    tuesdayExtra: [],
+    wednesdayExtra: [],
+    thursdayExtra: [],
+    fridayExtra: [],
+    saturdayExtra: [],
+    sundayExtra: []
+  }
+  return indexs === undefined ? base : { ...base, indexs }
+}
+
+const parseWeekFields = (bean) => {
+  const fields = [
+    'monday',
+    'tuesday',
+    'wednesday',
+    'thursday',
+    'friday',
+    'saturday',
+    'sunday',
+    'mondayExtra',
+    'tuesdayExtra',
+    'wednesdayExtra',
+    'thursdayExtra',
+    'fridayExtra',
+    'saturdayExtra',
+    'sundayExtra'
+  ]
+  fields.forEach((field) => {
+    const val = bean[field]
+    if (Array.isArray(val)) {
+      return
+    }
+    if (!val) {
+      bean[field] = []
+      return
+    }
+    try {
+      bean[field] = JSON.parse(val)
+    } catch (e) {
+      bean[field] = []
+    }
+  })
+}
+
+const stringifyWeekFields = (bean) => {
+  const fields = [
+    'monday',
+    'tuesday',
+    'wednesday',
+    'thursday',
+    'friday',
+    'saturday',
+    'sunday',
+    'mondayExtra',
+    'tuesdayExtra',
+    'wednesdayExtra',
+    'thursdayExtra',
+    'fridayExtra',
+    'saturdayExtra',
+    'sundayExtra'
+  ]
+  fields.forEach((field) => {
+    bean[field] = JSON.stringify(Array.isArray(bean[field]) ? bean[field] : [])
+  })
+}
+
 const deleteItems = () => {
   dataForm.value.items = removeElementsFromA(dataForm.value.items, multipleSelection.value)
 }
@@ -396,9 +568,9 @@ const removeElementsFromA = (a, b) => {
 //改变餐厅
 const changeRestaurant = (e) => {
   dataForm.value.items = []
-  dataForm.value.items.push({ mealTimes: '早餐', indexs: 0 })
-  dataForm.value.items.push({ mealTimes: '中餐', indexs: 1 })
-  dataForm.value.items.push({ mealTimes: '晚餐', indexs: 2 })
+  dataForm.value.items.push(createMealItem('早餐', 0))
+  dataForm.value.items.push(createMealItem('中餐', 1))
+  dataForm.value.items.push(createMealItem('晚餐', 2))
   dataForm.value.restaurantName = e.restaurantName
   getFoodList(dataForm.value.restaurantId)
 }
@@ -411,8 +583,7 @@ const labelWidth = computed(() => {
 })
 
 const addFormFun = () => {
-  let bean = { mealTimes: '' }
-  dataForm.value.items.push(bean)
+  dataForm.value.items.push(createMealItem(''))
 }
 
 /** 打开弹窗 */
@@ -431,9 +602,9 @@ const open = async (id?: any, copy: boolean = false) => {
     title.value = '编辑食谱周计划'
   } else {
     title.value = '新增食谱周计划'
-    dataForm.value.items.push({ mealTimes: '早餐', indexs: 0 })
-    dataForm.value.items.push({ mealTimes: '中餐', indexs: 1 })
-    dataForm.value.items.push({ mealTimes: '晚餐', indexs: 2 })
+    dataForm.value.items.push(createMealItem('早餐', 0))
+    dataForm.value.items.push(createMealItem('中餐', 1))
+    dataForm.value.items.push(createMealItem('晚餐', 2))
   }
 
   await nextTick(() => {
@@ -453,20 +624,7 @@ const open = async (id?: any, copy: boolean = false) => {
                 bean.id = null
                 bean.cateringPlanId = null
               }
-              let temp = bean.monday
-              bean.monday = JSON.parse(temp)
-              let tempTuesday = bean.tuesday
-              bean.tuesday = JSON.parse(tempTuesday)
-              let temp3 = bean.wednesday
-              bean.wednesday = JSON.parse(temp3)
-              let temp4 = bean.thursday
-              bean.thursday = JSON.parse(temp4)
-              let temp5 = bean.friday
-              bean.friday = JSON.parse(temp5)
-              let temp6 = bean.saturday
-              bean.saturday = JSON.parse(temp6)
-              let temp7 = bean.sunday
-              bean.sunday = JSON.parse(temp7)
+              parseWeekFields(bean)
             }
             dataForm.value.items = res.items
             if (copy) {
@@ -500,20 +658,7 @@ const submitForm = async () => {
     let dataFormUP = JSON.parse(JSON.stringify(dataForm.value)) //拷贝
 
     for (const bean of dataFormUP.items) {
-      let temp = bean.monday
-      bean.monday = JSON.stringify(temp)
-      let tempTuesday = bean.tuesday
-      bean.tuesday = JSON.stringify(tempTuesday)
-      let temp3 = bean.wednesday
-      bean.wednesday = JSON.stringify(temp3)
-      let temp4 = bean.thursday
-      bean.thursday = JSON.stringify(temp4)
-      let temp5 = bean.friday
-      bean.friday = JSON.stringify(temp5)
-      let temp6 = bean.saturday
-      bean.saturday = JSON.stringify(temp6)
-      let temp7 = bean.sunday
-      bean.sunday = JSON.stringify(temp7)
+      stringifyWeekFields(bean)
     }
 
     if (dataForm.value.id) {

src/views/system/food/CateringPlan/DetailsForm.vue

@@ -93,6 +93,12 @@
           <div v-for="(item, index) in scope.row.monday" :key="index">
             {{ item }}
           </div>
+          <div
+            v-if="isLunchMeal(scope.row.mealTimes) && scope.row.mondayExtra && scope.row.mondayExtra.length"
+            class="extra-food"
+          >
+            附加：{{ scope.row.mondayExtra.join('、') }}
+          </div>
         </template>
       </el-table-column>
       <el-table-column prop="outDate" header-align="center" align="center" label="周二">
@@ -100,6 +106,12 @@
           <div v-for="(item, index) in scope.row.tuesday" :key="index">
             {{ item }}
           </div>
+          <div
+            v-if="isLunchMeal(scope.row.mealTimes) && scope.row.tuesdayExtra && scope.row.tuesdayExtra.length"
+            class="extra-food"
+          >
+            附加：{{ scope.row.tuesdayExtra.join('、') }}
+          </div>
         </template>
       </el-table-column>
       <el-table-column prop="comeDate" header-align="center" align="center" label="周三">
@@ -107,6 +119,12 @@
           <div v-for="(item, index) in scope.row.wednesday" :key="index">
             {{ item }}
           </div>
+          <div
+            v-if="isLunchMeal(scope.row.mealTimes) && scope.row.wednesdayExtra && scope.row.wednesdayExtra.length"
+            class="extra-food"
+          >
+            附加：{{ scope.row.wednesdayExtra.join('、') }}
+          </div>
         </template>
       </el-table-column>
       <el-table-column prop="updateDate" header-align="center" align="center" label="周四">
@@ -114,6 +132,12 @@
           <div v-for="(item, index) in scope.row.thursday" :key="index">
             {{ item }}
           </div>
+          <div
+            v-if="isLunchMeal(scope.row.mealTimes) && scope.row.thursdayExtra && scope.row.thursdayExtra.length"
+            class="extra-food"
+          >
+            附加：{{ scope.row.thursdayExtra.join('、') }}
+          </div>
         </template>
       </el-table-column>
       <el-table-column prop="updateDate" header-align="center" align="center" label="周五">
@@ -121,6 +145,12 @@
           <div v-for="(item, index) in scope.row.friday" :key="index">
             {{ item }}
           </div>
+          <div
+            v-if="isLunchMeal(scope.row.mealTimes) && scope.row.fridayExtra && scope.row.fridayExtra.length"
+            class="extra-food"
+          >
+            附加：{{ scope.row.fridayExtra.join('、') }}
+          </div>
         </template>
       </el-table-column>
       <el-table-column prop="updateDate" header-align="center" align="center" label="周六">
@@ -128,6 +158,12 @@
           <div v-for="(item, index) in scope.row.saturday" :key="index">
             {{ item }}
           </div>
+          <div
+            v-if="isLunchMeal(scope.row.mealTimes) && scope.row.saturdayExtra && scope.row.saturdayExtra.length"
+            class="extra-food"
+          >
+            附加：{{ scope.row.saturdayExtra.join('、') }}
+          </div>
         </template>
       </el-table-column>
       <el-table-column prop="updateDate" header-align="center" align="center" label="周日">
@@ -135,6 +171,12 @@
           <div v-for="(item, index) in scope.row.sunday" :key="index">
             {{ item }}
           </div>
+          <div
+            v-if="isLunchMeal(scope.row.mealTimes) && scope.row.sundayExtra && scope.row.sundayExtra.length"
+            class="extra-food"
+          >
+            附加：{{ scope.row.sundayExtra.join('、') }}
+          </div>
         </template>
       </el-table-column>
     </el-table>
@@ -346,6 +388,44 @@ const getRestaurantStr = (id) => {
   }
 }
 
+const isLunchMeal = (mealTimes?: string) => {
+  return mealTimes === '中餐' || mealTimes === '午餐'
+}
+
+const parseWeekFields = (bean) => {
+  const fields = [
+    'monday',
+    'tuesday',
+    'wednesday',
+    'thursday',
+    'friday',
+    'saturday',
+    'sunday',
+    'mondayExtra',
+    'tuesdayExtra',
+    'wednesdayExtra',
+    'thursdayExtra',
+    'fridayExtra',
+    'saturdayExtra',
+    'sundayExtra'
+  ]
+  fields.forEach((field) => {
+    const val = bean[field]
+    if (Array.isArray(val)) {
+      return
+    }
+    if (!val) {
+      bean[field] = []
+      return
+    }
+    try {
+      bean[field] = JSON.parse(val)
+    } catch (e) {
+      bean[field] = []
+    }
+  })
+}
+
 /** 查询餐厅列表 */
 const getListCT = async () => {
   try {
@@ -382,20 +462,7 @@ const open = async (id?: any, detail: boolean = false) => {
       const res = await getCateringPlanId(id)
       dataForm.value = res
       for (const bean of res.items) {
-        let temp = bean.monday;
-        bean.monday = JSON.parse(temp)
-        let tempTuesday = bean.tuesday;
-        bean.tuesday = JSON.parse(tempTuesday)
-        let temp3 = bean.wednesday;
-        bean.wednesday = JSON.parse(temp3)
-        let temp4 = bean.thursday;
-        bean.thursday = JSON.parse(temp4)
-        let temp5 = bean.friday;
-        bean.friday = JSON.parse(temp5)
-        let temp6 = bean.saturday;
-        bean.saturday = JSON.parse(temp6)
-        let temp7 = bean.sunday;
-        bean.sunday = JSON.parse(temp7)
+        parseWeekFields(bean)
       }
       dataForm.value.items =  res.items
       dataForm.value.restaurantName =  getRestaurantStr(dataForm.value.restaurantId)