3ebfc43e by fanguang

fix

1 parent f96c87ab
...@@ -209,7 +209,7 @@ const toolBtnClick = (btn) => { ...@@ -209,7 +209,7 @@ const toolBtnClick = (btn) => {
209 rowInfo.ROWID = `upload_${tableData.value.length}` 209 rowInfo.ROWID = `upload_${tableData.value.length}`
210 tableData.value.unshift(rowInfo) 210 tableData.value.unshift(rowInfo)
211 orginData.value.unshift(rowInfo) 211 orginData.value.unshift(rowInfo)
212 tableInfo.value.page.rows = tableData.value.length 212 // tableInfo.value.page.rows = tableData.value.length
213 saveDisabled.value = false 213 saveDisabled.value = false
214 // 表格滚动到第一行 214 // 表格滚动到第一行
215 let $tableEl = tableEl.value.tableRef 215 let $tableEl = tableEl.value.tableRef
......
1 <script lang="ts" setup name="Drawer">
2 import { computed } from "vue";
3 import { ClickOutside as vClickOutside } from "element-plus";
4 import type { FormInstance } from "element-plus";
5 import { Download, Upload, CirclePlus } from "@element-plus/icons-vue";
6 import Table from "@/components/Table/index.vue";
7 import Form from "@/components/Form/index.vue";
8 import Tree from "@/components/Tree/index.vue";
9 import ListPanel from "@/components/ListPanel/index.vue";
10 import UploadFiles from "@/components/Upload/index.vue";
11
12 const emits = defineEmits([
13 "drawerBtnClick",
14 "radioGroupChange",
15 "drawerSelectChange",
16 "drawerTableSelectChange",
17 "drawerTableBtnClick",
18 "drawerTableToolBtnClick",
19 "drawerFormBtnClick",
20 "listItemClick",
21 "drawerTableInputChange",
22 "drawerToolBtnClick",
23 "drawerTableSelectionChange",
24 "drawerTablePageChange",
25 "uploadBtnClick",
26 "beforeUPload",
27 "uploadFile",
28 "onUpload",
29 "onClickOutside",
30 ]);
31
32 const props = defineProps({
33 drawerInfo: {
34 type: Object,
35 default: {},
36 },
37 });
38
39 const drawerTableRef = ref();
40 const drawerFormRef = ref();
41 const selectRowData = ref([]);
42 const formListRef = ref();
43 const formTreeRef = ref();
44 const uploadRef = ref();
45
46 const drawerVisible = computed(() => {
47 nextTick(() => {
48 if (props.drawerInfo.visible) {
49 drawerOpen();
50 }
51 })
52 return props.drawerInfo.visible;
53 });
54 const drawerDirection = computed(() => {
55 return props.drawerInfo.direction;
56 });
57 const drawerModal = computed(() => {
58 return props.drawerInfo.modal ?? true;
59 });
60 const modalClose = computed(() => {
61 return props.drawerInfo.modalClose ?? false;
62 });
63 const drawerModalClass = computed(() => {
64 nextTick(() => {
65 drawerOpen();
66 })
67 return props.drawerInfo.modalClass ?? "";
68 });
69 const drawerSize = computed(() => {
70 return props.drawerInfo.size ?? "30%";
71 });
72 const drawerType = computed(() => {
73 return props.drawerInfo.type ?? "form";
74 });
75 const drawerTitle = computed(() => {
76 return props.drawerInfo.header.title;
77 });
78 const selectOptions = computed(() => {
79 return props.drawerInfo.container.relateOptions ?? [];
80 });
81 const formItems = computed(() => {
82 return props.drawerInfo.container.formItems ?? [];
83 });
84 const formRules = computed(() => {
85 return props.drawerInfo.container.rules ?? {};
86 });
87 const selectData = computed(() => {
88 return props.drawerInfo.container.selectData ?? [];
89 });
90 const contents = computed(() => {
91 return props.drawerInfo.container.contents ?? [];
92 });
93 const footer = computed(() => {
94 return props.drawerInfo.footer;
95 });
96
97 const onClickOutside = (e: any) => {
98 emits("onClickOutside");
99 };
100
101 const getDrawerConRef = (refName) => {
102 console.log(refName, '----------')
103 if (refName == 'drawerTableRef') {
104 const dtf = drawerTableRef.value[0] || drawerTableRef.value
105 return dtf?.tableRef
106 }
107 // const drawerForm = drawerFormRef.value[0] || drawerFormRef.value;
108 if (refName == 'drawerFormRef') {
109 const drawerForm = drawerFormRef.value?.[0] || drawerFormRef.value;
110 return drawerForm
111 }
112 }
113
114 defineExpose({
115 // selections,
116 getDrawerConRef
117 });
118
119 const toolBtnClick = (btn, type: any = null) => {
120 if (type && type == "table") {
121 let selectData = [];
122 if (drawerTableRef.value) {
123 const drawerTable = drawerTableRef.value[0] || drawerTableRef.value;
124 selectData = drawerTable.tableRef.getSelectionRows();
125 }
126 emits("drawerTableToolBtnClick", btn, selectData);
127 } else {
128 emits("drawerToolBtnClick", btn);
129 }
130 };
131
132 const tableSelectionChange = (val, tId) => {
133 selectRowData.value = val;
134 emits("drawerTableSelectionChange", val, tId);
135 };
136
137 const tableSelectChange = (val, scope) => {
138 emits("drawerTableSelectChange", val, scope);
139 };
140
141 const tableInputChange = (val, scope) => {
142 emits("drawerTableInputChange", val, scope);
143 };
144
145 const tablePageChange = (info) => {
146 emits("drawerTablePageChange", info);
147 }
148
149 const tableBtnClick = (scope, btn) => {
150 emits("drawerTableBtnClick", scope, btn);
151 };
152
153 const submitForm = async (formEl: FormInstance | undefined, btn) => {
154 if (!formEl) return;
155 await formEl.validate((valid, fields) => {
156 const drawerForm = drawerFormRef.value[0] || drawerFormRef.value;
157 if (valid) {
158 const formInfo = drawerForm.formInline;
159 emits("drawerBtnClick", btn, formInfo);
160 } else {
161 var obj = fields && Object.keys(fields);
162 obj?.[0] && formEl?.scrollToField(obj?.[0])
163 console.log("error submit!", fields);
164 }
165 });
166 };
167
168 const btnClick = (btn, type) => {
169 if (btn.disabled) return;
170 if (
171 btn.value != "cancel" &&
172 (btn.value.indexOf("submit") > -1 || btn.value.indexOf("save") > -1)
173 ) {
174 if (drawerFormRef.value) {
175 const drawerForm = drawerFormRef.value[0] || drawerFormRef.value;
176 const formRef = drawerForm.ruleFormRef;
177 submitForm(formRef, btn);
178 } else {
179 emits("drawerBtnClick", btn);
180 }
181 } else {
182 emits("drawerBtnClick", btn);
183 }
184 };
185
186 const radioGroupChange = (val, info) => {
187 emits("radioGroupChange", val, info);
188 };
189
190 const formSelectChange = (val, row, info) => {
191 emits("drawerSelectChange", val, row, info);
192 };
193
194 const formBtnClick = (btn) => {
195 emits("drawerFormBtnClick", btn);
196 };
197
198 const listItemClick = (row) => {
199 emits("listItemClick", row);
200 };
201
202 const onUpload = (file, fileList) => {
203 emits("onUpload", file, fileList);
204 };
205
206 const beforeUPload = (file) => {
207 emits("beforeUPload", file);
208 };
209
210 const uploadFile = (file) => {
211 emits("uploadFile", file);
212 };
213
214 const uploadBtnClick = (btn) => {
215 emits("uploadBtnClick", btn);
216 };
217
218 const drawerOpen = () => {
219 const wrap: any = drawerModalClass.value && document.getElementsByClassName(drawerModalClass.value)[0];
220 if (wrap) {
221 wrap.style.width = `${drawerSize.value + 1}px`
222 } else {
223 const dom: any = document.getElementsByClassName('el-overlay')[0];
224 dom && (dom.style.width = '100%');
225 }
226 };
227
228 const drawerClose = () => {
229 btnClick({ value: "cancel" }, null);
230 if (drawerFormRef.value) {
231 const drawerForm = drawerFormRef.value[0] || drawerFormRef.value;
232 const formRef = drawerForm.ruleFormRef;
233 drawerForm?.resetForm(formRef);
234 }
235 };
236 </script>
237
238 <template>
239 <el-drawer v-model="drawerVisible" :direction="drawerDirection" :size="drawerSize" :modal="drawerModal"
240 :close-on-click-modal="modalClose" :close-on-press-escape="modalClose" :modal-class="drawerModalClass"
241 destroy-on-close :z-index="props.drawerInfo.zIndex ?? null" @close="drawerClose">
242 <template #header>
243 <span class="title">{{ drawerTitle }}</span>
244 </template>
245 <template #default>
246 <div class="drawer-body-loading" v-if="drawerInfo.loading ?? false" v-loading="drawerInfo.loading ?? false"></div>
247 <div v-else class="drawer_panel" :class="[con.col]" :style="con.style" v-for="con in contents">
248 <div class="panel_title" v-if="con.title">{{ con.title }}</div>
249 <template v-if="con.type && con.type.indexOf('table') > -1">
250 <div class="table_tool float-right">
251 <template v-for="bar in con.tableTool.btns.slice(1)">
252 <el-popover v-if="bar.popover" :visible="bar.popover.visible" :title="bar.popover.title"
253 :popper-class="bar.popover.class ?? ''" placement="bottom-start" :width="bar.popover.width ?? 200"
254 trigger="click">
255 <template #reference>
256 <el-button :type="bar.type" @click="toolBtnClick(bar, con.type)" v-click-outside="onClickOutside"
257 v-preReClick>{{ bar.label }}</el-button>
258 </template>
259 <template #default>
260 <span v-html="bar.popover.content"></span>
261 </template>
262 </el-popover>
263 <el-button :type="bar.type" :plain="bar.plain" v-else @click="toolBtnClick(bar, 'table')" v-preReClick>{{
264 bar.label
265 }}</el-button>
266 </template>
267 </div>
268 <div class="table_panel_wrap" :style="con.tableInfo.style">
269 <Table ref="drawerTableRef" :class="[con.tableInfo.col]" :tableInfo="con.tableInfo"
270 @tableSelectChange="tableSelectChange" @tableBtnClick="tableBtnClick"
271 @tableSelectionChange="tableSelectionChange" @tableInputChange="tableInputChange"
272 @tablePageChange="tablePageChange" />
273 </div>
274 <div class="table_tool" :class="[con.tableTool.col]" v-if="con.tableTool && (con.tableTool.visible ?? true)">
275 <template v-for="bar in con.tableTool.btns.slice(0, 1)">
276 <!-- <el-popover v-if="bar.popover" :visible="bar.popover.visible" :title="bar.popover.title"
277 :popper-class="bar.popover.class ?? ''" placement="bottom-start" :width="bar.popover.width ?? 200"
278 trigger="click">
279 <template #reference>
280 <el-button :type="bar.type" @click="toolBtnClick(bar, con.type)" v-click-outside="onClickOutside"
281 v-preReClick>{{ bar.label }}</el-button>
282 </template>
283 <template #default>
284 <span v-html="bar.popover.content"></span>
285 </template>
286 </el-popover> -->
287 <!-- <el-button :type="bar.type" :plain="bar.plain" @click="toolBtnClick(bar, 'table')" v-preReClick>{{
288 bar.label
289 }}</el-button> -->
290 <div class="operation-icon" @click="toolBtnClick(bar, 'table')" v-preReClick>
291 <el-icon color="#4fa1a4">
292 <CirclePlus />
293 </el-icon>
294 <span>{{ bar.label }}</span>
295 </div>
296 </template>
297 </div>
298 </template>
299 <template v-else-if="con.type && con.type.indexOf('tree') > -1">
300 <div class="list_tree" v-if="con.type.indexOf('list') > -1">
301 <ListPanel ref="formListRef" :listInfo="con.listInfo" @itemClick="listItemClick" />
302 <Tree ref="formTreeRef" :treeInfo="con.treeInfo" />
303 </div>
304 <Tree ref="formTreeRef" :treeInfo="con.treeInfo" v-else />
305 </template>
306 <template v-else-if="con.type && con.type == 'field-list'">
307 <div class="field_list_panel" v-if="con.listInfo.data.length > 0">
308 <div class="list_item" v-for="item in con.listInfo.data">
309 <span class="item_field">{{ item[con.listInfo.field] }}</span>
310 <span class="item_text">{{ item[con.listInfo.label] }}</span>
311 </div>
312 </div>
313 <div class="field_list_panel">
314 <div class="empty_tips">暂无数据</div>
315 </div>
316 </template>
317 <template v-else-if="con.type && con.type.indexOf('upload') > -1">
318 <div class="upload_tool">
319 <UploadFiles ref="uploadRef" :upload-info="con.uploadInfo" @onUpload="onUpload" @beforeUPload="beforeUPload"
320 @uploadFile="uploadFile" @uploadBtnClick="uploadBtnClick" />
321 <div class="tool_btns" v-if="con.tools && con.tools.visible">
322 <template v-for="btn in con.tools.btns">
323 <el-button v-if="btn.visible ?? true" :type="btn.type" :plain="btn.plain"
324 @click="toolBtnClick(btn, 'table')" v-preReClick>
325 <el-icon v-if="btn.icon && btn.icon == 'Upload'">
326 <Upload />
327 </el-icon>
328 <el-icon v-else-if="btn.icon && btn.icon == 'Download'">
329 <Download />
330 </el-icon>
331 <span>{{ btn.label }}</span>
332 </el-button>
333 </template>
334 </div>
335 </div>
336 <div class="upload_table_panel_wrap" v-if="con.tableInfo && Object.keys(con.tableInfo).length">
337 <Table ref="drawerTableRef" :class="[con.tableInfo.col]" :tableInfo="con.tableInfo"
338 @tableSelectChange="tableSelectChange" @tableBtnClick="tableBtnClick"
339 @tableSelectionChange="tableSelectionChange" @tableInputChange="tableInputChange"
340 @tablePageChange="tablePageChange" />
341 </div>
342 </template>
343 <template v-else>
344 <Form ref="drawerFormRef" :itemList="con.formInfo.items" :formId="con.formInfo.id" :rules="con.formInfo.rules"
345 :col="con.formInfo.col" :readonly="con.formInfo.readonly" @radioGroupChange="radioGroupChange"
346 @selectChange="formSelectChange" @btnClick="formBtnClick">
347 </Form>
348 <!-- 插槽内容 -->
349 <slot></slot>
350 </template>
351 </div>
352 </template>
353 <template #footer v-if="footer.visible ?? true">
354 <div style="flex: auto">
355 <template v-for="btn in footer.btns">
356 <el-button v-if="btn.visible ?? true" :type="btn.type" :disabled="btn.disabled ?? false"
357 @click="btnClick(btn, null)" v-preReClick :loading="btn.loading ?? false">{{ btn.label }}</el-button>
358 </template>
359 </div>
360 </template>
361 </el-drawer>
362 </template>
363
364 <style lang="scss" scoped>
365 .operation-icon {
366 display: flex;
367 align-items: center;
368 cursor: pointer;
369 > span {
370 margin-left: 4px;
371 color: #4fa1a4;
372 }
373 }
374 .drawer-body-loading {
375 height: 100%;
376 }
377
378 .drawer_panel {
379 position: relative;
380
381 &.no-margin {
382 margin-top: 0;
383 }
384
385 &.height_auto {
386 .table_panel_wrap {
387 .table_panel {
388 min-height: unset;
389 }
390 }
391 }
392 }
393
394 .panel_title {
395 line-height: 40px;
396 font-size: 14px;
397 color: var(--el-color-regular);
398 font-weight: 600;
399 }
400
401 .table_tool {
402 height: 40px;
403 display: flex;
404 align-items: center;
405
406 &.float-right {
407 position: absolute;
408 top: 0;
409 right: 0;
410 }
411 }
412
413 .table_panel_wrap {
414 height: auto!important;
415 .table_panel {
416 padding: 0;
417 min-height: auto;
418 &.auto-height {
419 min-height: unset;
420 }
421 }
422 }
423
424 .list_tree {
425 max-height: 400px;
426 display: flex;
427 justify-content: space-between;
428 box-shadow: 0 0 0 1px #d9d9d9;
429
430 .list_panel_wrap {
431 width: 158px;
432 box-shadow: 1px 0 0 0 #d9d9d9;
433 }
434
435 .tree_panel {
436 width: calc(100% - 159px);
437
438 :deep(.el-tree) {
439 margin: 0;
440 height: 100%;
441 overflow: hidden auto;
442 }
443 }
444 }
445
446 .field_list_panel {
447 width: 100%;
448 height: calc(100vh - 70px);
449 position: relative;
450
451 .list_item {
452 display: flex;
453 font-size: 12px;
454 color: var(--el-color-regular);
455 margin: 4px 0;
456
457 .item_field {
458 width: 130px;
459 color: var(--el-text-color-regular);
460 }
461
462 .item_text {
463 width: calc(100% - 130px);
464 word-wrap: break-word;
465 }
466 }
467
468 .empty_tips {
469 text-align: center;
470 color: var(--el-disabled-text-color);
471 position: absolute;
472 top: 50px;
473 left: 50%;
474 transform: translate(-50%);
475 }
476 }
477
478 .upload_tool {
479 margin-bottom: 8px;
480 position: relative;
481
482 .tool_btns {
483 position: absolute;
484 top: 0;
485 right: 0;
486 }
487 }
488
489 .upload_table_panel_wrap {
490 .table_panel {
491 min-height: unset;
492 }
493 }
494 </style>
...@@ -8,7 +8,7 @@ import { ElMessage, ElMessageBox } from "element-plus"; ...@@ -8,7 +8,7 @@ import { ElMessage, ElMessageBox } from "element-plus";
8 import { Search } from '@element-plus/icons-vue' 8 import { Search } from '@element-plus/icons-vue'
9 import Tree from '@/components/Tree/index.vue' 9 import Tree from '@/components/Tree/index.vue'
10 import Table from '@/components/Table/index.vue' 10 import Table from '@/components/Table/index.vue'
11 import Drawer from '@/components/Drawer/index.vue' 11 import Drawer from './components/drawer.vue'
12 import DictFileds from './components/dictFileds.vue' 12 import DictFileds from './components/dictFileds.vue'
13 import useCatchStore from "@/store/modules/catch"; 13 import useCatchStore from "@/store/modules/catch";
14 import { download } from '@/utils/common' 14 import { download } from '@/utils/common'
...@@ -388,7 +388,7 @@ const formTable = ref({ ...@@ -388,7 +388,7 @@ const formTable = ref({
388 loading: false 388 loading: false
389 }, 389 },
390 tableTool: { 390 tableTool: {
391 col: 'float-right', 391 // col: 'float-right',
392 visible: false, 392 visible: false,
393 btns: [ 393 btns: [
394 { label: "新增行", value: "add-row", type: 'primary' }, 394 { label: "新增行", value: "add-row", type: 'primary' },
......
...@@ -434,7 +434,7 @@ const viewGraph = () => { ...@@ -434,7 +434,7 @@ const viewGraph = () => {
434 <div class="aside_wrap"> 434 <div class="aside_wrap">
435 <div class="aside_title"> 435 <div class="aside_title">
436 元数据标准列表 436 元数据标准列表
437 <el-icon color="#4fa1a4" @click="openStandardDialog"> 437 <el-icon color="#4fa1a4" @click="openStandardDialog" style="width:2em;height:2em">
438 <CirclePlus /> 438 <CirclePlus />
439 </el-icon> 439 </el-icon>
440 </div> 440 </div>
...@@ -482,8 +482,8 @@ const viewGraph = () => { ...@@ -482,8 +482,8 @@ const viewGraph = () => {
482 .standard { 482 .standard {
483 .el-icon { 483 .el-icon {
484 cursor: pointer; 484 cursor: pointer;
485 width: 2em; 485 width: 1em;
486 height: 2em 486 height: 1em
487 } 487 }
488 .el-icon svg { 488 .el-icon svg {
489 width: 20px; 489 width: 20px;
...@@ -524,6 +524,7 @@ const viewGraph = () => { ...@@ -524,6 +524,7 @@ const viewGraph = () => {
524 .tags-list-right { 524 .tags-list-right {
525 position: absolute; 525 position: absolute;
526 right: 0; 526 right: 0;
527 top:8px;
527 } 528 }
528 } 529 }
529 530
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!