|
@@ -1,5 +1,5 @@
|
|
|
<template>
|
|
<template>
|
|
|
- <PagingTable url="/device" :where="where" ref="table">
|
|
|
|
|
|
|
+ <PagingTable url="/device" :where="where" ref="table" @row-click="rowClick">
|
|
|
<template #filter>
|
|
<template #filter>
|
|
|
<ElButton :icon="Refresh" @click="table.refresh()"></ElButton>
|
|
<ElButton :icon="Refresh" @click="table.refresh()"></ElButton>
|
|
|
<ElSelect v-model="online" placeholder="在线状态" clearable @change="updateWhereAndRefresh">
|
|
<ElSelect v-model="online" placeholder="在线状态" clearable @change="updateWhereAndRefresh">
|
|
@@ -11,54 +11,64 @@
|
|
|
<ElSelect v-model="busy" placeholder="忙碌状态" clearable @change="updateWhereAndRefresh">
|
|
<ElSelect v-model="busy" placeholder="忙碌状态" clearable @change="updateWhereAndRefresh">
|
|
|
<ElOption v-for="status in busyStatus" :key="status.id" :label="status.label" :value="status.id" />
|
|
<ElOption v-for="status in busyStatus" :key="status.id" :label="status.label" :value="status.id" />
|
|
|
</ElSelect>
|
|
</ElSelect>
|
|
|
|
|
+ <ElButton type="primary" @click="setCountry">固定国家</ElButton>
|
|
|
</template>
|
|
</template>
|
|
|
|
|
+ <ElTableColumn type="selection" width="55" />
|
|
|
<ElTableColumn prop="id" label="#" width="200" />
|
|
<ElTableColumn prop="id" label="#" width="200" />
|
|
|
<ElTableColumn prop="model" label="型号" />
|
|
<ElTableColumn prop="model" label="型号" />
|
|
|
- <ElTableColumn prop="name" label="编号" />
|
|
|
|
|
- <ElTableColumn prop="online" label="在线" align="center">
|
|
|
|
|
|
|
+ <ElTableColumn prop="name" label="编号" sortable/>
|
|
|
|
|
+ <ElTableColumn prop="online" label="在线" width="80" align="center">
|
|
|
<template #default="{ row }">
|
|
<template #default="{ row }">
|
|
|
<ElTag type="success" v-if="row.online">在线</ElTag>
|
|
<ElTag type="success" v-if="row.online">在线</ElTag>
|
|
|
<ElTag type="info" v-else>离线</ElTag>
|
|
<ElTag type="info" v-else>离线</ElTag>
|
|
|
</template>
|
|
</template>
|
|
|
</ElTableColumn>
|
|
</ElTableColumn>
|
|
|
- <ElTableColumn prop="canSend" label="可以发送" align="center">
|
|
|
|
|
|
|
+ <ElTableColumn prop="canSend" label="可以发送" width="80" align="center">
|
|
|
<template #default="{ row }">
|
|
<template #default="{ row }">
|
|
|
<ElTag type="success" v-if="row.canSend">是</ElTag>
|
|
<ElTag type="success" v-if="row.canSend">是</ElTag>
|
|
|
<ElTag type="info" v-else>否</ElTag>
|
|
<ElTag type="info" v-else>否</ElTag>
|
|
|
</template>
|
|
</template>
|
|
|
</ElTableColumn>
|
|
</ElTableColumn>
|
|
|
- <ElTableColumn prop="busy" label="忙碌" align="center">
|
|
|
|
|
|
|
+ <ElTableColumn prop="busy" label="忙碌" width="80" align="center">
|
|
|
<template #default="{ row }">
|
|
<template #default="{ row }">
|
|
|
<ElTag type="success" v-if="row.busy">忙碌</ElTag>
|
|
<ElTag type="success" v-if="row.busy">忙碌</ElTag>
|
|
|
<ElTag type="info" v-else>空闲</ElTag>
|
|
<ElTag type="info" v-else>空闲</ElTag>
|
|
|
</template>
|
|
</template>
|
|
|
</ElTableColumn>
|
|
</ElTableColumn>
|
|
|
<ElTableColumn prop="createdAt" label="创建时间" :formatter="timeFormatter" width="150" />
|
|
<ElTableColumn prop="createdAt" label="创建时间" :formatter="timeFormatter" width="150" />
|
|
|
- <ElTableColumn label="操作" align="center" width="100">
|
|
|
|
|
|
|
+ <ElTableColumn prop="pinCountry" label="国家" width="80" sortable/>
|
|
|
|
|
+ <ElTableColumn label="操作" align="center" width="180">
|
|
|
<template #default="{ row }">
|
|
<template #default="{ row }">
|
|
|
<ElButton type="danger" size="small" @click="del(row)">删除</ElButton>
|
|
<ElButton type="danger" size="small" @click="del(row)">删除</ElButton>
|
|
|
|
|
+ <ElButton type="primary" size="small" @click="onEdit(row)">编辑</ElButton>
|
|
|
</template>
|
|
</template>
|
|
|
</ElTableColumn>
|
|
</ElTableColumn>
|
|
|
</PagingTable>
|
|
</PagingTable>
|
|
|
|
|
+ <EditDialog v-model="showEditDialog" :model="model" :rules="rules" :on-submit="submit" @success="table.refresh()">
|
|
|
|
|
+ <ElFormItem prop="pinCountry" label="国家">
|
|
|
|
|
+ <ElSelect v-model="model.pinCountry" placeholder="请输入国家" clearable>
|
|
|
|
|
+ <ElOption v-for="i in counties" :key="i" :label="i" :value="i" />
|
|
|
|
|
+ </ElSelect>
|
|
|
|
|
+ </ElFormItem>
|
|
|
|
|
+ <ElFormItem prop="clashProfile" label="配置文件">
|
|
|
|
|
+ <ElInput v-model="model.clashProfile" placeholder="配置文件" type="textarea" :rows="20" />
|
|
|
|
|
+ </ElFormItem>
|
|
|
|
|
+ </EditDialog>
|
|
|
</template>
|
|
</template>
|
|
|
<script setup>
|
|
<script setup>
|
|
|
-import { ref } from 'vue'
|
|
|
|
|
|
|
+import { ref, h, onMounted } from 'vue'
|
|
|
import PagingTable from '@/components/PagingTable.vue'
|
|
import PagingTable from '@/components/PagingTable.vue'
|
|
|
import { useTimeFormatter } from '@/utils/formatter'
|
|
import { useTimeFormatter } from '@/utils/formatter'
|
|
|
import { Refresh } from '@vicons/tabler'
|
|
import { Refresh } from '@vicons/tabler'
|
|
|
-import { setupEditDialog } from '@/utils/editDialog'
|
|
|
|
|
-import { ElMessageBox, ElMessage } from 'element-plus'
|
|
|
|
|
|
|
+import { ElMessageBox, ElMessage, ElButton, ElSelect, ElFormItem } from 'element-plus'
|
|
|
import { http } from '@/plugins/http'
|
|
import { http } from '@/plugins/http'
|
|
|
|
|
+import { setupEditDialog } from '@/utils/editDialog'
|
|
|
|
|
|
|
|
const where = ref({})
|
|
const where = ref({})
|
|
|
const timeFormatter = useTimeFormatter()
|
|
const timeFormatter = useTimeFormatter()
|
|
|
const table = ref(null)
|
|
const table = ref(null)
|
|
|
const model = ref({})
|
|
const model = ref({})
|
|
|
-const rules = {
|
|
|
|
|
- name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
|
|
|
|
|
- listId: [{ required: true, message: '请选择发送列表', trigger: 'blur' }]
|
|
|
|
|
-}
|
|
|
|
|
-const { showEditDialog, onEdit } = setupEditDialog(model)
|
|
|
|
|
|
|
+const rules = {}
|
|
|
const online = ref('')
|
|
const online = ref('')
|
|
|
const onlineStatus = [
|
|
const onlineStatus = [
|
|
|
{
|
|
{
|
|
@@ -93,6 +103,11 @@ const busyStatus = [
|
|
|
}
|
|
}
|
|
|
]
|
|
]
|
|
|
|
|
|
|
|
|
|
+const { showEditDialog, onEdit } = setupEditDialog(model)
|
|
|
|
|
+function submit() {
|
|
|
|
|
+ return http.post(`/device/${model.value.id}`, model.value)
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
function updateWhereAndRefresh() {
|
|
function updateWhereAndRefresh() {
|
|
|
where.value = {}
|
|
where.value = {}
|
|
|
if (online.value) {
|
|
if (online.value) {
|
|
@@ -118,4 +133,43 @@ async function del(row) {
|
|
|
ElMessage.error(e.message || '删除失败')
|
|
ElMessage.error(e.message || '删除失败')
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
+function rowClick(row, column) {
|
|
|
|
|
+ table.value.tableEl.toggleRowSelection(row, undefined)
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+const counties = ref([])
|
|
|
|
|
+onMounted(async () => {
|
|
|
|
|
+ counties.value = (await http.post('/operator-config', { page: { page: 1, limit: 1000 } })).items
|
|
|
|
|
+ .map((i) => i.country)
|
|
|
|
|
+ .sort()
|
|
|
|
|
+})
|
|
|
|
|
+
|
|
|
|
|
+async function setCountry() {
|
|
|
|
|
+ const country = ref(null)
|
|
|
|
|
+ await ElMessageBox({
|
|
|
|
|
+ title: '固定国家',
|
|
|
|
|
+ message: () =>
|
|
|
|
|
+ h(
|
|
|
|
|
+ ElSelect,
|
|
|
|
|
+ {
|
|
|
|
|
+ filterable: true,
|
|
|
|
|
+ clearable: true,
|
|
|
|
|
+ modelValue: country.value,
|
|
|
|
|
+ 'onUpdate:modelValue': (val) => {
|
|
|
|
|
+ country.value = val
|
|
|
|
|
+ },
|
|
|
|
|
+ style: {
|
|
|
|
|
+ width: '250px'
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ () => counties.value.map((i) => h(ElOption, { label: i, value: i }))
|
|
|
|
|
+ )
|
|
|
|
|
+ })
|
|
|
|
|
+ await http.post('/device/pinCountry', {
|
|
|
|
|
+ ids: table.value.tableEl.getSelectionRows().map((i) => i.id),
|
|
|
|
|
+ country: country.value || ''
|
|
|
|
|
+ })
|
|
|
|
|
+ ElMessage.success('保存成功')
|
|
|
|
|
+ table.value.refresh()
|
|
|
|
|
+}
|
|
|
</script>
|
|
</script>
|