zhibo/Zhibo/admin/src/views/wishTree/tree/index.vue

<template>
  <div class="divBox">
    <el-card class="box-card">
      <div class="clearfix" slot="header">
        <el-form :inline="true" :model="queryParams" size="small">
          <el-form-item label="许愿树名称">
            <el-input v-model="queryParams.name" placeholder="请输入名称" clearable />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">搜索</el-button>
            <el-button @click="handleReset">重置</el-button>
            <el-button type="success" @click="handleAdd">新增许愿树</el-button>
          </el-form-item>
        </el-form>
      </div>

      <el-table v-loading="loading" :data="tableData" border style="width: 100%">
        <el-table-column prop="id" label="ID" width="80" align="center" />
        <el-table-column label="封面" width="100" align="center">
          <template slot-scope="scope">
            <el-image v-if="scope.row.cover_image" :src="scope.row.cover_image" :preview-src-list="[scope.row.cover_image]" style="width: 60px; height: 60px" fit="cover" />
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="许愿树名称" min-width="150" />
        <el-table-column prop="description" label="描述" min-width="200" show-overflow-tooltip />
        <el-table-column prop="node_count" label="节点数" width="80" align="center" />
        <el-table-column prop="message_count" label="留言数" width="80" align="center" />
        <el-table-column label="启用状态" width="100" align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.is_active === 1" type="success">已启用</el-tag>
            <el-tag v-else type="info">已停用</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="create_time" label="创建时间" width="160" align="center" />
        <el-table-column label="操作" width="250" align="center" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleViewMessages(scope.row)">查看留言</el-button>
            <el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button v-if="scope.row.is_active !== 1" type="text" size="small" style="color: #67c23a" @click="handleActivate(scope.row)">启用</el-button>
            <el-button v-else type="text" size="small" style="color: #e6a23c" @click="handleActivate(scope.row)">停用</el-button>
            <el-button type="text" size="small" style="color: #f56c6c" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

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

    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="800px" @close="handleDialogClose">
      <el-form ref="formRef" :model="formData" :rules="formRules" label-width="100px">
        <el-form-item label="名称" prop="name">
          <el-input v-model="formData.name" placeholder="请输入许愿树名称" maxlength="100" show-word-limit />
        </el-form-item>
        <el-form-item label="描述" prop="description">
          <el-input v-model="formData.description" type="textarea" :rows="2" placeholder="请输入描述" maxlength="500" show-word-limit />
        </el-form-item>
        <el-form-item label="封面图片">
          <el-input v-model="formData.cover_image" placeholder="请输入封面图片URL" />
        </el-form-item>
        <el-form-item label="背景图片">
          <el-input v-model="formData.background_image" placeholder="请输入背景图片URL" />
        </el-form-item>
        <el-form-item label="排序">
          <el-input-number v-model="formData.sort" :min="0" :max="9999" />
        </el-form-item>

        <el-divider content-position="left">节点设置</el-divider>
        <el-button type="primary" size="small" @click="addNode" style="margin-bottom: 15px;">添加节点</el-button>
        <el-table :data="formData.nodes" border size="small" style="margin-bottom: 20px;">
          <el-table-column prop="title" label="节点标题" min-width="120">
            <template slot-scope="scope">
              <el-input v-model="scope.row.title" size="small" placeholder="节点标题" />
            </template>
          </el-table-column>
          <el-table-column prop="description" label="描述" min-width="150">
            <template slot-scope="scope">
              <el-input v-model="scope.row.description" size="small" placeholder="节点描述" />
            </template>
          </el-table-column>
          <el-table-column prop="open_time" label="开启时间" width="200">
            <template slot-scope="scope">
              <el-date-picker v-model="scope.row.open_time" type="datetime" size="small" placeholder="不设置则立即开启" value-format="yyyy-MM-dd HH:mm:ss" style="width: 100%;" />
            </template>
          </el-table-column>
          <el-table-column prop="sort" label="排序" width="100">
            <template slot-scope="scope">
              <el-input-number v-model="scope.row.sort" size="small" :min="0" :max="999" controls-position="right" />
            </template>
          </el-table-column>
          <el-table-column label="操作" width="80" align="center">
            <template slot-scope="scope">
              <el-button type="text" size="small" style="color: #f56c6c" @click="removeNode(scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
      <span slot="footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { wishTreeListApi, wishTreeInfoApi, wishTreeSaveApi, wishTreeUpdateApi, wishTreeDeleteApi, wishTreeActivateApi } from '@/api/wishTree';

export default {
  name: 'WishTreeList',
  data() {
    return {
      loading: false,
      tableData: [],
      total: 0,
      queryParams: { page: 1, limit: 10, name: '' },
      dialogVisible: false,
      dialogTitle: '新增许愿树',
      formData: { id: null, name: '', description: '', cover_image: '', background_image: '', sort: 0, nodes: [] },
      formRules: { name: [{ required: true, message: '请输入许愿树名称', trigger: 'blur' }] },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    async getList() {
      this.loading = true;
      try {
        const res = await wishTreeListApi(this.queryParams);
        this.tableData = res.list || [];
        this.total = res.total || 0;
      } catch (error) {
        console.error(error);
      }
      this.loading = false;
    },
    handleSearch() {
      this.queryParams.page = 1;
      this.getList();
    },
    handleReset() {
      this.queryParams = { page: 1, limit: 10, name: '' };
      this.getList();
    },
    handleAdd() {
      this.dialogTitle = '新增许愿树';
      this.formData = { id: null, name: '', description: '', cover_image: '', background_image: '', sort: 0, nodes: [] };
      this.dialogVisible = true;
    },
    async handleEdit(row) {
      this.dialogTitle = '编辑许愿树';
      try {
        const res = await wishTreeInfoApi(row.id);
        this.formData = { ...res, nodes: res.nodes || [] };
        this.dialogVisible = true;
      } catch (error) {
        console.error(error);
      }
    },
    handleViewMessages(row) {
      this.$router.push({ path: `/wishtree/tree/detail/${row.id}` });
    },
    addNode() {
      this.formData.nodes.push({ title: '', description: '', open_time: null, sort: 0, status: 1 });
    },
    removeNode(index) {
      this.formData.nodes.splice(index, 1);
    },
    handleDelete(row) {
      this.$confirm('确定要删除该许愿树吗？删除后所有节点和用户留言也会被删除。', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(async () => {
        try {
          await wishTreeDeleteApi(row.id);
          this.$message.success('删除成功');
          this.getList();
        } catch (error) {
          console.error(error);
        }
      });
    },
    async handleActivate(row) {
      const action = row.is_active === 1 ? '停用' : '启用';
      try {
        await wishTreeActivateApi(row.id);
        this.$message.success(`${action}成功`);
        this.getList();
      } catch (error) {
        console.error(error);
      }
    },
    handleSubmit() {
      this.$refs.formRef.validate(async (valid) => {
        if (!valid) return;
        try {
          const api = this.formData.id ? wishTreeUpdateApi : wishTreeSaveApi;
          await api(this.formData);
          this.$message.success(this.formData.id ? '编辑成功' : '新增成功');
          this.dialogVisible = false;
          this.getList();
        } catch (error) {
          console.error(error);
        }
      });
    },
    handleDialogClose() {
      this.$refs.formRef && this.$refs.formRef.resetFields();
    },
    handleSizeChange(val) {
      this.queryParams.limit = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.queryParams.page = val;
      this.getList();
    },
  },
};
</script>

<style scoped>
.divBox { padding: 20px; }
</style>