Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
443bf236 by renchao@pashanhoo.com
Options

style:配置登记簿打印字段

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