Commit 33079642 authored by levante's avatar levante

123

parent 616dcbe2
<template>
<div class="routerWapper">
<div class="portalDetailTitle" v-if="$route.name == 'actionList'">
<span class="title">触发</span>
<span class="title">触发Action</span>
<div class="layoutMargin layoutPadding">
<a-row>
<a-col span="24">
<a-button icon="plus" type="primary" @click="onCreate">新建</a-button>
</a-col>
</a-row>
<div class="itemMargin">
<a-alert type="info" show-icon>
<p slot="description">
已选择: {{selectedRowKeys.length}}
</p>
</a-alert>
</div>
<a-table class="elevator-table portalTable" :dataSource="list" :columns="columns" size="small" :pagination="pagination" rowKey="id" :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }">
<span slot="operation" slot-scope="text, record">
<span class="actionBtn" @click="edit(record)">编辑</span>
<span class="actionBtn" @click="more(record)">更多</span>
</span>
<span slot="no" slot-scope="text, record, index">
{{index+1}}
</span>
</a-table>
<a-modal title="系统注册" v-model="isShow" width='900px' style="padding: 20px">
<a-steps :current="current">
<a-step v-for="item in steps" :key="item.title" :title="item.title" />
</a-steps>
<div class="steps-content">
<!-- {{ steps[current].content }} -->
<a-form :form='form'>
<div v-show="current == 0">
<a-form-item label="所属系统" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
<a-select placeholder="请选择授权类型" v-decorator="['ssxt', {validateTrigger:'blur', rules: [{required: true, message: '请填写此项!'}]}]">
<a-select-option value="物业App">物业App</a-select-option>
</a-select>
</a-form-item>
<a-form-item label="服务编码" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
<a-input v-decorator="['fwbm', {validateTrigger:'blur', rules: [{required: true, message: '请填写此项!'}]}]" />
</a-form-item>
<a-form-item label="服务名称" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
<a-input v-decorator="['fwmc', {validateTrigger:'blur', rules: [{required: true, message: '请填写此项!'}]}]" />
</a-form-item>
</div>
<div v-show="current == 1">
<a-row v-for="(item, index) in rowLoop" :key="index">
<a-col :span='6' offset='1'>
<a-form-item>
<a-input v-decorator="['first'+index, {validateTrigger:'blur', rules: [{required: true, message: '请填写此项!'}]}]" />
</a-form-item>
</a-col>
<a-col :span='6' offset='1'>
<a-form-item>
<a-select v-decorator="['second' + index, {validateTrigger:'blur', rules: [{required: true, message: '请填写此项!'}]}]">
<a-select-option value="String">String</a-select-option>
<a-select-option value="Integer">Integer</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :span='6' offset='1'>
<a-form-item>
<a-input v-decorator="['third' + index, {validateTrigger:'blur', rules: [{required: true, message: '请填写此项!'}]}]" />
</a-form-item>
</a-col>
<a-col :span='2' offset='1'>
<a-button v-if="index+1 == rowLoop.length" icon='minus' @click="deleteRow()"></a-button>
<a-button v-if="index+1 == rowLoop.length" icon='plus' @click="addRow()"></a-button>
</a-col>
</a-row>
</div>
<div v-show="current == 2">
<a-form-item label="回调地址" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
<a-input v-decorator="['hddz', {validateTrigger:'blur', rules: [{required: true, message: '请填写此项!'}]}]" />
</a-form-item>
</div>
</a-form>
</div>
<template slot="footer">
<a-button key="back" @click="isShow = !isShow">
取消
</a-button>
<a-button v-if="current >= 1" type="primary" @click="handlePrevStep()">
上一步
</a-button>
<a-button v-if="current < 2" type="primary" @click="handleNextStep()">
下一步
</a-button>
<a-button v-if="current == 2" type="primary" @click="handleRegisterOk()">
完成
</a-button>
</template>
</a-modal>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
form: this.$form.createForm(this),
current: 0,
steps: [
{
title: '基本信息'
},
{
title: '输出参数'
},
{
title: '回调设置'
},
],
isShow: false,
selectedRowKeys: [],
list: [
{
ssxt: 'wuyeapp',
fwbm: '物业APP',
fwmc: 'http://www.962121.net',
fwdz: '服务地址示例'
}
],
columns: [
{
title: '#',
dataIndex: 'no',
align: 'center',
key: 'no',
scopedSlots: {
customRender: 'no',
},
},
{
title: '所属系统',
dataIndex: 'ssxt',
align: 'center',
key: 'ssxt'
},
{
title: '服务编码',
dataIndex: 'fwbm',
align: 'center',
key: 'fwbm'
},
{
title: '服务名称',
dataIndex: 'fwmc',
align: 'center',
key: 'fwmc'
},
{
title: '服务地址',
dataIndex: 'fwdz',
align: 'center',
key: 'fwdz'
},
{
title: '操作',
dataIndex: 'operation',
key: 'operation',
width: '120px',
scopedSlots: {
customRender: 'operation',
},
}
],
pagination: {//分页
pageNo: 1,
pageSize: 10,
total: 10,
current: 1,
defaultCurrent: 1,
showQuickJumper: true,
onChange: this.pageChange
},
formStoreList: [],
rowLoop: [{
first: '',
second: '',
third: ''
}]
}
},
methods: {
pageChange(val) {
this.pagination.pageNo = val
this.pagination.current = val
// this.getCompanyList()
},
onSelectChange(selectedRowKeys) {
this.selectedRowKeys = selectedRowKeys
},
onCreate() {
this.current = 0
this.form.resetFields()
this.isShow = !this.isShow
},
handlePrevStep() {
if(this.current >= 1) {
this.current -= 1
}
},
handleNextStep() {
this.current += 1
},
handleRegisterOk() {
this.form.validateFields((err, values) => {
if (!err) {
console.log(this.form.getFieldsValue())
} else {
this.$message.info('请填写表单所有项目!')
}
})
},
addRow() {
this.rowLoop.push({
first: '',
second: '',
third: ''
})
},
deleteRow() {}
}
}
</script>
<style scoped>
.itemMargin {
margin-top: 14px;
margin-bottom: 14px
}
</style>
......@@ -9,13 +9,20 @@
</a-col>
</a-row>
<div class="itemMargin">
<a-alert message="Informational Notes" type="info" show-icon />
<a-alert type="info" show-icon>
<p slot="description">
已选择: {{selectedRowKeys.length}}
</p>
</a-alert>
</div>
<a-table class="elevator-table portalTable" :dataSource="list" :columns="columns" size="small" :pagination="pagination" rowKey="id" :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }">
<span slot="operation" slot-scope="text, record">
<span class="actionBtn" @click="edit(record)">编辑</span>
<span class="actionBtn" @click="more(record)">更多</span>
</span>
<span slot="no" slot-scope="text, record, index">
{{index+1}}
</span>
</a-table>
<a-modal title="系统注册" v-model="isShow" width='900px' style="padding: 20px">
<a-steps :current="current">
......@@ -24,9 +31,9 @@
<div class="steps-content">
<!-- {{ steps[current].content }} -->
<a-form :form='form'>
<div v-if="current == 0">
<div v-show="current == 0">
<a-form-item label="系统编码" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
<a-input v-decorator="['xtbm', {validateTrigger:'blur', rules: [{required: true, message: '请填写此项!'}]}]" />
<a-input v-decorator="['xtbm', { validateTrigger:'blur', rules: [{required: true, message: '请填写此项!'}]}]" />
</a-form-item>
<a-form-item label="系统名称" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
......@@ -37,9 +44,9 @@
<a-input v-decorator="['xtdz', {validateTrigger:'blur', rules: [{required: true, message: '请填写此项!'}]}]" />
</a-form-item>
</div>
<div v-if="current == 1">
<div v-show="current == 1">
<a-form-item label="授权类型" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
<a-select placeholder="请选择授权类型" v-decorator="['sqlx']">
<a-select placeholder="请选择授权类型" v-decorator="['sqlx', {validateTrigger:'blur', rules: [{required: true, message: '请填写此项!'}]}]">
<a-select-option value="oauth2">oauth2</a-select-option>
</a-select>
</a-form-item>
......@@ -49,13 +56,13 @@
</a-form-item>
<a-form-item label="授权方法" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
<a-select placeholder="请选择授权方法" v-decorator="['sqff']">
<a-select placeholder="请选择授权方法" v-decorator="['sqff', {validateTrigger:'blur', rules: [{required: true, message: '请填写此项!'}]}]">
<a-select-option value="POST">POST</a-select-option>
<a-select-option value="GET">GET</a-select-option>
</a-select>
</a-form-item>
</div>
<div v-if="current == 2">
<div v-show="current == 2">
<a-form-item label="Token Key" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
<a-input v-decorator="['tokenKey', {validateTrigger:'blur', rules: [{required: true, message: '请填写此项!'}]}]" />
</a-form-item>
......@@ -121,6 +128,15 @@ export default {
}
],
columns: [
{
title: '#',
dataIndex: 'no',
align: 'center',
key: 'no',
scopedSlots: {
customRender: 'no',
},
},
{
title: '系统编码',
dataIndex: 'xtbm',
......@@ -167,8 +183,12 @@ export default {
this.pagination.current = val
// this.getCompanyList()
},
onSelectChange() {},
onSelectChange(selectedRowKeys) {
this.selectedRowKeys = selectedRowKeys
},
onRegister() {
this.current = 0
this.form.resetFields()
this.isShow = !this.isShow
},
handlePrevStep() {
......@@ -177,17 +197,16 @@ export default {
}
},
handleNextStep() {
this.form.validateFields((err, values) => {
if(!err) {
this.formStoreList.push(this.form.getFieldsValue())
}
})
console.log(this.formStoreList)
this.current += 1
},
handleRegisterOk() {
console.log(this.form.getFieldsValue())
this.form.validateFields((err, values) => {
if (!err) {
console.log(this.form.getFieldsValue())
} else {
this.$message.info('请填写表单所有项目!')
}
})
}
}
}
......
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