archives/src/components/dialog/SortNodeDialog.vue

<template>
    <!-- 调整节点排序 -->
    <HcDialog :show="nodeSortModel" title="调整排序" widths="80vw" is-table is-row-footer @close="nodeSortModalClose">
        <el-alert title="可拖动排序，也可在后面点击图标，切换排序" type="warning" :closable="false" />
        <div class="hc-table-h">
            <HcTable
                ui="hc-table-row-drop" is-row-drop quick-sort is-new :index-style="{ width: 60 }"
                :column="nodeSortTableColumn" :datas="nodeSortTableData" :loading="nodeSortTableLoading"
                @row-drop="nodeSortTableRowDrop" @row-sort="nodeSortTableRowDrop"
            >
                <template #key2="{ row }">
                    <span class="text-link">{{ row?.key2 }}</span>
                </template>
                <template #action="{ index }">
                    <span class="text-link text-xl" @click="nodeUpSortClick(index)">
                        <HcIcon name="arrow-up" fill />
                    </span>
                    <span class="text-link text-xl ml-2" @click="nodeDownSortClick(index)">
                        <HcIcon name="arrow-down" fill />
                    </span>
                </template>
            </HcTable>
        </div>
        <template #rightRowFooter>
            <el-button hc-btn @click="nodeSortModalClose">
                <HcIcon name="close" />
                <span>取消</span>
            </el-button>
            <el-button type="primary" hc-btn :loading="nodeSortModalLoading" @click="nodeSortModalSave">
                <HcIcon name="check" />
                <span>确认</span>
            </el-button>
        </template>
    </HcDialog>
</template>

<script setup>
import { nextTick, ref, toRefs, watch } from 'vue'
import { submitArchiveTreeSort } from '~api/other'

//参数
const props = defineProps({
    projectId: {
        type: [String, Number],
        default: '',
    },
    contractId: {
        type: [String, Number],
        default: '',
    },
    node: {
        type: Object,
        default: () => ({}),
    },
    show:{
      type:Boolean,
      default:false,
    },
})

//事件
const emit = defineEmits(['hide'])
const projectId = ref(props.projectId)
const contractId = ref(props.contractId)
// 使用toRefs结构，使其具有响应式
const { node } = toRefs(props)

//监听
watch(() => [
    props.projectId,
    props.contractId,
], ([UserProjectId, UserContractId]) => {
    projectId.value = UserProjectId
    contractId.value = UserContractId
})

watch(() => [props.show], ([newShow])=>{
    if (newShow) {
      sortNodeMoadl()
    } else {
      nodeSortModalClose()
    }
})

//节点排序
const nodeSortModel = ref(false)
const nodeSortTableColumn = ref([
    { key:'title', name: '节点名称' },
    { key:'action', name: '排序', width: 90 },
])
const nodeSortTableData = ref([])
const nodeSortTableLoading = ref(false)
const nodeSortModalLoading = ref(false)


const nodeSortModalClose = () =>{
    emit('hide', {})
    nodeSortModel.value = false
}

const nodeSortTableRowDrop = (rows)=>{
    nodeSortTableData.value = [] // 先清空，否则排序会异常
    nextTick(() => {
        nodeSortTableData.value = rows
    })
}

//向下
const nodeDownSortClick = (index) => {
    const indexs = index + 1
    const data = nodeSortTableData.value
    if (indexs !== data.length) {
        const tmp = data.splice(indexs, 1)
        nodeSortTableData.value.splice(index, 0, tmp[0])
    } else {
        window?.$message?.warning('已经处于置底，无法下移')
    }
}

//向上
const nodeUpSortClick = (index) => {
    const data = nodeSortTableData.value || []
    if (index !== 0) {
        const tmp = data.splice(index - 1, 1)
        nodeSortTableData.value.splice(index, 0, tmp[0])
    } else {
        window?.$message?.warning('已经处于置顶，无法上移')
    }
}

const sortNodeMoadl = ()=>{
    nodeSortModel.value = true
    let list = []
    if (node.value.parent) {
        node.value.parent.childNodes.forEach((element)=>{
            list.push(element.data)
        })
    }
    nodeSortTableData.value = list
}

const nodeSortModalSave = async ()=>{
    nodeSortModalLoading.value = true
    const { code } = await submitArchiveTreeSort({
        listSort:nodeSortTableData.value,
    })
    nodeSortModalLoading.value = false
    if (code === 200) {
        window.$message?.success('修改成功')
        window?.location?.reload() //刷新页面
    }
}
</script>