measure/src/views/project/debit/contract/components/unit/tree-form.vue

<template>
    <hc-new-dialog v-model="isShow" is-table widths="95%" title="合同计量单元新增" :loading="addNodeLoading" @save="modalSave">
        <div class="relative h-full flex">
            <div :id="`hc_tree_card_${uuid}`">
                <hc-new-card scrollbar>
                    <template #header>
                        <div class="text-sm text-orange">↓ 选择部位【点击新增】</div>
                    </template>
                    <div class="tree-list">
                        <div v-for="(item, index) in treeDataList" :key="index" class="item" @click="treeListClick(item)">
                            <HcIcon name="box-3" fill />
                            <span class="ml-1">{{ item.nodeName }}</span>
                        </div>
                    </div>
                </hc-new-card>
            </div>
            <div :id="`hc_table_card_${uuid}`" class="flex-1">
                <hc-new-card scrollbar title="合同计量单元">
                    <hc-table :is-index="false" :column="tableColumn" :datas="tableData" is-new :index-style="{ width: 60 }">
                        <template #nodeName="{ row }">
                            <hc-table-input v-model="row.nodeName" />
                        </template>
                        <template #startStake="{ row }">
                            <hc-table-input v-model="row.startStake" />
                        </template>
                        <template #endStake="{ row }">
                            <hc-table-input v-model="row.endStake" />
                        </template>
                        <template #contractPicture="{ row }">
                            <hc-table-input v-model="row.contractPicture" />
                        </template>
                        <template #isAddChildNode="{ row }">
                            <el-radio-group v-model="row.isAddChildNode">
                                <el-radio :label="1">是</el-radio>
                                <el-radio :label="2" class="ml-2">否</el-radio>
                            </el-radio-group>
                        </template>
                        <template #action="{ index }">
                            <el-link type="danger" @click="delRowClick(index)">删除</el-link>
                        </template>
                    </hc-table>
                </hc-new-card>
            </div>
        </div>
    </hc-new-dialog>
</template>

<script setup>
import { nextTick, ref, watch } from 'vue'
import { getArrValue, getRandom } from 'js-fast-way'
import unitApi from '~api/project/debit/contract/unit.js'
import { useAppStore } from '~src/store'

const props = defineProps({
    ids: {
        type: [String, Number],
        default: '',
    },
    menuType:{
        type: [String, Number],
        default: '',
    },
    templateId:{
        type: [String, Number],
        default: '',
    },
})
//事件
const emit = defineEmits(['finish', 'close'])
const useAppState = useAppStore()
const projectId = ref(useAppState.getProjectId || '')
const contractId = ref(useAppState.getContractId || '')
const menuType = ref(props.menuType)
const ids = ref(props.ids)
const templateId = ref(props.templateId)
const uuid = getRandom(4)

//双向绑定
// eslint-disable-next-line no-undef
const isShow = defineModel('modelValue', {
    default: false,
})

//监听
watch(() => [
    props.ids,
    props.menuType,
    props.templateId,
], ([Ids, Type, Tem]) => {
    console.log(Type, 'Type')
    ids.value = Ids
    menuType.value = Type
    templateId.value = Tem
}, { immediate: true })

//监听
watch(isShow, (val) => {
    if (val) {
        setSplitRef()
        getTreeDataList()
    }
})

//初始化设置拖动分割线
const setSplitRef = () => {
    //配置参考： https://split.js.org/#/?direction=vertical&snapOffset=0
    nextTick(() => {
        window.$split(['#hc_tree_card_' + uuid, '#hc_table_card_' + uuid], {
            sizes: [20, 80],
            snapOffset: 0,
            minSize: [50, 500],
        })
    })
}

const treeDataList = ref([])
const treeListClick = (item) => {
    tableData.value.push({
        nodeName: item.nodeName,
        startStake: '',
        endStake: '',
        contractPicture: '',
        isAddChildNode: 1,
        leftNodeId:item.id,
    })
}
const getTreeDataList = async ()=>{
    const { error, code, data } = await unitApi.getLeftList({
      id:ids.value,
    })
   
    if (!error && code === 200) {
        treeDataList.value = getArrValue(data)
    } else {
        treeDataList.value = []
    }
}
//表格数据
const tableColumn = ref([
    { key: 'nodeName', name: '名称' },
    { key: 'startStake', name: '开始桩号' },
    { key: 'endStake', name: '结束桩号' },
    { key: 'contractPicture', name: '合同图号' },
    { key: 'isAddChildNode', name: '是否划分子节点', width: 120, align: 'center' },
    { key: 'action', name: '操作', width: 80, align: 'center' },
])
const tableData = ref([])

//删除
const delRowClick = (index) => {
    tableData.value.splice(index, 1)
}
const addNodeLoading = ref(false)
const modalSave = async () => {
    if (tableData.value.length === 0) {
        window.$message.warning('请选择部位点击新增')
        return
    }
   
        const { error, code, msg } = await unitApi.addNode({
            contractId:contractId.value,
            projectId:projectId.value,
            contractNodeId:ids.value,
            requestType:menuType.value === 'add' ? 1 : 2, //请求类型 1=节点新增 2=增补单元新增
            templateId: templateId.value,
            dataList:tableData.value,
      
        })
        //判断状态
        addNodeLoading.value = false
        if (!error && code === 200) {
            window?.$message?.success(msg)
            tableData.value = []
     
        }
        emit('finish')
    
}
</script>

<style lang="scss" scoped>
.tree-list {
    position: relative;
    .item {
        position: relative;
        height: 24px;
        display: flex;
        align-items: center;
        white-space: nowrap;
        cursor: pointer;
        transition: color .2s;
        &:hover {
            color: var(--el-color-primary);
        }
    }
}
</style>