fix: update form(not-completed)

src/views/other/BigForm.vue

@@ -0,0 +1,554 @@
+<template>
+  <a-card :bordered="false">
+    <a-form :form="form1" :self-update="true" @submit="handleForm1Submit">
+      <a-row class="form-row" :gutter="16">
+        <a-col :lg="6" :md="12" :sm="24">
+          <a-form-item label="仓库名">
+            <a-input
+              placeholder="请输入仓库名称"
+              v-decorator="[
+                'name',
+                {rules: [{ required: true, message: '请输入仓库名称', whitespace: true}]}
+              ]" />
+          </a-form-item>
+        </a-col>
+        <a-col :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
+          <a-form-item
+            label="仓库域名">
+            <a-input
+              addonBefore="http://"
+              addonAfter=".com"
+              placeholder="请输入"
+              v-decorator="[
+                'url',
+                {rules: [{ required: true, message: '请输入仓库域名', whitespace: true}]}
+              ]" />
+          </a-form-item>
+        </a-col>
+        <a-col :xl="{span: 9, offset: 1}" :lg="{span: 10}" :md="{span: 24}" :sm="24">
+          <a-form-item
+            label="仓库管理员">
+            <a-select placeholder="请选择管理员" v-decorator="[ 'owner', {rules: [{ required: true, message: '请选择管理员'}]} ]">
+              <a-select-option value="王同学">王同学</a-select-option>
+              <a-select-option value="李同学">李同学</a-select-option>
+              <a-select-option value="黄同学">黄同学</a-select-option>
+            </a-select>
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <a-row class="form-row" :gutter="16">
+        <a-col :lg="6" :md="12" :sm="24">
+          <a-form-item
+            label="审批人">
+            <a-select placeholder="请选择审批员" v-decorator="[ 'approver', {rules: [{ required: true, message: '请选择审批员'}]} ]">
+              <a-select-option value="王晓丽">王晓丽</a-select-option>
+              <a-select-option value="李军">李军</a-select-option>
+            </a-select>
+          </a-form-item>
+        </a-col>
+        <a-col :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
+          <a-form-item
+            label="生效日期">
+            <a-range-picker
+              style="width: 100%"
+              v-decorator="[
+                'dateRange',
+                {rules: [{ required: true, message: '请选择生效日期'}]}
+              ]" />
+          </a-form-item>
+        </a-col>
+        <a-col :xl="{span: 9, offset: 1}" :lg="{span: 10}" :md="{span: 24}" :sm="24">
+          <a-form-item
+            label="仓库类型">
+            <a-select
+              placeholder="请选择仓库类型"
+              v-decorator="[
+                'type',
+                {rules: [{ required: true, message: '请选择仓库类型'}]}
+              ]" >
+              <a-select-option value="公开">公开</a-select-option>
+              <a-select-option value="私密">私密</a-select-option>
+            </a-select>
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <a-form-item v-if="showSubmit">
+        <a-button htmlType="submit" >Submit</a-button>
+      </a-form-item>
+    </a-form>
+
+    <a-form :form="form2" :self-update="true" @submit="handleForm2Submit">
+      <a-row class="form-row" :gutter="16">
+        <a-col :lg="6" :md="12" :sm="24">
+          <a-form-item label="仓库名">
+            <a-input
+              placeholder="请输入仓库名称"
+              v-decorator="[
+                'name',
+                {rules: [{ required: true, message: '请输入仓库名称', whitespace: true}]}
+              ]" />
+          </a-form-item>
+        </a-col>
+        <a-col :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
+          <a-form-item
+            label="仓库域名">
+            <a-input
+              addonBefore="http://"
+              addonAfter=".com"
+              placeholder="请输入"
+              v-decorator="[
+                'url',
+                {rules: [{ required: true, message: '请输入仓库域名', whitespace: true}]}
+              ]" />
+          </a-form-item>
+        </a-col>
+        <a-col :xl="{span: 9, offset: 1}" :lg="{span: 10}" :md="{span: 24}" :sm="24">
+          <a-form-item
+            label="仓库管理员">
+            <a-select placeholder="请选择管理员" v-decorator="[ 'owner', {rules: [{ required: true, message: '请选择管理员'}]} ]">
+              <a-select-option value="王同学">王同学</a-select-option>
+              <a-select-option value="李同学">李同学</a-select-option>
+              <a-select-option value="黄同学">黄同学</a-select-option>
+            </a-select>
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <a-row class="form-row" :gutter="16">
+        <a-col :lg="6" :md="12" :sm="24">
+          <a-form-item
+            label="审批人">
+            <a-select placeholder="请选择审批员" v-decorator="[ 'approver', {rules: [{ required: true, message: '请选择审批员'}]} ]">
+              <a-select-option value="王晓丽">王晓丽</a-select-option>
+              <a-select-option value="李军">李军</a-select-option>
+            </a-select>
+          </a-form-item>
+        </a-col>
+        <a-col :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
+          <a-form-item
+            label="生效日期">
+            <a-range-picker
+              style="width: 100%"
+              v-decorator="[
+                'dateRange',
+                {rules: [{ required: true, message: '请选择生效日期'}]}
+              ]" />
+          </a-form-item>
+        </a-col>
+        <a-col :xl="{span: 9, offset: 1}" :lg="{span: 10}" :md="{span: 24}" :sm="24">
+          <a-form-item
+            label="仓库类型">
+            <a-select
+              placeholder="请选择仓库类型"
+              v-decorator="[
+                'type',
+                {rules: [{ required: true, message: '请选择仓库类型'}]}
+              ]" >
+              <a-select-option value="公开">公开</a-select-option>
+              <a-select-option value="私密">私密</a-select-option>
+            </a-select>
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <a-form-item v-if="showSubmit">
+        <a-button htmlType="submit" >Submit</a-button>
+      </a-form-item>
+    </a-form>
+
+    <a-form :form="form3" :self-update="true" @submit="handleForm2Submit">
+      <a-row class="form-row" :gutter="16">
+        <a-col :lg="6" :md="12" :sm="24">
+          <a-form-item label="仓库名">
+            <a-input
+              placeholder="请输入仓库名称"
+              v-decorator="[
+                'name',
+                {rules: [{ required: true, message: '请输入仓库名称', whitespace: true}]}
+              ]" />
+          </a-form-item>
+        </a-col>
+        <a-col :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
+          <a-form-item
+            label="仓库域名">
+            <a-input
+              addonBefore="http://"
+              addonAfter=".com"
+              placeholder="请输入"
+              v-decorator="[
+                'url',
+                {rules: [{ required: true, message: '请输入仓库域名', whitespace: true}]}
+              ]" />
+          </a-form-item>
+        </a-col>
+        <a-col :xl="{span: 9, offset: 1}" :lg="{span: 10}" :md="{span: 24}" :sm="24">
+          <a-form-item
+            label="仓库管理员">
+            <a-select placeholder="请选择管理员" v-decorator="[ 'owner', {rules: [{ required: true, message: '请选择管理员'}]} ]">
+              <a-select-option value="王同学">王同学</a-select-option>
+              <a-select-option value="李同学">李同学</a-select-option>
+              <a-select-option value="黄同学">黄同学</a-select-option>
+            </a-select>
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <a-row class="form-row" :gutter="16">
+        <a-col :lg="6" :md="12" :sm="24">
+          <a-form-item
+            label="审批人">
+            <a-select placeholder="请选择审批员" v-decorator="[ 'approver', {rules: [{ required: true, message: '请选择审批员'}]} ]">
+              <a-select-option value="王晓丽">王晓丽</a-select-option>
+              <a-select-option value="李军">李军</a-select-option>
+            </a-select>
+          </a-form-item>
+        </a-col>
+        <a-col :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
+          <a-form-item
+            label="生效日期">
+            <a-range-picker
+              style="width: 100%"
+              v-decorator="[
+                'dateRange',
+                {rules: [{ required: true, message: '请选择生效日期'}]}
+              ]" />
+          </a-form-item>
+        </a-col>
+        <a-col :xl="{span: 9, offset: 1}" :lg="{span: 10}" :md="{span: 24}" :sm="24">
+          <a-form-item
+            label="仓库类型">
+            <a-select
+              placeholder="请选择仓库类型"
+              v-decorator="[
+                'type',
+                {rules: [{ required: true, message: '请选择仓库类型'}]}
+              ]" >
+              <a-select-option value="公开">公开</a-select-option>
+              <a-select-option value="私密">私密</a-select-option>
+            </a-select>
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <a-form-item v-if="showSubmit">
+        <a-button htmlType="submit" >Submit</a-button>
+      </a-form-item>
+    </a-form>
+
+    <a-form :form="form4" :self-update="true" @submit="handleForm2Submit">
+      <a-row class="form-row" :gutter="16">
+        <a-col :lg="6" :md="12" :sm="24">
+          <a-form-item label="仓库名">
+            <a-input
+              placeholder="请输入仓库名称"
+              v-decorator="[
+                'name',
+                {rules: [{ required: true, message: '请输入仓库名称', whitespace: true}]}
+              ]" />
+          </a-form-item>
+        </a-col>
+        <a-col :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
+          <a-form-item
+            label="仓库域名">
+            <a-input
+              addonBefore="http://"
+              addonAfter=".com"
+              placeholder="请输入"
+              v-decorator="[
+                'url',
+                {rules: [{ required: true, message: '请输入仓库域名', whitespace: true}]}
+              ]" />
+          </a-form-item>
+        </a-col>
+        <a-col :xl="{span: 9, offset: 1}" :lg="{span: 10}" :md="{span: 24}" :sm="24">
+          <a-form-item
+            label="仓库管理员">
+            <a-select placeholder="请选择管理员" v-decorator="[ 'owner', {rules: [{ required: true, message: '请选择管理员'}]} ]">
+              <a-select-option value="王同学">王同学</a-select-option>
+              <a-select-option value="李同学">李同学</a-select-option>
+              <a-select-option value="黄同学">黄同学</a-select-option>
+            </a-select>
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <a-row class="form-row" :gutter="16">
+        <a-col :lg="6" :md="12" :sm="24">
+          <a-form-item
+            label="审批人">
+            <a-select placeholder="请选择审批员" v-decorator="[ 'approver', {rules: [{ required: true, message: '请选择审批员'}]} ]">
+              <a-select-option value="王晓丽">王晓丽</a-select-option>
+              <a-select-option value="李军">李军</a-select-option>
+            </a-select>
+          </a-form-item>
+        </a-col>
+        <a-col :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
+          <a-form-item
+            label="生效日期">
+            <a-range-picker
+              style="width: 100%"
+              v-decorator="[
+                'dateRange',
+                {rules: [{ required: true, message: '请选择生效日期'}]}
+              ]" />
+          </a-form-item>
+        </a-col>
+        <a-col :xl="{span: 9, offset: 1}" :lg="{span: 10}" :md="{span: 24}" :sm="24">
+          <a-form-item
+            label="仓库类型">
+            <a-select
+              placeholder="请选择仓库类型"
+              v-decorator="[
+                'type',
+                {rules: [{ required: true, message: '请选择仓库类型'}]}
+              ]" >
+              <a-select-option value="公开">公开</a-select-option>
+              <a-select-option value="私密">私密</a-select-option>
+            </a-select>
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <a-form-item v-if="showSubmit">
+        <a-button htmlType="submit" >Submit</a-button>
+      </a-form-item>
+    </a-form>
+
+    <a-form :form="form5" :self-update="true" @submit="handleForm2Submit">
+      <a-row class="form-row" :gutter="16">
+        <a-col :lg="6" :md="12" :sm="24">
+          <a-form-item label="仓库名">
+            <a-input
+              placeholder="请输入仓库名称"
+              v-decorator="[
+                'name',
+                {rules: [{ required: true, message: '请输入仓库名称', whitespace: true}]}
+              ]" />
+          </a-form-item>
+        </a-col>
+        <a-col :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
+          <a-form-item
+            label="仓库域名">
+            <a-input
+              addonBefore="http://"
+              addonAfter=".com"
+              placeholder="请输入"
+              v-decorator="[
+                'url',
+                {rules: [{ required: true, message: '请输入仓库域名', whitespace: true}]}
+              ]" />
+          </a-form-item>
+        </a-col>
+        <a-col :xl="{span: 9, offset: 1}" :lg="{span: 10}" :md="{span: 24}" :sm="24">
+          <a-form-item
+            label="仓库管理员">
+            <a-select placeholder="请选择管理员" v-decorator="[ 'owner', {rules: [{ required: true, message: '请选择管理员'}]} ]">
+              <a-select-option value="王同学">王同学</a-select-option>
+              <a-select-option value="李同学">李同学</a-select-option>
+              <a-select-option value="黄同学">黄同学</a-select-option>
+            </a-select>
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <a-row class="form-row" :gutter="16">
+        <a-col :lg="6" :md="12" :sm="24">
+          <a-form-item
+            label="审批人">
+            <a-select placeholder="请选择审批员" v-decorator="[ 'approver', {rules: [{ required: true, message: '请选择审批员'}]} ]">
+              <a-select-option value="王晓丽">王晓丽</a-select-option>
+              <a-select-option value="李军">李军</a-select-option>
+            </a-select>
+          </a-form-item>
+        </a-col>
+        <a-col :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
+          <a-form-item
+            label="生效日期">
+            <a-range-picker
+              style="width: 100%"
+              v-decorator="[
+                'dateRange',
+                {rules: [{ required: true, message: '请选择生效日期'}]}
+              ]" />
+          </a-form-item>
+        </a-col>
+        <a-col :xl="{span: 9, offset: 1}" :lg="{span: 10}" :md="{span: 24}" :sm="24">
+          <a-form-item
+            label="仓库类型">
+            <a-select
+              placeholder="请选择仓库类型"
+              v-decorator="[
+                'type',
+                {rules: [{ required: true, message: '请选择仓库类型'}]}
+              ]" >
+              <a-select-option value="公开">公开</a-select-option>
+              <a-select-option value="私密">私密</a-select-option>
+            </a-select>
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <a-form-item v-if="showSubmit">
+        <a-button htmlType="submit" >Submit</a-button>
+      </a-form-item>
+    </a-form>
+
+    <a-divider />
+
+    <a-table
+      :columns="columns"
+      :dataSource="data"
+      :pagination="false"
+      :loading="tableLoading"
+    >
+      <template v-for="(col, i) in ['name', 'workId', 'department']" :slot="col" slot-scope="text, record">
+        <a-input
+          :key="col"
+          v-if="record.editable"
+          style="margin: -5px 0"
+          :value="text"
+          :placeholder="columns[i].title"
+          @change="e => handleChange(e.target.value, record.key, col)"
+        />
+        <template v-else>{{ text }}</template>
+      </template>
+      <template slot="operation" slot-scope="text, record">
+        <template v-if="record.editable">
+          <span v-if="record.isNew">
+            <a @click="saveRow(record)">添加</a>
+            <a-divider type="vertical" />
+            <a-popconfirm title="是否要删除此行？" @confirm="remove(record.key)">
+              <a>删除</a>
+            </a-popconfirm>
+          </span>
+          <span v-else>
+            <a @click="saveRow(record)">保存</a>
+            <a-divider type="vertical" />
+            <a @click="cancel(record.key)">取消</a>
+          </span>
+        </template>
+        <span v-else>
+          <a @click="toggle(record.key)">编辑</a>
+          <a-divider type="vertical" />
+          <a-popconfirm title="是否要删除此行？" @confirm="remove(record.key)">
+            <a>删除</a>
+          </a-popconfirm>
+        </span>
+      </template>
+    </a-table>
+    <a-button style="width: 100%; margin-top: 16px; margin-bottom: 8px" type="dashed" icon="plus" @click="newMember">新增成员</a-button>
+
+  </a-card>
+</template>
+
+<script>
+const columns = [
+  {
+    title: '成员姓名',
+    dataIndex: 'name',
+    key: 'name',
+    width: '20%',
+    scopedSlots: { customRender: 'name' }
+  },
+  {
+    title: '工号',
+    dataIndex: 'workId',
+    key: 'workId',
+    width: '20%',
+    scopedSlots: { customRender: 'workId' }
+  },
+  {
+    title: '所属部门',
+    dataIndex: 'department',
+    key: 'department',
+    width: '40%',
+    scopedSlots: { customRender: 'department' }
+  },
+  {
+    title: '操作',
+    key: 'action',
+    scopedSlots: { customRender: 'operation' }
+  }
+]
+
+export default {
+  name: 'BigForm',
+  data () {
+    return {
+      showSubmit: true,
+      form1: this.$form.createForm(this),
+      form2: this.$form.createForm(this),
+      form3: this.$form.createForm(this),
+      form4: this.$form.createForm(this),
+      form5: this.$form.createForm(this),
+      tableLoading: false,
+      columns,
+      data: [{
+        key: '1',
+        name: '小明',
+        workId: '001',
+        editable: false,
+        department: '行政部'
+      },
+        {
+          key: '2',
+          name: '李莉',
+          workId: '002',
+          editable: false,
+          department: 'IT部'
+        },
+        {
+          key: '3',
+          name: '王小帅',
+          workId: '003',
+          editable: false,
+          department: '财务部'
+        }]
+    }
+  },
+  mounted () {
+    // 加 10 个表单行
+    new Array(10).fill(0).forEach(() => {
+      this.newMember()
+    })
+  },
+  methods: {
+    handleForm1Submit (e) {
+      e.preventDefault()
+      this.form1.validateFields()
+    },
+    handleForm2Submit (e) {
+      e.preventDefault()
+      this.form2.validateFields()
+    },
+
+    handleChange (value, key, column) {
+      const target = this.data.find(item => key === item.key)
+      if (target) {
+        target[column] = value
+      }
+    },
+
+    toggle (record) {
+
+    },
+    saveRow (record) {
+
+    },
+    cancel (key) {
+
+    },
+    remove (key) {
+      this.data = this.data.filter(item => item.key !== key)
+    },
+
+    newMember () {
+      const length = this.data.length
+      this.data.push({
+        key: length === 0 ? '1' : (parseInt(this.data[length - 1].key) + 1).toString(),
+        name: '',
+        workId: '',
+        department: '',
+        editable: true,
+        isNew: true
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/other/UserList.vue

@@ -28,6 +28,7 @@
     </div>
 
     <s-table
+      row-key="id"
       size="default"
       :columns="columns"
       :data="loadData"
@@ -79,7 +80,7 @@
       v-model="visible"
       @ok="handleOk"
     >
-      <a-form :autoFormCreate="(form)=>{this.form = form}">
+      <a-form :form="form">
 
         <a-form-item
           :labelCol="labelCol"
@@ -88,7 +89,12 @@
           hasFeedback
           validateStatus="success"
         >
-          <a-input placeholder="唯一识别码" v-model="mdl.id" id="no" disabled="disabled" />
+          <a-input
+            placeholder="唯一识别码"
+            id="no"
+            disabled="disabled"
+            v-decorator="['no']"
+          />
         </a-form-item>
 
         <a-form-item
@@ -98,7 +104,11 @@
           hasFeedback
           validateStatus="success"
         >
-          <a-input placeholder="起一个名字" v-model="mdl.name" id="role_name" />
+          <a-input
+            placeholder="起一个名字"
+            id="role_name"
+            v-decorator="['roleName']"
+          />
         </a-form-item>
 
         <a-form-item
@@ -108,9 +118,9 @@
           hasFeedback
           validateStatus="warning"
         >
-          <a-select v-model="mdl.status">
-            <a-select-option value="1">正常</a-select-option>
-            <a-select-option value="2">禁用</a-select-option>
+          <a-select v-decorator="['status', { initialValue: 1 }]">
+            <a-select-option :value="1">正常</a-select-option>
+            <a-select-option :value="2">禁用</a-select-option>
           </a-select>
         </a-form-item>
 
@@ -120,7 +130,12 @@
           label="描述"
           hasFeedback
         >
-          <a-textarea :rows="5" v-model="mdl.describe" placeholder="..." id="describe"/>
+          <a-textarea
+            :rows="5"
+            placeholder="..."
+            id="describe"
+            v-decorator="['describe']"
+          />
         </a-form-item>
 
         <a-divider />
@@ -149,6 +164,7 @@
 </template>
 
 <script>
+import pick from 'lodash.pick'
 import { STable } from '@/components'
 import { getRoleList, getServiceList } from '@/api/manage'
 
@@ -170,7 +186,7 @@ export default {
         xs: { span: 24 },
         sm: { span: 16 }
       },
-      form: null,
+      form: this.$form.createForm(this),
       mdl: {},
 
       // 高级搜索 展开/关闭
@@ -226,7 +242,7 @@ export default {
   },
   methods: {
     handleEdit (record) {
-      this.mdl = Object.assign({}, record)
+      this.form.setFieldsValue(pick(record, ['no', 'status', 'describe', 'roleName']))
 
       this.mdl.permissions.forEach(permission => {
         permission.actionsOptions = permission.actionEntitySet.map(action => {