<template>
<div class="index_box">
<div class="search_box">
<el-form :label-position="labelPosition" inline size="small">
<el-form-item label="xxx">
<el-input v-model="projectaName" placeholder="请输入"></el-input>
</el-form-item>
<el-form-item label="省份">
<el-select v-model="proviceName" placeholder="请选择" @change="getcityNames">
<el-option v-for="(item,index) in proviceList" :key="item.code" :label="item.name" :value="item.code">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="城市">
<el-select v-model="cityNames" placeholder="请选择">
<el-option v-for="(item,index) in cityList" :key="item.code" :label="item.name" :value="item.code">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="xxx">
<el-select v-model="getWayValue" placeholder="请选择">
<el-option v-for="(item,index) in accessList" :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>
<!-- 分页 -->
<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',
accessList: [], //xxx方式
proviceList: [], //xxx
cityList: [], //xxx
currentPage: 1, //当前页数
pagesize: 10, //每页显示多少条
total: 0, //默认数据总数
pageCount: 0, //总页数
projectaName: '', //xxx名称
proviceName: '', //xxx省份
cityNames: '', //xxx城市
//businessTypeValue: '', //xxxx
getWayValue: '', //xx方式
projectList: {}, //xxx档案list
projectData: [],
}
},
methods: {
//xxx新增界面
goNewProject() {
this.$router.push({ name: 'xxx' })
},
//xxx详情界面
goDetail(row, event, column) {
this.$router.push({ name: 'xxxx', 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, //xx名称
proviceCode: this.proviceName, //省份
cityCode: this.cityNames, //城市
accessWay: this.getWayValue, //xxx方式
}
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.accessList = res.data.accessList; //xxx
this.proviceList = res.data.proviceList; //xxx
}
}).catch(err => {
this.$message({
showClose: true,
message: '服务器内部错误'
});
})
},
//onchange事件
getcityNames(value) {
let fIndex = this.proviceList.findIndex(e => { //下标方法
return e.code == value
})
this.cityList = this.proviceList[fIndex].childrens //数组
if (this.cityList.length) {
this.cityNames = this.cityList[0].code; //名字
} else {
this.cityNames = ''; //名字
}
}
},
created() {
this.getData();
this.getProjectType();
}
}
</script>
<style lang="scss" scoped>
</style>
