<!--
|
* @Author: shuishen 1109946754@qq.com
|
* @Date: 2024-01-17 16:04:08
|
* @LastEditors: shuishen 1109946754@qq.com
|
* @LastEditTime: 2024-01-17 16:29:57
|
* @FilePath: \srs-police-affairs\src\components\detailsPopup\index.vue
|
* @Description:
|
*
|
* Copyright (c) 2024 by shuishen, All Rights Reserved.
|
-->
|
<template>
|
<el-dialog class="business-detail-box" :title="popupTile" append-to-body :visible.sync="popupShow" center
|
@close="popupClose">
|
<div>
|
<div class="type-tab-box">
|
<div class="tab-item" :class="{ 'tab-choose-item': chooseTab == 1 }" @click="tabClick(1)">
|
基本信息</div>
|
<div class="tab-item" :class="{ 'tab-choose-item': chooseTab == 2 }" @click="tabClick(2)">
|
其他信息</div>
|
<div class="tab-item" :class="{ 'tab-choose-item': chooseTab == 3 }" @click="tabClick(3)">
|
从业人员 </div>
|
</div>
|
<div class="tab-content-box" v-if="chooseTab == 1">
|
<div class="info-list">
|
<div class="info-item">
|
<div class="name">
|
场所名称：
|
</div>
|
<div class="value">
|
测试0111
|
</div>
|
</div>
|
<div class="info-item">
|
<div class="name">
|
地址：
|
</div>
|
<div class="value">
|
江西省上饶市信州区灵溪街道吴楚大道春天新苑
|
</div>
|
</div>
|
<div class="info-item">
|
<div class="name">
|
负责人：
|
</div>
|
<div class="value">
|
钟松
|
</div>
|
</div>
|
<div class="info-item">
|
<div class="name">
|
手机号码：
|
</div>
|
<div class="value">
|
15179776420
|
</div>
|
</div>
|
<div class="info-item">
|
<div class="name">
|
所属社区：
|
</div>
|
<div class="value">
|
361102003027
|
</div>
|
</div>
|
<div class="info-item">
|
<div class="name">
|
所属网格：
|
</div>
|
<div class="value">
|
第五网格
|
</div>
|
</div>
|
<div class="info-item">
|
<div class="name">
|
场所标签：
|
</div>
|
<div class="value">
|
休闲餐饮 酒吧
|
</div>
|
</div>
|
<div class="info-item">
|
<div class="name">
|
标签颜色：
|
</div>
|
<div class="value">
|
黄色
|
</div>
|
</div>
|
<div class="info-item photo-list">
|
<div class="name">
|
场所图片：
|
</div>
|
<div class="value">
|
<el-image
|
src="https://srgdjczzxtpt.com:2080/gminio/jczz/upload/20240118/4f1acce9ae26f84850b70ee520ee5833.JPG"></el-image>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="tab-content-box" v-if="chooseTab == 2">
|
<div class="info-list">
|
<div class="info-item">
|
<div class="name">
|
法人信息：
|
</div>
|
<div class="value">
|
钟松
|
</div>
|
</div>
|
<div class="info-item">
|
<div class="name">
|
法人电话：
|
</div>
|
<div class="value">
|
15179776420
|
</div>
|
</div>
|
<div class="info-item photo-list">
|
<div class="name">
|
营业执照：
|
</div>
|
<div class="value">
|
<div v-for="index in 3" :key="index">
|
<el-image
|
src="https://srgdjczzxtpt.com:2080/gminio/jczz/upload/20240118/c238e632fab698b5ec78af77a9cb101a.jpg"></el-image>
|
</div>
|
|
</div>
|
</div>
|
<div class="info-item photo-list">
|
<div class="name">
|
场所平面图：
|
</div>
|
<div class="value">
|
<el-image
|
src="https://srgdjczzxtpt.com:2080/gminio/jczz/upload/20240118/43a4fa65ee7ca772f61f0da5d681abcb.JPG"></el-image>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="tab-content-box" v-if="chooseTab == 3">
|
<div class="table-box">
|
<el-table :data="tableData" style="width: 100%" :header-cell-style="{ 'text-align': 'center' }"
|
:cell-style="{ 'text-align': 'center' }">
|
<el-table-column prop="name" label="名称" width="180">
|
</el-table-column>
|
<el-table-column prop="tel" label="手机号码" width="180">
|
</el-table-column>
|
<el-table-column prop="address" label="暂住地">
|
</el-table-column>
|
<el-table-column label="操作" align="center">
|
<template slot-scope="scope">
|
<el-button type="text" size="small" icon="el-icon-edit" @click="goDetail(scope.row)">
|
编辑
|
</el-button>
|
<el-button type="text" size="small" icon="el-icon-delete" @click="goDetail(scope.row)">
|
删除
|
</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
|
</div>
|
</div>
|
</el-dialog>
|
</template>
|
|
<script>
|
export default {
|
name: 'DetailsPopup',
|
|
props: {
|
popupTile: {
|
type: String,
|
default: ''
|
}
|
},
|
|
data () {
|
return {
|
popupShow: false,
|
|
data: [],
|
chooseTab: 1,
|
tableData: [{
|
tel: '19866665555',
|
name: '张三',
|
address: ''
|
}]
|
}
|
},
|
|
methods: {
|
// 打开弹窗初始化数据
|
initOpen (data) {
|
// 数据格式 data = [{ label: '字段名', prop:'字段属性名',value: '字段值' }]
|
|
this.data = data
|
|
this.chooseTab = 1
|
this.popupShow = true
|
},
|
|
// 关闭弹窗按钮
|
popupClose () {
|
this.popupShow = false
|
},
|
|
// tab切换
|
tabClick (type) {
|
this.chooseTab = type
|
console.log('tabClick', type)
|
},
|
|
goDetail () {
|
|
}
|
},
|
}
|
</script>
|
|
<style lang="scss" scoped></style>
|
