|
|
@@ -0,0 +1,350 @@
|
|
|
+<template>
|
|
|
+ <div class="drawer-content">
|
|
|
+ <el-row class="entry-row">
|
|
|
+ <h3>{{title}}</h3>
|
|
|
+ <div class="edit-icon" @click="editEntry('title')"></div>
|
|
|
+ </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>相关缺陷</h4>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ name: 'TaskDrawerContent',
|
|
|
+ props: {
|
|
|
+ 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: {},
|
|
|
+ };
|
|
|
+ },
|
|
|
+ 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) {
|
|
|
+ this.isEditing[key] = true;
|
|
|
+ },
|
|
|
+ submitEdit(key) {
|
|
|
+ console.log('...');
|
|
|
+ this.isEditing[key] = false;
|
|
|
+ },
|
|
|
+ cancelEdit(key) {
|
|
|
+ this.isEditing[key] = false;
|
|
|
+ },
|
|
|
+ changeContent(id) {
|
|
|
+ this.$emit('change', id);
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</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;
|
|
|
+}
|
|
|
+.state-entry{
|
|
|
+ border-radius: 5px;
|
|
|
+ background-color: cornflowerblue;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ padding: 0px 4px;
|
|
|
+ cursor: pointer
|
|
|
+}
|
|
|
+</style>
|
chenyitao.0928
