Skip to content

S
so-manage-ui
Commit bbfb2087 authored by 白舜's avatar 白舜 🎱
Browse files
Options

客服回复配置：问题分类和问题列表部分对接

parent ae42e6b4
Show whitespace changes
Inline Side-by-side
Showing with 378 additions and 38 deletions
src/page/main/config/reply-settings/index.vue
View file @ bbfb2087
......@@ -4,14 +4,14 @@
<div class="main_container">
<div class="switch-box">
<div class="switch-label">是否启用</div>
<el-switch
<!-- 特别说明，本来这个开关适用于整个功能，但是经沟通，后端的欢迎语开关也是唯一的，他们决定用这个欢迎语开关来确认整个功能的是否启用，所以代码逻辑可能产生误会，特此说明 -->
<bg-switch
@click="handleWelcomeSwitch()"
class="bg-switch-ele"
v-model="ruleForm.state"
:active-value="1"
:inactive-value="0"
v-model="welcome.state"
:values="[0, 1]"
inline-prompt
active-text="是"
inactive-text="否" />
:labels="['否', '是']" />
</div>
<div class="welcome-box">
<div class="welcome-label"><span class="required">*</span>欢迎语</div>
......@@ -41,8 +41,15 @@
:values="[0, 1]"
v-model="row.state"></bg-switch>
</template>
<template #problem_number="{ row }">
<router-link :to="`/config/reply-settings/question-category?id=${row.id}`">{{
row.problem_number
}}</router-link>
</template>
<template #action="{ row }">
<bg-table-btn @click="$router.push('/config/reply-settings/question-category')">添加问题</bg-table-btn>
<bg-table-btn @click="$router.push(`/config/reply-settings/question-category?id=${row.id}`)"
>添加问题</bg-table-btn
>
<bg-table-btn @click="handleCategoryUpdate('edit', row)">编辑</bg-table-btn>
<bg-table-btn @click="handleDeleteDialog(row)">删除</bg-table-btn>
<bg-table-btn @click="moveRow(row, 1)" :disabled="!row.canMoveUp">上移</bg-table-btn>
......@@ -78,7 +85,7 @@
<template #footer>
<div class="apaas_button">
<el-button type="default" @click="dialogCategoryEdit = false">取消</el-button>
<el-button type="primary" @click="handleSaveCategory">保存</el-button>
<el-button type="primary" @click="handleSaveCategory(bgForm)">保存</el-button>
</div>
</template>
</el-dialog>
......@@ -108,17 +115,9 @@ import { ref, reactive, toRefs, onMounted } from "vue";
import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
import axios from "@/request/http.js";
import { ElMessage } from "element-plus";
const bgForm = ref(null);
const state = reactive({
welcome: {},
categoryEditType: "",
dialogCategoryEdit: false,
ruleForm: {
categoryName: "",
},
rules: {
categoryName: [{ required: true, message: "请输入问题分类", trigger: "blur" }],
},
tableRows: [],
headers: [
{
......@@ -145,20 +144,27 @@ const state = reactive({
page: 1,
limit: 10,
},
categoryEditType: "",
dialogCategoryEdit: false,
ruleForm: {
categoryName: "",
},
rules: {
categoryName: [{ required: true, message: "请输入问题分类", trigger: "blur" }],
},
dialogDelete: false,
actionRow: null,
});
const getTableRows = () => {
let params = { ...state.filter };
params.id = state.nodeId;
axios
.get(`/apaas/system/v5/customer/service/problem/type`, {
params,
})
.then((res) => {
if (res.data.code == 200) {
state.tableRows = res.data.data;
state.tableRows = res.data.data || [];
state.tableTotal = res.data.total;
if (state.tableRows.length > 0) {
state.tableRows.forEach((e) => {
......@@ -250,7 +256,10 @@ const handleCategoryUpdate = (type, row) => {
}
};
const handleSaveCategory = () => {
const handleSaveCategory = async (formEl) => {
if (!formEl) return;
await formEl.validate((valid, fields) => {
if (valid) {
const isNew = state.categoryEditType === "create";
axios
.post("/apaas/system/v5/customer/service/problem/type", {
......@@ -268,6 +277,10 @@ const handleSaveCategory = () => {
ElMessage.error(data.data);
}
});
} else {
console.log("error submit!", fields);
}
});
};
const handleDeleteDialog = (row) => {
......@@ -287,6 +300,17 @@ const deleteData = () => {
});
};
const handleWelcomeSwitch = () => {
// 可能会造成的bug，如果用户改了欢迎语，但是不点保存，直接点击开关，也会影响到欢迎语的变化，所以千万不要修改欢迎语不保存，去点击开关。
axios.post("/apaas/system/v5/customer/service/welcome", state.welcome).then(({ data }) => {
if (data.code === 200) {
ElMessage.success("操作成功");
} else {
ElMessage.error(data.data);
}
});
};
const getWelcomeText = () => {
axios.get("/apaas/system/v5/customer/service/welcome").then(({ data }) => {
if (data.data) {
......@@ -377,7 +401,7 @@ const {
}
.welcome-box {
margin-top: 23px;
.label .required {
.welcome-label .required {
color: #d75138;
}
.welcome-form {
......@@ -391,6 +415,7 @@ const {
.question-box {
margin-top: 42px;
height: 100%;
.el-button {
margin: 23px 0 8px;
}
......
src/page/main/config/reply-settings/question-category/index.vue 0 → 100644
View file @ bbfb2087
<template>
<div class="detail_container">
<bg-breadcrumb></bg-breadcrumb>
<div class="main_container">
<div class="question-box">
<div>问题分类 - {{ category.problem_type }}（{{ category.problem_number }}/8）</div>
<el-button type="primary" @click="handleQuestionUpdate('create')">
<bg-icon style="font-size: 12px; color: #fff; margin-right: 8px" icon="#bg-ic-add"></bg-icon>
新增
</el-button>
<div class="table_container" style="padding: 0">
<div class="table bg-scroll">
<bg-table ref="bgTable" :headers="headers" :rows="tableRows" :isIndex="true" :stripe="true">
<template #action="{ row }">
<bg-table-btn @click="handleQuestionUpdate('edit', row)">编辑</bg-table-btn>
<bg-table-btn @click="handleDeleteDialog(row)">删除</bg-table-btn>
<bg-table-btn @click="moveRow(row, 1)" :disabled="!row.canMoveUp">上移</bg-table-btn>
<bg-table-btn @click="moveRow(row, 2)" :disabled="!row.canMoveDown">下移</bg-table-btn>
</template>
</bg-table>
</div>
<!-- <bg-pagination
:page="filter.page"
:size="filter.size"
:total="tableTotal"
@change-page="changePage"
@change-size="changeSize">
</bg-pagination> -->
</div>
</div>
</div>
<el-dialog
class="dialog_box"
:title="questionEditType == 'create' ? '新增' : '编辑'"
v-model="dialogQuestionEdit"
width="614px">
<el-form ref="bgForm" :model="ruleForm" :rules="rules" label-width="80px" class="bg_form">
<el-form-item label="标题" prop="title">
<el-input
v-model="ruleForm.title"
type="text"
show-word-limit
maxlength="50"
placeholder="请输入标题"></el-input>
</el-form-item>
<el-form-item label="回复内容" prop="content">
<el-input
v-model="ruleForm.content"
type="textarea"
:rows="8"
show-word-limit
maxlength="500"
placeholder="请输入回复内容"></el-input>
</el-form-item>
</el-form>
<template #footer>
<div class="apaas_button">
<el-button type="default" @click="dialogQuestionEdit = false">取消</el-button>
<el-button type="primary" @click="handleSaveCategory(bgForm)">保存</el-button>
</div>
</template>
</el-dialog>
<el-dialog
class="dialog_box"
title="提示"
v-model="dialogDelete"
width="400px"
:before-close="
() => {
dialogDelete = false;
}
">
<div>确定要删除吗？</div>
<template #footer>
<div class="apaas_button">
<el-button type="default" @click="dialogDelete = false">取 消</el-button>
<el-button type="primary" @click="deleteData">确 定</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script setup>
import { onMounted, reactive, toRefs, ref } from "vue";
import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
import { useRoute } from "vue-router";
import axios from "@/request/http.js";
import { ElMessage } from "element-plus";
const route = useRoute();
const { id } = route.query;
const bgForm = ref(null);
const state = reactive({
category: {},
tableRows: [],
// filter: {
// page: 1,
// limit: 10,
// },
headers: [
{
label: "标题",
prop: "title",
width: 180,
},
{
label: "回复内容",
prop: "content",
},
{
label: "操作",
prop: "action",
width: 260,
fixed: "right",
},
],
questionEditType: "",
dialogQuestionEdit: false,
ruleForm: {
title: "",
content: "",
},
rules: {
title: [{ required: true, message: "请输入标题", trigger: "blur" }],
content: [{ required: true, message: "请输入回复内容", trigger: "blur" }],
},
dialogDelete: false,
actionRow: null,
});
const handleDeleteDialog = (row) => {
state.actionRow = row;
state.dialogDelete = true;
};
const deleteData = () => {
axios.delete(`/apaas/system/v5/customer/service/problem/${state.actionRow.id}`).then(({ data }) => {
if (data.code === 200) {
ElMessage.success("操作成功");
getCategoryWithQuestions();
state.dialogDelete = false;
} else {
ElMessage.error(data.data);
}
});
};
const handleQuestionUpdate = (type, row) => {
state.dialogQuestionEdit = true;
state.questionEditType = type;
if (type !== "create") {
state.actionRow = row;
state.ruleForm.title = row.problem_type;
}
};
const handleSaveCategory = async (formEl) => {
if (!formEl) return;
await formEl.validate((valid, fields) => {
if (valid) {
const isNew = state.questionEditType === "create";
axios
.post(
"/apaas/system/v5/customer/service/problem",
Object.assign(
{
problem_type_id: state.category.problem_type_id,
title: state.ruleForm.title,
content: state.ruleForm.content,
},
!isNew && { id: actionRow.id }
)
)
.then(({ data }) => {
if (data.code === 200) {
getCategoryWithQuestions();
ElMessage.success("添加成功");
state.dialogQuestionEdit = false;
state.ruleForm.title = "";
state.ruleForm.content = "";
} else {
ElMessage.error(data.data);
}
});
} else {
console.log("error submit!", fields);
}
});
};
const getCategoryList = () => {
axios.get(`/apaas/system/v5/customer/service/problem/type`).then((res) => {
if (res.data.code == 200) {
const [category] = res.data.data.filter((item) => item.id.toString() === id);
state.category = category;
} else {
ElMessage.error(res.data.data);
}
});
};
const getQuestionList = () => {
axios.get(`/apaas/system/v5/customer/service/problem/${id}`).then(({ data }) => {
state.tableRows = data.data || [];
if (state.tableRows.length > 0) {
state.tableRows.forEach((e) => {
e.canMoveUp = true;
e.canMoveDown = true;
});
state.tableRows[0].canMoveUp = false;
state.tableRows[state.tableRows.length - 1].canMoveDown = false;
}
});
};
const moveRow = (row, type) => {
let index;
state.tableRows.forEach((e, i) => {
if (e.id == row.id) {
index = i;
}
});
let nextRow;
if (type == 1) {
// 上移
nextRow = state.tableRows[index - 1];
} else {
// 下移
nextRow = state.tableRows[index + 1];
}
let params = [
{
id: row.id,
sort: nextRow.sort,
},
{
id: nextRow.id,
sort: row.sort,
},
];
axios
.post(`/apaas/system/v5/customer/service/problem/sort`, [...params])
.then((res) => {
if (res.data.code == 200) {
ElMessage.success("操作成功");
getCategoryWithQuestions();
} else {
ElMessage.error(res.data.data);
}
})
.catch((err) => {
console.log(err);
});
};
const getCategoryWithQuestions = () => {
getCategoryList();
getQuestionList();
};
onMounted(() => {
getCategoryWithQuestions();
});
const { category, tableRows, headers, ruleForm, rules, questionEditType, dialogQuestionEdit, dialogDelete } =
toRefs(state);
</script>
<style lang="scss" scoped>
.detail_container {
width: 100%;
padding: 0 24px;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
font-size: 14px;
.main_container {
padding: 40px;
flex-grow: 1;
width: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
background-color: #fff;
box-shadow: 0px 1px 4px 0px rgba(0, 7, 101, 0.15);
border-radius: 6px;
margin: 0 0 16px;
position: relative;
height: calc(100% - 62px);
.table_container {
height: calc(100% - 70px);
padding: 0 16px;
.table {
max-height: calc(100% - 64px);
}
}
}
}
.question-box {
height: 100%;
.el-button {
margin: 40px 0 8px;
}
}
:deep(.el-dialog__body) {
padding-bottom: 0;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment