抽离公共状态组件
This commit is contained in:
@@ -50,10 +50,7 @@
|
||||
<text class="td-cell flex-2" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">{{ item.description || '-' }}</text>
|
||||
<text class="td-cell flex-1">{{ item.sort_order }}</text>
|
||||
<view class="td-cell flex-2 row-center">
|
||||
<view class="switch-mock" :class="item.is_active ? 'switch-on' : ''" @click="toggleStatus(item)">
|
||||
<view class="switch-dot"></view>
|
||||
<text class="switch-text">{{ item.is_active ? '开启' : '关闭' }}</text>
|
||||
</view>
|
||||
<StatusSwitch v-model="item.is_active" @change="toggleStatus(item)" />
|
||||
</view>
|
||||
<view class="td-cell flex-3 row-center">
|
||||
<text class="btn-link" @click="openDrawer(item)">编辑</text>
|
||||
@@ -75,10 +72,7 @@
|
||||
<text class="td-cell flex-2" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">{{ child.description || '-' }}</text>
|
||||
<text class="td-cell flex-1">{{ child.sort_order }}</text>
|
||||
<view class="td-cell flex-2 row-center">
|
||||
<view class="switch-mock" :class="child.is_active ? 'switch-on' : ''" @click="toggleStatus(child)">
|
||||
<view class="switch-dot"></view>
|
||||
<text class="switch-text">{{ child.is_active ? '开启' : '关闭' }}</text>
|
||||
</view>
|
||||
<StatusSwitch v-model="child.is_active" @change="toggleStatus(child)" />
|
||||
</view>
|
||||
<view class="td-cell flex-3 row-center">
|
||||
<text class="btn-link" @click="openDrawer(child)">编辑</text>
|
||||
@@ -154,10 +148,7 @@
|
||||
<view class="form-item">
|
||||
<view class="form-label-box"><text class="form-label">状态:</text></view>
|
||||
<view class="form-input-box">
|
||||
<view class="switch-mock" :class="form.is_active ? 'switch-on' : ''" @click="form.is_active = !form.is_active">
|
||||
<view class="switch-dot"></view>
|
||||
<text class="switch-text">{{ form.is_active ? '开启' : '关闭' }}</text>
|
||||
</view>
|
||||
<StatusSwitch v-model="form.is_active" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -174,6 +165,7 @@
|
||||
<script setup lang="uts">
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import supa from '@/components/supadb/aksupainstance.uts'
|
||||
import StatusSwitch from '@/components/StatusSwitch.uvue'
|
||||
|
||||
interface CateItem {
|
||||
id: string; // Updated to match UUID string type per DB documentation
|
||||
@@ -669,51 +661,6 @@ align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Switch Mock */
|
||||
.switch-mock {
|
||||
width: 54px;
|
||||
height: 24px;
|
||||
background-color: #ccc;
|
||||
border-radius: 12px;
|
||||
position: relative;
|
||||
transition: all 0.3s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 6px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.switch-on {
|
||||
background-color: #1890ff;
|
||||
}
|
||||
|
||||
.switch-dot {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background-color: #fff;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
left: 3px;
|
||||
top: 3px;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.switch-on .switch-dot {
|
||||
left: 33px;
|
||||
}
|
||||
|
||||
.switch-text {
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
margin-left: auto;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.switch-on .switch-text {
|
||||
margin-left: 0;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
/* Drawer styles */
|
||||
.drawer-mask {
|
||||
position: fixed;
|
||||
|
||||
Reference in New Issue
Block a user