20200623-zlp-1

一日流程学习

ruoyi-ui/src/views/benyi/dayflowlook/index.vue

@@ -1,437 +0,0 @@
-<template>
-  <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
-      <el-form-item label="活动类型" prop="type">
-        <el-select v-model="queryParams.type" placeholder="请选择活动类型" clearable size="small">
-          <el-option
-            v-for="dict in schoolcalendartypeOptions"
-            :key="dict.dictValue"
-            :label="dict.dictLabel"
-            :value="dict.dictValue"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="适用范围" prop="scope">
-        <el-select v-model="queryParams.scope" placeholder="请选择适用范围" clearable size="small">
-          <el-option
-            v-for="dict in scopeOptions"
-            :key="dict.dictValue"
-            :label="dict.dictLabel"
-            :value="dict.dictValue"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="学年学期" prop="xnxq">
-        <el-select v-model="queryParams.xnxq" placeholder="请选择学年学期" clearable size="small">
-          <el-option
-            v-for="dict in xnxqOptions"
-            :key="dict.dictValue"
-            :label="dict.dictLabel"
-            :value="dict.dictValue"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="活动时间" prop="activitytime">
-        <el-date-picker
-          v-model="dateRange"
-          size="small"
-          style="width: 240px"
-          value-format="yyyy-MM-dd"
-          type="daterange"
-          range-separator="-"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
-        ></el-date-picker>
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-      </el-form-item>
-    </el-form>
-
-    <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
-        <el-button
-          type="primary"
-          icon="el-icon-plus"
-          size="mini"
-          @click="handleAdd"
-          v-hasPermi="['benyi:schoolcalendar:add']"
-        >新增</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="success"
-          icon="el-icon-edit"
-          size="mini"
-          :disabled="single"
-          @click="handleUpdate"
-          v-hasPermi="['benyi:schoolcalendar:edit']"
-        >修改</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="danger"
-          icon="el-icon-delete"
-          size="mini"
-          :disabled="multiple"
-          @click="handleDelete"
-          v-hasPermi="['benyi:schoolcalendar:remove']"
-        >删除</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="warning"
-          icon="el-icon-download"
-          size="mini"
-          @click="handleExport"
-          v-hasPermi="['benyi:schoolcalendar:export']"
-        >导出</el-button>
-      </el-col>
-    </el-row>
-
-    <el-table
-      v-loading="loading"
-      :data="schoolcalendarList"
-      @selection-change="handleSelectionChange"
-    >
-      <el-table-column type="selection" width="55" align="center" :selectable="checkSelectable" />
-      <el-table-column label="编号" align="center" prop="id" />
-      <el-table-column label="名称" align="center" prop="name" />
-      <el-table-column
-        label="活动类型"
-        align="center"
-        :formatter="schoolcalendartypeFormat"
-        prop="type"
-      />
-      <el-table-column label="适用范围" align="center" :formatter="scopeFormat" prop="scope" />
-      <el-table-column label="学年学期" align="center" :formatter="xnxqFormat" prop="xnxq" />
-      <el-table-column label="活动时间" align="center" prop="activitytime" width="180" />
-      <el-table-column label="创建时间" align="center" prop="createtime" width="180">
-        <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.createtime) }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-        <template slot-scope="scope">
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-edit"
-            @click="handleUpdate(scope.row)"
-            v-hasPermi="['benyi:schoolcalendar:edit']"
-            :disabled="!checkSelectable(scope.row)"
-          >修改</el-button>
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
-            v-hasPermi="['benyi:schoolcalendar:remove']"
-            :disabled="!checkSelectable(scope.row)"
-          >删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-
-    <pagination
-      v-show="total>0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    />
-
-    <!-- 添加或修改园历管理对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px">
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="名称" prop="name">
-          <el-input v-model="form.name" type="textarea" placeholder="请输入内容" />
-        </el-form-item>
-        <el-form-item label="活动类型" prop="type">
-          <el-select v-model="form.type" placeholder="请选择活动类型" clearable size="small">
-            <el-option
-              v-for="dict in schoolcalendartypeOptions"
-              :key="dict.dictValue"
-              :label="dict.dictLabel"
-              :value="dict.dictValue"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="适用范围" prop="scope">
-          <el-select v-model="form.scope" multiple placeholder="请选择适用范围" clearable size="small">
-            <el-option
-              v-for="dict in scopeOptions"
-              :key="dict.dictValue"
-              :label="dict.dictLabel"
-              :value="dict.dictValue"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="活动时间" prop="activitytime">
-          <el-date-picker
-            clearable
-            size="small"
-            style="width: 200px"
-            v-model="form.activitytime"
-            type="date"
-            value-format="yyyy-MM-dd"
-            placeholder="选择活动时间"
-          ></el-date-picker>
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
-      </div>
-    </el-dialog>
-  </div>
-</template>
-
-<script>
-import {
-  listSchoolcalendar,
-  getSchoolcalendar,
-  delSchoolcalendar,
-  addSchoolcalendar,
-  updateSchoolcalendar,
-  exportSchoolcalendar
-} from "@/api/benyi/schoolcalendar";
-
-export default {
-  name: "Schoolcalendar",
-  data() {
-    return {
-      // 遮罩层
-      loading: true,
-      // 选中数组
-      ids: [],
-      // 非单个禁用
-      single: true,
-      // 非多个禁用
-      multiple: true,
-      // 总条数
-      total: 0,
-      // 园历管理表格数据
-      schoolcalendarList: [],
-      // 弹出层标题
-      title: "",
-      // 日期范围
-      dateRange: [],
-      // 是否显示弹出层
-      open: false,
-      //园历类型
-      schoolcalendartypeOptions: [],
-      //园历适用范围
-      scopeOptions: [],
-      //学年学期
-      xnxqOptions: [],
-      //声明方法
-      selectable: Function,
-      // 查询参数
-      queryParams: {
-        pageNum: 1,
-        pageSize: 10,
-        name: undefined,
-        type: undefined,
-        scope: undefined,
-        xnxq: undefined,
-        deptid: undefined,
-        activitytime: undefined,
-        createuserid: undefined,
-        createtime: undefined
-      },
-      // 表单参数
-      form: {},
-      // 表单校验
-      rules: {
-        name: [{ required: true, message: "名称不能为空", trigger: "blur" }],
-        type: [
-          { required: true, message: "活动类型不能为空", trigger: "blur" }
-        ],
-        scope: [
-          { required: true, message: "活动范围不能为空", trigger: "blur" }
-        ],
-        activitytime: [
-          { required: true, message: "活动时间不能为空", trigger: "blur" }
-        ]
-      }
-    };
-  },
-  created() {
-    this.getList();
-    this.getDicts("sys_schoolcalendartype").then(response => {
-      this.schoolcalendartypeOptions = response.data;
-    });
-    this.getDicts("sys_yebjlx").then(response => {
-      this.scopeOptions = response.data;
-    });
-    this.getDicts("sys_xnxq").then(response => {
-      this.xnxqOptions = response.data;
-    });
-  },
-  methods: {
-    // 学校园历类型--字典状态字典翻译
-    schoolcalendartypeFormat(row, column) {
-      return this.selectDictLabel(this.schoolcalendartypeOptions, row.type);
-    },
-    //控制按钮可用
-    checkSelectable(row) {
-      var date = new Date();
-      //console.log(date.toLocaleDateString());
-      return this.CompareDate(row.activitytime,date.toLocaleDateString());
-    },
-    //比较日期大小
-    CompareDate(d1, d2) {
-      return new Date(d1.replace(/-/g, "/")) > new Date(d2.replace(/-/g, "/"));
-    },
-    // 适用范围类型--字典状态字典翻译
-    scopeFormat(row, column) {
-      //alert(row.scope.split(';').length);
-      var ilength = row.scope.split(";").length;
-      var names = "";
-      for (var i = 0; i < ilength; i++) {
-        names =
-          names +
-          this.selectDictLabel(this.scopeOptions, row.scope.split(";")[i]) +
-          ";";
-      }
-      //this.selectDictLabel(this.scopeOptions, row.xnxq);
-      return names;
-    },
-    // 学年学期类型--字典状态字典翻译
-    xnxqFormat(row, column) {
-      return this.selectDictLabel(this.xnxqOptions, row.xnxq);
-    },
-    /** 查询园历管理列表 */
-    getList() {
-      this.loading = true;
-      listSchoolcalendar(
-        this.addDateRange(this.queryParams, this.dateRange)
-      ).then(response => {
-        this.schoolcalendarList = response.rows;
-        this.total = response.total;
-        this.loading = false;
-      });
-    },
-    // 取消按钮
-    cancel() {
-      this.open = false;
-      this.reset();
-    },
-    // 表单重置
-    reset() {
-      this.form = {
-        id: undefined,
-        name: undefined,
-        type: undefined,
-        scope: undefined,
-        activitytime: undefined
-      };
-      this.resetForm("form");
-    },
-    /** 搜索按钮操作 */
-    handleQuery() {
-      this.queryParams.pageNum = 1;
-      this.getList();
-    },
-    /** 重置按钮操作 */
-    resetQuery() {
-      this.dateRange = [];
-      this.resetForm("queryForm");
-      this.handleQuery();
-    },
-    // 多选框选中数据
-    handleSelectionChange(selection) {
-      this.ids = selection.map(item => item.id);
-      this.single = selection.length != 1;
-      this.multiple = !selection.length;
-    },
-    /** 新增按钮操作 */
-    handleAdd() {
-      this.reset();
-      this.open = true;
-      this.title = "添加园历管理";
-    },
-    /** 修改按钮操作 */
-    handleUpdate(row) {
-      this.reset();
-      const id = row.id || this.ids;
-      getSchoolcalendar(id).then(response => {
-        this.form = response.data;
-        this.scopeOptions = response.scopes;
-        this.form.scope = response.scopeIds;
-        this.open = true;
-        this.title = "修改园历管理";
-      });
-    },
-    /** 提交按钮 */
-    submitForm: function() {
-      this.$refs["form"].validate(valid => {
-        if (valid) {
-          var arrscope = this.form.scope;
-          this.form.scope = arrscope.join(";");
-          if (this.form.id != undefined) {
-            updateSchoolcalendar(this.form).then(response => {
-              if (response.code === 200) {
-                this.msgSuccess("修改成功");
-                this.open = false;
-                this.getList();
-              } else {
-                this.msgError(response.msg);
-              }
-            });
-          } else {
-            addSchoolcalendar(this.form).then(response => {
-              if (response.code === 200) {
-                this.msgSuccess("新增成功");
-                this.open = false;
-                this.getList();
-              } else {
-                this.msgError(response.msg);
-              }
-            });
-          }
-        }
-      });
-    },
-    /** 删除按钮操作 */
-    handleDelete(row) {
-      const ids = row.id || this.ids;
-      this.$confirm(
-        '是否确认删除园历管理编号为"' + ids + '"的数据项?',
-        "警告",
-        {
-          confirmButtonText: "确定",
-          cancelButtonText: "取消",
-          type: "warning"
-        }
-      )
-        .then(function() {
-          return delSchoolcalendar(ids);
-        })
-        .then(() => {
-          this.getList();
-          this.msgSuccess("删除成功");
-        })
-        .catch(function() {});
-    },
-    /** 导出按钮操作 */
-    handleExport() {
-      const queryParams = this.queryParams;
-      this.$confirm("是否确认导出所有园历管理数据项?", "警告", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning"
-      })
-        .then(function() {
-          return exportSchoolcalendar(queryParams);
-        })
-        .then(response => {
-          this.download(response.msg);
-        })
-        .catch(function() {});
-    }
-  }
-};
-</script>

ruoyi-ui/src/views/benyi/dayflowstudy/index.vue

@@ -27,36 +27,35 @@
       <el-col :span="20" :xs="24">
         <el-card class="box-card">
           <div slot="header" class="clearfix">
-            <span>{{title}}</span>
+            <span class="box-card-title">{{title}}</span>
           </div>
           <div class="text item">
-            导言
-            <br />
-            <label v-html="content"></label>
+            <h3 class="box-card-title">导言</h3>
+            <div class="pad-left" v-html="content"></div>
           </div>
           <div class="text item">
-            目的
-            <br />
-            <label v-html="note"></label>
+            <h3 class="box-card-title">目的</h3>
+            <div class="pad-left" v-html="note"></div>
           </div>
           <div v-for="(item, index) in dayflowtaskList" :key="index" class="text item">
-            {{item.taskLable}}
-            <br />
-            {{item.taskContent}}
+            <h3 class="box-card-title mr">{{item.taskLable}}</h3>
+            <p class="pad-left">{{item.taskContent}}</p>
+            <div class="pad-left">
               <div
                 v-for="(item_standard, index_standard) in (dayflowstandardList.filter(p=>p.taskCode==item.code))"
                 :key="index_standard"
                 class="text item"
               >
-              {{item_standard.standardTitle}}
-              <br />解读
+                <h3 class="box-card-case mr">{{item_standard.standardTitle}}</h3>
+                <h3 class="box-card-info">解读：</h3>
                 <div
                   v-for="(item_unscramble, index_unscramble) in (dayflowunscrambleList.filter(p=>p.standardId==item_standard.id))"
                   :key="index_unscramble"
-                class="text item"
+                  class="text item pad-left"
                 >{{item_unscramble.sort}}){{item_unscramble.content}}</div>
               </div>
             </div>
+          </div>
         </el-card>
       </el-col>
     </el-row>
@@ -80,9 +79,9 @@ export default {
       //标题
       title: "一日流程",
       //导言
-      content: undefined,
+      content: "寓教育于生活。以游戏为基本活动。没有爱就没有教育。教师素质决定教育品质。一童一世界，尊重差异，关注个性化发展。孩子喜欢的老师就是好老师，孩子喜欢的幼儿园就是好幼儿园。",
       //目的
-      note: undefined,
+      note: "《幼儿园（3-6）标准化一日流程》（下称《一日流程》）的基本目的，就是要将国家教育纲领性文件中所主张的幼儿园教育理念完全落地。也就是能够让这些理念在幼儿园保教人员指尖上操作和实现。其纲领性文件包括《幼儿园工作规程》（简称《规程》），《幼儿园教育指导纲要》（简称《纲要》），《3-6岁儿童学习与发展指南》（简称《指南》）。这三部纲领中的教育理念不仅仅是确定《一日流程》全部内容的基本依据，而且也自始至终地指导了《一日流程》内容在一线进行实验的整个过程。因此，在其实质上，《一日流程》本身就是将国家三大教育理念——“寓教于生活”、“以游戏为基本活动”以及“以儿童为本”所支撑的教育过程进行分解和物化。",
       // 根据一日流程id查到的名下任务列表
       dayflowtaskList: [],
       // 根据任务查询到名下标准
@@ -135,8 +134,11 @@ export default {
     // 节点单击事件
     handleNodeClick(data) {
       this.queryParams.detailId = data.id;
+      if (data.id >= 9999) {
+      } else {
         this.title = data.label;
         this.getTaskList();
+      }
       // console.log(this.dayflowtaskList[date.id])
       // this.getStandardList();
     },
@@ -153,13 +155,14 @@ export default {
   }
 };
 </script>
-<style>
+<style lang="scss" scoped>
 .text {
   font-size: 14px;
 }
 
 .item {
   margin-bottom: 18px;
+  line-height: 22px;
 }
 
 .clearfix:before,
@@ -170,4 +173,43 @@ export default {
 .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;
+}
 </style>