feat: 报警信息管理-查询地点折叠选项

src/views/datamanager/alertformdata/components/common/QueryForm.vue

@@ -3,28 +3,63 @@
     <el-form :model="queryForm" label-width="auto" :inline="true" ref="formRef">
       <div class="select-group">
         <el-form-item label="问题来源：" prop="source">
-          <el-select v-model="queryForm.source" placeholder="全部" clearable @change="handleSelectChange">
-            <el-option v-for="item in sourceOptions" :key="item.value" :label="item.label" :value="item.value" />
+          <el-select
+            v-model="queryForm.source"
+            placeholder="全部"
+            clearable
+            @change="handleSelectChange"
+          >
+            <el-option
+              v-for="item in sourceOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
           </el-select>
         </el-form-item>
         <el-form-item label="类型：" prop="issueType">
-          <el-select v-model="queryForm.issueType" placeholder="全部" clearable :disabled="typeDisable">
+          <el-select
+            v-model="queryForm.issueType"
+            placeholder="全部"
+            clearable
+            :disabled="typeDisable"
+          >
             <el-option v-for="item in options" :label="item.name" :value="item.id" />
           </el-select>
         </el-form-item>
         <el-form-item label="地点：" prop="workspaceId">
-          <el-cascader v-model="workLocation" :options="locationOptions" :props="location" clearable
-            @change="handleCascaderChange" />
+          <el-cascader
+            v-model="workLocation"
+            :options="locationOptions"
+            :props="location"
+            clearable
+            collapse-tags
+            @change="handleCascaderChange"
+          />
         </el-form-item>
         <el-form-item label="状态：" prop="issueState">
           <el-select v-model="tempState" clearable @change="handleIssueStateChange">
-            <el-option v-for="item in issueStateOptions" :key="item.value" :label="item.label" :value="item.value" />
+            <el-option
+              v-for="item in issueStateOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
           </el-select>
         </el-form-item>
         <el-form-item label="日期：">
-          <el-date-picker v-model="dateRange" type="daterange" range-separator="~" start-placeholder="开始时间"
-            end-placeholder="结束时间" clearable unlink-panels value-format="YYYY-MM-DD HH:mm:ss.SSS"
-            :default-time="defaultTime" @change="handleDateChange" />
+          <el-date-picker
+            v-model="dateRange"
+            type="daterange"
+            range-separator="~"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
+            clearable
+            unlink-panels
+            value-format="YYYY-MM-DD HH:mm:ss.SSS"
+            :default-time="defaultTime"
+            @change="handleDateChange"
+          />
         </el-form-item>
       </div>
       <div class="btn-group">
@@ -38,144 +73,140 @@
 </template>
 
 <script setup lang="ts">
-import type { FormInstance } from 'element-plus';
-import { reactive, ref } from 'vue';
-import { sourceOptions, issueStateOptions } from './constant.question';
-
-interface Props {
-  // isShowTab: boolean       // true展示数据，false默认数据
-  aiOptions: Array<any>
-  manualOptions: Array<any>
-  locationOptions: Array<any>
-};
-const props = defineProps<Props>();
-const emits = defineEmits(['onSearch', 'onReset']);
-
-interface QueryModel {
-  pageNumber: number,
-  pageSize: number,
-  source?: number,         // 来源
-  issueType?: number,      // 类型
-  workspaceId?: number[],  // 地点=工位id
-  issueState?: number[],   // 状态
-  startTime?: string,      // 开始时间（默认）
-  endTime?: string,        // 结束时间（默认）
-};
-
-const formRef = ref<FormInstance>();
-const queryForm = reactive<QueryModel>({
-  pageNumber: 1,
-  pageSize: 10,
-});
-
-interface OptionModel {
-  id: number,
-  name: string
-};
-
-const options = ref<OptionModel[]>([]);
-const typeDisable = ref(true);
-const location = { multiple: true };  // 级联选择器（打开多选）
-const workLocation = ref([]);   // 级联选择器，为二维数组（提取workspaceId）
-const tempState = ref('');  // 状态，字符串转number[]
-const dateRange = ref([]);  // 时间段，拆分成startTime/endTime
-const defaultTime = ref<[Date, Date]>([
-  new Date(2000, 1, 1, 0, 0, 0),
-  new Date(2000, 2, 1, 23, 59, 59),
-])
-
-const handleSearch = () => {
-  emits('onSearch', queryForm);
-};
-
-const handleReset = () => {
-  typeDisable.value = true;
-  workLocation.value = [];
-  tempState.value = '';
-  dateRange.value = [];
-  Reflect.deleteProperty(queryForm, "startTime");
-  Reflect.deleteProperty(queryForm, "endTime");
-  formRef.value?.resetFields();
-  emits('onReset', queryForm);
-};
-
-const handleSelectChange = () => {
-  if (Number(queryForm.source) === 1) {
-    typeDisable.value = false;
-    options.value = props.aiOptions;
+  import type { FormInstance } from 'element-plus';
+  import { reactive, ref } from 'vue';
+  import { sourceOptions, issueStateOptions } from './constant.question';
+
+  interface Props {
+    // isShowTab: boolean       // true展示数据，false默认数据
+    aiOptions: Array<any>;
+    manualOptions: Array<any>;
+    locationOptions: Array<any>;
   }
-  else if (Number(queryForm.source) === 2) {
-    typeDisable.value = false;
-    options.value = props.manualOptions;
+  const props = defineProps<Props>();
+  const emits = defineEmits(['onSearch', 'onReset']);
+
+  interface QueryModel {
+    pageNumber: number;
+    pageSize: number;
+    source?: number; // 来源
+    issueType?: number; // 类型
+    workspaceId?: number[]; // 地点=工位id
+    issueState?: number[]; // 状态
+    startTime?: string; // 开始时间（默认）
+    endTime?: string; // 结束时间（默认）
   }
-  else {
-    typeDisable.value = true;
-    options.value = [];
-    queryForm.issueType = undefined;
-  }
-};
 
-const handleCascaderChange = () => {
-  const arr = [];
-  workLocation.value.forEach((item) => {
-    arr.push(item[1]);
+  const formRef = ref<FormInstance>();
+  const queryForm = reactive<QueryModel>({
+    pageNumber: 1,
+    pageSize: 10,
   });
-  queryForm.workspaceId = arr;
-};
-
-const handleIssueStateChange = () => {
-  if (tempState.value)
-    queryForm.issueState = JSON.parse(tempState.value);
-};
-
-const handleDateChange = () => {
-  if (dateRange.value != null) {
-    queryForm.startTime = dateRange.value[0];
-    queryForm.endTime = dateRange.value[1];
-  } else {
-    Reflect.deleteProperty(queryForm, "startTime");
-    Reflect.deleteProperty(queryForm, "endTime");
+
+  interface OptionModel {
+    id: number;
+    name: string;
   }
-};
+
+  const options = ref<OptionModel[]>([]);
+  const typeDisable = ref(true);
+  const location = { multiple: true }; // 级联选择器（打开多选）
+  const workLocation = ref([]); // 级联选择器，为二维数组（提取workspaceId）
+  const tempState = ref(''); // 状态，字符串转number[]
+  const dateRange = ref([]); // 时间段，拆分成startTime/endTime
+  const defaultTime = ref<[Date, Date]>([
+    new Date(2000, 1, 1, 0, 0, 0),
+    new Date(2000, 2, 1, 23, 59, 59),
+  ]);
+
+  const handleSearch = () => {
+    emits('onSearch', queryForm);
+  };
+
+  const handleReset = () => {
+    typeDisable.value = true;
+    workLocation.value = [];
+    tempState.value = '';
+    dateRange.value = [];
+    Reflect.deleteProperty(queryForm, 'startTime');
+    Reflect.deleteProperty(queryForm, 'endTime');
+    formRef.value?.resetFields();
+    emits('onReset', queryForm);
+  };
+
+  const handleSelectChange = () => {
+    if (Number(queryForm.source) === 1) {
+      typeDisable.value = false;
+      options.value = props.aiOptions;
+    } else if (Number(queryForm.source) === 2) {
+      typeDisable.value = false;
+      options.value = props.manualOptions;
+    } else {
+      typeDisable.value = true;
+      options.value = [];
+      queryForm.issueType = undefined;
+    }
+  };
+
+  const handleCascaderChange = () => {
+    const arr = [];
+    workLocation.value.forEach((item) => {
+      arr.push(item[1]);
+    });
+    queryForm.workspaceId = arr;
+  };
+
+  const handleIssueStateChange = () => {
+    if (tempState.value) queryForm.issueState = JSON.parse(tempState.value);
+  };
+
+  const handleDateChange = () => {
+    if (dateRange.value != null) {
+      queryForm.startTime = dateRange.value[0];
+      queryForm.endTime = dateRange.value[1];
+    } else {
+      Reflect.deleteProperty(queryForm, 'startTime');
+      Reflect.deleteProperty(queryForm, 'endTime');
+    }
+  };
 </script>
 
 <style scoped lang="scss">
-.el-form {
-  display: flex;
-  justify-content: space-between;
-}
-
-:deep(.el-form--inline .el-form-item) {
-  margin-right: 0;
-}
-
-:deep(.el-form-item__label) {
-  padding: 0;
-}
-
-.select-group {
-  flex: 1;
-}
-
-.btn-group {
-
-  .search-btn {
-    width: 65px;
-    height: 32px;
-    background: #1890FF;
-    border-radius: 2px;
+  .el-form {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  :deep(.el-form--inline .el-form-item) {
+    margin-right: 0;
+  }
+
+  :deep(.el-form-item__label) {
+    padding: 0;
   }
 
-  .reset-btn {
-    width: 65px;
-    height: 32px;
-    border-radius: 2px;
-    border: 1px solid #1890FF;
-    color: #1890FF;
+  .select-group {
+    flex: 1;
   }
-}
 
-.el-select {
-  --el-select-width: 215px;
-}
+  .btn-group {
+    .search-btn {
+      width: 65px;
+      height: 32px;
+      background: #1890ff;
+      border-radius: 2px;
+    }
+
+    .reset-btn {
+      width: 65px;
+      height: 32px;
+      border-radius: 2px;
+      border: 1px solid #1890ff;
+      color: #1890ff;
+    }
+  }
+
+  .el-select {
+    --el-select-width: 215px;
+  }
 </style>