实现接口部分功能
This commit is contained in:
@@ -1,65 +1,37 @@
|
|||||||
import request from '/@/utils/request';
|
import request, { newService } from '/@/utils/request';
|
||||||
|
|
||||||
export function getRoleList(query: Object) {
|
//获取账号列表
|
||||||
return request({
|
export function getaccountList(data: object) {
|
||||||
url: '/api/v1/system/role/list',
|
return newService({
|
||||||
|
url: '/customerService/customer/service/account/list',
|
||||||
method: 'get',
|
method: 'get',
|
||||||
params: query,
|
data: data,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
export function getRoleParams() {
|
//添加客服账号
|
||||||
return request({
|
export function getaccountAdd(data: object) {
|
||||||
url: '/api/v1/system/role/getParams',
|
return newService({
|
||||||
method: 'get',
|
url: '/customerService/customer/service/account/add',
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function addRole(data: object) {
|
|
||||||
return request({
|
|
||||||
url: '/api/v1/system/role/add',
|
|
||||||
method: 'post',
|
method: 'post',
|
||||||
data: data,
|
data: data,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
export function getRole(id: number) {
|
//禁用账号
|
||||||
return request({
|
export function updatestate(data: object) {
|
||||||
url: '/api/v1/system/role/get',
|
return newService({
|
||||||
method: 'get',
|
url: '/customerService/customer/service/account/delete',
|
||||||
params: { id },
|
method: 'post',
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function editRole(data: object) {
|
|
||||||
return request({
|
|
||||||
url: '/api/v1/system/role/edit',
|
|
||||||
method: 'put',
|
|
||||||
data: data,
|
data: data,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
export function deleteRole(id: number) {
|
//更新账号
|
||||||
return request({
|
export function updateaccount(data: object) {
|
||||||
url: '/api/v1/system/role/delete',
|
return newService({
|
||||||
method: 'delete',
|
url: '/customerService/customer/service/account/update',
|
||||||
data: { ids: [id] },
|
method: 'post',
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function dataScope(data: any) {
|
|
||||||
return request({
|
|
||||||
url: '/api/v1/system/role/dataScope',
|
|
||||||
method: 'put',
|
|
||||||
data: data,
|
data: data,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// 根据角色ID查询部门树结构
|
|
||||||
export function roleDeptTreeSelect(roleId: number) {
|
|
||||||
return request({
|
|
||||||
url: '/api/v1/system/role/deptTreeSelect',
|
|
||||||
method: 'get',
|
|
||||||
params: { roleId },
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -1,65 +1,46 @@
|
|||||||
import request from '/@/utils/request';
|
import request, { newService } from '/@/utils/request';
|
||||||
|
|
||||||
export function getRoleList(query: Object) {
|
//添加产品
|
||||||
return request({
|
export function getproductAdd(data: object) {
|
||||||
url: '/api/v1/system/role/list',
|
return newService({
|
||||||
method: 'get',
|
url: '/customerService/product/add',
|
||||||
params: query,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function getRoleParams() {
|
|
||||||
return request({
|
|
||||||
url: '/api/v1/system/role/getParams',
|
|
||||||
method: 'get',
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function addRole(data: object) {
|
|
||||||
return request({
|
|
||||||
url: '/api/v1/system/role/add',
|
|
||||||
method: 'post',
|
method: 'post',
|
||||||
data: data,
|
data: data,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
export function getRole(id: number) {
|
//删除产品
|
||||||
return request({
|
export function deleteProduct(data: object) {
|
||||||
url: '/api/v1/system/role/get',
|
return newService({
|
||||||
method: 'get',
|
url: '/customerService/product/delete',
|
||||||
params: { id },
|
method: 'post',
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function editRole(data: object) {
|
|
||||||
return request({
|
|
||||||
url: '/api/v1/system/role/edit',
|
|
||||||
method: 'put',
|
|
||||||
data: data,
|
data: data,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
export function deleteRole(id: number) {
|
//获取产品列表
|
||||||
return request({
|
export function getList(data: object) {
|
||||||
url: '/api/v1/system/role/delete',
|
return newService({
|
||||||
method: 'delete',
|
url: '/customerService/product/list',
|
||||||
data: { ids: [id] },
|
method: 'get',
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function dataScope(data: any) {
|
|
||||||
return request({
|
|
||||||
url: '/api/v1/system/role/dataScope',
|
|
||||||
method: 'put',
|
|
||||||
data: data,
|
data: data,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// 根据角色ID查询部门树结构
|
//获取产品详情
|
||||||
export function roleDeptTreeSelect(roleId: number) {
|
export function getproductOne(data: object) {
|
||||||
return request({
|
return newService({
|
||||||
url: '/api/v1/system/role/deptTreeSelect',
|
url: '/customerService/product/one',
|
||||||
method: 'get',
|
method: 'post',
|
||||||
params: { roleId },
|
data: data,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
//更新产品
|
||||||
|
export function updateProduct(data: object) {
|
||||||
|
return newService({
|
||||||
|
url: '/customerService/product/update',
|
||||||
|
method: 'post',
|
||||||
|
data: data,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,24 +1,10 @@
|
|||||||
import request from '/@/utils/request';
|
import request, { newService } from '/@/utils/request';
|
||||||
|
|
||||||
export function logList(query: object) {
|
//获取数据列表
|
||||||
return request({
|
export function getDataList(data: object) {
|
||||||
url: '/api/v1/system/loginLog/list',
|
return newService({
|
||||||
|
url: '/customerService/data/list',
|
||||||
method: 'get',
|
method: 'get',
|
||||||
params: query,
|
data: data,
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function deleteLog(ids: number[]) {
|
|
||||||
return request({
|
|
||||||
url: '/api/v1/system/loginLog/delete',
|
|
||||||
method: 'delete',
|
|
||||||
params: { ids },
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function clearLog() {
|
|
||||||
return request({
|
|
||||||
url: '/api/v1/system/loginLog/clear',
|
|
||||||
method: 'delete',
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -4,7 +4,7 @@ import request, { newService } from '/@/utils/request';
|
|||||||
export function getscriptList(data: object) {
|
export function getscriptList(data: object) {
|
||||||
return newService({
|
return newService({
|
||||||
url: '/customerService/speechcraft/list',
|
url: '/customerService/speechcraft/list',
|
||||||
method: 'post',
|
method: 'get',
|
||||||
data: data,
|
data: data,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,37 +1,33 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="system-edit-role-container">
|
<div class="system-edit-role-container">
|
||||||
<el-dialog :title="(formData.id === 0 ? '添加' : '修改') + '客服账号'" v-model="isShowDialog" width="769px">
|
<el-dialog :title="(formData.id ? '修改' : '添加') + '客服账号'" v-model="isShowDialog" width="769px">
|
||||||
<el-form ref="formRef" :model="formData" :rules="rules" size="default" label-width="90px">
|
<el-form ref="formRef" :model="formData" :rules="rules" size="default" label-width="90px">
|
||||||
<el-row :gutter="35">
|
<el-row :gutter="35">
|
||||||
<!-- 客服ID输入框 -->
|
<!-- 客服ID输入框 -->
|
||||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
||||||
<el-form-item label="客服ID" prop="name">
|
<el-form-item label="客服ID" prop="customerServiceId">
|
||||||
<el-input v-model="formData.name" placeholder="请输入客服ID,如:987698789" clearable />
|
<el-input v-model="formData.customerServiceId" placeholder="请输入客服ID,如:CS001" clearable />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
|
|
||||||
<!-- 客服平台输入框 -->
|
<!-- 客服平台选择 -->
|
||||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
||||||
<el-form-item label="客服平台" prop="platform">
|
<el-form-item label="客服平台" prop="platform">
|
||||||
<el-input v-model="formData.platform" placeholder="请输入客服平台,如:小红书" clearable />
|
<el-select v-model="formData.platform" placeholder="请选择客服平台" clearable style="width: 100%">
|
||||||
</el-form-item>
|
<el-option label="小红书" value="小红书" />
|
||||||
</el-col>
|
<el-option label="抖音" value="抖音" />
|
||||||
|
<el-option label="快手" value="快手" />
|
||||||
<!-- 客服状态开关 -->
|
</el-select>
|
||||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
|
||||||
<el-form-item label="客服状态">
|
|
||||||
<el-switch v-model="formData.status" :active-value="1" :inactive-value="0" inline-prompt active-text="启用" inactive-text="禁用" />
|
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
</el-form>
|
</el-form>
|
||||||
|
|
||||||
<!-- 对话框底部操作按钮 -->
|
|
||||||
<template #footer>
|
<template #footer>
|
||||||
<span class="dialog-footer">
|
<span class="dialog-footer">
|
||||||
<el-button @click="onCancel" size="default">取 消</el-button>
|
<el-button @click="onCancel" size="default">取 消</el-button>
|
||||||
<el-button type="primary" @click="onSubmit" size="default" :loading="loading">
|
<el-button type="primary" @click="onSubmit" size="default" :loading="loading">
|
||||||
{{ formData.id === 0 ? '新 增' : '修 改' }}
|
{{ formData.id ? '修 改' : '新 增' }}
|
||||||
</el-button>
|
</el-button>
|
||||||
</span>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
@@ -40,135 +36,69 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { ref, reactive, toRefs, nextTick, defineEmits, defineExpose } from 'vue';
|
import { ref, reactive, toRefs, nextTick } from 'vue';
|
||||||
import { ElMessage, type FormInstance, type FormRules } from 'element-plus';
|
import { ElMessage, type FormInstance, type FormRules } from 'element-plus';
|
||||||
import { addRole, editRole, getRole } from '/@/api/system/role';
|
import { getaccountAdd, updateaccount } from '/@/api/customerService/account';
|
||||||
|
import { Session } from '/@/utils/storage';
|
||||||
|
|
||||||
/**
|
|
||||||
* 菜单数据结构接口
|
|
||||||
*/
|
|
||||||
interface MenuDataTree {
|
|
||||||
id: number;
|
|
||||||
pid: number;
|
|
||||||
title: string;
|
|
||||||
children?: MenuDataTree[];
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 表单数据接口
|
|
||||||
*/
|
|
||||||
interface DialogFormData {
|
interface DialogFormData {
|
||||||
id: number;
|
id?: string;
|
||||||
name: string; // 客服ID
|
customerServiceId: string;
|
||||||
platform: string; // 客服平台
|
platform: string;
|
||||||
status: number; // 状态:0-禁用,1-启用
|
status: number;
|
||||||
listOrder: number; // 排序
|
creator: '';
|
||||||
remark: string; // 备注
|
modifier: '';
|
||||||
menuIds: number[]; // 菜单ID数组
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* 组件状态接口
|
|
||||||
*/
|
|
||||||
interface ComponentState {
|
|
||||||
loading: boolean; // 提交加载状态
|
|
||||||
isShowDialog: boolean; // 对话框显示状态
|
|
||||||
formData: DialogFormData; // 表单数据
|
|
||||||
menuData: MenuDataTree[]; // 菜单数据
|
|
||||||
menuExpand: boolean; // 菜单展开状态
|
|
||||||
menuNodeAll: boolean; // 菜单全选状态
|
|
||||||
menuCheckStrictly: boolean; // 菜单严格选择模式
|
|
||||||
}
|
|
||||||
|
|
||||||
// 定义组件事件
|
|
||||||
const emit = defineEmits<{
|
const emit = defineEmits<{
|
||||||
/**
|
|
||||||
* 获取角色列表事件
|
|
||||||
*/
|
|
||||||
(e: 'getRoleList'): void;
|
(e: 'getRoleList'): void;
|
||||||
}>();
|
}>();
|
||||||
|
|
||||||
// 响应式状态管理
|
const state = reactive({
|
||||||
const state = reactive<ComponentState>({
|
|
||||||
loading: false,
|
loading: false,
|
||||||
isShowDialog: false,
|
isShowDialog: false,
|
||||||
formData: {
|
formData: {
|
||||||
id: 0,
|
id: '',
|
||||||
name: '',
|
customerServiceId: '',
|
||||||
platform: '',
|
platform: '',
|
||||||
status: 1,
|
status: 1,
|
||||||
listOrder: 0,
|
creator: '',
|
||||||
remark: '',
|
modifier: '',
|
||||||
menuIds: [],
|
} as DialogFormData,
|
||||||
},
|
|
||||||
menuData: [],
|
|
||||||
menuExpand: false,
|
|
||||||
menuNodeAll: false,
|
|
||||||
menuCheckStrictly: false,
|
|
||||||
});
|
});
|
||||||
|
|
||||||
// 表单验证规则
|
|
||||||
const rules: FormRules = {
|
const rules: FormRules = {
|
||||||
name: [
|
customerServiceId: [
|
||||||
{ required: true, message: '客服ID不能为空', trigger: 'blur' },
|
{ required: true, message: '客服ID不能为空', trigger: 'blur' },
|
||||||
{ min: 3, max: 20, message: '客服ID长度在 3 到 20 个字符', trigger: 'blur' },
|
{ min: 2, max: 50, message: '客服ID长度在 2 到 50 个字符', trigger: 'blur' },
|
||||||
],
|
],
|
||||||
platform: [{ required: true, message: '客服平台不能为空', trigger: 'blur' }],
|
platform: [{ required: true, message: '请选择客服平台', trigger: 'change' }],
|
||||||
};
|
};
|
||||||
|
|
||||||
// 模板引用
|
|
||||||
const formRef = ref<FormInstance>();
|
const formRef = ref<FormInstance>();
|
||||||
|
const { loading, isShowDialog, formData } = toRefs(state);
|
||||||
// 解构状态数据,便于模板使用
|
|
||||||
const { loading, isShowDialog, formData, menuData, menuExpand, menuNodeAll, menuCheckStrictly } = toRefs(state);
|
|
||||||
|
|
||||||
// 菜单树配置
|
|
||||||
const menuProps = {
|
|
||||||
children: 'children',
|
|
||||||
label: 'title',
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 打开对话框
|
* 打开对话框
|
||||||
* @param row - 可选的编辑数据,如果传入则为编辑模式,否则为新增模式
|
|
||||||
*/
|
*/
|
||||||
const openDialog = async (row?: DialogFormData) => {
|
const openDialog = (row?: DialogFormData) => {
|
||||||
// 重置表单状态
|
|
||||||
resetForm();
|
resetForm();
|
||||||
|
|
||||||
try {
|
if (row && row.id) {
|
||||||
if (row && row.id) {
|
// 编辑模式:填充数据
|
||||||
// 编辑模式:获取角色详情
|
state.formData = { ...row };
|
||||||
await handleEditMode(row.id);
|
} else {
|
||||||
}
|
// 新增模式:重置ID和状态
|
||||||
|
state.formData.id = '';
|
||||||
// 显示对话框
|
state.formData.status = 1;
|
||||||
state.isShowDialog = true;
|
|
||||||
} catch (error) {
|
|
||||||
console.error('打开对话框失败:', error);
|
|
||||||
ElMessage.error('初始化数据失败');
|
|
||||||
}
|
}
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
state.isShowDialog = true;
|
||||||
* 处理编辑模式的数据获取
|
|
||||||
* @param id - 角色ID
|
// 下次DOM更新后清除验证
|
||||||
*/
|
nextTick(() => {
|
||||||
const handleEditMode = async (id: number) => {
|
formRef.value?.clearValidate();
|
||||||
try {
|
});
|
||||||
const res = await getRole(id);
|
|
||||||
if (res.data?.role) {
|
|
||||||
// 填充表单数据
|
|
||||||
state.formData = {
|
|
||||||
...res.data.role,
|
|
||||||
platform: res.data.role.platform || '',
|
|
||||||
menuIds: res.data.menuIds ?? [],
|
|
||||||
};
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error('获取角色详情失败:', error);
|
|
||||||
throw new Error('获取角色详情失败');
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -189,131 +119,66 @@ const onCancel = () => {
|
|||||||
* 提交表单
|
* 提交表单
|
||||||
*/
|
*/
|
||||||
const onSubmit = async () => {
|
const onSubmit = async () => {
|
||||||
// 验证表单引用是否存在
|
if (!formRef.value) return;
|
||||||
if (!formRef.value) {
|
|
||||||
ElMessage.error('表单引用不存在');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
try {
|
||||||
// 表单验证
|
|
||||||
const valid = await formRef.value.validate();
|
const valid = await formRef.value.validate();
|
||||||
if (!valid) {
|
if (!valid) return;
|
||||||
ElMessage.warning('请完善表单信息');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 设置加载状态
|
|
||||||
state.loading = true;
|
state.loading = true;
|
||||||
|
|
||||||
// 根据ID判断是新增还是修改
|
if (state.formData.id) {
|
||||||
if (state.formData.id === 0) {
|
// 修改操作 - 不包含状态字段
|
||||||
// 新增操作
|
const updateData = {
|
||||||
await handleAddRole();
|
id: state.formData.id,
|
||||||
|
customerServiceId: state.formData.customerServiceId,
|
||||||
|
platform: state.formData.platform,
|
||||||
|
// 注意:修改时不传递status,状态通过单独的开关控制\
|
||||||
|
modifier: Session.get('userInfo').userNickname,
|
||||||
|
};
|
||||||
|
await updateaccount(updateData);
|
||||||
|
ElMessage.success('修改成功');
|
||||||
} else {
|
} else {
|
||||||
// 修改操作
|
// 新增操作
|
||||||
await handleEditRole();
|
state.formData.creator = Session.get('userInfo').userNickname;
|
||||||
|
await getaccountAdd(state.formData);
|
||||||
|
ElMessage.success('添加成功');
|
||||||
}
|
}
|
||||||
|
|
||||||
// 关闭对话框并刷新列表
|
|
||||||
closeDialog();
|
closeDialog();
|
||||||
emit('getRoleList');
|
emit('getRoleList');
|
||||||
ElMessage.success(state.formData.id === 0 ? '添加成功' : '修改成功');
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('提交失败:', error);
|
console.error('操作失败:', error);
|
||||||
ElMessage.error(state.formData.id === 0 ? '添加失败' : '修改失败');
|
ElMessage.error(state.formData.id ? '修改失败' : '添加失败');
|
||||||
} finally {
|
} finally {
|
||||||
// 无论成功失败,都取消加载状态
|
|
||||||
state.loading = false;
|
state.loading = false;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
|
||||||
* 处理新增角色
|
|
||||||
*/
|
|
||||||
const handleAddRole = async () => {
|
|
||||||
await addRole(state.formData);
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 处理编辑角色
|
|
||||||
*/
|
|
||||||
const handleEditRole = async () => {
|
|
||||||
await editRole(state.formData);
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 重置表单
|
* 重置表单
|
||||||
*/
|
*/
|
||||||
const resetForm = () => {
|
const resetForm = () => {
|
||||||
// 重置菜单选择状态
|
|
||||||
state.menuCheckStrictly = false;
|
|
||||||
state.menuExpand = false;
|
|
||||||
state.menuNodeAll = false;
|
|
||||||
|
|
||||||
// 重置表单数据
|
|
||||||
state.formData = {
|
state.formData = {
|
||||||
id: 0,
|
id: '',
|
||||||
name: '',
|
customerServiceId: '',
|
||||||
platform: '',
|
platform: '',
|
||||||
status: 1,
|
status: 1,
|
||||||
listOrder: 0,
|
creator: '',
|
||||||
remark: '',
|
modifier: '',
|
||||||
menuIds: [],
|
|
||||||
};
|
};
|
||||||
|
|
||||||
// 在下一个DOM更新周期后清除表单验证
|
|
||||||
nextTick(() => {
|
|
||||||
formRef.value?.clearValidate();
|
|
||||||
});
|
|
||||||
};
|
};
|
||||||
|
|
||||||
// 暴露方法给父组件使用
|
|
||||||
defineExpose({
|
defineExpose({
|
||||||
/**
|
|
||||||
* 打开对话框方法
|
|
||||||
*/
|
|
||||||
openDialog,
|
openDialog,
|
||||||
|
|
||||||
/**
|
|
||||||
* 关闭对话框方法
|
|
||||||
*/
|
|
||||||
closeDialog,
|
closeDialog,
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped>
|
||||||
.system-edit-role-container {
|
.status-tip {
|
||||||
// 对话框内容区域样式
|
font-size: 12px;
|
||||||
:deep(.el-dialog__body) {
|
color: #999;
|
||||||
padding: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 底部按钮区域样式
|
|
||||||
.dialog-footer {
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
align-items: center;
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 间距工具类
|
|
||||||
.mb20 {
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 树形组件边框样式
|
|
||||||
.tree-border {
|
|
||||||
margin-top: 5px;
|
margin-top: 5px;
|
||||||
border: 1px solid #e5e6e7;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 菜单数据树样式
|
|
||||||
.menu-data-tree {
|
|
||||||
border: var(--el-input-border, var(--el-border-base));
|
|
||||||
border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
|
|
||||||
padding: 5px;
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -4,13 +4,13 @@
|
|||||||
<div class="system-user-search mb15">
|
<div class="system-user-search mb15">
|
||||||
<el-form :inline="true">
|
<el-form :inline="true">
|
||||||
<el-form-item label="客服ID">
|
<el-form-item label="客服ID">
|
||||||
<el-input size="default" v-model="tableData.param.roleName" placeholder="请输入客服ID" class="w-50 m-2" clearable />
|
<el-input size="default" v-model="tableData.param.customerServiceId" placeholder="请输入客服ID" class="w-50 m-2" clearable />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="客服平台" prop="status" style="width: 200px">
|
<el-form-item label="客服平台" prop="status" style="width: 200px">
|
||||||
<el-select v-model="tableData.param.platform" placeholder="请选择客服平台" clearable size="default" style="width: 240px">
|
<el-select v-model="tableData.param.platform" placeholder="请选择客服平台" clearable size="default" style="width: 240px">
|
||||||
<el-option label="小红书" value="xiaohongshu" />
|
<el-option label="小红书" value="小红书" />
|
||||||
<el-option label="抖音" value="douyin" />
|
<el-option label="抖音" value="抖音" />
|
||||||
<el-option label="快手" value="kuaishou" />
|
<el-option label="快手" value="快手" />
|
||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item>
|
<el-form-item>
|
||||||
@@ -31,26 +31,29 @@
|
|||||||
</div>
|
</div>
|
||||||
<el-table :data="tableData.data" style="width: 100%" v-loading="tableData.loading">
|
<el-table :data="tableData.data" style="width: 100%" v-loading="tableData.loading">
|
||||||
<el-table-column type="index" label="序号" width="60" />
|
<el-table-column type="index" label="序号" width="60" />
|
||||||
<el-table-column prop="name" label="客服ID" show-overflow-tooltip></el-table-column>
|
<el-table-column prop="customerServiceId" label="客服ID" show-overflow-tooltip></el-table-column>
|
||||||
<el-table-column prop="status" label="客服状态" show-overflow-tooltip>
|
<el-table-column prop="status" label="客服状态" show-overflow-tooltip>
|
||||||
<template #default="scope">
|
<template #default="scope">
|
||||||
<el-tag type="success" v-if="scope.row.status === 1">启用</el-tag>
|
<el-button
|
||||||
<el-tag type="info" v-else>禁用</el-tag>
|
size="small"
|
||||||
|
:type="scope.row.status === 1 ? 'success' : 'info'"
|
||||||
|
@click="handleStatusChange(scope.row)"
|
||||||
|
:loading="scope.row.statusLoading"
|
||||||
|
>
|
||||||
|
{{ scope.row.status === 1 ? '启用' : '禁用' }}
|
||||||
|
</el-button>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column prop="remark" label="客服平台" show-overflow-tooltip></el-table-column>
|
<el-table-column prop="platform" label="客服平台" show-overflow-tooltip></el-table-column>
|
||||||
<el-table-column prop="creator" label="创建人" show-overflow-tooltip></el-table-column>
|
<el-table-column prop="creator" label="创建人" show-overflow-tooltip></el-table-column>
|
||||||
<el-table-column prop="updater" label="修改人" show-overflow-tooltip></el-table-column>
|
<el-table-column prop="modifier" label="修改人" show-overflow-tooltip></el-table-column>
|
||||||
<el-table-column prop="createdAt" label="创建时间" show-overflow-tooltip></el-table-column>
|
<el-table-column prop="createdAtString" label="创建时间" show-overflow-tooltip></el-table-column>
|
||||||
<el-table-column prop="updatedAt" label="修改时间" show-overflow-tooltip></el-table-column>
|
<el-table-column prop="updatedAtString" label="修改时间" show-overflow-tooltip></el-table-column>
|
||||||
<el-table-column label="操作" width="220">
|
<el-table-column label="操作" width="220">
|
||||||
<template #default="scope">
|
<template #default="scope">
|
||||||
<el-button size="small" text type="primary" @click="onOpenEditRole(scope.row)">
|
<el-button style="color: deepskyblue" size="small" text type="primary" @click="onOpenEditRole(scope.row)">
|
||||||
<el-icon><ele-EditPen /></el-icon>修改
|
<el-icon><ele-EditPen /></el-icon>修改
|
||||||
</el-button>
|
</el-button>
|
||||||
<el-button size="small" text type="primary" @click="onRowDel(scope.row)">
|
|
||||||
<el-icon><ele-DeleteFilled /></el-icon>删除
|
|
||||||
</el-button>
|
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
</el-table>
|
</el-table>
|
||||||
@@ -59,40 +62,41 @@
|
|||||||
:total="tableData.total"
|
:total="tableData.total"
|
||||||
v-model:page="tableData.param.pageNum"
|
v-model:page="tableData.param.pageNum"
|
||||||
v-model:limit="tableData.param.pageSize"
|
v-model:limit="tableData.param.pageSize"
|
||||||
@pagination="handlePaginationChange"
|
@pagination="getList"
|
||||||
/>
|
/>
|
||||||
</el-card>
|
</el-card>
|
||||||
<EditRole ref="editRoleRef" @getRoleList="roleList" />
|
<EditRole ref="editRoleRef" @getRoleList="getList" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { ref, reactive, onMounted, nextTick } from 'vue';
|
import { ref, reactive, onMounted } from 'vue';
|
||||||
import { ElMessageBox, ElMessage } from 'element-plus';
|
import { ElMessageBox, ElMessage } from 'element-plus';
|
||||||
import EditRole from '/@/views/customerService/account/component/editRole.vue';
|
import EditRole from '/@/views/customerService/account/component/editRole.vue';
|
||||||
import { deleteRole, getRoleList } from '/@/api/customerService/account';
|
import { getaccountAdd, getaccountList, updatestate } from '/@/api/customerService/account';
|
||||||
|
import { number } from 'echarts';
|
||||||
|
|
||||||
// 定义类型接口
|
// 定义类型接口
|
||||||
interface TableDataItem {
|
interface TableDataItem {
|
||||||
id: number;
|
id: string;
|
||||||
|
customerServiceId: string;
|
||||||
status: number;
|
status: number;
|
||||||
listOrder: number;
|
platform: string;
|
||||||
name: string;
|
creator: string;
|
||||||
remark: string;
|
modifier: string;
|
||||||
dataScope: number;
|
createdAt: number;
|
||||||
createdAt: string;
|
createdAtString: string;
|
||||||
updatedAt: string;
|
updatedAt: number;
|
||||||
key: string;
|
updatedAtString: string;
|
||||||
creator?: string;
|
statusLoading?: boolean;
|
||||||
updater?: string;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
interface TableParam {
|
interface TableParam {
|
||||||
roleName: string;
|
customerServiceId: string;
|
||||||
platform: string;
|
platform: string;
|
||||||
roleStatus: string;
|
|
||||||
pageNum: number;
|
pageNum: number;
|
||||||
pageSize: number;
|
pageSize: number;
|
||||||
|
status: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface TableState {
|
interface TableState {
|
||||||
@@ -102,99 +106,17 @@ interface TableState {
|
|||||||
param: TableParam;
|
param: TableParam;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 模拟数据
|
|
||||||
const mockData: TableDataItem[] = [
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
status: 1,
|
|
||||||
listOrder: 0,
|
|
||||||
name: '987698789',
|
|
||||||
remark: '小红书',
|
|
||||||
dataScope: 3,
|
|
||||||
createdAt: '2022-04-01 11:38:39',
|
|
||||||
updatedAt: '2022-04-28 10:00:15',
|
|
||||||
key: 'list',
|
|
||||||
creator: '张三',
|
|
||||||
updater: '李四',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 2,
|
|
||||||
status: 1,
|
|
||||||
listOrder: 0,
|
|
||||||
name: '987698789',
|
|
||||||
remark: '抖音',
|
|
||||||
dataScope: 3,
|
|
||||||
createdAt: '2022-04-01 11:38:39',
|
|
||||||
updatedAt: '2022-04-28 10:01:34',
|
|
||||||
key: 'list',
|
|
||||||
creator: '王五',
|
|
||||||
updater: '赵六',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 3,
|
|
||||||
status: 1,
|
|
||||||
listOrder: 0,
|
|
||||||
name: '987698789',
|
|
||||||
remark: '快手',
|
|
||||||
dataScope: 3,
|
|
||||||
createdAt: '2022-04-01 11:38:39',
|
|
||||||
updatedAt: '2022-04-01 11:38:39',
|
|
||||||
key: '李四',
|
|
||||||
creator: '孙七',
|
|
||||||
updater: '周八',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 4,
|
|
||||||
status: 1,
|
|
||||||
listOrder: 0,
|
|
||||||
name: '987698789',
|
|
||||||
remark: '抖音',
|
|
||||||
dataScope: 3,
|
|
||||||
createdAt: '2022-04-01 11:38:39',
|
|
||||||
updatedAt: '2022-04-01 11:38:39',
|
|
||||||
key: '张三',
|
|
||||||
creator: '吴九',
|
|
||||||
updater: '郑十',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 5,
|
|
||||||
status: 1,
|
|
||||||
listOrder: 0,
|
|
||||||
name: '987698789',
|
|
||||||
remark: '抖音',
|
|
||||||
dataScope: 2,
|
|
||||||
createdAt: '2022-04-01 11:38:39',
|
|
||||||
updatedAt: '2022-04-01 11:38:39',
|
|
||||||
key: 'zhang',
|
|
||||||
creator: '钱一',
|
|
||||||
updater: '孙二',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 8,
|
|
||||||
status: 1,
|
|
||||||
listOrder: 0,
|
|
||||||
name: '987698789',
|
|
||||||
remark: '快手',
|
|
||||||
dataScope: 2,
|
|
||||||
createdAt: '2022-04-01 11:38:39',
|
|
||||||
updatedAt: '2022-04-06 09:53:40',
|
|
||||||
key: 'list',
|
|
||||||
creator: '李三',
|
|
||||||
updater: '王四',
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
// 响应式数据
|
// 响应式数据
|
||||||
const tableData = reactive<TableState>({
|
const tableData = reactive<TableState>({
|
||||||
data: [],
|
data: [],
|
||||||
total: 0,
|
total: 0,
|
||||||
loading: false,
|
loading: false,
|
||||||
param: {
|
param: {
|
||||||
roleName: '',
|
customerServiceId: '',
|
||||||
platform: '',
|
platform: '',
|
||||||
roleStatus: '',
|
|
||||||
pageNum: 1,
|
pageNum: 1,
|
||||||
pageSize: 10,
|
pageSize: 10,
|
||||||
|
status: 0,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -202,23 +124,19 @@ const tableData = reactive<TableState>({
|
|||||||
const editRoleRef = ref<InstanceType<typeof EditRole>>();
|
const editRoleRef = ref<InstanceType<typeof EditRole>>();
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 获取角色列表
|
* 获取客服账号列表
|
||||||
*/
|
*/
|
||||||
const roleList = async () => {
|
const getList = async () => {
|
||||||
try {
|
try {
|
||||||
tableData.loading = true;
|
tableData.loading = true;
|
||||||
|
const res = await getaccountList(tableData.param);
|
||||||
// 实际API调用
|
tableData.data = (res.data.list || []).map((item: TableDataItem) => ({
|
||||||
// const res = await getRoleList(tableData.param);
|
...item,
|
||||||
// tableData.data = res.data.list || [];
|
statusLoading: false,
|
||||||
// tableData.total = res.data.total || 0;
|
}));
|
||||||
|
tableData.total = res.data.total || 0;
|
||||||
// 模拟数据
|
|
||||||
await new Promise((resolve) => setTimeout(resolve, 500)); // 模拟网络延迟
|
|
||||||
tableData.data = mockData;
|
|
||||||
tableData.total = mockData.length;
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('获取角色列表失败:', error);
|
console.error('获取客服账号列表失败:', error);
|
||||||
ElMessage.error('获取数据失败');
|
ElMessage.error('获取数据失败');
|
||||||
} finally {
|
} finally {
|
||||||
tableData.loading = false;
|
tableData.loading = false;
|
||||||
@@ -226,78 +144,79 @@ const roleList = async () => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 处理搜索
|
* 处理客服状态切换
|
||||||
|
* @param row - 客服数据
|
||||||
*/
|
*/
|
||||||
const handleSearch = () => {
|
const handleStatusChange = async (row: TableDataItem) => {
|
||||||
tableData.param.pageNum = 1; // 重置到第一页
|
|
||||||
roleList();
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 处理分页变化
|
|
||||||
* @param pagination - 分页参数
|
|
||||||
*/
|
|
||||||
const handlePaginationChange = (pagination: { page: number; limit: number }) => {
|
|
||||||
tableData.param.pageNum = pagination.page;
|
|
||||||
tableData.param.pageSize = pagination.limit;
|
|
||||||
roleList();
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 打开新增角色对话框
|
|
||||||
*/
|
|
||||||
const onOpenAddRole = () => {
|
|
||||||
if (editRoleRef.value) {
|
|
||||||
editRoleRef.value.openDialog();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 打开编辑角色对话框
|
|
||||||
* @param row - 角色数据
|
|
||||||
*/
|
|
||||||
const onOpenEditRole = (row: TableDataItem) => {
|
|
||||||
if (editRoleRef.value) {
|
|
||||||
editRoleRef.value.openDialog();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 删除角色
|
|
||||||
* @param row - 角色数据
|
|
||||||
*/
|
|
||||||
const onRowDel = async (row: TableDataItem) => {
|
|
||||||
try {
|
try {
|
||||||
await ElMessageBox.confirm(`此操作将永久删除客服账号:"${row.name}",是否继续?`, '提示', {
|
await ElMessageBox.confirm(`确定要${row.status === 1 ? '禁用' : '启用'}客服账号 "${row.customerServiceId}" 吗?`, '提示', {
|
||||||
confirmButtonText: '确认',
|
confirmButtonText: '确定',
|
||||||
cancelButtonText: '取消',
|
cancelButtonText: '取消',
|
||||||
type: 'warning',
|
type: 'warning',
|
||||||
});
|
});
|
||||||
|
|
||||||
// 实际删除操作
|
row.statusLoading = true;
|
||||||
// await deleteRole(row.id);
|
const newStatus = row.status === 1 ? 0 : 1;
|
||||||
|
// 调用状态更新接口
|
||||||
|
await updatestate({
|
||||||
|
id: row.id,
|
||||||
|
status: newStatus,
|
||||||
|
});
|
||||||
|
|
||||||
// 模拟删除成功
|
ElMessage.success(`客服账号已${newStatus === 1 ? '启用' : '禁用'}`);
|
||||||
ElMessage.success('删除成功');
|
|
||||||
|
|
||||||
// 刷新列表
|
// 重新获取数据确保数据同步
|
||||||
await roleList();
|
await getList();
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
// 用户取消操作,不处理
|
if (error === 'cancel') {
|
||||||
console.log('用户取消删除操作');
|
console.log('用户取消状态切换');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
console.error('状态切换失败:', error);
|
||||||
|
ElMessage.error('状态切换失败');
|
||||||
|
} finally {
|
||||||
|
setTimeout(() => {
|
||||||
|
row.statusLoading = false;
|
||||||
|
}, 300);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 初始化表格数据
|
* 处理搜索
|
||||||
*/
|
*/
|
||||||
const initTableData = () => {
|
const handleSearch = () => {
|
||||||
roleList();
|
tableData.param.pageNum = 1;
|
||||||
|
getList();
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 处理分页变化
|
||||||
|
* @param pagination - 分页参数 { page: number, limit: number }
|
||||||
|
*/
|
||||||
|
const handlePaginationChange = (pagination: { page: number; limit: number }) => {
|
||||||
|
console.log('分页参数:', pagination.limit); // 调试用
|
||||||
|
tableData.param.pageNum = pagination.page;
|
||||||
|
tableData.param.pageSize = pagination.limit;
|
||||||
|
getList();
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 打开新增客服对话框
|
||||||
|
*/
|
||||||
|
const onOpenAddRole = () => {
|
||||||
|
editRoleRef.value?.openDialog();
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 打开编辑客服对话框
|
||||||
|
*/
|
||||||
|
const onOpenEditRole = (row: TableDataItem) => {
|
||||||
|
editRoleRef.value?.openDialog(row);
|
||||||
};
|
};
|
||||||
|
|
||||||
// 生命周期
|
// 生命周期
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
initTableData();
|
getList();
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@@ -35,8 +35,10 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { ref, reactive, toRefs, nextTick } from 'vue';
|
import { ref, reactive, toRefs, nextTick } from 'vue';
|
||||||
import { ElMessage, type FormInstance, type FormRules } from 'element-plus';
|
import { ElMessage, type FormInstance, type FormRules } from 'element-plus';
|
||||||
import { addRole, editRole, getRole } from '/@/api/system/role';
|
import { getproductAdd, updateProduct, getproductOne } from '/@/api/customerService/product';
|
||||||
import Editor from '/@/components/editor/index.vue';
|
import Editor from '/@/components/editor/index.vue';
|
||||||
|
import { Session } from '/@/utils/storage';
|
||||||
|
import { log } from 'node:console';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 产品表单数据接口
|
* 产品表单数据接口
|
||||||
@@ -44,10 +46,9 @@ import Editor from '/@/components/editor/index.vue';
|
|||||||
interface ProductFormData {
|
interface ProductFormData {
|
||||||
id: number; // 产品ID
|
id: number; // 产品ID
|
||||||
name: string; // 产品名称
|
name: string; // 产品名称
|
||||||
status: number; // 状态:1-启用,0-禁用
|
|
||||||
listOrder: number; // 排序
|
|
||||||
remark: string; // 备注
|
|
||||||
content?: string; // 产品详情(富文本内容)
|
content?: string; // 产品详情(富文本内容)
|
||||||
|
creator: '';
|
||||||
|
modifier: '';
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -74,10 +75,9 @@ const state = reactive<ComponentState>({
|
|||||||
formData: {
|
formData: {
|
||||||
id: 0,
|
id: 0,
|
||||||
name: '',
|
name: '',
|
||||||
status: 1,
|
|
||||||
listOrder: 0,
|
|
||||||
remark: '',
|
|
||||||
content: '',
|
content: '',
|
||||||
|
creator: '',
|
||||||
|
modifier: '',
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -124,13 +124,11 @@ const openDialog = async (row?: ProductFormData) => {
|
|||||||
*/
|
*/
|
||||||
const handleEditMode = async (id: number) => {
|
const handleEditMode = async (id: number) => {
|
||||||
try {
|
try {
|
||||||
const res = await getRole(id);
|
const res = await getproductOne({ id: id });
|
||||||
if (res.data?.role) {
|
if (res.data) {
|
||||||
// 填充表单数据
|
// 填充表单数据
|
||||||
state.formData = {
|
// state.formData = res.data;
|
||||||
...res.data.role,
|
console.log(res.data, 'for');
|
||||||
content: res.data.role.content || '',
|
|
||||||
};
|
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('获取产品详情失败:', error);
|
console.error('获取产品详情失败:', error);
|
||||||
@@ -175,11 +173,14 @@ const onSubmit = async () => {
|
|||||||
// 根据ID判断是新增还是修改
|
// 根据ID判断是新增还是修改
|
||||||
if (state.formData.id === 0) {
|
if (state.formData.id === 0) {
|
||||||
// 新增产品
|
// 新增产品
|
||||||
await addRole(state.formData);
|
state.formData.creator = Session.get('userInfo').userNickname;
|
||||||
|
await getproductAdd(state.formData);
|
||||||
ElMessage.success('产品添加成功');
|
ElMessage.success('产品添加成功');
|
||||||
} else {
|
} else {
|
||||||
// 修改产品
|
// 修改产品
|
||||||
await editRole(state.formData);
|
state.formData.modifier = Session.get('userInfo').userNickname;
|
||||||
|
|
||||||
|
await updateProduct(state.formData);
|
||||||
ElMessage.success('产品修改成功');
|
ElMessage.success('产品修改成功');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -43,8 +43,8 @@
|
|||||||
<el-table-column prop="name" label="产品名称" show-overflow-tooltip />
|
<el-table-column prop="name" label="产品名称" show-overflow-tooltip />
|
||||||
<el-table-column prop="creator" label="创建人" show-overflow-tooltip />
|
<el-table-column prop="creator" label="创建人" show-overflow-tooltip />
|
||||||
<el-table-column prop="updater" label="修改人" show-overflow-tooltip />
|
<el-table-column prop="updater" label="修改人" show-overflow-tooltip />
|
||||||
<el-table-column prop="createdAt" label="创建时间" show-overflow-tooltip />
|
<el-table-column prop="createdAtString" label="创建时间" show-overflow-tooltip />
|
||||||
<el-table-column prop="updatedAt" label="修改时间" show-overflow-tooltip />
|
<el-table-column prop="updatedAtString" label="修改时间" show-overflow-tooltip />
|
||||||
<el-table-column label="操作" width="220">
|
<el-table-column label="操作" width="220">
|
||||||
<template #default="scope">
|
<template #default="scope">
|
||||||
<el-button size="small" text type="primary" @click="onOpenEditRole(scope.row)">
|
<el-button size="small" text type="primary" @click="onOpenEditRole(scope.row)">
|
||||||
@@ -82,7 +82,7 @@ import { ElMessageBox, ElMessage } from 'element-plus';
|
|||||||
import EditRole from '/@/views/customerService/product/component/editRole.vue';
|
import EditRole from '/@/views/customerService/product/component/editRole.vue';
|
||||||
import ImportDialog from '/@/views/customerService/product/component/importDialog.vue';
|
import ImportDialog from '/@/views/customerService/product/component/importDialog.vue';
|
||||||
import ExportDialog from '/@/views/customerService/product/component/exportDialog.vue';
|
import ExportDialog from '/@/views/customerService/product/component/exportDialog.vue';
|
||||||
import { deleteRole, getRoleList } from '/@/api/customerService/product';
|
import { deleteProduct, getList, getproductAdd } from '/@/api/customerService/product';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 产品数据接口
|
* 产品数据接口
|
||||||
@@ -123,80 +123,6 @@ interface TableState {
|
|||||||
/**
|
/**
|
||||||
* 模拟产品数据
|
* 模拟产品数据
|
||||||
*/
|
*/
|
||||||
const mockProductData: ProductData[] = [
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
status: 1,
|
|
||||||
listOrder: 0,
|
|
||||||
name: 'xxx药品',
|
|
||||||
creator: '张三',
|
|
||||||
updater: '李四',
|
|
||||||
remark: '药品描述',
|
|
||||||
dataScope: 3,
|
|
||||||
createdAt: '2022-04-01 11:38:39',
|
|
||||||
updatedAt: '2022-04-28 10:00:15',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 2,
|
|
||||||
status: 1,
|
|
||||||
listOrder: 0,
|
|
||||||
name: 'yyy医疗器械',
|
|
||||||
creator: '王五',
|
|
||||||
updater: '赵六',
|
|
||||||
remark: '医疗器械描述',
|
|
||||||
dataScope: 3,
|
|
||||||
createdAt: '2022-04-01 11:38:39',
|
|
||||||
updatedAt: '2022-04-28 10:01:34',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 3,
|
|
||||||
status: 1,
|
|
||||||
listOrder: 0,
|
|
||||||
name: 'zzz保健品',
|
|
||||||
creator: '孙七',
|
|
||||||
updater: '周八',
|
|
||||||
remark: '保健品描述',
|
|
||||||
dataScope: 3,
|
|
||||||
createdAt: '2022-04-01 11:38:39',
|
|
||||||
updatedAt: '2022-04-01 11:38:39',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 4,
|
|
||||||
status: 1,
|
|
||||||
listOrder: 0,
|
|
||||||
name: 'aaa化妆品',
|
|
||||||
creator: '吴九',
|
|
||||||
updater: '郑十',
|
|
||||||
remark: '化妆品描述',
|
|
||||||
dataScope: 3,
|
|
||||||
createdAt: '2022-04-01 11:38:39',
|
|
||||||
updatedAt: '2022-04-01 11:38:39',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 5,
|
|
||||||
status: 1,
|
|
||||||
listOrder: 0,
|
|
||||||
name: 'bbb药品',
|
|
||||||
creator: '钱一',
|
|
||||||
updater: '孙二',
|
|
||||||
remark: '药品描述',
|
|
||||||
dataScope: 2,
|
|
||||||
createdAt: '2022-04-01 11:38:39',
|
|
||||||
updatedAt: '2022-04-01 11:38:39',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 8,
|
|
||||||
status: 1,
|
|
||||||
listOrder: 0,
|
|
||||||
name: 'ccc医疗器械',
|
|
||||||
creator: '李三',
|
|
||||||
updater: '王四',
|
|
||||||
remark: '医疗器械描述',
|
|
||||||
dataScope: 2,
|
|
||||||
createdAt: '2022-04-01 11:38:39',
|
|
||||||
updatedAt: '2022-04-06 09:53:40',
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
// 响应式状态
|
// 响应式状态
|
||||||
const tableData = reactive<TableState>({
|
const tableData = reactive<TableState>({
|
||||||
@@ -223,21 +149,11 @@ const getProductList = async () => {
|
|||||||
try {
|
try {
|
||||||
tableData.loading = true;
|
tableData.loading = true;
|
||||||
|
|
||||||
// 实际API调用 - 注释掉模拟数据后取消注释
|
const res = await getList(tableData.param);
|
||||||
// const res = await getRoleList(tableData.param);
|
if (res.data?.list) {
|
||||||
// if (res.data?.list) {
|
tableData.data = res.data.list;
|
||||||
// tableData.data = res.data.list;
|
tableData.total = res.data.total;
|
||||||
// tableData.total = res.data.total;
|
}
|
||||||
// }
|
|
||||||
|
|
||||||
// 模拟数据 - 添加延迟模拟网络请求
|
|
||||||
await new Promise((resolve) => setTimeout(resolve, 500));
|
|
||||||
|
|
||||||
// 根据产品名称过滤数据
|
|
||||||
const filteredData = mockProductData.filter((item) => !tableData.param.productName || item.name.includes(tableData.param.productName));
|
|
||||||
|
|
||||||
tableData.data = filteredData;
|
|
||||||
tableData.total = filteredData.length;
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('获取产品列表失败:', error);
|
console.error('获取产品列表失败:', error);
|
||||||
ElMessage.error('获取产品列表失败');
|
ElMessage.error('获取产品列表失败');
|
||||||
@@ -312,9 +228,10 @@ const onRowDel = async (row: ProductData) => {
|
|||||||
cancelButtonText: '取消',
|
cancelButtonText: '取消',
|
||||||
type: 'warning',
|
type: 'warning',
|
||||||
});
|
});
|
||||||
|
console.log(row.id, 'row');
|
||||||
|
|
||||||
// 实际删除操作
|
// 实际删除操作
|
||||||
// await deleteRole(row.id);
|
await deleteProduct({ id: row.id });
|
||||||
|
|
||||||
// 模拟删除成功
|
// 模拟删除成功
|
||||||
ElMessage.success('删除成功');
|
ElMessage.success('删除成功');
|
||||||
|
|||||||
@@ -75,6 +75,7 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { ref, reactive, onMounted, nextTick } from 'vue';
|
import { ref, reactive, onMounted, nextTick } from 'vue';
|
||||||
import { ElMessageBox, ElMessage, FormInstance } from 'element-plus';
|
import { ElMessageBox, ElMessage, FormInstance } from 'element-plus';
|
||||||
|
import { getDataList } from '/@/api/customerService/report';
|
||||||
|
|
||||||
// 定义接口
|
// 定义接口
|
||||||
interface TableDataRow {
|
interface TableDataRow {
|
||||||
@@ -107,49 +108,6 @@ interface TableData {
|
|||||||
param: TableDataParam;
|
param: TableDataParam;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 模拟数据
|
|
||||||
const dateList: TableDataRow[] = [
|
|
||||||
{
|
|
||||||
infoId: 434569527,
|
|
||||||
loginName: 'demo',
|
|
||||||
ipaddr: '10',
|
|
||||||
loginLocation: '8',
|
|
||||||
browser: '5',
|
|
||||||
os: '3',
|
|
||||||
status: 2,
|
|
||||||
msg: '15',
|
|
||||||
loginTime: '2025-11-22',
|
|
||||||
module: '95%',
|
|
||||||
platform: '抖音',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
infoId: 424569527,
|
|
||||||
loginName: 'demo',
|
|
||||||
ipaddr: '12',
|
|
||||||
loginLocation: '9',
|
|
||||||
browser: '6',
|
|
||||||
os: '4',
|
|
||||||
status: 3,
|
|
||||||
msg: '18',
|
|
||||||
loginTime: '2025-11-22',
|
|
||||||
module: '92%',
|
|
||||||
platform: '小红书',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
infoId: 414569527,
|
|
||||||
loginName: 'demo',
|
|
||||||
ipaddr: '8',
|
|
||||||
loginLocation: '6',
|
|
||||||
browser: '4',
|
|
||||||
os: '2',
|
|
||||||
status: 1,
|
|
||||||
msg: '12',
|
|
||||||
loginTime: '2025-11-22',
|
|
||||||
module: '98%',
|
|
||||||
platform: '快手',
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
// 响应式数据
|
// 响应式数据
|
||||||
const queryRef = ref<FormInstance>();
|
const queryRef = ref<FormInstance>();
|
||||||
const ids = ref<number[]>([]);
|
const ids = ref<number[]>([]);
|
||||||
@@ -174,15 +132,11 @@ const dataList = async () => {
|
|||||||
try {
|
try {
|
||||||
tableData.loading = true;
|
tableData.loading = true;
|
||||||
|
|
||||||
// 实际API调用
|
const res = await getDataList(tableData.param);
|
||||||
// const res = await logList(tableData.param);
|
console.log(res);
|
||||||
// tableData.data = res.data.list;
|
|
||||||
// tableData.total = res.data.total;
|
|
||||||
|
|
||||||
// 模拟数据 - 添加延迟避免DOM操作错误
|
tableData.data = res.data.list;
|
||||||
await new Promise((resolve) => setTimeout(resolve, 100));
|
tableData.total = res.data.total;
|
||||||
tableData.data = dateList;
|
|
||||||
tableData.total = dateList.length;
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('获取数据失败:', error);
|
console.error('获取数据失败:', error);
|
||||||
ElMessage.error('获取数据失败');
|
ElMessage.error('获取数据失败');
|
||||||
|
|||||||
@@ -65,6 +65,7 @@ const state = reactive({
|
|||||||
tag: '',
|
tag: '',
|
||||||
content: '',
|
content: '',
|
||||||
creator: '',
|
creator: '',
|
||||||
|
modifier: '',
|
||||||
},
|
},
|
||||||
menuData: [] as MenuDataTree[],
|
menuData: [] as MenuDataTree[],
|
||||||
menuExpand: false,
|
menuExpand: false,
|
||||||
|
|||||||
@@ -19,11 +19,19 @@
|
|||||||
<el-table-column prop="tag" label="标签" show-overflow-tooltip min-width="120" />
|
<el-table-column prop="tag" label="标签" show-overflow-tooltip min-width="120" />
|
||||||
<el-table-column prop="creator" label="创建人" show-overflow-tooltip min-width="100" />
|
<el-table-column prop="creator" label="创建人" show-overflow-tooltip min-width="100" />
|
||||||
<el-table-column prop="modifier" label="修改人" show-overflow-tooltip min-width="100" />
|
<el-table-column prop="modifier" label="修改人" show-overflow-tooltip min-width="100" />
|
||||||
<el-table-column prop="createdAt" label="创建时间" show-overflow-tooltip min-width="140" />
|
<el-table-column prop="createdAt" label="创建时间" show-overflow-tooltip min-width="140">
|
||||||
<el-table-column prop="updatedAt" label="修改时间" show-overflow-tooltip min-width="140" />
|
<template #default="{ row }">
|
||||||
|
{{ formatTime(row.createdAt) }}
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="updatedAt" label="修改时间" show-overflow-tooltip min-width="140">
|
||||||
|
<template #default="{ row }">
|
||||||
|
{{ formatTime(row.updatedAt) }}
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
<el-table-column label="操作" width="200" align="center" fixed="right">
|
<el-table-column label="操作" width="200" align="center" fixed="right">
|
||||||
<template #default="{ row }">
|
<template #default="{ row }">
|
||||||
<el-button size="small" text type="primary" @click="handleEdit(row)">
|
<el-button style="color: deepskyblue" size="small" text type="primary" @click="handleEdit(row)">
|
||||||
<el-icon><EditPen /></el-icon>修改
|
<el-icon><EditPen /></el-icon>修改
|
||||||
</el-button>
|
</el-button>
|
||||||
<el-button size="small" text type="danger" @click="handleDelete(row)">
|
<el-button size="small" text type="danger" @click="handleDelete(row)">
|
||||||
@@ -49,7 +57,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { reactive, ref, onMounted, nextTick } from 'vue';
|
import { reactive, ref, onMounted } from 'vue';
|
||||||
import { ElMessageBox, ElMessage } from 'element-plus';
|
import { ElMessageBox, ElMessage } from 'element-plus';
|
||||||
import { FolderAdd, EditPen, DeleteFilled } from '@element-plus/icons-vue';
|
import { FolderAdd, EditPen, DeleteFilled } from '@element-plus/icons-vue';
|
||||||
import EditRole from './component/editRole.vue';
|
import EditRole from './component/editRole.vue';
|
||||||
@@ -62,8 +70,8 @@ interface ScriptItem {
|
|||||||
tag: string;
|
tag: string;
|
||||||
creator: string;
|
creator: string;
|
||||||
modifier: string;
|
modifier: string;
|
||||||
createdAt: string;
|
createdAt: string; // 保持原字段不变
|
||||||
updatedAt: string;
|
updatedAt: string; // 保持原字段不变
|
||||||
content?: string;
|
content?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -91,6 +99,47 @@ const tableData = reactive<TableState>({
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// ==================== 时间处理函数 ====================
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 格式化时间显示
|
||||||
|
* @param time 时间字符串或时间戳
|
||||||
|
* @returns 格式化后的时间字符串
|
||||||
|
*/
|
||||||
|
const formatTime = (time: string | number): string => {
|
||||||
|
if (!time) return '-';
|
||||||
|
|
||||||
|
try {
|
||||||
|
// 如果是时间戳格式
|
||||||
|
let timestamp = typeof time === 'string' ? parseInt(time) : time;
|
||||||
|
|
||||||
|
// 如果是毫秒时间戳,需要判断是否需要转换
|
||||||
|
if (timestamp > 1000000000000) {
|
||||||
|
// 已经是毫秒时间戳
|
||||||
|
} else if (timestamp > 1000000000) {
|
||||||
|
// 秒时间戳,转换为毫秒
|
||||||
|
timestamp = timestamp * 1000;
|
||||||
|
}
|
||||||
|
|
||||||
|
const date = new Date(timestamp);
|
||||||
|
if (isNaN(date.getTime())) {
|
||||||
|
return String(time); // 返回原始值
|
||||||
|
}
|
||||||
|
|
||||||
|
const year = date.getFullYear();
|
||||||
|
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||||
|
const day = String(date.getDate()).padStart(2, '0');
|
||||||
|
const hours = String(date.getHours()).padStart(2, '0');
|
||||||
|
const minutes = String(date.getMinutes()).padStart(2, '0');
|
||||||
|
const seconds = String(date.getSeconds()).padStart(2, '0');
|
||||||
|
|
||||||
|
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
||||||
|
} catch (error) {
|
||||||
|
console.error('时间格式化错误:', error);
|
||||||
|
return String(time); // 返回原始值
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
// ==================== 方法定义 ====================
|
// ==================== 方法定义 ====================
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -139,8 +188,8 @@ const handleDelete = async (row: ScriptItem) => {
|
|||||||
cancelButtonText: '取消',
|
cancelButtonText: '取消',
|
||||||
type: 'warning',
|
type: 'warning',
|
||||||
});
|
});
|
||||||
console.log(row, 'row');
|
|
||||||
await deletescript({ id: row.id }).then((res) => {});
|
await deletescript({ id: row.id });
|
||||||
ElMessage.success('删除成功');
|
ElMessage.success('删除成功');
|
||||||
|
|
||||||
// 重新加载数据
|
// 重新加载数据
|
||||||
@@ -160,20 +209,6 @@ const handleSuccess = () => {
|
|||||||
loadTableData();
|
loadTableData();
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
|
||||||
* 处理分页变化
|
|
||||||
*/
|
|
||||||
const handleSizeChange = (size: number) => {
|
|
||||||
tableData.param.pageSize = size;
|
|
||||||
tableData.param.pageNum = 1; // 重置到第一页
|
|
||||||
loadTableData();
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleCurrentChange = (current: number) => {
|
|
||||||
tableData.param.pageNum = current;
|
|
||||||
loadTableData();
|
|
||||||
};
|
|
||||||
|
|
||||||
// ==================== 生命周期 ====================
|
// ==================== 生命周期 ====================
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
loadTableData();
|
loadTableData();
|
||||||
|
|||||||
Reference in New Issue
Block a user