userManagePage.vue

<template>
  <div class="userManagePage 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="addUser()">新&nbsp;&nbsp;&nbsp;建</el-button>
            <el-button size="mini" type="primary" class="btn_form_add" @click="exportExcel">下载模板</el-button>
            <el-button size="mini" type="primary" @click="handleImport" class="import btn_form_add">导入数据</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="账号" show-overflow-tooltip prop="username" ></el-table-column>
          <el-table-column label="角色" show-overflow-tooltip prop="roleName" ></el-table-column>
          <el-table-column label="姓名" show-overflow-tooltip prop="name" ></el-table-column>
          <el-table-column label="员工号" show-overflow-tooltip prop="code" ></el-table-column>
          <el-table-column label="电话" show-overflow-tooltip prop="mobile" ></el-table-column>
          <el-table-column label="归属网点" show-overflow-tooltip prop="bankBranchName" ></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="操作"  header-align="center" align="center" width="190">
            <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="handleDelete(scope.row)">删除&nbsp;|&nbsp;</el-button>
                <el-button title="密码重置" type="text" size="mini" @click="resetPassWord(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="新建" class="newuser" :visible.sync="FormVisible1"  :before-close="close1">
        <div class="form_box">
          <el-form :model="userform"  ref="userform"  :rules="rules"  >
            <el-form-item label="账  号：" prop="username" :label-width="formLabelWidth">
              <el-input v-model="userform.username" clearable auto-complete="off"
                        placeholder="请输入您想注册的账号" size="small"
                        onkeyup="this.value=this.value.replace(/^ +| +$/g,'')"></el-input>
            </el-form-item>
            <el-form-item label="密码：" prop="password" :label-width="formLabelWidth">
              <el-input type="password" size="small" v-model="userform.password" clearable auto-complete="off" placeholder="设置您的登录密码" ></el-input>
            </el-form-item>
            <el-form-item label="重复密码：" prop="repassword" :label-width="formLabelWidth">
              <el-input type="password" size="small" v-model="userform.repassword" clearable auto-complete="off" placeholder="再次输入您的密码" ></el-input>
            </el-form-item>
            <el-form-item label="姓  名：" prop="name" :label-width="formLabelWidth">
              <el-input v-model="userform.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="code" :label-width="formLabelWidth">
              <el-input v-model="userform.code" size="small"  clearable auto-complete="off" placeholder="请输入8位员工号"
                        onkeyup="this.value=this.value.replace(/^ +| +$/g,'')"></el-input>
            </el-form-item>
            <el-form-item label="手机号码：" prop="mobile" :label-width="formLabelWidth">
              <el-input v-model="userform.mobile" size="small" clearable auto-complete="off" placeholder="请输入手机号码"
                        onkeyup="this.value=this.value.replace(/^ +| +$/g,'')"></el-input>
            </el-form-item>
            <el-form-item label="归属网点：" prop="bankBranchId" :label-width="formLabelWidth" >
              <el-select v-model="userform.bankBranchId" size="small" filterable clearable value-key="name" placeholder="请选择" >
                <el-option v-for="item in typeList"   :key="item.id" :label="item.name" :value="item.id" :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="角  色：" prop="roleId" :label-width="formLabelWidth" >
              <el-select v-model="userform.roleId" size="small"  clearable value-key="name" placeholder="请选择" >
                <el-option v-for="item in typeList1"   :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="用户状态：" prop="status" :label-width="formLabelWidth">
              <el-radio v-model="userform.status" label="1">启用</el-radio>
              <el-radio v-model="userform.status" 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="userSave">确定</el-button>
            <el-button class="r-float" size="mini" @click="close1">取 消</el-button>
          </div>
        </div>
      </el-dialog>
      <!--编辑弹框-->
      <el-dialog title="编辑" :visible.sync="FormVisible"  :before-close="close">
        <div class="form_box">
          <el-form :model="editform"  ref="editform" :rules="rules1">
            <el-form-item label="账户：" prop="username" :label-width="formLabelWidth" >
              <span>{{editform.username}}</span>
            </el-form-item>
            <el-form-item label="姓名：" prop="name" :label-width="formLabelWidth">
              <span>{{editform.name}}</span>
            </el-form-item>
            <el-form-item label="员工号：" prop="code" :label-width="formLabelWidth" >
              <el-input v-model="editform.code" size="small" clearable auto-complete="off" placeholder="请输入8位员工号"
                        onkeyup="this.value=this.value.replace(/^ +| +$/g,'')"></el-input>
            </el-form-item>
            <el-form-item label="电话号码：" prop="mobile" :label-width="formLabelWidth">
              <el-input v-model="editform.mobile"  size="small" clearable auto-complete="off" placeholder="请输入电话号码"
                        onkeyup="this.value=this.value.replace(/^ +| +$/g,'')"></el-input>
            </el-form-item>
            <el-form-item label="角色：" prop="roleId" :label-width="formLabelWidth">
              <el-select v-model="editform.roleId" size="small"   value-key="name" placeholder="请选择角色" filterable>
                <el-option v-for="item in typeList1"   :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="归属网点：" prop="bankBranchId" :label-width="formLabelWidth" >
              <el-select v-model="editform.bankBranchId" size="small"  value-key="name" placeholder="请选择归属网点" filterable>
                <el-option v-for="item in typeList"   :key="item.id" :label="item.name" :value="item.id" :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="状  态：" prop="status" :label-width="formLabelWidth">
              <el-radio v-model="editform.status" label="0">启用</el-radio>
              <el-radio v-model="editform.status" label="1">禁用</el-radio>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button class="r-float" size="mini" type="primary" @click="submitForm()">确定</el-button>
            <el-button class="r-float" size="mini" @click="close">取 消</el-button>
          </div>
        </div>
      </el-dialog>
      <!--上传弹窗-->
      <el-dialog title="提示" :visible.sync="importVisible" width="30%">
        <el-upload class="upload-demo" drag :file-list="dataList"  action=""
                   :http-request="handleUploadImg"
                   :limit="1"
                   :on-exceed="handleExceed"
                   :before-remove="beforeRemove"
                   :on-remove="handleRemove"
                   accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet">
          <i class="el-icon-upload"></i>
          <div class="el-upload__text"><em>点击上传,只能上传.xls和.xlsx文件</em></div>
        </el-upload>
        <span slot="footer" class="dialog-footer">
          <el-button size="mini" @click="importVisible = false,dataList=[]">取 消</el-button>
          <el-button size="mini" type="primary" @click="onSubmit">确 定</el-button>
        </span>
      </el-dialog>
      <!--上传失败提示-->
      <el-dialog
        title="提示"
        :visible.sync="tipVisible"
        width="30%">
        <span style="padding: 10px 20px;display: inline-block;" v-html="tipMessage"></span>
        <span slot="footer" class="dialog-footer">
          <el-button size="mini" @click="tipVisible = false">取 消</el-button>
          <el-button size="mini" type="primary" @click="tipVisible = false">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      var validatePass = (rule, value, callback) => {
        if (value == '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.userform.password) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
        logid: '',
        form:{
          name: '',
        },
        page: {
          currentPage: 1, //当前页
          pageSize: null, //每页条数
          total: null, //总条数
        },
        tableData: [],
        FormVisible: false,
        FormVisible1: false,
        formLabelWidth: "100px",
        editform: {
          id: '',
          name: '',
          code: '',
          mobile: '',
          roleId: '',
          bankBranchId: '',
          status: '',
        },
        userform: {
            username: '',
            password: '',
            repassword: '',
            name: '',
            code: '',
            mobile: '',
            bankBranchId: '',
            roleId: '',
            status: '1'
        },
        status: '',
        typeList: [],
        typeList1: [],
        rules: {
          username: [
            {required: true, message: '请输入账号'},
            {max: 20, message: '不能超过20个字符'},
            {pattern: /^[a-zA-Z0-9_-]{0,20}$/, message: '请输入正确的账号'}
          ],
          password: [
            {required: true, message: '请输入密码'},
            {min: 6, message: '请输入正确密码'},
            {max: 20, message: '不能超过20个字符'},
          ],
          repassword: [
            {required: true, message: '请确认密码'},
            {validator: validatePass, trigger: 'blur'}
          ],
          mobile: [
            {required: true, message: '请输入电话号码'},
            {pattern: /^[1][3,4,5,7,8][0-9]{9}$/, message: '请输入正确的电话号码',trigger: 'blur'}
          ],
          name: [
            {required: true, message: '请输入姓名'},
            {max: 20, message: '不能超过20个字符'},
            {pattern: /^([\u4e00-\u9fa5]{1,20}|[a-zA-Z\.\s]{1,20})$/, message: '请输入正确的姓名'}
          ],
          code: [
            {required: true, message: '请输入8位员工号'},
            {max: 8, message: '不能超过8个字符'},
            {pattern:  /^(\d{8})?$/, message: '员工号为8位纯数字'}
          ],
          bankBranchId: [
            {required: true, message: '请选择所属网点'},
          ],
          roleId: [
            {required: true,message: '请选择所属角色'},
          ]
        },
        rules1: {
          mobile: [
            {required: true, message: '请输入电话号码'},
            {pattern: /^[1][3,4,5,7,8][0-9]{9}$/, message: '请输入正确的电话号码'}
          ],
          code: [
            {required: true, message: '请输入8位员工号'},
            {max: 8, message: '不能超过8个字符'},
            {pattern:  /^(\d{8})?$/, message: '员工号为8位纯数字'}
          ],
          bankBranchId: [
            {required: true, message: '请选择所属网点'},
          ],
          roleId: [
            {required: true,message: '请选择所属角色'},
          ]
        },
        value: '',
        importVisible: false,
        tipVisible: false,
        dataList: [],
        tipMessage:'',
        islist: [],

      }
    },
    computed: {},
    mounted() {
      this.onSearch();
      this.initData();

    },
    components: {},
    methods: {
      initData () {
        this.logid = localStorage.getItem('userId');
      },
      addUser() {
        let _this = this;
        _this.FormVisible1 = true;
        $('.el-dialog__title').html('新建');
        _this.getBranch();
        _this.getRole();
      },
      exportExcel () {
        window.location.href= this.$baseUrl+'employee/userTemplateDownload';
      },
      handleUploadImg(file) {
        this.dataList.push(file.file);
      },
      handleExceed() {
        this.$message.warning(`当前限制选择 1 个文件，如需更改请删除后重选`);
      },
      beforeRemove(file, fileList) {
        let vm = this;
        vm.dataList = fileList;
      },
      handleRemove(file) {
        // this.contentForm.icon = '';
      },
      handleImport() {
        this.importVisible = true
        $('.el-dialog__title').html('上传');
      },
      //导入
      handleUpload(file, timeout) {
        let vm = this;
        let formData = new FormData();
        formData.append("excelFile", file);
        return new Promise(function (resolve, reject) {
          vm.$https({
            url: 'employee/userImport',
            method: 'post'
          }, formData, "file").then((res) => {
            // console.log(res);
            if (res.data.status == 200) {
              vm.$message({
                type: 'success',
                message: res.data.message
              });
            } else if (res.data.status == 405) {
              vm.tipVisible = true;
              $('.el-dialog__title').html('错误提示');
              vm.tipMessage = res.data.message||'上传失败';
            } else {
              vm.$message({
                type: 'error',
                message: res.data.message||'上传失败'
              });
            }
            vm.dataList = []
            resolve(res)
          }, (error) => {
            console.log(error)
          })
        })
      },
      //导入提交
      onSubmit() {
        let vm = this
        let uploadList = vm.dataList.concat([]);
        if (uploadList.length == 0) {
          vm.$message({
            message: '请选择文件',
            type: 'warning'
          });
        } else {
          vm.handleUpload(uploadList[0]).then(function (response) {
            vm.importVisible = false;
            vm.dataList = [];
            vm.onSearch();
          })
        }
      },
      getBranch(val) {
        let _this = this;
        let params = {
          action: 'createUser',
        };
        _this.$https({
          method: 'get',
          url: 'bankBranchInfo/getBankBox',
          authType: this.backToken
        },params).then((res) => {
          _this.typeList =  res.data;
          }, (error) => {
            console.log(error)
          }
        )
      },
      // 角色列表渲染
      getRole() {
        let _this = this;
        _this.$https({
          method: 'get',
          url: 'role/getRoleBox',
          authType: this.backToken
        }).then((res) => {
          _this.typeList1 =  res.data;
          }, (error) => {
            console.log(error)
          }
        )
      },
      // 获得数据接口
      getTableData(param) {
        let vm = this;
        vm.$https({
          url : "employee/getUserList",
          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 searchObj = {
          "_index": 1,
          "_size": _this.page.pageSize,
          "employName": _this.form.name,
        };
        this.getTableData(searchObj);
      },
      // // 获取当前查询参数
      getSearchQuery() {
        let _this = this;
        let searchObj = {
          "_index":  _this.page.currentPage,
          "_size": _this.page.pageSize,
          "employName": _this.form.name,
        };
        return searchObj;
      },
      // 新增弹窗
      userSave() {
        let _this = this;
        _this.$refs.userform.validate((valid) => {
          if (valid) {
            _this.$https({
            url: 'employee/add',
            method: 'post',
            authType: this.backToken
          }, _this.$qs.stringify(_this.userform))
            .then((res) => {
                if (res.data.status == 200 || res.data.status == 201) {
                  _this.$message({
                    type: 'success',
                    message: res.data.message
                  });
                  // //关闭窗口
                  this.FormVisible1 = false;
                  for (let key in this.userform) {
                    this.userform[key]=null;
                  }
                  this.userform.status = '1';
                  this.$refs['userform'].resetFields();
                  //重新查询数据
                  _this.Search();
                } else {
                  _this.$message({
                    type: 'error',
                    message: res.data.message
                  });
                }
              }, (error) => {
                _this.$message({
                  type: 'error',
                  message: error
                });
              }
            )
        }
        });
      },
      // 编辑弹框
      openEdit(row){
        let  _this=this;
        $('.el-dialog__title').html('编辑');
        _this.getRole();
        _this.getBranch();

        let id = row.id;
        _this.$https({
          url : "employee/get/?Id="+id,
          method: 'get',
          authType: this.backToken
        }).then((res)=>{
          let data = res.data;
          _this.editform= data;

          /*判断该网点是否存在*/
          let obj = _this.typeList.find((item) => {
            return item.id === _this.editform.bankBranchId
          });
          if(!obj) {_this.editform.bankBranchId = "";}

          let status = data.status == true? '0':'1';
          _this.editform.status= status;
        }).catch(function(err){
          console.log(err);
        })
        _this.FormVisible = true;
      },
      // 编辑后提交
      submitForm() {
        let _this = this;
        let searchObj = {}
        _this.$refs.editform.validate((valid) => {
          if (valid) {
          searchObj.id =_this.editform.id;
          searchObj.roleId =_this.editform.roleId;
          searchObj.name =_this.editform.name;
          searchObj.mobile =_this.editform.mobile;
          searchObj.bankBranchId =_this.editform.bankBranchId;
          searchObj.code =_this.editform.code;
          if(_this.editform.id == _this.logid){
            searchObj.status = true;
            _this.$message({
              type: 'error',
              message: '不可禁用自己'
            });
          }else{
            let status = _this.editform.status == '0'? true:false;
            searchObj.status = status;
          }
          _this.$https({
            url: 'employee/modify',
            method: 'put',
            authType: this.backToken
          }, _this.$qs.stringify(searchObj))
            .then((res) => {
                if (res.status == 200 ||res.status == 201) {
                  _this.$message({
                    type: 'success',
                    message: '修改成功!'
                  });
                  //重新查询数据
                  _this.onSearch();
                  // //关闭窗口
                  this.FormVisible = false;

                } else {
                  _this.$message({
                    type: 'error',
                    message: res.data.message
                  });
                }
              }, (error) => {
              }
            )
          }
        });

      },
      close() {
          this.FormVisible = false;
      },
      close1() {
          this.FormVisible1 = false;
          for (let key in this.userform) {
            this.userform[key]=null;
          }
          this.userform.status = '1';
          this.$refs['userform'].resetFields();
      },
      // 删除
      handleDelete(row) {
        let _this = this;
        if(row.id == _this.logid){
          _this.$message({
            type: 'error',
            message: '不可删除自己'
          });
        }else{
          this.$confirm('此操作将永久删除该信息, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }).then(() => {
            _this.$https({
              method: 'delete',
              url: 'employee/delete?employeeId='+ 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});
            })
          })
        }

      },
      // 重置密码
      resetPassWord(row) {
        let _this = this;
        this.$confirm('确定要重置密码吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          _this.$https({
            method: 'put',
            url: 'employee/resetPassword?employeeId='+row.id,
            authType: this.backToken
          }).then((res) => {
            if(res.status == 201 || res.status == 200){
              let newpass = res.data.password;
              _this.onSearch();
              this.$alert('已重置!  用户名：'+ row.name +',  重置密码为: '+ newpass, '密码重置', {
                confirmButtonText: '确定',
              });
            }
            }, (error) => {
              this.$message({
                type: 'fail',
                message: "重置失败!" + error.response.data
              });
            }
          )
        }).catch(() => {
        });
      },

      // 批量操作
      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:'employee/batchDis?employeeIds='+str,
              method:'put',
              authType: this.backToken
            }).then((res) => {
                  //重新查询数据
                  _this.onSearch();
                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});
                }
              }, (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:'employee/batchDel?employeeIds='+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) => {})
          }).catch(() => {});
        } else {
          this.$message({
            type: 'info',
            message: '请至少选择一个选项！'
          });
        }
      },
    }
  }
</script>

<style lang="less">
  @import '../../style/common';
  .userManagePage{
    .content_box{
      .input_box{
        width: 100%;
        min-width: 815px;
        margin-bottom: 32px;
        .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-dialog{
        width: 600px;
        background:rgba(255,255,255,1);
        box-shadow:0px 4px 12px 0px rgba(0,0,0,0.2);
        border-radius:4px;
        margin-top: 10vh!important;
        .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: 280px;
                }
              }
              .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;
              }
            }
          }
        }
      }

      .upload-demo{
        padding: 10px 20px;
      }
      .el-upload-dragger{
        max-width: 330px!important;
      }
    }
  }


</style>