123 lines
3.9 KiB
Vue
123 lines
3.9 KiB
Vue
<template>
|
|
<!-- style="margin-bottom: 16px" -->
|
|
|
|
<div class="table-box">
|
|
<div style="padding-bottom: 16px">
|
|
<el-button @click="handleReset"> 重置 </el-button>
|
|
<el-button type="primary" @click="handleSubmit"> 提交 </el-button>
|
|
</div>
|
|
<div class="card table-main">
|
|
<el-tabs v-model="activeName" class="demo-tabs">
|
|
<el-tab-pane label="基本信息" name="basicInfo">
|
|
<rulesForm
|
|
:ruleForm="dataStore.editRuleForm"
|
|
:formData="dataStore.editFormData"
|
|
:rules="dataStore.rules"
|
|
ref="formRef"
|
|
>
|
|
</rulesForm>
|
|
</el-tab-pane>
|
|
|
|
<el-tab-pane label="问答详细" name="third">
|
|
<div style="width: 1280px; margin: 0 auto">
|
|
<Editor v-model:content="dataStore.editRuleForm.answer" ref="editorRef" />
|
|
</div>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts" name="QAManagementListEdit">
|
|
import rulesForm from "@/components/rulesForm/index.vue";
|
|
import { getQAListDetailsApi, getQAListEditUpApi, getQAListSaveApi } from "@/api/modules/QAList";
|
|
import { ref, reactive } from "vue";
|
|
// import { convertSpanToDiv } from "@/utils/convertSpanToDiv";
|
|
import Editor from "@/components/Editor/index.vue";
|
|
import { useMsg } from "@/hooks/useMsg";
|
|
import { EDIT_FORM_DATA, EDIT_RULE_FORM, RULES } from "./constant/index";
|
|
import { cloneDeep } from "lodash-es";
|
|
const $route = useRoute();
|
|
const activeName = ref("basicInfo");
|
|
//数据集合
|
|
const dataStore = reactive<any>({
|
|
// value: "",
|
|
editRuleForm: cloneDeep(EDIT_RULE_FORM),
|
|
editFormData: cloneDeep(EDIT_FORM_DATA),
|
|
rules: RULES
|
|
});
|
|
const formRef: any = ref(null);
|
|
const editorRef = ref<any>(null);
|
|
//详情
|
|
const getQAListDetails = async () => {
|
|
let id = $route.query.id;
|
|
if (!id) {
|
|
return;
|
|
}
|
|
const result = await getQAListDetailsApi(id);
|
|
if (result?.code === 0) {
|
|
const { data } = result;
|
|
//这里是传给基本信息组件的表单数据
|
|
dataStore.editRuleForm = cloneDeep(data);
|
|
if (!data.answer) {
|
|
editorRef?.value?.clearEditor();
|
|
}
|
|
// dataStore.editRuleForm.answer = convertSpanToDiv(dataStore.editRuleForm.answer);
|
|
|
|
dataStore.value = data.answer;
|
|
}
|
|
};
|
|
getQAListDetails();
|
|
|
|
//更新
|
|
const getQAListEditUp = async () => {
|
|
// dataStore.editRuleForm.answer = dataStore.value;
|
|
const result: any = await getQAListEditUpApi(dataStore.editRuleForm);
|
|
if (result?.code === 0) {
|
|
useMsg("success", result?.msg);
|
|
// dataStore.editRuleForm = result?.data;
|
|
}
|
|
};
|
|
//新增 getQAListSaveApi
|
|
const getQAListSave = async () => {
|
|
// dataStore.editRuleForm.answer = dataStore.value;
|
|
const result: any = await getQAListSaveApi(dataStore.editRuleForm);
|
|
if (result?.code === 0) {
|
|
useMsg("success", result?.msg);
|
|
}
|
|
};
|
|
const handleReset = () => {
|
|
if ($route.query.id) {
|
|
getQAListDetails();
|
|
} else {
|
|
resetFields();
|
|
}
|
|
};
|
|
//重置验证状态
|
|
const resetFields = () => {
|
|
if (!formRef.value!.ruleFormRef) return;
|
|
formRef!.value!.ruleFormRef.resetFields();
|
|
editorRef?.value?.clearEditor();
|
|
for (let key in dataStore.editRuleForm) {
|
|
dataStore.editRuleForm[key] = "";
|
|
}
|
|
dataStore.editRuleForm.sort = 0;
|
|
// dataStore.value = "";
|
|
};
|
|
|
|
const handleSubmit = () => {
|
|
if (!formRef.value!.ruleFormRef) return;
|
|
formRef!.value!.ruleFormRef!.validate((valid: any) => {
|
|
if (valid) {
|
|
$route.query.id ? getQAListEditUp() : getQAListSave();
|
|
console.log("submit!");
|
|
} else {
|
|
console.log("error submit!");
|
|
return false;
|
|
}
|
|
});
|
|
};
|
|
</script>
|
|
|
|
<style scoped></style>
|