Merge branch 'main' of http://129.211.33.98:3210/hjq/aircraft-admin
This commit is contained in:
commit
22b3dc41d5
27
src/api/system/customer.js
Normal file
27
src/api/system/customer.js
Normal file
@ -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 }
|
@ -1,88 +1,76 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="app-container">
|
<div class="app-container">
|
||||||
<div class="area-left">
|
<div class="area-left">
|
||||||
<div class="al-top">
|
<div class="al-top">
|
||||||
<el-divider direction="vertical" />
|
<el-divider direction="vertical" />
|
||||||
<span>区域架构</span>
|
<span>区域架构</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="al-tree">
|
<div class="al-tree">
|
||||||
<div class="boxShadow" @click="active = list[0].id;crud.title = '区域'" />
|
<div class="boxShadow" @click="active = list[0].id; crud.title = '区域'" />
|
||||||
<el-tree
|
<el-tree default-expand-all :data="list" :indent="20" icon-class="#"
|
||||||
default-expand-all
|
:props="{ children: 'children', label: 'label' }" @node-click="handleNodeClick">
|
||||||
:data="list"
|
<template slot-scope="{node,data}">
|
||||||
:indent="20"
|
<div style="width:100%;" class="treeData"
|
||||||
icon-class="#"
|
:class="{ activeBlue: active === data.id, activeIndent: node.level === 3 || node.level === 4 }"
|
||||||
:props="{ children: 'children', label: 'label' }"
|
@click="handleTool(node, data)">
|
||||||
@node-click="handleNodeClick"
|
<div v-if="node.level !== 1" class="dashedBox">
|
||||||
>
|
<div class="firstBox" />
|
||||||
<template slot-scope="{node,data}">
|
<div :class="{ dashshow: data.last }" />
|
||||||
<div
|
</div>
|
||||||
style="width:100%;"
|
<div v-if="node.level !== 3">
|
||||||
class="treeData"
|
<svg-icon v-if="active !== data.id" style="width: 1rem;height: 1rem;opacity: 0.8;"
|
||||||
:class="{ activeBlue: active === data.id, activeIndent: node.level === 3 || node.level === 4 }"
|
:icon-class="node.level === 1 ? 'gongsi' : 'tree-table'" />
|
||||||
@click="handleTool(node, data)"
|
<svg-icon v-else style="width: 1rem;height: 1rem;opacity: 0.8;"
|
||||||
>
|
:icon-class="node.level === 1 ? 'gongsilanse' : 'tree-table'" />
|
||||||
<div v-if="node.level !== 1" class="dashedBox">
|
</div>
|
||||||
<div class="firstBox" />
|
<div :title="data.label">{{ data.label }}</div>
|
||||||
<div :class="{ dashshow: data.last }" />
|
</div>
|
||||||
</div>
|
</template>
|
||||||
<div v-if="node.level !== 3">
|
</el-tree>
|
||||||
<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>
|
</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>
|
||||||
</div>
|
<div class="area-right">
|
||||||
<!--表格渲染-->
|
<!--工具栏-->
|
||||||
<el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;">
|
<div class="head-container">
|
||||||
<el-table-column :show-overflow-tooltip="true" prop="name" :label="`${crud.title}名称`" />
|
<div>
|
||||||
<el-table-column :show-overflow-tooltip="true" prop="num" :label="`${crud.title==='区域'?'景区':'人员'}数量`" />
|
<el-button v-permission="permission.add" class="filter-item" size="mini" type="primary"
|
||||||
<el-table-column
|
icon="el-icon-plus" @click="crud.toAdd">
|
||||||
v-if="checkPer(['admin','user:edit','user:del'])"
|
添加{{ crud.title }}
|
||||||
label="操作"
|
</el-button>
|
||||||
width="115"
|
</div>
|
||||||
align="center"
|
</div>
|
||||||
fixed="right"
|
<!--表单渲染-->
|
||||||
>
|
<el-dialog append-to-body :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0"
|
||||||
<template slot-scope="scope">
|
:title="crud.status.title" width="30%">
|
||||||
<udOperation
|
<el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
|
||||||
:data="scope.row"
|
<el-row :gutter="10">
|
||||||
:permission="permission"
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
||||||
/>
|
<el-form-item :label="`${crud.title}名称`" prop="name">
|
||||||
</template>
|
<el-input v-model="form.name" :placeholder="`请输入${crud.title}名称`"/>
|
||||||
</el-table-column>
|
</el-form-item>
|
||||||
</el-table>
|
</el-col>
|
||||||
<!--分页组件-->
|
</el-row>
|
||||||
<pagination />
|
</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', 'area:edit', 'area: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>
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import crudArea from '@/api/system/area'
|
import crudArea from '@/api/system/area'
|
||||||
@ -91,135 +79,140 @@ import pagination from '@crud/Pagination'
|
|||||||
import CRUD, { presenter, header, form, crud } from '@crud/crud'
|
import CRUD, { presenter, header, form, crud } from '@crud/crud'
|
||||||
const defaultForm = { id: null, name: null, type: 'area' }
|
const defaultForm = { id: null, name: null, type: 'area' }
|
||||||
export default {
|
export default {
|
||||||
name: 'Area',
|
name: 'Area',
|
||||||
components: { udOperation, pagination },
|
components: { udOperation, pagination },
|
||||||
cruds() {
|
cruds() {
|
||||||
return CRUD({ title: '区域', url: 'api/area', crudMethod: { ...crudArea }, optShow: { add: true }})
|
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)
|
|
||||||
},
|
},
|
||||||
handleTool(node, data) {
|
mixins: [presenter(), header(), form(defaultForm), crud()],
|
||||||
const id = node.level === 4 ? data.parentId : data.id
|
data() {
|
||||||
this.active = data.id
|
return {
|
||||||
console.log(node, 'node', data)
|
permission: {
|
||||||
this.$set(this, 'parentArr', [{
|
add: ['admin', 'area:add'],
|
||||||
parentId: data.parentId,
|
edit: ['admin', 'area:edit'],
|
||||||
parentName: data.parentName
|
del: ['admin', 'area:del']
|
||||||
}])
|
},
|
||||||
const type = node.level === 1
|
active: '',
|
||||||
this.crud.title = type ? '区域' : '景区'
|
rules: {
|
||||||
this.form.type = type ? 'area' : 'spot'
|
'name': [
|
||||||
// console.log(this.parentArr, 'parentArr')
|
{ required: true, message: `名称不能为空`, trigger: 'blur' },
|
||||||
// this.getList(id)
|
],
|
||||||
},
|
},
|
||||||
getTree() {
|
list: [{
|
||||||
return new Promise(resolve => {
|
id: 1,
|
||||||
// tree().then(res => {
|
label: '爱尚云',
|
||||||
// console.log(res)
|
children: [{
|
||||||
const res = this.list
|
id: 2,
|
||||||
const setLast = (data, parentId, parentName, level) => {
|
label: '北京区域',
|
||||||
if (data === null) return
|
children: []
|
||||||
return data.map((item, key) => {
|
},
|
||||||
if (data.length - 1 === key) {
|
{
|
||||||
return {
|
id: 3,
|
||||||
last: true,
|
label: '上海区域',
|
||||||
...item,
|
children: []
|
||||||
children: setLast(item.children, item.id, item.label, level + 1),
|
},
|
||||||
parentId,
|
{
|
||||||
parentName,
|
id: 4,
|
||||||
level
|
label: '深圳区域',
|
||||||
}
|
children: []
|
||||||
} else {
|
},
|
||||||
return {
|
{
|
||||||
last: false,
|
id: 5,
|
||||||
...item,
|
label: '广州区域',
|
||||||
children: setLast(item.children, item.id, item.label, level + 1),
|
children: [{
|
||||||
parentId,
|
id: 6,
|
||||||
parentName,
|
label: '白云山景区',
|
||||||
level
|
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.list = setLast(res, '', '', 1)
|
||||||
this.active = this.active || this.list[0].id
|
this.active = this.active || this.list[0].id
|
||||||
let arr = []
|
let arr = []
|
||||||
const setSelectList = (data) => {
|
const setSelectList = (data) => {
|
||||||
data.forEach((item) => {
|
data.forEach((item) => {
|
||||||
arr = [...arr, item]
|
arr = [...arr, item]
|
||||||
if (item.children) {
|
if (item.children) {
|
||||||
setSelectList(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>
|
</script>
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
@ -282,13 +275,13 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.area-left >>>.el-tree-node__content:hover,
|
.area-left>>>.el-tree-node__content:hover,
|
||||||
.area-left >>>.el-tree-node__content:focus {
|
.area-left>>>.el-tree-node__content:focus {
|
||||||
background: #EDEEFC;
|
background: #EDEEFC;
|
||||||
/* color:#4f5de6; */
|
/* color:#4f5de6; */
|
||||||
}
|
}
|
||||||
|
|
||||||
.area-left >>>.el-tree-node__content {
|
.area-left>>>.el-tree-node__content {
|
||||||
position: relative;
|
position: relative;
|
||||||
/* padding:12px 9px; */
|
/* padding:12px 9px; */
|
||||||
height: 40px;
|
height: 40px;
|
||||||
|
147
src/views/system/customer/index.vue
Normal file
147
src/views/system/customer/index.vue
Normal file
@ -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>
|
@ -145,7 +145,7 @@ export default {
|
|||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
defaultProps: { children: 'children', label: 'label', isLeaf: 'leaf' },
|
defaultProps: { children: 'children', label: 'label', isLeaf: 'leaf' },
|
||||||
dateScopes: ['全部', '本级', '自定义'], level: 3,
|
dateScopes: ['全部', '本级'], level: 3,
|
||||||
currentId: 0, menuLoading: false, showButton: false,
|
currentId: 0, menuLoading: false, showButton: false,
|
||||||
menus: [], menuIds: [], depts: [], deptDatas: [], // 多选时使用
|
menus: [], menuIds: [], depts: [], deptDatas: [], // 多选时使用
|
||||||
permission: {
|
permission: {
|
||||||
|
@ -83,11 +83,12 @@
|
|||||||
v-model="form.role"
|
v-model="form.role"
|
||||||
placeholder="请选择角色"
|
placeholder="请选择角色"
|
||||||
@remove-tag="deleteTag"
|
@remove-tag="deleteTag"
|
||||||
@change="changeJob"
|
@change="changeRole"
|
||||||
>
|
>
|
||||||
<el-option
|
<el-option
|
||||||
v-for="item in jobs"
|
v-for="item in roles"
|
||||||
:key="item.name"
|
:key="item.name"
|
||||||
|
:disabled="level !== 1 && item.level <= level"
|
||||||
:label="item.name"
|
:label="item.name"
|
||||||
:value="item.id"
|
:value="item.id"
|
||||||
/>
|
/>
|
||||||
@ -201,7 +202,7 @@
|
|||||||
<el-table-column :selectable="checkboxT" type="selection" width="55" />
|
<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="nickName" label="姓名" />
|
||||||
<el-table-column :show-overflow-tooltip="true" prop="username" 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="phone" width="100" label="手机号" />
|
||||||
<el-table-column :show-overflow-tooltip="true" prop="area" label="区域" />
|
<el-table-column :show-overflow-tooltip="true" prop="area" label="区域" />
|
||||||
<el-table-column :show-overflow-tooltip="true" prop="spot" 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'
|
import { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect'
|
||||||
let userRoles = []
|
let userRoles = []
|
||||||
let userJobs = []
|
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 {
|
export default {
|
||||||
name: 'User',
|
name: 'User',
|
||||||
components: { Treeselect, crudOperation, rrOperation, udOperation, pagination, DateRangePicker },
|
components: { Treeselect, crudOperation, rrOperation, udOperation, pagination, DateRangePicker },
|
||||||
@ -305,18 +306,18 @@ export default {
|
|||||||
{ required: true, message: '飞行资质不能为空', trigger: 'blur' }
|
{ required: true, message: '飞行资质不能为空', trigger: 'blur' }
|
||||||
],
|
],
|
||||||
role: [
|
role: [
|
||||||
{
|
// {
|
||||||
validator: (rule, value, callback) => {
|
// validator: (rule, value, callback) => {
|
||||||
value = this.jobDatas
|
// value = this.jobDatas
|
||||||
if (!value || value.length === 0) {
|
// if (!value || value.length === 0) {
|
||||||
callback(new Error('请选择至少一个角色'))
|
// callback(new Error('请选择至少一个角色'))
|
||||||
} else {
|
// } else {
|
||||||
callback()
|
// callback()
|
||||||
}
|
// }
|
||||||
},
|
// },
|
||||||
trigger: 'change'
|
// trigger: 'change'
|
||||||
},
|
// },
|
||||||
{ required: true, message: '请选择至少一个角色', trigger: 'blur' }
|
{ required: true, message: '角色不能为空', trigger: 'blur' }
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -327,7 +328,7 @@ export default {
|
|||||||
])
|
])
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
this.crud.msg.add = '新增成功,默认密码:123456'
|
this.crud.msg.add = '新增成功'
|
||||||
},
|
},
|
||||||
mounted: function() {
|
mounted: function() {
|
||||||
const that = this
|
const that = this
|
||||||
@ -386,11 +387,14 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
changeRole(value) {
|
changeRole(value) {
|
||||||
userRoles = []
|
// userRoles = []
|
||||||
value.forEach(function(data, index) {
|
// value.forEach(function(data, index) {
|
||||||
const role = { id: data }
|
// const role = { id: data }
|
||||||
userRoles.push(role)
|
// userRoles.push(role)
|
||||||
})
|
// })
|
||||||
|
console.log(value);
|
||||||
|
userRoles = [{ id: value }];
|
||||||
|
this.form.role = value;
|
||||||
},
|
},
|
||||||
changeJob(value) {
|
changeJob(value) {
|
||||||
userJobs = []
|
userJobs = []
|
||||||
@ -436,6 +440,7 @@ export default {
|
|||||||
const rol = { id: role.id }
|
const rol = { id: role.id }
|
||||||
userRoles.push(rol)
|
userRoles.push(rol)
|
||||||
})
|
})
|
||||||
|
form.role = form.roles[0].id;
|
||||||
form.jobs.forEach(function(job, index) {
|
form.jobs.forEach(function(job, index) {
|
||||||
_this.jobDatas.push(job.id)
|
_this.jobDatas.push(job.id)
|
||||||
const data = { id: job.id }
|
const data = { id: job.id }
|
||||||
@ -444,7 +449,7 @@ export default {
|
|||||||
},
|
},
|
||||||
// 提交前做的操作
|
// 提交前做的操作
|
||||||
[CRUD.HOOK.afterValidateCU](crud) {
|
[CRUD.HOOK.afterValidateCU](crud) {
|
||||||
crud.form.roles = userRoles
|
crud.form.roles = [userRoles[0]]
|
||||||
crud.form.jobs = userJobs
|
crud.form.jobs = userJobs
|
||||||
console.log(this.jobDatas)
|
console.log(this.jobDatas)
|
||||||
return true
|
return true
|
||||||
|
Loading…
Reference in New Issue
Block a user