JEECG-BOOT 2.0.2版本发布

ant-design-vue-jeecg/src/views/form/advancedForm/AdvancedForm.vue

@@ -0,0 +1,206 @@
+<template>
+  <div>
+    <a-card class="card" title="仓库管理" :bordered="false">
+      <repository-form ref="repository" :showSubmit="false" />
+    </a-card>
+    <a-card class="card" title="任务管理" :bordered="false">
+      <task-form ref="task" :showSubmit="false" />
+    </a-card>
+
+    <!-- table -->
+    <a-card>
+      <form :autoFormCreate="(form) => this.form = form">
+        <a-table
+          :columns="columns"
+          :dataSource="data"
+          :pagination="false"
+        >
+          <template v-for="(col, i) in ['name', 'workId', 'department']" :slot="col" slot-scope="text, record, index">
+            <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, index">
+            <template v-if="record.editable">
+              <span v-if="record.isNew">
+                <a @click="saveRow(record.key)">添加</a>
+                <a-divider type="vertical" />
+                <a-popconfirm title="是否要删除此行？" @confirm="remove(record.key)">
+                  <a>删除</a>
+                </a-popconfirm>
+              </span>
+              <span v-else>
+                <a @click="saveRow(record.key)">保存</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>
+      </form>
+    </a-card>
+
+    <!-- fixed footer toolbar -->
+    <footer-tool-bar>
+      <a-button type="primary" @click="validate" :loading="loading">提交</a-button>
+    </footer-tool-bar>
+  </div>
+</template>
+
+<script>
+  import RepositoryForm from './RepositoryForm'
+  import TaskForm from './TaskForm'
+  import FooterToolBar from '@/components/tools/FooterToolBar'
+
+  export default {
+    name: "AdvancedForm",
+    components: {
+      FooterToolBar,
+      RepositoryForm,
+      TaskForm
+    },
+    data () {
+      return {
+        description: '高级表单常见于一次性输入和提交大批量数据的场景。',
+        loading: false,
+
+        // table
+        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' }
+          }
+        ],
+        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: '财务部'
+          }
+        ]
+      }
+    },
+    methods: {
+      handleSubmit (e) {
+        e.preventDefault()
+      },
+      newMember () {
+        this.data.push({
+          key: '-1',
+          name: '',
+          workId: '',
+          department: '',
+          editable: true,
+          isNew: true
+        })
+      },
+      remove (key) {
+        const newData = this.data.filter(item => item.key !== key)
+        this.data = newData
+      },
+      saveRow (key) {
+        let target = this.data.filter(item => item.key === key)[0]
+        target.editable = false
+        target.isNew = false
+      },
+      toggle (key) {
+        let target = this.data.filter(item => item.key === key)[0]
+        target.editable = !target.editable
+      },
+      getRowByKey (key, newData) {
+        const data = this.data
+        return (newData || data).filter(item => item.key === key)[0]
+      },
+      cancel (key) {
+        let target = this.data.filter(item => item.key === key)[0]
+        target.editable = false
+      },
+      handleChange (value, key, column) {
+        const newData = [...this.data]
+        const target = newData.filter(item => key === item.key)[0]
+        if (target) {
+          target[column] = value
+          this.data = newData
+        }
+      },
+
+      // 最终全页面提交
+      validate () {
+        this.$refs.repository.form.validateFields((err, values) => {
+          if (!err) {
+            this.$notification['error']({
+              message: 'Received values of form:',
+              description: values
+            })
+          }
+        })
+        this.$refs.task.form.validateFields((err, values) => {
+          if (!err) {
+            this.$notification['error']({
+              message: 'Received values of form:',
+              description: values
+            })
+          }
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .card{
+    margin-bottom: 24px;
+  }
+</style>