<template>
|
<div class="schedule viewWrap">
|
<a ref="download" style="display: none" />
|
<h2>排班管理</h2>
|
<!-- 搜索功能区 -->
|
<div class="wrap">
|
<div class="searchWrap">
|
<div class="searchItem">
|
<span class="searchTitle">姓名</span>
|
<el-select v-model="userId" placeholder="请选择" style="width:220px;" clearable>
|
<el-option v-for="(item, index) in selectData" :key="index" :label="item.name" :value="item.id">
|
</el-option>
|
</el-select>
|
</div>
|
<div class="searchItem">
|
<span class="searchTitle">排班日期</span>
|
<el-date-picker v-model="scheduleDate" value-format="yyyy-MM-dd" type="date" style="width:220px;"
|
placeholder="选择日期">
|
</el-date-picker>
|
</div>
|
<div class="searchButton">
|
<el-button type="primary" @click="onGetSearchData">查询</el-button>
|
<el-button @click="onClearSearchData">清空</el-button>
|
<el-button @click="handleExport">导出</el-button>
|
</div>
|
</div>
|
</div>
|
|
<!-- 数据功能按钮区 -->
|
<el-button type="primary" icon="el-icon-plus" style="width: 100px; margin-top: 20px;"
|
@click="handleFormDataAdd">添加</el-button>
|
|
<!-- 数据表格区 -->
|
<el-table stripe :data="tableData" height="0" style="margin-top: 20px;">
|
<el-table-column type="expand">
|
<template slot-scope="props">
|
<el-row class="my-rows" v-for="item, index in props.row.relList" :key="index">
|
<el-col :span="6">计划任务：{{ item.planName }}</el-col>
|
<el-col :span="6">流程节点：{{ item.nodeName }}</el-col>
|
<el-col :span="6">工作内容：{{ item.workDetails }}</el-col>
|
<el-col :span="6">工站名称：{{ item.stationName }}</el-col>
|
</el-row>
|
</template>
|
</el-table-column>
|
<el-table-column type="index" label="序号"> </el-table-column>
|
<el-table-column prop="userName" label="姓名"> </el-table-column>
|
<el-table-column prop="userId" label="用户ID"> </el-table-column>
|
<el-table-column prop="scheduleDate" label="排班日期">
|
</el-table-column>
|
<el-table-column prop="dt" label="任务条目">
|
<template slot-scope="props">
|
{{ props.row.relList.length }}
|
</template>
|
</el-table-column>
|
<el-table-column prop="dt" label="创建时间" width="170">
|
</el-table-column>
|
<el-table-column label="操作" width="150">
|
<template slot-scope="scope">
|
<el-button icon="el-icon-edit" @click.native.prevent="handleFormDataEdit(scope.row)" type="text" size="small">
|
编辑
|
</el-button>
|
<el-button @click.native.prevent="handleDelete(scope.row)" type="text" size="small" icon="el-icon-delete">
|
删除
|
</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<!-- 分页组件 -->
|
<el-pagination style="margin-top: 20px;" @size-change="onGetTableData" @current-change="onGetTableData"
|
:current-page.sync="pageCurr" :page-size.sync="pageSize" :page-sizes="[10, 20, 50, 100]"
|
layout="total, sizes, prev, pager, next, jumper" :total="total">
|
</el-pagination>
|
|
<!-- 表单 -->
|
<el-dialog :title="dialogTitle" :visible.sync="showFromData" width="600px" :before-close="handleFormDataClose">
|
<el-form :model="formData" :rules="formRules" ref="formData" label-width="140px" style="border-bottom: 1px dashed #ccc; margin-bottom: 20px;">
|
<el-form-item label="ID" prop="id" style="display: none;">
|
<el-input style="width:220px" v-model="formData.id" disabled></el-input>
|
</el-form-item>
|
<el-form-item label="姓名" prop="userId">
|
<el-select v-model="formData.userId" placeholder="请选择" style="width:220px;" clearable>
|
<el-option v-for="(item, index) in selectData" :key="index" :label="item.name" :value="item.id">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="排班日期" prop="scheduleDate">
|
<el-date-picker v-model="formData.scheduleDate" value-format="yyyy-MM-dd" type="date" placeholder="选择日期">
|
</el-date-picker>
|
</el-form-item>
|
</el-form>
|
|
<el-form label-width="140px" class="relList-item" v-for="item, index in formData.relList" :key="index">
|
<el-form-item label="ID" prop="id" style="display: none;">
|
<el-input style="width:220px" v-model="formData.relList[index].id" disabled></el-input>
|
</el-form-item>
|
<el-form-item label="工作任务">
|
<el-select v-model="formData.relList[index].planId" @change="formData.relList[index].nodeId=null" placeholder="请选择" style="width:220px;" clearable>
|
<el-option v-for="(i, idx) in planData" :key="idx" :label="i.planName" :value="i.planId">
|
</el-option>
|
</el-select>
|
|
<el-button icon="el-icon-delete" @click="handleDelRelListItem(index)" type="text" size="small" style="margin: 0 0 0 62px;">
|
删除排班
|
</el-button>
|
</el-form-item>
|
<el-form-item label="流程节点">
|
<el-select v-model="formData.relList[index].nodeId" placeholder="请选择" style="width:220px;" clearable>
|
<el-option v-for="(i, idx) in nodeData[index]" :key="idx" :label="i.content" :value="i.nodeId" @click.native="formData.relList[index].workDetails = i.content">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="工站">
|
<el-select v-model="formData.relList[index].stationId" placeholder="请选择" style="width:220px;" clearable>
|
<el-option v-for="(i, idx) in stationData" :key="idx" :label="i.name" :value="i.id">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="工作内容">
|
<el-input style="width:220px" v-model="formData.relList[index].workDetails" clearable></el-input>
|
</el-form-item>
|
</el-form>
|
<el-button icon="el-icon-plus" @click="handleAddRelListItem" type="text" size="small" style="margin: 0 0 0 62px;">
|
添加排班
|
</el-button>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="handleFormDataClose">取 消</el-button>
|
<el-button type="primary" @click="handleFormDataSubmit">确 定</el-button>
|
</span>
|
</el-dialog>
|
</div>
|
</template>
|
|
<style lang="less" scoped>
|
.schedule {
|
padding: 20px;
|
.my-rows {
|
padding: 0 10px;
|
background-color: #f9f9f9;
|
height: 40px;
|
line-height: 40px;
|
border-bottom: 1px dashed #ccc;
|
}
|
.my-rows:first-child {
|
border-top: 1px dashed #ccc;
|
}
|
.relList-item {
|
border-bottom: 1px dashed #ccc;
|
margin-bottom: 20px;
|
}
|
}
|
</style>
|
|
<script>
|
export default {
|
name: "schedule",
|
components: {},
|
data() {
|
return {
|
userId: null,
|
scheduleDate: null,
|
pageSize: 10,
|
pageCurr: 1,
|
total: 0,
|
tableData: [],
|
showFromData: false,
|
formData: {
|
id: null,
|
userId: null,
|
scheduleDate: null,
|
relList: [],
|
},
|
formRules: {
|
userId: [{ required: true, message: "必填项", trigger: "blur" }],
|
scheduleDate: [{ required: true, message: "必填项", trigger: "blur" }],
|
},
|
selectData: [],
|
planData: [],
|
stationData: [],
|
dialogTitle: null,
|
};
|
},
|
computed: {
|
nodeData: function () {
|
var arr = []
|
this.formData.relList.forEach((item1, index1) => {
|
this.planData.forEach((item2, index2) => {
|
if(item1.planId == item2.planId){
|
arr[index1] = item2.nodes
|
}
|
})
|
})
|
return arr;
|
},
|
},
|
watch: {
|
},
|
mounted() {
|
this.onGetTableData();
|
this.onGetSelectData();
|
},
|
methods: {
|
// 获取用户数据
|
onGetSelectData: function () {
|
var that = this;
|
that
|
.$axiosAdmin({
|
method: "get",
|
url: "production/schedule/getUserList",
|
})
|
.then((res) => {
|
if (res.success == true) {
|
this.selectData = res.content;
|
} else {
|
that.$alert(res.content, "提示", {
|
confirmButtonText: "确定",
|
});
|
}
|
})
|
.catch((err) => {
|
console.log(err);
|
});
|
},
|
// 获取任务数据
|
onGetPlanData: function () {
|
var that = this;
|
var data = { planName: "组装任务" };
|
that
|
.$axiosAdmin({
|
method: "post",
|
url: "production/schedule/selectPlan",
|
data: JSON.stringify(data)
|
})
|
.then((res) => {
|
if (res.success == true) {
|
this.planData = res.content;
|
} else {
|
that.$alert(res.content, "提示", {
|
confirmButtonText: "确定",
|
});
|
}
|
})
|
.catch((err) => {
|
console.log(err);
|
});
|
},
|
// 获取工站数据
|
onGetStationData: function () {
|
var that = this;
|
that
|
.$axiosAdmin({
|
method: "get",
|
url: "platform/station/all",
|
})
|
.then((res) => {
|
if (res.success == true) {
|
this.stationData = res.content;
|
} else {
|
that.$alert(res.content, "提示", {
|
confirmButtonText: "确定",
|
});
|
}
|
})
|
.catch((err) => {
|
console.log(err);
|
});
|
},
|
// 执行条件查询
|
onGetSearchData: function () {
|
this.pageCurr = 1;
|
this.onGetTableData();
|
},
|
// 清空查询条件
|
onClearSearchData: function () {
|
this.scheduleDate = null;
|
this.userId = null;
|
this.pageCurr = 1;
|
this.onGetTableData();
|
},
|
// 获取表格数据
|
onGetTableData: function () {
|
var that = this;
|
var data = {
|
scheduleDate: this.scheduleDate,
|
userId: this.userId,
|
pageSize: this.pageSize,
|
pageCurr: this.pageCurr,
|
};
|
that
|
.$axiosAdmin({
|
method: "post",
|
url: "production/schedule/some",
|
data: JSON.stringify(data),
|
})
|
.then((res) => {
|
if (res.success == true) {
|
that.tableData = res.content.obj;
|
that.total = res.content.itemTotal;
|
} else {
|
that.$alert(res.content, "提示", {
|
confirmButtonText: "确定",
|
});
|
}
|
})
|
.catch((err) => {
|
console.log(err);
|
});
|
},
|
// 添加
|
handleFormDataAdd: function () {
|
this.formData.id = null;
|
this.formData.userId = null;
|
this.formData.scheduleDate = null;
|
this.formData.relList = [];
|
this.showFromData = true;
|
this.dialogTitle = "添加排班";
|
this.onGetTableData();
|
this.onGetPlanData()
|
this.onGetSelectData();
|
this.onGetStationData();
|
},
|
// 关闭
|
handleFormDataClose: function () {
|
this.formData.id = null;
|
this.formData.userId = null;
|
this.formData.scheduleDate = null;
|
this.formData.relList = [];
|
this.showFromData = false;
|
this.dialogTitle = null;
|
this.$refs["formData"].resetFields();
|
},
|
// 编辑
|
handleFormDataEdit: function (row) {
|
this.formData.id = row.id;
|
this.formData.userId = row.userId;
|
this.formData.scheduleDate = row.scheduleDate;
|
this.formData.relList = JSON.parse(JSON.stringify(row.relList));
|
this.showFromData = true;
|
this.dialogTitle = null;
|
this.dialogTitle = "编辑排班";
|
this.onGetTableData();
|
this.onGetPlanData()
|
this.onGetSelectData();
|
this.onGetStationData();
|
},
|
// 添加工作内容
|
handleAddRelListItem: function () {
|
this.formData.relList.push({
|
planId: null,
|
nodeId: null,
|
stationId: null,
|
workDetails: null,
|
});
|
},
|
// 删除工作内容
|
handleDelRelListItem: function (index) {
|
this.formData.relList.splice(index, 1);
|
},
|
// 提交数据确认
|
handleFormDataSubmit: function () {
|
this.$confirm(`此操作将保存并更新数据, 是否继续?`, "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning",
|
})
|
.then(() => {
|
this.onFormDataSubmit();
|
})
|
.catch(() => {
|
this.$message({
|
type: "info",
|
message: "已取消",
|
});
|
});
|
},
|
// 提交数据
|
onFormDataSubmit: function () {
|
var that = this;
|
var url, data;
|
if (this.formData.id) {
|
url = "production/schedule/update";
|
data = {
|
id: this.formData.id,
|
userId: this.formData.userId,
|
scheduleDate: this.formData.scheduleDate,
|
relList: this.formData.relList,
|
};
|
} else {
|
url = "production/schedule/save";
|
data = {
|
userId: this.formData.userId,
|
scheduleDate: this.formData.scheduleDate,
|
relList: this.formData.relList,
|
};
|
}
|
that
|
.$axiosAdmin({
|
method: "post",
|
url: url,
|
data: JSON.stringify(data),
|
})
|
.then((res) => {
|
if (res.success == true) {
|
that.$message({
|
type: "success",
|
message: "已成功",
|
});
|
that.handleFormDataClose();
|
that.onGetTableData();
|
} else {
|
that.$alert(res.content, "提示", {
|
confirmButtonText: "确定",
|
});
|
}
|
})
|
.catch((err) => {
|
console.log(err);
|
});
|
},
|
// 导出
|
handleExport: function () {
|
var that = this;
|
var data = {
|
userId: this.userId,
|
scheduleDate: this.scheduleDate,
|
};
|
that
|
.$axiosAdmin({
|
method: "post",
|
responseType: "blob",
|
url: "production/schedule/export",
|
data: data,
|
})
|
.then((res) => {
|
const blob = res;
|
that.$refs.download.href = window.URL.createObjectURL(
|
new Blob([blob], {
|
type:
|
"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
|
})
|
);
|
that.$refs.download.download = `排班信息.xlsx`;
|
that.$refs.download.click();
|
})
|
.catch((err) => {
|
console.log(err);
|
});
|
},
|
},
|
};
|
</script>
|
