parent
568c8e8b30
commit
b8d2cad598
@ -0,0 +1,674 @@ |
||||
<template> |
||||
<div v-loading="loading"> |
||||
<el-descriptions direction="vertical" border :column="6"> |
||||
<template #title> |
||||
<el-button |
||||
type="primary" |
||||
link |
||||
:icon="Grid" |
||||
:disabled="prop.devId === 0" |
||||
@click="advanceQuery('AlgQuery')" |
||||
>ALG功能开启 |
||||
</el-button> |
||||
</template> |
||||
<el-descriptions-item |
||||
label="H323开关" |
||||
label-align="center" |
||||
align="center" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
> |
||||
{{ enableEnum(alg["serviceList"]) }} |
||||
</el-descriptions-item> |
||||
<el-descriptions-item |
||||
label=" SIP开关" |
||||
label-align="center" |
||||
align="center" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
> |
||||
{{ enableEnum(alg["SIPEnable"]) }} |
||||
</el-descriptions-item> |
||||
<el-descriptions-item |
||||
label=" RTSP开关" |
||||
label-align="center" |
||||
align="center" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
>{{ enableEnum(alg["RTSPEnable"]) }} |
||||
</el-descriptions-item> |
||||
<el-descriptions-item |
||||
label="L2TP开关" |
||||
label-align="center" |
||||
align="center" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
> |
||||
{{ enableEnum(alg["L2TPEnable"]) }} |
||||
</el-descriptions-item> |
||||
<el-descriptions-item |
||||
label="IPSEC开关" |
||||
label-align="center" |
||||
align="center" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
> |
||||
{{ enableEnum(alg["IPSECEnable"]) }} |
||||
</el-descriptions-item> |
||||
<el-descriptions-item |
||||
label="ALG操作" |
||||
label-align="center" |
||||
align="center" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
> |
||||
<el-button |
||||
type="primary" |
||||
link |
||||
:icon="Edit" |
||||
@click="openAlgForm" |
||||
v-if="alg['state'] === '2' && alg['state'] != undefined" |
||||
>修改</el-button |
||||
> |
||||
</el-descriptions-item> |
||||
<el-descriptions-item |
||||
label-align="center" |
||||
align="left" |
||||
label-class-name="my-label-none" |
||||
class-name="my-content" |
||||
width="150px" |
||||
v-if="alg['state'] != '2' && alg['state'] != undefined" |
||||
> |
||||
<div style="color: red; padding: 0 8px; font-size: 10px"> |
||||
错误信息：{{ alg["result"] }} |
||||
</div> |
||||
</el-descriptions-item> |
||||
</el-descriptions> |
||||
<el-descriptions direction="vertical" border :column="12"> |
||||
<template #title> |
||||
<el-button |
||||
type="primary" |
||||
link |
||||
:icon="Grid" |
||||
:disabled="prop.devId === 0" |
||||
@click="advanceQuery('WLanInfoQuery')" |
||||
>WLAN详细信息 |
||||
</el-button> |
||||
</template> |
||||
<el-descriptions-item |
||||
label="SSID名称" |
||||
label-align="center" |
||||
align="center" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="240px" |
||||
> |
||||
<div v-if="wlan['SSID'] != undefined"> |
||||
<div |
||||
:style=" |
||||
index != wlan['SSID'].split(':').length - 1 |
||||
? 'border-bottom: var(--el-descriptions-table-border)' |
||||
: '' |
||||
" |
||||
v-for="(item, index) in wlan['SSID'].split(':')" |
||||
:key="index" |
||||
> |
||||
{{ item }} |
||||
</div> |
||||
</div> |
||||
</el-descriptions-item> |
||||
<el-descriptions-item |
||||
label="功率级别" |
||||
label-align="center" |
||||
align="center" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
> |
||||
<div v-if="wlan['Signal'] != undefined"> |
||||
<div |
||||
:style=" |
||||
index != wlan['Signal'].split(':').length - 1 |
||||
? 'border-bottom: var(--el-descriptions-table-border)' |
||||
: '' |
||||
" |
||||
v-for="(item, index) in wlan['Signal'].split(':')" |
||||
:key="index" |
||||
> |
||||
{{ item }} |
||||
</div> |
||||
</div> |
||||
</el-descriptions-item> |
||||
<el-descriptions-item |
||||
label="隐藏/广播" |
||||
label-align="center" |
||||
align="center" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
> |
||||
<div v-if="wlan['SSIDHide'] != undefined"> |
||||
<div |
||||
:style=" |
||||
index != wlan['SSIDHide'].split(':').length - 1 |
||||
? 'border-bottom: var(--el-descriptions-table-border)' |
||||
: '' |
||||
" |
||||
v-for="(item, index) in wlan['SSIDHide'].split(':')" |
||||
:key="index" |
||||
> |
||||
{{ SSSIdHide(item) }} |
||||
</div> |
||||
</div> |
||||
</el-descriptions-item> |
||||
<el-descriptions-item |
||||
label="WLAN开关" |
||||
label-align="center" |
||||
align="center" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
> |
||||
<div v-if="wlan['APModuleEnable'] != undefined"> |
||||
<div |
||||
:style=" |
||||
index != wlan['APModuleEnable'].split(':').length - 1 |
||||
? 'border-bottom: var(--el-descriptions-table-border)' |
||||
: '' |
||||
" |
||||
v-for="(item, index) in wlan['APModuleEnable'].split(':')" |
||||
:key="index" |
||||
> |
||||
{{ SSSIdStatus(item) }} |
||||
</div> |
||||
</div> |
||||
</el-descriptions-item> |
||||
<el-descriptions-item |
||||
label="加密方式" |
||||
label-align="center" |
||||
align="center" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
> |
||||
<div v-if="wlan['BeaconType'] != undefined"> |
||||
<div |
||||
:style=" |
||||
index != wlan['BeaconType'].split(':').length - 1 |
||||
? 'border-bottom: var(--el-descriptions-table-border)' |
||||
: '' |
||||
" |
||||
v-for="(item, index) in wlan['BeaconType'].split(':')" |
||||
:key="index" |
||||
> |
||||
{{ item }} |
||||
</div> |
||||
</div> |
||||
</el-descriptions-item> |
||||
<el-descriptions-item |
||||
label="认证方式" |
||||
label-align="center" |
||||
align="center" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
> |
||||
<div v-if="wlan['WEPAuthenticationMode'] != undefined"> |
||||
<div |
||||
:style=" |
||||
index != wlan['WEPAuthenticationMode'].split(':').length - 1 |
||||
? 'border-bottom: var(--el-descriptions-table-border)' |
||||
: '' |
||||
" |
||||
v-for="(item, index) in wlan['WEPAuthenticationMode'].split(':')" |
||||
:key="index" |
||||
> |
||||
{{ item }} |
||||
</div> |
||||
</div> |
||||
</el-descriptions-item> |
||||
<el-descriptions-item |
||||
label=" WPS关键字" |
||||
label-align="center" |
||||
align="center" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
> |
||||
<div v-if="wlan['KeyWord'] != undefined"> |
||||
<div |
||||
:style=" |
||||
index != wlan['KeyWord'].split(':').length - 1 |
||||
? 'border-bottom: var(--el-descriptions-table-border)' |
||||
: '' |
||||
" |
||||
v-for="(item, index) in wlan['KeyWord'].split(':')" |
||||
:key="index" |
||||
> |
||||
{{ item }} |
||||
</div> |
||||
</div> |
||||
</el-descriptions-item> |
||||
<el-descriptions-item |
||||
label="信道" |
||||
label-align="center" |
||||
align="center" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
> |
||||
<div v-if="wlan['ChannelsInUse'] != undefined"> |
||||
<div |
||||
:style=" |
||||
index != wlan['ChannelsInUse'].split(':').length - 1 |
||||
? 'border-bottom: var(--el-descriptions-table-border)' |
||||
: '' |
||||
" |
||||
v-for="(item, index) in wlan['ChannelsInUse'].split(':')" |
||||
:key="index" |
||||
> |
||||
{{ item }} |
||||
</div> |
||||
</div> |
||||
</el-descriptions-item> |
||||
<el-descriptions-item |
||||
label="当前功率(dBm)" |
||||
label-align="center" |
||||
align="center" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="180px" |
||||
> |
||||
<div v-if="wlan['PowerValue'] != undefined"> |
||||
<div |
||||
:style=" |
||||
index != wlan['PowerValue'].split(':').length - 1 |
||||
? 'border-bottom: var(--el-descriptions-table-border)' |
||||
: '' |
||||
" |
||||
v-for="(item, index) in wlan['PowerValue'].split(':')" |
||||
:key="index" |
||||
> |
||||
{{ item }} |
||||
</div> |
||||
</div> |
||||
</el-descriptions-item> |
||||
<el-descriptions-item |
||||
label="SSID开关" |
||||
label-align="center" |
||||
align="center" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
> |
||||
<div v-if="wlan['Status'] != undefined"> |
||||
<div |
||||
:style=" |
||||
index != wlan['Status'].split(':').length - 1 |
||||
? 'border-bottom: var(--el-descriptions-table-border)' |
||||
: '' |
||||
" |
||||
v-for="(item, index) in wlan['Status'].split(':')" |
||||
:key="index" |
||||
> |
||||
{{ SSSIdStatus(item) }} |
||||
</div> |
||||
</div> |
||||
</el-descriptions-item> |
||||
<el-descriptions-item |
||||
label="操作" |
||||
label-align="center" |
||||
align="center" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
> |
||||
<div v-if="wlan['SSID'] != undefined"> |
||||
<div |
||||
:style=" |
||||
index != wlan['SSID'].split(':').length - 1 |
||||
? 'border-bottom: var(--el-descriptions-table-border)' |
||||
: '' |
||||
" |
||||
v-for="(item, index) in wlan['SSID'].split(':')" |
||||
:key="index" |
||||
> |
||||
<el-button type="primary" link :icon="Edit">无线设置</el-button> |
||||
</div> |
||||
</div> |
||||
</el-descriptions-item> |
||||
<el-descriptions-item |
||||
label="隐藏广播" |
||||
label-align="center" |
||||
align="center" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
> |
||||
<div v-if="wlan['SSID'] != undefined"> |
||||
<div |
||||
:style=" |
||||
index != wlan['SSID'].split(':').length - 1 |
||||
? 'border-bottom: var(--el-descriptions-table-border)' |
||||
: '' |
||||
" |
||||
v-for="(item, index) in wlan['SSID'].split(':')" |
||||
:key="index" |
||||
> |
||||
<el-button type="primary" link :icon="Edit">隐藏广播</el-button> |
||||
</div> |
||||
</div> |
||||
</el-descriptions-item> |
||||
<el-descriptions-item |
||||
label-align="center" |
||||
align="left" |
||||
label-class-name="my-label-none" |
||||
class-name="my-content" |
||||
width="150px" |
||||
v-if="wlan['state'] != '2' && wlan['state'] != undefined" |
||||
> |
||||
<div style="color: red; padding: 0 8px; font-size: 10px"> |
||||
错误信息：{{ wlan["result"] }} |
||||
</div> |
||||
</el-descriptions-item> |
||||
</el-descriptions> |
||||
<el-descriptions direction="vertical" border :column="2"> |
||||
<template #title> |
||||
<el-button |
||||
type="primary" |
||||
link |
||||
:icon="Grid" |
||||
:disabled="prop.devId === 0" |
||||
@click="advanceQuery('CpeNumberQuery')" |
||||
>终端上网查询 |
||||
</el-button> |
||||
</template> |
||||
<el-descriptions-item |
||||
label="上网数目" |
||||
label-align="center" |
||||
align="center" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
> |
||||
{{ cpe["TotalTerminalNumber"] }} |
||||
</el-descriptions-item> |
||||
<el-descriptions-item |
||||
label="上网操作" |
||||
label-align="center" |
||||
align="center" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
> |
||||
<el-button |
||||
type="primary" |
||||
link |
||||
:icon="Edit" |
||||
@click="openCpe" |
||||
v-if="cpe['state'] === '2' && cpe['state'] != undefined" |
||||
>修改</el-button |
||||
> |
||||
</el-descriptions-item> |
||||
<el-descriptions-item |
||||
label-align="center" |
||||
align="left" |
||||
label-class-name="my-label-none" |
||||
class-name="my-content" |
||||
width="150px" |
||||
v-if="alg['state'] != '2' && alg['state'] != undefined" |
||||
> |
||||
<div style="color: red; padding: 0 8px; font-size: 10px"> |
||||
错误信息：{{ alg["result"] }} |
||||
</div> |
||||
</el-descriptions-item> |
||||
</el-descriptions> |
||||
</div> |
||||
<el-dialog v-model="algFlag" class="com-dialog" title="修改ALG"> |
||||
<el-form :model="algForm" ref="algFormRef" v-loading="algFormLoading"> |
||||
<el-row :gutter="24"> |
||||
<el-col :span="12"> |
||||
<el-form-item label="H323开关" prop="h323Enable"> |
||||
<el-select v-model="algForm.h323Enable"> |
||||
<el-option |
||||
v-for="(item, index) in algOption" |
||||
:label="item.label" |
||||
:value="item.value" |
||||
:key="index" |
||||
/> |
||||
</el-select> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item label="SIP开关" prop="sIPEnable"> |
||||
<el-select v-model="algForm.sIPEnable"> |
||||
<el-option |
||||
v-for="(item, index) in algOption" |
||||
:label="item.label" |
||||
:value="item.value" |
||||
:key="index" |
||||
/> |
||||
</el-select> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row :gutter="24"> |
||||
<el-col :span="12"> |
||||
<el-form-item label="RTSP开关" prop="rTSPEnable"> |
||||
<el-select v-model="algForm.rTSPEnable"> |
||||
<el-option |
||||
v-for="(item, index) in algOption" |
||||
:label="item.label" |
||||
:value="item.value" |
||||
:key="index" |
||||
/> |
||||
</el-select> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item label="L2TP开关" prop="l2TPEnable"> |
||||
<el-select v-model="algForm.l2TPEnable"> |
||||
<el-option |
||||
v-for="(item, index) in algOption" |
||||
:label="item.label" |
||||
:value="item.value" |
||||
:key="index" |
||||
/> |
||||
</el-select> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row :gutter="24"> |
||||
<el-col :span="24"> |
||||
<el-form-item label="IPSEC开关" prop="iPSECEnable"> |
||||
<el-select v-model="algForm.iPSECEnable"> |
||||
<el-option |
||||
v-for="(item, index) in algOption" |
||||
:label="item.label" |
||||
:value="item.value" |
||||
:key="index" |
||||
/> |
||||
</el-select> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
</el-form> |
||||
<template #footer> |
||||
<el-button type="primary" @click="algSubmit">确定</el-button> |
||||
<el-button @click="algFlag = false">取消</el-button> |
||||
</template> |
||||
</el-dialog> |
||||
<el-dialog class="com-dialog" title="终端上网修改" v-model="cpeFlag"> |
||||
<el-form :model="cpeForm" ref="cpeFormRef" v-loading="cpeFormLoading"> |
||||
<el-form-item |
||||
label="上网数目" |
||||
prop="cpeNum" |
||||
:rules="[ |
||||
{ required: true, message: '请输入上网数目' }, |
||||
{ type: 'number', message: '参数类型只能为整数类型' }, |
||||
]" |
||||
> |
||||
<el-input |
||||
v-model.number="cpeForm.cpeNum" |
||||
placeholder="请输入上网数目" |
||||
/> |
||||
</el-form-item> |
||||
</el-form> |
||||
<template #footer> |
||||
<el-button type="primary" @click="cpeSubmitForm(cpeFormRef)" |
||||
>确认</el-button |
||||
> |
||||
<el-button @click="cpeFlag = false">取消</el-button> |
||||
</template> |
||||
</el-dialog> |
||||
</template> |
||||
|
||||
<script setup lang="ts"> |
||||
import { Edit, Grid } from "@element-plus/icons-vue"; |
||||
import { faultServiceStatus, updateAlg, updateCpe } from "@/api/fault"; |
||||
import { AlgForm, CpeForm } from "@/api/fault/types"; |
||||
import { FormInstance } from "element-plus"; |
||||
import { confirm } from "@/utils/confirm"; |
||||
|
||||
const prop = defineProps<{ |
||||
devId?: number; |
||||
}>(); |
||||
const loading = ref<boolean>(false); |
||||
const alg = ref<any>({}); |
||||
const wlan = ref<any>({}); |
||||
const cpe = ref<any>({}); |
||||
const algFlag = ref<boolean>(false); |
||||
const algForm = ref<AlgForm>({}); |
||||
const algFormRef = ref<FormInstance>(); |
||||
const algFormLoading = ref<boolean>(false); |
||||
const algOption = ref<OptionType[]>([ |
||||
{ label: "开启", value: "true" }, |
||||
{ label: "关闭", value: "false" }, |
||||
]); |
||||
const cpeFlag = ref<boolean>(false); |
||||
const cpeForm = ref<CpeForm>({}); |
||||
const cpeFormRef = ref<FormInstance>(); |
||||
const cpeFormLoading = ref<boolean>(false); |
||||
const openAlgForm = () => { |
||||
resetForm(algFormRef.value); |
||||
algForm.value.h323Enable = alg.value["serviceList"]; |
||||
algForm.value.sIPEnable = alg.value["SIPEnable"]; |
||||
algForm.value.rTSPEnable = alg.value["RTSPEnable"]; |
||||
algForm.value.l2TPEnable = alg.value["L2TPEnable"]; |
||||
algForm.value.iPSECEnable = alg.value["IPSECEnable"]; |
||||
algFlag.value = true; |
||||
}; |
||||
const openCpe = () => { |
||||
resetForm(cpeFormRef.value); |
||||
cpeForm.value.cpeNum = parseInt(cpe.value["TotalTerminalNumber"]); |
||||
cpeFlag.value = true; |
||||
}; |
||||
const resetForm = (formEl: FormInstance | undefined) => { |
||||
if (!formEl) return; |
||||
formEl.resetFields(); |
||||
}; |
||||
const algSubmit = () => { |
||||
confirm("确定修改ALG吗?", () => { |
||||
algFormLoading.value = true; |
||||
console.log(algForm.value); |
||||
updateAlg(algForm.value, prop.devId) |
||||
.then(() => { |
||||
ElMessage.success({ duration: 1000, message: "操作成功" }); |
||||
}) |
||||
.finally(() => { |
||||
algFormLoading.value = false; |
||||
}); |
||||
}); |
||||
}; |
||||
const cpeSubmitForm = (formEl: FormInstance | undefined) => { |
||||
if (!formEl) return; |
||||
formEl.validate((valid) => { |
||||
if (valid) { |
||||
confirm("确认修改吗？", () => { |
||||
cpeFormLoading.value = true; |
||||
updateCpe(cpeForm.value, prop.devId) |
||||
.then(() => { |
||||
ElMessage.success({ duration: 1000, message: "操作成功" }); |
||||
cpeFlag.value = false; |
||||
}) |
||||
.finally(() => { |
||||
cpeFormLoading.value = false; |
||||
}); |
||||
}); |
||||
} else { |
||||
console.log("error"); |
||||
} |
||||
}); |
||||
}; |
||||
function enableEnum(str?: string) { |
||||
if (str) { |
||||
switch (str) { |
||||
case "true": |
||||
return "开启"; |
||||
case "false": |
||||
return "关闭"; |
||||
} |
||||
} |
||||
} |
||||
function SSSIdHide(str?: string) { |
||||
if (str) { |
||||
switch (str) { |
||||
case "1": |
||||
return "隐藏"; |
||||
default: |
||||
return "广播"; |
||||
} |
||||
} |
||||
} |
||||
function SSSIdStatus(str?: string) { |
||||
if (str) { |
||||
switch (str) { |
||||
case "true": |
||||
return "开启"; |
||||
case "1": |
||||
return "开启"; |
||||
default: |
||||
return "关闭"; |
||||
} |
||||
} |
||||
} |
||||
const advanceQuery = (remote: string) => { |
||||
loading.value = true; |
||||
faultServiceStatus(prop.devId, remote) |
||||
.then(({ data }) => { |
||||
switch (remote) { |
||||
case "AlgQuery": |
||||
alg.value = data; |
||||
break; |
||||
case "WLanInfoQuery": |
||||
wlan.value = data; |
||||
break; |
||||
case "CpeNumberQuery": |
||||
cpe.value = data; |
||||
break; |
||||
} |
||||
}) |
||||
.finally(() => { |
||||
loading.value = false; |
||||
}); |
||||
}; |
||||
</script> |
||||
|
||||
<style scoped> |
||||
:deep(.my-content) { |
||||
height: 32px; |
||||
} |
||||
:deep( |
||||
.el-descriptions__body |
||||
.el-descriptions__table.is-bordered |
||||
.el-descriptions__cell |
||||
) { |
||||
padding: 8px 0; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,120 @@ |
||||
<template> |
||||
<el-card shadow="never"> |
||||
<template #header> |
||||
<div class="flex justify-between"> |
||||
<div style="display: flex; align-items: center"> |
||||
<el-icon size="15"> <Grid /> </el-icon> <span |
||||
style="font-weight: 500; font-size: 14px; line-height: 16px" |
||||
>专家库列表</span |
||||
> |
||||
</div> |
||||
<div> |
||||
<el-button |
||||
type="primary" |
||||
:icon="Plus" |
||||
@click="openExpertLibForm('新增专家库', undefined)" |
||||
>新增</el-button |
||||
> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
<div class="any-table"> |
||||
<el-table :data="tableData" border v-loading="loading"> |
||||
<el-table-column label="原因码" align="center" prop="expertSuggestId" /> |
||||
<el-table-column |
||||
label="故障描述" |
||||
align="center" |
||||
prop="expertSuggestText" |
||||
/> |
||||
<el-table-column |
||||
label="分析和建议" |
||||
align="center" |
||||
prop="expertSuggestDesc" |
||||
/> |
||||
<el-table-column label="操作" align="center"> |
||||
<template #default="scope"> |
||||
<el-button |
||||
link |
||||
type="primary" |
||||
:icon="Edit" |
||||
@click=" |
||||
openExpertLibForm('专家库修改', scope.row.expertSuggestId) |
||||
" |
||||
> |
||||
修改 |
||||
</el-button> |
||||
<el-button |
||||
link |
||||
type="danger" |
||||
:icon="Delete" |
||||
@click="handleDelete(scope.row.expertSuggestId)" |
||||
>删除</el-button |
||||
> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
<pagination |
||||
v-if="total > 0" |
||||
v-model:total="total" |
||||
v-model:page="page.pageNum" |
||||
v-model:limit="page.pageSize" |
||||
@pagination="getData" |
||||
/> |
||||
</div> |
||||
</el-card> |
||||
<expert-lib-form ref="expertLibFormRef" @success="getData" /> |
||||
</template> |
||||
|
||||
<script setup lang="ts"> |
||||
import { Delete, Edit, Grid, Plus } from "@element-plus/icons-vue"; |
||||
import { ExpertLibVO } from "@/api/fault/types"; |
||||
import { deleteExpertLib, getExpertLibPage } from "@/api/fault"; |
||||
import { confirm } from "@/utils/confirm"; |
||||
import ExpertLibForm from "@/views/family/operate/fault-management/components/ExpertLibForm.vue"; |
||||
|
||||
const tableData = ref<ExpertLibVO[]>([]); |
||||
const page = ref<PageQuery>({ |
||||
pageNum: 1, |
||||
pageSize: 10, |
||||
}); |
||||
const total = ref<number>(0); |
||||
const loading = ref<boolean>(false); |
||||
const expertLibFormRef = ref(); |
||||
const getData = () => { |
||||
loading.value = true; |
||||
getExpertLibPage(page.value) |
||||
.then(({ data }) => { |
||||
tableData.value = data.list; |
||||
total.value = data.total; |
||||
}) |
||||
.finally(() => { |
||||
loading.value = false; |
||||
}); |
||||
}; |
||||
const handleDelete = (code?: string) => { |
||||
confirm("确定删除吗", () => { |
||||
loading.value = true; |
||||
deleteExpertLib(code) |
||||
.then(() => { |
||||
ElMessage.success({ |
||||
message: "操作成功", |
||||
duration: 1000, |
||||
onClose: () => { |
||||
getData(); |
||||
}, |
||||
}); |
||||
}) |
||||
.finally(() => { |
||||
loading.value = false; |
||||
}); |
||||
}); |
||||
}; |
||||
const openExpertLibForm = (title: string, code?: string) => { |
||||
expertLibFormRef.value.openExpert(title, code); |
||||
}; |
||||
onMounted(() => { |
||||
getData(); |
||||
}); |
||||
</script> |
||||
|
||||
<style scoped></style> |
||||
@ -0,0 +1,119 @@ |
||||
<template> |
||||
<el-dialog class="com-dialog" :title="title" v-model="expertLibFormFlag"> |
||||
<el-form |
||||
:model="formData" |
||||
ref="ruleFormRef" |
||||
:rules="rules" |
||||
v-loading="loading" |
||||
label-position="top" |
||||
> |
||||
<el-form-item label="故障描述" prop="expertSuggestText"> |
||||
<el-input |
||||
v-model="formData.expertSuggestText" |
||||
type="textarea" |
||||
placeholder="请输入故障描述" |
||||
/> |
||||
</el-form-item> |
||||
|
||||
<el-form-item label="分析和建议" prop="expertSuggestDesc"> |
||||
<el-input |
||||
v-model="formData.expertSuggestDesc" |
||||
type="textarea" |
||||
placeholder="请输入分析和建议" |
||||
/> |
||||
</el-form-item> |
||||
</el-form> |
||||
<template #footer> |
||||
<el-button type="primary" @click="submitForm(ruleFormRef)" |
||||
>确定</el-button |
||||
> |
||||
<el-button @click="expertLibFormFlag = false">取消</el-button> |
||||
</template> |
||||
</el-dialog> |
||||
</template> |
||||
|
||||
<script setup lang="ts"> |
||||
import { ExpertLibForm } from "@/api/fault/types"; |
||||
import { FormInstance, FormRules } from "element-plus"; |
||||
import { addExpertLib, getExpertLib, updateExpertLib } from "@/api/fault"; |
||||
|
||||
const expertLibFormFlag = ref<boolean>(false); |
||||
const title = ref<string>(); |
||||
const loading = ref<boolean>(false); |
||||
const formData = ref<ExpertLibForm>({}); |
||||
const ruleFormRef = ref<FormInstance>(); |
||||
const rules = reactive<FormRules<ExpertLibForm>>({ |
||||
expertSuggestDesc: [ |
||||
{ required: true, message: "请输入分析和建议", trigger: "blur" }, |
||||
], |
||||
expertSuggestText: [ |
||||
{ required: true, message: "请输入故障描述", trigger: "blur" }, |
||||
], |
||||
}); |
||||
const openExpert = (title_: string, code_?: string) => { |
||||
resetForm(ruleFormRef.value); |
||||
formData.value = {}; |
||||
title.value = title_; |
||||
if (code_) { |
||||
loading.value = true; |
||||
getExpertLib(code_) |
||||
.then(({ data }) => { |
||||
formData.value = data; |
||||
}) |
||||
.finally(() => { |
||||
loading.value = false; |
||||
}); |
||||
} |
||||
expertLibFormFlag.value = true; |
||||
}; |
||||
defineExpose({ openExpert }); |
||||
const resetForm = (formEl: FormInstance | undefined) => { |
||||
if (!formEl) return; |
||||
formEl.resetFields(); |
||||
}; |
||||
const emit = defineEmits(["success"]); |
||||
const submitForm = async (formEl: FormInstance | undefined) => { |
||||
if (!formEl) return; |
||||
await formEl.validate((valid, fields) => { |
||||
if (valid) { |
||||
loading.value = true; |
||||
let code = formData.value.expertSuggestId; |
||||
if (code) { |
||||
updateExpertLib(formData.value) |
||||
.then(() => { |
||||
ElMessage.success({ |
||||
message: "操作成功", |
||||
duration: 1000, |
||||
onClose: () => { |
||||
emit("success"); |
||||
expertLibFormFlag.value = false; |
||||
}, |
||||
}); |
||||
}) |
||||
.finally(() => { |
||||
loading.value = false; |
||||
}); |
||||
} else { |
||||
addExpertLib(formData.value) |
||||
.then(() => { |
||||
ElMessage.success({ |
||||
message: "操作成功", |
||||
duration: 1000, |
||||
onClose: () => { |
||||
emit("success"); |
||||
expertLibFormFlag.value = false; |
||||
}, |
||||
}); |
||||
}) |
||||
.finally(() => { |
||||
loading.value = false; |
||||
}); |
||||
} |
||||
} else { |
||||
console.log("error submit!", fields); |
||||
} |
||||
}); |
||||
}; |
||||
</script> |
||||
|
||||
<style scoped></style> |
||||
Loading…
Reference in new issue