css样式整理

hookehuyr
Commit 98e0290439d4bfa122f5c232a80a25f150e391bb 98e02904 1 parent 00c52991
Showing 1 changed file with 113 additions and 26 deletions
doc/App.vue
--- a/doc/App.vue
View file @98e0290
+++ b/doc/App.vue
View file @98e0290
@@ -79,7 +79,6 @@
           label-width="100px"
           style="position: relative;"
         >
-          <!-- <template v-if="state.detailModel.activity === undefined"> -->
             <el-tabs
               v-model="state.activeName"
               class=""
@@ -88,32 +87,26 @@
             >
               <el-tab-pane label="节点属性" name="node" style="padding: 0 1rem">
                 <div v-if="state.main_attr_set" class="main-attr-set">
-                  <el-form-item prop="label">
+                  <el-form-item prop="label" class="node-name">
                     <div slot="label">
-                      节点名称 <span style="color: red;">*</span>
+                      <span class="name">节点名称</span>
-                      <span style="position: absolute; right: 0; top: 0;">
+                      <span class="node-index"> 节点索引：{{ state.node_idx }} </span>
-                        <span style="background-color: #f5f6f8; padding: 2px 5px; border: 1px solid #d7d9dc; border-radius: 3px; color: #141e31; font-size: 12px; font-weight: 400; line-height: 22px; text-align: center; width: 100px;">
-                          节点索引：{{ state.node_idx }}
-                        </span>
-                      </span>
                     </div>
                     <el-input v-model="state.node_name" style="margin-top: 5px;" />
                   </el-form-item>
                   <div v-if="state.user_attr_set" class="node-user">
-                    <div style="font-size: 14px; margin-bottom: 10px;">
+                    <div class="name">节点负责人</div>
-                      节点负责人 <span style="color: red;">*</span>
+                    <div class="flow-tag__wrapper" @click="openUserForm">
-                    </div>
-                    <div class="flow-tag__wrapper" style="max-height: 100px; overflow: auto;" @click="openUserForm">
                       <el-tag
                         v-if="state.userTags.length"
                         v-for="tag in state.userTags"
                         :key="tag.name"
                         style="margin: 0 0.25rem 0.5rem 0.25rem;"
                       >
-                        <el-icon v-if="tag.type === 'dept'" style="display: inline-block; vertical-align: middle; line-height: 10px;height: 13px;"><House /></el-icon>
+                        <el-icon v-if="tag.type === 'dept'" class="icon" style="height: 13px;"><House /></el-icon>
-                        <el-icon v-if="tag.type === 'user'" style="display: inline-block; vertical-align: middle; line-height: 10px;height: 12px;"><Female /></el-icon>
+                        <el-icon v-if="tag.type === 'user'" class="icon" style="height: 12px;"><Female /></el-icon>
-                        <el-icon v-if="tag.type === 'role'" style="display: inline-block; vertical-align: middle; line-height: 10px;height: 12px;"><User /></el-icon>
+                        <el-icon v-if="tag.type === 'role'" class="icon" style="height: 12px;"><User /></el-icon>
-                        <span style="margin-left: 2px;display: inline-block; vertical-align: middle; line-height: 10px; height: 10px;">{{ tag.name }}</span>
+                        <span class="icon" style="margin-left: 2px; height: 10px;">{{ tag.name }}</span>
                       </el-tag>
                       <div v-else class="text-empty">请选择成员</div>
                     </div>
@@ -316,12 +309,11 @@
             <span style="font-size: 12px; transform: scale(0.8); margin-top: 2px;">启用</span>
           </div>
         </el-tooltip> -->
-        <div style="position: absolute; top:20px; right: 15px;">
+        <div class="select-version-wrapper">
           <el-dropdown trigger="click">
-            <div style="margin-left: 15px;">
+            <div class="select-version-show">
-              <div v-if="state.select_flow_version === state.current_enable_version" style="width: 10px; height: 10px; background-color: #009688; border-radius: 50%; display: inline-block; margin-right: 8px;"></div>
+              <div :class="[state.select_flow_version === state.current_enable_version ? 'version-icon-actived' : 'version-icon-selected']"></div>
-              <div v-else style="width: 10px; height: 10px; background-color: #f0a800; border-radius: 50%; display: inline-block; margin-right: 8px;"></div>
+              <span class="text">流程版本 (V{{ state.select_flow_version }})</span>
-              <span style="font-size: 13px;">流程版本 (V{{ state.select_flow_version }})</span>
             </div>
             <template #dropdown>
               <el-dropdown-menu>
@@ -329,12 +321,14 @@
                   <i v-if="item.code === state.select_flow_version" class="el-icon-check" style="color: #009688; margin-right: 8px;"></i>
                   <div v-else style="width: 15px; height: 15px;display: inline-block; margin-right: 8px;"></div>
                   <span>流程版本 (V{{ item.code }})</span>
-                  <span v-if="item.code === state.current_enable_version" style="background: #edf9f1; border-color: #46c26f; color: #46c26f;font-size: 10px; padding: 0 5px; border-radius: 3px; margin-left: 8px;">启用中</span>
+                  <span v-if="item.code === state.current_enable_version" class="version-status">启用中</span>
                   <!-- <span @click="showEditFlowVersion(item.id, item.code, item.note)" style="margin-left: 10px;">
                     <i class="el-icon-edit-outline"></i>
                   </span> -->
                 </el-dropdown-item>
-                <el-dropdown-item @click.native="addFlowVersion" style="justify-content: center;"><i class="el-icon-circle-plus-outline"></i>新增流程</el-dropdown-item>
+                <el-dropdown-item @click.native="addFlowVersion" style="justify-content: center;">
+                  <i class="el-icon-circle-plus-outline"></i>新增流程
+                </el-dropdown-item>
               </el-dropdown-menu>
             </template>
           </el-dropdown>
@@ -694,15 +688,27 @@ export default {
     });
     /***************** 版本操作 ***************/
+
+    /**
+     * 切换版本信息
+     * @param id
+     * @param code
+     * @param note
+     */
     const onSelectFlowVersion = (id: number, code: number, note: string) => {
-      // 切换版本信息
       state.reloadLoading = true; // 打开loading
       updateFlowId(id); // 更新缓存flow_id
       getFlowData(id); // 更新流程图数据
       state.select_flow_version = code;
     }
+
+    /**
+     * 显示编辑版本信息
+     * @param id
+     * @param code
+     * @param note
+     */
     const showEditFlowVersion = (id: number, code: number, note: string) => {
-      // 切换版本信息
       state.dialogVersionFormVisible = true;
       state.versionForm = { // 当前版本信息
         code,
@@ -712,7 +718,10 @@ export default {
       }
     }
-    const addFlowVersion = async () => { // 新增版本
+    /**
+     * 新增版本
+     */
+    const addFlowVersion = async () => {
       const { code, data } = await saveFlowAPI({ form_id: +form_id, flow_id: '', data: JSON.stringify(AppData) });
       if (code) {
         ElMessage({
@@ -1578,6 +1587,8 @@ body {
   border: 1px dashed #dcdfe6;
   padding: 10px;
   margin-bottom: 10px;
+  max-height: 100px;
+  overflow: auto;
   &:hover {
     cursor: pointer;
   }
@@ -1586,6 +1597,82 @@ body {
     text-align: center;
     color: #dcdfe6;
   }
+  .icon {
+    display: inline-block; vertical-align: middle; line-height: 10px;
+  }
+}
+
+.main-attr-set {
+  .node-name {
+    .name {
+      &::after {
+        content: '*';
+        color: red;
+      }
+    }
+  }
+  .node-index {
+    position: absolute;
+    right: 0;
+    top: 0;
+    background-color: #f5f6f8;
+    padding: 2px 5px;
+    border: 1px solid #d7d9dc;
+    border-radius: 3px;
+    color: #141e31;
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 22px;
+    text-align: center;
+    width: 100px;
+  }
+  .node-user {
+    .name {
+      font-size: 14px;
+      margin-bottom: 10px;
+      &::after {
+        content: '*';
+        color: red;
+      }
+    }
+  }
+}
+
+.select-version-wrapper {
+  position: absolute;
+  top:20px;
+  right: 15px;
+  .select-version-show {
+    margin-left: 15px;
+    .version-icon-actived {
+      width: 10px;
+      height: 10px;
+      background-color: #009688;
+      border-radius: 50%;
+      display: inline-block;
+      margin-right: 8px;
+    }
+    .version-icon-selected {
+      width: 10px;
+      height: 10px;
+      background-color: #f0a800;
+      border-radius: 50%;
+      display: inline-block;
+      margin-right: 8px;
+    }
+    .text {
+      font-size: 13px;
+    }
+  }
+  .version-status {
+    background: #edf9f1;
+    border-color: #46c26f;
+    color: #46c26f;
+    font-size: 10px;
+    padding: 0 5px;
+    border-radius: 3px;
+    margin-left: 8px;
+  }
 }
 .more-attr {