450 lines
16 KiB
Vue
Raw Normal View History

2026-01-10 16:02:52 +08:00
<!--
* @Descripttion: (工站/资源组/plant_workstation)
* @Author: (admin)
* @Date: (2025-11-15)
-->
<template>
<div>
<el-form :model="queryParams" label-position="right" inline ref="queryRef" v-show="showSearch" @submit.prevent>
<el-form-item label="工厂编号" prop="fkFactorySiteCode">
<el-input v-model="queryParams.fkFactorySiteCode" placeholder="请输入工厂编号" clearable />
</el-form-item>
<el-form-item label="产线编号" prop="fkProductlinebody">
<el-input v-model="queryParams.fkProductlinebody" placeholder="请输入产线编号" clearable />
</el-form-item>
<el-form-item label="车间编号" prop="fkWorkshopCode">
<el-input v-model="queryParams.fkWorkshopCode" placeholder="请输入车间编号" clearable />
</el-form-item>
<el-form-item label="工站名称" prop="workstationName">
<el-input v-model="queryParams.workstationName" placeholder="请输入工站名称" clearable />
</el-form-item>
<el-form-item label="工站编号" prop="workstationCode">
<el-input v-model="queryParams.workstationCode" 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-form>
<!-- 工具区域 -->
<el-row :gutter="15" class="mb10">
<el-col :span="1.5">
<el-button type="primary" v-hasPermi="['business:plantworkstation: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-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 type="index" width="70" label="序号" align="center" />
<el-table-column prop="fkFactorySiteCode" label="工厂编号" align="center" :show-overflow-tooltip="true"
v-if="columns.showColumn('fkFactorySiteCode')" />
<el-table-column prop="fkWorkshopCode" label="车间编号" align="center" :show-overflow-tooltip="true"
v-if="columns.showColumn('fkWorkshopCode')" />
<el-table-column prop="fkProductlinebody" label="产线编号" align="center" :show-overflow-tooltip="true"
v-if="columns.showColumn('fkProductlinebody')" />
<el-table-column prop="workstationCode" label="工站编号" align="center" :show-overflow-tooltip="true"
v-if="columns.showColumn('workstationCode')" />
<el-table-column prop="workstationName" label="工站名称" align="center" :show-overflow-tooltip="true"
v-if="columns.showColumn('workstationName')" />
2026-01-12 11:22:44 +08:00
<el-table-column prop="workstaionType" label="工站类别" align="center" >
2026-01-10 16:02:52 +08:00
</el-table-column>
<el-table-column prop="description" label="描述" align="center" :show-overflow-tooltip="true"
v-if="columns.showColumn('description')" />
<el-table-column prop="functionGroupCode" label="功能组编码" align="center" :show-overflow-tooltip="true"
v-if="columns.showColumn('functionGroupCode')" />
2026-01-29 11:26:20 +08:00
<el-table-column prop="plcIP" label="PLC地址" align="center" :show-overflow-tooltip="true" />
2026-01-10 16:02:52 +08:00
<el-table-column prop="functionGroupName" label="功能组名称" align="center" :show-overflow-tooltip="true"
v-if="columns.showColumn('functionGroupName')" />
<el-table-column prop="isReplaceable" label="是否可替换" align="center">
<template #default="scope">
<el-tag type="success" v-if="scope.row.isReplaceable == 1"></el-tag>
<el-tag type="info" v-if="scope.row.isReplaceable == 0"></el-tag>
</template>
</el-table-column>
<el-table-column label="操作" width="160">
<template #default="scope">
<el-button type="success" size="small" icon="edit" title="编辑" v-hasPermi="['business:plantworkstation:edit']"
@click="handleUpdate(scope.row)"></el-button>
<el-button type="danger" size="small" icon="delete" title="删除"
v-hasPermi="['business:plantworkstation: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" />
<!-- 添加或修改工站/资源组对话框 -->
<el-dialog :title="title" :lock-scroll="false" v-model="open" width="1000px">
<el-form ref="formRef" :model="form" :rules="rules" label-width="110px">
<el-row :gutter="20">
<el-col :lg="12">
<el-form-item label="工厂编号" prop="fkFactorySiteCode">
<!-- <el-input v-model="form.fkFactorySiteCode" placeholder="请输入工厂编号" /> -->
<el-select @change="handleFactory" v-model="form.fkFactorySiteCode" placeholder="请选择工厂编号"
style="width: 100%">
<el-option v-for="item in getPlantSelectList" :key="item.value" :label="item.label"
:value="item.value"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item label="车间编号" prop="fkWorkshopCode">
<!-- <el-input v-model="form.fkWorkshopCode" placeholder="请输入车间编号" /> -->
<el-select @change="handleChangeWorkshopCode" v-model="form.fkWorkshopCode" placeholder="请选择车间编号"
style="width: 100%">
<el-option v-for="item in getPlantWorkshopSelectList" :key="item.value" :label="item.label"
:value="item.value"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item label="产线编号" prop="fkProductlinebody">
<!-- <el-input v-model="form.fkProductlinebody" placeholder="请输入产线编号" /> -->
2026-01-13 13:44:24 +08:00
<el-select v-model="form.fkProductlinebody" placeholder="请选择产线编号" style="width: 100%">
2026-01-10 16:02:52 +08:00
<el-option v-for="item in productlinebodySelect" :key="item.value" :label="item.label"
:value="item.value" />
</el-select>
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item label="工站名称" prop="workstationName">
<el-input v-model="form.workstationName" placeholder="请输入工站名称" />
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item label="工站编号" prop="workstationCode">
<el-input v-model="form.workstationCode" placeholder="请输入工站编号" :disabled="opertype != 1" />
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item label="功能组编码" prop="">
<el-input v-model="form.functionGroupCode" placeholder="请输入功能组编码" />
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item label="功能组名称" prop="functionGroupName">
<el-input v-model="form.functionGroupName" placeholder="请输入功能组名称" />
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item label="工站类别" prop="workstaionType">
<el-input v-model="form.workstaionType" placeholder="请输入工站类别" />
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item label="是否可替换" prop="isReplaceable">
<el-select v-model="form.isReplaceable" placeholder="请选择">
<el-option v-for="item in options.isReplaceableOptions" :key="item.dictValue" :label="item.dictLabel"
:value="item.dictValue"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :lg="12">
2026-01-29 11:26:20 +08:00
<el-form-item label="PLC地址" prop="plcIP">
<el-input v-model="form.plcIP" placeholder="请输入"></el-input>
2026-01-10 16:02:52 +08:00
</el-form-item>
</el-col>
<el-col :lg="24">
<el-form-item label="描述" prop="description">
<el-input type="textarea" v-model="form.description" placeholder="请输入描述" />
</el-form-item>
</el-col>
</el-row>
</el-form>
<template #footer v-if="opertype != 3">
<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="plantworkstation">
import {
listPlantWorkstation,
addPlantWorkstation, delPlantWorkstation,
updatePlantWorkstation, getPlantWorkstation,
getPlantSelect, getPlantWorkshopSelect, getPlantProductlineSelect
}
from '@/api/masterDataManagement/plant/plantworkstation.js'
const { proxy } = getCurrentInstance()
const ids = ref([])
const loading = ref(false)
const showSearch = ref(true)
const getPlantSelectList = ref([])
const getPlantWorkshopSelectList = ref([])
const productlinebodySelect = ref([])
const queryParams = reactive({
pageNum: 1,
pageSize: 10,
sort: '',
sortType: 'asc',
})
const columns = ref([
{ visible: true, prop: 'workstationId', label: '工站id' },
{ visible: true, prop: 'fkFactorySiteCode', label: '工厂编号' },
{ visible: true, prop: 'fkWorkshopCode', label: '车间编号' },
{ visible: true, prop: 'fkProductlinebody', label: '产线编号' },
{ visible: true, prop: 'workstationCode', label: '工站编号' },
{ visible: true, prop: 'workstationName', label: '工站名称' },
{ visible: true, prop: 'workstaionType', label: '工站类别' },
{ visible: true, prop: 'description', label: '描述' },
{ visible: false, prop: 'functionGroupCode', label: '功能组编码' },
{ visible: false, prop: 'functionGroupName', label: '功能组名称' },
{ visible: false, prop: 'isReplaceable', label: '是否可替换1=可替换0=不可替换' },
{ visible: false, prop: 'createdBy', label: '创建人' },
{ visible: false, prop: 'createdTime', label: '创建时间' },
{ visible: false, prop: 'updatedBy', label: '更新人' },
{ visible: false, prop: 'updatedTime', label: '更新时间' },
])
const total = ref(0)
const dataList = ref([])
const queryRef = ref()
const defaultTime = ref([new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)])
var dictParams = [
]
function getPlantSelectData() {
getPlantSelect().then(res => {
if (res.code == 200) {
getPlantSelectList.value = res.data.map(item => {
return {
value: item.siteCode,
label: item.siteCode + item.siteName
}
})
}
})
}
function getList() {
loading.value = true
listPlantWorkstation(queryParams).then(res => {
const { code, data } = res
if (code == 200) {
dataList.value = data.result
total.value = data.totalNum
loading.value = false
}
})
}
// 查询
function handleQuery() {
queryParams.pageNum = 1
getList()
}
// 重置查询操作
function resetQuery() {
proxy.resetForm("queryRef")
handleQuery()
}
// 自定义排序
function sortChange(column) {
var sort = undefined
var sortType = undefined
if (column.prop != null && column.order != null) {
sort = column.prop
sortType = column.order
}
queryParams.sort = sort
queryParams.sortType = sortType
handleQuery()
}
/*************** form操作 ***************/
const formRef = ref()
const title = ref('')
// 操作类型 1、add 2、edit 3、view
const opertype = ref(0)
const open = ref(false)
const state = reactive({
single: true,
multiple: true,
form: {},
rules: {
fkFactorySiteCode: [{ required: true, message: "工厂编号不能为空", trigger: "blur" }],
fkWorkshopCode: [{ required: true, message: "车间编号不能为空", trigger: "blur" }],
functionGroupCode: [{ required: true, message: "功能组编码不能为空", trigger: "blur" }],
workstationName: [{ required: true, message: "工站名称不能为空", trigger: "blur" }],
workstationCode: [{ required: true, message: "工站编号不能为空", trigger: "blur" }],
fkProductlinebody: [{ required: true, message: "产线编号不能为空", trigger: "blur" }],
},
options: {
// 工站类别 选项列表 格式 eg:{ dictLabel: '标签', dictValue: '0'}
workstaionTypeOptions: [],
// 是否可替换1=可替换0=不可替换 选项列表 格式 eg:{ dictLabel: '标签', dictValue: '0'}
isReplaceableOptions: [
{ dictLabel: '是', dictValue: '1' },
{ dictLabel: '否', dictValue: '0' },
],
}
})
const { form, rules, options, single, multiple } = toRefs(state)
// 关闭dialog
function cancel() {
open.value = false
reset()
}
// 重置表单
function reset() {
form.value = {
workstationId: null,
fkFactorySiteCode: null,
fkWorkshopCode: null,
fkProductlinebody: null,
workstationCode: null,
workstationName: null,
workstaionType: null,
description: null,
functionGroupCode: null,
functionGroupName: null,
isReplaceable: null,
createdBy: null,
createdTime: null,
updatedBy: null,
updatedTime: null,
};
proxy.resetForm("formRef")
}
// 添加按钮操作
function handleAdd() {
reset();
open.value = true
title.value = '添加工站/资源组'
opertype.value = 1
getPlantSelectData()
}
// 修改按钮操作
function handleUpdate(row) {
reset()
const id = row.workstationId || ids.value
getPlantWorkstation(id).then((res) => {
const { code, data } = res
if (code == 200) {
open.value = true
title.value = '修改工站/资源组'
opertype.value = 2
2026-01-12 08:49:22 +08:00
getPlantSelectData()
2026-01-10 16:02:52 +08:00
form.value = {
...data,
isReplaceable: data.isReplaceable == 1 ? '1' : '0',
}
}
})
}
const selectS = ref(null)
function handleFactory(val) {
selectS.value = val
getPlantWorkshopSelect({ site_code: val }).then(res => {
if (res.code == 200) {
getPlantWorkshopSelectList.value = res.data.map(item => {
return {
value: item.workshopCode,
label: item.workshopCode + item.workshopName
}
})
}
})
}
function handleChangeWorkshopCode(val) {
let data = { site_code: selectS.value, workshop_code: val }
getPlantProductlineSelect(data).then(res => {
if (res.code == 200) {
productlinebodySelect.value = res.data.map(item => {
return {
value: item.lineCode,
label: item.lineCode + '-' + item.lineName
}
})
}
})
}
// 添加&修改 表单提交
function submitForm() {
proxy.$refs["formRef"].validate((valid) => {
if (valid) {
if (form.value.workstationId != undefined && opertype.value === 2) {
updatePlantWorkstation(form.value).then((res) => {
proxy.$modal.msgSuccess("修改成功")
open.value = false
getList()
})
} else {
addPlantWorkstation(form.value).then((res) => {
proxy.$modal.msgSuccess("新增成功")
open.value = false
getList()
})
}
}
})
}
// 删除按钮操作
function handleDelete(row) {
const Ids = row.workstationId || ids.value
console.log(row);
proxy
.$confirm('是否确认删除工站名称为"' + row.workstationName + '"的数据项?')
.then(function () {
return delPlantWorkstation(Ids)
})
.then(() => {
getList()
proxy.$modal.msgSuccess("删除成功")
})
}
handleQuery()
</script>
<style scoped>
::v-deep .el-select__wrapper {
align-items: center;
background-color: var(--el-fill-color-blank);
border-radius: var(--el-border-radius-base);
box-shadow: 0 0 0 1px var(--el-border-color) inset;
box-sizing: border-box;
cursor: pointer;
display: flex;
font-size: 14px;
gap: 6px;
line-height: 24px;
min-height: 32px;
padding: 4px 12px;
position: relative;
text-align: left;
transform: translateZ(0);
transition: var(--el-transition-duration);
/* width: 365px; */
2026-01-10 16:02:52 +08:00
}
</style>