zhibo/Zhibo/admin/src/views/noviceTask/list/index.vue

<template>
  <div class="divBox">
    <el-card shadow="never" class="ivu-mt">
      <div class="padding-add">
        <!-- 刷新按钮 -->
        <div class="mb20" style="display: flex; justify-content: space-between; align-items: center;">
          <el-button type="primary" size="small" icon="el-icon-plus" @click="handleAdd">添加任务</el-button>
          <el-button type="primary" size="small" icon="el-icon-refresh" @click="handleRefresh"></el-button>
        </div>

        <!-- 数据表格 -->
        <el-table :data="tableData" v-loading="loading" border>
          <el-table-column prop="id" label="ID" width="80" align="center" />
          <el-table-column prop="name" label="任务名字" min-width="200" align="center" />
          <el-table-column prop="reward_value" label="赠送的钻石数量" min-width="200" align="center" />
          <el-table-column prop="create_time" label="创建时间" width="180" align="center" />
          <el-table-column label="操作" width="120" align="center" fixed="right">
            <template slot-scope="scope">
              <el-button type="warning" size="mini" @click="handleEdit(scope.row)">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="acea-row row-right page mt20">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="searchForm.page"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="searchForm.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </div>
      </div>
    </el-card>

    <!-- 添加/编辑弹窗 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="500px">
      <el-form :model="form" ref="form" label-width="100px" :rules="formRules">
        <el-form-item label="任务名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入任务名称" />
        </el-form-item>
        <el-form-item label="钻石数量" prop="reward_value">
          <el-input-number v-model="form.reward_value" :min="0" style="width: 100%;" placeholder="请输入钻石数量" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleSubmit" class="btn-save">保存</el-button>
        <el-button @click="dialogVisible = false" class="btn-close">返回</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { noviceTaskListApi, noviceTaskUpdateApi, noviceTaskCreateApi } from '@/api/noviceTask';

export default {
  name: 'NoviceTaskList',
  data() {
    return {
      searchForm: { page: 1, limit: 20 },
      tableData: [],
      total: 0,
      loading: false,
      dialogVisible: false,
      dialogTitle: '编辑',
      isEdit: false,
      form: {
        id: null,
        name: '',
        reward_value: 0
      },
      formRules: {
        name: [{ required: true, message: '请输入任务名称', trigger: 'blur' }],
        reward_value: [{ required: true, message: '请输入钻石数量', trigger: 'blur' }]
      }
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    async getList() {
      this.loading = true;
      try {
        const res = await noviceTaskListApi(this.searchForm);
        this.tableData = res.list || [];
        this.total = res.total || 0;
      } catch (error) {
        this.$message.error((error && error.message) || '获取列表失败');
      } finally {
        this.loading = false;
      }
    },
    handleRefresh() {
      this.getList();
      this.$message.success('刷新成功');
    },
    handleAdd() {
      this.dialogTitle = '添加任务';
      this.isEdit = false;
      this.form = { id: null, name: '', reward_value: 0 };
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.$refs.form && this.$refs.form.clearValidate();
      });
    },
    handleEdit(row) {
      this.dialogTitle = '编辑';
      this.isEdit = true;
      this.form = {
        id: row.id,
        name: row.name,
        reward_value: row.reward_value
      };
      this.dialogVisible = true;
    },
    async handleSubmit() {
      this.$refs.form.validate(async (valid) => {
        if (!valid) return;
        try {
          if (this.isEdit) {
            await noviceTaskUpdateApi(this.form);
            this.$message.success('更新成功');
          } else {
            await noviceTaskCreateApi(this.form);
            this.$message.success('添加成功');
          }
          this.dialogVisible = false;
          this.getList();
        } catch (error) {
          this.$message.error((error && error.message) || '操作失败');
        }
      });
    },
    handleSizeChange(val) {
      this.searchForm.limit = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.searchForm.page = val;
      this.getList();
    }
  }
};
</script>

<style scoped lang="scss">
.mb20 {
  margin-bottom: 20px;
}
.mt20 {
  margin-top: 20px;
}
.dialog-footer {
  text-align: center;
  
  .btn-save {
    background: #00b4aa;
    border-color: #00b4aa;
    border-radius: 20px;
    padding: 10px 30px;
    
    &:hover {
      background: #00a099;
      border-color: #00a099;
    }
  }
  
  .btn-close {
    border-radius: 20px;
    padding: 10px 30px;
    margin-left: 15px;
  }
}
</style>