特征库1.0

src/api/characterWord.js

+import request from '@/utils/request'
+
+/**
+* 保存特征词
+* @param {*} data 
+* @returns 
+*/
+export const saveCharacterWord = (data) => request({
+  url: '/admin/character-word',
+  method: 'post',
+  data
+})
+
+/**
+ * 特征词列表
+ * @param {*} params 
+ * @returns 
+ */
+export const getCharacterWordList = (params) => request({
+  url: '/admin/character-word', params
+})
+
+/**
+ * 删除特征词
+ * @param {*} data 
+ * @returns 
+ */
+export const deleteCharacterWord = (id) => request({
+  url: `/admin/character-word/${id}`, method: 'delete'
+})
+/**
+ * 更新特征词
+ * @param {*} data 
+ * @returns 
+ */
+export const UpdateCharacterWord = (data, id) => request({
+  url: `/admin/character-word/${id}`, method: 'put', data
+})
+/**
+ * 查询特征词详情
+ * @param {*} params 
+ * @returns 
+ */
+export const getCharacterWordDetail = (id) => request({
+  url: `/admin/character-word/${id}`
+})

src/components/CharacterResult/edit.vue

 <template>
   <div class="body_edit">
-    <h2 style="text-align: center">题目编辑</h2>
+    <h2 style="text-align: center">特征实例编辑</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-form-item>
 
       <el-form-item label="特征词：">
-        <TagComponents :value='value' @change='handleChange'/>
       </el-form-item>
       <el-form-item>
         <el-button type="primary" @click="onSubmit">确定</el-button>
   </div>
 </template>
 <script>
-import { saveQuestion } from "@/api/question";
+import { saveCharacterResult } from "@/api/characterLib";
 import UploadImage from "@/components/UploadImage/index.vue";
-import TagComponents from '../TagComponents/index.vue'
 export default {
+  props:{
+    libId:String
+  },
   data() {
     return {
-      value:[],
       form: {
         name: undefined,
         thumb: undefined,
 
   methods: {
     onReset() {
-
+      this.form={
+        name: undefined,
+        thumb: undefined,
+        desc: undefined,
+        libId:undefined,
+        wordList:[]
+      }
     },
     onSubmit() {
-      console.log(this.value)
+      this.form.libId=this.libId
+      console.log(this.form)
       
-      // this.form.option = this.rightList.toString();
-      // saveQuestion(this.form).then((res) => {
-      //   console.log(res);
-      // });
-    },
-    handleChange(val){
-      console.log(val)
+      saveCharacterResult(this.form).then((res) => {
+        this.$message('添加实例成功')
+        console.log(res);
+      });
     }
   },
   //进入页面执行的方法
   },
   components: {
     UploadImage,
-    TagComponents
   },
 };
 </script>

src/components/TagComponents/index.vue

     >
     </el-input>
     <el-button v-else class="button-new-tag" size="small" @click="showInput"
-      >添加修饰词</el-button
+      >添加特征词</el-button
     >
   </div>
 </template>
   },
   data() {
     return {
-      dynamicTags: [],
       inputVisible: false,
       inputValue: "",
     };
   },
+  computed: {
+    dynamicTags() {
+      let tags = [];
+      this.value.map((item) => {
+        tags.push(item.word);
+      });
+      return tags;
+    },
+  },
   methods: {
+    //删除特征词
     handleClose(tag) {
-      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
+      if (this.value && this.value[0].wordId) {
+        this.$confirm("确认删除该修饰词？", {
+          showCancelButton: true,
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+        })
+          .then((_) => {
+            this.$emit("handleDelete", tag);
+            this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
+          })
+          .catch((_) => {});
+      } else {
+        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
+        this.$emit("handleDelete", tag);
+      }
     },
 
     showInput() {
         this.$refs.saveTagInput.$refs.input.focus();
       });
     },
-
+    //添加特征词
     handleInputConfirm() {
       let inputValue = this.inputValue;
       if (inputValue) {
         this.dynamicTags.push(inputValue);
+        this.$emit("handleAdd", inputValue);
       }
       this.inputVisible = false;
       this.inputValue = "";
-    }
-  },
-  watch: {
-    dynamicTags() {
-      this.$emit("change", this.dynamicTags);
     },
   },
-  mounted(){
-    this.dynamicTags=this.value
-  }
 };
 </script>
 <style>

src/views/characterLibManage/add.vue

 <template>
   <div class="body_edit">
     <h2 style="text-align: center">特征库新增</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-form-item>
-      <el-form-item label="特征库图标：">
-        <UploadImage />
-      </el-form-item>
-      <el-form-item label="特征库描述：">
-        <el-input type="textarea" v-model="form.remark"></el-input>
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" @click="onSubmit">添加</el-button>
-        <el-button @click="onCancel">取消</el-button>
-      </el-form-item>
-    </el-form>
+    <el-row :gutter="20">
+      <el-col :span="15">
+        <el-form
+          ref="form"
+          :model="characterLib"
+          label-width="150px"
+          size="mini"
+        >
+          <el-form-item label="特征库名称：">
+            <el-input v-model="characterLib.name"></el-input>
+          </el-form-item>
+          <el-form-item label="特征库图标：">
+            <UploadImage />
+          </el-form-item>
+          <el-form-item label="特征库描述：">
+            <el-input type="textarea" v-model="characterLib.remark"></el-input>
+          </el-form-item>
+
+          <el-form-item>
+            <el-button type="primary" @click="onSubmit">添加</el-button>
+            <el-button @click="onCancel">取消</el-button>
+          </el-form-item>
+        </el-form>
+      </el-col>
+      <el-col :span="5">
+        特征词列表
+        <TagComponents
+          :value="characterLib.wordList"
+          @handleDelete="handleDelete"
+          @handleAdd="handleAdd"
+        />
+      </el-col>
+    </el-row>
   </div>
 </template>
 <script>
 import { saveCharacterLib } from "@/api/characterLib";
-import UploadImage from '@/components/UploadImage/index.vue'
+import UploadImage from "@/components/UploadImage/index.vue";
+import TagComponents from "@/components/TagComponents/index.vue";
 export default {
   data() {
     return {
-      form: {
+      characterLib: {
         name: undefined,
         icon: undefined,
-        remark:undefined
+        remark: undefined,
+        wordList: [],
       },
     };
   },
       this.$router.go(-1);
     },
     onSubmit() {
-      saveCharacterLib(this.form).then((res) => {
-        this.$message('保存成功');
+      saveCharacterLib(this.characterLib).then((res) => {
+        this.$message("保存成功");
         this.$router.go(-1);
       });
     },
+    handleDelete(val) {
+      this.characterLib.wordList.map((item) => {
+        if (item.word === val) {
+          this.characterLib.wordList.splice(
+            this.characterLib.wordList.indexOf(item),
+            1
+          );
+        }
+      });
+    },
+    handleAdd(val) {
+      this.characterLib.wordList.push({
+        libId: undefined,
+        word: val,
+        wordId: undefined,
+      });
+    },
+  },
+  components: {
+    UploadImage,
+    TagComponents,
   },
-  components:{
-    UploadImage
-  }
 };
 </script>
 <style>

src/views/characterLibManage/edit.vue

           </el-form-item>
         </el-form>
       </el-col>
-      <el-col :span="5"> 特征词列表 </el-col>
+      <el-col :span="5">
+        特征词列表
+        <TagComponents
+          :value="characterLib.wordList"
+          @handleDelete="handleDelete"
+          @handleAdd="handleAdd"
+        />
+      </el-col>
     </el-row>
     <el-row :gutter="20">
       <el-col :span="10">
         <CharacterResult />
       </el-col>
-      <el-col :span="10"> 实例详情 
-        <CharacterResultEdit />
+      <el-col :span="10">
+        实例详情
+        <CharacterResultEdit :libId="characterLib.libId" />
       </el-col>
     </el-row>
   </div>
 </template>
 <script>
 import { UpdateCharacterLib, getCharacterLibDetail } from "@/api/characterLib";
+import { deleteCharacterWord, saveCharacterWord } from "@/api/characterWord";
 import UploadImage from "@/components/UploadImage/index.vue";
 import CharacterResult from "@/components/CharacterResult/index.vue";
 import CharacterResultEdit from "@/components/CharacterResult/edit.vue";
+import TagComponents from "@/components/TagComponents/index.vue";
+
 export default {
   data() {
     return {
         }
       );
     },
+    handleDelete(val) {
+      if (this.characterLib.libId) {
+        let nowWordId = undefined;
+        this.characterLib.wordList.map((item) => {
+          if (item.word === val) {
+            nowWordId = item.wordId;
+          }
+        });
+        // 调用删除接口
+        deleteCharacterWord(nowWordId).then(() => {
+          this.characterLib.wordList.map((item) => {
+            if (item.word === val) {
+              this.characterLib.wordList.splice(
+                this.characterLib.wordList.indexOf(item),
+                1
+              );
+            }
+          });
+        });
+      } else {
+        // 直接删除当前项
+        this.characterLib.wordList.map((item) => {
+          if (item.word === val) {
+            this.characterLib.wordList.splice(
+              this.characterLib.wordList.indexOf(item),
+              1
+            );
+          }
+        });
+      }
+    },
+    handleAdd(val) {
+      if (this.characterLib.libId) {
+        saveCharacterWord({
+          libId: this.characterLib.libId,
+          word: val,
+          wordId: undefined,
+        }).then((res) => {
+          this.characterLib.wordList.push(res.data);
+        });
+      } else {
+        this.characterLib.wordList.push({
+          libId: this.characterLib.libId,
+          word: val,
+          wordId: undefined,
+        });
+      }
+    },
   },
   //进入页面执行的方法
   mounted: function () {
   components: {
     UploadImage,
     CharacterResult,
-    CharacterResultEdit
+    CharacterResultEdit,
+    TagComponents,
   },
 };
 </script>