| | |
| | | <!-- |
| | | * @Author: 李喆(开发组) lzhe@yxqiche.com |
| | | * @Date: 2025-08-11 09:25:36 |
| | | * @LastEditors: 李喆(开发组) lzhe@yxqiche.com |
| | | * @LastEditTime: 2025-08-12 17:45:42 |
| | | * @FilePath: /mdmweb/src/views/wel/index.vue |
| | | * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE |
| | | --> |
| | | <template> |
| | | <basic-container> |
| | | <avue-crud |
| | | :addBtn="false" |
| | | :option="option" |
| | | :table-loading="loading" |
| | | :data="data" |
| | | ref="crud" |
| | | v-model:search="search" |
| | | v-model:page="mypage" |
| | | @current-change="currentChange" |
| | | @size-change="sizeChange" |
| | | @refresh-change="refreshChange" |
| | | @on-load="onLoad" |
| | | @tree-load="treeLoad" |
| | | @row-del="rowDel" |
| | | @row-save="rowSave" |
| | | @row-update="rowUpdate" |
| | | @row-click="rowClick" |
| | | > |
| | | <template #name="{ row }"> |
| | | <span>{{row.name}}</span> |
| | | <el-button :size="size" text icon="el-icon-setting" type="primary" placeholder="修改" @click="showEdit(row)" title="修改"></el-button> |
| | | <el-button :size="size" text icon="el-icon-delete" type="primary" @click="showDel(row)" placeholder="删除" title="删除"></el-button> |
| | | <el-button :size="size" text v-if="row.nodeType < 70" icon="el-icon-document-add" type="primary" @click="showAdd(row)" placeholder="新增子级" title="新增子级"></el-button> |
| | | <el-button :size="size" text v-if="row.nodeType == 70" icon="el-icon-upload" type="primary" @click="showUpload(row)" placeholder="文件上传" title="文件上传"></el-button> |
| | | </template> |
| | | </avue-crud> |
| | | <el-dialog :title="modalTitle" append-to-body v-model="modalBox"> |
| | | <avue-form :option="modalOption" v-model="modalForm" @submit="modalSubmit" @reset-change="modalCancel"/> |
| | | </el-dialog> |
| | | <el-dialog title="上传文件" append-to-body v-model="uploadmodalBox"> |
| | | <avue-form :option="uploadmodalOption" v-model="uploadmodalForm" @submit="uploadmodalSubmit" @reset-change="uploadmodalCancel"/> |
| | | </el-dialog> |
| | | |
| | | |
| | | <avue-tabs :option="tabsOption" @change="tabsHandleChange" style="margin-top: 30px;"></avue-tabs> |
| | | <avue-form v-if="tabsType === 'tab1'" :option="tabsFormOption" v-model="tabsForm"/> |
| | | <span v-else-if="tabsType === 'tab2'">版本信息</span> |
| | | |
| | | </basic-container> |
| | | <shemi v-if="isSM"></shemi> |
| | | <gongkong v-else></gongkong> |
| | | <!-- <gongkong></gongkong> --> |
| | | </template> |
| | | |
| | | <script> |
| | | |
| | | import shemi from './shemi.vue' |
| | | import gongkong from './gongkong.vue' |
| | | export default { |
| | | components: {shemi,gongkong}, |
| | | data() { |
| | | return { |
| | | tabsType: "tab1", |
| | | tabsOption: { |
| | | column: [{ |
| | | icon: 'el-icon-info', |
| | | label: '节点信息', |
| | | prop: 'tab1', |
| | | }, { |
| | | icon: 'el-icon-warning', |
| | | label: '版本信息', |
| | | prop: 'tab2', |
| | | }] |
| | | }, |
| | | tabsFormOption: { |
| | | submitBtn: false, |
| | | emptyBtn: false, |
| | | column: [ |
| | | { |
| | | label: '节点类型', |
| | | prop: 'nodeType', |
| | | disabled: true, |
| | | placeholder: " " |
| | | }, |
| | | { |
| | | label: '创建人', |
| | | prop: 'createUser', |
| | | disabled: true, |
| | | placeholder: " " |
| | | }, |
| | | { |
| | | label: '节点名称', |
| | | prop: 'name', |
| | | disabled: true, |
| | | placeholder: " " |
| | | }, |
| | | { |
| | | label: '创建时间', |
| | | prop: 'createTime', |
| | | disabled: true, |
| | | placeholder: " " |
| | | }, |
| | | { |
| | | label: '节点描述', |
| | | prop: 'description', |
| | | disabled: true, |
| | | placeholder: " " |
| | | }, |
| | | { |
| | | label: '最后修改时间', |
| | | prop: 'updateTime', |
| | | disabled: true, |
| | | placeholder: " " |
| | | }, |
| | | { |
| | | label: '节点全路径', |
| | | prop: '', |
| | | disabled: true, |
| | | placeholder: " ", |
| | | span: 24 |
| | | } |
| | | ] |
| | | }, |
| | | tabsForm: {}, |
| | | uploadmodalBox: false, |
| | | uploadmodalOption: { |
| | | submitText: "保存", |
| | | emptyText: "取消", |
| | | menuPosition: "right", |
| | | column: [ |
| | | { |
| | | label: '节点类型', |
| | | prop: 'nodeType', |
| | | type: 'select', |
| | | dicUrl: '/blade-system/dict-biz/dictionary?code=nc_node_type', |
| | | props: { |
| | | label: 'dictValue', |
| | | value: 'dictKey', |
| | | }, |
| | | disabled: true |
| | | }, |
| | | { |
| | | label: '选择文件', |
| | | prop: 'abcd', |
| | | type: 'upload', |
| | | data: "{a:123}", |
| | | action: "", |
| | | showFileList: false, |
| | | span: 24 |
| | | }, |
| | | { |
| | | label: '全路径', |
| | | prop: 'abc', |
| | | span: 24 |
| | | }, |
| | | { |
| | | label: '备注', |
| | | prop: 'remark', |
| | | type: "textarea", |
| | | span: 24 |
| | | } |
| | | ] |
| | | }, |
| | | uploadmodalForm: {}, |
| | | selectedColumn: {}, |
| | | modalForm: {}, |
| | | modalOption: { |
| | | submitText: "保存", |
| | | emptyText: "取消", |
| | | menuPosition: "right", |
| | | column: [ |
| | | { |
| | | label: '节点类型', |
| | | prop: 'nodeType', |
| | | type: 'select', |
| | | dicUrl: '/blade-system/dict-biz/dictionary?code=nc_node_type', |
| | | props: { |
| | | label: 'dictValue', |
| | | value: 'dictKey', |
| | | }, |
| | | disabled: true |
| | | }, |
| | | { |
| | | label: '设备(机床)', |
| | | prop: 'abc' |
| | | }, |
| | | { |
| | | label: '节点名称', |
| | | prop: 'name' |
| | | }, |
| | | { |
| | | label: '节点描述', |
| | | prop: 'abc', |
| | | hide: true |
| | | }, |
| | | { |
| | | label: '全路径', |
| | | prop: 'abc', |
| | | span: 24 |
| | | }, |
| | | { |
| | | label: '备注', |
| | | prop: 'remark', |
| | | type: "textarea", |
| | | span: 24 |
| | | } |
| | | ] |
| | | }, |
| | | modalBox: false, |
| | | modalTitle: "", |
| | | id: "", |
| | | parentId:1, |
| | | search: { |
| | | keyword: "", |
| | | machineGroupCode: "" |
| | | }, |
| | | loading: true, |
| | | mypage: { |
| | | size: 10, |
| | | current: 1, |
| | | total: 0, |
| | | }, |
| | | option: { |
| | | lazy: true, |
| | | rowKey: 'id', |
| | | addBtn: false, |
| | | editBtn: false, |
| | | delBtn: false, |
| | | fit: true, |
| | | menu: false, |
| | | column: [ |
| | | { |
| | | label: '目录', |
| | | prop: 'name', |
| | | width: '300' |
| | | }, |
| | | { |
| | | label: '版本', |
| | | prop: 'abc' |
| | | }, |
| | | { |
| | | label: '版次', |
| | | prop: 'abc' |
| | | }, |
| | | { |
| | | label: '描述', |
| | | prop: 'abc' |
| | | }, |
| | | { |
| | | label: '类型', |
| | | prop: 'nodeType' |
| | | }, |
| | | { |
| | | label: '设备', |
| | | prop: 'abc' |
| | | }, |
| | | { |
| | | label: '固化状态', |
| | | prop: 'abc' |
| | | }, |
| | | { |
| | | label: '锁定状态', |
| | | prop: 'abc' |
| | | }, |
| | | { |
| | | label: '流程状态', |
| | | prop: 'abc' |
| | | }, |
| | | { |
| | | label: '测试程序', |
| | | prop: 'abc' |
| | | }, |
| | | { |
| | | label: '创建人', |
| | | prop: 'createUser', |
| | | width: '180' |
| | | } |
| | | ], |
| | | }, |
| | | data: [], |
| | | }; |
| | | }, |
| | | methods: { |
| | | rowClick(row) { |
| | | this.tabsForm = row; |
| | | }, |
| | | tabsHandleChange(tabs) { |
| | | this.tabsType = tabs.prop; |
| | | }, |
| | | showUpload(row) { |
| | | this.uploadmodalForm = row; |
| | | this.uploadmodalBox = true; |
| | | }, |
| | | uploadmodalSubmit(row,done) { |
| | | |
| | | }, |
| | | rowDel(row, index, done) { |
| | | done(row); |
| | | }, |
| | | rowSave (row, done) { |
| | | done(row); |
| | | }, |
| | | rowUpdate (row, index, done) { |
| | | done(row); |
| | | }, |
| | | showEdit(row,done) { |
| | | this.modalTitle = "修改"; |
| | | this.modalBox = true; |
| | | this.modalForm = row; |
| | | }, |
| | | showDel(row) { |
| | | this.$confirm('将会删除该节点及其子节点,是否确认删除?', { |
| | | confirmButtonText: '是', |
| | | cancelButtonText: '否', |
| | | type: 'warning', |
| | | }).then(() => { |
| | | //调用接口 |
| | | this.loading = true; |
| | | axios({ |
| | | url: '/blade-mdm/program/node/remove', |
| | | method: 'post', |
| | | params: {id: row.id}, |
| | | }).then( |
| | | res => { |
| | | this.loading = false; |
| | | this.$refs.crud.rowDel(row); |
| | | } |
| | | ); |
| | | }) |
| | | }, |
| | | showAdd (row) { //新增子节点 |
| | | if(row.nodeType == 70) { |
| | | return; |
| | | } |
| | | this.modalTitle = "新增子节点"; |
| | | this.selectedColumn.nodeType = String(Number(row.nodeType) + 10); |
| | | this.selectedColumn.parentId = row.id; |
| | | this.selectedColumn.name = ""; |
| | | this.selectedColumn.id = ""; |
| | | this.modalForm = this.selectedColumn; |
| | | this.modalBox = true; |
| | | }, |
| | | modalSubmit(row,done) { //新增子节点保存/修改 |
| | | if(this.modalTitle == "修改") { |
| | | var url = "/blade-mdm/program/node/update"; |
| | | }else { |
| | | var url = "/blade-mdm/program/node/save"; |
| | | } |
| | | //调用接口 |
| | | this.loading = true; |
| | | axios({ |
| | | url, |
| | | method: 'post', |
| | | data: this.modalForm, |
| | | }).then( |
| | | res => { |
| | | this.$message.success('操作成功'); |
| | | this.modalBox = false; |
| | | // 修改,更新本地数据 |
| | | if (this.modalTitle === "修改") { |
| | | this.updateLocalTreeNode(this.modalForm); |
| | | }else { |
| | | // 如果是新增操作,可能需要重新加载数据 |
| | | this.$refs.crud.refreshTable(); |
| | | } |
| | | this.loading = false; |
| | | done(row); |
| | | } |
| | | ); |
| | | }, |
| | | updateLocalTreeNode(nodeData) { |
| | | const updateNode = (nodes) => { |
| | | for (let i = 0; i < nodes.length; i++) { |
| | | if (nodes[i].id === nodeData.id) { |
| | | // 更新节点数据 |
| | | Object.assign(nodes[i], nodeData); |
| | | return true; |
| | | } |
| | | if (Array.isArray(nodes[i].children) && nodes[i].children.length > 0) { |
| | | if (updateNode(nodes[i].children)) { |
| | | return true; |
| | | } |
| | | } |
| | | } |
| | | return false; |
| | | }; |
| | | updateNode(this.data); |
| | | }, |
| | | modalCancel() { |
| | | this.modalBox = false; |
| | | }, |
| | | uploadmodalCancel() { |
| | | this.uploadmodalBox = false; |
| | | }, |
| | | treeLoad (tree, treeNode, resolve) { |
| | | this.loading = true; |
| | | var obj = {parentId: tree.id} |
| | | axios({ |
| | | url: '/blade-mdm/program/node/lazy-list', |
| | | method: 'get', |
| | | params: obj, |
| | | }).then( |
| | | res => { |
| | | resolve(res.data.data); |
| | | this.loading = false; |
| | | } |
| | | ); |
| | | }, |
| | | currentChange(current) { |
| | | this.mypage.current = current; |
| | | }, |
| | | sizeChange(size) { |
| | | this.mypage.size = size; |
| | | }, |
| | | refreshChange() { |
| | | |
| | | }, |
| | | onLoad() { //查询treeTable |
| | | this.loading = true; |
| | | var obj = {parentId: ""} |
| | | axios({ |
| | | url: '/blade-mdm/program/node/lazy-list', |
| | | method: 'get', |
| | | params: obj, |
| | | }).then( |
| | | res => { |
| | | this.data = res.data.data; |
| | | this.tabsForm = res.data.data[0]; //节点信息 |
| | | this.loading = false; |
| | | } |
| | | ); |
| | | nodeId: 0, |
| | | isSM: false |
| | | } |
| | | }, |
| | | computed: {}, |
| | | watch: { |
| | | |
| | | }, |
| | | methods: { |
| | | |
| | | }, |
| | | mounted() { |
| | | //判断版本 0:涉密网,1:工控网; |
| | | axios({url: '/blade-mdm/system/param/getValue?paramKey=networkType',method: 'get'}).then(res => { |
| | | if(res.data.data === "0") { |
| | | this.isSM = true; |
| | | }else { |
| | | // this.getPre(); |
| | | } |
| | | } |
| | | ); |
| | | } |
| | | }; |
| | | </script> |
| | | |
| | | <style lang="scss"> |
| | | .el-form-item__label { |
| | | width: 120px!important; |
| | | } |
| | | |
| | | </style> |