114 lines
3.1 KiB
Vue
114 lines
3.1 KiB
Vue
<template>
|
|
<div class="tit" v-if="baseData.tit">{{ baseData.tit }}</div>
|
|
|
|
<div style="float: right;"> <el-dropdown>
|
|
<span class="el-dropdown-link">
|
|
操作
|
|
<el-icon class="el-icon--right">
|
|
<arrow-down />
|
|
</el-icon>
|
|
</span>
|
|
<template #dropdown>
|
|
<el-dropdown-menu>
|
|
<el-dropdown-item @click="handleAdd" v-perms="['project.project/edit']">添加</el-dropdown-item>
|
|
<export-data :fetch-fun="baseData.fetchFun" :params="baseData.queryParams" :page-size="15"
|
|
:isMenuLi="true" />
|
|
</el-dropdown-menu>
|
|
</template>
|
|
</el-dropdown>
|
|
</div>
|
|
|
|
<el-table :data="pager.lists" style="width: 100%">
|
|
<el-table-column :label="item.label" :prop='item.prop' v-for="(item, index) in baseData.columnList"
|
|
:key="index" />
|
|
<el-table-column label="操作" fixed="right" align="center" v-if="!isAction">
|
|
|
|
<template #default="{ row }">
|
|
<el-button v-perms="['project.project/edit']" type="primary" link @click="handleEdit(row)">
|
|
编辑
|
|
</el-button>
|
|
<el-button v-perms="['project.project/delete']" type="danger" link @click="handleDelete(row.id)">
|
|
删除
|
|
</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<div class="flex justify-end mt-4">
|
|
<pagination v-model="pager" @change="getLists" />
|
|
</div>
|
|
<EditPopup v-if="showEdit" ref="editRef" @success="getLists" @close="showEdit = false" :project="project" />
|
|
</template>
|
|
|
|
<script setup>
|
|
|
|
import { ref, defineProps, defineAsyncComponent } from "vue"
|
|
import { usePaging } from '@/hooks/usePaging'
|
|
import feedback from '@/utils/feedback'
|
|
|
|
const props = defineProps({
|
|
baseData: Object,
|
|
project: Object,
|
|
editPath: String,
|
|
isAction: Boolean,
|
|
})
|
|
|
|
const EditPopup = defineAsyncComponent(() => import(`../../${props.editPath}/edit.vue`));
|
|
|
|
// edit
|
|
const editRef = ref(null)
|
|
const showEdit = ref(false)
|
|
|
|
// 添加
|
|
const handleAdd = async () => {
|
|
showEdit.value = true
|
|
// FIXME:网络请求阻塞页面的打开
|
|
setTimeout(() => {
|
|
editRef.value?.open('add')
|
|
}, 700);
|
|
}
|
|
|
|
// 编辑
|
|
const handleEdit = async (data) => {
|
|
let res = await props.baseData.editApi({ id: data.id })
|
|
showEdit.value = true
|
|
// FIXME:网络请求阻塞页面的打开
|
|
setTimeout(() => {
|
|
editRef.value?.open('edit')
|
|
editRef.value?.setFormData(res)
|
|
}, 700);
|
|
|
|
}
|
|
|
|
|
|
// 删除
|
|
const handleDelete = async (id) => {
|
|
await feedback.confirm('确定要删除？')
|
|
await props.baseData.delApi({ id })
|
|
getLists()
|
|
}
|
|
|
|
// 分页相关
|
|
const { pager, getLists, resetParams, resetPage } = usePaging({
|
|
fetchFun: props.baseData.fetchFun,
|
|
params: props.baseData.queryParams || ""
|
|
})
|
|
|
|
getLists()
|
|
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.tit {
|
|
font-size: 1.2em;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
|
|
.example-showcase .el-dropdown-link {
|
|
cursor: pointer;
|
|
color: var(--el-color-primary);
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
</style> |