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.

644 lines
24 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="processName">
<el-input
v-model="queryParams.processName"
placeholder="请输入工序名称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="工序类别" prop="processType">
<el-select v-model="queryParams.processType" placeholder="请选择工序类别" clearable>
<el-option
v-for="dict in dict.type.process_type"
: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="['mes:processInfo: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="['mes:processInfo: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="['mes:processInfo: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="['mes:processInfo:export']"
>导出
</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="processInfoList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center"/>
<el-table-column label="主键标识" align="center" prop="processId" v-if="columns[0].visible"/>
<el-table-column label="工序编号" align="center" prop="processCode" v-if="columns[1].visible"/>
<el-table-column label="工序名称" align="center" prop="processName" v-if="columns[2].visible"/>
<el-table-column label="工序类别" align="center" prop="processType" v-if="columns[3].visible">
<template slot-scope="scope">
<dict-tag :options="dict.type.process_type" :value="scope.row.processType"/>
</template>
</el-table-column>
<el-table-column label="标准工时" align="center" prop="productionTime" v-if="columns[4].visible">
<template slot-scope="scope">
<span>{{ formatDayHourMinutes(scope.row.productionTime) }}</span>
</template>
</el-table-column>
<el-table-column label="激活标识" align="center" prop="activeFlag" v-if="columns[5].visible">
<template slot-scope="scope">
<dict-tag :options="dict.type.active_flag" :value="scope.row.activeFlag"/>
</template>
</el-table-column>
<el-table-column label="备注" align="center" prop="remark" v-if="columns[6].visible"/>
<el-table-column label="创建人" align="center" prop="createBy" v-if="columns[7].visible"/>
<el-table-column label="创建时间" align="center" prop="createTime" width="180" v-if="columns[8].visible">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
</template>
</el-table-column>
<el-table-column label="更新人" align="center" prop="updateBy" v-if="columns[9].visible"/>
<el-table-column label="更新时间" align="center" prop="updateTime" width="180" v-if="columns[10].visible">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.updateTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
</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="['mes:processInfo:edit']"-->
<!-- >修改</el-button>-->
<el-button
size="mini"
type="text"
icon="el-icon-circle-plus"
@click="handleProdLineUpdate(scope.row)"
>关联产线
</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-s-check"
@click="handleUserUpdate(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="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="110px">
<el-form-item label="工序编号" prop="processCode">
<el-input v-model="form.processCode" placeholder="请输入工序编号"/>
</el-form-item>
<el-form-item label="工序名称" prop="processName">
<el-input v-model="form.processName" placeholder="请输入工序名称"/>
</el-form-item>
<el-form-item label="工序类别" prop="processType">
<el-select v-model="form.processType" placeholder="请选择工序类别">
<el-option
v-for="dict in dict.type.process_type"
:key="dict.value"
:label="dict.label"
:value="dict.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="标准工时" prop="productionTime">
<el-input-number v-model="form.productionTimeDays" placeholder="请输入天数" :min="0" :max="10000"
:controls="false" :style="{ width: '50px' }"/>
<el-input-number v-model="form.productionTimeHours" placeholder="请输入小时" :min="0" :max="23"
:controls="false" :style="{ width: '50px' }"/>
小时
<el-input-number v-model="form.productionTimeMinutes" placeholder="请输入分钟" :min="0" :max="59"
:controls="false" :style="{ width: '50px' }"/>
分钟
</el-form-item>
<el-form-item label="激活标识" prop="activeFlag">
<el-radio-group v-model="form.activeFlag">
<el-radio
v-for="dict in dict.type.active_flag"
:key="dict.value"
:label="dict.value"
>{{ dict.label }}
</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容"/>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
<el-dialog :title="title" :visible.sync="prodLineOpen" width="700px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-form-item label="工序编号" prop="processCode">
<el-input v-model="form.processCode" placeholder="请输入工序编号" :disabled="true"/>
</el-form-item>
</el-col>
<el-col :span="1.5">
<el-form-item label="工序名称" prop="processName">
<el-input v-model="form.processName" placeholder="请输入工序名称" :disabled="true"/>
</el-form-item>
</el-col>
</el-row>
<!-- <el-form-item label="工序类别" prop="processType">-->
<!-- <el-select v-model="form.processType" placeholder="请选择工序类别" :disabled="true">-->
<!-- <el-option-->
<!-- v-for="dict in dict.type.process_type"-->
<!-- :key="dict.value"-->
<!-- :label="dict.label"-->
<!-- :value="dict.value"-->
<!-- ></el-option>-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<el-divider content-position="center">工序关联产线信息</el-divider>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAddMesBaseProcessProdline">线
</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDeleteMesBaseProcessProdline">
</el-button>
</el-col>
</el-row>
<el-table :data="mesBaseProcessProdlineList" :row-class-name="rowMesBaseProcessProdlineIndex"
@selection-change="handleMesBaseProcessProdlineSelectionChange" ref="mesBaseProcessProdline">
<el-table-column type="selection" width="50" align="center"/>
<el-table-column label="序号" align="center" prop="index"/>
<!-- <el-table-column label="工序主键" align="center" prop="processId" />-->
<!-- <el-table-column label="工序名称" align="center" prop="processName" />-->
<el-table-column label="关联产线" align="center" prop="prodlineId">
<template slot-scope="scope">
<el-select v-model="scope.row.prodlineId" placeholder="请选择关联产线" clearable>
<el-option
v-for="item in prodLineList"
:key="item.prodlineId"
:label="item.prodlineName"
:value="item.prodlineId"
:disabled="isProdlineDisabled(item.prodlineId)"
></el-option>
</el-select>
</template>
</el-table-column>
</el-table>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
<el-dialog :title="title" :visible.sync="userOpen" width="700px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-form-item label="工序编号" prop="processCode">
<el-input v-model="form.processCode" placeholder="请输入工序编号" :disabled="true"/>
</el-form-item>
</el-col>
<el-col :span="1.5">
<el-form-item label="工序名称" prop="processName">
<el-input v-model="form.processName" placeholder="请输入工序名称" :disabled="true"/>
</el-form-item>
</el-col>
</el-row>
<el-divider content-position="center">工序关联人员信息</el-divider>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAddMesBaseProcessUser">添加人员
</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDeleteMesBaseProcessUser">删除
</el-button>
</el-col>
</el-row>
<el-table :data="mesBaseProcessUserList" :row-class-name="rowMesBaseProcessUserIndex"
@selection-change="handleMesBaseProcessUserSelectionChange" ref="mesBaseProcessUser">
<el-table-column type="selection" width="50" align="center"/>
<el-table-column label="序号" align="center" prop="index"/>
<el-table-column label="关联人员" align="center" prop="prodlineId">
<template slot-scope="scope">
<el-select v-model="scope.row.userId" filterable placeholder="请选择关联人员" clearable>
<el-option
v-for="item in userList"
:key="item.userId"
:label="item.nickName"
:value="item.userId"
:disabled="isUserDisabled(item.userId)"
></el-option>
</el-select>
</template>
</el-table-column>
</el-table>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitUserForm">确 定</el-button>
<el-button @click="cancel"> </el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {
listProcessInfo,
getProcessInfo,
delProcessInfo,
addProcessInfo,
updateProcessInfo,
getProcessInfoUser, updateProcessInfoUser
} from "@/api/mes/processInfo";
import {findProdLineList} from "@//api/mes/baseProdlineInfo";
import {findUserList} from "@//api/system/user";
export default {
name: "ProcessInfo",
dicts: ['process_type', 'active_flag'],
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 选中数组
idNames: [],
// 子表选中数据
checkedMesBaseProcessProdline: [],
// 子表选中数据
checkedMesBaseProcessUser: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 工序信息表格数据
processInfoList: [],
// 工序关联产线表格数据
mesBaseProcessProdlineList: [],
// 工序关联人员表格数据
mesBaseProcessUserList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
prodLineOpen: false,
userOpen: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
processCode: null,
processName: null,
processType: null,
productionTime: null,
activeFlag: null,
remark: null,
},
// 表单参数
form: {},
// 表单校验
rules: {
processName: [
{required: true, message: "工序名称不能为空", trigger: "blur"}
],
processType: [
{required: true, message: "工序类别不能为空", trigger: "change"}
],
activeFlag: [
{required: true, message: "激活标识不能为空", trigger: "blur"}
],
},
columns: [
{key: 0, label: `主键标识`, visible: false},
{key: 1, label: `工序编号`, visible: true},
{key: 2, label: `工序名称`, visible: true},
{key: 3, label: `工序类别`, visible: true},
{key: 4, label: `标准工时`, visible: true},
{key: 5, label: `激活标识`, visible: false},
{key: 6, label: `备注`, visible: true},
{key: 7, label: `创建人`, visible: false},
{key: 8, label: `创建时间`, visible: true},
{key: 9, label: `更新人`, visible: false},
{key: 10, label: `更新时间`, visible: true},
],
//产线选项
prodLineList: [],
//人员选项
userList: []
};
},
created() {
this.getList();
},
methods: {
/** 查询工序信息列表 */
getList() {
this.loading = true;
findProdLineList(null).then(response => {
this.prodLineList = response.data
})
findUserList(null).then(response => {
this.userList = response.data
})
listProcessInfo(this.queryParams).then(response => {
this.processInfoList = response.rows;
this.total = response.total;
this.loading = false;
});
},
// 取消按钮
cancel() {
this.open = false;
this.prodLineOpen = false;
this.userOpen = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
processId: null,
processCode: null,
processName: null,
processType: null,
productionTime: null,
productionTimeDays: 0,
productionTimeHours: 0,
productionTimeMinutes: 0,
activeFlag: '1',
remark: null,
createBy: null,
createTime: null,
updateBy: null,
updateTime: null
};
this.mesBaseProcessProdlineList = [];
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
/** 天小时分钟转换为秒 */
convertToSeconds() {
const daysInSeconds = this.form.productionTimeDays * 24 * 60 * 60;
const hoursInSeconds = this.form.productionTimeHours * 60 * 60;
const minutesInSeconds = this.form.productionTimeMinutes * 60;
this.form.productionTime = daysInSeconds + hoursInSeconds + minutesInSeconds;
},
/** 秒转换为天小时分钟 */
convertToTime() {
const totalSeconds = this.form.productionTime;
const days = Math.floor(totalSeconds / (24 * 60 * 60));
const hours = Math.floor((totalSeconds % (24 * 60 * 60)) / 3600);
const minutes = Math.floor((totalSeconds % 3600) / 60);
// 更新到表单中
this.form.productionTimeDays = days;
this.form.productionTimeHours = hours;
this.form.productionTimeMinutes = minutes;
},
isProdlineDisabled(prodlineId) {
// 返回 true 表示禁用false 表示可用
return this.mesBaseProcessProdlineList.some(item => item.prodlineId === prodlineId);
},
isUserDisabled(userId) {
// 返回 true 表示禁用false 表示可用
return this.mesBaseProcessUserList.some(item => item.userId === userId);
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.processId)
this.idNames = selection.map(item => item.processCode)
this.single = selection.length !== 1
this.multiple = !selection.length
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "添加工序信息";
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const processId = row.processId || this.ids
getProcessInfo(processId).then(response => {
this.form = response.data;
this.mesBaseProcessProdlineList = response.data.mesBaseProcessProdlineList;
this.convertToTime();
this.open = true;
this.title = "修改工序信息";
});
},
handleProdLineUpdate(row) {
this.reset();
const processId = row.processId || this.ids
getProcessInfo(processId).then(response => {
this.form = response.data;
this.mesBaseProcessProdlineList = response.data.mesBaseProcessProdlineList;
this.prodLineOpen = true;
this.title = "关联产线";
});
},
handleUserUpdate(row) {
this.reset();
const processId = row.processId || this.ids
getProcessInfoUser(processId).then(response => {
this.form = response.data;
this.mesBaseProcessUserList = response.data.mesBaseProcessUserList;
this.userOpen = true;
this.title = "关联人员";
});
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
this.form.mesBaseProcessProdlineList = this.mesBaseProcessProdlineList;
if (this.form.productionTime <= 0) {
this.$modal.msgError("标准工时天、小时、分钟需为大于等于0的正整数");
return;
}
this.convertToSeconds();
if (this.form.processId != null) {
updateProcessInfo(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.prodLineOpen = false;
this.getList();
});
} else {
addProcessInfo(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
/** 用户提交按钮 */
submitUserForm() {
this.$refs["form"].validate(valid => {
if (valid) {
this.form.mesBaseProcessUserList = this.mesBaseProcessUserList;
if (this.form.processId != null) {
updateProcessInfoUser(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.userOpen = false;
this.getList();
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const processIds = row.processId || this.ids;
const processCodes = row.processCode || this.idNames;
this.$modal.confirm('是否确认删除工序编号为"' + processCodes + '"的数据项?').then(function () {
return delProcessInfo(processIds);
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {
});
},
/** 工序关联产线序号 */
rowMesBaseProcessProdlineIndex({row, rowIndex}) {
row.index = rowIndex + 1;
},
/** 工序关联产线序号 */
rowMesBaseProcessUserIndex({row, rowIndex}) {
row.index = rowIndex + 1;
},
/** 工序关联产线添加按钮操作 */
handleAddMesBaseProcessProdline() {
let obj = {};
this.mesBaseProcessProdlineList.push(obj);
},
/** 工序关联产线删除按钮操作 */
handleDeleteMesBaseProcessProdline() {
if (this.checkedMesBaseProcessProdline.length == 0) {
this.$modal.msgError("请先选择要删除的工序关联产线数据");
} else {
const mesBaseProcessProdlineList = this.mesBaseProcessProdlineList;
const checkedMesBaseProcessProdline = this.checkedMesBaseProcessProdline;
this.mesBaseProcessProdlineList = mesBaseProcessProdlineList.filter(function (item) {
return checkedMesBaseProcessProdline.indexOf(item.index) == -1
});
}
},
/** 复选框选中数据 */
handleMesBaseProcessProdlineSelectionChange(selection) {
this.checkedMesBaseProcessProdline = selection.map(item => item.index)
},
/** 工序关联人员添加按钮操作 */
handleAddMesBaseProcessUser() {
let obj = {};
obj.userName = "";
this.mesBaseProcessUserList.push(obj);
},
/** 工序关联人员删除按钮操作 */
handleDeleteMesBaseProcessUser() {
if (this.checkedMesBaseProcessUser.length == 0) {
this.$modal.msgError("请先选择要删除的工序关联人员数据");
} else {
const mesBaseProcessUserList = this.mesBaseProcessUserList;
const checkedMesBaseProcessUser = this.checkedMesBaseProcessUser;
this.mesBaseProcessUserList = mesBaseProcessUserList.filter(function (item) {
return checkedMesBaseProcessUser.indexOf(item.index) == -1
});
}
},
/** 复选框选中数据 */
handleMesBaseProcessUserSelectionChange(selection) {
this.checkedMesBaseProcessUser = selection.map(item => item.index)
},
/** 导出按钮操作 */
handleExport() {
this.download('mes/processInfo/export', {
...this.queryParams
}, `processInfo_${new Date().getTime()}.xlsx`)
}
}
};
</script>