<!--
|
* @Date: 2024-05-26 22:26:35
|
* @LastEditors: Sneed
|
* @LastEditTime: 2024-06-16 16:19:27
|
* @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/dnc/setting/FTP.vue
|
-->
|
<template>
|
<el-container>
|
<el-header>
|
<el-button type="primary" @click="addFtp">创建FTP目录</el-button>
|
<el-tree-select v-model="params.workstationIds" clearable :data="treeData" multiple
|
:render-after-expand="false" style="width: 240px;margin-left: auto;" :props="{
|
label: 'title',
|
|
}" node-key="id">
|
<template #prefix><span style="margin-right: 6px;">工位目录</span></template>
|
</el-tree-select>
|
<el-input v-model="params.name" style="width: 240px;margin-left: 8px;" placeholder="" clearable>
|
<template #prefix>目录名称</template>
|
</el-input>
|
<el-button style="margin-left: 8px;" @click="search" type="primary" icon="el-icon-search"></el-button>
|
</el-header>
|
<el-main>
|
<el-row :gutter="20" style="width: 100%;">
|
<el-col :span="12">
|
<el-table :data="tableData" style="width: 100%" @row-click="rowClick">
|
<el-table-column label="目录名称" prop="name" width=""></el-table-column>
|
<el-table-column label="关联工位" prop="" width="">
|
<template #default="scope">
|
<span class="">{{ scope.row.workstationDTOS.map(v => v.name).join(';') }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" prop="" width="">
|
<template #default="scope">
|
<el-button-group>
|
<el-button text type="primary" size="small"
|
@click.stop="table_edit(scope.row, scope.$index)">关联工位</el-button>
|
<el-popconfirm width="220" title="确定将选择的数据删除" @confirm="table_del(scope.row)">
|
<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-col :span="12">
|
<h2 style="background-color: var(--el-color-primary);color: #fff;padding: 4px 20px;">FTP目录</h2>
|
<div class="directorName">
|
<span>{{ directorName }}</span>
|
<div class="hover">
|
<el-icon>
|
<el-icon-plus @click="addDirect" />
|
</el-icon>
|
<!-- <el-icon>
|
<el-icon-edit />
|
</el-icon>
|
<el-icon>
|
<el-icon-delete />
|
</el-icon> -->
|
</div>
|
</div>
|
<el-tree :expand-on-click-node="false" v-if="rootNodeId && showTree" ref="group" node-key="id"
|
:props="{
|
label: 'name',
|
hasChildren: 'id'
|
}" @node-click="nodeClick" highlight-current :current-node-key="selectNode.id" :load="loadNode"
|
lazy>
|
<template #default="{ node, data }">
|
<div class="custom-tree-node">
|
<span>{{
|
node.label }}</span>
|
<el-icon style="margin-left: 100px;">
|
<el-icon-plus @click="addDirect(node)" />
|
</el-icon>
|
<el-icon>
|
<el-icon-edit @click="editDirect(node)" />
|
</el-icon>
|
<el-icon>
|
<el-icon-delete @click="delDirect(node)" />
|
</el-icon>
|
</div>
|
</template>
|
</el-tree>
|
</el-col>
|
</el-row>
|
</el-main>
|
<scDialog v-model="showAdd" style="width: 600px">
|
<scForm :config="config" :rules="rules" v-model="form" @submit="submit">
|
</scForm>
|
</scDialog>
|
<scDialog v-model="showdireactor" style="width: 600px">
|
<scForm :config="config1" :rules="rules1" v-model="form1" @submit="submit1">
|
</scForm>
|
</scDialog>
|
</el-container>
|
</template>
|
|
<script>
|
|
export default {
|
data() {
|
return {
|
tableData: [],
|
showAdd: false,
|
treeData: [],
|
params: {
|
workstationIds: [],
|
name: ''
|
},
|
form: {
|
|
},
|
rules: {
|
name: [
|
{ required: true, message: '请输入姓名' }
|
]
|
},
|
config: {
|
labelWidth: 120,
|
|
formItems: [
|
{
|
component: 'input',
|
label: '名称',
|
name: 'name',
|
options: {
|
placeholder: '',
|
maxlength: 100,
|
}
|
},
|
{
|
component: 'el-tree-select',
|
label: '关联工位',
|
name: 'workstationIds',
|
options: {
|
multiple: false,
|
data: []
|
}
|
}
|
]
|
},
|
workstationId: '',
|
rootNodeId: '',
|
selectNode: {},
|
showTree: false,
|
showdireactor: false,
|
form1: {
|
|
},
|
rules1: {
|
name: [
|
{ required: true, message: '请输入姓名' }
|
]
|
},
|
config1: {
|
labelWidth: 120,
|
formItems: [
|
{
|
component: 'input',
|
label: '名称',
|
name: 'name',
|
options: {
|
placeholder: '',
|
maxlength: 100,
|
}
|
},
|
]
|
},
|
parentId: ''
|
}
|
},
|
created() {
|
this.search()
|
this.init()
|
},
|
methods: {
|
init() {
|
this.$HTTP.post(`/api/blade-cps/group/groupWorkstation`, { groupCategory: 1, groupType: 'group_workstation' }).then(res => {
|
this.treeData = this.formatData(res.data)
|
|
})
|
},
|
formatData(data, current, flag) {
|
let newData = []
|
if (!current) {
|
newData = data.filter(item => item.parentId == 0).map(v => {
|
v.children = this.formatData(data, v, flag).sort((a, b) => {
|
return b.sort - a.sort
|
})
|
flag && (v.disabled = !v.isWorkstation)
|
return v
|
})
|
} else {
|
let res = data.filter(v => v.parentId == current.id)
|
res = res.map(item => {
|
item.children = this.formatData(data, item, flag).sort((a, b) => {
|
return b.sort - a.sort
|
})
|
flag && (item.disabled = !item.isWorkstation)
|
return item
|
})
|
return res
|
}
|
return newData
|
},
|
search() {
|
this.$HTTP.post(`/api/blade-dnc/ftp-director/ftp-workstation-list`, this.params).then(res => {
|
this.tableData = res.data
|
if (res?.data?.[0]) {
|
this.rowClick(res.data[0])
|
}
|
})
|
},
|
addFtp() {
|
this.form = {}
|
this.getAddList().then(res => {
|
this.config.formItems[1] = {
|
component: 'el-tree-select',
|
label: '关联工位',
|
name: 'workstationIds',
|
options: {
|
multiple: true,
|
data: res,
|
props: {
|
disabled: 'disabled'
|
}
|
}
|
}
|
this.showAdd = true
|
})
|
},
|
getAddList(transferDirectorId) {
|
return this.$HTTP.post(`/api/blade-cps/group/groupFtpDirectory/ftp`, { groupCategory: 1, groupType: 'group_workstation', transferDirectorId }).then(res => {
|
this.addTreeData = this.formatData(res.data, null, 'disabled')
|
return this.addTreeData
|
})
|
},
|
submit(form) {
|
console.log(form)
|
if (form.id) {
|
return this.$HTTP.post(`/api/blade-dnc/ftp-director/update-director`, {
|
directorId: form.id,
|
directorName: form.name,
|
newWorkstationIds: form.workstationIds,
|
oldWorkstationIds: form.oldWorkstationIds
|
}).then(res => {
|
this.showAdd = false
|
this.search()
|
})
|
}
|
this.$HTTP.post(`/api/blade-dnc/ftp-director/create-director`, form).then(res => {
|
this.showAdd = false
|
this.search()
|
})
|
},
|
table_edit(row) {
|
this.getAddList(row.id).then(res => {
|
this.config.formItems[1] = {
|
component: 'el-tree-select',
|
label: '关联工位',
|
name: 'workstationIds',
|
options: {
|
multiple: true,
|
data: res,
|
props: {
|
disabled: 'disabled'
|
}
|
}
|
}
|
this.form = {
|
id: row.id,
|
name: row.name,
|
oldWorkstationIds: row?.workstationDTOS?.map(v => v.id) || [],
|
workstationIds: row?.workstationDTOS?.map(v => v.id) || []
|
}
|
this.showAdd = true
|
})
|
console.log(row)
|
},
|
table_del(row) {
|
this.$HTTP.get(`/api/blade-dnc/ftp-director/del-director?id=${row.id}`).then(res => {
|
this.search()
|
})
|
},
|
rowClick(row) {
|
this.showTree = false
|
this.directoryId = row.id
|
this.$HTTP.get(`/api/blade-dnc/dnc-fixed-space/tree-root-id?workstationId=${row.workstationDTOS[0].id}`).then(res => {
|
this.rootNodeId = res.data.rootNodeId
|
this.directorName = res.data.name
|
this.workstationId = row.workstationDTOS[0].id
|
this.showTree = true
|
})
|
},
|
loadNode(node, resolve) {
|
console.log(node)
|
if (!this.rootNodeId) return
|
let nodeId = node.level === 0 ? this.rootNodeId : node.data.id
|
this.$HTTP.get(`/api/blade-dnc/dnc-fixed-space/tree-fix-space?nodeId=${nodeId}&workstationId=${this.workstationId}`).then(res => {
|
if (node.level === 0) {
|
this.showTree = res.data.length > 0
|
// // this.$nextTick(() => {
|
// this.nodeClick(res.data[0])
|
// // })
|
}
|
resolve(res.data)
|
})
|
},
|
nodeClick(node) {
|
this.selectNode = node
|
},
|
addDirect(node) {
|
this.form1 = {}
|
this.parentId = node?.data?.id || this.rootNodeId
|
this.showdireactor = true
|
},
|
submit1(form) {
|
if (form.id) {
|
return this.$HTTP.post(`/api/blade-dnc/dnc-fixed-space/update-fix-space`, { directoryId: this.directoryId, name: form.name, id: form.id }).then(res => {
|
this.showdireactor = false
|
this.rowClick(this.tableData.find(v => v.id === this.directoryId))
|
})
|
}
|
this.$HTTP.post(`/api/blade-dnc/dnc-fixed-space/add-fix-space`, { directoryId: this.directoryId, name: form.name, parentId: this.parentId }).then(res => {
|
this.showdireactor = false
|
this.rowClick(this.tableData.find(v => v.id === this.directoryId))
|
})
|
},
|
editDirect(node) {
|
this.form1 = {
|
id: node.data.id,
|
name: node.data.name
|
}
|
this.parentId = node?.data?.id || this.rootNodeId
|
this.showdireactor = true
|
},
|
delDirect(node) {
|
console.log(node)
|
this.$HTTP.get(`/api/blade-dnc/dnc-fixed-space/del-fix-space?id=${node.data.id}`).then(res => {
|
this.rowClick(this.tableData.find(v => v.id === this.directoryId))
|
})
|
},
|
},
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.directorName {
|
margin-top: 10px;
|
background-color: var(--el-color-primary);
|
color: #fff;
|
padding: 10px 30px;
|
display: flex;
|
justify-content: space-between;
|
|
.hover {
|
// visibility: hidden;
|
display: flex;
|
|
.el-icon {
|
margin: 0 4px;
|
cursor: pointer;
|
}
|
}
|
}
|
|
.directorName:hover {
|
.hover {
|
visibility: visible;
|
}
|
}
|
|
.custom-tree-node {
|
display: flex;
|
align-items: center;
|
|
.el-icon {
|
margin: 0 10px;
|
visibility: hidden;
|
}
|
}
|
|
.custom-tree-node:hover {
|
.el-icon {
|
visibility: visible;
|
}
|
}
|
</style>
|
