From 8ad3508e18befe0130a6794fe4e166d315838ad5 Mon Sep 17 00:00:00 2001
From: zhanglipeng <chinazhanglipeng@qq.com>
Date: Tue, 31 Aug 2021 12:00:54 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=BB=E9=A2=98=E6=95=B4=E5=90=88=E5=A4=87?=
 =?UTF-8?q?=E8=AF=BE=20=E8=83=BD=E7=9B=B4=E6=8E=A5=E8=B7=B3=E8=BD=AC?=
 =?UTF-8?q?=E5=88=B0=E8=AF=BE=E6=9C=AC=E8=AF=A6=E6=83=85=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ruoyi-ui/src/router/index.js                  |  16 +
 .../views/benyi/themestudy_tremplan/index.vue | 326 ++++++++++++++++++
 .../src/views/benyi/themetermplan/index.vue   |   2 +
 .../src/views/benyi/themetermplan/table.vue   |  39 ++-
 4 files changed, 372 insertions(+), 11 deletions(-)
 create mode 100644 ruoyi-ui/src/views/benyi/themestudy_tremplan/index.vue

diff --git a/ruoyi-ui/src/router/index.js b/ruoyi-ui/src/router/index.js
index 7534b50ec..69b8277a3 100644
--- a/ruoyi-ui/src/router/index.js
+++ b/ruoyi-ui/src/router/index.js
@@ -297,6 +297,22 @@ export const constantRoutes = [
       }
     ]
   },
+  {
+    path: "/benyi_course/tremplan",
+    component: Layout,
+    hidden: true,
+    children: [
+      {
+        path: "themestudy/:id(\\d+)",
+        component: () => import("@/views/benyi/themestudy_tremplan"),
+        name: "Theme2",
+        meta: {
+          title: "主题整合学习",
+          icon: ""
+        }
+      }
+    ]
+  },
   {
     path: "/benyi_course/mathtermplan",
     component: Layout,
diff --git a/ruoyi-ui/src/views/benyi/themestudy_tremplan/index.vue b/ruoyi-ui/src/views/benyi/themestudy_tremplan/index.vue
new file mode 100644
index 000000000..c117898d2
--- /dev/null
+++ b/ruoyi-ui/src/views/benyi/themestudy_tremplan/index.vue
@@ -0,0 +1,326 @@
+<template>
+  <div class="app-container">
+    <el-row :gutter="20">
+      <el-col :span="4" :xs="24">
+        <div class="head-container">
+          <el-input
+            v-model="name"
+            placeholder="请输入名称"
+            clearable
+            size="small"
+            prefix-icon="el-icon-search"
+            style="margin-bottom: 20px"
+          />
+        </div>
+        <div class="head-container">
+          <el-tree
+            :data="treeOptions"
+            :props="defaultProps"
+            :expand-on-click-node="true"
+            :filter-node-method="filterNode"
+            ref="tree"
+            default-expand-all
+            @node-click="handleNodeClick"
+          />
+        </div>
+      </el-col>
+      <el-col :span="20" :xs="24">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span class="box-card-title">{{ title }}</span>
+          </div>
+          <div class="text item" v-show="title1">
+            <h3 class="box-card-title">{{ title1 }}</h3>
+            <div class="pad-left" v-html="note"></div>
+          </div>
+          <div class="text item" v-show="title2">
+            <h3 class="box-card-title">
+              {{ title2 }}
+            </h3>
+            <div ref="printMe">
+              <Editor v-model="communicate" />
+            </div>
+          </div>
+          <div class="text item" v-show="title3">
+            <h3 class="box-card-title">{{ title3 }}</h3>
+
+            <div class="pad-left">
+              <div
+                v-for="(item, index) in activityList"
+                :key="index"
+                class="text item"
+              >
+                <h3 class="box-card-case mr">
+                  活动{{ item.sort }} - {{ item.name }}
+                </h3>
+                <h3 class="box-card-info">活动形式：{{ fieldFormat(item) }}</h3>
+                <h3 class="box-card-info">重点领域：{{ typeFormat(item) }}</h3>
+                <h3 class="box-card-info">活动目标</h3>
+                <div class="text item pad-left" v-html="item.target"></div>
+                <h3 class="box-card-info">活动材料</h3>
+                <div class="text item pad-left" v-html="item.data"></div>
+                <h3 class="box-card-info">活动过程</h3>
+                <div class="text item pad-left" v-html="item.process"></div>
+                <h3 class="box-card-info">活动建议</h3>
+                <div class="text item pad-left" v-html="item.proposal"></div>
+                <h3 class="box-card-info">活动反思</h3>
+                <div class="text item pad-left" v-html="item.reflect"></div>
+                <h3 class="box-card-info" v-show="item.appendix">附录</h3>
+                <div class="text item pad-left" v-html="item.appendix"></div>
+              </div>
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { treeselect, getTheme } from "@/api/benyi/theme";
+import { listActivity, getActivity } from "@/api/benyi/activity";
+import Editor from "@/components/Editor";
+
+export default {
+  name: "Detail",
+  components: {
+    Editor,
+  },
+  data() {
+    return {
+      // 主题整合名称
+      name: undefined,
+      // 主题整合id
+      id: undefined,
+      //标题
+      title: "主题整合",
+      title1: "概论",
+      //家园沟通
+      title2: "",
+      //活动方案
+      title3: "",
+      // 主题整合活动表格数据
+      activityList: [],
+      //家园沟通
+      communicate: "",
+      //活动形式
+      typeOptions: [],
+      //活动领域
+      fieldOptions: [],
+      //目的
+      note:
+        "《幼儿园主题整合课程》，是在《幼儿园工作规程》（以下称《规程》）和《幼儿园教育指导纲要》（以下称《纲要》）中的基本教育理念指导之下，以《3-6岁儿童学习与发展指南》（以下称《指南》）精神为基本指导原则，所编写完成的幼儿园3-6岁活动课程。",
+      // 树状显示类型
+      treeOptions: [],
+      // 树结构
+      defaultProps: {
+        children: "children",
+        label: "label",
+      },
+      // 查询参数
+      queryParams: {
+        id: undefined,
+        themeid: undefined,
+      },
+    };
+  },
+  watch: {
+    // 根据名称筛选部门树
+    name(val) {
+      this.$refs.tree.filter(val);
+    },
+  },
+  created() {
+    const tremThemeId = this.$route.params && this.$route.params.id;
+    if (tremThemeId != null) {
+      this.handleNodeUrl(tremThemeId);
+    }
+    this.getTreeselect();
+    this.getDicts("sys_theme_type").then((response) => {
+      this.typeOptions = response.data;
+    });
+    this.getDicts("sys_theme_field").then((response) => {
+      this.fieldOptions = response.data;
+    });
+  },
+  methods: {
+    // 活动领域类型--字典状态字典翻译
+    fieldFormat(row) {
+      //alert(row.scope.split(';').length);
+      var ilength = row.field.split(";").length;
+      var names = "";
+      for (var i = 0; i < ilength; i++) {
+        names =
+          names +
+          this.selectDictLabel(this.fieldOptions, row.field.split(";")[i]) +
+          ";";
+      }
+      //this.selectDictLabel(this.scopeOptions, row.xnxq);
+      return names;
+    },
+    // 活动形式类型--字典状态字典翻译
+    typeFormat(row) {
+      //alert(row.scope.split(';').length);
+      var ilength = row.type.split(";").length;
+      var names = "";
+      for (var i = 0; i < ilength; i++) {
+        names =
+          names +
+          this.selectDictLabel(this.typeOptions, row.type.split(";")[i]) +
+          ";";
+      }
+      //this.selectDictLabel(this.scopeOptions, row.xnxq);
+      return names;
+    },
+    /** 查询部门下拉树结构 */
+    getTreeselect() {
+      treeselect().then((response) => {
+        this.treeOptions = response.data;
+      });
+    },
+    // 筛选节点
+    filterNode(value, data) {
+      if (!value) return true;
+      return data.label.indexOf(value) !== -1;
+    },
+    // 节点单击事件
+    handleNodeClick(data) {
+      this.id = data.id;
+      //console.log(data.id);
+      if (data.id >= 9999 && data.id < 99999) {
+      } else if (data.id >= 99999) {
+        //console.log("2jiedian");
+        this.id = this.id - 99999;
+        this.title = data.label;
+        this.getThemeDetails();
+      } else {
+        this.title = data.label;
+        this.getThemeDetail();
+        //console.log("最后节点");
+      }
+      // console.log(this.dayflowtaskList[date.id])
+      // this.getStandardList();
+    },
+    // 节点单击事件
+    handleNodeUrl(tid) {
+      this.id = tid;
+      //console.log(data.id);
+      if (tid >= 9999 && tid < 99999) {
+      } else if (tid >= 99999) {
+        //console.log("2jiedian");
+        this.id = this.id - 99999;
+        //this.title = data.label;
+        this.getThemeDetails();
+      } else {
+        //this.title = data.label;
+        this.getThemeDetail();
+        //console.log("最后节点");
+      }
+      // console.log(this.dayflowtaskList[date.id])
+      // this.getStandardList();
+    },
+    getThemeDetails() {
+      getTheme(this.id).then((response) => {
+        //console.log(response);
+        if (response.code == "200") {
+          this.title1 = "主题网络";
+          this.title2 = "家园沟通";
+          this.title3 = "活动方案";
+          this.note = response.data.content;
+          this.communicate = response.data.communicate;
+          this.queryParams.themeid = response.data.id;
+          this.queryParams.id = "";
+          //console.log(this.queryParams);
+          listActivity(this.queryParams).then((req) => {
+            //console.log(req);
+            if (req.code == "200") {
+              this.activityList = req.rows;
+            }
+          });
+        }
+      });
+    },
+    getThemeDetail() {
+      this.title1 = "";
+      this.title2 = "";
+      this.title3 = "活动方案";
+      this.queryParams.id = this.id;
+      this.queryParams.themeid = "";
+      //console.log(this.id);
+      listActivity(this.queryParams).then((req) => {
+        //console.log(req);
+        if (req.code == "200") {
+          this.activityList = req.rows;
+        }
+      });
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.text {
+  font-size: 14px;
+}
+
+.item {
+  margin-bottom: 18px;
+  line-height: 22px;
+}
+
+.clearfix:before,
+.clearfix:after {
+  display: table;
+  content: "";
+}
+.clearfix:after {
+  clear: both;
+}
+.box-card-title {
+  display: flex;
+  align-items: center;
+  font-size: 16px;
+  &::before {
+    content: "";
+    margin-right: 8px;
+    width: 4px;
+    height: 16px;
+    background: #1890ff;
+  }
+  &.mr {
+    margin: 10px 0;
+  }
+}
+.box-card-case {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  &::before {
+    content: "";
+    margin-right: 8px;
+    width: 4px;
+    height: 14px;
+    background: #2c3e50;
+  }
+  &.mr {
+    margin: 10px 0;
+  }
+}
+.box-card-info {
+  font-size: 14px;
+  font-weight: 700;
+}
+.pad-left {
+  padding-left: 15px;
+}
+// 禁止复制
+div {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+</style>
\ No newline at end of file
diff --git a/ruoyi-ui/src/views/benyi/themetermplan/index.vue b/ruoyi-ui/src/views/benyi/themetermplan/index.vue
index 90fd0a560..c7b7697f0 100644
--- a/ruoyi-ui/src/views/benyi/themetermplan/index.vue
+++ b/ruoyi-ui/src/views/benyi/themetermplan/index.vue
@@ -428,6 +428,8 @@ export default {
     handleAdd() {
       this.reset();
       this.open = true;
+      //console.log(this.xnxqOptions);
+      this.form.xnxq = this.xnxqOptions[0].dictValue;
       this.title = "添加主题整合学期计划";
     },
     /** 修改按钮操作 */
diff --git a/ruoyi-ui/src/views/benyi/themetermplan/table.vue b/ruoyi-ui/src/views/benyi/themetermplan/table.vue
index 8057bd925..ab14c81d1 100644
--- a/ruoyi-ui/src/views/benyi/themetermplan/table.vue
+++ b/ruoyi-ui/src/views/benyi/themetermplan/table.vue
@@ -1,9 +1,15 @@
 <template>
   <div class="table-container" ref="printMe">
-    <h2 class="title">{{title}}</h2>
+    <h2 class="title">{{ title }}</h2>
     <div class="table">
       <div class="print no-print">
-        <el-button type="primary" plain size="mini" icon="el-icon-printer" @click="prints"></el-button>
+        <el-button
+          type="primary"
+          plain
+          size="mini"
+          icon="el-icon-printer"
+          @click="prints"
+        ></el-button>
       </div>
       <table>
         <tr class="align-center">
@@ -13,32 +19,36 @@
           </td>-->
           <td class="w140">
             <b class="table-title">班级：</b>
-            {{classname}}
+            {{ classname }}
           </td>
           <td>
             <b class="table-title">学期：</b>
-            {{xnxqFormat(xnxq)}}
+            {{ xnxqFormat(xnxq) }}
           </td>
           <td class="w200">
             <b class="table-title">制定人：</b>
-            {{tbr}}
+            {{ tbr }}
           </td>
         </tr>
         <tr class="align-center table-bg">
           <td v-for="h in bodyData.title" :key="h.prop">
-            <b>{{h.label}}</b>
+            <b>{{ h.label }}</b>
           </td>
         </tr>
         <tr v-for="item in bodyData.termplanitemList" :key="item.id">
           <td class="align-center">
-            <span>{{item.month}}</span>
+            <span>{{ item.month }}</span>
           </td>
-          <td class="align-center">{{themeFormat(item.themeconent)}}</td>
-          <td>{{item.remark}}</td>
+          <td class="align-center" v-html="themeFormat(item.themeconent)"></td>
+          <td>{{ item.remark }}</td>
+        </tr>
+        <tr>
+          <td class="align-center">备注</td>
+          <td colspan="2">{{ remark }}</td>
         </tr>
         <tr>
           <td class="align-center">教学主管审批</td>
-          <td colspan="2">{{spyj}}</td>
+          <td colspan="2">{{ spyj }}</td>
         </tr>
       </table>
       <!-- <p
@@ -68,6 +78,7 @@ export default {
       xnxq: "",
       classname: "",
       tbr: "",
+      remark: "",
       spyj: "",
       bodyData: {
         title: [
@@ -112,9 +123,14 @@ export default {
         var ilength = themeids.split(";").length - 1;
         var names = "";
         for (var i = 1; i < ilength; i++) {
+          var themeId = themeids.split(";")[i];
           names =
             names +
-            this.selectMoeDictLabel(this.themeOptions, themeids.split(";")[i]) +
+            "<a target='_bank' href='/benyi_course/tremplan/themestudy/" +
+            (Number(99999) + Number(themeId)) +
+            "'>" +
+            this.selectMoeDictLabel(this.themeOptions, themeId) +
+            "</a>" +
             " ";
         }
         //this.selectDictLabel(this.scopeOptions, row.xnxq);
@@ -138,6 +154,7 @@ export default {
         this.classname = response.classname;
         this.xnxq = response.data.xnxq;
         this.spyj = response.data.shyj;
+        this.remark = response.data.remark;
       });
       this.getThemeTermItemPlan();
     },