居民监管样式调整

shuishen

2024-01-24 d16d10d94fddff86bdfd87113e7fd2cebe8b7cd7

 src/views/userHouse/houseList.vue

@@ -8,36 +8,39 @@
                    @search-reset="searchReset" @selection-change="selectionChange" @current-change="currentChange"
                    @size-change="sizeChange" @refresh-change="refreshChange" @on-load="onLoad">
                    <template slot="menuLeft">
                        <el-button type="danger" size="small" plain icon="el-icon-delete" v-if="permission.user_delete"
                        <el-button type="danger" size="small" plain icon="el-icon-delete" v-if="permission.house_del"
                            @click="handleDelete">删 除
                        </el-button>
                        <el-button type="success" size="small" plain v-if="userInfo.role_name.includes('admin')"
                        <!-- <el-button type="success" size="small" plain v-if="userInfo.role_name.includes('admin')"
                            icon="el-icon-upload2" @click="handleImport">导入
                        </el-button>
                        <el-button type="warning" size="small" plain v-if="userInfo.role_name.includes('admin')"
                            icon="el-icon-download" @click="handleExport">导出
                        </el-button>
                        </el-button> -->
                        <!-- <el-button type="success" size="small" plain v-if="permission.house_import" icon="el-icon-upload2"
                            @click="handleImport">导入
                        </el-button> -->
                        <!-- <el-button type="warning" size="small" plain v-if="permission.house_export" icon="el-icon-download"
                            @click="handleExport">导出
                        </el-button> -->
                    </template>
                    <template slot-scope="scope" slot="menu">
                        <el-button type="text" icon="el-icon-circle-plus-outline" size="small"
                            v-if="permission.househould_manager" @click="handleHouseholdManager(scope.row)">住户管理
                    <template slot-scope="{row}" slot="location">
                        <span v-text="showLocation(row.location)"></span>
                    </template>

                    <template slot-scope="{row, size}" slot="menu">
                        <el-button :size="size" type="text" icon="el-icon-circle-plus-outline"
                            v-if="permission.house_manager" @click="handleHouseholdManager(row)">住户管理
                        </el-button>
                        <el-button type="text" icon="el-icon-circle-plus-outline" size="small"
                            v-if="permission.househould_manager" @click="manageLabel(scope.row)">标签
                        <el-button :size="size" type="text" icon="el-icon-circle-plus-outline" v-if="permission.house_tag"
                            @click="manageLabel(row)">标签
                        </el-button>
                    </template>

                    <template slot-scope="{row}" slot="tenantName">
                        <el-tag>{{ row.tenantName }}</el-tag>
                    </template>
                    <template slot-scope="{row}" slot="roleName">
                        <el-tag>{{ row.roleName }}</el-tag>
                    </template>
                    <template slot-scope="{row}" slot="deptName">
                        <el-tag>{{ row.deptName }}</el-tag>
                    </template>
                    <template slot-scope="{row}" slot="userTypeName">
                        <el-tag>{{ row.userTypeName }}</el-tag>
                    <template slot-scope="{row, size}" slot="phone">
                        <el-button :size="size" type="text" @click="showStringDispose(row, 'phoneflag')">
                            {{ textDispose(row, 'phoneflag', 'phone') }}
                        </el-button>
                    </template>

                    <template slot-scope="{row}" slot="userHouseLabelVOList">
@@ -51,15 +54,15 @@
                    </el-tree>

                    <span slot="footer" class="dialog-footer">
                        <el-button @click="roleBox = false">取 消</el-button>
                        <el-button type="primary" @click="submitRole">确 定</el-button>
                        <el-button size="small" @click="roleBox = false">取 消</el-button>
                        <el-button size="small" type="primary" @click="submitRole">确 定</el-button>
                    </span>
                </el-dialog>

                <el-dialog title="标签管理" append-to-body :visible.sync="labelFlag" center width="600px">
                    <div id="" class="grid-container2">
                        <div class="grid-item" :style="{ backgroundColor: item.color }" v-for="(item, index) in labelData "
                            @click="changLabel(item)">
                        <div class="grid-item" v-for="(item, index) in labelData" :key="index" @click="changLabel(item)">
                            {{ item.color }}
                            {{ item.name }}
                        </div>
                    </div>
@@ -74,8 +77,8 @@
                    <avue-form :option="labelOption" v-model="labelForm" :submit="onsubmit">
                    </avue-form>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="editLabelFlge = false">取 消</el-button>
                        <el-button type="primary" @click="onsubmit">确 定</el-button>
                        <el-button size="small" @click="editLabelFlge = false">取 消</el-button>
                        <el-button size="small" type="primary" @click="onsubmit">确 定</el-button>
                    </span>
                </el-dialog>

@@ -88,6 +91,7 @@
                        </template>
                    </avue-form>
                </el-dialog>

                <el-dialog title="住户管理" append-to-body :visible.sync="householdManagerVisible" width="70%" height="60%">
                    <householdManager ref="householdManager" />
                </el-dialog>
@@ -95,8 +99,10 @@
        </el-col>
    </el-row>
</template>

 
<script>
import { setLabelColor } from '@/util/util'

import {
    getList,
    remove,
@@ -130,7 +136,6 @@
} from "@/util/date"
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
import func from "@/util/func"
import householdManager from "./components/householdManager"
import Qs from "qs"
export default {
@@ -138,6 +143,19 @@
        householdManager
    },
    data () {

        //手机号格式校验
        let validatorPhone = function (rule, value, callback) {
            if (value) {
                if (!/^1[3456789]\d{9}$/.test(value)) {
                    callback(new Error('手机号格式有误！'))
                } else {
                    callback()
                }
            }
            callback()
        }

        return {
            labelData: [],
            labelForm: {},
@@ -154,16 +172,16 @@
                    row: true,
                    dicData: [{
                        label: '撤销',
                        value: '#EBEDF0'
                        value: '#999'
                    }, {
                        label: '绿',
                        value: '#30D17C'
                        value: 'green'
                    }, {
                        label: '黄',
                        value: '#FFB42B'
                        value: 'yellow'
                    }, {
                        label: '红',
                        value: '#EA1F1F'
                        value: 'red'
                    }],
                    rules: [{
                        required: true,
@@ -192,34 +210,22 @@
                total: 0
            },
            option: {
                labelWidth: 120,
                searchLabelWidth: 96,
                searchShow: true,
                searchMenuSpan: 3,
                menuWidth: 350,

                height: 'auto',
                calcHeight: 80,
                tip: false,
                searchShow: true,
                searchMenuSpan: 6,
                border: true,
                index: true,
                selection: true,
                viewBtn: true,
                dialogType: 'drawer',
                dialogClickModal: false,
                menuWidth: 340,
                column: [
                    {
                        width: 96,
                        label: "所属街道",
                        prop: "townStreetName",
                    },
                    {
                        width: 160,
                        label: "所属社区",
                        prop: "neiName",
                    },
                    {
                        width: 96,
                        label: "所属网格",
                        prop: "gridName",
                    },
                    {
                        label: "房屋编号",
                        prop: "houseCode",
@@ -228,45 +234,193 @@
                        display: false
                    },
                    {
                        label: "地址",
                        // hide: true, 
                        width: 220,
                        overHidden: true,
                        label: '地址',
                        parent: false,
                        prop: "address",
                        width: 180,
                        display: false
                    },
                    {
                        width: 132,
                        label: "小区",
                        prop: "districtName",
                        display: false,
                        searchLabelWidth: 66,
                        searchSpan: 4,
                        search: true,
                        rules: [{
                            required: true,
                            message: "请选择小区",
                            trigger: "blur",
                        },],
                    },
                    {
                        label: "手机",
                        prop: "phone",
                        overHidden: true,
                        slot: true,
                        label: "地址",
                        prop: "location",
                        type: 'map',
                        disabled: false,
                        dataType: "string",
                        searchLabelWidth: 66,
                        hide: true,
                        value: [117.966460, 28.431002, ""],
                        rules: [
                            {
                                required: true,
                                message: "请选择巡查地址",
                                trigger: "blur",
                            },
                        ],
                    },

                    {
                        hide: true,
                        parent: false,
                        label: "小区名称",
                        prop: "districtCode",
                        type: 'tree',
                        dicUrl: `/api/blade-district/district/getDistrictTree`,
                        props: {
                            label: "name",
                            value: "id"
                        },
                        defaultExpandedKeys: ["361102003"],
                        span: 12,
                        width: 220,
                        overHidden: true,
                    },

                    {
                        width: 220,
                        overHidden: true,
                        label: '小区名称',
                        parent: false,
                        prop: "districtName",
                        searchSpan: 4,
                        display: false,
                        search: true,
                    },

                    {
                        width: 110,
                        label: "所属街道",
                        addDisplay: false,
                        editDisplay: false,
                        viewDisplay: false,
                        prop: "townStreetName",
                        search: true,
                        searchSpan: 4
                    },

                    {
                        width: 156,
                        overHidden: true,
                        label: "所属社区",
                        addDisplay: false,
                        editDisplay: false,
                        viewDisplay: false,
                        prop: "neiName",
                        search: true,
                        searchSpan: 4,
                        rules: [{
                            required: true,
                            message: "请输入绑定手机",
                            message: "请选择所属社区",
                            trigger: "blur",
                        },],
                        }],
                    },

                    {
                        hide: true,
                        parent: false,
                        label: "所属社区",
                        prop: "neiCode",
                        search: false,
                        type: "tree",
                        dicUrl: "/api/blade-system/region/tree",
                        props: {
                            label: "name",
                            value: "id",
                        },
                        cascader: ["gridCode"],
                        rules: [
                            {
                                required: true,
                                message: "请选择所属社区",
                                trigger: "blur",
                            },
                        ],
                    },

                    {
                        width: 110,
                        overHidden: true,
                        label: "所属网格",
                        addDisplay: false,
                        editDisplay: false,
                        viewDisplay: false,
                        prop: "gridName",
                        rules: [{
                            required: true,
                            message: "请选择所属网格",
                            trigger: "blur",
                        }],
                    },

                    {
                        hide: true,
                        label: "所属网格",
                        prop: "gridCode",
                        type: "tree",
                        cell: true,
                        props: {
                            label: "gridName",
                            value: "gridCode",
                        },
                        dicUrl:
                            "/api/blade-grid/grid/getGridList?communityCode={{neiCode}}",
                        rules: [
                            {
                                required: true,
                                message: "请选择所属网格",
                                trigger: "blur",
                            },
                        ],
                    },

                    {
                        label: "房屋照片",
                        prop: "imageUrls",
                        width: 110,
                        type: "upload",
                        listType: "picture-card",
                        dataType: "string",
                        multiple: true,
                        action: "/api/blade-resource/oss/endpoint/put-file",
                        propsHttp: {
                            res: "data",
                            name: 'name',
                            url: "link",
                        },
                        span: 24,
                    },


                    {
                        width: 120,
                        label: "电话",
                        prop: "phone",
                        slot: true,
                        rules: [
                            {
                                validator: validatorPhone,
                                trigger: 'blur'
                            }
                        ],
                    },

                    {
                        label: "幢",
                        prop: "building",
                        hide: true
                    },
                    {
                        label: "单元",
                        prop: "unit",
                        hide: true
                    },
                    {
                        label: "室",
                        prop: "room",
                        hide: true
                    },
                    {
                        label: "楼层",
@@ -297,6 +451,7 @@
                    },
                    {
                        width: 210,
                        overHidden: true,
                        label: "标签",
                        prop: "userHouseLabelVOList",
                        display: false
@@ -354,15 +509,56 @@
            }
        }
    },
    watch: {},
    watch: {
        'form.source': {
            handler (newData) {

                let locationColumn = this.findObject(
                    this.option.column,
                    'location'
                )

                if (newData == 1) {
                    locationColumn.disabled = true
                } else {
                    locationColumn.disabled = false
                }
            },
        },
    },
    computed: {
        ...mapGetters(["userInfo", "permission"]),
        permissionList () {
            return {
                addBtn: this.vaildData(this.permission.house_add, true),
                viewBtn: this.vaildData(this.permission.house_view, true),
                delBtn: this.vaildData(this.permission.house_delete, true),
                delBtn: this.vaildData(this.permission.house_del, true),
                editBtn: this.vaildData(this.permission.house_edit, true)
            }
        },

        textDispose () {
            return (row, flag, type) => {
                if (row[flag] || row[type] == null) {
                    return row[type]
                } else {
                    if (type == 'idCard') {
                        return row[type].replace(/^(.{6})(?:\d+)(.{4})$/, "$1******$2")
                    } else {
                        return row[type].replace(/^(.{3})(?:\d+)(.{4})$/, "$1****$2")
                    }
                }
            }
        },
        showLocation () {
            return (data) => {
                if (data != null && data.indexOf(',') != -1) {
                    data = data.split(',')

                    return data[2]
                } else {
                    return data || ''
                }
            }
        },

@@ -370,10 +566,25 @@
            return (list) => {
                return list.map(item => item.labelName).join(',')
            }
        },

        getColor () {
            return (data) => {
                return setLabelColor(data)
            }
        }
    },
    mounted () { },
    methods: {
        locationDispose (data) {
            data = data.split(',')

            return {
                lng: data[0],
                lat: data[1],
                address: data[2]
            }
        },

        onsubmit () {
            if (this.labelForm.color === '#EBEDF0') {
@@ -414,6 +625,7 @@
            this.labelForm.remark = item.remark
        },
        manageLabel (item) {
            this.loading = true
            this.currentRow = item
            this.labelFlag = true
            let params = {
@@ -422,7 +634,6 @@
            // 查询标签
            getLabelList(Object.assign(params)).then(res => {
                const data = res.data.data
                this.loading = false
                // 查询详情
                getDetatils({
                    houseCode: item.houseCode
@@ -443,6 +654,7 @@
                        })
                    }
                    this.labelData = data
                    this.loading = false
                })
            })
        },
@@ -454,7 +666,18 @@
            })
        },
        rowSave (row, done, loading) {
            add(row).then(() => {
            if (row.imageUrls.length > 0) {
                var urls = []
                var split = row.imageUrls.split(",")
                split.forEach(url => {
                    var names = url.split("jczz/")
                    urls.push(names[1])
                })
                row.imageUrls = urls.join(",")
            }

            add({ ...row, ...this.locationDispose(row.location) }
            ).then(() => {
                this.initFlag = false
                this.onLoad(this.page)
                this.$message({
@@ -468,7 +691,17 @@
            })
        },
        rowUpdate (row, index, done, loading) {
            update(row).then(() => {
            if (row.imageUrls.length > 0) {
                var urls = []
                var split = row.imageUrls.split(",")
                split.forEach(url => {
                    var names = url.split("jczz/")
                    urls.push(names[1])
                })
                row.imageUrls = urls.join(",")
            }

            update({ ...row, ...this.locationDispose(row.location) }).then(() => {
                this.initFlag = false
                this.onLoad(this.page)
                this.$message({
@@ -577,6 +810,19 @@
                    id: this.form.id
                }).then(res => {
                    this.form = res.data.data

                    this.form.location = [this.form.lng, this.form.lat, this.form.address].join(',')

                    if (this.form.imageUrls) {
                        if (this.form.imageUrls.length > 0) {
                            var urls = []
                            var names = this.form.imageUrls.split(",")
                            names.forEach(name => {
                                urls.push(website.minioUrl + name)
                            })
                            this.form.imageUrls = urls.join(",")
                        }
                    }
                })
            }
            this.initFlag = true
@@ -593,18 +839,41 @@
        },
        onLoad (page, params = {}) {
            this.loading = true

            getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
                const data = res.data.data
                const data = {
                    ...res.data.data,
                    records: res.data.data.records.map(item => {
                        if (item.imageUrls) {
                            if (item.imageUrls.length > 0) {
                                var urls = []
                                var names = item.imageUrls.split(",")
                                names.forEach(name => {
                                    urls.push(website.minioUrl + name)
                                })
                                item.imageUrls = urls.join(",")
                            }
                        }

                        return {
                            ...item,
                            'phoneflag': false,
                        }
                    })
                }
                this.page.total = data.total
                this.data = data.records
                this.loading = false
                this.selectionClear()
            })
        },
        showStringDispose (row, type) {
            row[type] = !row[type]
        }
    }
}
</script>

 
<style>
.box {
    height: 800px;