canyin-project/ybcy/views/admin/site/site_enclosure.php

717 lines
35 KiB
PHP
Raw Permalink Normal View History

2024-11-01 16:07:54 +08:00
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="renderer" content="webkit">
<?php if($this->params['site_image']):?>
<link rel="shortcut icon" type="image/x-icon" href="<?php echo $this->params['site_image'];?>" />
<?php else:?>
<link rel="shortcut icon" type="image/x-icon" href="<?=Yii::$app->request->baseUrl?>/web/favicon.ico" />
<?php endif;?>
<title> <?php if($this->params['site_title']):?>
<?php echo $this->params['site_title']; ?>
<?php else:?>
应用管理后台
<?php endif;?>-远程附件</title>
<link rel="stylesheet" type="text/css" href="<?=Yii::$app->request->baseUrl?>/web/static/css/globle.css"/>
<script src="<?=Yii::$app->request->baseUrl?>/web/static/js/config.js" type="text/javascript" charset="utf-8"></script>
</head>
<style>
.namelogo {
width: 54px;
height: 54px;
border-radius: 50%;
}
.hed-right .el-button {
height: 38px;
}
.hed-right .btn-jrpt {
width: 130px;
}
.hed-right .btn-ty {
width: 104px;
}
.mar_t3 {
margin-top: 3px;
}
.mar_l100 {
margin-left: 100px;
}
.ba_fe {
background: #F4F8FE;
}
.color_38 {
color: #3F83E8;
}
.main-enclosure {
width: 90%;
margin: 0 auto;
}
.tishi {
margin: 30px 0 40px 0;
line-height: 24px;
}
.right-width .elinput {
width: 495px;
}
.el-form-item__content .el-input {
width: 495px;
}
</style>
<body>
<div class="pHead">
<div class="publicHeader"><?php echo $this->render('@app/views/admin/public/publicHeader.html');?></div>
</div>
<div class="pLeft">
<div class="publicAside hei"><?php echo $this->render('@app/views/admin/public/publicAside.html');?></div>
</div>
<div class="yb_body">
<div class="layout" id="platformList" v-cloak v-loading="cardLoading">
<el-container>
<el-container>
<el-main>
<div class="main" style="min-width: 900px">
<el-form :model="ruleForm" status-icon ref="ruleForm" label-width="10%" class="demo-ruleForm">
<!-- <div class="ba_f bor_rad5 pad_20 mar_b30">
<div class="flex-bet">
<div class="flex pad_tb_10 mar_l20">
<div class=""><img class="namelogo" :src="formInline.apply_image"/></div>
<div class="flex-col mar_l20 t_l">
<div class="overflowlnr">{{formInline.apply_name || ''}}</div>
<div class="color_9 fon_12 mar_t10">类型:{{formInline.app_type_name}}</div>
</div>
</div>
<div class="mar_r20 hed-right">
<el-button type="primary" class="btn-jrpt">进入平台</el-button>
<el-button class="btn-ty" @click="deactivation()">停用</el-button>
</div>
</div>
</div> -->
<div class="ba_f">
<div class="main-tab ba_f bor_rad5 pad_tb_30">
<el-tabs v-model="activeName" @tab-click="handleClick">
<!-- <el-tab-pane label="平台信息" name="msg">平台信息</el-tab-pane>
<el-tab-pane label="用户管理" name="user">用户管理</el-tab-pane> -->
<el-tab-pane label="远程附件" name="enclosure">远程附件</el-tab-pane>
</el-tabs>
<!-- <div class="main-con">
<div class="tips t_l flex flex-y-center">
<span class="iconfont icontishi maincolor fon_16 mar_r10 mar_t3"></span>
<p class="fon_12 maincolor">
提示:提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容</p>
</div>
</div> -->
</div>
<div class="main-enclosure pad_tb_30">
<div class="t_l mar_l100">
<el-radio-group v-model="enclosure">
<el-radio
v-for="item in radioOptions"
:key="item.value"
:value="item.value"
:label="item.value"
border
size="medium"
@change="handleRadioChange"
>{{item.label}}
</el-radio>
</el-radio-group>
</div>
<div class="qny" v-show="enclosure=='1'">
<div class="tishi fon_12 t_l color_9">
启用七牛云存储后,之前文件图片及文件子目录需重新上传至七牛云存储, 相关网址:<a href="https://portal.qiniu.com/kodo/overview" target="_blank">https://portal.qiniu.com/kodo/overview</a>
</div>
<el-form-item label="Accesskey" prop="accesskey">
<el-input v-model="ruleForm.qn_accesskey" autocomplete="off"
placeholder="请输入Accesskey"></el-input>
<div class="remarks fon_12">用于签名的公钥</div>
</el-form-item>
<el-form-item label="Secretkey" prop="checkPass">
<el-input v-model="ruleForm.qn_secret" autocomplete="off"
placeholder="请输入Secretkey"></el-input>
<div class="remarks fon_12">用于签名的私钥</div>
</el-form-item>
<el-form-item label="Bucket" prop="bucket">
<el-input v-model="ruleForm.qn_bucket"
placeholder="请输入Bucket"></el-input>
<div class="remarks fon_12">请保证bucket为可公共读取的</div>
</el-form-item>
<el-form-item label="Bucket所在区域" prop="qn_endpoint">
<el-select v-model="ruleForm.qn_endpoint" filterable placeholder="请选择所在区域"
class="select">
<el-option v-for="item in optionst1" :key="item.value" :label="item.label"
:value="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item label="Url" prop="url">
<el-input v-model="ruleForm.qn_url" placeholder="请输入Url"></el-input>
<div class="remarks fon_12"> 请输入自定义云存储域名url开头一定是https://,结尾不加 /例如格式为https://www.abc.com。
</div>
</el-form-item>
</div>
<div class="aly" v-show="enclosure=='2'">
<div class="tishi fon_12 t_l color_9">
<p>
启用阿里云oss存储后之前文件图片及文件子目录需重新上传至阿里云oss存储, 相关网址:<a href="https://www.aliyun.com/product/oss?spm=5176.12825654.h2v3icoap.40.58502c4aaht7fK" target="_blank">https://www.aliyun.com/product/oss?spm=5176.12825654.h2v3icoap.40.58502c4aaht7fK</a>
</p>
</div>
<el-form-item label="Access Key ID" prop="accesskeyid">
<el-input v-model="ruleForm.aliyuncs_accesskey" autocomplete="off"
placeholder="请输入Access Key ID"></el-input>
<div class="remarks fon_12">Access Key ID是您访问阿里云API的密钥具有该账户完全的权限请您妥善保管。
</div>
</el-form-item>
<el-form-item label="Access Key Secret" prop="accesskeysecret">
<el-input v-model="ruleForm.aliyuncs_secret" autocomplete="off"
placeholder="请输入Access Key Secret"></el-input>
<div class="remarks fon_12">Access Key
Secret是您访问阿里云API的密钥具有该账户完全的权限请您妥善保管。(填写完Access Key ID Access Key
Secret 后请选择bucket)
</div>
</el-form-item>
<el-form-item label="Endpoint选择" prop="endpoint">
<el-select v-model="ruleForm.aliyuncs_endpoint" filterable placeholder="Endpoint选择"
class="select" @change="ChangeEndpoint(ruleForm.aliyuncs_endpoint)">
<el-option v-for="item in options" :key="item.value" :label="item.label"
:value="item.value"></el-option>
</el-select>
<div class="remarks fon_12">完善Access Key ID和Access Key
Secret资料后可以选择存在的Bucket(请保证bucket为可公共读取的),否则请手动输入。
</div>
</el-form-item>
<el-form-item label="Bucket选择" prop="bucket">
<el-select v-model="ruleForm.aliyuncs_bucket" filterable placeholder="bucket选择"
class="select">
<el-option v-for="item in bucoptions" :key="item.label" :label="item.label"
:value="item.label"></el-option>
</el-select>
<div class="remarks fon_12">完善Access Key ID和Access Key
Secret资料后可以选择存在的Bucket(请保证bucket为可公共读取的),否则请手动输入。
</div>
</el-form-item>
<el-form-item label="自定义URL" prop="customurl">
<el-input v-model="ruleForm.aliyuncs_url" placeholder="请输入自定义URL"></el-input>
<div class="remarks fon_12">
请输入自定义云存储域名url开头一定是https://,结尾不加 /例如格式为https://www.abc.com。
</div>
</el-form-item>
</div>
<div class="txy" v-show="enclosure=='3'">
<div class="tishi fon_12 t_l color_9">
启用腾讯云cos存储后之前文件图片及文件子目录需重新上传至腾讯云cos存储, 相关网址:<a href="https://cloud.tencent.com/product/cos" target="_blank">https://cloud.tencent.com/product/cos</a>
</div>
<el-form-item label="APPID" prop="appid">
<el-input v-model="ruleForm.xplqcloud_appid" autocomplete="off"
placeholder="请输入APPID"></el-input>
<div class="remarks fon_12">APPID 是您项目的唯一ID</div>
</el-form-item>
<el-form-item label="SecretID" prop="SecretID">
<el-input v-model="ruleForm.xplqcloud_secretid" autocomplete="off"
placeholder="请输入SecretID"></el-input>
<div class="remarks fon_12">SecretID 是您项目的安全密钥,具有该账户完全的权限,请妥善保管</div>
</el-form-item>
<el-form-item label="SecretKEY" prop="txysecretkey">
<el-input v-model="ruleForm.xplqcloud_secretkey"
placeholder="请输入SecretKEY"></el-input>
<div class="remarks fon_12">SecretKEY 是您项目的安全密钥,具有该账户完全的权限,请妥善保管</div>
</el-form-item>
<el-form-item label="Bucket" prop="txybucket">
<el-input v-model="ruleForm.xplqcloud_bucket"
placeholder="请输入Bucket"></el-input>
<div class="remarks fon_12">请保证bucket为可公共读取的</div>
</el-form-item>
<el-form-item label="Bucket所在区域" prop="bucketszqy">
<el-select v-model="ruleForm.xplqcloud_endpoint" filterable placeholder="请选择所在区域"
class="select">
<el-option v-for="item in optionst" :key="item.value" :label="item.label"
:value="item.value"></el-option>
</el-select>
<!-- <el-input v-model="ruleForm.bucketszqy"-->
<!-- placeholder="请输入所在区域"></el-input>-->
<div class="remarks fon_12">选择bucket对应的区域如果没有选择无</div>
</el-form-item>
<el-form-item label="URL" prop="txyurl">
<el-input v-model="ruleForm.xplqcloud_url" placeholder="请输入Url"></el-input>
<div class="remarks fon_12"> 请输入自定义云存储域名url开头一定是https://,结尾不加 /例如格式为https://www.abc.com。
</div>
</el-form-item>
</div>
</div>
</div>
<div class="ba_f mar_t20 pad_30 main-button">
<!-- <el-button class="mar_r20" @click="onSubmit(2)">测试配置(无需开启)</el-button>-->
<el-button type="primary" class="tijiao" @click="onSubmit(1)">保存</el-button>
</div>
</el-form>
</div>
</el-main>
</el-container>
</el-container>
</div>
</div>
<script>
$(document).ready(function () {
$(".slimScrollDiv ul .main-nav-li a").eq(1).addClass("menu_active");
$(".main-nav .main-nav-li .submenu").eq(1).addClass("block");
$(".main-nav .main-nav-li .submenu").children().children().eq(1).addClass("menu_active2")
});
</script>
<script>
new Vue({
el: '#platformList',
created() {
this.getapply()
// const id = utils.GetQueryString("id")
// if (id) {
// this.ruleForm.id=id
// this.getapply(id)
// } else {
// // _this = this;
// // this.init();
// }
},
data: function () {
return {
cardLoading: true,
activeName: 'enclosure',
ruleForm: {
id:'',
qn_accesskey: '',
qn_secret: '',
qn_bucket: '',
qn_endpoint:'',
qn_url: '',
aliyuncs_accesskey: '',
aliyuncs_secret: '',
aliyuncs_endpoint:'',
aliyuncs_bucket: '',
aliyuncs_customurl: '',
aliyuncs_url:'',
xplqcloud_appid: '',
xplqcloud_secretid: '',
xplqcloud_secretkey: '',
xplqcloud_bucket: '',
xplqcloud_endpoint: '',
xplqcloud_url: '',
},
bucoptions:[],
radioOptions:[
{
value: '0',
label: '关闭',
},
{
value: '1',
label: '七牛云存储',
},
{
value: '2',
label: '阿里云OSS',
},
{
value: '3',
label: '腾讯云存储',
}
],
enclosure: '0',
optionst1:[
{
value: 'east_china',
label: '华东',
},
{
value: 'north_china',
label: '华北',
},
{
value: 'south_china',
label: '华南',
},
{
value: 'north_america',
label: '北美',
},
],
options:[
{
value: 'oss-cn-hangzhou.aliyuncs.com',
label: '华东1杭州',
},
{
value: 'oss-cn-shanghai.aliyuncs.com',
label: '华东2上海',
},
{
value: 'oss-cn-qingdao.aliyuncs.com',
label: '华北1青岛',
},
{
value: 'oss-cn-beijing.aliyuncs.com',
label: '华北2北京',
},
{
value: 'oss-cn-zhangjiakou.aliyuncs.com',
label: '华北3张家口',
},{
value: 'oss-cn-huhehaote.aliyuncs.com',
label: '华北5呼和浩特',
},{
value: 'oss-cn-shenzhen.aliyuncs.com',
label: '华南1深圳',
},
{
value: 'oss-cn-heyuan.aliyuncs.com',
label: '华南2河源',
},
{
value: 'oss-cn-guangzhou.aliyuncs.com',
label: '华南3广州',
},
{
value: 'oss-cn-hongkong.aliyuncs.com',
label: '中国香港',
},
{
value: 'oss-cn-chengdu.aliyuncs.com',
label: '西南1成都',
}
],
optionst:[
{
value: 'bj',
label: '北京',
},
{
value: 'nj',
label: '南京',
},
{
value: 'sh',
label: '上海',
},
{
value: 'gz',
label: '广州',
},
{
value: 'cd',
label: '成都',
},{
value: 'cq',
label: '重庆',
},{
value: 'hk',
label: '中国香港',
},
],
formInline:{
apply_image:'',
apply_name:'',
app_type_name:'',
},
};
},
methods: {
//编辑显示数据
async getapply() {
let params = {
id: 0
}
res = await utils.requestPost({data: params, url: "admin/storage/getapply"},this)
if (res.code == 1) {
this.cardLoading= false
// this.formInline.apply_image = res.data.apply_image
// this.ruleForm = res.data
this.enclosure = res.storage_type?res.storage_type:'0'
this.ruleForm.qn_accesskey=res.result.qn_accesskey;
this.ruleForm.qn_secret=res.result.qn_secretkey;
this.ruleForm.qn_bucket=res.result.qn_bucket;
this.ruleForm.qn_endpoint=res.result.qn_endpoint;
this.ruleForm.qn_url=res.result.qn_url;
this.ruleForm.aliyuncs_accesskey=res.result.aliyuncs_accesskey;
this.ruleForm.aliyuncs_secret=res.result.aliyuncs_secret;
this.ruleForm.aliyuncs_endpoint=res.result.aliyuncs_endpoint;
this.ruleForm.aliyuncs_bucket=res.result.aliyuncs_bucket;
this.ruleForm.aliyuncs_url=res.result.aliyuncs_url;
this.ruleForm.xplqcloud_appid=res.result.xplqcloud_appid;
this.ruleForm.xplqcloud_secretid=res.result.xplqcloud_secretid;
this.ruleForm.xplqcloud_secretkey=res.result.xplqcloud_secretkey;
this.ruleForm.xplqcloud_bucket=res.result.xplqcloud_bucket;
this.ruleForm.xplqcloud_endpoint=res.result.xplqcloud_endpoint;
this.ruleForm.xplqcloud_url=res.result.xplqcloud_url;
console.log(this.ruleForm)
}
},
handleRadioChange(){
return
// this.getapply(this.ruleForm.id)
if(this.enclosure=='1'){
this.ruleForm.accesskey=res.data[0].accesskey
this.ruleForm.checkPass=res.data[0].secretkey
this.ruleForm.bucket=res.data[0].bucket
this.ruleForm.url=res.data[0].url
}
if(this.enclosure=='2'){
// this.ruleForm.accesskeyid=res.data[1].accesskey
// this.ruleForm.accesskeysecret=res.data[1].secretkey
// this.ruleForm.bucketal=res.data[1].bucket
// this.ruleForm.customurl=res.data[1].url
}
if(this.enclosure=='3'){
this.ruleForm.appid=res.data[2].appid
this.ruleForm.SecretID=res.data[2].accesskey
this.ruleForm.txysecretkey=res.data[2].secretkey
this.ruleForm.txybucket=res.data[2].bucket
this.ruleForm.bucketszqy=res.data[2].customurl
this.ruleForm.txyurl=res.data[2].url
}
},
//点击停用
async deactivation() {
await utils.showConfirm({content: '此操作将停用该项目, 是否继续?'},this)
var requstData = {
id: this.id,
status: 2,
}
res = await utils.requestPost({
data: requstData,
url: "admin/apply/delapply"
},this)
if (res.code == 1) {
this.$message({
type: 'success',
message: '操作成功!',
duration: 1000,
onClose: () => {
location.href = "<?= Yii::$app->urlManager->createUrl('admin/apply/platform_management');?>";
},
});
}
},
handleClick(tab, event) {
if (tab.name == 'msg') {
location.href ="<?= Yii::$app->urlManager->createUrl('admin/apply/platform_edit');?>"+"?id="+this.ruleForm.id;
}
if (tab.name == 'user') {
location.href = "<?= Yii::$app->urlManager->createUrl('admin/apply/platform_userm');?>"+"?id="+this.ruleForm.id;
}
if (tab.name == 'enclosure') {
location.href = "<?= Yii::$app->urlManager->createUrl('admin/apply/platform_enclosure');?>"+"?id="+this.ruleForm.id;
}
},
async ChangeEndpoint(item) {
var data ={}
data = {
aliyuncs_accesskey:this.ruleForm.aliyuncs_accesskey,//公钥
aliyuncs_secret:this.ruleForm.aliyuncs_secret,//私钥
endpoint:item,
}
res = await utils.requestPost({
data: data,
url: "admin/storage/get-bucket"
},this)
console.log(res)
if (res.code == 1) {
console.log(res.data)
this.bucoptions=res.data;
}
},
//提交数据
async onSubmit(type) {
if(this.enclosure==1){
if(!this.ruleForm.qn_accesskey){
this.$message({
type: 'error',
message: '请填写七牛云Accesskey!',
duration: 1000,
});retrun;
}
if(!this.ruleForm.qn_secret){
this.$message({
type: 'error',
message: '请填写七牛云Secretkey!',
duration: 1000,
});retrun;
}
if(!this.ruleForm.qn_bucket){
this.$message({
type: 'error',
message: '请填写七牛云Bucket!',
duration: 1000,
});retrun;
}
if(!this.ruleForm.qn_url){
this.$message({
type: 'error',
message: '请填写七牛云Url!',
duration: 1000,
});retrun;
}
}
if(this.enclosure==2){
if(!this.ruleForm.aliyuncs_accesskey){
this.$message({
type: 'error',
message: '请填写阿里云OSS Access Key ID',
duration: 1000,
});retrun;
}
if(!this.ruleForm.aliyuncs_secret){
this.$message({
type: 'error',
message: '请填写阿里云OSS Access Key Secret',
duration: 1000,
});retrun;
}
if(!this.ruleForm.aliyuncs_endpoint){
this.$message({
type: 'error',
message: '请选择阿里云OSS 区域地区',
duration: 1000,
});retrun;
}
if(!this.ruleForm.aliyuncs_bucket){
this.$message({
type: 'error',
message: '请选择阿里云OSS Bucket',
duration: 1000,
});retrun;
}
if(!this.ruleForm.aliyuncs_url){
this.$message({
type: 'error',
message: '请填写阿里云OSS Url',
duration: 1000,
});retrun;
}
}
if(this.enclosure==3){
if(!this.ruleForm.xplqcloud_appid){
this.$message({
type: 'error',
message: '请填写腾讯云储存APPID!',
duration: 1000,
});retrun;
}
if(!this.ruleForm.xplqcloud_secretid){
this.$message({
type: 'error',
message: '请填写腾讯云储存SecretID',
duration: 1000,
});retrun;
}
if(!this.ruleForm.xplqcloud_secretkey){
this.$message({
type: 'error',
message: '请填写腾讯云储存SecretKEY',
duration: 1000,
});retrun;
}
if(!this.ruleForm.xplqcloud_bucket){
this.$message({
type: 'error',
message: '请填写腾讯云储存Bucket',
duration: 1000,
});retrun;
}
if(!this.ruleForm.xplqcloud_endpoint){
this.$message({
type: 'error',
message: '请填写腾讯云储存Bucket所在区域',
duration: 1000,
});retrun;
}
if(!this.ruleForm.xplqcloud_url){
this.$message({
type: 'error',
message: '请填写腾讯云储存URL',
duration: 1000,
});retrun;
}
}
var dataq ={}
dataq = {
id:this.ruleForm.id,
storage_type:this.enclosure,//附件方案id
qn_accesskey:this.ruleForm.qn_accesskey,//公钥
qn_secretkey:this.ruleForm.qn_secret,//私钥
qn_bucket:this.ruleForm.qn_bucket,//bucket
qn_endpoint:this.ruleForm.qn_endpoint,//bucket
qn_url:this.ruleForm.qn_url,//url
aliyuncs_accesskey:this.ruleForm.aliyuncs_accesskey,//公钥
aliyuncs_secret:this.ruleForm.aliyuncs_secret,//私钥
aliyuncs_bucket:this.ruleForm.aliyuncs_bucket,//bucketal
aliyuncs_url:this.ruleForm.aliyuncs_url,//customurl
aliyuncs_endpoint:this.ruleForm.aliyuncs_endpoint,
xplqcloud_appid:this.ruleForm.xplqcloud_appid,//appid
xplqcloud_secretid:this.ruleForm.xplqcloud_secretid,//公钥
xplqcloud_secretkey:this.ruleForm.xplqcloud_secretkey,//私钥
xplqcloud_bucket:this.ruleForm.xplqcloud_bucket,//Bucket
xplqcloud_endpoint:this.ruleForm.xplqcloud_endpoint,//Bucket所在区域
xplqcloud_url:this.ruleForm.xplqcloud_url,//customurl
}
// console.log(dataq,this.enclosure)
if(type==1){
res = await utils.requestPost({
data: dataq,
url: "admin/storage/storage_save"
},this)
if (res.code == 1) {
this.$message({
type: 'success',
message: res.msg,
duration: 1000,
//onClose: () => {
// location.href ="<?//= Yii::$app->urlManager->createUrl('admin/apply/platform_enclosure');?>//"+"&id="+this.ruleForm.id;
//},
});
}
}
if(type==2){
res = await utils.requestPost({
data: dataq,
url: "admin/storage/storage_test"
},this)
if (res.code == 1) {
this.$message({
type: 'success',
message: res.msg,
duration: 1000
});
}
}
},
}
})
</script>
</body>
</html>