gxwebsoft/jczxw-java
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
weicw
2021-07-29 16:17:26 +08:00
commit a6eb6f83d1
127 changed files with 60792 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

401
src/views/form/advanced.vue Normal file
View File

@@ -0,0 +1,401 @@
<template>
<a-page-header :ghost="false" title="复杂表单">
<div class="ele-text-secondary">复杂表单常见于一次性输入和提交大批量数据的场景。</div>
</a-page-header>
<div class="ele-body ele-body-card" style="padding-bottom: 48px;">
<a-form
ref="form"
:model="form"
:rules="rules"
:label-col="{md: {span: 6}, sm: {span: 24}}"
:wrapper-col="{md: {span: 18}, sm: {span: 24}}">
<a-card :bordered="false" title="仓库信息">
<a-row :gutter="16">
<a-col :lg="8" :md="12" :sm="24" :xs="24">
<a-form-item label="仓库名:" name="name">
<a-input
v-model:value="form.name"
placeholder="请输入仓库名"
allow-clear/>
</a-form-item>
</a-col>
<a-col :lg="8" :md="12" :sm="24" :xs="24">
<a-form-item label="仓库域名:" name="url">
<a-input
v-model:value="form.url"
placeholder="请输入"
allow-clear
addon-before="http://"
addon-after=".com"/>
</a-form-item>
</a-col>
<a-col :lg="8" :md="12" :sm="24" :xs="24">
<a-form-item label="仓库管理员:" name="administrator">
<a-select
v-model:value="form.administrator"
placeholder="请选择仓库管理员"
allow-clear>
<a-select-option value="1">SunSmile</a-select-option>
<a-select-option value="2">Jasmine</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :lg="8" :md="12" :sm="24" :xs="24">
<a-form-item label="审批人:" name="approver">
<a-select
v-model:value="form.approver"
placeholder="请选择审批人"
allow-clear>
<a-select-option value="1">SunSmile</a-select-option>
<a-select-option value="2">Jasmine</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :lg="8" :md="12" :sm="24" :xs="24">
<a-form-item label="生效日期:" name="datetime">
<a-range-picker
v-model:value="form.datetime"
class="ele-fluid">
<template #suffixIcon>
<calendar-outlined/>
</template>
</a-range-picker>
</a-form-item>
</a-col>
<a-col :lg="8" :md="12" :sm="24" :xs="24">
<a-form-item label="仓库类型:" name="type">
<a-select
v-model:value="form.type"
placeholder="请选择仓库类型"
allow-clear>
<a-select-option value="private">私密</a-select-option>
<a-select-option value="public">公开</a-select-option>
</a-select>
</a-form-item>
</a-col>
</a-row>
</a-card>
<a-card :bordered="false" title="任务信息">
<a-row :gutter="16">
<a-col :lg="8" :md="12" :sm="24" :xs="24">
<a-form-item label="任务名:" name="task">
<a-input
v-model:value="form.task"
placeholder="请输入任务名"
allow-clear/>
</a-form-item>
</a-col>
<a-col :lg="8" :md="12" :sm="24" :xs="24">
<a-form-item label="任务表述:" name="description">
<a-input
v-model:value="form.description"
placeholder="请输入任务表述"
allow-clear/>
</a-form-item>
</a-col>
<a-col :lg="8" :md="12" :sm="24" :xs="24">
<a-form-item label="执行人:" name="executor">
<a-select
v-model:value="form.executor"
placeholder="请选择执行人"
allow-clear>
<a-select-option value="1">SunSmile</a-select-option>
<a-select-option value="2">Jasmine</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :lg="8" :md="12" :sm="24" :xs="24">
<a-form-item label="责任人:" name="officer">
<a-select
v-model:value="form.officer"
placeholder="请选择责任人"
allow-clear>
<a-select-option value="1">SunSmile</a-select-option>
<a-select-option value="2">Jasmine</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :lg="8" :md="12" :sm="24" :xs="24">
<a-form-item label="提醒时间:" name="reminder">
<a-time-picker
v-model:value="form.reminder"
placeholder="请选择提醒时间"
value-format="hh:mm:ss"
class="ele-fluid"/>
</a-form-item>
</a-col>
<a-col :lg="8" :md="12" :sm="24" :xs="24">
<a-form-item label="任务类型:" name="taskType">
<a-select
v-model:value="form.taskType"
placeholder="请选择任务类型"
allow-clear>
<a-select-option value="1">私密</a-select-option>
<a-select-option value="2">公开</a-select-option>
</a-select>
</a-form-item>
</a-col>
</a-row>
</a-card>
<a-card :bordered="false" title="选择成员">
<!-- 数据表格 -->
<a-table
:data-source="users"
row-key="__index"
size="middle"
:pagination="false"
:scroll="{x: 'max-content'}">
<a-table-column
data-index="__index"
align="center"
:width="58"/>
<a-table-column
title="用户名"
data-index="name">
<template #default="{text,index}">
<a-input
v-if="index===editIndex"
v-model:value="editRow.name"
placeholder="请输入用户名"/>
<span v-else>{{ text }}</span>
</template>
</a-table-column>
<a-table-column
title="工号"
data-index="number">
<template #default="{text,index}">
<a-input
v-if="index===editIndex"
v-model:value="editRow.number"
placeholder="请输入工号"/>
<span v-else>{{ text }}</span>
</template>
</a-table-column>
<a-table-column
title="所属部门"
data-index="department">
<template #default="{text,index}">
<a-select
v-if="index===editIndex"
v-model:value="editRow.department"
placeholder="请选择部门">
<a-select-option value="研发部">研发部</a-select-option>
<a-select-option value="测试部">测试部</a-select-option>
<a-select-option value="产品部">产品部</a-select-option>
</a-select>
<span v-else>{{ text }}</span>
</template>
</a-table-column>
<a-table-column
title="操作"
key="action"
align="center"
:width="160">
<template #default="{index,record}">
<a-space v-if="index===editIndex">
<a @click="onSave(record, index)">保存</a>
<a-divider type="vertical"/>
<a @click="onCancel(record, index)">取消</a>
</a-space>
<a-space v-else>
<a @click="onEdit(record, index)">修改</a>
<a-divider type="vertical"/>
<a-popconfirm
title="确定要删除此用户吗？"
@confirm="onRemove(record,index)">
<a class="ele-text-danger">删除</a>
</a-popconfirm>
</a-space>
</template>
</a-table-column>
</a-table>
<a-button
block
type="dashed"
style="margin-top: 16px;"
@click="addRow">
<template #icon>
<plus-outlined/>
</template>
<span>新增成员</span>
</a-button>
</a-card>
<!-- 底部工具栏 -->
<div class="ele-bottom-tool">
<div v-if="validMsg" class="ele-text-danger">
<close-circle-outlined/>
<span>{{ validMsg }}</span>
</div>
<div class="ele-bottom-tool-actions">
<a-button
type="primary"
:loading="loading"
@click="submit">提交
</a-button>
</div>
</div>
</a-form>
</div>
</template>
<script>
import {
CalendarOutlined,
PlusOutlined,
CloseCircleOutlined
} from '@ant-design/icons-vue';
export default {
name: 'FormAdvanced',
components: {
CalendarOutlined,
PlusOutlined,
CloseCircleOutlined
},
data() {
return {
// 加载状态
loading: false,
// 表单数据
form: {
name: '',
url: '',
datetime: [],
task: '',
description: '',
reminder: ''
},
// 表单验证规则
rules: {
name: [
{required: true, message: '请输入仓库名', type: 'string', trigger: 'blur'}
],
url: [
{required: true, message: '请输入仓库域名', type: 'string', trigger: 'blur'}
],
administrator: [
{required: true, message: '请选择仓库管理员', type: 'string', trigger: 'blur'}
],
approver: [
{required: true, message: '请选择审批人', type: 'string', trigger: 'blur'}
],
datetime: [
{required: true, message: '请选择生效日期', type: 'array', trigger: 'blur'}
],
type: [
{required: true, message: '请选择仓库类型', type: 'string', trigger: 'blur'}
],
task: [
{required: true, message: '请输入任务名', type: 'string', trigger: 'blur'}
],
description: [
{required: true, message: '请输入任务表述', type: 'string', trigger: 'blur'}
],
executor: [
{required: true, message: '请选择执行人', type: 'string', trigger: 'blur'}
],
officer: [
{required: true, message: '请选择责任人', type: 'string', trigger: 'blur'}
],
reminder: [
{required: true, message: '请选择提醒时间', type: 'string', trigger: 'blur'}
],
taskType: [
{required: true, message: '请选择任务类型', type: 'string', trigger: 'blur'}
]
},
// 用户列表
users: [
{__index: 1, name: 'John Brown', number: '00001', department: '研发部'},
{__index: 2, name: 'Jim Green', number: '00002', department: '产品部'},
{__index: 3, name: 'Joe Black', number: '00003', department: '产品部'}
],
// 表单验证失败提示信息
validMsg: '',
// 表格编辑行索引
editIndex: null,
// 表格编辑行数据
editRow: {}
};
},
methods: {
/* 表单提交 */
submit() {
this.$refs.form.validate().then(() => {
this.validMsg = '';
this.loading = true;
setTimeout(() => {
this.loading = false;
this.$message.success('提交成功');
}, 1500);
}).catch((e) => {
this.validMsg = ` 共有 ${e.errorFields.length} 项校验不通过`;
});
},
/* 添加一行 */
addRow() {
if (this.users.length && this.users[this.users.length - 1].__is_add) {
return;
}
this.editRow = {
__is_add: true, // 此字段标识为添加状态
__index: this.users.length + 1 // 此字段标识索引
};
this.editIndex = this.users.length;
this.users.push(this.editRow);
},
/* 修改行 */
onEdit(row, index) {
if (this.users.length && this.users[this.users.length - 1].__is_add) {
return;
}
this.editIndex = index;
this.editRow = Object.assign({}, row);
},
/* 删除行 */
onRemove(row, index) {
this.users[this.editIndex].__is_add = false;
this.users.splice(index, 1); // 删除数据
// 重置__index
this.users = this.users.map((d, index) => {
return Object.assign({}, d, {
__index: index + 1
});
})
// 如果需要请求接口删除可以在这里写
},
/* 保存编辑 */
onSave(row, index) {
if (!this.editRow.name) {
this.$message.error('请输入用户');
return;
}
if (!this.editRow.number) {
this.$message.error('请输入工号');
return;
}
if (!this.editRow.department) {
this.$message.error('请选择部门');
return;
}
this.users[index] = Object.assign({}, this.editRow, {
__is_add: null
});
this.editIndex = null;
this.editRow = {};
// 如果需要请求接口保存可以在这里写
},
/* 取消编辑 */
onCancel(row, index) {
if (row.__is_add) {
this.users.splice(index, 1);
}
this.editIndex = null;
this.editRow = {};
}
}
}
</script>
<style scoped>
</style>