for_client/src/views/data-fill/components/ListItem.vue

<template>
    <div class="data-fill-list-box">
        <el-collapse v-model="ActiveKey" accordion @change="CollapseChange">
            <template v-for="(item,index) in listDatas" :key="item?.pkeyId">
                <el-collapse-item :name="`item-${index}-${item?.pkeyId}`" :disabled="item['isBussShow'] === 2" :id="`item-${index}-${item?.pkeyId}`">
                    <template #title>
                        <div class="hc-collapse-item-header">
                            <div class="text-lg truncate item-title">{{item.deptName}}</div>
                            <div class="hc-extra-text-box">
                                <HcTooltip keys="wbs_del_table" v-if="item['isCopeTab'] === 2">
                                    <el-button type="danger" plain :disabled="item['isBussShow'] === 2" @click.stop="delClick(item,index)">删除本表</el-button>
                                </HcTooltip>
                                <HcTooltip keys="wbs_copy_table">
                                    <el-button type="primary" plain :disabled="item['isBussShow'] === 2" @click.stop="copyClick(item,index)">复制本表</el-button>
                                </HcTooltip>
                                <HcTooltip keys="wbs_hide_table">
                                    <el-button type="primary" plain @click.stop="hideClick(item,index)">
                                        <template v-if="item['isBussShow'] === 1">隐藏本表</template>
                                        <template v-else>显示本表</template>
                                    </el-button>
                                </HcTooltip>
                                <HcTooltip keys="wbs_preview_table">
                                    <el-button type="primary" plain :disabled="item['isBussShow'] === 2 || item['isTabPdf'] === 1" @click.stop="previewClick(item,index)">预览</el-button>
                                </HcTooltip>
                                <HcTooltip keys="wbs_upload_table">
                                    <el-button :type="item['tabFileType'] === 2?'success':'primary'" plain :disabled="item['isBussShow'] === 2" @click.stop="uploadClick(item,index)">
                                        <template v-if="item['tabFileType'] === 2">已上传</template>
                                        <template v-else>上传</template>
                                    </el-button>
                                </HcTooltip>
                            </div>
                        </div>
                    </template>
                    <div class="data-fill-list-item-content">
                        <div class="data-fill-table-form-box">
                            <div :id="`table-form-${item?.pkeyId}`"/>
                            <div class="hc-no-table-form" v-if="item?.isTableForm === false">
                                <div class="table-form-no">
                                    <img :src="notableform" alt=""/>
                                    <div class="desc">暂无表单数据</div>
                                </div>
                            </div>
                        </div>
                        <div class="data-fill-table-tip-box">
                            <div class="text-orange tip-title">
                                <HcIcon name="error" fill ui="text-2xl"/>
                                <span class="ml-1">提示</span>
                            </div>
                            <div class="text-gray-400 tip-item">1、灰色框代表可通过系统识别计算，公式自动引用，可通过公式计算少量数据，(表头数据及简单)，也可只填写白色框数据</div>
                            <div class="text-gray-400 tip-item">2、系统支持键盘中，shift + tab键向上一个填报框切换，tab向下一个填报框切换。暂不支持上下按键切换输入框</div>
                            <div class="table-tip-foot">
                                <div class="tip-left-btn">
                                    <HcTooltip keys="wbs_import_table">
                                        <div class="text-gray-400 dow-text">
                                            <HcIcon name="publish" ui="text-lg"/>
                                            <span class="ml-1">导入列表数据</span>
                                        </div>
                                    </HcTooltip>
                                    <HcTooltip keys="wbs_download_table">
                                        <div class="text-main dow-text">
                                            <HcIcon name="file_download" ui="text-lg"/>
                                            <span class="ml-1">下载导入模板</span>
                                        </div>
                                    </HcTooltip>
                                </div>
                                <div class="tip-right-btn">
                                    <HcTooltip keys="wbs_save_table">
                                        <el-button type="primary" hc-btn size="large" @click="tableFormSaveClick(item,index)">保存</el-button>
                                    </HcTooltip>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-collapse-item>
            </template>
        </el-collapse>
    </div>
    <!--右键菜单-->
    <HcContextMenu ref="contextMenuRef" :datas="tableFormMenu" @item-click="handleMenuSelect"></HcContextMenu>
    <!--上传文件-->
    <el-dialog v-model="uploadModal" title="上传文件" width="38rem" class="hc-modal-border">
        <HcUpload :fileList="fileListData" :datas="uploadData" @change='uploadChange'/>
    </el-dialog>
    <!--插入设计值/频率-->
    <el-dialog v-model="IDVFModal" title="插入设计值/频率" width="600px" class="hc-modal-border">
        <el-alert title="填写完设计值和频率，系统自动计算实测值" type="warning" :closable="false"/>
        <el-form ref="formIDVFRef" :model="formIDVFModel" :rules="formIDVFRules" label-width="auto" size="large">
            <el-form-item label="设计值" prop="designValue">
                <el-input v-model="formIDVFModel.designValue" placeholder="请输入设计值"/>
            </el-form-item>
            <el-form-item label="频率" prop="frequency">
                <el-input v-model="formIDVFModel.frequency" placeholder="请输入频率"/>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button size="large" @click="IDVFModal = false">取消</el-button>
                <el-button type="primary" hc-btn @click="IDVFModal = false">确认插入</el-button>
            </div>
        </template>
    </el-dialog>
    <!--插入特殊字符-->
    <el-dialog v-model="specialModal" title="插入特殊字符" width="600px" class="hc-modal-border">
        <el-form ref="specialFormRef" :model="specialFormModel" :rules="specialFormRules" label-width="0px" size="large" class="mb-6">
            <el-form-item prop="val" class="special-form-item">
                <el-input v-model="specialFormModel.val" ref="specialRef" id="specialId" placeholder="请选择特殊字符代码" clearable @blur="specialInputBlur"/>
            </el-form-item>
        </el-form>
        <el-row :gutter="20" style="margin: -10px;">
            <el-col :span="3" style="padding: 10px;" v-for="item in specialCharacters">
                <div class="special-box" @click="specialClick">
                    <span class="font-EUDC" :title="`字符代码(C):${item !== 'K̅'?item.slice(2,7):'K̅'}`" v-html="item"/>
                </div>
            </el-col>
        </el-row>
        <template #footer>
            <div class="dialog-footer">
                <el-button size="large" @click="specialModal = false">取消</el-button>
                <el-button type="primary" hc-btn @click="specialNodeClick">确认插入</el-button>
            </div>
        </template>
    </el-dialog>
    <!--关联试验数据-->
    <el-dialog v-model="CTDModal" title="关联试验数据" width="850px" class="hc-modal-border">
        开发中...
        <template #footer>
            <div class="dialog-footer">
                <el-button size="large" @click="CTDModal = false">取消</el-button>
                <el-button type="primary" hc-btn @click="CTDModal = false">确认</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import {ref,watch,nextTick} from "vue";
import notableform from '~src/assets/view/notableform.svg';
import {HTableForm} from "~src/plugins/HTableForm"
import wbsApi from "~api/data-fill/wbs"
import HcUpload from "./HcUpload.vue"
import {utilsText, isType, toParse, formValidate,deepClone} from "vue-utils-plus"

//初始
const props = defineProps({
    datas: {
        type: Array,
        default: () => ([])
    },
    classify: {
        type: [String,Number],
        default: ''
    },
    status: {
        type: [String,Number],
        default: ''
    },
})
const {isString, getObjNullValue, getArrValue} = isType()
const {setPosInsert, setPosRange} = utilsText()
const listDatas = ref(props.datas)
const classify = ref(props.classify)
const isStatus = ref(props.status)

//监听
watch(() => [
    props.datas,
    props.classify,
], ([datas, classifyVal]) => {
    listDatas.value = datas
    classify.value = classifyVal
    setFormDataNum(datas)
})

//监听
watch(() => [
    props.status
], ([val]) => {
    //1 未填报，2待上报，3已上报
    isStatus.value = val
})

//渲染完成
nextTick(() => {
    setFormDataNum(props.datas)
})

//获取表单初始数据
const getFormDataInit = (item, pkeyId) => {
    return {
        projectId: item?.projectId,
        contractId: item?.contractId,
        classify: classify.value,
        pkeyId: pkeyId ? pkeyId + '' : '',
    }
}

//设置表单对象的数量
const formData = ref([])
const setFormDataNum = (datas) => {
    let newArr = [];
    for (let i = 0; i < datas.length; i++) {
        newArr.push(getFormDataInit(datas[i], datas[i].pkeyId))
    }
    formData.value = newArr
}

//展开事件
const ActiveKey = ref('')
const CollapseChange = (name) => {
    ActiveKey.value = name
    const names = name ? name.split('-') : []
    if (names.length > 0) {
        getOffsetTop(name)
        const index = names[1]
        const item = listDatas.value[index]
        if (!item.isTableFormRender) {
            //渲染表单
            getExcelHtml(item,index)
            //获取已填写的数据
            getBussDataInfo(item,item.pkeyId, index)
        }
    } else {
        getOffsetTop()
    }
}

//获取模板标签数据
const getExcelHtml = async (item,index) => {
    const pkeyIds = item.pkeyId ? item.pkeyId + '' : ''
    if (pkeyIds) {
        const {error, code, data} = await wbsApi.getExcelHtml({pkeyId: pkeyIds}, false)
        const resData = isString(data) ? data || '' : ''
        if (!error && code === 200 && resData) {
            item.isTableForm = true
            //渲染表单
            HTableForm({
                template: resData,
                tableForm: formData.value[index],
                appId: `#table-form-${pkeyIds}`,
                onRight: (event, KeyName) => {
                    onRightClick(event, KeyName, index)
                }
            })
            item.isTableFormRender = true
        } else {
            item.isTableForm = false
            window?.$message?.warning('暂无表单')
        }
    } else {
        item.isTableForm = false
        window?.$message?.warning('pkeyId为空')
    }
}

//获取已填写的数据
const getBussDataInfo = async (item,pkeyId, index) => {
    const pkeyIds = pkeyId ? pkeyId + '' : ''
    if (pkeyIds) {
        const {error, code, data} = await wbsApi.getBussDataInfo({pkeyId: pkeyIds}, false)
        const resData = getObjNullValue(data)
        if (!error && code === 200 && resData) {
            //处理日期范围数据
            const pickerKey = resData['pickerKey'] || ''
            const pickerKeys = pickerKey.split(',')
            for (let i = 0; i < pickerKeys.length; i++) {
                const val = resData[pickerKeys[i]] || ''
                if (val) {
                    const data = val.replace(/'/g,'"');
                    resData[pickerKeys[i]] = toParse(data) || []
                } else {
                    resData[pickerKeys[i]] = []
                }
            }
            //有数据，关联数据
            const InitObj = getFormDataInit(item, pkeyId)
            formData.value[index] = { ...resData, ...InitObj}
        } else {
            formData.value[index] = getFormDataInit(item, pkeyId)
        }
    } else {
        window?.$message?.warning('pkeyId为空')
    }
}

//单个保存
const tableFormSaveClick = async (item,index) => {
    if (isStatus.value !== '3') {
        const res = await saveExcelBussData(item,index)
        if (res) {
            await getBussPdfInfo(item)
            renewData()
        }
    } else {
        window?.$message?.warning('已上报的资料，不允许保存。')
    }
}

//保存表单数据
const saveExcelBussData = async (item, index, showTip = true) => {
    const InitObj = getFormDataInit(item, item.pkeyId)
    const {error, code, data} = await wbsApi.saveExcelBussData({
        ...formData.value[index],
        ...InitObj
    }, false)
    //处理数据
    if (!error && code === 200) {
        if(showTip) window?.$message?.success('保存成功')
        return true
    } else {
        if(showTip) window?.$message?.warning(data.msg || '保存失败')
        return false
    }
}

//预览PDF
const getBussPdfInfo = async (item, showTip = true) => {
    const pkeyIds = item.pkeyId ? item.pkeyId + '' : ''
    if (pkeyIds) {
        const {error, code, data} = await wbsApi.getBussPdfInfo({
            pkeyId: pkeyIds
        },false)
        if (!error && code === 200) {
            if (data) {
                window.open(data, '_blank')
            } else if(showTip) {
                window?.$message?.warning('PDF错误')
            }
        } else {
            if(showTip) {
                window?.$message?.warning(data.msg || '获取PDF失败')
            }
        }
    } else {
        window?.$message?.warning('pkeyId为空')
    }
}

//删除本表
const delClick = async (item) => {
    const pkeyIds = item.pkeyId ? item.pkeyId + '' : ''
    if (pkeyIds) {
        if (isStatus.value !== '3') {
            const {error, code} = await wbsApi.removeBussTabInfo({
                pkeyid: pkeyIds,
                classify: classify.value,
            })
            if (!error && code === 200) {
                window?.$message?.warning('操作成功')
                renewData()
            }
        } else {
            window?.$message?.warning('已上报的资料，不允许删除')
        }
    } else {
        window?.$message?.warning('pkeyId为空')
    }
}

//复制本表
const copyClick = async (item,index) => {
    const pkeyIds = item.pkeyId ? item.pkeyId + '' : ''
    if (pkeyIds) {
        if (isStatus.value !== '3') {
            const res = await saveExcelBussData(item,index,false)
            if (res) {
                const {error, code} = await wbsApi.copeBussTab({pkeyId: pkeyIds})
                if (!error && code === 200) {
                    window?.$message?.warning('操作成功')
                    renewData()
                }
            } else {
                window?.$message?.warning('复制本表操作失败')
            }
        } else {
            window?.$message?.warning('已上报的资料，不允许复制')
        }
    } else {
        window?.$message?.warning('pkeyId为空')
    }
}

//隐藏本表
const hideClick = async (item) => {
    const pkeyIds = item.pkeyId ? item.pkeyId + '' : ''
    if (pkeyIds) {
        if (isStatus.value !== '3') {
            const isBussShow = item['isBussShow'] === 2 ? 1 : 2 //状态(1显示 2隐藏)
            const {error, code} = await wbsApi.showBussTab({
                pkeyId: pkeyIds,
                status: isBussShow
            })
            if (!error && code === 200) {
                window?.$message?.warning('操作成功')
                renewData()
            }
        } else {
            window?.$message?.warning('已上报的资料，不允许隐藏')
        }
    } else {
        window?.$message?.warning('pkeyId为空')
    }
}

//预览
const previewClick = async (item,index) => {
    await getBussPdfInfo(item)
}

//上传变量
const uploadModal = ref(false)
const fileListData = ref([]);
const uploadData = ref({})

//上传被点击
const uploadClick = (item) => {
    const pkeyIds = item.pkeyId ? item.pkeyId + '' : ''
    if (pkeyIds) {
        if (isStatus.value !== '3') {
            uploadModal.value = true
            uploadData.value = getFormDataInit(item,pkeyIds)
            //获取文件列表
            getBussFileList(pkeyIds)
        } else {
            window?.$message?.warning('已上报的资料，不允许上传')
        }
    } else {
        window?.$message?.warning('pkeyId为空')
    }
}

//获取文件列表
const getBussFileList = async (pkeyId) => {
    const {error, code, data} = await wbsApi.getBussFileList({
        pkeyid: pkeyId
    })
    if (!error && code === 200) {
        fileListData.value = getArrValue(data)
    } else {
        fileListData.value = []
    }
}

//上传文件
const uploadChange = async ({type}) => {
    if(type === 'success') {
        uploadModal.value = false
        renewData()
    } else if (type === 'del') {
        renewData()
    }
}

//相关变量
const tableFormItemNode = ref({})

//菜单数据
const tableFormMenu = ref([
    {label: '插入设计值/频率', key: "IDVF"},
    {label: '插入特殊字符', key: "special"},
    {label: '关联试验数据', key: "CTD"},
])

//鼠标右键事件
const contextMenuRef = ref(null)
const onRightClick = (event, KeyName, index) => {
    //取光标位置
    const specialDom = document.getElementById(KeyName + "")
    const startPos = specialDom?.selectionStart || 0
    const endPos = specialDom?.selectionEnd || 0
    //存储临时信息
    tableFormItemNode.value = {KeyName, index, startPos, endPos}
    contextMenuRef.value?.showMenu(event) //展开菜单
}

//鼠标右键菜单被点击
const handleMenuSelect = ({key}) => {
    if (key === 'IDVF') {
        IDVFModal.value = true
    } else if (key === 'special') {
        specialModalShow()
    } else if (key === 'CTD') {
        CTDModal.value = true
    }
}

//插入设计值
const IDVFModal = ref(false)
const formIDVFRef = ref(null)
const formIDVFModel = ref({designValue: '', frequency: ''})
const formIDVFRules = {
    designValue: {
        required: true,
        trigger: "blur",
        message: "请输入设计值"
    },
    frequency: {
        required: true,
        trigger: "blur",
        message: "请输入频率"
    }
}

//插入特殊字符
const specialModal = ref(false)
const specialCharacters = ref([
    '&#57344;', "&#57345;", "&#57346;", "&#57347;", '&#8804;', '&#8805;', '&#8451;',
    '&#9312;', '&#9313;', '&#9314;', '&#9315;', '&#9316;', '&#9317;', '&#9318;', '&#9319;', '&#9320;', '&#9321;', '&#9322;', '&#9323;',
    '&#9324;', '&#9325;', '&#9326;', '&#9327;', '&#9328;', '&#9329;', '&#9330;', '&#9331;',
    "&#8544;", "&#8545;", "&#8546;", "&#8547;", "&#8548;", "&#8549;", "&#8550;", "&#8551;", "&#8552;", "&#8553;", "&#8554;", "&#8555;","K̅"
])

//输入框验证
const specialFormRef = ref(null)
const specialFormModel = ref({val: ''})
const specialFormRules = {
    val: {
        required: true,
        trigger: "blur",
        message: "请选择特殊字符代码"
    }
}
//显示插入特殊字符
const specialRef = ref(null)
const specialModalShow = () => {
    specialFormModel.value.val = ''
    specialModal.value = true
    nextTick(() => {
        specialRef.value?.focus();
    })
}
//失去焦点
const specialPos = ref({start: 0, end: 0})
const specialInputBlur = (e) => {
    specialPos.value = {
        start: e?.target?.selectionStart || 0,
        end: e?.target?.selectionEnd || 0
    }
}
//点击符号
const specialClick = (event) => {
    const text = event?.target?.innerText ?? ''
    const start = specialPos.value.start
    const end = specialPos.value.end
    const form = specialFormModel.value.val
    specialFormModel.value.val = setPosInsert(start, end, form, text)
    specialRef.value?.focus();
    let posVal = start + text.length;
    nextTick(() => {
        setPosRange('specialId', posVal)
    })
}

//确认插入
const specialNodeClick = async () => {
    const res = await formValidate(specialFormRef.value)
    if (res) {
        const item = tableFormItemNode.value
        const form = formData.value[item.index]
        const val = specialFormModel.value.val ?? ''
        formData.value[item.index][item.KeyName] = setPosInsert(item.startPos, item.endPos, form[item.KeyName], val)
        specialModal.value = false
        specialRef.value?.focus();
        let posVal = item.startPos + val.length;
        nextTick(() => {
            setPosRange(item.KeyName, posVal)
        })
    }
}

//关联试验数据
const CTDModal = ref(false)

//事件
const emit = defineEmits(['renew','offsetTop'])

//被点击
const getOffsetTop = (key = '') => {
    if (key) {
        const dom = document.getElementById(key)
        emit('offsetTop', dom.offsetTop)
    } else {
        emit('offsetTop', 0)
    }
}

//通知数据更新
const renewData = () => {
    emit('renew')
    ActiveKey.value = ''
}

//获取表单数据
const getFormData = () => {
    const formArr = deepClone(formData.value);
    return formArr.filter((item) => {
        return (item.pkeyId??'') !== '';
    })
}

// 暴露出去
defineExpose({
    getFormData
})
</script>

<style lang="scss" scoped>
.data-fill-list-box {
    position: relative;
    .hc-collapse-item-header {
        flex: 1;
        position: relative;
        margin-left: 46px;
        display: flex;
        align-items: center;
        .item-title {
            flex: 1;
            position: relative;
            user-select: none;
            color: #50545E;
            font-size: 16px;
            font-weight: 400;
            cursor: pointer;
        }
        .hc-extra-text-box {
            position: relative;
            padding-right: 24px;
        }
    }
    .data-fill-list-item-content {
        position: relative;
        display: flex;
        height: calc(100vh - 386px);
        .data-fill-table-form-box {
            position: relative;
            padding: 24px 20px;
            height: 100%;
            overflow: auto;
            flex: 1;
            .hc-no-table-form {
                position: relative;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                .table-form-no {
                    position: relative;
                    img {
                        width: 350px;
                    }
                    .desc {
                        text-align: center;
                        font-size: 20px;
                        color: #aaa;
                    }
                }
            }
        }
        .data-fill-table-tip-box {
            width: 240px;
            position: relative;
            border-left: 1px solid #E9E9E9;
            padding: 20px 15px 80px;
            .tip-title {
                font-size: 16px;
                margin-bottom: 10px;
                display: flex;
                align-items: center;
            }
            .tip-item {
                margin-bottom: 20px;
            }
            .table-tip-foot {
                position: absolute;
                bottom: 15px;
                right: 0;
                left: 0;
                display: flex;
                align-items: center;
                padding: 0 15px;
                .tip-left-btn {
                    flex: 1;
                    .dow-text {
                        cursor: pointer;
                        display: flex;
                        align-items: center;
                    }
                }
            }
        }
    }
}
.special-box {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #eee;
    border-radius: 3px;
    height: 52px;
    width: 52px;
    cursor: pointer;
    user-select: none;
    transition: color .3s, background-color .3s;
    &:hover {
        color: var(--el-color-primary);
        background-color: var(--el-color-primary-light-8);
    }
    .font-EUDC {
        font-size: 22px;
    }
}
</style>

<style lang="scss">
.data-fill-list-box {
    .el-collapse {
        --el-collapse-header-height: 60px;
        border: 0;
        .el-collapse-item {
            margin: 0 0 16px;
            background-color: #f1f5f8;
            border: 1px solid #E9E9E9;
            border-radius: 4px;
        }
        .el-collapse-item__header {
            background-color: transparent;
            font-weight: 400;
            border-bottom: 0;
            cursor: default;
            font-size: 14px;
            .el-collapse-item__arrow {
                position: absolute;
                color: #50545E;
                cursor: pointer;
                left: 20px;
                margin: 0;
            }
        }
        .el-collapse-item.is-active .el-collapse-item__header.is-active {
            background-color: #E7EEF4;
        }
        .el-collapse-item__wrap {
            background-color: transparent;
            border-bottom: 0;
            .el-collapse-item__content {
                position: relative;
                padding-bottom: 0;
                font-size: 14px;
                color: #50545E;
                line-height: initial;
            }
        }
    }
    //设置表单样式
    .data-fill-table-form-box {
        td {
            padding: 6px;
            .el-input {
                background-color: #ffffff !important;
                border-radius: 3px;
                .el-input__wrapper {
                    background-color: inherit;
                }
                .el-input__wrapper.is-focus, .el-input__wrapper:hover {
                    box-shadow: 0 0 0 1.5px var(--el-input-focus-border-color) inset;
                    background-color: #eddac4;
                }
                //公式 #dcdcdc
                //焦点 #eddac4
            }
        }
    }
}

//插入特殊字符弹窗的输入框
.data-fill-list-box .data-fill-table-form-box td,
.data-fill-list-box .data-fill-table-form-box td .el-input .el-input__wrapper .el-input__inner,
.el-form-item.special-form-item .el-form-item__content .el-input .el-input__wrapper .el-input__inner {
    font-family: "EUDC", 宋体, v-sans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
</style>