Skip to content

bdc / bdcdj-web

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

--no commit message

1 parent f08b666a
Inline Side-by-side
Showing 1 changed file with 216 additions and 206 deletions
...@@ -8,51 +8,64 @@ ...@@ -8,51 +8,64 @@
8 <div class="fieldcheck"> 8 <div class="fieldcheck">
9 <div class="left"> 9 <div class="left">
10 <div class="header"> 10 <div class="header">
11 <el-checkbox 11 <div class="headerconcent">
12 class="check" 12 <el-checkbox
13 :indeterminate="isIndeterminate" 13 class="check"
14 v-model="checkAll" 14 :indeterminate="isIndeterminate"
15 @change="handleCheckAllChange">待选合集</el-checkbox> 15 v-model="checkAll"
16 <div class="num">/</div> 16 @change="handleCheckAllChange"
17 >待选合集</el-checkbox
18 >
19 <div class="num">
20 总数{{ cities.length }} 已选{{ datalist.length }}
21 </div>
22 </div>
17 </div> 23 </div>
18 <el-checkbox-group 24 <el-checkbox-group
19 class="concent" 25 class="concent"
20 v-model="checkedCities" 26 v-model="checkedCities"
21 @change="handleCheckedCitiesChange"> 27 @change="handleCheckedCitiesChange"
28 >
22 <el-checkbox 29 <el-checkbox
23 v-for="city in cities" 30 v-for="city in cities"
24 :label="city.name" 31 :label="city.name"
25 :key="city.name">{{ city.despriction }}({{ city.name }})</el-checkbox> 32 :key="city.name"
33 >{{ city.despriction }}({{ city.name }})</el-checkbox
34 >
26 </el-checkbox-group> 35 </el-checkbox-group>
27 </div> 36 </div>
28 <div class="right"> 37 <div class="right">
29 <el-table 38 <el-table
30 class="tablelist" 39 class="tablelist"
31 :data="datalist" 40 :data="datalist"
41 border
32 ref="listTable" 42 ref="listTable"
33 :key="key" 43 :key="key"
34 row-key="name" 44 row-key="name"
35 :pagination="false" 45 :pagination="false"
36 :header-cell-style="{ 'text-align': 'center' }"
37 :heightNumSetting="true" 46 :heightNumSetting="true"
38 :minHeight="150" 47 :minHeight="150"
39 height="590" 48 height="650"
40 style="width: 100%"> 49 style="width: 100%"
50 >
41 <el-table-column label="字段" prop="name" min-width="100"> 51 <el-table-column label="字段" prop="name" min-width="100">
42 </el-table-column> 52 </el-table-column>
43 53
44 <el-table-column 54 <el-table-column
45 label="字段名称" 55 label="字段名称"
46 prop="desprictionor" 56 prop="desprictionor"
47 min-width="100"> 57 min-width="100"
58 >
48 </el-table-column> 59 </el-table-column>
49 <el-table-column label="字段别名" min-width="100"> 60 <el-table-column label="字段别名" min-width="100">
50 <template slot-scope="scope"> 61 <template slot-scope="scope">
51 <el-input 62 <el-input
52 v-model="scope.row.despriction" 63 v-model="scope.row.despriction"
53 placeholder="请输入内容" 64 placeholder="请输入内容"
54 @input="sumTime(scope.$index, scope.row.tdsyqx)"> 65 @input="sumTime(scope.$index, scope.row.tdsyqx)"
55 ></el-input> 66 >
67 ></el-input
68 >
56 </template> 69 </template>
57 </el-table-column> 70 </el-table-column>
58 </el-table> 71 </el-table>
...@@ -66,222 +79,219 @@ ...@@ -66,222 +79,219 @@
66 </template> 79 </template>
67 80
68 <script> 81 <script>
69 import Sortable from 'sortablejs' 82 import Sortable from "sortablejs";
70 import { getFieldList, getFieldListByQlxx, save } from "@/api/SysDjbFieldDO"; 83 import { getFieldList, getFieldListByQlxx, save } from "@/api/SysDjbFieldDO";
71 export default { 84 export default {
72 props: { 85 props: {
73 formData: { 86 formData: {
74 type: Object, 87 type: Object,
75 default: () => { }, 88 default: () => {},
76 },
77 }, 89 },
78 data () { 90 },
79 return { 91 data() {
80 checkAll: false, 92 return {
81 sortable: null, 93 checkAll: false,
82 checkedCities: [], 94 sortable: null,
83 cities: [], 95 checkedCities: [],
84 datalist: [], 96 cities: [],
85 tablelist: [], 97 datalist: [],
86 key: 0, 98 tablelist: [],
87 isIndeterminate: true, 99 key: 0,
88 }; 100 isIndeterminate: true,
89 }, 101 };
90 mounted () { 102 },
91 this.generateData() 103 mounted() {
104 this.generateData();
105 },
106 beforeDestroy() {
107 if (this.sortable) {
108 this.sortable.destroy();
109 }
110 },
111 watch: {
112 key: {
113 handler(newName, oldName) {
114 this.initSort();
115 },
92 }, 116 },
93 beforeDestroy () { 117 },
94 if (this.sortable) { 118 methods: {
95 this.sortable.destroy(); 119 changeIndex(array, index1, index2) {
96 } 120 array[index1] = array.splice(index2, 1, array[index1])[0];
97 }, 121 },
98 watch: { 122 initSort() {
99 key: { 123 const el = this.$refs.listTable.$el.querySelectorAll(
100 handler (newName, oldName) { 124 ".el-table__body-wrapper > table > tbody"
101 this.initSort() 125 )[0];
102 } 126 // const sortable = new Sortable(el, options);
103 } 127 // 根据具体需求配置options配置项
128 const sortable = new Sortable(el, {
129 onEnd: (evt) => {
130 // 监听拖动结束事件
131 console.log(this); // this是当前vue上下文
132 console.log(evt.oldIndex); // 当前行的被拖拽前的顺序
133 console.log(evt.newIndex); // 当前行的被拖拽后的顺序
134 // 这里就可以写我们需要传给后台的逻辑代码
135 // 我们有了 evt.oldIndex 和 evt.newIndex 这两个参数做索引，我们可以根据绑定在表格上面的 data 这个 Array 找到两个相应的记录。就可以针对数据进行操作啦。
136 // 下面将拖拽后的顺序进行修改
137 const currRow = this.datalist.splice(evt.oldIndex, 1)[0];
138 this.datalist.splice(evt.newIndex, 0, currRow);
139 },
140 });
104 }, 141 },
105 methods: { 142 /**
106 changeIndex (array, index1, index2) { 143 * @description: 初始数据集
107 array[index1] = array.splice(index2, 1, array[index1])[0]; 144 * @author: renchao
108 }, 145 */
109 initSort () { 146 generateData() {
110 const el = this.$refs.listTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0] 147 let that = this;
111 // const sortable = new Sortable(el, options); 148 getFieldList({ qllx: this.formData.qllx }).then((res) => {
112 // 根据具体需求配置options配置项 149 if (res.code === 200) {
113 const sortable = new Sortable(el, { 150 let listss = res.result;
114 onEnd: (evt) => { // 监听拖动结束事件 151 listss.forEach((item, index) => {
115 console.log(this) // this是当前vue上下文 152 that.cities.push({
116 console.log(evt.oldIndex) // 当前行的被拖拽前的顺序 153 name: item.name,
117 console.log(evt.newIndex) // 当前行的被拖拽后的顺序 154 despriction: item.despriction,
118 // 这里就可以写我们需要传给后台的逻辑代码 155 desprictionor: item.despriction,
119 // 我们有了 evt.oldIndex 和 evt.newIndex 这两个参数做索引，我们可以根据绑定在表格上面的 data 这个 Array 找到两个相应的记录。就可以针对数据进行操作啦。
120 // 下面将拖拽后的顺序进行修改
121 const currRow = this.datalist.splice(evt.oldIndex, 1)[0]
122 this.datalist.splice(evt.newIndex, 0, currRow)
123 }
124 })
125 },
126 /**
127 * @description: 初始数据集
128 * @author: renchao
129 */
130 generateData () {
131 let that = this
132 getFieldList({ qllx: this.formData.qllx }).then((res) => {
133 if (res.code === 200) {
134 let listss = res.result;
135 listss.forEach((item, index) => {
136 that.cities.push({
137 name: item.name,
138 despriction: item.despriction,
139 desprictionor: item.despriction,
140 });
141 });
142
143 getFieldListByQlxx({ qllx: this.formData.qllx }).then((res) => {
144 if (res.code === 200) {
145 let listss = res.result;
146 listss.forEach((item, index) => {
147 that.tablelist.push({
148 name: item.name,
149 despriction: item.despriction,
150 desprictionor: item.despriction,
151 });
152 that.$nextTick(() => {
153 that.datalist = this.tablelist
154 that.checkedCities.push(item.name);
155 })
156 })
157 that.initSort()
158 }
159 }); 156 });
160 }
161 });
162 },
163 handleCheckAllChange (val) {
164 let checkedlist = []
165 let orlist = []
166 checkedlist = val ? this.cities : [];
167 this.isIndeterminate = false;
168 console.log("this.checkedCities", this.checkedCities);
169 let lists = [];
170 this.cities.forEach((item, index) => {
171
172 checkedlist.forEach((el) => {
173 orlist.push(el.name)
174 if (item.name == el.name) {
175 lists.push(this.cities[index]);
176 }
177 }); 157 });
178 }); 158
179 this.checkedCities = orlist 159 getFieldListByQlxx({ qllx: this.formData.qllx }).then((res) => {
180 this.datalist = lists; 160 if (res.code === 200) {
181 // 其他排序逻辑 161 let listss = res.result;
182 this.initSort() 162 listss.forEach((item, index) => {
183 }, 163 that.tablelist.push({
184 handleCheckedCitiesChange (value) { 164 name: item.name,
185 console.log("value", value, this.checkedCities); 165 despriction: item.despriction,
186 let checkedCount = value.length; 166 desprictionor: item.despriction,
187 this.checkAll = checkedCount === this.cities.length; 167 });
188 this.isIndeterminate = 168 that.$nextTick(() => {
189 checkedCount > 0 && checkedCount < this.cities.length; 169 that.datalist = this.tablelist;
190 let lists = []; 170 that.checkedCities.push(item.name);
191 this.cities.forEach((item, index) => { 171 });
192 this.checkedCities.forEach((el) => { 172 });
193 if (item.name == el) { 173 that.initSort();
194 console.log("1");
195 lists.push(this.cities[index]);
196 } 174 }
197 }); 175 });
176 }
177 });
178 },
179 handleCheckAllChange(val) {
180 let checkedlist = [];
181 let orlist = [];
182 checkedlist = val ? this.cities : [];
183 this.isIndeterminate = false;
184 console.log("this.checkedCities", this.checkedCities);
185 let lists = [];
186 this.cities.forEach((item, index) => {
187 checkedlist.forEach((el) => {
188 orlist.push(el.name);
189 if (item.name == el.name) {
190 lists.push(this.cities[index]);
191 }
198 }); 192 });
199 this.datalist = lists; 193 });
200 // 其他排序逻辑 194 this.checkedCities = orlist;
201 this.initSort() 195 this.datalist = lists;
202 }, 196 // 其他排序逻辑
203 submitForm () { 197 this.initSort();
204 save(this.formData.bsmMb, this.datalist).then((res) => { 198 },
205 if (res.code == 200) { 199 handleCheckedCitiesChange(value) {
206 this.$popupCacel(); 200 console.log("value", value, this.checkedCities);
207 this.$message({ 201 let checkedCount = value.length;
208 message: "保存成功", 202 this.checkAll = checkedCount === this.cities.length;
209 type: "success", 203 this.isIndeterminate =
210 }); 204 checkedCount > 0 && checkedCount < this.cities.length;
211 } else { 205 let lists = [];
212 this.$message({ 206 this.cities.forEach((item, index) => {
213 message: "保存失败", 207 this.checkedCities.forEach((el) => {
214 type: "error", 208 if (item.name == el) {
215 }); 209 lists.push(this.cities[index]);
216 } 210 }
217 }); 211 });
218 }, 212 });
213 this.datalist = lists;
214 // 其他排序逻辑
215 this.initSort();
216 },
217 submitForm() {
218 save(this.formData.bsmMb, this.datalist).then((res) => {
219 if (res.code == 200) {
220 this.$popupCacel();
221 this.$message({
222 message: "保存成功",
223 type: "success",
224 });
225 } else {
226 this.$message({
227 message: "保存失败",
228 type: "error",
229 });
230 }
231 });
219 }, 232 },
220 }; 233 },
234 };
221 </script> 235 </script>
222 <style scoped lang="scss"> 236 <style scoped lang="scss">
223 @import "~@/styles/mixin.scss"; 237 @import "~@/styles/mixin.scss";
224 @import "~@/styles/dialogBoxheader.scss"; 238 @import "~@/styles/dialogBoxheader.scss";
225 .fieldcheck { 239 .fieldcheck {
226 width: 100%; 240 width: 100%;
241 height: 650px;
242 display: flex;
243 justify-content: space-between;
244 .left,
245 .right {
246 width: 49%;
227 height: 650px; 247 height: 650px;
228 display: flex; 248 border: 1px solid rgb(230, 230, 230);
229 justify-content: space-between; 249 }
230 .left, 250 .left {
231 .right { 251 .header {
232 width: 47%; 252 width: 100%;
233 height: 650px; 253 height: 50px;
234 border: 1px solid rgb(230, 230, 230); 254 background-color: rgba(243, 242, 242, 0.897);
235 } 255 .headerconcent {
236 .left { 256 width: 90%;
237 .header {
238 width: 100%;
239 height: 50px; 257 height: 50px;
258 margin: auto;
240 line-height: 50px; 259 line-height: 50px;
241 background-color: rgba(243, 242, 242, 0.897);
242 display: flex; 260 display: flex;
243 justify-content: space-around; 261 justify-content: space-between;
244 align-items:center .check { 262 align-items: center;
245 height: 20px;
246 margin: auto;
247 }
248 .num {
249 height: 20px;
250 }
251 }
252 .concent {
253 padding: 10px;
254 width: 100%;
255 display: inline-block;
256 padding-left: 20px;
257 overflow-x: hidden;
258 height: 600px;
259 .el-checkbox {
260 width: 100%;
261 padding: 10px;
262 }
263 .el-checkbox:hover {
264 padding: 10px;
265 background-color: rgba(243, 242, 242, 0.897);
266 }
267 } 263 }
268 } 264 }
269 .right { 265 .concent {
270 .header { 266 padding: 10px;
267 width: 100%;
268 display: inline-block;
269 padding-left: 20px;
270 overflow-x: hidden;
271 height: 600px;
272 .el-checkbox {
271 width: 100%; 273 width: 100%;
272 height: 50px; 274 padding: 10px;
273 line-height: 50px;
274 background-color: rgba(243, 242, 242, 0.897);
275 } 275 }
276 .tablelist { 276 .el-checkbox:hover {
277 margin-top: 10px; 277 padding: 10px;
278 height: 680px; 278 background-color: rgba(243, 242, 242, 0.897);
279 } 279 }
280 } 280 }
281 } 281 }
282 .btn { 282 .right {
283 margin-top: 10px; 283 .header {
284 width: 100%; 284 width: 100%;
285 text-align: center; 285 height: 50px;
286 line-height: 50px;
287 background-color: rgba(243, 242, 242, 0.897);
288 }
289
286 } 290 }
291 }
292 .btn {
293 margin-top: 10px;
294 width: 100%;
295 text-align: center;
296 }
287 </style> 297 </style>
......