project-manager-ui/src/views/bst/task/components/TaskEditDialog.vue

<template>
  <el-dialog 
    :title="title" 
    :visible.sync="dialogVisible" 
    width="800px" 
    append-to-body 
    :close-on-click-modal="false"
    @close="handleClose"
    @open="handleOpen"
  >
    <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px" v-loading="loading">
      <el-row>
        <form-col :span="24" label="项目" prop="projectId">
          <project-select v-model="form.projectId" :disabled="initData.projectId != null" @change="onChangeProject"/>
        </form-col>
        <form-col :span="24" label="附件" prop="picture"> 
          <image-upload v-model="form.picture" :file-type="FileType"/>
        </form-col>
        <form-col :span="span" label="类型" prop="type">
          <el-radio-group v-model="form.type">
            <el-radio-button v-for="dict in dict.type.task_type" :key="dict.value" :label="dict.value">{{ dict.label }}</el-radio-button>
          </el-radio-group>
        </form-col>
        <form-col :span="span" label="优先级" prop="level">
          <el-radio-group v-model="form.level">
            <el-radio-button v-for="dict in dict.type.task_level" :key="dict.value" :label="dict.value">{{ dict.label }}</el-radio-button>
          </el-radio-group>
        </form-col>
        <form-col :span="24" label="任务内容" prop="description">
          <el-input v-model="form.description" placeholder="请输入任务内容" type="textarea" maxlength="1000" show-word-limit :autosize="{ minRows: 3, maxRows: 10 }"/>
        </form-col>
        <form-col :span="24" label="负责人" prop="memberList">
          <user-remote-select 
            :value="userRemoteValue" 
            multiple 
            :init-options="userRemoteInitOptions" 
            @change="onChangeMemberList" 
            :query="userQuery"
            style="width: 100%;"
          />
        </form-col>
        <form-col :span="span" label="截止时间" prop="expireTime">
          <el-date-picker clearable
            style="width: 100%;"
            v-model="form.expireTime"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            default-time="23:59:59"
            placeholder="请选择截止时间">
          </el-date-picker>
        </form-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm" :loading="submitLoading">确 定</el-button>
      <el-button @click="handleClose">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getTask, addTask, updateTask } from "@/api/bst/task";
import FormCol from "@/components/FormCol/index.vue";
import ProjectSelect from '@/components/Business/Project/ProjectSelect.vue';
import { TaskType, TaskLevel, Role } from '@/utils/enums';
import UserSelect from '@/components/Business/User/UserSelect.vue';
import { FileType } from '@/utils/constants';
import { checkRole } from '@/utils/permission';
import { mapGetters } from 'vuex';
import UserRemoteSelect from '@/components/Business/User/UserRemoteSelect.vue';
export default {
  name: "TaskEditDialog",
  components: { FormCol, ProjectSelect, UserSelect, UserRemoteSelect },
  dicts: ['task_status', 'task_level', 'task_type'],
  props: {
    show: {
      type: Boolean,
      required: true
    },
    id: {
      type: [String, Number],
      default: null
    },
    initData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      span: 12,
      loading: false,
      submitLoading: false,
      // 表单参数
      form: {
        memberList: []
      },
      // 表单校验
      rules: {
        description: [
          { required: true, message: "任务内容不能为空", trigger: "blur" }
        ],
        type: [
          { required: true, message: "类型不能为空", trigger: "change" }
        ],
        level: [
          { required: true, message: "优先级不能为空", trigger: "change" }
        ],
        memberList: [
          { required: true, type: 'array', message: "负责人不能为空", trigger: "blur" }
        ],
      },
      FileType: [
        ...FileType.IMAGE,
        ...FileType.OFFICE,
        ...FileType.VIDEO,
        ...FileType.OTHER
      ]
    };
  },
  computed: {
    ...mapGetters(['userId']),
    title() {
      return this.id ? '修改任务' : '新增任务';
    },
    dialogVisible: {
      get() {
        return this.show;
      },
      set(value) {
        this.$emit('update:show', value);
      }
    },
    // 负责人远程选择器值
    userRemoteValue() {
      return this.form.memberList.map(item => item.userId);
    },
    // 负责人远程选择器初始化选项
    userRemoteInitOptions() {
      return this.form.memberList.map(item => {
        return {
          userId: item.userId,
          nickName: item.userName,
          avatar: item.userAvatar,
        }
      });
    },
    userQuery() {
      return {
        projectId: this.form.projectId
      }
    }
  },
  methods: {
    onChangeMemberList(selection) {
      this.form.memberList = selection.map(item => {
        return {
          userId: item.userId,
          userName: item.nickName
        }
      });
    },
    onChangeProject(project) {
      if (this.form.memberList.length > 0) {
        this.form.memberList = [];
        this.$message("由于更换了项目，负责人已清空");
      }
    },
    /** 获取详细信息 */
    getInfo(id) {
      this.loading = true;
      getTask(id).then(response => {
        this.form = response.data;
      }).finally(() => {
        this.loading = false;
      });
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        projectId: null,
        name: null,
        type: TaskType.FEATURE,
        level: TaskLevel.MEDIUM,
        picture: null,
        description: null,
        expireTime: null,
        memberList: [],
        ...this.initData
      };
      this.resetForm("form");
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            this.submitLoading = true;
            updateTask(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.$emit('success');
              this.handleClose();
            }).finally(() => {
              this.submitLoading = false;
            });
          } else {
            this.submitLoading = true;
            addTask(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.$emit('success');
              this.handleClose();
            }).finally(() => {
              this.submitLoading = false;
            });
          }
        }
      });
    },
    // 取消按钮
    handleClose() {
      this.$emit('update:show', false);
    },
    // 打开事件
    handleOpen() {
      if (this.id) {
        this.getInfo(this.id);
      } else {
        this.reset();
      }
    }
  }
};
</script>