两个test参考代码

src/views/reportForms/full-rate-table/test.vue

@@ -0,0 +1,113 @@
+<template>
+  <div class="aa">
+    <a-form-model ref="tableformRef" :model="form">
+
+      <a-table :columns="column" :data-source="form.list" :rowKey="record => record.id" :pagination="false">
+
+        <template slot="name" slot-scope="text, record, index">
+          <a-form-model-item :prop="'list.' + index + '.name'" :rules="rules.name">
+            <a-input v-model="record.name"></a-input>
+          </a-form-model-item>
+        </template>
+
+        <template slot="sex" slot-scope="text, record, index">
+          <a-form-model-item :prop="'list.' + index + '.sex'" :rules="rules.sex">
+            <a-select v-model="record.sex">
+              <a-select-option value="1">男</a-select-option>
+              <a-select-option value="2">女</a-select-option>
+            </a-select>
+          </a-form-model-item>
+        </template>
+
+        <template slot="age" slot-scope="text, record, index">
+          <a-form-model-item :prop="'list.' + index + '.age'" :rules="rules.age">
+            <a-input-number v-model="record.age"></a-input-number>
+          </a-form-model-item>
+        </template>
+
+        <template slot="level" slot-scope="text, record, index">
+          <a-form-model-item :prop="'list.' + index + '.level'" :rules="rules.level">
+            <a-select v-model="record.level">
+              <a-select-option :value="1">男</a-select-option>
+              <a-select-option :value="2">女</a-select-option>
+            </a-select>
+          </a-form-model-item>
+        </template>
+
+      </a-table>
+
+      <a-form-model-item>
+        <a-button @click="handleSubmit">提交</a-button>
+      </a-form-model-item>
+    </a-form-model>
+
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    const validatorAge = (rule, value, callback) => {
+      if (!value) {
+        callback(new Error('年龄不能为空'))
+      } else if (value < 20 || value > 50) {
+        callback(new Error('年龄输入错误'))
+      } else callback()
+    }
+    return {
+      form: {
+        list: [
+          { id: '1', name: '唐僧', sex: '1', age: '35', level: 1, describe: '他是师傅' },
+          { id: '2', name: '孙悟空', sex: '2', age: '20', level: 2, describe: '他是大师兄' },
+          { id: '3', name: '沙和尚', sex: '1', age: '30', level: 4, describe: '他是三师弟' },
+          { id: '4', name: '猪八戒', sex: '2', age: '33', level: 3, describe: '他是猪八戒' }
+        ]
+      },
+      rules: {
+        name: { required: true, message: '姓名不能为空' },
+        sex: { required: true, message: '性别不能为空' },
+        age: [{ required: true, validator: validatorAge }],
+        level: { required: true, message: '等级不能为空' }
+      },
+      column: [
+        {
+          title: '姓名',
+          key: 'name',
+          scopedSlots: { customRender: 'name' }
+        },
+        {
+          title: '性别',
+          key: 'sex',
+          scopedSlots: { customRender: 'sex' }
+        },
+        {
+          title: '年龄',
+          key: 'age',
+          scopedSlots: { customRender: 'age' }
+        },
+        {
+          title: '等级',
+          key: 'level',
+          scopedSlots: { customRender: 'level' }
+        },
+        {
+          title: '描述',
+          key: 'describe',
+          dataIndex: 'describe'
+        }
+      ]
+    }
+  },
+  methods: {
+    handleSubmit() {
+      this.$refs.tableformRef.validate(async valid => {
+        if (valid) {
+          this.$message.success('提交成功')
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style></style>

src/views/shipment-details/test.vue

@@ -0,0 +1,180 @@
+<template>
+  <div>
+    <a-button type="primary" @click="showDrawer"> <a-icon type="plus" /> New account </a-button>
+    <a-drawer
+      title="Create a new account"
+      :width="720"
+      :visible="visible"
+      :body-style="{ paddingBottom: '80px' }"
+      @close="onClose"
+    >
+      <a-form :form="form" layout="vertical" hide-required-mark>
+        <a-row :gutter="16">
+          <a-col :span="12">
+            <a-form-item label="Name">
+              <a-input
+                v-decorator="[
+                  'name',
+                  {
+                    rules: [{ required: true, message: 'Please enter user name' }],
+                  },
+                ]"
+                placeholder="Please enter user name"
+              />
+            </a-form-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-item label="Url">
+              <a-input
+                v-decorator="[
+                  'url',
+                  {
+                    rules: [{ required: true, message: 'please enter url' }],
+                  },
+                ]"
+                style="width: 100%"
+                addon-before="http://"
+                addon-after=".com"
+                placeholder="please enter url"
+              />
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row :gutter="16">
+          <a-col :span="12">
+            <a-form-item label="Owner">
+              <a-select
+                v-decorator="[
+                  'owner',
+                  {
+                    rules: [{ required: true, message: 'Please select an owner' }],
+                  },
+                ]"
+                placeholder="Please a-s an owner"
+              >
+                <a-select-option value="xiao">
+                  Xiaoxiao Fu
+                </a-select-option>
+                <a-select-option value="mao">
+                  Maomao Zhou
+                </a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-item label="Type">
+              <a-select
+                v-decorator="[
+                  'type',
+                  {
+                    rules: [{ required: true, message: 'Please choose the type' }],
+                  },
+                ]"
+                placeholder="Please choose the type"
+              >
+                <a-select-option value="private">
+                  Private
+                </a-select-option>
+                <a-select-option value="public">
+                  Public
+                </a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row :gutter="16">
+          <a-col :span="12">
+            <a-form-item label="Approver">
+              <a-select
+                v-decorator="[
+                  'approver',
+                  {
+                    rules: [{ required: true, message: 'Please choose the approver' }],
+                  },
+                ]"
+                placeholder="Please choose the approver"
+              >
+                <a-select-option value="jack">
+                  Jack Ma
+                </a-select-option>
+                <a-select-option value="tom">
+                  Tom Liu
+                </a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-item label="DateTime">
+              <a-date-picker
+                v-decorator="[
+                  'dateTime',
+                  {
+                    rules: [{ required: true, message: 'Please choose the dateTime' }],
+                  },
+                ]"
+                style="width: 100%"
+                :get-popup-container="trigger => trigger.parentNode"
+              />
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row :gutter="16">
+          <a-col :span="24">
+            <a-form-item label="Description">
+              <a-textarea
+                v-decorator="[
+                  'description',
+                  {
+                    rules: [{ required: true, message: 'Please enter url description' }],
+                  },
+                ]"
+                :rows="4"
+                placeholder="please enter url description"
+              />
+            </a-form-item>
+          </a-col>
+        </a-row>
+      </a-form>
+
+      <!-- 页面底部保存取消 -->
+      <div
+        :style="{
+          position: 'absolute',
+          right: 0,
+          bottom: 0,
+          width: '100%',
+          borderTop: '1px solid #e9e9e9',
+          padding: '10px 16px',
+          background: '#fff',
+          textAlign: 'right',
+          zIndex: 1,
+        }"
+      >
+        <a-button :style="{ marginRight: '8px' }" @click="onClose">
+          取消
+        </a-button>
+        <a-button type="primary" @click="onClose">
+          保存
+        </a-button>
+      </div>
+    </a-drawer>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      form: this.$form.createForm(this),
+      visible: false
+    }
+  },
+  methods: {
+    showDrawer() {
+      this.visible = true
+    },
+    onClose() {
+      this.visible = false
+    }
+  }
+}
+</script>