居民监管样式调整

shuishen

2024-01-24 d16d10d94fddff86bdfd87113e7fd2cebe8b7cd7

 src/views/userHouse/lable/list.vue

@@ -1,11 +1,185 @@
<template>
  <div id="">
    111111111111111111
  </div>
</template>
    <el-row>
        <el-col :span="24">
            <basicContainer>
                <avue-crud ref="crud" :option="option" :before-open="beforeOpen" :before-close="beforeClose" :data="data"
                    @tree-load="treeLoad" @row-save="rowSave" @row-del="rowDel" @refresh-change="refreshChange"
                    @row-update="rowUpdate" @on-load="onLoad">

                    <template slot-scope="{row, size}" slot="menu">
                        <el-button :size="size" type="text" icon="el-icon-circle-plus-outline" @click="handleAdd(row)">新增子级
                        </el-button>
                    </template>

                </avue-crud>
            </basicContainer>
        </el-col>

    </el-row>
</template>
<script>
import {
    getTreeList,
    add,
    update,
    remove
} from '@/api/label/label'

export default {
    data () {
        return {
            query: {
                parentId: 0
            },
            data: [],
            loading: true,
            page: {
                pageSize: 10,
                currentPage: 1,
                total: 0
            },
            parentId: undefined,
            option: {
                labelWidth: 96,
                searchLabelWidth: 96,
                menuWidth: 240,

                lazy: true,
                rowKey: 'id',
                defaultExpandAll: true,
                column: [{
                    label: '名称',
                    prop: 'name'
                }, {
                    label: 'ID',
                    prop: 'id',
                    display: false
                }, {
                    label: '排序',
                    prop: 'sort',
                }, {
                    label: '父级id',
                    prop: 'parentId',
                    type: "tree",
                    dicData: [],
                    hide: true,
                    addDisabled: false,
                    props: {
                        label: "name",
                        value: 'id'
                    },
                }]
            },
            data1: [],
            selectionList: [],
        }
    },

    methods: {

        refreshChange () {
            this.onLoad()
        },

        beforeOpen (done, type) {
            if (["add", "edit"].includes(type)) {
                this.initData()
            }
            done()
        },

        beforeClose (done) {
            this.parentId = ""
            const column = this.findObject(this.option.column, "parentId")
            column.value = ""
            column.addDisabled = false
            done()
        },

        initData () {
            const column = this.findObject(this.option.column, "parentId")
            column.dicData = this.data
        },

        selectionClear () {
            this.selectionList = []
        },

        onLoad (page, params = {}) {
            this.loading = true
            getTreeList().then(res => {
                const data = res.data.data
                this.data = data
                this.loading = false
                this.selectionClear()
            })
        },

        rowDel (row, index, done) {
            console.log("*************")
            this.$confirm("确定将选择数据删除?", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    return remove(row.id)
                })
                .then(() => {
                    this.$message({
                        type: "success",
                        message: "操作成功!"
                    })
                    done(row)
                })
        },

        rowSave (row, done) {
            row.parentId = this.parentId
            row.labelName = row.name
            add(row).then(() => {
                this.initFlag = false
                this.onLoad(this.page)
                this.$message({
                    type: "success",
                    message: "操作成功!"
                })
                done()
            }, error => {
                window.console.log(error)
                loading()
            })
        },

        rowUpdate (row, index, done) {
            const column = this.findObject(this.option.column, "parentId")
            column.value = row.id
            done(row)
        },

        handleAdd (row) {
            const column = this.findObject(this.option.column, "parentId")
            column.value = row.id
            column.addDisabled = true
            this.parentId = row.id
            this.$refs.crud.rowAdd()
        },

        treeLoad (tree, treeNode, resolve) {
            setTimeout(() => {
                resolve([{
                    id: new Date().getTime(),
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄',
                    hasChildren: true
                }])
            }, 1000)
        }
    }
}
</script>

<style>
</style>


<style></style>