综合查询--查询条件变为展开式

src/views/work/Query.vue

@@ -1,7 +1,171 @@
 <template>
     <div class="container">
         <header>
-            <el-form :label-width="120">
+          <transition name="fade-slide">
+            <el-form
+                v-show="!expanded"
+                class="simple-form"
+            >
+              <el-row class="search-flex-row">
+                <el-col>
+                  <el-form-item label="问题录入时间" style="width: 450px">
+                    <date-time-range-picker-ext
+                        v-model="query.crtTime"
+                    />
+                  </el-form-item>
+                </el-col>
+                <el-col>
+                  <el-input
+                      placeholder="事情简要描述"
+                      v-model="query.thingDesc"
+                      clearable
+                      style="width: 400px"
+                  />
+                </el-col>
+
+                <el-col>
+                  <el-tree-select
+                      :data="dictProblemSources"
+                      :props="{ value: 'id' }"
+                      node-key="id"
+                      v-model="query.problemSourcesCode"
+                      clearable
+                      filterable
+                      multiple
+                      collapse-tags
+                      style="width: 200px"
+                      placeholder="问题来源"
+                  />
+                </el-col>
+
+                <el-col>
+                  <el-select
+                      style="width: 200px"
+                      placeholder="专项督察"
+                      clearable
+                      v-model="query.specialSupervision"
+                  >
+                    <el-option
+                        v-for="item in dict.specialSupervision"
+                        :key="item.id"
+                        :label="item.dictLabel"
+                        :value="item.dictValue"
+                    />
+                  </el-select>
+                </el-col>
+
+                <el-col>
+                  <div style="width: 200px">
+                    <depart-tree-select
+                        v-model="query.handleDepartId"
+                        placeholder="办理单位"
+                    />
+                  </div>
+                </el-col>
+
+                <el-col>
+                  <div class="flex gap-4" style="height: 32px">
+                    <el-select
+                        v-model="query.responderKey"
+                        style="width: 120px"
+                        @change="delete query.responderValue"
+                    >
+                      <el-option value="name" label="姓名" />
+                      <el-option value="phone" label="电话" />
+                    </el-select>
+                    <el-input
+                        placeholder="投诉反映人"
+                        v-model="query.responderValue"
+                        clearable
+                        style="width: 325px"
+                    />
+                  </div>
+                </el-col>
+                <el-col>
+                  <el-select
+                      style="width: 193px"
+                      placeholder="办理状态"
+                      clearable
+                      v-model="query.processingStatus"
+                      multiple
+                      collapse-tags
+                  >
+                    <el-option
+                        v-for="item in dict.processingStatus"
+                        :key="item.id"
+                        :label="item.dictLabel"
+                        :value="item.dictValue"
+                    />
+                  </el-select>
+                </el-col>
+                <el-col >
+                    <problem-type-select
+                        style="width: 193px"
+                        :disabled="true"
+                        placeholder="问题类型"
+                        v-model="query.threeLevelCode"
+                        @change="(node) =>handleChangeProblem(node, problem)"
+                    />
+                </el-col>
+
+                <el-col>
+                  <el-select
+                      style="width: 200px"
+                      placeholder="申请延期"
+                      clearable
+                      v-model="query.extensionFlag"
+                  >
+                    <el-option label="已申请" :value="true" />
+                    <el-option label="未申请" :value="false" />
+                  </el-select>
+                </el-col>
+                <el-col>
+                  <el-select
+                      style="width: 200px"
+                      placeholder="核查结论"
+                      clearable
+                      v-model="query.checkStatusCode"
+                      multiple
+                      collapse-tags
+                  >
+                    <el-option
+                        v-for="item in dict.checkStatus"
+                        :key="item.id"
+                        :label="item.dictLabel"
+                        :value="item.dictValue"
+                    />
+                  </el-select>
+                </el-col>
+                <el-col>
+                  <div style="width: 200px">
+                    <el-select
+                        placeholder="处理结果"
+                        :disabled="true"
+                        v-model="query.handleResultCode"
+                        multiple
+                        @change="(val) => handleChangeResultCode(item, val) "
+                        clearable
+                    >
+                      <el-option
+                          v-for="dictItem in dict.handleResult"
+                          :key="dictItem.dictCode"
+                          :value="dictItem.dictValue"
+                          :label="dictItem.dictLabel"
+                      />
+                    </el-select>
+                  </div>
+                </el-col>
+
+              </el-row>
+
+            </el-form>
+          </transition>
+          <transition name="fade-slide">
+            <div v-show="expanded" class="form-collapse-wrapper">
+            <el-form
+                :label-width="120"
+                class="full-form"
+            >
                 <el-row>
                     <el-col :span="6">
                         <el-form-item label="问题发现时间">
@@ -246,6 +410,21 @@
                     </div>
                 </div>
             </el-form>
+            </div>
+          </transition>
+          <div class="toggle-area">
+            <el-button
+                type="primary"
+                link
+                @click="expanded = !expanded"
+            >
+              {{ expanded ? '收起' : '展开查看更多搜索' }}
+              <el-icon class="ml-4">
+                <ArrowUp v-if="expanded" />
+                <ArrowDown v-else />
+              </el-icon>
+            </el-button>
+          </div>
             <div class="flex between mt-20 mb-26">
                 <el-button type="primary" @click="handleExport"
                     >数据导出</el-button
@@ -859,6 +1038,7 @@ import { ProblemSources_XFTS, ProblemSources } from "@/enums/dictEnums";
 import useCatchStore from "@/stores/modules/catch";
 import {computed, watch} from "vue";
 import {getListData} from "@/api/superviseReport/superviseReport";
+import {ArrowDown, ArrowUp} from "@element-plus/icons-vue";
 
 const catchStore = useCatchStore();
 const dict = catchStore.getDicts([
@@ -869,7 +1049,8 @@ const dict = catchStore.getDicts([
     "suspectProblem",
     "policeType",
     "specialSupervision",
-    "approvalFlow"
+    "approvalFlow",
+    "handleResult"
 ]);
 const flowNodes = catchStore.getFlowNodes();
 const dictProblemSources = catchStore.getDictProblemSources();
@@ -1079,8 +1260,26 @@ const reportFiles =  computed(()=>  {
 
 })
 
-
+const expanded = ref(false)
-
+function handleChangeResultCode(item) {
+  if (item.handleResultCode && item.handleResultCode.length > 0) {
+    item.handleResultName = dict.handleResult
+        .filter((obj) => item.handleResultCode.includes(obj.dictValue))
+        .map((obj) => obj.dictLabel)
+        .join("、");
+  } else {
+    item.handleResultName = "";
+  }
+}
+function handleChangeProblem(node, problem) {
+  if (node.level === 3) {
+    problem.threeLevelContent = node.label;
+    problem.oneLevelCode = node.parent.parent.key;
+    problem.oneLevelContent = node.parent.parent.label;
+    problem.twoLevelCode = node.parent.key;
+    problem.twoLevelContent = node.parent.label;
+  }
+}
 </script>
 <style lang="scss" scoped>
 :deep() {
@@ -1091,4 +1290,77 @@ const reportFiles =  computed(()=>  {
         }
     }
 }
+/* 外层容器 */
+.form-collapse-wrapper {
+  overflow: hidden;
+}
+
+/* 进入 / 离开 */
+.collapse-fade-enter-active,
+.collapse-fade-leave-active {
+  transition:
+      max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1),
+      opacity 0.3s ease,
+      transform 0.3s ease;
+}
+
+/* 初始状态 */
+.collapse-fade-enter-from,
+.collapse-fade-leave-to {
+  max-height: 0;
+  opacity: 0;
+  transform: translateY(-6px);
+}
+
+/* 展开完成状态 */
+.collapse-fade-enter-to,
+.collapse-fade-leave-from {
+  max-height: 1200px; /* 大于表单最大高度 */
+  opacity: 1;
+  transform: translateY(0);
+}
+.toggle-area {
+  display: flex;
+  justify-content: center;
+  height: 32px;
+  margin: 8px 0 12px;
+}
+.collapse-fade-enter-active {
+  transition-delay: 0s, 0.1s, 0.1s;
+}
+
+.compact-row {
+  row-gap: 8px;   /* 原来大概是 20px */
+}
+
+.search-flex-row {
+  display: flex;
+  flex-wrap: wrap;      /* 排不下自动换行 */
+  gap: 12px 16px;       /* 行间距 / 列间距 */
+  align-items: center;  /* 垂直对齐 */
+}
+
+.search-flex-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px 16px;
+  align-items: center;
+}
+
+.search-flex-row .el-col {
+  flex: none;
+}
+
+.search-flex-row .el-form-item {
+  display: flex;
+  align-items: center;
+  margin-bottom: 0;
+}
+
+.search-flex-row .el-form-item__label {
+  padding-right: 8px;
+  line-height: 32px;
+  white-space: nowrap;
+}
+
 </style>