detail.vue 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194
  1. <template>
  2. <div class='app-container'>
  3. <el-form :model="form" :rules="rules" ref="form" label-width="100px" :disabled="disabled">
  4. <el-form-item label="活动名称:">
  5. <el-input v-model="form.name" placeholder="请输入活动名称" />
  6. </el-form-item>
  7. <el-form-item label="活动图片:" prop="pic">
  8. <Upload listType="picture-card" :url="form.pic" @upload="upload" />
  9. </el-form-item>
  10. <el-form-item label="有效时间:" prop="timeList">
  11. <el-date-picker type="datetimerange" v-model="form.timeList" start-placeholder="开始日期" end-placeholder="结束日期"
  12. value-format="yyyy-MM-dd HH:mm:ss" />
  13. </el-form-item>
  14. <el-form-item label="活动设备:" style="width: 1000px" prop="deviceRespList">
  15. <el-button type="primary" icon="el-icon-plus" @click="handlePush" :disabled="disabledActivity">添加</el-button>
  16. <el-table :data="form.deviceRespList">
  17. <el-table-column label="关联设备" align="center">
  18. <template slot-scope="scope">
  19. <el-form-item :prop="`deviceRespList.${scope.$index}.deviceId`"
  20. :rules="{ required: true, trigger: 'change' }">
  21. <el-select v-model="scope.row.deviceId" filterable placeholder="请选择关联设备" :disabled="disabledActivity"
  22. :title="scope.row.deviceId !== undefined ? devOptions.find(i => i.value == scope.row.deviceId).label : ''">
  23. <el-option v-for="item in devOptions" :key="item.value" :value="item.value" :label="item.label"
  24. :disabled="item.disabled" />
  25. </el-select>
  26. </el-form-item>
  27. </template>
  28. </el-table-column>
  29. <el-table-column label="活动权益" align="center">
  30. <template slot-scope="scope">
  31. <el-form-item :prop="`deviceRespList.${scope.$index}.indate`"
  32. :rules="{ required: true, trigger: 'change' }">
  33. <el-select v-model="scope.row.indate" placeholder="请选择活动权益" :disabled="disabledActivity">
  34. <el-option v-for="item in serviceTimeOptions" :key="item.value" :value="item.value"
  35. :label="item.label" />
  36. </el-select>
  37. </el-form-item>
  38. </template>
  39. </el-table-column>
  40. <el-table-column label="领取数量" align="center">
  41. <template slot-scope="scope">
  42. <el-form-item :prop="`deviceRespList.${scope.$index}.totalNum`"
  43. :rules="[{ type: 'number', required: true, min: disabledActivity && num[scope.$index] ? num[scope.$index] : 1, trigger: 'blur' }]">
  44. <el-input-number v-model="scope.row.totalNum" :controls="false" :min="1" placeholder="请输入领取数量"
  45. @change="handleChange($event, scope.$index)" />
  46. </el-form-item>
  47. </template>
  48. </el-table-column>
  49. <el-table-column label="操作" align="center">
  50. <template slot-scope="scope">
  51. <el-button type="delete" @click="getDelete(scope.row.deviceId, scope.$index)"
  52. :disabled="disabledActivity">删除</el-button>
  53. </template>
  54. </el-table-column>
  55. </el-table>
  56. </el-form-item>
  57. </el-form>
  58. <div class="form-btn">
  59. <el-button @click="cancel">取消</el-button>
  60. <el-button v-if="!disabled" type="primary" @click="getSubmit">确定</el-button>
  61. </div>
  62. </div>
  63. </template>
  64. <script>
  65. import { detail, submit } from "@/api/operation/activity"
  66. import { serviceTimeMixin, devMixin } from '@/mixin/index'
  67. export default {
  68. mixins: [serviceTimeMixin, devMixin],
  69. data() {
  70. return {
  71. // 表单
  72. form: {
  73. deviceRespList: []
  74. },
  75. // 除蓝牙设备
  76. types: [2, 4],
  77. // 生效期内禁止修改活动设备
  78. disabledActivity: this.$route.query.activityState == 0 ? true : false,
  79. // 生效期内领取数量禁止下调
  80. num: [],
  81. // 只读
  82. disabled: Boolean(this.$route.query.boolean),
  83. // 校验
  84. rules: {
  85. pic: [{
  86. required: true, message: '请上传活动图片', trigger: 'change'
  87. }],
  88. timeList: [{
  89. required: true, message: '请选择有效时间', trigger: 'change'
  90. }],
  91. deviceRespList: [{
  92. type: 'array', required: true, message: '请添加活动设备', trigger: 'change'
  93. }]
  94. }
  95. }
  96. },
  97. watch: {
  98. 'form.deviceRespList': {
  99. handler(val) {
  100. for (let i in this.devOptions) {
  101. this.devOptions[i].disabled = false
  102. }
  103. // 禁用已关联设备
  104. val.map((i, index) => {
  105. if (i.deviceId) {
  106. let index = this.devOptions.findIndex(j => j.value === i.deviceId)
  107. this.devOptions[index].disabled = true
  108. }
  109. })
  110. },
  111. deep: true
  112. }
  113. },
  114. mounted() {
  115. if (this.$route.query.id) {
  116. this.getDetail()
  117. }
  118. },
  119. methods: {
  120. // 详情
  121. getDetail() {
  122. detail(this.$route.query.id).then(res => {
  123. if (res.code === 0) {
  124. this.form = res.data
  125. res.data.deviceRespList.map(i => {
  126. this.num.push(i.totalNum)
  127. })
  128. }
  129. })
  130. },
  131. // 上传图片
  132. upload(e) {
  133. this.form.pic = e.file
  134. },
  135. // 添加
  136. handlePush() {
  137. this.form.deviceRespList.push({})
  138. },
  139. // 已生效的活动 设备数量不能修改的比之前小
  140. handleChange(e, index) {
  141. if (this.disabledActivity && this.num[index] > e) {
  142. this.$message.error('已生效活动,当前领取数量不可减少')
  143. }
  144. },
  145. // 删除
  146. getDelete(deviceId, index) {
  147. this.form.deviceRespList.splice(index, 1)
  148. this.devOptions.map(i => {
  149. if (i.value === deviceId) {
  150. i.disabled = false
  151. }
  152. })
  153. },
  154. // 取消
  155. cancel() {
  156. this.$tab.closeOpenPage('/operation/activity')
  157. },
  158. // 确定
  159. getSubmit() {
  160. this.$refs.form.validate((valid) => {
  161. if (valid) {
  162. submit(this.form).then(res => {
  163. if (res.code === 0) {
  164. this.$message.success('提交成功!')
  165. this.cancel()
  166. }
  167. })
  168. } else {
  169. return false
  170. }
  171. })
  172. }
  173. }
  174. }
  175. </script>
  176. <style lang="scss" scoped>
  177. .el-form-item {
  178. width: 500px;
  179. }
  180. .el-table__row {
  181. .el-form-item {
  182. width: 100%;
  183. }
  184. }
  185. </style>