|
|
@@ -1,209 +1,209 @@
|
|
|
-<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 :style="{ width: isSideMenu() && isDesktop() ? `calc(100% - ${sidebarOpened ? 256 : 80}px)` : '100%'}">
|
|
|
- <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/FooterToolbar'
|
|
|
-import { mixin, mixinDevice } from '@/utils/mixin'
|
|
|
-
|
|
|
-export default {
|
|
|
- name: 'AdvancedForm',
|
|
|
- mixins: [mixin, mixinDevice],
|
|
|
- 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 () {
|
|
|
- const length = this.data.length
|
|
|
- this.data.push({
|
|
|
- key: (parseInt(this.data[length - 1].key) + 1).toString(),
|
|
|
- name: '',
|
|
|
- workId: '',
|
|
|
- department: '',
|
|
|
- editable: true,
|
|
|
- isNew: true
|
|
|
- })
|
|
|
- },
|
|
|
- remove (key) {
|
|
|
- const newData = this.data.filter(item => item.key !== key)
|
|
|
- this.data = newData
|
|
|
- },
|
|
|
- saveRow (key) {
|
|
|
- const target = this.data.filter(item => item.key === key)[0]
|
|
|
- target.editable = false
|
|
|
- target.isNew = false
|
|
|
- },
|
|
|
- toggle (key) {
|
|
|
- const 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) {
|
|
|
- const 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="less" scoped>
|
|
|
- .card{
|
|
|
- margin-bottom: 24px;
|
|
|
- }
|
|
|
-</style>
|
|
|
+<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">
|
|
|
+ <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.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 :style="{ width: isSideMenu() && isDesktop() ? `calc(100% - ${sidebarOpened ? 256 : 80}px)` : '100%'}">
|
|
|
+ <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/FooterToolbar'
|
|
|
+import { mixin, mixinDevice } from '@/utils/mixin'
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'AdvancedForm',
|
|
|
+ mixins: [mixin, mixinDevice],
|
|
|
+ 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 () {
|
|
|
+ const length = this.data.length
|
|
|
+ this.data.push({
|
|
|
+ key: (parseInt(this.data[length - 1].key) + 1).toString(),
|
|
|
+ name: '',
|
|
|
+ workId: '',
|
|
|
+ department: '',
|
|
|
+ editable: true,
|
|
|
+ isNew: true
|
|
|
+ })
|
|
|
+ },
|
|
|
+ remove (key) {
|
|
|
+ const newData = this.data.filter(item => item.key !== key)
|
|
|
+ this.data = newData
|
|
|
+ },
|
|
|
+ saveRow (key) {
|
|
|
+ const target = this.data.filter(item => item.key === key)[0]
|
|
|
+ target.editable = false
|
|
|
+ target.isNew = false
|
|
|
+ },
|
|
|
+ toggle (key) {
|
|
|
+ const 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) {
|
|
|
+ const 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="less" scoped>
|
|
|
+ .card{
|
|
|
+ margin-bottom: 24px;
|
|
|
+ }
|
|
|
+</style>
|
Sendya