|
@@ -0,0 +1,239 @@
|
|
|
|
+<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;
|
|
|
|
+}
|
|
|
|
+</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), allData()" v-model="keyValue" @change="getData" />
|
|
|
|
+ <div
|
|
|
|
+ style="background:white;padding:10px;box-shadow: 0 2px 8px 0 rgba(0,0,0,.15);position:relative;z-index:1000"
|
|
|
|
+ v-if="topMiddle"
|
|
|
|
+ >
|
|
|
|
+ <a-table
|
|
|
|
+ :showHeader="false"
|
|
|
|
+ :columns="columns"
|
|
|
|
+ :dataSource="data"
|
|
|
|
+ bordered
|
|
|
|
+ :pagination="false"
|
|
|
|
+ :scroll="{ y: 300 }"
|
|
|
|
+ :customRow="rowClick"
|
|
|
|
+ >
|
|
|
|
+ <span slot="mediaId" slot-scope="text">{{ text == '1' ? '头条' : text == '2'? '快手':text == '3'?'头条内广':'快手内广' }}</span>
|
|
|
|
+ </a-table>
|
|
|
|
+ </div>
|
|
|
|
+ </a-form-item>
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script>
|
|
|
|
+import { getAction, postAction } from '@/api/manage'
|
|
|
|
+import moment from 'moment'
|
|
|
|
+import { mapGetters } from 'vuex'
|
|
|
|
+import jq from 'jquery'
|
|
|
|
+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__
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+const columns = [
|
|
|
|
+ {
|
|
|
|
+ title: '',
|
|
|
|
+ dataIndex: 'projectName',
|
|
|
|
+ align: 'center'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '',
|
|
|
|
+ dataIndex: 'mediaId',
|
|
|
|
+ scopedSlots: { customRender: 'mediaId' },
|
|
|
|
+ width: 80,
|
|
|
|
+ align: 'center'
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ {
|
|
|
|
+ title: '',
|
|
|
|
+ dataIndex: 'advertiserName',
|
|
|
|
+ align: 'center'
|
|
|
|
+ }
|
|
|
|
+]
|
|
|
|
+export default {
|
|
|
|
+ name: 'BaseForm',
|
|
|
|
+ components: {},
|
|
|
|
+ directives: { clickoutside },
|
|
|
|
+ props: {
|
|
|
|
+ projectId: {
|
|
|
|
+ type: String,
|
|
|
|
+ default() {
|
|
|
|
+ return ''
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ labelCol: {
|
|
|
|
+ xs: { span: 24 },
|
|
|
|
+ sm: { span: 5 }
|
|
|
|
+ },
|
|
|
|
+ wrapperCol: {
|
|
|
|
+ xs: { span: 24 },
|
|
|
|
+ sm: { span: 12 }
|
|
|
|
+ },
|
|
|
|
+ selectedRowKeys: [],
|
|
|
|
+ selectedRowKeysValue: [],
|
|
|
|
+ topMiddle: false,
|
|
|
|
+ keyValue: '',
|
|
|
|
+ columns,
|
|
|
|
+ data: [],
|
|
|
|
+ dataElse: [],
|
|
|
|
+ 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: {
|
|
|
|
+ ...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.data = this.dataElse.filter(item => {
|
|
|
|
+ return item.projectName.toLowerCase().indexOf(this.keyValue.toLowerCase()) > -1
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ handleClose() {
|
|
|
|
+ this.topMiddle = false
|
|
|
|
+ },
|
|
|
|
+ allData() {
|
|
|
|
+ getAction('/ctop/projectMember/participateList', { userId: this.userInfo().id }).then(res => {
|
|
|
|
+ if (res.code == 0) {
|
|
|
|
+ this.data = res.result.map((item, index) => {
|
|
|
|
+ return {
|
|
|
|
+ ...item,
|
|
|
|
+ projectId: item.projectId + '',
|
|
|
|
+ key: index
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ this.dataElse = res.result.map((item, index) => {
|
|
|
|
+ return {
|
|
|
|
+ ...item,
|
|
|
|
+ projectId: item.projectId + '',
|
|
|
|
+ key: index
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ watch: {
|
|
|
|
+ projectId(n, o) {
|
|
|
|
+ if (n == '') {
|
|
|
|
+ this.keyValue = ''
|
|
|
|
+ } else {
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ mounted: function() {
|
|
|
|
+ this.allData()
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+</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>
|