feat: 战术研判-增加创建报告

src/views/backOfficeSystem/JudgmentHome/tacticalResearch/addForm.vue

@@ -176,6 +176,8 @@ function updateDis(row) {
   const isFinish = row.wcqk === '02'
   return isShiQingBaoZhongXin.value || !iscjr || isFinish
 }
+
+/** 获取附件数组 */
 function getFjArr(fj) {
   if (typeof fj !== 'string' || !fj) return []
   let fjArr = []
@@ -231,7 +233,6 @@ const init = (type, row, wjlb) => {
 // 根据id查询详情
 const getDataById = (id) => {
   sjzlGetInfo(id).then((res) => {
-    console.log('res: ', res);
     listQuery.value = res || {};
     /** @type {Array<JudgmentDept>} 参与研判部门数据数组 */
     const cyypList = Array.isArray(res.cyypList) ? res.cyypList : []
@@ -252,9 +253,7 @@ function getFjString(arr) {
 const getXfbmList = () => {
   /** @type {Array<JudgmentDept>} 参与研判部门数据数组 */
   const cyypList = Array.isArray(listQuery.value.cyypList) ? listQuery.value.cyypList : []
-
   return tableList.value.map((item, i) => {
-
     /** @type {JudgmentDept} 找原来的对象   */
     const curr = cyypList.find(item => item.ypbmdm == item.ypbmdm) || {}
     return {
@@ -278,13 +277,6 @@ const submit = () => {
     let params = {
       ...listQuery.value,
       cyypList: xfbmList,
-      // cyypList: listQuery.value.jsdxBmDm.map((item, index) => {
-      //   return {
-      //     ypbmdm: item,
-      //     ypbmmc: listQuery.value.jsdxBmMc[index],
-      //     ypcylx: '01'
-      //   }
-      // })
     };
     try {
       loading.value = true;
@@ -384,7 +376,7 @@ const submitMaterialAction = async () => {
     closeMaterialDialog()
     if (outRow.value.id) { getDataById(outRow.value.id) }
   } catch (error) {
-    console.log(error)
+
   } finally {
     materialLoading.value = false
   }
@@ -410,7 +402,7 @@ const sendNotice = () => {
       proxy.$message({ type: "success", message: "下发通知成功" });
       close();
     } catch (error) {
-      console.log(error);
+
     } finally {
       noticeLoading.value = false;
     }
@@ -431,7 +423,7 @@ const confirmJudgment = () => {
       proxy.$message({ type: "success", message: "确认研判成功" });
       close();
     } catch (error) {
-      console.log(error);
+
     } finally {
       confirmLoading.value = false;
     }

src/views/backOfficeSystem/JudgmentHome/tacticalResearch/addReport.vue

@@ -0,0 +1,254 @@
+<template>
+  <div class="dialog" v-if="dialogForm">
+    <div class="head_box">
+      <span class="title">经验分享{{ title }} </span>
+      <div>
+        <el-button type="primary" size="small" :loading="loading" @click="submit">保存</el-button>
+        <el-button size="small" @click="close">关闭</el-button>
+      </div>
+    </div>
+    <div class="form_cnt">
+      <FormMessage :formList="formData" v-model="listQuery" ref="elform" :rules="rules">
+        <template #ypnr>
+          <el-input v-model="listQuery.ypnr" style="width: 100%" placeholder="请输入关键字" class="input-with-select">
+            <template #append>
+              <el-button :icon="Search" type="primary">搜索</el-button>
+            </template>
+          </el-input>
+        </template>
+        <template #fj><el-button type="primary" @click="showText = true">附件上传</el-button></template>
+      </FormMessage>
+      <div class="cntBox">
+        <!-- 工具栏 -->
+        <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig"
+          :mode="mode" />
+        <!-- 编辑器 -->
+        <Editor :style="`height: 480px; overflow-y: hidden`" v-model="textContent" :defaultConfig="editorConfig"
+          :mode="mode" @onCreated="handleCreated" @onChange="handChange" />
+
+      </div>
+      <div style="display: flex; justify-content: center;">
+        <!-- <el-button style="display: block;" type="primary" @click="ConsultationShow = true">网上会商</el-button> -->
+        <el-button style="display: block;" type="primary" @click="downloadWithStyles(textContent)">下载</el-button>
+      </div>
+    </div>
+  </div>
+  <!-- 文字解析 -->
+  <ExtractionText v-model="showText" @change="getText"></ExtractionText>
+  <!-- 网上会商 -->
+  <!-- <Consultation v-model="ConsultationShow" /> -->
+</template>
+
+<script setup>
+import { Search } from '@element-plus/icons-vue'
+import { timeValidate } from '@/utils/tools.js'
+import ExtractionText from "@/components/ExtractionText/index.vue";
+import FormMessage from "@/components/aboutTable/FormMessage.vue";
+import { qcckGet, qcckPost, qcckPut } from "@/api/qcckApi.js";
+import "@wangeditor/editor/dist/css/style.css";
+// import Consultation from './consultation.vue'
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { ref, defineExpose, reactive, defineEmits, getCurrentInstance, shallowRef, onBeforeUnmount, watch } from "vue";
+import { gsxtYpbgAddEntity } from "@/api/huiShangyp/tacticalApi.js"
+
+const emit = defineEmits(["updateDate"]);
+const props = defineProps({
+  dic: Object,
+});
+
+
+const ConsultationShow = ref(false)
+const showText = ref(false);
+const textContent = ref()
+const { proxy } = getCurrentInstance();
+const editorRef = shallowRef();
+const dialogForm = ref(false); //弹窗
+const mode = "default";
+const dataBt = ref(`<p class="html_bt">
+    <h4 style=\"text-align: center;\"><span style=\"color: rgb(225, 60, 57); font-size: 32px; font-family: 标楷体;\">林芝市公安局情指中心</span></h4>
+    <h4 style=\"text-align: center;\"><span style=\"color: rgb(225, 60, 57); font-size: 32px; font-family: 标楷体;\">研判专刊（初稿）</span></h4></p>
+      <p style="text-align: center;"><span style="color: rgb(225, 60, 57); font-size: 22px; font-family: 标楷体;">市公安局情指中心编</span></p>
+      <p style="text-align: center;"><span style="color: rgb(225, 60, 57); font-size: 22px; font-family: 标楷体;"> ${timeValidate(new Date(), 'td')}</span></p>
+      <hr/>`)
+//编辑器配置
+const editorConfig = {
+  withCredentials: true, //允许跨域
+  placeholder: props.placeholder, //提示语
+  MENU_CONF: {
+    uploadImage: {
+      // 自定义上传图片
+      async customUpload(file, insertFn) {
+        let fileBlob = await compressImage(file);
+        let fileData = new File([fileBlob], fileBlob.name, { type: fileBlob.type });
+        if (fileData.size > 2 * 1024 * 1024) {
+          ElMessage({ message: "图片超过2MB", type: "success" });
+        } else {
+          await uploadFn(fileData, insertFn);
+        }
+      }
+    },
+    uploadVideo: {
+      // 自定义上传视频
+      async customUpload(file, insertFn) {
+        await uploadFn(file, insertFn);
+      }
+    }
+  }
+};
+
+//工具配置
+const toolbarConfig = {
+  excludeKeys: ["blockquote", "codeBlock"] //清除不必要的工具，引用和代码块
+};
+const rules = reactive({
+  jymc: [
+    { required: true, message: "请输入经验名称", trigger: "blur" }
+  ],
+  fbnr: [
+    { required: true, message: "请输入经验内容", trigger: "blur" }
+  ]
+});
+const formData = ref([
+  { label: "研判标题", prop: "ypbt", type: "input", width: "100%" },
+  { label: "研判内容", prop: "ypnr", type: "slot", width: "100%" },
+  { label: "附件内容", prop: "fj", type: "slot", width: "100%" },
+]);
+const listQuery = ref({
+  ypbt: "",
+  ypnr: "",
+  fj: ""
+}); //表单
+const loading = ref(false);
+const elform = ref();
+const title = ref("");
+const outRow = ref({})
+
+
+// 初始化数据
+const init = (type, row) => {
+  dialogForm.value = true;
+  title.value = type == "add" ? "新增" : "编辑";
+};
+const getText = (val, row = {}) => {
+  outRow.value = { ...row }
+  listQuery.value.fj = val.text;
+
+}
+watch(() => listQuery.value, (val) => {
+  let html = dataBt.value;
+  html += `<p style="text-align: center;"><span style="font-size: 22px;">${val.ypbt || ''}</span></p>`
+  html += `<p>${val.fj || ''}</p>`
+  textContent.value = html
+},
+  {
+    deep: true, immediate: true
+  })
+// 提交
+const submit = () => {
+  elform.value.submit((data) => {
+    // let url = title.value == "新增" ? "/mosty-gsxt/gsxt/jyfx/add" : "/mosty-gsxt/gsxt/jyfx/edit";
+    let params = {
+      ...data,
+      ypid: outRow.value.id,
+      ypmc: outRow.value.ypyt
+    };
+    gsxtYpbgAddEntity(params).then(() => {
+      loading.value = false;
+      proxy.$message({ type: "success", message: title.value + "成功" });
+      emit("ok");
+      close();
+    }).catch(() => {
+      loading.value = false;
+    })
+  });
+};
+//编辑器创建成功
+const handleCreated = (editor) => {
+  editorRef.value = editor;
+};
+//内容发生变化
+const handChange = (editor) => {
+  // 判断是否是一个空段落，是空就传空文本
+  console.log(editor.getHtml(), 'editor.getHtml()');
+
+};
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor) editor.destroy();
+});
+
+
+// 关闭
+const close = () => {
+  listQuery.value = {};
+  loading.value = false;
+  dialogForm.value = false;
+  listQuery.value = {}
+};
+
+
+// 带样式的下载方法
+const downloadWithStyles = (textContent) => {
+
+  const wordDocument = `
+    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" >
+    <head>
+      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+      <title>富文本导出</title>
+      <style>
+        /* 应用两端对齐样式 */
+        body {
+          text-align: justify;
+          text-justify: inter-character; /* 中文文本两端对齐 */
+          font-family: "Microsoft YaHei", Arial, sans-serif;
+        }
+        p {
+          text-align: justify;
+          text-justify: inter-character;
+        }
+      </style>
+    </head>
+    <body>
+      ${textContent}
+    </body>
+    </html>
+  `;
+
+  const blob = new Blob([wordDocument], {
+    type: 'application/msword'
+  });
+
+  saveAs(blob, '战略研判报告.doc');
+};
+
+defineExpose({ init });
+</script>
+
+<style lang="scss" scoped>
+@import "~@/assets/css/layout.scss";
+@import "~@/assets/css/element-plus.scss";
+
+.boxlist {
+  width: 99%;
+  margin-top: 10px;
+}
+
+::v-deep .el-textarea__inner {
+  min-height: 550px !important;
+}
+
+.html_bt>>>p {
+  color: red;
+}
+
+.html_bt {
+  h4 {
+    margin: 10px 0 !important;
+  }
+}
+
+.cntBox {
+  width: 80vw;
+  margin: 0 auto;
+}
+</style>

src/views/backOfficeSystem/JudgmentHome/tacticalResearch/index.vue

@@ -29,6 +29,7 @@
         <template #controls="{ row }">
           <!-- <el-link size="small" type="primary" @click="getDataById('edit', row)">修改</el-link> -->
           <el-link size="small" type="primary" @click="getDataById('detail', row)">详情</el-link>
+          <el-link size="small" type="primary" @click="createReport(row)">创建报告</el-link>
           <el-link size="small" type="danger" @click="deleteFile(row)">删除</el-link>
         </template>
       </MyTable>
@@ -39,6 +40,9 @@
     </div>
   </div>
   <AddForm ref="addForm" :bglx="bglx" @getList="getList" :dict="{ D_BZ_YPFS, D_BZ_YPLX }" />
+
+  <!-- 创建报告 -->
+  <addReport ref="reportTc" :row="currRow" :dic="{ D_GS_BQ_LX }" @ok="getList" />
 </template>
 
 <script setup>
@@ -49,10 +53,13 @@ import Search from "@/components/aboutTable/Search.vue";
 import { useRoute, useRouter } from 'vue-router'
 import { tacticalGet, strategicDelete } from "@/api/huiShangyp/tacticalApi.js";
 import { reactive, ref, onMounted, getCurrentInstance, watch, computed, nextTick } from "vue";
+import addReport from "./addReport.vue";
 import AddForm from "./addForm.vue";
 const { proxy } = getCurrentInstance();
-const { D_BZ_YPFS, D_BZ_YPLX } = proxy.$dict("D_BZ_YPFS", "D_BZ_YPLX")
-const detailDiloag = ref();
+const { D_BZ_YPFS, D_BZ_YPLX, D_GS_BQ_LX } = proxy.$dict("D_BZ_YPFS", "D_BZ_YPLX", "D_GS_BQ_LX")
+
+/** 报告弹框 */
+const reportTc = ref();
 const searchBox = ref(); //搜索框
 const router = useRouter();
 const route = useRoute();
@@ -103,6 +110,9 @@ const pageData = reactive({
     { label: "发起部门", prop: "ssbm" },
   ]
 });
+
+const isShowReport = ref(false)
+const currRow = ref({})
 const queryFrom = ref({});
 /** 报告类型 01 战术研判 02 战略研判*/
 const bglx = ref('01')
@@ -174,6 +184,11 @@ const selfCreateResearch = (type='add') => {
   addForm.value.init(type, null, '01');
 }
 
+const createReport = (row) => {
+  reportTc.value.init('add',row)
+  // currRow.value = { ...row }
+  // isShowReport.value = true
+}
 
 </script>