用户

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,6 +153,7 @@ export default {
           cell: (h, { row }) => {
             if (row.username != 'admin') {
               return (
+                <div style={{ display: 'flex' }}>
                   <div>
                     <t-button
                       theme="danger"
@@ -155,6 +162,15 @@ export default {
                       删除
                     </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,6 +231,7 @@ export default {
     async onSubmit({ validateResult, firstError }) {
       if (validateResult === true) {
         // 新增用户
+        if (this.operType == 1) {
           const res = await addUserApi(this.formData)
           if (res?.code == 200) {
             this.formData = { ...INITIAL_DATA }
@@ -207,6 +242,10 @@ export default {
             this.$message.error(res.msg)
           }
         } else {
+          // 更新用户
+          console.log(123)
+        }
+      } else {
         this.$message.warning(firstError)
       }
     },