我的布控。四色预警

src/components/aboutTable/Search.vue

@@ -56,10 +56,10 @@
           value-format="YYYY-MM-DD"
         >
         </el-date-picker>
-        
+
         <!-- checkbox -->
         <template v-else-if="item.showType === 'department'">
-          <MOSTY.Department clearable  v-model="item.ssbmdm" />
+          <MOSTY.Department clearable v-model="item.ssbmdm" />
         </template>
         <!-- checkbox -->
         <template v-else-if="item.showType === 'checkbox'">
@@ -67,11 +67,21 @@
             v-if="item.showSelectAll"
             v-model="item.checkAll"
             :indeterminate="item.isIndeterminate"
-            @change=" (val) => { handleCheckAllChange(val, item); }"
-            >全选</el-checkbox>
+            @change="
+              (val) => {
+                handleCheckAllChange(val, item);
+              }
+            "
+            >全选</el-checkbox
+          >
           <el-checkbox-group
             v-model="searchObj[item.prop]"
-            @change=" (val) => { handleCheckedCitiesChange(val, item); }" >
+            @change="
+              (val) => {
+                handleCheckedCitiesChange(val, item);
+              }
+            "
+          >
             <el-checkbox
               v-for="obj in item.options"
               :key="obj.value"
@@ -84,7 +94,12 @@
         <el-radio-group
           v-else-if="item.showType === 'radio'"
           v-model="searchObj[item.prop]"
-          @change="(val) => { handleRadioChange(val, item);}">
+          @change="
+            (val) => {
+              handleRadioChange(val, item);
+            }
+          "
+        >
           <el-radio
             v-for="obj in item.options"
             :key="obj.value"
@@ -118,7 +133,15 @@
 </template>
 
 <script setup>
-import { ref, reactive, watch, watchEffect, nextTick, getCurrentInstance, toRefs } from "vue";
+import {
+  ref,
+  reactive,
+  watch,
+  watchEffect,
+  nextTick,
+  getCurrentInstance,
+  toRefs
+} from "vue";
 import * as MOSTY from "@/components/MyComponents/index";
 const { proxy } = getCurrentInstance();
 const props = defineProps({
@@ -184,7 +207,7 @@ const props = defineProps({
         {
           showType: "defaultTime",
           prop: "timeField",
-          options: [],
+          options: []
         }
       ];
     }
@@ -202,12 +225,13 @@ let loadingPage = ref(false);
 const isShowDate = ref(false);
 const emit = defineEmits(["submit", "reset"]);
 let searchObj = reactive({});
-const timeConfig = reactive({ //时间字典筛选和自定义日期组件相关数据
-  typeValue:"01", //时间字典类型默认
-  timeArry:[], //时间筛选自定义默认值
-})
+const timeConfig = reactive({
+  //时间字典筛选和自定义日期组件相关数据
+  typeValue: "01", //时间字典类型默认
+  timeArry: [] //时间筛选自定义默认值
+});
 //全所或自定义选择按钮
-const slectType = ref('qs');
+const slectType = ref("qs");
 // select 的一些默认配置
 const selectDefault = {
   clearable: true, // 是否可以清空
@@ -324,49 +348,52 @@ const dateShortcuts = [
   }
 ];
 //自定义时间选择 item 配置项  value 选中的值
-const screenSelect = (item,value) => {
-  if(value == "08"){
+const screenSelect = (item, value) => {
+  if (value == "08") {
     searchObj[item.prop] = value;
     isShowDate.value = true;
-  }else{
+  } else {
     timeConfig.typeValue = value;
     searchObj[item.prop] = value;
     submit();
   }
-}
+};
 //自定义时间确定时间
 const chooseDateOk = (item) => {
   timeConfig.typeValue = "08";
-  if(timeConfig.timeArry && timeConfig.timeArry.length){ //选择了时间
+  if (timeConfig.timeArry && timeConfig.timeArry.length) {
+    //选择了时间
     searchObj[item.propStart] = timeConfig.timeArry[0];
     searchObj[item.propEnd] = timeConfig.timeArry[1];
-  }else{ //清空了时间
+  } else {
+    //清空了时间
     searchObj[item.prop] = "01";
     timeConfig.typeValue = "01";
   }
   isShowDate.value = false;
   submit();
-}
+};
 //全所-部门选择回调
 const organizatioHland = (val) => {
-  let item = getArr.find(item=>item.showType == 'qsOrZdy');
+  let item = getArr.find((item) => item.showType == "qsOrZdy");
   searchObj[item.propBm] = val?.data?.orgCode || "";
-  if (!val || val == "") { //清空了部门选择后清空责任区ID
+  if (!val || val == "") {
+    //清空了部门选择后清空责任区ID
     slectType.value = "qs";
     delete searchObj[item.propZrq];
   }
-  submit()
+  submit();
 };
 //全所-责任区回调
 const zrqHland = (val) => {
-  let item = getArr.find(item=>item.showType == 'qsOrZdy');
+  let item = getArr.find((item) => item.showType == "qsOrZdy");
   searchObj[item.propZrq] = val || ""; //责任区选择
   submit();
 };
 //自定义时间取消事件
 const popoverCancel = (item) => {
   isShowDate.value = false;
-}
+};
 // 设置不可选的日期
 const disabledDate = (time) => {
   return time.getTime() > Date.now();
@@ -482,7 +509,7 @@ const submit = () => {
 };
 const reset = () => {
   getArr.forEach((item) => {
-    searchObj[item.prop] = item.defaultVal ;
+    searchObj[item.prop] = item.defaultVal;
   });
   emit("submit", searchObj);
   emit("reset", false);
@@ -536,13 +563,13 @@ watchEffect(() => {
         break;
     }
     loadingPage.value = false;
-    searchObj[item.prop] = item.defaultVal ;
+    searchObj[item.prop] = item.defaultVal;
     return item;
   });
 });
 </script>
- 
-<style lang = "scss" scoped>
+
+<style lang="scss" scoped>
 .pageSearch {
   .box {
     display: flex;
@@ -560,5 +587,4 @@ watchEffect(() => {
     }
   }
 }
-
-</style>
+</style>