fix: 去掉expand列改用表格下方独立编辑区域
This commit is contained in:
mediabot-pt
@@ -24,54 +24,40 @@
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column type="expand" width="1" class-name="expand-hide">
|
||||
<template #default="s" v-if="editType===s.row.siteType">
|
||||
<div style="padding:12px 0">
|
||||
<div style="margin-bottom:8px;display:flex;gap:8px">
|
||||
<el-radio-group v-model="editorMode" size="small">
|
||||
<el-radio-button label="table">表格</el-radio-button>
|
||||
<el-radio-button label="json">JSON</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<template v-if="editorMode==='table'">
|
||||
<el-table :data="editingRules" stripe size="small" style="margin-bottom:8px">
|
||||
<el-table-column prop="type" label="类型" width="90">
|
||||
<template #default="e"><el-select v-model="e.row.type" size="small"><el-option v-for="x in ['KILL','TRAFFIC','RATIO','LOGIN','HD']" :key="x" :label="x" :value="x"/></el-select></template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="名称" min-width="160">
|
||||
<template #default="e"><el-input v-model="e.row.name" size="small"/></template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="metric" label="指标" width="130">
|
||||
<template #default="e"><el-input v-model="e.row.metric" size="small"/></template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="threshold" label="阈值" width="70">
|
||||
<template #default="e"><el-input v-model.number="e.row.threshold" size="small" type="number"/></template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="unit" label="单位" width="60">
|
||||
<template #default="e"><el-input v-model="e.row.unit" size="small"/></template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="condition" label="条件" width="70">
|
||||
<template #default="e"><el-select v-model="e.row.condition" size="small"><el-option v-for="x in ['GT','LT','GTE','LTE']" :key="x" :label="x" :value="x"/></el-select></template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="level" label="级别" width="80">
|
||||
<template #default="e"><el-select v-model="e.row.level" size="small"><el-option v-for="x in ['CRITICAL','WARN','INFO']" :key="x" :label="x" :value="x"/></el-select></template>
|
||||
</el-table-column>
|
||||
<el-table-column label="" width="50"><template #default="e"><el-button size="small" type="danger" text @click="editingRules.splice(e.$index,1)">×</el-button></template></el-table-column>
|
||||
</el-table>
|
||||
<el-button size="small" @click="editingRules.push({type:'TRAFFIC',name:'',metric:'',threshold:0,unit:'DAY',condition:'GT',level:'WARN'})">+ 添加</el-button>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div style="height:300px;border-radius:4px;overflow:hidden;margin-bottom:8px">
|
||||
<CodeEditor v-model="editorJson" language="json" />
|
||||
</div>
|
||||
</template>
|
||||
<div style="margin-top:8px">
|
||||
<el-button size="small" type="primary" @click="saveRules" :loading="saving">保存</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
</el-table>
|
||||
|
||||
<div v-if="editType" style="margin-top:16px;padding:12px;background:#fafafa;border-radius:4px">
|
||||
<div style="margin-bottom:8px;display:flex;gap:8px;align-items:center">
|
||||
<strong>编辑: {{ editType }}</strong>
|
||||
<el-radio-group v-model="editorMode" size="small">
|
||||
<el-radio-button label="table">表格</el-radio-button>
|
||||
<el-radio-button label="json">JSON</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<template v-if="editorMode==='table'">
|
||||
<el-table :data="editingRules" stripe size="small" style="margin-bottom:8px">
|
||||
<el-table-column prop="type" label="类型" width="90">
|
||||
<template #default="e"><el-select v-model="e.row.type" size="small"><el-option v-for="x in ['KILL','TRAFFIC','RATIO','LOGIN','HD']" :key="x" :label="x" :value="x"/></el-select></template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="名称" min-width="160"><template #default="e"><el-input v-model="e.row.name" size="small"/></template></el-table-column>
|
||||
<el-table-column prop="metric" label="指标" width="130"><template #default="e"><el-input v-model="e.row.metric" size="small"/></template></el-table-column>
|
||||
<el-table-column prop="threshold" label="阈值" width="70"><template #default="e"><el-input v-model.number="e.row.threshold" size="small" type="number"/></template></el-table-column>
|
||||
<el-table-column prop="unit" label="单位" width="60"><template #default="e"><el-input v-model="e.row.unit" size="small"/></template></el-table-column>
|
||||
<el-table-column prop="condition" label="条件" width="70"><template #default="e"><el-select v-model="e.row.condition" size="small"><el-option v-for="x in ['GT','LT','GTE','LTE']" :key="x" :label="x" :value="x"/></el-select></template></el-table-column>
|
||||
<el-table-column prop="level" label="级别" width="80"><template #default="e"><el-select v-model="e.row.level" size="small"><el-option v-for="x in ['CRITICAL','WARN','INFO']" :key="x" :label="x" :value="x"/></el-select></template></el-table-column>
|
||||
<el-table-column label="" width="50"><template #default="e"><el-button size="small" type="danger" text @click="editingRules.splice(e.$index,1)">×</el-button></template></el-table-column>
|
||||
</el-table>
|
||||
<el-button size="small" @click="editingRules.push({type:'TRAFFIC',name:'',metric:'',threshold:0,unit:'DAY',condition:'GT',level:'WARN'})">+ 添加</el-button>
|
||||
</template>
|
||||
<div v-else style="height:300px;border-radius:4px;overflow:hidden;margin-bottom:8px">
|
||||
<CodeEditor v-model="editorJson" language="json" />
|
||||
</div>
|
||||
<div style="margin-top:8px;display:flex;gap:8px">
|
||||
<el-button size="small" type="primary" @click="saveRules" :loading="saving">保存</el-button>
|
||||
<el-button size="small" @click="editType=''">取消</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
@@ -141,6 +127,5 @@ const saveRules = async () => {
|
||||
onMounted(fetchAll)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.expand-hide :deep(.el-table__expand-column .cell) { display:none }
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
@@ -27,45 +27,35 @@
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column type="expand" width="1" class-name="expand-hide">
|
||||
<template #default="s" v-if="editSiteId===s.row.siteId">
|
||||
<div style="padding:12px 0">
|
||||
<div style="margin-bottom:8px;display:flex;gap:8px">
|
||||
<el-radio-group v-model="editorMode" size="small">
|
||||
<el-radio-button label="table">表格</el-radio-button>
|
||||
<el-radio-button label="json">JSON</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<template v-if="editorMode==='table'">
|
||||
<el-table :data="editingEntries" stripe size="small" style="margin-bottom:8px">
|
||||
<el-table-column prop="key" label="key" width="100">
|
||||
<template #default="e"><el-input v-model="e.row.key" size="small" /></template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="label" label="名称" width="100">
|
||||
<template #default="e"><el-input v-model="e.row.label" size="small" /></template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="url" label="URL" min-width="200">
|
||||
<template #default="e"><el-input v-model="e.row.url" size="small" /></template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="method" label="方法" width="80">
|
||||
<template #default="e"><el-select v-model="e.row.method" size="small"><el-option label="GET" value="GET"/><el-option label="POST" value="POST"/></el-select></template>
|
||||
</el-table-column>
|
||||
<el-table-column label="" width="50"><template #default="e"><el-button size="small" type="danger" text @click="editingEntries.splice(e.$index,1)">×</el-button></template></el-table-column>
|
||||
</el-table>
|
||||
<el-button size="small" @click="editingEntries.push({key:'',label:'',url:'{base}',method:'GET'})">+ 添加</el-button>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div style="height:300px;border-radius:4px;overflow:hidden;margin-bottom:8px">
|
||||
<CodeEditor v-model="editorJson" language="json" />
|
||||
</div>
|
||||
</template>
|
||||
<div style="margin-top:8px">
|
||||
<el-button size="small" type="primary" @click="savePages" :loading="saving">保存</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
</el-table>
|
||||
|
||||
<div v-if="editSiteId" style="margin-top:16px;padding:12px;background:#fafafa;border-radius:4px">
|
||||
<div style="margin-bottom:8px;display:flex;gap:8px;align-items:center">
|
||||
<strong>编辑: {{ editSiteId }}</strong>
|
||||
<el-radio-group v-model="editorMode" size="small">
|
||||
<el-radio-button label="table">表格</el-radio-button>
|
||||
<el-radio-button label="json">JSON</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<template v-if="editorMode==='table'">
|
||||
<el-table :data="editingEntries" stripe size="small" style="margin-bottom:8px">
|
||||
<el-table-column prop="key" label="key" width="100"><template #default="e"><el-input v-model="e.row.key" size="small"/></template></el-table-column>
|
||||
<el-table-column prop="label" label="名称" width="100"><template #default="e"><el-input v-model="e.row.label" size="small"/></template></el-table-column>
|
||||
<el-table-column prop="url" label="URL" min-width="200"><template #default="e"><el-input v-model="e.row.url" size="small"/></template></el-table-column>
|
||||
<el-table-column prop="method" label="方法" width="80"><template #default="e"><el-select v-model="e.row.method" size="small"><el-option label="GET" value="GET"/><el-option label="POST" value="POST"/></el-select></template></el-table-column>
|
||||
<el-table-column label="" width="50"><template #default="e"><el-button size="small" type="danger" text @click="editingEntries.splice(e.$index,1)">×</el-button></template></el-table-column>
|
||||
</el-table>
|
||||
<el-button size="small" @click="editingEntries.push({key:'',label:'',url:'{base}',method:'GET'})">+ 添加</el-button>
|
||||
</template>
|
||||
<div v-else style="height:300px;border-radius:4px;overflow:hidden;margin-bottom:8px">
|
||||
<CodeEditor v-model="editorJson" language="json" />
|
||||
</div>
|
||||
<div style="margin-top:8px;display:flex;gap:8px">
|
||||
<el-button size="small" type="primary" @click="savePages" :loading="saving">保存</el-button>
|
||||
<el-button size="small" @click="editSiteId=''">取消</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
@@ -136,6 +126,5 @@ const savePages = async () => {
|
||||
onMounted(fetchAll)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.expand-hide :deep(.el-table__expand-column .cell) { display:none }
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user