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 class="hc-fixed-page" v-if="formLogDataList.length > 1">
                    <el-scrollbar>
                        <template v-for="(item,index) in formLogDataList">
                            <el-button :type="index === formLogIndex ? 'primary' : ''" hc-btn @click="getBussDataInfo(index)">
                                <HcIcon name="sticky-note"/>
                                <span>第{{index + 1}}页</span>
                            </el-button>
                        </template>
                    </el-scrollbar>
                </div>
            </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.pathName}}</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" :loading="tableFormSaveLoading" @click="tableFormSaveClick">
                    <HcIcon name="save"/>
                    <span>保存</span>
                </el-button>
            </HcTooltip>
            <HcTooltip keys="ledger_query_report_form">
                <el-button hc-btn :disabled="!isTableForm">
                    <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" @click="copyTableFormClick">
                    <HcIcon name="file-copy-2"/>
                    <span>复制当前表格及内容</span>
                </el-button>
            </HcTooltip>
            <HcTooltip keys="ledger_query_time_form">
                <el-button hc-btn :disabled="!isTableForm" @click="copyTimeLogModal">
                    <HcIcon name="file-copy-2"/>
                    <span>复制任意时间</span>
                </el-button>
            </HcTooltip>
            <HcTooltip keys="ledger_query_add_form">
                <el-button hc-btn :disabled="!isTableForm" @click="addTableFormClick">
                    <HcIcon name="add-circle"/>
                    <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">
            <DateCalendar :dateData="dateData" @choice-date="copyTimeChoice"/>
            <el-alert title="请选择一个日期复制" type="warning" show-icon/>
        </HcDialog>

    </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} from "vue-utils-plus"

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

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

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

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

//获取相关数据
const getQueryData = () => {
    const {excelId} = menuItem.value
    excelIdVal.value = excelId > 0 ? excelId + '' : ''
}

//日期日历回调
const recordTime = ref('')
const dateCalendarChoice = ({date, choices}) => {
    const {primaryKeyId} = menuItem.value
    recordTime.value = choices
    getExcelHtml(excelIdVal.value)
    getTheLogBusinessData(excelIdVal.value, choices)
    getSubmitLogDateList(date,primaryKeyId)
    queryCurrentLogSelectProcessList(choices)
}

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

//渲染表单
const tableFormApp = ref(null)
const setHTableForm = async (resData, excelId, info) => {
    //先卸载
    if (tableFormApp.value) {
        tableFormApp.value?.unmount()
    }
    if (resData) {
        isTableForm.value = true
        await nextTick(() => {
            tableFormApp.value = HTableForm({
                template: resData,
                tableForm: info,
                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({
        pkeyId: excelId,
        nodePrimaryKeyId: primaryKeyId,
        recordTime: recordDate,
        theLogId: ""
    }, false)
    //设置默认数据
    let formArrData = getArrValue(data)
    for (let i = 0; i < formArrData.length; i++) {
        formArrData[i] = setFormDefaultData(formArrData[i])
    }
    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)) {
        const pickerKey = info['pickerKey'] || ''
        if (pickerKey) {
            const pickerKeys = pickerKey.split(',')
            for (let i = 0; i < pickerKeys.length; i++) {
                const val = info[pickerKeys[i]] || ''
                if (val) {
                    const data = val.replace(/'/g,'"');
                    info[pickerKeys[i]] = JSON.parse(data)
                } else {
                    info[pickerKeys[i]] = []
                }
            }
        }
        //有数据，关联数据
        tableFormData.value = info
    } else {
        tableFormData.value = {}
    }
    if (excelHtmlData.value) {
        setHTableForm(excelHtmlData.value, excelIdVal.value, tableFormData.value)
    }
}

//获取日期记录
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 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();
    let NodesArr = []
    for (let index = 0; index < keys.length; index++) {
        let pathArr = [];
        let node = processElTree.value.getNode(keys[index]);
        getPathName(node, pathArr);
        NodesArr.push({
            primaryKeyId: keys[index],
            pathName: pathArr.join('/')
        })
    }
    processDataList.value = NodesArr
    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) => {
    processDataList.value.splice(index, 1);
}

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

//保存
const saveExcelBussData = async () => {
    let linkTabIds = setProcessData(); //处理工序ID
    if (linkTabIds) {
        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 setProcessData = () => {
    let linkTabIds = [], {nodeType} = menuItem.value;
    if (nodeType === 7 || nodeType === 11) {
        const nodes = processDataList.value || [];
        if (nodes.length > 0) {
            for (let i = 0; i < nodes.length; i++) {
                let item = nodes[i];
                linkTabIds.push({
                    path: item['pathName'],
                    primaryKeyId: item['primaryKeyId']
                })
            }
            return linkTabIds
        } 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({
        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 (dateVal) => {
    const {primaryKeyId} = menuItem.value
    const { data } = await queryApi.queryCurrentLogSelectProcessList({
        nodePrimaryKeyId: primaryKeyId,
        recordTime: dateVal,
        theLogId: ""
    }, false)
    //处理数据
    let dataKeys = getArrValue(data), NodesArr = []
    for (let i = 0; i < dataKeys.length; i++) {
        NodesArr.push({
            primaryKeyId: dataKeys[i]?.primaryKeyId,
            pathName: dataKeys[i]?.path
        })
    }
    processDataList.value = NodesArr
}

//新增表格
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 () => {
    copyTimeLoading.value = true
    const {primaryKeyId} = menuItem.value
    const { error, code, data } = await queryApi.copyTheLogBusinessData({
        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 {
        ...formInfo,
        projectId: projectId.value,
        contractId: contractId.value,
        recordTime: recordTime.value,
        pkeyId: excelIdVal.value,
        isTheLog: "1",
        theLogId: "",
        classify: 1
    }
}
</script>

<style lang="scss" scoped>
.hc-table-form-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    margin-left: 24px;
    height: 100%;
    .hc-content-box {
        flex: 1;
        display: flex;
        position: relative;
        margin-bottom: 24px;
        height: calc(100% - 105px);
        .hc-table-forem-box {
            flex: 1;
            padding: 24px;
            margin-right: 24px;
            position: relative;
            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-fixed-page {
                position: absolute;
                top: 4px;
                right: 4px;
                bottom: 4px;
                z-index: 99;
                overflow: hidden;
            }
        }
        .hc-right-pian-box {
            width: 360px;
            position: relative;
            padding: 24px 20px;
            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-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;
        background: #f1f5f8;
        border-radius: 10px;
        display: flex;
        align-items: center;
        padding: 20px 24px;
        box-shadow: -2px 0px 10px 0 rgba(32,37,50,0.03), 0 -10px 21px 3px rgba(32,37,50,0.03);
        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>