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-form ref="dialogForm" :model="dialogForm" :rules="rules" label-width="110px">
      <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-row>
    </el-form>
    <span slot="footer" class="dialog-footer" :disabled="dialogForm.orderId">
      <el-button plain @click="closeDialog">取消</el-button>
      <el-button v-jclick type="primary" :disabled="!canSubmit"
        @click="dialogFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { updateFeedbackOrder, addFeedbackOrder } from '@/api/zs/feedbackOrder';


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: []
    };
  },
  methods: {
    init(info = undefined) {
      this.getPlaces();
      this.visible = true;
      this.$nextTick(() => {
        this.resetDialogForm();
        this.$refs['dialogForm'].resetFields();
        if (info) {
          this.dialogForm = { ...info };
          if (this.dialogForm.placeId){
            this.getCoaChes(this.dialogForm.placeId);
          }
        }
      });
    },
    resetDialogForm() {
      this.dialogForm = {
        placeId: undefined,
        clueId: undefined,
        coachId: undefined,
        copyUserList: []
      };
      this.feedbackDetail = []
    },
    closeDialog() {
      this.$emit('update:dialog.batchUpdateVisible', false);
      this.visible = false;
    },
    // 表单提交
    dialogFormSubmit() {
      this.$refs.dialogForm.validate((valid) => {
        if (valid) {
          this.canSubmit = false;
          if (this.dialogForm.orderId) {
            // 校验完成，调接口
            updateFeedbackOrder(this.dialogForm)
              .then((resp) => {
                this.canSubmit = true;
                if (resp.code == 200) {
                  this.$message.success('分发成功');
                  this.$emit('refreshDataList');
                  this.visible = false;
                }
              })
              .catch(() => {
                this.canSubmit = true;
              });
          } else {
            // 校验完成，调接口
            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>