|
|
@@ -1252,7 +1252,10 @@
|
|
|
class="hc-attachment-card"
|
|
|
>
|
|
|
<div class="hc-attachment-header">{{ item?.nodeName }}</div>
|
|
|
- <div class="hc-attachment-content">
|
|
|
+ <div
|
|
|
+ :ref="setAttachmentListRef"
|
|
|
+ class="hc-attachment-content"
|
|
|
+ >
|
|
|
<div
|
|
|
v-for="item1 in item.fileList"
|
|
|
:key="item1.id"
|
|
|
@@ -1289,9 +1292,6 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div v-else style="height: 100%; width: 100%">
|
|
|
- <hc-no-data />
|
|
|
- </div>
|
|
|
</hc-new-dialog>
|
|
|
<!-- 上传文件 -->
|
|
|
<hc-new-dialog
|
|
|
@@ -1418,6 +1418,7 @@ import { HcUploadFileApi } from 'hc-vue3-ui'
|
|
|
import { getStoreValue, setStoreValue } from '~src/utils/storage'
|
|
|
import { getDictionaryData } from '~uti/tools'
|
|
|
import { getChildList } from '~api/other'
|
|
|
+import Sortable from 'sortablejs'
|
|
|
import {
|
|
|
arrToKey,
|
|
|
deepClone,
|
|
|
@@ -3080,6 +3081,7 @@ const abolishOneSave = async () => {
|
|
|
const attachmentModal = ref(false)
|
|
|
const attachmentModalShow = () => {
|
|
|
attachmentModal.value = true
|
|
|
+ initSortable()
|
|
|
getAttachmentList()
|
|
|
}
|
|
|
const attachmentListLoaing = ref(false)
|
|
|
@@ -3101,6 +3103,60 @@ const getAttachmentList = async () => {
|
|
|
attachmentList.value = []
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+// 新增拖拽相关代码
|
|
|
+const attachmentListRefs = ref([])
|
|
|
+
|
|
|
+const setAttachmentListRef = (el) => {
|
|
|
+ if (el) {
|
|
|
+ attachmentListRefs.value.push(el)
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 初始化拖拽排序
|
|
|
+const initSortable = () => {
|
|
|
+ nextTick(() => {
|
|
|
+ attachmentListRefs.value.forEach((el, index) => {
|
|
|
+ new Sortable(el, {
|
|
|
+ animation: 150,
|
|
|
+ ghostClass: 'sortable-ghost',
|
|
|
+ handle: '.hc-attachment-item', // 整个条目可拖拽
|
|
|
+ onEnd: (evt) => {
|
|
|
+ const { oldIndex, newIndex } = evt
|
|
|
+ if (oldIndex !== newIndex) {
|
|
|
+ // 更新对应节点的文件顺序
|
|
|
+ const node = attachmentList.value[index]
|
|
|
+ const [movedItem] = node.fileList.splice(oldIndex, 1)
|
|
|
+ node.fileList.splice(newIndex, 0, movedItem)
|
|
|
+
|
|
|
+ // // 这里可以调用API保存新的顺序
|
|
|
+ saveFileOrder()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ })
|
|
|
+ })
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+// 保存文件顺序到后端
|
|
|
+const saveFileOrderLoad = ref(false)
|
|
|
+const saveFileOrder = async () => {
|
|
|
+
|
|
|
+ saveFileOrderLoad.value = true
|
|
|
+
|
|
|
+ const { error, code, msg } = await wbsApi.sortPdf( attachmentList.value)
|
|
|
+ saveFileOrderLoad.value = false
|
|
|
+ if (!error && code === 200) {
|
|
|
+ window?.$message?.success(msg)
|
|
|
+ getAttachmentList()
|
|
|
+
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 监听attachmentList变化时初始化拖拽
|
|
|
+watch(() => attachmentList.value, () => {
|
|
|
+ initSortable()
|
|
|
+}, { deep: true })
|
|
|
//预览
|
|
|
const previewFile = (item) => {
|
|
|
toPdfPage(item['domainPdfUrl'])
|
|
|
@@ -3756,3 +3812,57 @@ html.theme-dark {
|
|
|
}
|
|
|
}
|
|
|
</style>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+/* 新增拖拽排序相关样式 */
|
|
|
+.sortable-ghost {
|
|
|
+ opacity: 0.5;
|
|
|
+ background: #f5f5f5;
|
|
|
+}
|
|
|
+
|
|
|
+.hc-attachment-item {
|
|
|
+ transition: all 0.3s;
|
|
|
+ cursor: move;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 12px;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 4px;
|
|
|
+ border: 1px solid #ebeef5;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.hc-attachment-content {
|
|
|
+ min-height: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 原有样式保持不变 */
|
|
|
+.hc-attachment-card {
|
|
|
+ margin-bottom: 16px;
|
|
|
+
|
|
|
+ .hc-attachment-header {
|
|
|
+ font-weight: bold;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ padding-left: 8px;
|
|
|
+ border-left: 3px solid #409eff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hc-attachment-file-name {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .name {
|
|
|
+ margin-left: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .hc-attachment-btn-box {
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
