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 399 additions and 82 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 () { 78 },
41 console.log("this.formData",this.formData); 79 data() {
42 // if (this.formData.bsmMb) { 80 return {
43 // this.$startLoading() 81 loading: true,
44 // getSysSqywmbszDetailById(this.formData.bsmMb).then(res => { 82 datalist:[],
45 // this.$endLoading() 83 list: [], // 全部数据
46 // let { result } = res 84 value: [], // 选中数据
47 // this.ruleForm = result ? result : {} 85 item: [], // 右侧勾选数据
48 // }) 86 chuanlist: [],
49 // } 87 indexKey: null, // 高亮显示
88 filterMethod(query, item) {
89 return item.despriction.indexOf(query) > -1;
90 },
91 };
92 },
93 mounted() {
94 this.generateData();
95 },
96
97 methods: {
98 /**
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 });
50 }, 137 },
51 data() { 138 /**
52 const generateData = _ => { 139 * 确定选择
53 const data = []; 140 */
54 for (let i = 1; i <= 43; i++) { 141 submitForm() {
55 data.push({ 142 this.value.forEach((item) => {
56 key: i, 143 this.chuanlist.push(this.list[item]);
57 label: `备选项 ${ i }`, 144 });
58 disabled: i % 4 === 0 145
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",
59 }); 152 });
153 } else {
154 this.$message({
155 message: "保存失败",
156 type: "error",
157 });
158 }
159 });
160 },
161 /**
162 * 监听右侧选中
163 */
164 choose(value) {
165 this.item = value;
166 },
167 /**
168 * 右侧数据点击排序
169 */
170 publicMobileMethod(direction, key) {
171 const self = this;
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;
180 }
181 });
182 if (
183 index === 0 &&
184 direction !== "handleBottom" &&
185 direction !== "handleDown"
186 ) {
187 return self.$message("没有上移的空间了");
188 }
189 if (
190 index === self.value.length - 1 &&
191 direction !== "handleUp" &&
192 direction !== "handleTop"
193 ) {
194 return self.$message("没有下移的空间了");
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);
60 } 212 }
61 return data; 213 } else {
62 }; 214 self.$message.error("只能选择一条数据进行上下移动");
63 return { 215 }
64 data: generateData(),
65 value4: [],
66 };
67 }, 216 },
217 },
218 };
219 </script>
220 <style scoped lang="scss">
221 @import "~@/styles/mixin.scss";
222 @import "~@/styles/dialogBoxheader.scss";
68 223
69 methods: { 224 .determine.el-button--mini {
70 handleChange(value, direction, movedKeys) { 225 background-color: #2a76cd;
71 console.log("shijian ",this.data.value, direction, movedKeys); 226 color: #ffffff;
72 }, 227 }
73 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 }
74 238
75 /** 239 .el-transfer {
76 * @description: submitForm 240 display: flex;
77 * @author: renchao 241 justify-content: space-between;
78 */ 242 align-items: center;
79 submitForm () { 243
80 let that = this 244 .el-transfer-panel__item {
81 updateSysSqywmbsz(this.ruleForm).then(res => { 245 margin-right: 0;
82 if (res.code === 200) { 246 }
83 this.$popupCacel() 247
84 that.$message({ 248 .default-tranfer-item {
85 message: '修改成功', 249 width: 100%;
86 type: 'success' 250 display: flex;
87 }) 251 align-items: center;
88 } 252 justify-content: space-between;
89 }) 253
254 .button-group {
255 em {
256 margin-right: 8px;
90 } 257 }
91 } 258 }
92 } 259 }
93 </script> 260 /deep/.el-checkbox-group {
94 <style scoped lang="scss"> 261 .el-checkbox {
95 @import "~@/styles/mixin.scss"; 262 display: flex;
96 @import "~@/styles/dialogBoxheader.scss"; 263 position: relative;
97 .djbdisposition{ 264 .el-checkbox__input {
98 width: 100%; 265 position: absolute;
99 height: 700px; 266 left: 10px;
100 .btn{ 267 }
101 margin-top: 20px; 268 }
102 // background-color: salmon; 269 .el-checkbox:last-of-type {
270 margin-right: 30px;
271 }
272 }
103 273
274 .el-input.el-input--small {
275 .el-input__inner {
276 border-radius: 4px;
277 }
104 } 278 }
105 /deep/.el-transfer{ 279
106 .el-transfer-panel{ 280 .el-transfer__buttons {
107 width: 400px; 281 padding: 0;
108 height: 640px; 282 margin: 0 17px;
109 .el-transfer-panel__body .is-with-footer{ 283
110 height: 700px; 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;
111 } 314 }
112 .el-transfer-panel__list.is-filterable{ 315
113 height: 570px; 316 .el-transfer-panel__body {
317 .el-checkbox__label {
318 &:hover {
319 color: #2a76cd;
320 }
321 }
322 }
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 }
114 } 370 }
115 } 371 }
372
373 /deep/.el-transfer {
374 .el-transfer-panel {
375 width: 400px;
376 height: 700px;
377 .el-transfer-panel__list.is-filterable {
378 height: 606px;
379 }
380 }
116 } 381 }
117 }
118 </style> 382 </style>
......