编辑元素修改

src/views/manager/projectinfo/editElement/editElement.vue

@@ -15,29 +15,44 @@
           </div>
 
         </el-col>
-        <el-col :span="7" style="position: fixed;right: 13px;">
-          <div style="margin-bottom: 20px;float: right;padding-right: 25px">
+        <el-col :span="8">
+          <div style="text-align: right;">
             <el-button @click="toBack">返回上一级</el-button>
             <el-button type="warning" @click="adjustExcel">进入表单调整</el-button>
-            <el-button v-show="AddNewElementField == '替换元素'" type="primary" :disabled="tag"
-              @click="saveReplace()">保存</el-button>
+            <!-- <el-button v-show="AddNewElementField == '替换元素'" type="primary" :disabled="tag"
+              @click="saveReplace()">保存</el-button> -->
           </div>
-          
-          <div v-show="AddNewElementField == '替换元素'">
-            <div>
+           
+          <div v-show="AddNewElementField == '替换元素'" class="right-box">
+           <div class="martop20"  style="font-weight: bold;font-size: 18px;"> 
                <i class="el-icon-edit" style="color: #52B200;"></i>
                替换操作栏
             </div>
+            <div class="martop20">
+              <div style="font-weight: bold;">选中的元素</div>
+              <div class="check_box">333333333333333333333333333333</div>
+            </div>
       
-            <el-select style="width:95%;" v-model="value" filterable placeholder="输入元素名称搜索">
+            <!-- <el-select style="width:95%;" v-model="value" filterable placeholder="输入元素名称搜索">
+              <el-option v-for="item in options" :key="item.id" :label="item.eName" :value="item.id">
+              </el-option>
+            </el-select> -->
+            <div class="tihuan"  style="font-weight: bold;">替换为：</div>
+            <!-- <el-input style="width:95%;" :disabled="true" type="textarea" :rows="4" placeholder="请输入内容" v-model="names">
+            </el-input> -->
+           <el-select style="width:100%;" v-model="value" filterable placeholder="输入元素名称搜索">
               <el-option v-for="item in options" :key="item.id" :label="item.eName" :value="item.id">
               </el-option>
             </el-select>
-            <div class="tihuan">替换为：</div>
-            <el-input style="width:95%;" :disabled="true" type="textarea" :rows="4" placeholder="请输入内容" v-model="names">
-            </el-input>
-          
-            <div class="martop20 replace_box" v-if="true">
+          <div class="martop20 save-btn">
+               <el-button v-show="AddNewElementField == '替换元素'" type="primary" :disabled="tag"
+              @click="saveReplace()">保存</el-button>
+          </div>
+          <div class="martop20"  style="font-weight: bold;font-size: 18px;"> 
+               <i class="el-icon-s-order" style="color: #E3B8E1;"></i>
+               未匹配元素快速选择栏
+            </div>
+            <div class=" replace_box">
               <div style="width: 100%;height: 100%;overflow-y: auto;">
                 <el-row class="mb-4 ">
                   <div style="width: 60%;">
@@ -47,29 +62,23 @@
                 </el-row>
               </div>
             </div>
+            <div class="message-box ">
+              <div>
+                <i class="el-icon-warning"></i>操作提示
+                <ul>
+                  <li  style="margin-bottom: 8px;">选中表单上的元素，选择替换的元素后，点击【保存】即可完成元素替换。</li>
+                  <li  style="margin-bottom: 8px;">点击“未匹配元素”可快速选择目标元素。</li>
+                  <li>元素、电签、默认值配置完成后，请保存表单配置方案用于快速替换。</li>
+
+                </ul>
+              </div>
+            </div>
+             
           </div>
-          <!-- <div
-            v-show="AddNewElementField ==''"
-            style="width:160px;position: fixed;bottom: 50px; right:20px;"
-          >
-            <el-button type="info" @click="toBack">取消</el-button>
-            <el-button type="primary">保存</el-button>
-          </div> -->
+        
         </el-col>
       </el-row>
-      <!-- 弹框 -->
-      <!-- <div
-        @mouseout="mouseout22"
-        @mousemove="mousemove22"
-        v-if="cascaderPanel"
-      >
-        <el-cascader-panel
-          :style="{width:'360px',position: 'absolute',top:top+'px',left:left+'px','background-color':'#fff',margin:'40px',}"
-          :props="{ expandTrigger: 'hover' }"
-          :options="options2"
-          @change="takuangchangge"
-        ></el-cascader-panel>
-      </div> -->
+     
 
       <el-dialog append-to-body :show-close="false" width="360px" :modal='false' class="cascader-dialog" top="0"
         :visible.sync="cascaderPanel" :style="{ position: 'absolute', top: top + 'px', left: left + 'px' }">
@@ -1017,29 +1026,46 @@ export default {
 }
 
 .replace_box {
-  margin-top: 40px;
+  margin-top: 20px;
   border: 1px gray dashed;
-  width: 95%;
-  height: calc(100vh - 560px);
+  width:95%;
+
   position: relative;
   padding-top: 20px;
   padding-left: 20px;
+  flex: 1cqb;
 
 
 
 }
 
-.replace_box::after {
-  content: '未进行匹配的元素字段';
-  position: absolute;
-  right: 34%;
-  top: -15px;
-  background-color: white;
-  text-align: center;
-  font-size: 18px;
-  color: orange;
-  font-weight: 900;
-
 
+.check_box{
+  margin-top: 10px;
+  line-height: 50px;
+  height: 50px;
+  padding: 0 10px;
+  background-color: #E8E8E8;
+}
+.save-btn{
+  width: 100%;
+  .el-button--primary{
+    width: 100%;
+    background: #2550A2;
+    border-color: #2550A2;
+  }
+}
+.message-box{
+  margin-top: 20px;
+  width: 95%;
+  border: 1px rgb(254, 240, 13) solid;
+  background: rgb(254, 252, 233);
+  padding: 10px;
+}
+.right-box{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  border: 1px solid red;
 }
 </style>