You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

648 lines
17 KiB
Vue

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<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="班组编码" prop="teamCode">
<el-input
v-model="queryParams.teamCode"
placeholder="请输入班组编码"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="班组名称" prop="teamDesc">
<el-input
v-model="queryParams.teamDesc"
placeholder="请输入班组名称"
clearable
@keyup.enter.native="handleQuery"
/>
</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="['wms:team:add']"
>新增</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
type="success"
plain
icon="el-icon-edit"
size="mini"
:disabled="single"
@click="handleUpdate"
v-hasPermi="['wms:team:edit']"
>修改</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['wms:team:remove']"
>删除</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
v-hasPermi="['wms:team:export']"
>导出</el-button
>
</el-col>
<right-toolbar
:showSearch.sync="showSearch"
@queryTable="getList"
></right-toolbar>
</el-row>
<el-table
v-loading="loading"
:data="teamList"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" align="center" />
<!-- 序号 -->
<el-table-column
type="index"
width="90"
align="center"
:index="indexMethod"
label="序号"
>
</el-table-column>
<el-table-column
label="班组编码"
align="center"
prop="teamCode"
width="150"
/>
<el-table-column
label="班组名称"
align="center"
prop="teamDesc"
width="180"
/>
<el-table-column prop="teamType" label="班组类别" align="center">
<template slot-scope="scope">
{{ scope.row.teamType == "team_type1" ? "生产班组" : "检验班组" }}
</template>
</el-table-column>
<el-table-column
label="所属产线"
align="center"
prop="productionLineCode"
/>
<el-table-column
label="班组负责人"
align="center"
prop="teamLeaderName"
/>
<!-- <el-table-column label="班组组成人员" align="center" prop="teamMembers" /> -->
<el-table-column label="创建人" align="center" prop="createBy" />
<el-table-column label="创建时间" align="center" prop="createDate" />
<el-table-column prop="active" label="是否启用" align="center">
<template slot-scope="scope">
{{ scope.row.active == 1 ? "是" : "否" }}
</template>
</el-table-column>
<el-table-column
label="操作"
align="center"
class-name="small-padding fixed-width"
>
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['wms:team:edit']"
>修改</el-button
>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['wms:team:remove']"
>删除</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="110px">
<el-row :gutter="10" class="mb8">
<el-col :span="12">
<el-form-item label="班组编码" prop="teamCode" style="width: 450px">
<el-input v-model="form.teamCode" placeholder="请输入班组编码" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="班组名称" prop="teamDesc" style="width: 450px">
<el-input v-model="form.teamDesc" placeholder="请输入班组" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="10" class="mb8">
<el-col :span="12">
<el-form-item label="班组类型" prop="teamType">
<el-select
v-model="form.teamType"
placeholder="请选择班组"
style="width: 340px"
>
<el-option
v-for="dict in dict.type.team_type"
:key="dict.value"
:label="dict.label"
:value="dict.value"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="是否启用" prop="active">
<el-select
v-model="form.active"
placeholder="请选择是否启用"
@change="$forceUpdate()"
clearable
style="width: 340px"
>
<el-option
v-for="item in options"
:key="item.active"
:label="item.label"
:value="item.active"
></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="10" class="mb8">
<el-col :span="12">
<el-form-item label="工厂编码" prop="siteCode" style="width: 450px">
<el-input v-model="form.siteCode" placeholder="请输入工厂编码" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item
label="所属产线"
prop="productionLineCode"
style="width: 450px"
>
<el-input
v-model="form.productionLineCode"
placeholder="请输入所属产线"
/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="10" class="mb8">
<el-col :span="12">
<el-form-item
label="班组长编码"
prop="teamLeaderCode"
style="width: 450px"
>
<el-input
v-model="form.teamLeaderCode"
placeholder="请输入班组长编码"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item
label="定编岗位数量"
prop="planPostQuantity"
style="width: 450px"
>
<el-input
v-model="form.planPostQuantity"
placeholder="请输入定编岗位数量"
/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="10" class="mb8">
<el-col :span="12">
<el-form-item
label="已分配岗位数量"
prop="actualPostQuantity"
style="width: 450px"
>
<el-input
v-model="form.actualPostQuantity"
placeholder="请输入已分配岗位数量"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item
label="班组属性"
prop="teamProperties"
style="width: 450px"
>
<el-input
v-model="form.teamProperties"
placeholder="请输入班组属性"
/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="10" class="mb8">
<el-col :span="12">
<el-form-item
label="应出勤人数"
prop="attendanceQuantity"
style="width: 450px"
>
<el-input
v-model="form.attendanceQuantity"
placeholder="请输入应出勤人数"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item
label="已分配人数"
prop="assignedQuantity"
style="width: 450px"
>
<el-input
v-model="form.assignedQuantity"
placeholder="请输入已分配人数"
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item
label="班组负责人"
prop="teamLeaderName"
style="width: 450px"
>
<el-input
v-model="form.teamLeaderName"
placeholder="请输入班组负责人名字"
/>
</el-form-item>
</el-col>
</el-row>
</el-form>
<el-divider></el-divider>
<el-card>
<div style="text-align: center">
<template>
<el-transfer
filterable
filter-placeholder="请输入班组人员名称"
:titles="['可选班组人员', '当前班组人员']"
:button-texts="['解除添加', '添加']"
:data="leftList"
v-model="rightList"
style="text-align: left"
>
</el-transfer>
</template>
</div>
</el-card>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel"> </el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {
listTeam,
getTeam,
delTeam,
addTeam,
updateTeam,
listTeamMembers,
getRightList,
} from "@/api/wms/team";
export default {
name: "Team",
dicts: ["sys_normal_disable", "team_type"],
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 班组表格数据
teamList: [],
teamMembersList: [],
// 可选(左边)
leftList: [],
// 已选右边只需要key
rightList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
orgId: null,
teamCode: null,
teamDesc: null,
teamDescGlobal: null,
teamDescExtended: null,
createBy: null,
createDate: null,
lastUpdateBy: null,
lastUpdateDate: null,
Active: null,
enterpriseId: null,
enterpriseCode: null,
siteId: null,
siteCode: null,
productionLineCode: null,
teamLeaderCode: null,
planPostQuantity: null,
actualPostQuantity: null,
salaryType: null,
teamProperties: null,
attendanceQuantity: null,
assignedQuantity: null,
},
teamQueryParams: {
pageNum: 1,
pageSize: 10,
},
options: [
{
active: "1",
label: "是",
},
{
active: "0",
label: "否",
},
],
// 表单参数
form: {},
// 表单校验
rules: {
teamCode: [
{ required: true, message: "班组编码不能为空", trigger: "blur" },
],
teamDesc: [
{ required: true, message: "班组名称不能为空", trigger: "blur" },
],
active: [
{ required: true, message: "是否启用不能为空", trigger: "blur" },
],
},
};
},
created() {
this.getList();
this.getTeamMembers();
},
methods: {
// 生成表头序号
indexMethod(index) {
return index + 1;
},
getTeamMembers() {
// 调用列表接口
this.teamQueryParams.pageNum = 1;
this.teamQueryParams.pageSize = 10000;
listTeamMembers(this.teamQueryParams).then((response) => {
for (let i in response.rows) {
// 将返回的列表赋值于穿梭框左边列表
this.leftList.push({
key: response.rows[i].userId,
label: response.rows[i].teamUserName,
});
}
// for (let i in response.selected) {
// this.rightList.push(response.selected[i].key);
// this.form.rightData = this.rightList;
// }
this.loading = false;
});
},
/** 查询班组列表 */
getList() {
this.loading = true;
listTeam(this.queryParams).then((response) => {
this.teamList = response.rows;
this.total = response.total;
this.loading = false;
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
teamId: null,
orgId: null,
teamCode: null,
teamDesc: null,
teamDescGlobal: null,
teamDescExtended: null,
createBy: null,
createDate: null,
lastUpdateBy: null,
lastUpdateDate: null,
Active: null,
enterpriseId: null,
enterpriseCode: null,
siteId: null,
siteCode: null,
productionLineCode: null,
teamLeaderCode: null,
planPostQuantity: null,
actualPostQuantity: null,
salaryType: null,
teamProperties: null,
attendanceQuantity: null,
assignedQuantity: null,
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map((item) => item.teamId);
this.single = selection.length !== 1;
this.multiple = !selection.length;
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.rightList = [];
this.open = true;
this.title = "添加班组";
},
/** 修改按钮操作 */
handleUpdate(row) {
this.rightList = [];
this.reset();
const teamId = row.teamId || this.ids;
getTeam(teamId).then((response) => {
this.form = response.data;
for (let i in response.data.selectedData) {
// 将返回的列表赋值于穿梭框右边列表
this.rightList.push(response.data.selectedData[i].userId);
}
});
this.title = "修改班组";
this.open = true;
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate((valid) => {
if (valid) {
if (this.form.teamId != null) {
this.form.rightData = this.rightList;
updateTeam(this.form).then((response) => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
this.form.rightData = this.rightList;
addTeam(this.form).then((response) => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const teamIds = row.teamId || this.ids;
this.$modal
.confirm('是否确认删除班组编号为"' + teamIds + '"的数据项?')
.then(function () {
return delTeam(teamIds);
})
.then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
})
.catch(() => {});
},
/** 导出按钮操作 */
handleExport() {
this.download(
"wms/team/export",
{
...this.queryParams,
},
`team_${new Date().getTime()}.xlsx`
);
},
},
};
</script>
<style>
.el-transfer-panel {
width: 320px;
height: 400px;
}
.el-transfer-panel__list.is-filterable {
height: 300px;
}
</style>