smart-web.git - Gitblit

			@@ -1,37 +1,97 @@
			<!--
			* @Date: 2024-05-26 22:26:35
			* @LastEditors: Sneed
			* @LastEditTime: 2024-06-02 15:16:59
			* @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-button type="primary" style="margin-right: auto;">关联工位</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%">
			<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=""></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>FTP目录</h2>
			<div>509</div>
			<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">
			<scForm :config="config" :rules="rules">

			<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>
			@@ -44,6 +104,14 @@
			return {
			tableData: [],
			showAdd: false,
			treeData: [],
			params: {
			workstationIds: [],
			name: ''
			},
			form: {

			},
			rules: {
			name: [
			{ required: true, message: '请输入姓名' }
			@@ -63,32 +131,260 @@
			}
			},
			{
			component: 'input',
			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.getList()
			this.search()
			this.init()
			},
			methods: {
			getList() {
			this.$HTTP.post(`/api/blade-dnc/ftp-director/ftp-workstation-list`, { name: '', workstationIds: [] }).then(res => {
			init() {
			this.$HTTP.post(`/api/smis/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.showAdd = true
			}
			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/smis/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></style>
			<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>