文章调整

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-card>
<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>
<el-form-item label="文章标题" prop="title">
@ -13,9 +19,17 @@
</div>
</el-form-item>
<el-form-item label="文章栏目" prop="cid">
<el-select class="w-80" v-model="formData.cid" placeholder="请选择文章栏目">
<el-option v-for="item in optionsData.articleCate" :key="item.id" :label="item.name"
:value="item.id" />
<el-select
class="w-80"
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-form-item>
<el-form-item label="文章简介" prop="intro">
@ -43,7 +57,7 @@
</el-form-item>
<el-form-item label="排序" prop="sort">
<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>
</el-form-item>
@ -98,7 +112,7 @@ const formData = reactive({
const formRef = shallowRef<FormInstance>()
const rules = reactive({
title: [{ required: true, message: '请输入文章标题', trigger: 'blur' }],
cid: [{ required: true, message: '请输入表描述', trigger: 'blur' }]
cid: [{ required: true, message: '请输入文章简介', trigger: 'blur' }]
})
const getDetails = async () => {

View File

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