red-future/admin-ui
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

实现话术功能

Browse Source
This commit is contained in:
WUSIJIAN
2025-11-27 15:37:13 +08:00
parent 4d6f49598e
commit 0ad816cc6d
11 changed files with 973 additions and 610 deletions
Download Patch File Download Diff File Expand all files Collapse all files

650
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

3
package.json
View File

@@ -33,7 +33,7 @@
"pinia": "^2.1.7",
"print-js": "^1.6.0",
"qrcodejs2-fixes": "^0.0.2",
"qs": "^6.12.0",
"qs": "^6.14.0",
"screenfull": "^6.0.2",
"sortablejs": "^1.15.2",
"spark-md5": "^3.0.2",
@@ -51,6 +51,7 @@
"devDependencies": {
"@types/node": "^20.11.28",
"@types/nprogress": "^0.2.3",
"@types/qs": "^6.14.0",
"@types/sortablejs": "^1.15.8",
"@typescript-eslint/eslint-plugin": "^7.2.0",
"@typescript-eslint/parser": "^7.2.0",

70
src/api/customerService/script/index.ts
View File

@@ -1,65 +1,37 @@
import request from '/@/utils/request';
import request, { newService } from '/@/utils/request';
export function getRoleList(query: Object) {
return request({
url: '/api/v1/system/role/list',
method: 'get',
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',
//获取话术列表
export function getscriptList(data: object) {
return newService({
url: '/customerService/speechcraft/list',
method: 'post',
data: data,
});
}
export function getRole(id: number) {
return request({
url: '/api/v1/system/role/get',
method: 'get',
params: { id },
});
}
export function editRole(data: object) {
return request({
url: '/api/v1/system/role/edit',
method: 'put',
//获取话术列表
export function getscriptAdd(data: object) {
return newService({
url: '/customerService/speechcraft/add',
method: 'post',
data: data,
});
}
export function deleteRole(id: number) {
return request({
url: '/api/v1/system/role/delete',
method: 'delete',
data: { ids: [id] },
});
}
export function dataScope(data: any) {
return request({
url: '/api/v1/system/role/dataScope',
method: 'put',
//删除话术列表
export function deletescript(data: object) {
return newService({
url: '/customerService/speechcraft/delete',
method: 'post',
data: data,
});
}
// 根据角色ID查询部门树结构
export function roleDeptTreeSelect(roleId: number) {
return request({
url: '/api/v1/system/role/deptTreeSelect',
method: 'get',
params: { roleId },
//更新话术列表
export function updatescript(data: object) {
return newService({
url: '/customerService/speechcraft/update',
method: 'post',
data: data,
});
}

127
src/utils/request.ts
View File

@@ -3,66 +3,91 @@ import { ElMessage, ElMessageBox } from 'element-plus';
import { Session } from '/@/utils/storage';
import qs from 'qs';
// 配置新建一个 axios 实例
// 配置新建第一个 axios 实例（原来的主服务）
const service: AxiosInstance = axios.create({
baseURL: import.meta.env.VITE_API_URL,
timeout: 50000,
headers: { 'Content-Type': 'application/json' },
baseURL: import.meta.env.VITE_API_URL, // 从环境变量获取基础URL http://192.168.3.49:8808/
timeout: 50000, // 50秒超时
headers: { 'Content-Type': 'application/json' }, // 默认JSON格式
paramsSerializer: {
// 参数序列化配置
serialize(params) {
return qs.stringify(params, { allowDots: true, arrayFormat: 'brackets' });
},
},
});
// 添加请求拦截器
service.interceptors.request.use(
(config) => {
// 在发送请求之前做些什么 token
if (Session.get('token')) {
config.headers!['Authorization'] = `Bearer ${Session.get('token')}`;
}
return config;
// 配置新建第二个 axios 实例（新功能服务）
const newService: AxiosInstance = axios.create({
baseURL: 'http://192.168.3.49:8000/', // 新后端地址
timeout: 50000, // 50秒超时
headers: { 'Content-Type': 'application/json' }, // 默认JSON格式
paramsSerializer: {
// 参数序列化配置
serialize(params) {
return qs.stringify(params, { allowDots: true, arrayFormat: 'brackets' });
},
},
(error) => {
// 对请求错误做些什么
return Promise.reject(error);
}
);
});
// 添加响应拦截器
service.interceptors.response.use(
(response) => {
// 对响应数据做点什么
const res = response.data;
const code = response.data.code;
if (code === 401) {
ElMessageBox.alert('登录状态已过期，请重新登录', '提示', { confirmButtonText: '确定' })
.then(() => {
Session.clear(); // 清除浏览器全部临时缓存
window.location.href = '/'; // 去登录页
})
.catch(() => {});
} else if (code !== 0) {
ElMessage.error(res.message);
return Promise.reject(new Error(res.message));
} else {
return res;
}
},
(error) => {
// 对响应错误做点什么
if (error.message.indexOf('timeout') != -1) {
ElMessage.error('网络超时');
} else if (error.message == 'Network Error') {
ElMessage.error('网络连接错误');
} else {
if (error.response.data) ElMessage.error(error.response.statusText);
else ElMessage.error('接口路径找不到');
}
return Promise.reject(error);
// 通用的请求拦截器函数
const requestInterceptor = (config: any) => {
// 在发送请求之前做些什么 token
if (Session.get('token')) {
config.headers!['Authorization'] = `Bearer ${Session.get('token')}`;
}
);
return config;
};
// 导出 axios 实例
export default service;
// 通用的请求错误处理函数
const requestErrorHandler = (error: any) => {
// 对请求错误做些什么
return Promise.reject(error);
};
// 通用的响应拦截器函数
const responseInterceptor = (response: any) => {
// 对响应数据做点什么
const res = response.data;
const code = response.data.code;
if (code === 401) {
// 401未授权：token过期，跳转登录页
ElMessageBox.alert('登录状态已过期，请重新登录', '提示', { confirmButtonText: '确定' })
.then(() => {
Session.clear(); // 清除浏览器全部临时缓存
window.location.href = '/'; // 去登录页
})
.catch(() => {});
} else if (code !== 0) {
// 业务逻辑错误：显示错误消息
ElMessage.error(res.message);
return Promise.reject(new Error(res.message));
} else {
return res;
}
};
// 通用的响应错误处理函数
const responseErrorHandler = (error: any) => {
// 对响应错误做点什么
if (error.message.indexOf('timeout') != -1) {
ElMessage.error('网络超时');
} else if (error.message == 'Network Error') {
ElMessage.error('网络连接错误');
} else {
if (error.response?.data) ElMessage.error(error.response.statusText);
else ElMessage.error('接口路径找不到');
}
return Promise.reject(error);
};
// 为第一个实例添加拦截器
service.interceptors.request.use(requestInterceptor, requestErrorHandler);
service.interceptors.response.use(responseInterceptor, responseErrorHandler);
// 为第二个实例添加拦截器
newService.interceptors.request.use(requestInterceptor, requestErrorHandler);
newService.interceptors.response.use(responseInterceptor, responseErrorHandler);
// 导出两个 axios 实例
export default service; // 原来的主服务
export { newService }; // 新功能服务

2
src/views/customerService/account/index.vue
View File

@@ -258,7 +258,7 @@ const onOpenAddRole = () => {
*/
const onOpenEditRole = (row: TableDataItem) => {
if (editRoleRef.value) {
editRoleRef.value.openDialog(row);
editRoleRef.value.openDialog();
}
};

2
src/views/customerService/product/index.vue
View File

@@ -27,7 +27,7 @@
</el-icon>
导入
</el-button>
<el-button size="default" type="info" class="ml10" @click="onOpenExport">
<el-button size="default" type="info" class="ml10" @click="onOpenExport" style="background-color: deeppink; border: 0">
<el-icon>
<ele-Download />
</el-icon>

2
src/views/customerService/report/index.vue
View File

@@ -36,7 +36,7 @@
</el-icon>
重置
</el-button>
<el-button size="default" type="info" class="ml10" @click="handleExport">
<el-button size="default" type="info" class="ml10" @click="handleExport" style="background-color: deeppink; border: 0">
<el-icon>
<ele-Download />
</el-icon>

67
src/views/customerService/script/component/editRole.vue
View File

@@ -1,17 +1,17 @@
<template>
<div class="system-edit-role-container">
<el-dialog title="" v-model="isShowDialog" width="769px">
<el-form ref="formRef" :model="formData" :rules="rules" size="default" label-width="90px">
<el-form ref="formRef" :model="state.formData" :rules="rules" size="default" label-width="90px">
<el-row :gutter="35">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="标签" prop="name">
<el-input v-model="formData.name" placeholder="请输入标签名称" clearable />
<el-input v-model="formData.tag" :placeholder="formData.tag" clearable />
</el-form-item>
</el-col>
<!-- 富文本编辑器 -->
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
<el-form-item label="产品详情" prop="content">
<Editor v-model="formData.content" height="400px" placeholder="请输入产品详细描述..." />
<Editor v-model="formData.content" height="400px" :placeholder="formData.content" />
</el-form-item>
</el-col>
</el-row>
@@ -31,8 +31,10 @@
<script lang="ts" setup>
import { ref, reactive, toRefs, nextTick } from 'vue';
import { ElMessage, type FormInstance, type FormRules } from 'element-plus';
import { addRole, editRole, getRole } from '/@/api/customerService/script';
import Editor from '/@/components/editor/index.vue';
import { getscriptAdd, updatescript } from '/@/api/customerService/script';
import { Session } from '/@/utils/storage';
// console.log(Session.get('userInfo').userNickname, 'user');
// 定义类型接口
interface MenuDataTree {
@@ -44,17 +46,14 @@ interface MenuDataTree {
interface DialogRow {
id: number;
name: string;
status: number;
listOrder: number;
remark: string;
menuIds: number[];
content?: string;
tag: string;
creator: string;
content: string;
}
// 定义事件
const emit = defineEmits<{
(e: 'getRoleList'): void;
(e: 'success'): void;
}>();
// 响应式数据
@@ -63,13 +62,10 @@ const state = reactive({
isShowDialog: false,
formData: {
id: 0,
name: '',
status: 1,
listOrder: 0,
remark: '',
menuIds: [],
tag: '',
content: '',
} as DialogRow,
creator: '',
},
menuData: [] as MenuDataTree[],
menuExpand: false,
menuNodeAll: false,
@@ -78,7 +74,7 @@ const state = reactive({
// 表单验证规则
const rules: FormRules = {
name: [{ required: true, message: '标签名称不能为空', trigger: 'blur' }],
tag: [{ required: true, message: '标签名称不能为空', trigger: 'blur' }],
content: [{ required: true, message: '产品详情不能为空', trigger: 'blur' }],
};
@@ -101,23 +97,9 @@ const menuProps = {
*/
const openDialog = (row?: DialogRow) => {
resetForm();
console.log(row, 'row');
if (row) {
// 编辑模式：获取角色详情
getRole(row.id)
.then((res: any) => {
if (res.data?.role) {
state.formData = {
...res.data.role,
content: res.data.role.content || '',
menuIds: res.data.menuIds ?? [],
};
}
})
.catch((error) => {
console.error('获取角色详情失败:', error);
ElMessage.error('获取角色详情失败');
});
state.formData = row;
}
state.isShowDialog = true;
@@ -151,18 +133,22 @@ const onSubmit = async () => {
state.loading = true;
if (state.formData.id === 0) {
state.formData.creator = Session.get('userInfo').userNickname;
// 新增模式
await addRole(state.formData);
await getscriptAdd(state.formData);
console.log(state.formData);
ElMessage.success('添加成功');
} else {
state.formData.modifier = Session.get('userInfo').userNickname;
// 编辑模式
await editRole(state.formData);
await updatescript(state.formData);
ElMessage.success('修改成功');
}
// 关闭对话框并刷新列表
closeDialog();
emit('getRoleList');
emit('success');
} catch (error) {
console.error('提交失败:', error);
ElMessage.error('操作失败');
@@ -180,12 +166,9 @@ const resetForm = () => {
state.menuNodeAll = false;
state.formData = {
id: 0,
name: '',
status: 1,
listOrder: 0,
remark: '',
menuIds: [],
tag: '',
content: '',
creator: '',
};
// 重置表单验证状态

343
src/views/customerService/script/index.vue
View File

@@ -1,223 +1,212 @@
<template>
<div class="system-role-container">
<el-card shadow="hover">
<!-- 搜索和操作区域 -->
<div class="system-user-search mb15">
<el-form :inline="true">
<el-form-item>
<el-button size="default" type="success" class="ml10" @click="onOpenAddRole">
<el-icon>
<ele-FolderAdd />
</el-icon>
<el-button size="default" type="success" @click="handleAdd">
<el-icon><FolderAdd /></el-icon>
新增话术
</el-button>
</el-form-item>
</el-form>
</div>
<el-table :data="tableData.data" style="width: 100%">
<el-table-column type="index" label="序号" width="60" />
<el-table-column prop="label" 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="createdAt" label="创建时间" show-overflow-tooltip></el-table-column>
<el-table-column prop="createdAt" label="修改时间" show-overflow-tooltip></el-table-column>
<el-table-column label="操作" width="220">
<template #default="scope">
<el-button size="small" text type="primary" @click="onOpenEditRole(scope.row)"
><el-icon><ele-EditPen /></el-icon>修改</el-button
>
<el-button size="small" text type="primary" @click="onRowDel(scope.row)"
><el-icon><ele-DeleteFilled /></el-icon>删除</el-button
>
<!-- 数据表格 -->
<el-table :data="tableData.data" v-loading="tableData.loading" style="width: 100%">
<el-table-column type="index" label="序号" width="60" align="center" />
<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="modifier" label="修改人" show-overflow-tooltip min-width="100" />
<el-table-column prop="createdAt" label="创建时间" show-overflow-tooltip min-width="140" />
<el-table-column prop="updatedAt" label="修改时间" show-overflow-tooltip min-width="140" />
<el-table-column label="操作" width="200" align="center" fixed="right">
<template #default="{ row }">
<el-button size="small" text type="primary" @click="handleEdit(row)">
<el-icon><EditPen /></el-icon>修改
</el-button>
<el-button size="small" text type="danger" @click="handleDelete(row)">
<el-icon><DeleteFilled /></el-icon>删除
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页组件 -->
<pagination
v-show="tableData.total > 0"
v-if="tableData.total > 0"
:total="tableData.total"
v-model:page="tableData.param.pageNum"
v-model:limit="tableData.param.pageSize"
@pagination="roleList"
@pagination="loadTableData"
/>
</el-card>
<EditRole ref="editRoleRef" @getRoleList="roleList" />
<!-- 编辑组件 -->
<EditRole ref="editRoleRef" @success="handleSuccess" />
</div>
</template>
<script lang="ts" setup>
import { toRefs, reactive, onMounted, ref, defineComponent, toRaw, getCurrentInstance } from 'vue';
<script setup lang="ts">
import { reactive, ref, onMounted, nextTick } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import EditRole from '/@/views/customerService/script/component/editRole.vue';
import { deleteRole, getRoleList } from '/@/api/customerService/script';
// 定义接口来定义对象的类型
interface TableData {
id: number;
status: number;
listOrder: number;
name: string;
remark: string;
dataScope: number;
import { FolderAdd, EditPen, DeleteFilled } from '@element-plus/icons-vue';
import EditRole from './component/editRole.vue';
import Pagination from '/@/components/pagination/index.vue';
import { getscriptList, deletescript } from '/@/api/customerService/script';
// ==================== 类型定义 ====================
interface ScriptItem {
id: string;
tag: string;
creator: string;
modifier: string;
createdAt: string;
updatedAt: string;
content?: string;
}
interface TableDataState {
data: Array<TableData>;
interface TableParams {
pageNum: number;
pageSize: number;
}
interface TableState {
data: ScriptItem[];
total: number;
loading: boolean;
param: {
roleName: string;
roleStatus: string;
pageNum: number;
pageSize: number;
};
param: TableParams;
}
//模拟数据
const dateList = ref([
{
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',
label: '产品介绍',
creator: '张三',
},
{
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',
label: '公司介绍',
creator: '张三',
},
{
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',
label: '病症询问',
creator: '王五',
},
{
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',
label: '资质问题',
creator: '李四',
},
{
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',
label: '常用沟通',
creator: '张三',
},
{
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',
label: '公司介绍',
creator: '张三',
},
]);
const { proxy } = getCurrentInstance() as any;
const addRoleRef = ref();
const editRoleRef = ref();
const dataScopeRef = ref();
const tableData = reactive<TableDataState>({
// ==================== 响应式数据 ====================
const editRoleRef = ref<InstanceType<typeof EditRole>>();
const tableData = reactive<TableState>({
data: [],
total: 0,
loading: false,
param: {
roleName: '',
roleStatus: '',
pageNum: 1,
pageSize: 10,
},
});
// 初始化表格数据
const initTableData = () => {
roleList();
};
const roleList = () => {
const data: Array<TableData> = [];
getRoleList(tableData.param).then((res) => {
const list = res.data.list ?? [];
list.map((item: TableData) => {
data.push({
id: item.id,
status: item.status,
listOrder: item.listOrder,
name: item.name,
remark: item.remark,
dataScope: item.dataScope,
createdAt: item.createdAt,
});
});
tableData.data = dateList.value;
tableData.total = dateList.value.length;
});
};
// 打开新增角色弹窗
const onOpenAddRole = () => {
editRoleRef.value.openDialog();
};
// 打开修改角色弹窗
const onOpenEditRole = (row: Object) => {
editRoleRef.value.openDialog(toRaw(row));
// ==================== 方法定义 ====================
/**
* 加载表格数据
*/
const loadTableData = async () => {
try {
tableData.loading = true;
const response = await getscriptList(tableData.param);
const { list = [], total = 0 } = response.data || {};
tableData.data = list;
tableData.total = total;
} catch (error) {
console.error('加载数据失败:', error);
ElMessage.error('数据加载失败');
tableData.data = [];
tableData.total = 0;
} finally {
tableData.loading = false;
}
};
// 删除角色
const onRowDel = (row: any) => {
ElMessageBox.confirm(`此操作将永久删除角色：“${row.name}”，是否继续?`, '提示', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
deleteRole(row.id).then(() => {
ElMessage.success('删除成功');
proxy.$refs['editRoleRef'].resetMenuSession();
roleList();
});
})
.catch(() => {});
/**
* 新增话术
*/
const handleAdd = () => {
editRoleRef.value?.openDialog();
};
// 分页改变
const onHandleSizeChange = (val: number) => {
tableData.param.pageSize = val;
/**
* 编辑话术
*/
const handleEdit = (row: ScriptItem) => {
editRoleRef.value?.openDialog(row);
};
// 分页改变
const onHandleCurrentChange = (val: number) => {
tableData.param.pageNum = val;
/**
* 删除话术
*/
const handleDelete = async (row: ScriptItem) => {
try {
await ElMessageBox.confirm(`确定要删除话术「${row.tag}」吗？此操作不可恢复。`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
console.log(row, 'row');
await deletescript({ id: row.id }).then((res) => {});
ElMessage.success('删除成功');
// 重新加载数据
await loadTableData();
} catch (error) {
if (error !== 'cancel') {
console.error('删除失败:', error);
ElMessage.error('删除失败');
}
}
};
// 页面加载时
/**
* 操作成功回调
*/
const handleSuccess = () => {
loadTableData();
};
/**
* 处理分页变化
*/
const handleSizeChange = (size: number) => {
tableData.param.pageSize = size;
tableData.param.pageNum = 1; // 重置到第一页
loadTableData();
};
const handleCurrentChange = (current: number) => {
tableData.param.pageNum = current;
loadTableData();
};
// ==================== 生命周期 ====================
onMounted(() => {
initTableData();
loadTableData();
});
// ==================== 暴露方法（可选） ====================
defineExpose({
reload: loadTableData,
});
</script>
<style scoped lang="scss">
.system-role-container {
.system-user-search {
display: flex;
justify-content: space-between;
align-items: center;
}
.mb15 {
margin-bottom: 15px;
}
}
// 响应式适配
@media (max-width: 768px) {
.system-user-search {
flex-direction: column;
align-items: flex-start;
.el-form-item {
margin-bottom: 10px;
}
}
}
</style>

316
src/views/personal/index.vue
View File

@@ -225,163 +225,163 @@ export default defineComponent({
<style scoped lang="scss">
@use '../../theme/mixins/index.scss' as *;
.personal {
.personal-user {
height: 130px;
display: flex;
align-items: center;
.personal-user-left {
width: 100px;
height: 130px;
border-radius: 3px;
:deep(.el-upload) {
height: 100%;
}
.personal-user-left-upload {
img {
width: 100%;
height: 100%;
border-radius: 3px;
}
&:hover {
img {
animation: logoAnimation 0.3s ease-in-out;
}
}
}
}
.personal-user-right {
flex: 1;
padding: 0 15px;
.personal-title {
font-size: 18px;
@include text-ellipsis(1);
}
.personal-item {
display: flex;
align-items: center;
font-size: 13px;
.personal-item-label {
color: var(--el-text-color-secondary);
@include text-ellipsis(1);
}
.personal-item-value {
@include text-ellipsis(1);
}
}
}
}
.personal-info {
.personal-info-more {
float: right;
color: var(--el-text-color-secondary);
font-size: 13px;
&:hover {
color: var(--el-color-primary);
cursor: pointer;
}
}
.personal-info-box {
height: 130px;
overflow: hidden;
.personal-info-ul {
list-style: none;
.personal-info-li {
font-size: 13px;
padding-bottom: 10px;
.personal-info-li-title {
display: inline-block;
@include text-ellipsis(1);
color: var(--el-text-color-secondary);
text-decoration: none;
}
& a:hover {
color: var(--el-color-primary);
cursor: pointer;
}
}
}
}
}
.personal-recommend-row {
.personal-recommend-col {
.personal-recommend {
position: relative;
height: 100px;
border-radius: 3px;
overflow: hidden;
cursor: pointer;
&:hover {
i {
right: 0px !important;
bottom: 0px !important;
transition: all ease 0.3s;
}
}
i {
position: absolute;
right: -10px;
bottom: -10px;
font-size: 70px;
transform: rotate(-30deg);
transition: all ease 0.3s;
}
.personal-recommend-auto {
padding: 15px;
position: absolute;
left: 0;
top: 5%;
color: var(--next-color-white);
.personal-recommend-msg {
font-size: 12px;
margin-top: 10px;
}
}
}
}
}
.personal-edit {
.personal-edit-title {
position: relative;
padding-left: 10px;
color: var(--el-text-color-regular);
&::after {
content: '';
width: 2px;
height: 10px;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
background: var(--el-color-primary);
}
}
.personal-edit-safe-box {
border-bottom: 1px solid var(--el-border-color-light, #ebeef5);
padding: 15px 0;
.personal-edit-safe-item {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
.personal-edit-safe-item-left {
flex: 1;
overflow: hidden;
.personal-edit-safe-item-left-label {
color: var(--el-text-color-regular);
margin-bottom: 5px;
}
.personal-edit-safe-item-left-value {
color: var(--el-text-color-secondary);
@include text-ellipsis(1);
margin-right: 15px;
}
}
}
&:last-of-type {
padding-bottom: 0;
border-bottom: none;
}
}
}
.personal-user {
height: 130px;
display: flex;
align-items: center;
.personal-user-left {
width: 100px;
height: 130px;
border-radius: 3px;
:deep(.el-upload) {
height: 100%;
}
.personal-user-left-upload {
img {
width: 100%;
height: 100%;
border-radius: 3px;
}
&:hover {
img {
animation: logoAnimation 0.3s ease-in-out;
}
}
}
}
.personal-user-right {
flex: 1;
padding: 0 15px;
.personal-title {
font-size: 18px;
@include text-ellipsis(1);
}
.personal-item {
display: flex;
align-items: center;
font-size: 13px;
.personal-item-label {
color: var(--el-text-color-secondary);
@include text-ellipsis(1);
}
.personal-item-value {
@include text-ellipsis(1);
}
}
}
}
.personal-info {
.personal-info-more {
float: right;
color: var(--el-text-color-secondary);
font-size: 13px;
&:hover {
color: var(--el-color-primary);
cursor: pointer;
}
}
.personal-info-box {
height: 130px;
overflow: hidden;
.personal-info-ul {
list-style: none;
.personal-info-li {
font-size: 13px;
padding-bottom: 10px;
.personal-info-li-title {
display: inline-block;
@include text-ellipsis(1);
color: var(--el-text-color-secondary);
text-decoration: none;
}
& a:hover {
color: var(--el-color-primary);
cursor: pointer;
}
}
}
}
}
.personal-recommend-row {
.personal-recommend-col {
.personal-recommend {
position: relative;
height: 100px;
border-radius: 3px;
overflow: hidden;
cursor: pointer;
&:hover {
i {
right: 0px !important;
bottom: 0px !important;
transition: all ease 0.3s;
}
}
i {
position: absolute;
right: -10px;
bottom: -10px;
font-size: 70px;
transform: rotate(-30deg);
transition: all ease 0.3s;
}
.personal-recommend-auto {
padding: 15px;
position: absolute;
left: 0;
top: 5%;
color: var(--next-color-white);
.personal-recommend-msg {
font-size: 12px;
margin-top: 10px;
}
}
}
}
}
.personal-edit {
.personal-edit-title {
position: relative;
padding-left: 10px;
color: var(--el-text-color-regular);
&::after {
content: '';
width: 2px;
height: 10px;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
background: var(--el-color-primary);
}
}
.personal-edit-safe-box {
border-bottom: 1px solid var(--el-border-color-light, #ebeef5);
padding: 15px 0;
.personal-edit-safe-item {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
.personal-edit-safe-item-left {
flex: 1;
overflow: hidden;
.personal-edit-safe-item-left-label {
color: var(--el-text-color-regular);
margin-bottom: 5px;
}
.personal-edit-safe-item-left-value {
color: var(--el-text-color-secondary);
@include text-ellipsis(1);
margin-right: 15px;
}
}
}
&:last-of-type {
padding-bottom: 0;
border-bottom: none;
}
}
}
}
</style>

1
src/views/system/role/index.vue
View File

@@ -122,6 +122,7 @@ export default defineComponent({
getRoleList(state.tableData.param).then((res) => {
const list = res.data.list ?? [];
list.map((item: TableData) => {
console.log(item.createdAt, '修改时间');
data.push({
id: item.id,
status: item.status,