This commit is contained in:
姚宇浩 2024-05-27 13:39:04 +08:00
parent 6b28458f05
commit f0d7348423
2 changed files with 329 additions and 78 deletions

View File

@ -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;
}
}

View File

@ -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 = () => {