所有页面搜索栏左侧对齐

guanqb

2024-01-29 bf45ce8559383eb2c940affc6296c4c156ecf5e2

 src/views/userHouse/houseList.vue

@@ -8,40 +8,37 @@
                    @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>

                    <template slot-scope="{row}" slot="phone">
                        <el-button type="text" @click="showStringDispose(row, 'phoneflag')">
                    <template slot-scope="{row, size}" slot="phone">
                        <el-button :size="size" type="text" @click="showStringDispose(row, 'phoneflag')">
                            {{ textDispose(row, 'phoneflag', 'phone') }}
                        </el-button>
                    </template>
@@ -57,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"
                            :key="index" @click="changLabel(item)">
                        <div class="grid-item" v-for="(item, index) in labelData" :key="index" @click="changLabel(item)">
                            {{ item.color }}
                            {{ item.name }}
                        </div>
                    </div>
@@ -80,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>

@@ -94,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>
@@ -101,8 +99,10 @@
        </el-col>
    </el-row>
</template>

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

import {
    getList,
    remove,
@@ -136,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 {
@@ -144,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: {},
@@ -160,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,
@@ -198,18 +210,21 @@
                total: 0
            },
            option: {
                labelWidth: 120,
                searchLabelWidth: 96,
                searchShow: true,
                searchMenuSpan: 3,
                menuWidth: 350,

                height: 'auto',
                calcHeight: 80,
                tip: false,
                searchShow: true,
                searchMenuSpan: 3,
                border: true,
                index: true,
                selection: true,
                viewBtn: true,
                dialogType: 'drawer',
                dialogClickModal: false,
                menuWidth: 340,
                column: [
                    {
                        label: "房屋编号",
@@ -219,18 +234,42 @@
                        display: false
                    },
                    {
                        label: "地址",
                        // hide: true, 
                        width: 220,
                        overHidden: true,
                        label: '地址',
                        parent: false,
                        prop: "address",
                        width: 180,
                        display: false
                        display: false,
                        searchLabelWidth: 46,
                        searchSpan: 4,
                        search: true,
                    },
                    {
                        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",
                        searchSpan: 4,
                        search: true,
                        type: 'tree',
                        dicUrl: `/api/blade-district/district/getDistrictTree`,
                        props: {
@@ -240,37 +279,38 @@
                        defaultExpandedKeys: ["361102003"],
                        span: 12,
                        width: 220,
                        hide:true,
                        overHidden: true,
                    },

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

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

                    {
                        width: 156,
                        overHidden: true,
                        label: "所属社区",
                        addDisplay: false,
                        editDisplay: false,
                        viewDisplay: false,
                        width: 160,
                        label: "所属社区",
                        prop: "neiName",
                        search: true,
                        searchSpan: 4,
@@ -287,14 +327,13 @@
                        label: "所属社区",
                        prop: "neiCode",
                        search: false,
                        width: 150,
                        type: "tree",
                        dicUrl: "/api/blade-system/region/tree",
                        props: {
                            label: "name",
                            value: "id",
                        },
                        cascader: ["gridId"],
                        cascader: ["gridCode"],
                        rules: [
                            {
                                required: true,
@@ -305,11 +344,12 @@
                    },

                    {
                        width: 110,
                        overHidden: true,
                        label: "所属网格",
                        addDisplay: false,
                        editDisplay: false,
                        viewDisplay: false,
                        width: 96,
                        label: "所属网格",
                        prop: "gridName",
                        rules: [{
                            required: true,
@@ -321,12 +361,12 @@
                    {
                        hide: true,
                        label: "所属网格",
                        prop: "gridId",
                        prop: "gridCode",
                        type: "tree",
                        cell: true,
                        props: {
                            label: "gridName",
                            value: "id",
                            value: "gridCode",
                        },
                        dicUrl:
                            "/api/blade-grid/grid/getGridList?communityCode={{neiCode}}",
@@ -342,7 +382,7 @@
                    {
                        label: "房屋照片",
                        prop: "imageUrls",
                        width: 80,
                        width: 110,
                        type: "upload",
                        listType: "picture-card",
                        dataType: "string",
@@ -356,12 +396,20 @@
                        span: 24,
                    },


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

                    {
                        label: "幢",
                        prop: "building",
@@ -403,6 +451,7 @@
                    },
                    {
                        width: 210,
                        overHidden: true,
                        label: "标签",
                        prop: "userHouseLabelVOList",
                        display: false
@@ -460,14 +509,30 @@
            }
        }
    },
    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)
            }
        },
@@ -485,15 +550,41 @@
                }
            }
        },
        showLocation () {
            return (data) => {
                if (data != null && data.indexOf(',') != -1) {
                    data = data.split(',')

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

        labelDispose () {
            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') {
@@ -585,7 +676,8 @@
                row.imageUrls = urls.join(",")
            }

            add(row).then(() => {
            add({ ...row, ...this.locationDispose(row.location) }
            ).then(() => {
                this.initFlag = false
                this.onLoad(this.page)
                this.$message({
@@ -609,7 +701,7 @@
                row.imageUrls = urls.join(",")
            }

            update(row).then(() => {
            update({ ...row, ...this.locationDispose(row.location) }).then(() => {
                this.initFlag = false
                this.onLoad(this.page)
                this.$message({
@@ -719,6 +811,8 @@
                }).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 = []
@@ -745,6 +839,7 @@
        },
        onLoad (page, params = {}) {
            this.loading = true

            getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
                const data = {
                    ...res.data.data,
@@ -778,7 +873,7 @@
    }
}
</script>

 
<style>
.box {
    height: 800px;