209 lines
6.8 KiB
Vue
209 lines
6.8 KiB
Vue
<template>
|
|
<div>
|
|
<div class="gva-search-box">
|
|
<el-form ref="elSearchFormRef" :inline="true" :model="searchInfo" label-width="0" class="demo-form-inline"
|
|
@keyup.enter="handleSubmitSearch">
|
|
<el-form-item style="width:300px">
|
|
<el-tooltip content="从名称中搜索" placement="top-start">
|
|
<el-input v-model="searchInfo.keyword" class="keyword" placeholder="请输入关键词" clearable style="width:100%" />
|
|
</el-tooltip>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" icon="search" @click="handleSubmitSearch">查询</el-button>
|
|
<el-button icon="refresh" @click="handleResetSearch">重置</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
<div class="gva-table-box">
|
|
<div class="gva-btn-list">
|
|
<el-button type="primary" icon="plus" @click="handleAdd">新增企业家</el-button>
|
|
<el-button icon="delete" style="margin-left: 10px;" :disabled="!multipleSelection.length"
|
|
@click="handleMultiDelete">删除</el-button>
|
|
</div>
|
|
|
|
<!-- 由于此处菜单跟左侧列表一一对应所以不需要分页 pageSize默认999 -->
|
|
<el-table ref="multipleTable" :data="tableData" row-key="ID" @selection-change="handleSelectionChange">
|
|
<el-table-column fixed type="selection" width="40" align="center" />
|
|
<el-table-column align="left" label="ID" min-width="40" prop="ID" />
|
|
<el-table-column align="left" label="首字母" min-width="50" prop="headChar">
|
|
<template #default="scope">
|
|
<el-text size="large" tag="b">{{ scope.row.headChar }}</el-text>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column align="left" label="头像" min-width="120" prop="avatar">
|
|
<template #default="scope">
|
|
<el-image v-if="scope.row.avatar" :src="scope.row.avatar" class="file" fit="cover"
|
|
:preview-src-list="[scope.row.avatar]" preview-teleported hide-on-click-modal close-on-press-escape
|
|
style="max-width: 70px; max-height: 90px" />
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column align="left" label="姓名/企业" min-width="120" prop="name">
|
|
<template #default="scope">
|
|
<el-link type="primary" :href="getEntrepreneurPreviewPath(scope.row.ID)" target="_blank">
|
|
<el-text size="large" tag="b">{{ scope.row.name }}</el-text>
|
|
</el-link>
|
|
<div>{{ scope.row.enterprise }}</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column align="left" label="介绍" min-width="300" prop="brief" class-name="text-truncate">
|
|
<template #default="scope">
|
|
<el-text :line-clamp="3">{{ scope.row.brief }}</el-text>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column align="left" fixed="right" label="操作" width="160">
|
|
<template #default="scope">
|
|
<el-button type="primary" link icon="edit" @click="handleRowEdit(scope.row.ID)">编辑</el-button>
|
|
<el-button type="danger" link icon="delete" @click="handleRowDelete(scope.row.ID)">删除</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<div class="gva-pagination">
|
|
<el-pagination layout="total, sizes, prev, pager, next, jumper" :current-page="page" :page-size="pageSize"
|
|
:page-sizes="[10, 30, 50, 100]" :total="total" @current-change="handleCurrentChange"
|
|
@size-change="handleSizeChange" />
|
|
</div>
|
|
</div>
|
|
|
|
<EntrepreneurEdit ref="elEditRef" :title="editTitle" @on-save="handlerFormSave" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
|
import { getEntrepreneurPreviewPath } from '@/utils/format'
|
|
import {
|
|
getEntrepreneurList,
|
|
deleteEntrepreneur,
|
|
deleteEntrepreneurByIds,
|
|
} from '@/api/entrepreneur'
|
|
import EntrepreneurEdit from '@/view/content/components/entrepreneurEdit.vue'
|
|
|
|
const page = ref(1)
|
|
const total = ref(0)
|
|
const pageSize = ref(10)
|
|
const searchInfo = ref({})
|
|
const tableData = ref([])
|
|
const multipleSelection = ref([])// 多选数据
|
|
const elSearchFormRef = ref()
|
|
|
|
const initSearchInfo = () => {
|
|
searchInfo.value.keyword = ''
|
|
page.value = 1
|
|
}
|
|
initSearchInfo()
|
|
const getTableData = async valid => {
|
|
const res = await getEntrepreneurList({ page: page.value, pageSize: pageSize.value, ...searchInfo.value })
|
|
if (res.code === 0) {
|
|
tableData.value = res.data.list
|
|
total.value = res.data.total
|
|
}
|
|
}
|
|
|
|
getTableData()
|
|
|
|
// 重置
|
|
const handleResetSearch = () => {
|
|
initSearchInfo()
|
|
getTableData()
|
|
}
|
|
// 搜索
|
|
const handleSubmitSearch = () => {
|
|
elSearchFormRef.value?.validate(async valid => {
|
|
if (!valid) return
|
|
getTableData()
|
|
})
|
|
}
|
|
// 分页
|
|
const handleSizeChange = (val) => {
|
|
pageSize.value = val
|
|
getTableData()
|
|
}
|
|
// 修改页面容量
|
|
const handleCurrentChange = (val) => {
|
|
page.value = val
|
|
getTableData()
|
|
}
|
|
|
|
// ------ 列表操作相关 -----
|
|
// 多选
|
|
const handleSelectionChange = (val) => {
|
|
multipleSelection.value = val
|
|
}
|
|
// 批量删除
|
|
const handleMultiDelete = () => {
|
|
ElMessageBox.confirm('确定要删除所选内容吗?', '请确认', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(async valid => {
|
|
const IDs = []
|
|
if (multipleSelection.value.length === 0) {
|
|
ElMessage({
|
|
type: 'warning',
|
|
message: '请选择要删除的数据'
|
|
})
|
|
return
|
|
}
|
|
multipleSelection.value &&
|
|
multipleSelection.value.map(item => {
|
|
IDs.push(item.ID)
|
|
})
|
|
const res = await deleteEntrepreneurByIds({ IDs })
|
|
if (res.code === 0) {
|
|
ElMessage({
|
|
type: 'success',
|
|
message: '删除成功'
|
|
})
|
|
if (tableData.value.length === IDs.length && page.value > 1) {
|
|
page.value--
|
|
}
|
|
getTableData()
|
|
}
|
|
})
|
|
}
|
|
// 删除
|
|
const handleRowDelete = (ID) => {
|
|
ElMessageBox.confirm('此操作将删除企业家, 是否继续?', '请确认', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(async valid => {
|
|
const res = await deleteEntrepreneur({ ID })
|
|
if (res.code === 0) {
|
|
ElMessage({
|
|
type: 'success',
|
|
message: '删除成功!'
|
|
})
|
|
if (tableData.value.length === 1 && page.value > 1) {
|
|
page.value--
|
|
}
|
|
getTableData()
|
|
}
|
|
})
|
|
}
|
|
|
|
const elEditRef = ref(null)
|
|
const editTitle = ref('')
|
|
// 添加
|
|
const handleAdd = () => {
|
|
editTitle.value = '添加企业家'
|
|
elEditRef.value.openPage({ id: 0 })
|
|
}
|
|
// 修改
|
|
const handleRowEdit = async (ID) => {
|
|
editTitle.value = '修改企业家-' + ID
|
|
elEditRef.value.openPage({ ID: ID })
|
|
}
|
|
// 保存后
|
|
const handlerFormSave = () => {
|
|
getTableData()
|
|
}
|
|
</script>
|
|
|
|
<style type="scss">
|
|
.admin-box .el-table td .cell {
|
|
line-height: 28px;
|
|
}
|
|
</style>
|