for_client/src/views/ledger/components/table-form.vue

<template>
    <div class="hc-table-form-content">
        <div class="hc-content-box">
            <div class="hc-table-forem-box">
                <el-scrollbar v-if="excelIdVal && isTableForm">
                    <div class="hc-excel-table-form-view" :id="`table-form-${excelIdVal}`"></div>
                </el-scrollbar>
                <HcStatus :desc="statusDesc" v-else/>
            </div>
            <div class="hc-fixed-page" v-if="formLogDataList.length > 1">
                <el-scrollbar>
                    <div class="hc-fixed-page-list-box">
                        <template v-for="(item,index) in formLogDataList">
                            <div class="fixed-page-item" :class="index === formLogIndex ? 'primary' : ''" @click="getBussDataInfo(index)">
                                <div class="name-box">
                                    <HcIcon name="sticky-note"/>
                                    <span class="page">第{{index + 1}}页</span>
                                </div>
                                <div class="close-box" @click.stop="closeBussDataInfo(index)">
                                    <HcIcon name="close"/>
                                </div>
                            </div>
                        </template>
                    </div>
                </el-scrollbar>
            </div>
            <div class="hc-right-pian-box hc-flex-column">
                <DateCalendar :dateData="dateData" @choice-date="dateCalendarChoice"/>
                <el-alert title="蓝色代表当天已填写过日志" type="warning" show-icon/>
                <div class="my-4" v-if="menuItem?.nodeType === 7 || menuItem?.nodeType === 11">
                    <el-button type="primary" hc-btn @click="showProcessModal">
                        <HcIcon name="add-circle"/>
                        <span>关联工序</span>
                    </el-button>
                </div>
                <div class="hc-process-box" v-if="menuItem?.nodeType === 7 || menuItem?.nodeType === 11">
                    <el-scrollbar>
                        <div class="process-item-box" v-for="(item,index) in processDataList">
                            <div class="process-item">{{item.path}}</div>
                            <HcIcon name="close-circle" fill class="process-icon" @click="deleProcess(index)"/>
                        </div>
                    </el-scrollbar>
                </div>
            </div>
        </div>
        <div class="hc-footer-box">
            <HcTooltip keys="ledger_query_save_form">
                <el-button type="primary" hc-btn :disabled="!isTableForm || taskStatus === 3 || taskStatus === 4" :loading="tableFormSaveLoading" @click="tableFormSaveClick">
                    <HcIcon name="save"/>
                    <span>保存</span>
                </el-button>
            </HcTooltip>
            <HcTooltip keys="ledger_query_report_form">
                <el-button hc-btn :disabled="!isTableForm || taskStatus === 3 || taskStatus === 4" @click="reportModalClick">
                    <HcIcon name="send-plane-2"/>
                    <span>上报</span>
                </el-button>
            </HcTooltip>
            <HcTooltip keys="ledger_query_preview_form">
                <el-button hc-btn :disabled="!isTableForm" :loading="previewLoading" @click="previewBussPdf">
                    <HcIcon name="eye"/>
                    <span>预览</span>
                </el-button>
            </HcTooltip>
            <HcTooltip keys="ledger_query_copy_form">
                <el-button hc-btn :disabled="!isTableForm || taskStatus === 3 || taskStatus === 4" @click="copyTableFormClick">
                    <HcIcon name="file-copy-2"/>
                    <span>复制当前表格及内容</span>
                </el-button>
            </HcTooltip>
            <HcTooltip keys="ledger_query_time_form">
                <el-button hc-btn :disabled="!isTableForm || taskStatus === 3 || taskStatus === 4" @click="copyTimeLogModal">
                    <HcIcon name="file-copy-2"/>
                    <span>复制任意时间</span>
                </el-button>
            </HcTooltip>
            <HcTooltip keys="ledger_query_add_form">
                <el-button hc-btn :disabled="!isTableForm || taskStatus === 3 || taskStatus === 4" @click="addTableFormClick">
                    <HcIcon name="add-circle"/>
                    <span>新增表格</span>
                </el-button>
            </HcTooltip>
            <HcTooltip keys="ledger_query_abolish_form">
                <el-button hc-btn :disabled="!isTableForm || taskStatus === 1 || taskStatus === 2" @click="abolishTableFormClick">
                    <HcIcon name="delete-bin-3"/>
                    <span>废除</span>
                </el-button>
            </HcTooltip>
        </div>

        <!--关联工序-->
        <HcDialog :show="processNodeModal" title="选择关联工序" widths="62rem"  @close="processNodeModal = false" @save="processNodeClick">
            <div class="node-many-tree">
                <el-tree :load="ElTreeLoadNode" lazy class="my-tree" :props="processTreeProps" show-checkbox node-key="primaryKeyId"
                         :default-checked-keys="defaultChecked" :default-expanded-keys="defaultExpanded" check-strictly ref="processElTree"/>
            </div>
        </HcDialog>

        <!--复制任意时间-->
        <HcDialog :show="copyTimeModal" title="复制任意时间" widths="360px" bg-color="#f1f5f8" saveText="复制" @close="copyTimeModal = false" :loading="copyTimeLoading" @save="copyTimeSaveClick">
            <el-alert title="等接口中..." type="warning" show-icon/>
        </HcDialog>

        <!--批量上报审批-->
        <HcReportModal  title="日志填报上报" url="contractLog/startTaskTheLog" :show="showReportModal" :projectId="projectId" :contractId="contractId"
                        :taskName="reportTaskName" :addition="reportAddition" @hide="showReportModal = false" @finish="showReportFinish"/>
    </div>
</template>

<script setup>
import {ref, watch, nextTick} from "vue";
import queryApi from '~api/ledger/query';
import wbsQueryApi from '~api/data-fill/query';
import HTableForm from "~src/plugins/HTableForm"
import DateCalendar from "./dateCalendar/index.vue"
import {getObjValue, getObjNullValue, isString, getArrValue, isValueNull} from "vue-utils-plus"

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

//变量
const projectId = ref(props.projectId);
const contractId = ref(props.contractId);
const menuItem = ref(props.items);
const userName = ref(props.userName);
const excelIdVal = ref('');
const statusDesc = ref('');

//监听
watch(() => [
    props.projectId,
    props.contractId,
    props.items,
    props.userName,
], ([pid, cid, item, name]) => {
    projectId.value = pid
    contractId.value = cid
    menuItem.value = item
    userName.value = name
    getQueryData()
})

//渲染完成
nextTick(() => {
    getQueryData()
})

//获取相关数据
const getQueryData = () => {
    const {excelId} = menuItem.value
    excelIdVal.value = excelId > 0 ? excelId + '' : ''
    const date = recordDate.value, time = recordTime.value
    if (date && time) {
        getExcelBusinessData(date,time)
    }
}

//日期日历回调
const recordTime = ref('')
const recordDate = ref('')
const dateCalendarChoice = ({date, choices}) => {
    recordTime.value = choices
    recordDate.value = date
    getExcelBusinessData(date,choices)
}

//获取数据
const getExcelBusinessData = (date,choices) => {
    const {primaryKeyId} = menuItem.value
    getExcelHtml(excelIdVal.value)
    getTheLogBusinessData(excelIdVal.value, choices)
    getSubmitLogDateList(date,primaryKeyId)
    checkTheLogTaskStatus(choices,primaryKeyId)
}

//获取模板标签数据
const isTableForm = ref(false)
const excelHtmlData = ref('')
const getExcelHtml = async (excelId) => {
    if (excelId) {
        //获取数据
        const { error, code, data } = await queryApi.getExcelHtml({
            contractId: contractId.value || '',
            pkeyId: excelId
        }, false)
        //处理数据
        const resData = isString(data) ? data || '' : ''
        excelHtmlData.value = resData
        if (!error && code === 200 && resData) {
            setHTableForm(resData,excelId)
        } else {
            isTableForm.value = false
            statusDesc.value = '暂无表单'
            window?.$message?.warning('暂无表单')
        }
    } else {
        statusDesc.value = `excelId： ${excelId || '-1 或 空'}`
        isTableForm.value = false
    }
}

//渲染表单
const tableFormApp = ref(null)
const setHTableForm = (resData, excelId) => {
    //先卸载
    if (tableFormApp.value) {
        tableFormApp.value?.unmount()
    }
    if (resData) {
        isTableForm.value = true
        nextTick(() => {
            tableFormApp.value = HTableForm.createForm({
                template: resData,
                tableForm: tableFormData.value,
                appId: `#table-form-${excelId}`
            })
        })
    } else {
        isTableForm.value = false
        statusDesc.value = '暂无表单'
        window?.$message?.warning('暂无表单')
    }
}

//表单数据
const formLogDataList = ref([])
const getTheLogBusinessData = async (excelId, recordDate) => {
    const {primaryKeyId} = menuItem.value
    const { data } = await queryApi.getTheLogBusinessData({
        contractId: contractId.value || '',
        pkeyId: excelId,
        nodePrimaryKeyId: primaryKeyId,
        recordTime: recordDate,
        theLogId: ""
    }, false)
    //设置默认数据
    let formArrData = getArrValue(data)
    if (formArrData.length > 0) {
        for (let i = 0; i < formArrData.length; i++) {
            formArrData[i] = setFormDefaultData(formArrData[i])
        }
    } else {
        formArrData = [setFormDefaultData()]
    }
    formLogDataList.value = formArrData
    getBussDataInfo()
}

//获取表单初始数据
const formLogIndex = ref(0)
const tableFormData = ref({})
const getBussDataInfo = (index = 0) => {
    const formLog = formLogDataList.value
    const info = getObjValue(formLog[index])
    formLogIndex.value = index
    if (getObjNullValue(info)) {
        HTableForm.setPickerKey(info)
        tableFormData.value = info
    } else {
        tableFormData.value = {}
    }
    if (excelHtmlData.value) {
        setHTableForm(excelHtmlData.value, excelIdVal.value)
    }
    queryCurrentLogSelectProcessList(info?.id ?? '')
}

//获取日期记录
const dateData = ref([])
const getSubmitLogDateList = async ({year},pid) => {
    if (pid > 0) {
        const { data } = await queryApi.getSubmitLogDateList({
            projectId: projectId.value,
            contractId: contractId.value,
            primaryKeyId: pid,
            year: year
        }, false)
        //处理数据
        dateData.value = getArrValue(data)
    } else {
        dateData.value = []
    }
}

//获取当前资料的任务状态
const taskStatus = ref(1)
const checkTheLogTaskStatus = async (choices,primaryKeyId) => {
    if (primaryKeyId > 0) {
        const { error, code, data } = await queryApi.checkTheLogTaskStatus({
            projectId: projectId.value,
            contractId: contractId.value,
            nodePrimaryKeyId: primaryKeyId,
            recordTime: choices
        }, false)
        //处理数据
        const res = isValueNull(data) ? '' : data || ''
        if (!error && code === 200 && res) {
            //1和2的时候所有按钮皆可操作，废除 除外
            //3和4时, 除了预览和废除 都不行
            taskStatus.value = data
        } else {
            taskStatus.value = 1
        }
    } else {
        taskStatus.value = 1
    }
}

//关联工序
const processNodeModal = ref(false)
const showProcessModal = () => {
    processNodeModal.value = true
}

//树的配置
const processElTree = ref(null)
const processTreeProps = {label: 'title', children: 'children', isLeaf: 'notExsitChild'}
const defaultExpanded = ref([]) //默认展开
const defaultChecked = ref([]) //默认选中

//树形结构异步加载数据
const ElTreeLoadNode = async (node, resolve) => {
    if (node.level === 0) {
        const {error, code, data} = await wbsQueryApi.queryWbsTreeData({
            contractId: contractId.value ||'',
            contractIdRelation: '',
            primaryKeyId: '',
            parentId: ''
        })
        //处理数据
        if (!error && code === 200) {
            const resData = getArrValue(data)
            resolve(resData)
            defaultExpanded.value = [resData[0]?.primaryKeyId]
        } else {
            resolve([])
        }
    } else {
        const {id, contractIdRelation, primaryKeyId} = node.data
        const {error, code, data} = await wbsQueryApi.queryWbsTreeData({
            contractId: contractId.value || '',
            contractIdRelation: contractIdRelation,
            primaryKeyId: id,
            parentId: contractIdRelation ? primaryKeyId : id
        })
        //处理数据
        if (!error && code === 200) {
            resolve(getArrValue(data))
        } else {
            resolve([])
        }
    }
}

//确认关联工序
const processDataList = ref([])
const processNodeClick = () => {
    const keys = processElTree.value.getCheckedKeys()
    const formIndex = formLogIndex.value
    const formData = formLogDataList.value[formIndex]
    const linkTabIds = getArrValue(formData?.linkTabIds)
    for (let index = 0; index < keys.length; index++) {
        let pathArr = [];
        let node = processElTree.value.getNode(keys[index]);
        getPathName(node, pathArr);
        linkTabIds.push({
            path: pathArr.join('/'),
            primaryKeyId: keys[index]
        });
    }
    formLogDataList.value[formIndex]['linkTabIds'] = linkTabIds
    processDataList.value = linkTabIds
    processNodeModal.value = false
}

//获取节点的路径名字
const getPathName = (node, pathArr) => {
    if (node.parent?.parent) {
        pathArr.unshift(node.data?.title.replace(/(^\s*)|(\s*$)/g, ""));   //去掉头尾空格
        getPathName(node.parent, pathArr);
    } else {
        return; //根节点结束
    }
}

//移除工序
const deleProcess = (index) => {
    const formIndex = formLogIndex.value
    const formData = formLogDataList.value[formIndex]
    const linkTabIds = getArrValue(formData?.linkTabIds)
    linkTabIds.splice(index, 1)
    formLogDataList.value[formIndex]['linkTabIds'] = linkTabIds
    processDataList.value = linkTabIds
}

//保存数据
const tableFormSaveLoading = ref(false)
const tableFormSaveClick = async () => {
    const res = await saveExcelBussData()
    if (res) {
        await getBussPdfInfo()
    }
}

//保存
const saveExcelBussData = async () => {
    let isLinkTabIds = getLinkTabIds(); //处理工序ID
    if (isLinkTabIds) {
        tableFormSaveLoading.value = true
        const { error, code } = await queryApi.saveExcelBussData({
            dataInfo: {orderList: formLogDataList.value}
        },false)
        tableFormSaveLoading.value = false
        if (!error && code === 200) {
            window?.$message?.success('保存成功')
            return true
        } else {
            window?.$message?.warning('保存失败')
            return false
        }
    }
}

//处理工序数据
const getLinkTabIds = () => {
    let {nodeType} = menuItem.value;
    if (nodeType === 7 || nodeType === 11) {
        const formIndex = formLogIndex.value
        const formData = formLogDataList.value[formIndex]
        const linkTabIds = getArrValue(formData?.linkTabIds)
        if (linkTabIds.length > 0) {
            return true
        } else {
            window?.$message?.warning('请先关联工序')
            return false
        }
    } else {
        return true
    }
}

//预览
const previewLoading = ref(false)
const previewBussPdf = () => {
    getBussPdfInfo()
}

//预览PDF
const getBussPdfInfo = async () => {
    previewLoading.value = true
    const {primaryKeyId} = menuItem.value
    const { error, code, data } = await queryApi.getBussPdfInfo({
        contractId: contractId.value || '',
        pkeyId: excelIdVal.value,
        nodePrimaryKeyId: primaryKeyId,
        recordTime: recordTime.value,
        theLogId: ""
    }, false)
    //处理数据
    previewLoading.value = false
    const resData = isString(data) ? data || '' : ''
    if (!error && code === 200 && resData) {
        window.open(resData,'_blank')
    } else {
        window?.$message?.warning('暂无PDF，无法预览')
    }
}

//获取当前日志资料关联的工序节点信息
const queryCurrentLogSelectProcessList = async (bid) => {
    if (bid) {
        const { error, code, data, msg } = await queryApi.queryCurrentLogSelectProcessList({
            contractId: contractId.value || '',
            businessId: bid ?? ''
        }, false)
        //处理数据
        const formIndex = formLogIndex.value
        if (!error && code === 200) {
            let linkTabIds = getArrValue(data)
            formLogDataList.value[formIndex]['linkTabIds'] = linkTabIds
            processDataList.value = linkTabIds
        } else {
            processDataList.value = []
            if(msg) window?.$message?.warning(msg)
        }
    } else {
        const formIndex = formLogIndex.value
        const formData = formLogDataList.value[formIndex]
        processDataList.value = getArrValue(formData?.linkTabIds)
    }
}

//新增表格
const addTableFormClick = () => {
    const defaultData = setFormDefaultData({})
    formLogDataList.value.push(defaultData)
    const index = formLogDataList.value.length - 1
    getBussDataInfo(index)
}

//复制表格内容
const copyTableFormClick = () => {
    const formLog = formLogDataList.value
    const logIndex = formLogIndex.value
    const defaultData = setFormDefaultData(formLog[logIndex])
    formLogDataList.value.push(defaultData)
    const index = formLogDataList.value.length - 1
    getBussDataInfo(index)
}

//复制任意时间
const copyTimeLogModal = () => {
    copyTimeModal.value = true
    copyTimeLoading.value = false
}
const copyTimeModal = ref(false)
//选择日期
const copyTimeChoices = ref('')
const copyTimeChoice = ({choices}) => {
    copyTimeChoices.value = choices
}
//确认复制
const copyTimeLoading = ref(false)
const copyTimeSaveClick = async () => {
    copyTimeModal.value = false
    /*copyTimeLoading.value = true
    const {primaryKeyId} = menuItem.value
    const { error, code } = await queryApi.copyTheLogBusinessData({
        contractId: contractId.value || '',
        nodePrimaryKeyId: primaryKeyId,
        currentTime: recordTime.value,
        targetTime: copyTimeChoices.value
    }, false)
    //处理数据
    copyTimeLoading.value = false
    if (!error && code === 200) {
        window?.location?.reload()  //刷新页面
    } else {
        window?.$message?.warning('复制失败')
    }*/
}

//设置表单默认数据
const setFormDefaultData = (formInfo = {}) => {
    return {
        linkTabIds: [],
        ...formInfo,
        projectId: projectId.value,
        contractId: contractId.value,
        recordTime: recordTime.value,
        pkeyId: excelIdVal.value,
        isTheLog: "1",
        theLogId: "",
        classify: 1
    }
}

//删除记录
const closeBussDataInfo = (index) => {
    formLogDataList.value.splice(index, 1)
    formLogIndex.value = index <= 0 ?  0 : index - 1
}

//批量上报
const reportTaskName = ref('')
const reportAddition = ref({})
const showReportModal = ref(false)
const reportModalClick = () => {
    const {primaryKeyId,title} = menuItem.value
    reportTaskName.value = `${recordTime.value} ${title} ${userName.value}`
    reportAddition.value = {
        nodePrimaryKeyId: primaryKeyId,
        recordTime: recordTime.value,
    }
    showReportModal.value = true
}

//上报完成
const showReportFinish = () => {
    showReportModal.value = false
    window?.location?.reload()  //刷新页面
}

//废除
const abolishTableFormClick = () => {
    window?.$messageBox?.alert('是否废除已上报的文件？', '废除文件', {
        showCancelButton: true,
        confirmButtonText: '确定废除',
        cancelButtonText: '取消',
        callback: (action) => {
            if (action === 'confirm') {
                theLogOneAbolish()
            }
        }
    })
}
//确认废除
const theLogOneAbolish = async () => {
    const {primaryKeyId} = menuItem.value
    const { error, code } = await queryApi.theLogOneAbolish({
        projectId: projectId.value,
        contractId: contractId.value,
        nodePrimaryKeyId: primaryKeyId,
        recordTime: recordTime.value
    })
    //处理数据
    if (!error && code === 200) {
        window.$message?.success('废除成功')
        window?.location?.reload()  //刷新页面
    }
}
</script>

<style lang="scss" scoped>
.hc-table-form-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    margin-left: 24px;
    height: 100%;
    .hc-table-forem-box, .hc-fixed-page, .hc-right-pian-box, .hc-footer-box {
        padding: 24px;
        background: #f1f5f8;
        border-radius: 10px;
        box-shadow: -2px 0px 10px 0px rgba(32,37,50,0.03), 0px 10px 21px 20px rgba(32,37,50,0.03);
    }
    .hc-content-box {
        flex: 1;
        display: flex;
        position: relative;
        margin-bottom: 24px;
        height: calc(100% - 105px);
        .hc-table-forem-box {
            flex: 1;
            margin-right: 24px;
            position: relative;
        }
        .hc-fixed-page {
            position: relative;
            margin-right: 24px;
            padding: 0;
            .hc-fixed-page-list-box {
                position: relative;
                padding: 24px;
                user-select: none;
                .fixed-page-item {
                    position: relative;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    border-radius: 3px;
                    padding: 6px 10px;
                    font-size: 14px;
                    background: #f1f5f8;
                    border: 1px solid #f1f5f8;
                    color: var(--el-color-primary-light-3);
                    box-shadow: 4px 4px 8px 0 rgba(54,92,167,0.15), -4px -4px 8px 0 #ffffff;
                    transition: .1s;
                    .name-box {
                        position: relative;
                        display: flex;
                        align-items: center;
                        margin-right: 24px;
                        cursor: pointer;
                        .page {
                            margin-left: 5px;
                        }
                    }
                    .close-box {
                        position: relative;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        cursor: pointer;
                        font-size: 16px;
                    }
                    &.primary {
                        background: var(--el-color-primary);
                        color: var(--el-color-white);
                        box-shadow: var(--hc-shadow);
                        border: 1px solid #f1f5f8;
                    }
                    &+.fixed-page-item{
                        margin-top: 20px;
                    }
                }
            }
        }
        .hc-right-pian-box {
            width: 360px;
            position: relative;
            padding: 24px 20px;
            .hc-process-box {
                position: relative;
                flex: 1;
                overflow: hidden;
                .hc-scrollbar-box {
                    display: contents;
                }
                .process-item-box {
                    position: relative;
                    color: #838791;
                    font-size: 14px;
                    padding: 8px 0;
                    display: flex;
                    align-items: flex-start;
                    .process-item {
                        position: relative;
                        flex: 1;
                    }
                    .process-icon {
                        font-size: 20px;
                        cursor: pointer;
                        margin-left: 16px;
                        transition: color 0.2s;
                        &:hover {
                            color: var(--el-color-primary-light-3);
                        }
                    }
                }
                .process-item-box + .process-item-box {
                    border-top: 0.5px solid #e9e9e9;
                }
            }
        }
    }
    .hc-footer-box {
        position: relative;
        height: 80px;
        display: flex;
        align-items: center;
        padding: 20px 24px;
        overflow: hidden;
    }
}
</style>

<style lang="scss">
.node-many-tree {
    position: relative;
    .my-tree .el-tree-node .el-checkbox .el-checkbox__inner {
        display: none;
    }
    .my-tree .el-tree-node .is-leaf + .el-checkbox .el-checkbox__inner {
        display: inline-block;
    }
}
.hc-table-form-content .hc-content-box .hc-table-forem-box .hc-fixed-page {
    .el-button {
        display: block;
        margin: 20px;
    }
}
</style>