selectPagination.vue 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423
  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. <style lang="scss" scoped>
  24. .require-check {
  25. /deep/ .ant-form-item-label {
  26. label::before {
  27. display: inline-block;
  28. margin-right: 4px;
  29. color: #f5222d;
  30. font-size: 14px;
  31. font-family: SimSun, sans-serif;
  32. line-height: 1;
  33. content: '*';
  34. }
  35. }
  36. }
  37. </style>
  38. <template>
  39. <a-form-item
  40. label="项目名称"
  41. :label-col="labelCol"
  42. :wrapper-col="wrapperCol"
  43. v-clickoutside="handleClose"
  44. style="width: 100%"
  45. class="select-table"
  46. :class="{'require-check':requireCheck} "
  47. >
  48. <a-input
  49. placeholder="请选择项目名称"
  50. @focus="topMiddle = true"
  51. v-model="keyValue"
  52. @change="getData"
  53. :disabled="disabled"
  54. />
  55. <div
  56. v-show="topMiddle"
  57. v-infinite-scroll="handleInfiniteOnLoad"
  58. style="
  59. background: white;
  60. padding: 10px;
  61. box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15);
  62. position: absolute;
  63. z-index: 1000;
  64. width: 100%;
  65. "
  66. class="demo-infinite-container"
  67. :infinite-scroll-disabled="busy"
  68. :infinite-scroll-distance="80"
  69. >
  70. <a-list :data-source="data">
  71. <a-list-item slot="renderItem" slot-scope="item" @click="showProject(item)">
  72. <a-list-item-meta :description="'广告主名称:' + item.advertiserName">
  73. <a slot="title">项目名称:{{ item.projectName }}</a>
  74. </a-list-item-meta>
  75. <div>
  76. {{
  77. item.mediaId == '1'
  78. ? '头条'
  79. : item.mediaId == '2'
  80. ? '快手'
  81. : item.mediaId == '3'
  82. ? '头条内广'
  83. : '快手内广'
  84. }}
  85. </div>
  86. </a-list-item>
  87. <div v-if="loading && !busy" class="demo-loading-container">
  88. <a-spin />
  89. </div>
  90. </a-list>
  91. </div>
  92. </a-form-item>
  93. </template>
  94. <script>
  95. import { getAction, postAction } from '@/api/manage'
  96. import moment from 'moment'
  97. import { mapGetters } from 'vuex'
  98. import jq from 'jquery'
  99. import infiniteScroll from 'vue-infinite-scroll'
  100. const clickoutside = {
  101. // 初始化指令
  102. bind(el, binding, vnode) {
  103. function documentHandler(e) {
  104. // 这里判断点击的元素是否是本身,是本身,则返回
  105. if (el.contains(e.target)) {
  106. return false
  107. }
  108. // 判断指令中是否绑定了函数
  109. if (binding.expression) {
  110. // 如果绑定了函数 则调用那个函数,此处binding.value就是handleClose方法
  111. binding.value(e)
  112. }
  113. }
  114. // 给当前元素绑定个私有变量,方便在unbind中可以解除事件监听
  115. el.__vueClickOutside__ = documentHandler
  116. document.addEventListener('click', documentHandler)
  117. },
  118. update() {},
  119. unbind(el, binding) {
  120. // 解除事件监听
  121. document.removeEventListener('click', el.__vueClickOutside__)
  122. delete el.__vueClickOutside__
  123. },
  124. }
  125. export default {
  126. name: 'select-pagination',
  127. components: {},
  128. directives: { clickoutside, infiniteScroll },
  129. props: {
  130. projectId: {
  131. type: [String, Number],
  132. default() {
  133. return ''
  134. },
  135. },
  136. type: {
  137. type: String,
  138. default() {
  139. return ''
  140. },
  141. },
  142. labelCol: {
  143. type: Object,
  144. default() {
  145. return {
  146. xs: { span: 24 },
  147. sm: { span: 5 },
  148. }
  149. },
  150. },
  151. disabled: {
  152. type: Boolean,
  153. default() {
  154. return false
  155. },
  156. },
  157. requireCheck: {
  158. type: Boolean,
  159. default() {
  160. return false
  161. },
  162. }
  163. },
  164. data() {
  165. return {
  166. taobaoSpecialOfferList: {
  167. advertiserId: "fd41614705a047dd65ab0e34e9150cfe",
  168. advertiserName: " 淘宝(中国)软件有限公司",
  169. createTime: "2021-03-03 10:15:30",
  170. designResponsibleName: "辛巴特",
  171. id: 3660879,
  172. maxBid: 30000,
  173. mediaId: "1",
  174. productId: 1410280,
  175. productName: "头条-淘宝特价版",
  176. projectId: 1530887,
  177. projectName: "头条-淘宝特价版",
  178. responsibleName: "董琪",
  179. roleCode: "operator",
  180. saleId: null,
  181. saleName: null,
  182. updateTime: "2021-03-03 21:23:04",
  183. userId: "a0d58df3392c4583b55ce3b041792aa7",
  184. userName: "王晓娟"
  185. },
  186. loading: false,
  187. busy: false,
  188. wrapperCol: {
  189. xs: { span: 24 },
  190. sm: { span: 12 },
  191. },
  192. selectedRowKeys: [],
  193. selectedRowKeysValue: [],
  194. topMiddle: false,
  195. keyValue: '',
  196. data: [],
  197. dataElse: [],
  198. ipagination: {
  199. current: 0,
  200. pageSize: 20,
  201. },
  202. rowClick: (record, index) => ({
  203. // 事件
  204. on: {
  205. click: () => {
  206. var str =
  207. record.mediaId == '1'
  208. ? '头条'
  209. : record.mediaId == '2'
  210. ? '快手'
  211. : record.mediaId == '3'
  212. ? '头条内广'
  213. : '快手内广'
  214. this.keyValue = record.projectName + ' ' + str
  215. this.topMiddle = false
  216. this.data = this.dataElse
  217. this.$emit('update:projectId', record.projectId)
  218. },
  219. },
  220. }),
  221. }
  222. },
  223. computed: {},
  224. filters: {},
  225. methods: {
  226. showProject(record) {
  227. var str =
  228. record.mediaId == '1'
  229. ? '头条'
  230. : record.mediaId == '2'
  231. ? '快手'
  232. : record.mediaId == '3'
  233. ? '头条内广'
  234. : '快手内广'
  235. this.keyValue = record.projectName
  236. this.topMiddle = false
  237. this.$emit('update:projectId', record.projectId)
  238. },
  239. ...mapGetters(['nickname', 'avatar', 'userInfo']),
  240. onSelectChange(selectedRowKeys, selectionRows) {
  241. this.selectedRowKeys = selectedRowKeys
  242. this.selectedRowKeysValue = selectionRows.map((item) => {
  243. return { orientationId: item.orientationId, orientationName: item.orientationName }
  244. })
  245. },
  246. getData() {
  247. if (this.keyValue == '') {
  248. this.$emit('update:projectId', '')
  249. }
  250. this.ipagination.current = 1
  251. getAction('/ctop/projectMember/participateListV2', {
  252. userId: this.userInfo().id,
  253. pageNo: this.ipagination.current,
  254. projectName: this.keyValue,
  255. }).then((res) => {
  256. if (res.code == 0) {
  257. let defaultList = res.result.records.map((item, index) => {
  258. return {
  259. ...item,
  260. projectId: item.projectId + '',
  261. key: index,
  262. };
  263. })
  264. if (this.type === 'taobao') {
  265. this.data = defaultList.filter(item => item.productId === 1410280);
  266. }
  267. else {
  268. this.data = defaultList;
  269. }
  270. // this.dataElse = res.result.records.map((item, index) => {
  271. // return {
  272. // ...item,
  273. // projectId: item.projectId + '',
  274. // key: index,
  275. // }
  276. // })
  277. }
  278. })
  279. },
  280. handleClose() {
  281. this.topMiddle = false
  282. },
  283. // allData() {
  284. // getAction('/ctop/projectMember/participateListV2', {
  285. // userId: this.userInfo().id,
  286. // pageSize: this.ipagination.pageSize,
  287. // pageNo: this.ipagination.current,
  288. // }).then((res) => {
  289. // if (res.code == 0) {
  290. // this.data = res.result.records.map((item, index) => {
  291. // return {
  292. // ...item,
  293. // projectId: item.projectId + '',
  294. // key: index,
  295. // }
  296. // })
  297. // this.dataElse = res.result.records.map((item, index) => {
  298. // return {
  299. // ...item,
  300. // projectId: item.projectId + '',
  301. // key: index,
  302. // }
  303. // })
  304. // }
  305. // })
  306. // },
  307. handleInfiniteOnLoad() {
  308. const data = this.data
  309. this.loading = true
  310. this.ipagination.current++
  311. // this.fetchData((res) => {
  312. // this.data = data.concat(res.results)
  313. // this.loading = false
  314. // })
  315. getAction('/ctop/projectMember/participateListV2', {
  316. userId: this.userInfo().id,
  317. pageSize: this.ipagination.pageSize,
  318. pageNo: this.ipagination.current,
  319. projectName: this.keyValue,
  320. }).then((res) => {
  321. if (res.code == 0) {
  322. this.busy = true
  323. let defaultList = res.result.records.map((item, index) => {
  324. return {
  325. ...item,
  326. projectId: item.projectId + '',
  327. }
  328. })
  329. this.data = data.concat(
  330. )
  331. if (this.type === 'taobao') {
  332. this.data = defaultList.filter(item => item.productId === 1410280);
  333. }
  334. else {
  335. this.data = data.concat(defaultList);
  336. }
  337. // this.data = res.result.records.map((item, index) => {
  338. // return {
  339. // ...item,
  340. // projectId: item.projectId + '',
  341. // key: index,
  342. // }
  343. // })
  344. // this.dataElse = res.result.records.map((item, index) => {
  345. // return {
  346. // ...item,
  347. // projectId: item.projectId + '',
  348. // key: index,
  349. // }
  350. // })
  351. }
  352. })
  353. },
  354. },
  355. watch: {
  356. projectId(n, o) {
  357. if (n == '') {
  358. this.keyValue = ''
  359. } else {
  360. }
  361. },
  362. },
  363. mounted: function () {
  364. // this.handleInfiniteOnLoad()
  365. },
  366. }
  367. </script>
  368. <style type="text/css">
  369. .plug-timer-grid {
  370. width: 100%;
  371. }
  372. .plug-timer-grid td,
  373. .plug-timer-grid th {
  374. border: 1px solid #97b4d1;
  375. text-align: center; /*cursor:pointer;*/
  376. font-size: 10px;
  377. line-height: 10px;
  378. }
  379. .Selected {
  380. background-color: rgb(102, 162, 243);
  381. opacity: 0.5;
  382. }
  383. .plug-timer-grid {
  384. border-collapse: collapse;
  385. z-index: 4;
  386. }
  387. .plug-timer-grid thead tr {
  388. display: table-row;
  389. vertical-align: inherit;
  390. border-color: inherit;
  391. }
  392. .group-creat table td {
  393. height: 20px;
  394. max-width: 5px;
  395. font-size: 12px;
  396. text-align: center;
  397. vertical-align: middle;
  398. overflow: hidden;
  399. transition: background 0.5s;
  400. -webkit-transition: background 0.5s;
  401. }
  402. .plug-timer-grid tbody th {
  403. width: 4%;
  404. }
  405. .plug-timer-grid tbody tr td {
  406. width: 2%;
  407. }
  408. /*.clear{*/
  409. /* margin:20px 0px 20px 0px;*/
  410. /*}*/
  411. </style>