Browse Source

创建词句卡片from表单效果,处理字模式笔顺展开不展开数据结构。

qinpeng 2 years ago
parent
commit
fd2130eaf1

BIN
src/assets/teacherdev/word-download.png


BIN
src/assets/teacherdev/word-eyes.png


BIN
src/assets/teacherdev/word-save.png


+ 6 - 0
src/router/index.js

@@ -124,6 +124,12 @@ const routes = [{
     import('@/views/wordcard/table')
 },
 {
+
+  path: '/wordcard/cread',
+  component: () =>
+    import('@/views/wordcard/cread')
+},
+{
   path: '*',
   redirect: '/404',
 

+ 598 - 0
src/views/wordcard/cread.vue

@@ -0,0 +1,598 @@
+<template>
+  <div class="cread" v-loading="loading">
+    <Header />
+    <div class="main">
+      <div class="from">
+        <div class="type">
+          <div :class="[typeIndex == 0 ? 'sele' : '']" @click="cutType(0)">
+            字模式
+          </div>
+          <div :class="[typeIndex == 1 ? 'sele' : '']" @click="cutType(1)">
+            句模式
+          </div>
+        </div>
+        <div class="from_main">
+          <div class="left">
+            <el-input
+              type="textarea"
+              :placeholder="
+                typeIndex == 0 ? '每行输出一个字' : '每行输入一个句子/词汇'
+              "
+              v-model="from.content"
+              maxlength="100"
+              show-word-limit
+            >
+            </el-input>
+            <div class="submit">
+              <span @click="creadEvent">生成</span>
+            </div>
+          </div>
+          <div class="right">
+            <div class="title">基础配置:</div>
+            <div class="dv">
+              <el-radio-group v-model="from.BoxbgType">
+                <el-radio :label="0">田字格</el-radio>
+                <el-radio :label="1">米字格</el-radio>
+                <el-radio :label="2">空格</el-radio>
+              </el-radio-group>
+              <span class="title">文字大小</span>
+              <el-select
+                v-model="from.fontSize"
+                placeholder=""
+                style="width: 60px"
+              >
+                <el-option label="大" value="big"> </el-option>
+                <el-option label="中" value="center"> </el-option>
+                <el-option label="小" value="little"> </el-option>
+              </el-select>
+            </div>
+            <div class="dv">
+              <span class="title">边框颜色</span>
+              <el-color-picker
+                v-model="from.borderColor"
+                style="margin-right: 16px"
+              ></el-color-picker>
+              <span class="title">文字颜色</span>
+              <el-color-picker v-model="from.fontColor"></el-color-picker>
+            </div>
+            <div class="title" style="margin-top: 24px">功能配置:</div>
+            <div class="dv">
+              <el-switch
+                active-color="#424242"
+                v-model="from.playStorkes"
+                active-text="笔顺动画"
+                style="margin-right: 40px"
+              >
+              </el-switch>
+              <template v-if="typeIndex == 0">
+                <el-switch
+                  active-color="#424242"
+                  v-model="from.StorkesUnfold"
+                  active-text="笔顺展开"
+                >
+                </el-switch>
+              </template>
+            </div>
+            <div class="title" style="margin-top: 24px">书写配置:</div>
+            <div class="dv">
+              <div style="margin-right: 16px">
+                <span class="title">书写格</span>
+                <el-input
+                  style="width: 60px"
+                  v-model="from.writeBoxNumber"
+                ></el-input>
+                <span style="margin-left: 8px">行</span>
+              </div>
+              <div style="margin-right: 16px">
+                <span class="title">描红</span>
+                <el-input
+                  style="width: 60px"
+                  v-model="from.miaoRedBoxNumber"
+                ></el-input>
+                <span style="margin-left: 8px">格</span>
+              </div>
+              <div>
+                <span class="title">文末空行</span>
+                <el-input
+                  style="width: 60px"
+                  v-model="from.lastNullrow"
+                ></el-input>
+                <span style="margin-left: 8px">行</span>
+              </div>
+            </div>
+            <div class="dv">
+              <span class="title">描红底色</span>
+              <el-color-picker
+                v-model="from.miaoRedBgcolor"
+                style="margin-right: 16px"
+              ></el-color-picker>
+              <span class="title">书写颜色</span>
+              <el-color-picker v-model="from.writeColor"></el-color-picker>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="operation">
+        <div>
+          <img src="../../assets/teacherdev/word-save.png" alt="" /> 保存
+        </div>
+        <div>
+          <img src="../../assets/teacherdev/word-eyes.png" alt="" /> 预览
+        </div>
+        <div>
+          <img src="../../assets/teacherdev/word-download.png" alt="" /> 下载
+        </div>
+      </div>
+      <div class="word_main"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+//这里可以导入其它文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
+//例如:import 《组件名称》from ‘《组件路径》';
+import Header from "@/components/Header";
+import { getLogin } from "@/api/api";
+
+export default {
+  //import引入的组件需要注入到对象中才能使用
+  components: {
+    Header,
+  },
+  props: {},
+  data() {
+    //这里存放数据
+    return {
+      typeIndex: 0,
+      from: {
+        content: "",
+        BoxbgType: 0,
+        fontSize: "big",
+        playStorkes: true,
+        StorkesUnfold: true,
+        writeBoxNumber: "", //书写行
+        miaoRedBoxNumber: "", //描红格
+        lastNullrow: "", //文本末空行数
+        miaoRedBgcolor: "#E1E1E1", //描红底色
+        writeColor: "#000000", //书写颜色
+        borderColor: "#D65353", //边框颜色
+        fontColor: "#000000", //文字颜色
+      },
+      loading: false,
+    };
+  },
+  //计算属性 类似于data概念
+  computed: {},
+  //监控data中数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    // 切换类型
+    cutType(index) {
+      this.typeIndex = index;
+    },
+    // 生成
+    creadEvent() {
+      if (this.from.content == "") {
+        this.$message.warning("请先输入内容");
+        return;
+      }
+      // 大 一行8个    中 一行10个  小 一行12个
+      let data = {
+        option: [],
+        typeIndex: this.typeIndex,
+        playStorkes: this.from.playStorkes,
+        StorkesUnfold: this.from.StorkesUnfold,
+        BoxbgType: this.from.BoxbgType,
+        miaoRedBgcolor: this.from.miaoRedBgcolor,
+        writeColor: this.from.writeColor,
+        borderColor: this.from.borderColor,
+        fontColor: this.from.fontColor,
+        writeBoxNumber: this.from.writeBoxNumber,
+        miaoRedBoxNumber: this.from.miaoRedBoxNumber,
+        lastNullrow: this.from.lastNullrow,
+      };
+      if (this.from.fontSize == "big") {
+        data.width = "62px";
+        data.fontSize = "48px";
+        data.rowNumber = 8;
+      } else if (this.from.fontSize == "center") {
+        data.width = "49px";
+        data.fontSize = "38px";
+        data.rowNumber = 10;
+      } else {
+        data.width = "41px";
+        data.fontSize = "31px";
+        data.rowNumber = 12;
+      }
+      let contentArr = this.from.content.split("\n");
+      for (let i = 0; i < contentArr.length; i++) {
+        let obj = {
+          con: contentArr[i],
+        };
+        data.option.push(obj);
+      }
+      //   字模式 笔顺打开
+      if (data.typeIndex == 0 && data.StorkesUnfold) {
+        this.loading = true;
+        let MethodName = "hz_resource_manager-GetHZStrokesContent";
+        data.option.forEach((item, i) => {
+          let obj = {
+            hz: item.con,
+          };
+          item.hzDetail = {
+            hz_json: null,
+          };
+          getLogin(MethodName, obj)
+            .then((res) => {
+              this.$set(item.hzDetail, "hz_json", res);
+              this.$forceUpdate();
+              if (i == data.option.length - 1) {
+                this.loading = false;
+              }
+            })
+            .catch(() => {
+              this.loading = false;
+            });
+        });
+      }
+
+      if (data.typeIndex == 0) {
+        if (data.StorkesUnfold) {
+          let allArr = [];
+          let timer = setInterval(() => {
+            if (!this.loading) {
+              data.option.forEach((item) => {
+                let arr = [];
+                // 拆分字和笔画为每一项
+                arr.push({
+                  con: item.con,
+                });
+                item.hzDetail.hz_json.medians.forEach((items, indexs) => {
+                  arr.push({
+                    answer: indexs + 1,
+                    hzDetail: JSON.parse(JSON.stringify(item.hzDetail.hz_json)),
+                  });
+                });
+                // 如果不满一行则补满
+                let newarr = [];
+                if (arr.length % data.rowNumber != 0) {
+                  let num = data.rowNumber - (arr.length % data.rowNumber);
+                  for (let i = 0; i < num; i++) {
+                    arr.push({});
+                  }
+                  if (arr.length > data.rowNumber) {
+                    newarr = this.arrSplice(arr, data.rowNumber);
+                    newarr.forEach((itemss) => {
+                      allArr.push(itemss);
+                    });
+                  } else {
+                    allArr.push(arr);
+                  }
+                } else {
+                  allArr.push(arr);
+                }
+                // 添加书写行
+                if (data.writeBoxNumber) {
+                  for (let i = 0; i < data.writeBoxNumber; i++) {
+                    let numrow = [];
+                    for (let k = 0; k < data.rowNumber; k++) {
+                      numrow.push({});
+                    }
+                    // 描红格
+                    if (i == 0 && data.miaoRedBoxNumber) {
+                      for (let j = 0; j < data.miaoRedBoxNumber; j++) {
+                        numrow[j] = {
+                          con: item.con,
+                          miaoRed: true,
+                        };
+                      }
+                    }
+                    allArr.push(numrow);
+                  }
+                }
+              });
+              if (data.lastNullrow) {
+                for (let i = 0; i < data.lastNullrow; i++) {
+                  let numrow = [];
+                  for (let k = 0; k < data.rowNumber; k++) {
+                    numrow.push({});
+                  }
+                  allArr.push(numrow);
+                }
+              }
+              console.log(allArr);
+              clearInterval(timer);
+              timer = null;
+            }
+          }, 100);
+        } else {
+          let allArr = [];
+          data.option.forEach((item) => {
+            let arr = [];
+            // 拆分字和笔画为每一项
+            arr.push({
+              con: item.con,
+            });
+            // 如果不满一行则补满
+            let newarr = [];
+            if (arr.length % data.rowNumber != 0) {
+              let num = data.rowNumber - (arr.length % data.rowNumber);
+              for (let i = 0; i < num; i++) {
+                arr.push({});
+              }
+              if (arr.length > data.rowNumber) {
+                newarr = this.arrSplice(arr, data.rowNumber);
+                newarr.forEach((itemss) => {
+                  allArr.push(itemss);
+                });
+              } else {
+                allArr.push(arr);
+              }
+            } else {
+              allArr.push(arr);
+            }
+            // 添加书写行
+            if (data.writeBoxNumber) {
+              for (let i = 0; i < data.writeBoxNumber; i++) {
+                let numrow = [];
+                for (let k = 0; k < data.rowNumber; k++) {
+                  numrow.push({});
+                }
+                // 描红格
+                if (i == 0 && data.miaoRedBoxNumber) {
+                  for (let j = 0; j < data.miaoRedBoxNumber; j++) {
+                    numrow[j] = {
+                      con: item.con,
+                      miaoRed: true,
+                    };
+                  }
+                }
+                allArr.push(numrow);
+              }
+            }
+          });
+          if (data.lastNullrow) {
+            for (let i = 0; i < data.lastNullrow; i++) {
+              let numrow = [];
+              for (let k = 0; k < data.rowNumber; k++) {
+                numrow.push({});
+              }
+              allArr.push(numrow);
+            }
+          }
+          console.log(allArr);
+        }
+      } else {
+      }
+    },
+    arrSplice(arr, chunkSize) {
+      //定义一个空数组来接收返回值
+      const resSplice = [];
+      while (arr.length > 0) {
+        //注意:splice方法的返回值为删除的值,在这边即为原数组中切割掉的index为0-chunkSize的值
+        const chunk = arr.splice(0, chunkSize);
+        //将返回值添加到resSplice数组
+        resSplice.push(chunk);
+      }
+      //return出去
+      return resSplice;
+    },
+  },
+  //生命周期 - 创建完成(可以访问当前this实例)
+  created() {},
+  //生命周期 - 挂载完成(可以访问DOM元素)
+  mounted() {},
+  //生命周期-创建之前
+  beforeCreated() {},
+  //生命周期-挂载之前
+  beforeMount() {},
+  //生命周期-更新之前
+  beforUpdate() {},
+  //生命周期-更新之后
+  updated() {},
+  //生命周期-销毁之前
+  beforeDestory() {},
+  //生命周期-销毁完成
+  destoryed() {},
+  //如果页面有keep-alive缓存功能,这个函数会触发
+  activated() {},
+};
+</script>
+<style lang="scss" scoped>
+/* @import url(); 引入css类 */
+.cread {
+  height: 100%;
+  .main {
+    min-height: 100%;
+    background: #f7f7f7;
+    padding-top: 24px;
+    .from {
+      width: 1200px;
+      margin: 0 auto;
+      background: #ffffff;
+      border-radius: 8px;
+      padding: 16px 24px 24px 18px;
+      .type {
+        display: flex;
+        width: 108px;
+        height: 28px;
+        background: #eeeeee;
+        border-radius: 4px;
+        padding: 2px;
+        > div {
+          width: 52px;
+          font-weight: 400;
+          font-size: 12px;
+          line-height: 28px;
+          text-align: center;
+          color: #888888;
+          cursor: pointer;
+        }
+        .sele {
+          font-weight: 500;
+          line-height: 28px;
+          font-size: 12px;
+          text-align: center;
+          color: #000000;
+          background: #ffffff;
+          box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.08);
+          border-radius: 2px;
+        }
+      }
+      .from_main {
+        margin-top: 12px;
+        display: flex;
+        .left {
+          width: 668px;
+          .submit {
+            display: flex;
+            justify-content: flex-end;
+            span {
+              margin-top: 16px;
+              display: inline-block;
+              width: 80px;
+              height: 40px;
+              background: #669aff;
+              border-radius: 4px;
+              font-weight: 500;
+              font-size: 16px;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              color: #ffffff;
+              cursor: pointer;
+            }
+          }
+        }
+        .right {
+          flex: 1;
+          margin-left: 24px;
+          > .title {
+            font-weight: 400;
+            font-size: 14px;
+            line-height: 20px;
+            color: #000000;
+          }
+          .dv {
+            margin-top: 8px;
+            width: 466px;
+            height: 48px;
+            background: #f0f0f0;
+            border-radius: 8px;
+            display: flex;
+            align-items: center;
+            padding: 0 16px;
+            .title {
+              margin-right: 8px;
+            }
+            > span {
+              font-weight: 400;
+              font-size: 14px;
+              line-height: 20px;
+            }
+          }
+        }
+      }
+    }
+    .operation {
+      width: 1200px;
+      height: 72px;
+      margin: 24px auto;
+      background: #ffffff;
+      border-radius: 8px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      div {
+        width: 96px;
+        height: 40px;
+        background: #ffffff;
+        border: 1px solid rgba(0, 0, 0, 0.08);
+        border-radius: 4px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+        margin-right: 16px;
+        img {
+          width: 24px;
+          height: 24px;
+          margin-right: 8px;
+        }
+      }
+    }
+  }
+}
+</style>
+<style lang="scss">
+.cread {
+  .from_main {
+    // input
+    .el-textarea__inner {
+      height: 388px;
+    }
+    // 单选
+    .el-radio {
+      margin-right: 46px;
+    }
+    .el-radio__inner {
+      border: 1px solid #000000;
+    }
+    .el-radio__inner:hover {
+      border: 1px solid #000000;
+    }
+    .el-radio__input.is-checked .el-radio__inner {
+      background-color: #fff;
+    }
+    .el-radio__inner::after {
+      background-color: #000000;
+      width: 6px;
+      height: 6px;
+    }
+    .el-radio,
+    .el-radio__input.is-checked + .el-radio__label {
+      color: #000000;
+    }
+    // 选择颜色
+    .el-color-picker__trigger {
+      background: #fff;
+    }
+    .el-color-picker__trigger {
+      height: 32px;
+      width: 60px;
+    }
+    .el-color-picker__empty,
+    .el-color-picker__icon {
+      left: 134%;
+    }
+    .el-color-picker__icon {
+      color: gray;
+      left: 77%;
+    }
+    .el-color-picker__color {
+      border: none;
+      width: 28px;
+    }
+    .el-color-picker__color-inner {
+      border-radius: 2px;
+    }
+    // 开关
+    .el-switch__core {
+      width: 26px !important;
+      height: 16px;
+    }
+    .el-switch__core:after {
+      width: 8px;
+      height: 8px;
+      top: 2px;
+    }
+    .el-switch.is-checked .el-switch__core::after {
+      margin-left: -10px;
+    }
+    .el-switch__label.is-active {
+      color: #000000;
+    }
+  }
+}
+</style>

+ 7 - 1
src/views/wordcard/table.vue

@@ -6,7 +6,7 @@
         <div class="title">词句卡片</div>
         <div class="number_cread">
           <span class="left">词汇数量:123</span>
-          <div class="right">开始创建</div>
+          <div class="right" @click="Startcread">开始创建</div>
         </div>
         <div class="table">
           <div v-for="(item, i) in data" :key="i + 'one'">
@@ -69,6 +69,12 @@ export default {
   watch: {},
   //方法集合
   methods: {
+    // 创建
+    Startcread() {
+      this.$router.push({
+        path: "/wordcard/cread",
+      });
+    },
     deleteOne() {},
     handleCurrentChange(val) {
       this.page = val;