add.vue 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
  1. <template>
  2. <view class="p-content">
  3. <view class="p-body">
  4. <uni-forms :value="formData" border ref="form" :rules="rules" label-align="right" err-show-type="toast">
  5. <uni-forms-item label="条码:" name="code" required>
  6. <input type="text" v-model="formData.code" placeholder="请输入条码" />
  7. </uni-forms-item>
  8. <uni-forms-item label="名称:" name="name" required>
  9. <input type="text" v-model="formData.name" placeholder="请输入产品名称" />
  10. </uni-forms-item>
  11. <uni-forms-item label="单位:">
  12. <input type="text" v-model="formData.unit" placeholder="请输入单位" />
  13. </uni-forms-item>
  14. <uni-forms-item label="库存:">
  15. <input type="text" v-model="formData.qty" placeholder="请输入库存" />
  16. </uni-forms-item>
  17. <uni-forms-item label="进价:">
  18. <input type="text" v-model="formData.cost" placeholder="请输入进价" />
  19. </uni-forms-item>
  20. <uni-forms-item label="销售价:">
  21. <input type="digit" v-model="formData.price" placeholder="请输入销售价" />
  22. </uni-forms-item>
  23. <uni-forms-item label="批发价:">
  24. <input type="digit" v-model="formData.uprice" placeholder="请输入批发价" />
  25. </uni-forms-item>
  26. </uni-forms>
  27. </view>
  28. <view class="p-footer">
  29. <button size="mini" type="primary" @click="submit('form')">添加</button>
  30. </view>
  31. </view>
  32. </template>
  33. <script>
  34. export default {
  35. data() {
  36. return {
  37. formData:{
  38. code:'',
  39. name:'',
  40. unit:'',
  41. qty:'',
  42. cost:'',
  43. price:'',
  44. uprice:''
  45. },
  46. rules:{
  47. code: {
  48. rules: [{
  49. required: true,
  50. errorMessage: '请输入条码',
  51. },
  52. {
  53. minLength: 3,
  54. maxLength: 50,
  55. errorMessage: '条码长度在 {minLength} 到 {maxLength} 个字符',
  56. }
  57. ]
  58. },
  59. name: {
  60. rules: [{
  61. required: true,
  62. errorMessage: '请输入产品名称',
  63. },
  64. {
  65. minLength: 3,
  66. maxLength: 50,
  67. errorMessage: '姓名长度在 {minLength} 到 {maxLength} 个字符',
  68. }
  69. ]
  70. },
  71. }
  72. };
  73. },
  74. methods: {
  75. // 触发提交表单
  76. submit() {
  77. this.$refs.form.validate().then(res=>{
  78. console.log('表单数据信息:', this.formData);
  79. }).catch(err =>{
  80. console.log('表单错误信息:', err);
  81. })
  82. }
  83. }
  84. }
  85. </script>
  86. <style lang="scss">
  87. .p-content{
  88. .p-body{
  89. flex-grow: 1;
  90. height: 50%;
  91. overflow: auto;
  92. input{
  93. font-size: 30upx;
  94. height: 36px;
  95. line-height: 36px;
  96. }
  97. .uni-forms-item{
  98. margin-bottom: 0;
  99. padding: 10upx 0;
  100. }
  101. }
  102. .p-footer{
  103. padding: 20upx;
  104. text-align: center;
  105. button{
  106. width: 60%;
  107. padding: 10upx 0;
  108. }
  109. }
  110. }
  111. </style>