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.

427 lines
15 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="routeName">
<el-input
v-model="queryParams.routeName"
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:baseRoute: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:baseRoute: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:baseRoute: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:baseRoute:export']"
>导出</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="baseRouteList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="工艺路线ID" align="center" prop="routeId" v-if="columns[0].visible"/>
<el-table-column label="工艺路线名称" align="center" prop="routeName" v-if="columns[1].visible"/>
<el-table-column label="工艺路线说明" align="center" prop="routeDesc" v-if="columns[2].visible"/>
<el-table-column label="激活标识" align="center" prop="activeFlag" v-if="columns[3].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[4].visible"/>
<el-table-column label="创建人" align="center" prop="createBy" v-if="columns[5].visible"/>
<el-table-column label="创建时间" align="center" prop="createTime" width="180" v-if="columns[6].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[7].visible"/>
<el-table-column label="更新时间" align="center" prop="updateTime" width="180" v-if="columns[8].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:baseRoute:edit']"-->
<!-- >修改</el-button>-->
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="routeProcessUpdate(scope.row)"
v-hasPermi="['mes:baseRoute:edit']"
>工艺步骤</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="routeName">
<el-input v-model="form.routeName" placeholder="请输入工艺路线名称" />
</el-form-item>
<el-form-item label="工艺路线说明" prop="routeDesc">
<el-input v-model="form.routeDesc" placeholder="请输入工艺路线说明" />
</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="routeProcess0pen" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="110px">
<el-form-item label="工艺路线名称" prop="routeName">
<el-input v-model="form.routeName" placeholder="请输入工艺路线名称" :disabled="true"/>
</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="handleAddMesBaseRouteProcess">添加</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDeleteMesBaseRouteProcess">删除</el-button>
</el-col>
</el-row>
<el-table :data="mesBaseRouteProcessList" :row-class-name="rowMesBaseRouteProcessIndex" @selection-change="handleMesBaseRouteProcessSelectionChange" ref="mesBaseRouteProcess">
<el-table-column type="selection" width="50" align="center" />
<el-table-column label="序号" align="center" prop="index" v-if="false"/>
<el-table-column label="工艺路线顺序" prop="processOrder" width="100">
<template slot-scope="scope">
<el-input v-model="scope.row.processOrder" :disabled="true"/>
</template>
</el-table-column>
<el-table-column label="工序" prop="processId">
<template slot-scope="scope">
<el-select v-model="scope.row.processId" filterable placeholder="请选择工序" clearable>
<el-option
v-for="item in processList"
:key="item.processId"
:label="item.processName"
:value="item.processId"
:disabled="isProcessIdDisabled(item.processId)"
></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>
</div>
</template>
<script>
import {
listBaseRoute,
getBaseRoute,
delBaseRoute,
addBaseRoute,
updateBaseRoute,
findRouteList
} from "@/api/mes/baseRoute";
import {findProcessList} from "@//api/mes/processInfo";
export default {
name: "BaseRoute",
dicts: ['active_flag'],
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 子表选中数据
checkedMesBaseRouteProcess: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 工艺路线表格数据
baseRouteList: [],
// 工艺路线组成信息表格数据
mesBaseRouteProcessList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 是否显示工艺步骤弹出层
routeProcess0pen: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
routeName: null,
routeDesc: null,
activeFlag: null,
createBy: null,
createTime: null,
updateBy: null,
updateTime: null
},
// 表单参数
form: {},
// 表单校验
rules: {
routeName: [
{ required: true, message: "工艺路线名称不能为空", trigger: "blur" }
],
activeFlag: [
{ required: true, message: "激活标识不能为空", trigger: "change" }
],
},
columns: [
{ key: 0, label: `工艺路线ID`, visible: true },
{ key: 1, label: `工艺路线名称`, visible: true },
{ key: 2, label: `工艺路线说明`, visible: true },
{ key: 3, label: `激活标识`, visible: true },
{ key: 4, label: `备注`, visible: true },
{ key: 5, label: `创建人`, visible: true },
{ key: 6, label: `创建时间`, visible: true },
{ key: 7, label: `更新人`, visible: true },
{ key: 8, label: `更新时间`, visible: true },
],
//工序选项
processList: [],
};
},
created() {
this.getList();
},
methods: {
/** 查询工艺路线列表 */
getList() {
this.loading = true;
findProcessList(null).then(response => {
this.processList = response.data
})
listBaseRoute(this.queryParams).then(response => {
this.baseRouteList = response.rows;
this.total = response.total;
this.loading = false;
});
},
// 取消按钮
cancel() {
this.open = false;
this.routeProcess0pen = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
routeId: null,
routeName: null,
routeDesc: null,
activeFlag: null,
remark: null,
createBy: null,
createTime: null,
updateBy: null,
updateTime: null
};
this.mesBaseRouteProcessList = [];
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.routeId)
this.single = selection.length!==1
this.multiple = !selection.length
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "添加工艺路线";
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const routeId = row.routeId || this.ids
getBaseRoute(routeId).then(response => {
this.form = response.data;
this.mesBaseRouteProcessList = response.data.mesBaseRouteProcessList;
this.open = true;
this.title = "修改工艺路线";
});
},
isProcessIdDisabled(processId) {
// 返回 true 表示禁用false 表示可用
return this.mesBaseRouteProcessList.some(item => item.processId === processId);
},
//维护工艺路线步骤
routeProcessUpdate(row) {
this.reset();
const routeId = row.routeId || this.ids
getBaseRoute(routeId).then(response => {
this.form = response.data;
this.mesBaseRouteProcessList = response.data.mesBaseRouteProcessList;
this.routeProcess0pen = true;
this.title = "维护工艺路线步骤";
});
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
this.form.mesBaseRouteProcessList = this.mesBaseRouteProcessList;
if (this.form.routeId != null) {
updateBaseRoute(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.routeProcess0pen = false;
this.getList();
});
} else {
addBaseRoute(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const routeIds = row.routeId || this.ids;
this.$modal.confirm('是否确认删除工艺路线编号为"' + routeIds + '"的数据项?').then(function() {
return delBaseRoute(routeIds);
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {});
},
/** 工艺路线组成信息序号 */
rowMesBaseRouteProcessIndex({ row, rowIndex }) {
row.index = rowIndex + 1;
row.processOrder = (rowIndex + 1) * 10;
},
/** 工艺路线组成信息添加按钮操作 */
handleAddMesBaseRouteProcess() {
let obj = {};
obj.processId = "";
obj.processOrder = "";
obj.remark = "";
obj.createBy = "";
obj.createTime = "";
obj.updateBy = "";
obj.updateTime = "";
this.mesBaseRouteProcessList.push(obj);
},
/** 工艺路线组成信息删除按钮操作 */
handleDeleteMesBaseRouteProcess() {
if (this.checkedMesBaseRouteProcess.length == 0) {
this.$modal.msgError("请先选择要删除的工艺路线组成信息数据");
} else {
const mesBaseRouteProcessList = this.mesBaseRouteProcessList;
const checkedMesBaseRouteProcess = this.checkedMesBaseRouteProcess;
this.mesBaseRouteProcessList = mesBaseRouteProcessList.filter(function(item) {
return checkedMesBaseRouteProcess.indexOf(item.index) == -1
});
}
},
/** 复选框选中数据 */
handleMesBaseRouteProcessSelectionChange(selection) {
this.checkedMesBaseRouteProcess = selection.map(item => item.index)
},
/** 导出按钮操作 */
handleExport() {
this.download('mes/baseRoute/export', {
...this.queryParams
}, `baseRoute_${new Date().getTime()}.xlsx`)
}
}
};
</script>