yjhtgl-web/src/views/riskPrevention/planManage/DocRecord.vue

<template>
    <div class="ya_bar">
        <h3>预案内容</h3>
        <div>
            <el-button type="primary" @click="importDoc()"> 导入预案 </el-button>
            <el-button type="info" plain icon="Download" @click="handleTemplate">下载导入模板</el-button>
        </div>
    </div>
    
    <el-card shadow="hover" v-show="doc_items.length > 0">
        <el-tabs v-model="activeName" type="border-card" class="demo-tabs" @tab-click="handleClick2">
            <!--
            <el-tab-pane label="总则" name="first">
                <div>
                <el-row>
                    <el-col :span="4">
                        <el-anchor :container="containerRef" direction="vertical" type="default" :offset="30" @click="handleClick1">
                            <el-anchor-link href="#part1" title="编制目的" />
                            <el-anchor-link href="#part2" title="编制依据" />
                            <el-anchor-link href="#part3" title="适用范围" />
                            <el-anchor-link href="#part4" title="工作原则" />
                        </el-anchor>
                    </el-col>
                    <el-col :span="20">
                    <div ref="containerRef" style="height: 300px; overflow-y: auto">
                        <div id="part1" style="height: auto; margin-top: 20px; font-size: 14px">
                        <h3 style="font-weight: 600">1.1 编制目的</h3>
                        <span style="text-indent: 2em"
                            >这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容</span
                        >
                        </div>
                        <div id="part2" style="height: auto; margin-top: 15px; font-size: 14px">
                        <h3 style="font-weight: 600">1.2 编制依据</h3>
                        <span style="text-indent: 28px"
                            >这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容</span
                        >
                        </div>
                        <div id="part3" style="height: auto; margin-top: 15px; font-size: 14px">
                        <h3 style="font-weight: 600">1.3 适用范围</h3>
                        <span style="text-indent: 28px"
                            >这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容</span
                        >
                        </div>
                        <div id="part4" style="height: auto; margin-top: 15px; font-size: 14px">
                        <h3 style="font-weight: 600">1.4 工作原则</h3>
                        <span style="text-indent: 28px"
                            >这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容</span
                        >
                        </div>
                    </div>
                    </el-col>
                </el-row>
                </div>
            </el-tab-pane>
            -->
            <el-tab-pane :label="item.title" :name="item.id" v-for="(item, index) in doc_items" :key="index">
                <div>
                    <el-row>
                        <el-col :span="4">
                            <el-anchor container="`containerRef${index}`" direction="vertical" type="default" :offset="30" @click="handleClick1">
                                <el-anchor-link :href="sub_item.href" :title="sub_item.title"  :name="sub_item.id" v-for="(sub_item, index2) in item.items" :key="index2"/>
                            </el-anchor>
                        </el-col>
                        <el-col :span="20">
                            <div ref="`containerRef${index}`" style="height: 400px; overflow-y: auto">
                                <div :id="sub_item.id" style="height: auto; margin-top: 15px; font-size: 14px" v-for="(sub_item, index3) in item.items" :key="index3">
                                    <h3 style="font-weight: 600">{{ sub_item.title }}</h3>
                                    <span v-html="sub_item.value"></span>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </el-tab-pane>
        </el-tabs>
    </el-card>

    <el-dialog ref="formDialogRef" v-model="showImportDlg"  title="导入结构化文档" width="500px" append-to-body>
        <el-form ref="formRef" :model="form" :rules="rules">
            <FileUpload v-model="form.filename" :file-type="['xls', 'xlsx']" :limit="1" />
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </template>
    </el-dialog>
</template>


<script setup lang="ts">
import { ref } from 'vue';
import type { TabsPaneContext } from 'element-plus';
import { getDoc, importDocXls } from '@/api/riskPrevention/planManage';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;

// const containerRef = ref<HTMLElement | null>(null);
const doc_items = ref([]);
const props = defineProps({
  id: String
});

watch(
  () => props.id,
  () => {
    if (props.id) {
      getData();
    }
  },
  {
    immediate: true
  }
);

const handleClick1 = (e: MouseEvent) => {
  e.preventDefault();
};

const activeName = ref('first');
const handleClick2 = (tab: TabsPaneContext, event: Event) => {
  // console.log(tab, event);
};

const getData = () => {
    getDoc({plan_id: props.id})
    .then((res)=> {
        doc_items.value = res.data;
        if(doc_items.value.length > 0) {
            activeName.value = doc_items.value[0].id;
        }
    })
}

const baseUrl = import.meta.env.VITE_APP_BASE_API;
const downLoadApi = import.meta.env.VITE_APP_BASE_DOWNLOAD_API;

const showImportDlg = ref(false);
const formDialogRef = ref(null);
const formRef = ref<ElFormInstance>();
const buttonLoading = ref(false);

const form = ref({
    filename: ''
});

const rules = reactive({
    filename: [{ required: true, message: '导入文件不能为空', trigger: 'blur' }]
});

const importDoc = () => {
    resetForm();
    showImportDlg.value = true;
}

const resetForm = () => {
    form.value = {
        filename:''
    }
    formRef.value?.resetFields();
    formRef.value?.clearValidate();
}

/**提交按钮 */
const submitForm = () => {
    formRef.value?.validate(async (valid) => {
        if (valid) {
            try {
                buttonLoading.value = true;
                await importDocXls({ ...form.value, plan_id: props.id })
                proxy?.$modal.msgSuccess('导入成功');
                showImportDlg.value = false;
                getData();
            } finally {
                buttonLoading.value = false;
            }
        }
    })
}


/** 取消按钮 */
const cancel = () => {
  resetForm();
  showImportDlg.value = false;
};

const handleTemplate = async() => {
  location.href=baseUrl + downLoadApi + "yjya_doc_import.xlsx";
};
</script>


<style lang="scss" scoped>
.ya_bar {
  display:flex;
  flex-direction: row; 
  flex-wrap: nowrap;
  justify-content:space-between;
  align-items: center;
}

.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
</style>