admin/src/views/project/list/adjust-excel.vue

<template>
    <hc-drawer v-model="isShow" ui="hc-project-list-adjust-excel-drawer" to-id="hc-layout-box" is-close @close="drawerClose">
        <hc-page-split :fold="false" :options="splitOptions">
            <template #left>
                <hc-card :title="`【调整表单】${dataInfo.tableName}`">
                    <hc-table-form ref="excelRef" :html="excelHtml" @tap="excelClick" />
                </hc-card>
            </template>
            <hc-card scrollbar>
                <template #header>
                    <el-segmented v-model="tabsKey" :options="tabsProps" @change="tabsChange" />
                </template>
                <HcSetInput v-if="tabsKey === 'tab1'" ref="setInputRef" :info="dataInfo" @finish="getDataApi" />
                <HcSetEVisa v-if="tabsKey === 'tab2'" ref="setEVisaRef" :info="dataInfo" @finish="getDataApi" />
            </hc-card>
        </hc-page-split>
    </hc-drawer>
</template>

<script setup>
import { ref, watch } from 'vue'
import { getObjValue, isNullES } from 'js-fast-way'
import HcSetInput from './adjust-excel/set-input.vue'
import HcSetEVisa from './adjust-excel/set-e-visa.vue'
import excelApi from '~api/exctab/exceltab'

const props = defineProps({
    info: {
        type: Object,
        default: () => ({}),
    },
})

//事件
const emit = defineEmits(['close'])

//双向绑定
const isShow = defineModel('modelValue', {
    default: false,
})

//监听数据
const dataInfo = ref(props.info)
watch(() => props.info, (data) => {
    dataInfo.value = getObjValue(data)
}, { immediate: true, deep: true })

//监听显示
watch(isShow, (val) => {
    if (val) getDataApi()
})

//页面分割
const splitOptions = {
    sizes: [70, 30],
    snapOffset: 0,
    minSize: [300, 300],
}

//选项卡
const tabsKey = ref('tab1')
const tabsProps = [
    { label: '输入框', value: 'tab1' },
    { label: '电签位置', value: 'tab2' },
    { label: '公式条件', value: 'tab3' },
    { label: '默认信息', value: 'tab4' },
    { label: '提示信息', value: 'tab5' },
]
const tabsChange = (val) => {
    console.log(val)
}

//处理相关数据
const excelRef = ref(null)
const excelHtml = ref('')
const getDataApi = async () => {
    const { pkeyId, excelId } = getObjValue(dataInfo.value)
    if (isNullES(pkeyId) || isNullES(excelId)) {
        window?.$message.warning('表单值异常，请联系管理员')
        return
    }
    const { data } = await excelApi.getExcelHtml({ pkeyId })
    excelHtml.value = data || ''
}

//ref
const setInputRef = ref(null)
const setEVisaRef = ref(null)

//框框被点击
const keys = [
    'type', 'key', 'tr', 'td', 'index', 'x1', 'y1', 'x2', 'y2', 'name', 'text', 'rows', 'format',
    'weighing', 'label', 'value', 'src', 'val', 'contractid', 'pkeyid', 'objs', 'range',
]
const excelClick = async (item) => {
    const dom = item?.target
    let obj = { zdom: item }
    for (let i = 0; i < keys.length; i++) {
        obj[keys[i]] = await getAttribute(dom, keys[i])
    }
    //设置输入框
    if (tabsKey.value === 'tab1') {
        setInputRef.value?.setDomData(obj)
    }
}

//获取属性
const getAttribute = async (dom, key) => {
    try {
        return dom?.getAttribute(`data-${key}`)
    } catch (e) {
        return null
    }
}

//关闭抽屉
const drawerClose = () => {
    isShow.value = false
    emit('close')
}
</script>

<style scoped lang="scss">

</style>

<style lang="scss">
.el-overlay .el-drawer.hc-project-list-adjust-excel-drawer {
    background-color: #F1F5F8;
    .hc-table-form-data-item {
        padding: 0;
    }
    .hc-table-form-data-item .hc-excel-table-form {
        background: #e4e7eb;
    }
}
</style>