From ebd48e90f1b3560cf7fbaa729b4d14e96505cc30 Mon Sep 17 00:00:00 2001
From: miaojiale <1123971748@qq.com>
Date: Fri, 28 Apr 2023 16:52:30 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=A0=B7=E5=BC=8F=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/DialogComponents/Form.vue | 444 +++++++++++------------
 1 file changed, 222 insertions(+), 222 deletions(-)

diff --git a/src/components/DialogComponents/Form.vue b/src/components/DialogComponents/Form.vue
index 63771b5..9580768 100644
--- a/src/components/DialogComponents/Form.vue
+++ b/src/components/DialogComponents/Form.vue
@@ -20,254 +20,250 @@
       >
         <el-row>
           <template v-for="(item, index) in formDataSet">
-            <el-col
+            <!-- <el-col
               v-if="!item.hidden"
               :span="item.spanCount ? item.spanCount : countLine"
               :key="item.prop"
               :class="item.class"
+            > -->
+            <el-form-item
+              :key="index"
+              :label="item.label ? `${item.label}:` : ''"
+              :label-width="item.labelWidth"
+              :prop="item.prop"
+              :rules="item.rules"
+              :class="item.className"
+              :style="item.style"
             >
-              <el-form-item
-                :key="index"
-                :label="item.label ? `${item.label}:` : ''"
-                :label-width="item.labelWidth"
-                :prop="item.prop"
-                :rules="item.rules"
-                :class="item.className"
-                :style="item.style"
+              <!-- 按钮控制 -->
+              <el-button
+                v-if="item.operation"
+                class="operBtn"
+                :type="item.operation.type ? item.operation.type : 'text'"
+                :autofocus="item.autofocus"
+                @click="item.operation.func ? item.operation.func(form) : {}"
+              >
+                {{
+                  item.operation.text ? item.operation.text : "新增"
+                }}</el-button
               >
-                <!-- 按钮控制 -->
-                <el-button
-                  v-if="item.operation"
-                  class="operBtn"
-                  :type="item.operation.type ? item.operation.type : 'text'"
-                  :autofocus="item.autofocus"
-                  @click="item.operation.func ? item.operation.func(form) : {}"
-                >
-                  {{
-                    item.operation.text ? item.operation.text : "新增"
-                  }}</el-button
-                >
 
-                <!-- 提示 -->
-                <el-tooltip
-                  v-if="item.tips"
-                  effect="dark"
-                  :content="item.tips"
-                  placement="top"
-                  slot="label"
+              <!-- 提示 -->
+              <el-tooltip
+                v-if="item.tips"
+                effect="dark"
+                :content="item.tips"
+                placement="top"
+                slot="label"
+              >
+                <span :style="item.tipsStyle">{{ item.label }}：</span>
+              </el-tooltip>
+
+              <!-- 输入框 input -->
+              <el-input
+                v-if="item.type === 'input'"
+                :type="item.inputType ? item.inputType : ''"
+                :maxlength="item.maxlength"
+                :minlength="item.minlength"
+                :placeholder="item.placeholder"
+                clearable
+                :disabled="item.disabled"
+                v-model="form[item.prop]"
+                @input="item.func ? item.func($event) : {}"
+                :resize="item.resize"
+                :rows="item.rows"
+                :autosize="item.autosize"
+              >
+                <span
+                  :slot="item.slot ? item.slot : 'append'"
+                  v-if="item.unit"
+                  >{{ item.unit }}</span
                 >
-                  <span :style="item.tipsStyle">{{ item.label }}：</span>
-                </el-tooltip>
+              </el-input>
 
-                <!-- 输入框 input -->
-                <el-input
-                  v-if="item.type === 'input'"
-                  :type="item.inputType ? item.inputType : ''"
-                  :maxlength="item.maxlength"
-                  :minlength="item.minlength"
-                  :placeholder="item.placeholder"
+              <!-- 数字输入框 -->
+              <div v-if="item.type === 'number'" style="display: inline-table">
+                <el-input-number
+                  :min="item.min"
+                  :max="item.max"
                   clearable
+                  :precision="item.precision"
+                  :controls="item.controls || false"
                   :disabled="item.disabled"
                   v-model="form[item.prop]"
+                  :placeholder="item.placeholder"
                   @input="item.func ? item.func($event) : {}"
-                  :resize="item.resize"
-                  :rows="item.rows"
-                  :autosize="item.autosize"
+                  style="display: table-cell"
+                ></el-input-number>
+                <span
+                  v-if="item.append"
+                  class="el-input-group__append"
+                  style="line-height: 28px"
+                  >{{ item.append }}</span
                 >
-                  <span
-                    :slot="item.slot ? item.slot : 'append'"
-                    v-if="item.unit"
-                    >{{ item.unit }}</span
-                  >
-                </el-input>
+              </div>
+              <!-- 模糊查询输入 -->
+              <el-autocomplete
+                v-else-if="item.type === 'autocomplete'"
+                popper-class="my-autocomplete"
+                v-model="form[item.prop]"
+                :fetch-suggestions="item.func"
+                :placeholder="item.placeholder"
+                @select="item.selectfun"
+                clearable
+              >
+                <template slot-scope="{ item }">
+                  <div class="name">
+                    {{ item.value }}
+                    <span v-if="item.specification"
+                      >({{ item.specification }})</span
+                    >
+                  </div>
+                  <span class="description">{{ item.description }}</span>
+                </template>
+              </el-autocomplete>
 
-                <!-- 数字输入框 -->
-                <div
-                  v-if="item.type === 'number'"
-                  style="display: inline-table"
-                >
-                  <el-input-number
-                    :min="item.min"
-                    :max="item.max"
-                    clearable
-                    :precision="item.precision"
-                    :controls="item.controls || false"
-                    :disabled="item.disabled"
-                    v-model="form[item.prop]"
-                    :placeholder="item.placeholder"
-                    @input="item.func ? item.func($event) : {}"
-                    style="display: table-cell"
-                  ></el-input-number>
-                  <span
-                    v-if="item.append"
-                    class="el-input-group__append"
-                    style="line-height: 28px"
-                    >{{ item.append }}</span
-                  >
-                </div>
-                <!-- 模糊查询输入 -->
-                <el-autocomplete
-                  v-else-if="item.type === 'autocomplete'"
-                  popper-class="my-autocomplete"
-                  v-model="form[item.prop]"
-                  :fetch-suggestions="item.func"
-                  :placeholder="item.placeholder"
-                  @select="item.selectfun"
-                  clearable
+              <!-- 选择器 -->
+              <el-select
+                v-else-if="item.type === 'select'"
+                :multiple="item.multiple"
+                :disabled="item.disabled"
+                v-model="form[item.prop]"
+                :placeholder="item.placeholder ? item.placeholder : '请选择'"
+                :filterable="item.filterable ? false : true"
+                clearable
+                :value-key="item.key ? item.key : 'value'"
+                @change="item.func ? item.func($event) : {}"
+              >
+                <el-option
+                  v-for="(opt, optIndex) in item.opts"
+                  :key="optIndex"
+                  :label="opt.label"
+                  :value="item.isSelect ? opt.selectValue : opt.value"
+                  :disabled="opt.disabled"
                 >
-                  <template slot-scope="{ item }">
-                    <div class="name">
-                      {{ item.value }}
-                      <span v-if="item.specification"
-                        >({{ item.specification }})</span
-                      >
-                    </div>
-                    <span class="description">{{ item.description }}</span>
-                  </template>
-                </el-autocomplete>
+                  <span style="float: left">{{ opt.label }}</span>
+                  <span style="float: right; color: #8492a6; font-size: 10px">{{
+                    opt.description
+                  }}</span>
+                </el-option>
+              </el-select>
 
-                <!-- 选择器 -->
-                <el-select
-                  v-else-if="item.type === 'select'"
-                  :multiple="item.multiple"
-                  :disabled="item.disabled"
-                  v-model="form[item.prop]"
-                  :placeholder="item.placeholder ? item.placeholder : '请选择'"
-                  :filterable="item.filterable ? false : true"
-                  clearable
-                  :value-key="item.key ? item.key : 'value'"
-                  @change="item.func ? item.func($event) : {}"
-                >
-                  <el-option
-                    v-for="(opt, optIndex) in item.opts"
-                    :key="optIndex"
-                    :label="opt.label"
-                    :value="item.isSelect ? opt.selectValue : opt.value"
-                    :disabled="opt.disabled"
-                  >
-                    <span style="float: left">{{ opt.label }}</span>
-                    <span
-                      style="float: right; color: #8492a6; font-size: 10px"
-                      >{{ opt.description }}</span
-                    >
-                  </el-option>
-                </el-select>
+              <!-- 模糊查询选择 -->
+              <el-select
+                v-else-if="item.type === 'remote'"
+                v-model="form[item.prop]"
+                filterable
+                remote
+                reserve-keyword
+                :multiple="item.multiple ? true : false"
+                :placeholder="item.placeholder"
+                :remote-method="item.remoteFunc"
+                v-el-select-loadmore="loadmore"
+                @change="item.func ? item.func($event) : {}"
+              >
+                <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-select
-                  v-else-if="item.type === 'remote'"
-                  v-model="form[item.prop]"
-                  filterable
-                  remote
-                  reserve-keyword
-                  :multiple="item.multiple ? true : false"
-                  :placeholder="item.placeholder"
-                  :remote-method="item.remoteFunc"
-                  v-el-select-loadmore="loadmore"
-                  @change="item.func ? item.func($event) : {}"
-                >
-                  <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"
+                @change="item.func ? item.func($event) : {}"
+              ></el-date-picker>
+              <!-- 时间 -->
+              <el-time-picker
+                v-else-if="item.type === 'time'"
+                :format="item.format"
+                :value-format="item.valueFormat"
+                v-model="form[item.prop]"
+                :picker-options="item.options"
+                @change="item.func ? item.func($event) : {}"
+              ></el-time-picker>
+              <!-- 开关 -->
+              <el-switch
+                v-else-if="item.type === 'switch'"
+                :disabled="item.disabled"
+                :active-value="item.activeValue || 1"
+                :inactive-value="item.inactiveValue || 0"
+                v-model="form[item.prop]"
+              >
+              </el-switch>
 
-                <!-- 日期 -->
-                <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="item.func ? item.func($event) : {}"
-                ></el-date-picker>
-                <!-- 时间 -->
-                <el-time-picker
-                  v-else-if="item.type === 'time'"
-                  :format="item.format"
-                  :value-format="item.valueFormat"
-                  v-model="form[item.prop]"
-                  :picker-options="item.options"
-                  @change="item.func ? item.func($event) : {}"
-                ></el-time-picker>
-                <!-- 开关 -->
-                <el-switch
-                  v-else-if="item.type === 'switch'"
-                  :disabled="item.disabled"
-                  :active-value="item.activeValue || 1"
-                  :inactive-value="item.inactiveValue || 0"
-                  v-model="form[item.prop]"
-                >
-                </el-switch>
+              <!-- 单选框 -->
+              <el-radio
+                :class="item.class"
+                v-else-if="item.type === 'radio'"
+                v-model="form[item.prop]"
+                v-for="(opt, optIndex) in item.opts"
+                :key="optIndex"
+                :label="opt.value"
+                @change="item.func ? item.func($event) : {}"
+                >{{ opt.label }}</el-radio
+              >
 
-                <!-- 单选框 -->
-                <el-radio
-                  :class="item.class"
-                  v-else-if="item.type === 'radio'"
-                  v-model="form[item.prop]"
+              <!-- 多选框 -->
+              <el-checkbox-group
+                v-else-if="item.type === 'checkbox'"
+                v-model="form[item.prop]"
+              >
+                <el-checkbox
                   v-for="(opt, optIndex) in item.opts"
                   :key="optIndex"
-                  :label="opt.value"
-                  @change="item.func ? item.func($event) : {}"
-                  >{{ opt.label }}</el-radio
-                >
-
-                <!-- 多选框 -->
-                <el-checkbox-group
-                  v-else-if="item.type === 'checkbox'"
-                  v-model="form[item.prop]"
-                >
-                  <el-checkbox
-                    v-for="(opt, optIndex) in item.opts"
-                    :key="optIndex"
-                    :label="opt.label"
-                  ></el-checkbox>
-                </el-checkbox-group>
+                  :label="opt.label"
+                ></el-checkbox>
+              </el-checkbox-group>
 
-                <!-- 级联 -->
-                <el-cascader
-                  v-else-if="item.type === 'cascader'"
-                  :options="item.list"
-                  v-model="form[item.prop]"
-                  :clearable="true"
-                  :filterable="true"
-                ></el-cascader>
+              <!-- 级联 -->
+              <el-cascader
+                v-else-if="item.type === 'cascader'"
+                :options="item.list"
+                v-model="form[item.prop]"
+                :clearable="true"
+                :filterable="true"
+              ></el-cascader>
 
-                <!-- 树形 -->
-                <el-tree
-                  v-else-if="item.type === 'tree'"
-                  ref="tree"
-                  :data="treeList"
-                  show-checkbox
-                  :node-key="item.nodeKey || 'id'"
-                  :props="item.props || defaultProps"
-                ></el-tree>
+              <!-- 树形 -->
+              <el-tree
+                v-else-if="item.type === 'tree'"
+                ref="tree"
+                :data="treeList"
+                show-checkbox
+                :node-key="item.nodeKey || 'id'"
+                :props="item.props || defaultProps"
+              ></el-tree>
 
-                <!-- 导入文件 -->
-                <template v-else-if="item.type === 'import'">
-                  <div class="import-container" @click="handleImport">
-                    <span v-if="form[item.prop]">{{ form[item.prop] }}</span>
-                    <span v-else class="wait">{{ item.placeholder }}</span>
-                    <i class="el-icon-upload"></i>
-                  </div>
-                  <input
-                    ref="fileInput"
-                    type="file"
-                    class="import-file"
-                    :accept="item.accept"
-                    @change="handleFileChange($event)"
-                  />
-                </template>
+              <!-- 导入文件 -->
+              <template v-else-if="item.type === 'import'">
+                <div class="import-container" @click="handleImport">
+                  <span v-if="form[item.prop]">{{ form[item.prop] }}</span>
+                  <span v-else class="wait">{{ item.placeholder }}</span>
+                  <i class="el-icon-upload"></i>
+                </div>
+                <input
+                  ref="fileInput"
+                  type="file"
+                  class="import-file"
+                  :accept="item.accept"
+                  @change="handleFileChange($event)"
+                />
+              </template>
 
-                <span v-else-if="item.type === 'text'">{{
-                  form[item.prop]
-                }}</span>
-              </el-form-item>
-            </el-col>
+              <span v-else-if="item.type === 'text'">{{
+                form[item.prop]
+              }}</span>
+            </el-form-item>
+            <!-- </el-col> -->
           </template>
         </el-row>
       </el-form>
@@ -571,4 +567,8 @@ export default {
 .el-autocomplete {
   width: 100%;
 }
+.el-row {
+  display: flex;
+  flex-wrap: wrap;
+}
 </style>
-- 
2.22.0