addElectronicScale.vue 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141
  1. <template>
  2. <a-modal :footer="null" centered :title="titleText" v-model="isShow" @cancle="cancel">
  3. <a-form-model :model="formData" ref="ruleForm" :rules="rules">
  4. <a-form-model-item label="设备MAC地址" :label-col="{span:6}" :wrapper-col="{span:16}" prop="macAddress">
  5. <a-input
  6. placeholder="请输入设备MAC地址"
  7. :disabled="id?true:false"
  8. v-model="formData.macAddress"
  9. allowClea
  10. oninput="value=value.toLowerCase()"
  11. :maxLength="12" />
  12. </a-form-model-item>
  13. <a-form-model-item label="设备名称" :label-col="{span:6}" :wrapper-col="{span:16}" prop="deviceName">
  14. <a-input placeholder="请输入设备名称" v-model="formData.deviceName" allowClear :maxLength="30"/>
  15. </a-form-model-item>
  16. <a-form-model-item label="设备编号" :label-col="{span:6}" :wrapper-col="{span:16}" prop="deviceCode">
  17. <a-input placeholder="请输入设备编号" v-model="formData.deviceCode" allowClear :maxLength="30"/>
  18. </a-form-model-item>
  19. <a-form-model-item label="设备型号" :label-col="{span:6}" :wrapper-col="{span:16}" prop="deviceModel">
  20. <a-input placeholder="请输入设备型号" v-model="formData.deviceModel" allowClear :maxLength="30"/>
  21. </a-form-model-item>
  22. <a-form-model-item label="生产厂家" :label-col="{span:6}" :wrapper-col="{span:16}" prop="manufacturer">
  23. <a-input placeholder="请输入生产厂家" v-model="formData.manufacturer" allowClear :maxLength="30"/>
  24. </a-form-model-item>
  25. <a-form-model-item :wrapper-col="{ span: 24, offset: 8 }">
  26. <a-button type="primary" @click="handleSubmit()" :style="{ marginRight: '15px' }">
  27. 保存
  28. </a-button>
  29. <a-button :style="{ marginLeft: '15px' }" @click="cancel">
  30. 取消
  31. </a-button>
  32. </a-form-model-item>
  33. </a-form-model>
  34. </a-modal>
  35. </template>
  36. <script>
  37. import { saveDevice, deviceDetails } from '@/api/electronicScale.js'
  38. export default {
  39. name: 'AddElectronicScale',
  40. props: {
  41. visible: {
  42. type: Boolean,
  43. default: false
  44. },
  45. deviceCode: {
  46. type: [Number, String],
  47. default: ''
  48. },
  49. id: {
  50. type: [Number, String],
  51. default: ''
  52. }
  53. },
  54. data () {
  55. return {
  56. formData: { macAddress: '', deviceCode: '', deviceName: '', deviceModel: '', manufacturer: '' },
  57. isShow: this.visible, // 弹框状态
  58. titleText: '新增',
  59. rules: {
  60. macAddress: [{ required: true, message: '请输入设备MAC地址(数字与英文字母组合)', trigger: 'blur', pattern: /^[A-Za-z0-9]+$/ }]
  61. }
  62. }
  63. },
  64. methods: {
  65. // 数据详情
  66. getPageInfo () {
  67. const _this = this
  68. deviceDetails({
  69. srcDeviceCode: _this.deviceCode
  70. }).then(res => {
  71. if (res.status == 200) {
  72. _this.formData = Object.assign({}, this.formData, res.data)
  73. _this.formData.loginFlag = Number(this.formData.loginFlag)
  74. }
  75. })
  76. },
  77. handleSubmit () {
  78. this.$refs.ruleForm.validate(valid => {
  79. const _this = this
  80. if (valid) {
  81. const params = JSON.parse(JSON.stringify(this.formData))
  82. saveDevice(params).then(res => {
  83. console.log(res, 'rrrrrrrrr')
  84. if (res.status == 200) {
  85. _this.$message.success(res.message)
  86. _this.$emit('refresh')
  87. setTimeout(function () {
  88. _this.cancel()
  89. }, 300)
  90. }
  91. })
  92. }
  93. })
  94. },
  95. cancel (e) {
  96. this.clear()
  97. this.$emit('close')
  98. },
  99. clear () {
  100. this.$refs.ruleForm.resetFields()
  101. delete this.formData.id
  102. this.formData.macAddress = ''
  103. this.formData.deviceCode = ''
  104. this.formData.deviceName = ''
  105. this.formData.deviceModel = ''
  106. this.formData.manufacturer = ''
  107. }
  108. },
  109. // 监听弹窗
  110. watch: {
  111. // 父页面传过来的弹窗状态
  112. visible (newValue, oldValue) {
  113. this.isShow = newValue
  114. },
  115. isShow (newValue, oldValue) {
  116. if (newValue) {
  117. if (this.id) { // 编辑
  118. this.titleText = '编辑'
  119. console.log(this.deviceCode, '---------shebei 编号')
  120. this.getPageInfo()
  121. } else {
  122. this.titleText = '新增'
  123. }
  124. } else {
  125. this.cancel()
  126. }
  127. // if (!newValue) {
  128. // this.$emit('close')
  129. // } else {
  130. // this.$nextTick(() => {
  131. // this.$refs.ruleForm.resetFields()
  132. // })
  133. // }
  134. }
  135. }
  136. }
  137. </script>
  138. <style>
  139. </style>