mirror of https://gitee.com/karson/fastadmin.git
优化switch组件未知状态展示和逻辑
Karson
parent
fdf92e550e
commit
14207687b4
|
|
@ -883,8 +883,8 @@ EOD;
|
|||
$itemArr = [$yes => 'Yes', $no => 'No'];
|
||||
}
|
||||
$stateNoClass = 'fa-flip-horizontal text-gray';
|
||||
$formAddElement = $this->getReplacedStub('html/' . $inputType, ['field' => $field, 'fieldName' => $fieldName, 'fieldYes' => $yes, 'fieldNo' => $no, 'attrStr' => Form::attributes($attrArr), 'fieldValue' => $defaultValue, 'fieldSwitchClass' => $defaultValue == $no ? $stateNoClass : '']);
|
||||
$formEditElement = $this->getReplacedStub('html/' . $inputType, ['field' => $field, 'fieldName' => $fieldName, 'fieldYes' => $yes, 'fieldNo' => $no, 'attrStr' => Form::attributes($attrArr), 'fieldValue' => "{\$row.{$field}}", 'fieldSwitchClass' => "{eq name=\"\$row.{$field}\" value=\"{$no}\"}fa-flip-horizontal text-gray{/eq}"]);
|
||||
$formAddElement = $this->getReplacedStub('html/' . $inputType, ['field' => $field, 'fieldName' => $fieldName, 'fieldYes' => $yes, 'fieldNo' => $no, 'attrStr' => Form::attributes($attrArr), 'fieldValue' => $defaultValue, 'fieldSwitchClass' => $defaultValue == $yes ? '' : $stateNoClass]);
|
||||
$formEditElement = $this->getReplacedStub('html/' . $inputType, ['field' => $field, 'fieldName' => $fieldName, 'fieldYes' => $yes, 'fieldNo' => $no, 'attrStr' => Form::attributes($attrArr), 'fieldValue' => "{\$row.{$field}}", 'fieldSwitchClass' => "{neq name=\"\$row.{$field}\" value=\"{$yes}\"}fa-flip-horizontal text-gray{/neq}"]);
|
||||
} elseif ($inputType == 'citypicker') {
|
||||
$attrArr['class'] = implode(' ', $cssClassArr);
|
||||
$attrArr['data-toggle'] = "city-picker";
|
||||
|
|
|
|||
|
|
@ -181,6 +181,10 @@ return [
|
|||
'This page will be re-directed in %s seconds' => '页面将在 %s 秒后自动跳转',
|
||||
'Click to uncheck all' => '点击取消全部',
|
||||
'Multiple selection mode: %s checked' => '跨页选择模式，已选 %s 项',
|
||||
'Please select switch status' => '请选择开关状态',
|
||||
'switch status on' => '设定为开启',
|
||||
'switch status off' => '设定为关闭',
|
||||
'Status unknown, please manually change the status' => '状态未知，请手动修改开关状态',
|
||||
//菜单
|
||||
'Dashboard' => '控制台',
|
||||
'General' => '常规管理',
|
||||
|
|
|
|||
|
|
@ -520,14 +520,14 @@ class FormBuilder
|
|||
$yes = $options['yes'];
|
||||
$no = $options['no'];
|
||||
}
|
||||
$selected = $no == $value ? "fa-flip-horizontal text-gray" : "";
|
||||
$grayclass = $yes == $value ? "": "fa-flip-horizontal text-gray";
|
||||
$disabled = (isset($options['disabled']) && $options['disabled']) || in_array('disabled', $options) ? "disabled" : '';
|
||||
$color = isset($options['color']) ? $options['color'] : 'success';
|
||||
$color = $options['color'] ?? 'success';
|
||||
unset($options['yes'], $options['no'], $options['color'], $options['disabled']);
|
||||
$attr = $this->attributes($options);
|
||||
$html = <<<EOD
|
||||
{$btn}
|
||||
<a href="javascript:;" data-toggle="switcher" class="btn-switcher {$disabled}" data-input-id="c-{$domname}" data-yes="{$yes}" data-no="{$no}" {$attr}><i class="fa fa-toggle-on text-{$color} {$selected} fa-2x"></i></a>
|
||||
<a href="javascript:;" data-toggle="switcher" class="btn-switcher {$disabled}" data-input-id="c-{$domname}" data-yes="{$yes}" data-no="{$no}" {$attr}><i class="fa fa-toggle-on text-{$color} {$grayclass} fa-2x"></i></a>
|
||||
EOD;
|
||||
return $html;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1659,4 +1659,16 @@ table.table-nowrap thead > tr > th {
|
|||
color: #fff;
|
||||
outline: none;
|
||||
}
|
||||
.btn-switcher {
|
||||
margin-top: 5px;
|
||||
display: inline-block;
|
||||
min-height: 30px;
|
||||
}
|
||||
.switcher-unknown-val {
|
||||
width: 30px;
|
||||
border-radius: 10px;
|
||||
background: #f2f281;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
}
|
||||
/*# sourceMappingURL=backend.css.map */
|
||||
|
|
@ -570,10 +570,36 @@ define(['jquery', 'bootstrap', 'moment', 'moment/locale/zh-cn', 'bootstrap-table
|
|||
table.bootstrapTable($(this).prop("checked") ? 'checkBy' : 'uncheckBy', {field: options.pk, values: [ids]});
|
||||
});
|
||||
table.on("click", "[data-id].btn-change", function (e) {
|
||||
var that = this;
|
||||
e.preventDefault();
|
||||
var changer = $.proxy(function () {
|
||||
Table.api.multi($(this).data("action") ? $(this).data("action") : '', [$(this).data("id")], table, this);
|
||||
}, this);
|
||||
|
||||
var unknownSpan = $(this).find(".switcher-unknown-val");
|
||||
if (unknownSpan.length > 0) {
|
||||
var field = $(this).data("field");
|
||||
var yes = $(this).data("yes");
|
||||
var no = $(this).data("no");
|
||||
Layer.alert(__('Please select switch status'), {
|
||||
icon: 0,
|
||||
title: __('Warning'),
|
||||
btn: [__('Switch status on'), __('Switch status off')],
|
||||
btn1: function (index) {
|
||||
unknownSpan.replaceWith('<i class="fa fa-toggle-on text-success fa-2x"></i>')
|
||||
$(that).data("params", field + "=" + yes);
|
||||
changer();
|
||||
Layer.close(index);
|
||||
},
|
||||
btn2: function (index) {
|
||||
unknownSpan.replaceWith('<i class="fa fa-toggle-on text-success fa-flip-horizontal text-gray fa-2x"></i>');
|
||||
$(that).data("params", field + "=" + no);
|
||||
changer();
|
||||
Layer.close(index);
|
||||
}
|
||||
});
|
||||
return false;
|
||||
}
|
||||
if (typeof $(this).data("confirm") !== 'undefined') {
|
||||
Layer.confirm($(this).data("confirm"), function (index) {
|
||||
changer();
|
||||
|
|
@ -864,8 +890,12 @@ define(['jquery', 'bootstrap', 'moment', 'moment/locale/zh-cn', 'bootstrap-table
|
|||
if (typeof this.disable !== "undefined") {
|
||||
disable = typeof this.disable === "function" ? this.disable.call(this, value, row, index) : this.disable;
|
||||
}
|
||||
return "<a href='javascript:;' data-toggle='tooltip' data-value='" + value + "' title='" + __('Click to toggle') + "' class='btn-change " + (disable ? 'btn disabled no-padding' : '') + "' data-index='" + index + "' data-id='"
|
||||
+ row[pk] + "' " + (url ? "data-url='" + url + "'" : "") + (confirm ? "data-confirm='" + confirm + "'" : "") + " data-params='" + this.field + "=" + (value == yes ? no : yes) + "'><i class='fa fa-toggle-on text-success text-" + color + " " + (value == yes ? '' : 'fa-flip-horizontal text-gray') + " fa-2x'></i></a>";
|
||||
var isUnknown = yes == value || no == value ? false : true;
|
||||
var html = isUnknown
|
||||
? '<span class="switcher-unknown-val" data-toggle="tooltip" title="' + __('Status unknown, please manually change the status') + '"><i class="fa fa-question-circle text-warning"></i></span>'
|
||||
: '<i class="fa fa-toggle-on text-success text-' + color + ' ' + (value == yes ? '' : 'fa-flip-horizontal text-gray') + ' fa-2x"></i>';
|
||||
return "<a href='javascript:;' " + (isUnknown ? "" : "data-toggle='tooltip' title='" + __('Click to toggle') + "'") + " data-value='" + value + "' data-field='" + this.field + "' data-yes='" + yes + "' data-no='" + no + "' class='btn-change " + (disable ? 'btn disabled no-padding' : '') + "' data-index='" + index + "' data-id='"
|
||||
+ row[pk] + "' " + (url ? "data-url='" + url + "'" : "") + (confirm ? "data-confirm='" + confirm + "'" : "") + " data-params='" + this.field + "=" + (isUnknown ? value : (value == yes ? no : yes)) + "'>" + html + "</a>";
|
||||
},
|
||||
url: function (value, row, index) {
|
||||
value = value == null || value.length === 0 ? '' : value.toString();
|
||||
|
|
|
|||
|
|
@ -1709,4 +1709,18 @@ table.table-nowrap {
|
|||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-switcher {
|
||||
margin-top: 5px;
|
||||
display: inline-block;
|
||||
min-height: 30px;
|
||||
}
|
||||
|
||||
.switcher-unknown-val {
|
||||
width: 30px;
|
||||
border-radius: 10px;
|
||||
background: #f2f281;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
}
|
||||
Loading…
Reference in New Issue