新增页面

src/views/Training/securityNjsp/components/addSp.vue

@@ -0,0 +1,100 @@
+<template>
+    <div>
+        <el-dialog v-model="visible" title="批量送培" width="80%" @close="close">
+            <MyTable 
+                :tableData="pageData.tableData" 
+                :tableColumn="pageData.tableColumn" 
+                :tableHeight="pageData.tableHeight"
+                :key="pageData.keyCount" 
+                :tableConfiger="pageData.tableConfiger" 
+                @chooseData="chooseData"
+            >
+            </MyTable>
+            <div class="flex just-center mt10">
+                <el-button type="primary" @click="close">取消</el-button>
+                <el-button type="primary" @click="onBatchAudit">确定</el-button>
+            </div>
+        </el-dialog>
+    </div>
+</template>
+
+<script setup>
+import { ElMessage } from "element-plus";
+import { getItem } from '@/utils/storage.js'
+import { qcckPost } from "@/api/qcckApi.js";
+import MyTable from "@/components/aboutTable/MyTable.vue";
+import { ref , reactive , defineExpose , getCurrentInstance, defineEmits} from 'vue'
+const userInfo = getItem('userInfo');
+const emit = defineEmits(['refresh'])
+const { proxy } = getCurrentInstance();
+const visible = ref(false);
+const pageData = reactive({
+  tableData: [],
+  keyCount: 0,
+  tableConfiger: {
+    rowHieght: 61,
+    showSelectType: "checkBox",
+    loading: false,
+    haveControls: false
+  },
+  tableHeight: 550,
+  tableColumn: [
+    { label: "保安公司名称", prop: "ssbakk",showOverflowTooltip: true },
+    { label: "年审年份", prop: "njnf"},
+    { label: "姓名", prop: "xm" },
+    { label: "身份证号码", prop: "sfzhm",showOverflowTooltip: true },
+    { label: "电话", prop: "dh" },
+    { label: "文化程度", prop: "whcd" },
+    { label: "证书编号", prop: "zsbh", showOverflowTooltip: true },
+    { label: "服务行业", prop: "fwxymc" },
+    { label: "入职时间", prop: "rzsj" },
+    { label: "上岗证号码", prop: "sgxkhm", showOverflowTooltip: true },
+  ]
+});
+const ids = ref([])
+const chooseData = (rows) => {
+  ids.value = Array.isArray(rows) ? rows.map(item => item.id) : [];
+};
+
+const init = () => {
+    pageData.tableConfiger.loading = true;
+    pageData.keyCount++;
+    visible.value = true;
+    let promes = {
+        pageNum:1,
+        pageSize:9999,
+        ssbakk:userInfo.pxgs,
+        ssbakkId:userInfo.pxgsid,
+        sptz:0
+    }
+    qcckPost(promes,'/mosty-base/bans/njxx/listForSendTraining').then((res) => {
+        pageData.tableData = res.records || []
+        pageData.tableConfiger.loading = false;
+    }).catch((err) => {
+        pageData.tableConfiger.loading = false;
+    })
+}
+const onBatchAudit = () => {
+    if (ids.value.length === 0) return ElMessage.warning("请选择要送培的人员");
+    proxy.$modal.confirm("是否确认送培？").then(() => {
+    let params = { ssbakk:userInfo.pxgs, ssbakkId:userInfo.pxgsid, ids:ids.value }
+    qcckPost(params,'/mosty-base/bans/njxx/sendTraining').then(res=>{
+      ElMessage.success("送培成功");
+      emit('refresh');
+      close();
+    })
+  });
+}
+const close = () => {
+    visible.value = false;
+    ids.value = [];
+    pageData.tableData = []
+}
+defineExpose({
+  init
+})
+</script>
+
+<style scoped lang="scss">
+
+</style>

src/views/Training/trainingCompanyNjgl/components/detailForm.vue

@@ -0,0 +1,210 @@
+<template>
+  <div class="dialog" v-if="dialogForm">
+    <div class="head_box">
+      <span>详情</span>
+      <div><el-button size="small" @click="close">关闭</el-button></div>
+    </div>
+    <div class="cntinfo">
+      <!-- 标签 -->
+      <ul class="tag-box">
+        <li class="tag_item" :class="detail.shzt == 0 ? 'dsh_item' : detail.shzt == 1 ? 'tgg_item' : 'jtb_item'">
+          <!-- 0-待审核 1-通过 2-驳回 -->
+          {{ detail.shzt == 0 ? '待审核' : detail.shzt == 1 ? '通过' : '驳回' }}
+        </li>
+      </ul>
+      <!-- 内容描述 -->
+       <el-descriptions class="desc" :column="3" border label-width="200px">
+        <el-descriptions-item label="保安公司名称">{{ detail.ssbakk }}</el-descriptions-item>
+        <el-descriptions-item label="年审年份">{{ detail.njnf }}</el-descriptions-item>
+        <el-descriptions-item label="姓名">{{ detail.xm }}</el-descriptions-item>
+
+        <el-descriptions-item label="身份证号码">{{ detail.sfzhm }}</el-descriptions-item>
+        <el-descriptions-item label="年龄">{{ detail.nl }}</el-descriptions-item>
+        <el-descriptions-item label="电话">{{ detail.dh }}</el-descriptions-item>
+        <el-descriptions-item label="性别">
+          <DictTag :value="detail.xb" :tag="false" :options="props.dic.D_BZ_XB" />
+        </el-descriptions-item>
+        <el-descriptions-item label="民族">
+          <DictTag :value="detail.mz" :tag="false" :options="props.dic.D_BZ_MZ" />
+        </el-descriptions-item>
+        <el-descriptions-item label="籍贯">{{ detail.jg }}</el-descriptions-item>
+        <el-descriptions-item label="文化程度">
+          <DictTag :value="detail.whcd" :tag="false" :options="props.dic.D_BZ_WHCD" />
+        </el-descriptions-item>
+
+        <el-descriptions-item label="证书编号">{{ detail.zsbh }}</el-descriptions-item>
+        <el-descriptions-item label="上岗证号码">{{ detail.sgxkhm }}</el-descriptions-item>
+        <el-descriptions-item label="服务行业">
+          <DictTag :value="detail.fwxy" :tag="false" :options="props.dic.D_BAXX_SSHY" />
+        </el-descriptions-item>
+
+        <el-descriptions-item label="服务行业名称">{{ detail.fwxymc }}</el-descriptions-item>
+        <el-descriptions-item label="入职时间">{{ detail.rzsj }}</el-descriptions-item>
+        <el-descriptions-item label="政治面貌">
+          <DictTag :value="detail.zzmm" :tag="false" :options="props.dic.D_BZ_ZZMM" />
+        </el-descriptions-item>
+
+        <el-descriptions-item label="无犯罪记录证明">
+          <div class="img-grid one">
+            <el-image
+              :src="baseUrl + detail.wfbjlzm"
+              fit="cover"
+              :preview-src-list='[baseUrl + detail.wfbjlzm]'
+              preview-teleported
+              class="img"
+            />
+          </div>
+        </el-descriptions-item>
+        <el-descriptions-item label="体检报告">
+          <div class="img-grid one">
+            <el-image
+              :src="baseUrl + detail.tjbg"
+              fit="cover"
+              :preview-src-list='[baseUrl + detail.tjbg]'
+              preview-teleported
+              class="img"
+            />
+          </div>
+        </el-descriptions-item>
+        <el-descriptions-item label="身份证正反面">
+          <div class="img-grid two">
+             <el-image
+              :src="baseUrl + detail.sfzzm"
+              fit="cover"
+              :preview-src-list='[baseUrl + detail.sfzzm]'
+              preview-teleported
+              class="img"
+            />
+            <el-image
+              :src="baseUrl + detail.sfzfm"
+              fit="cover"
+              :preview-src-list='[baseUrl + detail.sfzfm]'
+              preview-teleported
+              class="img"
+            />
+          </div>
+        </el-descriptions-item>
+
+        <el-descriptions-item label="审核时间">{{ detail.auditTime }}</el-descriptions-item>
+        <el-descriptions-item label="发证机关">{{ detail.issuingAuthority }}</el-descriptions-item>
+        <el-descriptions-item label="发证日期">{{ detail.issueDate }}</el-descriptions-item>
+
+        <el-descriptions-item label="驳回原因" :span="3">{{ detail.rejectReason }}</el-descriptions-item>
+      </el-descriptions>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, defineEmits, getCurrentInstance,defineProps } from 'vue';
+import { qcckPost } from "@/api/qcckApi.js";
+const emit = defineEmits(["refresh"]);
+const { proxy } = getCurrentInstance();
+const baseUrl = '/bagl/mosty-base/minio/image/download'
+const props = defineProps({
+  dic: {
+    default: [[]], //二维数组
+    type: Array
+  }
+})
+
+const dialogForm = ref(false);
+const detail = ref({})
+
+// 初始化数据
+const init = (type, row,) => {
+  dialogForm.value = true;
+  qcckPost({},'/mosty-base/bans/njxx/getInfo/'+row.id).then(res => {
+    let zj = res.sfzzfmj.split(',');
+    res.sfzzm = [zj[0]];
+    res.sfzfm = [zj[1]];
+    detail.value = res || {};
+  })
+};
+
+const close = () => {
+  dialogForm.value = false;
+  detail.value = {};
+};
+
+defineExpose({ init })
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/css/layout.scss";
+.mapBox {
+  width: calc(100% - 24rem);
+  height: 500px;
+  overflow: hidden;
+  margin: 0 12rem;
+}
+.cntinfo{
+  position: relative;
+  padding: 10px 20px;
+  box-sizing: border-box;
+  .tag-box{
+    position: absolute;
+    top: 20px;
+    right: 50px;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    z-index: 99999;
+    .tag_item{
+      width: 70px;
+      height: 70px;
+      border-radius: 50%;
+      line-height: 65px;
+      text-align: center;
+      font-size: 16px;
+      margin-bottom: 20px;
+    }
+    .jtb_item{
+      border: 5px solid #FA3758;
+      color: #FA3758;
+      background: rgba(250,55,88,0.2);
+    }
+    .tgg_item{
+      color: #28EEBF;
+      background: rgba(40,238,191,0.2);
+      border: 5px solid #28EEBF;
+    }
+    .dsh_item{
+      background: rgba(0,114,255,0.2);
+       color: #0072FF;
+      border: 5px solid #0072FF;
+    }
+  } 
+}
+
+.desc {
+  width: 100%;
+}
+
+.img-grid {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-height: 70px;
+}
+
+.img-grid.one .img,
+.img-grid.one .img-placeholder {
+  width: 64px;
+  height: 64px;
+}
+
+.img-grid.two .img,
+.img-grid.two .img-placeholder {
+  width: 64px;
+  height: 64px;
+}
+
+.img-placeholder {
+  background: #d9d9d9;
+  border-radius: 2px;
+}
+::v-deep .el-descriptions__label.el-descriptions__cell.is-bordered-label{
+  background: #F6FAFF;
+}
+</style>

src/views/Training/trainingCompanyNjgl/components/steps.vue

@@ -0,0 +1,105 @@
+<template>
+  <div>
+    <el-dialog class="steps-dialog" title="审核流程" v-model="dialogForm" width="420px">
+      <div class="steps-body">
+        <el-steps direction="vertical" :active="active" :space="90">
+          <el-step v-for="(item, idx) in steps" :key="item.title" :title="item.title" :description="idx === 0 ? item.time : ''" />
+        </el-steps>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { ref, defineExpose } from 'vue';
+const dialogForm = ref(false);
+const pxgsData = ref()
+const active = ref(1)
+const steps = ref([
+  { title: '保安公司审核', time: '2026-01-07　21:00' },
+  { title: '培训公司审核', time: '2026-01-07　21:00' },
+  { title: '公安局审核', time: '2026-01-07　21:00' },
+])
+const init = (row) => {
+  pxgsData.value = row
+  dialogForm.value = true;
+}
+
+defineExpose({
+  init
+})
+</script>
+
+<style scoped lang="scss">
+.steps-body {
+  height: 260px;
+  padding: 6px 10px 10px;
+  box-sizing: border-box;
+}
+
+:deep(.steps-dialog .el-dialog__header) {
+  text-align: center;
+  padding: 20px 20px 10px;
+}
+
+:deep(.steps-dialog .el-dialog__title) {
+  font-size: 24px;
+  font-weight: 700;
+  color: #333;
+}
+
+:deep(.steps-dialog .el-dialog__body) {
+  padding: 0 20px 20px;
+}
+
+:deep(.steps-dialog .el-step__title) {
+  font-size: 18px;
+  font-weight: 600;
+  color: #333;
+  line-height: 22px;
+}
+
+:deep(.steps-dialog .el-step__description) {
+  font-size: 16px;
+  color: #9AA8B6;
+  line-height: 20px;
+  margin-top: 8px;
+}
+
+:deep(.steps-dialog .el-step__line) {
+  left: 8px;
+  background-color: transparent;
+  border-left: 1px dashed #dadada;
+}
+
+:deep(.steps-dialog .el-step.is-vertical .el-step__head) {
+  width: 24px;
+}
+
+:deep(.steps-dialog .el-step__icon) {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+}
+
+:deep(.steps-dialog .el-step__head.is-process .el-step__icon),
+:deep(.steps-dialog .el-step__head.is-process .el-step__icon.is-text) {
+  background: #2e6bff;
+  border: none;
+  box-shadow: 0 0 0 5px rgba(46, 107, 255, 0.15);
+}
+
+:deep(.steps-dialog .el-step.is-wait .el-step__icon),
+:deep(.steps-dialog .el-step.is-finish .el-step__icon) {
+  background: #fff;
+  border: 1px solid #dadada;
+  box-shadow: none;
+}
+
+:deep(.steps-dialog .el-step__icon-inner) {
+  display: none;
+}
+::v-deep .is-finish .el-step__icon{
+  background: #86b6f1;
+}
+</style>

src/views/Training/trainingCompanyNjgl/index.vue

@@ -0,0 +1,182 @@
+<template>
+  <div>
+    <div class="titleBox">
+      <PageTitle title="公司保安员年检管理">
+        <el-button type="primary" @click="onBatchAudit(selectedRows)">批量审核</el-button>
+      </PageTitle>
+    </div>
+    <!-- 搜索 -->
+    <div ref="searchBox">
+      <Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount" />
+    </div>
+    <!-- 表格 -->
+    <div class="tabBox">
+      <MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="pageData.tableHeight"
+        :key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" :controlsWidth="pageData.controlsWidth"
+        @chooseData="chooseData">
+        <!-- 操作 -->
+        <template #controls="{ row }">
+          <el-link type="primary" link @click="onBatchAudit([row.id])" v-if="row.pxgsShzt == 0">立即审核</el-link>
+          <el-link type="primary" link @click="addEdit('RefSteap', row)">审核流程</el-link>
+          <el-link type="primary" link @click="addEdit('detail', row)">详情</el-link>
+        </template>
+      </MyTable>
+      <Pages @changeNo="changeNo" @changeSize="changeSize" :tableHeight="pageData.tableHeight" :pageConfiger="{
+        ...pageData.pageConfiger,
+        total: pageData.total
+      }"></Pages>
+    </div>
+    <!-- 详情 -->
+    <DetailForm ref="detailDiloag" :dict="{D_BZ_ZZMM,D_BZ_XB,D_BZ_MZ,D_BA_SHZT,D_BAXX_SSHY,D_BA_SPZT,D_BZ_WHCD}"/>
+    <!-- 审核流程 -->
+    <Steps ref="RefSteap" ></Steps>
+  </div>
+</template>
+
+<script setup>
+import PageTitle from "@/components/aboutTable/PageTitle.vue";
+import MyTable from "@/components/aboutTable/MyTable.vue";
+import Pages from "@/components/aboutTable/Pages.vue";
+import Search from "@/components/aboutTable/Search.vue";
+import DetailForm from "./components/detailForm.vue";
+import Steps from "./components/steps.vue";
+import {getItem} from '@/utils/storage.js'
+import { qcckPost } from "@/api/qcckApi.js";
+import { reactive, ref, onMounted, getCurrentInstance, nextTick } from "vue";
+import { ElMessage } from "element-plus";
+const { proxy } = getCurrentInstance();
+const { D_BZ_ZZMM,D_BZ_XB,D_BZ_MZ,D_BA_SHZT,D_BAXX_SSHY,D_BA_SPZT,D_BZ_WHCD } = proxy.$dict('D_BZ_ZZMM','D_BZ_XB','D_BZ_MZ','D_BA_SHZT','D_BAXX_SSHY','D_BA_SPZT','D_BZ_WHCD');
+const userInfo = getItem('userInfo');
+const detailDiloag = ref();
+const RefSteap = ref();
+const shForm = ref();
+const searchBox = ref(); //搜索框
+const selectedRows = ref([]);
+const searchConfiger = ref([
+  {
+    label: "保安公司名称",
+    prop: "ssbakk",
+    showType: "input"
+  },
+  {
+    label: "姓名",
+    prop: "xm",
+    showType: "input"
+  },
+  {
+    label: "身份证号码",
+    prop: "sfzhm",
+    showType: "input"
+  },
+  {
+    label: "电话",
+    prop: "dh",
+    showType: "input"
+  },
+]);
+const queryFrom = ref({});
+const pageData = reactive({
+  tableData: [],
+  keyCount: 0,
+  tableConfiger: {
+    rowHieght: 61,
+    showSelectType: "checkBox",
+    loading: false
+  },
+  total: 0,
+  pageConfiger: {
+    pageSize: 20,
+    pageNum: 1
+  },
+  controlsWidth: 180,
+  tableColumn: [
+    { label: "保安公司名称", prop: "ssbakk",showOverflowTooltip: true },
+    { label: "年审年份", prop: "njnf"},
+    { label: "姓名", prop: "xm" },
+    { label: "身份证号码", prop: "sfzhm",showOverflowTooltip: true },
+    { label: "电话", prop: "dh" },
+    { label: "文化程度", prop: "whcd" },
+    { label: "证书编号", prop: "zsbh", showOverflowTooltip: true },
+    { label: "服务行业", prop: "fwxymc" },
+    { label: "入职时间", prop: "rzsj" },
+    { label: "上岗证号码", prop: "sgxkhm", showOverflowTooltip: true },
+  ]
+});
+onMounted(() => {
+  // getList();
+  tabHeightFn();
+});
+// 搜索
+const onSearch = (val) => {
+  queryFrom.value = { ...val };
+  pageData.pageConfiger.pageNum = 1;
+  getList();
+};
+const changeNo = (val) => {
+  pageData.pageConfiger.pageNum = val;
+  getList();
+};
+const changeSize = (val) => {
+  pageData.pageConfiger.pageSize = val;
+  getList();
+};
+// 获取列表
+const getList = () => {
+  pageData.tableConfiger.loading = true;
+  const promes = {
+    ...pageData.pageConfiger,
+    ...queryFrom.value,
+    ssbakk:userInfo.pxgs,
+    ssbakkId:userInfo.pxgsid,
+    bakkShzt:'1',
+  }
+  qcckPost(promes,'/mosty-base/bans/njxx/page').then((res) => {
+    pageData.tableData = res.records || []
+    pageData.total = res.total;
+     pageData.tableConfiger.loading = false;
+  }).catch((err) => {
+     pageData.tableConfiger.loading = false;
+  })
+};
+
+const chooseData = (rows) => {
+  selectedRows.value = Array.isArray(rows) ? rows : [];
+};
+
+const onBatchAudit = (valIds) => {
+  let ids = [];
+  valIds.forEach(id =>{
+    let obj = pageData.tableData.find(it=>it.id == id);
+    if(obj && obj.bakkShzt == 0) ids.push(id);
+  });
+  if (!ids.length) return ElMessage.warning("请选择未审核的数据！该数据再审核状态下不能操作！");
+  shForm.value.init(ids);
+};
+
+
+// 详情
+const addEdit = (type, row) => {
+  nextTick(() => {
+    if(type == 'RefSteap'){
+      RefSteap.value.init(row);
+    }else{
+      detailDiloag.value.init(type, row);
+    }
+  })
+};
+
+
+// 表格高度计算
+const tabHeightFn = () => {
+  pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 250;
+  window.onresize = function () {
+    tabHeightFn();
+  };
+};
+</script>
+
+<style>
+.el-loading-mask {
+  background: rgba(0, 0, 0, 0.5) !important;
+}
+</style>

src/views/Training/trainingCompanyNjsp/components/addForm.vue

@@ -0,0 +1,93 @@
+<template>
+    <el-dialog title="年检签到" v-model="visible" width="80%" :destroy-on-close="true" @close="close">
+        <div class="cntinfo">
+            <FormMessage ref="FormRef" v-model="formData" :rules="rules" :formList="formList" :labelWidth='120'>
+            </FormMessage>
+            <el-divider border-style="dashed"><span class="pointer f16">培训人员<el-icon size="22" color="#409eff" class="ml5" style="top: 4px;"><CirclePlus /></el-icon></span></el-divider>
+            <MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="pageData.tableHeight"
+                :key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" :controlsWidth="pageData.controlsWidth"
+                @chooseData="chooseData">
+                <template #sptz="{ row }">
+                <DictTag :value="row.sptz" :tag="false" :options="D_BA_SPZT" />
+                </template>
+                <!-- 操作 -->
+                <template #controls="{ row }">
+                <el-link type="primary" link @click="addEdit('RefSteap', row)">审核流程</el-link>
+                <el-link type="primary" link @click="addEdit('detail', row)">详情</el-link>
+                </template>
+            </MyTable>
+            <div class="mt10 flex just-center">
+                <el-button @click="save" type="primary" :loading="loading">保存</el-button>
+                <el-button @click="close">关闭</el-button>
+            </div>
+         </div>
+    </el-dialog>
+</template>
+<script setup>
+    import * as rule from "@/utils/rules.js";
+    import MyTable from "@/components/aboutTable/MyTable.vue";
+    import FormMessage from '@/components/aboutTable/FormMessage.vue'
+    import { ref,reactive } from 'vue'
+    const formData = ref({})
+    const visible = ref(false)
+    const loading = ref(false)
+    const formList = reactive([
+        [
+            { label: "培训项目名称", prop: "xm", type: "input" },
+            { label: "培训地址", prop: "sfzh", type: "input"},
+        ],
+        [
+            { label: "培训开始时间", prop: "lxdh", type: "date",lx:'datetime' },
+            { label: "培训结束时间", prop: "jzdz", type: "date" ,lx:'datetime' },
+        ],
+        [
+            { label: "组织单位", prop: "rzsj", type: "input" },
+            { label: "培训内容", prop: "lzsj", type: "input" },
+        ]
+    ])
+    const rules = ref({
+        pxgs: [{ required: true, message: '请选择培训公司', trigger: ['blur'] }],
+        lzsj: [{ required: true, message: '请选择离职时间', trigger: ['blur'] }],
+    })
+    const pageData = reactive({
+        tableData: [],
+        keyCount: 0,
+        tableConfiger: {
+            rowHieght: 61,
+            showSelectType: "checkBox",
+            loading: false,
+            haveControls: false
+        },
+        tableHeight: 320,
+        tableColumn: [
+            { label: "培训项目名称", prop: "ssbakk",showOverflowTooltip: true },
+            { label: "培训地址", prop: "sptzCompanyName", showOverflowTooltip: true },
+            { label: "培训开始时间", prop: "njnf"},
+            { label: "培训结束时间", prop: "xm" },
+            { label: "组织单位", prop: "sfzhm",showOverflowTooltip: true },
+            { label: "培训内容", prop: "dh" },
+            { label: "培训人员", prop: "whcd" },
+            { label: "已签到人员", prop: "zsbh", showOverflowTooltip: true },
+            { label: "未签到人员", prop: "fwxymc" },
+            { label: "是否上报分县局", prop: "rzsj" },
+        ]
+}); 
+
+const init = () => {
+    visible.value = true
+    pageData.keyCount++
+}
+
+const close = () => {
+    visible.value = false
+}
+defineExpose({
+    init
+})
+</script>
+<style lang="scss" scoped>
+.cntinfo{
+    padding: 20px 10px;
+    box-sizing: border-box;
+}
+</style>

src/views/Training/trainingCompanyNjsp/components/detailForm.vue

@@ -0,0 +1,201 @@
+<template>
+  <div class="dialog" v-if="dialogForm">
+    <div class="head_box">
+      <span>详情</span>
+      <div><el-button size="small" @click="close">关闭</el-button></div>
+    </div>
+    <div class="cntinfo">
+      <!-- 内容描述 -->
+      <el-descriptions class="desc" :column="3" border label-width="200px">
+        <el-descriptions-item label="培训项目名称">{{ detail.ssbakk }}</el-descriptions-item>
+        <el-descriptions-item label="培训地址">{{ detail.njnf }}</el-descriptions-item>
+        <el-descriptions-item label="培训开始时间">{{ detail.xm }}</el-descriptions-item>
+
+        <el-descriptions-item label="培训结束时间">{{ detail.sfzhm }}</el-descriptions-item>
+        <el-descriptions-item label="组织单位">{{ detail.dh }}</el-descriptions-item>
+        <el-descriptions-item label="培训内容">{{ detail.xb }}</el-descriptions-item>
+
+        <el-descriptions-item label="保安公司名称">{{ detail.ssbakk }}</el-descriptions-item>
+        <el-descriptions-item label="年审年份">{{ detail.njnf }}</el-descriptions-item>
+        <el-descriptions-item label="姓名">{{ detail.xm }}</el-descriptions-item>
+
+        <el-descriptions-item label="身份证号码">{{ detail.sfzhm }}</el-descriptions-item>
+        <el-descriptions-item label="电话">{{ detail.dh }}</el-descriptions-item>
+        <el-descriptions-item label="性别">{{ detail.xb }}</el-descriptions-item>
+        <el-descriptions-item label="民族">{{ detail.mz }}</el-descriptions-item>
+        <el-descriptions-item label="年龄">{{ detail.nl }}</el-descriptions-item>
+        <el-descriptions-item label="籍贯">{{ detail.jg }}</el-descriptions-item>
+        <el-descriptions-item label="文化程度">{{ detail.whcd }}</el-descriptions-item>
+
+        <el-descriptions-item label="证书编号">{{ detail.zsbh }}</el-descriptions-item>
+        <el-descriptions-item label="上岗证号码">{{ detail.sgxkhm }}</el-descriptions-item>
+        <el-descriptions-item label="服务行业"> {{ detail.fwxy }}</el-descriptions-item>
+
+        <el-descriptions-item label="服务行业名称">{{ detail.fwxymc }}</el-descriptions-item>
+        <el-descriptions-item label="入职时间">{{ detail.rzsj }}</el-descriptions-item>
+        <el-descriptions-item label="政治面貌"> {{ detail.zzmm }}</el-descriptions-item>
+
+        <el-descriptions-item label="无犯罪记录证明">
+          <div class="img-grid one">
+            <el-image
+              :src="baseUrl + detail.wfbjlzm"
+              fit="cover"
+              :preview-src-list='[baseUrl + detail.wfbjlzm]'
+              preview-teleported
+              class="img"
+            />
+          </div>
+        </el-descriptions-item>
+        <el-descriptions-item label="体检报告">
+          <div class="img-grid one">
+            <el-image
+              :src="baseUrl + detail.tjbg"
+              fit="cover"
+              :preview-src-list='[baseUrl + detail.tjbg]'
+              preview-teleported
+              class="img"
+            />
+          </div>
+        </el-descriptions-item>
+        <el-descriptions-item label="身份证正反面">
+          <div class="img-grid two">
+            <el-image
+              :src="baseUrl + detail.sfzzm"
+              fit="cover"
+              :preview-src-list='[baseUrl + detail.sfzzm]'
+              preview-teleported
+              class="img"
+            />
+            <el-image
+              :src="baseUrl + detail.sfzfm"
+              fit="cover"
+              :preview-src-list='[baseUrl + detail.sfzfm]'
+              preview-teleported
+              class="img"
+            />
+          </div>
+        </el-descriptions-item>
+        <el-descriptions-item label="发证机关">{{ detail.fqjg }}</el-descriptions-item>
+        <el-descriptions-item label="发证日期">{{ detail.fqsj }}</el-descriptions-item>
+        <el-descriptions-item label="签到状态">{{ detail.qdzt }}</el-descriptions-item>
+        <el-descriptions-item label="签到时间" :span="2">{{ detail.qdsj }}</el-descriptions-item>
+        <el-descriptions-item label="签到表" :span="3"></el-descriptions-item>
+        <el-descriptions-item label="培训图片" :span="3"></el-descriptions-item>
+      </el-descriptions>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, defineEmits, getCurrentInstance,defineProps } from 'vue';
+import { qcckPost } from "@/api/qcckApi.js";
+const emit = defineEmits(["refresh"]);
+const { proxy } = getCurrentInstance();
+const baseUrl = '/bagl/mosty-base/minio/image/download'
+const props = defineProps({
+  dic: {
+    default: [[]], //二维数组
+    type: Array
+  }
+})
+
+const dialogForm = ref(false);
+const detail = ref({})
+
+// 初始化数据
+const init = (type, row,) => {
+  // dialogForm.value = true;
+  // qcckPost({},'/mosty-base/bans/njxx/getInfo/'+row.id).then(res => {
+  //   let zj = res.sfzzfmj.split(',');
+  //   res.sfzzm = [zj[0]];
+  //   res.sfzfm = [zj[1]];
+  //   detail.value = res || {};
+  // })
+};
+
+const close = () => {
+  dialogForm.value = false;
+  detail.value = {};
+};
+
+defineExpose({ init })
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/css/layout.scss";
+.mapBox {
+  width: calc(100% - 24rem);
+  height: 500px;
+  overflow: hidden;
+  margin: 0 12rem;
+}
+.cntinfo{
+  position: relative;
+  padding: 10px 20px;
+  box-sizing: border-box;
+  .tag-box{
+    position: absolute;
+    top: 20px;
+    right: 50px;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    z-index: 99999;
+    .tag_item{
+      width: 70px;
+      height: 70px;
+      border-radius: 50%;
+      line-height: 65px;
+      text-align: center;
+      font-size: 16px;
+      margin-bottom: 20px;
+    }
+    .jtb_item{
+      border: 5px solid #FA3758;
+      color: #FA3758;
+      background: rgba(250,55,88,0.2);
+    }
+    .tgg_item{
+      color: #28EEBF;
+      background: rgba(40,238,191,0.2);
+      border: 5px solid #28EEBF;
+    }
+    .dsh_item{
+      background: rgba(0,114,255,0.2);
+       color: #0072FF;
+      border: 5px solid #0072FF;
+    }
+  } 
+}
+
+.desc {
+  width: 100%;
+}
+
+.img-grid {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-height: 70px;
+}
+
+.img-grid.one .img,
+.img-grid.one .img-placeholder {
+  width: 64px;
+  height: 64px;
+}
+
+.img-grid.two .img,
+.img-grid.two .img-placeholder {
+  width: 64px;
+  height: 64px;
+}
+
+.img-placeholder {
+  background: #d9d9d9;
+  border-radius: 2px;
+}
+::v-deep .el-descriptions__label.el-descriptions__cell.is-bordered-label{
+  background: #F6FAFF;
+}
+</style>

src/views/Training/trainingCompanyNjsp/components/steps.vue

@@ -0,0 +1,105 @@
+<template>
+  <div>
+    <el-dialog class="steps-dialog" title="审核流程" v-model="dialogForm" width="420px">
+      <div class="steps-body">
+        <el-steps direction="vertical" :active="active" :space="90">
+          <el-step v-for="(item, idx) in steps" :key="item.title" :title="item.title" :description="idx === 0 ? item.time : ''" />
+        </el-steps>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { ref, defineExpose } from 'vue';
+const dialogForm = ref(false);
+const pxgsData = ref()
+const active = ref(1)
+const steps = ref([
+  { title: '保安公司审核', time: '2026-01-07　21:00' },
+  { title: '培训公司审核', time: '2026-01-07　21:00' },
+  { title: '公安局审核', time: '2026-01-07　21:00' },
+])
+const init = (row) => {
+  pxgsData.value = row
+  dialogForm.value = true;
+}
+
+defineExpose({
+  init
+})
+</script>
+
+<style scoped lang="scss">
+.steps-body {
+  height: 260px;
+  padding: 6px 10px 10px;
+  box-sizing: border-box;
+}
+
+:deep(.steps-dialog .el-dialog__header) {
+  text-align: center;
+  padding: 20px 20px 10px;
+}
+
+:deep(.steps-dialog .el-dialog__title) {
+  font-size: 24px;
+  font-weight: 700;
+  color: #333;
+}
+
+:deep(.steps-dialog .el-dialog__body) {
+  padding: 0 20px 20px;
+}
+
+:deep(.steps-dialog .el-step__title) {
+  font-size: 18px;
+  font-weight: 600;
+  color: #333;
+  line-height: 22px;
+}
+
+:deep(.steps-dialog .el-step__description) {
+  font-size: 16px;
+  color: #9AA8B6;
+  line-height: 20px;
+  margin-top: 8px;
+}
+
+:deep(.steps-dialog .el-step__line) {
+  left: 8px;
+  background-color: transparent;
+  border-left: 1px dashed #dadada;
+}
+
+:deep(.steps-dialog .el-step.is-vertical .el-step__head) {
+  width: 24px;
+}
+
+:deep(.steps-dialog .el-step__icon) {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+}
+
+:deep(.steps-dialog .el-step__head.is-process .el-step__icon),
+:deep(.steps-dialog .el-step__head.is-process .el-step__icon.is-text) {
+  background: #2e6bff;
+  border: none;
+  box-shadow: 0 0 0 5px rgba(46, 107, 255, 0.15);
+}
+
+:deep(.steps-dialog .el-step.is-wait .el-step__icon),
+:deep(.steps-dialog .el-step.is-finish .el-step__icon) {
+  background: #fff;
+  border: 1px solid #dadada;
+  box-shadow: none;
+}
+
+:deep(.steps-dialog .el-step__icon-inner) {
+  display: none;
+}
+::v-deep .is-finish .el-step__icon{
+  background: #86b6f1;
+}
+</style>

src/views/Training/trainingCompanyNjsp/index.vue

@@ -0,0 +1,171 @@
+<template>
+  <div>
+    <div class="titleBox">
+      <PageTitle title="年检签到">
+        <el-button type="primary" @click="onBatchAudit">新增</el-button>
+      </PageTitle>
+    </div>
+    <!-- 搜索 -->
+    <div ref="searchBox">
+      <Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount" />
+    </div>
+    <!-- 表格 -->
+    <div class="tabBox">
+      <MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="pageData.tableHeight"
+        :key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" :controlsWidth="pageData.controlsWidth"
+        @chooseData="chooseData">
+        <template #sptz="{ row }">
+           <DictTag :value="row.sptz" :tag="false" :options="D_BA_SPZT" />
+        </template>
+        <!-- 操作 -->
+        <template #controls="{ row }">
+          <el-link type="primary" link @click="addEdit('RefSteap', row)">审核流程</el-link>
+          <el-link type="primary" link @click="addEdit('detail', row)">详情</el-link>
+        </template>
+      </MyTable>
+      <Pages @changeNo="changeNo" @changeSize="changeSize" :tableHeight="pageData.tableHeight" :pageConfiger="{
+        ...pageData.pageConfiger,
+        total: pageData.total
+      }"></Pages>
+    </div>
+    <!-- 新增 -->
+    <AddForm ref="addFormRef"></AddForm>
+    <!-- 详情 -->
+    <DetailForm ref="detailDiloag" :dict="{D_BZ_SF}"/>
+    <!-- 审核流程 -->
+    <Steps ref="RefSteap" ></Steps>
+  </div>
+</template>
+
+<script setup>
+import PageTitle from "@/components/aboutTable/PageTitle.vue";
+import MyTable from "@/components/aboutTable/MyTable.vue";
+import Pages from "@/components/aboutTable/Pages.vue";
+import Search from "@/components/aboutTable/Search.vue";
+import AddForm from "./components/addForm.vue";
+import DetailForm from "./components/detailForm.vue";
+import Steps from "./components/steps.vue";
+import {getItem} from '@/utils/storage.js'
+import { qcckPost } from "@/api/qcckApi.js";
+import { reactive, ref, onMounted, getCurrentInstance, nextTick } from "vue";
+import { ElMessage } from "element-plus";
+const { proxy } = getCurrentInstance();
+const { D_BA_SHZT,D_BA_SPZT } = proxy.$dict("D_BA_SHZT",'D_BA_SPZT');
+const detailDiloag = ref();
+const RefSteap = ref();
+const addFormRef = ref();
+const shForm = ref();
+const searchBox = ref(); //搜索框
+const selectedRows = ref([]);
+const searchConfiger = ref([
+  {
+    label: "培训项目名称",
+    prop: "pxxm",
+    showType: "input"
+  },
+  {
+    label: "培训时间",
+    prop: "pxsj",
+    showType: "datetimerange"
+  },
+]);
+const queryFrom = ref({});
+const pageData = reactive({
+  tableData: [],
+  keyCount: 0,
+  tableConfiger: {
+    rowHieght: 61,
+    showSelectType: "checkBox",
+    loading: false
+  },
+  total: 0,
+  pageConfiger: {
+    pageSize: 20,
+    pageNum: 1
+  },
+  controlsWidth: 180,
+  tableColumn: [
+    { label: "培训项目名称", prop: "ssbakk",showOverflowTooltip: true },
+    { label: "培训地址", prop: "sptzCompanyName", showOverflowTooltip: true },
+    { label: "培训开始时间", prop: "njnf"},
+    { label: "培训结束时间", prop: "xm" },
+    { label: "组织单位", prop: "sfzhm",showOverflowTooltip: true },
+    { label: "培训内容", prop: "dh" },
+    { label: "培训人员", prop: "whcd" },
+    { label: "已签到人员", prop: "zsbh", showOverflowTooltip: true },
+    { label: "未签到人员", prop: "fwxymc" },
+    { label: "是否上报分县局", prop: "rzsj" },
+  ]
+});
+onMounted(() => {
+  // getList();
+  tabHeightFn();
+});
+// 搜索
+const onSearch = (val) => {
+  queryFrom.value = { ...val };
+  pageData.pageConfiger.pageNum = 1;
+  getList();
+};
+const changeNo = (val) => {
+  pageData.pageConfiger.pageNum = val;
+  getList();
+};
+const changeSize = (val) => {
+  pageData.pageConfiger.pageSize = val;
+  getList();
+};
+// 获取列表
+const getList = () => {
+  pageData.tableConfiger.loading = true;
+  const promes = {
+    ...pageData.pageConfiger,
+    ...queryFrom.value,
+  }
+  qcckPost(promes,'/mosty-base/bans/njxx/listForSendTraining').then((res) => {
+    pageData.tableData = res.records || []
+    pageData.total = res.total;
+     pageData.tableConfiger.loading = false;
+  }).catch((err) => {
+     pageData.tableConfiger.loading = false;
+  })
+};
+
+const chooseData = (rows) => {
+  selectedRows.value = Array.isArray(rows) ? rows : [];
+};
+
+const onBatchAudit = () => {
+  addFormRef.value.init();
+};
+
+
+// 详情
+const addEdit = (type, row) => {
+  nextTick(() => {
+    if(type == 'RefSteap'){
+      RefSteap.value.init(row);
+    }else if(type == 'shForm'){
+      shForm.value.init(row);
+    }
+    else{
+      detailDiloag.value.init(type, row);
+    }
+  })
+};
+
+
+// 表格高度计算
+const tabHeightFn = () => {
+  pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 250;
+  window.onresize = function () {
+    tabHeightFn();
+  };
+};
+</script>
+
+<style>
+.el-loading-mask {
+  background: rgba(0, 0, 0, 0.5) !important;
+}
+</style>