select blur

fhKeeper/formulahousekeeper/customerBuler-crm/src/pages/analysis/index.vue

@@ -4,7 +4,7 @@ import TrendCard from './components/TrendCard.vue';
 import SimpleCard from './components/SimpleCard.vue';
 import Divider from './components/Divider.vue';
 import Echarts from '@/components/ReEcharts/index.vue';
-import { EChartsOption } from 'echarts';
+import { EChartsOption, use } from 'echarts';
 import { dayjs } from 'element-plus';
 import {
   getSummaryData,
@@ -55,6 +55,10 @@ type PromptType = {
   sliceDate: [Date, Date];
 };
 
+const select1 = ref<HTMLDivElement>();
+const select2 = ref<HTMLDivElement>();
+const select3 = ref<HTMLDivElement>();
+
 const bulletinPrompt = reactive<PromptType>({
   permission: 0,
   date: 0,
@@ -178,12 +182,13 @@ watchEffect(() => {
         </div>
         <div class="w-40">
           <el-select
+            ref="select1"
             size="small"
             :model-value="bulletinPrompt.date"
             @change="(value) => (bulletinPrompt.date = value)"
           >
             <el-option v-for="date in dateOptions" :label="date.label" :value="date.value" />
-            <el-option label="自定义" value="ignore">
+            <el-option label="自定义" value="ignore" disabled>
               <div class="flex gap-2 w-80">
                 <el-date-picker
                   size="small"
@@ -194,7 +199,7 @@ watchEffect(() => {
                   start-placeholder="开始日期"
                   end-placeholder="结束日期"
                 />
-                <el-button size="small" type="primary">确认</el-button>
+                <el-button size="small" type="primary" @click="select1?.blur">确认</el-button>
               </div>
             </el-option>
           </el-select>
@@ -271,13 +276,14 @@ watchEffect(() => {
             </div>
             <div class="w-40">
               <el-select
+                ref="select2"
                 clearable
                 size="small"
                 :model-value="summaryPrompt.date"
                 @change="(value) => (summaryPrompt.date = value)"
               >
                 <el-option v-for="date in dateOptions" :label="date.label" :value="date.value" />
-                <el-option label="自定义" value="ignore">
+                <el-option label="自定义" value="ignore" disabled>
                   <div class="flex gap-2 w-80">
                     <el-date-picker
                       size="small"
@@ -288,7 +294,7 @@ watchEffect(() => {
                       start-placeholder="开始日期"
                       end-placeholder="结束日期"
                     />
-                    <el-button size="small" type="primary">确认</el-button>
+                    <el-button size="small" type="primary" @click="select2?.blur">确认</el-button>
                   </div>
                 </el-option>
               </el-select>
@@ -363,13 +369,14 @@ watchEffect(() => {
             </div>
             <div class="w-40">
               <el-select
+                ref="select3"
                 clearable
                 size="small"
                 :model-value="stagePrompt.date"
                 @change="(value) => (stagePrompt.date = value)"
               >
                 <el-option v-for="date in dateOptions" :label="date.label" :value="date.value" />
-                <el-option label="自定义" value="ignore">
+                <el-option label="自定义" value="ignore" disabled>
                   <div class="flex gap-2 w-80">
                     <el-date-picker
                       size="small"
@@ -380,7 +387,7 @@ watchEffect(() => {
                       start-placeholder="开始日期"
                       end-placeholder="结束日期"
                     />
-                    <el-button size="small" type="primary">确认</el-button>
+                    <el-button size="small" type="primary" @click="select3?.blur">确认</el-button>
                   </div>
                 </el-option>
               </el-select>
@@ -392,25 +399,5 @@ watchEffect(() => {
         </div>
       </div>
     </section>
-    <!-- <nav class="flex-1 min-w-60 sticky right-0 top-9 max-lg:hidden">
-      <div class="border border-gray-200 rounded w-3/4 text-sm text-gray-500">
-        <div class="p-2" v-for="primission in permissionOptions">
-          {{ primission.label }}
-        </div>
-      </div>
-      <div class="border border-gray-200 rounded text-sm text-gray-500 mt-4">
-        <div class="p-2" v-for="date in dateOptions">{{ date.label }}</div>
-        <div class="p-2">
-          <div>自定义</div>
-          <el-date-picker
-            type="daterange"
-            class="max-w-full mt-2"
-            v-model="defineDate"
-            start-placeholder="开始日期"
-            end-placeholder="结束日期"
-          />
-        </div>
-      </div>
-    </nav> -->
   </div>
 </template>