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
1 import request from "@/plugin/axios";
2
3
4 /**
5 * 新增个性化配置信息
6 */
7 export function insertGxh(data) {
8 return request({
9 url: '/gxh/insertGxh',
10 method: 'post',
11 data: data,
12 })
13 }
14 /**
15 * 修改个性化配置信息
16 */
17 export function updateGxh(data) {
18 return request({
19 url: '/gxh/updateGxh',
20 method: 'post',
21 data: data,
22 })
23 }
24 /**
25 * 查询个性化配置信息
26 */
27 export function getGxhList(data) {
28 return request({
29 url: '/gxh/getGxhList',
30 method: 'get',
31 params: {
32 title: data.title,
33 code: data.code,
34 pageNo: data.pageNo,
35 pageSize: data.pageSize,
36 }
37 })
38 }
39 // export function getGxhList(data) {
40 // return request({
41 // url: '/gxh/getGxhList',
42 // method: 'post',
43 // params: data
44 // })
45 // }
...\ No newline at end of file ...\ No newline at end of file
...@@ -117,6 +117,12 @@ const constantRoutes = [ ...@@ -117,6 +117,12 @@ const constantRoutes = [
117 code: "1-3", 117 code: "1-3",
118 component: () => import("@/views/lq/index"), 118 component: () => import("@/views/lq/index"),
119 }, 119 },
120 {
121 path: "/zykfzddgxhgl",
122 name: "个性化管理",
123 code: "1-4",
124 component: () => import("@/views/manage/gxhgl/index"),
125 },
120 ], 126 ],
121 }, 127 },
122 ]; 128 ];
......
1 <template>
2 <el-tabs v-model="activeName">
3 <el-tab-pane label="个性化管理" name="zhcx">
4 <div class="main">
5 <!-- <p class="tips">查询条件</p> -->
6 <el-form
7 :inline="true"
8 ref="ruleForm"
9 class="demo-form-inline"
10 >
11 <el-form-item label="个性化标题" class="w100" prop="syqlx">
12 <el-input
13 placeholder="输入个性化标题"
14 v-model="queryData.title"
15 @change="getData"
16 ></el-input>
17 </el-form-item>
18 <el-form-item label="个性化代码" class="w100" prop="zdtzm">
19 <el-input
20 placeholder="输入个性化代码"
21 v-model="queryData.code"
22 @change="getData"
23 ></el-input>
24 </el-form-item>
25 <el-form-item class="ml20">
26 <el-button type="primary" @click="getData" icon="el-icon-search"
27 >查询</el-button
28 >
29 <el-button
30 type="warning"
31 style="margin-left:60px"
32 @click="reset"
33 icon="el-icon-refresh"
34 >重置</el-button
35 >
36 </el-form-item>
37 <el-form-item style="margin-left:-20px">
38 <el-button
39 type="primary"
40 @click="gxhVisible = true"
41 icon="el-icon-plus"
42 >新增</el-button
43 >
44 <el-button
45 type="success"
46 style="margin-left:60px"
47 @click="save"
48 icon="el-icon-folder"
49 >保存</el-button
50 >
51 </el-form-item>
52 </el-form>
53 <!-- <p class="tips">查询列表</p> -->
54 <div class="dataGrid" ref="dataGrid">
55 <el-table
56 :data="tableData"
57 :height="tableHeight"
58 >
59 <el-table-column
60 type="index"
61 width="80"
62 align="center"
63 label="序号"
64 >
65 </el-table-column>
66 <el-table-column prop="title" align="center" label="个性化标题">
67 </el-table-column>
68 <el-table-column prop="code" align="center" label="个性化代码">
69 </el-table-column>
70 <el-table-column prop="bz" align="center" label="备注">
71 </el-table-column>
72 <el-table-column prop="open" align="center" label="是否开启">
73 <template slot-scope="scope">
74 <el-switch
75 v-model="scope.row.open"
76 active-value="1"
77 inactive-value="0"
78 active-color="#409EFF"
79 inactive-color="#F56C6C"
80 @change="changeEnabled(scope.row)"
81 />
82 </template>
83 </el-table-column>
84 <el-table-column width="80px" align="center" label="操作">
85 <template slot-scope="scope">
86 <el-tooltip class="item" effect="light" content="删除" placement="top">
87 <i class="iconfont iconshanchu1" @click="handleClick(scope.row)" style="padding:0 10px"></i>
88 </el-tooltip>
89 </template>
90 </el-table-column>
91 </el-table>
92 <div class="pagination">
93 <el-pagination
94 background
95 layout="prev, pager, next,total"
96 :total="total"
97 :current-page="pageNo"
98 :page-size="pageSize"
99 @current-change="handleCurrentChange"
100 >
101 </el-pagination>
102 </div>
103 <el-dialog
104 v-dialogDrag
105 :close-on-click-modal="false"
106 title="新增个性化配置"
107 :visible.sync="gxhVisible"
108 width="30%"
109 >
110 <el-form ref="form" class="addForm" :model="form" label-width="100px">
111 <el-form-item label="个性化标题">
112 <el-input v-model="form.title"></el-input>
113 </el-form-item>
114 <el-form-item label="个性化代码">
115 <el-input v-model="form.code"></el-input>
116 </el-form-item>
117 <el-form-item label="是否开启">
118 <el-switch v-model="form.open" active-value="1" inactive-value="0" ></el-switch>
119 </el-form-item>
120 <el-form-item label="备注">
121 <el-input v-model="form.bz"></el-input>
122 </el-form-item>
123 </el-form>
124 <div class="btnGroup">
125 <el-button type="primary" @click="addGxhData">确定</el-button>
126 <el-button type="primary" @click="gxhVisible = false"
127 >取消</el-button>
128 </div>
129 </el-dialog>
130 </div>
131 </div>
132 </el-tab-pane>
133 </el-tabs>
134 </template>
135
136 <script>
137 import { getGxhList,updateGxh,insertGxh } from "@api/gxhgl";
138
139 export default {
140 name: "",
141 inject: ["getRightTree", "getTreeByBsm"],
142 components: {},
143 props: {},
144 data() {
145 return {
146 activeName: "zhcx",
147 type: "all",
148 total: 0,
149 pageNo: 1,
150 pageSize: 15,
151 tableData: [
152 {
153 title: "宗地坐落必填",
154 code: "ZDZLBT",
155 bz: "宗地坐落必填",
156 open: true,
157 },
158 {
159 title: "宗地附件材料显示",
160 code: "ZDFJCLXS",
161 bz: "宗地附件材料显示",
162 open: false,
163 },
164 ],
165 tableHeight: 0,
166 queryData: {
167 title: "",
168 code: "",
169 },
170 gxhVisible: false,
171 //新增数据
172 form:{
173 title: "",
174 code: "",
175 open:false,
176 bz:''
177 },
178 //已修改的数据
179 hasChanged:[],
180 };
181 },
182 created() {},
183 mounted() {
184 this.getData(this.queryData);
185 this.$nextTick(() => {
186 this.tableHeight =
187 (document.documentElement.clientHeight || document.body.clientHeight) -
188 277;
189 });
190 },
191 methods: {
192 //获取数据
193 getData() {
194 this.queryData.pageSize = this.pageSize;
195 this.queryData.pageNo = this.pageNo;
196 getGxhList(this.queryData).then((res) => {
197 console.log(res.result);
198 this.tableData = res.result.records
199 this.total = res.result.total
200 })
201 .catch((error) => {});
202 //调用查询接口 给tableData赋值 TODO
203 },
204 //新增个性化配置
205 addGxhData() {
206 //调用接口 新增个性化配置数据 传入this.form TODO
207 insertGxh(this.form).then((res) => {
208 if(res.code == 200){
209 this.$message.success("添加成功")
210 this.gxhVisible = false;
211 this.getData();
212 }
213 })
214 .catch((error) => {});
215 },
216 //重置查询条件
217 reset() {
218 this.queryData = {
219 title: "",
220 code: "",
221 pageSize:"15",
222 pageNo:"1",
223 }
224 },
225 //翻页
226 handleCurrentChange(val) {
227 this.pageNo = val;
228 this.getData();
229 },
230 // 是否开启
231 changeEnabled(data) {
232 if(this.hasChanged.some( i => i.bsm == data.bsm)){
233 this.hasChanged.filter(i => i.bsm == data.bsm)
234 }else{
235 this.hasChanged.push(data);
236 }
237 },
238 //保存修改后的数据
239 save(){
240 //接口调用 hasChanged为已修改数据项数组 TODO
241 updateGxh(this.hasChanged).then((res) => {
242 if(res.code == 200){
243 this.$message.success("修改成功")
244 }
245 this.getData();
246 })
247 .catch((error) => {});
248 },
249 //删除
250 handleClick(row){
251 //调用删除个性化数据接口，row是整条记录，需要id或者bsm自取 TODO
252 }
253 },
254 computed: {},
255 watch: {},
256 };
257 </script>
258 <style scoped lang="less">
259 .main {
260 width: 100%;
261 height: 100%;
262 box-sizing: border-box;
263 padding: 0 18px 0 0;
264 display: flex;
265 flex-direction: column;
266 //background-color: #F4F9FF;
267 background-color: #f4f9ff;
268
269 .el-form {
270 width: 100%;
271 border: 1px solid #e6e6e6;
272 background-color: white;
273 -webkit-box-sizing: border-box;
274 box-sizing: border-box;
275 padding: 10px 15px;
276 /deep/.el-form-item {
277 margin-bottom: 0;
278 }
279 /deep/.el-form-item__label {
280 width: 100px;
281 }
282 /deep/ .el-form-item__content {
283 width: 300px;
284 .el-select {
285 width: 100%;
286 }
287 }
288 }
289 .addForm{
290 border: 0;
291 /deep/.el-form-item {
292 margin-bottom: 10px;
293 }
294 /deep/ .el-form-item__content {
295 width: auto;
296 }
297 }
298 .tips {
299 color: #9b9b9b;
300 margin-left: 2px;
301 margin-bottom: 10px;
302 }
303 .demo-form-inline {
304 margin: 0 0 18px 0;
305 .moreSearchBtn {
306 background-color: #1ad6e1;
307 border-color: #1ad6e1;
308 }
309 .moreSearchBtn:focus,
310 .moreSearchBtn:hover {
311 background-color: rgba(28, 200, 229, 0.6);
312 }
313 }
314 .dataGrid {
315 flex: 1;
316 .pagination {
317 padding: 18px 0;
318 }
319 }
320 .hbjDialog {
321 /deep/ .el-dialog {
322 margin-top: 10vh !important;
323 }
324 }
325 .btnGroup {
326 margin: 20px auto 0;
327 width: 230px;
328 .el-button+.el-button{
329 margin-left: 90px;
330 }
331 }
332 .ml20 {
333 margin-left: 20px;
334 }
335 .iconfont{
336 cursor: pointer;
337 }
338 }
339 </style>