refactor(promotion): 修改：促销计划中，新增和变更时弹框中去掉促销员工资和杂费，改为是否有促销台和活动品项，并增加午休开始和结束时间（PC 端完成）

src/mobile/main.js

@@ -4,7 +4,6 @@ import { isMobile } from '@/utils'
 import PickerSearch from './components/PickerSearch'
 // 选择日期
 import PickerCalendar from './components/PickerCalendar'
-
 // 指令
 import longPress from './directive/touch'
 

src/mobile/views/promotion/plan/detail/index.vue

@@ -49,18 +49,27 @@
             <span>上班时间：</span>
             <span>{{ parseTime(planDetail.clockInTime, "{h}:{i}:{s}") }}</span>
           </p>
+          <p>
+            <span>午休开始时间：</span>
+            <span>{{ parseTime(planDetail.noonClockOutTime, "{h}:{i}:{s}") }}</span>
+          </p>
+          <p>
+            <span>午休结束时间：</span>
+            <span>{{ parseTime(planDetail.noonClockInTime, "{h}:{i}:{s}") }}</span>
+          </p>
           <p>
             <span>下班时间：</span>
             <span>{{ parseTime(planDetail.clockOutTime, "{h}:{i}:{s}") }}</span>
           </p>
-          <p>
+
+          <!-- <p>
             <span>促销员薪资：</span>
             <span>¥{{ planDetail.salary }}</span>
           </p>
           <p>
             <span>杂费：</span>
             <span>¥{{ planDetail.incidentals }}</span>
-          </p>
+          </p> -->
           <p>
             <span>经销商：</span>
             <span>{{ planDetail.dealerName }}</span>

src/mobile/views/promotion/plan/editing/index.vue

@@ -63,7 +63,7 @@
             :disabled="isCityManager"
             :rules="[{ required: true, message: '请选择归属人' }]"
             @click="selEmployee" />
-          <van-field v-model="form.inTime"
+          <van-field :modelValue="form.inTime.join(':')"
             is-link
             readonly
             name="inTime"
@@ -72,7 +72,25 @@
             required
             :rules="[{ required: true, message: '请选择时间' }]"
             @click="selInTime" />
-          <van-field v-model="form.outTime"
+          <van-field :modelValue="form.noonOutTime.join(':')"
+            is-link
+            readonly
+            :disabled="!form.inTime.length"
+            name="noonOutTime"
+            label="午休开始时间"
+            placeholder="请选择时间"
+            :rules="[{ required: true, message: '请选择午休开始时间' }]"
+            @click="showNoonOutTimePicker = true" />
+          <van-field :modelValue="form.noonInTime.join(':')"
+            is-link
+            readonly
+            :disabled="!form.noonOutTime.length"
+            name="noonInTime"
+            label="午休结束时间"
+            placeholder="请选择时间"
+            :rules="[{ required: true, message: '请选择午休结束时间' }]"
+            @click="showNoonInTimePicker = true" />
+          <van-field :modelValue="form.outTime.join(':')"
             is-link
             readonly
             :disabled="!form.inTime"
@@ -81,8 +99,38 @@
             placeholder="请选择时间"
             required
             :rules="[{ required: true, message: '请选择时间' }]"
-            @click="selOutTime" />
-          <van-field v-model="form.salary"
+            @click="showOutTimePicker = true" />
+          <van-field v-model="form.temWlSct"
+            readonly
+            name="temWlSct"
+            label="是否有试吃台"
+            placeholder="是否有试吃台"
+            required
+            :rules="[{ validator: validatorTemWlSct, message: '请选择是否有试吃台' }]"
+            :error-message="errorTemWlSctMessage">
+            <template #input>
+              <van-radio-group v-model="form.temWlSct"
+                direction="horizontal">
+                <van-radio icon-size="16px"
+                  name="有">有</van-radio>
+                <van-radio icon-size="16px"
+                  name="无">无</van-radio>
+              </van-radio-group>
+            </template>
+          </van-field>
+
+          <van-field v-model="form.prdClass"
+            is-link
+            readonly
+            name="prdClass"
+            label="活动品项"
+            placeholder="请选择活动品项"
+            required
+            :rules="[{ validator: validatorPrdClass, message: '请选择活动品项' }]"
+            :error-message="errorPrdClassMessage"
+            @click="selPrdClass">
+          </van-field>
+          <!-- <van-field v-model="form.salary"
             readonly
             name="salary"
             label="工资"
@@ -111,7 +159,7 @@
                 :min="0"
                 :default-value="0" />
             </template>
-          </van-field>
+          </van-field> -->
         </van-cell-group>
         <div style="margin: 16px;">
           <van-button round
@@ -129,31 +177,57 @@
         </div>
       </van-form>
     </div>
+    <!-- 选择归属人 -->
     <PickerBelong v-model:show="showEmployeePicker"
       @confirm="confirmEmployee" />
+    <!-- 通用选择器 -->
     <PickerSearch v-model:show="showPicker"
       :columns="columns"
       :searchShow="showPickerSearch"
       @search="search"
       @cancel="showPicker = false"
       @confirm="confirm" />
+    <!-- 上班时间选择 -->
     <van-popup v-model:show="showInTimePicker"
       destroy-on-close
       position="bottom">
-      <van-time-picker v-model="inTime"
+      <van-time-picker v-model="form.inTime"
         :formatter="formatterTime"
         @confirm="onConfirmInTime"
         @cancel="showInTimePicker = false"
         title="选择时间" />
     </van-popup>
+    <!-- 午休开始时间选择 -->
+    <van-popup v-model:show="showNoonOutTimePicker"
+      destroy-on-close
+      position="bottom">
+      <van-time-picker v-model="form.noonOutTime"
+        :formatter="formatterTime"
+        :min-time="noonOutTimeMinTime"
+        @confirm="onConfirmNoonOutTime"
+        @cancel="showNoonOutTimePicker = false"
+        title="选择时间" />
+    </van-popup>
+    <!-- 午休结束时间选择 -->
+    <van-popup v-model:show="showNoonInTimePicker"
+      destroy-on-close
+      position="bottom">
+      <van-time-picker v-model="form.noonInTime"
+        :formatter="formatterTime"
+        :min-time="noonInTimeMinTime"
+        @confirm="onConfirmNoonInTime"
+        @cancel="showNoonInTimePicker = false"
+        title="选择时间" />
+    </van-popup>
+    <!-- 下班时间选择 -->
     <van-popup v-model:show="showOutTimePicker"
       destroy-on-close
       position="bottom">
-      <van-time-picker v-model="outTime"
-        :min-time="minTime"
+      <van-time-picker v-model="form.outTime"
+        :min-time="outTimeMinTime"
         :formatter="formatterTime"
         @confirm="onConfirmOutTime"
-        @cancel="showInTimePicker = false"
+        @cancel="showOutTimePicker = false"
         title="选择时间" />
     </van-popup>
   </div>
@@ -169,7 +243,12 @@ const myForm = ref({})
 const { proxy } = getCurrentInstance();
 const empInfo = userStore().empInfo
 const isCityManager = ref(userStore().promotionIdentity)
-const form = reactive({})
+const form = reactive({
+  inTime: [], // 上班时间
+  noonOutTime: [], // 午休开始时间
+  noonInTime: [], // 午休结束时间
+  outTime: [] // 下班时间
+})
 const router = useRouter();
 const route = useRoute()
 const clickBack = () => {
@@ -179,14 +258,16 @@ const editDealerId = ref(null) // 变更计划的经销商 ID
 
 const planId = route.params.planId
 const init = async () => {
+  // 编辑
   const res = await getPlanDetailAPI(planId)
   Object.keys(res.data.planInfo).forEach(o => {
     form[o] = res.data.planInfo[o]
   })
   form.date = parseTime(new Date(form.date), "{y}-{m}-{d}")
-  form.inTime = parseTime(res.data.planInfo.clockInTime, "{h}:{i}")
-  form.outTime = parseTime(res.data.planInfo.clockOutTime, "{h}:{i}")
-  minTime.value = form.inTime + ":00"
+  form.inTime = parseTime(res.data.planInfo.clockInTime, "{h}:{i}").split(":")
+  form.noonInTime = parseTime(res.data.planInfo.noonClockInTime, "{h}:{i}").split(":")
+  form.noonOutTime = parseTime(res.data.planInfo.noonClockOutTime, "{h}:{i}").split(":")
+  form.outTime = parseTime(res.data.planInfo.clockOutTime, "{h}:{i}").split(":")
 
   editDealerId.value = res.data.planInfo.dealerId
 }
@@ -196,6 +277,30 @@ if (planId) {
 
 const errorSalaryMessage = ref('')
 const erroIncidentalMessage = ref('')
+const errorTemWlSctMessage = ref('')
+const errorPrdClassMessage = ref('')
+// 校验试吃台
+const validatorTemWlSct = (value, obj) => {
+  if (!value) {
+    errorTemWlSctMessage.value = obj.message
+    return false
+  } else {
+    errorTemWlSctMessage.value = ''
+    return true
+  }
+}
+// 校验活动品项
+const validatorPrdClass = (value, obj) => {
+  if (!value) {
+    errorPrdClassMessage.value = obj.message
+    return false
+  } else {
+    errorPrdClassMessage.value = ''
+    return true
+  }
+}
+
+// 校验工资
 const validatorSalary = (value, obj) => {
   if (value <= 0) {
     errorSalaryMessage.value = obj.message
@@ -205,6 +310,7 @@ const validatorSalary = (value, obj) => {
     return true
   }
 }
+// 校验杂费
 const validatorIncidentals = (value, obj) => {
   if (value <= 0) {
     erroIncidentalMessage.value = obj.message
@@ -214,16 +320,24 @@ const validatorIncidentals = (value, obj) => {
     return true
   }
 }
+
 const onSubmit = async () => {
   form.operNo = empInfo.empNo
   form.operName = empInfo.empName
   form.operId = empInfo.empId
+  const obj = {
+    ...form,
+    inTime: form.inTime.join(":"),
+    noonOutTime: form.noonOutTime.join(":"),
+    noonInTime: form.noonInTime.join(":"),
+    outTime: form.outTime.join(":"),
+  }
 
   if (planId) {
-    const res = await updatePlanByWebAPI(form)
+    const res = await updatePlanByWebAPI(obj)
     proxy.$modal.msgSuccess(res.msg)
   } else {
-    const res = await addPlanByWebAPI(form)
+    const res = await addPlanByWebAPI(obj)
     proxy.$modal.msgSuccess(res.msg)
   }
 
@@ -237,7 +351,6 @@ const selStoreName = async () => {
   await getStoreList()
   showPickerSearch.value = true
   searchPlaceholder.value = '搜索门店名称'
-
 }
 // 获取门店列表
 const getStoreList = async (storeName) => {
@@ -283,7 +396,7 @@ const planMinDate = computed(() => {
   }
 })
 
-// 选择计划
+// 活动计划
 const selPattern = () => {
   isType.value = '计划'
   showPicker.value = true
@@ -315,29 +428,58 @@ onMounted(() => {
 
 // 上班打卡时间
 const showInTimePicker = ref(false)
-const inTime = ref([]) // 选择器里的时间
 const selInTime = () => {
   showInTimePicker.value = true
-  inTime.value = form.inTime ? form.inTime.split(":") : [new Date().getHours(), new Date().getMinutes()]
+  form.inTime = [new Date().getHours(), new Date().getMinutes()]
 }
 const onConfirmInTime = (value) => {
+  form.inTime = [...value.selectedValues]
+  // 下个选择时间器，最小选择时间，分钟往后增加 1
+  value.selectedValues[1] = value.selectedValues[1] * 1 + 1
+  if (value.selectedValues[1] < 10) {
+    value.selectedValues[1] = '0' + value.selectedValues[1]
+  }
+  noonOutTimeMinTime.value = value.selectedValues.join(':') + ":00"
+  outTimeMinTime.value = value.selectedValues.join(':') + ":00"
   showInTimePicker.value = false
-  form.inTime = value.selectedValues.join(':')
-  minTime.value = value.selectedValues.join(':') + ":00"
-  form.outTime = ''
+}
+
+// 午休开始时间
+const showNoonOutTimePicker = ref(false)
+const noonOutTimeMinTime = ref("00:00:00") // 最小时间范围
+const onConfirmNoonOutTime = (value) => {
+  showNoonOutTimePicker.value = false
+  form.noonOutTime = [...value.selectedValues]
+  // 下个选择时间器，最小选择时间，分钟往后增加 1
+  value.selectedValues[1] = value.selectedValues[1] * 1 + 1
+  if (value.selectedValues[1] < 10) {
+    value.selectedValues[1] = '0' + value.selectedValues[1]
+  }
+  noonOutTimeMinTime.value = value.selectedValues.join(':') + ":00"
+  noonInTimeMinTime.value = value.selectedValues.join(':') + ":00"
+  outTimeMinTime.value = value.selectedValues.join(':') + ":00"
+}
+
+// 午休结束时间
+const showNoonInTimePicker = ref(false)
+const noonInTimeMinTime = ref("00:00:00") // 最小时间范围
+const onConfirmNoonInTime = (value) => {
+  showNoonInTimePicker.value = false
+  form.noonInTime = [...value.selectedValues]
+  // 下个选择时间器，最小选择时间，分钟往后增加 1
+  value.selectedValues[1] = value.selectedValues[1] * 1 + 1
+  if (value.selectedValues[1] < 10) {
+    value.selectedValues[1] = '0' + value.selectedValues[1]
+  }
+  outTimeMinTime.value = value.selectedValues.join(':') + ":00"
 }
 
 // 下班打卡时间
 const showOutTimePicker = ref(false)
-const outTime = ref([]) // 选择器里的时间
-const minTime = ref([])
-const selOutTime = () => {
-  showOutTimePicker.value = true
-  outTime.value = form.outTime ? form.outTime.split(":") : [new Date().getHours(), new Date().getMinutes()]
-}
+const outTimeMinTime = ref("00:00:00")
 const onConfirmOutTime = (value) => {
   showOutTimePicker.value = false
-  form.outTime = value.selectedValues.join(':')
+  form.outTime = [...value.selectedValues]
 }
 
 const formatterTime = (type, option) => {
@@ -350,19 +492,36 @@ const formatterTime = (type, option) => {
   return option;
 };
 
+// 活动品项
+const selPrdClass = () => {
+  isType.value = '品项'
+  showPicker.value = true
+  showPickerSearch.value = false
+  searchPlaceholder.value = '搜索品项名称'
+  columns.value = [
+    { text: '老品', value: '老品' },
+    { text: '黑鸭', value: '黑鸭' },
+    { text: '散称', value: '散称' },
+  ]
+}
+
 // 重置表单
 const reset = () => {
   myForm.value.resetValidation()
   errorSalaryMessage.value = ''
   erroIncidentalMessage.value = ''
+  errorTemWlSctMessage.value = ''
+  errorPrdClassMessage.value = ''
   form.storeName = ''
   form.date = ''
   form.pattern = ''
   form.employeeName = ''
   form.inTime = ''
   form.outTime = ''
-  form.salary = 0
-  form.incidentals = 0
+  form.temWlSct = ''
+  form.prdClass = ''
+  // form.salary = 0
+  // form.incidentals = 0
   editDealerId.value = null
 }
 
@@ -395,6 +554,9 @@ const confirm = (value) => {
   } else if (isType.value === '计划') {
     const { selectedOptions } = value
     form.pattern = selectedOptions[0]?.text
+  } else if (isType.value === '品项') {
+    const { selectedOptions } = value
+    form.prdClass = selectedOptions[0]?.text
   }
   showPicker.value = false
 }