pap_web/view/admin/content/person_index.html

{% extends "../layout.html" %}

{% block title %}{{ columnInfo.name if columnInfo else '人员列表' }}{% endblock %}

{% block content %}
<div id="personApp">
  <el-card shadow="never">
    <template #header>
      <div class="flex items-center justify-between">
        <div class="flex items-center gap-2">
          <span class="font-medium">{{ columnInfo.name if columnInfo else '人员列表' }}</span>
          <el-tag type="danger" size="small">人员列表</el-tag>
        </div>
        <el-button type="primary" @click="openDialog()">+ 新增人员</el-button>
      </div>
    </template>

    <!-- 筛选栏 -->
    <div class="flex items-center gap-4 mb-4">
      <el-input v-model="query.keyword" placeholder="搜索姓名..." style="width:160px;" clearable @keyup.enter="loadList"></el-input>
      <el-select v-model="query.category" placeholder="分类" style="width:140px;" clearable>
        <el-option v-for="cat in categories" :key="cat" :label="cat" :value="cat"></el-option>
      </el-select>
      <el-button type="primary" @click="loadList">搜索</el-button>
      <el-button @click="resetQuery">重置</el-button>
    </div>

    <!-- 卡片列表 -->
    <div class="person-grid" v-loading="loading">
      <div v-for="(item, index) in list" :key="item.id" class="person-card">
        <div class="person-avatar" :style="{ background: item.avatar ? 'transparent' : getColor(index) }">
          <img v-if="item.avatar" :src="item.avatar" :alt="item.name">
          <span v-else>${ getInitial(item.name) }</span>
        </div>
        <div class="person-body">
          <div class="person-name">${ item.name }</div>
          <div class="person-title">${ item.title }</div>
          <div class="person-category" v-if="item.category">
            <el-tag size="small" type="info">${ item.category }</el-tag>
          </div>
          <div class="person-desc" v-if="item.description">${ item.description }</div>
          <div class="person-actions">
            <span class="person-sort">排序: ${ item.sort }</span>
            <el-button type="primary" link size="small" @click="openDialog(item)">编辑</el-button>
            <el-button type="danger" link size="small" @click="deleteItem(item)">删除</el-button>
          </div>
        </div>
      </div>
      <!-- 新增卡片 -->
      <div class="person-card person-card-add" @click="openDialog()">
        <div class="add-inner">
          <el-icon :size="32"><Plus /></el-icon>
          <span>新增人员</span>
        </div>
      </div>
    </div>

    <!-- 分页 -->
    <div class="flex justify-end mt-4" v-if="total > pageSize">
      <el-pagination background layout="prev, pager, next" :total="total" :page-size="pageSize" v-model:current-page="page" @current-change="loadList"></el-pagination>
    </div>
  </el-card>

  <!-- 新增/编辑弹窗 -->
  <el-dialog v-model="dialogVisible" :title="dialogTitle" width="580px" destroy-on-close draggable top="5vh">
    <div class="dialog-scroll-body">
      <el-form :model="form" label-width="80px">
        <!-- 头像上传 -->
        <el-form-item label="头像">
          <div class="avatar-upload-wrap">
            <div class="avatar-upload" @click="triggerUpload">
              <img v-if="form.avatar" :src="form.avatar" class="avatar-preview">
              <template v-else>
                <div class="person-avatar-ph">
                  <span class="person-avatar-plus">+</span>
                  <span class="person-avatar-txt">上传<br>头像</span>
                </div>
              </template>
            </div>
            <input type="file" ref="fileInput" accept="image/*" style="display:none;" @change="handleUpload">
            <div class="avatar-tip">建议尺寸 200×200，支持 JPG/PNG</div>
          </div>
        </el-form-item>

        <el-form-item label="姓名" required>
          <el-input v-model="form.name" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <div class="flex gap-4">
          <el-form-item label="职务" required class="flex-1">
            <el-input v-model="form.title" placeholder="如：理事长"></el-input>
          </el-form-item>
          <el-form-item label="分类" required class="flex-1">
            <el-select v-model="form.category" placeholder="选择或输入分类" filterable allow-create style="width:100%;">
              <el-option v-for="cat in categories" :key="cat" :label="cat" :value="cat"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <el-form-item label="简介">
          <el-input v-model="form.description" type="textarea" :rows="3" placeholder="请输入人员简介"></el-input>
        </el-form-item>
        <div class="flex gap-4">
          <el-form-item label="排序" class="flex-1">
            <el-input-number v-model="form.sort" :min="1" style="width:100%;"></el-input-number>
          </el-form-item>
          <el-form-item label="状态" class="flex-1">
            <el-switch v-model="form.status" :active-value="1" :inactive-value="0"></el-switch>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <template #footer>
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="saveItem" :loading="saving">保存</el-button>
    </template>
  </el-dialog>
</div>

<style>
.person-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.person-card { background: #fff; border: 1px solid #eee; border-radius: 8px; padding: 16px; display: flex; gap: 14px; transition: .2s; align-items: flex-start; }
.person-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.08); }
.person-avatar { width: 64px; height: 64px; border-radius: 50%; background: #ff7800; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 600; flex-shrink: 0; overflow: hidden; }
.person-avatar img { width: 100%; height: 100%; object-fit: cover; }
.person-body { flex: 1; min-width: 0; }
.person-name { font-size: 15px; font-weight: 600; color: #333; margin-bottom: 2px; }
.person-title { font-size: 12px; color: #ff7800; margin-bottom: 4px; }
.person-category { margin-bottom: 6px; }
.person-desc { font-size: 12px; color: #909399; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.person-actions { display: flex; align-items: center; gap: 8px; padding-top: 8px; border-top: 1px solid #f0f0f0; margin-top: 8px; }
.person-sort { font-size: 11px; color: #c0c4cc; margin-right: auto; }
.person-card-add { border: 2px dashed #ddd; display: flex; align-items: center; justify-content: center; cursor: pointer; min-height: 140px; }
.person-card-add:hover { border-color: #ff7800; background: #fff7f0; }
.add-inner { display: flex; flex-direction: column; align-items: center; gap: 8px; color: #bbb; font-size: 13px; }

/* 弹窗滚动区域 */
.dialog-scroll-body { max-height: 65vh; overflow-y: auto; overflow-x: hidden; }

/* 头像上传 */
.avatar-upload-wrap { display: flex; flex-direction: column; align-items: flex-start; }
.avatar-upload { width: 80px; height: 80px; border-radius: 50%; border: 2px dashed #ddd; cursor: pointer; display: flex; align-items: center; justify-content: center; overflow: hidden; transition: .2s; background: #fafafa; }
.avatar-upload:hover { border-color: #ff7800; background: #fff7f0; }
.avatar-preview { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.person-avatar-ph { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.person-avatar-plus { font-size: 24px; color: #bbb; line-height: 1; }
.person-avatar-txt { font-size: 11px; color: #bbb; line-height: 1.3; margin-top: 2px; }
.avatar-tip { font-size: 12px; color: #999; margin-top: 8px; }
</style>
{% endblock %}

{% block js %}
<script>
const col = '{{ col }}';
const { createApp, ref, reactive, onMounted } = Vue;

const avatarColors = ['#ff7800', '#1A3550', '#67c23a', '#e6a23c', '#909399', '#409eff', '#f56c6c'];

const app = createApp({
  delimiters: ['${', '}'],
  setup() {
    const loading = ref(false);
    const list = ref([]);
    const total = ref(0);
    const page = ref(1);
    const pageSize = ref(50);
    const query = reactive({ keyword: '', category: '' });
    const categories = ref([]);

    const dialogVisible = ref(false);
    const dialogTitle = ref('新增人员');
    const saving = ref(false);
    const fileInput = ref(null);

    const defaultForm = { id: null, name: '', title: '', category: '', avatar: '', description: '', sort: 1, status: 1 };
    const form = reactive({ ...defaultForm });

    function getInitial(name) {
      return (name || '?').charAt(0);
    }

    function getColor(index) {
      return avatarColors[index % avatarColors.length];
    }

    async function loadCategories() {
      try {
        const res = await fetch('/admin/content/person/categories?col=' + col).then(r => r.json());
        if (res.code === 0) {
          categories.value = res.data || [];
        }
      } catch {}
    }

    async function loadList() {
      loading.value = true;
      try {
        const params = new URLSearchParams({ col, page: page.value, pageSize: pageSize.value, ...query });
        const res = await fetch('/admin/content/person/list?' + params).then(r => r.json());
        if (res.code === 0) {
          list.value = res.data.data || [];
          total.value = res.data.count || 0;
        }
      } finally { loading.value = false; }
    }

    function resetQuery() {
      query.keyword = '';
      query.category = '';
      page.value = 1;
      loadList();
    }

    function openDialog(item) {
      if (item) {
        dialogTitle.value = '编辑人员';
        Object.assign(form, {
          id: item.id, name: item.name, title: item.title || '',
          category: item.category || '', avatar: item.avatar || '',
          description: item.description || '', sort: item.sort || 1, status: item.status
        });
      } else {
        dialogTitle.value = '新增人员';
        Object.assign(form, { ...defaultForm, sort: list.value.length + 1 });
      }
      dialogVisible.value = true;
    }

    function triggerUpload() {
      fileInput.value?.click();
    }

    async function handleUpload(e) {
      const file = e.target.files[0];
      if (!file) return;
      const formData = new FormData();
      formData.append('file', file);
      try {
        const res = await fetch('/admin/upload', { method: 'POST', body: formData }).then(r => r.json());
        if (res.code === 0) {
          form.avatar = res.data.url;
          ElementPlus.ElMessage.success('上传成功');
        } else {
          ElementPlus.ElMessage.error(res.msg || '上传失败');
        }
      } catch (err) {
        ElementPlus.ElMessage.error('上传失败');
      }
      e.target.value = '';
    }

    async function saveItem() {
      if (!form.name.trim()) { ElementPlus.ElMessage.warning('请输入姓名'); return; }
      if (!form.title.trim()) { ElementPlus.ElMessage.warning('请输入职务'); return; }
      if (!form.category) { ElementPlus.ElMessage.warning('请选择分类'); return; }

      saving.value = true;
      try {
        const url = form.id ? '/admin/content/person/edit' : '/admin/content/person/add';
        const body = { ...form, col };
        const res = await fetch(url, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) }).then(r => r.json());
        if (res.code === 0) {
          ElementPlus.ElMessage.success('保存成功');
          dialogVisible.value = false;
          loadList();
          loadCategories();
        } else {
          ElementPlus.ElMessage.error(res.msg || '保存失败');
        }
      } finally { saving.value = false; }
    }

    async function deleteItem(item) {
      try {
        await ElementPlus.ElMessageBox.confirm('确定删除"' + item.name + '"？', '提示', { type: 'warning' });
        const res = await fetch('/admin/content/person/delete', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ id: item.id }) }).then(r => r.json());
        if (res.code === 0) {
          ElementPlus.ElMessage.success('删除成功');
          loadList();
        } else {
          ElementPlus.ElMessage.error(res.msg || '删除失败');
        }
      } catch {}
    }

    onMounted(() => {
      loadCategories();
      loadList();
    });

    return {
      loading, list, total, page, pageSize, query, categories,
      dialogVisible, dialogTitle, saving, form, fileInput,
      getInitial, getColor,
      loadList, resetQuery, openDialog, triggerUpload, handleUpload, saveItem, deleteItem
    };
  }
});

for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component);
}
app.use(ElementPlus, { locale: ElementPlusLocaleZhCn });
app.mount('#personApp');
</script>
{% endblock %}