修改用户

view/catch-admin/src/views/permissions/modules/CreateForm.vue

@@ -26,7 +26,6 @@
         </a-form-item>
         <a-form-item
           label="密码"
-          :type="password"
           :labelCol="labelCol"
           :wrapperCol="wrapperCol"
         >
@@ -86,6 +85,8 @@ export default {
               duration: 4
             })
             this.confirmLoading = false
+            this.form.resetFields()
+            this.handleOk()
             this.handleCancel()
           })
             .catch(err => this.failed(err))

view/catch-admin/src/views/permissions/modules/EditUser.vue

@@ -0,0 +1,114 @@
+<template>
+  <a-modal
+    title="编辑用户"
+    :width="640"
+    :visible="visible"
+    :confirmLoading="confirmLoading"
+    @ok="handleSubmit"
+    @cancel="handleCancel"
+  >
+    <a-spin :spinning="confirmLoading">
+      <a-form :form="form">
+        <a-form-item
+          label="用户名"
+          type="text"
+          :labelCol="labelCol"
+          :wrapperCol="wrapperCol"
+        >
+          <a-input v-decorator="['username', {rules: [{required: true, min: 3, message: '请输入至少3个字符！'}]}]" />
+        </a-form-item>
+        <a-form-item
+          label="邮箱"
+          :labelCol="labelCol"
+          :wrapperCol="wrapperCol"
+        >
+          <a-input v-decorator="['email', {rules: [{ validator: handleEmail }]}]" />
+        </a-form-item>
+        <a-form-item
+          label="密码"
+          :labelCol="labelCol"
+          :wrapperCol="wrapperCol"
+        >
+          <a-input type="password"/>
+        </a-form-item>
+        <a-form-item
+          label="确认密码"
+          :labelCol="labelCol"
+          :wrapperCol="wrapperCol"
+        >
+          <a-input type="password"/>
+        </a-form-item>
+      </a-form>
+    </a-spin>
+  </a-modal>
+</template>
+
+<script>
+import pick from 'lodash.pick'
+import { validEmail } from '@/utils/validate'
+import { update } from '@/api/user'
+
+export default {
+  name: 'EditUser',
+  data () {
+    return {
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 7 }
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 13 }
+      },
+      visible: false,
+      confirmLoading: false,
+      mdl: {},
+      form: this.$form.createForm(this)
+    }
+  },
+  methods: {
+    edit (record) {
+      console.log(record)
+      this.visible = true
+      const { form: { setFieldsValue } } = this
+      setFieldsValue(pick({ username: '123' }))
+    },
+    handleEmail (rule, value, callback) {
+      if (!validEmail(value)) {
+        callback(new Error('邮箱地址不正确'))
+      }
+      callback()
+    },
+    handleSubmit () {
+      const { form: { validateFields } } = this
+      validateFields((errors, values) => {
+        if (!errors) {
+          this.confirmLoading = true
+          update(values).then((res) => {
+            this.$notification['success']({
+              message: res.data.message,
+              duration: 4
+            })
+            this.confirmLoading = false
+            this.destroy()
+            this.handleCancel()
+          })
+            .catch(err => this.failed(err))
+        }
+      })
+    },
+    failed (errors) {
+      this.$notification['error']({
+        message: errors.message,
+        duration: 4
+      })
+      this.confirmLoading = false
+    },
+    handleCancel () {
+      console.log(12312)
+      // clear form & currentStep
+      this.visible = false
+    }
+  }
+}
+</script>

view/catch-admin/src/views/permissions/modules/StepByStepModal.vue

@@ -1,172 +0,0 @@
-<template>
-  <a-modal
-    title="分步对话框"
-    :width="640"
-    :visible="visible"
-    :confirmLoading="confirmLoading"
-    @cancel="handleCancel"
-  >
-    <a-spin :spinning="confirmLoading">
-      <a-steps :current="currentStep" :style="{ marginBottom: '28px' }" size="small">
-        <a-step title="基本信息" />
-        <a-step title="配置规则属性" />
-        <a-step title="设定调度周期" />
-      </a-steps>
-      <a-form :form="form">
-        <!-- step1 -->
-        <div v-show="currentStep === 0">
-          <a-form-item
-            label="规则名称"
-            :labelCol="labelCol"
-            :wrapperCol="wrapperCol"
-          >
-            <a-input v-decorator="['name', {rules: [{required: true}]}]" />
-          </a-form-item>
-          <a-form-item
-            label="规则描述"
-            :labelCol="labelCol"
-            :wrapperCol="wrapperCol"
-          >
-            <a-textarea :rows="4" v-decorator="['desc', {rules: [{required: true}]}]"></a-textarea>
-          </a-form-item>
-        </div>
-        <div v-show="currentStep === 1">
-          <a-form-item
-            label="监控对象"
-            :labelCol="labelCol"
-            :wrapperCol="wrapperCol"
-          >
-            <a-select v-decorator="['target', {initialValue: 0, rules: [{required: true}]}]" style="width: 100%">
-              <a-select-option :value="0">表一</a-select-option>
-              <a-select-option :value="1">表二</a-select-option>
-            </a-select>
-          </a-form-item>
-
-          <a-form-item
-            label="规则模板"
-            :labelCol="labelCol"
-            :wrapperCol="wrapperCol"
-          >
-            <a-select v-decorator="['template', { initialValue: 0, rules: [{required: true}]}]" style="width: 100%">
-              <a-select-option :value="0">规则模板一</a-select-option>
-              <a-select-option :value="1">规则模板二</a-select-option>
-            </a-select>
-          </a-form-item>
-
-          <a-form-item
-            label="规则类型"
-            :labelCol="labelCol"
-            :wrapperCol="wrapperCol"
-          >
-            <a-radio-group v-decorator="['type', {initialValue: 0, rules: [{required: true}]}]" style="width: 100%">
-              <a-radio :value="0">强</a-radio>
-              <a-radio :value="1">弱</a-radio>
-            </a-radio-group>
-          </a-form-item>
-        </div>
-
-        <div v-show="currentStep === 2">
-          <a-form-item
-            label="开始时间"
-            :labelCol="labelCol"
-            :wrapperCol="wrapperCol"
-          >
-            <a-date-picker v-decorator="['time', {rules: [{ type: 'object', required: true, message: 'Please select time!' }]}]" style="width: 100%" />
-          </a-form-item>
-          <a-form-item
-            label="调度周期"
-            :labelCol="labelCol"
-            :wrapperCol="wrapperCol"
-          >
-            <a-select v-decorator="['frequency', { initialValue: 'month', rules: [{required: true}]}]" style="width: 100%">
-              <a-select-option value="month">月</a-select-option>
-              <a-select-option value="week">周</a-select-option>
-            </a-select>
-          </a-form-item>
-        </div>
-        <!-- step1 end -->
-      </a-form>
-    </a-spin>
-    <template slot="footer">
-      <a-button key="back" @click="backward" v-if="currentStep > 0" :style="{ float: 'left' }" >上一步</a-button>
-      <a-button key="cancel" @click="handleCancel">取消</a-button>
-      <a-button key="forward" :loading="confirmLoading" type="primary" @click="handleNext(currentStep)">{{ currentStep === 2 && '完成' || '下一步' }}</a-button>
-    </template>
-  </a-modal>
-</template>
-
-<script>
-import pick from 'lodash.pick'
-
-const stepForms = [
-  ['name', 'desc'],
-  ['target', 'template', 'type'],
-  ['time', 'frequency']
-]
-
-export default {
-  name: 'StepByStepModal',
-  data () {
-    return {
-      labelCol: {
-        xs: { span: 24 },
-        sm: { span: 7 }
-      },
-      wrapperCol: {
-        xs: { span: 24 },
-        sm: { span: 13 }
-      },
-      visible: false,
-      confirmLoading: false,
-      currentStep: 0,
-      mdl: {},
-
-      form: this.$form.createForm(this)
-    }
-  },
-  methods: {
-    edit (record) {
-      this.visible = true
-      const { form: { setFieldsValue } } = this
-      this.$nextTick(() => {
-        setFieldsValue(pick(record, []))
-      })
-    },
-    handleNext (step) {
-      const { form: { validateFields } } = this
-      const currentStep = step + 1
-      if (currentStep <= 2) {
-        // stepForms
-        validateFields(stepForms[ this.currentStep ], (errors, values) => {
-          if (!errors) {
-            this.currentStep = currentStep
-          }
-        })
-        return
-      }
-      // last step
-      this.confirmLoading = true
-      validateFields((errors, values) => {
-        console.log('errors:', errors, 'val:', values)
-        if (!errors) {
-          console.log('values:', values)
-          setTimeout(() => {
-            this.confirmLoading = false
-            this.$emit('ok', values)
-          }, 1500)
-        } else {
-          this.confirmLoading = false
-        }
-      })
-    },
-    backward () {
-      this.currentStep--
-    },
-    handleCancel () {
-      // clear form & currentStep
-      this.visible = false
-      this.currentStep = 0
-    }
-  }
-}
-</script>

view/catch-admin/src/views/permissions/users.vue

@@ -69,14 +69,14 @@
       </span>
     </s-table>
     <create-form ref="createModal" @ok="handleOk" />
-    <step-by-step-modal ref="modal" @ok="handleOk"/>
+    <edit-user ref="modal" @ok="handleOk"/>
   </a-card>
 </template>
 
 <script>
 import moment from 'moment'
 import { STable, Ellipsis } from '@/components'
-import StepByStepModal from './modules/StepByStepModal'
+import EditUser from './modules/EditUser'
 import CreateForm from './modules/CreateForm'
 import { getRoleList, getUserList } from '@/api/manage'
 import { switchStatus } from '@/api/user'
@@ -106,7 +106,7 @@ export default {
     STable,
     Ellipsis,
     CreateForm,
-    StepByStepModal
+    EditUser
   },
   data () {
     return {
@@ -157,7 +157,6 @@ export default {
       ],
       // 加载数据方法 必须为 Promise 对象
       loadData: parameter => {
-        console.log('loadData.parameter', parameter)
         return getUserList(Object.assign(parameter, this.queryParam))
           .then(res => {
             return res
@@ -215,7 +214,6 @@ export default {
       }
     },
     renderStatus (value, row, index) {
-      console.log(row)
       return value === 1 ? <a-switch checkedChildren="正常" unCheckedChildren="禁用" defaultChecked onClick={this.handleSwitch} />
         : <a-switch checkedChildren="正常" id={row.id} unCheckedChildren="禁用" onClick={this.handleSwitch}/>
     },