mirror of
https://gitee.com/hhyykk/ipms-sjy-ui.git
synced 2025-09-11 23:51:55 +08:00
refactor: mp/draft拆分组件
This commit is contained in:
dhb52
302
src/views/mp/draft/components/NewsForm.vue
Normal file
302
src/views/mp/draft/components/NewsForm.vue
Normal file
@@ -0,0 +1,302 @@
|
||||
<template>
|
||||
<el-container>
|
||||
<el-aside width="40%">
|
||||
<div class="select-item">
|
||||
<div v-for="(news, index) in newsList" :key="index">
|
||||
<div
|
||||
class="news-main father"
|
||||
v-if="index === 0"
|
||||
:class="{ activeAddNews: activeNewsIndex === index }"
|
||||
@click="activeNewsIndex = index"
|
||||
>
|
||||
<div class="news-content">
|
||||
<img class="material-img" :src="news.thumbUrl" />
|
||||
<div class="news-content-title">{{ news.title }}</div>
|
||||
</div>
|
||||
<div class="child" v-if="newsList.length > 1">
|
||||
<el-button type="info" circle size="small" @click="() => moveDownNews(index)">
|
||||
<Icon icon="ep:arrow-down-bold" />
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="isCreating"
|
||||
type="danger"
|
||||
circle
|
||||
size="small"
|
||||
@click="() => removeNews(index)"
|
||||
>
|
||||
<Icon icon="ep:delete" />
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="news-main-item father"
|
||||
v-if="index > 0"
|
||||
:class="{ activeAddNews: activeNewsIndex === index }"
|
||||
@click="activeNewsIndex = index"
|
||||
>
|
||||
<div class="news-content-item">
|
||||
<div class="news-content-item-title">{{ news.title }}</div>
|
||||
<div class="news-content-item-img">
|
||||
<img class="material-img" :src="news.thumbUrl" width="100%" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="child">
|
||||
<el-button
|
||||
v-if="newsList.length > index + 1"
|
||||
circle
|
||||
type="info"
|
||||
size="small"
|
||||
@click="() => moveDownNews(index)"
|
||||
>
|
||||
<Icon icon="ep:arrow-down-bold" />
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="index > 0"
|
||||
type="info"
|
||||
circle
|
||||
size="small"
|
||||
@click="() => moveUpNews(index)"
|
||||
>
|
||||
<Icon icon="ep:arrow-up-bold" />
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="isCreating"
|
||||
type="danger"
|
||||
size="small"
|
||||
circle
|
||||
@click="() => removeNews(index)"
|
||||
>
|
||||
<Icon icon="ep:delete" />
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-row justify="center" class="ope-row">
|
||||
<el-button
|
||||
type="primary"
|
||||
circle
|
||||
@click="plusNews"
|
||||
v-if="newsList.length < 8 && isCreating"
|
||||
>
|
||||
<Icon icon="ep:plus" />
|
||||
</el-button>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-aside>
|
||||
<el-main>
|
||||
<div v-if="newsList.length > 0">
|
||||
<!-- 标题、作者、原文地址 -->
|
||||
<el-row :gutter="20">
|
||||
<el-input v-model="activeNewsItem.title" placeholder="请输入标题（必填）" />
|
||||
<el-input
|
||||
v-model="activeNewsItem.author"
|
||||
placeholder="请输入作者"
|
||||
style="margin-top: 5px"
|
||||
/>
|
||||
<el-input
|
||||
v-model="activeNewsItem.contentSourceUrl"
|
||||
placeholder="请输入原文地址"
|
||||
style="margin-top: 5px"
|
||||
/>
|
||||
</el-row>
|
||||
<!-- 封面和摘要 -->
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<CoverSelect v-model="activeNewsItem" :is-first="activeNewsIndex === 0" />
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<p>摘要:</p>
|
||||
<el-input
|
||||
:rows="8"
|
||||
type="textarea"
|
||||
v-model="activeNewsItem.digest"
|
||||
placeholder="请输入摘要"
|
||||
class="digest"
|
||||
maxlength="120"
|
||||
/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!--富文本编辑器组件-->
|
||||
<el-row>
|
||||
<Editor v-model="activeNewsItem.content" :editor-config="editorConfig" />
|
||||
</el-row>
|
||||
</div>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Editor } from '@/components/Editor'
|
||||
import { createEditorConfig } from '../editor-config'
|
||||
import CoverSelect from './CoverSelect.vue'
|
||||
import { type NewsItem, createEmptyNewsItem } from './types'
|
||||
|
||||
const message = useMessage()
|
||||
|
||||
const props = defineProps<{
|
||||
isCreating: boolean
|
||||
modelValue: NewsItem[] | null
|
||||
}>()
|
||||
|
||||
const accountId = inject<number>('accountId')
|
||||
|
||||
// ========== 文件上传 ==========
|
||||
const UPLOAD_URL = import.meta.env.VITE_BASE_URL + '/admin-api/mp/material/upload-permanent' // 上传永久素材的地址
|
||||
const editorConfig = createEditorConfig(UPLOAD_URL, accountId)
|
||||
|
||||
// v-model=newsList
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', v: NewsItem[])
|
||||
}>()
|
||||
const newsList = computed<NewsItem[]>({
|
||||
get() {
|
||||
return props.modelValue === null ? [createEmptyNewsItem()] : props.modelValue
|
||||
},
|
||||
set(val) {
|
||||
emit('update:modelValue', val)
|
||||
}
|
||||
})
|
||||
|
||||
const activeNewsIndex = ref(0)
|
||||
const activeNewsItem = computed<NewsItem>(() => newsList.value[activeNewsIndex.value])
|
||||
|
||||
// 将图文向下移动
|
||||
const moveDownNews = (index: number) => {
|
||||
const temp = newsList.value[index]
|
||||
newsList.value[index] = newsList.value[index + 1]
|
||||
newsList.value[index + 1] = temp
|
||||
activeNewsIndex.value = index + 1
|
||||
}
|
||||
|
||||
// 将图文向上移动
|
||||
const moveUpNews = (index: number) => {
|
||||
const temp = newsList.value[index]
|
||||
newsList.value[index] = newsList.value[index - 1]
|
||||
newsList.value[index - 1] = temp
|
||||
activeNewsIndex.value = index - 1
|
||||
}
|
||||
|
||||
// 删除指定 index 的图文
|
||||
const removeNews = async (index: number) => {
|
||||
try {
|
||||
await message.confirm('确定删除该图文吗?')
|
||||
newsList.value.splice(index, 1)
|
||||
if (activeNewsIndex.value === index) {
|
||||
activeNewsIndex.value = 0
|
||||
}
|
||||
} catch {}
|
||||
}
|
||||
|
||||
// 添加一个图文
|
||||
const plusNews = () => {
|
||||
newsList.value.push(createEmptyNewsItem())
|
||||
activeNewsIndex.value = newsList.value.length - 1
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.ope-row {
|
||||
padding-top: 5px;
|
||||
margin-top: 5px;
|
||||
text-align: center;
|
||||
border-top: 1px solid #eaeaea;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.el-row:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.digest {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
/* 新增图文 */
|
||||
.news-main {
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
margin: auto;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.news-content {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
background-color: #acadae;
|
||||
}
|
||||
|
||||
.news-content-title {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
display: inline-block;
|
||||
width: 98%;
|
||||
height: 25px;
|
||||
padding: 1%;
|
||||
overflow: hidden;
|
||||
font-size: 15px;
|
||||
color: #fff;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
background-color: black;
|
||||
opacity: 0.65;
|
||||
}
|
||||
|
||||
.news-main-item {
|
||||
width: 100%;
|
||||
padding: 5px 0;
|
||||
margin: auto;
|
||||
background-color: #fff;
|
||||
border-top: 1px solid #eaeaea;
|
||||
}
|
||||
|
||||
.news-content-item {
|
||||
position: relative;
|
||||
margin-left: -3px;
|
||||
}
|
||||
|
||||
.news-content-item-title {
|
||||
display: inline-block;
|
||||
width: 70%;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.news-content-item-img {
|
||||
display: inline-block;
|
||||
width: 25%;
|
||||
background-color: #acadae;
|
||||
}
|
||||
|
||||
.select-item {
|
||||
width: 60%;
|
||||
padding: 10px;
|
||||
margin: 0 auto 10px;
|
||||
border: 1px solid #eaeaea;
|
||||
|
||||
.activeAddNews {
|
||||
border: 5px solid #2bb673;
|
||||
}
|
||||
}
|
||||
|
||||
.father .child {
|
||||
position: relative;
|
||||
bottom: 25px;
|
||||
display: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.father:hover .child {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.material-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user