JayChou
7 months ago
parent
0cbec0df8a
commit
d0ea2d0976
55 changed files with 2941 additions and 2640 deletions
@ -1,3 +1,5 @@ |
||||
NODE_ENV = 'production' |
||||
VITE_APP_TITLE = '教学一体化平台' |
||||
# VITE_APP_BASE_API = '/api' |
||||
# 变量必须以 VITE_ 为前缀才能暴露给外部读取 |
||||
NODE_ENV = 'development' |
||||
VITE_APP_TITLE = '高赛通' |
||||
VITE_APP_BASE_API = http://localhost:18085/jeecg-boot |
||||
# VITE_APP_BASE_API = 'http://127.0.0.1:8080' |
||||
@ -1,63 +1,63 @@ |
||||
<template> |
||||
<!-- 根据路由动态生成菜单 --> |
||||
<template v-for="item in menuList" :key="item.path"> |
||||
<template v-if="!item.children"> |
||||
<el-menu-item |
||||
v-if="!item.meta.hidden" |
||||
:index="item.path" |
||||
@click="goToRoute" |
||||
> |
||||
<!-- <el-icon> |
||||
<!-- 根据路由动态生成菜单 --> |
||||
<template v-for="item in menuList" :key="item.path"> |
||||
<template v-if="!item.children"> |
||||
<el-menu-item |
||||
v-if="!item.meta.hidden" |
||||
:index="item.path" |
||||
@click="goToRoute" |
||||
> |
||||
<!-- <el-icon> |
||||
<component :is="item.meta.icon"></component> |
||||
</el-icon> --> |
||||
<template #title> |
||||
<!-- <el-icon> |
||||
<template #title> |
||||
<!-- <el-icon> |
||||
<component :is="item.meta.icon"></component> |
||||
</el-icon> --> |
||||
<span>{{ item.meta.title }}</span> |
||||
</template> |
||||
</el-menu-item> |
||||
</template> |
||||
<template v-if="item.children && item.children.length === 1"> |
||||
<el-menu-item |
||||
v-if="!item.children[0].meta.hidden" |
||||
:index="item.children[0].path" |
||||
@click="goToRoute" |
||||
> |
||||
<el-icon> |
||||
<component :is="item.children[0].meta.icon"></component> |
||||
</el-icon> |
||||
<template #title> |
||||
<span>{{ item.children[0].meta.title }}</span> |
||||
</template> |
||||
</el-menu-item> |
||||
</template> |
||||
<el-sub-menu |
||||
:index="item.path" |
||||
v-if="item.children && item.children.length > 1" |
||||
<span>{{ item.meta.title }}</span> |
||||
</template> |
||||
</el-menu-item> |
||||
</template> |
||||
<template v-if="item.children && item.children.length === 1"> |
||||
<el-menu-item |
||||
v-if="!item.children[0].meta.hidden" |
||||
:index="item.children[0].path" |
||||
@click="goToRoute" |
||||
> |
||||
<el-icon> |
||||
<component :is="item.children[0].meta.icon"></component> |
||||
</el-icon> |
||||
<template #title> |
||||
<el-icon> |
||||
<component :is="item.meta.icon"></component> |
||||
</el-icon> |
||||
<span>{{ item.meta.title }}</span> |
||||
<span>{{ item.children[0].meta.title }}</span> |
||||
</template> |
||||
<Item :menuList="item.children" /> |
||||
</el-sub-menu> |
||||
</el-menu-item> |
||||
</template> |
||||
<el-sub-menu |
||||
:index="item.path" |
||||
v-if="item.children && item.children.length > 1" |
||||
> |
||||
<template #title> |
||||
<el-icon> |
||||
<component :is="item.meta.icon"></component> |
||||
</el-icon> |
||||
<span>{{ item.meta.title }}</span> |
||||
</template> |
||||
<Item :menuList="item.children" /> |
||||
</el-sub-menu> |
||||
</template> |
||||
<script lang="ts" setup> |
||||
import { useRouter } from 'vue-router' |
||||
// 获取父组件传递的全部的路由的数据 |
||||
defineProps(['menuList']) |
||||
const $router = useRouter() |
||||
const goToRoute = (vc: any) => { |
||||
$router.push(vc.index) |
||||
} |
||||
</script> |
||||
<script lang="ts"> |
||||
export default { |
||||
name: 'app-Menu', |
||||
} |
||||
</script> |
||||
<style lang="scss" scoped></style> |
||||
</template> |
||||
<script lang="ts" setup> |
||||
import { useRouter } from 'vue-router' |
||||
// 获取父组件传递的全部的路由的数据 |
||||
defineProps(['menuList']) |
||||
const $router = useRouter() |
||||
const goToRoute = (vc: any) => { |
||||
$router.push(vc.index) |
||||
} |
||||
</script> |
||||
<script lang="ts"> |
||||
export default { |
||||
name: 'app-Menu', |
||||
} |
||||
</script> |
||||
<style lang="scss" scoped></style> |
||||
|
||||
@ -1,15 +1,15 @@ |
||||
import request from '@/utils/requset' |
||||
//获取新闻栏目
|
||||
export const getColumnListApi = () => { |
||||
return request({ |
||||
url:'/cms/front/getColumnList' |
||||
}) |
||||
return request({ |
||||
url: '/cms/front/getColumnList', |
||||
}) |
||||
} |
||||
//根据栏目id获取新闻列表
|
||||
export function queryEssayListApi(columnId) { |
||||
return request.get(`/cms/front/getArticleListByColumn?columnId=${columnId}`); |
||||
return request.get(`/cms/front/getArticleListByColumn?columnId=${columnId}`) |
||||
} |
||||
//根据点击的新闻id获取新闻详细信息
|
||||
export function queryEssayApi(id) { |
||||
return request.get(`/cms/front/getByArticleTitle?id=${id}`); |
||||
} |
||||
return request.get(`/cms/front/getByArticleTitle?id=${id}`) |
||||
} |
||||
|
||||
@ -1,94 +1,103 @@ |
||||
import req1 from '@/utils/requset'; |
||||
import { AxiosInstance } from 'axios'; |
||||
import req1 from '@/utils/requset' |
||||
import { AxiosInstance } from 'axios' |
||||
function copyRequest(req1: AxiosInstance, instanceConfig = {}) { |
||||
let request: AxiosInstance, copyStatus: boolean; |
||||
try { |
||||
// @ts-ignore
|
||||
const req2 = req1.create(instanceConfig); |
||||
function acopyInterceptors(target: any, interceptorManager: any) { |
||||
const handlers = interceptorManager.handlers; |
||||
for (let index = 0; index < handlers?.length; index++) { |
||||
|
||||
const { fulfilled, rejected, runWhen, synchronous } = handlers[index]; |
||||
let options; |
||||
if (synchronous !== false || runWhen !== null) options = { synchronous, runWhen }; |
||||
target.use(fulfilled, rejected, options) |
||||
} |
||||
} |
||||
acopyInterceptors(req2.interceptors.request, req1.interceptors.request); |
||||
acopyInterceptors(req2.interceptors.response, req1.interceptors.response); |
||||
request = req2; |
||||
copyStatus = true; |
||||
} catch (error) { |
||||
console.warn('拷贝失败，私有拦截器可能失效：\n', error); |
||||
request = req1; |
||||
copyStatus = false; |
||||
let request: AxiosInstance, copyStatus: boolean |
||||
try { |
||||
// @ts-ignore
|
||||
const req2 = req1.create(instanceConfig) |
||||
function acopyInterceptors(target: any, interceptorManager: any) { |
||||
const handlers = interceptorManager.handlers |
||||
for (let index = 0; index < handlers?.length; index++) { |
||||
const { fulfilled, rejected, runWhen, synchronous } = handlers[index] |
||||
let options |
||||
if (synchronous !== false || runWhen !== null) |
||||
options = { synchronous, runWhen } |
||||
target.use(fulfilled, rejected, options) |
||||
} |
||||
} |
||||
acopyInterceptors(req2.interceptors.request, req1.interceptors.request) |
||||
acopyInterceptors(req2.interceptors.response, req1.interceptors.response) |
||||
request = req2 |
||||
copyStatus = true |
||||
} catch (error) { |
||||
console.warn('拷贝失败，私有拦截器可能失效：\n', error) |
||||
request = req1 |
||||
copyStatus = false |
||||
} |
||||
|
||||
return { request, copyStatus }; |
||||
return { request, copyStatus } |
||||
} |
||||
|
||||
const { request, copyStatus } = copyRequest(req1); |
||||
const { request, copyStatus } = copyRequest(req1) |
||||
|
||||
// 若拷贝成功，添加自己独有的拦截器
|
||||
if (copyStatus) { |
||||
request.interceptors.response.use((response: any) => { |
||||
if (response.code >= 200 && response.code < 300) return response; |
||||
else return Promise.reject(response); |
||||
}) |
||||
request.interceptors.response.use((response: any) => { |
||||
if (response.code >= 200 && response.code < 300) return response |
||||
else return Promise.reject(response) |
||||
}) |
||||
} |
||||
|
||||
// =============================================================================
|
||||
enum api { |
||||
liststu = '/abilityEvaluation/personalAbilityEvaluationCollect/liststu', // 个人能力评价列表
|
||||
integral = '/annualScore/personalCompTotalScore/liststu', // 个人积分列表
|
||||
PAGE_XSFXBG = '/annualcompetitionprojectregistration/annualCompetitionProjectRegistration/xsfxbg', // 个人能力报告
|
||||
competition = '/AnnualCompPoint/annualCompPoint/findcompp', // 比赛项目列表
|
||||
competitionOne = '/AnnualCompPoint/annualCompPoint/findcomppxq', // 比赛项目单个
|
||||
signUp = '/annualcompetitionprojectregistration/annualCompetitionProjectRegistration/edit', // 年度比赛项目报名 POST
|
||||
membersList = '/online/cgreport/api/getData/1696139786651197442', // 团队成员列表
|
||||
adviserList = '/online/cgreport/api/getData/1828357196360998913', // 指导老师列表
|
||||
listStudent = '/AnnualCompPoint/annualCompPoint/listStudent', // 比赛项目报名表
|
||||
findndbswxq = '/annualcomp/annualComp/findndbswxq', // 年度比赛详情
|
||||
findcomppxq = '/AnnualCompPoint/annualCompPoint/findcomppxq', // 年度比赛项目详情
|
||||
liststu = '/abilityEvaluation/personalAbilityEvaluationCollect/liststu', // 个人能力评价列表
|
||||
integral = '/annualScore/personalCompTotalScore/liststu', // 个人积分列表
|
||||
PAGE_XSFXBG = '/annualcompetitionprojectregistration/annualCompetitionProjectRegistration/xsfxbg', // 个人能力报告
|
||||
competition = '/AnnualCompPoint/annualCompPoint/findcompp', // 比赛项目列表
|
||||
competitionOne = '/AnnualCompPoint/annualCompPoint/findcomppxq', // 比赛项目单个
|
||||
signUp = '/annualcompetitionprojectregistration/annualCompetitionProjectRegistration/edit', // 年度比赛项目报名 POST
|
||||
membersList = '/online/cgreport/api/getData/1696139786651197442', // 团队成员列表
|
||||
adviserList = '/online/cgreport/api/getData/1828357196360998913', // 指导老师列表
|
||||
listStudent = '/AnnualCompPoint/annualCompPoint/listStudent', // 比赛项目报名表
|
||||
findndbswxq = '/annualcomp/annualComp/findndbswxq', // 年度比赛详情
|
||||
findcomppxq = '/AnnualCompPoint/annualCompPoint/findcomppxq', // 年度比赛项目详情
|
||||
} |
||||
|
||||
|
||||
// http://10.115.2.247:3300/jeecgboot/AnnualCompPoint/annualCompPoint/listStudent?column=createTime&order=desc&pageNo=1&pageSize=10&_t=1727422864387
|
||||
interface SignUpData { |
||||
annualCompid: string, |
||||
entryFormat: '团队' | '个人', |
||||
id: string, |
||||
instructorSheetList?: any[], |
||||
teamManagementList?: any[], |
||||
annualCompid: string |
||||
entryFormat: '团队' | '个人' |
||||
id: string |
||||
instructorSheetList?: any[] |
||||
teamManagementList?: any[] |
||||
} |
||||
|
||||
interface MembersOrAdviser { |
||||
pageNo: number, |
||||
pageSize: number, |
||||
onlRepUrlParamStr: `annualCompid=${string}`, |
||||
entryFormat: '团队' | '个人', |
||||
id: string, |
||||
column?: string, |
||||
order?: 'asc' | 'desc' |
||||
pageNo: number |
||||
pageSize: number |
||||
onlRepUrlParamStr: `annualCompid=${string}` |
||||
entryFormat: '团队' | '个人' |
||||
id: string |
||||
column?: string |
||||
order?: 'asc' | 'desc' |
||||
} |
||||
|
||||
export const getlEvaluateApi = (params: Record<'pageNo' | 'pageSize', number>) => request.get(api.liststu, { params }); |
||||
export const getlIntegralApi = (params: Record<'pageNo' | 'pageSize', number>) => request.get(api.integral, { params }); |
||||
export const getlEvaluateApi = ( |
||||
params: Record<'pageNo' | 'pageSize', number>, |
||||
) => request.get(api.liststu, { params }) |
||||
export const getlIntegralApi = ( |
||||
params: Record<'pageNo' | 'pageSize', number>, |
||||
) => request.get(api.integral, { params }) |
||||
|
||||
export const getXsfxbgApi = (params = {}) => { |
||||
const par = { recreateFlag: false, annualid: '' }; |
||||
Object.assign(par, params); |
||||
return request.get(api.PAGE_XSFXBG, { params: par }); |
||||
const par = { recreateFlag: false, annualid: '' } |
||||
Object.assign(par, params) |
||||
return request.get(api.PAGE_XSFXBG, { params: par }) |
||||
} |
||||
|
||||
export const getCompetitionApi = (id: string) => request.get(api.competition, { params: { id } }); |
||||
export const getCompetitionOneApi = (id: string) => request.get(api.competitionOne, { params: { id } }); |
||||
export const getCompetitionApi = (id: string) => |
||||
request.get(api.competition, { params: { id } }) |
||||
export const getCompetitionOneApi = (id: string) => |
||||
request.get(api.competitionOne, { params: { id } }) |
||||
|
||||
export const getSignUpApi = (data: SignUpData) => request.post(api.signUp, data); |
||||
export const getSignUpApi = (data: SignUpData) => request.post(api.signUp, data) |
||||
|
||||
export const getMembersList = (params: MembersOrAdviser) => request.get(api.membersList, { params }); |
||||
export const getAdviserList = (params: MembersOrAdviser) => request.get(api.adviserList, { params }); |
||||
export const getMembersList = (params: MembersOrAdviser) => |
||||
request.get(api.membersList, { params }) |
||||
export const getAdviserList = (params: MembersOrAdviser) => |
||||
request.get(api.adviserList, { params }) |
||||
|
||||
export const getNdbswxqList = (id:string) => request.get(api.findndbswxq, { params:{id} }); |
||||
export const getComppxqList = (id:string) => request.get(api.findcomppxq, { params:{id} }); |
||||
export const getNdbswxqList = (id: string) => |
||||
request.get(api.findndbswxq, { params: { id } }) |
||||
export const getComppxqList = (id: string) => |
||||
request.get(api.findcomppxq, { params: { id } }) |
||||
|
||||
@ -1,8 +1,8 @@ |
||||
import request from '@/utils/requset' |
||||
|
||||
export const getLogo = () => { |
||||
return request({ |
||||
url:'/sysconfiguration/sysConfiguration/findconfig', |
||||
method:'POST', |
||||
}) |
||||
} |
||||
return request({ |
||||
url: '/sysconfiguration/sysConfiguration/findconfig', |
||||
method: 'POST', |
||||
}) |
||||
} |
||||
|
||||
@ -1,33 +1,33 @@ |
||||
import request from '@/utils/requset' |
||||
|
||||
export const getCode = (time:any) => { |
||||
return request({ |
||||
url:'/sys/randomImage/' + time, |
||||
}) |
||||
export const getCode = (time: any) => { |
||||
return request({ |
||||
url: '/sys/randomImage/' + time, |
||||
}) |
||||
} |
||||
export const loginApi = (data:any) => { |
||||
return request({ |
||||
url:'/sys/login', |
||||
method:"POST", |
||||
data |
||||
}) |
||||
export const loginApi = (data: any) => { |
||||
return request({ |
||||
url: '/sys/login', |
||||
method: 'POST', |
||||
data, |
||||
}) |
||||
} |
||||
export const getUserInfoApi = () => { |
||||
return request({ |
||||
url:'/sys/user/getUserInfo' |
||||
}) |
||||
return request({ |
||||
url: '/sys/user/getUserInfo', |
||||
}) |
||||
} |
||||
|
||||
export const logOut = () => { |
||||
return request({ |
||||
url:'/sys/logout' |
||||
}) |
||||
return request({ |
||||
url: '/sys/logout', |
||||
}) |
||||
} |
||||
// 注册
|
||||
export const sturegister = (data:any) => { |
||||
return request({ |
||||
url:'/sys/user/sturegister', |
||||
method:"POST", |
||||
data |
||||
}) |
||||
} |
||||
export const sturegister = (data: any) => { |
||||
return request({ |
||||
url: '/sys/user/sturegister', |
||||
method: 'POST', |
||||
data, |
||||
}) |
||||
} |
||||
|
||||
@ -1,9 +1,8 @@ |
||||
export default { |
||||
mounted(el:any, binding:any) { |
||||
el.onerror = () => { |
||||
// 当图片加载失败时，设置默认图片
|
||||
el.src = binding.value ||'/src/assets/images/item.png'; // 默认图片
|
||||
}; |
||||
mounted(el: any, binding: any) { |
||||
el.onerror = () => { |
||||
// 当图片加载失败时，设置默认图片
|
||||
el.src = binding.value || '/src/assets/images/item.png' // 默认图片
|
||||
} |
||||
}; |
||||
|
||||
}, |
||||
} |
||||
|
||||
@ -1,11 +1,10 @@ |
||||
|
||||
const defineRouter = [ |
||||
{ |
||||
path:'/login', |
||||
component: () => import('@/views/login/index.vue'), |
||||
meta:{ |
||||
title:'登录' |
||||
} |
||||
} |
||||
{ |
||||
path: '/login', |
||||
component: () => import('@/views/login/index.vue'), |
||||
meta: { |
||||
title: '登录', |
||||
}, |
||||
}, |
||||
] |
||||
export default defineRouter |
||||
export default defineRouter |
||||
|
||||
@ -1,63 +1,62 @@ |
||||
import { ElMessage, MessageOptions } from "element-plus"; |
||||
import { ElMessage, MessageOptions } from 'element-plus' |
||||
|
||||
enum indexs { |
||||
fulfilled, |
||||
Rejected |
||||
fulfilled, |
||||
Rejected, |
||||
} |
||||
|
||||
interface Options { |
||||
onFulfilled?: Function; |
||||
onRejected?: Function; |
||||
onFinish?: Function; |
||||
// 是否需要提示：[ 成功时的 , 失败时的]。
|
||||
// 默认：[true, true]
|
||||
isNeedPrompts?: boolean[]; |
||||
// 提示配置：[成功时的 , 失败时的]
|
||||
msgObjs?: MessageOptions[]; |
||||
// 提示配置的快捷message配置：[ 成功时的 , 失败时的]。
|
||||
// 默认：['成功', '失败']
|
||||
msgs?: string[]; |
||||
[key: string]: any; |
||||
onFulfilled?: Function |
||||
onRejected?: Function |
||||
onFinish?: Function |
||||
// 是否需要提示：[ 成功时的 , 失败时的]。
|
||||
// 默认：[true, true]
|
||||
isNeedPrompts?: boolean[] |
||||
// 提示配置：[成功时的 , 失败时的]
|
||||
msgObjs?: MessageOptions[] |
||||
// 提示配置的快捷message配置：[ 成功时的 , 失败时的]。
|
||||
// 默认：['成功', '失败']
|
||||
msgs?: string[] |
||||
[key: string]: any |
||||
} |
||||
|
||||
|
||||
export function getHint(pro: Promise<any>, options: Options = {}) { |
||||
const ful = indexs.fulfilled; |
||||
const rej = indexs.Rejected; |
||||
const { isNeedPrompts, msgs } = options; |
||||
|
||||
const opt: Options = { |
||||
...options, |
||||
isNeedPrompts: Object.assign([true, true], isNeedPrompts), |
||||
msgs: Object.assign(['成功', '失败'], msgs), |
||||
} |
||||
|
||||
const onFulfilled = (res: any) => { |
||||
if (opt.isNeedPrompts?.[ful]) { |
||||
ElMessage({ |
||||
message: opt.msgs?.[ful], |
||||
type: 'success', |
||||
...opt.msgObjs?.[ful] |
||||
}); |
||||
} |
||||
if (opt.onFulfilled) opt.onFulfilled(res); |
||||
const ful = indexs.fulfilled |
||||
const rej = indexs.Rejected |
||||
const { isNeedPrompts, msgs } = options |
||||
|
||||
const opt: Options = { |
||||
...options, |
||||
isNeedPrompts: Object.assign([true, true], isNeedPrompts), |
||||
msgs: Object.assign(['成功', '失败'], msgs), |
||||
} |
||||
|
||||
const onFulfilled = (res: any) => { |
||||
if (opt.isNeedPrompts?.[ful]) { |
||||
ElMessage({ |
||||
message: opt.msgs?.[ful], |
||||
type: 'success', |
||||
...opt.msgObjs?.[ful], |
||||
}) |
||||
} |
||||
const onRejected = (err: Error) => { |
||||
if (opt.isNeedPrompts?.[rej]) { |
||||
ElMessage({ |
||||
message: opt.msgs?.[rej], |
||||
type: 'error', |
||||
...opt.msgObjs?.[rej] |
||||
}); |
||||
} |
||||
|
||||
if (opt.onRejected) opt.onRejected(err); |
||||
} |
||||
const onFinish = () => { |
||||
if (opt.onFinish) opt.onFinish(); |
||||
if (opt.onFulfilled) opt.onFulfilled(res) |
||||
} |
||||
const onRejected = (err: Error) => { |
||||
if (opt.isNeedPrompts?.[rej]) { |
||||
ElMessage({ |
||||
message: opt.msgs?.[rej], |
||||
type: 'error', |
||||
...opt.msgObjs?.[rej], |
||||
}) |
||||
} |
||||
|
||||
pro.then(onFulfilled).catch(onRejected).finally(onFinish); |
||||
if (opt.onRejected) opt.onRejected(err) |
||||
} |
||||
const onFinish = () => { |
||||
if (opt.onFinish) opt.onFinish() |
||||
} |
||||
|
||||
pro.then(onFulfilled).catch(onRejected).finally(onFinish) |
||||
|
||||
return pro; |
||||
} |
||||
return pro |
||||
} |
||||
|
||||
@ -1,118 +1,136 @@ |
||||
;(function (win, lib) { |
||||
var doc = win.document |
||||
var docEl = doc.documentElement |
||||
var metaEl = doc.querySelector('meta[name="viewport"]') |
||||
var flexibleEl = doc.querySelector('meta[name="flexible"]') |
||||
var dpr = 0 |
||||
var scale = 0 |
||||
var tid |
||||
var flexible = lib.flexible || (lib.flexible = {}) |
||||
|
||||
;(function(win, lib) { |
||||
var doc = win.document; |
||||
var docEl = doc.documentElement; |
||||
var metaEl = doc.querySelector('meta[name="viewport"]'); |
||||
var flexibleEl = doc.querySelector('meta[name="flexible"]'); |
||||
var dpr = 0; |
||||
var scale = 0; |
||||
var tid; |
||||
var flexible = lib.flexible || (lib.flexible = {}); |
||||
|
||||
if (metaEl) { |
||||
console.warn('将根据已有的meta标签来设置缩放比例'); |
||||
var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/); |
||||
if (match) { |
||||
scale = parseFloat(match[1]); |
||||
dpr = parseInt(1 / scale); |
||||
} |
||||
} else if (flexibleEl) { |
||||
var content = flexibleEl.getAttribute('content'); |
||||
if (content) { |
||||
var initialDpr = content.match(/initial\-dpr=([\d\.]+)/); |
||||
var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/); |
||||
if (initialDpr) { |
||||
dpr = parseFloat(initialDpr[1]); |
||||
scale = parseFloat((1 / dpr).toFixed(2)); |
||||
} |
||||
if (maximumDpr) { |
||||
dpr = parseFloat(maximumDpr[1]); |
||||
scale = parseFloat((1 / dpr).toFixed(2)); |
||||
} |
||||
} |
||||
if (metaEl) { |
||||
console.warn('将根据已有的meta标签来设置缩放比例') |
||||
var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/) |
||||
if (match) { |
||||
scale = parseFloat(match[1]) |
||||
dpr = parseInt(1 / scale) |
||||
} |
||||
|
||||
if (!dpr && !scale) { |
||||
var isAndroid = win.navigator.appVersion.match(/android/gi); |
||||
var isIPhone = win.navigator.appVersion.match(/iphone/gi); |
||||
var devicePixelRatio = win.devicePixelRatio; |
||||
if (isIPhone) { |
||||
// iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
|
||||
if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) { |
||||
dpr = 3; |
||||
} else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){ |
||||
dpr = 2; |
||||
} else { |
||||
dpr = 1; |
||||
} |
||||
} else { |
||||
// 其他设备下，仍旧使用1倍的方案
|
||||
dpr = 1; |
||||
} |
||||
scale = 1 / dpr; |
||||
} else if (flexibleEl) { |
||||
var content = flexibleEl.getAttribute('content') |
||||
if (content) { |
||||
var initialDpr = content.match(/initial\-dpr=([\d\.]+)/) |
||||
var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/) |
||||
if (initialDpr) { |
||||
dpr = parseFloat(initialDpr[1]) |
||||
scale = parseFloat((1 / dpr).toFixed(2)) |
||||
} |
||||
if (maximumDpr) { |
||||
dpr = parseFloat(maximumDpr[1]) |
||||
scale = parseFloat((1 / dpr).toFixed(2)) |
||||
} |
||||
} |
||||
} |
||||
|
||||
docEl.setAttribute('data-dpr', dpr); |
||||
if (!metaEl) { |
||||
metaEl = doc.createElement('meta'); |
||||
metaEl.setAttribute('name', 'viewport'); |
||||
metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no'); |
||||
if (docEl.firstElementChild) { |
||||
docEl.firstElementChild.appendChild(metaEl); |
||||
} else { |
||||
var wrap = doc.createElement('div'); |
||||
wrap.appendChild(metaEl); |
||||
doc.write(wrap.innerHTML); |
||||
} |
||||
if (!dpr && !scale) { |
||||
var isAndroid = win.navigator.appVersion.match(/android/gi) |
||||
var isIPhone = win.navigator.appVersion.match(/iphone/gi) |
||||
var devicePixelRatio = win.devicePixelRatio |
||||
if (isIPhone) { |
||||
// iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
|
||||
if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) { |
||||
dpr = 3 |
||||
} else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)) { |
||||
dpr = 2 |
||||
} else { |
||||
dpr = 1 |
||||
} |
||||
} else { |
||||
// 其他设备下，仍旧使用1倍的方案
|
||||
dpr = 1 |
||||
} |
||||
scale = 1 / dpr |
||||
} |
||||
|
||||
function refreshRem(){ |
||||
var width = docEl.getBoundingClientRect().width; |
||||
if (width / dpr > 1920) { |
||||
width = 1920 * dpr; |
||||
} |
||||
var rem = width / 10; |
||||
docEl.style.fontSize = rem + 'px'; |
||||
flexible.rem = win.rem = rem; |
||||
docEl.setAttribute('data-dpr', dpr) |
||||
if (!metaEl) { |
||||
metaEl = doc.createElement('meta') |
||||
metaEl.setAttribute('name', 'viewport') |
||||
metaEl.setAttribute( |
||||
'content', |
||||
'initial-scale=' + |
||||
scale + |
||||
', maximum-scale=' + |
||||
scale + |
||||
', minimum-scale=' + |
||||
scale + |
||||
', user-scalable=no', |
||||
) |
||||
if (docEl.firstElementChild) { |
||||
docEl.firstElementChild.appendChild(metaEl) |
||||
} else { |
||||
var wrap = doc.createElement('div') |
||||
wrap.appendChild(metaEl) |
||||
doc.write(wrap.innerHTML) |
||||
} |
||||
} |
||||
|
||||
win.addEventListener('resize', function() { |
||||
clearTimeout(tid); |
||||
tid = setTimeout(refreshRem, 300); |
||||
}, false); |
||||
win.addEventListener('pageshow', function(e) { |
||||
if (e.persisted) { |
||||
clearTimeout(tid); |
||||
tid = setTimeout(refreshRem, 300); |
||||
} |
||||
}, false); |
||||
|
||||
if (doc.readyState === 'complete') { |
||||
doc.body.style.fontSize = 12 * dpr + 'px'; |
||||
} else { |
||||
doc.addEventListener('DOMContentLoaded', function(e) { |
||||
doc.body.style.fontSize = 12 * dpr + 'px'; |
||||
}, false); |
||||
function refreshRem() { |
||||
var width = docEl.getBoundingClientRect().width |
||||
if (width / dpr > 1920) { |
||||
width = 1920 * dpr |
||||
} |
||||
var rem = width / 10 |
||||
docEl.style.fontSize = rem + 'px' |
||||
flexible.rem = win.rem = rem |
||||
} |
||||
|
||||
win.addEventListener( |
||||
'resize', |
||||
function () { |
||||
clearTimeout(tid) |
||||
tid = setTimeout(refreshRem, 300) |
||||
}, |
||||
false, |
||||
) |
||||
win.addEventListener( |
||||
'pageshow', |
||||
function (e) { |
||||
if (e.persisted) { |
||||
clearTimeout(tid) |
||||
tid = setTimeout(refreshRem, 300) |
||||
} |
||||
}, |
||||
false, |
||||
) |
||||
|
||||
refreshRem(); |
||||
if (doc.readyState === 'complete') { |
||||
doc.body.style.fontSize = 12 * dpr + 'px' |
||||
} else { |
||||
doc.addEventListener( |
||||
'DOMContentLoaded', |
||||
function (e) { |
||||
doc.body.style.fontSize = 12 * dpr + 'px' |
||||
}, |
||||
false, |
||||
) |
||||
} |
||||
|
||||
flexible.dpr = win.dpr = dpr; |
||||
flexible.refreshRem = refreshRem; |
||||
flexible.rem2px = function(d) { |
||||
var val = parseFloat(d) * this.rem; |
||||
if (typeof d === 'string' && d.match(/rem$/)) { |
||||
val += 'px'; |
||||
} |
||||
return val; |
||||
refreshRem() |
||||
|
||||
flexible.dpr = win.dpr = dpr |
||||
flexible.refreshRem = refreshRem |
||||
flexible.rem2px = function (d) { |
||||
var val = parseFloat(d) * this.rem |
||||
if (typeof d === 'string' && d.match(/rem$/)) { |
||||
val += 'px' |
||||
} |
||||
flexible.px2rem = function(d) { |
||||
var val = parseFloat(d) / this.rem; |
||||
if (typeof d === 'string' && d.match(/px$/)) { |
||||
val += 'rem'; |
||||
} |
||||
return val; |
||||
return val |
||||
} |
||||
flexible.px2rem = function (d) { |
||||
var val = parseFloat(d) / this.rem |
||||
if (typeof d === 'string' && d.match(/px$/)) { |
||||
val += 'rem' |
||||
} |
||||
|
||||
})(window, window['lib'] || (window['lib'] = {})); |
||||
return val |
||||
} |
||||
})(window, window['lib'] || (window['lib'] = {})) |
||||
|
||||
@ -1,12 +1,9 @@ |
||||
<template> |
||||
<h1>404</h1> |
||||
<h1>404</h1> |
||||
</template> |
||||
|
||||
<script lang='ts' setup> |
||||
import { } from 'vue' |
||||
|
||||
<script lang="ts" setup> |
||||
import {} from 'vue' |
||||
</script> |
||||
|
||||
<style lang='scss' scoped> |
||||
|
||||
</style> |
||||
<style lang="scss" scoped></style> |
||||
|
||||
@ -1,14 +1,9 @@ |
||||
<template> |
||||
<div> |
||||
成果 |
||||
</div> |
||||
<div>成果</div> |
||||
</template> |
||||
|
||||
<script lang='ts' setup> |
||||
<script lang="ts" setup> |
||||
import { onMounted, reactive, ref, toRefs, watch } from 'vue' |
||||
|
||||
</script> |
||||
|
||||
<style lang='scss' scoped> |
||||
|
||||
</style> |
||||
<style lang="scss" scoped></style> |
||||
|
||||
@ -1,14 +1,9 @@ |
||||
<template> |
||||
<div> |
||||
评价 |
||||
</div> |
||||
<div>评价</div> |
||||
</template> |
||||
|
||||
<script lang='ts' setup> |
||||
<script lang="ts" setup> |
||||
import { onMounted, reactive, ref, toRefs, watch } from 'vue' |
||||
|
||||
</script> |
||||
|
||||
<style lang='scss' scoped> |
||||
|
||||
</style> |
||||
<style lang="scss" scoped></style> |
||||
|
||||
@ -1,14 +1,9 @@ |
||||
<template> |
||||
<div> |
||||
导航 |
||||
</div> |
||||
<div>导航</div> |
||||
</template> |
||||
|
||||
<script lang='ts' setup> |
||||
<script lang="ts" setup> |
||||
import { onMounted, reactive, ref, toRefs, watch } from 'vue' |
||||
|
||||
</script> |
||||
|
||||
<style lang='scss' scoped> |
||||
|
||||
</style> |
||||
<style lang="scss" scoped></style> |
||||
|
||||
@ -1,382 +1,398 @@ |
||||
<template> |
||||
<div class="fill"></div> |
||||
<div style="padding: 30px 18.6vw 0; width: 100%;margin: auto;"> |
||||
<!-- 年度：<j-dict-select-tag placeholder="请选择年度" v-model:value="annualid" dictCode="annual,annual_name,id" /> --> |
||||
<div class="fill"></div> |
||||
<div style="padding: 30px 18.6vw 0; width: 100%; margin: auto"> |
||||
<!-- 年度：<j-dict-select-tag placeholder="请选择年度" v-model:value="annualid" dictCode="annual,annual_name,id" /> --> |
||||
</div> |
||||
<div class="personage"> |
||||
<h1 class="title">机电学院比赛个人报告</h1> |
||||
<div class="rebuild"> |
||||
<div @click="Rebuild">重新生成报告</div> |
||||
</div> |
||||
<div class="personage"> |
||||
<h1 class="title">机电学院比赛个人报告</h1> |
||||
<div class="rebuild"> |
||||
<div @click="Rebuild">重新生成报告</div> |
||||
</div> |
||||
<p class="paragraph"> |
||||
我是比赛综述：全面落实立德树人根本任务，依据CDIO工程教育理念，培养德、智、体、美、劳全面发展，掌握软件工程专业所需的数学与自然科学基础知识、专业基础理论知识；在企业级软件开发和工业智能软件开发方向，能承担软件分析、设计、开发、项目管理等任务，具备解决复杂工程问题的能力；具有终身学习和创新创业意识、国际交流能力、团队合作精神等良好素养，能适应产业与社会变革的国际化应用型人。 |
||||
</p> |
||||
<el-row class="card-box" :gutter="16" type="flex" justify="space-between"> |
||||
<el-col :span="12"> |
||||
<el-card class="card1"> |
||||
<div class="title"> |
||||
<div class="left">参加比赛项目数量</div> |
||||
<div class="right"> |
||||
<SvgIcon size="20" name="content" /> |
||||
</div> |
||||
</div> |
||||
<div class="name">{{ data.cjbsxmsl }}</div> |
||||
<div class="total" style="margin-top: 10px"> |
||||
<div class="two">国家级：{{ data.gjj }}</div> |
||||
<div class="three">省级：{{ data.shengj }}</div> |
||||
<div class="three">市级：{{ data.shij }}</div> |
||||
<div class="three">校级：{{ data.xj }}</div> |
||||
</div> |
||||
</el-card> |
||||
</el-col> |
||||
|
||||
<el-col :span="12"> |
||||
<el-card class="card1"> |
||||
<div class="title"> |
||||
<div class="left">获奖数</div> |
||||
<div class="right"> |
||||
<SvgIcon size="20" name="content" /> |
||||
</div> |
||||
</div> |
||||
<div class="name">{{ data.hjNumber }}</div> |
||||
<div class="total" style="grid-template-columns: repeat(5, 1fr)"> |
||||
<div class="one">一等：{{ data.ydjNumber }}</div> |
||||
<div class="two">二等：{{ data.edjNumber }}</div> |
||||
<div class="three">三等：{{ data.sdjNumber }}</div> |
||||
<div class="two">四等：{{ data.sidjNumber }}</div> |
||||
<div class="three">五等：{{ data.wdjNumber }}</div> |
||||
</div> |
||||
</el-card> |
||||
</el-col> |
||||
|
||||
</el-row> |
||||
<p class="paragraph"> |
||||
我是比赛综述：全面落实立德树人根本任务，依据CDIO工程教育理念，培养德、智、体、美、劳全面发展，掌握软件工程专业所需的数学与自然科学基础知识、专业基础理论知识；在企业级软件开发和工业智能软件开发方向，能承担软件分析、设计、开发、项目管理等任务，具备解决复杂工程问题的能力；具有终身学习和创新创业意识、国际交流能力、团队合作精神等良好素养，能适应产业与社会变革的国际化应用型人。 |
||||
</p> |
||||
<el-row class="card-box" :gutter="16" type="flex" justify="space-between"> |
||||
<el-col :span="12"> |
||||
<el-card class="card1"> |
||||
<div class="title"> |
||||
<div class="left">参加比赛项目数量</div> |
||||
<div class="right"> |
||||
<SvgIcon size="20" name="content" /> |
||||
</div> |
||||
</div> |
||||
<div class="name">{{ data.cjbsxmsl }}</div> |
||||
<div class="total" style="margin-top: 10px"> |
||||
<div class="two">国家级：{{ data.gjj }}</div> |
||||
<div class="three">省级：{{ data.shengj }}</div> |
||||
<div class="three">市级：{{ data.shij }}</div> |
||||
<div class="three">校级：{{ data.xj }}</div> |
||||
</div> |
||||
</el-card> |
||||
</el-col> |
||||
|
||||
<el-col :span="12"> |
||||
<el-card class="card1"> |
||||
<div class="title"> |
||||
<div class="left">获奖数</div> |
||||
<div class="right"> |
||||
<SvgIcon size="20" name="content" /> |
||||
</div> |
||||
</div> |
||||
<div class="name">{{ data.hjNumber }}</div> |
||||
<div class="total" style="grid-template-columns: repeat(5, 1fr)"> |
||||
<div class="one">一等：{{ data.ydjNumber }}</div> |
||||
<div class="two">二等：{{ data.edjNumber }}</div> |
||||
<div class="three">三等：{{ data.sdjNumber }}</div> |
||||
<div class="two">四等：{{ data.sidjNumber }}</div> |
||||
<div class="three">五等：{{ data.wdjNumber }}</div> |
||||
</div> |
||||
</el-card> |
||||
</el-col> |
||||
</el-row> |
||||
<p class="paragraph"> |
||||
个人综合素质综述：全面落实立德树人根本任务，依据CDIO工程教育理念，培养德、智、体、美、劳全面发展，掌握软件工程专业所需的数学与自然科学基础知识、专业基础理论知识；在企业级软件开发和工业智能软件开发方向，能承担软件分析、设计、开发、项目管理等任务，具备解决复杂工程问题的能力；具有终身学习和创新创业意识、国际交流能力、团队合作精神等良好素养，能适应产业与社会变革的国际化应用型人。 |
||||
</p> |
||||
<img src="../../assets/images/card.png" alt="" /> |
||||
|
||||
<el-row class="card-box" :gutter="[50, 50]" type="flex"> |
||||
<el-col :xs="24" :xl="12"> |
||||
<p class="paragraph"> |
||||
个人综合素质综述：全面落实立德树人根本任务，依据CDIO工程教育理念，培养德、智、体、美、劳全面发展，掌握软件工程专业所需的数学与自然科学基础知识、专业基础理论知识；在企业级软件开发和工业智能软件开发方向，能承担软件分析、设计、开发、项目管理等任务，具备解决复杂工程问题的能力；具有终身学习和创新创业意识、国际交流能力、团队合作精神等良好素养，能适应产业与社会变革的国际化应用型人。 |
||||
个人综合素质综述：全面落实立德树人根本任务，依据CDIO工程教育理念，培养德、智、体、美、劳全面发展，掌握软件工程专业所需的数学与自然科学基础知识、专业基础理论知识；在企业级软件开发和工业智能软件开发方向，能承担软件分析、设计、开发、项目管理等任务，具备解决复杂工程问题的能力；具有终身学习和创新创业意识、国际交流能力、团队合作精神等良好素养，能适应产业与社会变革的国际化应用型人。 |
||||
</p> |
||||
<img src="../../assets/images/card.png" alt=""> |
||||
|
||||
<el-row class="card-box" :gutter="[50, 50]" type="flex"> |
||||
<el-col :xs="24" :xl="12"> |
||||
<p class="paragraph"> |
||||
个人综合素质综述：全面落实立德树人根本任务，依据CDIO工程教育理念，培养德、智、体、美、劳全面发展，掌握软件工程专业所需的数学与自然科学基础知识、专业基础理论知识；在企业级软件开发和工业智能软件开发方向，能承担软件分析、设计、开发、项目管理等任务，具备解决复杂工程问题的能力；具有终身学习和创新创业意识、国际交流能力、团队合作精神等良好素养，能适应产业与社会变革的国际化应用型人。 |
||||
</p> |
||||
</el-col> |
||||
<el-col :xs="24" :xl="12"> |
||||
<div class="ec-box"> |
||||
<div class="title-box"> |
||||
<div class="tit">年度维度分析</div> |
||||
</div> |
||||
<randerChart></randerChart> |
||||
</div> |
||||
</el-col> |
||||
</el-row> |
||||
|
||||
<img src="../../assets/images/card.png" alt=""> |
||||
<p class="paragraph"> |
||||
我是比赛参赛情况综述：全面落实立德树人根本任务，依据CDIO工程教育理念，培养德、智、体、美、劳全面发展，掌握软件工程专业所需的数学与自然科学基础知识、专业基础理论知识；在企业级软件开发和工业智能软件开发方向，能承担软件分析、设计、开发、项目管理等任务，具备解决复杂工程问题的能力；具有终身学习和创新创业意识、国际交流能力、团队合作精神等良好素养，能适应产业与社会变革的国际化应用型人。 |
||||
</p> |
||||
<div class="table-box" style="min-height: 500px;"> |
||||
<h1 class="title-pons">个人比赛获奖情况</h1> |
||||
<el-table :data="data.allApList" class="table" :class="{ height: data.allApList.length > 8 }"> |
||||
<el-table-column prop="jxname" label="奖项名称" /> |
||||
<el-table-column prop="ndbs" label="年度比赛" /> |
||||
<el-table-column prop="ndbsxm" label="年度比赛项目" /> |
||||
<el-table-column prop="dwname" label="所在队伍名称" /> |
||||
<el-table-column prop="jf" label="积分" /> |
||||
<template #empty> |
||||
<el-empty description="暂无数据" /> |
||||
</template> |
||||
</el-table> |
||||
</el-col> |
||||
<el-col :xs="24" :xl="12"> |
||||
<div class="ec-box"> |
||||
<div class="title-box"> |
||||
<div class="tit">年度维度分析</div> |
||||
</div> |
||||
<randerChart></randerChart> |
||||
</div> |
||||
</el-col> |
||||
</el-row> |
||||
|
||||
<img src="../../assets/images/card.png" alt="" /> |
||||
<p class="paragraph"> |
||||
我是比赛参赛情况综述：全面落实立德树人根本任务，依据CDIO工程教育理念，培养德、智、体、美、劳全面发展，掌握软件工程专业所需的数学与自然科学基础知识、专业基础理论知识；在企业级软件开发和工业智能软件开发方向，能承担软件分析、设计、开发、项目管理等任务，具备解决复杂工程问题的能力；具有终身学习和创新创业意识、国际交流能力、团队合作精神等良好素养，能适应产业与社会变革的国际化应用型人。 |
||||
</p> |
||||
<div class="table-box" style="min-height: 500px"> |
||||
<h1 class="title-pons">个人比赛获奖情况</h1> |
||||
<el-table |
||||
:data="data.allApList" |
||||
class="table" |
||||
:class="{ height: data.allApList.length > 8 }" |
||||
> |
||||
<el-table-column prop="jxname" label="奖项名称" /> |
||||
<el-table-column prop="ndbs" label="年度比赛" /> |
||||
<el-table-column prop="ndbsxm" label="年度比赛项目" /> |
||||
<el-table-column prop="dwname" label="所在队伍名称" /> |
||||
<el-table-column prop="jf" label="积分" /> |
||||
<template #empty> |
||||
<el-empty description="暂无数据" /> |
||||
</template> |
||||
</el-table> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script lang='ts' setup> |
||||
<script lang="ts" setup> |
||||
// import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue'; |
||||
import randerChart from './components/randerChart.vue'; |
||||
import randerChart from './components/randerChart.vue' |
||||
import { ElLoading } from 'element-plus' |
||||
import { getXsfxbgApi } from '@/api/person'; |
||||
import { ref, watch } from 'vue'; |
||||
|
||||
type allApList = { |
||||
jxname: string |
||||
ndbs: string |
||||
ndbsxm: string |
||||
dwname: string |
||||
jf: string |
||||
}[] | [] |
||||
import { getXsfxbgApi } from '@/api/person' |
||||
import { ref, watch } from 'vue' |
||||
|
||||
type allApList = |
||||
| { |
||||
jxname: string |
||||
ndbs: string |
||||
ndbsxm: string |
||||
dwname: string |
||||
jf: string |
||||
}[] |
||||
| [] |
||||
|
||||
const data = ref<any>({ |
||||
cjbsxmsl: 0, |
||||
gjj: 0, |
||||
shengj: 0, |
||||
shij: 0, |
||||
xj: 0, |
||||
hjNumber: 0, |
||||
ydjNumber: 0, |
||||
edjNumber: 0, |
||||
sdjNumber: 0, |
||||
sidjNumber: 0, |
||||
wdjNumber: 0, |
||||
allApList: [] as allApList |
||||
cjbsxmsl: 0, |
||||
gjj: 0, |
||||
shengj: 0, |
||||
shij: 0, |
||||
xj: 0, |
||||
hjNumber: 0, |
||||
ydjNumber: 0, |
||||
edjNumber: 0, |
||||
sdjNumber: 0, |
||||
sidjNumber: 0, |
||||
wdjNumber: 0, |
||||
allApList: [] as allApList, |
||||
}) |
||||
|
||||
let loading: any; |
||||
let loading: any |
||||
const setLoading = () => { |
||||
const col = ElLoading.service({ |
||||
lock: true, |
||||
text: 'Loading', |
||||
background: 'rgba(0, 0, 0, 0.7)', |
||||
}) |
||||
loading = col; |
||||
setTimeout(() => { col.close() }, 3000); // 最大终止时间3秒，若超过3秒还没有被终止，则终止 |
||||
const col = ElLoading.service({ |
||||
lock: true, |
||||
text: 'Loading', |
||||
background: 'rgba(0, 0, 0, 0.7)', |
||||
}) |
||||
loading = col |
||||
setTimeout(() => { |
||||
col.close() |
||||
}, 3000) // 最大终止时间3秒，若超过3秒还没有被终止，则终止 |
||||
} // 设置loading |
||||
const cloLoading = () => { if (loading) loading.close(); } //终止loading |
||||
getXsfxbgApi().then((res: any) => { |
||||
const cloLoading = () => { |
||||
if (loading) loading.close() |
||||
} //终止loading |
||||
getXsfxbgApi() |
||||
.then((res: any) => { |
||||
data.value = res.result |
||||
setLoading(); |
||||
}).finally(cloLoading); |
||||
setLoading() |
||||
}) |
||||
.finally(cloLoading) |
||||
const Rebuild = async () => { |
||||
setLoading(); |
||||
const res: any = await getXsfxbgApi({ recreateFlag: true, annualid: annualid.value }) |
||||
data.value = res.result |
||||
cloLoading(); |
||||
setLoading() |
||||
const res: any = await getXsfxbgApi({ |
||||
recreateFlag: true, |
||||
annualid: annualid.value, |
||||
}) |
||||
data.value = res.result |
||||
cloLoading() |
||||
} |
||||
|
||||
const annualid = ref('') |
||||
watch(() => annualid.value, () => { |
||||
watch( |
||||
() => annualid.value, |
||||
() => { |
||||
Rebuild() |
||||
}) |
||||
}, |
||||
) |
||||
</script> |
||||
|
||||
<style lang='scss' scoped> |
||||
<style lang="scss" scoped> |
||||
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap'); |
||||
|
||||
* { |
||||
font-family: "Roboto", sans-serif; |
||||
font-weight: 300; |
||||
font-style: normal; |
||||
line-height: 3; |
||||
font-family: 'Roboto', sans-serif; |
||||
font-weight: 300; |
||||
font-style: normal; |
||||
line-height: 3; |
||||
} |
||||
|
||||
.title-pons { |
||||
font-size: 30px; |
||||
text-align: center; |
||||
padding-bottom: 30px; |
||||
line-height: initial; |
||||
font-size: 30px; |
||||
text-align: center; |
||||
padding-bottom: 30px; |
||||
line-height: initial; |
||||
} |
||||
|
||||
.table{ |
||||
font-size: 16px; |
||||
.table { |
||||
font-size: 16px; |
||||
} |
||||
.fill { |
||||
padding-top: 80px; |
||||
padding-top: 80px; |
||||
} |
||||
|
||||
.loading { |
||||
width: 100%; |
||||
height: 100vh; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
width: 100%; |
||||
height: 100vh; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
} |
||||
|
||||
.rebuild { |
||||
display: flex; |
||||
justify-content: center; |
||||
display: flex; |
||||
justify-content: center; |
||||
|
||||
div { |
||||
cursor: pointer; |
||||
} |
||||
div { |
||||
cursor: pointer; |
||||
} |
||||
} |
||||
|
||||
.personage { |
||||
padding: 0 18.6vw 60px; |
||||
width: 100%; |
||||
margin: auto; |
||||
padding: 0 18.6vw 60px; |
||||
width: 100%; |
||||
margin: auto; |
||||
|
||||
&>* { |
||||
margin: 50px 0; |
||||
} |
||||
& > * { |
||||
margin: 50px 0; |
||||
} |
||||
|
||||
&>img { |
||||
margin: -50px 0; |
||||
} |
||||
& > img { |
||||
margin: -50px 0; |
||||
} |
||||
|
||||
&>.title { |
||||
text-align: center; |
||||
font-size: 35px; |
||||
font-weight: bolder; |
||||
} |
||||
& > .title { |
||||
text-align: center; |
||||
font-size: 35px; |
||||
font-weight: bolder; |
||||
} |
||||
|
||||
.paragraph { |
||||
font-size: 16px; |
||||
text-indent: 2em; |
||||
} |
||||
.paragraph { |
||||
font-size: 16px; |
||||
text-indent: 2em; |
||||
} |
||||
|
||||
.card { |
||||
width: 100%; |
||||
|
||||
.inner { |
||||
height: 0; |
||||
padding-top: 40%; |
||||
position: relative; |
||||
|
||||
.container { |
||||
position: absolute; |
||||
inset: 0; |
||||
border-radius: 5px; |
||||
border: 1px solid; |
||||
line-height: 1; |
||||
display: flex; |
||||
|
||||
.fl-box { |
||||
height: 80%; |
||||
margin: auto; |
||||
margin-left: 25px; |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: space-between; |
||||
|
||||
.tit { |
||||
color: #a0a0a0; |
||||
} |
||||
|
||||
.center { |
||||
font-size: 30px; |
||||
font-weight: bolder; |
||||
} |
||||
|
||||
.info { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.card { |
||||
width: 100%; |
||||
|
||||
.ec-box { |
||||
width: 100%; |
||||
border-radius: 2px 2px 2px 2px; |
||||
border: 1px solid #000; |
||||
.inner { |
||||
height: 0; |
||||
padding-top: 40%; |
||||
position: relative; |
||||
|
||||
.title-box { |
||||
height: 58px; |
||||
border-radius: 2px 2px 0px 0px; |
||||
box-shadow: 0px 1px 2px 0px #707070; |
||||
.container { |
||||
position: absolute; |
||||
inset: 0; |
||||
border-radius: 5px; |
||||
border: 1px solid; |
||||
line-height: 1; |
||||
display: flex; |
||||
|
||||
.fl-box { |
||||
height: 80%; |
||||
margin: auto; |
||||
margin-left: 25px; |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: space-between; |
||||
|
||||
.tit { |
||||
color: #a0a0a0; |
||||
} |
||||
|
||||
.center { |
||||
font-size: 30px; |
||||
font-weight: bolder; |
||||
} |
||||
|
||||
.info { |
||||
display: flex; |
||||
|
||||
.tit { |
||||
margin-left: 4%; |
||||
height: 58px; |
||||
line-height: 58px; |
||||
font-size: 16px; |
||||
color: rgba(0, 0, 0, 0.85); |
||||
} |
||||
justify-content: space-between; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.table-box { |
||||
border: 1px solid; |
||||
padding: 40px 20px; |
||||
|
||||
table { |
||||
width: 100%; |
||||
|
||||
caption { |
||||
caption-side: top; |
||||
padding-bottom: 20px; |
||||
text-align: center; |
||||
color: #000; |
||||
font-size: 26px; |
||||
} |
||||
|
||||
thead { |
||||
text-align: left; |
||||
color: rgb(160 160 160); |
||||
} |
||||
|
||||
tr { |
||||
text-align: left; |
||||
border-bottom: 1px solid rgb(219, 216, 216); |
||||
|
||||
th, |
||||
td { |
||||
padding: 10px 0; |
||||
} |
||||
|
||||
th:first-child { |
||||
text-align: center; |
||||
} |
||||
|
||||
td:last-child { |
||||
color: rgb(64, 51, 253); |
||||
} |
||||
} |
||||
} |
||||
.ec-box { |
||||
width: 100%; |
||||
border-radius: 2px 2px 2px 2px; |
||||
border: 1px solid #000; |
||||
|
||||
.title-box { |
||||
height: 58px; |
||||
border-radius: 2px 2px 0px 0px; |
||||
box-shadow: 0px 1px 2px 0px #707070; |
||||
display: flex; |
||||
|
||||
.tit { |
||||
margin-left: 4%; |
||||
height: 58px; |
||||
line-height: 58px; |
||||
font-size: 16px; |
||||
color: rgba(0, 0, 0, 0.85); |
||||
} |
||||
} |
||||
} |
||||
|
||||
.table-box { |
||||
border: 1px solid; |
||||
padding: 40px 20px; |
||||
|
||||
table { |
||||
width: 100%; |
||||
|
||||
/** */ |
||||
.card1 { |
||||
--el-card-padding: 0; |
||||
caption { |
||||
caption-side: top; |
||||
padding-bottom: 20px; |
||||
text-align: center; |
||||
color: #000; |
||||
font-size: 26px; |
||||
} |
||||
|
||||
thead { |
||||
text-align: left; |
||||
color: rgb(160 160 160); |
||||
} |
||||
|
||||
tr { |
||||
text-align: left; |
||||
border-bottom: 1px solid rgb(219, 216, 216); |
||||
|
||||
th, |
||||
td { |
||||
padding: 10px 0; |
||||
} |
||||
|
||||
&, |
||||
* { |
||||
line-height: initial; |
||||
th:first-child { |
||||
text-align: center; |
||||
} |
||||
|
||||
:deep() { |
||||
.el-card__body { |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: space-between; |
||||
} |
||||
td:last-child { |
||||
color: rgb(64, 51, 253); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
width: 100%; |
||||
height: 182px; |
||||
// background-color: #ffffff00; |
||||
border: 1px solid #ccc; |
||||
padding: 20px; |
||||
/** */ |
||||
.card1 { |
||||
--el-card-padding: 0; |
||||
|
||||
.title { |
||||
display: flex; |
||||
width: 100%; |
||||
&, |
||||
* { |
||||
line-height: initial; |
||||
} |
||||
|
||||
justify-content: space-between; |
||||
:deep() { |
||||
.el-card__body { |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: space-between; |
||||
} |
||||
} |
||||
|
||||
.left { |
||||
font-size: 14px; |
||||
color: #fff; |
||||
color: rgba(0, 0, 0, 0.45); |
||||
} |
||||
} |
||||
width: 100%; |
||||
height: 182px; |
||||
// background-color: #ffffff00; |
||||
border: 1px solid #ccc; |
||||
padding: 20px; |
||||
|
||||
.title { |
||||
display: flex; |
||||
width: 100%; |
||||
|
||||
justify-content: space-between; |
||||
|
||||
.left { |
||||
font-size: 14px; |
||||
color: #fff; |
||||
color: rgba(0, 0, 0, 0.45); |
||||
} |
||||
} |
||||
|
||||
.name { |
||||
font-size: 42px; |
||||
font-weight: 500; |
||||
color: #000; |
||||
margin: 10px 0; |
||||
} |
||||
.name { |
||||
font-size: 42px; |
||||
font-weight: 500; |
||||
color: #000; |
||||
margin: 10px 0; |
||||
} |
||||
|
||||
.total { |
||||
font-size: 16px; |
||||
color: #000; |
||||
// display: flex; |
||||
width: 100%; |
||||
display: grid; |
||||
grid-template-columns: repeat(4, 1fr); |
||||
/* 创建两列，每列宽度相等 */ |
||||
grid-template-rows: repeat(2, 10px); |
||||
/* 创建四行，每行高度固定为100px */ |
||||
gap: 10px; |
||||
|
||||
div { |
||||
// width: 25%; |
||||
} |
||||
} |
||||
.total { |
||||
font-size: 16px; |
||||
color: #000; |
||||
// display: flex; |
||||
width: 100%; |
||||
display: grid; |
||||
grid-template-columns: repeat(4, 1fr); |
||||
/* 创建两列，每列宽度相等 */ |
||||
grid-template-rows: repeat(2, 10px); |
||||
/* 创建四行，每行高度固定为100px */ |
||||
gap: 10px; |
||||
|
||||
div { |
||||
// width: 25%; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
|
||||
@ -1,179 +1,190 @@ |
||||
<!-- 比赛项目名称页面 --> |
||||
<template> |
||||
<div class="fill"></div> |
||||
<div class="banner"> |
||||
<img src="../../assets/images/banner2.png" alt=""> |
||||
<div class="fill"></div> |
||||
<div class="banner"> |
||||
<img src="../../assets/images/banner2.png" alt="" /> |
||||
</div> |
||||
|
||||
<div class="project-name"> |
||||
<!-- 面包屑 --> |
||||
<div class="bread-box"> |
||||
<el-breadcrumb separator-icon="ArrowRight"> |
||||
<template v-for="r in route.matched" :key="r.path"> |
||||
<el-breadcrumb-item |
||||
v-if="r.path !== '/projectName'" |
||||
:to="{ path: r.path }" |
||||
> |
||||
{{ r.meta.title }} |
||||
</el-breadcrumb-item> |
||||
<el-breadcrumb-item v-else> |
||||
{{ r.meta.title }} |
||||
</el-breadcrumb-item> |
||||
</template> |
||||
</el-breadcrumb> |
||||
</div> |
||||
|
||||
<div class="project-name"> |
||||
<!-- 面包屑 --> |
||||
<div class="bread-box"> |
||||
<el-breadcrumb separator-icon="ArrowRight"> |
||||
<template v-for="r in route.matched" :key="r.path"> |
||||
<el-breadcrumb-item v-if="r.path !== '/projectName'" :to="{ path: r.path }"> |
||||
{{ r.meta.title }} |
||||
</el-breadcrumb-item> |
||||
<el-breadcrumb-item v-else> |
||||
{{ r.meta.title }} |
||||
</el-breadcrumb-item> |
||||
</template> |
||||
|
||||
</el-breadcrumb> |
||||
</div> |
||||
|
||||
<div class="content"> |
||||
<div class="title">{{ data.objName }}</div> |
||||
<div class="text" v-html="data.introduce"></div> |
||||
<div class="foot"> |
||||
<el-checkbox v-model="checked" label="我已完成阅读并全部知悉项目比赛规则" size="large" /> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="btn-box"> |
||||
<el-button class="btn" @click="handleSub">立刻报名</el-button> |
||||
</div> |
||||
<div class="content"> |
||||
<div class="title">{{ data.objName }}</div> |
||||
<div class="text" v-html="data.introduce"></div> |
||||
<div class="foot"> |
||||
<el-checkbox |
||||
v-model="checked" |
||||
label="我已完成阅读并全部知悉项目比赛规则" |
||||
size="large" |
||||
/> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="btn-box"> |
||||
<el-button class="btn" @click="handleSub">立刻报名</el-button> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup lang="ts"> |
||||
import { getCompetitionOneApi } from '@/api/person'; |
||||
import { ref, watch } from 'vue'; |
||||
import { useRoute, useRouter } from 'vue-router'; |
||||
import { ElMessage, ElLoading } from 'element-plus'; |
||||
import { getCompetitionOneApi } from '@/api/person' |
||||
import { ref, watch } from 'vue' |
||||
import { useRoute, useRouter } from 'vue-router' |
||||
import { ElMessage, ElLoading } from 'element-plus' |
||||
|
||||
const route = useRoute(); |
||||
const router = useRouter(); |
||||
const route = useRoute() |
||||
const router = useRouter() |
||||
|
||||
// loading |
||||
const loading = ref(false); |
||||
let loadingInstance: any; |
||||
watch(loading, newVal => { |
||||
if (newVal) loadingInstance = ElLoading.service({ fullscreen: true }); |
||||
else if (loadingInstance) loadingInstance.close(); |
||||
}); |
||||
const loading = ref(false) |
||||
let loadingInstance: any |
||||
watch(loading, (newVal) => { |
||||
if (newVal) loadingInstance = ElLoading.service({ fullscreen: true }) |
||||
else if (loadingInstance) loadingInstance.close() |
||||
}) |
||||
|
||||
// 获取数据 |
||||
const data = ref<Record<any, any>>({}); |
||||
const data = ref<Record<any, any>>({}) |
||||
async function getData() { |
||||
if (!route.query.id) return |
||||
try { |
||||
loading.value = true; |
||||
const res: any = await getCompetitionOneApi(route.query.id as string); |
||||
if (!res.result) return |
||||
data.value = res.result; |
||||
} catch (error) { |
||||
ElMessage.error('请求失败'); |
||||
} finally { |
||||
loading.value = false; |
||||
} |
||||
if (!route.query.id) return |
||||
try { |
||||
loading.value = true |
||||
const res: any = await getCompetitionOneApi(route.query.id as string) |
||||
if (!res.result) return |
||||
data.value = res.result |
||||
} catch (error) { |
||||
ElMessage.error('请求失败') |
||||
} finally { |
||||
loading.value = false |
||||
} |
||||
} |
||||
|
||||
// 是否同意 |
||||
const checked = ref(false); |
||||
const checked = ref(false) |
||||
|
||||
// 立刻报名 |
||||
function handleSub() { |
||||
if (!checked.value) { |
||||
ElMessage({ |
||||
message: '请先同意', |
||||
type: 'warning', |
||||
}) |
||||
return |
||||
} |
||||
// Y:团队赛 N:个人赛 |
||||
let path; |
||||
if (data.value.entryForm === 'Y') path = '/registrationGroup'; |
||||
else path = '/registrationPersonage'; |
||||
router.push({ path, query: { id: route.query.id,objName:data.value.objName,bcId:route.query.bcId } }) |
||||
if (!checked.value) { |
||||
ElMessage({ |
||||
message: '请先同意', |
||||
type: 'warning', |
||||
}) |
||||
return |
||||
} |
||||
// Y:团队赛 N:个人赛 |
||||
let path |
||||
if (data.value.entryForm === 'Y') path = '/registrationGroup' |
||||
else path = '/registrationPersonage' |
||||
router.push({ |
||||
path, |
||||
query: { |
||||
id: route.query.id, |
||||
objName: data.value.objName, |
||||
bcId: route.query.bcId, |
||||
}, |
||||
}) |
||||
} |
||||
|
||||
getData(); |
||||
getData() |
||||
</script> |
||||
|
||||
|
||||
|
||||
<style lang="scss" scoped> |
||||
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap'); |
||||
|
||||
* { |
||||
font-family: "Roboto", sans-serif; |
||||
font-weight: 300; |
||||
font-style: normal; |
||||
line-height: 2; |
||||
font-family: 'Roboto', sans-serif; |
||||
font-weight: 300; |
||||
font-style: normal; |
||||
line-height: 2; |
||||
} |
||||
|
||||
.project-name { |
||||
margin: 0 auto; |
||||
width: $base-container-width; |
||||
|
||||
.bread-box { |
||||
margin: 40px 0; |
||||
margin: 0 auto; |
||||
width: $base-container-width; |
||||
|
||||
.bread-box { |
||||
margin: 40px 0; |
||||
} |
||||
|
||||
.content { |
||||
.title { |
||||
text-align: center; |
||||
font-size: 42px; |
||||
color: #333333; |
||||
margin: 20px 0; |
||||
} |
||||
|
||||
.content { |
||||
.title { |
||||
text-align: center; |
||||
font-size: 42px; |
||||
color: #333333; |
||||
margin: 20px 0; |
||||
} |
||||
|
||||
.text { |
||||
font-size: 18px; |
||||
color: #666666; |
||||
text-indent: 2em; |
||||
min-height: 500px; |
||||
} |
||||
|
||||
.foot { |
||||
margin: 120px 0 20px; |
||||
display: flex; |
||||
align-items: center; |
||||
gap: 110px; |
||||
} |
||||
.text { |
||||
font-size: 18px; |
||||
color: #666666; |
||||
text-indent: 2em; |
||||
min-height: 500px; |
||||
} |
||||
|
||||
.btn-box { |
||||
display: flex; |
||||
justify-content: center; |
||||
margin-top: 80px; |
||||
|
||||
.btn { |
||||
--color1: #00D0D0; |
||||
--color2: #42D9AC; |
||||
cursor: pointer; |
||||
text-align: center; |
||||
width: 470px; |
||||
height: 50px; |
||||
border-radius: 45px; |
||||
border: none; |
||||
font-weight: bold; |
||||
font-size: 24px; |
||||
color: #FFFFFF; |
||||
background: linear-gradient(to right, var(--color1), var(--color2)); |
||||
box-shadow: 7px 7px 22px -10px rgba(0, 0, 0, 0.22); |
||||
transition: all 0.2s; |
||||
|
||||
&:hover { |
||||
transform: scale(1.1); |
||||
} |
||||
} |
||||
.foot { |
||||
margin: 120px 0 20px; |
||||
display: flex; |
||||
align-items: center; |
||||
gap: 110px; |
||||
} |
||||
} |
||||
|
||||
.btn-box { |
||||
display: flex; |
||||
justify-content: center; |
||||
margin-top: 80px; |
||||
|
||||
.btn { |
||||
--color1: #00d0d0; |
||||
--color2: #42d9ac; |
||||
cursor: pointer; |
||||
text-align: center; |
||||
width: 470px; |
||||
height: 50px; |
||||
border-radius: 45px; |
||||
border: none; |
||||
font-weight: bold; |
||||
font-size: 24px; |
||||
color: #ffffff; |
||||
background: linear-gradient(to right, var(--color1), var(--color2)); |
||||
box-shadow: 7px 7px 22px -10px rgba(0, 0, 0, 0.22); |
||||
transition: all 0.2s; |
||||
|
||||
&:hover { |
||||
transform: scale(1.1); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.fill { |
||||
padding-top: 80px; |
||||
padding-top: 80px; |
||||
} |
||||
|
||||
.banner { |
||||
width: 100%; |
||||
height: 367px; |
||||
border-radius: 0px 0px 0px 0px; |
||||
width: 100%; |
||||
height: 367px; |
||||
border-radius: 0px 0px 0px 0px; |
||||
|
||||
img { |
||||
width: 100%; |
||||
height: 100%; |
||||
object-fit: cover; |
||||
} |
||||
img { |
||||
width: 100%; |
||||
height: 100%; |
||||
object-fit: cover; |
||||
} |
||||
} |
||||
</style> |
||||
</style> |
||||
|
||||
@ -1,76 +1,102 @@ |
||||
<template> |
||||
<el-dialog :modelValue="modelValue" @update:modelValue="(newValue: boolean) => $emit('update:modelValue', newValue)" |
||||
title="用户信息" width="800" draggable overflow> |
||||
<div class="table-box"> |
||||
<el-table ref="multipleTableRef" border :data="tableData" class="table"> |
||||
<el-table-column label="选择" width="55"> |
||||
<template #default="scope"> |
||||
<el-radio v-model="selectedRow" :value="scope.row" /> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="序号"> |
||||
<template #default="scope"> |
||||
{{ scope.$index + 1 }} |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column property="realname" label="真实姓名" sortable /> |
||||
<el-table-column property="work_no" label="学号" sortable /> |
||||
</el-table> |
||||
<div class="pagin-box"> |
||||
<el-pagination class="pagination" style="width: 100%;" v-model:current-page="params.pageNo" |
||||
v-model:page-size="params.pageSize" :page-sizes="[10, 20, 30, 40]" |
||||
layout="slo, total,slot, sizes, prev, pager, next, jumper" :total="total" @change="getList" /> |
||||
</div> |
||||
</div> |
||||
<el-dialog |
||||
:modelValue="modelValue" |
||||
@update:modelValue=" |
||||
(newValue: boolean) => $emit('update:modelValue', newValue) |
||||
" |
||||
title="用户信息" |
||||
width="800" |
||||
draggable |
||||
overflow |
||||
> |
||||
<div class="table-box"> |
||||
<el-table ref="multipleTableRef" border :data="tableData" class="table"> |
||||
<el-table-column label="选择" width="55"> |
||||
<template #default="scope"> |
||||
<el-radio v-model="selectedRow" :value="scope.row" /> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="序号"> |
||||
<template #default="scope"> |
||||
{{ scope.$index + 1 }} |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column property="realname" label="真实姓名" sortable /> |
||||
<el-table-column property="work_no" label="学号" sortable /> |
||||
</el-table> |
||||
<div class="pagin-box"> |
||||
<el-pagination |
||||
class="pagination" |
||||
style="width: 100%" |
||||
v-model:current-page="params.pageNo" |
||||
v-model:page-size="params.pageSize" |
||||
:page-sizes="[10, 20, 30, 40]" |
||||
layout="slo, total,slot, sizes, prev, pager, next, jumper" |
||||
:total="total" |
||||
@change="getList" |
||||
/> |
||||
</div> |
||||
</div> |
||||
|
||||
<template #footer> |
||||
<div class="dialog-footer"> |
||||
<el-button @click="$emit('update:modelValue', false)">关闭</el-button> |
||||
<el-button type="primary" |
||||
@click="() => { $emit('update:modelValue', false); $emit('selected', selectedRow); }">确认</el-button> |
||||
</div> |
||||
</template> |
||||
</el-dialog> |
||||
<template #footer> |
||||
<div class="dialog-footer"> |
||||
<el-button @click="$emit('update:modelValue', false)">关闭</el-button> |
||||
<el-button |
||||
type="primary" |
||||
@click=" |
||||
() => { |
||||
$emit('update:modelValue', false) |
||||
$emit('selected', selectedRow) |
||||
} |
||||
" |
||||
> |
||||
确认 |
||||
</el-button> |
||||
</div> |
||||
</template> |
||||
</el-dialog> |
||||
</template> |
||||
|
||||
<script lang="ts" setup> |
||||
import { computed, reactive, ref, watch } from 'vue'; |
||||
import { getMembersList } from '@/api/person'; |
||||
import { useRoute } from 'vue-router'; |
||||
import { computed, reactive, ref, watch } from 'vue' |
||||
import { getMembersList } from '@/api/person' |
||||
import { useRoute } from 'vue-router' |
||||
|
||||
const props = defineProps(['modelValue']); |
||||
const $emit = defineEmits(['update:modelValue', 'selected']); |
||||
const route = useRoute(); |
||||
const props = defineProps(['modelValue']) |
||||
const $emit = defineEmits(['update:modelValue', 'selected']) |
||||
const route = useRoute() |
||||
|
||||
watch(() => props.modelValue, () => getList()); |
||||
watch( |
||||
() => props.modelValue, |
||||
() => getList(), |
||||
) |
||||
|
||||
// 数据 |
||||
const tableData = reactive<any[]>([]); |
||||
const selectedRow = ref(); |
||||
const tableData = reactive<any[]>([]) |
||||
const selectedRow = ref() |
||||
|
||||
// 分页 |
||||
const total = ref(0); |
||||
const total = ref(0) |
||||
|
||||
const params = reactive<any>({ |
||||
pageNo: 1, |
||||
pageSize: 10, |
||||
onlRepUrlParamStr: `annualCompid=${route.query.objName}`, |
||||
entryFormat: '团队', |
||||
id: route.query.id, |
||||
pageNo: 1, |
||||
pageSize: 10, |
||||
onlRepUrlParamStr: `annualCompid=${route.query.objName}`, |
||||
entryFormat: '团队', |
||||
id: route.query.id, |
||||
}) |
||||
|
||||
|
||||
const getList = async () => { |
||||
if (!props.modelValue) return |
||||
const res: any = await getMembersList(params); |
||||
tableData.length = 0; |
||||
tableData.push(...res.result.records); |
||||
total.value = res.result.total; |
||||
if (!props.modelValue) return |
||||
const res: any = await getMembersList(params) |
||||
tableData.length = 0 |
||||
tableData.push(...res.result.records) |
||||
total.value = res.result.total |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.form-box { |
||||
padding: 0 60px; |
||||
padding: 0 60px; |
||||
} |
||||
</style> |
||||
</style> |
||||
|
||||
@ -1,78 +1,86 @@ |
||||
<template> |
||||
<el-dialog title="编辑" width="800" draggable> |
||||
<div class="form-box"> |
||||
<el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" status-icon :rules="rules" |
||||
label-width="auto" class="demo-ruleForm"> |
||||
<el-form-item label="年度比赛项目" prop="pass"> |
||||
<el-input v-model="ruleForm.pass" type="text" autocomplete="off" /> |
||||
</el-form-item> |
||||
<el-form-item label="参赛形式" prop="checkPass"> |
||||
<el-input v-model="ruleForm.checkPass" type="text" autocomplete="off" /> |
||||
</el-form-item> |
||||
<el-form-item label="队伍名称" prop="age"> |
||||
<el-input v-model.number="ruleForm.age" /> |
||||
</el-form-item> |
||||
</el-form> |
||||
</div> |
||||
|
||||
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="onCutTab"> |
||||
<el-tab-pane label="团队成员表" name="members"> |
||||
<info-list ref="memRef"></info-list> |
||||
</el-tab-pane> |
||||
<el-tab-pane label="指导老师表" name="adviser"> |
||||
<info-list></info-list> |
||||
</el-tab-pane> |
||||
</el-tabs> |
||||
|
||||
<div> |
||||
<el-button>关闭</el-button> |
||||
<el-button type="primary" @click="submit">确认</el-button> |
||||
</div> |
||||
</el-dialog> |
||||
<el-dialog title="编辑" width="800" draggable> |
||||
<div class="form-box"> |
||||
<el-form |
||||
ref="ruleFormRef" |
||||
style="max-width: 600px" |
||||
:model="ruleForm" |
||||
status-icon |
||||
:rules="rules" |
||||
label-width="auto" |
||||
class="demo-ruleForm" |
||||
> |
||||
<el-form-item label="年度比赛项目" prop="pass"> |
||||
<el-input v-model="ruleForm.pass" type="text" autocomplete="off" /> |
||||
</el-form-item> |
||||
<el-form-item label="参赛形式" prop="checkPass"> |
||||
<el-input |
||||
v-model="ruleForm.checkPass" |
||||
type="text" |
||||
autocomplete="off" |
||||
/> |
||||
</el-form-item> |
||||
<el-form-item label="队伍名称" prop="age"> |
||||
<el-input v-model.number="ruleForm.age" /> |
||||
</el-form-item> |
||||
</el-form> |
||||
</div> |
||||
|
||||
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="onCutTab"> |
||||
<el-tab-pane label="团队成员表" name="members"> |
||||
<info-list ref="memRef"></info-list> |
||||
</el-tab-pane> |
||||
<el-tab-pane label="指导老师表" name="adviser"> |
||||
<info-list></info-list> |
||||
</el-tab-pane> |
||||
</el-tabs> |
||||
|
||||
<div> |
||||
<el-button>关闭</el-button> |
||||
<el-button type="primary" @click="submit">确认</el-button> |
||||
</div> |
||||
</el-dialog> |
||||
</template> |
||||
|
||||
<script lang="ts" setup> |
||||
import { reactive, ref } from 'vue'; |
||||
import type { TabsPaneContext, FormInstance, FormRules } from 'element-plus'; |
||||
import { useRoute } from 'vue-router'; |
||||
import infoList from './infoList.vue'; |
||||
|
||||
const route = useRoute(); |
||||
defineProps(['data']); |
||||
import { reactive, ref } from 'vue' |
||||
import type { TabsPaneContext, FormInstance, FormRules } from 'element-plus' |
||||
import { useRoute } from 'vue-router' |
||||
import infoList from './infoList.vue' |
||||
|
||||
const route = useRoute() |
||||
defineProps(['data']) |
||||
|
||||
const activeName = ref('members'); |
||||
const activeName = ref('members') |
||||
|
||||
const onCutTab = (tab: TabsPaneContext) => { |
||||
console.log(tab.props.name,) |
||||
console.log(tab.props.name) |
||||
} |
||||
|
||||
// form表单 |
||||
const ruleFormRef = ref<FormInstance>(); |
||||
const ruleFormRef = ref<FormInstance>() |
||||
|
||||
const ruleForm = reactive({ |
||||
pass: route.query.objName, |
||||
checkPass: '团队赛', |
||||
age: '', |
||||
pass: route.query.objName, |
||||
checkPass: '团队赛', |
||||
age: '', |
||||
}) |
||||
|
||||
const rules = reactive<FormRules<typeof ruleForm>>({}); |
||||
|
||||
|
||||
const rules = reactive<FormRules<typeof ruleForm>>({}) |
||||
|
||||
const memRef = ref<any>(null); |
||||
const memRef = ref<any>(null) |
||||
|
||||
const submit = () => { |
||||
memRef.value.submit() |
||||
memRef.value.submit() |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.el-tabs--top { |
||||
flex-direction: column; |
||||
flex-direction: column; |
||||
} |
||||
|
||||
.form-box { |
||||
padding: 0 60px; |
||||
padding: 0 60px; |
||||
} |
||||
</style> |
||||
</style> |
||||
|
||||
@ -1,153 +1,163 @@ |
||||
<template> |
||||
<el-button type="primary" icon="Plus" @click="add">新增</el-button> |
||||
<div class="table-box"> |
||||
<el-table ref="multipleTableRef" border :data="tableData" class="table" height="276px"> |
||||
<el-table-column type="selection" width="55" /> |
||||
<el-table-column property="#" label="#" /> |
||||
<el-table-column> |
||||
<template #header> |
||||
<el-icon> |
||||
<Edit /> |
||||
</el-icon> |
||||
<span style="margin-left: 10px;">用户</span> |
||||
</template> |
||||
<template #default="scope"> |
||||
<el-input @click="openDialog(scope.row)" v-model="scope.row['用户']" placeholder="请选择" |
||||
:prefix-icon="ClusterOutlined" /> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column> |
||||
<template #header> |
||||
<el-icon> |
||||
<Edit /> |
||||
</el-icon> |
||||
<span style="margin-left: 10px;">是否队长</span> |
||||
</template> |
||||
<template #default="scope"> |
||||
<el-cascader v-model="scope.row['是否队长']" :options="options" /> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column> |
||||
<template #header> |
||||
<el-icon> |
||||
<Edit /> |
||||
</el-icon> |
||||
<span style="margin-left: 10px;">队员序号</span> |
||||
</template> |
||||
<template #default="scope"> |
||||
<el-input v-model="scope.row['队员序号']" /> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
</div> |
||||
|
||||
<!-- <div> |
||||
<el-button type="primary" icon="Plus" @click="add">新增</el-button> |
||||
<div class="table-box"> |
||||
<el-table |
||||
ref="multipleTableRef" |
||||
border |
||||
:data="tableData" |
||||
class="table" |
||||
height="276px" |
||||
> |
||||
<el-table-column type="selection" width="55" /> |
||||
<el-table-column property="#" label="#" /> |
||||
<el-table-column> |
||||
<template #header> |
||||
<el-icon> |
||||
<Edit /> |
||||
</el-icon> |
||||
<span style="margin-left: 10px">用户</span> |
||||
</template> |
||||
<template #default="scope"> |
||||
<el-input |
||||
@click="openDialog(scope.row)" |
||||
v-model="scope.row['用户']" |
||||
placeholder="请选择" |
||||
:prefix-icon="ClusterOutlined" |
||||
/> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column> |
||||
<template #header> |
||||
<el-icon> |
||||
<Edit /> |
||||
</el-icon> |
||||
<span style="margin-left: 10px">是否队长</span> |
||||
</template> |
||||
<template #default="scope"> |
||||
<el-cascader v-model="scope.row['是否队长']" :options="options" /> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column> |
||||
<template #header> |
||||
<el-icon> |
||||
<Edit /> |
||||
</el-icon> |
||||
<span style="margin-left: 10px">队员序号</span> |
||||
</template> |
||||
<template #default="scope"> |
||||
<el-input v-model="scope.row['队员序号']" /> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
</div> |
||||
|
||||
<!-- <div> |
||||
<el-button>关闭</el-button> |
||||
<el-button type="primary" @click="submit">确认</el-button> |
||||
</div> --> |
||||
|
||||
<dalog v-model="visible" @selected="handleSelected" /> |
||||
<dalog v-model="visible" @selected="handleSelected" /> |
||||
</template> |
||||
|
||||
<script lang="ts" setup> |
||||
import { reactive, ref } from 'vue'; |
||||
import dalog from './dalog.vue'; |
||||
import { ClusterOutlined } from '@ant-design/icons-vue'; |
||||
import { ElMessage } from 'element-plus'; |
||||
import { reactive, ref } from 'vue' |
||||
import dalog from './dalog.vue' |
||||
import { ClusterOutlined } from '@ant-design/icons-vue' |
||||
import { ElMessage } from 'element-plus' |
||||
const options = [ |
||||
{ |
||||
value: true, |
||||
label: '是', |
||||
}, |
||||
{ |
||||
value: false, |
||||
label: '否', |
||||
}, |
||||
{ |
||||
value: true, |
||||
label: '是', |
||||
}, |
||||
{ |
||||
value: false, |
||||
label: '否', |
||||
}, |
||||
] |
||||
|
||||
// 数据 |
||||
const tableData = reactive<any[]>([]) |
||||
|
||||
const add = () => { |
||||
const length = tableData.push({ |
||||
'#': tableData.length + 1, |
||||
'用户': '', |
||||
'是否队长': '', |
||||
'队员序号': '', |
||||
row: undefined, |
||||
}); |
||||
openDialog(tableData[length - 1]); |
||||
const length = tableData.push({ |
||||
'#': tableData.length + 1, |
||||
用户: '', |
||||
是否队长: '', |
||||
队员序号: '', |
||||
row: undefined, |
||||
}) |
||||
openDialog(tableData[length - 1]) |
||||
} |
||||
|
||||
// 当下打开dialog的数据源，在打开dialog时赋值 |
||||
const target = ref<any>(); |
||||
const target = ref<any>() |
||||
const openDialog = (row: any) => { |
||||
visible.value = true; |
||||
target.value = row; |
||||
visible.value = true |
||||
target.value = row |
||||
} |
||||
|
||||
const visible = ref(false); |
||||
const visible = ref(false) |
||||
|
||||
// 像数据源中添加数据 |
||||
const handleSelected = (row: any) => { |
||||
if (tableData.some(o => o?.row?.id === row.id)) { |
||||
ElMessage({ |
||||
message: '用户不能多选!', |
||||
type: 'error' |
||||
}) |
||||
return |
||||
} |
||||
target.value['用户'] = row.realname; |
||||
target.value.row = row; |
||||
if (tableData.some((o) => o?.row?.id === row.id)) { |
||||
ElMessage({ |
||||
message: '用户不能多选!', |
||||
type: 'error', |
||||
}) |
||||
return |
||||
} |
||||
target.value['用户'] = row.realname |
||||
target.value.row = row |
||||
} |
||||
|
||||
// 提交 |
||||
|
||||
const submit = () => { |
||||
console.log(tableData); |
||||
console.log(tableData) |
||||
} |
||||
|
||||
defineExpose({submit}) |
||||
defineExpose({ submit }) |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.form-box { |
||||
padding: 0 60px; |
||||
padding: 0 60px; |
||||
} |
||||
|
||||
.table-box { |
||||
.table { |
||||
width: 100%; |
||||
} |
||||
.table { |
||||
width: 100%; |
||||
} |
||||
|
||||
.pagin-box { |
||||
width: 100%; |
||||
height: 64px; |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
.pagination { |
||||
padding: 0 24px; |
||||
|
||||
:deep() { |
||||
.el-pagination__total { |
||||
margin-right: auto; |
||||
} |
||||
|
||||
.pagin-box { |
||||
width: 100%; |
||||
height: 64px; |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
.pagination { |
||||
padding: 0 24px; |
||||
|
||||
:deep() { |
||||
.el-pagination__total { |
||||
margin-right: auto; |
||||
} |
||||
|
||||
li.number.is-active { |
||||
background-color: #42D9AC; |
||||
color: rgba(255, 255, 255, 0.9); |
||||
font-family: Microsoft YaHei UI, Microsoft YaHei UI; |
||||
} |
||||
|
||||
span.el-pagination__jump { |
||||
background-color: #F3F3F3; |
||||
padding: 2px 8px; |
||||
} |
||||
} |
||||
li.number.is-active { |
||||
background-color: #42d9ac; |
||||
color: rgba(255, 255, 255, 0.9); |
||||
font-family: |
||||
Microsoft YaHei UI, |
||||
Microsoft YaHei UI; |
||||
} |
||||
|
||||
span.el-pagination__jump { |
||||
background-color: #f3f3f3; |
||||
padding: 2px 8px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
} |
||||
} |
||||
</style> |
||||
</style> |
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,118 +1,155 @@ |
||||
<template> |
||||
<el-dialog :modelValue="modelValue" @update:modelValue="(newValue: boolean) => $emit('update:modelValue', newValue)" |
||||
title="用户信息" width="800" draggable overflow> |
||||
<div class="table-box"> |
||||
<el-table ref="multipleTableRef" border :data="tableData" @row-click="(row: any) => selectedRowId = row.id" |
||||
append-to-body class="table" v-loading="loading"> |
||||
<el-table-column label="选择" width="55"> |
||||
<template #default="scope"> |
||||
<el-radio v-model="selectedRowId" :value="scope.row.id" /> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="序号"> |
||||
<template #default="scope"> |
||||
{{ scope.$index + 1 }} |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column property="realname" label="真实姓名" sortable /> |
||||
<el-table-column property="work_no" label="学号" sortable /> |
||||
</el-table> |
||||
</div> |
||||
|
||||
<template #footer> |
||||
<div class="pagin-box"> |
||||
<el-pagination class="pagination" style="width: 100%;" v-model:current-page="params.pageNo" |
||||
v-model:page-size="params.pageSize" :page-sizes="[10, 20, 30, 40]" |
||||
layout="slo, total,slot, sizes, prev, pager, next, jumper" :total="total" @change="getList" /> |
||||
</div> |
||||
<div class="dialog-footer"> |
||||
<el-button @click="$emit('update:modelValue', false)">关闭</el-button> |
||||
<el-button type="primary" |
||||
@click="() => { $emit('update:modelValue', false); $emit('selected', tableData.find(o => o.id === selectedRowId) || {}); }">确认</el-button> |
||||
</div> |
||||
</template> |
||||
</el-dialog> |
||||
<el-dialog |
||||
:modelValue="modelValue" |
||||
@update:modelValue=" |
||||
(newValue: boolean) => $emit('update:modelValue', newValue) |
||||
" |
||||
title="用户信息" |
||||
width="800" |
||||
draggable |
||||
overflow |
||||
> |
||||
<div class="table-box"> |
||||
<el-table |
||||
ref="multipleTableRef" |
||||
border |
||||
:data="tableData" |
||||
@row-click="(row: any) => (selectedRowId = row.id)" |
||||
append-to-body |
||||
class="table" |
||||
v-loading="loading" |
||||
> |
||||
<el-table-column label="选择" width="55"> |
||||
<template #default="scope"> |
||||
<el-radio v-model="selectedRowId" :value="scope.row.id" /> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="序号"> |
||||
<template #default="scope"> |
||||
{{ scope.$index + 1 }} |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column property="realname" label="真实姓名" sortable /> |
||||
<el-table-column property="work_no" label="学号" sortable /> |
||||
</el-table> |
||||
</div> |
||||
|
||||
<template #footer> |
||||
<div class="pagin-box"> |
||||
<el-pagination |
||||
class="pagination" |
||||
style="width: 100%" |
||||
v-model:current-page="params.pageNo" |
||||
v-model:page-size="params.pageSize" |
||||
:page-sizes="[10, 20, 30, 40]" |
||||
layout="slo, total,slot, sizes, prev, pager, next, jumper" |
||||
:total="total" |
||||
@change="getList" |
||||
/> |
||||
</div> |
||||
<div class="dialog-footer"> |
||||
<el-button @click="$emit('update:modelValue', false)">关闭</el-button> |
||||
<el-button |
||||
type="primary" |
||||
@click=" |
||||
() => { |
||||
$emit('update:modelValue', false) |
||||
$emit( |
||||
'selected', |
||||
tableData.find((o) => o.id === selectedRowId) || {}, |
||||
) |
||||
} |
||||
" |
||||
> |
||||
确认 |
||||
</el-button> |
||||
</div> |
||||
</template> |
||||
</el-dialog> |
||||
</template> |
||||
|
||||
<script lang="ts" setup> |
||||
import { reactive, ref, watch } from 'vue'; |
||||
import { getMembersList } from '@/api/person'; |
||||
import { useRoute } from 'vue-router'; |
||||
import { ElMessage } from 'element-plus'; |
||||
import { reactive, ref, watch } from 'vue' |
||||
import { getMembersList } from '@/api/person' |
||||
import { useRoute } from 'vue-router' |
||||
import { ElMessage } from 'element-plus' |
||||
|
||||
const props = defineProps(['modelValue']); |
||||
const $emit = defineEmits(['update:modelValue', 'selected']); |
||||
const route = useRoute(); |
||||
const props = defineProps(['modelValue']) |
||||
const $emit = defineEmits(['update:modelValue', 'selected']) |
||||
const route = useRoute() |
||||
|
||||
watch(() => props.modelValue, () => getList()); |
||||
watch( |
||||
() => props.modelValue, |
||||
() => getList(), |
||||
) |
||||
|
||||
// 数据 |
||||
const tableData = reactive<any[]>([]); |
||||
const selectedRowId = ref(); |
||||
const tableData = reactive<any[]>([]) |
||||
const selectedRowId = ref() |
||||
|
||||
// 分页 |
||||
const total = ref(0); |
||||
const total = ref(0) |
||||
|
||||
const params = reactive<any>({ |
||||
pageNo: 1, |
||||
pageSize: 10, |
||||
onlRepUrlParamStr: `annualCompid=${route.query.objName}`, |
||||
entryFormat: '团队', |
||||
id: route.query.id, |
||||
pageNo: 1, |
||||
pageSize: 10, |
||||
onlRepUrlParamStr: `annualCompid=${route.query.objName}`, |
||||
entryFormat: '团队', |
||||
id: route.query.id, |
||||
}) |
||||
|
||||
|
||||
const loading = ref(false); |
||||
const loading = ref(false) |
||||
const getList = async () => { |
||||
if (!props.modelValue) return |
||||
loading.value = true; |
||||
try { |
||||
const res: any = await getMembersList(params); |
||||
tableData.length = 0; |
||||
tableData.push(...res.result.records); |
||||
total.value = res.result.total; |
||||
} catch (error: any) { |
||||
ElMessage({ |
||||
message: error.message, |
||||
type: 'error' |
||||
}) |
||||
} finally { |
||||
loading.value = false; |
||||
} |
||||
if (!props.modelValue) return |
||||
loading.value = true |
||||
try { |
||||
const res: any = await getMembersList(params) |
||||
tableData.length = 0 |
||||
tableData.push(...res.result.records) |
||||
total.value = res.result.total |
||||
} catch (error: any) { |
||||
ElMessage({ |
||||
message: error.message, |
||||
type: 'error', |
||||
}) |
||||
} finally { |
||||
loading.value = false |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.form-box { |
||||
padding: 0 60px; |
||||
padding: 0 60px; |
||||
} |
||||
|
||||
.pagin-box { |
||||
width: 100%; |
||||
height: 64px; |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
.pagination { |
||||
padding: 0 24px; |
||||
|
||||
:deep() { |
||||
.el-pagination__total { |
||||
margin-right: auto; |
||||
} |
||||
|
||||
li.number.is-active { |
||||
background-color: #42D9AC; |
||||
color: rgba(255, 255, 255, 0.9); |
||||
font-family: Microsoft YaHei UI, Microsoft YaHei UI; |
||||
} |
||||
|
||||
span.el-pagination__jump { |
||||
background-color: #F3F3F3; |
||||
padding: 2px 8px; |
||||
} |
||||
} |
||||
width: 100%; |
||||
height: 64px; |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
.pagination { |
||||
padding: 0 24px; |
||||
|
||||
:deep() { |
||||
.el-pagination__total { |
||||
margin-right: auto; |
||||
} |
||||
|
||||
li.number.is-active { |
||||
background-color: #42d9ac; |
||||
color: rgba(255, 255, 255, 0.9); |
||||
font-family: |
||||
Microsoft YaHei UI, |
||||
Microsoft YaHei UI; |
||||
} |
||||
|
||||
span.el-pagination__jump { |
||||
background-color: #f3f3f3; |
||||
padding: 2px 8px; |
||||
} |
||||
} |
||||
|
||||
} |
||||
} |
||||
</style> |
||||
</style> |
||||
|
||||
@ -1,163 +1,186 @@ |
||||
<template> |
||||
<div> |
||||
<el-button type="primary" icon="Plus" @click="add" class="btn">新增</el-button> |
||||
<el-button type="danger" icon="Delete" @click="del" class="btn" v-show="isSele">删除</el-button> |
||||
<div class="table-box"> |
||||
<el-table ref="multipleTableRef" @select="(selection: any[]) => isSele = !!selection.length" border |
||||
:data="tableData" class="table" height="276px"> |
||||
<el-table-column type="selection" width="55" /> |
||||
<el-table-column label="#" width="55"> |
||||
<template #default="{ $index }"> |
||||
{{ $index + 1 }} |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column> |
||||
<template #header> |
||||
<el-icon> |
||||
<Edit /> |
||||
</el-icon> |
||||
<span style="margin-left: 10px;">用户</span> |
||||
</template> |
||||
<template #default="{ row }"> |
||||
<el-input @click="openDialog(row)" v-model="row.realname" placeholder="请选择" |
||||
:prefix-icon="ClusterOutlined" /> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column> |
||||
<template #header> |
||||
<el-icon> |
||||
<Edit /> |
||||
</el-icon> |
||||
<span style="margin-left: 10px;">是否队长</span> |
||||
</template> |
||||
<template #default="{ row }"> |
||||
<el-cascader :modelValue="row.captain" @update:modelValue="(arr: any[]) => row.captain = arr[0]" |
||||
:options="options" /> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column> |
||||
<template #header> |
||||
<el-icon> |
||||
<Edit /> |
||||
</el-icon> |
||||
<span style="margin-left: 10px;">队员序号</span> |
||||
</template> |
||||
<template #default="{ row }"> |
||||
<el-input v-model="row.teamSeq" /> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
</div> |
||||
<stu-dialog v-model="visible" @selected="handleSelected" /> |
||||
<div> |
||||
<el-button type="primary" icon="Plus" @click="add" class="btn"> |
||||
新增 |
||||
</el-button> |
||||
<el-button |
||||
type="danger" |
||||
icon="Delete" |
||||
@click="del" |
||||
class="btn" |
||||
v-show="isSele" |
||||
> |
||||
删除 |
||||
</el-button> |
||||
<div class="table-box"> |
||||
<el-table |
||||
ref="multipleTableRef" |
||||
@select="(selection: any[]) => (isSele = !!selection.length)" |
||||
border |
||||
:data="tableData" |
||||
class="table" |
||||
height="276px" |
||||
> |
||||
<el-table-column type="selection" width="55" /> |
||||
<el-table-column label="#" width="55"> |
||||
<template #default="{ $index }"> |
||||
{{ $index + 1 }} |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column> |
||||
<template #header> |
||||
<el-icon> |
||||
<Edit /> |
||||
</el-icon> |
||||
<span style="margin-left: 10px">用户</span> |
||||
</template> |
||||
<template #default="{ row }"> |
||||
<el-input |
||||
@click="openDialog(row)" |
||||
v-model="row.realname" |
||||
placeholder="请选择" |
||||
:prefix-icon="ClusterOutlined" |
||||
/> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column> |
||||
<template #header> |
||||
<el-icon> |
||||
<Edit /> |
||||
</el-icon> |
||||
<span style="margin-left: 10px">是否队长</span> |
||||
</template> |
||||
<template #default="{ row }"> |
||||
<el-cascader |
||||
:modelValue="row.captain" |
||||
@update:modelValue="(arr: any[]) => (row.captain = arr[0])" |
||||
:options="options" |
||||
/> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column> |
||||
<template #header> |
||||
<el-icon> |
||||
<Edit /> |
||||
</el-icon> |
||||
<span style="margin-left: 10px">队员序号</span> |
||||
</template> |
||||
<template #default="{ row }"> |
||||
<el-input v-model="row.teamSeq" /> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
</div> |
||||
<stu-dialog v-model="visible" @selected="handleSelected" /> |
||||
</div> |
||||
</template> |
||||
|
||||
<script lang="ts" setup> |
||||
import { reactive, ref } from 'vue'; |
||||
import stuDialog from './stuDialog.vue'; |
||||
import { ClusterOutlined } from '@ant-design/icons-vue'; |
||||
import { ElMessage } from 'element-plus'; |
||||
import { reactive, ref } from 'vue' |
||||
import stuDialog from './stuDialog.vue' |
||||
import { ClusterOutlined } from '@ant-design/icons-vue' |
||||
import { ElMessage } from 'element-plus' |
||||
const options = [ |
||||
{ |
||||
value: '1', |
||||
label: '是', |
||||
}, |
||||
{ |
||||
value: '0', |
||||
label: '否', |
||||
}, |
||||
{ |
||||
value: '1', |
||||
label: '是', |
||||
}, |
||||
{ |
||||
value: '0', |
||||
label: '否', |
||||
}, |
||||
] |
||||
|
||||
// 数据 |
||||
const tableData = reactive<any[]>([]) |
||||
|
||||
const add = () => { |
||||
const length = tableData.push({ |
||||
realname: '', // 用户 |
||||
captain: '', // 是否队长 |
||||
teamSeq: '', // 队员序号 |
||||
userId: '', // id |
||||
}); |
||||
openDialog(tableData[length - 1]); |
||||
const length = tableData.push({ |
||||
realname: '', // 用户 |
||||
captain: '', // 是否队长 |
||||
teamSeq: '', // 队员序号 |
||||
userId: '', // id |
||||
}) |
||||
openDialog(tableData[length - 1]) |
||||
} |
||||
|
||||
// 当下打开dialog的数据源，在打开dialog时赋值 |
||||
const target = ref<any>(); |
||||
const target = ref<any>() |
||||
const openDialog = (row: any) => { |
||||
visible.value = true; |
||||
target.value = row; |
||||
visible.value = true |
||||
target.value = row |
||||
} |
||||
|
||||
const visible = ref(false); |
||||
const visible = ref(false) |
||||
|
||||
// 像数据源中添加数据 |
||||
const handleSelected = (row: any = {}) => { |
||||
if (tableData.some(o => o.userId === row.id)) { |
||||
ElMessage({ |
||||
message: '用户不能多选!', |
||||
type: 'error' |
||||
}) |
||||
return |
||||
} |
||||
if (tableData.some((o) => o.userId === row.id)) { |
||||
ElMessage({ |
||||
message: '用户不能多选!', |
||||
type: 'error', |
||||
}) |
||||
return |
||||
} |
||||
|
||||
target.value.realname = row.realname; |
||||
target.value.userId = row.id; |
||||
target.value.realname = row.realname |
||||
target.value.userId = row.id |
||||
} |
||||
|
||||
// 提交 |
||||
defineExpose({ submit: () => tableData }) |
||||
|
||||
// 删除逻辑 |
||||
const multipleTableRef = ref<any>(null); |
||||
const isSele = ref(false); |
||||
const multipleTableRef = ref<any>(null) |
||||
const isSele = ref(false) |
||||
const del = () => { |
||||
const rows = multipleTableRef.value.getSelectionRows() |
||||
rows.forEach((row: any) => { |
||||
const index = tableData.indexOf(row); |
||||
if (index === -1) return; |
||||
tableData.splice(index, 1); |
||||
}) |
||||
const rows = multipleTableRef.value.getSelectionRows() |
||||
rows.forEach((row: any) => { |
||||
const index = tableData.indexOf(row) |
||||
if (index === -1) return |
||||
tableData.splice(index, 1) |
||||
}) |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.btn { |
||||
margin-bottom: 20px; |
||||
margin-bottom: 20px; |
||||
} |
||||
|
||||
.table-box { |
||||
.table { |
||||
width: 100%; |
||||
} |
||||
.table { |
||||
width: 100%; |
||||
} |
||||
|
||||
.pagin-box { |
||||
width: 100%; |
||||
height: 64px; |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
.pagination { |
||||
padding: 0 24px; |
||||
|
||||
:deep() { |
||||
.el-pagination__total { |
||||
margin-right: auto; |
||||
} |
||||
|
||||
.pagin-box { |
||||
width: 100%; |
||||
height: 64px; |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
.pagination { |
||||
padding: 0 24px; |
||||
|
||||
:deep() { |
||||
.el-pagination__total { |
||||
margin-right: auto; |
||||
} |
||||
|
||||
li.number.is-active { |
||||
background-color: #42D9AC; |
||||
color: rgba(255, 255, 255, 0.9); |
||||
font-family: Microsoft YaHei UI, Microsoft YaHei UI; |
||||
} |
||||
|
||||
span.el-pagination__jump { |
||||
background-color: #F3F3F3; |
||||
padding: 2px 8px; |
||||
} |
||||
} |
||||
li.number.is-active { |
||||
background-color: #42d9ac; |
||||
color: rgba(255, 255, 255, 0.9); |
||||
font-family: |
||||
Microsoft YaHei UI, |
||||
Microsoft YaHei UI; |
||||
} |
||||
|
||||
span.el-pagination__jump { |
||||
background-color: #f3f3f3; |
||||
padding: 2px 8px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
} |
||||
} |
||||
</style> |
||||
</style> |
||||
|
||||
@ -1,121 +1,159 @@ |
||||
<template> |
||||
<el-dialog :modelValue="modelValue" @update:modelValue="(newValue: boolean) => $emit('update:modelValue', newValue)" |
||||
append-to-body title="用户信息" width="1000" draggable overflow> |
||||
<div class="table-box"> |
||||
<el-table ref="multipleTableRef" border :data="tableData" @row-click="(row: any) => selectedRowId = row.user_id" |
||||
class="table" v-loading="loading"> |
||||
<el-table-column label="选择" width="55"> |
||||
<template #default="scope"> |
||||
<el-radio v-model="selectedRowId" :value="scope.row.user_id" /> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="序号"> |
||||
<template #default="scope"> |
||||
{{ scope.$index + 1 }} |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column property="realname" label="名字" sortable /> |
||||
<el-table-column property="exp_title" label="学历" sortable /> |
||||
<el-table-column property="exp_zc" label="职称" sortable /> |
||||
<el-table-column property="teamajor" label="专业" sortable /> |
||||
<el-table-column property="exp_yjfx" label="研究方向" sortable /> |
||||
<el-table-column property="phone" label="电话" sortable /> |
||||
</el-table> |
||||
<div class="pagin-box"> |
||||
<el-pagination class="pagination" style="width: 100%;" v-model:current-page="params.pageNo" |
||||
v-model:page-size="params.pageSize" :page-sizes="[10, 20, 30, 40]" |
||||
layout="slo, total,slot, sizes, prev, pager, next, jumper" :total="total" @change="getList" /> |
||||
</div> |
||||
</div> |
||||
<el-dialog |
||||
:modelValue="modelValue" |
||||
@update:modelValue=" |
||||
(newValue: boolean) => $emit('update:modelValue', newValue) |
||||
" |
||||
append-to-body |
||||
title="用户信息" |
||||
width="1000" |
||||
draggable |
||||
overflow |
||||
> |
||||
<div class="table-box"> |
||||
<el-table |
||||
ref="multipleTableRef" |
||||
border |
||||
:data="tableData" |
||||
@row-click="(row: any) => (selectedRowId = row.user_id)" |
||||
class="table" |
||||
v-loading="loading" |
||||
> |
||||
<el-table-column label="选择" width="55"> |
||||
<template #default="scope"> |
||||
<el-radio v-model="selectedRowId" :value="scope.row.user_id" /> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="序号"> |
||||
<template #default="scope"> |
||||
{{ scope.$index + 1 }} |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column property="realname" label="名字" sortable /> |
||||
<el-table-column property="exp_title" label="学历" sortable /> |
||||
<el-table-column property="exp_zc" label="职称" sortable /> |
||||
<el-table-column property="teamajor" label="专业" sortable /> |
||||
<el-table-column property="exp_yjfx" label="研究方向" sortable /> |
||||
<el-table-column property="phone" label="电话" sortable /> |
||||
</el-table> |
||||
<div class="pagin-box"> |
||||
<el-pagination |
||||
class="pagination" |
||||
style="width: 100%" |
||||
v-model:current-page="params.pageNo" |
||||
v-model:page-size="params.pageSize" |
||||
:page-sizes="[10, 20, 30, 40]" |
||||
layout="slo, total,slot, sizes, prev, pager, next, jumper" |
||||
:total="total" |
||||
@change="getList" |
||||
/> |
||||
</div> |
||||
</div> |
||||
|
||||
<template #footer> |
||||
<div class="dialog-footer"> |
||||
<el-button @click="$emit('update:modelValue', false)">关闭</el-button> |
||||
<el-button type="primary" |
||||
@click="() => { $emit('update:modelValue', false); $emit('selected', tableData.find(o => o.user_id === selectedRowId) || {}); }">确认</el-button> |
||||
</div> |
||||
</template> |
||||
</el-dialog> |
||||
<template #footer> |
||||
<div class="dialog-footer"> |
||||
<el-button @click="$emit('update:modelValue', false)">关闭</el-button> |
||||
<el-button |
||||
type="primary" |
||||
@click=" |
||||
() => { |
||||
$emit('update:modelValue', false) |
||||
$emit( |
||||
'selected', |
||||
tableData.find((o) => o.user_id === selectedRowId) || {}, |
||||
) |
||||
} |
||||
" |
||||
> |
||||
确认 |
||||
</el-button> |
||||
</div> |
||||
</template> |
||||
</el-dialog> |
||||
</template> |
||||
|
||||
<script lang="ts" setup> |
||||
import { reactive, ref, watch } from 'vue'; |
||||
import { getAdviserList } from '@/api/person'; |
||||
import { useRoute } from 'vue-router'; |
||||
import { ElMessage } from 'element-plus'; |
||||
import { reactive, ref, watch } from 'vue' |
||||
import { getAdviserList } from '@/api/person' |
||||
import { useRoute } from 'vue-router' |
||||
import { ElMessage } from 'element-plus' |
||||
|
||||
const props = defineProps(['modelValue', 'type']); |
||||
const $emit = defineEmits(['update:modelValue', 'selected']); |
||||
const route = useRoute(); |
||||
const props = defineProps(['modelValue', 'type']) |
||||
const $emit = defineEmits(['update:modelValue', 'selected']) |
||||
const route = useRoute() |
||||
|
||||
watch(() => props.modelValue, () => getList()); |
||||
watch( |
||||
() => props.modelValue, |
||||
() => getList(), |
||||
) |
||||
|
||||
// 数据 |
||||
const tableData = reactive<any[]>([]); |
||||
const selectedRowId = ref(); |
||||
const tableData = reactive<any[]>([]) |
||||
const selectedRowId = ref() |
||||
|
||||
// 分页 |
||||
const total = ref(0); |
||||
const total = ref(0) |
||||
|
||||
const params = reactive<any>({ |
||||
pageNo: 1, |
||||
pageSize: 10, |
||||
onlRepUrlParamStr: `annualCompid=${route.query.objName}`, |
||||
entryFormat: '团队', |
||||
id: route.query.id, |
||||
pageNo: 1, |
||||
pageSize: 10, |
||||
onlRepUrlParamStr: `annualCompid=${route.query.objName}`, |
||||
entryFormat: '团队', |
||||
id: route.query.id, |
||||
}) |
||||
|
||||
const loading = ref(false); |
||||
const loading = ref(false) |
||||
const getList = async () => { |
||||
if (!props.modelValue) return |
||||
loading.value = true; |
||||
try { |
||||
const res: any = await getAdviserList(params); |
||||
tableData.length = 0; |
||||
tableData.push(...res.result.records); |
||||
total.value = res.result.total; |
||||
} catch (error: any) { |
||||
ElMessage({ |
||||
message: error.message, |
||||
type: 'error' |
||||
}) |
||||
} finally { |
||||
loading.value = false; |
||||
} |
||||
if (!props.modelValue) return |
||||
loading.value = true |
||||
try { |
||||
const res: any = await getAdviserList(params) |
||||
tableData.length = 0 |
||||
tableData.push(...res.result.records) |
||||
total.value = res.result.total |
||||
} catch (error: any) { |
||||
ElMessage({ |
||||
message: error.message, |
||||
type: 'error', |
||||
}) |
||||
} finally { |
||||
loading.value = false |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.form-box { |
||||
padding: 0 60px; |
||||
padding: 0 60px; |
||||
} |
||||
|
||||
.pagin-box { |
||||
width: 100%; |
||||
height: 64px; |
||||
display: flex; |
||||
align-items: center; |
||||
width: 100%; |
||||
height: 64px; |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
.pagination { |
||||
padding: 0 24px; |
||||
.pagination { |
||||
padding: 0 24px; |
||||
|
||||
:deep() { |
||||
.el-pagination__total { |
||||
margin-right: auto; |
||||
} |
||||
:deep() { |
||||
.el-pagination__total { |
||||
margin-right: auto; |
||||
} |
||||
|
||||
li.number.is-active { |
||||
background-color: #42D9AC; |
||||
color: rgba(255, 255, 255, 0.9); |
||||
font-family: Microsoft YaHei UI, Microsoft YaHei UI; |
||||
} |
||||
li.number.is-active { |
||||
background-color: #42d9ac; |
||||
color: rgba(255, 255, 255, 0.9); |
||||
font-family: |
||||
Microsoft YaHei UI, |
||||
Microsoft YaHei UI; |
||||
} |
||||
|
||||
span.el-pagination__jump { |
||||
background-color: #F3F3F3; |
||||
padding: 2px 8px; |
||||
} |
||||
} |
||||
span.el-pagination__jump { |
||||
background-color: #f3f3f3; |
||||
padding: 2px 8px; |
||||
} |
||||
} |
||||
|
||||
} |
||||
} |
||||
</style> |
||||
</style> |
||||
|
||||
@ -1,217 +1,239 @@ |
||||
<template> |
||||
<div> |
||||
<el-button type="primary" icon="Plus" @click="add" class="btn">新增</el-button> |
||||
<el-button type="danger" icon="Delete" @click="del" class="btn" v-show="isSele">删除</el-button> |
||||
<div class="table-box"> |
||||
<el-table ref="multipleTableRef" border :data="tableData" |
||||
@select="(selection: any[]) => isSele = !!selection.length" height="276px"> |
||||
<el-table-column type="selection" width="55" /> |
||||
<el-table-column label="#" width="55"> |
||||
<template #default="{ $index }"> |
||||
{{ $index + 1 }} |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column> |
||||
<template #header> |
||||
<el-icon> |
||||
<Edit /> |
||||
</el-icon> |
||||
<span style="margin-left: 10px;">指导老师类型</span> |
||||
</template> |
||||
<template #default="{ row }"> |
||||
<el-cascader :modelValue="row.teacherType" |
||||
@update:modelValue="(arr: any[]) => row.teacherType = arr[0]" :options="options" /> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column> |
||||
<template #header> |
||||
<el-icon> |
||||
<Edit /> |
||||
</el-icon> |
||||
<span style="margin-left: 10px;">指导老师姓名</span> |
||||
</template> |
||||
<template #default="{ row }"> |
||||
<el-input @click="openDialog(row)" v-model="row.teacherName" placeholder="请选择" |
||||
:prefix-icon="ClusterOutlined" /> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column> |
||||
<template #header> |
||||
<el-icon> |
||||
<Edit /> |
||||
</el-icon> |
||||
<span style="margin-left: 10px;">学历</span> |
||||
</template> |
||||
<template #default="{ row }"> |
||||
<el-input v-model="row.teacherXl" placeholder="请输入学历" /> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column> |
||||
<template #header> |
||||
<el-icon> |
||||
<Edit /> |
||||
</el-icon> |
||||
<span style="margin-left: 10px;">职称</span> |
||||
</template> |
||||
<template #default="{ row }"> |
||||
<el-input v-model="row.teacherZc" placeholder="请输入职称" /> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column> |
||||
<template #header> |
||||
<el-icon> |
||||
<Edit /> |
||||
</el-icon> |
||||
<span style="margin-left: 10px;">专业</span> |
||||
</template> |
||||
<template #default="{ row }"> |
||||
<el-input v-model="row.teacherZy" placeholder="请输入专业" /> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column> |
||||
<template #header> |
||||
<el-icon> |
||||
<Edit /> |
||||
</el-icon> |
||||
<span style="margin-left: 10px;">研究方向</span> |
||||
</template> |
||||
<template #default="{ row }"> |
||||
<el-input v-model="row.teacherYjfx" placeholder="请输入研究方向" /> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column> |
||||
<template #header> |
||||
<el-icon> |
||||
<Edit /> |
||||
</el-icon> |
||||
<span style="margin-left: 10px;">手机号</span> |
||||
</template> |
||||
<template #default="{ row }"> |
||||
<el-input v-model="row.teacherPhone" placeholder="请输入手机号" /> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
</div> |
||||
<tea-dialog v-model="visible" @selected="handleSelected" /> |
||||
<div> |
||||
<el-button type="primary" icon="Plus" @click="add" class="btn"> |
||||
新增 |
||||
</el-button> |
||||
<el-button |
||||
type="danger" |
||||
icon="Delete" |
||||
@click="del" |
||||
class="btn" |
||||
v-show="isSele" |
||||
> |
||||
删除 |
||||
</el-button> |
||||
<div class="table-box"> |
||||
<el-table |
||||
ref="multipleTableRef" |
||||
border |
||||
:data="tableData" |
||||
@select="(selection: any[]) => (isSele = !!selection.length)" |
||||
height="276px" |
||||
> |
||||
<el-table-column type="selection" width="55" /> |
||||
<el-table-column label="#" width="55"> |
||||
<template #default="{ $index }"> |
||||
{{ $index + 1 }} |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column> |
||||
<template #header> |
||||
<el-icon> |
||||
<Edit /> |
||||
</el-icon> |
||||
<span style="margin-left: 10px">指导老师类型</span> |
||||
</template> |
||||
<template #default="{ row }"> |
||||
<el-cascader |
||||
:modelValue="row.teacherType" |
||||
@update:modelValue="(arr: any[]) => (row.teacherType = arr[0])" |
||||
:options="options" |
||||
/> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column> |
||||
<template #header> |
||||
<el-icon> |
||||
<Edit /> |
||||
</el-icon> |
||||
<span style="margin-left: 10px">指导老师姓名</span> |
||||
</template> |
||||
<template #default="{ row }"> |
||||
<el-input |
||||
@click="openDialog(row)" |
||||
v-model="row.teacherName" |
||||
placeholder="请选择" |
||||
:prefix-icon="ClusterOutlined" |
||||
/> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column> |
||||
<template #header> |
||||
<el-icon> |
||||
<Edit /> |
||||
</el-icon> |
||||
<span style="margin-left: 10px">学历</span> |
||||
</template> |
||||
<template #default="{ row }"> |
||||
<el-input v-model="row.teacherXl" placeholder="请输入学历" /> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column> |
||||
<template #header> |
||||
<el-icon> |
||||
<Edit /> |
||||
</el-icon> |
||||
<span style="margin-left: 10px">职称</span> |
||||
</template> |
||||
<template #default="{ row }"> |
||||
<el-input v-model="row.teacherZc" placeholder="请输入职称" /> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column> |
||||
<template #header> |
||||
<el-icon> |
||||
<Edit /> |
||||
</el-icon> |
||||
<span style="margin-left: 10px">专业</span> |
||||
</template> |
||||
<template #default="{ row }"> |
||||
<el-input v-model="row.teacherZy" placeholder="请输入专业" /> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column> |
||||
<template #header> |
||||
<el-icon> |
||||
<Edit /> |
||||
</el-icon> |
||||
<span style="margin-left: 10px">研究方向</span> |
||||
</template> |
||||
<template #default="{ row }"> |
||||
<el-input v-model="row.teacherYjfx" placeholder="请输入研究方向" /> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column> |
||||
<template #header> |
||||
<el-icon> |
||||
<Edit /> |
||||
</el-icon> |
||||
<span style="margin-left: 10px">手机号</span> |
||||
</template> |
||||
<template #default="{ row }"> |
||||
<el-input v-model="row.teacherPhone" placeholder="请输入手机号" /> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
</div> |
||||
<tea-dialog v-model="visible" @selected="handleSelected" /> |
||||
</div> |
||||
</template> |
||||
|
||||
<script lang="ts" setup> |
||||
import { reactive, ref } from 'vue'; |
||||
import teaDialog from './teaDialog.vue'; |
||||
import { ClusterOutlined } from '@ant-design/icons-vue'; |
||||
import { ElMessage } from 'element-plus'; |
||||
import { reactive, ref } from 'vue' |
||||
import teaDialog from './teaDialog.vue' |
||||
import { ClusterOutlined } from '@ant-design/icons-vue' |
||||
import { ElMessage } from 'element-plus' |
||||
const options = [ |
||||
{ |
||||
value: '1', |
||||
label: '指导老师', |
||||
}, |
||||
{ |
||||
value: '2', |
||||
label: '领队老师', |
||||
}, |
||||
{ |
||||
value: '1', |
||||
label: '指导老师', |
||||
}, |
||||
{ |
||||
value: '2', |
||||
label: '领队老师', |
||||
}, |
||||
] |
||||
|
||||
// 数据 |
||||
const tableData = reactive<any[]>([]) |
||||
|
||||
const add = () => { |
||||
const length = tableData.push({ |
||||
teacherName: '', |
||||
teacherPhone: '', |
||||
teacherType: '', |
||||
teacherXl: '', |
||||
teacherYjfx: '', |
||||
teacherZc: '', |
||||
teacherZy: '', |
||||
teacherid: '', |
||||
}); |
||||
openDialog(tableData[length - 1]); |
||||
const length = tableData.push({ |
||||
teacherName: '', |
||||
teacherPhone: '', |
||||
teacherType: '', |
||||
teacherXl: '', |
||||
teacherYjfx: '', |
||||
teacherZc: '', |
||||
teacherZy: '', |
||||
teacherid: '', |
||||
}) |
||||
openDialog(tableData[length - 1]) |
||||
} |
||||
|
||||
// 当下打开dialog的数据源，在打开dialog时赋值 |
||||
const target = ref<any>(); |
||||
const target = ref<any>() |
||||
const openDialog = (row: any) => { |
||||
visible.value = true; |
||||
target.value = row; |
||||
visible.value = true |
||||
target.value = row |
||||
} |
||||
|
||||
const visible = ref(false); |
||||
const visible = ref(false) |
||||
|
||||
// 像数据源中添加数据 |
||||
const handleSelected = (row: any = {}) => { |
||||
if (tableData.some(o => o.teacherid === row.user_id)) { |
||||
ElMessage({ |
||||
message: '用户不能多选!', |
||||
type: 'error' |
||||
}) |
||||
return |
||||
} |
||||
target.value.teacherName = row.realname; |
||||
target.value.teacherXl = row.exp_title; |
||||
target.value.teacherZc = row.exp_zc; |
||||
target.value.teacherZy = row.teamajor; |
||||
target.value.teacherYjfx = row.exp_yjfx; |
||||
target.value.teacherPhone = row.phone; |
||||
target.value.teacherid = row.user_id; |
||||
if (tableData.some((o) => o.teacherid === row.user_id)) { |
||||
ElMessage({ |
||||
message: '用户不能多选!', |
||||
type: 'error', |
||||
}) |
||||
return |
||||
} |
||||
target.value.teacherName = row.realname |
||||
target.value.teacherXl = row.exp_title |
||||
target.value.teacherZc = row.exp_zc |
||||
target.value.teacherZy = row.teamajor |
||||
target.value.teacherYjfx = row.exp_yjfx |
||||
target.value.teacherPhone = row.phone |
||||
target.value.teacherid = row.user_id |
||||
} |
||||
|
||||
// 提交 |
||||
|
||||
const submit = () => tableData; |
||||
const submit = () => tableData |
||||
defineExpose({ submit }) |
||||
|
||||
// 删除逻辑 |
||||
const multipleTableRef = ref<any>(null); |
||||
const isSele = ref(false); |
||||
const multipleTableRef = ref<any>(null) |
||||
const isSele = ref(false) |
||||
const del = () => { |
||||
const rows = multipleTableRef.value.getSelectionRows() |
||||
rows.forEach((row: any) => { |
||||
const index = tableData.indexOf(row); |
||||
if (index === -1) return; |
||||
tableData.splice(index, 1); |
||||
}) |
||||
const rows = multipleTableRef.value.getSelectionRows() |
||||
rows.forEach((row: any) => { |
||||
const index = tableData.indexOf(row) |
||||
if (index === -1) return |
||||
tableData.splice(index, 1) |
||||
}) |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.btn { |
||||
margin-bottom: 20px; |
||||
margin-bottom: 20px; |
||||
} |
||||
|
||||
.table-box { |
||||
.table { |
||||
width: 100%; |
||||
} |
||||
.table { |
||||
width: 100%; |
||||
} |
||||
|
||||
.pagin-box { |
||||
width: 100%; |
||||
height: 64px; |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
.pagination { |
||||
padding: 0 24px; |
||||
|
||||
:deep() { |
||||
.el-pagination__total { |
||||
margin-right: auto; |
||||
} |
||||
|
||||
.pagin-box { |
||||
width: 100%; |
||||
height: 64px; |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
.pagination { |
||||
padding: 0 24px; |
||||
|
||||
:deep() { |
||||
.el-pagination__total { |
||||
margin-right: auto; |
||||
} |
||||
|
||||
li.number.is-active { |
||||
background-color: #42D9AC; |
||||
color: rgba(255, 255, 255, 0.9); |
||||
font-family: Microsoft YaHei UI, Microsoft YaHei UI; |
||||
} |
||||
|
||||
span.el-pagination__jump { |
||||
background-color: #F3F3F3; |
||||
padding: 2px 8px; |
||||
} |
||||
} |
||||
li.number.is-active { |
||||
background-color: #42d9ac; |
||||
color: rgba(255, 255, 255, 0.9); |
||||
font-family: |
||||
Microsoft YaHei UI, |
||||
Microsoft YaHei UI; |
||||
} |
||||
|
||||
span.el-pagination__jump { |
||||
background-color: #f3f3f3; |
||||
padding: 2px 8px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
} |
||||
} |
||||
</style> |
||||
</style> |
||||
|
||||
@ -1,5 +1,5 @@ |
||||
declare module '*.vue' { |
||||
import { DefineComponent } from "vue" |
||||
const component: ReturnType<typeof DefineComponent> |
||||
export default component |
||||
} |
||||
import { DefineComponent } from 'vue' |
||||
const component: ReturnType<typeof DefineComponent> |
||||
export default component |
||||
} |
||||
|
||||
Loading…
Reference in new issue