AddBoxModal.vue 7.4 KB

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