更新预案结构化文档

src/api/riskPrevention/planManage.ts

@@ -193,4 +193,13 @@ export const deleteUnit = (data) => {
     method: 'delete',
     data: data
   });
-};
+};
+
+// 获取结构化文档
+export const getDoc = (data) => {
+  return request({
+    url: '/api/emergency_plan/doc/detail',
+    method: 'post',
+    data: data
+  });
+};

src/views/riskPrevention/planManage/DocRecord.vue

@@ -0,0 +1,135 @@
+<template>
+    <el-card shadow="hover">
+        <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="getContainerRef(item.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, index) in item.items" :key="index"/>
+                            </el-anchor>
+                        </el-col>
+                        <el-col :span="20">
+                            <div :ref="(el) => { creatRef(el, item.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, index) in item.items" :key="index">
+                                    <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>
+</template>
+
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import type { TabsPaneContext } from 'element-plus';
+import { getDoc } from '@/api/riskPrevention/planManage';
+
+const containerRef = ref<HTMLElement | null>(null);
+const containerRefs = ref([]);
+const doc_items = ref([]);
+
+const creatRef = (el, index) => {
+  if (el) {
+    containerRefs.value[index] = el;
+  }
+};
+
+const getContainerRef = (index) => {
+    return containerRefs.value[index];
+}
+
+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;
+        }
+    })
+}
+</script>
+
+
+<style lang="scss" scoped>
+.demo-tabs > .el-tabs__content {
+  padding: 32px;
+  color: #6b778c;
+  font-size: 32px;
+  font-weight: 600;
+}
+</style>

src/views/riskPrevention/planManage/planList.vue

@@ -44,59 +44,11 @@
       </el-col>
       <!-- 预案内容 -->
       <el-col :lg="30" :xs="24" style="">
-        <h3>预案内容</h3>
-        <el-card shadow="hover">
-          <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="组织体系" name="second">组织体系</el-tab-pane>
-            <el-tab-pane label="运行机制" name="third">运行机制</el-tab-pane>
-            <el-tab-pane label="应急保障" name="fourth">应急保障</el-tab-pane>
-            <el-tab-pane label="监督管理" name="fifth">监督管理</el-tab-pane>
-            <el-tab-pane label="附则" name="sixth">附则</el-tab-pane>
-            <el-tab-pane label="附件" name="seventh">附件</el-tab-pane>
-          </el-tabs>
-        </el-card>
+        <div class="ya_bar">
+          <h3>预案内容</h3>
+          <el-button type="primary" @click="importDoc()"> 导入预案 </el-button>
+        </div>
+        <DocRecord :id="planId" />
       </el-col>
       <el-col :lg="30" :xs="24">
         <h3>单位职责</h3>
@@ -154,13 +106,13 @@
 
 <script setup name="planList" lang="ts">
 import { to } from 'await-to-js';
-import type { TabsPaneContext } from 'element-plus';
 import { download2 } from '@/utils/request';
 import { deletePlan, getPlanDetail, updateReport } from '@/api/riskPrevention/planManage';
 import TrainingRecord from './TrainingRecord.vue';
 import DrillRecord from './DrillRecord.vue';
 import ResponseRecord from './ResponseRecord.vue';
 import UnitRecord from './UnitRecord.vue';
+import DocRecord from './DocRecord.vue'
 
 const router = useRouter();
 
@@ -168,16 +120,6 @@ const goBack = () => {
   proxy?.$tab.closePage();
 };
 
-const containerRef = ref<HTMLElement | null>(null);
-
-const handleClick1 = (e: MouseEvent) => {
-  e.preventDefault();
-};
-
-const activeName = ref('first');
-const handleClick2 = (tab: TabsPaneContext, event: Event) => {
-  console.log(tab, event);
-};
 
 /***培训记录编辑界面时间选择 */
 const route = useRoute();
@@ -271,6 +213,10 @@ const handleDownload = (file: any) => {
   download2(baseUrl + '/api/file/download/' + file.url, file.name);
 };
 
+const importDoc = () => {
+
+}
+
 onMounted(() => {
   planId.value = route.query.planId;
   getPlanDetail(planId.value).then((res) => {
@@ -280,10 +226,11 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
-.demo-tabs > .el-tabs__content {
-  padding: 32px;
-  color: #6b778c;
-  font-size: 32px;
-  font-weight: 600;
+.ya_bar {
+  display:flex;
+  flex-direction: row; 
+  flex-wrap: nowrap;
+  justify-content:space-between;
+  align-items: center;
 }
-</style>
+</style>