AddBoxModal.vue 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244
  1. <template>
  2. <div>
  3. <a-modal
  4. class="modalBox"
  5. :title="titleText"
  6. v-model="isshow"
  7. :footer="null"
  8. @cancle="cancel"
  9. :width="800"
  10. :centered="true">
  11. <a-form-model
  12. ref="ruleForm"
  13. :model="formData"
  14. :rules="rules"
  15. >
  16. <!-- 箱体类型名称 -->
  17. <a-form-model-item label="箱体类型名称" ref="name" prop="name" :label-col="{ span: 5 }" :wrapper-col="{ span: 14 }">
  18. <a-input
  19. placeholder="请输入箱体类型名称(最多30个字符)"
  20. allowClear
  21. :maxLength="30"
  22. id="roleModal-name"
  23. v-model="formData.name"
  24. />
  25. </a-form-model-item>
  26. <!-- 内置箱体数量 -->
  27. <a-form-model-item label="内置箱体数量" ref="boxNum" prop="boxNum" :label-col="{ span: 5 }" :wrapper-col="{ span: 14 }">
  28. <v-select
  29. ref="orderStatus"
  30. id="addBoxModal-status"
  31. code="BOX_NUM"
  32. @change="handleNumChange"
  33. placeholder="请选择"
  34. allowClear
  35. v-model="formData.boxNum"
  36. >
  37. </v-select>
  38. </a-form-model-item>
  39. <!-- 箱体限投 -->
  40. <a-row type="flex" align="middle" v-for="(item, index) in formData.deviceTypeBoxList" :key="index">
  41. <a-col span="12">
  42. <!-- 投放开始时间 -->
  43. <a-form-model-item
  44. :label=" '内置'+(index+1)+'号箱限投(kg)'"
  45. :required="true"
  46. :label-col=" { span: 10 }"
  47. :wrapper-col=" { span: 14 }"
  48. :prop="'deviceTypeBoxList.' + index + '.maxWeight'"
  49. :rules="{
  50. required: true,
  51. message: '请输入限投数量',
  52. trigger: ['blur','change'],
  53. }"
  54. >
  55. <a-input-number
  56. :min="1"
  57. :max="1000"
  58. :precision="0"
  59. style="width: 200px;"
  60. placeholder="请输入数字(最大1000)"
  61. v-model="item.maxWeight"
  62. />
  63. </a-form-model-item>
  64. </a-col>
  65. <a-col span="1"></a-col>
  66. <a-col span="9">
  67. <!-- 请选择分类 -->
  68. <a-form-model-item
  69. :label="''"
  70. :required="false"
  71. :wrapper-col="{ span: 18 }"
  72. :prop="'deviceTypeBoxList.' + index + '.rubbishType'"
  73. :rules="{
  74. required: true,
  75. message: '请选择分类',
  76. trigger: ['blur','change'],
  77. }"
  78. >
  79. <v-select
  80. ref="orderStatus"
  81. id="addBoxModal-status"
  82. code="RUBBISH_TYPE"
  83. placeholder="请选择分类"
  84. allowClear
  85. v-model="item.rubbishType"
  86. >
  87. </v-select>
  88. </a-form-model-item>
  89. </a-col>
  90. </a-row>
  91. <a-form-model-item :wrapper-col="{ span: 24, offset: 10 }">
  92. <a-button type="primary" @click="handleSubmit()" id="roleModal-handleSubmit" :style="{ marginRight: '15px' }">
  93. 保存
  94. </a-button>
  95. <a-button :style="{ marginLeft: '15px' }" @click="handleCancel()" id="roleModal-handleCancel">
  96. 取消
  97. </a-button>
  98. </a-form-model-item>
  99. </a-form-model>
  100. </a-modal>
  101. </div>
  102. </template>
  103. <script>
  104. import {
  105. STable,
  106. VSelect
  107. } from '@/components'
  108. import {
  109. saveBoxSetting,
  110. viewBoxSetting
  111. } from '@/api/boxSetting.js'
  112. export default {
  113. name: 'RoleModal',
  114. components: {
  115. STable,
  116. VSelect
  117. },
  118. props: {
  119. visible: {
  120. type: Boolean,
  121. default: false
  122. },
  123. id: {
  124. type: [String, Number],
  125. default: ''
  126. }
  127. },
  128. data () {
  129. return {
  130. titleText: '新增',
  131. isshow: this.visible,
  132. formData: {
  133. name: '',
  134. boxNum: '',
  135. deviceTypeBoxList: []
  136. },
  137. rules: {
  138. name: [{ required: true, message: '请输入箱体类型名称', trigger: 'blur' }],
  139. boxNum: [{ required: true, message: '请选择内置箱体数量', trigger: 'blur' }]
  140. }
  141. }
  142. },
  143. methods: {
  144. // 内置箱体选择修改
  145. handleNumChange (v) {
  146. console.log(v, 'vvvvvvvvvv')
  147. for (let i = 0; i < v; i++) {
  148. this.formData.deviceTypeBoxList.push({
  149. maxWeight: '',
  150. rubbishType: ''
  151. })
  152. }
  153. },
  154. // 查详情
  155. getDetailData (id) {
  156. viewBoxSetting({
  157. id: id
  158. }).then(res => {
  159. if (res.status == 200) {
  160. this.formData = Object.assign({}, this.formData, res.data)
  161. }
  162. })
  163. },
  164. // 保存提交
  165. handleSubmit () {
  166. const _this = this
  167. this.$refs.ruleForm.validate(valid => {
  168. console.log(valid, this.formData, ' formData.type222222222')
  169. if (valid) {
  170. const params = JSON.parse(JSON.stringify(this.formData))
  171. // 编辑
  172. if (this.id) {
  173. params.deviceTypeBoxList.map(item => {
  174. delete item.id
  175. })
  176. }
  177. console.log(params)
  178. saveBoxSetting(params).then(res => {
  179. console.log(res, 'res--save')
  180. if (res.status == '200') {
  181. this.$message.success(res.message)
  182. this.$emit('refresh')
  183. setTimeout(function () {
  184. _this.cancel()
  185. }, 300)
  186. } else {
  187. // this.$message.error(res.message)
  188. }
  189. })
  190. }
  191. })
  192. },
  193. // 取消
  194. handleCancel () {
  195. this.cancel()
  196. },
  197. cancel (e) {
  198. this.clear()
  199. this.$emit('close')
  200. },
  201. clear () {
  202. this.$refs.ruleForm.resetFields()
  203. this.formData.name = ''
  204. this.formData.boxNum = ''
  205. this.formData.deviceTypeBoxList = []
  206. }
  207. },
  208. watch: {
  209. visible (newValue, oldValue) {
  210. this.isshow = newValue
  211. },
  212. isshow (newValue, oldValue) {
  213. if (newValue) {
  214. if (this.id) { // 编辑
  215. this.titleText = '编辑'
  216. this.getDetailData(this.id)
  217. } else {
  218. this.titleText = '新增'
  219. }
  220. } else {
  221. this.cancel()
  222. }
  223. }
  224. }
  225. }
  226. </script>
  227. <style scoped>
  228. .modalBox {}
  229. .ant-modal-footer {
  230. display: none;
  231. }
  232. .dynamic-delete-button {
  233. margin-right: 20px;
  234. }
  235. .linenums {
  236. padding: 0 20px;
  237. }
  238. </style>