优化交互

sop-admin/sop-admin-vue/src/views/isv/index.vue

@@ -38,7 +38,7 @@
         prop="roleList"
         label="角色"
         width="100"
-        show-overflow-tooltip="true"
+        :show-overflow-tooltip="true"
       >
         <template slot-scope="scope">
           <div v-html="roleRender(scope.row)"></div>
@@ -68,7 +68,7 @@
         prop="remark"
         label="备注"
         width="120"
-        show-overflow-tooltip="true"
+        :show-overflow-tooltip="true"
       />
       <el-table-column
         label="操作"
@@ -159,24 +159,24 @@
         <el-form-item v-show="isvKeysFormData.signType === 2" :label="selfLabel('secret')">
           <span>{{ isvKeysFormData.secret }}</span>
         </el-form-item>
-        <fieldset v-show="showKeys()">
+        <el-tabs v-show="showKeys()" v-model="activeName" type="card" class="keyTabs">
-          <legend>ISV公私钥</legend>
+          <el-tab-pane label="ISV公私钥" name="first">
             <el-form-item label="ISV公钥">
               <el-input v-model="isvKeysFormData.publicKeyIsv" type="textarea" readonly />
             </el-form-item>
             <el-form-item :label="selfLabel('ISV私钥')">
               <el-input v-model="isvKeysFormData.privateKeyIsv" type="textarea" readonly />
             </el-form-item>
-        </fieldset>
+          </el-tab-pane>
-        <fieldset v-show="showKeys()">
+          <el-tab-pane label="平台公私钥[可选]" name="second">
-          <legend>平台公私钥</legend>
+            <el-form-item label="平台公钥">
-          <el-form-item :label="selfLabel('平台公钥')">
               <el-input v-model="isvKeysFormData.publicKeyPlatform" type="textarea" readonly />
             </el-form-item>
             <el-form-item prop="privateKeyPlatform" label="平台私钥">
               <el-input v-model="isvKeysFormData.privateKeyPlatform" type="textarea" readonly />
             </el-form-item>
-        </fieldset>
+          </el-tab-pane>
+        </el-tabs>
       </el-form>
       <span slot="footer" class="dialog-footer">
         <el-button @click="isvKeysDialogVisible = false">关 闭</el-button>
@@ -190,6 +190,7 @@
   fieldset label {width: 110px !important;}
   fieldset .el-form-item__content {margin-left: 110px !important;}
   .key-view .el-form-item {margin-bottom: 10px !important;}
+  .keyTabs .el-tabs__header{margin-left: 70px;}
 </style>
 <script>
 export default {
@@ -219,6 +220,7 @@ export default {
           { min: 0, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
         ]
       },
+      activeName: 'first',
       isSaveButtonDisabled: false,
       isvKeysDialogVisible: false,
       isvKeysFormData: {

sop-admin/sop-admin-vue/src/views/isv/keys.vue

@@ -28,8 +28,8 @@
       <el-form-item v-show="isvKeysFormData.signType === 2" prop="secret" :label="selfLabel('secret')">
         <el-input v-model="isvKeysFormData.secret" /> <el-button type="text" @click="onGenSecret">重新生成</el-button>
       </el-form-item>
-      <fieldset v-show="showKeys()">
+      <el-tabs v-show="showKeys()" v-model="activeName" type="card" class="keyTabs">
-        <legend>ISV公私钥</legend>
+        <el-tab-pane label="ISV公私钥" name="first">
           <el-form-item class="gen-key">
             <el-button type="text" @click="onGenKeysIsv">重新生成</el-button>
           </el-form-item>
@@ -39,9 +39,8 @@
           <el-form-item prop="privateKeyIsv" :label="selfLabel('ISV私钥')">
             <el-input v-model="isvKeysFormData.privateKeyIsv" type="textarea" />
           </el-form-item>
-      </fieldset>
+        </el-tab-pane>
-      <fieldset v-show="showKeys()">
+        <el-tab-pane label="平台公私钥[可选]" name="second">
-        <legend>平台公私钥[可选]</legend>
           <el-form-item class="gen-key">
             <el-button type="text" @click="onGenKeysPlatform">重新生成</el-button>
           </el-form-item>
@@ -51,7 +50,8 @@
           <el-form-item prop="privateKeyPlatform" label="平台私钥">
             <el-input v-model="isvKeysFormData.privateKeyPlatform" type="textarea" />
           </el-form-item>
-      </fieldset>
+        </el-tab-pane>
+      </el-tabs>
       <el-form-item>
         <el-button type="primary" @click="onSubmit">保存</el-button>
         <el-button @click="onBack">取消</el-button>
@@ -64,6 +64,7 @@
   fieldset {border: 1px solid #ccc; color: gray;margin-left: 40px;margin-bottom: 20px;}
   fieldset label {width: 110px !important;}
   fieldset .el-form-item__content {margin-left: 110px !important;}
+  .keyTabs .el-tabs__header{margin-left: 70px;}
 </style>
 <script>
 export default {
@@ -108,7 +109,8 @@ export default {
         privateKeyIsv: [
           { validator: validatePubPriKey, trigger: 'blur' }
         ]
-      }
+      },
+      activeName: 'first'
     }
   },
   created() {