gz-att-web-new/src/views/process/outApply/index.vue

680 lines
23 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" id="outApply">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="申请时间" prop="leaveDate">
<el-date-picker
v-model="queryParams.leaveDate" :clearable="false"
type="date" value-format="yyyy-MM-dd" style="width: 95%"
placeholder="选择申请时间">
</el-date-picker>
</el-form-item>
<el-form-item label="审批状态" prop="examineStatus">
<el-select
v-model="queryParams.examineStatus"
placeholder="审批状态" style="width: 95%">
<el-option
v-for="dict in dict.type.apply_status"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</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-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPermi="['flow:outApply:add']"
>新增
</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
>导出
</el-button>
</el-col>
<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="80" 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="100"/>
<el-table-column label="所属部门" align="center" prop="orgName" :show-overflow-tooltip="true" width="240">
</el-table-column>
<el-table-column label="申请时间" align="center" prop="createTime" :show-overflow-tooltip="true" width="180"/>
<el-table-column label="外出开始时间" align="center" prop="leaveStartDate" :show-overflow-tooltip="true"
width="180">
<template slot-scope="scope">
<div>{{ scope.row.leaveStartDate }}
<span v-show="scope.row.leaveStartInterval=='1'">上午</span>
<span v-show="scope.row.leaveStartInterval=='2'">下午</span>
</div>
</template>
</el-table-column>
<el-table-column label="外出结束时间" align="center" prop="leaveEndDate" :show-overflow-tooltip="true"
width="180">
<template slot-scope="scope">
<div>{{ scope.row.leaveEndDate }}
<span v-show="scope.row.leaveEndInterval=='1'">上午</span>
<span v-show="scope.row.leaveEndInterval=='2'">下午</span>
</div>
</template>
</el-table-column>
<el-table-column label="外出时长(天)" align="center" prop="leaveDuration" :show-overflow-tooltip="true"
width="180"/>
<el-table-column label="审批状态" align="center" prop="examineStatus" :show-overflow-tooltip="true" width="100">
<template slot-scope="scope">
<dict-tag :options="dict.type.apply_status" :value="scope.row.examineStatus"/>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding">
<template slot-scope="scope">
<el-button
size="mini" type="primary"
v-if="scope.row.examineStatus==3"
v-hasPermi="['flow:outApply:edit']"
@click="handleUpdate(scope.row)"
>编辑
</el-button>
<el-button
size="mini"
v-hasPermi="['flow:outApply:query']"
@click="handleView(scope.row)"
>详情
</el-button>
<el-button
size="mini" type="primary"
v-if="scope.row.examineStatus==0"
v-hasPermi="['flow:outApply:edit']"
@click="handleBack(scope.row)"
>撤回
</el-button>
<el-button
size="mini" type="danger"
v-if="scope.row.examineStatus==2||scope.row.examineStatus==3"
v-hasPermi="['flow:outApply:remove']"
@click="handleDelete(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="1000px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="170px">
<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" :disabled="isView" style="width: 100%;">
<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="8">
<el-form-item label="外出开始时间:" prop="leaveStartDate">
<el-date-picker
v-model="form.leaveStartDate" :clearable="false" :disabled="isView"
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;" :disabled="isView"
@change="handleDateChanges">
<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="8">
<el-form-item label="外出结束时间:" prop="leaveEndDate">
<el-date-picker
v-model="form.leaveEndDate" :clearable="false" :disabled="isView"
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;" :disabled="isView"
@change="handleDateChanges">
<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="12">
<el-form-item label="外出时长(天)" prop="leaveDuration">
<el-input v-model="form.leaveDuration" :readonly="true"/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="地点:" prop="location">
<el-input
v-model="form.location" :clearable="false" style="width: 100%;"
placeholder="请输入地点">
</el-input>
</el-form-item>
</el-col>
<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-row>
<el-row>
<el-col :span="12">
<el-form-item label="代理主持工作人员:" prop="hostUserId">
<el-select v-model="form.hostUserId" multiple placeholder="请选择" filterable clearable
style="width: 100%;">
<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="100" :readonly="isView"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="备注:" prop="remark">
<el-input type="textarea" v-model="form.remark" maxlength="100" :readonly="isView"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row v-if="form.examineOpinion">
<el-col :span="24">
<el-form-item label="审批意见:" prop="examineOpinion">
<el-input type="textarea" v-model="form.examineOpinion" maxlength="100" :readonly="isView"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm" v-if="!isView"> </el-button>
<el-button @click="cancel"> </el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {
listHoliday,
getHoliday,
delHoliday,
addHoliday,
updateHoliday,
changeHolidayStatus,
exportHoliday,
getPostName,
getUserList
} from "@/api/process/rest";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import {getDaysDate} from "@/api/process/leaveReporting";
export default {
name: "OutApply",
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: [{value: '1', label: '固定班制'}, {value: '2', label: '自由工时'}],
attDayList: [{id: 0, label: '周一'}, {id: 1, label: '周二'}, {id: 2, label: '周三'}, {
id: 3,
label: '周四'
}, {id: 4, label: '周五'}, {id: 5, label: '周六'}, {id: 6, label: '周日'}],
// 表单参数
form: {},
// 表单校验
rules: {
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"}
],
leaveReason: [
{required: true, message: "外出事由不能为空", trigger: "blur"}
]
},
// 开始日期选择限制
startPickerOptions: {
disabledDate: (v) => {
const today = new Date()
today.setHours(0, 0, 0, 0)
if (this.form.leaveEndDate) {
const end = new Date(this.form.leaveEndDate);
end.setHours(0, 0, 0, 0);
return v.getTime() > end.getTime() || v.getTime() < today.getTime();
}
return v.getTime() < today.getTime()
},
},
// 结束日期选择限制
endPickerOptions: {
disabledDate: (v) => {
const today = new Date()
today.setHours(0, 0, 0, 0)
if (this.form.leaveStartDate) {
return v.getTime() < new Date(this.form.leaveStartDate).getTime() - 86400000; // - 86400000是否包括当天
}
return v.getTime() < today.getTime()
},
},
daysNumber: "",
};
},
created() {
this.getList();
this.getUserLists();
},
methods: {
async handleDateChange() {
if (this.form.leaveStartDate && this.form.leaveEndDate) {
await this.daysBetween(this.form.leaveStartDate, this.form.leaveEndDate)
if(this.form.leaveStartDate && this.form.leaveEndDate){
this.handleDateChanges()
}
}
},
handleDateChanges() {
if (this.form.leaveStartDate && this.form.leaveEndDate) {
if (this.form.leaveStartInterval == 1 && this.form.leaveEndInterval == 1) {
this.form.leaveDuration = Number(this.daysNumber) - 0.5
} else if (this.form.leaveStartInterval == 1 && this.form.leaveEndInterval == 2) {
this.form.leaveDuration = this.daysNumber
} else if (this.form.leaveStartInterval == 2 && this.form.leaveEndInterval == 2) {
this.form.leaveDuration = Number(this.daysNumber) - 0.5
} else if (this.form.leaveStartInterval == 2 && this.form.leaveEndInterval == 1) {
this.form.leaveDuration = this.daysNumber
}
}
},
async daysBetween(date1, date2) {
var data = {
"leaveStartDate": date1,
"leaveEndDate": date2,
}
await getDaysDate(data).then(response => {
this.daysNumber = response.data.date;
});
// 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;
listHoliday(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)
});
},
// 取消按钮
cancel() {
this.open = 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,
leaveType: "临时外出",
examineStatus: "0",
isAgree: "0",
hostUserId: [],
leaveReason: undefined,
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.dateRange = [];
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;
return getHoliday(Id);
}).then(holidayResponse => {
// 更新表单的 holiday 信息
this.form = holidayResponse.data;
console.log(this.form);
// 转换 hostUserId 字段为整数数组
if (this.form.hostUserId == null) {
this.$set(this.form, "hostUserId", 0);
} else {
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 = 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 字段为整数数组
if (this.form.hostUserId == null) {
this.$set(this.form, "hostUserId", 0);
} else {
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
}
})
},
/** 提交按钮 */
submitForm: function () {
console.log(this.form)
this.$refs["form"].validate(valid => {
if (valid) {
console.log(this.form)
let formData = _.cloneDeep(this.form);
var list = this.form.hostUserId.join(",");
// 将字符串分割成数组
const userIdArray = list.split(',');
// 检查数组中是否同时存在0和其他非0的值
const containsZero = userIdArray.includes('0');
const containsOtherValues = userIdArray.some(id => id !== '0');
if (containsZero && containsOtherValues) {
this.$modal.msgError("选择’/‘后不能在选择其他人员");
return;
}
formData.hostUserId = list;
if (this.form.id != undefined) {
formData.examineStatus = 0
updateHoliday(formData).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addHoliday(formData).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
handleBack(row) {
var that = this;
this.$modal.confirm('是否确认撤回该申请?').then(function () {
let param = {
id: row.id,
examineStatus: '3',
}
changeHolidayStatus(param).then(response => {
that.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 = "查询";
exportHoliday(this.queryParams).then(res => {
this.downloadFile({
fileName: `临时外出_${new Date().getTime()}.xlsx`,
fileData: res,
fileType: 'application/vnd.ms-excel;charset=utf-8'
})
})
},
}
};
</script>