Skip to content

任超 / js.CadastralSystem

Go to a project
Toggle navigation
Toggle navigation pinning
3e1d60c8 by 杨威
Options

个性化配置页面开发，路由是zykfzddgxhgl

1 parent 2cba134d
Inline Side-by-side
Showing 3 changed files with 390 additions and 0 deletions
import request from "@/plugin/axios";
/**
* 新增个性化配置信息
*/
export function insertGxh(data) {
return request({
url: '/gxh/insertGxh',
method: 'post',
data: data,
})
}
/**
* 修改个性化配置信息
*/
export function updateGxh(data) {
return request({
url: '/gxh/updateGxh',
method: 'post',
data: data,
})
}
/**
* 查询个性化配置信息
*/
export function getGxhList(data) {
return request({
url: '/gxh/getGxhList',
method: 'get',
params: {
title: data.title,
code: data.code,
pageNo: data.pageNo,
pageSize: data.pageSize,
}
})
}
// export function getGxhList(data) {
// return request({
// url: '/gxh/getGxhList',
// method: 'post',
// params: data
// })
// }
\ No newline at end of file
......@@ -117,6 +117,12 @@ const constantRoutes = [
code: "1-3",
component: () => import("@/views/lq/index"),
},
{
path: "/zykfzddgxhgl",
name: "个性化管理",
code: "1-4",
component: () => import("@/views/manage/gxhgl/index"),
},
],
},
];
......
<template>
<el-tabs v-model="activeName">
<el-tab-pane label="个性化管理" name="zhcx">
<div class="main">
<!-- <p class="tips">查询条件</p> -->
<el-form
:inline="true"
ref="ruleForm"
class="demo-form-inline"
>
<el-form-item label="个性化标题" class="w100" prop="syqlx">
<el-input
placeholder="输入个性化标题"
v-model="queryData.title"
@change="getData"
></el-input>
</el-form-item>
<el-form-item label="个性化代码" class="w100" prop="zdtzm">
<el-input
placeholder="输入个性化代码"
v-model="queryData.code"
@change="getData"
></el-input>
</el-form-item>
<el-form-item class="ml20">
<el-button type="primary" @click="getData" icon="el-icon-search"
>查询</el-button
>
<el-button
type="warning"
style="margin-left:60px"
@click="reset"
icon="el-icon-refresh"
>重置</el-button
>
</el-form-item>
<el-form-item style="margin-left:-20px">
<el-button
type="primary"
@click="gxhVisible = true"
icon="el-icon-plus"
>新增</el-button
>
<el-button
type="success"
style="margin-left:60px"
@click="save"
icon="el-icon-folder"
>保存</el-button
>
</el-form-item>
</el-form>
<!-- <p class="tips">查询列表</p> -->
<div class="dataGrid" ref="dataGrid">
<el-table
:data="tableData"
:height="tableHeight"
>
<el-table-column
type="index"
width="80"
align="center"
label="序号"
>
</el-table-column>
<el-table-column prop="title" align="center" label="个性化标题">
</el-table-column>
<el-table-column prop="code" align="center" label="个性化代码">
</el-table-column>
<el-table-column prop="bz" align="center" label="备注">
</el-table-column>
<el-table-column prop="open" align="center" label="是否开启">
<template slot-scope="scope">
<el-switch
v-model="scope.row.open"
active-value="1"
inactive-value="0"
active-color="#409EFF"
inactive-color="#F56C6C"
@change="changeEnabled(scope.row)"
/>
</template>
</el-table-column>
<el-table-column width="80px" align="center" label="操作">
<template slot-scope="scope">
<el-tooltip class="item" effect="light" content="删除" placement="top">
<i class="iconfont iconshanchu1" @click="handleClick(scope.row)" style="padding:0 10px"></i>
</el-tooltip>
</template>
</el-table-column>
</el-table>
<div class="pagination">
<el-pagination
background
layout="prev, pager, next,total"
:total="total"
:current-page="pageNo"
:page-size="pageSize"
@current-change="handleCurrentChange"
>
</el-pagination>
</div>
<el-dialog
v-dialogDrag
:close-on-click-modal="false"
title="新增个性化配置"
:visible.sync="gxhVisible"
width="30%"
>
<el-form ref="form" class="addForm" :model="form" label-width="100px">
<el-form-item label="个性化标题">
<el-input v-model="form.title"></el-input>
</el-form-item>
<el-form-item label="个性化代码">
<el-input v-model="form.code"></el-input>
</el-form-item>
<el-form-item label="是否开启">
<el-switch v-model="form.open" active-value="1" inactive-value="0" ></el-switch>
</el-form-item>
<el-form-item label="备注">
<el-input v-model="form.bz"></el-input>
</el-form-item>
</el-form>
<div class="btnGroup">
<el-button type="primary" @click="addGxhData">确定</el-button>
<el-button type="primary" @click="gxhVisible = false"
>取消</el-button>
</div>
</el-dialog>
</div>
</div>
</el-tab-pane>
</el-tabs>
</template>
<script>
import { getGxhList,updateGxh,insertGxh } from "@api/gxhgl";
export default {
name: "",
inject: ["getRightTree", "getTreeByBsm"],
components: {},
props: {},
data() {
return {
activeName: "zhcx",
type: "all",
total: 0,
pageNo: 1,
pageSize: 15,
tableData: [
{
title: "宗地坐落必填",
code: "ZDZLBT",
bz: "宗地坐落必填",
open: true,
},
{
title: "宗地附件材料显示",
code: "ZDFJCLXS",
bz: "宗地附件材料显示",
open: false,
},
],
tableHeight: 0,
queryData: {
title: "",
code: "",
},
gxhVisible: false,
//新增数据
form:{
title: "",
code: "",
open:false,
bz:''
},
//已修改的数据
hasChanged:[],
};
},
created() {},
mounted() {
this.getData(this.queryData);
this.$nextTick(() => {
this.tableHeight =
(document.documentElement.clientHeight || document.body.clientHeight) -
277;
});
},
methods: {
//获取数据
getData() {
this.queryData.pageSize = this.pageSize;
this.queryData.pageNo = this.pageNo;
getGxhList(this.queryData).then((res) => {
console.log(res.result);
this.tableData = res.result.records
this.total = res.result.total
})
.catch((error) => {});
//调用查询接口 给tableData赋值 TODO
},
//新增个性化配置
addGxhData() {
//调用接口 新增个性化配置数据 传入this.form TODO
insertGxh(this.form).then((res) => {
if(res.code == 200){
this.$message.success("添加成功")
this.gxhVisible = false;
this.getData();
}
})
.catch((error) => {});
},
//重置查询条件
reset() {
this.queryData = {
title: "",
code: "",
pageSize:"15",
pageNo:"1",
}
},
//翻页
handleCurrentChange(val) {
this.pageNo = val;
this.getData();
},
// 是否开启
changeEnabled(data) {
if(this.hasChanged.some( i => i.bsm == data.bsm)){
this.hasChanged.filter(i => i.bsm == data.bsm)
}else{
this.hasChanged.push(data);
}
},
//保存修改后的数据
save(){
//接口调用 hasChanged为已修改数据项数组 TODO
updateGxh(this.hasChanged).then((res) => {
if(res.code == 200){
this.$message.success("修改成功")
}
this.getData();
})
.catch((error) => {});
},
//删除
handleClick(row){
//调用删除个性化数据接口，row是整条记录，需要id或者bsm自取 TODO
}
},
computed: {},
watch: {},
};
</script>
<style scoped lang="less">
.main {
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 0 18px 0 0;
display: flex;
flex-direction: column;
//background-color: #F4F9FF;
background-color: #f4f9ff;
.el-form {
width: 100%;
border: 1px solid #e6e6e6;
background-color: white;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 10px 15px;
/deep/.el-form-item {
margin-bottom: 0;
}
/deep/.el-form-item__label {
width: 100px;
}
/deep/ .el-form-item__content {
width: 300px;
.el-select {
width: 100%;
}
}
}
.addForm{
border: 0;
/deep/.el-form-item {
margin-bottom: 10px;
}
/deep/ .el-form-item__content {
width: auto;
}
}
.tips {
color: #9b9b9b;
margin-left: 2px;
margin-bottom: 10px;
}
.demo-form-inline {
margin: 0 0 18px 0;
.moreSearchBtn {
background-color: #1ad6e1;
border-color: #1ad6e1;
}
.moreSearchBtn:focus,
.moreSearchBtn:hover {
background-color: rgba(28, 200, 229, 0.6);
}
}
.dataGrid {
flex: 1;
.pagination {
padding: 18px 0;
}
}
.hbjDialog {
/deep/ .el-dialog {
margin-top: 10vh !important;
}
}
.btnGroup {
margin: 20px auto 0;
width: 230px;
.el-button+.el-button{
margin-left: 90px;
}
}
.ml20 {
margin-left: 20px;
}
.iconfont{
cursor: pointer;
}
}
</style>