特征库v1.1

src/components/CharacterResult/edit.vue

 <template>
   <div class="body_edit">
-    <h2 style="text-align: center">特征实例编辑</h2>
+    <h2 style="text-align: center">
+      特征实例{{ this.resultId ? "编辑" : "添加" }}
+    </h2>
     <el-form ref="form" :model="form" label-width="150px" size="mini">
       <el-form-item label="实例名称：">
-        <el-input v-model="form.name"></el-input>
+        <el-input
+          v-model="form.name"
+          placeholder="请输入实例名（必填）"
+        ></el-input>
       </el-form-item>
       <el-form-item label="特征库图标：">
         <UploadImage />
       </el-form-item>
 
       <el-form-item label="特征词：">
+        <el-select
+          v-model="nowList"
+          multiple
+          filterable
+          default-first-option
+          placeholder="请选择"
+          @change="handleChange"
+        >
+          <el-option
+            v-for="item in wordList"
+            :key="item.wordId"
+            :label="item.word"
+            :value="item.wordId"
+          >
+          </el-option>
+        </el-select>
       </el-form-item>
       <el-form-item>
         <el-button type="primary" @click="onSubmit">确定</el-button>
         <el-button @click="onReset">重置</el-button>
+        <el-button @click="handleClose">关闭</el-button>
       </el-form-item>
     </el-form>
   </div>
 </template>
 <script>
-import { saveCharacterResult } from "@/api/characterLib";
+import {
+  saveCharacterResult,
+  UpdateCharacterResult,
+  getCharacterResultDetail,
+} from "@/api/characterLib";
 import UploadImage from "@/components/UploadImage/index.vue";
 export default {
-  props:{
-    libId:String
+  props: {
+    libId: String,
+    resultId: String,
+    wordList: {
+      type: Array,
+      required: true,
+    },
   },
   data() {
     return {
         name: undefined,
         thumb: undefined,
         desc: undefined,
-        libId:undefined,
-        wordList:[]
+        libId: undefined,
+        wordList: [],
       },
+      nowList:[]
     };
   },
 
   methods: {
     onReset() {
-      this.form={
+      this.form = {
         name: undefined,
         thumb: undefined,
         desc: undefined,
-        libId:undefined,
-        wordList:[]
-      }
+        libId: undefined,
+        wordList: [],
+      };
     },
+    handleChange(val) {},
     onSubmit() {
-      this.form.libId=this.libId
-      console.log(this.form)
-      
-      saveCharacterResult(this.form).then((res) => {
-        this.$message('添加实例成功')
-        console.log(res);
-      });
-    }
+      this.form.wordList = this.wordList.filter((item) =>
+        this.nowList.some((v) => v == item.wordId)
+      );
+      this.form.libId = this.libId;
+      if (this.form.name) {
+        if (this.resultId) {
+          UpdateCharacterResult(this.form,this.resultId).then((res) => {
+            this.$message("修改实例成功");
+            //告诉父页面实例表需要刷新并且关闭当前组件
+            this.$emit("handleRefresh", true);
+          });
+        } else {
+          saveCharacterResult(this.form).then((res) => {
+            this.$message("添加实例成功");
+            //告诉父页面实例表需要刷新并且关闭当前组件
+            this.$emit("handleRefresh", true);
+          });
+        }
+      } else {
+        this.$message("请输入实例名");
+      }
+    },
+    handleClose() {
+      this.$emit("handleClose", true);
+    },
   },
   //进入页面执行的方法
   mounted: function () {
-    if (this.$route?.query.row) {
+    if (this.resultId) {
+      getCharacterResultDetail(this.resultId).then((res) => {
+        this.form = res.data;
+        let list=res.data.wordList
+        list.map((item)=>{
+          this.nowList.push(item.wordId)
+        })
+      });
     }
   },
   components: {

src/components/CharacterResult/index.vue

   methods: {
     handleEdit(row) {
       // 向外传送数据row.resultId
+      this.$emit("handleEdit", row.resultId);
     },
     handleDelete(row) {
-      // deleteCharacterResult(row.resultId).then(() => {
-      //   this.onRefresh();
-      // });
+      deleteCharacterResult(row.resultId).then(() => {
+        this.onRefresh();
+        this.$message("删除实例成功");
+        //关闭编辑实例页面防止编辑页面还没关闭就删除当前实例了
+        this.$emit("handleClose", true);
+      });
     },
     onSearch() {
       getCharacterResultList({ name: this.name }).then((res) => {

src/views/characterLibManage/edit.vue

           <el-form-item>
             <el-button type="primary" @click="onEdit">修改</el-button>
             <el-button @click="onCancel">取消</el-button>
-            <el-button type="primary" @click="onCancel">添加实例</el-button>
+            <el-button type="primary" @click="handleAddRusult"
+              >添加实例</el-button
+            >
           </el-form-item>
         </el-form>
       </el-col>
     </el-row>
     <el-row :gutter="20">
       <el-col :span="10">
-        <CharacterResult />
+        <CharacterResult ref="CharacterResult" @handleEdit="handleEdit" @handleClose="handleClose"/>
       </el-col>
       <el-col :span="10">
         实例详情
-        <CharacterResultEdit :libId="characterLib.libId" />
+        <CharacterResultEdit
+          v-if="isDisplay"
+          :libId="characterLib.libId"
+          :resultId="resultId"
+          :wordList="this.characterLib.wordList"
+          @handleRefresh="handleRefresh"
+          @handleClose="handleClose"
+        />
       </el-col>
     </el-row>
   </div>
 export default {
   data() {
     return {
+      isDisplay: false,
       characterLib: {
         libId: undefined,
         name: undefined,
         remark: undefined,
         wordList: [],
       },
+      resultId: undefined,
     };
   },
 
   methods: {
+    //上方实例库的方法
     onCancel() {
       this.$router.go(-1);
     },
         }
       );
     },
+    //添加实例
+    handleAddRusult() {
+      this.isDisplay = true;
+    },
+
+    //实例列表的方法
     handleDelete(val) {
       if (this.characterLib.libId) {
         let nowWordId = undefined;
         });
       }
     },
+    handleEdit(val) {
+      this.isDisplay = true;
+      this.resultId = val;
+    },
+
+    //实例编辑页面调用实例列表的刷新方法 兄弟组件调用方法
+    handleRefresh() {
+      this.handleClose();
+      this.$refs.CharacterResult.onRefresh();
+    },
+    handleClose() {
+      this.isDisplay = false;
+      this.resultId=undefined
+    },
   },
   //进入页面执行的方法
   mounted: function () {