perf: 修改排队数据时间选择器

admin_2/src/pages/engineSearch/components/Search copy 2.vue

+<template>
+  <div
+    class="search mb-[15px] flex h-[170px] w-full flex-col items-center justify-around"
+  >
+    <div class="flex gap-10">
+      <router-link v-for="(v, i) in subMenus" :key="i" :to="v.path">
+        {{ v.meta.title }}
+      </router-link>
+    </div>
+    <div class="flex items-center justify-center gap-2">
+      <el-form ref="form" size="small" inline :model="form">
+        <el-form-item prop="type">
+          <el-select
+            style="width: 100px"
+            v-model="form.type"
+            placeholder="请选择"
+          >
+            <el-option label="按年" value="year"></el-option>
+            <el-option label="按月" value="month"></el-option>
+            <el-option label="按日" value="day"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item prop="year" v-if="form.type == 'year'">
+          <el-date-picker
+            style="width: 150px"
+            v-model="form.year"
+            type="year"
+            value-format="yyyy"
+            placeholder="选择年"
+          >
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item prop="month" v-if="form.type == 'month'">
+          <el-date-picker
+            style="width: 150px"
+            v-model="form.month"
+            type="month"
+            value-format="yyyy-MM"
+            placeholder="选择月"
+          >
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item prop="day" v-if="form.type == 'day'">
+          <el-date-picker
+            style="width: 150px"
+            v-model="form.day"
+            type="date"
+            value-format="yyyy-MM-dd"
+            placeholder="选择日"
+          >
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item
+          prop="businessName"
+          v-if="$route.path == '/enginesearch/queueupdata'"
+        >
+          <el-select
+            style="width: 150px"
+            v-model="form.businessName"
+            placeholder="请选择业务"
+            clearable
+            filterable
+          >
+            <el-option
+              v-for="v in businessList"
+              :key="v.id"
+              :label="v.businessName"
+              :value="v.businessName"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item prop="pjOption" v-else>
+          <el-select
+            style="width: 150px"
+            v-model="form.pjOption"
+            placeholder="请选择评价选项"
+            clearable
+            filterable
+          >
+            <el-option
+              v-for="(v, i) in pjOption"
+              :key="i"
+              :label="v"
+              :value="v"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item prop="deptName">
+          <el-select
+            style="width: 150px"
+            v-model="form.deptName"
+            placeholder="请选择部门"
+            clearable
+            filterable
+          >
+            <el-option
+              v-for="v in deptList"
+              :key="v.id"
+              :label="v.name"
+              :value="v.name"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item prop="windowName">
+          <el-select
+            style="width: 150px"
+            v-model="form.windowName"
+            placeholder="请选择窗口"
+            clearable
+            filterable
+          >
+            <el-option
+              v-for="v in windowList"
+              :key="v.id"
+              :label="`${v.name}-${v.fromnum}`"
+              :value="v.fromnum"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="handleSearch">检索</el-button>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="$router.push('/engine')">返回</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState } from "vuex";
+import { findBottomSubarrays } from "@/utils";
+let pjOption = ["非常满意", "满意", "基本满意", "不满意", "非常不满意"];
+export default {
+  components: {},
+  data() {
+    return {
+      pjOption,
+      subMenus: [],
+      form: {
+        type: "year",
+        businessName: "",
+        deptName: "",
+        windowName: "",
+        year: "",
+        month: "",
+        day: "",
+        pjOption: "",
+      },
+    };
+  },
+  computed: {
+    ...mapState("user", ["businessList", "deptList", "windowList"]),
+    activeKey() {
+      return this.$route.path;
+    },
+  },
+  created() {
+    this.getSubMenus();
+  },
+  mounted() {},
+  methods: {
+    changeRouter(e) {
+      this.$router.push(e.name);
+    },
+    // 获取当前顶层路由下的所有子路由
+    getSubMenus() {
+      let path = this.$route?.meta.parentPath
+        ? this.$route.meta.parentPath
+        : this.$route.path;
+      let options = this.$router.options.routes[0].children;
+      let curRouters = options.filter((v) => v.path == path);
+      this.subMenus = findBottomSubarrays(curRouters).filter(
+        (v) => !v.meta.hidden
+      );
+    },
+    handleSearch() {
+      this.$emit("search", this.form);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.search {
+  flex-shrink: 0;
+  background: url("@/assets/img/engineSearch_bg.svg") no-repeat center / 100%
+    100%;
+  a {
+    color: rgba(254, 254, 254, 0.65);
+  }
+  .router-link-active {
+    color: #fff;
+    font-weight: 600;
+  }
+}
+</style>

admin_2/src/pages/engineSearch/components/date-picker/src/panel/date.vue

@@ -6,7 +6,7 @@
   >
     <div
       v-show="visible"
-      class="el-picker-panel el-date-picker"
+      class="el-picker-panel el-date-picker el-popper"
       :class="[
         {
           'has-sidebar': $slots.sidebar || shortcuts,
@@ -218,30 +218,6 @@ export default {
   mixins: [Locale],
 
   directives: { Clickoutside },
-  data() {
-    return {
-      popperClass: "",
-      date: new Date(),
-      value: "",
-      defaultValue: null, // use getDefaultValue() for time computation
-      defaultTime: null,
-      showTime: false,
-      selectionMode: "day",
-      shortcuts: "",
-      visible: true,
-      currentView: "date",
-      disabledDate: "",
-      cellClassName: "",
-      selectableRange: [],
-      firstDayOfWeek: 7,
-      showWeekNumber: false,
-      timePickerVisible: false,
-      format: "",
-      arrowControl: false,
-      userInputDate: null,
-      userInputTime: null,
-    };
-  },
 
   watch: {
     showTime(val) {
@@ -659,6 +635,31 @@ export default {
     ElButton,
   },
 
+  data() {
+    return {
+      popperClass: "",
+      date: new Date(),
+      value: "",
+      defaultValue: null, // use getDefaultValue() for time computation
+      defaultTime: null,
+      showTime: false,
+      selectionMode: "day",
+      shortcuts: "",
+      visible: true,
+      currentView: "date",
+      disabledDate: "",
+      cellClassName: "",
+      selectableRange: [],
+      firstDayOfWeek: 7,
+      showWeekNumber: false,
+      timePickerVisible: false,
+      format: "",
+      arrowControl: false,
+      userInputDate: null,
+      userInputTime: null,
+    };
+  },
+
   computed: {
     year() {
       return this.date.getFullYear();

admin_2/src/pages/engineSearch/components/date-picker/src/picker.vue

 <template>
-  <el-input
-    class="el-date-editor"
-    :class="'el-date-editor--' + type"
-    :readonly="
-      !editable ||
-      readonly ||
-      type === 'dates' ||
-      type === 'week' ||
-      type === 'years' ||
-      type === 'months'
-    "
-    :disabled="pickerDisabled"
-    :size="pickerSize"
-    :name="name"
-    v-bind="firstInputId"
-    v-if="!ranged"
-    v-clickoutside="handleClose"
-    :placeholder="placeholder"
-    @focus="handleFocus"
-    @keydown.native="handleKeydown"
-    :value="displayValue"
-    @input="(value) => (userInput = value)"
-    @change="handleChange"
-    @mouseenter.native="handleMouseEnter"
-    @mouseleave.native="showClose = false"
-    :validateEvent="false"
-    ref="reference"
-  >
-    <i
-      slot="prefix"
-      class="el-input__icon"
-      :class="triggerClass"
-      @click="handleFocus"
-    >
-    </i>
-    <i
-      slot="suffix"
-      class="el-input__icon"
-      @click="handleClickIcon"
-      :class="[showClose ? '' + clearIcon : '']"
-      v-if="haveTrigger"
-    >
-    </i>
-  </el-input>
-  <div
-    class="el-date-editor el-range-editor el-input__inner"
-    :class="[
-      'el-date-editor--' + type,
-      pickerSize ? `el-range-editor--${pickerSize}` : '',
-      pickerDisabled ? 'is-disabled' : '',
-      pickerVisible ? 'is-active' : '',
-    ]"
-    @click="handleRangeClick"
-    @mouseenter="handleMouseEnter"
-    @mouseleave="showClose = false"
-    @keydown="handleKeydown"
-    ref="reference"
-    v-clickoutside="handleClose"
-    v-else
-  >
-    <i :class="['el-input__icon', 'el-range__icon', triggerClass]"></i>
-    <input
-      autocomplete="off"
-      :placeholder="startPlaceholder"
-      :value="displayValue && displayValue[0]"
-      :disabled="pickerDisabled"
-      v-bind="firstInputId"
-      :readonly="!editable || readonly"
-      :name="name && name[0]"
-      @input="handleStartInput"
-      @change="handleStartChange"
-      @focus="handleFocus"
-      class="el-range-input"
-    />
-    <slot name="range-separator">
-      <span class="el-range-separator">{{ rangeSeparator }}</span>
-    </slot>
-    <input
-      autocomplete="off"
-      :placeholder="endPlaceholder"
-      :value="displayValue && displayValue[1]"
-      :disabled="pickerDisabled"
-      v-bind="secondInputId"
-      :readonly="!editable || readonly"
-      :name="name && name[1]"
-      @input="handleEndInput"
-      @change="handleEndChange"
-      @focus="handleFocus"
-      class="el-range-input"
-    />
-    <i
-      @click="handleClickIcon"
-      v-if="haveTrigger"
-      :class="[showClose ? '' + clearIcon : '']"
-      class="el-input__icon el-range__close-icon"
-    >
-    </i>
-  </div>
+  <div class="w-full" ref="reference"></div>
 </template>
 
 <script>
@@ -109,25 +12,25 @@ import {
   isDateObject,
   getWeekNumber,
 } from "element-ui/src/utils/date-util";
-import Popper from "element-ui/src/utils/vue-popper";
+// import Popper from "element-ui/src/utils/vue-popper";
 import Emitter from "element-ui/src/mixins/emitter";
 import ElInput from "element-ui/packages/input";
-import merge from "element-ui/src/utils/merge";
-
-const NewPopper = {
-  props: {
-    appendToBody: Popper.props.appendToBody,
-    offset: Popper.props.offset,
-    boundariesPadding: Popper.props.boundariesPadding,
-    arrowOffset: Popper.props.arrowOffset,
-    transformOrigin: Popper.props.transformOrigin,
-  },
-  methods: Popper.methods,
-  data() {
-    return merge({ visibleArrow: true }, Popper.data);
-  },
-  beforeDestroy: Popper.beforeDestroy,
-};
+// import merge from "element-ui/src/utils/merge";
+
+// const NewPopper = {
+//   props: {
+//     appendToBody: Popper.props.appendToBody,
+//     offset: Popper.props.offset,
+//     boundariesPadding: Popper.props.boundariesPadding,
+//     arrowOffset: Popper.props.arrowOffset,
+//     transformOrigin: Popper.props.transformOrigin,
+//   },
+//   methods: Popper.methods,
+//   data() {
+//     return merge({ visibleArrow: true }, Popper.data);
+//   },
+//   beforeDestroy: Popper.beforeDestroy,
+// };
 
 const DEFAULT_FORMATS = {
   date: "yyyy-MM-dd",
@@ -384,7 +287,7 @@ const validator = function (val) {
 };
 
 export default {
-  mixins: [Emitter, NewPopper],
+  mixins: [Emitter],
 
   inject: {
     elForm: {
@@ -666,6 +569,9 @@ export default {
 
     this.$on("fieldReset", this.handleFieldReset);
   },
+  mounted() {
+    this.showPicker();
+  },
 
   methods: {
     focus() {
@@ -915,7 +821,7 @@ export default {
       if (this.picker) {
         this.picker.resetView && this.picker.resetView();
         this.pickerVisible = this.picker.visible = false;
-        this.destroyPopper();
+        // this.destroyPopper();
       }
     },
 
@@ -926,7 +832,7 @@ export default {
       }
       this.pickerVisible = this.picker.visible = true;
 
-      this.updatePopper();
+      // this.updatePopper();
 
       this.picker.value = this.parsedValue;
       this.picker.resetView && this.picker.resetView();
@@ -994,21 +900,21 @@ export default {
       this.picker.$on("dodestroy", this.doDestroy);
       this.picker.$on("pick", (date = "", visible = false) => {
         this.userInput = null;
-        this.pickerVisible = this.picker.visible = visible;
+        // this.pickerVisible = this.picker.visible = visible;
         this.emitInput(date);
         this.picker.resetView && this.picker.resetView();
       });
 
-      this.picker.$on("select-range", (start, end, pos) => {
-        if (this.refInput.length === 0) return;
-        if (!pos || pos === "min") {
-          this.refInput[0].setSelectionRange(start, end);
-          this.refInput[0].focus();
-        } else if (pos === "max") {
-          this.refInput[1].setSelectionRange(start, end);
-          this.refInput[1].focus();
-        }
-      });
+      // this.picker.$on("select-range", (start, end, pos) => {
+      //   if (this.refInput.length === 0) return;
+      //   if (!pos || pos === "min") {
+      //     this.refInput[0].setSelectionRange(start, end);
+      //     this.refInput[0].focus();
+      //   } else if (pos === "max") {
+      //     this.refInput[1].setSelectionRange(start, end);
+      //     this.refInput[1].focus();
+      //   }
+      // });
     },
 
     unmountPicker() {