feat: 🎸 综合实例重构中
chenkl
5 years ago
parent
35879f8ecc
commit
5142e6e323
@ -0,0 +1,45 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
v-bind="getBindValue"
|
||||
destroy-on-close
|
||||
:close-on-click-modal="false"
|
||||
top="10vh"
|
||||
>
|
||||
<template v-if="slots.title" #title>
|
||||
<slot name="title" />
|
||||
</template>
|
||||
|
||||
<!-- 弹窗内容 -->
|
||||
<el-scrollbar class="com-dialog__content">
|
||||
<slot />
|
||||
</el-scrollbar>
|
||||
|
||||
<template v-if="slots.footer" #footer>
|
||||
<slot name="footer" />
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, computed } from 'vue'
|
||||
export default defineComponent({
|
||||
name: 'Dialog',
|
||||
setup(props, { slots, attrs }) {
|
||||
const getBindValue = computed((): any => {
|
||||
const bindValue = { ...attrs, ...props }
|
||||
return bindValue
|
||||
})
|
||||
|
||||
return {
|
||||
getBindValue,
|
||||
slots
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.com-dialog__content {
|
||||
height: 600px;
|
||||
}
|
||||
</style>
|
||||
@ -1,6 +1,6 @@
|
||||
import type { App } from 'vue'
|
||||
// import Button from '@/components/Button/index.vue'// Button组件
|
||||
import Dialog from './Dialog/index.vue'// Dialog组件
|
||||
|
||||
export function setupGlobCom(app: App<Element>): void {
|
||||
// app.component('AButton', Button)
|
||||
app.component('ComDialog', Dialog)
|
||||
}
|
||||
|
||||
@ -1,40 +1,88 @@
|
||||
// 常用的增删改查 hook
|
||||
import { reactive, ref } from 'vue'
|
||||
import { ElMessageBox } from 'element-plus'
|
||||
import { Message } from '_c/Message'
|
||||
|
||||
interface DefalutParams {
|
||||
pageIndex: number
|
||||
pageSize: number
|
||||
pageIndex: number // 页码
|
||||
pageSize: number // 页数
|
||||
}
|
||||
|
||||
interface DelsParmas {
|
||||
noDataText?: string // 没有选中数据时的提示
|
||||
text?: string // 删除前的提示
|
||||
hiddenVerify?: boolean // 是否隐藏前置判断
|
||||
}
|
||||
|
||||
export function useExample() {
|
||||
// 请求接口的基本参数
|
||||
const defalutParams = reactive<DefalutParams>({
|
||||
pageIndex: 1,
|
||||
pageSize: 10
|
||||
})
|
||||
|
||||
|
||||
// 多选数据
|
||||
const selectionData = ref<any[]>([])
|
||||
|
||||
// 表格数据
|
||||
const tableData = ref<any[]>([])
|
||||
|
||||
|
||||
// 表格加载状态
|
||||
const loading = ref<boolean>(true)
|
||||
|
||||
// 表格总条数
|
||||
const total = ref<number>(0)
|
||||
|
||||
|
||||
// 是否展示弹窗
|
||||
const dialogVisible = ref<boolean>(false)
|
||||
|
||||
// 弹窗标题
|
||||
const title = ref<string>('')
|
||||
|
||||
// 表格展示条目改变时候重置基本参数
|
||||
function sizeChange(val: number) {
|
||||
loading.value = true
|
||||
defalutParams.pageIndex = 1
|
||||
defalutParams.pageSize = val
|
||||
}
|
||||
|
||||
|
||||
// 表格分页改变时候重置基本参数
|
||||
function currentChange(val: number) {
|
||||
loading.value = true
|
||||
defalutParams.pageIndex = val
|
||||
}
|
||||
|
||||
// 删除多选
|
||||
function delData(callBack: Function, config?: DelsParmas) {
|
||||
if (selectionData.value.length === 0 && !config?.hiddenVerify) {
|
||||
Message.warning(config?.noDataText || '请选择需要删除的数据！')
|
||||
return
|
||||
}
|
||||
ElMessageBox.confirm(config?.text || '此操作将永久删除选中数据, 是否继续?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(async() => {
|
||||
await callBack()
|
||||
})
|
||||
}
|
||||
|
||||
// 多选变化的时候
|
||||
function handleSelectionChange(selection: any[]) {
|
||||
selectionData.value = selection
|
||||
}
|
||||
|
||||
return {
|
||||
defalutParams,
|
||||
tableData,
|
||||
selectionData,
|
||||
loading,
|
||||
total,
|
||||
dialogVisible,
|
||||
title,
|
||||
sizeChange,
|
||||
currentChange
|
||||
currentChange,
|
||||
delData,
|
||||
handleSelectionChange
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,18 +0,0 @@
|
||||
import { fetch } from '../../axios-config/axios'
|
||||
|
||||
import { AxiosPromise } from 'axios'
|
||||
|
||||
import { EmptyObjFun } from '@/types/glob'
|
||||
|
||||
interface PropsData {
|
||||
params?: any
|
||||
data?: any
|
||||
}
|
||||
|
||||
const methods: EmptyObjFun = {
|
||||
getExampleList: function({ params }: PropsData): AxiosPromise {
|
||||
return fetch({ url: '/example/list', method: 'get', params })
|
||||
}
|
||||
}
|
||||
|
||||
export default methods
|
||||
@ -0,0 +1,38 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-alert
|
||||
effect="dark"
|
||||
:closable="false"
|
||||
title="对 Element 的 Dialog 组件进行二次封装，支持所有原生参数。"
|
||||
type="info"
|
||||
style="margin-bottom: 20px;"
|
||||
/>
|
||||
<el-button type="primary" @click="visible = true">打开弹窗</el-button>
|
||||
|
||||
<com-dialog v-model="visible" title="提示">
|
||||
<div style="height: 1000px;">
|
||||
我是弹窗内容
|
||||
</div>
|
||||
<template #footer>
|
||||
<el-button @click="visible = false">取消</el-button>
|
||||
<el-button type="primary" @click="visible = false">确定</el-button>
|
||||
</template>
|
||||
</com-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref } from 'vue'
|
||||
export default defineComponent({
|
||||
// name: 'DialogDemo',
|
||||
setup() {
|
||||
const visible = ref<boolean>(false)
|
||||
return {
|
||||
visible
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</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,182 @@
|
||||
<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 v-model: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 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: {
|
||||
info: {
|
||||
type: Object as PropType<any>,
|
||||
default: () => null
|
||||
}
|
||||
},
|
||||
emits: ['close', 'success'],
|
||||
setup(props, { emit }) {
|
||||
const formRef = 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.info) {
|
||||
const id = (props.info as any).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)
|
||||
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() {
|
||||
emit('close')
|
||||
}
|
||||
|
||||
return {
|
||||
formRef,
|
||||
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[]
|
||||
}
|
||||
Loading…
Reference in New Issue