InputSearch添加回车搜索

ruoyi-ui/src/views/JiHeExpressway/components/InputSearch/index.vue

@@ -1,109 +1,169 @@
 <template>
-  <ElPopover ref="PopoverRef" placement="bottom" popper-class="global-input-search-popover" :popperOptions="popperOptions"
-    :visibleArrow="false" :width="this.width" trigger="click" @show="handleShow">
-    <div class='InputSearch' slot="reference" ref="ReferenceInputRef">
-      <span>{{ placeholder }}</span>
-      <img src="./search.svg">
+  <div class="from-content" style="width: 100%">
+    <div class="InputSearch input" v-if="params && types == 'input'">
+      <ElInput
+        style="width: 100%"
+        v-model="value"
+        :placeholder="placeholder"
+        @change="handleSearch"
+      ></ElInput>
+      <img src="./search.svg" @click="handleFormShow" />
     </div>
+    <ElPopover
+      v-else
+      ref="PopoverRef"
+      placement="bottom"
+      popper-class="global-input-search-popover"
+      :popperOptions="popperOptions"
+      :visibleArrow="false"
+      :width="this.width"
+      trigger="click"
+      @show="handleShow"
+      style="width: 100%"
+    >
+      <div class="InputSearch" slot="reference" ref="ReferenceInputRef">
+        <span>{{ placeholder }}</span>
+        <img src="./search.svg" @click="handleFormShow" />
+      </div>
 
-    <div style="width: 100%;max-height: 360px;">
-      <slot>
-        <Form v-if="formList && formList.length" class="form" ref="FormConfigRef" :formList="formList"
-          v-bind="getFormConfigOptions" />
-        <!-- <ElEmpty v-else description="暂无搜索内容"></ElEmpty> -->
-        <div v-else class="no-data">暂无数据</div>
-      </slot>
+      <div style="width: 100%; max-height: 360px">
+        <slot>
+          <Form
+            v-if="formList && formList.length"
+            class="form"
+            ref="FormConfigRef"
+            :formList="formList"
+            v-bind="getFormConfigOptions"
+          />
+          <!-- <ElEmpty v-else description="暂无搜索内容"></ElEmpty> -->
+          <div v-else class="no-data">暂无数据</div>
+        </slot>
 
-      <div class="footer">
-        <Button style="background-color: rgba(0, 179, 204, .3);" @click.native="handleResetForm">
-          重置
-        </Button>
-        <Button @click.native="handleSearch">
-          搜索
-        </Button>
+        <div class="footer">
+          <Button
+            style="background-color: rgba(0, 179, 204, 0.3)"
+            @click.native="handleResetForm"
+          >
+            重置
+          </Button>
+          <Button @click.native="handleSearch"> 搜索 </Button>
+        </div>
       </div>
-    </div>
-  </ElPopover>
+    </ElPopover>
+  </div>
 </template>
 
 <script>
-import Button from '@screen/components/Buttons/Button.vue';
-import Form from '@screen/components/FormConfig';
-import { cloneDeep } from "lodash"
+import Button from "@screen/components/Buttons/Button.vue";
+import Form from "@screen/components/FormConfig";
+import { cloneDeep } from "lodash";
 
 export default {
-  name: 'InputSearch',
+  name: "InputSearch",
   components: {
     Button,
-    Form
+    Form,
   },
   props: {
+    type: {
+      type: String,
+      default: "form",
+    },
     placeholder: {
       type: String,
-      default: "请点击右侧图标筛选"
+      default: "请点击右侧图标筛选",
+    },
+    valueData: {
+      type: String,
+    },
+    params: {
+      type: String,
+    },
+    queryParams: {
+      type: Array,
     },
     formConfigOptions: {
       type: Object,
-      default: null
+      default: null,
     },
     formList: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
   },
   data() {
     return {
+      types: this.type,
+      value: this.valueData,
       width: null,
       popperOptions: {
         popHideCallBack: () => {
           // console.log("---")
-        }
-      }
-    }
+        },
+      },
+    };
   },
-  emit: [
-    "handleSearch"
-  ],
+  emit: ["handleSearch"],
   computed: {
     getFormConfigOptions() {
       return {
         column: "1",
         labelWidth: "120px",
-        ...this.formConfigOptions
-      }
-    }
+        ...this.formConfigOptions,
+      };
+    },
   },
   methods: {
+    handleFormShow() {
+      console.log(this.params, this.types);
+      if (this.params) {
+        if (this.types == "form") {
+          this.types = "input";
+        } else {
+          this.types = "form";
+        }
+      } else {
+        this.types = "form";
+      }
+      console.log(this.params, this.types);
+    },
     handleShow() {
       if (this.width) return;
 
-      this.width = this.$refs.ReferenceInputRef.getBoundingClientRect().width
+      this.width = this.$refs.ReferenceInputRef.getBoundingClientRect().width;
     },
     handleResetForm() {
       this.$refs.FormConfigRef?.reset();
 
       this.$refs.PopoverRef.doClose();
 
-      this.$emit('handleSearch', cloneDeep(this.$refs.FormConfigRef?.formData));
+      this.$emit("handleSearch", cloneDeep(this.$refs.FormConfigRef?.formData));
     },
     handleSearch() {
-      this.$refs.FormConfigRef.validate()
-        .then((result) => {
-          this.$refs.PopoverRef.doClose();
-          this.$emit('handleSearch', result);
-        })
-        .catch((err) => {
-          console.log("catch")
-        });
-    }
-  }
-}
+      if (this.types == "form") {
+        this.$refs.FormConfigRef.validate()
+          .then((result) => {
+            this.$refs.PopoverRef.doClose();
+            this.$emit("handleSearch", result);
+          })
+          .catch((err) => {
+            console.log("catch");
+          });
+      } else {
+        let params = {};
+        params[this.params] = this.value;
+        this.$emit("handleSearch", params);
+      }
+    },
+  },
+};
 </script>
 
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 .InputSearch {
+  width: 100%;
   height: 26px;
-  background: linear-gradient(180deg, #005C79 0%, #009BCC 100%) !important;
+  background: linear-gradient(180deg, #005c79 0%, #009bcc 100%) !important;
   color: #fff;
   border-radius: 2px;
   display: flex;
@@ -116,7 +176,17 @@ export default {
   font-size: 12px;
   font-family: PingFang SC, PingFang SC;
   font-weight: 400;
-  color: #FFFFFF;
+  color: #ffffff;
+  line-height: 14px;
+}
+.input ::v-deep .el-input__inner {
+  background: none;
+  height: auto !important;
+  font-size: 12px;
+  padding: 0px 0;
   line-height: 14px;
 }
+::v-deep .el-input__inner::placeholder {
+  font-size: 12px;
+}
 </style>

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/businessDataManagement/views/firstResponders/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class='FirstResponders'>
+  <div class="FirstResponders">
     <div class="filter">
       <div>
         <ButtonGradient @click.native="handleOpenDialogAddEdit()">
@@ -22,15 +22,33 @@
         </ButtonGradient>
       </div>
 
-      <InputSearch style="width: 402px;" :formList="searchFormList" :formConfigOptions="{ labelWidth: '72px' }"
-        @handleSearch="handleSearch" />
+      <InputSearch
+        style="width: 402px"
+        :formList="searchFormList"
+        :formConfigOptions="{ labelWidth: '72px' }"
+        placeholder="请输入姓名、电话，回车搜索"
+        type="input"
+        :valueData="valueData"
+        :params="params"
+        :queryParams="queryParams"
+        @handleSearch="handleSearch"
+      />
     </div>
 
-    <div class='body'>
-      <ElEmpty v-if="!data.length && !isFirst" description="暂无数据" style="width: 100%;height: 100%;position: absolute;" />
+    <div class="body">
+      <ElEmpty
+        v-if="!data.length && !isFirst"
+        description="暂无数据"
+        style="width: 100%; height: 100%; position: absolute"
+      />
       <template v-else>
-        <PeopleCard v-for="(item, index) in data" :cardData="item" :key="index"
-          @edit="data => handleOpenDialogAddEdit(data)" @delete="handleDelete" />
+        <PeopleCard
+          v-for="(item, index) in data"
+          :cardData="item"
+          :key="index"
+          @edit="(data) => handleOpenDialogAddEdit(data)"
+          @delete="handleDelete"
+        />
       </template>
     </div>
 
@@ -40,27 +58,28 @@
 
 <script>
 import PeopleCard from "./../../components/PeopleCard/index.vue";
-import InputSearch from '@screen/components/InputSearch/index.vue';
-import ButtonGradient from '@screen/components/Buttons/ButtonGradient.vue';
-import AddNEditDialog from "./components/AddNEditDialog.vue"
+import InputSearch from "@screen/components/InputSearch/index.vue";
+import ButtonGradient from "@screen/components/Buttons/ButtonGradient.vue";
+import AddNEditDialog from "./components/AddNEditDialog.vue";
 
 import { Message } from "element-ui";
 import { searchFormList } from "./data";
 import request from "@/utils/request";
-import { setLoading } from "@screen/utils/index.js"
+import { setLoading } from "@screen/utils/index.js";
 import { delay, exportFile, confirm } from "@screen/utils/common";
 import { getSelectOptionsStation } from "@screen/pages/control/event/businessDataManagement/utils.js";
+import { values } from "lodash";
 
 // 应急人员
 export default {
-  name: 'FirstResponders',
+  name: "FirstResponders",
   components: {
     PeopleCard,
     ButtonGradient,
     InputSearch,
-    AddNEditDialog
+    AddNEditDialog,
   },
-  inject: ['getPagination', 'setTotal', 'setCurrentPage'],
+  inject: ["getPagination", "setTotal", "setCurrentPage"],
   data() {
     return {
       searchFormList,
@@ -68,7 +87,10 @@ export default {
       addNEditDialogVisible: false,
       dialogData: null,
       isFirst: true,
-    }
+      valueData: "",
+      params: "value",
+      queryParams: ["phone", "name"],
+    };
   },
   created() {
     this.getData();
@@ -81,11 +103,11 @@ export default {
       request({
         url: `/business/employees/${data.id}`,
         method: "DELETE",
-        data: {}
+        data: {},
       })
         .then((result) => {
           if (result.code != 200) return Message.error(`删除失败!`);
-          this.setCurrentPage(1)
+          this.setCurrentPage(1);
           Message.success(`删除成功!`);
         })
         .catch((err) => {
@@ -102,24 +124,28 @@ export default {
         request({
           url: `/business/employees/sysPost`,
           method: "post",
-          data: {}
+          data: {},
         }),
 
         // 机构
-        getSelectOptionsStation()
-      ])
-        .then(([post, organization]) => {
-          if (post.status === 'fulfilled' && post.value.code == 200) {
-            this.searchFormList[0].options.options = post.value.data.map(item => ({
+        getSelectOptionsStation(),
+      ]).then(([post, organization]) => {
+        if (post.status === "fulfilled" && post.value.code == 200) {
+          this.searchFormList[0].options.options = post.value.data.map(
+            (item) => ({
               key: item.postId,
               label: item.postName,
-            }))
-          }
+            })
+          );
+        }
 
-          if (organization.status === 'fulfilled' && Array.isArray(organization.value)) {
-            this.searchFormList[1].options.options = organization.value;
-          }
-        })
+        if (
+          organization.status === "fulfilled" &&
+          Array.isArray(organization.value)
+        ) {
+          this.searchFormList[1].options.options = organization.value;
+        }
+      });
     },
     handleExport() {
       exportFile({
@@ -127,11 +153,12 @@ export default {
         filename: "应急人员",
         data: {
           ...this.searchData,
-          ...this.getPagination()
-        }
+          ...this.getPagination(),
+        },
       });
     },
     handleSearch(data) {
+      console.log(88888, data);
       this.searchData = data;
       this.getData();
     },
@@ -145,26 +172,27 @@ export default {
         method: "get",
         params: {
           ...this.searchData,
-          ...this.getPagination()
-        }
-      }).then(result => {
-        if (result.code != 200) return;
+          ...this.getPagination(),
+        },
+      })
+        .then((result) => {
+          if (result.code != 200) return;
 
-        this.data = result.rows;
+          this.data = result.rows;
 
-        this.setTotal(result.total)
-      }).finally(() => {
-        this.isFirst = false;
-        closeLoading();
-      })
-    }
-  }
-}
+          this.setTotal(result.total);
+        })
+        .finally(() => {
+          this.isFirst = false;
+          closeLoading();
+        });
+    },
+  },
+};
 </script>
 
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 .FirstResponders {
-
   .body {
     display: grid;
     grid-template-columns: repeat(10, 1fr);