From d88c37813a762e0c385d38bf859f84b6d92eb175 Mon Sep 17 00:00:00 2001
From: miaojiale <1123971748@qq.com>
Date: Fri, 28 Apr 2023 17:11:20 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/FormComponents/index.vue | 369 ++++++++++++------------
 src/views/followupquery/index.vue       |   3 +-
 2 files changed, 185 insertions(+), 187 deletions(-)

diff --git a/src/components/FormComponents/index.vue b/src/components/FormComponents/index.vue
index 517921a..20413cd 100644
--- a/src/components/FormComponents/index.vue
+++ b/src/components/FormComponents/index.vue
@@ -10,209 +10,204 @@
     :style="formStyle"
     @submit.native.prevent="handleSearch()"
   >
-    <el-col
-      v-for="(item, index) in forms"
-      v-if="!item.hidden"
-      :key="index"
-      :xs="item.xs ? item.xs : 24"
-      :sm="item.sm ? item.sm : 12"
-      :md="item.md ? item.md : 8"
-      :lg="item.lg ? item.lg : 8"
-      :xl="item.xl ? item.xl : 6"
-    >
-      <el-form-item
-        v-if="item.type != 'btn'"
-        :label="item.label ? item.label + (item.hiddenColon ? '' : '：') : ''"
-        :prop="item.prop"
-        :rules="item.rules"
-        :label-width="item.labelWidth || '110px'"
-      >
-        <!-- 输入框 -->
-        <el-input
-          v-if="item.type === 'input'"
-          :id="item.id ? item.id : ''"
-          v-model="form[item.prop]"
-          :readonly="item.readonly"
-          :disabled="item.disabled"
-          clearable=""
-          :placeholder="item.placeholder"
-          @focus="item.focusFunc ? item.focusFunc($event) : {}"
-          @change="item.func ? item.func($event) : {}"
+    <div v-for="(item, index) in forms" :key="index">
+      <template v-if="!item.hidden">
+        <el-form-item
+          v-if="item.type != 'btn'"
+          :label="item.label ? item.label + (item.hiddenColon ? '' : '：') : ''"
+          :prop="item.prop"
+          :rules="item.rules"
+          :label-width="item.labelWidth || '110px'"
         >
-          <span v-if="item.unit" :slot="item.slot ? item.slot : 'append'">
-            {{ item.unit }}
-          </span>
-        </el-input>
-
-        <template v-if="item.type === 'textarea'">
+          <!-- 输入框 -->
           <el-input
+            v-if="item.type === 'input'"
+            :id="item.id ? item.id : ''"
             v-model="form[item.prop]"
-            type="textarea"
+            :readonly="item.readonly"
+            :disabled="item.disabled"
+            clearable=""
             :placeholder="item.placeholder"
-            :rows="item.rows"
-            :autosize="item.autosize"
-            :minlength="item.minlength"
-            :maxlength="item.maxlength"
-            :show-word-limit="item.showLimit"
-          ></el-input>
-        </template>
+            @focus="item.focusFunc ? item.focusFunc($event) : {}"
+            @change="item.func ? item.func($event) : {}"
+          >
+            <span v-if="item.unit" :slot="item.slot ? item.slot : 'append'">
+              {{ item.unit }}
+            </span>
+          </el-input>
 
-        <!-- 模糊查询输入 -->
-        <el-autocomplete
-          v-else-if="item.type === 'autocomplete'"
-          v-model="form[item.prop]"
-          :popper-class="item.popperClass"
-          style="width: 100%"
-          :fetch-suggestions="item.func"
-          :placeholder="item.placeholder"
-          clearable
-          @select="item.selectfun ? item.selectfun($event) : {}"
-        >
-          <template slot-scope="{ item }">
-            <div class="name">{{ item.value }}</div>
-            <span class="description">{{ item.description }}</span>
+          <template v-if="item.type === 'textarea'">
+            <el-input
+              v-model="form[item.prop]"
+              type="textarea"
+              :placeholder="item.placeholder"
+              :rows="item.rows"
+              :autosize="item.autosize"
+              :minlength="item.minlength"
+              :maxlength="item.maxlength"
+              :show-word-limit="item.showLimit"
+            ></el-input>
           </template>
-        </el-autocomplete>
 
-        <!-- 模糊查询选择 -->
-        <el-select
-          v-else-if="item.type === 'remote'"
-          v-model="form[item.prop]"
-          filterable
-          remote
-          reserve-keyword
-          :placeholder="item.placeholder"
-          :remote-method="item.remoteFunc"
-        >
-          <el-option
-            v-for="(opt, optIndex) in item.opts"
-            :key="optIndex"
-            :label="opt.label"
-            :value="item.isSelect ? opt.selectValue : opt.value"
-          ></el-option>
-        </el-select>
+          <!-- 模糊查询输入 -->
+          <el-autocomplete
+            v-else-if="item.type === 'autocomplete'"
+            v-model="form[item.prop]"
+            :popper-class="item.popperClass"
+            style="width: 100%"
+            :fetch-suggestions="item.func"
+            :placeholder="item.placeholder"
+            clearable
+            @select="item.selectfun ? item.selectfun($event) : {}"
+          >
+            <template slot-scope="{ item }">
+              <div class="name">{{ item.value }}</div>
+              <span class="description">{{ item.description }}</span>
+            </template>
+          </el-autocomplete>
 
-        <!-- 日期区间 -->
-        <el-date-picker
-          v-else-if="item.type === 'daterange'"
-          v-model="form[item.prop]"
-          type="daterange"
-          align="right"
-          unlink-panels
-          range-separator="-"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
-          :picker-options="item.options"
-          :format="item.format"
-          :value-format="item.valueFormat"
-        ></el-date-picker>
+          <!-- 模糊查询选择 -->
+          <el-select
+            v-else-if="item.type === 'remote'"
+            v-model="form[item.prop]"
+            filterable
+            remote
+            reserve-keyword
+            :placeholder="item.placeholder"
+            :remote-method="item.remoteFunc"
+          >
+            <el-option
+              v-for="(opt, optIndex) in item.opts"
+              :key="optIndex"
+              :label="opt.label"
+              :value="item.isSelect ? opt.selectValue : opt.value"
+            ></el-option>
+          </el-select>
 
-        <!-- 日期 -->
-        <el-date-picker
-          v-else-if="item.type === 'date'"
-          v-model="form[item.prop]"
-          :type="item.dateType ? item.dateType : 'date'"
-          :placeholder="item.placeholder"
-          :picker-options="item.options"
-          :format="item.format"
-          :value-format="item.valueFormat"
-        ></el-date-picker>
+          <!-- 日期区间 -->
+          <el-date-picker
+            v-else-if="item.type === 'daterange'"
+            v-model="form[item.prop]"
+            type="daterange"
+            align="right"
+            unlink-panels
+            range-separator="-"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            :picker-options="item.options"
+            :format="item.format"
+            :value-format="item.valueFormat"
+            @change="handleSearch"
+          ></el-date-picker>
 
-        <!-- 下拉框 -->
-        <el-select
-          v-else-if="item.type === 'select'"
-          v-model="form[item.prop]"
-          clearable
-          filterable
-          :disabled="item.disabled"
-          :placeholder="item.placeholder ? item.placeholder : '请选择'"
-          @change="item.func ? item.func($event) : {}"
-        >
-          <el-option
+          <!-- 日期 -->
+          <el-date-picker
+            v-else-if="item.type === 'date'"
+            v-model="form[item.prop]"
+            :type="item.dateType ? item.dateType : 'date'"
+            :placeholder="item.placeholder"
+            :picker-options="item.options"
+            :format="item.format"
+            :value-format="item.valueFormat"
+            @change="handleSearch"
+          ></el-date-picker>
+
+          <!-- 下拉框 -->
+          <el-select
+            v-else-if="item.type === 'select'"
+            v-model="form[item.prop]"
+            clearable
+            filterable
+            :disabled="item.disabled"
+            :placeholder="item.placeholder ? item.placeholder : '请选择'"
+            @change="item.func ? item.func($event) : handleSearch()"
+          >
+            <el-option
+              v-for="(opt, optIndex) in item.opts"
+              :key="optIndex"
+              :label="opt.label"
+              :value="item.isSelect ? opt.selectValue : opt.value"
+            ></el-option>
+          </el-select>
+
+          <!-- 单选框 -->
+          <el-radio
             v-for="(opt, optIndex) in item.opts"
+            v-else-if="item.type === 'radio'"
             :key="optIndex"
-            :label="opt.label"
-            :value="item.isSelect ? opt.selectValue : opt.value"
-          ></el-option>
-        </el-select>
-
-        <!-- 单选框 -->
-        <el-radio
-          v-for="(opt, optIndex) in item.opts"
-          v-else-if="item.type === 'radio'"
-          :key="optIndex"
-          v-model="form[item.prop]"
-          :class="item.class"
-          :label="opt.value"
-          @change="item.func ? item.func($event) : {}"
-          >{{ opt.label }}</el-radio
-        >
+            v-model="form[item.prop]"
+            :class="item.class"
+            :label="opt.value"
+            @change="item.func ? item.func($event) : {}"
+            >{{ opt.label }}</el-radio
+          >
 
-        <!-- 级联 -->
-        <el-cascader
-          v-else-if="item.type === 'cascader'"
-          v-model="form[item.prop]"
-          :style="'width:' + item.width"
-          :options="item.list"
-          :change-on-select="item.changeSelect"
-          :show-all-levels="item.showLevel"
-        ></el-cascader>
+          <!-- 级联 -->
+          <el-cascader
+            v-else-if="item.type === 'cascader'"
+            v-model="form[item.prop]"
+            :style="'width:' + item.width"
+            :options="item.list"
+            :change-on-select="item.changeSelect"
+            :show-all-levels="item.showLevel"
+          ></el-cascader>
 
-        <!-- 文字 -->
-        <span v-else-if="item.type === 'text'">{{
-          item.text ? item.text : form[item.prop]
-        }}</span>
+          <!-- 文字 -->
+          <span v-else-if="item.type === 'text'">{{
+            item.text ? item.text : form[item.prop]
+          }}</span>
 
-        <!-- 数字输入框 -->
-        <el-input-number
-          v-else-if="item.type === 'number'"
-          v-model="form[item.prop]"
-          :controls="false"
-          :min="item.min || 0"
-          :precision="item.precision"
-          :disabled="item.disabled || disabled"
-        />
+          <!-- 数字输入框 -->
+          <el-input-number
+            v-else-if="item.type === 'number'"
+            v-model="form[item.prop]"
+            :controls="false"
+            :min="item.min || 0"
+            :precision="item.precision"
+            :disabled="item.disabled || disabled"
+          />
 
-        <!-- 图标 -->
-        <span v-else-if="item.type === 'svg'">
-          <svg-icon
-            :style="item.style"
-            :icon-class="item.iconClass"
-            class="form-svg"
-            @click.native="clickSvg(item.func)"
-          ></svg-icon>
-        </span>
-      </el-form-item>
-      <div v-if="item.type == 'btn'" class="flex">
-        <template v-for="(btn, index) in item.list">
-          <el-button
-            v-if="btn.btnType == 'button'"
-            :key="index"
-            :type="btn.type"
-            :size="size"
-            :icon="btn.icon"
-            :style="btn.style"
-            @click="btn.func(form)"
-            >{{ btn.btnText }}</el-button
-          >
-          <div
-            v-if="btn.btnType == 'tobeModified'"
-            :key="index"
-            class="tobeModified"
-            :style="{ backgroundColor: modifiedFlag ? '#4E68FF' : '#fff' }"
-            @click="changeModified"
-          >
-            <i
-              :style="{ color: modifiedFlag ? '#fff' : '#d9d9d9' }"
-              class="el-icon-check"
-            ></i>
-            <span :style="{ color: modifiedFlag ? '#fff' : '#000' }"
-              >待修改（{{ btn.tobeModified }}）</span
+          <!-- 图标 -->
+          <span v-else-if="item.type === 'svg'">
+            <svg-icon
+              :style="item.style"
+              :icon-class="item.iconClass"
+              class="form-svg"
+              @click.native="clickSvg(item.func)"
+            ></svg-icon>
+          </span>
+        </el-form-item>
+        <div v-if="item.type == 'btn'" class="flex">
+          <template v-for="(btn, index) in item.list">
+            <el-button
+              v-if="btn.btnType == 'button'"
+              :key="index"
+              :type="btn.type"
+              :size="size"
+              :icon="btn.icon"
+              :style="btn.style"
+              @click="btn.func(form)"
+              >{{ btn.btnText }}</el-button
             >
-          </div>
-        </template>
-      </div>
-    </el-col>
+            <div
+              v-if="btn.btnType == 'tobeModified'"
+              :key="index"
+              class="tobeModified"
+              :style="{ backgroundColor: modifiedFlag ? '#4E68FF' : '#fff' }"
+              @click="changeModified"
+            >
+              <i
+                :style="{ color: modifiedFlag ? '#fff' : '#d9d9d9' }"
+                class="el-icon-check"
+              ></i>
+              <span :style="{ color: modifiedFlag ? '#fff' : '#000' }"
+                >待修改（{{ btn.tobeModified }}）</span
+              >
+            </div>
+          </template>
+        </div></template
+      >
+    </div>
 
     <el-col v-if="lists" :xs="24" :sm="24" :lg="24" style="padding-left: 120px">
       <el-button
@@ -342,6 +337,8 @@ export default {
 
 <style lang="scss" scoped>
 .el-form-self {
+  display: flex;
+  flex-wrap: wrap;
   width: 100%;
   margin: 20px 0;
   overflow: hidden;
diff --git a/src/views/followupquery/index.vue b/src/views/followupquery/index.vue
index 444ce9f..8cd7aa7 100644
--- a/src/views/followupquery/index.vue
+++ b/src/views/followupquery/index.vue
@@ -328,9 +328,10 @@ export default {
     },
     onSearch(form) {
       console.log(form)
+      this.pageIndex = 1
       sessionStorage.setItem("followQuery-form", JSON.stringify(form))
       this.formEdit = form
-      // this.handleSearch()
+      this.handleSearch()
     },
     onClickSearch() {
       this.pageIndex = 1
-- 
2.22.0