From 36f82eef73655406d2480739e40b7f34550050dd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E9=9C=84?= <zhaoxiaox0053@163.com>
Date: Thu, 28 Sep 2023 15:27:01 +0800
Subject: [PATCH] =?UTF-8?q?update=20AddForm.vue=E5=B8=83=E5=B1=80=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/less/common.less            |   2 +-
 src/components/customField/AddForm.vue | 394 +++++++++----------------
 2 files changed, 138 insertions(+), 258 deletions(-)

diff --git a/src/assets/less/common.less b/src/assets/less/common.less
index b5898634..b392e3f9 100644
--- a/src/assets/less/common.less
+++ b/src/assets/less/common.less
@@ -223,7 +223,7 @@
     width: calc(100% - 130px);
     display: inline-block;
     margin-top: 2px;
-    height: 40px;
+    //height: 40px;
     margin-bottom: 24px;
 
     /deep/ .ant-form-item-control-wrapper {
diff --git a/src/components/customField/AddForm.vue b/src/components/customField/AddForm.vue
index 40cc4645..b3e9edc0 100644
--- a/src/components/customField/AddForm.vue
+++ b/src/components/customField/AddForm.vue
@@ -2,265 +2,132 @@
   <a-form-model :model="formInline" v-if="isFormInline" class="form-add" :rules="rules" ref="ruleForm">
     <div v-for="(val,index) in dataList" :key="index">
       <div v-if="val && val.length > 0" class="header-text">{{ index }}</div>
-      <a-row v-if="val && val.length > 0">
-        <div v-for="(item, index) in val" :key="index">
-          <!--   1, 日期单选  -->
-          <a-col :span="12" v-if="item.fieldShowType === FieldType.DATE_SINGLE.value">
-            <div class="box-title-text">
-              <div class="title-text">
-                <span class="required" v-if="item.fieldMustInput === '1'">*</span>
-                <span class="title-text-text" :title="item.dbFieldTxt">{{ item.dbFieldTxt }}</span>
-              </div>
-              <a-form-model-item class="item-model" :prop="item.dbFieldName">
-                <a-date-picker class="box-input"
-                               :placeholder="$t('pleaseSelect')+item.dbFieldTxt"
-                               :getCalendarContainer="(trigger) => trigger.parentNode"
-                               format="YYYY-MM-DD"
-                               value-format="YYYY-MM-DD"
+      <div v-if="val && val.length > 0" class="form-flex-box">
+        <div v-for="(item, index) in val"
+             :key="index"
+             class="form-flex-item-half"
+             :class="{'form-flex-item-line': item.fieldShowType === FieldType.STANDARD_MORE.value}">
+          <div class="box-title-text">
+            <div class="title-text">
+              <span class="required" v-if="item.fieldMustInput === '1'">*</span>
+              <span class="title-text-text" :title="item.dbFieldTxt">{{ item.dbFieldTxt }}</span>
+            </div>
+            <a-form-model-item class="item-model" :prop="item.dbFieldName">
+              <!--   1, 日期单选  -->
+              <a-date-picker v-if="item.fieldShowType === FieldType.DATE_SINGLE.value"
+                             class="box-input"
+                             :placeholder="$t('pleaseSelect')+item.dbFieldTxt"
+                             :getCalendarContainer="(trigger) => trigger.parentNode"
+                             format="YYYY-MM-DD"
+                             value-format="YYYY-MM-DD"
+                             v-model="formInline[item.dbFieldName]"
+                             :disabled="disabled || disabledFieldList.includes(item.dbFieldName)"
+                             style="width: 100%" />
+              <!--   2, 单选用户  -->
+              <user-selection v-else-if="item.fieldShowType === FieldType.USER_SINGLE.value"
+                              :placeholder="$t('pleaseSelect')+item.dbFieldTxt"
+                              v-model="formInline[item.dbFieldName]"
+                              :filedName="item.dbFieldName"
+                              @nameChange="userSelectNameChange"
+                              :nameStr="formInline[item.dbFieldName + '_dictText']"
+                              type="radio"
+                              :disabled="disabled || disabledFieldList.includes(item.dbFieldName)" />
+              <!--   3, 单选组织机构  -->
+              <j-select-depart v-else-if="item.fieldShowType === FieldType.ORGAN_SINGLE.value"
                                v-model="formInline[item.dbFieldName]"
-                               :disabled="disabled || disabledFieldList.includes(item.dbFieldName)"
-                               style="width: 100%" />
-              </a-form-model-item>
-            </div>
-          </a-col>
-          <!--   2, 单选用户  -->
-          <a-col :span="12" v-if="item.fieldShowType === FieldType.USER_SINGLE.value">
-            <div class="box-title-text">
-              <div class="title-text">
-                <span class="required" v-if="item.fieldMustInput === '1'">*</span>
-                <span class="title-text-text" :title="item.dbFieldTxt">{{ item.dbFieldTxt }}</span>
-              </div>
-              <a-form-model-item class="item-model" :prop="item.dbFieldName">
-                <user-selection :placeholder="$t('pleaseSelect')+item.dbFieldTxt"
-                                v-model="formInline[item.dbFieldName]"
-                                :filedName="item.dbFieldName"
-                                @nameChange="userSelectNameChange"
-                                :nameStr="formInline[item.dbFieldName + '_dictText']"
-                                type="radio"
-                                :disabled="disabled || disabledFieldList.includes(item.dbFieldName)" />
-                <!--                <user-or-organ-selection :placeholder="$t('pleaseSelect')+item.dbFieldTxt"-->
-                <!--                                         v-model="formInline[item.dbFieldName]"-->
-                <!--                                         type="radio"-->
-                <!--                                         selectType="user"-->
-                <!--                                         :disabled="disabled || disabledFieldList.includes(item.dbFieldName)" />-->
-              </a-form-model-item>
-            </div>
-          </a-col>
-          <!--   3, 单选组织机构  -->
-          <a-col :span="12" v-if="item.fieldShowType === FieldType.ORGAN_SINGLE.value">
-            <div class="box-title-text">
-              <div class="title-text">
-                <span class="required" v-if="item.fieldMustInput === '1'">*</span>
-                <span class="title-text-text" :title="item.dbFieldTxt">{{ item.dbFieldTxt }}</span>
-              </div>
-              <a-form-model-item class="item-model" :prop="item.dbFieldName">
-                <j-select-depart
-                  v-model="formInline[item.dbFieldName]"
-                  :backDepart="true">>
-                </j-select-depart>
-                <!--                <user-or-organ-selection :placeholder="$t('pleaseSelect')+item.dbFieldTxt"-->
-                <!--                                         v-model="formInline[item.dbFieldName]"-->
-                <!--                                         selectType="organ"-->
-                <!--                                         type="radio"-->
-                <!--                                         :disabled="disabled || disabledFieldList.includes(item.dbFieldName)" />-->
-              </a-form-model-item>
-            </div>
-          </a-col>
-          <!--   4, 日期多选  -->
-          <a-col :span="12" v-else-if="item.fieldShowType === FieldType.DATE_MORE.value">
-            <div class="box-title-text">
-              <div class="title-text">
-                <span class="required" v-if="item.fieldMustInput === '1'">*</span>
-                <span class="title-text-text" :title="item.dbFieldTxt">{{ item.dbFieldTxt }}</span>
-              </div>
-              <a-form-model-item class="item-model" :prop="item.dbFieldName">
-                <j-multiple-date-picker class="box-input" v-model="formInline[item.dbFieldName]" :fieldName="item.dbFieldName"
-                                        :disabled="disabled || disabledFieldList.includes(item.dbFieldName)" />
-              </a-form-model-item>
-            </div>
-          </a-col>
-          <!--   5, 多行文本  -->
-          <a-col :span="24" v-else-if="item.fieldShowType === FieldType.TEXTAREA.value">
-            <div class="box-title-text">
-              <div class="title-text">
-                <span class="required" v-if="item.fieldMustInput === '1'">*</span>
-                <span class="title-text-text" :title="item.dbFieldTxt">{{ item.dbFieldTxt }}</span>
-              </div>
-              <a-form-model-item class="item-model-textarea" :prop="item.dbFieldName">
-                <a-textarea
-                  :placeholder="$t('pleaseEnter')+item.dbFieldTxt"
-                  :disabled="disabled || disabledFieldList.includes(item.dbFieldName)"
-                  :maxLength="500"
-                  v-model="formInline[item.dbFieldName]" :rows="4" />
-              </a-form-model-item>
-            </div>
-          </a-col>
-          <!--   6, 标准多选  -->
-          <a-col :span="24" v-else-if="item.fieldShowType === FieldType.STANDARD_MORE.value">
-            <div class="box-title-text">
-              <div class="title-text">
-                <span class="required" v-if="item.fieldMustInput === '1'">*</span>
-                <span class="title-text-text" :title="item.dbFieldTxt">{{ item.dbFieldTxt }}</span>
-              </div>
-              <a-form-model-item class="item-model" :prop="item.dbFieldName">
-                <standard-selection :source="flag"
-                                    :disabledSourceSearch="true"
-                                    :disabled="disabled || disabledFieldList.includes(item.dbFieldName)"
-                                    v-model="formInline[item.dbFieldName]" />
-              </a-form-model-item>
-            </div>
-          </a-col>
-          <!--   7, 多选组织机构  -->
-          <a-col :span="12" v-if="item.fieldShowType === FieldType.ORGAN_MORE.value">
-            <div class="box-title-text">
-              <div class="title-text">
-                <span class="required" v-if="item.fieldMustInput === '1'">*</span>
-                <span class="title-text-text" :title="item.dbFieldTxt">{{ item.dbFieldTxt }}</span>
-              </div>
-              <a-form-model-item class="item-model" :prop="item.dbFieldName">
-                <j-select-depart
-                  v-model="formInline[item.dbFieldName]"
-                  :multi="true"
-                  :backDepart="true"
-                  :treeOpera="true">>
-                </j-select-depart>
-                <!--                <user-or-organ-selection :placeholder="$t('pleaseSelect')+item.dbFieldTxt"-->
-                <!--                                         v-model="formInline[item.dbFieldName]"-->
-                <!--                                         selectType="organ"-->
-                <!--                                         type="checkbox"-->
-                <!--                                         :disabled="disabled || disabledFieldList.includes(item.dbFieldName)" />-->
-              </a-form-model-item>
-            </div>
-          </a-col>
-          <!--   8, 上传文件  -->
-          <a-col :span="12" v-else-if="item.fieldShowType === FieldType.FILE_UP.value">
-            <div class="box-title-text">
-              <div class="title-text">
-                <span class="required" v-if="item.fieldMustInput === '1'">*</span>
-                <span class="title-text-text" :title="item.dbFieldTxt">{{ item.dbFieldTxt }}</span>
-              </div>
-              <a-form-model-item class="item-model" :prop="item.dbFieldName">
-                <a-button type="primary" class="button-text"
-                          @click="clickButtonToUpload(item)">
-                  {{
-                    (formInline[item.dbFieldName] === 'null' || formInline[item.dbFieldName] === ''
-                      || formInline[item.dbFieldName] === null || formInline[item.dbFieldName] === undefined)
-                      ? $t('uploadFile.clickUpload')
-                      : $t('uploadFile.viewUploadedFiles')
-                  }}
-                </a-button>
-              </a-form-model-item>
-            </div>
-          </a-col>
-          <!--   9, 文本框  -->
-          <a-col :span="12" v-else-if="item.fieldShowType === FieldType.TEXT_BOX.value && !hiddenFieldList.includes(item.dbFieldName)">
-            <div class="box-title-text">
-              <div class="title-text">
-                <span class="required" v-if="item.fieldMustInput === '1'">*</span>
-                <span class="title-text-text" :title="item.dbFieldTxt">{{ item.dbFieldTxt }}</span>
-              </div>
-              <a-form-model-item class="item-model" :prop="item.dbFieldName">
-                <a-input class="box-input"
-                         :disabled="disabled || disabledFieldList.includes(item.dbFieldName)"
-                         v-model="formInline[item.dbFieldName]"
-                         :maxLength="50"
-                         :placeholder="specialPlaceholder[item.dbFieldName] || $t('pleaseEnter')+item.dbFieldTxt" />
-              </a-form-model-item>
-            </div>
-          </a-col>
-          <!--   10, 下拉单选  -->
-          <a-col :span="12" v-else-if="item.fieldShowType === FieldType.OPTION_SINGLE.value">
-            <div class="box-title-text">
-              <div class="title-text">
-                <span class="required" v-if="item.fieldMustInput === '1'">*</span>
-                <span class="title-text-text" :title="item.dbFieldTxt">{{ item.dbFieldTxt }}</span>
-              </div>
-              <a-form-model-item class="item-model" :prop="item.dbFieldName">
-                <j-dict-select-tag class="box-input" v-model="formInline[item.dbFieldName]"
-                                   :disabled="disabled || disabledFieldList.includes(item.dbFieldName)"
-                                   :placeholder="$t('pleaseSelect')+item.dbFieldTxt"
-                                   :type="'select'"
-                                   :triggerChange="false" :dictCode="item.dictField" />
-              </a-form-model-item>
-            </div>
-          </a-col>
-          <!--   11, 下拉多选  -->
-          <a-col :span="12" v-else-if="item.fieldShowType === FieldType.OPTION_MORE.value">
-            <div class="box-title-text">
-              <div class="title-text">
-                <span class="required" v-if="item.fieldMustInput === '1'">*</span>
-                <span class="title-text-text" :title="item.dbFieldTxt">{{ item.dbFieldTxt }}</span>
-              </div>
-              <a-form-model-item class="item-model" :prop="item.dbFieldName">
-                <j-multi-select-tag class="box-input" v-model="formInline[item.dbFieldName]"
-                                    :disabled="disabled || disabledFieldList.includes(item.dbFieldName)"
-                                    :placeholder="$t('pleaseSelect')+item.dbFieldTxt"
-                                    :type="'select'"
-                                    :triggerChange="false" :dictCode="item.dictField" />
-              </a-form-model-item>
-            </div>
-          </a-col>
-          <!--   12, 树选择       -->
-          <a-col :span="12" v-else-if="item.fieldShowType === FieldType.TREE.value">
-            <div class="box-title-text" :title="item.dbFieldTxt">
-              <div class="title-text">
-                <span class="required" v-if="item.fieldMustInput === '1'">*</span>
-                <span class="title-text-text">{{ item.dbFieldTxt }}</span>
-              </div>
-              <a-form-model-item class="item-model" :prop="item.dbFieldName">
-                <a-tree-select
-                  v-model="formInline[item.dbFieldName]"
-                  :getPopupContainer="triggerNode=> triggerNode.parentNode"
-                  style="width: 100%"
-                  :disabled="disabled || disabledFieldList.includes(item.dbFieldName)"
-                  :tree-data="optionsData[item.dbFieldName]"
-                  tree-checkable
-                  treeCheckStrictly
-                  :label-in-value="false"
-                  :placeholder="$t('pleaseSelect')+item.dbFieldTxt"
-                />
-              </a-form-model-item>
-            </div>
-          </a-col>
-          <!--  14, 年份选择 -->
-          <a-col :span="12" v-else-if="item.fieldShowType === FieldType.YEAR_PICKER.value">
-            <div class="box-title-text" :title="item.dbFieldTxt">
-              <div class="title-text">
-                <span class="required" v-if="item.fieldMustInput === '1'">*</span>
-                <span class="title-text-text">{{ item.dbFieldTxt }}</span>
-              </div>
-              <a-form-model-item class="item-model" :prop="item.dbFieldName">
-                <j-date show-type="year"
-                        :disabled="disabled || disabledFieldList.includes(item.dbFieldName)"
-                        v-model="formInline[item.dbFieldName]"
-                        :default-value="defaultValue[item.dbFieldName]"
-                        date-format="YYYY"
-                        :placeholder="$t('pleaseSelect')+item.dbFieldTxt" />
-              </a-form-model-item>
-            </div>
-          </a-col>
-          <!--   15, 树选择（单选）       -->
-          <a-col :span="12" v-else-if="item.fieldShowType === FieldType.TREE_SINGLE.value">
-            <div class="box-title-text" :title="item.dbFieldTxt">
-              <div class="title-text">
-                <span class="required" v-if="item.fieldMustInput === '1'">*</span>
-                <span class="title-text-text">{{ item.dbFieldTxt }}</span>
-              </div>
-              <a-form-model-item class="item-model" :prop="item.dbFieldName">
-                <a-tree-select
-                  v-model="formInline[item.dbFieldName]"
-                  :getPopupContainer="triggerNode=> triggerNode.parentNode"
-                  style="width: 100%"
-                  :disabled="disabled || disabledFieldList.includes(item.dbFieldName)"
-                  :tree-data="optionsData[item.dbFieldName]"
-                  :label-in-value="false"
-                  :placeholder="$t('pleaseSelect')+item.dbFieldTxt"
-                />
-              </a-form-model-item>
-            </div>
-          </a-col>
+                               :backDepart="true" />
+              <!--   4, 日期多选  -->
+              <j-multiple-date-picker v-else-if="item.fieldShowType === FieldType.DATE_MORE.value"
+                                      class="box-input"
+                                      v-model="formInline[item.dbFieldName]"
+                                      :fieldName="item.dbFieldName"
+                                      :disabled="disabled || disabledFieldList.includes(item.dbFieldName)" />
+              <!--   5, 多行文本  -->
+              <a-textarea v-else-if="item.fieldShowType === FieldType.TEXTAREA.value"
+                          :placeholder="$t('pleaseEnter')+item.dbFieldTxt"
+                          :disabled="disabled || disabledFieldList.includes(item.dbFieldName)"
+                          :maxLength="500"
+                          v-model="formInline[item.dbFieldName]" :rows="4" />
+              <!--   6, 标准多选  -->
+              <standard-selection v-else-if="item.fieldShowType === FieldType.STANDARD_MORE.value"
+                                  :source="flag"
+                                  :disabledSourceSearch="true"
+                                  :disabled="disabled || disabledFieldList.includes(item.dbFieldName)"
+                                  v-model="formInline[item.dbFieldName]" />
+              <!--   7, 多选组织机构  -->
+              <j-select-depart v-else-if="item.fieldShowType === FieldType.ORGAN_MORE.value"
+                               v-model="formInline[item.dbFieldName]"
+                               :multi="true"
+                               :backDepart="true"
+                               :treeOpera="true" />
+              <!--   8, 上传文件  -->
+              <a-button v-else-if="item.fieldShowType === FieldType.FILE_UP.value" type="primary" class="button-text"
+                        @click="clickButtonToUpload(item)">
+                {{
+                  (formInline[item.dbFieldName] === 'null' || formInline[item.dbFieldName] === ''
+                    || formInline[item.dbFieldName] === null || formInline[item.dbFieldName] === undefined)
+                    ? $t('uploadFile.clickUpload')
+                    : $t('uploadFile.viewUploadedFiles')
+                }}
+              </a-button>
+              <!--   9, 文本框  -->
+              <a-input v-else-if="item.fieldShowType === FieldType.TEXT_BOX.value && !hiddenFieldList.includes(item.dbFieldName)"
+                       class="box-input"
+                       :disabled="disabled || disabledFieldList.includes(item.dbFieldName)"
+                       v-model="formInline[item.dbFieldName]"
+                       :maxLength="50"
+                       :placeholder="specialPlaceholder[item.dbFieldName] || $t('pleaseEnter')+item.dbFieldTxt" />
+              <!--   10, 下拉单选（数据字典）  -->
+              <j-dict-select-tag v-else-if="item.fieldShowType === FieldType.OPTION_SINGLE.value"
+                                 class="box-input"
+                                 v-model="formInline[item.dbFieldName]"
+                                 :disabled="disabled || disabledFieldList.includes(item.dbFieldName)"
+                                 :placeholder="$t('pleaseSelect')+item.dbFieldTxt"
+                                 :type="'select'"
+                                 :triggerChange="false"
+                                 :dictCode="item.dictField" />
+              <!--   11, 下拉多选（数据字典）  -->
+              <j-multi-select-tag v-else-if="item.fieldShowType === FieldType.OPTION_MORE.value"
+                                  class="box-input"
+                                  v-model="formInline[item.dbFieldName]"
+                                  :disabled="disabled || disabledFieldList.includes(item.dbFieldName)"
+                                  :placeholder="$t('pleaseSelect')+item.dbFieldTxt"
+                                  :type="'select'"
+                                  :triggerChange="false"
+                                  :dictCode="item.dictField" />
+              <!--   12, 树选择       -->
+              <a-tree-select
+                v-else-if="item.fieldShowType === FieldType.TREE.value"
+                v-model="formInline[item.dbFieldName]"
+                :getPopupContainer="triggerNode=> triggerNode.parentNode"
+                style="width: 100%"
+                :disabled="disabled || disabledFieldList.includes(item.dbFieldName)"
+                :tree-data="optionsData[item.dbFieldName]"
+                tree-checkable
+                treeCheckStrictly
+                :label-in-value="false"
+                :placeholder="$t('pleaseSelect')+item.dbFieldTxt" />
+              <!--  14, 年份选择 -->
+              <j-date v-else-if="item.fieldShowType === FieldType.YEAR_PICKER.value"
+                      show-type="year"
+                      :disabled="disabled || disabledFieldList.includes(item.dbFieldName)"
+                      v-model="formInline[item.dbFieldName]"
+                      :default-value="defaultValue[item.dbFieldName]"
+                      date-format="YYYY"
+                      :placeholder="$t('pleaseSelect')+item.dbFieldTxt" />
+              <!--   15, 树选择（单选）       -->
+              <a-tree-select v-else-if="item.fieldShowType === FieldType.TREE_SINGLE.value"
+                             v-model="formInline[item.dbFieldName]"
+                             :getPopupContainer="triggerNode=> triggerNode.parentNode"
+                             style="width: 100%"
+                             :disabled="disabled || disabledFieldList.includes(item.dbFieldName)"
+                             :tree-data="optionsData[item.dbFieldName]"
+                             :label-in-value="false"
+                             :placeholder="$t('pleaseSelect')+item.dbFieldTxt" />
+            </a-form-model-item>
+          </div>
         </div>
-      </a-row>
+      </div>
     </div>
     <upload-file ref="uploadFile" @change="uploadFileChange" :return-url="false"></upload-file>
   </a-form-model>
@@ -561,4 +428,17 @@ export default {
   width: 100%;
   display: inline-block;
 }
+
+.form-flex-box {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.form-flex-item-half {
+  width: 50%;
+}
+
+.form-flex-item-line {
+  width: 100%;
+}
 </style>