From 49d61264b34dc31e6552c792ea6e7947cae004b8 Mon Sep 17 00:00:00 2001
From: Joe <1712833832@qq.com>
Date: Tue, 16 Jan 2024 17:08:02 +0800
Subject: [PATCH] =?UTF-8?q?search=20input=20=E7=BB=84=E4=BB=B6=E6=8F=90?=
 =?UTF-8?q?=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/MultipleLabelItem.vue          | 17 +++++----
 .../components/FormConfig/index.vue           | 14 ++++---
 .../FormConfig/utils/defaultValue.js          | 38 +++++++++++++++++++
 .../components/FormConfig/utils/index.js      |  3 ++
 .../components/InputSearch/index.vue          | 20 +++++++---
 .../event/businessDataManagement/index.vue    |  1 -
 .../event/event/FormEvent/PresetFormItems.js  | 12 ++++++
 .../pages/control/event/event/data.js         | 25 ++++++++++++
 .../pages/control/event/event/index.vue       | 10 +++--
 9 files changed, 118 insertions(+), 22 deletions(-)
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/components/FormConfig/utils/defaultValue.js
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/components/FormConfig/utils/index.js

diff --git a/ruoyi-ui/src/views/JiHeExpressway/components/FormConfig/components/MultipleLabelItem.vue b/ruoyi-ui/src/views/JiHeExpressway/components/FormConfig/components/MultipleLabelItem.vue
index 7d0273a9..5b4311d3 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/components/FormConfig/components/MultipleLabelItem.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/components/FormConfig/components/MultipleLabelItem.vue
@@ -1,8 +1,8 @@
 <template>
   <div class='MultipleLabelItem'>
-    <div v-for="item in options" class="item">
+    <div v-for="(item, index) in options" :key="item.key || index" class="item">
       <span v-if="item.prefix" :style="item.prefix.style">{{ item.prefix.text }}</span>
-      <component class="unknown" :is="getComponent(item.type)" v-bind="getBindData(item)" v-model="formData[item.key]" />
+      <component class="unknown" :is="getComponent(item.type)" v-bind="getBindData(item)" v-model="data[item.key]" />
       <span v-if="item.suffix" :style="item.suffix.style">{{ item.suffix.text }}</span>
     </div>
   </div>
@@ -16,13 +16,16 @@ export default {
     options: {
       type: Array,
       default: () => []
+    },
+    data: {
+      type: Object,
+      default: () => ({})
     }
   },
-  data() {
-    return {
-      formData: {}
-    }
-  }
+  model: {
+    prop: 'data',
+    event: "update:value"
+  },
 }
 </script>
 
diff --git a/ruoyi-ui/src/views/JiHeExpressway/components/FormConfig/index.vue b/ruoyi-ui/src/views/JiHeExpressway/components/FormConfig/index.vue
index ed133c7a..96cf43eb 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/components/FormConfig/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/components/FormConfig/index.vue
@@ -10,6 +10,9 @@
 </template>
 
 <script>
+import { resolveName } from "./utils/index"
+import { reduceDefaultValue } from "./utils/defaultValue"
+
 const files = require.context('./components', true, /^.\/[^/]+\/index\.vue$|^.\/[^/]+.vue$/);
 
 const components = files.keys().reduce((prev, key) => {
@@ -67,11 +70,7 @@ export default {
     }
   },
   created() {
-    this.formData = this.formList.reduce((prev, { key, default: defaultData }) => {
-      prev[key] = defaultData || null;
-
-      return prev
-    }, {})
+    this.reset();
   },
   computed: {
     gridStyle() {
@@ -82,6 +81,9 @@ export default {
     }
   },
   methods: {
+    reset() {
+      return this.formData = reduceDefaultValue(this.formList);
+    },
     getStyle() {
       return {
         gridTemplateColumns: `repeat(${this.column}, 1fr)`,
@@ -96,7 +98,7 @@ export default {
     getComponent(type) {
       if (!type) type = 'input';
 
-      const componentKey = type.replace(/^[a-z]/, word => word.toUpperCase());
+      const componentKey = resolveName(type);
 
       const ElComponentKey = `El${componentKey}`;
 
diff --git a/ruoyi-ui/src/views/JiHeExpressway/components/FormConfig/utils/defaultValue.js b/ruoyi-ui/src/views/JiHeExpressway/components/FormConfig/utils/defaultValue.js
new file mode 100644
index 00000000..7ef5c7f4
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/components/FormConfig/utils/defaultValue.js
@@ -0,0 +1,38 @@
+import { resolveName } from "./index";
+
+export const presetDefaultValue = {
+  Select(item) {
+    if (item.options?.multiple) return [];
+    return null;
+  },
+  MultipleLabelItem(item) {
+    return reduceDefaultValue(item.options?.options);
+  },
+  RadioGroup() {
+    return [];
+  },
+  CheckboxGroup() {
+    return [];
+  },
+  InputNumber() {
+    return 0;
+  },
+};
+
+export function getDefaultValue(item) {
+  if (item.hasOwnProperty("default")) return item.default;
+
+  const getValue = presetDefaultValue[resolveName(item.type)];
+
+  return typeof getValue === "function" ? getValue(item) : null;
+}
+
+export function reduceDefaultValue(formList) {
+  if (!Array.isArray(formList)) return null;
+
+  return formList.reduce((prev, cur) => {
+    if (cur.key) prev[cur.key] = getDefaultValue(cur);
+
+    return prev;
+  }, {});
+}
diff --git a/ruoyi-ui/src/views/JiHeExpressway/components/FormConfig/utils/index.js b/ruoyi-ui/src/views/JiHeExpressway/components/FormConfig/utils/index.js
new file mode 100644
index 00000000..0b24fa71
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/components/FormConfig/utils/index.js
@@ -0,0 +1,3 @@
+export function resolveName(name = "input") {
+  return name.replace(/^[a-z]/, (word) => word.toUpperCase());
+}
diff --git a/ruoyi-ui/src/views/JiHeExpressway/components/InputSearch/index.vue b/ruoyi-ui/src/views/JiHeExpressway/components/InputSearch/index.vue
index c11c1665..a4927b7e 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/components/InputSearch/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/components/InputSearch/index.vue
@@ -8,15 +8,16 @@
 
     <div style="width: 100%">
       <slot>
-        <Form class="form" :formList="formList" v-bind="getFormConfigOptions" />
-        <ElEmpty description="暂无搜索内容"></ElEmpty>
+        <Form v-if="formList && formList.length" class="form" ref="FormConfigRef" :formList="formList"
+          v-bind="getFormConfigOptions" />
+        <ElEmpty v-else description="暂无搜索内容"></ElEmpty>
       </slot>
 
       <div class="footer">
-        <Button style="background-color: rgba(0, 179, 204, .3);">
+        <Button style="background-color: rgba(0, 179, 204, .3);" @click.native="handleResetForm">
           重置
         </Button>
-        <Button>
+        <Button @click.native="handleSearch">
           搜索
         </Button>
       </div>
@@ -27,6 +28,7 @@
 <script>
 import Button from '@screen/components/Buttons/Button.vue';
 import Form from '@screen/components/FormConfig';
+import { cloneDeep } from "lodash"
 
 export default {
   name: 'InputSearch',
@@ -55,7 +57,6 @@ export default {
     }
   },
   emit: [
-    'handleReset',
     "handleSearch"
   ],
   computed: {
@@ -72,6 +73,14 @@ export default {
       if (this.width) return;
 
       this.width = this.$refs.ReferenceInputRef.getBoundingClientRect().width
+    },
+    handleResetForm() {
+      this.$refs.FormConfigRef?.reset();
+
+      this.$emit('handleSearch', cloneDeep(this.$refs.FormConfigRef?.formData));
+    },
+    handleSearch() {
+      this.$emit('handleSearch', cloneDeep(this.$refs.FormConfigRef?.formData));
     }
   }
 }
@@ -86,6 +95,7 @@ div.el-popper.global-input-search-popover {
     align-items: center;
     justify-content: flex-end;
     gap: 9px;
+    margin-top: 15px;
   }
 }
 </style>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/businessDataManagement/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/businessDataManagement/index.vue
index 48f42865..7e417934 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/businessDataManagement/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/businessDataManagement/index.vue
@@ -20,7 +20,6 @@
 import Tabs from '@screen/components/Tabs/index.vue';
 import Pagination from '@screen/components/Pagination.vue';
 
-
 import DutyOfficer from "./views/dutyOfficer/index.vue";
 import EmergencyAgencies from "./views/emergencyAgencies/index.vue";
 import JurisdictionalManagement from "./views/jurisdictionalManagement/index.vue";
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/FormEvent/PresetFormItems.js b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/FormEvent/PresetFormItems.js
index de4f6df8..d71bdd63 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/FormEvent/PresetFormItems.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/FormEvent/PresetFormItems.js
@@ -611,3 +611,15 @@ export const emptyLine = {
   key: "key222",
   type: "empty",
 };
+
+export const eventSources = {
+  label: "事件源:",
+  key: "key999999999",
+  type: "input",
+};
+
+export const eventType = {
+  label: "事件类型:",
+  key: "事件类型",
+  type: "input",
+};
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/data.js b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/data.js
index 3bda8597..840527ed 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/data.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/data.js
@@ -1,3 +1,5 @@
+import * as PresetFormItems from "@screen/pages/control/event/event/FormEvent/PresetFormItems.js";
+
 export const tabMap = {
   AlarmEvents: {
     state: 5,
@@ -20,3 +22,26 @@ export const tabMap = {
     text: "处置记录",
   },
 };
+
+export const searchFormList = [
+  PresetFormItems.eventSources,
+  PresetFormItems.eventType,
+  {
+    label: "时间范围:",
+    key: "key009",
+    required: true,
+    type: "datePicker",
+    options: {
+      type: "daterange",
+    },
+  },
+  {
+    ...PresetFormItems.station,
+    key: "666999",
+    label: "开始桩号:",
+  },
+  {
+    ...PresetFormItems.station,
+    label: "结束桩号:",
+  },
+];
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/index.vue
index dbdaec32..f2a6d796 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/index.vue
@@ -23,9 +23,9 @@
           </template>
           刷新
         </ButtonGradient>
-
       </div>
-      <InputSearch style="width: 402px;" />
+
+      <InputSearch style="width: 402px;" :formList="searchFormList" @handleSearch="handleSearch" />
     </div>
 
     <!-- 内容 -->
@@ -55,7 +55,7 @@ import Pagination from '@screen/components/Pagination.vue';
 import InputSearch from '@screen/components/InputSearch/index.vue';
 import EventDetailDialog from "./EventDetailDialog/index";
 import FormEvent from "./FormEvent/index";
-import { tabMap } from "./data";
+import { tabMap, searchFormList } from "./data";
 
 function getRandomData(min = 1, max = 15) {
   return Math.floor(Math.random() * (max - min + 1)) + min
@@ -84,6 +84,7 @@ export default {
   data() {
     return {
       data: getMockData(),
+      searchFormList,
 
       activeName: "AlarmEvents",
       panels: [
@@ -132,6 +133,9 @@ export default {
     },
     handleClose() {
       this.eventDetailDialogVisible = false;
+    },
+    handleSearch(data) {
+      console.log(data)
     }
   }
 }