案件日志页面开发

src/views/caseManagement/caseList.vue

@@ -5,7 +5,7 @@
       ref="queryForm"
       size="small"
       :inline="true"
-      label-width="68px"
+      label-width="98px"
     >
       <el-form-item label="案件编号" prop="caseNum">
         <el-input
@@ -15,6 +15,14 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
+      <el-form-item label="申请人(机构)" prop="applicantName">
+        <el-input
+          v-model="queryParams.applicantName"
+          placeholder="请输入机构名称"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
       <el-form-item label="案件状态" prop="caseStatus">
         <el-select
           v-model="queryParams.caseStatus"
@@ -89,12 +97,12 @@
         prop="caseNum"
         :show-overflow-tooltip="true"
       />
-      <!-- <el-table-column
+      <el-table-column
-        label="申请人"
+        label="申请人(机构)"
         align="center"
         prop="caseAffiliates[0].name"
         :show-overflow-tooltip="true"
-      /> -->
+      />
       <el-table-column
         label="案件标的"
         align="center"
@@ -134,6 +142,15 @@
             v-hasPermi="['monitor:online:forceLogout']"
             >详情</el-button
           >
+          <!-- 案件日志 -->
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-zoom-in"
+            @click="caselogRow(scope.row)"
+            v-hasPermi="['monitor:online:forceLogout']"
+            >案件日志</el-button
+          >
           <el-button
             size="mini"
             type="text"
@@ -341,6 +358,12 @@
       @getcaseApply="getcaseApply"
       @paycancelRow="paycancelRow"
     ></payDialog>
+    <!-- 案件日志 -->
+    <caselogDialog
+    :showcaseLog="showcaseLog"
+    @cancelcaseLog="cancelcaseLog"
+    :flagLoading="flagLoading"
+    ></caselogDialog>
   </div>
 </template>
 
@@ -354,6 +377,7 @@ import adjudicaterecordDialog from "./components/adjudicaterecordDialog.vue";
 import trialincourtDialog from "./components/trialincourtDialog.vue";
 import payDialog from "./components/payDialog.vue";
 import filingreviewDialog from "./components/filingreviewDialog.vue";
+import caselogDialog from './components/caselogDialog.vue';
 
 import { caseApplicationDetail } from "@/api/pay/pay";
 import {
@@ -377,6 +401,7 @@ export default {
     trialincourtDialog,
     payDialog,
     filingreviewDialog,
+    caselogDialog
   },
   data() {
     return {
@@ -393,6 +418,7 @@ export default {
         caseStatusList: [0, 1, 2, 5, 6, 7, 8, 9, 10, 16],
         hearDate: "",
         caseStatus: null,
+        applicantName: "",
         pageNum: 1,
         pageSize: 10,
       },
@@ -420,6 +446,8 @@ export default {
       payTitle: "",
       payForm: {},
       caseAttachList: [], //案件质证资料
+      showcaseLog: false, //案件日志弹框显示
+      flagLoading: false, //案件日志弹框loading
     };
   },
   created() {
@@ -509,6 +537,14 @@ export default {
       this.dialogtitle = "立案详情";
       this.getInfo(row);
     },
+    // 案件日志
+    caselogRow(row) {
+      this.showcaseLog = true;
+    },
+    // 关闭案件日志
+    cancelcaseLog() {
+      this.showcaseLog = false;
+    },
     // 修改
     editRow(row) {
       this.flag = "1";

src/views/caseManagement/components/caseentryDialog.vue

@@ -24,7 +24,7 @@
         <el-divider></el-divider>
         <el-row>
           <el-col :span="12">
-            <el-form-item label="案件编号：" prop="caseNum">
+            <el-form-item label="案件编号：" prop="caseNum" v-if="flag !== '2'">
               <el-input
                 v-model="formData.caseNum"
                 placeholder="请输入案件编号"
@@ -216,7 +216,7 @@
           <el-row>
             <el-col :span="12">
               <el-form-item
-                label="申请人姓名"
+                label="申请人(机构)："
                 :prop="'paymentArr.' + index + '.name'"
                 :rules="[
                   {
@@ -231,21 +231,8 @@
             </el-col>
             <el-col :span="12">
               <el-form-item
-                label="身份证号："
+                label="代码："
                 :prop="'paymentArr.' + index + '.identityNum'"
-                :rules="[
-                  {
-                    required: true,
-                    message: '身份证号不能为空',
-                    trigger: 'blur',
-                  },
-                  {
-                    pattern:
-                      /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
-                    message: '请输入正确的身份证号码',
-                    trigger: 'blur',
-                  },
-                ]"
               >
                 <el-input v-model="item.identityNum" placeholder="请输入" />
               </el-form-item>
@@ -318,7 +305,7 @@
           </el-row>
           <div style="display:inline-flex">
               <div class="infoIcon"></div>
-              <div class="caseInfo">代理人信息：</div>
+              <div class="caseInfo2">代理人信息：</div>
           </div>
           <!-- <p>代理人信息：</p> -->
           <el-row>
@@ -542,7 +529,7 @@
           </el-row>
           <div style="display:inline-flex">
               <div class="infoIcon"></div>
-              <div class="caseInfo">代理人信息：</div>
+              <div class="caseInfo2">代理人信息：</div>
           </div>
           <!-- <p>代理人信息：</p> -->
           <el-row>
@@ -815,7 +802,7 @@ export default {
           if (this.flag == "1" || this.flag == "0") {
             this.form2.paymentArr = this.initpaymentArr;
             this.form3.paymentArr1 = this.initpaymentArr1;
-            console.log(this.caseAttachList, "caseAttachList");
+            console.log(this.caseAttachList,this.flag, "caseAttachList--flag");
             this.caseAttachList.forEach((item) => {
               console.log(item, "iytem");
               if (item.annexType == 2) {
@@ -1064,6 +1051,10 @@ export default {
   font-size: 17px;
   font-weight: 600;
 }
+.caseInfo2 {
+  font-size: 15px;
+  font-weight: 550;
+}
 .infoIcon {
   width: 4px;
   // height: 17px;

src/views/caseManagement/components/caselogDialog.vue

@@ -0,0 +1,133 @@
+<template>
+  <div>
+    <el-dialog
+      title="案件日志"
+      :visible="showcaseLog"
+      @close="cancel"
+      center
+      :distroy-on-close="true"
+    >
+      <div class="loading" v-if="flagLoading">
+        <i class="el-icon-loading"></i>
+      </div>
+      <div v-else>
+        <el-timeline>
+          <el-timeline-item
+            v-for="(activity, index) in activities"
+            :key="index"
+            :timestamp="activity.timestamp"
+            placement="top"
+          >
+            <el-card>
+              <h4>{{ activity.doOperate }}</h4>
+              <p>{{ activity.content }}</p>
+            </el-card>
+          </el-timeline-item>
+          <!-- <el-timeline-item timestamp="2018/4/3" placement="top">
+            <el-card>
+              <h4>更新 Github 模板</h4>
+              <p>王小虎 提交于 2018/4/3 20:46</p>
+            </el-card>
+          </el-timeline-item>
+          <el-timeline-item timestamp="2018/4/2" placement="top">
+            <el-card>
+              <h4>更新 Github 模板</h4>
+              <p>王小虎 提交于 2018/4/2 20:46</p>
+            </el-card>
+          </el-timeline-item> -->
+        </el-timeline>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="cancel" class="endbutton1"
+          ><span>取 消</span></el-button
+        >
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["showcaseLog", "flagLoading"],
+  data() {
+    return {
+      // key: value
+      reverse: true,
+      activities: [
+        {
+          content: "韩超勃 申请于 2023/10/3 20:46",
+          timestamp: "申请",
+          doOperate: "申请立案"
+        },
+        {
+          content: "韩超勃 提交于 2023/10/4 20:46",
+          timestamp: "提交",
+          doOperate: "提交立案"
+        },
+        {
+          content: "氢气球 立案审查 2023/10/3 20:46",
+          timestamp: "立案审查",
+          doOperate: "立案审查"
+        },
+        {
+          content: "风格的 提交于 2023/10/3 20:46",
+          timestamp: "提交",
+          doOperate: "提交立案"
+        },
+        {
+          content: "乖乖 提交于 2023/10/3 20:46",
+          timestamp: "提交",
+          doOperate: "提交立案"
+        },
+        {
+          content: "烤羊腿 提交于 2023/10/3 20:46",
+          timestamp: "提交",
+          doOperate: "提交立案"
+        },
+      ],
+    };
+  },
+  methods: {
+    cancel() {
+      this.$emit("cancelcaseLog");
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+::v-deep .el-dialog__body {
+  height: 700px !important;
+  overflow: auto !important;
+}
+::v-deep .el-dialog {
+  width: 800px;
+  background: #ffffff;
+  border-radius: 20px;
+}
+.endbutton1 {
+  width: 154px;
+  height: 37px;
+  background: #ffffff;
+  border: 1px solid #d0d0d0;
+  border-radius: 19px;
+  span {
+    width: 31px;
+    height: 13px;
+    font-size: 16px;
+    font-family: Microsoft YaHei;
+    font-weight: 400;
+    color: #959595;
+  }
+}
+.loading {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  .el-icon-loading {
+    font-size: 50px;
+  }
+}
+</style>