Skip to content

S
saas-hr-admin
提交 931e2ec3 authored 作者: matian's avatar matian
浏览文件
操作

chore:sass管理系统前端页面开发

上级 c76b5aa7
隐藏空白字符变更
内嵌 并排
正在显示 包含 634 行增加 和 106 行删除
src/components/base/AppList.vue
浏览文件 @ 931e2ec3
......@@ -18,16 +18,29 @@ const props = withDefaults(
hasPagination?: boolean
limit?: number
}>(),
{ hasPagination: true, limit: 10 }
{
hasPagination: true,
limit: 10,
data() {
return []
}
}
)
const filterFormRef = ref()
const loading = ref(false)
const tableRef = ref()
const dataList = ref([])
const dataList = ref<any[]>([])
const page = reactive({ total: 0, size: props.limit, currentPage: 1 })
const params = reactive({ page: page.currentPage, page_size: page.size, ...props.remote?.params })
const params = reactive({ ...props.remote?.params })
watch(
() => props.data,
list => {
dataList.value = list || []
},
{ immediate: true }
)
// 获取数据
const fetchList = (isReset = false) => {
......@@ -45,7 +58,7 @@ const fetchList = (isReset = false) => {
// 翻页参数设置
if (props.hasPagination) {
requestParams.page = page.currentPage
requestParams.page_size = page.size
requestParams['per-page'] = page.size
}
// 接口请求之前
if (beforeRequest) {
......@@ -57,25 +70,27 @@ const fetchList = (isReset = false) => {
// }
// }
loading.value = true
httpRequest(requestParams)
.then((res: any) => {
const { list = [], total = 0 } = callback ? callback(res.data) : res.data || {}
page.total = total
dataList.value = list
})
.catch(() => {
page.total = 0
dataList.value = []
})
.finally(() => {
loading.value = false
})
return (
httpRequest(requestParams)
.then((res: any) => {
const { list = [], total = 0 } = callback ? callback(res.data, requestParams) : res.data || {}
page.total = total
dataList.value = list
})
// .catch(() => {
// page.total = 0
// dataList.value = []
// })
.finally(() => {
loading.value = false
})
)
}
// 搜索
const search = () => {
page.currentPage = 1
fetchList()
return fetchList()
}
// 重置
......@@ -85,12 +100,12 @@ const reset = () => {
// 初始化页码
page.currentPage = 1
// 刷新列表
fetchList(true)
return fetchList(true)
}
// 刷新
const refetch = (isForce = false) => {
isForce ? reset() : fetchList()
return isForce ? reset() : fetchList()
}
// 页数改变
......@@ -104,7 +119,7 @@ onMounted(() => {
fetchList()
})
defineExpose({ refetch })
defineExpose({ refetch, tableRef })
</script>
<template>
......@@ -125,6 +140,7 @@ defineExpose({ refetch })
v-bind="item"
clearable
@change="search"
style="width: 200px"
v-if="item.type === 'input'"
/>
<!-- select -->
......@@ -157,7 +173,15 @@ defineExpose({ refetch })
<!-- 主体 -->
<div class="table-list-bd">
<slot name="body" v-bind="{ data: dataList }">
<el-table :data="dataList" v-loading="loading" v-bind="$attrs" style="height: 100%" ref="tableRef">
<el-table
:data="dataList"
v-loading="loading"
v-bind="$attrs"
style="height: 100%"
ref="tableRef"
:header-cell-style="{ background: '#EFEFEF' }"
stripe
>
<el-table-column v-bind="item" v-for="item in columns" :key="item.prop">
<template #default="scope" v-if="item.slots || item.computed">
<slot :name="item.slots" v-bind="scope" v-if="item.slots"></slot>
......@@ -191,12 +215,13 @@ defineExpose({ refetch })
</template>
<style lang="scss">
.table-list {
height: 100%;
display: flex;
flex-direction: column;
box-sizing: border-box;
}
// .table-list {
// height: 100%;
// display: flex;
// flex-direction: column;
// box-sizing: border-box;
// }
.table-list-hd {
display: flex;
margin-bottom: 10px;
......@@ -204,9 +229,9 @@ defineExpose({ refetch })
.table-list-filter {
flex: 1;
}
.table-list-bd {
flex: 1;
}
// .table-list-bd {
// flex: 1;
// }
.table-list-ft {
padding: 10px 0;
display: flex;
......
src/modules/alumni/index.ts
浏览文件 @ 931e2ec3
......@@ -7,7 +7,7 @@ export const routes: Array<RouteRecordRaw> = [
component: AppLayout,
children: [
{ path: '', component: () => import('./views/List.vue') },
{ path: 'view/:id', component: () => import('./views/View.vue'), props: true }
{ path: '/alumni/view', component: () => import('./views/View.vue'), props: true }
]
}
]
src/modules/alumni/views/List.vue
浏览文件 @ 931e2ec3
<script setup lang="ts">
import { getVideoList } from '../api'
const appList = ref()
const listOptions = {
remote: {
httpRequest: getVideoList,
params: { type: '' }
},
filters: [
{ type: 'input', prop: 'company_name', placeholder: '企业名称' },
{ type: 'input', prop: 'company_name', placeholder: '企业邮箱' },
{ type: 'input', prop: 'company_name', placeholder: '社会统一信用代码' },
{ type: 'select', prop: 'company_name', placeholder: '公司运营性质' }
{ type: 'input', prop: 'username', placeholder: '姓名' },
{ type: 'input', prop: 'sex', placeholder: '性别' },
{ type: 'input', prop: 'class_id', placeholder: '班级' },
{ type: 'select', prop: 'province', placeholder: '省份' },
{ type: 'select', prop: 'city', placeholder: '城市' },
{ type: 'select', prop: 'industry', placeholder: '所在行业' },
{ type: 'input', prop: 'workplace', placeholder: '工作单位' }
],
columns: [
{ label: '封面', slots: 'table-cover', width: 224 },
{ label: 'ID', prop: 'id' },
{ label: '标题', prop: 'course_name' },
{ label: '类型', prop: 'type_name' },
{ label: '浏览量', prop: 'pv' },
{ label: '创建时间', prop: 'created_time' },
{ label: '操作', slots: 'table-operate', width: 230, align: 'right' }
{ label: '姓名', prop: 'username', align: 'center' },
{ label: '性别', prop: 'sex', align: 'center' },
{ label: '班级', prop: 'class_id', align: 'center' },
{ label: '省份', prop: 'province', align: 'center' },
{ label: '城市', prop: 'city', align: 'center' },
{ label: '所在行业', prop: 'industry', align: 'center' },
{ label: '工作单位', prop: 'workplace', align: 'center' },
{ label: '是否已注册', prop: 'created_time', align: 'center' },
{ label: '操作', slots: 'table-operate', width: 230, align: 'center' }
],
data: [
{
username: 'lisi'
}
]
}
</script>
......@@ -31,8 +38,8 @@ const listOptions = {
<AppList v-bind="listOptions" ref="appList">
<template #table-operate="{ row }">
<el-space>
<router-link :to="`/company/view/${row.id}`">
<el-button plain>查看</el-button>
<router-link :to="`/alumni/view?${row.id}`">
<el-link type="primary">查看</el-link>
</router-link>
</el-space>
</template>
......
src/modules/alumni/views/View.vue
浏览文件 @ 931e2ec3
<script setup lang="ts"></script>
<script setup lang="ts">
const route = useRoute()
//审核通过
const handleAdultSuccess = () => {
console.log('审核通过')
history.go(-1)
}
//审核不通过
const handleAdultFailed = () => {
console.log('审核不通过')
history.go(-1)
}
const detailList = reactive({
username: 'lisi',
sex: '男',
birthday: '1999-11-12',
graduating_institution: '清华',
specialty: '计算机科学与技术',
highest_qualification: '博士',
province: '北京',
city: '北京',
project_prefix: 'x1',
class_id: '11',
workplace: '紫荆',
industry: '专业技术类',
department: '研发',
position: '前端开发',
status: '11',
num: 100
})
</script>
<template>
<AppCard> </AppCard>
<AppCard title="校友详情">
<el-descriptions :column="3" title="基本信息">
<el-descriptions-item label="姓名:">{{ detailList.username }}</el-descriptions-item>
<el-descriptions-item label="性别:">{{ detailList.sex }}</el-descriptions-item>
<el-descriptions-item label="出生日期:">{{ detailList.birthday }}</el-descriptions-item>
<el-descriptions-item label="毕业院校:">
{{ detailList.graduating_institution }}
</el-descriptions-item>
<el-descriptions-item label="专业:">
{{ detailList.specialty }}
</el-descriptions-item>
<el-descriptions-item label="最高学历:">
{{ detailList.highest_qualification }}
</el-descriptions-item>
<el-descriptions-item label="省份:">{{ detailList.province }}</el-descriptions-item>
<el-descriptions-item label="城市:">{{ detailList.city }}</el-descriptions-item>
<el-descriptions-item label="项目:">{{ detailList.project_prefix }}</el-descriptions-item>
<el-descriptions-item label="班级:">{{ detailList.class_id }}</el-descriptions-item>
<el-descriptions-item label="工作单位:">{{ detailList.workplace }}</el-descriptions-item>
<el-descriptions-item label="行业类别:">{{ detailList.industry }}</el-descriptions-item>
<el-descriptions-item label="工作部门:">{{ detailList.department }}</el-descriptions-item>
<el-descriptions-item label="工作职位:">{{ detailList.position }}</el-descriptions-item>
</el-descriptions>
<el-divider />
<el-descriptions :column="3" title="企业信息">
<el-descriptions-item label="状态:">{{ detailList.status }}</el-descriptions-item>
<el-descriptions-item label="工作单位:">{{ detailList.workplace }}</el-descriptions-item>
<el-descriptions-item label="岗位数量:">{{ detailList.num }}</el-descriptions-item> // 待修改
</el-descriptions>
<el-row justify="end" v-if="route.query.isAdult === '1'">
<el-button type="primary" @click="handleAdultSuccess">审批通过</el-button>
<el-button type="warning" @click="handleAdultFailed"> 审批不通过</el-button>
</el-row>
</AppCard>
</template>
<style lang="scss" scoped>
:deep(.el-descriptions__title) {
font-size: 18px;
font-weight: 500;
color: #333333;
}
:deep(.el-descriptions__label) {
font-size: 14px;
font-weight: 400;
color: #666;
}
:deep(.el-descriptions__content) {
font-size: 16px;
font-weight: 400;
color: #333333;
}
</style>
src/modules/compnay/index.ts
浏览文件 @ 931e2ec3
......@@ -7,7 +7,7 @@ export const routes: Array<RouteRecordRaw> = [
component: AppLayout,
children: [
{ path: '', component: () => import('./views/List.vue') },
{ path: 'view/:id', component: () => import('./views/View.vue'), props: true }
{ path: '/company/view', component: () => import('./views/View.vue'), props: true }
]
}
]
src/modules/compnay/views/List.vue
浏览文件 @ 931e2ec3
<script setup lang="ts">
import { getVideoList } from '../api'
// import { getVideoList } from '../api'
const appList = ref()
const listOptions = {
remote: {
httpRequest: getVideoList,
params: { type: '' }
// httpRequest: getVideoList,
params: { status: '' }
},
filters: [
{ type: 'input', prop: 'company_name', placeholder: '企业名称' },
{ type: 'input', prop: 'company_name', placeholder: '企业邮箱' },
{ type: 'input', prop: 'company_name', placeholder: '社会统一信用代码' },
{ type: 'select', prop: 'company_name', placeholder: '公司运营性质' }
{ type: 'input', prop: 'name', placeholder: '企业名称' },
{ type: 'input', prop: 'email', placeholder: '企业邮箱' },
{ type: 'input', prop: 'code', placeholder: '社会统一信用代码' },
{
type: 'select',
prop: 'nature',
placeholder: '公司运营性质',
options: [
{ label: '国有企业', value: '1' },
{ label: '集体企业', value: '2' },
{ label: '联营企业', value: '3' },
{ label: '股份合作制企业', value: '4' },
{ label: '私营企业', value: '5' },
{ label: '个体户', value: '6' },
{ label: '合伙企业', value: '7' },
{ label: '有限责任公司', value: '8' },
{ label: '股份有限公司营业性质', value: '9' }
]
}
],
columns: [
{ label: '封面', slots: 'table-cover', width: 224 },
{ label: 'ID', prop: 'id' },
{ label: '标题', prop: 'course_name' },
{ label: '类型', prop: 'type_name' },
{ label: '浏览量', prop: 'pv' },
{ label: '创建时间', prop: 'created_time' },
{ label: '操作', slots: 'table-operate', width: 230, align: 'right' }
{ label: '编号', prop: 'id' },
{ label: '企业名称', prop: 'name' },
{ label: '企业邮箱', prop: 'email' },
{ label: '公司运营性质', prop: 'nature' },
{ label: '社会统一信用代码', prop: 'code' },
{ label: '状态', prop: 'status', slots: 'status' },
{ label: '操作', slots: 'table-operate', width: 230, align: 'center' }
],
data: [
{
id: '111',
name: '紫荆',
email: '1213@ezijing.com',
code: '121234353454',
nature: '有限责任公司',
status: '3',
business_licence:
'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fnimg.ws.126.net%2F%3Furl%3Dhttp%253A%252F%252Fdingyue.ws.126.net%252F2021%252F1229%252Ff8dff185j00r4v73k0013d200rj00k1g00rj00k1.jpg%26thumbnail%3D650x2147483647%26quality%3D80%26type%3Djpg&refer=http%3A%2F%2Fnimg.ws.126.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1657875458&t=451e10e7f8dacef65ff5b2a33229927b'
},
{
id: '222',
name: '紫荆',
email: '1213@ezijing.com',
code: '121234353454',
nature: '有限责任公司',
status: '3',
business_licence:
'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fnimg.ws.126.net%2F%3Furl%3Dhttp%253A%252F%252Fdingyue.ws.126.net%252F2021%252F1229%252Ff8dff185j00r4v73k0013d200rj00k1g00rj00k1.jpg%26thumbnail%3D650x2147483647%26quality%3D80%26type%3Djpg&refer=http%3A%2F%2Fnimg.ws.126.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1657875458&t=451e10e7f8dacef65ff5b2a33229927b'
}
]
}
const handleStatus = (row: any) => {
console.log(row)
}
</script>
<template>
<AppCard>
<AppList v-bind="listOptions" ref="appList">
<template v-slot:status="{ row }">
<el-switch
v-if="row.status === '1' || row.status === '2'"
size="large"
v-model="row.status"
active-value="1"
inactive-value="2"
@change="handleStatus(row)"
active-text="启用"
inactive-text="禁用"
inline-prompt
></el-switch>
<div v-else-if="row.status === '3'">待审核</div>
<div v-else-if="row.status === '4'">审核不通过</div>
</template>
<template #table-operate="{ row }">
<el-space>
<router-link :to="`/company/view/${row.id}`">
<el-button plain>查看</el-button>
<router-link :to="`/company/view?id=${row.id}`">
<el-link type="primary">查看</el-link>
</router-link>
<router-link :to="`/company/view?id=${row.id}&isAdult=1`">
<el-link type="primary">审批</el-link>
</router-link>
</el-space>
</template>
......
src/modules/compnay/views/View.vue
浏览文件 @ 931e2ec3
<script setup lang="ts"></script>
<script setup lang="ts">
const route = useRoute()
const router = useRouter()
//审核通过
const handleAdultSuccess = () => {
console.log('审核通过')
router.push('/company')
}
//审核不通过
const handleAdultFailed = () => {
console.log('审核不通过')
router.push('/company')
}
const detailList = reactive({
name: '紫荆',
email: '1213@ezijing.com',
code: '121234353454',
nature: '有限责任公司',
business_licence:
'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fnimg.ws.126.net%2F%3Furl%3Dhttp%253A%252F%252Fdingyue.ws.126.net%252F2021%252F1229%252Ff8dff185j00r4v73k0013d200rj00k1g00rj00k1.jpg%26thumbnail%3D650x2147483647%26quality%3D80%26type%3Djpg&refer=http%3A%2F%2Fnimg.ws.126.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1657875458&t=451e10e7f8dacef65ff5b2a33229927b',
logo: 'https://zws-imgs-pub.ezijing.com/static/public/0411340f9306b908eda54b5d66668f50.png',
desc: '紫荆教育全称是清控紫荆（北京）教育科技股份有限公司，是清华控股有限公司2015年以清华大学五道口金融学院教研成果为基础发起设立。“紫荆”二字取自清华大学校花“紫荆花”，寓意“自强不息，向美而行”。'
})
</script>
<template>
<AppCard> </AppCard>
<AppCard title="公司详情">
<el-descriptions :column="2" border>
<el-descriptions-item label="公司名称:">{{ detailList.name }}</el-descriptions-item>
<el-descriptions-item label="企业邮箱:">{{ detailList.email }}</el-descriptions-item>
<el-descriptions-item label="社会统一信用代码:">{{ detailList.code }}</el-descriptions-item>
<el-descriptions-item label="公司运营性质:">
{{ detailList.nature }}
</el-descriptions-item>
<el-descriptions-item label="营业执照附件:">
<el-image :src="detailList.business_licence" style="width: 300px"></el-image>
</el-descriptions-item>
<el-descriptions-item label="公司Logo:">
<el-image :src="detailList.logo" style="width: 300px"></el-image>
</el-descriptions-item>
<el-descriptions-item label="公司介绍:" :span="2">
<div class="project_intro">
{{ detailList.desc }}
</div>
</el-descriptions-item>
</el-descriptions>
<el-row justify="end" v-if="route.query.isAdult === '1'">
<el-button type="primary" @click="handleAdultSuccess">审批通过</el-button>
<el-button type="warning" @click="handleAdultFailed"> 审批不通过</el-button>
</el-row>
</AppCard>
</template>
<style lang="scss" scoped>
.project_intro {
padding: 27px 25px 30px 27px;
background: rgba(248, 248, 248, 0.39);
opacity: 1;
border-radius: 20px;
margin-top: 16px;
font-size: 14px;
color: #666666;
}
:deep(.el-descriptions__label) {
font-size: 14px;
font-weight: 400;
color: #666;
}
:deep(.el-descriptions__content) {
font-size: 16px;
font-weight: 400;
color: #333333;
}
</style>
src/modules/job/index.ts
浏览文件 @ 931e2ec3
......@@ -7,7 +7,7 @@ export const routes: Array<RouteRecordRaw> = [
component: AppLayout,
children: [
{ path: '', component: () => import('./views/List.vue') },
{ path: 'view/:id', component: () => import('./views/View.vue'), props: true }
{ path: '/job/view', component: () => import('./views/View.vue'), props: true }
]
}
]
src/modules/job/views/List.vue
浏览文件 @ 931e2ec3
<script setup lang="ts">
import { getVideoList } from '../api'
// import { getVideoList } from '../api'
const appList = ref()
const listOptions = {
remote: {
httpRequest: getVideoList,
// httpRequest: getVideoList,
params: { type: '' }
},
filters: [
{ type: 'input', prop: 'company_name', placeholder: '企业名称' },
{ type: 'input', prop: 'company_name', placeholder: '企业邮箱' },
{ type: 'input', prop: 'company_name', placeholder: '社会统一信用代码' },
{ type: 'select', prop: 'company_name', placeholder: '公司运营性质' }
{
type: 'select',
prop: 'company_name',
placeholder: '学历要求',
options: [
{ label: '高中或以下', value: '1' },
{ label: '大专', value: '2' },
{ label: '本科', value: '3' },
{ label: '硕士研究生', value: '4' },
{ label: '博士', value: '5' }
]
},
{ type: 'input', prop: 'company_name', placeholder: '工作地点' },
{ type: 'input', prop: 'company_name', placeholder: '岗位名称' },
{
type: 'select',
prop: 'company_name',
placeholder: '岗位类型',
options: [
{ label: '管理类', value: '1' },
{ label: '专业技术类', value: '2' },
{ label: '专业支持类', value: '3' },
{ label: '营销类', value: '4' },
{ label: '操作类', value: '5' }
]
}
],
columns: [
{ label: '封面', slots: 'table-cover', width: 224 },
{ label: 'ID', prop: 'id' },
{ label: '标题', prop: 'course_name' },
{ label: '类型', prop: 'type_name' },
{ label: '浏览量', prop: 'pv' },
{ label: '创建时间', prop: 'created_time' },
{ label: '操作', slots: 'table-operate', width: 230, align: 'right' }
]
{ label: '编号', prop: 'id', width: 224 },
{ label: '岗位名称', prop: 'name' },
{ label: '岗位类型', prop: 'type' },
{ label: '地点', prop: 'work_locations' },
{ label: '学历要求', prop: 'education' },
{
label: '薪酬范围',
prop: 'salary',
computed(row: any) {
return row.row.salary_min + '-' + row.row.salary_max
}
},
{ label: '企业名称', prop: 'company_name' },
{ label: '企业邮箱', prop: 'email' },
{ label: '状态', prop: 'status', slots: 'status' },
{ label: '操作', slots: 'table-operate', width: 230, align: 'center' }
],
data: [{ id: '111', name: '岗位名称', salary_min: '1000', salary_max: '2000' }]
}
const handleStatus = (row: any) => {
console.log(row)
}
</script>
<template>
<AppCard>
<AppList v-bind="listOptions" ref="appList">
<template v-slot:status="{ row }">
<el-switch
v-if="row.status === '1' || row.status === '2'"
size="large"
v-model="row.status"
active-value="1"
inactive-value="2"
@change="handleStatus(row)"
active-text="启用"
inactive-text="禁用"
inline-prompt
></el-switch>
<div v-else-if="row.status === '3'">待审核</div>
<div v-else-if="row.status === '4'">审核不通过</div>
</template>
<template #table-operate="{ row }">
<el-space>
<router-link :to="`/company/view/${row.id}`">
<el-button plain>查看</el-button>
</router-link>
<el-space>
<router-link :to="`/job/view?id=${row.id}`">
<el-link type="primary">查看</el-link>
</router-link>
<router-link :to="`/job/view?id=${row.id}&isAdult=1`">
<el-link type="primary">审批</el-link>
</router-link>
</el-space>
</el-space>
</template>
</AppList>
......
src/modules/job/views/View.vue
浏览文件 @ 931e2ec3
<script setup lang="ts"></script>
<script setup lang="ts">
const route = useRoute()
//审核通过
const handleAdultSuccess = () => {
console.log('审核通过')
history.go(-1)
}
//审核不通过
const handleAdultFailed = () => {
console.log('审核不通过')
history.go(-1)
}
const detailList = reactive({
name: '北京奔驰技术工人',
type: '专业技术类',
work_locations: '北京',
company_name: '北京奔驰汽车销售有限公司',
education: '本科',
salary_min: '8000',
salary_max: '10000',
desc: '紫荆教育全称是清控紫荆（北京）教育科技股份有限公司，是清华控股有限公司2015年以清华大学五道口金融学院教研成果为基础发起设立。“紫荆”二字取自清华大学校花“紫荆花”，寓意“自强不息，向美而行”。'
})
</script>
<template>
<AppCard> </AppCard>
<AppCard title="岗位详情">
<el-descriptions :column="2">
<el-descriptions-item label="岗位名称:">{{ detailList.name }}</el-descriptions-item>
<el-descriptions-item label="岗位类型:">{{ detailList.type }}</el-descriptions-item>
<el-descriptions-item label="岗位地点:">{{ detailList.work_locations }}</el-descriptions-item>
<el-descriptions-item label="学历要求:">
{{ detailList.education }}
</el-descriptions-item>
<el-descriptions-item label="公司名称:">
{{ detailList.company_name }}
</el-descriptions-item>
<el-descriptions-item label="薪资范围:">
{{ detailList.salary_min }}-{{ detailList.salary_max }}
</el-descriptions-item>
<el-descriptions-item label="岗位介绍:">
<div class="project_intro">{{ detailList.desc }}</div></el-descriptions-item
>
</el-descriptions>
<el-row justify="end" v-if="route.query.isAdult === '1'">
<el-button type="primary" @click="handleAdultSuccess">审批通过</el-button>
<el-button type="warning" @click="handleAdultFailed"> 审批不通过</el-button>
</el-row>
</AppCard>
</template>
<style lang="scss" scoped>
.project_intro {
padding: 27px 25px 30px 27px;
background: rgba(248, 248, 248, 0.39);
opacity: 1;
border-radius: 20px;
margin-top: 16px;
font-size: 14px;
color: #666666;
}
:deep(.el-descriptions__label) {
font-size: 14px;
font-weight: 400;
color: #666;
}
:deep(.el-descriptions__content) {
font-size: 16px;
font-weight: 400;
color: #333333;
}
</style>
src/modules/project/index.ts
浏览文件 @ 931e2ec3
......@@ -7,7 +7,7 @@ export const routes: Array<RouteRecordRaw> = [
component: AppLayout,
children: [
{ path: '', component: () => import('./views/List.vue') },
{ path: 'view/:id', component: () => import('./views/View.vue'), props: true }
{ path: '/project/view', component: () => import('./views/View.vue'), props: true }
]
}
]
src/modules/project/views/List.vue
浏览文件 @ 931e2ec3
<script setup lang="ts">
import { getVideoList } from '../api'
// import { getVideoList } from '../api'
const appList = ref()
const listOptions = {
remote: {
httpRequest: getVideoList,
params: { type: '' }
// httpRequest: getVideoList,
params: { status: '' }
},
filters: [
{ type: 'input', prop: 'company_name', placeholder: '企业名称' },
{ type: 'input', prop: 'company_name', placeholder: '企业邮箱' },
{ type: 'input', prop: 'company_name', placeholder: '社会统一信用代码' },
{ type: 'select', prop: 'company_name', placeholder: '公司运营性质' }
{ type: 'input', prop: 'name', placeholder: '项目名称' },
{
type: 'select',
prop: 'type',
placeholder: '项目类型',
options: [
{ label: '合作项目', value: '1' },
{ label: '创新项目', value: '2' },
{ label: '招聘项目', value: '3' }
]
}
],
columns: [
{ label: '封面', slots: 'table-cover', width: 224 },
{ label: 'ID', prop: 'id' },
{ label: '标题', prop: 'course_name' },
{ label: '类型', prop: 'type_name' },
{ label: '浏览量', prop: 'pv' },
{ label: '创建时间', prop: 'created_time' },
{ label: '操作', slots: 'table-operate', width: 230, align: 'right' }
{ label: '编号', prop: 'id', align: 'center' },
{ label: '项目名称', prop: 'name', align: 'center' },
{ label: '项目类型', prop: 'type', align: 'center' },
{ label: '开始时间', prop: 'start_time', align: 'center' },
{ label: '结束时间', prop: 'end_time', align: 'center' },
{ label: '联系人', prop: 'contact', align: 'center' },
{ label: '项目所属公司 ', prop: 'company_name', align: 'center' }, // 待修改
{ label: '状态', prop: 'status', slots: 'status', align: 'center' },
{ label: '操作', slots: 'table-operate', width: 230, align: 'center' }
],
data: [
{
status: '1',
id: '11'
}
]
}
const handleStatus = (row: any) => {
console.log(row)
}
</script>
<template>
<AppCard>
<AppList v-bind="listOptions" ref="appList">
<template v-slot:status="{ row }">
<el-switch
v-if="row.status === '1' || row.status === '2'"
size="large"
v-model="row.status"
active-value="1"
inactive-value="2"
@change="handleStatus(row)"
active-text="启用"
inactive-text="禁用"
inline-prompt
></el-switch>
<div v-else-if="row.status === '3'">待审核</div>
<div v-else-if="row.status === '4'">审核不通过</div>
</template>
<template #table-operate="{ row }">
<el-space>
<router-link :to="`/company/view/${row.id}`">
<el-button plain>查看</el-button>
<router-link :to="`/project/view?id=${row.id}`">
<el-link type="primary">查看</el-link>
</router-link>
<router-link :to="`/project/view?id=${row.id}&isAdult=1`">
<el-link type="primary">审批</el-link>
</router-link>
</el-space>
</template>
......
src/modules/project/views/View.vue
浏览文件 @ 931e2ec3
<script setup lang="ts"></script>
<script setup lang="ts">
const route = useRoute()
//审核通过
const handleAdultSuccess = () => {
console.log('审核通过')
history.go(-1)
}
//审核不通过
const handleAdultFailed = () => {
console.log('审核不通过')
history.go(-1)
}
const detailList = reactive({
logo: 'https://zws-imgs-pub.ezijing.com/static/ezijing/logo/ezijing-logo.svg',
name: '紫荆项目',
contact: '里斯',
type: '合作项目',
contact_mobile: '18339181067',
start_time: '2022-01-01',
end_time: '2022-06-30',
desc: '紫荆教育全称是清控紫荆（北京）教育科技股份有限公司，是清华控股有限公司2015年以清华大学五道口金融学院教研成果为基础发起设立。“紫荆”二字取自清华大学校花“紫荆花”，寓意“自强不息，向美而行”。',
documents: [
{
name: '招生简章',
icon: 'https://webapp-pub.ezijing.com/project/marywood/pdf.png',
url: 'https://webapp-pub.ezijing.com/project_online_pc/edd/%E6%8B%9B%E7%94%9F%E7%AE%80%E7%AB%A0.pdf'
},
{
name: '常见问题',
icon: 'https://webapp-pub.ezijing.com/project/marywood/pdf.png',
url: 'https://webapp-pub.ezijing.com/project_online_pc/edd/%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98.pdf'
}
]
})
</script>
<template>
<AppCard> </AppCard>
<AppCard title="项目详情">
<el-descriptions :column="4" direction="vertical">
<el-descriptions-item>
<el-image :src="detailList.logo" style="width: 100px" />
</el-descriptions-item>
<el-descriptions-item label="项目名称:">{{ detailList.name }}</el-descriptions-item>
<el-descriptions-item label="开始时间:">
{{ detailList.start_time }}
</el-descriptions-item>
<el-descriptions-item label="联系人:">{{ detailList.contact }}</el-descriptions-item>
<el-descriptions-item></el-descriptions-item>
<el-descriptions-item label="项目类型:">{{ detailList.type }}</el-descriptions-item>
<el-descriptions-item label="结束时间:">
{{ detailList.end_time }}
</el-descriptions-item>
<el-descriptions-item label="联系电话:">
{{ detailList.contact_mobile }}
</el-descriptions-item>
<el-descriptions-item label="项目介绍:" :span="4">
<div class="project_intro">
{{ detailList.desc }}
</div>
</el-descriptions-item>
<el-descriptions-item label="项目文件:">
<div class="dataList">
<a target="_blank" :href="item.url" v-for="(item, index) in detailList.documents" :key="index">
<div class="item">
<img :src="item.icon" alt="" />
<p class="doc">{{ item.name }}</p>
<p class="p1">预览</p>
</div>
</a>
</div>
</el-descriptions-item>
</el-descriptions>
<el-row justify="end" v-if="route.query.isAdult === '1'">
<el-button type="primary" @click="handleAdultSuccess">审批通过</el-button>
<el-button type="warning" @click="handleAdultFailed"> 审批不通过</el-button>
</el-row>
</AppCard>
</template>
<style lang="scss">
.project_intro {
padding: 27px 25px 30px 27px;
background: rgba(248, 248, 248, 0.39);
opacity: 1;
border-radius: 20px;
margin-top: 16px;
font-size: 14px;
color: #666666;
}
.dataList {
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-wrap: wrap;
padding-bottom: 73px;
.item {
flex: 1;
width: 307px;
height: 170px;
background: #f8f8f8;
border-radius: 20px;
margin-right: 40px;
margin-top: 20px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
.doc {
font-size: 18px;
font-weight: 400;
color: #2b2b2b;
margin-top: 14px;
}
.p1 {
font-size: 16px;
font-weight: 500;
color: #b80140;
margin-top: 15px;
}
}
}
:deep(.is-vertical-label) {
font-size: 14px;
font-weight: 400;
color: #666;
}
:deep(.is-vertical-content) {
font-size: 16px;
font-weight: 400;
color: #333333;
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论