123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113 |
- <template>
- <view class="p-content">
- <view class="p-body">
- <uni-forms :value="formData" border ref="form" :rules="rules" label-align="right" err-show-type="toast">
- <uni-forms-item label="条码:" name="code" required>
- <input type="text" v-model="formData.code" placeholder="请输入条码" />
- </uni-forms-item>
- <uni-forms-item label="名称:" name="name" required>
- <input type="text" v-model="formData.name" placeholder="请输入产品名称" />
- </uni-forms-item>
- <uni-forms-item label="单位:">
- <input type="text" v-model="formData.unit" placeholder="请输入单位" />
- </uni-forms-item>
- <uni-forms-item label="库存:">
- <input type="text" v-model="formData.qty" placeholder="请输入库存" />
- </uni-forms-item>
- <uni-forms-item label="进价:">
- <input type="text" v-model="formData.cost" placeholder="请输入进价" />
- </uni-forms-item>
- <uni-forms-item label="销售价:">
- <input type="digit" v-model="formData.price" placeholder="请输入销售价" />
- </uni-forms-item>
- <uni-forms-item label="批发价:">
- <input type="digit" v-model="formData.uprice" placeholder="请输入批发价" />
- </uni-forms-item>
- </uni-forms>
- </view>
- <view class="p-footer">
- <button size="mini" type="primary" @click="submit('form')">添加</button>
- </view>
- </view>
- </template>
- <script>
- export default {
- data() {
- return {
- formData:{
- code:'',
- name:'',
- unit:'',
- qty:'',
- cost:'',
- price:'',
- uprice:''
- },
- rules:{
- code: {
- rules: [{
- required: true,
- errorMessage: '请输入条码',
- },
- {
- minLength: 3,
- maxLength: 50,
- errorMessage: '条码长度在 {minLength} 到 {maxLength} 个字符',
- }
- ]
- },
- name: {
- rules: [{
- required: true,
- errorMessage: '请输入产品名称',
- },
- {
- minLength: 3,
- maxLength: 50,
- errorMessage: '姓名长度在 {minLength} 到 {maxLength} 个字符',
- }
- ]
- },
- }
- };
- },
- methods: {
- // 触发提交表单
- submit() {
- this.$refs.form.validate().then(res=>{
- console.log('表单数据信息:', this.formData);
- }).catch(err =>{
- console.log('表单错误信息:', err);
- })
- }
- }
- }
- </script>
- <style lang="scss">
- .p-content{
- .p-body{
- flex-grow: 1;
- height: 50%;
- overflow: auto;
- input{
- font-size: 30upx;
- height: 36px;
- line-height: 36px;
- }
- .uni-forms-item{
- margin-bottom: 0;
- padding: 10upx 0;
- }
- }
- .p-footer{
- padding: 20upx;
- text-align: center;
- button{
- width: 60%;
- padding: 10upx 0;
- }
- }
- }
- </style>
|