xz-helper README
将api文档复制到页面 点击鼠标右键 选择 生成Table页面 即可出现 生成的代码没有格式化 需要手动格式化一次代码
使用演示
from
// 该标记用于指定 页面的api地址
@api /api/admin/test
// 此标记用于禁用页面的编辑和新增部分的生成
@edit false
{
"id": 1,
"sender": 0,/*发送者*/
"code": "662901",/*验证码*/
"scene": "register",/*场景: register#注册,login#登录,update-login-pass#修改登录密码,set-pay-pass#设置/修改支付密码*/
"type": "sms",/*验证类型: sms-手机短信 email-邮件类型*/
"state": 1,/*发送状态: 0-发送失败 1-发送成功*/
"used": 1,/*使用状态:0-未使用 1-已使用*/
"used_at": "2020-05-07 07:12:23",/*使用时间*/
"number": "17345773103",/*发送账号*/
"currency": "jd", // 提现币种: jd-金豆;cny-现金余额
"pay_type": "wxpay", // 支付方式:alipay-支付宝 wechat-微信 cny-现金余额
"status": 1, // 状态: 0-待完成 1-成功 2-失败
"expired_status": 0, // 状态: 0-未过期 1-已过期
}
to use
<template>
<div class="app-container test-page">
<div class="search-block">
<el-input
v-model="searchObject.keywords"
size="small" class="mr-5 wid-160"
placeholder="请输入关键词"></el-input>
<el-button size="small" type="primary" @click='fetchTableDataList'>搜索</el-button>
<el-button size="small" type="primary" class="fr" @click='editRow({})'>新增</el-button>
</div>
<el-table :data="tableDataList" border height="650">
<!--"id": 1,-->
<el-table-column prop="id" align="center" label="id" show-overflow-tooltip></el-table-column>
<!--"sender": 0,/*发送者*/-->
<el-table-column prop="sender" align="center" label="发送者" show-overflow-tooltip></el-table-column>
<!--"code": "662901",/*验证码*/-->
<el-table-column prop="code" align="center" label="验证码" show-overflow-tooltip></el-table-column>
<!--"scene": "register",/*场景: register#注册,login#登录,update-login-pass#修改登录密码,set-pay-pass#设置/修改支付密码*/-->
<el-table-column prop="scene" align="center" label="场景">
<template slot-scope="scope">
<span v-if="scope.row.scene == 'register'">注册</span>
<span v-if="scope.row.scene == 'login'">登录</span>
<span v-if="scope.row.scene == 'update-login-pass'">修改登录密码</span>
<span v-if="scope.row.scene == 'set-pay-pass'">设置/修改支付密码*/</span>
</template>
</el-table-column>
<!--"type": "sms",/*验证类型: sms-手机短信 email-邮件类型*/-->
<el-table-column prop="type" align="center" label="验证类型">
<template slot-scope="scope">
<span v-if="scope.row.type == 'sms'">手机短信</span>
<span v-if="scope.row.type == 'email'">邮件类型*/</span>
</template>
</el-table-column>
<!--"state": 1,/*发送状态: 0-发送失败 1-发送成功*/-->
<el-table-column prop="state" align="center" label="发送状态">
<template slot-scope="scope">
<span v-if="scope.row.state == 0">发送失败</span>
<span v-if="scope.row.state == 1">发送成功*/</span>
</template>
</el-table-column>
<!--"used": 1,/*使用状态:0-未使用 1-已使用*/-->
<el-table-column prop="used" align="center" label="使用状态">
<template slot-scope="scope">
<span v-if="scope.row.used == 0">未使用</span>
<span v-if="scope.row.used == 1">已使用*/</span>
</template>
</el-table-column>
<!--"used_at": "2020-05-07 07:12:23",/*使用时间*/-->
<el-table-column prop="used_at" align="center" label="使用时间" show-overflow-tooltip></el-table-column>
<!--"number": "17345773103",/*发送账号*/-->
<el-table-column prop="number" align="center" label="发送账号" show-overflow-tooltip></el-table-column>
<!--"currency": "jd", // 提现币种: jd-金豆;cny-现金余额-->
<el-table-column prop="currency" align="center" label="提现币种">
<template slot-scope="scope">
<span v-if="scope.row.currency == 'jd'">金豆</span>
<span v-if="scope.row.currency == 'cny'">现金余额</span>
</template>
</el-table-column>
<!--"pay_type": "wxpay", // 支付方式:alipay-支付宝 wechat-微信 cny-现金余额-->
<el-table-column prop="pay_type" align="center" label="支付方式">
<template slot-scope="scope">
<span v-if="scope.row.pay_type == 'alipay'">支付宝</span>
<span v-if="scope.row.pay_type == 'wechat'">微信</span>
<span v-if="scope.row.pay_type == 'cny'">现金余额</span>
</template>
</el-table-column>
<!--"status": 1, // 状态: 0-待完成 1-成功 2-失败-->
<el-table-column prop="status" align="center" label="状态">
<template slot-scope="scope">
<span v-if="scope.row.status == 0">待完成</span>
<span v-if="scope.row.status == 1">成功</span>
<span v-if="scope.row.status == 2">失败</span>
</template>
</el-table-column>
<!--"expired_status": 0, // 状态: 0-未过期 1-已过期-->
<el-table-column prop="expired_status" align="center" label="状态">
<template slot-scope="scope">
<span v-if="scope.row.expired_status == 0">未过期</span>
<span v-if="scope.row.expired_status == 1">已过期</span>
</template>
</el-table-column>
<el-table-column prop="state" label="操作" align="center" width='120'>
<template slot-scope='scope'>
<el-link type="primary" class="mr-5" @click="editRow(scope.row)">编辑</el-link>
<el-link type="success" class="mr-5">启用</el-link>
<el-link type="warning" class="mr-5">禁用</el-link>
<el-link type="danger" @click="deleteRow(scope.row)">删除</el-link>
</template>
</el-table-column>
</el-table>
<el-pagination hide-on-single-page
background layout="prev,pager,next"
@current-change="fetchTableDataList"
:current-page.sync="pageNo"
:page-count="pageCount"></el-pagination>
<el-dialog title="提示" ref="editRowDialog" :visible.sync="showEditPop" width="800px" center class="edit-box">
<el-form :model="currentActiveRow" :rules="editRules" label-width="100px">
<el-form-item label="发送者" prop="sender">
<el-input type="text" v-model="currentActiveRow.sender"></el-input>
</el-form-item>
<el-form-item label="验证码" prop="code">
<el-input type="number" v-model="currentActiveRow.code"></el-input>
</el-form-item>
<el-form-item label="场景" prop="scene">
<el-select v-model="currentActiveRow.scene" placeholder="请选择场景">
<el-option label="注册" value="register" />
<el-option label="登录" value="login" />
<el-option label="修改登录密码" value="update-login-pass" />
<el-option label="设置/修改支付密码*/" value="set-pay-pass" />
</el-select>
</el-form-item>
<el-form-item label="验证类型" prop="type">
<el-select v-model="currentActiveRow.type" placeholder="请选择验证类型">
<el-option label="手机短信" value="sms" />
<el-option label="邮件类型*/" value="email" />
</el-select>
</el-form-item>
<el-form-item label="发送状态" prop="state">
<el-select v-model="currentActiveRow.state" placeholder="请选择发送状态">
<el-option label="发送失败" :value="0" />
<el-option label="发送成功*/" :value="1" />
</el-select>
</el-form-item>
<el-form-item label="使用状态" prop="used">
<el-select v-model="currentActiveRow.used" placeholder="请选择使用状态">
<el-option label="未使用" :value="0" />
<el-option label="已使用*/" :value="1" />
</el-select>
</el-form-item>
<el-form-item label="使用时间" prop="used_at">
<el-input type="text" v-model="currentActiveRow.used_at"></el-input>
</el-form-item>
<el-form-item label="发送账号" prop="number">
<el-input type="number" v-model="currentActiveRow.number"></el-input>
</el-form-item>
<el-form-item label="提现币种" prop="currency">
<el-select v-model="currentActiveRow.currency" placeholder="请选择提现币种">
<el-option label="金豆" value="jd" />
<el-option label="现金余额" value="cny" />
</el-select>
</el-form-item>
<el-form-item label="支付方式" prop="pay_type">
<el-select v-model="currentActiveRow.pay_type" placeholder="请选择支付方式">
<el-option label="支付宝" value="alipay" />
<el-option label="微信" value="wechat" />
<el-option label="现金余额" value="cny" />
</el-select>
</el-form-item>
<el-form-item label="状态" prop="status">
<el-select v-model="currentActiveRow.status" placeholder="请选择状态">
<el-option label="待完成" :value="0" />
<el-option label="成功" :value="1" />
<el-option label="失败" :value="2" />
</el-select>
</el-form-item>
<el-form-item label="状态" prop="expired_status">
<el-select v-model="currentActiveRow.expired_status" placeholder="请选择状态">
<el-option label="未过期" :value="0" />
<el-option label="已过期" :value="1" />
</el-select>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitItemData">提交保存</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
name: 'test',
data() {
return {
pageSize: 15,
pageNo: 1,
pageCount: 1,
tableDataList: [],
searchObject: {},
currentActiveRow: {},
showEditPop: false,
editRules: {
sender: [{ required: true, message: '请输入发送者', trigger: 'blur' }],
code: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
scene: [{ required: true, message: '请输入场景', trigger: 'blur' }],
type: [{ required: true, message: '请输入验证类型', trigger: 'blur' }],
state: [{ required: true, message: '请输入发送状态', trigger: 'blur' }],
used: [{ required: true, message: '请输入使用状态', trigger: 'blur' }],
used_at: [{ required: true, message: '请输入使用时间', trigger: 'blur' }],
number: [{ required: true, message: '请输入发送账号', trigger: 'blur' }],
currency: [{ required: true, message: '请输入提现币种', trigger: 'blur' }],
pay_type: [{ required: true, message: '请输入支付方式', trigger: 'blur' }],
status: [{ required: true, message: '请输入状态', trigger: 'blur' }],
expired_status: [{ required: true, message: '请输入状态', trigger: 'blur' }]
},
};
},
methods: {
fetchTableDataList() {
const params = {
...this.searchObject,
page: this.pageNo,
size: this.pageSize,
};
this.$request('get', '/api', params).then((resp) => {
this.tableDataList = resp.data;
this.pageCount = resp.total_page;
});
},
editRow(row) {
console.log(row);
this.currentActiveRow = row;
this.showEditPop = true;
},
deleteRow(row) {
this.$confirm('您确认要删除' + row.name + '么？').then(() => {
return this.$request('delete', '/api/' + row.id);
}).then(() => {
this.fetchTableDataList();
});
},
submitItemData() {
let url = '/api';
let method = 'post';
if (this.currentActiveRow.id) {
url += '/' + this.currentActiveRow.id;
method = 'put';
}
this.$request(method, url, this.currentActiveRow).then(() => {
this.$message.success('操作成功');
this.fetchTableDataList();
this.showEditPop = false;
});
}
},
mounted() {
this.fetchTableDataList();
},
};
</script>
<style lang="scss">
.test-page {
.search-block {
padding-bottom: 16px;
}
}
</style>
<!--json
"id": 1,
"sender": 0,/*发送者*/
"code": "662901",/*验证码*/
"scene": "register",/*场景: register#注册,login#登录,update-login-pass#修改登录密码,set-pay-pass#设置/修改支付密码*/
"type": "sms",/*验证类型: sms-手机短信 email-邮件类型*/
"state": 1,/*发送状态: 0-发送失败 1-发送成功*/
"used": 1,/*使用状态:0-未使用 1-已使用*/
"used_at": "2020-05-07 07:12:23",/*使用时间*/
"number": "17345773103",/*发送账号*/
"currency": "jd", // 提现币种: jd-金豆;cny-现金余额
"pay_type": "wxpay", // 支付方式:alipay-支付宝 wechat-微信 cny-现金余额
"status": 1, // 状态: 0-待完成 1-成功 2-失败
"expired_status": 0, // 状态: 0-未过期 1-已过期
-->
