情景:遇见表单多的页面的时候每次填写都很费劲,此方法就可以自动填写
组件 debug/index.vue
<template>
<div id="debug" v-if="isDebugging">
<div class="all" v-if="isUnfold">
<h3>测试工具台
<el-button size="small" @click="isUnfold=false" type="primary">收起</el-button>
</h3>
<div>
</div>
<el-button v-for="btn in btns" :key="btn.text" @click="btn.event">
{{btn.text}}
</el-button>
</div>
<el-button v-if="!isUnfold" size="small" @click="isUnfold=true" type="primary">展开</el-button>
</div>
</template>
<script>
// 使用说明:在控制台输入以下代码即可显示调试窗口:【sessionStorage.debug = true】
// 嵌入方法:
// <Debug :btns="[{text:'test',event:test}]"/>
// 一个对象是一个按钮。text 是按钮文字,event 是按钮点击后触发的事件
export default {
name: 'debug',
props: {
btns: Array
},
created () {
const enable = window.sessionStorage.getItem('debug');
if (enable && enable === 'true') {
this.isDebugging = true;
}
},
data () {
return {
isDebugging: false,
isUnfold: true
}
}
}
</script>
<style scoped lang="less">
#debug {
position: fixed;
top: 0;
left: 0;
padding: 10px;
border: 1px solid red;
z-index: 1000;
h3 {
font-weight: bold;
}
}
</style>
mock.js
const mockData = {
'taskId': null,
'projectId': '336915611',
'projectName': '我和我的家乡',
'projectAbb': '12212',
'projectType': '10024001',
'projectScale': '500000',
'totalCost': '21',
'approvalCost': '21',
'manageMode': '10027002',
'planType': '10038000',
'riskLevel': '10026003',
'isTransfer': 0,
'temporaryFlag': 'Y',
'legalDeptId': '10029004',
'deptId': '10028002',
'tradePerson': '21212',
'createdBy': '15771992257',
'capitalUses': '资金用途',
'tradeRules': '交易规则',
'riskControl': '风控措施',
'documentDtos': [{
'businessId': '336915611',
'categoryKey': 'projectFileCode',
'value': '/olin/2021/02/23-760924232aa.jpg'
}]
};
export default function addMockData () {
// 映射一下
const hash = {
planType: 'income_type', // 收益类型
manageMode: 'supervisor_mode', // 管理方式
legalDeptId: 'compliance', // 法律合规
riskLevel: 'risk_grade', // 风险等级
deptId: 'operating_department', // 业务部门
projectType: 'prd_type', // 项目类型
projectName: 'prd_full_name', // 项目全称
projectAbb: 'prd_simple_name', // 项目简称
// projectId: 'prd_id', // 项目编号
projectScale: 'scale', // 项目规模
tradePerson: 'Counterparties', // 交易对手
approvalCost: 'approval', // 审批发行成本
totalCost: 'cost', // 项目总成本
capitalUses: 'use_of_funds', // 资金用途
riskControl: 'risk_control_measures', // 风控措施
tradeRules: 'transaction_rules', // 交易规则
isTransfer: 'usufruct' // 是否收益权转让
};
Object.keys(hash).forEach(key => {
this.originData[hash[key]] = mockData[key];
console.log(key, mockData, this.originData, mockData[key], this.originData[hash[key]], 'mock');
})
this.imgList = mockData.documentDtos.map(item => item.value);
}
页面引入
<Debug :btns="mockBtns"/>
<script>
import Debug from 'components/debug';
import addMockData from './mock.js';
export default {
components: {
Debug
},
created () {
this.test = addMockData.bind(this);
},
methods () {
test () {};
},
computed: {
mockBtns () {
return [
{
text: 'test',
event: this.test
}
];
}
}
}
</script>