feat: 🎸 显示更多组建开发中
chenkl
5 years ago
parent
c395e27f67
commit
fa9f24d5da
@ -0,0 +1,84 @@
|
|||||||
|
<template>
|
||||||
|
<div class="more__item clearfix">
|
||||||
|
<p class="more__item--text">{{ content }}</p>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent, PropType, computed, unref, onMounted, nextTick, ref } from 'vue'
|
||||||
|
export default defineComponent({
|
||||||
|
name: 'More',
|
||||||
|
props: {
|
||||||
|
// 内容
|
||||||
|
content: {
|
||||||
|
type: String as PropType<string>,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
// 默认展示几行
|
||||||
|
lineClamp: {
|
||||||
|
type: Number as PropType<number>,
|
||||||
|
default: 0
|
||||||
|
},
|
||||||
|
// 宽度
|
||||||
|
width: {
|
||||||
|
type: String as PropType<string>,
|
||||||
|
default: '300px'
|
||||||
|
},
|
||||||
|
// style
|
||||||
|
style: {
|
||||||
|
type: Object as PropType<object>,
|
||||||
|
default: () => {
|
||||||
|
return {
|
||||||
|
width: '300px',
|
||||||
|
float: 'left'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
setup(props) {
|
||||||
|
const styleObj = computed(() => {
|
||||||
|
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.more__item {
|
||||||
|
width: 528px;
|
||||||
|
height: 122px;
|
||||||
|
float: left;
|
||||||
|
.more__item--text {
|
||||||
|
width: 476px;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 3;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #545c63;
|
||||||
|
line-height: 28px;
|
||||||
|
transition: all .1s;
|
||||||
|
text-align: left;
|
||||||
|
&:hover {
|
||||||
|
background: #fff;
|
||||||
|
height: auto;
|
||||||
|
position: relative;
|
||||||
|
z-index: 5;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 8px 16px 0 rgba(7,17,27,.2);
|
||||||
|
-webkit-line-clamp: inherit;
|
||||||
|
padding: 10px;
|
||||||
|
margin-top: -10px;
|
||||||
|
margin-left: -10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.clearfix:after {
|
||||||
|
content: "";
|
||||||
|
display: block;
|
||||||
|
height: 0;
|
||||||
|
clear: both;
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,22 @@
|
|||||||
|
import { fetch } from '_p/index/axios-config/axios'
|
||||||
|
|
||||||
|
interface PropsData {
|
||||||
|
params?: any
|
||||||
|
data?: any
|
||||||
|
}
|
||||||
|
|
||||||
|
export const getExampleListApi = ({ params }: PropsData): any => {
|
||||||
|
return fetch({ url: '/example/list', method: 'get', params })
|
||||||
|
}
|
||||||
|
|
||||||
|
export const delsExampApi = ({ data }: PropsData): any => {
|
||||||
|
return fetch({ url: '/example/delete', method: 'post', data })
|
||||||
|
}
|
||||||
|
|
||||||
|
export const saveExampApi = ({ data }: PropsData): any => {
|
||||||
|
return fetch({ url: '/example/save', method: 'post', data })
|
||||||
|
}
|
||||||
|
|
||||||
|
export const getExampDetApi = ({ params }: PropsData): any => {
|
||||||
|
return fetch({ url: '/example/detail', method: 'get', params })
|
||||||
|
}
|
||||||
@ -0,0 +1,188 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<el-form
|
||||||
|
ref="formRef"
|
||||||
|
:model="form"
|
||||||
|
:rules="rules"
|
||||||
|
label-width="100px"
|
||||||
|
>
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item prop="title" label="标题">
|
||||||
|
<el-input v-model="form.title" placeholder="请输入标题" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item prop="author" label="作者">
|
||||||
|
<el-input v-model="form.author" placeholder="请输入作者" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item prop="display_time" label="创建时间">
|
||||||
|
<el-date-picker
|
||||||
|
v-model="form.display_time"
|
||||||
|
type="datetime"
|
||||||
|
placeholder="请选择创建时间"
|
||||||
|
style="width: 100%;"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item prop="importance" label="重要性">
|
||||||
|
<el-select v-model="form.importance" placeholder="请选择重要性" style="width: 100%;">
|
||||||
|
<el-option label="重要" value="3" />
|
||||||
|
<el-option label="良好" value="2" />
|
||||||
|
<el-option label="一般" value="1" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item prop="pageviews" label="阅读数">
|
||||||
|
<el-input-number
|
||||||
|
v-model="form.pageviews"
|
||||||
|
:min="0"
|
||||||
|
:max="99999999"
|
||||||
|
style="width: 100%;"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item prop="content" label="内容">
|
||||||
|
<editor ref="editorRef" :value="form.content" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-form>
|
||||||
|
<div class="dialong__button--wrap">
|
||||||
|
<el-button @click="close">取消</el-button>
|
||||||
|
<el-button :loading="subLoading" type="primary" @click="setListData">保存</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent, reactive, ref, unref, PropType } from 'vue'
|
||||||
|
import { useRouter } from 'vue-router'
|
||||||
|
import Editor from '_c/Editor/index.vue'
|
||||||
|
import { Message } from '_c/Message'
|
||||||
|
import { formatTime } from '@/utils'
|
||||||
|
import { InfoWriteParams, InfoWriteRules } from './types'
|
||||||
|
import { saveExampApi, getExampDetApi } from '../api'
|
||||||
|
|
||||||
|
const requiredRule = {
|
||||||
|
required: true,
|
||||||
|
message: '该项为必填项'
|
||||||
|
}
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: 'IfnoWrite',
|
||||||
|
components: {
|
||||||
|
Editor
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
id: {
|
||||||
|
type: String as PropType<string>,
|
||||||
|
default: () => ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
emits: ['close', 'success'],
|
||||||
|
setup(props, { emit }) {
|
||||||
|
const { push } = useRouter()
|
||||||
|
|
||||||
|
const formRef = ref<HTMLElement | null>(null)
|
||||||
|
const editorRef = ref<HTMLElement | null>(null)
|
||||||
|
const subLoading = ref<boolean>(false)
|
||||||
|
|
||||||
|
const form = reactive<InfoWriteParams>({
|
||||||
|
id: '', // id
|
||||||
|
author: '', // 作者
|
||||||
|
title: '', // 标题
|
||||||
|
content: '', // 内容
|
||||||
|
importance: '', // 重要性
|
||||||
|
display_time: '', // 创建时间
|
||||||
|
pageviews: 0 // 阅读数
|
||||||
|
})
|
||||||
|
|
||||||
|
const rules = reactive<InfoWriteRules>({
|
||||||
|
title: [requiredRule],
|
||||||
|
author: [requiredRule],
|
||||||
|
content: [requiredRule],
|
||||||
|
importance: [requiredRule],
|
||||||
|
display_time: [requiredRule],
|
||||||
|
pageviews: [requiredRule]
|
||||||
|
})
|
||||||
|
|
||||||
|
async function getDet() {
|
||||||
|
if (props.id) {
|
||||||
|
const id = props.id
|
||||||
|
try {
|
||||||
|
const res = await getExampDetApi({
|
||||||
|
params: {
|
||||||
|
id: id
|
||||||
|
}
|
||||||
|
})
|
||||||
|
if (res.code === '0000') {
|
||||||
|
for (const key in form) {
|
||||||
|
if (key === 'importance') {
|
||||||
|
form[key] = res.data[key].toString()
|
||||||
|
} else {
|
||||||
|
form[key] = res.data[key]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.log(e)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
getDet()
|
||||||
|
|
||||||
|
// 新增或者编辑
|
||||||
|
function setListData() {
|
||||||
|
const formRefWrap = unref(formRef as any)
|
||||||
|
const editorRefWrap = unref(editorRef as any)
|
||||||
|
form.content = editorRefWrap.getHtml()
|
||||||
|
try {
|
||||||
|
subLoading.value = true
|
||||||
|
formRefWrap.validate(async(valid: boolean) => {
|
||||||
|
if (valid) {
|
||||||
|
const formData = unref(form)
|
||||||
|
formData.display_time = formatTime(formData.display_time, 'yyyy-MM-dd HH:mm:ss')
|
||||||
|
const res = await saveExampApi({
|
||||||
|
data: formData
|
||||||
|
})
|
||||||
|
if (res.code === '0000') {
|
||||||
|
Message.success(form.id ? '编辑成功' : '新增成功')
|
||||||
|
emit('success', form.id ? 'edit' : 'add')
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
console.log('error submit!!')
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
})
|
||||||
|
} catch (err) {
|
||||||
|
console.log(err)
|
||||||
|
} finally {
|
||||||
|
subLoading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function close() {
|
||||||
|
push('/example-demo/example-page')
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
formRef, editorRef,
|
||||||
|
subLoading,
|
||||||
|
form,
|
||||||
|
rules,
|
||||||
|
setListData,
|
||||||
|
close,
|
||||||
|
getDet
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
</style>
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
export interface InfoWriteParams {
|
||||||
|
title: string
|
||||||
|
id?: string
|
||||||
|
author: string
|
||||||
|
content: string
|
||||||
|
importance: string
|
||||||
|
display_time: string
|
||||||
|
pageviews: number
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface InfoWriteRules {
|
||||||
|
title?: any[]
|
||||||
|
author?: any[]
|
||||||
|
content?: any[]
|
||||||
|
importance?: any[]
|
||||||
|
display_time?: any[]
|
||||||
|
pageviews?: any[]
|
||||||
|
}
|
||||||
@ -0,0 +1,229 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div class="search__example--wrap">
|
||||||
|
<com-search
|
||||||
|
:data="searchData"
|
||||||
|
@search-submit="searchSubmit"
|
||||||
|
@reset-submit="resetSubmit"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="button__example--wrap">
|
||||||
|
<el-button type="primary" icon="el-icon-circle-plus-outline" @click="open(false)">新增</el-button>
|
||||||
|
<el-button
|
||||||
|
type="danger"
|
||||||
|
icon="el-icon-delete"
|
||||||
|
@click="dels"
|
||||||
|
>删除</el-button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<com-table
|
||||||
|
v-loading="loading"
|
||||||
|
selection
|
||||||
|
:columns="columns"
|
||||||
|
:data="tableData"
|
||||||
|
:pagination="{
|
||||||
|
currentPage: defalutParams.pageIndex,
|
||||||
|
total: total,
|
||||||
|
onSizeChange: handleSizeChange,
|
||||||
|
onCurrentChange: handleCurrentChange
|
||||||
|
}"
|
||||||
|
@selection-change="handleSelectionChange"
|
||||||
|
>
|
||||||
|
<template #importance="scope">
|
||||||
|
<el-tag
|
||||||
|
:type="scope.row.importance === 3
|
||||||
|
? 'success'
|
||||||
|
: (scope.row.importance === 2
|
||||||
|
? 'warning'
|
||||||
|
: 'danger')"
|
||||||
|
>{{ scope.row.importance === 3
|
||||||
|
? '重要'
|
||||||
|
: (scope.row.importance === 2
|
||||||
|
? '良好'
|
||||||
|
: '一般') }}
|
||||||
|
</el-tag>
|
||||||
|
</template>
|
||||||
|
<template #action="scope">
|
||||||
|
<el-button type="primary" size="mini" @click="open(scope.row)">编辑</el-button>
|
||||||
|
<el-button type="danger" size="mini" @click="dels(scope.row)">删除</el-button>
|
||||||
|
</template>
|
||||||
|
</com-table>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent, onMounted, onUnmounted } from 'vue'
|
||||||
|
import { useRouter } from 'vue-router'
|
||||||
|
import vueBus from '@/vue-bus'
|
||||||
|
import { useExample } from '@/hooks/useExample'
|
||||||
|
import { Message } from '_c/Message'
|
||||||
|
|
||||||
|
import { getExampleListApi, delsExampApi } from './api'
|
||||||
|
|
||||||
|
const searchData = [
|
||||||
|
{
|
||||||
|
label: '标题',
|
||||||
|
value: '',
|
||||||
|
itemType: 'input',
|
||||||
|
field: 'title',
|
||||||
|
placeholder: '请输入标题',
|
||||||
|
clearable: true
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
const columns = [
|
||||||
|
{
|
||||||
|
key: 'title',
|
||||||
|
label: '标题',
|
||||||
|
showOverflowTooltip: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'author',
|
||||||
|
label: '作者'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'display_time',
|
||||||
|
label: '创建时间'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'importance',
|
||||||
|
label: '重要性',
|
||||||
|
slots: {
|
||||||
|
default: 'importance'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'pageviews',
|
||||||
|
label: '阅读数'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'action',
|
||||||
|
label: '操作',
|
||||||
|
width: '150px',
|
||||||
|
slots: {
|
||||||
|
default: 'action'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: 'ExamplePage',
|
||||||
|
setup() {
|
||||||
|
const { push } = useRouter()
|
||||||
|
|
||||||
|
const {
|
||||||
|
defalutParams,
|
||||||
|
tableData,
|
||||||
|
loading,
|
||||||
|
total,
|
||||||
|
currentChange,
|
||||||
|
sizeChange,
|
||||||
|
handleSelectionChange,
|
||||||
|
selectionData,
|
||||||
|
delData
|
||||||
|
} = useExample()
|
||||||
|
|
||||||
|
// 请求数据
|
||||||
|
async function getExampleList(data?: any): Promise<void> {
|
||||||
|
try {
|
||||||
|
const res = await getExampleListApi({
|
||||||
|
params: Object.assign(defalutParams, data || {})
|
||||||
|
})
|
||||||
|
if (res.code === '0000') {
|
||||||
|
total.value = res.data.total
|
||||||
|
tableData.value = res.data.list
|
||||||
|
}
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 查询
|
||||||
|
function searchSubmit(data: any) {
|
||||||
|
// 该方法重置了一些默认参数
|
||||||
|
currentChange(1)
|
||||||
|
getExampleList(data)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 重置
|
||||||
|
function resetSubmit(data: any) {
|
||||||
|
// 该方法重置了一些默认参数
|
||||||
|
currentChange(1)
|
||||||
|
getExampleList(data)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 展示多少条
|
||||||
|
function handleSizeChange(val: number) {
|
||||||
|
// 该方法重置了一些默认参数
|
||||||
|
sizeChange(val)
|
||||||
|
getExampleList()
|
||||||
|
}
|
||||||
|
|
||||||
|
// 展示第几页
|
||||||
|
function handleCurrentChange(val: number) {
|
||||||
|
// 该方法重置了一些默认参数
|
||||||
|
currentChange(val)
|
||||||
|
getExampleList()
|
||||||
|
}
|
||||||
|
|
||||||
|
// 删除多选
|
||||||
|
function dels(item?: any) {
|
||||||
|
delData(async() => {
|
||||||
|
let ids: string[]
|
||||||
|
if (item.id) {
|
||||||
|
ids = [item.id]
|
||||||
|
} else {
|
||||||
|
ids = selectionData.value.map((v: any) => {
|
||||||
|
return v.id
|
||||||
|
})
|
||||||
|
}
|
||||||
|
const res = await delsExampApi({
|
||||||
|
data: { ids }
|
||||||
|
})
|
||||||
|
if (res.code === '0000') {
|
||||||
|
Message.success('删除成功！')
|
||||||
|
getExampleList()
|
||||||
|
}
|
||||||
|
}, { hiddenVerify: item.id })
|
||||||
|
}
|
||||||
|
|
||||||
|
// 打开新页面
|
||||||
|
function open(row: any) {
|
||||||
|
push(row ? `/example-demo/example-edit?id=${row.id}` : `/example-demo/example-add`)
|
||||||
|
}
|
||||||
|
|
||||||
|
getExampleList()
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
vueBus.$on('success', (type: string) => {
|
||||||
|
if (type === 'add') {
|
||||||
|
currentChange(1)
|
||||||
|
}
|
||||||
|
getExampleList()
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
vueBus.$off('success')
|
||||||
|
})
|
||||||
|
|
||||||
|
return {
|
||||||
|
open,
|
||||||
|
searchData, searchSubmit, resetSubmit,
|
||||||
|
columns,
|
||||||
|
defalutParams,
|
||||||
|
loading,
|
||||||
|
tableData,
|
||||||
|
total,
|
||||||
|
handleSizeChange,
|
||||||
|
handleCurrentChange,
|
||||||
|
handleSelectionChange,
|
||||||
|
dels
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
</style>
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
// 通过mitt实现vue-bus通信
|
||||||
|
|
||||||
|
import mitt from 'mitt'
|
||||||
|
|
||||||
|
const bus: any = {}
|
||||||
|
|
||||||
|
const emitter = mitt()
|
||||||
|
|
||||||
|
bus.$on = emitter.on
|
||||||
|
bus.$off = emitter.off
|
||||||
|
bus.$emit = emitter.emit
|
||||||
|
|
||||||
|
export default bus
|
||||||
Loading…
Reference in New Issue