更新
This commit is contained in:
@ -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>
|
||||
@ -29,6 +29,8 @@
|
||||
|
||||
<view-project-details-dialog ref="viewProjectDetailsRef" v-model="isVisible" />
|
||||
<preject-details-dialog ref="prejectDetailsRef" v-model="dialogVisible" />
|
||||
<!-- 新增 -->
|
||||
<AddPxxm ref="addPxxmRef" v-model="dialogVisible" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -40,8 +42,9 @@ import Search from '@/components/aboutTable/Search.vue';
|
||||
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
|
||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||
import ViewProjectDetailsDialog from "./components/viewProjectDetailsDialog.vue";
|
||||
import AddPxxm from './components/addPxxm.vue'
|
||||
import PrejectDetailsDialog from "./components/prejectDetailsDialog.vue";
|
||||
|
||||
const addPxxmRef = ref()
|
||||
const prejectDetailsRef = ref(null);
|
||||
const viewProjectDetailsRef = ref(null)
|
||||
const queryFrom = ref({});
|
||||
@ -99,9 +102,11 @@ const tabHeightFn = () => {
|
||||
const addEdit = (type, row) => {
|
||||
if (type === 'view') {
|
||||
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) => {
|
||||
|
||||
Reference in New Issue
Block a user