selectPagination.vue 9.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375
  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. type: {
  106. type: String,
  107. default() {
  108. return ''
  109. },
  110. }
  111. },
  112. data() {
  113. return {
  114. taobaoSpecialOfferList: {
  115. advertiserId: "fd41614705a047dd65ab0e34e9150cfe",
  116. advertiserName: " 淘宝(中国)软件有限公司",
  117. createTime: "2021-03-03 10:15:30",
  118. designResponsibleName: "辛巴特",
  119. id: 3660879,
  120. maxBid: 30000,
  121. mediaId: "1",
  122. productId: 1410280,
  123. productName: "头条-淘宝特价版",
  124. projectId: 1530887,
  125. projectName: "头条-淘宝特价版",
  126. responsibleName: "董琪",
  127. roleCode: "operator",
  128. saleId: null,
  129. saleName: null,
  130. updateTime: "2021-03-03 21:23:04",
  131. userId: "a0d58df3392c4583b55ce3b041792aa7",
  132. userName: "王晓娟"
  133. },
  134. loading: false,
  135. busy: false,
  136. labelCol: {
  137. xs: { span: 24 },
  138. sm: { span: 5 },
  139. },
  140. wrapperCol: {
  141. xs: { span: 24 },
  142. sm: { span: 12 },
  143. },
  144. selectedRowKeys: [],
  145. selectedRowKeysValue: [],
  146. topMiddle: false,
  147. keyValue: '',
  148. data: [],
  149. dataElse: [],
  150. ipagination: {
  151. current: 0,
  152. pageSize: 20,
  153. },
  154. rowClick: (record, index) => ({
  155. // 事件
  156. on: {
  157. click: () => {
  158. var str =
  159. record.mediaId == '1'
  160. ? '头条'
  161. : record.mediaId == '2'
  162. ? '快手'
  163. : record.mediaId == '3'
  164. ? '头条内广'
  165. : '快手内广'
  166. this.keyValue = record.projectName + ' ' + str
  167. this.topMiddle = false
  168. this.data = this.dataElse
  169. this.$emit('update:projectId', record.projectId)
  170. },
  171. },
  172. }),
  173. }
  174. },
  175. computed: {},
  176. filters: {},
  177. methods: {
  178. showProject(record) {
  179. var str =
  180. record.mediaId == '1'
  181. ? '头条'
  182. : record.mediaId == '2'
  183. ? '快手'
  184. : record.mediaId == '3'
  185. ? '头条内广'
  186. : '快手内广'
  187. this.keyValue = record.projectName
  188. this.topMiddle = false
  189. this.$emit('update:projectId', record.projectId)
  190. },
  191. ...mapGetters(['nickname', 'avatar', 'userInfo']),
  192. onSelectChange(selectedRowKeys, selectionRows) {
  193. this.selectedRowKeys = selectedRowKeys
  194. this.selectedRowKeysValue = selectionRows.map((item) => {
  195. return { orientationId: item.orientationId, orientationName: item.orientationName }
  196. })
  197. },
  198. getData() {
  199. if(this.keyValue == ''){
  200. this.$emit('update:projectId', "")
  201. }
  202. this.ipagination.current = 1
  203. getAction('/ctop/projectMember/participateListV2', {
  204. userId: this.userInfo().id,
  205. pageNo: this.ipagination.current,
  206. projectName: this.keyValue,
  207. }).then((res) => {
  208. if (res.code == 0) {
  209. let defaultList = res.result.records.map((item, index) => {
  210. return {
  211. ...item,
  212. projectId: item.projectId + '',
  213. key: index,
  214. };
  215. })
  216. if (this.type === 'taobao') {
  217. this.data = defaultList.filter(item => item.productId === 1410280);
  218. }
  219. else {
  220. this.data = defaultList;
  221. }
  222. // this.dataElse = res.result.records.map((item, index) => {
  223. // return {
  224. // ...item,
  225. // projectId: item.projectId + '',
  226. // key: index,
  227. // }
  228. // })
  229. }
  230. })
  231. },
  232. handleClose() {
  233. this.topMiddle = false
  234. },
  235. // allData() {
  236. // getAction('/ctop/projectMember/participateListV2', {
  237. // userId: this.userInfo().id,
  238. // pageSize: this.ipagination.pageSize,
  239. // pageNo: this.ipagination.current,
  240. // }).then((res) => {
  241. // if (res.code == 0) {
  242. // this.data = res.result.records.map((item, index) => {
  243. // return {
  244. // ...item,
  245. // projectId: item.projectId + '',
  246. // key: index,
  247. // }
  248. // })
  249. // this.dataElse = res.result.records.map((item, index) => {
  250. // return {
  251. // ...item,
  252. // projectId: item.projectId + '',
  253. // key: index,
  254. // }
  255. // })
  256. // }
  257. // })
  258. // },
  259. handleInfiniteOnLoad() {
  260. const data = this.data
  261. this.loading = true
  262. this.ipagination.current++
  263. // this.fetchData((res) => {
  264. // this.data = data.concat(res.results)
  265. // this.loading = false
  266. // })
  267. getAction('/ctop/projectMember/participateListV2', {
  268. userId: this.userInfo().id,
  269. pageSize: this.ipagination.pageSize,
  270. pageNo: this.ipagination.current,
  271. projectName: this.keyValue,
  272. }).then((res) => {
  273. if (res.code == 0) {
  274. this.busy = true
  275. let defaultList = res.result.records.map((item, index) => {
  276. return {
  277. ...item,
  278. projectId: item.projectId + '',
  279. }
  280. })
  281. this.data = data.concat(
  282. )
  283. if (this.type === 'taobao') {
  284. this.data = defaultList.filter(item => item.productId === 1410280);
  285. }
  286. else {
  287. this.data = data.concat(defaultList);
  288. }
  289. // this.data = res.result.records.map((item, index) => {
  290. // return {
  291. // ...item,
  292. // projectId: item.projectId + '',
  293. // key: index,
  294. // }
  295. // })
  296. // this.dataElse = res.result.records.map((item, index) => {
  297. // return {
  298. // ...item,
  299. // projectId: item.projectId + '',
  300. // key: index,
  301. // }
  302. // })
  303. }
  304. })
  305. },
  306. },
  307. watch: {
  308. projectId(n, o) {
  309. if (n == '') {
  310. this.keyValue = ''
  311. } else {
  312. }
  313. },
  314. },
  315. mounted: function () {
  316. // this.handleInfiniteOnLoad()
  317. },
  318. }
  319. </script>
  320. <style type="text/css">
  321. .plug-timer-grid {
  322. width: 100%;
  323. }
  324. .plug-timer-grid td,
  325. .plug-timer-grid th {
  326. border: 1px solid #97b4d1;
  327. text-align: center; /*cursor:pointer;*/
  328. font-size: 10px;
  329. line-height: 10px;
  330. }
  331. .Selected {
  332. background-color: rgb(102, 162, 243);
  333. opacity: 0.5;
  334. }
  335. .plug-timer-grid {
  336. border-collapse: collapse;
  337. z-index: 4;
  338. }
  339. .plug-timer-grid thead tr {
  340. display: table-row;
  341. vertical-align: inherit;
  342. border-color: inherit;
  343. }
  344. .group-creat table td {
  345. height: 20px;
  346. max-width: 5px;
  347. font-size: 12px;
  348. text-align: center;
  349. vertical-align: middle;
  350. overflow: hidden;
  351. transition: background 0.5s;
  352. -webkit-transition: background 0.5s;
  353. }
  354. .plug-timer-grid tbody th {
  355. width: 4%;
  356. }
  357. .plug-timer-grid tbody tr td {
  358. width: 2%;
  359. }
  360. /*.clear{*/
  361. /* margin:20px 0px 20px 0px;*/
  362. /*}*/
  363. </style>