450 lines
16 KiB
Vue
450 lines
16 KiB
Vue
<!--
|
||
* @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')" />
|
||
<el-table-column prop="workstaionType" label="工站类别" align="center" >
|
||
</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')" />
|
||
<el-table-column prop="plcIP" label="PLC地址" align="center" :show-overflow-tooltip="true" />
|
||
<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="请输入产线编号" /> -->
|
||
<el-select v-model="form.fkProductlinebody" placeholder="请选择产线编号" style="width: 100%">
|
||
<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">
|
||
<el-form-item label="PLC地址" prop="plcIP">
|
||
<el-input v-model="form.plcIP" placeholder="请输入"></el-input>
|
||
</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
|
||
getPlantSelectData()
|
||
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; */
|
||
}
|
||
</style> |