|
|
@@ -0,0 +1,320 @@
|
|
|
+<template>
|
|
|
+ <div class="container">
|
|
|
+ <!-- 单据弹窗 -->
|
|
|
+ <el-dialog
|
|
|
+ :title="title"
|
|
|
+ :before-close="handleClose"
|
|
|
+ custom-class="ele-dialog-form long-dialog-form"
|
|
|
+ :visible.sync="dialogVisible"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ :append-to-body="true"
|
|
|
+ width="60%"
|
|
|
+ >
|
|
|
+ <el-form
|
|
|
+ label-width="100px"
|
|
|
+ ref="form"
|
|
|
+ :model="form"
|
|
|
+ :rules="rules"
|
|
|
+ style="margin-top: 30px; padding-right: 20px"
|
|
|
+ >
|
|
|
+ <el-form-item label="客户名称" prop="partaName">
|
|
|
+ <el-input
|
|
|
+ clearable
|
|
|
+ v-model="form.partaName"
|
|
|
+ @click.native="handParent"
|
|
|
+ placeholder="请选择"
|
|
|
+ readonly
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="客户联系人" prop="linkId">
|
|
|
+ <el-select
|
|
|
+ v-model="form.linkId"
|
|
|
+ multiple
|
|
|
+ placeholder="请选择"
|
|
|
+ style="width: 300px"
|
|
|
+ @change="onchangeLink"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in linkNameOptions"
|
|
|
+ :key="item.id"
|
|
|
+ :label="item.linkName"
|
|
|
+ :value="item.id"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="商机名称" prop="opportunityId">
|
|
|
+ <el-select
|
|
|
+ v-model="form.opportunityId"
|
|
|
+ placeholder="请选择"
|
|
|
+ style="width: 300px"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in opportunityList"
|
|
|
+ :key="item.id"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.id"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="跟进时间" prop="followupTime">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="form.followupTime"
|
|
|
+ value-format="yyyy-MM-dd HH:mm:ss"
|
|
|
+ placeholder="结束时间"
|
|
|
+ type="datetime"
|
|
|
+ style="width: 200px"
|
|
|
+ class="filter-item"
|
|
|
+ ></el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="跟进阶段" prop="stageCode">
|
|
|
+ <DictSelection dictName="商机阶段" clearable v-model="form.stageCode">
|
|
|
+ </DictSelection>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="跟进内容" prop="content">
|
|
|
+ <el-input
|
|
|
+ placeholder="请输入"
|
|
|
+ type="textarea"
|
|
|
+ v-model="form.content"
|
|
|
+ maxlength="500"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="达成共识" prop="agreement">
|
|
|
+ <el-input
|
|
|
+ placeholder="请输入"
|
|
|
+ type="textarea"
|
|
|
+ v-model="form.agreement"
|
|
|
+ maxlength="500"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="下一步计划" prop="nextPlan">
|
|
|
+ <el-input
|
|
|
+ placeholder="请输入"
|
|
|
+ v-model="form.nextPlan"
|
|
|
+ type="textarea"
|
|
|
+ maxlength="300"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="files" label="附件">
|
|
|
+ <fileMain v-model="form.files"></fileMain>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button size="small" @click="handleClose">关 闭</el-button>
|
|
|
+ <el-button size="small" @click="sumbit" type="primary">确 认</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ <parentList ref="parentRef" @changeParent="changeParent"></parentList>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+ import dictMixins from '@/mixins/dictMixins';
|
|
|
+ import { copyObj } from '@/utils/util';
|
|
|
+ import parentList from '@/views/saleManage/contact/components/parentList.vue';
|
|
|
+
|
|
|
+ import { contactDetail } from '@/api/saleManage/contact';
|
|
|
+
|
|
|
+ import { getTableList } from '@/api/saleManage/businessOpportunity';
|
|
|
+
|
|
|
+ import { addInformation } from '@/api/saleManage/businessFollow';
|
|
|
+
|
|
|
+ import { deepClone } from '@/utils/index';
|
|
|
+
|
|
|
+ // import fileMain from '@/components/addDoc/index';
|
|
|
+
|
|
|
+ export default {
|
|
|
+ mixins: [dictMixins],
|
|
|
+ components: {
|
|
|
+ // fileMain
|
|
|
+ parentList
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ let formDef = {
|
|
|
+ agreement: '',
|
|
|
+ contactId: '',
|
|
|
+ content: '',
|
|
|
+ followupTime: '',
|
|
|
+ linkId: '',
|
|
|
+ linkName: '',
|
|
|
+ nextPlan: '',
|
|
|
+ opportunityId: '',
|
|
|
+ stageCode: '',
|
|
|
+ files: [],
|
|
|
+ stageName: ''
|
|
|
+ };
|
|
|
+
|
|
|
+ return {
|
|
|
+ dialogVisible: false,
|
|
|
+ currentDetail: {}, //选择的客户信息
|
|
|
+ linkNameOptions: [],
|
|
|
+ title: '',
|
|
|
+ row: {},
|
|
|
+ activeName: 'base',
|
|
|
+ formDef,
|
|
|
+ form: copyObj(formDef),
|
|
|
+ rules: {
|
|
|
+ content: [
|
|
|
+ { required: true, message: '请输入跟进内容', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ followupTime: [
|
|
|
+ { required: true, message: '请选择跟进时间', trigger: 'change' }
|
|
|
+ ],
|
|
|
+ stageCode: [
|
|
|
+ { required: true, message: '请选择跟进阶段', trigger: 'change' }
|
|
|
+ ],
|
|
|
+
|
|
|
+ linkName: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: '请选择客户联系人名称',
|
|
|
+ trigger: 'change'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+
|
|
|
+ // 提交状态
|
|
|
+ loading: false,
|
|
|
+ // 是否是修改
|
|
|
+ isUpdate: false,
|
|
|
+ index: '',
|
|
|
+ type: ''
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {},
|
|
|
+ methods: {
|
|
|
+ //更改弹框状态
|
|
|
+ async open(type, row, linkNameOptions, index) {
|
|
|
+ this.linkNameOptions = linkNameOptions;
|
|
|
+ this.title = type === 'add' ? '新增' : '修改';
|
|
|
+ this.index = index;
|
|
|
+ this.type = type;
|
|
|
+ this.row = copyObj(row);
|
|
|
+ this.dialogVisible = true;
|
|
|
+ if (type != 'add') {
|
|
|
+ this.form = this.row;
|
|
|
+ if (row.linkId) {
|
|
|
+ this.$set(this.form, 'linkId', row.linkId.split(','));
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ //表单验证
|
|
|
+ getValidate() {
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ this.$refs.form.validate((valid) => {
|
|
|
+ if (!valid) {
|
|
|
+ reject(false);
|
|
|
+ } else {
|
|
|
+ resolve(true);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ //选择下拉框
|
|
|
+ onchangeLink(selectedOptions) {
|
|
|
+ const selectedLabels = selectedOptions
|
|
|
+ .map((optionId) => {
|
|
|
+ const option = this.linkNameOptions.find(
|
|
|
+ (opt) => opt.id === optionId
|
|
|
+ );
|
|
|
+ return option ? option.linkName : '';
|
|
|
+ })
|
|
|
+ .join(',');
|
|
|
+
|
|
|
+ this.form.linkName = selectedLabels;
|
|
|
+ },
|
|
|
+
|
|
|
+ //保存
|
|
|
+ async sumbit() {
|
|
|
+ try {
|
|
|
+ await this.getValidate();
|
|
|
+ this.form.stageName = this.getDictValue(
|
|
|
+ '商机阶段',
|
|
|
+ this.form.stageCode
|
|
|
+ );
|
|
|
+ let params = deepClone(this.form);
|
|
|
+
|
|
|
+ params = Object.assign({}, params, {
|
|
|
+ linkId: params?.linkId?.join(',') || ''
|
|
|
+ });
|
|
|
+
|
|
|
+ addInformation(params)
|
|
|
+ .then((res) => {
|
|
|
+ this.loading = false;
|
|
|
+ this.$message.success('新增成功');
|
|
|
+ this.cancel();
|
|
|
+ this.$emit('done');
|
|
|
+ })
|
|
|
+ .catch((e) => {
|
|
|
+ //this.loading = false;
|
|
|
+ });
|
|
|
+
|
|
|
+ // this.$emit('done', {
|
|
|
+ // data: JSON.parse(JSON.stringify(this.form)),
|
|
|
+ // type: this.type,
|
|
|
+ // index: this.index
|
|
|
+ // });
|
|
|
+
|
|
|
+ this.cancel();
|
|
|
+ } catch (error) {
|
|
|
+ console.log(error);
|
|
|
+ // 表单验证未通过，不执行保存操作
|
|
|
+ }
|
|
|
+ },
|
|
|
+ cancel() {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ // 关闭后，销毁所有的表单数据
|
|
|
+ this.$refs['form'] && this.$refs['form'].resetFields();
|
|
|
+ (this.form = copyObj(this.formDef)), (this.dialogVisible = false);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleClose() {
|
|
|
+ this.cancel();
|
|
|
+ },
|
|
|
+
|
|
|
+ handParent() {
|
|
|
+ // if (this.form.contractId) {
|
|
|
+ // return this.$message.error('选择了合同不能更改客户名称');
|
|
|
+ // }
|
|
|
+ let item = {
|
|
|
+ id: undefined
|
|
|
+ };
|
|
|
+ this.$refs.parentRef.open(item);
|
|
|
+ },
|
|
|
+
|
|
|
+ //选择客户回调
|
|
|
+ async changeParent(obj, isCustomerMark) {
|
|
|
+ const { base, other, linkList } = await contactDetail(obj.id);
|
|
|
+
|
|
|
+ let res = await getTableList({
|
|
|
+ pageNum: 1,
|
|
|
+ size: 10,
|
|
|
+ contactId: obj.id
|
|
|
+ });
|
|
|
+
|
|
|
+ this.opportunityList = res.list;
|
|
|
+
|
|
|
+ this.linkNameOptions = linkList;
|
|
|
+
|
|
|
+ this.form = Object.assign({}, this.form, {
|
|
|
+ contactId: base?.id,
|
|
|
+ partaName: base?.name
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .container {
|
|
|
+ padding: 10px 0;
|
|
|
+ }
|
|
|
+</style>
|
wsx