|
@@ -54,12 +54,104 @@
|
|
|
</template>
|
|
|
</van-field>
|
|
|
</template>
|
|
|
- <van-field v-model="vantFormVal.contactsId" name="contactsId" label="联系人" placeholder="请选择" is-link readonly :disabled="contactDisabled" v-if="fixedFieldTaskType.find(v => v.value == (vantFormVal.taskType || '1'))?.show"
|
|
|
- class="resetStyles" @click="showSelectionBox('contactsId', allContactsList)">
|
|
|
+ <van-field v-model="vantFormVal.contactsId" name="contactsId" label="联系人" placeholder="请选择" is-link readonly
|
|
|
+ :disabled="contactDisabled"
|
|
|
+ v-if="fixedFieldTaskType.find(v => v.value == (vantFormVal.taskType || '1'))?.show" class="resetStyles"
|
|
|
+ @click="showSelectionBox('contactsId', allContactsList)">
|
|
|
<template #input v-if="vantFormVal.contactsId">
|
|
|
{{ vantFormVal.contactsIdName }}
|
|
|
</template>
|
|
|
</van-field>
|
|
|
+ <van-field v-model="vantFormVal.executorId" name="executorId" label="执行人" placeholder="请选择" is-link readonly class="resetStyles"
|
|
|
+ @click="showSelectionBox('executorId', allContactsList)">
|
|
|
+ <template #input v-if="vantFormVal.executorIdName && vantFormVal.executorIdName.length > 0">
|
|
|
+ <TranslationComponent :openId="vantFormVal.executorIdName" />
|
|
|
+ </template>
|
|
|
+ </van-field>
|
|
|
+ <van-field name="isRepeat" label="重复提醒" class="resetStyles">
|
|
|
+ <template #input>
|
|
|
+ <van-switch v-model="vantFormVal.isRepeat" size="small" />
|
|
|
+ </template>
|
|
|
+ </van-field>
|
|
|
+ <!-- 重复提醒 -->
|
|
|
+ <template v-if="vantFormVal.isRepeat">
|
|
|
+ <van-field v-model="vantFormVal.repeatType" name="repeatType" label="重复类型" placeholder="请选择" is-link readonly
|
|
|
+ class="resetStyles" @click="showSelectionBox('repeatType', fixedFieldRepetitiveType)">
|
|
|
+ <template #input v-if="vantFormVal.repeatType">
|
|
|
+ {{ vantFormVal.repeatTypeName }}
|
|
|
+ </template>
|
|
|
+ </van-field>
|
|
|
+ <template v-if="[0, 1, 2, 3, '0', '1', '2', '3'].includes(vantFormVal.repeatType)">
|
|
|
+ <van-field v-model="vantFormVal.repeatDesignSameday" type="digit" name="repeatDesignSameday" label="每"
|
|
|
+ class="resetStyles" v-if="vantFormVal.repeatType == 3">
|
|
|
+ <template #input>
|
|
|
+ <van-stepper v-model="vantFormVal.repeatDesignSameday" :min="0" button-size="1.2rem" theme="round"
|
|
|
+ integer class="mr-2" />
|
|
|
+ </template>
|
|
|
+ <template #extra> 天 </template>
|
|
|
+ </van-field>
|
|
|
+ <van-field name="endType" label="结束" class="resetStyles">
|
|
|
+ <template #input>
|
|
|
+ <van-radio-group v-model="vantFormVal.endType" direction="horizontal" class="flex flex-col"
|
|
|
+ @change="radiogroupChange">
|
|
|
+ <van-radio name="1"><span
|
|
|
+ :class="vantFormVal.endType == 1 ? 'themeTextColor' : ''">永不</span></van-radio>
|
|
|
+ <van-radio name="2" class="mt-3">
|
|
|
+ <van-stepper v-model="vantFormVal.repeatEndCount" :disabled="vantFormVal.endType != 2" :min="0"
|
|
|
+ button-size="1.2rem" theme="round" integer class="mr-2" />
|
|
|
+ 次数以后
|
|
|
+ </van-radio>
|
|
|
+ <van-radio name="3" class="mt-3">
|
|
|
+ <div class="flex items-center">
|
|
|
+ <van-field label="日期" is-link readonly :disabled="vantFormVal.endType != 3" class="selectField"
|
|
|
+ placeholder="请选择" @click="vantFormVal.endType == 3 && showDatePickerBox('repeatEndDate')">
|
|
|
+ <template #input v-if="vantFormVal.repeatEndDate">
|
|
|
+ {{ vantFormVal.repeatEndDate }}
|
|
|
+ </template>
|
|
|
+ </van-field>
|
|
|
+ 以后
|
|
|
+ </div>
|
|
|
+ </van-radio>
|
|
|
+ </van-radio-group>
|
|
|
+ </template>
|
|
|
+ </van-field>
|
|
|
+ </template>
|
|
|
+ <template v-if="[4, '4'].includes(vantFormVal.repeatType)">
|
|
|
+ <div class="flex items-center justify-between px-8 pt-3">
|
|
|
+ <div>自定义日期</div>
|
|
|
+ <div><van-icon name="add-o" class="ml-2 themeTextColor" size="1.3rem" @click="addCustomeDateItem()" /></div>
|
|
|
+ </div>
|
|
|
+ <van-cell-group inset class="additionalCoAuthorship">
|
|
|
+ <template v-for="(item, index) in customeDate">
|
|
|
+ <van-cell :title="`第${index + 1}次重复在`">
|
|
|
+ <template #default>
|
|
|
+ <div class="flex items-center justify-end">
|
|
|
+ <van-stepper v-model="item.value" :min="0" button-size="1.2rem" theme="round" integer
|
|
|
+ class="mr-2" />
|
|
|
+ 之后
|
|
|
+ <van-icon name="delete-o" class="ml-2 text-[red]" size="1.3rem" @click="deleteCustomeDateItem(index)" />
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </van-cell>
|
|
|
+ </template>
|
|
|
+ </van-cell-group>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+
|
|
|
+
|
|
|
+ <van-field label="开始时间" name="startDate" is-link readonly class="resetStyles" placeholder="请选择"
|
|
|
+ @click="showDatePickerBox('startDate')">
|
|
|
+ <template #input v-if="vantFormVal.startDate">
|
|
|
+ {{ vantFormVal.startDate }}
|
|
|
+ </template>
|
|
|
+ </van-field>
|
|
|
+ <van-field label="结束时间" name="endDate" is-link readonly class="resetStyles" placeholder="请选择"
|
|
|
+ @click="showDatePickerBox('endDate')">
|
|
|
+ <template #input v-if="vantFormVal.endDate">
|
|
|
+ {{ vantFormVal.endDate }}
|
|
|
+ </template>
|
|
|
+ </van-field>
|
|
|
+ <div></div>
|
|
|
</van-form>
|
|
|
<CustomerForm ref="formFormRef" :formJson="formJson" :formValue="formVal"></CustomerForm>
|
|
|
</div>
|
|
@@ -71,9 +163,14 @@
|
|
|
|
|
|
<!-- 选择器 -->
|
|
|
<div>
|
|
|
- <!-- 正常下拉框选择 -->
|
|
|
+ <!-- 下拉框选择 -->
|
|
|
<van-popup v-model:show="showSelectionFlag" destroy-on-close position="bottom" :style="{ height: '80%' }">
|
|
|
- <PullDownSelector :options="showSelectionArray" :doYouNeedTranslation="false" @change="selectChange" />
|
|
|
+ <PullDownSelector :options="showSelectionArray" :doYouNeedTranslation="false" @change="selectChange" :multiple-choice="selectMultipleChoice" />
|
|
|
+ </van-popup>
|
|
|
+
|
|
|
+ <!-- 选择日期 -->
|
|
|
+ <van-popup v-model:show="showDatePicker" destroy-on-close position="bottom" :style="{ height: '50%' }">
|
|
|
+ <van-date-picker v-model="showDatePickerVal" @confirm="showPickerConfirm" @cancel="showDatePicker = false" />
|
|
|
</van-popup>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -82,12 +179,16 @@
|
|
|
<script setup>
|
|
|
import { ref, onActivated, computed } from 'vue';
|
|
|
import { useLifecycle } from '@hooks/useCommon.js';
|
|
|
-import { fixedFieldTaskType, fixedFieldPriority } from '@utility/defaultData.js';
|
|
|
-import { GET_ALL_CUSTOMERSLIST, GET_ALL_BUSINESS_OPPORTUNITIES, GET_SALES_ORDER_LIST, GET_OBTAIN_ALL_CLUES, GET_CONTACTS_WITH_MORE_I_DS } from "@hooks/useApi";
|
|
|
+import { fixedFieldTaskType, fixedFieldPriority, fixedFieldRepetitiveType } from '@utility/defaultData.js';
|
|
|
+import { GET_ALL_CUSTOMERSLIST, GET_ALL_BUSINESS_OPPORTUNITIES, GET_SALES_ORDER_LIST, GET_OBTAIN_ALL_CLUES, GET_CONTACTS_WITH_MORE_I_DS, TASK_ADD_EDIT } from "@hooks/useApi";
|
|
|
import requests from "@common/requests";
|
|
|
+import useToast from "@hooks/useToast"
|
|
|
+import dayjs from 'dayjs';
|
|
|
import PullDownSelector from '@components/common/pullDownSelector.vue'
|
|
|
import CustomerForm from '@components/common/formForm/formView.vue'
|
|
|
+import TranslationComponent from '@components/common/translationComponent.vue';
|
|
|
|
|
|
+const { toastText, toastSuccess, toastFail, toastLoading } = useToast()
|
|
|
const props = defineProps({
|
|
|
formJson: { required: true },
|
|
|
formValue: { required: true },
|
|
@@ -96,7 +197,11 @@ const props = defineProps({
|
|
|
const formFormRef = ref(null)
|
|
|
const vantFormVal = ref({
|
|
|
taskType: 0,
|
|
|
- taskTypeName: '客户'
|
|
|
+ taskTypeName: '客户',
|
|
|
+ endType: '1',
|
|
|
+ repeatEndCount: 0,
|
|
|
+ repeatType: 0,
|
|
|
+ repeatTypeName: '每天'
|
|
|
})
|
|
|
const formVal = ref({})
|
|
|
const allBusinessOpportunities = ref([])
|
|
@@ -107,11 +212,25 @@ const allContactsList = ref([])
|
|
|
const showSelectionFlag = ref(false)
|
|
|
const showSelectionFiled = ref([])
|
|
|
const showSelectionArray = ref([])
|
|
|
+const showDatePicker = ref(false)
|
|
|
+const showDatePickerVal = ref(dayjs().format("YYYY-MM-DD").split("-"))
|
|
|
+const showDatePickerFiled = ref('')
|
|
|
+const customeDate = ref([])
|
|
|
+const selectMultipleChoice = ref(false)
|
|
|
const taskTypeFiled = ['customId', 'businessOpportunityId', 'orderId', 'clueId']
|
|
|
|
|
|
const contactDisabled = computed(() => {
|
|
|
const taskType = vantFormVal.value?.taskType
|
|
|
- if(!taskType && taskType != 0) {
|
|
|
+ if (!taskType && taskType != 0) {
|
|
|
+ return true
|
|
|
+ }
|
|
|
+ if(taskType == 0 && !vantFormVal.value.customId) {
|
|
|
+ return true
|
|
|
+ }
|
|
|
+ if(taskType == 1 && !vantFormVal.value.businessOpportunityId) {
|
|
|
+ return true
|
|
|
+ }
|
|
|
+ if(taskType == 2 && !vantFormVal.value.orderId) {
|
|
|
return true
|
|
|
}
|
|
|
return false
|
|
@@ -119,18 +238,56 @@ const contactDisabled = computed(() => {
|
|
|
|
|
|
function onSubmit() {
|
|
|
formFormRef.value.getJsonData().then((res) => {
|
|
|
- console.log('表单验证成功', res, JSON.stringify(res));
|
|
|
+ const formValue = {
|
|
|
+ ...vantFormVal.value,
|
|
|
+ ...formVal.value,
|
|
|
+ ...res.data,
|
|
|
+ repeatDesignDay: customeDate.value.map(item => item.value).join(','),
|
|
|
+ executorId: vantFormVal.value.executorId,
|
|
|
+ isRepeat: vantFormVal.value.isRepeat ? 1 : 0
|
|
|
+ }
|
|
|
+ console.log('formValue', formValue)
|
|
|
+ toastLoading('保存中')
|
|
|
+ requests.post(TASK_ADD_EDIT, { ...formValue }).then(() => {
|
|
|
+ toastSuccess('保存成功')
|
|
|
+ setTimeout(() => {
|
|
|
+ history.back();
|
|
|
+ }, 2000)
|
|
|
+ }).finally(() => {
|
|
|
+
|
|
|
+ })
|
|
|
})
|
|
|
}
|
|
|
|
|
|
+function showPickerConfirm({ selectedValues }) {
|
|
|
+ vantFormVal.value[showDatePickerFiled.value] = selectedValues.join('-')
|
|
|
+ showDatePicker.value = false
|
|
|
+}
|
|
|
+
|
|
|
+function showDatePickerBox(filed) {
|
|
|
+ const dateVal = vantFormVal.value[filed] ? vantFormVal.value[filed] : dayjs().format("YYYY-MM-DD")
|
|
|
+ showDatePickerFiled.value = filed
|
|
|
+ showDatePickerVal.value = dateVal.split("-")
|
|
|
+ showDatePicker.value = true
|
|
|
+}
|
|
|
+
|
|
|
function selectChange(value, label) {
|
|
|
if (taskTypeFiled.includes(showSelectionFiled.value)) {
|
|
|
const item = fixedFieldTaskType.find(item => item.value == vantFormVal.value.taskType)
|
|
|
- console.log(item, value, )
|
|
|
+ console.log(item, value,)
|
|
|
if (item && item.show) {
|
|
|
getContactData(showSelectionFiled.value, value)
|
|
|
}
|
|
|
}
|
|
|
+ if(showSelectionFiled.value == 'repeatType') {
|
|
|
+ vantFormVal.value = {
|
|
|
+ ...vantFormVal.value,
|
|
|
+ endType: 0,
|
|
|
+ repeatEndCount: 0,
|
|
|
+ repeatEndDate: null
|
|
|
+ }
|
|
|
+ customeDate.value = []
|
|
|
+ }
|
|
|
vantFormVal.value[showSelectionFiled.value] = value
|
|
|
vantFormVal.value[`${showSelectionFiled.value}Name`] = label
|
|
|
showSelectionFlag.value = false
|
|
@@ -146,11 +303,37 @@ function showSelectionBox(filed, list = [], event) {
|
|
|
vantFormVal.value.contactsId = ''
|
|
|
vantFormVal.value[`contactsIdName`] = ''
|
|
|
}
|
|
|
+ selectMultipleChoice.value = filed == 'executorId' ? true : false
|
|
|
showSelectionFiled.value = filed
|
|
|
- showSelectionArray.value = list
|
|
|
+ showSelectionArray.value = filed == 'executorId' ? [] : list
|
|
|
showSelectionFlag.value = true
|
|
|
}
|
|
|
|
|
|
+function addCustomeDateItem() {
|
|
|
+ customeDate.value.push({ value: null })
|
|
|
+}
|
|
|
+
|
|
|
+function deleteCustomeDateItem(index) {
|
|
|
+ customeDate.value.splice(index, 1)
|
|
|
+}
|
|
|
+
|
|
|
+function radiogroupChange(val) {
|
|
|
+ switch (val) {
|
|
|
+ case 1:
|
|
|
+ vantFormVal.value.repeatEndDate = ''
|
|
|
+ vantFormVal.value.repeatEndCount = null
|
|
|
+ break;
|
|
|
+ case 2:
|
|
|
+ vantFormVal.value.repeatEndDate = ''
|
|
|
+ break;
|
|
|
+ case 3:
|
|
|
+ vantFormVal.value.repeatEndCount = null
|
|
|
+ break;
|
|
|
+ default:
|
|
|
+ break;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
function getContactData(filed, value) {
|
|
|
const urlType = {
|
|
|
'customId': 'customerId',
|
|
@@ -165,7 +348,7 @@ function getContactData(filed, value) {
|
|
|
value: item.id,
|
|
|
}
|
|
|
})
|
|
|
- if(!allContactsList.value.length) {
|
|
|
+ if (!allContactsList.value.length) {
|
|
|
list = [{}]
|
|
|
}
|
|
|
allContactsList.value = list
|
|
@@ -207,13 +390,54 @@ function getAllListData() {
|
|
|
})
|
|
|
}
|
|
|
|
|
|
+function initializeData() {
|
|
|
+ const row = props.formValue
|
|
|
+ if(!row.id) {
|
|
|
+ vantFormVal.value = {
|
|
|
+ taskType: 0,
|
|
|
+ taskTypeName: '客户',
|
|
|
+ endType: '1',
|
|
|
+ repeatEndCount: 0,
|
|
|
+ repeatType: 0,
|
|
|
+ repeatTypeName: '每天'
|
|
|
+ }
|
|
|
+ formVal.value = props.formValue
|
|
|
+ customeDate.value = []
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ const { id, taskName, priority, taskType, customId, customName, businessOpportunityId, businessOpportunityName, orderId, orderName, clueId, clueNme, contactsId, contactsName
|
|
|
+ , taskExecutors, isRepeat, repeatType, repeatDesignSameday, endType, repeatEndCount, repeatEndDate, repeatDesignDay, executorId, startDate, endDate } = row
|
|
|
+ vantFormVal.value = {
|
|
|
+ id, taskName, priority, taskType, customId, businessOpportunityId, orderId, clueId, contactsId, executorId, repeatType, repeatDesignSameday, endType, repeatEndCount, repeatEndDate, startDate, endDate,
|
|
|
+ isRepeat: isRepeat == 1 ? true : false,
|
|
|
+ executorIdName: taskExecutors || [],
|
|
|
+ contactsIdName: contactsName,
|
|
|
+ clueIdNme: clueNme,
|
|
|
+ orderIdName: orderName,
|
|
|
+ customIdName: customName,
|
|
|
+ businessOpportunityIdName: businessOpportunityName,
|
|
|
+ priorityName: fixedFieldPriority.find(item => item.value == priority)?.label || '',
|
|
|
+ taskTypeName: fixedFieldTaskType.find(item => item.value == taskType)?.label || '',
|
|
|
+ repeatTypenName: fixedFieldRepetitiveType.find(item => item.value == repeatType)?.label || ''
|
|
|
+ }
|
|
|
+
|
|
|
+ const list = repeatDesignDay && repeatDesignDay.split(',') || []
|
|
|
+ customeDate.value = (list || []).map(item => {
|
|
|
+ return {
|
|
|
+ value: item
|
|
|
+ }
|
|
|
+ })
|
|
|
+ formVal.value = props.formValue
|
|
|
+}
|
|
|
+
|
|
|
useLifecycle({
|
|
|
load: () => {
|
|
|
- formVal.value = props.formValue
|
|
|
+ initializeData()
|
|
|
getAllListData()
|
|
|
},
|
|
|
init: () => {
|
|
|
- formVal.value = props.formValue
|
|
|
+ initializeData()
|
|
|
getAllListData()
|
|
|
}
|
|
|
});
|
|
@@ -224,5 +448,17 @@ onActivated(() => {
|
|
|
</script>
|
|
|
|
|
|
<style lang='scss' scoped>
|
|
|
-/* 样式代码 */
|
|
|
+.selectField {
|
|
|
+ padding: 0;
|
|
|
+ width: 12rem;
|
|
|
+ margin-right: 4px;
|
|
|
+}
|
|
|
+
|
|
|
+.selectField :deep(.van-cell__title) {
|
|
|
+ width: 4rem;
|
|
|
+}
|
|
|
+
|
|
|
+.additionalCoAuthorship {
|
|
|
+ border-bottom: 1px solid #EBEDF0
|
|
|
+}
|
|
|
</style>
|