|
@@ -0,0 +1,489 @@
|
|
|
+<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 {
|
|
|
+ ::v-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>
|
|
|
+ <div>
|
|
|
+ <a-form-item
|
|
|
+ label="关键字"
|
|
|
+ v-clickoutside="handleClose"
|
|
|
+ style="width: 100%"
|
|
|
+ class="select-table"
|
|
|
+ :class="{ 'require-check': requireCheck }"
|
|
|
+ >
|
|
|
+ <a-input
|
|
|
+ @focus="
|
|
|
+ topMiddle = true
|
|
|
+ getData()
|
|
|
+ "
|
|
|
+ v-model="keyValue"
|
|
|
+ @change="getData"
|
|
|
+ :disabled="disabled"
|
|
|
+ @keyup.enter.native="okWord"
|
|
|
+ addon-after="选中后按回车键添加"
|
|
|
+ />
|
|
|
+ <div
|
|
|
+ v-show="topMiddle"
|
|
|
+ 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"
|
|
|
+ >
|
|
|
+ <!-- <a-list :data-source="data">
|
|
|
+ <a-list-item slot="renderItem" slot-scope="item" @click="showProject(item)">
|
|
|
+ <a-list-item-meta>
|
|
|
+ <a slot="title">{{ item.word }}</a>
|
|
|
+ </a-list-item-meta>
|
|
|
+ </a-list-item>
|
|
|
+ <div v-if="loading && !busy" class="demo-loading-container">
|
|
|
+ <a-spin />
|
|
|
+ </div>
|
|
|
+ </a-list> -->
|
|
|
+
|
|
|
+ <a-checkbox-group
|
|
|
+ v-model="selectDescriptionArr"
|
|
|
+ style="width:100%;margin-top:10px"
|
|
|
+ v-on:keyup.enter.native="okWord"
|
|
|
+ >
|
|
|
+ <a-list bordered :data-source="data" style="width:100%;max-height: 450px;overflow:auto">
|
|
|
+ <a-list-item slot="renderItem" slot-scope="item, index">
|
|
|
+ <a-checkbox :value="item.word">
|
|
|
+ {{ item.word }}
|
|
|
+ </a-checkbox>
|
|
|
+ </a-list-item>
|
|
|
+ </a-list>
|
|
|
+ </a-checkbox-group>
|
|
|
+ </div>
|
|
|
+ </a-form-item>
|
|
|
+ <a-table
|
|
|
+ :columns="columns"
|
|
|
+ :dataSource="dataSource"
|
|
|
+ :pagination="false"
|
|
|
+ bordered
|
|
|
+ size="middle"
|
|
|
+ style="word-break: break-all;font-size:16px;font-weight:600"
|
|
|
+ id="outTable"
|
|
|
+ ref="accountTable"
|
|
|
+ >
|
|
|
+ <span slot="query_word" slot-scope="text, record">
|
|
|
+ {{ text }}
|
|
|
+ </span>
|
|
|
+ <span slot="recommended_word" slot-scope="text, record">
|
|
|
+ {{ !!text[0] ? text.join() : '-' }}
|
|
|
+ </span>
|
|
|
+ <span slot="action" slot-scope="text, record">
|
|
|
+ <a @click.stop="deleteScript(record)">删除</a>
|
|
|
+ </span>
|
|
|
+ </a-table>
|
|
|
+ </div>
|
|
|
+</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__
|
|
|
+ }
|
|
|
+}
|
|
|
+let TTcolumns = [
|
|
|
+ {
|
|
|
+ title: '关键字',
|
|
|
+ dataIndex: 'query_word',
|
|
|
+ scopedSlots: { customRender: 'query_word' },
|
|
|
+ align: 'center',
|
|
|
+ key: 'query_word'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '推荐词',
|
|
|
+ dataIndex: 'recommended_word',
|
|
|
+ scopedSlots: { customRender: 'recommended_word' },
|
|
|
+ align: 'center',
|
|
|
+ key: 'recommended_word'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '操作',
|
|
|
+ dataIndex: 'action',
|
|
|
+ scopedSlots: { customRender: 'action' },
|
|
|
+ align: 'center',
|
|
|
+ key: 'action'
|
|
|
+ }
|
|
|
+]
|
|
|
+export default {
|
|
|
+ name: 'select-pagination',
|
|
|
+ components: {},
|
|
|
+ directives: { clickoutside, infiniteScroll },
|
|
|
+ props: {
|
|
|
+ projectId: {
|
|
|
+ type: [String, Number, Array],
|
|
|
+ default() {
|
|
|
+ return []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ allScript: {
|
|
|
+ type: [String, Number, Array],
|
|
|
+ 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 {
|
|
|
+ loading: false,
|
|
|
+ busy: false,
|
|
|
+ wrapperCol: {
|
|
|
+ xs: { span: 24 },
|
|
|
+ sm: { span: 12 }
|
|
|
+ },
|
|
|
+ selectedRowKeys: [],
|
|
|
+ selectedRowKeysValue: [],
|
|
|
+ topMiddle: false,
|
|
|
+ keyValue: '',
|
|
|
+ data: [],
|
|
|
+ selectDescriptionArr: [],
|
|
|
+ dataElse: [],
|
|
|
+ ipagination: {
|
|
|
+ current: 0,
|
|
|
+ pageSize: 20
|
|
|
+ },
|
|
|
+ columns: TTcolumns,
|
|
|
+ dataSource: [],
|
|
|
+ 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: {
|
|
|
+ deleteScript(item) {
|
|
|
+ var index = this.dataSource.findIndex(i=>i==item.query_word)
|
|
|
+ this.dataSource.splice(index,1)
|
|
|
+ var indexRemove = this.projectId.findIndex(i=>i==item.query_word)
|
|
|
+ this.projectId.splice(indexRemove,1)
|
|
|
+ },
|
|
|
+ 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.projectId)
|
|
|
+ }
|
|
|
+ if (!!this.keyValue) {
|
|
|
+ this.topMiddle = true
|
|
|
+ this.ipagination.current = 1
|
|
|
+ postAction(process.env.VUE_APP_BASE_SCRIPT_URL + '/related_words?word=' + this.keyValue).then(res => {
|
|
|
+ if (res.code == 0) {
|
|
|
+ this.data = res.result.map((item, index) => {
|
|
|
+ return {
|
|
|
+ productId: item,
|
|
|
+ key: index,
|
|
|
+ word: item
|
|
|
+ }
|
|
|
+ })
|
|
|
+ // 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,
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.data = []
|
|
|
+ this.selectDescriptionArr = []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ okWord() {
|
|
|
+
|
|
|
+ if (this.projectId.findIndex(item => item == this.keyValue) > -1) {
|
|
|
+ } else {
|
|
|
+ this.projectId.push(this.keyValue)
|
|
|
+ }
|
|
|
+
|
|
|
+ var index = this.dataSource.findIndex(item => item.query_word == this.keyValue)
|
|
|
+ if (index > -1) {
|
|
|
+ this.dataSource[index].recommended_word = this.selectDescriptionArr
|
|
|
+ } else {
|
|
|
+ this.dataSource.push({ query_word: this.keyValue, recommended_word: this.selectDescriptionArr })
|
|
|
+ }
|
|
|
+ this.keyValue = ''
|
|
|
+ this.selectDescriptionArr = []
|
|
|
+
|
|
|
+ this.$nextTick(()=>{
|
|
|
+ setTimeout(()=>{
|
|
|
+ this.$emit('update:allScript', this.dataSource)
|
|
|
+ },100)
|
|
|
+
|
|
|
+ })
|
|
|
+
|
|
|
+ this.handleClose()
|
|
|
+ },
|
|
|
+ handleClose() {
|
|
|
+ this.topMiddle = false
|
|
|
+ if (!!!this.projectId) {
|
|
|
+ this.keyValue = ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 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() {}
|
|
|
+}
|
|
|
+</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>
|