list.vue 9.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246
  1. <template>
  2. <a-card size="small" :bordered="false" class="jg-page-wrap promotionInfoList-wrap">
  3. <a-spin :spinning="spinning" tip="Loading...">
  4. <!-- 搜索条件 -->
  5. <div ref="tableSearch" class="table-page-search-wrapper">
  6. <a-form layout="inline" @keyup.enter.native="$refs.table.refresh(true)">
  7. <a-row :gutter="15">
  8. <a-col :md="6" :sm="24">
  9. <a-form-item label="发布时间">
  10. <rangeDate ref="rangeDate" :value="time" @change="dateChange" />
  11. </a-form-item>
  12. </a-col>
  13. <a-col :md="6" :sm="24">
  14. <a-form-item label="促销名称">
  15. <a-input id="promotionInfoList-name" v-model.trim="queryParam.name" allowClear placeholder="请输入促销名称"/>
  16. </a-form-item>
  17. </a-col>
  18. <a-col :md="4" :sm="24">
  19. <a-form-item label="显示状态">
  20. <a-select
  21. v-model="queryParam.showFlag"
  22. placeholder="请选择显示状态"
  23. allowClear
  24. >
  25. <a-select-option :value="1">已显示</a-select-option>
  26. <a-select-option :value="0">未显示</a-select-option>
  27. </a-select>
  28. </a-form-item>
  29. </a-col>
  30. <a-col :md="4" :sm="24">
  31. <a-form-item label="促销状态">
  32. <v-select
  33. v-model="queryParam.state"
  34. ref="sourceType"
  35. id="promotionInfoList-sourceType"
  36. code="PROMO_STATE"
  37. placeholder="请选择促销状态"
  38. allowClear></v-select>
  39. </a-form-item>
  40. </a-col>
  41. <a-col :md="4" :sm="24">
  42. <a-button type="primary" @click="$refs.table.refresh(true)" :disabled="disabled" id="promotionInfoList-refresh">查询</a-button>
  43. <a-button style="margin-left: 8px" @click="resetSearchForm" :disabled="disabled" id="promotionInfoList-reset">重置</a-button>
  44. </a-col>
  45. </a-row>
  46. </a-form>
  47. </div>
  48. <!-- 列表 -->
  49. <s-table
  50. class="sTable fixPagination"
  51. ref="table"
  52. :style="{ height: tableHeight+84.5+'px' }"
  53. size="small"
  54. :rowKey="(record) => record.id"
  55. :columns="columns"
  56. :data="loadData"
  57. :scroll="{ y: tableHeight }"
  58. :defaultLoadData="false"
  59. bordered>
  60. <!-- 促销时间 -->
  61. <template slot="promotionTime" slot-scope="text, record">
  62. <span>{{ record.activeDateStart }}至{{ record.activeDateEnd }}</span>
  63. </template>
  64. <!-- 促销描述 -->
  65. <template slot="desc" slot-scope="text, record">
  66. <a-tooltip placement="rightBottom" v-if="record.description&&record.description.length>60">
  67. <template slot="title">
  68. <span>{{ record.description }}</span>
  69. </template>
  70. <div class="desc font1" @click="handleDescModal(record)">{{ record.description }}</div>
  71. </a-tooltip>
  72. <div v-else class="desc font1" @click="handleDescModal(record)">{{ record.description }}</div>
  73. </template>
  74. <!-- 状态 -->
  75. <template slot="showStatus" slot-scope="text, record">
  76. {{ record.showFlag == '1'?'已显示':'未显示' }}
  77. </template>
  78. <!-- 促销展示 -->
  79. <template slot="salesShow" slot-scope="text, record">
  80. <div @click="handleSaleShow(record)" v-if="record.contentType!='LINK'&&record.images && record.images.length>0">
  81. <img :src="record.images[0]" alt="图片走丢啦" width="60" />
  82. </div>
  83. <div v-else-if="record.contentType=='LINK'&&record.images && record.images.length>0">
  84. <img :src="record.images[0]" alt="图片走丢啦" width="60" />
  85. </div>
  86. <span v-else>--</span>
  87. </template>
  88. </s-table>
  89. </a-spin>
  90. <promotion-desc-modal :con="descInfo" :openModal="openDescModal" @close="openDescModal = false"/>
  91. <promotion-show-modal ref="promotionShow" :openModal="openShowModal" @close="openShowModal = false"/>
  92. </a-card>
  93. </template>
  94. <script>
  95. import { commonMixin } from '@/utils/mixin'
  96. import { promoTerminalList } from '@/api/promoTerminal'
  97. import { STable, VSelect } from '@/components'
  98. import rangeDate from '@/views/common/rangeDate.vue'
  99. import promotionDescModal from './promotionDescModal'
  100. import promotionShowModal from './promotionShowModal'
  101. export default {
  102. name: 'UrgentOffsetList',
  103. components: { STable, VSelect, rangeDate, promotionDescModal, promotionShowModal },
  104. mixins: [commonMixin],
  105. data () {
  106. return {
  107. spinning: false,
  108. tableHeight: 0,
  109. openDescModal: false, // 促销描述弹窗
  110. openShowModal: false, // 促销展示弹窗
  111. time: [],
  112. queryParam: { // 查询条件
  113. beginDate: undefined,
  114. endDate: undefined,
  115. name: '', // 促销名称
  116. showFlag: undefined, // 显示状态
  117. state: undefined// 促销状态
  118. },
  119. descInfo: '', // 促销描述
  120. disabled: false, // 查询、重置按钮是否可操作
  121. columns: [
  122. { title: '序号', dataIndex: 'no', width: '4%', align: 'center' },
  123. { title: '发布时间', dataIndex: 'createDate', width: '14%', align: 'center', customRender: function (text) { return text || '--' } },
  124. { title: '促销名称', dataIndex: 'name', width: '24%', align: 'center', customRender: function (text) { return text || '--' }, ellipsis: true },
  125. { title: '促销时间', scopedSlots: { customRender: 'promotionTime' }, width: '20%', align: 'center' },
  126. { title: '促销描述', scopedSlots: { customRender: 'desc' }, width: '20%', align: 'center' },
  127. { title: '促销展示', scopedSlots: { customRender: 'salesShow' }, width: '10%', align: 'center' },
  128. { title: '显示状态', scopedSlots: { customRender: 'showStatus' }, width: '10%', align: 'center' },
  129. { title: '状态', dataIndex: 'stateDictValue', width: '10%', align: 'center', customRender: function (text) { return text || '--' } }
  130. ],
  131. // 加载数据方法 必须为 Promise 对象
  132. loadData: parameter => {
  133. this.disabled = true
  134. this.spinning = true
  135. return promoTerminalList(Object.assign(parameter, this.queryParam)).then(res => {
  136. let data
  137. if (res.status == 200) {
  138. data = res.data
  139. const no = (data.pageNo - 1) * data.pageSize
  140. for (var i = 0; i < data.list.length; i++) {
  141. data.list[i].no = no + i + 1
  142. data.list[i].images = data.list[i].images ? data.list[i].images.split(',') : []
  143. }
  144. this.disabled = false
  145. }
  146. this.spinning = false
  147. return data
  148. })
  149. }
  150. }
  151. },
  152. methods: {
  153. // 时间 change
  154. dateChange (date) {
  155. this.queryParam.beginDate = date[0]
  156. this.queryParam.endDate = date[1]
  157. },
  158. // 查看促销描述
  159. handleDescModal (row) {
  160. this.descInfo = row.description
  161. const _this = this
  162. this.$nextTick(() => {
  163. _this.openDescModal = true
  164. })
  165. },
  166. // 促销展示
  167. handleSaleShow (row) {
  168. const _this = this
  169. _this.openShowModal = true
  170. this.$nextTick(() => {
  171. _this.$refs.promotionShow.getDetail({ id: row.promoActiveSn, showType: row.contentType })
  172. })
  173. },
  174. // 重置
  175. resetSearchForm () {
  176. this.$refs.rangeDate.resetDate(this.time)
  177. this.queryParam.beginDate = undefined
  178. this.queryParam.endDate = undefined
  179. this.queryParam.name = ''
  180. this.queryParam.showFlag = undefined
  181. this.queryParam.state = undefined
  182. this.$refs.table.refresh(true)
  183. },
  184. pageInit () {
  185. const _this = this
  186. this.$nextTick(() => { // 页面渲染完成后的回调
  187. _this.setTableH()
  188. })
  189. },
  190. setTableH () {
  191. const tableSearchH = this.$refs.tableSearch.offsetHeight
  192. this.tableHeight = window.innerHeight - tableSearchH - 195
  193. }
  194. },
  195. mounted () {
  196. if (!this.$store.state.app.isNewTab) { // 页签刷新时调用
  197. this.pageInit()
  198. this.resetSearchForm()
  199. }
  200. },
  201. watch: {
  202. '$store.state.app.winHeight' (newValue, oldValue) { // 窗口变更时,需同时更改表格高度
  203. this.setTableH()
  204. }
  205. },
  206. activated () {
  207. // 如果是新页签打开,则重置当前页面
  208. if (this.$store.state.app.isNewTab) {
  209. this.pageInit()
  210. this.resetSearchForm()
  211. }
  212. // 只刷新列表
  213. if (this.$store.state.app.updateList) {
  214. this.pageInit()
  215. this.$refs.table.refresh()
  216. }
  217. },
  218. beforeRouteEnter (to, from, next) {
  219. next(vm => {})
  220. }
  221. }
  222. </script>
  223. <style lang="less">
  224. .promotionInfoList-wrap{
  225. .red{
  226. color: #ed1c24;
  227. }
  228. .green{
  229. color: #19be6b;
  230. }
  231. .font1{
  232. color:#39f;
  233. }
  234. .desc{
  235. width: 100%;
  236. overflow: hidden;
  237. text-overflow: ellipsis;
  238. display: -webkit-box;
  239. -webkit-line-clamp: 3;
  240. -webkit-box-orient: vertical;
  241. }
  242. }
  243. </style>