DigitalHuman-web/src/views/system/oss/config.vue

<template>
  <div class="table-box">
    <ProTable ref="proTable" :columns="columns" row-key="ossConfigId" :request-api="listOssConfigApi">
      <!-- 表格 header 按钮 -->
      <template #tableHeader="scope">
        <el-button type="primary" v-auth="['system:ossConfig:add']" icon="CirclePlus" @click="openDialog(1, '对象存储配置新增')"> 新增 </el-button>
        <el-button
          type="danger"
          v-auth="['system:ossConfig:remove']"
          icon="Delete"
          plain
          :disabled="!scope.isSelected"
          @click="batchDelete(scope.selectedListIds)"
        >
          批量删除
        </el-button>
      </template>
      <!-- 表格操作 -->
      <template #operation="scope">
        <el-tooltip content="编辑" placement="top">
          <el-button type="primary" link icon="EditPen" v-auth="['system:ossConfig:edit']" @click="openDialog(2, '对象存储配置编辑', scope.row)">
          </el-button>
        </el-tooltip>
        <el-tooltip content="删除" placement="top">
          <el-button type="primary" link icon="Delete" v-auth="['system:ossConfig:remove']" @click="deleteOssConfig(scope.row)"> </el-button>
        </el-tooltip>
      </template>
    </ProTable>
    <FormDialog ref="formDialogRef" :items-options="itemsOptions" :model="model" />
    <ImportExcel ref="dialogRef" />
  </div>
</template>

<script setup lang="tsx" name="OssConfig">
import { ref, reactive } from 'vue'
import { useHandleData } from '@/hooks/useHandleData'
import ProTable from '@/components/ProTable/index.vue'
import ImportExcel from '@/components/ImportExcel/index.vue'
import FormDialog from '@/components/FormDialog/index.vue'
import { ProTableInstance, ColumnProps } from '@/components/ProTable/interface'
import {
  listOssConfigApi,
  delOssConfigApi,
  addOssConfigApi,
  updateOssConfigApi,
  getOssConfigApi,
  changeOssConfigStatusApi
} from '@/api/modules/system/ossConfig'
import { getDictsApi } from '@/api/modules/system/dictData'
import { OssConfigVO } from '@/api/interface/system/ossConfig'

// ProTable 实例
const proTable = ref<ProTableInstance>()
// 表单model
const model = ref({})
// 删除对象存储配置信息
const deleteOssConfig = async (params: any) => {
  await useHandleData(delOssConfigApi, params.ossConfigId, `删除【params.ossConfigId】对象存储配置`)
  proTable.value?.getTableList()
}

// 批量删除对象存储配置信息
const batchDelete = async (ids: string[]) => {
  await useHandleData(delOssConfigApi, ids, '删除所选对象存储配置信息')
  proTable.value?.clearSelection()
  proTable.value?.getTableList()
}
// 切换用户状态
const changeStatus = async (row: OssConfigVO) => {
  let text = row.status === '1' ? '启用' : '停用'
  await useHandleData(
    changeOssConfigStatusApi,
    { ossConfigId: row.ossConfigId, version: row.version, status: row.status == '1' ? 0 : 1, configKey: row.configKey },
    `'要${text}"${row.configKey}'"配置吗?`
  )
  proTable.value?.getTableList()
}

const formDialogRef = ref<InstanceType<typeof FormDialog> | null>(null)
// 打开弹框的功能
const openDialog = async (type: number, title: string, row?: any) => {
  let res = { data: {} }
  if (row?.ossConfigId) {
    res = await getOssConfigApi(row?.ossConfigId || null)
  }
  // 重置表单
  setItemsOptions()
  model.value = type == 1 ? {} : res.data
  const params = {
    title,
    width: 680,
    top: '8vh',
    isEdit: type !== 3,
    api: type == 1 ? addOssConfigApi : updateOssConfigApi,
    getTableList: proTable.value?.getTableList
  }
  formDialogRef.value?.openDialog(params)
}
const types = [
  {
    label: 'private',
    value: '0'
  },
  {
    label: 'public',
    value: '1'
  },
  {
    label: 'custom',
    value: '2'
  }
]
const statusTypes = [
  {
    label: '启用',
    value: '1'
  },
  {
    label: '停用',
    value: '0'
  }
]

// 表格配置项
const columns = reactive<ColumnProps<any>[]>([
  {
    prop: 'ossConfigId',
    label: '主建'
  },
  {
    prop: 'endpoint',
    label: '访问站点'
  },
  {
    prop: 'domainName',
    label: '自定义域名'
  },
  {
    prop: 'configKey',
    label: '配置key',
    search: {
      el: 'input'
    }
  },
  {
    prop: 'bucketName',
    label: '桶名称',
    search: {
      el: 'input'
    }
  },
  {
    prop: 'prefix',
    label: '前缀'
  },
  {
    prop: 'region',
    label: '域'
  },
  {
    prop: 'accessPolicy',
    label: '桶权限类型',
    tag: true,
    enum: types
  },
  {
    prop: 'status',
    label: '是否默认',
    enum: statusTypes,
    search: { el: 'tree-select' },
    render: scope => {
      return (
        <el-switch
          model-value={scope.row.status}
          active-text={scope.row.status === '1' ? '停用' : '启用'}
          active-value={'0'}
          inactive-value={'1'}
          onClick={() => changeStatus(scope.row)}
        />
      )
    }
  },
  { prop: 'operation', label: '操作', width: 230, fixed: 'right' }
])
// 表单配置项
let itemsOptions = ref<ProForm.ItemsOptions[]>([])
const setItemsOptions = () => {
  itemsOptions.value = [
    {
      label: '配置key',
      prop: 'configKey',
      rules: [{ required: true, message: '配置key不能为空', trigger: 'blur' }],
      compOptions: {
        placeholder: '请输入配置key'
      }
    },
    {
      label: '访问站点',
      prop: 'endpoint',
      rules: [
        { required: true, message: '访问站点不能为空', trigger: 'blur' },
        {
          min: 2,
          max: 100,
          message: '访问站点名称长度必须介于 2 和 100 之间',
          trigger: 'blur'
        }
      ],
      compOptions: {
        placeholder: '请输入访问站点'
      }
    },
    {
      label: '自定义域名',
      prop: 'domainName',
      compOptions: {
        placeholder: '请输入自定义域名'
      }
    },
    {
      label: 'accessKey',
      prop: 'accessKey',
      rules: [
        { required: true, message: 'accessKey不能为空', trigger: 'blur' },
        {
          min: 2,
          max: 200,
          message: 'accessKey长度必须介于 2 和 100 之间',
          trigger: 'blur'
        }
      ],
      compOptions: {
        placeholder: '请输入accessKey'
      }
    },
    {
      label: 'secretKey',
      prop: 'secretKey',
      rules: [
        { required: true, message: 'secretKey不能为空', trigger: 'blur' },
        {
          min: 2,
          max: 100,
          message: 'secretKey长度必须介于 2 和 100 之间',
          trigger: 'blur'
        }
      ],
      compOptions: {
        showPassword: true,
        placeholder: '请输入secretKey'
      }
    },
    {
      label: '桶名称',
      prop: 'bucketName',
      rules: [
        { required: true, message: '桶名称不能为空', trigger: 'blur' },
        {
          min: 2,
          max: 100,
          message: '桶名称长度必须介于 2 和 100 之间',
          trigger: 'blur'
        }
      ],
      compOptions: {
        placeholder: '请输入桶名称'
      }
    },
    {
      label: '前缀',
      prop: 'prefix',
      compOptions: {
        placeholder: '请输入前缀'
      }
    },
    {
      label: '是否https',
      prop: 'isHttps',
      compOptions: {
        elTagName: 'radio-group',
        enum: () => getDictsApi('sys_yes_no'),
        labelKey: 'dictLabel',
        valueKey: 'dictValue'
      }
    },
    {
      label: '桶权限类型',
      prop: 'accessPolicy',
      compOptions: {
        elTagName: 'radio-group',
        enum: types,
        placeholder: '请输入桶权限类型'
      }
    },
    {
      label: '域',
      prop: 'region',
      compOptions: {
        placeholder: '请输入域'
      }
    },
    {
      label: '备注',
      prop: 'remark',
      compOptions: {
        placeholder: '请输入备注'
      }
    }
  ]
}
</script>