AddTimeModal.vue 7.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272
  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-row
  25. type="flex"
  26. align="middle"
  27. v-for="(k, index) in form.getFieldValue('keys')"
  28. :key="k">
  29. <a-col span="10">
  30. <!-- 投放开始时间 -->
  31. <a-form-item
  32. :label="index === 0 ? '投放时间区间' : ''"
  33. :required="true"
  34. :label-col=" { span: 12 }"
  35. :wrapper-col="index ===0 ? { span: 12 }:{span:12,offset:12}"
  36. >
  37. <a-time-picker
  38. placeholder="开始时间"
  39. v-decorator="[
  40. `times[${k}].startTime`,
  41. {
  42. validateTrigger: ['change', 'blur'],
  43. rules: [
  44. {
  45. required: true, message: '请选择投放开始时间!'
  46. },
  47. {
  48. validator: changeTimeValidator
  49. },
  50. ],
  51. },
  52. ]"
  53. format="HH:mm" />
  54. </a-form-item>
  55. </a-col>
  56. <a-col span="1">
  57. <a-form-item >至</a-form-item>
  58. </a-col>
  59. <a-col span="6">
  60. <!-- 投放结束时间 -->
  61. <a-form-item
  62. :label="''"
  63. :required="false"
  64. :wrapper-col="{ span: 18 }">
  65. <a-time-picker
  66. placeholder="结束时间"
  67. v-decorator="[
  68. `times[${k}].endTime`,
  69. {
  70. validateTrigger: ['change', 'blur'],
  71. rules: [
  72. { required: true, message: '请选择投放结束时间!' }
  73. ],
  74. },
  75. ]"
  76. format="HH:mm" />
  77. </a-form-item>
  78. </a-col>
  79. <a-form-item>
  80. <a-icon
  81. :style="{fontSize: '18px',color: 'red'}"
  82. v-if="form.getFieldValue('keys').length > 1"
  83. class="dynamic-delete-button"
  84. type="minus-circle-o"
  85. :disabled="form.getFieldValue('keys').length === 1"
  86. @click="() => remove(k)" />
  87. <a-icon
  88. v-if="index === form.getFieldValue('keys').length-1"
  89. :style="{fontSize: '18px'}"
  90. type="plus-circle"
  91. @click="add" />
  92. </a-form-item>
  93. </a-row>
  94. <a-form-item :wrapper-col="{ span: 24, offset: 10 }">
  95. <a-button type="primary" @click="handleSubmit()" id="roleModal-handleSubmit" :style="{ marginRight: '15px' }">
  96. 保存
  97. </a-button>
  98. <a-button :style="{ marginLeft: '15px' }" @click="handleCancel()" id="roleModal-handleCancel">
  99. 取消
  100. </a-button>
  101. </a-form-item>
  102. </a-form>
  103. </a-modal>
  104. </div>
  105. </template>
  106. <script>
  107. import {
  108. STable,
  109. VSelect
  110. } from '@/components'
  111. import {
  112. saveRolePower
  113. } from '@/api/power-role.js'
  114. import moment from 'moment'
  115. export default {
  116. name: 'RoleModal',
  117. components: {
  118. STable,
  119. VSelect
  120. },
  121. props: {
  122. visible: {
  123. type: Boolean,
  124. default: false
  125. },
  126. data: {
  127. type: Object,
  128. default: function () {
  129. return {}
  130. }
  131. }
  132. },
  133. data () {
  134. return {
  135. id: 0,
  136. titleText: '新增',
  137. isshow: this.visible,
  138. formLayout: 'horizontal',
  139. form: this.$form.createForm(this, {
  140. name: 'addTimeModal'
  141. }),
  142. formData: {
  143. name: '',
  144. isEnable: '', // 活动状态
  145. remarks: ''
  146. },
  147. keys: []
  148. }
  149. },
  150. methods: {
  151. moment,
  152. cancel (e) {
  153. this.clear()
  154. this.$emit('close')
  155. },
  156. // 校验
  157. changeTimeValidator (rule, value, callback) {
  158. console.log('value', value, rule)
  159. const times = this.form.getFieldValue('times')
  160. if (value === null) {
  161. callback(new Error('请输入密码'))
  162. }
  163. callback()
  164. },
  165. // 删除
  166. remove (k) {
  167. const {
  168. form
  169. } = this
  170. const keys = form.getFieldValue('keys')
  171. if (keys.length === 1) {
  172. return
  173. }
  174. form.setFieldsValue({
  175. keys: keys.filter(key => key !== k)
  176. })
  177. },
  178. // 增加
  179. add () {
  180. const {
  181. form
  182. } = this
  183. const keys = form.getFieldValue('keys')
  184. console.log(keys, 'kkkkkk')
  185. const nextKeys = keys.concat(this.id++)
  186. form.setFieldsValue({
  187. keys: nextKeys
  188. })
  189. },
  190. // 保存提交
  191. handleSubmit () {
  192. const _this = this
  193. this.form.validateFields((err, values) => {
  194. console.log(values, ' formData.type222222222')
  195. if (!err) {
  196. saveRolePower(Object.assign(this.formData, values.formData)).then(res => {
  197. console.log(res, 'res--save')
  198. if (res.status + '' === '200') {
  199. this.$message.success(res.message ? res.message : '保存成功')
  200. this.$emit('refresh')
  201. setTimeout(function () {
  202. _this.cancel()
  203. }, 300)
  204. } else {
  205. // this.$message.error(res.message)
  206. }
  207. })
  208. }
  209. })
  210. },
  211. // 取消
  212. handleCancel () {
  213. this.cancel()
  214. },
  215. clear () {
  216. this.form.resetFields()
  217. delete this.formData.id
  218. this.formData.name = ''
  219. this.formData.isEnable = ''
  220. this.formData.remarks = ''
  221. }
  222. },
  223. mounted () {},
  224. beforeCreate () {
  225. this.form = this.$form.createForm(this, {
  226. name: 'addTimeModal'
  227. })
  228. },
  229. watch: {
  230. visible (newValue, oldValue) {
  231. this.isshow = newValue
  232. },
  233. isshow (newValue, oldValue) {
  234. if (newValue) {
  235. this.form.getFieldDecorator('keys', {
  236. initialValue: [],
  237. preserve: true
  238. })
  239. this.id = 0
  240. this.add()
  241. const keys = this.form.getFieldValue('keys')
  242. console.log(keys, 'kkkkkk')
  243. if (this.data.id) { // 编辑
  244. this.titleText = '编辑'
  245. this.formData = Object.assign({}, this.data)
  246. delete this.formData.no
  247. this.formData.isEnable = Number(this.formData.isEnable)
  248. console.log(this.formData, 'this.formData')
  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. </style>