|
@@ -1,48 +1,161 @@
|
|
|
<template>
|
|
|
- <div class="op-detial">
|
|
|
+ <div class="wb-op-detial">
|
|
|
<div class="content headerH1">
|
|
|
- <div>
|
|
|
- {{ form_data.title }}
|
|
|
+ <div style="width: 70%">
|
|
|
+ <el-input
|
|
|
+ v-if="form_data"
|
|
|
+ v-model="form_data.title"
|
|
|
+ size="small"
|
|
|
+ clearable
|
|
|
+ class="title"
|
|
|
+ style="width:100% !important;"
|
|
|
+ placeholder="请输入标题"
|
|
|
+ @change="(e) => onChange('title', e)"
|
|
|
+ @blur="update"
|
|
|
+ />
|
|
|
</div>
|
|
|
- <i class="el-icon-delete icon" />
|
|
|
+ <i class="el-icon-delete icon" @click="deleteHandle" />
|
|
|
</div>
|
|
|
<div class="content base">
|
|
|
- <baseContent :data="form_data" />
|
|
|
+ <baseContent
|
|
|
+ v-if="form_data"
|
|
|
+ :data="form_data"
|
|
|
+ @update="update"
|
|
|
+ @change="onChange"
|
|
|
+ />
|
|
|
</div>
|
|
|
- <div class="content replay">
|
|
|
+ <div class="content">
|
|
|
<header class="headerH2">
|
|
|
- <headTitle title="复盘" icon="el-icon-link" :open-btn="true" @handle="linkHandle" />
|
|
|
+ <headTitle title="复盘" :open-btn="true">
|
|
|
+ <span slot="handleSlot">
|
|
|
+ <!-- 如果设置过url -->
|
|
|
+ <el-popover
|
|
|
+ v-if="form_data.replayUrl"
|
|
|
+ placement="bottom-start"
|
|
|
+ trigger="click"
|
|
|
+ >
|
|
|
+ <el-button-group>
|
|
|
+ <el-button :size="size" type="info" plain @click="goto(form_data.replayUrl)">访问链接</el-button>
|
|
|
+ <el-button :size="size" type="info" plain @click="editReplayUrl">编辑</el-button>
|
|
|
+ <el-button :size="size" type="info" plain @click="() => changeReplayUrl('')">取消链接</el-button>
|
|
|
+ </el-button-group>
|
|
|
+ <i slot="reference" class="el-icon-link" />
|
|
|
+ </el-popover>
|
|
|
+ <!-- 如果没有设置url -->
|
|
|
+ <i v-else class="el-icon-link" @click="editReplayUrl" />
|
|
|
+ </span>
|
|
|
+ </headTitle>
|
|
|
</header>
|
|
|
- <div>
|
|
|
+ <div v-if="form_data">
|
|
|
<text-area
|
|
|
:id="'pro-desc'"
|
|
|
:value.sync="form_data.replayDesc"
|
|
|
:empty-text="'点击'"
|
|
|
:input-button="'添加复盘内容'"
|
|
|
:styles="{ padding: '12px 0 20px 0' }"
|
|
|
- @change="changeReplay"
|
|
|
+ @change="(e) => onChange('replayDesc', e)"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="content">
|
|
|
+ <header class="headerH2">
|
|
|
+ <headTitle title="改进项" :icon="makeBetterEdit ? '' : 'el-icon-edit'" :open-btn="true" @handle="makeBetterEdit = true">
|
|
|
+ <span slot="handleSlot">
|
|
|
+ <!-- <i class="el-icon-edit" @click="$emit('handle')" /> -->
|
|
|
+ <!-- <span></span> -->
|
|
|
+ <span v-show="makeBetterEdit" @click="makeBetterEdit = false">111</span>
|
|
|
+ </span>
|
|
|
+ </headTitle>
|
|
|
+ </header>
|
|
|
+ <div v-if="form_data" class="makeBetter">
|
|
|
+ <!-- edit -->
|
|
|
+ <make-better-list
|
|
|
+ v-show="makeBetterEdit"
|
|
|
+ :list="improvements"
|
|
|
+ @addHandle="addMakeBetterList"
|
|
|
+ @delHandle="delMakeBetterList"
|
|
|
+ @onChange="(key, value, index) => change('improvements', key, value, index)"
|
|
|
+ />
|
|
|
+ <!-- view -->
|
|
|
+ <make-better-view
|
|
|
+ v-show="!makeBetterEdit"
|
|
|
+ :list="improvements"
|
|
|
+ @addHandle="addMakeBetterList"
|
|
|
+ @delHandle="delMakeBetterList"
|
|
|
+ @onChange="(key, value, index) => change('improvements', key, value, index)"
|
|
|
/>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div class="content ">
|
|
|
+ <header class="headerH2">
|
|
|
+ <headTitle title="动态" />
|
|
|
+ </header>
|
|
|
+ <actionDynamic :comments="commentlist" :change-record="changeRecordList" @addComment="createCommentHandle" />
|
|
|
+ </div>
|
|
|
+ <model
|
|
|
+ title="复盘链接"
|
|
|
+ :visible="addLinkModelvisible"
|
|
|
+ @handleClose="addLinkModelvisible = false"
|
|
|
+ @handleOk="() => changeReplayUrl(replayUrl)"
|
|
|
+ >
|
|
|
+ <div slot="content" class="replayLink">
|
|
|
+ <div class="name">复盘链接:</div>
|
|
|
+ <el-input
|
|
|
+ v-model="replayUrl"
|
|
|
+ size="small"
|
|
|
+ clearable
|
|
|
+ placeholder="请输入复盘链接"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </model>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
-import { getDetial } from '@/api/onlineproblem'
|
|
|
+import {
|
|
|
+ getDetial,
|
|
|
+ updateOnlineProblem,
|
|
|
+ deleteProblem,
|
|
|
+ getCommentList,
|
|
|
+ createComment,
|
|
|
+ getRecordList
|
|
|
+} from '@/api/onlineproblem'
|
|
|
+import { isUrl } from '@/utils/util'
|
|
|
+import model from '@/components/model'
|
|
|
+import actionDynamic from '@/components/actionDynamic'
|
|
|
import baseContent from './component/base'
|
|
|
import headTitle from '@/components/headTitle'
|
|
|
import textArea from '@/components/input/textArea' // 富文本
|
|
|
+import makeBetterList from '../create/component/makeBetterList'
|
|
|
+import makeBetterView from './component/makeBetterView'
|
|
|
import 'tinymce/plugins/table'// 插入表格插件
|
|
|
export default {
|
|
|
components: {
|
|
|
baseContent,
|
|
|
textArea,
|
|
|
- headTitle
|
|
|
+ headTitle,
|
|
|
+ makeBetterList,
|
|
|
+ makeBetterView,
|
|
|
+ model,
|
|
|
+ actionDynamic
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
+ size: 'small',
|
|
|
+ addLinkModelvisible: false,
|
|
|
id: this.$route.query.id,
|
|
|
- // data: '',
|
|
|
- form_data: { pm: 'wenbobowen', replayDesc: '' }
|
|
|
+ form_data: {},
|
|
|
+ replayUrl: '',
|
|
|
+ updateData: {},
|
|
|
+ makeBetterEdit: false,
|
|
|
+ improvements: [{}],
|
|
|
+ commentlist: [{
|
|
|
+ commentInfo: {
|
|
|
+ name: 1111
|
|
|
+ }
|
|
|
+ }], // 评价列表
|
|
|
+ changeRecordList: [{
|
|
|
+ remark: 111
|
|
|
+ }] // 变更记录列表
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
@@ -51,20 +164,115 @@ export default {
|
|
|
methods: {
|
|
|
async search() {
|
|
|
const res = await getDetial({ id: this.id })
|
|
|
- console.log(res)
|
|
|
- this.form_data = res.data
|
|
|
+ if (res.code === 200) {
|
|
|
+ this.form_data = { ...res.data }
|
|
|
+ this.copy_form_data = { ...res.data }
|
|
|
+ this.replayUrl = res.data.replayUrl || ''
|
|
|
+ }
|
|
|
},
|
|
|
- linkHandle() {
|
|
|
-
|
|
|
+ goto(url) {
|
|
|
+ window.open(url, '_blank')
|
|
|
+ },
|
|
|
+ changeReplayUrl(value) {
|
|
|
+ if (value) {
|
|
|
+ if (!isUrl(value)) {
|
|
|
+ this.$message({
|
|
|
+ message: '请输入正确的复盘链接(以http或者https开头)',
|
|
|
+ type: 'error'
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.updateData = { replayUrl: value }
|
|
|
+ this.update()
|
|
|
+ },
|
|
|
+ editReplayUrl() {
|
|
|
+ this.replayUrl = this.form_data.replayUrl || ''
|
|
|
+ this.addLinkModelvisible = true
|
|
|
+ },
|
|
|
+ async onChange(key, value) {
|
|
|
+ // 确保每次更新一项
|
|
|
+ this.updateData = { [key]: value }
|
|
|
+ },
|
|
|
+ async update() {
|
|
|
+ const res = await updateOnlineProblem({ ...this.updateData, id: this.form_data.id })
|
|
|
+ if (res.code === 200) {
|
|
|
+ this.search()
|
|
|
+ } else {
|
|
|
+ this.form_data = { ...this.copy_form_data }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ addMakeBetterList() {
|
|
|
+ this.improvements.push({})
|
|
|
+ },
|
|
|
+ delMakeBetterList(index) {
|
|
|
+ this.improvements.splice(index, 1)
|
|
|
+ },
|
|
|
+ change(type, key, value, index) {
|
|
|
+ if (index !== undefined) {
|
|
|
+ const data = [...this[type]]
|
|
|
+ data[index][key] = value
|
|
|
+ this[type] = [...data]
|
|
|
+ } else {
|
|
|
+ this[type] = { ...this[type], ...{ [key]: value }}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async deleteHandle() {
|
|
|
+ const { id } = this.form_data
|
|
|
+ const res = await deleteProblem({ id })
|
|
|
+ if (res.code === 200) {
|
|
|
+ this.$message({
|
|
|
+ message: '删除成功',
|
|
|
+ type: 'success'
|
|
|
+ })
|
|
|
+ this.$router.push({ name: '线上问题 ' })
|
|
|
+ } else {
|
|
|
+ this.$message({
|
|
|
+ message: '删除失败',
|
|
|
+ type: 'error'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 获取评价列表
|
|
|
+ async getCommentList() {
|
|
|
+ const res = await getCommentList({ type: 5, joinId: this.taskId })
|
|
|
+ if (res.code === 200) {
|
|
|
+ this.commentlist = res.data
|
|
|
+ }
|
|
|
},
|
|
|
- changeReplay() {
|
|
|
|
|
|
+ // 获取变更记录
|
|
|
+ async getRecordList() {
|
|
|
+ const res = await getRecordList({ checkListId: this.checkListId })
|
|
|
+ if (res.code === 200) {
|
|
|
+ this.changeRecordList = res.data
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 添加评论
|
|
|
+ async createCommentHandle(content, callback) {
|
|
|
+ const commentInfo = {
|
|
|
+ joinId: this.form_data.id,
|
|
|
+ content,
|
|
|
+ type: 5,
|
|
|
+ fatherId: 0,
|
|
|
+ name: this.userNames,
|
|
|
+ email: this.userInformation
|
|
|
+ }
|
|
|
+ const user = { name: this.userNames, ename: this.userInformation, id: '' }
|
|
|
+ const res = await createComment({ commentInfo, user })
|
|
|
+ if (res.code === 200) {
|
|
|
+ this.$message({ message: '评论成功', type: 'success', duration: 1000, offset: 150 })
|
|
|
+ this.getCommentList()
|
|
|
+ callback()
|
|
|
+ } else {
|
|
|
+ this.$message.warning(res.msg)
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
-<style scoped lang="scss">
|
|
|
-.op-detial {
|
|
|
+<style lang="scss">
|
|
|
+.wb-op-detial {
|
|
|
padding: 0 10px 10px 10px;
|
|
|
.content {
|
|
|
background-color: #fff;
|
|
@@ -72,13 +280,27 @@ export default {
|
|
|
overflow: hidden;
|
|
|
margin-bottom: 10px;
|
|
|
padding: 16px 20px;
|
|
|
+ .makeBetter {
|
|
|
+ width: calc(100% - 190px);
|
|
|
+ padding: 12px 0px 20px 0px
|
|
|
+ }
|
|
|
}
|
|
|
.headerH1 {
|
|
|
- color: #444;
|
|
|
- font-size: 22px;
|
|
|
- font-weight: 600;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
+ .title {
|
|
|
+ color: #444;
|
|
|
+ font-size: 22px;
|
|
|
+ font-weight: 600;
|
|
|
+ margin-left: -15px;
|
|
|
+ cursor: pointer;
|
|
|
+ .el-input__inner {
|
|
|
+ border-color: transparent;
|
|
|
+ &:hover {
|
|
|
+ border-color: #DCDFE6;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
.icon {
|
|
|
font-size: 20px;
|
|
|
color: #6f7c93;
|