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">
    <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%;">
              <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-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button plain @click="(visible = false)">取消</el-button>
      <el-button v-jclick type="primary" :disabled="!canSubmit" @click="dialogFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { getCluePlaceList, saveCluePlace } from '@/api/zs/clue';
import { getAllPlaces } from '@/api/sch/place';

export default {
  name: 'DistributeFormDialog',

  data () {
    return {
      visible: false,
      canSubmit: true,
      dialogForm: {},
      oldForm: {},
      rules: {
        placeId: { required: true, message: '场地不能为空', trigger: 'blur, change' },
        coachId: { required: true, message: '教练不能为空', trigger: 'blur, change' }
      },
      placeOptions: []
    };
  },
  methods: {
    init (info = undefined) {
      this.getPlaces();
      this.visible = true;
      this.$nextTick(() => {
        this.resetDialogForm();
        this.$refs['dialogForm'].resetFields();
        if (info) {
          this.dialogForm.clueId = info;
          // 查询该线索的分发情况
          this.getDistributePlaces(info);
        }
      });
    },
    resetDialogForm () {
      this.dialogForm = {
        placeId: undefined,
        clueId: undefined,
        coachId: undefined
      };
      this.oldForm = {};
    },
    closeDialog () {
      this.$emit('update:dialog.batchUpdateVisible', false);
    },
    getDistributePlaces (clueId) {
      getCluePlaceList({ clueId: clueId }).then(resp => {
        if (resp.code == 200) {
          this.oldForm = resp.data;
          this.dialogForm.oldPlaceList = this.oldForm.placeIdList;
          if (this.oldForm.placeIdList && this.oldForm.placeIdList) {
            this.placeOptions = this.placeOptions.filter(item => this.oldForm.placeIdList.indexOf(item.placeId) == -1);
          }
        }
      });
    },
    // 表单提交
    dialogFormSubmit () {
      this.$refs.dialogForm.validate((valid) => {
        if (valid) {
          this.canSubmit = false;
          this.dialogForm.placeIdList = this.dialogForm.oldPlaceList.concat(this.dialogForm.newPlaceList);
          // 校验完成，调接口
          saveCluePlace(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;
      });
    }
  }
};
</script>