rcs-admin/src/views/OperatorView.vue

<template>
    <PagingTable url="/operator-config" :where="where" ref="table" :order="{ country: 'ASC' }">
        <template #filter>
            <ElButton :icon="Refresh" @click="table.refresh()"></ElButton>
            <ElInput
                v-model="country"
                placeholder="国家"
                clearable
                @input="updateWhereAndRefresh"
                style="width: 200px"
            />
            <ElSelect v-model="area" placeholder="区域" clearable @change="updateWhereAndRefresh">
                <ElOption v-for="area in areas" :key="area.value" :label="area.value" :value="area.value" />
            </ElSelect>
            <ElSelect v-model="enabled" placeholder="开关" clearable @change="updateWhereAndRefresh">
                <ElOption lable="开" value="开"></ElOption>
                <ElOption lable="关" value="关"></ElOption>
            </ElSelect>
            <ElButton
                :icon="Plus"
                @click="
                    onEdit({
                        matchers: [],
                        configOverrides: {}
                    })
                "
            >
                添加
            </ElButton>
        </template>
        <ElTableColumn prop="country" label="国家" />
        <ElTableColumn prop="areaCode" label="区号" />
        <ElTableColumn prop="remark" label="备注" />
        <ElTableColumn prop="area" label="区域" />
        <ElTableColumn prop="weighting" label="权重" align="center" width="100" />
        <ElTableColumn label="开关" align="center" width="100">
            <template #default="{ row }">
                <ElSwitch v-model="row.enabled" @change="toggleSwitch($event, row)" />
            </template>
        </ElTableColumn>
        <ElTableColumn label="操作" align="center" width="200">
            <template #default="{ row }">
                <ElButton type="primary" size="small" @click="onEdit(row)">编辑</ElButton>
                <ElButton type="danger" size="small" @click="del(row)">删除</ElButton>
            </template>
        </ElTableColumn>
    </PagingTable>
    <EditDialog
        v-model="showEditDialog"
        :model="model"
        :rules="rules"
        :on-submit="submit"
        @success="table.refresh()"
        width="900px"
        inline
        class="operator-edit-dialog pl-[32px]"
        :show-message="false"
        label-position="top"
    >
        <ElFormItem prop="enabled" label="开关">
            <ElSwitch v-model="model.enabled" />
        </ElFormItem>
        <ElFormItem prop="country" label="国家">
            <ElInput v-model="model.country" placeholder="请输入国家" />
        </ElFormItem>
        <ElFormItem prop="areaCode" label="区号">
            <ElInput v-model="model.areaCode" placeholder="请输入区号" />
        </ElFormItem>
        <ElFormItem prop="area" label="区域">
            <ElSelect v-model="model.area" placeholder="请选择区域" clearable>
                <ElOption v-for="area in areas" :key="area.value" :label="area.value" :value="area.value" />
            </ElSelect>
        </ElFormItem>
        <ElFormItem prop="weighting" label="权重">
            <ElInput v-model="model.weighting" placeholder="请输入权重(默认1)" />
        </ElFormItem>
        <ElFormItem prop="remark" label="备注">
            <ElInput v-model="model.remark" placeholder="请输入备注" />
        </ElFormItem>
        <ElFormItem prop="e2ee" label="端到端加密">
            <ElRadioGroup v-model="model.e2ee">
                <ElRadioButton label="无" :value="0" />
                <ElRadioButton label="优先" :value="1" />
                <ElRadioButton label="必须" :value="2" />
            </ElRadioGroup>
        </ElFormItem>
        <ElFormItem prop="matchers" label="匹配规则" class="!w-full">
            <div
                v-for="(matcher, i) in model.matchers"
                :key="i"
                class="matcher-item w-full mb-4 bg-neutral-100 dark:bg-neutral-900 p-3 rounded-lg"
            >
                <ElForm
                    :model="matcher"
                    label-position="right"
                    label-width="80px"
                    ref="matcherForm"
                    :rules="matcherRule"
                    :show-message="false"
                >
                    <ElFormItem prop="match" label="MCCMNC">
                        <div class="flex">
                            <EnumSelect v-model="matcher.matchType" :enum="MatcherType" />
                            <ElInput v-model="matcher.match" placeholder="请输入匹配值" class="ml-3 flex-1" />
                        </div>
                    </ElFormItem>

                    <div class="flex items-start">
                        <ElFormItem prop="mapTo" label="映射为">
                            <div class="flex">
                                <ElInput v-model="matcher.mapTo.mcc" placeholder="MCC" class="!w-[100px]" />
                                <ElInput v-model="matcher.mapTo.mnc" placeholder="MNC" class="!w-[100px] ml-2" />
                            </div>
                        </ElFormItem>
                        <ElFormItem prop="remark" label="备注" class="ml-3 flex-1">
                            <ElInput v-model="matcher.remark" placeholder="请输入备注" class="" />
                        </ElFormItem>
                        <ElFormItem prop="enabled" label="开关" class="ml-3">
                            <ElSwitch v-model="matcher.enabled" />
                        </ElFormItem>
                        <ElFormItem label="删除" class="ml-3">
                            <div class="h-[32px] flex items-center">
                                <ElButton @click="delMatcher(i)" size="small" :icon="Trash" circle></ElButton>
                            </div>
                        </ElFormItem>
                    </div>
                </ElForm>
            </div>
            <ElButton type="primary" @click="addMatcher" size="small">添加</ElButton>
        </ElFormItem>
        <ElDivider class="!mr-[32px]">自动分配设备</ElDivider>
        <ElFormItem prop="assignDevices" label="最小任务数量" label-position="top">
            <ElInputNumber
                v-model="model.minTaskNum"
                placeholder="请输入最小任务数量"
                controls-position="right"
                :min="0"
                class="!w-full"
            />
        </ElFormItem>
        <ElFormItem prop="minTaskNum" label="分配设备数量" label-position="top">
            <ElInputNumber
                v-model="model.assignDevices"
                placeholder="请输入分配设备数量"
                controls-position="right"
                :min="0"
                class="!w-full"
            />
        </ElFormItem>
        <ElFormItem prop="configOverrides" label="配置覆盖" class="!w-full">
            <div class="matcher-item w-full mb-4 bg-neutral-100 dark:bg-neutral-900 p-3 rounded-lg">
                <ElForm :model="model.configOverrides" label-position="top" inline>
                    <ElFormItem prop="singleQty" label="单发数量">
                        <ElInputNumber
                            controls-position="right"
                            v-model="model.configOverrides.singleQty"
                            placeholder="请输入单发数量"
                            :min="1"
                            class="!w-[200px]"
                        />
                    </ElFormItem>
                    <ElFormItem prop="groupQty" label="群发数量">
                        <ElInputNumber
                            controls-position="right"
                            v-model="model.configOverrides.groupQty"
                            placeholder="请输入群发数量"
                            :min="1"
                            class="!w-[200px] ml-3"
                        />
                    </ElFormItem>
                </ElForm>
            </div>
        </ElFormItem>
    </EditDialog>
</template>
<script setup>
import { ref } from 'vue'
import PagingTable from '@/components/PagingTable.vue'
import { useTimeFormatter } from '@/utils/formatter'
import { Plus, Refresh, Trash } from '@vicons/tabler'
import EditDialog from '@/components/EditDialog.vue'
import { setupEditDialog } from '@/utils/editDialog'
import EnumSelect from '@/components/EnumSelect.vue'
import { UserRole } from '@/enums'
import { http } from '@/plugins/http'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useClipboard } from '@vueuse/core'
import { MatcherType } from '@/enums'

const where = ref({})
const timeFormatter = useTimeFormatter()
const table = ref(null)
const model = ref({})
const matcherForm = ref([])
const rules = {
    country: [{ required: true, message: '请输入国家码', trigger: 'blur' }],
    areaCode: [{ required: true, message: '请输入区号', trigger: 'blur' }],
    weighting: [{ required: true, message: '请输入权重', trigger: 'blur' }],
    area: [{ required: true, message: '请选择区域', trigger: 'blur' }],
    matchers: [
        {
            validator: async (rule, value, callback) => {
                if (value.length === 0) {
                    callback(new Error('请添加匹配规则'))
                } else {
                    console.log(matcherForm.value)
                    try {
                        await Promise.all(matcherForm.value.map((form) => form.validate()))
                        callback()
                    } catch (e) {
                        callback(new Error('请检查匹配规则'))
                    }
                }
            },
            trigger: 'blur'
        }
    ]
}
const matcherRule = {
    match: [{ required: true, message: '请输入匹配值', trigger: 'blur' }],
    mapTo: [
        { required: true, message: '请输入映射值', trigger: 'blur' },
        {
            validator: (rule, value, callback) => {
                if (!value.mcc) {
                    callback(new Error('请输入MCC'))
                } else if (!value.mnc) {
                    callback(new Error('请输入MNC'))
                } else {
                    callback()
                }
            },
            trigger: 'blur'
        }
    ]
}
const platformList = [
    {
        value: 'mwze167'
    },
    {
        value: 'durian'
    }
]
const country = ref(null)
const area = ref(null)
const enabled = ref(null)
const areas = [
    {
        value: '欧洲'
    },
    {
        value: '北美洲'
    },
    {
        value: '中美洲'
    },
    {
        value: '南美洲'
    },
    {
        value: '非洲'
    },
    {
        value: '中东'
    },
    {
        value: '亚洲'
    },
    {
        value: '东南亚'
    },
    {
        value: '大洋洲'
    },
    {
        value: '阿拉伯半岛'
    },
    {
        value: '加勒比海'
    },
    {
        value: '太平洋'
    }
]

function updateWhereAndRefresh() {
    where.value = {}
    if (area.value) {
        where.value.area = area.value
    } else {
        where.value.area = null
    }
    if (country.value) {
        where.value.country = country.value
    } else {
        where.value.country = null
    }
    if (enabled.value === '开') {
        where.value.enabled = true
    } else if (enabled.value === '关') {
        where.value.enabled = false
    } else {
        where.value.enabled = null
    }
}

const { showEditDialog, onEdit } = setupEditDialog(model)

async function submit() {
    await http.put('/operator-config', model.value)
    ElMessage.success('保存成功')
}

function del(row) {
    ElMessageBox.confirm('确定删除吗？', '提示', {
        type: 'warning'
    }).then(() => {
        http.delete(`/operator-config/${row.country}`).then(() => {
            ElMessage.success('删除成功')
            table.value.refresh()
        })
    })
}

async function toggleSwitch(value, row) {
    row.enabled = value
    await http.put('/operator-config', row)
}

function addMatcher() {
    model.value.matchers = model.value.matchers || []
    model.value.matchers.push({
        match: '',
        matchType: 'equal',
        mapTo: {
            mcc: '',
            mnc: ''
        },
        remark: '',
        weighting: 1,
        enabled: true
    })
}

function delMatcher(index) {
    model.value.matchers.splice(index, 1)
}
</script>
<style lang="less">
.matcher-item {
    .el-select {
        width: 100px;
    }

    .el-form-item {
        margin-right: 0;
    }
}
.operator-edit-dialog {
    > .el-form-item {
        width: calc(33.3% - 32px);
    }
}
.el-form-item--label-top {
    .el-form-item__label {
        font-size: 12px;
        opacity: 0.8;
        margin-bottom: 4px;
    }
}
</style>