案件日志接口联调

src/views/caseFiling/archiveList.vue

@@ -104,8 +104,13 @@
       @pagination="getList(queryParams)"
     />
     <!-- 弹窗 -->
-    <!-- <paymentdetailsDialog :openDialog="openDialog" :detailform="detailform" :title="title" :flag="flag"
-            @cancelpaymentdetails="cancelpaymentdetails" @updataList="updataList"></paymentdetailsDialog> -->
+    <archiveDetailsDialog
+      v-if="showarchiveDetails"
+      :showarchiveDetails="showarchiveDetails"
+      :detailform="detailform"
+      @cancelpaymentdetails="cancelpaymentdetails"
+      @updataList="updataList"
+    ></archiveDetailsDialog>
   </div>
 </template>
   
@@ -114,12 +119,12 @@ import {
   caseApplicationList,
   caseApplicationDetail,
 } from "@/api/awardManagement/awardManagement";
-// import paymentdetailsDialog from "./components/paymentdetailsDialog.vue";
+import archiveDetailsDialog from "./components/archiveDetailsDialog.vue";
 
 export default {
   name: "archiveList",
   dicts: ["case_status"],
-  // components: { paymentdetailsDialog },
+  components: { archiveDetailsDialog },
   data() {
     return {
       queryParams: {
@@ -132,9 +137,6 @@ export default {
       total: 0,
       // 表格数据
       list: [],
-
-      // 弹出层标题
-      title: "",
       // 是否显示弹出层
       // 弹出层内容
       form: {},
@@ -142,8 +144,7 @@ export default {
       rules: {},
       dataList: [],
       detailform: {}, //详情数据
-      openDialog: false, //详情数据弹框
-      flag: null,
+      showarchiveDetails: false, //详情数据弹框
     };
   },
   created() {
@@ -175,12 +176,12 @@ export default {
     },
     // model框显示
     showDetail(row) {
-      this.getDetail({ id: row.id });
-      this.openDialog = true;
+      // this.getDetail({ id: row.id });
+      this.showarchiveDetails = true;
     },
     // 关闭弹窗
     cancelpaymentdetails() {
-      this.openDialog = false;
+      this.showarchiveDetails = false;
     },
     /** 查询详情 */
     getDetail(parms) {

src/views/caseFiling/components/archiveDetailsDialog.vue

@@ -0,0 +1,58 @@
+<template>
+  <div>
+    <el-dialog
+      title="归档详情"
+      :visible="showarchiveDetails"
+      @close="cancel"
+      :destroy-on-close="true"
+      center
+    >
+       <el-tabs v-model="activeName" @tab-click="handleClick">
+        <el-tab-pane label="案件信息" name="first">
+          <caseInfo></caseInfo>
+         </el-tab-pane>
+        <el-tab-pane label="案件日志" name="second">案件日志</el-tab-pane>
+        <el-tab-pane label="快递信息" name="third">快递信息</el-tab-pane>
+      </el-tabs> 
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import caseInfo from "./caseInfo.vue";
+export default {
+  props: ["showarchiveDetails"],
+  components: {
+    caseInfo,
+  },
+  data() {
+    return {
+      // key: value
+      activeName: "first",
+    };
+  },
+  methods: {
+    handleClick(tab, event) {
+      console.log(tab, event);
+    },
+    cancel() {
+      this.$emit("cancelpaymentdetails");
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+::v-deep .el-dialog {
+  width: 1000px;
+  background: #ffffff;
+  border-radius: 20px;
+}
+::v-deep .el-dialog__body {
+  height: 700px !important;
+  overflow: auto !important;
+}
+</style>

src/views/caseFiling/components/caseInfo.vue

@@ -0,0 +1,509 @@
+<template>
+  <div>
+    <!-- 案件信息 -->
+    <el-form ref="form" :model="formData" label-width="180px" disabled>
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="案件编号：" prop="caseNum">
+            <el-input v-model="formData.caseNum" placeholder="请输入案件编号" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="案件标的：" prop="caseSubjectAmount">
+            <el-input
+              v-model="formData.caseSubjectAmount"
+              placeholder="请输入案件标的"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="借款开始日期：" prop="loanStartDate">
+            <el-date-picker
+              v-model="formData.loanStartDate"
+              type="datetime"
+              placeholder="借款开始日期"
+            >
+            </el-date-picker>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="借款结束日期：" prop="loanEndDate">
+            <el-date-picker
+              v-model="formData.loanEndDate"
+              type="datetime"
+              placeholder="借款结束日期"
+            >
+            </el-date-picker>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="合同编号：" prop="contractNumber">
+            <el-input v-model="formData.contractNumber" placeholder="请输入" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="申请人主张欠本金：" prop="claimPrinciOwed">
+            <el-input v-model="formData.claimPrinciOwed" placeholder="请输入" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="申请人主张欠利息：" prop="claimInterestOwed">
+            <el-input
+              v-model="formData.claimInterestOwed"
+              placeholder="请输入"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="申请人主张违约金：" prop="claimLiquidDamag">
+            <el-input
+              v-model="formData.claimLiquidDamag"
+              placeholder="请输入"
+            />
+          </el-form-item>
+        </el-col>
+        <!-- 应缴费用 -->
+        <el-col :span="12">
+          <el-form-item label="应缴费用：" prop="feePayable">
+            <el-input v-model="formData.feePayable" placeholder="请输入" />
+          </el-form-item>
+        </el-col>
+        <!-- 申请人仲裁诉求 -->
+        <el-col :span="24">
+          <el-form-item label="申请人仲裁诉求" prop="arbitratClaims">
+            <el-input
+              v-model="formData.arbitratClaims"
+              placeholder="请输入申请人仲裁诉求"
+              type="textarea"
+              :autosize="{ minRows: 4, maxRows: 8 }"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="申请人案件证据资料：">
+            <div v-for="(item, index) in applicateArr" :key="index">
+              <a href="#" @click="toFile(item, index)" style="color: blue">
+                {{ item.annexName }}
+              </a>
+            </div>
+          </el-form-item>
+        </el-col>
+        <!-- 仅详情展示 案件质证环节以后显示被申请人证据-->
+        <el-col :span="24">
+          <el-form-item
+            label="被申请人案件证据资料："
+            prop="respondentEvidence"
+          >
+            <div v-for="(item, index) in quiltArr" :key="index">
+              <a href="#" @click="toFile1(item, index)" style="color: blue">
+                {{ item.annexName }}
+              </a>
+            </div>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <!-- 申请人主体信息 -->
+    <el-form ref="form2" :model="form2" label-width="150px">
+      <!-- <div v-for="(item, index) in form2.paymentArr" :key="index"> -->
+      <div>
+        <div style="display: flex; justify-content: space-between">
+          <div style="display: inline-flex">
+            <div class="infoIcon"></div>
+            <div class="caseInfo">申请人主体信息：</div>
+          </div>
+        </div>
+        <el-divider></el-divider>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item
+              label="申请人(机构)："
+              :rules="[
+                {
+                  required: true,
+                  message: '申请人不能为空',
+                  trigger: 'blur',
+                },
+              ]"
+            >
+              <!-- <el-input v-model="item.name" placeholder="请输入" /> -->
+              <el-input placeholder="请输入" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="代码：">
+              <!-- <el-input v-model="item.identityNum" placeholder="请输入" /> -->
+              <el-input placeholder="请输入" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item
+              label="联系电话："
+              :rules="[
+                {
+                  required: true,
+                  message: '联系电话不能为空',
+                  trigger: 'blur',
+                },
+                {
+                  pattern: /^[1][3,4,5,6,7,8,9][0-9]{9}$/,
+                  message: '请输入正确的手机号码',
+                  trigger: 'blur',
+                },
+              ]"
+            >
+              <!-- <el-input v-model="item.contactTelphone" placeholder="请输入" /> -->
+              <el-input placeholder="请输入" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item
+              label="单位地址："
+              :rules="[
+                {
+                  required: true,
+                  message: '单位地址不能为空',
+                  trigger: 'blur',
+                },
+              ]"
+            >
+              <!-- <el-input v-model="item.workAddress" placeholder="请输入" /> -->
+              <el-input placeholder="请输入" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item
+              label="单位电话："
+              :rules="[
+                {
+                  required: true,
+                  message: '单位电话不能为空',
+                  trigger: 'blur',
+                },
+              ]"
+            >
+              <!-- <el-input v-model="item.workTelphone" placeholder="请输入" /> -->
+              <el-input placeholder="请输入" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item
+              label="联系地址："
+              :rules="[
+                {
+                  required: true,
+                  message: '联系地址不能为空',
+                  trigger: 'blur',
+                },
+              ]"
+            >
+              <!-- <el-input v-model="item.contactAddress" placeholder="请输入" /> -->
+              <el-input placeholder="请输入" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <div style="display: inline-flex">
+          <div class="infoIcon"></div>
+          <div class="caseInfo2">代理人信息：</div>
+        </div>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item
+              label="姓名："
+              :rules="[
+                {
+                  required: true,
+                  message: '姓名不能为空',
+                  trigger: 'blur',
+                },
+              ]"
+            >
+              <!-- <el-input v-model="item.nameAgent" placeholder="请输入" /> -->
+              <el-input placeholder="请输入" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item
+              label="身份证号："
+              :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.identityNumAgent" placeholder="请输入" /> -->
+              <el-input placeholder="请输入" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item
+              label="联系电话："
+              :rules="[
+                {
+                  required: true,
+                  message: '联系电话不能为空',
+                  trigger: 'blur',
+                },
+                {
+                  pattern: /^[1][3,4,5,6,7,8,9][0-9]{9}$/,
+                  message: '请输入正确的手机号码',
+                  trigger: 'blur',
+                },
+              ]"
+            >
+              <!-- <el-input
+                v-model="item.contactTelphoneAgent"
+                placeholder="请输入"
+              /> -->
+              <el-input placeholder="请输入" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item
+              label="联系地址："
+              :rules="[
+                {
+                  required: true,
+                  message: '联系地址不能为空',
+                  trigger: 'blur',
+                },
+              ]"
+            >
+              <!-- <el-input
+                v-model="item.contactAddressAgent"
+                placeholder="请输入"
+              /> -->
+              <el-input placeholder="请输入" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </div>
+    </el-form>
+    <el-form ref="form3" label-width="150px" :model="form3">
+      <!-- <div
+        v-for="(itm, index) in form3.paymentArr1"
+        :key="index + form2.paymentArr.length"
+      > -->
+      <div>
+        <div style="display: flex; justify-content: space-between">
+          <div style="display: inline-flex">
+            <div class="infoIcon"></div>
+            <div class="caseInfo">被申请人主体信息：</div>
+          </div>
+        </div>
+        <el-divider></el-divider>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item
+              label="被申请人姓名"
+              :rules="[
+                {
+                  required: true,
+                  message: '被申请人不能为空',
+                  trigger: 'blur',
+                },
+              ]"
+            >
+              <el-input placeholder="请输入" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item
+              label="身份证号："
+              :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 placeholder="请输入" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item
+              label="联系电话："
+              :rules="[
+                {
+                  required: true,
+                  message: '联系电话不能为空',
+                  trigger: 'blur',
+                },
+                {
+                  pattern: /^[1][3,4,5,6,7,8,9][0-9]{9}$/,
+                  message: '请输入正确的手机号码',
+                  trigger: 'blur',
+                },
+              ]"
+            >
+              <el-input placeholder="请输入" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item
+              label="单位地址："
+              :rules="[
+                {
+                  required: true,
+                  message: '单位地址不能为空',
+                  trigger: 'blur',
+                },
+              ]"
+            >
+              <el-input placeholder="请输入" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item
+              label="单位电话："
+              :rules="[
+                {
+                  required: true,
+                  message: '单位电话不能为空',
+                  trigger: 'blur',
+                },
+              ]"
+            >
+              <el-input placeholder="请输入" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item
+              label="联系地址："
+              :rules="[
+                {
+                  required: true,
+                  message: '联系地址不能为空',
+                  trigger: 'blur',
+                },
+              ]"
+            >
+              <el-input placeholder="请输入" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <div style="display: inline-flex">
+          <div class="infoIcon"></div>
+          <div class="caseInfo2">代理人信息：</div>
+        </div>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item
+              label="姓名："
+              :rules="[
+                {
+                  required: true,
+                  message: '姓名不能为空',
+                  trigger: 'blur',
+                },
+              ]"
+            >
+              <el-input placeholder="请输入" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item
+              label="身份证号："
+              :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 placeholder="请输入" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item
+              label="联系电话："
+              :rules="[
+                {
+                  required: true,
+                  message: '联系电话不能为空',
+                  trigger: 'blur',
+                },
+                {
+                  pattern: /^[1][3,4,5,6,7,8,9][0-9]{9}$/,
+                  message: '请输入正确的手机号码',
+                  trigger: 'blur',
+                },
+              ]"
+            >
+              <el-input placeholder="请输入" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item
+              label="联系地址："
+              :rules="[
+                {
+                  required: true,
+                  message: '联系地址不能为空',
+                  trigger: 'blur',
+                },
+              ]"
+            >
+              <el-input placeholder="请输入" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </div>
+    </el-form>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      formData: {},
+      applicateArr: [],
+      quiltArr: [],
+      form2: {},
+      form3: {},
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.caseInfo {
+  font-size: 17px;
+  font-weight: 600;
+}
+.caseInfo2 {
+  font-size: 15px;
+  font-weight: 550;
+}
+.infoIcon {
+  width: 4px;
+  background-color: #0072ff;
+  margin-right: 5px;
+}
+.el-date-editor {
+  width: 100%;
+}
+</style>

src/views/caseManagement/caseList.vue

@@ -364,6 +364,7 @@
     :showcaseLog="showcaseLog"
     @cancelcaseLog="cancelcaseLog"
     :flagLoading="flagLoading"
+    :caselogDataArr="caselogDataArr"
     ></caselogDialog>
   </div>
 </template>
@@ -449,7 +450,8 @@ export default {
       payForm: {},
       caseAttachList: [], //案件质证资料
       showcaseLog: false, //案件日志弹框显示
-      flagLoading: false, //案件日志弹框loading
+      flagLoading: true, //案件日志弹框loading
+      caselogDataArr: []
     };
   },
   created() {
@@ -542,10 +544,18 @@ export default {
     // 案件日志
     caselogRow(row) {
       this.showcaseLog = true;
+      this.caseLogRecordListFn(row)
     },
     // 查询案件日志信息
-    caseLogRecordListFn() {
-
+    caseLogRecordListFn(val) {
+      this.flagLoading = true;
+      let params = {
+        caseAppliId: val.id
+      }
+      caseLogRecordList(params).then((res) => {
+        this.caselogDataArr = res.rows
+        this.flagLoading = false;
+      })
     },
     // 关闭案件日志
     cancelcaseLog() {

src/views/caseManagement/components/caselogDialog.vue

@@ -11,30 +11,16 @@
         <i class="el-icon-loading"></i>
       </div>
       <div v-else>
-        <el-timeline>
+        <div class="noData" v-if="noData">暂无数据！</div>
+        <el-timeline v-else>
           <el-timeline-item
             v-for="(activity, index) in activities"
             :key="index"
-            :timestamp="activity.timestamp"
+            :timestamp="(index + 1).toString()"
             placement="top"
           >
-            <el-card>
-              <h4>{{ activity.doOperate }}</h4>
-              <p>{{ activity.content }}</p>
-            </el-card>
+            <p>{{ activity.content }}</p>
           </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">
@@ -48,45 +34,29 @@
 
 <script>
 export default {
-  props: ["showcaseLog", "flagLoading"],
+  props: ["showcaseLog", "flagLoading", "caselogDataArr"],
   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: "提交立案"
-        },
-      ],
+      activities: [],
+      noData: false,
     };
   },
+  watch: {
+    caselogDataArr: {
+      handler(val) {
+        if (val && val.length > 0) {
+          this.noData = false;
+          this.activities = val;
+          this.activities.forEach((item) => {
+            item.content = item.content;
+          });
+        } else {
+          this.noData = true;
+        }
+      },
+    },
+  },
   methods: {
     cancel() {
       this.$emit("cancelcaseLog");
@@ -97,7 +67,7 @@ export default {
 
 <style lang="scss" scoped>
 ::v-deep .el-dialog__body {
-  height: 700px !important;
+  height: 500px !important;
   overflow: auto !important;
 }
 ::v-deep .el-dialog {
@@ -130,4 +100,14 @@ export default {
     font-size: 50px;
   }
 }
+.noData {
+  width: 100%;
+  height: 400px;
+  font-size: 30px;
+  font-weight: 700;
+  color: #959595;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
 </style>

vue.config.js

@@ -11,8 +11,8 @@ const name = process.env.VUE_APP_TITLE || '智慧仲裁管理系统' // 网页
 
 const port = process.env.port || process.env.npm_config_port || 80 // 端口
 
-// const API = 'http://121.40.189.20:9001'  //测试
-const API = 'http://192.168.3.18:9001'  //B
+const API = 'http://121.40.189.20:9001'  //测试
+// const API = 'http://192.168.3.18:9001'  //B
 // const API = 'http://192.168.3.77:8080' //Q
 
 // vue.config.js 配置说明