Skip to content

蔡永松 / fontweb-dc

Go to a project
Toggle navigation
Toggle navigation pinning
5b42ad12 by 焦小希
Options

增加督办，查询页面

1 parent 15594c13
Inline Side-by-side
Showing 4 changed files with 986 additions and 0 deletions
var self = new Vue({
el:'#app',
data(){
return {
search:'',
// 表格数据
tabaledata:[
{
xh:'1',
ajmc:'关于拍卖出让87.608亩国有建设用地使用权的请示（GX3-18-25）',
anlx:'批后',
zrdw:'高新分局',
ssqy:'高新',
ljr:'向小华',
djsh:'2020-07-05',
jssi:'2020-07-05',
},
{
xh:'2',
ajmc:'关于拍卖出让87.608亩国有建设用地使用权的请示（GX3-18-25）',
anlx:'批后',
zrdw:'高新分局',
ssqy:'高新',
ljr:'向小华',
djsh:'2020-07-05',
jssi:'2020-07-05',
},
{
xh:'3',
ajmc:'关于拍卖出让87.608亩国有建设用地使用权的请示（GX3-18-25）',
anlx:'批后',
zrdw:'高新分局',
ssqy:'高新',
ljr:'向小华',
djsh:'2020-07-05',
jssi:'2020-07-05',
},
{
xh:'4',
ajmc:'关于拍卖出让87.608亩国有建设用地使用权的请示（GX3-18-25）',
anlx:'批后',
zrdw:'高新分局',
ssqy:'高新',
ljr:'向小华',
djsh:'2020-07-05',
jssi:'2020-07-05',
},
{
xh:'5',
ajmc:'关于拍卖出让87.608亩国有建设用地使用权的请示（GX3-18-25）',
anlx:'批后',
zrdw:'高新分局',
ssqy:'高新',
ljr:'向小华',
djsh:'2020-07-05',
jssi:'2020-07-05',
},
],
isActive:1,
}
},
methods:{
handleSizeChange(){
},
handleCurrentChange(){},
click(val){
this.isActive = val
}
}
})
\ No newline at end of file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>批后管理待办</title>
<script src="/frontweb/common/js/config.js"></script>
<link rel="stylesheet" href="/frontweb/libs/element-ui/lib-master/theme-chalk/index.css"/>
<script src="/frontweb/libs/vue/vue.js"></script>
<script src="/frontweb/libs/element/index.js"></script>
<script src="/frontweb/libs/axios/axios.min.js"></script>
<style>
.contanier{
margin:10px 10px 0 10px;
height:100%;
background: #fff;
}
.search{
display: flex;
justify-content: space-between;
background: #ccc;
}
.opt{
display: flex;
width:50%;
justify-content: space-around;
align-items: center;
}
.optspan{
cursor: pointer;
}
.optspan:hover{
color:#05C6B4
}
.select{
color:#05C6B4;
border-bottom:5px solid #05C6B4
}
.el-table{
margin-top: 20px;
}
.el-table th {
background:#ccc !important;
}
.el-table tbody tr:hover>td {
background-color:#ccc!important
}
.block{
float: right;
background: #fff;
margin-top: 10px;
}
</style>
</head>
<body>
<div id="app">
<div class='contanier'>
<div class="search">
<div class="opt">
<span class="optspan" :class="isActive==1? 'select':''" @click="click(1)">全部</span>
<span class="optspan" :class="isActive==2? 'select':''" @click="click(2)">批后</span>
<span class="optspan" :class="isActive==3? 'select':''" @click="click(3)">巡查</span>
<span class="optspan" :class="isActive==4? 'select':''" @click="click(4)">举报</span>
<span class="optspan" :class="isActive==5? 'select':''" @click="click(5)">转办</span>
</div>
<div style="float: right">
<el-input style="width:300px;margin-right: 20px" placeholder="请输入搜索的内容"></el-input>
<el-button type="success" size="mini" icon="el-icon-search">查询</el-button>
</div>
</div>
<!-- 表格区域-->
<el-table
v-if="isActive==1"
:data="tabaledata"
style="width: 100%;"
height="100%"
border
stripe
:default-sort = "{prop: 'xh', order: 'ascending'}"
>
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
prop="xh"
label="序号"
width="55">
</el-table-column>
<el-table-column
prop="ajmc"
width="300"
label="案件名称"
align="center"
></el-table-column>
<el-table-column
prop="anlx"
label="案件类型"
align="center"
width="100"
>
</el-table-column>
<el-table-column
prop="zrdw"
label="责任单位"
align="center"
width="200"
>
</el-table-column>
<el-table-column
prop="ssqy"
label="所属区域"
align="center"
width="200"
>
</el-table-column>
<el-table-column
prop="ljr"
label="来件人"
align="center"
width="400"
>
</el-table-column>
<el-table-column
prop="djsh"
label="登记时间"
align="center"
width="200"
>
</el-table-column>
<el-table-column
prop="jssi"
label="接受时间"
align="center"
width="200"
>
</el-table-column>
</el-table>
<el-table
v-if="isActive==2"
:data="tabaledata"
style="width: 100%;"
height="100%"
border
stripe
:default-sort = "{prop: 'xh', order: 'ascending'}"
>
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
prop="xh"
label="序号"
width="55">
</el-table-column>
<el-table-column
prop="ajmc"
width="300"
label="案件名称"
align="center"
></el-table-column>
<el-table-column
prop="anlx"
label="案件类型"
align="center"
width="100"
>
</el-table-column>
<el-table-column
prop="zrdw"
label="责任单位"
align="center"
width="200"
>
</el-table-column>
<el-table-column
prop="ssqy"
label="所属区域"
align="center"
width="200"
>
</el-table-column>
<el-table-column
prop="ljr"
label="来件人"
align="center"
width="400"
>
</el-table-column>
<el-table-column
prop="djsh"
label="登记时间"
align="center"
width="200"
>
</el-table-column>
<el-table-column
prop="jssi"
label="接受时间"
align="center"
width="200"
>
</el-table-column>
</el-table>
<el-table
v-if="isActive==3"
:data="tabaledata"
style="width: 100%;"
height="100%"
border
stripe
:default-sort = "{prop: 'xh', order: 'ascending'}"
>
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
prop="xh"
label="序号"
width="55">
</el-table-column>
<el-table-column
prop="ajmc"
width="300"
label="案件名称"
align="center"
></el-table-column>
<el-table-column
prop="anlx"
label="案件类型"
align="center"
width="100"
>
</el-table-column>
<el-table-column
prop="zrdw"
label="责任单位"
align="center"
width="200"
>
</el-table-column>
<el-table-column
prop="ssqy"
label="所属区域"
align="center"
width="200"
>
</el-table-column>
<el-table-column
prop="ljr"
label="来件人"
align="center"
width="400"
>
</el-table-column>
<el-table-column
prop="djsh"
label="登记时间"
align="center"
width="200"
>
</el-table-column>
<el-table-column
prop="jssi"
label="接受时间"
align="center"
width="200"
>
</el-table-column>
</el-table>
<el-table
v-if="isActive==4"
:data="tabaledata"
style="width: 100%;"
height="100%"
border
stripe
:default-sort = "{prop: 'xh', order: 'ascending'}"
>
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
prop="xh"
label="序号"
width="55">
</el-table-column>
<el-table-column
prop="ajmc"
width="300"
label="案件名称"
align="center"
></el-table-column>
<el-table-column
prop="anlx"
label="案件类型"
align="center"
width="100"
>
</el-table-column>
<el-table-column
prop="zrdw"
label="责任单位"
align="center"
width="200"
>
</el-table-column>
<el-table-column
prop="ssqy"
label="所属区域"
align="center"
width="200"
>
</el-table-column>
<el-table-column
prop="ljr"
label="来件人"
align="center"
width="400"
>
</el-table-column>
<el-table-column
prop="djsh"
label="登记时间"
align="center"
width="200"
>
</el-table-column>
<el-table-column
prop="jssi"
label="接受时间"
align="center"
width="200"
>
</el-table-column>
</el-table>
<el-table
v-if="isActive==5"
:data="tabaledata"
style="width: 100%;"
height="100%"
border
stripe
:default-sort = "{prop: 'xh', order: 'ascending'}"
>
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
prop="xh"
label="序号"
width="55">
</el-table-column>
<el-table-column
prop="ajmc"
width="300"
label="案件名称"
align="center"
></el-table-column>
<el-table-column
prop="anlx"
label="案件类型"
align="center"
width="100"
>
</el-table-column>
<el-table-column
prop="zrdw"
label="责任单位"
align="center"
width="200"
>
</el-table-column>
<el-table-column
prop="ssqy"
label="所属区域"
align="center"
width="200"
>
</el-table-column>
<el-table-column
prop="ljr"
label="来件人"
align="center"
width="400"
>
</el-table-column>
<el-table-column
prop="djsh"
label="登记时间"
align="center"
width="200"
>
</el-table-column>
<el-table-column
prop="jssi"
label="接受时间"
align="center"
width="200"
>
</el-table-column>
</el-table>
<!-- 分页区域-->
<div class="block">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="1"
:page-sizes="[2, 3, 5]"
:page-size="4"
layout="total, sizes, prev, pager, next, jumper"
:total="8">
</el-pagination>
</div>
</div>
</div>
<script src="./js/widget.js"></script>
</body>
</html>
\ No newline at end of file
var self = new Vue({
el:'#app',
data(){
return {
search:'',
// 表格数据
tabaledata:[
{
xh:'1',
ajmc:'关于拍卖出让87.608亩国有建设用地使用权的请示（GX3-18-25）',
anlx:'批后',
zrdw:'高新分局',
ssqy:'高新',
ljr:'向小华',
djsh:'2020-07-05',
jssi:'2020-07-05',
},
{
xh:'2',
ajmc:'关于拍卖出让87.608亩国有建设用地使用权的请示（GX3-18-25）',
anlx:'批后',
zrdw:'高新分局',
ssqy:'高新',
ljr:'向小华',
djsh:'2020-07-05',
jssi:'2020-07-05',
},
{
xh:'3',
ajmc:'关于拍卖出让87.608亩国有建设用地使用权的请示（GX3-18-25）',
anlx:'批后',
zrdw:'高新分局',
ssqy:'高新',
ljr:'向小华',
djsh:'2020-07-05',
jssi:'2020-07-05',
},
{
xh:'4',
ajmc:'关于拍卖出让87.608亩国有建设用地使用权的请示（GX3-18-25）',
anlx:'批后',
zrdw:'高新分局',
ssqy:'高新',
ljr:'向小华',
djsh:'2020-07-05',
jssi:'2020-07-05',
},
{
xh:'5',
ajmc:'关于拍卖出让87.608亩国有建设用地使用权的请示（GX3-18-25）',
anlx:'批后',
zrdw:'高新分局',
ssqy:'高新',
ljr:'向小华',
djsh:'2020-07-05',
jssi:'2020-07-05',
},
],
isActive:1,
}
},
methods:{
handleSizeChange(){
},
handleCurrentChange(){},
click(val){
this.isActive = val
}
}
})
\ No newline at end of file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>批后管理待办</title>
<script src="/frontweb/common/js/config.js"></script>
<link rel="stylesheet" href="/frontweb/libs/element-ui/lib-master/theme-chalk/index.css"/>
<script src="/frontweb/libs/vue/vue.js"></script>
<script src="/frontweb/libs/element/index.js"></script>
<script src="/frontweb/libs/axios/axios.min.js"></script>
<style>
.contanier{
margin:10px 10px 0 10px;
height:100%;
background: #fff;
}
.search{
display: flex;
justify-content: space-between;
background: #ccc;
}
.opt{
display: flex;
width:50%;
justify-content: space-around;
align-items: center;
}
.optspan{
cursor: pointer;
}
.optspan:hover{
color:#05C6B4
}
.select{
color:#05C6B4;
border-bottom:5px solid #05C6B4
}
.el-table{
margin-top: 20px;
}
.el-table th {
background:#ccc !important;
}
.el-table tbody tr:hover>td {
background-color:#ccc!important
}
.block{
float: right;
background: #fff;
margin-top: 10px;
}
</style>
</head>
<body>
<div id="app">
<div class='contanier'>
<div class="search">
<div class="opt">
<span class="optspan" :class="isActive==1? 'select':''" @click="click(1)">全部</span>
<span class="optspan" :class="isActive==2? 'select':''" @click="click(2)">批后</span>
<span class="optspan" :class="isActive==3? 'select':''" @click="click(3)">巡查</span>
<span class="optspan" :class="isActive==4? 'select':''" @click="click(4)">举报</span>
<span class="optspan" :class="isActive==5? 'select':''" @click="click(5)">转办</span>
</div>
<div style="float: right">
<el-input style="width:300px;margin-right: 20px" placeholder="请输入搜索的内容"></el-input>
<el-button type="success" size="mini" icon="el-icon-search">查询</el-button>
</div>
</div>
<!-- 表格区域-->
<el-table
v-if="isActive==1"
:data="tabaledata"
style="width: 100%;"
height="100%"
border
stripe
:default-sort = "{prop: 'xh', order: 'ascending'}"
>
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
prop="xh"
label="序号"
width="55">
</el-table-column>
<el-table-column
prop="ajmc"
width="300"
label="案件名称"
align="center"
></el-table-column>
<el-table-column
prop="anlx"
label="案件类型"
align="center"
width="100"
>
</el-table-column>
<el-table-column
prop="zrdw"
label="责任单位"
align="center"
width="200"
>
</el-table-column>
<el-table-column
prop="ssqy"
label="所属区域"
align="center"
width="200"
>
</el-table-column>
<el-table-column
prop="ljr"
label="来件人"
align="center"
width="400"
>
</el-table-column>
<el-table-column
prop="djsh"
label="登记时间"
align="center"
width="200"
>
</el-table-column>
<el-table-column
prop="jssi"
label="接受时间"
align="center"
width="200"
>
</el-table-column>
</el-table>
<el-table
v-if="isActive==2"
:data="tabaledata"
style="width: 100%;"
height="100%"
border
stripe
:default-sort = "{prop: 'xh', order: 'ascending'}"
>
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
prop="xh"
label="序号"
width="55">
</el-table-column>
<el-table-column
prop="ajmc"
width="300"
label="案件名称"
align="center"
></el-table-column>
<el-table-column
prop="anlx"
label="案件类型"
align="center"
width="100"
>
</el-table-column>
<el-table-column
prop="zrdw"
label="责任单位"
align="center"
width="200"
>
</el-table-column>
<el-table-column
prop="ssqy"
label="所属区域"
align="center"
width="200"
>
</el-table-column>
<el-table-column
prop="ljr"
label="来件人"
align="center"
width="400"
>
</el-table-column>
<el-table-column
prop="djsh"
label="登记时间"
align="center"
width="200"
>
</el-table-column>
<el-table-column
prop="jssi"
label="接受时间"
align="center"
width="200"
>
</el-table-column>
</el-table>
<el-table
v-if="isActive==3"
:data="tabaledata"
style="width: 100%;"
height="100%"
border
stripe
:default-sort = "{prop: 'xh', order: 'ascending'}"
>
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
prop="xh"
label="序号"
width="55">
</el-table-column>
<el-table-column
prop="ajmc"
width="300"
label="案件名称"
align="center"
></el-table-column>
<el-table-column
prop="anlx"
label="案件类型"
align="center"
width="100"
>
</el-table-column>
<el-table-column
prop="zrdw"
label="责任单位"
align="center"
width="200"
>
</el-table-column>
<el-table-column
prop="ssqy"
label="所属区域"
align="center"
width="200"
>
</el-table-column>
<el-table-column
prop="ljr"
label="来件人"
align="center"
width="400"
>
</el-table-column>
<el-table-column
prop="djsh"
label="登记时间"
align="center"
width="200"
>
</el-table-column>
<el-table-column
prop="jssi"
label="接受时间"
align="center"
width="200"
>
</el-table-column>
</el-table>
<el-table
v-if="isActive==4"
:data="tabaledata"
style="width: 100%;"
height="100%"
border
stripe
:default-sort = "{prop: 'xh', order: 'ascending'}"
>
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
prop="xh"
label="序号"
width="55">
</el-table-column>
<el-table-column
prop="ajmc"
width="300"
label="案件名称"
align="center"
></el-table-column>
<el-table-column
prop="anlx"
label="案件类型"
align="center"
width="100"
>
</el-table-column>
<el-table-column
prop="zrdw"
label="责任单位"
align="center"
width="200"
>
</el-table-column>
<el-table-column
prop="ssqy"
label="所属区域"
align="center"
width="200"
>
</el-table-column>
<el-table-column
prop="ljr"
label="来件人"
align="center"
width="400"
>
</el-table-column>
<el-table-column
prop="djsh"
label="登记时间"
align="center"
width="200"
>
</el-table-column>
<el-table-column
prop="jssi"
label="接受时间"
align="center"
width="200"
>
</el-table-column>
</el-table>
<el-table
v-if="isActive==5"
:data="tabaledata"
style="width: 100%;"
height="100%"
border
stripe
:default-sort = "{prop: 'xh', order: 'ascending'}"
>
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
prop="xh"
label="序号"
width="55">
</el-table-column>
<el-table-column
prop="ajmc"
width="300"
label="案件名称"
align="center"
></el-table-column>
<el-table-column
prop="anlx"
label="案件类型"
align="center"
width="100"
>
</el-table-column>
<el-table-column
prop="zrdw"
label="责任单位"
align="center"
width="200"
>
</el-table-column>
<el-table-column
prop="ssqy"
label="所属区域"
align="center"
width="200"
>
</el-table-column>
<el-table-column
prop="ljr"
label="来件人"
align="center"
width="400"
>
</el-table-column>
<el-table-column
prop="djsh"
label="登记时间"
align="center"
width="200"
>
</el-table-column>
<el-table-column
prop="jssi"
label="接受时间"
align="center"
width="200"
>
</el-table-column>
</el-table>
<!-- 分页区域-->
<div class="block">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="1"
:page-sizes="[2, 3, 5]"
:page-size="4"
layout="total, sizes, prev, pager, next, jumper"
:total="8">
</el-pagination>
</div>
</div>
</div>
<script src="./js/widget.js"></script>
</body>
</html>
\ No newline at end of file