表格按钮样式修改

guanqb

2024-01-30 a9e5b9858096288528d23d1a8218e327db4b6870

 src/views/userHouse/houseHoldList.vue

@@ -1,14 +1,14 @@
<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="permission.household_import"
@@ -17,83 +17,82 @@
                        <el-button type="warning" size="small" plain v-if="permission.household_export"
                            icon="el-icon-download" @click="handleExport">导出
                        </el-button> -->
                    <!-- </template> -->
            <!-- </template> -->

                    <template slot-scope="{row, size}" slot="menu">
                        <el-button :size="size" type="text" icon="el-icon-circle-plus-outline"
                            v-if="permission.househould_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, size}" slot="menu">
                <el-button :size="size" type="text" icon="el-icon-circle-plus-outline" v-if="permission.househould_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>

                    <el-tree :data="roleGrantList" show-checkbox check-strictly default-expand-all node-key="id"
                        ref="treeRole" :default-checked-keys="roleTreeObj" :props="props">
                    </el-tree>
            <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>
            <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>

                <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>
        <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 size="small" @click="editLabelFlge = false">取 消</el-button>
                        <el-button size="small" 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 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>
        <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>
@@ -1117,7 +1116,7 @@
}
</script>

<style>
<style lang="scss" scoped>
.box {
    height: 800px;
}
@@ -1152,4 +1151,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>