增加导入导出模块
This commit is contained in:
WUSIJIAN
6
src/api/customerService/account/index.ts
Normal file
6
src/api/customerService/account/index.ts
Normal file
@@ -0,0 +1,6 @@
|
||||
import request from '/@/utils/request';
|
||||
|
||||
/**
|
||||
* 登录api接口集合
|
||||
* @method signIn 用户登录
|
||||
*/
|
||||
0
src/api/customerService/product/index.ts
Normal file
0
src/api/customerService/product/index.ts
Normal file
0
src/api/customerService/report/index.ts
Normal file
0
src/api/customerService/report/index.ts
Normal file
0
src/api/customerService/script/index.ts
Normal file
0
src/api/customerService/script/index.ts
Normal file
@@ -1,256 +1,262 @@
|
||||
<template>
|
||||
<div class="system-role-container">
|
||||
<el-card shadow="hover">
|
||||
<div class="system-user-search mb15">
|
||||
<el-form :inline="true">
|
||||
<el-form-item label="客服ID">
|
||||
<el-input size="default" v-model="tableData.param.roleName" placeholder="请输入客服ID"
|
||||
class="w-50 m-2" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="客服平台" prop="status" style="width: 200px;">
|
||||
<el-select placeholder="小红书" clearable size="default" style="width: 240px">
|
||||
<el-option :label="'小红书'" />
|
||||
<el-option :label="'抖音'" />
|
||||
<el-option :label="'快手'" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button size="default" type="primary" class="ml10" @click="roleList">
|
||||
<el-icon>
|
||||
<ele-Search />
|
||||
</el-icon>
|
||||
查询
|
||||
</el-button>
|
||||
<el-button size="default" type="success" class="ml10" @click="onOpenAddRole">
|
||||
<el-icon>
|
||||
<ele-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="name" label="客服id" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="status" label="客服状态" show-overflow-tooltip>
|
||||
<template #default="scope">
|
||||
<el-tag type="success" v-if="scope.row.status === 1">启用</el-tag>
|
||||
<el-tag type="info" v-else>禁用</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="remark" label="客服平台" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="key" label="创建人" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="key" 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>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<pagination v-show="tableData.total > 0" :total="tableData.total" v-model:page="tableData.param.pageNum"
|
||||
v-model:limit="tableData.param.pageSize" @pagination="roleList" />
|
||||
</el-card>
|
||||
<EditRole ref="editRoleRef" @getRoleList="roleList" />
|
||||
</div>
|
||||
<div class="system-role-container">
|
||||
<el-card shadow="hover">
|
||||
<div class="system-user-search mb15">
|
||||
<el-form :inline="true">
|
||||
<el-form-item label="客服ID">
|
||||
<el-input size="default" v-model="tableData.param.roleName" placeholder="请输入客服ID" class="w-50 m-2" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="客服平台" prop="status" style="width: 200px">
|
||||
<el-select placeholder="小红书" clearable size="default" style="width: 240px">
|
||||
<el-option :label="'小红书'" :value="''" />
|
||||
<el-option :label="'抖音'" :value="''" />
|
||||
<el-option :label="'快手'" :value="''" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button size="default" type="primary" class="ml10" @click="roleList">
|
||||
<el-icon>
|
||||
<ele-Search />
|
||||
</el-icon>
|
||||
查询
|
||||
</el-button>
|
||||
<el-button size="default" type="success" class="ml10" @click="onOpenAddRole">
|
||||
<el-icon>
|
||||
<ele-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="name" label="客服id" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="status" label="客服状态" show-overflow-tooltip>
|
||||
<template #default="scope">
|
||||
<el-tag type="success" v-if="scope.row.status === 1">启用</el-tag>
|
||||
<el-tag type="info" v-else>禁用</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="remark" label="客服平台" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="key" label="创建人" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="key" 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
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<pagination
|
||||
v-show="tableData.total > 0"
|
||||
:total="tableData.total"
|
||||
v-model:page="tableData.param.pageNum"
|
||||
v-model:limit="tableData.param.pageSize"
|
||||
@pagination="roleList"
|
||||
/>
|
||||
</el-card>
|
||||
<EditRole ref="editRoleRef" @getRoleList="roleList" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { toRefs, reactive, onMounted, ref, defineComponent, toRaw, getCurrentInstance } from 'vue';
|
||||
import { ElMessageBox, ElMessage } from 'element-plus';
|
||||
import EditRole from '/@/views/customerService/account/component/editRole.vue';
|
||||
import { deleteRole, getRoleList } from "/@/api/system/role";
|
||||
import { deleteRole, getRoleList } from '/@/api/system/role';
|
||||
// 定义接口来定义对象的类型
|
||||
interface TableData {
|
||||
id: number;
|
||||
status: number;
|
||||
listOrder: number;
|
||||
name: string;
|
||||
remark: string;
|
||||
dataScope: number;
|
||||
createdAt: string;
|
||||
id: number;
|
||||
status: number;
|
||||
listOrder: number;
|
||||
name: string;
|
||||
remark: string;
|
||||
dataScope: number;
|
||||
createdAt: string;
|
||||
}
|
||||
interface TableDataState {
|
||||
tableData: {
|
||||
data: Array<TableData>;
|
||||
total: number;
|
||||
loading: boolean;
|
||||
param: {
|
||||
roleName: string;
|
||||
roleStatus: string;
|
||||
pageNum: number;
|
||||
pageSize: number;
|
||||
};
|
||||
};
|
||||
tableData: {
|
||||
data: Array<TableData>;
|
||||
total: number;
|
||||
loading: boolean;
|
||||
param: {
|
||||
roleName: string;
|
||||
roleStatus: string;
|
||||
pageNum: number;
|
||||
pageSize: number;
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
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",
|
||||
"key": 'list'
|
||||
},
|
||||
{
|
||||
"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'
|
||||
},
|
||||
{
|
||||
"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": '李四'
|
||||
},
|
||||
{
|
||||
"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": '张三'
|
||||
},
|
||||
{
|
||||
"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'
|
||||
},
|
||||
{
|
||||
"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'
|
||||
}
|
||||
])
|
||||
{
|
||||
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',
|
||||
},
|
||||
{
|
||||
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',
|
||||
},
|
||||
{
|
||||
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: '李四',
|
||||
},
|
||||
{
|
||||
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: '张三',
|
||||
},
|
||||
{
|
||||
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',
|
||||
},
|
||||
{
|
||||
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',
|
||||
},
|
||||
]);
|
||||
|
||||
export default defineComponent({
|
||||
name: 'apiV1SystemRoleList',
|
||||
components: { EditRole },
|
||||
setup() {
|
||||
const { proxy } = getCurrentInstance() as any;
|
||||
const addRoleRef = ref();
|
||||
const editRoleRef = ref();
|
||||
const dataScopeRef = ref();
|
||||
const state = reactive<TableDataState>({
|
||||
tableData: {
|
||||
data: [],
|
||||
total: 0,
|
||||
loading: false,
|
||||
param: {
|
||||
roleName: '',
|
||||
roleStatus: '',
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
},
|
||||
});
|
||||
// 初始化表格数据
|
||||
const initTableData = () => {
|
||||
roleList()
|
||||
};
|
||||
const roleList = () => {
|
||||
const data: Array<TableData> = [];
|
||||
getRoleList(state.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,
|
||||
});
|
||||
})
|
||||
state.tableData.data = dateList.value;
|
||||
state.tableData.total = dateList.value.length;
|
||||
})
|
||||
};
|
||||
// 打开新增角色弹窗
|
||||
const onOpenAddRole = () => {
|
||||
editRoleRef.value.openDialog();
|
||||
};
|
||||
// 打开修改角色弹窗
|
||||
const onOpenEditRole = (row: Object) => {
|
||||
editRoleRef.value.openDialog(toRaw(row));
|
||||
};
|
||||
name: 'apiV1SystemRoleList',
|
||||
components: { EditRole },
|
||||
setup() {
|
||||
const { proxy } = getCurrentInstance() as any;
|
||||
const addRoleRef = ref();
|
||||
const editRoleRef = ref();
|
||||
const dataScopeRef = ref();
|
||||
const state = reactive<TableDataState>({
|
||||
tableData: {
|
||||
data: [],
|
||||
total: 0,
|
||||
loading: false,
|
||||
param: {
|
||||
roleName: '',
|
||||
roleStatus: '',
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
},
|
||||
});
|
||||
// 初始化表格数据
|
||||
const initTableData = () => {
|
||||
roleList();
|
||||
};
|
||||
const roleList = () => {
|
||||
const data: Array<TableData> = [];
|
||||
getRoleList(state.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,
|
||||
});
|
||||
});
|
||||
state.tableData.data = dateList.value;
|
||||
state.tableData.total = dateList.value.length;
|
||||
});
|
||||
};
|
||||
// 打开新增角色弹窗
|
||||
const onOpenAddRole = () => {
|
||||
editRoleRef.value.openDialog();
|
||||
};
|
||||
// 打开修改角色弹窗
|
||||
const onOpenEditRole = (row: Object) => {
|
||||
editRoleRef.value.openDialog(toRaw(row));
|
||||
};
|
||||
|
||||
// 删除角色
|
||||
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 onHandleSizeChange = (val: number) => {
|
||||
state.tableData.param.pageSize = val;
|
||||
};
|
||||
// 分页改变
|
||||
const onHandleCurrentChange = (val: number) => {
|
||||
state.tableData.param.pageNum = val;
|
||||
};
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
initTableData();
|
||||
});
|
||||
return {
|
||||
addRoleRef,
|
||||
editRoleRef,
|
||||
dataScopeRef,
|
||||
onOpenAddRole,
|
||||
onOpenEditRole,
|
||||
onRowDel,
|
||||
onHandleSizeChange,
|
||||
onHandleCurrentChange,
|
||||
roleList,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
// 删除角色
|
||||
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 onHandleSizeChange = (val: number) => {
|
||||
state.tableData.param.pageSize = val;
|
||||
};
|
||||
// 分页改变
|
||||
const onHandleCurrentChange = (val: number) => {
|
||||
state.tableData.param.pageNum = val;
|
||||
};
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
initTableData();
|
||||
});
|
||||
return {
|
||||
addRoleRef,
|
||||
editRoleRef,
|
||||
dataScopeRef,
|
||||
onOpenAddRole,
|
||||
onOpenEditRole,
|
||||
onRowDel,
|
||||
onHandleSizeChange,
|
||||
onHandleCurrentChange,
|
||||
roleList,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
48
src/views/customerService/product/component/exportDialog.vue
Normal file
48
src/views/customerService/product/component/exportDialog.vue
Normal file
@@ -0,0 +1,48 @@
|
||||
<template>
|
||||
<el-dialog title="是否导出产品" v-model="isShowDialog" width="500px">
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="isShowDialog = false">取消</el-button>
|
||||
<el-button type="primary" @click="handleExport">导出</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref, reactive } from 'vue';
|
||||
import { ElMessage } from 'element-plus';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'ExportDialog',
|
||||
setup() {
|
||||
const isShowDialog = ref(false);
|
||||
const tableData = ref([]);
|
||||
|
||||
const form = reactive({
|
||||
exportType: 'current',
|
||||
fileType: 'xlsx',
|
||||
});
|
||||
|
||||
// 打开对话框
|
||||
const openDialog = (data: any) => {
|
||||
tableData.value = data;
|
||||
isShowDialog.value = true;
|
||||
};
|
||||
|
||||
// 处理导出
|
||||
const handleExport = () => {
|
||||
// 这里处理导出逻辑
|
||||
ElMessage.success('导出成功');
|
||||
isShowDialog.value = false;
|
||||
};
|
||||
|
||||
return {
|
||||
isShowDialog,
|
||||
form,
|
||||
openDialog,
|
||||
handleExport,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
431
src/views/customerService/product/component/importDialog.vue
Normal file
431
src/views/customerService/product/component/importDialog.vue
Normal file
@@ -0,0 +1,431 @@
|
||||
<template>
|
||||
<el-dialog title="导入产品" v-model="isShowDialog" width="500px" destroy-on-close>
|
||||
<div class="import-container">
|
||||
<!-- 导入说明 -->
|
||||
<div class="import-instructions mt20" style="margin-bottom: 40px">
|
||||
<el-card shadow="never" class="box-card">
|
||||
<el-text type="info" size="small">
|
||||
<ul class="instruction-list">
|
||||
<li>1. 请先下载模板ZIP包，查看Word文档格式要求</li>
|
||||
<li>2. 按照模板中的Word文档格式准备您的产品文档</li>
|
||||
<li>3. 将您的Word文档打包成ZIP格式上传</li>
|
||||
<li>4. 支持 .docx 格式的Word文档</li>
|
||||
</ul>
|
||||
</el-text>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<!-- 上传区域 -->
|
||||
<el-upload
|
||||
ref="uploadRef"
|
||||
class="upload-demo"
|
||||
drag
|
||||
:action="uploadAction"
|
||||
:headers="uploadHeaders"
|
||||
:data="uploadData"
|
||||
:accept="acceptFileTypes"
|
||||
:limit="1"
|
||||
:on-success="handleSuccess"
|
||||
:on-error="handleError"
|
||||
:before-upload="beforeUpload"
|
||||
:on-exceed="handleExceed"
|
||||
:on-remove="handleRemove"
|
||||
>
|
||||
<div class="el-upload-area">
|
||||
<el-icon class="el-icon--upload"><ele-UploadFilled /></el-icon>
|
||||
<div class="el-upload__text">将ZIP文件拖到此处，或<em>点击上传</em></div>
|
||||
</div>
|
||||
<template #tip>
|
||||
<div class="el-upload__tip">
|
||||
<el-text type="info" size="small"> 请上传 {{ acceptFileTypes }} 格式文件，且不超过 {{ fileSizeLimit }}MB </el-text>
|
||||
</div>
|
||||
</template>
|
||||
</el-upload>
|
||||
|
||||
<!-- 下载模板按钮 -->
|
||||
<div class="download-section" style="margin-top: 20px; text-align: center">
|
||||
<el-button type="primary" size="default" :loading="downloadLoading" @click="downloadTemplate" style="width: 200px">
|
||||
<template #icon>
|
||||
<el-icon><ele-Download /></el-icon>
|
||||
</template>
|
||||
{{ downloadLoading ? '正在生成模板...' : '下载导入模板' }}
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="isShowDialog = false">取消</el-button>
|
||||
<el-button type="primary" :loading="loading" @click="submitUpload">
|
||||
{{ loading ? '导入中...' : '开始导入' }}
|
||||
</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref, reactive } from 'vue';
|
||||
import { ElMessage, ElMessageBox } from 'element-plus';
|
||||
import { UploadFilled, Download } from '@element-plus/icons-vue';
|
||||
import JSZip from 'jszip';
|
||||
import { saveAs } from 'file-saver';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'ImportDialog',
|
||||
components: { UploadFilled, Download },
|
||||
emits: ['getRoleList'],
|
||||
setup(props, { emit }) {
|
||||
const isShowDialog = ref(false);
|
||||
const uploadRef = ref();
|
||||
const loading = ref(false);
|
||||
const downloadLoading = ref(false);
|
||||
|
||||
// 上传配置
|
||||
const uploadAction = ref('/api/product/import-word-zip');
|
||||
const uploadHeaders = reactive({
|
||||
Authorization: 'Bearer ' + localStorage.getItem('token'),
|
||||
});
|
||||
const uploadData = reactive({
|
||||
type: 'word-zip',
|
||||
});
|
||||
const acceptFileTypes = '.zip,.ZIP';
|
||||
const fileSizeLimit = 50;
|
||||
|
||||
// 打开对话框
|
||||
const openDialog = () => {
|
||||
isShowDialog.value = true;
|
||||
loading.value = false;
|
||||
downloadLoading.value = false;
|
||||
if (uploadRef.value) {
|
||||
uploadRef.value.clearFiles();
|
||||
}
|
||||
};
|
||||
|
||||
// 创建Word文档的二进制内容（模拟真实的.docx格式）
|
||||
const createWordDocumentContent = (content: string) => {
|
||||
// Word文档的基本结构（简化版）
|
||||
// 实际Word文档是复杂的XML结构，这里创建一个简单的文本文件
|
||||
// 在实际项目中应该使用后端生成真正的Word文档
|
||||
|
||||
// 创建一个包含基本Word文档结构的文本
|
||||
const wordContent = `<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
|
||||
<?mso-application progid="Word.Document"?>
|
||||
<w:wordDocument xmlns:w="http://schemas.microsoft.com/office/word/2003/wordml">
|
||||
<w:body>
|
||||
<w:p>
|
||||
<w:r>
|
||||
<w:t>${content.replace(/\n/g, '</w:t></w:r></w:p><w:p><w:r><w:t>')}</w:t>
|
||||
</w:r>
|
||||
</w:p>
|
||||
</w:body>
|
||||
</w:wordDocument>`;
|
||||
|
||||
return new Blob([wordContent], { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' });
|
||||
};
|
||||
|
||||
// 创建文本文件内容
|
||||
const createTextFile = (content: string) => {
|
||||
return new Blob([content], { type: 'text/plain;charset=utf-8' });
|
||||
};
|
||||
|
||||
// 下载模板 - 修复版本：生成包含真实文件的ZIP包
|
||||
const downloadTemplate = async () => {
|
||||
downloadLoading.value = true;
|
||||
|
||||
try {
|
||||
const zip = new JSZip();
|
||||
|
||||
// 1. 创建产品说明书模板内容
|
||||
const manualContent = `产品说明书模板
|
||||
|
||||
产品名称：_________________________
|
||||
产品型号：_________________________
|
||||
创建人：___________________________
|
||||
创建时间：_________________________
|
||||
|
||||
产品描述：
|
||||
___________________________________
|
||||
___________________________________
|
||||
|
||||
技术参数：
|
||||
• 规格：___________________________
|
||||
• 尺寸：___________________________
|
||||
• 重量：___________________________
|
||||
• 材质：___________________________
|
||||
|
||||
功能特点：
|
||||
1. ________________________________
|
||||
2. ________________________________
|
||||
3. ________________________________
|
||||
|
||||
使用说明：
|
||||
___________________________________
|
||||
___________________________________
|
||||
|
||||
注意事项：
|
||||
• ________________________________
|
||||
• ________________________________
|
||||
• ________________________________`;
|
||||
|
||||
// 2. 创建技术规格书模板内容
|
||||
const specContent = `技术规格书模板
|
||||
|
||||
产品名称：_________________________
|
||||
产品型号：_________________________
|
||||
|
||||
技术规格：
|
||||
1. 基本参数
|
||||
- 工作电压：___________________
|
||||
- 功率：_______________________
|
||||
- 尺寸：_______________________
|
||||
- 重量：_______________________
|
||||
|
||||
2. 性能指标
|
||||
- 精度：_______________________
|
||||
- 范围：_______________________
|
||||
- 寿命：_______________________
|
||||
|
||||
3. 环境要求
|
||||
- 工作温度：___________________
|
||||
- 存储温度：___________________
|
||||
- 湿度：_______________________
|
||||
|
||||
4. 安全标准
|
||||
- 认证：_______________________
|
||||
- 防护等级：___________________`;
|
||||
|
||||
// 3. 创建使用说明文档
|
||||
const readmeContent = `产品文档导入模板使用说明
|
||||
================================
|
||||
|
||||
欢迎使用产品文档导入模板！
|
||||
|
||||
📁 ZIP包内容说明：
|
||||
-----------------
|
||||
1. 产品说明书模板.docx - 产品详细说明文档模板
|
||||
2. 技术规格书模板.docx - 技术参数文档模板
|
||||
3. 使用说明.txt - 本说明文件
|
||||
|
||||
📝 使用步骤：
|
||||
-----------
|
||||
1. 解压本ZIP包到您的电脑
|
||||
2. 打开Word文档模板
|
||||
3. 按照模板格式填写您的产品信息
|
||||
4. 保存您填写好的Word文档
|
||||
5. 将填写好的文档重新打包成ZIP格式
|
||||
6. 在系统中上传您制作的ZIP包
|
||||
|
||||
⚙️ 文档要求：
|
||||
-----------
|
||||
• 必须使用 .docx 格式（Word 2007及以上版本）
|
||||
• 文档命名请使用有意义的名称
|
||||
• 确保填写所有必填字段
|
||||
• 文档大小不超过10MB/个
|
||||
|
||||
📞 技术支持：
|
||||
-----------
|
||||
如有问题请联系系统管理员。
|
||||
|
||||
祝您使用愉快！`;
|
||||
|
||||
// 创建真实的文件Blob对象
|
||||
const manualBlob = createWordDocumentContent(manualContent);
|
||||
const specBlob = createWordDocumentContent(specContent);
|
||||
const readmeBlob = createTextFile(readmeContent);
|
||||
|
||||
// 将文件添加到ZIP包
|
||||
zip.file('产品说明书模板.docx', manualBlob);
|
||||
zip.file('技术规格书模板.docx', specBlob);
|
||||
zip.file('使用说明.txt', readmeBlob);
|
||||
|
||||
// 生成ZIP包
|
||||
const zipBlob = await zip.generateAsync({
|
||||
type: 'blob',
|
||||
compression: 'DEFLATE',
|
||||
compressionOptions: {
|
||||
level: 6,
|
||||
},
|
||||
});
|
||||
|
||||
// 重要：检查文件大小，确保不是空文件
|
||||
if (zipBlob.size === 0) {
|
||||
throw new Error('生成的ZIP包为空，请检查文件内容');
|
||||
}
|
||||
|
||||
// 下载文件
|
||||
saveAs(zipBlob, `产品文档导入模板_${new Date().toISOString().split('T')[0]}.zip`);
|
||||
|
||||
ElMessage.success({
|
||||
message: `模板下载成功！文件大小：${(zipBlob.size / 1024).toFixed(2)}KB`,
|
||||
duration: 3000,
|
||||
});
|
||||
|
||||
// 显示使用提示
|
||||
setTimeout(() => {
|
||||
ElMessage.info('下载完成后请解压ZIP包查看Word文档模板');
|
||||
}, 1000);
|
||||
} catch (error) {
|
||||
console.error('模板下载失败:', error);
|
||||
ElMessage.error({
|
||||
message: '模板生成失败：' + (error instanceof Error ? error.message : '未知错误'),
|
||||
duration: 5000,
|
||||
});
|
||||
|
||||
// 提供备用方案
|
||||
setTimeout(() => {
|
||||
ElMessageBox.alert('如果模板下载仍有问题，请联系管理员获取手动模板文件。', '下载失败', {
|
||||
confirmButtonText: '确定',
|
||||
type: 'warning',
|
||||
});
|
||||
}, 1000);
|
||||
} finally {
|
||||
downloadLoading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 上传前校验
|
||||
const beforeUpload = (file: File) => {
|
||||
const isZip = file.type === 'application/zip' || file.name.toLowerCase().endsWith('.zip');
|
||||
const isLt50M = file.size / 1024 / 1024 < fileSizeLimit;
|
||||
|
||||
if (!isZip) {
|
||||
ElMessage.error('请上传ZIP格式的压缩包文件!');
|
||||
return false;
|
||||
}
|
||||
if (!isLt50M) {
|
||||
ElMessage.error(`ZIP文件大小不能超过${fileSizeLimit}MB!`);
|
||||
return false;
|
||||
}
|
||||
|
||||
ElMessage.info(`开始上传ZIP包: ${file.name} (${(file.size / 1024 / 1024).toFixed(2)}MB)`);
|
||||
return true;
|
||||
};
|
||||
|
||||
// 文件超出限制
|
||||
const handleExceed = () => {
|
||||
ElMessage.warning('只能上传一个ZIP包文件，请先删除当前文件');
|
||||
};
|
||||
|
||||
// 移除文件
|
||||
const handleRemove = () => {
|
||||
// 文件被移除时的处理
|
||||
};
|
||||
|
||||
// 上传成功
|
||||
const handleSuccess = (response: any) => {
|
||||
loading.value = false;
|
||||
if (response.code === 200) {
|
||||
ElMessage.success('Word文档导入成功');
|
||||
emit('getRoleList');
|
||||
isShowDialog.value = false;
|
||||
} else {
|
||||
ElMessage.error(response.msg || 'Word文档ZIP包导入失败');
|
||||
}
|
||||
};
|
||||
|
||||
// 上传失败
|
||||
const handleError = (error: any) => {
|
||||
loading.value = false;
|
||||
ElMessage.error('ZIP包上传失败，请重试');
|
||||
console.error('ZIP upload error:', error);
|
||||
};
|
||||
|
||||
// 手动提交上传
|
||||
const submitUpload = () => {
|
||||
if (!uploadRef.value || !uploadRef.value.uploadFiles.length) {
|
||||
ElMessage.warning('请先选择要上传的ZIP包文件');
|
||||
return;
|
||||
}
|
||||
|
||||
ElMessageBox.confirm('确认导入选中的ZIP包吗？', '导入确认', {
|
||||
confirmButtonText: '确认导入',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => {
|
||||
loading.value = true;
|
||||
uploadRef.value.submit();
|
||||
})
|
||||
.catch(() => {
|
||||
// 用户取消
|
||||
});
|
||||
};
|
||||
|
||||
return {
|
||||
isShowDialog,
|
||||
uploadRef,
|
||||
loading,
|
||||
downloadLoading,
|
||||
uploadAction,
|
||||
uploadHeaders,
|
||||
uploadData,
|
||||
acceptFileTypes,
|
||||
fileSizeLimit,
|
||||
openDialog,
|
||||
downloadTemplate,
|
||||
beforeUpload,
|
||||
handleExceed,
|
||||
handleRemove,
|
||||
handleSuccess,
|
||||
handleError,
|
||||
submitUpload,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.import-container {
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.download-section {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.template-tips {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.upload-demo {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.el-upload-area {
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.el-icon--upload {
|
||||
font-size: 48px;
|
||||
color: #c0c4cc;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.import-instructions .card-header {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.instruction-list {
|
||||
margin: 0;
|
||||
padding-left: 16px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.instruction-list li {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
:deep(.el-upload-dragger) {
|
||||
width: 100%;
|
||||
height: 180px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
:deep(.el-upload-list) {
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,236 +1,287 @@
|
||||
<template>
|
||||
<div class="system-role-container">
|
||||
<el-card shadow="hover">
|
||||
<div class="system-user-search mb15">
|
||||
<el-form :inline="true">
|
||||
<el-form-item label="产品名称">
|
||||
<el-input size="default" v-model="tableData.param.roleName" placeholder="请输入产品名称"
|
||||
class="w-50 m-2" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button size="default" type="primary" class="ml10" @click="roleList">
|
||||
<el-icon>
|
||||
<ele-Search />
|
||||
</el-icon>
|
||||
查询
|
||||
</el-button>
|
||||
<el-button size="default" type="success" class="ml10" @click="onOpenAddRole">
|
||||
<el-icon>
|
||||
<ele-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="name" label="产品名称" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="remark" label="创建人" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="status" 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>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<pagination v-show="tableData.total > 0" :total="tableData.total" v-model:page="tableData.param.pageNum"
|
||||
v-model:limit="tableData.param.pageSize" @pagination="roleList" />
|
||||
</el-card>
|
||||
<EditRole ref="editRoleRef" @getRoleList="roleList" />
|
||||
</div>
|
||||
<div class="system-role-container">
|
||||
<el-card shadow="hover">
|
||||
<div class="system-user-search mb15">
|
||||
<el-form :inline="true">
|
||||
<el-form-item label="产品名称">
|
||||
<el-input size="default" v-model="tableData.param.roleName" placeholder="请输入产品名称" class="w-50 m-2" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button size="default" type="primary" class="ml10" @click="roleList">
|
||||
<el-icon>
|
||||
<ele-Search />
|
||||
</el-icon>
|
||||
查询
|
||||
</el-button>
|
||||
<el-button size="default" type="success" class="ml10" @click="onOpenAddRole">
|
||||
<el-icon>
|
||||
<ele-FolderAdd />
|
||||
</el-icon>
|
||||
新增产品
|
||||
</el-button>
|
||||
<!-- 添加导入导出按钮 -->
|
||||
<el-button size="default" type="warning" class="ml10" @click="onOpenImport">
|
||||
<el-icon>
|
||||
<ele-Upload />
|
||||
</el-icon>
|
||||
导入
|
||||
</el-button>
|
||||
<el-button size="default" type="info" class="ml10" @click="onOpenExport">
|
||||
<el-icon>
|
||||
<ele-Download />
|
||||
</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="name" label="产品名称" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="remark" label="创建人" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="status" 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
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<pagination
|
||||
v-show="tableData.total > 0"
|
||||
:total="tableData.total"
|
||||
v-model:page="tableData.param.pageNum"
|
||||
v-model:limit="tableData.param.pageSize"
|
||||
@pagination="roleList"
|
||||
/>
|
||||
</el-card>
|
||||
|
||||
<EditRole ref="editRoleRef" @getRoleList="roleList" />
|
||||
|
||||
<!-- 添加导入导出对话框 -->
|
||||
<ImportDialog ref="importDialogRef" @getRoleList="roleList" />
|
||||
<ExportDialog ref="exportDialogRef" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { toRefs, reactive, onMounted, ref, defineComponent, toRaw, getCurrentInstance } from 'vue';
|
||||
import { ElMessageBox, ElMessage } from 'element-plus';
|
||||
import EditRole from '/@/views/customerService/product/component/editRole.vue';
|
||||
import { deleteRole, getRoleList } from "/@/api/system/role";
|
||||
import { deleteRole, getRoleList } from '/@/api/system/role';
|
||||
import ImportDialog from '/@/views/customerService/product/component/importDialog.vue';
|
||||
import ExportDialog from '/@/views/customerService/product/component/exportDialog.vue';
|
||||
|
||||
// 定义接口来定义对象的类型
|
||||
interface TableData {
|
||||
id: number;
|
||||
status: number;
|
||||
listOrder: number;
|
||||
name: string;
|
||||
remark: string;
|
||||
dataScope: number;
|
||||
createdAt: string;
|
||||
id: number;
|
||||
status: number;
|
||||
listOrder: number;
|
||||
name: string;
|
||||
remark: string;
|
||||
dataScope: number;
|
||||
createdAt: string;
|
||||
}
|
||||
interface TableDataState {
|
||||
tableData: {
|
||||
data: Array<TableData>;
|
||||
total: number;
|
||||
loading: boolean;
|
||||
param: {
|
||||
roleName: string;
|
||||
roleStatus: string;
|
||||
pageNum: number;
|
||||
pageSize: number;
|
||||
};
|
||||
};
|
||||
tableData: {
|
||||
data: Array<TableData>;
|
||||
total: number;
|
||||
loading: boolean;
|
||||
param: {
|
||||
roleName: string;
|
||||
roleStatus: string;
|
||||
pageNum: number;
|
||||
pageSize: number;
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
const dateList = ref([
|
||||
{
|
||||
"id": 1,
|
||||
"status": '李四',
|
||||
"listOrder": 0,
|
||||
"name": "xxx药品",
|
||||
"remark": "张三",
|
||||
"dataScope": 3,
|
||||
"createdAt": "2022-04-01 11:38:39",
|
||||
"updatedAt": "2022-04-28 10:00:15"
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"status": '李四',
|
||||
"listOrder": 0,
|
||||
"name": "xxx药品",
|
||||
"remark": "张三",
|
||||
"dataScope": 3,
|
||||
"createdAt": "2022-04-01 11:38:39",
|
||||
"updatedAt": "2022-04-28 10:01:34"
|
||||
},
|
||||
{
|
||||
"id": 3,
|
||||
"status": '李四',
|
||||
"listOrder": 0,
|
||||
"name": "xxx药品",
|
||||
"remark": "张三",
|
||||
"dataScope": 3,
|
||||
"createdAt": "2022-04-01 11:38:39",
|
||||
"updatedAt": "2022-04-01 11:38:39"
|
||||
},
|
||||
{
|
||||
"id": 4,
|
||||
"status": '李四',
|
||||
"listOrder": 0,
|
||||
"name": "xxx药品",
|
||||
"remark": "张三",
|
||||
"dataScope": 3,
|
||||
"createdAt": "2022-04-01 11:38:39",
|
||||
"updatedAt": "2022-04-01 11:38:39"
|
||||
},
|
||||
{
|
||||
"id": 5,
|
||||
"status": '李四',
|
||||
"listOrder": 0,
|
||||
"name": "xxx药品",
|
||||
"remark": "张三",
|
||||
"dataScope": 2,
|
||||
"createdAt": "2022-04-01 11:38:39",
|
||||
"updatedAt": "2022-04-01 11:38:39"
|
||||
},
|
||||
{
|
||||
"id": 8,
|
||||
"status": '李四',
|
||||
"listOrder": 0,
|
||||
"name": "xxx药品",
|
||||
"remark": "张三",
|
||||
"dataScope": 2,
|
||||
"createdAt": "2022-04-01 11:38:39",
|
||||
"updatedAt": "2022-04-06 09:53:40"
|
||||
}
|
||||
])
|
||||
{
|
||||
id: 1,
|
||||
status: '李四',
|
||||
listOrder: 0,
|
||||
name: 'xxx药品',
|
||||
remark: '张三',
|
||||
dataScope: 3,
|
||||
createdAt: '2022-04-01 11:38:39',
|
||||
updatedAt: '2022-04-28 10:00:15',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
status: '李四',
|
||||
listOrder: 0,
|
||||
name: 'xxx药品',
|
||||
remark: '张三',
|
||||
dataScope: 3,
|
||||
createdAt: '2022-04-01 11:38:39',
|
||||
updatedAt: '2022-04-28 10:01:34',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
status: '李四',
|
||||
listOrder: 0,
|
||||
name: 'xxx药品',
|
||||
remark: '张三',
|
||||
dataScope: 3,
|
||||
createdAt: '2022-04-01 11:38:39',
|
||||
updatedAt: '2022-04-01 11:38:39',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
status: '李四',
|
||||
listOrder: 0,
|
||||
name: 'xxx药品',
|
||||
remark: '张三',
|
||||
dataScope: 3,
|
||||
createdAt: '2022-04-01 11:38:39',
|
||||
updatedAt: '2022-04-01 11:38:39',
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
status: '李四',
|
||||
listOrder: 0,
|
||||
name: 'xxx药品',
|
||||
remark: '张三',
|
||||
dataScope: 2,
|
||||
createdAt: '2022-04-01 11:38:39',
|
||||
updatedAt: '2022-04-01 11:38:39',
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
status: '李四',
|
||||
listOrder: 0,
|
||||
name: 'xxx药品',
|
||||
remark: '张三',
|
||||
dataScope: 2,
|
||||
createdAt: '2022-04-01 11:38:39',
|
||||
updatedAt: '2022-04-06 09:53:40',
|
||||
},
|
||||
]);
|
||||
|
||||
export default defineComponent({
|
||||
name: 'apiV1SystemRoleList',
|
||||
components: { EditRole },
|
||||
setup() {
|
||||
const { proxy } = getCurrentInstance() as any;
|
||||
const addRoleRef = ref();
|
||||
const editRoleRef = ref();
|
||||
const dataScopeRef = ref();
|
||||
const state = reactive<TableDataState>({
|
||||
tableData: {
|
||||
data: [],
|
||||
total: 0,
|
||||
loading: false,
|
||||
param: {
|
||||
roleName: '',
|
||||
roleStatus: '',
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
},
|
||||
});
|
||||
// 初始化表格数据
|
||||
const initTableData = () => {
|
||||
roleList()
|
||||
};
|
||||
const roleList = () => {
|
||||
const data: Array<TableData> = [];
|
||||
getRoleList(state.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,
|
||||
});
|
||||
})
|
||||
state.tableData.data = dateList.value;
|
||||
state.tableData.total = dateList.value.length;
|
||||
})
|
||||
};
|
||||
// 打开新增角色弹窗
|
||||
const onOpenAddRole = () => {
|
||||
editRoleRef.value.openDialog();
|
||||
};
|
||||
// 打开修改角色弹窗
|
||||
const onOpenEditRole = (row: Object) => {
|
||||
editRoleRef.value.openDialog(toRaw(row));
|
||||
};
|
||||
name: 'apiV1SystemRoleList',
|
||||
components: { EditRole, ImportDialog, ExportDialog },
|
||||
setup() {
|
||||
const { proxy } = getCurrentInstance() as any;
|
||||
const addRoleRef = ref();
|
||||
const editRoleRef = ref();
|
||||
const importDialogRef = ref();
|
||||
const exportDialogRef = ref();
|
||||
const dataScopeRef = ref();
|
||||
const state = reactive<TableDataState>({
|
||||
tableData: {
|
||||
data: [],
|
||||
total: 0,
|
||||
loading: false,
|
||||
param: {
|
||||
roleName: '',
|
||||
roleStatus: '',
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// 删除角色
|
||||
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 onHandleSizeChange = (val: number) => {
|
||||
state.tableData.param.pageSize = val;
|
||||
};
|
||||
// 分页改变
|
||||
const onHandleCurrentChange = (val: number) => {
|
||||
state.tableData.param.pageNum = val;
|
||||
};
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
initTableData();
|
||||
});
|
||||
return {
|
||||
addRoleRef,
|
||||
editRoleRef,
|
||||
dataScopeRef,
|
||||
onOpenAddRole,
|
||||
onOpenEditRole,
|
||||
onRowDel,
|
||||
onHandleSizeChange,
|
||||
onHandleCurrentChange,
|
||||
roleList,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
// 初始化表格数据
|
||||
const initTableData = () => {
|
||||
roleList();
|
||||
};
|
||||
|
||||
const roleList = () => {
|
||||
const data: Array<TableData> = [];
|
||||
getRoleList(state.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,
|
||||
});
|
||||
});
|
||||
state.tableData.data = dateList.value;
|
||||
state.tableData.total = dateList.value.length;
|
||||
});
|
||||
};
|
||||
|
||||
// 打开新增角色弹窗
|
||||
const onOpenAddRole = () => {
|
||||
editRoleRef.value.openDialog();
|
||||
};
|
||||
|
||||
// 打开修改角色弹窗
|
||||
const onOpenEditRole = (row: Object) => {
|
||||
editRoleRef.value.openDialog(toRaw(row));
|
||||
};
|
||||
|
||||
// 打开导入弹窗
|
||||
const onOpenImport = () => {
|
||||
importDialogRef.value.openDialog();
|
||||
};
|
||||
|
||||
// 打开导出弹窗
|
||||
const onOpenExport = () => {
|
||||
exportDialogRef.value.openDialog(state.tableData.data);
|
||||
};
|
||||
|
||||
// 删除角色
|
||||
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 onHandleSizeChange = (val: number) => {
|
||||
state.tableData.param.pageSize = val;
|
||||
};
|
||||
|
||||
// 分页改变
|
||||
const onHandleCurrentChange = (val: number) => {
|
||||
state.tableData.param.pageNum = val;
|
||||
};
|
||||
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
initTableData();
|
||||
});
|
||||
|
||||
return {
|
||||
addRoleRef,
|
||||
editRoleRef,
|
||||
importDialogRef,
|
||||
exportDialogRef,
|
||||
dataScopeRef,
|
||||
onOpenAddRole,
|
||||
onOpenEditRole,
|
||||
onOpenImport,
|
||||
onOpenExport,
|
||||
onRowDel,
|
||||
onHandleSizeChange,
|
||||
onHandleCurrentChange,
|
||||
roleList,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -1,68 +1,70 @@
|
||||
<template>
|
||||
<div class="system-dic-container">
|
||||
<el-card shadow="hover">
|
||||
<div class="system-user-search mb15">
|
||||
<el-form :model="tableData.param" ref="queryRef" :inline="true" label-width="68px">
|
||||
<div class="system-dic-container">
|
||||
<el-card shadow="hover">
|
||||
<div class="system-user-search mb15">
|
||||
<el-form :model="tableData.param" ref="queryRef" :inline="true" label-width="68px">
|
||||
<el-form-item label="客服平台" prop="status" style="width: 200px">
|
||||
<el-select v-model="tableData.param.status" placeholder="小红书" clearable size="default" style="width: 240px">
|
||||
<el-option :label="'小红书'" :value="''" />
|
||||
<el-option :label="'抖音'" :value="''" />
|
||||
<el-option :label="'快手'" :value="''" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
|
||||
|
||||
|
||||
<el-form-item label="客服平台" prop="status" style="width: 200px;">
|
||||
<el-select v-model="tableData.param.status" placeholder="小红书" clearable size="default"
|
||||
style="width: 240px">
|
||||
<el-option :label="'小红书'" />
|
||||
<el-option :label="'抖音'" />
|
||||
<el-option :label="'快手'" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
|
||||
|
||||
<el-form-item label="" prop="dateRange">
|
||||
<el-date-picker v-model="tableData.param.dateRange" size="default" style="width: 240px"
|
||||
value-format="YYYY-MM-DD" type="daterange" range-separator="-" start-placeholder="请选择开始日期"
|
||||
end-placeholder="请选择结束日期"></el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button size="default" type="primary" class="ml10" @click="dataList">
|
||||
<el-icon>
|
||||
<ele-Search />
|
||||
</el-icon>
|
||||
查询
|
||||
</el-button>
|
||||
<el-button size="default" @click="resetQuery(queryRef)">
|
||||
<el-icon>
|
||||
<ele-Refresh />
|
||||
</el-icon>
|
||||
重置
|
||||
</el-button>
|
||||
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<el-table :data="tableData.data" style="width: 100%" @selection-change="handleSelectionChange">
|
||||
<!-- <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="platform" />
|
||||
<el-table-column label="客服ID" align="center" prop="infoId" />
|
||||
<el-table-column label="客服姓名" align="center" prop="loginName" />
|
||||
<el-table-column label="进线人数" align="center" prop="ipaddr" width="130" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="开口人数" align="center" prop="loginLocation" :s0ow-overflow-tooltip="true" />
|
||||
<el-table-column label="留资卡发送数量" align="center" prop="browser" />
|
||||
<el-table-column label="名片发送数" align="center" prop="os" />
|
||||
<!-- <el-table-column label="留资人数" align="center" prop="status" :formatter="statusFormat" /> -->
|
||||
<el-table-column label="留资人数" align="center" prop="status" />
|
||||
<el-table-column label="接待人数" align="center" prop="msg" />
|
||||
<el-table-column label="30秒回复率" alian="center" prop="module" />
|
||||
<el-table-column label="60秒回复率" alian="center" prop="module" />
|
||||
<el-table-column label="3分钟回复率" alian="center" prop="module" />
|
||||
|
||||
|
||||
</el-table>
|
||||
<pagination v-show="tableData.total > 0" :total="tableData.total" v-model:page="tableData.param.pageNum"
|
||||
v-model:limit="tableData.param.pageSize" @pagination="dataList" />
|
||||
</el-card>
|
||||
</div>
|
||||
<el-form-item label="" prop="dateRange">
|
||||
<el-date-picker
|
||||
v-model="tableData.param.dateRange"
|
||||
size="default"
|
||||
style="width: 240px"
|
||||
value-format="YYYY-MM-DD"
|
||||
type="daterange"
|
||||
range-separator="-"
|
||||
start-placeholder="请选择开始日期"
|
||||
end-placeholder="请选择结束日期"
|
||||
></el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button size="default" type="primary" class="ml10" @click="dataList">
|
||||
<el-icon>
|
||||
<ele-Search />
|
||||
</el-icon>
|
||||
查询
|
||||
</el-button>
|
||||
<el-button size="default" @click="resetQuery(queryRef)">
|
||||
<el-icon>
|
||||
<ele-Refresh />
|
||||
</el-icon>
|
||||
重置
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<el-table :data="tableData.data" style="width: 100%" @selection-change="handleSelectionChange">
|
||||
<!-- <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="platform" />
|
||||
<el-table-column label="客服ID" align="center" prop="infoId" />
|
||||
<el-table-column label="客服姓名" align="center" prop="loginName" />
|
||||
<el-table-column label="进线人数" align="center" prop="ipaddr" width="130" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="开口人数" align="center" prop="loginLocation" :s0ow-overflow-tooltip="true" />
|
||||
<el-table-column label="留资卡发送数量" align="center" prop="browser" />
|
||||
<el-table-column label="名片发送数" align="center" prop="os" />
|
||||
<!-- <el-table-column label="留资人数" align="center" prop="status" :formatter="statusFormat" /> -->
|
||||
<el-table-column label="留资人数" align="center" prop="status" />
|
||||
<el-table-column label="接待人数" align="center" prop="msg" />
|
||||
<el-table-column label="30秒回复率" alian="center" prop="module" />
|
||||
<el-table-column label="60秒回复率" alian="center" prop="module" />
|
||||
<el-table-column label="3分钟回复率" alian="center" prop="module" />
|
||||
</el-table>
|
||||
<pagination
|
||||
v-show="tableData.total > 0"
|
||||
:total="tableData.total"
|
||||
v-model:page="tableData.param.pageNum"
|
||||
v-model:limit="tableData.param.pageSize"
|
||||
@pagination="dataList"
|
||||
/>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
@@ -73,288 +75,282 @@ import { log } from 'console';
|
||||
|
||||
// 定义接口来定义对象的类型
|
||||
interface TableDataRow {
|
||||
infoId: number;
|
||||
loginName: string;
|
||||
ipaddr: string;
|
||||
loginLocation: string;
|
||||
browser: string;
|
||||
os: string;
|
||||
status: number;
|
||||
msg: string;
|
||||
loginTime: string;
|
||||
module: string;
|
||||
infoId: number;
|
||||
loginName: string;
|
||||
ipaddr: string;
|
||||
loginLocation: string;
|
||||
browser: string;
|
||||
os: string;
|
||||
status: number;
|
||||
msg: string;
|
||||
loginTime: string;
|
||||
module: string;
|
||||
}
|
||||
interface TableDataState {
|
||||
ids: number[];
|
||||
tableData: {
|
||||
data: Array<TableDataRow>;
|
||||
total: number;
|
||||
loading: boolean;
|
||||
param: {
|
||||
pageNum: number;
|
||||
pageSize: number;
|
||||
dateRange: string[];
|
||||
status: string;
|
||||
ipaddr: string;
|
||||
loginLocation: any;
|
||||
userName: string;
|
||||
};
|
||||
};
|
||||
ids: number[];
|
||||
tableData: {
|
||||
data: Array<TableDataRow>;
|
||||
total: number;
|
||||
loading: boolean;
|
||||
param: {
|
||||
pageNum: number;
|
||||
pageSize: number;
|
||||
dateRange: string[];
|
||||
status: string;
|
||||
ipaddr: string;
|
||||
loginLocation: any;
|
||||
userName: string;
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'apiV1SystemLoginLogList',
|
||||
setup() {
|
||||
name: 'apiV1SystemLoginLogList',
|
||||
setup() {
|
||||
//模拟数据
|
||||
const dateList = ref([
|
||||
{
|
||||
infoId: 434569527,
|
||||
loginName: 'demo',
|
||||
ipaddr: '0',
|
||||
loginLocation: '0',
|
||||
browser: '0',
|
||||
os: '0',
|
||||
status: 0,
|
||||
msg: '0',
|
||||
loginTime: '2025-11-22',
|
||||
module: '0',
|
||||
platform: '抖音',
|
||||
},
|
||||
{
|
||||
infoId: 424569527,
|
||||
loginName: 'demo',
|
||||
ipaddr: '0',
|
||||
loginLocation: '0',
|
||||
browser: '0',
|
||||
os: '0',
|
||||
status: 0,
|
||||
msg: '0',
|
||||
loginTime: '2025-11-22',
|
||||
module: '0',
|
||||
platform: '小红书',
|
||||
},
|
||||
{
|
||||
infoId: 414569527,
|
||||
loginName: 'demo',
|
||||
ipaddr: '0',
|
||||
loginLocation: '0',
|
||||
browser: '0',
|
||||
os: '0',
|
||||
status: 0,
|
||||
msg: '0',
|
||||
loginTime: '2025-11-22',
|
||||
module: '0',
|
||||
platform: '快手',
|
||||
},
|
||||
{
|
||||
infoId: 404569527,
|
||||
loginName: 'demo',
|
||||
ipaddr: '0',
|
||||
loginLocation: '0',
|
||||
browser: '0',
|
||||
os: '0',
|
||||
status: 0,
|
||||
msg: '0',
|
||||
loginTime: '2025-11-22',
|
||||
module: '0',
|
||||
platform: '小红书',
|
||||
},
|
||||
{
|
||||
infoId: 394569527,
|
||||
loginName: 'demo',
|
||||
ipaddr: '0',
|
||||
loginLocation: '0',
|
||||
browser: '0',
|
||||
os: '0',
|
||||
status: 0,
|
||||
msg: '0',
|
||||
loginTime: '2025-11-22',
|
||||
module: '0',
|
||||
platform: '小红书',
|
||||
},
|
||||
{
|
||||
infoId: 384569527,
|
||||
loginName: 'demo',
|
||||
ipaddr: '0',
|
||||
loginLocation: '0',
|
||||
browser: '0',
|
||||
os: '0',
|
||||
status: 0,
|
||||
msg: '0',
|
||||
loginTime: '2025-11-22',
|
||||
module: '0',
|
||||
platform: '快手',
|
||||
},
|
||||
{
|
||||
infoId: 374569527,
|
||||
loginName: 'demo',
|
||||
ipaddr: '0',
|
||||
loginLocation: '0',
|
||||
browser: '0',
|
||||
os: '0',
|
||||
status: 0,
|
||||
msg: '0',
|
||||
loginTime: '2025-11-22',
|
||||
module: '0',
|
||||
platform: '小红书',
|
||||
},
|
||||
{
|
||||
infoId: 364569527,
|
||||
loginName: 'demo',
|
||||
ipaddr: '0',
|
||||
loginLocation: '0',
|
||||
browser: '0',
|
||||
os: '0',
|
||||
status: 0,
|
||||
msg: '0',
|
||||
loginTime: '2025-11-22',
|
||||
module: '0',
|
||||
platform: '抖音',
|
||||
},
|
||||
{
|
||||
infoId: 354569527,
|
||||
loginName: 'demo',
|
||||
ipaddr: '0',
|
||||
loginLocation: '0',
|
||||
browser: '0',
|
||||
os: '0',
|
||||
status: 0,
|
||||
msg: '0',
|
||||
loginTime: '2025-11-22',
|
||||
module: '0',
|
||||
platform: '小红书',
|
||||
},
|
||||
{
|
||||
infoId: 344569527,
|
||||
loginName: 'demo',
|
||||
ipaddr: '0',
|
||||
loginLocation: '0',
|
||||
browser: '0',
|
||||
os: '0',
|
||||
status: 0,
|
||||
msg: '0',
|
||||
loginTime: '2025-11-22',
|
||||
module: '0',
|
||||
platform: '小红书',
|
||||
},
|
||||
]);
|
||||
|
||||
//模拟数据
|
||||
const dateList = ref([
|
||||
{
|
||||
"infoId": 434569527,
|
||||
"loginName": "demo",
|
||||
"ipaddr": "0",
|
||||
"loginLocation": "0",
|
||||
"browser": "0",
|
||||
"os": "0",
|
||||
"status": 0,
|
||||
"msg": "0",
|
||||
"loginTime": "2025-11-22",
|
||||
"module": "0",
|
||||
"platform": '抖音'
|
||||
},
|
||||
{
|
||||
"infoId": 424569527,
|
||||
"loginName": "demo",
|
||||
"ipaddr": "0",
|
||||
"loginLocation": "0",
|
||||
"browser": "0",
|
||||
"os": "0",
|
||||
"status": 0,
|
||||
"msg": "0",
|
||||
"loginTime": "2025-11-22",
|
||||
"module": "0",
|
||||
"platform": '小红书'
|
||||
},
|
||||
{
|
||||
"infoId": 414569527,
|
||||
"loginName": "demo",
|
||||
"ipaddr": "0",
|
||||
"loginLocation": "0",
|
||||
"browser": "0",
|
||||
"os": "0",
|
||||
"status": 0,
|
||||
"msg": "0",
|
||||
"loginTime": "2025-11-22",
|
||||
"module": "0",
|
||||
"platform": '快手'
|
||||
},
|
||||
{
|
||||
"infoId": 404569527,
|
||||
"loginName": "demo",
|
||||
"ipaddr": "0",
|
||||
"loginLocation": "0",
|
||||
"browser": "0",
|
||||
"os": "0",
|
||||
"status": 0,
|
||||
"msg": "0",
|
||||
"loginTime": "2025-11-22",
|
||||
"module": "0",
|
||||
"platform": '小红书'
|
||||
},
|
||||
{
|
||||
"infoId": 394569527,
|
||||
"loginName": "demo",
|
||||
"ipaddr": "0",
|
||||
"loginLocation": "0",
|
||||
"browser": "0",
|
||||
"os": "0",
|
||||
"status": 0,
|
||||
"msg": "0",
|
||||
"loginTime": "2025-11-22",
|
||||
"module": "0",
|
||||
"platform": '小红书'
|
||||
},
|
||||
{
|
||||
"infoId": 384569527,
|
||||
"loginName": "demo",
|
||||
"ipaddr": "0",
|
||||
"loginLocation": "0",
|
||||
"browser": "0",
|
||||
"os": "0",
|
||||
"status": 0,
|
||||
"msg": "0",
|
||||
"loginTime": "2025-11-22",
|
||||
"module": "0",
|
||||
"platform": '快手'
|
||||
},
|
||||
{
|
||||
"infoId": 374569527,
|
||||
"loginName": "demo",
|
||||
"ipaddr": "0",
|
||||
"loginLocation": "0",
|
||||
"browser": "0",
|
||||
"os": "0",
|
||||
"status": 0,
|
||||
"msg": "0",
|
||||
"loginTime": "2025-11-22",
|
||||
"module": "0",
|
||||
"platform": '小红书'
|
||||
},
|
||||
{
|
||||
"infoId": 364569527,
|
||||
"loginName": "demo",
|
||||
"ipaddr": "0",
|
||||
"loginLocation": "0",
|
||||
"browser": "0",
|
||||
"os": "0",
|
||||
"status": 0,
|
||||
"msg": "0",
|
||||
"loginTime": "2025-11-22",
|
||||
"module": "0",
|
||||
"platform": '抖音'
|
||||
},
|
||||
{
|
||||
"infoId": 354569527,
|
||||
"loginName": "demo",
|
||||
"ipaddr": "0",
|
||||
"loginLocation": "0",
|
||||
"browser": "0",
|
||||
"os": "0",
|
||||
"status": 0,
|
||||
"msg": "0",
|
||||
"loginTime": "2025-11-22",
|
||||
"module": "0",
|
||||
"platform": '小红书'
|
||||
},
|
||||
{
|
||||
"infoId": 344569527,
|
||||
"loginName": "demo",
|
||||
"ipaddr": "0",
|
||||
"loginLocation": "0",
|
||||
"browser": "0",
|
||||
"os": "0",
|
||||
"status": 0,
|
||||
"msg": "0",
|
||||
"loginTime": "2025-11-22",
|
||||
"module": "0",
|
||||
"platform": '小红书'
|
||||
}
|
||||
])
|
||||
const { proxy } = getCurrentInstance() as any;
|
||||
const queryRef = ref();
|
||||
const { admin_login_status } = proxy.useDict('admin_login_status');
|
||||
const state = reactive<TableDataState>({
|
||||
ids: [],
|
||||
tableData: {
|
||||
data: [],
|
||||
total: 0,
|
||||
loading: false,
|
||||
param: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
dateRange: [],
|
||||
status: '',
|
||||
ipaddr: '',
|
||||
loginLocation: '',
|
||||
userName: '',
|
||||
},
|
||||
},
|
||||
});
|
||||
// 初始化表格数据
|
||||
const initTableData = () => {
|
||||
dataList();
|
||||
};
|
||||
|
||||
const dataList = () => {
|
||||
// logList(state.tableData.param).then((res: any) => {
|
||||
// state.tableData.data = res.data.list;
|
||||
// console.log(state.tableData.data, '11111');
|
||||
// state.tableData.total = res.data.total;
|
||||
|
||||
// });
|
||||
|
||||
const { proxy } = getCurrentInstance() as any;
|
||||
const queryRef = ref();
|
||||
const { admin_login_status } = proxy.useDict('admin_login_status')
|
||||
const state = reactive<TableDataState>({
|
||||
ids: [],
|
||||
tableData: {
|
||||
data: [],
|
||||
total: 0,
|
||||
loading: false,
|
||||
param: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
dateRange: [],
|
||||
status: '',
|
||||
ipaddr: '',
|
||||
loginLocation: '',
|
||||
userName: ''
|
||||
},
|
||||
},
|
||||
});
|
||||
// 初始化表格数据
|
||||
const initTableData = () => {
|
||||
dataList()
|
||||
};
|
||||
|
||||
|
||||
|
||||
const dataList = () => {
|
||||
// logList(state.tableData.param).then((res: any) => {
|
||||
// state.tableData.data = res.data.list;
|
||||
// console.log(state.tableData.data, '11111');
|
||||
// state.tableData.total = res.data.total;
|
||||
|
||||
// });
|
||||
|
||||
state.tableData.data = dateList.value;
|
||||
console.log(state.tableData.data, '11111');
|
||||
state.tableData.total = dateList.value.length;
|
||||
|
||||
};
|
||||
// 删除日志
|
||||
const onRowDel = (row: TableDataRow) => {
|
||||
let msg = '你确定要删除所选数据？';
|
||||
let ids: number[] = [];
|
||||
if (row) {
|
||||
msg = `此操作将永久删除：“${row.loginName}”，是否继续?`
|
||||
ids = [row.infoId]
|
||||
4569527
|
||||
} else {
|
||||
ids = state.ids
|
||||
}
|
||||
if (ids.length === 0) {
|
||||
ElMessage.error('请选择要删除的数据。');
|
||||
return
|
||||
}
|
||||
ElMessageBox.confirm(msg, '提示', {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => {
|
||||
deleteLog(ids).then(() => {
|
||||
ElMessage.success('删除成功');
|
||||
dataList();
|
||||
})
|
||||
})
|
||||
.catch(() => { });
|
||||
};
|
||||
// 清空日志
|
||||
const onRowClear = () => {
|
||||
ElMessageBox.confirm('你确定要删除所选数据？', '提示', {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => {
|
||||
clearLog().then(() => {
|
||||
ElMessage.success('清除成功');
|
||||
dataList();
|
||||
})
|
||||
})
|
||||
.catch(() => { });
|
||||
};
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
initTableData();
|
||||
});
|
||||
/** 重置按钮操作 */
|
||||
const resetQuery = (formEl: FormInstance | undefined) => {
|
||||
if (!formEl) return
|
||||
formEl.resetFields()
|
||||
dataList()
|
||||
};
|
||||
// 多选框选中数据
|
||||
const handleSelectionChange = (selection: TableDataRow[]) => {
|
||||
state.ids = selection.map(item => item.infoId)
|
||||
4569527
|
||||
};
|
||||
// 登录状态字典翻译
|
||||
const statusFormat = (row: TableDataRow) => {
|
||||
return proxy.selectDictLabel(unref(admin_login_status), row.status);
|
||||
};
|
||||
return {
|
||||
queryRef,
|
||||
onRowDel,
|
||||
dataList,
|
||||
resetQuery,
|
||||
handleSelectionChange,
|
||||
statusFormat,
|
||||
onRowClear,
|
||||
admin_login_status,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
state.tableData.data = dateList.value;
|
||||
console.log(state.tableData.data, '11111');
|
||||
state.tableData.total = dateList.value.length;
|
||||
};
|
||||
// 删除日志
|
||||
const onRowDel = (row: TableDataRow) => {
|
||||
let msg = '你确定要删除所选数据？';
|
||||
let ids: number[] = [];
|
||||
if (row) {
|
||||
msg = `此操作将永久删除：“${row.loginName}”，是否继续?`;
|
||||
ids = [row.infoId];
|
||||
4569527;
|
||||
} else {
|
||||
ids = state.ids;
|
||||
}
|
||||
if (ids.length === 0) {
|
||||
ElMessage.error('请选择要删除的数据。');
|
||||
return;
|
||||
}
|
||||
ElMessageBox.confirm(msg, '提示', {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => {
|
||||
deleteLog(ids).then(() => {
|
||||
ElMessage.success('删除成功');
|
||||
dataList();
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
// 清空日志
|
||||
const onRowClear = () => {
|
||||
ElMessageBox.confirm('你确定要删除所选数据？', '提示', {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => {
|
||||
clearLog().then(() => {
|
||||
ElMessage.success('清除成功');
|
||||
dataList();
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
initTableData();
|
||||
});
|
||||
/** 重置按钮操作 */
|
||||
const resetQuery = (formEl: FormInstance | undefined) => {
|
||||
if (!formEl) return;
|
||||
formEl.resetFields();
|
||||
dataList();
|
||||
};
|
||||
// 多选框选中数据
|
||||
const handleSelectionChange = (selection: TableDataRow[]) => {
|
||||
state.ids = selection.map((item) => item.infoId);
|
||||
4569527;
|
||||
};
|
||||
// 登录状态字典翻译
|
||||
const statusFormat = (row: TableDataRow) => {
|
||||
return proxy.selectDictLabel(unref(admin_login_status), row.status);
|
||||
};
|
||||
return {
|
||||
queryRef,
|
||||
onRowDel,
|
||||
dataList,
|
||||
resetQuery,
|
||||
handleSelectionChange,
|
||||
statusFormat,
|
||||
onRowClear,
|
||||
admin_login_status,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -1,32 +1,32 @@
|
||||
<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-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 placeholder="小红书" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
||||
<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-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 placeholder="小红书" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
||||
<el-form-item label="排序">
|
||||
<el-input-number v-model="formData.listOrder" :min="0" controls-position="right" placeholder="请输入排序"
|
||||
class="w100" />
|
||||
</el-form-item>
|
||||
</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="客服状态">
|
||||
<el-switch v-model="formData.status" :active-value="1" :inactive-value="0" inline-prompt active-text="启"
|
||||
inactive-text="禁"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col> -->
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
||||
<el-form-item label="话术描述">
|
||||
<el-input type="textarea" placeholder="请输入话术" maxlength="150"></el-input>
|
||||
</el-form-item>
|
||||
</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">
|
||||
<Editor height="400px" placeholder="请输入产品详细描述..." />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
||||
<el-form-item label="菜单权限">
|
||||
<el-row :gutter="35">
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
||||
@@ -42,223 +42,227 @@
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col> -->
|
||||
</el-row>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="onCancel" size="default">取 消</el-button>
|
||||
<el-button type="primary" @click="onSubmit" size="default" :loading="loading">{{ formData.id === 0 ? '新 增' :
|
||||
'修改' }}</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
</div>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="onCancel" size="default">取 消</el-button>
|
||||
<el-button type="primary" @click="onSubmit" size="default" :loading="loading">{{ formData.id === 0 ? '新 增' : '修改' }}</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { reactive, toRefs, defineComponent, ref, getCurrentInstance, unref } from 'vue';
|
||||
import { addRole, editRole, getRole, getRoleParams } from "/@/api/system/role";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { refreshBackEndControlRoutes } from "/@/router/backEnd";
|
||||
|
||||
import { addRole, editRole, getRole, getRoleParams } from '/@/api/system/role';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import { refreshBackEndControlRoutes } from '/@/router/backEnd';
|
||||
// 引入富文本编辑器组件
|
||||
import Editor from '/@/components/editor/index.vue';
|
||||
|
||||
// 定义接口来定义对象的类型
|
||||
interface MenuDataTree {
|
||||
id: number;
|
||||
pid: number;
|
||||
title: string;
|
||||
children?: MenuDataTree[];
|
||||
id: number;
|
||||
pid: number;
|
||||
title: string;
|
||||
children?: MenuDataTree[];
|
||||
}
|
||||
interface DialogRow {
|
||||
id: number;
|
||||
name: string;
|
||||
status: number;
|
||||
listOrder: number;
|
||||
remark: string;
|
||||
menuIds: Array<number>
|
||||
id: number;
|
||||
name: string;
|
||||
status: number;
|
||||
listOrder: number;
|
||||
remark: string;
|
||||
menuIds: Array<number>;
|
||||
}
|
||||
interface RoleState {
|
||||
loading: boolean;
|
||||
isShowDialog: boolean;
|
||||
formData: DialogRow;
|
||||
menuData: Array<MenuDataTree>;
|
||||
menuExpand: boolean;
|
||||
menuNodeAll: boolean;
|
||||
menuCheckStrictly: boolean;
|
||||
menuProps: {
|
||||
children: string;
|
||||
label: string;
|
||||
};
|
||||
rules: object;
|
||||
loading: boolean;
|
||||
isShowDialog: boolean;
|
||||
formData: DialogRow;
|
||||
menuData: Array<MenuDataTree>;
|
||||
menuExpand: boolean;
|
||||
menuNodeAll: boolean;
|
||||
menuCheckStrictly: boolean;
|
||||
menuProps: {
|
||||
children: string;
|
||||
label: string;
|
||||
};
|
||||
rules: object;
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'systemEditRole',
|
||||
setup(props, { emit }) {
|
||||
const { proxy } = getCurrentInstance() as any;
|
||||
const formRef = ref<HTMLElement | null>(null);
|
||||
const menuRef = ref();
|
||||
const state = reactive<RoleState>({
|
||||
loading: false,
|
||||
isShowDialog: false,
|
||||
formData: {
|
||||
id: 0,
|
||||
name: '',
|
||||
status: 1,
|
||||
listOrder: 0,
|
||||
remark: '',
|
||||
menuIds: []
|
||||
},
|
||||
// 表单校验
|
||||
rules: {
|
||||
name: [
|
||||
{ required: true, message: "角色名称不能为空", trigger: "blur" },
|
||||
]
|
||||
},
|
||||
menuData: [],
|
||||
menuExpand: false,
|
||||
menuNodeAll: false,
|
||||
menuCheckStrictly: false,
|
||||
menuProps: {
|
||||
children: 'children',
|
||||
label: 'title',
|
||||
},
|
||||
});
|
||||
// 打开弹窗
|
||||
const openDialog = (row?: DialogRow) => {
|
||||
resetForm();
|
||||
getMenuData();
|
||||
if (row) {
|
||||
getRole(row.id).then((res: any) => {
|
||||
if (res.data.role) {
|
||||
state.formData = res.data.role;
|
||||
state.formData.menuIds = res.data.menuIds ?? []
|
||||
}
|
||||
})
|
||||
}
|
||||
state.isShowDialog = true;
|
||||
};
|
||||
// 关闭弹窗
|
||||
const closeDialog = () => {
|
||||
state.isShowDialog = false;
|
||||
};
|
||||
// 取消
|
||||
const onCancel = () => {
|
||||
closeDialog();
|
||||
};
|
||||
// 新增
|
||||
const onSubmit = () => {
|
||||
const formWrap = unref(formRef) as any;
|
||||
if (!formWrap) return;
|
||||
formWrap.validate((valid: boolean) => {
|
||||
if (valid) {
|
||||
state.loading = true;
|
||||
state.formData.menuIds = getMenuAllCheckedKeys();
|
||||
if (state.formData.id === 0) {
|
||||
//添加
|
||||
addRole(state.formData).then(() => {
|
||||
ElMessage.success('角色添加成功');
|
||||
closeDialog(); // 关闭弹窗
|
||||
resetMenuSession()
|
||||
emit('getRoleList')
|
||||
}).finally(() => {
|
||||
state.loading = false;
|
||||
})
|
||||
} else {
|
||||
//修改
|
||||
editRole(state.formData).then(() => {
|
||||
ElMessage.success('角色修改成功');
|
||||
closeDialog(); // 关闭弹窗
|
||||
resetMenuSession()
|
||||
emit('getRoleList')
|
||||
}).finally(() => {
|
||||
state.loading = false;
|
||||
})
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
// 获取菜单结构数据
|
||||
const getMenuData = () => {
|
||||
getRoleParams().then((res: any) => {
|
||||
state.menuData = proxy.handleTree(res.data.menu, "id", "pid");
|
||||
})
|
||||
};
|
||||
const resetForm = () => {
|
||||
state.menuCheckStrictly = false;
|
||||
state.menuExpand = false;
|
||||
state.menuNodeAll = false;
|
||||
state.formData = {
|
||||
id: 0,
|
||||
name: '',
|
||||
status: 1,
|
||||
listOrder: 0,
|
||||
remark: '',
|
||||
menuIds: []
|
||||
}
|
||||
};
|
||||
/** 树权限（展开/折叠）*/
|
||||
const handleCheckedTreeExpand = (value: any) => {
|
||||
let treeList = state.menuData;
|
||||
for (let i = 0; i < treeList.length; i++) {
|
||||
menuRef.value.store.nodesMap[treeList[i].id].expanded = value;
|
||||
}
|
||||
}
|
||||
name: 'systemEditRole',
|
||||
components: {
|
||||
Editor, // 注册富文本组件
|
||||
},
|
||||
setup(props, { emit }) {
|
||||
const { proxy } = getCurrentInstance() as any;
|
||||
const formRef = ref<HTMLElement | null>(null);
|
||||
const menuRef = ref();
|
||||
const state = reactive<RoleState>({
|
||||
loading: false,
|
||||
isShowDialog: false,
|
||||
formData: {
|
||||
id: 0,
|
||||
name: '',
|
||||
status: 1,
|
||||
listOrder: 0,
|
||||
remark: '',
|
||||
menuIds: [],
|
||||
},
|
||||
// 表单校验
|
||||
rules: {
|
||||
name: [{ required: true, message: '角色名称不能为空', trigger: 'blur' }],
|
||||
},
|
||||
menuData: [],
|
||||
menuExpand: false,
|
||||
menuNodeAll: false,
|
||||
menuCheckStrictly: false,
|
||||
menuProps: {
|
||||
children: 'children',
|
||||
label: 'title',
|
||||
},
|
||||
});
|
||||
// 打开弹窗
|
||||
const openDialog = (row?: DialogRow) => {
|
||||
resetForm();
|
||||
getMenuData();
|
||||
if (row) {
|
||||
getRole(row.id).then((res: any) => {
|
||||
if (res.data.role) {
|
||||
state.formData = res.data.role;
|
||||
state.formData.menuIds = res.data.menuIds ?? [];
|
||||
}
|
||||
});
|
||||
}
|
||||
state.isShowDialog = true;
|
||||
};
|
||||
// 关闭弹窗
|
||||
const closeDialog = () => {
|
||||
state.isShowDialog = false;
|
||||
};
|
||||
// 取消
|
||||
const onCancel = () => {
|
||||
closeDialog();
|
||||
};
|
||||
// 新增
|
||||
const onSubmit = () => {
|
||||
const formWrap = unref(formRef) as any;
|
||||
if (!formWrap) return;
|
||||
formWrap.validate((valid: boolean) => {
|
||||
if (valid) {
|
||||
state.loading = true;
|
||||
state.formData.menuIds = getMenuAllCheckedKeys();
|
||||
if (state.formData.id === 0) {
|
||||
//添加
|
||||
addRole(state.formData)
|
||||
.then(() => {
|
||||
ElMessage.success('角色添加成功');
|
||||
closeDialog(); // 关闭弹窗
|
||||
resetMenuSession();
|
||||
emit('getRoleList');
|
||||
})
|
||||
.finally(() => {
|
||||
state.loading = false;
|
||||
});
|
||||
} else {
|
||||
//修改
|
||||
editRole(state.formData)
|
||||
.then(() => {
|
||||
ElMessage.success('角色修改成功');
|
||||
closeDialog(); // 关闭弹窗
|
||||
resetMenuSession();
|
||||
emit('getRoleList');
|
||||
})
|
||||
.finally(() => {
|
||||
state.loading = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
// 获取菜单结构数据
|
||||
const getMenuData = () => {
|
||||
getRoleParams().then((res: any) => {
|
||||
state.menuData = proxy.handleTree(res.data.menu, 'id', 'pid');
|
||||
});
|
||||
};
|
||||
const resetForm = () => {
|
||||
state.menuCheckStrictly = false;
|
||||
state.menuExpand = false;
|
||||
state.menuNodeAll = false;
|
||||
state.formData = {
|
||||
id: 0,
|
||||
name: '',
|
||||
status: 1,
|
||||
listOrder: 0,
|
||||
remark: '',
|
||||
menuIds: [],
|
||||
};
|
||||
};
|
||||
/** 树权限（展开/折叠）*/
|
||||
const handleCheckedTreeExpand = (value: any) => {
|
||||
let treeList = state.menuData;
|
||||
for (let i = 0; i < treeList.length; i++) {
|
||||
menuRef.value.store.nodesMap[treeList[i].id].expanded = value;
|
||||
}
|
||||
};
|
||||
|
||||
/** 树权限（全选/全不选） */
|
||||
const handleCheckedTreeNodeAll = (value: any) => {
|
||||
menuRef.value.setCheckedNodes(value ? state.menuData : []);
|
||||
}
|
||||
/** 树权限（全选/全不选） */
|
||||
const handleCheckedTreeNodeAll = (value: any) => {
|
||||
menuRef.value.setCheckedNodes(value ? state.menuData : []);
|
||||
};
|
||||
|
||||
/** 树权限（父子联动） */
|
||||
const handleCheckedTreeConnect = (value: any) => {
|
||||
state.menuCheckStrictly = value ? true : false;
|
||||
}
|
||||
/** 树权限（父子联动） */
|
||||
const handleCheckedTreeConnect = (value: any) => {
|
||||
state.menuCheckStrictly = value ? true : false;
|
||||
};
|
||||
|
||||
/** 所有菜单节点数据 */
|
||||
function getMenuAllCheckedKeys() {
|
||||
// 目前被选中的菜单节点
|
||||
let checkedKeys = menuRef.value.getCheckedKeys();
|
||||
// 半选中的菜单节点
|
||||
let halfCheckedKeys = menuRef.value.getHalfCheckedKeys();
|
||||
checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
|
||||
return checkedKeys;
|
||||
}
|
||||
/** 所有菜单节点数据 */
|
||||
function getMenuAllCheckedKeys() {
|
||||
// 目前被选中的菜单节点
|
||||
let checkedKeys = menuRef.value.getCheckedKeys();
|
||||
// 半选中的菜单节点
|
||||
let halfCheckedKeys = menuRef.value.getHalfCheckedKeys();
|
||||
checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
|
||||
return checkedKeys;
|
||||
}
|
||||
|
||||
// 重置菜单session
|
||||
const resetMenuSession = () => {
|
||||
refreshBackEndControlRoutes();
|
||||
};
|
||||
return {
|
||||
openDialog,
|
||||
closeDialog,
|
||||
onCancel,
|
||||
onSubmit,
|
||||
menuRef,
|
||||
formRef,
|
||||
handleCheckedTreeExpand,
|
||||
handleCheckedTreeNodeAll,
|
||||
handleCheckedTreeConnect,
|
||||
resetMenuSession,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
// 重置菜单session
|
||||
const resetMenuSession = () => {
|
||||
refreshBackEndControlRoutes();
|
||||
};
|
||||
return {
|
||||
openDialog,
|
||||
closeDialog,
|
||||
onCancel,
|
||||
onSubmit,
|
||||
menuRef,
|
||||
formRef,
|
||||
handleCheckedTreeExpand,
|
||||
handleCheckedTreeNodeAll,
|
||||
handleCheckedTreeConnect,
|
||||
resetMenuSession,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.tree-border {
|
||||
margin-top: 5px;
|
||||
border: 1px solid #e5e6e7 !important;
|
||||
border-radius: 4px;
|
||||
margin-top: 5px;
|
||||
border: 1px solid #e5e6e7 !important;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.system-edit-role-container {
|
||||
.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;
|
||||
}
|
||||
.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>
|
||||
|
||||
@@ -1,251 +1,223 @@
|
||||
<template>
|
||||
<div class="system-role-container">
|
||||
<el-card shadow="hover">
|
||||
<div class="system-user-search mb15">
|
||||
<el-form :inline="true">
|
||||
<!-- <el-form-item label="客服平台" prop="status" style="width: 200px;">
|
||||
<el-select placeholder="小红书" clearable size="default" style="width: 240px">
|
||||
<el-option :label="'小红书'" />
|
||||
<el-option :label="'抖音'" />
|
||||
<el-option :label="'快手'" />
|
||||
</el-select>
|
||||
</el-form-item> -->
|
||||
<el-form-item>
|
||||
<!-- <el-button size="default" type="primary" class="ml10" @click="roleList">
|
||||
<el-icon>
|
||||
<ele-Search />
|
||||
</el-icon>
|
||||
筛选
|
||||
</el-button> -->
|
||||
<el-button size="default" type="success" class="ml10" @click="onOpenAddRole">
|
||||
<el-icon>
|
||||
<ele-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>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<pagination v-show="tableData.total > 0" :total="tableData.total" v-model:page="tableData.param.pageNum"
|
||||
v-model:limit="tableData.param.pageSize" @pagination="roleList" />
|
||||
</el-card>
|
||||
<EditRole ref="editRoleRef" @getRoleList="roleList" />
|
||||
</div>
|
||||
<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>
|
||||
</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
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<pagination
|
||||
v-show="tableData.total > 0"
|
||||
:total="tableData.total"
|
||||
v-model:page="tableData.param.pageNum"
|
||||
v-model:limit="tableData.param.pageSize"
|
||||
@pagination="roleList"
|
||||
/>
|
||||
</el-card>
|
||||
<EditRole ref="editRoleRef" @getRoleList="roleList" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
<script lang="ts" setup>
|
||||
import { toRefs, reactive, onMounted, ref, defineComponent, toRaw, getCurrentInstance } from 'vue';
|
||||
import { ElMessageBox, ElMessage } from 'element-plus';
|
||||
import EditRole from '/@/views/customerService/script/component/editRole.vue';
|
||||
import { deleteRole, getRoleList } from "/@/api/system/role";
|
||||
import { deleteRole, getRoleList } from '/@/api/system/role';
|
||||
// 定义接口来定义对象的类型
|
||||
interface TableData {
|
||||
id: number;
|
||||
status: number;
|
||||
listOrder: number;
|
||||
name: string;
|
||||
remark: string;
|
||||
dataScope: number;
|
||||
createdAt: string;
|
||||
id: number;
|
||||
status: number;
|
||||
listOrder: number;
|
||||
name: string;
|
||||
remark: string;
|
||||
dataScope: number;
|
||||
createdAt: string;
|
||||
}
|
||||
interface TableDataState {
|
||||
tableData: {
|
||||
data: Array<TableData>;
|
||||
total: number;
|
||||
loading: boolean;
|
||||
param: {
|
||||
roleName: string;
|
||||
roleStatus: string;
|
||||
pageNum: number;
|
||||
pageSize: number;
|
||||
};
|
||||
};
|
||||
data: Array<TableData>;
|
||||
total: number;
|
||||
loading: boolean;
|
||||
param: {
|
||||
roleName: string;
|
||||
roleStatus: string;
|
||||
pageNum: number;
|
||||
pageSize: number;
|
||||
};
|
||||
}
|
||||
|
||||
//模拟数据
|
||||
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": '张三'
|
||||
}
|
||||
])
|
||||
{
|
||||
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: '张三',
|
||||
},
|
||||
]);
|
||||
|
||||
export default defineComponent({
|
||||
name: 'apiV1SystemRoleList',
|
||||
components: { EditRole },
|
||||
setup() {
|
||||
const { proxy } = getCurrentInstance() as any;
|
||||
const addRoleRef = ref();
|
||||
const editRoleRef = ref();
|
||||
const dataScopeRef = ref();
|
||||
const state = reactive<TableDataState>({
|
||||
tableData: {
|
||||
data: [],
|
||||
total: 0,
|
||||
loading: false,
|
||||
param: {
|
||||
roleName: '',
|
||||
roleStatus: '',
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
},
|
||||
});
|
||||
// 初始化表格数据
|
||||
const initTableData = () => {
|
||||
roleList()
|
||||
};
|
||||
const roleList = () => {
|
||||
const data: Array<TableData> = [];
|
||||
getRoleList(state.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,
|
||||
});
|
||||
})
|
||||
state.tableData.data = dateList.value;
|
||||
state.tableData.total = dateList.value.length;
|
||||
})
|
||||
};
|
||||
// 打开新增角色弹窗
|
||||
const onOpenAddRole = () => {
|
||||
editRoleRef.value.openDialog();
|
||||
};
|
||||
// 打开修改角色弹窗
|
||||
const onOpenEditRole = (row: Object) => {
|
||||
editRoleRef.value.openDialog(toRaw(row));
|
||||
};
|
||||
const { proxy } = getCurrentInstance() as any;
|
||||
const addRoleRef = ref();
|
||||
const editRoleRef = ref();
|
||||
const dataScopeRef = ref();
|
||||
const tableData = reactive<TableDataState>({
|
||||
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 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 onHandleSizeChange = (val: number) => {
|
||||
state.tableData.param.pageSize = val;
|
||||
};
|
||||
// 分页改变
|
||||
const onHandleCurrentChange = (val: number) => {
|
||||
state.tableData.param.pageNum = val;
|
||||
};
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
initTableData();
|
||||
});
|
||||
return {
|
||||
addRoleRef,
|
||||
editRoleRef,
|
||||
dataScopeRef,
|
||||
onOpenAddRole,
|
||||
onOpenEditRole,
|
||||
onRowDel,
|
||||
onHandleSizeChange,
|
||||
onHandleCurrentChange,
|
||||
roleList,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
// 删除角色
|
||||
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 onHandleSizeChange = (val: number) => {
|
||||
tableData.param.pageSize = val;
|
||||
};
|
||||
// 分页改变
|
||||
const onHandleCurrentChange = (val: number) => {
|
||||
tableData.param.pageNum = val;
|
||||
};
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
initTableData();
|
||||
});
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user