提交app
This commit is contained in:
guanj
233
components/Cn-filterCriteria/Cn-filterCriteria.vue
Normal file
233
components/Cn-filterCriteria/Cn-filterCriteria.vue
Normal file
@@ -0,0 +1,233 @@
|
||||
<template>
|
||||
<view class="nav choose">
|
||||
<view class="nav-menu" :class="{ 'nav-menu-active': select.engineeringName }" @click="selectEngineering"
|
||||
>{{
|
||||
// select.engineeringName + '>' + select.projectName + '>' + select.deviceName + '>' + select.lineName ||
|
||||
// '全部工程'
|
||||
select.engineeringName || select.projectName || select.deviceName || select.lineName
|
||||
? [select.engineeringName, select.projectName, select.deviceName, select.lineName]
|
||||
.filter((item) => item && item !== '')
|
||||
.join('>')
|
||||
: '全部工程'
|
||||
}}
|
||||
<uni-icons type="bottom" size="14" :color="select.engineeringName ? '#376cf3' : '#666'"></uni-icons>
|
||||
</view>
|
||||
<!-- 弹框组件 -->
|
||||
<Cn-qianTree
|
||||
ref="qiantree"
|
||||
:selectParent="true"
|
||||
:multiple="false"
|
||||
:range="list"
|
||||
:foldAll="true"
|
||||
@confirm="treeConfirm"
|
||||
@cancel="treeCancel"
|
||||
></Cn-qianTree>
|
||||
<picker
|
||||
mode="date"
|
||||
:value="select.date"
|
||||
:start="startDate"
|
||||
fields="month"
|
||||
:end="endDate"
|
||||
@change="bindDateChange"
|
||||
v-if="showDatetime"
|
||||
>
|
||||
<view class="nav-menu"
|
||||
>{{ select.date }}
|
||||
<uni-icons type="bottom" size="14"></uni-icons>
|
||||
</view>
|
||||
</picker>
|
||||
<uni-datetime-picker v-if="!showDatetime" v-model="select.range" type="daterange" :end="endDate">
|
||||
<view class="nav-menu"
|
||||
>{{ select.range[0] + '至' + select.range[1] }}
|
||||
<uni-icons type="bottom" size="14"></uni-icons>
|
||||
</view>
|
||||
</uni-datetime-picker>
|
||||
<slot />
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import { lineTree } from '@/common/api/device'
|
||||
export default {
|
||||
components: {},
|
||||
props: {
|
||||
level: { type: Number, default: 3 },
|
||||
showDatetime: { type: Boolean, default: true },
|
||||
},
|
||||
data() {
|
||||
const currentDate = this.getDate({
|
||||
format: true,
|
||||
})
|
||||
return {
|
||||
select: {
|
||||
engineeringName: '',
|
||||
engineeringId: '', //工程ID
|
||||
projectName: '',
|
||||
projectId: '', //項目ID
|
||||
deviceName: '',
|
||||
deviceId: '', //设备ID
|
||||
lineName: '',
|
||||
lineId: '', //测点ID
|
||||
date: currentDate,
|
||||
range: ['', ''],
|
||||
},
|
||||
list: [],
|
||||
}
|
||||
},
|
||||
created() {
|
||||
if (!this.showDatetime) {
|
||||
this.select.range = [this.endDate.slice(0, -3) + '-01', this.endDate]
|
||||
}
|
||||
},
|
||||
onShow() {},
|
||||
|
||||
mounted() {},
|
||||
|
||||
methods: {
|
||||
getTree() {
|
||||
this.clear()
|
||||
lineTree().then((res) => {
|
||||
let list = {
|
||||
id: '',
|
||||
pid: '0',
|
||||
pids: '0',
|
||||
name: '全部项目',
|
||||
path: null,
|
||||
provinceId: null,
|
||||
cityId: null,
|
||||
area: null,
|
||||
remark: null,
|
||||
sort: 0,
|
||||
level: 0,
|
||||
comFlag: null,
|
||||
type: null,
|
||||
lineType: null,
|
||||
conType: null,
|
||||
process: null,
|
||||
isTop: 0,
|
||||
children: [],
|
||||
ndid: null,
|
||||
}
|
||||
|
||||
this.list = this.filterTreeByLevel([list, ...res.data])
|
||||
})
|
||||
},
|
||||
// 递归过滤函数：去除level > 2的节点
|
||||
filterTreeByLevel(tree) {
|
||||
// 遍历每一个节点
|
||||
return tree.map((node) => {
|
||||
// 复制当前节点（避免修改原数据）
|
||||
const newNode = { ...node }
|
||||
|
||||
// 如果当前节点有子节点，并且当前节点的level <= 2（因为level=2的节点的子节点是level=3，需要过滤）
|
||||
if (newNode.children && newNode.children.length > 0) {
|
||||
// 递归过滤子节点：只保留子节点中level <= 2的
|
||||
newNode.children = this.filterTreeByLevel(
|
||||
newNode.children.filter((child) => child.level <= this.level),
|
||||
)
|
||||
}
|
||||
|
||||
return newNode
|
||||
})
|
||||
},
|
||||
getDate(type) {
|
||||
const date = new Date()
|
||||
let year = date.getFullYear()
|
||||
let month = date.getMonth() + 1
|
||||
let day = date.getDate()
|
||||
if (type === 'start') {
|
||||
year = year - 10
|
||||
} else if (type === 'end') {
|
||||
year = year
|
||||
}
|
||||
month = month > 9 ? month : '0' + month
|
||||
day = day > 9 ? day : '0' + day
|
||||
|
||||
return this.showDatetime ? `${year}-${month}` : `${year}-${month}-${day}`
|
||||
},
|
||||
bindDateChange(e) {
|
||||
this.select.date = e.detail.value
|
||||
},
|
||||
selectEngineering() {
|
||||
this.$refs.qiantree._show()
|
||||
},
|
||||
|
||||
getProjectList() {},
|
||||
// 确定回调事件
|
||||
treeConfirm(e) {
|
||||
this.clear()
|
||||
|
||||
this.setSelect(e[0].rank, e[0].name, e[0].id)
|
||||
e[0].parents.forEach((item) => {
|
||||
this.setSelect(item.rank, item.name, item.id)
|
||||
})
|
||||
},
|
||||
// 清空
|
||||
clear() {
|
||||
this.select.engineeringName = ''
|
||||
this.select.engineeringId = '' //工程ID
|
||||
this.select.projectName = ''
|
||||
this.select.projectId = '' //項目ID
|
||||
this.select.deviceName = ''
|
||||
this.select.deviceId = '' //设备ID
|
||||
this.select.lineName = ''
|
||||
this.select.lineId = '' //测点ID
|
||||
},
|
||||
setSelect(rank, name, id) {
|
||||
switch (rank) {
|
||||
case 0:
|
||||
this.select.engineeringId = id
|
||||
this.select.engineeringName = name
|
||||
break
|
||||
case 1:
|
||||
this.select.projectId = id
|
||||
this.select.projectName = name
|
||||
break
|
||||
case 2:
|
||||
this.select.deviceId = id
|
||||
this.select.deviceName = name
|
||||
break
|
||||
case 3:
|
||||
this.select.lineId = id
|
||||
this.select.lineName = name
|
||||
break
|
||||
}
|
||||
},
|
||||
// 取消回调事件
|
||||
treeCancel(e) {
|
||||
console.log(e)
|
||||
},
|
||||
},
|
||||
|
||||
computed: {
|
||||
startDate() {
|
||||
return this.getDate('start')
|
||||
},
|
||||
endDate() {
|
||||
return this.getDate('end')
|
||||
},
|
||||
},
|
||||
|
||||
watch: {
|
||||
select: {
|
||||
handler(val, oldVal) {
|
||||
if (this.loading) return
|
||||
this.$emit('select', val)
|
||||
},
|
||||
deep: true,
|
||||
immediate: true,
|
||||
},
|
||||
level: {
|
||||
handler(val, oldVal) {
|
||||
this.getTree()
|
||||
},
|
||||
deep: true,
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
/deep/ .uni-date-editor {
|
||||
width: 360rpx;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user