Skip to content

bdc / bdcjg-web

Go to a project
Toggle navigation
Toggle navigation pinning
1dbe94eb by yangwei
Options

部分样式调整

1 parent cf8335b9
Inline Side-by-side
Showing 2 changed files with 299 additions and 167 deletions
...@@ -7,11 +7,18 @@ ...@@ -7,11 +7,18 @@
7 display: flex; 7 display: flex;
8 position: relative; 8 position: relative;
9 top: -2px; 9 top: -2px;
10
11 b { 10 b {
12 @include flex-center; 11 font-weight: 200;
13 flex: 1; 12 display: inline-block;
14 width: 100%; 13 position: relative;
14 font-size: 24px;
15 top: -11px;
16 width: 38%;
17 height: 40px;
18 margin-left: 28px;
19 // @include flex-center;
20 display: flex;
21 justify-content: center;
15 } 22 }
16 } 23 }
17 24
...@@ -28,7 +35,7 @@ ...@@ -28,7 +35,7 @@
28 } 35 }
29 36
30 .dialog_footer { 37 .dialog_footer {
31 margin-top: 8px; 38 margin-bottom: 8px;
32 @include flex-center; 39 @include flex-center;
33 } 40 }
34 41
...@@ -72,6 +79,9 @@ ...@@ -72,6 +79,9 @@
72 background-size: 100% 100%; 79 background-size: 100% 100%;
73 right: 40px; 80 right: 40px;
74 top: 33px; 81 top: 33px;
82 &:hover{
83 box-shadow: inset 0px 0px 12px 0px #02D9FD;
84 }
75 } 85 }
76 86
77 .el-dialog__close { 87 .el-dialog__close {
......
1 <template> 1 <template>
2 <!-- 编辑 --> 2 <!-- 编辑 -->
3 <dialogBox submitForm="submitForm" class="tableClass" @closeDialog="closeDialog" @submitForm="handleSubmit" width="80%" v-model="myValue" 3 <dialogBox
4 :isSave="details.ISENABLE == 1" title="字典信息"> 4 submitForm="submitForm"
5 class="tableClass"
6 @closeDialog="closeDialog"
7 @submitForm="handleSubmit"
8 width="60%"
9 v-model="myValue"
10 :isMain="true"
11 :isButton="false"
12 :isSave="details.ISENABLE == 1"
13 title="字典信息"
14 >
15 <div class="editDialogBox-box ">
5 <el-form :model="ruleForm" ref="ruleForm" label-width="100px"> 16 <el-form :model="ruleForm" ref="ruleForm" label-width="100px">
6 <el-row :gutter="20"> 17 <el-row :gutter="20">
7 <el-col :span="4"> 18 <el-col :span="4">
...@@ -16,86 +27,159 @@ ...@@ -16,86 +27,159 @@
16 </el-col> 27 </el-col>
17 </el-row> 28 </el-row>
18 </el-form> 29 </el-form>
19 <lb-table :column="column" class="loadingtext" :heightNum="420" :key="key" :expand-row-keys="keyList" 30 <lb-table
20 row-key="dictid" :tree-props="{ children: 'children' }" :pagination="false" :data="tableData"> 31 :column="column"
32 class="loadingtext"
33 :heightNum="600"
34 :key="key"
35 :expand-row-keys="keyList"
36 row-key="dictid"
37 :tree-props="{ children: 'children' }"
38 :pagination="false"
39 :data="tableData"
40 >
21 </lb-table> 41 </lb-table>
42 </div>
22 </dialogBox> 43 </dialogBox>
23 </template> 44 </template>
24 45
25 <script> 46 <script>
26 import { getUuid, judgeSort, realMove, findParents, removeTreeListItem } from '@/utils/operation' 47 import {
27 import { editDictNode, getChildDictList } from '@/api/dict' 48 getUuid,
49 judgeSort,
50 realMove,
51 findParents,
52 removeTreeListItem,
53 } from "@/utils/operation";
54 import { editDictNode, getChildDictList } from "@/api/dict";
28 export default { 55 export default {
29 props: { 56 props: {
30 value: { type: Boolean, default: false }, 57 value: { type: Boolean, default: false },
31 details: { 58 details: {
32 type: Object, 59 type: Object,
33 default: {} 60 default: {},
34 }
35 }, 61 },
36 data () { 62 },
63 data() {
37 return { 64 return {
38 key: 0, 65 key: 0,
39 myValue: this.value, 66 myValue: this.value,
40 keyList: [], 67 keyList: [],
41 ruleForm: { 68 ruleForm: {
42 DCODE: '', 69 DCODE: "",
43 DNAME: '' 70 DNAME: "",
44 }, 71 },
45 column: [], 72 column: [],
46 columns: [ 73 columns: [
47 { 74 {
48 width: '70', 75 width: "70",
49 renderHeader: (h, scope) => { 76 renderHeader: (h, scope) => {
50 return (<div> 77 return (
51 { 78 <div>
52 this.details.ISENABLE === '0' ? 79 {this.details.ISENABLE === "0" ? (
53 <span>序号</span> : 80 <span>序号</span>
54 <i class="el-icon-plus" onClick={() => { this.handleAdd() }} style="cursor:pointer;color:#409EFF"></i> 81 ) : (
55 } 82 <i
56 </div>) 83 class="el-icon-plus"
84 onClick={() => {
85 this.handleAdd();
86 }}
87 style="cursor:pointer;color:#409EFF"
88 ></i>
89 )}
90 </div>
91 );
57 }, 92 },
58 render: (h, scope) => { 93 render: (h, scope) => {
59 return ( 94 return <span>{scope.row.index}</span>;
60 <span>{scope.row.index}</span> 95 },
61 )
62 }
63 }, 96 },
64 { 97 {
65 prop: 'DCODE', 98 prop: "DCODE",
66 width: '100', 99 width: "100",
67 label: '字典项编码', 100 label: "字典项编码",
68 render: (h, scope) => { 101 render: (h, scope) => {
69 return ( 102 return (
70 <div> 103 <div>
71 <el-input placeholder="字典项编码" disabled={this.details.isenable == 2} v-show={scope.row.codeShow} v-fo value={scope.row[scope.column.property]} 104 <el-input
72 onFocus={() => { this.itemShowFalse(); scope.row.codeShow = true; }} 105 placeholder="字典项编码"
73 onInput={(val) => { scope.row[scope.column.property] = val; this.itemShowFalse(); scope.row.codeShow = true; }} maxlength='8'></el-input> 106 disabled={this.details.isenable == 2}
74 107 v-show={scope.row.codeShow}
108 v-fo
109 value={scope.row[scope.column.property]}
110 onFocus={() => {
111 this.itemShowFalse();
112 scope.row.codeShow = true;
113 }}
114 onInput={(val) => {
115 scope.row[scope.column.property] = val;
116 this.itemShowFalse();
117 scope.row.codeShow = true;
118 }}
119 maxlength="8"
120 ></el-input>
75 121
76 <el-input placeholder="字典项编码" disabled={this.details.isenable == 2} v-show={!scope.row.codeShow} value={scope.row[scope.column.property]} 122 <el-input
77 onFocus={() => { this.itemShowFalse(); scope.row.codeShow = true; }} 123 placeholder="字典项编码"
78 onInput={(val) => { scope.row[scope.column.property] = val; this.itemShowFalse(); scope.row.codeShow = true; }} maxlength='8'></el-input> 124 disabled={this.details.isenable == 2}
125 v-show={!scope.row.codeShow}
126 value={scope.row[scope.column.property]}
127 onFocus={() => {
128 this.itemShowFalse();
129 scope.row.codeShow = true;
130 }}
131 onInput={(val) => {
132 scope.row[scope.column.property] = val;
133 this.itemShowFalse();
134 scope.row.codeShow = true;
135 }}
136 maxlength="8"
137 ></el-input>
79 </div> 138 </div>
80 ) 139 );
81 } 140 },
82 }, 141 },
83 { 142 {
84 prop: 'DNAME', 143 prop: "DNAME",
85 label: '字典项名称', 144 label: "字典项名称",
86 render: (h, scope) => { 145 render: (h, scope) => {
87 return ( 146 return (
88 <div> 147 <div>
89 <el-input placeholder="字典项编码" disabled={this.details.isenable == 2} v-show={scope.row.nameShow} v-fo value={scope.row[scope.column.property]} 148 <el-input
90 onFocus={() => { this.itemShowFalse(); scope.row.nameShow = true; }} 149 placeholder="字典项编码"
91 onInput={(val) => { scope.row[scope.column.property] = val; this.itemShowFalse(); scope.row.codeShow = true; }}></el-input> 150 disabled={this.details.isenable == 2}
151 v-show={scope.row.nameShow}
152 v-fo
153 value={scope.row[scope.column.property]}
154 onFocus={() => {
155 this.itemShowFalse();
156 scope.row.nameShow = true;
157 }}
158 onInput={(val) => {
159 scope.row[scope.column.property] = val;
160 this.itemShowFalse();
161 scope.row.codeShow = true;
162 }}
163 ></el-input>
92 164
93 <el-input placeholder="字典项名称" disabled={this.details.isenable == 2} v-show={!scope.row.nameShow} value={scope.row[scope.column.property]} 165 <el-input
94 onFocus={() => { this.itemShowFalse(); scope.row.nameShow = true; }} 166 placeholder="字典项名称"
95 onInput={(val) => { scope.row[scope.column.property] = val; this.itemShowFalse(); scope.row.codeShow = true; }}></el-input> 167 disabled={this.details.isenable == 2}
168 v-show={!scope.row.nameShow}
169 value={scope.row[scope.column.property]}
170 onFocus={() => {
171 this.itemShowFalse();
172 scope.row.nameShow = true;
173 }}
174 onInput={(val) => {
175 scope.row[scope.column.property] = val;
176 this.itemShowFalse();
177 scope.row.codeShow = true;
178 }}
179 ></el-input>
96 </div> 180 </div>
97 ) 181 );
98 } 182 },
99 }, 183 },
100 // { 184 // {
101 // prop: 'normcode', 185 // prop: 'normcode',
...@@ -146,187 +230,217 @@ export default { ...@@ -146,187 +230,217 @@ export default {
146 // } 230 // }
147 // }, 231 // },
148 { 232 {
149 width: '130', 233 width: "130",
150 label: '移动', 234 label: "移动",
151 render: (h, scope) => { 235 render: (h, scope) => {
152 return ( 236 return (
153 <div> 237 <div>
154 <el-button type='text' disabled={scope.row.isTop} onClick={() => { this.moveUpward(scope.$index, scope.row) }}>上移</el-button> 238 <el-button
155 <el-button type='text' disabled={scope.row.isBottom} onClick={() => { this.moveDown(scope.$index, scope.row) }}>下移</el-button > 239 type="text"
156 </div > 240 disabled={scope.row.isTop}
157 ) 241 onClick={() => {
158 } 242 this.moveUpward(scope.$index, scope.row);
243 }}
244 >
245 上移
246 </el-button>
247 <el-button
248 type="text"
249 disabled={scope.row.isBottom}
250 onClick={() => {
251 this.moveDown(scope.$index, scope.row);
252 }}
253 >
254 下移
255 </el-button>
256 </div>
257 );
258 },
159 }, 259 },
160 { 260 {
161 width: '150', 261 width: "150",
162 label: '操作', 262 label: "操作",
163 render: (h, scope) => { 263 render: (h, scope) => {
164 return ( 264 return (
165 <div> 265 <div>
166 <el-button type="text" style="margin-right:10px" onClick={() => { this.handleAddSubordinate(scope.row) }}>增加下级</el-button> 266 <el-button
167 <el-button type="text" style="margin-left:0" onClick={() => { this.handleMinus(scope.$index, scope.row) }}>删除</el-button> 267 type="text"
268 style="margin-right:10px"
269 onClick={() => {
270 this.handleAddSubordinate(scope.row);
271 }}
272 >
273 增加下级
274 </el-button>
275 <el-button
276 type="text"
277 style="margin-left:0"
278 onClick={() => {
279 this.handleMinus(scope.$index, scope.row);
280 }}
281 >
282 删除
283 </el-button>
168 </div> 284 </div>
169 ) 285 );
170 } 286 },
171 } 287 },
172 ], 288 ],
173 tableData: [] 289 tableData: [],
174 } 290 };
175 }, 291 },
176 watch: { 292 watch: {
177 value (val) { 293 value(val) {
178 this.myValue = val 294 this.myValue = val;
179 }, 295 },
180 'details.dictid': { 296 "details.dictid": {
181 handler: function (newValue) { 297 handler: function (newValue) {
182 if (!this.value) return 298 if (!this.value) return;
183 this.$startLoading(); 299 this.$startLoading();
184 getChildDictList(newValue).then(res => { 300 getChildDictList(newValue).then((res) => {
185 this.$endLoading(); 301 this.$endLoading();
186 let { result } = res 302 let { result } = res;
187 this.tableData = result ? result : [] 303 this.tableData = result ? result : [];
188 this.tableData.forEach((item, index) => { 304 this.tableData.forEach((item, index) => {
189 item.index = index + 1 305 item.index = index + 1;
190 }) 306 });
191 }) 307 });
192 }, 308 },
193 immediate: true 309 immediate: true,
194 }, 310 },
195 details: { 311 details: {
196 handler: function (newValue) { 312 handler: function (newValue) {
197 if (newValue.ISENABLE == 2) { 313 if (newValue.ISENABLE == 2) {
198 this.column = this.columns.slice(0, 6) 314 this.column = this.columns.slice(0, 6);
199 } else { 315 } else {
200 this.column = this.columns 316 this.column = this.columns;
201 } 317 }
202 this.ruleForm = newValue.rowData 318 this.ruleForm = newValue.rowData;
203 this.addIndexes() 319 this.addIndexes();
204 this.key++ 320 this.key++;
321 },
322 deep: true,
205 }, 323 },
206 deep: true
207 }
208 }, 324 },
209 methods: { 325 methods: {
210 // 添加索引 326 // 添加索引
211 addIndexes (data = this.tableData, isAdd = true) { 327 addIndexes(data = this.tableData, isAdd = true) {
212 data.forEach((item, index) => { 328 data.forEach((item, index) => {
213 if (index == 0) { 329 if (index == 0) {
214 item.codeShow = true 330 item.codeShow = true;
215 item.nameShow = false 331 item.nameShow = false;
216 item.normcodeShow = false 332 item.normcodeShow = false;
217 item.normnameShow = false 333 item.normnameShow = false;
218 } else { 334 } else {
219 item.codeShow = false 335 item.codeShow = false;
220 item.nameShow = false 336 item.nameShow = false;
221 item.normcodeShow = false 337 item.normcodeShow = false;
222 item.normnameShow = false 338 item.normnameShow = false;
223 } 339 }
224 if (isAdd) { 340 if (isAdd) {
225 item.index = index + 1 341 item.index = index + 1;
226 } 342 }
227 if (item.children) { 343 if (item.children) {
228 this.addIndexes(item.children, false) 344 this.addIndexes(item.children, false);
229 } 345 }
230 }) 346 });
231 }, 347 },
232 itemShowFalse () { 348 itemShowFalse() {
233 this.tableData.forEach((item, index) => { 349 this.tableData.forEach((item, index) => {
234 item.codeShow = false 350 item.codeShow = false;
235 item.nameShow = false 351 item.nameShow = false;
236 item.normcodeShow = false 352 item.normcodeShow = false;
237 item.normnameShow = false 353 item.normnameShow = false;
238 }) 354 });
239 }, 355 },
240 handleMinus (index, row) { 356 handleMinus(index, row) {
241 this.$confirm('此操作将永久删除, 是否继续?', '提示', { 357 this.$confirm("此操作将永久删除, 是否继续?", "提示", {
242 confirmButtonText: '确定', 358 confirmButtonText: "确定",
243 cancelButtonText: '取消', 359 cancelButtonText: "取消",
244 type: 'warning' 360 type: "warning",
245 }).then(() => {
246 removeTreeListItem(this.tableData, row.dictid)
247 this.$message({
248 type: 'success',
249 message: '删除成功!'
250 }) 361 })
251 }).catch(() => { 362 .then(() => {
363 removeTreeListItem(this.tableData, row.dictid);
252 this.$message({ 364 this.$message({
253 type: 'info', 365 type: "success",
254 message: '已取消删除' 366 message: "删除成功!",
255 }) 367 });
256 }) 368 })
369 .catch(() => {
370 this.$message({
371 type: "info",
372 message: "已取消删除",
373 });
374 });
257 }, 375 },
258 handleSubmit () { 376 handleSubmit() {
259 editDictNode({ 377 editDictNode({
260 dictid: this.details.rowData.dictid, 378 dictid: this.details.rowData.dictid,
261 typeid: this.details.rowData.typeid, 379 typeid: this.details.rowData.typeid,
262 children: this.tableData 380 children: this.tableData,
263 }).then(res => { 381 }).then((res) => {
264 if (res.code === 200) { 382 if (res.code === 200) {
265 this.$message({ 383 this.$message({
266 message: '修改成功', 384 message: "修改成功",
267 type: 'success' 385 type: "success",
268 }) 386 });
269 this.$emit('input', false) 387 this.$emit("input", false);
270 } 388 }
271 }) 389 });
272 }, 390 },
273 closeDialog () { 391 closeDialog() {
274 this.$emit('input', false) 392 this.$emit("input", false);
275 }, 393 },
276 // 增加下级 394 // 增加下级
277 handleAddSubordinate (row) { 395 handleAddSubordinate(row) {
278 if (!row.children) { 396 if (!row.children) {
279 row.children = [] 397 row.children = [];
280 } 398 }
281 row.children.push( 399 row.children.push({
282 { 400 DCODE: "",
283 DCODE: '', 401 DNAME: "",
284 DNAME: '', 402 ISENABLE: "1",
285 ISENABLE: '1', 403 NORMCODE: "",
286 NORMCODE: '', 404 NORMNAME: "",
287 NORMNAME: '',
288 dictid: getUuid(32), 405 dictid: getUuid(32),
289 typeid: row.typeid, 406 typeid: row.typeid,
290 } 407 });
291 )
292 this.keyList = []; 408 this.keyList = [];
293 this.keyList.push(row.dictid) 409 this.keyList.push(row.dictid);
294 }, 410 },
295 // 增加 411 // 增加
296 handleAdd () { 412 handleAdd() {
297 this.$nextTick(() => { 413 this.$nextTick(() => {
298 let container = this.$el.querySelector('.el-table__body-wrapper'); 414 let container = this.$el.querySelector(".el-table__body-wrapper");
299 container.scrollTop = container.scrollHeight; 415 container.scrollTop = container.scrollHeight;
300 }) 416 });
301 this.tableData.push( 417 this.tableData.push({
302 { 418 DCODE: "",
303 DCODE: '', 419 DNAME: "",
304 DNAME: '', 420 ISENABLE: "1",
305 ISENABLE: '1', 421 normcode: "",
306 normcode: '', 422 normname: "",
307 normname: '',
308 dictid: getUuid(32), 423 dictid: getUuid(32),
309 typeid: this.ruleForm.typeid, 424 typeid: this.ruleForm.typeid,
310 } 425 });
311 ) 426 this.addIndexes();
312 this.addIndexes() 427 this.key++;
313 this.key++
314 }, 428 },
315 // 上移下移 429 // 上移下移
316 moveUpward (index, row) { 430 moveUpward(index, row) {
317 realMove(row.dictid, 'UP', this.tableData) 431 realMove(row.dictid, "UP", this.tableData);
318 this.key++ 432 this.key++;
319 let id = findParents(this.tableData, row.dictid) 433 let id = findParents(this.tableData, row.dictid);
320 this.keyList = id 434 this.keyList = id;
321 }, 435 },
322 moveDown (index, row) { 436 moveDown(index, row) {
323 realMove(row.dictid, 'DOWN', this.tableData) 437 realMove(row.dictid, "DOWN", this.tableData);
324 this.key++ 438 this.key++;
325 let id = findParents(this.tableData, row.dictid) 439 let id = findParents(this.tableData, row.dictid);
326 this.keyList = id 440 this.keyList = id;
327 } 441 },
328 } 442 },
329 } 443 };
330 </script> 444 </script>
331 <style rel="stylesheet/scss" lang="scss" scoped> 445 <style rel="stylesheet/scss" lang="scss" scoped>
332 @import "~@/styles/public.scss"; 446 @import "~@/styles/public.scss";
...@@ -339,11 +453,19 @@ export default { ...@@ -339,11 +453,19 @@ export default {
339 /deep/.el-radio__label { 453 /deep/.el-radio__label {
340 display: block; 454 display: block;
341 } 455 }
342 456 /deep/.el-form-item__label{
457 color:#fff;
458 }
459 /deep/.el-form-item{
460 color:#fff;
461 margin-bottom: 10px;
462 }
343 /deep/.el-radio-group { 463 /deep/.el-radio-group {
344 display: flex; 464 display: flex;
345 align-items: center; 465 align-items: center;
346 justify-content: center; 466 justify-content: center;
347 } 467 }
468 .editDialogBox-box{
469 margin:14px 18px 30px 18px !important
470 }
348 </style> 471 </style>
349
......