Commit 8764ae2b by 李耀琨

优化页面

parent 56e445ed
...@@ -591,6 +591,5 @@ export default { ...@@ -591,6 +591,5 @@ export default {
.form{ .form{
margin-top: 20px; margin-top: 20px;
font-size: 14px; font-size: 14px;
} }
</style> </style>
<template> <template>
<div class="statis-box"> <div class="statis-box">
<div class="statis-box-1"> <div class="statis-box-1">
<div class="statis-content"> <div class="statis-content">
<div class="statis-title">实施情况统计表
<p style="margin: 5px 25px; font-size: 12px;">实施情况统计表</p>
</div>
<div class="statis-form"> <div class="statis-form">
<div class="statis-formHoad" > <div class="statis-formHoad">
<h4><span>搜索条件</span></h4> <h4><span>搜索条件</span></h4>
</div> </div>
...@@ -22,8 +18,8 @@ ...@@ -22,8 +18,8 @@
v-for="item in options2" v-for="item in options2"
:key="item.value" :key="item.value"
:label="item.label" :label="item.label"
:value="item.value"> :value="item.value"
</el-option> />
</el-select> </el-select>
</li> </li>
<li>项目:</li> <li>项目:</li>
...@@ -33,13 +29,13 @@ ...@@ -33,13 +29,13 @@
v-for="item in options1" v-for="item in options1"
:key="item.value" :key="item.value"
:label="item.label" :label="item.label"
:value="item.value"> :value="item.value"
</el-option> />
</el-select> </el-select>
</li> </li>
<li> <li>
<el-button type="primary" size="mini" @click="queryRegion()" >查询</el-button> <el-button type="primary" size="mini" @click="queryRegion()">查询</el-button>
</li> </li>
</ul> </ul>
...@@ -54,70 +50,59 @@ ...@@ -54,70 +50,59 @@
<el-button type="primary" @click="exportFile()">导出表格</el-button></div> <el-button type="primary" @click="exportFile()">导出表格</el-button></div>
</div> </div>
<!-- 表格 --> <!-- 表格 -->
<el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" style="width: 100%; font-size:14px; " <el-table
:cell-style="cellStyle" :header-cell-style="rowClass" > :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
<el-table-column prop="organization" label="单位名称" width="80" > style="width: 100%; font-size:14px; "
</el-table-column> :cell-style="cellStyle"
<el-table-column prop="number" label="自治区任务数" width="110" > :header-cell-style="rowClass"
</el-table-column> >
<el-table-column prop="address" label="实际完成数" width="100" > <el-table-column prop="organization" label="单位名称" width="80" />
</el-table-column> <el-table-column prop="number" label="自治区任务数" width="110" />
<el-table-column prop="population" label="资金合计" width="80" > <el-table-column prop="address" label="实际完成数" width="100" />
</el-table-column> <el-table-column prop="population" label="资金合计" width="80" />
<el-table-column prop="telephone" label="自治区下拨资金" width="120" > <el-table-column prop="telephone" label="自治区下拨资金" width="120" />
</el-table-column> <el-table-column prop="apply" label="设区市实际配套资金" width="160" />
<el-table-column prop="apply" label="设区市实际配套资金" width="160" > <el-table-column prop="capital" label="县〔市、区〕实际配套资金" width="190" />
</el-table-column> <el-table-column prop="organization" label="社会投入" width="120" />
<el-table-column prop="capital" label="县〔市、区〕实际配套资金" width="190" > <el-table-column prop="help" label="党组织(个)" width="90" />
</el-table-column> <el-table-column prop="help" label="党员(个)" width="80" />
<el-table-column prop="organization" label="社会投入" width="120" > <el-table-column prop="help" label="帮扶残疾人(个)" width="120" />
</el-table-column>
<el-table-column prop="help" label="党组织(个)" width="90" >
</el-table-column>
<el-table-column prop="help" label="党员(个)" width="80" >
</el-table-column>
<el-table-column prop="help" label="帮扶残疾人(个)" width="120" >
</el-table-column>
</el-table> </el-table>
<!-- 分页 --> <!-- 分页 -->
<div class="block" > <div class="block">
<div style=" height :40px; margin-top:12px; margin-left:6px;"> <div style=" height :40px; margin-top:12px; margin-left:6px;">
<el-pagination <el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage" :current-page="currentPage"
:page-sizes="[5,10,20,30]" :page-sizes="[5,10,20,30]"
:page-size="pageSize" :page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper" layout="total, sizes, prev, pager, next, jumper"
:total="tableData.length" > :total="tableData.length"
</el-pagination> @size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name:'statis', name: 'Statis',
data() { data() {
return { return {
tableData: [{ tableData: [{
organization:'居委会', organization: '居委会'
},], }],
currentPage: 1, // 当前页码 currentPage: 1, // 当前页码
total: 20, // 总条数 total: 20, // 总条数
pageSize: 5, // 每页的数据条数 pageSize: 5, // 每页的数据条数
options2: [{ options2: [{
value: '选项1', value: '选项1',
label: '广西壮族自治区' label: '广西壮族自治区'
...@@ -135,7 +120,6 @@ ...@@ -135,7 +120,6 @@
label: '南宁市青秀区' label: '南宁市青秀区'
}], }],
options1: [{ options1: [{
value: '选项1', value: '选项1',
label: '2020' label: '2020'
...@@ -155,12 +139,11 @@ ...@@ -155,12 +139,11 @@
value: '', value: '',
radio: '1', radio: '1',
// 表单 // 表单
ruleForm: { ruleForm: {
name: '', name: '',
region: '', region: '',
ryear:'', ryear: '',
date: '', date: '',
type: [], type: [],
desc: '' desc: ''
...@@ -184,64 +167,52 @@ ...@@ -184,64 +167,52 @@
] ]
} }
}
};}, },
methods: { methods: {
//每页条数改变时触发 选择一页显示多少行 // 每页条数改变时触发 选择一页显示多少行
handleSizeChange(val) { handleSizeChange(val) {
console.log(`每页 ${val} 条`); console.log(`每页 ${val} 条`)
this.currentPage = 1; this.currentPage = 1
this.pageSize = val; this.pageSize = val
}, },
//当前页改变时触发 跳转其他页 // 当前页改变时触发 跳转其他页
handleCurrentChange(val) { handleCurrentChange(val) {
console.log(`当前页: ${val}`); console.log(`当前页: ${val}`)
this.currentPage = val; this.currentPage = val
}, },
cellStyle({row,column,rowIndex,columnIndex}) { cellStyle({ row, column, rowIndex, columnIndex }) {
return "text-align:center; " return 'text-align:center; '
}, },
rowClass({row,rowIndex}){ rowClass({ row, rowIndex }) {
return "text-align:center;" return 'text-align:center;'
}, },
exportFile() {
console.log('11')
exportFile(){
console.log('11');
}, },
queryRegion() {
queryRegion(){ console.log('查询')
console.log('查询');
}, },
// 表单 // 表单
submitForm(formName) { submitForm(formName) {
this.$refs[formName].validate((valid) => { this.$refs[formName].validate((valid) => {
if (valid) { if (valid) {
alert('submit!'); alert('submit!')
} else { } else {
console.log('error submit!!'); console.log('error submit!!')
return false; return false
}
})
} }
});
},
},} }}
</script> </script>
<style lang="scss"> <style lang="scss">
*{
margin: 0;
padding: 0;
line-height: 1.5;
}
.statis-box{ .statis-box{
position: relative; position: relative;
...@@ -259,29 +230,24 @@ ...@@ -259,29 +230,24 @@
width: 1310px; width: 1310px;
padding: 12px 15px; padding: 12px 15px;
margin-left: 10%; margin-left: 10%;
background-color: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
} border-radius: 5px;
.statis-title{
height: 100px;
padding: 25px;
margin: 0 12px;
border: 1px solid #ccc;
} }
.statis-form{ .statis-form{
border: 1px solid #ccc; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
border-radius: 5px;
margin: 25px 12px; margin: 25px 12px;
} }
.statis-formHoad{ .statis-formHoad{
width: 100%; width: 100%;
height: 60px; height: 60px;
background-color:#E0E0E0; border-bottom: 1px solid rgba(0, 0, 0, 0.12);
position: relative; position: relative;
} }
.statis-formHoad h4{ .statis-formHoad h4{
width: 100%; width: 100%;
height: 20px; height: 20px;
padding: 16px 20px; padding: 20px 20px;
display: block; display: block;
font-weight: bold; font-weight: bold;
} }
...@@ -292,14 +258,11 @@ ...@@ -292,14 +258,11 @@
} }
.statis-input-box{ .statis-input-box{
width:100%; width:100%;
height :35px; height :50px;
margin: 20px; margin: 20px;
}
.border-bottom{
border-bottom: 1px solid #ccc;
} }
.statis-input-box ul li{ .statis-input-box ul li{
float: left; float: left;
margin: 3px; margin: 3px;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment