284 lines
6.0 KiB
Vue
284 lines
6.0 KiB
Vue
<template>
|
||
<view :class="['content',{'gray':store.isgray==1}]">
|
||
<uni-card>
|
||
<view>
|
||
<uni-row v-show="!username">
|
||
<uni-col :span="12"><uni-title title="所属单位" align="left" type="h5"></uni-title></uni-col>
|
||
<uni-col :span="12"><uni-title title="重置" align="right" type="h5" color="#666666"
|
||
@click="reset"></uni-title></uni-col>
|
||
</uni-row>
|
||
<uni-row v-show="!username">
|
||
<uni-col :span="24">
|
||
<trq-depart-select v-model="orgCode" returnCodeOrID="orgCode"
|
||
@change="departChange"></trq-depart-select>
|
||
</uni-col>
|
||
</uni-row>
|
||
<uni-row v-show="!username">
|
||
<uni-col :span="12"><uni-title title="姓名" align="left" type="h5"></uni-title></uni-col>
|
||
<uni-col :span="12"><uni-title title="劳动合同号" align="left" type="h5"></uni-title></uni-col>
|
||
</uni-row>
|
||
<uni-row v-show="!username">
|
||
<uni-col :span="12">
|
||
<uni-easyinput v-model="realname" placeholder="姓名模糊查询" @change="Search" @clear="Search"/>
|
||
</uni-col>
|
||
<uni-col :span="12">
|
||
<uni-easyinput v-model="contractNumber" placeholder="劳动合同号查询" @change="Search" @clear="Search"/>
|
||
</uni-col>
|
||
</uni-row>
|
||
<uni-row>
|
||
<uni-col :span="24"><uni-title title="请假时间" align="left" type="h5"></uni-title></uni-col>
|
||
</uni-row>
|
||
<uni-row>
|
||
<uni-col :span="24">
|
||
<uni-datetime-picker v-model="range" type="daterange" rangeSeparator="至" @input="handleInput" />
|
||
</uni-col>
|
||
</uni-row>
|
||
<!-- ECharts图表 -->
|
||
<view class="chart-container">
|
||
<l-echart ref="chart" />
|
||
</view>
|
||
</view>
|
||
</uni-card>
|
||
<view class="list">
|
||
<view class="item" v-for="item,i in list" :key="i"
|
||
@click="jump(`/pages/views/renliziyuan/qingjiaxinxi/detail?id=${item.id}`)">
|
||
<view class="title">
|
||
{{item.username_dictText}}的{{item.type}}申请
|
||
</view>
|
||
<view class="time_box f-row aic">
|
||
<view class="time">
|
||
{{item.sysOrgCode_dictText}}
|
||
</view>
|
||
<view class="f-row aic no-wrap-right">
|
||
{{item.begintime}}至{{item.endtime}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import {
|
||
ref
|
||
} from 'vue';
|
||
import {
|
||
onReachBottom,
|
||
onLoad
|
||
} from '@dcloudio/uni-app';
|
||
import {
|
||
queryLeaveListApi,
|
||
countByOrgApi
|
||
} from '@/api/leaveApi.js';
|
||
import {
|
||
getCategoryItemsApi
|
||
} from '@/api/api.js';
|
||
import {
|
||
useStore
|
||
} from '@/store';
|
||
|
||
import * as echarts from 'echarts';
|
||
const chart = ref(null);
|
||
const chartOption = ref({});
|
||
const orgCode = ref('') //部门树选中的orgCode
|
||
const range = ref('') //日期查询
|
||
const type = ref('') //图表点击事件
|
||
const username = ref('') //用户名
|
||
const realname = ref('') //姓名查询
|
||
const contractNumber = ref('') //劳动合同号查询
|
||
const timeout = ref(null)
|
||
const store = useStore();
|
||
const list = ref([])
|
||
let pageNo = 1
|
||
let pageSize = 15
|
||
let loading = false
|
||
|
||
onLoad((options) => {
|
||
if (options.username) {
|
||
username.value = options.username
|
||
}
|
||
})
|
||
|
||
function departChange(e) {
|
||
orgCode.value = e
|
||
queryLeave()
|
||
}
|
||
|
||
function reset() {
|
||
orgCode.value = null
|
||
range.value = []
|
||
type.value = ''
|
||
username.value = ''
|
||
realname.value = ''
|
||
contractNumber.value = ''
|
||
queryLeave()
|
||
}
|
||
|
||
function handleInput(e) {
|
||
queryLeave()
|
||
}
|
||
|
||
function Search() {
|
||
if (timeout.value) {
|
||
clearTimeout(timeout.value);
|
||
}
|
||
timeout.value = setTimeout(() => {
|
||
queryLeave()
|
||
}, 300); // 300ms 防抖时间
|
||
}
|
||
|
||
function clearSearch() {
|
||
console.log('-----',realname.value)
|
||
console.log('-----',contractNumber.value)
|
||
|
||
}
|
||
|
||
const queryLeave = (e) => {
|
||
let param = {
|
||
sysOrgCode: orgCode.value,
|
||
begin: range.value[0],
|
||
end: range.value[1],
|
||
type: type.value,
|
||
username: username.value,
|
||
realname: realname.value,
|
||
contractNumbers: contractNumber.value
|
||
}
|
||
if (e == 1) { // 下拉刷新时，pageNo++
|
||
pageNo++;
|
||
} else { // list置空，pageNo置1
|
||
list.value = [];
|
||
pageNo = 1;
|
||
if (e != 2) {
|
||
// 如果不是图表点击事件，更新图表
|
||
setChartOption(param);
|
||
}
|
||
}
|
||
// 更新数据
|
||
queryLeaveList(param);
|
||
}
|
||
|
||
const queryLeaveList = (params = {}) => {
|
||
loading = true
|
||
queryLeaveListApi({
|
||
...params,
|
||
pageNo,
|
||
pageSize
|
||
}).then((res) => {
|
||
if (res.success) {
|
||
list.value = [...list.value, ...res.result.records]
|
||
}
|
||
|
||
loading = false
|
||
}).catch((err) => {})
|
||
}
|
||
|
||
// 初始化图表
|
||
const initChart = () => {
|
||
setTimeout(async () => {
|
||
if (!chart.value) return;
|
||
const myChart = await chart.value.init(echarts);
|
||
myChart.setOption(chartOption.value);
|
||
myChart.on('click', (params) => {
|
||
// 根据 params 处理点击事件
|
||
type.value = params.name
|
||
queryLeave(2);
|
||
});
|
||
}, 300);
|
||
};
|
||
|
||
const setChartOption = (e) => {
|
||
countByOrgApi(e).then(res => {
|
||
chartOption.value = {
|
||
tooltip: {
|
||
trigger: 'item'
|
||
},
|
||
series: [{
|
||
type: 'pie',
|
||
radius: '50%',
|
||
data: res.result
|
||
}]
|
||
}
|
||
initChart()
|
||
})
|
||
}
|
||
|
||
const jump = (url) => {
|
||
uni.navigateTo({
|
||
url: url
|
||
});
|
||
}
|
||
|
||
const back = () => {
|
||
uni.navigateBack()
|
||
}
|
||
|
||
onReachBottom(() => {
|
||
if (loading) return
|
||
queryLeave(1); //下拉刷新传1
|
||
})
|
||
</script>
|
||
|
||
<style>
|
||
page {
|
||
background-color: #f8f8f8;
|
||
}
|
||
</style>
|
||
<style lang="scss" scoped>
|
||
.content {
|
||
padding-top: v-bind(cusnavbarheight);
|
||
padding-bottom: 24rpx;
|
||
|
||
}
|
||
|
||
.list {
|
||
padding: 0 30rpx;
|
||
|
||
.item {
|
||
background: #FFFFFF;
|
||
box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(0, 0, 0, 0.5);
|
||
border-radius: 16rpx;
|
||
padding: 30rpx;
|
||
margin-top: 24rpx;
|
||
position: relative;
|
||
|
||
.dot {
|
||
width: 12rpx;
|
||
height: 12rpx;
|
||
background: #ED361D;
|
||
position: absolute;
|
||
border-radius: 50%;
|
||
left: 9rpx;
|
||
top: 44rpx;
|
||
}
|
||
|
||
.title {
|
||
margin-bottom: 20rpx;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
.time_box {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
/* 均匀分布子元素 */
|
||
font-size: 24rpx;
|
||
color: #888888;
|
||
|
||
.time {
|
||
margin-right: 62rpx;
|
||
width: 50%;
|
||
}
|
||
|
||
.no-wrap-right {
|
||
white-space: nowrap;
|
||
text-align: right;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.back {
|
||
padding: 0 30rpx;
|
||
}
|
||
</style> |