1

lzhe

2024-06-05 dcf9c9e0410fe1186239e3f8d6f7bdc789c08010

 src/views/console/tooling/fixture.vue

@@ -1,13 +1,459 @@
<!--
 * @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>
    <div>
    <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>
                            </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></style>
<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>