<!--
|
* @Date: 2024-05-12 20:02:31
|
* @LastEditors: Sneed
|
* @LastEditTime: 2024-05-13 22:35:52
|
* @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/console/tooling/Tray.vue
|
-->
|
<template>
|
<el-container>
|
<el-aside width="200px">
|
<el-container>
|
<el-main>
|
<el-tree default-expand-all ref="group" node-key="id" :data="treeData" :props="{
|
label: 'name',
|
disabled: 'isGroup'
|
}" @node-click="nodeClick">
|
<template #default="{ node, data }">
|
<span :class="data.isGroup ? 'active' : ''" class="custom-tree-node">
|
<span>{{
|
node.label || data.code }}</span>
|
</span>
|
</template>
|
</el-tree>
|
</el-main>
|
<el-footer>
|
<el-button>添加托盘组</el-button>
|
</el-footer>
|
</el-container>
|
</el-aside>
|
<!-- <el-main> -->
|
<el-container v-if="selectNode.id">
|
<el-header>
|
<el-button @click="table_add" type="primary" icon="el-icon-plus"></el-button>
|
<import-table style="margin:0 8px" :exportUrl="exportUrl" :uploadUrl="uploadUrl"></import-table>
|
<el-button type="danger" plain icon="el-icon-delete" @click="batchDel"></el-button>
|
<el-input v-model="params.keyword" style="width: 240px;margin-left: auto;" placeholder="请输入检索内容"
|
clearable></el-input>
|
<el-button @click="search" type="primary" icon="el-icon-search"></el-button>
|
</el-header>
|
<el-main>
|
<el-row :gutter="20">
|
<el-col :span="10">
|
<scTable highlight-current-row @dataChange="dataChange" @row-click="rowClick" ref="table"
|
:params="params" :apiObj="apiObj" @selection-change="selectionChange" stripe>
|
<el-table-column type="selection" width="50"></el-table-column>
|
<el-table-column label="托盘编号" prop="code" width="120"></el-table-column>
|
<el-table-column label="托盘名称" prop="name" width="120"></el-table-column>
|
<el-table-column label="可用状态" prop="type" width="120"></el-table-column>
|
<el-table-column label="操作" fixed="right" align="right" width="160">
|
<template #default="scope">
|
<el-button-group>
|
<el-button text type="primary" size="small"
|
@click="table_edit(scope.row, scope.$index)">编辑</el-button>
|
<el-popconfirm title="确定删除吗？" @confirm="table_del([scope.row], '0')">
|
<template #reference>
|
<el-button text type="primary" size="small">删除</el-button>
|
</template>
|
</el-popconfirm>
|
</el-button-group>
|
</template>
|
</el-table-column>
|
</scTable>
|
</el-col>
|
<el-col :span="14">
|
<h2>托盘信息</h2>
|
<div class="tuopan-info">
|
<el-row>
|
<el-col :span="12">
|
托盘编号: {{ info.code }}
|
</el-col>
|
<el-col :span="12">
|
托盘名称: {{ info.name || '-' }}
|
</el-col>
|
<el-col :span="12">
|
托盘面数: {{ info.faceNumber || '-' }}
|
</el-col>
|
<el-col :span="12">
|
可用状态: {{ info.availability === 1 ? '可用' : '冻结' }}
|
</el-col>
|
<el-col :span="12">
|
托盘描述: {{ info.description || '-' }}
|
</el-col>
|
<el-col :span="12">
|
托盘类别: {{ info.category || '-' }}
|
</el-col>
|
<el-col :span="12">
|
托盘规格: {{ info.standardModel || '-' }}
|
</el-col>
|
<el-col :span="12">
|
托盘组: {{ info.groupName || '-' }}
|
</el-col>
|
<el-col :span="12">
|
托盘状态: {{ info.trayStatus === 1 ? '空载' : '负载' }}
|
</el-col>
|
<el-col :span="12">
|
备注: {{ info.remark || '-' }}
|
</el-col>
|
</el-row>
|
</div>
|
|
<h2 style="margin-top: 14px;">托盘面列表</h2>
|
<div>
|
<el-button type="primary">新建托盘面</el-button>
|
</div>
|
<el-table :data="infoList" style="width: 100%">
|
<el-table-column label="托盘面编号" prop="code"></el-table-column>
|
<el-table-column label="托盘面名称" prop="name"></el-table-column>
|
<el-table-column label="关联夹具" prop="type"></el-table-column>
|
<el-table-column label="便宜程序编号" prop="type"></el-table-column>
|
<el-table-column label="便宜程序编号" prop="type"></el-table-column>
|
<el-table-column label="操作" fixed="right" align="right" width="160">
|
<template #default="scope">
|
<el-button-group>
|
<el-button text type="primary" size="small"
|
@click="table_edit1(scope.row, scope.$index)">编辑</el-button>
|
<el-popconfirm title="确定删除吗？" @confirm="table_del1([scope.row], '0')">
|
<template #reference>
|
<el-button text type="primary" size="small">删除</el-button>
|
</template>
|
</el-popconfirm>
|
</el-button-group>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-col>
|
</el-row>
|
</el-main>
|
</el-container>
|
<!-- </el-main> -->
|
</el-container>
|
</template>
|
|
<script>
|
import importTable from '@/layout/components/importTable.vue'
|
export default {
|
components: {
|
importTable
|
},
|
data() {
|
return {
|
treeData: [],
|
params: {
|
keyword: ''
|
},
|
info: {},
|
infoList: [],
|
selectNode: {},
|
apiObj: {
|
get: async (data) => {
|
let params = {
|
...data,
|
...this.params
|
}
|
return await this.$HTTP.get(`/api/blade-cps/tray/page/${this.selectNode.id}`, {}, { params }).then(res => {
|
return res
|
})
|
}
|
},
|
}
|
},
|
watch: {
|
'selectNode.id': {
|
handler(val) {
|
if (val) {
|
this.queryInfo()
|
} else {
|
this.info = {}
|
this.infoList = []
|
}
|
}
|
}
|
},
|
created() {
|
this.init()
|
},
|
methods: {
|
search() {
|
this.$refs.table.reload(this.params)
|
},
|
init() {
|
this.$HTTP.post(`/api/blade-cps/tray/tooling-tree`, {
|
groupCategory: 1,
|
groupType: "group_tray"
|
}).then(res => {
|
this.treeData = res.data
|
this.selectNode = res.data[0]
|
})
|
},
|
queryInfo() {
|
if (!this.selectNode.id) return
|
this.$refs?.table?.reload()
|
// this.$HTTP.get(`/api/blade-cps/tray/${this.selectNode.id}`).then(res => {
|
// this.info = res.data
|
// })
|
// this.$HTTP.get(`/api/blade-cps/tray-surface/list/${this.selectNode.id}`).then(res => {
|
// this.info = res.data
|
// })
|
},
|
dataChange(res, data) {
|
this.rowClick(data?.[0])
|
},
|
rowClick(row) {
|
console.log(row.id)
|
this.queryChildInfo(row.id)
|
},
|
queryChildInfo(id) {
|
if (!id) return
|
this.$HTTP.get(`/api/blade-cps/tray/${id}`).then(res => {
|
this.info = res.data
|
})
|
this.$HTTP.get(`/api/blade-cps/tray-surface/list/${id}`).then(res => {
|
this.infoList = res.data
|
})
|
},
|
nodeClick(node) {
|
this.selectNode = node
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.custom-tree-node.active {
|
color: #ccc;
|
}
|
|
.empty {
|
justify-content: center;
|
}
|
|
.tuopan-info {
|
display: flex;
|
}
|
</style>
|
