<!--
|
* @Author: shuishen 1109946754@qq.com
|
* @Date: 2024-01-17 16:04:08
|
* @LastEditors: shuishen 1109946754@qq.com
|
* @LastEditTime: 2024-02-19 16:34:09
|
* @FilePath: \srs-police-affairs\src\components\siteDialog\index.vue
|
* @Description:
|
*
|
* Copyright (c) 2024 by shuishen, All Rights Reserved.
|
-->
|
<template>
|
<el-dialog class="syld-details-box site-dialog-popup business-detail-box" :title="'场所详情'" append-to-body
|
:close-on-click-modal="false" :visible.sync="popupShow" center @close="popupClose">
|
<div class="flex f-d-c" style="height: 100%;" v-loading="loading"
|
element-loading-background="rgba(0, 0, 0, 0.5)">
|
<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>
|
|
<div class="flex-1 tab-content-box" v-if="chooseTab == 1">
|
<div class="info-list">
|
<div class="info-item">
|
<div class="name">
|
场所名称：
|
</div>
|
<div class="value">
|
{{ businessDetailData.placeName }}
|
</div>
|
</div>
|
<div class="info-item">
|
<div class="name">
|
场所地址：
|
</div>
|
<div class="value">
|
{{ businessDetailData.location }}
|
</div>
|
</div>
|
<div class="info-item">
|
<div class="name">
|
负责人：
|
</div>
|
<div class="value">
|
{{ businessDetailData.principal }}
|
</div>
|
</div>
|
<div class="info-item">
|
<div class="name">
|
手机号码：
|
</div>
|
<div class="value">
|
{{ businessDetailData.principalPhone }}
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<div class="flex-1 flex f-d-c tab-content-box" v-if="chooseTab == 2">
|
<el-table :data="tradeTableData" style="width: 100%" :header-cell-style="{ 'text-align': 'center' }"
|
:cell-style="{ 'text-align': 'center' }">
|
<el-table-column prop="transactionObject" :show-overflow-tooltip="true"
|
label="交易对象"></el-table-column>
|
<el-table-column prop="transactionObjectTel" :show-overflow-tooltip="true"
|
label="交易对象电话"></el-table-column>
|
<el-table-column prop="idCard" :show-overflow-tooltip="true" label="身份证号"></el-table-column>
|
<el-table-column prop="goodsNums" :show-overflow-tooltip="true" label="交易数量"></el-table-column>
|
<el-table-column prop="transactionMoney" :show-overflow-tooltip="true"
|
label="交易金额"></el-table-column>
|
<el-table-column label="操作" width="120">
|
<template slot-scope="scope">
|
<el-button @click.native.prevent="viewRow(scope.row)" type="text" size="small">
|
<span style="color: #409eff !important;">查看详情</span>
|
</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
<Detail ref="Detail" />
|
</el-dialog>
|
</template>
|
|
<script>
|
import {
|
getFrontTypeTree,
|
getTaskLabelReportingEventPage
|
} from "@/api/site/index.js"
|
import Detail from './components/detail.vue'
|
|
export default {
|
name: 'PomDialogPopup',
|
|
components: { Detail },
|
data () {
|
return {
|
searchDate: '',
|
popupShow: false,
|
businessId: '',
|
chooseTab: 1,
|
tradeTableData: [],
|
loading: false,
|
businessDetailData: {},
|
pages: {
|
current: 1,
|
size: 22,
|
total: 0,
|
count: 0,
|
},
|
refreshNum: 1,
|
typeOptions: []
|
}
|
},
|
|
created () {
|
this.getFrontTypeTree()
|
},
|
|
methods: {
|
// 打开弹窗初始化数据
|
initOpen (row) {
|
this.searchDate = ''
|
this.businessDetailData = row
|
this.chooseTab = 1
|
this.popupShow = true
|
|
this.pages.current = 1
|
this.getTaskLabelReportingEventPage()
|
},
|
|
// 分页处理
|
handleCurrentChange (current) {
|
this.pages.current = current
|
},
|
|
getTaskLabelReportingEventPage () {
|
this.flag = false
|
|
getTaskLabelReportingEventPage({
|
placeId: this.businessDetailData.id,
|
current: 1,
|
size: 9999,
|
}).then(res => {
|
const data = res.data.data
|
data.records.forEach(element => {
|
element.goodsImageUrls = this.getImgUrls(element.goodsImageUrls)
|
element.imageUrls = this.getImgUrls(element.imageUrls)
|
this.typeOptions.forEach(item => {
|
if (item.key == element.frontType) {
|
element.frontName = item.title
|
}
|
})
|
})
|
this.tradeTableData = data.records
|
this.flag = true
|
|
setTimeout(() => {
|
if (this.checkFlag && this.flag) this.loading = false
|
}, 500)
|
})
|
},
|
|
// 关闭弹窗按钮
|
popupClose () {
|
this.popupShow = false
|
},
|
|
// tab切换
|
tabClick (type) {
|
this.chooseTab = type
|
},
|
|
// 查看详情
|
viewRow (row) {
|
this.$refs.Detail.initOpen(row)
|
},
|
|
// 获取阵地字典
|
getFrontTypeTree () {
|
getFrontTypeTree().then(res => {
|
this.typeOptions = res.data.data
|
})
|
},
|
|
// 图片转换
|
getImgUrls (imageUrls) {
|
if (imageUrls && imageUrls != '' && imageUrls.length > 0) {
|
imageUrls = imageUrls.split(',').filter(ele => ele != '').map(ele => {
|
return 'http://10.141.11.11/place/' + ele
|
// return 'https://srgdjczzxtpt.com:2080/gminio/jczz/' + ele
|
})
|
}
|
return imageUrls || []
|
},
|
},
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
:deep(.el-image__error) {
|
height: 120px;
|
}
|
|
.flex {
|
display: flex;
|
}
|
|
.f-d-c {
|
flex-direction: column;
|
}
|
|
.flex-1 {
|
height: 0;
|
flex: 1;
|
}
|
</style>
|
