<template>
|
<div class="AddProduct">
|
<div class="header">
|
<span class="iconfont" @click="back"></span> 添加产品
|
</div>
|
<div class="content">
|
<el-form
|
:model="ruleForm"
|
ref="ruleForm"
|
:rules="rules"
|
label-width="100px"
|
class="demo-ruleForm"
|
>
|
<el-form-item label="模块名称">
|
<el-radio-group v-model="ruleForm.type">
|
<el-radio :label="0">SDK</el-radio>
|
<el-radio :label="1">应用</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
|
<el-form-item label="选择产品" prop="product">
|
<el-select v-model="ruleForm.product" placeholder="请选择">
|
<el-option
|
v-for="(item, index) in productArr"
|
:key="index"
|
:label="item.label"
|
:value="item.value"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
|
<el-form-item label="产品logo">
|
<div class="logo">
|
<el-upload
|
action
|
:http-request="uploadLogo"
|
list-type="picture-card"
|
accept="image/*"
|
:limit="1"
|
:file-list="logoUrl"
|
:on-remove="handleRemoveLogo"
|
>
|
<i class="el-icon-plus" style="margin-top: 10px"></i>
|
<div>点击上传logo</div>
|
</el-upload>
|
</div>
|
</el-form-item>
|
|
<div class="title">基本信息</div>
|
|
<el-form-item label="产品名称" prop="name">
|
<el-input placeholder="请输入产品名称" v-model="ruleForm.name">
|
</el-input>
|
</el-form-item>
|
|
<el-form-item label="产品标签" prop="tags">
|
<el-select
|
v-model="ruleForm.tags"
|
multiple
|
collapse-tags
|
placeholder="请选择"
|
>
|
<el-option
|
v-for="item in tagArr"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
|
<el-form-item label="产品型号">
|
<el-input placeholder="请输入产品型号" v-model="ruleForm.version">
|
</el-input>
|
</el-form-item>
|
|
<el-form-item label="产品描述">
|
<el-input
|
type="textarea"
|
:rows="3"
|
placeholder="请输入内容"
|
v-model="ruleForm.des"
|
>
|
</el-input>
|
</el-form-item>
|
|
<el-form-item label="产品详述">
|
<el-input
|
type="textarea"
|
:rows="3"
|
placeholder="请输入内容"
|
v-model="ruleForm.detail"
|
>
|
</el-input>
|
</el-form-item>
|
<el-form-item label="收费标准">
|
<el-input placeholder="请输入收费标准" v-model="ruleForm.price">
|
</el-input>
|
</el-form-item>
|
|
<el-form-item label="收费标准">
|
<div class="addButton">
|
<span class="icon">+</span>
|
添加
|
</div>
|
</el-form-item>
|
|
<div class="title">产品价格</div>
|
|
<el-form-item label="基准价格">
|
<div class="moneyArea">
|
<el-input
|
style="width: 130px"
|
placeholder="请输入收费标准"
|
v-model="ruleForm.money"
|
>
|
</el-input>
|
元
|
</div>
|
</el-form-item>
|
|
<div class="title">图片和附件</div>
|
<div class="label">上传图片/视频</div>
|
<div class="loadArea">
|
<el-upload
|
action
|
:http-request="uploadPhoto"
|
accept="image/*, video/*"
|
:show-file-list="false"
|
list-type="picture-card"
|
:before-remove="handleRemovePic"
|
multiple
|
>
|
<i slot="default" class="el-icon-plus" style="margin-top: 20px"></i>
|
<div style="margin-top: -120px">点击上传</div>
|
</el-upload>
|
</div>
|
|
<div class="label">上传附件</div>
|
<div class="loadArea">
|
<el-upload
|
class="upload-demo"
|
action
|
:http-request="uploadFile"
|
:on-remove="handleRemove"
|
:file-list="ruleForm.appendix"
|
:before-remove="removeEnclosure"
|
multiple
|
:on-exceed="handleExceed"
|
>
|
<div class="loadContent">
|
<el-button size="small" type="primary">上传附件</el-button>
|
<div slot="tip" class="el-upload__tip" style="line-height: 20px">
|
支持批量上传，上传格式为txt文件
|
</div>
|
</div>
|
</el-upload>
|
</div>
|
</el-form>
|
|
<div class="buttonArea">
|
<div class="confirm" @click="submitForm">添加模块</div>
|
<div class="cancel" @click="back">取消</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
ruleForm: {
|
name: "",
|
type: 1,
|
product: [],
|
des: "",
|
logoUrl: "",
|
appendix: [],
|
pics: [],
|
money: "",
|
price: "",
|
detail: "",
|
tags: "",
|
version: "",
|
},
|
rules: {
|
name: [{ required: true, message: "请输入名称", trigger: "blur" }],
|
logoUrl: [{ required: true, message: "请上传图片", trigger: "blur" }],
|
type: [{ required: true, message: "请选择类型", trigger: "blur" }],
|
des: [{ required: true, message: "请输入描述", trigger: "blur" }],
|
},
|
productArr: [
|
{
|
label: "产品1",
|
value: 0,
|
},
|
{
|
label: "产品2",
|
value: 1,
|
},
|
],
|
tagArr: [
|
{
|
label: "标签1",
|
value: 0,
|
},
|
{
|
label: "标签2",
|
value: 1,
|
},
|
],
|
logoUrl: [],
|
};
|
},
|
methods: {
|
submitForm() {
|
this.$refs["ruleForm"].validate((valid) => {
|
if (valid) {
|
} else {
|
console.log("error submit!!");
|
return false;
|
}
|
});
|
},
|
back() {
|
this.$router.go("-1");
|
},
|
uploadLogo(param) {
|
const fd = new FormData();
|
fd.append("file", param.file);
|
request({
|
method: "post",
|
url: `/data/api-s/file/upload`,
|
data: fd,
|
})
|
.then((res) => {
|
this.ruleForm.logoUrl = res.data.picUrl;
|
})
|
.catch((err) => {
|
if (err && err.status == 401) {
|
return;
|
}
|
this.$notify({
|
type: "error",
|
message: "上传失败",
|
duration: 2500,
|
offset: 57,
|
});
|
});
|
},
|
uploadPhoto(param) {
|
const fd = new FormData();
|
fd.append("file", param.file);
|
request({
|
method: "post",
|
url: `/data/api-s/file/upload`,
|
data: fd,
|
})
|
.then((res) => {
|
this.ruleForm.pics.push({
|
url: res.data.picUrl,
|
type: param.file.type.split("/")[0],
|
});
|
})
|
.catch((err) => {
|
if (err && err.status == 401) {
|
return;
|
}
|
this.$notify({
|
type: "error",
|
message: "上传失败",
|
duration: 2500,
|
offset: 57,
|
});
|
});
|
},
|
uploadFile(param) {
|
const fd = new FormData();
|
fd.append("file", param.file);
|
request({
|
method: "post",
|
url: `/data/api-s/file/upload`,
|
data: fd,
|
})
|
.then((res) => {
|
this.form.appendix.push({
|
name: param.file.name,
|
url: res.data.picUrl,
|
});
|
})
|
.catch((err) => {
|
if (err && err.status == 401) {
|
return;
|
}
|
this.$notify({
|
type: "error",
|
message: "上传失败",
|
duration: 2500,
|
offset: 57,
|
});
|
});
|
},
|
handleRemovePic(file, index) {
|
this.ruleForm.pics.splice(index, 1);
|
},
|
handleRemoveLogo() {
|
this.ruleForm.logoUrl = "";
|
},
|
removeEnclosure(file, fileList) {
|
var index = fileList.findIndex((item) => {
|
if (item.uid == file.uid) {
|
return true;
|
}
|
});
|
this.form.appendix.splice(index, 1);
|
},
|
handleRemove() {},
|
handleExceed() {},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped >
|
.AddProduct {
|
background-color: rgb(243, 245, 248);
|
.header {
|
margin-bottom: 24px;
|
padding: 0 24px;
|
height: 50px;
|
font-size: 16px;
|
color: #666666;
|
line-height: 50px;
|
background: #ffffff;
|
vertical-align: middle;
|
font-weight: 700;
|
|
.iconfont {
|
margin-right: 10px;
|
font-size: 18px;
|
cursor: pointer;
|
}
|
}
|
.content {
|
margin: 0 24px 24px 24px;
|
padding: 20px;
|
background-color: #fff;
|
|
.el-form {
|
width: 583px;
|
}
|
|
.el-input ::v-deep {
|
width: 300px;
|
height: 32px;
|
.el-input__inner {
|
width: 100%;
|
height: 32px;
|
line-height: 32px;
|
color: #3d3d3d;
|
border-radius: 0;
|
border-color: #c0c5cc;
|
border-radius: 3px;
|
&::-webkit-input-placeholder {
|
color: #999999;
|
}
|
|
&:focus {
|
border-color: #0065ff;
|
}
|
}
|
}
|
|
.el-select ::v-deep {
|
width: 300px;
|
height: 32px;
|
|
.el-input {
|
width: 300px;
|
height: 32px;
|
.el-input__inner {
|
width: 100%;
|
height: 32px;
|
line-height: 32px;
|
color: #3d3d3d;
|
border-radius: 0;
|
border-color: #c0c5cc;
|
border-radius: 3px;
|
|
&::-webkit-input-placeholder {
|
color: #999999;
|
}
|
|
&:focus {
|
border-color: #0065ff;
|
}
|
}
|
}
|
|
.el-icon-arrow-up {
|
line-height: 32px;
|
}
|
|
.el-tag--info {
|
margin-top: 10px;
|
}
|
}
|
|
.title {
|
border-top: 1px solid #e9ebee;
|
margin: 0 20px;
|
padding: 30px 0 20px 0;
|
font-size: 16px;
|
font-weight: 700;
|
}
|
|
.addButton {
|
margin-top: 5px;
|
width: 84px;
|
height: 32px;
|
border-radius: 3px;
|
background: #0064ff;
|
color: #fff;
|
font-size: 14px;
|
vertical-align: middle;
|
text-align: center;
|
line-height: 32px;
|
cursor: pointer;
|
|
.iconfont {
|
font-size: 16px;
|
font-weight: 700;
|
}
|
}
|
|
.label {
|
margin: 20px 0 20px 25px;
|
font-size: 14px;
|
}
|
|
.loadArea {
|
margin-left: 15px;
|
}
|
|
.loadContent {
|
margin-bottom: 20px;
|
display: flex;
|
font-size: 12px;
|
color: #000;
|
|
.el-button {
|
margin-right: 10px;
|
color: #0065ff;
|
background-color: #fff;
|
border-color: #0065ff;
|
border-radius: 3px;
|
}
|
}
|
}
|
|
.logo ::v-deep {
|
width: 136px;
|
height: 76px;
|
overflow: hidden;
|
font-size: 12px;
|
color: #999999;
|
.el-upload--picture-card {
|
width: 126px;
|
height: 66px;
|
line-height: 20px;
|
background: #e9ebee;
|
border-radius: 3px;
|
border-color: #c0c5cc;
|
}
|
.el-upload-list__item {
|
margin: 10px;
|
width: 126px;
|
height: 66px;
|
img {
|
object-fit: contain;
|
}
|
}
|
}
|
|
.buttonArea {
|
display: flex;
|
align-items: flex-end;
|
height: 52px;
|
line-height: 32px;
|
font-size: 12px;
|
text-align: center;
|
border-top: 1px solid #e9ebee;
|
|
.cancel {
|
width: 60px;
|
height: 32px;
|
border: 1px solid #0064ff;
|
border-radius: 3px;
|
color: #0064ff;
|
cursor: pointer;
|
}
|
|
.confirm {
|
margin-right: 20px;
|
width: 88px;
|
height: 32px;
|
color: #fff;
|
background: #0064ff;
|
border-radius: 3px;
|
border: 1px solid #0064ff;
|
cursor: pointer;
|
}
|
}
|
}
|
</style>
|
