<!--
|
* @Date: 2024-05-12 20:02:31
|
* @LastEditors: Sneed
|
* @LastEditTime: 2024-05-16 22:07:06
|
* @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/console/tooling/fixture.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 }">
|
<div :class="data.isGroup ? 'active' : ''" class="custom-tree-node">
|
<span>{{ node.label || data.code }}</span>
|
<el-icon class="icon" @click.stop="renameArea(data)" v-if="data.id > 200"
|
style="margin-left: auto;margin-right: 4px;">
|
<ElIconEditPen />
|
</el-icon>
|
<el-popconfirm title="确定删除吗？" @confirm="delArea(data)">
|
<template #reference>
|
<el-icon class="icon" v-if="data.id > 200">
|
<ElIconDelete />
|
</el-icon>
|
</template>
|
</el-popconfirm>
|
|
</div>
|
</template>
|
</el-tree>
|
</el-main>
|
<el-footer>
|
<el-button type="primary" @click="addTrayGroup">添加夹具组</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="/api/blade-cps/fixture/export/template"
|
uploadUrl="/api/blade-cps/fixture/import-fixture"></import-table>
|
<el-popconfirm title="确定删除吗？" @confirm="del(selection, '0')">
|
<template #reference>
|
<el-button type="danger" :disabled="selection.length === 0" plain icon="el-icon-delete"
|
@click="batchDel"></el-button>
|
</template>
|
</el-popconfirm>
|
|
<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="fixtureStatus" width="120">
|
<template #default="scope">
|
<span>
|
{{ scope.row.fixtureStatus === 1 ? '激活' : '冻结' }}
|
</span>
|
</template>
|
</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="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" v-loading="showLoading">
|
<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.fixtureStatus === 1 ? '激活' : '冻结' }}
|
</el-col>
|
<el-col :span="12">
|
夹具组: {{ info.fixtureGroupName || '-' }}
|
</el-col>
|
<el-col :span="12">
|
夹具描述: {{ info.description || '-' }}
|
</el-col>
|
</el-row>
|
</div>
|
|
<h2 style="margin:14px 0;">关联托盘</h2>
|
<!-- <div>
|
<el-button type="primary" size="small" @click="addTray">新建托盘面</el-button>
|
</div> -->
|
<el-table :data="infoList" style="width: 100%" stripe>
|
<el-table-column label="托盘编号" prop="trayCode"></el-table-column>
|
<el-table-column label="托盘名称" prop="trayName"></el-table-column>
|
<el-table-column label="操作" fixed="right" align="right" width="160">
|
<template #default="scope">
|
<el-button-group>
|
<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-dialog v-model="visibleGroup" title="托盘组" width="500">
|
<el-form :model="formGroup" :rules="rulesGroup" ref="dialogForm" label-width="120px"
|
label-position="center">
|
<el-form-item v-if="!formGroup.id" label="上级目录">
|
<el-input disabled v-model="selectNode.name" />
|
</el-form-item>
|
<el-form-item label="夹具组名称">
|
<el-input v-model="formGroup.name" />
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button type="primary" @click="saveGroup">
|
确定
|
</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
<el-drawer v-model="dialog" title="托盘信息" class="demo-drawer">
|
<el-container>
|
<el-main>
|
<el-form :model="trayForm" :rules="rulesTray" ref="trayForm" label-width="120px">
|
<el-form-item label="夹具组" prop="fixtureGroupId">
|
<el-tree-select v-model="trayForm.fixtureGroupId" @node-click="groupIdClick" node-key="id"
|
:data="treeData" filterable style="width: 240px" :props="{
|
label: 'name',
|
}" />
|
</el-form-item>
|
<el-form-item v-if="trayForm.code" label="夹具编号" prop="code">
|
<el-input style="width: 240px" v-model="trayForm.code" />
|
</el-form-item>
|
<el-form-item label="夹具名称" prop="name">
|
<el-input style="width: 240px" v-model="trayForm.name" />
|
</el-form-item>
|
<el-form-item label="夹具状态" prop="fixtureStatus">
|
<el-select style="width: 240px" v-model="trayForm.fixtureStatus" placeholder="">
|
<el-option label="激活" :value="1" />
|
<el-option label="冻结" :value="0" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="夹具描述" prop="description">
|
<el-input style="width: 240px" type="textarea" v-model="trayForm.description" />
|
</el-form-item>
|
<el-form-item label="图片" prop="avatar">
|
<scUpload v-model="trayForm.avatar" title=""></scUpload>
|
</el-form-item>
|
<el-form-item label="关联托盘面">
|
<el-select style="width: 120px" v-model="trayForm.trayId" placeholder="">
|
<el-option v-for="item in trayId" :key="item.id" :label="item.code" :value="item.id" />
|
</el-select>
|
<el-select style="width: 120px" v-model="trayForm.surfaceId" placeholder="">
|
<el-option v-for="item in surfaceId" :key="item.id" :label="item.name"
|
:value="item.id" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="关联托文档" prop="surfaceId">
|
|
</el-form-item>
|
</el-form>
|
</el-main>
|
<el-footer style="text-align: right">
|
<el-button type="primary" @click="confirm">
|
确定
|
</el-button>
|
</el-footer>
|
</el-container>
|
</el-drawer>
|
</el-container>
|
</template>
|
|
<script>
|
import importTable from '@/layout/components/importTable.vue'
|
export default {
|
components: {
|
importTable
|
},
|
data() {
|
return {
|
treeData: [],
|
visibleGroup: false,
|
formGroup: {},
|
rulesGroup: {
|
name: [
|
{ required: true, message: '必填' }
|
],
|
},
|
params: {
|
keyword: '',
|
},
|
info: {},
|
infoList: [],
|
selectNode: {},
|
apiObj: {
|
get: async (data) => {
|
let params = {
|
...data,
|
groupId: this.selectNode.id,
|
...this.params
|
}
|
return await this.$HTTP.get(`/api/blade-cps/fixture/page`, {}, { params }).then(res => {
|
return res
|
})
|
}
|
},
|
showLoading: false,
|
dialog: false,
|
trayForm: {},
|
rulesTray: {
|
fixtureGroupId: [
|
{ required: true, message: '必填' }
|
],
|
fixtureStatus: [
|
{ required: true, message: '必填' }
|
],
|
name: [
|
{ required: true, message: '必填' }
|
],
|
},
|
trayId: [],
|
surfaceId: [],
|
selection: []
|
}
|
},
|
watch: {
|
'selectNode.id': {
|
handler(val) {
|
this.info = {}
|
this.infoList = []
|
if (val) {
|
this.queryInfo()
|
}
|
}
|
},
|
'trayForm.trayId': {
|
handler(val) {
|
if (val) {
|
this.$HTTP.get(`/api/blade-cps/tray-surface/list/${val}`).then(res => {
|
this.surfaceId = res.data
|
if (!this.surfaceId.find(v => v.id === this.trayForm.surfaceId)) {
|
this.trayForm.surfaceId = ''
|
}
|
|
})
|
} else {
|
this.trayForm.surfaceId = ''
|
this.surfaceId = []
|
}
|
}
|
}
|
},
|
created() {
|
this.init()
|
this.$HTTP.post(`/api/blade-cps/tray/list`).then(res => {
|
this.trayId = res.data
|
})
|
},
|
methods: {
|
selectionChange(selection) {
|
this.selection = selection
|
},
|
addTrayGroup() {
|
console.log(this.selectNode)
|
this.formGroup = {}
|
this.visibleGroup = true
|
},
|
renameArea(data) {
|
this.formGroup = {
|
...data
|
}
|
this.visibleGroup = true
|
},
|
delArea(data) {
|
this.$HTTP.delete(`/api/blade-cps/tray/remove-tree?id=${data.id}`).then(res => {
|
this.init()
|
})
|
},
|
saveGroup() {
|
if (!this.formGroup.id) {
|
this.$HTTP.post(`/api/blade-cps/group`, {
|
groupCategory: 1,
|
groupType: "group_fixture",
|
parentId: this.selectNode.id,
|
...this.formGroup
|
}).then(res => {
|
this.visibleGroup = false
|
this.init()
|
})
|
} else {
|
this.$HTTP.put(`/api/blade-cps/group`, {
|
groupCategory: 1,
|
groupType: "group_fixture",
|
parentId: this.selectNode.id,
|
...this.formGroup
|
}).then(res => {
|
this.visibleGroup = false
|
this.init()
|
})
|
}
|
|
},
|
search() {
|
this.$refs.table.reload(this.params)
|
},
|
table_add() {
|
this.trayForm = {
|
fixtureGroupId: this.selectNode.id,
|
fixtureStatus: 1,
|
}
|
this.dialog = true
|
},
|
table_edit(row) {
|
this.trayForm = {
|
...row
|
}
|
this.dialog = true
|
},
|
groupIdClick(node) {
|
this.trayForm.fixtureGroupId = node.id
|
},
|
confirm() {
|
if (this.trayForm.id) {
|
return this.$HTTP.put(`/api/blade-cps/fixture/update`, {
|
...this.trayForm
|
}).then(res => {
|
this.dialog = false
|
this.queryInfo()
|
})
|
}
|
this.$HTTP.post(`/api/blade-cps/fixture/${this.trayForm.fixtureGroupId}/insert`, {
|
...this.trayForm
|
}).then(res => {
|
this.dialog = false
|
this.queryInfo()
|
})
|
},
|
del(ids) {
|
this.$HTTP.delete(`/api/blade-cps/fixture/remove`, ids.map(v => v.id)).then(res => {
|
this.queryInfo()
|
})
|
},
|
init() {
|
this.$HTTP.post(`/api/blade-cps/tray/tooling-tree`, {
|
groupCategory: 1,
|
groupType: "group_fixture"
|
}).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) {
|
data?.[0] && this.rowClick(data?.[0])
|
},
|
rowClick(row) {
|
console.log(row.id)
|
this.queryChildInfo(row.id)
|
},
|
async queryChildInfo(id) {
|
if (!id) return
|
this.showLoading = true
|
await this.$HTTP.get(`/api/blade-cps/fixture/get/${id}`).then(res => {
|
this.info = res.data
|
this.infoList = [
|
{
|
othersId: res.data.id,
|
id: res.data.trayFixtureId,
|
trayFixtureId: res.data.trayFixtureId,
|
trayCode: res.data.trayCode,
|
trayName: res.data.trayName,
|
}
|
]
|
})
|
// await this.$HTTP.get(`/api/blade-cps/tray-surface/list/${id}`).then(res => {
|
// this.infoList = res.data
|
// })
|
this.showLoading = false
|
},
|
nodeClick(node) {
|
this.selectNode = node
|
},
|
table_del1(row) {
|
this.$HTTP.delete(`/api/blade-cps/tray-fixture`, [{ id: row.id, othersId: row.othersId }]).then(res => {
|
this.$message.success('操作成功')
|
this.queryChildInfo(this.info.id)
|
})
|
},
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.custom-tree-node.active {
|
color: #ccc;
|
}
|
|
.custom-tree-node {
|
width: 100%;
|
display: flex;
|
|
.icon {
|
visibility: hidden;
|
}
|
}
|
|
.custom-tree-node:hover {
|
.icon {
|
visibility: visible;
|
}
|
}
|
|
.empty {
|
justify-content: center;
|
}
|
|
.tuopan-info {
|
display: flex;
|
}
|
</style>
|
