391 lines
11 KiB
Plaintext
391 lines
11 KiB
Plaintext
<!-- 外部情报 -->
|
|
<script setup lang="ts">
|
|
import Vue3Tinymce from '@jsdawn/vue3-tinymce';
|
|
import HomeHead from "@/views/home/components/HomeHead.vue";
|
|
// import HomeHeadSearch from '@/views/home/components/HomeHeadSearch.vue'
|
|
import { useDate } from "@/views/home/hooks/useDate";
|
|
import {
|
|
NModal,
|
|
NForm,
|
|
NButton,
|
|
NFormItem,
|
|
NInput,
|
|
NRadio,
|
|
NSelect,
|
|
NSpace,
|
|
NRadioGroup,
|
|
useMessage,
|
|
FormInst,
|
|
} from "naive-ui";
|
|
import { saveArticle, trendsDetail } from "@/api/daikin/base";
|
|
import Editor from "../components/TinyECE.vue";
|
|
import { useUserStore } from "@/stores/modules/user";
|
|
import { useRoute } from "vue-router";
|
|
const { day, week } = useDate();
|
|
const { push } = useRouter();
|
|
const store = useUserStore();
|
|
let route = useRoute();
|
|
let cate = ref(1);
|
|
const fileList = ref<[]>();
|
|
const editorContent = ref("");
|
|
const formRef = ref<FormInst | null>(null);
|
|
const message = useMessage();
|
|
|
|
const formValue: any = ref({
|
|
type: "1",
|
|
cate: "1",
|
|
title: "",
|
|
tag: "",
|
|
source: "",
|
|
content: "",
|
|
reviewSource: "2",
|
|
});
|
|
|
|
if (route.query.id) {
|
|
trendsDetail(route.query.id).then((res) => {
|
|
let data = res.data;
|
|
console.log(res);
|
|
formValue.value = {
|
|
type: data.type,
|
|
cate: data.cate,
|
|
title: data.title,
|
|
tag: data.tag,
|
|
source: data.source,
|
|
content: unescapeHTML(data.content),
|
|
reviewSource: data.reviewSource,
|
|
};
|
|
editorContent.value = unescapeHTML(data.content);
|
|
|
|
if (data.type === 2) {
|
|
cate.value = 3;
|
|
} else {
|
|
}
|
|
console.log(cate.value, data.cate);
|
|
rules = {
|
|
title: {
|
|
required: false,
|
|
message: "请输入标题",
|
|
trigger: "blur",
|
|
},
|
|
tag: {
|
|
required: true,
|
|
message: "请输入标题",
|
|
trigger: "blur",
|
|
},
|
|
|
|
content: {
|
|
required: false,
|
|
message: "请输入内容",
|
|
trigger: "blur",
|
|
},
|
|
};
|
|
});
|
|
}
|
|
let rules: any = {
|
|
// cate: {
|
|
// required: true,
|
|
// message: '请选择类型',
|
|
// trigger: 'blur'
|
|
// },
|
|
title: {
|
|
required: false,
|
|
message: "请输入标题",
|
|
trigger: "blur",
|
|
},
|
|
tag: {
|
|
required: true,
|
|
message: "请输入标题",
|
|
trigger: "blur",
|
|
},
|
|
|
|
content: {
|
|
required: false,
|
|
message: "请输入内容",
|
|
trigger: "blur",
|
|
},
|
|
};
|
|
|
|
function change(i: any) {
|
|
// console.log(i)
|
|
cate.value = i;
|
|
// console.log(formValue.cate)
|
|
formValue.cate = i;
|
|
// console.log(formValue.cate)
|
|
}
|
|
function sure(e: MouseEvent) {
|
|
e.preventDefault();
|
|
formRef.value?.validate((errors) => {
|
|
if (!errors) {
|
|
formValue.value.cate = cate.value;
|
|
if (!formValue.value.type) {
|
|
message.success("请选择类型");
|
|
return;
|
|
}
|
|
// console.log('我草555555', editorContent.value);
|
|
save();
|
|
} else {
|
|
console.log(errors);
|
|
message.error("请输入完整");
|
|
}
|
|
});
|
|
}
|
|
|
|
function escapeHTML(html: string): string {
|
|
const tempElement = document.createElement("div");
|
|
tempElement.textContent = html;
|
|
return tempElement.innerHTML;
|
|
}
|
|
function unescapeHTML(html: string) {
|
|
const doc = new DOMParser().parseFromString(html, "text/html");
|
|
return doc.documentElement.textContent;
|
|
}
|
|
const header = { token: store.user.token };
|
|
// console.log(store.user.token)
|
|
|
|
const dialogImageUrl = ref("");
|
|
const dialogVisible = ref(false);
|
|
|
|
const handleRemove: UploadProps["onRemove"] = (
|
|
uploadFile: any,
|
|
uploadFiles: any
|
|
) => {
|
|
// console.log(dialogImageUrl,dialogVisible)
|
|
};
|
|
|
|
const handlePictureCardPreview: UploadProps["onPreview"] = (uploadFile: {
|
|
url: string;
|
|
}) => {
|
|
dialogImageUrl.value = uploadFile.url!;
|
|
dialogVisible.value = true;
|
|
// console.log(dialogImageUrl.value)
|
|
};
|
|
async function save() {
|
|
const cont = editorContent.value;
|
|
const content = escapeHTML(cont);
|
|
const reviewSource = 2;
|
|
// console.log(fileList.value)
|
|
let bannerImg;
|
|
if (fileList.value && fileList.value.length > 0) {
|
|
bannerImg = fileList.value.map((item) => item.response.url).join("");
|
|
} else {
|
|
}
|
|
console.log(formValue.value);
|
|
|
|
const { title, tag, source, cate, type } = formValue.value;
|
|
console.log(cate);
|
|
const { msg, code } = await saveArticle({
|
|
title,
|
|
tag: "",
|
|
reviewSource,
|
|
source,
|
|
cate: formValue.cate || formValue.value.cate,
|
|
type,
|
|
content,
|
|
bannerImg,
|
|
});
|
|
if (code === 200) {
|
|
message.success("新增成功");
|
|
// window.location.reload();
|
|
history.back();
|
|
} else {
|
|
message.success(msg);
|
|
}
|
|
}
|
|
|
|
// 获取子组件传过来的值
|
|
const handleChild = (data: string) => {
|
|
editorContent.value = data;
|
|
};
|
|
|
|
const radios = (e: any) => {
|
|
console.log(e.srcElement.value);
|
|
if (e.srcElement.value === "1") {
|
|
cate.value = 1;
|
|
} else {
|
|
cate.value = 4;
|
|
}
|
|
};
|
|
const showModal = ref(false);
|
|
</script>
|
|
|
|
<template>
|
|
<HomeHead class="top">
|
|
<template #content>
|
|
<!-- <HomeHeadSearch /> -->
|
|
</template>
|
|
</HomeHead>
|
|
<div class="h-full relative flex flex-col">
|
|
<div class="font-600 flex items-end mt27px">
|
|
<div class="text-36px">情报编辑</div>
|
|
<div class="text-18px ml40px mr25px">{{ day }}</div>
|
|
<div class="text-18px flex-1">{{ week }}</div>
|
|
</div>
|
|
<div class="bg-#fff p30px rounded-20px mt30px h800px overflow-y-auto">
|
|
<n-form
|
|
ref="formRef"
|
|
:label-width="900"
|
|
:model="formValue"
|
|
:rules="rules"
|
|
size="medium"
|
|
require-mark-placement="left"
|
|
>
|
|
<n-form-item
|
|
label="情报属性"
|
|
path="type"
|
|
v-if="formValue.type === '1' || formValue.type === '2'"
|
|
>
|
|
<n-radio-group v-model:value="formValue.type" name="radiogroup">
|
|
<n-space>
|
|
<n-radio value="1" @change="radios">外部</n-radio>
|
|
<n-radio value="2" @change="radios">内部</n-radio>
|
|
</n-space>
|
|
</n-radio-group>
|
|
</n-form-item>
|
|
<n-form-item label="情报类型" path="cate">
|
|
<div class="flex gap-20px cursor-pointer">
|
|
<div
|
|
v-if="formValue.type === '1'"
|
|
:class="cate == 1 ? 'img yes' : 'img'"
|
|
@click="change(1)"
|
|
>
|
|
<img src="../images/icon-1.svg" alt="" class="ml15px mt8px" />
|
|
<div class="text-center text-14px text-#fff">外部环境</div>
|
|
</div>
|
|
<div
|
|
v-if="formValue.type === '1'"
|
|
:class="cate == 2 ? 'img yes' : 'img'"
|
|
@click="change(2)"
|
|
>
|
|
<img src="../images/icon-2.svg" alt="" class="ml18px mt14px" />
|
|
<div class="text-center text-14px text-#fff">竞争对手</div>
|
|
</div>
|
|
<div
|
|
v-if="formValue.type === '1'"
|
|
:class="cate == 3 ? 'img yes' : 'img'"
|
|
@click="change(3)"
|
|
>
|
|
<img src="../images/icon-3.svg" alt="" class="ml19px mt8px" />
|
|
<div class="text-center text-14px text-#fff">供方动向</div>
|
|
</div>
|
|
<div
|
|
v-if="formValue.type === '2'"
|
|
:class="cate == 4 ? 'img yes' : 'img'"
|
|
@click="change(4)"
|
|
>
|
|
<img src="../images/icon-4.svg" alt="" class="ml17px mt10px" />
|
|
<div class="text-center text-14px text-#fff">大金集团</div>
|
|
</div>
|
|
<!-- <div v-if="formValue.type==='1'" :class="cate == 7 ? 'img yes' : 'img'" @click="change(7)">
|
|
<img src="../images/news2@2x.png" alt="" class="ml19px mt8px w46px">
|
|
<div class="text-center text-14px text-#fff">News</div>
|
|
</div>
|
|
<div v-if="formValue.type==='1'" :class="cate == 8 ? 'img yes' : 'img'" @click="change(8)">
|
|
<img src="../images/zytz@2x.png" alt="" class="ml10px mt8px w55px">
|
|
<div class="text-center text-14px text-#fff">重要通知</div>
|
|
</div> -->
|
|
<div
|
|
v-if="formValue.type === '2'"
|
|
:class="cate == 5 ? 'img yes' : 'img'"
|
|
@click="change(5)"
|
|
>
|
|
<img src="../images/icon-5.svg" alt="" class="ml17px mt9px" />
|
|
<div class="text-center text-14px text-#fff">中国据点</div>
|
|
</div>
|
|
<div
|
|
v-if="formValue.type === '2'"
|
|
:class="cate == 6 ? 'img yes' : 'img'"
|
|
@click="change(6)"
|
|
>
|
|
<img src="../images/icon-6.svg" alt="" class="ml15px mt8px" />
|
|
<div class="text-center text-14px text-#fff">调达本部</div>
|
|
</div>
|
|
|
|
<div v-if="formValue.type === 2" class="img yes">
|
|
<img src="../images/icon-3.svg" alt="" class="ml19px mt8px" />
|
|
<div class="text-center text-14px text-#fff">供方动向</div>
|
|
</div>
|
|
</div>
|
|
</n-form-item>
|
|
<span class="text-#000">上传图片</span>
|
|
<n-form-item label="(图片最佳尺寸比例2:1)" class="mt5px">
|
|
<el-upload
|
|
v-model:file-list="fileList"
|
|
:headers="header"
|
|
action="/test-api/common/upload"
|
|
list-type="picture-card"
|
|
:on-preview="handlePictureCardPreview"
|
|
:on-remove="handleRemove"
|
|
:limit="1"
|
|
>
|
|
<el-icon><Plus /></el-icon>
|
|
</el-upload>
|
|
|
|
<el-dialog v-model="dialogVisible">
|
|
<img w-full :src="dialogImageUrl" alt="Preview Image" />
|
|
</el-dialog>
|
|
</n-form-item>
|
|
<n-form-item label="情报标题" path="title">
|
|
<n-input v-model:value="formValue.title" placeholder="" />
|
|
</n-form-item>
|
|
|
|
<n-form-item label="情报来源" path="source">
|
|
<n-input v-model:value="formValue.source" placeholder="" />
|
|
</n-form-item>
|
|
<n-form-item label="情报内容" path="content">
|
|
<Editor
|
|
@getChildData="handleChild"
|
|
v-model="formValue.content"
|
|
></Editor>
|
|
</n-form-item>
|
|
<n-form-item>
|
|
<div>
|
|
<n-button @click="showModal = true"> 文本内容预览</n-button>
|
|
</div>
|
|
</n-form-item>
|
|
</n-form>
|
|
<n-button
|
|
attr-type="button"
|
|
@click="sure"
|
|
style="background-color: #3870e5; border-radius: 5px; color: #fff"
|
|
>
|
|
确定
|
|
</n-button>
|
|
</div>
|
|
</div>
|
|
<n-modal v-model:show="showModal">
|
|
<div class="flex w80% p30px bg-#fff my40px rounded-30px">
|
|
<div
|
|
class="overflow-y-auto h800px container"
|
|
v-html="editorContent"
|
|
></div>
|
|
</div>
|
|
</n-modal>
|
|
</template>
|
|
|
|
<style scoped lang="less">
|
|
::-webkit-scrollbar {
|
|
width: 1px;
|
|
}
|
|
.top {
|
|
position: absolute;
|
|
right: 30px;
|
|
top: -92px;
|
|
}
|
|
|
|
.add {
|
|
border: 1px solid #ffffff;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.img {
|
|
width: 80px;
|
|
height: 80px;
|
|
border-radius: 20px;
|
|
background-color: #c2c2c2;
|
|
}
|
|
|
|
.img.yes {
|
|
background-color: #63bfb2;
|
|
}
|
|
</style>
|