处理记录样式调整

ruoyi-ui/src/views/szxc/taskManage/index.vue

@@ -65,14 +65,6 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="处理结果" prop="handleResult">
-        <el-input
-          v-model="queryParams.handleResult"
-          placeholder="请输入处理结果"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
 
       <el-form-item>
         <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
@@ -447,32 +439,50 @@
       />
     </el-dialog>
 
-    <el-dialog title="处理记录" :visible.sync="cljl.visible" width="1000px" append-to-body>
-      <el-table v-loading="cljl.loading" :data="cljl.list" border>
-        <el-table-column label="ID" align="center" prop="id" min-width="50" fixed/>
-        <el-table-column label="任务ID" align="center" prop="taskId" min-width="80" show-overflow-tooltip fixed/>
-        <el-table-column label="记录类型" align="center" prop="taskRecardType" min-width="100" show-overflow-tooltip>
-          <template slot-scope="scope">
-            <dict-tag :options="dict.type.szxc_task_recard_type" :value="scope.row.taskRecardType"/>
-          </template>
-        </el-table-column>
-        <el-table-column label="下发人" align="center" prop="xfName" min-width="120" show-overflow-tooltip/>
-        <el-table-column label="下发组织" align="center" prop="xfDept" min-width="120" show-overflow-tooltip/>
-        <el-table-column label="下发到人" align="center" prop="xfdName" min-width="120" show-overflow-tooltip/>
-        <el-table-column label="下发到组织" align="center" prop="xfdDept" min-width="120" show-overflow-tooltip/>
-        <el-table-column label="转派人" align="center" prop="zpName" min-width="120" show-overflow-tooltip/>
-        <el-table-column label="转派组织" align="center" prop="zpDept" min-width="120" show-overflow-tooltip/>
-        <el-table-column label="转派到人" align="center" prop="zpdName" min-width="120" show-overflow-tooltip/>
-        <el-table-column label="转派到组织" align="center" prop="zpdDept" min-width="120" show-overflow-tooltip/>
-        <el-table-column label="处理人" align="center" prop="clName" min-width="120" show-overflow-tooltip/>
-        <el-table-column label="处理组织" align="center" prop="clDept" min-width="120" show-overflow-tooltip/>
-        <el-table-column label="处理结果" align="center" prop="clResult" min-width="120" show-overflow-tooltip>
-          <template slot-scope="scope">
-            <dict-tag :options="dict.type.szxc_handle_result" :value="scope.row.clResult"/>
-          </template>
-        </el-table-column>
-        <el-table-column label="处理原因" align="center" prop="clReason" min-width="140" show-overflow-tooltip/>
-      </el-table>
+    <el-dialog title="处理记录" :visible.sync="cljl.visible" width="500px" append-to-body>
+
+      <div class="cljl">
+        <div class="list" v-for="item in cljl.list" :key="item.id">
+          <div class="item" v-if="item.taskRecardType==='0'">
+            <div class="type">
+              <el-tag type="info"><dict-tag :options="dict.type.szxc_task_recard_type" :value="item.taskRecardType"/></el-tag>
+              <p>{{item.createTime}}</p>
+            </div>
+            <div class="con">
+              <div>下发人：{{item.xfName}}</div>
+              <div>下发组织：{{item.xfDept}}</div>
+              <div>下发到人：{{item.xfdName}}</div>
+              <div>下发到组织：{{item.xfdDept}}</div>
+            </div>
+          </div>
+
+          <div class="item" v-if="item.taskRecardType==='1'">
+            <div class="type">
+              <el-tag type="info"><dict-tag :options="dict.type.szxc_task_recard_type" :value="item.taskRecardType"/></el-tag>
+              <p>{{item.createTime}}</p>
+            </div>
+            <div class="con">
+              <div>转派人：{{item.zpName}}</div>
+              <div>转派组织：{{item.zpDept}}</div>
+              <div>转派到人：{{item.zpdName}}</div>
+              <div>转派到组织：{{item.zpdDept}}</div>
+            </div>
+          </div>
+
+          <div class="item" v-if="item.taskRecardType==='2'">
+            <div class="type">
+              <el-tag type="info"><dict-tag :options="dict.type.szxc_task_recard_type" :value="item.taskRecardType"/></el-tag>
+              <p>{{item.createTime}}</p>
+            </div>
+            <div class="con">
+              <div>处理人：{{item.clName}}</div>
+              <div>处理组织：{{item.clDept}}</div>
+              <div style="display: flex">处理结果：<dict-tag :options="dict.type.szxc_handle_result" :value="item.clResult"/></div>
+              <div>处理原因：{{item.clReason}}</div>
+            </div>
+          </div>
+        </div>
+      </div>
     </el-dialog>
 
   </div>
@@ -932,3 +942,41 @@ export default {
   }
 };
 </script>
+
+<style lang="scss" scoped>
+  .cljl{
+    min-height: 200px;
+    padding: 0 20px;
+
+    .list{
+      .item{
+        padding: 15px 20px;
+        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+        margin-bottom: 20px;
+        border-radius: 20px;
+
+        .type{
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+
+          .el-tag--medium {
+            height: 30px;
+            line-height: 30px;
+          }
+
+          .el-tag{
+            font-size: 14px;
+          }
+        }
+
+        .con{
+          padding-left: 5px;
+          div{
+            margin-top: 5px;
+          }
+        }
+      }
+    }
+  }
+</style>