460 lines
9.0 KiB
Plaintext
460 lines
9.0 KiB
Plaintext
<template>
|
|
<view class="user-label-page">
|
|
<view class="content-card">
|
|
<!-- 鎿嶄綔鎸夐挳琛?-->
|
|
<view class="action-bar">
|
|
<button class="btn primary small" @click="onAddLabel">娣诲姞鏍囩</button>
|
|
</view>
|
|
|
|
<!-- 鏍囩鍒楄〃琛ㄦ牸 -->
|
|
<view class="table-container">
|
|
<!-- 琛ㄥご -->
|
|
<view class="table-header">
|
|
<view class="col col-id"><text>ID</text></view>
|
|
<view class="col col-name"><text>鏍囩鍚嶇О</text></view>
|
|
<view class="col col-ops"><text>鎿嶄綔</text></view>
|
|
</view>
|
|
|
|
<!-- 琛ㄦ牸鍐呭 -->
|
|
<view class="table-body">
|
|
<view v-for="label in labelList" :key="label.id" class="table-row">
|
|
<view class="col col-id"><text>{{ label.id }}</text></view>
|
|
<view class="col col-name"><text>{{ label.name }}</text></view>
|
|
<view class="col col-ops">
|
|
<text class="op-link" @click="onEditLabel(label)">淇敼</text>
|
|
<view class="op-divider">|</view>
|
|
<text class="op-link" @click="onDeleteLabel(label)">鍒犻櫎</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 鍒嗛〉鍖哄煙 -->
|
|
<view class="pagination-row">
|
|
<text class="total-text">鍏?{{ labelList.length }} 鏉?/text>
|
|
<view class="page-size-selector">
|
|
<text>15鏉?椤?/text>
|
|
<text class="arrow">鈻?/text>
|
|
</view>
|
|
<view class="page-btns">
|
|
<view class="page-btn disabled"><text>鈥?/text></view>
|
|
<view class="page-btn active"><text>1</text></view>
|
|
<view class="page-btn disabled"><text>鈥?/text></view>
|
|
</view>
|
|
<view class="page-jump">
|
|
<text>鍓嶅線</text>
|
|
<input class="jump-input" value="1" />
|
|
<text>椤?/text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 娣诲姞/淇敼鏍囩寮圭獥 -->
|
|
<view class="modal-mask" v-if="showModal" @click="closeModal">
|
|
<view class="modal-content" @click.stop>
|
|
<view class="modal-header">
|
|
<text class="modal-title">{{ modalTitle }}</text>
|
|
<text class="modal-close" @click="closeModal">脳</text>
|
|
</view>
|
|
<view class="modal-body">
|
|
<view class="form-item">
|
|
<view class="label-box">
|
|
<text class="required">*</text>
|
|
<text class="label">鏍囩鍚嶇О锛?/text>
|
|
</view>
|
|
<input
|
|
class="form-input"
|
|
v-model="formData.name"
|
|
placeholder="璇疯緭鍏ユ爣绛惧悕绉?
|
|
autofocus
|
|
/>
|
|
</view>
|
|
</view>
|
|
<view class="modal-footer">
|
|
<button class="btn ghost" @click="closeModal">鍙栨秷</button>
|
|
<button class="btn primary" @click="submitForm">纭畾</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="uts">
|
|
import { ref, reactive, computed } from 'vue'
|
|
|
|
// 鏍囩鏁版嵁
|
|
const labelList = ref([
|
|
{ id: 1, name: '鏂板鎴? },
|
|
{ id: 2, name: '鑰佸鎴? },
|
|
{ id: 3, name: '娲昏穬瀹㈡埛' },
|
|
{ id: 4, name: '娼滃湪瀹㈡埛' }
|
|
])
|
|
|
|
// 寮圭獥鐘舵€?
|
|
const showModal = ref(false)
|
|
const isEdit = ref(false)
|
|
const modalTitle = computed(() => isEdit.value ? '淇敼鏍囩' : '娣诲姞鏍囩')
|
|
|
|
// 琛ㄥ崟鏁版嵁
|
|
const formData = reactive({
|
|
id: 0,
|
|
name: ''
|
|
})
|
|
|
|
// 娣诲姞鏍囩
|
|
function onAddLabel() {
|
|
isEdit.value = false
|
|
formData.id = 0
|
|
formData.name = ''
|
|
showModal.value = true
|
|
}
|
|
|
|
// 淇敼鏍囩
|
|
function onEditLabel(label: any) {
|
|
isEdit.value = true
|
|
formData.id = label.id
|
|
formData.name = label.name
|
|
showModal.value = true
|
|
}
|
|
|
|
// 鍒犻櫎鏍囩
|
|
function onDeleteLabel(label: any) {
|
|
uni.showModal({
|
|
title: '鎻愮ず',
|
|
content: '纭畾瑕佸垹闄よ鏍囩鍚楋紵',
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
labelList.value = labelList.value.filter(item => item.id !== label.id)
|
|
uni.showToast({ title: '鍒犻櫎鎴愬姛', icon: 'success' })
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
// 鍏抽棴寮圭獥
|
|
function closeModal() {
|
|
showModal.value = false
|
|
}
|
|
|
|
// 鎻愪氦琛ㄥ崟
|
|
function submitForm() {
|
|
if (!formData.name) {
|
|
uni.showToast({ title: '璇疯緭鍏ユ爣绛惧悕绉?, icon: 'none' })
|
|
return
|
|
}
|
|
|
|
if (isEdit.value) {
|
|
const index = labelList.value.findIndex(item => item.id === formData.id)
|
|
if (index > -1) {
|
|
labelList.value[index].name = formData.name
|
|
}
|
|
uni.showToast({ title: '淇敼鎴愬姛', icon: 'success' })
|
|
} else {
|
|
const newId = labelList.value.length > 0 ? Math.max(...labelList.value.map(g => g.id)) + 1 : 1
|
|
labelList.value.push({
|
|
id: newId,
|
|
name: formData.name
|
|
})
|
|
uni.showToast({ title: '娣诲姞鎴愬姛', icon: 'success' })
|
|
}
|
|
|
|
closeModal()
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.user-label-page {
|
|
/* padding removed */
|
|
|
|
|
|
}
|
|
|
|
.content-card {
|
|
background: #fff;
|
|
border-radius: 4px;
|
|
padding: 24px;
|
|
}
|
|
|
|
.action-bar {
|
|
margin-bottom: 20px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
/* 鎸夐挳鏍峰紡 */
|
|
.btn {
|
|
height: 32px;
|
|
line-height: 32px;
|
|
padding: 0 15px;
|
|
font-size: 14px;
|
|
border-radius: 2px;
|
|
border: 1px solid #d9d9d9;
|
|
background: #fff;
|
|
color: #666;
|
|
cursor: pointer;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: auto;
|
|
margin: 0;
|
|
}
|
|
|
|
.btn.primary {
|
|
background-color: #1890ff;
|
|
border-color: #1890ff;
|
|
color: #fff;
|
|
}
|
|
|
|
.btn.ghost {
|
|
background-color: #fff;
|
|
border-color: #d9d9d9;
|
|
color: #666;
|
|
}
|
|
|
|
.btn.small {
|
|
height: 32px;
|
|
padding: 0 12px;
|
|
}
|
|
|
|
/* 琛ㄦ牸鏍峰紡 */
|
|
.table-container {
|
|
border: 1px solid #f0f0f0;
|
|
border-radius: 2px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.table-header {
|
|
display: flex;
|
|
flex-direction: row;
|
|
background-color: #f8faff;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
}
|
|
|
|
.table-header .col {
|
|
padding: 12px 16px;
|
|
font-weight: 500;
|
|
color: #333;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.table-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
}
|
|
|
|
.table-row:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.table-row .col {
|
|
padding: 12px 16px;
|
|
color: #666;
|
|
font-size: 14px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
|
|
.col-id {
|
|
width: 100px;
|
|
}
|
|
|
|
.col-name {
|
|
flex: 1;
|
|
}
|
|
|
|
.col-ops {
|
|
width: 150px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.op-link {
|
|
color: #1890ff;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.op-link:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.op-divider {
|
|
margin: 0 8px;
|
|
color: #1890ff;
|
|
font-size: 12px;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
/* 鍒嗛〉鏍峰紡 */
|
|
.pagination-row {
|
|
margin-top: 24px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
color: #666;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.total-text {
|
|
margin-right: 16px;
|
|
}
|
|
|
|
.page-size-selector {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 8px;
|
|
height: 32px;
|
|
border: 1px solid #d9d9d9;
|
|
border-radius: 2px;
|
|
margin-right: 16px;
|
|
|
|
.arrow {
|
|
font-size: 10px;
|
|
margin-left: 8px;
|
|
color: #999;
|
|
}
|
|
}
|
|
|
|
.page-btns {
|
|
display: flex;
|
|
margin-right: 16px;
|
|
}
|
|
|
|
.page-btn {
|
|
width: 32px;
|
|
height: 32px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: 1px solid #d9d9d9;
|
|
border-radius: 2px;
|
|
margin-right: 8px;
|
|
cursor: pointer;
|
|
|
|
&.active {
|
|
background: #1890ff;
|
|
border-color: #1890ff;
|
|
color: #fff;
|
|
}
|
|
|
|
&.disabled {
|
|
color: #ccc;
|
|
cursor: not-allowed;
|
|
}
|
|
}
|
|
|
|
.page-jump {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.jump-input {
|
|
width: 48px;
|
|
height: 32px;
|
|
border: 1px solid #d9d9d9;
|
|
border-radius: 2px;
|
|
margin: 0 8px;
|
|
text-align: center;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
|
|
/* 寮圭獥鏍峰紡 */
|
|
.modal-mask {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0, 0, 0, 0.45);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 2000;
|
|
}
|
|
|
|
.modal-content {
|
|
width: 520px;
|
|
background: #fff;
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.modal-header {
|
|
padding: 16px 24px;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.modal-title {
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
color: #333;
|
|
}
|
|
|
|
.modal-close {
|
|
font-size: 20px;
|
|
color: #999;
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
color: #666;
|
|
}
|
|
}
|
|
|
|
.modal-body {
|
|
padding: 40px 24px;
|
|
}
|
|
|
|
.form-item {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.label-box {
|
|
width: 100px;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
}
|
|
|
|
.required {
|
|
color: #ff4d4f;
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.label {
|
|
color: #333;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.form-input {
|
|
flex: 1;
|
|
height: 32px;
|
|
padding: 4px 11px;
|
|
border: 1px solid #d9d9d9;
|
|
border-radius: 2px;
|
|
font-size: 14px;
|
|
|
|
&:focus {
|
|
border-color: #40a9ff;
|
|
outline: none;
|
|
}
|
|
}
|
|
|
|
.modal-footer {
|
|
padding: 10px 16px;
|
|
border-top: 1px solid #f0f0f0;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 8px;
|
|
}
|
|
</style>
|
|
|