factory_web/src/views/mtm/routepack_form.vue

344 lines
7.6 KiB
Vue

<template>
<el-drawer
:title="titleMap[mode]"
v-model="visible"
:size="'90%'"
destroy-on-close
@closed="$emit('closed')"
>
<el-container>
<el-header>
<el-steps
:active="active"
style="width: 100%"
:align-center="true"
finish-status="success"
>
<el-step
v-for="(item, index) of stepes"
:key="index"
:title="item"
style="50%"
@click="handleStep(index)"
>
</el-step>
</el-steps>
</el-header>
<!--基本信息!-->
<el-main class="nopadding" v-if="active === 0">
<el-form
ref="dialogForm"
:model="form"
:rules="rules"
label-width="110px"
style="margin: 40px"
>
<el-row>
<el-col :md="24" :sm="12" :xs="24">
<el-form-item label="名称" prop="name">
<el-input
v-model="form.name"
type="text"
clearable
></el-input>
</el-form-item>
</el-col>
<el-col :md="24" :sm="12" :xs="24">
<el-form-item label="产品" prop="type">
<el-select
v-model="form.material"
style="width: 100%"
filterable
>
<el-option
v-for="item in materials"
:key="item.id"
:label="item.full_name"
:value="item.id"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :md="24" :sm="12" :xs="24">
<el-form-item>
<el-button
style="margin-top: 20px"
type="primary"
:loading="isSaveing"
:disabled="isSaveing"
@click="handleNextStep"
>下一步
</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-main>
<!--工序!-->
<el-main class="nopadding" v-if="active === 1">
<div class="left-panel" style="margin: 10px">
<el-button
type="primary"
icon="el-icon-plus"
@click="table_add"
></el-button>
</div>
<scTable
ref="tables"
:apiObj="apiObj"
:query="query"
:params="query"
row-key="id"
hidePagination
hideDo
stripe
style="height: 680px"
>
<el-table-column label="排序" prop="sort" width="50">
</el-table-column>
<el-table-column label="工序" prop="process_name">
</el-table-column>
<el-table-column label="输入" prop="material_in_name">
</el-table-column>
<el-table-column label="输出" prop="material_out_name">
</el-table-column>
<el-table-column label="出材率" prop="out_rate">
</el-table-column>
<el-table-column label="工时" prop="hour_work">
</el-table-column>
<el-table-column label="批次校验" prop="batch_bind">
</el-table-column>
<el-table-column
label="操作"
fixed="right"
align="center"
width="200"
>
<template #default="scope">
<el-button
text
type="primary"
size="small"
@click="table_edit(scope.row)"
>编辑</el-button
>
<el-popconfirm
title="确定删除该工序吗?"
@confirm="delWorker(scope.row)"
>
<template #reference>
<el-button text type="danger" size="small"
>删除</el-button
>
</template>
</el-popconfirm>
</template>
</el-table-column>
</scTable>
<div style="margin-top: 20px; text-align: center">
<el-button @click="handleLastStep" style="margin-right: 4px"
>上一步</el-button
>
<el-button
v-for="item in initForm.transitions"
:key="item.id"
type="primary"
:loading="isSaveing"
:disabled="isSaveing"
@click="submitTicketCreate(item.id)"
style="margin-right: 4px"
>{{ item.name }}</el-button
>
<el-button @click="$emit('closed')" type="warning"
>退出</el-button
>
</div>
</el-main>
</el-container>
<save-dialog
v-if="dialog.save"
ref="saveDialog"
:routepack="routepack"
@success="handleSaveSuccess"
@closed="dialog.save = false"
></save-dialog>
</el-drawer>
</template>
<script>
import saveDialog from "./route_form.vue";
export default {
name: "routepack_form",
components: { saveDialog },
data() {
return {
active: 0,
stepSuc: [0],
stepes: ["基本信息", "工艺步骤"],
titleMap: { add: "新增工艺", edit: "编辑工艺" },
mode: "add",
isSaveing: false, //控制基本信息提交
search: {
keyword: null,
},
dialogTitle: "新增",
visible: false,
dialog: {
save: false,
},
form: {
name: "",
material: "",
},
apiworkerObj: null,
materials: [],
apiObj: null,
query: {
routepack: "",
},
rules: {
name: [{ required: true, message: "请输入" }],
},
routepack: "",
};
},
mounted() {
this.isSaveing = false;
this.getInit();
this.getMaterials();
},
methods: {
open(mode) {
this.mode = mode;
this.visible = true;
return this;
},
setData(data) {
Object.assign(this.form, data);
console.log("setData this.form", this.form);
},
getMaterials() {
let that = this;
this.$API.mtm.material.list
.req({ page: 0, type__in: "10,20", is_hidden: false })
.then((res) => {
this.materials = res;
});
},
handleStep(val) {
//点击步骤条
if (this.stepSuc.includes(val) === true) {
this.active = val;
}
},
//组件点击上一步
handleLastStep() {
this.active = 0;
},
//组件点击下一步
handleNextStep() {
let that = this;
let form = {};
form.name = that.form.name;
form.material = that.form.material;
if (that.form.id) {
that.$API.mtm.routepack.update
.req(that.form.id, that.form)
.then((res) => {
that.routepack = res.id;
that.query.routepack = res.id;
console.log("that.query", that.query);
that.apiObj = that.$API.mtm.route.list;
that.active = 1;
// that.$refs.tables.refresh();
});
} else {
that.$API.mtm.routepack.create.req(form).then((res) => {
this.active = 1;
that.routepack = res.id;
});
}
},
table_add() {
this.dialog.save = true;
this.$nextTick(() => {
this.$refs.saveDialog.open("add");
});
},
table_edit(row) {
this.dialog.save = true;
this.$nextTick(() => {
this.$refs.saveDialog.open("edit").setData(row);
});
},
productClick(data) {
let materialId = this.selectedProduct.id;
if (data) {
this.selectedProduct = data;
materialId = data.id;
}
this.$API.mtm.route.list
.req({ page: 0, material: materialId })
.then((res) => {
this.currentRoute = res;
});
},
submitOut() {},
//删除工序步骤
delWorker(row) {
let that = this;
that.$API.mtm.route.delete
.req(row.id)
.then((res) => {
that.$message.success("工序步骤删除成功");
that.$refs.tables.refresh();
return res;
})
.catch((err) => {
return err;
});
},
//渲染工单提交按钮
getInit() {
let that = this;
that.$API.wf.workflow.initkey.req("routepack").then((res) => {
that.initForm = res;
});
},
//提交,创建工单
submitTicketCreate(id) {
let that = this;
let ticket = {};
that.isSaveing = true;
ticket.title = that.form.name;
ticket.workflow = that.initForm.workflow;
ticket.ticket_data = {
t_id: that.routepack,
};
ticket.transition = id;
that.$API.wf.ticket.create
.req(ticket)
.then((res) => {
that.tLoading = false;
that.$message.success("提交成功");
that.$emit("close");
that.visible = false;
})
.catch((e) => {
that.tLoading = false;
});
},
//本地更新数据
handleSaveSuccess() {
this.$refs.tables.refresh();
},
},
};
</script>