user

lxl

2022-10-27 9ce29c536ba2a636416c618761985e2b9a711ee6

 src/views/userManage/orgManage.vue

@@ -1,307 +1,618 @@
<template>
    <div class="logLog_box">
      <My-bread
        :list="[
          `${$t('operatManage.operatManage')}`,
          `${$t('operatManage.eventlogManage')}`,
        ]"
      ></My-bread>
  <div class="menuSettings_box">
    <div class="menuSettings_tree">
      <My-bread :list="['运维管理', '单位管理']"></My-bread>
      <el-button class="saveBtn" type="primary" size="mini" @click="sendChange"
        >保存</el-button
      >
      <el-divider />
      <div class="inquire">
        <el-form ref="ruleForm" :model="form" :inline="true">
          <el-form-item :label="$t('operatManage.ELM.username')" prop="username">
            <el-input
              v-model="form.username"
              :placeholder="$t('operatManage.ELM.usernameInfo')"
            />
          </el-form-item>
          <el-form-item
            :label="$t('operatManage.ELM.ownedSystem')"
            prop="ownedSystem"
          >
            <el-select
              v-model="form.ownedSystem"
              :placeholder="$t('operatManage.ELM.please')"
            >
              <el-option :label="$t('operatManage.ELM.all')" value="all" />
              <el-option :label="$t('operatManage.ELM.one')" value="one" />
            </el-select>
          </el-form-item>
          <el-form-item
            :label="$t('operatManage.ELM.operationType')"
            prop="operationType"
          >
            <el-select
              v-model="form.operationType"
              :placeholder="$t('operatManage.ELM.please')"
            >
              <el-option :label="$t('operatManage.ELM.all')" value="all" />
              <el-option :label="$t('operatManage.ELM.add')" value="add" />
              <el-option :label="$t('operatManage.ELM.delete')" value="delete" />
              <el-option :label="$t('operatManage.ELM.edit')" value="edit" />
              <el-option :label="$t('operatManage.ELM.query')" value="query" />
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('operatManage.ELM.date')" prop="date">
            <el-date-picker
              v-model="form.date"
              type="daterange"
              align="right"
              unlink-panels
              :range-separator="$t('operatManage.ELM.to')"
              :start-placeholder="$t('operatManage.ELM.startDate')"
              :end-placeholder="$t('operatManage.ELM.endDate')"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item :label="$t('operatManage.ELM.ip')" prop="requestIp">
            <el-input v-model="form.requestIp" placeholder="请输入" />
          </el-form-item>
          <el-form-item>
            <el-button @click="onSubmit"
              ><i class="el-icon-search"></i> &nbsp;{{
                $t("operatManage.ELM.search")
              }}</el-button
            >
          </el-form-item>
          <el-form-item>
            <el-button @click="resetForm('ruleForm')"
              ><i class="el-icon-delete"></i>&nbsp;{{
                $t("operatManage.ELM.reset")
              }}</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div class="table_box">
        <el-table :data="tableData" stripe style="width: 100%" height="99%">
          <el-table-column
            align="center"
            type="index"
            :label="$t('operatManage.ELM.index')"
            width="70px"
          />
          <el-table-column
            align="center"
            prop="username"
            :label="$t('operatManage.ELM.username')"
          />
          <el-table-column
            align="center"
            prop="ip"
            :label="$t('operatManage.ELM.ip')"
          />
          <el-table-column
            align="center"
            prop="ownedSystem"
            :label="$t('operatManage.ELM.ownedSystem')"
          />
          <el-table-column
            align="center"
            prop="largeModuleName"
            :label="$t('operatManage.ELM.largeModuleName')"
          />
          <el-table-column
            align="center"
            prop="smallModuleName"
            :label="$t('operatManage.ELM.smallModuleName')"
          />
          <el-table-column
            align="center"
            prop="resourceName"
            :label="$t('operatManage.ELM.resourceName')"
          />
          <el-table-column
            align="center"
            prop="date"
            :label="$t('operatManage.ELM.date')"
          />
          <el-table-column
            align="center"
            prop="operationType"
            :label="$t('operatManage.ELM.operationType')"
          />
        </el-table>
        <div style="margin-top: 40px" class="pagination_box">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="9"
          >
          </el-pagination>
        </div>
      <div class="depTreeBox">
        <el-tree
          ref="tree"
          :props="defaultProps"
          node-key="id"
          :data="depList"
          :expand-on-click-node="false"
          :default-expand-all="true"
          draggable
          @node-click="handleNodeClick"
          @node-drag-start="handleDragStart"
          @node-drag-end="handleDrop"
        >
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>{{ node.label }}</span>
            <span class="btnBox">
              <el-button
                v-if="menuStatus.insert"
                type="text"
                size="mini"
                @click="() => append(node, data)"
              >
                <i class="el-icon-circle-plus"></i>
              </el-button>
              <el-button
                v-if="menuStatus.delete"
                type="text"
                size="mini"
                @click="() => remove(node, data)"
              >
                <i class="el-icon-delete-solid"></i>
              </el-button>
            </span>
          </span>
        </el-tree>
      </div>
    </div>
  </template>
  
  <script>
  import MyBread from "../../components/MyBread.vue";
  
  export default {
    //import引入的组件需要注入到对象中才能使用
    components: {
      MyBread,
    <div class="itemSettings">
      <div class="title_box">
        <h4>详细信息</h4>
      </div>
      <div class="form_box">
        <el-form :model="itemdetail" ref="itemdetail" :rules="rules">
          <el-form-item label="名称" :label-width="formLabelWidth">
            <el-input v-model="itemdetail.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="简称" :label-width="formLabelWidth">
            <el-input v-model="itemdetail.sname" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="编码" :label-width="formLabelWidth">
            <el-input v-model="itemdetail.code" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="机构代码" :label-width="formLabelWidth">
            <el-input v-model="itemdetail.uncode" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="地址" :label-width="formLabelWidth">
            <el-input v-model="itemdetail.addr" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="联系方式" :label-width="formLabelWidth">
            <el-input
              v-model="itemdetail.contact"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="传真" :label-width="formLabelWidth">
            <el-input v-model="itemdetail.fax" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="电子邮件" :label-width="formLabelWidth">
            <el-input v-model="itemdetail.email" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="邮政编码" :label-width="formLabelWidth">
            <el-input v-model="itemdetail.post" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="网站地址" :label-width="formLabelWidth">
            <el-input
              v-model="itemdetail.website"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="备注" :label-width="formLabelWidth">
            <el-input v-model="itemdetail.bak" autocomplete="off"></el-input>
          </el-form-item>
          <div class="btnBox" v-if="menuStatus.update">
            <el-button type="primary" @click="updDep('itemdetail')"
              >保存</el-button
            >
            <el-button type="primary" @click="reset('itemdetail')"
              >取消</el-button
            >
          </div>
        </el-form>
      </div>
    </div>
    <el-dialog
      width="30%"
      top="5vh"
      title="新增子目录"
      :visible.sync="dialogFormVisible"
    >
      <el-form :model="ruleForm" ref="ruleForm" :rules="rules">
        <el-form-item prop="name" label="名称" :label-width="formLabelWidth">
          <el-input v-model="ruleForm.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="简称" :label-width="formLabelWidth">
          <el-input v-model="ruleForm.sname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="编码" :label-width="formLabelWidth">
          <el-input v-model="ruleForm.code" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="机构代码" :label-width="formLabelWidth">
          <el-input v-model="ruleForm.uncode" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="地址" :label-width="formLabelWidth">
          <el-input v-model="ruleForm.addr" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="联系方式" :label-width="formLabelWidth">
          <el-input v-model="ruleForm.contact" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="传真" :label-width="formLabelWidth">
          <el-input v-model="ruleForm.fax" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="电子邮件" :label-width="formLabelWidth">
          <el-input v-model="ruleForm.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮政编码" :label-width="formLabelWidth">
          <el-input v-model="ruleForm.post" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="网站地址" :label-width="formLabelWidth">
          <el-input v-model="ruleForm.website" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input v-model="ruleForm.bak" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetForm('ruleForm')">取消</el-button>
        <el-button
          type="primary"
          @click="submitForm('ruleForm')"
          v-loading.fullscreen.lock="fullscreenLoading"
          >提交</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import MyBread from '../../components/MyBread.vue';
import {
  queryDepTree,
  updateDepTree,
  updateDepTrees,
  queryMaxId,
  insertDep,
  deleteDep,
} from '../../api/api';
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    MyBread,
  },
  data() {
    let validName = (rule, value, callback) => {
      if (value === '' || value === null || value === undefined) {
        return callback(new Error('名称不能为空'));
      } else {
        callback();
      }
    };
    return {
      menuStatus: {
        delete: false,
        insert: false,
        update: false,
      },
      defaultProps: {
        children: 'children',
        label: 'name',
      },
      fullscreenLoading: false,
      oriData: [], //原始树数据
      depList: [], //el树数据
      old_depData: [], //el树数据(拖动前)
      newData: [], //拖动后原始数据
      itemdetail: {
        addr: '',
        bak: '',
        code: '',
        contact: '',
        email: '',
        fax: '',
        name: '',
        post: '',
        sname: '',
        uncode: '',
        website: '',
      },
      backUpData: '',
      formLabelWidth: '130px',
      delChildID: '',
      delChildIDs: [],
      dialogFormVisible: false,
      ruleForm: {
        level: null,
        orderNum: null,
        pid: null,
        addr: '',
        bak: '',
        code: '',
        contact: '',
        email: '',
        fax: '',
        name: '',
        post: '',
        sname: '',
        uncode: '',
        website: '',
      },
      rules: {
        name: [{ required: true, validator: validName, trigger: 'blur' }],
      },
    };
  },
  methods: {
    getDepTree() {
      //获取目录树最大ID，新建节点使用
      // queryMaxId().then((res) => {
      //   this.id = res.data;
      // });
      queryDepTree().then((res) => {
        if (res.code == 200) {
          this.oriData = res.result;
          this.newData = res.result;
          this.depList = this.treeData(res.result);
        } else {
          this.$notify.error({
            title: res.code,
            message: '无法获取单位列表',
          });
        }
      });
    },
  
    data() {
      return {
        currentPage: 1,
        form: {
          username: "",
          ownedSystem: "",
          requestIp: "",
          operationType: "",
          date: "",
        },
        tableData: [
          {
            username: "管理员",
            ip: "221.182.31.12",
            date: "2022-08-05",
            ownedSystem: "",
            largeModuleName: "运维监控",
            smallModuleName: "资源操作日志",
            resourceName: "",
            operationType: "查询",
          },
          {
            date: "2022-08-05",
            username: "管理员",
            ownedSystem: "",
            largeModuleName: "运维监控",
            smallModuleName: "资源操作日志",
            resourceName: "",
            operationType: "查询",
            ip: "221.182.31.12",
          },
          {
            date: "2022-08-05",
            username: "管理员",
            ownedSystem: "",
            largeModuleName: "运维监控",
            smallModuleName: "资源操作日志",
            resourceName: "",
            operationType: "查询",
            ip: "221.182.31.12",
          },
          {
            date: "2022-08-05",
            username: "管理员",
            ownedSystem: "",
            largeModuleName: "运维监控",
            smallModuleName: "资源操作日志",
            resourceName: "",
            operationType: "查询",
            ip: "221.182.31.12",
          },
          {
            date: "2022-08-05",
            username: "管理员",
            ownedSystem: "",
            largeModuleName: "运维监控",
            smallModuleName: "资源操作日志",
            resourceName: "",
            operationType: "查询",
            ip: "221.182.31.12",
          },
          {
            date: "2022-08-05",
            username: "管理员",
            ownedSystem: "",
            largeModuleName: "运维监控",
            smallModuleName: "资源操作日志",
            resourceName: "",
            operationType: "查询",
            ip: "221.182.31.12",
          },
          {
            date: "2022-08-05",
            username: "管理员",
            ownedSystem: "",
            largeModuleName: "运维监控",
            smallModuleName: "资源操作日志",
            resourceName: "",
            operationType: "查询",
            ip: "221.182.31.12",
          },
          {
            date: "2022-08-05",
            username: "管理员",
            ownedSystem: "",
            largeModuleName: "运维监控",
            smallModuleName: "资源操作日志",
            resourceName: "",
            operationType: "查询",
            ip: "221.182.31.12",
          },
          {
            date: "2022-08-05",
            username: "管理员",
            ownedSystem: "",
            largeModuleName: "运维监控",
            smallModuleName: "资源操作日志",
            resourceName: "",
            operationType: "查询",
            ip: "221.182.31.12",
          },
        ],
      };
    treeData(source) {
      let cloneData = JSON.parse(JSON.stringify(source)); // 对源数据深度克隆
      return cloneData.filter((father) => {
        // 循环所有项
        let branchArr = cloneData.filter((child) => father.id == child.pid); // 对比ID，分别上下级菜单，并返回数据
        branchArr.length > 0 ? (father.children = branchArr) : ''; // 给父级添加一个children属性，并赋值
        return father.pid == 0; // 返回一级菜单
      });
    },
    methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
      onSubmit() {
        console.log("submit!");
      },
      resetForm(formName) {
    append(node, data) {
      this.dialogFormVisible = true;
      this.ruleForm.pid = data.id;
      this.ruleForm.orderNum = node.childNodes.length + 1;
      this.ruleForm.level = data.level + 1;
      // console.log(data);
      // console.log(node);
    },
    resetForm(formName) {
      this.dialogFormVisible = false;
      this.$nextTick(() => {
        this.ruleForm = {};
        this.$refs[formName].resetFields();
      },
      });
    },
    created() {},
  };
  </script>
  <style lang="less" scoped>
  //@import url(); 引入公共css类
  .logLog_box {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // console.log(this.ruleForm);
          this.fullscreenLoading = true;
          insertDep(this.ruleForm)
            .then((res) => {
              setTimeout(() => {
                this.fullscreenLoading = false;
                if (res.code == 200) {
                  this.$message({
                    message: '添加成功',
                    type: 'success',
                  });
                  this.getMenuTree();
                  this.itemdetail = {};
                  this.ruleForm = {};
                  this.dialogFormVisible = false;
                  this.$refs[formName].resetFields();
                }
              }, 500);
            })
            .catch((res) => {
              this.itemdetail = {};
              this.$message.error('添加失败');
              this.fullscreenLoading = false;
              console.log(res);
            });
        } else {
          // alert("目录名称不能为空");
          return false;
        }
      });
    },
    remove(node, data) {
      this.$confirm('此操作将删除该节点, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          //兄弟重新排序
          const parent = node.parent;
          const children = parent.data.children || parent.data;
          children.splice(data.orderNum - 1, 1);
          children.forEach((item, index) => {
            item.orderNum = index + 1;
          });

          this.traverseArr(data); //获取删除的子ID
          this.delChildIDs.push(data.id); //要删除的全部ID
          let delIDs = this.delChildIDs;
          Promise.all([
            deleteDep({ ids: delIDs.toString() }),
            updateDepTrees(children),
          ])
            .then((res) => {
              console.log(res);
              if (res[0].code == 200 && res[1].code == 200) {
                this.$message({
                  type: 'success',
                  message: '删除成功!',
                });
                this.getMenuTree();
                this.itemdetail = {};
              } else if (res[0].code == 200) {
                this.getMenuTree();
                this.$message.error('删除成功，位置调整失败');
              } else if (res[1].code == 200) {
                this.getMenuTree();
                this.$message.error('删除失败,位置调整成功');
              } else {
                this.getMenuTree();
                this.$message.error('删除失败');
              }
            })
            .catch(() => {
              this.$message.error('删除失败');
              this.itemdetail = {};
            });

          //重置要删除的子ID
          this.delChildIDs = [];
        })
        .catch(() => {
          this.$message('已取消删除');
        });
      // this.dialogMessage="是否删除"
      // this.dialogFlag = 1;
      // this.dialogFrom ={
      //   node:node,
      //   val:data
      // }
      //   this.dialogVisible=true;//目录树更改弹窗
      // const parent = node.parent;
      // const children = parent.data.children || parent.data;
      // const index = children.findIndex((d) => d.id === data.id);
      // let res = children.splice(index, 1);
      // // console.log(res);
      // // console.log(data);
      // console.log(this.flaten(res));
    },
    traverseArr(obj) {
      if (obj.children) {
        return obj.children.forEach((item) => {
          // console.log(item.id + "---" + item.name);
          // this.delChildID += "id=" + item.id + "&";
          this.delChildIDs.push(item.id);
          this.traverseArr(item);
        });
      }
      return;
    },
    flaten(arr) {
      return arr.reduce((p, v, i) => {
        for (let i = 0; i < p.length; i++) {
          if (p[i].children) {
            delete p[i].children;
          }
        }
        return p.concat(v.children ? this.flaten(v.children).concat(v) : v);
      }, []);
    },
    handleDragStart(node, ev) {
      this.old_depData = JSON.parse(JSON.stringify(this.depList)); //将备份的dir重新赋值
    },
    handleDrop(draggingNode, dropNode, dropType, ev) {
      this.$confirm('此操作将保存目录更改, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          //父节点
          let data = dropType != 'inner' ? dropNode.parent.data : dropNode.data;
          // 父节点中全部子节点
          let nodeData =
            dropNode.level == 1 && dropType != 'inner' ? data : data.children;
          //变更节点
          // console.log(nodeData);
          nodeData.forEach((item, i) => {
            if (dropType != 'inner') {
              if (draggingNode.data.pid === dropNode.data.pid) {
                item.pid = item.pid;
              } else {
                item.pid = dropNode.data.pid;
              }
            } else {
              item.pid = data.id;
            }
            item.orderNum = i + 1;
          });
          // console.log(nodeData);
          //更新原始整体数据
          let arr = [];
          this.oriData.forEach((e) => {
            nodeData.forEach((item) => {
              if (item.id === e.id) e = item;
            });
            arr.push(e);
          });
          this.newData = arr;
          this.sendChange();
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消更改',
          });
          this.depList = this.old_depData; //将备份的dir重新赋值
        });
    },
    sendChange() {
      updateDepTrees(this.newData)
        .then((res) => {
          if (res.code == 200) {
            this.getMenuTree();
            return;
          } else {
            alert('调整失败，请重试！');
          }
        })
        .catch(() => {
          alert('修改失败，请重试！');
        });
    },
    handleNodeClick(data) {
      // console.log(data);
      this.backUpData = JSON.stringify(data);
      this.itemdetail = JSON.parse(JSON.stringify(data));
    },
    updDep(formName) {
      this.$nextTick(() => {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.fullscreenLoading = true;
            updateDepTree(this.itemdetail)
              .then((res) => {
                setTimeout(() => {
                  this.fullscreenLoading = false;
                  if (res.code == 200) {
                    this.getMenuTree();
                    this.itemdetail = {};
                    this.dialogFormVisible = false;
                  }
                }, 500);
              })
              .catch((res) => {
                alert('修改失败，请重试！');
                this.fullscreenLoading = false;
              });
          } else {
            return false;
          }
        });
      });
    },
    reset() {
      this.$refs[formName].resetFields();
      if (this.backUpData != '') {
        this.itemdetail = JSON.parse(this.backUpData);
      }
    },
    showPermsMenu(res) {
      switch (res.tag) {
        case '/delete':
          this.menuStatus.delete = true;
          break;
        case '/insert':
          this.menuStatus.insert = true;
          break;
        case '/update':
          this.menuStatus.update = true;
          break;
      }
    },
  },
  mounted() {
    this.getDepTree();
  },
  created() {
    var val = this.$store.state.currentPerms;
    var permsEntity = this.$store.state.permsEntity;
    for (var i = 0; i < permsEntity.length; i++) {
      if (permsEntity[i].perms == val) {
        this.showPermsMenu(permsEntity[i]);
      }
    }
  },
};
</script>
<style lang="less" scoped>
//@import url(); 引入公共css类
.menuSettings_box {
  border-radius: 10px;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  .menuSettings_tree {
    position: relative;
    width: 344px;
    height: 100%;
    background: rgb(240, 242, 245);
    padding: 20px;
    border-radius: 10px;
    box-sizing: border-box;
    overflow: auto;
    .saveBtn {
      position: absolute;
      left: 250px;
      top: 23px;
    }
    .depTreeBox {
      height: 88%;
      width: 100%;
      overflow: auto;
      .el-tree {
        background: transparent;
        font-size: 15px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #000000;
        /deep/ .el-tree-node {
          padding-top: 10px;
          // padding-bottom: 10px;
        }
        /deep/ .el-tree-node:focus > .el-tree-node__content {
          background-color: #b9b9b9;
        }
        /deep/ .el-tree-node__content:hover {
          background-color: rgb(153, 153, 153);
        }
        .btnBox {
          margin: 0 10px 0 5px;
          .el-button + .el-button {
            margin-left: 5px;
          }
        }
      }
    }
  }
  .itemSettings {
    width: calc(100% - 344px);
    border-radius: 10px;
    background: rgb(240, 242, 245);
    margin-left: 10px;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    .el-input {
      width: 300px;
    }
    .inquire {
      height: 110px;
      overflow: auto;
      padding: 10px;
      margin-top: 20px;
    .title_box {
      background: #fff;
      border-radius: 5px;
      padding: 10px;
      margin-bottom: 24px;
      display: flex;
      border-radius: 10px;
      border: 1px solid rgb(202, 201, 204);
      margin-bottom: 20px;
      .el-form-item {
        margin: 7px;
      box-sizing: border-box;
    }
    .form_box {
      border: 1px solid rgb(202, 201, 204);
      border-radius: 10px;
      background: #fff;
      padding-top: 30px;
      box-sizing: border-box;
      width: 100%;
      .el-input,
      /deep/ .el-textarea {
        width: 400px;
      }
      .btnBox {
        margin: 0 270px 20px;
        width: 200px;
        display: flex;
        justify-content: space-between;
      }
    }
    .table_box {
      height: 65%;
      padding: 10px;
      background: #fff;
      border-radius: 5px;
      border: 1px solid rgb(202, 201, 204);
    }
    .text-center {
      text-align: center;
    }
  }
  </style>
  
  /deep/ .el-dialog__body {
    padding: 0 30px 0 0;
  }
}
</style>