词汇卡片解决 生成之后笔顺未展示bug

src/views/wordcard/cread.vue

@@ -539,7 +539,7 @@ export default {
           };
           getLogin(MethodName, obj)
             .then((res) => {
-              this.$set(item.hzDetail, "hz_json", res);
+              this.$set(data.option[i].hzDetail, "hz_json", res);
               this.$forceUpdate();
               if (i == data.option.length - 1) {
                 this.loading = false;
@@ -550,42 +550,149 @@ export default {
             });
         });
       }
-
-      if (data.typeIndex == 0) {
-        if (data.StorkesUnfold) {
-          let allArr = [];
-          let timer = setInterval(() => {
-            if (!this.loading) {
+      // 定时 接口请求结束再执行
+      let hzTimer = setInterval(() => {
+        if (!this.loading) {
+          clearInterval(hzTimer);
+          hzTimer = null;
+          if (data.typeIndex == 0) {
+            if (data.StorkesUnfold) {
+              let allArr = [];
+              let timer = setInterval(() => {
+                if (!this.loading) {
+                  data.option.forEach((item) => {
+                    let arr = [];
+                    let hzLength = 1;
+                    let arrOption = [];
+                    // 拆分字和笔画为每一项
+                    arr.push({
+                      con: item.con,
+                    });
+                    if (
+                      item.hzDetail &&
+                      item.hzDetail.hz_json &&
+                      item.hzDetail.hz_json.medians
+                    ) {
+                      hzLength += item.hzDetail.hz_json.medians.length;
+                      item.hzDetail.hz_json.medians.forEach((items, indexs) => {
+                        arr.push({
+                          con: item.con,
+                          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({
+                            con: item.con,
+                            write: true,
+                          });
+                        }
+                        // 描红格
+                        if (i == 0 && data.miaoRedBoxNumber) {
+                          let m =
+                            Math.ceil(data.miaoRedBoxNumber / data.rowNumber) >
+                            data.writeBoxNumber
+                              ? data.writeBoxNumber
+                              : Math.ceil(
+                                  data.miaoRedBoxNumber / data.rowNumber
+                                );
+                          for (let j = 0; j < m; j++) {
+                            let miaoArr = [];
+                            for (let l = 0; l < data.rowNumber; l++) {
+                              if (
+                                j * data.rowNumber + l <
+                                data.miaoRedBoxNumber
+                              ) {
+                                miaoArr[l] = {
+                                  con: item.con,
+                                  miaoRed: true,
+                                  write: true,
+                                };
+                              } else {
+                                miaoArr[l] = {
+                                  con: item.con,
+                                  write: true,
+                                };
+                              }
+                            }
+                            arrOption.push(JSON.parse(JSON.stringify(miaoArr)));
+                          }
+                        }
+                        arrOption.push(numrow);
+                        arrOption = arrOption.slice(0, data.writeBoxNumber);
+                      }
+                      arrOption.forEach((itemA) => {
+                        allArr.push(itemA);
+                      });
+                    }
+                  });
+                  if (data.lastNullrow) {
+                    for (let i = 0; i < data.lastNullrow; i++) {
+                      let numrow = [];
+                      for (let k = 0; k < data.rowNumber; k++) {
+                        numrow.push({
+                          write: true,
+                        });
+                      }
+                      allArr.push(numrow);
+                    }
+                  }
+                  data.result = this.arrSplice(allArr, data.pageNumber);
+                  this.writeTableData = data;
+                  clearInterval(timer);
+                  timer = null;
+                }
+              }, 100);
+            } else {
+              let allArr = [];
               data.option.forEach((item) => {
                 let arr = [];
-                let hzLength = 1;
                 let arrOption = [];
                 // 拆分字和笔画为每一项
                 arr.push({
                   con: item.con,
                 });
-                if (
-                  item.hzDetail &&
-                  item.hzDetail.hz_json &&
-                  item.hzDetail.hz_json.medians
-                ) {
-                  hzLength += item.hzDetail.hz_json.medians.length;
-                  item.hzDetail.hz_json.medians.forEach((items, indexs) => {
-                    arr.push({
-                      con: item.con,
-                      answer: indexs + 1,
-                      hzDetail: JSON.parse(
-                        JSON.stringify(item.hzDetail.hz_json)
-                      ),
-                    });
-                  });
-                }
                 // 如果不满一行则补满
                 let newarr = [];
+                let areadyMiao = 0;
                 if (arr.length % data.rowNumber != 0) {
                   let num = data.rowNumber - (arr.length % data.rowNumber);
                   for (let i = 0; i < num; i++) {
-                    arr.push({});
+                    if (data.miaoRedBoxNumber && i < data.miaoRedBoxNumber) {
+                      arr.push({
+                        con: item.con,
+                        miaoRed: true,
+                        write: true,
+                      });
+                      areadyMiao++;
+                    } else {
+                      arr.push({});
+                    }
                   }
                   if (arr.length > data.rowNumber) {
                     newarr = this.arrSplice(arr, data.rowNumber);
@@ -611,14 +718,21 @@ export default {
                     // 描红格
                     if (i == 0 && data.miaoRedBoxNumber) {
                       let m =
-                        Math.ceil(data.miaoRedBoxNumber / data.rowNumber) >
-                        data.writeBoxNumber
+                        Math.ceil(
+                          (data.miaoRedBoxNumber - areadyMiao) / data.rowNumber
+                        ) > data.writeBoxNumber
                           ? data.writeBoxNumber
-                          : Math.ceil(data.miaoRedBoxNumber / data.rowNumber);
+                          : Math.ceil(
+                              (data.miaoRedBoxNumber - areadyMiao) /
+                                data.rowNumber
+                            );
                       for (let j = 0; j < m; j++) {
                         let miaoArr = [];
                         for (let l = 0; l < data.rowNumber; l++) {
-                          if (j * data.rowNumber + l < data.miaoRedBoxNumber) {
+                          if (
+                            j * data.rowNumber + l <
+                            data.miaoRedBoxNumber - areadyMiao
+                          ) {
                             miaoArr[l] = {
                               con: item.con,
                               miaoRed: true,
@@ -650,206 +764,111 @@ export default {
                       write: true,
                     });
                   }
-                  allArr.push(numrow);
+                  allArr.push(JSON.parse(JSON.stringify(numrow)));
                 }
               }
               data.result = this.arrSplice(allArr, data.pageNumber);
               this.writeTableData = data;
-              clearInterval(timer);
-              timer = null;
             }
-          }, 100);
-        } else {
-          let allArr = [];
-          data.option.forEach((item) => {
-            let arr = [];
-            let arrOption = [];
-            // 拆分字和笔画为每一项
-            arr.push({
-              con: item.con,
-            });
-            // 如果不满一行则补满
-            let newarr = [];
-            let areadyMiao = 0;
-            if (arr.length % data.rowNumber != 0) {
-              let num = data.rowNumber - (arr.length % data.rowNumber);
-              for (let i = 0; i < num; i++) {
-                if (data.miaoRedBoxNumber && i < data.miaoRedBoxNumber) {
-                  arr.push({
-                    con: item.con,
-                    miaoRed: true,
-                    write: true,
-                  });
-                  areadyMiao++;
-                } else {
-                  arr.push({});
+          } else {
+            // 处理句模式数据
+            let allArr = [];
+            data.option.forEach((item) => {
+              let sentenceArr = []; // 每一句的内容
+              let sentence = Math.ceil(item.length / data.rowNumber);
+              for (let k = 0; k < sentence; k++) {
+                let sentenceItem = [];
+                for (let s = 0; s < data.rowNumber; s++) {
+                  if (k * data.rowNumber + s < item.length) {
+                    sentenceItem.push({
+                      con: item[k * data.rowNumber + s],
+                    });
+                  } else {
+                    sentenceItem.push({});
+                  }
                 }
+                allArr.push(JSON.parse(JSON.stringify(sentenceItem)));
               }
-              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({
-                    con: item.con,
-                    write: true,
-                  });
-                }
-                // 描红格
-                if (i == 0 && data.miaoRedBoxNumber) {
-                  let m =
-                    Math.ceil(
-                      (data.miaoRedBoxNumber - areadyMiao) / data.rowNumber
-                    ) > data.writeBoxNumber
-                      ? data.writeBoxNumber
-                      : Math.ceil(
-                          (data.miaoRedBoxNumber - areadyMiao) / data.rowNumber
-                        );
-                  for (let j = 0; j < m; j++) {
-                    let miaoArr = [];
-                    for (let l = 0; l < data.rowNumber; l++) {
-                      if (
-                        j * data.rowNumber + l <
-                        data.miaoRedBoxNumber - areadyMiao
-                      ) {
-                        miaoArr[l] = {
-                          con: item.con,
-                          miaoRed: true,
-                          write: true,
-                        };
-                      } else {
-                        miaoArr[l] = {
-                          con: item.con,
-                          write: true,
-                        };
-                      }
+              if (data.miaoRedBoxNumber > 0 && data.writeBoxNumber > 0) {
+                let sentenceMiao = [];
+                for (let k = 0; k < sentence; k++) {
+                  let sentenceItemMiao = [];
+                  this.loading = true;
+                  for (let s = 0; s < data.rowNumber; s++) {
+                    if (k * data.rowNumber + s < item.length) {
+                      sentenceItemMiao[s] = {
+                        con: item[k * data.rowNumber + s],
+                        miaoRed: true,
+                      };
+                      let MethodName =
+                        "hz_resource_manager-GetHZStrokesContent";
+                      getLogin(MethodName, { hz: item[k * data.rowNumber + s] })
+                        .then((res) => {
+                          this.$set(sentenceItemMiao[s], "hzDetail", {
+                            hz_json: res,
+                          });
+                        })
+                        .catch(() => {
+                          this.loading = false;
+                        });
+                    } else {
+                      sentenceItemMiao[s] = {};
                     }
-                    arrOption.push(JSON.parse(JSON.stringify(miaoArr)));
                   }
+                  sentenceMiao.push(
+                    JSON.parse(JSON.stringify(sentenceItemMiao))
+                  );
                 }
-                arrOption.push(numrow);
-                arrOption = arrOption.slice(0, data.writeBoxNumber);
-              }
-              arrOption.forEach((itemA) => {
-                allArr.push(itemA);
-              });
-            }
-          });
-          if (data.lastNullrow) {
-            for (let i = 0; i < data.lastNullrow; i++) {
-              let numrow = [];
-              for (let k = 0; k < data.rowNumber; k++) {
-                numrow.push({
-                  write: true,
-                });
-              }
-              allArr.push(JSON.parse(JSON.stringify(numrow)));
-            }
-          }
-          data.result = this.arrSplice(allArr, data.pageNumber);
-          this.writeTableData = data;
-        }
-      } else {
-        // 处理句模式数据
-        let allArr = [];
-        data.option.forEach((item) => {
-          let sentenceArr = []; // 每一句的内容
-          let sentence = Math.ceil(item.length / data.rowNumber);
-          for (let k = 0; k < sentence; k++) {
-            let sentenceItem = [];
-            for (let s = 0; s < data.rowNumber; s++) {
-              if (k * data.rowNumber + s < item.length) {
-                sentenceItem.push({
-                  con: item[k * data.rowNumber + s],
-                });
-              } else {
-                sentenceItem.push({});
-              }
-            }
-            allArr.push(JSON.parse(JSON.stringify(sentenceItem)));
-          }
-          if (data.miaoRedBoxNumber > 0 && data.writeBoxNumber > 0) {
-            let sentenceMiao = [];
-            for (let k = 0; k < sentence; k++) {
-              let sentenceItemMiao = [];
-              this.loading = true;
-              for (let s = 0; s < data.rowNumber; s++) {
-                if (k * data.rowNumber + s < item.length) {
-                  sentenceItemMiao[s] = {
-                    con: item[k * data.rowNumber + s],
-                    miaoRed: true,
-                  };
-                  let MethodName = "hz_resource_manager-GetHZStrokesContent";
-                  getLogin(MethodName, { hz: item[k * data.rowNumber + s] })
-                    .then((res) => {
-                      this.$set(sentenceItemMiao[s], "hzDetail", {
-                        hz_json: res,
-                      });
-                    })
-                    .catch(() => {
-                      this.loading = false;
-                    });
-                } else {
-                  sentenceItemMiao[s] = {};
+                this.loading = false;
+                // 描红内容
+                for (let l = 0; l < data.miaoRedBoxNumber; l++) {
+                  for (let j = 0; j < sentenceMiao.length; j++) {
+                    sentenceArr.push(
+                      JSON.parse(JSON.stringify(sentenceMiao[j]))
+                    );
+                  }
                 }
               }
-              sentenceMiao.push(JSON.parse(JSON.stringify(sentenceItemMiao)));
-            }
-            this.loading = false;
-            // 描红内容
-            for (let l = 0; l < data.miaoRedBoxNumber; l++) {
-              for (let j = 0; j < sentenceMiao.length; j++) {
-                sentenceArr.push(JSON.parse(JSON.stringify(sentenceMiao[j])));
+              // 书写内容
+              if (data.writeBoxNumber > 0) {
+                for (
+                  let w = 0;
+                  w < Number(sentence) * Number(data.writeBoxNumber);
+                  w++
+                ) {
+                  let sentenceItemWrite = [];
+                  for (let j = 0; j < data.rowNumber; j++) {
+                    sentenceItemWrite.push({});
+                  }
+                  sentenceArr.push(
+                    JSON.parse(JSON.stringify(sentenceItemWrite))
+                  );
+                }
               }
-            }
-          }
-          // 书写内容
-          if (data.writeBoxNumber > 0) {
-            for (
-              let w = 0;
-              w < Number(sentence) * Number(data.writeBoxNumber);
-              w++
-            ) {
-              let sentenceItemWrite = [];
-              for (let j = 0; j < data.rowNumber; j++) {
-                sentenceItemWrite.push({});
+              sentenceArr = sentenceArr.slice(
+                0,
+                Number(sentence) * Number(data.writeBoxNumber)
+              );
+              sentenceArr.forEach((itemS, indexS) => {
+                allArr.push(JSON.parse(JSON.stringify(itemS)));
+              });
+            });
+            if (data.lastNullrow > 0) {
+              for (let t = 0; t < data.lastNullrow; t++) {
+                let sentenceItemNull = [];
+                for (let j = 0; j < data.rowNumber; j++) {
+                  sentenceItemNull.push({});
+                }
+                allArr.push(JSON.parse(JSON.stringify(sentenceItemNull)));
               }
-              sentenceArr.push(JSON.parse(JSON.stringify(sentenceItemWrite)));
             }
+            data.result = this.arrSplice(allArr, data.pageNumber);
+            this.writeTableData = data;
           }
-          sentenceArr = sentenceArr.slice(
-            0,
-            Number(sentence) * Number(data.writeBoxNumber)
-          );
-          sentenceArr.forEach((itemS, indexS) => {
-            allArr.push(JSON.parse(JSON.stringify(itemS)));
-          });
-        });
-        if (data.lastNullrow > 0) {
-          for (let t = 0; t < data.lastNullrow; t++) {
-            let sentenceItemNull = [];
-            for (let j = 0; j < data.rowNumber; j++) {
-              sentenceItemNull.push({});
-            }
-            allArr.push(JSON.parse(JSON.stringify(sentenceItemNull)));
-          }
+          this.$forceUpdate();
+          this.isCread = true;
         }
-        data.result = this.arrSplice(allArr, data.pageNumber);
-        this.writeTableData = data;
-      }
-      this.$forceUpdate();
-      this.isCread = true;
+      }, 100);
     },
     arrSplice(arr, chunkSize) {
       //定义一个空数组来接收返回值