AddSetModal.vue 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269
  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="addSetModal-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. <a-input
  26. placeholder="请输入规则说明(最多500个字符)"
  27. allowClear
  28. :autoSize="{minRows: 3}"
  29. type="textarea"
  30. :maxLength="500"
  31. id="addSetModal-remarks"
  32. v-decorator="['formData.remarks', {
  33. initialValue: formData.remarks,getValueFromEvent: $filterEmpty,
  34. rules: [{ required: true, message: '请输入规则说明(最多500个字符)!' }] }]" />
  35. </a-form-item>
  36. <!-- 箱体限投 -->
  37. <a-row
  38. type="flex"
  39. align="middle"
  40. v-for="(item, index) in keys"
  41. :key="index">
  42. <a-col span="11">
  43. <!-- 请输入投放重量 -->
  44. <a-form-item
  45. :label="item.dispName"
  46. :required="true"
  47. :label-col=" { span: 11 }"
  48. :wrapper-col=" { span: 13 }"
  49. >
  50. <a-input-number
  51. :min="1"
  52. :max="999999"
  53. :precision="2"
  54. :disabled="!item.exchangeStatus"
  55. style="width: 150px;"
  56. placeholder="请输入投放重量(最大999999)"
  57. v-decorator="[
  58. `formData.settings[${index}].weight`,
  59. {
  60. validateTrigger: ['change', 'blur'],
  61. rules: [
  62. {
  63. required: true, message: '请输入投放重量(最大999999)!'
  64. },
  65. ],
  66. },
  67. ]"
  68. />
  69. <span>(g)</span>
  70. </a-form-item>
  71. </a-col>
  72. <a-col span="1"></a-col>
  73. <a-col span="8">
  74. <!-- 请输入可兑乐豆数 -->
  75. <a-form-item
  76. :label="''"
  77. :required="false"
  78. :wrapper-col="{ span: 18 }">
  79. <a-input-number
  80. :min="1"
  81. :max="999999"
  82. :precision="0"
  83. :disabled="!item.exchangeStatus"
  84. style="width: 140px;"
  85. placeholder="请输入可兑乐豆数(最大999999)"
  86. v-decorator="[
  87. `formData.settings[${index}].num`,
  88. {
  89. validateTrigger: ['change', 'blur'],
  90. rules: [
  91. {
  92. required: true, message: '请输入可兑乐豆数(最大999999)!'
  93. },
  94. ],
  95. },
  96. ]"
  97. />
  98. <span>(个)</span>
  99. </a-form-item>
  100. </a-col>
  101. <a-col span="3">
  102. <a-form-item
  103. :label="''"
  104. :required="false"
  105. :wrapper-col="{ span: 24 }">
  106. <a-checkbox :checked="!item.exchangeStatus" @change="handleStatusChange(item,index)">
  107. 不兑换
  108. </a-checkbox>
  109. </a-form-item>
  110. </a-col>
  111. </a-row>
  112. <a-form-item :wrapper-col="{ span: 24, offset: 10 }">
  113. <a-button type="primary" @click="handleSubmit()" id="roleModal-handleSubmit" :style="{ marginRight: '15px' }">
  114. 保存
  115. </a-button>
  116. <a-button :style="{ marginLeft: '15px' }" @click="handleCancel()" id="roleModal-handleCancel">
  117. 取消
  118. </a-button>
  119. </a-form-item>
  120. </a-form>
  121. </a-modal>
  122. </div>
  123. </template>
  124. <script>
  125. import {
  126. STable,
  127. VSelect
  128. } from '@/components'
  129. import { viewExchangeSetting, saveExchangeSetting } from '@/api/exchangeSetting.js'
  130. import { listLookUp } from '@/api/data'
  131. export default {
  132. name: 'RoleModal',
  133. components: {
  134. STable,
  135. VSelect
  136. },
  137. props: {
  138. visible: {
  139. type: Boolean,
  140. default: false
  141. },
  142. data: {
  143. type: Object,
  144. default: function () {
  145. return {}
  146. }
  147. }
  148. },
  149. data () {
  150. return {
  151. id: 0,
  152. titleText: '新增',
  153. isshow: this.visible,
  154. formLayout: 'horizontal',
  155. form: this.$form.createForm(this, {
  156. name: 'AddBoxModal'
  157. }),
  158. formData: {
  159. name: '',
  160. remarks: '',
  161. settings: []
  162. },
  163. keys: []
  164. }
  165. },
  166. methods: {
  167. cancel (e) {
  168. this.clear()
  169. this.$emit('close')
  170. },
  171. // 查详情
  172. getDetailData (id) {
  173. viewExchangeSetting({ id: id }).then(res => {
  174. if (res.status == 200) {
  175. }
  176. })
  177. },
  178. // 是否兑换切换
  179. handleStatusChange (item, index) {
  180. item.exchangeStatus = item.exchangeStatus ? 0 : 1
  181. this.form.setFieldsValue({ '`formData.settings[${index}].num`': '' })
  182. // this.formData.settings[index].num = ''
  183. // this.formData.settings[index].weight = ''
  184. },
  185. // 保存提交
  186. handleSubmit () {
  187. const _this = this
  188. this.form.validateFields((err, values) => {
  189. console.log(values, ' formData.type222222222')
  190. if (!err) {
  191. saveExchangeSetting(Object.assign(this.formData, values.formData)).then(res => {
  192. console.log(res, 'res--save')
  193. if (res.status + '' === '200') {
  194. this.$message.success(res.message ? res.message : '保存成功')
  195. this.$emit('refresh')
  196. setTimeout(function () {
  197. _this.cancel()
  198. }, 300)
  199. } else {
  200. // this.$message.error(res.message)
  201. }
  202. })
  203. }
  204. })
  205. },
  206. // 取消
  207. handleCancel () {
  208. this.cancel()
  209. },
  210. clear () {
  211. this.form.resetFields()
  212. this.formData.name = ''
  213. this.formData.isEnable = ''
  214. this.formData.remarks = ''
  215. }
  216. },
  217. mounted () {},
  218. beforeCreate () {
  219. this.form = this.$form.createForm(this, {
  220. name: 'AddBoxModal'
  221. })
  222. },
  223. watch: {
  224. visible (newValue, oldValue) {
  225. this.isshow = newValue
  226. },
  227. isshow (newValue, oldValue) {
  228. if (newValue) {
  229. this.keys = [
  230. { dispName: '废旧衣物', code: 'fjyw', id: 11, exchangeStatus: 1 },
  231. { dispName: '废旧衣物', code: 'fjyw', id: 12, exchangeStatus: 1 },
  232. { dispName: '废旧衣物', code: 'fjyw', id: 13, exchangeStatus: 1 },
  233. { dispName: '废旧衣物', code: 'fjyw', id: 14, exchangeStatus: 1 },
  234. { dispName: '废旧衣物', code: 'fjyw', id: 15, exchangeStatus: 0 }
  235. ]
  236. if (this.data.id) { // 编辑
  237. this.titleText = '编辑'
  238. this.formData = Object.assign({}, this.data)
  239. delete this.formData.no
  240. this.formData.isEnable = Number(this.formData.isEnable)
  241. console.log(this.formData, 'this.formData')
  242. } else {
  243. this.titleText = '新增'
  244. }
  245. } else {
  246. this.cancel()
  247. }
  248. }
  249. }
  250. }
  251. </script>
  252. <style scoped>
  253. .modalBox {}
  254. .ant-modal-footer {
  255. display: none;
  256. }
  257. .dynamic-delete-button {
  258. margin-right: 20px;
  259. }
  260. .linenums{
  261. padding: 0 20px;
  262. }
  263. </style>