2025-11-11 11:17:15 +08:00

299 lines
8.1 KiB
Vue

<template>
<div>
<div>
<el-form :model="queryParams" label-position="right" inline ref="queryRef" v-show="showSearch"
@submit.prevent>
<el-form-item label="物料类型名称" prop="materialTypeName">
<el-input v-model.trim="queryParams.materialTypeName" placeholder="请输入物料类型名称" clearable />
</el-form-item>
<el-form-item>
<el-button icon="search" type="primary" @click="handleQuery">{{ $t('btn.search')
}}</el-button>
<el-button icon="refresh" @click="resetQuery">{{ $t('btn.reset') }}</el-button>
</el-form-item>
<el-row :gutter="15" class="mb10">
<el-col :span="1.5">
<el-button type="primary" v-hasPermi="['business:processmodeloperation:add']" plain icon="plus"
@click="handleAdd">
{{ $t('btn.add') }}
</el-button>
</el-col>
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"
:columns="columns"></right-toolbar>
</el-row>
</el-form>
<!-- 工具区域 -->
<el-row :gutter="15" class="mb10">
</el-row>
<el-table :data="dataList" v-loading="loading" ref="table" border
header-cell-class-name="el-table-header-cell" highlight-current-row @sort-change="sortChange">
<el-table-column prop="materialTypeName" label="物料类型名称" align="center" :show-overflow-tooltip="true" />
<el-table-column prop="materialType" label="物料类型编码" align="center" :show-overflow-tooltip="true" />
<el-table-column prop="createName" label="创建人" align="center" />
<el-table-column prop="createTime" label="创建时间" align="center" />
<el-table-column label="操作" width="160">
<template #default="scope">
<el-button type="success" size="small" icon="edit" title="编辑"
v-hasPermi="['business:processmodeloperation:edit']"
@click="handleUpdate(scope.row)"></el-button>
<el-button type="danger" size="small" icon="delete" title="删除"
v-hasPermi="['business:processmodeloperation:delete']"
@click="handleDelete(scope.row)"></el-button>
</template>
</el-table-column>
</el-table>
<pagination :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
@pagination="getList" />
</div>
<div>
</div>
<el-dialog :title="title" :lock-scroll="false" v-model="open" width="500">
<el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
<el-row :gutter="20">
<el-col :lg="24">
<el-form-item label="物料类型名称" prop="materialTypeName">
<el-input v-model="form.materialTypeName" placeholder="请输入物料类型名称" />
</el-form-item>
</el-col>
<el-col :lg="24">
<el-form-item label="物料类型编码" prop="materialType">
<el-input v-model="form.materialType" placeholder="请输入物料类型编码" />
</el-form-item>
</el-col>
</el-row>
</el-form>
<template #footer>
<el-button text @click="cancel">{{ $t('btn.cancel') }}</el-button>
<el-button type="primary" @click="submitForm">{{ $t('btn.submit') }}</el-button>
</template>
</el-dialog>
</div>
</template>
<script setup name="processInformationManagement">
import { ElMessageBox, ElMessage } from 'element-plus'
// import { getProcessInfoList, getProcessInfoById, addProcessInfo, updateProcessInfo, delProcessInfo } from "@/api/processRouteManagement/processInformationManagement/index"
import { getCache, addCache, updateCache, delCache } from "@/api/basicDataManagement/categoryManagement/index"
import useUserStore from '@/store/modules/user'
import { getToken } from '@/utils/auth'
const dialogTableVisible = ref(false)
const userStore = useUserStore()
const userId = userStore.userId
const userName = userStore.userName
console.log(userStore.userId, 'userStore.userId') //
import { ref, reactive, getCurrentInstance } from 'vue';
// 使用ref和reactive初始化响应式数据
const { proxy } = getCurrentInstance()
const ids = ref([])
const loading = ref(false)
const showSearch = ref(true)
const show = ref(false)
const dataList = ref([])
const open = ref(false)
// 查询参数
const queryParams = reactive({
pageNum: 1,
pageSize: 10,
})
function getList() {
getCache(queryParams).then(res => {
if (res.code == 200) {
dataList.value = res.data.result
total.value = res.data.totalNum
console.log(dataList.value, 'dataList.value表格数据');
console.log(res, 'res表格数据');
}
})
}
// 列配置
const columns = ref([
{ visible: true, prop: 'processCode', label: '物料物料类型编码' },
{ visible: true, prop: 'processName', label: '物料名称' },
{ visible: true, prop: 'operationSeq', label: '工艺顺序号' },
{ visible: true, prop: 'workCenter', label: '工作中心/设备/车间' },
{ visible: true, prop: 'standardTime', label: '标准工时(分钟)' },
{ visible: true, prop: 'description', label: '工艺描述' }
])
const total = ref(0)
const detailTotail = ref(0)
const queryRef = ref()
// 模拟工艺路线选项数据
const options = ref([
{ routingCode: 'ROUTING_001', routingName: '电子产品组装工艺' },
{ routingCode: 'ROUTING_002', routingName: '机械零件加工工艺' },
{ routingCode: 'ROUTING_003', routingName: '塑料制品成型工艺' }
])
// 模拟工艺数据
const mockProcessData = [
]
// 查询
function handleQuery() {
queryParams.pageNum = 1
getList()
}
// 重置查询
function resetQuery() {
proxy.resetForm('queryRef')
queryParams.processCode = null
queryParams.processName = null
queryParams.pageSize = 10
handleQuery()
}
// 自定义排序
function sortChange(column) {
// 在实际应用中实现排序逻辑
console.log('排序字段:', column.prop, '排序方式:', column.order)
}
// 表单相关
const formRef = ref()
const title = ref('')
const state = reactive({
form: {
id: null,
RoutingCode: '',
processCode: '',
processName: '',
operationSeq: null,
workCenter: '',
standardTime: null,
description: ''
},
rules: {
materialTypeName: [{ required: true, message: '物料名称不能为空', trigger: 'blur' }],
materialType: [{ required: true, message: '物料编码不能为空', trigger: 'blur' }],
operationSeq: [
{ required: true, message: '工艺顺序号不能为空', trigger: 'blur' },
{ type: 'number', message: '工艺顺序号必须为数字', trigger: 'blur' }
],
standardTime: [
{ required: true, message: '标准工时不能为空', trigger: 'blur' },
{ type: 'number', message: '标准工时必须为数字', trigger: 'blur' }
]
}
})
const { form, rules } = toRefs(state)
// 关闭弹窗
function cancel() {
open.value = false
reset()
}
// 重置表单
function reset() {
form.value = {
id: null,
RoutingCode: '',
processCode: '',
processName: '',
operationSeq: null,
workCenter: '',
standardTime: null,
description: ''
}
proxy.resetForm('formRef')
}
const opertype = ref(0)
// 添加工艺
function handleAdd() {
reset()
open.value = true
title.value = '添加工艺'
opertype.value = 1
}
// 修改工艺
function handleUpdate(row) {
reset()
form.value = { ...row }
open.value = true
title.value = '修改工艺'
opertype.value = 2
}
// 提交表单
function submitForm() {
let data = {
...form.value,
userId: userId,
userName: userName
}
proxy.$refs["formRef"].validate((valid) => {
if (valid) {
if (opertype.value === 2) {
updateCache(data).then(res => {
if (res.code == 200) {
ElMessage({
message: '修改成功',
type: 'success',
})
getList()
}
})
} else {
addCache(data).then(res => {
if (res.code == 200) {
ElMessage({
message: '新增成功',
type: 'success',
})
}
getList()
})
}
open.value = false
}
})
}
// 删除工艺
function handleDelete(row) {
proxy.$confirm(
'确认删除该条数据吗?',
'提示',
{ confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }
).then(() => {
delCache(row.id).then(res => {
if (res.code === 200) {
ElMessage({ message: '删除成功', type: 'success' });
getList();
}
});
});
}
// 树节点选择
function handlerTreeSelected(id) {
queryParams.RoutingCode = id
handleQuery()
}
// 初始化加载数据
getList()
</script>