9/30
1. 设备管理界面完成 2. 用户管理界面完成 3. 会话列表完成
This commit is contained in:
Zy
306
src/views/system/cskb/add.vue
Normal file
306
src/views/system/cskb/add.vue
Normal file
@@ -0,0 +1,306 @@
|
||||
<script lang="ts" setup>
|
||||
import FormItemTip from "@/components/FormItemTip/index.vue";
|
||||
import cskbEditor from '@/components/Editor/cskb.vue'
|
||||
|
||||
const router = useRouter();
|
||||
const form = ref({
|
||||
phone: "",
|
||||
username: "",
|
||||
sex: 1,
|
||||
creatDay: '',
|
||||
status: 1,
|
||||
quickAction: [],
|
||||
img: ''
|
||||
})
|
||||
|
||||
|
||||
function handleBack() {
|
||||
router.replace({
|
||||
path: "/conversation/cskbList"
|
||||
})
|
||||
}
|
||||
|
||||
function submit() {
|
||||
console.log(form.value)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="edit">
|
||||
<div class="flex justify-between">
|
||||
<pagecrumb></pagecrumb>
|
||||
<el-button plain type="info" @click="handleBack"> 返回客服列表</el-button>
|
||||
</div>
|
||||
<div class="tipBox">
|
||||
<div class="tip1">新增的知识条目保存后需要「启用」才会在 APP 端展示
|
||||
</div>
|
||||
<div class="tip2">回复内容支持有序步骤与图片，建议控制在 200 字以内，便于用户快速阅读。
|
||||
</div>
|
||||
</div>
|
||||
<!-- form -->
|
||||
<section class="commonCard">
|
||||
<div class="flex justify-between flex-items-center">
|
||||
<card-nav subTitle="配置问题标题、分类与标准回复话术" title="新增知识条目"></card-nav>
|
||||
<div class="unSave">
|
||||
<i class="square"></i>
|
||||
<span>未保存</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="formbox">
|
||||
<el-form label-position="top">
|
||||
<div class="title">
|
||||
基础信息
|
||||
</div>
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="12">
|
||||
<FormItemTip
|
||||
v-model="form.phone"
|
||||
:inputAttrs="{ placeholder: '请输入问题标题，如「连不上 Wi-Fi」', showWordLimit:true ,maxlength:30}"
|
||||
:required="true"
|
||||
label="问题标题"
|
||||
prop="phone"
|
||||
tip="建议使用用户口语化问法，便于模糊匹配"
|
||||
>
|
||||
</FormItemTip>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<FormItemTip
|
||||
v-model="form.username"
|
||||
:inputAttrs="{ placeholder: '请选择问题分类'}"
|
||||
:required="true"
|
||||
label="问题分类"
|
||||
prop="username"
|
||||
>
|
||||
</FormItemTip>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="24">
|
||||
<div>回复内容 <span>*</span></div>
|
||||
<div>
|
||||
<cskbEditor v-model="form.creatDay" :simple-toolbar="true"></cskbEditor>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="12">
|
||||
<FormItemTip
|
||||
v-model="form.status"
|
||||
:inputAttrs="{ placeholder: '', disabled: false }"
|
||||
:radioOptions="[
|
||||
{label:'启用',value:1},
|
||||
{label:'禁用',value:0},
|
||||
]"
|
||||
label="账号状态"
|
||||
prop="status"
|
||||
tip="禁用后该客服无法登录工作台，其接待中会话将转回排队"
|
||||
type="radio"
|
||||
>
|
||||
</FormItemTip>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="title">
|
||||
关联与排序
|
||||
</div>
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="12">
|
||||
<FormItemTip
|
||||
v-model="form.quickAction"
|
||||
:radio-options="[
|
||||
{label: '已解决',value:1},
|
||||
{label: '转人工',value:0}
|
||||
]"
|
||||
label="关联快捷按钮"
|
||||
prop="phone"
|
||||
tip="回复气泡下方展示的引导按钮，可多选"
|
||||
type="checkBox"
|
||||
>
|
||||
</FormItemTip>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<FormItemTip
|
||||
v-model="form.username"
|
||||
:inputAttrs="{ placeholder: '请输入排序'}"
|
||||
:required="true"
|
||||
label="排序号"
|
||||
prop="username"
|
||||
tip="决定该条目在 APP 常见问题列表中的展示顺序"
|
||||
type="inputNumber"
|
||||
>
|
||||
<template #suffix>越小越靠前</template>
|
||||
</FormItemTip>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="12">
|
||||
<FormItemTip
|
||||
label="启用状态"
|
||||
tip="关闭则保存为草稿，仅后台可见"
|
||||
type="switch"
|
||||
>
|
||||
<template #switchRight>
|
||||
<span
|
||||
style="color: rgba(17, 24, 39, 1);font-size: 13px;font-weight: bolder">启用后立即在APP端展示</span>
|
||||
</template>
|
||||
</FormItemTip>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
</section>
|
||||
<div class="footer">
|
||||
<div class="footer-tip">标题、分类与回复内容为必填项；排序号越小展示越靠前</div>
|
||||
<div>
|
||||
<el-button>取消</el-button>
|
||||
<el-button plain type="primary" @click="submit">保存并继续新增</el-button>
|
||||
<el-button type="primary" @click="submit">保存并启用</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.edit {
|
||||
overflow: auto;
|
||||
padding-bottom: 50px;
|
||||
|
||||
.tipBox {
|
||||
margin-top: 16px;
|
||||
background-color: rgba(239, 246, 255, 1);
|
||||
border: 1px solid rgba(219, 234, 254, 1);
|
||||
padding: 13px 53px;
|
||||
|
||||
.tip1 {
|
||||
line-height: 18px;
|
||||
color: rgba(30, 64, 175, 1);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.tip2 {
|
||||
line-height: 16px;
|
||||
color: rgba(59, 130, 246, 1);
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.customerInfoBox {
|
||||
margin-top: 16px;
|
||||
|
||||
.infoBox {
|
||||
.customer-Img {
|
||||
width: 73px;
|
||||
height: 72px;
|
||||
border-radius: 50%;
|
||||
margin-right: 24px;
|
||||
}
|
||||
|
||||
.userName {
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
font-weight: bold;
|
||||
color: rgba(17, 24, 39, 1);
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.circle {
|
||||
display: block;
|
||||
width: 7px;
|
||||
height: 6px;
|
||||
border-radius: 3px;
|
||||
margin-right: 6px;
|
||||
background-color: rgba(22, 163, 74, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.subInfoBox {
|
||||
line-height: 20px;
|
||||
color: rgba(107, 114, 128, 1);
|
||||
font-size: 13px;
|
||||
text-align: left;
|
||||
|
||||
.dat {
|
||||
margin: 0 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.subTitle {
|
||||
line-height: 14px;
|
||||
color: rgba(156, 163, 175, 1);
|
||||
font-size: 12px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
|
||||
.unSave {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 79px;
|
||||
height: 28px;
|
||||
background-color: rgba(248, 250, 252, 1);
|
||||
border: 1px solid rgba(241, 245, 249, 1);
|
||||
|
||||
.square {
|
||||
display: block;
|
||||
width: 8px;
|
||||
height: 6px;
|
||||
margin-right: 8px;
|
||||
background-color: rgba(148, 163, 184, 1);
|
||||
}
|
||||
|
||||
span {
|
||||
height: 14px;
|
||||
line-height: 14px;
|
||||
color: rgba(107, 114, 128, 1);
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.formbox {
|
||||
margin-top: 46px;
|
||||
|
||||
.title {
|
||||
line-height: 16px;
|
||||
color: rgba(55, 65, 81, 1);
|
||||
font-size: 13px;
|
||||
text-align: left;
|
||||
margin: 24px 0;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
margin-top: 27px;
|
||||
text-align: right;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.footer-tip {
|
||||
line-height: 14px;
|
||||
color: rgba(107, 114, 128, 1);
|
||||
font-size: 12px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&:deep(.el-button) {
|
||||
padding: 14px 25px;
|
||||
min-height: 44px;
|
||||
border-radius: 0;
|
||||
border: 1px solid rgba(226, 232, 240, 1);
|
||||
|
||||
|
||||
&.el-button--primary.is-plain {
|
||||
color: #2563EB;
|
||||
}
|
||||
}
|
||||
|
||||
.el-button + .el-button {
|
||||
margin-left: 21px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user