commit
d468e8b031
@ -0,0 +1,36 @@
|
|||||||
|
import request from '@/utils/request.js';
|
||||||
|
export const search = (params) => {
|
||||||
|
return request({
|
||||||
|
url: '/mall/im/admin/waiterUser',
|
||||||
|
method: 'get',
|
||||||
|
params,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
export const detail = (userId) => {
|
||||||
|
return request({
|
||||||
|
url: '/mall/im/admin/waiterUser/getWaiterByUserId',
|
||||||
|
method: 'get',
|
||||||
|
params: { userId },
|
||||||
|
});
|
||||||
|
};
|
||||||
|
export const create = (data) => {
|
||||||
|
return request({
|
||||||
|
url: '/mall/im/admin/waiterUser',
|
||||||
|
method: 'post',
|
||||||
|
data,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
export const update = (data) => {
|
||||||
|
return request({
|
||||||
|
url: '/mall/im/admin/waiterUser',
|
||||||
|
method: 'put',
|
||||||
|
data,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
export const remove = (ids) => {
|
||||||
|
return request({
|
||||||
|
url: '/mall/im/admin/waiterUser',
|
||||||
|
method: 'delete',
|
||||||
|
data: { ids },
|
||||||
|
});
|
||||||
|
};
|
@ -0,0 +1,106 @@
|
|||||||
|
import request from '@/utils/request.js';
|
||||||
|
export const online = (params) => {
|
||||||
|
return request({
|
||||||
|
url: '/im/admin/count/online',
|
||||||
|
method: 'get',
|
||||||
|
params,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
export const hours = (params) => {
|
||||||
|
return request({
|
||||||
|
url: '/im/admin/count/hoursMessage',
|
||||||
|
method: 'get',
|
||||||
|
params,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
export const days = (params) => {
|
||||||
|
return request({
|
||||||
|
url: '/im/admin/count/daysMessage',
|
||||||
|
method: 'get',
|
||||||
|
params,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
export const searchSystem = (params) => {
|
||||||
|
return request({
|
||||||
|
url: '/im/admin/thirdSystem',
|
||||||
|
method: 'get',
|
||||||
|
params,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
export const createSystem = (data) => {
|
||||||
|
return request({
|
||||||
|
url: '/im/admin/thirdSystem',
|
||||||
|
method: 'post',
|
||||||
|
data,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
export const updateSystem = (data) => {
|
||||||
|
return request({
|
||||||
|
url: '/im/admin/thirdSystem',
|
||||||
|
method: 'put',
|
||||||
|
data,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
export const removeSystem = (data) => {
|
||||||
|
return request({
|
||||||
|
url: '/im/admin/thirdSystem',
|
||||||
|
method: 'delete',
|
||||||
|
data,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
export const searchStore = (params) => {
|
||||||
|
return request({
|
||||||
|
url: '/im/admin/storeConfig',
|
||||||
|
method: 'get',
|
||||||
|
params,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
export const createStore = (data) => {
|
||||||
|
return request({
|
||||||
|
url: '/im/admin/storeConfig',
|
||||||
|
method: 'post',
|
||||||
|
data,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
export const updateStore = (data) => {
|
||||||
|
return request({
|
||||||
|
url: '/im/admin/storeConfig',
|
||||||
|
method: 'put',
|
||||||
|
data,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
export const removeStore = (data) => {
|
||||||
|
return request({
|
||||||
|
url: '/im/admin/storeConfig',
|
||||||
|
method: 'delete',
|
||||||
|
data,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
export const searchWaiter = (params) => {
|
||||||
|
return request({
|
||||||
|
url: '/im/admin/waiter',
|
||||||
|
method: 'get',
|
||||||
|
params,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
export const createWaiter = (data) => {
|
||||||
|
return request({
|
||||||
|
url: '/im/admin/waiter',
|
||||||
|
method: 'post',
|
||||||
|
data,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
export const updateWaiter = (data) => {
|
||||||
|
return request({
|
||||||
|
url: '/im/admin/waiter',
|
||||||
|
method: 'put',
|
||||||
|
data,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
export const removeWaiter = (data) => {
|
||||||
|
return request({
|
||||||
|
url: '/im/admin/waiter',
|
||||||
|
method: 'delete',
|
||||||
|
data,
|
||||||
|
});
|
||||||
|
};
|
@ -0,0 +1,45 @@
|
|||||||
|
import * as api from '@/api/im/index.js';
|
||||||
|
import { ElMessage } from '@/plugins/element-plus';
|
||||||
|
const state = () => ({
|
||||||
|
online: 0,
|
||||||
|
single: [],
|
||||||
|
range: [],
|
||||||
|
});
|
||||||
|
const getters = {};
|
||||||
|
const mutations = {
|
||||||
|
setOnline: (state, data) => (state.online = data),
|
||||||
|
setSingle: (state, data) => (state.single = data),
|
||||||
|
setRange: (state, data) => (state.range = data),
|
||||||
|
};
|
||||||
|
const actions = {
|
||||||
|
loadOnline: async ({ commit }, data) => {
|
||||||
|
let res = await api.online(data);
|
||||||
|
commit('setOnline', res || 0);
|
||||||
|
if (!res && res !== 0) {
|
||||||
|
ElMessage.error('查询失败');
|
||||||
|
}
|
||||||
|
return res;
|
||||||
|
},
|
||||||
|
loadSingle: async ({ commit }, data) => {
|
||||||
|
let res = await api.hours(data);
|
||||||
|
commit('setSingle', res || []);
|
||||||
|
if (!res) {
|
||||||
|
ElMessage.error('查询失败');
|
||||||
|
}
|
||||||
|
return res;
|
||||||
|
},
|
||||||
|
loadRange: async ({ commit }, data) => {
|
||||||
|
let res = await api.days(data);
|
||||||
|
commit('setRange', res || []);
|
||||||
|
if (!res) {
|
||||||
|
ElMessage.error('查询失败');
|
||||||
|
}
|
||||||
|
return res;
|
||||||
|
},
|
||||||
|
};
|
||||||
|
export default {
|
||||||
|
state,
|
||||||
|
getters,
|
||||||
|
mutations,
|
||||||
|
actions,
|
||||||
|
};
|
@ -0,0 +1,78 @@
|
|||||||
|
import * as api from '@/api/im/index.js';
|
||||||
|
import { ElMessage, ElMessageBox } from '@/plugins/element-plus';
|
||||||
|
const state = () => ({
|
||||||
|
code: 'ImStore',
|
||||||
|
condition: {},
|
||||||
|
list: [],
|
||||||
|
total: 0,
|
||||||
|
opts: {
|
||||||
|
init: false,
|
||||||
|
system: [],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const getters = {};
|
||||||
|
const mutations = {
|
||||||
|
setCode: (state, data) => (state.code = data),
|
||||||
|
setCondition: (state, data) => (state.condition = data),
|
||||||
|
setList: (state, data) => (state.list = data),
|
||||||
|
setTotal: (state, data) => (state.total = data),
|
||||||
|
setOpts: (state, data) => (state.opts = data),
|
||||||
|
};
|
||||||
|
const actions = {
|
||||||
|
search: async ({ state, commit, rootGetters }) => {
|
||||||
|
let data = { ...state.condition };
|
||||||
|
let res = await api.searchStore({ ...rootGetters['local/page'](state.code), ...data });
|
||||||
|
if (res) {
|
||||||
|
commit('setList', res.records);
|
||||||
|
commit('setTotal', res.total);
|
||||||
|
} else {
|
||||||
|
ElMessage.error('查询失败');
|
||||||
|
commit('setList', []);
|
||||||
|
}
|
||||||
|
return res;
|
||||||
|
},
|
||||||
|
load: async ({ commit }) => {
|
||||||
|
commit('setOpts', {
|
||||||
|
init: true,
|
||||||
|
system: (await api.searchSystem({ pageIndex: 1, length: 9999 }))?.records || [],
|
||||||
|
});
|
||||||
|
},
|
||||||
|
save: async ({ dispatch }, data) => {
|
||||||
|
if (data.id) {
|
||||||
|
data.systemId = data.sysId;
|
||||||
|
}
|
||||||
|
let save = data.id ? api.updateStore : api.createStore;
|
||||||
|
let res = await save(data);
|
||||||
|
if (res) {
|
||||||
|
ElMessage.success('保存成功');
|
||||||
|
dispatch('search');
|
||||||
|
} else {
|
||||||
|
ElMessage.error('保存失败');
|
||||||
|
}
|
||||||
|
return res;
|
||||||
|
},
|
||||||
|
remove: async ({ dispatch }, ids) => {
|
||||||
|
if (!ids.length) {
|
||||||
|
ElMessage.warning('请选择要删除的数据');
|
||||||
|
} else {
|
||||||
|
try {
|
||||||
|
await ElMessageBox.confirm('数据删除后无法恢复,确定要删除吗?', '危险操作');
|
||||||
|
let res = await api.removeStore({ ids });
|
||||||
|
if (res) {
|
||||||
|
ElMessage.success('删除成功');
|
||||||
|
dispatch('search');
|
||||||
|
} else {
|
||||||
|
ElMessage.error('删除失败');
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.info('取消删除', e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
};
|
||||||
|
export default {
|
||||||
|
state,
|
||||||
|
getters,
|
||||||
|
mutations,
|
||||||
|
actions,
|
||||||
|
};
|
@ -0,0 +1,73 @@
|
|||||||
|
import * as api from '@/api/im/index.js';
|
||||||
|
import { ElMessage, ElMessageBox } from '@/plugins/element-plus';
|
||||||
|
const state = () => ({
|
||||||
|
code: 'ImSystem',
|
||||||
|
condition: {},
|
||||||
|
list: [],
|
||||||
|
total: 0,
|
||||||
|
opts: {
|
||||||
|
init: false,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const getters = {};
|
||||||
|
const mutations = {
|
||||||
|
setCode: (state, data) => (state.code = data),
|
||||||
|
setCondition: (state, data) => (state.condition = data),
|
||||||
|
setList: (state, data) => (state.list = data),
|
||||||
|
setTotal: (state, data) => (state.total = data),
|
||||||
|
setOpts: (state, data) => (state.opts = data),
|
||||||
|
};
|
||||||
|
const actions = {
|
||||||
|
search: async ({ state, commit, rootGetters }) => {
|
||||||
|
let data = { ...state.condition };
|
||||||
|
let res = await api.searchSystem({ ...rootGetters['local/page'](state.code), ...data });
|
||||||
|
if (res) {
|
||||||
|
commit('setList', res.records);
|
||||||
|
commit('setTotal', res.total);
|
||||||
|
} else {
|
||||||
|
ElMessage.error('查询失败');
|
||||||
|
commit('setList', []);
|
||||||
|
}
|
||||||
|
return res;
|
||||||
|
},
|
||||||
|
load: async ({ commit }) => {
|
||||||
|
commit('setOpts', {
|
||||||
|
init: true,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
save: async ({ dispatch }, data) => {
|
||||||
|
let save = data.id ? api.updateSystem : api.createSystem;
|
||||||
|
let res = await save(data);
|
||||||
|
if (res) {
|
||||||
|
ElMessage.success('保存成功');
|
||||||
|
dispatch('search');
|
||||||
|
} else {
|
||||||
|
ElMessage.error('保存失败');
|
||||||
|
}
|
||||||
|
return res;
|
||||||
|
},
|
||||||
|
remove: async ({ dispatch }, ids) => {
|
||||||
|
if (!ids.length) {
|
||||||
|
ElMessage.warning('请选择要删除的数据');
|
||||||
|
} else {
|
||||||
|
try {
|
||||||
|
await ElMessageBox.confirm('数据删除后无法恢复,确定要删除吗?', '危险操作');
|
||||||
|
let res = await api.removeSystem({ ids });
|
||||||
|
if (res) {
|
||||||
|
ElMessage.success('删除成功');
|
||||||
|
dispatch('search');
|
||||||
|
} else {
|
||||||
|
ElMessage.error('删除失败');
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.info('取消删除', e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
};
|
||||||
|
export default {
|
||||||
|
state,
|
||||||
|
getters,
|
||||||
|
mutations,
|
||||||
|
actions,
|
||||||
|
};
|
@ -0,0 +1,78 @@
|
|||||||
|
import * as api from '@/api/im/index.js';
|
||||||
|
import { ElMessage, ElMessageBox } from '@/plugins/element-plus';
|
||||||
|
const state = () => ({
|
||||||
|
code: 'ImWaiter',
|
||||||
|
condition: {},
|
||||||
|
list: [],
|
||||||
|
total: 0,
|
||||||
|
opts: {
|
||||||
|
init: false,
|
||||||
|
store: [],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const getters = {};
|
||||||
|
const mutations = {
|
||||||
|
setCode: (state, data) => (state.code = data),
|
||||||
|
setCondition: (state, data) => (state.condition = data),
|
||||||
|
setList: (state, data) => (state.list = data),
|
||||||
|
setTotal: (state, data) => (state.total = data),
|
||||||
|
setOpts: (state, data) => (state.opts = data),
|
||||||
|
};
|
||||||
|
const actions = {
|
||||||
|
search: async ({ state, commit, rootGetters }) => {
|
||||||
|
let data = { ...state.condition };
|
||||||
|
let res = await api.searchWaiter({ ...rootGetters['local/page'](state.code), ...data });
|
||||||
|
if (res) {
|
||||||
|
commit('setList', res.records);
|
||||||
|
commit('setTotal', res.total);
|
||||||
|
} else {
|
||||||
|
ElMessage.error('查询失败');
|
||||||
|
commit('setList', []);
|
||||||
|
}
|
||||||
|
return res;
|
||||||
|
},
|
||||||
|
load: async ({ commit }) => {
|
||||||
|
commit('setOpts', {
|
||||||
|
init: true,
|
||||||
|
store: (await api.searchStore({ pageIndex: 1, length: 9999 }))?.records || [],
|
||||||
|
});
|
||||||
|
},
|
||||||
|
save: async ({ state, dispatch }, data) => {
|
||||||
|
if (data.id) {
|
||||||
|
data.systemId = state.condition.systemid;
|
||||||
|
}
|
||||||
|
let save = data.id ? api.updateWaiter : api.createWaiter;
|
||||||
|
let res = await save(data);
|
||||||
|
if (res) {
|
||||||
|
ElMessage.success('保存成功');
|
||||||
|
dispatch('search');
|
||||||
|
} else {
|
||||||
|
ElMessage.error('保存失败');
|
||||||
|
}
|
||||||
|
return res;
|
||||||
|
},
|
||||||
|
remove: async ({ dispatch }, data) => {
|
||||||
|
if (!data.waiterIds.length) {
|
||||||
|
ElMessage.warning('请选择要删除的数据');
|
||||||
|
} else {
|
||||||
|
try {
|
||||||
|
await ElMessageBox.confirm('数据删除后无法恢复,确定要删除吗?', '危险操作');
|
||||||
|
let res = await api.removeWaiter(data);
|
||||||
|
if (res) {
|
||||||
|
ElMessage.success('删除成功');
|
||||||
|
dispatch('search');
|
||||||
|
} else {
|
||||||
|
ElMessage.error('删除失败');
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.info('取消删除', e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
};
|
||||||
|
export default {
|
||||||
|
state,
|
||||||
|
getters,
|
||||||
|
mutations,
|
||||||
|
actions,
|
||||||
|
};
|
@ -0,0 +1,190 @@
|
|||||||
|
<template>
|
||||||
|
<div class="list-container">
|
||||||
|
<table-list
|
||||||
|
v-loading="loading"
|
||||||
|
:code="code"
|
||||||
|
:config="config"
|
||||||
|
:data="list"
|
||||||
|
:operation="['create', 'search', 'remove']"
|
||||||
|
:reset="handleReset"
|
||||||
|
title="客服"
|
||||||
|
:total="total"
|
||||||
|
@create="handleCreate()"
|
||||||
|
@remove="handleRemove"
|
||||||
|
@search="handleSearch"
|
||||||
|
>
|
||||||
|
<template #search>
|
||||||
|
<el-form inline>
|
||||||
|
<el-form-item label="客服昵称" prop="waiterNickname">
|
||||||
|
<el-input v-model="state.condition.waiterNickname" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</template>
|
||||||
|
</table-list>
|
||||||
|
<el-dialog v-model="formState.formVisible" :title="formState.form.id ? '编辑' : '添加' + '店铺'" width="480px">
|
||||||
|
<el-form
|
||||||
|
ref="refsForm"
|
||||||
|
v-loading="formState.submitting"
|
||||||
|
label-width="100px"
|
||||||
|
:model="formState.form"
|
||||||
|
:rules="formState.rules"
|
||||||
|
>
|
||||||
|
<el-form-item label="客服员工" prop="userId">
|
||||||
|
<el-select
|
||||||
|
v-model="formState.form.userId"
|
||||||
|
:config="{ label: 'employeeName', value: 'id' }"
|
||||||
|
:disabled="!!formState.form.id"
|
||||||
|
:opts="opts.employee"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="客服头像" prop="waiterAvatar">
|
||||||
|
<el-upload-image v-model="formState.form.waiterAvatar" config-id="im/" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="客服昵称" prop="waiterNickname">
|
||||||
|
<el-input v-model="formState.form.waiterNickname" maxlength="20" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<template #footer>
|
||||||
|
<el-button @click="formState.formVisible = false">取消</el-button>
|
||||||
|
<el-button :loading="formState.submitting" type="primary" @click="handleSave">保存</el-button>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="jsx">
|
||||||
|
import ElButton from '@/components/extra/ElButton.vue';
|
||||||
|
import ElImage from '@/components/extra/ElImage.vue';
|
||||||
|
const store = useStore();
|
||||||
|
const { proxy } = getCurrentInstance();
|
||||||
|
const loading = ref(false);
|
||||||
|
const code = computed(() => store.state.chatWaiter.code);
|
||||||
|
const list = computed(() => store.state.chatWaiter.list);
|
||||||
|
const total = computed(() => store.state.chatWaiter.total);
|
||||||
|
const opts = computed(() => store.state.chatWaiter.opts);
|
||||||
|
if (!unref(opts).init) {
|
||||||
|
store.dispatch('chatWaiter/load');
|
||||||
|
}
|
||||||
|
const state = reactive({
|
||||||
|
condition: {
|
||||||
|
waiterNickname: null,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const handleReset = () => {
|
||||||
|
state.condition = {
|
||||||
|
waiterNickname: null,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const handleSearch = async () => {
|
||||||
|
loading.value = true;
|
||||||
|
await store.dispatch('chatWaiter/search');
|
||||||
|
loading.value = false;
|
||||||
|
};
|
||||||
|
watch(
|
||||||
|
() => state.condition,
|
||||||
|
(value) => {
|
||||||
|
store.commit('chatWaiter/setCondition', _.cloneDeep(value));
|
||||||
|
},
|
||||||
|
{ immediate: true, deep: true }
|
||||||
|
);
|
||||||
|
onActivated(handleSearch);
|
||||||
|
|
||||||
|
/* 表单 */
|
||||||
|
const refsForm = ref(null);
|
||||||
|
const formState = reactive({
|
||||||
|
formVisible: false,
|
||||||
|
submitting: false,
|
||||||
|
form: {
|
||||||
|
id: null,
|
||||||
|
waiterAvatar: null,
|
||||||
|
userId: null,
|
||||||
|
waiterNickname: null,
|
||||||
|
},
|
||||||
|
rules: {
|
||||||
|
waiterAvatar: [{ required: true, message: '客服头像不能为空' }],
|
||||||
|
userId: [{ required: true, message: '客服员工不能为空' }],
|
||||||
|
waiterNickname: [{ required: true, message: '客服昵称不能为空' }],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
// 添加/编辑
|
||||||
|
const handleCreate = (row) => {
|
||||||
|
Object.assign(
|
||||||
|
formState.form,
|
||||||
|
row || {
|
||||||
|
id: null,
|
||||||
|
waiterAvatar: null,
|
||||||
|
userId: null,
|
||||||
|
waiterNickname: null,
|
||||||
|
}
|
||||||
|
);
|
||||||
|
if (!formState.form.storeId) {
|
||||||
|
formState.form.storeId = state.condition.storeId;
|
||||||
|
}
|
||||||
|
formState.formVisible = true;
|
||||||
|
};
|
||||||
|
// 保存
|
||||||
|
const handleSave = async () => {
|
||||||
|
formState.submitting = true;
|
||||||
|
try {
|
||||||
|
await proxy.$validate(refsForm);
|
||||||
|
let data = _.cloneDeep(formState.form);
|
||||||
|
await store.dispatch('chatWaiter/save', data);
|
||||||
|
formState.formVisible = false;
|
||||||
|
} catch (e) {
|
||||||
|
console.info('取消保存', e);
|
||||||
|
}
|
||||||
|
formState.submitting = false;
|
||||||
|
};
|
||||||
|
const handleRemove = async (rows) => {
|
||||||
|
store.dispatch(
|
||||||
|
'chatWaiter/remove',
|
||||||
|
rows.map((row) => row.id)
|
||||||
|
);
|
||||||
|
};
|
||||||
|
const config = reactive({
|
||||||
|
// 表格列配置
|
||||||
|
columns: [
|
||||||
|
{
|
||||||
|
type: 'selection',
|
||||||
|
width: 60,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '客服员工',
|
||||||
|
slots: {
|
||||||
|
default: ({ row }) =>
|
||||||
|
proxy.$dict(unref(opts).employee, row.userId, { label: 'employeeName', value: 'id' }),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '客服头像',
|
||||||
|
width: 160,
|
||||||
|
slots: {
|
||||||
|
default: ({ row }) => <ElImage src={row.waiterAvatar} alt={row.waiterNickname} width="64px" />,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '客服昵称',
|
||||||
|
prop: 'waiterNickname',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '操作',
|
||||||
|
fixed: 'right',
|
||||||
|
slots: {
|
||||||
|
default: ({ row }) => (
|
||||||
|
<div>
|
||||||
|
<ElButton type="text" onClick={() => handleCreate(row)}>
|
||||||
|
编辑
|
||||||
|
</ElButton>
|
||||||
|
<ElButton type="text" onClick={() => handleRemove([row])}>
|
||||||
|
删除
|
||||||
|
</ElButton>
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
width: 120,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped></style>
|
@ -0,0 +1,91 @@
|
|||||||
|
<template>
|
||||||
|
<div class="date-range">
|
||||||
|
<el-button
|
||||||
|
v-for="(item, index) in opts"
|
||||||
|
:key="index"
|
||||||
|
:class="{ active: active === item.value }"
|
||||||
|
type="text"
|
||||||
|
@click="handleRange(item.value)"
|
||||||
|
>
|
||||||
|
{{ item.label }}
|
||||||
|
</el-button>
|
||||||
|
<el-date-picker
|
||||||
|
v-model="value"
|
||||||
|
:clearable="false"
|
||||||
|
:default-time="[new Date(0, 0, 0, 0, 0, 0), new Date(0, 0, 0, 23, 59, 59)]"
|
||||||
|
type="datetimerange"
|
||||||
|
value-format="x"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import dayjs from 'dayjs';
|
||||||
|
const opts = ref([
|
||||||
|
{
|
||||||
|
label: '本周',
|
||||||
|
value: 'week',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '本月',
|
||||||
|
value: 'month',
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
const active = ref('week');
|
||||||
|
const value = ref([]);
|
||||||
|
const emits = defineEmits(['update:modelValue']);
|
||||||
|
watch(value, (value) => {
|
||||||
|
emits('update:modelValue', value);
|
||||||
|
if (unref(click)) {
|
||||||
|
click.value = false;
|
||||||
|
} else {
|
||||||
|
active.value = null;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
const click = ref(false);
|
||||||
|
const handleRange = (range) => {
|
||||||
|
click.value = true;
|
||||||
|
active.value = range;
|
||||||
|
let weekStart = new Date(new Date().getTime() - ((new Date().getDay() || 7) - 1) * 1000 * 60 * 60 * 24);
|
||||||
|
switch (range) {
|
||||||
|
case 'week':
|
||||||
|
value.value = [
|
||||||
|
new Date(dayjs(weekStart).format('YYYY-MM-DD 00:00:00')).getTime(),
|
||||||
|
new Date(
|
||||||
|
dayjs(new Date(weekStart.getTime() + 6 * 1000 * 60 * 60 * 24)).format('YYYY-MM-DD 23:59:59')
|
||||||
|
).getTime(),
|
||||||
|
];
|
||||||
|
break;
|
||||||
|
case 'month':
|
||||||
|
value.value = [
|
||||||
|
new Date(
|
||||||
|
dayjs(new Date(new Date().getTime() - (new Date().getDate() - 1) * 1000 * 60 * 60 * 24)).format(
|
||||||
|
'YYYY-MM-DD 00:00:00'
|
||||||
|
)
|
||||||
|
).getTime(),
|
||||||
|
new Date(dayjs(new Date()).format('YYYY-MM-DD 23:59:59')).getTime(),
|
||||||
|
];
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
handleRange('week');
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.date-range {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
.el-button {
|
||||||
|
color: #666;
|
||||||
|
&.active {
|
||||||
|
color: #4481ff;
|
||||||
|
}
|
||||||
|
& + .el-button {
|
||||||
|
margin-left: 44px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
:deep(.el-date-editor) {
|
||||||
|
margin-left: 44px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
@ -0,0 +1,239 @@
|
|||||||
|
<template>
|
||||||
|
<div class="home-container">
|
||||||
|
<el-form>
|
||||||
|
<el-form-item label="所属系统">
|
||||||
|
<el-select
|
||||||
|
v-model="systemId"
|
||||||
|
:clearable="false"
|
||||||
|
:config="{ label: 'name', value: 'id' }"
|
||||||
|
:opts="opts.system"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<el-card header="在线人数">{{ online }}</el-card>
|
||||||
|
<el-card>
|
||||||
|
<template #header>
|
||||||
|
<div class="flex">
|
||||||
|
<p>单日消息量</p>
|
||||||
|
<el-date-picker
|
||||||
|
v-model="date1"
|
||||||
|
:disabled-date="(date) => date.getTime() > Date.now()"
|
||||||
|
type="date"
|
||||||
|
value-format="YYYY-MM-DD"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<div class="chart chart-1"></div>
|
||||||
|
</el-card>
|
||||||
|
<el-card>
|
||||||
|
<template #header>
|
||||||
|
<div class="flex">
|
||||||
|
<p>历史消息量</p>
|
||||||
|
<date-range v-model="date2" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<div class="chart chart-2"></div>
|
||||||
|
</el-card>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import dayjs from 'dayjs';
|
||||||
|
import * as echarts from 'echarts';
|
||||||
|
import DateRange from './dateRange.vue';
|
||||||
|
const store = useStore();
|
||||||
|
const loading = ref(false);
|
||||||
|
const opts = computed(() => store.state.imStore.opts);
|
||||||
|
if (!unref(opts).init) {
|
||||||
|
store.dispatch('imStore/load');
|
||||||
|
}
|
||||||
|
|
||||||
|
const systemId = ref(null);
|
||||||
|
watch(
|
||||||
|
() => unref(opts).system,
|
||||||
|
(value) => {
|
||||||
|
if (!unref(systemId)) {
|
||||||
|
systemId.value = value?.[0]?.id;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{ immediate: true }
|
||||||
|
);
|
||||||
|
const online = computed(() => store.state.imHome.online);
|
||||||
|
const handleLoadOnline = async () => {
|
||||||
|
loading.value = true;
|
||||||
|
if (unref(systemId)) {
|
||||||
|
await store.dispatch('imHome/loadOnline', { systemId: unref(systemId) });
|
||||||
|
}
|
||||||
|
loading.value = false;
|
||||||
|
};
|
||||||
|
watch(systemId, handleLoadOnline);
|
||||||
|
|
||||||
|
const charts = ref({});
|
||||||
|
window.addEventListener('resize', () =>
|
||||||
|
setTimeout(() => {
|
||||||
|
Object.entries(unref(charts)).forEach((entry) => {
|
||||||
|
entry[1].resize();
|
||||||
|
});
|
||||||
|
}, 100)
|
||||||
|
);
|
||||||
|
const handleChart = (
|
||||||
|
selector,
|
||||||
|
name,
|
||||||
|
data,
|
||||||
|
formatter = (params) =>
|
||||||
|
`${params[0].axisValue}<br/><span style="color:${params[0].color};font-size:20px;margin-right:5px;">●</span>${params[0].seriesName}<b style="margin-left:10px;">${params[0].value}</b>`
|
||||||
|
) => {
|
||||||
|
let chart = charts.value[selector];
|
||||||
|
chart?.dispose();
|
||||||
|
chart = charts.value[selector] = echarts.init(document.querySelector(selector));
|
||||||
|
const option = {
|
||||||
|
gradientColor: ['#1DE7FF', '#249AFF', '#6F41FA', '#6F41FA'],
|
||||||
|
visualMap: [
|
||||||
|
{
|
||||||
|
show: false,
|
||||||
|
type: 'continuous',
|
||||||
|
dimension: 0,
|
||||||
|
min: 0,
|
||||||
|
max: data.length - 1,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
formatter,
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: '0',
|
||||||
|
right: '0',
|
||||||
|
bottom: '30px',
|
||||||
|
top: '60px',
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
data: data.map((item) => item.label),
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
minInterval: 1,
|
||||||
|
},
|
||||||
|
series: {
|
||||||
|
type: 'line',
|
||||||
|
name,
|
||||||
|
showSymbol: false,
|
||||||
|
smooth: true,
|
||||||
|
areaStyle: {
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: 'rgba(29, 231, 255, 0.3)',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: 'rgba(29, 231, 255, 0)',
|
||||||
|
},
|
||||||
|
]),
|
||||||
|
},
|
||||||
|
data: data.map((item) => item.value),
|
||||||
|
},
|
||||||
|
};
|
||||||
|
chart.setOption(option);
|
||||||
|
};
|
||||||
|
|
||||||
|
const date1 = ref(dayjs(new Date()).format('YYYY-MM-DD'));
|
||||||
|
const handleLoadSingle = async () => {
|
||||||
|
loading.value = true;
|
||||||
|
store.commit('imHome/setSingle', []);
|
||||||
|
if (unref(systemId)) {
|
||||||
|
if (unref(date1)) {
|
||||||
|
await store.dispatch('imHome/loadSingle', {
|
||||||
|
systemId: unref(systemId),
|
||||||
|
days: unref(date1),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
loading.value = false;
|
||||||
|
};
|
||||||
|
watch(date1, handleLoadSingle, { immediate: true });
|
||||||
|
watch(systemId, handleLoadSingle);
|
||||||
|
watch(
|
||||||
|
() => store.state.imHome.single,
|
||||||
|
(value) => {
|
||||||
|
handleChart(
|
||||||
|
'.chart-1',
|
||||||
|
'消息量',
|
||||||
|
value.map((item) => {
|
||||||
|
return {
|
||||||
|
label: item.hours,
|
||||||
|
value: item.messageCount,
|
||||||
|
};
|
||||||
|
}),
|
||||||
|
(params) =>
|
||||||
|
`${params[0].axisValue}:00 - ${params[0].axisValue}:59<br/><span style="color:${params[0].color};font-size:20px;margin-right:5px;">●</span>${params[0].seriesName}<b style="margin-left:10px;">${params[0].value}</b>`
|
||||||
|
);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
const date2 = ref([]);
|
||||||
|
const handleLoadRange = async () => {
|
||||||
|
loading.value = true;
|
||||||
|
store.commit('imHome/setRange', []);
|
||||||
|
if (unref(systemId)) {
|
||||||
|
if (unref(date2)?.length) {
|
||||||
|
await store.dispatch('imHome/loadRange', {
|
||||||
|
systemId: unref(systemId),
|
||||||
|
start: unref(date2)[0],
|
||||||
|
end: unref(date2)[1],
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
loading.value = false;
|
||||||
|
};
|
||||||
|
watch(date2, handleLoadRange);
|
||||||
|
watch(systemId, handleLoadRange);
|
||||||
|
watch(
|
||||||
|
() => store.state.imHome.range,
|
||||||
|
(value) => {
|
||||||
|
handleChart(
|
||||||
|
'.chart-2',
|
||||||
|
'消息量',
|
||||||
|
value.map((item) => {
|
||||||
|
return {
|
||||||
|
label: item.days,
|
||||||
|
value: item.messageCount,
|
||||||
|
};
|
||||||
|
})
|
||||||
|
);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
onActivated(() => {
|
||||||
|
handleLoadOnline();
|
||||||
|
handleLoadSingle();
|
||||||
|
handleLoadRange();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.home-container {
|
||||||
|
.flex {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
p {
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.el-card {
|
||||||
|
& + .el-card {
|
||||||
|
margin-top: 30px;
|
||||||
|
}
|
||||||
|
&:nth-of-type(1) {
|
||||||
|
:deep(.el-card__body) {
|
||||||
|
font-size: 32px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.chart {
|
||||||
|
width: 100%;
|
||||||
|
height: 300px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
@ -0,0 +1,212 @@
|
|||||||
|
<template>
|
||||||
|
<div class="list-container">
|
||||||
|
<table-list
|
||||||
|
v-loading="loading"
|
||||||
|
:code="code"
|
||||||
|
:config="config"
|
||||||
|
:data="list"
|
||||||
|
:operation="['create', 'search', 'remove']"
|
||||||
|
:reset="handleReset"
|
||||||
|
title="店铺"
|
||||||
|
:total="total"
|
||||||
|
@create="handleCreate()"
|
||||||
|
@remove="handleRemove"
|
||||||
|
@search="handleSearch"
|
||||||
|
>
|
||||||
|
<template #search>
|
||||||
|
<el-form inline>
|
||||||
|
<el-form-item label="所属系统" prop="sysId">
|
||||||
|
<el-select
|
||||||
|
v-model="state.condition.sysId"
|
||||||
|
:config="{ label: 'name', value: 'id' }"
|
||||||
|
:opts="opts.system"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</template>
|
||||||
|
</table-list>
|
||||||
|
<el-dialog v-model="formState.formVisible" :title="formState.form.id ? '编辑' : '添加' + '店铺'" width="480px">
|
||||||
|
<el-form
|
||||||
|
ref="refsForm"
|
||||||
|
v-loading="formState.submitting"
|
||||||
|
label-width="100px"
|
||||||
|
:model="formState.form"
|
||||||
|
:rules="formState.rules"
|
||||||
|
>
|
||||||
|
<el-form-item label="所属系统" prop="sysId">
|
||||||
|
<el-select
|
||||||
|
v-model="formState.form.sysId"
|
||||||
|
:config="{ label: 'name', value: 'id' }"
|
||||||
|
:disabled="formState.form.id"
|
||||||
|
:opts="opts.system"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="店铺头像" prop="avatar">
|
||||||
|
<el-upload-image v-model="formState.form.avatar" config-id="im/" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="店铺名称" prop="name">
|
||||||
|
<el-input v-model="formState.form.name" maxlength="20" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<template #footer>
|
||||||
|
<el-button @click="formState.formVisible = false">取消</el-button>
|
||||||
|
<el-button :loading="formState.submitting" type="primary" @click="handleSave">保存</el-button>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="jsx">
|
||||||
|
import ElButton from '@/components/extra/ElButton.vue';
|
||||||
|
import ElImage from '@/components/extra/ElImage.vue';
|
||||||
|
const store = useStore();
|
||||||
|
const route = useRoute();
|
||||||
|
const router = useRouter();
|
||||||
|
const { proxy } = getCurrentInstance();
|
||||||
|
const loading = ref(false);
|
||||||
|
const code = computed(() => store.state.imStore.code);
|
||||||
|
const list = computed(() => store.state.imStore.list);
|
||||||
|
const total = computed(() => store.state.imStore.total);
|
||||||
|
const opts = computed(() => store.state.imStore.opts);
|
||||||
|
if (!unref(opts).init) {
|
||||||
|
store.dispatch('imStore/load');
|
||||||
|
}
|
||||||
|
const state = reactive({
|
||||||
|
condition: {
|
||||||
|
sysId: null,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const handleReset = () => {
|
||||||
|
state.condition = {
|
||||||
|
sysId: null,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const handleSearch = async () => {
|
||||||
|
loading.value = true;
|
||||||
|
await store.dispatch('imStore/search');
|
||||||
|
loading.value = false;
|
||||||
|
};
|
||||||
|
watch(
|
||||||
|
() => state.condition,
|
||||||
|
(value) => {
|
||||||
|
store.commit('imStore/setCondition', _.cloneDeep(value));
|
||||||
|
handleSearch();
|
||||||
|
},
|
||||||
|
{ immediate: true, deep: true }
|
||||||
|
);
|
||||||
|
onActivated(() => {
|
||||||
|
let sysId = route.query.sysId;
|
||||||
|
if (sysId) {
|
||||||
|
state.condition.sysId = +sysId;
|
||||||
|
} else {
|
||||||
|
handleSearch();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
/* 表单 */
|
||||||
|
const refsForm = ref(null);
|
||||||
|
const formState = reactive({
|
||||||
|
formVisible: false,
|
||||||
|
submitting: false,
|
||||||
|
form: {
|
||||||
|
id: null,
|
||||||
|
sysId: null,
|
||||||
|
name: null,
|
||||||
|
avatar: null,
|
||||||
|
},
|
||||||
|
rules: {
|
||||||
|
sysId: [{ required: true, message: '所属系统不能为空' }],
|
||||||
|
name: [{ required: true, message: '店铺名称不能为空' }],
|
||||||
|
avatar: [{ required: true, message: '店铺头像不能为空' }],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
// 添加/编辑
|
||||||
|
const handleCreate = (row) => {
|
||||||
|
Object.assign(
|
||||||
|
formState.form,
|
||||||
|
row || {
|
||||||
|
id: null,
|
||||||
|
sysId: null,
|
||||||
|
name: null,
|
||||||
|
avatar: null,
|
||||||
|
}
|
||||||
|
);
|
||||||
|
formState.formVisible = true;
|
||||||
|
};
|
||||||
|
// 保存
|
||||||
|
const handleSave = async () => {
|
||||||
|
formState.submitting = true;
|
||||||
|
try {
|
||||||
|
await proxy.$validate(refsForm);
|
||||||
|
let data = _.cloneDeep(formState.form);
|
||||||
|
await store.dispatch('imStore/save', data);
|
||||||
|
formState.formVisible = false;
|
||||||
|
} catch (e) {
|
||||||
|
console.info('取消保存', e);
|
||||||
|
}
|
||||||
|
formState.submitting = false;
|
||||||
|
};
|
||||||
|
const handleRemove = async (rows) => {
|
||||||
|
store.dispatch(
|
||||||
|
'imStore/remove',
|
||||||
|
rows.map((item) => item.id)
|
||||||
|
);
|
||||||
|
};
|
||||||
|
const handleWaiter = (row) => {
|
||||||
|
router.push({
|
||||||
|
name: 'ImWaiter',
|
||||||
|
query: {
|
||||||
|
storeId: row.id,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
const config = reactive({
|
||||||
|
// 表格列配置
|
||||||
|
columns: [
|
||||||
|
{
|
||||||
|
type: 'selection',
|
||||||
|
width: 60,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '所属系统',
|
||||||
|
width: 160,
|
||||||
|
slots: {
|
||||||
|
default: ({ row }) => proxy.$dict(unref(opts).system, row.sysId, { label: 'name', value: 'id' }),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '店铺头像',
|
||||||
|
width: 160,
|
||||||
|
slots: {
|
||||||
|
default: ({ row }) => <ElImage src={row.avatar} alt={row.name} />,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '店铺名称',
|
||||||
|
prop: 'name',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '操作',
|
||||||
|
fixed: 'right',
|
||||||
|
width: 160,
|
||||||
|
slots: {
|
||||||
|
default: ({ row }) => (
|
||||||
|
<div>
|
||||||
|
<ElButton type="text" onClick={() => handleCreate(row)}>
|
||||||
|
编辑
|
||||||
|
</ElButton>
|
||||||
|
<ElButton type="text" onClick={() => handleWaiter(row)}>
|
||||||
|
客服
|
||||||
|
</ElButton>
|
||||||
|
<ElButton type="text" onClick={() => handleRemove([row])}>
|
||||||
|
删除
|
||||||
|
</ElButton>
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped></style>
|
@ -0,0 +1,175 @@
|
|||||||
|
<template>
|
||||||
|
<div class="list-container">
|
||||||
|
<table-list
|
||||||
|
v-loading="loading"
|
||||||
|
:code="code"
|
||||||
|
:config="config"
|
||||||
|
:data="list"
|
||||||
|
:operation="['create', 'search', 'remove']"
|
||||||
|
:reset="handleReset"
|
||||||
|
title="系统"
|
||||||
|
:total="total"
|
||||||
|
@create="handleCreate()"
|
||||||
|
@remove="handleRemove"
|
||||||
|
@search="handleSearch"
|
||||||
|
>
|
||||||
|
<template #search>
|
||||||
|
<el-form inline>
|
||||||
|
<el-form-item label="系统名称" prop="name">
|
||||||
|
<el-input v-model="state.condition.name" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</template>
|
||||||
|
</table-list>
|
||||||
|
<el-dialog v-model="formState.formVisible" :title="formState.form.id ? '查看' : '添加' + '系统'" width="480px">
|
||||||
|
<el-form
|
||||||
|
ref="refsForm"
|
||||||
|
v-loading="formState.submitting"
|
||||||
|
:disabled="!!formState.form.id"
|
||||||
|
label-width="100px"
|
||||||
|
:model="formState.form"
|
||||||
|
:rules="formState.rules"
|
||||||
|
>
|
||||||
|
<el-form-item label="系统标识" prop="client">
|
||||||
|
<el-input v-model="formState.form.client" maxlength="20" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="系统名称" prop="name">
|
||||||
|
<el-input v-model="formState.form.name" maxlength="20" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<template #footer>
|
||||||
|
<el-button @click="formState.formVisible = false">取消</el-button>
|
||||||
|
<el-button v-if="!formState.form.id" :loading="formState.submitting" type="primary" @click="handleSave">
|
||||||
|
保存
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="jsx">
|
||||||
|
import ElButton from '@/components/extra/ElButton.vue';
|
||||||
|
const store = useStore();
|
||||||
|
const router = useRouter();
|
||||||
|
const { proxy } = getCurrentInstance();
|
||||||
|
const loading = ref(false);
|
||||||
|
const code = computed(() => store.state.imSystem.code);
|
||||||
|
const list = computed(() => store.state.imSystem.list);
|
||||||
|
const total = computed(() => store.state.imSystem.total);
|
||||||
|
const opts = computed(() => store.state.imSystem.opts);
|
||||||
|
if (!unref(opts).init) {
|
||||||
|
store.dispatch('imSystem/load');
|
||||||
|
}
|
||||||
|
const state = reactive({
|
||||||
|
condition: {
|
||||||
|
name: null,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
watch(
|
||||||
|
() => state.condition,
|
||||||
|
(value) => {
|
||||||
|
store.commit('imSystem/setCondition', _.cloneDeep(value));
|
||||||
|
},
|
||||||
|
{ immediate: true, deep: true }
|
||||||
|
);
|
||||||
|
const handleReset = () => {
|
||||||
|
state.condition = {
|
||||||
|
name: null,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const handleSearch = async () => {
|
||||||
|
loading.value = true;
|
||||||
|
await store.dispatch('imSystem/search');
|
||||||
|
loading.value = false;
|
||||||
|
};
|
||||||
|
onActivated(handleSearch);
|
||||||
|
|
||||||
|
/* 表单 */
|
||||||
|
const refsForm = ref(null);
|
||||||
|
const formState = reactive({
|
||||||
|
formVisible: false,
|
||||||
|
submitting: false,
|
||||||
|
form: {
|
||||||
|
id: null,
|
||||||
|
client: null,
|
||||||
|
name: null,
|
||||||
|
},
|
||||||
|
rules: {
|
||||||
|
client: [{ required: true, message: '系统标识不能为空' }],
|
||||||
|
name: [{ required: true, message: '系统名称不能为空' }],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
// 添加/编辑
|
||||||
|
const handleCreate = (row) => {
|
||||||
|
Object.assign(
|
||||||
|
formState.form,
|
||||||
|
row || {
|
||||||
|
id: null,
|
||||||
|
client: null,
|
||||||
|
name: null,
|
||||||
|
}
|
||||||
|
);
|
||||||
|
formState.formVisible = true;
|
||||||
|
};
|
||||||
|
// 保存
|
||||||
|
const handleSave = async () => {
|
||||||
|
formState.submitting = true;
|
||||||
|
try {
|
||||||
|
await proxy.$validate(refsForm);
|
||||||
|
let data = _.cloneDeep(formState.form);
|
||||||
|
await store.dispatch('imSystem/save', data);
|
||||||
|
formState.formVisible = false;
|
||||||
|
} catch (e) {
|
||||||
|
console.info('取消保存', e);
|
||||||
|
}
|
||||||
|
formState.submitting = false;
|
||||||
|
};
|
||||||
|
const handleRemove = async (rows) => {
|
||||||
|
store.dispatch(
|
||||||
|
'imSystem/remove',
|
||||||
|
rows.map((item) => item.id)
|
||||||
|
);
|
||||||
|
};
|
||||||
|
const handleStore = (row) => {
|
||||||
|
router.push({ name: 'ImStore', query: { sysId: row.id } });
|
||||||
|
};
|
||||||
|
const config = reactive({
|
||||||
|
// 表格列配置
|
||||||
|
columns: [
|
||||||
|
{
|
||||||
|
type: 'selection',
|
||||||
|
width: 60,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '系统标识',
|
||||||
|
prop: 'client',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '系统名称',
|
||||||
|
prop: 'name',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '操作',
|
||||||
|
fixed: 'right',
|
||||||
|
width: 160,
|
||||||
|
slots: {
|
||||||
|
default: ({ row }) => (
|
||||||
|
<div>
|
||||||
|
<ElButton type="text" onClick={() => handleCreate(row)}>
|
||||||
|
查看
|
||||||
|
</ElButton>
|
||||||
|
<ElButton type="text" onClick={() => handleStore(row)}>
|
||||||
|
店铺
|
||||||
|
</ElButton>
|
||||||
|
<ElButton type="text" onClick={() => handleRemove([row])}>
|
||||||
|
删除
|
||||||
|
</ElButton>
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped></style>
|
@ -0,0 +1,225 @@
|
|||||||
|
<template>
|
||||||
|
<div class="list-container">
|
||||||
|
<table-list
|
||||||
|
v-loading="loading"
|
||||||
|
:code="code"
|
||||||
|
:config="config"
|
||||||
|
:data="list"
|
||||||
|
:operation="['search']"
|
||||||
|
:reset="handleReset"
|
||||||
|
title="客服"
|
||||||
|
:total="total"
|
||||||
|
@create="handleCreate()"
|
||||||
|
@remove="handleRemove"
|
||||||
|
@search="handleSearch"
|
||||||
|
>
|
||||||
|
<template #search>
|
||||||
|
<el-form inline>
|
||||||
|
<el-form-item label="所属店铺" prop="storeId">
|
||||||
|
<el-select
|
||||||
|
v-model="state.condition.storeId"
|
||||||
|
:config="{ label: 'name', value: 'id' }"
|
||||||
|
:opts="opts.store"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="客服ID" prop="waiterId">
|
||||||
|
<el-input v-model="state.condition.waiterId" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="客服昵称" prop="waiterNickname">
|
||||||
|
<el-input v-model="state.condition.waiterNickname" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</template>
|
||||||
|
</table-list>
|
||||||
|
<el-dialog v-model="formState.formVisible" :title="formState.form.id ? '编辑' : '添加' + '客服'" width="480px">
|
||||||
|
<el-form
|
||||||
|
ref="refsForm"
|
||||||
|
v-loading="formState.submitting"
|
||||||
|
label-width="100px"
|
||||||
|
:model="formState.form"
|
||||||
|
:rules="formState.rules"
|
||||||
|
>
|
||||||
|
<el-form-item label="所属店铺" prop="storeId">
|
||||||
|
<el-select
|
||||||
|
v-model="formState.form.storeId"
|
||||||
|
:config="{ label: 'name', value: 'id' }"
|
||||||
|
:disabled="formState.form.id"
|
||||||
|
:opts="opts.store"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="客服类型" prop="type">
|
||||||
|
<el-input v-model="formState.form.type" maxlength="20" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="客服头像" prop="waiterAvatar">
|
||||||
|
<el-upload-image v-model="formState.form.waiterAvatar" config-id="im/" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="客服ID" prop="waiterId">
|
||||||
|
<el-input v-model="formState.form.waiterId" :disabled="!!formState.form.id" maxlength="20" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="客服昵称" prop="waiterNickname">
|
||||||
|
<el-input v-model="formState.form.waiterNickname" maxlength="20" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<template #footer>
|
||||||
|
<el-button @click="formState.formVisible = false">取消</el-button>
|
||||||
|
<el-button :loading="formState.submitting" type="primary" @click="handleSave">保存</el-button>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="jsx">
|
||||||
|
import ElImage from '@/components/extra/ElImage.vue';
|
||||||
|
const store = useStore();
|
||||||
|
const route = useRoute();
|
||||||
|
const { proxy } = getCurrentInstance();
|
||||||
|
const loading = ref(false);
|
||||||
|
const code = computed(() => store.state.imWaiter.code);
|
||||||
|
const list = computed(() => store.state.imWaiter.list);
|
||||||
|
const total = computed(() => store.state.imWaiter.total);
|
||||||
|
const opts = computed(() => store.state.imWaiter.opts);
|
||||||
|
if (!unref(opts).init) {
|
||||||
|
store.dispatch('imWaiter/load');
|
||||||
|
}
|
||||||
|
const state = reactive({
|
||||||
|
condition: {
|
||||||
|
storeId: null,
|
||||||
|
waiterId: null,
|
||||||
|
waiterNickname: null,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const handleReset = () => {
|
||||||
|
state.condition = {
|
||||||
|
storeId: unref(opts).store?.[0]?.id,
|
||||||
|
waiterId: null,
|
||||||
|
waiterNickname: null,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const handleSearch = async () => {
|
||||||
|
if (state.condition.storeId) {
|
||||||
|
loading.value = true;
|
||||||
|
await store.dispatch('imWaiter/search');
|
||||||
|
loading.value = false;
|
||||||
|
} else {
|
||||||
|
store.commit('imWaiter/setList', []);
|
||||||
|
store.commit('imWaiter/setTotal', 0);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
watch(
|
||||||
|
() => unref(opts).store,
|
||||||
|
(value) => {
|
||||||
|
if (!state.condition.storeId) {
|
||||||
|
state.condition.storeId = value[0]?.id;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
watch(
|
||||||
|
() => state.condition,
|
||||||
|
(value) => {
|
||||||
|
store.commit('imWaiter/setCondition', _.cloneDeep(value));
|
||||||
|
},
|
||||||
|
{ immediate: true, deep: true }
|
||||||
|
);
|
||||||
|
watch(
|
||||||
|
() => state.condition.storeId,
|
||||||
|
() => {
|
||||||
|
handleSearch();
|
||||||
|
}
|
||||||
|
);
|
||||||
|
onActivated(() => {
|
||||||
|
let storeId = route.query.storeId;
|
||||||
|
if (storeId) {
|
||||||
|
state.condition.storeId = +storeId;
|
||||||
|
} else {
|
||||||
|
handleSearch();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
/* 表单 */
|
||||||
|
const refsForm = ref(null);
|
||||||
|
const formState = reactive({
|
||||||
|
formVisible: false,
|
||||||
|
submitting: false,
|
||||||
|
form: {
|
||||||
|
id: null,
|
||||||
|
storeId: null,
|
||||||
|
type: null,
|
||||||
|
waiterAvatar: null,
|
||||||
|
waiterId: null,
|
||||||
|
waiterNickname: null,
|
||||||
|
},
|
||||||
|
rules: {
|
||||||
|
storeId: [{ required: true, message: '所属店铺不能为空' }],
|
||||||
|
type: [{ required: true, message: '客服类型不能为空' }],
|
||||||
|
waiterAvatar: [{ required: true, message: '客服头像不能为空' }],
|
||||||
|
waiterId: [{ required: true, message: '客服ID不能为空' }],
|
||||||
|
waiterNickname: [{ required: true, message: '客服昵称不能为空' }],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
// 添加/编辑
|
||||||
|
const handleCreate = (row) => {
|
||||||
|
Object.assign(
|
||||||
|
formState.form,
|
||||||
|
row || {
|
||||||
|
id: null,
|
||||||
|
storeId: null,
|
||||||
|
type: null,
|
||||||
|
waiterAvatar: null,
|
||||||
|
waiterId: null,
|
||||||
|
waiterNickname: null,
|
||||||
|
}
|
||||||
|
);
|
||||||
|
if (!formState.form.storeId) {
|
||||||
|
formState.form.storeId = state.condition.storeId;
|
||||||
|
}
|
||||||
|
formState.formVisible = true;
|
||||||
|
};
|
||||||
|
// 保存
|
||||||
|
const handleSave = async () => {
|
||||||
|
formState.submitting = true;
|
||||||
|
try {
|
||||||
|
await proxy.$validate(refsForm);
|
||||||
|
let data = _.cloneDeep(formState.form);
|
||||||
|
await store.dispatch('imWaiter/save', data);
|
||||||
|
formState.formVisible = false;
|
||||||
|
} catch (e) {
|
||||||
|
console.info('取消保存', e);
|
||||||
|
}
|
||||||
|
formState.submitting = false;
|
||||||
|
};
|
||||||
|
const handleRemove = async (rows) => {
|
||||||
|
store.dispatch('imWaiter/remove', {
|
||||||
|
storeId: state.condition.storeId,
|
||||||
|
waiterIds: rows.map((item) => item.waiterId),
|
||||||
|
});
|
||||||
|
};
|
||||||
|
const config = reactive({
|
||||||
|
// 表格列配置
|
||||||
|
columns: [
|
||||||
|
{
|
||||||
|
label: '所属店铺',
|
||||||
|
width: 160,
|
||||||
|
slots: {
|
||||||
|
default: ({ row }) => proxy.$dict(unref(opts).store, row.storeId, { label: 'name', value: 'id' }),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '客服头像',
|
||||||
|
width: 160,
|
||||||
|
slots: {
|
||||||
|
default: ({ row }) => <ElImage src={row.waiterAvatar} alt={row.waiterNickname} />,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '客服ID',
|
||||||
|
prop: 'waiterId',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '客服昵称',
|
||||||
|
prop: 'waiterNickname',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped></style>
|
Loading…
Reference in new issue