cfc/cfc-web/src/views/Families.vue

<template>
  <div class="page-container">
    <el-card>
      <div slot="header">
        <span>家庭管理</span>
        <el-button
          type="primary"
          size="small"
          style="float: right"
          @click="handleRefresh"
          :loading="loading"
        >
          刷新
        </el-button>
      </div>

      <!-- 搜索 -->
      <el-form :inline="true" :model="searchForm" style="margin-bottom: 20px">
        <el-form-item label="家庭名称">
          <el-input
            v-model="searchForm.name"
            placeholder="请输入家庭名称"
            clearable
            @keyup.enter.native="handleSearch"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
        </el-form>

        <!-- 家庭列表 -->
                <div class="adm-table-wrap">
<el-table
          :data="tableData"
          border
          v-loading="loading"
          style="width: 100%"
          height="100%"
        >
        <el-table-column prop="id" label="ID" width="80">
          <template slot="header">
            <span class="sort-header" @click.stop="onSortClick('id', $event)">ID<span v-if="sortIndex('id') !== null" class="sort-index" :class="sortClass('id') === 'sort-asc' ? 'sort-asc-badge' : 'sort-desc-badge'">{{ sortIndex('id') }}</span>{{ sortIcon('id') }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="家庭名称" width="200">
          <template slot="header">
            <span class="sort-header" @click.stop="onSortClick('name', $event)">家庭名称<span v-if="sortIndex('name') !== null" class="sort-index" :class="sortClass('name') === 'sort-asc' ? 'sort-asc-badge' : 'sort-desc-badge'">{{ sortIndex('name') }}</span>{{ sortIcon('name') }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="inviteCode" label="邀请码" width="150">
          <template slot="header">
            <span class="sort-header" @click.stop="onSortClick('inviteCode', $event)">邀请码<span v-if="sortIndex('inviteCode') !== null" class="sort-index" :class="sortClass('inviteCode') === 'sort-asc' ? 'sort-asc-badge' : 'sort-desc-badge'">{{ sortIndex('inviteCode') }}</span>{{ sortIcon('inviteCode') }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="createdAt" label="创建时间" width="180">
          <template slot-scope="scope">
            {{ formatDate(scope.row.createdAt) }}
          </template>
          <template slot="header">
            <span class="sort-header" @click.stop="onSortClick('createdAt', $event)">创建时间<span v-if="sortIndex('createdAt') !== null" class="sort-index" :class="sortClass('createdAt') === 'sort-asc' ? 'sort-asc-badge' : 'sort-desc-badge'">{{ sortIndex('createdAt') }}</span>{{ sortIcon('createdAt') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="250" fixed="right">
          <template slot-scope="{ row }">
            <el-button size="mini" type="primary" @click="handleEdit(row)">编辑</el-button>
            <el-dropdown trigger="hover" @command="(cmd) => handleActionCmd(row, cmd)">
              <el-button size="mini">
                更多<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="viewMembers" icon="el-icon-user">查看成员</el-dropdown-item>
                <el-dropdown-item command="viewCoupons" icon="el-icon-ticket">优惠券列表</el-dropdown-item>
                <el-dropdown-item command="viewUsage" icon="el-icon-document">使用记录</el-dropdown-item>
                <el-dropdown-item command="issueCoupon" icon="el-icon-ticket">发放优惠券</el-dropdown-item>
                <el-dropdown-item command="delete" icon="el-icon-delete">删除</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
        
        
        </el-table>
        </div>

        <!-- 分页 -->
      <el-pagination
        style="margin-top: 20px; text-align: right"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagination.current"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pagination.size"
        :total="pagination.total"
        layout="total, sizes, prev, pager, next, jumper"
      ></el-pagination>
    </el-card>

    <!-- 编辑家庭弹窗 -->
    <el-dialog
      title="编辑家庭"
      :visible.sync="editDialogVisible"
      width="500px"
    >
      <el-form :model="editForm" :rules="editRules" ref="editForm" label-width="100px">
        <el-form-item label="家庭名称" prop="name">
          <el-input v-model="editForm.name" placeholder="请输入家庭名称"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitEdit" :loading="submitting">确定</el-button>
      </div>
    </el-dialog>

    <!-- 查看成员弹窗 -->
    <el-dialog
      title="家庭成员"
      :visible.sync="membersDialogVisible"
      width="900px"
    >
      <div v-if="membersData.family">
        <el-descriptions :column="2" border style="margin-bottom: 20px">
          <el-descriptions-item label="家庭名称">{{ membersData.family.name }}</el-descriptions-item>
          <el-descriptions-item label="邀请码">{{ membersData.family.inviteCode }}</el-descriptions-item>
        </el-descriptions>

        <el-divider content-position="left">成员列表（仅区分管理员 / 成员）</el-divider>
        <el-table
          :data="membersData.members"
          border
          style="width: 100%"
          :max-height="350"
          v-if="membersData.members && membersData.members.length > 0"
        >
          <el-table-column prop="nickname" label="昵称" width="150"></el-table-column>
          <el-table-column prop="phone" label="手机号" width="150"></el-table-column>
          <el-table-column prop="gender" label="性别" width="80">
            <template slot-scope="scope">
              {{ scope.row.gender === 'male' ? '男' : scope.row.gender === 'female' ? '女' : '-' }}
            </template>
          </el-table-column>
          <el-table-column prop="age" label="年龄" width="80">
            <template slot-scope="scope">
              {{ scope.row.age || '-' }}
            </template>
          </el-table-column>
          <el-table-column prop="totalPoints" label="总积分" width="90">
            <template slot-scope="scope">
              <el-tag type="success">{{ scope.row.totalPoints || 0 }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="角色" width="100">
            <template slot-scope="scope">
              <el-tag :type="scope.row.role === 'admin' ? 'danger' : 'info'" size="small">
                {{ scope.row.role === 'admin' ? '管理员' : '成员' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="140">
            <template slot-scope="scope">
              <el-button
                size="mini"
                :type="scope.row.role === 'admin' ? '' : 'primary'"
                @click="toggleAdmin(scope.row)"
              >
                {{ scope.row.role === 'admin' ? '撤销管理员' : '设为管理员' }}
              </el-button>
            </template>
          </el-table-column>
        <el-empty v-else description="暂无成员" :image-size="60"></el-empty>
      
      </el-table>
      </div>
    </el-dialog>

    <!-- 发放优惠券弹窗 -->
    <el-dialog
      title="发放优惠券"
      :visible.sync="issueDialogVisible"
      width="500px"
    >
      <el-form :model="couponForm" label-width="100px">
        <el-form-item label="家庭">
          <el-input :value="couponForm.familyName" disabled></el-input>
        </el-form-item>
        <el-form-item label="优惠券" required>
          <el-select v-model="couponForm.couponId" placeholder="请选择优惠券" style="width: 100%">
            <el-option
              v-for="c in couponOptions"
              :key="c.id"
              :label="couponLabel(c)"
              :value="c.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="发放数量">
          <el-input-number v-model="couponForm.quantity" :min="1" :max="100" :step="1"></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="issueDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmIssueCoupon" :loading="couponSubmitting">确认发放</el-button>
      </div>
    </el-dialog>

    <!-- 优惠券列表弹窗 -->
    <el-dialog
      title="优惠券列表"
      :visible.sync="couponDialogVisible"
      width="900px"
    >
      <el-form :inline="true" style="margin-bottom: 12px">
        <el-form-item label="状态">
          <el-select v-model="couponStatusFilter" placeholder="全部" clearable size="small" style="width:120px">
            <el-option label="可用" value="AVAILABLE"></el-option>
            <el-option label="已使用" value="USED"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button size="small" @click="loadCoupons(currentRow.id)">刷新</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="couponListData" border v-loading="couponLoading" style="width:100%" max-height="400">
        <el-table-column prop="name" label="券名称" min-width="140"></el-table-column>
        <el-table-column prop="type" label="类型" width="80">
          <template slot-scope="scope">
            <el-tag size="mini" :type="scope.row.type === 'DISCOUNT' ? '' : 'success'">{{ scope.row.type === 'DISCOUNT' ? '折扣' : '满减' }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="面值/折扣" width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.type === 'DISCOUNT' && scope.row.discountRate">{{ (scope.row.discountRate / 100).toFixed(1) }}折</span>
            <span v-else-if="scope.row.value">{{ (scope.row.value / 100).toFixed(2) }}元</span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" width="80">
          <template slot-scope="scope">
            <el-tag size="mini" :type="scope.row.status === 'AVAILABLE' ? 'success' : 'info'">{{ scope.row.status === 'AVAILABLE' ? '可用' : '已使用' }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="receivedAt" label="领取时间" width="160">
          <template slot-scope="scope">{{ formatTime(scope.row.receivedAt) }}</template>
        </el-table-column>
        <el-table-column prop="usedAt" label="使用时间" width="160">
          <template slot-scope="scope">{{ formatTime(scope.row.usedAt) }}</template>
        </el-table-column>
      <el-pagination
        style="margin-top: 12px; text-align: right"
        @size-change="onCouponSizeChange"
        @current-change="onCouponPageChange"
        :current-page="couponPagination.current"
        :page-sizes="[10, 20, 50]"
        :page-size="couponPagination.size"
        :total="couponPagination.total"
        layout="total, sizes, prev, pager, next"
      ></el-pagination>
    </el-dialog>

    <!-- 使用记录弹窗 -->
    <el-dialog
      title="使用记录"
      :visible.sync="usageDialogVisible"
      width="800px"
    >
      <el-table :data="usageListData" border v-loading="usageLoading" style="width:100%" max-height="400">
        <el-table-column prop="name" label="券名称" min-width="140"></el-table-column>
        <el-table-column prop="type" label="类型" width="80">
          <template slot-scope="scope">
            <el-tag size="mini" :type="scope.row.type === 'DISCOUNT' ? '' : 'success'">{{ scope.row.type === 'DISCOUNT' ? '折扣' : '满减' }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="面值/折扣" width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.type === 'DISCOUNT' && scope.row.discountRate">{{ (scope.row.discountRate / 100).toFixed(1) }}折</span>
            <span v-else-if="scope.row.value">{{ (scope.row.value / 100).toFixed(2) }}元</span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column prop="orderId" label="订单号" width="120">
          <template slot-scope="scope">{{ scope.row.orderId || '-' }}</template>
        </el-table-column>
        <el-table-column prop="usedAt" label="使用时间" width="160">
          <template slot-scope="scope">{{ formatTime(scope.row.usedAt) }}</template>
        </el-table-column>
      <el-pagination
        style="margin-top: 12px; text-align: right"
        @size-change="onUsageSizeChange"
        @current-change="onUsagePageChange"
        :current-page="usagePagination.current"
        :page-sizes="[10, 20, 50]"
        :page-size="usagePagination.size"
        :total="usagePagination.total"
        layout="total, sizes, prev, pager, next"
      ></el-pagination>
    </el-dialog>
  
  </el-table>
  
  </el-table>
  </div>
</template>

<script>
import SortMixin from '@/mixins/SortMixin'
import { getFamilyList, getFamilyMembers, updateFamily, deleteFamily, setMemberAdminRole } from '@/api/admin'
import { getCouponList, issueFamilyCoupon, getFamilyCoupons, getFamilyCouponUsage } from '@/api/coupon'

export default {
  name: 'Families',
  mixins: [SortMixin],
  computed: {
    tableHeight() {
      return window.innerHeight - 340
    }
  },
  data() {
    return {
      loading: false,
      submitting: false,
      tableData: [],
      sortableColumns: { id: 'ID', name: '家庭名称', inviteCode: '邀请码', createdAt: '创建时间' },
      searchForm: {
        name: ''
      },
      pagination: {
        current: 1,
        size: 10,
        total: 0
      },
      editDialogVisible: false,
      editForm: {
        id: null,
        name: ''
      },
      editRules: {
        name: [
          { required: true, message: '请输入家庭名称', trigger: 'blur' }
        ]
      },
      membersDialogVisible: false,
      membersData: {
        family: null,
        members: []
      },
      couponDialogVisible: false,
      issueDialogVisible: false,
      couponForm: {
        familyId: null,
        couponId: null,
        quantity: 1
      },
      couponOptions: [],
      couponSubmitting: false,
      currentRow: null,
      couponListData: [],
      couponLoading: false,
      couponPagination: { current: 1, size: 20, total: 0 },
      couponStatusFilter: '',
      usageListData: [],
      usageLoading: false,
      usagePagination: { current: 1, size: 20, total: 0 },
      usageDialogVisible: false
    }
  },
  mounted() {
    // 检查是否有从用户管理跳转过来的familyId参数
    const familyId = this.$route.query.familyId
    if (familyId) {
      this.handleViewMembersById(parseInt(familyId))
    }
    this.loadFamilies()
  },
  methods: {
    loadList() {
      this.loadFamilies()
    },
    handleActionCmd(row, cmd) {
      switch (cmd) {
        case 'viewMembers': this.handleViewMembers(row); break;
        case 'viewCoupons': this.handleViewCoupons(row); break;
        case 'viewUsage': this.handleViewUsage(row); break;
        case 'issueCoupon': this.handleIssueCoupon(row); break;
        case 'edit': this.handleEdit(row); break;
        case 'delete': this.handleDelete(row); break;
      }
    },
    async loadFamilies() {
      this.loading = true
      try {
        const params = {
          page: this.pagination.current,
          size: this.pagination.size,
          ...this.searchForm
        }
        if (this.sortState.length > 0) params.sort = this.sortState
        const res = await getFamilyList(params)
        this.tableData = res.data.records || res.data || []
        this.pagination.total = res.data.total || this.tableData.length
      } catch (error) {
        this.$message.error(error.message || '加载家庭列表失败')
      } finally {
        this.loading = false
      }
    },
    handleSearch() {
      this.pagination.current = 1
      this.loadFamilies()
    },
    handleReset() {
      this.searchForm = {
        name: ''
      }
      this.handleSearch()
    },
    handleRefresh() {
      this.loadFamilies()
    },
    handleSizeChange(val) {
      this.pagination.size = val
      this.pagination.current = 1
      this.loadFamilies()
    },
    handleCurrentChange(val) {
      this.pagination.current = val
      this.loadFamilies()
    },
    handleEdit(row) {
      this.editForm = {
        id: row.id,
        name: row.name
      }
      this.editDialogVisible = true
    },
    async submitEdit() {
      this.$refs.editForm.validate(async (valid) => {
        if (valid) {
          this.submitting = true
          try {
            await updateFamily(this.editForm.id, this.editForm)
            this.$message.success('更新成功')
            this.editDialogVisible = false
            this.loadFamilies()
          } catch (error) {
            this.$message.error(error.message || '更新失败')
          } finally {
            this.submitting = false
          }
        }
      })
    },
    handleDelete(row) {
      this.$confirm(`确定要删除家庭 "${row.name}" 吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          await deleteFamily(row.id)
          this.$message.success('删除成功')
          this.loadFamilies()
        } catch (error) {
          this.$message.error(error.message || '删除失败')
        }
      }).catch(() => {})
    },
    async handleViewMembers(row) {
      await this.handleViewMembersById(row.id)
    },
    async handleViewMembersById(familyId) {
      this.loading = true
      try {
        const res = await getFamilyMembers(familyId)
        this.membersData = {
          family: res.data.family,
          members: res.data.members || []
        }
        this.membersDialogVisible = true
      } catch (error) {
        this.$message.error(error.message || '加载家庭成员失败')
      } finally {
        this.loading = false
      }
    },
    async toggleAdmin(row) {
      if (!this.membersData.family) return
      const targetIsAdmin = row.role !== 'admin'
      try {
        await setMemberAdminRole(this.membersData.family.id, row.memberId, targetIsAdmin)
        this.$message.success(targetIsAdmin ? '已设为管理员' : '已撤销管理员')
        await this.handleViewMembersById(this.membersData.family.id)
      } catch (error) {
        this.$message.error(error.message || '操作失败')
      }
    },
    async handleIssueCoupon(row) {
      this.couponForm = {
        familyId: row.id,
        familyName: row.name,
        couponId: null,
        quantity: 1
      }
      this.issueDialogVisible = true
      try {
        const res = await getCouponList({ page: 1, size: 999 })
        this.couponOptions = res.data.records || res.data.list || res.data || []
      } catch (error) {
        this.$message.error(error.message || '加载优惠券列表失败')
      }
    },
    couponLabel(c) {
      if (c.type === 'DISCOUNT') {
        return `${c.name}（${(c.discountRate / 100).toFixed(1)}折）`
      }
      return `${c.name}（${(c.value / 100).toFixed(2)}元）`
    },
    async confirmIssueCoupon() {
      if (!this.couponForm.couponId) {
        this.$message.warning('请选择优惠券')
        return
      }
      this.couponSubmitting = true
      try {
        await issueFamilyCoupon({
          familyId: this.couponForm.familyId,
          couponId: this.couponForm.couponId,
          quantity: this.couponForm.quantity
        })
        this.$message.success('发放成功')
        this.issueDialogVisible = false
      } catch (error) {
        this.$message.error(error.message || '发放失败')
      } finally {
        this.couponSubmitting = false
      }
    },
    formatDate(dateStr) {
      if (!dateStr) return '-'
      const date = new Date(dateStr)
      return date.toLocaleString('zh-CN')
    },
    formatTime(t) {
      return t ? t.replace('T', ' ').substring(0, 19) : '-'
    },
    handleViewCoupons(row) {
      this.currentRow = row
      this.couponPagination = { current: 1, size: 20, total: 0 }
      this.couponStatusFilter = ''
      this.couponListData = []
      this.couponDialogVisible = true
      this.loadCoupons()
    },
    async loadCoupons() {
      if (!this.currentRow) return
      this.couponLoading = true
      try {
        const res = await getFamilyCoupons({
          familyId: this.currentRow.id,
          status: this.couponStatusFilter || undefined,
          page: this.couponPagination.current,
          size: this.couponPagination.size
        })
        this.couponListData = res.data.records || []
        this.couponPagination.total = res.data.total || 0
      } catch (error) {
        this.$message.error(error.message || '加载优惠券列表失败')
      } finally {
        this.couponLoading = false
      }
    },
    onCouponPageChange(val) {
      this.couponPagination.current = val
      this.loadCoupons()
    },
    onCouponSizeChange(val) {
      this.couponPagination.size = val
      this.couponPagination.current = 1
      this.loadCoupons()
    },
    handleViewUsage(row) {
      this.currentRow = row
      this.usagePagination = { current: 1, size: 20, total: 0 }
      this.usageListData = []
      this.usageDialogVisible = true
      this.loadUsage()
    },
    async loadUsage() {
      if (!this.currentRow) return
      this.usageLoading = true
      try {
        const res = await getFamilyCouponUsage({
          familyId: this.currentRow.id,
          page: this.usagePagination.current,
          size: this.usagePagination.size
        })
        this.usageListData = res.data.records || []
        this.usagePagination.total = res.data.total || 0
      } catch (error) {
        this.$message.error(error.message || '加载使用记录失败')
      } finally {
        this.usageLoading = false
      }
    },
    onUsagePageChange(val) {
      this.usagePagination.current = val
      this.loadUsage()
    },
    onUsageSizeChange(val) {
      this.usagePagination.size = val
      this.usagePagination.current = 1
      this.loadUsage()
    }
  }
}
</script>

<style scoped>
.sort-header {
  cursor: pointer;
  user-select: none;
  font-weight: 500;
  font-size: 12px;
  white-space: nowrap;
}
.sort-header:hover {
  color: #409eff;
}
</style>