样式调整
Showing
3 changed files
with
413 additions
and
385 deletions
src/views/registerBook/tablestyle.scss
0 → 100644
1 | .tablebox { | ||
2 | overflow-x: auto; | ||
3 | width: 100%; | ||
4 | height: 95%; | ||
5 | background: #fff; | ||
6 | text-align: center; | ||
7 | padding: 4px; | ||
8 | overflow-y: scroll; | ||
9 | padding-top: 20px; | ||
10 | padding: 20px 40px; | ||
11 | |||
12 | .Table { | ||
13 | width: 100%; | ||
14 | color: #333; | ||
15 | tr { | ||
16 | td:nth-child(1) { | ||
17 | width: 140px; | ||
18 | text-align: right; | ||
19 | padding-right: 15px; | ||
20 | background-color: #f8f8fa; | ||
21 | color: #6b6b6b; | ||
22 | } | ||
23 | td:nth-child(3) { | ||
24 | width: 140px; | ||
25 | padding-right: 15px; | ||
26 | text-align: right; | ||
27 | background-color: #f8f8fa; | ||
28 | color: #6b6b6b; | ||
29 | } | ||
30 | td:nth-child(2) { | ||
31 | text-align: left; | ||
32 | padding-left: 15px; | ||
33 | color: #4a4a4a; | ||
34 | } | ||
35 | td:nth-child(4) { | ||
36 | text-align: left; | ||
37 | padding-left: 15px; | ||
38 | color: #4a4a4a; | ||
39 | } | ||
40 | } | ||
41 | |||
42 | td { | ||
43 | border: 1px solid #e8e8e8; | ||
44 | line-height: 42px; | ||
45 | padding: 0 4px; | ||
46 | font-size: 14px; | ||
47 | } | ||
48 | |||
49 | .title { | ||
50 | line-height: 68px; | ||
51 | font-size: 22px !important; | ||
52 | color: #4a4a4a !important; | ||
53 | background-color: #eceef2 !important; | ||
54 | text-align: center !important; | ||
55 | } | ||
56 | |||
57 | .unit { | ||
58 | text-align: right; | ||
59 | } | ||
60 | .title3 { | ||
61 | width: 140px !important; | ||
62 | } | ||
63 | .bhqk { | ||
64 | width: 140px; | ||
65 | padding: 0 !important; | ||
66 | |||
67 | .box { | ||
68 | width: 745px; | ||
69 | overflow: auto; | ||
70 | } | ||
71 | |||
72 | .test { | ||
73 | } | ||
74 | |||
75 | table { | ||
76 | .bhqkTh { | ||
77 | width: 110px; | ||
78 | line-height: 38px; | ||
79 | background-color: #f8f8fa; | ||
80 | border: 1px solid #e8e8e8; | ||
81 | font-weight: bold; | ||
82 | text-align: left; | ||
83 | } | ||
84 | |||
85 | td { | ||
86 | width: 180px; | ||
87 | } | ||
88 | } | ||
89 | } | ||
90 | } | ||
91 | } |
1 | <template> | 1 | <template> |
2 | <div class="zdxx"> | 2 | <div class="zdxx"> |
3 | <div class="tablebox"> | 3 | <div class="tablebox"> |
4 | <table cellpadding="0" cellspacing="0" class="zdxxTable"> | 4 | <table cellpadding="0" cellspacing="0" class="Table"> |
5 | <col width="80" /> | 5 | <col width="80" /> |
6 | <col width="60" /> | 6 | <col width="60" /> |
7 | <col width="90" /> | 7 | <col width="90" /> |
8 | <col width="235" /> | 8 | <col width="235" /> |
9 | <col width="150" /> | 9 | <col width="150" /> |
10 | <tr> | 10 | <tr> |
11 | <td colspan="6" class="title">宗地基本信息</td> | 11 | <td colspan="12" class="title">宗地基本信息</td> |
12 | </tr> | 12 | </tr> |
13 | <tr> | 13 | <tr> |
14 | <td colspan="2">不动产类型:</td> | 14 | <td colspan="2">不动产类型</td> |
15 | <td colspan="2">{{ bdclxList[zdjbxx.bdclx] }}</td> | 15 | <td colspan="3">{{ bdclxList[zdjbxx.bdclx] }}</td> |
16 | <td>单位:</td> | 16 | <td>单位</td> |
17 | <td>{{ zdjbxx.mjdw }}</td> | 17 | <td colspan="4">{{ zdjbxx.mjdw }}</td> |
18 | </tr> | 18 | </tr> |
19 | <tr> | 19 | <tr> |
20 | <td colspan="2">坐落</td> | 20 | <td colspan="2">坐落</td> |
21 | <td colspan="4">{{ zdjbxx.zl }}</td> | 21 | <td colspan="10">{{ zdjbxx.zl }}</td> |
22 | </tr> | 22 | </tr> |
23 | <tr> | 23 | <tr> |
24 | <td rowspan="8" class="title2">土地状况</td> | 24 | <td rowspan="8" colspan="2" class="title2">土地状况</td> |
25 | </tr> | 25 | </tr> |
26 | <tr> | 26 | <tr> |
27 | <td colspan="2">宗地面积</td> | 27 | <td>宗地面积</td> |
28 | <td>{{ zdjbxx.zdmj }}</td> | 28 | <td colspan="4">{{ zdjbxx.zdmj }}</td> |
29 | <td>用途</td> | 29 | <td>用途</td> |
30 | <td>{{ zdjbxx.ghytmc }}</td> | 30 | <td>{{ zdjbxx.ghytmc }}</td> |
31 | </tr> | 31 | </tr> |
32 | <tr> | 32 | <tr> |
33 | <td colspan="2">等级</td> | 33 | <td>等级</td> |
34 | <td>{{ zdjbxx.djmc }}</td> | 34 | <td colspan="4">{{ zdjbxx.djmc }}</td> |
35 | <td>价格</td> | 35 | <td>价格</td> |
36 | <td>{{ zdjbxx.jg }}</td> | 36 | <td colspan="3">{{ zdjbxx.jg }}</td> |
37 | </tr> | 37 | </tr> |
38 | <tr> | 38 | <tr> |
39 | <td colspan="2">权利类型</td> | 39 | <td>权利类型</td> |
40 | <td>{{ zdjbxx.qllxmc }}</td> | 40 | <td colspan="4">{{ zdjbxx.qllxmc }}</td> |
41 | <td>权利性质</td> | 41 | <td>权利性质</td> |
42 | <td>{{ zdjbxx.qlxzmc }}</td> | 42 | <td>{{ zdjbxx.qlxzmc }}</td> |
43 | </tr> | 43 | </tr> |
44 | <tr> | 44 | <tr> |
45 | <td colspan="2">权利设定方式</td> | 45 | <td>权利设定方式</td> |
46 | <td>{{ zdjbxx.qlsdfs }}</td> | 46 | <td colspan="4">{{ zdjbxx.qlsdfs }}</td> |
47 | <td>容积率</td> | 47 | <td>容积率</td> |
48 | <td>{{ zdjbxx.rjl }}</td> | 48 | <td>{{ zdjbxx.rjl }}</td> |
49 | </tr> | 49 | </tr> |
50 | <tr> | 50 | <tr> |
51 | <td colspan="2">建筑密度</td> | 51 | <td>建筑密度</td> |
52 | <td>{{ zdjbxx.jzmd }}</td> | 52 | <td colspan="4">{{ zdjbxx.jzmd }}</td> |
53 | <td>建筑限高</td> | 53 | <td>建筑限高</td> |
54 | <td>{{ zdjbxx.jzxg }}</td> | 54 | <td>{{ zdjbxx.jzxg }}</td> |
55 | </tr> | 55 | </tr> |
56 | <tr> | 56 | <tr> |
57 | <td colspan="2">图幅号</td> | 57 | <td>图幅号</td> |
58 | <td>{{ zdjbxx.tfh }}</td> | 58 | <td colspan="4">{{ zdjbxx.tfh }}</td> |
59 | <td>地籍号</td> | 59 | <td>地籍号</td> |
60 | <td>{{ zdjbxx.djh }}</td> | 60 | <td colspan="3">{{ zdjbxx.djh }}</td> |
61 | </tr> | 61 | </tr> |
62 | <tr> | 62 | <tr> |
63 | <td colspan="2">档案号</td> | 63 | <td>档案号</td> |
64 | <td>{{ zdjbxx.dah }}</td> | 64 | <td colspan="4">{{ zdjbxx.dah }}</td> |
65 | <td>地块代码</td> | 65 | <td>地块代码</td> |
66 | <td>{{ zdjbxx.dkdm }}</td> | 66 | <td colspan="3">{{ zdjbxx.dkdm }}</td> |
67 | </tr> | 67 | </tr> |
68 | <tr> | 68 | <tr> |
69 | <td colspan="2">宗地四至-东</td> | 69 | <td colspan="2">宗地四至-东</td> |
70 | <td colspan="4">{{ zdjbxx.zdszd }}</td> | 70 | <td colspan="8">{{ zdjbxx.zdszd }}</td> |
71 | </tr> | 71 | </tr> |
72 | <tr> | 72 | <tr> |
73 | <td colspan="2">宗地四至-南</td> | 73 | <td colspan="2">宗地四至-南</td> |
74 | <td colspan="4">{{ zdjbxx.zdszn }}</td> | 74 | <td colspan="8">{{ zdjbxx.zdszn }}</td> |
75 | </tr> | 75 | </tr> |
76 | <tr> | 76 | <tr> |
77 | <td colspan="2">宗地四至-西</td> | 77 | <td colspan="2">宗地四至-西</td> |
78 | <td colspan="4">{{ zdjbxx.zdszx }}</td> | 78 | <td colspan="8">{{ zdjbxx.zdszx }}</td> |
79 | </tr> | 79 | </tr> |
80 | <tr> | 80 | <tr> |
81 | <td colspan="2">宗地四至-北</td> | 81 | <td colspan="2">宗地四至-北</td> |
82 | <td colspan="4">{{ zdjbxx.zdszb }}</td> | 82 | <td colspan="8">{{ zdjbxx.zdszb }}</td> |
83 | </tr> | 83 | </tr> |
84 | <tr> | 84 | <tr> |
85 | <td class="title2" height="96">备注</td> | 85 | <td class="title2" colspan="2" height="50">备注</td> |
86 | <td colspan="5">{{ zdjbxx.bz }}</td> | 86 | <td colspan="8">{{ zdjbxx.bz }}</td> |
87 | </tr> | 87 | </tr> |
88 | <tr> | 88 | <tr> |
89 | <td class="title2" height="96">附记</td> | 89 | <td class="title2" colspan="2" height="50">附记</td> |
90 | <td colspan="5">{{ zdjbxx.fj }}</td> | 90 | <td colspan="8">{{ zdjbxx.fj }}</td> |
91 | </tr> | 91 | </tr> |
92 | <tr> | 92 | <tr> |
93 | <td colspan="2">状态</td> | 93 | <td colspan="2">状态</td> |
94 | <td colspan="2">{{ zdjbxx.zt }}</td> | 94 | <td colspan="2">{{ zdjbxx.zt }}</td> |
95 | <td>区县代码</td> | 95 | <td>区县代码</td> |
96 | <td>{{ zdjbxx.qxdm }}</td> | 96 | <td colspan="4">{{ zdjbxx.qxdm }}</td> |
97 | </tr> | 97 | </tr> |
98 | <tr v-show="showGroup"> | 98 | <tr v-if="showGroup"> |
99 | <td class="title2">变化情况</td> | 99 | <td colspan="2" class="title3">变化情况</td> |
100 | <td colspan="5" class="bhqk"> | 100 | <td colspan="4" class="bhqk"> |
101 | <div class="box"> | 101 | <div class="box"> |
102 | <table cellspacing="0" cellpadding="0" :width="bhqkTableWidth"> | 102 | <table cellspacing="0" cellpadding="0" :width="bhqkTableWidth"> |
103 | <tr v-for="(item, index) in bhqkColumns" :key="index"> | 103 | <tr v-for="(item, index) in bhqkColumns" :key="index"> |
104 | <td class="bhqkTh">{{ item.label }}</td> | 104 | <td class="bhqkTh">{{ item.label }}</td> |
105 | <!-- <td v-for="(item2, index2) in zdbhqks" :key="index2"> | ||
106 | {{ item2[item.prop] }} | ||
107 | </td> --> | ||
108 | </tr> | 105 | </tr> |
109 | </table> | 106 | </table> |
110 | </div> | 107 | </div> |
... | @@ -159,7 +156,7 @@ | ... | @@ -159,7 +156,7 @@ |
159 | zdjbxx: {}, | 156 | zdjbxx: {}, |
160 | zdbhqks: [], | 157 | zdbhqks: [], |
161 | propsParam: this.$attrs, | 158 | propsParam: this.$attrs, |
162 | showGroup: false, | 159 | showGroup: true, |
163 | bdclxList: ['', '宗地', '宗海', '自然幢', '多幢', '构筑物', '林权', '户'] | 160 | bdclxList: ['', '宗地', '宗海', '自然幢', '多幢', '构筑物', '林权', '户'] |
164 | }; | 161 | }; |
165 | }, | 162 | }, |
... | @@ -183,71 +180,11 @@ | ... | @@ -183,71 +180,11 @@ |
183 | </script> | 180 | </script> |
184 | 181 | ||
185 | <style lang="scss" scoped> | 182 | <style lang="scss" scoped> |
183 | @import "./tablestyle.scss"; | ||
186 | .zdxx { | 184 | .zdxx { |
187 | width: 100%; | 185 | width: 100%; |
188 | height: 100%; | 186 | height: 100%; |
189 | background-color: #f5f5f5; | 187 | background-color: #f5f5f5; |
190 | padding: 5px; | 188 | padding: 5px; |
191 | } | 189 | } |
192 | .tablebox { | ||
193 | overflow-x: auto; | ||
194 | width: 100%; | ||
195 | height: 100%; | ||
196 | background: #fff; | ||
197 | border: 1px solid rgb(228, 228, 228); | ||
198 | text-align: center; | ||
199 | padding: 4px; | ||
200 | overflow-y: scroll; | ||
201 | |||
202 | .zdxxTable { | ||
203 | width: 100%; | ||
204 | color: #333; | ||
205 | |||
206 | td { | ||
207 | border: 1px solid rgb(228, 228, 228); | ||
208 | line-height: 30px; | ||
209 | padding: 0 4px; | ||
210 | } | ||
211 | |||
212 | .title { | ||
213 | line-height: 68px; | ||
214 | font-size: 20px; | ||
215 | } | ||
216 | |||
217 | .unit { | ||
218 | text-align: right; | ||
219 | } | ||
220 | |||
221 | .title2 { | ||
222 | writing-mode: vertical-lr; | ||
223 | letter-spacing: 6px; | ||
224 | } | ||
225 | |||
226 | .bhqk { | ||
227 | padding: 0; | ||
228 | |||
229 | .box { | ||
230 | width: 745px; | ||
231 | overflow: auto; | ||
232 | } | ||
233 | |||
234 | .test { | ||
235 | } | ||
236 | |||
237 | table { | ||
238 | .bhqkTh { | ||
239 | width: 110px; | ||
240 | line-height: 40px; | ||
241 | background-color: #f5f5f5; | ||
242 | border: 1px solid rgb(228, 228, 228); | ||
243 | font-weight: bold; | ||
244 | } | ||
245 | |||
246 | td { | ||
247 | width: 180px; | ||
248 | } | ||
249 | } | ||
250 | } | ||
251 | } | ||
252 | } | ||
253 | </style> | 190 | </style> | ... | ... |
... | @@ -23,315 +23,315 @@ | ... | @@ -23,315 +23,315 @@ |
23 | </template> | 23 | </template> |
24 | 24 | ||
25 | <script> | 25 | <script> |
26 | import { getUuid, judgeSort, realMove, findParents, removeTreeListItem } from '@/utils/operation' | 26 | import { getUuid, judgeSort, realMove, findParents, removeTreeListItem } from '@/utils/operation' |
27 | import { editDictNode, getChildDictList } from '@/api/user' | 27 | import { editDictNode, getChildDictList } from '@/api/user' |
28 | export default { | 28 | export default { |
29 | props: { | 29 | props: { |
30 | value: { type: Boolean, default: false }, | 30 | value: { type: Boolean, default: false }, |
31 | details: { | 31 | details: { |
32 | type: Object, | 32 | type: Object, |
33 | default: {} | 33 | default: {} |
34 | } | 34 | } |
35 | }, | 35 | }, |
36 | data () { | 36 | data () { |
37 | return { | 37 | return { |
38 | key: 0, | 38 | key: 0, |
39 | myValue: this.value, | 39 | myValue: this.value, |
40 | keyList: [], | 40 | keyList: [], |
41 | ruleForm: { | 41 | ruleForm: { |
42 | dcode: '', | 42 | dcode: '', |
43 | dname: '' | 43 | dname: '' |
44 | }, | ||
45 | column: [], | ||
46 | columns: [ | ||
47 | { | ||
48 | width: '70', | ||
49 | renderHeader: (h, scope) => { | ||
50 | return (<div> | ||
51 | { | ||
52 | this.details.isenable === '0' ? | ||
53 | <span>序号</span> : | ||
54 | <i class="el-icon-plus" onClick={() => { this.handleAdd() }} style="cursor:pointer;color:#409EFF"></i> | ||
55 | } | ||
56 | </div>) | ||
57 | }, | ||
58 | render: (h, scope) => { | ||
59 | return ( | ||
60 | <span>{scope.row.index}</span> | ||
61 | ) | ||
62 | } | ||
63 | }, | 44 | }, |
64 | { | 45 | column: [], |
65 | prop: 'dcode', | 46 | columns: [ |
66 | width: '100', | 47 | { |
67 | label: '字典项编码', | 48 | width: '70', |
68 | render: (h, scope) => { | 49 | renderHeader: (h, scope) => { |
69 | return ( | 50 | return (<div> |
70 | <div> | 51 | { |
71 | <el-input placeholder="字典项编码" disabled={this.details.isenable == 2} v-show={scope.row.codeShow} v-fo value={scope.row[scope.column.property]} | 52 | this.details.isenable === '0' ? |
72 | onFocus={() => { this.itemShowFalse(); scope.row.codeShow = true; }} | 53 | <span>序号</span> : |
73 | onInput={(val) => { scope.row[scope.column.property] = val; this.itemShowFalse(); scope.row.codeShow = true; }} maxlength='8'></el-input> | 54 | <i class="el-icon-plus" onClick={() => { this.handleAdd() }} style="cursor:pointer;color:#409EFF"></i> |
55 | } | ||
56 | </div>) | ||
57 | }, | ||
58 | render: (h, scope) => { | ||
59 | return ( | ||
60 | <span>{scope.row.index}</span> | ||
61 | ) | ||
62 | } | ||
63 | }, | ||
64 | { | ||
65 | prop: 'dcode', | ||
66 | width: '100', | ||
67 | label: '字典项编码', | ||
68 | render: (h, scope) => { | ||
69 | return ( | ||
70 | <div> | ||
71 | <el-input placeholder="字典项编码" disabled={this.details.isenable == 2} v-show={scope.row.codeShow} v-fo value={scope.row[scope.column.property]} | ||
72 | onFocus={() => { this.itemShowFalse(); scope.row.codeShow = true; }} | ||
73 | onInput={(val) => { scope.row[scope.column.property] = val; this.itemShowFalse(); scope.row.codeShow = true; }} maxlength='8'></el-input> | ||
74 | 74 | ||
75 | 75 | ||
76 | <el-input placeholder="字典项编码" disabled={this.details.isenable == 2} v-show={!scope.row.codeShow} value={scope.row[scope.column.property]} | 76 | <el-input placeholder="字典项编码" disabled={this.details.isenable == 2} v-show={!scope.row.codeShow} value={scope.row[scope.column.property]} |
77 | onFocus={() => { this.itemShowFalse(); scope.row.codeShow = true; }} | 77 | onFocus={() => { this.itemShowFalse(); scope.row.codeShow = true; }} |
78 | onInput={(val) => { scope.row[scope.column.property] = val; this.itemShowFalse(); scope.row.codeShow = true; }} maxlength='8'></el-input> | 78 | onInput={(val) => { scope.row[scope.column.property] = val; this.itemShowFalse(); scope.row.codeShow = true; }} maxlength='8'></el-input> |
79 | </div> | 79 | </div> |
80 | ) | 80 | ) |
81 | } | 81 | } |
82 | }, | 82 | }, |
83 | { | 83 | { |
84 | prop: 'dname', | 84 | prop: 'dname', |
85 | label: '字典项名称', | 85 | label: '字典项名称', |
86 | render: (h, scope) => { | 86 | render: (h, scope) => { |
87 | return ( | 87 | return ( |
88 | <div> | 88 | <div> |
89 | <el-input placeholder="字典项编码" disabled={this.details.isenable == 2} v-show={scope.row.nameShow} v-fo value={scope.row[scope.column.property]} | 89 | <el-input placeholder="字典项编码" disabled={this.details.isenable == 2} v-show={scope.row.nameShow} v-fo value={scope.row[scope.column.property]} |
90 | onFocus={() => { this.itemShowFalse(); scope.row.nameShow = true; }} | 90 | onFocus={() => { this.itemShowFalse(); scope.row.nameShow = true; }} |
91 | onInput={(val) => { scope.row[scope.column.property] = val; this.itemShowFalse(); scope.row.codeShow = true; }}></el-input> | 91 | onInput={(val) => { scope.row[scope.column.property] = val; this.itemShowFalse(); scope.row.codeShow = true; }}></el-input> |
92 | 92 | ||
93 | <el-input placeholder="字典项名称" disabled={this.details.isenable == 2} v-show={!scope.row.nameShow} value={scope.row[scope.column.property]} | 93 | <el-input placeholder="字典项名称" disabled={this.details.isenable == 2} v-show={!scope.row.nameShow} value={scope.row[scope.column.property]} |
94 | onFocus={() => { this.itemShowFalse(); scope.row.nameShow = true; }} | 94 | onFocus={() => { this.itemShowFalse(); scope.row.nameShow = true; }} |
95 | onInput={(val) => { scope.row[scope.column.property] = val; this.itemShowFalse(); scope.row.codeShow = true; }}></el-input> | 95 | onInput={(val) => { scope.row[scope.column.property] = val; this.itemShowFalse(); scope.row.codeShow = true; }}></el-input> |
96 | </div> | 96 | </div> |
97 | ) | 97 | ) |
98 | } | 98 | } |
99 | }, | 99 | }, |
100 | { | 100 | { |
101 | prop: 'normcode', | 101 | prop: 'normcode', |
102 | label: '部标编码', | 102 | label: '部标编码', |
103 | width: '100', | 103 | width: '100', |
104 | render: (h, scope) => { | 104 | render: (h, scope) => { |
105 | return ( | 105 | return ( |
106 | <div> | 106 | <div> |
107 | <el-input placeholder="部标编码" disabled={this.details.isenable == 2} v-show={scope.row.normcodeShow} v-fo value={scope.row[scope.column.property]} | 107 | <el-input placeholder="部标编码" disabled={this.details.isenable == 2} v-show={scope.row.normcodeShow} v-fo value={scope.row[scope.column.property]} |
108 | onFocus={() => { this.itemShowFalse(); scope.row.normcodeShow = true; }} | 108 | onFocus={() => { this.itemShowFalse(); scope.row.normcodeShow = true; }} |
109 | onInput={(val) => { scope.row[scope.column.property] = val; this.itemShowFalse(); scope.row.codeShow = true; }} maxlength='8'></el-input> | 109 | onInput={(val) => { scope.row[scope.column.property] = val; this.itemShowFalse(); scope.row.codeShow = true; }} maxlength='8'></el-input> |
110 | 110 | ||
111 | <el-input placeholder="部标编码" disabled={this.details.isenable == 2} v-show={!scope.row.normcodeShow} value={scope.row[scope.column.property]} | 111 | <el-input placeholder="部标编码" disabled={this.details.isenable == 2} v-show={!scope.row.normcodeShow} value={scope.row[scope.column.property]} |
112 | onFocus={() => { this.itemShowFalse(); scope.row.normcodeShow = true; }} | 112 | onFocus={() => { this.itemShowFalse(); scope.row.normcodeShow = true; }} |
113 | onInput={(val) => { scope.row[scope.column.property] = val; this.itemShowFalse(); scope.row.codeShow = true; }} maxlength='8'></el-input> | 113 | onInput={(val) => { scope.row[scope.column.property] = val; this.itemShowFalse(); scope.row.codeShow = true; }} maxlength='8'></el-input> |
114 | </div> | 114 | </div> |
115 | ) | 115 | ) |
116 | } | 116 | } |
117 | }, | 117 | }, |
118 | { | 118 | { |
119 | prop: 'normname', | 119 | prop: 'normname', |
120 | label: '部标名称', | 120 | label: '部标名称', |
121 | render: (h, scope) => { | 121 | render: (h, scope) => { |
122 | return ( | 122 | return ( |
123 | <div> | 123 | <div> |
124 | <el-input placeholder="部标名称" disabled={this.details.isenable == 2} v-show={scope.row.normnameShow} v-fo value={scope.row[scope.column.property]} | 124 | <el-input placeholder="部标名称" disabled={this.details.isenable == 2} v-show={scope.row.normnameShow} v-fo value={scope.row[scope.column.property]} |
125 | onFocus={() => { this.itemShowFalse(); scope.row.normnameShow = true; }} | 125 | onFocus={() => { this.itemShowFalse(); scope.row.normnameShow = true; }} |
126 | onInput={(val) => { scope.row[scope.column.property] = val; this.itemShowFalse(); scope.row.codeShow = true; }}></el-input> | 126 | onInput={(val) => { scope.row[scope.column.property] = val; this.itemShowFalse(); scope.row.codeShow = true; }}></el-input> |
127 | 127 | ||
128 | <el-input placeholder="部标名称" disabled={this.details.isenable == 2} v-show={!scope.row.normnameShow} value={scope.row[scope.column.property]} | 128 | <el-input placeholder="部标名称" disabled={this.details.isenable == 2} v-show={!scope.row.normnameShow} value={scope.row[scope.column.property]} |
129 | onFocus={() => { this.itemShowFalse(); scope.row.normnameShow = true; }} | 129 | onFocus={() => { this.itemShowFalse(); scope.row.normnameShow = true; }} |
130 | onInput={(val) => { scope.row[scope.column.property] = val; this.itemShowFalse(); scope.row.codeShow = true; }}></el-input> | 130 | onInput={(val) => { scope.row[scope.column.property] = val; this.itemShowFalse(); scope.row.codeShow = true; }}></el-input> |
131 | </div> | 131 | </div> |
132 | ) | 132 | ) |
133 | } | 133 | } |
134 | }, | 134 | }, |
135 | { | 135 | { |
136 | prop: 'isenable', | 136 | prop: 'isenable', |
137 | width: '160', | 137 | width: '160', |
138 | label: '是否禁用', | 138 | label: '是否禁用', |
139 | render: (h, scope) => { | 139 | render: (h, scope) => { |
140 | return ( | 140 | return ( |
141 | <el-radio-group disabled={this.details.isenable == 2} v-model={scope.row.isenable}> | 141 | <el-radio-group disabled={this.details.isenable == 2} v-model={scope.row.isenable}> |
142 | <el-radio label="1">启用</el-radio> | 142 | <el-radio label="1">启用</el-radio> |
143 | <el-radio label="0">禁用</el-radio> | 143 | <el-radio label="0">禁用</el-radio> |
144 | </el-radio-group> | 144 | </el-radio-group> |
145 | ) | 145 | ) |
146 | } | ||
147 | }, | ||
148 | { | ||
149 | width: '130', | ||
150 | label: '移动', | ||
151 | render: (h, scope) => { | ||
152 | return ( | ||
153 | <div> | ||
154 | <el-button type='text' disabled={scope.row.isTop} onClick={() => { this.moveUpward(scope.$index, scope.row) }}>上移</el-button> | ||
155 | <el-button type='text' disabled={scope.row.isBottom} onClick={() => { this.moveDown(scope.$index, scope.row) }}>下移</el-button > | ||
156 | </div > | ||
157 | ) | ||
158 | } | ||
159 | }, | ||
160 | { | ||
161 | width: '150', | ||
162 | label: '操作', | ||
163 | render: (h, scope) => { | ||
164 | return ( | ||
165 | <div> | ||
166 | <el-button type="text" style="margin-right:10px" onClick={() => { this.handleAddSubordinate(scope.row) }}>增加下级</el-button> | ||
167 | <el-button type="text" style="margin-left:0" onClick={() => { this.handleMinus(scope.$index, scope.row) }}>删除</el-button> | ||
168 | </div> | ||
169 | ) | ||
170 | } | ||
146 | } | 171 | } |
172 | ], | ||
173 | tableData: [] | ||
174 | } | ||
175 | }, | ||
176 | watch: { | ||
177 | value (val) { | ||
178 | this.myValue = val | ||
179 | }, | ||
180 | 'details.bsmDict': { | ||
181 | handler: function (newValue) { | ||
182 | if (!this.value) return | ||
183 | this.$startLoading(); | ||
184 | getChildDictList(newValue).then(res => { | ||
185 | this.$endLoading(); | ||
186 | let { result } = res | ||
187 | this.tableData = result ? result : [] | ||
188 | this.tableData.forEach((item, index) => { | ||
189 | item.index = index + 1 | ||
190 | }) | ||
191 | }) | ||
147 | }, | 192 | }, |
148 | { | 193 | immediate: true |
149 | width: '130', | 194 | }, |
150 | label: '移动', | 195 | details: { |
151 | render: (h, scope) => { | 196 | handler: function (newValue) { |
152 | return ( | 197 | if (newValue.isenable == 2) { |
153 | <div> | 198 | this.column = this.columns.slice(0, 6) |
154 | <el-button type='text' disabled={scope.row.isTop} onClick={() => { this.moveUpward(scope.$index, scope.row) }}>上移</el-button> | 199 | } else { |
155 | <el-button type='text' disabled={scope.row.isBottom} onClick={() => { this.moveDown(scope.$index, scope.row) }}>下移</el-button > | 200 | this.column = this.columns |
156 | </div > | ||
157 | ) | ||
158 | } | 201 | } |
202 | this.ruleForm = newValue.rowData | ||
203 | this.addIndexes() | ||
204 | this.key++ | ||
159 | }, | 205 | }, |
160 | { | 206 | deep: true |
161 | width: '150', | 207 | } |
162 | label: '操作', | ||
163 | render: (h, scope) => { | ||
164 | return ( | ||
165 | <div> | ||
166 | <el-button type="text" style="margin-right:10px" onClick={() => { this.handleAddSubordinate(scope.row) }}>增加下级</el-button> | ||
167 | <el-button type="text" style="margin-left:0" onClick={() => { this.handleMinus(scope.$index, scope.row) }}>删除</el-button> | ||
168 | </div> | ||
169 | ) | ||
170 | } | ||
171 | } | ||
172 | ], | ||
173 | tableData: [] | ||
174 | } | ||
175 | }, | ||
176 | watch: { | ||
177 | value (val) { | ||
178 | this.myValue = val | ||
179 | }, | 208 | }, |
180 | 'details.bsmDict': { | 209 | methods: { |
181 | handler: function (newValue) { | 210 | // 添加索引 |
182 | if (!this.value) return | 211 | addIndexes (data = this.tableData, isAdd = true) { |
183 | this.$startLoading(); | 212 | data.forEach((item, index) => { |
184 | getChildDictList(newValue).then(res => { | 213 | if (index == 0) { |
185 | this.$endLoading(); | 214 | item.codeShow = true |
186 | let { result } = res | 215 | item.nameShow = false |
187 | this.tableData = result ? result : [] | 216 | item.normcodeShow = false |
188 | this.tableData.forEach((item, index) => { | 217 | item.normnameShow = false |
218 | } else { | ||
219 | item.codeShow = false | ||
220 | item.nameShow = false | ||
221 | item.normcodeShow = false | ||
222 | item.normnameShow = false | ||
223 | } | ||
224 | if (isAdd) { | ||
189 | item.index = index + 1 | 225 | item.index = index + 1 |
190 | }) | 226 | } |
227 | if (item.children) { | ||
228 | this.addIndexes(item.children, false) | ||
229 | } | ||
191 | }) | 230 | }) |
192 | }, | 231 | }, |
193 | immediate: true | 232 | itemShowFalse () { |
194 | }, | 233 | this.tableData.forEach((item, index) => { |
195 | details: { | ||
196 | handler: function (newValue) { | ||
197 | if (newValue.isenable == 2) { | ||
198 | this.column = this.columns.slice(0, 6) | ||
199 | } else { | ||
200 | this.column = this.columns | ||
201 | } | ||
202 | this.ruleForm = newValue.rowData | ||
203 | this.addIndexes() | ||
204 | this.key++ | ||
205 | }, | ||
206 | deep: true | ||
207 | } | ||
208 | }, | ||
209 | methods: { | ||
210 | // 添加索引 | ||
211 | addIndexes (data = this.tableData, isAdd = true) { | ||
212 | data.forEach((item, index) => { | ||
213 | if (index == 0) { | ||
214 | item.codeShow = true | ||
215 | item.nameShow = false | ||
216 | item.normcodeShow = false | ||
217 | item.normnameShow = false | ||
218 | } else { | ||
219 | item.codeShow = false | 234 | item.codeShow = false |
220 | item.nameShow = false | 235 | item.nameShow = false |
221 | item.normcodeShow = false | 236 | item.normcodeShow = false |
222 | item.normnameShow = false | 237 | item.normnameShow = false |
223 | } | ||
224 | if (isAdd) { | ||
225 | item.index = index + 1 | ||
226 | } | ||
227 | if (item.children) { | ||
228 | this.addIndexes(item.children, false) | ||
229 | } | ||
230 | }) | ||
231 | }, | ||
232 | itemShowFalse () { | ||
233 | this.tableData.forEach((item, index) => { | ||
234 | item.codeShow = false | ||
235 | item.nameShow = false | ||
236 | item.normcodeShow = false | ||
237 | item.normnameShow = false | ||
238 | }) | ||
239 | }, | ||
240 | handleMinus (index, row) { | ||
241 | this.$confirm('此操作将永久删除, 是否继续?', '提示', { | ||
242 | confirmButtonText: '确定', | ||
243 | cancelButtonText: '取消', | ||
244 | type: 'warning' | ||
245 | }).then(() => { | ||
246 | removeTreeListItem(this.tableData, row.bsmDict) | ||
247 | this.$message({ | ||
248 | type: 'success', | ||
249 | message: '删除成功!' | ||
250 | }) | ||
251 | }).catch(() => { | ||
252 | this.$message({ | ||
253 | type: 'info', | ||
254 | message: '已取消删除' | ||
255 | }) | 238 | }) |
256 | }) | 239 | }, |
257 | }, | 240 | handleMinus (index, row) { |
258 | handleSubmit () { | 241 | this.$confirm('此操作将永久删除, 是否继续?', '提示', { |
259 | editDictNode({ | 242 | confirmButtonText: '确定', |
260 | bsmDict: this.details.rowData.bsmDict, | 243 | cancelButtonText: '取消', |
261 | typeid: this.details.rowData.typeid, | 244 | type: 'warning' |
262 | children: this.tableData | 245 | }).then(() => { |
263 | }).then(res => { | 246 | removeTreeListItem(this.tableData, row.bsmDict) |
264 | if (res.code === 200) { | ||
265 | this.$message({ | 247 | this.$message({ |
266 | message: '修改成功', | 248 | type: 'success', |
267 | type: 'success' | 249 | message: '删除成功!' |
268 | }) | 250 | }) |
269 | this.$emit('input', false) | 251 | }).catch(() => { |
252 | this.$message({ | ||
253 | type: 'info', | ||
254 | message: '已取消删除' | ||
255 | }) | ||
256 | }) | ||
257 | }, | ||
258 | handleSubmit () { | ||
259 | editDictNode({ | ||
260 | bsmDict: this.details.rowData.bsmDict, | ||
261 | typeid: this.details.rowData.typeid, | ||
262 | children: this.tableData | ||
263 | }).then(res => { | ||
264 | if (res.code === 200) { | ||
265 | this.$message({ | ||
266 | message: '修改成功', | ||
267 | type: 'success' | ||
268 | }) | ||
269 | this.$emit('input', false) | ||
270 | } | ||
271 | }) | ||
272 | }, | ||
273 | closeDialog () { | ||
274 | this.$emit('input', false) | ||
275 | }, | ||
276 | // 增加下级 | ||
277 | handleAddSubordinate (row) { | ||
278 | if (!row.children) { | ||
279 | row.children = [] | ||
270 | } | 280 | } |
271 | }) | 281 | row.children.push( |
272 | }, | 282 | { |
273 | closeDialog () { | 283 | dcode: '', |
274 | this.$emit('input', false) | 284 | dname: '', |
275 | }, | 285 | isenable: '1', |
276 | // 增加下级 | 286 | normcode: '', |
277 | handleAddSubordinate (row) { | 287 | normname: '', |
278 | if (!row.children) { | 288 | bsmDict: getUuid(32), |
279 | row.children = [] | 289 | typeid: row.typeid, |
290 | } | ||
291 | ) | ||
292 | this.keyList = []; | ||
293 | this.keyList.push(row.bsmDict) | ||
294 | }, | ||
295 | // 增加 | ||
296 | handleAdd () { | ||
297 | this.$nextTick(() => { | ||
298 | let container = this.$el.querySelector('.el-table__body-wrapper'); | ||
299 | container.scrollTop = container.scrollHeight; | ||
300 | }) | ||
301 | this.tableData.push( | ||
302 | { | ||
303 | dcode: '', | ||
304 | dname: '', | ||
305 | isenable: '1', | ||
306 | normcode: '', | ||
307 | normname: '', | ||
308 | bsmDict: getUuid(32), | ||
309 | typeid: this.ruleForm.typeid, | ||
310 | } | ||
311 | ) | ||
312 | this.addIndexes() | ||
313 | this.key++ | ||
314 | }, | ||
315 | // 上移下移 | ||
316 | moveUpward (index, row) { | ||
317 | realMove(row.bsmDict, 'UP', this.tableData) | ||
318 | this.key++ | ||
319 | let id = findParents(this.tableData, row.bsmDict) | ||
320 | this.keyList = id | ||
321 | }, | ||
322 | moveDown (index, row) { | ||
323 | realMove(row.bsmDict, 'DOWN', this.tableData) | ||
324 | this.key++ | ||
325 | let id = findParents(this.tableData, row.bsmDict) | ||
326 | this.keyList = id | ||
280 | } | 327 | } |
281 | row.children.push( | ||
282 | { | ||
283 | dcode: '', | ||
284 | dname: '', | ||
285 | isenable: '1', | ||
286 | normcode: '', | ||
287 | normname: '', | ||
288 | bsmDict: getUuid(32), | ||
289 | typeid: row.typeid, | ||
290 | } | ||
291 | ) | ||
292 | this.keyList = []; | ||
293 | this.keyList.push(row.bsmDict) | ||
294 | }, | ||
295 | // 增加 | ||
296 | handleAdd () { | ||
297 | this.$nextTick(() => { | ||
298 | let container = this.$el.querySelector('.el-table__body-wrapper'); | ||
299 | container.scrollTop = container.scrollHeight; | ||
300 | }) | ||
301 | this.tableData.push( | ||
302 | { | ||
303 | dcode: '', | ||
304 | dname: '', | ||
305 | isenable: '1', | ||
306 | normcode: '', | ||
307 | normname: '', | ||
308 | bsmDict: getUuid(32), | ||
309 | typeid: this.ruleForm.typeid, | ||
310 | } | ||
311 | ) | ||
312 | this.addIndexes() | ||
313 | this.key++ | ||
314 | }, | ||
315 | // 上移下移 | ||
316 | moveUpward (index, row) { | ||
317 | realMove(row.bsmDict, 'UP', this.tableData) | ||
318 | this.key++ | ||
319 | let id = findParents(this.tableData, row.bsmDict) | ||
320 | this.keyList = id | ||
321 | }, | ||
322 | moveDown (index, row) { | ||
323 | realMove(row.bsmDict, 'DOWN', this.tableData) | ||
324 | this.key++ | ||
325 | let id = findParents(this.tableData, row.bsmDict) | ||
326 | this.keyList = id | ||
327 | } | 328 | } |
328 | } | 329 | } |
329 | } | ||
330 | </script> | 330 | </script> |
331 | <style rel="stylesheet/scss" lang="scss" scoped> | 331 | <style rel="stylesheet/scss" lang="scss" scoped> |
332 | @import "~@/styles/dialogBoxheader.scss"; | 332 | @import "~@/styles/dialogBoxheader.scss"; |
333 | /deep/.el-radio { | 333 | /deep/.el-radio { |
334 | margin-right: 5px !important; | 334 | margin-right: 5px !important; |
335 | } | 335 | } |
336 | </style> | 336 | </style> |
337 | 337 | ... | ... |
-
Please register or sign in to post a comment