roleManagePage.vue

<template>
  <div class="roleManagePage H100">
    <div class="head_box">
      <h6>系统管理&nbsp;/&nbsp;角色管理</h6>
      <h4>角色管理</h4>
    </div>
    <div class="content_box">
      <div class="form_box h778px" >
        <el-form :inline="true" :model="form" class="search-form" onsubmit="return false;">
          <el-form-item label="">
            <el-input  size="mini" placeholder="请输入角色名称"  v-model="form.name" @keyup.enter.native="Search" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <el-button size="mini"  type="primary" class="btn_form_search" @click="Search">查询</el-button>
          </el-form-item>
          <el-form-item class="r-float">
            <el-button size="mini" type="primary" class="btn_form_add" icon="el-icon-plus" @click="addRole()">新&nbsp;&nbsp;&nbsp;建</el-button>
            <el-dropdown>
              <el-button style="margin-left: 10px;" size="mini" class="btn_form_add">批量操作</el-button>
              <el-dropdown-menu slot="dropdown" >
                <el-dropdown-item @click.native="multipleDelete">批量删除</el-dropdown-item>
                <el-dropdown-item  @click.native="multipleDisable">批量禁用</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-form-item>
        </el-form>
        <div class="scrool">
          <el-table style="width:100%;" ref="multipleTable"  :data="tableData" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column label="角色名称" prop="name" ></el-table-column>
          <el-table-column label="角色说明" show-overflow-tooltip prop="instruction"></el-table-column>
          <el-table-column label="状态" prop="status" >
            <template slot-scope="scope">
              <div class="statusBox">
                <span class="active" :style="{'backgroundColor':(scope.row.status ? 'rgba(82,196,26,1)' :'rgba(0,0,0,0.25)')}"></span>
                <span class="openKey">{{scope.row.status ? '启用':'禁用'}}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="登录权限" prop="allowLogin" >
            <template slot-scope="scope">
              <div class="statusBox">
                <span class="active" :style="{'backgroundColor':(scope.row.allowLogin ? 'rgba(82,196,26,1)' :'rgba(0,0,0,0.25)')}"></span>
                <span class="openKey">{{scope.row.allowLogin ? '允许':'禁止'}}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作"  header-align="center" align="center" width="230">
            <template slot-scope="scope">
              <el-button-group >
                <el-button title="编辑" size="mini" type="text" @click="openEdit(scope.row)">编辑&nbsp;|&nbsp;</el-button>
                <el-button title="权限分配" size="mini" type="text" @click="allocate(scope.row)">权限分配&nbsp;|&nbsp;</el-button>
                <el-button title="菜单分配" type="text" size="mini" @click="munuAllocate(scope.row)">菜单分配&nbsp;|&nbsp;</el-button>
                <el-button title="删除" type="text" size="mini" @click="handleDelete(scope.row)">删除</el-button>
              </el-button-group>
            </template>
          </el-table-column>
        </el-table>
        </div>
        <el-pagination small background
           @current-change="handleCurrentChange"
           :current-page="page.currentPage"
           :page-size="page.pageSize"
           layout="prev, pager, next"
           :total="page.total">
        </el-pagination>
      </div>
      <!--新建弹框-->
      <el-dialog title="新建" :visible.sync="FormVisible2" :before-close="close2">
        <div class="form_box">
          <el-form :model="roleform" ref="roleform" :rules="rules2"  >
            <el-form-item label="角色名称：" prop="name" :label-width="formLabelWidth">
              <el-input v-model="roleform.name" size="small" clearable auto-complete="off" placeholder="请输入您的角色名称"
                        onkeyup="this.value=this.value.replace(/^ +| +$/g,'')"></el-input>
            </el-form-item>
            <el-form-item label="角色说明：" prop="instruction" :label-width="formLabelWidth">
              <el-input v-model="roleform.instruction"  size="small" clearable auto-complete="off" placeholder="输入角色说明"
                        onkeyup="this.value=this.value.replace(/^ +| +$/g,'')"></el-input>
            </el-form-item>
            <el-form-item label="角色状态：" prop="status" :label-width="formLabelWidth">
              <el-radio v-model="roleform.status" label="1">启用</el-radio>
              <el-radio v-model="roleform.status" label="0">禁用</el-radio>
            </el-form-item>
            <el-form-item label="登录权限：" prop="status" :label-width="formLabelWidth">
              <el-radio v-model="roleform.allowLogin" label="1">允许</el-radio>
              <el-radio v-model="roleform.allowLogin" label="0">禁止</el-radio>
            </el-form-item>
            <el-form-item label="权限选择：" prop="permissionIds" :label-width="formLabelWidth" style="height: 275px;">
              <template slot-scope="scope">
                <el-tree
                  :data="treeData"
                  show-checkbox
                  default-expand-all
                  node-key="id"
                  ref="tree1"
                  highlight-current
                  v-model="roleform.permissionIds"
                  @check = 'haha'
                  style="height: 280px;overflow:auto;"
                >
                </el-tree>
              </template>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button class="r-float" size="mini" type="primary" @click="roleSave">确定</el-button>
            <el-button class="r-float" size="mini" @click="close2">取消</el-button>
          </div>
        </div>
      </el-dialog>
      <!--编辑弹框-->
      <el-dialog title="编辑" :visible.sync="FormVisible1"  :before-close="close1">
        <div class="form_box">
          <el-form :model="editform"  ref="editform"  :rules="rules" >
            <el-form-item label="角色名称：" prop="name" :label-width="formLabelWidth" >
              <el-input v-model="editform.name" size="small" clearable auto-complete="off"  onkeyup="this.value=this.value.replace(/^ +| +$/g,'')"></el-input>
            </el-form-item>
            <el-form-item label="角色说明：" prop="instruction" :label-width="formLabelWidth">
              <el-input v-model="editform.instruction" size="small" clearable auto-complete="off"  onkeyup="this.value=this.value.replace(/^ +| +$/g,'')"></el-input>
            </el-form-item>
            <el-form-item label="状  态：" prop="status" :label-width="formLabelWidth">
              <el-radio v-model="editform.status"  label="1">启用</el-radio>
              <el-radio v-model="editform.status"  label="0">禁用</el-radio>
            </el-form-item>
            <el-form-item label="登录权限：" prop="is_allow_login" :label-width="formLabelWidth">
              <el-radio v-model="editform.allowLogin"  label="1">允许</el-radio>
              <el-radio v-model="editform.allowLogin"  label="0">禁止</el-radio>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button class="r-float" size="mini" type="primary" @click="saveEdit('form')">确定</el-button>
            <el-button class="r-float" size="mini" @click="close1">取 消</el-button>
          </div>
        </div>
      </el-dialog>
      <!--权限分配弹框-->
      <el-dialog class="allocate" title=" " :visible.sync="FormVisible"  :before-close="close">
        <div class="form_box allocate">
          <el-form :model="form1"  ref="form1"  :rules="rules"  >
            <el-form-item label="权限选择：" prop="permissionIds" :label-width="formLabelWidth" style="height: 480px;overflow:auto;">
              <template slot-scope="scope">
                <el-tree :data="treeData" show-checkbox node-key="id"
                         default-expand-all ref="tree" highlight-current v-model="form1.permissionIds" @check = 'haha'>
                </el-tree>
              </template>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button class="r-float" size="mini" type="primary" @click="submitForm('form1')">确定</el-button>
            <el-button class="r-float" size="mini" @click="close">取 消</el-button>
          </div>
        </div>
      </el-dialog>
      <!--菜单分配弹框-->
      <el-dialog title="菜单分配" :visible.sync="menuFormVisible">
        <div class="form_box allocate">
          <el-form :model="formMenu"  ref="formMenu">
            <el-form-item label="菜单选择：" prop="permissionIds" :label-width="formLabelWidth" style="height: 480px;overflow:auto;">
              <template slot-scope="scope">
                <el-tree :data="menuTreeData"
                         check-strictly="true"
                         show-checkbox node-key="id"
                         default-expand-all
                         ref="menuTree"
                         highlight-current
                         v-model="formMenu.menuIds" @check ='menuCheck'>
                </el-tree>
              </template>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button class="r-float" size="mini" type="primary" @click="menusubmitForm('formMenu')">确定</el-button>
            <el-button class="r-float" size="mini" @click="memuclose">取 消</el-button>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
  let thisRoleId = '';
  export default {
    data() {
      return {
        page: {
          currentPage: 1, //当前页
          pageSize: null, //每页条数
          total: null, //总条数
        },
        tableData: [],
        treeData: [],
        menuTreeData:[],
        menuTreeIds:[],
        FormVisible: false,
        FormVisible1: false,
        FormVisible2: false,
        menuFormVisible:false,
        formLabelWidth: "100px",
        status: '1',
        allowLogin: '1',
        form:{
          name:''
        },
        roleform: {
          name: '',
          instruction: '',
          status: '1',
          allowLogin: '1',
          permissionIds: '',
        },
        editform: {
          name: '',
          instruction: '',
          status: true,
          allowLogin: true,
        },
        form1: {
          permissionIds: '',
        },
        formMenu:{
          menuIds:''
        },
        typeList: [],
        rules2: {
          name: [
            {required: true, message: '请输入角色名'},
            {max: 20, message: '不能超过20个字符'},
            {pattern: /^([\u4e00-\u9fa5]{1,20}|[a-zA-Z\.\s]{1,20})$/, message: '请输入正确的角色名'}
          ],
          instruction: [
            {required: true, message: '请输入角色说明'},
            {max: 50, message: '不能超过50个字符'},
          ],
          permissionIds: [
            // {required: true, message: '请输入角色说明'},
          ]
        },
        rules: {
          name: [
            {required: true, message: '请输入角色名'},
            {max: 20, message: '不能超过20个字符'}
          ],
          instruction: [
            {required: true, message: '请输入角色说明'},
            {max: 50, message: '不能超过50个字符'},
          ],
        },
        value: '',
        roleId:'',
      }
    },
    computed: {
    },
    mounted() {
      this.onSearch();

    },
    components: {},
    methods: {
      addRole() {
        this.FormVisible2 = true;
        $('.el-dialog__title').html('新建');
        this.getProTree();
      },
      //获得数据接口
      getTableData(param) {
        let vm = this;
        vm.$https({
          url : "role/getRoleList",
          method: 'get',
          authType: this.backToken
        },param).then((res)=>{
          let data = res.data;
          vm.page.pageSize = data.size;
          vm.page.total = data.total;
          vm.tableData = data.records;
        }).catch(function(err){
          console.log(err);
        })
      },
      // 分页
      handleCurrentChange(val) {
        let _this = this;
        _this.page.currentPage = val;
        _this.onSearch();
      },
      onSearch() {
        let _this = this;
        let param = _this.getSearchQuery();
        _this.getTableData(param)
      },
      Search(){
        let _this = this;
        _this.page.currentPage = 1;
        let param = {
          "_index":  _this.page.currentPage,
          "_size": _this.page.pageSize,
          "name": _this.form.name,
        };
        this.getTableData(param);
      },
      // // 获取当前查询参数
      getSearchQuery() {
        let _this = this;
        let searchObj = {
          "_index":  _this.page.currentPage,
          "_size": _this.page.pageSize
        };
        for (let key in _this.form) {
          if (_this.form[key]) {
            searchObj[key] = _this.form[key];
          }
        }
        return searchObj;
      },
      // 删除
      handleDelete(row) {
        let _this = this;
        this.$confirm('此操作将永久删除该信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          _this.$https({
            method: 'delete',
            url: 'role/delete?roleId='+ row.id,
            authType: this.backToken
          }).then((res) => {
            if(res.data.status == 201 || res.data.status == 200){
              this.$message({type: 'success', message: res.data.message});
            }else{
              this.$message({type: 'error', message: res.data.message});
            }
            _this.Search();
          }, (error) => {
            this.$message({type: 'fail', message: "删除失败!" + error.response.data});
          })
        })
      },
      // 批量操作
      handleSelectionChange(selection){
        let _this = this;
        _this.selection = selection;
      },
      getMultipleSelect () {
        let _this = this;
        let arr = [];
        let str = '';
        if (_this.selection){
          _this.selection.forEach(function (e) {
            arr.push(e.id);
          })
          str = arr.join(',');
        }else{
          str = '';
        }
        return str;
      },
      // 批量禁用
      multipleDisable () {
        let _this = this;
        let str = _this.getMultipleSelect();
        if (str) {
          this.$confirm('此操作将禁用角色权限, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }).then(() => {
            _this.$https({
              url:'role/batchDis?roleIds='+str,
              method:'put',
              authType: this.backToken
            }).then((res) => {
              if(res.data.status == 201 || res.data.status == 200){
                this.$message({type: 'success', message: res.data.message});
              }else{
                this.$message({type: 'error', message: res.data.message});
              }
              //重新查询数据
              _this.onSearch();
            }, (error) => {})
          })
        } else {
          this.$message({
            type: 'info',
            message: '请至少选择一个选项'
          });
        }
      },
      // 批量删除
      multipleDelete () {
        let _this = this;
        let str = _this.getMultipleSelect();
        if (str) {
          this.$confirm('此操作将删除选中角色, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }).then(() => {
            _this.$https({
              url:'role/batchDel?roleIds='+str,
              method:'DELETE',
              authType: this.backToken
            })
              .then((res) => {
                  if(res.data.status == 201 || res.data.status == 200){
                    this.$message({
                      type: 'success',
                      message: res.data.message
                    });
                  }else{
                    this.$message({
                      type: 'error',
                      message: res.data.message
                    });
                  }
                  //重新查询数据
                  _this.onSearch();

                }, (error) => {
                }
              )
          })
        } else {
          this.$message({
            type: 'info',
            message: '请至少选择一个选项！'
          });
        }
      },
      // 新增角色
      roleSave() {
        let _this = this;
        _this.$refs.roleform.validate((valid) => {
          if (valid) {
            let keysId = _this.$refs.tree1.getCheckedKeys();
            let searchObj = {}
            for (let key in _this.roleform) {
              if (_this.roleform[key]) {
                searchObj[key] = _this.roleform[key];
              }
            }
            searchObj.status =_this.roleform.status == '1'? 'true':'false';
            searchObj.allowLogin =_this.roleform.allowLogin == '1'? 'true':'false';
            console.log(keysId);
            let arr = [];
            let str = '';
            keysId.forEach(function (e){
              arr.push(e);
            });
            str =arr.join(',');
            searchObj.permissionIds = str;
            _this.$https({
              url: 'role/add',
              method: 'post',
              authType: this.backToken
            }, _this.$qs.stringify(searchObj)).then((res) => {
                  if (res.data.status == 200 || res.data.status == 201) {
                    _this.$message({
                      type: 'success',
                      message: res.data.message
                    });
                    _this.Search();
                    _this.FormVisible2 = false;
                    for (let key in _this.roleform) {
                      _this.roleform[key]=null;
                    }
                    _this.roleform.status = '1';
                    _this.roleform.allowLogin = '1';
                    _this.$refs['roleform'].resetFields();
                  } else {
                    _this.$message({
                      type: 'error',
                      message: res.data.message
                    });
                  }
                }, (error) => {
                  _this.$message({
                    type: 'error',
                    message: error
                  });
                }
              )
        }
        });
      },
      close1() {
        this.FormVisible1=false;
        this.$refs['editform'].resetFields();
      },
      close2() {
        this.FormVisible2 = false;
        for (let key in this.roleform) {
          this.roleform[key]=null;
        }
        this.roleform.status = '1';
        this.roleform.allowLogin = '1';
        this.$refs['roleform'].resetFields();
      },
      // 编辑弹框
      openEdit(row){
        $('.el-dialog__title').html('编辑');
        let  _this=this;
        _this.$https({
          url : "role/getById?Id="+row.id,
          method: 'get',
          authType: this.backToken
        }).then((res)=>{
          let data = res.data;
          _this.editform = data;
          let status = data.status == true? '1':'0';
          let allowLogin = data.allowLogin == true? '1':'0';
          _this.editform.status= status;
          _this.editform.allowLogin= allowLogin;
        }).catch(function(err){
          console.log(err);
        })
        _this.FormVisible1 = true;
      },
      // 编辑后提交
      saveEdit() {
        let _this = this;
        _this.$refs.editform.validate((valid) => {
          if (valid) {
            let searchObj = {}
            searchObj.id = _this.editform.id;
            searchObj.name = _this.editform.name;
            searchObj.instruction = _this.editform.instruction;
            searchObj.status = _this.editform.status == '1'? true:false;
            searchObj.allowLogin = _this.editform.allowLogin == '1'? true:false;
            if (searchObj.id && searchObj.id != "") {
              _this.$https({
                url: 'role/edit',
                method: 'put',
                authType: this.backToken
              }, _this.$qs.stringify(searchObj))
                .then((res) => {
                    if (res.status == 200) {
                      _this.$message({
                        type: 'success',
                        message: '修改成功!'
                      });
                      //重新查询数据
                      _this.onSearch();
                      // //关闭窗口
                      _this.FormVisible1=false;
                      _this.$refs['editform'].resetFields();

                    } else {
                      _this.$message({
                        type: 'error',
                        message: res.data.message
                      });
                    }
                  }, (error) => {
                  }
                )
            }
          }
        });
      },
      // 权限分配
      allocate(row) {
        this.getProTree();
        $('.el-dialog__title').html('权限分配');
        let  _this=this;
        thisRoleId = row.id;
        _this.$https({
          url : "role/rights?roleId="+row.id,
          method: 'get',
          authType: this.backToken
        }).then((res)=>{
          let data = res.data;
          let arr = [];
          for (let item of data) {
            if(item.checked == 'true'){
              arr.push(item.id);
            }
          }
          _this.$refs.tree.setCheckedKeys(arr);
        }).catch(function(err){
          console.log(err);
        });
        _this.FormVisible = true;
      },
      //菜单分配
      munuAllocate(row){
        $('.el-dialog__title').html('菜单分配');
        let vm=this;
        vm.menuTreeIds=[];
        vm.roleId=row.id
        vm.getMenuTree(row.id)
      },
      haha (data) {
        let _this = this;
        _this.form1.permissionIds = data;
      },
      menuCheck(data){
        this.formMenu.menuIds=data;
      },
      // 渲染权限选择的数据
      getProTree() {
        let _this = this;
        _this.$https({
          method: 'get',
          url: 'role/rights',
          authType: this.backToken
        }).then((res) => {
            let data = res.data;
            let A = [];
            data.map((e, i) => {
              if(e.pId == 0){
                let obj = {
                  id: e.id,
                  label: e.name,
                  children: []
                };
                A.push(obj);
              }
            });
            for (let j in A) {
              for (let i in data) {
                if(data[i].pId == A[j].id) {
                  let obj = {
                    id: data[i].id,
                    label: data[i].name,
                  };
                  A[j].children.push(obj);
                }
              }
            }
            if (_this.treeData == null) {
              _this.treeData = A;
            } else {
              _this.treeData = [];
              _this.treeData = A;
            }
          }, (error) => {
            console.log(error)
          }
        )

      },
      //获取菜单接口
      getMenuTree(roleId){
        let vm = this;
        vm.$https({
          method: 'get',
          url: 'menu/getRoleMenu?roleId='+roleId,
          authType: vm.backToken
        }).then((res) => {
          let treeData=res.data;
          let tempArr=[];
          let tempIds=[];
          for(let i=0,len=treeData.length;i<len;i++){
            let treeObj=treeData[i];
            let obj={};
            if(treeObj.parentId=='0'){ //根节点
              obj.label=treeObj.menuName;
              obj.id=treeObj.id;
              obj.sort=treeObj.sort
              if(treeObj.checked=='true'){
                tempIds.push(treeObj.id)
              }
              obj.children=[];
              for(let k=0,klen=treeData.length;k<klen;k++){
                let ktreeObj=treeData[k];
                let kobj={};
                if(ktreeObj.parentId==treeObj.id){
                  kobj.label=ktreeObj.menuName.split('-')[1];
                  kobj.id=ktreeObj.id;
                  kobj.sort=ktreeObj.sort;
                  if(ktreeObj.checked=='true'){
                    tempIds.push(ktreeObj.id)
                  }
                  obj.children.push(kobj)
                }
              }
            }
            if(JSON.stringify(obj) != "{}"){
              tempArr.push(obj)
            }
          }
          let lastTreeData=tempArr.sort(function (a,b) {
            if(a.children.length!=0){
              a.children.sort(function (c,d) {
                return c.sort-d.sort
              })
            }
            return a.sort-b.sort
          })
          vm.menuTreeIds=tempIds;
          vm.menuTreeData=lastTreeData
          vm.menuFormVisible=true;
          setTimeout(function () {
            vm.$refs['menuTree'].setCheckedKeys(vm.menuTreeIds);
          },100)
          }, (error) => {
            console.log(error)
          }
        )
      },
      // 分配权限
      submitForm() {
        let roleId = thisRoleId;
        let _this = this;
        let keysId = _this.$refs.tree.getCheckedKeys();
        _this.$https({
            url: 'role/updateRoleRights?roleId='+roleId+'&permissionIds='+keysId,
            method: 'post',
            authType: this.backToken
          }).then((res) => {
            if (res.data.status == 200 || res.data.status == 201) {
              _this.$message({
                type: 'success',
                message: res.data.message
              });
              _this.close();
              _this.onSearch();
            } else {
              _this.$message({
                type: 'error',
                message: res.data.message
              });
            }
          }, (error) => {
            _this.$message({
              type: 'error',
              message: error
            });
          })
      },

      menusubmitForm(){
        let _this=this;
        let keysId = _this.$refs['menuTree'].getCheckedKeys();
        let arr = [];
        arr = keysId.map(function (id) {
          return id;
        });
        // console.log(arr);
        _this.$https({
          url: 'role/updateRoleMenu?roleId='+_this.roleId+'&menuIds='+arr,
          method: 'post',
          authType: this.backToken
        }).then((res) => {
          if (res.data.status == 200 || res.data.status == 201) {
            _this.$message({
              type: 'success',
              message: res.data.message
            });
            _this.memuclose();
            _this.onSearch();
          } else {
            _this.$message({
              type: 'error',
              message: res.data.message
            });
          }
        }, (error) => {
          _this.$message({
            type: 'error',
            message: error
          });
        })
      },
      close() {
        this.FormVisible=false;
      },
      memuclose(){
        this.menuFormVisible=false
      }
    }
  }
</script>

<style lang="less">
  @import '../../style/common';
  .roleManagePage{
    .content_box{
      .input_box{
        width: 100%;
        min-width: 815px;
        margin-bottom: 30px;
        .el-input, .el-select{
          max-width:272px;
          height:32px;
          background:rgba(255,255,255,1);
          border-radius:4px;
          .el-input__inner{
            height:32px;
          }
        }
        .btn_form_search,.btn_form_add{
          height: 32px;
          text-align: center;
          padding: 0 15px;
        }
      }
      .scrool {
        width: 100%;
        height: calc(100% - 100px);
        overflow-x: hidden;
        overflow-y: scroll;
        .el-table {
          .el-table__header-wrapper {
            .el-table__header {
              .has-gutter tr th {
                background: rgba(250, 250, 250, 1);
              }

            }
          }
          .el-table__body-wrapper {
            width: 100%;
            table tbody tr td {
              padding: 6px 0px;
            }
          }
        }
      }

      /*提示弹框*/
      .el-message-box__wrapper{
        .el-message-box{
          width:433px !important;
          height: 180px !important;
        }
      }


      /*!*编辑弹框*!*/
      .el-dialog{
        width: 600px;
        margin-top: 12vh!important;
        background:rgba(255,255,255,1);
        box-shadow:0px 4px 12px 0px rgba(0,0,0,0.2);
        border-radius:4px;
        .el-dialog__header{
          padding: 15px;
          border-bottom: 1px solid rgba(0,0,0,0.09);
        }
        .el-dialog__body{
          padding: 0px!important;
          border: 1px solid transparent;
          .form_box{
            padding-bottom: 40px;
            .el-form {
              margin-bottom: 20px;
              .el-form-item{
                margin: 10px  50px 20px;
                .el-form-item__content{
                  width: 360px;
                }
              }
              .el-input{
                width: 100%;
              }
            }
            .dialog-footer{
              border-top: 1px solid rgba(0,0,0,0.09);
              padding-top: 8px;
              .el-button{
                margin-right: 10px;
                padding: 8px 16px;
              }
            }
          }
        }
      }
    }
  }



</style>