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