扫码应用和智能搜索详情弹窗使用组件

guanqb

2024-01-18 097265091023624ec79aadd70f7604f620b1187b

扫码应用和智能搜索详情弹窗使用组件

 src/components/detailsPopup/index.vue

@@ -10,15 +10,15 @@
-->
<template>
    <!-- 宽度、高度，自己调整合适的 -->
    <el-dialog class="place-info-box" :title="popupTile" append-to-body :visible.sync="popupShow" center
    <el-dialog class="data-details-box" :title="popupTile" append-to-body :visible.sync="popupShow" center
        @close="popupClose">
        <div>
            <div v-for="(item, index) in data" :key="index">
                <div>
        <div class="info-list">
            <div class="info-item" v-for="(item, index) in data" :key="index">
                <div class="name">
                    {{ item.label }}
                </div>

                <div>
                <div class="value">
                    {{ item.value }}
                </div>
            </div>
@@ -46,64 +46,10 @@
    },

    methods: {
        // 传入的data是要组装后的
        initOpen (data) {
            /**
             * 
             *  接口返回的数据，详情 
                {
                    name: '林东东',
                    phone: '13735689044'
                }
            // 数据格式 data = [{ label: '字段名', value: '字段值' }]

             *  data 格式 组装之前
             *  默认为
             *  [
                    {
                        label: '姓名',
                        props: 'name',
                        value: ''
                    },
                    {
                        label: '手机号',
                        props: 'phone',
                        value: ''
                    }
                ]
             * 
                data 格式 组装之后
                [
                    {
                        label: '姓名',
                        props: 'name',
                        value: '林东东'
                    },
                    {
                        label: '手机号',
                        props: 'phone',
                        value: '13735689044'
                    }
                ]
             * 
             * 
             * 
             */

            // this.data = data

            // 假数据
            this.data = [
                {
                    label: '姓名',
                    props: 'name',
                    value: '林东东'
                },
                {
                    label: '手机号',
                    props: 'phone',
                    value: '13735689044'
                }
            ]
            this.data = data

            this.popupShow = true
        },

 src/styles/media/index.scss

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

    }

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

 src/views/intelligentSearch/components/searchDetailDialog.vue

File was deleted

 src/views/intelligentSearch/index.vue

@@ -46,23 +46,22 @@
                </div>
            </div>
        </div>
        <searchDetailDialog ref="searchDetailDialog"></searchDetailDialog>

        <detailsPopup ref="detailsPopup" :popupTile="popupTile"></detailsPopup>
    </div>
</template>

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

let loading = null

export default {
    inject: ['userInfo'],

    components: { searchDetailDialog },

    data () {
        return {
            popupTile: '详情信息',
            searchText: '',
            realEmptyText: "",
            currentTableHeight: 0,
@@ -124,7 +123,37 @@
    methods: {
        // 点击详情
        goDetail (row) {
            this.$refs.searchDetailDialog.showSearchDetail(row)
            let data = [
                {
                    label: '名字',
                    value: row.name
                },
                {
                    label: '手机号',
                    value: row.tel
                },
                {
                    label: '地址',
                    value: row.address
                },
                {
                    label: '身份证号',
                    value: '362121199212246538'
                },
                {
                    label: '地址',
                    value: '江西省上饶市'
                },
                {
                    label: '性别',
                    value: '男'
                },
                {
                    label: '所属辖区',
                    value: '茅家岭派出所'
                }
            ]
            this.$refs.detailsPopup.initOpen(data)
        },

        // 点击定位

 src/views/scanOrCode/components/scanDetailDialog.vue

File was deleted

 src/views/scanOrCode/index.vue

@@ -56,23 +56,21 @@
                </div>
            </div>
        </div>
        <scanDetailDialog ref="scanDetailDialog"></scanDetailDialog>
        <detailsPopup ref="detailsPopup" :popupTile="popupTile"></detailsPopup>
    </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 {
            popupTile: '详情信息',
            searchText: '',
            realEmptyText: "",
            currentTableHeight: 0,
@@ -159,7 +157,41 @@
    methods: {
        // 点击详情
        goDetail (row) {
            this.$refs.scanDetailDialog.showScanDetail(row)
            let data = [
                {
                    label: '名字',
                    value: row.name
                },
                {
                    label: '手机号',
                    value: row.tel
                },
                {
                    label: '地址',
                    value: row.address
                },
                {
                    label: '身份证号',
                    value: '362121199212246538'
                },
                {
                    label: '地址',
                    value: '江西省上饶市'
                },
                {
                    label: '性别',
                    value: '男'
                },
                {
                    label: '所属辖区',
                    value: '茅家岭派出所'
                },
                {
                    label: '资源类型',
                    value: '业务租客登记'
                }
            ]
            this.$refs.detailsPopup.initOpen(data)
        },

        // 点击定位