baianxi_admin/src/views/government/Index.vue

<style lang="scss">
    .govern{
        display: flex;
        justify-content: space-between;
        li{
            width: 32%;
            list-style: none;
            min-height: 70vh;
            background: #fff;
            border: 1px solid #d9d9d9;
            padding:20px 10px;
        }
        .custom-tree-node{
                    width: 100%;
                    .el-tree-node__content{
                        height: 32px;
                    }
                    .label_name{
                        font-size: 14px;
                    }
                    .edit{
                        float: right;
                        i{
                            font-weight: bolder;
                            font-size: 14px;
                        }
                    }
        }
        .form{
            .el-input,.el-textarea{
                width: 90%;
            }
            .el-select{
                width: 100%;
            }
            .req{
                color:red;
                font-weight: 600;
                margin-left: 5px;
            }
        }
        .company{
            h1{
                font-size: 18px;
                margin-bottom: 20px;
                button{
                    float: right;
                }
            }
            p{
                color: #409EFF;
                padding: 10px 0;
                border-bottom: 1px solid #d9d9d9;
                font-size: 14px;
                width: 90%;
                margin: 0 auto;
            }
        }
    }
</style>
<template>
  <section>
    <p>政府管理</p>
    <div class="content">
        <ul class="govern">
            <li>
                <el-form :inline="true" size="small" label-width="40px">
                    <el-form-item label="区域">
                        <el-select class="input_100" v-model="input1" placeholder="请选择">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                        <el-input style="width:62%;margin-left:5px;" v-model="input1" placeholder="政府名称"></el-input>
                    </el-form-item>
                </el-form>
                <el-button type="primary" icon="el-icon-circle-plus" size="mini" style="width:100%;margin-bottom:10px;">新增政府单位</el-button>
                <el-tree  
                    :data="data"
                    node-key="id" 
                    :expand-on-click-node="false">
                    <span class="custom-tree-node" slot-scope="{ node, data }" @click.stop="() => edit(data)" >
                        <span class="label_name">{{ node.label }}</span>
                        <span class="edit">
                        <el-button
                            type="text"
                            size="mini"
                            @click.stop="() => append(data)">
                            <i class="el-icon-plus"></i>
                        </el-button>
                        <el-button
                            type="text"
                            size="mini"
                            @click="() => edit(data)">
                            <i class="el-icon-edit"></i>
                        </el-button>
                        <el-button
                            type="text"
                            size="mini"
                            @click="() => remove(data)">
                            <i class="el-icon-delete"></i>
                        </el-button>
                        </span>
                    </span>
                </el-tree>
            </li>
            <li>
                <el-form class="form" label-width="80px" label-position='right' size="small">
                    <el-form-item label="政府名称">
                        <el-input v-model="form.name"></el-input>
                        <span class="req">*</span>
                    </el-form-item>
                    <el-form-item label="账号" >
                        <el-input v-model="form.name"></el-input>
                        <span class="req">*</span>
                    </el-form-item>
                    <el-form-item label="区域" >
                        <el-select v-model="input1" placeholder="请选择">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="密码" >
                        <el-input v-model="form.name"></el-input>
                        <span class="req">*</span>
                    </el-form-item>
                    <el-form-item label="确认密码" >
                        <el-input v-model="form.name"></el-input>
                        <span class="req">*</span>
                    </el-form-item>
                    <el-form-item label="账号状态">
                        <el-switch
                        v-model="form.status"
                        active-text="启用"
                        inactive-text="禁用">
                        </el-switch>
                    </el-form-item>
                    <el-form-item label="备注">
                        <el-input :rows="4" type="textarea" v-model="form.intro"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button  type="primary">保存</el-button>
                        <el-button  type="info">取消</el-button>
                    </el-form-item>
                </el-form>
            </li>
            <li class="company">
                <h1>巴中市应急管理局下属企业  <el-button size='mini' type="primary">添加</el-button></h1>
                <p>巴中市恩阳中学</p>
                <p>巴中市恩阳中学</p>
                <p>巴中市恩阳中学</p>
            </li>
        </ul>
    </div>
  </section>
</template>
<script>
export default {
	data() {
		return {
            input1:'',
            data:[{
                id: 3,
                label: '一级 3',
                children: [{
                    id: 7,
                    label: '二级 3-1'
                }, {
                    id: 8,
                    label: '二级 3-2'
                }]
            }],
            form:{}
		};
	},
	methods: {},
	created(){
	
	}
};
</script>