所有页面搜索栏左侧对齐

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>

@@ -102,8 +99,10 @@
        </el-col>
    </el-row>
</template>

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

import {
    getList,
    remove,
@@ -137,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 {
@@ -174,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,
@@ -236,11 +234,35 @@
                        display: false
                    },
                    {
                        width: 156,
                        // hide: true, 
                        width: 220,
                        overHidden: true,
                        label: "地址",
                        label: '地址',
                        parent: false,
                        prop: "address",
                        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",
                            },
                        ],
                    },

                    {
@@ -311,7 +333,7 @@
                            label: "name",
                            value: "id",
                        },
                        cascader: ["gridId"],
                        cascader: ["gridCode"],
                        rules: [
                            {
                                required: true,
@@ -339,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}}",
@@ -381,7 +403,6 @@
                        prop: "phone",
                        slot: true,
                        rules: [

                            {
                                validator: validatorPhone,
                                trigger: 'blur'
@@ -488,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)
            }
        },
@@ -513,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') {
@@ -613,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({
@@ -637,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({
@@ -747,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 = []
@@ -807,7 +873,7 @@
    }
}
</script>

 
<style>
.box {
    height: 800px;