AddBoxModal.vue 6.9 KB

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