扫码应用增加弹窗

guanqb

2024-01-17 0c8deac1e2ac7a05b1c7142a166dfbea5f735c6b

扫码应用增加弹窗

 src/styles/media/index.scss

@@ -3166,7 +3166,8 @@

    }

    .search-details-box {
    .search-details-box,
    .scan-details-box {
        .el-dialog {
            width: countSizeVw(400, 1920);
            height: countSizeVh(300);

 src/views/intelligentSearch/index.vue

@@ -138,6 +138,12 @@

        // 获取列表
        getList () {
            let params = {
                searchText: this.searchText,
                size: this.pages.pageSize,
                current: this.pages.currentPage
            }
            console.log('getList', params)
            this.tableData = [
                {
                    name: '张三',
@@ -161,17 +167,17 @@
                    address: '333'
                }
            ]
            this.pages.total = 3
            this.pages.total = 30
        },

        searchBtn () {

            this.getList()
        },

        // 分页处理
        handleCurrentChange (currentPage) {
            this.page.currentPage = currentPage

            this.pages.currentPage = currentPage
            this.getList()
        },



 src/views/scanOrCode/components/scanDetailDialog.vue

New file
@@ -0,0 +1,65 @@
<template>
    <el-dialog title="详情信息" :visible.sync="scanDetailVisible" :modal="true" :modal-append-to-body="false"
        :close-on-click-modal="false" class="scan-details-box">
        <div class="info-list">
            <div class="info-item">
                <div class="name">名字：</div>
                <div class="value">{{ row.name }}</div>
            </div>
            <div class="info-item">
                <div class="name">手机号：</div>
                <div class="value">{{ row.tel }}</div>
            </div>
            <div class="info-item">
                <div class="name">地址：</div>
                <div class="value">{{ row.address }}</div>
            </div>
            <div class="info-item">
                <div class="name">身份证号</div>
                <div class="value">362121199212246538</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">
                <div class="name">资源类型：</div>
                <div class="value">业务租客登记</div>
            </div>
        </div>
    </el-dialog>
</template>

<script>


export default {
    data () {
        return {
            scanDetailVisible: false,
            row: {
                name: '',
                tel: '',
                address: ''
            }
        }
    },

    methods: {
        showScanDetail (row) {
            this.row = row
            this.scanDetailVisible = true
        }
    },
}
</script>

<style lang="scss" scoped></style>

 src/views/scanOrCode/index.vue

@@ -34,16 +34,15 @@
                    :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                    :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'default' }"
                    :row-class-name="tableRowClassName" class="police-infor-table">
                    <el-table-column prop="JJDWMC" :show-overflow-tooltip="true" label="姓名"
                        min-width="80%"></el-table-column>
                    <el-table-column prop="JJDWMC" :show-overflow-tooltip="true" label="手机号"
                        min-width="80%"></el-table-column>
                    <el-table-column prop="name" :show-overflow-tooltip="true" label="姓名" min-width="80%"></el-table-column>
                    <el-table-column prop="tel" :show-overflow-tooltip="true" label="手机号" min-width="80%"></el-table-column>
                    <el-table-column label="操作" align="center" min-width="32%">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" title="定位">
                            <el-button type="text" size="small" title="定位" :disabled="positionDisabled(scope.row)"
                                @click="rowClick(scope.row)">
                                <i class="el-icon-location" :style="{ color: positionColor(scope.row) }"></i>
                            </el-button>
                            <el-button type="text" size="small" title="详情">
                            <el-button type="text" size="small" title="详情" @click="goDetail(scope.row)">
                                <i class="el-icon-document"></i>
                            </el-button>
                        </template>
@@ -57,50 +56,24 @@
                </div>
            </div>
        </div>
        <scanDetailDialog ref="scanDetailDialog"></scanDetailDialog>
    </div>
</template>

<script>
import { initMapPosition } from '@/utils/mapPositionInit'
import scanDetailDialog from './components/scanDetailDialog.vue'

let loading = null

export default {
    inject: ['userInfo'],

    components: { scanDetailDialog },

    data () {
        return {
            searchText: '',
            options: {
                columns: [
                    {
                        type: 'input',
                        props: 'xm',
                        label: '姓名',
                        width: '40%',
                    },

                    {
                        type: 'input',
                        props: 'sjh',
                        label: '手机号',
                        width: '60%',
                    },

                    {
                        type: 'input',
                        props: 'sfz',
                        label: '身份证号',
                    },

                    {
                        type: 'input',
                        props: 'zz',
                        label: '住址',
                    },
                ]
            },

            realEmptyText: "",
            currentTableHeight: 0,
            tableData: [],
@@ -145,6 +118,7 @@

        that.$nextTick(() => {
            initMapPosition()
            that.getList()
        })
    },

@@ -161,32 +135,85 @@
    },

    computed: {
        whetherPosition () {
            return (row) => {
                return !(row.ZDDWXZB && row.ZDDWXZB != 0 && row.ZDDWYZB && row.ZDDWYZB != 0 && row.ZDDWXZB > 73)
            }
        },

        positionColor () {
            return (row) => {
                if (row.ZDDWXZB && row.ZDDWXZB != 0 && row.ZDDWYZB && row.ZDDWYZB != 0 && row.ZDDWXZB > 73) {
                if (row.X && row.X != 0 || row.lng && row.lng != 0 || row.longitude && row.longitude != 0 || row.x && row.x != 0) {
                    return "#1AFA29"
                } else {
                    return "#ccc"
                }
            }
        }
        },

        positionDisabled () {
            return (row) => {
                if (row.X && row.X != 0 || row.lng && row.lng != 0 || row.longitude && row.longitude != 0 || row.x && row.x != 0) {
                    return false
                } else {
                    return true
                }
            }
        },
    },

    methods: {
        searchBtn () {
        // 点击详情
        goDetail (row) {
            this.$refs.scanDetailDialog.showScanDetail(row)
        },

        // 点击定位
        rowClick (row) {
            this.$EventBus.$emit('toPosition', {
                siteJd: row.lng,
                siteWd: row.lat,
                siteGd: 200
            })
        },

        // 获取列表
        getList () {
            let params = {
                searchText: this.searchText,
                type: this.typeValue,
                size: this.pages.pageSize,
                current: this.pages.currentPage
            }
            console.log('getList', params)
            this.tableData = [
                {
                    name: '张三',
                    tel: '13366668888',
                    lng: 112.22,
                    lat: 33.22,
                    address: '111'
                },
                {
                    name: '李四',
                    tel: '13366668877',
                    lng: 124.22,
                    lat: 30.22,
                    address: '222'
                },
                {
                    name: '王五',
                    tel: '13366668866',
                    lng: 126.22,
                    lat: 36.22,
                    address: '333'
                }
            ]
            this.pages.total = 3
        },

        searchBtn () {
            this.getList()
        },

        // 分页处理
        handleCurrentChange (currentPage) {
            this.page.currentPage = currentPage

            this.pages.currentPage = currentPage
            this.getList()
        },


@@ -200,6 +227,7 @@
        },

        typeChange () {
            this.getList()
        },

        setTableHeight () {