<template>
|
<div class="lawAndReg">
|
<basic-container style="height: 100%">
|
<div class="lawAndReg-top">
|
<div class="wel-top-block">
|
<div class="wel-block-left">
|
<img src="../../../../src/assets/lawImg/welIndexIcon1.png" alt="">
|
</div>
|
<div class="wel-block-right">
|
<h1>{{falv}}</h1>
|
<!-- <h1>245</h1>-->
|
<h2>法律</h2>
|
</div>
|
</div>
|
<div class="wel-top-block">
|
<div class="wel-block-left">
|
<img src="../../../../src/assets/lawImg/welIndexIcon1.png" alt="">
|
</div>
|
<div class="wel-block-right">
|
<h1>{{fagui}}</h1>
|
<!-- <h1>231</h1>-->
|
<h2>法规</h2>
|
</div>
|
</div>
|
<div class="wel-top-block">
|
<div class="wel-block-left">
|
<img src="../../../../src/assets/lawImg/welIndexIcon1.png" alt="">
|
</div>
|
<div class="wel-block-right">
|
<h1>{{guizhang}}</h1>
|
<!-- <h1>53</h1>-->
|
<h2>规章</h2>
|
</div>
|
</div>
|
</div>
|
<div class="law-search-box">
|
<el-row :gutter="20">
|
<el-button round @click="addLawBtn" type="primary" icon="el-icon-plus">新增法律</el-button>
|
<el-col :span="6">
|
<el-input clearable v-model.trim="searchForm.name" @input="searchHadleBtn" suffix-icon="el-icon-search"
|
placeholder="请输入内容"></el-input>
|
</el-col>
|
<el-col :span="6">
|
<el-select clearable @change="searchTypeChange" v-model="searchForm.type" placeholder="请选择法律类别"
|
style="width: 100%">
|
<el-option
|
v-for="item in lawTypeOptions"
|
:key="item.id"
|
:label="item.label"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
</el-col>
|
<div class="checkbox-re-box">
|
<el-checkbox @change="checkedChange" :checked="searchForm.status == '0'?true:false"
|
v-model="searchForm.status" true-label='0' false-label='1'>有效法律
|
</el-checkbox>
|
</div>
|
</el-row>
|
</div>
|
<div class="law-table-main">
|
<el-table
|
ref="table"
|
:height="tableHeight"
|
:data="tableData"
|
v-loading="loading"
|
border
|
style="width: 100%">
|
<el-table-column
|
label="序号"
|
type="index"
|
width="60"
|
align="center"
|
header-align="center">
|
</el-table-column>
|
<el-table-column
|
prop="name"
|
label="法律名称"
|
min-width="30%"
|
align="left"
|
header-align="center">
|
</el-table-column>
|
<el-table-column
|
prop="author"
|
label="颁发单位"
|
min-width="22%"
|
align="left"
|
header-align="center">
|
</el-table-column>
|
<el-table-column
|
prop="effectiveTime"
|
label="生效日期"
|
min-width="18%"
|
align="left"
|
header-align="center">
|
</el-table-column>
|
<el-table-column
|
prop="typeDictdataName"
|
label="法律类别"
|
min-width="16%"
|
align="left"
|
header-align="center">
|
</el-table-column>
|
<el-table-column
|
prop="count"
|
label="关联执法清单"
|
min-width="13%"
|
align="left"
|
header-align="center">
|
</el-table-column>
|
<el-table-column
|
:formatter="formatStatus"
|
prop="status"
|
label="生效状态"
|
min-width="16%"
|
align="left"
|
header-align="center">
|
</el-table-column>
|
<el-table-column
|
prop="publishTime"
|
label="更新日期"
|
min-width="18%"
|
align="left"
|
header-align="center">
|
</el-table-column>
|
<el-table-column
|
min-width="20%"
|
align="right"
|
header-align="center"
|
fixed="right"
|
label="操作">
|
<template slot-scope="scope">
|
<el-button @click="seeHandleClick(scope.row)" type="text" size="small"><img
|
src="../../../assets/lawImg/searchNew.png" alt=""></el-button>
|
<el-button @click="editorLawClick(scope.row)" type="text" size="small"><img
|
src="../../../assets/lawImg/seeIcon.png" alt=""></el-button>
|
<el-button @click="editorHandleClick(scope.row)" type="text" size="small"><img
|
src="../../../assets/lawImg/edtiorNew.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
|
v-dialogDrag
|
:visible.sync="addLawShow"
|
width="500px">
|
<el-form ref="lawForm" :model="lawForm" :rules="lawRules" label-width="80px">
|
<el-form-item label="法律名称" prop="name">
|
<el-input v-model="lawForm.name" placeholder="请输入法律名称"></el-input>
|
</el-form-item>
|
<el-form-item label="颁发机构" prop="author">
|
<el-input v-model="lawForm.author" placeholder="请输入颁发机构"></el-input>
|
</el-form-item>
|
<el-form-item label="颁发场合" prop="place">
|
<el-input v-model="lawForm.place" placeholder="请输入颁发场合"></el-input>
|
</el-form-item>
|
<el-form-item label="颁发日期" prop="publishTime">
|
<!--<el-input placeholder="请输入颁发日期"></el-input>-->
|
<el-date-picker
|
v-model="lawForm.publishTime"
|
type="date"
|
placeholder="请输入颁发日期">
|
</el-date-picker>
|
</el-form-item>
|
<el-form-item label="施行日期" prop="effectiveTime">
|
<!--<el-input placeholder="请输入施行日期"></el-input>-->
|
<el-date-picker
|
v-model="lawForm.effectiveTime"
|
type="date"
|
placeholder="请输入施行日期">
|
</el-date-picker>
|
</el-form-item>
|
<el-form-item label="法律类别" prop="typeDictdataName">
|
<!--<el-input placeholder="请输入施行日期"></el-input>-->
|
<el-select v-model="lawForm.typeDictdataName" placeholder="请选择法律类别">
|
<el-option
|
v-for="item in lawTypeOptions"
|
:key="item.id"
|
:label="item.label"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="是否生效" prop="status">
|
<el-radio-group v-model="lawForm.status">
|
<el-radio :label="0">是</el-radio>
|
<el-radio :label="1">否</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item label-width="0px">
|
<div class="tijiao-box">
|
<el-button type="primary" @click="lawSubmit('lawForm')">提交</el-button>
|
</div>
|
</el-form-item>
|
</el-form>
|
</el-dialog>
|
</div>
|
<!--查看法律详情弹框-->
|
<div class="law-content-detail">
|
<el-dialog
|
v-dialogDrag
|
:visible.sync="lawCotentShow"
|
width="800px">
|
<div class="yulanqu-content">
|
<h1 class="yulan-biaoti">{{ lawName }}</h1>
|
<h2 class="zhixing-time">{{ place }}，{{ effectiveTime }}起执行</h2>
|
<div v-if="detailForm.length > 0" class="yuanlan-block" v-for="(firstChild,index) in this.detailForm">
|
<h1 class="bian-title">{{ firstChild.title }} {{ firstChild.content }}</h1>
|
<div v-for="(secondChild,i) in firstChild.children">
|
<h1 class="zhang-title">{{ secondChild.title }} {{ secondChild.content }}</h1>
|
<div v-for="(thirdChild) in secondChild.children">
|
<h1 class="jie-title">{{ thirdChild.title }} {{ thirdChild.content }}</h1>
|
<div class="yulan-main">
|
<div class="yulan-main-block" v-for="(forthChild) in thirdChild.children">
|
<h1>{{ forthChild.title }} {{ forthChild.content }}</h1>
|
</div>
|
</div>
|
|
</div>
|
</div>
|
</div>
|
<div v-if="detailForm.length == 0" style="text-align: center;margin-top: 20px">暂无数据</div>
|
<!--<div class="yuanlan-block">
|
<h1 class="bian-title">第一编 总 则</h1>
|
<h1 class="zhang-title">第一章 基本规定</h1>
|
<h1 class="jie-title">第一节 民事权利能力和民事行为能力</h1>
|
<div class="yulan-main">
|
<div class="yulan-main-block">
|
<h1>第一条 为了加强城市生活垃圾管理，改善城市市容和环境卫生，根据《中华人民共和国固体废物污染环境防治法》、《城市市容和环境卫生管理条例》等法律、行政法规，制定本办法。</h1>
|
</div>
|
<div class="yulan-main-block">
|
<h1>第二条 为了加强城市生活垃圾管理，改善城市市容和环境卫生，根据《中华人民共和国固体废物污染环境防治法》、《城市市容和环境卫生管理条例》等法律、行政法规，制定本办法。</h1>
|
</div>
|
<div class="yulan-main-block">
|
<h1>第三条 为了加强城市生活垃圾管理，改善城市市容和环境卫生，根据《中华人民共和国固体废物污染环境防治法》、《城市市容和环境卫生管理条例》等法律、行政法规，制定本办法。</h1>
|
</div>
|
</div>
|
</div>
|
<div class="yuanlan-block">
|
<h1 class="bian-title">第一编 总 则</h1>
|
<h1 class="zhang-title">第一章 基本规定</h1>
|
<h1 class="jie-title">第一节 民事权利能力和民事行为能力</h1>
|
<div class="yulan-main">
|
<div class="yulan-main-block">
|
<h1>第一条 为了加强城市生活垃圾管理，改善城市市容和环境卫生，根据《中华人民共和国固体废物污染环境防治法》、《城市市容和环境卫生管理条例》等法律、行政法规，制定本办法。</h1>
|
</div>
|
<div class="yulan-main-block">
|
<h1>第二条 为了加强城市生活垃圾管理，改善城市市容和环境卫生，根据《中华人民共和国固体废物污染环境防治法》、《城市市容和环境卫生管理条例》等法律、行政法规，制定本办法。</h1>
|
</div>
|
<div class="yulan-main-block">
|
<h1>第三条 为了加强城市生活垃圾管理，改善城市市容和环境卫生，根据《中华人民共和国固体废物污染环境防治法》、《城市市容和环境卫生管理条例》等法律、行政法规，制定本办法。</h1>
|
</div>
|
</div>
|
</div>-->
|
</div>
|
</el-dialog>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import {pageList, saveOrUpdate, getLawInfo, getTree, getLawCount} from '@/api/lawAndReg/lawAndReg'
|
import {remote} from "@/api/admin/dict"
|
|
export default {
|
name: "lawAndReg",
|
data() {
|
return {
|
tableHeight: 500,
|
loading:false,
|
lawForm: {
|
id: '',
|
name: '',
|
author: '',
|
place: '',
|
status: 0,
|
publishTime: '',
|
effectiveTime: '',
|
typeDictdataName: '',
|
},
|
lawRules: {
|
name: [
|
{required: true, message: '法律名称不能为空', trigger: 'blur'},
|
],
|
author: [
|
{required: true, message: '颁发机构不能为空', trigger: 'blur'},
|
],
|
place: [
|
{required: true, message: '颁发场合不能为空', trigger: 'blur'},
|
],
|
publishTime: [
|
{required: true, message: '颁发日期不能为空', trigger: 'blur'},
|
],
|
effectiveTime: [
|
{required: true, message: '施行日期不能为空', trigger: 'blur'},
|
],
|
typeDictdataName: [
|
{required: true, message: '法律类别不能为空', trigger: 'blur'},
|
]
|
},
|
lawTypeOptions: [], //法律类别
|
issueDate: '', //颁发日期
|
executeDate: '', //施行日期
|
lawTypeValue: '', // 法律类别
|
addLawShow: false, //执法清单弹框
|
lawCotentShow: false, //查看法律详情弹框
|
page: { // 分页
|
size: 20,
|
total: 0,
|
current: 1,
|
},
|
searchForm: {
|
name: '',
|
type: '',
|
status: '0', //选中0，未选中1
|
},
|
tableData: [],
|
detailForm: [],
|
lawName: '', //法律名称
|
place: '', //颁发场合
|
effectiveTime: '', //生效时间
|
falv: '0',
|
fagui: '0',
|
guizhang: '0'
|
}
|
},
|
created() {
|
this.pageList()
|
this.tableHeight = window.innerHeight - 400
|
remote('law_type').then(res => { //选择执法主体
|
this.lawTypeOptions = res.data.data
|
});
|
this.lawCounts();
|
|
},
|
methods: {
|
pageList() {
|
this.loading = true
|
const obj = Object.assign({}, this.page, this.searchForm);
|
pageList(obj).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
|
})
|
},
|
lawCounts() {
|
getLawCount().then(res => {
|
if (res.data.code == 0) {
|
this.falv = res.data.data.falv;
|
this.fagui = res.data.data.fagui;
|
this.guizhang = res.data.data.guizhang;
|
}
|
})
|
},
|
searchHadleBtn() { //搜索项目名称
|
this.pageList()
|
},
|
searchTypeChange() { //搜索执法类别
|
this.pageList()
|
},
|
checkedChange() { //有效法律切换
|
this.pageList()
|
},
|
formatStatus(row, column) {
|
if (row.status == 0) {
|
return '有效'
|
} else if (row.status == 1) {
|
return '无效'
|
}
|
},
|
//新增法律
|
addLawBtn() {
|
this.addLawShow = true
|
this.$refs.lawForm.resetFields()
|
|
},
|
editorHandleClick(row) { //编辑新增的法律
|
this.lawForm.id = row.id
|
this.addLawShow = true
|
this.lawForm = row
|
},
|
editorLawClick(row) { //编辑法律条款
|
console.log(row, 'row====')
|
this.$router.push({
|
path: '/editLaw',
|
query: {
|
lawName: row.name,
|
place: row.place,
|
effectiveTime: row.effectiveTime,
|
id: row.id
|
}
|
})
|
},
|
//提交新增法律
|
lawSubmit(formName) {
|
this.lawForm.publishTime && (this.lawForm.publishTime = this.moment(this.lawForm.publishTime).format('YYYY-MM-DD'))
|
this.lawForm.effectiveTime && (this.lawForm.effectiveTime = this.moment(this.lawForm.effectiveTime).format('YYYY-MM-DD'))
|
this.$refs[formName].validate((valid) => {
|
if (valid) {
|
saveOrUpdate(this.lawForm).then(res => {
|
this.$message.success(res.data.msg)
|
this.pageList()
|
this.$refs.lawForm.resetFields();
|
this.addLawShow = false
|
})
|
}
|
})
|
},
|
// 每页数
|
sizeChangeHandle(val) {
|
this.page.size = val
|
this.page.current = 1
|
this.pageList()
|
},
|
// 当前页
|
currentChangeHandle(val) {
|
this.page.current = val
|
this.pageList()
|
},
|
//查看法律详情弹框
|
seeHandleClick(row) {
|
this.lawName = row.name
|
this.place = row.place
|
this.effectiveTime = row.effectiveTime
|
this.lawCotentShow = true
|
getTree(row.name).then(res => {
|
this.detailForm = res.data.data
|
})
|
},
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.law-content-detail {
|
.el-dialog__body {
|
height: 600px;
|
overflow-y: auto;
|
}
|
|
.el-card {
|
height: 100%;
|
}
|
}
|
|
</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;
|
}
|
|
.el-card, .el-card__body {
|
height: 100%;
|
}
|
}
|
|
h1, h2, h3, h4, h5 {
|
font-weight: normal;
|
font-size: 12px;
|
}
|
|
.lawAndReg {
|
padding-bottom: 0;
|
height: 100%;
|
|
.lawAndReg-top {
|
width: 100%;
|
display: flex;
|
flex-wrap: wrap;
|
|
.wel-top-block {
|
width: calc(33.3% - 40px);
|
height: 110px;
|
background: #ffffff;
|
border-radius: 40px;
|
box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
margin: 0 20px 5px 20px;
|
&:first-child {
|
margin-right: 10px;
|
}
|
|
&:last-child {
|
margin-left: 10px;
|
}
|
|
.wel-block-left {
|
width: 90px;
|
height: 90px;
|
margin-right: 30px;
|
|
img {
|
width: 100%;
|
}
|
}
|
|
.wel-block-right {
|
display: flex;
|
flex-direction: column;
|
|
h1 {
|
font-size: 28px;
|
font-family: Microsoft YaHei, Microsoft YaHei-Bold;
|
font-weight: 700;
|
text-align: left;
|
color: #111111;
|
}
|
|
h2 {
|
font-size: 16px;
|
font-family: Microsoft YaHei, Microsoft YaHei-Regular;
|
font-weight: 400;
|
text-align: left;
|
color: #111111;
|
}
|
}
|
}
|
}
|
}
|
|
.law-search-box {
|
margin: 15px 0 10px 0;
|
position: relative;
|
}
|
|
.checkbox-re-box {
|
position: absolute;
|
right: 20px;
|
top: 10px;
|
}
|
|
.tijiao-box {
|
display: flex;
|
justify-content: center;
|
}
|
|
.yulanqu-content {
|
padding: 0 30px;
|
}
|
|
.yulan-biaoti {
|
text-align: center;
|
font-size: 24px;
|
font-weight: 700;
|
}
|
|
.zhixing-time {
|
text-align: right;
|
color: #999999;
|
}
|
|
.bian-title {
|
color: #333333;
|
font-size: 16px;
|
margin-top: 20px;
|
font-weight: 700;
|
text-align: center;
|
}
|
|
.zhang-title {
|
color: #333333;
|
font-size: 14px;
|
margin-top: 20px;
|
text-align: left;
|
text-indent: 28px;
|
line-height: 1.2;
|
}
|
|
.jie-title {
|
color: #666666;
|
font-size: 14px;
|
margin-top: 20px;
|
text-align: center
|
}
|
|
.yulan-main-block {
|
margin-top: 20px;
|
font-size: 14px;
|
line-height: 1.5;
|
color: #888888;
|
text-indent: 28px;
|
}
|
</style>
|
