|
@@ -0,0 +1,423 @@
|
|
|
|
+<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"
|
|
|
|
+ :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.productName }}</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: "王晓娟"
|
|
|
|
+ },
|
|
|
|
+ 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.productName
|
|
|
|
+ this.topMiddle = false
|
|
|
|
+ this.data = this.dataElse
|
|
|
|
+ this.$emit('update:projectId', record.id)
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ }),
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ computed: {},
|
|
|
|
+ filters: {},
|
|
|
|
+ methods: {
|
|
|
|
+ showProject(record) {
|
|
|
|
+ var str =
|
|
|
|
+ record.mediaId == '1'
|
|
|
|
+ ? '头条'
|
|
|
|
+ : record.mediaId == '2'
|
|
|
|
+ ? '快手'
|
|
|
|
+ : record.mediaId == '3'
|
|
|
|
+ ? '头条内广'
|
|
|
|
+ : '快手内广'
|
|
|
|
+ this.keyValue = record.productName
|
|
|
|
+ this.topMiddle = false
|
|
|
|
+ this.$emit('update:projectId', record.id)
|
|
|
|
+ },
|
|
|
|
+ ...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/product/getUserProductList', {
|
|
|
|
+ userId: this.userInfo().id,
|
|
|
|
+ pageNo: this.ipagination.current,
|
|
|
|
+ productName: this.keyValue,
|
|
|
|
+ }).then((res) => {
|
|
|
|
+ if (res.code == 0) {
|
|
|
|
+ let defaultList = res.result.records.map((item, index) => {
|
|
|
|
+ return {
|
|
|
|
+ ...item,
|
|
|
|
+ productId: item.id + '',
|
|
|
|
+ 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/product/getUserProductList', {
|
|
|
|
+ // 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/product/getUserProductList', {
|
|
|
|
+ userId: this.userInfo().id,
|
|
|
|
+ pageSize: this.ipagination.pageSize,
|
|
|
|
+ pageNo: this.ipagination.current,
|
|
|
|
+ productName: this.keyValue,
|
|
|
|
+ }).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>
|