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.

629 lines
20 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="100px">
<el-form-item label="工序编码" prop="processCode">
<el-input
v-model="queryParams.processCode"
placeholder="请输入工序编码"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<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="enableFlag">
<el-input
v-model="queryParams.enableFlag"
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="['mes:pro:process: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:pro:process: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:pro:process: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:pro:process:export']"
>导出</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="processList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="工序编码" align="center" prop="processCode" >
<template slot-scope="scope">
<el-button
type="text"
@click="handleView(scope.row)"
v-hasPermi="['mes:pro:process:query']"
>{{scope.row.processCode}}</el-button>
</template>
</el-table-column>
<el-table-column label="工序名称" align="center" prop="processName" :show-overflow-tooltip="true"/>
<el-table-column label="拆分&合并" align="center" prop="splitMerge">
<template slot-scope="scope">
<dict-tag :options="dict.type.split_merge" :value="scope.row.splitMerge"/>
</template>
</el-table-column>
<el-table-column label="工作中心" align="center" prop="workCenter" :show-overflow-tooltip="true"/>
<el-table-column label="线体设备" align="center" prop="equipment" :show-overflow-tooltip="true"/>
<el-table-column label="工作时长" align="center" prop="workTime" :show-overflow-tooltip="true"/>
<el-table-column label="是否启用" align="center" prop="enableFlag">
<template slot-scope="scope">
<dict-tag :options="dict.type.sys_yes_no" :value="scope.row.enableFlag"/>
</template>
</el-table-column>
<el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true"/>
<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="['pro:process:edit']"
>修改</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['pro:process: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="960px" append-to-body >
<el-form ref="form" :model="form" :rules="rules" label-width="100px" >
<el-row>
<el-col :span="8">
<el-form-item label="工序编码" prop="processCode">
<el-input v-model="form.processCode" placeholder="请输入工序编码" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="工序名称" prop="processName">
<el-input v-model="form.processName" placeholder="请输入工序名称" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="是否启用" prop="enableFlag">
<el-radio-group v-model="form.enableFlag" disabled v-if="optType=='view'">
<el-radio
v-for="dict in dict.type.sys_yes_no"
:key="dict.value"
:label="dict.value"
>{{dict.label}}</el-radio>
</el-radio-group>
<el-radio-group v-model="form.enableFlag" v-else>
<el-radio
v-for="dict in dict.type.sys_yes_no"
:key="dict.value"
:label="dict.value"
>{{dict.label}}</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item label="拆分&合并" prop="splitMerge">
<el-select v-model="form.splitMerge" placeholder="请选择">
<el-option
v-for="dict in dict.type.split_merge"
:key="dict.value"
:label="dict.label"
:value="dict.value"
></el-option>
</el-select>
</el-form-item>
</el-col>
<!--
<el-col :span="8">
<el-form-item label="拆合值" prop="splitMergeNum">
<el-input v-model="form.splitMergeNum" placeholder="请输入拆分&合并数量" />
</el-form-item>
</el-col>-->
<el-col :span="8">
<el-form-item label="工作时间" prop="workTime">
<el-input-number :min="0" :step="1" v-model="form.workTime" placeholder="请输入工作时长" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="工作中心" prop="workCenter">
<el-input v-model="form.workCenter" type="input" placeholder="请输入工作中心" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item label="可多单运行" prop="sync">
<el-radio-group v-model="form.sync" disabled v-if="optType=='view'">
<el-radio
v-for="dict in dict.type.sys_yes_no"
:key="dict.value"
:label="dict.value"
>{{dict.label}}</el-radio>
</el-radio-group>
<el-radio-group v-model="form.sync" v-else>
<el-radio
v-for="dict in dict.type.sys_yes_no"
:key="dict.value"
:label="dict.value"
>{{dict.label}}</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="16">
<el-form-item label="线体设备" prop="equipment">
<el-input v-model="form.equipment" placeholder="请选择线体设备" >
<el-button slot="append" @click="handleSelectEquipment" icon="el-icon-search"></el-button>
</el-input>
<ItemSelect ref="itemSelect" @onSelected="onItemSelectedEquipment" > </ItemSelect>
</el-form-item>
</el-col>
</el-row>
<!-- <el-row>
<el-col :span="8">
<el-form-item label="参数1温度" prop="param1">
<el-input v-model="form.param1" type="input" placeholder="请输入温度" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="参数2湿度" prop="param2">
<el-input v-model="form.param2" type="input" placeholder="请输入湿度" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="参数3" prop="param3">
<el-input v-model="form.param3" type="input" placeholder="请输入参数3" />
</el-form-item>
</el-col>
</el-row> -->
<el-row>
<el-col :span="24">
<el-form-item label="工序SOP" prop="fileList">
<FileUpload v-model="form.fileList"/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="工序说明" prop="attention">
<el-input v-model="form.attention" type="textarea" placeholder="请输入内容" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
</el-form-item>
</el-col>
</el-row>
</el-form>
<el-divider content-position="center" v-if="form.processId !=null">操作步骤</el-divider>
<Processcontent v-if="form.processId !=null" :optType="optType" :processId="form.processId"></Processcontent>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="cancel" v-if="optType =='view'">返回</el-button>
<el-button type="primary" @click="submitForm" v-else>确 定</el-button>
<el-button @click="cancel"> </el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { listProcess, getProcess, delProcess, addProcess, updateProcess ,listEquipment,getEquipment} from "@/api/technology/process";
import Processcontent from "./content.vue";
import ItemSelect from "./single.vue";
import { Message } from 'element-ui'
export default {
name: "Process",
dicts: ['sys_yes_no','split_merge'],
components: {Processcontent,ItemSelect},
data() {
return {
checkEquipment:null,
//自动生成编码
autoGenFlag:false,
optType: undefined,
// 遮罩层
loading: true,
// 选中数组
ids: [],
//最底层
ids1:[],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total:0,
// 生产工序表格数据
processList:[],
equipmentList:[],
// 弹出层标题
title: "",
boundTitle:"",
// 是否显示弹出层
open: false,
boundeEuipmentOpen:false,
equipmentTypeName : undefined,
defaultProps: {
children: "children",
label: "label"
},
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
processCode: null,
processName: null,
enableFlag: null,
},
queryEquipmentParams: {
equipmentTypeName :null,
equipmentTypeCode:null,
equipmentName :null,
equipmentCode:null,
equipmentId:'',
processId:null,
pageNum: 1,
pageSize: 10,
},
// 表单参数
form: {},
// 表单校验
rules: {
processCode: [
{ required: true, message: "工序编码不能为空", trigger: "blur" }
],
processName: [
{ required: true, message: "工序名称不能为空", trigger: "blur" }
],
enableFlag: [
{ required: true, message: "是否启用不能为空", trigger: "blur" }
],
splitMerge: [
{ required: true, message: "拆分&合并不能为空", trigger: "blur" }
],
sync: [
{ required: true, message: "可多单运行不能为空", trigger: "blur" }
],
},
fileList:[],
equipmentId:'',
};
},
created() {
this.getList();
this.getEquipmentList();
},
methods: {
activated(){
this.useTypeKey +=1
},
handleEquipmentSelectionChange (val) {
this.equipmentList = val
},
/** 查询物料信息列表 */
getEquipmentList() {
this.loading = true;
listEquipment(this.queryEquipmentParams).then(response => {
this.equipmentList = response.rows;
this.total = response.total;
this.loading = false;
});
},
// 筛选节点
filterNode(value, data) {
if (!value) return true;
return data.label.indexOf(value) !== -1;
},
// 节点单击事件
handleNodeClick(data) {
this.queryEquipmentParams.equipmentTypeCode = data.id;
this.handleEquipmentTypeQuery();
},
/** 搜索按钮操作 */
handleEquipmentTypeQuery() {
console.log(2);
this.getEquipmentList();
},
/** 搜索按钮操作 */
handleEquipmentQuery() {
this.queryEquipmentParams.pageNum = 1;
this.getEquipmentList();
console.log(this.form);
},
// 生成表头序号
indexMethod(index){
return index+1 ;
},
// 多选框选中数据
handleEquipmentSelectionChange(selection) {
this.ids = selection.map(item => item.equipmentId);
this.single = selection.length!==1;
this.multiple = !selection.length;
},
/** 查询生产工序列表 */
getList() {
this.loading = true;
listProcess(this.queryParams).then(response => {
this.processList = response.rows;
this.total = response.total;
this.loading = false;
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 取消按钮
equipmentCancel() {
this.boundeEuipmentOpen = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
processCode: null,
processName: null,
attention: null,
enableFlag: 'Y',
remark: null,
createBy: null,
createTime: null,
updateBy: null,
updateTime: null,
fileList:'',
equipmentTypeName:'',
equipmentId :null,
equipmentTypeName :null,
equipmentTypeCode:null,
equipmentName :null,
equipmentCode:null,
equipment:null,
};
this.autoGenFlag = false;
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
/** 重置按钮操作 */
resetEquipmentQuery() {
this.resetForm("queryForm");
this.handleEquipmentQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.processId);
this.ids1 = selection.map(item => item.processId);
this.single = selection.length!==1
this.multiple = !selection.length
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "添加生产工序";
this.optType = "add";
},
/** 绑定设备操作 */
handleBoundeEuipment() {
//this.reset();
this.boundeEuipmentOpen = true;
this.boundTitle = "绑定设备";
this.optType = "bound";
},
// 查询明细按钮操作
handleView(row){
this.reset();
const processId = row.processId || this.ids;
getProcess(processId).then(response => {
this.form = response.data;
this.open = true;
this.title = "查看工序信息";
this.optType = "view";
});
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const processId = row.processId || this.ids
getProcess(processId).then(response => {
this.form = response.data;
if(response.data.files != null){
var newFiles = [];
response.data.files.forEach(item =>{
var newfile = {};
newfile.name = item.fileName;
newfile.url = item.fileAddress;
newFiles.push(newfile);
})
this.form.fileList = newFiles;
}
this.open = true;
this.title = "修改生产工序";
this.optType = "edit";
});
},
/** 提交按钮 */
submitForm() {
if(Array.isArray(this.form.fileList)){
this.form.fileList = this.listToString(this.form.fileList);
}
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.processId != null) {
updateProcess(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
}else {
addProcess(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
//
submitEquipmentForm() {
const table = this.$refs.myTable;
const data = table.data;
console.log(data);
for (const one of data) {
const equipmentCode = one.equipmentCode;
this.form.workCenter = this.form.workCenter + ','+ equipmentCode;
this.boundeEuipmentOpen = false;
}
},
/** 删除按钮操作 */
handleDelete(row) {
const processIds = row.processId || this.ids;
this.$modal.confirm('是否确认删除生产工序?').then(function() {
return delProcess(processIds);
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {});
},
/** 导出按钮操作 */
handleExport() {
this.download('technology/pro/process/export', {
...this.queryParams
}, `process_${new Date().getTime()}.xlsx`)
},
// 对象转成指定字符串分隔
listToString(list, separator) {
let strs = "";
separator = separator || ",";
for (let i in list) {
strs += list[i].url + separator;
}
return strs != '' ? strs.substr(0, strs.length - 1) : '';
},
//新增 设备选择弹出框
onItemSelectedEquipment(obj){
if(this.form.equipment == null){
console.log("equipment是空if获取的obj",obj);
console.log("device是空if获取的equipment",this.form.equipment);
this.form.equipment = obj;
}else{
if(obj != undefined && obj != null){
const a = obj.split(',');
const len = obj.split(',').length;
console.log('切割的数组',obj.split(','));
a.forEach(item => {
this.checkEquipment = this.form.equipment.search(item) != -1;
console.log("check的值",this.checkEquipment);
if(this.checkEquipment == true){
console.log("重复添加",true);
Message.warning('您已经添加过该设备,请勿重复添加!!!');
}else if(this.checkEquipment == false){
this.form.equipment = this.form.equipment +","+item;
}
})
}
}
},
//新增 设备选择弹出框
handleSelectEquipment(){
this.$refs.itemSelect.showFlag = true;
},
}
};
</script>