From bb848895f7f747dc36da8345bf68144ae2557bd1 Mon Sep 17 00:00:00 2001
From: zouzhibing <esoul@654321>
Date: Sun, 13 Nov 2022 13:50:20 +0800
Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=E4=BF=AE=E5=A4=8D=E7=94=A8?=
 =?UTF-8?q?=E6=88=B7=E7=AE=A1=E7=90=86=E5=92=8C=E8=A7=92=E8=89=B2=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E9=83=A8=E5=88=86=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/mock/system.ts                            |  16 ++
 .../system/role/components/roleDrawer.vue     | 102 +++++++++++
 src/views/system/role/index.vue               | 109 +++--------
 .../system/user/components/userDialog.vue     | 122 +++++++++++++
 src/views/system/user/index.scss              |  37 ++++
 src/views/system/user/index.vue               | 170 ++++--------------
 6 files changed, 331 insertions(+), 225 deletions(-)
 create mode 100644 src/views/system/role/components/roleDrawer.vue
 create mode 100644 src/views/system/user/components/userDialog.vue
 create mode 100644 src/views/system/user/index.scss

diff --git a/src/mock/system.ts b/src/mock/system.ts
index 5c477fc..d81bcee 100644
--- a/src/mock/system.ts
+++ b/src/mock/system.ts
@@ -5,6 +5,8 @@ export const userData =[
         sex:'男',
         role:'超级管理员',
         status:true,
+        photo:'15333333333',
+        describe:'超级管理员不可删除'
     },
     {
         username:'zhangsan',
@@ -12,6 +14,8 @@ export const userData =[
         sex:'女',
         role:'管理员',
         status:true,
+        photo:'15311111111',
+        describe:'管理员不可删除'
     },
     {
         username:'lisi',
@@ -19,6 +23,8 @@ export const userData =[
         sex:'男',
         role:'管理员',
         status:true,
+        photo:'13823456789',
+        describe:'测试账户'
     },
     {
         username:'wangwu',
@@ -26,6 +32,8 @@ export const userData =[
         sex:'男',
         role:'超级管理员',
         status:false,
+        photo:'13923456789',
+        describe:'超级管理员不可删除'
     },
     {
         username:'zhaoliu',
@@ -33,6 +41,8 @@ export const userData =[
         sex:'男',
         role:'普通用户',
         status:false,
+        photo:'14523456789',
+        describe:'普通测试用户'
     },
 
 ]
@@ -42,16 +52,22 @@ export const roleData =[
     {
         roleName:'超级管理员',
         roleId:'admin',
+        roleIdentification:'admin',
+        describe:'这是超级管理员，拥有一切权限',
         createTime:'2022-09-02',
     },
     {
         roleName:'管理员',
         roleId:'role',
+        roleIdentification:'admin',
+        describe:'普通管理员',
         createTime:'2022-09-02',
     },
     {
         roleName:'普通用户',
         roleId:'other',
+        describe:'测试用户',
+        roleIdentification:'other',
         createTime:'2022-09-02',
     },
 
diff --git a/src/views/system/role/components/roleDrawer.vue b/src/views/system/role/components/roleDrawer.vue
new file mode 100644
index 0000000..db8f388
--- /dev/null
+++ b/src/views/system/role/components/roleDrawer.vue
@@ -0,0 +1,102 @@
+<template>
+  <el-drawer v-model="dialogVisible" :title="title" size="50%" @close="close">
+    <el-form
+        ref="ruleFormRef"
+        :model="ruleForm"
+        :rules="rules"
+        label-width="100px"
+    >
+      <el-form-item label="角色名称" prop="roleName">
+        <el-input v-model="ruleForm.roleName" placeholder="请输入角色名称"/>
+      </el-form-item>
+      <el-form-item label="角色标识" prop="roleIdentification">
+        <el-input v-model="ruleForm.roleIdentification" placeholder="请输入角色标识"/>
+      </el-form-item>
+      <el-form-item label="角色状态" >
+        <el-switch v-model="ruleForm.status" inline-prompt active-text="启用" inactive-text="禁用"></el-switch>
+      </el-form-item>
+      <el-form-item label="角色描述"  >
+        <el-input v-model="ruleForm.describe"
+                  type="textarea"
+                  placeholder="请输入角色描述"/>
+      </el-form-item>
+      <el-form-item label="菜单权限"  >
+        <el-tree
+            :data="menuData"
+            show-checkbox
+            node-key="id"
+            :props="defaultProps"
+        />
+      </el-form-item>
+
+    </el-form>
+    <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="dialogVisible = false">取消</el-button>
+          <el-button type="primary" @click="handleClose(ruleFormRef)">确定</el-button>
+        </span>
+    </template>
+  </el-drawer>
+</template>
+<script lang="ts" setup>
+  import {reactive, ref} from "vue";
+  import {FormInstance} from "element-plus";
+  import { menuData } from '@/mock/system'
+
+  const ruleFormRef = ref<FormInstance>()
+  const dialogVisible = ref(false)
+  const title = ref('新增角色')
+  const ruleForm = reactive({
+    roleName: '',
+    roleIdentification:'',
+    describe:null,
+    status:true
+  })
+  const defaultProps = {
+    children: 'children',
+    label: 'menuName',
+  }
+
+  function close() {
+    ruleFormRef.value.resetFields()
+    Object.keys(ruleForm).forEach(key=>{
+      if(key==='status') ruleForm[key] = true
+      else ruleForm[key] = null
+
+    })
+  }
+
+  const show = (item={})=>{
+    title.value = '新增角色'
+    if(item.roleName){
+      title.value = '编辑角色'
+      Object.keys(item).forEach(key=>{
+        ruleForm[key] = item[key]
+      })
+    }
+    dialogVisible.value = true
+  }
+
+  const rules = reactive({
+    roleName: [
+      { required: true, message: '请输入角色名称', trigger: 'blur' },
+    ],
+    roleIdentification: [{ required: true, message: '请输入角色标识', trigger: 'blur' }],
+  })
+
+  const handleClose = async (done: () => void) => {
+    await ruleFormRef.value.validate((valid, fields) => {
+      if (valid) {
+        dialogVisible.value = false
+        console.log('submit!', obj)
+      } else {
+        console.log('error submit!', fields)
+      }
+    })
+  }
+
+  defineExpose({
+    show,
+  })
+
+</script>
diff --git a/src/views/system/role/index.vue b/src/views/system/role/index.vue
index 77dcd49..1900cab 100644
--- a/src/views/system/role/index.vue
+++ b/src/views/system/role/index.vue
@@ -1,25 +1,33 @@
 <template>
   <div class="app-container">
     <div class="header">
-      <el-form :inline="true" :model="formInline" class="demo-form-inline" ref="ruleFormRef1">
+      <el-form :inline="true" :model="formInline" class="demo-form-inline" ref="ruleFormRef">
         <el-form-item label="角色名称" prop="roleName">
           <el-input v-model="formInline.roleName" />
         </el-form-item>
         <el-form-item>
           <el-button type="primary" @click="onSubmit" :icon="Search">查询</el-button>
-          <el-button @click="reset(ruleFormRef1)">重置</el-button>
+          <el-button @click="reset(ruleFormRef)">重置</el-button>
         </el-form-item>
       </el-form>
     </div>
     <div class="footer">
       <div class="util">
-        <el-button type="primary" @click="add">新增</el-button>
+        <el-button type="primary" @click="add">
+          <el-icon><Plus /></el-icon>
+          新增角色
+        </el-button>
       </div>
       <div class="table-inner">
         <el-table :data="tableData" style="width: 100%" border>
           <el-table-column prop="roleName" label="角色名称" />
+          <el-table-column prop="roleIdentification" label="角色标识" />
+          <el-table-column prop="describe"
+                           :show-overflow-tooltip="true"
+                           width="180"
+                           label="角色描述" />
           <el-table-column prop="createTime" label="创建时间" />
-          <el-table-column prop="status" label="操作">
+          <el-table-column prop="status" label="操作" width="180">
             <template #default="scope">
               <el-button type="primary" size="small" icon="Edit" @click="edit(scope.row)">
                 编辑
@@ -32,96 +40,34 @@
         </el-table>
       </div>
     </div>
-    <el-drawer v-model="dialogVisible" :title="title" width="50%">
-      <el-form
-        ref="ruleFormRef"
-        :model="ruleForm"
-        :rules="rules"
-        label-width="120px"
-        class="demo-ruleForm"
-        :size="formSize"
-      >
-        <el-form-item label="角色名称" prop="roleName">
-          <el-input v-model="ruleForm.roleName" />
-        </el-form-item>
-        <div style="padding-left: 50px">
-          <div>权限菜单分配</div>
-          <div style="padding-top: 20px; padding-left: 20px">
-            <el-tree
-              :default-expand-all="true"
-              :data="menuData"
-              show-checkbox
-              node-key="id"
-              :props="defaultProps"
-            />
-          </div>
-        </div>
-      </el-form>
-      <template #footer>
-        <span class="dialog-footer">
-          <el-button @click="dialogVisible = false">取消</el-button>
-          <el-button type="primary" @click="handleClose(ruleFormRef)">确定</el-button>
-        </span>
-      </template>
-    </el-drawer>
+    <RoleDrawer ref="roleDrawer"/>
   </div>
 </template>
 
 <script lang="ts" setup>
   import { ElMessageBox, ElMessage, FormInstance } from 'element-plus'
-  import {Search } from '@element-plus/icons-vue'
   import { reactive, ref } from 'vue'
+  import {Search } from '@element-plus/icons-vue'
+  import RoleDrawer from './components/roleDrawer.vue'
   import { roleData } from '@/mock/system'
   import * as dayjs from 'dayjs'
   const tableData = ref(roleData)
-  const dialogVisible = ref(false)
-  const title = ref('新增')
+
+  const roleDrawer = ref()
   const formSize = ref('default')
   const ruleFormRef = ref<FormInstance>()
-  const ruleFormRef1 = ref<FormInstance>()
   const formInline = reactive({})
-  const defaultProps = {
-    children: 'children',
-    label: 'menuName',
-  }
-  const rules = reactive({
-    nickname: [
-      { required: true, message: '请输入昵称', trigger: 'blur' },
-      { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
-    ],
-    username: [{ required: true, message: '请输入', trigger: 'blur' }],
-    role: [
-      {
-        required: true,
-        message: '请选择角色',
-        trigger: 'change',
-      },
-    ],
-    sex: [
-      {
-        required: true,
-        message: '请选择性别',
-        trigger: 'change',
-      },
-    ],
-  })
+
   const onSubmit = () => {
     console.log('submit!', formInline)
   }
   const reset = (formEl: FormInstance | undefined) => {}
   const add = () => {
-    title.value = '新增'
-    dialogVisible.value = true
+    roleDrawer.value.show()
   }
-  const ruleForm = reactive({
-    name: '',
-    sex: null,
-    price: null,
-  })
+
   const edit = (row) => {
-    title.value = '编辑'
-    // rowObj.value = row
-    dialogVisible.value = true
+    roleDrawer.value.show(row)
   }
 
   const del = (row) => {
@@ -137,7 +83,7 @@
   const changeStatus = (row) => {
     ElMessageBox.confirm(
       `确定要${!row.status ? '禁用' : '启用'} ${row.username} 账户吗？`,
-      '提示',
+      '温馨提示',
       {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
@@ -150,16 +96,7 @@
       })
   }
 
-  const handleClose = async (done: () => void) => {
-    await ruleFormRef.value.validate((valid, fields) => {
-      if (valid) {
-        dialogVisible.value = false
-        console.log('submit!', obj)
-      } else {
-        console.log('error submit!', fields)
-      }
-    })
-  }
+
 </script>
 
 <style scoped lang="scss">
diff --git a/src/views/system/user/components/userDialog.vue b/src/views/system/user/components/userDialog.vue
new file mode 100644
index 0000000..0a496e5
--- /dev/null
+++ b/src/views/system/user/components/userDialog.vue
@@ -0,0 +1,122 @@
+<template>
+  <el-dialog @close="close" v-model="dialogVisible" :title="title" width="50%">
+    <el-form
+        ref="ruleFormRef"
+        :model="ruleForm"
+        :rules="rules"
+        label-width="100px"
+    >
+      <el-form-item label="用户名" prop="username">
+        <el-input v-model="ruleForm.username" placeholder="请输入用户名"/>
+      </el-form-item>
+      <el-form-item label="昵称" prop="nickname">
+        <el-input v-model="ruleForm.nickname" placeholder="请输入昵称"/>
+      </el-form-item>
+      <el-form-item label="性别" prop="sex">
+        <el-radio-group v-model="ruleForm.sex">
+          <el-radio label="男">男</el-radio>
+          <el-radio label="女">女</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="关联角色" prop="role">
+        <el-select v-model="ruleForm.role" placeholder="请选择" style="width: 100%">
+          <el-option label="超级管理员" value="超级管理员" :key="0"></el-option>
+          <el-option label="管理员" value="管理员" :key="1"></el-option>
+          <el-option label="普通用户" value="普通用户" :key="2"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="手机号" prop="photo">
+        <el-input v-model="ruleForm.photo" placeholder="请输入手机号"/>
+      </el-form-item>
+      <el-form-item label="账户密码" >
+        <el-input v-model="ruleForm.password"
+                  placeholder="请输入账户密码,如果不输入默认123456"
+                  type="password" clearable/>
+      </el-form-item>
+      <el-form-item label="用户状态" >
+        <el-switch v-model="ruleForm.status" inline-prompt active-text="启用" inactive-text="禁用"></el-switch>
+      </el-form-item>
+      <el-form-item label="用户描述" prop="describe" >
+        <el-input v-model="ruleForm.describe"
+                  type="textarea"
+                  placeholder="请输入用户描述"/>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="dialogVisible = false">取消</el-button>
+          <el-button type="primary" @click="handleClose(ruleFormRef)">确定</el-button>
+        </span>
+    </template>
+  </el-dialog>
+</template>
+<script lang="ts" setup>
+import { ElMessageBox, ElMessage, FormInstance } from 'element-plus'
+import {reactive, ref} from "vue";
+
+const ruleFormRef = ref<FormInstance>()
+const dialogVisible = ref<boolean>(false)
+const title = ref('新增用户')
+
+const rules = reactive({
+  nickname: [
+    { required: true, message: '请输入昵称', trigger: 'blur' },
+    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
+  ],
+  username: [{ required: true, message: '请输入', trigger: 'blur' }],
+  role: [{required: true, message: '请选择角色', trigger: 'change',},],
+  sex: [{required: true, message: '请选择性别', trigger: 'change',},],
+})
+
+const ruleForm = reactive({
+  username: '',
+  nickname: null,
+  sex: '男',
+  role: null,
+  photo:null,
+  password:null,
+  describe:null,
+  status:true
+})
+
+function close() {
+  ruleFormRef.value.resetFields()
+  Object.keys(ruleForm).forEach(key=>{
+    if(key==='sex') ruleForm[key] = '男'
+    else if(key==='status') ruleForm[key] = true
+    else ruleForm[key] = null
+
+  })
+}
+
+const show = (item={})=>{
+  title.value = '新增用户'
+  if(item.username){
+    title.value = '编辑用户'
+    Object.keys(item).forEach(key=>{
+      ruleForm[key] = item[key]
+    })
+  }
+  dialogVisible.value = true
+}
+
+const handleClose = async (done: () => void) => {
+  await ruleFormRef.value.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false
+      console.log('submit!', ruleForm)
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+
+defineExpose({
+  show,
+})
+
+</script>
+<style lang="scss" scoped>
+
+</style>
+
diff --git a/src/views/system/user/index.scss b/src/views/system/user/index.scss
new file mode 100644
index 0000000..726b612
--- /dev/null
+++ b/src/views/system/user/index.scss
@@ -0,0 +1,37 @@
+.header{
+  display: flex;
+  padding: 16px 16px 0px 16px;
+  margin-bottom: 16px;
+  border-radius: 4px;
+  background: white;
+  box-shadow: 0 0 12px rgb(0 0 0 / 5%);
+}
+.footer{
+  flex: 1;
+  display: flex;
+  padding: 16px;
+  flex-direction: column;
+  border-radius: 4px;
+  overflow: hidden;
+  background: white;
+  box-shadow: 0 0 12px rgb(0 0 0 / 5%);
+  position: relative;
+  box-sizing: border-box;
+  .util{
+    margin-bottom: 15px;
+    display: flex;
+    justify-content: flex-end;
+    flex-shrink: 0;
+  }
+  .table-inner{
+    flex: 1;
+    position: relative;
+  }
+  .table{
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%
+  }
+}
diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
index b052952..d40cb9e 100644
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -1,34 +1,42 @@
 <template>
   <div class="app-container">
     <div class="header">
-      <el-form :inline="true" :model="formInline" ref="ruleFormRef1">
+      <el-form :inline="true" :model="formInline" ref="ruleFormRef">
         <el-form-item label="用户名" prop="username">
           <el-input v-model="formInline.username" />
         </el-form-item>
         <el-form-item>
           <el-button type="primary" @click="onSubmit" :icon="Search">查询</el-button>
-          <el-button @click="reset(ruleFormRef1)">重置</el-button>
+          <el-button @click="reset(ruleFormRef)">重置</el-button>
         </el-form-item>
       </el-form>
     </div>
     <div class="footer">
       <div class="util">
-        <el-button type="primary" @click="add">新增</el-button>
+        <el-button type="primary" @click="addHandler">
+          <el-icon><Plus /></el-icon>
+          新增用户
+        </el-button>
       </div>
       <div class="table-inner">
         <el-table :data="tableData" style="width: 100%" border>
-          <el-table-column prop="username" label="用户名" />
-          <el-table-column prop="nickname" label="昵称" />
-          <el-table-column prop="sex" label="性别" />
-          <el-table-column prop="role" label="角色" />
-          <el-table-column prop="status" label="状态">
+          <el-table-column prop="username" label="用户名" align="center"/>
+          <el-table-column prop="nickname" label="昵称" align="center"/>
+          <el-table-column prop="sex" label="性别" align="center"/>
+          <el-table-column prop="role" label="关联角色" align="center" width="120"/>
+          <el-table-column prop="photo" label="手机号" align="center" width="120"/>
+          <el-table-column prop="describe"
+                           :show-overflow-tooltip="true"
+                           width="180"
+                           label="用户描述" align="center"/>
+          <el-table-column prop="status" label="用户状态" align="center">
             <template #default="scope">
               <el-switch v-model="scope.row.status" @change="changeStatus(scope.row)" />
             </template>
           </el-table-column>
-          <el-table-column prop="status" label="操作">
+          <el-table-column prop="operator" label="操作" width="200px" align="center">
             <template #default="scope">
-              <el-button type="primary" size="small" icon="Edit" @click="edit(scope.row)">
+              <el-button type="primary" size="small" icon="Edit" @click="editHandler(scope.row)">
                 编辑
               </el-button>
               <el-button @click="del(scope.row)" type="danger" size="small" icon="Delete">
@@ -39,42 +47,7 @@
         </el-table>
       </div>
     </div>
-    <el-dialog @close="close" v-model="dialogVisible" :title="title" width="50%">
-      <el-form
-        ref="ruleFormRef"
-        :model="ruleForm"
-        :rules="rules"
-        label-width="120px"
-        class="demo-ruleForm"
-        :size="formSize"
-      >
-        <el-form-item label="用户名" prop="username">
-          <el-input v-model="ruleForm.username" />
-        </el-form-item>
-        <el-form-item label="昵称" prop="nickname">
-          <el-input v-model="ruleForm.nickname" />
-        </el-form-item>
-        <el-form-item label="性别" prop="sex">
-          <el-radio-group v-model="ruleForm.sex">
-            <el-radio label="男">男</el-radio>
-            <el-radio label="女">女</el-radio>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item label="角色" prop="role">
-          <el-select v-model="ruleForm.role" placeholder="请选择">
-            <el-option label="超级管理员" value="超级管理员" :key="0"></el-option>
-            <el-option label="管理员" value="管理员" :key="1"></el-option>
-            <el-option label="普通用户" value="普通用户" :key="2"></el-option>
-          </el-select>
-        </el-form-item>
-      </el-form>
-      <template #footer>
-        <span class="dialog-footer">
-          <el-button @click="dialogVisible = false">取消</el-button>
-          <el-button type="primary" @click="handleClose(ruleFormRef)">确定</el-button>
-        </span>
-      </template>
-    </el-dialog>
+    <UserDialog ref="userDialog"/>
   </div>
 </template>
 
@@ -83,60 +56,27 @@
   import {Search } from '@element-plus/icons-vue'
   import { reactive, ref } from 'vue'
   import { userData } from '@/mock/system'
+  import UserDialog from './components/userDialog.vue'
   import * as dayjs from 'dayjs'
   const tableData = ref(userData)
   const dialogVisible = ref(false)
-  const title = ref('新增')
-  const formSize = ref('default')
+  const userDialog = ref()
   const ruleFormRef = ref<FormInstance>()
-  const ruleFormRef1 = ref<FormInstance>()
   const formInline = reactive({})
-  const rules = reactive({
-    nickname: [
-      { required: true, message: '请输入昵称', trigger: 'blur' },
-      { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
-    ],
-    username: [{ required: true, message: '请输入', trigger: 'blur' }],
-    role: [
-      {
-        required: true,
-        message: '请选择角色',
-        trigger: 'change',
-      },
-    ],
-    sex: [
-      {
-        required: true,
-        message: '请选择性别',
-        trigger: 'change',
-      },
-    ],
-  })
+
   const onSubmit = () => {
     console.log('submit!', formInline)
   }
   const reset = (formEl: FormInstance | undefined) => {}
-  const add = () => {
-    title.value = '新增'
-    dialogVisible.value = true
+
+
+  const addHandler = () => {
+    userDialog.value.show()
   }
-  const ruleForm = reactive({
-    username: '',
-    nickname: null,
-    sex: null,
-    role: null,
-  })
-  const edit = (row) => {
-    title.value = '编辑'
-    dialogVisible.value = true
-    ruleForm.nickname = row.nickname
-    ruleForm.username = row.username
-    ruleForm.sex = row.sex
-    ruleForm.role = row.role
-  }
-  function close() {
-    ruleFormRef.value.resetFields()
+  const editHandler = (row) => {
+    userDialog.value.show(row)
   }
+
   const del = (row) => {
     ElMessageBox.confirm('你确定要删除当前项吗?', '温馨提示', {
       confirmButtonText: '确定',
@@ -150,7 +90,7 @@
   const changeStatus = (row) => {
     ElMessageBox.confirm(
       `确定要${!row.status ? '禁用' : '启用'} ${row.username} 账户吗？`,
-      '提示',
+      '温馨提示',
       {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
@@ -162,56 +102,8 @@
         row.status = !row.status
       })
   }
-
-  const handleClose = async (done: () => void) => {
-    await ruleFormRef.value.validate((valid, fields) => {
-      if (valid) {
-        dialogVisible.value = false
-        console.log('submit!', obj)
-      } else {
-        console.log('error submit!', fields)
-      }
-    })
-  }
 </script>
 
 <style scoped lang="scss">
-.header{
-  display: flex;
-  padding: 16px 16px 0px 16px;
-  margin-bottom: 16px;
-  border-radius: 4px;
-  background: white;
-  box-shadow: 0 0 12px rgb(0 0 0 / 5%);
-}
-.footer{
-  flex: 1;
-  display: flex;
-  padding: 16px;
-  flex-direction: column;
-  border-radius: 4px;
-  overflow: hidden;
-  background: white;
-  box-shadow: 0 0 12px rgb(0 0 0 / 5%);
-  position: relative;
-  box-sizing: border-box;
-  .util{
-    margin-bottom: 15px;
-    display: flex;
-    justify-content: flex-end;
-    flex-shrink: 0;
-  }
-  .table-inner{
-    flex: 1;
-    position: relative;
-  }
-  .table{
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%
-  }
-}
-
+@import "./index";
 </style>