123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423 |
- <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>
- <style lang="scss" scoped>
- .require-check {
- /deep/ .ant-form-item-label {
- label::before {
- display: inline-block;
- margin-right: 4px;
- color: #f5222d;
- font-size: 14px;
- font-family: SimSun, sans-serif;
- line-height: 1;
- content: '*';
- }
- }
- }
- </style>
- <template>
- <a-form-item
- label="项目名称"
- :label-col="labelCol"
- :wrapper-col="wrapperCol"
- v-clickoutside="handleClose"
- style="width: 100%"
- class="select-table"
- :class="{ 'require-check': requireCheck }"
- >
- <a-input
- placeholder="请选择项目名称"
- @focus="topMiddle = true"
- v-model="keyValue"
- @change="getData(productId)"
- :disabled="disabled"
- />
- <div
- v-show="topMiddle"
- v-infinite-scroll="handleInfiniteOnLoad"
- style="
- background: white;
- padding: 10px;
- box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15);
- position: absolute;
- z-index: 1000;
- width: 100%;
- "
- 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, Number],
- default() {
- return ''
- },
- },
- type: {
- type: String,
- default() {
- return ''
- },
- },
- labelCol: {
- type: Object,
- default() {
- return {
- xs: { span: 24 },
- sm: { span: 5 },
- }
- },
- },
- disabled: {
- type: Boolean,
- default() {
- return false
- },
- },
- requireCheck: {
- type: Boolean,
- default() {
- return false
- },
- },
- },
- data() {
- return {
- taobaoSpecialOfferList: {
- advertiserId: 'fd41614705a047dd65ab0e34e9150cfe',
- advertiserName: ' 淘宝(中国)软件有限公司',
- createTime: '2021-03-03 10:15:30',
- designResponsibleName: '辛巴特',
- id: 3660879,
- maxBid: 30000,
- mediaId: '1',
- productId: 1410280,
- productName: '头条-淘宝特价版',
- projectId: 1530887,
- projectName: '头条-淘宝特价版',
- responsibleName: '董琪',
- roleCode: 'operator',
- saleId: null,
- saleName: null,
- updateTime: '2021-03-03 21:23:04',
- userId: 'a0d58df3392c4583b55ce3b041792aa7',
- userName: '王晓娟',
- },
- productId: '',
- loading: false,
- busy: false,
- 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(productId) {
- this.productId = productId
- 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,
- productId: productId?productId:'',
- }).then((res) => {
- if (res.code == 0) {
- let defaultList = res.result.records.map((item, index) => {
- return {
- ...item,
- projectId: item.projectId + '',
- key: index,
- }
- })
- if (this.type === 'taobao') {
- this.data = defaultList.filter((item) => item.productId === 1410280)
- } else {
- this.data = defaultList
- }
- // 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,
- productId: this.productId?this.productId:null,
- }).then((res) => {
- if (res.code == 0) {
- this.busy = true
- let defaultList = res.result.records.map((item, index) => {
- return {
- ...item,
- projectId: item.projectId + '',
- }
- })
- this.data = data.concat()
- if (this.type === 'taobao') {
- this.data = defaultList.filter((item) => item.productId === 1410280)
- } else {
- this.data = data.concat(defaultList)
- }
- // 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>
|