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

<template>
  <div class="drawer-content">
    <el-form
      ref="form"
      :rules="rules"
      :model="param"
      label-width="80px"
      style="width: 80%"
      size="small">
      <el-form-item label="标题" prop="title">
        <el-input v-model="param.title"></el-input>
      </el-form-item>
      <el-form-item label="描述">
        <el-input type="textarea"
                  maxlength="120"
                  show-word-limit v-model="param.description"></el-input>
      </el-form-item>
      <el-form-item label="类型" required>
        <el-radio-group v-model="param.type">
          <el-radio label="需求"></el-radio>
          <el-radio label="任务"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="工作量">
        <el-input-number  v-model="param.timeToTake" :min="0" :max="200"/> h
      </el-form-item>
      <el-form-item label="优先级">
        <el-select 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 placeholder="选择经办人" v-model="param.userId">
          <el-option
            v-for="item in  userOptions"
            :key="item.value"
            :value="item.value"
            :label="item.label" />
        </el-select>
      </el-form-item>
      <el-form-item style="display: flex">
        <el-button type="primary" @click="submitAdd">创建</el-button>
        <el-button @click="cancelAdd">取消</el-button>
      </el-form-item>
    </el-form>

  </div>
</template>

<script>
export default {
  name: 'AddDrawerContent',
  props: {
    parent: Number,
    priorityOptions: Array,
    userOptions: Array,
  },
  data() {
    return {
      param: {
        title: '',
        description: '',
        type: '',
        timeToTake: null,
        priority: null,
        userId: null,
      },
      rules: {
        title: [{
          required: true, massage: '请输入标题', trigger: 'blur',
        }],
        type: [{
          required: true, massage: '请选择类型', trigger: 'change',
        }],
      },
    };
  },
  methods: {
    submitAdd() {
      // 调新增接口
      this.$emit('add-success');
    },
    cancelAdd() {
      this.$emit('add-cancel');
    },
  },
};
</script>

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