fix: 添加详情

src/views/taskManage/index.vue

@@ -181,66 +181,167 @@
       :visible.sync="detailVisible"
       :visible.sync="detailVisible"
       width="900px"
       width="900px"
     >
     >
-      <div class="detail_list">
-        <!-- <div class="item_wrap">
-          <p class="item" style="width: 100%">
-            <span class="label">工单标题</span>
-            <span class="value" style="width: 732px">{{
-              detail.taskTitle
-            }}</span>
-          </p>
-          <p class="item">
-            <span class="label">工单编码</span>
-            <span class="value">{{
-              detail.taskNumber
-            }}</span>
-          </p>
-          <p class="item">
-            <span class="label">工单类型</span>
-            <span class="value">
-              {{ detail.taskType && detail.taskType.desc }}
-            </span>
-          </p>
-
-          <p class="item">
-            <span class="label">工单状态</span>
-            <span class="value">
-              {{
-                detail.taskStatus && detail.taskStatus.desc
-              }}
-            </span>
-          </p>
-        </div> -->
+      <div class="step-bar">
+        <!-- step-pass 已经完成,step-active当前步骤 -->
         <div
         <div
-          style="padding: 5px; overflow: auto"
-          v-html="detail.taskContent"
-          @click="fullScreenDisplay"
-        ></div>
-        <div style="margin-top: 10px">
-          <div>
-            <el-input
-              type="textarea"
-              :rows="5"
-              maxlength="1000"
-              placeholder="请输入内容"
-              v-model="textarea"
-            >
-            </el-input>
+          class="step step-after step-pass"
+          :class="{
+            'step-pass':
+              detail.orderStatus === 'TO_BE_ASSIGN' ||
+              detail.orderStatus === 'TO_BE_CONFIRMED' ||
+              detail.orderStatus === 'IN_PROGRESS' ||
+              detail.orderStatus === 'CLOSED' ||
+              detail.orderStatus === 'ARCHIVE',
+            'step-active':
+              detail.orderStatus === 'PRE_HANDLING',
+          }"
+        >
+          <span>已受理</span>
+        </div>
+        <div
+          class="step step-after step-before"
+          :class="{
+            'step-pass':
+              detail.orderStatus === 'CLOSED' ||
+              detail.orderStatus === 'ARCHIVE',
+            'step-active':
+              detail.orderStatus === 'IN_PROGRESS' ||
+              detail.orderStatus === 'TO_BE_ASSIGN' ||
+              detail.orderStatus === 'TO_BE_CONFIRMED',
+          }"
+        >
+          <span>处理中</span>
+        </div>
+        <div
+          class="step step-after step-before"
+          :class="{
+            'step-pass': detail.orderStatus === 'ARCHIVE',
+            'step-active': detail.orderStatus === 'CLOSED',
+          }"
+        >
+          <span>已关闭</span>
+        </div>
+        <div
+          class="step step-before"
+          :class="{
+            'step-pass': detail.orderStatus === 'ARCHIVE',
+            'step-active': detail.orderStatus === 'ARCHIVE',
+          }"
+        >
+          <span>已归档</span>
+        </div>
+      </div>
+      <div class="content">
+        <div class="detail_list">
+          <div class="item_wrap">
+            <p class="item" style="width: 100%">
+              <span class="label">工单标题</span>
+              <span class="value" style="width: 732px">{{
+                detail.title
+              }}</span>
+            </p>
+            <p class="item">
+              <span class="label">工单编码</span>
+              <span class="value">{{
+                detail.orderNo
+              }}</span>
+            </p>
+            <p class="item">
+              <span class="label">工单类型</span>
+              <span class="value">
+                {{ detail.orderTypeTxt }}
+              </span>
+            </p>
+
+            <p class="item">
+              <span class="label">工单状态</span>
+              <span class="value">
+                {{ detail.orderStatusTxt }}
+              </span>
+            </p>
           </div>
           </div>
-          <div style="margin-top: 10px; text-align: right">
-            <!-- <el-button size="mini" type="success"
+          <div
+            style="padding: 5px; overflow: auto"
+            v-html="detail.taskContent"
+            @click="fullScreenDisplay"
+          ></div>
+        </div>
+        <div class="record">
+          <div class="title">沟通记录</div>
+          <ul class="chat_content">
+            <li
+              v-for="(item, index) in chatRecord"
+              :key="index"
+              class="chat_item"
+              :class="{ chat_right: item.type === 1 }"
+            >
+              <div class="chat_warp" v-if="item.type === 1">
+                <div class="chat_user">
+                  <div class="chat_user_time">
+                    {{
+                      item.createTime
+                    }}&nbsp;&nbsp;&nbsp;&nbsp;{{ item.sendUserName }}
+                  </div>
+                  <div class="chat_text">
+                    {{ item.msg }}
+                  </div>
+                </div>
+                <div class="chat_icon">
+                  <img
+                    width="100%"
+                    src="http://img.alicdn.com/tfs/TB14feR0AL0gK0jSZFAXXcA9pXa-64-64.png"
+                    alt=""
+                  />
+                </div>
+              </div>
+              <div v-else class="chat_warp">
+                <div class="chat_icon">
+                  <img
+                    width="100%"
+                    src="http://img.alicdn.com/tfs/TB14feR0AL0gK0jSZFAXXcA9pXa-64-64.png"
+                    alt=""
+                  />
+                </div>
+                <div class="chat_user">
+                  <div class="chat_user_time">
+                    客服:&nbsp;&nbsp;&nbsp;&nbsp;{{
+                      item.createTime
+                    }}
+                  </div>
+
+                  <div class="chat_text">
+                    {{ item.msg }}
+                  </div>
+                </div>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </div>
+
+      <div style="margin-top: 10px">
+        <div>
+          <el-input
+            type="textarea"
+            :rows="5"
+            maxlength="1000"
+            placeholder="请输入内容"
+            v-model="textarea"
+          >
+          </el-input>
+        </div>
+        <div style="margin-top: 10px; text-align: right">
+          <!-- <el-button size="mini" type="success"
               >确认执行</el-button
               >确认执行</el-button
             > -->
             > -->
-            <el-button
-              size="mini"
-              type="primary"
-              @click="reply"
-              >回复</el-button
-            >
-          </div>
+          <el-button
+            size="mini"
+            type="primary"
+            @click="reply"
+            >回复</el-button
+          >
         </div>
         </div>
       </div>
       </div>
-      <span slot="footer"></span>
     </el-dialog>
     </el-dialog>
 
 
     <!-- 指派 -->
     <!-- 指派 -->
@@ -342,6 +443,7 @@ export default {
       },
       },
       userList: [],
       userList: [],
       orderTypes: [],
       orderTypes: [],
+      chatRecord: [],
     }
     }
   },
   },
   mounted() {
   mounted() {
@@ -379,19 +481,8 @@ export default {
           width: 80,
           width: 80,
         },
         },
         {
         {
-          label: '执行人',
-          key: 'taskCompleteUserName',
-          width: 80,
-        },
-        {
-          label: '验收人',
-          key: 'taskAcceptanceUserName',
-          width: 80,
-        },
-        { label: '抄送人', key: 'ccName', width: 80 },
-        {
           label: '创建人',
           label: '创建人',
-          key: 'taskCreatorName',
+          key: 'fromBusiness',
           width: 80,
           width: 80,
         },
         },
 
 
@@ -413,7 +504,8 @@ export default {
           align: 'center',
           align: 'center',
           render: (item) => (
           render: (item) => (
             <span>
             <span>
-              {(item.orderStatus === 'PRE_HANDLING' || item.orderStatus === 'IN_PROGRESS') && (
+              {(item.orderStatus === 'PRE_HANDLING' ||
+                item.orderStatus === 'IN_PROGRESS') && (
                 <span
                 <span
                   title="详情"
                   title="详情"
                   class="icon-view icon-tools-view"
                   class="icon-view icon-tools-view"
@@ -422,8 +514,8 @@ export default {
                     class="el-icon-tickets"
                     class="el-icon-tickets"
                     onClick={() => this.showDetail(item)}
                     onClick={() => this.showDetail(item)}
                   ></i>
                   ></i>
-                </span>)
-              }
+                </span>
+              )}
               {/* {
               {/* {
                 <span
                 <span
                   title="评价"
                   title="评价"
@@ -580,6 +672,7 @@ export default {
           pageSize,
           pageSize,
           currentPage,
           currentPage,
           orderStatus: this.statusCode,
           orderStatus: this.statusCode,
+          ...this.searchForm,
         })
         })
         .then((res) => {
         .then((res) => {
           this.sourceData = res.data.records
           this.sourceData = res.data.records
@@ -626,14 +719,21 @@ export default {
           this.textarea,
           this.textarea,
         )
         )
         if (res.code === 200) {
         if (res.code === 200) {
-          this.detailVisible = false
+          this.showDetail(this.detail)
         }
         }
       } catch (e) {
       } catch (e) {
         console.error(e)
         console.error(e)
       }
       }
     },
     },
-    showDetail(item) {
+    async showDetail(item) {
       this.currentRowId = item.id
       this.currentRowId = item.id
+      this.detail = item
+      axios.get(
+        `platform/platformWorkOrderChat/getByWorkOrder?workOrderId=${item.id}`).then((res) => {
+        if (res.code === 200) {
+          this.chatRecord = res.data
+        }
+      })
       this.detailVisible = true
       this.detailVisible = true
       this.textarea = ''
       this.textarea = ''
     },
     },
@@ -697,13 +797,13 @@ export default {
 .search_form >>> .el-form-item {
 .search_form >>> .el-form-item {
   margin-bottom: 5px;
   margin-bottom: 5px;
 }
 }
-.detail_list {
+.content {
   max-height: 68vh;
   max-height: 68vh;
   overflow: auto;
   overflow: auto;
 }
 }
-.item_wrap {
-  background: #efefef;
+.detail_list {
   padding-top: 10px;
   padding-top: 10px;
+  background-color: #efefef;
 }
 }
 .detail_list .item {
 .detail_list .item {
   display: inline-block;
   display: inline-block;
@@ -721,6 +821,20 @@ export default {
 .detail_list .item .value {
 .detail_list .item .value {
   color: #222;
   color: #222;
 }
 }
+.item_wrap {
+  background: #efefef;
+  padding-top: 10px;
+}
+.detail_list .item .label {
+  display: inline-block;
+  color: #999;
+  width: 100px;
+  text-align: right;
+  margin-right: 5px;
+}
+.detail_list .item .value {
+  color: #222;
+}
 .form_item >>> .el-radio {
 .form_item >>> .el-radio {
   margin-right: 13px;
   margin-right: 13px;
 }
 }
@@ -746,4 +860,109 @@ export default {
   overflow: hidden;
   overflow: hidden;
   width: 100%;
   width: 100%;
 }
 }
+
+.step-bar {
+  margin-bottom: 10px;
+}
+.step {
+  position: relative;
+  width: 25%;
+  font-size: 14px;
+  height: 32px;
+  line-height: 32px;
+  color: #fff;
+  background-color: #cacaca;
+  z-index: 1;
+  text-align: center;
+}
+
+.step,
+.step span {
+  display: inline-block;
+}
+
+.step span {
+  width: 90%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.step-before:before {
+  left: -16px;
+  z-index: 8;
+  border-top: 16px solid #cacaca;
+  border-left: 16px solid transparent !important;
+  border-bottom: 16px solid #cacaca;
+}
+.step-after:after {
+  width: 22px;
+  height: 32px;
+  right: 0;
+  z-index: 9;
+  border-top: 16px solid transparent !important;
+  border-left: 16px solid #cacaca;
+  border-bottom: 16px solid transparent !important;
+  background-color: #fff;
+}
+.step-after:after,
+.step-before:before {
+  content: '';
+  display: block;
+  position: absolute;
+  top: 0;
+  box-sizing: border-box;
+}
+.step-active {
+  background-color: #ff6a00;
+}
+.step-active:after,
+.step-active:before {
+  border-color: #ff6a00;
+}
+.step-pass {
+  background-color: rgba(255, 106, 0, 0.5);
+}
+.step-pass:after,
+.step-pass:before {
+  border-color: rgba(255, 106, 0, 0.5);
+}
+
+.record {
+  border: 1px solid #efefef;
+  margin-top: 10px;
+}
+.record .title {
+  height: 40px;
+  line-height: 40px;
+  font-size: 16px;
+  padding-left: 10px;
+  background: #efefef;
+  border-left: 2px solid #ff6a00;
+}
+.chat_content {
+  padding: 10px;
+}
+
+.chat_item {
+  margin-bottom: 10px;
+}
+.chat_item.chat_right {
+  text-align: right;
+}
+.chat_warp {
+  display: flex;
+}
+.chat_right .chat_warp {
+  justify-content: end;
+}
+.chat_icon {
+  width: 30px;
+  height: 30px;
+  background: #efefef;
+  border-radius: 50%;
+  margin-top: 5px;
+  margin-right: 5px;
+  margin-left: 5px;
+}
 </style>
 </style>