admin/src/views/project/list/edit-element.vue

<template>
    <hc-drawer v-model="isShow" ui="hc-project-list-edit-element-drawer" to-id="hc-layout-box" is-close @close="drawerClose">
        <hc-page-split :fold="false" :options="splitOptions">
            <template #left>
                <hc-card :title="`【编辑元素】${dataInfo.tableName}`">
                    <template #search>
                        <div class="text-13px color-#f0720a">
                            <span>提示：鼠标右键功能：更换匹配元素字段、新增元素字段、删除匹配元素字段、公式配置</span>
                            <span class="ml-14px text-red-6">红色：代表匹配不成功、</span>
                            <span class="text-blue-6">蓝色代表推荐匹配元素字段、</span>
                            <span class="text-green-6">绿色代表匹配成功</span>
                        </div>
                    </template>
                    <hc-table-form ref="excelRef" :html="excelHtml" @tap="excelClick" />
                </hc-card>
            </template>
            <hc-card scrollbar>
                <template #header>
                    <el-button type="warning">表单调整</el-button>
                    <el-button type="primary">公式配置</el-button>
                </template>
                <template #extra>
                    <el-button @click="drawerClose">返回上一级</el-button>
                </template>
                <el-form ref="formRef" :model="formModel" :rules="formRules" label-position="left" label-width="auto">
                    <el-form-item label="当前元素坐标：" prop="colName">
                        <el-input v-model="formModel.colName" placeholder="请点击左侧表单" disabled />
                    </el-form-item>
                    <el-form-item label="将元素替换为：" prop="htmlType">
                        <el-select v-model="formModel.htmlType" filterable block placeholder="输入元素名称搜索">
                            <el-option label="个人证书" :value="2" />
                            <el-option label="企业证书" :value="6" />
                        </el-select>
                    </el-form-item>
                </el-form>
                <div class="action-btn-box mb-40px mt-10px text-center">
                    <el-button type="primary" @click="savingClick">临时保存</el-button>
                    <el-button type="danger" style="margin-left: 50px">删除文本</el-button>
                </div>
                <div class="hc-edit-element-collapse">
                    <el-collapse v-model="activeNames">
                        <el-collapse-item name="key1">
                            <template #title>
                                <div class="hc-collapse-item-header hc-flex">
                                    <div class="title text-green">本次临时保存的元素</div>
                                    <div class="hc-extra-text-box">
                                        <el-button type="success" size="small" :loading="submitLoading" @click="dialogSubmit">全部提交保存</el-button>
                                    </div>
                                </div>
                            </template>
                            1111
                        </el-collapse-item>
                        <el-collapse-item name="key2">
                            <template #title>
                                <div class="hc-collapse-item-header hc-flex">
                                    <div class="title text-orange">未进行匹配的元素字段</div>
                                    <div class="hc-extra-text-box">
                                        <el-button type="warning" size="small">新增元素</el-button>
                                    </div>
                                </div>
                            </template>
                            1111
                        </el-collapse-item>
                    </el-collapse>
                </div>
            </hc-card>
        </hc-page-split>
    </hc-drawer>
</template>

<script setup>
import { ref, watch } from 'vue'
import { getArrValue, getObjValue, isNullES } from 'js-fast-way'
import excelApi from '~api/exctab/exceltab'

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

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

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

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

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

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

//处理相关数据
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 || ''
}

//基础表单
const formRef = ref(null)
const formModel = ref({})
const formRules = {
    colName: { required: true, trigger: 'change', message: '请先获取元素坐标' },
    htmlType: { required: true, trigger: 'change', message: '请先寻找将元素替换为' },
}

//元素被点击
const excelClick = async (item) => {
    const { pkeyId } = getObjValue(dataInfo.value)
    if (isNullES(pkeyId)) {
        window?.$message.warning('表单值异常，请联系管理员')
        return
    }
    const data = await getDomAttribute(item)
    const arr = getArrValue(formDataArr.value)
    console.log(data)
    /*formModel.value = {
        tabId: pkeyId,
        colName: data.name || data.key,
        tdIndex: data.td,
        trIndex: data.tr,
        htmlType: '',
    }*/
}

//获取元素相关信息
const keys = [
    'type', 'key', 'tr', 'td', 'index', 'x1', 'y1', 'x2', 'y2', 'name', 'text', 'rows', 'format', 'tip',
    'weighing', 'label', 'value', 'src', 'val', 'contractid', 'pkeyid', 'objs', 'range', 'def', 'max',
]
const getDomAttribute = 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])
    }
    return obj
}

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

//临时保存
const formDataArr = ref([])
const savingClick = () => {

}

//折叠面板
const activeNames = ref(['key2'])

//保存数据
const submitLoading = ref(false)
const dialogSubmit = async () => {
    console.log(formModel.value)
}

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

<style lang="scss">
.el-overlay .el-drawer.hc-project-list-edit-element-drawer {
    background-color: #F1F5F8;
    .hc-table-form-data-item {
        padding: 0;
    }
    .hc-table-form-data-item .hc-excel-table-form {
        background: #e4e7eb;
    }
    .hc-edit-element-collapse {
        position: relative;
        border: 1px solid #ebeef5;
        border-top: 0;
        border-bottom: 0;
        .el-collapse {
            --el-collapse-header-bg-color: #f9f9f9;
        }
        .el-collapse .el-collapse-item {
            .el-collapse-item__header {
                padding-left: 10px;
            }
            .el-collapse-item__wrap {
                padding: 10px;
                border-top: 1px solid #ebeef5;
                .el-collapse-item__content {
                    padding-bottom: 0;
                }
            }
        }
        .el-collapse .el-collapse-item .hc-collapse-item-header {
            position: relative;
            flex: 1;
            .title {
                position: relative;
                flex: 1;
                text-align: left;
            }
            .hc-extra-text-box {
                position: relative;
                margin-right: 24px;
            }
        }
    }
}
</style>