620 lines
18 KiB
Vue
Executable File
620 lines
18 KiB
Vue
Executable File
<script setup lang="ts">
|
|
// import Editor from '../components/Editor.vue'
|
|
import Editor from '../components/TinyECE.vue'
|
|
import HomeHead from '@/views/home/components/HomeHead.vue'
|
|
import HomeHeadSearch from '@/views/home/components/HomeHeadSearch.vue'
|
|
import UserPage from './UserPages.vue'
|
|
import { useDate } from '@/views/home/hooks/useDate'
|
|
import { getArticleDetail, review } from '@/api/daikin/base'
|
|
import {
|
|
NModal,
|
|
NCard,
|
|
NForm,
|
|
NButton,
|
|
NFormItem,
|
|
NInput,
|
|
NRadio,
|
|
NSelect,
|
|
NSpace,
|
|
NRadioGroup,
|
|
useMessage,
|
|
treeDark
|
|
} from 'naive-ui'
|
|
import { getImg } from '../images'
|
|
import { useUserStore } from '@/stores/modules/user'
|
|
import { noticeld } from '@/stores/modules/noticeId'
|
|
import { Plus } from '@element-plus/icons-vue'
|
|
import type { UploadProps, UploadUserFile } from 'element-plus'
|
|
|
|
const stores = noticeld()
|
|
const store = useUserStore()
|
|
|
|
const state = ref<any>({})
|
|
async function getData() {
|
|
const { id } = route.params
|
|
if (!id) return
|
|
const { data } = await getArticleDetail(id as string)
|
|
state.value = data
|
|
dataList.value = data.userList
|
|
formValue.value = Object.assign(data, {
|
|
type: data.type + '',
|
|
cate: data.cate + ''
|
|
})
|
|
editorContent.value = data.content ? unescapeHTML(data.content) : ''
|
|
cate.value = data.cate
|
|
console.log(data.type)
|
|
}
|
|
|
|
const message = useMessage()
|
|
const { day, week } = useDate()
|
|
const { push } = useRouter()
|
|
const route = useRoute()
|
|
let cate = ref(1)
|
|
let formValue: any = ref({
|
|
type: 1,
|
|
status: 1,
|
|
cate: '',
|
|
title: '',
|
|
tag: '',
|
|
source: '',
|
|
content: '',
|
|
isTop: 'N',
|
|
bannerImg: ''
|
|
})
|
|
|
|
let rules = {
|
|
cate: {
|
|
required: false,
|
|
message: '请选择类型',
|
|
trigger: 'blur'
|
|
},
|
|
title: {
|
|
required: false,
|
|
message: '请输入标题',
|
|
trigger: 'blur'
|
|
},
|
|
tag: {
|
|
required: true,
|
|
message: '请输入标题',
|
|
trigger: 'blur'
|
|
},
|
|
source: {
|
|
required: true,
|
|
message: '请输入标题',
|
|
trigger: 'blur'
|
|
},
|
|
content: {
|
|
required: false,
|
|
message: '请输入内容',
|
|
trigger: 'blur'
|
|
}
|
|
}
|
|
// let options = [{
|
|
// label: '紧急',
|
|
// value: '紧急'
|
|
// },
|
|
// {
|
|
// label: 'New',
|
|
// value: 'New'
|
|
// },]
|
|
function change(i: any) {
|
|
cate.value = i
|
|
formValue.cate = cate.value
|
|
// console.log( formValue.cate)
|
|
}
|
|
function unescapeHTML(html: string) {
|
|
const doc = new DOMParser().parseFromString(html, 'text/html')
|
|
return doc.documentElement.textContent
|
|
}
|
|
function escapeHTML(html: string): string {
|
|
const tempElement = document.createElement('div')
|
|
tempElement.textContent = html
|
|
return tempElement.innerHTML
|
|
}
|
|
// 获取子组件传过来的值
|
|
const handleChild2 = (data: string) => {
|
|
editorContent.value = data
|
|
}
|
|
const starts = ref(1)
|
|
const fileList = ref<[]>()
|
|
const editorContent = ref('')
|
|
async function sure() {
|
|
const { id, title, source, type, isTop, content: conts } = formValue.value
|
|
const cont = editorContent.value
|
|
const content = cont ? escapeHTML(cont) : conts
|
|
|
|
const noticeId = stores.article.noticeld
|
|
const cates = cate.value
|
|
const status = starts.value
|
|
console.log(content)
|
|
let userIdList: any[] = []
|
|
// let filLists
|
|
// if(isTop==='Y'&&!fileList.value){
|
|
// message.error("请选择图片")
|
|
// return
|
|
// }
|
|
// else if(isTop==='Y'&&fileList.value){
|
|
// filLists = fileList.value.map(item => item.response.fileName).join(',');
|
|
|
|
// }
|
|
|
|
if (!dataList.value) {
|
|
message.success('请选择要提醒的对象')
|
|
return
|
|
}
|
|
dataList.value.forEach((i: { userId: any }) => {
|
|
console.log(dataList.value)
|
|
userIdList.push(i.userId)
|
|
})
|
|
// console.log(formValue.value)
|
|
if (userIdList.length < 0) return
|
|
const { msg, code } = await review({
|
|
id,
|
|
status,
|
|
isTop,
|
|
title,
|
|
source,
|
|
cate: cates,
|
|
noticeId,
|
|
type,
|
|
content,
|
|
userIdList
|
|
})
|
|
if (code === 200) {
|
|
showModalRef2.value = true
|
|
} else {
|
|
message.success(msg)
|
|
}
|
|
}
|
|
|
|
const showModal = ref(false)
|
|
const showModalRef = ref(false)
|
|
const showModalRef2 = ref(false)
|
|
const bodyStyle = ref({
|
|
// 'background-color': '#236EED'
|
|
})
|
|
function onNegativeClick() {
|
|
message.success('Cancel')
|
|
showModalRef.value = false
|
|
}
|
|
function onPositiveClick() {
|
|
showModalRef.value = false
|
|
sure()
|
|
}
|
|
function onPositiveClicks() {
|
|
showModalRefs.value = false
|
|
sure()
|
|
}
|
|
const dataList = ref()
|
|
// 获取子组件传过来的值
|
|
const handleChild = (data: any) => {
|
|
const { showModal: show, multipleSelection } = data
|
|
showModal.value = unref(show)
|
|
dataList.value = unref(multipleSelection)
|
|
}
|
|
|
|
const handleClose = (tag: any) => {
|
|
dataList.value.splice(dataList.value.indexOf(tag), 1)
|
|
// console.log( dataList.value)
|
|
}
|
|
const CloseThis = (data: boolean) => {
|
|
showModal.value = data
|
|
}
|
|
const ok = () => {
|
|
showModalRef2.value = false
|
|
push('/Home/Process')
|
|
}
|
|
|
|
const submitSave = (page: any) => {
|
|
console.log(page)
|
|
if (store.user.isReview === 1) {
|
|
if (page === 1) {
|
|
showModalRef.value = true
|
|
} else {
|
|
showModalRefs.value = true
|
|
}
|
|
starts.value = page
|
|
// console.log(page,showModalRef.value, showModalRefs.value)
|
|
} else {
|
|
message.warning('您还未获得审核权限')
|
|
}
|
|
}
|
|
getData()
|
|
const showModals = ref(false)
|
|
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)
|
|
}
|
|
const setUserList = ref()
|
|
const thisClick = () => {
|
|
showModal.value = true
|
|
setUserList.value = dataList.value
|
|
stores.article.reviewSource = formValue.value.reviewSource
|
|
console.log(stores.article.reviewSource)
|
|
}
|
|
const showModalRefs = ref(false)
|
|
</script>
|
|
<template>
|
|
<div>
|
|
<HomeHead class="top">
|
|
<template #content>
|
|
<!-- <HomeHeadSearch /> -->
|
|
</template>
|
|
</HomeHead>
|
|
<div class="h-full relative flex flex-col">
|
|
<div class="font-600 flex items-end mt30px">
|
|
<div class="text-36px">情报新增待审批</div>
|
|
<div class="text-18px ml40px mr25px">{{ day }}</div>
|
|
<div class="text-18px">{{ week }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="q-wrapper flex-1 mt30px text-#142142 flex flex-col bg-#fff p30px">
|
|
<n-form
|
|
ref="formRef"
|
|
:label-width="900"
|
|
:model="formValue"
|
|
:rules="rules"
|
|
size="medium"
|
|
require-mark-placement="left"
|
|
>
|
|
<n-form-item v-if="formValue.reviewSource === 2" label="情报属性" path="type">
|
|
<n-radio-group v-model:value="formValue.type" name="radiogroup">
|
|
<n-space>
|
|
<!-- <n-radio v-for="song in songs" :key="song.value" :value="song.value">
|
|
{{ song.label }}
|
|
</n-radio> -->
|
|
<n-radio value="2">社内</n-radio>
|
|
<n-radio value="1">社外</n-radio>
|
|
</n-space>
|
|
</n-radio-group>
|
|
</n-form-item>
|
|
<n-form-item label="是否紧急" path="isTop">
|
|
<n-radio-group v-model:value="formValue.isTop" name="radiogroup">
|
|
<n-space>
|
|
<!-- <n-radio v-for="song in songs" :key="song.value" :value="song.value">
|
|
{{ song.label }}
|
|
</n-radio> -->
|
|
<n-radio value="Y">是</n-radio>
|
|
<n-radio value="N">不是</n-radio>
|
|
</n-space>
|
|
</n-radio-group>
|
|
</n-form-item>
|
|
<!-- <n-form-item v-if="formValue.isTop==='Y'" label="上传图片" >
|
|
<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="3"
|
|
>
|
|
<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 v-if="formValue.reviewSource === 2 && cate != 9" 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 === '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>
|
|
</n-form-item>
|
|
<n-form-item v-if="formValue.reviewSource === 3 && cate != 9" label="情报类型" path="cate">
|
|
<div class="flex gap-20px cursor-pointer">
|
|
<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>
|
|
</n-form-item>
|
|
<n-form-item v-if="formValue.reviewSource === 2" label="轮播图" path="title">
|
|
<img
|
|
v-if="formValue.bannerImg[0]"
|
|
:src="formValue.bannerImg[0]"
|
|
class="max-w600px max-h300px"
|
|
/>
|
|
</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="tag" v-if="store.user.isPublish !==1">
|
|
<n-select v-model:value="formValue.tag" :options="options" />
|
|
</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 :content="state.content" @getChildData="handleChild2"></Editor>
|
|
</n-form-item>
|
|
|
|
<n-button @click="showModals = true"> 文本内容预览 </n-button>
|
|
<br />
|
|
<br />
|
|
<br />
|
|
<n-button @click="thisClick" v-if="cate != 9"> 情报公开范围 </n-button>
|
|
<div class="mt15px h150px overflow-y-auto" v-if="cate != 9">
|
|
<el-tag
|
|
v-for="i in dataList"
|
|
:key="i"
|
|
class="mx-1 my5px"
|
|
closable
|
|
:disable-transitions="false"
|
|
@close="handleClose(i)"
|
|
type="info"
|
|
size="large"
|
|
>
|
|
{{ i.nickName }}
|
|
</el-tag>
|
|
</div>
|
|
<div class="text-end float-right block h50px pt10px">
|
|
<n-form-item>
|
|
<n-button attr-type="button" style="padding: 0 20px" @click="submitSave(2)">
|
|
拒绝
|
|
</n-button>
|
|
<n-button
|
|
attr-type="button"
|
|
@click="submitSave(1)"
|
|
style="
|
|
background-color: #3870e5;
|
|
border-radius: 5px;
|
|
color: #fff;
|
|
margin-left: 10px;
|
|
padding: 0 20px;
|
|
"
|
|
>
|
|
发布
|
|
</n-button>
|
|
</n-form-item>
|
|
</div>
|
|
</n-form>
|
|
</div>
|
|
|
|
<div>
|
|
<n-modal v-model:show="showModal">
|
|
<!-- <n-card style="width:1100px; height: 800px;" title="调达中心" :bordered="false" size="huge" role="dialog"
|
|
aria-modal="true"> -->
|
|
<UserPage
|
|
:userDataList="setUserList"
|
|
@clickChild="handleChild"
|
|
@CloseThis="CloseThis"
|
|
></UserPage>
|
|
<!-- </n-card> -->
|
|
</n-modal>
|
|
</div>
|
|
<div>
|
|
<n-modal v-model:show="showModalRef">
|
|
<n-card
|
|
style="width: 500px"
|
|
title="提示"
|
|
:bordered="false"
|
|
size="huge"
|
|
role="dialog"
|
|
aria-modal="true"
|
|
>
|
|
<div class="h200px bg#fff flex-col flex items-center justify-center">
|
|
<span class="mb60px text-18px">确认发布本情报</span>
|
|
<div class="leading-25px">
|
|
<span
|
|
class="inline-block w80px h25px text-#bfbfbf border border-solid text-center rounded-5px cursor-pointer"
|
|
@click="showModalRef = false"
|
|
>暂缓</span
|
|
>
|
|
<span
|
|
class="inline-block w80px h25px text-#fff bg-#236EED ml5px text-center rounded-5px cursor-pointer"
|
|
@click="onPositiveClick"
|
|
>确认发布</span
|
|
>
|
|
</div>
|
|
</div>
|
|
</n-card>
|
|
</n-modal>
|
|
</div>
|
|
<div>
|
|
<n-modal v-model:show="showModalRefs">
|
|
<n-card
|
|
style="width: 500px"
|
|
title="提示"
|
|
:bordered="false"
|
|
size="huge"
|
|
role="dialog"
|
|
aria-modal="true"
|
|
>
|
|
<div class="h200px bg#fff flex-col flex items-center justify-center">
|
|
<span class="mb60px text-18px">确认驳回本情报</span>
|
|
<div class="leading-25px">
|
|
<span
|
|
class="inline-block w80px h25px text-#bfbfbf border border-solid text-center rounded-5px cursor-pointer"
|
|
@click="showModalRefs = false"
|
|
>暂缓</span
|
|
>
|
|
<span
|
|
class="inline-block w80px h25px text-#fff bg-#236EED ml5px text-center rounded-5px cursor-pointer"
|
|
@click="onPositiveClicks"
|
|
>确认驳回</span
|
|
>
|
|
</div>
|
|
</div>
|
|
</n-card>
|
|
</n-modal>
|
|
</div>
|
|
<div>
|
|
<n-modal :mask-closable="false" v-model:show="showModalRef2">
|
|
<n-card
|
|
style="width: 500px"
|
|
title="提示"
|
|
:bordered="false"
|
|
size="huge"
|
|
role="dialog"
|
|
aria-modal="true"
|
|
>
|
|
<div class="h200px bg#fff flex-col flex items-center justify-center">
|
|
<img class="w60px h60px" src="../images/quedd.png" alt="" />
|
|
<span class="mt10px mb40px">{{ starts == 1 ? '已成功发布' : '已成功驳回' }}</span>
|
|
<span
|
|
class="w50px h30px text-#fff bg-#236EED p5px text-center rounded-5px cursor-pointer"
|
|
@click="ok"
|
|
>确认</span
|
|
>
|
|
</div>
|
|
</n-card>
|
|
</n-modal>
|
|
</div>
|
|
|
|
<div>
|
|
<n-modal v-model:show="showModals">
|
|
<div class="flex w80% p30px bg-#fff my40px rounded-30px">
|
|
<div class="overflow-y-auto h800px container" v-html="editorContent"></div>
|
|
</div>
|
|
</n-modal>
|
|
</div>
|
|
</template>
|
|
<style lang="less">
|
|
:deep.container {
|
|
// column-count: 2;
|
|
column-gap: 34px;
|
|
margin: 30px;
|
|
line-height: 2;
|
|
margin-top: 32px;
|
|
// :deep(p>img){
|
|
// width: 100%;
|
|
// }
|
|
// max-width: 1062px;
|
|
:deep(img) {
|
|
// width: 100%;
|
|
// max-width: 500px;
|
|
border-radius: 6px;
|
|
margin-bottom: 24px;
|
|
}
|
|
:deep(p) {
|
|
text-indent: 2em;
|
|
}
|
|
}
|
|
/* 设置滚动条宽度 */
|
|
::-webkit-scrollbar {
|
|
width: 1px;
|
|
}
|
|
|
|
.top {
|
|
position: absolute;
|
|
right: 30px;
|
|
top: -92px;
|
|
}
|
|
|
|
.add {
|
|
border: 1px solid #ffffff;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.defultStyle {
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
text-align: center;
|
|
background-color: #c2c2c2;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
.q-wrapper {
|
|
border-radius: 18px;
|
|
border: 1px solid #e7ebf5;
|
|
box-shadow: inset 1px 2px 12px rgba(14, 86, 221, 0.32);
|
|
overflow-y: auto;
|
|
height: 830px;
|
|
}
|
|
</style>
|