selectPagination.vue 11 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(productId)"
  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. productId: '',
  187. loading: false,
  188. busy: false,
  189. wrapperCol: {
  190. xs: { span: 24 },
  191. sm: { span: 12 },
  192. },
  193. selectedRowKeys: [],
  194. selectedRowKeysValue: [],
  195. topMiddle: false,
  196. keyValue: '',
  197. data: [],
  198. dataElse: [],
  199. ipagination: {
  200. current: 0,
  201. pageSize: 20,
  202. },
  203. rowClick: (record, index) => ({
  204. // 事件
  205. on: {
  206. click: () => {
  207. var str =
  208. record.mediaId == '1'
  209. ? '头条'
  210. : record.mediaId == '2'
  211. ? '快手'
  212. : record.mediaId == '3'
  213. ? '头条内广'
  214. : '快手内广'
  215. this.keyValue = record.projectName + ' ' + str
  216. this.topMiddle = false
  217. this.data = this.dataElse
  218. this.$emit('update:projectId', record.projectId)
  219. },
  220. },
  221. }),
  222. }
  223. },
  224. computed: {},
  225. filters: {},
  226. methods: {
  227. showProject(record) {
  228. var str =
  229. record.mediaId == '1'
  230. ? '头条'
  231. : record.mediaId == '2'
  232. ? '快手'
  233. : record.mediaId == '3'
  234. ? '头条内广'
  235. : '快手内广'
  236. this.keyValue = record.projectName
  237. this.topMiddle = false
  238. this.$emit('update:projectId', record.projectId)
  239. },
  240. ...mapGetters(['nickname', 'avatar', 'userInfo']),
  241. onSelectChange(selectedRowKeys, selectionRows) {
  242. this.selectedRowKeys = selectedRowKeys
  243. this.selectedRowKeysValue = selectionRows.map((item) => {
  244. return { orientationId: item.orientationId, orientationName: item.orientationName }
  245. })
  246. },
  247. getData(productId) {
  248. this.productId = productId
  249. if (this.keyValue == '') {
  250. this.$emit('update:projectId', '')
  251. }
  252. this.ipagination.current = 1
  253. getAction('/ctop/projectMember/participateListV2', {
  254. userId: this.userInfo().id,
  255. pageNo: this.ipagination.current,
  256. projectName: this.keyValue,
  257. productId: productId?productId:'',
  258. }).then((res) => {
  259. if (res.code == 0) {
  260. let defaultList = res.result.records.map((item, index) => {
  261. return {
  262. ...item,
  263. projectId: item.projectId + '',
  264. key: index,
  265. }
  266. })
  267. if (this.type === 'taobao') {
  268. this.data = defaultList.filter((item) => item.productId === 1410280)
  269. } else {
  270. this.data = defaultList
  271. }
  272. // this.dataElse = res.result.records.map((item, index) => {
  273. // return {
  274. // ...item,
  275. // projectId: item.projectId + '',
  276. // key: index,
  277. // }
  278. // })
  279. }
  280. })
  281. },
  282. handleClose() {
  283. this.topMiddle = false
  284. },
  285. // allData() {
  286. // getAction('/ctop/projectMember/participateListV2', {
  287. // userId: this.userInfo().id,
  288. // pageSize: this.ipagination.pageSize,
  289. // pageNo: this.ipagination.current,
  290. // }).then((res) => {
  291. // if (res.code == 0) {
  292. // this.data = res.result.records.map((item, index) => {
  293. // return {
  294. // ...item,
  295. // projectId: item.projectId + '',
  296. // key: index,
  297. // }
  298. // })
  299. // this.dataElse = res.result.records.map((item, index) => {
  300. // return {
  301. // ...item,
  302. // projectId: item.projectId + '',
  303. // key: index,
  304. // }
  305. // })
  306. // }
  307. // })
  308. // },
  309. handleInfiniteOnLoad() {
  310. const data = this.data
  311. this.loading = true
  312. this.ipagination.current++
  313. // this.fetchData((res) => {
  314. // this.data = data.concat(res.results)
  315. // this.loading = false
  316. // })
  317. getAction('/ctop/projectMember/participateListV2', {
  318. userId: this.userInfo().id,
  319. pageSize: this.ipagination.pageSize,
  320. pageNo: this.ipagination.current,
  321. projectName: this.keyValue,
  322. productId: this.productId?this.productId:null,
  323. }).then((res) => {
  324. if (res.code == 0) {
  325. this.busy = true
  326. let defaultList = res.result.records.map((item, index) => {
  327. return {
  328. ...item,
  329. projectId: item.projectId + '',
  330. }
  331. })
  332. this.data = data.concat()
  333. if (this.type === 'taobao') {
  334. this.data = defaultList.filter((item) => item.productId === 1410280)
  335. } else {
  336. this.data = data.concat(defaultList)
  337. }
  338. // this.data = res.result.records.map((item, index) => {
  339. // return {
  340. // ...item,
  341. // projectId: item.projectId + '',
  342. // key: index,
  343. // }
  344. // })
  345. // this.dataElse = res.result.records.map((item, index) => {
  346. // return {
  347. // ...item,
  348. // projectId: item.projectId + '',
  349. // key: index,
  350. // }
  351. // })
  352. }
  353. })
  354. },
  355. },
  356. watch: {
  357. projectId(n, o) {
  358. if (n == '') {
  359. this.keyValue = ''
  360. } else {
  361. }
  362. },
  363. },
  364. mounted: function () {
  365. // this.handleInfiniteOnLoad()
  366. },
  367. }
  368. </script>
  369. <style type="text/css">
  370. .plug-timer-grid {
  371. width: 100%;
  372. }
  373. .plug-timer-grid td,
  374. .plug-timer-grid th {
  375. border: 1px solid #97b4d1;
  376. text-align: center; /*cursor:pointer;*/
  377. font-size: 10px;
  378. line-height: 10px;
  379. }
  380. .Selected {
  381. background-color: rgb(102, 162, 243);
  382. opacity: 0.5;
  383. }
  384. .plug-timer-grid {
  385. border-collapse: collapse;
  386. z-index: 4;
  387. }
  388. .plug-timer-grid thead tr {
  389. display: table-row;
  390. vertical-align: inherit;
  391. border-color: inherit;
  392. }
  393. .group-creat table td {
  394. height: 20px;
  395. max-width: 5px;
  396. font-size: 12px;
  397. text-align: center;
  398. vertical-align: middle;
  399. overflow: hidden;
  400. transition: background 0.5s;
  401. -webkit-transition: background 0.5s;
  402. }
  403. .plug-timer-grid tbody th {
  404. width: 4%;
  405. }
  406. .plug-timer-grid tbody tr td {
  407. width: 2%;
  408. }
  409. /*.clear{*/
  410. /* margin:20px 0px 20px 0px;*/
  411. /*}*/
  412. </style>