bookstore/AdminMerchant.vue

<template>
  <div class="merchant-container">
    <!-- 新增商家按钮 -->
    <el-button type="primary" @click="openAddDialog" style="margin-bottom: 20px;">新增商家</el-button>

    <!-- 商家信息展示 -->
    <el-table :data="currentPageMerchants" stripe style="width: 100%">
      <el-table-column label="商家名称" prop="name"></el-table-column>
      <el-table-column label="商家地址" prop="address"></el-table-column>
      <el-table-column label="联系方式" prop="phone"></el-table-column>
      <el-table-column label="商家状态" prop="status"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="{ row }">
          <el-button @click="editMerchant(row)" type="text" size="small">编辑</el-button>
          <el-button @click="deleteMerchant(row)" type="text" size="small" class="delete-btn">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
        v-if="totalMerchants > 10"
        :current-page.sync="currentPage"
        :page-size="pageSize"
        :total="totalMerchants"
        layout="prev, pager, next, jumper"
        @current-change="handlePageChange"
    ></el-pagination>

    <!-- 增加商家的表单 -->
    <el-dialog
        :visible.sync="dialogVisible"
        title="新增/编辑商家"
        @close="resetForm"
    >
      <el-form :model="newMerchant" :rules="rules" ref="form" label-width="120px">
        <el-form-item label="商家名称" prop="name">
          <el-input v-model="newMerchant.name" placeholder="请输入商家名称"></el-input>
        </el-form-item>
        <el-form-item label="商家地址" prop="address">
          <el-input v-model="newMerchant.address" placeholder="请输入商家地址"></el-input>
        </el-form-item>
        <el-form-item label="联系方式" prop="phone">
          <el-input v-model="newMerchant.phone" placeholder="请输入联系方式"></el-input>
        </el-form-item>
        <el-form-item label="商家状态" prop="status">
          <el-select v-model="newMerchant.status" placeholder="请选择商家状态">
            <el-option label="正常" value="正常"></el-option>
            <el-option label="暂停" value="暂停"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="resetForm">取消</el-button>
        <el-button type="primary" @click="saveMerchant">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
/*import { ref, onMounted, watch } from 'vue';*/
/*import { ElTable, ElTableColumn, ElButton, ElPagination, ElDialog, ElForm, ElFormItem, ElInput, ElSelect, ElOption, ElMessage } from 'element-ui';*/

// 假数据
const dummyMerchants = [
  { id: 1, name: 'seller', address: '地址 A', phone: '1234567890', status: '正常' },
  // 其他商家数据...
];

export default {
  data() {
    return {
      merchants: [...dummyMerchants], // 全部商家数据
      currentPageMerchants: [], // 当前页显示的数据
      currentPage: 1, // 当前页数
      pageSize: 10, // 每页显示商家的数量
      totalMerchants: dummyMerchants.length, // 商家总数
      dialogVisible: false, // 是否显示新增商家的对话框
      newMerchant: {
        id: null,
        name: '',
        address: '',
        phone: '',
        status: '正常',
      },
      rules: {
        name: [{ required: true, message: '商家名称不能为空', trigger: 'blur' }],
        address: [{ required: true, message: '商家地址不能为空', trigger: 'blur' }],
        phone: [{ required: true, message: '联系方式不能为空', trigger: 'blur' }],
        status: [{ required: true, message: '商家状态不能为空', trigger: 'blur' }],
      },
    };
  },
  methods: {
    // 初始化商家数据
    fetchMerchants() {
      const startIndex = (this.currentPage - 1) * this.pageSize;
      const endIndex = this.currentPage * this.pageSize;
      const pageData = this.merchants.slice(startIndex, endIndex);

      this.currentPageMerchants = pageData;
      this.totalMerchants = this.merchants.length; // 更新商家的总数
    },

    // 打开新增商家的对话框
    openAddDialog() {
      this.newMerchant = { id: null, name: '', address: '', phone: '', status: '正常' }; // 清空表单
      this.dialogVisible = true;
    },

    // 增加商家
    saveMerchant() {
      if (this.newMerchant.name && this.newMerchant.address && this.newMerchant.phone && this.newMerchant.status) {
        const newId = this.merchants.length + 1;  // 用于模拟新增的商家ID
        this.newMerchant.id = newId;

        // 将新的商家添加到商家数组中
        this.merchants.push({ ...this.newMerchant });

        // 关闭对话框
        this.dialogVisible = false;

        // 提示信息
        this.$message.success('商家信息保存成功');
        this.fetchMerchants(); // 刷新商家列表
        this.resetForm(); // 重置表单
      } else {
        this.$message.error('请填写完整信息');
      }
    },

    // 编辑商家
    editMerchant(row) {
      this.newMerchant = { ...row };  // 将商家信息传递给表单
      this.dialogVisible = true;  // 打开对话框
    },

    // 删除商家
    deleteMerchant(row) {
      this.merchants = this.merchants.filter((merchant) => merchant.id !== row.id); // 删除商家
      this.$message.success('商家删除成功');
      this.fetchMerchants(); // 刷新商家列表
    },

    // 重置表单
    resetForm() {
      this.newMerchant = {
        id: null,
        name: '',
        address: '',
        phone: '',
        status: '正常',
      };
    },

    // 分页切换
    handlePageChange(page) {
      this.currentPage = page;
      this.fetchMerchants();
    },
  },
  mounted() {
    this.fetchMerchants();
  },
  watch: {
    totalMerchants() {
      this.fetchMerchants(); // 数据变化时重新加载当前页数据
    },
  },
};
</script>

<style scoped>
.merchant-container {
  margin: 20px;
}

.delete-btn {
  color: red;
  font-size: 14px;
  background-color: transparent;
  border: none;
  cursor: pointer;
}

.delete-btn:hover {
  text-decoration: underline;
}
</style>