market_api_922

This commit is contained in:
dengbw
2022-09-22 15:41:16 +08:00
parent c4efebdba5
commit 0ab425167d
15 changed files with 1795 additions and 7 deletions
+107
View File
@@ -0,0 +1,107 @@
import request from '@/utils/request';
/**
* 分页查询活动
* @param params 查询条件
*/
export async function pageActivity(params) {
const res = await request.get('/sylive/activity/page', {
params
});
if (res.data.code === 0) {
return res.data.data;
}
return Promise.reject(new Error(res.data.message));
}
/**
* 查询活动列表
* @param params 查询条件
*/
export async function listActivity(params) {
const res = await request.get('/sylive/activity', {
params
});
if (res.data.code === 0 && res.data.data) {
return res.data.data;
}
return Promise.reject(new Error(res.data.message));
}
/**
* 根据id查询活动
* @param id 活动id
*/
export async function getActivity(id) {
const res = await request.get('/sylive/activity/' + id);
if (res.data.code === 0) {
return res.data.data;
}
return Promise.reject(new Error(res.data.message));
}
/**
* 添加活动
* @param data 活动信息
*/
export async function addActivity(data) {
const res = await request.post('/sylive/activity', data);
if (res.data.code === 0) {
return res.data.message;
}
return Promise.reject(new Error(res.data.message));
}
/**
* 修改活动
* @param data 活动信息
*/
export async function updateActivity(data) {
const res = await request.put('/sylive/activity', data);
if (res.data.code === 0) {
return res.data.message;
}
return Promise.reject(new Error(res.data.message));
}
/**
* 删除活动
* @param id 活动id
*/
export async function removeActivity(id) {
const res = await request.delete('/sylive/activity/' + id);
if (res.data.code === 0) {
return res.data.message;
}
return Promise.reject(new Error(res.data.message));
}
/**
* 批量删除活动
* @param data 活动id集合
*/
export async function removeActivitys(data) {
const res = await request.delete('/sylive/activity/batch', {
data
});
if (res.data.code === 0) {
return res.data.message;
}
return Promise.reject(new Error(res.data.message));
}
/**
* 修改活动状态
* @param userId 活动id
* @param status 状态
*/
export async function updateActivityStatus(activityId, status) {
const res = await request.put('/sylive/activity/status', {
activityId,
status
});
if (res.data.code === 0) {
return res.data.message;
}
return Promise.reject(new Error(res.data.message));
}
+65
View File
@@ -0,0 +1,65 @@
import request from '@/utils/request';
/**
* 分页查询机构
* @param params 查询条件
*/
export async function pageOrganizations(params) {
const res = await request.get('/sylive/organization/page', {
params
});
if (res.data.code === 0) {
return res.data.data;
}
return Promise.reject(new Error(res.data.message));
}
/**
* 查询机构列表
* @param params 查询条件
*/
export async function listOrganizations(params) {
const res = await request.get('/sylive/organization', {
params
});
if (res.data.code === 0) {
return res.data.data;
}
return Promise.reject(new Error(res.data.message));
}
/**
* 添加机构
* @param data 机构信息
*/
export async function addOrganization(data) {
const res = await request.post('/sylive/organization', data);
if (res.data.code === 0) {
return res.data.message;
}
return Promise.reject(new Error(res.data.message));
}
/**
* 修改机构
* @param data 机构信息
*/
export async function updateOrganization(data) {
const res = await request.put('/sylive/organization', data);
if (res.data.code === 0) {
return res.data.message;
}
return Promise.reject(new Error(res.data.message));
}
/**
* 删除机构
* @param id 机构id
*/
export async function removeOrganization(id) {
const res = await request.delete('/sylive/organization/' + id);
if (res.data.code === 0) {
return res.data.message;
}
return Promise.reject(new Error(res.data.message));
}
+154
View File
@@ -0,0 +1,154 @@
import request from '@/utils/request';
/**
* 分页查询用户
* @param params 查询条件
*/
export async function pageUsers(params) {
const res = await request.get('/sylive/user/page', {
params
});
if (res.data.code === 0) {
return res.data.data;
}
return Promise.reject(new Error(res.data.message));
}
/**
* 查询用户列表
* @param params 查询条件
*/
export async function listUsers(params) {
const res = await request.get('/sylive/user', {
params
});
if (res.data.code === 0 && res.data.data) {
return res.data.data;
}
return Promise.reject(new Error(res.data.message));
}
/**
* 根据id查询用户
* @param id 用户id
*/
export async function getUser(id) {
const res = await request.get('/sylive/user/' + id);
if (res.data.code === 0) {
return res.data.data;
}
return Promise.reject(new Error(res.data.message));
}
/**
* 添加用户
* @param data 用户信息
*/
export async function addUser(data) {
const res = await request.post('/sylive/user', data);
if (res.data.code === 0) {
return res.data.message;
}
return Promise.reject(new Error(res.data.message));
}
/**
* 修改用户
* @param data 用户信息
*/
export async function updateUser(data) {
const res = await request.put('/sylive/user', data);
if (res.data.code === 0) {
return res.data.message;
}
return Promise.reject(new Error(res.data.message));
}
/**
* 删除用户
* @param id 用户id
*/
export async function removeUser(id) {
const res = await request.delete('/sylive/user/' + id);
if (res.data.code === 0) {
return res.data.message;
}
return Promise.reject(new Error(res.data.message));
}
/**
* 批量删除用户
* @param data 用户id集合
*/
export async function removeUsers(data) {
const res = await request.delete('/sylive/user/batch', {
data
});
if (res.data.code === 0) {
return res.data.message;
}
return Promise.reject(new Error(res.data.message));
}
/**
* 修改用户状态
* @param userId 用户id
* @param status 状态
*/
export async function updateUserStatus(userId, status) {
const res = await request.put('/sylive/user/status', {
userId,
status
});
if (res.data.code === 0) {
return res.data.message;
}
return Promise.reject(new Error(res.data.message));
}
/**
* 重置用户密码
* @param userId 用户id
* @param password 密码
* @returns {Promise<string>}
*/
export async function updateUserPassword(userId, password = '123456') {
const res = await request.put('/sylive/user/password', {
userId,
password
});
if (res.data.code === 0) {
return res.data.message;
}
return Promise.reject(new Error(res.data.message));
}
/**
* 导入用户
* @param file excel文件
*/
export async function importUsers(file) {
const formData = new FormData();
formData.append('file', file);
const res = await request.post('/sylive/user/import', formData);
if (res.data.code === 0) {
return res.data.message;
}
return Promise.reject(new Error(res.data.message));
}
/**
* 检查用户是否存在
* @param field 检查的字段
* @param value 字段的值
* @param id 修改时的id
*/
export async function checkExistence(field, value, id) {
const res = await request.get('/sylive/user/existence', {
params: { field, value, id }
});
if (res.data.code === 0) {
return res.data.message;
}
return Promise.reject(new Error(res.data.message));
}
+6 -6
View File
@@ -5,7 +5,7 @@ import request from '@/utils/request';
* @param params 查询条件
*/
export async function pageDictionaryData(params) {
const res = await request.get('/system/dictionary-data/page', {
const res = await request.get('/system/dictionaryData/page', {
params
});
if (res.data.code === 0) {
@@ -19,7 +19,7 @@ export async function pageDictionaryData(params) {
* @param params 查询条件
*/
export async function listDictionaryData(params) {
const res = await request.get('/system/dictionary-data', {
const res = await request.get('/system/dictionaryData', {
params
});
if (res.data.code === 0) {
@@ -33,7 +33,7 @@ export async function listDictionaryData(params) {
* @param data 字典数据信息
*/
export async function addDictionaryData(data) {
const res = await request.post('/system/dictionary-data', data);
const res = await request.post('/system/dictionaryData', data);
if (res.data.code === 0) {
return res.data.message;
}
@@ -45,7 +45,7 @@ export async function addDictionaryData(data) {
* @param data 字典数据信息
*/
export async function updateDictionaryData(data) {
const res = await request.put('/system/dictionary-data', data);
const res = await request.put('/system/dictionaryData', data);
if (res.data.code === 0) {
return res.data.message;
}
@@ -57,7 +57,7 @@ export async function updateDictionaryData(data) {
* @param id 字典数据id
*/
export async function removeDictionaryData(id) {
const res = await request.delete('/system/dictionary-data/' + id);
const res = await request.delete('/system/dictionaryData/' + id);
if (res.data.code === 0) {
return res.data.message;
}
@@ -69,7 +69,7 @@ export async function removeDictionaryData(id) {
* @param data 字典数据id集合
*/
export async function removeDictionaryDataBatch(data) {
const res = await request.delete('/system/dictionary-data/batch', {
const res = await request.delete('/system/dictionaryData/batch', {
data
});
if (res.data.code === 0) {
+1 -1
View File
@@ -63,4 +63,4 @@ export const MAP_KEY = '006d995d433058322319fa797f2876f5';
// EleAdmin 授权码, 自带的只能用于演示, 正式项目请更换为自己的授权码
export const LICENSE_CODE =
'dk9mcwJyetRWQlxWRiojIqJWdzJCLi4WakJCLxojI0NWZkJiOi4Wah12bkFWZsVmLv1WZsISbvNmLulWbLBnWiojIklmI2JCLiUVeBJjMiojIu9WazJXZQfgICMx4SM0NW==';
'dk9mcwJyetRWQlxWRiojIqJWdzJCLi4Wa4QDN5ojI0NWZIVnI6ICZpJCLiwiI3VkUMNVa6Iibvl2cyVmdQfiATMuEjI0NW==';
@@ -0,0 +1,184 @@
<!-- 用户编辑弹窗 -->
<template>
<ele-modal
width="680px"
:visible="visible"
:append-to-body="true"
:close-on-click-modal="true"
custom-class="ele-dialog-form"
:title="isUpdate ? '修改活动' : '添加活动'"
@update:visible="updateVisible"
>
<el-form ref="form" :model="form" :rules="rules" label-width="82px">
<el-form-item label="活动标题:" prop="title">
<el-input
clearable
:maxlength="60"
v-model="form.title"
placeholder="请输入活动标题"
/>
</el-form-item>
<el-form-item label="直播频道:" prop="channelId">
<el-input
clearable
:maxlength="30"
v-model="form.channelId"
placeholder="请输入直播频道"
/>
</el-form-item>
<el-form-item label="直播时间:" prop="dateRange">
<el-date-picker
v-model="form.dateRange"
type="datetimerange"
unlink-panels
range-separator=""
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="yyyy-MM-dd HH:mm:ss"
class="ele-fluid"
/>
</el-form-item>
<el-form-item label="活动简介:" prop="introduction">
<el-input
v-model="form.introduction"
placeholder="请输入活动简介"
:rows="4"
type="textarea"
/>
</el-form-item>
<el-form-item label="分享描述:" prop="shareTitle">
<el-input
clearable
:maxlength="60"
v-model="form.shareTitle"
placeholder="请输入分享描述"
/>
</el-form-item>
</el-form>
<template v-slot:footer>
<el-button @click="updateVisible(false)">取消</el-button>
<el-button type="primary" :loading="loading" @click="save">
保存
</el-button>
</template>
</ele-modal>
</template>
<script>
import { addActivity, updateActivity } from '@/api/sylive/activity';
export default {
components: {},
props: {
// 弹窗是否打开
visible: Boolean,
// 修改回显的数据
data: Object
},
data() {
const defaultForm = {
activityId: null,
title: '',
channelId: '',
dateRange: '',
introduction: '',
shareTitle: '',
shareImg: '',
bgImg: ''
};
return {
defaultForm,
// 表单数据
form: { ...defaultForm },
// 表单验证规则
rules: {
title: [
{
required: true,
message: '请输入活动标题',
trigger: 'blur'
}
],
channelId: [
{
required: true,
message: '请输入直播频道',
trigger: 'blur'
}
],
dateRange: [
{
required: true,
message: '请选择直播时间',
trigger: 'blur'
}
],
introduction: [
{
required: true,
message: '请输入活动简介',
trigger: 'blur'
}
]
},
// 提交状态
loading: false,
// 是否是修改
isUpdate: false
};
},
computed: {
// 是否开启响应式布局
styleResponsive() {
return this.$store.state.theme.styleResponsive;
}
},
methods: {
/* 保存编辑 */
save() {
this.$refs.form.validate((valid) => {
if (!valid) {
return false;
}
this.loading = true;
const data = {
...this.form
};
const saveOrUpdate = this.isUpdate ? updateActivity : addActivity;
saveOrUpdate(data)
.then((msg) => {
this.loading = false;
this.$message.success(msg);
this.updateVisible(false);
this.$emit('done');
})
.catch((e) => {
this.loading = false;
this.$message.error(e.message);
});
});
},
/* 更新visible */
updateVisible(value) {
this.$emit('update:visible', value);
}
},
watch: {
visible(visible) {
if (visible) {
if (this.data) {
this.$util.assignObject(this.form, {
...this.data,
password: ''
});
this.isUpdate = true;
} else {
this.isUpdate = false;
}
} else {
this.$refs.form.clearValidate();
this.form = { ...this.defaultForm };
}
}
}
};
</script>
@@ -0,0 +1,62 @@
<!-- 搜索表单 -->
<template>
<el-form
label-width="77px"
class="ele-form-search"
@keyup.enter.native="search"
@submit.native.prevent
>
<el-row :gutter="15">
<el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
<el-form-item label="活动标题:">
<el-input clearable v-model="where.title" placeholder="请输入" />
</el-form-item>
</el-col>
<el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
<div class="ele-form-actions">
<el-button
type="primary"
icon="el-icon-search"
class="ele-btn-icon"
@click="search"
>
查询
</el-button>
<el-button @click="reset">重置</el-button>
</div>
</el-col>
</el-row>
</el-form>
</template>
<script>
export default {
data() {
// 默认表单数据
const defaultWhere = {
title: ''
};
return {
// 表单数据
where: { ...defaultWhere }
};
},
computed: {
// 是否开启响应式布局
styleResponsive() {
return this.$store.state.theme.styleResponsive;
}
},
methods: {
/* 搜索 */
search() {
this.$emit('search', this.where);
},
/* 重置 */
reset() {
this.where = { ...this.defaultWhere };
this.search();
}
}
};
</script>
+243
View File
@@ -0,0 +1,243 @@
<template>
<div class="ele-body">
<el-card shadow="never">
<!-- 搜索表单 -->
<activity-search @search="reload" />
<!-- 数据表格 -->
<ele-pro-table
ref="table"
:columns="columns"
:datasource="datasource"
:selection.sync="selection"
cache-key="syliveActivityTable"
>
<!-- 表头工具栏 -->
<template v-slot:toolbar>
<el-button
size="small"
type="primary"
icon="el-icon-plus"
class="ele-btn-icon"
@click="openEdit()"
>
新建
</el-button>
<el-button
size="small"
type="danger"
icon="el-icon-delete"
class="ele-btn-icon"
@click="removeBatch"
>
删除
</el-button>
</template>
<!-- 状态列 -->
<template v-slot:status="{ row }">
<el-switch
:active-value="0"
:inactive-value="1"
v-model="row.status"
@change="editStatus(row)"
/>
</template>
<!-- 操作列 -->
<template v-slot:action="{ row }">
<el-link
type="primary"
:underline="false"
icon="el-icon-edit"
@click="openEdit(row)"
>
修改
</el-link>
<el-popconfirm
class="ele-action"
title="确定要删除此用户吗?"
@confirm="remove(row)"
>
<template v-slot:reference>
<el-link type="danger" :underline="false" icon="el-icon-delete">
删除
</el-link>
</template>
</el-popconfirm>
</template>
</ele-pro-table>
</el-card>
<!-- 编辑弹窗 -->
<activity-edit :visible.sync="showEdit" :data="current" @done="reload" />
</div>
</template>
<script>
import ActivitySearch from './components/activity-search.vue';
import ActivityEdit from './components/activity-edit.vue';
import {
pageActivity,
removeActivity,
removeActivitys,
updateActivityStatus
} from '@/api/sylive/activity';
export default {
name: 'syliveActivity',
components: {
ActivitySearch,
ActivityEdit
},
data() {
return {
// 表格列配置
columns: [
{
columnKey: 'selection',
type: 'selection',
width: 45,
align: 'center',
fixed: 'left'
},
{
columnKey: 'index',
type: 'index',
width: 45,
align: 'center',
showOverflowTooltip: true,
fixed: 'left'
},
{
prop: 'title',
label: '标题',
sortable: 'custom',
showOverflowTooltip: true,
minWidth: 110
},
{
prop: 'channelId',
label: '直播频道',
sortable: 'custom',
showOverflowTooltip: true,
minWidth: 110,
slot: 'nickname'
},
{
prop: 's_time',
label: '直播开始时间',
sortable: 'custom',
showOverflowTooltip: true,
minWidth: 110
},
{
prop: 'e_time',
label: '直播结束时间',
sortable: 'custom',
showOverflowTooltip: true,
minWidth: 110
},
{
prop: 'createTime',
label: '创建时间',
sortable: 'custom',
showOverflowTooltip: true,
minWidth: 110,
formatter: (_row, _column, cellValue) => {
return this.$util.toDateString(cellValue);
}
},
{
prop: 'status',
label: '状态',
align: 'center',
sortable: 'custom',
width: 80,
resizable: false,
slot: 'status',
showOverflowTooltip: true
},
{
columnKey: 'action',
label: '操作',
width: 220,
align: 'center',
resizable: false,
slot: 'action',
showOverflowTooltip: true
}
],
// 表格选中数据
selection: [],
// 当前编辑数据
current: null,
// 是否显示编辑弹窗
showEdit: false
};
},
methods: {
/* 表格数据源 */
datasource({ page, limit, where, order }) {
return pageActivity({ ...where, ...order, page, limit });
},
/* 刷新表格 */
reload(where) {
this.$refs.table.reload({ page: 1, where: where });
},
/* 打开编辑弹窗 */
openEdit(row) {
this.current = row;
this.showEdit = true;
},
/* 删除 */
remove(row) {
const loading = this.$loading({ lock: true });
removeActivity(row.activityId)
.then((msg) => {
loading.close();
this.$message.success(msg);
this.reload();
})
.catch((e) => {
loading.close();
this.$message.error(e.message);
});
},
/* 批量删除 */
removeBatch() {
if (!this.selection.length) {
this.$message.error('请至少选择一条数据');
return;
}
this.$confirm('确定要删除选中的活动吗?', '提示', {
type: 'warning'
})
.then(() => {
const loading = this.$loading({ lock: true });
removeActivitys(this.selection.map((d) => d.activityId))
.then((msg) => {
loading.close();
this.$message.success(msg);
this.reload();
})
.catch((e) => {
loading.close();
this.$message.error(e.message);
});
})
.catch(() => {});
},
/* 更改状态 */
editStatus(row) {
const loading = this.$loading({ lock: true });
updateActivityStatus(row.activityId, row.status)
.then((msg) => {
loading.close();
this.$message.success(msg);
})
.catch((e) => {
loading.close();
row.status = !row.status ? 1 : 0;
this.$message.error(e.message);
});
}
}
};
</script>
@@ -0,0 +1,193 @@
<!-- 机构编辑弹窗 -->
<template>
<ele-modal
width="680px"
:visible="visible"
:close-on-click-modal="true"
custom-class="ele-dialog-form"
:title="isUpdate ? '修改机构' : '添加机构'"
@update:visible="updateVisible"
>
<el-form ref="form" :model="form" :rules="rules" label-width="82px">
<el-row :gutter="15">
<el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
<el-form-item label="上级机构:">
<org-select
v-model="form.parentId"
:data="organizationList"
placeholder="请选择上级机构"
/>
</el-form-item>
<el-form-item label="机构名称:" prop="organizationName">
<el-input
clearable
:maxlength="20"
v-model="form.organizationName"
placeholder="请输入机构名称"
/>
</el-form-item>
<el-form-item label="机构全称:">
<el-input
clearable
:maxlength="100"
v-model="form.organizationFullName"
placeholder="请输入机构全称"
/>
</el-form-item>
</el-col>
<el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
<el-form-item label="机构类型:" prop="organizationType">
<org-type-select v-model="form.organizationType" />
</el-form-item>
<el-form-item label="排序号:" prop="sortNumber">
<el-input-number
:min="0"
:max="99999"
v-model="form.sortNumber"
controls-position="right"
placeholder="请输入排序号"
class="ele-fluid ele-text-left"
/>
</el-form-item>
<el-form-item label="备注:">
<el-input
:rows="4"
type="textarea"
:maxlength="200"
v-model="form.comments"
placeholder="请输入备注"
/>
</el-form-item>
</el-col>
</el-row>
</el-form>
<template v-slot:footer>
<el-button @click="updateVisible(false)">取消</el-button>
<el-button type="primary" :loading="loading" @click="save">
保存
</el-button>
</template>
</ele-modal>
</template>
<script>
import OrgSelect from './org-select.vue';
import OrgTypeSelect from './org-type-select.vue';
import {
addOrganization,
updateOrganization
} from '@/api/sylive/organization';
export default {
components: { OrgSelect, OrgTypeSelect },
props: {
// 弹窗是否打开
visible: Boolean,
// 修改回显的数据
data: Object,
// 上级id
parentId: Number,
// 机构数据
organizationList: Array
},
data() {
const defaultForm = {
organizationId: null,
parentId: null,
organizationName: '',
organizationFullName: '',
organizationType: null,
sortNumber: null,
comments: ''
};
return {
defaultForm,
// 表单数据
form: { ...defaultForm },
// 表单验证规则
rules: {
organizationName: [
{
required: true,
message: '请输入机构名称',
trigger: 'blur'
}
],
organizationType: [
{
required: true,
message: '请选择机构类型',
trigger: 'blur'
}
],
sortNumber: [
{
required: true,
message: '请输入排序号',
trigger: 'blur'
}
]
},
// 提交状态
loading: false,
// 是否是修改
isUpdate: false
};
},
computed: {
// 是否开启响应式布局
styleResponsive() {
return this.$store.state.theme.styleResponsive;
}
},
methods: {
/* 保存编辑 */
save() {
this.$refs.form.validate((valid) => {
if (!valid) {
return false;
}
this.loading = true;
const data = {
...this.form,
parentId: this.form.parentId || 0
};
const saveOrUpdate = this.isUpdate
? updateOrganization
: addOrganization;
saveOrUpdate(data)
.then((msg) => {
this.loading = false;
this.$message.success(msg);
this.updateVisible(false);
this.$emit('done');
})
.catch((e) => {
this.loading = false;
this.$message.error(e.message);
});
});
},
/* 更新visible */
updateVisible(value) {
this.$emit('update:visible', value);
}
},
watch: {
visible(visible) {
if (visible) {
if (this.data) {
this.$util.assignObject(this.form, this.data);
this.isUpdate = true;
} else {
this.form.parentId = this.parentId;
this.isUpdate = false;
}
} else {
this.$refs.form.clearValidate();
this.form = { ...this.defaultForm };
}
}
}
};
</script>
@@ -0,0 +1,35 @@
<!-- 机构选择下拉框 -->
<template>
<ele-tree-select
clearable
:value="value || ''"
:data="data"
label-key="organizationName"
value-key="organizationId"
default-expand-all
:placeholder="placeholder"
@input="updateValue"
/>
</template>
<script>
export default {
props: {
// 选中的数据(v-model)
value: Number,
// 提示信息
placeholder: {
type: String,
default: '请选择机构'
},
// 机构数据
data: Array
},
methods: {
/* 更新选中数据 */
updateValue(value) {
this.$emit('input', value);
}
}
};
</script>
@@ -0,0 +1,57 @@
<!-- 机构类型选择下拉框 -->
<template>
<el-select
clearable
:value="value"
class="ele-fluid"
:placeholder="placeholder"
@input="updateValue"
>
<el-option
v-for="item in data"
:key="item.dictDataId"
:value="item.dictDataCode"
:label="item.dictDataName"
/>
</el-select>
</template>
<script>
import { listDictionaryData } from '@/api/system/dictionary-data';
export default {
props: {
// 选中的数据(v-modal)
value: String,
// 提示信息
placeholder: {
type: String,
default: '请选择机构类型'
}
},
data() {
return {
// 机构类型数据
data: []
};
},
created() {
/* 获取机构类型数据 */
listDictionaryData({
dictCode: 'organization_type'
})
.then((list) => {
this.data = list;
})
.catch((e) => {
this.$message.error(e.message);
});
},
methods: {
/* 更新选中数据 */
updateValue(value) {
this.$emit('input', value);
}
}
};
</script>
@@ -0,0 +1,198 @@
<!-- 用户编辑弹窗 -->
<template>
<ele-modal
width="680px"
:visible="visible"
:close-on-click-modal="true"
custom-class="ele-dialog-form"
:title="isUpdate ? '修改用户' : '添加用户'"
@update:visible="updateVisible"
>
<el-form ref="form" :model="form" :rules="rules" label-width="82px">
<el-row :gutter="15">
<el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
<el-form-item label="所属机构:" prop="organizationId">
<org-select
:data="organizationList"
placeholder="请选择所属机构"
v-model="form.organizationId"
/>
</el-form-item>
<el-form-item label="手机号:" prop="mobile">
<el-input
clearable
:maxlength="11"
:disabled="isUpdate"
v-model="form.mobile"
placeholder="请输入手机号"
/>
</el-form-item>
</el-col>
<el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
<el-form-item label="性别:" prop="sex">
<el-select
clearable
class="ele-block"
v-model="form.sex"
placeholder="请选择性别"
>
<el-option label="男" value="1" />
<el-option label="女" value="2" />
</el-select>
</el-form-item>
<el-form-item label="姓名:" prop="uname">
<el-input
clearable
:maxlength="20"
v-model="form.uname"
placeholder="请输入姓名"
/>
</el-form-item>
</el-col>
</el-row>
</el-form>
<template v-slot:footer>
<el-button @click="updateVisible(false)">取消</el-button>
<el-button type="primary" :loading="loading" @click="save">
保存
</el-button>
</template>
</ele-modal>
</template>
<script>
import { phoneReg } from 'ele-admin';
import OrgSelect from './org-select.vue';
import { addUser, updateUser, checkExistence } from '@/api/sylive/user';
export default {
components: { OrgSelect },
props: {
// 弹窗是否打开
visible: Boolean,
// 修改回显的数据
data: Object,
// 全部机构
organizationList: Array,
// 机构id
organizationId: Number
},
data() {
const defaultForm = {
userId: null,
organizationId: null,
mobile: '',
uname: '',
sex: null
};
return {
defaultForm,
// 表单数据
form: { ...defaultForm },
// 表单验证规则
rules: {
mobile: [
{
required: true,
trigger: 'blur',
validator: (_rule, value, callback) => {
if (!value) {
return callback(new Error('请输入手机号'));
}
const st = new RegExp(phoneReg);
if (!st.test(value)) {
return callback(new Error('手机号格式不正确'));
}
checkExistence('mobile', value, this.data?.mobile)
.then(() => {
callback(new Error('手机号已经存在'));
})
.catch(() => {
callback();
});
}
}
],
organizationId: [
{
required: true,
message: '请选择所属机构',
trigger: 'blur'
}
],
uname: [
{
required: true,
message: '请输入姓名',
trigger: 'blur'
}
],
sex: [
{
message: '请选择性别',
trigger: 'blur'
}
]
},
// 提交状态
loading: false,
// 是否是修改
isUpdate: false
};
},
computed: {
// 是否开启响应式布局
styleResponsive() {
return this.$store.state.theme.styleResponsive;
}
},
methods: {
/* 保存编辑 */
save() {
this.$refs.form.validate((valid) => {
if (!valid) {
return false;
}
this.loading = true;
const data = {
...this.form
};
const saveOrUpdate = this.isUpdate ? updateUser : addUser;
saveOrUpdate(data)
.then((msg) => {
this.loading = false;
this.$message.success(msg);
this.updateVisible(false);
this.$emit('done');
})
.catch((e) => {
this.loading = false;
this.$message.error(e.message);
});
});
},
/* 更新visible */
updateVisible(value) {
this.$emit('update:visible', value);
}
},
watch: {
visible(visible) {
if (visible) {
if (this.data) {
this.$util.assignObject(this.form, {
...this.data
});
this.isUpdate = true;
} else {
this.form.organizationId = this.organizationId;
this.isUpdate = false;
}
} else {
this.$refs.form.clearValidate();
this.form = { ...this.defaultForm };
}
}
}
};
</script>
@@ -0,0 +1,227 @@
<template>
<div>
<!-- 数据表格 -->
<ele-pro-table
ref="table"
:columns="columns"
:datasource="datasource"
height="calc(100vh - 265px)"
full-height="calc(100vh - 116px)"
tool-class="ele-toolbar-form"
cache-key="systemOrgUserTable"
>
<!-- 表头工具栏 -->
<template v-slot:toolbar>
<org-user-search @search="reload">
<el-button
size="small"
type="primary"
icon="el-icon-plus"
class="ele-btn-icon"
@click="openEdit()"
>
添加
</el-button>
</org-user-search>
</template>
<!-- 角色列 -->
<template v-slot:roleName="{ row }">
<el-tag type="primary" size="mini">
{{ row.roleName }}
</el-tag>
</template>
<!-- 状态列 -->
<template v-slot:status="{ row }">
<el-switch
:active-value="0"
:inactive-value="1"
v-model="row.status"
@change="editStatus(row)"
/>
</template>
<!-- 操作列 -->
<template v-slot:action="{ row }">
<el-link
type="primary"
:underline="false"
icon="el-icon-edit"
@click="openEdit(row)"
>
修改
</el-link>
<el-popconfirm
class="ele-action"
title="确定要删除此用户吗?"
@confirm="remove(row)"
>
<template v-slot:reference>
<el-link type="danger" :underline="false" icon="el-icon-delete">
删除
</el-link>
</template>
</el-popconfirm>
</template>
</ele-pro-table>
<!-- 编辑弹窗 -->
<org-user-edit
:data="current"
:visible.sync="showEdit"
:organization-list="organizationList"
:organization-id="organizationId"
@done="reload"
/>
</div>
</template>
<script>
import OrgUserSearch from './org-user-search.vue';
import OrgUserEdit from './org-user-edit.vue';
import { pageUsers, removeUser, updateUserStatus } from '@/api/sylive/user';
export default {
components: { OrgUserSearch, OrgUserEdit },
props: {
// 机构id
organizationId: Number,
// 全部机构
organizationList: Array
},
data() {
return {
// 表格列配置
columns: [
{
columnKey: 'index',
type: 'index',
width: 45,
align: 'center',
showOverflowTooltip: true,
fixed: 'left'
},
{
prop: 'uname',
label: '姓名',
sortable: 'custom',
showOverflowTooltip: true,
minWidth: 110
},
{
prop: 'nickname',
label: '微信昵称',
sortable: 'custom',
showOverflowTooltip: true,
minWidth: 110
},
{
prop: 'sexName',
label: '性别',
sortable: 'custom',
showOverflowTooltip: true,
minWidth: 80
},
{
prop: 'mobile',
label: '手机号',
sortable: 'custom',
showOverflowTooltip: true,
minWidth: 110
},
{
prop: 'roleName',
label: '角色',
showOverflowTooltip: true,
minWidth: 80,
slot: 'roleName'
},
{
prop: 'createTime',
label: '创建时间',
sortable: 'custom',
showOverflowTooltip: true,
minWidth: 110,
formatter: (_row, _column, cellValue) => {
return this.$util.toDateString(cellValue);
}
},
{
prop: 'status',
label: '状态',
align: 'center',
sortable: 'custom',
width: 80,
resizable: false,
slot: 'status'
},
{
columnKey: 'action',
label: '操作',
width: 130,
align: 'center',
resizable: false,
slot: 'action',
showOverflowTooltip: true
}
],
// 当前编辑数据
current: null,
// 是否显示编辑弹窗
showEdit: false
};
},
methods: {
/* 表格数据源 */
datasource({ page, limit, where, order }) {
return pageUsers({
...where,
...order,
page,
limit,
organizationId: this.organizationId
});
},
/* 刷新表格 */
reload(where) {
this.$refs.table.reload({ page: 1, where: where });
},
/* 显示编辑 */
openEdit(row) {
this.current = row;
this.showEdit = true;
},
/* 删除 */
remove(row) {
const loading = this.$loading({ lock: true });
removeUser(row.userId)
.then((msg) => {
loading.close();
this.$message.success(msg);
this.reload();
})
.catch((e) => {
loading.close();
this.$message.error(e.message);
});
},
/* 更改状态 */
editStatus(row) {
const loading = this.$loading({ lock: true });
updateUserStatus(row.userId, row.status)
.then((msg) => {
loading.close();
this.$message.success(msg);
})
.catch((e) => {
loading.close();
row.status = !row.status ? 1 : 0;
this.$message.error(e.message);
});
}
},
watch: {
// 监听机构id变化
organizationId() {
this.reload();
}
}
};
</script>
@@ -0,0 +1,79 @@
<!-- 搜索表单 -->
<template>
<el-form
size="small"
class="ele-form-search"
@keyup.enter.native="search"
@submit.native.prevent
>
<el-row :gutter="10">
<el-col v-bind="styleResponsive ? { md: 8 } : { span: 8 }">
<el-form-item>
<el-input
clearable
size="small"
v-model="where.uname"
placeholder="请输入姓名"
/>
</el-form-item>
</el-col>
<el-col v-bind="styleResponsive ? { md: 8 } : { span: 8 }">
<el-form-item>
<el-input
clearable
size="small"
v-model="where.nickname"
placeholder="请输入微信昵称"
/>
</el-form-item>
</el-col>
<el-col v-bind="styleResponsive ? { md: 8 } : { span: 8 }">
<el-form-item>
<el-button
size="small"
type="primary"
icon="el-icon-search"
class="ele-btn-icon"
@click="search"
>
查询
</el-button>
<slot></slot>
</el-form-item>
</el-col>
</el-row>
</el-form>
</template>
<script>
export default {
data() {
// 默认表单数据
const defaultWhere = {
uname: '',
nickname: ''
};
return {
// 表单数据
where: { ...defaultWhere }
};
},
computed: {
// 是否开启响应式布局
styleResponsive() {
return this.$store.state.theme.styleResponsive;
}
},
methods: {
/* 搜索 */
search() {
this.$emit('search', this.where);
},
/* 重置 */
reset() {
this.where = { ...this.defaultWhere };
this.search();
}
}
};
</script>
+184
View File
@@ -0,0 +1,184 @@
<template>
<div class="ele-body">
<el-card shadow="never" v-loading="loading">
<ele-split-layout
width="266px"
allow-collapse
:right-style="{ overflow: 'hidden' }"
>
<div>
<!-- 操作按钮 -->
<ele-toolbar class="ele-toolbar-actions">
<div style="margin: 5px 0">
<el-button
size="small"
type="primary"
icon="el-icon-plus"
class="ele-btn-icon"
@click="openEdit()"
>
添加
</el-button>
<el-button
size="small"
type="warning"
icon="el-icon-edit"
class="ele-btn-icon"
:disabled="!current"
@click="openEdit(current)"
>
修改
</el-button>
<el-button
size="small"
type="danger"
icon="el-icon-delete"
class="ele-btn-icon"
:disabled="!current"
@click="remove"
>
删除
</el-button>
</div>
</ele-toolbar>
<div class="ele-border-lighter sys-organization-list">
<el-tree
ref="tree"
:data="data"
highlight-current
node-key="organizationId"
:props="{ label: 'organizationName' }"
:expand-on-click-node="false"
:default-expand-all="true"
@node-click="onNodeClick"
/>
</div>
</div>
<template v-slot:content>
<org-user-list
v-if="current"
:organization-list="data"
:organization-id="current.organizationId"
/>
</template>
</ele-split-layout>
</el-card>
<!-- 编辑弹窗 -->
<org-edit
:visible.sync="showEdit"
:data="editData"
:parent-id="parentId"
:organization-list="data"
@done="query"
/>
</div>
</template>
<script>
import OrgUserList from './components/org-user-list.vue';
import OrgEdit from './components/org-edit.vue';
import {
listOrganizations,
removeOrganization
} from '@/api/sylive/organization';
export default {
name: 'SyliveOrganization',
components: { OrgUserList, OrgEdit },
data() {
return {
// 加载状态
loading: true,
// 列表数据
data: [],
// 选中数据
current: null,
// 是否显示表单弹窗
showEdit: false,
// 编辑回显数据
editData: null,
// 上级id
parentId: null
};
},
created() {
this.query();
},
methods: {
/* 查询 */
query() {
this.loading = true;
listOrganizations()
.then((list) => {
this.loading = false;
this.data = this.$util.toTreeData({
data: list,
idField: 'organizationId',
parentIdField: 'parentId'
});
this.$nextTick(() => {
this.onNodeClick(this.data[0]);
});
})
.catch((e) => {
this.loading = false;
this.$message.error(e.message);
});
},
/* 选择数据 */
onNodeClick(row) {
if (row) {
this.current = row;
this.parentId = row.organizationId;
this.$refs.tree.setCurrentKey(row.organizationId);
} else {
this.current = null;
this.parentId = null;
}
},
/* 显示编辑 */
openEdit(item) {
this.editData = item;
this.showEdit = true;
},
/* 删除 */
remove() {
this.$confirm('确定要删除选中的机构吗?', '提示', {
type: 'warning'
})
.then(() => {
const loading = this.$loading({ lock: true });
removeOrganization(this.current.organizationId)
.then((msg) => {
loading.close();
this.$message.success(msg);
this.query();
})
.catch((e) => {
loading.close();
this.$message.error(e.message);
});
})
.catch(() => {});
}
}
};
</script>
<style lang="scss" scoped>
.sys-organization-list {
height: calc(100vh - 264px);
box-sizing: border-box;
border-width: 1px;
border-style: solid;
overflow: auto;
}
.sys-organization-list :deep(.el-tree-node__content) {
height: 40px;
& > .el-tree-node__expand-icon {
margin-left: 10px;
}
}
</style>