From d4df6a748665e33c53c2fafbb0646e61b7739954 Mon Sep 17 00:00:00 2001
From: Double-_-Z <2492419643@qq.com>
Date: Fri, 11 Jul 2025 10:12:14 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=A2=E6=88=B7=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/system/customer.js          |  27 +++++
 src/views/system/area/index.vue     |   8 +-
 src/views/system/customer/index.vue | 147 ++++++++++++++++++++++++++++
 3 files changed, 178 insertions(+), 4 deletions(-)
 create mode 100644 src/api/system/customer.js
 create mode 100644 src/views/system/customer/index.vue

diff --git a/src/api/system/customer.js b/src/api/system/customer.js
new file mode 100644
index 0000000..9a545c3
--- /dev/null
+++ b/src/api/system/customer.js
@@ -0,0 +1,27 @@
+import request from '@/utils/request'
+
+export function add(data) {
+  return request({
+    url: 'api/customer',
+    method: 'post',
+    data
+  })
+}
+
+export function del(ids) {
+  return request({
+    url: 'api/customer',
+    method: 'delete',
+    data: ids
+  })
+}
+
+export function enable(data) {
+  return request({
+    url: 'api/customer',
+    method: 'put',
+    data
+  })
+}
+
+export default { add, enable, del }
diff --git a/src/views/system/area/index.vue b/src/views/system/area/index.vue
index 7e07eb5..1bde4b1 100644
--- a/src/views/system/area/index.vue
+++ b/src/views/system/area/index.vue
@@ -60,7 +60,7 @@
             <el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;">
                 <el-table-column :show-overflow-tooltip="true" prop="name" :label="`${crud.title}名称`" />
                 <el-table-column :show-overflow-tooltip="true" prop="num" :label="`${crud.title === '区域' ? '景区' : '人员'}数量`" />
-                <el-table-column v-if="checkPer(['admin', 'user:edit', 'user:del'])" label="操作" width="115" align="center"
+                <el-table-column v-if="checkPer(['admin', 'area:edit', 'area:del'])" label="操作" width="115" align="center"
                     fixed="right">
                     <template slot-scope="scope">
                         <udOperation :data="scope.row" :permission="permission" />
@@ -88,9 +88,9 @@ export default {
     data() {
         return {
             permission: {
-                add: ['admin', 'user:add'],
-                edit: ['admin', 'user:edit'],
-                del: ['admin', 'user:del']
+                add: ['admin', 'area:add'],
+                edit: ['admin', 'area:edit'],
+                del: ['admin', 'area:del']
             },
             active: '',
             rules: {
diff --git a/src/views/system/customer/index.vue b/src/views/system/customer/index.vue
new file mode 100644
index 0000000..1510bdf
--- /dev/null
+++ b/src/views/system/customer/index.vue
@@ -0,0 +1,147 @@
+<template>
+    <div class="app-container">
+        <!--工具栏-->
+        <div class="head-container">
+            <div>
+                <!-- 搜索 -->
+                <el-input
+                v-model="query.nickName"
+                clearable
+                size="small"
+                placeholder="输入手机号"
+                style="width: 200px;"
+                class="filter-item"
+                @keyup.enter.native="crud.toQuery"
+                />
+                <rrOperation />
+                <el-button v-permission="permission.add" class="filter-item" size="mini" type="primary"
+                    icon="el-icon-plus" @click="crud.toAdd">
+                    添加{{ crud.title }}
+                </el-button>
+            </div>
+        </div>
+        <!--表单渲染-->
+        <el-dialog append-to-body :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0"
+            :title="crud.status.title" width="400px">
+            <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
+                <el-row :gutter="10">
+                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
+                        <el-form-item label="姓名" prop="nickName">
+                            <el-input v-model="form.nickName" placeholder="请输入姓名"/>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
+                        <el-form-item label="性别">
+                            <el-select v-model="form.gender" placeholder="请选择性别" clearable>
+                                <el-option v-for="item in dict.common_gender" :key="item.id" :label="item.label" :value="item.value" />
+                            </el-select>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
+                        <el-form-item label="手机号" prop="phone">
+                            <el-input type="tel" v-model.number="form.phone" placeholder="请输入手机号"/>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
+                        <el-form-item label="用户类型" prop="userType">
+                            <el-select v-model="form.userType" placeholder="请选择用户类型" clearable>
+                                <el-option v-for="(item,index) in userTypes" :key="index" :label="item.label" :value="item.value" />
+                            </el-select>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+            </el-form>
+            <div slot="footer" class="dialog-footer" style="margin-top: -30px;">
+                <el-button type="text" @click="crud.cancelCU">取消</el-button>
+                <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">保存</el-button>
+            </div>
+        </el-dialog>
+        <!--表格渲染-->
+        <el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;">
+            <el-table-column :show-overflow-tooltip="true" prop="nickName" label="姓名" />
+            <el-table-column :show-overflow-tooltip="true" prop="gender" label="性别" />
+            <el-table-column :show-overflow-tooltip="true" prop="phone" label="手机号" />
+            <el-table-column :show-overflow-tooltip="true" prop="userType" label="用户类型" />
+            <el-table-column :show-overflow-tooltip="true" prop="createTime" label="创建时间" />
+            <el-table-column :show-overflow-tooltip="true" prop="enable" label="用户状态" />
+            <el-table-column v-if="checkPer(['admin', 'customer:enable', 'customer:del'])" label="操作" width="115" align="center"
+                fixed="right">
+                <template slot-scope="scope">
+                    <el-button v-permission="permission.enable" size="mini" type="primary" icon="el-icon-folder" @click.stop="toEnable(scope.row)">{{ scope.row.enable ? '停用' : '启用' }}</el-button>
+                    <el-popover v-model="pop" v-permission="permission.del" placement="top" width="180" trigger="manual" @show="pop = false" @hide="pop = false">
+                        <p>确定删除本条数据吗？</p>
+                        <div style="text-align: right; margin: 0">
+                            <el-button size="mini" type="text" @click="pop = false;crud.cancelDelete(scope.row)">取消</el-button>
+                            <el-button :loading="crud.dataStatus[crud.getDataId(scope.row)].delete === 2" type="primary" size="mini" @click="crud.doDelete(scope.row)">确定</el-button>
+                        </div>
+                        <el-button slot="reference" type="danger" icon="el-icon-delete" size="mini" @click.stop="pop = true">删除</el-button>
+                    </el-popover>
+                </template>
+            </el-table-column>
+        </el-table>
+        <!--分页组件-->
+        <pagination />
+    </div>
+</template>
+<script>
+import crudCustomer from '@/api/system/customer'
+import { isvalidPhone } from '@/utils/validate'
+import CRUD, { presenter, header, form, crud } from '@crud/crud'
+import rrOperation from '@crud/RR.operation'
+import pagination from '@crud/Pagination'
+const defaultForm = { phone: null, nickName: null, gender: null, userType: null }
+export default {
+  name: 'Customer',
+  components: { rrOperation, pagination },
+  // 数据字典
+  dicts: ['common_gender'],
+  cruds() {
+    return CRUD({ title: '客户', url: 'api/customer', crudMethod: { ...crudCustomer }, optShow: { add: true, reset: true }})
+  },
+  mixins: [presenter(), header(), form(defaultForm), crud()],
+  data(){
+    // 自定义验证
+    const validPhone = (rule, value, callback) => {
+      if (!value) {
+        callback(new Error('请输入电话号码'))
+      } else if (!isvalidPhone(value)) {
+        callback(new Error('请输入正确的11位手机号码'))
+      } else {
+        callback()
+      }
+    }
+    return {
+        permission: {
+            add: ['admin', 'customer:add'],
+            enable: ['admin', 'customer:enable'],
+            del: ['admin', 'customer:del']
+        },
+        pop: false,
+        userTypes: [
+            { label: '普通用户', value: '普通用户' },
+            { label: '公司对接人', value: '公司对接人' }
+        ],
+        rules: {
+            gender: [
+                { required: true, message: '请选择性别', trigger: 'blur' },
+            ],
+            userType: [
+                { required: true, message: '请选择用户类型', trigger: 'blur' },
+            ],
+            nickName: [
+                { required: true, message: '请输入姓名', trigger: 'blur' },
+                { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
+            ],
+            phone: [
+                { required: true, trigger: 'blur', validator: validPhone }
+            ],
+        }
+    }
+  }
+}
+</script>
+<style scoped>
+::v-deep .el-select{
+    width: 100%;
+}
+</style>
\ No newline at end of file