驾驶证管理

src/router/index.js

@@ -134,6 +134,13 @@ export const constantRoutes = [
         component: () => import('@/views/bst/area/view/view.vue'),
         name: 'AreaView',
         meta: { title: '运营区详情' }
+      },
+      {
+        path: 'credit/:id?',
+        component: () => import('@/views/bst/credit/view/view.vue'),
+        name: 'CreditView',
+        meta: { title: '挂账方详情' }
+        
       }
     ]
   },

src/views/bst/credit/index.vue

@@ -98,7 +98,8 @@
               {{d.row[column.key]}}
             </template>
             <template v-else-if="column.key === 'name'">
-              <avatar :name="d.row.name" :src="d.row.picture" :size="32" />
+              <avatar :name="d.row.name" :src="d.row.logo" :size="24" style="margin-right: 4px;"/>
+              {{ d.row.name | dv }}
             </template>
             <template v-else-if="column.key === 'status'">
               <dict-tag :options="dict.type.credit_status" :value="d.row[column.key]"/>
@@ -123,6 +124,13 @@
       </template>
       <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-view"
+            @click="handleView(scope.row)"
+            v-has-permi="['bst:credit:query']"
+          >详情</el-button>
           <el-button
             size="mini"
             type="text"
@@ -160,6 +168,7 @@
 
 <script>
 import { delCredit, listCredit } from "@/api/bst/credit";
+import Avatar from '@/components/Avatar/index.vue';
 import AreaLink from '@/components/Business/Area/AreaLink.vue';
 import AreaRemoteSelect from "@/components/Business/Area/AreaRemoteSelect.vue";
 import UserLink from '@/components/Business/User/UserLink.vue';
@@ -177,7 +186,7 @@ export default {
   name: "Credit",
   mixins: [$showColumns],
   dicts: ['credit_status'],
-  components: {FormCol, CreditEditDialog, AreaLink, UserLink, AreaRemoteSelect},
+  components: {FormCol, CreditEditDialog, AreaLink, UserLink, AreaRemoteSelect, Avatar},
   data() {
     return {
       span: 24,
@@ -294,6 +303,10 @@ export default {
       this.download('bst/credit/export', {
         ...this.queryParams
       }, `credit_${new Date().getTime()}.xlsx`)
+    },
+    /** 详情按钮操作 */
+    handleView(row) {
+      this.$router.push(`/view/credit/${row.id}`)
     }
   }
 };

src/views/bst/credit/view/view.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="app-container" v-loading="loading">
+    <el-card header="挂账方" class="card-box">
+      <el-descriptions :column="4" >
+        <el-descriptions-item label="名称">
+          <div style="display: flex; align-items: center;">
+            <avatar :name="detail.name" :src="detail.logo" :size="24" style="margin-right: 4px;"/>
+            {{ detail.name | dv }}
+          </div>
+        </el-descriptions-item>
+        <el-descriptions-item label="状态">
+          <dict-tag :options="dict.type.credit_status" :value="detail.status" size="small"/>
+        </el-descriptions-item>
+        <el-descriptions-item label="运营区">
+          <area-link :id="detail.areaId" :text="detail.areaName" />
+        </el-descriptions-item>
+        <el-descriptions-item label="管理员">
+          <user-link :id="detail.adminId" :text="detail.adminName" />
+        </el-descriptions-item>
+        <el-descriptions-item label="已用金额">
+          {{ detail.usedAmount | fix2 | dv }} 元
+        </el-descriptions-item>
+        <el-descriptions-item label="创建人">
+          <user-link :id="detail.createId" :text="detail.createName" />
+        </el-descriptions-item>
+        <el-descriptions-item label="创建时间">
+          {{ detail.createTime }}
+        </el-descriptions-item>
+      </el-descriptions>
+    </el-card>
+
+    <el-card v-if="detail.id != null" class="card-box">
+      <el-tabs>
+        <el-tab-pane lazy label="挂账用户" v-if="checkPermi(['bst:creditUser:list'])">
+          <credit-user :query="{creditId: detail.id}"/>
+        </el-tab-pane>
+        <el-tab-pane lazy label="挂账记录" v-if="checkPermi(['bst:creditPay:list'])">
+          <credit-pay :query="{creditId: detail.id}"/>
+        </el-tab-pane>
+      </el-tabs>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import { getCredit } from '@/api/bst/credit';
+import Avatar from '@/components/Avatar/index.vue';
+import AreaLink from '@/components/Business/Area/AreaLink.vue';
+import UserLink from '@/components/Business/User/UserLink.vue';
+import { checkPermi } from '@/utils/permission';
+import CreditPay from '@/views/bst/creditPay/index.vue';
+import CreditUser from '@/views/bst/creditUser/index.vue';
+
+export default {
+  name: 'CreditView',
+  dicts: ['credit_status'],
+  components: {
+    Avatar,
+    AreaLink,
+    UserLink,
+    CreditUser,
+    CreditPay
+  },
+  data() {
+    return {
+      detail: {},
+      loading: false
+    }
+  },
+  created() {
+    this.getDetail()
+  },
+  methods: {
+    getDetail() {
+      this.loading = true
+      getCredit(this.$route.params.id).then(res => {
+        this.detail = res.data
+      }).finally(() => {
+        this.loading = false
+      })
+    }
+  }
+}
+</script>

src/views/bst/creditPay/index.vue

@@ -202,6 +202,12 @@ export default {
   mixins: [$showColumns],
   dicts: ['credit_pay_status', 'pay_bst_type'],
   components: {FormCol, CreditRemoteSelect, AreaRemoteSelect},
+  props: {
+    query: {
+      type: Object,
+      default: () => ({})
+    }
+  },
   data() {
     return {
       span: 24,
@@ -295,6 +301,7 @@ export default {
     };
   },
   created() {
+    Object.assign(this.queryParams, this.query);
     this.getList();
   },
   methods: {

src/views/bst/creditUser/index.vue

@@ -157,6 +157,12 @@ export default {
   name: "CreditUser",
   mixins: [$showColumns],
   components: {FormCol, CreditUserEditDialog, AreaRemoteSelect, AreaLink, UserLink},
+  props: {
+    query: {
+      type: Object,
+      default: () => ({})
+    }
+  },
   data() {
     return {
       span: 24,
@@ -204,6 +210,7 @@ export default {
     };
   },
   created() {
+    Object.assign(this.queryParams, this.query);
     this.getList();
   },
   methods: {