gz-att-web/src/views/process/requestReport/index.vue

826 lines
29 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="日期">
<el-date-picker
v-model="dateRange"
style="width: 240px"
value-format="yyyy-MM-dd"
type="daterange"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
:clearable="false"
></el-date-picker>
</el-form-item>
<el-form-item label="姓名">
<el-input
v-model="queryParams.userName"
placeholder="请输入姓名"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="类型" prop="examineStatus">
<el-select
v-model="queryParams.leaveTypes"
placeholder="类型" style="width: 95%">
<el-option
v-for="item in leaveTypeList"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
>导出</el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="tableList" @selection-change="handleSelectionChange">
<!-- <el-table-column type="selection" width="55" align="center" /> -->
<el-table-column label="序号" align="center" width="70" type="index">
<template slot-scope="scope">
<span>{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}</span>
</template>
</el-table-column>
<el-table-column label="姓名" align="center" prop="userName" width="80"/>
<el-table-column label="职务" align="center" prop="postName" :show-overflow-tooltip="true" width="160">
</el-table-column>
<el-table-column label="类型" align="center" prop="leaveType" :show-overflow-tooltip="true" width="150"/>
<el-table-column label="外出时间" align="center" prop="startDate" :show-overflow-tooltip="true" width="180"/>
<el-table-column label="拟返回时间" align="center" prop="endDate" :show-overflow-tooltip="true" width="180"/>
<el-table-column label="地点" align="center" prop="location" :show-overflow-tooltip="true" width="180"/>
<el-table-column label="事由" align="center" prop="leaveReason" :show-overflow-tooltip="true" width="80"/>
<el-table-column label="是否请示领导同意" align="center" prop="isAgree" :show-overflow-tooltip="true" width="80">
<template slot-scope="scope">
<div>{{ scope.row.isAgree }}
<span v-show="scope.row.isAgree==='0'">否</span>
<span v-show="scope.row.isAgree==='1'">是</span>
</div>
</template>
</el-table-column>
<el-table-column label="代理主持工作人员" align="center" prop="hostUserId" :show-overflow-tooltip="true" width="150"/>
<el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" width="150"/>
<el-table-column label="操作" align="center" class-name="small-padding" >
<template slot-scope="scope">
<el-button
size="mini" type="primary"
v-if="scope.row.leaveType==='出差报备' || scope.row.leaveType==='休假'"
v-hasPermi="['flow:holiday:edit']"
@click="handleUpdate(scope.row)"
>修改</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!-- 出差对话框 -->
<el-dialog :title="title" :visible.sync="open" width="900px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="130px">
<el-row>
<el-col :span="12">
<el-form-item label="姓名:" prop="userName">
<el-input v-model="form.userName" :readonly="true"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="职位:" prop="postName">
<el-input v-model="form.postName" :readonly="true"/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="所属部门:" prop="orgId">
<el-select v-model="form.orgId" @change="changDept">
<el-option
v-for="item in orgList"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="出行人:" prop="orgHeadUserIdList">
<el-select v-model="form.orgHeadUserIdList" multiple placeholder="部门负责人" filterable clearable style="width: 100%;">
<el-option
v-for="item in personOptions"
:key="item.userIds"
:label="item.userName"
:value="item.userIds"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item label="出差开始时间:" prop="leaveStartDate">
<el-date-picker
v-model="form.leaveStartDate" :clearable="false"
type="date" value-format="yyyy-MM-dd" style="width: 100%;" @change="handleDateChange"
placeholder="出差开始时间" :pickerOptions="startPickerOptions">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item prop="leaveStartInterval" label-width="0px">
<el-select v-model="form.leaveStartInterval" style="width: 80%;margin-left: 10px;"
@change="handleDateChange">
<el-option
v-for="item in timeStatusList"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="出差结束时间:" prop="leaveEndDate">
<el-date-picker
v-model="form.leaveEndDate" :clearable="false"
type="date" value-format="yyyy-MM-dd" style="width: 100%;" @change="handleDateChange"
placeholder="出差结束时间" :pickerOptions="endPickerOptions">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item prop="leaveEndInterval" label-width="0px">
<el-select v-model="form.leaveEndInterval" style="width: 80%;margin-left: 10px;"
@change="handleDateChange">
<el-option
v-for="item in timeStatusList"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="出差时长(天)" prop="leaveDuration">
<el-input v-model="form.leaveDuration" :readonly="true"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="地点:" prop="location">
<el-input v-model="form.location" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="是否请示领导同意:" prop="isAgree">
<el-radio-group v-model="form.isAgree">
<el-radio
v-for="item in isAgreeList"
:key="item.id"
:label="item.id"
>{{item.name}}</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="代理主持工作人员:" prop="hostUserId">
<el-select v-model="form.hostUserId" multiple placeholder="人员角色" clearable>
<el-option
v-for="item in userList"
:key="item.userId"
:label="item.userName"
:value="item.userId"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="休假事由:" prop="leaveReason">
<el-input type="textarea" v-model="form.leaveReason" maxlength="200"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row >
<el-col :span="24">
<el-form-item label="备注:" prop="breamks">
<el-input type="textarea" v-model="form.breamks" maxlength="200"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForms">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
<!-- 休假对话框 -->
<el-dialog :title="title" :visible.sync="isView" width="900px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="130px">
<el-row>
<el-col :span="12">
<el-form-item label="姓名:" prop="userName">
<el-input v-model="form.userName" :readonly="true"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="职位:" prop="postName">
<el-input v-model="form.postName" :readonly="true"/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="所属部门:" prop="orgId">
<el-select v-model="form.orgId" @change="changDept">
<el-option
v-for="item in orgList"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="休假类型:" prop="type">
<el-select v-model="form.type" @change="changType" filterable >
<el-option
v-for="item in typeList"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item label="休假开始时间:" prop="leaveStartDate">
<el-date-picker
v-model="form.leaveStartDate" :clearable="false"
type="date" value-format="yyyy-MM-dd" style="width: 100%;" @change="handleDateChange"
placeholder="休假开始时间" :pickerOptions="startPickerOptions">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item prop="leaveStartInterval" label-width="0px">
<el-select v-model="form.leaveStartInterval" style="width: 80%;margin-left: 10px;"
@change="handleDateChange">
<el-option
v-for="item in timeStatusList"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="休假结束时间:" prop="leaveEndDate">
<el-date-picker
v-model="form.leaveEndDate" :clearable="false"
type="date" value-format="yyyy-MM-dd" style="width: 100%;" @change="handleDateChange"
placeholder="休假结束时间" :pickerOptions="endPickerOptions">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item prop="leaveEndInterval" label-width="0px">
<el-select v-model="form.leaveEndInterval" style="width: 80%;margin-left: 10px;"
@change="handleDateChange">
<el-option
v-for="item in timeStatusList"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="休假时长(天)" prop="leaveDuration">
<el-input v-model="form.leaveDuration" :readonly="true"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="地点:" prop="location">
<el-input v-model="form.location" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="是否请示领导同意:" prop="isAgree">
<el-radio-group v-model="form.isAgree">
<el-radio
v-for="item in isAgreeList"
:key="item.id"
:label="item.id"
>{{item.name}}</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="代理主持工作人员:" prop="hostUserId">
<el-select v-model="form.hostUserId" multiple placeholder="人员角色" filterable clearable>
<el-option
v-for="item in userList"
:key="item.userId"
:label="item.userName"
:value="item.userId"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="休假事由:" prop="leaveReason">
<el-input type="textarea" v-model="form.leaveReason" maxlength="200"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row >
<el-col :span="24">
<el-form-item label="备注:" prop="breamks">
<el-input type="textarea" v-model="form.breamks" maxlength="200"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancels"> </el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { listRequestReport,getHoliday,delHoliday,addHoliday,updateHoliday,changeHolidayStatus,exportRequestReport,getPostName,getUserList } from "@/api/process/requestReport";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import {getLeaveReporting, updateLeaveReporting} from "@/api/process/leaveReporting";
import {addEvection, getEvection, getPersonSelect, updateEvection} from "@/api/process/evection";
export default {
name: "rules",
dicts: ['apply_status'],
components: { Treeselect },
data() {
return {
userInfo:this.$store.state.user,
orgList:this.$store.state.user.orgList,
// 遮罩层
loading: false,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 表格数据
tableList: [
{
userName:"张三",
orgName:"公司机关/分公司机关/×××项目部",
createTime:"2024-08-28 1728",
leaveStartDate:"2024-08-29",
leaveStartInterval:"1",
leaveEndDate:"2024-08-29",
leaveEndInterval:"2",
leaveDuration:"1",
examineStatus:"0",
}
],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
isEdit: false,
isView: false,
userList:[],
isAgreeList:[{id:'0',name:'否'},{id:'1',name:'是'}],
timeStatusList:[{id:'1',name:"上午"},{id:'2',name:"下午"}],
// 日期范围
dateRange: [],
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
leaveType:"外出办事",
leaveDate: undefined,
examineStatus: undefined
},
personOptions:[],
typeList: [{id: '病假', name: '病假'}, {id: '年休假', name: '年休假'}, {id: '探亲假', name: '探亲假'},
{id: '事假', name: '事假'}, {id: '产假', name: '产假'}, {id: '婚假', name: '婚假'}, {id: '丧假', name: '丧假'}],
leaveTypeList: [{id: '', name: '请选择'}, {id: '轮休', name: '轮休'}, {id: '临时外出', name: '临时外出'},
{id: '出差', name: '出差'}, {id: '休假', name: '休假'}],
attDayList:[{id:0,label:'周一'},{id:1,label:'周二'},{id:2,label:'周三'},{id:3,label:'周四'},{id:4,label:'周五'},{id:5,label:'周六'},{id:6,label:'周日'}],
// 表单参数
form: {},
// 表单校验
rules: {
orgHeadUserIdList: [
{required: true, message: "出行人不能为空", trigger: "blur"}
],
userName:[
{required: true, message: "申请人不能为空", trigger: "blur" }
],
postName:[
{required: true, message: "职务不能为空", trigger: "blur" }
],
orgId: [
{ required: true, message: "所属部门不能为空", trigger: "blur" }
],
leaveStartDate: [
{ required: true, message: "外出开始时间不能为空", trigger: "blur" }
],
leaveStartInterval: [
{ required: true, message: "不能为空", trigger: "change" }
],
leaveEndDate: [
{ required: true, message: "外出结束时间不能为空", trigger: "blur" }
],
leaveEndInterval: [
{ required: true, message: "不能为空", trigger: "change" }
],
leaveDuration: [
{ required: true, message: "外出时长不能为空", trigger: "blur" }
],
location:[
{ required: true, message: "是否请示领导不能为空", trigger: "blur" }
],
isAgree:[
{ required: true, message: "是否请示领导不能为空", trigger: "blur" }
],
hostUserId:[
{ required: true, message: "代理主持工作人员不能为空", trigger: "blur" }
],
type: [
{required: true, message: "休假类型不能为空", trigger: "blur"}
],
leaveReason: [
{ required: true, message: "外出事由不能为空", trigger: "blur" }
]
},
// 开始日期选择限制
startPickerOptions: {
disabledDate: (v) => {
if(this.form.leaveEndDate) {
return v.getTime() > new Date(this.form.leaveEndDate).getTime()
}
},
},
// 结束日期选择限制
endPickerOptions: {
disabledDate: (v) => {
if(this.form.leaveStartDate) {
return v.getTime() < new Date(this.form.leaveStartDate).getTime() - 86400000; // - 86400000是否包括当天
}
},
},
};
},
created() {
this.getWeekDates();
this.getList();
this.getUserLists();
this.getPersonSelect();
},
methods: {
getWeekDates() {
const now = new Date();
const yesterday = new Date(now);
yesterday.setDate(yesterday.getDate() - 1);
const formattedDate = yesterday.toISOString().split('T')[0];
this.dateRange[0] = formattedDate;
this.dateRange[1] = formattedDate;
},
handleDateChange(){
if(this.form.leaveStartDate&&this.form.leaveEndDate){
let daysNumber = this.daysBetween(this.form.leaveStartDate,this.form.leaveEndDate)
// console.log(daysNumber)
if(this.form.leaveStartInterval==1&&this.form.leaveEndInterval==1){
this.form.leaveDuration=daysNumber+0.5
}else if(this.form.leaveStartInterval==1&&this.form.leaveEndInterval==2){
this.form.leaveDuration=daysNumber+1
}else if(this.form.leaveStartInterval==2&&this.form.leaveEndInterval==2){
this.form.leaveDuration=daysNumber+0.5
}else if(this.form.leaveStartInterval==2&&this.form.leaveEndInterval==1){
this.form.leaveDuration=daysNumber
}
}
},
daysBetween(date1, date2){
const oneDay = 24 * 60 * 60 * 1000;
const date1Ms = new Date(date1).getTime()
const date2Ms = new Date(date2).getTime()
const diff = Math.abs(date1Ms - date2Ms); // 计算两日期的差值
return diff / oneDay; // 返回天数
},
/** 查询列表 */
getList() {
this.loading = true;
console.log(this.dateRange)
if (this.dateRange && this.dateRange.length > 0) {
this.queryParams.startDate = this.dateRange[0]
this.queryParams.endDate = this.dateRange[1]
} else {
this.queryParams.startDate = undefined
this.queryParams.endDate = undefined
}
listRequestReport(this.queryParams).then(response => {
this.tableList = response.rows;
this.total = response.total;
this.loading = false;
}
);
},
getUserLists(){
const Id = this.$store.state.user.id;
getUserList(Id).then(response => {
this.userList = response.data.data;
console.log("userList",this.userList)
});
},
/** 人员选择下拉 */
getPersonSelect() {
getPersonSelect().then(response => {
this.personOptions=response.data
console.log("this.personOptions",this.personOptions);
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 取消按钮
cancels() {
this.isView = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
userId:this.userInfo.id,
userName:this.userInfo.name,
orgId: undefined,
leaveStartDate: undefined,
leaveStartInterval:undefined,
leaveEndDate: undefined,
leaveEndInterval:undefined,
leaveDuration:undefined,
examineStatus:"0",
isAgree: "0",
hostUserId:[],
leaveReason:undefined,
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.queryParams.userName=undefined;
this.queryParams.leaveTypes=undefined;
this.resetForm("queryForm");
this.handleQuery();
},
/** 新增按钮操作 */
handleAdd() {
console.log(this.userInfo)
console.log(this.orgList)
this.reset();
const Id = this.$store.state.user.id;
getPostName(Id).then(response => {
this.form.postName = response.data.postName;
this.open = true;
this.isView = false;
this.title = "新增";
});
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.Id)
this.single = selection.length!=1
this.multiple = !selection.length
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const Id = row.id
const userId = this.$store.state.user.id;
let postName;
getPostName(userId).then(response => {
postName = response.data.postName;
if (row.leaveType==="休假"){
return getLeaveReporting(Id);
} else {
return getEvection(row.uuId);
}
}).then(holidayResponse => {
// 更新表单的 holiday 信息
this.form = holidayResponse.data;
console.log(this.form);
// 转换 hostUserId 字段为整数数组
let numArr = this.form.hostUserId.split(",");
let num = numArr.map(item => parseInt(item)); // 使用 map 简化代码
this.$set(this.form, "hostUserId", num);
this.$set(this.form,"postName",postName)
if(this.form.travelers!=null){
let arr = this.form.travelers.split(',')
let nums = [];
arr.forEach(function (item){
nums.push(item.trim() + "");
})
this.$set(this.form,"orgHeadUserIdList",nums)
}
if (row.leaveType==="休假"){
this.isView = true;
this.open=false;
}else {
this.open = true;
this.isView = false;
}
this.title = "编辑";
});
},
handleView(row) {
this.reset();
const Id = row.id
const userId = this.$store.state.user.id;
let postName;
getPostName(userId).then(response => {
postName = response.data.postName;
return getHoliday(Id);
}).then(holidayResponse => {
// 更新表单的 holiday 信息
this.form = holidayResponse.data;
console.log(this.form);
// 转换 hostUserId 字段为整数数组
let numArr = this.form.hostUserId.split(",");
let num = numArr.map(item => parseInt(item)); // 使用 map 简化代码
this.$set(this.form, "hostUserId", num);
this.$set(this.form,"postName",postName)
this.open = true;
this.isView = true;
this.title = "查看";
});
},
//选择部门
changDept(e){
console.log(e)
this.orgList.forEach(item=>{
if(item.id==e){
this.form.orgName = item.name
}
})
},
//选择休假类型
changType(e) {
console.log(e)
this.orgList.forEach(item => {
if (item.id == e) {
this.form.type = item.name
}
})
},
/** 休假提交按钮 */
submitForm: function() {
console.log(this.form)
this.$refs["form"].validate(valid => {
if (valid) {
console.log(this.form)
var list = this.form.hostUserId.join(",");
this.form.hostUserId = list;
this.form.examineStatus=0
updateLeaveReporting(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.isView = false;
this.getList();
});
}
});
},
/** 出差按钮 */
submitForms: function () {
console.log(this.form)
this.$refs["form"].validate(valid => {
if (valid) {
console.log(this.form)
var list = this.form.hostUserId.join(",");
this.form.hostUserId = list;
var lists = this.form.orgHeadUserIdList.join(",");
this.form.travelers = lists;
this.form.examineStatus = 0
updateEvection(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
}
});
},
handleBack(row) {
this.$modal.confirm('是否确认撤回该申请?').then(function() {
let param = {
id:row.id,
examineStatus:'3',
}
changeHolidayStatus(param).then(response => {
this.getList();
this.$modal.msgSuccess("撤回成功");
});
})
},
/** 删除按钮操作 */
handleDelete(row) {
const Ids = row.id;
this.$modal.confirm('是否确认删除该申请?').then(function() {
return delHoliday(Ids);
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {});
},
/** 导出按钮操作 */
handleExport() {
this.queryParams.exportType="查询";
exportRequestReport(this.queryParams).then(res => {
this.downloadFile({ fileName: `领导干部请示报备统计报表_${new Date().getTime()}.xlsx`, fileData: res, fileType: 'application/vnd.ms-excel;charset=utf-8' })
})
},
}
};
</script>