入表功调整
Showing
1 changed file
with
19 additions
and
72 deletions
| ... | @@ -8,7 +8,7 @@ import { ElMessage, ElMessageBox, translate } from "element-plus"; | ... | @@ -8,7 +8,7 @@ import { ElMessage, ElMessageBox, translate } from "element-plus"; |
| 8 | import { MoreFilled } from '@element-plus/icons-vue' | 8 | import { MoreFilled } from '@element-plus/icons-vue' |
| 9 | import useUserStore from "@/store/modules/user"; | 9 | import useUserStore from "@/store/modules/user"; |
| 10 | import { changeNum } from "@/utils/common"; | 10 | import { changeNum } from "@/utils/common"; |
| 11 | import { costDelete, getAssetCatalog, getCostList, sendEntryMsg } from "@/api/modules/dataEntry"; | 11 | import { getAssetCatalog, getCostList, sendEntryMsg } from "@/api/modules/dataEntry"; |
| 12 | import * as XLSXS from 'xlsx-js-style'; | 12 | import * as XLSXS from 'xlsx-js-style'; |
| 13 | import { saveAs } from 'file-saver'; | 13 | import { saveAs } from 'file-saver'; |
| 14 | 14 | ||
| ... | @@ -22,7 +22,6 @@ const companyName = ref(''); | ... | @@ -22,7 +22,6 @@ const companyName = ref(''); |
| 22 | /** 默认显示步骤 */ | 22 | /** 默认显示步骤 */ |
| 23 | const step = ref(0); | 23 | const step = ref(0); |
| 24 | 24 | ||
| 25 | const showAdd = ref(false); | ||
| 26 | const productList = ref([]); | 25 | const productList = ref([]); |
| 27 | const costFormRef = ref(); | 26 | const costFormRef = ref(); |
| 28 | const entryFormRef = ref(); | 27 | const entryFormRef = ref(); |
| ... | @@ -277,10 +276,6 @@ const bookHeaders: any = ref([ | ... | @@ -277,10 +276,6 @@ const bookHeaders: any = ref([ |
| 277 | ]); | 276 | ]); |
| 278 | const transposedData = ref([]); | 277 | const transposedData = ref([]); |
| 279 | 278 | ||
| 280 | const popoverVisible = ref(false); | ||
| 281 | const popoverTriggerRef = ref(null) | ||
| 282 | const currentRow: any = ref({}) | ||
| 283 | |||
| 284 | // 获取产品数据 | 279 | // 获取产品数据 |
| 285 | const getProducts = () => { | 280 | const getProducts = () => { |
| 286 | getAssetCatalog().then((res: any) => { | 281 | getAssetCatalog().then((res: any) => { |
| ... | @@ -345,50 +340,10 @@ const setChecked = (level, code, check) => { | ... | @@ -345,50 +340,10 @@ const setChecked = (level, code, check) => { |
| 345 | rowList.forEach(rData => rData[`checked${level}`] = check) | 340 | rowList.forEach(rData => rData[`checked${level}`] = check) |
| 346 | }; | 341 | }; |
| 347 | 342 | ||
| 348 | // 点击外部区域关闭处理 | ||
| 349 | const handleClickOutside = (event) => { | ||
| 350 | const popoverEl = document.querySelector('.tree-item-edit-menu') | ||
| 351 | const triggerEl: any = popoverTriggerRef.value | ||
| 352 | |||
| 353 | if (!popoverVisible.value || !popoverEl || !triggerEl) return | ||
| 354 | |||
| 355 | const clickedInPopover = popoverEl.contains(event.target) | ||
| 356 | const clickedOnTrigger = triggerEl === event.target || triggerEl.contains(event.target) | ||
| 357 | |||
| 358 | if (!clickedInPopover && !clickedOnTrigger) { | ||
| 359 | popoverVisible.value = false | ||
| 360 | } | ||
| 361 | } | ||
| 362 | |||
| 363 | // 切换Popover显示/隐藏 | ||
| 364 | const togglePopover = (row, event) => { | ||
| 365 | // 如果点击的是当前已激活的触发器,则关闭popover | ||
| 366 | if (popoverVisible.value && popoverTriggerRef.value === event.currentTarget) { | ||
| 367 | popoverVisible.value = false | ||
| 368 | return | ||
| 369 | } | ||
| 370 | |||
| 371 | // 设置当前行和触发器引用 | ||
| 372 | currentRow.value = row | ||
| 373 | popoverTriggerRef.value = event.currentTarget | ||
| 374 | const level = Number(row.field.split('name')[1]); | ||
| 375 | showAdd.value = level == 3 ? true : false; | ||
| 376 | |||
| 377 | // 打开popover | ||
| 378 | popoverVisible.value = true | ||
| 379 | } | ||
| 380 | |||
| 381 | // 处理菜单点击 | 343 | // 处理菜单点击 |
| 382 | const handleMenuClick = (action) => { | 344 | const handleMenuClick = (action, rowData) => { |
| 383 | // 关闭popover | 345 | // 关闭popover |
| 384 | popoverVisible.value = false; | 346 | btnClick({ value: action, row: { ...rowData, level: Number(rowData.field.split('name')[1]) } }) |
| 385 | btnClick({ value: action, row: currentRow.value }) | ||
| 386 | } | ||
| 387 | |||
| 388 | // Popover关闭后的处理 | ||
| 389 | const handlePopoverClose = () => { | ||
| 390 | currentRow.value = null | ||
| 391 | popoverTriggerRef.value = null | ||
| 392 | } | 347 | } |
| 393 | 348 | ||
| 394 | const selectChange = async (val, row, info) => { | 349 | const selectChange = async (val, row, info) => { |
| ... | @@ -1334,18 +1289,8 @@ onActivated(() => { | ... | @@ -1334,18 +1289,8 @@ onActivated(() => { |
| 1334 | getCostData(); | 1289 | getCostData(); |
| 1335 | }); | 1290 | }); |
| 1336 | 1291 | ||
| 1337 | |||
| 1338 | onMounted(() => { | ||
| 1339 | // 添加/移除全局点击监听 | ||
| 1340 | document.addEventListener('click', handleClickOutside) | ||
| 1341 | }) | ||
| 1342 | |||
| 1343 | onBeforeUnmount(() => { | ||
| 1344 | document.removeEventListener('click', handleClickOutside) | ||
| 1345 | }) | ||
| 1346 | |||
| 1347 | onUpdated(() => { | 1292 | onUpdated(() => { |
| 1348 | // setItemLine(); | 1293 | |
| 1349 | }); | 1294 | }); |
| 1350 | 1295 | ||
| 1351 | </script> | 1296 | </script> |
| ... | @@ -1406,11 +1351,23 @@ onUpdated(() => { | ... | @@ -1406,11 +1351,23 @@ onUpdated(() => { |
| 1406 | "--" : scope.row[item.field] }} | 1351 | "--" : scope.row[item.field] }} |
| 1407 | </span> | 1352 | </span> |
| 1408 | </span> | 1353 | </span> |
| 1409 | <el-icon v-if="item.field == 'name3' || (item.field == 'name4' && scope.row[item.field])" | 1354 | <template v-if="item.field == 'name3' || (item.field == 'name4' && scope.row[item.field])"> |
| 1410 | class="list-more" color="#666" | 1355 | <el-popover placement="bottom-start" :width="110" trigger="click" popper-class="tree-item-edit-menu" :hide-after="0" :offset="8"> |
| 1411 | @click="e => togglePopover({ ...item, ...scope.row, rIndex: scope.$index }, e)"> | 1356 | <template #reference> |
| 1357 | <el-icon class="list-more" color="#666"> | ||
| 1412 | <MoreFilled /> | 1358 | <MoreFilled /> |
| 1413 | </el-icon> | 1359 | </el-icon> |
| 1360 | </template> | ||
| 1361 | <div class="levitation-ul" @mousedown.stop> | ||
| 1362 | <span class="levitation-li" @click="handleMenuClick('add-same', { ...item, ...scope.row, rIndex: scope.$index })" | ||
| 1363 | :style="{ display: item.field == 'name3' ? 'block' : 'none' }">新增本级分类</span> | ||
| 1364 | <span class="levitation-li" @click="handleMenuClick('add-lower', { ...item, ...scope.row, rIndex: scope.$index })" | ||
| 1365 | :style="{ display: item.field == 'name3' ? 'block' : 'none' }">新增下级分类</span> | ||
| 1366 | <span class="levitation-li" @click="handleMenuClick('edit', { ...item, ...scope.row, rIndex: scope.$index })">重命名</span> | ||
| 1367 | <span class="levitation-li" @click="handleMenuClick('remove', { ...item, ...scope.row, rIndex: scope.$index })">删除</span> | ||
| 1368 | </div> | ||
| 1369 | </el-popover> | ||
| 1370 | </template> | ||
| 1414 | </div> | 1371 | </div> |
| 1415 | </template> | 1372 | </template> |
| 1416 | </el-table-column> | 1373 | </el-table-column> |
| ... | @@ -1442,16 +1399,6 @@ onUpdated(() => { | ... | @@ -1442,16 +1399,6 @@ onUpdated(() => { |
| 1442 | </div> | 1399 | </div> |
| 1443 | </div> | 1400 | </div> |
| 1444 | </div> | 1401 | </div> |
| 1445 | <el-popover :visible="popoverVisible" placement="bottom-start" width="110" trigger="click" | ||
| 1446 | popper-class="tree-item-edit-menu" :virtual-ref="popoverTriggerRef" virtual-triggering :hide-after="0" :offset="8" | ||
| 1447 | @after-leave="handlePopoverClose"> | ||
| 1448 | <div class="levitation-ul" @mousedown.stop> | ||
| 1449 | <span class="levitation-li" @click="handleMenuClick('add-same')" v-show="showAdd">新增本级分类</span> | ||
| 1450 | <span class="levitation-li" @click="handleMenuClick('add-lower')" v-show="showAdd">新增下级分类</span> | ||
| 1451 | <span class="levitation-li" @click="handleMenuClick('edit')">重命名</span> | ||
| 1452 | <span class="levitation-li" @click="handleMenuClick('remove')">删除</span> | ||
| 1453 | </div> | ||
| 1454 | </el-popover> | ||
| 1455 | </template> | 1402 | </template> |
| 1456 | 1403 | ||
| 1457 | <style lang="scss" scoped> | 1404 | <style lang="scss" scoped> | ... | ... |
-
Please register or sign in to post a comment