权限管理

src/xt_pages/role/components/EditRole.vue

@@ -1,113 +1,302 @@
 <template>
-    <el-dialog title='新增角色' width="600px" :visible.sync="visible" :before-close="_close">
-        <el-form :model="form" :rules="rules" ref="form" label-width="90px">
+  <el-dialog
+    title="新增用户"
+    width="660px"
+    :visible.sync="visible"
+    :before-close="_close"
+  >
+    <!-- <el-form :model="form" :rules="rules" ref="form" label-width="90px">
             <el-form-item label="角色名称 : " prop="name">
                 <el-input v-model="form.name" placeholder="" maxlength="30" ></el-input>
             </el-form-item>
             <el-form-item label="角色描述 : " prop="intro">
                 <el-input type="textarea" v-model="form.intro" placeholder="" resize="none" rows="4" ></el-input>
             </el-form-item>
-        </el-form>
-        <div slot="footer" class="dialog-footer">
-            <el-button @click="hide">取 消</el-button>
-            <el-button type="primary" @click="submitAction()">保 存</el-button>
+    </el-form>-->
+    <div class="chooseuser">
+      <span style="color:#303133">选择用户：</span>
+      <el-radio v-model="checked" label="1">从已有员工中选择</el-radio>
+      <el-radio v-model="checked" label="2">新增员工</el-radio>
+    </div>
+    <div v-if="checked == '1'" class="roleContent">
+      <div class="roleContentLeft">
+        <p style="color:#303133">选择：</p>
+        <div class="chooseBox">
+          <div>
+            <el-checkbox
+              :indeterminate="isIndeterminate"
+              v-model="checkAll"
+              @change="handleCheckAllChange"
+              >全选</el-checkbox
+            >
+          </div>
+          <el-checkbox-group
+            v-model="checkedCities"
+            @change="handleCheckedCitiesChange"
+          >
+            <!-- <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox> -->
+            <div class="checkone" v-for="city in cities" :key="city">
+              <el-checkbox :label="city">
+                <img src="https://kuyi.shengws.com/S1.png" alt />
+                <span>名字</span>
+              </el-checkbox>
+            </div>
+          </el-checkbox-group>
         </div>
-    </el-dialog>
+      </div>
+      <div class="roleContentRight">
+        <p style="color:#303133">已选：</p>
+        <div class="chooseBox">
+          <div class="hasChoosedOne">
+            <img src="https://kuyi.shengws.com/S1.png" alt />
+            <span>名字</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div v-if="checked == '2'" class="newStaff">
+      <el-form
+        :model="ruleForm"
+        :rules="newrules"
+        label-position="right"
+        label-width="80px"
+        style="width:40%"
+      >
+        <el-form-item label="姓名" prop="name">
+          <el-input v-model="ruleForm.name"></el-input>
+        </el-form-item>
+        <el-form-item label="手机号" prop="phone">
+          <el-input v-model="ruleForm.phone"></el-input>
+        </el-form-item>
+        <el-form-item label="职位">
+          <el-input></el-input>
+        </el-form-item>
+      </el-form>
+      <div class="newItem">
+        <p style="width:80px;text-align:right;padding-right:8px">
+          <i
+            class="el-icon-circle-plus"
+            style="font-size:20px;color:#338AFB"
+          ></i>
+        </p>
+        <p style="color:#409FFF">继续新增员工</p>
+      </div>
+    </div>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="hide">取 消</el-button>
+      <el-button type="primary" @click="submitAction()">保 存</el-button>
+    </div>
+  </el-dialog>
 </template>
 
 <script>
-import {addRole, modifyRole} from '@/api/role/role'
+import { addRole, modifyRole } from "@/api/role/role";
 
 export default {
-    name: 'EditRole',
-    data() {
-        return {
-            form: {
-                id: 0,
-                name: '',
-                intro: ''
-            },
-            'visible': false,
-            rules: {
-                name: [
-                    {required: true, message: '请输入角色名称', trigger: 'blur'},
-                    {max: 10, message: '10个字以内', trigger: 'blur'}
-                ],
-                intro: [
-                    {required: true, message: '请输入角色说明', trigger: 'blur'},
-                ]
-            }
-        }
+  name: "EditRole",
+  data() {
+    return {
+      form: {
+        id: 0,
+        name: "",
+        intro: ""
+      },
+      visible: false,
+      rules: {
+        name: [
+          { required: true, message: "请输入角色名称", trigger: "blur" },
+          { max: 10, message: "10个字以内", trigger: "blur" }
+        ],
+        intro: [{ required: true, message: "请输入角色说明", trigger: "blur" }]
+      },
+
+      //
+      checked: "1",
+      checkAll: false,
+      checkedCities: [],
+      cities: ["上海", "北京", "广州", "深圳"],
+      isIndeterminate: true,
+      ruleForm: {
+        name: "",
+        phone: "",
+        position: ""
+      },
+      newrules: {
+        name: [
+          { required: true, message: "请输入角色名称", trigger: "blur" },
+          { max: 10, message: "10个字以内", trigger: "blur" }
+        ],
+        phone: [{ required: true, message: "请输入手机号", trigger: "blur" }]
+      }
+    };
+  },
+  methods: {
+    _close: function(done) {
+      this.clear();
+      done();
+    },
+    clear: function() {
+      this.form.id = 0;
+      this.form.name = "";
+      this.form.intro = "";
+    },
+    show() {
+      this.clear();
+      this.visible = true;
     },
-    methods: {
-        _close: function(done) {
-            this.clear()
-            done()
-        },
-        clear: function() {
-            this.form.id = 0
-            this.form.name = ''
-            this.form.intro = ''
-        },
-        show() {
-            this.clear()
-            this.visible = true
-        },
-        hide() {
-            this.clear()
-            this.visible = false
-        },
-        modify(id, name, intro) {
-            this.form.id = id
-            this.form.name = name
-            this.form.intro = intro
-            this.visible = true
-        },
-        submitAction() {
-            this.$refs.form.validate((valid) => {
-                if (valid) { // 验证通过
-                    if (this.form.id === 0) { // 新增 role
-                        addRole(this.form.name, this.form.intro).then(rs => {
-                            var resp = rs.data
-                            if (resp.state === 1) {
-                                var new_id = resp.data.id
-                                var new_name = resp.data.name
-                                var new_intro = resp.data.intro
-                                var new_status = resp.data.status
-                                this.$emit('did-add-role', new_id, new_name, new_intro, new_status)
+    hide() {
+      this.clear();
+      this.visible = false;
+    },
+    modify(id, name, intro) {
+      this.form.id = id;
+      this.form.name = name;
+      this.form.intro = intro;
+      this.visible = true;
+    },
+    submitAction() {
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          // 验证通过
+          if (this.form.id === 0) {
+            // 新增 role
+            addRole(this.form.name, this.form.intro)
+              .then(rs => {
+                var resp = rs.data;
+                if (resp.state === 1) {
+                  var new_id = resp.data.id;
+                  var new_name = resp.data.name;
+                  var new_intro = resp.data.intro;
+                  var new_status = resp.data.status;
+                  this.$emit(
+                    "did-add-role",
+                    new_id,
+                    new_name,
+                    new_intro,
+                    new_status
+                  );
 
-                                this.hide()
-                                
-                            } else {
-                                this.$message.error(resp.msg)
-                            }
-                            
-                        }).catch(err => {
-                            this.$message.error(err)
-                        })
-                        
-                    } else { // 修改 role
-                        modifyRole(this.form.id, this.form.name, this.form.intro).then(rs => {
-                            var resp = rs.data
-                            if (resp.state === 1) {
-                                this.$emit('did-edit-role', this.form.id, this.form.name, this.form.intro)
-                                this.hide()
-                                
-                            } else {
-                                this.$message.error(resp.msg)
-                            }
-                            
-                        }).catch(err => {
-                            this.$message.error(err)
-                        })
-                    }
-                    
-                } else { // 验证失败
-                    return false
+                  this.hide();
+                } else {
+                  this.$message.error(resp.msg);
+                }
+              })
+              .catch(err => {
+                this.$message.error(err);
+              });
+          } else {
+            // 修改 role
+            modifyRole(this.form.id, this.form.name, this.form.intro)
+              .then(rs => {
+                var resp = rs.data;
+                if (resp.state === 1) {
+                  this.$emit(
+                    "did-edit-role",
+                    this.form.id,
+                    this.form.name,
+                    this.form.intro
+                  );
+                  this.hide();
+                } else {
+                  this.$message.error(resp.msg);
                 }
-            })
+              })
+              .catch(err => {
+                this.$message.error(err);
+              });
+          }
+        } else {
+          // 验证失败
+          return false;
+        }
+      });
+    },
+    handleCheckAllChange(val) {
+      this.checkedCities = val ? this.cities : [];
+      this.isIndeterminate = false;
+    },
+    handleCheckedCitiesChange(value) {
+      let checkedCount = value.length;
+      this.checkAll = checkedCount === this.cities.length;
+      this.isIndeterminate =
+        checkedCount > 0 && checkedCount < this.cities.length;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.roleContent {
+  margin-top: 20px;
+  display: flex;
+  justify-content: space-between;
+  .roleContentLeft {
+    .chooseBox {
+      width: 280px;
+      height: 320px;
+      overflow-y: auto;
+      border: 1px solid rgba(235, 238, 240, 1);
+      margin-top: 26px;
+      padding: 20px;
+      .checkone {
+        display: flex;
+        align-items: center;
+        height: 50px;
+      }
+      .el-checkbox__label {
+        display: flex;
+        align-items: center;
+        img {
+          width: 30px;
+          height: 30px;
+          margin-right: 10px;
+        }
+      }
+    }
+  }
+  .roleContentRight {
+    .chooseBox {
+      width: 280px;
+      height: 320px;
+      overflow-y: auto;
+      border: 1px solid rgba(235, 238, 240, 1);
+      margin-top: 26px;
+      padding: 20px;
+      .hasChoosedOne {
+        display: flex;
+        align-items: center;
+        height: 50px;
+        img {
+          width: 30px;
+          height: 30px;
+          margin-right: 10px;
         }
+      }
     }
+  }
 }
-</script>
+.newStaff {
+  margin-top: 26px;
+  .newItem {
+    display: flex;
+    align-items: center;
+  }
+}
+</style>
 
+<style lang="scss">
+.roleContent {
+  .roleContentLeft {
+    .chooseBox {
+      .el-checkbox {
+        display: flex;
+        align-items: center;
+      }
+      .el-checkbox__label {
+        display: flex;
+        align-items: center;
+      }
+    }
+  }
+}
+</style>

src/xt_pages/role/components/PermissionSettings.vue

@@ -0,0 +1,151 @@
+<template>
+  <el-dialog class="settingDialog" title="角色权限配置" width="750px" :visible.sync="visible">
+    <div class="roleSettings">
+      <div class="roleName">
+        <div class="roleNameLeft">
+          <p>角色名称</p>
+          <el-input placeholder="请输入内容" v-model="input" :disabled="true"></el-input>
+        </div>
+        <p style="color:#338AFB">删除该角色</p>
+      </div>
+      <div class="roleMain">
+        <div class="roleMainLeft">
+          <p class="roletitle">选择权限</p>
+          <div class="roleMainLeftBox">
+            <el-tree
+              :props="defaultProps"
+              :data="data"
+              :default-checked-keys="data"
+              node-key="id"
+              ref="tree"
+              default-expand-all
+              show-checkbox
+            >
+              <!-- <span class="custom-tree-node" slot-scope="{ node, data }">
+                                <span>{{ data.name }}</span>
+              </span>-->
+            </el-tree>
+          </div>
+        </div>
+        <div class="roleMainRight">
+          <div class="hasChoose">已选择权限</div>
+          <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
+        </div>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+
+<script>
+export default {
+  data() {
+    return {
+      visible: false,
+      data: [
+        {
+          id: 1,
+          label: "一级 2",
+          children: [
+            {
+              id: 3,
+              label: "二级 2-1",
+              children: [
+                {
+                  id: 4,
+                  label: "三级 3-1-1"
+                },
+                {
+                  id: 5,
+                  label: "三级 3-1-2"
+                }
+              ]
+            },
+            {
+              id: 2,
+              label: "二级 2-2",
+              children: [
+                {
+                  id: 6,
+                  label: "三级 3-2-1"
+                },
+                {
+                  id: 7,
+                  label: "三级 3-2-2"
+                }
+              ]
+            }
+          ]
+        }
+      ],
+      defaultProps: {
+        children: "children",
+        label: "label"
+      }
+    };
+  },
+  methods: {
+    show() {
+      this.visible = true;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.roleSettings {
+  .roleName {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .roleNameLeft {
+    display: flex;
+    align-items: center;
+    p {
+      width: 100px;
+    }
+  }
+  .roleMain {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 18px;
+    .roleMainLeft {
+      display: flex;
+      .roletitle {
+        width: 74px;
+      }
+      .roleMainLeftBox {
+        width: 300px;
+        height: 706px;
+        overflow-y: auto;
+        border: 1px solid rgba(234, 238, 240, 1);
+        border-radius: 4px;
+        padding: 20px 0 0 10px;
+      }
+    }
+    .roleMainRight {
+      width: 280px;
+      height: 706px;
+      overflow-y: auto;
+      border: 1px solid rgba(235, 238, 240, 1);
+      color: #303133;
+      .hasChoose {
+        height: 42px;
+        line-height: 42px;
+        padding-left: 20px;
+        background: #f6f8f9;
+      }
+    }
+  }
+}
+</style>
+
+
+<style lang="scss">
+.settingDialog {
+  .el-dialog__body {
+    max-height: 600px !important;
+  }
+}
+</style>

src/xt_pages/role/role.vue

@@ -12,7 +12,7 @@
       >
     </div>
     <div class="app-container">
-      <el-table
+      <!-- <el-table
         :data="roles"
         v-loading="loading_roles"
         border
@@ -22,24 +22,11 @@
           color: '#606266'
         }"
       >
-        <el-table-column
-          label="角色名称"
-          prop="name"
-          min-width="20%"
-          align="center"
-        ></el-table-column>
-        <el-table-column
-          label="角色描述"
-          prop="intro"
-          min-width="25%"
-          align="center"
-        ></el-table-column>
+        <el-table-column label="角色名称" prop="name" min-width="20%" align="center"></el-table-column>
+        <el-table-column label="角色描述" prop="intro" min-width="25%" align="center"></el-table-column>
         <el-table-column label="状态" min-width="15%" align="center">
           <template slot-scope="scope">
-            <div
-              v-if="scope.row.status == 1"
-              style="color: #67C23A; font-size:20px;"
-            >
+            <div v-if="scope.row.status == 1" style="color: #67C23A; font-size:20px;">
               <li class="el-icon-success"></li>
             </div>
             <div v-else style="color: #F56C6C; font-size:20px;">
@@ -49,28 +36,12 @@
         </el-table-column>
         <el-table-column label="操作" width="180" align="center">
           <template slot-scope="scope">
-            <router-link
-              :to="{ path: '/role/perview', query: { id: scope.row.id } }"
-            >
-              <el-tooltip
-                class="item"
-                effect="dark"
-                content="权限设置"
-                placement="top"
-              >
-                <el-button
-                  type="warning"
-                  icon="el-icon-setting"
-                  size="small"
-                ></el-button>
+            <router-link :to="{ path: '/role/perview', query: { id: scope.row.id } }">
+              <el-tooltip class="item" effect="dark" content="权限设置" placement="top">
+                <el-button type="warning" icon="el-icon-setting" size="small"></el-button>
               </el-tooltip>
             </router-link>
-            <el-tooltip
-              class="item"
-              effect="dark"
-              content="编辑"
-              placement="top"
-            >
+            <el-tooltip class="item" effect="dark" content="编辑" placement="top">
               <el-button
                 type="primary"
                 size="small"
@@ -79,12 +50,7 @@
               ></el-button>
             </el-tooltip>
 
-            <el-tooltip
-              class="item"
-              effect="dark"
-              content="移除"
-              placement="top"
-            >
+            <el-tooltip class="item" effect="dark" content="移除" placement="top">
               <el-button
                 type="danger"
                 size="small"
@@ -94,12 +60,7 @@
               ></el-button>
             </el-tooltip>
 
-            <el-tooltip
-              class="item"
-              effect="dark"
-              content="恢复"
-              placement="top"
-            >
+            <el-tooltip class="item" effect="dark" content="恢复" placement="top">
               <el-button
                 type="info"
                 size="small"
@@ -122,26 +83,185 @@
             layout="total, prev, pager, next, jumper"
           ></el-pagination>
         </el-col>
-      </el-row>
+      </el-row>-->
 
       <edit-role
         ref="edit_role"
         @did-add-role="didAddRole"
         @did-edit-role="didModifyRole"
       ></edit-role>
+      <permission-settings ref="permission_settings"></permission-settings>
+
+      <div class="roleTitle">
+        <i class="el-icon-warning warn"></i>
+        <p>
+          根据员工的职能选择角色，然后新增账号，可以自定义角色，进行权限配置
+        </p>
+      </div>
+      <div class="roleBox">
+        <div class="roleOne">
+          <div class="setting">
+            <i class="el-icon-setting"></i>
+            <span style="margin-right:20px" @click="onClick">权限配置</span>
+          </div>
+          <div class="avatar">
+            <img src="../../assets/img/pc1.png" alt />
+            <p class="avatarname">子管理员</p>
+          </div>
+          <div class="roleTip">
+            子管理员角色具备平台全部功能的使用权限,请谨慎配置...
+          </div>
+          <div class="roleTxt">
+            该角色目前已配置
+            <span style="color:#4A8AF3">0</span> 个员工
+          </div>
+          <div class="btnBox">
+            <el-button>新增用户</el-button>
+            <el-button>用户管理</el-button>
+          </div>
+        </div>
+        <div class="roleOne">
+          <div class="setting">
+            <i class="el-icon-setting"></i>
+            <span style="margin-right:20px">权限配置</span>
+          </div>
+          <div class="avatar">
+            <img src="../../assets/img/pc2.png" alt />
+            <p class="avatarname">医生</p>
+          </div>
+          <div class="roleTip">
+            医生角色能够进行建立患者档案，制定和调整患者透析治疗方案，定期评价病人的透析质量等...
+          </div>
+          <div class="roleTxt">
+            该角色目前已配置
+            <span style="color:#4A8AF3">0</span> 个员工
+          </div>
+          <div class="btnBox">
+            <el-button>新增用户</el-button>
+            <el-button>用户管理</el-button>
+          </div>
+        </div>
+        <div class="roleOne">
+          <div class="setting">
+            <i class="el-icon-setting"></i>
+            <span style="margin-right:20px">权限配置</span>
+          </div>
+          <div class="avatar">
+            <img src="../../assets/img/pc3.png" alt />
+            <p class="avatarname">护士</p>
+          </div>
+          <div class="roleTip">
+            护士角色能够进行病人透析管理，以及医院的感染控制与消毒记录等...
+          </div>
+          <div class="roleTxt">
+            该角色目前已配置
+            <span style="color:#4A8AF3">0</span> 个员工
+          </div>
+          <div class="btnBox">
+            <el-button>新增用户</el-button>
+            <el-button>用户管理</el-button>
+          </div>
+        </div>
+        <div class="roleOne">
+          <div class="setting">
+            <i class="el-icon-setting"></i>
+            <span style="margin-right:20px">权限配置</span>
+          </div>
+          <div class="avatar">
+            <img src="../../assets/img/pc2.png" alt />
+            <p class="avatarname">技师</p>
+          </div>
+          <div class="roleTip">
+            技师角色能够进行设备的管理，日常维护维修记录等...
+          </div>
+          <div class="roleTxt">
+            该角色目前已配置
+            <span style="color:#4A8AF3">0</span> 个员工
+          </div>
+          <div class="btnBox">
+            <el-button>新增用户</el-button>
+            <el-button>用户管理</el-button>
+          </div>
+        </div>
+        <div class="roleOne">
+          <div class="setting">
+            <i class="el-icon-setting"></i>
+            <span style="margin-right:20px">权限配置</span>
+          </div>
+          <div class="avatar">
+            <img src="../../assets/img/pc2.png" alt />
+            <p class="avatarname">运营</p>
+          </div>
+          <div class="roleTip">
+            运营角色能够在SCRM中管理微网站、使用营销工具、做会员管理和分销商品经营的操作...
+          </div>
+          <div class="roleTxt">
+            该角色目前已配置
+            <span style="color:#4A8AF3">0</span> 个员工
+          </div>
+          <div class="btnBox">
+            <el-button>新增用户</el-button>
+            <el-button>用户管理</el-button>
+          </div>
+        </div>
+        <div class="roleOne">
+          <div class="setting">
+            <i class="el-icon-setting"></i>
+            <span style="margin-right:20px">权限配置</span>
+          </div>
+          <div class="avatar">
+            <img src="../../assets/img/pc4.png" alt />
+            <p class="avatarname">库存</p>
+          </div>
+          <div class="roleTip">
+            库存角色负责透析耗材的日常管理，对耗材的入库、出库、退库的登记操作...
+          </div>
+          <div class="roleTxt">
+            该角色目前已配置
+            <span style="color:#4A8AF3">0</span> 个员工
+          </div>
+          <div class="btnBox">
+            <el-button>新增用户</el-button>
+            <el-button>用户管理</el-button>
+          </div>
+        </div>
+        <div class="roleOne">
+          <div class="setting">
+            <i class="el-icon-setting"></i>
+            <span style="margin-right:20px">权限配置</span>
+          </div>
+          <div class="avatar">
+            <img src="../../assets/img/pc5.png" alt />
+            <p class="avatarname">院长</p>
+          </div>
+          <div class="roleTip">
+            院长角色了解血透患者血液透析质量和相关的大数据，以及掌握透析中心整体运营情况
+          </div>
+          <div class="roleTxt">
+            该角色目前已配置
+            <span style="color:#4A8AF3">0</span> 个员工
+          </div>
+          <div class="btnBox">
+            <el-button>新增用户</el-button>
+            <el-button>用户管理</el-button>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
 import EditRole from "./components/EditRole.vue";
+import PermissionSettings from "./components/PermissionSettings.vue";
 import { getRoles, setRoleStatus } from "@/api/role/role";
 import BreadCrumb from "@/xt_pages/components/bread-crumb";
 
 export default {
   components: {
     EditRole,
-    BreadCrumb
+    BreadCrumb,
+    PermissionSettings
   },
   data: function() {
     return {
@@ -259,6 +379,11 @@ export default {
     },
     pageChange: function(nextPage) {
       this.requestRoleWithPage(nextPage);
+    },
+    ///
+
+    onClick() {
+      this.$refs.permission_settings.show();
     }
   }
 };
@@ -267,6 +392,71 @@ export default {
 .el-button + .el-button {
   margin-left: 0 !important;
 }
+.roleTitle {
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  margin-bottom: 24px;
+  .warn {
+    font-size: 18px;
+    color: #409eff;
+    margin-right: 5px;
+  }
+}
+.roleBox {
+  display: flex;
+  flex-wrap: wrap;
+  .roleOne {
+    width: 280px;
+    height: 350px;
+    margin: 0 15px 20px;
+    border: 1px solid rgba(235, 238, 240, 1);
+    border-radius: 4px;
+    overflow: hidden;
+  }
+  .setting {
+    // float: right;
+    text-align: right;
+    margin-right: 20px;
+    margin-top: 20px;
+    width: 100%;
+    color: #313234;
+  }
+  .avatar {
+    width: 100%;
+    display: flex;
+    justify-content: space-around;
+    flex-direction: column;
+    align-items: center;
+    img {
+      width: 60px;
+      height: 60px;
+      margin: 10px 0;
+    }
+    .avatarname {
+      font-size: 18px;
+    }
+  }
+  .roleTip {
+    width: 82%;
+    margin: 20px auto 10px;
+    font-size: 14px;
+    color: #989898;
+  }
+  .roleTxt {
+    width: 82%;
+    margin: 0 auto;
+    font-size: 14px;
+    color: #666666;
+  }
+  .btnBox {
+    width: 82%;
+    margin: 0 auto;
+    display: flex;
+    justify-content: space-between;
+    margin-top: 50px;
+  }
+}
 </style>
 <style>
 .el-table td,