You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
136 lines
4.6 KiB
Vue
136 lines
4.6 KiB
Vue
<template>
|
|
<div class="p-5 space-y-5 !bg-gray-100">
|
|
<el-card header="测试加解密掩码场景">
|
|
<el-form
|
|
ref="formRef"
|
|
:model="formData"
|
|
label-width="140px"
|
|
>
|
|
<el-row>
|
|
<el-col :span="12">
|
|
<editMaskVal
|
|
label="姓名"
|
|
:formData="formData"
|
|
:propName="'name'"
|
|
:typeName="'nameMask'"
|
|
/>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item
|
|
label="年龄"
|
|
prop="age"
|
|
>
|
|
<el-input v-model="formData.age" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item
|
|
label="性别"
|
|
prop="sex"
|
|
>
|
|
<el-input v-model="formData.sex" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<editMaskVal
|
|
label="手机号"
|
|
:formData="formData"
|
|
:propName="'tel'"
|
|
:typeName="'phoneFilter'"
|
|
/>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<editMaskVal
|
|
label="银行卡号"
|
|
:formData="formData"
|
|
:propName="'cardNo'"
|
|
:typeName="'cardNoFilter'"
|
|
/>
|
|
</el-col>
|
|
<!--车牌号改变的时候清空车架号-->
|
|
<el-col :span="12">
|
|
<editMaskVal
|
|
label="车牌号"
|
|
:formData="formData"
|
|
:propName="'carNo'"
|
|
:typeName="'carBoardNumFilter'"
|
|
@currentBlur="changeCarNo"
|
|
/>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<editMaskVal
|
|
label="车架号"
|
|
:formData="formData"
|
|
:propName="'carVin'"
|
|
:typeName="'carVinFilter'"
|
|
/>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<editMaskVal
|
|
label="身份证号"
|
|
:formData="formData"
|
|
:propName="'idNo'"
|
|
:typeName="'IdNumberFilter'"
|
|
/>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<div class="flex justify-center">
|
|
<el-button
|
|
type="primary"
|
|
class="w-40"
|
|
:loading="loading"
|
|
@click="doSubmit"
|
|
>提交</el-button
|
|
>
|
|
</div>
|
|
</el-form>
|
|
</el-card>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="jsx">
|
|
import { ref, onMounted } from 'vue';
|
|
import mockData from './utils/mockData';
|
|
import editMaskVal from './components/editMaskVal.vue';
|
|
import { decrypt, encrypt } from './utils/paEncrypt';
|
|
import { ElMessageBox } from 'element-plus';
|
|
|
|
const formData = ref({});
|
|
const loading = ref(false);
|
|
const formRef = ref();
|
|
|
|
onMounted(() => {
|
|
initData();
|
|
});
|
|
|
|
const initData = () => {
|
|
setTimeout(() => {
|
|
decrypt(mockData, ['name', 'tel', 'cardNo', 'carNo', 'carVin', 'idNo']);
|
|
formData.value = mockData;
|
|
console.log('获取接口后解密的数据', formData.value);
|
|
}, 200);
|
|
};
|
|
|
|
const doSubmit = () => {
|
|
loading.value = true;
|
|
setTimeout(() => {
|
|
const { ...submitInfo } = formData.value;
|
|
encrypt(submitInfo, ['name', 'tel', 'cardNo', 'carNo', 'carVin', 'idNo']);
|
|
ElMessageBox({
|
|
title: '提交成功',
|
|
message: <p>请打开控制台查看结果</p>,
|
|
});
|
|
console.log('提交给接口加密的数据', submitInfo);
|
|
console.log('本地表单数据', formData.value);
|
|
loading.value = false;
|
|
}, 1000);
|
|
};
|
|
|
|
const changeCarNo = () => {
|
|
formData.value.carVin = '';
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped></style>
|