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

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

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

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

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

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

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

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

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