first commit

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

@@ -0,0 +1,107 @@
+<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="密码"
+          :type="password"
+          :labelCol="labelCol"
+          :wrapperCol="wrapperCol"
+        >
+          <a-input type="password" v-decorator="['password', {rules: [{required: true, min: 5, message: '请输入密码'}]}]" />
+        </a-form-item>
+        <a-form-item
+          label="确认密码"
+          :labelCol="labelCol"
+          :wrapperCol="wrapperCol"
+        >
+          <a-input type="password" v-decorator="['passwordConfirm', {rules: [{required: true, min: 5, message: '请确认密码'}]}]" />
+        </a-form-item>
+      </a-form>
+    </a-spin>
+  </a-modal>
+</template>
+
+<script>
+import { validEmail } from '@/utils/validate'
+import { store } from '@/api/user'
+
+export default {
+  data () {
+    return {
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 7 }
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 13 }
+      },
+      visible: false,
+      confirmLoading: false,
+
+      form: this.$form.createForm(this)
+    }
+  },
+  methods: {
+    add () {
+      this.visible = true
+    },
+    handleEmail (rule, value, callback) {
+      if (!validEmail(value)) {
+        callback(new Error('邮箱地址不正确'))
+      }
+      callback()
+    },
+    handleSubmit () {
+      const { form: { validateFields } } = this
+      this.confirmLoading = true
+      validateFields((errors, values) => {
+        if (!errors) {
+          store(values).then((res) => {
+            this.$notification['success']({
+              message: res.data.message,
+              duration: 4
+            })
+            this.confirmLoading = false
+            this.handleCancel()
+          })
+            .catch(err => this.failed(err))
+        }
+      })
+    },
+    failed (errors) {
+      this.$notification['error']({
+        message: errors.message,
+        duration: 4
+      })
+      this.confirmLoading = false
+    },
+    handleCancel () {
+      this.visible = false
+    }
+  }
+}
+</script>

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

@@ -0,0 +1,172 @@
+<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/modules/TaskForm.vue

@@ -0,0 +1,79 @@
+<template>
+  <a-modal :width="640" :visible="visible" title="任务添加" @ok="handleSubmit" @cancel="visible = false">
+    <a-form @submit="handleSubmit" :form="form">
+      <a-form-item
+        label="任务名称"
+        :labelCol="labelCol"
+        :wrapperCol="wrapperCol"
+      >
+        <a-input v-decorator="['taskName', {rules:[{required: true, message: '请输入任务名称'}]}]" />
+      </a-form-item>
+      <a-form-item
+        label="开始时间"
+        :labelCol="labelCol"
+        :wrapperCol="wrapperCol"
+      >
+        <a-date-picker style="width: 100%" v-decorator="['startTime', {rules:[{required: true, message: '请选择开始时间'}]}]" />
+      </a-form-item>
+      <a-form-item
+        label="任务负责人"
+        :labelCol="labelCol"
+        :wrapperCol="wrapperCol"
+      >
+        <a-select v-decorator="['owner', {rules:[{required: true, message: '请选择开始时间'}]}]">
+          <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-textarea v-decorator="['desc']"></a-textarea>
+      </a-form-item>
+    </a-form>
+  </a-modal>
+</template>
+
+<script>
+export default {
+  name: 'TaskForm',
+  data () {
+    return {
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 7 }
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 13 }
+      },
+
+      visible: false,
+      form: this.$form.createForm(this)
+    }
+  },
+  methods: {
+    add () {
+      this.visible = true
+    },
+    edit (record) {
+      const { form: { setFieldsValue } } = this
+      this.visible = true
+      this.$nextTick(() => {
+        setFieldsValue({ taskName: 'test' })
+      })
+    },
+    handleSubmit () {
+      const { form: { validateFields } } = this
+      this.visible = true
+      validateFields((errors, values) => {
+        if (!errors) {
+          console.log('values', values)
+        }
+      })
+    }
+  }
+}
+</script>