|
|
@@ -0,0 +1,333 @@
|
|
|
+<template>
|
|
|
+ <Page :title="`${addOrEdit ? '编辑' : '新增'}访客计划`">
|
|
|
+ <template v-slot:body>
|
|
|
+ <div class="w-full h-full flex flex-col">
|
|
|
+ <van-form
|
|
|
+ ref="addEditFormRef"
|
|
|
+ show-error
|
|
|
+ :show-error-message="false"
|
|
|
+ label-align="left"
|
|
|
+ input-align="right"
|
|
|
+ class="bg-white flex-1 overflow-y-auto"
|
|
|
+ >
|
|
|
+ <van-field
|
|
|
+ v-model="form.planName"
|
|
|
+ required
|
|
|
+ name="planName"
|
|
|
+ label="计划名称"
|
|
|
+ placeholder="请输入"
|
|
|
+ :rules="[{ required: true, message: '' }]"
|
|
|
+ >
|
|
|
+ </van-field>
|
|
|
+ <van-field
|
|
|
+ v-model="form.customId"
|
|
|
+ is-link
|
|
|
+ readonly
|
|
|
+ required
|
|
|
+ name="customId"
|
|
|
+ label="客户姓名"
|
|
|
+ placeholder="请选择"
|
|
|
+ :rules="[{ required: true, message: '' }]"
|
|
|
+ @click="customerShowPicker = true"
|
|
|
+ >
|
|
|
+ <template #input v-if="form.customId">
|
|
|
+ {{ form.customName }}
|
|
|
+ </template>
|
|
|
+ </van-field>
|
|
|
+ <van-field
|
|
|
+ v-model="form.inchargerId"
|
|
|
+ is-link
|
|
|
+ readonly
|
|
|
+ required
|
|
|
+ name="inchargerId"
|
|
|
+ label="负责人"
|
|
|
+ placeholder="请选择"
|
|
|
+ :rules="[{ required: true, message: '' }]"
|
|
|
+ @click="personnelShowPicker = true"
|
|
|
+ >
|
|
|
+ <template #input v-if="form.inchargerId">
|
|
|
+ {{ form.inchargerName }}
|
|
|
+ </template>
|
|
|
+ </van-field>
|
|
|
+ <van-field
|
|
|
+ v-model="form.visitGoal"
|
|
|
+ is-link
|
|
|
+ readonly
|
|
|
+ required
|
|
|
+ name="visitGoal"
|
|
|
+ label="拜访目的"
|
|
|
+ placeholder="请选择"
|
|
|
+ :rules="[{ required: true, message: '' }]"
|
|
|
+ @click="visitShowPicker = true"
|
|
|
+ >
|
|
|
+ <template #input v-if="form.visitGoal">
|
|
|
+ {{ form.visitGoalName }}
|
|
|
+ </template>
|
|
|
+ </van-field>
|
|
|
+ <van-field
|
|
|
+ v-model="form.visitTime"
|
|
|
+ is-link
|
|
|
+ readonly
|
|
|
+ required
|
|
|
+ name="visitTime"
|
|
|
+ label="拜访时间"
|
|
|
+ placeholder="请选择"
|
|
|
+ :disabled="addOrEdit"
|
|
|
+ :rules="[{ required: true, message: '' }]"
|
|
|
+ @click="showPickerClick('visitTime')"
|
|
|
+ >
|
|
|
+ </van-field>
|
|
|
+ <van-field
|
|
|
+ v-model="form.remindType"
|
|
|
+ class="resetStyles"
|
|
|
+ is-link
|
|
|
+ readonly
|
|
|
+ name="remindType"
|
|
|
+ label="提醒"
|
|
|
+ placeholder="请选择"
|
|
|
+ @click="remindShowPicker = true"
|
|
|
+ >
|
|
|
+ <template #input v-if="form.remindType">
|
|
|
+ {{ form.remindTypeName }}
|
|
|
+ </template>
|
|
|
+ </van-field>
|
|
|
+ <van-field
|
|
|
+ v-model="form.remindTime"
|
|
|
+ v-if="form.remindType == -1"
|
|
|
+ readonly
|
|
|
+ required
|
|
|
+ name="remindTime"
|
|
|
+ label="提醒时间"
|
|
|
+ placeholder="请选择"
|
|
|
+ :disabled="addOrEdit"
|
|
|
+ :rules="[{ required: true, message: '' }]"
|
|
|
+ @click="showPickerClick('remindTime')"
|
|
|
+ >
|
|
|
+ </van-field>
|
|
|
+ <van-field
|
|
|
+ v-model="form.remark"
|
|
|
+ class="resetStyles"
|
|
|
+ type="textarea"
|
|
|
+ name="remark"
|
|
|
+ label="备注"
|
|
|
+ placeholder="请输入"
|
|
|
+ >
|
|
|
+ </van-field>
|
|
|
+ </van-form>
|
|
|
+
|
|
|
+ <div class="flex justify-center mx-5 my-10">
|
|
|
+ <van-button
|
|
|
+ type="primary"
|
|
|
+ block
|
|
|
+ @click="onSubmit"
|
|
|
+ :loading="submitLoading"
|
|
|
+ >
|
|
|
+ 保存
|
|
|
+ </van-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 日期选择器 -->
|
|
|
+ <van-popup
|
|
|
+ v-model:show="showPicker"
|
|
|
+ destroy-on-close
|
|
|
+ position="bottom"
|
|
|
+ :style="{ height: '50%' }"
|
|
|
+ >
|
|
|
+ <van-date-picker
|
|
|
+ v-model="dateSelectionValue"
|
|
|
+ @confirm="showPickerConfirm"
|
|
|
+ @cancel="showPicker = false"
|
|
|
+ />
|
|
|
+ </van-popup>
|
|
|
+ <!-- 客户选择 -->
|
|
|
+ <van-popup
|
|
|
+ v-model:show="customerShowPicker"
|
|
|
+ destroy-on-close
|
|
|
+ position="bottom"
|
|
|
+ :style="{ height: '80%' }"
|
|
|
+ >
|
|
|
+ <PullDownSelector
|
|
|
+ :options="customerAllList"
|
|
|
+ :doYouNeedTranslation="false"
|
|
|
+ @change="customerSelectChange"
|
|
|
+ />
|
|
|
+ </van-popup>
|
|
|
+ <!-- 人员选择 -->
|
|
|
+ <van-popup
|
|
|
+ v-model:show="personnelShowPicker"
|
|
|
+ destroy-on-close
|
|
|
+ position="bottom"
|
|
|
+ :style="{ height: '80%' }"
|
|
|
+ >
|
|
|
+ <PullDownSelector @change="personnelSelectChange" />
|
|
|
+ </van-popup>
|
|
|
+ <!-- 拜访目的 -->
|
|
|
+ <van-popup
|
|
|
+ v-model:show="visitShowPicker"
|
|
|
+ destroy-on-close
|
|
|
+ position="bottom"
|
|
|
+ :style="{ height: '80%' }"
|
|
|
+ >
|
|
|
+ <PullDownSelector
|
|
|
+ :options="purposeOfVisitList"
|
|
|
+ :doYouNeedTranslation="false"
|
|
|
+ @change="visitSelectChange"
|
|
|
+ />
|
|
|
+ </van-popup>
|
|
|
+ <!-- 提醒时间 -->
|
|
|
+ <van-popup
|
|
|
+ v-model:show="remindShowPicker"
|
|
|
+ destroy-on-close
|
|
|
+ position="bottom"
|
|
|
+ :style="{ height: '80%' }"
|
|
|
+ >
|
|
|
+ <PullDownSelector
|
|
|
+ :options="reminderTimeList"
|
|
|
+ :doYouNeedTranslation="false"
|
|
|
+ @change="remindSelectChange"
|
|
|
+ />
|
|
|
+ </van-popup>
|
|
|
+ </template>
|
|
|
+ </Page>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { ref } from "vue";
|
|
|
+import { useLifecycle } from "@hooks/useCommon.js";
|
|
|
+import dayjs from "dayjs";
|
|
|
+import { GET_ALL_CUSTOMERS, RETRIEVE_DICTIONARY_ENTRIES } from "@hooks/useApi";
|
|
|
+import requests from "@common/requests";
|
|
|
+import useRouterStore from "@store/useRouterStore.js";
|
|
|
+import useFixedData from "@store/useFixedData.js";
|
|
|
+import PullDownSelector from "@components/common/pullDownSelector.vue";
|
|
|
+
|
|
|
+const router = useRouterStore();
|
|
|
+const fixedData = useFixedData();
|
|
|
+const form = ref({});
|
|
|
+const addEditFormRef = ref()
|
|
|
+const submitLoading = ref(false);
|
|
|
+const showPicker = ref(false);
|
|
|
+const customerShowPicker = ref(false);
|
|
|
+const personnelShowPicker = ref(false);
|
|
|
+const visitShowPicker = ref(false);
|
|
|
+const remindShowPicker = ref(false);
|
|
|
+const customerAllList = ref([]);
|
|
|
+const purposeOfVisitList = ref([]); // 拜访目的
|
|
|
+const reminderTimeList = ref([]); // 提醒时间
|
|
|
+const dateSelectionValue = dayjs(new Date()).format("YYYY-MM-DD").split("-");
|
|
|
+const dateSelectionFiled = ref("");
|
|
|
+const addOrEdit = ref(true); // true 编辑，false 新增
|
|
|
+
|
|
|
+function onSubmit() {
|
|
|
+ addEditFormRef.value.validate().then((res) => {
|
|
|
+ const data = addEditFormRef.value.getValues()
|
|
|
+ submitLoading.value = true
|
|
|
+ requests.post(PLAN_TO_ADD_EDITORS, { ...data }).then(() => {
|
|
|
+ toastSuccess("保存成功")
|
|
|
+ setTimeout(() => {
|
|
|
+ history.back();
|
|
|
+ }, 2000)
|
|
|
+ }).catch(err => {
|
|
|
+ toastFail(`保存失败：${err.message}`)
|
|
|
+ }).finally(() => {
|
|
|
+ submitLoading.value = false
|
|
|
+ })
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+function customerSelectChange(value, label) {
|
|
|
+ form.value = { ...form.value, customId: value, customName: label };
|
|
|
+ customerShowPicker.value = false;
|
|
|
+}
|
|
|
+
|
|
|
+function personnelSelectChange(value, label) {
|
|
|
+ form.value = {
|
|
|
+ ...form.value,
|
|
|
+ inchargerId: value,
|
|
|
+ inchargerName: label,
|
|
|
+ };
|
|
|
+ personnelShowPicker.value = false;
|
|
|
+}
|
|
|
+
|
|
|
+function visitSelectChange(value, label) {
|
|
|
+ form.value = {
|
|
|
+ ...form.value,
|
|
|
+ visitGoal: value,
|
|
|
+ visitGoalName: label,
|
|
|
+ };
|
|
|
+ visitShowPicker.value = false;
|
|
|
+}
|
|
|
+
|
|
|
+function remindSelectChange(value, label) {
|
|
|
+ form.value = { ...form.value, remindType: value, remindTypeName: label };
|
|
|
+ remindShowPicker.value = false;
|
|
|
+}
|
|
|
+
|
|
|
+function showPickerConfirm({ selectedValues }) {
|
|
|
+ form.value[dateSelectionFiled.value] = selectedValues.join("-");
|
|
|
+ showPicker.value = false;
|
|
|
+}
|
|
|
+
|
|
|
+function showPickerClick(filed) {
|
|
|
+ (dateSelectionValue.value = form.value[filed]
|
|
|
+ ? form.value[filed]
|
|
|
+ : dayjs(new Date()).format("YYYY-MM-DD").split("-")),
|
|
|
+ (dateSelectionFiled.value = filed);
|
|
|
+ showPicker.value = true;
|
|
|
+}
|
|
|
+
|
|
|
+function processingDataSource(data) {
|
|
|
+ const row = JSON.parse(data.row);
|
|
|
+ addOrEdit.value = Object.keys(row).length > 0 ? true : false;
|
|
|
+ obtainThePurposeOfTheVisit();
|
|
|
+ getReminderTime();
|
|
|
+ getAllCustomers();
|
|
|
+}
|
|
|
+
|
|
|
+function getAllCustomers() {
|
|
|
+ requests.post(GET_ALL_CUSTOMERS, {}).then((res) => {
|
|
|
+ customerAllList.value = res.data.map((item) => {
|
|
|
+ return {
|
|
|
+ label: item.customName,
|
|
|
+ value: item.id,
|
|
|
+ };
|
|
|
+ });
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+function obtainThePurposeOfTheVisit() {
|
|
|
+ requests.get(`${RETRIEVE_DICTIONARY_ENTRIES}?code=VisitGoal`).then((res) => {
|
|
|
+ purposeOfVisitList.value = res.data.map((item) => {
|
|
|
+ return {
|
|
|
+ label: item.name,
|
|
|
+ value: item.id,
|
|
|
+ };
|
|
|
+ });
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+function getReminderTime() {
|
|
|
+ requests.get(`${RETRIEVE_DICTIONARY_ENTRIES}?code=RemindType`).then((res) => {
|
|
|
+ let list = res.data.map((item) => {
|
|
|
+ return {
|
|
|
+ label: item.name,
|
|
|
+ value: item.id,
|
|
|
+ };
|
|
|
+ });
|
|
|
+ list.push({ value: -1, label: "自定义时间" });
|
|
|
+ reminderTimeList.value = list;
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+useLifecycle({
|
|
|
+ load: () => {
|
|
|
+ router.on("addEditorVisitorParameter", (data) => {
|
|
|
+ processingDataSource(data);
|
|
|
+ });
|
|
|
+ },
|
|
|
+});
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+/* 样式代码 */
|
|
|
+</style>
|
