From d87f1184c06e05016679baf7bdf32dd11fde0e38 Mon Sep 17 00:00:00 2001
From: Double-_-Z <2492419643@qq.com>
Date: Thu, 10 Jul 2025 20:56:22 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E7=94=A8=E6=88=B7=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E5=BE=AE=E8=B0=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/system/area/index.vue | 409 ++++++++++++++++----------------
 src/views/system/role/index.vue |   2 +-
 src/views/system/user/index.vue |  51 ++--
 3 files changed, 230 insertions(+), 232 deletions(-)

diff --git a/src/views/system/area/index.vue b/src/views/system/area/index.vue
index 45bf5f8..7e07eb5 100644
--- a/src/views/system/area/index.vue
+++ b/src/views/system/area/index.vue
@@ -1,88 +1,76 @@
 <template>
-  <div class="app-container">
-    <div class="area-left">
-      <div class="al-top">
-        <el-divider direction="vertical" />
-        <span>区域架构</span>
-      </div>
-      <div class="al-tree">
-        <div class="boxShadow" @click="active = list[0].id;crud.title = '区域'" />
-        <el-tree
-          default-expand-all
-          :data="list"
-          :indent="20"
-          icon-class="#"
-          :props="{ children: 'children', label: 'label' }"
-          @node-click="handleNodeClick"
-        >
-          <template slot-scope="{node,data}">
-            <div
-              style="width:100%;"
-              class="treeData"
-              :class="{ activeBlue: active === data.id, activeIndent: node.level === 3 || node.level === 4 }"
-              @click="handleTool(node, data)"
-            >
-              <div v-if="node.level !== 1" class="dashedBox">
-                <div class="firstBox" />
-                <div :class="{ dashshow: data.last }" />
-              </div>
-              <div v-if="node.level !== 3">
-                <svg-icon
-                  v-if="active !== data.id"
-                  style="width: 1rem;height: 1rem;opacity: 0.8;"
-                  :icon-class="node.level === 1 ? 'gongsi' : 'tree-table'"
-                />
-                <svg-icon
-                  v-else
-                  style="width: 1rem;height: 1rem;opacity: 0.8;"
-                  :icon-class="node.level === 1 ? 'gongsilanse' : 'tree-table'"
-                />
-              </div>
-              <div :title="data.label">{{ data.label }}</div>
+    <div class="app-container">
+        <div class="area-left">
+            <div class="al-top">
+                <el-divider direction="vertical" />
+                <span>区域架构</span>
+            </div>
+            <div class="al-tree">
+                <div class="boxShadow" @click="active = list[0].id; crud.title = '区域'" />
+                <el-tree default-expand-all :data="list" :indent="20" icon-class="#"
+                    :props="{ children: 'children', label: 'label' }" @node-click="handleNodeClick">
+                    <template slot-scope="{node,data}">
+                        <div style="width:100%;" class="treeData"
+                            :class="{ activeBlue: active === data.id, activeIndent: node.level === 3 || node.level === 4 }"
+                            @click="handleTool(node, data)">
+                            <div v-if="node.level !== 1" class="dashedBox">
+                                <div class="firstBox" />
+                                <div :class="{ dashshow: data.last }" />
+                            </div>
+                            <div v-if="node.level !== 3">
+                                <svg-icon v-if="active !== data.id" style="width: 1rem;height: 1rem;opacity: 0.8;"
+                                    :icon-class="node.level === 1 ? 'gongsi' : 'tree-table'" />
+                                <svg-icon v-else style="width: 1rem;height: 1rem;opacity: 0.8;"
+                                    :icon-class="node.level === 1 ? 'gongsilanse' : 'tree-table'" />
+                            </div>
+                            <div :title="data.label">{{ data.label }}</div>
+                        </div>
+                    </template>
+                </el-tree>
             </div>
-          </template>
-        </el-tree>
-      </div>
-    </div>
-    <div class="area-right">
-      <!--工具栏-->
-      <div class="head-container">
-        <div>
-          <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-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"
-          fixed="right"
-        >
-          <template slot-scope="scope">
-            <udOperation
-              :data="scope.row"
-              :permission="permission"
-            />
-          </template>
-        </el-table-column>
-      </el-table>
-      <!--分页组件-->
-      <pagination />
+        <div class="area-right">
+            <!--工具栏-->
+            <div class="head-container">
+                <div>
+                    <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="30%">
+                <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="`${crud.title}名称`" prop="name">
+                                <el-input v-model="form.name" :placeholder="`请输入${crud.title}名称`"/>
+                            </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="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"
+                    fixed="right">
+                    <template slot-scope="scope">
+                        <udOperation :data="scope.row" :permission="permission" />
+                    </template>
+                </el-table-column>
+            </el-table>
+            <!--分页组件-->
+            <pagination />
+        </div>
     </div>
-  </div>
 </template>
 <script>
 import crudArea from '@/api/system/area'
@@ -91,135 +79,140 @@ import pagination from '@crud/Pagination'
 import CRUD, { presenter, header, form, crud } from '@crud/crud'
 const defaultForm = { id: null, name: null, type: 'area' }
 export default {
-  name: 'Area',
-  components: { udOperation, pagination },
-  cruds() {
-    return CRUD({ title: '区域', url: 'api/area', crudMethod: { ...crudArea }, optShow: { add: true }})
-  },
-  mixins: [presenter(), header(), form(defaultForm), crud()],
-  data() {
-    return {
-      permission: {
-        add: ['admin', 'user:add'],
-        edit: ['admin', 'user:edit'],
-        del: ['admin', 'user:del']
-      },
-      active: '',
-      list: [{
-        id: 1,
-        label: '爱尚云',
-        children: [{
-          id: 2,
-          label: '北京区域',
-          children: []
-        },
-        {
-          id: 3,
-          label: '上海区域',
-          children: []
-        },
-        {
-          id: 4,
-          label: '深圳区域',
-          children: []
-        },
-        {
-          id: 5,
-          label: '广州区域',
-          children: [{
-            id: 6,
-            label: '白云山景区',
-            children: []
-          }, {
-            id: 7,
-            label: '白水寨景区',
-            children: []
-          }, {
-            id: 8,
-            label: '越秀公园景区',
-            children: []
-          }]
-        }]
-      }],
-      parentId: '',
-      parentName: '',
-      parentArr: []
-    }
-  },
-  async created() {
-    const id = await this.getTree()
-    this.crud.data = [{ id: 1, name: '越秀公园', num: 1 }]
-    this.crud.resetDataStatus()
-  },
-  methods: {
-    // 节点点击
-    handleNodeClick(data) {
-      console.log(data)
+    name: 'Area',
+    components: { udOperation, pagination },
+    cruds() {
+        return CRUD({ title: '区域', url: 'api/area', crudMethod: { ...crudArea }, optShow: { add: true } })
     },
-    handleTool(node, data) {
-      const id = node.level === 4 ? data.parentId : data.id
-      this.active = data.id
-      console.log(node, 'node', data)
-      this.$set(this, 'parentArr', [{
-        parentId: data.parentId,
-        parentName: data.parentName
-      }])
-      const type = node.level === 1
-      this.crud.title = type ? '区域' : '景区'
-      this.form.type = type ? 'area' : 'spot'
-      // console.log(this.parentArr, 'parentArr')
-      // this.getList(id)
-    },
-    getTree() {
-      return new Promise(resolve => {
-        // tree().then(res => {
-        // console.log(res)
-        const res = this.list
-        const setLast = (data, parentId, parentName, level) => {
-          if (data === null) return
-          return data.map((item, key) => {
-            if (data.length - 1 === key) {
-              return {
-                last: true,
-                ...item,
-                children: setLast(item.children, item.id, item.label, level + 1),
-                parentId,
-                parentName,
-                level
-              }
-            } else {
-              return {
-                last: false,
-                ...item,
-                children: setLast(item.children, item.id, item.label, level + 1),
-                parentId,
-                parentName,
-                level
-              }
-            }
-          })
+    mixins: [presenter(), header(), form(defaultForm), crud()],
+    data() {
+        return {
+            permission: {
+                add: ['admin', 'user:add'],
+                edit: ['admin', 'user:edit'],
+                del: ['admin', 'user:del']
+            },
+            active: '',
+            rules: {
+                'name': [
+                    { required: true, message: `名称不能为空`, trigger: 'blur' },
+                ],
+            },
+            list: [{
+                id: 1,
+                label: '爱尚云',
+                children: [{
+                    id: 2,
+                    label: '北京区域',
+                    children: []
+                },
+                {
+                    id: 3,
+                    label: '上海区域',
+                    children: []
+                },
+                {
+                    id: 4,
+                    label: '深圳区域',
+                    children: []
+                },
+                {
+                    id: 5,
+                    label: '广州区域',
+                    children: [{
+                        id: 6,
+                        label: '白云山景区',
+                        children: []
+                    }, {
+                        id: 7,
+                        label: '白水寨景区',
+                        children: []
+                    }, {
+                        id: 8,
+                        label: '越秀公园景区',
+                        children: []
+                    }]
+                }]
+            }],
+            parentId: '',
+            parentName: '',
+            parentArr: []
         }
-        console.log(res)
+    },
+    async created() {
+        const id = await this.getTree()
+        this.crud.data = [{ id: 1, name: '越秀公园', num: 1 }]
+        this.crud.resetDataStatus()
+    },
+    methods: {
+        // 节点点击
+        handleNodeClick(data) {
+            console.log(data)
+        },
+        handleTool(node, data) {
+            const id = node.level === 4 ? data.parentId : data.id
+            this.active = data.id
+            console.log(node, 'node', data)
+            this.$set(this, 'parentArr', [{
+                parentId: data.parentId,
+                parentName: data.parentName
+            }])
+            const type = node.level === 1
+            this.crud.title = type ? '区域' : '景区'
+            this.form.type = type ? 'area' : 'spot'
+            // console.log(this.parentArr, 'parentArr')
+            // this.getList(id)
+        },
+        getTree() {
+            return new Promise(resolve => {
+                // tree().then(res => {
+                // console.log(res)
+                const res = this.list
+                const setLast = (data, parentId, parentName, level) => {
+                    if (data === null) return
+                    return data.map((item, key) => {
+                        if (data.length - 1 === key) {
+                            return {
+                                last: true,
+                                ...item,
+                                children: setLast(item.children, item.id, item.label, level + 1),
+                                parentId,
+                                parentName,
+                                level
+                            }
+                        } else {
+                            return {
+                                last: false,
+                                ...item,
+                                children: setLast(item.children, item.id, item.label, level + 1),
+                                parentId,
+                                parentName,
+                                level
+                            }
+                        }
+                    })
+                }
+                console.log(res)
 
-        this.list = setLast(res, '', '', 1)
-        this.active = this.active || this.list[0].id
-        let arr = []
-        const setSelectList = (data) => {
-          data.forEach((item) => {
-            arr = [...arr, item]
-            if (item.children) {
-              setSelectList(item.children)
-            }
-          })
+                this.list = setLast(res, '', '', 1)
+                this.active = this.active || this.list[0].id
+                let arr = []
+                const setSelectList = (data) => {
+                    data.forEach((item) => {
+                        arr = [...arr, item]
+                        if (item.children) {
+                            setSelectList(item.children)
+                        }
+                    })
+                }
+                setSelectList(this.list)
+                this.selectList = arr.filter(item => item.level !== 4)
+                console.log(this.list, 'this.list', arr)
+                resolve(this.active)
+            })
+            // })
         }
-        setSelectList(this.list)
-        this.selectList = arr.filter(item => item.level !== 4)
-        console.log(this.list, 'this.list', arr)
-        resolve(this.active)
-      })
-      // })
     }
-  }
 }
 </script>
 <style scoped lang="scss">
@@ -282,13 +275,13 @@ export default {
     }
 }
 
-.area-left >>>.el-tree-node__content:hover,
-.area-left >>>.el-tree-node__content:focus {
+.area-left>>>.el-tree-node__content:hover,
+.area-left>>>.el-tree-node__content:focus {
     background: #EDEEFC;
     /* color:#4f5de6; */
 }
 
-.area-left >>>.el-tree-node__content {
+.area-left>>>.el-tree-node__content {
     position: relative;
     /* padding:12px 9px; */
     height: 40px;
diff --git a/src/views/system/role/index.vue b/src/views/system/role/index.vue
index 239a7de..caac882 100644
--- a/src/views/system/role/index.vue
+++ b/src/views/system/role/index.vue
@@ -145,7 +145,7 @@ export default {
   data() {
     return {
       defaultProps: { children: 'children', label: 'label', isLeaf: 'leaf' },
-      dateScopes: ['全部', '本级', '自定义'], level: 3,
+      dateScopes: ['全部', '本级'], level: 3,
       currentId: 0, menuLoading: false, showButton: false,
       menus: [], menuIds: [], depts: [], deptDatas: [], // 多选时使用
       permission: {
diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
index ec784f7..67ec329 100644
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -83,11 +83,12 @@
                     v-model="form.role"
                     placeholder="请选择角色"
                     @remove-tag="deleteTag"
-                    @change="changeJob"
+                    @change="changeRole"
                   >
                     <el-option
-                      v-for="item in jobs"
+                      v-for="item in roles"
                       :key="item.name"
+                      :disabled="level !== 1 && item.level <= level"
                       :label="item.name"
                       :value="item.id"
                     />
@@ -201,7 +202,7 @@
           <el-table-column :selectable="checkboxT" type="selection" width="55" />
           <el-table-column :show-overflow-tooltip="true" prop="nickName" label="姓名" />
           <el-table-column :show-overflow-tooltip="true" prop="username" label="账户" />
-          <el-table-column show-overflow-tooltip prop="role" label="角色" />
+          <el-table-column show-overflow-tooltip prop="roles[0].name" label="角色" />
           <el-table-column :show-overflow-tooltip="true" prop="phone" width="100" label="手机号" />
           <el-table-column :show-overflow-tooltip="true" prop="area" label="区域" />
           <el-table-column :show-overflow-tooltip="true" prop="spot" label="景区" />
@@ -247,7 +248,7 @@ import '@riophae/vue-treeselect/dist/vue-treeselect.css'
 import { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect'
 let userRoles = []
 let userJobs = []
-const defaultForm = { id: null, username: null, nickName: null, enabled: 'false', password: null, phone: null, area: null, spot: null, role: null, intelligence: null, intelligenceFile: null }
+const defaultForm = { id: null, username: null, nickName: null, enabled: 'false', password: null, phone: null, area: null, spot: null, role: null, intelligence: null, intelligenceFile: null, roles: [] }
 export default {
   name: 'User',
   components: { Treeselect, crudOperation, rrOperation, udOperation, pagination, DateRangePicker },
@@ -305,18 +306,18 @@ export default {
           { required: true, message: '飞行资质不能为空', trigger: 'blur' }
         ],
         role: [
-          {
-            validator: (rule, value, callback) => {
-              value = this.jobDatas
-              if (!value || value.length === 0) {
-                callback(new Error('请选择至少一个角色'))
-              } else {
-                callback()
-              }
-            },
-            trigger: 'change'
-          },
-          { required: true, message: '请选择至少一个角色', trigger: 'blur' }
+          // {
+          //   validator: (rule, value, callback) => {
+          //     value = this.jobDatas
+          //     if (!value || value.length === 0) {
+          //       callback(new Error('请选择至少一个角色'))
+          //     } else {
+          //       callback()
+          //     }
+          //   },
+          //   trigger: 'change'
+          // },
+          { required: true, message: '角色不能为空', trigger: 'blur' }
         ]
       }
     }
@@ -327,7 +328,7 @@ export default {
     ])
   },
   created() {
-    this.crud.msg.add = '新增成功，默认密码：123456'
+    this.crud.msg.add = '新增成功'
   },
   mounted: function() {
     const that = this
@@ -386,11 +387,14 @@ export default {
       }
     },
     changeRole(value) {
-      userRoles = []
-      value.forEach(function(data, index) {
-        const role = { id: data }
-        userRoles.push(role)
-      })
+      // userRoles = []
+      // value.forEach(function(data, index) {
+      //   const role = { id: data }
+      //   userRoles.push(role)
+      // })
+      console.log(value);
+      userRoles = [{ id: value }];
+      this.form.role = value;
     },
     changeJob(value) {
       userJobs = []
@@ -436,6 +440,7 @@ export default {
         const rol = { id: role.id }
         userRoles.push(rol)
       })
+      form.role = form.roles[0].id;
       form.jobs.forEach(function(job, index) {
         _this.jobDatas.push(job.id)
         const data = { id: job.id }
@@ -444,7 +449,7 @@ export default {
     },
     // 提交前做的操作
     [CRUD.HOOK.afterValidateCU](crud) {
-      crud.form.roles = userRoles
+      crud.form.roles = [userRoles[0]]
       crud.form.jobs = userJobs
       console.log(this.jobDatas)
       return true

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 2/2] =?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