Skip to content

E
el-admin
Commit 8764ae2b by 李耀琨
Options

优化页面

parent 56e445ed
Showing with 3423 additions and 3763 deletions
src/views/free/selfEvaluation/index.vue
...@@ -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>
src/views/gxdpf/index.vue
<template> <template>
<div class="gxdpf-box"> <div class="gxdpf-box">
<div class="gxdpf-box-1"> <div class="gxdpf-box-1">
<div class="gxdpf-content"> <div class="gxdpf-content">
<div class="gxdpf-title">党员扶贫项目监管监督</div> <div class="gxdpf-title">党员扶贫项目监管监督</div>
<div class="gxdpf-form"> <div class="gxdpf-form">
<div class="gxdpf-formHoad"> <div class="gxdpf-formHoad">
<h4><span>通知公告</span></h4> <h4><span>通知公告</span></h4>
<div style="position:absolute;top:10px;right:25px;z-index: 1;"> <div style="position:absolute;top:10px;right:25px;z-index: 1;">
<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="date" label="日期" width="300" > style="width: 100%; font-size:14px;"
</el-table-column> :cell-style="cellStyle"
<el-table-column prop="title" label="标题" width="300" > :header-cell-style="rowClass"
</el-table-column> >
<el-table-column prop="address" label="简介" width="350" > <el-table-column prop="date" label="日期" width="300" />
</el-table-column> <el-table-column prop="title" label="标题" width="300" />
<el-table-column label="查看" width="300"> <el-table-column prop="address" label="简介" width="350" />
<template slot-scope="scope"> <el-table-column label="查看" width="306">
<el-button @click="handleClick(scope.row)" type="text" size="small">查看详情</el-button> <template slot-scope="scope">
</template> <el-button type="text" size="small" @click="handleClick(scope.row)">查看详情</el-button>
</el-table-column> </template>
</el-table> </el-table-column>
<!-- 分页 --> </el-table>
<div class="block" > <!-- 分页 -->
<div style=" height :40px; margin-top:12px; margin-left:6px;"> <div class="block">
<el-pagination <div style=" height :40px; margin-top:12px; margin-left:6px;">
@size-change="handleSizeChange" <el-pagination
@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" > @size-change="handleSizeChange"
</el-pagination> @current-change="handleCurrentChange"
</div> />
</div> </div>
</div> </div>
<div class="gxdpf-form"> </div>
<div class="gxdpf-formHoad" > <div class="gxdpf-form">
<h4><span>搜索条件</span></h4> <div class="gxdpf-formHoad">
</div> <h4><span>搜索条件</span></h4>
<div class="gxdpf-input-box"> </div>
<ul> <div class="gxdpf-input-box">
<li>行政区域:</li> <ul>
<li> <li>行政区域:</li>
<el-select v-model="value" placeholder="请选择"> <li>
<el-option <el-select v-model="value" placeholder="请选择">
v-for="item in options" <el-option
:key="item.value" v-for="item in options"
:label="item.label" :key="item.value"
:value="item.value"> :label="item.label"
</el-option> :value="item.value"
</el-select> />
</li> </el-select>
<li> </li>
<el-button type="primary" size="mini" @click="queryRegion()" >主要按钮</el-button> <li>
</li> <el-button type="primary" size="mini" @click="queryRegion()">主要按钮</el-button>
</ul> </li>
</ul>
</div>
</div>
<div class="gxdpf-form">
<div class="gxdpf-formHoad">
<h4><span>警告通知</span></h4>
<div style="position:absolute;top:10px;right:25px;z-index: 999;">
</div>
</div>
<div class="data-processing">
<div class="data">
<p>数据异常</p>
<h1>0</h1>
</div>
<div class="data border-left">
<p>资金互斥</p>
<h1>0</h1>
</div>
<div class="data border-left">
<p>任务超时</p>
<h1>0</h1></div>
<div class="data border-left">
<p>未操作天数</p>
<h1>0</h1>
</div>
</div>
</div>
</div>
</div> </div>
</div>
</div>
<div class="gxdpf-form">
<div class="gxdpf-formHoad">
<h4><span>警告通知</span></h4>
<div style="position:absolute;top:10px;right:25px;z-index: 999;" />
</div>
<div class="data-processing">
<div class="data">
<p>数据异常</p>
<h1>0</h1>
</div>
<div class="data border-left">
<p>资金互斥</p>
<h1>0</h1>
</div>
<div class="data border-left">
<p>任务超时</p>
<h1>0</h1></div>
<div class="data border-left">
<p>未操作天数</p>
<h1>0</h1>
</div>
</div>
</div>
</div>
</div>
</div>
</template> </template>
<script> <script>
export default { export default {
name:'gxdpf', name: 'Gxdpf',
data() { data() {
return { return {
tableData: [{ tableData: [{
date: '2016-05-02', date: '2016-05-02',
title: '试点平台通知', title: '试点平台通知',
address: '自治区残联办公室关于做好广西残疾人事业发展项目管理平台试点工作的通知', address: '自治区残联办公室关于做好广西残疾人事业发展项目管理平台试点工作的通知'
}, {
date: '2016-05-04',
title: '试点平台通知',
address: '自治区残联办公室关于做好广西残疾人事业发展项目管理平台试点工作的通知',
}, {
date: '2016-05-01',
title: '试点平台通知',
address: '自治区残联办公室关于做好广西残疾人事业发展项目管理平台试点工作的通知',
}, {
date: '2016-05-03',
title: '试点平台通知',
address: '自治区残联办公室关于做好广西残疾人事业发展项目管理平台试点工作的通知',
},
{
date: '2016-05-03',
title: '试点平台通知',
address: '自治区残联办公室关于做好广西残疾人事业发展项目管理平台试点工作的通知',
},
{
date: '2016-05-03',
title: '试点平台通知',
address: '自治区残联办公室关于做好广西残疾人事业发展项目管理平台试点工作的通知',
},
{
date: '2016-05-03',
title: '试点平台通知',
address: '自治区残联办公室关于做好广西残疾人事业发展项目管理平台试点工作的通知',
},{
date: '2016-05-03',
title: '试点平台通知',
address: '自治区残联办公室关于做好广西残疾人事业发展项目管理平台试点工作的通知',
}],
currentPage: 1, // 当前页码
total: 20, // 总条数
pageSize: 5, // 每页的数据条数
}, {
date: '2016-05-04',
title: '试点平台通知',
address: '自治区残联办公室关于做好广西残疾人事业发展项目管理平台试点工作的通知'
}, {
date: '2016-05-01',
title: '试点平台通知',
address: '自治区残联办公室关于做好广西残疾人事业发展项目管理平台试点工作的通知'
options: [{ }, {
value: '选项1', date: '2016-05-03',
label: '广西壮族自治区' title: '试点平台通知',
}, { address: '自治区残联办公室关于做好广西残疾人事业发展项目管理平台试点工作的通知'
value: '选项2',
label: '广西壮族自治区南宁市'
}, {
value: '选项3',
label: '南宁市南宁市辖区'
}, {
value: '选项4',
label: '南宁市兴宁区'
}, {
value: '选项5',
label: '南宁市青秀区'
}],
value: '',
};
},
methods: {
//每页条数改变时触发 选择一页显示多少行
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
this.currentPage = 1;
this.pageSize = val;
},
//当前页改变时触发 跳转其他页
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
this.currentPage = val;
},
cellStyle({row,column,rowIndex,columnIndex}) {
return "text-align:center;"
}, },
rowClass({row,rowIndex}){ {
return "text-align:center;" date: '2016-05-03',
}, title: '试点平台通知',
address: '自治区残联办公室关于做好广西残疾人事业发展项目管理平台试点工作的通知'
handleClick(row) {
console.log(row);
this.$alert('这是一段内容', '标题名称', {
confirmButtonText: '确定',
callback: action => {
this.$message({
type: 'info',
message: `action: ${ action }`
});
}
});
}, },
{
date: '2016-05-03',
title: '试点平台通知',
address: '自治区残联办公室关于做好广西残疾人事业发展项目管理平台试点工作的通知'
exportFile(){
console.log('11');
}, },
{
date: '2016-05-03',
title: '试点平台通知',
address: '自治区残联办公室关于做好广西残疾人事业发展项目管理平台试点工作的通知'
queryRegion(){ }, {
console.log('查询'); date: '2016-05-03',
title: '试点平台通知',
} address: '自治区残联办公室关于做好广西残疾人事业发展项目管理平台试点工作的通知'
}],
currentPage: 1, // 当前页码
total: 20, // 总条数
pageSize: 5, // 每页的数据条数
options: [{
value: '选项1',
label: '广西壮族自治区'
}, {
value: '选项2',
label: '广西壮族自治区南宁市'
}, {
value: '选项3',
label: '南宁市南宁市辖区'
}, {
value: '选项4',
label: '南宁市兴宁区'
}, {
value: '选项5',
label: '南宁市青秀区'
}],
value: ''
}
},
methods: {
// 每页条数改变时触发 选择一页显示多少行
handleSizeChange(val) {
console.log(`每页 ${val} 条`)
this.currentPage = 1
this.pageSize = val
},
// 当前页改变时触发 跳转其他页
handleCurrentChange(val) {
console.log(`当前页: ${val}`)
this.currentPage = val
},
cellStyle({ row, column, rowIndex, columnIndex }) {
return 'text-align:center;'
},
rowClass({ row, rowIndex }) {
return 'text-align:center;'
},
handleClick(row) {
console.log(row)
this.$alert('这是一段内容', '标题名称', {
confirmButtonText: '确定',
callback: action => {
this.$message({
type: 'info',
message: `action: ${action}`
})
}
})
},
exportFile() {
console.log('11')
},
queryRegion() {
console.log('查询')
}
},} }}
</script> </script>
<style lang="scss"> <style lang="scss">
*{
margin: 0;
padding: 0;
line-height: 1.5;
}
.gxdpf-box{ .gxdpf-box{
position: relative; position: relative;
margin: 0; margin: 0;
padding: 8px 20px 24px; padding: 8px 20px 24px;
} }
.gxdpf-box-1{ .gxdpf-box-1{
width :100%; width :100%;
background-color :#ccc;
padding: 8px 20px 50px 20px; padding: 8px 20px 50px 20px;
} }
.gxdpf-content{ .gxdpf-content{
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, .12), 0 0 6px rgba(0, 0, 0, .04);
border-radius: 5px;
} }
.gxdpf-title{ .gxdpf-title{
padding: 15px 0; padding: 15px 0;
...@@ -251,33 +237,33 @@ ...@@ -251,33 +237,33 @@
border-bottom: 1px solid #ccc; border-bottom: 1px solid #ccc;
} }
.gxdpf-form{ .gxdpf-form{
border: 1px solid #ccc; box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
margin: 25px 12px; margin: 25px 12px;
border-radius: 5px;
} }
.gxdpf-formHoad{ .gxdpf-formHoad{
width: 100%; width: 100%;
height: 60px; height: 60px;
background-color:#E0E0E0; border-bottom: 1px solid rgba(0, 0, 0, .12);
position: relative; position: relative;
} }
.gxdpf-formHoad h4{ .gxdpf-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;
} }
.gxdpf-formHoad h4 span{ .gxdpf-formHoad h4 span{
color:#363636; color:#363636;
font-size: 14px; font-size: 14px;
z-index: 11; z-index: 11;
} }
.gxdpf-input-box{ .gxdpf-input-box{
width:360px; height :60px;
height :30px;
margin: 20px; margin: 20px;
position: relative; position: relative;
} }
.data-processing { .data-processing {
width: 100%; width: 100%;
...@@ -292,7 +278,7 @@ ...@@ -292,7 +278,7 @@
padding: 20px 0; padding: 20px 0;
} }
.border-left{ .border-left{
border-left:1px solid #ccc; border-left:1px solid #ccc;
} }
.gxdpf-input-box ul li{ .gxdpf-input-box ul li{
float: left; float: left;
...@@ -300,4 +286,4 @@ ...@@ -300,4 +286,4 @@
line-height: 30px; line-height: 30px;
list-style:none; list-style:none;
} }
</style> </style>
\ No newline at end of file
src/views/money/index.vue
<template> <template>
<div class="money-box"> <div class="money-box">
<div class="money-box-1"> <div class="money-box-1">
<div class="money-content"> <div class="money-content">
<div class="money-title">拨款处理</div>
<div class="money-form">
<div class="money-form"> <div class="money-formHoad">
<div class="money-formHoad" > <h4><span>搜索条件</span></h4>
<h4><span>搜索条件</span></h4> </div>
</div> <div class="money-input-box">
<div class="money-input-box">
<ul>
<li>地区:</li>
<li>
<el-select v-model="value" placeholder="请选择">
<el-option
v-for="item in options2"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</li>
</ul>
<div style="clear:both; width: 1210px; padding-top: 10px; margin:10px 0; opacity: 0.5;">
<hr>
</div>
<ul> <ul>
<li>亲属姓名:</li> <li>地区:</li>
<li> <li>
<el-input <el-select v-model="value" placeholder="请选择">
placeholder="请输入名字" <el-option
v-model="input1" v-for="item in options2"
clearable> :key="item.value"
</el-input> :label="item.label"
</li> :value="item.value"
<li>每页显示</li> />
<li> </el-select>
<el-pagination </li>
@size-change="handleSizeChange" </ul>
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[5,10,20,30]"
:page-size="pageSize"
layout="sizes"
:total="tableData.length" >
</el-pagination>
</li>
<li>
<el-button type="primary" size="mini" @click="queryRegion()" >查询</el-button>
</li>
</ul>
</div> <br>
</div> <br>
<div class="money-form">
<div class="money-formHoad">
<h4><span>扶贫登记列表</span></h4>
<div style="position:absolute;top:10px;right:25px;z-index: 1;">
<el-button type="primary" @click="exportFile()">批量拨款</el-button>
<el-button type="primary" @click="exportFile()">导出表格</el-button></div>
</div>
<!-- 表格 -->
<el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" style="width: 100%; font-size:14px; "
:cell-style="cellStyle" :header-cell-style="rowClass" >
<el-table-column type="selection" width="60">
</el-table-column>
<el-table-column prop="id" label="序号" width="90" >
</el-table-column>
<el-table-column prop="name" label="姓名" width="100" >
</el-table-column>
<el-table-column prop="age" label="年龄" width="90" >
</el-table-column>
<el-table-column prop="gender" label="性别" width="90" >
</el-table-column>
<el-table-column prop="telephone" label="手机号" width="150" >
</el-table-column>
<el-table-column prop="address" label="地址" width="300" >
</el-table-column>
<el-table-column prop="grade" label="伤残等级" width="90" >
</el-table-column>
<el-table-column prop="state" label="状态" width="90" >
</el-table-column>
<el-table-column prop="apply" label="申请时间" width="110" >
</el-table-column>
<el-table-column label="操作" width="80">
<template slot-scope="scope">
<el-button @click="handleClick(scope.row)" type="text" size="small">拨款</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<div class="block" >
<div style=" height :40px; margin-top:12px; margin-left:6px;">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[5,10,20,30]"
:page-size="pageSize"
layout="total, prev, pager, next, jumper"
:total="tableData.length" >
</el-pagination>
</div>
</div>
</div>
<ul>
<li>亲属姓名:</li>
<li>
<el-input
v-model="input1"
placeholder="请输入名字"
clearable
/>
</li>
<li>每页显示</li>
<li>
<el-pagination
:current-page="currentPage"
:page-sizes="[5,10,20,30]"
:page-size="pageSize"
layout="sizes"
:total="tableData.length"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</li>
<li>
<el-button type="primary" size="mini" @click="queryRegion()">查询</el-button>
</li>
</ul>
</div>
</div> </div>
</div>
</div>
<div class="money-form">
<div class="money-formHoad">
<h4><span>扶贫登记列表</span></h4>
<div style="position:absolute;top:10px;right:25px;z-index: 1;">
<el-button type="primary" @click="exportFile()">批量拨款</el-button>
<el-button type="primary" @click="exportFile()">导出表格</el-button></div>
</div>
<!-- 表格 -->
<el-table
:data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
style="width: 100%; font-size:14px; "
:cell-style="cellStyle"
:header-cell-style="rowClass"
>
<el-table-column type="selection" width="60" />
<el-table-column prop="id" label="序号" width="90" />
<el-table-column prop="name" label="姓名" width="100" />
<el-table-column prop="age" label="年龄" width="90" />
<el-table-column prop="gender" label="性别" width="90" />
<el-table-column prop="telephone" label="手机号" width="150" />
<el-table-column prop="address" label="地址" width="300" />
<el-table-column prop="grade" label="伤残等级" width="90" />
<el-table-column prop="state" label="状态" width="90" />
<el-table-column prop="apply" label="申请时间" width="110" />
<el-table-column label="操作" width="80">
<template slot-scope="scope">
<el-button type="text" size="small" @click="handleClick(scope.row)">拨款</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<div class="block">
<div style=" height :40px; margin-top:12px; margin-left:6px;">
<el-pagination
:current-page="currentPage"
:page-sizes="[5,10,20,30]"
:page-size="pageSize"
layout="total, prev, pager, next, jumper"
:total="tableData.length"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
</div>
</div>
</div>
</div>
</div>
</template> </template>
<script> <script>
export default { export default {
name:'money', name: 'Money',
data() { data() {
return { return {
tableData: [{ tableData: [{
id: '1', id: '1',
name: '王小虎', name: '王小虎',
age:'30', age: '30',
telephone:'19857846724', telephone: '19857846724',
address:'广西壮族自治区隆安县那桐镇下邓村联房屯57号', address: '广西壮族自治区隆安县那桐镇下邓村联房屯57号',
gender:'男', gender: '男',
grade:'2级', grade: '2级',
state:'正常', state: '正常',
apply:'2020-01-02', apply: '2020-01-02'
},{ }, {
id: '2', id: '2',
name: '王小虎', name: '王小虎',
age:'30', age: '30',
telephone:'19857846724', telephone: '19857846724',
address:'广西壮族自治区隆安县那桐镇下邓村联房屯57号', address: '广西壮族自治区隆安县那桐镇下邓村联房屯57号',
gender:'男', gender: '男',
grade:'2级', grade: '2级',
state:'正常', state: '正常',
apply:'2020-01-02', apply: '2020-01-02'
},{ }, {
id: '3', id: '3',
name: '王小虎', name: '王小虎',
age:'30', age: '30',
telephone:'19857846724', telephone: '19857846724',
address:'广西壮族自治区隆安县那桐镇下邓村联房屯57号', address: '广西壮族自治区隆安县那桐镇下邓村联房屯57号',
gender:'男', gender: '男',
grade:'2级', grade: '2级',
state:'正常', state: '正常',
apply:'2020-01-02', apply: '2020-01-02'
},{ }, {
id: '4', id: '4',
name: '王小虎', name: '王小虎',
age:'30', age: '30',
telephone:'19857846724', telephone: '19857846724',
address:'广西壮族自治区隆安县那桐镇下邓村联房屯57号', address: '广西壮族自治区隆安县那桐镇下邓村联房屯57号',
gender:'男', gender: '男',
grade:'2级', grade: '2级',
state:'正常', state: '正常',
apply:'2020-01-02', apply: '2020-01-02'
},{ }, {
id: '5', id: '5',
name: '王小虎', name: '王小虎',
age:'30', age: '30',
telephone:'19857846724', telephone: '19857846724',
address:'广西壮族自治区隆安县那桐镇下邓村联房屯57号', address: '广西壮族自治区隆安县那桐镇下邓村联房屯57号',
gender:'男', gender: '男',
grade:'2级', grade: '2级',
state:'正常', state: '正常',
apply:'2020-01-02', apply: '2020-01-02'
},{ }, {
id: '6', id: '6',
name: '王小虎', name: '王小虎',
age:'30', age: '30',
telephone:'19857846724', telephone: '19857846724',
address:'广西壮族自治区隆安县那桐镇下邓村联房屯57号', address: '广西壮族自治区隆安县那桐镇下邓村联房屯57号',
gender:'男', gender: '男',
grade:'2级', grade: '2级',
state:'正常', state: '正常',
apply:'2020-01-02', apply: '2020-01-02'
},], }],
currentPage: 1, // 当前页码 currentPage: 1, // 当前页码
total: 20, // 总条数 total: 20, // 总条数
pageSize: 5, // 每页的数据条数 pageSize: 5, // 每页的数据条数
options2: [{
value: '选项1',
label: '广西壮族自治区'
}, {
value: '选项2',
label: '广西壮族自治区南宁市'
}, {
value: '选项3',
label: '南宁市南宁市辖区'
}, {
value: '选项4',
label: '南宁市兴宁区'
}, {
value: '选项5',
label: '南宁市青秀区'
}],
options2: [{ options1: [{
value: '选项1', value: '选项1',
label: '广西壮族自治区' label: '2020'
}, { }, {
value: '选项2', value: '选项2',
label: '广西壮族自治区南宁市' label: '2019'
}, { }, {
value: '选项3', value: '选项3',
label: '南宁市南宁市辖区' label: '2018'
}, { }, {
value: '选项4', value: '选项4',
label: '南宁市兴宁区' label: '2017'
}, { }, {
value: '选项5', value: '选项5',
label: '南宁市青秀区' label: '2016'
}], }],
value: '',
radio: '1',
input1: '',
input2: '',
value1: false
options1: [{ }
value: '选项1', },
label: '2020'
}, {
value: '选项2',
label: '2019'
}, {
value: '选项3',
label: '2018'
}, {
value: '选项4',
label: '2017'
}, {
value: '选项5',
label: '2016'
}],
value: '',
radio: '1',
input1: '',
input2: '',
value1: false,
};},
methods: {
//每页条数改变时触发 选择一页显示多少行
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
this.currentPage = 1;
this.pageSize = val;
},
//当前页改变时触发 跳转其他页
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
this.currentPage = val;
},
cellStyle({row,column,rowIndex,columnIndex}) {
return "text-align:center;"
},
rowClass({row,rowIndex}){
return "text-align:center;"
},
exportFile(){
console.log('11');
},
methods: {
// 每页条数改变时触发 选择一页显示多少行
handleSizeChange(val) {
console.log(`每页 ${val} 条`)
this.currentPage = 1
this.pageSize = val
},
// 当前页改变时触发 跳转其他页
handleCurrentChange(val) {
console.log(`当前页: ${val}`)
this.currentPage = val
},
cellStyle({ row, column, rowIndex, columnIndex }) {
return 'text-align:center;'
},
rowClass({ row, rowIndex }) {
return 'text-align:center;'
},
exportFile() {
console.log('11')
}
},} }}
</script> </script>
<style lang="scss"> <style lang="scss">
*{
margin: 0;
padding: 0;
line-height: 1.5;
}
.money-box{ .money-box{
position: relative; position: relative;
margin: 0; margin: 0;
padding: 8px 20px 24px; padding: 8px 20px 24px;
} }
.money-box-1{ .money-box-1{
width :100%; width :100%;
padding: 8px 20px 50px 20px; padding: 8px 20px 50px 20px;
} }
.money-content{ .money-content{
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, .12), 0 0 6px rgba(0, 0, 0, .04);
} border-radius: 5px;
.money-title{
height: 100px;
padding: 25px;
margin: 0 12px;
border: 1px solid #ccc;
} }
.money-form{ .money-form{
border: 1px solid #ccc; box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
border-radius: 5px;
margin: 25px 12px; margin: 25px 12px;
} }
.money-formHoad{ .money-formHoad{
width: 100%; width: 100%;
height: 60px; height: 60px;
background-color:#E0E0E0; border-bottom: 1px solid rgba(0, 0, 0, .12);
position: relative; position: relative;
} }
.money-formHoad h4{ .money-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;
} }
.money-formHoad h4 span{ .money-formHoad h4 span{
color:#363636; color:#363636;
font-size: 14px; font-size: 14px;
z-index: 11; z-index: 11;
} }
.money-input-box{ .money-input-box{
width:100%; width:100%;
height :90px; height :110px;
margin: 20px; margin: 20px;
} }
...@@ -334,11 +306,11 @@ ...@@ -334,11 +306,11 @@
list-style:none; list-style:none;
} }
.border-bottom{ .border-bottom{
border-bottom: 1px solid #ccc; border-bottom: 1px solid #ccc;
} }
.money-input-box-1{ .money-input-box-1{
position: relative; position: relative;
height: 45px; height: 45px;
width:977px; width:977px;
margin: 10px 0; margin: 10px 0;
} }
...@@ -352,6 +324,6 @@ ...@@ -352,6 +324,6 @@
margin: 20px; margin: 20px;
border-bottom: 1px solid #ccc; border-bottom: 1px solid #ccc;
height: 40px; height: 40px;
} }
</style> </style>
\ No newline at end of file
src/views/partymember/index.vue
<template> <template>
<div class="partymember-box"> <div class="partymember-box">
<div class="partymember-box-1"> <div class="partymember-box-1">
<div class="partymember-content"> <div class="partymember-content">
<div class="partymember-title">帮扶党员登记
<p style="margin: 5px 25px; font-size: 12px;">党员干部信息查询</p>
</div>
<div class="partymember-form">
<div class="partymember-form"> <div class="partymember-formHoad">
<div class="partymember-formHoad" > <h4><span>搜索条件</span></h4>
<h4><span>搜索条件</span></h4> </div>
</div> <div class="partymember-input-box">
<div class="partymember-input-box">
<ul>
<li>行政区域:</li>
<li>
<el-select v-model="value" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</li>
</ul>
<div style="clear:both; width: 1210px; padding-top: 10px; margin:10px 0; opacity: 0.5;">
<hr>
</div>
<ul> <ul>
<li>帮扶党员:</li> <li>行政区域:</li>
<li> <li>
<el-input <el-select v-model="value" placeholder="请选择">
placeholder="请输入帮扶党员干部名字" <el-option
v-model="input1" v-for="item in options"
clearable> :key="item.value"
</el-input> :label="item.label"
</li> :value="item.value"
<li>每页显示</li> />
<li> </el-select>
<el-pagination </li>
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[5,10,20,30]"
:page-size="pageSize"
layout="sizes"
:total="tableData.length" >
</el-pagination>
</li>
<li>
<el-button type="primary" size="mini" @click="queryRegion()" >查询</el-button>
</li>
</ul>
</div> </ul>
</div>
<div class="partymember-form"> <br>
<div class="partymember-formHoad"> <br>
<h4><span>用户列表</span></h4>
<div style="position:absolute;top:10px;right:25px;z-index: 1;">
<el-button type="success" @click="exportFile()">新增党员</el-button>
<el-button type="primary" @click="exportFile()">导出表格</el-button>
</div>
</div>
<!-- 表格 -->
<el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" style="width: 100%; font-size:14px; "
:cell-style="cellStyle" :header-cell-style="rowClass" >
<el-table-column prop="id" label="序号" width="100" >
</el-table-column>
<el-table-column prop="name" label="姓名" width="120" >
</el-table-column>
<el-table-column prop="telephone" label="手机号" width="200" >
</el-table-column>
<el-table-column prop="address" label="地址" width="380" >
</el-table-column>
<el-table-column prop="company" label="单位" width="150" >
</el-table-column>
<el-table-column prop="state" label="状态" width="150" >
</el-table-column>
<el-table-column label="查看" width="150">
<template slot-scope="scope">
<el-button @click="handleClick(scope.row)" size="small" icon="el-icon-edit" circle > </el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<div class="block" >
<div style=" height :40px; margin-top:12px; margin-left:6px;">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[5,10,20,30]"
:page-size="pageSize"
layout="total, prev, pager, next, jumper"
:total="tableData.length" >
</el-pagination>
</div>
</div>
</div>
<ul>
<li>帮扶党员:</li>
<li>
<el-input
v-model="input1"
placeholder="请输入帮扶党员干部名字"
clearable
/>
</li>
<li>每页显示</li>
<li>
<el-pagination
:current-page="currentPage"
:page-sizes="[5,10,20,30]"
:page-size="pageSize"
layout="sizes"
:total="tableData.length"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</li>
<li>
<el-button type="primary" size="mini" @click="queryRegion()">查询</el-button>
</li>
</ul>
</div>
</div> </div>
</div>
</div>
<div class="partymember-form">
<div class="partymember-formHoad">
<h4><span>用户列表</span></h4>
<div style="position:absolute;top:10px;right:25px;z-index: 1;">
<el-button type="success" @click="exportFile()">新增党员</el-button>
<el-button type="primary" @click="exportFile()">导出表格</el-button>
</div>
</div>
<!-- 表格 -->
<el-table
:data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
style="width: 100%; font-size:14px; "
:cell-style="cellStyle"
:header-cell-style="rowClass"
>
<el-table-column prop="id" label="序号" width="100" />
<el-table-column prop="name" label="姓名" width="120" />
<el-table-column prop="telephone" label="手机号" width="200" />
<el-table-column prop="address" label="地址" width="380" />
<el-table-column prop="company" label="单位" width="150" />
<el-table-column prop="state" label="状态" width="150" />
<el-table-column label="查看" width="156">
<template slot-scope="scope">
<el-button size="small" icon="el-icon-edit" circle @click="handleClick(scope.row)" />
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<div class="block">
<div style=" height :40px; margin-top:12px; margin-left:6px;">
<el-pagination
:current-page="currentPage"
:page-sizes="[5,10,20,30]"
:page-size="pageSize"
layout="total, prev, pager, next, jumper"
:total="tableData.length"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
</div>
</div>
</div>
</div>
</div>
</template> </template>
<script> <script>
export default { export default {
name:'people', name: 'People',
data() { data() {
return { return {
tableData: [{ tableData: [{
id: '1', id: '1',
name: '铁蛋', name: '铁蛋',
telephone:'19857846724', telephone: '19857846724',
address:'广西壮族自治区隆安县那桐镇下邓村联房屯57号', address: '广西壮族自治区隆安县那桐镇下邓村联房屯57号',
company:'麻垌镇容荔村', company: '麻垌镇容荔村',
state:'正常', state: '正常'
}, },
{ {
id: '2', id: '2',
name: '铁蛋', name: '铁蛋',
telephone:'19857846724', telephone: '19857846724',
address:'广西壮族自治区隆安县那桐镇下邓村联房屯57号', address: '广西壮族自治区隆安县那桐镇下邓村联房屯57号',
company:'麻垌镇容荔村', company: '麻垌镇容荔村',
state:'正常', state: '正常'
},
{
id: '3',
name: '铁蛋',
telephone:'19857846724',
address:'广西壮族自治区隆安县那桐镇下邓村联房屯57号',
company:'麻垌镇容荔村',
state:'正常',
},
{
id: '4',
name: '铁蛋',
telephone:'19857846724',
address:'广西壮族自治区隆安县那桐镇下邓村联房屯57号',
company:'麻垌镇容荔村',
state:'正常',
},
{
id: '5',
name: '铁蛋',
telephone:'19857846724',
address:'广西壮族自治区隆安县那桐镇下邓村联房屯57号',
company:'麻垌镇容荔村',
state:'正常',
},
{
id: '6',
name: '铁蛋',
telephone:'19857846724',
address:'广西壮族自治区隆安县那桐镇下邓村联房屯57号',
company:'麻垌镇容荔村',
state:'正常',
},],
currentPage: 1, // 当前页码
total: 20, // 总条数
pageSize: 5, // 每页的数据条数
options: [{
value: '选项1',
label: '广西壮族自治区'
}, {
value: '选项2',
label: '广西壮族自治区南宁市'
}, {
value: '选项3',
label: '南宁市南宁市辖区'
}, {
value: '选项4',
label: '南宁市兴宁区'
}, {
value: '选项5',
label: '南宁市青秀区'
}],
value: '',
radio: '1',
input1: '',
input2: '',
value1: false,
};},
methods: {
//每页条数改变时触发 选择一页显示多少行
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
this.currentPage = 1;
this.pageSize = val;
}, },
//当前页改变时触发 跳转其他页 {
handleCurrentChange(val) { id: '3',
console.log(`当前页: ${val}`); name: '铁蛋',
this.currentPage = val; telephone: '19857846724',
address: '广西壮族自治区隆安县那桐镇下邓村联房屯57号',
company: '麻垌镇容荔村',
state: '正常'
}, },
cellStyle({row,column,rowIndex,columnIndex}) { {
return "text-align:center;" id: '4',
name: '铁蛋',
telephone: '19857846724',
address: '广西壮族自治区隆安县那桐镇下邓村联房屯57号',
company: '麻垌镇容荔村',
state: '正常'
}, },
rowClass({row,rowIndex}){ {
return "text-align:center;" id: '5',
name: '铁蛋',
telephone: '19857846724',
address: '广西壮族自治区隆安县那桐镇下邓村联房屯57号',
company: '麻垌镇容荔村',
state: '正常'
}, },
{
id: '6',
name: '铁蛋',
telephone: '19857846724',
address: '广西壮族自治区隆安县那桐镇下邓村联房屯57号',
company: '麻垌镇容荔村',
state: '正常'
}],
currentPage: 1, // 当前页码
total: 20, // 总条数
pageSize: 5, // 每页的数据条数
options: [{
value: '选项1',
label: '广西壮族自治区'
}, {
value: '选项2',
label: '广西壮族自治区南宁市'
}, {
value: '选项3',
label: '南宁市南宁市辖区'
}, {
value: '选项4',
label: '南宁市兴宁区'
}, {
value: '选项5',
label: '南宁市青秀区'
}],
exportFile(){ value: '',
console.log('11'); radio: '1',
input1: '',
}, input2: '',
value1: false
}
},
methods: {
// 每页条数改变时触发 选择一页显示多少行
handleSizeChange(val) {
console.log(`每页 ${val} 条`)
this.currentPage = 1
this.pageSize = val
},
// 当前页改变时触发 跳转其他页
handleCurrentChange(val) {
console.log(`当前页: ${val}`)
this.currentPage = val
},
cellStyle({ row, column, rowIndex, columnIndex }) {
return 'text-align:center;'
},
rowClass({ row, rowIndex }) {
return 'text-align:center;'
},
},} exportFile() {
console.log('11')
}
}}
</script> </script>
<style lang="scss"> <style lang="scss">
*{
margin: 0;
padding: 0;
line-height: 1.5;
}
.partymember-box{ .partymember-box{
position: relative; position: relative;
margin: 0; margin: 0;
padding: 8px 20px 24px; padding: 8px 20px 24px;
} }
.partymember-box-1{ .partymember-box-1{
width :100%; width :100%;
padding: 8px 20px 50px 20px; padding: 8px 20px 50px 20px;
} }
.partymember-content{ .partymember-content{
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, .12), 0 0 6px rgba(0, 0, 0, .04);
} border-radius: 5px;
.partymember-title{
height: 100px;
padding: 25px;
margin: 0 12px;
border: 1px solid #ccc;
} }
.partymember-form{ .partymember-form{
border: 1px solid #ccc; box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
border-radius: 5px;
margin: 25px 12px; margin: 25px 12px;
} }
.partymember-formHoad{ .partymember-formHoad{
width: 100%; width: 100%;
height: 60px; height: 60px;
background-color:#E0E0E0; border-bottom: 1px solid rgba(0, 0, 0, .12);
position: relative; position: relative;
} }
.partymember-formHoad h4{ .partymember-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;
} }
.partymember-formHoad h4 span{ .partymember-formHoad h4 span{
color:#363636; color:#363636;
font-size: 14px; font-size: 14px;
z-index: 11; z-index: 11;
} }
.partymember-input-box{ .partymember-input-box{
width:100%; width:100%;
height :90px; height :110px;
margin: 20px; margin: 20px;
} }
...@@ -300,11 +272,11 @@ ...@@ -300,11 +272,11 @@
list-style:none; list-style:none;
} }
.border-bottom{ .border-bottom{
border-bottom: 1px solid #ccc; border-bottom: 1px solid #ccc;
} }
.partymember-input-box-1{ .partymember-input-box-1{
position: relative; position: relative;
height: 45px; height: 45px;
width:977px; width:977px;
margin: 10px 0; margin: 10px 0;
} }
...@@ -319,4 +291,4 @@ ...@@ -319,4 +291,4 @@
border-bottom: 1px solid #ccc; border-bottom: 1px solid #ccc;
height: 40px; height: 40px;
} }
</style> </style>
\ No newline at end of file
src/views/people/index.vue
<template> <template>
<div class="people-box"> <div class="people-box">
<div class="people-box-1"> <div class="people-box-1">
<div class="people-content"> <div class="people-content">
<div class="people-title">帮扶对象管理</div>
<div class="people-form">
<div class="people-form"> <div class="people-formHoad">
<div class="people-formHoad" > <h4><span>搜索条件</span></h4>
<h4><span>搜索条件</span></h4> </div>
</div> <div class="people-input-box">
<div class="people-input-box">
<ul>
<li>年份:</li>
<li>
<el-select v-model="value" placeholder="请选择">
<el-option
v-for="item in options1"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</li>
<li>地区:</li>
<li>
<el-select v-model="value" placeholder="请选择">
<el-option
v-for="item in options2"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</li>
</ul>
<div style="clear:both; width: 1210px; padding-top: 10px; margin:10px 0; opacity: 0.5;">
<hr>
</div>
<ul> <ul>
<li>帮扶对象:</li> <li>年份:</li>
<li> <li>
<el-input <el-select v-model="value" placeholder="请选择">
placeholder="请输入内容" <el-option
v-model="input1" v-for="item in options1"
clearable> :key="item.value"
</el-input> :label="item.label"
</li> :value="item.value"
<li>帮扶党员:</li> />
<li> </el-select>
<el-input </li>
placeholder="请输入内容" <li>地区:</li>
v-model="input1" <li>
clearable> <el-select v-model="value" placeholder="请选择">
</el-input> <el-option
</li> v-for="item in options2"
<li>每页显示</li> :key="item.value"
<li> :label="item.label"
<el-pagination :value="item.value"
@size-change="handleSizeChange" />
@current-change="handleCurrentChange" </el-select>
:current-page="currentPage" </li>
:page-sizes="[5,10,20,30]" </ul>
:page-size="pageSize"
layout="sizes"
:total="tableData.length" >
</el-pagination>
</li>
<li>
<el-button type="primary" size="mini" @click="queryRegion()" >查询</el-button>
</li>
</ul>
</div> <br>
</div> <br>
<div class="people-form">
<div class="people-formHoad">
<h4><span>用户列表</span></h4>
<div style="position:absolute;top:10px;right:25px;z-index: 1;">
<el-button type="primary" @click="exportFile()">导出表格</el-button></div>
</div>
<!-- 表格 -->
<el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" style="width: 100%; font-size:14px; "
:cell-style="cellStyle" :header-cell-style="rowClass" >
<el-table-column prop="id" label="序号" width="90" >
</el-table-column>
<el-table-column prop="name" label="姓名" width="120" >
</el-table-column>
<el-table-column prop="age" label="年龄" width="90" >
</el-table-column>
<el-table-column prop="gender" label="性别" width="90" >
</el-table-column>
<el-table-column prop="telephone" label="手机号" width="150" >
</el-table-column>
<el-table-column prop="address" label="地址" width="350" >
</el-table-column>
<el-table-column prop="category" label="伤残类别" width="120" >
</el-table-column>
<el-table-column prop="grade" label="伤残等级" width="120" >
</el-table-column>
<el-table-column prop="menusstate" label="选择" width="120">
<template slot-scope="scope">
<el-switch
on-color="#5B7BFA"
off-color="#dadde5"
v-model="scope.row.menusstate"
:plain="true"
@click="handleClick(scope.row)">
</el-switch>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<div class="block" >
<div style=" height :40px; margin-top:12px; margin-left:6px;">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[5,10,20,30]"
:page-size="pageSize"
layout="total, prev, pager, next, jumper"
:total="tableData.length" >
</el-pagination>
</div>
</div>
</div>
<ul>
<li>帮扶对象:</li>
<li>
<el-input
v-model="input1"
placeholder="请输入内容"
clearable
/>
</li>
<li>帮扶党员:</li>
<li>
<el-input
v-model="input1"
placeholder="请输入内容"
clearable
/>
</li>
<li>每页显示</li>
<li>
<el-pagination
:current-page="currentPage"
:page-sizes="[5,10,20,30]"
:page-size="pageSize"
layout="sizes"
:total="tableData.length"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</li>
<li>
<el-button type="primary" size="mini" @click="queryRegion()">查询</el-button>
</li>
</ul>
</div>
</div> </div>
</div>
</div>
<div class="people-form">
<div class="people-formHoad">
<h4><span>用户列表</span></h4>
<div style="position:absolute;top:10px;right:25px;z-index: 1;">
<el-button type="primary" @click="exportFile()">导出表格</el-button></div>
</div>
<!-- 表格 -->
<el-table
:data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
style="width: 100%; font-size:14px; "
:cell-style="cellStyle"
:header-cell-style="rowClass"
>
<el-table-column prop="id" label="序号" width="90" />
<el-table-column prop="name" label="姓名" width="120" />
<el-table-column prop="age" label="年龄" width="90" />
<el-table-column prop="gender" label="性别" width="90" />
<el-table-column prop="telephone" label="手机号" width="150" />
<el-table-column prop="address" label="地址" width="350" />
<el-table-column prop="category" label="伤残类别" width="120" />
<el-table-column prop="grade" label="伤残等级" width="120" />
<el-table-column prop="menusstate" label="选择" width="120">
<template slot-scope="scope">
<el-switch
v-model="scope.row.menusstate"
on-color="#5B7BFA"
off-color="#dadde5"
:plain="true"
@click="handleClick(scope.row)"
/>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<div class="block">
<div style=" height :40px; margin-top:12px; margin-left:6px;">
<el-pagination
:current-page="currentPage"
:page-sizes="[5,10,20,30]"
:page-size="pageSize"
layout="total, prev, pager, next, jumper"
:total="tableData.length"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
</div>
</div>
</div>
</div>
</div>
</template> </template>
<script> <script>
export default { export default {
name:'people', name: 'People',
data() { data() {
return { return {
tableData: [{ tableData: [{
id: '1', id: '1',
name: '王小虎', name: '王小虎',
age:'30', age: '30',
gender:'男', gender: '男',
telephone:'19857846724', telephone: '19857846724',
address:'广西壮族自治区隆安县那桐镇下邓村联房屯57号', address: '广西壮族自治区隆安县那桐镇下邓村联房屯57号',
category:'肢体', category: '肢体',
grade:'2级', grade: '2级',
menusstate:true, menusstate: true
},{ }, {
id: '2', id: '2',
name: '王小虎', name: '王小虎',
age:'30', age: '30',
gender:'男', gender: '男',
telephone:'19857846724', telephone: '19857846724',
address:'广西壮族自治区隆安县那桐镇下邓村联房屯57号', address: '广西壮族自治区隆安县那桐镇下邓村联房屯57号',
category:'肢体', category: '肢体',
grade:'2级', grade: '2级',
menusstate:false, menusstate: false
},{ }, {
id: '3', id: '3',
name: '王小虎', name: '王小虎',
age:'30', age: '30',
gender:'男', gender: '男',
telephone:'19857846724', telephone: '19857846724',
address:'广西壮族自治区隆安县那桐镇下邓村联房屯57号', address: '广西壮族自治区隆安县那桐镇下邓村联房屯57号',
category:'肢体', category: '肢体',
grade:'2级', grade: '2级',
menusstate:true, menusstate: true
},{ }, {
id: '4', id: '4',
name: '王小虎', name: '王小虎',
age:'30', age: '30',
gender:'男', gender: '男',
telephone:'19857846724', telephone: '19857846724',
address:'广西壮族自治区隆安县那桐镇下邓村联房屯57号', address: '广西壮族自治区隆安县那桐镇下邓村联房屯57号',
category:'肢体', category: '肢体',
grade:'2级', grade: '2级',
menusstate:false, menusstate: false
},{ }, {
id: '5', id: '5',
name: '王小虎', name: '王小虎',
age:'30', age: '30',
gender:'男', gender: '男',
telephone:'19857846724', telephone: '19857846724',
address:'广西壮族自治区隆安县那桐镇下邓村联房屯57号', address: '广西壮族自治区隆安县那桐镇下邓村联房屯57号',
category:'肢体', category: '肢体',
grade:'2级', grade: '2级',
menusstate:false, menusstate: false
},{ }, {
id: '6', id: '6',
name: '王小虎', name: '王小虎',
age:'30', age: '30',
gender:'男', gender: '男',
telephone:'19857846724', telephone: '19857846724',
address:'广西壮族自治区隆安县那桐镇下邓村联房屯57号', address: '广西壮族自治区隆安县那桐镇下邓村联房屯57号',
category:'肢体', category: '肢体',
grade:'2级', grade: '2级',
menusstate:false, menusstate: false
},{ }, {
id: '7', id: '7',
name: '王小虎', name: '王小虎',
age:'30', age: '30',
gender:'男', gender: '男',
telephone:'19857846724', telephone: '19857846724',
address:'广西壮族自治区隆安县那桐镇下邓村联房屯57号', address: '广西壮族自治区隆安县那桐镇下邓村联房屯57号',
category:'肢体', category: '肢体',
grade:'2级', grade: '2级',
menusstate:false, menusstate: false
},], }],
currentPage: 1, // 当前页码 currentPage: 1, // 当前页码
total: 20, // 总条数 total: 20, // 总条数
pageSize: 5, // 每页的数据条数 pageSize: 5, // 每页的数据条数
options2: [{ options2: [{
value: '选项1', value: '选项1',
label: '广西壮族自治区' label: '广西壮族自治区'
}, { }, {
value: '选项2', value: '选项2',
label: '广西壮族自治区南宁市' label: '广西壮族自治区南宁市'
}, { }, {
value: '选项3', value: '选项3',
label: '南宁市南宁市辖区' label: '南宁市南宁市辖区'
}, { }, {
value: '选项4', value: '选项4',
label: '南宁市兴宁区' label: '南宁市兴宁区'
}, { }, {
value: '选项5', value: '选项5',
label: '南宁市青秀区' label: '南宁市青秀区'
}], }],
options1: [{
value: '选项1',
label: '2020'
}, {
value: '选项2',
label: '2019'
}, {
value: '选项3',
label: '2018'
}, {
value: '选项4',
label: '2017'
}, {
value: '选项5',
label: '2016'
}],
value: '',
radio: '1',
input1: '',
input2: '',
options1: [{ value1: false
value: '选项1',
label: '2020'
}, {
value: '选项2',
label: '2019'
}, {
value: '选项3',
label: '2018'
}, {
value: '选项4',
label: '2017'
}, {
value: '选项5',
label: '2016'
}],
value: '',
radio: '1',
input1: '',
input2: '',
value1: false, }
},
};},
methods: {
//每页条数改变时触发 选择一页显示多少行
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
this.currentPage = 1;
this.pageSize = val;
},
//当前页改变时触发 跳转其他页
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
this.currentPage = val;
},
cellStyle({row,column,rowIndex,columnIndex}) {
return "text-align:center;"
},
rowClass({row,rowIndex}){
return "text-align:center;"
},
exportFile(){
console.log('11');
},
handleClick(){
}
methods: {
// 每页条数改变时触发 选择一页显示多少行
handleSizeChange(val) {
console.log(`每页 ${val} 条`)
this.currentPage = 1
this.pageSize = val
},
// 当前页改变时触发 跳转其他页
handleCurrentChange(val) {
console.log(`当前页: ${val}`)
this.currentPage = val
},
cellStyle({ row, column, rowIndex, columnIndex }) {
return 'text-align:center;'
},
rowClass({ row, rowIndex }) {
return 'text-align:center;'
},
exportFile() {
console.log('11')
},
handleClick() {
}
},} }}
</script> </script>
<style lang="scss"> <style lang="scss">
*{
margin: 0;
padding: 0;
line-height: 1.5;
}
.people-box{ .people-box{
position: relative; position: relative;
margin: 0; margin: 0;
padding: 8px 20px 24px; padding: 8px 20px 24px;
} }
.people-box-1{ .people-box-1{
width :100%; width :100%;
padding: 8px 20px 50px 20px; padding: 8px 20px 50px 20px;
} }
.people-content{ .people-content{
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, .12), 0 0 6px rgba(0, 0, 0, .04);
} border-radius: 5px;
.people-title{
height: 100px;
padding: 25px;
margin: 0 12px;
border: 1px solid #ccc;
} }
.people-form{ .people-form{
border: 1px solid #ccc; box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
border-radius: 5px;
margin: 25px 12px; margin: 25px 12px;
} }
.people-formHoad{ .people-formHoad{
width: 100%; width: 100%;
height: 60px; height: 60px;
background-color:#E0E0E0; border-bottom:1px solid rgba(0, 0, 0, .12);
position: relative; position: relative;
} }
.people-formHoad h4{ .people-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;
} }
.people-formHoad h4 span{ .people-formHoad h4 span{
color:#363636; color:#363636;
font-size: 14px; font-size: 14px;
z-index: 11; z-index: 11;
} }
.people-input-box{ .people-input-box{
width:100%; width:100%;
height :90px; height :110px;
margin: 20px; margin: 20px;
} }
...@@ -371,11 +342,11 @@ ...@@ -371,11 +342,11 @@
list-style:none; list-style:none;
} }
.border-bottom{ .border-bottom{
border-bottom: 1px solid #ccc; border-bottom: 1px solid #ccc;
} }
.people-input-box-1{ .people-input-box-1{
position: relative; position: relative;
height: 45px; height: 45px;
width:977px; width:977px;
margin: 10px 0; margin: 10px 0;
} }
...@@ -389,6 +360,6 @@ ...@@ -389,6 +360,6 @@
margin: 20px; margin: 20px;
border-bottom: 1px solid #ccc; border-bottom: 1px solid #ccc;
height: 40px; height: 40px;
} }
</style> </style>
\ No newline at end of file
src/views/publicly/index.vue
<template> <template>
<div class="publicly-box"> <div class="publicly-box">
<div class="publicly-box-1"> <div class="publicly-box-1">
<div class="publicly-content"> <div class="publicly-content">
<div class="publicly-title">扶残公示
<p style="margin: 5px 25px; font-size: 12px;">扶残公示</p> <div class="publicly-form">
<div class="publicly-formHoad">
<h4><span>搜索条件</span></h4>
<div style="position:absolute; top:10px; right:25px;z-index: 1;">
<el-button type="primary" @click="queryRegion()">新增项目</el-button>
</div> </div>
</div>
<div class="publicly-form"> <div class="publicly-input-box">
<div class="publicly-formHoad" >
<h4><span>搜索条件</span></h4>
<div style="position:absolute; top:10px; right:25px;z-index: 1;">
<el-button type="primary" @click="queryRegion()" >新增项目</el-button>
</div>
</div> <ul>
<div class="publicly-input-box"> <li>地区:</li>
<li>
<ul> <el-select v-model="value" placeholder="请选择">
<li>地区:</li> <el-option
<li> v-for="item in options2"
<el-select v-model="value" placeholder="请选择"> :key="item.value"
<el-option :label="item.label"
v-for="item in options2" :value="item.value"
:key="item.value" />
:label="item.label" </el-select>
:value="item.value"> </li>
</el-option> <li>年份:</li>
</el-select> <li>
</li> <el-select v-model="value" placeholder="请选择">
<li>年份:</li> <el-option
<li> v-for="item in options1"
<el-select v-model="value" placeholder="请选择"> :key="item.value"
<el-option :label="item.label"
v-for="item in options1" :value="item.value"
:key="item.value" />
:label="item.label" </el-select>
:value="item.value"> </li>
</el-option> </ul>
</el-select>
</li>
</ul>
<div style="clear:both; width: 1210px; padding-top: 10px; margin:10px 0; opacity: 0.5;">
<hr>
</div>
<ul> <br>
<li>名字:</li> <br>
<li>
<el-input
placeholder="请输入名字"
v-model="input1"
clearable>
</el-input>
</li>
<li>每页显示</li>
<li>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[5,10,20,30]"
:page-size="pageSize"
layout="sizes"
:total="tableData.length" >
</el-pagination>
</li>
<li>
<el-button type="primary" size="mini" @click="queryRegion()" >查询</el-button>
</li>
</ul>
</div> <ul>
</div> <li>名字:</li>
<li>
<el-input
v-model="input1"
placeholder="请输入名字"
clearable
/>
</li>
<li>每页显示</li>
<li>
<el-pagination
:current-page="currentPage"
:page-sizes="[5,10,20,30]"
:page-size="pageSize"
layout="sizes"
:total="tableData.length"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</li>
<li>
<el-button type="primary" size="mini" @click="queryRegion()">查询</el-button>
</li>
</ul>
<div class="publicly-form"> </div>
<div class="publicly-formHoad"> </div>
<h4><span>用户列表</span></h4>
<div style="position:absolute;top:10px;right:25px;z-index: 1;">
<el-button type="primary" @click="exportFile()">导出表格</el-button></div>
</div>
<!-- 表格 -->
<el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" style="width: 100%; font-size:14px; "
:cell-style="cellStyle" :header-cell-style="rowClass" >
<el-table-column prop="id" label="序号" width="130" >
</el-table-column>
<el-table-column prop="name" label="姓名" width="130" >
</el-table-column>
<el-table-column prop="gender" label="性别" width="110" >
</el-table-column>
<el-table-column prop="telephone" label="手机号" width="200" >
</el-table-column>
<el-table-column prop="address" label="地址" width="380" >
</el-table-column>
<el-table-column prop="grade" label="伤残等级" width="150" >
</el-table-column>
<el-table-column prop="apply" label="申请时间" width="150" >
</el-table-column>
</el-table>
<!-- 分页 -->
<div class="block" >
<div style=" height :40px; margin-top:12px; margin-left:6px;">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[5,10,20,30]"
:page-size="pageSize"
layout="total, prev, pager, next, jumper"
:total="tableData.length" >
</el-pagination>
</div>
</div>
</div>
<div class="publicly-form">
<div class="publicly-formHoad">
<h4><span>用户列表</span></h4>
<div style="position:absolute;top:10px;right:25px;z-index: 1;">
<el-button type="primary" @click="exportFile()">导出表格</el-button></div>
</div>
<!-- 表格 -->
<el-table
:data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
style="width: 100%; font-size:14px; "
:cell-style="cellStyle"
:header-cell-style="rowClass"
>
<el-table-column prop="id" label="序号" width="130" />
<el-table-column prop="name" label="姓名" width="130" />
<el-table-column prop="gender" label="性别" width="110" />
<el-table-column prop="telephone" label="手机号" width="200" />
<el-table-column prop="address" label="地址" width="380" />
<el-table-column prop="grade" label="伤残等级" width="150" />
<el-table-column prop="apply" label="申请时间" width="156" />
</el-table>
<!-- 分页 -->
<div class="block">
<div style=" height :40px; margin-top:12px; margin-left:6px;">
<el-pagination
:current-page="currentPage"
:page-sizes="[5,10,20,30]"
:page-size="pageSize"
layout="total, prev, pager, next, jumper"
:total="tableData.length"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
</div>
</div> </div>
</div>
</div>
</div>
</div>
</div>
</template> </template>
<script> <script>
export default { export default {
name:'publicly', name: 'Publicly',
data() { data() {
return { return {
tableData: [{ tableData: [{
id: '1', id: '1',
name: '王小虎', name: '王小虎',
gender:'男', gender: '男',
telephone:'19857846724', telephone: '19857846724',
address:'广西壮族自治区隆安县那桐镇下邓村联房屯57号', address: '广西壮族自治区隆安县那桐镇下邓村联房屯57号',
grade:'2级', grade: '2级',
apply:'2020-01-02', apply: '2020-01-02'
}, },
{ {
id: '2', id: '2',
name: '王小虎', name: '王小虎',
gender:'男', gender: '男',
telephone:'19857846724', telephone: '19857846724',
address:'广西壮族自治区隆安县那桐镇下邓村联房屯57号', address: '广西壮族自治区隆安县那桐镇下邓村联房屯57号',
grade:'2级', grade: '2级',
apply:'2020-01-02', apply: '2020-01-02'
},
{
id: '3',
name: '王小虎',
gender:'男',
telephone:'19857846724',
address:'广西壮族自治区隆安县那桐镇下邓村联房屯57号',
grade:'2级',
apply:'2020-01-02',
},
{
id: '4',
name: '王小虎',
gender:'男',
telephone:'19857846724',
address:'广西壮族自治区隆安县那桐镇下邓村联房屯57号',
grade:'2级',
apply:'2020-01-02',
},
{
id: '5',
name: '王小虎',
gender:'男',
telephone:'19857846724',
address:'广西壮族自治区隆安县那桐镇下邓村联房屯57号',
grade:'2级',
apply:'2020-01-02',
},
{
id: '6',
name: '王小虎',
gender:'男',
telephone:'19857846724',
address:'广西壮族自治区隆安县那桐镇下邓村联房屯57号',
grade:'2级',
apply:'2020-01-02',
},],
currentPage: 1, // 当前页码
total: 20, // 总条数
pageSize: 5, // 每页的数据条数
options2: [{
value: '选项1',
label: '广西壮族自治区'
}, {
value: '选项2',
label: '广西壮族自治区南宁市'
}, {
value: '选项3',
label: '南宁市南宁市辖区'
}, {
value: '选项4',
label: '南宁市兴宁区'
}, {
value: '选项5',
label: '南宁市青秀区'
}],
options1: [{
value: '选项1',
label: '2020'
}, {
value: '选项2',
label: '2019'
}, {
value: '选项3',
label: '2018'
}, {
value: '选项4',
label: '2017'
}, {
value: '选项5',
label: '2016'
}],
value: '',
radio: '1',
input1: '',
input2: '',
value1: false,
};},
methods: {
//每页条数改变时触发 选择一页显示多少行
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
this.currentPage = 1;
this.pageSize = val;
}, },
//当前页改变时触发 跳转其他页 {
handleCurrentChange(val) { id: '3',
console.log(`当前页: ${val}`); name: '王小虎',
this.currentPage = val; gender: '男',
telephone: '19857846724',
address: '广西壮族自治区隆安县那桐镇下邓村联房屯57号',
grade: '2级',
apply: '2020-01-02'
}, },
cellStyle({row,column,rowIndex,columnIndex}) { {
return "text-align:center;" id: '4',
name: '王小虎',
gender: '男',
telephone: '19857846724',
address: '广西壮族自治区隆安县那桐镇下邓村联房屯57号',
grade: '2级',
apply: '2020-01-02'
}, },
rowClass({row,rowIndex}){ {
return "text-align:center;" id: '5',
name: '王小虎',
gender: '男',
telephone: '19857846724',
address: '广西壮族自治区隆安县那桐镇下邓村联房屯57号',
grade: '2级',
apply: '2020-01-02'
}, },
{
id: '6',
name: '王小虎',
gender: '男',
telephone: '19857846724',
address: '广西壮族自治区隆安县那桐镇下邓村联房屯57号',
grade: '2级',
apply: '2020-01-02'
}],
currentPage: 1, // 当前页码
total: 20, // 总条数
pageSize: 5, // 每页的数据条数
options2: [{
value: '选项1',
label: '广西壮族自治区'
}, {
value: '选项2',
label: '广西壮族自治区南宁市'
}, {
value: '选项3',
label: '南宁市南宁市辖区'
}, {
value: '选项4',
label: '南宁市兴宁区'
}, {
value: '选项5',
label: '南宁市青秀区'
}],
exportFile(){ options1: [{
console.log('11'); value: '选项1',
label: '2020'
}, }, {
value: '选项2',
label: '2019'
}, {
value: '选项3',
label: '2018'
}, {
value: '选项4',
label: '2017'
}, {
value: '选项5',
label: '2016'
}],
value: '',
radio: '1',
input1: '',
input2: '',
value1: false
}
},
methods: {
// 每页条数改变时触发 选择一页显示多少行
handleSizeChange(val) {
console.log(`每页 ${val} 条`)
this.currentPage = 1
this.pageSize = val
},
// 当前页改变时触发 跳转其他页
handleCurrentChange(val) {
console.log(`当前页: ${val}`)
this.currentPage = val
},
cellStyle({ row, column, rowIndex, columnIndex }) {
return 'text-align:center;'
},
rowClass({ row, rowIndex }) {
return 'text-align:center;'
},
exportFile() {
console.log('11')
}
},} }}
</script> </script>
<style lang="scss"> <style lang="scss">
*{
margin: 0;
padding: 0;
line-height: 1.5;
}
.publicly-box{ .publicly-box{
position: relative; position: relative;
margin: 0; margin: 0;
padding: 8px 20px 24px; padding: 8px 20px 24px;
} }
.publicly-box-1{ .publicly-box-1{
width :100%; width :100%;
padding: 8px 20px 50px 20px; padding: 8px 20px 50px 20px;
} }
.publicly-content{ .publicly-content{
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, .12), 0 0 6px rgba(0, 0, 0, .04);
} border-radius: 5px;
.publicly-title{
height: 100px;
padding: 25px;
margin: 0 12px;
border: 1px solid #ccc;
} }
.publicly-form{ .publicly-form{
border: 1px solid #ccc; box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
border-radius: 5px;
margin: 25px 12px; margin: 25px 12px;
} }
.publicly-formHoad{ .publicly-formHoad{
width: 100%; width: 100%;
height: 60px; height: 60px;
background-color:#E0E0E0; border-bottom: 1px solid rgba(0, 0, 0, .12);
position: relative; position: relative;
} }
.publicly-formHoad h4{ .publicly-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;
} }
.publicly-formHoad h4 span{ .publicly-formHoad h4 span{
color:#363636; color:#363636;
font-size: 14px; font-size: 14px;
z-index: 11; z-index: 11;
} }
.publicly-input-box{ .publicly-input-box{
width:100%; width:100%;
height :90px; height :110px;
margin: 20px; margin: 20px;
} }
...@@ -334,11 +305,11 @@ ...@@ -334,11 +305,11 @@
list-style:none; list-style:none;
} }
.border-bottom{ .border-bottom{
border-bottom: 1px solid #ccc; border-bottom: 1px solid #ccc;
} }
.publicly-input-box-1{ .publicly-input-box-1{
position: relative; position: relative;
height: 45px; height: 45px;
width:977px; width:977px;
margin: 10px 0; margin: 10px 0;
} }
...@@ -352,6 +323,6 @@ ...@@ -352,6 +323,6 @@
margin: 20px; margin: 20px;
border-bottom: 1px solid #ccc; border-bottom: 1px solid #ccc;
height: 40px; height: 40px;
} }
</style> </style>
\ No newline at end of file
src/views/query/index.vue
<template> <template>
<div class="query-box"> <div class="query-box">
<div class="query-box-1"> <div class="query-box-1">
<div class="query-content"> <div class="query-content">
<div class="query-title">项目信息查询
<p style="margin: 5px 25px; font-size: 12px;">综合信息查询</p> <div class="query-form">
</div> <div class="query-formHoad">
<h4><span>搜索条件</span></h4>
</div>
<div class="query-input-box">
<ul>
<li>年份:</li>
<li>
<el-select v-model="value" placeholder="请选择">
<el-option
v-for="item in options1"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</li>
<li>地区:</li>
<li>
<el-select v-model="value" placeholder="请选择">
<el-option
v-for="item in options2"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</li>
</ul>
<br>
<br>
<ul>
<div class="query-form"> <li>帮扶对象:</li>
<div class="query-formHoad" > <li>
<h4><span>搜索条件</span></h4> <el-input
</div> v-model="input1"
<div class="query-input-box"> placeholder="请输入内容"
<ul> clearable
<li>年份:</li> />
<li> </li>
<el-select v-model="value" placeholder="请选择"> <li>帮扶党员:</li>
<el-option <li>
v-for="item in options1" <el-input
:key="item.value" v-model="input1"
:label="item.label" placeholder="请输入内容"
:value="item.value"> clearable
</el-option> />
</el-select> </li>
</li> <li>每页显示</li>
<li>地区:</li> <li>
<li> <el-pagination
<el-select v-model="value" placeholder="请选择"> :current-page="currentPage"
<el-option :page-sizes="[5,10,20,30]"
v-for="item in options2" :page-size="pageSize"
:key="item.value" layout="sizes"
:label="item.label" :total="tableData.length"
:value="item.value"> @size-change="handleSizeChange"
</el-option> @current-change="handleCurrentChange"
</el-select> />
</li> </li>
</ul> <li>
<el-button type="primary" size="mini" @click="queryRegion()">查询</el-button>
<div style="clear:both; width: 1210px; padding-top: 10px; margin:10px 0; opacity: 0.5;"> </li>
<hr> </ul>
</div>
<ul>
<li>帮扶对象:</li>
<li>
<el-input
placeholder="请输入内容"
v-model="input1"
clearable>
</el-input>
</li>
<li>帮扶党员:</li>
<li>
<el-input
placeholder="请输入内容"
v-model="input1"
clearable>
</el-input>
</li>
<li>每页显示</li>
<li>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[5,10,20,30]"
:page-size="pageSize"
layout="sizes"
:total="tableData.length" >
</el-pagination>
</li>
<li>
<el-button type="primary" size="mini" @click="queryRegion()" >查询</el-button>
</li>
</ul>
</div>
</div>
<div class="query-form">
<div class="query-formHoad">
<h4><span>用户列表</span></h4>
<div style="position:absolute;top:10px;right:25px;z-index: 1;">
<el-button type="primary" @click="exportFile()">导出表格</el-button></div>
</div>
<!-- 表格 -->
<el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" style="width: 100%; font-size:14px; "
:cell-style="cellStyle" :header-cell-style="rowClass" >
<el-table-column prop="id" label="序号" width="130" >
</el-table-column>
<el-table-column prop="name" label="姓名" width="140" >
</el-table-column>
<el-table-column prop="age" label="年龄" width="130" >
</el-table-column>
<el-table-column prop="gender" label="性别" width="130" >
</el-table-column>
<el-table-column prop="telephone" label="手机号" width="160" >
</el-table-column>
<el-table-column prop="grade" label="伤残等级" width="160" >
</el-table-column>
<el-table-column prop="help" label="帮扶党员" width="150" >
</el-table-column>
<el-table-column prop="state" label="状态" width="140" >
</el-table-column>
<el-table-column label="操作" width="110">
<template slot-scope="scope">
<el-button @click="handleClick(scope.row)" size="small" icon="el-icon-search" circle > </el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<div class="block" >
<div style=" height :40px; margin-top:12px; margin-left:6px;">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[5,10,20,30]"
:page-size="pageSize"
layout="total, prev, pager, next, jumper"
:total="tableData.length" >
</el-pagination>
</div>
</div>
</div>
<div class="project-status1" v-if="play" >
<div class="project-box1"><span>项目状态</span></div>
<div style="margin: 30px 0px;">
<el-steps :active="2" align-center>
<el-step title="公示" description="步骤1"></el-step>
<el-step title="登记" description="步骤2"></el-step>
<el-step title="拨款" description="步骤3"></el-step>
<el-step title="完成" description="步骤4"></el-step>
</el-steps>
</div>
</div>
</div>
</div> </div>
</div>
</div>
<div class="query-form">
<div class="query-formHoad">
<h4><span>用户列表</span></h4>
<div style="position:absolute;top:10px;right:25px;z-index: 1;">
<el-button type="primary" @click="exportFile()">导出表格</el-button></div>
</div>
<!-- 表格 -->
<el-table
:data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
style="width: 100%; font-size:14px; "
:cell-style="cellStyle"
:header-cell-style="rowClass"
>
<el-table-column prop="id" label="序号" width="130" />
<el-table-column prop="name" label="姓名" width="140" />
<el-table-column prop="age" label="年龄" width="130" />
<el-table-column prop="gender" label="性别" width="130" />
<el-table-column prop="telephone" label="手机号" width="160" />
<el-table-column prop="grade" label="伤残等级" width="160" />
<el-table-column prop="help" label="帮扶党员" width="150" />
<el-table-column prop="state" label="状态" width="140" />
<el-table-column label="操作" width="116">
<template slot-scope="scope">
<el-button size="small" icon="el-icon-search" circle @click="handleClick(scope.row)" />
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<div class="block">
<div style=" height :40px; margin-top:12px; margin-left:6px;">
<el-pagination
:current-page="currentPage"
:page-sizes="[5,10,20,30]"
:page-size="pageSize"
layout="total, prev, pager, next, jumper"
:total="tableData.length"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
</div>
</div>
<div v-if="play" class="project-status1">
<div class="project-box1"><span>项目状态</span></div>
<div style="margin: 30px 0px;">
<el-steps :active="2" align-center>
<el-step title="公示" description="步骤1" />
<el-step title="登记" description="步骤2" />
<el-step title="拨款" description="步骤3" />
<el-step title="完成" description="步骤4" />
</el-steps>
</div>
</div>
</div>
</div>
</div>
</template> </template>
<script> <script>
export default { export default {
name:'query', name: 'Query',
data() { data() {
return { return {
tableData: [{ tableData: [{
id: '1', id: '1',
name: '王小虎', name: '王小虎',
age:'30', age: '30',
gender:'男', gender: '男',
telephone:'19857846724', telephone: '19857846724',
grade:'2级', grade: '2级',
help:'老李', help: '老李',
state:'已登记', state: '已登记'
}, { }, {
id: '2', id: '2',
name: '王小虎', name: '王小虎',
age:'30', age: '30',
gender:'男', gender: '男',
telephone:'19857846724', telephone: '19857846724',
grade:'2级', grade: '2级',
help:'老李', help: '老李',
state:'已登记', state: '已登记'
}, { }, {
id: '3', id: '3',
name: '王小虎', name: '王小虎',
age:'30', age: '30',
gender:'男', gender: '男',
telephone:'19857846724', telephone: '19857846724',
grade:'2级', grade: '2级',
help:'老李', help: '老李',
state:'已登记', state: '已登记'
}, { }, {
id: '4', id: '4',
name: '王小虎', name: '王小虎',
age:'30', age: '30',
gender:'男', gender: '男',
telephone:'19857846724', telephone: '19857846724',
grade:'2级', grade: '2级',
help:'老李', help: '老李',
state:'已登记', state: '已登记'
},
{
id: '5',
name: '王小虎',
age:'30',
gender:'男',
telephone:'19857846724',
grade:'2级',
help:'老李',
state:'已登记',
},
{
id: '6',
name: '王小虎',
age:'30',
gender:'男',
telephone:'19857846724',
grade:'2级',
help:'老李',
state:'已登记',
},
{
id: '7',
name: '王小虎',
age:'30',
gender:'男',
telephone:'19857846724',
grade:'2级',
help:'老李',
state:'已登记',
},{
id: '8',
name: '王小虎',
age:'30',
gender:'男',
telephone:'19857846724',
grade:'2级',
help:'老李',
state:'已登记',
}],
currentPage: 1, // 当前页码
total: 20, // 总条数
pageSize: 5, // 每页的数据条数
options2: [{
value: '选项1',
label: '广西壮族自治区'
}, {
value: '选项2',
label: '广西壮族自治区南宁市'
}, {
value: '选项3',
label: '南宁市南宁市辖区'
}, {
value: '选项4',
label: '南宁市兴宁区'
}, {
value: '选项5',
label: '南宁市青秀区'
}],
options1: [{
value: '选项1',
label: '2020'
}, {
value: '选项2',
label: '2019'
}, {
value: '选项3',
label: '2018'
}, {
value: '选项4',
label: '2017'
}, {
value: '选项5',
label: '2016'
}],
value: '',
play:false,
input1: '',
input2: '',
formDesc: {
valueType: {
type: 'radio',
label: '值的类型',
default: 'switch',
options: [
{ text: 'boolean', value: 'switch' },
{ text: 'number', value: 'number' },
{ text: 'string', value: 'input' }
]
},
value: {
type: data => data.valueType,
label: '值'
}
}
};},
methods: {
//每页条数改变时触发 选择一页显示多少行
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
this.currentPage = 1;
this.pageSize = val;
},
//当前页改变时触发 跳转其他页
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
this.currentPage = val;
}, },
cellStyle({row,column,rowIndex,columnIndex}) { {
return "text-align:center;" id: '5',
name: '王小虎',
age: '30',
gender: '男',
telephone: '19857846724',
grade: '2级',
help: '老李',
state: '已登记'
}, },
rowClass({row,rowIndex}){ {
return "text-align:center;" id: '6',
name: '王小虎',
age: '30',
gender: '男',
telephone: '19857846724',
grade: '2级',
help: '老李',
state: '已登记'
}, },
{
id: '7',
name: '王小虎',
age: '30',
gender: '男',
telephone: '19857846724',
grade: '2级',
help: '老李',
state: '已登记'
}, {
id: '8',
name: '王小虎',
age: '30',
gender: '男',
telephone: '19857846724',
grade: '2级',
help: '老李',
state: '已登记'
exportFile(){ }],
console.log('11'); currentPage: 1, // 当前页码
total: 20, // 总条数
}, pageSize: 5, // 每页的数据条数
options2: [{
value: '选项1',
label: '广西壮族自治区'
}, {
value: '选项2',
label: '广西壮族自治区南宁市'
}, {
value: '选项3',
label: '南宁市南宁市辖区'
}, {
value: '选项4',
label: '南宁市兴宁区'
}, {
value: '选项5',
label: '南宁市青秀区'
}],
options1: [{
value: '选项1',
label: '2020'
}, {
value: '选项2',
label: '2019'
}, {
value: '选项3',
label: '2018'
}, {
value: '选项4',
label: '2017'
}, {
value: '选项5',
label: '2016'
}],
value: '',
play: false,
input1: '',
input2: '',
handleClick(){ formDesc: {
this.play = !this.play ; valueType: {
type: 'radio',
label: '值的类型',
default: 'switch',
options: [
{ text: 'boolean', value: 'switch' },
{ text: 'number', value: 'number' },
{ text: 'string', value: 'input' }
]
},
value: {
type: data => data.valueType,
label: '值'
}
} }
}
},
methods: {
// 每页条数改变时触发 选择一页显示多少行
handleSizeChange(val) {
console.log(`每页 ${val} 条`)
this.currentPage = 1
this.pageSize = val
},
// 当前页改变时触发 跳转其他页
handleCurrentChange(val) {
console.log(`当前页: ${val}`)
this.currentPage = val
},
cellStyle({ row, column, rowIndex, columnIndex }) {
return 'text-align:center;'
},
rowClass({ row, rowIndex }) {
return 'text-align:center;'
},
exportFile() {
console.log('11')
},
handleClick() {
this.play = !this.play
}
},} }}
</script> </script>
<style lang="scss"> <style lang="scss">
*{
margin: 0;
padding: 0;
line-height: 1.5;
}
.query-box{ .query-box{
position: relative; position: relative;
margin: 0; margin: 0;
padding: 8px 20px 24px; padding: 8px 20px 24px;
} }
.query-box-1{ .query-box-1{
width :100%; width :100%;
padding: 8px 20px 50px 20px; padding: 8px 20px 50px 20px;
} }
.query-content{ .query-content{
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, .12), 0 0 6px rgba(0, 0, 0, .04);
} border-radius: 5px;
.query-title{
height: 100px;
padding: 25px;
margin: 0 12px;
border: 1px solid #ccc;
} }
.query-form{ .query-form{
border: 1px solid #ccc; box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
margin: 25px 12px; margin: 25px 12px;
border-radius: 5px;
} }
.query-formHoad{ .query-formHoad{
width: 100%; width: 100%;
height: 60px; height: 60px;
background-color:#E0E0E0; border-bottom: 1px solid rgba(0, 0, 0, .12);
position: relative; position: relative;
} }
.query-formHoad h4{ .query-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;
} }
.query-formHoad h4 span{ .query-formHoad h4 span{
color:#363636; color:#363636;
font-size: 14px; font-size: 14px;
z-index: 11; z-index: 11;
} }
.query-input-box{ .query-input-box{
width:100%; width:100%;
height :90px; height:100px;
margin: 20px; margin: 20px;
} }
.query-input-box ul li{ .query-input-box ul li{
float: left; float: left;
margin: 3px; margin-left: 3px;
line-height: 30px; line-height: 30px;
list-style:none; list-style:none;
} }
.query-input-box ul{
height: 30px;
margin: 5px 0;
}
.border-bottom{
border-bottom: 1px solid #ccc;
}
.query-input-box-1{
position: relative;
height: 45px;
width:977px;
margin: 10px 0;
}
.project-status1{ .project-status1{
margin: 20px 12px; margin: 20px 12px;
width: 1255px; width: 1255px;
height: 200px; height: 200px;
border: 1px solid #ccc; padding-top: 10px;
box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
border-radius: 5px;
// display: none; // display: none;
} }
.project-box1{ .project-box1{
margin: 20px; margin: 20px;
border-bottom: 1px solid #ccc; border-bottom: 1px solid #ccc;
height: 40px; height: 40px;
} }
</style> </style>
\ No newline at end of file
src/views/register/index.vue
<template> <template>
<div class="register-box"> <div class="register-box">
<div class="register-box-1"> <div class="register-box-1">
<div class="register-content"> <div class="register-content">
<div class="register-title">项目登记
<p style="margin: 5px 25px; font-size: 12px;">项目登记</p>
</div>
<div class="register-form">
<div class="register-formHoad" >
<h4><span>搜索条件</span></h4>
</div> <div class="register-form">
<div class="register-input-box"> <div class="register-formHoad">
<h4><span>搜索条件</span></h4>
<ul>
<li>地区:</li>
<li>
<el-select v-model="value" placeholder="请选择">
<el-option
v-for="item in options2"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</li>
</ul>
<div style="clear:both; width: 1210px; padding-top: 10px; margin:10px 0; opacity: 0.5; ">
<hr>
</div>
<ul> </div>
<li>名字:</li> <div class="register-input-box">
<li>
<el-input
placeholder="请输入名字"
v-model="input1"
clearable>
</el-input>
</li>
<li>每页显示</li>
<li>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[5,10,20,30]"
:page-size="pageSize"
layout="sizes"
:total="tableData.length" >
</el-pagination>
</li>
<li>
<el-button type="primary" size="mini" @click="queryRegion()" >查询</el-button>
</li>
</ul>
</div> <ul>
</div> <li>地区:</li>
<li>
<el-select v-model="value" placeholder="请选择">
<el-option
v-for="item in options2"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</li>
</ul>
<div class="register-form"> <br>
<div class="register-formHoad"> <br>
<h4><span>帮扶对象</span></h4>
<div style="position:absolute;top:10px;right:25px;z-index: 1;">
<el-button type="primary" @click="exportFile()">导出表格</el-button></div>
</div>
<!-- 表格 -->
<el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" style="width: 100%; font-size:14px; "
:cell-style="cellStyle" :header-cell-style="rowClass" >
<el-table-column prop="id" label="序号" width="110" >
</el-table-column>
<el-table-column prop="name" label="姓名" width="110" >
</el-table-column>
<el-table-column prop="age" label="年龄" width="110" >
</el-table-column>
<el-table-column prop="gender" label="性别" width="110" >
</el-table-column>
<el-table-column prop="telephone" label="手机号" width="180" >
</el-table-column>
<el-table-column prop="address" label="地址" width="350" >
</el-table-column>
<el-table-column prop="grade" label="伤残等级" width="150" >
</el-table-column>
<el-table-column label="操作" width="130">
<template slot-scope="scope">
<el-button @click="handleClick(scope.row)" size="small" icon="el-icon-edit" circle > </el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<div class="block" >
<div style=" height :40px; margin-top:12px; margin-left:6px;">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[5,10,20,30]"
:page-size="pageSize"
layout="total, prev, pager, next, jumper"
:total="tableData.length" >
</el-pagination>
</div>
</div>
</div>
<ul>
<li>名字:</li>
<li>
<el-input
v-model="input1"
placeholder="请输入名字"
clearable
/>
</li>
<li>每页显示</li>
<li>
<el-pagination
:current-page="currentPage"
:page-sizes="[5,10,20,30]"
:page-size="pageSize"
layout="sizes"
:total="tableData.length"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</li>
<li>
<el-button type="primary" size="mini" @click="queryRegion()">查询</el-button>
</li>
</ul>
</div>
</div> </div>
</div>
</div>
<div class="register-form">
<div class="register-formHoad">
<h4><span>帮扶对象</span></h4>
<div style="position:absolute;top:10px;right:25px;z-index: 1;">
<el-button type="primary" @click="exportFile()">导出表格</el-button></div>
</div>
<!-- 表格 -->
<el-table
:data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
style="width: 100%; font-size:14px; "
:cell-style="cellStyle"
:header-cell-style="rowClass"
>
<el-table-column prop="id" label="序号" width="110" />
<el-table-column prop="name" label="姓名" width="110" />
<el-table-column prop="age" label="年龄" width="110" />
<el-table-column prop="gender" label="性别" width="110" />
<el-table-column prop="telephone" label="手机号" width="180" />
<el-table-column prop="address" label="地址" width="350" />
<el-table-column prop="grade" label="伤残等级" width="150" />
<el-table-column label="操作" width="136">
<template slot-scope="scope">
<el-button size="small" icon="el-icon-edit" circle @click="handleClick(scope.row)" />
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<div class="block">
<div style=" height :40px; margin-top:12px; margin-left:6px;">
<el-pagination
:current-page="currentPage"
:page-sizes="[5,10,20,30]"
:page-size="pageSize"
layout="total, prev, pager, next, jumper"
:total="tableData.length"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
</div>
</div>
</div>
</div>
</div>
</template> </template>
<script> <script>
export default { export default {
name:'register', name: 'Register',
data() { data() {
return { return {
tableData: [{ tableData: [{
id: '1', id: '1',
name: '王小虎', name: '王小虎',
age:'30', age: '30',
gender:'男', gender: '男',
telephone:'19857846724', telephone: '19857846724',
address:'广西壮族自治区隆安县那桐镇下邓村联房屯57号', address: '广西壮族自治区隆安县那桐镇下邓村联房屯57号',
grade:'2级', grade: '2级'
},{ }, {
id: '2', id: '2',
name: '王小虎', name: '王小虎',
age:'30', age: '30',
gender:'男', gender: '男',
telephone:'19857846724', telephone: '19857846724',
address:'广西壮族自治区隆安县那桐镇下邓村联房屯57号', address: '广西壮族自治区隆安县那桐镇下邓村联房屯57号',
grade:'2级', grade: '2级'
},
{
id: '3',
name: '王小虎',
age:'30',
gender:'男',
telephone:'19857846724',
address:'广西壮族自治区隆安县那桐镇下邓村联房屯57号',
grade:'2级',
},
{
id: '4',
name: '王小虎',
age:'30',
gender:'男',
telephone:'19857846724',
address:'广西壮族自治区隆安县那桐镇下邓村联房屯57号',
grade:'2级',
},
{
id: '5',
name: '王小虎',
age:'30',
gender:'男',
telephone:'19857846724',
address:'广西壮族自治区隆安县那桐镇下邓村联房屯57号',
grade:'2级',
},{
id: '6',
name: '王小虎',
age:'30',
gender:'男',
telephone:'19857846724',
address:'广西壮族自治区隆安县那桐镇下邓村联房屯57号',
grade:'2级',
},],
currentPage: 1, // 当前页码
total: 20, // 总条数
pageSize: 5, // 每页的数据条数
options2: [{
value: '选项1',
label: '广西壮族自治区'
}, {
value: '选项2',
label: '广西壮族自治区南宁市'
}, {
value: '选项3',
label: '南宁市南宁市辖区'
}, {
value: '选项4',
label: '南宁市兴宁区'
}, {
value: '选项5',
label: '南宁市青秀区'
}],
options1: [{
value: '选项1',
label: '2020'
}, {
value: '选项2',
label: '2019'
}, {
value: '选项3',
label: '2018'
}, {
value: '选项4',
label: '2017'
}, {
value: '选项5',
label: '2016'
}],
value: '',
radio: '1',
input1: '',
input2: '',
value1: false,
};},
methods: {
//每页条数改变时触发 选择一页显示多少行
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
this.currentPage = 1;
this.pageSize = val;
},
//当前页改变时触发 跳转其他页
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
this.currentPage = val;
}, },
cellStyle({row,column,rowIndex,columnIndex}) { {
return "text-align:center;" id: '3',
name: '王小虎',
age: '30',
gender: '男',
telephone: '19857846724',
address: '广西壮族自治区隆安县那桐镇下邓村联房屯57号',
grade: '2级'
}, },
rowClass({row,rowIndex}){ {
return "text-align:center;" id: '4',
name: '王小虎',
age: '30',
gender: '男',
telephone: '19857846724',
address: '广西壮族自治区隆安县那桐镇下邓村联房屯57号',
grade: '2级'
}, },
{
id: '5',
name: '王小虎',
age: '30',
gender: '男',
telephone: '19857846724',
address: '广西壮族自治区隆安县那桐镇下邓村联房屯57号',
grade: '2级'
}, {
id: '6',
name: '王小虎',
age: '30',
gender: '男',
telephone: '19857846724',
address: '广西壮族自治区隆安县那桐镇下邓村联房屯57号',
grade: '2级'
}],
currentPage: 1, // 当前页码
total: 20, // 总条数
pageSize: 5, // 每页的数据条数
options2: [{
value: '选项1',
label: '广西壮族自治区'
}, {
value: '选项2',
label: '广西壮族自治区南宁市'
}, {
value: '选项3',
label: '南宁市南宁市辖区'
}, {
value: '选项4',
label: '南宁市兴宁区'
}, {
value: '选项5',
label: '南宁市青秀区'
}],
exportFile(){ options1: [{
console.log('11'); value: '选项1',
label: '2020'
}, }, {
value: '选项2',
label: '2019'
}, {
value: '选项3',
label: '2018'
}, {
value: '选项4',
label: '2017'
}, {
value: '选项5',
label: '2016'
}],
value: '',
radio: '1',
input1: '',
input2: '',
value1: false
}
},
methods: {
// 每页条数改变时触发 选择一页显示多少行
handleSizeChange(val) {
console.log(`每页 ${val} 条`)
this.currentPage = 1
this.pageSize = val
},
// 当前页改变时触发 跳转其他页
handleCurrentChange(val) {
console.log(`当前页: ${val}`)
this.currentPage = val
},
cellStyle({ row, column, rowIndex, columnIndex }) {
return 'text-align:center;'
},
rowClass({ row, rowIndex }) {
return 'text-align:center;'
},
exportFile() {
console.log('11')
}
},} }}
</script> </script>
<style lang="scss"> <style lang="scss">
*{
margin: 0;
padding: 0;
line-height: 1.5;
}
.register-box{ .register-box{
position: relative; position: relative;
margin: 0; margin: 0;
padding: 8px 20px 24px; padding: 8px 20px 24px;
} }
.register-box-1{ .register-box-1{
width :100%; width :100%;
padding: 8px 20px 50px 20px; padding: 8px 20px 50px 20px;
} }
.register-content{ .register-content{
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, .12), 0 0 6px rgba(0, 0, 0, .04);
} border-radius: 5px;
.register-title{
height: 100px;
padding: 25px;
margin: 0 12px;
border: 1px solid #ccc;
} }
.register-form{ .register-form{
border: 1px solid #ccc; box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
border-radius: 5px;
margin: 25px 12px; margin: 25px 12px;
} }
.register-formHoad{ .register-formHoad{
width: 100%; width: 100%;
height: 60px; height: 60px;
background-color:#E0E0E0; border-bottom: 1px solid rgba(0, 0, 0, .12);
position: relative; position: relative;
} }
.register-formHoad h4{ .register-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;
} }
.register-formHoad h4 span{ .register-formHoad h4 span{
color:#363636; color:#363636;
font-size: 14px; font-size: 14px;
z-index: 11; z-index: 11;
} }
.register-input-box{ .register-input-box{
width:100%; width:100%;
height :90px; height :110px;
margin: 20px; margin: 20px;
} }
...@@ -323,11 +293,11 @@ ...@@ -323,11 +293,11 @@
list-style:none; list-style:none;
} }
.border-bottom{ .border-bottom{
border-bottom: 1px solid #ccc; border-bottom: 1px solid #ccc;
} }
.register-input-box-1{ .register-input-box-1{
position: relative; position: relative;
height: 45px; height: 45px;
width:977px; width:977px;
margin: 10px 0; margin: 10px 0;
} }
...@@ -341,6 +311,6 @@ ...@@ -341,6 +311,6 @@
margin: 20px; margin: 20px;
border-bottom: 1px solid #ccc; border-bottom: 1px solid #ccc;
height: 40px; height: 40px;
} }
</style> </style>
\ No newline at end of file
src/views/registerList/index.vue
<template> <template>
<div class="registerList-box"> <div class="registerList-box">
<div class="registerList-box-1"> <div class="registerList-box-1">
<div class="registerList-content"> <div class="registerList-content">
<div class="registerList-title">登记列表
<p style="margin: 5px 25px; font-size: 12px;">登记信息</p>
</div>
<div class="registerList-form">
<div class="registerList-formHoad" >
<h4><span>搜索条件</span></h4>
</div> <div class="registerList-form">
<div class="registerList-input-box"> <div class="registerList-formHoad">
<h4><span>搜索条件</span></h4>
<ul>
<li>地区:</li>
<li>
<el-select v-model="value" placeholder="请选择">
<el-option
v-for="item in options2"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</li>
</ul>
<div style="clear:both; width: 1210px; padding-top: 10px; margin:10px 0; opacity: 0.5;">
<hr>
</div>
<ul> </div>
<li>亲属姓名:</li> <div class="registerList-input-box">
<li>
<el-input
placeholder="请输入名字"
v-model="input1"
clearable>
</el-input>
</li>
<li>每页显示</li>
<li>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[5,10,20,30]"
:page-size="pageSize"
layout="sizes"
:total="tableData.length" >
</el-pagination>
</li>
<li>
<el-button type="primary" size="mini" @click="queryRegion()" >查询</el-button>
</li>
</ul>
</div> <ul>
</div> <li>地区:</li>
<li>
<el-select v-model="value" placeholder="请选择">
<el-option
v-for="item in options2"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</li>
</ul>
<div class="registerList-form"> <br>
<div class="registerList-formHoad"> <br>
<h4><span>扶贫登记列表</span></h4>
<div style="position:absolute;top:10px;right:25px;z-index: 1;">
<el-button type="primary" @click="exportFile()">导出表格</el-button></div>
</div>
<!-- 表格 -->
<el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" style="width: 100%; font-size:14px; "
:cell-style="cellStyle" :header-cell-style="rowClass" >
<el-table-column prop="id" label="序号" width="180" >
</el-table-column>
<el-table-column prop="name" label="姓名" width="180" >
</el-table-column>
<el-table-column prop="age" label="年龄" width="180" >
</el-table-column>
<el-table-column prop="gender" label="性别" width="180" >
</el-table-column>
<el-table-column prop="grade" label="伤残等级" width="180" >
</el-table-column>
<el-table-column prop="help" label="帮扶党员" width="180" >
</el-table-column>
<el-table-column label="操作" width="160">
<template slot-scope="scope">
<el-button @click="handleClick(scope.row)" size="small" icon="el-icon-edit" circle > </el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<div class="block" >
<div style=" height :40px; margin-top:12px; margin-left:6px;">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[5,10,20,30]"
:page-size="pageSize"
layout="total, prev, pager, next, jumper"
:total="tableData.length" >
</el-pagination>
</div>
</div>
</div>
<ul>
<li>亲属姓名:</li>
<li>
<el-input
v-model="input1"
placeholder="请输入名字"
clearable
/>
</li>
<li>每页显示</li>
<li>
<el-pagination
:current-page="currentPage"
:page-sizes="[5,10,20,30]"
:page-size="pageSize"
layout="sizes"
:total="tableData.length"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</li>
<li>
<el-button type="primary" size="mini" @click="queryRegion()">查询</el-button>
</li>
</ul>
</div>
</div> </div>
</div>
</div>
<div class="registerList-form">
<div class="registerList-formHoad">
<h4><span>扶贫登记列表</span></h4>
<div style="position:absolute;top:10px;right:25px;z-index: 1;">
<el-button type="primary" @click="exportFile()">导出表格</el-button></div>
</div>
<!-- 表格 -->
<el-table
:data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
style="width: 100%; font-size:14px; "
:cell-style="cellStyle"
:header-cell-style="rowClass"
>
<el-table-column prop="id" label="序号" width="180" />
<el-table-column prop="name" label="姓名" width="180" />
<el-table-column prop="age" label="年龄" width="180" />
<el-table-column prop="gender" label="性别" width="180" />
<el-table-column prop="grade" label="伤残等级" width="180" />
<el-table-column prop="help" label="帮扶党员" width="180" />
<el-table-column label="操作" width="166">
<template slot-scope="scope">
<el-button size="small" icon="el-icon-edit" circle @click="handleClick(scope.row)" />
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<div class="block">
<div style=" height :40px; margin-top:12px; margin-left:6px;">
<el-pagination
:current-page="currentPage"
:page-sizes="[5,10,20,30]"
:page-size="pageSize"
layout="total, prev, pager, next, jumper"
:total="tableData.length"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
</div>
</div>
</div>
</div>
</div>
</template> </template>
<script> <script>
export default { export default {
name:'registerList', name: 'RegisterList',
data() { data() {
return { return {
tableData: [{ tableData: [{
id: '1', id: '1',
name: '王小虎', name: '王小虎',
age:'30', age: '30',
gender:'男', gender: '男',
grade:'2级', grade: '2级',
help:'老李', help: '老李'
},{ }, {
id: '2', id: '2',
name: '王小虎', name: '王小虎',
age:'30', age: '30',
gender:'男', gender: '男',
grade:'2级', grade: '2级',
help:'老李', help: '老李'
},{ }, {
id: '3', id: '3',
name: '王小虎', name: '王小虎',
age:'30', age: '30',
gender:'男', gender: '男',
grade:'2级', grade: '2级',
help:'老李', help: '老李'
},{ }, {
id: '4', id: '4',
name: '王小虎', name: '王小虎',
age:'30', age: '30',
gender:'男', gender: '男',
grade:'2级', grade: '2级',
help:'老李', help: '老李'
},{ }, {
id: '5', id: '5',
name: '王小虎', name: '王小虎',
age:'30', age: '30',
gender:'男', gender: '男',
grade:'2级', grade: '2级',
help:'老李', help: '老李'
},{ }, {
id: '6', id: '6',
name: '王小虎', name: '王小虎',
age:'30', age: '30',
gender:'男', gender: '男',
grade:'2级', grade: '2级',
help:'老李', help: '老李'
},], }],
currentPage: 1, // 当前页码 currentPage: 1, // 当前页码
total: 20, // 总条数 total: 20, // 总条数
pageSize: 5, // 每页的数据条数 pageSize: 5, // 每页的数据条数
options2: [{
value: '选项1',
label: '广西壮族自治区'
}, {
value: '选项2',
label: '广西壮族自治区南宁市'
}, {
value: '选项3',
label: '南宁市南宁市辖区'
}, {
value: '选项4',
label: '南宁市兴宁区'
}, {
value: '选项5',
label: '南宁市青秀区'
}],
options1: [{
value: '选项1',
label: '2020'
}, {
value: '选项2',
label: '2019'
}, {
value: '选项3',
label: '2018'
}, {
value: '选项4',
label: '2017'
}, {
value: '选项5',
label: '2016'
}],
value: '',
radio: '1',
input1: '',
input2: '',
options2: [{ value1: false
value: '选项1',
label: '广西壮族自治区'
}, {
value: '选项2',
label: '广西壮族自治区南宁市'
}, {
value: '选项3',
label: '南宁市南宁市辖区'
}, {
value: '选项4',
label: '南宁市兴宁区'
}, {
value: '选项5',
label: '南宁市青秀区'
}],
}
},
options1: [{ methods: {
value: '选项1', // 每页条数改变时触发 选择一页显示多少行
label: '2020' handleSizeChange(val) {
}, { console.log(`每页 ${val} 条`)
value: '选项2', this.currentPage = 1
label: '2019' this.pageSize = val
}, { },
value: '选项3', // 当前页改变时触发 跳转其他页
label: '2018' handleCurrentChange(val) {
}, { console.log(`当前页: ${val}`)
value: '选项4', this.currentPage = val
label: '2017' },
}, { cellStyle({ row, column, rowIndex, columnIndex }) {
value: '选项5', return 'text-align:center;'
label: '2016' },
}], rowClass({ row, rowIndex }) {
value: '', return 'text-align:center;'
radio: '1', },
input1: '',
input2: '',
value1: false,
};},
methods: {
//每页条数改变时触发 选择一页显示多少行
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
this.currentPage = 1;
this.pageSize = val;
},
//当前页改变时触发 跳转其他页
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
this.currentPage = val;
},
cellStyle({row,column,rowIndex,columnIndex}) {
return "text-align:center;"
},
rowClass({row,rowIndex}){
return "text-align:center;"
},
exportFile(){
console.log('11');
},
exportFile() {
console.log('11')
}
},} }}
</script> </script>
<style lang="scss"> <style lang="scss">
*{
margin: 0;
padding: 0;
line-height: 1.5;
}
.registerList-box{ .registerList-box{
position: relative; position: relative;
margin: 0; margin: 0;
padding: 8px 20px 24px; padding: 8px 20px 24px;
} }
.registerList-box-1{ .registerList-box-1{
width :100%; width :100%;
padding: 8px 20px 50px 20px; padding: 8px 20px 50px 20px;
} }
.registerList-content{ .registerList-content{
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, .12), 0 0 6px rgba(0, 0, 0, .04);
} border-radius: 5px;
.registerList-title{
height: 100px;
padding: 25px;
margin: 0 12px;
border: 1px solid #ccc;
} }
.registerList-form{ .registerList-form{
border: 1px solid #ccc; box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
border-radius: 5px;
margin: 25px 12px; margin: 25px 12px;
} }
.registerList-formHoad{ .registerList-formHoad{
width: 100%; width: 100%;
height: 60px; height: 60px;
background-color:#E0E0E0; border-bottom: 1px solid rgba(0, 0, 0, .12);
position: relative; position: relative;
} }
.registerList-formHoad h4{ .registerList-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;
} }
.registerList-formHoad h4 span{ .registerList-formHoad h4 span{
color:#363636; color:#363636;
font-size: 14px; font-size: 14px;
z-index: 11; z-index: 11;
} }
.registerList-input-box{ .registerList-input-box{
width:100%; width:100%;
height :90px; height :110px;
margin: 20px; margin: 20px;
} }
...@@ -310,11 +284,11 @@ ...@@ -310,11 +284,11 @@
list-style:none; list-style:none;
} }
.border-bottom{ .border-bottom{
border-bottom: 1px solid #ccc; border-bottom: 1px solid #ccc;
} }
.registerList-input-box-1{ .registerList-input-box-1{
position: relative; position: relative;
height: 45px; height: 45px;
width:977px; width:977px;
margin: 10px 0; margin: 10px 0;
} }
...@@ -328,6 +302,6 @@ ...@@ -328,6 +302,6 @@
margin: 20px; margin: 20px;
border-bottom: 1px solid #ccc; border-bottom: 1px solid #ccc;
height: 40px; height: 40px;
} }
</style> </style>
\ No newline at end of file
src/views/selfEvaluation/index.vue
<template> <template>
<div class="selfEvaluation-box"> <div class="selfEvaluation-box">
<div class="selfEvaluation-box-1"> <div class="selfEvaluation-box-1">
<div class="selfEvaluation-content"> <div class="selfEvaluation-content">
<div class="selfEvaluation-title">绩效自评 <div class="selfEvaluation-form">
<p style="margin: 5px 25px; font-size: 12px;">绩效自评</p> <div class="selfEvaluation-formHoad">
</div> <h4>
<span>搜索条件</span>
</h4>
<div class="selfEvaluation-form"> </div>
<div class="selfEvaluation-formHoad" > <div class="selfEvaluation-input-box">
<h4><span>搜索条件</span></h4> <ul>
</div> <li>地区:</li>
<div class="selfEvaluation-input-box"> <li>
<el-select v-model="value" placeholder="请选择">
<ul> <el-option
<li>地区:</li> v-for="item in options2"
<li> :key="item.value"
<el-select v-model="value" placeholder="请选择"> :label="item.label"
<el-option :value="item.value"
v-for="item in options2" />
:key="item.value" </el-select>
:label="item.label" </li>
:value="item.value"> <li>年份:</li>
</el-option> <li>
</el-select> <el-select v-model="value" placeholder="请选择">
</li> <el-option
<li>年份:</li> v-for="item in options1"
<li> :key="item.value"
<el-select v-model="value" placeholder="请选择"> :label="item.label"
<el-option :value="item.value"
v-for="item in options1" />
:key="item.value" </el-select>
:label="item.label" </li>
:value="item.value"> <li>
</el-option> <el-button type="primary" size="mini" @click="queryRegion()">查询</el-button>
</el-select> </li>
</li> </ul>
<li> </div>
<el-button type="primary" size="mini" @click="queryRegion()" >查询</el-button>
</li>
</ul>
</div>
</div>
<div class="selfEvaluation-form-table">
<form id="table-form">
<tr>
<ul style=" width :100%; ">
<li style="float: left; margin-left: 20px;">
<span>项目编号:</span>
</li>
<li style="float: left;margin-left: 20px; ">
<input style="height:80%;width:80%;border:none;overflow: hidden;border-bottom:1px dotted black;"
id="id0101" />
</li>
</ul>
</tr>
<table width="100%" border="1" cellpadding="0" cellspacing="0" align="center" id="table" >
<tr>
<td align="center" width="100">
项目名称
</td>
<td align="center" colspan="2" width="250">
残疾人事业发展专项资金-支持就业与扶贫工作-党员扶残温暖同行项目补助经费
</td>
<td align="center" width="150" >
项目编码
</td>
<td align="center">
<div style="width:80%;height:80%;margin:10px auto;">
<input style="height:80%;width:80%;border:none;overflow: hidden;border-bottom:1px dotted black;"
id="id0201" />
</div>
</td>
</tr>
<tr>
<td align="center" >
项目实施单位
</td>
<td align="center" colspan="2">
<div style="width:80%;height:80%;margin:10px auto;">
<input style="height:80%;width:80%;border:none;overflow: hidden;border-bottom:1px dotted black;"
id="id0301" />
</div>
</td>
<td align="center" >
</td>
<td align="center">
</td>
</tr>
<tr>
<td align="center" rowspan="2">
项目性质
</td>
<td align="center" colspan="4">
<div style="width:80%;height:80%;margin:10px auto;">
<input style="height:80%;width:80%;border:none;overflow: hidden;border-bottom:1px dotted black;"
id="id0401" />
</div>
</td>
</tr>
<tr>
<td align="center" colspan="4">
<div style="width:80%;height:80%;margin:10px auto;">
<input style="height:80%;width:80%;border:none;overflow: hidden;border-bottom:1px dotted black;"
id="id0402" />
</div>
</td>
</tr>
<tr>
<td align="center" rowspan="6" >
资金总额
</td>
<td align="center" colspan="2">
资金来源
</td>
<td align="center" colspan="2">
金额（万元）
</td>
</tr>
<tr>
<td align="center" colspan="2">
合计
</td>
<td align="center" >
</td>
<td align="center" >
<div style="width:80%;height:80%;margin:10px auto;">
<input style="height:80%;width:80%;border:none;overflow: hidden;border-bottom:1px dotted black;"
id="id0501" />
</div>
</td>
</tr>
<tr>
<td align="center" colspan="2" rowspan="2">
其中：一般公共预算拨款
</td>
<td align="center">
其中：中央
</td>
<td align="center" >
<div style="width:80%;height:80%;margin:10px auto;">
<input style="height:80%;width:80%;border:none;overflow: hidden;border-bottom:1px dotted black;"
id="id0601" />
</div>
</td>
</tr>
<tr>
<td align="center" >
自治区
</td>
<td align="center" >
<div style="width:80%;height:80%;margin:10px auto;">
<input style="height:80%;width:80%;border:none;overflow: hidden;border-bottom:1px dotted black;"
id="id0701" />
</div>
</td>
</tr>
<tr>
<td align="center" colspan="2">
政府性基金
</td>
<td align="center" >
</td>
<td align="center" >
<div style="width:80%;height:80%;margin:10px auto;">
<input style="height:80%;width:80%;border:none;overflow: hidden;border-bottom:1px dotted black;"
id="id0801" />
</div>
</td>
</tr>
<tr>
<td align="center" colspan="2">
其他资金
</td>
<td align="center" >
</td>
<td align="center" >
<div style="width:80%;height:80%;margin:10px auto;">
<input style="height:80%;width:80%;border:none;overflow: hidden;border-bottom:1px dotted black;"
id="id0901" />
</div>
</td>
</tr>
<tr>
<td align="center">项目概况（包括项目立项依据、可行性和必要性、支持范围、实施内容等）</td>
<td colspan="4" align="center">
立项依据：国务院《残疾人就业条例》规定：“地方各级政府应当多方面筹集资金，组织和扶持农村残疾人从事种植业、养殖业、手工业和其他形式的生产劳动”；中国残联等26部门和单位关于印发《贫困残疾人脱贫攻坚行动计划（2016-2020年）》的通知要求：开展“基层党组织助残扶贫行动。组织动员基层党组织和党员干部结对帮扶建档立卡残疾人贫困户，确保每一个建档立卡残疾人贫困户都有帮扶人、帮扶措施、帮扶资金”；自治区人民政府办公厅《关于印发广西壮族自治区农村残疾人扶贫开发规划（2011-2020年）的通知》（桂政办发〔2015〕151号）要求“到2020年，农村贫困残疾人生活救助和扶贫开发人数达到108万人”；自治区党委组织部、财政厅、残联《关于印发“农村基层党组织助残扶贫工程—广西“党员扶残温暖同行项目（三期）”实施方案的通知》（桂残联字〔2016〕33号）。
可行性及必要性：实施脱贫产业扶持，可促进贫困残疾人收入提高，生活水平不断改善。
主要内容：2010年以来，在各级党委、政府的高度重视下，经过各级组织、财政、残联等部门单位和基层党组织以及广大党员的共同努力，全区组织1.5万多农村党组织，结对扶持约10多万户农村贫困残疾人家庭发展生产，取得了明显的经济和社会效益。受扶持的残疾人家庭普遍实现增产增收，较大的改善了残疾人民生；进一步加强基层党组织建设，促进农村残疾人事业发展，加快全面建设小康进程。该工程于2010年至2012年连续三年成为我区年度区直、中直驻桂单位亮点工作之一，已逐步打造成为“利党建、惠民生、构和谐、促发展”的系统工程，得到中央组织部、中国残联的高度认可。“十三五”期间，自治区党委组织部、财政厅、残联继续深化实施农村基层党组织助残扶贫工程——广西党员扶残温暖同行项目（三期）。我区目前尚有21万多建档立卡贫困残疾人未脱贫，农村贫困残疾人脱贫任务十分艰巨。持续实施该项目，符合我区农村贫困残疾人扶贫开发工作实际，是扶持农村贫困残疾人脱贫致富的重要举措。2020年，扶持17100户有劳动能力和就业愿望较强，并具有可行性项目的建档立卡残疾人家庭，帮助扶持对象掌握1-2门致富实用技术，有相对固定的发展项目，稳定解决贫困问题，补助资金1265万元。
</td>
</tr>
<tr>
<td align="center" >
项目起始时间
</td>
<td align="center" >
<div style="width:80%;height:80%;margin:10px auto;">
<input style="height:80%;width:80%;border:none;overflow: hidden;border-bottom:1px dotted black;"
id="id1001" />
</div>
</td>
<td align="center" >
项目终止时间
</td>
<td align="center" colspan="2">
<div style="width:80%;height:80%;margin:10px auto;">
<input style="height:80%;width:80%;border:none;overflow: hidden;border-bottom:1px dotted black;"
id="id1002" />
</div>
</td>
</tr>
<tr>
<td align="center" >
项目实施进度安排
</td>
<td align="center" colspan="4">
<div style="width:80%;height:80%;margin:10px auto;">
<input style="height:80%;width:80%;border:none;overflow: hidden;border-bottom:1px dotted black;"
id="id1101" />
</div>
</td>
</tr>
<tr>
<td align="center" >
年度绩效目标
</td>
<td align="center" colspan="4">
<div style="width:80%;height:80%;margin:10px auto;">
<input style="height:80%;width:80%;border:none;overflow: hidden;border-bottom:1px dotted black;"
id="id1201" />
</div>
</td>
</tr>
<tr>
<td align="center" >
中期绩效目标
</td>
<td align="center" colspan="4">
<div style="width:80%;height:80%;margin:10px auto;">
<input style="height:80%;width:80%;border:none;overflow: hidden;border-bottom:1px dotted black;"
id="id1301" />
</div>
</td>
</tr>
<tr>
<td align="center" rowspan="11">
项目年度绩效目标衡量指标
</td>
<td align="center">
一级指标
</td>
<td align="center">
二级指标
</td>
<td align="center">
指标内容
</td>
<td align="center">
指标值
</td>
<tr>
<tr>
<td align="center" rowspan="4">
产出指标
</td>
<td align="center">
产出数量
</td>
<td align="center">
接受扶持贫困残疾人人数
</td>
<td align="center">
<div style="width:80%;height:80%;margin:10px auto;">
<input style="height:80%;width:80%;border:none;overflow: hidden;border-bottom:1px dotted black;"
id="id1401" />
</div>
</td>
</tr>
<tr>
<td align="center">
产出质量
</td>
<td align="center">
受助残疾人家庭增产、增收，生活得到改善的程度
</td>
<td align="center">
<div style="width:80%;height:80%;margin:10px auto;">
<input style="height:80%;width:80%;border:none;overflow: hidden;border-bottom:1px dotted black;"
id="id1501" />
</div>
</td>
</tr>
<tr>
<td align="center">
产出时效
</td>
<td align="center">
项目完成时间
</td>
<td align="center">
<div style="width:80%;height:80%;margin:10px auto;">
<input style="height:80%;width:80%;border:none;overflow: hidden;border-bottom:1px dotted black;"
id="id1601" />
</div>
</td>
</tr>
<tr>
<td align="center">
产出成本
</td>
<td align="center">
资金按时足额到位率，年补助标准
</td>
<td align="center">
<div style="width:80%;height:80%;margin:10px auto;">
<input style="height:80%;width:80%;border:none;overflow: hidden;border-bottom:1px dotted black;"
id="id1701" />
</div>
</td>
</tr>
<tr>
<td align="center" rowspan="4">
效果指标
</td>
<td align="center">
经济效益
</td>
<td align="center">
受助残疾人通过扶持获得收益占比
</td>
<td align="center">
<div style="width:80%;height:80%;margin:10px auto;">
<input style="height:80%;width:80%;border:none;overflow: hidden;border-bottom:1px dotted black;"
id="id1801" />
</div>
</td>
</tr>
<tr>
<td align="center">
社会效益
</td>
<td align="center">
受扶持残疾人家庭普遍实现增产增收，减轻贫困残疾人经济负担，提升生活质量，改善生活状况效果
</td>
<td align="center">
<div style="width:80%;height:80%;margin:10px auto;">
<input style="height:80%;width:80%;border:none;overflow: hidden;border-bottom:1px dotted black;"
id="id1901" />
</div>
</td>
</tr>
<tr>
<td align="center">
生态效益
</td>
<td align="center">
</td>
<td align="center">
<div style="width:80%;height:80%;margin:10px auto;">
<input style="height:80%;width:80%;border:none;overflow: hidden;border-bottom:1px dotted black;"
id="id2001" />
</div>
</td>
</tr>
<tr>
<td align="center">
可持续影响
</td>
<td align="center">
通过项目开展促进受助残疾人家庭增产、增收，改善残疾人生活状况，对提高残疾人社会地位、增强社会关注残疾人事业的促进和示范作用
</td>
<td align="center">
<div style="width:80%;height:80%;margin:10px auto;">
<input style="height:80%;width:80%;border:none;overflow: hidden;border-bottom:1px dotted black;"
id="id2101" />
</div>
</td>
</tr>
<tr>
<td align="center" >
满意度指标
</td>
<td align="center">
- -
</td>
<td align="center">
<div style="width:80%;height:80%;margin:10px auto;">
<input style="height:80%;width:80%;border:none;overflow: hidden;border-bottom:1px dotted black;"
id="id2201" />
</div>
</td>
<td align="center">
<div style="width:80%;height:80%;margin:10px auto;">
<input style="height:80%;width:80%;border:none;overflow: hidden;border-bottom:1px dotted black;"
id="id2202" />
</div>
</td>
</tr>
<tr>
<td align="center" >
自评报告
</td>
<form id="evalution-div1">
<td colspan="2">
<el-upload
class="upload-demo"
drag
action="https://jsonplaceholder.typicode.com/posts/"
multiple>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
</el-upload>
</td>
</form>
<td align="center">
年度工作总结
</td>
<form id="conclusion-div1">
<td >
<el-upload
class="upload-demo"
drag
action="https://jsonplaceholder.typicode.com/posts/"
multiple>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
</el-upload>
</td>
</form>
</tr>
</table>
</form>
</div>
</div> </div>
</div>
</div>
<div class="selfEvaluation-form-table">
<div style="margin-bottom: 25px;height: 10px; ">
<ul>
<li style="float: left; margin-left: 20px;">
<span>项目编号:</span>
</li>
<li style="float: left;margin-left: 20px;width:600px;">
<input
id="id0101"
style="height:80%;width:80%;border:none;overflow: hidden;border-bottom:1px dotted black;"
>
</li>
</ul>
</div>
<form id="table-form">
<!-- <tr style="height:30px;margin-: 20px 0;">
</tr>-->
<table
id="table"
width="100%"
border="1"
cellpadding="0"
cellspacing="0"
align="center"
>
<tr>
<td align="center" width="100">项目名称</td>
<td align="center" colspan="2" width="250">残疾人事业发展专项资金-支持就业与扶贫工作-党员扶残温暖同行项目补助经费</td>
<td align="center" width="150">项目编码</td>
<td align="center">
<div style="width:80%;height:80%;margin:10px auto;">
<input
id="id0201"
style="height:80%;width:80%;border:none;overflow: hidden;border-bottom:1px dotted black;"
>
</div>
</td>
</tr>
<tr>
<td align="center">项目实施单位</td>
<td align="center" colspan="2">
<div style="width:80%;height:80%;margin:10px auto;">
<input
id="id0301"
style="height:80%;width:80%;border:none;overflow: hidden;border-bottom:1px dotted black;"
>
</div>
</td>
<td align="center" />
<td align="center" />
</tr>
<tr>
<td align="center" rowspan="2">项目性质</td>
<td align="center" colspan="4">
<div style="width:80%;height:80%;margin:10px auto;">
<input
id="id0401"
style="height:80%;width:80%;border:none;overflow: hidden;border-bottom:1px dotted black;"
>
</div>
</td>
</tr>
<tr>
<td align="center" colspan="4">
<div style="width:80%;height:80%;margin:10px auto;">
<input
id="id0402"
style="height:80%;width:80%;border:none;overflow: hidden;border-bottom:1px dotted black;"
>
</div>
</td>
</tr>
<tr>
<td align="center" rowspan="6">资金总额</td>
<td align="center" colspan="2">资金来源</td>
<td align="center" colspan="2">金额（万元）</td>
</tr>
<tr>
<td align="center" colspan="2">合计</td>
<td align="center" />
<td align="center">
<div style="width:80%;height:80%;margin:10px auto;">
<input
id="id0501"
style="height:80%;width:80%;border:none;overflow: hidden;border-bottom:1px dotted black;"
>
</div>
</td>
</tr>
<tr>
<td align="center" colspan="2" rowspan="2">其中：一般公共预算拨款</td>
<td align="center">其中：中央</td>
<td align="center">
<div style="width:80%;height:80%;margin:10px auto;">
<input
id="id0601"
style="height:80%;width:80%;border:none;overflow: hidden;border-bottom:1px dotted black;"
>
</div>
</td>
</tr>
<tr>
<td align="center">自治区</td>
<td align="center">
<div style="width:80%;height:80%;margin:10px auto;">
<input
id="id0701"
style="height:80%;width:80%;border:none;overflow: hidden;border-bottom:1px dotted black;"
>
</div>
</td>
</tr>
<tr>
<td align="center" colspan="2">政府性基金</td>
<td align="center" />
<td align="center">
<div style="width:80%;height:80%;margin:10px auto;">
<input
id="id0801"
style="height:80%;width:80%;border:none;overflow: hidden;border-bottom:1px dotted black;"
>
</div>
</td>
</tr>
<tr>
<td align="center" colspan="2">其他资金</td>
<td align="center" />
<td align="center">
<div style="width:80%;height:80%;margin:10px auto;">
<input
id="id0901"
style="height:80%;width:80%;border:none;overflow: hidden;border-bottom:1px dotted black;"
>
</div>
</td>
</tr>
<tr>
<td align="center">项目概况（包括项目立项依据、可行性和必要性、支持范围、实施内容等）</td>
<td colspan="4" align="center">
立项依据：国务院《残疾人就业条例》规定：“地方各级政府应当多方面筹集资金，组织和扶持农村残疾人从事种植业、养殖业、手工业和其他形式的生产劳动”；中国残联等26部门和单位关于印发《贫困残疾人脱贫攻坚行动计划（2016-2020年）》的通知要求：开展“基层党组织助残扶贫行动。组织动员基层党组织和党员干部结对帮扶建档立卡残疾人贫困户，确保每一个建档立卡残疾人贫困户都有帮扶人、帮扶措施、帮扶资金”；自治区人民政府办公厅《关于印发广西壮族自治区农村残疾人扶贫开发规划（2011-2020年）的通知》（桂政办发〔2015〕151号）要求“到2020年，农村贫困残疾人生活救助和扶贫开发人数达到108万人”；自治区党委组织部、财政厅、残联《关于印发“农村基层党组织助残扶贫工程—广西“党员扶残温暖同行项目（三期）”实施方案的通知》（桂残联字〔2016〕33号）。
可行性及必要性：实施脱贫产业扶持，可促进贫困残疾人收入提高，生活水平不断改善。
主要内容：2010年以来，在各级党委、政府的高度重视下，经过各级组织、财政、残联等部门单位和基层党组织以及广大党员的共同努力，全区组织1.5万多农村党组织，结对扶持约10多万户农村贫困残疾人家庭发展生产，取得了明显的经济和社会效益。受扶持的残疾人家庭普遍实现增产增收，较大的改善了残疾人民生；进一步加强基层党组织建设，促进农村残疾人事业发展，加快全面建设小康进程。该工程于2010年至2012年连续三年成为我区年度区直、中直驻桂单位亮点工作之一，已逐步打造成为“利党建、惠民生、构和谐、促发展”的系统工程，得到中央组织部、中国残联的高度认可。“十三五”期间，自治区党委组织部、财政厅、残联继续深化实施农村基层党组织助残扶贫工程——广西党员扶残温暖同行项目（三期）。我区目前尚有21万多建档立卡贫困残疾人未脱贫，农村贫困残疾人脱贫任务十分艰巨。持续实施该项目，符合我区农村贫困残疾人扶贫开发工作实际，是扶持农村贫困残疾人脱贫致富的重要举措。2020年，扶持17100户有劳动能力和就业愿望较强，并具有可行性项目的建档立卡残疾人家庭，帮助扶持对象掌握1-2门致富实用技术，有相对固定的发展项目，稳定解决贫困问题，补助资金1265万元。
</td>
</tr>
<tr>
<td align="center">项目起始时间</td>
<td align="center">
<div style="width:80%;height:80%;margin:10px auto;">
<input
id="id1001"
style="height:80%;width:80%;border:none;overflow: hidden;border-bottom:1px dotted black;"
>
</div>
</td>
<td align="center">项目终止时间</td>
<td align="center" colspan="2">
<div style="width:80%;height:80%;margin:10px auto;">
<input
id="id1002"
style="height:80%;width:80%;border:none;overflow: hidden;border-bottom:1px dotted black;"
>
</div>
</td>
</tr>
<tr>
<td align="center">项目实施进度安排</td>
<td align="center" colspan="4">
<div style="width:80%;height:80%;margin:10px auto;">
<input
id="id1101"
style="height:80%;width:80%;border:none;overflow: hidden;border-bottom:1px dotted black;"
>
</div>
</td>
</tr>
<tr>
<td align="center">年度绩效目标</td>
<td align="center" colspan="4">
<div style="width:80%;height:80%;margin:10px auto;">
<input
id="id1201"
style="height:80%;width:80%;border:none;overflow: hidden;border-bottom:1px dotted black;"
>
</div>
</td>
</tr>
<tr>
<td align="center">中期绩效目标</td>
<td align="center" colspan="4">
<div style="width:80%;height:80%;margin:10px auto;">
<input
id="id1301"
style="height:80%;width:80%;border:none;overflow: hidden;border-bottom:1px dotted black;"
>
</div>
</td>
</tr>
<tr>
<td align="center" rowspan="11">项目年度绩效目标衡量指标</td>
<td align="center">一级指标</td>
<td align="center">二级指标</td>
<td align="center">指标内容</td>
<td align="center">指标值</td>
</tr>
<tr />
<tr>
<td align="center" rowspan="4">产出指标</td>
<td align="center">产出数量</td>
<td align="center">接受扶持贫困残疾人人数</td>
<td align="center">
<div style="width:80%;height:80%;margin:10px auto;">
<input
id="id1401"
style="height:80%;width:80%;border:none;overflow: hidden;border-bottom:1px dotted black;"
>
</div>
</td>
</tr>
<tr>
<td align="center">产出质量</td>
<td align="center">受助残疾人家庭增产、增收，生活得到改善的程度</td>
<td align="center">
<div style="width:80%;height:80%;margin:10px auto;">
<input
id="id1501"
style="height:80%;width:80%;border:none;overflow: hidden;border-bottom:1px dotted black;"
>
</div>
</td>
</tr>
<tr>
<td align="center">产出时效</td>
<td align="center">项目完成时间</td>
<td align="center">
<div style="width:80%;height:80%;margin:10px auto;">
<input
id="id1601"
style="height:80%;width:80%;border:none;overflow: hidden;border-bottom:1px dotted black;"
>
</div>
</td>
</tr>
<tr>
<td align="center">产出成本</td>
<td align="center">资金按时足额到位率，年补助标准</td>
<td align="center">
<div style="width:80%;height:80%;margin:10px auto;">
<input
id="id1701"
style="height:80%;width:80%;border:none;overflow: hidden;border-bottom:1px dotted black;"
>
</div>
</td>
</tr>
<tr>
<td align="center" rowspan="4">效果指标</td>
<td align="center">经济效益</td>
<td align="center">受助残疾人通过扶持获得收益占比</td>
<td align="center">
<div style="width:80%;height:80%;margin:10px auto;">
<input
id="id1801"
style="height:80%;width:80%;border:none;overflow: hidden;border-bottom:1px dotted black;"
>
</div>
</td>
</tr>
<tr>
<td align="center">社会效益</td>
<td align="center">受扶持残疾人家庭普遍实现增产增收，减轻贫困残疾人经济负担，提升生活质量，改善生活状况效果</td>
<td align="center">
<div style="width:80%;height:80%;margin:10px auto;">
<input
id="id1901"
style="height:80%;width:80%;border:none;overflow: hidden;border-bottom:1px dotted black;"
>
</div>
</td>
</tr>
<tr>
<td align="center">生态效益</td>
<td align="center" />
<td align="center">
<div style="width:80%;height:80%;margin:10px auto;">
<input
id="id2001"
style="height:80%;width:80%;border:none;overflow: hidden;border-bottom:1px dotted black;"
>
</div>
</td>
</tr>
<tr>
<td align="center">可持续影响</td>
<td align="center">通过项目开展促进受助残疾人家庭增产、增收，改善残疾人生活状况，对提高残疾人社会地位、增强社会关注残疾人事业的促进和示范作用</td>
<td align="center">
<div style="width:80%;height:80%;margin:10px auto;">
<input
id="id2101"
style="height:80%;width:80%;border:none;overflow: hidden;border-bottom:1px dotted black;"
>
</div>
</td>
</tr>
<tr>
<td align="center">满意度指标</td>
<td align="center">- -</td>
<td align="center">
<div style="width:80%;height:80%;margin:10px auto;">
<input
id="id2201"
style="height:80%;width:80%;border:none;overflow: hidden;border-bottom:1px dotted black;"
>
</div>
</td>
<td align="center">
<div style="width:80%;height:80%;margin:10px auto;">
<input
id="id2202"
style="height:80%;width:80%;border:none;overflow: hidden;border-bottom:1px dotted black;"
>
</div>
</td>
</tr>
<tr>
<td align="center">自评报告</td>
<form>
<td colspan="2">
<div id="conclusion-div1" class="form-group">
<div class="col-sm-8">
<input
id="id1502"
multiple
type="file"
onblur="onClickSumit(this.id,this.value)"
>
</div>
</div>
<div id="conclusion-div2" class="form-group" hidden>
<div class="col-sm-8">
<input id="conclusion-url" value hidden>
<button class="upload-btn" onclick="uploadFile('conclusion')">
<i class="ace-icon fa fa-download" />下载年度总结附件
</button>
</div>
</div>
</td>
</form>
<td align="center">年度工作总结</td>
<form>
<td colspan="2">
<div id="conclusion-div1" class="form-group">
<div class="col-sm-8">
<input
id="id1502"
multiple
type="file"
onblur="onClickSumit(this.id,this.value)"
>
</div>
</div>
<div id="conclusion-div2" class="form-group" hidden>
<div class="col-sm-8">
<input id="conclusion-url" value hidden>
<button class="upload-btn" onclick="uploadFile('conclusion')">
<i class="ace-icon fa fa-download" />下载年度总结附件
</button>
</div>
</div>
</td>
</form>
</tr>
</table>
</form>
</div>
</div>
</div>
</div>
</template> </template>
<script> <script>
export default { export default {
name:'selfEvaluation', name: 'SelfEvaluation',
data() { data() {
return { return {
tableData: [{ tableData: [
region: '西乡塘区', {
task: '100', region: '西乡塘区',
capital:'100000.00', task: '100',
particularYear:'2020', capital: '100000.00',
remarks:'', particularYear: '2020',
remarks: ''
}, { },
region: '桂平市', {
task: '425', region: '桂平市',
capital:'425000.00', task: '425',
particularYear:'2020', capital: '425000.00',
remarks:'', particularYear: '2020',
remarks: ''
}, },
{ {
region: '青秀区', region: '青秀区',
task: '105', task: '105',
capital:'105000.00', capital: '105000.00',
particularYear:'2020', particularYear: '2020',
remarks:'', remarks: ''
}
},], ],
currentPage: 1, // 当前页码 currentPage: 1, // 当前页码
total: 20, // 总条数 total: 20, // 总条数
pageSize: 5, // 每页的数据条数 pageSize: 5, // 每页的数据条数
options2: [{ options2: [
{
value: '选项1', value: '选项1',
label: '广西壮族自治区' label: '广西壮族自治区'
}, { },
{
value: '选项2', value: '选项2',
label: '广西壮族自治区南宁市' label: '广西壮族自治区南宁市'
}, { },
{
value: '选项3', value: '选项3',
label: '南宁市南宁市辖区' label: '南宁市南宁市辖区'
}, { },
{
value: '选项4', value: '选项4',
label: '南宁市兴宁区' label: '南宁市兴宁区'
}, { },
{
value: '选项5', value: '选项5',
label: '南宁市青秀区' label: '南宁市青秀区'
}], }
],
options1: [{ options1: [
{
value: '选项1', value: '选项1',
label: '2020' label: '2020'
}, { },
{
value: '选项2', value: '选项2',
label: '2019' label: '2019'
}, { },
{
value: '选项3', value: '选项3',
label: '2018' label: '2018'
}, { },
{
value: '选项4', value: '选项4',
label: '2017' label: '2017'
}, { },
{
value: '选项5', value: '选项5',
label: '2016' label: '2016'
}],
value: '',
radio: '1',
// 表单
ruleForm: {
name: '',
region: '',
ryear:'',
date: '',
type: [],
desc: ''
},
rules: {
name: [
{ required: true, message: '请输入金额', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
region: [
{ required: true, message: '请选择区域', trigger: 'change' }
],
ryear: [
{ required: true, message: '请选择区域', trigger: 'change' }
],
date: [
{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }
],
desc: [
{ required: false, message: '请填写活动形式', trigger: 'blur' }
]
} }
],
value: '',
radio: '1',
};},
methods: {
//每页条数改变时触发 选择一页显示多少行
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
this.currentPage = 1;
this.pageSize = val;
},
//当前页改变时触发 跳转其他页
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
this.currentPage = val;
},
cellStyle({row,column,rowIndex,columnIndex}) {
return "text-align:center; "
},
rowClass({row,rowIndex}){
return "text-align:center;"
},
exportFile(){
console.log('11');
},
queryRegion(){
console.log('查询');
},
// 表单 // 表单
submitForm(formName) { ruleForm: {
this.$refs[formName].validate((valid) => { name: '',
if (valid) { region: '',
alert('submit!'); ryear: '',
} else { date: '',
console.log('error submit!!'); type: [],
return false; desc: ''
}
});
}, },
rules: {
name: [
{ required: true, message: '请输入金额', trigger: 'blur' },
},} { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
</script> ],
region: [{ required: true, message: '请选择区域', trigger: 'change' }],
<style lang="scss"> ryear: [{ required: true, message: '请选择区域', trigger: 'change' }],
*{ date: [
margin: 0; {
padding: 0; type: 'date',
line-height: 1.5; required: true,
list-style:none; message: '请选择日期',
} trigger: 'change'
.selfEvaluation-box{ }
position: relative; ],
desc: [{ required: false, message: '请填写活动形式', trigger: 'blur' }]
margin: 0; }
padding: 8px 20px 24px;
}
.selfEvaluation-box-1{
width :100%;
padding: 8px 20px 50px 20px;
}
.selfEvaluation-content{
width: 1310px;
padding: 12px 15px;
margin-left: 10%;
background-color: #fff;
}
.selfEvaluation-title{
height: 100px;
padding: 25px;
margin: 0 12px;
border: 1px solid #ccc;
}
.selfEvaluation-title-2{
height: 180px;
padding: 25px;
margin: 0 12px;
border: 1px solid #ccc;
}
.selfEvaluation-form{
border: 1px solid #ccc;
margin: 25px 12px;
}
.selfEvaluation-formHoad{
width: 100%;
height: 60px;
background-color:#E0E0E0;
position: relative;
}
.selfEvaluation-formHoad h4{
width: 100%;
height: 20px;
padding: 16px 20px;
display: block;
font-weight: bold;
}
.selfEvaluation-formHoad h4 span{
color:#363636;
font-size: 14px;
z-index: 11;
}
.selfEvaluation-input-box{
width:100%;
height :35px;
margin: 20px;
}
.selfEvaluation-input-box ul li{
float: left;
margin: 3px;
line-height: 30px;
} }
.selfEvaluation-form-table{ },
margin: 25px 12px;
methods: {
// 每页条数改变时触发 选择一页显示多少行
handleSizeChange(val) {
console.log(`每页 ${val} 条`)
this.currentPage = 1
this.pageSize = val
},
// 当前页改变时触发 跳转其他页
handleCurrentChange(val) {
console.log(`当前页: ${val}`)
this.currentPage = val
},
cellStyle({ row, column, rowIndex, columnIndex }) {
return 'text-align:center; '
},
rowClass({ row, rowIndex }) {
return 'text-align:center;'
},
exportFile() {
console.log('11')
},
queryRegion() {
console.log('查询')
},
// 表单
submitForm(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
alert('submit!')
} else {
console.log('error submit!!')
return false
}
})
} }
}
}
</script>
</style> <style lang="scss">
\ No newline at end of file * {
list-style: none;
}
.selfEvaluation-box {
position: relative;
margin: 0;
padding: 8px 20px 24px;
}
.selfEvaluation-box-1 {
width: 100%;
padding: 8px 20px 50px 20px;
}
.selfEvaluation-content {
width: 1310px;
padding: 12px 15px;
margin-left: 10%;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
border-radius: 5px;
}
.selfEvaluation-form {
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;
}
.selfEvaluation-formHoad {
width: 100%;
height: 60px;
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
position: relative;
}
.selfEvaluation-formHoad h4 {
width: 100%;
height: 20px;
padding: 20px 20px;
display: block;
font-weight: bold;
}
.selfEvaluation-formHoad h4 span {
color: #363636;
font-size: 14px;
z-index: 11;
}
.selfEvaluation-input-box {
width: 100%;
height: 60px;
margin: 20px;
}
.selfEvaluation-input-box ul li {
float: left;
margin: 3px;
line-height: 30px;
}
.selfEvaluation-form-table {
margin: 25px 12px;
padding: 10px;
}
td{
line-height: 30px;
font-size: 14px;
}
</style>
src/views/statis/index.vue
<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-formHoad" >
<h4><span>搜索条件</span></h4>
</div>
<div class="statis-input-box">
<ul>
<li>行政区域:</li>
<li>
<el-select v-model="value" placeholder="请选择">
<el-option
v-for="item in options2"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</li>
<li>项目:</li>
<li>
<el-select v-model="value" placeholder="请选择">
<el-option
v-for="item in options1"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</li>
<li>
<el-button type="primary" size="mini" @click="queryRegion()" >查询</el-button>
</li>
</ul>
</div>
</div>
<div class="statis-form">
<div class="statis-formHoad">
<h4><span>帮扶对象汇总信息</span></h4>
<div style="position:absolute;top:10px;right:25px;z-index: 1;">
<el-button type="primary" @click="exportFile()">导出表格</el-button></div>
</div>
<!-- 表格 -->
<el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" style="width: 100%; font-size:14px; "
:cell-style="cellStyle" :header-cell-style="rowClass" >
<el-table-column prop="organization" label="单位名称" width="80" >
</el-table-column>
<el-table-column prop="number" label="自治区任务数" width="110" >
</el-table-column>
<el-table-column prop="address" label="实际完成数" width="100" >
</el-table-column>
<el-table-column prop="population" label="资金合计" width="80" >
</el-table-column>
<el-table-column prop="telephone" label="自治区下拨资金" width="120" >
</el-table-column>
<el-table-column prop="apply" label="设区市实际配套资金" width="160" >
</el-table-column>
<el-table-column prop="capital" label="县〔市、区〕实际配套资金" width="190" >
</el-table-column>
<el-table-column prop="organization" 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>
<!-- 分页 -->
<div class="block" >
<div style=" height :40px; margin-top:12px; margin-left:6px;">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[5,10,20,30]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="tableData.length" >
</el-pagination>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="statis-form">
<div class="statis-formHoad">
<h4><span>搜索条件</span></h4>
</div>
<div class="statis-input-box">
</template> <ul>
<li>行政区域:</li>
<li>
<el-select v-model="value" placeholder="请选择">
<el-option
v-for="item in options2"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</li>
<li>项目:</li>
<li>
<el-select v-model="value" placeholder="请选择">
<el-option
v-for="item in options1"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</li>
<script> <li>
export default { <el-button type="primary" size="mini" @click="queryRegion()">查询</el-button>
name:'statis', </li>
data() { </ul>
return {
tableData: [{
organization:'居委会',
},], </div>
currentPage: 1, // 当前页码
total: 20, // 总条数
pageSize: 5, // 每页的数据条数
</div>
<div class="statis-form">
<div class="statis-formHoad">
<h4><span>帮扶对象汇总信息</span></h4>
<div style="position:absolute;top:10px;right:25px;z-index: 1;">
<el-button type="primary" @click="exportFile()">导出表格</el-button></div>
</div>
<!-- 表格 -->
<el-table
:data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
style="width: 100%; font-size:14px; "
:cell-style="cellStyle"
:header-cell-style="rowClass"
>
<el-table-column prop="organization" label="单位名称" width="80" />
<el-table-column prop="number" label="自治区任务数" width="110" />
<el-table-column prop="address" label="实际完成数" width="100" />
<el-table-column prop="population" label="资金合计" width="80" />
<el-table-column prop="telephone" label="自治区下拨资金" width="120" />
<el-table-column prop="apply" label="设区市实际配套资金" width="160" />
<el-table-column prop="capital" label="县〔市、区〕实际配套资金" width="190" />
<el-table-column prop="organization" label="社会投入" width="120" />
<el-table-column prop="help" label="党组织(个)" width="90" />
<el-table-column prop="help" label="党员(个)" width="80" />
<el-table-column prop="help" label="帮扶残疾人(个)" width="120" />
</el-table>
<!-- 分页 -->
<div class="block">
<div style=" height :40px; margin-top:12px; margin-left:6px;">
<el-pagination
:current-page="currentPage"
:page-sizes="[5,10,20,30]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="tableData.length"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
</div>
options2: [{ </div>
value: '选项1', </div>
label: '广西壮族自治区' </div>
}, { </div>
value: '选项2',
label: '广西壮族自治区南宁市'
}, {
value: '选项3',
label: '南宁市南宁市辖区'
}, {
value: '选项4',
label: '南宁市兴宁区'
}, {
value: '选项5',
label: '南宁市青秀区'
}],
</template>
options1: [{ <script>
value: '选项1', export default {
label: '2020' name: 'Statis',
}, { data() {
value: '选项2', return {
label: '2019' tableData: [{
}, { organization: '居委会'
value: '选项3',
label: '2018'
}, {
value: '选项4',
label: '2017'
}, {
value: '选项5',
label: '2016'
}],
value: '',
radio: '1',
}],
currentPage: 1, // 当前页码
total: 20, // 总条数
pageSize: 5, // 每页的数据条数
// 表单 options2: [{
ruleForm: { value: '选项1',
name: '', label: '广西壮族自治区'
region: '', }, {
ryear:'', value: '选项2',
date: '', label: '广西壮族自治区南宁市'
type: [], }, {
desc: '' value: '选项3',
}, label: '南宁市南宁市辖区'
rules: { }, {
name: [ value: '选项4',
{ required: true, message: '请输入金额', trigger: 'blur' }, label: '南宁市兴宁区'
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' } }, {
], value: '选项5',
region: [ label: '南宁市青秀区'
{ required: true, message: '请选择区域', trigger: 'change' } }],
],
ryear: [
{ required: true, message: '请选择区域', trigger: 'change' }
],
date: [
{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }
],
desc: [
{ required: false, message: '请填写活动形式', trigger: 'blur' }
]
}
options1: [{
};}, value: '选项1',
label: '2020'
}, {
value: '选项2',
label: '2019'
}, {
value: '选项3',
label: '2018'
}, {
value: '选项4',
label: '2017'
}, {
value: '选项5',
label: '2016'
}],
value: '',
radio: '1',
methods: { // 表单
//每页条数改变时触发 选择一页显示多少行 ruleForm: {
handleSizeChange(val) { name: '',
console.log(`每页 ${val} 条`); region: '',
this.currentPage = 1; ryear: '',
this.pageSize = val; date: '',
}, type: [],
//当前页改变时触发 跳转其他页 desc: ''
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
this.currentPage = val;
},
cellStyle({row,column,rowIndex,columnIndex}) {
return "text-align:center; "
},
rowClass({row,rowIndex}){
return "text-align:center;"
}, },
rules: {
name: [
{ required: true, message: '请输入金额', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
region: [
{ required: true, message: '请选择区域', trigger: 'change' }
],
ryear: [
{ required: true, message: '请选择区域', trigger: 'change' }
],
date: [
{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }
],
desc: [
{ required: false, message: '请填写活动形式', trigger: 'blur' }
]
}
}
},
exportFile(){ methods: {
console.log('11'); // 每页条数改变时触发 选择一页显示多少行
handleSizeChange(val) {
}, console.log(`每页 ${val} 条`)
this.currentPage = 1
this.pageSize = val
queryRegion(){ },
console.log('查询'); // 当前页改变时触发 跳转其他页
handleCurrentChange(val) {
}, console.log(`当前页: ${val}`)
// 表单 this.currentPage = val
submitForm(formName) { },
this.$refs[formName].validate((valid) => { cellStyle({ row, column, rowIndex, columnIndex }) {
if (valid) { return 'text-align:center; '
alert('submit!'); },
} else { rowClass({ row, rowIndex }) {
console.log('error submit!!'); return 'text-align:center;'
return false; },
}
});
},
exportFile() {
console.log('11')
},
queryRegion() {
console.log('查询')
},
// 表单
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!')
} else {
console.log('error submit!!')
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;
margin: 0; margin: 0;
padding: 8px 20px 24px; padding: 8px 20px 24px;
} }
.statis-box-1{ .statis-box-1{
width :100%; width :100%;
padding: 8px 20px 50px 20px; padding: 8px 20px 50px 20px;
} }
.statis-content{ .statis-content{
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;
} }
.statis-formHoad h4 span{ .statis-formHoad h4 span{
color:#363636; color:#363636;
font-size: 14px; font-size: 14px;
z-index: 11; z-index: 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;
...@@ -307,4 +270,4 @@ ...@@ -307,4 +270,4 @@
list-style:none; list-style:none;
} }
</style> </style>
\ No newline at end of file
src/views/summy/index.vue
<template> <template>
<div class="summy-box"> <div class="summy-box">
<div class="summy-box-1"> <div class="summy-box-1">
<div class="summy-content"> <div class="summy-content">
<div class="summy-title">帮扶汇总 <div class="summy-form">
<p style="margin: 5px 25px; font-size: 12px;">帮扶汇总</p> <div class="summy-formHoad">
</div> <h4><span>搜索条件</span></h4>
</div>
<div class="summy-input-box">
<ul>
<li>行政区域:</li>
<li>
<el-select v-model="value" placeholder="请选择">
<el-option
v-for="item in options2"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</li>
<li>项目:</li>
<li>
<el-select v-model="value" placeholder="请选择">
<el-option
v-for="item in options1"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</li>
<li>
<div class="summy-form"> <el-button type="primary" size="mini" @click="queryRegion()">查询</el-button>
<div class="summy-formHoad" > </li>
<h4><span>搜索条件</span></h4> </ul>
</div>
<div class="summy-input-box">
<ul>
<li>行政区域:</li>
<li>
<el-select v-model="value" placeholder="请选择">
<el-option
v-for="item in options2"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</li>
<li>项目:</li>
<li>
<el-select v-model="value" placeholder="请选择">
<el-option
v-for="item in options1"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</li>
<li>
<el-button type="primary" size="mini" @click="queryRegion()" >查询</el-button>
</li>
</ul>
</div> </div>
</div>
<div class="summy-form">
<div class="summy-formHoad">
<h4><span>帮扶对象汇总信息</span></h4>
<div style="position:absolute;top:10px;right:25px;z-index: 1;">
<el-button type="primary" @click="exportFile()">导出表格</el-button></div>
</div>
<!-- 表格 -->
<el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" style="width: 100%; font-size:14px; "
:cell-style="cellStyle" :header-cell-style="rowClass" >
<el-table-column prop="name" label="姓名" width="110" >
</el-table-column>
<el-table-column prop="number" label="残疾人号" width="110" >
</el-table-column>
<el-table-column prop="address" label="家庭地址" width="350" >
</el-table-column>
<el-table-column prop="population" label="家庭人口" width="110" >
</el-table-column>
<el-table-column prop="telephone" label="联系电话" width="120" >
</el-table-column>
<el-table-column prop="apply" label="项目" width="110" >
</el-table-column>
<el-table-column prop="capital" label="总投入" width="110" >
</el-table-column>
<el-table-column prop="organization" label="党组织名称" width="120" >
</el-table-column>
<el-table-column prop="help" label="党员干部姓名" width="110" >
</el-table-column>
</el-table>
<!-- 分页 -->
<div class="block" >
<div style=" height :40px; margin-top:12px; margin-left:6px;">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[5,10,20,30]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="tableData.length" >
</el-pagination>
</div>
</div>
</div>
</div> </div>
</div>
</div>
<div class="summy-form">
<div class="summy-formHoad">
<h4><span>帮扶对象汇总信息</span></h4>
<div style="position:absolute;top:10px;right:25px;z-index: 1;">
<el-button type="primary" @click="exportFile()">导出表格</el-button></div>
</div>
<!-- 表格 -->
<el-table
:data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
style="width: 100%; font-size:14px; "
:cell-style="cellStyle"
:header-cell-style="rowClass"
>
<el-table-column prop="name" label="姓名" width="110" />
<el-table-column prop="number" label="残疾人号" width="110" />
<el-table-column prop="address" label="家庭地址" width="350" />
<el-table-column prop="population" label="家庭人口" width="110" />
<el-table-column prop="telephone" label="联系电话" width="120" />
<el-table-column prop="apply" label="项目" width="110" />
<el-table-column prop="capital" label="总投入" width="110" />
<el-table-column prop="organization" label="党组织名称" width="120" />
<el-table-column prop="help" label="党员干部姓名" width="116" />
</el-table>
<!-- 分页 -->
<div class="block">
<div style=" height :40px; margin-top:12px; margin-left:6px;">
<el-pagination
:current-page="currentPage"
:page-sizes="[5,10,20,30]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="tableData.length"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
</div>
</div>
</div>
</div>
</div>
</template> </template>
<script> <script>
export default { export default {
name:'summy', name: 'Summy',
data() { data() {
return { return {
tableData: [{ tableData: [{
name:'老铁', name: '老铁',
number:'4415', number: '4415',
address:'广西壮族自治区隆安县那桐镇下邓村联房屯57号', address: '广西壮族自治区隆安县那桐镇下邓村联房屯57号',
population:'5', population: '5',
telephone:'19857846724', telephone: '19857846724',
apply:'2020-01-02', apply: '2020-01-02',
capital:'4250.00', capital: '4250.00',
organization:'居委会', organization: '居委会',
help:'老李', help: '老李'
},{ }, {
name:'老铁', name: '老铁',
number:'4415', number: '4415',
address:'广西壮族自治区隆安县那桐镇下邓村联房屯57号', address: '广西壮族自治区隆安县那桐镇下邓村联房屯57号',
population:'5', population: '5',
telephone:'19857846724', telephone: '19857846724',
apply:'2020-01-02', apply: '2020-01-02',
capital:'4250.00', capital: '4250.00',
organization:'居委会', organization: '居委会',
help:'老李', help: '老李'
},{ }, {
name:'老铁', name: '老铁',
number:'4415', number: '4415',
address:'广西壮族自治区隆安县那桐镇下邓村联房屯57号', address: '广西壮族自治区隆安县那桐镇下邓村联房屯57号',
population:'5', population: '5',
telephone:'19857846724', telephone: '19857846724',
apply:'2020-01-02', apply: '2020-01-02',
capital:'425000.00', capital: '425000.00',
organization:'居委会', organization: '居委会',
help:'老李', help: '老李'
},{ }, {
name:'老铁', name: '老铁',
number:'4415', number: '4415',
address:'广西壮族自治区隆安县那桐镇下邓村联房屯57号', address: '广西壮族自治区隆安县那桐镇下邓村联房屯57号',
population:'5', population: '5',
telephone:'19857846724', telephone: '19857846724',
apply:'2020-01-02', apply: '2020-01-02',
capital:'4250.00', capital: '4250.00',
organization:'居委会', organization: '居委会',
help:'老李', help: '老李'
},{ }, {
name:'老铁', name: '老铁',
number:'4415', number: '4415',
address:'广西壮族自治区隆安县那桐镇下邓村联房屯57号', address: '广西壮族自治区隆安县那桐镇下邓村联房屯57号',
population:'5', population: '5',
telephone:'19857846724', telephone: '19857846724',
apply:'2020-01-02', apply: '2020-01-02',
capital:'4250.00', capital: '4250.00',
organization:'居委会', organization: '居委会',
help:'老李', help: '老李'
},{ }, {
name:'老铁', name: '老铁',
number:'4415', number: '4415',
address:'广西壮族自治区隆安县那桐镇下邓村联房屯57号', address: '广西壮族自治区隆安县那桐镇下邓村联房屯57号',
population:'5', population: '5',
telephone:'19857846724', telephone: '19857846724',
apply:'2020-01-02', apply: '2020-01-02',
capital:'4250.00', capital: '4250.00',
organization:'居委会', organization: '居委会',
help:'老李', help: '老李'
},], }],
currentPage: 1, // 当前页码 currentPage: 1, // 当前页码
total: 20, // 总条数 total: 20, // 总条数
pageSize: 5, // 每页的数据条数 pageSize: 5, // 每页的数据条数
options2: [{ options2: [{
value: '选项1', value: '选项1',
label: '广西壮族自治区' label: '广西壮族自治区'
}, { }, {
value: '选项2', value: '选项2',
label: '广西壮族自治区南宁市' label: '广西壮族自治区南宁市'
}, { }, {
value: '选项3', value: '选项3',
label: '南宁市南宁市辖区' label: '南宁市南宁市辖区'
}, { }, {
value: '选项4', value: '选项4',
label: '南宁市兴宁区' label: '南宁市兴宁区'
}, { }, {
value: '选项5', value: '选项5',
label: '南宁市青秀区' label: '南宁市青秀区'
}], }],
options1: [{
value: '选项1',
label: '2020'
}, {
value: '选项2',
label: '2019'
}, {
value: '选项3',
label: '2018'
}, {
value: '选项4',
label: '2017'
}, {
value: '选项5',
label: '2016'
}],
value: '',
radio: '1',
options1: [{ // 表单
value: '选项1', ruleForm: {
label: '2020' name: '',
}, { region: '',
value: '选项2', ryear: '',
label: '2019' date: '',
}, { type: [],
value: '选项3', desc: ''
label: '2018'
}, {
value: '选项4',
label: '2017'
}, {
value: '选项5',
label: '2016'
}],
value: '',
radio: '1',
// 表单
ruleForm: {
name: '',
region: '',
ryear:'',
date: '',
type: [],
desc: ''
},
rules: {
name: [
{ required: true, message: '请输入金额', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
region: [
{ required: true, message: '请选择区域', trigger: 'change' }
],
ryear: [
{ required: true, message: '请选择区域', trigger: 'change' }
],
date: [
{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }
],
desc: [
{ required: false, message: '请填写活动形式', trigger: 'blur' }
]
}
};},
methods: {
//每页条数改变时触发 选择一页显示多少行
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
this.currentPage = 1;
this.pageSize = val;
},
//当前页改变时触发 跳转其他页
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
this.currentPage = val;
},
cellStyle({row,column,rowIndex,columnIndex}) {
return "text-align:center; "
},
rowClass({row,rowIndex}){
return "text-align:center;"
}, },
rules: {
name: [
{ required: true, message: '请输入金额', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
region: [
{ required: true, message: '请选择区域', trigger: 'change' }
],
ryear: [
{ required: true, message: '请选择区域', trigger: 'change' }
],
date: [
{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }
],
desc: [
{ required: false, message: '请填写活动形式', trigger: 'blur' }
]
}
}
},
exportFile(){ methods: {
console.log('11'); // 每页条数改变时触发 选择一页显示多少行
handleSizeChange(val) {
}, console.log(`每页 ${val} 条`)
this.currentPage = 1
this.pageSize = val
queryRegion(){ },
console.log('查询'); // 当前页改变时触发 跳转其他页
handleCurrentChange(val) {
}, console.log(`当前页: ${val}`)
// 表单 this.currentPage = val
submitForm(formName) { },
this.$refs[formName].validate((valid) => { cellStyle({ row, column, rowIndex, columnIndex }) {
if (valid) { return 'text-align:center; '
alert('submit!'); },
} else { rowClass({ row, rowIndex }) {
console.log('error submit!!'); return 'text-align:center;'
return false; },
}
});
},
exportFile() {
console.log('11')
},
queryRegion() {
console.log('查询')
},
// 表单
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!')
} else {
console.log('error submit!!')
return false
}
})
}
},} }}
</script> </script>
<style lang="scss"> <style lang="scss">
*{
margin: 0;
padding: 0;
line-height: 1.5;
}
.summy-box{ .summy-box{
position: relative; position: relative;
margin: 0; margin: 0;
padding: 8px 20px 24px; padding: 8px 20px 24px;
} }
.summy-box-1{ .summy-box-1{
width :100%; width :100%;
padding: 8px 20px 50px 20px; padding: 8px 20px 50px 20px;
} }
.summy-content{ .summy-content{
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;
.summy-title{
height: 100px;
padding: 25px;
margin: 0 12px;
border: 1px solid #ccc;
} }
.summy-form{ .summy-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;
} }
.summy-formHoad{ .summy-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;
} }
.summy-formHoad h4{ .summy-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;
} }
.summy-formHoad h4 span{ .summy-formHoad h4 span{
color:#363636; color:#363636;
font-size: 14px; font-size: 14px;
z-index: 11; z-index: 11;
} }
.summy-input-box{ .summy-input-box{
width:100%; width:100%;
height :35px; height :50px;
margin: 20px; margin: 20px;
} }
.border-bottom{
border-bottom: 1px solid #ccc;
}
.summy-input-box ul li{ .summy-input-box ul li{
float: left; float: left;
margin: 3px; margin: 3px;
...@@ -360,4 +324,4 @@ ...@@ -360,4 +324,4 @@
list-style:none; list-style:none;
} }
</style> </style>
\ No newline at end of file
src/views/taskIndex/index.vue
<template> <template>
<div class="taskIndex-box"> <div class="taskIndex-box">
<div class="taskIndex-box-1"> <div class="taskIndex-box-1">
<div class="taskIndex-content"> <div class="taskIndex-content">
<div class="taskIndex-title">项目任务指标
<p style="margin: 5px 25px; font-size: 12px;">项目指标信息</p> <div class="taskIndex-form">
<div class="taskIndex-formHoad">
<h4><span>搜索条件</span></h4>
<div style="position:absolute; top:10px; right:25px;z-index: 1;">
<el-button type="primary" @click="queryRegion()">新增项目</el-button>
</div> </div>
</div>
<div class="taskIndex-form"> <div class="taskIndex-input-box">
<div class="taskIndex-formHoad" >
<h4><span>搜索条件</span></h4> <ul>
<div style="position:absolute; top:10px; right:25px;z-index: 1;"> <li>地区:</li>
<el-button type="primary" @click="queryRegion()" >新增项目</el-button> <li>
</div> <el-select v-model="value" placeholder="请选择">
<el-option
</div> v-for="item in options2"
<div class="taskIndex-input-box"> :key="item.value"
:label="item.label"
<ul> :value="item.value"
<li>地区:</li> />
<li> </el-select>
<el-select v-model="value" placeholder="请选择"> </li>
<el-option <li>年份:</li>
v-for="item in options2" <li>
:key="item.value" <el-select v-model="value" placeholder="请选择">
:label="item.label" <el-option
:value="item.value"> v-for="item in options1"
</el-option> :key="item.value"
</el-select> :label="item.label"
</li> :value="item.value"
<li>年份:</li> />
<li> </el-select>
<el-select v-model="value" placeholder="请选择"> </li>
<el-option <li>
v-for="item in options1" 每页显示
:key="item.value" </li>
:label="item.label" <li>
:value="item.value"> <el-pagination
</el-option> :current-page="currentPage"
</el-select> :page-sizes="[5,10,20,30]"
</li> :page-size="pageSize"
<li> layout="sizes"
每页显示 :total="tableData.length"
</li> @size-change="handleSizeChange"
<li> @current-change="handleCurrentChange"
<el-pagination />
@size-change="handleSizeChange" </li>
@current-change="handleCurrentChange" <li>
:current-page="currentPage" <el-button type="primary" size="mini" @click="queryRegion()">查询</el-button>
:page-sizes="[5,10,20,30]" </li>
:page-size="pageSize" </ul>
layout="sizes"
:total="tableData.length" > </div>
</el-pagination>
</li> </div>
<li>
<el-button type="primary" size="mini" @click="queryRegion()" >查询</el-button> <div class="taskIndex-title-2">
</li> <br>
</ul> <br>
</div> 资金总额与下级区域之和不相等有：
<p style="margin: 5px 25px; font-size: 14px;">南宁市、柳州市、桂林市、梧州市、北海市、防城港市、钦州市、贵港市、玉林市、百色市、贺州市、河池市、来宾市、崇左市</p>
</div> <br>
任务数与下级区域之和不相等有：
<div class="taskIndex-title-2">资金总额与下级区域之和不相等有： <p style="margin: 5px 25px; font-size: 14px;">南宁市、柳州市、桂林市、梧州市、北海市、防城港市、钦州市、贵港市、玉林市、百色市、贺州市、河池市、来宾市、崇左市</p>
<p style="margin: 5px 25px; font-size: 14px;">南宁市、柳州市、桂林市、梧州市、北海市、防城港市、钦州市、贵港市、玉林市、百色市、贺州市、河池市、来宾市、崇左市</p> </div>
<br>
任务数与下级区域之和不相等有： <div class="taskIndex-form">
<p style="margin: 5px 25px; font-size: 14px;">南宁市、柳州市、桂林市、梧州市、北海市、防城港市、钦州市、贵港市、玉林市、百色市、贺州市、河池市、来宾市、崇左市</p> <div class="taskIndex-formHoad">
<h4><span>项目任务指标</span></h4>
<div style="position:absolute;top:10px;right:25px;z-index: 1;">
<el-button type="primary" @click="exportFile()">导出表格</el-button></div>
</div>
<!-- 表格 -->
<el-table
:data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
style="width: 100%; font-size:14px; "
:cell-style="cellStyle"
:header-cell-style="rowClass"
>
<el-table-column prop="region" label="行政区域" width="210" />
<el-table-column prop="task" label="任务数" width="210" />
<el-table-column prop="capital" label="资金" width="210" />
<el-table-column prop="particularYear" label="年份" width="210" />
<el-table-column prop="remarks" label="备注" width="210" />
<el-table-column label="选择" width="206">
<template slot-scope="scope">
<el-button size="small" icon="el-icon-edit" circle @click="handleClick(scope.row)" />
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<div class="block">
<div style=" height :40px; margin-top:12px; margin-left:6px;">
<el-pagination
:current-page="currentPage"
:page-sizes="[5,10,20,30]"
:page-size="pageSize"
layout="total, prev, pager, next, jumper"
:total="tableData.length"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div> </div>
</div>
<div class="taskIndex-form"> </div>
<div class="taskIndex-formHoad"> <div class="project-status">
<h4><span>项目任务指标</span></h4> <div style="height :700px;">
<div style="position:absolute;top:10px;right:25px;z-index: 1;"> <div class="project-box">任务指标信息</div>
<el-button type="primary" @click="exportFile()">导出表格</el-button></div> <div class="project-box-2">
</div> <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="140px" class="demo-ruleForm">
<!-- 表格 -->
<el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" style="width: 100%; font-size:14px; "
:cell-style="cellStyle" :header-cell-style="rowClass" >
<el-table-column prop="region" label="行政区域" width="210" >
</el-table-column>
<el-table-column prop="task" label="任务数" width="210" >
</el-table-column>
<el-table-column prop="capital" label="资金" width="210" >
</el-table-column>
<el-table-column prop="particularYear" label="年份" width="210" >
</el-table-column>
<el-table-column prop="remarks" label="备注" width="210" >
</el-table-column>
<el-table-column label="选择" width="200">
<template slot-scope="scope">
<el-button @click="handleClick(scope.row)" size="small" icon="el-icon-edit" circle > </el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<div class="block" >
<div style=" height :40px; margin-top:12px; margin-left:6px;">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[5,10,20,30]"
:page-size="pageSize"
layout="total, prev, pager, next, jumper"
:total="tableData.length" >
</el-pagination>
</div>
</div>
</div>
<div class="project-status" >
<div style="height :700px;">
<div class="project-box">任务指标信息</div>
<div class="project-box-2" >
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="140px" class="demo-ruleForm">
<el-form-item label="年份" prop="ryear">
<el-select v-model="ruleForm.ryear" placeholder="请选年份">
<el-option label="2020" value="shanghai"></el-option>
</el-select>
</el-form-item>
<el-form-item label="行政区域" prop="region"> <el-form-item label="年份" prop="ryear">
<el-select v-model="ruleForm.region" placeholder="请选行政区域"> <el-select v-model="ruleForm.ryear" placeholder="请选年份">
<el-option label="区域一" value="shanghai"></el-option> <el-option label="2020" value="shanghai" />
<el-option label="区域二" value="beijing"></el-option> </el-select>
</el-select> </el-form-item>
</el-form-item>
<el-form-item label="任务数（户）" prop="name" style="width: 400px;">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="资金总额（元）" prop="name" style="width: 400px;">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="自治区资金（元）" prop="name" style="width: 400px;">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="市资金（元）" prop="name" style="width: 400px;">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="县资金（元）" prop="name" style="width: 400px;">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="其他资金（元）" prop="name" style="width: 400px;">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="完成时间" required>
<el-col :span="11">
<el-form-item prop="date">
<el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="11">
</el-col>
</el-form-item>
<el-form-item label="备注" prop="desc" style="width: 400px;">
<el-input type="textarea" v-model="ruleForm.desc" ></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
<el-form-item label="行政区域" prop="region">
<el-select v-model="ruleForm.region" placeholder="请选行政区域">
<el-option label="区域一" value="shanghai" />
<el-option label="区域二" value="beijing" />
</el-select>
</el-form-item>
<el-form-item label="任务数（户）" prop="name" style="width: 400px;">
<el-input v-model="ruleForm.name" />
</el-form-item>
<el-form-item label="资金总额（元）" prop="name" style="width: 400px;">
<el-input v-model="ruleForm.name" />
</el-form-item>
<el-form-item label="自治区资金（元）" prop="name" style="width: 400px;">
<el-input v-model="ruleForm.name" />
</el-form-item>
<el-form-item label="市资金（元）" prop="name" style="width: 400px;">
<el-input v-model="ruleForm.name" />
</el-form-item>
<el-form-item label="县资金（元）" prop="name" style="width: 400px;">
<el-input v-model="ruleForm.name" />
</el-form-item>
<el-form-item label="其他资金（元）" prop="name" style="width: 400px;">
<el-input v-model="ruleForm.name" />
</el-form-item>
<el-form-item label="完成时间" required>
<el-col :span="11">
<el-form-item prop="date">
<el-date-picker v-model="ruleForm.date1" type="date" placeholder="选择日期" style="width: 100%;" />
</el-form-item> </el-form-item>
</el-form> </el-col>
</div> <el-col :span="11" />
<div class="project-box-2"> </el-form-item>
<span style=" margin:auto; ">实施方案 、 财务凭证 、 工作通知</span> <el-form-item label="备注" prop="desc" style="width: 400px;">
<el-upload <el-input v-model="ruleForm.desc" type="textarea" />
class="upload-demo" </el-form-item>
drag <el-form-item>
show-file-list="true" <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
action="https://jsonplaceholder.typicode.com/posts/"
multiple> </el-form-item>
<i class="el-icon-upload"></i> </el-form>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div> </div>
</el-upload> <div class="project-box-2">
<div id="conclusion-div1" class="form-group">
<div class="col-sm-8">
<span style=" margin: 0 10px ;">实施方案 </span>
<input id="id1502" multiple="" type="file" onblur="onClickSumit(this.id,this.value)">
</div> </div>
</div> </div>
<div id="conclusion-div2" class="form-group" hidden>
<div class="col-sm-8">
<input id="conclusion-url" value="" hidden>
<button class="upload-btn" onclick="uploadFile('conclusion')"><i
class="ace-icon fa fa-download"
/>下载年度总结附件
</button>
</div>
</div>
</div>
<div class="project-box-2">
<div id="conclusion-div1" class="form-group">
<div class="col-sm-8">
<span style=" margin: 0 10px ; ">财务凭证</span>
<input id="id1502" multiple="" type="file" onblur="onClickSumit(this.id,this.value)">
</div>
</div>
<div id="conclusion-div2" class="form-group" hidden>
<div class="col-sm-8">
<input id="conclusion-url" value="" hidden>
<button class="upload-btn" onclick="uploadFile('conclusion')"><i
class="ace-icon fa fa-download"
/>下载年度总结附件
</button>
</div>
</div>
</div>
<div class="project-box-2">
<div id="conclusion-div1" class="form-group">
<div class="col-sm-8">
<span style=" margin:0 10px; ">工作通知</span>
<input id="id1502" multiple="" type="file" onblur="onClickSumit(this.id,this.value)">
</div>
</div>
<div id="conclusion-div2" class="form-group" hidden>
<div class="col-sm-8">
<input id="conclusion-url" value="" hidden>
<button class="upload-btn" onclick="uploadFile('conclusion')"><i
class="ace-icon fa fa-download"
/>下载年度总结附件
</button>
</div>
</div>
</div>
</div> </div>
</div> </div>
</div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name:'taskIndex', name: 'TaskIndex',
data() { data() {
return { return {
tableData: [{ tableData: [{
region: '西乡塘区', region: '西乡塘区',
task: '100', task: '100',
capital:'100000.00', capital: '100000.00',
particularYear:'2020', particularYear: '2020',
remarks:'', remarks: ''
}, {
region: '桂平市',
task: '425',
capital:'425000.00',
particularYear:'2020',
remarks:'',
},
{
region: '青秀区',
task: '105',
capital:'105000.00',
particularYear:'2020',
remarks:'',
},],
currentPage: 1, // 当前页码
total: 20, // 总条数
pageSize: 5, // 每页的数据条数
options2: [{
value: '选项1',
label: '广西壮族自治区'
}, {
value: '选项2',
label: '广西壮族自治区南宁市'
}, {
value: '选项3',
label: '南宁市南宁市辖区'
}, {
value: '选项4',
label: '南宁市兴宁区'
}, {
value: '选项5',
label: '南宁市青秀区'
}],
options1: [{
value: '选项1',
label: '2020'
}, {
value: '选项2',
label: '2019'
}, {
value: '选项3',
label: '2018'
}, {
value: '选项4',
label: '2017'
}, {
value: '选项5',
label: '2016'
}],
value: '',
radio: '1',
// 表单
ruleForm: {
name: '',
region: '',
ryear:'',
date: '',
type: [],
desc: ''
},
rules: {
name: [
{ required: true, message: '请输入金额', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
region: [
{ required: true, message: '请选择区域', trigger: 'change' }
],
ryear: [
{ required: true, message: '请选择区域', trigger: 'change' }
],
date: [
{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }
],
desc: [
{ required: false, message: '请填写活动形式', trigger: 'blur' }
]
}
}, {
};}, region: '桂平市',
task: '425',
capital: '425000.00',
particularYear: '2020',
remarks: ''
methods: {
//每页条数改变时触发 选择一页显示多少行
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
this.currentPage = 1;
this.pageSize = val;
}, },
//当前页改变时触发 跳转其他页 {
handleCurrentChange(val) { region: '青秀区',
console.log(`当前页: ${val}`); task: '105',
this.currentPage = val; capital: '105000.00',
}, particularYear: '2020',
cellStyle({row,column,rowIndex,columnIndex}) { remarks: ''
return "text-align:center; "
},
rowClass({row,rowIndex}){
return "text-align:center;"
},
exportFile(){ }],
console.log('11'); currentPage: 1, // 当前页码
total: 20, // 总条数
}, pageSize: 5, // 每页的数据条数
options2: [{
value: '选项1',
label: '广西壮族自治区'
}, {
value: '选项2',
label: '广西壮族自治区南宁市'
}, {
value: '选项3',
label: '南宁市南宁市辖区'
}, {
value: '选项4',
label: '南宁市兴宁区'
}, {
value: '选项5',
label: '南宁市青秀区'
}],
options1: [{
value: '选项1',
label: '2020'
}, {
value: '选项2',
label: '2019'
}, {
value: '选项3',
label: '2018'
}, {
value: '选项4',
label: '2017'
}, {
value: '选项5',
label: '2016'
}],
value: '',
radio: '1',
queryRegion(){
console.log('查询');
},
// 表单 // 表单
submitForm(formName) { ruleForm: {
this.$refs[formName].validate((valid) => { name: '',
if (valid) { region: '',
alert('submit!'); ryear: '',
} else { date: '',
console.log('error submit!!'); type: [],
return false; desc: ''
}
});
}, },
rules: {
name: [
{ required: true, message: '请输入金额', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
region: [
{ required: true, message: '请选择区域', trigger: 'change' }
],
ryear: [
{ required: true, message: '请选择区域', trigger: 'change' }
],
date: [
{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }
],
desc: [
{ required: false, message: '请填写活动形式', trigger: 'blur' }
]
}
}
},
methods: {
// 每页条数改变时触发 选择一页显示多少行
handleSizeChange(val) {
console.log(`每页 ${val} 条`)
this.currentPage = 1
this.pageSize = val
},
// 当前页改变时触发 跳转其他页
handleCurrentChange(val) {
console.log(`当前页: ${val}`)
this.currentPage = val
},
cellStyle({ row, column, rowIndex, columnIndex }) {
return 'text-align:center; '
},
rowClass({ row, rowIndex }) {
return 'text-align:center;'
},
exportFile() {
console.log('11')
},
},} queryRegion() {
console.log('查询')
},
// 表单
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!')
} else {
console.log('error submit!!')
return false
}
})
}
}}
</script> </script>
<style lang="scss"> <style lang="scss">
*{
margin: 0;
padding: 0;
line-height: 1.5;
}
.taskIndex-box{ .taskIndex-box{
position: relative; position: relative;
margin: 0; margin: 0;
padding: 8px 20px 24px; padding: 8px 20px 24px;
} }
.taskIndex-box-1{ .taskIndex-box-1{
width :100%; width :100%;
padding: 8px 20px 50px 20px; padding: 8px 20px 50px 20px;
} }
.taskIndex-content{ .taskIndex-content{
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, .12), 0 0 6px rgba(0, 0, 0, .04);
} border-radius: 5px;
.taskIndex-title{
height: 100px;
padding: 25px;
margin: 0 12px;
border: 1px solid #ccc;
} }
.taskIndex-title-2{ .taskIndex-title-2{
height: 180px; height: 180px;
padding: 25px; padding: 0 25px;
margin: 0 12px; margin: 0 12px;
border: 1px solid #ccc; box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
border-radius: 5px;
} }
.taskIndex-form{ .taskIndex-form{
border: 1px solid #ccc; box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
margin: 25px 12px; margin: 25px 12px;
border-radius: 5px;
} }
.taskIndex-formHoad{ .taskIndex-formHoad{
width: 100%; width: 100%;
height: 60px; height: 60px;
background-color:#E0E0E0; border-bottom: 1px solid rgba(0, 0, 0, .12);
position: relative; position: relative;
} }
.taskIndex-formHoad h4{ .taskIndex-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;
} }
.taskIndex-formHoad h4 span{ .taskIndex-formHoad h4 span{
color:#363636; color:#363636;
font-size: 14px; font-size: 14px;
z-index: 11; z-index: 11;
} }
.taskIndex-input-box{ .taskIndex-input-box{
width:100%; width:100%;
height :35px; height :60px;
margin: 20px; margin: 20px;
} }
.border-bottom{ .border-bottom{
border-bottom: 1px solid #ccc; border-bottom: 1px solid #ccc;
} }
.project-status{ .project-status{
margin: 20px 12px; margin: 20px 12px;
padding-bottom: 50px; padding-bottom: 50px;
border: 1px solid #ccc; box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
} }
.project-box{ .project-box{
background-color: #ccc; border-bottom:1px solid rgba(0, 0, 0, .12);
height: 40px; height: 50px;
line-height: 40px; line-height: 50px;
text-align: center; text-align: center;
} }
.project-box-2{ .project-box-2{
...@@ -432,7 +455,6 @@ ...@@ -432,7 +455,6 @@
line-height: 30px; line-height: 30px;
list-style:none; list-style:none;
} }
</style> </style>
\ No newline at end of file
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