<template>
|
<div class="lawAndReg">
|
<basic-container>
|
<div>
|
<el-button round @click="addLawList" type="primary" icon="el-icon-plus">新增执法清单</el-button>
|
</div>
|
<div class="law-search-box">
|
<el-row :gutter="20">
|
<el-col :span="5">
|
<el-input v-model.trim="searchForm.projectName" @input="searchHadleBtn" clearable suffix-icon="el-icon-search" placeholder="输入项目名称"></el-input>
|
</el-col>
|
<el-col :span="5">
|
<el-input v-model.trim="searchForm.keyword" @input="searchHadleBtn" clearable suffix-icon="el-icon-search" placeholder="输入违法关键字"></el-input>
|
</el-col>
|
<el-col :span="5">
|
<el-select clearable @change="searchTypeChange" v-model="searchForm.type" placeholder="请选择执法类别" style="width: 100%">
|
<!--<el-option
|
v-for="item in lawTypeOptions"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value">
|
</el-option>-->
|
<el-option label="行政处罚" value="0"></el-option>
|
<el-option label="行政强制" value="1"></el-option>
|
</el-select>
|
</el-col>
|
<el-col :span="5">
|
<el-select clearable @change="searchThemeChange" v-model="searchForm.beforeDeptDictDataName" placeholder="请选择所属领域" style="width: 100%">
|
<el-option
|
v-for="item in lawThemeOptions"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
</el-col>
|
</el-row>
|
</div>
|
<div class="law-table-main">
|
<el-table
|
v-loading="loading"
|
ref="table"
|
:height="tableHeight"
|
:data="tableData"
|
border
|
style="width: 100%">
|
<el-table-column
|
label="序号"
|
type="index"
|
min-width="40"
|
align="center"
|
header-align="center">
|
</el-table-column>
|
<el-table-column
|
prop="projectName"
|
label="项目名称"
|
min-width="180"
|
align="left"
|
show-overflow-tooltip
|
header-align="center">
|
</el-table-column>
|
<el-table-column
|
prop="keyword"
|
label="违法关键字"
|
min-width="100"
|
align="left"
|
header-align="center">
|
</el-table-column>
|
<el-table-column
|
prop="type"
|
label="执法类别"
|
:formatter="formatType"
|
min-width="100"
|
align="left"
|
header-align="center">
|
</el-table-column>
|
<el-table-column
|
prop="beforeDeptDictDataName"
|
label="所属领域"
|
min-width="160">
|
</el-table-column>
|
<!--<el-table-column
|
prop="typeDictdataName"
|
label="法规类别"
|
width="350">
|
</el-table-column>-->
|
<el-table-column
|
prop="lawlist"
|
label="执法依据"
|
min-width="220"
|
align="left"
|
header-align="center">
|
<template slot-scope="scope">
|
<div v-for="item in scope.row.lawlist" style="display: flex;justify-content: space-between;">
|
<span>{{item.lawName}}</span>
|
<span>{{item.num}}</span>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="createTime"
|
label="录入日期"
|
min-width="100"
|
align="left"
|
header-align="center">
|
</el-table-column>
|
<el-table-column
|
fixed="right"
|
align="right"
|
min-width="90"
|
label="操作"
|
header-align="center">
|
<template slot-scope="scope">
|
<el-button @click="seeHandleClick(scope.$index,scope.row)" type="text" size="small"><img src="../../../assets/lawImg/seeIcon.png" alt=""></el-button>
|
<el-button @click="deleteHandleClick(scope.$index,scope.row)" type="text" size="small"><img src="../../../assets/lawImg/deleteIconRed.png" alt=""></el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
<div class="avue-crud__pagination">
|
<el-pagination
|
@size-change="sizeChangeHandle"
|
@current-change="currentChangeHandle"
|
:current-page="page.current"
|
:page-sizes="[10, 20, 50, 100]"
|
:page-size="page.size"
|
:total="page.total"
|
background
|
layout="total, sizes, prev, pager, next, jumper">
|
</el-pagination>
|
</div>
|
</basic-container>
|
<div class="qingdan-detail">
|
<el-dialog :visible.sync="lawListDetailShow" width="800px" v-dialogDrag>
|
<div>
|
<div class="law-reason-main">
|
<el-row :gutter="4">
|
<el-col :span="14">
|
<div class="law-name law-ra-left">
|
<h1>执法事项名称</h1>
|
</div>
|
<div class="law-content">
|
<h1>{{lawListDetail.projectName}}</h1>
|
</div>
|
</el-col>
|
<el-col :span="4">
|
<div class="law-name">
|
<h1>执法类别</h1>
|
</div>
|
<div class="law-content">
|
<h1>{{lawListDetail.type}}</h1>
|
</div>
|
</el-col>
|
<el-col :span="6">
|
<div class="law-name law-ra-right">
|
<h1>原所属领域</h1>
|
</div>
|
<div class="law-content">
|
<h1>{{lawListDetail.beforeDeptDictDataName}}</h1>
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
<div class="law-basic-main">
|
<el-row>
|
<el-col :span="24">
|
<div v-for="(lawChild,index) in lawMainList" class="law-basic-block">
|
<div class="law-baic-name">
|
<h1>{{lawChild.lawName}}</h1>
|
</div>
|
<div v-for="(item,i) in lawChild.contentArr" class="law-tiaokuan">
|
<div class="law-tiaokuan-title">
|
<h1>{{item.lawTiaoName}}</h1>
|
</div>
|
<div class="law-tiaokuan-main">
|
<h1>{{item.lawTiaoContent}}</h1>
|
</div>
|
</div>
|
</div>
|
<!--<div class="law-basic-block">
|
<div class="law-baic-name">
|
<h1>中华人民共和国招投标法</h1>
|
</div>
|
<div class="law-tiaokuan">
|
<div class="law-tiaokuan-title">
|
<h1>第一条</h1>
|
</div>
|
<div class="law-tiaokuan-main">
|
<h1>中华人民共和国招投标法中华人民共和国招投标法中华人民共和国招投标法中华人民共和国招投标法中华人民共和国招投标法</h1>
|
</div>
|
</div>
|
<div class="law-tiaokuan">
|
<div class="law-tiaokuan-title">
|
<h1>第一条</h1>
|
</div>
|
<div class="law-tiaokuan-main">
|
<h1>中华人民共和国招投标法中华人民共和国招投标法中华人民共和国招投标法中华人民共和国招投标法中华人民共和国招投标法</h1>
|
</div>
|
</div>
|
</div>-->
|
</el-col>
|
</el-row>
|
|
|
</div>
|
</div>
|
</el-dialog>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import {pageList,selectLaw,deleteLaw} from '@/api/lawList/lawList';
|
import {remote} from "@/api/admin/dict"
|
export default {
|
name: "lawList",
|
data() {
|
return {
|
loading:false,
|
tableHeight: 500,
|
lawListDetail:{ //执法详情弹框
|
projectName:'',
|
type:'',
|
beforeDeptDictDataName:''
|
},
|
lawMainList:[], // 执法详情弹框
|
lawThemeOptions:{}, //所属领域下拉框
|
lawListDetailShow:false, //执法清单弹框
|
searchForm: {
|
projectName:'',
|
type:'',
|
beforeDeptDictDataName:'',
|
keyword:''
|
},
|
page:{
|
size:20,
|
total:0,
|
current: 1,
|
},
|
tableData: [],
|
}
|
},
|
created() {
|
this.pageList()
|
this.init()
|
this.tableHeight = window.innerHeight - 320
|
},
|
methods: {
|
pageList() {
|
this.loading = true
|
pageList(Object.assign(this.page,this.searchForm)).then(res => {
|
this.loading = false
|
this.tableData = res.data.data.records
|
this.page.total = res.data.data.total
|
this.$nextTick(() => {
|
this.$refs.table.doLayout()
|
})
|
}).catch(() => {
|
this.loading = false
|
})
|
},
|
init() {
|
remote('before_dept').then(res => {
|
this.lawThemeOptions = res.data.data
|
})
|
},
|
searchHadleBtn() { //搜索项目名称
|
this.pageList()
|
},
|
searchTypeChange() { //搜索执法类别
|
this.pageList()
|
},
|
searchThemeChange() { //搜索所属领域
|
this.pageList()
|
},
|
formatType(row, column) {
|
if(row.type == 0) {
|
return '行政处罚'
|
}else if(row.type == 1){
|
return '行政强制'
|
}
|
|
},
|
|
|
addLawList() { //新增执法清单
|
this.$router.push('/addLawList')
|
},
|
// 每页数
|
sizeChangeHandle (val) {
|
this.page.size = val
|
this.page.current = 1
|
this.pageList()
|
},
|
// 当前页
|
currentChangeHandle (val) {
|
this.page.current = val
|
this.pageList()
|
|
},
|
//查看执法清单弹框
|
seeHandleClick(index,row) {
|
this.lawListDetailShow = true
|
this.lawListDetail.projectName = row.projectName
|
if(row.type == 0) {
|
this.lawListDetail.type = '行政处罚'
|
}else if(row.type == 1) {
|
this.lawListDetail.type = '行政强制'
|
}
|
this.lawListDetail.beforeDeptDictDataName = row.beforeDeptDictDataName
|
selectLaw(row.id).then(res => {
|
this.lawMainList = res.data.data
|
})
|
},
|
//删除table行
|
deleteHandleClick(index,row) {
|
console.log(row)
|
// this.$confirm(`是否确认删除${row.projectName}的数据`)
|
this.$confirm(`是否确认删除该条数据`, '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
deleteLaw(row.id).then(res => {
|
this.pageList()
|
this.$message.success(res.data.msg || '删除成功')
|
})
|
}).catch(() => {
|
this.$message({
|
type: 'info',
|
message: '已取消删除'
|
});
|
});
|
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
h1,h2,h3,h4,h5{
|
font-weight: normal;
|
font-size: 12px;
|
}
|
.law-search-box {
|
margin: 15px 0 10px 0;
|
}
|
.law-name{
|
background-color: #414ED0;
|
}
|
.law-ra-left{
|
border-top-left-radius: 5px;
|
}
|
.law-ra-right{
|
border-top-right-radius: 5px;
|
}
|
.law-name h1{
|
text-align: center;
|
color: #fff;
|
font-size: 13px;
|
padding:6px 0;
|
}
|
.law-content{
|
background-color: #EFF3FB;
|
height: 100px;
|
padding:6px;
|
box-sizing: border-box;
|
}
|
.law-content h1{
|
font-size: 12px;
|
color: #666;
|
}
|
.law-tiaokuan{
|
display: flex;
|
margin-top: 4px;
|
}
|
.law-basic-main{
|
margin-top: 20px;
|
}
|
.law-basic-block{
|
margin-top: 4px;
|
}
|
.law-baic-name{
|
background-color: #EFF3FB;
|
padding:6px 0;
|
}
|
.law-tiaokuan-title,.law-tiaokuan-main{
|
background-color: #EFF3FB;
|
padding: 0 10px;
|
}
|
.law-tiaokuan-title{
|
width: 30%;
|
}
|
.law-tiaokuan-title h1{
|
text-align: right;
|
}
|
.law-tiaokuan-main{
|
width: calc(70% - 4px);
|
margin-left: 4px;
|
}
|
.law-baic-name h1{
|
color: #414ED0;
|
font-weight: 700;
|
padding-left: 10px;
|
}
|
</style>
|
|
<style lang="scss" scoped>
|
::v-deep{
|
.el-form-item--mini.el-form-item, .el-form-item--small.el-form-item{
|
margin-bottom: 10px;
|
}
|
.el-input--small .el-input__inner{
|
border-radius: 20px;
|
}
|
.el-dialog {
|
margin-top: 4vh!important;
|
background-color: #fff;
|
max-height: 88%!important;
|
/*display: grid!important;*/
|
display: flex;
|
flex-direction: column;
|
}
|
|
.el-dialog__body {
|
height: calc(100% - 34px);
|
overflow: auto;
|
flex: auto;
|
}
|
}
|
</style>
|
