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

<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">{{type}}</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="editedRequirement.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="editedRequirement.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">
                  <RowItem :label="'状态:'">
                      <div  v-if="!isEditing" class="detail-value">
                        <StateTag :state="state"></StateTag>
                      </div>
                      <div v-else>
                        <el-select style="width: 160px" size="mini" v-model="editedRequirement.state">
                          <el-option
                            v-for="item in stateOptions"
                            :key="item.value"
                            :value="item.value"
                            :label="item.value" />
                        </el-select>
                      </div>
                  </RowItem>
                  <RowItem :label="'优先级:'">
                    <div class="detail-value"  v-if="!isEditing">
                      <PriorityTag :priority="priority"></PriorityTag>
                    </div>
                    <div v-else>
                      <el-select style="width: 160px" size="mini" v-model="editedRequirement.priority">
                        <el-option
                          v-for="item in  priorityOptions"
                          :key="item.value"
                          :value="item.value"
                          :label="item.label" />
                      </el-select>
                    </div>
                  </RowItem>
                  <RowItem :label="'经办人:'">
                    <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="editedRequirement.userId" >
                        <el-option
                          v-for="item in  userOptions"
                          :key="item.value"
                          :value="item.value"
                          :label="item.label" />
                      </el-select>
                    </div>
                  </RowItem>
                </el-col>
                <el-col :span="12">
                  <RowItem :label="'工作量:'">
                    <div class="detail-value" v-if="!isEditing">
                      <span>{{timeToTake}}人日</span>
                    </div>
                    <div v-else>
                      <el-input-number size="mini" v-model="editedRequirement.timeToTake" :min="1" :max="200">
                      </el-input-number>
                    </div>
                  </RowItem>
                  <RowItem :label="'开始时间:'"><span>{{formatter(startTime)}}</span></RowItem>
                  <RowItem :label="'完成时间:'"><span>{{formatter(endTime)}}</span></RowItem>
                </el-col>
              </el-row>
              <!-- 相关需求 -->
              <template v-if="showSons">
              <el-row class="entry-row" style="margin-top: 15px">
                <h4>子需求</h4>
              </el-row>
              <template v-if="(childs && childs.length) || false">
                <el-row style="margin: 10px 25px;" v-for="item in childs" :key="item.id">
                  <el-link @click.prevent="changeContent(item.id)" type="primary">{{item.title}}</el-link>
                </el-row>
              </template>
              <template v-else>
                <el-row style="margin: 0px 25px;">
                  没有子需求
                </el-row>
              </template>
              </template>
              <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">
                      <RowItem :label="'message:'" :label-span="5" :value-span="19">{{scope.row.message}}</RowItem>
                      <RowItem :label="'timestamp:'" :label-span="5" :value-span="19">{{scope.row.timestamp}}</RowItem>
                    </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 { RequirementAPI } from '@/api';
import PriorityTag from '@/components/PriorityTag.vue';
import StateTag from '@/components/StateTag.vue';
import { priorityOptions, stateOptions } from '@/utils/constants';
import { formatter } from '@/utils/time';
import RowItem from './RowItem.vue';

export default {
  name: 'RequirementDrawers',
  components: { RowItem, PriorityTag, StateTag },
  emits: ['change', 'requirement-update'],
  props: {
    id: Number,
    type: String,
    title: String,
    description: String,
    state: String,
    priority: String,
    processorId: Number,
    processorName: String,
    timeToTake: Number,
    startTime: String,
    endTime: String,
    childs: Array,
    parentId: Number,
    commits: Array,
    showSons: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      activeTab: 'basic_info',
      showDrawer: false,
      isEditing: false,
      editedRequirement: {
        title: null,
        description: null,
        state: null,
        timeToTake: null,
        priority: null,
        processorId: null,
        processorName: null,
      },
      stateOptions,
      priorityOptions,
    };
  },
  computed: {
    userOptions() {
      return this.$store.getters.userOptions;
    },
  },
  methods: {
    formatter,
    show() {
      this.showDrawer = true;
    },
    fillDefaultValue() {
      this.editedRequirement.title = this.title;
      this.editedRequirement.description = this.description;
      this.editedRequirement.state = this.state;
      this.editedRequirement.timeToTake = this.timeToTake;
      this.editedRequirement.priority = this.priority;
      this.editedRequirement.processorId = this.processorId;
      this.editedRequirement.processorName = this.processorName;
    },
    submitEdit() {
      const param = { id: this.id, ...this.editedRequirement };
      RequirementAPI.updateTreeNode(param).then((res) => {
        this.isEditing = false;
        this.$emit('requirement-update');
      });
    },
    cancelEdit() {
      this.isEditing = false;
      this.fillDefaultValue();
    },
    changeContent(id) {
      this.$emit('change', id);
    },
  },
};
</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>