553 lines
12 KiB
Vue
553 lines
12 KiB
Vue
<!--
|
|
* @Author: zwq
|
|
* @Date: 2025-10-11 14:27:37
|
|
* @LastEditors: zwq
|
|
* @LastEditTime: 2025-10-29 14:50:16
|
|
* @Description:
|
|
-->
|
|
<template>
|
|
<div class="app-container">
|
|
<div class="searchBarBox">
|
|
<el-form
|
|
:inline="true"
|
|
ref="searchBarForm"
|
|
:model="formInline"
|
|
class="searchBar">
|
|
<span class="blue-block" />
|
|
<el-form-item label="计划编号" prop="code">
|
|
<el-input
|
|
v-model="formInline.code"
|
|
clearable
|
|
size="small"
|
|
placeholder="请输入计划编号" />
|
|
</el-form-item>
|
|
<el-form-item label="计划名称" prop="name">
|
|
<el-input
|
|
v-model="formInline.name"
|
|
clearable
|
|
size="small"
|
|
placeholder="请输入计划名称" />
|
|
</el-form-item>
|
|
<el-form-item label="开始时间" prop="startDay">
|
|
<el-date-picker
|
|
v-model="formInline.startDay"
|
|
type="datetime"
|
|
placeholder="选择日期时间"></el-date-picker>
|
|
</el-form-item>
|
|
<el-form-item label="结束时间" prop="endDay">
|
|
<el-date-picker
|
|
v-model="formInline.endDay"
|
|
type="datetime"
|
|
placeholder="选择日期时间"></el-date-picker>
|
|
</el-form-item>
|
|
<el-form-item label="部门" prop="deptId">
|
|
<dept-select
|
|
style="width: 200px"
|
|
ref="deptSelect"
|
|
@DeptId="setDeptId"></dept-select>
|
|
</el-form-item>
|
|
<el-form-item label="状态" prop="leaderName">
|
|
<el-select v-model="formInline.status" placeholder="请选择状态">
|
|
<el-option
|
|
v-for="item in options"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button
|
|
type="primary"
|
|
size="small"
|
|
v-hasPermi="['base:group-scheduling-plan:query']"
|
|
@click="buttonClick({ btnName: 'search' })">
|
|
查询
|
|
</el-button>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<span class="separateStyle"
|
|
v-hasPermi="['base:group-scheduling-plan:query']"></span>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button size="small" @click="buttonClick({ btnName: 'reset' })">
|
|
重置
|
|
</el-button>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<span class="separateStyle"
|
|
v-hasPermi="['base:group-scheduling-plan:create']"></span>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button
|
|
type="success"
|
|
size="small"
|
|
:plain="true"
|
|
v-hasPermi="['base:group-scheduling-plan:create']"
|
|
@click="buttonClick({ btnName: 'add' })">
|
|
新增
|
|
</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
<base-table
|
|
v-loading="dataListLoading"
|
|
:table-props="tableProps"
|
|
:page="listQuery.pageNo"
|
|
:limit="listQuery.pageSize"
|
|
:table-data="tableData"
|
|
@emitFun="getDataList">
|
|
<method-btn
|
|
v-if="tableBtn.length"
|
|
slot="handleBtn"
|
|
:width="270"
|
|
label="操作"
|
|
:method-list="tableBtn"
|
|
@clickBtn="handleClick" />
|
|
</base-table>
|
|
<pagination
|
|
:limit.sync="listQuery.pageSize"
|
|
:page.sync="listQuery.pageNo"
|
|
:total="listQuery.total"
|
|
@pagination="getDataList" />
|
|
<base-dialog
|
|
:dialogTitle="addOrEditTitle"
|
|
:dialogVisible="addOrUpdateVisible"
|
|
@cancel="handleCancel"
|
|
@confirm="handleConfirm"
|
|
:before-close="handleCancel"
|
|
:destroy-on-close="true"
|
|
append-to-body
|
|
width="60%">
|
|
<add-or-update
|
|
ref="addOrUpdate"
|
|
@setSN="setStepNum"
|
|
@refreshDataList="successSubmit"></add-or-update>
|
|
<template #footer>
|
|
<slot name="footer">
|
|
<el-row slot="footer" type="flex" justify="end">
|
|
<el-col :span="24">
|
|
<el-button
|
|
v-if="stepNum > 1"
|
|
size="small"
|
|
class="btnTextStyle"
|
|
@click="handleConfirm('up')">
|
|
上一步
|
|
</el-button>
|
|
<el-button
|
|
size="small"
|
|
class="btnTextStyle"
|
|
@click="handleCancel">
|
|
取消
|
|
</el-button>
|
|
<el-button
|
|
v-if="stepNum == 3"
|
|
type="primary"
|
|
class="btnTextStyle"
|
|
size="small"
|
|
plain
|
|
@click="successSubmit">
|
|
保存草稿
|
|
</el-button>
|
|
<el-button
|
|
type="primary"
|
|
class="btnTextStyle"
|
|
size="small"
|
|
@click="handleConfirm">
|
|
{{ stepNum < 3 ? '下一步' : '确认并执行' }}
|
|
</el-button>
|
|
</el-col>
|
|
</el-row>
|
|
</slot>
|
|
</template>
|
|
</base-dialog>
|
|
<base-dialog
|
|
:dialogTitle="'排班计划详情'"
|
|
:dialogVisible="detailVisible"
|
|
@cancel="detailCancel"
|
|
:before-close="detailCancel"
|
|
:destroy-on-close="true"
|
|
append-to-body
|
|
width="50%">
|
|
<detail ref="detailRef"></detail>
|
|
<template #footer>
|
|
<slot name="footer">
|
|
<el-row slot="footer" type="flex" justify="end">
|
|
<el-col :span="24">
|
|
<el-button
|
|
size="small"
|
|
class="btnTextStyle"
|
|
@click="detailCancel">
|
|
取消
|
|
</el-button>
|
|
</el-col>
|
|
</el-row>
|
|
</slot>
|
|
</template>
|
|
</base-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import AddOrUpdate from './add-or-updata';
|
|
import deptSelect from './../deptSelect.vue';
|
|
import basicPage from '@/mixins/basic-page';
|
|
import subSpan from './subSpan.vue';
|
|
import subStatus from './subStatus.vue';
|
|
import detail from './detail.vue';
|
|
import { parseTime } from '@/filter/code-filter';
|
|
import {
|
|
getGroupPlanPage,
|
|
deleteGroupPlan,
|
|
copyPlan,
|
|
disablePlan,
|
|
updateScheduleLater,
|
|
} from '@/api/group/Schedule';
|
|
|
|
const tableProps = [
|
|
{
|
|
prop: 'code',
|
|
label: '计划编号',
|
|
width: 140,
|
|
},
|
|
{
|
|
prop: 'name',
|
|
label: '计划名称',
|
|
width: 100,
|
|
},
|
|
{
|
|
prop: 'startDay',
|
|
label: '开始时间',
|
|
filter: parseTime,
|
|
width: 150,
|
|
},
|
|
{
|
|
prop: 'endDay',
|
|
label: '结束时间',
|
|
filter: parseTime,
|
|
width: 150,
|
|
},
|
|
{
|
|
prop: 'shiftType',
|
|
label: '倒班方式',
|
|
filter: (val) => {
|
|
return val ? ['', '长白班', '两班倒', '三班倒'][val] : '-';
|
|
},
|
|
width: 110,
|
|
},
|
|
{
|
|
prop: 'shiftSustainedNum',
|
|
label: '同班次连排',
|
|
width: 110,
|
|
subcomponent: subSpan,
|
|
},
|
|
{
|
|
prop: 'deptName',
|
|
label: '部门',
|
|
},
|
|
{
|
|
prop: 'status',
|
|
label: '计划状态',
|
|
width: 110,
|
|
subcomponent: subStatus,
|
|
},
|
|
{
|
|
prop: 'createTime',
|
|
label: '创建时间',
|
|
filter: parseTime,
|
|
width: 150,
|
|
},
|
|
];
|
|
|
|
export default {
|
|
mixins: [basicPage],
|
|
data() {
|
|
return {
|
|
urlOptions: {
|
|
getDataListURL: getGroupPlanPage,
|
|
deleteURL: deleteGroupPlan,
|
|
},
|
|
tableProps,
|
|
tableBtn: [
|
|
this.$auth.hasPermi('base:group-scheduling-plan:update')?
|
|
{
|
|
type: 'edit',
|
|
btnName: '编辑',
|
|
showParam: {
|
|
type: '&',
|
|
data: [
|
|
{
|
|
type: 'equal',
|
|
name: 'status',
|
|
value: 1,
|
|
},
|
|
],
|
|
},
|
|
}:undefined,
|
|
this.$auth.hasPermi('base:group-scheduling-plan:delete')?
|
|
{
|
|
type: 'delete',
|
|
btnName: '删除',
|
|
showParam: {
|
|
type: '&',
|
|
data: [
|
|
{
|
|
type: 'equal',
|
|
name: 'status',
|
|
value: 1,
|
|
},
|
|
],
|
|
},
|
|
}:undefined,
|
|
this.$auth.hasPermi('base:group-scheduling-plan:query')?
|
|
{
|
|
type: 'detail',
|
|
btnName: '查看',
|
|
showParam: {
|
|
type: '&',
|
|
data: [
|
|
{
|
|
type: 'unequal',
|
|
name: 'status',
|
|
value: 1,
|
|
},
|
|
],
|
|
},
|
|
}:undefined,
|
|
this.$auth.hasPermi('base:group-scheduling-plan:delete')?
|
|
{
|
|
type: 'cancel',
|
|
btnName: '作废',
|
|
showParam: {
|
|
type: '&',
|
|
data: [
|
|
{
|
|
type: 'equal',
|
|
name: 'status',
|
|
value: 2,
|
|
},
|
|
],
|
|
},
|
|
}:undefined,
|
|
this.$auth.hasPermi('base:group-holiday:update')?
|
|
{
|
|
type: 'sync',
|
|
btnName: '同步节假日',
|
|
showParam: {
|
|
type: '&',
|
|
data: [
|
|
{
|
|
type: 'equal',
|
|
name: 'status',
|
|
value: 2,
|
|
},
|
|
{
|
|
type: 'equal',
|
|
name: 'updateFlag',
|
|
value: true,
|
|
},
|
|
],
|
|
},
|
|
}:undefined,
|
|
this.$auth.hasPermi('base:group-scheduling-plan:create')?
|
|
{
|
|
type: 'copy',
|
|
btnName: '复制',
|
|
}:undefined,
|
|
].filter((v) => v),
|
|
tableData: [],
|
|
options: [
|
|
{
|
|
value: '1',
|
|
label: '草稿',
|
|
},
|
|
{
|
|
value: '2',
|
|
label: '已确认',
|
|
},
|
|
{
|
|
value: '3',
|
|
label: '已作废',
|
|
},
|
|
],
|
|
formInline: {
|
|
code: '',
|
|
name: '',
|
|
startDay: '',
|
|
endDay: '',
|
|
deptId: '',
|
|
status: '',
|
|
},
|
|
stepNum: 1, // 新增编辑时当前第几步
|
|
detailVisible: false,
|
|
};
|
|
},
|
|
components: {
|
|
AddOrUpdate,
|
|
deptSelect,
|
|
detail
|
|
},
|
|
created() {},
|
|
methods: {
|
|
buttonClick(val) {
|
|
switch (val.btnName) {
|
|
case 'search':
|
|
const date1 = new Date(this.formInline.startDay).getTime();
|
|
const date2 = new Date(this.formInline.endDay).getTime();
|
|
|
|
if (date1 > date2) {
|
|
this.$message('开始时间不得晚于结束时间');
|
|
return;
|
|
}
|
|
this.listQuery = {
|
|
pageNo: 1,
|
|
pageSize: 10,
|
|
total: 1,
|
|
...this.formInline,
|
|
};
|
|
this.getDataList();
|
|
break;
|
|
case 'reset':
|
|
this.formInline.name = null;
|
|
this.formInline.code = null;
|
|
this.formInline.deptId = null;
|
|
this.$refs.deptSelect.clear();
|
|
this.formInline.leaderName = null;
|
|
this.listQuery = {
|
|
pageSize: 10,
|
|
pageNo: 1,
|
|
total: 1,
|
|
};
|
|
this.getDataList();
|
|
break;
|
|
case 'add':
|
|
this.addOrEditTitle = '添加排班计划';
|
|
this.addOrUpdateVisible = true;
|
|
this.$nextTick(() => {
|
|
this.$refs.addOrUpdate.init();
|
|
});
|
|
break;
|
|
case 'export':
|
|
this.handleExport();
|
|
break;
|
|
default:
|
|
console.log(val);
|
|
}
|
|
},
|
|
setDeptId(val) {
|
|
this.formInline.deptId = val;
|
|
},
|
|
setStepNum(val) {
|
|
this.stepNum = val;
|
|
},
|
|
successSubmit() {
|
|
this.addOrUpdateVisible = false;
|
|
this.addOrEditTitle = '';
|
|
this.stepNum = 1;
|
|
this.getDataList();
|
|
},
|
|
// dialog取消
|
|
handleCancel() {
|
|
this.$refs.addOrUpdate.cancelStep();
|
|
},
|
|
handleConfirm(val) {
|
|
if (val == 'up') {
|
|
this.$refs.addOrUpdate.upSubmit();
|
|
} else {
|
|
this.$refs.addOrUpdate.nextSubmit();
|
|
}
|
|
},
|
|
//tableBtn点击
|
|
handleClick(val) {
|
|
if (val.type === 'edit') {
|
|
this.addOrUpdateVisible = true;
|
|
this.addOrEditTitle = '编辑';
|
|
this.$nextTick(() => {
|
|
this.$refs.addOrUpdate.init(val.data.id);
|
|
});
|
|
} else if (val.type === 'delete') {
|
|
this.deleteHandle(val.data.id, val.data.name, val.data._pageIndex);
|
|
} else if (val.type === 'detail') {
|
|
this.detailVisible = true;
|
|
this.$nextTick(() => {
|
|
this.$refs.detailRef.init(val.data.id);
|
|
});
|
|
} else if (val.type === 'cancel') {
|
|
disablePlan(val.data.id).then((res) => {
|
|
this.$modal.msgSuccess('作废成功');
|
|
this.getDataList()
|
|
});
|
|
} else if (val.type === 'sync') {
|
|
updateScheduleLater({ planId: val.data.id }).then((res) => {
|
|
this.$modal.msgSuccess('同步节假日成功');
|
|
this.getDataList()
|
|
});
|
|
} else if (val.type === 'copy') {
|
|
copyPlan(val.data.id).then((res) => {
|
|
this.$modal.msgSuccess('复制成功');
|
|
this.getDataList()
|
|
});
|
|
}
|
|
},
|
|
detailCancel() {
|
|
this.detailVisible = false;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scope>
|
|
.searchBarBox {
|
|
width: 100%;
|
|
position: relative;
|
|
margin-bottom: 8px;
|
|
}
|
|
.searchBarBox::after {
|
|
content: '';
|
|
display: block;
|
|
clear: both;
|
|
}
|
|
.searchBar .blue-block {
|
|
display: inline-block;
|
|
float: left;
|
|
width: 4px;
|
|
height: 16px;
|
|
background-color: #0b58ff;
|
|
border-radius: 1px;
|
|
margin-right: 8px;
|
|
margin-top: 12px;
|
|
}
|
|
.searchBar .el-form-item {
|
|
margin-bottom: 4px;
|
|
}
|
|
.searchBar .separateStyle {
|
|
display: inline-block;
|
|
width: 1px;
|
|
height: 24px;
|
|
background: #e8e8e8;
|
|
vertical-align: middle;
|
|
}
|
|
.searchBar .vue-treeselect__control {
|
|
height: 32px !important;
|
|
line-height: 32px !important;
|
|
margin: 4px 0;
|
|
}
|
|
body .el-dialog__header {
|
|
font-size: 16px;
|
|
color: rgba(0, 0, 0, 0.85);
|
|
font-weight: 500;
|
|
padding: 13px 24px;
|
|
border-bottom: 1px solid #e9e9e9;
|
|
}
|
|
body .el-dialog__header .titleStyle::before {
|
|
content: '';
|
|
display: inline-block;
|
|
width: 4px;
|
|
height: 16px;
|
|
background-color: #0b58ff;
|
|
border-radius: 1px;
|
|
margin-right: 8px;
|
|
position: relative;
|
|
top: 2px;
|
|
}
|
|
</style>
|