bonus
/
bonus-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

物资类型右侧表格，配件类型左侧树

This commit is contained in:
jjLv 2024-11-06 17:03:18 +08:00
parent 39a97186b0
commit 6555f21d5d
4 changed files with 246 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

250
src/views/material/ma/partType/index.vue
View File

@ -1,49 +1,136 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item prop="keyWord">
<el-input
v-model="queryParams.keyWord"
placeholder="请输入关键词"
clearable
@keyup.enter.native="handleQuery"
maxlength="20"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPermi="['machinery:type:add']"
>新增</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
>导出
</el-button>
</el-col>
<right-toolbar
:showSearch.sync="showSearch"
@queryTable="getList"
></right-toolbar>
</el-row>
<el-table
<el-row :gutter="20">
<!--树数据-->
<el-col :span="5" :xs="24">
<div class="head-container">
<el-input
v-model="typeName"
placeholder="请输入类型名称"
clearable
maxlength="50"
size="small"
prefix-icon="el-icon-search"
style="margin-bottom: 20px"
/>
</div>
<div class="head-container" style>
<el-tree
style="height: 700px; overflow: scroll"
:data="treeOptions"
:props="defaultProps"
:expand-on-click-node="false"
:filter-node-method="filterNode"
ref="tree"
node-key="id"
default-expand-all
highlight-current
@node-click="handleNodeClick"
>
<span
class="custom-tree-node"
slot-scope="{ node, data }"
@mousemove="onMousemove(data)"
@mouseleave="onMouseleave()"
>
<span
v-if="
isMousemoveId === data.id &&
node.label.length > 5
"
>{{ node.label.slice(0, 3) + '...' }}</span
>
<span v-else>{{ node.label }}</span>
<span
class="btn-items"
v-if="isMousemoveId === data.id"
>
<el-button
type="text"
size="mini"
icon="el-icon-plus"
@click.stop="() => appendTreeNode(data)"
>
</el-button>
<el-button
type="text"
size="mini"
icon="el-icon-edit-outline"
style="color: #67c23a"
v-if="data.id !== 0"
@click.stop="() => editTreeNode(data)"
>
</el-button>
<el-button
type="text"
size="mini"
icon="el-icon-delete"
style="color: #f56c6c"
v-if="data.id !== 0"
@click.stop="() => removeTreeNode(data)"
>
</el-button>
</span>
</span>
</el-tree>
</div>
</el-col>
<!--用户数据-->
<el-col :span="19" :xs="24">
<el-form
:model="queryParams"
ref="queryForm"
size="small"
:inline="true"
v-show="showSearch"
label-width="68px"
>
<el-form-item label="关键字" prop="keyword">
<el-input
v-model="queryParams.keyword"
placeholder="请输入关键字"
clearable
style="width: 240px"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button
type="primary"
icon="el-icon-search"
size="mini"
@click="handleQuery"
>查询</el-button
>
<el-button
icon="el-icon-refresh"
size="mini"
@click="resetQuery"
>重置</el-button
>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
>导出
</el-button>
</el-col>
<right-toolbar
:showSearch.sync="showSearch"
@queryTable="getList"
></right-toolbar>
</el-row>
<el-table
v-loading="loading"
:data="typeList"
ref="multipleTable"
@ -127,6 +214,51 @@
</template>
</el-table-column>
</el-table>
</el-col>
</el-row>
<!-- <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item prop="keyWord">
<el-input
v-model="queryParams.keyWord"
placeholder="请输入关键词"
clearable
@keyup.enter.native="handleQuery"
maxlength="20"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPermi="['machinery:type:add']"
>新增</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
>导出
</el-button>
</el-col>
<right-toolbar
:showSearch.sync="showSearch"
@queryTable="getList"
></right-toolbar>
<
<!-- <pagination
v-show="total>0"
@ -240,7 +372,8 @@
// 非多个禁用
multiple: true,
// 类型名称
typeName: undefined,
// 显示搜索条件
showSearch: true,
showHouse: false,
@ -270,7 +403,11 @@
pageSize: 10,
keyWord:undefined
},
treeOptions:undefined,
defaultProps: {
children: 'children',
label: 'label',
},
// 表单参数
form: {},
// 表单校验
@ -286,10 +423,23 @@
};
},
created() {
this.getTreeselect();
this.getList();
},
watch: {
// 根据名称筛选配件类型树
typeName(val) {
this.$refs.tree.filter(val);
},
},
methods: {
/** 查询岗位列表 */
// 筛选节点 - 左侧树
filterNode(value, data) {
if (!value) return true
return data.label.indexOf(value) !== -1
},
/** 查询配件类型列表 */
getList() {
this.loading = true;
getListAccessory(this.queryParams).then(response => {
@ -311,10 +461,8 @@
getTreeselect(){
getListTree().then(response=>{
this.treeList = response.data;
const menu = { id: 0, label: '配件类型', children: this.treeList };
this.treeList=[],
this.treeList.push(menu)
this.treeOptions = response.data;
});
},

50
src/views/material/ma/type/index.vue
View File

@ -24,7 +24,7 @@
:filter-node-method="filterNode"
ref="tree"
node-key="id"
default-expand-all
:default-expand-all="false"
highlight-current
@node-click="handleNodeClick"
>
@ -244,21 +244,28 @@
<el-row>
<el-col :span="12">
<el-form-item label="仓库信息">
<el-select
<!-- <el-select
v-model="form.keeperData"
filterable
placeholder="请选择仓库信息"
style="width: 100%"
:disabled="isLevel1Disabled"
>
<el-option
> -->
<el-input
v-model="form.houseName"
type="text"
placeholder="请输入仓库信息"
maxlength="30"
:disabled="isLevel1Disabled"
/>
<!-- <el-option
v-for="keeper in keeperDataRange"
:key="keeper.value"
:label="keeper.label"
:value="keeper.value"
></el-option>
></el-option> -->
</el-select>
<!-- </el-select> -->
</el-form-item>
</el-col>
<el-col :span="12">
@ -700,6 +707,7 @@ export default {
level2Temp:undefined,
level2TempName:undefined,
level1TempName:undefined,
level0TempName:undefined,
level1Temp:undefined,
uploadUrl: process.env.VUE_APP_BASE_API + '/system', // 上传的图片服务器地址
defaultProps: {
@ -771,8 +779,8 @@ export default {
},
},
created() {
this.getList()
this.getTreeData()
// this.getList()
},
methods: {
@ -794,6 +802,13 @@ export default {
getTreeData() {
getMaTypeList().then((response) => {
this.treeOptions = response.data
if(this.treeOptions.length>0 && this.treeOptions[0].children.length>0){
const firstNode = this.treeOptions[0].children[0];
this.queryParams.typeId = firstNode.id
this.queryParams.level = 1
this.queryParams.houseId = firstNode.houseId
this.getList();
}
})
},
/** 查询列表 */
@ -812,8 +827,15 @@ export default {
},
// 节点单击事件 - 左侧树
async handleNodeClick(data,node) {
this.queryParams.typeId = data.id
this.queryParams.level = data.level
if(data.level==0){
this.queryParams.typeId = data.id
this.queryParams.level = data.level
this.queryParams.houseId = data.id
}else{
this.queryParams.typeId = data.id
this.queryParams.level = data.level
this.queryParams.houseId = data.houseId
}
this.handleQuery()
if(node.level==1){
this.isLevel1Disabled=true
@ -894,6 +916,7 @@ export default {
getMaType(typeId).then((response) => {
this.form = response.data;
this.form.isCharging = this.form.isCharging + ''
this.form.houseName = row.houseName
this.form.itemType = row.itemType
this.form.materialType = row.materialType
this.form.materialName = row.materialName
@ -912,6 +935,7 @@ export default {
getMaType(typeId).then((response) => {
this.form = response.data;
this.form.isCharging = this.form.isCharging + ''
this.form.houseName = row.houseName
this.form.itemType = row.itemType
this.form.materialType = row.materialType
this.form.materialName = row.materialName
@ -986,8 +1010,6 @@ export default {
handleExport() {
let queryTemp = this.queryParams;
queryTemp.level = 0;
queryTemp.pageNum = 1;
queryTemp.pageSize = 10;
this.download('/material/ma_type/export', {
...queryTemp
}, `物资类型信息_${new Date().getTime()}.xlsx`)
@ -1024,11 +1046,17 @@ export default {
this.level1TempName=item.label
}
})
this.treeTemp.forEach(item=>{
if(item.level==0 && item.id==data.houseId){
this.level0TempName=item.label
}
})
this.isLevel1Disabled=true
this.isLevel2Disabled=true
this.isLevel3Disabled=true
this.isLevel4Disabled=true
this.form.parentId = data.id
this.form.houseName = this.level0TempName
this.form.itemType = this.level1TempName
this.form.materialType = this.level2TempName
this.form.materialName = data.label

6
src/views/material/ma/typeConfigKeeper/index.vue
View File

@ -823,10 +823,12 @@ export default {
/** 导出按钮操作 */
handleExport() {
let queryTemp = this.queryParams;
queryTemp.level = 0;
this.download(
"/material/ma_type/export",
"/material/ma_type/export4Keeper",
{
...this.queryParams,
...this.queryTemp,
},
`物资类型信息_${new Date().getTime()}.xlsx`
);

6
src/views/material/ma/typeConfigRepair/index.vue
View File

@ -679,10 +679,12 @@ export default {
/** 导出按钮操作 */
handleExport() {
let queryTemp = this.queryParams;
queryTemp.level = 0;
this.download(
"/material/ma_type/export",
"/material/ma_type/export4Repair",
{
...this.queryParams,
...this.queryTemp,
},
`物资类型信息_${new Date().getTime()}.xlsx`
);