From f0d7348423c8e1e5707d74116ede065e5d90c547 Mon Sep 17 00:00:00 2001
From: yaoyuhao <yaoyuhao@ydool.com>
Date: Mon, 27 May 2024 13:39:04 +0800
Subject: [PATCH 1/2] table

---
 src/view/dialog/dialog.vue | 220 +++++++++++++++++++++++++------------
 src/view/sy.vue            | 187 +++++++++++++++++++++++++++++--
 2 files changed, 329 insertions(+), 78 deletions(-)

diff --git a/src/view/dialog/dialog.vue b/src/view/dialog/dialog.vue
index 0d8a971..8dc774f 100644
--- a/src/view/dialog/dialog.vue
+++ b/src/view/dialog/dialog.vue
@@ -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;
   }
 }
diff --git a/src/view/sy.vue b/src/view/sy.vue
index 084c28f..a3938b2 100644
--- a/src/view/sy.vue
+++ b/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 = () => {

From 6c8c3a6441bc897249b6eec5ec66f45a9c4fbd49 Mon Sep 17 00:00:00 2001
From: yaoyuhao <yaoyuhao@ydool.com>
Date: Mon, 27 May 2024 13:47:44 +0800
Subject: [PATCH 2/2] 1

---
 src/view/sy.vue | 26 ++++++++++----------------
 1 file changed, 10 insertions(+), 16 deletions(-)

diff --git a/src/view/sy.vue b/src/view/sy.vue
index a3938b2..9eb3239 100644
--- a/src/view/sy.vue
+++ b/src/view/sy.vue
@@ -226,11 +226,11 @@
             :header-cell-style="tableHeaderColor"
             v-if="choose == '1'"
           >
-            <el-table-column prop="company" label="企业名称" width="180" />
+            <el-table-column prop="company" label="企业名称" width="200" />
             <el-table-column
               prop="address"
               label="项目事项牵头单位"
-              width="180"
+              width="200"
             />
             <el-table-column prop="finish" label="完成情况">
               <template #default="scope">
@@ -434,7 +434,7 @@
       @close="close"
       @handle="handlePagination"
     >
-         <template #yxstatus="{ currentCol, currentData }">
+      <template #yxstatus="{ currentCol, currentData }">
         <div>-------------</div>
       </template>
     </Dialog>
@@ -473,37 +473,30 @@ const columnss = reactive({
     {
       label: "姓名",
       property: "name",
-  
     },
     {
       label: "单位",
       property: "name",
-  
     },
     {
       label: "职业",
       property: "name",
-  
     },
     {
       label: "承办机构",
       property: "name",
-  
     },
     {
       label: "培训班名称",
       property: "name",
-    
     },
     {
       label: "培训开始时间",
       property: "name",
- 
     },
     {
       label: "培训结束时间",
       property: "name",
-
     },
   ],
   就业见习服务: [
@@ -550,7 +543,7 @@ const columnss = reactive({
     {
       label: "有效状态",
       property: "yxstatus",
-      type:'slot',
+      type: "slot",
     },
   ],
   就业援助: [
@@ -597,7 +590,7 @@ const columnss = reactive({
       label: "居住地",
       property: "name",
     },
-      {
+    {
       label: "帮扶时间",
       property: "name",
     },
@@ -605,8 +598,7 @@ const columnss = reactive({
 });
 const tableType = reactive({
   title: "",
-  columns: [
-  ],
+  columns: [],
   data: [
     {
       date: "2016-05-02",
@@ -681,7 +673,7 @@ const showDialog = (title) => {
   dialogShow.value = true;
   tableType.title = title;
   tableType.data = tabledata[title];
-  tableType.columns=columnss[title];
+  tableType.columns = columnss[title];
   pagination.currentPage = 1;
 };
 
@@ -2184,7 +2176,7 @@ onBeforeMount(async () => {
   --el-table-border-color: none;
   border: 1px solid #7aceff;
 }
-
+.table{
 :deep(.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf) {
   border: none !important;
   padding-left: 10px !important;
@@ -2193,6 +2185,8 @@ onBeforeMount(async () => {
 :deep(.el-table td.el-table__cell) {
   padding-left: 10px;
 }
+}
+
 
 ::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
   background-color: #2f4b74;