medical-mall/pages/mall/admin/user/grouping/index.uvue

<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 {
  /* 使用 Layout 的背景和内边距 */
  min-height: 100vh;
}

.content-card {
  background: #fff;
  border-radius: 4px;
  padding: var(--admin-card-padding);
}

.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>