自动填写表单

情景：遇见表单多的页面的时候每次填写都很费劲，此方法就可以自动填写
组件 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 = {
        projectId: 'prd_id'
    };
    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>

 

标签：hash,表单,test,mockData,自动,key,debug,填写,true
来源： https://blog.csdn.net/weixin_46058357/article/details/113985071