This commit is contained in:
esacpe
2025-09-22 18:10:58 +08:00
2 changed files with 195 additions and 3 deletions

View File

@ -0,0 +1,187 @@
<template>
<div class="dialog" v-if="showDialog">
<div class="head_box">
<span class="title">保安培训项目新增</span>
<div>
<el-button size="small" @click="save" type="primary" :loading="loading">保存</el-button>
<el-button size="small" @click="close">关闭</el-button>
</div>
</div>
<div class="cntBox">
<el-form :model="formData" ref="FormRef" label-width="120px">
<el-row>
<el-col :span="12">
<el-form-item label="培训项目名称" prop="pxxm" style="width: 100%;">
<el-input v-model="formData.pxxm" placeholder="请输入培训项目名称" style="width: 100%;"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="培训地址" prop="pxdz" style="width: 100%;">
<el-input v-model="formData.pxdz" placeholder="请输入培训地址" style="width: 100%;"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="详细地址" prop="xxdz" style="width: 100%;">
<el-input v-model="formData.xxdz" placeholder="请输入详细地址" style="width: 100%;"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="培训开始时间" prop="pxksrq" style="width: 100%;">
<el-date-picker v-model="formData.pxksrq" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="请输入培训开始时间" style="width: 100%;" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="培训结束时间" prop="pxjsrq" style="width: 100%;">
<el-date-picker v-model="formData.pxjsrq" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="请输入培训结束时间" style="width: 100%;" />
</el-form-item>
</el-col>
</el-row>
<el-divider />
<!-- 人员 -->
<el-row class="peoRow" v-for="(item, index) in formData.courceList" :key="index">
<el-col :span="12">
<el-form-item label="培训日期" prop="pxrq" style="width: 100%;">
<el-date-picker v-model="item.pxrq" type="date" value-format="YYYY-MM-DD" placeholder="请输入培训日期" style="width: 100%;" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="培训时间" prop="pxsj" style="width: 100%;">
<el-time-picker v-model="item.pxsj" value-format="HH:mm:ss" placeholder="请输入培训时间" style="width: 100%;" is-range range-separator="To" start-placeholder="开始时间" end-placeholder="结束时间"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="课程名称" prop="pxkcxm" style="width: 100%;">
<el-input v-model="item.pxkcxm" placeholder="请输入课程名称" style="width: 100%;"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="组织单位" prop="pxzcdw" style="width: 100%;">
<el-input v-model="item.pxzcdw" placeholder="请输入组织单位" style="width: 100%;"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="授课教员" prop="pxfcy" style="width: 100%;">
<el-input v-model="item.pxfcy" placeholder="请输入授课教员" style="width: 100%;"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="培训内容" prop="pxnc" style="width: 100%;">
<el-input v-model="item.pxnc" placeholder="请输入培训内容" style="width: 100%;"></el-input>
</el-form-item>
</el-col>
<span class="deleteIncon" @click.stop="delItem(item,index)">
<el-icon color="red" size="25px"><Delete /></el-icon>
</span>
</el-row>
<div class="flex just-center mb20 mt10">
<el-button type="primary" @click="addItem">新增课程</el-button>
</div>
</el-form>
<div class="table-title">培训保安人员 <el-icon size="20px" style="top: 4px;" color="green"><CirclePlusFilled /></el-icon> </div>
<MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" :controlsWidth="pageData.controlsWidth">
<!-- 操作 -->
<template #controls="{ row }">
<el-link type="warning" @click="addEdit('updata', row)">删除</el-link>
</template>
</MyTable>
</div>
</div>
</template>
<script setup>
import { qcckPost } from "@/api/qcckApi.js";
import MyTable from '@/components/aboutTable/MyTable.vue';
import { ref, computed, reactive, getCurrentInstance } from 'vue'
const showDialog = ref(false)
const formData = ref({
courceList: [{
pxkcxm: '', //课程名称
pxzcdw: '', //组织单位
pxfcy: '', //授课教员
pxnc: '', //培训内容
}] //课程
})
const pageData = reactive({
tableData: [{xm: '张三', sfzh: '123456789012345678', lxdh: '13800000000'}],
keyCount: 0,
tableConfiger: {
rowHieght: 61,
showSelectType: "null",
loading: false
},
total: 0,
pageConfiger: {
pageSize: 10,
pageCurrent: 1
},
controlsWidth: 180,
tableColumn: [
{ label: "姓名", prop: "xm" },
{ label: "证件号码", prop: "sfzh" },
{ label: "联系号码", prop: "lxdh" },
{ label: "线上培训时长", prop: "sfzh" },
{ label: "所属单位", prop: "lxdh" },
]
});
const addItem = () => {
formData.value.courceList.push({
pxkcxm: '', //课程名称
pxzcdw: '', //组织单位
pxfcy: '', //授课教员
pxnc: '', //培训内容
})
}
const delItem = (item,index) => {
if(formData.value.courceList.length === 1) return proxy.$message.error('请至少添加一门课程');
formData.value.courceList.splice(index,1)
}
const init = () => {
showDialog.value = true
}
const close = () => {
showDialog.value = false
}
defineExpose({
init
})
</script>
<style scoped lang="scss">
@import "@/assets/css/layout.scss";
.table-title{
line-height: 40px;
text-align: center;
background: #f5f5f5;
color: #333;
cursor: pointer;
}
.cntBox {
width: 100%;
height: calc(100% - 50px);
overflow: hidden;
overflow-y: auto;
padding: 2vw 13vw;
box-sizing: border-box;
.peoRow{
background: #f7f7f7;
padding: 10px;
box-sizing: border-box;
border-radius: 4px;
margin-bottom: 4px;
position: relative;
.deleteIncon{
position: absolute;
top: 8px;
left: 8px;
}
}
}
</style>

View File

@ -29,6 +29,8 @@
<view-project-details-dialog ref="viewProjectDetailsRef" v-model="isVisible" /> <view-project-details-dialog ref="viewProjectDetailsRef" v-model="isVisible" />
<preject-details-dialog ref="prejectDetailsRef" v-model="dialogVisible" /> <preject-details-dialog ref="prejectDetailsRef" v-model="dialogVisible" />
<!-- 新增 -->
<AddPxxm ref="addPxxmRef" v-model="dialogVisible" />
</div> </div>
</template> </template>
@ -40,8 +42,9 @@ import Search from '@/components/aboutTable/Search.vue';
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js"; import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
import PageTitle from "@/components/aboutTable/PageTitle.vue"; import PageTitle from "@/components/aboutTable/PageTitle.vue";
import ViewProjectDetailsDialog from "./components/viewProjectDetailsDialog.vue"; import ViewProjectDetailsDialog from "./components/viewProjectDetailsDialog.vue";
import AddPxxm from './components/addPxxm.vue'
import PrejectDetailsDialog from "./components/prejectDetailsDialog.vue"; import PrejectDetailsDialog from "./components/prejectDetailsDialog.vue";
const addPxxmRef = ref()
const prejectDetailsRef = ref(null); const prejectDetailsRef = ref(null);
const viewProjectDetailsRef = ref(null) const viewProjectDetailsRef = ref(null)
const queryFrom = ref({}); const queryFrom = ref({});
@ -99,9 +102,11 @@ const tabHeightFn = () => {
const addEdit = (type, row) => { const addEdit = (type, row) => {
if (type === 'view') { if (type === 'view') {
prejectDetailsRef.value.open(row, type); prejectDetailsRef.value.open(row, type);
return }else if (type === 'add') {
} addPxxmRef.value.init()
}else{
viewProjectDetailsRef.value.open(row, type); viewProjectDetailsRef.value.open(row, type);
}
}; };
const onSearch = (value) => { const onSearch = (value) => {