文章调整

This commit is contained in:
Jason 2022-09-15 09:25:46 +08:00
parent 345b3bb81a
commit 8d6fd9f22c
2 changed files with 41 additions and 32 deletions

View File

@ -4,7 +4,13 @@
<el-page-header content="文章编辑" @back="$router.back()" /> <el-page-header content="文章编辑" @back="$router.back()" />
</el-card> </el-card>
<el-card class="mt-4 !border-none" shadow="never"> <el-card class="mt-4 !border-none" shadow="never">
<el-form ref="formRef" class="ls-form" :model="formData" label-width="85px" :rules="rules"> <el-form
ref="formRef"
class="ls-form"
:model="formData"
label-width="85px"
:rules="rules"
>
<div class="xl:flex"> <div class="xl:flex">
<div> <div>
<el-form-item label="文章标题" prop="title"> <el-form-item label="文章标题" prop="title">
@ -13,9 +19,17 @@
</div> </div>
</el-form-item> </el-form-item>
<el-form-item label="文章栏目" prop="cid"> <el-form-item label="文章栏目" prop="cid">
<el-select class="w-80" v-model="formData.cid" placeholder="请选择文章栏目"> <el-select
<el-option v-for="item in optionsData.articleCate" :key="item.id" :label="item.name" class="w-80"
:value="item.id" /> v-model="formData.cid"
placeholder="请选择文章栏目"
>
<el-option
v-for="item in optionsData.articleCate"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="文章简介" prop="intro"> <el-form-item label="文章简介" prop="intro">
@ -43,7 +57,7 @@
</el-form-item> </el-form-item>
<el-form-item label="排序" prop="sort"> <el-form-item label="排序" prop="sort">
<div> <div>
<el-input-number v-model="formData.sort" :min="0"/> <el-input-number v-model="formData.sort" :min="0" />
<div class="form-tips">默认为0 数值越大越排前</div> <div class="form-tips">默认为0 数值越大越排前</div>
</div> </div>
</el-form-item> </el-form-item>
@ -98,7 +112,7 @@ const formData = reactive({
const formRef = shallowRef<FormInstance>() const formRef = shallowRef<FormInstance>()
const rules = reactive({ const rules = reactive({
title: [{ required: true, message: '请输入文章标题', trigger: 'blur' }], title: [{ required: true, message: '请输入文章标题', trigger: 'blur' }],
cid: [{ required: true, message: '请输入表描述', trigger: 'blur' }] cid: [{ required: true, message: '请输入文章简介', trigger: 'blur' }]
}) })
const getDetails = async () => { const getDetails = async () => {

View File

@ -2,7 +2,7 @@
<div class="hot-search"> <div class="hot-search">
<el-card class="!border-none" shadow="never"> <el-card class="!border-none" shadow="never">
<el-form ref="formRef" :model="formData" label-width="100px"> <el-form ref="formRef" :model="formData" label-width="100px">
<el-form-item label="功能状态" style="margin-bottom: 0;"> <el-form-item label="功能状态" style="margin-bottom: 0">
<div> <div>
<el-radio-group v-model="formData.isHotSearch"> <el-radio-group v-model="formData.isHotSearch">
<el-radio :label="1">开启</el-radio> <el-radio :label="1">开启</el-radio>
@ -32,13 +32,17 @@
</el-table-column> </el-table-column>
<el-table-column label="排序" prop="describe" min-width="160"> <el-table-column label="排序" prop="describe" min-width="160">
<template #default="{ row }"> <template #default="{ row }">
<el-input v-model="row.sort" /> <el-input v-model="row.sort" type="number" />
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="操作" min-width="80" fixed="right"> <el-table-column label="操作" min-width="80" fixed="right">
<template #default="{ row, $index }"> <template #default="{ row, $index }">
<el-button v-perms="['setting:storage:edit']" type="danger" link <el-button
@click="handleDel($index)"> v-perms="['setting:storage:edit']"
type="danger"
link
@click="handleDel($index)"
>
删除 删除
</el-button> </el-button>
</template> </template>
@ -59,7 +63,7 @@
<!-- 热门搜索 --> <!-- 热门搜索 -->
<div class="hot-search-title">热门搜索</div> <div class="hot-search-title">热门搜索</div>
<div class="hot-search-text"> <div class="hot-search-text">
<span v-for="text in list">{{ text.name }}</span> <span v-for="(text, index) in list" :key="index">{{ text.name }}</span>
</div> </div>
</div> </div>
</div> </div>
@ -73,40 +77,31 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { getSearch, setSearch } from "@/api/setting/search"; import { getSearch, setSearch } from '@/api/setting/search'
import type { Search } from "@/api/setting/search"; import type { Search } from '@/api/setting/search'
import feedback from "@/utils/feedback"; import feedback from '@/utils/feedback'
const formData = reactive<Search>({ const formData = reactive<Search>({
isHotSearch: 1, isHotSearch: 1,
list: [ list: []
{
name: '搜索引擎',
sort: 2
},
{
name: '卧槽',
sort: 1
}
]
}) })
const list = computed(() => { const list = computed(() => {
return formData.list.sort((v1, v2) => v1.sort - v2.sort) return [...formData.list].sort((v1, v2) => v2.sort - v1.sort)
}) })
// //
const getData = async () => { const getData = async () => {
try { try {
const data = await getSearch(); const data = await getSearch()
for (const key in formData) { for (const key in formData) {
//@ts-ignore //@ts-ignore
formData[key] = data[key]; formData[key] = data[key]
} }
} catch (error) { } catch (error) {
console.log('获取=>', error) console.log('获取=>', error)
} }
}; }
const handleAdd = () => { const handleAdd = () => {
formData.list.push({ formData.list.push({
@ -122,7 +117,7 @@ const handleDel = (index: number) => {
const handleSave = async () => { const handleSave = async () => {
try { try {
await setSearch(formData) await setSearch(formData)
feedback.msgSuccess("操作成功"); feedback.msgSuccess('操作成功')
getData() getData()
} catch (error) { } catch (error) {
console.log('保存=>', error) console.log('保存=>', error)
@ -143,7 +138,7 @@ getData()
height: 494px; height: 494px;
padding: 12px 12px; padding: 12px 12px;
border-radius: 10px; border-radius: 10px;
border: 1px solid #E6E6E6; border: 1px solid #e6e6e6;
.search-com { .search-com {
.search-con { .search-con {
@ -167,10 +162,10 @@ getData()
padding: 5px 10px; padding: 5px 10px;
margin: 0 6px 6px 0; margin: 0 6px 6px 0;
display: inline-block; display: inline-block;
background-color: #E6E6E6; background-color: #f4f4f4;
} }
} }
} }
} }
} }
</style> </style>