修改字词练习卡名称

src/views/wordcard/table.vue

@@ -12,9 +12,9 @@
           <div>
             <div class="number"></div>
             <div class="dv dv1" style="font-weight: 500">名称</div>
-            <div class="dv" style="font-weight: 500">卡片类型</div>
+            <div class="dv dvs" style="font-weight: 500">卡片类型</div>
             <div class="dv" style="font-weight: 500">创建内容</div>
-            <div class="dv" style="font-weight: 500">创建日期</div>
+            <div class="dv dv2" style="font-weight: 500">创建日期</div>
           </div>
           <div v-for="(item, i) in data.word_sentence_card_list" :key="i + 'one'">
             <div class="number">{{ item.number }}</div>
@@ -33,11 +33,12 @@
             >
               {{ item.name }}
             </div>
-            <div class="dv">
+            <div class="dv dvs">
               {{ item.type == 'WORD' ? '字词卡' : '书写卡' }}
             </div>
             <div class="dv">{{ item.text }}</div>
-            <div class="dv">{{ item.create_time }}</div>
+            <div class="dv dv2">{{ item.create_time }}</div>
+            <span class="edit-btn" @click="editName(item)"><i class="el-icon-edit"></i></span>
             <el-popconfirm title="确定删除这一条记录吗？" @confirm="deleteOne(item.id, i)">
               <img slot="reference" src="../../assets/teacherdev/delete-one.png" alt="" />
             </el-popconfirm>
@@ -60,6 +61,13 @@
         </div>
       </div>
     </div>
+    <el-dialog title="保存为" :visible.sync="saveShow" width="30%" :before-close="handleClose" :modal="false">
+      <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="save">确 定</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 
@@ -87,6 +95,8 @@ export default {
       AppID: this.$route.query.AppID,
       showPage: false,
       userID: this.$route.query.UserID ? this.$route.query.UserID : '',
+      saveShow: false,
+      saveName: '',
     };
   },
   // 计算属性 类似于data概念
@@ -166,6 +176,45 @@ export default {
           this.loading = false;
         });
     },
+    // 编辑名称
+    editName(item) {
+      this.saveShow = true;
+      this.activeItem = item;
+      this.saveName = item.name;
+    },
+    handleClose() {
+      this.saveShow = false;
+      this.activeItem = null;
+    },
+    // 保存
+    save() {
+      this.loading = this.$loading({
+        lock: true,
+        text: 'Loading',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)',
+      });
+      // 编辑
+      let Mname = 'tr_tool-wsc_manager-UpdateMyWordSentenceCard';
+      LearnWebSI(Mname, {
+        id: this.activeItem.id,
+        name: this.saveName,
+        type: this.activeItem.type,
+        text: this.activeItem.text,
+      })
+        .then((res) => {
+          this.loading.close();
+          this.loading = false;
+          this.saveShow = false;
+          this.activeItem = null;
+          this.$message.success('保存成功');
+          this.getdata();
+        })
+        .catch((res) => {
+          this.loading.close();
+          this.loading = false;
+        });
+    },
   },
   // 生命周期-创建之前
   beforeCreated() {},
@@ -242,18 +291,34 @@ export default {
         }
         .dv {
           margin-left: 24px;
-          width: 250px;
+          width: 400px;
           overflow: hidden;
           white-space: nowrap;
           text-overflow: ellipsis;
           flex-shrink: 0;
         }
+        .dv1 {
+          width: 250px;
+        }
+        .dvs {
+          width: 100px;
+        }
+        .dv2 {
+          width: 200px;
+        }
         img {
           width: 24px;
           height: 24px;
           cursor: pointer;
           margin-left: 24px;
         }
+        .edit-btn {
+          width: 24px;
+          height: 24px;
+          font-size: 24px;
+          margin-top: -10px;
+          cursor: pointer;
+        }
       }
     }
     .page {