项目、区域、房源列表;客户管理模块

This commit is contained in:
Leo_Ding 2025-06-23 17:53:58 +08:00
parent cfc751a3ec
commit ae1815709f
38 changed files with 1617 additions and 4543 deletions

View File

@ -3,12 +3,12 @@
*/ */
import request from '@/utils/request' import request from '@/utils/request'
// 获取项目列表 // 获取项目列表
export const getProjectList = (params) => request.basic.get('/api/v1/companies', params) export const getProjectList = (params) => request.basic.get('/api/v1/areas', params)
// 获取role条数据 // 获取单挑数据
export const getRole = (id) => request.basic.get(`/api/v1/roles/${id}`) export const getItem = (id) => request.basic.get(`/api/v1/areas/${id}`)
// 添加条目 // 添加条目
export const createProject = (params) => request.basic.post('/api/v1/companies', params) export const createProject = (params) => request.basic.post('/api/v1/areas', params)
// 更新role // 更新role
export const updateRole = (id, params) => request.basic.put(`/api/v1/roles/${id}`, params) export const updateItem = (id, params) => request.basic.put(`/api/v1/areas/${id}`, params)
// 删除role // 删除数据
export const delRole = (id) => request.basic.delete(`/api/v1/roles/${id}`) export const delItem = (id) => request.basic.delete(`/api/v1/areas/${id}`)

View File

@ -0,0 +1,14 @@
/**
* 区域模块接口
*/
import request from '@/utils/request'
// 获取项目列表
export const getProjectList = (params) => request.basic.get('/api/v1/customers', params)
// 获取单挑数据
export const getItem = (id) => request.basic.get(`/api/v1/customers/${id}`)
// 添加条目
export const createProject = (params) => request.basic.post('/api/v1/customers', params)
// 更新role
export const updateItem = (id, params) => request.basic.put(`/api/v1/customers/${id}`, params)
// 删除数据
export const delItem = (id) => request.basic.delete(`/api/v1/customers/${id}`)

View File

@ -0,0 +1,14 @@
/**
* 区域模块接口
*/
import request from '@/utils/request'
// 获取项目列表
export const getProjectList = (params) => request.basic.get('/api/v1/companies', params)
// 获取单挑数据
export const getItem = (id) => request.basic.get(`/api/v1/companies/${id}`)
// 添加条目
export const createProject = (params) => request.basic.post('/api/v1/companies', params)
// 更新role
export const updateItem = (id, params) => request.basic.put(`/api/v1/companies/${id}`, params)
// 删除数据
export const delItem = (id) => request.basic.delete(`/api/v1/companies/${id}`)

View File

@ -14,7 +14,7 @@
</template> </template>
<script setup> <script setup>
import { ref, watch,onMounted } from 'vue'; import { ref, watch, onMounted } from 'vue';
import { PlusOutlined } from '@ant-design/icons-vue'; import { PlusOutlined } from '@ant-design/icons-vue';
import { UploadOutlined } from '@ant-design/icons-vue'; import { UploadOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue'; import { message } from 'ant-design-vue';
@ -39,12 +39,13 @@ const uploadUrl = config('http.apiBasic') + '/api/v1/upload'
const fileList = ref([]); const fileList = ref([]);
// //
onMounted(() => { onMounted(() => {
fileList.value = props.modelValue.map(url => ({ console.log(' props.modelValue', props.modelValue)
uid: `preview-${Date.now()}-${Math.random()}`, fileList.value = props.modelValue.map(url => ({
name: url.substring(url.lastIndexOf('/') + 1), uid: `preview-${Date.now()}-${Math.random()}`,
status: 'done', name: url.substring(url.lastIndexOf('/') + 1),
url: url status: 'done',
})); url: url
}));
}); });
// //
const beforeUpload = (file) => { const beforeUpload = (file) => {
@ -84,74 +85,76 @@ const handlePreview = async (file) => {
// handleChange // handleChange
const handleChange = ({ file, fileList: updatedList }) => { const handleChange = ({ file, fileList: updatedList }) => {
// //
if (file.status === 'done') { if (file.status === 'done') {
const response = file.response; const response = file.response;
if (response && response.url) { if (response && response.url) {
// URL // URL
const targetFile = updatedList.find(f => f.uid === file.uid); const targetFile = updatedList.find(f => f.uid === file.uid);
if (targetFile) { if (targetFile) {
targetFile.url = response.url; targetFile.url = response.url;
message.success(`${file.name} 上传成功`); message.success(`${file.name} 上传成功`);
} }
// //
const urls = updatedList const urls = updatedList
.filter(item => item.status === 'done') .filter(item => item.status === 'done')
.map(item => item.url); .map(item => item.url);
emit('update:modelValue', urls); emit('update:modelValue', urls);
}
} else if (file.status === 'error') {
message.error(`${file.name} 上传失败`);
} }
} else if (file.status === 'error') {
message.error(`${file.name} 上传失败`);
}
}; };
// //
const handleCustomRequest = async (options) => { const handleCustomRequest = async (options) => {
const { file, onProgress, onSuccess, onError } = options; const { file, onProgress, onSuccess, onError } = options;
try { try {
const formData = new FormData(); const formData = new FormData();
formData.append('file', file); formData.append('file', file);
const { data } = await apis.common.uploadImg(formData); const { data } = await apis.common.uploadImg(formData);
const fullUrl = config('http.apiBasic') + data; const fullUrl = config('http.apiBasic') + data;
// //
onSuccess({ onSuccess({
uid: file.uid, uid: file.uid,
name: file.name, name: file.name,
status: 'done', status: 'done',
url: fullUrl, url: fullUrl,
response: { url: fullUrl } // responseURL response: { url: fullUrl } // responseURL
}, file); }, file);
// //
emit('uploadSuccess', { file, url: fullUrl }); emit('uploadSuccess', data);
} catch (err) { } catch (err) {
onError(err); onError(err);
message.error('上传失败'); message.error('上传失败');
emit('uploadError', err); emit('uploadError', err);
} }
}; };
// v-model // v-model
watch(() => props.modelValue, (newVal) => { watch(() => props.modelValue, (newVal) => {
// // fileList.value=[...newVal]
const doneFiles = fileList.value.filter(f => f.status === 'done'); //
const doneUrls = doneFiles.map(f => f.url); const doneFiles = fileList.value.filter(f => f.status === 'done');
const doneUrls = doneFiles.map(f => f.url);
// //
if (JSON.stringify(newVal) !== JSON.stringify(doneUrls)) { if (JSON.stringify(newVal) !== JSON.stringify(doneUrls)) {
fileList.value = [ fileList.value = [
...newVal.map(url => ({ ...newVal.map(url => {
uid: `preview-${Date.now()}-${Math.random()}`, return {
name: url.substring(url.lastIndexOf('/') + 1), uid: `preview-${Date.now()}-${Math.random()}`,
status: 'done', name: url.substring(url.lastIndexOf('/') + 1),
url: url status: 'done',
})), url: url
...fileList.value.filter(f => f.status !== 'done') }
]; }),
} ...fileList.value.filter(f => f.status !== 'done')
];
}
}, { deep: true }); }, { deep: true });
</script> </script>
<style> <style>

33
src/enums/enums.js Normal file
View File

@ -0,0 +1,33 @@
export class EnumManager {
constructor(data) {
this.data = data;
this.valueMap = new Map(data.map(item => [item.value, item.name]));
this.nameMap = new Map(data.map(item => [item.name, item.value]));
}
// 获取整个数组
getAll() {
return this.data;
}
// 根据value获取name
getName(value) {
return this.valueMap.get(value) || '';
}
// 根据name获取value可选
getValue(name) {
return this.nameMap.get(name) || '';
}
// 获取所有value的数组
getValues() {
return Array.from(this.valueMap.keys());
}
// 获取所有name的数组
getNames() {
return Array.from(this.valueMap.values());
}
}

35
src/enums/useEnum.js Normal file
View File

@ -0,0 +1,35 @@
import {EnumManager} from "./enums";
// 创建枚举管理器实例
const customersEnum = new EnumManager([
{value: 'intermediary', name: '中介'},
{value: 'owner', name: '业主'},
{value: 'closer', name: '意向客户'},
{value: 'visitor', name: '游客'},
]);
// 创建枚举管理器实例
const areaEnum = new EnumManager([
{value: 1, name: '南通'},
{value: 2, name: '盐城'}
]);
export {
customersEnum,areaEnum
}
// // 获取整个数组
// console.log(roleEnum.getAll());
// // 输出: 原始数组
// // 根据value获取name
// console.log(roleEnum.getName('owner')); // 输出: '业主'
// console.log(roleEnum.getName('visitor')); // 输出: '游客'
// // 根据name获取value
// console.log(roleEnum.getValue('中介')); // 输出: 'intermediary'
// // 获取所有value
// console.log(roleEnum.getValues());
// // 输出: ['intermediary', 'owner', 'closer', 'visitor']
// // 获取所有name
// console.log(roleEnum.getNames());
// // 输出: ['中介', '业主', '意向客户', '游客']

View File

@ -32,7 +32,7 @@ export default {
account: '个人页', account: '个人页',
'account.trigger': '触发报错', 'account.trigger': '触发报错',
'account.logout': '退出登录', 'account.logout': '退出登录',
userManagement: '户管理', userManagement: '户管理',
allList: '全部列表', allList: '全部列表',
tourList: '游客列表', tourList: '游客列表',
clientList: '业主列表', clientList: '业主列表',

View File

@ -7,7 +7,7 @@ export default [
component: 'RouteViewLayout', component: 'RouteViewLayout',
meta: { meta: {
icon: TableOutlined, icon: TableOutlined,
title: '户管理', title: '户管理',
isMenu: true, isMenu: true,
keepAlive: true, keepAlive: true,
permission: '*', permission: '*',

View File

@ -1,169 +0,0 @@
<template>
<a-card
:body-style="{ height: 'calc(100% - 56px - 47px)', padding: 0 }"
:style="{
position: 'sticky',
top: appStore.mainOffsetTop,
height: appStore.mainHeight,
}">
<template #title>
<a-input-search placeholder="搜索部门"></a-input-search>
</template>
<x-scrollbar class="pa-8-2">
<a-spin :spinning="loading">
<a-tree
block-node
:selected-keys="selectedKeys"
:tree-data="listData"
:field-names="{ key: 'id', children: 'children' }"
@select="onSelect">
<template #title="{ title }">
<span class="ant-tree-title__name">{{ title }}</span>
<span class="ant-tree-title__actions">
<a-dropdown
:trigger="['click']"
@click.stop>
<x-action-button>
<more-outlined></more-outlined>
</x-action-button>
<template #overlay>
<a-menu>
<a-menu-item @click="$refs.editDepartmentDialogRef.handleEdit()">
添加子部门
</a-menu-item>
<a-menu-item @click="$refs.editDepartmentDialogRef.handleEdit()">
编辑
</a-menu-item>
<a-menu-item @click="handleDelete">删除</a-menu-item>
</a-menu>
</template>
</a-dropdown>
</span>
</template>
</a-tree>
<empty
v-if="!listData.length"
:image="Empty.PRESENTED_IMAGE_SIMPLE"></empty>
</a-spin>
</x-scrollbar>
<template #actions>
<span @click="$refs.editDepartmentDialogRef.handleCreate()">
<plus-outlined></plus-outlined>
新建部门
</span>
</template>
</a-card>
<edit-department-dialog
ref="editDepartmentDialogRef"
@ok="onOk"></edit-department-dialog>
</template>
<script setup>
import { useAppStore } from '@/store'
import { ref, watch } from 'vue'
import { usePagination } from '@/hooks'
import apis from '@/apis'
import { Empty, Modal, message } from 'ant-design-vue'
import { config } from '@/config'
import { head, get, find } from 'lodash-es'
import { MoreOutlined, PlusOutlined } from '@ant-design/icons-vue'
import EditDepartmentDialog from './EditDepartmentDialog.vue'
const props = defineProps({
value: {
type: String,
default: '',
},
})
const emit = defineEmits(['change', 'update:value'])
const appStore = useAppStore()
const { listData, loading, showLoading, hideLoading } = usePagination()
const editDepartmentDialogRef = ref()
const selectedKeys = ref([props.value])
watch(
() => props.value,
(val) => {
if (val === selectedKeys.value?.[0]) return
selectedKeys.value = [val]
}
)
getList()
/**
* 获取列表
* @returns {Promise<void>}
*/
async function getList() {
try {
showLoading()
const { code, data } = await apis.common.getPageList().catch(() => {
throw new Error()
})
hideLoading()
if (config('http.code.success') === code) {
const { records } = data
listData.value = records
if (listData.value.length) {
selectedKeys.value = [get(head(listData.value), 'id')]
trigger()
}
}
} catch (error) {
hideLoading()
}
}
/**
* 删除
*/
function handleDelete({ id }) {
Modal.confirm({
title: '删除提示',
content: '确认删除?',
okText: '确认',
onOk: () => {
return new Promise((resolve, reject) => {
;(async () => {
try {
const { code } = await apis.common.del(id).catch(() => {
throw new Error()
})
if (config('http.code.success') === code) {
resolve()
message.success('删除成功')
await getList()
}
} catch (error) {
reject()
}
})()
})
},
})
}
function onSelect(keys) {
if (!keys.length) return
selectedKeys.value = keys
trigger()
}
async function onOk() {
await getList()
}
function trigger() {
const value = head(selectedKeys.value)
const record = find(listData.value, { id: value })
emit('update:value', value)
emit('change', record)
}
</script>
<style lang="less" scoped></style>

View File

@ -1,131 +0,0 @@
<template>
<a-modal
:open="modal.open"
:title="modal.title"
:width="480"
:confirm-loading="modal.confirmLoading"
:after-close="onAfterClose"
:cancel-text="cancelText"
@ok="handleOk"
@cancel="handleCancel">
<a-form
ref="formRef"
:model="formData"
:rules="formRules"
:label-col="{ style: { width: '90px' } }">
<a-form-item
label="部门名称"
name="name">
<a-input v-model:value="formData.name"></a-input>
</a-form-item>
<a-form-item
label="上级部门"
name="parent_id">
<a-tree-select v-model:value="formData.parent_id"></a-tree-select>
</a-form-item>
<a-form-item
label="部门负责人"
name="name">
<a-input v-model:value="formData.name"></a-input>
</a-form-item>
</a-form>
</a-modal>
</template>
<script setup>
import { cloneDeep } from 'lodash-es'
import { ref } from 'vue'
import { config } from '@/config'
import apis from '@/apis'
import { useForm, useModal } from '@/hooks'
const emit = defineEmits(['ok'])
const { modal, showModal, hideModal, showLoading, hideLoading } = useModal()
const { formRecord, formData, formRef, formRules, resetForm } = useForm()
const cancelText = ref('取消')
/**
* 新建
*/
function handleCreate() {
showModal({
type: 'create',
title: '新建部门',
})
}
/**
* 编辑
*/
function handleEdit(record = {}) {
showModal({
type: 'edit',
title: '编辑部门',
})
formRecord.value = record
formData.value = cloneDeep(record)
}
/**
* 确定
*/
function handleOk() {
formRef.value
.validateFields()
.then(async (values) => {
try {
showLoading()
const params = {
...values,
}
let result = null
switch (modal.value.type) {
case 'create':
result = await apis.common.create(params).catch(() => {
throw new Error()
})
break
case 'edit':
result = await apis.common.update(params).catch(() => {
throw new Error()
})
break
}
hideLoading()
if (config('http.code.success') === result?.code) {
hideModal()
emit('ok')
}
} catch (error) {
hideLoading()
}
})
.catch(() => {
hideLoading()
})
}
/**
* 取消
*/
function handleCancel() {
hideModal()
}
/**
* 关闭后
*/
function onAfterClose() {
resetForm()
cancelText.value = '取消'
hideLoading()
}
defineExpose({
handleCreate,
handleEdit,
})
</script>
<style lang="less" scoped></style>

View File

@ -1,274 +1,186 @@
<template> <template>
<a-modal <a-modal :open="modal.open" :title="modal.title" :width="640" :confirm-loading="modal.confirmLoading"
:open="modal.open" :after-close="onAfterClose" :cancel-text="cancelText" :ok-text="okText" @ok="handleOk" @cancel="handleCancel">
:title="modal.title" <a-spin :spinning="spining">
:width="640" <a-form ref="formRef" :model="formData" :rules="formRules">
:confirm-loading="modal.confirmLoading" <a-card class="mb-8-2">
:after-close="onAfterClose" <a-row :gutter="12">
:cancel-text="cancelText" <a-col :span="24">
:ok-text="okText" <a-form-item :label="'楼盘名称'" name="name">
@ok="handleOk" <a-input :placeholder="'请输入楼盘名称'" v-model:value="formData.name"></a-input>
@cancel="handleCancel"> </a-form-item>
<a-form </a-col>
ref="formRef" <a-col :span="24">
:model="formData" <a-form-item :label="'楼盘地址'" name="address">
:rules="formRules" <a-input :placeholder="'请输入楼盘地址'" v-model:value="formData.address"></a-input>
:label-col="{ style: { width: '90px' } }"> </a-form-item>
<a-card class="mb-8-2"> </a-col>
<a-row :gutter="12"> <a-col :span="24">
<a-col :span="12"> <a-form-item :label="'所属区域'" name="area">
<a-form-item <a-select ref="select" v-model:value="formData.areaId">
:label="$t('pages.system.user.form.username')" <a-select-option value="1">南通</a-select-option>
name="username"> <a-select-option value="2">盐城</a-select-option>
<a-input </a-select>
:placeholder="$t('pages.system.user.form.username.placeholder')" </a-form-item>
v-model:value="formData.username"></a-input> </a-col>
</a-form-item> <a-col :span="24">
</a-col> <a-form-item :label="'项目标签'" name="labels">
<a-col :span="12"> <div v-for="(item, index) in formData.labels" :key="index"
<a-form-item style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px">
:label="$t('pages.system.user.form.password')" <a-input :placeholder="'请输入标签'" :value="item"
name="password"> @change="(e) => updateLabel(index, e.target.value)">
<a-input-password </a-input>
v-model:value="formData.password" <div style="width: 50px;display: flex;justify-content: flex-end;align-items: center;">
:placeholder="$t('pages.system.user.form.password.placeholder')" /> <a-button v-if="index === formData.labels.length - 1" type="primary"
</a-form-item> :icon="h(PlusOutlined)" @click="addLabel" />
</a-col> <a-button v-else danger :icon="h(MinusOutlined)" @click="removeLabel(index)" />
</a-row> </div>
<a-row :gutter="12"> </div>
<a-col :span="12"> </a-form-item>
<a-form-item </a-col>
:label="$t('pages.system.user.form.name')" <a-col :span="12">
name="name"> <a-form-item :label="'经度'" name="longitude">
<a-input <a-input-number :placeholder="'请输入经度'" style="width: 100%;" :precision="2"
:placeholder="$t('pages.system.user.form.name.placeholder')" v-model:value="formData.longitude"></a-input-number>
v-model:value="formData.name"></a-input> </a-form-item>
</a-form-item> </a-col>
</a-col> <a-col :span="12">
<a-col :span="12"> <a-form-item :label="'纬度'" name="latitude">
<a-form-item <a-input-number :placeholder="'请输入纬度'" style="width: 100%;" :precision="2"
:label="$t('pages.system.user.form.roles')" v-model:value="formData.latitude"></a-input-number>
name="roles"> </a-form-item>
<a-select </a-col>
v-model:value="formData.roles" <a-col :span="24">
mode="multiple" <a-form-item :label="'状态'" name="status">
style="width: 100%" <a-radio-group v-model:value="formData.status" :options="[
:placeholder="$t('pages.system.user.form.roles.placeholder')" { label: '启用', value: 'enabled' },
:options="roles" { label: '停用', value: 'disabled' },
@change="handleChange"></a-select>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="12">
<a-col :span="12">
<a-form-item
:label="$t('pages.system.user.form.phone')"
type="tel"
name="phone">
<a-input
:placeholder="$t('pages.system.user.form.phone.placeholder')"
type="tel"
v-model:value="formData.phone"></a-input>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item
:label="$t('pages.system.user.form.email')"
type="email"
name="email">
<a-input
:placeholder="$t('pages.system.user.form.email.placeholder')"
type="email"
v-model:value="formData.email"></a-input>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="12">
<a-col :span="24">
<a-form-item
:label="$t('pages.system.user.form.remark')"
name="remark">
<a-textarea
:placeholder="$t('pages.system.user.form.remark.placeholder')"
v-model:value="formData.remark"></a-textarea>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="12">
<a-col :span="24">
<a-form-item
:label="$t('pages.system.user.form.status')"
name="status">
<a-radio-group
v-model:value="formData.status"
:options="[
{ label: $t('pages.system.user.form.status.activated'), value: 'activated' },
{ label: $t('pages.system.user.form.status.freezed'), value: 'freezed' },
]"></a-radio-group> ]"></a-radio-group>
</a-form-item> </a-form-item>
</a-col> </a-col>
</a-row> <a-col :span="24">
</a-card> <a-form-item :label="'项目图片'">
</a-form> <gx-upload v-model="formData.imgList" accept-types=".jpg,.png,.webp" :fileNumber="20"
@uploadSuccess="uploadSuccess" />
</a-form-item>
</a-col>
</a-row>
</a-card>
</a-form>
</a-spin>
</a-modal> </a-modal>
</template> </template>
<script setup> <script setup>
import { cloneDeep } from 'lodash-es' import { ref, h, onBeforeMount } from 'vue'
import { ref } from 'vue'
import { config } from '@/config' import { config } from '@/config'
import apis from '@/apis' import apis from '@/apis'
import { useForm, useModal } from '@/hooks' import { useForm, useModal, useSpining } from '@/hooks'
import { message } from 'ant-design-vue' import { message } from 'ant-design-vue'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import { PlusOutlined, MinusOutlined } from '@ant-design/icons-vue';
const emit = defineEmits(['ok']) const emit = defineEmits(['ok'])
const { t } = useI18n() // t const { t } = useI18n() // t
const { modal, showModal, hideModal, showLoading, hideLoading } = useModal() const { modal, showModal, hideModal, showLoading, hideLoading } = useModal()
const { formRecord, formData, formRef, formRules, resetForm } = useForm() const { formRecord, formData, formRef, formRules, resetForm } = useForm()
const { spining, showSpining, hideSpining } = useSpining()
const cancelText = ref(t('button.cancel')) const cancelText = ref(t('button.cancel'))
const okText = ref(t('button.confirm')) const okText = ref(t('button.confirm'))
const rolesValue = ref([])
const roles = ref([])
formRules.value = { formRules.value = {
name: { required: true, message: t('pages.system.user.form.username.placeholder') }, name: { required: true, message: '请输入区域名称' },
username: { required: true, message: t('pages.system.user.form.code.placeholder') }, lon: { required: true, message: '请输入经度' },
status: { required: true, message: t('pages.system.user.form.status') }, lat: { required: true, message: '请输入纬度' },
roles: [{ required: true, message: t('pages.system.user.form.roles.placeholder'), trigger: 'change' }], status: [{ required: true, message: '请选择状态', trigger: 'change' }],
} }
onBeforeMount(() => {
/** formData.value.labels = ['']
* 请求角色 })
*/
getRole()
/**
* select 选择框
*/
const handleChange = (value) => {
rolesValue.value = value
}
/** /**
* 新建 * 新建
*/ */
function handleCreate() { function handleCreate() {
showModal({ showModal({
type: 'create', type: 'create',
title: t('pages.system.user.add'), title: '新增区域',
}) })
// initData()
formData.value.status = 'enabled'
} }
async function getRole() {
const { success, data } = await apis.role.getRoleList().catch(() => {
throw new Error()
})
if (!success) {
return message.error('当前角色信息错误')
}
let roleArr = []
if (data.length) {
data.forEach((item) => {
roleArr.push({
label: item.name,
value: item.id,
})
})
}
roles.value = roleArr
}
/** /**
* 编辑 * 编辑
*/ */
async function handleEdit(record = {}) { async function handleEdit(record = {}) {
showModal({ showModal({
type: 'edit', type: 'edit',
title: t('pages.system.user.edit'), title: '编辑区域',
}) })
const { data, success } = await apis.users.getUsers(record.id).catch() try {
if (!success) { showSpining()
hideModal() const { data, success } = await apis.area.getItem(record.id).catch()
return if (!success) {
} hideModal()
let roles = [] return
if (data.roles) { }
roles = formatArr(data.roles, 'edit') hideSpining()
formData.value = { ...data }
} catch (error) {
message.error({ content: error.message })
hideSpining()
} }
data.roles = roles
formRecord.value = data
formData.value = cloneDeep(data)
} }
/** /**
* 确定 * 确定
*/ */
function handleOk() { function handleOk() {
formRef.value formRef.value.validateFields().then(async (values) => {
.validateFields() try {
.then(async (values) => { showLoading()
try { const params = {
showLoading() ...values
const params = {
...values,
roles: formatArr(rolesValue.value),
}
let result = null
switch (modal.value.type) {
case 'create':
result = await apis.users.createUsers(params).catch(() => {
throw new Error()
})
break
case 'edit':
result = await apis.users.updateUsers(formData.value.id, params).catch(() => {
throw new Error()
})
break
}
hideLoading()
if (config('http.code.success') === result?.success) {
hideModal()
emit('ok')
}
} catch (error) {
hideLoading()
} }
}) let result = null
.catch(() => { switch (modal.value.type) {
case 'create':
result = await apis.area.createProject(params).catch((error) => {
throw new Error(error)
})
break
case 'edit':
result = await apis.area.updateItem(formData.value.id, params).catch(() => {
throw new Error(error)
})
break
}
hideLoading()
if (config('http.code.success') === result?.success) {
hideModal()
emit('ok')
}
} catch (error) {
message.error({ content: error.message })
hideLoading()
}
})
.catch((e) => {
hideLoading() hideLoading()
}) })
} }
/** // setup
* 对权限组 过数据格式 const updateLabel = (index, value) => {
*/ formData.value.labels[index] = value;
function formatArr(data, type = '') { };
const rolesArr = []
data.forEach((item) => {
roles.value.forEach((r) => {
if (type === 'edit') {
if (item.role_id === r.value) {
rolesArr.push({
value: item.role_id,
label: r.label,
})
return
}
} else if (r.value === item) {
rolesArr.push({
role_id: item,
role_name: r.label,
})
return
}
})
})
return rolesArr
}
const addLabel = () => {
formData.value.labels.push('');
};
const removeLabel = (index) => {
formData.value.labels.splice(index, 1);
};
/** /**
* 取消 * 取消
*/ */

View File

@ -1,44 +1,27 @@
<template> <template>
<x-search-bar class="mb-8-2"> <!-- <x-search-bar class="mb-8-2">
<template #default="{ gutter, colSpan }"> <template #default="{ gutter, colSpan }">
<a-form <a-form :model="searchFormData" layout="inline">
:label-col="{ style: { width: '100px' } }"
:model="searchFormData"
layout="inline">
<a-row :gutter="gutter"> <a-row :gutter="gutter">
<a-col v-bind="colSpan"> <a-col v-bind="colSpan">
<a-form-item <a-form-item label="岗位名称" name="name">
:label="$t('pages.system.role.form.name')" <a-input placeholder="请输入岗位名称" v-model:value="searchFormData.name"></a-input>
name="name">
<a-input
:placeholder="$t('pages.system.role.form.code.placeholder')"
v-model:value="searchFormData.name"></a-input>
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col v-bind="colSpan"> <a-col v-bind="colSpan">
<a-form-item name="code"> <a-form-item label="状态" name="status">
<template #label> <a-select v-model:value="searchFormData.status" allowClear>
{{ $t('pages.system.role.form.code') }} <a-select-option value="">全部</a-select-option>
<a-tooltip :title="$t('pages.system.role.form.code')"> <a-select-option value="enabled">启用</a-select-option>
<question-circle-outlined class="ml-4-1 color-placeholder" /> <a-select-option value="disabled">停用</a-select-option>
</a-tooltip> </a-select>
</template>
<a-input
:placeholder="$t('pages.system.role.form.code.placeholder')"
v-model:value="searchFormData.code"></a-input>
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col class="align-right" v-bind="colSpan">
<a-col
class="align-right"
v-bind="colSpan">
<a-space> <a-space>
<a-button @click="handleResetSearch">{{ $t('button.reset') }}</a-button> <a-button @click="handleResetSearch">{{ $t('button.reset') }}</a-button>
<a-button <a-button ghost type="primary" @click="handleSearch">
ghost
type="primary"
@click="handleSearch">
{{ $t('button.search') }} {{ $t('button.search') }}
</a-button> </a-button>
</a-space> </a-space>
@ -46,63 +29,38 @@
</a-row> </a-row>
</a-form> </a-form>
</template> </template>
</x-search-bar> </x-search-bar> -->
<a-row <a-row :gutter="8" :wrap="false">
:gutter="8"
:wrap="false">
<a-col flex="auto"> <a-col flex="auto">
<a-card type="flex"> <a-card type="flex">
<x-action-bar class="mb-8-2"> <x-action-bar class="mb-8-2">
<a-button <a-button type="primary" @click="$refs.editDialogRef.handleCreate()">
v-action="'add'"
type="primary"
@click="$refs.editDialogRef.handleCreate()">
<template #icon> <template #icon>
<plus-outlined></plus-outlined> <plus-outlined></plus-outlined>
</template> </template>
{{ $t('pages.system.role.add') }} 新增房源
</a-button> </a-button>
</x-action-bar> </x-action-bar>
<a-table <a-table :columns="columns" :data-source="listData" bordered="true" :loading="loading"
:columns="columns" :pagination="paginationState" :scroll="{ x: 1000 }" @change="onTableChange">
:data-source="listData"
:loading="loading"
:pagination="paginationState"
:scroll="{ x: 1000 }"
@change="onTableChange">
<template #bodyCell="{ column, record }"> <template #bodyCell="{ column, record }">
<template v-if="'statusType' === column.key">
<!--状态-->
<a-tag
v-if="statusTypeEnum.is('enabled', record.status)"
color="processing">
{{ statusTypeEnum.getDesc(record.status) }}
</a-tag>
<!--状态-->
<a-tag
v-if="statusTypeEnum.is('disabled', record.status)"
color="processing">
{{ statusTypeEnum.getDesc(record.status) }}
</a-tag>
</template>
<template v-if="'createAt' === column.key"> <template v-if="column.dataIndex === 'img'">
{{ formatUtcDateTime(record.created_at) }} <a-image :width="60" :src="config('http.apiBasic')+record.img || $imageErr.imgErr" />
</template>
<template v-if="'status' === column.dataIndex">
<a-tag v-if="record.status === 'enabled'" :color="'green'">启用</a-tag>
<a-tag v-if="record.status === 'disabled'" :color="'red'">停用</a-tag>
</template> </template>
<template v-if="'action' === column.key"> <template v-if="'action' === column.key">
<x-action-button @click="$refs.editDialogRef.handleEdit(record)"> <x-action-button @click="$refs.editDialogRef.handleEdit(record)">
<a-tooltip> <a-tooltip>
<template #title> {{ $t('pages.system.role.edit') }}</template> <template #title> {{ $t('pages.system.user.edit') }}</template>
<edit-outlined /> <edit-outlined /> </a-tooltip></x-action-button>
</a-tooltip> <x-action-button @click="handleDelete(record)">
</x-action-button>
<x-action-button @click="handleRemove(record)">
<a-tooltip> <a-tooltip>
<template #title> {{ $t('pages.system.delete') }}</template> <template #title>{{ $t('pages.system.delete') }}</template>
<delete-outlined style="color: #ff4d4f" /> <delete-outlined style="color: #ff4d4f" /> </a-tooltip></x-action-button>
</a-tooltip>
</x-action-button>
</template> </template>
</template> </template>
</a-table> </a-table>
@ -110,53 +68,42 @@
</a-col> </a-col>
</a-row> </a-row>
<edit-dialog <edit-dialog ref="editDialogRef" @ok="onOk"></edit-dialog>
ref="editDialogRef"
@ok="onOk"></edit-dialog>
</template> </template>
<script setup> <script setup>
import { message, Modal } from 'ant-design-vue' import { message, Modal } from 'ant-design-vue'
import { ref } from 'vue' import { ref } from 'vue'
import apis from '@/apis' import apis from '@/apis'
import { formatUtcDateTime } from '@/utils/util'
import { config } from '@/config' import { config } from '@/config'
import { statusTypeEnum } from '@/enums/system' import { usePagination } from '@/hooks'
import { usePagination, useForm } from '@/hooks'
import EditDialog from './components/EditDialog.vue' import EditDialog from './components/EditDialog.vue'
import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons-vue' import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons-vue'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
defineOptions({ defineOptions({
name: 'systemRole', name: 'houseList',
}) })
const { t } = useI18n() // t const { t } = useI18n() // t
const columns = [ const columns = [
{ title: t('pages.system.role.form.code'), dataIndex: 'code', width: 240 }, { title: '区域名称', dataIndex: 'name'},
{ title: t('pages.system.role.form.name'), dataIndex: 'name' }, { title: '经度', dataIndex: 'lon',width:100,align:'center'},
{ title: t('pages.system.role.form.status'), dataIndex: 'status', key: 'statusType', width: 80 }, { title: '纬度', dataIndex: 'lat',width:100,align:'center'},
{ title: t('pages.system.role.form.sequence'), dataIndex: 'sequence', width: 100 }, { title: '状态', dataIndex: 'status', key: 'introduce', width: 100,align:'center' },
{ title: t('pages.system.role.form.created_at'), key: 'createAt', fixed: 'right', width: 120 }, { title: t('button.action'), key: 'action', fixed: 'right', width: 100, align: 'center' },
{ title: t('button.action'), key: 'action', fixed: 'right', width: 120 },
] ]
const { listData, loading, showLoading, hideLoading, paginationState, resetPagination, searchFormData } = usePagination()
const { listData, loading, showLoading, hideLoading, paginationState, searchFormData, resetPagination } =
usePagination()
const { resetForm } = useForm()
const editDialogRef = ref() const editDialogRef = ref()
getPageList() getPageList()
/** /**
* 获取用户列 * 获取格数据
* @returns {Promise<void>} * @returns {Promise<void>}
*/ */
async function getPageList() { async function getPageList() {
try { try {
showLoading() showLoading()
const { pageSize, current } = paginationState const { pageSize, current } = paginationState
const { success, data, total } = await apis.role const { success, data, total } = await apis.area
.getRoleList({ .getProjectList({
pageSize, pageSize,
page: current, page: current,
...searchFormData.value, ...searchFormData.value,
@ -175,18 +122,18 @@ async function getPageList() {
} }
/** /**
* *
*/ */
function handleRemove({ id }) { function handleDelete({ id }) {
Modal.confirm({ Modal.confirm({
title: t('pages.system.role.delTip'), title: t('pages.system.user.delTip'),
content: t('button.confirm'), content: t('button.confirm'),
okText: t('button.confirm'), okText: t('button.confirm'),
onOk: () => { onOk: () => {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
;(async () => { ; (async () => {
try { try {
const { success } = await apis.role.delRole(id).catch(() => { const { success } = await apis.area.delItem(id).catch(() => {
throw new Error() throw new Error()
}) })
if (config('http.code.success') === success) { if (config('http.code.success') === success) {
@ -212,6 +159,13 @@ function onTableChange({ current, pageSize }) {
getPageList() getPageList()
} }
/**
* 搜索
*/
function handleSearch() {
resetPagination()
getPageList()
}
/** /**
* 重置 * 重置
*/ */
@ -220,20 +174,11 @@ function handleResetSearch() {
resetPagination() resetPagination()
getPageList() getPageList()
} }
/**
* 搜索
*/
function handleSearch() {
resetForm()
resetPagination()
getPageList()
}
/** /**
* 编辑完成 * 编辑完成
*/ */
async function onOk() { async function onOk() {
message.success(t('component.message.success.delete'))
await getPageList() await getPageList()
} }
</script> </script>

View File

@ -20,7 +20,8 @@
</a-col> </a-col>
<a-col :span="24"> <a-col :span="24">
<a-form-item :label="'图片'"> <a-form-item :label="'图片'">
<gx-upload v-model="formData.fileList" accept-types=".jpg,.png,.webp" :fileNumber="1"/> <gx-upload v-model="formData.fileList" accept-types=".jpg,.png,.webp" :fileNumber="1"
@uploadSuccess="uploadSuccess" />
</a-form-item> </a-form-item>
</a-col> </a-col>
</a-row> </a-row>
@ -50,10 +51,11 @@ const cancelText = ref(t('button.cancel'))
const okText = ref(t('button.confirm')) const okText = ref(t('button.confirm'))
const rolesValue = ref([]) const rolesValue = ref([])
const roles = ref([]) const roles = ref([])
const imgUrl = ref('') const ceshi = ref('1222')
const areaList = ref([]) const areaList = ref([])
const childOpen = ref(false) const childOpen = ref(false)
const fileList=ref([]) const fileList = ref([])
const formArea = ref({ name: '', status: 'enabled' }) const formArea = ref({ name: '', status: 'enabled' })
formRules.value = { formRules.value = {
title: { required: true, message: '请输入项目名称' }, title: { required: true, message: '请输入项目名称' },
@ -64,23 +66,7 @@ const areaFormRules = {
status: [{ required: true, message: '请选择状态', trigger: 'change' }], status: [{ required: true, message: '请选择状态', trigger: 'change' }],
// fileList: [{ required: true, message: '', trigger: 'change' }], // fileList: [{ required: true, message: '', trigger: 'change' }],
} }
const initData = async () => {
try {
showSpining()
const { success, data, total } = await apis.recruitment.getAreasList({ pageSize: 999, page: 1, })
if (config('http.code.success') === success) {
hideSpining()
areaList.value = data.map(item => {
if (item.status === 'enabled') {
return { code: item.id, name: item.name }
}
})
}
} catch (error) {
message.error({ content: error.message })
hideSpining()
}
}
/** /**
* 新建 * 新建
@ -100,39 +86,51 @@ function handleCreate() {
async function handleEdit(record = {}) { async function handleEdit(record = {}) {
showModal({ showModal({
type: 'edit', type: 'edit',
title: t('pages.system.user.edit'), title: '编辑项目',
}) })
const { data, success } = await apis.recruitment.getItem(record.id).catch() try {
if (!success) { showSpining()
hideModal() const { data, success } = await apis.project.getItem(record.id).catch()
return if (!success) {
hideModal()
return
}
hideSpining()
formData.value = { ...data }
if(data.img){
formData.value.fileList = [config('http.apiBasic')+data.img]
}
} catch (error) {
message.error({ content: error.message })
hideSpining()
} }
formData.value = { ...data }
imgUrl.value = config('http.apiBasic') + data.img
}
}
const uploadSuccess = (data) => {
fileList.value.push(data)
}
/** /**
* 确定 * 确定
*/ */
function handleOk() { function handleOk() {
if(formData.value.fileList.length===0) return message.error('请上传图片') if (fileList.value.length === 0) return message.error('请上传图片')
formRef.value.validateFields().then(async (values) => { formRef.value.validateFields().then(async (values) => {
try { try {
showLoading() showLoading()
const params = { const params = {
d name: formData.value.name,
status: formData.value.status,
img: fileList.value[0]
} }
let result = null let result = null
switch (modal.value.type) { switch (modal.value.type) {
case 'create': case 'create':
result = await apis.area.createProject(params).catch((error) => { result = await apis.project.createProject(params).catch((error) => {
throw new Error(error) throw new Error(error)
}) })
break break
case 'edit': case 'edit':
result = await apis.recruitment.updateItem(formData.value.id, params).catch(() => { result = await apis.project.updateItem(formData.value.id, params).catch(() => {
throw new Error(error) throw new Error(error)
}) })
break break
@ -148,7 +146,6 @@ function handleOk() {
} }
}) })
.catch((e) => { .catch((e) => {
console.log(e)
hideLoading() hideLoading()
}) })
} }
@ -158,7 +155,6 @@ function handleOk() {
* 取消 * 取消
*/ */
function handleCancel() { function handleCancel() {
imgUrl.value = ''
hideModal() hideModal()
} }

View File

@ -1,11 +1,11 @@
<template> <template>
<x-search-bar class="mb-8-2"> <!-- <x-search-bar class="mb-8-2">
<template #default="{ gutter, colSpan }"> <template #default="{ gutter, colSpan }">
<a-form :model="searchFormData" layout="inline"> <a-form :model="searchFormData" layout="inline">
<a-row :gutter="gutter"> <a-row :gutter="gutter">
<a-col v-bind="colSpan"> <a-col v-bind="colSpan">
<a-form-item label="岗位名称" name="title"> <a-form-item label="岗位名称" name="name">
<a-input placeholder="请输入岗位名称" v-model:value="searchFormData.title"></a-input> <a-input placeholder="请输入岗位名称" v-model:value="searchFormData.name"></a-input>
</a-form-item> </a-form-item>
</a-col> </a-col>
@ -29,7 +29,7 @@
</a-row> </a-row>
</a-form> </a-form>
</template> </template>
</x-search-bar> </x-search-bar> -->
<a-row :gutter="8" :wrap="false"> <a-row :gutter="8" :wrap="false">
<a-col flex="auto"> <a-col flex="auto">
<a-card type="flex"> <a-card type="flex">
@ -45,17 +45,9 @@
:pagination="paginationState" :scroll="{ x: 1000 }" @change="onTableChange"> :pagination="paginationState" :scroll="{ x: 1000 }" @change="onTableChange">
<template #bodyCell="{ column, record }"> <template #bodyCell="{ column, record }">
<template v-if="column.dataIndex === 'introduce'"> <template v-if="column.dataIndex === 'img'">
<a-tooltip :title="record.introduce"> <a-image :width="60" :src="config('http.apiBasic')+record.img || $imageErr.imgErr" />
<div class="text-ellipsis">{{ record.introduce }}</div>
</a-tooltip>
</template> </template>
<template v-if="column.dataIndex === 'duty'">
<a-tooltip :title="record.duty">
<div class="text-ellipsis">{{ record.duty }}</div>
</a-tooltip>
</template>
<template v-if="'status' === column.dataIndex"> <template v-if="'status' === column.dataIndex">
<a-tag v-if="record.status === 'enabled'" :color="'green'">启用</a-tag> <a-tag v-if="record.status === 'enabled'" :color="'green'">启用</a-tag>
<a-tag v-if="record.status === 'disabled'" :color="'red'">停用</a-tag> <a-tag v-if="record.status === 'disabled'" :color="'red'">停用</a-tag>
@ -92,13 +84,13 @@ import EditDialog from './components/EditDialog.vue'
import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons-vue' import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons-vue'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
defineOptions({ defineOptions({
name: 'homeBanner', name: 'projectList',
}) })
const { t } = useI18n() // t const { t } = useI18n() // t
const columns = [ const columns = [
{ title: '图片', dataIndex: 'img', width: 120, }, { title: '图片', dataIndex: 'img', width: 120,align:'center'},
{ title: '项目名称', dataIndex: 'name', key: 'title', width: 150 }, { title: '项目名称', dataIndex: 'name', key: 'title' },
{ title: '状态', dataIndex: 'status', key: 'introduce',width:100}, { title: '状态', dataIndex: 'status', key: 'introduce', width: 100,align:'center' },
{ title: t('button.action'), key: 'action', fixed: 'right', width: 100, align: 'center' }, { title: t('button.action'), key: 'action', fixed: 'right', width: 100, align: 'center' },
] ]
@ -108,14 +100,14 @@ const { listData, loading, showLoading, hideLoading, paginationState, resetPagin
const editDialogRef = ref() const editDialogRef = ref()
getPageList() getPageList()
/** /**
* 获取用户列 * 获取格数据
* @returns {Promise<void>} * @returns {Promise<void>}
*/ */
async function getPageList() { async function getPageList() {
try { try {
showLoading() showLoading()
const { pageSize, current } = paginationState const { pageSize, current } = paginationState
const { success, data, total } = await apis.area const { success, data, total } = await apis.project
.getProjectList({ .getProjectList({
pageSize, pageSize,
page: current, page: current,
@ -146,7 +138,7 @@ function handleDelete({ id }) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
; (async () => { ; (async () => {
try { try {
const { success } = await apis.recruitment.delItem(id).catch(() => { const { success } = await apis.project.delItem(id).catch(() => {
throw new Error() throw new Error()
}) })
if (config('http.code.success') === success) { if (config('http.code.success') === success) {

View File

@ -1,169 +0,0 @@
<template>
<a-card
:body-style="{ height: 'calc(100% - 56px - 47px)', padding: 0 }"
:style="{
position: 'sticky',
top: appStore.mainOffsetTop,
height: appStore.mainHeight,
}">
<template #title>
<a-input-search placeholder="搜索部门"></a-input-search>
</template>
<x-scrollbar class="pa-8-2">
<a-spin :spinning="loading">
<a-tree
block-node
:selected-keys="selectedKeys"
:tree-data="listData"
:field-names="{ key: 'id', children: 'children' }"
@select="onSelect">
<template #title="{ title }">
<span class="ant-tree-title__name">{{ title }}</span>
<span class="ant-tree-title__actions">
<a-dropdown
:trigger="['click']"
@click.stop>
<x-action-button>
<more-outlined></more-outlined>
</x-action-button>
<template #overlay>
<a-menu>
<a-menu-item @click="$refs.editDepartmentDialogRef.handleEdit()">
添加子部门
</a-menu-item>
<a-menu-item @click="$refs.editDepartmentDialogRef.handleEdit()">
编辑
</a-menu-item>
<a-menu-item @click="handleDelete">删除</a-menu-item>
</a-menu>
</template>
</a-dropdown>
</span>
</template>
</a-tree>
<empty
v-if="!listData.length"
:image="Empty.PRESENTED_IMAGE_SIMPLE"></empty>
</a-spin>
</x-scrollbar>
<template #actions>
<span @click="$refs.editDepartmentDialogRef.handleCreate()">
<plus-outlined></plus-outlined>
新建部门
</span>
</template>
</a-card>
<edit-department-dialog
ref="editDepartmentDialogRef"
@ok="onOk"></edit-department-dialog>
</template>
<script setup>
import { useAppStore } from '@/store'
import { ref, watch } from 'vue'
import { usePagination } from '@/hooks'
import apis from '@/apis'
import { Empty, Modal, message } from 'ant-design-vue'
import { config } from '@/config'
import { head, get, find } from 'lodash-es'
import { MoreOutlined, PlusOutlined } from '@ant-design/icons-vue'
import EditDepartmentDialog from './EditDepartmentDialog.vue'
const props = defineProps({
value: {
type: String,
default: '',
},
})
const emit = defineEmits(['change', 'update:value'])
const appStore = useAppStore()
const { listData, loading, showLoading, hideLoading } = usePagination()
const editDepartmentDialogRef = ref()
const selectedKeys = ref([props.value])
watch(
() => props.value,
(val) => {
if (val === selectedKeys.value?.[0]) return
selectedKeys.value = [val]
}
)
getList()
/**
* 获取列表
* @returns {Promise<void>}
*/
async function getList() {
try {
showLoading()
const { code, data } = await apis.common.getPageList().catch(() => {
throw new Error()
})
hideLoading()
if (config('http.code.success') === code) {
const { records } = data
listData.value = records
if (listData.value.length) {
selectedKeys.value = [get(head(listData.value), 'id')]
trigger()
}
}
} catch (error) {
hideLoading()
}
}
/**
* 删除
*/
function handleDelete({ id }) {
Modal.confirm({
title: '删除提示',
content: '确认删除?',
okText: '确认',
onOk: () => {
return new Promise((resolve, reject) => {
;(async () => {
try {
const { code } = await apis.common.del(id).catch(() => {
throw new Error()
})
if (config('http.code.success') === code) {
resolve()
message.success('删除成功')
await getList()
}
} catch (error) {
reject()
}
})()
})
},
})
}
function onSelect(keys) {
if (!keys.length) return
selectedKeys.value = keys
trigger()
}
async function onOk() {
await getList()
}
function trigger() {
const value = head(selectedKeys.value)
const record = find(listData.value, { id: value })
emit('update:value', value)
emit('change', record)
}
</script>
<style lang="less" scoped></style>

View File

@ -1,131 +0,0 @@
<template>
<a-modal
:open="modal.open"
:title="modal.title"
:width="480"
:confirm-loading="modal.confirmLoading"
:after-close="onAfterClose"
:cancel-text="cancelText"
@ok="handleOk"
@cancel="handleCancel">
<a-form
ref="formRef"
:model="formData"
:rules="formRules"
:label-col="{ style: { width: '90px' } }">
<a-form-item
label="部门名称"
name="name">
<a-input v-model:value="formData.name"></a-input>
</a-form-item>
<a-form-item
label="上级部门"
name="parent_id">
<a-tree-select v-model:value="formData.parent_id"></a-tree-select>
</a-form-item>
<a-form-item
label="部门负责人"
name="name">
<a-input v-model:value="formData.name"></a-input>
</a-form-item>
</a-form>
</a-modal>
</template>
<script setup>
import { cloneDeep } from 'lodash-es'
import { ref } from 'vue'
import { config } from '@/config'
import apis from '@/apis'
import { useForm, useModal } from '@/hooks'
const emit = defineEmits(['ok'])
const { modal, showModal, hideModal, showLoading, hideLoading } = useModal()
const { formRecord, formData, formRef, formRules, resetForm } = useForm()
const cancelText = ref('取消')
/**
* 新建
*/
function handleCreate() {
showModal({
type: 'create',
title: '新建部门',
})
}
/**
* 编辑
*/
function handleEdit(record = {}) {
showModal({
type: 'edit',
title: '编辑部门',
})
formRecord.value = record
formData.value = cloneDeep(record)
}
/**
* 确定
*/
function handleOk() {
formRef.value
.validateFields()
.then(async (values) => {
try {
showLoading()
const params = {
...values,
}
let result = null
switch (modal.value.type) {
case 'create':
result = await apis.common.create(params).catch(() => {
throw new Error()
})
break
case 'edit':
result = await apis.common.update(params).catch(() => {
throw new Error()
})
break
}
hideLoading()
if (config('http.code.success') === result?.code) {
hideModal()
emit('ok')
}
} catch (error) {
hideLoading()
}
})
.catch(() => {
hideLoading()
})
}
/**
* 取消
*/
function handleCancel() {
hideModal()
}
/**
* 关闭后
*/
function onAfterClose() {
resetForm()
cancelText.value = '取消'
hideLoading()
}
defineExpose({
handleCreate,
handleEdit,
})
</script>
<style lang="less" scoped></style>

View File

@ -1,154 +1,59 @@
<template> <template>
<a-modal <a-modal :open="modal.open" :title="modal.title" :width="640" :confirm-loading="modal.confirmLoading"
:open="modal.open" :after-close="onAfterClose" :cancel-text="cancelText" :ok-text="okText" @ok="handleOk" @cancel="handleCancel">
:title="modal.title" <a-spin :spinning="spining">
:width="640" <a-form ref="formRef" :model="formData" :rules="formRules">
:confirm-loading="modal.confirmLoading" <a-card class="mb-8-2">
:after-close="onAfterClose" <a-row :gutter="12">
:cancel-text="cancelText" <a-col :span="24">
:ok-text="okText" <a-form-item :label="'区域'" name="name">
@ok="handleOk" <a-input :placeholder="'请输入区域'" v-model:value="formData.name"></a-input>
@cancel="handleCancel"> </a-form-item>
<a-form </a-col>
ref="formRef" <a-col :span="24">
:model="formData" <a-form-item :label="'经度'" name="lon">
:rules="formRules" <a-input-number :placeholder="'请输入经度'" style="width: 100%;" :precision="2" v-model:value="formData.lon"></a-input-number>
:label-col="{ style: { width: '90px' } }"> </a-form-item>
<a-card class="mb-8-2"> </a-col>
<a-row :gutter="12"> <a-col :span="24">
<a-col :span="12"> <a-form-item :label="'纬度'" name="lat">
<a-form-item <a-input-number :placeholder="'请输入纬度'" style="width: 100%;" :precision="2" v-model:value="formData.lat"></a-input-number>
:label="$t('pages.system.user.form.username')" </a-form-item>
name="username"> </a-col>
<a-input <a-col :span="24">
:placeholder="$t('pages.system.user.form.username.placeholder')" <a-form-item :label="'状态'" name="status">
v-model:value="formData.username"></a-input> <a-radio-group v-model:value="formData.status" :options="[
</a-form-item> { label: '启用', value: 'enabled' },
</a-col> { label: '停用', value: 'disabled' },
<a-col :span="12">
<a-form-item
:label="$t('pages.system.user.form.password')"
name="password">
<a-input-password
v-model:value="formData.password"
:placeholder="$t('pages.system.user.form.password.placeholder')" />
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="12">
<a-col :span="12">
<a-form-item
:label="$t('pages.system.user.form.name')"
name="name">
<a-input
:placeholder="$t('pages.system.user.form.name.placeholder')"
v-model:value="formData.name"></a-input>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item
:label="$t('pages.system.user.form.roles')"
name="roles">
<a-select
v-model:value="formData.roles"
mode="multiple"
style="width: 100%"
:placeholder="$t('pages.system.user.form.roles.placeholder')"
:options="roles"
@change="handleChange"></a-select>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="12">
<a-col :span="12">
<a-form-item
:label="$t('pages.system.user.form.phone')"
type="tel"
name="phone">
<a-input
:placeholder="$t('pages.system.user.form.phone.placeholder')"
type="tel"
v-model:value="formData.phone"></a-input>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item
:label="$t('pages.system.user.form.email')"
type="email"
name="email">
<a-input
:placeholder="$t('pages.system.user.form.email.placeholder')"
type="email"
v-model:value="formData.email"></a-input>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="12">
<a-col :span="24">
<a-form-item
:label="$t('pages.system.user.form.remark')"
name="remark">
<a-textarea
:placeholder="$t('pages.system.user.form.remark.placeholder')"
v-model:value="formData.remark"></a-textarea>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="12">
<a-col :span="24">
<a-form-item
:label="$t('pages.system.user.form.status')"
name="status">
<a-radio-group
v-model:value="formData.status"
:options="[
{ label: $t('pages.system.user.form.status.activated'), value: 'activated' },
{ label: $t('pages.system.user.form.status.freezed'), value: 'freezed' },
]"></a-radio-group> ]"></a-radio-group>
</a-form-item> </a-form-item>
</a-col> </a-col>
</a-row> </a-row>
</a-card> </a-card>
</a-form> </a-form>
</a-spin>
</a-modal> </a-modal>
</template> </template>
<script setup> <script setup>
import { cloneDeep } from 'lodash-es' import { ref, onBeforeMount } from 'vue'
import { ref } from 'vue'
import { config } from '@/config' import { config } from '@/config'
import apis from '@/apis' import apis from '@/apis'
import { useForm, useModal } from '@/hooks' import { useForm, useModal, useSpining } from '@/hooks'
import { message } from 'ant-design-vue' import { message } from 'ant-design-vue'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
const emit = defineEmits(['ok']) const emit = defineEmits(['ok'])
const { t } = useI18n() // t const { t } = useI18n() // t
const { modal, showModal, hideModal, showLoading, hideLoading } = useModal() const { modal, showModal, hideModal, showLoading, hideLoading } = useModal()
const { formRecord, formData, formRef, formRules, resetForm } = useForm() const { formRecord, formData, formRef, formRules, resetForm } = useForm()
const { spining, showSpining, hideSpining } = useSpining()
const cancelText = ref(t('button.cancel')) const cancelText = ref(t('button.cancel'))
const okText = ref(t('button.confirm')) const okText = ref(t('button.confirm'))
const rolesValue = ref([])
const roles = ref([])
formRules.value = { formRules.value = {
name: { required: true, message: t('pages.system.user.form.username.placeholder') }, name: { required: true, message: '请输入区域名称' },
username: { required: true, message: t('pages.system.user.form.code.placeholder') }, lon: { required: true, message: '请输入经度' },
status: { required: true, message: t('pages.system.user.form.status') }, lat: { required: true, message: '请输入纬度' },
roles: [{ required: true, message: t('pages.system.user.form.roles.placeholder'), trigger: 'change' }], status: [{ required: true, message: '请选择状态', trigger: 'change' }],
}
/**
* 请求角色
*/
getRole()
/**
* select 选择框
*/
const handleChange = (value) => {
rolesValue.value = value
} }
/** /**
@ -157,117 +62,73 @@ const handleChange = (value) => {
function handleCreate() { function handleCreate() {
showModal({ showModal({
type: 'create', type: 'create',
title: t('pages.system.user.add'), title: '新增区域',
}) })
// initData()
formData.value.status = 'enabled'
} }
async function getRole() {
const { success, data } = await apis.role.getRoleList().catch(() => {
throw new Error()
})
if (!success) {
return message.error('当前角色信息错误')
}
let roleArr = []
if (data.length) {
data.forEach((item) => {
roleArr.push({
label: item.name,
value: item.id,
})
})
}
roles.value = roleArr
}
/** /**
* 编辑 * 编辑
*/ */
async function handleEdit(record = {}) { async function handleEdit(record = {}) {
showModal({ showModal({
type: 'edit', type: 'edit',
title: t('pages.system.user.edit'), title:'编辑区域',
}) })
const { data, success } = await apis.users.getUsers(record.id).catch() try {
if (!success) { showSpining()
hideModal() const { data, success } = await apis.area.getItem(record.id).catch()
return if (!success) {
} hideModal()
let roles = [] return
if (data.roles) { }
roles = formatArr(data.roles, 'edit') hideSpining()
formData.value = { ...data }
} catch (error) {
message.error({ content: error.message })
hideSpining()
} }
data.roles = roles
formRecord.value = data
formData.value = cloneDeep(data)
} }
/** /**
* 确定 * 确定
*/ */
function handleOk() { function handleOk() {
formRef.value formRef.value.validateFields().then(async (values) => {
.validateFields() try {
.then(async (values) => { showLoading()
try { const params = {
showLoading() ...values
const params = {
...values,
roles: formatArr(rolesValue.value),
}
let result = null
switch (modal.value.type) {
case 'create':
result = await apis.users.createUsers(params).catch(() => {
throw new Error()
})
break
case 'edit':
result = await apis.users.updateUsers(formData.value.id, params).catch(() => {
throw new Error()
})
break
}
hideLoading()
if (config('http.code.success') === result?.success) {
hideModal()
emit('ok')
}
} catch (error) {
hideLoading()
} }
}) let result = null
.catch(() => { switch (modal.value.type) {
case 'create':
result = await apis.area.createProject(params).catch((error) => {
throw new Error(error)
})
break
case 'edit':
result = await apis.area.updateItem(formData.value.id, params).catch(() => {
throw new Error(error)
})
break
}
hideLoading()
if (config('http.code.success') === result?.success) {
hideModal()
emit('ok')
}
} catch (error) {
message.error({ content: error.message })
hideLoading()
}
})
.catch((e) => {
hideLoading() hideLoading()
}) })
} }
/**
* 对权限组 过数据格式
*/
function formatArr(data, type = '') {
const rolesArr = []
data.forEach((item) => {
roles.value.forEach((r) => {
if (type === 'edit') {
if (item.role_id === r.value) {
rolesArr.push({
value: item.role_id,
label: r.label,
})
return
}
} else if (r.value === item) {
rolesArr.push({
role_id: item,
role_name: r.label,
})
return
}
})
})
return rolesArr
}
/** /**
* 取消 * 取消

View File

@ -1,44 +1,27 @@
<template> <template>
<x-search-bar class="mb-8-2"> <!-- <x-search-bar class="mb-8-2">
<template #default="{ gutter, colSpan }"> <template #default="{ gutter, colSpan }">
<a-form <a-form :model="searchFormData" layout="inline">
:label-col="{ style: { width: '100px' } }"
:model="searchFormData"
layout="inline">
<a-row :gutter="gutter"> <a-row :gutter="gutter">
<a-col v-bind="colSpan"> <a-col v-bind="colSpan">
<a-form-item <a-form-item label="岗位名称" name="name">
:label="$t('pages.system.role.form.name')" <a-input placeholder="请输入岗位名称" v-model:value="searchFormData.name"></a-input>
name="name">
<a-input
:placeholder="$t('pages.system.role.form.code.placeholder')"
v-model:value="searchFormData.name"></a-input>
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col v-bind="colSpan"> <a-col v-bind="colSpan">
<a-form-item name="code"> <a-form-item label="状态" name="status">
<template #label> <a-select v-model:value="searchFormData.status" allowClear>
{{ $t('pages.system.role.form.code') }} <a-select-option value="">全部</a-select-option>
<a-tooltip :title="$t('pages.system.role.form.code')"> <a-select-option value="enabled">启用</a-select-option>
<question-circle-outlined class="ml-4-1 color-placeholder" /> <a-select-option value="disabled">停用</a-select-option>
</a-tooltip> </a-select>
</template>
<a-input
:placeholder="$t('pages.system.role.form.code.placeholder')"
v-model:value="searchFormData.code"></a-input>
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col class="align-right" v-bind="colSpan">
<a-col
class="align-right"
v-bind="colSpan">
<a-space> <a-space>
<a-button @click="handleResetSearch">{{ $t('button.reset') }}</a-button> <a-button @click="handleResetSearch">{{ $t('button.reset') }}</a-button>
<a-button <a-button ghost type="primary" @click="handleSearch">
ghost
type="primary"
@click="handleSearch">
{{ $t('button.search') }} {{ $t('button.search') }}
</a-button> </a-button>
</a-space> </a-space>
@ -46,63 +29,38 @@
</a-row> </a-row>
</a-form> </a-form>
</template> </template>
</x-search-bar> </x-search-bar> -->
<a-row <a-row :gutter="8" :wrap="false">
:gutter="8"
:wrap="false">
<a-col flex="auto"> <a-col flex="auto">
<a-card type="flex"> <a-card type="flex">
<x-action-bar class="mb-8-2"> <x-action-bar class="mb-8-2">
<a-button <a-button type="primary" @click="$refs.editDialogRef.handleCreate()">
v-action="'add'"
type="primary"
@click="$refs.editDialogRef.handleCreate()">
<template #icon> <template #icon>
<plus-outlined></plus-outlined> <plus-outlined></plus-outlined>
</template> </template>
{{ $t('pages.system.role.add') }} 新增项目
</a-button> </a-button>
</x-action-bar> </x-action-bar>
<a-table <a-table :columns="columns" :data-source="listData" bordered="true" :loading="loading"
:columns="columns" :pagination="paginationState" :scroll="{ x: 1000 }" @change="onTableChange">
:data-source="listData"
:loading="loading"
:pagination="paginationState"
:scroll="{ x: 1000 }"
@change="onTableChange">
<template #bodyCell="{ column, record }"> <template #bodyCell="{ column, record }">
<template v-if="'statusType' === column.key">
<!--状态-->
<a-tag
v-if="statusTypeEnum.is('enabled', record.status)"
color="processing">
{{ statusTypeEnum.getDesc(record.status) }}
</a-tag>
<!--状态-->
<a-tag
v-if="statusTypeEnum.is('disabled', record.status)"
color="processing">
{{ statusTypeEnum.getDesc(record.status) }}
</a-tag>
</template>
<template v-if="'createAt' === column.key"> <template v-if="column.dataIndex === 'img'">
{{ formatUtcDateTime(record.created_at) }} <a-image :width="60" :src="config('http.apiBasic')+record.img || $imageErr.imgErr" />
</template>
<template v-if="'status' === column.dataIndex">
<a-tag v-if="record.status === 'enabled'" :color="'green'">启用</a-tag>
<a-tag v-if="record.status === 'disabled'" :color="'red'">停用</a-tag>
</template> </template>
<template v-if="'action' === column.key"> <template v-if="'action' === column.key">
<x-action-button @click="$refs.editDialogRef.handleEdit(record)"> <x-action-button @click="$refs.editDialogRef.handleEdit(record)">
<a-tooltip> <a-tooltip>
<template #title> {{ $t('pages.system.role.edit') }}</template> <template #title> {{ $t('pages.system.user.edit') }}</template>
<edit-outlined /> <edit-outlined /> </a-tooltip></x-action-button>
</a-tooltip> <x-action-button @click="handleDelete(record)">
</x-action-button>
<x-action-button @click="handleRemove(record)">
<a-tooltip> <a-tooltip>
<template #title> {{ $t('pages.system.delete') }}</template> <template #title>{{ $t('pages.system.delete') }}</template>
<delete-outlined style="color: #ff4d4f" /> <delete-outlined style="color: #ff4d4f" /> </a-tooltip></x-action-button>
</a-tooltip>
</x-action-button>
</template> </template>
</template> </template>
</a-table> </a-table>
@ -110,53 +68,42 @@
</a-col> </a-col>
</a-row> </a-row>
<edit-dialog <edit-dialog ref="editDialogRef" @ok="onOk"></edit-dialog>
ref="editDialogRef"
@ok="onOk"></edit-dialog>
</template> </template>
<script setup> <script setup>
import { message, Modal } from 'ant-design-vue' import { message, Modal } from 'ant-design-vue'
import { ref } from 'vue' import { ref } from 'vue'
import apis from '@/apis' import apis from '@/apis'
import { formatUtcDateTime } from '@/utils/util'
import { config } from '@/config' import { config } from '@/config'
import { statusTypeEnum } from '@/enums/system' import { usePagination } from '@/hooks'
import { usePagination, useForm } from '@/hooks'
import EditDialog from './components/EditDialog.vue' import EditDialog from './components/EditDialog.vue'
import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons-vue' import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons-vue'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
defineOptions({ defineOptions({
name: 'systemRole', name: 'regionalList',
}) })
const { t } = useI18n() // t const { t } = useI18n() // t
const columns = [ const columns = [
{ title: t('pages.system.role.form.code'), dataIndex: 'code', width: 240 }, { title: '区域名称', dataIndex: 'name'},
{ title: t('pages.system.role.form.name'), dataIndex: 'name' }, { title: '经度', dataIndex: 'lon',width:100,align:'center'},
{ title: t('pages.system.role.form.status'), dataIndex: 'status', key: 'statusType', width: 80 }, { title: '纬度', dataIndex: 'lat',width:100,align:'center'},
{ title: t('pages.system.role.form.sequence'), dataIndex: 'sequence', width: 100 }, { title: '状态', dataIndex: 'status', key: 'introduce', width: 100,align:'center' },
{ title: t('pages.system.role.form.created_at'), key: 'createAt', fixed: 'right', width: 120 }, { title: t('button.action'), key: 'action', fixed: 'right', width: 100, align: 'center' },
{ title: t('button.action'), key: 'action', fixed: 'right', width: 120 },
] ]
const { listData, loading, showLoading, hideLoading, paginationState, resetPagination, searchFormData } = usePagination()
const { listData, loading, showLoading, hideLoading, paginationState, searchFormData, resetPagination } =
usePagination()
const { resetForm } = useForm()
const editDialogRef = ref() const editDialogRef = ref()
getPageList() getPageList()
/** /**
* 获取用户列 * 获取格数据
* @returns {Promise<void>} * @returns {Promise<void>}
*/ */
async function getPageList() { async function getPageList() {
try { try {
showLoading() showLoading()
const { pageSize, current } = paginationState const { pageSize, current } = paginationState
const { success, data, total } = await apis.role const { success, data, total } = await apis.area
.getRoleList({ .getProjectList({
pageSize, pageSize,
page: current, page: current,
...searchFormData.value, ...searchFormData.value,
@ -175,18 +122,18 @@ async function getPageList() {
} }
/** /**
* *
*/ */
function handleRemove({ id }) { function handleDelete({ id }) {
Modal.confirm({ Modal.confirm({
title: t('pages.system.role.delTip'), title: t('pages.system.user.delTip'),
content: t('button.confirm'), content: t('button.confirm'),
okText: t('button.confirm'), okText: t('button.confirm'),
onOk: () => { onOk: () => {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
;(async () => { ; (async () => {
try { try {
const { success } = await apis.role.delRole(id).catch(() => { const { success } = await apis.area.delItem(id).catch(() => {
throw new Error() throw new Error()
}) })
if (config('http.code.success') === success) { if (config('http.code.success') === success) {
@ -212,6 +159,13 @@ function onTableChange({ current, pageSize }) {
getPageList() getPageList()
} }
/**
* 搜索
*/
function handleSearch() {
resetPagination()
getPageList()
}
/** /**
* 重置 * 重置
*/ */
@ -220,20 +174,11 @@ function handleResetSearch() {
resetPagination() resetPagination()
getPageList() getPageList()
} }
/**
* 搜索
*/
function handleSearch() {
resetForm()
resetPagination()
getPageList()
}
/** /**
* 编辑完成 * 编辑完成
*/ */
async function onOk() { async function onOk() {
message.success(t('component.message.success.delete'))
await getPageList() await getPageList()
} }
</script> </script>

View File

@ -1,169 +0,0 @@
<template>
<a-card
:body-style="{ height: 'calc(100% - 56px - 47px)', padding: 0 }"
:style="{
position: 'sticky',
top: appStore.mainOffsetTop,
height: appStore.mainHeight,
}">
<template #title>
<a-input-search placeholder="搜索部门"></a-input-search>
</template>
<x-scrollbar class="pa-8-2">
<a-spin :spinning="loading">
<a-tree
block-node
:selected-keys="selectedKeys"
:tree-data="listData"
:field-names="{ key: 'id', children: 'children' }"
@select="onSelect">
<template #title="{ title }">
<span class="ant-tree-title__name">{{ title }}</span>
<span class="ant-tree-title__actions">
<a-dropdown
:trigger="['click']"
@click.stop>
<x-action-button>
<more-outlined></more-outlined>
</x-action-button>
<template #overlay>
<a-menu>
<a-menu-item @click="$refs.editDepartmentDialogRef.handleEdit()">
添加子部门
</a-menu-item>
<a-menu-item @click="$refs.editDepartmentDialogRef.handleEdit()">
编辑
</a-menu-item>
<a-menu-item @click="handleDelete">删除</a-menu-item>
</a-menu>
</template>
</a-dropdown>
</span>
</template>
</a-tree>
<empty
v-if="!listData.length"
:image="Empty.PRESENTED_IMAGE_SIMPLE"></empty>
</a-spin>
</x-scrollbar>
<template #actions>
<span @click="$refs.editDepartmentDialogRef.handleCreate()">
<plus-outlined></plus-outlined>
新建部门
</span>
</template>
</a-card>
<edit-department-dialog
ref="editDepartmentDialogRef"
@ok="onOk"></edit-department-dialog>
</template>
<script setup>
import { useAppStore } from '@/store'
import { ref, watch } from 'vue'
import { usePagination } from '@/hooks'
import apis from '@/apis'
import { Empty, Modal, message } from 'ant-design-vue'
import { config } from '@/config'
import { head, get, find } from 'lodash-es'
import { MoreOutlined, PlusOutlined } from '@ant-design/icons-vue'
import EditDepartmentDialog from './EditDepartmentDialog.vue'
const props = defineProps({
value: {
type: String,
default: '',
},
})
const emit = defineEmits(['change', 'update:value'])
const appStore = useAppStore()
const { listData, loading, showLoading, hideLoading } = usePagination()
const editDepartmentDialogRef = ref()
const selectedKeys = ref([props.value])
watch(
() => props.value,
(val) => {
if (val === selectedKeys.value?.[0]) return
selectedKeys.value = [val]
}
)
getList()
/**
* 获取列表
* @returns {Promise<void>}
*/
async function getList() {
try {
showLoading()
const { code, data } = await apis.common.getPageList().catch(() => {
throw new Error()
})
hideLoading()
if (config('http.code.success') === code) {
const { records } = data
listData.value = records
if (listData.value.length) {
selectedKeys.value = [get(head(listData.value), 'id')]
trigger()
}
}
} catch (error) {
hideLoading()
}
}
/**
* 删除
*/
function handleDelete({ id }) {
Modal.confirm({
title: '删除提示',
content: '确认删除?',
okText: '确认',
onOk: () => {
return new Promise((resolve, reject) => {
;(async () => {
try {
const { code } = await apis.common.del(id).catch(() => {
throw new Error()
})
if (config('http.code.success') === code) {
resolve()
message.success('删除成功')
await getList()
}
} catch (error) {
reject()
}
})()
})
},
})
}
function onSelect(keys) {
if (!keys.length) return
selectedKeys.value = keys
trigger()
}
async function onOk() {
await getList()
}
function trigger() {
const value = head(selectedKeys.value)
const record = find(listData.value, { id: value })
emit('update:value', value)
emit('change', record)
}
</script>
<style lang="less" scoped></style>

View File

@ -1,131 +0,0 @@
<template>
<a-modal
:open="modal.open"
:title="modal.title"
:width="480"
:confirm-loading="modal.confirmLoading"
:after-close="onAfterClose"
:cancel-text="cancelText"
@ok="handleOk"
@cancel="handleCancel">
<a-form
ref="formRef"
:model="formData"
:rules="formRules"
:label-col="{ style: { width: '90px' } }">
<a-form-item
label="部门名称"
name="name">
<a-input v-model:value="formData.name"></a-input>
</a-form-item>
<a-form-item
label="上级部门"
name="parent_id">
<a-tree-select v-model:value="formData.parent_id"></a-tree-select>
</a-form-item>
<a-form-item
label="部门负责人"
name="name">
<a-input v-model:value="formData.name"></a-input>
</a-form-item>
</a-form>
</a-modal>
</template>
<script setup>
import { cloneDeep } from 'lodash-es'
import { ref } from 'vue'
import { config } from '@/config'
import apis from '@/apis'
import { useForm, useModal } from '@/hooks'
const emit = defineEmits(['ok'])
const { modal, showModal, hideModal, showLoading, hideLoading } = useModal()
const { formRecord, formData, formRef, formRules, resetForm } = useForm()
const cancelText = ref('取消')
/**
* 新建
*/
function handleCreate() {
showModal({
type: 'create',
title: '新建部门',
})
}
/**
* 编辑
*/
function handleEdit(record = {}) {
showModal({
type: 'edit',
title: '编辑部门',
})
formRecord.value = record
formData.value = cloneDeep(record)
}
/**
* 确定
*/
function handleOk() {
formRef.value
.validateFields()
.then(async (values) => {
try {
showLoading()
const params = {
...values,
}
let result = null
switch (modal.value.type) {
case 'create':
result = await apis.common.create(params).catch(() => {
throw new Error()
})
break
case 'edit':
result = await apis.common.update(params).catch(() => {
throw new Error()
})
break
}
hideLoading()
if (config('http.code.success') === result?.code) {
hideModal()
emit('ok')
}
} catch (error) {
hideLoading()
}
})
.catch(() => {
hideLoading()
})
}
/**
* 取消
*/
function handleCancel() {
hideModal()
}
/**
* 关闭后
*/
function onAfterClose() {
resetForm()
cancelText.value = '取消'
hideLoading()
}
defineExpose({
handleCreate,
handleEdit,
})
</script>
<style lang="less" scoped></style>

View File

@ -1,155 +1,111 @@
<template> <template>
<a-modal <a-modal :open="modal.open" :title="modal.title" :width="640" :confirm-loading="modal.confirmLoading"
:open="modal.open" :after-close="onAfterClose" :cancel-text="cancelText" :ok-text="okText" @ok="handleOk" @cancel="handleCancel">
:title="modal.title" <a-spin :spinning="spining">
:width="640" <a-form ref="formRef" :model="formData" :rules="formRules">
:confirm-loading="modal.confirmLoading" <a-card class="mb-8-2">
:after-close="onAfterClose" <a-row :gutter="12">
:cancel-text="cancelText" <a-col :span="12">
:ok-text="okText" <a-form-item :label="'客户名称'" name="name">
@ok="handleOk" <a-input :placeholder="'请输入客户名称'" v-model:value="formData.name"></a-input>
@cancel="handleCancel"> </a-form-item>
<a-form </a-col>
ref="formRef" <a-col :span="12">
:model="formData" <a-form-item :label="'联系电话'" name="phone">
:rules="formRules" <a-input :placeholder="'请输入联系电话'" v-model:value="formData.phone"></a-input>
:label-col="{ style: { width: '90px' } }"> </a-form-item>
<a-card class="mb-8-2"> </a-col>
<a-row :gutter="12"> <a-col :span="12">
<a-col :span="12"> <a-form-item :label="'出生日期'" name="birthday">
<a-form-item <a-date-picker v-model:value="formData.birthday" style="width: 100%;" />
:label="$t('pages.system.user.form.username')" </a-form-item>
name="username"> </a-col>
<a-input <a-col :span="12">
:placeholder="$t('pages.system.user.form.username.placeholder')" <a-form-item :label="'所属区域'" name="areaId">
v-model:value="formData.username"></a-input> <a-select ref="select" v-model:value="formData.areaId">
</a-form-item> <a-select-option v-for="item in areaEnum.getAll()" :value="item.value">{{
</a-col> item.name }}</a-select-option>
<a-col :span="12"> </a-select>
<a-form-item </a-form-item>
:label="$t('pages.system.user.form.password')" </a-col>
name="password"> <a-col :span="12">
<a-input-password <a-form-item :label="'客户等级'" name="grade">
v-model:value="formData.password" <a-select ref="select" v-model:value="formData.grade">
:placeholder="$t('pages.system.user.form.password.placeholder')" /> <a-select-option v-for="item in 8" :value="item">{{ item + '' }}</a-select-option>
</a-form-item> </a-select>
</a-col> </a-form-item>
</a-row> </a-col>
<a-row :gutter="12"> <a-col :span="12">
<a-col :span="12"> <a-form-item :label="'当前积分'" name="currentbalance">
<a-form-item <a-input-number :placeholder="'请输入当前积分'" v-model:value="formData.currentbalance"
:label="$t('pages.system.user.form.name')" style="width: 100%;"></a-input-number>
name="name"> </a-form-item>
<a-input </a-col>
:placeholder="$t('pages.system.user.form.name.placeholder')" <a-col :span="12">
v-model:value="formData.name"></a-input> <a-form-item :label="'历史积分'" name="balance">
</a-form-item> <a-input-number :placeholder="'请输入历史积分'" v-model:value="formData.balance"
</a-col> style="width: 100%;"></a-input-number>
<a-col :span="12"> </a-form-item>
<a-form-item </a-col>
:label="$t('pages.system.user.form.roles')"
name="roles">
<a-select
v-model:value="formData.roles"
mode="multiple"
style="width: 100%"
:placeholder="$t('pages.system.user.form.roles.placeholder')"
:options="roles"
@change="handleChange"></a-select>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="12"> <a-col :span="12">
<a-col :span="12"> <a-form-item :label="'客户类型'" name="type">
<a-form-item <a-select ref="select" v-model:value="formData.type">
:label="$t('pages.system.user.form.phone')" <a-select-option v-for="item in customersEnum.getAll()" :value="item.value">{{
type="tel" item.name }}</a-select-option>
name="phone"> </a-select>
<a-input </a-form-item>
:placeholder="$t('pages.system.user.form.phone.placeholder')" </a-col>
type="tel" <a-col :span="12">
v-model:value="formData.phone"></a-input> <a-form-item :label="'状态'" name="status">
</a-form-item> <a-radio-group v-model:value="formData.status" :options="[
</a-col> { label: '启用', value: 'enabled' },
<a-col :span="12"> { label: '停用', value: 'disabled' },
<a-form-item
:label="$t('pages.system.user.form.email')"
type="email"
name="email">
<a-input
:placeholder="$t('pages.system.user.form.email.placeholder')"
type="email"
v-model:value="formData.email"></a-input>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="12">
<a-col :span="24">
<a-form-item
:label="$t('pages.system.user.form.remark')"
name="remark">
<a-textarea
:placeholder="$t('pages.system.user.form.remark.placeholder')"
v-model:value="formData.remark"></a-textarea>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="12">
<a-col :span="24">
<a-form-item
:label="$t('pages.system.user.form.status')"
name="status">
<a-radio-group
v-model:value="formData.status"
:options="[
{ label: $t('pages.system.user.form.status.activated'), value: 'activated' },
{ label: $t('pages.system.user.form.status.freezed'), value: 'freezed' },
]"></a-radio-group> ]"></a-radio-group>
</a-form-item> </a-form-item>
</a-col> </a-col>
</a-row> <a-col :span="24">
</a-card> <a-form-item :label="'头像'" name="fileList">
</a-form> <gx-upload v-model="formData.fileList" accept-types=".jpg,.png,.webp" :fileNumber="1"
@uploadSuccess="uploadSuccess" />
</a-form-item>
</a-col>
</a-row>
</a-card>
</a-form>
</a-spin>
</a-modal> </a-modal>
</template> </template>
<script setup> <script setup>
import { cloneDeep } from 'lodash-es' import { cloneDeep } from 'lodash-es'
import { ref } from 'vue' import { ref, onBeforeMount } from 'vue'
import { config } from '@/config' import { config } from '@/config'
import apis from '@/apis' import apis from '@/apis'
import { useForm, useModal } from '@/hooks' import { useForm, useModal, useSpining } from '@/hooks'
import { message } from 'ant-design-vue' import { message } from 'ant-design-vue'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import dayjs from 'dayjs'
import GxUpload from '@/components/GxUpload/index.vue'
import { customersEnum, areaEnum } from "@/enums/useEnum"
const emit = defineEmits(['ok']) const emit = defineEmits(['ok'])
const { t } = useI18n() // t const { t } = useI18n() // t
const { modal, showModal, hideModal, showLoading, hideLoading } = useModal() const { modal, showModal, hideModal, showLoading, hideLoading } = useModal()
const { formRecord, formData, formRef, formRules, resetForm } = useForm() const { formRecord, formData, formRef, formRules, resetForm } = useForm()
const { spining, showSpining, hideSpining } = useSpining()
const cancelText = ref(t('button.cancel')) const cancelText = ref(t('button.cancel'))
const okText = ref(t('button.confirm')) const okText = ref(t('button.confirm'))
const rolesValue = ref([]) const fileList = ref([])
const roles = ref([])
formRules.value = { formRules.value = {
name: { required: true, message: t('pages.system.user.form.username.placeholder') }, name: [{ required: true, message: '请输入客户名称' }],
username: { required: true, message: t('pages.system.user.form.code.placeholder') }, status: [{ required: true, message: '请选择状态', trigger: 'change' }],
status: { required: true, message: t('pages.system.user.form.status') }, areaId: [{ required: true, message: '请选择所属区域', trigger: 'change' }],
roles: [{ required: true, message: t('pages.system.user.form.roles.placeholder'), trigger: 'change' }], type: [{ required: true, message: '请选择客户类型', trigger: 'change' }]
} }
/** onBeforeMount(() => {
* 请求角色 formData.value.areaId = 1
*/ })
getRole()
/**
* select 选择框
*/
const handleChange = (value) => {
rolesValue.value = value
}
/** /**
* 新建 * 新建
@ -157,122 +113,87 @@ const handleChange = (value) => {
function handleCreate() { function handleCreate() {
showModal({ showModal({
type: 'create', type: 'create',
title: t('pages.system.user.add'), title: '新增客户',
}) })
// initData()
formData.value.status = 'enabled'
} }
async function getRole() {
const { success, data } = await apis.role.getRoleList().catch(() => {
throw new Error()
})
if (!success) {
return message.error('当前角色信息错误')
}
let roleArr = []
if (data.length) {
data.forEach((item) => {
roleArr.push({
label: item.name,
value: item.id,
})
})
}
roles.value = roleArr
}
/** /**
* 编辑 * 编辑
*/ */
async function handleEdit(record = {}) { async function handleEdit(record = {}) {
showModal({ showModal({
type: 'edit', type: 'edit',
title: t('pages.system.user.edit'), title: '编辑客户',
}) })
const { data, success } = await apis.users.getUsers(record.id).catch() try {
if (!success) { showSpining()
hideModal() const { data, success } = await apis.customer.getItem(record.id).catch()
return if (!success) {
} hideModal()
let roles = [] return
if (data.roles) { }
roles = formatArr(data.roles, 'edit') hideSpining()
formData.value = { ...data }
formData.value.birthday = dayjs(data.birthday)
if (data.avatar) {
formData.value.fileList = [config('http.apiBasic') + data.avatar]
}
} catch (error) {
message.error({ content: error.message })
hideSpining()
} }
data.roles = roles
formRecord.value = data
formData.value = cloneDeep(data)
} }
const uploadSuccess = (data) => {
fileList.value.push(data)
}
/** /**
* 确定 * 确定
*/ */
function handleOk() { function handleOk() {
formRef.value formRef.value.validateFields().then(async (values) => {
.validateFields() try {
.then(async (values) => { showLoading()
try { const params = {
showLoading() ...values,
avatar: fileList.value[0]
const params = {
...values,
roles: formatArr(rolesValue.value),
}
let result = null
switch (modal.value.type) {
case 'create':
result = await apis.users.createUsers(params).catch(() => {
throw new Error()
})
break
case 'edit':
result = await apis.users.updateUsers(formData.value.id, params).catch(() => {
throw new Error()
})
break
}
hideLoading()
if (config('http.code.success') === result?.success) {
hideModal()
emit('ok')
}
} catch (error) {
hideLoading()
} }
}) let result = null
.catch(() => { switch (modal.value.type) {
case 'create':
result = await apis.customer.createProject(params).catch((error) => {
throw new Error(error)
})
break
case 'edit':
result = await apis.customer.updateItem(formData.value.id, params).catch(() => {
throw new Error(error)
})
break
}
hideLoading()
if (config('http.code.success') === result?.success) {
hideModal()
emit('ok')
}
} catch (error) {
message.error({ content: error.message })
hideLoading()
}
})
.catch((e) => {
hideLoading() hideLoading()
}) })
} }
/**
* 对权限组 过数据格式
*/
function formatArr(data, type = '') {
const rolesArr = []
data.forEach((item) => {
roles.value.forEach((r) => {
if (type === 'edit') {
if (item.role_id === r.value) {
rolesArr.push({
value: item.role_id,
label: r.label,
})
return
}
} else if (r.value === item) {
rolesArr.push({
role_id: item,
role_name: r.label,
})
return
}
})
})
return rolesArr
}
/** /**
* 取消 * 取消
*/ */
function handleCancel() { function handleCancel() {
formData.value.areaId = 1
hideModal() hideModal()
} }

View File

@ -1,44 +1,27 @@
<template> <template>
<x-search-bar class="mb-8-2"> <x-search-bar class="mb-8-2">
<template #default="{ gutter, colSpan }"> <template #default="{ gutter, colSpan }">
<a-form <a-form :model="searchFormData" layout="inline">
:label-col="{ style: { width: '100px' } }"
:model="searchFormData"
layout="inline">
<a-row :gutter="gutter"> <a-row :gutter="gutter">
<a-col v-bind="colSpan"> <a-col v-bind="colSpan">
<a-form-item <a-form-item label="姓名" name="name">
:label="$t('pages.system.role.form.name')" <a-input placeholder="请输入姓名" v-model:value="searchFormData.name"></a-input>
name="name">
<a-input
:placeholder="$t('pages.system.role.form.code.placeholder')"
v-model:value="searchFormData.name"></a-input>
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col v-bind="colSpan"> <a-col v-bind="colSpan">
<a-form-item name="code"> <a-form-item label="状态" name="status">
<template #label> <a-select v-model:value="searchFormData.status" allowClear>
{{ $t('pages.system.role.form.code') }} <a-select-option value="">全部</a-select-option>
<a-tooltip :title="$t('pages.system.role.form.code')"> <a-select-option value="enabled">启用</a-select-option>
<question-circle-outlined class="ml-4-1 color-placeholder" /> <a-select-option value="disabled">停用</a-select-option>
</a-tooltip> </a-select>
</template>
<a-input
:placeholder="$t('pages.system.role.form.code.placeholder')"
v-model:value="searchFormData.code"></a-input>
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col class="align-right" v-bind="colSpan">
<a-col
class="align-right"
v-bind="colSpan">
<a-space> <a-space>
<a-button @click="handleResetSearch">{{ $t('button.reset') }}</a-button> <a-button @click="handleResetSearch">{{ $t('button.reset') }}</a-button>
<a-button <a-button ghost type="primary" @click="handleSearch">
ghost
type="primary"
@click="handleSearch">
{{ $t('button.search') }} {{ $t('button.search') }}
</a-button> </a-button>
</a-space> </a-space>
@ -46,63 +29,47 @@
</a-row> </a-row>
</a-form> </a-form>
</template> </template>
</x-search-bar> </x-search-bar>
<a-row <a-row :gutter="8" :wrap="false">
:gutter="8"
:wrap="false">
<a-col flex="auto"> <a-col flex="auto">
<a-card type="flex"> <a-card type="flex">
<x-action-bar class="mb-8-2"> <x-action-bar class="mb-8-2">
<a-button <a-button type="primary" @click="$refs.editDialogRef.handleCreate()">
v-action="'add'"
type="primary"
@click="$refs.editDialogRef.handleCreate()">
<template #icon> <template #icon>
<plus-outlined></plus-outlined> <plus-outlined></plus-outlined>
</template> </template>
{{ $t('pages.system.role.add') }} 新增客户
</a-button> </a-button>
</x-action-bar> </x-action-bar>
<a-table <a-table :columns="columns" :data-source="listData" bordered="true" :loading="loading"
:columns="columns" :pagination="paginationState" :scroll="{ x: 1000 }" @change="onTableChange">
:data-source="listData"
:loading="loading"
:pagination="paginationState"
:scroll="{ x: 1000 }"
@change="onTableChange">
<template #bodyCell="{ column, record }"> <template #bodyCell="{ column, record }">
<template v-if="'statusType' === column.key">
<!--状态-->
<a-tag
v-if="statusTypeEnum.is('enabled', record.status)"
color="processing">
{{ statusTypeEnum.getDesc(record.status) }}
</a-tag>
<!--状态-->
<a-tag
v-if="statusTypeEnum.is('disabled', record.status)"
color="processing">
{{ statusTypeEnum.getDesc(record.status) }}
</a-tag>
</template>
<template v-if="'createAt' === column.key"> <template v-if="column.dataIndex === 'avatar'">
{{ formatUtcDateTime(record.created_at) }} <a-image :width="60" :src="config('http.apiBasic') + record.avatar || $imageErr.imgErr" />
</template>
<template v-if="column.dataIndex === 'type'">
<span>{{ customersEnum.getName(record.type) }}</span>
</template>
<template v-if="column.dataIndex === 'grade'">
<span>{{ record.grade+'级' }}</span>
</template>
<template v-if="column.dataIndex === 'birthday'">
<span>{{ record.birthday&&dayjs(record.birthday).format('YYYY-MM-DD') }}</span>
</template>
<template v-if="'status' === column.dataIndex">
<a-tag v-if="record.status === 'enabled'" :color="'green'">启用</a-tag>
<a-tag v-if="record.status === 'disabled'" :color="'red'">停用</a-tag>
</template> </template>
<template v-if="'action' === column.key"> <template v-if="'action' === column.key">
<x-action-button @click="$refs.editDialogRef.handleEdit(record)"> <x-action-button @click="$refs.editDialogRef.handleEdit(record)">
<a-tooltip> <a-tooltip>
<template #title> {{ $t('pages.system.role.edit') }}</template> <template #title> {{ $t('pages.system.user.edit') }}</template>
<edit-outlined /> <edit-outlined /> </a-tooltip></x-action-button>
</a-tooltip> <x-action-button @click="handleDelete(record)">
</x-action-button>
<x-action-button @click="handleRemove(record)">
<a-tooltip> <a-tooltip>
<template #title> {{ $t('pages.system.delete') }}</template> <template #title>{{ $t('pages.system.delete') }}</template>
<delete-outlined style="color: #ff4d4f" /> <delete-outlined style="color: #ff4d4f" /> </a-tooltip></x-action-button>
</a-tooltip>
</x-action-button>
</template> </template>
</template> </template>
</a-table> </a-table>
@ -110,9 +77,7 @@
</a-col> </a-col>
</a-row> </a-row>
<edit-dialog <edit-dialog ref="editDialogRef" @ok="onOk"></edit-dialog>
ref="editDialogRef"
@ok="onOk"></edit-dialog>
</template> </template>
<script setup> <script setup>
@ -121,49 +86,46 @@ import { ref } from 'vue'
import apis from '@/apis' import apis from '@/apis'
import { formatUtcDateTime } from '@/utils/util' import { formatUtcDateTime } from '@/utils/util'
import { config } from '@/config' import { config } from '@/config'
import { statusTypeEnum } from '@/enums/system' import dayjs from 'dayjs'
import { usePagination, useForm } from '@/hooks' import { usePagination } from '@/hooks'
import { customersEnum, areaEnum } from "@/enums/useEnum"
import EditDialog from './components/EditDialog.vue' import EditDialog from './components/EditDialog.vue'
import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons-vue' import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons-vue'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
defineOptions({ defineOptions({
name: 'systemRole', name: 'allCustomerList',
}) })
const { t } = useI18n() // t const { t } = useI18n() // t
const columns = [ const columns = [
{ title: t('pages.system.userManagement.form.id'), dataIndex: 'id', width: 100 }, { title: '头像', dataIndex: 'avatar', width: 120, align: 'center' },
{ title: t('pages.system.userManagement.form.name'), dataIndex: 'name', width: 200 }, { title: '姓名', dataIndex: 'name', width: 120, align: 'center' },
{ title: t('pages.system.userManagement.form.phone'), dataIndex: 'phone', key: 'phone', width: 200 }, { title: '电话', dataIndex: 'phone', width: 120, align: 'center' },
{ title: t('pages.system.userManagement.form.areaName'), dataIndex: 'areaName', width: 100 }, { title: '出生日期', dataIndex: 'birthday', width: 120, align: 'center' },
{ title: t('pages.system.userManagement.form.avatar'), dataIndex: 'avatar', width: 120 }, { title: '当前积分', dataIndex: 'currentbalance', width: 120 },
{ title: t('pages.system.userManagement.form.type'), dataIndex: 'type', width: 120 }, { title: '累计积分', dataIndex: 'balance', width: 120 },
{ title: t('pages.system.userManagement.form.grade'), dataIndex: 'areaId', width: 120 }, { title: '等级', dataIndex: 'grade', width: 60, align: 'center' },
{ title: t('pages.system.userManagement.form.balance'), dataIndex: 'balance', width: 120 }, { title: '类型', dataIndex: 'type', width: 60, align: 'center' },
{ title: t('pages.system.userManagement.form.status'), dataIndex: 'status', width: 120 }, { title: '状态', dataIndex: 'status', key: 'introduce', width: 60, align: 'center' },
{ title: t('button.action'), key: 'action', fixed: 'right', width: 120 }, { title: t('button.action'), key: 'action', fixed: 'right', width: 100, align: 'center' },
] ]
const { listData, loading, showLoading, hideLoading, paginationState, searchFormData, resetPagination } = const { listData, loading, showLoading, hideLoading, paginationState, resetPagination, searchFormData } =
usePagination() usePagination()
const { resetForm } = useForm()
const editDialogRef = ref() const editDialogRef = ref()
getPageList() getPageList()
/** /**
* 获取用户列 * 获取格数据
* @returns {Promise<void>} * @returns {Promise<void>}
*/ */
async function getPageList() { async function getPageList() {
console.log('searchFormData.value', searchFormData.value)
try { try {
showLoading() showLoading()
const { pageSize, current } = paginationState const { pageSize, current } = paginationState
const { success, data, total } = await apis.userManagement const { success, data, total } = await apis.customer
.getcustomers({ .getProjectList({
pageSize, pageSize,
current: current, page: current,
...searchFormData.value, ...searchFormData.value,
}) })
.catch(() => { .catch(() => {
@ -180,18 +142,18 @@ async function getPageList() {
} }
/** /**
* *
*/ */
function handleRemove({ id }) { function handleDelete({ id }) {
Modal.confirm({ Modal.confirm({
title: t('pages.system.role.delTip'), title: t('pages.system.user.delTip'),
content: t('button.confirm'), content: t('button.confirm'),
okText: t('button.confirm'), okText: t('button.confirm'),
onOk: () => { onOk: () => {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
;(async () => { ; (async () => {
try { try {
const { success } = await apis.role.delRole(id).catch(() => { const { success } = await apis.customer.delItem(id).catch(() => {
throw new Error() throw new Error()
}) })
if (config('http.code.success') === success) { if (config('http.code.success') === success) {
@ -217,6 +179,13 @@ function onTableChange({ current, pageSize }) {
getPageList() getPageList()
} }
/**
* 搜索
*/
function handleSearch() {
resetPagination()
getPageList()
}
/** /**
* 重置 * 重置
*/ */
@ -225,16 +194,6 @@ function handleResetSearch() {
resetPagination() resetPagination()
getPageList() getPageList()
} }
/**
* 搜索
*/
function handleSearch() {
resetForm()
resetPagination()
getPageList()
}
/** /**
* 编辑完成 * 编辑完成
*/ */

View File

@ -1,169 +0,0 @@
<template>
<a-card
:body-style="{ height: 'calc(100% - 56px - 47px)', padding: 0 }"
:style="{
position: 'sticky',
top: appStore.mainOffsetTop,
height: appStore.mainHeight,
}">
<template #title>
<a-input-search placeholder="搜索部门"></a-input-search>
</template>
<x-scrollbar class="pa-8-2">
<a-spin :spinning="loading">
<a-tree
block-node
:selected-keys="selectedKeys"
:tree-data="listData"
:field-names="{ key: 'id', children: 'children' }"
@select="onSelect">
<template #title="{ title }">
<span class="ant-tree-title__name">{{ title }}</span>
<span class="ant-tree-title__actions">
<a-dropdown
:trigger="['click']"
@click.stop>
<x-action-button>
<more-outlined></more-outlined>
</x-action-button>
<template #overlay>
<a-menu>
<a-menu-item @click="$refs.editDepartmentDialogRef.handleEdit()">
添加子部门
</a-menu-item>
<a-menu-item @click="$refs.editDepartmentDialogRef.handleEdit()">
编辑
</a-menu-item>
<a-menu-item @click="handleDelete">删除</a-menu-item>
</a-menu>
</template>
</a-dropdown>
</span>
</template>
</a-tree>
<empty
v-if="!listData.length"
:image="Empty.PRESENTED_IMAGE_SIMPLE"></empty>
</a-spin>
</x-scrollbar>
<template #actions>
<span @click="$refs.editDepartmentDialogRef.handleCreate()">
<plus-outlined></plus-outlined>
新建部门
</span>
</template>
</a-card>
<edit-department-dialog
ref="editDepartmentDialogRef"
@ok="onOk"></edit-department-dialog>
</template>
<script setup>
import { useAppStore } from '@/store'
import { ref, watch } from 'vue'
import { usePagination } from '@/hooks'
import apis from '@/apis'
import { Empty, Modal, message } from 'ant-design-vue'
import { config } from '@/config'
import { head, get, find } from 'lodash-es'
import { MoreOutlined, PlusOutlined } from '@ant-design/icons-vue'
import EditDepartmentDialog from './EditDepartmentDialog.vue'
const props = defineProps({
value: {
type: String,
default: '',
},
})
const emit = defineEmits(['change', 'update:value'])
const appStore = useAppStore()
const { listData, loading, showLoading, hideLoading } = usePagination()
const editDepartmentDialogRef = ref()
const selectedKeys = ref([props.value])
watch(
() => props.value,
(val) => {
if (val === selectedKeys.value?.[0]) return
selectedKeys.value = [val]
}
)
getList()
/**
* 获取列表
* @returns {Promise<void>}
*/
async function getList() {
try {
showLoading()
const { code, data } = await apis.common.getPageList().catch(() => {
throw new Error()
})
hideLoading()
if (config('http.code.success') === code) {
const { records } = data
listData.value = records
if (listData.value.length) {
selectedKeys.value = [get(head(listData.value), 'id')]
trigger()
}
}
} catch (error) {
hideLoading()
}
}
/**
* 删除
*/
function handleDelete({ id }) {
Modal.confirm({
title: '删除提示',
content: '确认删除?',
okText: '确认',
onOk: () => {
return new Promise((resolve, reject) => {
;(async () => {
try {
const { code } = await apis.common.del(id).catch(() => {
throw new Error()
})
if (config('http.code.success') === code) {
resolve()
message.success('删除成功')
await getList()
}
} catch (error) {
reject()
}
})()
})
},
})
}
function onSelect(keys) {
if (!keys.length) return
selectedKeys.value = keys
trigger()
}
async function onOk() {
await getList()
}
function trigger() {
const value = head(selectedKeys.value)
const record = find(listData.value, { id: value })
emit('update:value', value)
emit('change', record)
}
</script>
<style lang="less" scoped></style>

View File

@ -1,131 +0,0 @@
<template>
<a-modal
:open="modal.open"
:title="modal.title"
:width="480"
:confirm-loading="modal.confirmLoading"
:after-close="onAfterClose"
:cancel-text="cancelText"
@ok="handleOk"
@cancel="handleCancel">
<a-form
ref="formRef"
:model="formData"
:rules="formRules"
:label-col="{ style: { width: '90px' } }">
<a-form-item
label="部门名称"
name="name">
<a-input v-model:value="formData.name"></a-input>
</a-form-item>
<a-form-item
label="上级部门"
name="parent_id">
<a-tree-select v-model:value="formData.parent_id"></a-tree-select>
</a-form-item>
<a-form-item
label="部门负责人"
name="name">
<a-input v-model:value="formData.name"></a-input>
</a-form-item>
</a-form>
</a-modal>
</template>
<script setup>
import { cloneDeep } from 'lodash-es'
import { ref } from 'vue'
import { config } from '@/config'
import apis from '@/apis'
import { useForm, useModal } from '@/hooks'
const emit = defineEmits(['ok'])
const { modal, showModal, hideModal, showLoading, hideLoading } = useModal()
const { formRecord, formData, formRef, formRules, resetForm } = useForm()
const cancelText = ref('取消')
/**
* 新建
*/
function handleCreate() {
showModal({
type: 'create',
title: '新建部门',
})
}
/**
* 编辑
*/
function handleEdit(record = {}) {
showModal({
type: 'edit',
title: '编辑部门',
})
formRecord.value = record
formData.value = cloneDeep(record)
}
/**
* 确定
*/
function handleOk() {
formRef.value
.validateFields()
.then(async (values) => {
try {
showLoading()
const params = {
...values,
}
let result = null
switch (modal.value.type) {
case 'create':
result = await apis.common.create(params).catch(() => {
throw new Error()
})
break
case 'edit':
result = await apis.common.update(params).catch(() => {
throw new Error()
})
break
}
hideLoading()
if (config('http.code.success') === result?.code) {
hideModal()
emit('ok')
}
} catch (error) {
hideLoading()
}
})
.catch(() => {
hideLoading()
})
}
/**
* 取消
*/
function handleCancel() {
hideModal()
}
/**
* 关闭后
*/
function onAfterClose() {
resetForm()
cancelText.value = '取消'
hideLoading()
}
defineExpose({
handleCreate,
handleEdit,
})
</script>
<style lang="less" scoped></style>

View File

@ -1,155 +1,111 @@
<template> <template>
<a-modal <a-modal :open="modal.open" :title="modal.title" :width="640" :confirm-loading="modal.confirmLoading"
:open="modal.open" :after-close="onAfterClose" :cancel-text="cancelText" :ok-text="okText" @ok="handleOk" @cancel="handleCancel">
:title="modal.title" <a-spin :spinning="spining">
:width="640" <a-form ref="formRef" :model="formData" :rules="formRules">
:confirm-loading="modal.confirmLoading" <a-card class="mb-8-2">
:after-close="onAfterClose" <a-row :gutter="12">
:cancel-text="cancelText" <a-col :span="12">
:ok-text="okText" <a-form-item :label="'客户名称'" name="name">
@ok="handleOk" <a-input :placeholder="'请输入客户名称'" v-model:value="formData.name"></a-input>
@cancel="handleCancel"> </a-form-item>
<a-form </a-col>
ref="formRef" <a-col :span="12">
:model="formData" <a-form-item :label="'联系电话'" name="phone">
:rules="formRules" <a-input :placeholder="'请输入联系电话'" v-model:value="formData.phone"></a-input>
:label-col="{ style: { width: '90px' } }"> </a-form-item>
<a-card class="mb-8-2"> </a-col>
<a-row :gutter="12"> <a-col :span="12">
<a-col :span="12"> <a-form-item :label="'出生日期'" name="birthday">
<a-form-item <a-date-picker v-model:value="formData.birthday" style="width: 100%;" />
:label="$t('pages.system.user.form.username')" </a-form-item>
name="username"> </a-col>
<a-input <a-col :span="12">
:placeholder="$t('pages.system.user.form.username.placeholder')" <a-form-item :label="'所属区域'" name="areaId">
v-model:value="formData.username"></a-input> <a-select ref="select" v-model:value="formData.areaId">
</a-form-item> <a-select-option v-for="item in areaEnum.getAll()" :value="item.value">{{
</a-col> item.name }}</a-select-option>
<a-col :span="12"> </a-select>
<a-form-item </a-form-item>
:label="$t('pages.system.user.form.password')" </a-col>
name="password"> <a-col :span="12">
<a-input-password <a-form-item :label="'客户等级'" name="grade">
v-model:value="formData.password" <a-select ref="select" v-model:value="formData.grade">
:placeholder="$t('pages.system.user.form.password.placeholder')" /> <a-select-option v-for="item in 8" :value="item">{{ item + '' }}</a-select-option>
</a-form-item> </a-select>
</a-col> </a-form-item>
</a-row> </a-col>
<a-row :gutter="12"> <a-col :span="12">
<a-col :span="12"> <a-form-item :label="'当前积分'" name="currentbalance">
<a-form-item <a-input-number :placeholder="'请输入当前积分'" v-model:value="formData.currentbalance"
:label="$t('pages.system.user.form.name')" style="width: 100%;"></a-input-number>
name="name"> </a-form-item>
<a-input </a-col>
:placeholder="$t('pages.system.user.form.name.placeholder')" <a-col :span="12">
v-model:value="formData.name"></a-input> <a-form-item :label="'历史积分'" name="balance">
</a-form-item> <a-input-number :placeholder="'请输入历史积分'" v-model:value="formData.balance"
</a-col> style="width: 100%;"></a-input-number>
<a-col :span="12"> </a-form-item>
<a-form-item </a-col>
:label="$t('pages.system.user.form.roles')"
name="roles">
<a-select
v-model:value="formData.roles"
mode="multiple"
style="width: 100%"
:placeholder="$t('pages.system.user.form.roles.placeholder')"
:options="roles"
@change="handleChange"></a-select>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="12"> <a-col :span="12">
<a-col :span="12"> <a-form-item :label="'客户类型'" name="type">
<a-form-item <a-select ref="select" v-model:value="formData.type">
:label="$t('pages.system.user.form.phone')" <a-select-option v-for="item in customersEnum.getAll()" :value="item.value">{{
type="tel" item.name }}</a-select-option>
name="phone"> </a-select>
<a-input </a-form-item>
:placeholder="$t('pages.system.user.form.phone.placeholder')" </a-col>
type="tel" <a-col :span="12">
v-model:value="formData.phone"></a-input> <a-form-item :label="'状态'" name="status">
</a-form-item> <a-radio-group v-model:value="formData.status" :options="[
</a-col> { label: '启用', value: 'enabled' },
<a-col :span="12"> { label: '停用', value: 'disabled' },
<a-form-item
:label="$t('pages.system.user.form.email')"
type="email"
name="email">
<a-input
:placeholder="$t('pages.system.user.form.email.placeholder')"
type="email"
v-model:value="formData.email"></a-input>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="12">
<a-col :span="24">
<a-form-item
:label="$t('pages.system.user.form.remark')"
name="remark">
<a-textarea
:placeholder="$t('pages.system.user.form.remark.placeholder')"
v-model:value="formData.remark"></a-textarea>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="12">
<a-col :span="24">
<a-form-item
:label="$t('pages.system.user.form.status')"
name="status">
<a-radio-group
v-model:value="formData.status"
:options="[
{ label: $t('pages.system.user.form.status.activated'), value: 'activated' },
{ label: $t('pages.system.user.form.status.freezed'), value: 'freezed' },
]"></a-radio-group> ]"></a-radio-group>
</a-form-item> </a-form-item>
</a-col> </a-col>
</a-row> <a-col :span="24">
</a-card> <a-form-item :label="'头像'" name="fileList">
</a-form> <gx-upload v-model="formData.fileList" accept-types=".jpg,.png,.webp" :fileNumber="1"
@uploadSuccess="uploadSuccess" />
</a-form-item>
</a-col>
</a-row>
</a-card>
</a-form>
</a-spin>
</a-modal> </a-modal>
</template> </template>
<script setup> <script setup>
import { cloneDeep } from 'lodash-es' import { cloneDeep } from 'lodash-es'
import { ref } from 'vue' import { ref, onBeforeMount } from 'vue'
import { config } from '@/config' import { config } from '@/config'
import apis from '@/apis' import apis from '@/apis'
import { useForm, useModal } from '@/hooks' import { useForm, useModal, useSpining } from '@/hooks'
import { message } from 'ant-design-vue' import { message } from 'ant-design-vue'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import dayjs from 'dayjs'
import GxUpload from '@/components/GxUpload/index.vue'
import { customersEnum, areaEnum } from "@/enums/useEnum"
const emit = defineEmits(['ok']) const emit = defineEmits(['ok'])
const { t } = useI18n() // t const { t } = useI18n() // t
const { modal, showModal, hideModal, showLoading, hideLoading } = useModal() const { modal, showModal, hideModal, showLoading, hideLoading } = useModal()
const { formRecord, formData, formRef, formRules, resetForm } = useForm() const { formRecord, formData, formRef, formRules, resetForm } = useForm()
const { spining, showSpining, hideSpining } = useSpining()
const cancelText = ref(t('button.cancel')) const cancelText = ref(t('button.cancel'))
const okText = ref(t('button.confirm')) const okText = ref(t('button.confirm'))
const rolesValue = ref([]) const fileList = ref([])
const roles = ref([])
formRules.value = { formRules.value = {
name: { required: true, message: t('pages.system.user.form.username.placeholder') }, name: [{ required: true, message: '请输入客户名称' }],
username: { required: true, message: t('pages.system.user.form.code.placeholder') }, status: [{ required: true, message: '请选择状态', trigger: 'change' }],
status: { required: true, message: t('pages.system.user.form.status') }, areaId: [{ required: true, message: '请选择所属区域', trigger: 'change' }],
roles: [{ required: true, message: t('pages.system.user.form.roles.placeholder'), trigger: 'change' }], type: [{ required: true, message: '请选择客户类型', trigger: 'change' }]
} }
/** onBeforeMount(() => {
* 请求角色 formData.value.areaId = 1
*/ })
getRole()
/**
* select 选择框
*/
const handleChange = (value) => {
rolesValue.value = value
}
/** /**
* 新建 * 新建
@ -157,122 +113,87 @@ const handleChange = (value) => {
function handleCreate() { function handleCreate() {
showModal({ showModal({
type: 'create', type: 'create',
title: t('pages.system.user.add'), title: '新增客户',
}) })
// initData()
formData.value.status = 'enabled'
} }
async function getRole() {
const { success, data } = await apis.role.getRoleList().catch(() => {
throw new Error()
})
if (!success) {
return message.error('当前角色信息错误')
}
let roleArr = []
if (data.length) {
data.forEach((item) => {
roleArr.push({
label: item.name,
value: item.id,
})
})
}
roles.value = roleArr
}
/** /**
* 编辑 * 编辑
*/ */
async function handleEdit(record = {}) { async function handleEdit(record = {}) {
showModal({ showModal({
type: 'edit', type: 'edit',
title: t('pages.system.user.edit'), title: '编辑客户',
}) })
const { data, success } = await apis.users.getUsers(record.id).catch() try {
if (!success) { showSpining()
hideModal() const { data, success } = await apis.customer.getItem(record.id).catch()
return if (!success) {
} hideModal()
let roles = [] return
if (data.roles) { }
roles = formatArr(data.roles, 'edit') hideSpining()
formData.value = { ...data }
formData.value.birthday = dayjs(data.birthday)
if (data.avatar) {
formData.value.fileList = [config('http.apiBasic') + data.avatar]
}
} catch (error) {
message.error({ content: error.message })
hideSpining()
} }
data.roles = roles
formRecord.value = data
formData.value = cloneDeep(data)
} }
const uploadSuccess = (data) => {
fileList.value.push(data)
}
/** /**
* 确定 * 确定
*/ */
function handleOk() { function handleOk() {
formRef.value formRef.value.validateFields().then(async (values) => {
.validateFields() try {
.then(async (values) => { showLoading()
try { const params = {
showLoading() ...values,
avatar: fileList.value[0]
const params = {
...values,
roles: formatArr(rolesValue.value),
}
let result = null
switch (modal.value.type) {
case 'create':
result = await apis.users.createUsers(params).catch(() => {
throw new Error()
})
break
case 'edit':
result = await apis.users.updateUsers(formData.value.id, params).catch(() => {
throw new Error()
})
break
}
hideLoading()
if (config('http.code.success') === result?.success) {
hideModal()
emit('ok')
}
} catch (error) {
hideLoading()
} }
}) let result = null
.catch(() => { switch (modal.value.type) {
case 'create':
result = await apis.customer.createProject(params).catch((error) => {
throw new Error(error)
})
break
case 'edit':
result = await apis.customer.updateItem(formData.value.id, params).catch(() => {
throw new Error(error)
})
break
}
hideLoading()
if (config('http.code.success') === result?.success) {
hideModal()
emit('ok')
}
} catch (error) {
message.error({ content: error.message })
hideLoading()
}
})
.catch((e) => {
hideLoading() hideLoading()
}) })
} }
/**
* 对权限组 过数据格式
*/
function formatArr(data, type = '') {
const rolesArr = []
data.forEach((item) => {
roles.value.forEach((r) => {
if (type === 'edit') {
if (item.role_id === r.value) {
rolesArr.push({
value: item.role_id,
label: r.label,
})
return
}
} else if (r.value === item) {
rolesArr.push({
role_id: item,
role_name: r.label,
})
return
}
})
})
return rolesArr
}
/** /**
* 取消 * 取消
*/ */
function handleCancel() { function handleCancel() {
formData.value.areaId = 1
hideModal() hideModal()
} }

View File

@ -1,44 +1,27 @@
<template> <template>
<x-search-bar class="mb-8-2"> <x-search-bar class="mb-8-2">
<template #default="{ gutter, colSpan }"> <template #default="{ gutter, colSpan }">
<a-form <a-form :model="searchFormData" layout="inline">
:label-col="{ style: { width: '100px' } }"
:model="searchFormData"
layout="inline">
<a-row :gutter="gutter"> <a-row :gutter="gutter">
<a-col v-bind="colSpan"> <a-col v-bind="colSpan">
<a-form-item <a-form-item label="姓名" name="name">
:label="$t('pages.system.role.form.name')" <a-input placeholder="请输入客户姓名" v-model:value="searchFormData.name"></a-input>
name="name">
<a-input
:placeholder="$t('pages.system.role.form.code.placeholder')"
v-model:value="searchFormData.name"></a-input>
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col v-bind="colSpan"> <a-col v-bind="colSpan">
<a-form-item name="code"> <a-form-item label="状态" name="status">
<template #label> <a-select v-model:value="searchFormData.status" allowClear>
{{ $t('pages.system.role.form.code') }} <a-select-option value="">全部</a-select-option>
<a-tooltip :title="$t('pages.system.role.form.code')"> <a-select-option value="enabled">启用</a-select-option>
<question-circle-outlined class="ml-4-1 color-placeholder" /> <a-select-option value="disabled">停用</a-select-option>
</a-tooltip> </a-select>
</template>
<a-input
:placeholder="$t('pages.system.role.form.code.placeholder')"
v-model:value="searchFormData.code"></a-input>
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col class="align-right" v-bind="colSpan">
<a-col
class="align-right"
v-bind="colSpan">
<a-space> <a-space>
<a-button @click="handleResetSearch">{{ $t('button.reset') }}</a-button> <a-button @click="handleResetSearch">{{ $t('button.reset') }}</a-button>
<a-button <a-button ghost type="primary" @click="handleSearch">
ghost
type="primary"
@click="handleSearch">
{{ $t('button.search') }} {{ $t('button.search') }}
</a-button> </a-button>
</a-space> </a-space>
@ -46,63 +29,47 @@
</a-row> </a-row>
</a-form> </a-form>
</template> </template>
</x-search-bar> </x-search-bar>
<a-row <a-row :gutter="8" :wrap="false">
:gutter="8"
:wrap="false">
<a-col flex="auto"> <a-col flex="auto">
<a-card type="flex"> <a-card type="flex">
<x-action-bar class="mb-8-2"> <!-- <x-action-bar class="mb-8-2">
<a-button <a-button type="primary" @click="$refs.editDialogRef.handleCreate()">
v-action="'add'"
type="primary"
@click="$refs.editDialogRef.handleCreate()">
<template #icon> <template #icon>
<plus-outlined></plus-outlined> <plus-outlined></plus-outlined>
</template> </template>
{{ $t('pages.system.role.add') }} 新增客户
</a-button> </a-button>
</x-action-bar> </x-action-bar> -->
<a-table <a-table :columns="columns" :data-source="listData" bordered="true" :loading="loading"
:columns="columns" :pagination="paginationState" :scroll="{ x: 1000 }" @change="onTableChange">
:data-source="listData"
:loading="loading"
:pagination="paginationState"
:scroll="{ x: 1000 }"
@change="onTableChange">
<template #bodyCell="{ column, record }"> <template #bodyCell="{ column, record }">
<template v-if="'statusType' === column.key">
<!--状态-->
<a-tag
v-if="statusTypeEnum.is('enabled', record.status)"
color="processing">
{{ statusTypeEnum.getDesc(record.status) }}
</a-tag>
<!--状态-->
<a-tag
v-if="statusTypeEnum.is('disabled', record.status)"
color="processing">
{{ statusTypeEnum.getDesc(record.status) }}
</a-tag>
</template>
<template v-if="'createAt' === column.key"> <template v-if="column.dataIndex === 'avatar'">
{{ formatUtcDateTime(record.created_at) }} <a-image :width="60" :src="config('http.apiBasic') + record.avatar || $imageErr.imgErr" />
</template>
<template v-if="column.dataIndex === 'type'">
<span>{{ customersEnum.getName(record.type) }}</span>
</template>
<template v-if="column.dataIndex === 'grade'">
<span>{{ record.grade+'级' }}</span>
</template>
<template v-if="column.dataIndex === 'birthday'">
<span>{{ record.birthday&&dayjs(record.birthday).format('YYYY-MM-DD') }}</span>
</template>
<template v-if="'status' === column.dataIndex">
<a-tag v-if="record.status === 'enabled'" :color="'green'">启用</a-tag>
<a-tag v-if="record.status === 'disabled'" :color="'red'">停用</a-tag>
</template> </template>
<template v-if="'action' === column.key"> <template v-if="'action' === column.key">
<x-action-button @click="$refs.editDialogRef.handleEdit(record)"> <x-action-button @click="$refs.editDialogRef.handleEdit(record)">
<a-tooltip> <a-tooltip>
<template #title> {{ $t('pages.system.role.edit') }}</template> <template #title> {{ $t('pages.system.user.edit') }}</template>
<edit-outlined /> <edit-outlined /> </a-tooltip></x-action-button>
</a-tooltip> <x-action-button @click="handleDelete(record)">
</x-action-button>
<x-action-button @click="handleRemove(record)">
<a-tooltip> <a-tooltip>
<template #title> {{ $t('pages.system.delete') }}</template> <template #title>{{ $t('pages.system.delete') }}</template>
<delete-outlined style="color: #ff4d4f" /> <delete-outlined style="color: #ff4d4f" /> </a-tooltip></x-action-button>
</a-tooltip>
</x-action-button>
</template> </template>
</template> </template>
</a-table> </a-table>
@ -110,9 +77,7 @@
</a-col> </a-col>
</a-row> </a-row>
<edit-dialog <edit-dialog ref="editDialogRef" @ok="onOk"></edit-dialog>
ref="editDialogRef"
@ok="onOk"></edit-dialog>
</template> </template>
<script setup> <script setup>
@ -121,44 +86,47 @@ import { ref } from 'vue'
import apis from '@/apis' import apis from '@/apis'
import { formatUtcDateTime } from '@/utils/util' import { formatUtcDateTime } from '@/utils/util'
import { config } from '@/config' import { config } from '@/config'
import { statusTypeEnum } from '@/enums/system' import dayjs from 'dayjs'
import { usePagination, useForm } from '@/hooks' import { usePagination } from '@/hooks'
import { customersEnum, areaEnum } from "@/enums/useEnum"
import EditDialog from './components/EditDialog.vue' import EditDialog from './components/EditDialog.vue'
import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons-vue' import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons-vue'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
defineOptions({ defineOptions({
name: 'systemRole', name: 'owner',
}) })
const { t } = useI18n() // t const { t } = useI18n() // t
const columns = [ const columns = [
{ title: t('pages.system.role.form.code'), dataIndex: 'code', width: 240 }, { title: '头像', dataIndex: 'avatar', width: 120, align: 'center' },
{ title: t('pages.system.role.form.name'), dataIndex: 'name' }, { title: '姓名', dataIndex: 'name', width: 120, align: 'center' },
{ title: t('pages.system.role.form.status'), dataIndex: 'status', key: 'statusType', width: 80 }, { title: '电话', dataIndex: 'phone', width: 120, align: 'center' },
{ title: t('pages.system.role.form.sequence'), dataIndex: 'sequence', width: 100 }, { title: '出生日期', dataIndex: 'birthday', width: 120, align: 'center' },
{ title: t('pages.system.role.form.created_at'), key: 'createAt', fixed: 'right', width: 120 }, { title: '当前积分', dataIndex: 'currentbalance', width: 120 },
{ title: t('button.action'), key: 'action', fixed: 'right', width: 120 }, { title: '累计积分', dataIndex: 'balance', width: 120 },
{ title: '等级', dataIndex: 'grade', width: 60, align: 'center' },
{ title: '类型', dataIndex: 'type', width: 60, align: 'center' },
{ title: '状态', dataIndex: 'status', key: 'introduce', width: 60, align: 'center' },
{ title: t('button.action'), key: 'action', fixed: 'right', width: 100, align: 'center' },
] ]
const { listData, loading, showLoading, hideLoading, paginationState, searchFormData, resetPagination } = const { listData, loading, showLoading, hideLoading, paginationState, resetPagination, searchFormData } =
usePagination() usePagination()
const { resetForm } = useForm()
const editDialogRef = ref() const editDialogRef = ref()
getPageList() getPageList()
/** /**
* 获取用户列 * 获取格数据
* @returns {Promise<void>} * @returns {Promise<void>}
*/ */
async function getPageList() { async function getPageList() {
try { try {
showLoading() showLoading()
const { pageSize, current } = paginationState const { pageSize, current } = paginationState
const { success, data, total } = await apis.role const { success, data, total } = await apis.customer
.getRoleList({ .getProjectList({
pageSize, pageSize,
page: current, page: current,
type:'owner',
...searchFormData.value, ...searchFormData.value,
}) })
.catch(() => { .catch(() => {
@ -175,18 +143,18 @@ async function getPageList() {
} }
/** /**
* *
*/ */
function handleRemove({ id }) { function handleDelete({ id }) {
Modal.confirm({ Modal.confirm({
title: t('pages.system.role.delTip'), title: t('pages.system.user.delTip'),
content: t('button.confirm'), content: t('button.confirm'),
okText: t('button.confirm'), okText: t('button.confirm'),
onOk: () => { onOk: () => {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
;(async () => { ; (async () => {
try { try {
const { success } = await apis.role.delRole(id).catch(() => { const { success } = await apis.customer.delItem(id).catch(() => {
throw new Error() throw new Error()
}) })
if (config('http.code.success') === success) { if (config('http.code.success') === success) {
@ -212,6 +180,13 @@ function onTableChange({ current, pageSize }) {
getPageList() getPageList()
} }
/**
* 搜索
*/
function handleSearch() {
resetPagination()
getPageList()
}
/** /**
* 重置 * 重置
*/ */
@ -220,16 +195,6 @@ function handleResetSearch() {
resetPagination() resetPagination()
getPageList() getPageList()
} }
/**
* 搜索
*/
function handleSearch() {
resetForm()
resetPagination()
getPageList()
}
/** /**
* 编辑完成 * 编辑完成
*/ */

View File

@ -1,169 +0,0 @@
<template>
<a-card
:body-style="{ height: 'calc(100% - 56px - 47px)', padding: 0 }"
:style="{
position: 'sticky',
top: appStore.mainOffsetTop,
height: appStore.mainHeight,
}">
<template #title>
<a-input-search placeholder="搜索部门"></a-input-search>
</template>
<x-scrollbar class="pa-8-2">
<a-spin :spinning="loading">
<a-tree
block-node
:selected-keys="selectedKeys"
:tree-data="listData"
:field-names="{ key: 'id', children: 'children' }"
@select="onSelect">
<template #title="{ title }">
<span class="ant-tree-title__name">{{ title }}</span>
<span class="ant-tree-title__actions">
<a-dropdown
:trigger="['click']"
@click.stop>
<x-action-button>
<more-outlined></more-outlined>
</x-action-button>
<template #overlay>
<a-menu>
<a-menu-item @click="$refs.editDepartmentDialogRef.handleEdit()">
添加子部门
</a-menu-item>
<a-menu-item @click="$refs.editDepartmentDialogRef.handleEdit()">
编辑
</a-menu-item>
<a-menu-item @click="handleDelete">删除</a-menu-item>
</a-menu>
</template>
</a-dropdown>
</span>
</template>
</a-tree>
<empty
v-if="!listData.length"
:image="Empty.PRESENTED_IMAGE_SIMPLE"></empty>
</a-spin>
</x-scrollbar>
<template #actions>
<span @click="$refs.editDepartmentDialogRef.handleCreate()">
<plus-outlined></plus-outlined>
新建部门
</span>
</template>
</a-card>
<edit-department-dialog
ref="editDepartmentDialogRef"
@ok="onOk"></edit-department-dialog>
</template>
<script setup>
import { useAppStore } from '@/store'
import { ref, watch } from 'vue'
import { usePagination } from '@/hooks'
import apis from '@/apis'
import { Empty, Modal, message } from 'ant-design-vue'
import { config } from '@/config'
import { head, get, find } from 'lodash-es'
import { MoreOutlined, PlusOutlined } from '@ant-design/icons-vue'
import EditDepartmentDialog from './EditDepartmentDialog.vue'
const props = defineProps({
value: {
type: String,
default: '',
},
})
const emit = defineEmits(['change', 'update:value'])
const appStore = useAppStore()
const { listData, loading, showLoading, hideLoading } = usePagination()
const editDepartmentDialogRef = ref()
const selectedKeys = ref([props.value])
watch(
() => props.value,
(val) => {
if (val === selectedKeys.value?.[0]) return
selectedKeys.value = [val]
}
)
getList()
/**
* 获取列表
* @returns {Promise<void>}
*/
async function getList() {
try {
showLoading()
const { code, data } = await apis.common.getPageList().catch(() => {
throw new Error()
})
hideLoading()
if (config('http.code.success') === code) {
const { records } = data
listData.value = records
if (listData.value.length) {
selectedKeys.value = [get(head(listData.value), 'id')]
trigger()
}
}
} catch (error) {
hideLoading()
}
}
/**
* 删除
*/
function handleDelete({ id }) {
Modal.confirm({
title: '删除提示',
content: '确认删除?',
okText: '确认',
onOk: () => {
return new Promise((resolve, reject) => {
;(async () => {
try {
const { code } = await apis.common.del(id).catch(() => {
throw new Error()
})
if (config('http.code.success') === code) {
resolve()
message.success('删除成功')
await getList()
}
} catch (error) {
reject()
}
})()
})
},
})
}
function onSelect(keys) {
if (!keys.length) return
selectedKeys.value = keys
trigger()
}
async function onOk() {
await getList()
}
function trigger() {
const value = head(selectedKeys.value)
const record = find(listData.value, { id: value })
emit('update:value', value)
emit('change', record)
}
</script>
<style lang="less" scoped></style>

View File

@ -1,131 +0,0 @@
<template>
<a-modal
:open="modal.open"
:title="modal.title"
:width="480"
:confirm-loading="modal.confirmLoading"
:after-close="onAfterClose"
:cancel-text="cancelText"
@ok="handleOk"
@cancel="handleCancel">
<a-form
ref="formRef"
:model="formData"
:rules="formRules"
:label-col="{ style: { width: '90px' } }">
<a-form-item
label="部门名称"
name="name">
<a-input v-model:value="formData.name"></a-input>
</a-form-item>
<a-form-item
label="上级部门"
name="parent_id">
<a-tree-select v-model:value="formData.parent_id"></a-tree-select>
</a-form-item>
<a-form-item
label="部门负责人"
name="name">
<a-input v-model:value="formData.name"></a-input>
</a-form-item>
</a-form>
</a-modal>
</template>
<script setup>
import { cloneDeep } from 'lodash-es'
import { ref } from 'vue'
import { config } from '@/config'
import apis from '@/apis'
import { useForm, useModal } from '@/hooks'
const emit = defineEmits(['ok'])
const { modal, showModal, hideModal, showLoading, hideLoading } = useModal()
const { formRecord, formData, formRef, formRules, resetForm } = useForm()
const cancelText = ref('取消')
/**
* 新建
*/
function handleCreate() {
showModal({
type: 'create',
title: '新建部门',
})
}
/**
* 编辑
*/
function handleEdit(record = {}) {
showModal({
type: 'edit',
title: '编辑部门',
})
formRecord.value = record
formData.value = cloneDeep(record)
}
/**
* 确定
*/
function handleOk() {
formRef.value
.validateFields()
.then(async (values) => {
try {
showLoading()
const params = {
...values,
}
let result = null
switch (modal.value.type) {
case 'create':
result = await apis.common.create(params).catch(() => {
throw new Error()
})
break
case 'edit':
result = await apis.common.update(params).catch(() => {
throw new Error()
})
break
}
hideLoading()
if (config('http.code.success') === result?.code) {
hideModal()
emit('ok')
}
} catch (error) {
hideLoading()
}
})
.catch(() => {
hideLoading()
})
}
/**
* 取消
*/
function handleCancel() {
hideModal()
}
/**
* 关闭后
*/
function onAfterClose() {
resetForm()
cancelText.value = '取消'
hideLoading()
}
defineExpose({
handleCreate,
handleEdit,
})
</script>
<style lang="less" scoped></style>

View File

@ -1,155 +1,111 @@
<template> <template>
<a-modal <a-modal :open="modal.open" :title="modal.title" :width="640" :confirm-loading="modal.confirmLoading"
:open="modal.open" :after-close="onAfterClose" :cancel-text="cancelText" :ok-text="okText" @ok="handleOk" @cancel="handleCancel">
:title="modal.title" <a-spin :spinning="spining">
:width="640" <a-form ref="formRef" :model="formData" :rules="formRules">
:confirm-loading="modal.confirmLoading" <a-card class="mb-8-2">
:after-close="onAfterClose" <a-row :gutter="12">
:cancel-text="cancelText" <a-col :span="12">
:ok-text="okText" <a-form-item :label="'客户名称'" name="name">
@ok="handleOk" <a-input :placeholder="'请输入客户名称'" v-model:value="formData.name"></a-input>
@cancel="handleCancel"> </a-form-item>
<a-form </a-col>
ref="formRef" <a-col :span="12">
:model="formData" <a-form-item :label="'联系电话'" name="phone">
:rules="formRules" <a-input :placeholder="'请输入联系电话'" v-model:value="formData.phone"></a-input>
:label-col="{ style: { width: '90px' } }"> </a-form-item>
<a-card class="mb-8-2"> </a-col>
<a-row :gutter="12"> <a-col :span="12">
<a-col :span="12"> <a-form-item :label="'出生日期'" name="birthday">
<a-form-item <a-date-picker v-model:value="formData.birthday" style="width: 100%;" />
:label="$t('pages.system.user.form.username')" </a-form-item>
name="username"> </a-col>
<a-input <a-col :span="12">
:placeholder="$t('pages.system.user.form.username.placeholder')" <a-form-item :label="'所属区域'" name="areaId">
v-model:value="formData.username"></a-input> <a-select ref="select" v-model:value="formData.areaId">
</a-form-item> <a-select-option v-for="item in areaEnum.getAll()" :value="item.value">{{
</a-col> item.name }}</a-select-option>
<a-col :span="12"> </a-select>
<a-form-item </a-form-item>
:label="$t('pages.system.user.form.password')" </a-col>
name="password"> <a-col :span="12">
<a-input-password <a-form-item :label="'客户等级'" name="grade">
v-model:value="formData.password" <a-select ref="select" v-model:value="formData.grade">
:placeholder="$t('pages.system.user.form.password.placeholder')" /> <a-select-option v-for="item in 8" :value="item">{{ item + '' }}</a-select-option>
</a-form-item> </a-select>
</a-col> </a-form-item>
</a-row> </a-col>
<a-row :gutter="12"> <a-col :span="12">
<a-col :span="12"> <a-form-item :label="'当前积分'" name="currentbalance">
<a-form-item <a-input-number :placeholder="'请输入当前积分'" v-model:value="formData.currentbalance"
:label="$t('pages.system.user.form.name')" style="width: 100%;"></a-input-number>
name="name"> </a-form-item>
<a-input </a-col>
:placeholder="$t('pages.system.user.form.name.placeholder')" <a-col :span="12">
v-model:value="formData.name"></a-input> <a-form-item :label="'历史积分'" name="balance">
</a-form-item> <a-input-number :placeholder="'请输入历史积分'" v-model:value="formData.balance"
</a-col> style="width: 100%;"></a-input-number>
<a-col :span="12"> </a-form-item>
<a-form-item </a-col>
:label="$t('pages.system.user.form.roles')"
name="roles">
<a-select
v-model:value="formData.roles"
mode="multiple"
style="width: 100%"
:placeholder="$t('pages.system.user.form.roles.placeholder')"
:options="roles"
@change="handleChange"></a-select>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="12"> <a-col :span="12">
<a-col :span="12"> <a-form-item :label="'客户类型'" name="type">
<a-form-item <a-select ref="select" v-model:value="formData.type">
:label="$t('pages.system.user.form.phone')" <a-select-option v-for="item in customersEnum.getAll()" :value="item.value">{{
type="tel" item.name }}</a-select-option>
name="phone"> </a-select>
<a-input </a-form-item>
:placeholder="$t('pages.system.user.form.phone.placeholder')" </a-col>
type="tel" <a-col :span="12">
v-model:value="formData.phone"></a-input> <a-form-item :label="'状态'" name="status">
</a-form-item> <a-radio-group v-model:value="formData.status" :options="[
</a-col> { label: '启用', value: 'enabled' },
<a-col :span="12"> { label: '停用', value: 'disabled' },
<a-form-item
:label="$t('pages.system.user.form.email')"
type="email"
name="email">
<a-input
:placeholder="$t('pages.system.user.form.email.placeholder')"
type="email"
v-model:value="formData.email"></a-input>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="12">
<a-col :span="24">
<a-form-item
:label="$t('pages.system.user.form.remark')"
name="remark">
<a-textarea
:placeholder="$t('pages.system.user.form.remark.placeholder')"
v-model:value="formData.remark"></a-textarea>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="12">
<a-col :span="24">
<a-form-item
:label="$t('pages.system.user.form.status')"
name="status">
<a-radio-group
v-model:value="formData.status"
:options="[
{ label: $t('pages.system.user.form.status.activated'), value: 'activated' },
{ label: $t('pages.system.user.form.status.freezed'), value: 'freezed' },
]"></a-radio-group> ]"></a-radio-group>
</a-form-item> </a-form-item>
</a-col> </a-col>
</a-row> <a-col :span="24">
</a-card> <a-form-item :label="'头像'" name="fileList">
</a-form> <gx-upload v-model="formData.fileList" accept-types=".jpg,.png,.webp" :fileNumber="1"
@uploadSuccess="uploadSuccess" />
</a-form-item>
</a-col>
</a-row>
</a-card>
</a-form>
</a-spin>
</a-modal> </a-modal>
</template> </template>
<script setup> <script setup>
import { cloneDeep } from 'lodash-es' import { cloneDeep } from 'lodash-es'
import { ref } from 'vue' import { ref, onBeforeMount } from 'vue'
import { config } from '@/config' import { config } from '@/config'
import apis from '@/apis' import apis from '@/apis'
import { useForm, useModal } from '@/hooks' import { useForm, useModal, useSpining } from '@/hooks'
import { message } from 'ant-design-vue' import { message } from 'ant-design-vue'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import dayjs from 'dayjs'
import GxUpload from '@/components/GxUpload/index.vue'
import { customersEnum, areaEnum } from "@/enums/useEnum"
const emit = defineEmits(['ok']) const emit = defineEmits(['ok'])
const { t } = useI18n() // t const { t } = useI18n() // t
const { modal, showModal, hideModal, showLoading, hideLoading } = useModal() const { modal, showModal, hideModal, showLoading, hideLoading } = useModal()
const { formRecord, formData, formRef, formRules, resetForm } = useForm() const { formRecord, formData, formRef, formRules, resetForm } = useForm()
const { spining, showSpining, hideSpining } = useSpining()
const cancelText = ref(t('button.cancel')) const cancelText = ref(t('button.cancel'))
const okText = ref(t('button.confirm')) const okText = ref(t('button.confirm'))
const rolesValue = ref([]) const fileList = ref([])
const roles = ref([])
formRules.value = { formRules.value = {
name: { required: true, message: t('pages.system.user.form.username.placeholder') }, name: [{ required: true, message: '请输入客户名称' }],
username: { required: true, message: t('pages.system.user.form.code.placeholder') }, status: [{ required: true, message: '请选择状态', trigger: 'change' }],
status: { required: true, message: t('pages.system.user.form.status') }, areaId: [{ required: true, message: '请选择所属区域', trigger: 'change' }],
roles: [{ required: true, message: t('pages.system.user.form.roles.placeholder'), trigger: 'change' }], type: [{ required: true, message: '请选择客户类型', trigger: 'change' }]
} }
/** onBeforeMount(() => {
* 请求角色 formData.value.areaId = 1
*/ })
getRole()
/**
* select 选择框
*/
const handleChange = (value) => {
rolesValue.value = value
}
/** /**
* 新建 * 新建
@ -157,122 +113,87 @@ const handleChange = (value) => {
function handleCreate() { function handleCreate() {
showModal({ showModal({
type: 'create', type: 'create',
title: t('pages.system.user.add'), title: '新增客户',
}) })
// initData()
formData.value.status = 'enabled'
} }
async function getRole() {
const { success, data } = await apis.role.getRoleList().catch(() => {
throw new Error()
})
if (!success) {
return message.error('当前角色信息错误')
}
let roleArr = []
if (data.length) {
data.forEach((item) => {
roleArr.push({
label: item.name,
value: item.id,
})
})
}
roles.value = roleArr
}
/** /**
* 编辑 * 编辑
*/ */
async function handleEdit(record = {}) { async function handleEdit(record = {}) {
showModal({ showModal({
type: 'edit', type: 'edit',
title: t('pages.system.user.edit'), title: '编辑客户',
}) })
const { data, success } = await apis.users.getUsers(record.id).catch() try {
if (!success) { showSpining()
hideModal() const { data, success } = await apis.customer.getItem(record.id).catch()
return if (!success) {
} hideModal()
let roles = [] return
if (data.roles) { }
roles = formatArr(data.roles, 'edit') hideSpining()
formData.value = { ...data }
formData.value.birthday = dayjs(data.birthday)
if (data.avatar) {
formData.value.fileList = [config('http.apiBasic') + data.avatar]
}
} catch (error) {
message.error({ content: error.message })
hideSpining()
} }
data.roles = roles
formRecord.value = data
formData.value = cloneDeep(data)
} }
const uploadSuccess = (data) => {
fileList.value.push(data)
}
/** /**
* 确定 * 确定
*/ */
function handleOk() { function handleOk() {
formRef.value formRef.value.validateFields().then(async (values) => {
.validateFields() try {
.then(async (values) => { showLoading()
try { const params = {
showLoading() ...values,
avatar: fileList.value[0]
const params = {
...values,
roles: formatArr(rolesValue.value),
}
let result = null
switch (modal.value.type) {
case 'create':
result = await apis.users.createUsers(params).catch(() => {
throw new Error()
})
break
case 'edit':
result = await apis.users.updateUsers(formData.value.id, params).catch(() => {
throw new Error()
})
break
}
hideLoading()
if (config('http.code.success') === result?.success) {
hideModal()
emit('ok')
}
} catch (error) {
hideLoading()
} }
}) let result = null
.catch(() => { switch (modal.value.type) {
case 'create':
result = await apis.customer.createProject(params).catch((error) => {
throw new Error(error)
})
break
case 'edit':
result = await apis.customer.updateItem(formData.value.id, params).catch(() => {
throw new Error(error)
})
break
}
hideLoading()
if (config('http.code.success') === result?.success) {
hideModal()
emit('ok')
}
} catch (error) {
message.error({ content: error.message })
hideLoading()
}
})
.catch((e) => {
hideLoading() hideLoading()
}) })
} }
/**
* 对权限组 过数据格式
*/
function formatArr(data, type = '') {
const rolesArr = []
data.forEach((item) => {
roles.value.forEach((r) => {
if (type === 'edit') {
if (item.role_id === r.value) {
rolesArr.push({
value: item.role_id,
label: r.label,
})
return
}
} else if (r.value === item) {
rolesArr.push({
role_id: item,
role_name: r.label,
})
return
}
})
})
return rolesArr
}
/** /**
* 取消 * 取消
*/ */
function handleCancel() { function handleCancel() {
formData.value.areaId = 1
hideModal() hideModal()
} }

View File

@ -1,44 +1,27 @@
<template> <template>
<x-search-bar class="mb-8-2"> <x-search-bar class="mb-8-2">
<template #default="{ gutter, colSpan }"> <template #default="{ gutter, colSpan }">
<a-form <a-form :model="searchFormData" layout="inline">
:label-col="{ style: { width: '100px' } }"
:model="searchFormData"
layout="inline">
<a-row :gutter="gutter"> <a-row :gutter="gutter">
<a-col v-bind="colSpan"> <a-col v-bind="colSpan">
<a-form-item <a-form-item label="姓名" name="name">
:label="$t('pages.system.role.form.name')" <a-input placeholder="请输入客户姓名" v-model:value="searchFormData.name"></a-input>
name="name">
<a-input
:placeholder="$t('pages.system.role.form.code.placeholder')"
v-model:value="searchFormData.name"></a-input>
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col v-bind="colSpan"> <a-col v-bind="colSpan">
<a-form-item name="code"> <a-form-item label="状态" name="status">
<template #label> <a-select v-model:value="searchFormData.status" allowClear>
{{ $t('pages.system.role.form.code') }} <a-select-option value="">全部</a-select-option>
<a-tooltip :title="$t('pages.system.role.form.code')"> <a-select-option value="enabled">启用</a-select-option>
<question-circle-outlined class="ml-4-1 color-placeholder" /> <a-select-option value="disabled">停用</a-select-option>
</a-tooltip> </a-select>
</template>
<a-input
:placeholder="$t('pages.system.role.form.code.placeholder')"
v-model:value="searchFormData.code"></a-input>
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col class="align-right" v-bind="colSpan">
<a-col
class="align-right"
v-bind="colSpan">
<a-space> <a-space>
<a-button @click="handleResetSearch">{{ $t('button.reset') }}</a-button> <a-button @click="handleResetSearch">{{ $t('button.reset') }}</a-button>
<a-button <a-button ghost type="primary" @click="handleSearch">
ghost
type="primary"
@click="handleSearch">
{{ $t('button.search') }} {{ $t('button.search') }}
</a-button> </a-button>
</a-space> </a-space>
@ -46,63 +29,47 @@
</a-row> </a-row>
</a-form> </a-form>
</template> </template>
</x-search-bar> </x-search-bar>
<a-row <a-row :gutter="8" :wrap="false">
:gutter="8"
:wrap="false">
<a-col flex="auto"> <a-col flex="auto">
<a-card type="flex"> <a-card type="flex">
<x-action-bar class="mb-8-2"> <!-- <x-action-bar class="mb-8-2">
<a-button <a-button type="primary" @click="$refs.editDialogRef.handleCreate()">
v-action="'add'"
type="primary"
@click="$refs.editDialogRef.handleCreate()">
<template #icon> <template #icon>
<plus-outlined></plus-outlined> <plus-outlined></plus-outlined>
</template> </template>
{{ $t('pages.system.role.add') }} 新增客户
</a-button> </a-button>
</x-action-bar> </x-action-bar> -->
<a-table <a-table :columns="columns" :data-source="listData" bordered="true" :loading="loading"
:columns="columns" :pagination="paginationState" :scroll="{ x: 1000 }" @change="onTableChange">
:data-source="listData"
:loading="loading"
:pagination="paginationState"
:scroll="{ x: 1000 }"
@change="onTableChange">
<template #bodyCell="{ column, record }"> <template #bodyCell="{ column, record }">
<template v-if="'statusType' === column.key">
<!--状态-->
<a-tag
v-if="statusTypeEnum.is('enabled', record.status)"
color="processing">
{{ statusTypeEnum.getDesc(record.status) }}
</a-tag>
<!--状态-->
<a-tag
v-if="statusTypeEnum.is('disabled', record.status)"
color="processing">
{{ statusTypeEnum.getDesc(record.status) }}
</a-tag>
</template>
<template v-if="'createAt' === column.key"> <template v-if="column.dataIndex === 'avatar'">
{{ formatUtcDateTime(record.created_at) }} <a-image :width="60" :src="config('http.apiBasic') + record.avatar || $imageErr.imgErr" />
</template>
<template v-if="column.dataIndex === 'type'">
<span>{{ customersEnum.getName(record.type) }}</span>
</template>
<template v-if="column.dataIndex === 'grade'">
<span>{{ record.grade+'级' }}</span>
</template>
<template v-if="column.dataIndex === 'birthday'">
<span>{{ record.birthday&&dayjs(record.birthday).format('YYYY-MM-DD') }}</span>
</template>
<template v-if="'status' === column.dataIndex">
<a-tag v-if="record.status === 'enabled'" :color="'green'">启用</a-tag>
<a-tag v-if="record.status === 'disabled'" :color="'red'">停用</a-tag>
</template> </template>
<template v-if="'action' === column.key"> <template v-if="'action' === column.key">
<x-action-button @click="$refs.editDialogRef.handleEdit(record)"> <x-action-button @click="$refs.editDialogRef.handleEdit(record)">
<a-tooltip> <a-tooltip>
<template #title> {{ $t('pages.system.role.edit') }}</template> <template #title> {{ $t('pages.system.user.edit') }}</template>
<edit-outlined /> <edit-outlined /> </a-tooltip></x-action-button>
</a-tooltip> <x-action-button @click="handleDelete(record)">
</x-action-button>
<x-action-button @click="handleRemove(record)">
<a-tooltip> <a-tooltip>
<template #title> {{ $t('pages.system.delete') }}</template> <template #title>{{ $t('pages.system.delete') }}</template>
<delete-outlined style="color: #ff4d4f" /> <delete-outlined style="color: #ff4d4f" /> </a-tooltip></x-action-button>
</a-tooltip>
</x-action-button>
</template> </template>
</template> </template>
</a-table> </a-table>
@ -110,9 +77,7 @@
</a-col> </a-col>
</a-row> </a-row>
<edit-dialog <edit-dialog ref="editDialogRef" @ok="onOk"></edit-dialog>
ref="editDialogRef"
@ok="onOk"></edit-dialog>
</template> </template>
<script setup> <script setup>
@ -121,44 +86,47 @@ import { ref } from 'vue'
import apis from '@/apis' import apis from '@/apis'
import { formatUtcDateTime } from '@/utils/util' import { formatUtcDateTime } from '@/utils/util'
import { config } from '@/config' import { config } from '@/config'
import { statusTypeEnum } from '@/enums/system' import dayjs from 'dayjs'
import { usePagination, useForm } from '@/hooks' import { usePagination } from '@/hooks'
import { customersEnum, areaEnum } from "@/enums/useEnum"
import EditDialog from './components/EditDialog.vue' import EditDialog from './components/EditDialog.vue'
import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons-vue' import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons-vue'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
defineOptions({ defineOptions({
name: 'systemRole', name: 'agent',
}) })
const { t } = useI18n() // t const { t } = useI18n() // t
const columns = [ const columns = [
{ title: t('pages.system.role.form.code'), dataIndex: 'code', width: 240 }, { title: '头像', dataIndex: 'avatar', width: 120, align: 'center' },
{ title: t('pages.system.role.form.name'), dataIndex: 'name' }, { title: '姓名', dataIndex: 'name', width: 120, align: 'center' },
{ title: t('pages.system.role.form.status'), dataIndex: 'status', key: 'statusType', width: 80 }, { title: '电话', dataIndex: 'phone', width: 120, align: 'center' },
{ title: t('pages.system.role.form.sequence'), dataIndex: 'sequence', width: 100 }, { title: '出生日期', dataIndex: 'birthday', width: 120, align: 'center' },
{ title: t('pages.system.role.form.created_at'), key: 'createAt', fixed: 'right', width: 120 }, { title: '当前积分', dataIndex: 'currentbalance', width: 120 },
{ title: t('button.action'), key: 'action', fixed: 'right', width: 120 }, { title: '累计积分', dataIndex: 'balance', width: 120 },
{ title: '等级', dataIndex: 'grade', width: 60, align: 'center' },
{ title: '类型', dataIndex: 'type', width: 60, align: 'center' },
{ title: '状态', dataIndex: 'status', key: 'introduce', width: 60, align: 'center' },
{ title: t('button.action'), key: 'action', fixed: 'right', width: 100, align: 'center' },
] ]
const { listData, loading, showLoading, hideLoading, paginationState, searchFormData, resetPagination } = const { listData, loading, showLoading, hideLoading, paginationState, resetPagination, searchFormData } =
usePagination() usePagination()
const { resetForm } = useForm()
const editDialogRef = ref() const editDialogRef = ref()
getPageList() getPageList()
/** /**
* 获取用户列 * 获取格数据
* @returns {Promise<void>} * @returns {Promise<void>}
*/ */
async function getPageList() { async function getPageList() {
try { try {
showLoading() showLoading()
const { pageSize, current } = paginationState const { pageSize, current } = paginationState
const { success, data, total } = await apis.role const { success, data, total } = await apis.customer
.getRoleList({ .getProjectList({
pageSize, pageSize,
page: current, page: current,
type:'intermediary',
...searchFormData.value, ...searchFormData.value,
}) })
.catch(() => { .catch(() => {
@ -175,18 +143,18 @@ async function getPageList() {
} }
/** /**
* *
*/ */
function handleRemove({ id }) { function handleDelete({ id }) {
Modal.confirm({ Modal.confirm({
title: t('pages.system.role.delTip'), title: t('pages.system.user.delTip'),
content: t('button.confirm'), content: t('button.confirm'),
okText: t('button.confirm'), okText: t('button.confirm'),
onOk: () => { onOk: () => {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
;(async () => { ; (async () => {
try { try {
const { success } = await apis.role.delRole(id).catch(() => { const { success } = await apis.customer.delItem(id).catch(() => {
throw new Error() throw new Error()
}) })
if (config('http.code.success') === success) { if (config('http.code.success') === success) {
@ -212,6 +180,13 @@ function onTableChange({ current, pageSize }) {
getPageList() getPageList()
} }
/**
* 搜索
*/
function handleSearch() {
resetPagination()
getPageList()
}
/** /**
* 重置 * 重置
*/ */
@ -220,16 +195,6 @@ function handleResetSearch() {
resetPagination() resetPagination()
getPageList() getPageList()
} }
/**
* 搜索
*/
function handleSearch() {
resetForm()
resetPagination()
getPageList()
}
/** /**
* 编辑完成 * 编辑完成
*/ */

View File

@ -1,169 +0,0 @@
<template>
<a-card
:body-style="{ height: 'calc(100% - 56px - 47px)', padding: 0 }"
:style="{
position: 'sticky',
top: appStore.mainOffsetTop,
height: appStore.mainHeight,
}">
<template #title>
<a-input-search placeholder="搜索部门"></a-input-search>
</template>
<x-scrollbar class="pa-8-2">
<a-spin :spinning="loading">
<a-tree
block-node
:selected-keys="selectedKeys"
:tree-data="listData"
:field-names="{ key: 'id', children: 'children' }"
@select="onSelect">
<template #title="{ title }">
<span class="ant-tree-title__name">{{ title }}</span>
<span class="ant-tree-title__actions">
<a-dropdown
:trigger="['click']"
@click.stop>
<x-action-button>
<more-outlined></more-outlined>
</x-action-button>
<template #overlay>
<a-menu>
<a-menu-item @click="$refs.editDepartmentDialogRef.handleEdit()">
添加子部门
</a-menu-item>
<a-menu-item @click="$refs.editDepartmentDialogRef.handleEdit()">
编辑
</a-menu-item>
<a-menu-item @click="handleDelete">删除</a-menu-item>
</a-menu>
</template>
</a-dropdown>
</span>
</template>
</a-tree>
<empty
v-if="!listData.length"
:image="Empty.PRESENTED_IMAGE_SIMPLE"></empty>
</a-spin>
</x-scrollbar>
<template #actions>
<span @click="$refs.editDepartmentDialogRef.handleCreate()">
<plus-outlined></plus-outlined>
新建部门
</span>
</template>
</a-card>
<edit-department-dialog
ref="editDepartmentDialogRef"
@ok="onOk"></edit-department-dialog>
</template>
<script setup>
import { useAppStore } from '@/store'
import { ref, watch } from 'vue'
import { usePagination } from '@/hooks'
import apis from '@/apis'
import { Empty, Modal, message } from 'ant-design-vue'
import { config } from '@/config'
import { head, get, find } from 'lodash-es'
import { MoreOutlined, PlusOutlined } from '@ant-design/icons-vue'
import EditDepartmentDialog from './EditDepartmentDialog.vue'
const props = defineProps({
value: {
type: String,
default: '',
},
})
const emit = defineEmits(['change', 'update:value'])
const appStore = useAppStore()
const { listData, loading, showLoading, hideLoading } = usePagination()
const editDepartmentDialogRef = ref()
const selectedKeys = ref([props.value])
watch(
() => props.value,
(val) => {
if (val === selectedKeys.value?.[0]) return
selectedKeys.value = [val]
}
)
getList()
/**
* 获取列表
* @returns {Promise<void>}
*/
async function getList() {
try {
showLoading()
const { code, data } = await apis.common.getPageList().catch(() => {
throw new Error()
})
hideLoading()
if (config('http.code.success') === code) {
const { records } = data
listData.value = records
if (listData.value.length) {
selectedKeys.value = [get(head(listData.value), 'id')]
trigger()
}
}
} catch (error) {
hideLoading()
}
}
/**
* 删除
*/
function handleDelete({ id }) {
Modal.confirm({
title: '删除提示',
content: '确认删除?',
okText: '确认',
onOk: () => {
return new Promise((resolve, reject) => {
;(async () => {
try {
const { code } = await apis.common.del(id).catch(() => {
throw new Error()
})
if (config('http.code.success') === code) {
resolve()
message.success('删除成功')
await getList()
}
} catch (error) {
reject()
}
})()
})
},
})
}
function onSelect(keys) {
if (!keys.length) return
selectedKeys.value = keys
trigger()
}
async function onOk() {
await getList()
}
function trigger() {
const value = head(selectedKeys.value)
const record = find(listData.value, { id: value })
emit('update:value', value)
emit('change', record)
}
</script>
<style lang="less" scoped></style>

View File

@ -1,131 +0,0 @@
<template>
<a-modal
:open="modal.open"
:title="modal.title"
:width="480"
:confirm-loading="modal.confirmLoading"
:after-close="onAfterClose"
:cancel-text="cancelText"
@ok="handleOk"
@cancel="handleCancel">
<a-form
ref="formRef"
:model="formData"
:rules="formRules"
:label-col="{ style: { width: '90px' } }">
<a-form-item
label="部门名称"
name="name">
<a-input v-model:value="formData.name"></a-input>
</a-form-item>
<a-form-item
label="上级部门"
name="parent_id">
<a-tree-select v-model:value="formData.parent_id"></a-tree-select>
</a-form-item>
<a-form-item
label="部门负责人"
name="name">
<a-input v-model:value="formData.name"></a-input>
</a-form-item>
</a-form>
</a-modal>
</template>
<script setup>
import { cloneDeep } from 'lodash-es'
import { ref } from 'vue'
import { config } from '@/config'
import apis from '@/apis'
import { useForm, useModal } from '@/hooks'
const emit = defineEmits(['ok'])
const { modal, showModal, hideModal, showLoading, hideLoading } = useModal()
const { formRecord, formData, formRef, formRules, resetForm } = useForm()
const cancelText = ref('取消')
/**
* 新建
*/
function handleCreate() {
showModal({
type: 'create',
title: '新建部门',
})
}
/**
* 编辑
*/
function handleEdit(record = {}) {
showModal({
type: 'edit',
title: '编辑部门',
})
formRecord.value = record
formData.value = cloneDeep(record)
}
/**
* 确定
*/
function handleOk() {
formRef.value
.validateFields()
.then(async (values) => {
try {
showLoading()
const params = {
...values,
}
let result = null
switch (modal.value.type) {
case 'create':
result = await apis.common.create(params).catch(() => {
throw new Error()
})
break
case 'edit':
result = await apis.common.update(params).catch(() => {
throw new Error()
})
break
}
hideLoading()
if (config('http.code.success') === result?.code) {
hideModal()
emit('ok')
}
} catch (error) {
hideLoading()
}
})
.catch(() => {
hideLoading()
})
}
/**
* 取消
*/
function handleCancel() {
hideModal()
}
/**
* 关闭后
*/
function onAfterClose() {
resetForm()
cancelText.value = '取消'
hideLoading()
}
defineExpose({
handleCreate,
handleEdit,
})
</script>
<style lang="less" scoped></style>

View File

@ -1,155 +1,111 @@
<template> <template>
<a-modal <a-modal :open="modal.open" :title="modal.title" :width="640" :confirm-loading="modal.confirmLoading"
:open="modal.open" :after-close="onAfterClose" :cancel-text="cancelText" :ok-text="okText" @ok="handleOk" @cancel="handleCancel">
:title="modal.title" <a-spin :spinning="spining">
:width="640" <a-form ref="formRef" :model="formData" :rules="formRules">
:confirm-loading="modal.confirmLoading" <a-card class="mb-8-2">
:after-close="onAfterClose" <a-row :gutter="12">
:cancel-text="cancelText" <a-col :span="12">
:ok-text="okText" <a-form-item :label="'客户名称'" name="name">
@ok="handleOk" <a-input :placeholder="'请输入客户名称'" v-model:value="formData.name"></a-input>
@cancel="handleCancel"> </a-form-item>
<a-form </a-col>
ref="formRef" <a-col :span="12">
:model="formData" <a-form-item :label="'联系电话'" name="phone">
:rules="formRules" <a-input :placeholder="'请输入联系电话'" v-model:value="formData.phone"></a-input>
:label-col="{ style: { width: '90px' } }"> </a-form-item>
<a-card class="mb-8-2"> </a-col>
<a-row :gutter="12"> <a-col :span="12">
<a-col :span="12"> <a-form-item :label="'出生日期'" name="birthday">
<a-form-item <a-date-picker v-model:value="formData.birthday" style="width: 100%;" />
:label="$t('pages.system.user.form.username')" </a-form-item>
name="username"> </a-col>
<a-input <a-col :span="12">
:placeholder="$t('pages.system.user.form.username.placeholder')" <a-form-item :label="'所属区域'" name="areaId">
v-model:value="formData.username"></a-input> <a-select ref="select" v-model:value="formData.areaId">
</a-form-item> <a-select-option v-for="item in areaEnum.getAll()" :value="item.value">{{
</a-col> item.name }}</a-select-option>
<a-col :span="12"> </a-select>
<a-form-item </a-form-item>
:label="$t('pages.system.user.form.password')" </a-col>
name="password"> <a-col :span="12">
<a-input-password <a-form-item :label="'客户等级'" name="grade">
v-model:value="formData.password" <a-select ref="select" v-model:value="formData.grade">
:placeholder="$t('pages.system.user.form.password.placeholder')" /> <a-select-option v-for="item in 8" :value="item">{{ item + '' }}</a-select-option>
</a-form-item> </a-select>
</a-col> </a-form-item>
</a-row> </a-col>
<a-row :gutter="12"> <a-col :span="12">
<a-col :span="12"> <a-form-item :label="'当前积分'" name="currentbalance">
<a-form-item <a-input-number :placeholder="'请输入当前积分'" v-model:value="formData.currentbalance"
:label="$t('pages.system.user.form.name')" style="width: 100%;"></a-input-number>
name="name"> </a-form-item>
<a-input </a-col>
:placeholder="$t('pages.system.user.form.name.placeholder')" <a-col :span="12">
v-model:value="formData.name"></a-input> <a-form-item :label="'历史积分'" name="balance">
</a-form-item> <a-input-number :placeholder="'请输入历史积分'" v-model:value="formData.balance"
</a-col> style="width: 100%;"></a-input-number>
<a-col :span="12"> </a-form-item>
<a-form-item </a-col>
:label="$t('pages.system.user.form.roles')"
name="roles">
<a-select
v-model:value="formData.roles"
mode="multiple"
style="width: 100%"
:placeholder="$t('pages.system.user.form.roles.placeholder')"
:options="roles"
@change="handleChange"></a-select>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="12"> <a-col :span="12">
<a-col :span="12"> <a-form-item :label="'客户类型'" name="type">
<a-form-item <a-select ref="select" v-model:value="formData.type">
:label="$t('pages.system.user.form.phone')" <a-select-option v-for="item in customersEnum.getAll()" :value="item.value">{{
type="tel" item.name }}</a-select-option>
name="phone"> </a-select>
<a-input </a-form-item>
:placeholder="$t('pages.system.user.form.phone.placeholder')" </a-col>
type="tel" <a-col :span="12">
v-model:value="formData.phone"></a-input> <a-form-item :label="'状态'" name="status">
</a-form-item> <a-radio-group v-model:value="formData.status" :options="[
</a-col> { label: '启用', value: 'enabled' },
<a-col :span="12"> { label: '停用', value: 'disabled' },
<a-form-item
:label="$t('pages.system.user.form.email')"
type="email"
name="email">
<a-input
:placeholder="$t('pages.system.user.form.email.placeholder')"
type="email"
v-model:value="formData.email"></a-input>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="12">
<a-col :span="24">
<a-form-item
:label="$t('pages.system.user.form.remark')"
name="remark">
<a-textarea
:placeholder="$t('pages.system.user.form.remark.placeholder')"
v-model:value="formData.remark"></a-textarea>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="12">
<a-col :span="24">
<a-form-item
:label="$t('pages.system.user.form.status')"
name="status">
<a-radio-group
v-model:value="formData.status"
:options="[
{ label: $t('pages.system.user.form.status.activated'), value: 'activated' },
{ label: $t('pages.system.user.form.status.freezed'), value: 'freezed' },
]"></a-radio-group> ]"></a-radio-group>
</a-form-item> </a-form-item>
</a-col> </a-col>
</a-row> <a-col :span="24">
</a-card> <a-form-item :label="'头像'" name="fileList">
</a-form> <gx-upload v-model="formData.fileList" accept-types=".jpg,.png,.webp" :fileNumber="1"
@uploadSuccess="uploadSuccess" />
</a-form-item>
</a-col>
</a-row>
</a-card>
</a-form>
</a-spin>
</a-modal> </a-modal>
</template> </template>
<script setup> <script setup>
import { cloneDeep } from 'lodash-es' import { cloneDeep } from 'lodash-es'
import { ref } from 'vue' import { ref, onBeforeMount } from 'vue'
import { config } from '@/config' import { config } from '@/config'
import apis from '@/apis' import apis from '@/apis'
import { useForm, useModal } from '@/hooks' import { useForm, useModal, useSpining } from '@/hooks'
import { message } from 'ant-design-vue' import { message } from 'ant-design-vue'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import dayjs from 'dayjs'
import GxUpload from '@/components/GxUpload/index.vue'
import { customersEnum, areaEnum } from "@/enums/useEnum"
const emit = defineEmits(['ok']) const emit = defineEmits(['ok'])
const { t } = useI18n() // t const { t } = useI18n() // t
const { modal, showModal, hideModal, showLoading, hideLoading } = useModal() const { modal, showModal, hideModal, showLoading, hideLoading } = useModal()
const { formRecord, formData, formRef, formRules, resetForm } = useForm() const { formRecord, formData, formRef, formRules, resetForm } = useForm()
const { spining, showSpining, hideSpining } = useSpining()
const cancelText = ref(t('button.cancel')) const cancelText = ref(t('button.cancel'))
const okText = ref(t('button.confirm')) const okText = ref(t('button.confirm'))
const rolesValue = ref([]) const fileList = ref([])
const roles = ref([])
formRules.value = { formRules.value = {
name: { required: true, message: t('pages.system.user.form.username.placeholder') }, name: [{ required: true, message: '请输入客户名称' }],
username: { required: true, message: t('pages.system.user.form.code.placeholder') }, status: [{ required: true, message: '请选择状态', trigger: 'change' }],
status: { required: true, message: t('pages.system.user.form.status') }, areaId: [{ required: true, message: '请选择所属区域', trigger: 'change' }],
roles: [{ required: true, message: t('pages.system.user.form.roles.placeholder'), trigger: 'change' }], type: [{ required: true, message: '请选择客户类型', trigger: 'change' }]
} }
/** onBeforeMount(() => {
* 请求角色 formData.value.areaId = 1
*/ })
getRole()
/**
* select 选择框
*/
const handleChange = (value) => {
rolesValue.value = value
}
/** /**
* 新建 * 新建
@ -157,122 +113,87 @@ const handleChange = (value) => {
function handleCreate() { function handleCreate() {
showModal({ showModal({
type: 'create', type: 'create',
title: t('pages.system.user.add'), title: '新增客户',
}) })
// initData()
formData.value.status = 'enabled'
} }
async function getRole() {
const { success, data } = await apis.role.getRoleList().catch(() => {
throw new Error()
})
if (!success) {
return message.error('当前角色信息错误')
}
let roleArr = []
if (data.length) {
data.forEach((item) => {
roleArr.push({
label: item.name,
value: item.id,
})
})
}
roles.value = roleArr
}
/** /**
* 编辑 * 编辑
*/ */
async function handleEdit(record = {}) { async function handleEdit(record = {}) {
showModal({ showModal({
type: 'edit', type: 'edit',
title: t('pages.system.user.edit'), title: '编辑客户',
}) })
const { data, success } = await apis.users.getUsers(record.id).catch() try {
if (!success) { showSpining()
hideModal() const { data, success } = await apis.customer.getItem(record.id).catch()
return if (!success) {
} hideModal()
let roles = [] return
if (data.roles) { }
roles = formatArr(data.roles, 'edit') hideSpining()
formData.value = { ...data }
formData.value.birthday = dayjs(data.birthday)
if (data.avatar) {
formData.value.fileList = [config('http.apiBasic') + data.avatar]
}
} catch (error) {
message.error({ content: error.message })
hideSpining()
} }
data.roles = roles
formRecord.value = data
formData.value = cloneDeep(data)
} }
const uploadSuccess = (data) => {
fileList.value.push(data)
}
/** /**
* 确定 * 确定
*/ */
function handleOk() { function handleOk() {
formRef.value formRef.value.validateFields().then(async (values) => {
.validateFields() try {
.then(async (values) => { showLoading()
try { const params = {
showLoading() ...values,
avatar: fileList.value[0]
const params = {
...values,
roles: formatArr(rolesValue.value),
}
let result = null
switch (modal.value.type) {
case 'create':
result = await apis.users.createUsers(params).catch(() => {
throw new Error()
})
break
case 'edit':
result = await apis.users.updateUsers(formData.value.id, params).catch(() => {
throw new Error()
})
break
}
hideLoading()
if (config('http.code.success') === result?.success) {
hideModal()
emit('ok')
}
} catch (error) {
hideLoading()
} }
}) let result = null
.catch(() => { switch (modal.value.type) {
case 'create':
result = await apis.customer.createProject(params).catch((error) => {
throw new Error(error)
})
break
case 'edit':
result = await apis.customer.updateItem(formData.value.id, params).catch(() => {
throw new Error(error)
})
break
}
hideLoading()
if (config('http.code.success') === result?.success) {
hideModal()
emit('ok')
}
} catch (error) {
message.error({ content: error.message })
hideLoading()
}
})
.catch((e) => {
hideLoading() hideLoading()
}) })
} }
/**
* 对权限组 过数据格式
*/
function formatArr(data, type = '') {
const rolesArr = []
data.forEach((item) => {
roles.value.forEach((r) => {
if (type === 'edit') {
if (item.role_id === r.value) {
rolesArr.push({
value: item.role_id,
label: r.label,
})
return
}
} else if (r.value === item) {
rolesArr.push({
role_id: item,
role_name: r.label,
})
return
}
})
})
return rolesArr
}
/** /**
* 取消 * 取消
*/ */
function handleCancel() { function handleCancel() {
formData.value.areaId = 1
hideModal() hideModal()
} }

View File

@ -1,44 +1,27 @@
<template> <template>
<x-search-bar class="mb-8-2"> <x-search-bar class="mb-8-2">
<template #default="{ gutter, colSpan }"> <template #default="{ gutter, colSpan }">
<a-form <a-form :model="searchFormData" layout="inline">
:label-col="{ style: { width: '100px' } }"
:model="searchFormData"
layout="inline">
<a-row :gutter="gutter"> <a-row :gutter="gutter">
<a-col v-bind="colSpan"> <a-col v-bind="colSpan">
<a-form-item <a-form-item label="姓名" name="name">
:label="$t('pages.system.role.form.name')" <a-input placeholder="请输入客户姓名" v-model:value="searchFormData.name"></a-input>
name="name">
<a-input
:placeholder="$t('pages.system.role.form.code.placeholder')"
v-model:value="searchFormData.name"></a-input>
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col v-bind="colSpan"> <a-col v-bind="colSpan">
<a-form-item name="code"> <a-form-item label="状态" name="status">
<template #label> <a-select v-model:value="searchFormData.status" allowClear>
{{ $t('pages.system.role.form.code') }} <a-select-option value="">全部</a-select-option>
<a-tooltip :title="$t('pages.system.role.form.code')"> <a-select-option value="enabled">启用</a-select-option>
<question-circle-outlined class="ml-4-1 color-placeholder" /> <a-select-option value="disabled">停用</a-select-option>
</a-tooltip> </a-select>
</template>
<a-input
:placeholder="$t('pages.system.role.form.code.placeholder')"
v-model:value="searchFormData.code"></a-input>
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col class="align-right" v-bind="colSpan">
<a-col
class="align-right"
v-bind="colSpan">
<a-space> <a-space>
<a-button @click="handleResetSearch">{{ $t('button.reset') }}</a-button> <a-button @click="handleResetSearch">{{ $t('button.reset') }}</a-button>
<a-button <a-button ghost type="primary" @click="handleSearch">
ghost
type="primary"
@click="handleSearch">
{{ $t('button.search') }} {{ $t('button.search') }}
</a-button> </a-button>
</a-space> </a-space>
@ -46,63 +29,47 @@
</a-row> </a-row>
</a-form> </a-form>
</template> </template>
</x-search-bar> </x-search-bar>
<a-row <a-row :gutter="8" :wrap="false">
:gutter="8"
:wrap="false">
<a-col flex="auto"> <a-col flex="auto">
<a-card type="flex"> <a-card type="flex">
<x-action-bar class="mb-8-2"> <!-- <x-action-bar class="mb-8-2">
<a-button <a-button type="primary" @click="$refs.editDialogRef.handleCreate()">
v-action="'add'"
type="primary"
@click="$refs.editDialogRef.handleCreate()">
<template #icon> <template #icon>
<plus-outlined></plus-outlined> <plus-outlined></plus-outlined>
</template> </template>
{{ $t('pages.system.role.add') }} 新增客户
</a-button> </a-button>
</x-action-bar> </x-action-bar> -->
<a-table <a-table :columns="columns" :data-source="listData" bordered="true" :loading="loading"
:columns="columns" :pagination="paginationState" :scroll="{ x: 1000 }" @change="onTableChange">
:data-source="listData"
:loading="loading"
:pagination="paginationState"
:scroll="{ x: 1000 }"
@change="onTableChange">
<template #bodyCell="{ column, record }"> <template #bodyCell="{ column, record }">
<template v-if="'statusType' === column.key">
<!--状态-->
<a-tag
v-if="statusTypeEnum.is('enabled', record.status)"
color="processing">
{{ statusTypeEnum.getDesc(record.status) }}
</a-tag>
<!--状态-->
<a-tag
v-if="statusTypeEnum.is('disabled', record.status)"
color="processing">
{{ statusTypeEnum.getDesc(record.status) }}
</a-tag>
</template>
<template v-if="'createAt' === column.key"> <template v-if="column.dataIndex === 'avatar'">
{{ formatUtcDateTime(record.created_at) }} <a-image :width="60" :src="config('http.apiBasic') + record.avatar || $imageErr.imgErr" />
</template>
<template v-if="column.dataIndex === 'type'">
<span>{{ customersEnum.getName(record.type) }}</span>
</template>
<template v-if="column.dataIndex === 'grade'">
<span>{{ record.grade+'级' }}</span>
</template>
<template v-if="column.dataIndex === 'birthday'">
<span>{{ record.birthday&&dayjs(record.birthday).format('YYYY-MM-DD') }}</span>
</template>
<template v-if="'status' === column.dataIndex">
<a-tag v-if="record.status === 'enabled'" :color="'green'">启用</a-tag>
<a-tag v-if="record.status === 'disabled'" :color="'red'">停用</a-tag>
</template> </template>
<template v-if="'action' === column.key"> <template v-if="'action' === column.key">
<x-action-button @click="$refs.editDialogRef.handleEdit(record)"> <x-action-button @click="$refs.editDialogRef.handleEdit(record)">
<a-tooltip> <a-tooltip>
<template #title> {{ $t('pages.system.role.edit') }}</template> <template #title> {{ $t('pages.system.user.edit') }}</template>
<edit-outlined /> <edit-outlined /> </a-tooltip></x-action-button>
</a-tooltip> <x-action-button @click="handleDelete(record)">
</x-action-button>
<x-action-button @click="handleRemove(record)">
<a-tooltip> <a-tooltip>
<template #title> {{ $t('pages.system.delete') }}</template> <template #title>{{ $t('pages.system.delete') }}</template>
<delete-outlined style="color: #ff4d4f" /> <delete-outlined style="color: #ff4d4f" /> </a-tooltip></x-action-button>
</a-tooltip>
</x-action-button>
</template> </template>
</template> </template>
</a-table> </a-table>
@ -110,9 +77,7 @@
</a-col> </a-col>
</a-row> </a-row>
<edit-dialog <edit-dialog ref="editDialogRef" @ok="onOk"></edit-dialog>
ref="editDialogRef"
@ok="onOk"></edit-dialog>
</template> </template>
<script setup> <script setup>
@ -121,44 +86,47 @@ import { ref } from 'vue'
import apis from '@/apis' import apis from '@/apis'
import { formatUtcDateTime } from '@/utils/util' import { formatUtcDateTime } from '@/utils/util'
import { config } from '@/config' import { config } from '@/config'
import { statusTypeEnum } from '@/enums/system' import dayjs from 'dayjs'
import { usePagination, useForm } from '@/hooks' import { usePagination } from '@/hooks'
import { customersEnum, areaEnum } from "@/enums/useEnum"
import EditDialog from './components/EditDialog.vue' import EditDialog from './components/EditDialog.vue'
import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons-vue' import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons-vue'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
defineOptions({ defineOptions({
name: 'systemRole', name: 'potential',
}) })
const { t } = useI18n() // t const { t } = useI18n() // t
const columns = [ const columns = [
{ title: t('pages.system.role.form.code'), dataIndex: 'code', width: 240 }, { title: '头像', dataIndex: 'avatar', width: 120, align: 'center' },
{ title: t('pages.system.role.form.name'), dataIndex: 'name' }, { title: '姓名', dataIndex: 'name', width: 120, align: 'center' },
{ title: t('pages.system.role.form.status'), dataIndex: 'status', key: 'statusType', width: 80 }, { title: '电话', dataIndex: 'phone', width: 120, align: 'center' },
{ title: t('pages.system.role.form.sequence'), dataIndex: 'sequence', width: 100 }, { title: '出生日期', dataIndex: 'birthday', width: 120, align: 'center' },
{ title: t('pages.system.role.form.created_at'), key: 'createAt', fixed: 'right', width: 120 }, { title: '当前积分', dataIndex: 'currentbalance', width: 120 },
{ title: t('button.action'), key: 'action', fixed: 'right', width: 120 }, { title: '累计积分', dataIndex: 'balance', width: 120 },
{ title: '等级', dataIndex: 'grade', width: 60, align: 'center' },
{ title: '类型', dataIndex: 'type', width: 100, align: 'center' },
{ title: '状态', dataIndex: 'status', key: 'introduce', width: 60, align: 'center' },
{ title: t('button.action'), key: 'action', fixed: 'right', width: 100, align: 'center' },
] ]
const { listData, loading, showLoading, hideLoading, paginationState, searchFormData, resetPagination } = const { listData, loading, showLoading, hideLoading, paginationState, resetPagination, searchFormData } =
usePagination() usePagination()
const { resetForm } = useForm()
const editDialogRef = ref() const editDialogRef = ref()
getPageList() getPageList()
/** /**
* 获取用户列 * 获取格数据
* @returns {Promise<void>} * @returns {Promise<void>}
*/ */
async function getPageList() { async function getPageList() {
try { try {
showLoading() showLoading()
const { pageSize, current } = paginationState const { pageSize, current } = paginationState
const { success, data, total } = await apis.role const { success, data, total } = await apis.customer
.getRoleList({ .getProjectList({
pageSize, pageSize,
page: current, page: current,
type:'closer',
...searchFormData.value, ...searchFormData.value,
}) })
.catch(() => { .catch(() => {
@ -175,18 +143,18 @@ async function getPageList() {
} }
/** /**
* *
*/ */
function handleRemove({ id }) { function handleDelete({ id }) {
Modal.confirm({ Modal.confirm({
title: t('pages.system.role.delTip'), title: t('pages.system.user.delTip'),
content: t('button.confirm'), content: t('button.confirm'),
okText: t('button.confirm'), okText: t('button.confirm'),
onOk: () => { onOk: () => {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
;(async () => { ; (async () => {
try { try {
const { success } = await apis.role.delRole(id).catch(() => { const { success } = await apis.customer.delItem(id).catch(() => {
throw new Error() throw new Error()
}) })
if (config('http.code.success') === success) { if (config('http.code.success') === success) {
@ -212,6 +180,13 @@ function onTableChange({ current, pageSize }) {
getPageList() getPageList()
} }
/**
* 搜索
*/
function handleSearch() {
resetPagination()
getPageList()
}
/** /**
* 重置 * 重置
*/ */
@ -220,16 +195,6 @@ function handleResetSearch() {
resetPagination() resetPagination()
getPageList() getPageList()
} }
/**
* 搜索
*/
function handleSearch() {
resetForm()
resetPagination()
getPageList()
}
/** /**
* 编辑完成 * 编辑完成
*/ */

View File

@ -1,169 +0,0 @@
<template>
<a-card
:body-style="{ height: 'calc(100% - 56px - 47px)', padding: 0 }"
:style="{
position: 'sticky',
top: appStore.mainOffsetTop,
height: appStore.mainHeight,
}">
<template #title>
<a-input-search placeholder="搜索部门"></a-input-search>
</template>
<x-scrollbar class="pa-8-2">
<a-spin :spinning="loading">
<a-tree
block-node
:selected-keys="selectedKeys"
:tree-data="listData"
:field-names="{ key: 'id', children: 'children' }"
@select="onSelect">
<template #title="{ title }">
<span class="ant-tree-title__name">{{ title }}</span>
<span class="ant-tree-title__actions">
<a-dropdown
:trigger="['click']"
@click.stop>
<x-action-button>
<more-outlined></more-outlined>
</x-action-button>
<template #overlay>
<a-menu>
<a-menu-item @click="$refs.editDepartmentDialogRef.handleEdit()">
添加子部门
</a-menu-item>
<a-menu-item @click="$refs.editDepartmentDialogRef.handleEdit()">
编辑
</a-menu-item>
<a-menu-item @click="handleDelete">删除</a-menu-item>
</a-menu>
</template>
</a-dropdown>
</span>
</template>
</a-tree>
<empty
v-if="!listData.length"
:image="Empty.PRESENTED_IMAGE_SIMPLE"></empty>
</a-spin>
</x-scrollbar>
<template #actions>
<span @click="$refs.editDepartmentDialogRef.handleCreate()">
<plus-outlined></plus-outlined>
新建部门
</span>
</template>
</a-card>
<edit-department-dialog
ref="editDepartmentDialogRef"
@ok="onOk"></edit-department-dialog>
</template>
<script setup>
import { useAppStore } from '@/store'
import { ref, watch } from 'vue'
import { usePagination } from '@/hooks'
import apis from '@/apis'
import { Empty, Modal, message } from 'ant-design-vue'
import { config } from '@/config'
import { head, get, find } from 'lodash-es'
import { MoreOutlined, PlusOutlined } from '@ant-design/icons-vue'
import EditDepartmentDialog from './EditDepartmentDialog.vue'
const props = defineProps({
value: {
type: String,
default: '',
},
})
const emit = defineEmits(['change', 'update:value'])
const appStore = useAppStore()
const { listData, loading, showLoading, hideLoading } = usePagination()
const editDepartmentDialogRef = ref()
const selectedKeys = ref([props.value])
watch(
() => props.value,
(val) => {
if (val === selectedKeys.value?.[0]) return
selectedKeys.value = [val]
}
)
getList()
/**
* 获取列表
* @returns {Promise<void>}
*/
async function getList() {
try {
showLoading()
const { code, data } = await apis.common.getPageList().catch(() => {
throw new Error()
})
hideLoading()
if (config('http.code.success') === code) {
const { records } = data
listData.value = records
if (listData.value.length) {
selectedKeys.value = [get(head(listData.value), 'id')]
trigger()
}
}
} catch (error) {
hideLoading()
}
}
/**
* 删除
*/
function handleDelete({ id }) {
Modal.confirm({
title: '删除提示',
content: '确认删除?',
okText: '确认',
onOk: () => {
return new Promise((resolve, reject) => {
;(async () => {
try {
const { code } = await apis.common.del(id).catch(() => {
throw new Error()
})
if (config('http.code.success') === code) {
resolve()
message.success('删除成功')
await getList()
}
} catch (error) {
reject()
}
})()
})
},
})
}
function onSelect(keys) {
if (!keys.length) return
selectedKeys.value = keys
trigger()
}
async function onOk() {
await getList()
}
function trigger() {
const value = head(selectedKeys.value)
const record = find(listData.value, { id: value })
emit('update:value', value)
emit('change', record)
}
</script>
<style lang="less" scoped></style>

View File

@ -1,131 +0,0 @@
<template>
<a-modal
:open="modal.open"
:title="modal.title"
:width="480"
:confirm-loading="modal.confirmLoading"
:after-close="onAfterClose"
:cancel-text="cancelText"
@ok="handleOk"
@cancel="handleCancel">
<a-form
ref="formRef"
:model="formData"
:rules="formRules"
:label-col="{ style: { width: '90px' } }">
<a-form-item
label="部门名称"
name="name">
<a-input v-model:value="formData.name"></a-input>
</a-form-item>
<a-form-item
label="上级部门"
name="parent_id">
<a-tree-select v-model:value="formData.parent_id"></a-tree-select>
</a-form-item>
<a-form-item
label="部门负责人"
name="name">
<a-input v-model:value="formData.name"></a-input>
</a-form-item>
</a-form>
</a-modal>
</template>
<script setup>
import { cloneDeep } from 'lodash-es'
import { ref } from 'vue'
import { config } from '@/config'
import apis from '@/apis'
import { useForm, useModal } from '@/hooks'
const emit = defineEmits(['ok'])
const { modal, showModal, hideModal, showLoading, hideLoading } = useModal()
const { formRecord, formData, formRef, formRules, resetForm } = useForm()
const cancelText = ref('取消')
/**
* 新建
*/
function handleCreate() {
showModal({
type: 'create',
title: '新建部门',
})
}
/**
* 编辑
*/
function handleEdit(record = {}) {
showModal({
type: 'edit',
title: '编辑部门',
})
formRecord.value = record
formData.value = cloneDeep(record)
}
/**
* 确定
*/
function handleOk() {
formRef.value
.validateFields()
.then(async (values) => {
try {
showLoading()
const params = {
...values,
}
let result = null
switch (modal.value.type) {
case 'create':
result = await apis.common.create(params).catch(() => {
throw new Error()
})
break
case 'edit':
result = await apis.common.update(params).catch(() => {
throw new Error()
})
break
}
hideLoading()
if (config('http.code.success') === result?.code) {
hideModal()
emit('ok')
}
} catch (error) {
hideLoading()
}
})
.catch(() => {
hideLoading()
})
}
/**
* 取消
*/
function handleCancel() {
hideModal()
}
/**
* 关闭后
*/
function onAfterClose() {
resetForm()
cancelText.value = '取消'
hideLoading()
}
defineExpose({
handleCreate,
handleEdit,
})
</script>
<style lang="less" scoped></style>

View File

@ -1,155 +1,111 @@
<template> <template>
<a-modal <a-modal :open="modal.open" :title="modal.title" :width="640" :confirm-loading="modal.confirmLoading"
:open="modal.open" :after-close="onAfterClose" :cancel-text="cancelText" :ok-text="okText" @ok="handleOk" @cancel="handleCancel">
:title="modal.title" <a-spin :spinning="spining">
:width="640" <a-form ref="formRef" :model="formData" :rules="formRules">
:confirm-loading="modal.confirmLoading" <a-card class="mb-8-2">
:after-close="onAfterClose" <a-row :gutter="12">
:cancel-text="cancelText" <a-col :span="12">
:ok-text="okText" <a-form-item :label="'客户名称'" name="name">
@ok="handleOk" <a-input :placeholder="'请输入客户名称'" v-model:value="formData.name"></a-input>
@cancel="handleCancel"> </a-form-item>
<a-form </a-col>
ref="formRef" <a-col :span="12">
:model="formData" <a-form-item :label="'联系电话'" name="phone">
:rules="formRules" <a-input :placeholder="'请输入联系电话'" v-model:value="formData.phone"></a-input>
:label-col="{ style: { width: '90px' } }"> </a-form-item>
<a-card class="mb-8-2"> </a-col>
<a-row :gutter="12"> <a-col :span="12">
<a-col :span="12"> <a-form-item :label="'出生日期'" name="birthday">
<a-form-item <a-date-picker v-model:value="formData.birthday" style="width: 100%;" />
:label="$t('pages.system.user.form.username')" </a-form-item>
name="username"> </a-col>
<a-input <a-col :span="12">
:placeholder="$t('pages.system.user.form.username.placeholder')" <a-form-item :label="'所属区域'" name="areaId">
v-model:value="formData.username"></a-input> <a-select ref="select" v-model:value="formData.areaId">
</a-form-item> <a-select-option v-for="item in areaEnum.getAll()" :value="item.value">{{
</a-col> item.name }}</a-select-option>
<a-col :span="12"> </a-select>
<a-form-item </a-form-item>
:label="$t('pages.system.user.form.password')" </a-col>
name="password"> <a-col :span="12">
<a-input-password <a-form-item :label="'客户等级'" name="grade">
v-model:value="formData.password" <a-select ref="select" v-model:value="formData.grade">
:placeholder="$t('pages.system.user.form.password.placeholder')" /> <a-select-option v-for="item in 8" :value="item">{{ item + '' }}</a-select-option>
</a-form-item> </a-select>
</a-col> </a-form-item>
</a-row> </a-col>
<a-row :gutter="12"> <a-col :span="12">
<a-col :span="12"> <a-form-item :label="'当前积分'" name="currentbalance">
<a-form-item <a-input-number :placeholder="'请输入当前积分'" v-model:value="formData.currentbalance"
:label="$t('pages.system.user.form.name')" style="width: 100%;"></a-input-number>
name="name"> </a-form-item>
<a-input </a-col>
:placeholder="$t('pages.system.user.form.name.placeholder')" <a-col :span="12">
v-model:value="formData.name"></a-input> <a-form-item :label="'历史积分'" name="balance">
</a-form-item> <a-input-number :placeholder="'请输入历史积分'" v-model:value="formData.balance"
</a-col> style="width: 100%;"></a-input-number>
<a-col :span="12"> </a-form-item>
<a-form-item </a-col>
:label="$t('pages.system.user.form.roles')"
name="roles">
<a-select
v-model:value="formData.roles"
mode="multiple"
style="width: 100%"
:placeholder="$t('pages.system.user.form.roles.placeholder')"
:options="roles"
@change="handleChange"></a-select>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="12"> <a-col :span="12">
<a-col :span="12"> <a-form-item :label="'客户类型'" name="type">
<a-form-item <a-select ref="select" v-model:value="formData.type">
:label="$t('pages.system.user.form.phone')" <a-select-option v-for="item in customersEnum.getAll()" :value="item.value">{{
type="tel" item.name }}</a-select-option>
name="phone"> </a-select>
<a-input </a-form-item>
:placeholder="$t('pages.system.user.form.phone.placeholder')" </a-col>
type="tel" <a-col :span="12">
v-model:value="formData.phone"></a-input> <a-form-item :label="'状态'" name="status">
</a-form-item> <a-radio-group v-model:value="formData.status" :options="[
</a-col> { label: '启用', value: 'enabled' },
<a-col :span="12"> { label: '停用', value: 'disabled' },
<a-form-item
:label="$t('pages.system.user.form.email')"
type="email"
name="email">
<a-input
:placeholder="$t('pages.system.user.form.email.placeholder')"
type="email"
v-model:value="formData.email"></a-input>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="12">
<a-col :span="24">
<a-form-item
:label="$t('pages.system.user.form.remark')"
name="remark">
<a-textarea
:placeholder="$t('pages.system.user.form.remark.placeholder')"
v-model:value="formData.remark"></a-textarea>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="12">
<a-col :span="24">
<a-form-item
:label="$t('pages.system.user.form.status')"
name="status">
<a-radio-group
v-model:value="formData.status"
:options="[
{ label: $t('pages.system.user.form.status.activated'), value: 'activated' },
{ label: $t('pages.system.user.form.status.freezed'), value: 'freezed' },
]"></a-radio-group> ]"></a-radio-group>
</a-form-item> </a-form-item>
</a-col> </a-col>
</a-row> <a-col :span="24">
</a-card> <a-form-item :label="'头像'" name="fileList">
</a-form> <gx-upload v-model="formData.fileList" accept-types=".jpg,.png,.webp" :fileNumber="1"
@uploadSuccess="uploadSuccess" />
</a-form-item>
</a-col>
</a-row>
</a-card>
</a-form>
</a-spin>
</a-modal> </a-modal>
</template> </template>
<script setup> <script setup>
import { cloneDeep } from 'lodash-es' import { cloneDeep } from 'lodash-es'
import { ref } from 'vue' import { ref, onBeforeMount } from 'vue'
import { config } from '@/config' import { config } from '@/config'
import apis from '@/apis' import apis from '@/apis'
import { useForm, useModal } from '@/hooks' import { useForm, useModal, useSpining } from '@/hooks'
import { message } from 'ant-design-vue' import { message } from 'ant-design-vue'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import dayjs from 'dayjs'
import GxUpload from '@/components/GxUpload/index.vue'
import { customersEnum, areaEnum } from "@/enums/useEnum"
const emit = defineEmits(['ok']) const emit = defineEmits(['ok'])
const { t } = useI18n() // t const { t } = useI18n() // t
const { modal, showModal, hideModal, showLoading, hideLoading } = useModal() const { modal, showModal, hideModal, showLoading, hideLoading } = useModal()
const { formRecord, formData, formRef, formRules, resetForm } = useForm() const { formRecord, formData, formRef, formRules, resetForm } = useForm()
const { spining, showSpining, hideSpining } = useSpining()
const cancelText = ref(t('button.cancel')) const cancelText = ref(t('button.cancel'))
const okText = ref(t('button.confirm')) const okText = ref(t('button.confirm'))
const rolesValue = ref([]) const fileList = ref([])
const roles = ref([])
formRules.value = { formRules.value = {
name: { required: true, message: t('pages.system.user.form.username.placeholder') }, name: [{ required: true, message: '请输入客户名称' }],
username: { required: true, message: t('pages.system.user.form.code.placeholder') }, status: [{ required: true, message: '请选择状态', trigger: 'change' }],
status: { required: true, message: t('pages.system.user.form.status') }, areaId: [{ required: true, message: '请选择所属区域', trigger: 'change' }],
roles: [{ required: true, message: t('pages.system.user.form.roles.placeholder'), trigger: 'change' }], type: [{ required: true, message: '请选择客户类型', trigger: 'change' }]
} }
/** onBeforeMount(() => {
* 请求角色 formData.value.areaId = 1
*/ })
getRole()
/**
* select 选择框
*/
const handleChange = (value) => {
rolesValue.value = value
}
/** /**
* 新建 * 新建
@ -157,122 +113,87 @@ const handleChange = (value) => {
function handleCreate() { function handleCreate() {
showModal({ showModal({
type: 'create', type: 'create',
title: t('pages.system.user.add'), title: '新增客户',
}) })
// initData()
formData.value.status = 'enabled'
} }
async function getRole() {
const { success, data } = await apis.role.getRoleList().catch(() => {
throw new Error()
})
if (!success) {
return message.error('当前角色信息错误')
}
let roleArr = []
if (data.length) {
data.forEach((item) => {
roleArr.push({
label: item.name,
value: item.id,
})
})
}
roles.value = roleArr
}
/** /**
* 编辑 * 编辑
*/ */
async function handleEdit(record = {}) { async function handleEdit(record = {}) {
showModal({ showModal({
type: 'edit', type: 'edit',
title: t('pages.system.user.edit'), title: '编辑客户',
}) })
const { data, success } = await apis.users.getUsers(record.id).catch() try {
if (!success) { showSpining()
hideModal() const { data, success } = await apis.customer.getItem(record.id).catch()
return if (!success) {
} hideModal()
let roles = [] return
if (data.roles) { }
roles = formatArr(data.roles, 'edit') hideSpining()
formData.value = { ...data }
formData.value.birthday = dayjs(data.birthday)
if (data.avatar) {
formData.value.fileList = [config('http.apiBasic') + data.avatar]
}
} catch (error) {
message.error({ content: error.message })
hideSpining()
} }
data.roles = roles
formRecord.value = data
formData.value = cloneDeep(data)
} }
const uploadSuccess = (data) => {
fileList.value.push(data)
}
/** /**
* 确定 * 确定
*/ */
function handleOk() { function handleOk() {
formRef.value formRef.value.validateFields().then(async (values) => {
.validateFields() try {
.then(async (values) => { showLoading()
try { const params = {
showLoading() ...values,
avatar: fileList.value[0]
const params = {
...values,
roles: formatArr(rolesValue.value),
}
let result = null
switch (modal.value.type) {
case 'create':
result = await apis.users.createUsers(params).catch(() => {
throw new Error()
})
break
case 'edit':
result = await apis.users.updateUsers(formData.value.id, params).catch(() => {
throw new Error()
})
break
}
hideLoading()
if (config('http.code.success') === result?.success) {
hideModal()
emit('ok')
}
} catch (error) {
hideLoading()
} }
}) let result = null
.catch(() => { switch (modal.value.type) {
case 'create':
result = await apis.customer.createProject(params).catch((error) => {
throw new Error(error)
})
break
case 'edit':
result = await apis.customer.updateItem(formData.value.id, params).catch(() => {
throw new Error(error)
})
break
}
hideLoading()
if (config('http.code.success') === result?.success) {
hideModal()
emit('ok')
}
} catch (error) {
message.error({ content: error.message })
hideLoading()
}
})
.catch((e) => {
hideLoading() hideLoading()
}) })
} }
/**
* 对权限组 过数据格式
*/
function formatArr(data, type = '') {
const rolesArr = []
data.forEach((item) => {
roles.value.forEach((r) => {
if (type === 'edit') {
if (item.role_id === r.value) {
rolesArr.push({
value: item.role_id,
label: r.label,
})
return
}
} else if (r.value === item) {
rolesArr.push({
role_id: item,
role_name: r.label,
})
return
}
})
})
return rolesArr
}
/** /**
* 取消 * 取消
*/ */
function handleCancel() { function handleCancel() {
formData.value.areaId = 1
hideModal() hideModal()
} }

View File

@ -1,44 +1,27 @@
<template> <template>
<x-search-bar class="mb-8-2"> <x-search-bar class="mb-8-2">
<template #default="{ gutter, colSpan }"> <template #default="{ gutter, colSpan }">
<a-form <a-form :model="searchFormData" layout="inline">
:label-col="{ style: { width: '100px' } }"
:model="searchFormData"
layout="inline">
<a-row :gutter="gutter"> <a-row :gutter="gutter">
<a-col v-bind="colSpan"> <a-col v-bind="colSpan">
<a-form-item <a-form-item label="姓名" name="name">
:label="$t('pages.system.role.form.name')" <a-input placeholder="请输入客户姓名" v-model:value="searchFormData.name"></a-input>
name="name">
<a-input
:placeholder="$t('pages.system.role.form.code.placeholder')"
v-model:value="searchFormData.name"></a-input>
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col v-bind="colSpan"> <a-col v-bind="colSpan">
<a-form-item name="code"> <a-form-item label="状态" name="status">
<template #label> <a-select v-model:value="searchFormData.status" allowClear>
{{ $t('pages.system.role.form.code') }} <a-select-option value="">全部</a-select-option>
<a-tooltip :title="$t('pages.system.role.form.code')"> <a-select-option value="enabled">启用</a-select-option>
<question-circle-outlined class="ml-4-1 color-placeholder" /> <a-select-option value="disabled">停用</a-select-option>
</a-tooltip> </a-select>
</template>
<a-input
:placeholder="$t('pages.system.role.form.code.placeholder')"
v-model:value="searchFormData.code"></a-input>
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col class="align-right" v-bind="colSpan">
<a-col
class="align-right"
v-bind="colSpan">
<a-space> <a-space>
<a-button @click="handleResetSearch">{{ $t('button.reset') }}</a-button> <a-button @click="handleResetSearch">{{ $t('button.reset') }}</a-button>
<a-button <a-button ghost type="primary" @click="handleSearch">
ghost
type="primary"
@click="handleSearch">
{{ $t('button.search') }} {{ $t('button.search') }}
</a-button> </a-button>
</a-space> </a-space>
@ -46,63 +29,47 @@
</a-row> </a-row>
</a-form> </a-form>
</template> </template>
</x-search-bar> </x-search-bar>
<a-row <a-row :gutter="8" :wrap="false">
:gutter="8"
:wrap="false">
<a-col flex="auto"> <a-col flex="auto">
<a-card type="flex"> <a-card type="flex">
<x-action-bar class="mb-8-2"> <!-- <x-action-bar class="mb-8-2">
<a-button <a-button type="primary" @click="$refs.editDialogRef.handleCreate()">
v-action="'add'"
type="primary"
@click="$refs.editDialogRef.handleCreate()">
<template #icon> <template #icon>
<plus-outlined></plus-outlined> <plus-outlined></plus-outlined>
</template> </template>
{{ $t('pages.system.role.add') }} 新增客户
</a-button> </a-button>
</x-action-bar> </x-action-bar> -->
<a-table <a-table :columns="columns" :data-source="listData" bordered="true" :loading="loading"
:columns="columns" :pagination="paginationState" :scroll="{ x: 1000 }" @change="onTableChange">
:data-source="listData"
:loading="loading"
:pagination="paginationState"
:scroll="{ x: 1000 }"
@change="onTableChange">
<template #bodyCell="{ column, record }"> <template #bodyCell="{ column, record }">
<template v-if="'statusType' === column.key">
<!--状态-->
<a-tag
v-if="statusTypeEnum.is('enabled', record.status)"
color="processing">
{{ statusTypeEnum.getDesc(record.status) }}
</a-tag>
<!--状态-->
<a-tag
v-if="statusTypeEnum.is('disabled', record.status)"
color="processing">
{{ statusTypeEnum.getDesc(record.status) }}
</a-tag>
</template>
<template v-if="'createAt' === column.key"> <template v-if="column.dataIndex === 'avatar'">
{{ formatUtcDateTime(record.created_at) }} <a-image :width="60" :src="config('http.apiBasic') + record.avatar || $imageErr.imgErr" />
</template>
<template v-if="column.dataIndex === 'type'">
<span>{{ customersEnum.getName(record.type) }}</span>
</template>
<template v-if="column.dataIndex === 'grade'">
<span>{{ record.grade+'级' }}</span>
</template>
<template v-if="column.dataIndex === 'birthday'">
<span>{{ record.birthday&&dayjs(record.birthday).format('YYYY-MM-DD') }}</span>
</template>
<template v-if="'status' === column.dataIndex">
<a-tag v-if="record.status === 'enabled'" :color="'green'">启用</a-tag>
<a-tag v-if="record.status === 'disabled'" :color="'red'">停用</a-tag>
</template> </template>
<template v-if="'action' === column.key"> <template v-if="'action' === column.key">
<x-action-button @click="$refs.editDialogRef.handleEdit(record)"> <x-action-button @click="$refs.editDialogRef.handleEdit(record)">
<a-tooltip> <a-tooltip>
<template #title> {{ $t('pages.system.role.edit') }}</template> <template #title> {{ $t('pages.system.user.edit') }}</template>
<edit-outlined /> <edit-outlined /> </a-tooltip></x-action-button>
</a-tooltip> <x-action-button @click="handleDelete(record)">
</x-action-button>
<x-action-button @click="handleRemove(record)">
<a-tooltip> <a-tooltip>
<template #title> {{ $t('pages.system.delete') }}</template> <template #title>{{ $t('pages.system.delete') }}</template>
<delete-outlined style="color: #ff4d4f" /> <delete-outlined style="color: #ff4d4f" /> </a-tooltip></x-action-button>
</a-tooltip>
</x-action-button>
</template> </template>
</template> </template>
</a-table> </a-table>
@ -110,9 +77,7 @@
</a-col> </a-col>
</a-row> </a-row>
<edit-dialog <edit-dialog ref="editDialogRef" @ok="onOk"></edit-dialog>
ref="editDialogRef"
@ok="onOk"></edit-dialog>
</template> </template>
<script setup> <script setup>
@ -121,44 +86,47 @@ import { ref } from 'vue'
import apis from '@/apis' import apis from '@/apis'
import { formatUtcDateTime } from '@/utils/util' import { formatUtcDateTime } from '@/utils/util'
import { config } from '@/config' import { config } from '@/config'
import { statusTypeEnum } from '@/enums/system' import dayjs from 'dayjs'
import { usePagination, useForm } from '@/hooks' import { usePagination } from '@/hooks'
import { customersEnum, areaEnum } from "@/enums/useEnum"
import EditDialog from './components/EditDialog.vue' import EditDialog from './components/EditDialog.vue'
import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons-vue' import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons-vue'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
defineOptions({ defineOptions({
name: 'systemRole', name: 'visitor',
}) })
const { t } = useI18n() // t const { t } = useI18n() // t
const columns = [ const columns = [
{ title: t('pages.system.role.form.code'), dataIndex: 'code', width: 240 }, { title: '头像', dataIndex: 'avatar', width: 120, align: 'center' },
{ title: t('pages.system.role.form.name'), dataIndex: 'name' }, { title: '姓名', dataIndex: 'name', width: 120, align: 'center' },
{ title: t('pages.system.role.form.status'), dataIndex: 'status', key: 'statusType', width: 80 }, { title: '电话', dataIndex: 'phone', width: 120, align: 'center' },
{ title: t('pages.system.role.form.sequence'), dataIndex: 'sequence', width: 100 }, { title: '出生日期', dataIndex: 'birthday', width: 120, align: 'center' },
{ title: t('pages.system.role.form.created_at'), key: 'createAt', fixed: 'right', width: 120 }, { title: '当前积分', dataIndex: 'currentbalance', width: 120 },
{ title: t('button.action'), key: 'action', fixed: 'right', width: 120 }, { title: '累计积分', dataIndex: 'balance', width: 120 },
{ title: '等级', dataIndex: 'grade', width: 60, align: 'center' },
{ title: '类型', dataIndex: 'type', width: 60, align: 'center' },
{ title: '状态', dataIndex: 'status', key: 'introduce', width: 60, align: 'center' },
{ title: t('button.action'), key: 'action', fixed: 'right', width: 100, align: 'center' },
] ]
const { listData, loading, showLoading, hideLoading, paginationState, searchFormData, resetPagination } = const { listData, loading, showLoading, hideLoading, paginationState, resetPagination, searchFormData } =
usePagination() usePagination()
const { resetForm } = useForm()
const editDialogRef = ref() const editDialogRef = ref()
getPageList() getPageList()
/** /**
* 获取用户列 * 获取格数据
* @returns {Promise<void>} * @returns {Promise<void>}
*/ */
async function getPageList() { async function getPageList() {
try { try {
showLoading() showLoading()
const { pageSize, current } = paginationState const { pageSize, current } = paginationState
const { success, data, total } = await apis.role const { success, data, total } = await apis.customer
.getRoleList({ .getProjectList({
pageSize, pageSize,
page: current, page: current,
type:'visitor',
...searchFormData.value, ...searchFormData.value,
}) })
.catch(() => { .catch(() => {
@ -175,18 +143,18 @@ async function getPageList() {
} }
/** /**
* *
*/ */
function handleRemove({ id }) { function handleDelete({ id }) {
Modal.confirm({ Modal.confirm({
title: t('pages.system.role.delTip'), title: t('pages.system.user.delTip'),
content: t('button.confirm'), content: t('button.confirm'),
okText: t('button.confirm'), okText: t('button.confirm'),
onOk: () => { onOk: () => {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
;(async () => { ; (async () => {
try { try {
const { success } = await apis.role.delRole(id).catch(() => { const { success } = await apis.customer.delItem(id).catch(() => {
throw new Error() throw new Error()
}) })
if (config('http.code.success') === success) { if (config('http.code.success') === success) {
@ -212,6 +180,13 @@ function onTableChange({ current, pageSize }) {
getPageList() getPageList()
} }
/**
* 搜索
*/
function handleSearch() {
resetPagination()
getPageList()
}
/** /**
* 重置 * 重置
*/ */
@ -220,16 +195,6 @@ function handleResetSearch() {
resetPagination() resetPagination()
getPageList() getPageList()
} }
/**
* 搜索
*/
function handleSearch() {
resetForm()
resetPagination()
getPageList()
}
/** /**
* 编辑完成 * 编辑完成
*/ */