fix:工步树形结构
This commit is contained in:
17630416519
parent
4ad9120801
commit
83fe53a6d9
@ -89,4 +89,13 @@ export function delProcessmodelOperationStepDetail(id) {
|
||||
url: 'business/ProcessmodelOperationStep/deleteAccount' + id,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
|
||||
//左侧树形结构
|
||||
export function listProcessmodelOperationStepTree(query) {
|
||||
return request({
|
||||
url: 'business/ProcessmodelOperationStep/modelProcessList',
|
||||
method: 'get',
|
||||
params: query,
|
||||
})
|
||||
}
|
||||
55
src/views/processSteps/components/tree.vue
Normal file
55
src/views/processSteps/components/tree.vue
Normal file
@ -0,0 +1,55 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form>
|
||||
<el-input clearable placeholder="请输入工艺名称" v-model="filterText">
|
||||
</el-input>
|
||||
</el-form>
|
||||
|
||||
<el-tree :data="data" :props="treeProps" :expand-on-click-node="false" ref="deptTreeRef" node-key="processCode"
|
||||
highlight-current default-expand-all :filter-node-method="filterNode" :current-node-key="defaultSelected"
|
||||
@node-click="handleNodeClick" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="BaseDeviceTypeTree">
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
defaultSelected: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits()
|
||||
|
||||
const { proxy } = getCurrentInstance()
|
||||
const filterText = ref('')
|
||||
const deptTreeRef = ref()
|
||||
|
||||
// 定义树节点的显示属性
|
||||
const treeProps = {
|
||||
label: (data) => {
|
||||
return data.processName || '暂无数据';
|
||||
}
|
||||
}
|
||||
|
||||
// 监听过滤文本变化
|
||||
watch(filterText, (val) => {
|
||||
deptTreeRef.value.filter(val)
|
||||
})
|
||||
|
||||
// 树节点过滤方法
|
||||
function filterNode(value, data) {
|
||||
if (!value) return true
|
||||
return (data.processName && data.processName.includes(value))
|
||||
}
|
||||
|
||||
function handleNodeClick(data) {
|
||||
emit('selected', data.processCode)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@ -1,105 +1,99 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form :model="queryParams" label-position="right" inline ref="queryRef" v-show="showSearch" @submit.prevent>
|
||||
<el-form-item label="工步编码" prop="stepCode">
|
||||
<el-input v-model="queryParams.stepCode" placeholder="请输入工步编码" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="工步名称" prop="stepName">
|
||||
<el-input v-model="queryParams.stepName" 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>
|
||||
|
||||
</el-row>
|
||||
<!-- 工具区域 -->
|
||||
<el-row :gutter="15" class="mb10">
|
||||
<el-col :span="1.5">
|
||||
<el-button type="primary" v-hasPermi="['business:processmodeloperationstep:add']" plain icon="plus"
|
||||
@click="handleAdd">
|
||||
{{ $t('btn.add') }}
|
||||
</el-button>
|
||||
<el-col :span="3">
|
||||
<Typetree :data="treeData" :default-selected="defaultSelectedProcessCode"
|
||||
@selected="handlerTreeSelected">
|
||||
</Typetree>
|
||||
</el-col>
|
||||
<el-col :span="21">
|
||||
<el-form :model="queryParams" label-position="right" inline ref="queryRef" v-show="showSearch"
|
||||
@submit.prevent>
|
||||
<el-form-item label="工步编码" prop="stepCode">
|
||||
<el-input v-model="queryParams.stepCode" placeholder="请输入工步编码" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="工步名称" prop="stepName">
|
||||
<el-input v-model="queryParams.stepName" 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:processmodeloperationstep: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 prop="stepCode" label="工步编码" align="center" :show-overflow-tooltip="true"
|
||||
v-if="columns.showColumn('stepCode')" />
|
||||
<el-table-column prop="stepName" label="工步名称" align="center" :show-overflow-tooltip="true"
|
||||
v-if="columns.showColumn('stepName')" />
|
||||
<el-table-column prop="processCode" label="所属工序" align="center" :show-overflow-tooltip="true"
|
||||
v-if="columns.showColumn('operationCode')" />
|
||||
<el-table-column prop="description" label="工步描述" align="center" :show-overflow-tooltip="true"
|
||||
v-if="columns.showColumn('description')" />
|
||||
<el-table-column prop="createTime" label="创建时间" align="center" :show-overflow-tooltip="true" />
|
||||
<el-table-column prop="updateTime" label="更新时间" align="center" :show-overflow-tooltip="true" />
|
||||
<el-table-column prop="isActive" label="是否有效" align="center" v-if="columns.showColumn('isActive')">
|
||||
<template #default="scope">
|
||||
<el-tag v-if="scope.row.isActive == '1'" type="success">有效</el-tag>
|
||||
<el-tag v-if="scope.row.isActive == '0'" type="danger">无效</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="remark" label="备注" align="center" :show-overflow-tooltip="true"
|
||||
v-if="columns.showColumn('remark')" />
|
||||
<el-table-column label="操作" width="200">
|
||||
<template #default="scope">
|
||||
<el-button type="warning" size="small" title="详情"
|
||||
@click="handleDetails(scope.row)">详情</el-button>
|
||||
<el-button type="success" size="small" title="编辑"
|
||||
v-hasPermi="['business:processmodeloperationstep:edit']"
|
||||
@click="handleUpdate(scope.row)">编辑</el-button>
|
||||
<el-button type="danger" size="small" title="删除"
|
||||
v-hasPermi="['business:processmodeloperationstep: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-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 prop="stepCode" label="工步编码" align="center" :show-overflow-tooltip="true"
|
||||
v-if="columns.showColumn('stepCode')" />
|
||||
<el-table-column prop="stepName" label="工步名称" align="center" :show-overflow-tooltip="true"
|
||||
v-if="columns.showColumn('stepName')" />
|
||||
<el-table-column prop="processCode" label="所属工序" align="center" :show-overflow-tooltip="true"
|
||||
v-if="columns.showColumn('operationCode')" />
|
||||
<el-table-column prop="description" label="工步描述" align="center" :show-overflow-tooltip="true"
|
||||
v-if="columns.showColumn('description')" />
|
||||
<el-table-column prop="createTime" label="创建时间" align="center" :show-overflow-tooltip="true" />
|
||||
<el-table-column prop="updateTime" label="更新时间" align="center" :show-overflow-tooltip="true" />
|
||||
<el-table-column prop="isActive" label="是否有效" align="center" v-if="columns.showColumn('isActive')">
|
||||
<template #default="scope">
|
||||
<!-- <dict-tag :options="options.isActiveOptions" :value="scope.row.isActive" /> -->
|
||||
<el-tag v-if="scope.row.isActive == '1'" type="success">有效</el-tag>
|
||||
<el-tag v-if="scope.row.isActive == '0'" type="danger">无效</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="remark" label="备注" align="center" :show-overflow-tooltip="true"
|
||||
v-if="columns.showColumn('remark')" />
|
||||
<el-table-column label="操作" width="200">
|
||||
<template #default="scope">
|
||||
<el-button type="warning" size="small" title="详情" @click="handleDetails(scope.row)">详情</el-button>
|
||||
<el-button type="success" size="small" title="编辑"
|
||||
v-hasPermi="['business:processmodeloperationstep:edit']"
|
||||
@click="handleUpdate(scope.row)">编辑</el-button>
|
||||
<el-button type="danger" size="small" title="删除"
|
||||
v-hasPermi="['business:processmodeloperationstep: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">
|
||||
<el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
|
||||
<el-row :gutter="20">
|
||||
|
||||
<el-col :lg="12">
|
||||
<el-form-item label="工步编码" prop="stepCode">
|
||||
<el-input v-model="form.stepCode" placeholder="请输入工步编码" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :lg="12">
|
||||
<el-form-item label="工步名称" prop="stepName">
|
||||
<el-input v-model="form.stepName" placeholder="请输入工步名称" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :lg="12">
|
||||
<el-form-item label="所属工序" prop="processCode">
|
||||
<el-input v-model="form.processCode" placeholder="请输入所属工序" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :lg="12">
|
||||
<el-form-item label="工步描述" prop="description">
|
||||
<el-input v-model="form.description" placeholder="请输入工步描述" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- <el-col :lg="12">
|
||||
<el-form-item label="绑定设备" prop="bindDeviceValue">
|
||||
<el-select v-model="form.bindDeviceValue" placeholder="请选择">
|
||||
<el-option v-for="item in bindDeviceOptions" :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="isActive">
|
||||
<el-select v-model="form.isActive" placeholder="请选择">
|
||||
@ -109,7 +103,6 @@
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :lg="12">
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="form.remark" placeholder="请输入备注" />
|
||||
@ -126,27 +119,28 @@
|
||||
<!-- 详情 -->
|
||||
<el-dialog v-model="dialogTableVisible" title="详情" width="1200">
|
||||
<el-descriptions :column="2" border>
|
||||
<el-descriptions-item label="工步编码">{{ detailForm.stepCode }}</el-descriptions-item>
|
||||
<el-descriptions-item label="工步名称">{{ detailForm.stepName }}</el-descriptions-item>
|
||||
<el-descriptions-item label="所属工序">{{ detailForm.processCode }}</el-descriptions-item>
|
||||
<el-descriptions-item label="工步描述">{{ detailForm.description }}</el-descriptions-item>
|
||||
<el-descriptions-item label="工步编码">{{ detailForm.stepCode || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="工步名称">{{ detailForm.stepName || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="所属工序">{{ detailForm.processCode || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="工步描述">{{ detailForm.description || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="是否有效">
|
||||
<el-tag v-if="detailForm.isActive == '1'" type="success">有效</el-tag>
|
||||
<el-tag v-if="detailForm.isActive == '0'" type="danger">无效</el-tag>
|
||||
<span v-else>-</span>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="备注">{{ detailForm.remark }}</el-descriptions-item>
|
||||
<el-descriptions-item label="创建时间">{{ detailForm.createTime }}</el-descriptions-item>
|
||||
<el-descriptions-item label="更新时间">{{ detailForm.updateTime }}</el-descriptions-item>
|
||||
<el-descriptions-item label="备注">{{ detailForm.remark || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="创建时间">{{ detailForm.createTime || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="更新时间">{{ detailForm.updateTime || '-' }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
|
||||
<el-divider>关联信息</el-divider>
|
||||
|
||||
<el-form :inline="true" class="mt10" ref="detailQueryRef">
|
||||
<el-form-item label="设备名称">
|
||||
<el-input v-model="detailQuery.deviceName" placeholder="请输入工步名称" />
|
||||
<el-input v-model="detailQuery.deviceName" placeholder="请输入设备名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="设备编号">
|
||||
<el-input v-model="detailQuery.deviceCode" placeholder="请输入工步编码" />
|
||||
<el-input v-model="detailQuery.deviceCode" placeholder="请输入设备编号" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button icon="search" type="primary" @click="handleDetailQuery">{{ $t('btn.search')
|
||||
@ -170,18 +164,10 @@
|
||||
<el-table-column prop="workshop" label="所属车间" align="center" />
|
||||
<el-table-column prop="workline" label="所属产线" align="center" />
|
||||
<el-table-column prop="status" label="设备状态" align="center" />
|
||||
<!-- <el-table-column prop="isActive" label="是否有效" align="center">
|
||||
<template #default="scope">
|
||||
<el-tag v-if="scope.row.isActive == 'True'" type="success">有效</el-tag>
|
||||
<el-tag v-if="scope.row.isActive == 'False'" type="danger">无效</el-tag>
|
||||
</template>
|
||||
</el-table-column> -->
|
||||
<el-table-column prop="deviceSpecification" label="设备规格" align="center" />
|
||||
<el-table-column prop="responsiblePerson" label="设备负责人" align="center" />
|
||||
<!-- <el-table-column prop="remark" label="备注" align="center" /> -->
|
||||
<el-table-column label="操作" width="150" align="center">
|
||||
<template #default="scope">
|
||||
<el-button type="primary" size="small" @click="handleEditDetail(scope.row)">编辑</el-button>
|
||||
<el-button type="danger" size="small" @click="handleDeleteDetail(scope.row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
@ -189,10 +175,6 @@
|
||||
|
||||
<pagination :total="detailFilteredTotal" v-model:page="detailQuery.pageNum"
|
||||
v-model:limit="detailQuery.pageSize" @pagination="handleDetailQuery" class="mt10" />
|
||||
|
||||
<!-- <template #footer>
|
||||
<el-button @click="dialogTableVisible = false">{{ $t('btn.close') }}</el-button>
|
||||
</template> -->
|
||||
</el-dialog>
|
||||
|
||||
<!-- 详情中的新增或修改对话框 -->
|
||||
@ -218,10 +200,13 @@ import {
|
||||
addProcessmodelOperationStep, delProcessmodelOperationStep,
|
||||
updateProcessmodelOperationStep, getProcessmodelOperationStep,
|
||||
listProcessmodelOperationStepDetail, addProcessmodelOperationStepDetail,
|
||||
listProcessmodelOperationStepCascade, delProcessmodelOperationStepDetail
|
||||
}
|
||||
from '@/api/system/processmodeloperationstep.js'
|
||||
import { dayjs, stepProps, ElMessage } from 'element-plus'
|
||||
listProcessmodelOperationStepCascade, delProcessmodelOperationStepDetail,
|
||||
listProcessmodelOperationStepTree
|
||||
} from '@/api/system/processmodeloperationstep.js'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { default as Typetree } from './components/tree.vue'
|
||||
import { nextTick, getCurrentInstance } from "vue"
|
||||
|
||||
const { proxy } = getCurrentInstance()
|
||||
const ids = ref([])
|
||||
const loading = ref(false)
|
||||
@ -230,11 +215,19 @@ const dialogTableVisible = ref(false)
|
||||
const queryParams = reactive({
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
ProcessCode: '',
|
||||
sort: '',
|
||||
sortType: 'asc',
|
||||
})
|
||||
// 级联选择器值（确保始终是数组）
|
||||
const cascadePullDownValue = ref([])
|
||||
// 级联选择器数据源（确保始终是数组）
|
||||
const cascadePullDown = ref([])
|
||||
|
||||
// 树相关数据
|
||||
const treeData = ref([])
|
||||
const defaultSelectedProcessCode = ref('')
|
||||
|
||||
// 详情相关数据
|
||||
const detailForm = ref({})
|
||||
const detailGridData = ref([])
|
||||
@ -275,20 +268,57 @@ 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)])
|
||||
|
||||
// 获取树数据
|
||||
function getTreeList() {
|
||||
const treeParams = {
|
||||
status: 1
|
||||
}
|
||||
|
||||
var dictParams = [
|
||||
]
|
||||
return listProcessmodelOperationStepTree(treeParams).then((res) => {
|
||||
// 确保treeData始终是数组
|
||||
if (res.code === 200 && Array.isArray(res.data)) {
|
||||
const dataWithTreeStructure = res.data.map((item) => ({
|
||||
...item,
|
||||
id: item.processCode,
|
||||
parentId: item.parentId ?? null
|
||||
}));
|
||||
treeData.value = proxy.handleTree(dataWithTreeStructure, 'id', 'parentId', 'children') || [];
|
||||
} else {
|
||||
treeData.value = [];
|
||||
console.error('树形数据格式异常，已重置为空数组');
|
||||
}
|
||||
|
||||
// 默认选中第一个元素
|
||||
if (treeData.value.length > 0) {
|
||||
defaultSelectedProcessCode.value = treeData.value[0].processCode;
|
||||
queryParams.ProcessCode = treeData.value[0].processCode;
|
||||
return getList();
|
||||
}
|
||||
}).catch(err => {
|
||||
console.error('树形数据请求异常', err);
|
||||
treeData.value = []; // 异常时兜底为空数组
|
||||
})
|
||||
}
|
||||
|
||||
function getList() {
|
||||
loading.value = true
|
||||
listProcessmodelOperationStep(queryParams).then(res => {
|
||||
const { code, data } = res
|
||||
if (code == 200) {
|
||||
dataList.value = data.result
|
||||
total.value = data.totalNum
|
||||
loading.value = false
|
||||
loading.value = false;
|
||||
// 确保列表数据始终是数组
|
||||
if (res.code === 200 && res.data) {
|
||||
dataList.value = Array.isArray(res.data.result) ? res.data.result : [];
|
||||
total.value = Number(res.data.totalNum) || 0;
|
||||
} else {
|
||||
dataList.value = [];
|
||||
total.value = 0;
|
||||
ElMessage.error('数据加载失败');
|
||||
}
|
||||
}).catch(err => {
|
||||
loading.value = false;
|
||||
dataList.value = [];
|
||||
total.value = 0;
|
||||
console.error('列表数据请求异常', err);
|
||||
ElMessage.error('数据加载异常');
|
||||
})
|
||||
}
|
||||
|
||||
@ -301,50 +331,28 @@ function handleQuery() {
|
||||
// 重置查询操作
|
||||
function resetQuery() {
|
||||
proxy.resetForm("queryRef")
|
||||
queryParams.ProcessCode = ''
|
||||
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
|
||||
queryParams.sort = column.prop || '';
|
||||
queryParams.sortType = column.order || 'asc';
|
||||
handleQuery()
|
||||
}
|
||||
const value = ref('')
|
||||
|
||||
const options = [
|
||||
{
|
||||
value: '1',
|
||||
label: '有效',
|
||||
},
|
||||
{
|
||||
value: '0',
|
||||
label: '无效',
|
||||
},
|
||||
|
||||
{ value: '1', label: '有效' },
|
||||
{ value: '0', label: '无效' },
|
||||
]
|
||||
|
||||
// 当前可选的线别选项
|
||||
const lineOptions = ref([])
|
||||
|
||||
// 当前可选的设备选项
|
||||
const deviceOptions = ref([])
|
||||
|
||||
/*************** 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: {
|
||||
stepCode: [{ required: true, message: "工步编码不能为空", trigger: "blur" }],
|
||||
@ -352,10 +360,9 @@ const state = reactive({
|
||||
processCode: [{ required: true, message: "所属工序不能为空", trigger: "blur" }],
|
||||
isActive: [{ required: true, message: "是否有效不能为空", trigger: "blur" }],
|
||||
},
|
||||
|
||||
})
|
||||
|
||||
const { form, rules, single, multiple } = toRefs(state)
|
||||
const { form, rules } = toRefs(state)
|
||||
|
||||
// 关闭dialog
|
||||
function cancel() {
|
||||
@ -380,6 +387,7 @@ function reset() {
|
||||
};
|
||||
proxy.resetForm("formRef")
|
||||
}
|
||||
|
||||
// 添加按钮操作
|
||||
function handleAdd() {
|
||||
reset();
|
||||
@ -387,46 +395,66 @@ function handleAdd() {
|
||||
title.value = '添加工步'
|
||||
opertype.value = 1
|
||||
}
|
||||
|
||||
// 修改按钮操作
|
||||
function handleUpdate(row) {
|
||||
reset()
|
||||
const id = row.id || ids.value
|
||||
getProcessmodelOperationStep(id).then((res) => {
|
||||
const { code, data } = res
|
||||
if (code == 200) {
|
||||
if (res.code === 200 && res.data) {
|
||||
open.value = true
|
||||
title.value = '修改工步'
|
||||
opertype.value = 2
|
||||
|
||||
form.value = {
|
||||
...data,
|
||||
isActive: data.isActive === 'True' ? '1' : (data.isActive === 'False' ? '0' : data.isActive),
|
||||
...res.data,
|
||||
isActive: res.data.isActive === 'True' ? '1' : (res.data.isActive === 'False' ? '0' : res.data.isActive),
|
||||
}
|
||||
} else {
|
||||
ElMessage.error('数据获取失败');
|
||||
}
|
||||
}).catch(err => {
|
||||
console.error('详情数据请求异常', err);
|
||||
ElMessage.error('数据获取异常');
|
||||
})
|
||||
}
|
||||
|
||||
// 树形结构选中事件
|
||||
function handlerTreeSelected(val) {
|
||||
queryParams.ProcessCode = val;
|
||||
getList()
|
||||
}
|
||||
|
||||
// 添加&修改 表单提交
|
||||
function submitForm() {
|
||||
proxy.$refs["formRef"].validate((valid) => {
|
||||
if (valid) {
|
||||
// 确保时间格式正确
|
||||
const submitForm = {
|
||||
...form.value,
|
||||
// isActive: form.value.isActive === '1' ? 'True' : 'False'
|
||||
}
|
||||
const submitForm = { ...form.value }
|
||||
|
||||
if (form.value.id != undefined && opertype.value === 2) {
|
||||
updateProcessmodelOperationStep(submitForm).then((res) => {
|
||||
proxy.$modal.msgSuccess("修改成功")
|
||||
open.value = false
|
||||
getList()
|
||||
if (res.code === 200) {
|
||||
proxy.$modal.msgSuccess("修改成功")
|
||||
open.value = false
|
||||
getList()
|
||||
} else {
|
||||
ElMessage.error(res.msg || '修改失败');
|
||||
}
|
||||
}).catch(err => {
|
||||
console.error('修改请求异常', err);
|
||||
ElMessage.error('修改异常');
|
||||
})
|
||||
} else {
|
||||
addProcessmodelOperationStep(submitForm).then((res) => {
|
||||
proxy.$modal.msgSuccess("新增成功")
|
||||
open.value = false
|
||||
getList()
|
||||
if (res.code === 200) {
|
||||
proxy.$modal.msgSuccess("新增成功")
|
||||
open.value = false
|
||||
getList()
|
||||
} else {
|
||||
ElMessage.error(res.msg || '新增失败');
|
||||
}
|
||||
}).catch(err => {
|
||||
console.error('新增请求异常', err);
|
||||
ElMessage.error('新增异常');
|
||||
})
|
||||
}
|
||||
}
|
||||
@ -436,72 +464,92 @@ function submitForm() {
|
||||
// 删除按钮操作
|
||||
function handleDelete(row) {
|
||||
const Ids = row.id || ids.value
|
||||
proxy
|
||||
.$confirm('是否确认删除参数编号为"' + Ids + '"的数据项？')
|
||||
proxy.$confirm('是否确认删除参数编号为"' + Ids + '"的数据项？')
|
||||
.then(function () {
|
||||
return delProcessmodelOperationStep(Ids)
|
||||
})
|
||||
.then(() => {
|
||||
getList()
|
||||
proxy.$modal.msgSuccess("删除成功")
|
||||
.then(res => {
|
||||
if (res.code === 200) {
|
||||
proxy.$modal.msgSuccess("删除成功")
|
||||
getList()
|
||||
} else {
|
||||
ElMessage.error(res.msg || '删除失败');
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
if (err !== 'cancel') {
|
||||
console.error('删除请求异常', err);
|
||||
ElMessage.error('删除异常');
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 详情相关
|
||||
const detailId = ref(null)
|
||||
const detailFilteredTotal = ref(0)
|
||||
// 详情相关函数
|
||||
const stepCode = ref('')
|
||||
const processCode = ref('')
|
||||
|
||||
function handleDetails(row) {
|
||||
dialogTableVisible.value = true
|
||||
detailId.value = row.id
|
||||
processCode.value = row.processCode
|
||||
stepCode.value = row.stepCode
|
||||
detailQuery.stepCode = row.stepCode
|
||||
// 设置详情表单数据
|
||||
detailForm.value = { ...row }
|
||||
|
||||
// 加载详情列表数据（确保数组）
|
||||
listProcessmodelOperationStepDetail(detailQuery).then(res => {
|
||||
console.log(res, '详情数据123');
|
||||
if (res.code == 200) {
|
||||
detailGridData.value = res.data
|
||||
detailFilteredTotal.value = res.totalNum
|
||||
nextTick(() => {
|
||||
listProcessmodelOperationStepCascade().then(res => {
|
||||
console.log(res, '下拉数据');
|
||||
if (res.code == 200) {
|
||||
// 转换数据为级联选择器所需格式
|
||||
cascadePullDown.value = transformCascadeData(res.data)
|
||||
}
|
||||
})
|
||||
})
|
||||
if (res.code === 200) {
|
||||
detailGridData.value = Array.isArray(res.data) ? res.data : [];
|
||||
detailFilteredTotal.value = Number(res.totalNum) || 0;
|
||||
} else {
|
||||
detailGridData.value = [];
|
||||
detailFilteredTotal.value = 0;
|
||||
console.error('详情列表数据格式异常，已重置为空数组');
|
||||
}
|
||||
|
||||
// 加载级联选择器数据（核心修复点）
|
||||
listProcessmodelOperationStepCascade().then(res => {
|
||||
// 无论接口返回什么，确保cascadePullDown是数组
|
||||
cascadePullDown.value = transformCascadeData(res.code === 200 ? res.data : null);
|
||||
console.log('级联数据最终格式:', cascadePullDown.value, '是否为数组:', Array.isArray(cascadePullDown.value));
|
||||
}).catch(err => {
|
||||
console.error('级联数据请求异常', err);
|
||||
cascadePullDown.value = []; // 异常时强制为空数组
|
||||
});
|
||||
}).catch(err => {
|
||||
detailGridData.value = [];
|
||||
detailFilteredTotal.value = 0;
|
||||
console.error('详情列表请求异常', err);
|
||||
})
|
||||
}
|
||||
|
||||
// 将接口返回的数据转换为 cascader 组件所需的数据格式
|
||||
// 转换级联数据格式（确保返回值一定是数组）
|
||||
function transformCascadeData(data) {
|
||||
return data.map(workshopItem => {
|
||||
return {
|
||||
value: workshopItem.workshop,
|
||||
label: workshopItem.workshop,
|
||||
children: workshopItem.worklines?.map(lineItem => {
|
||||
return {
|
||||
value: lineItem.workline,
|
||||
label: lineItem.workline,
|
||||
children: lineItem.devices?.map(deviceItem => {
|
||||
return {
|
||||
value: deviceItem.deviceCode,
|
||||
label: deviceItem.deviceName,
|
||||
deviceCode: deviceItem.deviceCode,
|
||||
deviceName: deviceItem.deviceName
|
||||
}
|
||||
}) || []
|
||||
}
|
||||
}) || []
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 获取详情列表
|
||||
function getDetailList() {
|
||||
// 第一层校验：如果不是数组，直接返回空数组
|
||||
if (!data || !Array.isArray(data)) {
|
||||
console.warn('级联原始数据不是数组，返回空数组');
|
||||
return [];
|
||||
}
|
||||
|
||||
// 第二层校验：处理每个层级，确保children是数组
|
||||
return data.map(workshopItem => ({
|
||||
value: workshopItem.workshop || '',
|
||||
label: workshopItem.workshop || '',
|
||||
// 确保worklines是数组
|
||||
children: Array.isArray(workshopItem.worklines) ? workshopItem.worklines.map(lineItem => ({
|
||||
value: lineItem.workline || '',
|
||||
label: lineItem.workline || '',
|
||||
// 确保devices是数组
|
||||
children: Array.isArray(lineItem.devices) ? lineItem.devices.map(deviceItem => ({
|
||||
value: deviceItem.deviceCode || '',
|
||||
label: deviceItem.deviceName || '',
|
||||
deviceCode: deviceItem.deviceCode || '',
|
||||
deviceName: deviceItem.deviceName || ''
|
||||
})) : [] // 非数组则返回空数组
|
||||
})) : [] // 非数组则返回空数组
|
||||
}));
|
||||
}
|
||||
|
||||
// 详情查询
|
||||
@ -515,74 +563,53 @@ function resetDetailQuery() {
|
||||
detailQuery.pageNum = 1
|
||||
detailQuery.deviceName = ''
|
||||
detailQuery.deviceCode = ''
|
||||
detailQuery.stepName = null
|
||||
getDetailList1()
|
||||
}
|
||||
|
||||
// 添加详情项
|
||||
function handleAddDetail() {
|
||||
detailFormModel.value = {
|
||||
id: undefined,
|
||||
stepCode: null,
|
||||
stepName: null,
|
||||
processCode: null,
|
||||
description: null,
|
||||
workshop: null,
|
||||
lineCode: null,
|
||||
bindDevice: null,
|
||||
isActive: null,
|
||||
remark: null,
|
||||
}
|
||||
stepCode: stepCode.value,
|
||||
processCode: processCode.value
|
||||
};
|
||||
cascadePullDownValue.value = []; // 重置为数组
|
||||
detailTitle.value = '绑定设备'
|
||||
detailOpen.value = true
|
||||
}
|
||||
const stepCode = ref('')
|
||||
const processCode = ref('')
|
||||
const deviceCode = ref('')
|
||||
// 编辑详情项
|
||||
function handleEditDetail(row) {
|
||||
console.log(row, 'row');
|
||||
detailFormModel.value = { ...row }
|
||||
// 转换 isActive 值以匹配下拉选项
|
||||
if (row.isActive === 'True') {
|
||||
detailFormModel.value.isActive = '1'
|
||||
} else if (row.isActive === 'False') {
|
||||
detailFormModel.value.isActive = '0'
|
||||
}
|
||||
|
||||
// 初始化级联选项
|
||||
if (row.workshop) {
|
||||
handleWorkshopChange(row.workshop, false);
|
||||
}
|
||||
|
||||
if (row.lineCode) {
|
||||
handleLineChange(row.lineCode, false);
|
||||
}
|
||||
|
||||
detailTitle.value = '修改工步'
|
||||
detailOpen.value = true
|
||||
}
|
||||
// 获取详情列表
|
||||
function getDetailList1() {
|
||||
listProcessmodelOperationStepDetail(detailQuery).then(res => {
|
||||
if (res.code == 200) {
|
||||
detailGridData.value = res.data
|
||||
detailFilteredTotal.value = res.totalNum
|
||||
if (res.code === 200) {
|
||||
detailGridData.value = Array.isArray(res.data) ? res.data : [];
|
||||
detailFilteredTotal.value = Number(res.totalNum) || 0;
|
||||
} else {
|
||||
detailGridData.value = [];
|
||||
detailFilteredTotal.value = 0;
|
||||
ElMessage.error('关联数据加载失败');
|
||||
}
|
||||
}).catch(err => {
|
||||
detailGridData.value = [];
|
||||
detailFilteredTotal.value = 0;
|
||||
console.error('关联数据请求异常', err);
|
||||
ElMessage.error('关联数据加载异常');
|
||||
})
|
||||
}
|
||||
|
||||
// 删除详情项
|
||||
function handleDeleteDetail(row) {
|
||||
proxy.$modal.confirm(`是否确认删除工步"${row.id}"?`).then(() => {
|
||||
// 模拟删除操作
|
||||
proxy.$modal.confirm(`是否确认删除该关联记录?`).then(() => {
|
||||
delProcessmodelOperationStepDetail(row.id).then(res => {
|
||||
if (res.code === 200) {
|
||||
proxy.$modal.msgSuccess("删除成功")
|
||||
getDetailList1()
|
||||
} else {
|
||||
ElMessage.error(res.msg || '删除失败');
|
||||
}
|
||||
}).catch(err => {
|
||||
console.error('删除关联记录异常', err);
|
||||
ElMessage.error('删除异常');
|
||||
})
|
||||
|
||||
|
||||
}).catch(() => { })
|
||||
}
|
||||
|
||||
@ -590,113 +617,87 @@ function handleDeleteDetail(row) {
|
||||
function detailCancel() {
|
||||
detailOpen.value = false
|
||||
detailFormModel.value = {}
|
||||
cascadePullDownValue.value = []; // 强制为空数组
|
||||
}
|
||||
|
||||
/**
|
||||
* 车间选择变化时触发
|
||||
*/
|
||||
function handleWorkshopChange(workshopValue, needReset = true) {
|
||||
// 清空线别和设备的选择
|
||||
if (needReset) {
|
||||
detailFormModel.value.lineCode = ''
|
||||
detailFormModel.value.bindDevice = ''
|
||||
}
|
||||
|
||||
// 根据选中的车间筛选线别选项
|
||||
lineOptions.value = allLineOptions.value.filter(item => item.workshop === workshopValue)
|
||||
|
||||
// 清空设备选项
|
||||
deviceOptions.value = []
|
||||
}
|
||||
|
||||
/**
|
||||
* 线别选择变化时触发
|
||||
*/
|
||||
function handleLineChange(lineValue, needReset = true) {
|
||||
// 清空设备的选择
|
||||
if (needReset) {
|
||||
detailFormModel.value.bindDevice = ''
|
||||
}
|
||||
|
||||
// 根据选中的车间和线别筛选设备选项
|
||||
deviceOptions.value = allDeviceOptions.value.filter(
|
||||
item => item.workshop === detailFormModel.value.workshop && item.line === lineValue
|
||||
)
|
||||
}
|
||||
|
||||
// 处理级联选择器值变化
|
||||
// 处理级联选择器变化
|
||||
function handleChange(value) {
|
||||
// 获取完整的路径信息
|
||||
const path = getCascaderPath(cascadePullDown.value, value)
|
||||
|
||||
if (path && path.length >= 3) {
|
||||
detailFormModel.value.workshop = path[0] // 车间
|
||||
detailFormModel.value.lineCode = path[1] // 产线
|
||||
detailFormModel.value.bindDevice = path[2] // 设备编码
|
||||
|
||||
// 查找设备详细信息
|
||||
const deviceInfo = findDeviceInfo(cascadePullDown.value, path)
|
||||
if (deviceInfo) {
|
||||
detailFormModel.value.deviceName = deviceInfo.deviceName
|
||||
detailFormModel.value.deviceCode = deviceInfo.deviceCode
|
||||
}
|
||||
// 确保value是数组
|
||||
if (!Array.isArray(value) || value.length === 0) {
|
||||
detailFormModel.workshop = '';
|
||||
detailFormModel.lineCode = '';
|
||||
detailFormModel.bindDevice = '';
|
||||
return;
|
||||
}
|
||||
|
||||
const path = getCascaderPath(cascadePullDown.value, value[value.length - 1]);
|
||||
if (!path || path.length < 3) {
|
||||
detailFormModel.workshop = '';
|
||||
detailFormModel.lineCode = '';
|
||||
detailFormModel.bindDevice = '';
|
||||
return;
|
||||
}
|
||||
|
||||
detailFormModel.workshop = path[0];
|
||||
detailFormModel.lineCode = path[1];
|
||||
detailFormModel.bindDevice = path[2];
|
||||
}
|
||||
|
||||
// 根据选中的值获取完整路径
|
||||
// 获取级联选择器完整路径
|
||||
function getCascaderPath(options, value) {
|
||||
for (let i = 0; i < options.length; i++) {
|
||||
const option = options[i]
|
||||
if (option.children && option.children.length > 0) {
|
||||
const result = getCascaderPath(option.children, value)
|
||||
// 确保options是数组
|
||||
if (!Array.isArray(options)) return null;
|
||||
|
||||
for (const option of options) {
|
||||
if (option.children && Array.isArray(option.children) && option.children.length > 0) {
|
||||
const result = getCascaderPath(option.children, value);
|
||||
if (result) {
|
||||
return [option.value, ...result]
|
||||
return [option.value, ...result];
|
||||
}
|
||||
} else if (option.value === value) {
|
||||
return [option.value]
|
||||
return [option.value];
|
||||
}
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
// 根据路径查找设备信息
|
||||
function findDeviceInfo(options, path) {
|
||||
if (path.length !== 3) return null
|
||||
|
||||
const [workshopValue, lineValue, deviceValue] = path
|
||||
|
||||
const workshop = options.find(w => w.value === workshopValue)
|
||||
if (!workshop || !workshop.children) return null
|
||||
|
||||
const line = workshop.children.find(l => l.value === lineValue)
|
||||
if (!line || !line.children) return null
|
||||
|
||||
const device = line.children.find(d => d.value === deviceValue)
|
||||
return device || null
|
||||
return null;
|
||||
}
|
||||
|
||||
// 提交详情表单
|
||||
function submitDetailForm() {
|
||||
console.log(cascadePullDownValue.value, '下拉去的值');
|
||||
let data = {
|
||||
// 确保级联值是数组且有选中项
|
||||
// if (!Array.isArray(cascadePullDownValue.value) || cascadePullDownValue.value.length === 0) {
|
||||
// ElMessage.error('请选择设备');
|
||||
// return;
|
||||
// }
|
||||
// 取最后一级作为设备编码
|
||||
const deviceCode = cascadePullDownValue.value
|
||||
// if (!deviceCode) {
|
||||
// ElMessage.error('请选择完整的设备信息');
|
||||
// return;
|
||||
// }
|
||||
|
||||
const data = {
|
||||
ProcessCode: processCode.value,
|
||||
StepCode: stepCode.value,
|
||||
DeviceCode: cascadePullDownValue.value,
|
||||
}
|
||||
console.log(data, 'data123');
|
||||
addProcessmodelOperationStepDetail(data).then((res) => {
|
||||
if (res.code == 200) {
|
||||
detailOpen.value = false
|
||||
nextTick(() => {
|
||||
ElMessage.success('绑定成功');
|
||||
getDetailList1()
|
||||
})
|
||||
DeviceCode: deviceCode
|
||||
};
|
||||
|
||||
addProcessmodelOperationStepDetail(data).then(res => {
|
||||
if (res.code === 200) {
|
||||
detailOpen.value = false;
|
||||
ElMessage.success('绑定成功');
|
||||
getDetailList1();
|
||||
} else {
|
||||
ElMessage.error(res.msg || '绑定失败');
|
||||
}
|
||||
}).catch(err => {
|
||||
console.error('设备绑定请求异常', err);
|
||||
ElMessage.error('绑定异常');
|
||||
})
|
||||
}
|
||||
|
||||
handleQuery()
|
||||
onMounted(() => {
|
||||
getTreeList();
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user