feat: 图层中增加锁定状态图标的显示

shawnphang · Jul 15, 2024 · e3a8dde · e3a8dde
1 parent 78af269
commit e3a8dde
Showing 1 changed file with 14 additions and 7 deletions.
diff --git a/src/components/layer.vue b/src/components/layer.vue
@@ -17,12 +17,18 @@
           :key="item.id"
           :class="isSelect(item) && 'active'"
         >
-          <Tooltip :content="item.name || item.text || item.type" placement="left">
-            <div class="ellipsis">
-              <span :class="isSelect(item) && 'active'" v-html="iconType(item.type)"></span>
-              | {{ textType(item.type, item) }}
-            </div>
-          </Tooltip>
+          <Row class="ellipsis">
+            <Col span="20">
+              <Tooltip :content="item.name || item.text || item.type" placement="left">
+                <span :class="isSelect(item) && 'active'" v-html="iconType(item.type)"></span>
+                | {{ textType(item.type, item) }}
+              </Tooltip>
+            </Col>
+            <Col span="4">
+              <Button long v-if="item.isLock" icon="md-lock" type="text"></Button>
+              <Button long v-else icon="md-unlock" type="text"></Button>
+            </Col>
+          </Row>
         </div>
       </div>
       <!-- 层级调整按钮 -->
@@ -135,12 +141,13 @@ const getList = () => {
   ]
     .reverse()
     .map((item) => {
-      const { type, id, name, text } = item;
+      const { type, id, name, text, selectable } = item;
       return {
         type,
         id,
         name,
         text,
+        isLock: !selectable,
       };
     });
   list.value = uniqBy(unref(list), 'id');