table
This commit is contained in:
parent
6b28458f05
commit
f0d7348423
|
|
@ -1,87 +1,156 @@
|
|||
<template>
|
||||
<div class="dialogPage">
|
||||
<el-dialog v-model="dialogShow" width="80vw" :show-close="false" center :close-on-click-modal="false" :close-on-press-escape="false">
|
||||
<template #header="{ close, titleId, titleClass }">
|
||||
<div class="my-header">
|
||||
<el-icon size="26" color="#fff" @click="closeDialog">
|
||||
<CircleCloseFilled />
|
||||
</el-icon>
|
||||
</div>
|
||||
</template>
|
||||
<div class="tabelPart">
|
||||
<el-table :data="data.tableData " height='calc(100% - 40px)' :header-cell-style="{ background: '#008FCD' }">
|
||||
<el-table-column v-for="(item,index) in data.columns" :key="index" :property="item.property" :label="item.label" :width="item.width" align="center" />
|
||||
</el-table>
|
||||
<div class="pagePart">
|
||||
<el-pagination background layout="prev, pager, next" :total="1000" prev-text="上一页"
|
||||
next-text="下一页" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</el-dialog>
|
||||
</div>
|
||||
<div class="dialogPage">
|
||||
<el-dialog
|
||||
v-model="dialogShow"
|
||||
width="80vw"
|
||||
:show-close="false"
|
||||
center
|
||||
:close-on-click-modal="false"
|
||||
:close-on-press-escape="false"
|
||||
>
|
||||
<template #header="{ close, titleId, titleClass }">
|
||||
<div class="my-header">
|
||||
<el-icon size="26" color="#fff" @click="closeDialog">
|
||||
<CircleCloseFilled />
|
||||
</el-icon>
|
||||
</div>
|
||||
</template>
|
||||
<div class="tabelPart">
|
||||
<el-table
|
||||
:data="data.tableData"
|
||||
height="calc(100% - 40px)"
|
||||
:header-cell-style="{ background: '#008FCD' }"
|
||||
>
|
||||
<!-- <el-table-column
|
||||
v-for="(item, index) in data.columns"
|
||||
:key="index"
|
||||
:property="item.property"
|
||||
:label="item.label"
|
||||
:width="item.width"
|
||||
align="center"
|
||||
/> -->
|
||||
<template v-for="item in data.columns">
|
||||
<el-table-column
|
||||
:key="item.label"
|
||||
v-if="item.type === 'slot'"
|
||||
:width="item.width"
|
||||
:label="item.label"
|
||||
:property="item.property"
|
||||
align="center"
|
||||
>
|
||||
<template #default="scope">
|
||||
<slot
|
||||
:name="item.property"
|
||||
:currentCol="item"
|
||||
:currentData="scope.row"
|
||||
></slot>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
:key="item.label"
|
||||
:property="item.property"
|
||||
:label="item.label"
|
||||
:width="item.width"
|
||||
align="center"
|
||||
v-else
|
||||
/>
|
||||
</template>
|
||||
</el-table>
|
||||
<div class="pagePart">
|
||||
<el-pagination
|
||||
background
|
||||
layout="prev, pager, next"
|
||||
:page-size="pagination.pageSize"
|
||||
:total="pagination.total"
|
||||
prev-text="上一页"
|
||||
next-text="下一页"
|
||||
@current-change="handle"
|
||||
v-model:current-page="pagination.currentPage"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { onMounted, reactive, ref, onBeforeMount, defineProps, watch } from "vue";
|
||||
import { CircleCloseFilled } from '@element-plus/icons-vue'
|
||||
import {
|
||||
onMounted,
|
||||
reactive,
|
||||
ref,
|
||||
onBeforeMount,
|
||||
defineProps,
|
||||
watch,
|
||||
} from "vue";
|
||||
import { CircleCloseFilled } from "@element-plus/icons-vue";
|
||||
|
||||
const props = defineProps({
|
||||
dialogShow: {
|
||||
type: Boolean,
|
||||
default: () => {
|
||||
return false;
|
||||
},
|
||||
dialogShow: {
|
||||
type: Boolean,
|
||||
default: () => {
|
||||
return false;
|
||||
},
|
||||
columns: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
columns: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [];
|
||||
},
|
||||
tableData: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
tableData: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [];
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: () => {
|
||||
return '';
|
||||
},
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: () => {
|
||||
return "";
|
||||
},
|
||||
},
|
||||
pagination: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
const emit = defineEmits([
|
||||
"close",
|
||||
]);
|
||||
const emit = defineEmits(["close", "handle"]);
|
||||
|
||||
// 详情弹框
|
||||
const dialogShow = ref()
|
||||
const data = reactive ({
|
||||
title: '',
|
||||
columns: [],
|
||||
tableData: [],
|
||||
})
|
||||
const dialogShow = ref();
|
||||
const data = reactive({
|
||||
title: "",
|
||||
columns: [],
|
||||
tableData: [],
|
||||
pagination: {},
|
||||
});
|
||||
|
||||
const gridData = [
|
||||
]
|
||||
const gridData = [];
|
||||
|
||||
watch(() => props.dialogShow, (newVal, oldVal) => {
|
||||
dialogShow.value = newVal
|
||||
})
|
||||
watch(
|
||||
() => props.dialogShow,
|
||||
(newVal, oldVal) => {
|
||||
dialogShow.value = newVal;
|
||||
data.tableData = props.tableData;
|
||||
data.columns = props.columns;
|
||||
}
|
||||
);
|
||||
|
||||
// 使用生命钩子
|
||||
onMounted(() => {
|
||||
dialogShow.value = props.dialogShow
|
||||
data.columns = props.columns
|
||||
data.title = props.title
|
||||
data.tableData = props.tableData
|
||||
dialogShow.value = props.dialogShow;
|
||||
data.columns = props.columns;
|
||||
data.title = props.title;
|
||||
data.tableData = props.tableData;
|
||||
});
|
||||
|
||||
const closeDialog = () => {
|
||||
dialogShow.value = false
|
||||
emit("close");
|
||||
}
|
||||
dialogShow.value = false;
|
||||
emit("close");
|
||||
};
|
||||
//分页器
|
||||
const handle = (current) => {
|
||||
emit("handle", current);
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
:deep(.el-dialog) {
|
||||
|
|
@ -96,10 +165,25 @@ const closeDialog = () => {
|
|||
.tabelPart {
|
||||
height: 60vh;
|
||||
padding: 16px;
|
||||
background: linear-gradient(270deg, rgba(0, 77, 131, 0.69) 0%, rgba(0, 51, 83, 0.77) 50%, rgba(0, 77, 131, 0.74) 100%), radial-gradient(66% 40% at 50% 0%, rgba(1, 150, 243, 0.55) 0%, rgba(0, 116, 255, 0) 100%);
|
||||
background: linear-gradient(
|
||||
270deg,
|
||||
rgba(0, 77, 131, 0.69) 0%,
|
||||
rgba(0, 51, 83, 0.77) 50%,
|
||||
rgba(0, 77, 131, 0.74) 100%
|
||||
),
|
||||
radial-gradient(
|
||||
66% 40% at 50% 0%,
|
||||
rgba(1, 150, 243, 0.55) 0%,
|
||||
rgba(0, 116, 255, 0) 100%
|
||||
);
|
||||
box-shadow: inset 0px 0px 56px 0px rgba(100, 191, 255, 0.5);
|
||||
border: 2px solid;
|
||||
border-image: linear-gradient(180deg, rgba(21, 150, 255, 1), rgba(0, 157, 227, 0)) 2 2;
|
||||
border-image: linear-gradient(
|
||||
180deg,
|
||||
rgba(21, 150, 255, 1),
|
||||
rgba(0, 157, 227, 0)
|
||||
)
|
||||
2 2;
|
||||
|
||||
:deep(.el-table) {
|
||||
--el-table-bg-color: none;
|
||||
|
|
@ -117,14 +201,14 @@ const closeDialog = () => {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
:deep(.el-pagination){
|
||||
:deep(.el-pagination) {
|
||||
--el-pagination-button-disabled-bg-color: none;
|
||||
--el-pagination-bg-color: none;
|
||||
--el-pagination-button-bg-color: none;
|
||||
--el-pagination-button-color: #fff;
|
||||
color: #fff;
|
||||
}
|
||||
:deep(.el-pagination button:disabled){
|
||||
:deep(.el-pagination button:disabled) {
|
||||
background-color: rgba(0, 116, 255, 0) !important;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
187
src/view/sy.vue
187
src/view/sy.vue
|
|
@ -430,8 +430,13 @@
|
|||
:columns="tableType.columns"
|
||||
:title="tableType.title"
|
||||
:tableData="tableType.data"
|
||||
:pagination="pagination"
|
||||
@close="close"
|
||||
@handle="handlePagination"
|
||||
>
|
||||
<template #yxstatus="{ currentCol, currentData }">
|
||||
<div>-------------</div>
|
||||
</template>
|
||||
</Dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -462,9 +467,93 @@ import { columns } from "element-plus/es/components/table-v2/src/common.mjs";
|
|||
|
||||
// 详情弹框
|
||||
const dialogShow = ref(false);
|
||||
const tableType = reactive({
|
||||
title: "",
|
||||
columns: [
|
||||
//表格列
|
||||
const columnss = reactive({
|
||||
就业培训: [
|
||||
{
|
||||
label: "姓名",
|
||||
property: "name",
|
||||
|
||||
},
|
||||
{
|
||||
label: "单位",
|
||||
property: "name",
|
||||
|
||||
},
|
||||
{
|
||||
label: "职业",
|
||||
property: "name",
|
||||
|
||||
},
|
||||
{
|
||||
label: "承办机构",
|
||||
property: "name",
|
||||
|
||||
},
|
||||
{
|
||||
label: "培训班名称",
|
||||
property: "name",
|
||||
|
||||
},
|
||||
{
|
||||
label: "培训开始时间",
|
||||
property: "name",
|
||||
|
||||
},
|
||||
{
|
||||
label: "培训结束时间",
|
||||
property: "name",
|
||||
|
||||
},
|
||||
],
|
||||
就业见习服务: [
|
||||
{
|
||||
label: "见习岗位名称",
|
||||
property: "name",
|
||||
width: "150",
|
||||
},
|
||||
{
|
||||
label: "单位名称",
|
||||
property: "name",
|
||||
width: "150",
|
||||
},
|
||||
{
|
||||
label: "岗位类型",
|
||||
property: "name",
|
||||
width: "150",
|
||||
},
|
||||
{
|
||||
label: "接受人数",
|
||||
property: "name",
|
||||
width: "150",
|
||||
},
|
||||
{
|
||||
label: "见习地点",
|
||||
property: "name",
|
||||
width: "150",
|
||||
},
|
||||
{
|
||||
label: "见习月数",
|
||||
property: "name",
|
||||
width: "150",
|
||||
},
|
||||
{
|
||||
label: "学历要求",
|
||||
property: "name",
|
||||
width: "150",
|
||||
},
|
||||
{
|
||||
label: "专业",
|
||||
property: "name",
|
||||
width: "150",
|
||||
},
|
||||
{
|
||||
label: "有效状态",
|
||||
property: "yxstatus",
|
||||
type:'slot',
|
||||
},
|
||||
],
|
||||
就业援助: [
|
||||
{
|
||||
label: "姓名",
|
||||
property: "name",
|
||||
|
|
@ -472,22 +561,51 @@ const tableType = reactive({
|
|||
},
|
||||
{
|
||||
label: "人员类别",
|
||||
property: "type",
|
||||
property: "name",
|
||||
width: "150",
|
||||
},
|
||||
{
|
||||
label: "就失业状态",
|
||||
property: "status",
|
||||
property: "name",
|
||||
width: "150",
|
||||
},
|
||||
{
|
||||
label: "日期",
|
||||
property: "date",
|
||||
label: "优先指数",
|
||||
property: "name",
|
||||
width: "150",
|
||||
},
|
||||
{
|
||||
label: "地址",
|
||||
property: "address",
|
||||
label: "是否已帮扶",
|
||||
property: "name",
|
||||
width: "150",
|
||||
},
|
||||
{
|
||||
label: "失业登记时间",
|
||||
property: "name",
|
||||
width: "150",
|
||||
},
|
||||
{
|
||||
label: "失业登记管辖地",
|
||||
property: "name",
|
||||
width: "150",
|
||||
},
|
||||
{
|
||||
label: "户籍地",
|
||||
property: "name",
|
||||
},
|
||||
{
|
||||
label: "居住地",
|
||||
property: "name",
|
||||
},
|
||||
{
|
||||
label: "帮扶时间",
|
||||
property: "name",
|
||||
},
|
||||
],
|
||||
});
|
||||
const tableType = reactive({
|
||||
title: "",
|
||||
columns: [
|
||||
],
|
||||
data: [
|
||||
{
|
||||
|
|
@ -512,10 +630,59 @@ const tableType = reactive({
|
|||
},
|
||||
],
|
||||
});
|
||||
|
||||
const tabledata = reactive({
|
||||
就业培训: [
|
||||
{
|
||||
date: "2016-05-02",
|
||||
name: "John Smith",
|
||||
address: "No.1518, Jinshajiang Road, Putuo District",
|
||||
},
|
||||
{
|
||||
date: "2016-05-04",
|
||||
name: "John Smith",
|
||||
address: "No.1518, Jinshajiang Road, Putuo District",
|
||||
},
|
||||
],
|
||||
就业见习服务: [
|
||||
{
|
||||
date: "2016-05-02",
|
||||
name: "张三",
|
||||
address: "No.1518, Jinshajiang Road, Putuo District",
|
||||
},
|
||||
{
|
||||
date: "2016-05-04",
|
||||
name: "李四",
|
||||
address: "No.1518, Jinshajiang Road, Putuo District",
|
||||
},
|
||||
],
|
||||
就业援助: [
|
||||
{
|
||||
date: "2016-05-02",
|
||||
name: "1",
|
||||
address: "No.1518, Jinshajiang Road, Putuo District",
|
||||
},
|
||||
{
|
||||
date: "2016-05-04",
|
||||
name: "2",
|
||||
address: "No.1518, Jinshajiang Road, Putuo District",
|
||||
},
|
||||
],
|
||||
});
|
||||
// 表格分页
|
||||
const pagination = reactive({
|
||||
total: 100,
|
||||
pageSize: 20,
|
||||
currentPage: 1,
|
||||
});
|
||||
const handlePagination = (current) => {
|
||||
console.log(current);
|
||||
};
|
||||
const showDialog = (title) => {
|
||||
dialogShow.value = true;
|
||||
tableType.title = title;
|
||||
tableType.data = tabledata[title];
|
||||
tableType.columns=columnss[title];
|
||||
pagination.currentPage = 1;
|
||||
};
|
||||
|
||||
const close = () => {
|
||||
|
|
|
|||
Loading…
Reference in New Issue