<!DOCTYPE html>
< html lang = "zh" xmlns:th = "http://www.thymeleaf.org" >
< head >
< th:block th:include = "include :: header('修改涉密人员培训')" / >
< th:block th:include = "include :: datetimepicker-css" / >
< th:block th:include = "include :: select2-css" / >
< / head >
< body class = "white-bg" >
< div class = "wrapper wrapper-content animated fadeInRight ibox-content" id = "app" >
< form class = "form-horizontal m" id = "form-train-edit" th:object = "${tdTrain}" >
< input name = "ID" th:field = "*{ID}" type = "hidden" >
<!-- <input name="deptId" type="hidden" th:field="*{deptId}" id="treeId"> -->
< div class = "row" >
< div class = "col-sm-6" >
< div class = "form-group" >
< label class = "col-sm-4 control-label is-required" > 所属地市：< / label >
< div class = "col-sm-8" >
< select id = "City" name = "AREAID" required @ change = "getAreaList()" v-model = "City" class = "form-control m-b" >
< option value = "" > ---请选择---< / option >
< option v-for = "option in CityList" :value = "option.id" :key = "option.id" >
{{ option.name }}
< / option >
< / select >
< / div >
< / div >
< / div >
< div class = "col-sm-6" >
< div class = "form-group" >
< label class = "col-sm-4 control-label is-required" > 所属区县：< / label >
< div class = "col-sm-8" >
< select id = "Area" name = "FRAMEWORK" required v-model = "Area" class = "form-control m-b" >
< option value = "" > ---请选择---< / option >
< option v-for = "option in AreaList" :value = "option.id" :key = "option.id" >
{{ option.name }}
< / option >
< / select >
< / div >
< / div >
< / div >
< / div >
< div class = "row" >
< div class = "col-sm-6" >
< div class = "form-group" >
< label class = "col-sm-4 control-label is-required" > 培训对象：< / label >
< div class = "col-sm-8" >
< select id = "trainSubject" v-model = "trainSubject" name = "trainSubject" required class = "form-control m-b" th:with = "type=${@dict.getType('sys_usertrain_obj')}" >
< option value = "" > ---请选择---< / option >
< option th:each = "dict : ${type}" th:text = "${dict.dictLabel}" th:value = "${dict.dictValue}" > < / option >
< / select >
< / div >
< / div >
< / div >
< div class = "col-sm-6" >
< div class = "form-group" >
< label class = "col-sm-4 control-label is-required " > 所属单位：< / label >
< div class = "col-sm-8" >
< div class = "input-group" >
< input class = "form-control" required type = "text" name = "deptName" onclick = "selectDeptTree()" id = "treeName" th:field = "*{deptName}" >
< span class = "input-group-addon" > < i class = "fa fa-search" > < / i > < / span >
< / div >
< / div >
< / div >
< / div >
< / div >
< div class = "row" >
< div class = "col-sm-6" >
< div class = "form-group" v-if = "trainSubject == '0'" >
< label class = "col-sm-4 control-label is-required" > 人员姓名：< / label >
< div class = "col-sm-8" >
< select id = "User" v-model = "userName" name = "USERNAME" required class = "form-control m-b" >
< option value = "" > ---请选择---< / option >
< option v-for = "option in userList" :value = "option.userId" :key = "option.userId" >
{{ option.userName }}
< / option >
< / select >
< / div >
< / div >
< div class = "form-group" v-if = "trainSubject == '1'" >
< label class = "col-sm-4 control-label is-required" > 人员姓名：< / label >
< div class = "col-sm-8" >
< input name = "USERNAME" id = "userSubjectName" th:field = "*{USERNAME}" required placeholder = "请输入人员姓名" class = "form-control" type = "text" >
< / div >
< / div >
< div class = "form-group" v-if = "trainSubject == '2'" >
< label class = "col-sm-4 control-label is-required" > 人员姓名：< / label >
< div class = "col-sm-8" >
< input name = "USERNAME" readonly th:value = "'全体人员'" placeholder = "全体人员" class = "form-control" type = "text" >
< / div >
< / div >
< / div >
< div class = "col-sm-6" >
< div class = "form-group" >
< label class = "col-sm-4 control-label is-required" > 培训类型：< / label >
< div class = "col-sm-8" >
< select name = "trainType" required class = "form-control m-b" th:with = "type=${@dict.getType('sys_usertrain_typer')}" >
< option value = "" > ---请选择---< / option >
< option th:each = "dict : ${type}" th:text = "${dict.dictLabel}" th:value = "${dict.dictValue}" th:field = "*{trainType}" > < / option >
< / select >
< / div >
< / div >
< / div >
< / div >
< div class = "row" >
< div class = "col-sm-6" >
< div class = "form-group" >
< label class = "col-sm-4 control-label is-required" > 培训人员：< / label >
< div class = "col-sm-8" >
< input name = "trainName" required th:field = "*{trainName}" class = "form-control m-b" type = "text" >
< / div >
< / div >
< / div >
< div class = "col-sm-6" >
< / div >
< / div >
< div class = "row" >
< div class = "col-sm-12" >
< div class = "form-group" >
< label class = "col-sm-2 control-label is-required" > 培训日期：< / label >
< div class = "col-sm-10" >
< div class = "input-daterange input-group" >
< input type = "text" class = "input-sm form-control" th:value = "${#dates.format(tdTrain.trainDate, 'yyyy-MM-dd')}" name = "trainDate" id = "laydate-startTime" placeholder = "开始日期" / >
< span class = "input-group-addon" > 到< / span >
< input type = "text" class = "input-sm form-control" th:value = "${#dates.format(tdTrain.trainTimeend, 'yyyy-MM-dd')}" name = "trainTimeend" id = "laydate-endTime" placeholder = "结束日期" / >
< / div >
< / div >
< / div >
< / div >
< / div >
< div class = "row" >
< div class = "col-sm-12" >
< div class = "form-group" >
< label class = "col-sm-2 control-label is-required" > 培训地点：< / label >
< div class = "col-sm-10" >
< textarea name = "trainAddress" required class = "form-control m-t" > [[*{trainAddress}]]< / textarea >
< / div >
< / div >
< / div >
< / div >
< / form >
< / div >
< th:block th:include = "include :: footer" / >
< th:block th:include = "include :: datetimepicker-js" / >
< th:block th:include = "include :: bootstrap-select-js" / >
< th:block th:include = "include :: select2-js" / >
< script th:inline = "javascript" >
var prefix = ctx + "system/train";
$("#form-train-edit").validate({
focusCleanup: true
});
$(document).ready(function() {
$('#City').select2().on('change', function() {
// 更新 Vue 数据
const vueInstance = document.querySelector('#app').__vue__;
vueInstance.City = $(this).val();
vueInstance.getAreaList();
});
$('#trainSubject').select2().on('change', function() {
// 更新 Vue 数据
const vueInstance = document.querySelector('#app').__vue__;
vueInstance.trainSubject = $(this).val();
vueInstance.$nextTick(() => {
vueInstance.$forceUpdate(); // 强制更新 Vue 实例
$("#userSubjectName").val('');
});
})
$('#User').select2().on('change', function() {
// 更新 Vue 数据
const vueInstance = document.querySelector('#app').__vue__;
vueInstance.userName = ''
vueInstance.userName = $(this).val();
vueInstance.$nextTick(() => {
vueInstance.$forceUpdate(); // 强制更新 Vue 实例
});
})
});
/* 用户管理-修改-选择部门树 */
function selectDeptTree() {
var deptId = $.common.isEmpty($("#treeId").val()) ? "100" : $("#treeId").val();
var url = ctx + "system/user/selectDeptTree/" + deptId;
var options = {
title: '选择部门',
width: "380",
url: url,
callBack: doSubmit
};
$.modal.openOptions(options);
}
function doSubmit(index, layero){
var body = $.modal.getChildFrame(index);
$("#treeId").val(body.find('#treeId').val());
$("#treeName").val(body.find('#treeName').val());
$.modal.close(index);
}
var app = new Vue({
el: '#app',
data: {
CityList: [],
AreaList:[],
City:[[${tdTrain.AREAID}]],
Area:[[${tdTrain.FRAMEWORK}]],
userName:[[${tdTrain.USERNAME}]],
userList:[],
params:{
parentId:'',
},
userPost:"system/user/userList",
trainSubject:[[${tdTrain.trainSubject}]],
},
mounted(){
// 初始化地市列表
this.getCityList();
if (this.City){
this.getAreaList()
}
this.getUserList()
},
watch: {
trainSubject() {
this.$nextTick(() => {
$('#User').select2(); // 重新初始化 Select2
});
}
},
methods:{
getUserList(){
$.ajax({
url: ctx + this.userPost,
type: 'POST',
success:((res)=>{
this.userList = res.data
}) ,
});
},
getCityList(){
$.ajax({
url: ctx + "system/area/getSysAreaList",
type: 'GET',
data:this.params ,
success:((res)=>{
this.CityList = res.data
}) ,
});
},
getAreaList(){
this.params.parentId = this.City
$.ajax({
url: ctx + "system/area/getSysAreaList",
type: 'GET',
data:this.params,
success:((res)=>{
this.AreaList = res.data
}) ,
});
}
}
})
layui.use('laydate', function(){
var laydate = layui.laydate;
var startDate = laydate.render({
elem: '#laydate-startTime',
theme: 'molv',
trigger: 'click',
done: function(value, date) {
// 结束时间大于开始时间
if (value !== '') {
endDate.config.min.year = date.year;
endDate.config.min.month = date.month - 1;
endDate.config.min.date = date.date;
} else {
endDate.config.min.year = '';
endDate.config.min.month = '';
endDate.config.min.date = '';
}
}
});
var endDate = laydate.render({
elem: '#laydate-endTime',
theme: 'molv',
trigger: 'click',
done: function(value, date) {
// Start date cannot be after end date
if (value !== '') {
startDate.config.max = {
year: date.year,
month: date.month - 1,
date: date.date
};
} else {
startDate.config.max = {
year: '',
month: '',
date: ''
};
}
}
});
});
function submitHandler() {
if ($.validate.form()) {
$.operate.save(prefix + "/edit", $('#form-train-edit').serialize());
}
}
$("input[name='createDate']").datetimepicker({
format: "yyyy-mm-dd",
minView: "month",
autoclose: true
});
$("input[name='updateDate']").datetimepicker({
format: "yyyy-mm-dd",
minView: "month",
autoclose: true
});
< / script >
< / body >
< / html >
