parent
e96f84d7f9
commit
cedd31e556
@ -0,0 +1,122 @@ |
|||||||
|
<template> |
||||||
|
<el-dialog |
||||||
|
class="com-dialog" |
||||||
|
v-model="pluginFileFlag" |
||||||
|
align-center |
||||||
|
title="plugIn文件信息" |
||||||
|
> |
||||||
|
<el-form |
||||||
|
ref="addPluginFileRef" |
||||||
|
v-loading="loading" |
||||||
|
:rules="rules" |
||||||
|
:model="formData" |
||||||
|
> |
||||||
|
<el-row :gutter="20"> |
||||||
|
<el-col :span="12"> |
||||||
|
<el-form-item label="文件名称" prop="fileName"> |
||||||
|
<el-input v-model="formData.fileName" /> |
||||||
|
</el-form-item> |
||||||
|
</el-col> |
||||||
|
<el-col :span="12"> |
||||||
|
<el-form-item label="文件描述信息"> |
||||||
|
<el-input v-model="formData.fileDesc" type="textarea" :rows="1" /> |
||||||
|
</el-form-item> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
<el-upload |
||||||
|
drag |
||||||
|
action="#" |
||||||
|
:limit="1" |
||||||
|
:auto-upload="false" |
||||||
|
v-model:file-list="fileList" |
||||||
|
> |
||||||
|
<el-icon class="el-icon--upload"><upload-filled /></el-icon> |
||||||
|
<div class="el-upload__text">拖拽上传 或 <em>点击上传</em></div> |
||||||
|
</el-upload> |
||||||
|
</el-form> |
||||||
|
<template #footer> |
||||||
|
<el-button type="primary" @click="handleUpload(addPluginFileRef)" |
||||||
|
>保存</el-button |
||||||
|
> |
||||||
|
<el-button @click="pluginFileFlag = false">取消</el-button> |
||||||
|
</template> |
||||||
|
</el-dialog> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script setup lang="ts"> |
||||||
|
import { UploadFilled } from "@element-plus/icons-vue"; |
||||||
|
import { VendorProfile } from "@/api/file/types"; |
||||||
|
import { FormInstance, FormRules, UploadUserFile } from "element-plus"; |
||||||
|
import { uploadApi } from "@/api/file"; |
||||||
|
import { addVendorProfile } from "@/api/device-type-ver"; |
||||||
|
import { BusinessFile, BusinessForm } from "@/api/service/types"; |
||||||
|
import { addBusinessFile, editBusiness } from "@/api/service"; |
||||||
|
|
||||||
|
const loading = ref<boolean>(false); |
||||||
|
const pluginFileFlag = ref<boolean>(false); |
||||||
|
const addPluginFileRef = ref(); |
||||||
|
const fileList = ref<UploadUserFile[]>([]); |
||||||
|
const formData = ref<BusinessFile>({ |
||||||
|
fileType: "4", |
||||||
|
}); |
||||||
|
const businessForm = ref<BusinessForm>({}); |
||||||
|
const open = (servId_: number) => { |
||||||
|
businessForm.value.servId = servId_; |
||||||
|
resetForm(addPluginFileRef.value); |
||||||
|
fileList.value = []; |
||||||
|
pluginFileFlag.value = true; |
||||||
|
}; |
||||||
|
defineExpose({ open }); |
||||||
|
const rules = reactive<FormRules<VendorProfile>>({ |
||||||
|
fileName: [{ required: true, message: "请填写文件名称", trigger: "blur" }], |
||||||
|
}); |
||||||
|
const resetForm = (formEl: FormInstance | undefined) => { |
||||||
|
if (!formEl) return; |
||||||
|
formEl.resetFields(); |
||||||
|
}; |
||||||
|
const emit = defineEmits(["success"]); |
||||||
|
const submitFileRecord = async () => { |
||||||
|
await addBusinessFile(formData.value).then(({ data }) => { |
||||||
|
businessForm.value.pluginFileId = data; |
||||||
|
updateBusinessForm(); |
||||||
|
}); |
||||||
|
}; |
||||||
|
const updateBusinessForm = () => { |
||||||
|
editBusiness(businessForm.value).then(() => { |
||||||
|
emit("success"); |
||||||
|
pluginFileFlag.value = false; |
||||||
|
}); |
||||||
|
}; |
||||||
|
const handleUpload = async (formEl: FormInstance | undefined) => { |
||||||
|
if (fileList.value.length === 0) { |
||||||
|
ElMessage.error("请选择文件上传"); |
||||||
|
return; |
||||||
|
} |
||||||
|
if (!formEl) return; |
||||||
|
await formEl.validate((valid, fields) => { |
||||||
|
if (valid) { |
||||||
|
loading.value = true; |
||||||
|
const file = fileList.value[0].raw; |
||||||
|
const dotIndex: any = file?.name.lastIndexOf("."); |
||||||
|
if (dotIndex === -1) { |
||||||
|
ElMessage.error("文件没有后缀，无法上传"); |
||||||
|
return; |
||||||
|
} |
||||||
|
const fileName = formData.value.fileName; |
||||||
|
const fileType = formData.value.fileType; |
||||||
|
formData.value.fileName = |
||||||
|
fileName + "." + file?.name.substring(dotIndex + 1); |
||||||
|
uploadApi(file, fileName, fileType) |
||||||
|
.then(({ data }) => { |
||||||
|
formData.value.fileUrl = data; |
||||||
|
submitFileRecord(); |
||||||
|
}) |
||||||
|
.finally(() => { |
||||||
|
loading.value = false; |
||||||
|
}); |
||||||
|
} |
||||||
|
}); |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped></style> |
||||||
@ -0,0 +1,394 @@ |
|||||||
|
<template> |
||||||
|
<div class="app-container"> |
||||||
|
<div class="search-container"> |
||||||
|
<div v-show="active === 0"> |
||||||
|
<el-form |
||||||
|
:model="businessForm" |
||||||
|
ref="businessFormRef" |
||||||
|
:rules="rules" |
||||||
|
v-loading="formLoading" |
||||||
|
style="margin-bottom: 10px" |
||||||
|
> |
||||||
|
<el-descriptions title="业务信息表单" :column="2" border> |
||||||
|
<template #extra v-if="businessForm.servId != undefined"> |
||||||
|
<div style="margin-right: 10px"> |
||||||
|
<el-button |
||||||
|
type="primary" |
||||||
|
@click="updateForm(businessFormRef)" |
||||||
|
plain |
||||||
|
:icon="Position" |
||||||
|
>保存</el-button |
||||||
|
> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<el-descriptions-item |
||||||
|
label="业务名称" |
||||||
|
label-align="left" |
||||||
|
align="center" |
||||||
|
label-class-name="my-label" |
||||||
|
class-name="my-content" |
||||||
|
width="180px" |
||||||
|
> |
||||||
|
<el-form-item style="margin-bottom: 0" prop="servName"> |
||||||
|
<el-input v-model="businessForm.servName" /> |
||||||
|
</el-form-item> |
||||||
|
</el-descriptions-item> |
||||||
|
<el-descriptions-item |
||||||
|
label="业务显示名称" |
||||||
|
label-align="left" |
||||||
|
align="center" |
||||||
|
label-class-name="my-label" |
||||||
|
class-name="my-content" |
||||||
|
width="180px" |
||||||
|
> |
||||||
|
<el-form-item style="margin-bottom: 0" prop="servDisplayName"> |
||||||
|
<el-input v-model="businessForm.servDisplayName" /> |
||||||
|
</el-form-item> |
||||||
|
</el-descriptions-item> |
||||||
|
<el-descriptions-item |
||||||
|
label="业务版本" |
||||||
|
label-align="left" |
||||||
|
align="center" |
||||||
|
label-class-name="my-label" |
||||||
|
class-name="my-content" |
||||||
|
width="180px" |
||||||
|
> |
||||||
|
<el-form-item style="margin-bottom: 0" prop="servVerName"> |
||||||
|
<el-input v-model="businessForm.servVerName" /> |
||||||
|
</el-form-item> |
||||||
|
</el-descriptions-item> |
||||||
|
<el-descriptions-item |
||||||
|
label="业务描述" |
||||||
|
label-align="left" |
||||||
|
align="center" |
||||||
|
label-class-name="my-label" |
||||||
|
class-name="my-content" |
||||||
|
width="180px" |
||||||
|
> |
||||||
|
<el-form-item style="margin-bottom: 0" prop="servDesc"> |
||||||
|
<el-input |
||||||
|
type="textarea" |
||||||
|
:rows="1" |
||||||
|
v-model="businessForm.servDesc" |
||||||
|
/> |
||||||
|
</el-form-item> |
||||||
|
</el-descriptions-item> |
||||||
|
</el-descriptions> |
||||||
|
</el-form> |
||||||
|
<el-form |
||||||
|
:model="fileForm" |
||||||
|
v-if="servId === 0" |
||||||
|
style="margin-top: 10px; margin-bottom: 10px" |
||||||
|
> |
||||||
|
<el-descriptions title="文件信息表单" :column="2" border> |
||||||
|
<el-descriptions-item |
||||||
|
label="文件名称" |
||||||
|
label-align="left" |
||||||
|
align="center" |
||||||
|
label-class-name="my-label" |
||||||
|
class-name="my-content" |
||||||
|
width="180px" |
||||||
|
> |
||||||
|
<el-form-item style="margin-bottom: 0" prop="fileName"> |
||||||
|
<el-input v-model="fileForm.fileName" /> |
||||||
|
</el-form-item> |
||||||
|
</el-descriptions-item> |
||||||
|
<el-descriptions-item |
||||||
|
label="文件描述信息" |
||||||
|
label-align="left" |
||||||
|
align="center" |
||||||
|
label-class-name="my-label" |
||||||
|
class-name="my-content" |
||||||
|
width="180px" |
||||||
|
> |
||||||
|
<el-form-item style="margin-bottom: 0" prop="fileDesc"> |
||||||
|
<el-input |
||||||
|
type="textarea" |
||||||
|
:rows="1" |
||||||
|
v-model="fileForm.fileDesc" |
||||||
|
/> |
||||||
|
</el-form-item> |
||||||
|
</el-descriptions-item> |
||||||
|
<el-descriptions-item |
||||||
|
label="文件上传" |
||||||
|
label-align="left" |
||||||
|
align="center" |
||||||
|
label-class-name="my-label" |
||||||
|
class-name="my-content" |
||||||
|
width="180px" |
||||||
|
> |
||||||
|
<el-upload |
||||||
|
drag |
||||||
|
action="#" |
||||||
|
:limit="1" |
||||||
|
:auto-upload="false" |
||||||
|
v-model:file-list="fileList" |
||||||
|
> |
||||||
|
<el-icon class="el-icon--upload"><upload-filled /></el-icon> |
||||||
|
<div class="el-upload__text">拖拽上传 或 <em>点击上传</em></div> |
||||||
|
</el-upload> |
||||||
|
</el-descriptions-item> |
||||||
|
</el-descriptions> |
||||||
|
</el-form> |
||||||
|
<div |
||||||
|
style=" |
||||||
|
display: flex; |
||||||
|
justify-content: flex-end; |
||||||
|
margin-right: 10px; |
||||||
|
margin-bottom: 10px; |
||||||
|
" |
||||||
|
> |
||||||
|
<el-button |
||||||
|
v-if="businessForm.servId === undefined" |
||||||
|
type="primary" |
||||||
|
@click="submitForm(businessFormRef)" |
||||||
|
>下一步</el-button |
||||||
|
> |
||||||
|
<el-button v-else type="primary" @click="next">下一步</el-button> |
||||||
|
</div> |
||||||
|
<div class="any-table"> |
||||||
|
<el-table |
||||||
|
:data="tableData" |
||||||
|
v-loading="tableLoading" |
||||||
|
v-if="servId != 0" |
||||||
|
highlight-current-row |
||||||
|
max-height="300" |
||||||
|
> |
||||||
|
<el-table-column label="设备类型" prop="devType" align="center" /> |
||||||
|
<el-table-column |
||||||
|
label="设备类型软件版本名称" |
||||||
|
prop="devTypeSoftVer" |
||||||
|
align="center" |
||||||
|
/> |
||||||
|
<el-table-column |
||||||
|
label="审核标志" |
||||||
|
prop="devTypeVerStatus" |
||||||
|
align="center" |
||||||
|
/> |
||||||
|
</el-table> |
||||||
|
<pagination |
||||||
|
v-if="total > 0" |
||||||
|
v-model:total="total" |
||||||
|
v-model:page="query.pageNum" |
||||||
|
v-model:limit="query.pageSize" |
||||||
|
@pagination="loadServiceDevTypePage" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div v-show="active === 1"> |
||||||
|
<div style="display: flex; justify-content: space-between"> |
||||||
|
<div style="font-weight: 700">业务信息列表</div> |
||||||
|
</div> |
||||||
|
<div |
||||||
|
style=" |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
margin-top: 20px; |
||||||
|
margin-bottom: 20px; |
||||||
|
" |
||||||
|
> |
||||||
|
<el-transfer |
||||||
|
:titles="['所有TR-069数据模型版本', '要绑定的TR-069数据模型版本']" |
||||||
|
v-model="target" |
||||||
|
:data="resource" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
<div |
||||||
|
style=" |
||||||
|
display: flex; |
||||||
|
justify-content: flex-end; |
||||||
|
margin-bottom: 20px; |
||||||
|
margin-right: 20px; |
||||||
|
" |
||||||
|
> |
||||||
|
<el-button type="primary" @click="lastStep">上一步</el-button> |
||||||
|
<el-button type="primary" @click="submitBindingTr069">提交</el-button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script setup lang="ts"> |
||||||
|
import { BusinessFile, BusinessForm, Tr069Option } from "@/api/service/types"; |
||||||
|
import { Position, UploadFilled } from "@element-plus/icons-vue"; |
||||||
|
import { FormInstance, FormRules, UploadUserFile } from "element-plus"; |
||||||
|
import { |
||||||
|
addBusiness, |
||||||
|
addBusinessFile, |
||||||
|
bindingTr069, |
||||||
|
bindingTr069Option, |
||||||
|
editBusiness, |
||||||
|
getBusinessFormById, |
||||||
|
} from "@/api/service"; |
||||||
|
import { uploadApi } from "@/api/file"; |
||||||
|
import { getTr069Option } from "@/api/tr069"; |
||||||
|
import { Tr069DevTypeVO } from "@/api/tr069/types"; |
||||||
|
import { serviceBindingDevTypePage } from "@/api/device-type"; |
||||||
|
|
||||||
|
const total = ref<number>(0); |
||||||
|
const tableLoading = ref<boolean>(false); |
||||||
|
const tableData = ref<Tr069DevTypeVO[]>([]); |
||||||
|
const active = ref<number>(0); |
||||||
|
const route = useRoute(); |
||||||
|
const resource = ref<Tr069Option[]>([]); |
||||||
|
const target = ref<number[]>([]); |
||||||
|
const formLoading = ref<boolean>(false); |
||||||
|
let servId: number = parseInt(<string>route.params.servId); |
||||||
|
const businessForm = ref<BusinessForm>({}); |
||||||
|
const fileForm = ref<BusinessFile>({ |
||||||
|
fileType: "4", |
||||||
|
}); |
||||||
|
const query = ref<PageQuery>({ |
||||||
|
pageNum: 1, |
||||||
|
pageSize: 10, |
||||||
|
}); |
||||||
|
const fileList = ref<UploadUserFile[]>([]); |
||||||
|
const businessFormRef = ref<FormInstance>(); |
||||||
|
const rules = reactive<FormRules<BusinessForm>>({ |
||||||
|
servName: [{ required: true, message: "请填写业务名称", trigger: "blur" }], |
||||||
|
servDisplayName: [ |
||||||
|
{ required: true, message: "请填写业务显示名称", trigger: "blur" }, |
||||||
|
], |
||||||
|
servVerName: [{ required: true, message: "请填写业务版本", trigger: "blur" }], |
||||||
|
}); |
||||||
|
/** |
||||||
|
* 提交业务信息表单 |
||||||
|
*/ |
||||||
|
const submitBusiness = async () => { |
||||||
|
await addBusiness(businessForm.value).then(({ data }) => { |
||||||
|
businessForm.value.servId = data; |
||||||
|
}); |
||||||
|
}; |
||||||
|
/** |
||||||
|
* 上传插件文件 |
||||||
|
*/ |
||||||
|
const submitUpload = async () => { |
||||||
|
const file = fileList.value[0].raw; |
||||||
|
const dotIndex: any = file?.name.lastIndexOf("."); |
||||||
|
if (dotIndex === -1) { |
||||||
|
ElMessage.error("文件没有后缀，无法上传"); |
||||||
|
return; |
||||||
|
} |
||||||
|
const fileName = fileForm.value.fileName; |
||||||
|
const fileType = fileForm.value.fileType; |
||||||
|
fileForm.value.fileName = fileName + "." + file?.name.substring(dotIndex + 1); |
||||||
|
await uploadApi(file, fileName, fileType).then(({ data }) => { |
||||||
|
fileForm.value.fileUrl = data; |
||||||
|
submitFileRecord(); |
||||||
|
}); |
||||||
|
}; |
||||||
|
/** |
||||||
|
* 添加文件表单 |
||||||
|
*/ |
||||||
|
const submitFileRecord = async () => { |
||||||
|
await addBusinessFile(fileForm.value).then(({ data }) => { |
||||||
|
businessForm.value.pluginFileId = data; |
||||||
|
submitBusiness(); |
||||||
|
}); |
||||||
|
}; |
||||||
|
/** |
||||||
|
* 获取TR069所有数据模型option |
||||||
|
*/ |
||||||
|
watch(active, () => { |
||||||
|
if (active.value === 1) { |
||||||
|
loadTr069Option(); |
||||||
|
} |
||||||
|
}); |
||||||
|
const loadTr069Option = () => { |
||||||
|
getTr069Option().then(({ data }) => { |
||||||
|
resource.value = data; |
||||||
|
}); |
||||||
|
}; |
||||||
|
const loadBindingTr069 = () => { |
||||||
|
bindingTr069Option(businessForm.value.servId).then(({ data }) => { |
||||||
|
target.value = data; |
||||||
|
}); |
||||||
|
}; |
||||||
|
/** |
||||||
|
* 查找表单数据 |
||||||
|
* @param formEl |
||||||
|
*/ |
||||||
|
const loadFormData = () => { |
||||||
|
formLoading.value = true; |
||||||
|
getBusinessFormById(servId) |
||||||
|
.then(({ data }) => { |
||||||
|
businessForm.value = data; |
||||||
|
}) |
||||||
|
.finally(() => { |
||||||
|
formLoading.value = false; |
||||||
|
}); |
||||||
|
}; |
||||||
|
const loadServiceDevTypePage = () => { |
||||||
|
tableLoading.value = true; |
||||||
|
serviceBindingDevTypePage(query.value, servId) |
||||||
|
.then(({ data }) => { |
||||||
|
total.value = data.total; |
||||||
|
tableData.value = data.list; |
||||||
|
}) |
||||||
|
.finally(() => { |
||||||
|
tableLoading.value = false; |
||||||
|
}); |
||||||
|
}; |
||||||
|
const submitForm = async (formEl: FormInstance | undefined) => { |
||||||
|
if (!formEl) return; |
||||||
|
await formEl.validate((valid, fields) => { |
||||||
|
if (valid) { |
||||||
|
if (fileList.value.length === 0) { |
||||||
|
submitBusiness(); |
||||||
|
} else { |
||||||
|
submitUpload(); |
||||||
|
} |
||||||
|
active.value = 1; |
||||||
|
} |
||||||
|
}); |
||||||
|
}; |
||||||
|
const submitBindingTr069 = () => { |
||||||
|
bindingTr069(target.value, businessForm.value.servId).then(() => { |
||||||
|
ElMessage({ |
||||||
|
message: "操作成功", |
||||||
|
duration: 1000, |
||||||
|
type: "success", |
||||||
|
}); |
||||||
|
}); |
||||||
|
}; |
||||||
|
const next = () => { |
||||||
|
active.value = 1; |
||||||
|
loadBindingTr069(); |
||||||
|
}; |
||||||
|
const lastStep = () => { |
||||||
|
active.value = 0; |
||||||
|
}; |
||||||
|
const updateForm = async (formEl: FormInstance | undefined) => { |
||||||
|
if (!formEl) return; |
||||||
|
await formEl.validate((valid, fields) => { |
||||||
|
if (valid) { |
||||||
|
editBusiness(businessForm.value).then(() => { |
||||||
|
ElMessage({ |
||||||
|
message: "操作成功", |
||||||
|
duration: 1000, |
||||||
|
type: "success", |
||||||
|
}); |
||||||
|
}); |
||||||
|
} |
||||||
|
}); |
||||||
|
}; |
||||||
|
onMounted(() => { |
||||||
|
if (servId != 0) { |
||||||
|
loadFormData(); |
||||||
|
loadServiceDevTypePage(); |
||||||
|
} |
||||||
|
}); |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
:deep(.my-label) { |
||||||
|
background: var(--el-color-white) !important; |
||||||
|
} |
||||||
|
</style> |
||||||
|
|
||||||
|
<style> |
||||||
|
.el-transfer-panel { |
||||||
|
width: 300px !important; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,197 @@ |
|||||||
|
<template> |
||||||
|
<div class="app-container"> |
||||||
|
<div class="search-container"> |
||||||
|
<div style="display: flex; justify-content: flex-end; margin-right: 10px"> |
||||||
|
<el-form> |
||||||
|
<el-form-item> |
||||||
|
<el-button :icon="Plus" type="primary" @click="skipBusinessForm(0)" |
||||||
|
>新增</el-button |
||||||
|
> |
||||||
|
<el-button |
||||||
|
type="primary" |
||||||
|
plain |
||||||
|
:icon="Refresh" |
||||||
|
@click="loadBusiness" |
||||||
|
>刷新</el-button |
||||||
|
> |
||||||
|
<el-button |
||||||
|
:icon="Delete" |
||||||
|
:disabled="multipleSelection.length === 0" |
||||||
|
type="danger" |
||||||
|
@click="handleDelete" |
||||||
|
>删除</el-button |
||||||
|
> |
||||||
|
</el-form-item> |
||||||
|
</el-form> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="any-table"> |
||||||
|
<el-table |
||||||
|
:data="tableData" |
||||||
|
v-loading="loading" |
||||||
|
highlight-current-row |
||||||
|
max-height="400" |
||||||
|
@selection-change="handleSelectionChange" |
||||||
|
> |
||||||
|
<el-table-column type="selection" width="55" /> |
||||||
|
<el-table-column label="业务名称" prop="servName" align="center"> |
||||||
|
<template #default="scope"> |
||||||
|
<el-button |
||||||
|
type="primary" |
||||||
|
link |
||||||
|
@click="skipBusinessForm(scope.row.servId)" |
||||||
|
>{{ scope.row.servName }}</el-button |
||||||
|
> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="业务版本" prop="servVerName" align="center" /> |
||||||
|
<el-table-column |
||||||
|
label="业务显示名称" |
||||||
|
prop="servDisplayName" |
||||||
|
align="center" |
||||||
|
/> |
||||||
|
<el-table-column label="业务描述" prop="servDesc" align="center" /> |
||||||
|
<el-table-column |
||||||
|
label="上传时间" |
||||||
|
prop="fileCreateTime" |
||||||
|
align="center" |
||||||
|
/> |
||||||
|
<el-table-column label="plugin文件名称" prop="fileName" align="center"> |
||||||
|
<template #default="scope"> |
||||||
|
<el-button |
||||||
|
type="primary" |
||||||
|
link |
||||||
|
v-if="scope.row.fileId != undefined" |
||||||
|
@click="handleDownload(scope.row.fileId)" |
||||||
|
>{{ scope.row.fileName }}</el-button |
||||||
|
> |
||||||
|
<el-button |
||||||
|
v-else |
||||||
|
type="danger" |
||||||
|
link |
||||||
|
@click="openPluginFile(scope.row.servId)" |
||||||
|
> |
||||||
|
上传文件</el-button |
||||||
|
> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="操作" align="center"> |
||||||
|
<template #default="scope"> |
||||||
|
<el-popconfirm |
||||||
|
title="确认删除该文件吗？" |
||||||
|
width="200" |
||||||
|
@confirm="deleteFile(scope.row)" |
||||||
|
> |
||||||
|
<template #reference> |
||||||
|
<el-button |
||||||
|
type="danger" |
||||||
|
:disabled="scope.row.fileId === null" |
||||||
|
:icon="Delete" |
||||||
|
plain |
||||||
|
link |
||||||
|
>删除文件</el-button |
||||||
|
> |
||||||
|
</template> |
||||||
|
</el-popconfirm> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
<pagination |
||||||
|
v-if="total > 0" |
||||||
|
v-model:total="total" |
||||||
|
v-model:page="query.pageNum" |
||||||
|
v-model:limit="query.pageSize" |
||||||
|
@pagination="loadBusiness" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
<add-plugin-file ref="openPluginFileRef" @success="loadBusiness" /> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script setup lang="ts"> |
||||||
|
import { Delete, Plus, Refresh } from "@element-plus/icons-vue"; |
||||||
|
import { BusinessVO } from "@/api/service/types"; |
||||||
|
import { businessPage, deleteBusiness, deleteFileAPI } from "@/api/service"; |
||||||
|
import AddPluginFile from "@/views/resources/service/components/AddPluginFile.vue"; |
||||||
|
import { downloadFileApi } from "@/api/file"; |
||||||
|
import { downloadHook } from "@/utils"; |
||||||
|
defineOptions({ |
||||||
|
name: "Service", |
||||||
|
inheritAttrs: false, |
||||||
|
}); |
||||||
|
const tableData = ref<BusinessVO[]>([]); |
||||||
|
const query = ref<PageQuery>({ |
||||||
|
pageNum: 1, |
||||||
|
pageSize: 10, |
||||||
|
}); |
||||||
|
const total = ref<number>(0); |
||||||
|
const loading = ref<boolean>(false); |
||||||
|
const router = useRouter(); |
||||||
|
const multipleSelection = ref<BusinessVO[]>([]); |
||||||
|
const openPluginFileRef = ref(); |
||||||
|
const handleSelectionChange = (val: BusinessVO[]) => { |
||||||
|
multipleSelection.value = val; |
||||||
|
}; |
||||||
|
const loadBusiness = () => { |
||||||
|
loading.value = true; |
||||||
|
businessPage(query.value) |
||||||
|
.then(({ data }) => { |
||||||
|
tableData.value = data.list; |
||||||
|
total.value = data.total; |
||||||
|
}) |
||||||
|
.finally(() => { |
||||||
|
loading.value = false; |
||||||
|
}); |
||||||
|
}; |
||||||
|
const skipBusinessForm = (servId?: number) => { |
||||||
|
router.push({ |
||||||
|
path: `/resources/service-form/${servId}`, |
||||||
|
}); |
||||||
|
}; |
||||||
|
const handleDelete = () => { |
||||||
|
let ids: number[] = []; |
||||||
|
multipleSelection.value.forEach((obj) => { |
||||||
|
ids.push(<number>obj.servId); |
||||||
|
}); |
||||||
|
loading.value = true; |
||||||
|
deleteBusiness(ids) |
||||||
|
.then(() => { |
||||||
|
ElMessage({ |
||||||
|
message: "操作成功", |
||||||
|
duration: 1000, |
||||||
|
type: "success", |
||||||
|
onClose: () => { |
||||||
|
loadBusiness(); |
||||||
|
}, |
||||||
|
}); |
||||||
|
}) |
||||||
|
.finally(() => { |
||||||
|
loading.value = false; |
||||||
|
}); |
||||||
|
}; |
||||||
|
const openPluginFile = (servId: number) => { |
||||||
|
openPluginFileRef.value.open(servId); |
||||||
|
}; |
||||||
|
const handleDownload = (fileId: number) => { |
||||||
|
downloadFileApi(fileId).then((res) => { |
||||||
|
downloadHook(res); |
||||||
|
}); |
||||||
|
}; |
||||||
|
const deleteFile = (row: BusinessVO) => { |
||||||
|
let servId = row.servId; |
||||||
|
let fileId = row.fileId; |
||||||
|
loading.value = true; |
||||||
|
deleteFileAPI(fileId, servId) |
||||||
|
.then(() => { |
||||||
|
loadBusiness(); |
||||||
|
}) |
||||||
|
.finally(() => { |
||||||
|
loading.value = false; |
||||||
|
}); |
||||||
|
}; |
||||||
|
onMounted(() => { |
||||||
|
loadBusiness(); |
||||||
|
}); |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped></style> |
||||||
Loading…
Reference in new issue