Compare commits
2 Commits
94319bbcf1
...
58fb85ba3a
| Author | SHA1 | Date |
|---|---|---|
 lijiaqi
|
58fb85ba3a | 5 months ago |
|
lijiaqi
|
93a89c6fa9 | 5 months ago |
9 changed files with 611 additions and 405 deletions
@ -1,61 +0,0 @@ |
||||
<script setup> |
||||
import { ref, defineExpose } from 'vue' |
||||
import { ElMessage } from 'element-plus' |
||||
const dialogVisible = ref(false) |
||||
|
||||
const formModel = ref({ |
||||
name: '', |
||||
desc: '', |
||||
}) |
||||
const formRef = ref() |
||||
const rules = { |
||||
name: [{ required: true, message: '请输入知识点名称', trigger: 'blur' }], |
||||
desc: [{ required: true, message: '请输入知识点简介', trigger: 'blur' }], |
||||
} |
||||
// 组件对外暴露一个open,基于open传过来的参数判断是添加还是编辑 |
||||
const open = (row) => { |
||||
// console.log(row) |
||||
formModel.value = { ...row } |
||||
dialogVisible.value = true |
||||
} |
||||
defineExpose({ open }) |
||||
// 校验，通过校验往下走 |
||||
const onSubmit = async () => { |
||||
// 进行预校验 |
||||
await formRef.value.validate() |
||||
// 看formModel传的是否有id |
||||
const isEdit = formModel.value.id |
||||
if (isEdit) { |
||||
ElMessage.success('编辑成功') |
||||
} else { |
||||
ElMessage.success('添加成功') |
||||
} |
||||
dialogVisible.value = false |
||||
} |
||||
</script> |
||||
<template> |
||||
<el-dialog |
||||
v-model="dialogVisible" |
||||
:title="formModel.id ? '编辑知识点' : '新增知识点'" |
||||
width="500" |
||||
> |
||||
<el-form :model="formModel" :rules="rules" ref="formRef"> |
||||
<el-form-item label="知识点名称" prop="name"> |
||||
<el-input v-model="formModel.name" placeholder="请输入知识点名称" /> |
||||
</el-form-item> |
||||
<el-form-item label="知识点简介" prop="desc"> |
||||
<el-input |
||||
v-model="formModel.desc" |
||||
type="textarea" |
||||
placeholder="请输入知识点简介" |
||||
/> |
||||
</el-form-item> |
||||
</el-form> |
||||
<template #footer> |
||||
<div class="dialog-footer"> |
||||
<el-button @click="dialogVisible = false">取消</el-button> |
||||
<el-button type="primary" @click="onSubmit">确认</el-button> |
||||
</div> |
||||
</template> |
||||
</el-dialog> |
||||
</template> |
||||
@ -1,114 +1,6 @@ |
||||
<script setup> |
||||
import { ref } from 'vue' |
||||
import { Delete, Edit } from '@element-plus/icons-vue' |
||||
import PageContainer from './components/PageContainer.vue' |
||||
import KnowledgeEdit from './components/KnowledgeEdit.vue' |
||||
import { ElMessage, ElMessageBox } from 'element-plus' |
||||
// const loading = ref(false) |
||||
const knowledgeList = [ |
||||
{ |
||||
id: '1', |
||||
name: '数学', |
||||
desc: '数学简介', |
||||
}, |
||||
{ |
||||
id: '1', |
||||
name: '物理', |
||||
desc: '物理简介', |
||||
}, |
||||
|
||||
{ |
||||
id: '1', |
||||
name: '语文', |
||||
desc: '语文简介', |
||||
}, |
||||
{ |
||||
id: '1', |
||||
name: '英语', |
||||
desc: '英语简介', |
||||
}, |
||||
] |
||||
// 通过ref绑定弹窗 |
||||
const dialog = ref() |
||||
|
||||
const onEditKnowledge = (row) => { |
||||
dialog.value.open(row) |
||||
} |
||||
const onAddKnowledge = () => { |
||||
dialog.value.open({}) |
||||
} |
||||
const onDelKnowledge = async () => { |
||||
// console.log('1') |
||||
await ElMessageBox.confirm('你确认删除该知识点信息吗？', '温馨提示', { |
||||
type: 'warning', |
||||
confirmButtonText: '确认', |
||||
cancelButtonText: '取消', |
||||
}) |
||||
ElMessage({ type: 'success', message: '删除成功' }) |
||||
} |
||||
const params = ref({ |
||||
pagenum: 1, |
||||
pagesize: 2, |
||||
}) |
||||
</script> |
||||
<script setup></script> |
||||
|
||||
<template> |
||||
<page-container title="知识点分类"> |
||||
<!-- v-slot可以替换为# --> |
||||
<template #extra> |
||||
<el-button type="primary" @click="onAddKnowledge()">新增</el-button> |
||||
<el-button type="primary">导出Excel</el-button> |
||||
</template> |
||||
<el-table |
||||
:data="knowledgeList" |
||||
style="width: 100%; height: 100%" |
||||
:header-cell-style="{ textAlign: 'center' }" |
||||
> |
||||
<el-table-column align="center" type="index" label="编号" width="100" /> |
||||
<el-table-column align="center" label="名称" prop="name" /> |
||||
<el-table-column align="center" label="简介" prop="desc" /> |
||||
|
||||
<el-table-column align="center" label="操作"> |
||||
<!-- 作用域插槽 --> |
||||
<!-- row：knowledgeList的每一项 &index：下标 --> |
||||
<template #default="{ row }"> |
||||
<el-button |
||||
:icon="Edit" |
||||
circle |
||||
plain |
||||
type="primary" |
||||
@click="onEditKnowledge(row)" |
||||
></el-button> |
||||
<el-button |
||||
:icon="Delete" |
||||
circle |
||||
plain |
||||
type="danger" |
||||
@click="onDelKnowledge(row)" |
||||
></el-button> |
||||
</template> |
||||
</el-table-column> |
||||
<template #empty> |
||||
<el-empty description="暂无数据"></el-empty> |
||||
</template> |
||||
</el-table> |
||||
<el-pagination |
||||
v-model:current-page="params.pagenum" |
||||
v-model:page-size="params.pagesize" |
||||
:page-sizes="[2, 3, 5, 10]" |
||||
:small="small" |
||||
:background="true" |
||||
layout=" jumper,total, sizes, prev, pager, next" |
||||
:total="knowledgeList.length" |
||||
@size-change="handleSizeChange" |
||||
@current-change="handleCurrentChange" |
||||
style="margin-top: 20px; justify-content: flex-end" |
||||
/> |
||||
<knowledge-edit ref="dialog"></knowledge-edit> |
||||
</page-container> |
||||
<dev>知识点</dev> |
||||
</template> |
||||
<style lang="scss" scoped> |
||||
.el-table { |
||||
overflow: hidden; |
||||
} |
||||
</style> |
||||
<style lang="scss" scoped></style> |
||||
|
||||
Loading…
Reference in new issue