selectPagination.vue 8.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337
  1. <style>
  2. .select-table .ant-table-thead > tr > th,
  3. .select-table .ant-table-tbody > tr > td {
  4. padding: 0 !important;
  5. }
  6. .select-table .ant-table {
  7. font-size: 12px;
  8. }
  9. .demo-infinite-container {
  10. border: 1px solid #e8e8e8;
  11. border-radius: 4px;
  12. overflow: auto;
  13. padding: 8px 24px;
  14. height: 300px;
  15. }
  16. .demo-loading-container {
  17. position: absolute;
  18. bottom: 40px;
  19. width: 100%;
  20. text-align: center;
  21. }
  22. </style>
  23. <template>
  24. <a-form-item
  25. label="项目名称"
  26. :label-col="labelCol"
  27. :wrapper-col="wrapperCol"
  28. v-clickoutside="handleClose"
  29. style="width:100%"
  30. class="select-table"
  31. >
  32. <a-input placeholder="请选择项目" @focus="topMiddle = true" v-model="keyValue" @change="getData" />
  33. <div
  34. v-show="topMiddle"
  35. v-infinite-scroll="handleInfiniteOnLoad"
  36. style="background:white;padding:10px;box-shadow: 0 2px 8px 0 rgba(0,0,0,.15);position:relative;z-index:1000"
  37. class="demo-infinite-container"
  38. :infinite-scroll-disabled="busy"
  39. :infinite-scroll-distance="80"
  40. >
  41. <a-list :data-source="data">
  42. <a-list-item slot="renderItem" slot-scope="item" @click="showProject(item)">
  43. <a-list-item-meta :description="'广告主名称:'+item.advertiserName">
  44. <a slot="title">项目名称:{{ item.projectName }}</a>
  45. </a-list-item-meta>
  46. <div>
  47. {{item.mediaId == '1'
  48. ? '头条'
  49. : item.mediaId == '2'
  50. ? '快手'
  51. : item.mediaId == '3'
  52. ? '头条内广'
  53. : '快手内广'}}
  54. </div>
  55. </a-list-item>
  56. <div v-if="loading && !busy" class="demo-loading-container">
  57. <a-spin />
  58. </div>
  59. </a-list>
  60. </div>
  61. </a-form-item>
  62. </template>
  63. <script>
  64. import { getAction, postAction } from '@/api/manage'
  65. import moment from 'moment'
  66. import { mapGetters } from 'vuex'
  67. import jq from 'jquery'
  68. import infiniteScroll from 'vue-infinite-scroll'
  69. const clickoutside = {
  70. // 初始化指令
  71. bind(el, binding, vnode) {
  72. function documentHandler(e) {
  73. // 这里判断点击的元素是否是本身,是本身,则返回
  74. if (el.contains(e.target)) {
  75. return false
  76. }
  77. // 判断指令中是否绑定了函数
  78. if (binding.expression) {
  79. // 如果绑定了函数 则调用那个函数,此处binding.value就是handleClose方法
  80. binding.value(e)
  81. }
  82. }
  83. // 给当前元素绑定个私有变量,方便在unbind中可以解除事件监听
  84. el.__vueClickOutside__ = documentHandler
  85. document.addEventListener('click', documentHandler)
  86. },
  87. update() {},
  88. unbind(el, binding) {
  89. // 解除事件监听
  90. document.removeEventListener('click', el.__vueClickOutside__)
  91. delete el.__vueClickOutside__
  92. },
  93. }
  94. export default {
  95. name: 'select-pagination',
  96. components: {},
  97. directives: { clickoutside, infiniteScroll },
  98. props: {
  99. projectId: {
  100. type: String,
  101. default() {
  102. return ''
  103. },
  104. },
  105. },
  106. data() {
  107. return {
  108. loading: false,
  109. busy: false,
  110. labelCol: {
  111. xs: { span: 24 },
  112. sm: { span: 5 },
  113. },
  114. wrapperCol: {
  115. xs: { span: 24 },
  116. sm: { span: 12 },
  117. },
  118. selectedRowKeys: [],
  119. selectedRowKeysValue: [],
  120. topMiddle: false,
  121. keyValue: '',
  122. data: [],
  123. dataElse: [],
  124. ipagination: {
  125. current: 0,
  126. pageSize: 20,
  127. },
  128. rowClick: (record, index) => ({
  129. // 事件
  130. on: {
  131. click: () => {
  132. var str =
  133. record.mediaId == '1'
  134. ? '头条'
  135. : record.mediaId == '2'
  136. ? '快手'
  137. : record.mediaId == '3'
  138. ? '头条内广'
  139. : '快手内广'
  140. this.keyValue = record.projectName + ' ' + str
  141. this.topMiddle = false
  142. this.data = this.dataElse
  143. this.$emit('update:projectId', record.projectId)
  144. },
  145. },
  146. }),
  147. }
  148. },
  149. computed: {},
  150. filters: {},
  151. methods: {
  152. showProject(record) {
  153. var str =
  154. record.mediaId == '1'
  155. ? '头条'
  156. : record.mediaId == '2'
  157. ? '快手'
  158. : record.mediaId == '3'
  159. ? '头条内广'
  160. : '快手内广'
  161. this.keyValue = record.projectName
  162. this.topMiddle = false
  163. this.$emit('update:projectId', record.projectId)
  164. },
  165. ...mapGetters(['nickname', 'avatar', 'userInfo']),
  166. onSelectChange(selectedRowKeys, selectionRows) {
  167. this.selectedRowKeys = selectedRowKeys
  168. this.selectedRowKeysValue = selectionRows.map((item) => {
  169. return { orientationId: item.orientationId, orientationName: item.orientationName }
  170. })
  171. },
  172. getData() {
  173. if(this.keyValue == ''){
  174. this.$emit('update:projectId', "")
  175. }
  176. this.ipagination.current = 1
  177. getAction('/ctop/projectMember/participateListV2', {
  178. userId: this.userInfo().id,
  179. pageNo: this.ipagination.current,
  180. projectName: this.keyValue,
  181. }).then((res) => {
  182. if (res.code == 0) {
  183. this.data = res.result.records.map((item, index) => {
  184. return {
  185. ...item,
  186. projectId: item.projectId + '',
  187. key: index,
  188. }
  189. })
  190. // this.dataElse = res.result.records.map((item, index) => {
  191. // return {
  192. // ...item,
  193. // projectId: item.projectId + '',
  194. // key: index,
  195. // }
  196. // })
  197. }
  198. })
  199. },
  200. handleClose() {
  201. this.topMiddle = false
  202. },
  203. // allData() {
  204. // getAction('/ctop/projectMember/participateListV2', {
  205. // userId: this.userInfo().id,
  206. // pageSize: this.ipagination.pageSize,
  207. // pageNo: this.ipagination.current,
  208. // }).then((res) => {
  209. // if (res.code == 0) {
  210. // this.data = res.result.records.map((item, index) => {
  211. // return {
  212. // ...item,
  213. // projectId: item.projectId + '',
  214. // key: index,
  215. // }
  216. // })
  217. // this.dataElse = res.result.records.map((item, index) => {
  218. // return {
  219. // ...item,
  220. // projectId: item.projectId + '',
  221. // key: index,
  222. // }
  223. // })
  224. // }
  225. // })
  226. // },
  227. handleInfiniteOnLoad() {
  228. const data = this.data
  229. this.loading = true
  230. this.ipagination.current++
  231. // this.fetchData((res) => {
  232. // this.data = data.concat(res.results)
  233. // this.loading = false
  234. // })
  235. getAction('/ctop/projectMember/participateListV2', {
  236. userId: this.userInfo().id,
  237. pageSize: this.ipagination.pageSize,
  238. pageNo: this.ipagination.current,
  239. projectName: this.keyValue,
  240. }).then((res) => {
  241. if (res.code == 0) {
  242. this.busy = true
  243. this.data = data.concat(
  244. res.result.records.map((item, index) => {
  245. return {
  246. ...item,
  247. projectId: item.projectId + '',
  248. }
  249. })
  250. )
  251. // this.data = res.result.records.map((item, index) => {
  252. // return {
  253. // ...item,
  254. // projectId: item.projectId + '',
  255. // key: index,
  256. // }
  257. // })
  258. // this.dataElse = res.result.records.map((item, index) => {
  259. // return {
  260. // ...item,
  261. // projectId: item.projectId + '',
  262. // key: index,
  263. // }
  264. // })
  265. }
  266. })
  267. },
  268. },
  269. watch: {
  270. projectId(n, o) {
  271. if (n == '') {
  272. this.keyValue = ''
  273. } else {
  274. }
  275. },
  276. },
  277. mounted: function () {
  278. this.handleInfiniteOnLoad()
  279. },
  280. }
  281. </script>
  282. <style type="text/css">
  283. .plug-timer-grid {
  284. width: 100%;
  285. }
  286. .plug-timer-grid td,
  287. .plug-timer-grid th {
  288. border: 1px solid #97b4d1;
  289. text-align: center; /*cursor:pointer;*/
  290. font-size: 10px;
  291. line-height: 10px;
  292. }
  293. .Selected {
  294. background-color: rgb(102, 162, 243);
  295. opacity: 0.5;
  296. }
  297. .plug-timer-grid {
  298. border-collapse: collapse;
  299. z-index: 4;
  300. }
  301. .plug-timer-grid thead tr {
  302. display: table-row;
  303. vertical-align: inherit;
  304. border-color: inherit;
  305. }
  306. .group-creat table td {
  307. height: 20px;
  308. max-width: 5px;
  309. font-size: 12px;
  310. text-align: center;
  311. vertical-align: middle;
  312. overflow: hidden;
  313. transition: background 0.5s;
  314. -webkit-transition: background 0.5s;
  315. }
  316. .plug-timer-grid tbody th {
  317. width: 4%;
  318. }
  319. .plug-timer-grid tbody tr td {
  320. width: 2%;
  321. }
  322. /*.clear{*/
  323. /* margin:20px 0px 20px 0px;*/
  324. /*}*/
  325. </style>