107 lines
3.5 KiB
Vue
107 lines
3.5 KiB
Vue
<script setup>
|
|
import { ref } from 'vue'
|
|
import { useGetImagesList } from '@/api/interview'
|
|
import { useCompanyStore } from '@/stores'
|
|
import { Delete } from '@element-plus/icons-vue'
|
|
import AddImageDialog from './components/AddImageDialog.vue'
|
|
import DeleteImageDialog from './components/DeleteImageDialog.vue'
|
|
|
|
const loading = ref(false)
|
|
|
|
const imageList = ref([])
|
|
|
|
const companyStore = useCompanyStore()
|
|
|
|
const getImagesList = async () => {
|
|
loading.value = true
|
|
const res = await useGetImagesList(companyStore.encoding)
|
|
imageList.value = res.data.data
|
|
loading.value = false
|
|
}
|
|
|
|
getImagesList()
|
|
|
|
const addImageDialog = ref()
|
|
const onAddEdit = () => {
|
|
console.log('添加')
|
|
addImageDialog.value.open()
|
|
}
|
|
const deleteImageDialog = ref()
|
|
const handleDelete = (row) => {
|
|
// console.log(row.id)
|
|
deleteImageDialog.value.openDialog(row)
|
|
}
|
|
</script>
|
|
<template>
|
|
<page-container title="面试官形象管理">
|
|
<template #extra>
|
|
<el-button type="primary" @click="onAddEdit">添加面试官形象 </el-button>
|
|
</template>
|
|
<el-table v-loading="loading" :data="imageList" stripe style="width: 100%">
|
|
<el-table-column type="index" label="序号" width="200" />
|
|
<el-table-column prop="picName" label="名称" width="200" />
|
|
|
|
<el-table-column prop="image" label="形象图片">
|
|
<template #default="{ row }">
|
|
<el-popover
|
|
:width="300"
|
|
popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px; width:450px; height:550px;"
|
|
v-if="row.image === ''"
|
|
>
|
|
<template #reference>
|
|
<video
|
|
:src="row.video"
|
|
style="height: 100px; width: 100px"
|
|
></video>
|
|
</template>
|
|
<video :src="row.video" style="height: 500px; width: 400px"></video>
|
|
</el-popover>
|
|
<el-popover
|
|
:width="300"
|
|
popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px; width:450px; height:550px;"
|
|
v-else
|
|
>
|
|
<template #reference>
|
|
<el-image :src="row.image" style="height: 100px; width: 100px" />
|
|
</template>
|
|
<el-image :src="row.image" style="height: 500px; width: 400px" />
|
|
</el-popover>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="picName" label="地址">
|
|
<template #default="{ row }">
|
|
<a :href="row.image || row.video" target="_blank">点我查看</a>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="createTime" label="创建时间" />
|
|
<el-table-column label="操作" width="200">
|
|
<template #default="{ row }">
|
|
<el-tooltip
|
|
class="box-item"
|
|
effect="dark"
|
|
content="删除"
|
|
placement="top-start"
|
|
>
|
|
<el-button
|
|
type="danger"
|
|
:icon="Delete"
|
|
@click="handleDelete(row)"
|
|
circle
|
|
plain
|
|
></el-button>
|
|
</el-tooltip>
|
|
</template>
|
|
</el-table-column>
|
|
<template #empty>
|
|
<el-empty description="没有数据" />
|
|
</template>
|
|
</el-table>
|
|
<AddImageDialog
|
|
ref="addImageDialog"
|
|
@getImagesList="getImagesList"
|
|
></AddImageDialog>
|
|
<DeleteImageDialog ref="deleteImageDialog" @getImagesList="getImagesList">
|
|
</DeleteImageDialog>
|
|
</page-container>
|
|
</template>
|