新增员工管理

src/api/staff/staff.js

@@ -0,0 +1,37 @@
+import request from '@/utils/request'
+
+export function index(params, isLoading = true) {
+  return request({
+    method: 'get',
+    url: '/api/admin/worker/index',
+    params,
+    isLoading
+  })
+}
+
+export function show(params, isLoading = true) {
+  return request({
+    method: 'get',
+    url: '/api/admin/worker/show',
+    params,
+    isLoading
+  })
+}
+
+export function save(data, isLoading = true) {
+  return request({
+    method: 'post',
+    url: '/api/admin/worker/save',
+    data,
+    isLoading
+  })
+}
+
+export function destroy(params, isLoading = true) {
+  return request({
+    method: 'get',
+    url: '/api/admin/worker/destroy',
+    params,
+    isLoading
+  })
+}

src/views/Staff/index.vue

@@ -0,0 +1,272 @@
+<template>
+  <div class="staff-container">
+    <!-- 搜索区域 -->
+    <div class="search-section">
+      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
+        <el-form-item label="姓名">
+          <el-input v-model="searchForm.name" placeholder="请输入姓名"></el-input>
+        </el-form-item>
+        <el-form-item label="手机号">
+          <el-input v-model="searchForm.mobile" placeholder="请输入手机号"></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="handleSearch">搜索</el-button>
+          <el-button @click="resetSearch">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <!-- 数据展示区域 -->
+    <div class="table-section">
+      <div class="table-header">
+        <h2>工作人员列表</h2>
+        <el-button type="primary" @click="handleAdd">添加工作人员</el-button>
+      </div>
+      <el-table :data="tableData" style="width: 100%" border>
+        <el-table-column prop="username" label="用户名" width="120"></el-table-column>
+        <el-table-column prop="name" label="姓名" width="120"></el-table-column>
+        <el-table-column prop="mobile" label="手机号" width="140"></el-table-column>
+        <el-table-column label="操作" width="200">
+          <template slot-scope="scope">
+            <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
+            <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <!-- 分页 -->
+      <div class="pagination-container">
+        <el-pagination
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page="currentPage"
+          :page-sizes="[10, 20, 30, 50]"
+          :page-size="pageSize"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="total">
+        </el-pagination>
+      </div>
+    </div>
+
+    <!-- 添加/编辑员工弹窗 -->
+    <el-dialog :title="dialogTitle" :visible.sync="addDialogVisible" width="400px">
+      <el-form :model="addForm" :rules="addRules" ref="addFormRef" label-width="80px">
+        <el-form-item label="用户名" prop="username" required>
+          <el-input v-model="addForm.username" placeholder="请输入用户名" />
+        </el-form-item>
+        <el-form-item v-if="!addForm.id" label="密码" prop="password" required>
+          <el-input v-model="addForm.password" placeholder="请输入密码" show-password />
+        </el-form-item>
+        <el-form-item v-else label="新密码" prop="newPassword">
+          <el-input v-model="addForm.newPassword" placeholder="如需重置请输入新密码" show-password />
+        </el-form-item>
+        <el-form-item label="姓名" prop="name" required>
+          <el-input v-model="addForm.name" placeholder="请输入姓名" />
+        </el-form-item>
+        <el-form-item label="手机号" prop="mobile" required>
+          <el-input v-model="addForm.mobile" placeholder="请输入手机号" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="addDialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="submitAddForm">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { index as staffIndex, save as staffSave, destroy as staffDestroy } from '@/api/staff/staff'
+import { getToken } from '@/utils/auth'
+
+export default {
+  name: 'StaffTest',
+  data() {
+    return {
+      searchForm: {
+        name: '',
+        mobile: ''
+      },
+      tableData: [],
+      currentPage: 1,
+      pageSize: 10,
+      total: 0,
+      addDialogVisible: false,
+      addForm: {
+        username: '',
+        password: '',
+        newPassword: '',
+        name: '',
+        mobile: ''
+      },
+      addRules: {
+        username: [
+          { required: true, message: '请输入用户名', trigger: 'blur' }
+        ],
+        password: [
+          { required: true, message: '请输入密码', trigger: 'blur' },
+          { min: 8, message: '密码长度不能少于8位', trigger: 'blur' }
+        ],
+        newPassword: [
+          { min: 8, message: '密码长度不能少于8位', trigger: 'blur' }
+        ],
+        name: [
+          { required: true, message: '请输入姓名', trigger: 'blur' }
+        ],
+        mobile: [
+          { required: true, message: '请输入手机号', trigger: 'blur' }
+        ]
+      },
+      dialogTitle: '添加员工',
+      loading: false
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    async getList() {
+      this.loading = true
+      const params = {}
+      if (this.searchForm.name) params['filter[name]'] = this.searchForm.name
+      if (this.searchForm.mobile) params['filter[mobile]'] = this.searchForm.mobile
+      params.page = this.currentPage
+      params.page_size = this.pageSize
+      params.token = getToken()
+      try {
+        const res = await staffIndex(params)
+        this.tableData = res.data || []
+        this.total = res.total || 0
+      } catch (e) {
+        this.$message.error('获取数据失败')
+      }
+      this.loading = false
+    },
+    handleSearch() {
+      this.currentPage = 1
+      this.getList()
+    },
+    resetSearch() {
+      this.searchForm = {
+        name: '',
+        mobile: ''
+      }
+      this.currentPage = 1
+      this.getList()
+    },
+    handleAdd() {
+      this.dialogTitle = '添加工作人员'
+      this.addDialogVisible = true
+      this.$nextTick(() => {
+        if (this.$refs.addFormRef) this.$refs.addFormRef.resetFields()
+        this.addForm = {
+          username: '',
+          password: '',
+          newPassword: '',
+          name: '',
+          mobile: ''
+        }
+      })
+    },
+    handleEdit(row) {
+      this.dialogTitle = '编辑工作人员'
+      this.addDialogVisible = true
+      this.$nextTick(() => {
+        if (this.$refs.addFormRef) this.$refs.addFormRef.resetFields()
+        this.addForm = { ...row, password: '', newPassword: '' }
+      })
+    },
+    handleDelete(row) {
+      this.$confirm('确认删除该工作人员信息吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(async() => {
+        try {
+          await staffDestroy({ id: row.id })
+          this.$message.success('删除成功')
+          this.getList()
+        } catch (e) {
+          this.$message.error('删除失败')
+        }
+      }).catch(() => {
+        this.$message.info('已取消删除')
+      })
+    },
+    handleSizeChange(val) {
+      this.pageSize = val
+      this.getList()
+    },
+    handleCurrentChange(val) {
+      this.currentPage = val
+      this.getList()
+    },
+    submitAddForm() {
+      this.$refs.addFormRef.validate(async valid => {
+        if (valid) {
+          let submitData = { ...this.addForm }
+          if (submitData.id) {
+            // 编辑：只传newPassword（如有），不传password
+            if (!submitData.newPassword) delete submitData.newPassword
+            delete submitData.password
+          } else {
+            // 新增：只传password，不传newPassword
+            delete submitData.newPassword
+          }
+          try {
+            await staffSave(submitData)
+            this.$message.success(this.addForm.id ? '编辑成功' : '新增成功')
+            this.addDialogVisible = false
+            this.getList()
+          } catch (e) {
+            this.$message.error('操作失败')
+          }
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.staff-container {
+  padding: 20px;
+}
+
+h1 {
+  color: #303133;
+  margin-bottom: 20px;
+}
+
+.search-section {
+  background: #fff;
+  padding: 20px;
+  border-radius: 4px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  margin-bottom: 20px;
+}
+
+.table-section {
+  background: #fff;
+  padding: 20px;
+  border-radius: 4px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+}
+
+.table-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.table-header h2 {
+  margin: 0;
+  color: #303133;
+}
+
+.pagination-container {
+  margin-top: 20px;
+  text-align: right;
+}
+</style>