向文可
3 years ago
commit
51cf0b0520
@ -1,91 +0,0 @@
|
|||||||
import * as api from '@/api/chat/index.js';
|
|
||||||
import { ElMessage, ElMessageBox } from '@/plugins/element-plus';
|
|
||||||
const state = () => ({
|
|
||||||
code: 'CustomerServiceManagement',
|
|
||||||
condition: {},
|
|
||||||
list: [],
|
|
||||||
total: 0,
|
|
||||||
opts: {
|
|
||||||
init: false,
|
|
||||||
customerServiceType: [
|
|
||||||
{
|
|
||||||
label: '售前',
|
|
||||||
value: 1,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '售后',
|
|
||||||
value: 2,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '发货',
|
|
||||||
value: 3,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
});
|
|
||||||
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 ({ commit }) => {
|
|
||||||
let res = await api.searchService(1);
|
|
||||||
commit('setList', res || []);
|
|
||||||
if (!res) {
|
|
||||||
ElMessage.error('查询失败');
|
|
||||||
}
|
|
||||||
return res;
|
|
||||||
},
|
|
||||||
load: async ({ state, commit }) => {
|
|
||||||
commit('setOpts', {
|
|
||||||
...state.opts,
|
|
||||||
init: true,
|
|
||||||
});
|
|
||||||
},
|
|
||||||
detail: async (context, id) => {
|
|
||||||
let res = await api.detail(id);
|
|
||||||
if (!res) {
|
|
||||||
ElMessage.error('加载详情失败');
|
|
||||||
}
|
|
||||||
return res;
|
|
||||||
},
|
|
||||||
save: async ({ dispatch }, data) => {
|
|
||||||
let save = data.id ? api.update : api.create;
|
|
||||||
let res = await save(data);
|
|
||||||
if (res) {
|
|
||||||
ElMessage.success('保存成功');
|
|
||||||
dispatch('search');
|
|
||||||
} else {
|
|
||||||
ElMessage.error('保存失败');
|
|
||||||
}
|
|
||||||
return res;
|
|
||||||
},
|
|
||||||
remove: async ({ dispatch }, idList) => {
|
|
||||||
if (!idList.length) {
|
|
||||||
ElMessage.warning('请选择要删除的数据');
|
|
||||||
} else {
|
|
||||||
try {
|
|
||||||
await ElMessageBox.confirm('数据删除后无法恢复，确定要删除吗?', '危险操作');
|
|
||||||
let res = await api.remove(idList.join(','));
|
|
||||||
if (res) {
|
|
||||||
ElMessage.success('删除成功');
|
|
||||||
dispatch('search');
|
|
||||||
} else {
|
|
||||||
ElMessage.error('删除失败');
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
console.info('取消删除', e);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
};
|
|
||||||
export default {
|
|
||||||
state,
|
|
||||||
getters,
|
|
||||||
mutations,
|
|
||||||
actions,
|
|
||||||
};
|
|
||||||
@ -1,7 +1,7 @@
|
|||||||
import * as api from '@/api/im/index.js';
|
import * as api from '@/api/im/index.js';
|
||||||
import { ElMessage, ElMessageBox } from '@/plugins/element-plus';
|
import { ElMessage, ElMessageBox } from '@/plugins/element-plus';
|
||||||
const state = () => ({
|
const state = () => ({
|
||||||
code: 'ChatStore',
|
code: 'ImStore',
|
||||||
condition: {},
|
condition: {},
|
||||||
list: [],
|
list: [],
|
||||||
total: 0,
|
total: 0,
|
||||||
@ -1,7 +1,7 @@
|
|||||||
import * as api from '@/api/im/index.js';
|
import * as api from '@/api/im/index.js';
|
||||||
import { ElMessage, ElMessageBox } from '@/plugins/element-plus';
|
import { ElMessage, ElMessageBox } from '@/plugins/element-plus';
|
||||||
const state = () => ({
|
const state = () => ({
|
||||||
code: 'ChatSystem',
|
code: 'ImSystem',
|
||||||
condition: {},
|
condition: {},
|
||||||
list: [],
|
list: [],
|
||||||
total: 0,
|
total: 0,
|
||||||
@ -0,0 +1,247 @@
|
|||||||
|
<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="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 ElButton from '@/components/extra/ElButton.vue';
|
||||||
|
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.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: {
|
||||||
|
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('chatWaiter/search');
|
||||||
|
loading.value = false;
|
||||||
|
} else {
|
||||||
|
store.commit('chatWaiter/setList', []);
|
||||||
|
store.commit('chatWaiter/setTotal', 0);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
watch(
|
||||||
|
() => unref(opts).store,
|
||||||
|
(value) => {
|
||||||
|
if (!state.condition.storeId) {
|
||||||
|
state.condition.storeId = value[0]?.id;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
watch(
|
||||||
|
() => state.condition,
|
||||||
|
(value) => {
|
||||||
|
store.commit('chatWaiter/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('chatWaiter/save', data);
|
||||||
|
formState.formVisible = false;
|
||||||
|
} catch (e) {
|
||||||
|
console.info('取消保存', e);
|
||||||
|
}
|
||||||
|
formState.submitting = false;
|
||||||
|
};
|
||||||
|
const handleRemove = async (rows) => {
|
||||||
|
store.dispatch('chatWaiter/remove', {
|
||||||
|
storeId: state.condition.storeId,
|
||||||
|
waiterIds: rows.map((item) => item.waiterId),
|
||||||
|
});
|
||||||
|
};
|
||||||
|
const config = reactive({
|
||||||
|
// 表格列配置
|
||||||
|
columns: [
|
||||||
|
{
|
||||||
|
type: 'selection',
|
||||||
|
width: 60,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
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',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
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>
|
||||||
Loading…
Reference in new issue