From d155adacc0dabdb61e3383e883a3b11e10d3d77c Mon Sep 17 00:00:00 2001
From: qq787203167 <787203167@qq.com>
Date: Sat, 2 Jul 2022 11:35:19 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E7=A6=85=E9=81=93=E5=B7=B2?=
 =?UTF-8?q?=E7=9F=A5bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ReferenceParameter/index.vue   | 135 +++++++++++++++---
 1 file changed, 113 insertions(+), 22 deletions(-)

diff --git a/jero-web/src/components/ReferenceParameter/index.vue b/jero-web/src/components/ReferenceParameter/index.vue
index d73eaf0a2..94db39bf8 100644
--- a/jero-web/src/components/ReferenceParameter/index.vue
+++ b/jero-web/src/components/ReferenceParameter/index.vue
@@ -6,41 +6,76 @@
         ref='ruleForm'
         :model='formInline'
         :rules='rules'
-        :label-col='labelCol'
-        :wrapper-col='wrapperCol'
       >
         <a-row :gutter='24'>
           <a-col :span='24'>
-            <a-form-model-item style='line-height: 31.9999px;' prop='sourceConfigId' class='aform'>
-              <div style='display: flex; justify-content: center'>
-                <span class="Requireditem">*</span>
-                <div style='width: 107px;line-height: 29px;'>{{ $t('from') }}&nbsp;&nbsp;&nbsp;</div>
-                <a-select :placeholder="$t('PleaseSelect')+$t('controlVerification')" v-model="formInline.sourceConfigId" allowClear style='width: 140%'>
-                  <a-select-option v-for="(item, key) in fromDate" :key="key" :value="item.value"  style='width: 140%'>
-                    <span style="display: inline-block;width: 140%" :title=" item.label ">
+            <div class="box-title-text">
+              <div class="title-text">
+                <span class="Required">*</span>
+                <span class="title-text-text" :title="$t('from')">{{$t('from')}}</span>
+              </div>
+              <a-form-model-item class="itemModel" prop="sourceConfigId">
+                <a-select :placeholder="$t('PleaseSelect')+$t('controlVerification')"
+                          style="width: calc(100% - 90px)"
+                          v-model="formInline.sourceConfigId" allowClear>
+                  <a-select-option v-for="(item, key) in fromDate" :key="key" :value="item.value">
+                    <span :title=" item.label ">
                       {{ item.label }}
                     </span>
                   </a-select-option>
                 </a-select>
-                <div style='width: 90px;line-height: 29px;'>&nbsp;&nbsp;&nbsp;&nbsp;{{ $t('configure') }}</div>
-              </div>
-            </a-form-model-item>
+                <span style='width: 90px;line-height: 29px;margin-top: 8px'>&nbsp;&nbsp;&nbsp;&nbsp;{{ $t('configure') }}</span>
+              </a-form-model-item>
+
+            </div>
+<!--            <a-form-model-item style='line-height: 31.9999px;' prop='sourceConfigId' class='aform'>-->
+<!--              <div style='display: flex; justify-content: center'>-->
+<!--                <span class="Requireditem">*</span>-->
+<!--                <div style='width: 107px;line-height: 29px;'>{{ $t('from') }}&nbsp;&nbsp;&nbsp;</div>-->
+<!--                <a-select :placeholder="$t('PleaseSelect')+$t('controlVerification')" v-model="formInline.sourceConfigId" allowClear style='width: 140%'>-->
+<!--                  <a-select-option v-for="(item, key) in fromDate" :key="key" :value="item.value"  style='width: 140%'>-->
+<!--                    <span style="display: inline-block;width: 140%" :title=" item.label ">-->
+<!--                      {{ item.label }}-->
+<!--                    </span>-->
+<!--                  </a-select-option>-->
+<!--                </a-select>-->
+<!--                <div style='width: 90px;line-height: 29px;'>&nbsp;&nbsp;&nbsp;&nbsp;{{ $t('configure') }}</div>-->
+<!--              </div>-->
+<!--            </a-form-model-item>-->
           </a-col>
           <a-col :span='24'>
-            <a-form-model-item style='line-height: 31.9999px;' prop='targetConfigIds' class='aform'>
-              <div style='display: flex;justify-content: center'>
-                <span class="Requireditem">*</span>
-                <div style='line-height: 29px;width: 107px'>{{ $t('ReferenceTo') }}&nbsp;&nbsp;&nbsp;</div>
-                <a-select :placeholder="$t('PleaseSelect')+$t('controlVerification')" v-model="formInline.targetConfigIds" allowClear  mode="multiple" style='width: 140%'>
-                  <a-select-option v-for="(item, key) in fromDateTo" :key="key" :value="item.value"  style='width: 140%'>
-                    <span style="display: inline-block;width: 140%" :title=" item.label ">
+            <div class="box-title-text">
+              <div class="title-text">
+                <span class="Required">*</span>
+                <span class="title-text-text" :title="$t('ReferenceTo')">{{$t('ReferenceTo')}}</span>
+              </div>
+              <a-form-model-item class="itemModel" prop="targetConfigIds">
+                <a-select :placeholder="$t('PleaseSelect')+$t('controlVerification')"
+                          style="width: calc(100% - 90px)"
+                          v-model="formInline.targetConfigIds" allowClear  mode="multiple">
+                  <a-select-option v-for="(item, key) in fromDateTo" :key="key" :value="item.value">
+                    <span class="itemOption" :title=" item.label ">
                       {{ item.label }}
                     </span>
                   </a-select-option>
                 </a-select>
-                <div style='width: 90px;line-height: 29px;'>&nbsp;&nbsp;&nbsp;&nbsp;{{ $t('configure') }}</div>
-              </div>
-            </a-form-model-item>
+                <span style='width: 90px;line-height: 29px;float: right'>&nbsp;&nbsp;&nbsp;&nbsp;{{ $t('configure') }}</span>
+              </a-form-model-item>
+            </div>
+<!--            <a-form-model-item style='line-height: 31.9999px;' prop='targetConfigIds' class='aform'>-->
+<!--                <span class="Requireditem">*</span>-->
+<!--                <span style='line-height: 29px;width: 107px;display: inline-block'>{{ $t('ReferenceTo') }}&nbsp;&nbsp;&nbsp;</span>-->
+<!--                <a-select :placeholder="$t('PleaseSelect')+$t('controlVerification')"-->
+<!--                          style="width: calc(100%);display: inline-block"-->
+<!--                          v-model="formInline.targetConfigIds" allowClear  mode="multiple">-->
+<!--                  <a-select-option v-for="(item, key) in fromDateTo" :key="key" :value="item.value">-->
+<!--                    <span class="itemOption" :title=" item.label ">-->
+<!--                      {{ item.label }}-->
+<!--                    </span>-->
+<!--                  </a-select-option>-->
+<!--                </a-select>-->
+<!--                <span style='width: 90px;line-height: 29px;display: inline-block'>&nbsp;&nbsp;&nbsp;&nbsp;{{ $t('configure') }}</span>-->
+<!--            </a-form-model-item>-->
           </a-col>
         </a-row>
       </a-form-model>
@@ -265,6 +300,14 @@ export default {
   display: flex;
   justify-content: center;
 }
+.itemOption {
+  display: inline-block;
+  width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  -o-text-overflow: ellipsis;
+}
 </style>
 <style lang='less'>
 .area-module {
@@ -287,4 +330,52 @@ export default {
   color: red;
   line-height: 24px;
 }
+.box-title-text {
+  line-height: 1.4;
+  display: flex;
+  /*align-items: center;*/
+}
+
+.title-text {
+  width: 114px;
+  text-align: right;
+  display: inline-block;
+  font-weight: 500;
+  font-size: 14px;
+  margin-right: 16px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  height: 42px;
+  line-height: 42px;
+}
+
+.box-input {
+  display: inline-block;
+  height: 38px;
+  width: 100%;
+}
+
+.itemModel {
+  width: calc(100% - 130px);
+  display: inline-block;
+  margin-top: 2px;
+  height: 40px;
+  margin-bottom: 24px;
+}
+
+.itemModel-text {
+  width: calc(100% - 130px);
+  display: inline-block;
+  margin-top: 2px;
+}
+
+.Required {
+  color: red;
+  margin-right: 4px;
+}
+
+.title-text-text {
+  margin-top: 9px;
+}
 </style>
\ No newline at end of file