Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
4bc0407a by xiaomiao
Options

--no commit message

1 parent 94ef8a68
Inline Side-by-side
Showing 2 changed files with 385 additions and 68 deletions
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>
......