|
|
@@ -1,7 +1,7 @@
|
|
|
<template>
|
|
|
<div class="detail">
|
|
|
- <el-row :gutter="30">
|
|
|
- <el-col :span="25">
|
|
|
+ <div class="side-layout">
|
|
|
+ <div class="info">
|
|
|
<div class="title">
|
|
|
<p>工单</p>
|
|
|
<h3>
|
|
|
@@ -51,7 +51,7 @@
|
|
|
</el-descriptions-item>
|
|
|
</el-descriptions>
|
|
|
<div v-if="dingFormTableData.length">
|
|
|
- <h3 style="margin-top: 10px">{{ dingFormTableName }}</h3>
|
|
|
+ <h3 style="margin-top: 10px; margin-bottom: 10px">{{ dingFormTableName }}</h3>
|
|
|
<el-table border :data="dingFormTableData">
|
|
|
<el-table-column
|
|
|
v-for="(col, index) in dingFormTableHeader"
|
|
|
@@ -62,25 +62,74 @@
|
|
|
show-overflow-tooltip />
|
|
|
</el-table>
|
|
|
</div>
|
|
|
+ <div v-if="detail.finishRemark">
|
|
|
+ <h3 style="margin-top: 10px; margin-bottom: 10px">完成信息</h3>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="24" style="margin-bottom: 10px">
|
|
|
+ <div>{{ detail.finishByName }}于 {{ detail.finishTime }} 完成</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24">
|
|
|
+ <div>
|
|
|
+ {{ detail.finishRemark }}
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
</el-tab-pane>
|
|
|
- <el-tab-pane label="反馈记录" name="feedback">
|
|
|
+ <!-- <el-tab-pane label="反馈记录" name="feedback">
|
|
|
<detail-feedback ref="feedback" :work-order-id="id" />
|
|
|
- </el-tab-pane>
|
|
|
+ </el-tab-pane> -->
|
|
|
</el-tabs>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
+ </div>
|
|
|
+ <div class="info-side">
|
|
|
+ <ul class="records">
|
|
|
+ <li v-for="(value, key) in records" :key="key">
|
|
|
+ <div class="date">
|
|
|
+ <h2>{{ key.split('-')[2] }}</h2>
|
|
|
+ <h3>{{ key.split('-').splice(0, 2).join('.') }}</h3>
|
|
|
+ </div>
|
|
|
+ <ul class="content">
|
|
|
+ <li v-for="(item, index) in records[key]" :key="index">
|
|
|
+ <!-- <el-avatar class="user-avatar"
|
|
|
+ :src="avatar" /> -->
|
|
|
+ <vab-icon class="user-avatar" icon="account-circle-fill" />
|
|
|
+ <div class="text">
|
|
|
+ <p class="action">{{ item.opnPeople }} {{ item.opnType }}</p>
|
|
|
+ <div class="feedback-content">{{ JSON.parse(item.opnContent).content }}</div>
|
|
|
+ <p>{{ item.opnDate }}</p>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <el-input
|
|
|
+ v-model="feedBackContent"
|
|
|
+ maxlength="30"
|
|
|
+ placeholder="请输入反馈内容"
|
|
|
+ show-word-limit
|
|
|
+ style="margin-bottom: 7px"
|
|
|
+ type="textarea" />
|
|
|
+ <el-row>
|
|
|
+ <el-col style="text-align: right">
|
|
|
+ <el-button type="primary" @click="handleSubFeedBack">提交反馈</el-button>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+ import to from 'await-to-js'
|
|
|
import api from '@/api/work/index'
|
|
|
- import DetailFeedback from './components/DetailFeedback'
|
|
|
+ // import DetailFeedback from './components/DetailFeedback'
|
|
|
|
|
|
export default {
|
|
|
name: 'WorkOrderDetail',
|
|
|
- components: { DetailFeedback },
|
|
|
+ // components: { DetailFeedback },
|
|
|
data() {
|
|
|
return {
|
|
|
+ feedBackContent: '',
|
|
|
id: undefined,
|
|
|
activeName: 'detail',
|
|
|
detail: {},
|
|
|
@@ -89,13 +138,45 @@
|
|
|
dingFormTableHeader: [],
|
|
|
dingFormTableData: [],
|
|
|
orderStatusOptions: [],
|
|
|
+ records: [],
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
this.id = parseInt(this.$route.query.id)
|
|
|
this.getOptions()
|
|
|
+ this.getDynamics()
|
|
|
},
|
|
|
methods: {
|
|
|
+ async getDynamics() {
|
|
|
+ const [err, res] = await to(api.dynamicsList({ orderId: this.id }))
|
|
|
+ if (err) return
|
|
|
+ if (res.data.list) {
|
|
|
+ let obj = res.data.list
|
|
|
+ const keys = Object.keys(obj).reverse()
|
|
|
+ let records = {}
|
|
|
+ for (const item of keys) {
|
|
|
+ records[item] = obj[item]
|
|
|
+ }
|
|
|
+ this.records = records
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async handleSubFeedBack() {
|
|
|
+ let params = {
|
|
|
+ content: this.feedBackContent,
|
|
|
+ orderId: this.id,
|
|
|
+ }
|
|
|
+ const [err, res] = await to(api.addDynamics({ ...params }))
|
|
|
+ if (err) return
|
|
|
+ console.log(res)
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.feedBackContent = ''
|
|
|
+ this.$message({
|
|
|
+ type: 'success',
|
|
|
+ message: '提交成功!',
|
|
|
+ })
|
|
|
+ this.getDynamics()
|
|
|
+ }
|
|
|
+ },
|
|
|
getOptions() {
|
|
|
Promise.all([api.getDetail({ id: this.id }), this.getDicts('work_order_status')])
|
|
|
.then(([detail, workOrderStatus]) => {
|
|
|
@@ -131,7 +212,7 @@
|
|
|
},
|
|
|
async handleClick(tab) {
|
|
|
if (tab.name === 'feedback') {
|
|
|
- await this.$refs.feedback.fetchData()
|
|
|
+ // await this.$refs.feedback.fetchData()
|
|
|
} else if (tab.name === 'worksheet') {
|
|
|
return
|
|
|
} else {
|
|
|
@@ -227,5 +308,82 @@
|
|
|
padding-top: 28px;
|
|
|
text-align: right;
|
|
|
}
|
|
|
+ .records {
|
|
|
+ margin: 0;
|
|
|
+ padding: 10px 20px;
|
|
|
+ list-style: none;
|
|
|
+ height: calc(100% - 90px);
|
|
|
+ overflow-y: auto;
|
|
|
+
|
|
|
+ > li {
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ & + li {
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .date {
|
|
|
+ width: 100px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ h2,
|
|
|
+ h3 {
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ h2 {
|
|
|
+ font-size: 26px;
|
|
|
+ line-height: 32px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .content {
|
|
|
+ flex: 1;
|
|
|
+ list-style: none;
|
|
|
+
|
|
|
+ li {
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ & + li {
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .user-avatar {
|
|
|
+ font-size: 40px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text {
|
|
|
+ flex: 1;
|
|
|
+ padding-left: 20px;
|
|
|
+
|
|
|
+ p {
|
|
|
+ font-weight: 500;
|
|
|
+ margin: 0;
|
|
|
+ line-height: 20px;
|
|
|
+
|
|
|
+ span {
|
|
|
+ color: #1d66dc;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ p:nth-child(2) {
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .action {
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .feedback-content {
|
|
|
+ margin: 10px 0;
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
liuzl