<template>
<div class="index_box">
<!-- 搜索条件 -->
<div class="search_box">
<el-form :label-position="labelPosition" inline size="small">
<el-form-item label="项目名称">
<el-input v-model="projectaName" placeholder="请输入项目名称"></el-input>
</el-form-item>
<el-form-item label="所属一级单元">
<el-select v-model="firstUnit" placeholder="请选择" @change="getSecondUnit">
<el-option v-for="(item,index) in companyInfo" :key="item.code" :label="item.name" :value="item.code">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="所属二级单元">
<el-select v-model="secondUnit" placeholder="请选择">
<el-option v-for="(item,index) in componyList" :key="item.code" :label="item.name" :value="item.code">
</el-option>
</el-select>
</el-form-item>
<!-- <el-form-item label="业务类型">
<el-select v-model="businessTypeValue" placeholder="请选择">
<el-option v-for="(item,index) in businessType" :key="index+1" :label="item" :value="index+1">
</el-option>
</el-select>
</el-form-item> -->
<el-form-item label="获取方式">
<el-select v-model="getWayValue" placeholder="请选择">
<el-option v-for="(item,index) in accessWays" :key="index+1" :label="item.paramValue" :value="index+1">
</el-option>
</el-select>
</el-form-item>
</el-form>
<div class="search_btn_box fr">
<el-button type="primary" size="mini" icon="el-icon-search" @click="searchData">查询</el-button>
<el-button type="primary" size="mini" icon="el-icon-circle-plus-outline" @click="goNewProject">新增</el-button>
</div>
</div>
<!-- 表格 -->
<div class="table_box mt40">
<el-table :data="projectData" border style="width: 100%" @row-click="goDetail">
<el-table-column label="xxx所属一级单元" align="center">
<template slot-scope="scope">
<span>{{ scope.row.region }}</span>
</template>
</el-table-column>
<el-table-column label="xx所属二级单元" align="center">
<template slot-scope="scope">
<span>{{scope.row.company }}</span>
</template>
</el-table-column>
<el-table-column label="xx所在城市" align="center">
<template slot-scope="scope">
<span>{{ scope.row.city }}</span>
</template>
</el-table-column>
<el-table-column label="xx项目名称" align="center">
<template slot-scope="scope">
<span>{{ scope.row.projectName }}</span>
</template>
</el-table-column>
<el-table-column label="xxx项目代码" align="center">
<template slot-scope="scope">
<span>{{ scope.row.afterInvestCode }}</span>
</template>
</el-table-column>
<el-table-column label="xxx项目编码" align="center">
<template slot-scope="scope">
<span>{{scope.row.projectNo}}</span>
</template>
</el-table-column>
<el-table-column label="xx获取方式" align="center">
<template slot-scope="scope">
<span>{{scope.row.acessWayValue}}</span>
</template>
</el-table-column>
<el-table-column label="xx类型" align="center">
<template slot-scope="scope">
<span>{{scope.row.assetPropertyValue}}</span>
</template>
</el-table-column>
<!-- <el-table-column label="业务类型" align="center">
<template slot-scope="scope">
<span>{{scope.row.businessType}}</span>
</template>
</el-table-column> -->
</el-table>
<!-- 分页 -->
<div class="page_box fr mt20">
<el-pagination class="el-paging" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 40, 50]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total" :background='true' prev-text="上一页" next-text="下一页">
</el-pagination>
</div>
</div>
</div>
</template>
<script>
import { projectList, projectType } from '../../http/api'
export default {
data() {
return {
labelPosition: 'right',
accessWays: [], //获取方式
companyInfo: [], //一级单元
componyList: [], //二级单元
currentPage: 1, //当前页数
pagesize: 10, //每页显示多少条
total: 0, //默认数据总数
pageCount: 0, //总页数
projectaName: '', //项目名称
firstUnit: '', //所属一级单元
secondUnit: '', //所属二级单元
//businessTypeValue: '', //业务类型
getWayValue: '', //获取方式
projectList: {}, //项目档案list
projectData: [],
}
},
methods: {
//项目档案新增界面
goNewProject() {
this.$router.push({ name: 'newProjectArchives' })
},
//项目档案详情界面
goDetail(row, event, column) {
this.$router.push({ name: 'projectArchivesDetail', query: { projectNo: row.projectNo } })
},
// 分页
handleSizeChange(size) {
this.pagesize = size;
this.getData(this.currentPage, size);
},
//当前页改变
handleCurrentChange(currentPage) {
this.currentPage = currentPage;
this.getData(this.currentPage);
},
//查询数据
searchData() {
this.getData();
},
//分页接口
getData(currentPage = this.currentPage, pagesize = this.pagesize) {
let data = {
pageNo: currentPage,
pageSize: pagesize,
projectName: this.projectaName, //项目名称
regionCode: this.firstUnit, //一级单元
companyCode: this.secondUnit, //二级单元
// businessType: this.businessTypeValue == '' ? '' : this.businessType.indexOf(this.businessTypeValue) + 1, //业务类型
accessWay: this.getWayValue, //获取方式
}
projectList(data).then(res => {
console.log(res)
if (res.code == 0) {
if (res.data.projectList != null) {
this.projectData = res.data.projectList.list; //赋值列表数据
this.total = res.data.totalRecords; //设置数据总数目!!!
}
}
}).catch(err => {
this.$message({
showClose: true,
message: '服务器内部错误'
});
})
},
//获取顶部的select基础数据
getProjectType() {
projectType(null).then(res => {
console.log(res)
if (res.code == 0) {
this.accessWays = res.data.accessWays; //获取方式
this.companyInfo = res.data.companyInfo; //区域公司数据
}
}).catch(err => {
this.$message({
showClose: true,
message: '服务器内部错误'
});
})
},
//onchange事件
getSecondUnit(value) {
let fIndex = this.companyInfo.findIndex(e => { //下标方法
return e.code == value
})
this.componyList = this.companyInfo[fIndex].childrens //数组
if (this.componyList.length) {
this.secondUnit = this.componyList[0].code; //名字
} else {
this.secondUnit = ''; //名字
}
//console.log(this.componyList, 'chengshishuzu')
}
},
created() {
this.getData();
this.getProjectType();
}
}
</script>
<style lang="scss" scoped>
.index_box {
position: absolute;
left: 210px;
right: 0;
top: 60px;
padding: 15px 15px;
box-sizing: border-box;
}
</style>