完善请求
This commit is contained in:
@@ -5,7 +5,7 @@ export function getaccountList(data: object) {
|
|||||||
return newService({
|
return newService({
|
||||||
url: '/customerService/customer/service/account/list',
|
url: '/customerService/customer/service/account/list',
|
||||||
method: 'get',
|
method: 'get',
|
||||||
data: data,
|
params: data,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -21,7 +21,7 @@ export function getaccountAdd(data: object) {
|
|||||||
//禁用账号
|
//禁用账号
|
||||||
export function updatestate(data: object) {
|
export function updatestate(data: object) {
|
||||||
return newService({
|
return newService({
|
||||||
url: '/customerService/customer/service/account/delete',
|
url: '/customerService/customer/service/account/toggleStatus',
|
||||||
method: 'post',
|
method: 'post',
|
||||||
data: data,
|
data: data,
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -23,16 +23,7 @@ export function getList(data: object) {
|
|||||||
return newService({
|
return newService({
|
||||||
url: '/customerService/product/list',
|
url: '/customerService/product/list',
|
||||||
method: 'get',
|
method: 'get',
|
||||||
data: data,
|
params: data,
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
//获取产品详情
|
|
||||||
export function getproductOne(data: object) {
|
|
||||||
return newService({
|
|
||||||
url: '/customerService/product/one',
|
|
||||||
method: 'post',
|
|
||||||
data: data,
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -3,8 +3,8 @@ import request, { newService } from '/@/utils/request';
|
|||||||
//获取数据列表
|
//获取数据列表
|
||||||
export function getDataList(data: object) {
|
export function getDataList(data: object) {
|
||||||
return newService({
|
return newService({
|
||||||
url: '/customerService/data/list',
|
url: '/customerService/data/statistics/list',
|
||||||
method: 'get',
|
method: 'get',
|
||||||
data: data,
|
params: data,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -5,7 +5,7 @@ export function getscriptList(data: object) {
|
|||||||
return newService({
|
return newService({
|
||||||
url: '/customerService/speechcraft/list',
|
url: '/customerService/speechcraft/list',
|
||||||
method: 'get',
|
method: 'get',
|
||||||
data: data,
|
params: data,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -6,7 +6,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { toRefs, reactive, onMounted, watch, defineComponent } from 'vue';
|
import { toRefs, reactive, onMounted, watch, defineComponent, onUnmounted, nextTick } from 'vue';
|
||||||
import { createEditor, createToolbar, IEditorConfig, IToolbarConfig, IDomEditor } from '@wangeditor/editor';
|
import { createEditor, createToolbar, IEditorConfig, IToolbarConfig, IDomEditor } from '@wangeditor/editor';
|
||||||
import '@wangeditor/editor/dist/css/style.css';
|
import '@wangeditor/editor/dist/css/style.css';
|
||||||
import { toolbarKeys } from './toolbar';
|
import { toolbarKeys } from './toolbar';
|
||||||
@@ -15,7 +15,8 @@ import { toolbarKeys } from './toolbar';
|
|||||||
interface WangeditorState {
|
interface WangeditorState {
|
||||||
editorToolbar: HTMLDivElement | null;
|
editorToolbar: HTMLDivElement | null;
|
||||||
editorContent: HTMLDivElement | null;
|
editorContent: HTMLDivElement | null;
|
||||||
editor: any;
|
editor: IDomEditor | null;
|
||||||
|
isInitialized: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
@@ -37,9 +38,7 @@ export default defineComponent({
|
|||||||
default: () => '请输入内容',
|
default: () => '请输入内容',
|
||||||
},
|
},
|
||||||
// 双向绑定:双向绑定值,字段名为固定,改了之后将不生效
|
// 双向绑定:双向绑定值,字段名为固定,改了之后将不生效
|
||||||
// 参考:https://v3.cn.vuejs.org/guide/migration/v-model.html#%E8%BF%81%E7%A7%BB%E7%AD%96%E7%95%A5
|
|
||||||
modelValue: String,
|
modelValue: String,
|
||||||
// https://www.wangeditor.com/v5/getting-started.html#mode-%E6%A8%A1%E5%BC%8F
|
|
||||||
// 模式,可选 <default|simple>,默认 default
|
// 模式,可选 <default|simple>,默认 default
|
||||||
mode: {
|
mode: {
|
||||||
type: String,
|
type: String,
|
||||||
@@ -56,57 +55,103 @@ export default defineComponent({
|
|||||||
editorToolbar: null,
|
editorToolbar: null,
|
||||||
editor: null,
|
editor: null,
|
||||||
editorContent: null,
|
editorContent: null,
|
||||||
|
isInitialized: false,
|
||||||
});
|
});
|
||||||
|
|
||||||
// 富文本配置
|
// 富文本配置
|
||||||
const wangeditorConfig = () => {
|
const wangeditorConfig = (): Partial<IEditorConfig> => {
|
||||||
const editorConfig: Partial<IEditorConfig> = { MENU_CONF: {} };
|
const editorConfig: Partial<IEditorConfig> = {
|
||||||
props.isDisable ? (editorConfig.readOnly = true) : (editorConfig.readOnly = false);
|
MENU_CONF: {},
|
||||||
editorConfig.placeholder = props.placeholder;
|
readOnly: props.isDisable,
|
||||||
|
placeholder: props.placeholder,
|
||||||
|
};
|
||||||
|
|
||||||
editorConfig.onChange = (editor: IDomEditor) => {
|
editorConfig.onChange = (editor: IDomEditor) => {
|
||||||
// console.log('content', editor.children);
|
|
||||||
// console.log('html', editor.getHtml());
|
|
||||||
emit('update:modelValue', editor.getHtml());
|
emit('update:modelValue', editor.getHtml());
|
||||||
};
|
};
|
||||||
|
|
||||||
(<any>editorConfig).MENU_CONF['uploadImage'] = {
|
(<any>editorConfig).MENU_CONF['uploadImage'] = {
|
||||||
base64LimitSize: 10 * 1024 * 1024,
|
base64LimitSize: 10 * 1024 * 1024,
|
||||||
};
|
};
|
||||||
|
|
||||||
return editorConfig;
|
return editorConfig;
|
||||||
};
|
};
|
||||||
//
|
|
||||||
const toolbarConfig = () => {
|
const toolbarConfig = (): Partial<IToolbarConfig> => {
|
||||||
const toolbarConfig: Partial<IToolbarConfig> = {};
|
return {
|
||||||
toolbarConfig.toolbarKeys = toolbarKeys;
|
toolbarKeys: toolbarKeys,
|
||||||
return toolbarConfig;
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// 销毁编辑器
|
||||||
|
const destroyEditor = () => {
|
||||||
|
if (state.editor) {
|
||||||
|
state.editor.destroy();
|
||||||
|
state.editor = null;
|
||||||
|
state.isInitialized = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
// 初始化富文本
|
// 初始化富文本
|
||||||
// https://www.wangeditor.com/
|
|
||||||
const initWangeditor = () => {
|
const initWangeditor = () => {
|
||||||
state.editor = createEditor({
|
// 先销毁旧的编辑器
|
||||||
html: props.modelValue,
|
destroyEditor();
|
||||||
selector: state.editorContent!,
|
|
||||||
config: wangeditorConfig(),
|
nextTick(() => {
|
||||||
mode: props.mode,
|
if (!state.editorContent) return;
|
||||||
});
|
|
||||||
createToolbar({
|
state.editor = createEditor({
|
||||||
editor: state.editor,
|
html: props.modelValue || '',
|
||||||
selector: state.editorToolbar!,
|
selector: state.editorContent,
|
||||||
mode: props.mode,
|
config: wangeditorConfig(),
|
||||||
config: toolbarConfig(),
|
mode: props.mode,
|
||||||
|
});
|
||||||
|
|
||||||
|
createToolbar({
|
||||||
|
editor: state.editor,
|
||||||
|
selector: state.editorToolbar!,
|
||||||
|
mode: props.mode,
|
||||||
|
config: toolbarConfig(),
|
||||||
|
});
|
||||||
|
|
||||||
|
state.isInitialized = true;
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
// 页面加载时
|
// 页面加载时
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
initWangeditor();
|
initWangeditor();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// 组件卸载时销毁编辑器
|
||||||
|
onUnmounted(() => {
|
||||||
|
destroyEditor();
|
||||||
|
});
|
||||||
|
|
||||||
// 监听双向绑定值的改变
|
// 监听双向绑定值的改变
|
||||||
// https://gitee.com/lyt-top/vue-next-admin/issues/I4LM7I
|
|
||||||
watch(
|
watch(
|
||||||
() => props.modelValue,
|
() => props.modelValue,
|
||||||
(value) => {
|
(value) => {
|
||||||
state.editor.clear();
|
if (state.editor && state.isInitialized) {
|
||||||
state.editor.dangerouslyInsertHtml(value);
|
// 只有当内容确实改变时才更新
|
||||||
|
const currentHtml = state.editor.getHtml();
|
||||||
|
if (currentHtml !== value) {
|
||||||
|
state.editor.setHtml(value || '');
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
|
// 监听禁用状态变化
|
||||||
|
watch(
|
||||||
|
() => props.isDisable,
|
||||||
|
(disabled) => {
|
||||||
|
if (state.editor) {
|
||||||
|
state.editor.setDisabled(disabled);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
return {
|
return {
|
||||||
...toRefs(state),
|
...toRefs(state),
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -4,7 +4,14 @@
|
|||||||
<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.customerServiceId" 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
|
||||||
|
@keyup.enter="handleSearch"
|
||||||
|
/>
|
||||||
</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">
|
||||||
@@ -14,7 +21,7 @@
|
|||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item>
|
<el-form-item>
|
||||||
<el-button size="default" type="primary" class="ml10" @click="handleSearch">
|
<el-button size="default" type="primary" class="ml10" @click="handleSearch" :loading="tableData.loading">
|
||||||
<el-icon>
|
<el-icon>
|
||||||
<ele-Search />
|
<ele-Search />
|
||||||
</el-icon>
|
</el-icon>
|
||||||
@@ -26,29 +33,43 @@
|
|||||||
</el-icon>
|
</el-icon>
|
||||||
新增客服
|
新增客服
|
||||||
</el-button>
|
</el-button>
|
||||||
|
<!-- <el-button size="default" class="ml10" @click="handleReset" :disabled="tableData.loading">
|
||||||
|
<el-icon>
|
||||||
|
<ele-Refresh />
|
||||||
|
</el-icon>
|
||||||
|
重置
|
||||||
|
</el-button> -->
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
</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="customerServiceId" 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="isDisabled" label="客服状态" show-overflow-tooltip>
|
||||||
<template #default="scope">
|
<template #default="scope">
|
||||||
<el-button
|
<el-button
|
||||||
size="small"
|
size="small"
|
||||||
:type="scope.row.status === 1 ? 'success' : 'info'"
|
:type="scope.row.isDisabled == 1 ? 'success' : 'info'"
|
||||||
@click="handleStatusChange(scope.row)"
|
@click="handleStatusChange(scope.row)"
|
||||||
:loading="scope.row.statusLoading"
|
:loading="scope.row.statusLoading"
|
||||||
>
|
>
|
||||||
{{ scope.row.status === 1 ? '启用' : '禁用' }}
|
{{ scope.row.isDisabled == 1 ? '启用' : '禁用' }}
|
||||||
</el-button>
|
</el-button>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column prop="platform" 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="modifier" label="修改人" show-overflow-tooltip></el-table-column>
|
<el-table-column prop="modifier" label="修改人" show-overflow-tooltip></el-table-column>
|
||||||
<el-table-column prop="createdAtString" label="创建时间" show-overflow-tooltip></el-table-column>
|
<el-table-column prop="createdAt" label="创建时间" show-overflow-tooltip>
|
||||||
<el-table-column prop="updatedAtString" label="修改时间" show-overflow-tooltip></el-table-column>
|
<template #default="{ row }">
|
||||||
|
{{ formatTime(row.createdAt) }}
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="updatedAt" label="修改时间" show-overflow-tooltip>
|
||||||
|
<template #default="{ row }">
|
||||||
|
{{ formatTime(row.updatedAt) }}
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
<el-table-column label="操作" width="220">
|
<el-table-column label="操作" width="220">
|
||||||
<template #default="scope">
|
<template #default="scope">
|
||||||
<el-button style="color: deepskyblue" size="small" text type="primary" @click="onOpenEditRole(scope.row)">
|
<el-button style="color: deepskyblue" size="small" text type="primary" @click="onOpenEditRole(scope.row)">
|
||||||
@@ -65,29 +86,26 @@
|
|||||||
@pagination="getList"
|
@pagination="getList"
|
||||||
/>
|
/>
|
||||||
</el-card>
|
</el-card>
|
||||||
<EditRole ref="editRoleRef" @getRoleList="getList" />
|
<EditAccount ref="editRoleRef" @getRoleList="getList" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { ref, reactive, onMounted } 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 EditAccount from './component/editAccount.vue';
|
||||||
import { getaccountAdd, getaccountList, updatestate } from '/@/api/customerService/account';
|
import { getaccountAdd, getaccountList, updatestate } from '/@/api/customerService/account';
|
||||||
import { number } from 'echarts';
|
|
||||||
|
|
||||||
// 定义类型接口
|
// 定义类型接口
|
||||||
interface TableDataItem {
|
interface TableDataItem {
|
||||||
id: string;
|
id: string;
|
||||||
customerServiceId: string;
|
customerServiceId: string;
|
||||||
status: number;
|
isDisabled: number; // 修正:应该是isDisabled而不是status
|
||||||
platform: string;
|
platform: string;
|
||||||
creator: string;
|
creator: string;
|
||||||
modifier: string;
|
modifier: string;
|
||||||
createdAt: number;
|
createdAt: number;
|
||||||
createdAtString: string;
|
|
||||||
updatedAt: number;
|
updatedAt: number;
|
||||||
updatedAtString: string;
|
|
||||||
statusLoading?: boolean;
|
statusLoading?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -96,7 +114,7 @@ interface TableParam {
|
|||||||
platform: string;
|
platform: string;
|
||||||
pageNum: number;
|
pageNum: number;
|
||||||
pageSize: number;
|
pageSize: number;
|
||||||
status: number;
|
isDisabled: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface TableState {
|
interface TableState {
|
||||||
@@ -106,18 +124,21 @@ interface TableState {
|
|||||||
param: TableParam;
|
param: TableParam;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 初始参数(用于重置)
|
||||||
|
const initialParam: TableParam = {
|
||||||
|
customerServiceId: '',
|
||||||
|
platform: '',
|
||||||
|
pageNum: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
isDisabled: 0,
|
||||||
|
};
|
||||||
|
|
||||||
// 响应式数据
|
// 响应式数据
|
||||||
const tableData = reactive<TableState>({
|
const tableData = reactive<TableState>({
|
||||||
data: [],
|
data: [],
|
||||||
total: 0,
|
total: 0,
|
||||||
loading: false,
|
loading: false,
|
||||||
param: {
|
param: { ...initialParam },
|
||||||
customerServiceId: '',
|
|
||||||
platform: '',
|
|
||||||
pageNum: 1,
|
|
||||||
pageSize: 10,
|
|
||||||
status: 0,
|
|
||||||
},
|
|
||||||
});
|
});
|
||||||
|
|
||||||
// 模板引用
|
// 模板引用
|
||||||
@@ -129,47 +150,120 @@ const editRoleRef = ref<InstanceType<typeof EditRole>>();
|
|||||||
const getList = async () => {
|
const getList = async () => {
|
||||||
try {
|
try {
|
||||||
tableData.loading = true;
|
tableData.loading = true;
|
||||||
const res = await getaccountList(tableData.param);
|
|
||||||
tableData.data = (res.data.list || []).map((item: TableDataItem) => ({
|
// 构建查询参数,过滤空值
|
||||||
...item,
|
const queryParams: any = {
|
||||||
statusLoading: false,
|
pageNum: tableData.param.pageNum,
|
||||||
}));
|
pageSize: tableData.param.pageSize,
|
||||||
tableData.total = res.data.total || 0;
|
customerServiceId: tableData.param.customerServiceId || undefined,
|
||||||
|
platform: tableData.param.platform || undefined,
|
||||||
|
};
|
||||||
|
|
||||||
|
const res = await getaccountList(queryParams);
|
||||||
|
|
||||||
|
if (res && res.data) {
|
||||||
|
tableData.data = (res.data.list || []).map((item: TableDataItem) => ({
|
||||||
|
...item,
|
||||||
|
statusLoading: false,
|
||||||
|
}));
|
||||||
|
tableData.total = res.data.total || 0;
|
||||||
|
} else {
|
||||||
|
tableData.data = [];
|
||||||
|
tableData.total = 0;
|
||||||
|
ElMessage.warning('暂无数据');
|
||||||
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('获取客服账号列表失败:', error);
|
console.error('获取客服账号列表失败:', error);
|
||||||
ElMessage.error('获取数据失败');
|
ElMessage.error('获取数据失败');
|
||||||
|
tableData.data = [];
|
||||||
|
tableData.total = 0;
|
||||||
} finally {
|
} finally {
|
||||||
tableData.loading = false;
|
tableData.loading = false;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 处理搜索
|
||||||
|
*/
|
||||||
|
const handleSearch = () => {
|
||||||
|
tableData.param.pageNum = 1; // 搜索时重置到第一页
|
||||||
|
getList();
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 重置查询条件
|
||||||
|
*/
|
||||||
|
const handleReset = () => {
|
||||||
|
// 重新获取数据
|
||||||
|
getList();
|
||||||
|
};
|
||||||
|
|
||||||
|
// ==================== 时间处理函数 ====================
|
||||||
|
/**
|
||||||
|
* 格式化时间显示
|
||||||
|
*/
|
||||||
|
const formatTime = (time: string | number | Date): string => {
|
||||||
|
if (!time) return '-';
|
||||||
|
|
||||||
|
try {
|
||||||
|
let date: Date;
|
||||||
|
|
||||||
|
if (time instanceof Date) {
|
||||||
|
date = time;
|
||||||
|
} else if (typeof time === 'string') {
|
||||||
|
date = new Date(time);
|
||||||
|
} else {
|
||||||
|
let timestamp = time;
|
||||||
|
if (timestamp > 1000000000000) {
|
||||||
|
// 已经是毫秒时间戳
|
||||||
|
} else if (timestamp > 1000000000) {
|
||||||
|
// 秒时间戳,转换为毫秒
|
||||||
|
timestamp = timestamp * 1000;
|
||||||
|
}
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 处理客服状态切换
|
* 处理客服状态切换
|
||||||
* @param row - 客服数据
|
|
||||||
*/
|
*/
|
||||||
const handleStatusChange = async (row: TableDataItem) => {
|
const handleStatusChange = async (row: TableDataItem) => {
|
||||||
try {
|
try {
|
||||||
await ElMessageBox.confirm(`确定要${row.status === 1 ? '禁用' : '启用'}客服账号 "${row.customerServiceId}" 吗?`, '提示', {
|
await ElMessageBox.confirm(`确定要${row.isDisabled == 1 ? '禁用' : '启用'}客服账号 "${row.customerServiceId}" 吗?`, '提示', {
|
||||||
confirmButtonText: '确定',
|
confirmButtonText: '确定',
|
||||||
cancelButtonText: '取消',
|
cancelButtonText: '取消',
|
||||||
type: 'warning',
|
type: 'warning',
|
||||||
});
|
});
|
||||||
|
|
||||||
row.statusLoading = true;
|
row.statusLoading = true;
|
||||||
const newStatus = row.status === 1 ? 0 : 1;
|
const newStatus = row.isDisabled == 1 ? 0 : 1; // 修正:使用isDisabled字段
|
||||||
// 调用状态更新接口
|
|
||||||
await updatestate({
|
await updatestate({
|
||||||
id: row.id,
|
id: row.id,
|
||||||
status: newStatus,
|
status: newStatus, // 接口可能需要status字段
|
||||||
});
|
});
|
||||||
|
|
||||||
ElMessage.success(`客服账号已${newStatus === 1 ? '启用' : '禁用'}`);
|
ElMessage.success(`客服账号已${newStatus == 0 ? '禁用' : '启用'}`);
|
||||||
|
await getList(); // 重新获取数据
|
||||||
// 重新获取数据确保数据同步
|
|
||||||
await getList();
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
if (error === 'cancel') {
|
if (error == 'cancel') {
|
||||||
console.log('用户取消状态切换');
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
console.error('状态切换失败:', error);
|
console.error('状态切换失败:', error);
|
||||||
@@ -181,25 +275,6 @@ const handleStatusChange = async (row: TableDataItem) => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
|
||||||
* 处理搜索
|
|
||||||
*/
|
|
||||||
const handleSearch = () => {
|
|
||||||
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();
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 打开新增客服对话框
|
* 打开新增客服对话框
|
||||||
*/
|
*/
|
||||||
|
|||||||
@@ -13,7 +13,7 @@
|
|||||||
<!-- 富文本编辑器 -->
|
<!-- 富文本编辑器 -->
|
||||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
||||||
<el-form-item label="产品详情" prop="content">
|
<el-form-item label="产品详情" prop="content">
|
||||||
<Editor v-model="formData.content" height="400px" placeholder="请输入产品详细描述..." />
|
<Editor v-model="formData.description" height="400px" placeholder="请输入产品详细描述..." />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
@@ -35,10 +35,8 @@
|
|||||||
<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 { getproductAdd, updateProduct, getproductOne } from '/@/api/customerService/product';
|
import { getproductAdd, updateProduct } 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';
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 产品表单数据接口
|
* 产品表单数据接口
|
||||||
@@ -46,7 +44,7 @@ import { log } from 'node:console';
|
|||||||
interface ProductFormData {
|
interface ProductFormData {
|
||||||
id: number; // 产品ID
|
id: number; // 产品ID
|
||||||
name: string; // 产品名称
|
name: string; // 产品名称
|
||||||
content?: string; // 产品详情(富文本内容)
|
description: string; // 产品详情(富文本内容)
|
||||||
creator: '';
|
creator: '';
|
||||||
modifier: '';
|
modifier: '';
|
||||||
}
|
}
|
||||||
@@ -75,7 +73,7 @@ const state = reactive<ComponentState>({
|
|||||||
formData: {
|
formData: {
|
||||||
id: 0,
|
id: 0,
|
||||||
name: '',
|
name: '',
|
||||||
content: '',
|
description: '',
|
||||||
creator: '',
|
creator: '',
|
||||||
modifier: '',
|
modifier: '',
|
||||||
},
|
},
|
||||||
@@ -87,7 +85,7 @@ const rules: FormRules = {
|
|||||||
{ required: true, message: '产品名称不能为空', trigger: 'blur' },
|
{ required: true, message: '产品名称不能为空', trigger: 'blur' },
|
||||||
{ min: 2, max: 50, message: '产品名称长度在 2 到 50 个字符', trigger: 'blur' },
|
{ min: 2, max: 50, message: '产品名称长度在 2 到 50 个字符', trigger: 'blur' },
|
||||||
],
|
],
|
||||||
content: [{ required: true, message: '产品详情不能为空', trigger: 'blur' }],
|
description: [{ required: true, message: '产品详情不能为空', trigger: 'blur' }],
|
||||||
};
|
};
|
||||||
|
|
||||||
// 模板引用
|
// 模板引用
|
||||||
@@ -107,7 +105,7 @@ const openDialog = async (row?: ProductFormData) => {
|
|||||||
try {
|
try {
|
||||||
if (row && row.id) {
|
if (row && row.id) {
|
||||||
// 编辑模式:获取产品详情
|
// 编辑模式:获取产品详情
|
||||||
await handleEditMode(row.id);
|
await handleEditMode(row);
|
||||||
}
|
}
|
||||||
|
|
||||||
// 显示对话框
|
// 显示对话框
|
||||||
@@ -122,14 +120,13 @@ const openDialog = async (row?: ProductFormData) => {
|
|||||||
* 处理编辑模式的数据获取
|
* 处理编辑模式的数据获取
|
||||||
* @param id - 产品ID
|
* @param id - 产品ID
|
||||||
*/
|
*/
|
||||||
const handleEditMode = async (id: number) => {
|
const handleEditMode = async (row) => {
|
||||||
try {
|
try {
|
||||||
const res = await getproductOne({ id: id });
|
state.formData.id = row.id;
|
||||||
if (res.data) {
|
state.formData.description = row.description;
|
||||||
// 填充表单数据
|
state.formData.name = row.name;
|
||||||
// state.formData.content=
|
|
||||||
console.log(res.data, 'for');
|
console.log(row, '编辑');
|
||||||
}
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('获取产品详情失败:', error);
|
console.error('获取产品详情失败:', error);
|
||||||
throw new Error('获取产品详情失败');
|
throw new Error('获取产品详情失败');
|
||||||
@@ -167,14 +164,13 @@ const onSubmit = async () => {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 设置加载状态
|
|
||||||
state.loading = true;
|
|
||||||
|
|
||||||
// 根据ID判断是新增还是修改
|
// 根据ID判断是新增还是修改
|
||||||
if (state.formData.id === 0) {
|
if (state.formData.id === 0) {
|
||||||
// 新增产品
|
// 新增产品
|
||||||
await getproductAdd(state.formData);
|
|
||||||
ElMessage.success('产品添加成功');
|
await getproductAdd(state.formData).then((res) => {
|
||||||
|
ElMessage.success('产品添加成功');
|
||||||
|
});
|
||||||
} else {
|
} else {
|
||||||
// 修改产品
|
// 修改产品
|
||||||
await updateProduct(state.formData);
|
await updateProduct(state.formData);
|
||||||
@@ -200,7 +196,7 @@ const resetForm = () => {
|
|||||||
state.formData = {
|
state.formData = {
|
||||||
id: 0,
|
id: 0,
|
||||||
name: '',
|
name: '',
|
||||||
content: '',
|
description: '',
|
||||||
creator: '',
|
creator: '',
|
||||||
modifier: '',
|
modifier: '',
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -5,7 +5,7 @@
|
|||||||
<div class="system-user-search mb15">
|
<div class="system-user-search mb15">
|
||||||
<el-form :inline="true">
|
<el-form :inline="true">
|
||||||
<el-form-item label="产品名称">
|
<el-form-item label="产品名称">
|
||||||
<el-input size="default" v-model="tableData.param.productName" placeholder="请输入产品名称" class="w-50 m-2" clearable />
|
<el-input size="default" v-model="tableData.param.name" placeholder="请输入产品名称" class="w-50 m-2" clearable />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item>
|
<el-form-item>
|
||||||
<el-button size="default" type="primary" class="ml10" @click="handleSearch">
|
<el-button size="default" type="primary" class="ml10" @click="handleSearch">
|
||||||
@@ -43,11 +43,19 @@
|
|||||||
<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="createdAtString" label="创建时间" show-overflow-tooltip />
|
<el-table-column prop="createdAtString" label="创建时间" show-overflow-tooltip>
|
||||||
<el-table-column prop="updatedAtString" label="修改时间" show-overflow-tooltip />
|
<template #default="{ row }">
|
||||||
|
{{ formatTime(row.createdAt) }}
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="updatedAtString" label="修改时间" show-overflow-tooltip>
|
||||||
|
<template #default="{ row }">
|
||||||
|
{{ formatTime(row.createdAt) }}
|
||||||
|
</template>
|
||||||
|
</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-button size="small" text type="primary" @click="onRowDel(scope.row)">
|
||||||
@@ -63,7 +71,7 @@
|
|||||||
: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="getProductList"
|
||||||
/>
|
/>
|
||||||
</el-card>
|
</el-card>
|
||||||
|
|
||||||
@@ -104,7 +112,7 @@ interface ProductData {
|
|||||||
* 查询参数接口
|
* 查询参数接口
|
||||||
*/
|
*/
|
||||||
interface QueryParam {
|
interface QueryParam {
|
||||||
productName: string; // 产品名称
|
name: string; // 产品名称
|
||||||
roleStatus: string; // 状态
|
roleStatus: string; // 状态
|
||||||
pageNum: number; // 页码
|
pageNum: number; // 页码
|
||||||
pageSize: number; // 每页大小
|
pageSize: number; // 每页大小
|
||||||
@@ -130,7 +138,7 @@ const tableData = reactive<TableState>({
|
|||||||
total: 0,
|
total: 0,
|
||||||
loading: false,
|
loading: false,
|
||||||
param: {
|
param: {
|
||||||
productName: '',
|
name: '',
|
||||||
roleStatus: '',
|
roleStatus: '',
|
||||||
pageNum: 1,
|
pageNum: 1,
|
||||||
pageSize: 10,
|
pageSize: 10,
|
||||||
@@ -162,6 +170,49 @@ const getProductList = async () => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// ==================== 时间处理函数 ====================
|
||||||
|
/**
|
||||||
|
* 格式化时间显示
|
||||||
|
*/
|
||||||
|
const formatTime = (time: string | number | Date): string => {
|
||||||
|
if (!time) return '-';
|
||||||
|
|
||||||
|
try {
|
||||||
|
let date: Date;
|
||||||
|
|
||||||
|
if (time instanceof Date) {
|
||||||
|
date = time;
|
||||||
|
} else if (typeof time === 'string') {
|
||||||
|
date = new Date(time);
|
||||||
|
} else {
|
||||||
|
let timestamp = time;
|
||||||
|
if (timestamp > 1000000000000) {
|
||||||
|
// 已经是毫秒时间戳
|
||||||
|
} else if (timestamp > 1000000000) {
|
||||||
|
// 秒时间戳,转换为毫秒
|
||||||
|
timestamp = timestamp * 1000;
|
||||||
|
}
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 处理搜索
|
* 处理搜索
|
||||||
*/
|
*/
|
||||||
|
|||||||
@@ -47,19 +47,23 @@
|
|||||||
</div>
|
</div>
|
||||||
<el-table :data="tableData.data" style="width: 100%">
|
<el-table :data="tableData.data" style="width: 100%">
|
||||||
<!-- <el-table-column type="selection" width="55" align="center" /> -->
|
<!-- <el-table-column type="selection" width="55" align="center" /> -->
|
||||||
<el-table-column label="日期" align="center" prop="loginTime" width="180" />
|
<el-table-column label="日期" align="center" prop="date" width="180">
|
||||||
<el-table-column label="客服平台" align="center" prop="platform" />
|
<template #default="{ row }">
|
||||||
<el-table-column label="客服ID" align="center" prop="infoId" />
|
{{ formatTime(row.date) }}
|
||||||
<el-table-column label="客服姓名" align="center" prop="loginName" />
|
</template>
|
||||||
<el-table-column label="进线人数" align="center" prop="ipaddr" width="130" :show-overflow-tooltip="true" />
|
</el-table-column>
|
||||||
<el-table-column label="开口人数" align="center" prop="loginLocation" :show-overflow-tooltip="true" />
|
<el-table-column label="客服平台" align="center" prop="customerServicePlatform" />
|
||||||
<el-table-column label="留资卡发送数量" align="center" prop="browser" />
|
<el-table-column label="客服ID" align="center" prop="customerServiceId" />
|
||||||
<el-table-column label="名片发送数" align="center" prop="os" />
|
<el-table-column label="客服姓名" align="center" prop="customerServiceName" />
|
||||||
|
<el-table-column label="进线人数" align="center" prop="inboundCount" width="130" :show-overflow-tooltip="true" />
|
||||||
|
<el-table-column label="开口人数" align="center" prop="activeCount" :show-overflow-tooltip="true" />
|
||||||
|
<el-table-column label="留资卡发送数量" align="center" prop="contactCardSentCount" />
|
||||||
|
<el-table-column label="名片发送数" align="center" prop="nameCardSentCount" />
|
||||||
<el-table-column label="留资人数" align="center" prop="status" />
|
<el-table-column label="留资人数" align="center" prop="status" />
|
||||||
<el-table-column label="接待人数" align="center" prop="msg" />
|
<el-table-column label="接待人数" align="center" prop="servedCount" />
|
||||||
<el-table-column label="30秒回复率" align="center" prop="module" />
|
<el-table-column label="30秒回复率" align="center" prop="responseRate30s" />
|
||||||
<el-table-column label="60秒回复率" align="center" prop="module" />
|
<el-table-column label="60秒回复率" align="center" prop="responseRate60s" />
|
||||||
<el-table-column label="3分钟回复率" align="center" prop="module" />
|
<el-table-column label="3分钟回复率" align="center" prop="responseRate360s" />
|
||||||
</el-table>
|
</el-table>
|
||||||
<pagination
|
<pagination
|
||||||
v-show="tableData.total > 0"
|
v-show="tableData.total > 0"
|
||||||
@@ -108,9 +112,48 @@ interface TableData {
|
|||||||
param: TableDataParam;
|
param: TableDataParam;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// ==================== 时间处理函数 ====================
|
||||||
|
/**
|
||||||
|
* 格式化时间显示
|
||||||
|
*/
|
||||||
|
const formatTime = (time: string | number | Date): string => {
|
||||||
|
if (!time) return '-';
|
||||||
|
|
||||||
|
try {
|
||||||
|
let date: Date;
|
||||||
|
|
||||||
|
if (time instanceof Date) {
|
||||||
|
date = time;
|
||||||
|
} else if (typeof time === 'string') {
|
||||||
|
date = new Date(time);
|
||||||
|
} else {
|
||||||
|
let timestamp = time;
|
||||||
|
if (timestamp > 1000000000000) {
|
||||||
|
// 已经是毫秒时间戳
|
||||||
|
} else if (timestamp > 1000000000) {
|
||||||
|
// 秒时间戳,转换为毫秒
|
||||||
|
timestamp = timestamp * 1000;
|
||||||
|
}
|
||||||
|
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');
|
||||||
|
|
||||||
|
return `${year}-${month}-${day}`;
|
||||||
|
} catch (error) {
|
||||||
|
console.error('时间格式化错误:', error);
|
||||||
|
return String(time);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
// 响应式数据
|
// 响应式数据
|
||||||
const queryRef = ref<FormInstance>();
|
const queryRef = ref<FormInstance>();
|
||||||
const ids = ref<number[]>([]);
|
|
||||||
const tableData = reactive<TableData>({
|
const tableData = reactive<TableData>({
|
||||||
data: [],
|
data: [],
|
||||||
total: 0,
|
total: 0,
|
||||||
|
|||||||
@@ -1,17 +1,17 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="system-edit-role-container">
|
<div class="system-edit-role-container">
|
||||||
<el-dialog title="" v-model="isShowDialog" width="769px">
|
<el-dialog title="" v-model="isShowDialog" width="769px" @close="onDialogClose">
|
||||||
<el-form ref="formRef" :model="state.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">
|
||||||
<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="name">
|
<el-form-item label="标签" prop="tag">
|
||||||
<el-input v-model="formData.tag" :placeholder="formData.tag" clearable />
|
<el-input v-model="formData.tag" placeholder="请输入标签" clearable />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
<!-- 富文本编辑器 -->
|
<!-- 富文本编辑器 -->
|
||||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
||||||
<el-form-item label="产品详情" prop="content">
|
<el-form-item label="产品详情" prop="content">
|
||||||
<Editor v-model="formData.content" height="400px" :placeholder="formData.content" />
|
<Editor v-model="formData.content" height="400px" :key="editorKey" placeholder="请输入产品详情" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
@@ -33,22 +33,14 @@ 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 Editor from '/@/components/editor/index.vue';
|
import Editor from '/@/components/editor/index.vue';
|
||||||
import { getscriptAdd, updatescript } from '/@/api/customerService/script';
|
import { getscriptAdd, updatescript } from '/@/api/customerService/script';
|
||||||
// console.log(Session.get('userInfo').userNickname, 'user');
|
|
||||||
|
|
||||||
// 定义类型接口
|
// 定义类型接口
|
||||||
interface MenuDataTree {
|
|
||||||
id: number;
|
|
||||||
pid: number;
|
|
||||||
title: string;
|
|
||||||
children?: MenuDataTree[];
|
|
||||||
}
|
|
||||||
|
|
||||||
interface DialogRow {
|
interface DialogRow {
|
||||||
id: number;
|
id: number;
|
||||||
tag: string;
|
tag: string;
|
||||||
creator: string;
|
creator: string;
|
||||||
content: string;
|
content: string;
|
||||||
modifier: '';
|
modifier: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 定义事件
|
// 定义事件
|
||||||
@@ -60,17 +52,14 @@ const emit = defineEmits<{
|
|||||||
const state = reactive({
|
const state = reactive({
|
||||||
loading: false,
|
loading: false,
|
||||||
isShowDialog: false,
|
isShowDialog: false,
|
||||||
|
editorKey: 0, // 用于强制重新渲染编辑器
|
||||||
formData: {
|
formData: {
|
||||||
id: 0,
|
id: 0,
|
||||||
tag: '',
|
tag: '',
|
||||||
content: '',
|
content: '',
|
||||||
creator: '',
|
creator: '',
|
||||||
modifier: '',
|
modifier: '',
|
||||||
},
|
} as DialogRow,
|
||||||
menuData: [] as MenuDataTree[],
|
|
||||||
menuExpand: false,
|
|
||||||
menuNodeAll: false,
|
|
||||||
menuCheckStrictly: false,
|
|
||||||
});
|
});
|
||||||
|
|
||||||
// 表单验证规则
|
// 表单验证规则
|
||||||
@@ -81,16 +70,9 @@ const rules: FormRules = {
|
|||||||
|
|
||||||
// 模板引用
|
// 模板引用
|
||||||
const formRef = ref<FormInstance>();
|
const formRef = ref<FormInstance>();
|
||||||
const menuRef = ref();
|
|
||||||
|
|
||||||
// 解构状态数据
|
// 解构状态数据
|
||||||
const { loading, isShowDialog, formData, menuData, menuExpand, menuNodeAll, menuCheckStrictly } = toRefs(state);
|
const { loading, isShowDialog, formData, editorKey } = toRefs(state);
|
||||||
|
|
||||||
// 菜单配置
|
|
||||||
const menuProps = {
|
|
||||||
children: 'children',
|
|
||||||
label: 'title',
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 打开对话框
|
* 打开对话框
|
||||||
@@ -98,26 +80,46 @@ const menuProps = {
|
|||||||
*/
|
*/
|
||||||
const openDialog = (row?: DialogRow) => {
|
const openDialog = (row?: DialogRow) => {
|
||||||
resetForm();
|
resetForm();
|
||||||
console.log(row, 'row');
|
|
||||||
if (row) {
|
if (row) {
|
||||||
state.formData = row;
|
// 深拷贝数据,避免引用问题
|
||||||
|
state.formData = { ...row };
|
||||||
|
} else {
|
||||||
|
// 新增模式,确保清空数据
|
||||||
|
state.formData = {
|
||||||
|
id: 0,
|
||||||
|
tag: '',
|
||||||
|
content: '',
|
||||||
|
creator: '',
|
||||||
|
modifier: '',
|
||||||
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 更新编辑器 key 强制重新渲染
|
||||||
|
state.editorKey++;
|
||||||
|
|
||||||
state.isShowDialog = true;
|
state.isShowDialog = true;
|
||||||
|
|
||||||
|
// 确保 DOM 更新后处理
|
||||||
|
nextTick(() => {
|
||||||
|
if (formRef.value) {
|
||||||
|
formRef.value.clearValidate();
|
||||||
|
}
|
||||||
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 关闭对话框
|
* 对话框关闭时的处理
|
||||||
*/
|
*/
|
||||||
const closeDialog = () => {
|
const onDialogClose = () => {
|
||||||
state.isShowDialog = false;
|
resetForm();
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 取消操作
|
* 取消操作
|
||||||
*/
|
*/
|
||||||
const onCancel = () => {
|
const onCancel = () => {
|
||||||
closeDialog();
|
state.isShowDialog = false;
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -136,7 +138,6 @@ const onSubmit = async () => {
|
|||||||
if (state.formData.id === 0) {
|
if (state.formData.id === 0) {
|
||||||
// 新增模式
|
// 新增模式
|
||||||
await getscriptAdd(state.formData);
|
await getscriptAdd(state.formData);
|
||||||
console.log(state.formData);
|
|
||||||
ElMessage.success('添加成功');
|
ElMessage.success('添加成功');
|
||||||
} else {
|
} else {
|
||||||
// 编辑模式
|
// 编辑模式
|
||||||
@@ -145,7 +146,7 @@ const onSubmit = async () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// 关闭对话框并刷新列表
|
// 关闭对话框并刷新列表
|
||||||
closeDialog();
|
state.isShowDialog = false;
|
||||||
emit('success');
|
emit('success');
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('提交失败:', error);
|
console.error('提交失败:', error);
|
||||||
@@ -159,9 +160,6 @@ const onSubmit = async () => {
|
|||||||
* 重置表单
|
* 重置表单
|
||||||
*/
|
*/
|
||||||
const resetForm = () => {
|
const resetForm = () => {
|
||||||
state.menuCheckStrictly = false;
|
|
||||||
state.menuExpand = false;
|
|
||||||
state.menuNodeAll = false;
|
|
||||||
state.formData = {
|
state.formData = {
|
||||||
id: 0,
|
id: 0,
|
||||||
tag: '',
|
tag: '',
|
||||||
@@ -172,43 +170,14 @@ const resetForm = () => {
|
|||||||
|
|
||||||
// 重置表单验证状态
|
// 重置表单验证状态
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
formRef.value?.clearValidate();
|
if (formRef.value) {
|
||||||
|
formRef.value.clearValidate();
|
||||||
|
}
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
// 暴露方法给父组件使用
|
// 暴露方法给父组件使用
|
||||||
defineExpose({
|
defineExpose({
|
||||||
openDialog,
|
openDialog,
|
||||||
closeDialog,
|
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
.system-edit-role-container {
|
|
||||||
:deep(.el-dialog__body) {
|
|
||||||
padding: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mb20 {
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dialog-footer {
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.tree-border {
|
|
||||||
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>
|
|
||||||
|
|||||||
@@ -106,24 +106,31 @@ const tableData = reactive<TableState>({
|
|||||||
* @param time 时间字符串或时间戳
|
* @param time 时间字符串或时间戳
|
||||||
* @returns 格式化后的时间字符串
|
* @returns 格式化后的时间字符串
|
||||||
*/
|
*/
|
||||||
const formatTime = (time: string | number): string => {
|
const formatTime = (time: string | number | Date): string => {
|
||||||
if (!time) return '-';
|
if (!time) return '-';
|
||||||
|
|
||||||
try {
|
try {
|
||||||
// 如果是时间戳格式
|
let date: Date;
|
||||||
let timestamp = typeof time === 'string' ? parseInt(time) : time;
|
|
||||||
|
|
||||||
// 如果是毫秒时间戳,需要判断是否需要转换
|
if (time instanceof Date) {
|
||||||
if (timestamp > 1000000000000) {
|
date = time;
|
||||||
// 已经是毫秒时间戳
|
} else if (typeof time === 'string') {
|
||||||
} else if (timestamp > 1000000000) {
|
// 直接使用字符串创建Date对象,ISO格式会自动识别
|
||||||
// 秒时间戳,转换为毫秒
|
date = new Date(time);
|
||||||
timestamp = timestamp * 1000;
|
} else {
|
||||||
|
// 处理时间戳
|
||||||
|
let timestamp = time;
|
||||||
|
if (timestamp > 1000000000000) {
|
||||||
|
// 已经是毫秒时间戳
|
||||||
|
} else if (timestamp > 1000000000) {
|
||||||
|
// 秒时间戳,转换为毫秒
|
||||||
|
timestamp = timestamp * 1000;
|
||||||
|
}
|
||||||
|
date = new Date(timestamp);
|
||||||
}
|
}
|
||||||
|
|
||||||
const date = new Date(timestamp);
|
|
||||||
if (isNaN(date.getTime())) {
|
if (isNaN(date.getTime())) {
|
||||||
return String(time); // 返回原始值
|
return String(time);
|
||||||
}
|
}
|
||||||
|
|
||||||
const year = date.getFullYear();
|
const year = date.getFullYear();
|
||||||
@@ -136,7 +143,7 @@ const formatTime = (time: string | number): string => {
|
|||||||
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('时间格式化错误:', error);
|
console.error('时间格式化错误:', error);
|
||||||
return String(time); // 返回原始值
|
return String(time);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user