'快递信息页面开发'

src/views/awardManagement/components/expressDeliveryDialog.vue

@@ -0,0 +1,101 @@
+<template>
+  <div>
+    <el-dialog
+      title="快递信息"
+      :visible="showDelivery"
+      @close="cancel"
+      center
+      :distroy-on-close="true"
+    >
+      <div class="deliverName">中通快递 85644454542121</div>
+      <el-divider></el-divider>
+      <el-timeline :reverse="reverse">
+        <el-timeline-item
+          v-for="(activity, index) in activities"
+          :key="index"
+          :timestamp="activity.timestamp"
+        >
+          {{ activity.content }}
+        </el-timeline-item>
+      </el-timeline>
+      <div slot="footer" class="dialog-footer">
+         <el-button @click="cancel" class="endbutton"><span>取 消</span></el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["showDelivery"],
+  data() {
+    return {
+      // key: value
+      reverse: true,
+      activities: [  
+        {
+          content: "已下单 08-18 10:11",
+          timestamp: "已下单",
+        },
+        {
+          content: "已接单 08-19 10:11",
+          timestamp: "已接单",
+        },
+        {
+          content: "已发货 08-19 10:11",
+          timestamp: "已发货",
+        },
+        {
+          content: "已揽件 08-20 00:11",
+          timestamp: "已揽件",
+        },
+        {
+          content: "运输中 08-20 02:11",
+          timestamp: "运输中",
+        },
+        {
+          content: "派送中 08-22 10:11",
+          timestamp: "【西安市】快递已到达西安市临潼区",
+        },
+        {
+          content: "待取件 08-23 15:11",
+          timestamp: "【西安市】快递已到达菜鸟驿站",
+        },
+      ],
+    };
+  },
+  methods: {
+    cancel() {
+      this.$emit("closeDeliveryModel");
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+::v-deep .el-dialog {
+  width: 600px;
+  background: #ffffff;
+  border-radius: 20px;
+}
+.deliverName {
+  margin-left: 6%;
+  font-size: 16px;
+  font-weight: 500;
+}
+.endbutton {
+  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;
+  }
+}
+</style>

src/views/awardManagement/listofAwards.vue

@@ -33,7 +33,12 @@
             <el-table-column label="案件标的" align="center" prop="caseSubjectAmount" />
             <el-table-column label="开庭日期" align="center" prop="hearDate" :show-overflow-tooltip="true" />
             <!-- 缴费人 -->
-            <el-table-column label="案件状态" align="center" prop="caseStatusName" />
+            <!-- <el-table-column label="案件状态" align="center" prop="caseStatusName" /> -->
+            <el-table-column label="案件状态" align="center" prop="caseStatusName">
+              <template slot-scope="scope">
+                <el-tag type="success">{{ scope.row.caseStatusName }}</el-tag>
+              </template>
+            </el-table-column>
             <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                 <template slot-scope="scope">
                     <!-- <el-button size="mini" type="text" icon="el-icon-reading" v-if="scope.row.caseStatus == 10" @click="showModel(scope.row, 0)"
@@ -46,10 +51,12 @@
                         v-hasPermi="['monitor:online:forceLogout']">签名</el-button>
                     <el-button size="mini" type="text" icon="el-icon-edit" v-if="scope.row.caseStatus == 14" @click="showaffixModel(scope.row, 4)"
                         v-hasPermi="['monitor:online:forceLogout']">用印申请</el-button>
+                    <el-button size="mini" type="text" icon="el-icon-truck" @click="showDeliveryModel(scope.row, 4)"
+                        v-hasPermi="['monitor:online:forceLogout']">快递信息</el-button>
                         <!-- v-if="scope.row.caseStatus == 15"   送达裁决书 -->
                     <el-button size="mini" type="text" icon="el-icon-edit" v-if="scope.row.caseStatus == 15"  @click="showMailaward(scope.row)"
                         v-hasPermi="['monitor:online:forceLogout']">送达裁决书</el-button>
-                    <el-button size="mini" type="text" icon="el-icon-edit" v-if="scope.row.caseStatus == 16" @click="showModel(scope.row, 6)"
+                    <el-button size="mini" type="text" icon="el-icon-edit" v-if="scope.row.caseStatus == 16" @click="showCasefilingModel(scope.row, 6)"
                         v-hasPermi="['monitor:online:forceLogout']">案件归档</el-button>
                     <!-- <el-button size="mini" type="text" icon="el-icon-reading" 
                         @click="showModel(scope.row, 0)" v-hasPermi="['monitor:online:forceLogout']">生成裁决书</el-button>
@@ -80,6 +87,11 @@
         @updataList="updataList"
         :mailawardata="mailawardata"
         ></mailawardDialog>
+        <!-- 快递信息页面 -->
+        <expressDeliveryDialog
+        :showDelivery="showDelivery"
+        @closeDeliveryModel="closeDeliveryModel"
+        ></expressDeliveryDialog>
     </div>
 </template>
   
@@ -90,11 +102,12 @@ import {
 } from "@/api/awardManagement/awardManagement";
 import paymentdetailsDialog from "./components/paymentdetailsDialog.vue";
 import mailawardDialog from './components/MailawardDialog.vue';
+import expressDeliveryDialog from './components/expressDeliveryDialog.vue';
 
 export default {
     name: "paymentList",
     dicts: ["case_status"],
-    components: { paymentdetailsDialog, mailawardDialog },
+    components: { paymentdetailsDialog, mailawardDialog, expressDeliveryDialog },
     data() {
         return {
             queryParams: {
@@ -124,6 +137,7 @@ export default {
             flag: null,
             openMailawardDialog: false,  //送达裁决书页面
             mailawardata: {},   //裁决书送达界面数据
+            showDelivery: false, //快递信息弹框
         };
     },
     created() {
@@ -193,6 +207,24 @@ export default {
             //   row.status = row.status === "0" ? "1" : "0";
             });
         },
+        // 快递信息弹框
+        showDeliveryModel(row) {
+            console.log(row,'快递');
+            this.showDelivery = true
+        },
+        closeDeliveryModel() {
+            this.showDelivery = false
+        },
+        // 案件归档
+        showCasefilingModel() {
+            this.$modal.confirm('是否确认立即进行案件扫描？').then(
+                function () {}
+            ).then(() => {
+
+            }).catch(function () {
+
+            })
+        },
         // 送达裁决书弹框
         showMailaward(row) {
             this.mailawardata = row;