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

<template>
  <div class="drawer-content">
   <el-row class="entry-row">
     <div class="node-type">{{type}}</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="editedRequirement.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="editedRequirement.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">
            <span class="state-entry">{{state}}</span>
            <div class="edit-icon" />
          </div>
          <div v-else>
          <el-select size="mini" v-model="editedRequirement.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')">
          <span class="state-entry">{{getPriorityStr(priority)}}</span>
            <div class="edit-icon" />
          </div>
          <div v-else>
          <el-select size="mini" v-model="editedRequirement.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.userId"  @click="editEntry('userId')">
          <span class="state-entry">{{getUserName(userId)}}</span>
            <div class="edit-icon" />
          </div>
          <div v-else>
          <el-select size="mini" v-model="editedRequirement.userId" >
            <el-option
              v-for="item in  userOptions"
              :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('userId')" />
            <el-button
              style="margin-left: 5px"
              type="danger"
              size="mini"
              icon="el-icon-close"
              circle
              @click="cancelEdit('userId')" />
          </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="editedRequirement.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>相关需求</h4>
    </el-row>
    <el-row style="margin: 3px 25px;width: 100%">
      <h5>父项</h5>
    </el-row>
    <el-row style="margin: 0px 25px;">
      <el-link type="primary">{{parent}}</el-link>
    </el-row>
    <el-row style="margin: 3px 25px;width: 100%">
      <h5>子项</h5>
    </el-row>
    <el-row style="margin: 0px 25px;" v-for="item in childs" :key="item.id">
        <el-link @click.prevent="changeContent(item.id)" type="primary">{{item.title}}</el-link>
    </el-row>
    <!-- 相关缺陷 -->
    <el-row class="entry-row" style="margin-top: 15px">
      <h4>相关缺陷（0）</h4>
    </el-row>
    <!-- 相关提交 -->
    <el-row class="entry-row" style="margin-top: 15px">
      <h4>相关提交（0）</h4>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'TaskDrawerContent',
  props: {
    id: Number,
    type: String,
    title: String,
    description: String,
    state: String,
    priority: Number,
    userId: Number,
    timeToTake: Number,
    startTime: String,
    endTime: String,
    childs: Array,
    parent: Number,
    stateOptions: Array,
    userOptions: Array,
    priorityOptions: Array,
  },
  data() {
    return {
      isEditing: {
        title: false,
        description: false,
        state: false,
        timeToTake: false,
      },
      editedRequirement: {
        title: '',
        description: '',
        state: null,
        timeToTake: null,
      },
    };
  },
  methods: {
    getPriorityStr(value) {
      let res;
      this.priorityOptions.some((item) => {
        if (item.value === value) {
          res = item.label;
          return true;
        }
        return false;
      });
      return res;
    },
    getUserName(value) {
      let res;
      this.userOptions.some((item) => {
        if (item.value === value) {
          res = item.label;
          return true;
        }
        return false;
      });
      return res;
    },
    editEntry(key) {
      Object.keys(this.isEditing).forEach((item) => {
        if (key === item) this.isEditing[item] = true;
        else this.isEditing[item] = false;
      });
    },
    submitEdit(key) {
      console.log('submit edit node');
      this.isEditing[key] = false;
    },
    cancelEdit(key) {
      this.isEditing[key] = false;
    },
    changeContent(id) {
      this.$emit('change', id);
    },
    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: 0 3px;
  margin-right: 4px;
}
.state-entry{
  border-radius: 5px;
  background-color: cornflowerblue;
  font-size: 12px;
  color: #FFFFFF;
  padding: 0px 4px;
  cursor: pointer
}
</style>