<template>
|
<div class="app-container">
|
<div class="search_form">
|
<el-form :model="searchForm"
|
:inline="true">
|
<el-form-item label="规格名称:">
|
<el-input v-model="searchForm.model"
|
placeholder="请输入"
|
clearable
|
prefix-icon="Search"
|
style="width: 200px;"
|
@change="handleQuery" />
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary"
|
@click="handleQuery">搜索</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
<div class="table_list">
|
<div style="text-align: right"
|
class="mb10">
|
<el-button type="primary"
|
@click="showNewModal">新增工艺路线</el-button>
|
<el-button type="danger"
|
@click="handleDelete"
|
:disabled="selectedRows.length === 0"
|
plain>删除工艺路线</el-button>
|
</div>
|
<PIMTable rowKey="id"
|
:column="tableColumn"
|
:tableData="tableData"
|
:page="page"
|
:isSelection="true"
|
@selection-change="handleSelectionChange"
|
:tableLoading="tableLoading"
|
@pagination="pagination"
|
:total="page.total" />
|
</div>
|
<new-process v-if="isShowNewModal"
|
v-model:visible="isShowNewModal"
|
@completed="getList" />
|
<edit-process v-if="isShowEditModal"
|
v-model:visible="isShowEditModal"
|
:record="record"
|
@completed="getList" />
|
<route-item-form v-if="isShowItemModal"
|
v-model:visible="isShowItemModal"
|
:record="record"
|
@completed="getList" />
|
</div>
|
</template>
|
|
<script setup>
|
import { onMounted, ref, reactive, toRefs, getCurrentInstance } from "vue";
|
import NewProcess from "@/views/productionManagement/processRoute/New.vue";
|
import EditProcess from "@/views/productionManagement/processRoute/Edit.vue";
|
import RouteItemForm from "@/views/productionManagement/processRoute/ItemsForm.vue";
|
import {
|
listPage,
|
del,
|
update,
|
} from "@/api/productionManagement/processRoute.js";
|
import { useRouter } from "vue-router";
|
import { ElMessageBox, ElMessage } from "element-plus";
|
|
const router = useRouter();
|
const data = reactive({
|
searchForm: {
|
model: "",
|
},
|
});
|
const { searchForm } = toRefs(data);
|
const tableColumn = ref([
|
{
|
label: "工艺路线编号",
|
prop: "processRouteCode",
|
},
|
{
|
label: "产品名称",
|
prop: "productName",
|
},
|
{
|
label: "规格名称",
|
prop: "model",
|
},
|
{
|
label: "BOM编号",
|
prop: "bomNo",
|
},
|
{
|
label: "描述",
|
prop: "description",
|
},
|
{
|
dataType: "action",
|
label: "操作",
|
align: "center",
|
fixed: "right",
|
width: 280,
|
operation: [
|
{
|
name: "编辑",
|
type: "text",
|
clickFun: row => {
|
showEditModal(row);
|
},
|
},
|
{
|
name: "路线项目",
|
type: "text",
|
clickFun: row => {
|
showItemModal(row);
|
},
|
},
|
{
|
name: "批准",
|
type: "primary",
|
text: true,
|
showHide: row => {
|
return !row.status;
|
},
|
clickFun: row => {
|
handleApproveRoute(row);
|
},
|
},
|
{
|
name: "取消批准",
|
type: "warning",
|
text: true,
|
showHide: row => {
|
return row.status;
|
},
|
clickFun: row => {
|
handleRevokeApproveRoute(row);
|
},
|
},
|
],
|
},
|
]);
|
const tableData = ref([]);
|
const selectedRows = ref([]);
|
const tableLoading = ref(false);
|
const isShowNewModal = ref(false);
|
const isShowEditModal = ref(false);
|
const isShowItemModal = ref(false);
|
const record = ref({});
|
const page = reactive({
|
current: 1,
|
size: 100,
|
total: 0,
|
});
|
const { proxy } = getCurrentInstance();
|
|
// 查询列表
|
/** 搜索按钮操作 */
|
const handleQuery = () => {
|
page.current = 1;
|
getList();
|
};
|
|
const pagination = obj => {
|
page.current = obj.page;
|
page.size = obj.limit;
|
getList();
|
};
|
const getList = () => {
|
tableLoading.value = true;
|
const params = { ...searchForm.value, ...page };
|
params.entryDate = undefined;
|
listPage(params)
|
.then(res => {
|
tableLoading.value = false;
|
tableData.value = res.data.records.map(item => ({
|
...item,
|
}));
|
page.total = res.data.total;
|
})
|
.catch(err => {
|
tableLoading.value = false;
|
});
|
};
|
// 表格选择数据
|
const handleSelectionChange = selection => {
|
selectedRows.value = selection;
|
};
|
|
// 打开新增弹框
|
const showNewModal = () => {
|
isShowNewModal.value = true;
|
};
|
|
const showEditModal = row => {
|
isShowEditModal.value = true;
|
record.value = row;
|
};
|
|
const showItemModal = row => {
|
router.push({
|
path: "/productionManagement/processRouteItem",
|
query: {
|
id: row.id,
|
processRouteCode: row.processRouteCode || "",
|
productName: row.productName || "",
|
model: row.model || "",
|
bomNo: row.bomNo || "",
|
bomId: row.bomId || null,
|
description: row.description || "",
|
type: "route",
|
},
|
});
|
};
|
|
// 删除
|
function handleDelete() {
|
const ids = selectedRows.value.map(item => item.id);
|
proxy.$modal
|
.confirm("是否确认删除已勾选的数据项？")
|
.then(function () {
|
return del(ids);
|
})
|
.then(() => {
|
getList();
|
proxy.$modal.msgSuccess("删除成功");
|
})
|
.catch(() => {});
|
}
|
|
// 批准工艺路线
|
const handleApproveRoute = route => {
|
ElMessageBox.confirm("确定要批准该工艺路线吗？", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "info",
|
}).then(() => {
|
// 调用修改接口，只修改status字段为批准状态
|
update({ id: route.id, status: true })
|
.then(res => {
|
ElMessage.success("批准成功");
|
getList();
|
})
|
.catch(err => {
|
ElMessage.error("批准失败");
|
});
|
});
|
};
|
|
// 取消批准工艺路线
|
const handleRevokeApproveRoute = route => {
|
ElMessageBox.confirm("确定要撤销批准该工艺路线吗？", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning",
|
}).then(() => {
|
// 调用修改接口，只修改status字段为草稿状态
|
update({ id: route.id, status: false })
|
.then(res => {
|
ElMessage.success("撤销批准成功");
|
getList();
|
})
|
.catch(err => {
|
ElMessage.error("撤销批准失败");
|
});
|
});
|
};
|
|
onMounted(() => {
|
getList();
|
});
|
</script>
|
|
<style scoped></style>
|
