123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337 |
- <style>
- .select-table .ant-table-thead > tr > th,
- .select-table .ant-table-tbody > tr > td {
- padding: 0 !important;
- }
- .select-table .ant-table {
- font-size: 12px;
- }
- .demo-infinite-container {
- border: 1px solid #e8e8e8;
- border-radius: 4px;
- overflow: auto;
- padding: 8px 24px;
- height: 300px;
- }
- .demo-loading-container {
- position: absolute;
- bottom: 40px;
- width: 100%;
- text-align: center;
- }
- </style>
- <template>
- <a-form-item
- label="项目名称"
- :label-col="labelCol"
- :wrapper-col="wrapperCol"
- v-clickoutside="handleClose"
- style="width:100%"
- class="select-table"
- >
- <a-input placeholder="请选择项目" @focus="topMiddle = true" v-model="keyValue" @change="getData" />
- <div
- v-show="topMiddle"
- v-infinite-scroll="handleInfiniteOnLoad"
- style="background:white;padding:10px;box-shadow: 0 2px 8px 0 rgba(0,0,0,.15);position:relative;z-index:1000"
- class="demo-infinite-container"
- :infinite-scroll-disabled="busy"
- :infinite-scroll-distance="80"
- >
- <a-list :data-source="data">
- <a-list-item slot="renderItem" slot-scope="item" @click="showProject(item)">
- <a-list-item-meta :description="'广告主名称:'+item.advertiserName">
- <a slot="title">项目名称:{{ item.projectName }}</a>
- </a-list-item-meta>
- <div>
- {{item.mediaId == '1'
- ? '头条'
- : item.mediaId == '2'
- ? '快手'
- : item.mediaId == '3'
- ? '头条内广'
- : '快手内广'}}
- </div>
- </a-list-item>
- <div v-if="loading && !busy" class="demo-loading-container">
- <a-spin />
- </div>
- </a-list>
- </div>
- </a-form-item>
- </template>
- <script>
- import { getAction, postAction } from '@/api/manage'
- import moment from 'moment'
- import { mapGetters } from 'vuex'
- import jq from 'jquery'
- import infiniteScroll from 'vue-infinite-scroll'
- const clickoutside = {
- // 初始化指令
- bind(el, binding, vnode) {
- function documentHandler(e) {
- // 这里判断点击的元素是否是本身,是本身,则返回
- if (el.contains(e.target)) {
- return false
- }
- // 判断指令中是否绑定了函数
- if (binding.expression) {
- // 如果绑定了函数 则调用那个函数,此处binding.value就是handleClose方法
- binding.value(e)
- }
- }
- // 给当前元素绑定个私有变量,方便在unbind中可以解除事件监听
- el.__vueClickOutside__ = documentHandler
- document.addEventListener('click', documentHandler)
- },
- update() {},
- unbind(el, binding) {
- // 解除事件监听
- document.removeEventListener('click', el.__vueClickOutside__)
- delete el.__vueClickOutside__
- },
- }
- export default {
- name: 'select-pagination',
- components: {},
- directives: { clickoutside, infiniteScroll },
- props: {
- projectId: {
- type: String,
- default() {
- return ''
- },
- },
- },
- data() {
- return {
- loading: false,
- busy: false,
- labelCol: {
- xs: { span: 24 },
- sm: { span: 5 },
- },
- wrapperCol: {
- xs: { span: 24 },
- sm: { span: 12 },
- },
- selectedRowKeys: [],
- selectedRowKeysValue: [],
- topMiddle: false,
- keyValue: '',
- data: [],
- dataElse: [],
- ipagination: {
- current: 0,
- pageSize: 20,
- },
- rowClick: (record, index) => ({
- // 事件
- on: {
- click: () => {
- var str =
- record.mediaId == '1'
- ? '头条'
- : record.mediaId == '2'
- ? '快手'
- : record.mediaId == '3'
- ? '头条内广'
- : '快手内广'
- this.keyValue = record.projectName + ' ' + str
- this.topMiddle = false
- this.data = this.dataElse
- this.$emit('update:projectId', record.projectId)
- },
- },
- }),
- }
- },
- computed: {},
- filters: {},
- methods: {
- showProject(record) {
- var str =
- record.mediaId == '1'
- ? '头条'
- : record.mediaId == '2'
- ? '快手'
- : record.mediaId == '3'
- ? '头条内广'
- : '快手内广'
- this.keyValue = record.projectName
- this.topMiddle = false
- this.$emit('update:projectId', record.projectId)
- },
- ...mapGetters(['nickname', 'avatar', 'userInfo']),
- onSelectChange(selectedRowKeys, selectionRows) {
- this.selectedRowKeys = selectedRowKeys
- this.selectedRowKeysValue = selectionRows.map((item) => {
- return { orientationId: item.orientationId, orientationName: item.orientationName }
- })
- },
- getData() {
- if(this.keyValue == ''){
- this.$emit('update:projectId', "")
- }
- this.ipagination.current = 1
- getAction('/ctop/projectMember/participateListV2', {
- userId: this.userInfo().id,
- pageNo: this.ipagination.current,
- projectName: this.keyValue,
- }).then((res) => {
- if (res.code == 0) {
- this.data = res.result.records.map((item, index) => {
- return {
- ...item,
- projectId: item.projectId + '',
- key: index,
- }
- })
- // this.dataElse = res.result.records.map((item, index) => {
- // return {
- // ...item,
- // projectId: item.projectId + '',
- // key: index,
- // }
- // })
- }
- })
- },
- handleClose() {
- this.topMiddle = false
- },
- // allData() {
- // getAction('/ctop/projectMember/participateListV2', {
- // userId: this.userInfo().id,
- // pageSize: this.ipagination.pageSize,
- // pageNo: this.ipagination.current,
- // }).then((res) => {
- // if (res.code == 0) {
- // this.data = res.result.records.map((item, index) => {
- // return {
- // ...item,
- // projectId: item.projectId + '',
- // key: index,
- // }
- // })
- // this.dataElse = res.result.records.map((item, index) => {
- // return {
- // ...item,
- // projectId: item.projectId + '',
- // key: index,
- // }
- // })
- // }
- // })
- // },
- handleInfiniteOnLoad() {
- const data = this.data
- this.loading = true
- this.ipagination.current++
- // this.fetchData((res) => {
- // this.data = data.concat(res.results)
- // this.loading = false
- // })
- getAction('/ctop/projectMember/participateListV2', {
- userId: this.userInfo().id,
- pageSize: this.ipagination.pageSize,
- pageNo: this.ipagination.current,
- projectName: this.keyValue,
- }).then((res) => {
- if (res.code == 0) {
- this.busy = true
- this.data = data.concat(
- res.result.records.map((item, index) => {
- return {
- ...item,
- projectId: item.projectId + '',
- }
- })
- )
- // this.data = res.result.records.map((item, index) => {
- // return {
- // ...item,
- // projectId: item.projectId + '',
- // key: index,
- // }
- // })
- // this.dataElse = res.result.records.map((item, index) => {
- // return {
- // ...item,
- // projectId: item.projectId + '',
- // key: index,
- // }
- // })
- }
- })
- },
- },
- watch: {
- projectId(n, o) {
- if (n == '') {
- this.keyValue = ''
- } else {
- }
- },
- },
- mounted: function () {
- this.handleInfiniteOnLoad()
- },
- }
- </script>
- <style type="text/css">
- .plug-timer-grid {
- width: 100%;
- }
- .plug-timer-grid td,
- .plug-timer-grid th {
- border: 1px solid #97b4d1;
- text-align: center; /*cursor:pointer;*/
- font-size: 10px;
- line-height: 10px;
- }
- .Selected {
- background-color: rgb(102, 162, 243);
- opacity: 0.5;
- }
- .plug-timer-grid {
- border-collapse: collapse;
- z-index: 4;
- }
- .plug-timer-grid thead tr {
- display: table-row;
- vertical-align: inherit;
- border-color: inherit;
- }
- .group-creat table td {
- height: 20px;
- max-width: 5px;
- font-size: 12px;
- text-align: center;
- vertical-align: middle;
- overflow: hidden;
- transition: background 0.5s;
- -webkit-transition: background 0.5s;
- }
- .plug-timer-grid tbody th {
- width: 4%;
- }
- .plug-timer-grid tbody tr td {
- width: 2%;
- }
- /*.clear{*/
- /* margin:20px 0px 20px 0px;*/
- /*}*/
- </style>
|