Skip to content

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

问答中心的管理后台的相关功能开发

parent aa27415c
Show whitespace changes
Inline Side-by-side
Showing with 928 additions and 0 deletions
src/page/main/qa-manage/answer-list/index.vue 0 → 100644
View file @ bb21610a
<template>
<div class="page_container">
<bg-breadcrumb></bg-breadcrumb>
<div class="main_container">
<bg-filter-group
@search="changeSearch"
v-model="filter.search"
placeholder="请输入问题标题、问题内容、回答内容、回复人">
<template v-slot:left_action>
<div class="apaas_button">
<el-button type="primary" @click="openDeleteTipDialog(2)"> 批量删除 </el-button>
<span class="sleceted_tip"
>已选<span class="num">{{ selectedNum }}</span
>项</span
>
<span class="clean" @click="cleanSelected">清空</span>
</div>
</template>
<template v-slot:filter_group>
<div class="left-filter filter_list">
<div class="filter_item">
<span class="filter_title">问题对象</span>
<el-select v-model="filter.question_obj" placeholder="请选择" style="width: 300px">
<el-option
v-for="(item, index) in questionObjOption"
:key="'questionObj' + index"
:label="item.name"
:value="item.value">
</el-option>
</el-select>
</div>
<div class="filter_item">
<span class="filter_title">回复时间</span>
<el-date-picker
v-model="filter.time"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="YYYY-MM-DD"
style="width: 300px" />
</div>
</div>
<div class="right-action apaas_button">
<el-button type="primary" @click="filterAction"> 查询 </el-button>
<el-button type="default" @click="filterClear"> 重置 </el-button>
</div>
</template>
</bg-filter-group>
<div class="table_container">
<bg-table
ref="rulesTable"
:headers="headers"
:rows="tableRows"
:stripe="true"
select
@selectAc="selectRows">
<template v-slot:title="{ row }">
<a
class="can_click_text"
:href="`/apaas/knowledge/ui/#/qa-center/detail?id=${row.id}`"
target="_blank"
>{{ row.title }}</a
>
</template>
<template v-slot:question_obj="{ row }">
<span>{{ questionObjArr[row.question_obj] }}</span>
</template>
<template v-slot:action="{ row }">
<bg-table-btn @click="openDeleteTipDialog(1, row)">删除</bg-table-btn>
</template>
</bg-table>
<bg-pagination
:page="filter.page"
:size="filter.limit"
:total="tableTotal"
@change-page="changePage"
@change-size="changeSize">
</bg-pagination>
</div>
</div>
<el-dialog class="dialog_box" title="提示" v-model="dialogDeleteTips" width="400px">
<div class="dialog-alert">
<bg-icon
class=""
icon="#bg-ic-s-circle-warning" />删除后，提问及答复内容均被删除且不可恢复， 确定删除吗？
</div>
<template v-slot:footer>
<div class="apaas_button">
<el-button type="default" @click="dialogDeleteTips = false">取 消</el-button>
<el-button type="primary" @click="openDeleteDialog">确 定</el-button>
</div>
</template>
</el-dialog>
<el-dialog
class="dialog_box"
:title="deleteDialogConfig.title"
v-model="dialogDelete"
width="400px">
<!-- <div style="text-align: center">
{{ deleteDialogConfig.tips }}
</div> -->
<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="80px">
<el-form-item label="申请理由" prop="delete_reason">
<el-input
v-model.trim="ruleForm.delete_reason"
type="textarea"
placeholder="请输入申请理由" />
</el-form-item>
</el-form>
<template v-slot:footer>
<div class="apaas_button">
<el-button type="default" @click="dialogDelete = false">取 消</el-button>
<el-button type="primary" @click="confimDelete">确 定</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script setup>
import { reactive, toRefs, onBeforeMount, ref } from "vue";
import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
import axios from "@/request/http.js";
import { ElMessage } from "element-plus";
const ruleFormRef = ref();
const rulesTable = ref();
const state = reactive({
filter: {
search: "",
question_obj: "0",
time: [],
page: 1,
limit: 10,
},
headers: [
{
label: "回答内容",
prop: "answer_content",
},
{
label: "问题标题",
prop: "title",
},
{
label: "问题内容",
prop: "content",
},
{
label: "问题对象",
prop: "question_obj",
width: 100,
},
{
label: "答复数",
prop: "comments",
width: 70,
},
{
label: "回复人",
prop: "answer_user",
},
{
label: "回复时间",
prop: "created_time",
width: 200,
},
{
label: "操作",
prop: "action",
width: 80,
fixed: "right",
},
],
tableRows: [],
tableTotal: 0,
selectedNum: 0,
actionRow: {},
selection: [],
dialogDeleteTips: false,
dialogDelete: false,
deleteDialogConfig: {
title: "删除",
idList: [],
tips: "确定要删除当前行数据吗？",
},
questionObjOption: [
{
name: "全部",
value: "0",
},
{
name: "能力",
value: "1",
},
{
name: "应用",
value: "2",
},
{
name: "平台",
value: "3",
},
],
ruleForm: {
delete_reason: "",
},
rules: {
delete_reason: [
{
required: true,
message: "请输入删除理由",
trigger: "blur",
},
{
max: 50,
message: "最多50个字符",
trigger: "blur",
},
],
},
});
const questionObjArr = state.questionObjOption.map((item) => item.name);
const changeSearch = (val) => {
state.filter.search = val;
changePage(1);
}; // 关键字
const changePage = (page) => {
state.filter.page = page;
getTableRows();
}; // 改变页码
const changeSize = (size) => {
state.filter.limit = size;
changePage(1);
}; // 改变每页条数
const filterAction = () => {
changePage(1);
}; // 高级搜索中查询
const filterClear = () => {
state.filter = {
search: "",
page: 1,
limit: 10,
time: [],
};
changePage(1);
}; // 高级搜索中重置
const getTableRows = () => {
let params = { ...state.filter };
params.start_at = params.time ? params.time[0] || "" : "";
params.end_at = params.time ? params.time[1] || "" : "";
delete params.time;
axios
.get(`/apaas/knowledge/v5/question/manage/answers/list`, {
params,
})
.then((res) => {
if (res.data.code == 200) {
state.tableRows = res.data.data || [];
state.tableTotal = res.data.total;
} else {
ElMessage.error(res.data.data);
}
});
}; // 获取表格数据
const selectRows = (data) => {
state.selectedNum = data.allLength;
state.selection = data.selection;
};
const cleanSelected = () => {
rulesTable.value.clearTable();
}; //清空
const openDeleteTipDialog = (type, row) => {
state.dialogDeleteTips = true;
state.actionRow = row;
state.deleteType = type;
};
//打开删除弹窗
const openDeleteDialog = () => {
if (state.deleteType === 2) {
const res = rulesTable.value.dealSelectData();
const list = Object.values(res);
if (list.length === 0) return ElMessage.warning("请选择要删除的数据");
state.dialogDelete = true;
const idList = list.map((item) => item.id);
state.deleteDialogConfig = { title: "批量删除", idList, tips: "确定要删除所选数据吗？" };
return;
}
const idList = [state.actionRow.id];
state.dialogDelete = true;
state.deleteDialogConfig = {
title: "删除",
idList: idList,
tips: "确定要删除当前行数据吗？",
};
};
//确定删除
const confimDelete = () => {
ruleFormRef.value.validate((valid) => {
if (valid) {
const data = {
ids: state.deleteDialogConfig.idList.join(","),
delete_reason: state.ruleForm.delete_reason,
};
axios
.delete("/apaas/knowledge/v5/question/manage/answer", {
data,
})
.then((res) => {
if (res.data.code == 200) {
ElMessage.success("删除成功");
changePage(1);
} else {
ElMessage.error(res.data.data);
}
})
.finally(() => {
ruleFormRef.value.resetFields();
state.dialogDeleteTips = false;
state.dialogDelete = false;
});
}
});
return;
};
const {
filter,
headers,
tableRows,
tableTotal,
selectedNum,
questionObjOption,
dialogDeleteTips,
dialogDelete,
deleteDialogConfig,
ruleForm,
rules,
} = toRefs(state);
onBeforeMount(() => {
getTableRows();
});
</script>
<style lang="scss" scoped>
.page_container {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
width: 100%;
padding: 0 24px;
min-height: 100%;
.main_container {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
flex-grow: 1;
width: 100%;
background-color: #fff;
box-shadow: 0px 1px 4px 0px rgba(0, 7, 101, 0.15);
border-radius: 6px;
padding: 0 0 16px 0;
margin-bottom: 16px;
position: relative;
.sleceted_tip {
margin: 0 24px 0 40px;
vertical-align: middle;
font-size: 14px;
color: #404a62;
.num {
margin: 0 3px 0 3px;
font-weight: 600;
color: #202531;
}
}
.clean {
vertical-align: middle;
font-size: 14px;
color: #3759be;
cursor: pointer;
}
.filter-group {
.left-filter {
flex: 1;
display: flex;
justify-content: start;
flex-wrap: wrap;
.filter_item {
display: flex;
align-items: center;
.filter_title {
width: 84px;
white-space: pre-wrap;
font-weight: normal;
}
}
}
.right-action {
width: 144px;
padding-bottom: 16px;
.el-button {
width: 64px;
}
}
}
.table_container {
padding: 0 16px;
.el-table {
flex: 1;
.under_line {
text-decoration: underline;
}
}
}
}
:deep() .dialog_box_detail {
.el-dialog__body {
padding: 0 0 18px 0;
height: 580px;
}
.form_filter {
display: flex;
justify-content: space-between;
align-items: center;
height: 69px;
border-bottom: 1px solid #e6e9ef;
.right {
margin-right: 16px;
.el-button {
width: 64px;
&:last-child {
margin-left: 16px;
}
}
}
}
.table_content {
padding: 0 16px;
}
}
}
.dialog-alert {
text-align: left;
line-height: 24px;
.bg-icon {
margin-right: 8px;
}
}
</style>
src/page/main/qa-manage/question-list/index.vue 0 → 100644
View file @ bb21610a
<template>
<div class="page_container">
<bg-breadcrumb></bg-breadcrumb>
<div class="main_container">
<bg-filter-group
@search="changeSearch"
v-model="filter.search"
placeholder="请输入问题标题、问题内容、发布人">
<template v-slot:left_action>
<div class="apaas_button">
<el-button type="primary" @click="openDeleteTipDialog(2)"> 批量删除 </el-button>
<span class="sleceted_tip"
>已选<span class="num">{{ selectedNum }}</span
>项</span
>
<span class="clean" @click="cleanSelected">清空</span>
</div>
</template>
<template v-slot:filter_group>
<div class="left-filter filter_list">
<div class="filter_item">
<span class="filter_title">问题对象</span>
<el-select v-model="filter.question_obj" placeholder="请选择" style="width: 300px">
<el-option
v-for="(item, index) in questionObjOption"
:key="'questionObj' + index"
:label="item.name"
:value="item.value">
</el-option>
</el-select>
</div>
<div class="filter_item">
<span class="filter_title">发布时间</span>
<el-date-picker
v-model="filter.time"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="YYYY-MM-DD"
style="width: 300px" />
</div>
</div>
<div class="right-action apaas_button">
<el-button type="primary" @click="filterAction"> 查询 </el-button>
<el-button type="default" @click="filterClear"> 重置 </el-button>
</div>
</template>
</bg-filter-group>
<div class="table_container">
<bg-table
ref="rulesTable"
:headers="headers"
:rows="tableRows"
:stripe="true"
select
@selectAc="selectRows">
<template v-slot:title="{ row }">
<a
class="can_click_text"
:href="`/apaas/knowledge/ui/#/qa-center/detail?id=${row.id}`"
target="_blank"
>{{ row.title }}</a
>
</template>
<template v-slot:question_obj="{ row }">
<span>{{ questionObjArr[row.question_obj] }}</span>
</template>
<template v-slot:action="{ row }">
<bg-table-btn @click="openDeleteTipDialog(1, row)">删除</bg-table-btn>
</template>
</bg-table>
<bg-pagination
:page="filter.page"
:size="filter.limit"
:total="tableTotal"
@change-page="changePage"
@change-size="changeSize">
</bg-pagination>
</div>
</div>
<el-dialog class="dialog_box" title="提示" v-model="dialogDeleteTips" width="400px">
<div class="dialog-alert">
<bg-icon
class=""
icon="#bg-ic-s-circle-warning" />删除后，提问及答复内容均被删除且不可恢复， 确定删除吗？
</div>
<template v-slot:footer>
<div class="apaas_button">
<el-button type="default" @click="dialogDeleteTips = false">取 消</el-button>
<el-button type="primary" @click="openDeleteDialog">确 定</el-button>
</div>
</template>
</el-dialog>
<el-dialog
class="dialog_box"
:title="deleteDialogConfig.title"
v-model="dialogDelete"
width="400px">
<!-- <div style="text-align: center">
{{ deleteDialogConfig.tips }}
</div> -->
<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="80px">
<el-form-item label="申请理由" prop="delete_reason">
<el-input
v-model.trim="ruleForm.delete_reason"
type="textarea"
placeholder="请输入申请理由" />
</el-form-item>
</el-form>
<template v-slot:footer>
<div class="apaas_button">
<el-button type="default" @click="dialogDelete = false">取 消</el-button>
<el-button type="primary" @click="confimDelete">确 定</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script setup>
import { reactive, toRefs, onBeforeMount, ref } from "vue";
import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
import axios from "@/request/http.js";
import { ElMessage } from "element-plus";
const ruleFormRef = ref();
const rulesTable = ref();
const state = reactive({
filter: {
search: "",
question_obj: "0",
time: [],
page: 1,
limit: 10,
},
headers: [
{
label: "问题标题",
prop: "title",
},
{
label: "问题内容",
prop: "content",
},
{
label: "问题对象",
prop: "question_obj",
width: 100,
},
{
label: "答复数",
prop: "comments",
width: 70,
},
{
label: "发布人",
prop: "created_by",
},
{
label: "发布时间",
prop: "created_time",
width: 200,
},
{
label: "操作",
prop: "action",
width: 80,
fixed: "right",
},
],
tableRows: [],
tableTotal: 0,
selectedNum: 0,
actionRow: {},
selection: [],
dialogDeleteTips: false,
dialogDelete: false,
deleteDialogConfig: {
title: "删除",
idList: [],
tips: "确定要删除当前行数据吗？",
},
questionObjOption: [
{
name: "全部",
value: "0",
},
{
name: "能力",
value: "1",
},
{
name: "应用",
value: "2",
},
{
name: "平台",
value: "3",
},
],
ruleForm: {
delete_reason: "",
},
rules: {
delete_reason: [
{
required: true,
message: "请输入删除理由",
trigger: "blur",
},
{
max: 50,
message: "最多50个字符",
trigger: "blur",
},
],
},
});
const questionObjArr = state.questionObjOption.map((item) => item.name);
const changeSearch = (val) => {
state.filter.search = val;
changePage(1);
}; // 关键字
const changePage = (page) => {
state.filter.page = page;
getTableRows();
}; // 改变页码
const changeSize = (size) => {
state.filter.limit = size;
changePage(1);
}; // 改变每页条数
const filterAction = () => {
changePage(1);
}; // 高级搜索中查询
const filterClear = () => {
state.filter = {
search: "",
page: 1,
limit: 10,
time: [],
};
changePage(1);
}; // 高级搜索中重置
const getTableRows = () => {
let params = { ...state.filter };
params.start_at = params.time ? params.time[0] || "" : "";
params.end_at = params.time ? params.time[1] || "" : "";
delete params.time;
axios
.get(`/apaas/knowledge/v5/question/manage/ask/list`, {
params,
})
.then((res) => {
if (res.data.code == 200) {
state.tableRows = res.data.data || [];
state.tableTotal = res.data.total;
} else {
ElMessage.error(res.data.data);
}
});
}; // 获取表格数据
const selectRows = (data) => {
state.selectedNum = data.allLength;
state.selection = data.selection;
};
const cleanSelected = () => {
rulesTable.value.clearTable();
}; //清空
const openDeleteTipDialog = (type, row) => {
state.dialogDeleteTips = true;
state.actionRow = row;
state.deleteType = type;
};
//打开删除弹窗
const openDeleteDialog = () => {
if (state.deleteType === 2) {
const res = rulesTable.value.dealSelectData();
const list = Object.values(res);
if (list.length === 0) return ElMessage.warning("请选择要删除的数据");
state.dialogDelete = true;
const idList = list.map((item) => item.id);
state.deleteDialogConfig = { title: "批量删除", idList, tips: "确定要删除所选数据吗？" };
return;
}
const idList = [state.actionRow.id];
state.dialogDelete = true;
state.deleteDialogConfig = {
title: "删除",
idList: idList,
tips: "确定要删除当前行数据吗？",
};
};
//确定删除
const confimDelete = () => {
ruleFormRef.value.validate((valid) => {
if (valid) {
const data = {
ids: state.deleteDialogConfig.idList.join(","),
delete_reason: state.ruleForm.delete_reason,
};
axios
.delete("/apaas/knowledge/v5/question/manage/ask", {
data,
})
.then((res) => {
if (res.data.code == 200) {
ElMessage.success("删除成功");
changePage(1);
} else {
ElMessage.error(res.data.data);
}
})
.finally(() => {
ruleFormRef.value.resetFields();
state.dialogDeleteTips = false;
state.dialogDelete = false;
});
}
});
return;
};
const {
filter,
headers,
tableRows,
tableTotal,
selectedNum,
questionObjOption,
dialogDeleteTips,
dialogDelete,
deleteDialogConfig,
ruleForm,
rules,
} = toRefs(state);
onBeforeMount(() => {
getTableRows();
});
</script>
<style lang="scss" scoped>
.page_container {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
width: 100%;
padding: 0 24px;
min-height: 100%;
.main_container {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
flex-grow: 1;
width: 100%;
background-color: #fff;
box-shadow: 0px 1px 4px 0px rgba(0, 7, 101, 0.15);
border-radius: 6px;
padding: 0 0 16px 0;
margin-bottom: 16px;
position: relative;
.sleceted_tip {
margin: 0 24px 0 40px;
vertical-align: middle;
font-size: 14px;
color: #404a62;
.num {
margin: 0 3px 0 3px;
font-weight: 600;
color: #202531;
}
}
.clean {
vertical-align: middle;
font-size: 14px;
color: #3759be;
cursor: pointer;
}
.filter-group {
.left-filter {
flex: 1;
display: flex;
justify-content: start;
flex-wrap: wrap;
.filter_item {
display: flex;
align-items: center;
.filter_title {
width: 84px;
white-space: pre-wrap;
font-weight: normal;
}
}
}
.right-action {
width: 144px;
padding-bottom: 16px;
.el-button {
width: 64px;
}
}
}
.table_container {
padding: 0 16px;
.el-table {
flex: 1;
.under_line {
text-decoration: underline;
}
}
}
}
:deep() .dialog_box_detail {
.el-dialog__body {
padding: 0 0 18px 0;
height: 580px;
}
.form_filter {
display: flex;
justify-content: space-between;
align-items: center;
height: 69px;
border-bottom: 1px solid #e6e9ef;
.right {
margin-right: 16px;
.el-button {
width: 64px;
&:last-child {
margin-left: 16px;
}
}
}
}
.table_content {
padding: 0 16px;
}
}
}
.dialog-alert {
text-align: left;
line-height: 24px;
.bg-icon {
margin-right: 8px;
}
}
</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