jwl-manage-web/src/views/zs/clue/components/DistributeFormDialog.vue

<template>
  <el-dialog title="分发" :close-on-click-modal="false" append-to-body :visible.sync="visible" width="600px" @close="closeDialog" style="min-height: 400px;">
    <el-tabs v-model="activeTab" >

    <el-tab-pane label="邀约信息" name="first" >
      <div v-if="invitationForm.invitationId != undefined">
        <el-form ref="invitationForm" :model="invitationForm"  label-width="110px" :disabled="true">
        <el-form-item label="姓名" prop="name">
          <span>{{invitationForm.name}}</span>
        </el-form-item>
        <el-form-item label="联系方式" prop="phone">
          <span>{{invitationForm.phone}}</span>
        </el-form-item>
        <el-form-item label="场地" prop="placeId">
          <span>{{invitationForm.placeName}}</span>
        </el-form-item>
        <el-form-item label="约定时间" prop="invitationTime">
          <span>{{invitationForm.invitationTime}}</span>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <span>{{invitationForm.remark}}</span>
        </el-form-item>
      </el-form>
      </div>
      
    </el-tab-pane>
    <el-tab-pane label="分发" name="second">
      <el-form ref="dialogForm" :model="dialogForm" :rules="rules" label-width="110px" :disabled="dialogForm.orderId != undefined">
      <el-row>
        <el-col :span="24">
          <el-form-item label="场地" prop="placeId">
            <el-select v-model="dialogForm.placeId" filterable placeholder="请选择" clearable style="width: 100%;" @change="getCoaChes">
              <el-option v-for="dict in placeOptions" :key="dict.placeId" :label="dict.name" :value="dict.placeId" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="接待人" prop="coachId">
            <el-select v-model="dialogForm.coachId" filterable placeholder="请选择" clearable style="width: 100%;">
              <el-option v-for="dict in coachOptions" :key="dict.coachId" :label="dict.coachName" :value="dict.coachId" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="抄送" prop="copyUserList">
            <el-select v-model="dialogForm.copyUserList" filterable multiple placeholder="请选择" clearable style="width: 100%;">
              <el-option v-for="dict in coachOptions" :key="dict.coachId" :label="dict.coachName" :value="dict.coachId" />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="跟进信息">
            <div style="max-height: 200px; overflow-y: auto;">
              <div v-for="item in feedbackDetail" :key="item.feedbackId">
                <el-timeline-item :timestamp="item.updateTime == undefined ? item.createTime : item.updateTime" placement="top">
                    <el-card>
                    <div v-if="item.feedbackType == 1">
                      <div>是否联系：<span style="font-size: 12px;">{{ item.isContact ? '已联系' : '未联系' }}</span></div>
                      <div>到场时间：<span style="font-size: 12px;">{{ item.arrivalTime }}</span></div>
                      <div>备注：<span style="font-size: 12px;" v-html="item.remark" /></div>
                    </div>
                    <div v-if="item.feedbackType == 2">
                      <div>状态：
                        <span v-if="item.arrivalStatus == 1">未到场</span>
                        <span v-if="item.arrivalStatus == 2">到场未成交</span>
                        <span v-if="item.arrivalStatus == 3">到场已成交</span>
                      </div>
                      <div>备注：<span style="font-size: 12px;" v-html="item.remark" /></div>
                    </div>
                  </el-card>
                </el-timeline-item>
              </div>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    </el-tab-pane>
  </el-tabs>
                  
    <span slot="footer" class="dialog-footer" :disabled="dialogForm.orderId">
      <el-button plain @click="(visible = false)">取消</el-button>
      <el-button v-jclick type="primary" :disabled="!canSubmit || dialogForm.orderId != undefined" @click="dialogFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { listFeedbackOrder, addFeedbackOrder } from '@/api/zs/feedbackOrder';
import { listFeedbackDetail } from '@/api/zs/feedbackDetail';
import { getInvitationByClue } from '@/api/zs/invitation';


import { getAllPlaces } from '@/api/sch/place';
import { getAllCoaches } from '@/api/sch/coach';

export default {
  name: 'DistributeFormDialog',

  data () {
    return {
      visible: false,
      canSubmit: true,
      dialogForm: {
        placeId: undefined,
        clueId: undefined,
        coachId: undefined,
        copyUserList: []
      },
      rules: {
        placeId: { required: true, message: '场地不能为空', trigger: 'blur, change' },
        coachId: { required: true, message: '教练不能为空', trigger: 'blur, change' }
      },
      placeOptions: [],
      coachOptions: [],
      feedbackDetail: [],
      invitationForm: {
        invitationId:undefined,
            clueId: undefined,
            name: undefined,
            phone: undefined,
            address: undefined,
            placeId: undefined,
            invitationTime: undefined,
            remark: undefined
      },
      activeTab: 'first'
    };
  },
  methods: {
    init (info = undefined) {
      this.activeTab = 'first'
      this.getPlaces();
      this.visible = true;
      this.$nextTick(() => {
        this.resetDialogForm();
        this.$refs['dialogForm'].resetFields();
        if (info) {
          this.dialogForm.clueId = info;
          //查询线索的邀约情况
          this.getInvitationByClue(info);
          // 查询该线索的分发情况
          this.getFeedbackOrder(info);
        }
      });
    },
    resetDialogForm () {
      this.dialogForm = {
        placeId: undefined,
        clueId: undefined,
        coachId: undefined,
        copyUserList: []
      };
      this.feedbackDetail=[]
    },
    closeDialog () {
      this.$emit('update:dialog.batchUpdateVisible', false);
    },
    getInvitationByClue(clueId){
      this.invitationForm = {
        invitationId:undefined,
            clueId: undefined,
            name: undefined,
            phone: undefined,
            address: undefined,
            placeId: undefined,
            invitationTime: undefined,
            remark: undefined
      }
      getInvitationByClue({ clueId: clueId }).then(resp => {
        if (resp.code == 200 && resp.data) {
          this.invitationForm = resp.data;
        }
      });
    },
    getFeedbackOrder (clueId) {
      listFeedbackOrder({ clueId: clueId }).then(resp => {
        if (resp.code == 200 && resp.rows && resp.rows.length > 0) {
          this.dialogForm = resp.rows.filter(item => item.feedbackStatus != 0)[0];
          if (this.dialogForm != undefined && this.dialogForm.placeId != undefined) {
            this.getCoaChes(this.dialogForm.placeId);
          }

          if (this.dialogForm.orderId) {
            this.getFeedbackDetail(this.dialogForm.orderId);
          }
        }
      });
    },
    getFeedbackDetail (orderId) {
      listFeedbackDetail({ orderId: orderId }).then(resp => {
        this.feedbackDetail = resp.rows;
      });
    },
    // 表单提交
    dialogFormSubmit () {
      this.$refs.dialogForm.validate((valid) => {
        if (valid) {
          this.canSubmit = false;
          // 校验完成，调接口
          addFeedbackOrder(this.dialogForm)
            .then((resp) => {
              this.canSubmit = true;
              if (resp.code == 200) {
                this.$message.success('分发成功');
                this.$emit('refreshDataList');
                this.visible = false;
              }
            })
            .catch(() => {
              this.canSubmit = true;
            });
        }
      });
    },
    getPlaces () {
      getAllPlaces({ status: '0' }).then((resp) => {
        this.placeOptions = resp.data;
      });
    },
    getCoaChes (placeId) {
      console.log(placeId);
      getAllCoaches({ placeId: placeId }).then(resp => {
        if (resp.code == 200) { this.coachOptions = resp.data; }
      });
    }
  }
};
</script>