tabtab

最新推荐文章于 2024-11-05 21:52:05 发布

caohongxia666

最新推荐文章于 2024-11-05 21:52:05 发布

阅读量1.7k

点赞数

本文链接：https://blog.youkuaiyun.com/caohongxia666/article/details/119519080

版权

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</div>

<span>{{zuijinData[topThreeTab].startDate?new Date(zuijinData[topThreeTab].startDate).getMonth()+1:''}}月-{{zuijinData[topThreeTab].endDate?new Date(zuijinData[topThreeTab].endDate).getMonth()+1:''}}月</span>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<!-- <p v-for="(item, index) in list" :key="index">

测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据

测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据

测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据

测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据

</p> -->

</div>

</body>

vm = new Vue({

el:"#app",

watch: {

data () {

return {

list: [1,2,3,4,4,4,4,4,8,4,4,4,4,4,4,4,4,4,5,4,4,4,4,4,4,4,4,4],

isMyShow: true,

isTeamShow: false,

teamCustomerTitle: '团队',

teamCustomerId: '团队id',

isFilterShow: false,

filterPrimaryNode: [{name: '团队1', value: 't1'}, {name: '团队2', value: 't2'}, {name: '团队3', value: 't3'}],

filterSecondaryNodeFather: {

t1: [{name: '子团队11', value: 't11'}, {name: '子团队12', value: 't12'}, {name: '子团队13', value: 't13'}],

t2: [{name: '子团队21', value: 't21'}, {name: '子团队22', value: 't22'}, {name: '子团队23', value: 't23'}],

t3: []

filterSecondaryNode: [],

primaryNodeIndex: 0,

primarySecondNodeIndex: null,

primaryNodeIndexOld: 0,

topThreeTab: 'PRJ',

listTab: [],

listTabData: {

PRJ: [

{name: '我主办', queryCode: 'ZB', tab: true},

{name: '尽调中', queryCode: 'JD', tab: false},

{name: '风审中', queryCode: 'FS', tab: false},

CNT: [

{name: '我主办', queryCode: 'ZB', tab: true},

{name: '待面签', queryCode: 'DMQ', tab: false},

LON: [

{name: '我投放', queryCode: 'ZB', tab: true},

{name: '待投放', queryCode: 'DTF', tab: false},

]

showMenu: false,

isShowZuiJIn: false,

zuijinData: {

PRJ: {startDate: '', endDate: ''},

CNT: {startDate: '', endDate: ''},

LON: {startDate: '', endDate: ''}

orderTab: [],

orderTabData: {

PRJ: [

// 0正常 1降序 2升序

{text: '申请日期', name: 'bgn_dte', type: '1'},

{text: '审批状态', name: 'prj_sts', type: '0'},

{text: '融资额', name: 'lea_amt', type: '0'},

{text: '客户名称', name: 'clt_nam', type: '0'}

CNT: [

// 0正常 1降序 2升序

{text: '创建日期', name: 'bgn_dte', type: '1'},

{text: '合同状态', name: 'prj_sts', type: '0'},

{text: '合同金额', name: 'lea_amt', type: '0'},

{text: '客户名称', name: 'clt_nam', type: '0'}

LON: [

// 0正常 1降序 2升序

{text: '投放日期', name: 'lon_dte', type: '1'},

{text: '待投放', name: 'lon_amt', type: '0'},

{text: '客户名称', name: 'clt_nam', type: '0'}

]

inputValue: '',

histroyData: [],

histroyListTabData: {},

pageNumber: 1,

isShowTop: false

}

created () {

this.renderTabList()

this.listTab = this.listTabData[this.topThreeTab]

this.orderTab = this.orderTabData[this.topThreeTab]

this.getListData(2, 1)

mounted () {

let self = this

if (this.$refs.scrollFather) {

let offsetTop = this.$refs.scrollItem.offsetTop

this.$refs.scrollFather.onscroll = function () {

if (self.$refs.scrollFather.scrollTop > offsetTop) {

self.isShowTop = true

} else {

self.isShowTop = false

}

computed: {

methods: {

renderTabList (num) {

let listTabData = JSON.parse(JSON.stringify(this.listTabData))

if (num !== 1) {

for (let k in listTabData) {

listTabData[k].forEach((v, i) => {

if (i === 0) {

v.tab = true

} else {

v.tab = false

}

})

}

this.topThreeTab = 'PRJ'

this.isShowZuiJIn = false

this.zuijinData = {

PRJ: {startDate: '', endDate: ''},

CNT: {startDate: '', endDate: ''},

LON: {startDate: '', endDate: ''}

}

if (this.isMyShow) {

if (this.histroyListTabData['my']) {

this.listTabData = this.histroyListTabData['my'].listTabData

this.isShowZuiJIn = this.histroyListTabData['my'].isShowZuiJIn

this.zuijinData = this.histroyListTabData['my'].zuijinData

this.topThreeTab = this.histroyListTabData['my'].topThreeTab

} else {

this.listTabData = listTabData

this.histroyListTabData['my'] = {

listTabData: listTabData,

isShowZuiJIn: this.isShowZuiJIn,

zuijinData: this.zuijinData,

topThreeTab: this.topThreeTab

}

} else if (this.isTeamShow) {

if (this.histroyListTabData[this.teamCustomerId]) {

this.listTabData = this.histroyListTabData[this.teamCustomerId].listTabData

this.isShowZuiJIn = this.histroyListTabData[this.teamCustomerId].isShowZuiJIn

this.zuijinData = this.histroyListTabData[this.teamCustomerId].zuijinData

this.topThreeTab = this.histroyListTabData[this.teamCustomerId].topThreeTab

} else {

this.listTabData = listTabData

this.histroyListTabData[this.teamCustomerId] = {

listTabData: listTabData,

isShowZuiJIn: this.isShowZuiJIn,

zuijinData: this.zuijinData,

topThreeTab: this.topThreeTab

}

if (this.histroyListTabData['TD']) {

this.topThreeTab = this.histroyListTabData['TD'].topThreeTab

} else {

this.listTabData = listTabData

this.histroyListTabData['TD'] = {

topThreeTab: this.topThreeTab

}

this.listTab = this.listTabData[this.topThreeTab]

getListData (num, num2) {

if (num2 === 1) {

this.pageNumber = 1

}

let prjParams = {

// DAT_TYP: 'ZB', //tab名称

page: this.pageNumber,

count: '20',

// BGN_DTE: '', //最近相关事件段

// END_DTE: '', //最近相关事件段

// type: 'member', // 团队类型

// id: '', // 团队id

// ORD_BY: 'BGN_DTE', //排序名称

// ORD_DIR: 'desc', //排序状态

// CLT_NAM: '', //搜索框名称

}

if (this.isMyShow) {

prjParams.type = 'my'

prjParams.id = 'my'

} else if (this.isTeamShow) {

prjParams.type = 'member'

prjParams.id = this.teamCustomerId

}

prjParams.topThreeTab = this.topThreeTab // 后面要删除

if (this.isShowZuiJIn) {

let filterZUIJIN = {'PRJ': 'PF', 'CNT': 'YMQ', 'LON': 'YTF'}

prjParams.DAT_TYP = filterZUIJIN[this.topThreeTab]

prjParams.startDate = this.zuijinData[this.topThreeTab].startDate // 后面要删除

prjParams.endDate = this.zuijinData[this.topThreeTab].endDate // 后面要删除

prjParams.BGN_DTE = prjParams.startDate ? (new Date(prjParams.startDate).getMonth() + 1) : ''

prjParams.END_DTE = prjParams.endDate ? (new Date(prjParams.endDate).getMonth() + 1) : ''

} else {

prjParams.DAT_TYP = this.listTab.filter((v) => { return v.tab })[0].queryCode

prjParams.startDate = '' // 后面要删除

prjParams.endDate = '' // 后面要删除

prjParams.BGN_DTE = ''

prjParams.END_DTE = ''

}

let flagData = ''

let flagIndex = ''

if (this.histroyData && this.histroyData.length) {

this.histroyData.forEach((v, i) => {

let flag = (prjParams.type === v.type && prjParams.id === v.id && prjParams.topThreeTab === v.topThreeTab && prjParams.DAT_TYP === v.DAT_TYP)

if (flag && prjParams.startDate && prjParams.endDate) {

flag = (prjParams.startDate === v.startDate && prjParams.endDate === v.endDate)

}

console.log(flag)

if (flag) {

flagData = v

flagIndex = i

}

})

}

if (flagData && num !== 1) {

prjParams.ORD_BY = flagData.ORD_BY

prjParams.ORD_DIR = flagData.ORD_DIR

prjParams.CLT_NAM = flagData.CLT_NAM

prjParams.topThreeTab = flagData.topThreeTab // 后面要删除

this.renderValueFn(prjParams)

} else {

prjParams.ORD_BY = this.orderTab.filter((v) => { return v.type !== '0' })[0].name

let filterX = {2: 'asc', 1: 'desc', 0: ''}

prjParams.ORD_DIR = filterX[this.orderTab.filter((v) => { return v.type !== '0' })[0].type]

prjParams.CLT_NAM = this.inputValue.trim()

}

if (flagData) {

this.histroyData.splice(flagIndex, 1, prjParams)

} else {

this.histroyData.push(prjParams)

}

prjParams = JSON.parse(JSON.stringify(prjParams))

delete prjParams.topThreeTab

delete prjParams.startDate

delete prjParams.endDate

console.log(prjParams)

if (this.topThreeTab === 'PRJ') {

// this.getPrjList(null, num2, prjParams)

}

// getPrjList(refresh: boolean, num: Number, prjParams: any): void {

// if (num === 1) {

// this.isFooter = false;

// }

// this.projectManageService.prjList(prjParamss).pipe(

// debounceTime(3000),

// distinctUntilChanged()

// ).subscribe(

// result => {

// console.log('getPrjList', result);

// if (num === 1) {

// this.prjList = []

// }

// this.prjList = [...this.prjList, ...result.list];

// console.log('this.prjList', this.prjList);

// if (this.prjParams.page < result.total) {

// this.isFooter = false;

// this.pageNumber++

// } else {

// this.isFooter = true;

// }

// },

// error => {

// if (num === 1) {

// this.prjList = []

// }

// );

// }

// getCntList(null, num2, prjParams) {

// this.projectManageService.contList(this.cntParams).pipe(

// debounceTime(3000),

// distinctUntilChanged()

// ).subscribe(

// result => {

// this.cntList = result.list;

// console.log('this.cntListthis.cntListthis.cntList', this.cntList);

// });

// }

// 回显 input 最近升降序

renderValueFn (prjParams) {

this.orderTab.forEach((v, i) => {

if (v.name === prjParams.ORD_BY) {

if (prjParams.ORD_DIR === 'asc') {

v.type = '2'

} else if (prjParams.ORD_DIR === 'desc') {

v.type = '1'

} else {

v.type = '0'

}

} else {

v.type = '0'

}

})

this.inputValue = prjParams.CLT_NAM

// 清空 input 最近升降序

clearValueFn () {

this.inputValue = ''

this.orderTab.forEach((v, i) => {

if (i === 0) {

v.type = '1'

} else {

v.type = '0'

}

})

// input

inputValueFn () {

this.getListData(1, 1)

// 升降序

orderSelect (item) {

this.orderTab.forEach((v) => {

if (v.name === item.name) {

if (v.type === '0') {

v.type = '1'

} else if (v.type === '1') {

v.type = '2'

} else if (v.type === '2') {

v.type = '1'

}

} else {

v.type = '0'

}

})

this.getListData(1, 1)

// 选择日期

monthChange (date) {

this.showMenu = false

this.isShowZuiJIn = true

this.zuijinData[this.topThreeTab].startDate = this.format(date)

this.zuijinData[this.topThreeTab].endDate = this.format(date)

this.listTab.forEach((v) => {

v.tab = false

})

if (this.isMyShow) {

if (this.histroyListTabData['my']) {

this.histroyListTabData['my'].isShowZuiJIn = this.isShowZuiJIn

this.histroyListTabData['my'].zuijinData = this.zuijinData

}

} else if (this.isTeamShow) {

if (this.histroyListTabData[this.teamCustomerId]) {

this.histroyListTabData[this.teamCustomerId].isShowZuiJIn = this.isShowZuiJIn

this.histroyListTabData[this.teamCustomerId].zuijinData = this.zuijinData

}

this.clearValueFn()

this.getListData(2, 1)

// 年季月格式化

format (date) {

return date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate()

// 点击日期

clickMonth () {

this.showMenu = true

// tabList切换

changeTab (item) {

this.listTab.forEach((v) => {

v.tab = false

if (v.queryCode === item.queryCode) {

item.tab = true

}

})

this.isShowZuiJIn = false

if (this.isMyShow) {

if (this.histroyListTabData['my']) {

this.histroyListTabData['my'].isShowZuiJIn = this.isShowZuiJIn

}

} else if (this.isTeamShow) {

if (this.histroyListTabData[this.teamCustomerId]) {

this.histroyListTabData[this.teamCustomerId].isShowZuiJIn = this.isShowZuiJIn

}

this.clearValueFn()

this.getListData(2, 1)

// 项目合同点击

prjManageClick (item) {

this.topThreeTab = item

if (this.isMyShow) {

if (this.histroyListTabData['my']) {

this.histroyListTabData['my'].topThreeTab = this.topThreeTab

}

} else if (this.isTeamShow) {

if (this.histroyListTabData['TD']) {

this.histroyListTabData['TD'].topThreeTab = this.topThreeTab

}

this.listTab = this.listTabData[this.topThreeTab]

this.orderTab = this.orderTabData[this.topThreeTab]

this.filterLabel()

this.clearValueFn()

this.getListData(2, 1)

// 一级点击

selectPrimaryNode (index) {

this.primaryNodeIndex = index

this.filterSecondaryNode = this.filterSecondaryNodeFather[this.filterPrimaryNode[this.primaryNodeIndex].value]

if (!(this.filterSecondaryNode && this.filterSecondaryNode.length)) {

this.primaryNodeIndexOld = this.primaryNodeIndex

this.teamCustomerTitle = this.filterPrimaryNode[index].name

this.teamCustomerId = this.filterPrimaryNode[index].value

this.isFilterShow = false

this.renderTabList(1)

this.filterLabel()

this.clearValueFn()

this.getListData(2, 1)

}

// 二级点击

selectSecondaryNode (index) {

this.isFilterShow = false

this.primaryNodeIndexOld = this.primaryNodeIndex

this.primarySecondNodeIndex = index

this.teamCustomerTitle = this.filterSecondaryNode[index].name

this.teamCustomerId = this.filterSecondaryNode[index].value

this.renderTabList(1)

this.filterLabel()

this.clearValueFn()

this.getListData(2, 1)

// 我的

showMyCustomer() {

this.isMyShow = true

this.isTeamShow = false

this.renderTabList()

this.filterLabel()

this.clearValueFn()

this.getListData(2, 1)

filterLabel () {

this.listTab.forEach((v, i) => {

if (i === 0) {

let obj = {

PRJ: '我主办',

PRJT: '团队主办',

CNT: '我主办',

CNTT: '团队主办',

LON: '我投放',

LONT: '团队投放'

}

if (this.isTeamShow) {

v.name = obj[this.topThreeTab + 'T']

} else if (this.isMyShow) {

v.name = obj[this.topThreeTab]

}

})

// 团队

showTeamCustomer () {

if (this.isTeamShow) {

this.isFilterShow = true

this.primaryNodeIndex = this.primaryNodeIndexOld

this.filterSecondaryNode = this.filterSecondaryNodeFather[this.filterPrimaryNode[this.primaryNodeIndex].value]

} else {

this.isTeamShow = true

this.isMyShow = false

this.renderTabList()

this.filterLabel()

this.clearValueFn()

this.getListData(2, 1)

}

})

</script>

</html>