<!--
|
* @Date: 2024-05-07 22:51:22
|
* @LastEditors: Sneed
|
* @LastEditTime: 2024-05-12 13:14:41
|
* @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/console/basic-data/material-warehousing-data/reservoir-location/reservoir-location.vue
|
-->
|
<template>
|
<el-main style="height: 100%;">
|
<el-card shadow="never" style="height: 100%;" body-style="height: 100%">
|
<el-container>
|
<el-aside width="200px" v-loading="showGrouploading">
|
<el-container>
|
<el-main>
|
<el-tree default-expand-all ref="group" node-key="id" :data="treeData" :props="props"
|
@node-click="nodeClick" highlight-current :current-node-key="params.areaId">
|
<template #default="{ node, data }">
|
<div class="custom-tree-node">
|
<span :class="data.isArea ? 'treedisabled' : ''">{{
|
node.label }}</span>
|
<el-icon class="icon" @click.stop="renameArea(data)" v-if="data.status"
|
style="margin-left: auto;margin-right: 4px;">
|
<ElIconEditPen />
|
</el-icon>
|
<el-icon class="icon" v-if="data.status" @click.stop="delArea(data)">
|
<ElIconDelete />
|
</el-icon>
|
</div>
|
</template>
|
</el-tree>
|
</el-main>
|
<el-footer>
|
<el-button @click="addArea" type="primary" icon="el-icon-plus" size="small">添加库区</el-button>
|
</el-footer>
|
</el-container>
|
</el-aside>
|
<el-container>
|
<el-header>
|
<el-button @click="table_add" type="primary" icon="el-icon-plus"></el-button>
|
<!-- <el-button type="primary">导入</el-button> -->
|
<import-table style="margin:0 8px" :exportUrl="exportUrl" :uploadUrl="uploadUrl"></import-table>
|
<el-button type="primary" @click="getExport">导出</el-button>
|
<el-popconfirm width="220" title="确定将选择的数据删除" @confirm="table_del(selection, '0')">
|
<template #reference>
|
<el-button :disabled="selection.length == 0" type="danger" plain
|
icon="el-icon-delete"></el-button>
|
</template>
|
</el-popconfirm>
|
<el-input style="width: 240px;margin-left: auto;" v-model="params.keyWord"
|
placeholder="请输入检索内容"></el-input>
|
<el-button @click="search" style="margin-left: 8px;" type="primary"
|
icon="el-icon-search"></el-button>
|
</el-header>
|
<el-main>
|
<el-row style="margin-top: 10px;">
|
<el-col style="margin-top: 10px;">
|
<scTable ref="table" row-key="id" border @selection-change="handleSelectionChange"
|
:params="params" :apiObj="apiObj" stripe @dataChange="dataChange">
|
<el-table-column type="selection" width="55" />
|
<el-table-column prop="warehouseCode" label="库位编号" />
|
<el-table-column prop="warehouseName" label="库位名称" />
|
<el-table-column prop="remark" label="备注" />
|
<el-table-column prop="warehouseAreaName" label="所属库区名称" />
|
<el-table-column prop="warehouseAreaCode" label="所属库区编号" />
|
<el-table-column label="操作" fixed="right" align="left" 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 width="220" title="确定将选择的数据删除"
|
@confirm="table_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-row>
|
</el-main>
|
</el-container>
|
</el-container>
|
</el-card>
|
<el-dialog v-model="areaVisible" title="库区信息" width="500">
|
<el-form :model="form" :rules="rules" ref="dialogForm" label-width="120px" label-position="center">
|
<el-form-item label="库区编号" prop="code">
|
<el-input :disabled="form.id" v-model="form.code" />
|
</el-form-item>
|
<el-form-item label="库区名称" prop="name">
|
<el-input v-model="form.name" />
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button type="primary" @click="saveArea">
|
确定
|
</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
<el-dialog v-model="optionVisible" title="库位信息" width="500">
|
<el-form :model="form1" :rules="rules1" ref="dialogForm1" label-width="120px" label-position="center">
|
<el-form-item v-show="form1.warehouseCode" label="库位编号" prop="warehouseCode">
|
<el-input disabled v-model="form1.warehouseCode" />
|
</el-form-item>
|
<el-form-item label="库位名称" prop="warehouseName">
|
<el-input v-model="form1.warehouseName" />
|
</el-form-item>
|
<el-form-item label="备注" prop="remark">
|
<el-input v-model="form1.remark" />
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button type="primary" @click="savePosition">
|
确定
|
</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
</el-main>
|
</template>
|
|
<script>
|
import importTable from '@/layout/components/importTable.vue'
|
export default {
|
components: {
|
importTable,
|
},
|
data() {
|
return {
|
treeData: [],
|
props: {
|
label: 'label'
|
},
|
areaVisible: false,
|
params: {
|
areaId: 1,
|
keyword: ''
|
},
|
form: {},
|
rules: {
|
name: [
|
{ required: true, message: '必填' }
|
],
|
code: [
|
{ required: true, message: '必填' }
|
],
|
},
|
exportUrl: '/api/blade-cps/warehouse-station/export-template',
|
uploadUrl: '/api/blade-cps/warehouse-station/import-station',
|
selection: [],
|
apiObj: {
|
get: async (data) => {
|
let params = {
|
...data,
|
...this.params,
|
}
|
return await this.$HTTP.get(`/api/blade-cps/warehouse-station/page`, {}, { params }).then(res => {
|
return res
|
})
|
}
|
},
|
optionVisible: false,
|
form1: {},
|
rules1: {
|
warehouseName: [
|
{ required: true, message: '必填' }
|
]
|
},
|
}
|
},
|
mounted() {
|
this.init()
|
},
|
methods: {
|
init() {
|
this.$HTTP.get(`/api/blade-cps/warehouse-area/tree`).then(res => {
|
this.treeData = res.data
|
this.nodeClick(res.data?.[0])
|
})
|
},
|
nodeClick(node) {
|
this.params.areaId = node.id
|
this.$refs?.table?.reload(this.params)
|
},
|
renameArea(data) {
|
this.form = { ...data }
|
this.areaVisible = true
|
},
|
addArea() {
|
this.form = {}
|
this.areaVisible = true
|
},
|
delArea({ id }) {
|
this.$confirm(`确定删除选中当前库区？`, '提示', {
|
type: 'warning'
|
}).then(() => {
|
const loading = this.$loading();
|
this.$HTTP.get(`/api/blade-cps/warehouse-area/station-count?id=${id}`).then(res => {
|
if (res.data > 0) {
|
this.$message.warning("该库区已经绑定库位，请先清除库位！")
|
} else {
|
this.$HTTP.delete(`/api/blade-cps/warehouse-area/remove`, {}, { data: [id] }).then(res => {
|
this.$message.success('操作成功')
|
this.init()
|
})
|
}
|
})
|
loading.close();
|
|
}).catch(() => {
|
|
})
|
},
|
saveArea() {
|
this.$refs.dialogForm.validate(async (valid) => {
|
if (valid) {
|
if (this.form.id) {
|
return this.$HTTP.put(`/api/blade-cps/warehouse-area/update`, { ...this.form }).then(res => {
|
this.$message.success('操作成功')
|
this.areaVisible = false
|
this.init()
|
})
|
}
|
this.$HTTP.post(`/api/blade-cps/warehouse-area/insert`, { ...this.form, parentId: 1 }).then(res => {
|
this.$message.success('操作成功')
|
this.areaVisible = false
|
this.init()
|
})
|
}
|
})
|
},
|
search() {
|
this.$refs.table.reload()
|
},
|
table_add() {
|
this.form1 = {}
|
this.optionVisible = true
|
},
|
table_del(ids) {
|
this.$HTTP.delete(`/api/blade-cps/warehouse-station/remove`, {}, { data: ids.map(v => v.id) }).then(res => {
|
this.$message.success('操作成功')
|
this.search()
|
})
|
},
|
table_edit(row) {
|
this.form1 = { ...row }
|
this.optionVisible = true
|
},
|
savePosition() {
|
this.$refs.dialogForm1.validate(async (valid) => {
|
if (valid) {
|
if (this.form1.id) {
|
return this.$HTTP.put(`/api/blade-cps/warehouse-station/update`, { ...this.form1, areaId: this.params.areaId }).then(res => {
|
this.$message.success('操作成功')
|
this.optionVisible = false
|
this.search()
|
})
|
}
|
this.$HTTP.post(`/api/blade-cps/warehouse-station/insert`, { ...this.form1, areaId: this.params.areaId }).then(res => {
|
this.$message.success('操作成功')
|
this.optionVisible = false
|
this.search()
|
})
|
}
|
})
|
},
|
handleSelectionChange(selection) {
|
this.selection = selection
|
},
|
getExport() {
|
this.$HTTP.post(`/api/blade-cps/warehouse-station/export-station`, { ...this.params }).then(res => {
|
if (res.code == 200) {
|
window.open(res.data.link);
|
}
|
}).catch(() => { })
|
},
|
},
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.custom-tree-node {
|
width: 100%;
|
display: flex;
|
|
.icon {
|
visibility: hidden;
|
}
|
}
|
|
.custom-tree-node:hover {
|
.icon {
|
visibility: visible;
|
}
|
}
|
</style>
|
