Merge branch 'main' of git.zdool.com:xs/ggfwjsc

src/view/dialog/dialog.vue

@@ -1,87 +1,156 @@
 <template>
-    <div class="dialogPage">
+  <div class="dialogPage">
-        <el-dialog v-model="dialogShow" width="80vw" :show-close="false" center :close-on-click-modal="false" :close-on-press-escape="false">
+    <el-dialog
-            <template #header="{ close, titleId, titleClass }">
+      v-model="dialogShow"
-                <div class="my-header">
+      width="80vw"
-                    <el-icon size="26" color="#fff" @click="closeDialog">
+      :show-close="false"
-                        <CircleCloseFilled />
+      center
-                    </el-icon>
+      :close-on-click-modal="false"
-                </div>
+      :close-on-press-escape="false"
-            </template>
+    >
-            <div class="tabelPart">
+      <template #header="{ close, titleId, titleClass }">
-                <el-table :data="data.tableData " height='calc(100% - 40px)' :header-cell-style="{ background: '#008FCD' }">
+        <div class="my-header">
-                    <el-table-column v-for="(item,index) in data.columns" :key="index" :property="item.property" :label="item.label" :width="item.width" align="center" />
+          <el-icon size="26" color="#fff" @click="closeDialog">
-                </el-table>
+            <CircleCloseFilled />
-                <div class="pagePart">
+          </el-icon>
-                    <el-pagination background layout="prev, pager, next" :total="1000" prev-text="上一页"
+        </div>
-                        next-text="下一页" />
+      </template>
-                </div>
+      <div class="tabelPart">
-            </div>
+        <el-table
-
+          :data="data.tableData"
-        </el-dialog>
+          height="calc(100% - 40px)"
-    </div>
+          :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 {
-import { CircleCloseFilled } from '@element-plus/icons-vue'
+  onMounted,
+  reactive,
+  ref,
+  onBeforeMount,
+  defineProps,
+  watch,
+} from "vue";
+import { CircleCloseFilled } from "@element-plus/icons-vue";
 
 const props = defineProps({
-    dialogShow: {
+  dialogShow: {
-        type: Boolean,
+    type: Boolean,
-        default: () => {
+    default: () => {
-            return false;
+      return false;
-        },
     },
-    columns: {
+  },
-        type: Array,
+  columns: {
-        default: () => {
+    type: Array,
-            return [];
+    default: () => {
-        },
+      return [];
     },
-    tableData: {
+  },
-        type: Array,
+  tableData: {
-        default: () => {
+    type: Array,
-            return [];
+    default: () => {
-        },
+      return [];
     },
-    title: {
+  },
-        type: String,
+  title: {
-        default: () => {
+    type: String,
-            return '';
+    default: () => {
-        },
+      return "";
     },
+  },
+  pagination: {
+    type: Object,
+    required: true,
+  },
 });
-const emit = defineEmits([
+const emit = defineEmits(["close", "handle"]);
-  "close",
-]);
 
 // 详情弹框
-const dialogShow = ref()
+const dialogShow = ref();
-const data = reactive ({
+const data = reactive({
-    title: '',
+  title: "",
-    columns: [],
+  columns: [],
-    tableData: [],
+  tableData: [],
-})
+  pagination: {},
+});
 
-const gridData = [
+const gridData = [];
-]
 
-watch(() => props.dialogShow, (newVal, oldVal) => {
+watch(
-    dialogShow.value = newVal
+  () => props.dialogShow,
-})
+  (newVal, oldVal) => {
+    dialogShow.value = newVal;
+    data.tableData = props.tableData;
+    data.columns = props.columns;
+  }
+);
 
 // 使用生命钩子
 onMounted(() => {
-    dialogShow.value = props.dialogShow
+  dialogShow.value = props.dialogShow;
-    data.columns = props.columns
+  data.columns = props.columns;
-    data.title = props.title
+  data.title = props.title;
-    data.tableData = props.tableData
+  data.tableData = props.tableData;
 });
 
 const closeDialog = () => {
-    dialogShow.value = false
+  dialogShow.value = false;
-    emit("close");
+  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;
   }
 }

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">
@@ -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,86 @@ import { columns } from "element-plus/es/components/table-v2/src/common.mjs";
 
 // 详情弹框
 const dialogShow = ref(false);
-const tableType = reactive({
+//表格列
-  title: "",
+const columnss = reactive({
-  columns: [
+  就业培训: [
+    {
+      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,23 +554,51 @@ const tableType = reactive({
     },
     {
       label: "人员类别",
-      property: "type",
+      property: "name",
       width: "150",
     },
     {
       label: "就失业状态",
-      property: "status",
+      property: "name",
       width: "150",
     },
     {
-      label: "日期",
+      label: "优先指数",
-      property: "date",
+      property: "name",
+      width: "150",
     },
     {
-      label: "地址",
+      label: "是否已帮扶",
-      property: "address",
+      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: [
     {
       date: "2016-05-02",
@@ -512,10 +622,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 = () => {
@@ -2017,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;
@@ -2026,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;

vite.config.js

@@ -15,7 +15,7 @@ export default defineConfig({
       // 第一个代理
       "/api": {
         // 匹配到啥来进行方向代理
-        target: "http://192.168.1.2:8095/", //本地
+        target: "http://192.168.2.42:8095/", //本地
         // target: "http://220.191.238.50:996/", //线上
         changeOrigin: true, //是否支持跨域
         //rewrite: (path) => path.replace(/^\/api/, '') // 如果不需要api 直接把路径上的api 替换成空，这个