Skip to content

A
ant-design-pro-vue
Unverified Commit c5cdf68a by Sendya
Options

feat: add step-by-step modal

parent f62348a3
Showing with 546 additions and 95 deletions
src/config/router.config.js
......@@ -73,12 +73,12 @@ export const asyncRouterMap = [
path: '/list',
name: 'list',
component: PageView,
redirect: '/list/query-list',
redirect: '/list/table-list',
meta: { title: '列表页', icon: 'table', permission: [ 'table' ] },
children: [
{
path: '/list/query-list',
name: 'QueryListWrapper',
path: '/list/table-list',
name: 'TableListWrapper',
hideChildrenInMenu: true, // 强制显示 MenuItem 而不是 SubMenu
component: () => import('@/views/list/TableList'),
meta: { title: '查询表格', keepAlive: true, permission: [ 'table' ] }
......
src/views/list/QueryList.vue 0 → 100644
<template>
<a-card :bordered="false">
<component @onEdit="handleEdit" @onGoBack="handleGoBack" :record="record" :is="currentComponet"></component>
</a-card>
</template>
<script>
import ATextarea from 'ant-design-vue/es/input/TextArea'
import AInput from 'ant-design-vue/es/input/Input'
// 动态切换组件
import List from '@/views/list/table/List'
import Edit from '@/views/list/table/Edit'
export default {
name: 'TableListWrapper',
components: {
AInput,
ATextarea,
List,
Edit
},
data () {
return {
currentComponet: 'List',
record: ''
}
},
created () {
},
methods: {
handleEdit (record) {
this.record = record || ''
this.currentComponet = 'Edit'
console.log(record)
},
handleGoBack () {
this.record = ''
this.currentComponet = 'List'
}
},
watch: {
'$route.path' () {
this.record = ''
this.currentComponet = 'List'
}
}
}
</script>
src/views/list/TableList.vue
<template>
<a-card :bordered="false">
<component @onEdit="handleEdit" @onGoBack="handleGoBack" :record="record" :is="currentComponet"></component>
<div class="table-page-search-wrapper">
<a-form layout="inline">
<a-row :gutter="48">
<a-col :md="8" :sm="24">
<a-form-item label="规则编号">
<a-input v-model="queryParam.id" placeholder=""/>
</a-form-item>
</a-col>
<a-col :md="8" :sm="24">
<a-form-item label="使用状态">
<a-select v-model="queryParam.status" placeholder="请选择" default-value="0">
<a-select-option value="0">全部</a-select-option>
<a-select-option value="1">关闭</a-select-option>
<a-select-option value="2">运行中</a-select-option>
</a-select>
</a-form-item>
</a-col>
<template v-if="advanced">
<a-col :md="8" :sm="24">
<a-form-item label="调用次数">
<a-input-number v-model="queryParam.callNo" style="width: 100%"/>
</a-form-item>
</a-col>
<a-col :md="8" :sm="24">
<a-form-item label="更新日期">
<a-date-picker v-model="queryParam.date" style="width: 100%" placeholder="请输入更新日期"/>
</a-form-item>
</a-col>
<a-col :md="8" :sm="24">
<a-form-item label="使用状态">
<a-select v-model="queryParam.useStatus" placeholder="请选择" default-value="0">
<a-select-option value="0">全部</a-select-option>
<a-select-option value="1">关闭</a-select-option>
<a-select-option value="2">运行中</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :md="8" :sm="24">
<a-form-item label="使用状态">
<a-select placeholder="请选择" default-value="0">
<a-select-option value="0">全部</a-select-option>
<a-select-option value="1">关闭</a-select-option>
<a-select-option value="2">运行中</a-select-option>
</a-select>
</a-form-item>
</a-col>
</template>
<a-col :md="!advanced && 8 || 24" :sm="24">
<span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
<a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
<a-button style="margin-left: 8px" @click="() => queryParam = {}">重置</a-button>
<a @click="toggleAdvanced" style="margin-left: 8px">
{{ advanced ? '收起' : '展开' }}
<a-icon :type="advanced ? 'up' : 'down'"/>
</a>
</span>
</a-col>
</a-row>
</a-form>
</div>
<div class="table-operator">
<a-button type="primary" icon="plus" @click="$refs.createModal.add()">新建</a-button>
<a-button type="dashed" @click="tableOption">{{ optionAlertShow && '关闭' || '开启' }} alert</a-button>
<a-dropdown v-action:edit v-if="selectedRowKeys.length > 0">
<a-menu slot="overlay">
<a-menu-item key="1"><a-icon type="delete" />删除</a-menu-item>
<!-- lock | unlock -->
<a-menu-item key="2"><a-icon type="lock" />锁定</a-menu-item>
</a-menu>
<a-button style="margin-left: 8px">
批量操作 <a-icon type="down" />
</a-button>
</a-dropdown>
</div>
<s-table
ref="table"
size="default"
rowKey="key"
:columns="columns"
:data="loadData"
:alert="options.alert"
:rowSelection="options.rowSelection"
>
<span slot="serial" slot-scope="text, record, index">
{{ index + 1 }}
</span>
<span slot="status" slot-scope="text">
<a-badge :status="text | statusTypeFilter" :text="text | statusFilter" />
</span>
<span slot="action" slot-scope="text, record">
<template>
<a @click="handleEdit(record)">配置</a>
<a-divider type="vertical" />
<a @click="handleSub(record)">订阅报警</a>
</template>
</span>
</s-table>
<create-form ref="createModal" @ok="handleOk" />
<step-by-step-modal ref="modal" @ok="handleOk"/>
</a-card>
</template>
<script>
import moment from 'moment'
import { STable } from '@/components'
import StepByStepModal from './modules/StepByStepModal'
import CreateForm from './modules/CreateForm'
import { getRoleList, getServiceList } from '@/api/manage'
import ATextarea from 'ant-design-vue/es/input/TextArea'
import AInput from 'ant-design-vue/es/input/Input'
// 动态切换组件
import List from '@/views/list/table/List'
import Edit from '@/views/list/table/Edit'
const statusMap = {
0: {
status: 'default',
text: '关闭'
},
1: {
status: 'processing',
text: '运行中'
},
2: {
status: 'success',
text: '已上线'
},
3: {
status: 'error',
text: '异常'
}
}
export default {
name: 'TableListWrapper',
name: 'TableList',
components: {
AInput,
ATextarea,
List,
Edit
STable,
CreateForm,
StepByStepModal
},
data () {
return {
currentComponet: 'List',
record: ''
mdl: {},
// 高级搜索 展开/关闭
advanced: false,
// 查询参数
queryParam: {},
// 表头
columns: [
{
title: '#',
scopedSlots: { customRender: 'serial' }
},
{
title: '规则编号',
dataIndex: 'no'
},
{
title: '描述',
dataIndex: 'description'
},
{
title: '服务调用次数',
dataIndex: 'callNo',
sorter: true,
needTotal: true,
customRender: (text) => text + ' 次'
},
{
title: '状态',
dataIndex: 'status',
scopedSlots: { customRender: 'status' }
},
{
title: '更新时间',
dataIndex: 'updatedAt',
sorter: true
},
{
title: '操作',
dataIndex: 'action',
width: '150px',
scopedSlots: { customRender: 'action' }
}
],
// 加载数据方法 必须为 Promise 对象
loadData: parameter => {
console.log('loadData.parameter', parameter)
return getServiceList(Object.assign(parameter, this.queryParam))
.then(res => {
return res.result
})
},
selectedRowKeys: [],
selectedRows: [],
// custom table alert & rowSelection
options: {
alert: { show: true, clear: () => { this.selectedRowKeys = [] } },
rowSelection: {
selectedRowKeys: this.selectedRowKeys,
onChange: this.onSelectChange
}
},
optionAlertShow: false
}
},
filters: {
statusFilter (type) {
return statusMap[type].text
},
statusTypeFilter (type) {
return statusMap[type].status
}
},
created () {
this.tableOption()
getRoleList({ t: new Date() })
},
methods: {
tableOption () {
if (!this.optionAlertShow) {
this.options = {
alert: { show: true, clear: () => { this.selectedRowKeys = [] } },
rowSelection: {
selectedRowKeys: this.selectedRowKeys,
onChange: this.onSelectChange
}
}
this.optionAlertShow = true
} else {
this.options = {
alert: false,
rowSelection: null
}
this.optionAlertShow = false
}
},
handleEdit (record) {
this.record = record || ''
this.currentComponet = 'Edit'
console.log(record)
this.$refs.modal.edit(record)
},
handleGoBack () {
this.record = ''
this.currentComponet = 'List'
}
},
watch: {
'$route.path' () {
this.record = ''
this.currentComponet = 'List'
handleSub (record) {
if (record.status !== 0) {
this.$message.info(`${record.no} 订阅成功`)
} else {
this.$message.error(`${record.no} 订阅失败，规则已关闭`)
}
},
handleOk () {
this.$refs.table.refresh()
},
onSelectChange (selectedRowKeys, selectedRows) {
this.selectedRowKeys = selectedRowKeys
this.selectedRows = selectedRows
},
toggleAdvanced () {
this.advanced = !this.advanced
},
resetSearchForm () {
this.queryParam = {
date: moment(new Date())
}
}
}
}
......
src/views/list/modules/CreateForm.vue 0 → 100644
<template>
<a-modal
title="新建规则"
:width="640"
:visible="visible"
:confirmLoading="confirmLoading"
@ok="handleSubmit"
@cancel="handleCancel"
>
<a-spin :spinning="confirmLoading">
<a-form :form="form">
<a-form-item
label="描述"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
>
<a-input v-decorator="['desc', {rules: [{required: true, min: 5, message: '请输入至少五个字符的规则描述！'}]}]" />
</a-form-item>
</a-form>
</a-spin>
</a-modal>
</template>
<script>
export default {
data () {
return {
labelCol: {
xs: { span: 24 },
sm: { span: 7 }
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 13 }
},
visible: false,
confirmLoading: false,
form: this.$form.createForm(this)
}
},
methods: {
add () {
this.visible = true
},
handleSubmit () {
const { form: { validateFields } } = this
this.confirmLoading = true
validateFields((errors, values) => {
if (!errors) {
console.log('values', values)
setTimeout(() => {
this.visible = false
this.confirmLoading = false
this.$emit('ok', values)
}, 1500)
} else {
this.confirmLoading = false
}
})
},
handleCancel () {
this.visible = false
}
}
}
</script>
src/views/list/modules/StepByStepModal.vue 0 → 100644
<template>
<a-modal
title="分步对话框"
:width="640"
:visible="visible"
:confirmLoading="confirmLoading"
@cancel="handleCancel"
>
<a-spin :spinning="confirmLoading">
<a-steps :current="currentStep" :style="{ marginBottom: '28px' }" size="small">
<a-step title="基本信息" />
<a-step title="配置规则属性" />
<a-step title="设定调度周期" />
</a-steps>
<a-form :form="form">
<!-- step1 -->
<div v-show="currentStep === 0">
<a-form-item
label="规则名称"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
>
<a-input v-decorator="['name', {rules: [{required: true}]}]" />
</a-form-item>
<a-form-item
label="规则描述"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
>
<a-textarea :rows="4" v-decorator="['desc', {rules: [{required: true}]}]"></a-textarea>
</a-form-item>
</div>
<div v-show="currentStep === 1">
<a-form-item
label="监控对象"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
>
<a-select v-decorator="['target', {initialValue: 0, rules: [{required: true}]}]" style="width: 100%">
<a-select-option :value="0">表一</a-select-option>
<a-select-option :value="1">表二</a-select-option>
</a-select>
</a-form-item>
<a-form-item
label="规则模板"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
>
<a-select v-decorator="['template', { initialValue: 0, rules: [{required: true}]}]" style="width: 100%">
<a-select-option :value="0">规则模板一</a-select-option>
<a-select-option :value="1">规则模板二</a-select-option>
</a-select>
</a-form-item>
<a-form-item
label="规则类型"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
>
<a-radio-group v-decorator="['type', {initialValue: 0, rules: [{required: true}]}]" style="width: 100%">
<a-radio :value="0">强</a-radio>
<a-radio :value="1">弱</a-radio>
</a-radio-group>
</a-form-item>
</div>
<div v-show="currentStep === 2">
<a-form-item
label="开始时间"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
>
<a-date-picker v-decorator="['time', {rules: [{ type: 'object', required: true, message: 'Please select time!' }]}]" style="width: 100%" />
</a-form-item>
<a-form-item
label="调度周期"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
>
<a-select v-decorator="['frequency', { initialValue: 'month', rules: [{required: true}]}]" style="width: 100%">
<a-select-option value="month">月</a-select-option>
<a-select-option value="week">周</a-select-option>
</a-select>
</a-form-item>
</div>
<!-- step1 end -->
</a-form>
</a-spin>
<template slot="footer">
<a-button key="back" @click="backward" v-if="currentStep > 0" :style="{ float: 'left' }" >上一步</a-button>
<a-button key="cancel" @click="handleCancel">取消</a-button>
<a-button key="forward" :loading="confirmLoading" type="primary" @click="handleNext(currentStep)">{{ currentStep === 2 && '完成' || '下一步' }}</a-button>
</template>
</a-modal>
</template>
<script>
import pick from 'lodash.pick'
const stepForms = [
['name', 'desc'],
['target', 'template', 'type'],
['time', 'frequency']
]
export default {
name: 'StepByStepModal',
data () {
return {
labelCol: {
xs: { span: 24 },
sm: { span: 7 }
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 13 }
},
visible: false,
confirmLoading: false,
currentStep: 0,
mdl: {},
form: this.$form.createForm(this)
}
},
methods: {
edit (record) {
this.visible = true
const { form: { setFieldsValue } } = this
this.$nextTick(() => {
setFieldsValue(pick(record, []))
})
},
handleNext (step) {
const { form: { validateFields } } = this
const currentStep = step + 1
if (currentStep <= 2) {
// stepForms
validateFields(stepForms[ this.currentStep ], (errors, values) => {
if (!errors) {
this.currentStep = currentStep
}
})
return
}
// last step
this.confirmLoading = true
validateFields((errors, values) => {
console.log('errors:', errors, 'val:', values)
if (!errors) {
console.log('values:', values)
setTimeout(() => {
this.confirmLoading = false
this.$emit('ok', values)
}, 1500)
} else {
this.confirmLoading = false
}
})
},
backward () {
this.currentStep--
},
handleCancel () {
// clear form & currentStep
this.visible = false
this.currentStep = 0
}
}
}
</script>
src/views/other/modules/RoleModal.vue
......@@ -7,73 +7,17 @@
@ok="handleOk"
@cancel="handleCancel"
>
<a-spin :spinning="confirmLoading">
<a-form :form="form">
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="唯一识别码"
hasFeedback
>
<a-input placeholder="唯一识别码" disabled="disabled" v-decorator="[ 'id', {rules: []} ]" />
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="角色名称"
hasFeedback >
<a-input placeholder="起一个名字" v-decorator="[ 'name', {rules: [{ required: true, message: '不起一个名字吗？' }] }]" />
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="状态"
hasFeedback >
<a-select v-decorator="[ 'status', {rules: []} ]">
<a-select-option :value="1">正常</a-select-option>
<a-select-option :value="2">禁用</a-select-option>
</a-select>
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="描述"
hasFeedback
>
<a-textarea :rows="5" placeholder="..." v-decorator="[ 'describe', { rules: [] } ]" />
</a-form-item>
<a-divider/>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="拥有权限"
hasFeedback
>
<a-row :gutter="16" v-for="(permission, index) in permissions" :key="index">
<a-col :span="4">
{{ permission.name }}：
</a-col>
<a-col :span="20">
<a-checkbox
v-if="permission.actionsOptions.length > 0"
:indeterminate="permission.indeterminate"
:checked="permission.checkedAll"
@change="onChangeCheckAll($event, permission)">
全选
</a-checkbox>
<a-checkbox-group :options="permission.actionsOptions" v-model="permission.selected" @change="onChangeCheck(permission)" />
</a-col>
</a-row>
</a-form-item>
</a-form>
</a-spin>
<a-steps :current="1">
<a-step>
<!-- <span slot="title">Finished</span> -->
<template slot="title">
Finished
</template>
<span slot="description">This is a description.</span>
</a-step>
<a-step title="In Progress" description="This is a description." />
<a-step title="Waiting" description="This is a description." />
</a-steps>
</a-modal>
</template>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment