首页 处理工单

src/views/wel/index.vue

@@ -129,23 +129,60 @@
 
   </div>
       <el-dialog
-        title=""
+        title="工单详情"
         :visible.sync="imgVisible"
-        append-to-body
-        width="80%">
-        <div class="mg-b-20">{{curNew.projectName}}——{{curNew.contractName}}</div>
-        <div class="mg-b-20">问题描述：{{curNew.opinionContent}}</div>
-        <div class="mg-b-20">
-          <span class="mg-r-20">反馈人员：{{curNew.submitUserName}}</span>
-          <span class="mg-r-20">电话：{{curNew.submitPhone}}</span>
-          <span class="mg-r-20">岗位：{{curNew.submitUserRole}}</span>
-        </div>
-        <div class="mg-b-20">反馈时间：{{curNew.manageTime}}</div>
-        <el-carousel trigger="click" height="500px" :autoplay="false" style="text-align:center;">
-          <el-carousel-item v-for="item in curNew.fileUrl" :key="item">
-            <el-image :src="item" fit="scale-down" style="height:500px;" :preview-src-list="curNew.fileUrl"></el-image>
-          </el-carousel-item>
-        </el-carousel>
+        append-to-body class="my-dialog"
+        width="720">
+        <el-divider></el-divider>
+        <table border="1" style="border-spacing: 0;border-collapse: collapse;border-color: #ddd;width: 100%;">
+          <tbody>
+            <tr>
+              <td class="new-titile">合同名称</td>
+              <td class="new-content">{{curNew.projectName}}——{{curNew.contractName}}</td>
+            </tr>
+            <tr>
+              <td class="new-titile">问题描述</td>
+              <td class="new-content" style="color:#EB4D3D">{{curNew.opinionContent}}</td>
+            </tr>
+            <tr>
+              <td class="new-titile">反馈人员</td>
+              <td class="new-content">{{curNew.submitUserName}}</td>
+            </tr>
+            <tr>
+              <td class="new-titile">电话</td>
+              <td class="new-content">{{curNew.submitPhone}}</td>
+            </tr>
+            <tr>
+              <td class="new-titile">岗位</td>
+              <td class="new-content">{{curNew.submitUserRole}}</td>
+            </tr>
+            <tr>
+              <td class="new-titile">反馈时间</td>
+              <td class="new-content">{{curNew.manageTime}}</td>
+            </tr>
+            <tr>
+              <td class="new-titile">图片补充</td>
+              <td class="new-content">
+                <div v-if="curNew.fileUrl && curNew.fileUrl.length" class="flex">
+                  <div v-for="item in curNew.fileUrl" :key="item">
+                    <div style="width: 100px; height: 100px;border-radius: 4px;
+                    position: absolute;background-color: rgba(0,0,0,0.3);z-index:99;pointer-events: none;">
+                      <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAQhJREFUOE+lkzFOAzEURN8cASkSoUqOETroOAI3oEgBHekiOuiggxtwBDrSwS2AiiBRcIOJHNmrv85KVsRWu9/2+/4zs+Kfj+rztl+Bk6r+Lul4qFcHsD0BPoGFpLu42fYlcA9MJX3FtQgwcCRpPdTJ9hj4ltS79fbD9hvwLOmhHLZ9mN4l/YTaNXAm6bTUCsA12fYyA26qcXp7dwC2R8A8CLkCHstNbDcBadaLCvBUtGkCwrx7jZC8f4n2ZdWTiJ0r2c7zmInaxnFUvRIvubIetDFbOQU+gKtoZ15L9t1mYK/JUJRTJmZVmFbJ+xImoIPsAFr/VoAcSPrbG5BHGkn63Qat1bG1vgHcfowRy9YlxwAAAABJRU5ErkJggg=="
+                      style="margin: 40px 0 0 40px;">
+                    </div>
+                    <el-image 
+                      style="width: 100px; height: 100px;border-radius: 4px;"
+                      :src="item" 
+                      :preview-src-list="curNew.fileUrl">
+                    </el-image>
+                  </div>
+                </div>
+                <span v-else>无</span>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+        <el-divider></el-divider>
         <span slot="footer" class="dialog-footer">
           <el-button @click="imgVisible = false">取 消</el-button>
           <el-button type="primary" @click="toDisposeView">处 理</el-button>
@@ -153,11 +190,13 @@
       </el-dialog>
 
       <el-dialog
+        title="处理工单"
         :visible.sync="dialogVisible"
-        width="600px"
+        width="600px" class="my-dialog"
         append-to-body
         :close-on-click-modal="false"
       >
+        <el-divider></el-divider>
         <div class="flex jc-al-c">
         <span class="mg-r-20 titl-font" style="font-size: 16px;margin-right:20px;width:180px;text-align:right;font-weight: 900;">提交进度</span>
           <el-select v-model="curRow.currentLink" placeholder="请选择" @change="operationMethods">
@@ -166,9 +205,11 @@
           </el-select>
         </div>
         <div style="margin-top:40px;" class="flex jc-al-c" v-show="operation.show">
-          <span style="font-size: 16px;margin-right:20px;width:180px;text-align:right;font-weight: 900;">*预计处理截止时间</span>
+          <span style="font-size: 16px;width:175px;text-align:right;font-weight: 900;">预计处理截止时间</span>
+          <span style="font-size: 16px;color:red;margin-right:20px;">*</span>
           <el-date-picker v-model="operation.manageTime" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="选择日期" :picker-options="setDateRange"/>
         </div>
+        <el-divider></el-divider>
         <span slot="footer" class="dialog-footer">
         <el-button @click="dialogVisible = false">取 消</el-button>
         <el-button type="primary" @click="submissionProgress">确 定</el-button>
@@ -619,4 +660,23 @@ export default {
   }
 }
 
+.my-dialog{
+  /deep/.el-dialog__body{
+    padding: 0 20px;
+  }
+}
+
+.new-titile{
+  text-align:center;
+  width:120px;
+  padding: 10px;
+  background-color: #F8F8F8;
+  color: #838791;
+}
+.new-content{
+  text-align:left;
+  padding: 10px;
+  color: #50545E;
+}
+
 </style>