seecoder-devcloud-frontend/src/components/BugAddDrawer.vue

<template>
  <el-drawer v-model="showDrawer" :size="650">
    <template #title>
      <h3>新建缺陷记录</h3>
    </template>
    <template #default>
  <div class="drawer-content">
    <el-form
      ref="form"
      :rules="rules"
      :model="param"
      label-width="80px"
      style="width: 80%;margin-left: 20px"
      size="small">
      <el-form-item label="标题" prop="title">
        <el-input id="bugAddTitle" v-model="param.title"></el-input>
      </el-form-item>
      <el-form-item label="描述">
        <el-input id="bugAddDescription" type="textarea"
                  maxlength="120"
                  show-word-limit v-model="param.description"></el-input>
      </el-form-item>
      <el-form-item label="工作量">
        <el-input-number id="bugAddTime" v-model="param.timeToTake" :min="1" :max="200"/> 人日
      </el-form-item>
      <el-form-item label="优先级">
        <el-select id="bugAddPriority" placeholder="选择优先级" v-model="param.priority">
          <el-option
            v-for="item in  priorityOptions"
            :key="item.value"
            :value="item.value"
            :label="item.label" />
        </el-select>
      </el-form-item>
      <el-form-item label="经办人">
        <el-select id="bugAddProcessor" placeholder="选择经办人" v-model="param.processorId">
          <el-option
            v-for="item in  userOptions"
            :key="item.value"
            :value="item.value"
            :label="item.label" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button id="bugAddConfirm" type="primary" v-loading="confirmLoading" @click="submitAdd">创建</el-button>
        <el-button @click="showDrawer = false">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
    </template>
  </el-drawer>
</template>

<script>
import { priorityOptions } from '@/utils/constants';
import { BugListAPI } from '../api';

export default {
  name: 'BugAddDrawer',
  emits: ['finish-add'],
  data() {
    return {
      showDrawer: false,
      param: {
        title: '',
        description: '',
        timeToTake: null,
        priority: null,
        processorId: null,
      },
      priorityOptions,
      rules: {
        title: [{
          required: true, massage: '请输入标题', trigger: 'blur',
        }],
        type: [{
          required: true, massage: '请选择类型', trigger: 'change',
        }],
      },
      confirmLoading: false,
    };
  },
  computed: {
    userOptions() {
      return this.$store.getters.userOptions;
    },
  },
  methods: {
    show() {
      this.showDrawer = true;
    },
    submitAdd() {
      this.confirmLoading = true;
      const param = { projectId: this.$store.state.workspace.currentProjectId, ...this.param };
      BugListAPI.createBugRecord(param).then(
        (res) => {
          this.$emit('finish-add');
          this.showDrawer = false;
        },
      );
      this.confirmLoading = false;
    },
  },
};
</script>

<style scoped>
.drawer-content{
  width: 100%;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
</style>