|
|
@@ -1,6 +1,66 @@
|
|
|
<template>
|
|
|
<div class="w-full h-full flex flex-col">
|
|
|
<div class="flex-1 overflow-y-auto">
|
|
|
+ <van-form ref="vanFormRef" show-error :show-error-message="false" label-align="left" input-align="right"
|
|
|
+ class="bg-white" @submit="onSubmit">
|
|
|
+ <van-field v-model="vantFormVal.taskName" name="taskName" rows="2" label="任务名称" maxlength="100" required
|
|
|
+ show-word-limit type="textarea" placeholder="请输入" />
|
|
|
+ <van-field v-model="vantFormVal.priority" name="priority" label="优先级" placeholder="请选择" is-link readonly
|
|
|
+ required @click="showSelectionBox('priority', fixedFieldPriority)">
|
|
|
+ <template #input v-if="vantFormVal.priority || vantFormVal.priority == 0">
|
|
|
+ {{ vantFormVal.priorityName }}
|
|
|
+ </template>
|
|
|
+ </van-field>
|
|
|
+ <van-field v-model="vantFormVal.taskType" name="taskType" label="任务类型" placeholder="请选择" is-link readonly
|
|
|
+ @click="showSelectionBox('taskType', fixedFieldTaskType)" class="resetStyles">
|
|
|
+ <template #input v-if="vantFormVal.taskType || vantFormVal.taskType == 0">
|
|
|
+ {{ vantFormVal.taskTypeName }}
|
|
|
+ </template>
|
|
|
+ </van-field>
|
|
|
+ <!-- 客户选择 -->
|
|
|
+ <template v-if="vantFormVal.taskType == 0">
|
|
|
+ <van-field v-model="vantFormVal.customId" name="customId" label="客户" placeholder="请选择" is-link readonly
|
|
|
+ @click="showSelectionBox('customId', allCustomersList)" class="resetStyles">
|
|
|
+ <template #input v-if="vantFormVal.customId">
|
|
|
+ {{ vantFormVal.customIdName }}
|
|
|
+ </template>
|
|
|
+ </van-field>
|
|
|
+ </template>
|
|
|
+ <!-- 商机选择 -->
|
|
|
+ <template v-if="vantFormVal.taskType == 1">
|
|
|
+ <van-field v-model="vantFormVal.businessOpportunityId" name="businessOpportunityId" label="商机"
|
|
|
+ placeholder="请选择" is-link readonly class="resetStyles"
|
|
|
+ @click="showSelectionBox('businessOpportunityId', allBusinessOpportunities)">
|
|
|
+ <template #input v-if="vantFormVal.businessOpportunityId">
|
|
|
+ {{ vantFormVal.businessOpportunityIdName }}
|
|
|
+ </template>
|
|
|
+ </van-field>
|
|
|
+ </template>
|
|
|
+ <!-- 销售订单选择 -->
|
|
|
+ <template v-if="vantFormVal.taskType == 2">
|
|
|
+ <van-field v-model="vantFormVal.orderId" name="orderId" label="销售订单" placeholder="请选择" is-link readonly
|
|
|
+ class="resetStyles" @click="showSelectionBox('orderId', allSalesOrdersList)">
|
|
|
+ <template #input v-if="vantFormVal.orderId">
|
|
|
+ {{ vantFormVal.orderIdName }}
|
|
|
+ </template>
|
|
|
+ </van-field>
|
|
|
+ </template>
|
|
|
+ <!-- 线索选择 -->
|
|
|
+ <template v-if="vantFormVal.taskType == 3">
|
|
|
+ <van-field v-model="vantFormVal.clueId" name="clueId" label="线索" placeholder="请选择" is-link readonly
|
|
|
+ class="resetStyles" @click="showSelectionBox('clueId', allCluesList)">
|
|
|
+ <template #input v-if="vantFormVal.clueId">
|
|
|
+ {{ vantFormVal.clueIdName }}
|
|
|
+ </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)">
|
|
|
+ <template #input v-if="vantFormVal.contactsId">
|
|
|
+ {{ vantFormVal.contactsIdName }}
|
|
|
+ </template>
|
|
|
+ </van-field>
|
|
|
+ </van-form>
|
|
|
<CustomerForm ref="formFormRef" :formJson="formJson" :formValue="formVal"></CustomerForm>
|
|
|
</div>
|
|
|
<div class="mar-20px ">
|
|
|
@@ -8,12 +68,24 @@
|
|
|
{{ Object.keys(formVal).length > 0 ? '确定修改' : '确定添加' }}
|
|
|
</van-button>
|
|
|
</div>
|
|
|
+
|
|
|
+ <!-- 选择器 -->
|
|
|
+ <div>
|
|
|
+ <!-- 正常下拉框选择 -->
|
|
|
+ <van-popup v-model:show="showSelectionFlag" destroy-on-close position="bottom" :style="{ height: '80%' }">
|
|
|
+ <PullDownSelector :options="showSelectionArray" :doYouNeedTranslation="false" @change="selectChange" />
|
|
|
+ </van-popup>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import { ref, onActivated } from 'vue';
|
|
|
+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 requests from "@common/requests";
|
|
|
+import PullDownSelector from '@components/common/pullDownSelector.vue'
|
|
|
import CustomerForm from '@components/common/formForm/formView.vue'
|
|
|
|
|
|
const props = defineProps({
|
|
|
@@ -22,7 +94,28 @@ const props = defineProps({
|
|
|
});
|
|
|
|
|
|
const formFormRef = ref(null)
|
|
|
+const vantFormVal = ref({
|
|
|
+ taskType: 0,
|
|
|
+ taskTypeName: '客户'
|
|
|
+})
|
|
|
const formVal = ref({})
|
|
|
+const allBusinessOpportunities = ref([])
|
|
|
+const allCustomersList = ref([])
|
|
|
+const allCluesList = ref([])
|
|
|
+const allSalesOrdersList = ref([])
|
|
|
+const allContactsList = ref([])
|
|
|
+const showSelectionFlag = ref(false)
|
|
|
+const showSelectionFiled = ref([])
|
|
|
+const showSelectionArray = ref([])
|
|
|
+const taskTypeFiled = ['customId', 'businessOpportunityId', 'orderId', 'clueId']
|
|
|
+
|
|
|
+const contactDisabled = computed(() => {
|
|
|
+ const taskType = vantFormVal.value?.taskType
|
|
|
+ if(!taskType && taskType != 0) {
|
|
|
+ return true
|
|
|
+ }
|
|
|
+ return false
|
|
|
+})
|
|
|
|
|
|
function onSubmit() {
|
|
|
formFormRef.value.getJsonData().then((res) => {
|
|
|
@@ -30,17 +123,103 @@ function onSubmit() {
|
|
|
})
|
|
|
}
|
|
|
|
|
|
+function selectChange(value, label) {
|
|
|
+ if (taskTypeFiled.includes(showSelectionFiled.value)) {
|
|
|
+ const item = fixedFieldTaskType.find(item => item.value == vantFormVal.value.taskType)
|
|
|
+ console.log(item, value, )
|
|
|
+ if (item && item.show) {
|
|
|
+ getContactData(showSelectionFiled.value, value)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ vantFormVal.value[showSelectionFiled.value] = value
|
|
|
+ vantFormVal.value[`${showSelectionFiled.value}Name`] = label
|
|
|
+ showSelectionFlag.value = false
|
|
|
+}
|
|
|
+
|
|
|
+function showSelectionBox(filed, list = [], event) {
|
|
|
+ if (taskTypeFiled.includes(filed)) {
|
|
|
+ const fileds = taskTypeFiled.filter(item => item !== filed)
|
|
|
+ fileds.forEach(item => {
|
|
|
+ vantFormVal.value[item] = ''
|
|
|
+ vantFormVal.value[`${item}Name`] = ''
|
|
|
+ })
|
|
|
+ vantFormVal.value.contactsId = ''
|
|
|
+ vantFormVal.value[`contactsIdName`] = ''
|
|
|
+ }
|
|
|
+ showSelectionFiled.value = filed
|
|
|
+ showSelectionArray.value = list
|
|
|
+ showSelectionFlag.value = true
|
|
|
+}
|
|
|
+
|
|
|
+function getContactData(filed, value) {
|
|
|
+ const urlType = {
|
|
|
+ 'customId': 'customerId',
|
|
|
+ 'businessOpportunityId': 'businessId',
|
|
|
+ 'orderId': 'salesId',
|
|
|
+ }
|
|
|
+ const url = `${GET_CONTACTS_WITH_MORE_I_DS}?${urlType[filed]}=${value}`
|
|
|
+ requests.get(url).then(({ data = [] }) => {
|
|
|
+ let list = data.map(item => {
|
|
|
+ return {
|
|
|
+ label: item.name,
|
|
|
+ value: item.id,
|
|
|
+ }
|
|
|
+ })
|
|
|
+ if(!allContactsList.value.length) {
|
|
|
+ list = [{}]
|
|
|
+ }
|
|
|
+ allContactsList.value = list
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+function getAllListData() {
|
|
|
+ requests.post(GET_ALL_CUSTOMERSLIST, {}).then(res => {
|
|
|
+ allCustomersList.value = res.data.map(item => {
|
|
|
+ return {
|
|
|
+ label: item.customName,
|
|
|
+ value: item.id,
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ requests.post(GET_ALL_BUSINESS_OPPORTUNITIES, {}).then(res => {
|
|
|
+ allBusinessOpportunities.value = res.data.map(item => {
|
|
|
+ return {
|
|
|
+ label: item.name,
|
|
|
+ value: item.id,
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ requests.post(GET_SALES_ORDER_LIST, { pageIndex: -1, pageSize: -1 }).then(({ data }) => {
|
|
|
+ allSalesOrdersList.value = (data.record || []).map(item => {
|
|
|
+ return {
|
|
|
+ label: item.orderName,
|
|
|
+ value: item.id,
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ requests.post(GET_OBTAIN_ALL_CLUES, {}).then(res => {
|
|
|
+ allCluesList.value = res.data.map(item => {
|
|
|
+ return {
|
|
|
+ label: item.clueName,
|
|
|
+ value: item.id,
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
useLifecycle({
|
|
|
load: () => {
|
|
|
formVal.value = props.formValue
|
|
|
+ getAllListData()
|
|
|
},
|
|
|
init: () => {
|
|
|
formVal.value = props.formValue
|
|
|
+ getAllListData()
|
|
|
}
|
|
|
});
|
|
|
|
|
|
onActivated(() => {
|
|
|
-
|
|
|
+
|
|
|
})
|
|
|
</script>
|
|
|
|
