|
|
@ -18,14 +18,14 @@ |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="行业:" prop="region"> |
|
|
|
<el-select v-model="form.region" placeholder="请选择"> |
|
|
|
<el-option value="Zone one"></el-option> |
|
|
|
<el-option value="Zone two"></el-option> |
|
|
|
<el-option value="教育"></el-option> |
|
|
|
<el-option value="医疗"></el-option> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="分类:" prop="sort"> |
|
|
|
<el-select v-model="form.sort" multiple placeholder="请选择,可多选"> |
|
|
|
<el-option value="Zone one"></el-option> |
|
|
|
<el-option value="Zone two"></el-option> |
|
|
|
<el-option value="康复"></el-option> |
|
|
|
<el-option value="管理"></el-option> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="标签:" prop="tags"> |
|
|
@ -49,7 +49,7 @@ |
|
|
|
<el-form-item label="上传预览图:" prop="preview"> |
|
|
|
<el-upload |
|
|
|
class="avatar-uploader" |
|
|
|
action="https://jsonplaceholder.typicode.com/posts/" |
|
|
|
:action="`${apiUrl}/filedeal/file/upload/single`" |
|
|
|
:show-file-list="false" |
|
|
|
:on-success="handleAvatarSuccess" |
|
|
|
:before-upload="beforeAvatarUpload" |
|
|
@ -66,15 +66,16 @@ |
|
|
|
</template> |
|
|
|
<el-upload |
|
|
|
class="upload-dialog" |
|
|
|
action="https://jsonplaceholder.typicode.com/posts/" |
|
|
|
name="files" |
|
|
|
:action="`${apiUrl}/filedeal/file/upload/multiple`" |
|
|
|
list-type="picture-card" |
|
|
|
:on-preview="handlePictureCardPreview" |
|
|
|
:on-success="handleBannerSuccess" |
|
|
|
:on-remove="handleRemove" |
|
|
|
> |
|
|
|
<i class="el-icon-plus"></i> |
|
|
|
</el-upload> |
|
|
|
<el-dialog :visible.sync="form.dialogVisible"> |
|
|
|
<img width="100%" :src="form.carousel" alt="" /> |
|
|
|
<img width="100%" :src="banner" alt="" /> |
|
|
|
</el-dialog> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="README:" prop="description"> |
|
|
@ -92,8 +93,12 @@ |
|
|
|
<script setup> |
|
|
|
import { ref, reactive } from 'vue'; |
|
|
|
import { ElMessage } from 'element-plus'; |
|
|
|
import { savePlugin } from '@/apis/plugin'; |
|
|
|
|
|
|
|
const apiUrl = import.meta.env.VITE_API_URL_NEW; |
|
|
|
|
|
|
|
const formRef = ref(null); |
|
|
|
const banner = ref(''); |
|
|
|
const form = reactive({ |
|
|
|
name: '测试01', |
|
|
|
versions: 'V1.0.0', |
|
|
@ -107,7 +112,7 @@ const form = reactive({ |
|
|
|
config: '', |
|
|
|
delivery: '', |
|
|
|
preview: '', |
|
|
|
carousel: '', |
|
|
|
carousel: [], |
|
|
|
dialogVisible: false, |
|
|
|
description: '', |
|
|
|
}); |
|
|
@ -137,23 +142,47 @@ const options = [ |
|
|
|
}, |
|
|
|
]; |
|
|
|
|
|
|
|
/** |
|
|
|
* 创建插件 |
|
|
|
* @param {object} params |
|
|
|
*/ |
|
|
|
function onSubmit() { |
|
|
|
formRef.value.validate(valid => { |
|
|
|
console.log('valid: ', valid); |
|
|
|
if (valid) { |
|
|
|
console.log('submit!'); |
|
|
|
} else { |
|
|
|
console.log('error submit!!'); |
|
|
|
return false; |
|
|
|
} |
|
|
|
}); |
|
|
|
try { |
|
|
|
formRef.value.validate(async valid => { |
|
|
|
if (valid) { |
|
|
|
console.log('submit!'); |
|
|
|
const params = {}; |
|
|
|
params.param = form; |
|
|
|
await savePlugin(params); |
|
|
|
ElMessage.success('插件创建成功'); |
|
|
|
// for(let key in form){ |
|
|
|
// form[key] = '' |
|
|
|
// } |
|
|
|
banner.value = ''; |
|
|
|
} else { |
|
|
|
ElMessage.error('插件创建失败'); |
|
|
|
console.log('error submit!!'); |
|
|
|
return false; |
|
|
|
} |
|
|
|
}); |
|
|
|
} catch (error) { |
|
|
|
console.error('error: ', error); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
function resetForm() { |
|
|
|
formRef.value.resetFields(); |
|
|
|
} |
|
|
|
|
|
|
|
function handleAvatarSuccess(res, file) { |
|
|
|
form.preview = URL.createObjectURL(file.raw); |
|
|
|
/** |
|
|
|
* 上传预览图 |
|
|
|
* @param {*} res |
|
|
|
* @param {*} file |
|
|
|
*/ |
|
|
|
function handleAvatarSuccess(res) { |
|
|
|
if (res.data && res.data.visitUrl) { |
|
|
|
form.preview = res.data.visitUrl; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
function beforeAvatarUpload(file) { |
|
|
@ -169,14 +198,26 @@ function beforeAvatarUpload(file) { |
|
|
|
return isJPG && isLt2M; |
|
|
|
} |
|
|
|
|
|
|
|
function handleRemove(file, fileList) { |
|
|
|
console.log(file, fileList); |
|
|
|
// 删除轮播图 |
|
|
|
function handleRemove(res) { |
|
|
|
if (res.response.data && res.response.data.length) { |
|
|
|
const url = res.response.data[0].visitUrl; |
|
|
|
const index = form.carousel.findIndex(item => item === url); |
|
|
|
form.carousel.splice(index, 1); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
function handlePictureCardPreview(file) { |
|
|
|
console.log('file: ', file); |
|
|
|
form.carousel = file.url; |
|
|
|
form.dialogVisible = true; |
|
|
|
// 上传轮播图 |
|
|
|
function handleBannerSuccess(res) { |
|
|
|
if (res.data && res.data.length) { |
|
|
|
form.dialogVisible = true; |
|
|
|
banner.value = res.data[0].visitUrl; |
|
|
|
res.data.forEach(item => { |
|
|
|
if (item && item.id) { |
|
|
|
form.carousel.push(item.visitUrl); |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|