feat: add base-list form

Author: sendya

.env.preview

@@ -0,0 +1,2 @@
+NODE_ENV=production
+VUE_APP_PREVIEW=true

src/views/list/StandardList.vue

@@ -29,7 +29,7 @@
       </div>
 
       <div class="operate">
-        <a-button type="dashed" style="width: 100%" icon="plus">添加</a-button>
+        <a-button type="dashed" style="width: 100%" icon="plus" @click="$refs.taskForm.add()">添加</a-button>
       </div>
 
       <a-list size="large" :pagination="{showSizeChanger: true, showQuickJumper: true, pageSize: 5, total: 50}">
@@ -66,12 +66,14 @@
         </a-list-item>
       </a-list>
 
+      <task-form ref="taskForm" />
     </a-card>
   </div>
 </template>
 
 <script>
 import HeadInfo from '@/components/tools/HeadInfo'
+import TaskForm from './modules/TaskForm'
 
 const data = []
 data.push({
@@ -129,7 +131,8 @@ data.push({
 export default {
   name: 'StandardList',
   components: {
-    HeadInfo
+    HeadInfo,
+    TaskForm
   },
   data () {
     return {

src/views/list/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>

vue.config.js

@@ -31,12 +31,6 @@ module.exports = {
   chainWebpack: (config) => {
     config.resolve.alias
       .set('@$', resolve('src'))
-      .set('@api', resolve('src/api'))
-      .set('@assets', resolve('src/assets'))
-      .set('@comp', resolve('src/components'))
-      .set('@views', resolve('src/views'))
-      .set('@layout', resolve('src/layout'))
-      .set('@static', resolve('src/static'))
 
     const svgRule = config.module.rule('svg')
     svgRule.uses.clear()