<template>
|
<div>
|
<!-- Drawer抽屉 -->
|
<Drawer
|
:title="title"
|
v-model="visible"
|
width="630"
|
draggable
|
:mask-closable="type == '0'"
|
>
|
<div :style="{ maxHeight: maxHeight }" class="drawer-content">
|
<Form
|
ref="form"
|
:model="form"
|
:rules="formValidate"
|
label-position="top"
|
>
|
<Row :gutter="32">
|
<Col span="24">
|
<FormItem label="问题标题" prop="title">
|
<Input v-model="form.title" clearable />
|
</FormItem>
|
</Col>
|
</Row>
|
<Row :gutter="32">
|
<Col span="24">
|
<FormItem
|
label="关键词（额外触发词 若问题中已包含可无需填写 多个以任意符号分隔）"
|
prop="keywords"
|
>
|
<Input
|
v-model="form.keywords"
|
type="textarea"
|
:rows="5"
|
clearable
|
/>
|
</FormItem>
|
</Col>
|
</Row>
|
<Row :gutter="32">
|
<Col span="24">
|
<FormItem label="回答" prop="content" class="form-editor">
|
<editor
|
ref="editor"
|
v-model="form.content"
|
height="200"
|
></editor>
|
</FormItem>
|
</Col>
|
</Row>
|
<Row :gutter="32">
|
<Col span="24">
|
<FormItem
|
label="权重值（值越大越靠前，支持小数）"
|
prop="sortOrder"
|
>
|
<InputNumber
|
v-model="form.sortOrder"
|
style="width: 100%"
|
></InputNumber>
|
</FormItem>
|
</Col>
|
</Row>
|
<Row :gutter="32">
|
<Col span="24">
|
<FormItem label="热门回答" prop="hot">
|
<div style="display: flex; align-items: center">
|
<i-switch v-model="form.hot">
|
<span slot="open">是</span>
|
<span slot="close">否</span>
|
</i-switch>
|
<Tooltip
|
content="开启后将在“猜你想问”中显示热门hot标记"
|
placement="right"
|
transfer
|
max-width="280"
|
style="display: inline-block !important"
|
>
|
<Icon
|
type="md-help-circle"
|
size="20"
|
color="#c5c5c5"
|
style="margin-left: 10px; cursor: pointer"
|
/>
|
</Tooltip>
|
</div>
|
</FormItem>
|
</Col>
|
</Row>
|
<Row :gutter="32">
|
<Col span="24">
|
<FormItem label="启用反馈（允许赞踩）" prop="evaluable">
|
<i-switch v-model="form.evaluable">
|
<span slot="open">开</span>
|
<span slot="close">关</span>
|
</i-switch>
|
</FormItem>
|
</Col>
|
</Row>
|
<Row :gutter="32" v-show="form.evaluable">
|
<Col span="24">
|
<FormItem label="点赞数" prop="good">
|
<InputNumber
|
v-model="form.good"
|
style="width: 100%"
|
></InputNumber>
|
</FormItem>
|
</Col>
|
</Row>
|
<Row :gutter="32" v-show="form.evaluable">
|
<Col span="24">
|
<FormItem label="踩数" prop="bad">
|
<InputNumber
|
v-model="form.bad"
|
style="width: 100%"
|
></InputNumber>
|
</FormItem>
|
</Col>
|
</Row>
|
</Form>
|
</div>
|
<div class="drawer-footer br" v-show="type != '0'">
|
<Button type="primary" :loading="submitLoading" @click="submit"
|
>提交</Button
|
>
|
<Button @click="visible = false">取消</Button>
|
</div>
|
</Drawer>
|
</div>
|
</template>
|
|
<script>
|
// 根据你的实际请求api.js位置路径修改
|
import { addReply, editReply } from "@/api/autoChat";
|
import editor from "@/views/my-components/xboot/editor";
|
export default {
|
name: "addEdit",
|
components: {
|
editor,
|
},
|
props: {
|
value: {
|
type: Boolean,
|
default: false,
|
},
|
data: {
|
type: Object,
|
},
|
type: {
|
type: String,
|
default: "0",
|
},
|
},
|
data() {
|
return {
|
visible: this.value,
|
title: "",
|
submitLoading: false,
|
maxHeight: 510,
|
form: {
|
// 添加或编辑表单对象初始化数据
|
title: "",
|
keywords: "",
|
content: "",
|
good: 0,
|
bad: 0,
|
sortOrder: 0,
|
hot: false,
|
evaluable: true,
|
},
|
// 表单验证规则
|
formValidate: {
|
title: [{ required: true, message: "不能为空", trigger: "change" }],
|
content: [{ required: true, message: "不能为空", trigger: "change" }],
|
},
|
};
|
},
|
methods: {
|
init() {},
|
submit() {
|
this.$refs.form.validate((valid) => {
|
if (valid) {
|
if (this.type == "1") {
|
// 编辑
|
this.submitLoading = true;
|
editReply(this.form).then((res) => {
|
this.submitLoading = false;
|
if (res.success) {
|
this.$Message.success("操作成功");
|
this.$emit("on-submit", true);
|
this.visible = false;
|
}
|
});
|
} else {
|
// 添加
|
this.submitLoading = true;
|
addReply(this.form).then((res) => {
|
this.submitLoading = false;
|
if (res.success) {
|
this.$Message.success("操作成功");
|
this.$emit("on-submit", true);
|
this.visible = false;
|
}
|
});
|
}
|
}
|
});
|
},
|
setCurrentValue(value) {
|
if (value === this.visible) {
|
return;
|
}
|
if (this.type == "1") {
|
this.title = "编辑";
|
this.maxHeight =
|
Number(document.documentElement.clientHeight - 121) + "px";
|
} else if (this.type == "2") {
|
this.title = "添加";
|
this.maxHeight =
|
Number(document.documentElement.clientHeight - 121) + "px";
|
} else {
|
this.title = "详细信息";
|
this.maxHeight = "100%";
|
}
|
// 清空数据
|
this.$refs.form.resetFields();
|
if (this.type == "0" || this.type == "1") {
|
// 回显数据处理
|
this.form = this.data;
|
} else {
|
// 添加
|
delete this.form.id;
|
}
|
this.visible = value;
|
},
|
},
|
watch: {
|
value(val) {
|
this.setCurrentValue(val);
|
},
|
visible(value) {
|
this.$emit("input", value);
|
},
|
},
|
mounted() {
|
this.init();
|
},
|
};
|
</script>
|
|
<style lang="less">
|
@import "@/styles/drawer-common.less";
|
</style>
|
