search input 组件提交

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() {
+    data: {
-    return {
+      type: Object,
-      formData: {}
+      default: () => ({})
-    }
     }
+  },
+  model: {
+    prop: 'data',
+    event: "update:value"
+  },
 }
 </script>
 

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 }) => {
+    this.reset();
-      prev[key] = defaultData || null;
-
-      return prev
-    }, {})
   },
   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}`;
 

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;
+  }, {});
+}

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());
+}

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" />
+        <Form v-if="formList && formList.length" class="form" ref="FormConfigRef" :formList="formList"
-        <ElEmpty description="暂无搜索内容"></ElEmpty>
+          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>

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";

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",
+};

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: "结束桩号:",
+  },
+];

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)
     }
   }
 }