From 15b6cfbd8492a71816cb67d2a44a876d5aeed238 Mon Sep 17 00:00:00 2001
From: caill <815519168@qq.com>
Date: Fri, 12 May 2023 17:59:29 +0800
Subject: [PATCH] =?UTF-8?q?=E5=BC=B9=E7=AA=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/dialog.vue               |  41 +++++++
 src/pages/modules/systemmanage/user.vue | 149 ++++++++++++------------
 src/style/common.styl                   |  17 ++-
 3 files changed, 127 insertions(+), 80 deletions(-)
 create mode 100644 src/components/dialog.vue

diff --git a/src/components/dialog.vue b/src/components/dialog.vue
new file mode 100644
index 0000000..8c9b27d
--- /dev/null
+++ b/src/components/dialog.vue
@@ -0,0 +1,41 @@
+<template>
+  <div>
+    <div v-if="active" class="dialog_wrapper">
+      <div class="dialog">
+        <div class="dialog_header">
+          <span class="dialog_title">{{title}}</span>
+          <button class="dialog_headerbtn" @click="toCancle">
+            <i class="iconfont icon_close"></i>
+          </button>
+        </div>
+        <div class="dialog_body">
+          <slot></slot>
+        </div>
+        <div class="dialog_footer">
+          <button class="button button--primary" @click="toCancle">取消</button>
+          <button class="button button--primary">确定</button>
+        </div>
+      </div>
+    </div>
+    <div v-if="active" class="modal"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'jxDialog',
+  props: {
+    title: String
+  },
+  data () {
+    return {
+      active: false
+    }
+  },
+  methods: {
+    toCancle () {
+      this.active = false
+    }
+  }
+}
+</script>
diff --git a/src/pages/modules/systemmanage/user.vue b/src/pages/modules/systemmanage/user.vue
index a42b7db..5b57c1c 100644
--- a/src/pages/modules/systemmanage/user.vue
+++ b/src/pages/modules/systemmanage/user.vue
@@ -18,96 +18,95 @@
         </tr>
         <tr v-for="(e, i) in datalist" :key="i">
           <td>{{i+1}}</td>
-          <td></td>
+          <td>{{e.name}}</td>
           <td>{{e.name}}</td>
           <td></td>
           <td></td>
           <td></td>
-          <td></td>
+          <td>
+            <div class="row">
+              <button class="button button--primary">修改</button>
+              <button class="button button--primary">分配角色</button>
+              <button class="button button--primary" @click="setPass">重置密码</button>
+              <button class="button button--primary">删除</button>
+            </div>
+          </td>
         </tr>
       </table>
     </div>
-    <div v-if="active" class="dialog_wrapper">
-      <div class="dialog">
-        <div class="dialog_header">
-          <span class="dialog_title">添加用户</span>
-          <button class="dialog_headerbtn">
-            <i class="iconfont icon_close"></i>
-          </button>
+    <jxDialog
+    ref="child1"
+    title="添加用户">
+    <div class="form">
+      <div class="form_item">
+        <div class="form_item__label"><i>*</i>用户名</div>
+        <div class="form_item__content">
+          <input type="text" class="form_item__input">
         </div>
-        <div class="dialog_body">
-          <div class="form">
-            <div class="form_item">
-              <div class="form_item__label"><i>*</i>用户名</div>
-              <div class="form_item__content">
-                <input type="text" class="form_item__input">
-              </div>
-            </div>
-            <div class="form_item">
-              <div class="form_item__label">电话</div>
-              <div class="form_item__content">
-                <input type="text" class="form_item__input">
-              </div>
-            </div>
-          </div>
-          <div class="form">
-            <div class="form_item">
-              <div class="form_item__label">姓名</div>
-              <div class="form_item__content">
-                <input type="text" class="form_item__input">
-              </div>
-            </div>
-            <div class="form_item">
-              <div class="form_item__label">性别</div>
-              <div class="form_item__content">
-                <div class="form_item__radio">
-                  <div class="radio__input"><i class="iconfont icon_radio icon_radio_checked"></i></div>
-                  <div class="radio__label">男</div>
-                </div>
-                <div class="form_item__radio">
-                  <div class="radio__input"><i class="iconfont icon_radio"></i></div>
-                  <div class="radio__label">女</div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="form">
-            <div class="form_item">
-              <div class="form_item__label"><i>*</i>密码</div>
-              <div class="form_item__content">
-                <input type="text" class="form_item__input">
-              </div>
-            </div>
-            <div class="form_item">
-              <div class="form_item__label">角色</div>
-              <div class="form_item__content">
-                <el-select v-model="value" placeholder="请选择">
-                  <el-option
-                    v-for="item in options"
-                    :key="item.value"
-                    :label="item.label"
-                    :value="item.value">
-                  </el-option>
-                </el-select>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="dialog_footer">
-          <button class="button button--primary" @click="toCancle">取消</button>
-          <button class="button button--primary">确定</button>
+      </div>
+      <div class="form_item">
+        <div class="form_item__label">电话</div>
+        <div class="form_item__content">
+          <input type="text" class="form_item__input">
         </div>
       </div>
     </div>
-    <div v-if="active" class="modal"></div>
+    <div class="form">
+      <div class="form_item">
+        <div class="form_item__label">姓名</div>
+        <div class="form_item__content">
+          <input type="text" class="form_item__input">
+        </div>
+      </div>
+      <div class="form_item">
+        <div class="form_item__label">性别</div>
+        <div class="form_item__content">
+          <div class="form_item__radio">
+            <div class="radio__input"><i class="iconfont icon_radio icon_radio_checked"></i></div>
+            <div class="radio__label">男</div>
+          </div>
+          <div class="form_item__radio">
+            <div class="radio__input"><i class="iconfont icon_radio"></i></div>
+            <div class="radio__label">女</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="form">
+      <div class="form_item">
+        <div class="form_item__label"><i>*</i>密码</div>
+        <div class="form_item__content">
+          <input type="text" class="form_item__input">
+        </div>
+      </div>
+      <div class="form_item">
+        <div class="form_item__label">角色</div>
+        <div class="form_item__content">
+          <el-select v-model="value" placeholder="请选择">
+            <el-option
+              v-for="item in options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value">
+            </el-option>
+          </el-select>
+        </div>
+      </div>
+    </div>
+    </jxDialog>
+    <jxDialog ref="child2">确定重置密码吗？</jxDialog>
   </div>
 </template>
 
 <script>
+import jxDialog from '@components/dialog.vue'
 export default {
+  components: {
+    jxDialog
+  },
   data () {
     return {
-      datalist: [{name: 'a'}, {name: 'a'}, {name: 'a'}, {name: 'a'}, {name: 'a'}, {name: 'a'}, {name: 'a'}, {name: 'ac'}, {name: 'a'}, {name: 'a'}, {name: 'a'}, {name: 'a'}, {name: 'a'}, {name: 'a'}, {name: 'ad'}],
+      datalist: [{name: 'a氪金大佬发家里的饭交流交流'}, {name: 'a'}, {name: 'a'}, {name: 'a'}, {name: 'a'}, {name: 'a'}, {name: 'a'}, {name: 'ac'}, {name: 'a'}, {name: 'a'}, {name: 'a'}, {name: 'a'}, {name: 'a'}, {name: 'a'}, {name: 'ad'}],
       options: [{
         value: '选项1',
         label: '超级管理员'
@@ -127,10 +126,10 @@ export default {
   },
   methods: {
     addData () {
-      this.active = true
+      this.$refs.child1.active = true
     },
-    toCancle () {
-      this.active = false
+    setPass () {
+      this.$refs.child2.active = true
     }
   }
 }
diff --git a/src/style/common.styl b/src/style/common.styl
index f0eb680..aabb11e 100644
--- a/src/style/common.styl
+++ b/src/style/common.styl
@@ -284,13 +284,12 @@
   _wh(100%, 100%)
   padding 20px 20px 30px 20px
 .buttons_wrapper
-  .row
-      margin-bottom 10px
+  margin-bottom 10px
 .grid_wrapper
   width 100%
   table
     table-layout: fixed;
-    width: 100%;
+    min-width: 100%;
     border-collapse: separate;
     border-spacing: 0;
     border: 0
@@ -302,13 +301,13 @@
       white-space: nowrap;
       text-align: center;
       position: sticky;
-      top: 0;
+      top: -1px;
       background: #d7d7d7;
       font-size: 14px;
       line-height: 23px;
       color: #323232;
       font-weight: bold;
-      z-index: 100;
+      z-index: 99;
       padding 12px 10px;
     td
       box-sizing: border-box;
@@ -326,3 +325,11 @@
       background: #fff;
       &:last-child
         border-right: none; 
+.grid_wrapper table th:first-child
+	position: sticky;
+	left: 0;
+	z-index: 100;
+.grid_wrapper table td:first-child
+	position: sticky;
+	left: 0;
+	z-index: 99;