Merge branch 'dev' of http://yun.pashanhoo.com:9090/bdc/bdcdj-web into dev
Showing
3 changed files
with
389 additions
and
71 deletions
src/api/SysDjbFieldDO.js
0 → 100644
1 | /* | ||
2 | * @Description: 字典接口 | ||
3 | * @Autor: renchao | ||
4 | * @LastEditTime: 2023-05-16 16:06:51 | ||
5 | */ | ||
6 | import request from '@/utils/request' | ||
7 | let SERVER = window.config ? window.config : JSON.parse(localStorage.getItem('ApiUrl')) | ||
8 | |||
9 | /** | ||
10 | * @description: 获取登记簿全部字段 | ||
11 | * @author: renchao | ||
12 | */ | ||
13 | export function getFieldList (params) { | ||
14 | return request({ | ||
15 | url: SERVER.SERVERAPI + '/rest/sys/SysDjbFieldDO/getFieldList', | ||
16 | method: 'get', | ||
17 | params | ||
18 | }) | ||
19 | } | ||
20 | /** | ||
21 | * @description: 获取登记簿打印字段 | ||
22 | * @author: renchao | ||
23 | */ | ||
24 | export function getFieldListByQlxx (params) { | ||
25 | return request({ | ||
26 | url: SERVER.SERVERAPI + '/rest/sys/SysDjbFieldDO/getFieldListByQlxx', | ||
27 | method: 'get', | ||
28 | params | ||
29 | }) | ||
30 | } | ||
31 | /** | ||
32 | * @description: 保存登记簿打印字段 | ||
33 | * @param {*} data | ||
34 | * @author: renchao | ||
35 | */ | ||
36 | export function save (bsmMb,data) { | ||
37 | return request({ | ||
38 | url: SERVER.SERVERAPI + `/rest/sys/SysDjbFieldDO/save/${bsmMb}`, | ||
39 | method: 'post', | ||
40 | data | ||
41 | }) | ||
42 | } | ||
43 | |||
44 | /** | ||
45 | * @description: 获取登记簿打印字段 | ||
46 | * @author: renchao | ||
47 | */ | ||
48 | // export function getQllxList () { | ||
49 | // return request({ | ||
50 | // url: SERVER.SERVERAPI + '/rest/sys/SysDjbFieldDO/getQllxList', | ||
51 | // method: 'get' | ||
52 | // }) | ||
53 | // } |
... | @@ -4,115 +4,379 @@ | ... | @@ -4,115 +4,379 @@ |
4 | * @LastEditTime: 2023-07-19 16:04:58 | 4 | * @LastEditTime: 2023-07-19 16:04:58 |
5 | --> | 5 | --> |
6 | <template> | 6 | <template> |
7 | <div style="text-align: center" class="djbdisposition"> | 7 | <div style="text-align: center" class="transfer"> |
8 | <el-transfer | 8 | <el-transfer |
9 | style="text-align: left; display: inline-block" | ||
10 | v-model="value4" | ||
11 | filterable | 9 | filterable |
10 | :filter-method="filterMethod" | ||
11 | filter-placeholder="请输入关键词搜索" | ||
12 | v-model="value" | ||
13 | target-order="unshift" | ||
12 | :left-default-checked="[]" | 14 | :left-default-checked="[]" |
13 | :right-default-checked="[]" | 15 | :right-default-checked="[]" |
14 | :titles="['全选', '全选']" | 16 | :titles="['待选合集', '已选合集']" |
15 | :button-texts="['转到左边', '转到右边']" | 17 | :button-texts="['转到左边', '转到右边']" |
16 | :format="{ | 18 | @right-check-change="choose" |
17 | noChecked: '${total}', | 19 | :data="datalist" |
18 | hasChecked: '${checked}/${total}' | 20 | v-loading="loading" |
19 | }" | 21 | > |
20 | @change="handleChange" | 22 | <div slot-scope="{ option }"> |
21 | :data="data"> | 23 | <div |
22 | <span slot-scope="{ option }">{{ option.key }} - {{ option.label }}</span> | 24 | class="default-tranfer-item" |
25 | @mouseenter="indexKey = option.key" | ||
26 | @mouseleave="indexKey = null" | ||
27 | > | ||
28 | <span>{{ option.despriction }}</span> | ||
29 | <div | ||
30 | v-show="value.includes(option.key) && indexKey === option.key" | ||
31 | class="button-group" | ||
32 | > | ||
33 | <!-- 阻止事件冒泡 --> | ||
34 | <!-- 自定义数据项,将上、下、底部、顶部的排序功能放在数据项里面 --> | ||
35 | <em | ||
36 | class="el-icon-top" | ||
37 | @click.stop.prevent="publicMobileMethod('handleUp', option.key)" | ||
38 | ></em> | ||
39 | <em | ||
40 | class="iconfont icon-huidaodingbu" | ||
41 | @click.stop.prevent="publicMobileMethod('handleTop', option.key)" | ||
42 | ></em> | ||
43 | <em | ||
44 | class="el-icon-bottom" | ||
45 | @click.stop.prevent="publicMobileMethod('handleDown', option.key)" | ||
46 | ></em> | ||
47 | <em | ||
48 | class="el-icon-download" | ||
49 | @click.stop.prevent=" | ||
50 | publicMobileMethod('handleBottom', option.key) | ||
51 | " | ||
52 | ></em> | ||
53 | </div> | ||
54 | </div> | ||
55 | </div> | ||
23 | </el-transfer> | 56 | </el-transfer> |
24 | <div class="btn"> | 57 | <div class="btn"> |
25 | <el-button @click="$popupCacel">取消</el-button> | 58 | <el-button @click="$popupCacel">取消</el-button> |
26 | <el-button type="primary" @click="submitForm" plain>确定</el-button> | 59 | <el-button type="primary" @click="submitForm" plain>确定</el-button> |
27 | </div> | 60 | </div> |
61 | <!-- <footer class="footer"> | ||
62 | <div> | ||
63 | <el-button class="cancel" size="mini" @click="$popupCacel">取消</el-button> | ||
64 | <el-button class="determine" size="mini" @click="submitForm">确定</el-button> | ||
65 | </div> | ||
66 | </footer> --> | ||
28 | </div> | 67 | </div> |
29 | </template> | 68 | </template> |
30 | 69 | ||
31 | <script> | 70 | <script> |
32 | import { updateSysSqywmbsz, getSysSqywmbszDetailById } from '@/api/sysSqywmbsz' | 71 | import { getFieldList, getFieldListByQlxx, save } from "@/api/SysDjbFieldDO"; |
33 | export default { | 72 | export default { |
34 | props: { | 73 | props: { |
35 | formData: { | 74 | formData: { |
36 | type: Object, | 75 | type: Object, |
37 | default: () => { } | 76 | default: () => {}, |
38 | } | ||
39 | }, | 77 | }, |
40 | mounted () { | ||
41 | console.log("this.formData",this.formData); | ||
42 | // if (this.formData.bsmMb) { | ||
43 | // this.$startLoading() | ||
44 | // getSysSqywmbszDetailById(this.formData.bsmMb).then(res => { | ||
45 | // this.$endLoading() | ||
46 | // let { result } = res | ||
47 | // this.ruleForm = result ? result : {} | ||
48 | // }) | ||
49 | // } | ||
50 | }, | 78 | }, |
51 | data() { | 79 | data() { |
52 | const generateData = _ => { | ||
53 | const data = []; | ||
54 | for (let i = 1; i <= 43; i++) { | ||
55 | data.push({ | ||
56 | key: i, | ||
57 | label: `备选项 ${ i }`, | ||
58 | disabled: i % 4 === 0 | ||
59 | }); | ||
60 | } | ||
61 | return data; | ||
62 | }; | ||
63 | return { | 80 | return { |
64 | data: generateData(), | 81 | loading: true, |
65 | value4: [], | 82 | datalist:[], |
83 | list: [], // 全部数据 | ||
84 | value: [], // 选中数据 | ||
85 | item: [], // 右侧勾选数据 | ||
86 | chuanlist: [], | ||
87 | indexKey: null, // 高亮显示 | ||
88 | filterMethod(query, item) { | ||
89 | return item.despriction.indexOf(query) > -1; | ||
90 | }, | ||
66 | }; | 91 | }; |
67 | }, | 92 | }, |
93 | mounted() { | ||
94 | this.generateData(); | ||
95 | }, | ||
68 | 96 | ||
69 | methods: { | 97 | methods: { |
70 | handleChange(value, direction, movedKeys) { | 98 | /** |
71 | console.log("shijian ",this.data.value, direction, movedKeys); | 99 | * 初始数据集 |
100 | * @returns {*[]} | ||
101 | */ | ||
102 | generateData() { | ||
103 | const data = []; | ||
104 | this.value = []; | ||
105 | getFieldList({ qllx: this.formData.qllx }).then((res) => { | ||
106 | if (res.code === 200) { | ||
107 | let listss = res.result; | ||
108 | listss.forEach((item, index) => { | ||
109 | this.list.push({ | ||
110 | key: index, | ||
111 | name: item.name, | ||
112 | despriction: item.despriction, | ||
113 | }); | ||
114 | }); | ||
115 | getFieldListByQlxx({ qllx: this.formData.qllx }).then((res) => { | ||
116 | let listss = res.result; | ||
117 | if (res.code === 200) { | ||
118 | this.list.forEach((el, idx) => { | ||
119 | listss.forEach((item) => { | ||
120 | if (el.name == item.name) { | ||
121 | this.value.push(idx); | ||
122 | } | ||
123 | }); | ||
124 | }); | ||
125 | this.datalist=this.list | ||
126 | // this.list.forEach((item,index) => { | ||
127 | // this.value.push({ | ||
128 | // key: index, | ||
129 | // name:item.name, | ||
130 | // despriction: item.despriction, | ||
131 | // }); | ||
132 | // }); | ||
133 | } | ||
134 | }); | ||
135 | } | ||
136 | }); | ||
72 | }, | 137 | }, |
138 | /** | ||
139 | * 确定选择 | ||
140 | */ | ||
141 | submitForm() { | ||
142 | this.value.forEach((item) => { | ||
143 | this.chuanlist.push(this.list[item]); | ||
144 | }); | ||
73 | 145 | ||
74 | 146 | save(this.formData.bsmMb, this.chuanlist).then((res) => { | |
147 | if (res.code == 200) { | ||
148 | this.$popupCacel(); | ||
149 | this.$message({ | ||
150 | message: "保存成功", | ||
151 | type: "success", | ||
152 | }); | ||
153 | } else { | ||
154 | this.$message({ | ||
155 | message: "保存失败", | ||
156 | type: "error", | ||
157 | }); | ||
158 | } | ||
159 | }); | ||
160 | }, | ||
75 | /** | 161 | /** |
76 | * @description: submitForm | 162 | * 监听右侧选中 |
77 | * @author: renchao | ||
78 | */ | 163 | */ |
79 | submitForm () { | 164 | choose(value) { |
80 | let that = this | 165 | this.item = value; |
81 | updateSysSqywmbsz(this.ruleForm).then(res => { | 166 | }, |
82 | if (res.code === 200) { | 167 | /** |
83 | this.$popupCacel() | 168 | * 右侧数据点击排序 |
84 | that.$message({ | 169 | */ |
85 | message: '修改成功', | 170 | publicMobileMethod(direction, key) { |
86 | type: 'success' | 171 | const self = this; |
87 | }) | 172 | let index; |
173 | // 判断是否超出一条 | ||
174 | const item = self.item; | ||
175 | if (item.length === 1 || item.length === 0) { | ||
176 | self.value.forEach((val, indexs) => { | ||
177 | // 获取需移动数据的下标 | ||
178 | if (val === key) { | ||
179 | index = indexs; | ||
88 | } | 180 | } |
89 | }) | 181 | }); |
182 | if ( | ||
183 | index === 0 && | ||
184 | direction !== "handleBottom" && | ||
185 | direction !== "handleDown" | ||
186 | ) { | ||
187 | return self.$message("没有上移的空间了"); | ||
90 | } | 188 | } |
189 | if ( | ||
190 | index === self.value.length - 1 && | ||
191 | direction !== "handleUp" && | ||
192 | direction !== "handleTop" | ||
193 | ) { | ||
194 | return self.$message("没有下移的空间了"); | ||
91 | } | 195 | } |
196 | // 改变的数组 | ||
197 | const changeItem = self.value[index]; | ||
198 | // 根据下标在数组中删除该数据 | ||
199 | self.value.splice(index, 1); | ||
200 | // 判断加入数组位置 | ||
201 | if (direction) { | ||
202 | // 置顶 | ||
203 | direction === "handleTop" && self.value.unshift(changeItem); | ||
204 | // 置底 | ||
205 | direction === "handleBottom" && self.value.push(changeItem); | ||
206 | // 上移 | ||
207 | direction === "handleUp" && | ||
208 | self.value.splice(index - 1, 0, changeItem); | ||
209 | // 下移 | ||
210 | direction === "handleDown" && | ||
211 | self.value.splice(index + 1, 0, changeItem); | ||
92 | } | 212 | } |
213 | } else { | ||
214 | self.$message.error("只能选择一条数据进行上下移动"); | ||
215 | } | ||
216 | }, | ||
217 | }, | ||
218 | }; | ||
93 | </script> | 219 | </script> |
94 | <style scoped lang="scss"> | 220 | <style scoped lang="scss"> |
95 | @import "~@/styles/mixin.scss"; | 221 | @import "~@/styles/mixin.scss"; |
96 | @import "~@/styles/dialogBoxheader.scss"; | 222 | @import "~@/styles/dialogBoxheader.scss"; |
97 | .djbdisposition{ | 223 | |
224 | .determine.el-button--mini { | ||
225 | background-color: #2a76cd; | ||
226 | color: #ffffff; | ||
227 | } | ||
228 | |||
229 | .el-transfer__button.cancel, | ||
230 | .el-button--mini.cancel { | ||
231 | &:focus, | ||
232 | &:hover { | ||
233 | background: #ffffff; | ||
234 | border-color: #2a76cd; | ||
235 | color: #2a76cd; | ||
236 | } | ||
237 | } | ||
238 | |||
239 | .el-transfer { | ||
240 | display: flex; | ||
241 | justify-content: space-between; | ||
242 | align-items: center; | ||
243 | |||
244 | .el-transfer-panel__item { | ||
245 | margin-right: 0; | ||
246 | } | ||
247 | |||
248 | .default-tranfer-item { | ||
98 | width: 100%; | 249 | width: 100%; |
99 | height: 700px; | 250 | display: flex; |
100 | .btn{ | 251 | align-items: center; |
101 | margin-top: 20px; | 252 | justify-content: space-between; |
102 | // background-color: salmon; | 253 | |
254 | .button-group { | ||
255 | em { | ||
256 | margin-right: 8px; | ||
257 | } | ||
258 | } | ||
259 | } | ||
260 | /deep/.el-checkbox-group { | ||
261 | .el-checkbox { | ||
262 | display: flex; | ||
263 | position: relative; | ||
264 | .el-checkbox__input { | ||
265 | position: absolute; | ||
266 | left: 10px; | ||
267 | } | ||
268 | } | ||
269 | .el-checkbox:last-of-type { | ||
270 | margin-right: 30px; | ||
271 | } | ||
272 | } | ||
273 | |||
274 | .el-input.el-input--small { | ||
275 | .el-input__inner { | ||
276 | border-radius: 4px; | ||
277 | } | ||
278 | } | ||
279 | |||
280 | .el-transfer__buttons { | ||
281 | padding: 0; | ||
282 | margin: 0 17px; | ||
103 | 283 | ||
284 | .el-transfer__button { | ||
285 | display: block; | ||
286 | margin: 0 0 5px 0; | ||
287 | padding: 4px 8px; | ||
288 | } | ||
289 | |||
290 | .el-button--primary.el-transfer__button { | ||
291 | display: flex; | ||
292 | justify-content: center; | ||
293 | align-items: center; | ||
294 | background: #2a76cd; | ||
295 | border-color: #2a76cd; | ||
296 | } | ||
297 | |||
298 | .el-button--primary.is-disabled { | ||
299 | background-color: #a0cfff; | ||
300 | border-color: #a0cfff; | ||
301 | } | ||
302 | } | ||
303 | |||
304 | .el-checkbox__input.is-indeterminate { | ||
305 | .el-checkbox__inner { | ||
306 | background: #2a76cd; | ||
307 | border-color: #2a76cd; | ||
308 | } | ||
309 | } | ||
310 | |||
311 | .el-transfer-panel { | ||
312 | width: 49%; | ||
313 | border-radius: 0; | ||
314 | } | ||
315 | |||
316 | .el-transfer-panel__body { | ||
317 | .el-checkbox__label { | ||
318 | &:hover { | ||
319 | color: #2a76cd; | ||
320 | } | ||
104 | } | 321 | } |
105 | /deep/.el-transfer{ | 322 | } |
106 | .el-transfer-panel{ | 323 | |
324 | .el-transfer-panel__header { | ||
325 | .el-checkbox { | ||
326 | .el-checkbox__label { | ||
327 | font-size: 14px; | ||
328 | |||
329 | span { | ||
330 | left: 100px; | ||
331 | } | ||
332 | } | ||
333 | } | ||
334 | } | ||
335 | |||
336 | .el-transfer-panel__footer { | ||
337 | top: 0; | ||
338 | left: 61%; | ||
339 | background-color: transparent; | ||
340 | display: flex; | ||
341 | width: 30%; | ||
342 | justify-content: right; | ||
343 | border-color: transparent; | ||
344 | |||
345 | .el-button--text { | ||
346 | color: #b5b5b5; | ||
347 | margin-left: 5px; | ||
348 | |||
349 | .icon-huidaodingbu { | ||
350 | font-size: 16px; | ||
351 | } | ||
352 | |||
353 | em { | ||
354 | font-size: 14px; | ||
355 | font-weight: 600; | ||
356 | } | ||
357 | } | ||
358 | } | ||
359 | |||
360 | .el-transfer-panel:first-child { | ||
361 | .el-transfer-panel__header { | ||
362 | .el-checkbox { | ||
363 | .el-checkbox__label { | ||
364 | span { | ||
365 | left: 84px; | ||
366 | } | ||
367 | } | ||
368 | } | ||
369 | } | ||
370 | } | ||
371 | } | ||
372 | |||
373 | /deep/.el-transfer { | ||
374 | .el-transfer-panel { | ||
107 | width: 400px; | 375 | width: 400px; |
108 | height: 640px; | ||
109 | .el-transfer-panel__body .is-with-footer{ | ||
110 | height: 700px; | 376 | height: 700px; |
377 | .el-transfer-panel__list.is-filterable { | ||
378 | height: 606px; | ||
111 | } | 379 | } |
112 | .el-transfer-panel__list.is-filterable{ | ||
113 | height: 570px; | ||
114 | } | 380 | } |
115 | } | 381 | } |
116 | } | ||
117 | } | ||
118 | </style> | 382 | </style> | ... | ... |
... | @@ -8,7 +8,7 @@ | ... | @@ -8,7 +8,7 @@ |
8 | ref="ruleForm" | 8 | ref="ruleForm" |
9 | :label-position="flag ? 'top' : ''" | 9 | :label-position="flag ? 'top' : ''" |
10 | :inline="flag" | 10 | :inline="flag" |
11 | label-width="120px"> | 11 | label-width="140px"> |
12 | <div class="slxx_con" :class="flag ? 'formMarginBot0' : ''"> | 12 | <div class="slxx_con" :class="flag ? 'formMarginBot0' : ''"> |
13 | <div class="slxx_title title-block"> | 13 | <div class="slxx_title title-block"> |
14 | 申请业务信息 | 14 | 申请业务信息 |
... | @@ -257,7 +257,7 @@ | ... | @@ -257,7 +257,7 @@ |
257 | 抵押人信息 | 257 | 抵押人信息 |
258 | <div class="triangle"></div> | 258 | <div class="triangle"></div> |
259 | </div> | 259 | </div> |
260 | <qlrCommonTable | 260 | <ywrCommonTable |
261 | @upDateQlrxxList="upDateYwrxxList" | 261 | @upDateQlrxxList="upDateYwrxxList" |
262 | :tableData="ruleForm.ywrList" | 262 | :tableData="ruleForm.ywrList" |
263 | :disabled="viewEdit" | 263 | :disabled="viewEdit" |
... | @@ -291,6 +291,7 @@ | ... | @@ -291,6 +291,7 @@ |
291 | <script> | 291 | <script> |
292 | import ywmix from "@/views/ywbl/mixin/index"; | 292 | import ywmix from "@/views/ywbl/mixin/index"; |
293 | import qlrCommonTable from "@/views/workflow/components/qlrCommonTable"; | 293 | import qlrCommonTable from "@/views/workflow/components/qlrCommonTable"; |
294 | import ywrCommonTable from "@/views/workflow/components/ywrCommonTable"; | ||
294 | import { Init, saveData } from "@/api/workflow/ygdyFlow.js"; | 295 | import { Init, saveData } from "@/api/workflow/ygdyFlow.js"; |
295 | import { mapGetters } from "vuex"; | 296 | import { mapGetters } from "vuex"; |
296 | export default { | 297 | export default { |
... | @@ -320,7 +321,7 @@ | ... | @@ -320,7 +321,7 @@ |
320 | } | 321 | } |
321 | }) | 322 | }) |
322 | }, | 323 | }, |
323 | components: { qlrCommonTable }, | 324 | components: { qlrCommonTable, ywrCommonTable }, |
324 | computed: { | 325 | computed: { |
325 | ...mapGetters(["dictData", "flag"]) | 326 | ...mapGetters(["dictData", "flag"]) |
326 | }, | 327 | }, | ... | ... |
-
Please register or sign in to post a comment