141 lines
3.2 KiB
Vue
141 lines
3.2 KiB
Vue
<template>
|
|
<view class="container">
|
|
<form @submit="formSubmit" @reset="formReset">
|
|
<tui-list-cell :hover="false">
|
|
<view class="tui-line-cell">
|
|
<view class="tui-title">机构名称</view>
|
|
<input placeholder-class="tui-phcolor" class="tui-input" name="name" value="肿瘤医院"
|
|
maxlength="50" type="text" />
|
|
</view>
|
|
</tui-list-cell>
|
|
<tui-list-cell :hover="false">
|
|
<view class="tui-line-cell">
|
|
<view class="tui-title">上报人员</view>
|
|
<input placeholder-class="tui-phcolor" class="tui-input" name="name" value="小王"
|
|
maxlength="50" type="text" />
|
|
</view>
|
|
</tui-list-cell>
|
|
<tui-list-cell :hover="false">
|
|
<view class="tui-line-cell">
|
|
<view class="tui-title">暂存点</view>
|
|
<input placeholder-class="tui-phcolor" class="tui-input" name="name" value="肿瘤医院暂存点"
|
|
maxlength="50" type="text" />
|
|
</view>
|
|
</tui-list-cell>
|
|
<tui-list-cell :hover="false">
|
|
<view class="tui-line-cell">
|
|
<view class="tui-title">计划批次</view>
|
|
<input placeholder-class="tui-phcolor" class="tui-input" name="name" value="202209130001"
|
|
maxlength="50" type="text" />
|
|
</view>
|
|
</tui-list-cell>
|
|
<tui-list-cell :hover="false">
|
|
<view class="tui-line-cell">
|
|
<view class="tui-title">上报时间</view>
|
|
<input placeholder-class="tui-phcolor" class="tui-input" name="name" value="2022-09-13 17:56:20"
|
|
maxlength="50" type="text" />
|
|
</view>
|
|
</tui-list-cell>
|
|
</form>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
const form = require("@/components/common/tui-validation/tui-validation.js")
|
|
|
|
function checkKeyword(value) {
|
|
if (~value.indexOf("***")) {
|
|
return false;
|
|
}
|
|
return true;
|
|
}
|
|
export default {
|
|
data() {
|
|
return {}
|
|
},
|
|
methods: {
|
|
formSubmit: function(e) {
|
|
//表单规则
|
|
let rules = [{
|
|
name: "name",
|
|
rule: ["required", "isChinese", "minLength:2", "maxLength:6"], //可使用区间，此处主要测试功能
|
|
msg: ["请输入姓名", "姓名必须全部为中文", "姓名必须2个或以上字符", "姓名不能超过6个字符"]
|
|
}];
|
|
//进行表单检查
|
|
let formData = e.detail.value;
|
|
let checkRes = form.validation(formData, rules);
|
|
if (!checkRes) {
|
|
uni.showToast({
|
|
title: "验证通过!",
|
|
icon: "none"
|
|
});
|
|
} else {
|
|
uni.showToast({
|
|
title: checkRes,
|
|
icon: "none"
|
|
});
|
|
}
|
|
},
|
|
formReset: function(e) {
|
|
console.log("清空数据")
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.container {
|
|
padding: 20rpx 0 50rpx 0;
|
|
}
|
|
|
|
.tui-line-cell {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.tui-title {
|
|
line-height: 32rpx;
|
|
min-width: 120rpx;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.tui-input {
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
padding-left: 20rpx;
|
|
flex: 1;
|
|
overflow: visible;
|
|
}
|
|
|
|
.radio-group {
|
|
margin-left: auto;
|
|
transform: scale(0.8);
|
|
transform-origin: 100% center;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.tui-radio {
|
|
display: inline-block;
|
|
padding-left: 28rpx;
|
|
font-size: 36rpx;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
|
|
.tui-btn-box {
|
|
padding: 40rpx 50rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.tui-button-gray {
|
|
margin-top: 30rpx;
|
|
}
|
|
|
|
.tui-tips {
|
|
padding: 30rpx;
|
|
color: #999;
|
|
font-size: 24rpx;
|
|
}
|
|
</style>
|