用户

src/components/User.vue

@@ -10,7 +10,7 @@
         </t-space>
       </template>
       <template #actions>
-        <t-button theme="primary" @click="visible = true"> 新增用户 </t-button>
+        <t-button theme="primary" @click="addUser"> 新增用户 </t-button>
       </template>
       <t-drawer
         size="medium"
@@ -20,7 +20,7 @@
         :visible="visible"
         @close="handleClose"
         :onConfirm="handleClose"
-        header="新增用户"
+        :header="operType == 1 ? '新增用户' : '修改用户'"
       >
         <t-form
           :data="formData"
@@ -33,6 +33,7 @@
             <t-input
               v-model="formData.username"
               placeholder="请输入用户名"
+              :disabled="operType == 2"
             ></t-input>
           </t-form-item>
           <t-form-item name="password">
@@ -55,7 +56,11 @@
           <t-form-item>
             <t-space size="10px">
               <t-button theme="primary" type="submit">提交</t-button>
-              <t-button theme="default" variant="base" type="reset"
+              <t-button
+                v-if="operType == 1"
+                theme="default"
+                variant="base"
+                type="reset"
                 >重置</t-button
               >
             </t-space>
@@ -87,6 +92,7 @@ const INITIAL_DATA = {
 export default {
   data() {
     return {
+      operType: 1,
       formData: { ...INITIAL_DATA },
       rules: {
         username: [
@@ -147,13 +153,23 @@ export default {
           cell: (h, { row }) => {
             if (row.username != 'admin') {
               return (
-                <div>
-                  <t-button
-                    theme="danger"
-                    onClick={() => this.delUser(row.username)}
-                  >
-                    删除
-                  </t-button>
+                <div style={{ display: 'flex' }}>
+                  <div>
+                    <t-button
+                      theme="danger"
+                      onClick={() => this.delUser(row.username)}
+                    >
+                      删除
+                    </t-button>
+                  </div>
+                  <div style={{ marginLeft: '16px' }}>
+                    <t-button
+                      theme="primary"
+                      onClick={() => this.updateUser(row)}
+                    >
+                      修改
+                    </t-button>
+                  </div>
                 </div>
               )
             }
@@ -162,8 +178,26 @@ export default {
       ],
     }
   },
-
   methods: {
+    addUser() {
+      this.operType = 1
+      this.formData = {
+        username: '',
+        role: '',
+        password: '',
+      }
+      this.visible = true
+    },
+    updateUser(row) {
+      console.log(row)
+      this.formData = {
+        username: row.username,
+        role: row.role,
+        password: '',
+      }
+      this.operType = 2
+      this.visible = true
+    },
     handleClose() {
       this.formData = { ...INITIAL_DATA }
       this.visible = false
@@ -197,14 +231,19 @@ export default {
     async onSubmit({ validateResult, firstError }) {
       if (validateResult === true) {
         // 新增用户
-        const res = await addUserApi(this.formData)
-        if (res?.code == 200) {
-          this.formData = { ...INITIAL_DATA }
-          this.visible = false
-          this.$message.success('提交成功')
-          this.getUserList()
+        if (this.operType == 1) {
+          const res = await addUserApi(this.formData)
+          if (res?.code == 200) {
+            this.formData = { ...INITIAL_DATA }
+            this.visible = false
+            this.$message.success('提交成功')
+            this.getUserList()
+          } else {
+            this.$message.error(res.msg)
+          }
         } else {
-          this.$message.error(res.msg)
+          // 更新用户
+          console.log(123)
         }
       } else {
         this.$message.warning(firstError)