提交 09774b71 authored 作者: lidongxu's avatar lidongxu

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

上级 e5863d04
......@@ -4,7 +4,6 @@ import { isMobile } from '@/utils'
import PickerSearch from './components/PickerSearch'
// 选择日期
import PickerCalendar from './components/PickerCalendar'
// 指令
import longPress from './directive/touch'
......
......@@ -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>
......
......@@ -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
}
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论