466 lines
9.1 KiB
Plaintext
466 lines
9.1 KiB
Plaintext
<template>
|
|
<view class="user-group-page">
|
|
<view class="content-card">
|
|
<!-- 鎿嶄綔鎸夐挳琛?-->
|
|
<view class="action-bar">
|
|
<button class="btn primary small" @click="onAddGroup">娣诲姞鍒嗙粍</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="group in groupList" :key="group.id" class="table-row">
|
|
<view class="col col-id"><text>{{ group.id }}</text></view>
|
|
<view class="col col-name"><text>{{ group.name }}</text></view>
|
|
<view class="col col-ops">
|
|
<text class="op-link" @click="onEditGroup(group)">淇敼</text>
|
|
<view class="op-divider">|</view>
|
|
<text class="op-link" @click="onDeleteGroup(group)">鍒犻櫎</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 鍒嗛〉鍖哄煙 -->
|
|
<view class="pagination-row">
|
|
<text class="total-text">鍏?{{ groupList.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 groupList = ref([
|
|
{ id: 251, name: 'A绫诲鎴? },
|
|
{ id: 252, name: 'B绫诲鎴? },
|
|
{ id: 253, name: 'C绫诲鎴? },
|
|
{ id: 254, name: 'D绫诲鎴? }
|
|
])
|
|
|
|
// 寮圭獥鐘舵€?
|
|
const showModal = ref(false)
|
|
const isEdit = ref(false)
|
|
const modalTitle = computed(() => isEdit.value ? '淇敼鍒嗙粍' : '娣诲姞鍒嗙粍')
|
|
|
|
// 琛ㄥ崟鏁版嵁
|
|
const formData = reactive({
|
|
id: 0,
|
|
name: ''
|
|
})
|
|
|
|
// 娣诲姞鍒嗙粍
|
|
function onAddGroup() {
|
|
isEdit.value = false
|
|
formData.id = 0
|
|
formData.name = ''
|
|
showModal.value = true
|
|
}
|
|
|
|
// 淇敼鍒嗙粍
|
|
function onEditGroup(group: any) {
|
|
isEdit.value = true
|
|
formData.id = group.id
|
|
formData.name = group.name
|
|
showModal.value = true
|
|
}
|
|
|
|
// 鍒犻櫎鍒嗙粍
|
|
function onDeleteGroup(group: any) {
|
|
uni.showModal({
|
|
title: '鎻愮ず',
|
|
content: '纭畾瑕佸垹闄よ鍒嗙粍鍚楋紵',
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
groupList.value = groupList.value.filter(item => item.id !== group.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 = groupList.value.findIndex(item => item.id === formData.id)
|
|
if (index > -1) {
|
|
groupList.value[index].name = formData.name
|
|
}
|
|
uni.showToast({ title: '淇敼鎴愬姛', icon: 'success' })
|
|
} else {
|
|
// 妯℃嫙娣诲姞
|
|
const newId = groupList.value.length > 0 ? Math.max(...groupList.value.map(g => g.id)) + 1 : 1
|
|
groupList.value.push({
|
|
id: newId,
|
|
name: formData.name
|
|
})
|
|
uni.showToast({ title: '娣诲姞鎴愬姛', icon: 'success' })
|
|
}
|
|
|
|
closeModal()
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.user-group-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;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
color: #666;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.total-text {
|
|
margin-right: 16px;
|
|
}
|
|
|
|
.page-size-selector {
|
|
display: flex;
|
|
flex-direction: row;
|
|
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;
|
|
flex-direction: row;
|
|
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;
|
|
flex-direction: row;
|
|
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>
|
|
|