Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
5c9211a4 by xiaomiao
Options

--no commit message

1 parent 3edaaf1d
Inline Side-by-side
Showing 2 changed files with 327 additions and 1 deletions
1 <!--
2 * @Description:
3 * @Autor: renchao
4 * @LastEditTime: 2023-07-19 16:04:58
5 -->
6 <template>
7 <div>
8 <div class="fieldcheck">
9 <div class="left">
10 <div class="header">
11 <el-checkbox
12 class="check"
13 :indeterminate="isIndeterminate"
14 v-model="checkAll"
15 @change="handleCheckAllChange"
16 >待选合集</el-checkbox
17 >
18 <div class="num">/</div>
19 </div>
20 <el-checkbox-group
21 class="concent"
22 v-model="checkedCities"
23 @change="handleCheckedCitiesChange"
24 >
25 <el-checkbox
26 v-for="city in cities"
27 :label="city.name"
28 :key="city.name"
29 >{{ city.despriction }}({{ city.name }})</el-checkbox
30 >
31 </el-checkbox-group>
32 </div>
33 <div class="right">
34 <div class="header">
35 <el-button> 置顶 </el-button>
36 <el-button> 上移 </el-button>
37 <el-button> 下移 </el-button>
38 <el-button> 置底 </el-button>
39 </div>
40 <el-table
41 class="tablelist"
42 :data="datalist"
43 ref="listTable"
44 row-key="zd"
45 :pagination="false"
46 :header-cell-style="{ 'text-align': 'center' }"
47 :heightNumSetting="true"
48 :minHeight="150"
49 height="590"
50 style="width: 100%"
51 >
52 <el-table-column label="字段" prop="name" min-width="100">
53 </el-table-column>
54
55 <el-table-column
56 label="字段名称"
57 prop="desprictionor"
58 min-width="100"
59 >
60 </el-table-column>
61 <el-table-column label="字段别名" min-width="100">
62 <template slot-scope="scope">
63 <el-input
64 v-model="scope.row.despriction"
65 placeholder="请输入内容"
66 @input="sumTime(scope.$index, scope.row.tdsyqx)"
67 >
68 ></el-input
69 >
70 </template>
71 </el-table-column>
72 </el-table>
73 </div>
74 </div>
75 <div class="btn">
76 <el-button @click="$popupCacel">取消</el-button>
77 <el-button type="primary" @click="submitForm" plain>确定</el-button>
78 </div>
79 </div>
80 </template>
81
82 <script>
83 import Sortable from "sortablejs";
84 import { getFieldList, getFieldListByQlxx, save } from "@/api/SysDjbFieldDO";
85 export default {
86 props: {
87 formData: {
88 type: Object,
89 default: () => {},
90 },
91 },
92 data() {
93 return {
94 checkAll: false,
95 checkedCities: [],
96 cities: [],
97 datalist: [],
98 tablelist: [],
99 key: 0,
100 isIndeterminate: true,
101 };
102 },
103 mounted() {
104 this.generateData();
105 this.initSort();
106 },
107 beforeDestroy() {
108 if (this.sortable) {
109 this.sortable.destroy();
110 }
111 },
112 methods: {
113 changeIndex(array, index1, index2) {
114 array[index1] = array.splice(index2, 1, array[index1])[0];
115 /** splice 会修改原来的数组 slice 不会 返回的是删除后的数据 所以 index2要删除的位置，删除1个数据 返回是index2的数据 然后最后一个参数是新增的数据为index的数据 */
116 },
117 initSort() {
118 this.datalist=[]
119 this.datalist =this.tablelist
120 const el = this.$refs.listTable.$el.querySelectorAll(
121 ".el-table__body-wrapper > table > tbody"
122 )[0];
123 this.sortable = Sortable.create(el, {
124 ghostClass: "sortable-ghost",
125 setData: function (dataTransfer) {
126 dataTransfer.setData("Text", "");
127 },
128 onEnd: (evt) => {
129 console.log("evt.oldIndex", evt.oldIndex);
130 console.log("evt.newIndex", evt.newIndex);
131 const targetRow = this.tablelist.splice(evt.oldIndex, 1)[0];
132 console.log("targetRow", targetRow);
133 // this.changeIndex(this.datalist,evt.newIndex,evt.oldIndex)
134 // console.log("this.datalist", this.datalist);
135 this.datalist.splice(evt.newIndex, 0, targetRow);
136 console.log();
137 this.$set(this.datalist,targetRow);
138
139 },
140 });
141 },
142 // initSort () {
143 // const el = this.$refs.listTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
144 // this.sortable =new Sortable(el, {
145 // onEnd: (evt) => { // 监听拖动结束事件
146 // console.log(this) // this是当前vue上下文
147 // console.log(evt.oldIndex) // 当前行的被拖拽前的顺序
148 // console.log(evt.newIndex)
149 // const currRow = this.tableData.splice(evt.oldIndex, 1)[0]
150 // this.datalist.splice(evt.newIndex, 0, currRow)
151 // }
152 // })
153 // },
154 // initSort(){
155 // let el = this.$refs.listTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
156 // //设置配置
157 // let _this = this
158 // Sortable.create(el, {
159 // animation: 150,
160 // sort: true,
161 // // draggable: '.el-table__row', // 设置可拖拽行的类名(el-table自带的类名)
162 // forceFallback: true,
163 // onEnd({newIndex, oldIndex}) {
164 // let currRow = _this.datalist.splice(oldIndex, 1)[0];
165 // _this.datalist.splice(newIndex, 0, currRow);
166 // }
167 // })
168 // },
169 /**
170 * @description: 初始数据集
171 * @author: renchao
172 */
173 generateData() {
174 getFieldList({ qllx: this.formData.qllx }).then((res) => {
175 if (res.code === 200) {
176 let listss = res.result;
177 listss.forEach((item, index) => {
178 this.cities.push({
179 name: item.name,
180 despriction: item.despriction,
181 desprictionor: item.despriction,
182 });
183 });
184
185 getFieldListByQlxx({ qllx: this.formData.qllx }).then((res) => {
186 if (res.code === 200) {
187 let listss = res.result;
188 listss.forEach((item, index) => {
189 this.tablelist.push({
190 name: item.name,
191 despriction: item.despriction,
192 desprictionor: item.despriction,
193 });
194 this.datalist =this.tablelist
195 this.checkedCities.push(item.name);
196 });
197 }
198 });
199 }
200 });
201 },
202 handleCheckAllChange(val) {
203 let checkedlist=[]
204 let orlist=[]
205 checkedlist = val ? this.cities : [];
206 this.isIndeterminate = false;
207 console.log("this.checkedCities", this.checkedCities);
208 let lists = [];
209 this.cities.forEach((item, index) => {
210
211 checkedlist.forEach((el) => {
212 orlist.push(el.name)
213 if (item.name == el.name) {
214 lists.push(this.cities[index]);
215 }
216 });
217 });
218 console.log("orlist",orlist);
219 this.checkedCities=orlist
220 this.tablelist = lists;
221 this.datalist =this.tablelist
222 },
223 handleCheckedCitiesChange(value) {
224 console.log("value", value, this.checkedCities);
225 let checkedCount = value.length;
226 this.checkAll = checkedCount === this.cities.length;
227 this.isIndeterminate =
228 checkedCount > 0 && checkedCount < this.cities.length;
229 let lists = [];
230 this.cities.forEach((item, index) => {
231 this.checkedCities.forEach((el) => {
232 if (item.name == el) {
233 console.log("1");
234 lists.push(this.cities[index]);
235 }
236 });
237 });
238 this.tablelist = lists;
239 this.datalist =this.tablelist
240 },
241 submitForm() {
242 console.log("this.datalistdss", this.datalist);
243 save(this.formData.bsmMb, this.datalist).then((res) => {
244 if (res.code == 200) {
245 this.$popupCacel();
246 this.$message({
247 message: "保存成功",
248 type: "success",
249 });
250 } else {
251 this.$message({
252 message: "保存失败",
253 type: "error",
254 });
255 }
256 });
257 },
258 },
259 };
260 </script>
261 <style scoped lang="scss">
262 @import "~@/styles/mixin.scss";
263 @import "~@/styles/dialogBoxheader.scss";
264 .fieldcheck {
265 width: 100%;
266 height: 650px;
267 display: flex;
268 justify-content: space-between;
269 .left,
270 .right {
271 width: 47%;
272 height: 650px;
273 border: 1px solid rgb(230, 230, 230);
274 }
275 .left {
276 .header {
277 width: 100%;
278 height: 50px;
279 line-height: 50px;
280 background-color: rgba(243, 242, 242, 0.897);
281 display: flex;
282 justify-content: space-around;
283 align-items:center .check {
284 height: 20px;
285 margin: auto;
286 }
287 .num {
288 height: 20px;
289 }
290 }
291 .concent {
292 padding: 10px;
293 width: 100%;
294 display: inline-block;
295 padding-left: 20px;
296 overflow-x: hidden;
297 height: 600px;
298 .el-checkbox {
299 width: 100%;
300 padding: 10px;
301 }
302 .el-checkbox:hover {
303 padding: 10px;
304 background-color: rgba(243, 242, 242, 0.897);
305 }
306 }
307 }
308 .right {
309 .header {
310 width: 100%;
311 height: 50px;
312 line-height: 50px;
313 background-color: rgba(243, 242, 242, 0.897);
314 }
315 .tablelist {
316 margin-top: 10px;
317 height: 680px;
318 }
319 }
320 }
321 .btn {
322 margin-top: 10px;
323 width: 100%;
324 text-align: center;
325 }
326 </style>
...@@ -90,7 +90,7 @@ ...@@ -90,7 +90,7 @@
90 this.$popupDialog("其他及附记模板", "system/qtjfjmb/components/editDialog", row, '60%') 90 this.$popupDialog("其他及附记模板", "system/qtjfjmb/components/editDialog", row, '60%')
91 }, 91 },
92 djbdisposition(row){ 92 djbdisposition(row){
93 this.$popupDialog("配置登记簿打印字段", "system/qtjfjmb/components/djbdisposition", row, '60%') 93 this.$popupDialog("配置登记簿打印字段", "system/qtjfjmb/components/djbdispositions", row, '60%')
94 } 94 }
95 } 95 }
96 } 96 }
......