ADD file via upload

8 months ago · f27a831869
parent b9379d46ed
commit f27a831869
1 changed files with 190 additions and 0 deletions
--- a/AdminMerchant.vue
+++ b/AdminMerchant.vue
@ -0,0 +1,190 @@
+<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>