ShiShiYiBan/yudao-ui-admin-vue3/src/views/infra/fileConfig/index.vue

315 lines
9.6 KiB
Vue
Raw Normal View History

2022-11-22 16:41:43 +08:00
<template>
<ContentWrap>
<!-- 列表 -->
2023-01-03 11:21:27 +08:00
<XTable @register="registerTable">
2022-11-22 16:41:43 +08:00
<template #toolbar_buttons>
<!-- 操作新增 -->
<XButton
type="primary"
preIcon="ep:zoom-in"
:title="t('action.add')"
v-hasPermi="['infra:file-config:create']"
2022-11-28 23:13:20 +08:00
@click="handleCreate(formRef)"
2022-11-22 16:41:43 +08:00
/>
</template>
<template #actionbtns_default="{ row }">
<!-- 操作编辑 -->
2022-11-22 16:41:43 +08:00
<XTextButton
preIcon="ep:edit"
:title="t('action.edit')"
v-hasPermi="['infra:file-config:update']"
@click="handleUpdate(row.id)"
/>
<!-- 操作详情 -->
2022-11-22 16:41:43 +08:00
<XTextButton
preIcon="ep:view"
:title="t('action.detail')"
v-hasPermi="['infra:file-config:query']"
@click="handleDetail(row.id)"
/>
<!-- 操作主配置 -->
2022-11-22 16:41:43 +08:00
<XTextButton
preIcon="ep:flag"
title="主配置"
v-hasPermi="['infra:file-config:update']"
@click="handleMaster(row)"
/>
<!-- 操作测试 -->
2022-12-06 20:51:02 +08:00
<XTextButton preIcon="ep:share" :title="t('action.test')" @click="handleTest(row.id)" />
<!-- 操作删除 -->
2022-11-22 16:41:43 +08:00
<XTextButton
preIcon="ep:delete"
:title="t('action.del')"
v-hasPermi="['infra:file-config:delete']"
@click="handleDelete(row.id)"
/>
</template>
2023-01-03 11:21:27 +08:00
</XTable>
2022-11-22 16:41:43 +08:00
</ContentWrap>
<XModal v-model="dialogVisible" :title="dialogTitle">
<!-- 对话框(添加 / 修改) -->
2022-11-28 23:13:20 +08:00
<el-form
ref="formRef"
2022-11-22 16:41:43 +08:00
v-if="['create', 'update'].includes(actionType)"
2022-11-28 23:13:20 +08:00
:model="form"
2022-11-22 16:41:43 +08:00
:rules="rules"
2022-11-28 23:13:20 +08:00
label-width="120px"
>
<el-form-item label="配置名" prop="name">
<el-input v-model="form.name" placeholder="请输入配置名" />
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" placeholder="请输入备注" />
</el-form-item>
<el-form-item label="存储器" prop="storage">
<el-select v-model="form.storage" placeholder="请选择存储器" :disabled="form.id !== 0">
<el-option
2022-12-14 15:06:56 +08:00
v-for="(dict, index) in getIntDictOptions(DICT_TYPE.INFRA_FILE_STORAGE)"
:key="index"
2022-11-28 23:13:20 +08:00
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<!-- DB -->
<!-- Local / FTP / SFTP -->
<el-form-item
v-if="form.storage >= 10 && form.storage <= 12"
label="基础路径"
prop="config.basePath"
>
<el-input v-model="form.config.basePath" placeholder="请输入基础路径" />
</el-form-item>
<el-form-item
v-if="form.storage >= 11 && form.storage <= 12"
label="主机地址"
prop="config.host"
>
<el-input v-model="form.config.host" placeholder="请输入主机地址" />
</el-form-item>
<el-form-item
v-if="form.storage >= 11 && form.storage <= 12"
label="主机端口"
prop="config.port"
>
<el-input-number :min="0" v-model="form.config.port" placeholder="请输入主机端口" />
</el-form-item>
<el-form-item
v-if="form.storage >= 11 && form.storage <= 12"
label="用户名"
prop="config.username"
>
<el-input v-model="form.config.username" placeholder="请输入密码" />
</el-form-item>
<el-form-item
v-if="form.storage >= 11 && form.storage <= 12"
label="密码"
prop="config.password"
>
<el-input v-model="form.config.password" placeholder="请输入密码" />
</el-form-item>
<el-form-item v-if="form.storage === 11" label="连接模式" prop="config.mode">
<el-radio-group v-model="form.config.mode">
<el-radio key="Active" label="Active">主动模式</el-radio>
<el-radio key="Passive" label="Passive">主动模式</el-radio>
</el-radio-group>
</el-form-item>
<!-- S3 -->
<el-form-item v-if="form.storage === 20" label="节点地址" prop="config.endpoint">
<el-input v-model="form.config.endpoint" placeholder="请输入节点地址" />
</el-form-item>
<el-form-item v-if="form.storage === 20" label="存储 bucket" prop="config.bucket">
<el-input v-model="form.config.bucket" placeholder="请输入 bucket" />
</el-form-item>
<el-form-item v-if="form.storage === 20" label="accessKey" prop="config.accessKey">
<el-input v-model="form.config.accessKey" placeholder="请输入 accessKey" />
</el-form-item>
<el-form-item v-if="form.storage === 20" label="accessSecret" prop="config.accessSecret">
<el-input v-model="form.config.accessSecret" placeholder="请输入 accessSecret" />
</el-form-item>
<!-- 通用 -->
<el-form-item v-if="form.storage === 20" label="自定义域名">
<!-- 无需参数校验所以去掉 prop -->
<el-input v-model="form.config.domain" placeholder="请输入自定义域名" />
</el-form-item>
<el-form-item v-else-if="form.storage" label="自定义域名" prop="config.domain">
<el-input v-model="form.config.domain" placeholder="请输入自定义域名" />
</el-form-item>
</el-form>
2022-11-22 16:41:43 +08:00
<!-- 对话框(详情) -->
<Descriptions
v-if="actionType === 'detail'"
:schema="allSchemas.detailSchema"
:data="detailData"
/>
<!-- 操作按钮 -->
<template #footer>
<!-- 按钮保存 -->
<XButton
v-if="['create', 'update'].includes(actionType)"
type="primary"
:title="t('action.save')"
:loading="actionLoading"
2022-11-28 23:13:20 +08:00
@click="submitForm(formRef)"
2022-11-22 16:41:43 +08:00
/>
<!-- 按钮关闭 -->
<XButton :loading="actionLoading" :title="t('dialog.close')" @click="dialogVisible = false" />
</template>
</XModal>
</template>
2022-11-23 22:26:25 +08:00
<script setup lang="ts" name="FileConfig">
2022-11-22 16:41:43 +08:00
// 全局相关的 import
2022-12-06 20:51:02 +08:00
import { ref } from 'vue'
2022-11-28 23:13:20 +08:00
import {
ElForm,
ElFormItem,
FormInstance,
ElSelect,
ElOption,
ElInput,
ElInputNumber,
ElRadio,
ElRadioGroup
} from 'element-plus'
2022-07-18 19:06:37 +08:00
import { useI18n } from '@/hooks/web/useI18n'
2022-11-22 16:41:43 +08:00
import { useMessage } from '@/hooks/web/useMessage'
2023-01-03 11:21:27 +08:00
import { useXTable } from '@/hooks/web/useXTable'
2022-11-22 16:41:43 +08:00
// 业务相关的 import
import * as FileConfigApi from '@/api/infra/fileConfig'
2022-07-18 19:06:37 +08:00
import { rules, allSchemas } from './fileConfig.data'
2022-11-28 23:13:20 +08:00
import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
2022-07-18 19:06:37 +08:00
2022-11-22 16:41:43 +08:00
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
// 列表相关的变量
2023-01-03 11:21:27 +08:00
const [registerTable, { reload, deleteData }] = useXTable({
2022-11-22 16:41:43 +08:00
allSchemas: allSchemas,
2022-07-18 19:06:37 +08:00
getListApi: FileConfigApi.getFileConfigPageApi,
2022-11-22 16:41:43 +08:00
deleteApi: FileConfigApi.deleteFileConfigApi
2022-07-18 19:06:37 +08:00
})
// ========== CRUD 相关 ==========
const actionLoading = ref(false) // 遮罩层
const actionType = ref('') // 操作按钮的类型
const dialogVisible = ref(false) // 是否显示弹出层
const dialogTitle = ref('edit') // 弹出层标题
2022-11-28 23:13:20 +08:00
const formRef = ref<FormInstance>() // 表单 Ref
2022-11-22 16:41:43 +08:00
const detailData = ref() // 详情 Ref
2022-12-14 13:47:09 +08:00
const form = ref<FileConfigApi.FileConfigVO>({
2022-11-28 23:13:20 +08:00
id: 0,
name: '',
storage: 0,
master: false,
visible: false,
config: {
basePath: '',
host: '',
2022-12-06 20:51:02 +08:00
port: 0,
2022-11-28 23:13:20 +08:00
username: '',
password: '',
mode: '',
endpoint: '',
bucket: '',
accessKey: '',
accessSecret: '',
domain: ''
},
remark: '',
2022-12-06 20:51:02 +08:00
createTime: new Date()
2022-11-28 23:13:20 +08:00
})
2022-07-18 19:06:37 +08:00
// 设置标题
const setDialogTile = (type: string) => {
dialogTitle.value = t('action.' + type)
actionType.value = type
dialogVisible.value = true
}
// 新增操作
2022-11-28 23:13:20 +08:00
const handleCreate = (formEl: FormInstance | undefined) => {
2022-07-18 19:06:37 +08:00
setDialogTile('create')
2022-11-28 23:13:20 +08:00
formEl?.resetFields()
2022-12-14 13:47:09 +08:00
form.value = {
id: 0,
name: '',
storage: 0,
master: false,
visible: false,
config: {
basePath: '',
host: '',
port: 0,
username: '',
password: '',
mode: '',
endpoint: '',
bucket: '',
accessKey: '',
accessSecret: '',
domain: ''
},
remark: '',
createTime: new Date()
}
2022-07-18 19:06:37 +08:00
}
// 修改操作
2022-11-22 16:41:43 +08:00
const handleUpdate = async (rowId: number) => {
2022-07-18 19:06:37 +08:00
// 设置数据
2022-11-22 16:41:43 +08:00
const res = await FileConfigApi.getFileConfigApi(rowId)
2022-12-06 20:51:02 +08:00
form.value = res
2022-11-28 23:13:20 +08:00
setDialogTile('update')
2022-07-18 19:06:37 +08:00
}
2022-11-22 16:41:43 +08:00
// 详情操作
const handleDetail = async (rowId: number) => {
setDialogTile('detail')
// 设置数据
const res = await FileConfigApi.getFileConfigApi(rowId)
detailData.value = res
}
2022-07-18 19:06:37 +08:00
// 主配置操作
2022-11-22 17:12:45 +08:00
const handleMaster = (row: FileConfigApi.FileConfigVO) => {
2022-07-21 17:42:25 +08:00
message
.confirm('是否确认修改配置【 ' + row.name + ' 】为主配置?', t('common.reminder'))
2022-07-18 19:06:37 +08:00
.then(async () => {
await FileConfigApi.updateFileConfigMasterApi(row.id)
2023-01-03 11:21:27 +08:00
await reload()
2022-07-18 19:06:37 +08:00
})
}
2022-12-06 20:51:02 +08:00
const handleTest = async (rowId: number) => {
const res = await FileConfigApi.testFileConfigApi(rowId)
message.alert('测试通过,上传文件成功!访问地址:' + res)
}
2022-11-22 16:41:43 +08:00
// 删除操作
const handleDelete = async (rowId: number) => {
2023-01-03 11:21:27 +08:00
await deleteData(rowId)
2022-11-22 16:41:43 +08:00
}
2022-07-18 19:06:37 +08:00
// 提交按钮
2022-11-28 23:13:20 +08:00
const submitForm = async (formEl: FormInstance | undefined) => {
if (!formEl) return
formEl.validate(async (valid) => {
2022-10-17 11:24:22 +08:00
if (valid) {
actionLoading.value = true
// 提交请求
try {
if (actionType.value === 'create') {
2022-12-06 20:51:02 +08:00
await FileConfigApi.createFileConfigApi(form.value)
2022-10-17 11:24:22 +08:00
message.success(t('common.createSuccess'))
} else {
2022-12-06 20:51:02 +08:00
await FileConfigApi.updateFileConfigApi(form.value)
2022-10-17 11:24:22 +08:00
message.success(t('common.updateSuccess'))
}
dialogVisible.value = false
} finally {
actionLoading.value = false
2023-01-03 11:21:27 +08:00
await reload()
2022-10-17 11:24:22 +08:00
}
2022-07-18 19:06:37 +08:00
}
2022-10-17 11:24:22 +08:00
})
2022-07-18 19:06:37 +08:00
}
</script>