[渠道]渠道管理-优化白名单添加方式
This commit is contained in:
89
app/admin/controller/channel/Manage.php
Normal file
89
app/admin/controller/channel/Manage.php
Normal file
@@ -0,0 +1,89 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
namespace app\admin\controller\channel;
|
||||||
|
|
||||||
|
use Throwable;
|
||||||
|
use app\common\controller\Backend;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 渠道管理
|
||||||
|
*/
|
||||||
|
class Manage extends Backend
|
||||||
|
{
|
||||||
|
/**
|
||||||
|
* ChannelManage模型对象
|
||||||
|
* @var object|null
|
||||||
|
* @phpstan-var \app\common\model\ChannelManage|null
|
||||||
|
*/
|
||||||
|
protected ?object $model = null;
|
||||||
|
|
||||||
|
protected array|string $preExcludeFields = ['id', 'create_time', 'update_time', 'secret'];
|
||||||
|
|
||||||
|
protected array $withJoinTable = ['admin'];
|
||||||
|
|
||||||
|
protected string|array $quickSearchField = ['id'];
|
||||||
|
|
||||||
|
protected bool $autoFillAdminId = true;
|
||||||
|
|
||||||
|
public function initialize(): void
|
||||||
|
{
|
||||||
|
parent::initialize();
|
||||||
|
$this->model = new \app\common\model\ChannelManage();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 查看
|
||||||
|
* @throws Throwable
|
||||||
|
*/
|
||||||
|
public function index(\Webman\Http\Request $request): \support\Response
|
||||||
|
{
|
||||||
|
$response = $this->initializeBackend($request);
|
||||||
|
if ($response !== null) {
|
||||||
|
return $response;
|
||||||
|
}
|
||||||
|
|
||||||
|
if ($request->get('select') || $request->post('select')) {
|
||||||
|
$this->_select();
|
||||||
|
return $this->success();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. withJoin 不可使用 alias 方法设置表别名，别名将自动使用关联模型名称（小写下划线命名规则）
|
||||||
|
* 2. 以下的别名设置了主表别名，同时便于拼接查询参数等
|
||||||
|
* 3. paginate 数据集可使用链式操作 each(function($item, $key) {}) 遍历处理
|
||||||
|
*/
|
||||||
|
list($where, $alias, $limit, $order) = $this->queryBuilder();
|
||||||
|
$res = $this->model
|
||||||
|
->withJoin($this->withJoinTable, $this->withJoinType)
|
||||||
|
->visible(['admin' => ['username']])
|
||||||
|
->alias($alias)
|
||||||
|
->where($where)
|
||||||
|
->order($order)
|
||||||
|
->paginate($limit);
|
||||||
|
|
||||||
|
return $this->success('', [
|
||||||
|
'list' => $res->items(),
|
||||||
|
'total' => $res->total(),
|
||||||
|
'remark' => get_route_remark(),
|
||||||
|
]);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 白名单（页面按钮规则，用于菜单规则中配置按钮权限）
|
||||||
|
* 实际编辑通过 edit 接口提交 ip_white 字段
|
||||||
|
*/
|
||||||
|
public function whitelist(\Webman\Http\Request $request): \support\Response
|
||||||
|
{
|
||||||
|
$response = $this->initializeBackend($request);
|
||||||
|
if ($response !== null) {
|
||||||
|
return $response;
|
||||||
|
}
|
||||||
|
return $this->success();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* add、edit、del、sortable 已由父类 Backend 实现，无需重写即可直接使用
|
||||||
|
* 若需重写，请确保调用 initializeBackend($request) 并传入 Request 参数
|
||||||
|
* 若模型有 admin_id 字段需自动填充，可设置 protected bool $autoFillAdminId = true
|
||||||
|
*/
|
||||||
|
}
|
||||||
84
app/common/model/ChannelManage.php
Normal file
84
app/common/model/ChannelManage.php
Normal file
@@ -0,0 +1,84 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
namespace app\common\model;
|
||||||
|
|
||||||
|
use support\think\Model;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ChannelManage
|
||||||
|
*/
|
||||||
|
class ChannelManage extends Model
|
||||||
|
{
|
||||||
|
// 表名
|
||||||
|
protected $name = 'channel_manage';
|
||||||
|
|
||||||
|
// 自动写入时间戳字段
|
||||||
|
protected $autoWriteTimestamp = true;
|
||||||
|
|
||||||
|
// 字段类型转换
|
||||||
|
protected $type = [
|
||||||
|
'create_time' => 'integer',
|
||||||
|
'update_time' => 'integer',
|
||||||
|
'ip_white' => 'json',
|
||||||
|
];
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取 IP 白名单，统一返回字符串数组格式
|
||||||
|
* 兼容：["127.0.0.1"]、[{"value":"127.0.0.1"}]、[{"127.0.0.1":""}]
|
||||||
|
*/
|
||||||
|
public function getipWhiteAttr($value): array
|
||||||
|
{
|
||||||
|
$arr = is_array($value) ? $value : (!$value ? [] : json_decode($value, true));
|
||||||
|
if (!is_array($arr)) {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
$result = [];
|
||||||
|
foreach ($arr as $item) {
|
||||||
|
if (is_string($item)) {
|
||||||
|
$result[] = $item;
|
||||||
|
} elseif (is_array($item)) {
|
||||||
|
if (isset($item['value'])) {
|
||||||
|
$result[] = $item['value'];
|
||||||
|
} else {
|
||||||
|
$key = array_key_first($item);
|
||||||
|
if ($key !== null && $key !== '') {
|
||||||
|
$result[] = $key;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return array_values(array_filter($result));
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 写入 IP 白名单，存储格式 ["127.0.0.1","192.168.1.1"]
|
||||||
|
*/
|
||||||
|
public function setipWhiteAttr($value): array
|
||||||
|
{
|
||||||
|
$arr = is_array($value) ? $value : [];
|
||||||
|
$result = [];
|
||||||
|
foreach ($arr as $ip) {
|
||||||
|
$ip = is_string($ip) ? trim($ip) : '';
|
||||||
|
if ($ip !== '') {
|
||||||
|
$result[] = $ip;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return array_values($result);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 创建时自动生成密钥：strtoupper(md5(name+id))
|
||||||
|
*/
|
||||||
|
protected static function onAfterInsert($model): void
|
||||||
|
{
|
||||||
|
$pk = $model->getPk();
|
||||||
|
$secret = strtoupper(md5($model->name . $model->$pk));
|
||||||
|
$model->where($pk, $model->$pk)->update(['secret' => $secret]);
|
||||||
|
}
|
||||||
|
|
||||||
|
public function admin(): \think\model\relation\BelongsTo
|
||||||
|
{
|
||||||
|
return $this->belongsTo(\app\admin\model\Admin::class, 'admin_id', 'id');
|
||||||
|
}
|
||||||
|
}
|
||||||
31
app/common/validate/ChannelManage.php
Normal file
31
app/common/validate/ChannelManage.php
Normal file
@@ -0,0 +1,31 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
namespace app\common\validate;
|
||||||
|
|
||||||
|
use think\Validate;
|
||||||
|
|
||||||
|
class ChannelManage extends Validate
|
||||||
|
{
|
||||||
|
protected $failException = true;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 验证规则
|
||||||
|
*/
|
||||||
|
protected $rule = [
|
||||||
|
];
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 提示消息
|
||||||
|
*/
|
||||||
|
protected $message = [
|
||||||
|
];
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 验证场景
|
||||||
|
*/
|
||||||
|
protected $scene = [
|
||||||
|
'add' => [],
|
||||||
|
'edit' => [],
|
||||||
|
];
|
||||||
|
|
||||||
|
}
|
||||||
40
web/src/components/table/fieldRender/ipWhiteList.vue
Normal file
40
web/src/components/table/fieldRender/ipWhiteList.vue
Normal file
@@ -0,0 +1,40 @@
|
|||||||
|
<template>
|
||||||
|
<div class="ba-ip-white-display">
|
||||||
|
<template v-if="displayIps.length">
|
||||||
|
<div v-for="(ip, idx) in displayIps" :key="idx" class="ba-ip-white-line">{{ ip }}</div>
|
||||||
|
</template>
|
||||||
|
<span v-else>-</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { TableColumnCtx } from 'element-plus'
|
||||||
|
import { computed } from 'vue'
|
||||||
|
import { getCellValue } from '/@/components/table/index'
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
row: TableRow
|
||||||
|
field: TableColumn
|
||||||
|
column: TableColumnCtx<TableRow>
|
||||||
|
index: number
|
||||||
|
}
|
||||||
|
|
||||||
|
const props = defineProps<Props>()
|
||||||
|
|
||||||
|
const cellValue = getCellValue(props.row, props.field, props.column, props.index)
|
||||||
|
|
||||||
|
const displayIps = computed(() => {
|
||||||
|
if (!cellValue || !Array.isArray(cellValue)) return []
|
||||||
|
return cellValue.map((item) => (typeof item === 'string' ? item : item?.value ?? '')).filter(Boolean)
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.ba-ip-white-display {
|
||||||
|
white-space: pre-line;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
.ba-ip-white-line {
|
||||||
|
margin: 2px 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
15
web/src/lang/backend/en/channel/manage.ts
Normal file
15
web/src/lang/backend/en/channel/manage.ts
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
export default {
|
||||||
|
id: 'id',
|
||||||
|
name: 'name',
|
||||||
|
ip_white: 'ip_white',
|
||||||
|
ip_placeholder: 'Please enter IP address',
|
||||||
|
whitelist: 'Whitelist',
|
||||||
|
title: 'title',
|
||||||
|
remark: 'remark',
|
||||||
|
admin_id: 'admin_id',
|
||||||
|
admin__username: 'username',
|
||||||
|
secret: 'secret',
|
||||||
|
create_time: 'create_time',
|
||||||
|
update_time: 'update_time',
|
||||||
|
'quick Search Fields': 'id',
|
||||||
|
}
|
||||||
15
web/src/lang/backend/zh-cn/channel/manage.ts
Normal file
15
web/src/lang/backend/zh-cn/channel/manage.ts
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
export default {
|
||||||
|
id: 'ID',
|
||||||
|
name: '渠道名',
|
||||||
|
ip_white: 'IP白名单',
|
||||||
|
ip_placeholder: '请输入IP地址',
|
||||||
|
whitelist: '白名单',
|
||||||
|
title: '标题',
|
||||||
|
remark: '备注',
|
||||||
|
admin_id: '管理员',
|
||||||
|
admin__username: '用户名',
|
||||||
|
secret: '密钥',
|
||||||
|
create_time: '创建时间',
|
||||||
|
update_time: '修改时间',
|
||||||
|
'quick Search Fields': 'ID',
|
||||||
|
}
|
||||||
182
web/src/views/backend/channel/manage/index.vue
Normal file
182
web/src/views/backend/channel/manage/index.vue
Normal file
@@ -0,0 +1,182 @@
|
|||||||
|
<template>
|
||||||
|
<div class="default-main ba-table-box">
|
||||||
|
<el-alert class="ba-table-alert" v-if="baTable.table.remark" :title="baTable.table.remark" type="info" show-icon />
|
||||||
|
|
||||||
|
<!-- 表格顶部菜单 -->
|
||||||
|
<!-- 自定义按钮请使用插槽，甚至公共搜索也可以使用具名插槽渲染，参见文档 -->
|
||||||
|
<TableHeader
|
||||||
|
:buttons="['refresh', 'add', 'edit', 'delete', 'comSearch', 'quickSearch', 'columnDisplay']"
|
||||||
|
:quick-search-placeholder="t('Quick search placeholder', { fields: t('channel.manage.quick Search Fields') })"
|
||||||
|
></TableHeader>
|
||||||
|
|
||||||
|
<!-- 表格 -->
|
||||||
|
<!-- 表格列有多种自定义渲染方式，比如自定义组件、具名插槽等，参见文档 -->
|
||||||
|
<!-- 要使用 el-table 组件原有的属性，直接加在 Table 标签上即可 -->
|
||||||
|
<Table ref="tableRef"></Table>
|
||||||
|
|
||||||
|
<!-- 表单 -->
|
||||||
|
<PopupForm />
|
||||||
|
<!-- 白名单弹窗 -->
|
||||||
|
<WhitelistPopup v-model:row="whitelistRow" @saved="baTable.getData()" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { onMounted, provide, ref, useTemplateRef } from 'vue'
|
||||||
|
import { useI18n } from 'vue-i18n'
|
||||||
|
import PopupForm from './popupForm.vue'
|
||||||
|
import WhitelistPopup from './whitelistPopup.vue'
|
||||||
|
import { baTableApi } from '/@/api/common'
|
||||||
|
import { defaultOptButtons } from '/@/components/table'
|
||||||
|
import TableHeader from '/@/components/table/header/index.vue'
|
||||||
|
import Table from '/@/components/table/index.vue'
|
||||||
|
import baTableClass from '/@/utils/baTable'
|
||||||
|
|
||||||
|
defineOptions({
|
||||||
|
name: 'channel/manage',
|
||||||
|
})
|
||||||
|
|
||||||
|
const { t } = useI18n()
|
||||||
|
const tableRef = useTemplateRef('tableRef')
|
||||||
|
const whitelistRow = ref<TableRow | null>(null)
|
||||||
|
|
||||||
|
function openWhitelistDialog(row: TableRow) {
|
||||||
|
whitelistRow.value = row
|
||||||
|
}
|
||||||
|
|
||||||
|
const optButtons: OptButton[] = [
|
||||||
|
...defaultOptButtons(['edit', 'delete']),
|
||||||
|
{
|
||||||
|
render: 'tipButton',
|
||||||
|
name: 'whitelist',
|
||||||
|
title: 'channel.manage.whitelist',
|
||||||
|
text: '',
|
||||||
|
type: 'success',
|
||||||
|
icon: 'fa fa-list',
|
||||||
|
class: 'table-row-whitelist',
|
||||||
|
disabledTip: false,
|
||||||
|
display: (_row, _field) => baTable.auth('whitelist'),
|
||||||
|
click: (row: TableRow) => openWhitelistDialog(row),
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
/**
|
||||||
|
* baTable 内包含了表格的所有数据且数据具备响应性，然后通过 provide 注入给了后代组件
|
||||||
|
*/
|
||||||
|
const baTable = new baTableClass(
|
||||||
|
new baTableApi('/admin/channel.Manage/'),
|
||||||
|
{
|
||||||
|
pk: 'id',
|
||||||
|
column: [
|
||||||
|
{ type: 'selection', align: 'center', operator: false },
|
||||||
|
{ label: t('channel.manage.id'), prop: 'id', align: 'center', width: 70, operator: 'RANGE', sortable: 'custom' },
|
||||||
|
{
|
||||||
|
label: t('channel.manage.name'),
|
||||||
|
prop: 'name',
|
||||||
|
align: 'center',
|
||||||
|
operatorPlaceholder: t('Fuzzy query'),
|
||||||
|
sortable: false,
|
||||||
|
operator: 'LIKE',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: t('channel.manage.title'),
|
||||||
|
prop: 'title',
|
||||||
|
align: 'center',
|
||||||
|
operatorPlaceholder: t('Fuzzy query'),
|
||||||
|
sortable: false,
|
||||||
|
operator: 'LIKE',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: t('channel.manage.admin__username'),
|
||||||
|
prop: 'admin.username',
|
||||||
|
align: 'center',
|
||||||
|
operatorPlaceholder: t('Fuzzy query'),
|
||||||
|
render: 'tags',
|
||||||
|
operator: 'LIKE',
|
||||||
|
comSearchRender: 'string',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: t('channel.manage.secret'),
|
||||||
|
prop: 'secret',
|
||||||
|
align: 'center',
|
||||||
|
operatorPlaceholder: t('Fuzzy query'),
|
||||||
|
sortable: false,
|
||||||
|
operator: 'LIKE',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: t('channel.manage.remark'),
|
||||||
|
prop: 'remark',
|
||||||
|
align: 'center',
|
||||||
|
minWidth: '100',
|
||||||
|
showOverflowTooltip: true,
|
||||||
|
operatorPlaceholder: t('Fuzzy query'),
|
||||||
|
sortable: false,
|
||||||
|
operator: 'LIKE',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: t('channel.manage.ip_white'),
|
||||||
|
prop: 'ip_white',
|
||||||
|
align: 'center',
|
||||||
|
minWidth: '120',
|
||||||
|
render: 'tags',
|
||||||
|
operatorPlaceholder: t('Fuzzy query'),
|
||||||
|
sortable: false,
|
||||||
|
operator: 'LIKE',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: t('channel.manage.create_time'),
|
||||||
|
prop: 'create_time',
|
||||||
|
align: 'center',
|
||||||
|
render: 'datetime',
|
||||||
|
operator: 'RANGE',
|
||||||
|
comSearchRender: 'datetime',
|
||||||
|
sortable: 'custom',
|
||||||
|
width: 160,
|
||||||
|
timeFormat: 'yyyy-mm-dd hh:MM:ss',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: t('channel.manage.update_time'),
|
||||||
|
prop: 'update_time',
|
||||||
|
align: 'center',
|
||||||
|
render: 'datetime',
|
||||||
|
operator: 'RANGE',
|
||||||
|
comSearchRender: 'datetime',
|
||||||
|
sortable: 'custom',
|
||||||
|
width: 160,
|
||||||
|
timeFormat: 'yyyy-mm-dd hh:MM:ss',
|
||||||
|
},
|
||||||
|
{ label: t('Operate'), align: 'center', width: 130, render: 'buttons', buttons: optButtons, operator: false },
|
||||||
|
],
|
||||||
|
dblClickNotEditColumn: [undefined],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
defaultItems: { ip_white: [] },
|
||||||
|
before: {
|
||||||
|
onSubmit: () => {
|
||||||
|
const items = baTable.form.items
|
||||||
|
if (!items) return
|
||||||
|
// 从 popupForm 的 ipWhiteList 同步到 form.items（避免 watch 循环）
|
||||||
|
const ipWhiteRef = baTable.form.extend?.ipWhiteListRef
|
||||||
|
if (ipWhiteRef?.value) {
|
||||||
|
items.ip_white = ipWhiteRef.value.filter((ip: string) => ip && String(ip).trim() !== '')
|
||||||
|
} else if (Array.isArray(items.ip_white)) {
|
||||||
|
items.ip_white = items.ip_white.filter((ip: string) => ip && String(ip).trim() !== '')
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
provide('baTable', baTable)
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
baTable.table.ref = tableRef.value
|
||||||
|
baTable.mount()
|
||||||
|
baTable.getData()?.then(() => {
|
||||||
|
baTable.initSort()
|
||||||
|
baTable.dragSort()
|
||||||
|
})
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss"></style>
|
||||||
154
web/src/views/backend/channel/manage/popupForm.vue
Normal file
154
web/src/views/backend/channel/manage/popupForm.vue
Normal file
@@ -0,0 +1,154 @@
|
|||||||
|
<template>
|
||||||
|
<!-- 对话框表单 -->
|
||||||
|
<!-- 建议使用 Prettier 格式化代码 -->
|
||||||
|
<!-- el-form 内可以混用 el-form-item、FormItem、ba-input 等输入组件 -->
|
||||||
|
<el-dialog
|
||||||
|
class="ba-operate-dialog"
|
||||||
|
:close-on-click-modal="false"
|
||||||
|
:model-value="['Add', 'Edit'].includes(baTable.form.operate!)"
|
||||||
|
@close="baTable.toggleForm"
|
||||||
|
>
|
||||||
|
<template #header>
|
||||||
|
<div class="title" v-drag="['.ba-operate-dialog', '.el-dialog__header']" v-zoom="'.ba-operate-dialog'">
|
||||||
|
{{ baTable.form.operate ? t(baTable.form.operate) : '' }}
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<el-scrollbar v-loading="baTable.form.loading" class="ba-table-form-scrollbar">
|
||||||
|
<div
|
||||||
|
class="ba-operate-form"
|
||||||
|
:class="'ba-' + baTable.form.operate + '-form'"
|
||||||
|
:style="config.layout.shrink ? '' : 'width: calc(100% - ' + baTable.form.labelWidth! / 2 + 'px)'"
|
||||||
|
>
|
||||||
|
<el-form
|
||||||
|
v-if="!baTable.form.loading"
|
||||||
|
ref="formRef"
|
||||||
|
@submit.prevent=""
|
||||||
|
@keyup.enter="baTable.onSubmit(formRef)"
|
||||||
|
:model="baTable.form.items"
|
||||||
|
:label-position="config.layout.shrink ? 'top' : 'right'"
|
||||||
|
:label-width="baTable.form.labelWidth + 'px'"
|
||||||
|
:rules="rules"
|
||||||
|
>
|
||||||
|
<FormItem
|
||||||
|
:label="t('channel.manage.name')"
|
||||||
|
type="string"
|
||||||
|
v-model="baTable.form.items!.name"
|
||||||
|
prop="name"
|
||||||
|
:placeholder="t('Please input field', { field: t('channel.manage.name') })"
|
||||||
|
/>
|
||||||
|
<el-form-item :label="t('channel.manage.ip_white')" prop="ip_white">
|
||||||
|
<div class="ba-ip-white-list">
|
||||||
|
<div class="ba-ip-white-item" v-for="(ip, idx) in ipWhiteList" :key="idx">
|
||||||
|
<el-input v-model="ipWhiteList[idx]" :placeholder="t('channel.manage.ip_placeholder')" clearable />
|
||||||
|
<el-button @click="onDelIpWhite(idx)" size="small" icon="el-icon-Delete" circle />
|
||||||
|
</div>
|
||||||
|
<el-button v-blur class="ba-add-ip-white" @click="onAddIpWhite" icon="el-icon-Plus">{{ t('Add') }}</el-button>
|
||||||
|
</div>
|
||||||
|
</el-form-item>
|
||||||
|
<FormItem
|
||||||
|
:label="t('channel.manage.title')"
|
||||||
|
type="string"
|
||||||
|
v-model="baTable.form.items!.title"
|
||||||
|
prop="title"
|
||||||
|
:placeholder="t('Please input field', { field: t('channel.manage.title') })"
|
||||||
|
/>
|
||||||
|
<FormItem
|
||||||
|
:label="t('channel.manage.remark')"
|
||||||
|
type="textarea"
|
||||||
|
v-model="baTable.form.items!.remark"
|
||||||
|
prop="remark"
|
||||||
|
:input-attr="{ rows: 3 }"
|
||||||
|
@keyup.enter.stop=""
|
||||||
|
@keyup.ctrl.enter="baTable.onSubmit(formRef)"
|
||||||
|
:placeholder="t('Please input field', { field: t('channel.manage.remark') })"
|
||||||
|
/>
|
||||||
|
<FormItem
|
||||||
|
:label="t('channel.manage.admin_id')"
|
||||||
|
type="remoteSelect"
|
||||||
|
v-model="baTable.form.items!.admin_id"
|
||||||
|
prop="admin_id"
|
||||||
|
:input-attr="{ pk: 'admin.id', field: 'username', remoteUrl: '/admin/auth.Admin/index' }"
|
||||||
|
:placeholder="t('Please select field', { field: t('channel.manage.admin_id') })"
|
||||||
|
/>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
</el-scrollbar>
|
||||||
|
<template #footer>
|
||||||
|
<div :style="'width: calc(100% - ' + baTable.form.labelWidth! / 1.8 + 'px)'">
|
||||||
|
<el-button @click="baTable.toggleForm()">{{ t('Cancel') }}</el-button>
|
||||||
|
<el-button v-blur :loading="baTable.form.submitLoading" @click="baTable.onSubmit(formRef)" type="primary">
|
||||||
|
{{ baTable.form.operateIds && baTable.form.operateIds.length > 1 ? t('Save and edit next item') : t('Save') }}
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import type { FormItemRule } from 'element-plus'
|
||||||
|
import { inject, reactive, ref, useTemplateRef, watch } from 'vue'
|
||||||
|
import { useI18n } from 'vue-i18n'
|
||||||
|
import FormItem from '/@/components/formItem/index.vue'
|
||||||
|
import { useConfig } from '/@/stores/config'
|
||||||
|
import type baTableClass from '/@/utils/baTable'
|
||||||
|
import { buildValidatorData } from '/@/utils/validate'
|
||||||
|
|
||||||
|
const config = useConfig()
|
||||||
|
const formRef = useTemplateRef('formRef')
|
||||||
|
const baTable = inject('baTable') as baTableClass
|
||||||
|
|
||||||
|
const { t } = useI18n()
|
||||||
|
|
||||||
|
/** 将后端数据转为 IP 字符串数组（兼容旧格式 [{key,value}] 和新格式 [ip]） */
|
||||||
|
function normalizeIpWhite(val: unknown): string[] {
|
||||||
|
if (!val || !Array.isArray(val)) return []
|
||||||
|
return val.map((item) => (typeof item === 'string' ? item : (item?.value ?? '')))
|
||||||
|
}
|
||||||
|
|
||||||
|
const ipWhiteList = ref<string[]>([])
|
||||||
|
|
||||||
|
// 仅当表单加载时从 form.items 同步到 ipWhiteList，避免双向 watch 导致循环更新
|
||||||
|
watch(
|
||||||
|
() => baTable.form.items?.ip_white,
|
||||||
|
(val) => {
|
||||||
|
ipWhiteList.value = normalizeIpWhite(val)
|
||||||
|
},
|
||||||
|
{ immediate: true }
|
||||||
|
)
|
||||||
|
|
||||||
|
const onAddIpWhite = () => {
|
||||||
|
ipWhiteList.value.push('')
|
||||||
|
}
|
||||||
|
|
||||||
|
const onDelIpWhite = (idx: number) => {
|
||||||
|
ipWhiteList.value.splice(idx, 1)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 将 ipWhiteList 暴露给 baTable，供提交时同步
|
||||||
|
if (!baTable.form.extend) baTable.form.extend = {}
|
||||||
|
baTable.form.extend.ipWhiteListRef = ipWhiteList
|
||||||
|
const rules: Partial<Record<string, FormItemRule[]>> = reactive({
|
||||||
|
name: [buildValidatorData({ name: 'required', title: t('channel.manage.name') })],
|
||||||
|
title: [buildValidatorData({ name: 'required', title: t('channel.manage.title') })],
|
||||||
|
admin_id: [buildValidatorData({ name: 'required', title: t('channel.manage.admin_id') })],
|
||||||
|
create_time: [buildValidatorData({ name: 'date', title: t('channel.manage.create_time') })],
|
||||||
|
update_time: [buildValidatorData({ name: 'date', title: t('channel.manage.update_time') })],
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.ba-ip-white-list {
|
||||||
|
.ba-ip-white-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
.el-input {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.ba-add-ip-white {
|
||||||
|
margin-top: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
107
web/src/views/backend/channel/manage/whitelistPopup.vue
Normal file
107
web/src/views/backend/channel/manage/whitelistPopup.vue
Normal file
@@ -0,0 +1,107 @@
|
|||||||
|
<template>
|
||||||
|
<el-dialog
|
||||||
|
class="ba-operate-dialog"
|
||||||
|
:close-on-click-modal="false"
|
||||||
|
:model-value="!!row"
|
||||||
|
:title="t('channel.manage.whitelist')"
|
||||||
|
@close="close"
|
||||||
|
>
|
||||||
|
<el-scrollbar v-loading="loading" class="ba-table-form-scrollbar">
|
||||||
|
<div class="ba-operate-form">
|
||||||
|
<div class="ba-ip-white-list">
|
||||||
|
<div class="ba-ip-white-item" v-for="(ip, idx) in ipWhiteList" :key="idx">
|
||||||
|
<el-input v-model="ipWhiteList[idx]" :placeholder="t('channel.manage.ip_placeholder')" clearable />
|
||||||
|
<el-button @click="onDelIpWhite(idx)" size="small" icon="el-icon-Delete" circle />
|
||||||
|
</div>
|
||||||
|
<el-button v-blur class="ba-add-ip-white" @click="onAddIpWhite" icon="el-icon-Plus">{{ t('Add') }}</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-scrollbar>
|
||||||
|
<template #footer>
|
||||||
|
<el-button @click="close">{{ t('Cancel') }}</el-button>
|
||||||
|
<el-button v-blur :loading="submitLoading" @click="onSave" type="primary">{{ t('Save') }}</el-button>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, watch } from 'vue'
|
||||||
|
import { useI18n } from 'vue-i18n'
|
||||||
|
import { baTableApi } from '/@/api/common'
|
||||||
|
|
||||||
|
const { t } = useI18n()
|
||||||
|
|
||||||
|
const props = defineProps<{
|
||||||
|
row: TableRow | null
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const emit = defineEmits<{
|
||||||
|
(e: 'update:row', val: TableRow | null): void
|
||||||
|
(e: 'saved'): void
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const api = new baTableApi('/admin/channel.Manage/')
|
||||||
|
const loading = ref(false)
|
||||||
|
const submitLoading = ref(false)
|
||||||
|
|
||||||
|
/** 将后端数据转为 IP 字符串数组（兼容旧格式 [{key,value}] 和新格式 [ip]） */
|
||||||
|
function normalizeIpWhite(val: unknown): string[] {
|
||||||
|
if (!val || !Array.isArray(val)) return []
|
||||||
|
return val.map((item) => (typeof item === 'string' ? item : item?.value ?? ''))
|
||||||
|
}
|
||||||
|
|
||||||
|
const ipWhiteList = ref<string[]>([])
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => props.row,
|
||||||
|
(val) => {
|
||||||
|
ipWhiteList.value = val ? normalizeIpWhite(val.ip_white) : []
|
||||||
|
},
|
||||||
|
{ immediate: true }
|
||||||
|
)
|
||||||
|
|
||||||
|
const onAddIpWhite = () => {
|
||||||
|
ipWhiteList.value.push('')
|
||||||
|
}
|
||||||
|
|
||||||
|
const onDelIpWhite = (idx: number) => {
|
||||||
|
ipWhiteList.value.splice(idx, 1)
|
||||||
|
}
|
||||||
|
|
||||||
|
const close = () => {
|
||||||
|
emit('update:row', null)
|
||||||
|
}
|
||||||
|
|
||||||
|
const onSave = async () => {
|
||||||
|
if (!props.row) return
|
||||||
|
const ips = ipWhiteList.value.filter((ip) => ip.trim() !== '')
|
||||||
|
submitLoading.value = true
|
||||||
|
try {
|
||||||
|
await api.postData('edit', {
|
||||||
|
id: props.row.id,
|
||||||
|
ip_white: ips,
|
||||||
|
})
|
||||||
|
emit('saved')
|
||||||
|
close()
|
||||||
|
} finally {
|
||||||
|
submitLoading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.ba-ip-white-list {
|
||||||
|
.ba-ip-white-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
.el-input {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.ba-add-ip-white {
|
||||||
|
margin-top: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user