|
@@ -0,0 +1,331 @@
|
|
|
+<template>
|
|
|
+ <div class="activity-btn-dia">
|
|
|
+ <el-dialog v-dialogDrag title="添加活动" :visible.sync="isShow" :modal-append-to-body="false" @close="cancel" width="500px">
|
|
|
+ <el-form ref="form" :model="formData" :rules="rules" label-width="100px" label-position="left">
|
|
|
+ <el-form-item label="活动类型" prop="activityType">
|
|
|
+ <el-select v-model="formData.activityType" placeholder="请选择活动类型" @change="activityTypeChange">
|
|
|
+ <el-option v-for="(item, index) in activityTypeList" :key="index" :label="item.label" :value="item.keyCode"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="会议主题" prop="meetingTheme">
|
|
|
+ <el-input v-model="formData.meetingTheme" placeholder="请输入会议主题"> </el-input>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="客户名称" prop="companyName">
|
|
|
+ <el-autocomplete v-model="formData.companyName" popper-class="company-autocomplete" :fetch-suggestions="companySearch" placeholder="请输入客户名称" @select="companySelect" clearable>
|
|
|
+ <template slot-scope="{ item }">
|
|
|
+ <div v-if="item.nodata" style="text-align: center">暂无数据</div>
|
|
|
+ <div class="name" v-else>{{ item.CompanyName }}</div>
|
|
|
+ </template>
|
|
|
+ </el-autocomplete>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="销售" prop="sellerUser">
|
|
|
+ <!-- <el-input v-model="formData.sellerUser" placeholder="请选择人员"> </el-input> -->
|
|
|
+ <el-cascader
|
|
|
+ v-model="formData.sellerUser"
|
|
|
+ :options="sellerList"
|
|
|
+ :show-all-levels="false"
|
|
|
+ :props="{
|
|
|
+ expandTrigger: 'hover',
|
|
|
+ children: 'Child',
|
|
|
+ emitPath: false,
|
|
|
+ label: 'AdminName',
|
|
|
+ value: 'AdminId',
|
|
|
+ multiple: true,
|
|
|
+ }"
|
|
|
+ filterable
|
|
|
+ collapse-tags
|
|
|
+ clearable
|
|
|
+ placeholder="请选择销售"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="开始时间" prop="selectResearchers[0].startTime" :rules="[{ required: true, message: '请选择开始时间', trigger: 'blur' }]">
|
|
|
+ <el-col :span="12">
|
|
|
+ <date-picker
|
|
|
+ format="MM.DD(ddd)"
|
|
|
+ v-model="formData.selectResearchers[0].startDate"
|
|
|
+ style="width: 100% !important"
|
|
|
+ :clearable="false"
|
|
|
+ :editable="false"
|
|
|
+ @change="(value) => startTimeChange('date', value, formData.selectResearchers[0])"
|
|
|
+ >
|
|
|
+ <template #icon-calendar>
|
|
|
+ <i class="el-icon-date"></i>
|
|
|
+ </template>
|
|
|
+ </date-picker>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <date-picker
|
|
|
+ format="HH:mm"
|
|
|
+ type="time"
|
|
|
+ :show-second="false"
|
|
|
+ v-model="formData.selectResearchers[0].startTime"
|
|
|
+ style="width: 100% !important"
|
|
|
+ :clearable="false"
|
|
|
+ :editable="false"
|
|
|
+ @change="(value) => startTimeChange('time', value, formData.selectResearchers[0])"
|
|
|
+ >
|
|
|
+ <template #icon-calendar>
|
|
|
+ <i class="el-icon-time"></i>
|
|
|
+ </template>
|
|
|
+ </date-picker>
|
|
|
+ </el-col>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="结束时间" prop="selectResearchers[0].endTime" :rules="[{ required: true, message: '请选择结束时间', trigger: 'blur' }]">
|
|
|
+ <el-col :span="12">
|
|
|
+ <date-picker format="MM.DD(ddd)" v-model="formData.selectResearchers[0].endDate" style="width: 100% !important" :clearable="false" :editable="false">
|
|
|
+ <template #icon-calendar>
|
|
|
+ <i class="el-icon-date"></i>
|
|
|
+ </template>
|
|
|
+ </date-picker>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <date-picker format="HH:mm" type="time" :show-second="false" v-model="formData.selectResearchers[0].endTime" style="width: 100% !important" :clearable="false" :editable="false">
|
|
|
+ <template #icon-calendar>
|
|
|
+ <i class="el-icon-time"></i>
|
|
|
+ </template>
|
|
|
+ </date-picker>
|
|
|
+ </el-col>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div class="btn-group">
|
|
|
+ <el-button @click="cancel">取消</el-button>
|
|
|
+ <el-button type="primary" @click="confirm">确定</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { roadshowInterence } from "@/api/api.js";
|
|
|
+import { confirmDiaLink } from "../roleConfig";
|
|
|
+
|
|
|
+export default {
|
|
|
+ props: {
|
|
|
+ isShow: {
|
|
|
+ type: Boolean,
|
|
|
+ require: true,
|
|
|
+ default: false,
|
|
|
+ },
|
|
|
+ sellerList: {
|
|
|
+ type: Array,
|
|
|
+ require: true,
|
|
|
+ default: [],
|
|
|
+ },
|
|
|
+ },
|
|
|
+
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ formData: {
|
|
|
+ activityType: "参会", // 活动类型
|
|
|
+ meetingTheme: "", // 会议主题
|
|
|
+ companyName: "", // 客户名称
|
|
|
+ sellerUser: "", // 销售
|
|
|
+ companyId: "", //客户ID
|
|
|
+ englishCompany: "",
|
|
|
+ selectResearchers: [
|
|
|
+ {
|
|
|
+ startDate: null,
|
|
|
+ startTime: null,
|
|
|
+ endDate: null,
|
|
|
+ endTime: null,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ }, // 表单数据
|
|
|
+ rules: {
|
|
|
+ activityType: [{ required: true, message: "请选择活动类型", trigger: "blur" }],
|
|
|
+ meetingTheme: [{ required: true, message: "请输入会议主题", trigger: "blur" }],
|
|
|
+ companyName: [{ required: true, message: "请输入客户名称", trigger: "blur" }],
|
|
|
+ sellerUser: [{ required: true, message: "请选择人员", trigger: "blur" }],
|
|
|
+ },
|
|
|
+ companyInfo: null,
|
|
|
+ activityTypeList: [
|
|
|
+ {
|
|
|
+ label: "参会",
|
|
|
+ keyCode: "参会",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "拜访",
|
|
|
+ keyCode: "拜访",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 取消按钮
|
|
|
+ cancel() {
|
|
|
+ this.$refs.form.resetFields();
|
|
|
+ this.$emit("update:isShow", false);
|
|
|
+ },
|
|
|
+
|
|
|
+ // 确认按钮
|
|
|
+ async confirm() {
|
|
|
+ await this.$refs.form.validate();
|
|
|
+ const res = await roadshowInterence.ficcAddActivity({
|
|
|
+ ActivityType: this.formData.activityType, //活动类型
|
|
|
+ Theme: this.formData.meetingTheme, //会议主题
|
|
|
+ CompanyId: this.formData.companyId, //客户id
|
|
|
+ CompanyName: this.formData.companyName, //客户名称
|
|
|
+ EnglishCompany: this.formData.englishCompany,
|
|
|
+ SellerId: this.formData.sellerUser.toString(),
|
|
|
+ SellerName: this.findResearcherName(),
|
|
|
+ StartDate: this.$moment(this.formData.selectResearchers[0].startDate).format("YYYY-MM-DD"),
|
|
|
+ EndDate: this.$moment(this.formData.selectResearchers[0].endDate).format("YYYY-MM-DD"),
|
|
|
+ StartTime: this.$moment(this.formData.selectResearchers[0].startTime).format("HH:mm:ss"),
|
|
|
+ EndTime: this.$moment(this.formData.selectResearchers[0].endTime).format("HH:mm:ss"),
|
|
|
+ StartWeek: this.$moment(this.formData.selectResearchers[0].startDate).format("ddd"),
|
|
|
+ EndWeek: this.$moment(this.formData.selectResearchers[0].endDate).format("ddd"),
|
|
|
+ });
|
|
|
+ if (res.Ret === 200) {
|
|
|
+ this.cancel();
|
|
|
+ this.$emit("updateList");
|
|
|
+ confirmDiaLink("添加成功,已加入销售员日历", "可前往【我的日历】-【活动】查看", {act_tab:6});
|
|
|
+ }
|
|
|
+ },
|
|
|
+ findResearcherName() {
|
|
|
+ let userName = [];
|
|
|
+ const result = this.sellerList.flatMap((group) =>
|
|
|
+ group.Child
|
|
|
+ ? group.Child.map((child) => ({
|
|
|
+ ...child,
|
|
|
+ GroupName: group.GroupName,
|
|
|
+ }))
|
|
|
+ : []
|
|
|
+ );
|
|
|
+ result.forEach((item) => {
|
|
|
+ if (this.formData.sellerUser.includes(item.AdminId)) {
|
|
|
+ userName.push(item.AdminName);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return userName.toString();
|
|
|
+ },
|
|
|
+ // 客户名称搜索
|
|
|
+ async companySearch(query, cb) {
|
|
|
+ cb([]);
|
|
|
+ if (!query) return;
|
|
|
+ const res = await roadshowInterence.searchRoadshowCompany({
|
|
|
+ KeyWord: query,
|
|
|
+ });
|
|
|
+ if (res.Ret === 200) {
|
|
|
+ let arr = res.Data || [];
|
|
|
+ if (!arr.length) {
|
|
|
+ cb([{ nodata: true }]);
|
|
|
+ } else {
|
|
|
+ cb(arr);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 选择客户
|
|
|
+ async companySelect(e) {
|
|
|
+ if (e.nodata) return;
|
|
|
+ this.formData.companyId = e.CompanyId;
|
|
|
+ this.formData.companyName = e.CompanyName;
|
|
|
+ this.formData.englishCompany = e.EnglishCompany;
|
|
|
+
|
|
|
+ const { Data } = await roadshowInterence.componyDetail({
|
|
|
+ CompanyId: this.formData.companyId,
|
|
|
+ EnglishCompany: e.EnglishCompany,
|
|
|
+ });
|
|
|
+ this.companyInfo = Data;
|
|
|
+ },
|
|
|
+ initDefaultTime() {
|
|
|
+ const now = new Date();
|
|
|
+ const start = new Date(now.setHours(9, 0, 0, 0)); // 今天上午9:00
|
|
|
+ const end = new Date(start.getTime() + 60 * 60 * 1000); // 加1小时
|
|
|
+
|
|
|
+ this.formData.selectResearchers[0].startDate = start;
|
|
|
+ this.formData.selectResearchers[0].startTime = start;
|
|
|
+ this.formData.selectResearchers[0].endDate = end;
|
|
|
+ this.formData.selectResearchers[0].endTime = end;
|
|
|
+ },
|
|
|
+ startTimeChange(type, value, row) {
|
|
|
+ // type 是 "date" 或 "time"
|
|
|
+ const date = row.startDate;
|
|
|
+ const time = row.startTime;
|
|
|
+
|
|
|
+ if (!date || !time) return;
|
|
|
+
|
|
|
+ const start = new Date(date);
|
|
|
+ start.setHours(new Date(time).getHours(), new Date(time).getMinutes(), 0, 0);
|
|
|
+
|
|
|
+ const end = new Date(start.getTime() + 60 * 60 * 1000); // 结束时间 = 开始时间 + 1小时
|
|
|
+
|
|
|
+ // 同步更新开始时间和结束时间
|
|
|
+ row.startDate = start;
|
|
|
+ row.startTime = start;
|
|
|
+ row.endDate = end;
|
|
|
+ row.endTime = end;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.initDefaultTime();
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+.activity-btn-dia {
|
|
|
+ .el-form {
|
|
|
+ .el-cascader,
|
|
|
+ .el-select,
|
|
|
+ .el-autocomplete,
|
|
|
+ .el-input {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .distpicker-address-wrapper {
|
|
|
+ display: flex;
|
|
|
+ label:nth-child(-n + 2) {
|
|
|
+ padding: 0 5px;
|
|
|
+ flex: 50%;
|
|
|
+ select {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-col {
|
|
|
+ padding: 0 5px;
|
|
|
+ }
|
|
|
+ .company-info {
|
|
|
+ margin-bottom: 20px;
|
|
|
+ border: 1px solid #b3d8ff;
|
|
|
+ background: #ecf5ff;
|
|
|
+ padding: 10px;
|
|
|
+ p {
|
|
|
+ margin: 6px 0;
|
|
|
+ text-indent: -70px;
|
|
|
+ margin-left: 70px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .add-researcher-box .el-form-item .el-form-item__content {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ .el-cascader {
|
|
|
+ padding-right: 20px;
|
|
|
+ }
|
|
|
+ .el-icon-remove-outline {
|
|
|
+ font-size: 20px;
|
|
|
+ cursor: pointer;
|
|
|
+ color: #f00;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .add-box {
|
|
|
+ width: 100px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ color: #5882ef;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .btn-group {
|
|
|
+ margin: 20px 0;
|
|
|
+ text-align: center;
|
|
|
+ .el-button {
|
|
|
+ width: 140px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|