97 lines
3.4 KiB
Vue
97 lines
3.4 KiB
Vue
|
<template>
|
||
|
|
<div class="app-container" v-loading="loading" >
|
||
|
|
<el-card header="基础信息" class="card-box">
|
||
|
|
<el-descriptions :column="4">
|
||
|
|
<el-descriptions-item label="名称">
|
||
|
|
{{ detail.name }}
|
||
|
|
<dict-tag :options="dict.type.area_status" :value="detail.status" size="small" />
|
||
|
|
</el-descriptions-item>
|
||
|
|
<el-descriptions-item label="运营时间">
|
||
|
|
{{ detail.areaTimeStart | dv }} - {{ detail.areaTimeEnd | dv }}
|
||
|
|
</el-descriptions-item>
|
||
|
|
<el-descriptions-item label="运营商">
|
||
|
|
<user-link :id="detail.userId" :text="detail.userName" />
|
||
|
|
</el-descriptions-item>
|
||
|
|
<el-descriptions-item label="创建人">
|
||
|
|
<user-link :id="detail.createId" :text="detail.createName" />
|
||
|
|
</el-descriptions-item>
|
||
|
|
<el-descriptions-item label="创建时间">{{ detail.createTime | dv }}</el-descriptions-item>
|
||
|
|
<el-descriptions-item label="备注" :span="2">{{ detail.remark | dv }}</el-descriptions-item>
|
||
|
|
</el-descriptions>
|
||
|
|
</el-card>
|
||
|
|
|
||
|
|
<el-card v-if="detail.id" class="card-box">
|
||
|
|
<el-tabs>
|
||
|
|
<el-tab-pane label="电子围栏" lazy v-if="checkPermi(['bst:areaSub:list'])">
|
||
|
|
<area-sub :area-id="detail.id"/>
|
||
|
|
</el-tab-pane>
|
||
|
|
<el-tab-pane label="车辆列表" lazy v-if="checkPermi(['bst:device:list'])">
|
||
|
|
<device :query="{areaId: detail.id}" />
|
||
|
|
</el-tab-pane>
|
||
|
|
<el-tab-pane label="订单列表" lazy v-if="checkPermi(['bst:order:list'])">
|
||
|
|
<order :query="{areaId: detail.id}" />
|
||
|
|
</el-tab-pane>
|
||
|
|
<el-tab-pane label="加盟列表" lazy v-if="checkPermi(['bst:areaJoin:list'])">
|
||
|
|
<area-join :query="{areaId: detail.id, types: [AreaJoinType.JOIN, AreaJoinType.COOPERATE]}" />
|
||
|
|
</el-tab-pane>
|
||
|
|
<el-tab-pane label="运维列表" lazy v-if="checkPermi(['bst:areaJoin:list'])">
|
||
|
|
<area-join :query="{areaId: detail.id, types: [AreaJoinType.OPERATION]}" />
|
||
|
|
</el-tab-pane>
|
||
|
|
<el-tab-pane label="客服列表" lazy v-if="checkPermi(['bst:customerService:list'])">
|
||
|
|
<customer-service :query="{areaId: detail.id}"/>
|
||
|
|
</el-tab-pane>
|
||
|
|
<el-tab-pane label="公告协议" lazy v-if="checkPermi(['bst:agreement:list'])">
|
||
|
|
<agreement :query="{areaId: detail.id}"/>
|
||
|
|
</el-tab-pane>
|
||
|
|
</el-tabs>
|
||
|
|
</el-card>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { getArea } from '@/api/bst/area';
|
||
|
|
import UserLink from '@/components/Business/User/UserLink.vue';
|
||
|
|
import AreaSub from '@/views/bst/areaSub/index.vue';
|
||
|
|
import Device from '@/views/bst/device/index.vue';
|
||
|
|
import Order from '@/views/bst/order/index.vue';
|
||
|
|
import AreaJoin from '@/views/bst/areaJoin/index.vue';
|
||
|
|
import { AreaJoinType } from '@/utils/enums';
|
||
|
|
import CustomerService from '@/views/bst/customerService/index.vue';
|
||
|
|
import Agreement from '@/views/bst/agreement/index.vue';
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: 'AreaView',
|
||
|
|
dicts: ['area_status'],
|
||
|
|
components: {
|
||
|
|
UserLink,
|
||
|
|
AreaSub,
|
||
|
|
Device,
|
||
|
|
Order,
|
||
|
|
AreaJoin,
|
||
|
|
CustomerService,
|
||
|
|
Agreement
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
AreaJoinType,
|
||
|
|
detail: {},
|
||
|
|
loading: false,
|
||
|
|
id: null,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
this.id = this.$route.params.id;
|
||
|
|
this.getDetail();
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
getDetail() {
|
||
|
|
this.loading = true;
|
||
|
|
getArea(this.id).then(res => {
|
||
|
|
this.detail = res.data;
|
||
|
|
}).finally(() => {
|
||
|
|
this.loading = false;
|
||
|
|
})
|
||
|
|
},
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|