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 v-show="doc_items.length > 0" shadow="hover">
    <el-tabs v-model="activeName" type="border-card" class="demo-tabs" @tab-click="handleClick2">
      <el-tab-pane v-for="(item, index) in doc_items" :key="index" :label="item.title" :name="item.id">
        <div>
          <el-row>
            <el-col :span="4">
              <el-anchor :container="'#content' + index" direction="vertical" type="default" :offset="1" @click="handleClick1">
                <el-anchor-link
                  v-for="(sub_item, index2) in item.items"
                  :key="index2"
                  :href="sub_item.href"
                  :title="sub_item.title"
                  :name="sub_item.id"
                />
              </el-anchor>
            </el-col>
            <el-col :span="20">
              <div :id="'content' + index" style="height: 400px; overflow-y: auto">
                <div v-for="(sub_item, index3) in item.items" :id="sub_item.id" :key="index3" style="height: auto; margin-top: 15px; font-size: 14px">
                  <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>