form.vue 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107
  1. <template>
  2. <view class="u-page">
  3. <view class="u-demo-block">
  4. <text class="u-demo-block__title">新增设备</text>
  5. <view class="">
  6. <!-- 注意,如果需要兼容微信小程序,最好通过setRules方法设置rules规则 -->
  7. <u--form labelPosition="left" ref="form">
  8. <u-form-item label="名称" prop="" borderBottom ref="item1">
  9. <u--input v-model="form.deviceName" border="none" placeholder="设备名称"></u--input>
  10. </u-form-item>
  11. <u-form-item label="编号" prop="" borderBottom ref="item1" @click="openUseNo()">
  12. <u--input v-model="form.useNoName" disabledColor="#ffffff" placeholder="请选择编号" border="none" :disabled="true">
  13. </u--input>
  14. <u-icon slot="right" name="arrow-right"></u-icon>
  15. </u-form-item>
  16. </u--form>
  17. <view>
  18. <u-picker keyName="useNoName" :show="show" :columns="columns" @confirm="confirm" @cancel="cancel"
  19. confirmColor="#53a591">
  20. </u-picker>
  21. </view>
  22. <view style="margin: 30px;">
  23. <u-button color="#26a495" text="提交" @click="submitAdd()"></u-button>
  24. </view>
  25. </view>
  26. </view>
  27. </view>
  28. </template>
  29. <script>
  30. export default {
  31. data() {
  32. return {
  33. show: false,
  34. data: [],
  35. columns: [
  36. []
  37. ],
  38. form: {
  39. deviceName:'',
  40. useNoName :'',
  41. deviceUseNo:''
  42. }
  43. }
  44. },
  45. onLoad() {
  46. this.getList()
  47. },
  48. methods: {
  49. openUseNo() {
  50. this.show = true
  51. },
  52. confirm(e) {
  53. console.log('confirm', e)
  54. this.form.useNoName = e.value[0].useNoName;
  55. this.form.deviceUseNo = e.value[0].useNoId;
  56. this.show = false
  57. },
  58. cancel() {
  59. uni.showTabBar({
  60. animation: true
  61. })
  62. this.show = false
  63. },
  64. async getList() {
  65. const {
  66. data: res
  67. } = await this.$httpRequest({
  68. url: '/api/control/useNoList',
  69. method: 'get',
  70. });
  71. if (res.code === 200) {
  72. var data = res.data
  73. for (var i = 0; i < data.length; i++) {
  74. this.columns[0].push(data[i])
  75. }
  76. } else {
  77. }
  78. },
  79. async submitAdd() {
  80. const {
  81. data: res
  82. } = await this.$httpRequest({
  83. url: '/api/control/add',
  84. method: 'post',
  85. data: this.form
  86. });
  87. if (res.code === 200) {
  88. this.form = {}
  89. uni.showLoading({
  90. icon: 'ok',
  91. duration: 2500,
  92. title: "保存成功",
  93. });
  94. this.$goto('index')
  95. } else {
  96. }
  97. },
  98. },
  99. }
  100. </script>
  101. <style lang="scss">
  102. </style>