select

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

@@ -49,11 +49,27 @@ const dateOptions = [
   }
 ];
 
-const defineDate = ref<[Date, Date] | ''>('');
+type PromptType = {
+  permission?: 0 | 1 | 2 | 3;
+  date?: 0 | 1 | 2;
+  sliceDate: [Date, Date];
+};
 
-const bulletinPrompt = reactive({ permission: undefined, date: undefined });
-const summaryPrompt = reactive({ permission: undefined, date: undefined });
-const stagePrompt = reactive({ permission: undefined, date: undefined });
+const bulletinPrompt = reactive<PromptType>({
+  permission: undefined,
+  date: undefined,
+  sliceDate: [new Date(), new Date()]
+});
+const summaryPrompt = reactive<PromptType>({
+  permission: undefined,
+  date: undefined,
+  sliceDate: [new Date(), new Date()]
+});
+const stagePrompt = reactive<PromptType>({
+  permission: undefined,
+  date: undefined,
+  sliceDate: [new Date(), new Date()]
+});
 
 const requestData = reactive<{
   bulletin: BulletinData['data'] | null;
@@ -104,10 +120,10 @@ const queryStage = async (payload?: RequestProps) => {
 
 watchEffect(() => {
   queryBulletin({
-    ...(bulletinPrompt.date === 'defineDate'
+    ...(bulletinPrompt.date === ('ignore' as any)
       ? {
-          startDate: dayjs(defineDate.value[0]).valueOf(),
-          endData: dayjs(defineDate.value[1]).valueOf()
+          startDate: dayjs(bulletinPrompt.sliceDate[0]).format('YYYY-MM-DD'),
+          endData: dayjs(bulletinPrompt.sliceDate[1]).format('YYYY-MM-DD')
         }
       : { dateType: bulletinPrompt.date }),
     queryType: bulletinPrompt.permission
@@ -116,10 +132,10 @@ watchEffect(() => {
 
 watchEffect(() => {
   queryStage({
-    ...(stagePrompt.date === 'defineDate'
+    ...(stagePrompt.date === ('ignore' as any)
       ? {
-          startDate: dayjs(defineDate.value[0]).valueOf(),
-          endData: dayjs(defineDate.value[1]).valueOf()
+          startDate: dayjs(stagePrompt.sliceDate[0]).format('YYYY-MM-DD'),
+          endData: dayjs(stagePrompt.sliceDate[1]).format('YYYY-MM-DD')
         }
       : { dateType: stagePrompt.date }),
     queryType: stagePrompt.permission
@@ -128,22 +144,29 @@ watchEffect(() => {
 
 watchEffect(() => {
   querySummary({
-    ...(summaryPrompt.date === 'defineDate'
+    ...(summaryPrompt.date === ('ignore' as any)
       ? {
-          startDate: dayjs(defineDate.value[0]).valueOf(),
-          endData: dayjs(defineDate.value[1]).valueOf()
+          startDate: dayjs(summaryPrompt.sliceDate[0]).format('YYYY-MM-DD'),
+          endData: dayjs(summaryPrompt.sliceDate[1]).format('YYYY-MM-DD')
         }
       : { dateType: summaryPrompt.date }),
     queryType: summaryPrompt.permission
   });
 });
+
+watchEffect(() => {
+  console.log(
+    bulletinPrompt.date,
+    '-----',
+    bulletinPrompt.sliceDate,
+    '88888888---watchEffect'
+  );
+});
 </script>
 
 <template>
-  <div
-    class="m-5 bg-white min-h-full p-4 rounded relative flex gap-12 items-start"
-  >
-    <section class="flex-[4]">
+  <div class="m-5 bg-white min-h-full p-4 rounded">
+    <section>
       <div class="flex gap-3 mb-4">
         <div class="w-40">
           <el-select
@@ -171,7 +194,20 @@ watchEffect(() => {
               :label="date.label"
               :value="date.value"
             />
-            <el-option v-if="defineDate" label="自定义" value="defineDate" />
+            <el-option label="自定义" value="ignore">
+              <div class="flex gap-2 w-80">
+                <el-date-picker
+                  size="small"
+                  :clearable="false"
+                  type="daterange"
+                  class="w-12"
+                  v-model="bulletinPrompt.sliceDate"
+                  start-placeholder="开始日期"
+                  end-placeholder="结束日期"
+                />
+                <el-button size="small" type="primary">确认</el-button>
+              </div>
+            </el-option>
           </el-select>
         </div>
       </div>
@@ -270,11 +306,20 @@ watchEffect(() => {
                   :label="date.label"
                   :value="date.value"
                 />
-                <el-option
-                  v-if="defineDate"
-                  label="自定义"
-                  value="defineDate"
-                />
+                <el-option label="自定义" value="ignore">
+                  <div class="flex gap-2 w-80">
+                    <el-date-picker
+                      size="small"
+                      :clearable="false"
+                      type="daterange"
+                      class="w-12"
+                      v-model="summaryPrompt.sliceDate"
+                      start-placeholder="开始日期"
+                      end-placeholder="结束日期"
+                    />
+                    <el-button size="small" type="primary">确认</el-button>
+                  </div>
+                </el-option>
               </el-select>
             </div>
           </div>
@@ -366,11 +411,20 @@ watchEffect(() => {
                   :label="date.label"
                   :value="date.value"
                 />
-                <el-option
-                  v-if="defineDate"
-                  label="自定义"
-                  value="defineDate"
-                />
+                <el-option label="自定义" value="ignore">
+                  <div class="flex gap-2 w-80">
+                    <el-date-picker
+                      size="small"
+                      :clearable="false"
+                      type="daterange"
+                      class="w-12"
+                      v-model="stagePrompt.sliceDate"
+                      start-placeholder="开始日期"
+                      end-placeholder="结束日期"
+                    />
+                    <el-button size="small" type="primary">确认</el-button>
+                  </div>
+                </el-option>
               </el-select>
             </div>
           </div>
@@ -380,7 +434,7 @@ watchEffect(() => {
         </div>
       </div>
     </section>
-    <nav class="flex-1 min-w-60 sticky right-0 top-9 max-lg:hidden">
+    <!-- <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 }}
@@ -399,6 +453,6 @@ watchEffect(() => {
           />
         </div>
       </div>
-    </nav>
+    </nav> -->
   </div>
 </template>