食谱制作页面的快捷列表关键字搜索

stdiet-ui/src/views/custom/recipesBuild/InfoView/ShortCutCom/index.vue

@@ -1,14 +1,32 @@
 <template>
   <div class="short_cut_com_wrapper">
-    <div class="header">
-      <el-button icon="el-icon-refresh" size="mini" @click="getList" circle />
-    </div>
+    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="关键词" prop="key" >
+        <el-input
+          v-model.trim="queryParams.key"
+          placeholder="请输入名称/种类"
+          clearable
+          @clear="getList"
+          @keyup.native="getList"
+          size="small"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="cyan" icon="el-icon-search" size="mini" @click="getList">搜索</el-button>
+      </el-form-item>
+    </el-form>
+    
+      <div class="header">
+        <el-button icon="el-icon-search" size="mini" @click="showSearch = !showSearch" circle :title="showSearch ? '隐藏搜索' : '显示搜索'"/>
+        <el-button icon="el-icon-refresh" size="mini" @click="getList" circle title="刷新"/>
+        <el-button icon="el-icon-delete" size="mini" circle :title="'清空快捷列表'" @click="handleOnMuchDelete"/>
+      </div>
     <el-table
       :data="dataList"
       ref="shortCutTable"
       highlight-current-row
       @current-change="handleOnCurrentChange"
-      height="800"
+      height="700"
     >
       <el-table-column prop="name" label="对象" align="center">
         <template slot-scope="scope">
@@ -95,6 +113,7 @@ import {
   getShortCut,
   removeShortCut,
   editShortCut,
+  removeMuchShortCut
 } from "@/utils/shortCutUtils";
 import AutoHideInfo from "@/components/AutoHideInfo";
 import { createNamespacedHelpers } from "vuex";
@@ -113,6 +132,10 @@ export default {
     return {
       dataList: [],
       modifingId: 0,
+      showSearch: false,
+      queryParams:{
+        key: null
+      }
     };
   },
   created() {
@@ -147,8 +170,12 @@ export default {
       }
     },
     getList(setCurrent) {
-      getShortCut().then((data) => {
+      getShortCut(this.queryParams.key).then((data) => {
         this.dataList = data;
+        //超过10个就显示搜索按钮
+        if(this.dataList && this.dataList.length > 5 && !this.showSearch){
+           this.showSearch = true;
+        }
         // console.log(this.dataList);
         if (setCurrent) {
           this.$refs.shortCutTable.setCurrentRow(data[0]);
@@ -163,6 +190,27 @@ export default {
         }
       });
     },
+    handleOnMuchDelete() {
+      if(this.dataList && this.dataList.length > 0){
+         let ids = [];
+         this.dataList.forEach((item,index) => {
+            ids.push(item.id);
+         });
+         this.$confirm("是否确定清除当前 "+ids.length+" 条快捷数据?", "警告", {
+            confirmButtonText: "确定",
+            cancelButtonText: "取消",
+            type: "warning",
+          }).then(function () {
+            return removeMuchShortCut(ids);
+          }).then((response) => {
+            this.getList();
+            if (ids.indexOf(this.curShortCutObj.id) != -1) {
+              this.setCurShortCutObj({});
+            }
+          })
+          .catch(function () {});     
+      }
+    },
     handleOnCurrentChange(data) {
       this.setCurShortCutObj({ data });
     },

stdiet-ui/src/views/custom/recipesBuild/RecipesView/RecipesCom/index.vue

@@ -342,6 +342,9 @@
   </div>
 </template>
 <script>
+import {
+  getDishClassNameById 
+} from "@/api/custom/recipes";
 import { createNamespacedHelpers } from "vuex";
 const {
   mapActions,