词句卡片列表删除 创建 更新 数据回显接口联调及数据回显渲染

src/views/wordcard/cread.vue

@@ -196,7 +196,7 @@
       <el-input placeholder="请输入" v-model="saveName"> </el-input>
       <span slot="footer" class="dialog-footer">
         <el-button @click="handleClose">取 消</el-button>
-        <el-button type="primary" @click="handleClose">确 定</el-button>
+        <el-button type="primary" @click="save">确 定</el-button>
       </span>
     </el-dialog>
   </div>
@@ -206,7 +206,7 @@
 //这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
 //例如：import 《组件名称》from ‘《组件路径》';
 import Header from "@/components/Header";
-import { getLogin } from "@/api/api";
+import { getLogin, LearnWebSI } from "@/api/api";
 import writeTable from "./writeTable.vue";
 import html2canvas from "html2canvas";
 import { jsPDF } from "jspdf";
@@ -259,6 +259,61 @@ export default {
     handleClose() {
       this.saveShow = false;
     },
+    // 保存
+    save() {
+      this.loading = this.$loading({
+        lock: true,
+        text: "Loading",
+        spinner: "el-icon-loading",
+        background: "rgba(0, 0, 0, 0.7)",
+      });
+      if (this.$route.query.id) {
+        // 编辑
+        let Mname = "tr_tool-wsc_manager-UpdateMyWordSentenceCard";
+        LearnWebSI(Mname, {
+          id: this.$route.query.id,
+          name: this.saveName,
+          type: this.typeIndex == 0 ? "WORD" : "SENTENCE",
+          text: this.from.content,
+          content: JSON.stringify(this.writeTableData),
+        })
+          .then((res) => {
+            this.loading.close();
+            this.loading = false;
+            this.saveShow = false;
+            this.$message.success("保存成功");
+          })
+          .catch((res) => {
+            this.loading.close();
+            this.loading = false;
+          });
+      } else {
+        // 新建
+        let Mname = "tr_tool-wsc_manager-CreateMyWordSentenceCard";
+        LearnWebSI(Mname, {
+          name: this.saveName,
+          type: this.typeIndex == 0 ? "WORD" : "SENTENCE",
+          text: this.from.content,
+          content: JSON.stringify(this.writeTableData),
+        })
+          .then((res) => {
+            this.$router.replace({
+              path: "/wordcard/cread",
+              query: {
+                id: res.id,
+              },
+            });
+            this.loading.close();
+            this.loading = false;
+            this.saveShow = false;
+            this.$message.success("保存成功");
+          })
+          .catch((res) => {
+            this.loading.close();
+            this.loading = false;
+          });
+      }
+    },
     download(dom) {
       let content = document.getElementById(dom);
       content = content ? content : null;
@@ -369,7 +424,7 @@ export default {
     // 切换类型
     cutType(index) {
       this.typeIndex = index;
-      this.writeTableData = null
+      this.writeTableData = null;
     },
     // 生成
     creadEvent() {
@@ -425,10 +480,17 @@ export default {
         data.marginBottom = "7px";
         data.playWidth = "8px";
       }
-      if(this.from.writeBoxNumber<this.from.miaoRedBoxNumber&&this.typeIndex == 1){
+      if (
+        this.from.writeBoxNumber < this.from.miaoRedBoxNumber &&
+        this.typeIndex == 1
+      ) {
         this.$message.warning("书写格数不能小于描红数");
         return;
-      }else if(this.from.writeBoxNumber<Math.ceil(this.from.miaoRedBoxNumber/data.rowNumber)&&this.typeIndex == 0){
+      } else if (
+        this.from.writeBoxNumber <
+          Math.ceil(this.from.miaoRedBoxNumber / data.rowNumber) &&
+        this.typeIndex == 0
+      ) {
         this.$message.warning("书写格数不能小于描红所用行数");
         return;
       }
@@ -799,9 +861,53 @@ export default {
       //return出去
       return resSplice;
     },
+    // 字句详情
+    getdetai() {
+      this.loading = true;
+      let Mname = "tr_tool-wsc_manager-GetWordSentenceCard";
+      LearnWebSI(Mname, {
+        id: this.$route.query.id,
+      })
+        .then((res) => {
+          this.saveName = res.name;
+          this.from.content = res.text;
+          this.writeTableData = JSON.parse(res.content);
+          // 初始化 from 表单
+          for (let key in this.from) {
+            if (this.writeTableData[key]) {
+              if (key == "fontSize") {
+                if (this.writeTableData[key] == "48px") {
+                  this.from[key] = "big";
+                } else if (this.writeTableData[key] == "38px") {
+                  this.from[key] = "center";
+                } else {
+                  this.from[key] = "little";
+                }
+              } else {
+                this.from[key] = this.writeTableData[key];
+              }
+            }
+          }
+          if (res.type == "WORD") {
+            this.typeIndex = 0;
+          } else {
+            this.typeIndex = 1;
+          }
+          this.loading = false;
+          this.isCread = true;
+        })
+        .catch((res) => {
+          this.loading = false;
+        });
+    },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
-  created() {},
+  created() {
+    if (this.$route.query.id) {
+      // 需要请求详情接口
+      this.getdetai();
+    }
+  },
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {},
   //生命周期-创建之前

src/views/wordcard/table.vue

@@ -1,20 +1,37 @@
 <template>
-  <div class="cred_table">
+  <div class="cred_table" v-loading="loading">
     <Header />
     <div class="main">
       <div>
         <div class="title">词句卡片</div>
         <div class="number_cread">
-          <span class="left">文件数量：4</span>
+          <span class="left">文件数量：{{ data.total_count }}</span>
           <div class="right" @click="Startcread">开始创建</div>
         </div>
         <div class="table">
-          <div v-for="(item, i) in data" :key="i + 'one'">
+          <div
+            v-for="(item, i) in data.word_sentence_card_list"
+            :key="i + 'one'"
+          >
             <div class="number">{{ item.number }}</div>
-            <div class="dv">{{ item.fileName }}</div>
-            <div class="dv">{{ item.type == 1 ? "字卡片" : "句卡片" }}</div>
-            <div class="dv">{{ item.content }}</div>
-            <div class="dv">{{ item.time }}</div>
+            <div
+              class="dv dv1"
+              @click="
+                $router.push({
+                  path: '/wordcard/cread',
+                  query: {
+                    id: item.id,
+                  },
+                })
+              "
+            >
+              {{ item.name }}
+            </div>
+            <div class="dv">
+              {{ item.type == "WORD" ? "字卡片" : "句卡片" }}
+            </div>
+            <div class="dv">{{ item.text }}</div>
+            <div class="dv">{{ item.create_time }}</div>
             <el-popconfirm
               title="确定删除这一条记录吗？"
               @confirm="deleteOne(item.id, i)"
@@ -35,7 +52,7 @@
             layout="prev, pager, next,jumper"
             :current-page="page"
             :page-size="pageSize"
-            :total="1000"
+            :total="data.total_count"
           >
           </el-pagination>
         </div>
@@ -48,7 +65,7 @@
 //这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
 //例如：import 《组件名称》from ‘《组件路径》';
 import Header from "@/components/Header";
-
+import { LearnWebSI } from "@/api/api";
 export default {
   //import引入的组件需要注入到对象中才能使用
   components: {
@@ -61,6 +78,7 @@ export default {
       data: [],
       page: 1,
       pageSize: 10,
+      loading: false,
     };
   },
   //计算属性 类似于data概念
@@ -75,33 +93,42 @@ export default {
         path: "/wordcard/cread",
       });
     },
-    deleteOne() {},
+    deleteOne(id, index) {
+      this.loading = true;
+      let Mname = "tr_tool-wsc_manager-DeleteMyWordSentenceCard";
+      LearnWebSI(Mname, {
+        id: id,
+      })
+        .then((res) => {
+          this.getdata();
+        })
+        .catch((res) => {
+          this.loading = false;
+        });
+    },
     handleCurrentChange(val) {
       this.page = val;
+      this.getdata();
     },
     getdata() {
-      let data = [
-        {
-          fileName:
-            "这里是文件名文件名文件名这里是文件名文件名文件名这里是文件名文件名文件名",
-          type: 1,
-          content: "今天天气非常好 明天据说有雨 后天可能会有沙尘暴",
-          time: "2022-06-07 06:38",
-        },
-        {
-          fileName:
-            "这里是文件名文件名文件名这里是文件名文件名文件名这里是文件名文件名文件名",
-          type: 2,
-          content: "今天天气非常好 明天据说有雨 后天可能会有沙尘暴",
-          time: "2022-06-07 06:38",
-        },
-      ];
-      let num = this.page * this.pageSize - this.pageSize + 1;
-      data.forEach((item) => {
-        item.number = num;
-        num++;
-      });
-      this.data = data;
+      this.loading = true;
+      let Mname = "page_query-PageQueryMyWordSentenceCardList";
+      LearnWebSI(Mname, {
+        cur_page: this.page,
+        page_capacity: this.pageSize,
+      })
+        .then((res) => {
+          this.data = res;
+          let num = this.page * this.pageSize - this.pageSize + 1;
+          this.data.word_sentence_card_list.forEach((item) => {
+            item.number = num;
+            num++;
+          });
+          this.loading = false;
+        })
+        .catch((res) => {
+          this.loading = false;
+        });
     },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
@@ -185,13 +212,15 @@ export default {
           width: 20px;
           text-align: right;
         }
+        .dv1 {
+          cursor: pointer;
+        }
         .dv {
           margin-left: 24px;
           width: 400px;
           overflow: hidden;
           white-space: nowrap;
           text-overflow: ellipsis;
-          cursor: pointer;
         }
         img {
           width: 24px;