|
|
@@ -7,77 +7,131 @@
|
|
|
<body class="white-bg">
|
|
|
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
|
|
|
<form class="form-horizontal m" id="form-field-add">
|
|
|
- <input type="hidden" name="templateId" th:value="${templateId}">
|
|
|
+ <input type="hidden" name="templateId" th:value="${templateId}" />
|
|
|
|
|
|
+ <!-- 字段编码 -->
|
|
|
<div class="form-group">
|
|
|
- <label class="col-sm-3 control-label is-required">选择字段：</label>
|
|
|
+ <label class="col-sm-3 control-label is-required">字段编码：</label>
|
|
|
<div class="col-sm-8">
|
|
|
- <select name="fieldCode" class="form-control select2" required>
|
|
|
- <option value="">请选择字段</option>
|
|
|
- <optgroup th:each="entry : ${fieldsByTab}" th:label="${entry.key}">
|
|
|
- <option th:each="field : ${entry.value}"
|
|
|
- th:value="${field.fieldCode}"
|
|
|
- th:data-field-name="${field.fieldName}"
|
|
|
- th:data-field-type="${field.fieldType}"
|
|
|
- th:data-tab-code="${field.tabCode}"
|
|
|
- th:data-tab-name="${field.tabName}">
|
|
|
- [[${field.fieldName}]] ([[${field.fieldType}]])
|
|
|
- </option>
|
|
|
- </optgroup>
|
|
|
- </select>
|
|
|
+ <input name="fieldCode" class="form-control" type="text" />
|
|
|
+
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
+ <!-- 字段名称 -->
|
|
|
<div class="form-group">
|
|
|
<label class="col-sm-3 control-label">字段名称：</label>
|
|
|
<div class="col-sm-8">
|
|
|
- <input name="fieldName" class="form-control" type="text" readonly>
|
|
|
+ <input name="fieldName" class="form-control" type="text" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 字段类型 -->
|
|
|
+ <div class="form-group">
|
|
|
+ <label class="col-sm-3 control-label is-required">字段类型：</label>
|
|
|
+ <div class="col-sm-8">
|
|
|
+ <select name="fieldType" class="form-control" required>
|
|
|
+ <option value="">请选择类型</option>
|
|
|
+ <option value="input">输入框(input)</option>
|
|
|
+ <option value="textarea">文本域(textarea)</option>
|
|
|
+ <option value="radio">单选框(radio)</option>
|
|
|
+ <option value="checkbox">复选框(checkbox)</option>
|
|
|
+ <option value="select">下拉框(select)</option>
|
|
|
+ <option value="file">文件上传(file)</option>
|
|
|
+ <option value="datetime">日期时间(datetime)</option>
|
|
|
+ <option value="table">表格(table)</option>
|
|
|
+ </select>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
+ <!-- 所属Tab -->
|
|
|
<div class="form-group">
|
|
|
- <label class="col-sm-3 control-label">字段类型：</label>
|
|
|
+ <label class="col-sm-3 control-label is-required">所属Tab：</label>
|
|
|
<div class="col-sm-8">
|
|
|
- <input name="fieldType" class="form-control" type="text" readonly>
|
|
|
+ <select name="tabCode" class="form-control" required>
|
|
|
+ <option value="">请选择Tab编码</option>
|
|
|
+ <option value="tab-4">tab-4 - 本次任务</option>
|
|
|
+ <option value="tab-6">tab-6 - 用药依从性</option>
|
|
|
+ <option value="tab-7">tab-7 - 药物安全性</option>
|
|
|
+ <option value="tab-8">tab-8 - 药物有效性</option>
|
|
|
+ <option value="tab-9">tab-9 - 治疗方案</option>
|
|
|
+ <option value="tab-10">tab-10 - 适宜性评估</option>
|
|
|
+ <option value="tab-11">tab-11 - 用药记录</option>
|
|
|
+ <option value="tab-12">tab-12 - 量表测评</option>
|
|
|
+ <option value="tab-13">tab-13 - 患者咨询</option>
|
|
|
+ <option value="tab-14">tab-14 - 其他</option>
|
|
|
+ </select>
|
|
|
+
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
+ <!-- Tab名称（用于显示） -->
|
|
|
<div class="form-group">
|
|
|
- <label class="col-sm-3 control-label">所属Tab：</label>
|
|
|
+ <label class="col-sm-3 control-label">Tab名称：</label>
|
|
|
<div class="col-sm-8">
|
|
|
- <input name="tabName" class="form-control" type="text" readonly>
|
|
|
- <input name="tabCode" type="hidden">
|
|
|
+<!-- <input class="form-control" type="text" readonly placeholder="自动填充" />-->
|
|
|
+ <!-- 注意：这里你写的是 th:value="${{tabName}}，双重大括号是转义输出，应该改为单层 -->
|
|
|
+ <!-- 推荐改为：th:value="${tabName}" -->
|
|
|
+ <input class="form-control" name="tabName" type="text" readonly placeholder="自动填充" th:value="${tabName}" />
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
+ <!-- 是否必填 -->
|
|
|
<div class="form-group">
|
|
|
<label class="col-sm-3 control-label">是否必填：</label>
|
|
|
<div class="col-sm-8">
|
|
|
<div class="radio-box">
|
|
|
- <input type="radio" id="isRequired1" name="isRequired" value="1">
|
|
|
+ <input type="radio" id="isRequired1" name="isRequired" value="1" />
|
|
|
<label for="isRequired1">是</label>
|
|
|
</div>
|
|
|
<div class="radio-box">
|
|
|
- <input type="radio" id="isRequired0" name="isRequired" value="0" checked>
|
|
|
+ <input type="radio" id="isRequired0" name="isRequired" value="0" checked />
|
|
|
<label for="isRequired0">否</label>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
+ <!-- 是否启用 -->
|
|
|
+ <div class="form-group">
|
|
|
+ <label class="col-sm-3 control-label">是否启用：</label>
|
|
|
+ <div class="col-sm-8">
|
|
|
+ <div class="radio-box">
|
|
|
+ <input type="radio" id="isEnabled1" name="isEnabled" value="1" checked />
|
|
|
+ <label for="isEnabled1">是</label>
|
|
|
+ </div>
|
|
|
+ <div class="radio-box">
|
|
|
+ <input type="radio" id="isEnabled0" name="isEnabled" value="0" />
|
|
|
+ <label for="isEnabled0">否</label>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 显示顺序 -->
|
|
|
<div class="form-group">
|
|
|
<label class="col-sm-3 control-label">显示顺序：</label>
|
|
|
<div class="col-sm-8">
|
|
|
- <input name="displayOrder" class="form-control" type="number" value="1" min="1" required>
|
|
|
+ <input name="displayOrder" class="form-control" type="number" value="1" min="0" required />
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
+ <!-- 占位符 -->
|
|
|
<div class="form-group">
|
|
|
<label class="col-sm-3 control-label">占位符：</label>
|
|
|
<div class="col-sm-8">
|
|
|
- <input name="placeholder" class="form-control" type="text" placeholder="请输入占位符文本">
|
|
|
+ <input name="placeholder" class="form-control" type="text" placeholder="请输入占位符文本" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 验证规则（可选） -->
|
|
|
+ <div class="form-group">
|
|
|
+ <label class="col-sm-3 control-label">验证规则（JSON）：</label>
|
|
|
+ <div class="col-sm-8">
|
|
|
+ <textarea name="validationRules" class="form-control" rows="2" placeholder='如：{"minLength": 5, "maxLength": 100}'></textarea>
|
|
|
+ <small class="text-muted">可选，输入 JSON 格式的验证规则</small>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
+ <!-- 字段选项 -->
|
|
|
<div class="form-group" id="fieldOptionsGroup" style="display: none;">
|
|
|
<label class="col-sm-3 control-label">字段选项：</label>
|
|
|
<div class="col-sm-8">
|
|
|
@@ -87,95 +141,132 @@
|
|
|
<button type="button" class="btn btn-sm btn-primary" onclick="addOption()">
|
|
|
<i class="fa fa-plus"></i> 添加选项
|
|
|
</button>
|
|
|
+ <small class="text-muted">例如：是,否 或 正常,异常</small>
|
|
|
</div>
|
|
|
</div>
|
|
|
</form>
|
|
|
+ <div class="row">
|
|
|
+ <div class="col-sm-offset-5 col-sm-10">
|
|
|
+ <button type="button" class="btn btn-sm btn-primary" onclick="submitHandler()"><i class="fa fa-check"></i>保 存</button>
|
|
|
+ <button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i class="fa fa-reply-all"></i>关 闭 </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
|
|
|
<th:block th:include="include :: footer" />
|
|
|
<th:block th:include="include :: select2-js" />
|
|
|
+
|
|
|
<script th:inline="javascript">
|
|
|
- var availableFields = [[${availableFields}]];
|
|
|
- var fieldsByTab = {};
|
|
|
+ // var availableFields = [[${availableFields}]];
|
|
|
+ // 定义 Tab 映射关系：tabCode -> 中文名称
|
|
|
+ var tabMap = {
|
|
|
+ 'tab-4': '本次任务',
|
|
|
+ 'tab-6': '用药依从性',
|
|
|
+ 'tab-7': '药物安全性',
|
|
|
+ 'tab-8': '药物有效性',
|
|
|
+ 'tab-9': '治疗方案',
|
|
|
+ 'tab-10': '适宜性评估',
|
|
|
+ 'tab-11': '用药记录',
|
|
|
+ 'tab-12': '量表测评',
|
|
|
+ 'tab-13': '患者咨询',
|
|
|
+ 'tab-14': '其他'
|
|
|
+ };
|
|
|
|
|
|
- $(function() {
|
|
|
- // 初始化select2
|
|
|
- $('.select2').select2();
|
|
|
|
|
|
- // 处理字段数据
|
|
|
- availableFields.forEach(function(field) {
|
|
|
- if (!fieldsByTab[field.tabName]) {
|
|
|
- fieldsByTab[field.tabName] = [];
|
|
|
- }
|
|
|
- fieldsByTab[field.tabName].push(field);
|
|
|
+ // 更新 Tab 名称的函数
|
|
|
+ function updateTabName() {
|
|
|
+ var tabCode = $('select[name="tabCode"]').val();
|
|
|
+ var tabName = tabMap[tabCode] || ''; // 查找中文名，不存在则为空
|
|
|
+
|
|
|
+ // 更新隐藏域：用于表单提交
|
|
|
+ $('input[name="tabName"]').val(tabName);
|
|
|
+console.log("tabName="+tabName)
|
|
|
+ // 更新只读显示框（用于界面展示）
|
|
|
+ // 注意：Thymeleaf 的 th:value 不影响 JS 操作，直接用 val() 即可
|
|
|
+ $('input[readonly][name="tabName"]').val(tabName);
|
|
|
+ }
|
|
|
+
|
|
|
+ $(function () {
|
|
|
+ // 初始化 select2
|
|
|
+ //$('.select2').select2();
|
|
|
+
|
|
|
+
|
|
|
+ // 初始化：页面加载时尝试设置一次（比如编辑场景）
|
|
|
+ updateTabName();
|
|
|
+
|
|
|
+ // 监听 "所属Tab" 下拉框变化
|
|
|
+ $('select[name="tabCode"]').change(function () {
|
|
|
+ updateTabName();
|
|
|
});
|
|
|
|
|
|
- // 字段选择变化事件
|
|
|
- $('select[name="fieldCode"]').change(function() {
|
|
|
- var selectedOption = $(this).find('option:selected');
|
|
|
- var fieldName = selectedOption.data('field-name');
|
|
|
- var fieldType = selectedOption.data('field-type');
|
|
|
- var tabCode = selectedOption.data('tab-code');
|
|
|
- var tabName = selectedOption.data('tab-name');
|
|
|
-
|
|
|
- $('input[name="fieldName"]').val(fieldName);
|
|
|
- $('input[name="fieldType"]').val(fieldType);
|
|
|
- $('input[name="tabCode"]').val(tabCode);
|
|
|
- $('input[name="tabName"]').val(tabName);
|
|
|
-
|
|
|
- // 根据字段类型显示/隐藏选项配置
|
|
|
- if (fieldType === 'radio' || fieldType === 'checkbox' || fieldType === 'select') {
|
|
|
+ // 字段类型变化
|
|
|
+ $('select[name="fieldType"]').change(function () {
|
|
|
+ var type = $(this).val();
|
|
|
+ var fieldName = $('input[name="fieldName"]').val();
|
|
|
+
|
|
|
+ // 控制选项显示
|
|
|
+ if (['radio', 'checkbox', 'select'].includes(type)) {
|
|
|
$('#fieldOptionsGroup').show();
|
|
|
- loadDefaultOptions(fieldType);
|
|
|
+ loadDefaultOptions(type);
|
|
|
} else {
|
|
|
$('#fieldOptionsGroup').hide();
|
|
|
}
|
|
|
|
|
|
- // 设置默认占位符
|
|
|
- var defaultPlaceholder = '';
|
|
|
- if (fieldType === 'input' || fieldType === 'textarea') {
|
|
|
- defaultPlaceholder = '请输入' + fieldName;
|
|
|
- } else if (fieldType === 'select') {
|
|
|
- defaultPlaceholder = '请选择' + fieldName;
|
|
|
- } else if (fieldType === 'datetime') {
|
|
|
- defaultPlaceholder = '请选择日期时间';
|
|
|
+ // 自动设置 placeholder
|
|
|
+ let placeholder = '';
|
|
|
+ if (type === 'input' || type === 'textarea') {
|
|
|
+ placeholder = '请输入' + (fieldName || '');
|
|
|
+ } else if (type === 'select') {
|
|
|
+ placeholder = '请选择' + (fieldName || '');
|
|
|
+ } else if (type === 'datetime') {
|
|
|
+ placeholder = '请选择日期时间';
|
|
|
}
|
|
|
- $('input[name="placeholder"]').val(defaultPlaceholder);
|
|
|
+ $('input[name="placeholder"]').val(placeholder);
|
|
|
});
|
|
|
|
|
|
+ // 表单验证
|
|
|
$("#form-field-add").validate({
|
|
|
+ rules: {
|
|
|
+ fieldCode: { required: true },
|
|
|
+ fieldType: { required: true },
|
|
|
+ tabCode: { required: true },
|
|
|
+ displayOrder: { required: true, digits: true }
|
|
|
+ },
|
|
|
focusCleanup: true
|
|
|
});
|
|
|
});
|
|
|
|
|
|
// 加载默认选项
|
|
|
- function loadDefaultOptions(fieldType) {
|
|
|
- var html = '';
|
|
|
- var defaultOptions = ['选项1', '选项2', '选项3'];
|
|
|
+ function loadDefaultOptions(type) {
|
|
|
+ const defaults = {
|
|
|
+ 'radio': ['是', '否'],
|
|
|
+ 'checkbox': ['选项1', '选项2'],
|
|
|
+ 'select': ['请选择', '选项1', '选项2']
|
|
|
+ };
|
|
|
+ const options = defaults[type] || ['选项1', '选项2'];
|
|
|
|
|
|
- defaultOptions.forEach(function(option, index) {
|
|
|
+ let html = '';
|
|
|
+ options.forEach(opt => {
|
|
|
html += '<div class="option-item" style="margin-bottom: 5px;">';
|
|
|
html += ' <input type="text" class="form-control input-sm" style="width: 200px; display: inline-block;" ';
|
|
|
- html += ' name="fieldOption" value="' + option + '" placeholder="选项文本">';
|
|
|
+ html += ' name="fieldOption" value="' + opt + '" placeholder="选项文本">';
|
|
|
html += ' <button type="button" class="btn btn-sm btn-danger" onclick="removeOption(this)" style="margin-left: 5px;">';
|
|
|
html += ' <i class="fa fa-minus"></i>';
|
|
|
html += ' </button>';
|
|
|
html += '</div>';
|
|
|
});
|
|
|
-
|
|
|
$('#fieldOptions').html(html);
|
|
|
}
|
|
|
|
|
|
// 添加选项
|
|
|
function addOption() {
|
|
|
- var html = '<div class="option-item" style="margin-bottom: 5px;">';
|
|
|
+ let html = '<div class="option-item" style="margin-bottom: 5px;">';
|
|
|
html += ' <input type="text" class="form-control input-sm" style="width: 200px; display: inline-block;" ';
|
|
|
html += ' name="fieldOption" placeholder="选项文本">';
|
|
|
html += ' <button type="button" class="btn btn-sm btn-danger" onclick="removeOption(this)" style="margin-left: 5px;">';
|
|
|
html += ' <i class="fa fa-minus"></i>';
|
|
|
html += ' </button>';
|
|
|
html += '</div>';
|
|
|
-
|
|
|
$('#fieldOptions').append(html);
|
|
|
}
|
|
|
|
|
|
@@ -184,35 +275,54 @@
|
|
|
$(btn).closest('.option-item').remove();
|
|
|
}
|
|
|
|
|
|
+ // 提交处理
|
|
|
function submitHandler() {
|
|
|
- if ($.validate.form()) {
|
|
|
- var formData = $('#form-field-add').serializeArray();
|
|
|
- var data = {};
|
|
|
-
|
|
|
- // 处理表单数据
|
|
|
- formData.forEach(function(item) {
|
|
|
- if (item.name === 'fieldOption') {
|
|
|
- if (!data.fieldOptions) {
|
|
|
- data.fieldOptions = [];
|
|
|
- }
|
|
|
- if (item.value) {
|
|
|
- data.fieldOptions.push(item.value);
|
|
|
- }
|
|
|
- } else {
|
|
|
- data[item.name] = item.value;
|
|
|
- }
|
|
|
- });
|
|
|
+ if (!$('#form-field-add').valid()) return false;
|
|
|
|
|
|
- // 将选项数组转换为JSON字符串
|
|
|
- if (data.fieldOptions && data.fieldOptions.length > 0) {
|
|
|
- data.fieldOptions = JSON.stringify(data.fieldOptions);
|
|
|
- }
|
|
|
+ var formData = $('#form-field-add').serializeArray();
|
|
|
+ var data = {};
|
|
|
|
|
|
- // 设置默认值
|
|
|
- data.isEnabled = 1;
|
|
|
+ formData.forEach(function (item) {
|
|
|
+ if (item.name === 'fieldOption') {
|
|
|
+ if (!data.fieldOptions) data.fieldOptions = [];
|
|
|
+ if (item.value) data.fieldOptions.push(item.value);
|
|
|
+ } else {
|
|
|
+ data[item.name] = item.value;
|
|
|
+ }
|
|
|
+ });
|
|
|
|
|
|
- $.operate.save(ctx + "gxhpz/followTemplateConfig/saveField", data);
|
|
|
+ // 转换 fieldOptions 为 JSON 字符串
|
|
|
+ if (data.fieldOptions && data.fieldOptions.length > 0) {
|
|
|
+ data.fieldOptions = JSON.stringify(data.fieldOptions);
|
|
|
+ } else {
|
|
|
+ data.fieldOptions = null;
|
|
|
}
|
|
|
+
|
|
|
+ // 设置默认值
|
|
|
+ data.isEnabled = data.isEnabled || 1;
|
|
|
+ data.isRequired = data.isRequired || 0;
|
|
|
+ $.ajax({
|
|
|
+ cache : true,
|
|
|
+ type : "POST",
|
|
|
+ url : ctx + "gxhpz/followTemplateConfig/saveField",
|
|
|
+ data : data,
|
|
|
+ async : false,
|
|
|
+ error : function(request) {
|
|
|
+ $.modal.alertError("失败");
|
|
|
+ },
|
|
|
+ success : function(data) {
|
|
|
+ if(data.code==500){
|
|
|
+ $.modal.alertError(data.msg)
|
|
|
+ }else {
|
|
|
+ $.modal.alertSuccess(data.msg)
|
|
|
+ $.modal.closeTab();
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ });
|
|
|
+ // 发送请求（使用原接口）
|
|
|
+ //$.operate.save(ctx + "gxhpz/followTemplateConfig/saveField", data);
|
|
|
}
|
|
|
</script>
|
|
|
</body>
|
wangshuangpan