guanqb
2024-02-22 ab701df859cd79ae036f8cc86268137d2c8da8ee
src/views/userHouse/houseHoldList.vue
@@ -1,118 +1,102 @@
<template>
    <el-row>
        <el-col :span="24">
            <basic-container>
                <avue-crud :option="option" :search.sync="search" :table-loading="loading" :data="data" ref="crud"
                    v-model="form" :permission="permissionList" @row-del="rowDel" @row-update="rowUpdate"
                    @row-save="rowSave" :before-open="beforeOpen" :page.sync="page" @search-change="searchChange"
                    @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.household_delete"
    <!-- <el-row>
        <el-col :span="24"> -->
    <basic-container>
        <avue-crud :option="option" :search.sync="search" :table-loading="loading" :data="data" ref="crud" v-model="form"
            :permission="permissionList" @row-del="rowDel" @row-update="rowUpdate" @row-save="rowSave"
            :before-open="beforeOpen" :page.sync="page" @search-change="searchChange" @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.household_delete"
                            @click="handleDelete">删 除
                        </el-button>
                        <el-button type="success" size="small" plain v-if="this.permission.household_import"
                        <el-button type="success" size="small" plain v-if="permission.household_import"
                            icon="el-icon-upload2" @click="handleImport">导入
                        </el-button>
                        <el-button type="warning" size="small" plain v-if="this.permission.household_export"
                        <el-button type="warning" size="small" plain v-if="permission.household_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="manageLabel(scope.row)">标签
                        </el-button>
                    </template>
                    <template slot-scope="{row}" slot="phoneNumber">
                        <el-button type="text" @click="showStringDispose(row, 'phoneNumberflag')">
                            {{ textDispose(row, 'phoneNumberflag', 'phoneNumber') }}
                        </el-button>
                    </template>
                    <template slot-scope="{row}" slot="idCard">
                        <el-button type="text" @click="showStringDispose(row, 'idCardflag')"
                            v-text="textDispose(row, 'idCardflag', 'idCard')"></el-button>
                    </template>
                        </el-button> -->
            <!-- </template> -->
                    <template slot-scope="{row}" slot="householdLabelList">
                        {{ labelDispose(row.householdLabelList) }}
                    </template>
            <template slot-scope="{row, size}" slot="menu">
                <el-button :size="size" type="text" icon="el-icon-circle-plus-outline" v-if="permission.household_manager"
                    @click="manageLabel(row)">标签
                </el-button>
            </template>
            <template slot-scope="{row, size}" slot="phoneNumber">
                <el-button :size="size" type="text" @click="showStringDispose(row, 'phoneNumberflag')">
                    {{ textDispose(row, 'phoneNumberflag', 'phoneNumber') }}
                </el-button>
            </template>
            <template slot-scope="{row, size}" slot="idCard">
                <el-button :size="size" type="text" @click="showStringDispose(row, 'idCardflag')"
                    v-text="textDispose(row, 'idCardflag', 'idCard')"></el-button>
            </template>
            <template slot-scope="{row, size}" slot="householdLabelList">
                {{ labelDispose(row.householdLabelList) }}
            </template>
        </avue-crud>
        <el-dialog title="用户角色配置" append-to-body :visible.sync="roleBox" width="345px" center>
                    <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>
            <el-tree :data="roleGrantList" show-checkbox check-strictly default-expand-all node-key="id" ref="treeRole"
                :default-checked-keys="roleTreeObj" :props="props">
            </el-tree>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="roleBox = false">取 消</el-button>
                <el-button size="small" type="primary" @click="submitRole">确 定</el-button>
            </span>
        </el-dialog>
                </avue-crud>
                <el-dialog title="用户角色配置" append-to-body :visible.sync="roleBox" width="345px" center>
                    <el-tree :data="roleGrantList" show-checkbox check-strictly default-expand-all node-key="id"
                        ref="treeRole" :default-checked-keys="roleTreeObj" :props="props">
                    </el-tree>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="roleBox = false">取 消</el-button>
                        <el-button type="primary" @click="submitRole">确 定</el-button>
                    </span>
                </el-dialog>
                <el-dialog title="标签管理" append-to-body :visible.sync="labelFlag" center width="600px">
                    <div v-for="(item, index) in labelData" :key="index">
                        <el-row>
                            <el-col :span="24">
                                <div>
                                    <el-divider content-position="left">{{ item.name }}</el-divider>
                                </div>
                            </el-col>
                        </el-row>
                        <div class="grid-container2" v-if="item.children">
                            <div class="grid-item" :style="{ backgroundColor: item2.color }"
                                v-for="(item2, index2) in item.children" @click="changLabel(item2)" :key="index2">
                                {{ item2.name }}
                            </div>
        <el-dialog title="标签管理" append-to-body :visible.sync="labelFlag" center width="600px">
            <div v-for="(item, index) in labelData" :key="index">
                <el-row>
                    <el-col :span="24">
                        <div>
                            <el-divider content-position="left">{{ item.name }}</el-divider>
                        </div>
                    </el-col>
                </el-row>
                <div class="grid-container2" v-if="item.children">
                    <div class="grid-item" :style="{ backgroundColor: getColor(item2.color) }"
                        v-for="(item2, index2) in item.children" @click="changLabel(item2)" :key="index2">
                        {{ item2.name }}
                    </div>
                </div>
            </div>
                    <!-- <span slot="footer" class="dialog-footer">
            <!-- <span slot="footer" class="dialog-footer">
            <el-button @click="labelFlag = false">取 消</el-button>
            <el-button type="primary" @click="submitRole">确 定</el-button>
          </span> -->
                </el-dialog>
        </el-dialog>
                <el-dialog :title="'编辑标签   ' + currentLabel.name" append-to-body :visible.sync="editLabelFlge"
                    width="655px">
                    <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>
                    </span>
                </el-dialog>
        <el-dialog :title="'编辑标签   ' + currentLabel.name" append-to-body :visible.sync="editLabelFlge" width="655px">
            <avue-form :option="labelOption" v-model="labelForm" :submit="onsubmit">
            </avue-form>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="editLabelFlge = false">取 消</el-button>
                <el-button size="small" type="primary" @click="onsubmit">确 定</el-button>
            </span>
        </el-dialog>
                <el-dialog title="用户数据导入" append-to-body :visible.sync="excelBox" width="555px">
                    <avue-form :option="excelOption" v-model="excelForm" :upload-after="uploadAfter">
                        <template slot="excelTemplate">
                            <el-button type="primary" @click="handleTemplate">
                                点击下载<i class="el-icon-download el-icon--right"></i>
                            </el-button>
                        </template>
                    </avue-form>
                </el-dialog>
            </basic-container>
        </el-col>
    </el-row>
        <el-dialog title="用户数据导入" append-to-body :visible.sync="excelBox" width="555px">
            <avue-form :option="excelOption" v-model="excelForm" :upload-after="uploadAfter">
                <template slot="excelTemplate">
                    <el-button size="small" type="primary" @click="handleTemplate">
                        点击下载<i class="el-icon-download el-icon--right"></i>
                    </el-button>
                </template>
            </avue-form>
        </el-dialog>
    </basic-container>
    <!-- </el-col>
    </el-row> -->
</template>
<script>
import { setLabelColor } from '@/util/util'
import {
    getList,
    remove,
@@ -138,7 +122,8 @@
    getToken
} from '@/util/auth'
import {
    downloadXls
    downloadXls,
    findParentOrCur,
} from "@/util/util"
import {
    dateNow
@@ -146,10 +131,69 @@
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
import Qs from "qs"
import { lintOnSave } from "../../../vue.config"
import {
    lintOnSave
} from "../../../vue.config"
export default {
    data () {
        let isCardId = function (rule, value, callback) {
            // 15位和18位身份证号码的正则表达式
            var regIdCard =
                /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/
            // 如果通过该验证,说明身份证格式正确,但准确性还需计算
            if (regIdCard.test(value) || value == '') {
                if (value.length == 18) {
                    var idCardWi = new Array(7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10,
                        5, 8, 4, 2) // 将前17位加权因子保存在数组里
                    var idCardY = new Array(1, 0, 10, 9, 8, 7, 6, 5, 4, 3, 2) // 这是除以11后,可能产生的11位余数、验证码,也保存成数组
                    var idCardWiSum = 0 // 用来保存前17位各自乖以加权因子后的总和
                    for (var i = 0; i < 17; i++) {
                        idCardWiSum += value.substring(i, i + 1) * idCardWi[i]
                    }
                    var idCardMod = idCardWiSum % 11 // 计算出校验码所在数组的位置
                    var idCardLast = value.substring(17) // 得到最后一位身份证号码
                    // 如果等于2,则说明校验码是10,身份证号码最后一位应该是X
                    if (idCardMod == 2) {
                        if (idCardLast == "X" || idCardLast == "x") {
                            callback()
                        } else {
                            callback(new Error("身份证号格式有误!"))
                        }
                    } else {
                        // 用计算出的验证码与最后一位身份证号码匹配,如果一致,说明通过,否则是无效的身份证号码
                        if (idCardLast == idCardY[idCardMod]) {
                            callback()
                        } else {
                            callback(new Error("身份证号格式有误!"))
                        }
                    }
                } else {
                    callback()
                }
            } else {
                //alert("身份证格式不正确!");
                callback(new Error("身份证号格式有误!"))
            }
            callback()
        }
        //手机号格式校验
        let validatorPhone = function (rule, value, callback) {
            if (value) {
                if (!/^1[3456789]\d{9}$/.test(value)) {
                    callback(new Error('手机号格式有误!'))
                } else {
                    callback()
                }
            }
            callback()
        }
        return {
            labelData: [],
            form: {},
@@ -166,11 +210,15 @@
                total: 0
            },
            option: {
                labelWidth: 144,
                searchLabelWidth: 96,
                searchShow: true,
                searchMenuSpan: 3,
                menuWidth: 280,
                height: 'auto',
                calcHeight: 80,
                tip: false,
                searchShow: true,
                searchMenuSpan: 6,
                border: true,
                index: true,
                selection: true,
@@ -178,97 +226,462 @@
                addBtn: true,
                dialogType: 'drawer',
                dialogClickModal: false,
                menuWidth: 280,
                menuFixed: 'right',
                column: [
                    {
                        width: 96,
                        label: "所属街道",
                        prop: "townStreetName",
                column: [{
                    label: "与业主关系",
                    prop: "relationship",
                    type: "select",
                    dicUrl: "/api/blade-system/dict-biz/dictionary?code=roleRelation",
                    dataType: "number",
                    hide: true,
                    props: {
                        label: "dictValue",
                        value: "dictKey",
                    },
                    {
                        width: 160,
                        label: "所属社区",
                        prop: "neiName",
                    },
                    {
                        width: 96,
                        label: "所属网格",
                        prop: "gridName",
                    },
                    {
                        width: 96,
                        label: "姓名",
                        prop: "name",
                        search: true,
                        searchSpan: 4,
                    },
                    {
                        width: 106,
                        label: "电话",
                        prop: "phoneNumber",
                        search: true,
                        searchSpan: 4,
                        slot: true,
                    },
                    {
                        width: 160,
                        label: "身份证号",
                        prop: "idCard",
                        search: true,
                        searchSpan: 4,
                        slot: true,
                    },
                    {
                        label: "性别",
                        prop: "gender",
                        type: "select",
                        dicData: [{
                            label: "男",
                            value: 1
                        },
                        {
                            label: "女",
                            value: 0
                        },
                        {
                            label: "未知",
                            value: 1
                        }
                        ],
                    },
                    {
                        label: "关系",
                        prop: "relationship",
                        type: "select",
                        dicUrl: "/api/blade-system/dict-biz/dictionary?code=roleRelation",
                        dataType: "number",
                        props: {
                            label: "dictValue",
                            value: "dictKey",
                        },
                    },
                    {
                        width: 132,
                        label: "小区",
                        prop: "aoiName",
                        search: true,
                        searchSpan: 4,
                    },
                    rules: [{
                        required: true,
                        message: "请选择与业主关系",
                        trigger: "blur",
                    }],
                },
                    {
                        width: 132,
                        label: "地址",
                        prop: "address",
                        display: false
                    },
                {
                    width: 110,
                    label: "姓名",
                    prop: "name",
                    searchSpan: 3,
                    searchLabelWidth: 46,
                    search: true,
                    rules: [{
                        required: true,
                        message: "请输入姓名",
                        trigger: "blur",
                    }],
                },
                    {
                        width: 210,
                        label: "标签",
                        prop: "householdLabelList",
                        display: false
                {
                    hide: true,
                    label: "证件类型",
                    prop: "cardType",
                    type: "select",
                    dicUrl: "/api/blade-system/dict-biz/dictionary?code=cardType",
                    dataType: "number",
                    props: {
                        label: "dictValue",
                        value: "dictKey",
                    },
                },
                {
                    width: 160,
                    display: true,
                    label: "身份证号",
                    prop: "idCard",
                    search: true,
                    searchSpan: 4,
                    slot: true,
                    rules: [{
                        validator: isCardId,
                        trigger: 'blur'
                    }],
                },
                {
                    hide: true,
                    display: false,
                    width: 160,
                    label: "证件号码",
                    prop: "cardNo",
                },
                {
                    label: "出生日期",
                    prop: "birthday",
                    type: "date",
                    format: "yyyy-MM-dd",
                    valueFormat: "yyyy-MM-dd",
                    hide: true,
                },
                {
                    width: 60,
                    label: "性别",
                    prop: "gender",
                    type: "select",
                    dicData: [{
                        label: "男",
                        value: 1
                    },
                    {
                        label: "女",
                        value: 0
                    },
                    {
                        label: "未知",
                        value: "3"
                    }
                    ],
                },
                {
                    width: 120,
                    label: "手机号码",
                    prop: "phoneNumber",
                    search: true,
                    searchSpan: 4,
                    slot: true,
                    rules: [{
                        required: true,
                        message: "请输入手机号码",
                        trigger: "blur",
                    },
                    {
                        validator: validatorPhone,
                        trigger: 'blur'
                    }
                    ],
                },
                {
                    label: "居住情况",
                    prop: "residentialStatus",
                    type: "select",
                    hide: true,
                    dicUrl: "/api/blade-system/dict-biz/dictionary?code=residentialStatusType",
                    dataType: "number",
                    props: {
                        label: "dictValue",
                        value: "dictKey",
                    },
                },
                {
                    label: "其他联系方式",
                    prop: "otherContact",
                    hide: true,
                    rules: [{
                        validator: validatorPhone,
                        trigger: 'blur'
                    }],
                },
                {
                    label: "是否主要联系人",
                    prop: "isPrimaryContact",
                    type: "select",
                    dicUrl: "/api/blade-system/dict-biz/dictionary?code=primaryContactType",
                    dataType: "number",
                    hide: true,
                    props: {
                        label: "dictValue",
                        value: "dictKey",
                    },
                },
                // {
                // label: "关系",
                // prop: "roleType",
                // type: "select",
                // dicUrl: "/api/blade-system/dict-biz/dictionary?code=roleType",
                // dataType: "number",
                //     props: {
                //         label: "dictValue",
                //         value: "dictKey",
                //     },
                // },
                {
                    width: 220,
                    overHidden: true,
                    label: '小区名称',
                    prop: "aoiName",
                    search: true,
                    searchSpan: 4,
                    display: false
                },
                {
                    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
                },
                {
                    width: 110,
                    overHidden: true,
                    label: "所属网格",
                    addDisplay: false,
                    editDisplay: false,
                    viewDisplay: false,
                    prop: "gridName",
                },
                {
                    width: 156,
                    overHidden: true,
                    label: "地址",
                    prop: "address",
                    display: false
                },
                {
                    hide: true,
                    parent: false,
                    width: 160,
                    label: "籍贯地区",
                    prop: "nativePlaceAdcode",
                    type: "tree",
                    typeformat (item, label, value) {
                        return item.addressDetail
                    },
                    change: ({
                        value,
                        column,
                        item,
                        dic
                    }) => {
                        item.addressDetail = findParentOrCur(dic, item.id)
                    },
                    props: {
                        label: 'name',
                        value: 'id'
                    },
                    dicUrl: `/api/blade-system/region/getBaseTree`,
                },
                {
                    hide: true,
                    label: "户籍类型",
                    prop: "residentType",
                    type: "select",
                    dicUrl: "/api/blade-system/dict-biz/dictionary?code=residentType",
                    dataType: "number",
                    props: {
                        label: "dictValue",
                        value: "dictKey",
                    },
                },
                {
                    hide: true,
                    parent: false,
                    width: 160,
                    label: "户籍地区",
                    prop: "residentAdcode",
                    type: "tree",
                    typeformat (item, label, value) {
                        return item.addressDetail
                    },
                    change: ({
                        value,
                        column,
                        item,
                        dic
                    }) => {
                        item.addressDetail = findParentOrCur(dic, item.id)
                    },
                    props: {
                        label: 'name',
                        value: 'id'
                    },
                    dicUrl: `/api/blade-system/region/getBaseTree`,
                },
                {
                    label: "户籍地址",
                    prop: "hukouRegistration",
                    hide: true,
                },
                {
                    disabled: false,
                    label: "居住地区",
                    prop: "homeAdcode",
                    hide: true,
                    type: 'select',
                    props: {
                        label: 'name',
                        value: 'code'
                    },
                    dicUrl: `/api/blade-system/region/select?code=361102`,
                },
                {
                    disabled: false,
                    label: "现居住地",
                    prop: "currentAddress",
                    hide: true,
                },
                {
                    width: 210,
                    overHidden: true,
                    label: "标签",
                    prop: "householdLabelList",
                    display: false
                },
                {
                    label: "民族",
                    prop: "ethnicity",
                    type: "select",
                    hide: true,
                    dicUrl: "/api/blade-system/dict-biz/dictionary?code=nationType",
                    dataType: "number",
                    props: {
                        label: "dictValue",
                        value: "dictKey",
                    },
                },
                {
                    label: "学历",
                    prop: "education",
                    type: "select",
                    hide: true,
                    dicUrl: "/api/blade-system/dict-biz/dictionary?code=educationType",
                    dataType: "number",
                    props: {
                        label: "dictValue",
                        value: "dictKey",
                    },
                },
                {
                    hide: true,
                    width: 160,
                    label: "职业类别",
                    prop: "occupation"
                },
                {
                    label: "工作单位",
                    prop: "employer",
                    hide: true,
                },
                {
                    hide: true,
                    width: 160,
                    label: "工作单位地址",
                    prop: "cmpyRegAddr"
                },
                {
                    label: "工作状态",
                    prop: "workStatus",
                    type: "select",
                    hide: true,
                    dicUrl: "/api/blade-system/dict-biz/dictionary?code=workStatusType",
                    dataType: "number",
                    props: {
                        label: "dictValue",
                        value: "dictKey",
                    },
                },
                {
                    label: "婚姻状态",
                    prop: "maritalStatus",
                    type: "select",
                    hide: true,
                    dicUrl: "/api/blade-system/dict-biz/dictionary?code=marriageStatusType",
                    dataType: "number",
                    props: {
                        label: "dictValue",
                        value: "dictKey",
                    },
                },
                {
                    hide: true,
                    width: 160,
                    label: "宗教信仰",
                    prop: "religiousBelief",
                },
                {
                    hide: true,
                    label: "健康状态",
                    prop: "healthStatus",
                    type: "select",
                    dicUrl: "/api/blade-system/dict-biz/dictionary?code=healthStatus",
                    dataType: "number",
                    props: {
                        label: "dictValue",
                        value: "dictKey",
                    },
                },
                {
                    disabled: true,
                    hide: true,
                    width: 160,
                    label: "疾病名称",
                    prop: "diseaseName"
                },
                {
                    hide: true,
                    width: 160,
                    label: "外出去向",
                    prop: "goOutWhere"
                },
                {
                    hide: true,
                    width: 160,
                    label: "外出原因",
                    prop: "goOutReason"
                },
                {
                    hide: true,
                    label: "外出时间",
                    prop: "goOutTime",
                    type: "date",
                    format: "yyyy-MM-dd",
                    valueFormat: "yyyy-MM-dd",
                    width: 160,
                },
                {
                    hide: true,
                    width: 160,
                    label: "外出详址",
                    prop: "goOutAddr"
                },
                {
                    label: "车牌号",
                    prop: "cardNumber",
                    hide: true,
                },
                {
                    label: "备注",
                    prop: "remark",
                    hide: true,
                },
                ]
            },
            data: [],
@@ -286,16 +699,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,
@@ -361,15 +774,76 @@
            householdLabelList: [],
        }
    },
    watch: {},
    watch: {
        'form.source': {
            handler (newData) {
                let currentAddressColumn = this.findObject(
                    this.option.column,
                    'currentAddress'
                )
                let homeAdcodeColumn = this.findObject(
                    this.option.column,
                    'homeAdcode'
                )
                if (newData == 1) {
                    currentAddressColumn.disabled = true
                    homeAdcodeColumn.disabled = true
                } else {
                    currentAddressColumn.disabled = false
                    homeAdcodeColumn.disabled = false
                }
            },
        },
        'form.cardType': {
            handler (newData) {
                let idCardColumn = this.findObject(
                    this.option.column,
                    'idCard'
                )
                let cardNoColumn = this.findObject(
                    this.option.column,
                    'cardNo'
                )
                if (newData == 111) {
                    idCardColumn.display = true
                    cardNoColumn.display = false
                } else {
                    idCardColumn.display = false
                    cardNoColumn.display = true
                }
            },
        },
        'form.healthStatus': {
            handler (newData) {
                let diseaseNameColumn = this.findObject(
                    this.option.column,
                    'diseaseName'
                )
                if (newData == 3) {
                    diseaseNameColumn.disabled = false
                } else {
                    diseaseNameColumn.disabled = true
                }
            },
        },
    },
    computed: {
        ...mapGetters(["userInfo", "permission"]),
        permissionList () {
            console.log("permission===>", this.permission)
            return {
                addBtn: this.vaildData(this.permission.household_add, false),
                viewBtn: this.vaildData(this.permission.household_view, true),
                delBtn: this.vaildData(this.permission.household_delete, true),
                editBtn: this.vaildData(this.permission.household_edit, true)
                editBtn: this.vaildData(this.permission.household_edit, true),
                // tagBtn: this.vaildData(this.permission.household_manager, true)
            }
        },
@@ -391,6 +865,12 @@
            return (list) => {
                return list.map(item => item.labelName).join(',')
            }
        },
        getColor () {
            return (data) => {
                return setLabelColor(data)
            }
        }
    },
    mounted () { },
@@ -399,7 +879,8 @@
            if (this.labelForm.color === '#EBEDF0') {
                let params = {
                    householdId: this.currentRow.id,
                    labelId: this.currentLabel.id
                    labelId: this.currentLabel.id,
                    // userId: this.currentLabel.id
                }
                removeHouseholdLabel(params).then(res => {
                    this.onLoad(this.page)
@@ -416,6 +897,7 @@
                this.labelForm.houseCode = this.currentRow.houseCode
                this.labelForm.householdId = this.currentRow.id
                this.labelForm.labelId = this.currentLabel.id
                this.labelForm.userId = this.currentRow.associatedUserId
                this.labelForm.lableType = 1
                saveOrUpdateHouseholdLabel(this.labelForm).then(res => {
@@ -438,9 +920,10 @@
            this.labelForm.color = item.color
            this.labelForm.remark = item.remark
        },
        manageLabel (item) {
            this.currentRow = item
            this.loading = true
            this.currentRow = item
            this.labelFlag = true
            let params = {
                parentId: 1000
@@ -559,7 +1042,6 @@
            this.excelBox = true
        },
        uploadAfter (res, done, loading, column) {
            window.console.log(column)
            this.excelBox = false
            this.refreshChange()
            done()
@@ -590,12 +1072,12 @@
        },
        beforeOpen (done, type) {
            if (["edit", "view"].includes(type)) {
                getDetatil(this.form.id).then(res => {
                getDetatils(this.form.id).then(res => {
                    this.form = res.data.data
                    done()
                })
            }
            this.initFlag = true
            done()
        },
        currentChange (currentPage) {
            this.page.currentPage = currentPage
@@ -609,6 +1091,7 @@
        onLoad (page, params = {}) {
            this.loading = true
            getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
                const data = {
                    ...res.data.data,
@@ -635,7 +1118,7 @@
}
</script>
<style>
<style lang="scss" scoped>
.box {
    height: 800px;
}
@@ -670,4 +1153,12 @@
.box .el-scrollbar__wrap {
    overflow: scroll;
}
:deep(.el-form-item__content) {
    text-align: left !important;
}
:deep(.avue-form__menu--center .el-button) {
    margin: 0 5px 0 0;
}
</style>