AddTimeModal.vue 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248
  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. class="formCont"
  14. :model="formData"
  15. :rules="rules"
  16. >
  17. <div class="timeRow">
  18. <!-- 投放时间段名称 -->
  19. <a-form-model-item label="投放时间段名称" ref="name" prop="name" :label-col="{ span: 5 }" :wrapper-col="{ span: 14 }">
  20. <a-input
  21. placeholder="请输入投放时间段名称(最多30个字符)"
  22. allowClear
  23. :maxLength="30"
  24. id="addTimeModal-name"
  25. v-model="formData.name"
  26. />
  27. </a-form-model-item>
  28. <!-- 投放时间区间 -->
  29. <a-row type="flex" align="middle" v-for="(item, index) in formData.deliveryTimeRuleItemList" :key="index">
  30. <a-col span="10">
  31. <!-- 投放开始时间 -->
  32. <a-form-model-item
  33. :label="index === 0 ? '投放时间区间' : ''"
  34. :label-col="{ span: 12 }"
  35. :wrapper-col="index === 0 ? { span: 12 } : { span: 12, offset: 12 }"
  36. :prop="'deliveryTimeRuleItemList.' + index + '.openTime'"
  37. :rules="{
  38. required: true,
  39. message: '请选择开始时间',
  40. trigger: ['blur','change'],
  41. }"
  42. >
  43. <a-time-picker
  44. id="addTimeModal-openTime"
  45. placeholder="开始时间"
  46. v-model="item.openTime"
  47. format="HH:mm"
  48. />
  49. </a-form-model-item>
  50. </a-col>
  51. <a-col span="1"><a-form-model-item>至</a-form-model-item></a-col>
  52. <a-col span="6">
  53. <!-- 投放结束时间 -->
  54. <a-form-model-item
  55. :label="''"
  56. :required="false"
  57. :wrapper-col="{ span: 18 }"
  58. :prop="'deliveryTimeRuleItemList.' + index + '.closeTime'"
  59. :rules="{
  60. required: true,
  61. message: '请选择结束时间',
  62. trigger: ['blur','change'],
  63. }"
  64. >
  65. <a-time-picker
  66. id="addTimeModal-closeTime"
  67. placeholder="结束时间"
  68. v-model="item.closeTime"
  69. format="HH:mm"
  70. />
  71. </a-form-model-item>
  72. </a-col>
  73. <a-form-model-item>
  74. <a-icon
  75. :style="{ fontSize: '18px', color: 'red' }"
  76. v-if="index > 0"
  77. class="dynamic-delete-button"
  78. type="minus-circle-o"
  79. id="addTimeModal-del"
  80. :disabled="formData.deliveryTimeRuleItemList.length === 1"
  81. @click="() => remove(index)"
  82. />
  83. <a-icon
  84. id="addTimeModal-add"
  85. v-if="index === formData.deliveryTimeRuleItemList.length - 1"
  86. :style="{ fontSize: '18px' }"
  87. type="plus-circle"
  88. @click="add" />
  89. </a-form-model-item>
  90. </a-row>
  91. </div>
  92. <a-form-model-item :wrapper-col="{ span: 24, offset: 10 }">
  93. <a-button id="addTimeModal-handleSubmit" type="primary" @click="handleSubmit()" :style="{ marginRight: '15px' }">保存</a-button>
  94. <a-button :style="{ marginLeft: '15px' }" @click="handleCancel()" id="addTimeModal-handleCancel">取消</a-button>
  95. </a-form-model-item>
  96. </a-form-model>
  97. </a-modal>
  98. </div>
  99. </template>
  100. <script>
  101. import { STable, VSelect } from '@/components'
  102. import { viewTimeSetting, saveTimeSetting } from '@/api/openTimeSetting.js'
  103. import moment from 'moment'
  104. export default {
  105. name: 'RoleModal',
  106. components: {
  107. STable,
  108. VSelect
  109. },
  110. props: {
  111. visible: {
  112. type: Boolean,
  113. default: false
  114. },
  115. id: {
  116. type: [String, Number],
  117. default: function () {
  118. return ''
  119. }
  120. }
  121. },
  122. data () {
  123. return {
  124. index: 0, // 用于增加时间列的全局变量
  125. titleText: '新增',
  126. isshow: this.visible,
  127. formData: {
  128. name: '',
  129. deliveryTimeRuleItemList: []
  130. },
  131. rules: {
  132. name: [{ required: true, message: '请输入投放时间段名称', trigger: 'blur' }]
  133. }
  134. }
  135. },
  136. methods: {
  137. moment,
  138. cancel (e) {
  139. this.clear()
  140. this.$emit('close')
  141. },
  142. // 查详情
  143. getDetailData (id) {
  144. viewTimeSetting({ id: id }).then(res => {
  145. if (res.status == 200) {
  146. this.formData = Object.assign({}, this.formData, res.data)
  147. this.formData.deliveryTimeRuleItemList.map(item => {
  148. item.closeTime = moment(item.closeTime, 'HH:mm')
  149. item.openTime = moment(item.openTime, 'HH:mm')
  150. })
  151. }
  152. })
  153. },
  154. // 删除
  155. remove (k) {
  156. this.formData.deliveryTimeRuleItemList.splice(k, 1)
  157. },
  158. // 增加
  159. add () {
  160. this.formData.deliveryTimeRuleItemList.push({
  161. openTime: '',
  162. closeTime: ''
  163. })
  164. },
  165. // 保存提交
  166. handleSubmit () {
  167. const _this = this
  168. this.$refs.ruleForm.validate(valid => {
  169. if (valid) {
  170. const params = JSON.parse(JSON.stringify(this.formData))
  171. params.deliveryTimeRuleItemList.map(item => {
  172. item.closeTime = moment(item.closeTime).format('HH:mm')
  173. item.openTime = moment(item.openTime).format('HH:mm')
  174. // 编辑
  175. if (this.id) {
  176. delete item.id
  177. }
  178. })
  179. console.log(params)
  180. saveTimeSetting(params).then(res => {
  181. console.log(res, 'res--save')
  182. if (res.status + '' === '200') {
  183. this.$message.success(res.message ? res.message : '保存成功')
  184. this.$emit('refresh')
  185. setTimeout(function () {
  186. _this.cancel()
  187. }, 300)
  188. } else {
  189. // this.$message.error(res.message)
  190. }
  191. })
  192. }
  193. })
  194. },
  195. // 取消
  196. handleCancel () {
  197. this.cancel()
  198. },
  199. clear () {
  200. this.$refs.ruleForm.resetFields()
  201. this.formData.name = ''
  202. this.formData.deliveryTimeRuleItemList = []
  203. }
  204. },
  205. watch: {
  206. visible (newValue, oldValue) {
  207. this.isshow = newValue
  208. },
  209. isshow (newValue, oldValue) {
  210. if (newValue) {
  211. if (this.id) {
  212. // 编辑
  213. this.titleText = '编辑'
  214. // 查详情
  215. this.getDetailData(this.id)
  216. } else {
  217. this.titleText = '新增'
  218. this.add()
  219. }
  220. } else {
  221. this.cancel()
  222. }
  223. }
  224. }
  225. }
  226. </script>
  227. <style scoped>
  228. .modalBox {
  229. }
  230. .formCont {
  231. max-height: 600px;
  232. display: flex;
  233. flex-direction: column;
  234. overflow-x: hidden;
  235. }
  236. .timeRow {
  237. flex: 1;
  238. overflow-y: scroll;
  239. }
  240. .ant-modal-footer {
  241. display: none;
  242. }
  243. .dynamic-delete-button {
  244. margin-right: 20px;
  245. }
  246. </style>