BugDrawer调整

src/api/devcloud/buglist.ts

@@ -4,9 +4,10 @@ import { BUGLIST_PREFIX } from './prefix';
 
 interface BugRecordPayload {
   description: string;
-  timeToTake: number;
-  priority: '紧急'|'一般'|'宽松';
+  timeToTake: number | null;
+  priority: '紧急'|'一般'|'宽松' | null;
   title: string;
+  processorId: number | null;
 }
 
 type CreateBugRecordPayload = BugRecordPayload & {

src/components/AddDrawerContent.vue

@@ -1,103 +0,0 @@
-<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>

src/components/AddBugDrawerContent.vue → src/components/BugAddDrawer.vue

@@ -1,4 +1,9 @@
 <template>
+  <el-drawer v-model="showDrawer" :size="650" @before-close="(done) => {done()}">
+    <template #title>
+      <h3>新建缺陷记录</h3>
+    </template>
+    <template #default>
   <div class="drawer-content">
     <el-form
       ref="form"
@@ -16,7 +21,7 @@
                   show-word-limit v-model="param.description"></el-input>
       </el-form-item>
       <el-form-item label="工作量">
-        <el-input-number  v-model="param.timeToTake" :min="0" :max="200"/> h
+        <el-input-number  v-model="param.timeToTake" :min="1" :max="200"/> 人日
       </el-form-item>
       <el-form-item label="优先级">
         <el-select placeholder="选择优先级" v-model="param.priority">
@@ -30,7 +35,7 @@
       <el-form-item label="经办人">
         <el-select placeholder="选择经办人" v-model="param.processorId">
           <el-option
-            v-for="item in  processorOptions"
+            v-for="item in  userOptions"
             :key="item.value"
             :value="item.value"
             :label="item.label" />
@@ -38,34 +43,31 @@
       </el-form-item>
       <el-form-item>
         <el-button type="primary" @click="submitAdd">创建</el-button>
-        <el-button @click="cancelAdd">取消</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: 'AddBugDrawerContent',
+  name: 'BugAddDrawer',
   data() {
     return {
+      showDrawer: false,
       param: {
         title: '',
         description: '',
-        type: '',
         timeToTake: null,
         priority: null,
-        userId: null,
+        processorId: null,
       },
-      priorityOptions: [
-        { label: '紧急', value: 1 },
-        { label: '宽松', value: 2 },
-        { label: '一般', value: 3 },
-      ],
-      relateRequirementOptions: [],
-      processorOptions: [],
+      priorityOptions,
       rules: {
         title: [{
           required: true, massage: '请输入标题', trigger: 'blur',
@@ -76,23 +78,23 @@ export default {
       },
     };
   },
-  mounted() {
-    this.getProcessorOptions();
+  computed: {
+    userOptions() {
+      return this.$store.getters.userOptions;
+    },
   },
   methods: {
-    getProcessorOptions() {
-      this.processorOptions = [
-        { label: 'cyt', value: 1 },
-        { label: 'hks', value: 2 },
-        { label: 'abc', value: 3 },
-      ];
-    },
-    cancelAdd() {
-      this.$emit('cancel-add');
+    show() {
+      this.showDrawer = true;
     },
     submitAdd() {
-      // BugListAPI.createBugRecord()
-      this.$emit('finish-add');
+      const param = { projectId: this.$store.state.workspace.currentProjectId, ...this.param };
+      BugListAPI.createBugRecord(param).then(
+        (res) => {
+          this.$emit('finish-add');
+          this.showDrawer = false;
+        },
+      );
     },
   },
 };

src/components/BugDrawerContent.vue

@@ -1,363 +0,0 @@
-<template>
-  <div class="drawer-content">
-    <el-row class="entry-row">
-      <div class="node-type">Bug</div>
-      <h3>{{title}}</h3>
-      <div class="edit-icon" @click="editEntry('title')"></div>
-      <i class="el-icon-close"
-         style="margin-left: auto;margin-right: 30px; font-size: 20px;cursor: pointer"
-         @click="closeDrawer"></i>
-    </el-row>
-    <el-row class="entry-row" v-if="isEditing.title">
-      <el-input placeholder="请输入标题" size="mini" style="width: 300px;display: inline;" v-model="editedBug.title"/>
-      <el-button
-        style="margin-left: 5px"
-        type="primary"
-        size="mini"
-        icon="el-icon-edit"
-        circle
-        @click="submitEdit('title')" />
-      <el-button
-        style="margin-left: 5px"
-        type="danger"
-        size="mini"
-        icon="el-icon-close"
-        circle
-        @click="cancelEdit('title')" />
-    </el-row>
-    <!-- 描述 -->
-    <el-row class="entry-row" style="margin-top: 15px">
-      <h4>需求描述</h4>
-      <div class="edit-icon" @click="editEntry('description')"></div>
-    </el-row>
-    <el-row class="entry-row">
-      <div v-if="isEditing.description">
-        <el-input placeholder="请输入描述"
-                  type="textarea"
-                  maxlength="120"
-                  show-word-limit
-                  :rows="3" style="width: 300px;" v-model="editedBug.description" />
-        <br/>
-        <el-button
-          style="margin-left: 5px; margin-top: 5px"
-          type="primary"
-          size="mini"
-          icon="el-icon-edit"
-          circle
-          @click="submitEdit('description')" />
-        <el-button
-          style="margin-left: 5px; margin-top: 5px"
-          type="danger"
-          size="mini"
-          icon="el-icon-close"
-          circle
-          @click="cancelEdit('description')" />
-      </div>
-      <p v-else>{{description}}</p>
-    </el-row>
-    <!-- 状态、优先级等 -->
-    <el-row class="entry-row" style="margin-top: 15px">
-      <h4>详情</h4>
-    </el-row>
-    <el-row style="margin: 3px 20px;width: 100%">
-      <el-col :span="12">
-        <div class="detail-row">
-          <span>状态：</span>
-          <div  v-if="!isEditing.state"   @click="editEntry('state')" class="detail-value">
-            <StateTag :state="state"></StateTag>
-            <div class="edit-icon" />
-          </div>
-          <div v-else>
-            <el-select style="width: 160px" size="mini" v-model="editedBug.state">
-              <el-option
-                v-for="item in stateOptions"
-                :key="item.value"
-                :value="item.value"
-                :label="item.value" />
-            </el-select>
-            <el-button
-              style="margin-left: 5px"
-              type="primary"
-              size="mini"
-              icon="el-icon-edit"
-              circle
-              @click="submitEdit('state')" />
-            <el-button
-              style="margin-left: 5px"
-              type="danger"
-              size="mini"
-              icon="el-icon-close"
-              circle
-              @click="cancelEdit('state')" />
-          </div>
-        </div>
-        <div class="detail-row">
-          <span>优先级：</span>
-          <div class="detail-value"  v-if="!isEditing.priority"   @click="editEntry('priority')">
-            <PriorityTag :priority="priority"></PriorityTag>
-            <div class="edit-icon" />
-          </div>
-          <div v-else>
-            <el-select style="width: 160px" size="mini" v-model="editedBug.priority">
-              <el-option
-                v-for="item in  priorityOptions"
-                :key="item.value"
-                :value="item.value"
-                :label="item.label" />
-            </el-select>
-            <el-button
-              style="margin-left: 5px"
-              type="primary"
-              size="mini"
-              icon="el-icon-edit"
-              circle
-              @click="submitEdit('priority')" />
-            <el-button
-              style="margin-left: 5px"
-              type="danger"
-              size="mini"
-              icon="el-icon-close"
-              circle
-              @click="cancelEdit('priority')" />
-          </div>
-        </div>
-        <div class="detail-row">
-          <span>经办人：</span>
-          <div class="detail-value"   v-if="!isEditing.processorId"  @click="editEntry('processorId')">
-            <ElTag>{{userId}}</ElTag>
-            <div class="edit-icon" />
-          </div>
-          <div v-else>
-            <el-select style="width: 160px" size="mini" v-model="editedBug.processorId" >
-              <el-option
-                v-for="item in  processorOptions"
-                :key="item.value"
-                :value="item.value"
-                :label="item.label" />
-            </el-select>
-            <el-button
-              style="margin-left: 5px"
-              type="primary"
-              size="mini"
-              icon="el-icon-edit"
-              circle
-              @click="submitEdit('processorId')" />
-            <el-button
-              style="margin-left: 5px"
-              type="danger"
-              size="mini"
-              icon="el-icon-close"
-              circle
-              @click="cancelEdit('processorId')" />
-          </div>
-        </div>
-      </el-col>
-      <el-col :span="12">
-        <div class="detail-row">
-          <span>工作量：</span>
-          <div class="detail-value" v-if="!isEditing.timeToTake" @click="editEntry('timeToTake')">
-            <span>{{timeToTake}}h</span>
-            <div class="edit-icon" />
-          </div>
-          <div v-else >
-            <el-input-number size="mini" v-model="editedBug.timeToTake" :min="1" :max="200"/>
-            <el-button
-              style="margin-left: 5px"
-              type="primary"
-              size="mini"
-              icon="el-icon-edit"
-              circle
-              @click="submitEdit('timeToTake')" />
-            <el-button
-              style="margin-left: 5px"
-              type="danger"
-              size="mini"
-              icon="el-icon-close"
-              circle
-              @click="cancelEdit('timeToTake')" />
-          </div>
-        </div>
-        <div class="detail-row">
-          <span>创建时间：</span>
-          <span>{{startTime}}</span>
-        </div>
-        <div class="detail-row"><span>完成时间：</span>
-          <span>{{endTime}}</span></div>
-      </el-col>
-    </el-row>
-    <!-- 相关提交 -->
-    <el-row class="entry-row" style="margin-top: 15px">
-      <h4>相关提交（0）</h4>
-    </el-row>
-  </div>
-
-</template>
-
-<script>
-import PriorityTag from '@/components/PriorityTag.vue';
-import StateTag from '@/components/StateTag.vue';
-import { BugListAPI, RequirementAPI } from '@/api';
-
-export default {
-  name: 'BugDrawerContent',
-  components: { PriorityTag, StateTag },
-  props: {
-    id: Number,
-    title: String,
-    description: String,
-    state: String,
-    priority: String,
-    processorId: Number,
-    processorName: String,
-    timeToTake: Number,
-    startTime: String,
-    endTime: String,
-  },
-  data() {
-    return {
-      isEditing: {
-        title: false,
-        description: false,
-        state: false,
-        timeToTake: false,
-        priority: false,
-        processorId: false,
-      },
-      editedBug: {
-        title: null,
-        description: null,
-        state: null,
-        timeToTake: null,
-        priority: null,
-        processorId: null,
-      },
-      stateOptions: [
-        { label: '已创建', value: 0 },
-        { label: '进行中', value: 1 },
-        { label: '已完成', value: 2 },
-      ],
-      priorityOptions: [
-        { label: '紧急', value: 1 },
-        { label: '宽松', value: 2 },
-        { label: '一般', value: 3 },
-      ],
-      processorOptions: [],
-    };
-  },
-  mounted() {
-    this.getProcessorOptions();
-  },
-  methods: {
-    getProcessorOptions() {
-      this.processorOptions = [
-        { label: 'cyt', value: 1 },
-        { label: 'hks', value: 2 },
-        { label: 'abc', value: 3 },
-      ];
-    },
-    editEntry(key) {
-      Object.keys(this.isEditing).forEach((item) => {
-        if (key === item) this.isEditing[item] = true;
-        else this.isEditing[item] = false;
-      });
-    },
-    submitEdit(key) {
-      // BugListAPI.updateBugRecord()
-      this.$emit('bug-update');
-    },
-    cancelEdit(key) {
-      this.isEditing[key] = false;
-      this.editedBug[key] = null;
-    },
-    closeDrawer() {
-      this.$emit('close-drawer');
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.drawer-content{
-  width: 100%;
-  padding: 10px;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: flex-start;
-}
-.entry-row{
-  width: 100%;
-  margin: 3px 20px;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: flex-start;
-  .edit-icon{
-    margin-left: 5px;
-    display: none;
-    cursor: pointer;
-    width: 20px;
-    height: 20px;
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-    transition: all .2s linear;
-    background-image: url("../assets/icon/edit.svg");
-    &:hover{
-      background-image: url("../assets/icon/edit_hover.svg");
-    }
-  }
-  &:hover .edit-icon{
-    display: block;
-  }
-  h3, h4{
-    color: #172b4d
-  }
-}
-.detail-row{
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  line-height: 24px;
-  margin: 3px 0;
-  .edit-icon{
-    margin-left: 5px;
-    display: none;
-    width: 20px;
-    height: 20px;
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-    transition: all .2s linear;
-    background-image: url("../assets/icon/edit.svg");
-    cursor: pointer;
-    &:hover{
-      background-image: url("../assets/icon/edit_hover.svg");
-    }
-  }
-  &:hover .edit-icon{
-    display: block;
-  }
-}
-.detail-value{
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
-.node-type{
-  color: #FFFFFF;
-  border-radius: 3px;
-  font-size: 14px;
-  background-color: #42b983;
-  padding: 1px 4px;
-  margin-right: 4px;
-}
-.state-entry{
-  border-radius: 5px;
-  background-color: cornflowerblue;
-  font-size: 12px;
-  color: #FFFFFF;
-  padding: 0px 4px;
-  cursor: pointer
-}
-</style>

src/components/BugEditDrawer.vue

@@ -0,0 +1,285 @@
+<template>
+  <el-drawer
+    v-model="showDrawer"
+    :size="650"
+    @before-close="(done) => {
+      isEditing = false;
+      done();
+    }">
+    <template #title>
+      <el-row class="entry-row">
+        <el-col :span="2">
+          <div class="node-type">Bug</div>
+        </el-col>
+        <el-col :span="12" :offset="2">
+          <template class="entry-row" v-if="isEditing">
+            <el-input placeholder="请输入标题" size="mini" style="width: 200px;display: inline;" v-model="editedBugRecord.title"/>
+          </template>
+          <template v-else><h3>{{title}}</h3></template>
+        </el-col>
+        <el-col :span="6" :offset="2">
+          <el-switch
+            v-if="activeTab ==='basic_info'"
+            style="float: right;"
+            v-model="isEditing"
+            active-text="编辑"
+            @change="(isEditing) => {
+              isEditing && fillDefaultValue();
+            }">
+          </el-switch>
+        </el-col>
+      </el-row>
+    </template>
+    <template #default>
+      <el-row type="flex" justify="center">
+        <el-col :span="20">
+          <el-tabs
+            class="tabs"
+            v-model="activeTab"
+            @tab-click="(tab) => {
+              if(tab.panename !== 'basic_info')
+                isEditing = false;
+            }"
+          >
+            <el-tab-pane label="基本信息" name="basic_info">
+              <el-row class="entry-row" style="margin-top: 15px">
+                <h4>缺陷描述</h4>
+              </el-row>
+              <el-row class="entry-row">
+                <div v-if="isEditing">
+                  <el-input placeholder="请输入描述"
+                            type="textarea"
+                            maxlength="120"
+                            show-word-limit
+                            :rows="3" style="width: 300px;" v-model="editedBugRecord.description" />
+                  <br/>
+                </div>
+                <p v-else>{{description}}</p>
+              </el-row>
+              <!-- 状态、优先级等 -->
+              <el-row class="entry-row" style="margin-top: 15px">
+                <h4>详情</h4>
+              </el-row>
+              <el-row style="margin: 3px 20px;width: 100%">
+                <el-col :span="12">
+                  <div class="detail-row">
+                    <span>状态：</span>
+                    <div  v-if="!isEditing" class="detail-value">
+                      <StateTag :state="state"></StateTag>
+                    </div>
+                    <div v-else>
+                      <el-select style="width: 160px" size="mini" v-model="editedBugRecord.state">
+                        <el-option
+                          v-for="item in stateOptions"
+                          :key="item.value"
+                          :value="item.value"
+                          :label="item.value" />
+                      </el-select>
+                    </div>
+                  </div>
+                  <div class="detail-row">
+                    <span>优先级：</span>
+                    <div class="detail-value"  v-if="!isEditing">
+                      <PriorityTag :priority="priority"></PriorityTag>
+                    </div>
+                    <div v-else>
+                      <el-select style="width: 160px" size="mini" v-model="editedBugRecord.priority">
+                        <el-option
+                          v-for="item in  priorityOptions"
+                          :key="item.value"
+                          :value="item.value"
+                          :label="item.label" />
+                      </el-select>
+                    </div>
+                  </div>
+                  <div class="detail-row">
+                    <span>经办人：</span>
+                    <div class="detail-value"   v-if="!isEditing">
+                      <el-tag>{{processorName}}</el-tag>
+                    </div>
+                    <div v-else>
+                      <el-select style="width: 160px" size="mini" v-model="editedBugRecord.userId" >
+                        <el-option
+                          v-for="item in  userOptions"
+                          :key="item.value"
+                          :value="item.value"
+                          :label="item.label" />
+                      </el-select>
+                    </div>
+                  </div>
+                </el-col>
+                <el-col :span="12">
+                  <div class="detail-row">
+                    <span>工作量：</span>
+                    <div class="detail-value" v-if="!isEditing">
+                      <span>{{timeToTake}}人日</span>
+                    </div>
+                    <div v-else>
+                      <el-input-number size="mini" v-model="editedBugRecord.timeToTake" :min="1" :max="200">
+                      </el-input-number>
+                    </div>
+                  </div>
+                  <div class="detail-row">
+                    <span>开始时间：</span>
+                    <span>{{startTime}}</span>
+                  </div>
+                  <div class="detail-row"><span>完成时间：</span>
+                    <span>{{endTime}}</span></div>
+                </el-col>
+              </el-row>
+              <el-row v-if="isEditing" class="entry-row" style="margin-top: 15px">
+                <el-button @click="submitEdit" size="mini" type="primary">提交</el-button>
+                <el-button @click="cancelEdit" size="mini">取消</el-button>
+              </el-row>
+            </el-tab-pane>
+            <el-tab-pane label="历史提交" name="commit_history">
+              <!-- 相关提交 -->
+              <el-row class="entry-row" style="margin-top: 15px">
+                <el-table :data="commits">
+                  <el-table-column type="expand">
+                    <template #default="scope">
+                      <pre>{{scope.row}}</pre>
+                    </template>
+                  </el-table-column>
+                  <el-table-column
+                    prop="id"
+                    label="ID"
+                    align="center"
+                  >
+                  </el-table-column>
+                  <el-table-column
+                    prop="title"
+                    label="标题"
+                    align="center"
+                  >
+                  </el-table-column>
+                  <el-table-column
+                    prop="gitlabUsername"
+                    label="用户"
+                    align="center"
+                  >
+                  </el-table-column>
+                </el-table>
+              </el-row>
+            </el-tab-pane>
+          </el-tabs>
+        </el-col>
+      </el-row>
+    </template>
+  </el-drawer>
+</template>
+
+<script>
+import { BugListAPI } from '@/api';
+import PriorityTag from '@/components/PriorityTag.vue';
+import StateTag from '@/components/StateTag.vue';
+import { priorityOptions, stateOptions } from '@/utils/constants';
+
+export default {
+  name: 'BugEditDrawer',
+  components: { PriorityTag, StateTag },
+  emits: ['bug-record-update'],
+  props: {
+    id: Number,
+    title: String,
+    description: String,
+    state: String,
+    priority: String,
+    processorId: Number,
+    processorName: String,
+    timeToTake: Number,
+    startTime: String,
+    endTime: String,
+    commits: Array,
+  },
+  data() {
+    return {
+      activeTab: 'basic_info',
+      showDrawer: false,
+      isEditing: false,
+      editedBugRecord: {
+        title: null,
+        description: null,
+        state: null,
+        timeToTake: null,
+        priority: null,
+        processorId: null,
+        processorName: null,
+      },
+      stateOptions,
+      priorityOptions,
+    };
+  },
+  computed: {
+    userOptions() {
+      return this.$store.getters.userOptions;
+    },
+  },
+  methods: {
+    show() {
+      this.showDrawer = true;
+    },
+    fillDefaultValue() {
+      this.editedBugRecord.title = this.title;
+      this.editedBugRecord.description = this.description;
+      this.editedBugRecord.state = this.state;
+      this.editedBugRecord.timeToTake = this.timeToTake;
+      this.editedBugRecord.priority = this.priority;
+      this.editedBugRecord.processorId = this.processorId;
+      this.editedBugRecord.processorName = this.processorName;
+    },
+    submitEdit() {
+      const param = { id: this.id, ...this.editedBugRecord };
+      BugListAPI.updateBugRecord(param).then((res) => {
+        this.isEditing = false;
+        this.$emit('bug-record-update');
+      });
+    },
+    cancelEdit() {
+      this.isEditing = false;
+      this.fillDefaultValue();
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.entry-row{
+  width: 100%;
+  margin: 3px 20px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  h3, h4{
+    color: #172b4d
+  }
+}
+.detail-row{
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  line-height: 24px;
+  margin: 3px 0;
+}
+.detail-value{
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.node-type{
+  color: #FFFFFF;
+  border-radius: 3px;
+  font-size: 14px;
+  background-color: #42b983;
+  text-align: center;
+}
+.state-entry{
+  border-radius: 5px;
+  background-color: cornflowerblue;
+  font-size: 12px;
+  color: #FFFFFF;
+  padding: 0px 4px;
+  cursor: pointer
+}
+</style>

src/components/RequirementDrawer.vue

@@ -251,17 +251,6 @@ export default {
       this.editedRequirement.processorId = this.processorId;
       this.editedRequirement.processorName = this.processorName;
     },
-    getUserName(value) {
-      let res;
-      this.userOptions.some((item) => {
-        if (item.value === value) {
-          res = item.label;
-          return true;
-        }
-        return false;
-      });
-      return res;
-    },
     submitEdit() {
       const param = { id: this.id, ...this.editedRequirement };
       RequirementAPI.updateTreeNode(param).then((res) => {

src/views/Project/BugList.vue

@@ -6,23 +6,12 @@
     @add="addBugRecord"
     @row-click="openDrawer"
   />
-  <ElDrawer v-model="showAddBugDrawer" size="650px">
-    <template #title>
-      <h3>新建缺陷记录</h3>
-    </template>
-    <template #default>
-      <AddBugDrawerContent
-        @cancel-add="this.showAddBugDrawer=false"
-      @finish-add="refresh"></AddBugDrawerContent>
-    </template>
-  </ElDrawer>
-  <ElDrawer v-model="showBugDetailDrawer"  :with-header="false" size="650px">
-    <template #default>
-      <BugDrawerContent
-        v-bind="selectedBug"
-        @close-drawer="showBugDetailDrawer=false" @bug-update="refresh"></BugDrawerContent>
-    </template>
-  </ElDrawer>
+
+  <BugAddDrawer
+    ref="addDrawer"
+    @finish-add="fetch"></BugAddDrawer>
+  <BugEditDrawer ref="editDrawer" v-bind="selectedBug" @bug-record-update="fetch">
+  </BugEditDrawer>
 </div>
 </template>
 
@@ -30,16 +19,15 @@
 import { BugListAPI } from '@/api';
 
 import GeneralTable from '@/components/GeneralTable.vue';
-import AddBugDrawerContent from '@/components/AddBugDrawerContent.vue';
-import BugDrawerContent from '@/components/BugDrawerContent.vue';
+import BugAddDrawer from '@/components/BugAddDrawer.vue';
+import BugEditDrawer from '@/components/BugEditDrawer.vue';
 
 export default {
-  components: { BugDrawerContent, AddBugDrawerContent, GeneralTable },
+  components: { BugEditDrawer, BugAddDrawer, GeneralTable },
   data() {
     return {
       bugList: [],
       showAddBugDrawer: false,
-      showBugDetailDrawer: false,
       selectedBug: null,
     };
   },
@@ -52,17 +40,12 @@ export default {
     },
     openDrawer(row) {
       this.selectedBug = Array.prototype.find.call(this.bugList, (bug) => bug.id === row.id);
-      this.showBugDetailDrawer = true;
+      this.$refs.editDrawer.show();
       // 打开详情抽屉
       console.log(row);
     },
     addBugRecord() {
-      this.showAddBugDrawer = true;
-      // TODO: 添加一条bug记录
-    },
-    refresh() {
-      this.fetch();
-      this.showAddBugDrawer = false;
+      this.$refs.addDrawer.show();
     },
   },
 };