vben
6 years ago
43 changed files with 1389 additions and 116 deletions
@ -0,0 +1 @@ |
|||
export { default as AppFooter } from './src/index.vue'; |
|||
@ -0,0 +1,57 @@ |
|||
<template> |
|||
<div class="app-footer" :style="{ width: getWidth }"> |
|||
<div class="app-footer__left"> |
|||
<slot name="left" /> |
|||
</div> |
|||
<div class="app-footer__right"> |
|||
<slot name="right" /> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script lang="ts"> |
|||
import { defineComponent, computed, unref } from 'vue'; |
|||
import { SIDE_BAR_MINI_WIDTH, SIDE_BAR_SHOW_TIT_MINI_WIDTH } from '/@/enums/appEnum'; |
|||
import { appStore } from '/@/store/modules/app'; |
|||
import { menuStore } from '/@/store/modules/menu'; |
|||
export default defineComponent({ |
|||
name: 'AppFooter', |
|||
setup() { |
|||
const getMiniWidth = computed(() => { |
|||
const { |
|||
menuSetting: { collapsedShowTitle }, |
|||
} = appStore.getProjectConfig; |
|||
return collapsedShowTitle ? SIDE_BAR_SHOW_TIT_MINI_WIDTH : SIDE_BAR_MINI_WIDTH; |
|||
}); |
|||
|
|||
const getWidth = computed(() => { |
|||
const { getCollapsedState, getMenuWidthState } = menuStore; |
|||
const width = getCollapsedState ? unref(getMiniWidth) : getMenuWidthState; |
|||
return `calc(100% - ${width}px)`; |
|||
}); |
|||
|
|||
return { getWidth }; |
|||
}, |
|||
}); |
|||
</script> |
|||
<style lang="less" scoped> |
|||
.app-footer { |
|||
position: fixed; |
|||
right: 0; |
|||
bottom: 0; |
|||
z-index: 99; |
|||
display: flex; |
|||
width: 100%; |
|||
align-items: center; |
|||
padding: 0 24px; |
|||
line-height: 44px; |
|||
background: #fff; |
|||
border-top: 1px solid #f0f0f0; |
|||
box-shadow: 0 -6px 16px -8px rgba(0, 0, 0, 0.08), 0 -9px 28px 0 rgba(0, 0, 0, 0.05), |
|||
0 -12px 48px 16px rgba(0, 0, 0, 0.03); |
|||
transition: width 0.3s; |
|||
|
|||
&__left { |
|||
flex: 1 1; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,119 @@ |
|||
import { FormSchema } from '/@/components/Form'; |
|||
|
|||
export const schemas: FormSchema[] = [ |
|||
{ |
|||
field: 'title', |
|||
component: 'Input', |
|||
label: '标题', |
|||
componentProps: { |
|||
placeholder: '给目标起个名字', |
|||
}, |
|||
required: true, |
|||
}, |
|||
{ |
|||
field: 'time', |
|||
component: 'RangePicker', |
|||
label: '起止日期', |
|||
required: true, |
|||
}, |
|||
{ |
|||
field: 'target', |
|||
component: 'InputTextArea', |
|||
label: '目标描述', |
|||
componentProps: { |
|||
placeholder: '请输入你的阶段性工作目标', |
|||
rows: 4, |
|||
}, |
|||
required: true, |
|||
}, |
|||
{ |
|||
field: 'metrics', |
|||
component: 'InputTextArea', |
|||
label: '衡量标准', |
|||
componentProps: { |
|||
placeholder: '请输入衡量标准', |
|||
rows: 4, |
|||
}, |
|||
required: true, |
|||
}, |
|||
{ |
|||
field: 'client', |
|||
component: 'Input', |
|||
label: '客户', |
|||
helpMessage: '目标的服务对象', |
|||
subLabel: '( 选填 )', |
|||
componentProps: { |
|||
placeholder: '请描述你服务的客户，内部客户直接 @姓名／工号', |
|||
}, |
|||
}, |
|||
{ |
|||
field: 'inviteer', |
|||
component: 'Input', |
|||
label: '邀评人', |
|||
subLabel: '( 选填 )', |
|||
componentProps: { |
|||
placeholder: '请直接 @姓名／工号，最多可邀请 5 人', |
|||
}, |
|||
}, |
|||
{ |
|||
field: 'weights', |
|||
component: 'InputNumber', |
|||
label: '权重', |
|||
subLabel: '( 选填 )', |
|||
componentProps: { |
|||
formatter: (value: string) => (value ? `${value}%` : ''), |
|||
parser: (value: string) => value.replace('%', ''), |
|||
placeholder: '请输入', |
|||
}, |
|||
}, |
|||
{ |
|||
field: 'disclosure', |
|||
component: 'RadioGroup', |
|||
label: '目标公开', |
|||
itemProps: { |
|||
extra: '客户、邀评人默认被分享', |
|||
}, |
|||
componentProps: { |
|||
options: [ |
|||
{ |
|||
label: '公开', |
|||
value: '1', |
|||
}, |
|||
{ |
|||
label: '部分公开', |
|||
value: '2', |
|||
}, |
|||
{ |
|||
label: '不公开', |
|||
value: '3', |
|||
}, |
|||
], |
|||
}, |
|||
}, |
|||
{ |
|||
field: 'disclosurer', |
|||
component: 'Select', |
|||
label: ' ', |
|||
show: ({ model }) => { |
|||
return model.disclosure === '2'; |
|||
}, |
|||
componentProps: { |
|||
placeholder: '公开给', |
|||
mode: 'multiple', |
|||
options: [ |
|||
{ |
|||
label: '同事1', |
|||
value: '1', |
|||
}, |
|||
{ |
|||
label: '同事2', |
|||
value: '2', |
|||
}, |
|||
{ |
|||
label: '同事3', |
|||
value: '3', |
|||
}, |
|||
], |
|||
}, |
|||
}, |
|||
]; |
|||
@ -0,0 +1,66 @@ |
|||
<template> |
|||
<div> |
|||
<a-page-header title="基础表单" :ghost="false"> |
|||
表单页用于向用户收集或验证信息，基础表单常见于数据项较少的表单场景。 |
|||
</a-page-header> |
|||
|
|||
<div class="m-5 form-wrap"> |
|||
<BasicForm @register="register" /> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script lang="ts"> |
|||
import { BasicForm, useForm } from '/@/components/Form'; |
|||
import { defineComponent } from 'vue'; |
|||
import { schemas } from './data'; |
|||
import { useMessage } from '/@/hooks/web/useMessage'; |
|||
export default defineComponent({ |
|||
components: { BasicForm }, |
|||
setup() { |
|||
const { createMessage } = useMessage(); |
|||
const [register, { validate, setProps }] = useForm({ |
|||
labelCol: { |
|||
span: 7, |
|||
}, |
|||
wrapperCol: { |
|||
span: 10, |
|||
}, |
|||
schemas: schemas, |
|||
actionColOptions: { |
|||
offset: 8, |
|||
}, |
|||
submitButtonOptions: { |
|||
text: '提交', |
|||
}, |
|||
submitFunc: customSubmitFunc, |
|||
}); |
|||
|
|||
async function customSubmitFunc() { |
|||
try { |
|||
await validate(); |
|||
setProps({ |
|||
submitButtonOptions: { |
|||
loading: true, |
|||
}, |
|||
}); |
|||
setTimeout(() => { |
|||
setProps({ |
|||
submitButtonOptions: { |
|||
loading: false, |
|||
}, |
|||
}); |
|||
createMessage.success('提交成功！'); |
|||
}, 2000); |
|||
} catch (error) {} |
|||
} |
|||
|
|||
return { register }; |
|||
}, |
|||
}); |
|||
</script> |
|||
<style lang="less" scoped> |
|||
.form-wrap { |
|||
padding: 24px; |
|||
background: #fff; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,142 @@ |
|||
<template> |
|||
<div> |
|||
<BasicTable @register="registerTable"> |
|||
<template #action="{ record, column }"> |
|||
<TableAction :actions="createActions(record, column)" /> |
|||
</template> |
|||
</BasicTable> |
|||
<a-button block class="mt-5" type="dashed" @click="handleAdd">新增成员</a-button> |
|||
</div> |
|||
</template> |
|||
<script lang="ts"> |
|||
import { defineComponent } from 'vue'; |
|||
import { |
|||
BasicTable, |
|||
useTable, |
|||
TableAction, |
|||
BasicColumn, |
|||
ActionItem, |
|||
renderEditableRow, |
|||
EditTableHeaderIcon, |
|||
EditRecordRow, |
|||
} from '/@/components/Table'; |
|||
|
|||
const columns: BasicColumn[] = [ |
|||
{ |
|||
title: '成员姓名', |
|||
dataIndex: 'name', |
|||
customRender: renderEditableRow({ dataIndex: 'name', placeholder: '请输入成员姓名' }), |
|||
}, |
|||
{ |
|||
title: '工号', |
|||
dataIndex: 'no', |
|||
customRender: renderEditableRow({ dataIndex: 'no', placeholder: '请输入工号' }), |
|||
}, |
|||
{ |
|||
title: '所属部门', |
|||
dataIndex: 'dept', |
|||
customRender: renderEditableRow({ dataIndex: 'dept', placeholder: '请输入所属部门' }), |
|||
}, |
|||
]; |
|||
|
|||
const data: any[] = [ |
|||
{ |
|||
name: 'John Brown', |
|||
no: '00001', |
|||
dept: 'New York No. 1 Lake Park', |
|||
}, |
|||
{ |
|||
name: 'John Brown2', |
|||
no: '00002', |
|||
dept: 'New York No. 2 Lake Park', |
|||
}, |
|||
{ |
|||
name: 'John Brown3', |
|||
no: '00003', |
|||
dept: 'New York No. 3Lake Park', |
|||
}, |
|||
]; |
|||
export default defineComponent({ |
|||
components: { BasicTable, EditTableHeaderIcon, TableAction }, |
|||
setup() { |
|||
const [registerTable, { getDataSource }] = useTable({ |
|||
columns: columns, |
|||
showIndexColumn: false, |
|||
dataSource: data, |
|||
actionColumn: { |
|||
width: 160, |
|||
title: '操作', |
|||
dataIndex: 'action', |
|||
slots: { customRender: 'action' }, |
|||
}, |
|||
pagination: false, |
|||
}); |
|||
|
|||
function handleEdit(record: EditRecordRow) { |
|||
record.editable = true; |
|||
} |
|||
|
|||
function handleCancel(record: EditRecordRow) { |
|||
record.editable = false; |
|||
record.onCancel && record.onCancel(); |
|||
if (record.isNew) { |
|||
const data = getDataSource(); |
|||
const index = data.findIndex((item) => item.key === record.key); |
|||
data.splice(index, 1); |
|||
} |
|||
} |
|||
|
|||
function handleSave(record: EditRecordRow) { |
|||
record.editable = false; |
|||
record.onSubmit && record.onSubmit(); |
|||
} |
|||
|
|||
function handleAdd() { |
|||
const data = getDataSource(); |
|||
const addRow: EditRecordRow = { |
|||
name: '', |
|||
no: '', |
|||
dept: '', |
|||
editable: true, |
|||
isNew: true, |
|||
}; |
|||
data.push(addRow); |
|||
} |
|||
|
|||
function createActions(record: EditRecordRow, column: BasicColumn): ActionItem[] { |
|||
if (!record.editable) { |
|||
return [ |
|||
{ |
|||
label: '编辑', |
|||
onClick: handleEdit.bind(null, record), |
|||
}, |
|||
{ |
|||
label: '删除', |
|||
}, |
|||
]; |
|||
} |
|||
return [ |
|||
{ |
|||
label: '保存', |
|||
onClick: handleSave.bind(null, record, column), |
|||
}, |
|||
{ |
|||
label: '取消', |
|||
popConfirm: { |
|||
title: '是否取消编辑', |
|||
confirm: handleCancel.bind(null, record, column), |
|||
}, |
|||
}, |
|||
]; |
|||
} |
|||
|
|||
return { |
|||
registerTable, |
|||
handleEdit, |
|||
createActions, |
|||
handleAdd, |
|||
getDataSource, |
|||
}; |
|||
}, |
|||
}); |
|||
</script> |
|||
@ -0,0 +1,149 @@ |
|||
import { FormSchema } from '/@/components/Form'; |
|||
|
|||
const basicOptions: SelectOptions = [ |
|||
{ |
|||
label: '付晓晓', |
|||
value: '1', |
|||
}, |
|||
{ |
|||
label: '周毛毛', |
|||
value: '2', |
|||
}, |
|||
]; |
|||
|
|||
const storeTypeOptions: SelectOptions = [ |
|||
{ |
|||
label: '私密', |
|||
value: '1', |
|||
}, |
|||
{ |
|||
label: '公开', |
|||
value: '2', |
|||
}, |
|||
]; |
|||
|
|||
export const schemas: FormSchema[] = [ |
|||
{ |
|||
field: 'f1', |
|||
component: 'Input', |
|||
label: '仓库名', |
|||
required: true, |
|||
}, |
|||
{ |
|||
field: 'f2', |
|||
component: 'Input', |
|||
label: '仓库域名', |
|||
required: true, |
|||
componentProps: { |
|||
addonBefore: 'http://', |
|||
addonAfter: 'com', |
|||
}, |
|||
colProps: { |
|||
offset: 2, |
|||
}, |
|||
}, |
|||
{ |
|||
field: 'f3', |
|||
component: 'Select', |
|||
label: '仓库管理员', |
|||
componentProps: { |
|||
options: basicOptions, |
|||
}, |
|||
required: true, |
|||
colProps: { |
|||
offset: 2, |
|||
}, |
|||
}, |
|||
{ |
|||
field: 'f4', |
|||
component: 'Select', |
|||
label: '审批人', |
|||
componentProps: { |
|||
options: basicOptions, |
|||
}, |
|||
required: true, |
|||
}, |
|||
{ |
|||
field: 'f5', |
|||
component: 'RangePicker', |
|||
label: '生效日期', |
|||
required: true, |
|||
colProps: { |
|||
offset: 2, |
|||
}, |
|||
}, |
|||
{ |
|||
field: 'f6', |
|||
component: 'Select', |
|||
label: '仓库类型', |
|||
componentProps: { |
|||
options: storeTypeOptions, |
|||
}, |
|||
required: true, |
|||
colProps: { |
|||
offset: 2, |
|||
}, |
|||
}, |
|||
]; |
|||
export const taskSchemas: FormSchema[] = [ |
|||
{ |
|||
field: 't1', |
|||
component: 'Input', |
|||
label: '任务名', |
|||
required: true, |
|||
}, |
|||
{ |
|||
field: 't2', |
|||
component: 'Input', |
|||
label: '任务描述', |
|||
required: true, |
|||
colProps: { |
|||
offset: 2, |
|||
}, |
|||
}, |
|||
{ |
|||
field: 't3', |
|||
component: 'Select', |
|||
label: '执行人', |
|||
componentProps: { |
|||
options: basicOptions, |
|||
}, |
|||
required: true, |
|||
colProps: { |
|||
offset: 2, |
|||
}, |
|||
}, |
|||
{ |
|||
field: 't4', |
|||
component: 'Select', |
|||
label: '责任人', |
|||
componentProps: { |
|||
options: basicOptions, |
|||
}, |
|||
required: true, |
|||
}, |
|||
{ |
|||
field: 't5', |
|||
component: 'TimePicker', |
|||
label: '生效日期', |
|||
required: true, |
|||
componentProps: { |
|||
style: { width: '100%' }, |
|||
}, |
|||
colProps: { |
|||
offset: 2, |
|||
}, |
|||
}, |
|||
{ |
|||
field: 't6', |
|||
component: 'Select', |
|||
label: '任务类型', |
|||
componentProps: { |
|||
options: storeTypeOptions, |
|||
}, |
|||
required: true, |
|||
colProps: { |
|||
offset: 2, |
|||
}, |
|||
}, |
|||
]; |
|||
@ -0,0 +1,72 @@ |
|||
<template> |
|||
<div class="high-form"> |
|||
<a-page-header title="高级表单" :ghost="false"> |
|||
高级表单常见于一次性输入和提交大批量数据的场景。 |
|||
</a-page-header> |
|||
|
|||
<div class="m-5"> |
|||
<a-card title="仓库管理" :bordered="false"> |
|||
<BasicForm @register="register" layout="vertical" /> |
|||
</a-card> |
|||
<a-card title="任务管理" :bordered="false" class="mt-5"> |
|||
<BasicForm @register="registerTask" layout="vertical" /> |
|||
</a-card> |
|||
<a-card title="成员管理" :bordered="false" class="mt-5"> |
|||
<PersonTable ref="tableRef" /> |
|||
</a-card> |
|||
</div> |
|||
|
|||
<app-footer> |
|||
<template #right> |
|||
<a-button type="primary" @click="submitAll">提交</a-button> |
|||
</template> |
|||
</app-footer> |
|||
</div> |
|||
</template> |
|||
<script lang="ts"> |
|||
import { BasicForm, useForm } from '/@/components/Form'; |
|||
import { defineComponent, ref } from 'vue'; |
|||
import PersonTable from './PersonTable.vue'; |
|||
import { schemas, taskSchemas } from './data'; |
|||
|
|||
export default defineComponent({ |
|||
components: { BasicForm, PersonTable }, |
|||
setup() { |
|||
const tableRef = ref<{ getDataSource: () => any } | null>(null); |
|||
|
|||
const [register, { validate }] = useForm({ |
|||
baseColProps: { |
|||
span: 6, |
|||
}, |
|||
schemas: schemas, |
|||
showActionButtonGroup: false, |
|||
}); |
|||
|
|||
const [registerTask, { validate: validateTaskForm }] = useForm({ |
|||
baseColProps: { |
|||
span: 6, |
|||
}, |
|||
schemas: taskSchemas, |
|||
showActionButtonGroup: false, |
|||
}); |
|||
|
|||
async function submitAll() { |
|||
try { |
|||
if (tableRef.value) { |
|||
console.log('table data:', tableRef.value.getDataSource()); |
|||
} |
|||
|
|||
const [values, taskValues] = await Promise.all([validate(), validateTaskForm()]); |
|||
console.log('form data:', values, taskValues); |
|||
} catch (error) {} |
|||
} |
|||
|
|||
return { register, registerTask, submitAll, tableRef }; |
|||
}, |
|||
}); |
|||
</script> |
|||
<style lang="less" scoped> |
|||
.high-form { |
|||
padding-bottom: 48px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,95 @@ |
|||
<template> |
|||
<div class="step1"> |
|||
<div class="step1-form"> |
|||
<BasicForm @register="register"> |
|||
<template #fac="{ model, field }"> |
|||
<a-input-group compact> |
|||
<a-select v-model:value="model['pay']" class="pay-select"> |
|||
<a-select-option value="zfb"> 支付宝 </a-select-option> |
|||
<a-select-option value="yl"> 银联 </a-select-option> |
|||
</a-select> |
|||
<a-input class="pay-input" v-model:value="model[field]" /> |
|||
</a-input-group> |
|||
</template> |
|||
</BasicForm> |
|||
</div> |
|||
<a-divider /> |
|||
<h3>说明</h3> |
|||
<h4>转账到支付宝账户</h4> |
|||
<p> |
|||
如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。 |
|||
</p> |
|||
|
|||
<h4>转账到银行卡</h4> |
|||
<p> |
|||
如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。 |
|||
</p> |
|||
</div> |
|||
</template> |
|||
<script lang="ts"> |
|||
import { defineComponent } from 'vue'; |
|||
import { BasicForm, useForm } from '/@/components/Form'; |
|||
import { step1Schemas } from './data'; |
|||
|
|||
export default defineComponent({ |
|||
components: { BasicForm }, |
|||
emits: ['next'], |
|||
setup(_, { emit }) { |
|||
const [register, { validate }] = useForm({ |
|||
labelWidth: 100, |
|||
schemas: step1Schemas, |
|||
actionColOptions: { |
|||
span: 14, |
|||
}, |
|||
showResetButton: false, |
|||
submitButtonOptions: { |
|||
text: '下一步', |
|||
}, |
|||
submitFunc: customSubmitFunc, |
|||
}); |
|||
|
|||
async function customSubmitFunc() { |
|||
try { |
|||
const values = await validate(); |
|||
emit('next', values); |
|||
} catch (error) {} |
|||
} |
|||
|
|||
return { register }; |
|||
}, |
|||
}); |
|||
</script> |
|||
<style lang="less" scoped> |
|||
.step1 { |
|||
&-form { |
|||
width: 450px; |
|||
margin: 0 auto; |
|||
} |
|||
|
|||
h3 { |
|||
margin: 0 0 12px; |
|||
font-size: 16px; |
|||
line-height: 32px; |
|||
color: rgba(0, 0, 0, 0.45); |
|||
} |
|||
|
|||
h4 { |
|||
margin: 0 0 4px; |
|||
font-size: 14px; |
|||
line-height: 22px; |
|||
color: rgba(0, 0, 0, 0.45); |
|||
} |
|||
|
|||
p { |
|||
color: rgba(0, 0, 0, 0.45); |
|||
} |
|||
} |
|||
|
|||
.pay-select { |
|||
width: 20%; |
|||
} |
|||
|
|||
.pay-input { |
|||
width: 70%; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,71 @@ |
|||
<template> |
|||
<div class="step2"> |
|||
<a-alert message="确认转账后，资金将直接打入对方账户，无法退回。" show-icon /> |
|||
<a-descriptions :column="1" class="mt-5"> |
|||
<a-descriptions-item label="付款账户"> ant-design@alipay.com </a-descriptions-item> |
|||
<a-descriptions-item label="收款账户"> test@example.com </a-descriptions-item> |
|||
<a-descriptions-item label="收款人姓名"> Vben </a-descriptions-item> |
|||
<a-descriptions-item label="转账金额"> 500元 </a-descriptions-item> |
|||
</a-descriptions> |
|||
<a-divider /> |
|||
<BasicForm @register="register" /> |
|||
</div> |
|||
</template> |
|||
<script lang="ts"> |
|||
import { defineComponent } from 'vue'; |
|||
import { BasicForm, useForm } from '/@/components/Form'; |
|||
import { step2Schemas } from './data'; |
|||
|
|||
export default defineComponent({ |
|||
components: { BasicForm }, |
|||
emits: ['next', 'prev'], |
|||
setup(_, { emit }) { |
|||
const [register, { validate, setProps }] = useForm({ |
|||
labelWidth: 80, |
|||
schemas: step2Schemas, |
|||
actionColOptions: { |
|||
span: 14, |
|||
}, |
|||
resetButtonOptions: { |
|||
text: '上一步', |
|||
}, |
|||
submitButtonOptions: { |
|||
text: '提交', |
|||
}, |
|||
resetFunc: customResetFunc, |
|||
submitFunc: customSubmitFunc, |
|||
}); |
|||
|
|||
async function customResetFunc() { |
|||
emit('prev'); |
|||
} |
|||
|
|||
async function customSubmitFunc() { |
|||
try { |
|||
const values = await validate(); |
|||
setProps({ |
|||
submitButtonOptions: { |
|||
loading: true, |
|||
}, |
|||
}); |
|||
setTimeout(() => { |
|||
setProps({ |
|||
submitButtonOptions: { |
|||
loading: false, |
|||
}, |
|||
}); |
|||
emit('next', values); |
|||
}, 1500); |
|||
} catch (error) {} |
|||
} |
|||
|
|||
return { register }; |
|||
}, |
|||
}); |
|||
</script> |
|||
<style lang="less" scoped> |
|||
.step2 { |
|||
width: 450px; |
|||
margin: 0 auto; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,45 @@ |
|||
<template> |
|||
<div class="step3"> |
|||
<a-result status="success" title="操作成功" sub-title="预计两小时内到账"> |
|||
<template #extra> |
|||
<a-button type="primary" @click="redo">再转一笔 </a-button> |
|||
<a-button> 查看账单 </a-button> |
|||
</template> |
|||
</a-result> |
|||
<div class="desc-wrap"> |
|||
<a-descriptions :column="1" class="mt-5"> |
|||
<a-descriptions-item label="付款账户"> ant-design@alipay.com </a-descriptions-item> |
|||
<a-descriptions-item label="收款账户"> test@example.com </a-descriptions-item> |
|||
<a-descriptions-item label="收款人姓名"> Vben </a-descriptions-item> |
|||
<a-descriptions-item label="转账金额"> 500元 </a-descriptions-item> |
|||
</a-descriptions> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script lang="ts"> |
|||
import { defineComponent } from 'vue'; |
|||
|
|||
export default defineComponent({ |
|||
components: {}, |
|||
emits: ['redo'], |
|||
setup(_, { emit }) { |
|||
return { |
|||
redo: () => { |
|||
emit('redo'); |
|||
}, |
|||
}; |
|||
}, |
|||
}); |
|||
</script> |
|||
<style lang="less" scoped> |
|||
.step3 { |
|||
width: 600px; |
|||
margin: 0 auto; |
|||
} |
|||
|
|||
.desc-wrap { |
|||
padding: 24px 40px; |
|||
margin-top: 24px; |
|||
background: #fafafa; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,63 @@ |
|||
import { FormSchema } from '/@/components/Form'; |
|||
|
|||
export const step1Schemas: FormSchema[] = [ |
|||
{ |
|||
field: 'account', |
|||
component: 'Select', |
|||
label: '付款账户', |
|||
required: true, |
|||
defaultValue: '1', |
|||
componentProps: { |
|||
options: [ |
|||
{ |
|||
label: 'anncwb@126.com', |
|||
value: '1', |
|||
}, |
|||
], |
|||
}, |
|||
}, |
|||
{ |
|||
field: 'fac', |
|||
component: 'InputGroup', |
|||
label: '收款账户', |
|||
required: true, |
|||
defaultValue: 'test@example.com', |
|||
slot: 'fac', |
|||
}, |
|||
{ |
|||
field: 'pay', |
|||
component: 'Input', |
|||
label: '', |
|||
defaultValue: 'zfb', |
|||
show: false, |
|||
}, |
|||
{ |
|||
field: 'payeeName', |
|||
component: 'Input', |
|||
label: '收款人姓名', |
|||
defaultValue: 'Vben', |
|||
required: true, |
|||
}, |
|||
{ |
|||
field: 'money', |
|||
component: 'Input', |
|||
label: '转账金额', |
|||
defaultValue: '500', |
|||
required: true, |
|||
renderComponentContent: () => { |
|||
return { |
|||
prefix: () => '￥', |
|||
}; |
|||
}, |
|||
}, |
|||
]; |
|||
|
|||
export const step2Schemas: FormSchema[] = [ |
|||
{ |
|||
field: 'pwd', |
|||
component: 'InputPassword', |
|||
label: '支付密码', |
|||
required: true, |
|||
defaultValue: '123456', |
|||
}, |
|||
]; |
|||
@ -0,0 +1,86 @@ |
|||
<template> |
|||
<div> |
|||
<a-page-header title="分步表单" :ghost="false"> |
|||
将一个冗长或用户不熟悉的表单任务分成多个步骤，指导用户完成。 |
|||
</a-page-header> |
|||
|
|||
<div class="m-5 step-form-content"> |
|||
<div class="step-form-form"> |
|||
<a-steps :current="current"> |
|||
<a-step title="填写转账信息"> </a-step> |
|||
<a-step title="确认转账信息"> </a-step> |
|||
<a-step title="完成"> </a-step> |
|||
</a-steps> |
|||
</div> |
|||
<div class="mt-5"> |
|||
<Step1 @next="handleStep1Next" v-show="current === 0" /> |
|||
<Step2 |
|||
@prev="handleStepPrev" |
|||
@next="handleStep2Next" |
|||
v-show="current === 1" |
|||
v-if="initSetp2" |
|||
/> |
|||
<Step3 v-show="current === 2" @redo="handleRedo" v-if="initSetp3" /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script lang="ts"> |
|||
import { defineComponent, ref, reactive, toRefs } from 'vue'; |
|||
import Step1 from './Step1.vue'; |
|||
import Step2 from './Step2.vue'; |
|||
import Step3 from './Step3.vue'; |
|||
export default defineComponent({ |
|||
components: { Step1, Step2, Step3 }, |
|||
setup() { |
|||
const current = ref(0); |
|||
|
|||
const state = reactive({ |
|||
initSetp2: false, |
|||
initSetp3: false, |
|||
}); |
|||
|
|||
function handleStep1Next(step1Values: any) { |
|||
current.value++; |
|||
state.initSetp2 = true; |
|||
console.log(step1Values); |
|||
} |
|||
|
|||
function handleStepPrev() { |
|||
current.value--; |
|||
} |
|||
|
|||
function handleStep2Next(step2Values: any) { |
|||
current.value++; |
|||
state.initSetp3 = true; |
|||
console.log(step2Values); |
|||
} |
|||
|
|||
function handleRedo() { |
|||
current.value = 0; |
|||
state.initSetp2 = false; |
|||
state.initSetp3 = false; |
|||
} |
|||
|
|||
return { |
|||
current, |
|||
handleStep1Next, |
|||
handleStep2Next, |
|||
handleRedo, |
|||
handleStepPrev, |
|||
...toRefs(state), |
|||
}; |
|||
}, |
|||
}); |
|||
</script> |
|||
<style lang="less" scoped> |
|||
.step-form-content { |
|||
padding: 24px; |
|||
background: #fff; |
|||
} |
|||
|
|||
.step-form-form { |
|||
width: 750px; |
|||
margin: 0 auto; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,105 @@ |
|||
<template> |
|||
<div class="p-4"> |
|||
<BasicTable @register="registerTable"> |
|||
<template #action="{ record, column }"> |
|||
<TableAction :actions="createActions(record, column)" /> |
|||
</template> |
|||
</BasicTable> |
|||
</div> |
|||
</template> |
|||
<script lang="ts"> |
|||
import { defineComponent, ref } from 'vue'; |
|||
import { |
|||
BasicTable, |
|||
useTable, |
|||
TableAction, |
|||
BasicColumn, |
|||
ActionItem, |
|||
renderEditableRow, |
|||
EditTableHeaderIcon, |
|||
EditRecordRow, |
|||
} from '/@/components/Table'; |
|||
|
|||
import { demoListApi } from '/@/api/demo/table'; |
|||
const columns: BasicColumn[] = [ |
|||
{ |
|||
title: 'ID', |
|||
dataIndex: 'id', |
|||
customRender: renderEditableRow({ dataIndex: 'id' }), |
|||
}, |
|||
{ |
|||
title: '姓名', |
|||
dataIndex: 'name', |
|||
customRender: renderEditableRow({ |
|||
dataIndex: 'name', |
|||
}), |
|||
}, |
|||
]; |
|||
export default defineComponent({ |
|||
components: { BasicTable, EditTableHeaderIcon, TableAction }, |
|||
setup() { |
|||
const currentEditKeyRef = ref(''); |
|||
|
|||
const [registerTable] = useTable({ |
|||
title: '可编辑行示例', |
|||
api: demoListApi, |
|||
columns: columns, |
|||
showIndexColumn: false, |
|||
actionColumn: { |
|||
width: 160, |
|||
title: 'Action', |
|||
dataIndex: 'action', |
|||
slots: { customRender: 'action' }, |
|||
}, |
|||
}); |
|||
|
|||
function handleEdit(record: EditRecordRow) { |
|||
currentEditKeyRef.value = record.key; |
|||
record.editable = true; |
|||
} |
|||
|
|||
function handleCancel(record: EditRecordRow) { |
|||
currentEditKeyRef.value = ''; |
|||
record.editable = false; |
|||
record.onCancel && record.onCancel(); |
|||
} |
|||
|
|||
function handleSave(record: EditRecordRow) { |
|||
currentEditKeyRef.value = ''; |
|||
record.editable = false; |
|||
record.onSubmit && record.onSubmit(); |
|||
} |
|||
|
|||
function createActions(record: EditRecordRow, column: BasicColumn): ActionItem[] { |
|||
if (!record.editable) { |
|||
return [ |
|||
{ |
|||
label: '编辑', |
|||
disabled: currentEditKeyRef.value ? currentEditKeyRef.value !== record.key : false, |
|||
onClick: handleEdit.bind(null, record), |
|||
}, |
|||
]; |
|||
} |
|||
return [ |
|||
{ |
|||
label: '保存', |
|||
onClick: handleSave.bind(null, record, column), |
|||
}, |
|||
{ |
|||
label: '取消', |
|||
popConfirm: { |
|||
title: '是否取消编辑', |
|||
confirm: handleCancel.bind(null, record, column), |
|||
}, |
|||
}, |
|||
]; |
|||
} |
|||
|
|||
return { |
|||
registerTable, |
|||
handleEdit, |
|||
createActions, |
|||
}; |
|||
}, |
|||
}); |
|||
</script> |
|||
Loading…
Reference in new issue