You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
119 lines
3.6 KiB
119 lines
3.6 KiB
8 months ago
|
<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) => selectedRow = row"
|
||
|
|
append-to-body
|
||
|
|
class="table" v-loading="loading">
|
||
|
|
<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>
|
||
|
|
|
||
|
|
<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', selectedRow); }">确认</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';
|
||
|
|
|
||
|
|
const props = defineProps(['modelValue', 'type']);
|
||
|
|
const $emit = defineEmits(['update:modelValue', 'selected']);
|
||
|
|
const route = useRoute();
|
||
|
|
|
||
|
|
watch(() => props.modelValue, () => getList());
|
||
|
|
|
||
|
|
// 数据
|
||
|
|
const tableData = reactive<any[]>([]);
|
||
|
|
const selectedRow = ref();
|
||
|
|
|
||
|
|
// 分页
|
||
|
|
const total = ref(0);
|
||
|
|
|
||
|
|
const params = reactive<any>({
|
||
|
|
pageNo: 1,
|
||
|
|
pageSize: 10,
|
||
|
|
onlRepUrlParamStr: `annualCompid=${route.query.objName}`,
|
||
|
|
entryFormat: '团队',
|
||
|
|
id: route.query.id,
|
||
|
|
})
|
||
|
|
|
||
|
|
|
||
|
|
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;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.form-box {
|
||
|
|
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;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
</style>
|