Browse Source

文件上传配置

master
yujintao 6 years ago
parent
commit
33e17ca8f3
  1. 292
      src/views/modules/oss/oss-config.vue

292
src/views/modules/oss/oss-config.vue

@ -1,18 +1,15 @@
<template> <template>
<el-dialog <el-dialog :visible.sync="visible"
:visible.sync="visible"
:title="$t('oss.config')" :title="$t('oss.config')"
:close-on-click-modal="false" :close-on-click-modal="false"
:close-on-press-escape="false" :close-on-press-escape="false">
> <el-form :model="dataForm"
<el-form
:model="dataForm"
:rules="dataRule" :rules="dataRule"
ref="dataForm" ref="dataForm"
@keyup.enter.native="dataFormSubmitHandle()" @keyup.enter.native="dataFormSubmitHandle()"
label-width="120px" label-width="120px">
> <el-form-item :label="$t('oss.type')"
<el-form-item :label="$t('oss.type')" size="mini"> size="mini">
<el-radio-group v-model="dataForm.type"> <el-radio-group v-model="dataForm.type">
<el-radio :label="1">{{ $t('oss.type1') }}</el-radio> <el-radio :label="1">{{ $t('oss.type1') }}</el-radio>
<el-radio :label="2">{{ $t('oss.type2') }}</el-radio> <el-radio :label="2">{{ $t('oss.type2') }}</el-radio>
@ -22,206 +19,153 @@
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<template v-if="dataForm.type === 1"> <template v-if="dataForm.type === 1">
<el-form-item prop="qiniuDomain" :label="$t('oss.qiniuDomain')"> <el-form-item prop="qiniuDomain"
<el-input :label="$t('oss.qiniuDomain')">
v-model="dataForm.qiniuDomain" <el-input v-model="dataForm.qiniuDomain"
:placeholder="$t('oss.qiniuDomainTips')" :placeholder="$t('oss.qiniuDomainTips')"></el-input>
></el-input>
</el-form-item> </el-form-item>
<el-form-item prop="qiniuPrefix" :label="$t('oss.qiniuPrefix')"> <el-form-item prop="qiniuPrefix"
<el-input :label="$t('oss.qiniuPrefix')">
v-model="dataForm.qiniuPrefix" <el-input v-model="dataForm.qiniuPrefix"
:placeholder="$t('oss.qiniuPrefixTips')" :placeholder="$t('oss.qiniuPrefixTips')"></el-input>
></el-input>
</el-form-item> </el-form-item>
<el-form-item prop="qiniuAccessKey" :label="$t('oss.qiniuAccessKey')"> <el-form-item prop="qiniuAccessKey"
<el-input :label="$t('oss.qiniuAccessKey')">
v-model="dataForm.qiniuAccessKey" <el-input v-model="dataForm.qiniuAccessKey"
:placeholder="$t('oss.qiniuAccessKeyTips')" :placeholder="$t('oss.qiniuAccessKeyTips')"></el-input>
></el-input>
</el-form-item> </el-form-item>
<el-form-item prop="qiniuSecretKey" :label="$t('oss.qiniuSecretKey')"> <el-form-item prop="qiniuSecretKey"
<el-input :label="$t('oss.qiniuSecretKey')">
v-model="dataForm.qiniuSecretKey" <el-input v-model="dataForm.qiniuSecretKey"
:placeholder="$t('oss.qiniuSecretKeyTips')" :placeholder="$t('oss.qiniuSecretKeyTips')"></el-input>
></el-input>
</el-form-item> </el-form-item>
<el-form-item prop="qiniuBucketName" :label="$t('oss.qiniuBucketName')"> <el-form-item prop="qiniuBucketName"
<el-input :label="$t('oss.qiniuBucketName')">
v-model="dataForm.qiniuBucketName" <el-input v-model="dataForm.qiniuBucketName"
:placeholder="$t('oss.qiniuBucketNameTips')" :placeholder="$t('oss.qiniuBucketNameTips')"></el-input>
></el-input>
</el-form-item> </el-form-item>
</template> </template>
<template v-else-if="dataForm.type === 2"> <template v-else-if="dataForm.type === 2">
<el-form-item prop="aliyunDomain" :label="$t('oss.aliyunDomain')"> <el-form-item prop="aliyunDomain"
<el-input :label="$t('oss.aliyunDomain')">
v-model="dataForm.aliyunDomain" <el-input v-model="dataForm.aliyunDomain"
:placeholder="$t('oss.aliyunDomainTips')" :placeholder="$t('oss.aliyunDomainTips')"></el-input>
></el-input>
</el-form-item> </el-form-item>
<el-form-item prop="aliyunPrefix" :label="$t('oss.aliyunPrefix')"> <el-form-item prop="aliyunPrefix"
<el-input :label="$t('oss.aliyunPrefix')">
v-model="dataForm.aliyunPrefix" <el-input v-model="dataForm.aliyunPrefix"
:placeholder="$t('oss.aliyunPrefixTips')" :placeholder="$t('oss.aliyunPrefixTips')"></el-input>
></el-input>
</el-form-item> </el-form-item>
<el-form-item prop="aliyunEndPoint" :label="$t('oss.aliyunEndPoint')"> <el-form-item prop="aliyunEndPoint"
<el-input :label="$t('oss.aliyunEndPoint')">
v-model="dataForm.aliyunEndPoint" <el-input v-model="dataForm.aliyunEndPoint"
:placeholder="$t('oss.aliyunEndPointTips')" :placeholder="$t('oss.aliyunEndPointTips')"></el-input>
></el-input>
</el-form-item> </el-form-item>
<el-form-item <el-form-item prop="aliyunAccessKeyId"
prop="aliyunAccessKeyId" :label="$t('oss.aliyunAccessKeyId')">
:label="$t('oss.aliyunAccessKeyId')" <el-input v-model="dataForm.aliyunAccessKeyId"
> :placeholder="$t('oss.aliyunAccessKeyIdTips')"></el-input>
<el-input
v-model="dataForm.aliyunAccessKeyId"
:placeholder="$t('oss.aliyunAccessKeyIdTips')"
></el-input>
</el-form-item> </el-form-item>
<el-form-item <el-form-item prop="aliyunAccessKeySecret"
prop="aliyunAccessKeySecret" :label="$t('oss.aliyunAccessKeySecret')">
:label="$t('oss.aliyunAccessKeySecret')" <el-input v-model="dataForm.aliyunAccessKeySecret"
> :placeholder="$t('oss.aliyunAccessKeySecretTips')"></el-input>
<el-input
v-model="dataForm.aliyunAccessKeySecret"
:placeholder="$t('oss.aliyunAccessKeySecretTips')"
></el-input>
</el-form-item> </el-form-item>
<el-form-item <el-form-item prop="aliyunBucketName"
prop="aliyunBucketName" :label="$t('oss.aliyunBucketName')">
:label="$t('oss.aliyunBucketName')" <el-input v-model="dataForm.aliyunBucketName"
> :placeholder="$t('oss.aliyunBucketNameTips')"></el-input>
<el-input
v-model="dataForm.aliyunBucketName"
:placeholder="$t('oss.aliyunBucketNameTips')"
></el-input>
</el-form-item> </el-form-item>
</template> </template>
<template v-else-if="dataForm.type === 3"> <template v-else-if="dataForm.type === 3">
<el-form-item prop="qcloudDomain" :label="$t('oss.qcloudDomain')"> <el-form-item prop="qcloudDomain"
<el-input :label="$t('oss.qcloudDomain')">
v-model="dataForm.qcloudDomain" <el-input v-model="dataForm.qcloudDomain"
:placeholder="$t('oss.qcloudDomainTips')" :placeholder="$t('oss.qcloudDomainTips')"></el-input>
></el-input>
</el-form-item> </el-form-item>
<el-form-item prop="qcloudPrefix" :label="$t('oss.qcloudPrefix')"> <el-form-item prop="qcloudPrefix"
<el-input :label="$t('oss.qcloudPrefix')">
v-model="dataForm.qcloudPrefix" <el-input v-model="dataForm.qcloudPrefix"
:placeholder="$t('oss.qcloudPrefixTips')" :placeholder="$t('oss.qcloudPrefixTips')"></el-input>
></el-input>
</el-form-item> </el-form-item>
<el-form-item prop="qcloudAppId" :label="$t('oss.qcloudAppId')"> <el-form-item prop="qcloudAppId"
<el-input :label="$t('oss.qcloudAppId')">
v-model="dataForm.qcloudAppId" <el-input v-model="dataForm.qcloudAppId"
:placeholder="$t('oss.qcloudAppIdTips')" :placeholder="$t('oss.qcloudAppIdTips')"></el-input>
></el-input>
</el-form-item> </el-form-item>
<el-form-item prop="qcloudSecretId" :label="$t('oss.qcloudSecretId')"> <el-form-item prop="qcloudSecretId"
<el-input :label="$t('oss.qcloudSecretId')">
v-model="dataForm.qcloudSecretId" <el-input v-model="dataForm.qcloudSecretId"
:placeholder="$t('oss.qcloudSecretIdTips')" :placeholder="$t('oss.qcloudSecretIdTips')"></el-input>
></el-input>
</el-form-item> </el-form-item>
<el-form-item prop="qcloudSecretKey" :label="$t('oss.qcloudSecretKey')"> <el-form-item prop="qcloudSecretKey"
<el-input :label="$t('oss.qcloudSecretKey')">
v-model="dataForm.qcloudSecretKey" <el-input v-model="dataForm.qcloudSecretKey"
:placeholder="$t('oss.qcloudSecretKeyTips')" :placeholder="$t('oss.qcloudSecretKeyTips')"></el-input>
></el-input>
</el-form-item> </el-form-item>
<el-form-item <el-form-item prop="qcloudBucketName"
prop="qcloudBucketName" :label="$t('oss.qcloudBucketName')">
:label="$t('oss.qcloudBucketName')" <el-input v-model="dataForm.qcloudBucketName"
> :placeholder="$t('oss.qcloudBucketNameTips')"></el-input>
<el-input
v-model="dataForm.qcloudBucketName"
:placeholder="$t('oss.qcloudBucketNameTips')"
></el-input>
</el-form-item> </el-form-item>
<el-form-item prop="qcloudRegion" :label="$t('oss.qcloudRegion')"> <el-form-item prop="qcloudRegion"
<el-select :label="$t('oss.qcloudRegion')">
v-model="dataForm.qcloudRegion" <el-select v-model="dataForm.qcloudRegion"
clearable clearable
:placeholder="$t('oss.qcloudRegionTips')" :placeholder="$t('oss.qcloudRegionTips')"
class="w-percent-100" class="w-percent-100">
> <el-option value="ap-beijing-1"
<el-option :label="$t('oss.qcloudRegionBeijing1')"></el-option>
value="ap-beijing-1" <el-option value="ap-beijing"
:label="$t('oss.qcloudRegionBeijing1')" :label="$t('oss.qcloudRegionBeijing')"></el-option>
></el-option> <el-option value="ap-shanghai"
<el-option :label="$t('oss.qcloudRegionShanghai')"></el-option>
value="ap-beijing" <el-option value="ap-guangzhou"
:label="$t('oss.qcloudRegionBeijing')" :label="$t('oss.qcloudRegionGuangzhou')"></el-option>
></el-option> <el-option value="ap-chengdu"
<el-option :label="$t('oss.qcloudRegionChengdu')"></el-option>
value="ap-shanghai" <el-option value="ap-chongqing"
:label="$t('oss.qcloudRegionShanghai')" :label="$t('oss.qcloudRegionChongqing')"></el-option>
></el-option> <el-option value="ap-singapore"
<el-option :label="$t('oss.qcloudRegionSingapore')"></el-option>
value="ap-guangzhou" <el-option value="ap-hongkong"
:label="$t('oss.qcloudRegionGuangzhou')" :label="$t('oss.qcloudRegionHongkong')"></el-option>
></el-option> <el-option value="na-toronto"
<el-option :label="$t('oss.qcloudRegionToronto')"></el-option>
value="ap-chengdu" <el-option value="eu-frankfurt"
:label="$t('oss.qcloudRegionChengdu')" :label="$t('oss.qcloudRegionFrankfurt')"></el-option>
></el-option>
<el-option
value="ap-chongqing"
:label="$t('oss.qcloudRegionChongqing')"
></el-option>
<el-option
value="ap-singapore"
:label="$t('oss.qcloudRegionSingapore')"
></el-option>
<el-option
value="ap-hongkong"
:label="$t('oss.qcloudRegionHongkong')"
></el-option>
<el-option
value="na-toronto"
:label="$t('oss.qcloudRegionToronto')"
></el-option>
<el-option
value="eu-frankfurt"
:label="$t('oss.qcloudRegionFrankfurt')"
></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
</template> </template>
<template v-else-if="dataForm.type === 4"> <template v-else-if="dataForm.type === 4">
<el-form-item prop="fastdfsDomain" :label="$t('oss.fastdfsDomain')"> <el-form-item prop="fastdfsDomain"
<el-input :label="$t('oss.fastdfsDomain')">
v-model="dataForm.localDomain" <el-input v-model="dataForm.fastdfsDomain"
:placeholder="$t('oss.fastdfsDomainTips')" :placeholder="$t('oss.fastdfsDomainTips')"></el-input>
></el-input>
</el-form-item> </el-form-item>
</template> </template>
<template v-else-if="dataForm.type === 5"> <template v-else-if="dataForm.type === 5">
<el-form-item prop="localDomain" :label="$t('oss.localDomain')"> <el-form-item prop="localDomain"
<el-input :label="$t('oss.localDomain')">
v-model="dataForm.fastdfsDomain" <el-input v-model="dataForm.localDomain"
:placeholder="$t('oss.localDomainTips')" :placeholder="$t('oss.localDomainTips')"></el-input>
></el-input>
</el-form-item> </el-form-item>
<el-form-item prop="localPrefix" :label="$t('oss.localPrefix')"> <el-form-item prop="localPrefix"
<el-input :label="$t('oss.localPrefix')">
v-model="dataForm.localPrefix" <el-input v-model="dataForm.localPrefix"
:placeholder="$t('oss.localPrefixTips')" :placeholder="$t('oss.localPrefixTips')"></el-input>
></el-input>
</el-form-item> </el-form-item>
<el-form-item prop="localPath" :label="$t('oss.localPath')"> <el-form-item prop="localPath"
<el-input :label="$t('oss.localPath')">
v-model="dataForm.localPath" <el-input v-model="dataForm.localPath"
:placeholder="$t('oss.localPathTips')" :placeholder="$t('oss.localPathTips')"></el-input>
></el-input>
</el-form-item> </el-form-item>
</template> </template>
</el-form> </el-form>
<template slot="footer"> <template slot="footer">
<el-button @click="visible = false">{{ $t('cancel') }}</el-button> <el-button @click="visible = false">{{ $t('cancel') }}</el-button>
<el-button type="primary" @click="dataFormSubmitHandle()">{{ <el-button type="primary"
@click="dataFormSubmitHandle()">{{
$t('confirm') $t('confirm')
}}</el-button> }}</el-button>
</template> </template>
@ -416,7 +360,7 @@ export default {
} }
this.dataForm = res.data this.dataForm = res.data
}) })
.catch(() => {}) .catch(() => { })
}, },
// //
dataFormSubmitHandle: debounce( dataFormSubmitHandle: debounce(
@ -441,7 +385,7 @@ export default {
} }
}) })
}) })
.catch(() => {}) .catch(() => { })
}) })
}, },
1000, 1000,

Loading…
Cancel
Save