特征库v1.2

src/App.vue

@@ -12,7 +12,8 @@ export default {
 <style>
 .body_edit {
   padding: 20px;
-  width: 1000px;
+  width: 1500px;
+  margin: auto;
 }
 .box-card {
   margin-bottom: 20px;

src/components/CharacterResult/edit.vue

@@ -1,5 +1,6 @@
 <template>
-  <div class="body_edit">
+  <div style="padding: 20px">
+    实例详情
     <h2 style="text-align: center">
       特征实例{{ this.resultId ? "编辑" : "添加" }}
     </h2>
@@ -24,7 +25,6 @@
           filterable
           default-first-option
           placeholder="请选择"
-          @change="handleChange"
         >
           <el-option
             v-for="item in wordList"
@@ -37,8 +37,6 @@
       </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>
@@ -68,21 +66,33 @@ export default {
         libId: undefined,
         wordList: [],
       },
-      nowList:[]
+      nowList: [],
     };
   },
-
-  methods: {
-    onReset() {
-      this.form = {
-        name: undefined,
-        thumb: undefined,
-        desc: undefined,
-        libId: undefined,
-        wordList: [],
-      };
+  watch: {
+    resultId: function () {
+      if (this.resultId) {
+        this.nowList = [];
+        getCharacterResultDetail(this.resultId).then((res) => {
+          this.form = res.data;
+          let list = res.data.wordList;
+          list.map((item) => {
+            this.nowList.push(item.wordId);
+          });
+        });
+      } else {
+        this.form = {
+          name: undefined,
+          thumb: undefined,
+          desc: undefined,
+          libId: undefined,
+          wordList: [],
+        };
+        this.nowList = [];
+      }
     },
-    handleChange(val) {},
+  },
+  methods: {
     onSubmit() {
       this.form.wordList = this.wordList.filter((item) =>
         this.nowList.some((v) => v == item.wordId)
@@ -90,7 +100,7 @@ export default {
       this.form.libId = this.libId;
       if (this.form.name) {
         if (this.resultId) {
-          UpdateCharacterResult(this.form,this.resultId).then((res) => {
+          UpdateCharacterResult(this.form, this.resultId).then((res) => {
             this.$message("修改实例成功");
             //告诉父页面实例表需要刷新并且关闭当前组件
             this.$emit("handleRefresh", true);
@@ -106,21 +116,6 @@ export default {
         this.$message("请输入实例名");
       }
     },
-    handleClose() {
-      this.$emit("handleClose", true);
-    },
-  },
-  //进入页面执行的方法
-  mounted: function () {
-    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: {
     UploadImage,

src/components/CharacterResult/index.vue

@@ -1,18 +1,39 @@
 <template>
   <div class="body">
-    <el-card class="box-card">
-      实例名称：<el-input
-        v-model="name"
-        style="width: 200px; margin-right: 20px"
-      />
-      <el-button type="primary" @click="onSearch">查询</el-button>
-      <el-button @click="onReset">重置</el-button>
-    </el-card>
+    <div class="noshadowCard">
+      <el-card class="box-card">
+        实例名称：<el-input
+          v-model="name"
+          size="mini"
+          style="width: 150px; margin-right: 20px"
+        />
+        创建时间：
+      <el-date-picker
+        v-model="daterange"
+        size="mini"
+        type="daterange"
+        range-separator="至"
+        start-placeholder="开始日期"
+        end-placeholder="结束日期"
+        value-format="yyyy-MM-dd"
+        @change="dateChange"
+        style="width:220px; margin-right: 20px"
+      >
+      </el-date-picker>
+
+        <el-button type="primary" size="mini" @click="onSearch">查询</el-button>
+        <el-button size="mini" @click="onReset">重置</el-button>
+        <el-button type="primary" size="mini" @click="handleAddRusult">添加实例</el-button>
+      </el-card>
+    </div>
     <el-table stripe :data="tableData" border style="width: 100%">
       <el-table-column prop="name" label="实例名称" />
       <el-table-column prop="thumb" label="图片">
         <template slot-scope="scope">
-          <el-image :src="scope.row.thumb" style="width: 100px; height: 100px" />
+          <el-image
+            :src="scope.row.thumb"
+            style="width: 100px; height: 100px"
+          />
         </template>
       </el-table-column>
       <el-table-column fixed="right" label="操作">
@@ -22,7 +43,7 @@
             icon="el-icon-info"
             icon-color="red"
             title="这个实例确定删除吗？"
-            @onConfirm='handleDelete(scope.row)'
+            @onConfirm="handleDelete(scope.row)"
           >
             <el-button type="text" slot="reference">删除</el-button>
           </el-popconfirm>
@@ -32,48 +53,69 @@
   </div>
 </template>
 <script>
-import { getCharacterResultList, deleteCharacterResult } from "@/api/characterLib";
+import {
+  getCharacterResultList,
+  deleteCharacterResult,
+} from "@/api/characterLib";
 
 export default {
+  props: {
+    libId: String,
+  },
   data() {
     return {
-      name: undefined,
+      name: undefined,      
+      daterange:'',
       tableData: [],
+      endDate:undefined,
+      startDate:undefined
     };
   },
+  watch: {
+    libId: function () {
+      this.onSearch();
+    },
+  },
   methods: {
+    //添加实例
+    handleAddRusult() {
+      this.$emit("handleAddRusult", true);
+    },
     handleEdit(row) {
       // 向外传送数据row.resultId
       this.$emit("handleEdit", row.resultId);
     },
     handleDelete(row) {
       deleteCharacterResult(row.resultId).then(() => {
-        this.onRefresh();
         this.$message("删除实例成功");
+        this.onSearch();
         //关闭编辑实例页面防止编辑页面还没关闭就删除当前实例了
         this.$emit("handleClose", true);
       });
     },
     onSearch() {
-      getCharacterResultList({ name: this.name }).then((res) => {
-        this.tableData = res.data.records;
-      });
+      getCharacterResultList({ libId: this.libId, name: this.name ,startDate:this.startDate,endDate:this.endDate}).then(
+        (res) => {
+          this.tableData = res.data.records;
+        }
+      );
     },
     onReset() {
-      this.name = "";
-      this.onRefresh();
-    },
-    // 刷新表格
-    onRefresh() {
-      getCharacterResultList().then((res) => {
-        this.tableData = res.data.records;
-      });
+      this.name = "";      
+      this.daterange = "";
+      this.startDate = "";
+      this.endDate = "";
+      this.onSearch();
     },
-  },
-  mounted() {
-    this.onRefresh();
+    dateChange(val){
+      this.startDate=this.daterange[0]
+      this.endDate=this.daterange[1]
+    }
   },
 };
 </script>
 <style>
+.noshadowCard > .box-card {
+  box-shadow: none;
+}
 </style>

src/components/TagComponents/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div style="margin-top:20px">
     <el-tag
       :key="tag"
       v-for="tag in dynamicTags"

src/components/UploadImage/index.vue

@@ -1,34 +1,43 @@
 <template>
-<div>
-<el-upload
-  action="#"
-  list-type="picture-card"
-  :limit="1"
-  :on-remove="handleRemove"
-  :on-change='handleChange'
-  :auto-upload="false"
-  >
-  <i class="el-icon-plus"></i>
-</el-upload>
-</div>
+  <div class="uploadClass">
+    <el-upload
+      action="#"
+      list-type="picture-card"
+      :limit="1"
+      :on-remove="handleRemove"
+      :on-change="handleChange"
+      :auto-upload="false"
+    >
+      <i class="el-icon-plus"></i>
+    </el-upload>
+  </div>
 </template>
 <script>
-  export default {
-    data() {
-      return {
-        dialogImageUrl: '',
-        dialogVisible: false
-      };
+export default {
+  data() {
+    return {
+      dialogImageUrl: "",
+      dialogVisible: false,
+    };
+  },
+  methods: {
+    handleRemove(file, fileList) {
+      console.log(file, fileList);
     },
-    methods: {
-      handleRemove(file, fileList) {
-        console.log(file, fileList);
-      },
-      handleChange(file,fileList){
-        console.log(fileList[0].raw)
-      }
-    }
-  }
+    handleChange(file, fileList) {
+      console.log(fileList[0].raw);
+    },
+  },
+};
 </script>
 <style>
+.uploadClass .el-upload--picture-card {
+  width: 100px;
+  height: 100px;
+  line-height: 106px;
+}
+.el-upload-list--picture-card .el-upload-list__item {
+  width: 100px;
+  height: 100px;
+}
 </style> 

src/views/characterLibManage/add.vue

@@ -26,7 +26,7 @@
         </el-form>
       </el-col>
       <el-col :span="5">
-        特征词列表
+        特征词列表        
         <TagComponents
           :value="characterLib.wordList"
           @handleDelete="handleDelete"

src/views/characterLibManage/edit.vue

@@ -1,57 +1,65 @@
 <template>
   <div style="padding: 20px">
-    <h2 style="text-align: center">特征库编辑</h2>
-    <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="onEdit">修改</el-button>
-            <el-button @click="onCancel">取消</el-button>
-            <el-button type="primary" @click="handleAddRusult"
-              >添加实例</el-button
+    <el-tabs v-model="activeName">
+      <el-tab-pane label="特征库" name="characterLib">
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form
+              ref="form"
+              :model="characterLib"
+              label-width="150px"
+              size="mini"
             >
-          </el-form-item>
-        </el-form>
-      </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 ref="CharacterResult" @handleEdit="handleEdit" @handleClose="handleClose"/>
-      </el-col>
-      <el-col :span="10">
-        实例详情
-        <CharacterResultEdit
-          v-if="isDisplay"
-          :libId="characterLib.libId"
-          :resultId="resultId"
-          :wordList="this.characterLib.wordList"
-          @handleRefresh="handleRefresh"
-          @handleClose="handleClose"
-        />
-      </el-col>
-    </el-row>
+              <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="onEdit">修改</el-button>
+                <el-button @click="onCancel">取消</el-button>
+              </el-form-item>
+            </el-form>
+          </el-col>
+          <el-col :span="12">
+            特征词列表
+            <TagComponents
+              :value="characterLib.wordList"
+              @handleDelete="handleDelete"
+              @handleAdd="handleAdd"
+            />
+          </el-col>
+        </el-row>
+      </el-tab-pane>
+      <el-tab-pane label="特征实例" name="characterResult">
+        <el-row :gutter="20" style="padding-top: 20px">
+          <el-col :span="12">
+            <CharacterResult
+              :libId="characterLib.libId"
+              ref="CharacterResult"
+              @handleEdit="handleEdit"
+              @handleClose="handleClose"
+              @handleAddRusult="resultId = undefined"
+            />
+          </el-col>
+          <el-col :span="12">
+            <CharacterResultEdit
+              :resultId="resultId"
+              :libId="characterLib.libId"
+              :wordList="this.characterLib.wordList"
+              @handleRefresh="handleRefresh"
+            />
+          </el-col>
+        </el-row>
+      </el-tab-pane>
+    </el-tabs>
   </div>
 </template>
 <script>
@@ -65,7 +73,6 @@ import TagComponents from "@/components/TagComponents/index.vue";
 export default {
   data() {
     return {
-      isDisplay: false,
       characterLib: {
         libId: undefined,
         name: undefined,
@@ -74,6 +81,7 @@ export default {
         wordList: [],
       },
       resultId: undefined,
+      activeName: "characterLib",
     };
   },
 
@@ -89,12 +97,8 @@ export default {
         }
       );
     },
-    //添加实例
-    handleAddRusult() {
-      this.isDisplay = true;
-    },
 
-    //实例列表的方法
+    //特征词列表的方法
     handleDelete(val) {
       if (this.characterLib.libId) {
         let nowWordId = undefined;
@@ -143,19 +147,22 @@ export default {
         });
       }
     },
+
+    //实例列表的方法
+    //添加实例
+    handleAddRusult() {
+      this.resultId = undefined;
+    },
     handleEdit(val) {
-      this.isDisplay = true;
       this.resultId = val;
     },
 
     //实例编辑页面调用实例列表的刷新方法 兄弟组件调用方法
     handleRefresh() {
-      this.handleClose();
-      this.$refs.CharacterResult.onRefresh();
+      this.$refs.CharacterResult.onSearch();
     },
     handleClose() {
-      this.isDisplay = false;
-      this.resultId=undefined
+      this.resultId = undefined;
     },
   },
   //进入页面执行的方法

src/views/characterLibManage/index.vue

@@ -3,8 +3,21 @@
     <el-card class="box-card">
       特征库名称：<el-input
         v-model="name"
+        size='medium'
         style="width: 200px; margin-right: 20px"
       />
+      创建时间：
+      <el-date-picker
+        v-model="daterange"
+        type="daterange"
+        range-separator="至"
+        start-placeholder="开始日期"
+        end-placeholder="结束日期"
+        value-format="yyyy-MM-dd"
+        @change="dateChange"
+      >
+      </el-date-picker>
+
       <el-button type="primary" @click="onSearch">查询</el-button>
       <el-button @click="onReset">重置</el-button>
       <el-button type="primary" @click="handleAdd">添加特征库</el-button>
@@ -23,7 +36,7 @@
             icon="el-icon-info"
             icon-color="red"
             title="这个特征库确定删除吗？"
-            @onConfirm='handleDelete(scope.row)'
+            @onConfirm="handleDelete(scope.row)"
           >
             <el-button type="text" slot="reference">删除</el-button>
           </el-popconfirm>
@@ -39,7 +52,10 @@ export default {
   data() {
     return {
       name: undefined,
+      daterange:'',
       tableData: [],
+      endDate:undefined,
+      startDate:undefined
     };
   },
   methods: {
@@ -54,27 +70,28 @@ export default {
     },
     handleDelete(row) {
       deleteCharacterLib(row.libId).then(() => {
-        this.onRefresh();
+        this.onSearch();
       });
     },
     onSearch() {
-      getCharacterLibList({ name: this.name }).then((res) => {
+      getCharacterLibList({ name: this.name,startDate:this.startDate,endDate:this.endDate }).then((res) => {
         this.tableData = res.data.records;
       });
     },
     onReset() {
       this.name = "";
-      this.onRefresh();
-    },
-    // 刷新表格
-    onRefresh() {
-      getCharacterLibList().then((res) => {
-        this.tableData = res.data.records;
-      });
+      this.daterange = "";
+      this.startDate = "";
+      this.endDate = "";
+      this.onSearch();
     },
+    dateChange(val){
+      this.startDate=this.daterange[0]
+      this.endDate=this.daterange[1]
+    }
   },
   mounted() {
-    this.onRefresh();
+    this.onSearch();
   },
 };
 </script>