<template>
|
<div class="AddModel">
|
<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="模块名称" prop="name">
|
<el-input
|
v-model="ruleForm.name"
|
placeholder="请输入模块名称"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="模块类型" prop="typeId">
|
<el-select
|
v-model="ruleForm.typeId"
|
placeholder="请选择"
|
@change="getProductList"
|
>
|
<el-option
|
v-for="(item, index) in typeArr"
|
:key="index"
|
:label="item.label"
|
:value="item.value"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="上传图片" prop="pic">
|
<div class="logo">
|
<el-upload
|
action
|
:http-request="uploadLogo"
|
list-type="picture-card"
|
accept="image/*"
|
:limit="1"
|
:file-list="pic"
|
:on-remove="handleRemoveLogo"
|
>
|
<i class="el-icon-plus" style="margin-top: 10px"></i>
|
<div>点击上传图片</div>
|
</el-upload>
|
</div>
|
</el-form-item>
|
<el-form-item label="模块产品">
|
<el-select
|
v-model="ruleForm.productId"
|
multiple
|
collapse-tags
|
placeholder="请选择"
|
>
|
<el-option
|
v-for="item in productArr"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="模块描述" prop="desc">
|
<el-input
|
type="textarea"
|
:rows="3"
|
placeholder="请输入内容"
|
v-model="ruleForm.desc"
|
>
|
</el-input>
|
</el-form-item>
|
<el-form-item label="排序">
|
<el-input v-model="ruleForm.sort" placeholder="请输入"></el-input>
|
</el-form-item>
|
<el-form-item label="隐藏/显示">
|
<el-switch
|
v-model="ruleForm.isShow"
|
active-color="#0064FF"
|
inactive-color="#C0C5CC"
|
>
|
</el-switch>
|
</el-form-item>
|
</el-form>
|
|
<div class="buttonArea">
|
<div class="confirm" @click="submitForm">添加模块</div>
|
<div class="cancel" @click="back">取消</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import {
|
getIndexModelTypeList,
|
getProductByType,
|
saveIndexModel,
|
getIndexModelInfo,
|
} from "@/api/product";
|
import request from "@/api/index";
|
export default {
|
created() {
|
this.getTypeArr();
|
if (this.$route.query && this.$route.query.id) {
|
this.getFormData();
|
}
|
},
|
data() {
|
return {
|
ruleForm: {
|
name: "",
|
typeId: "",
|
productId: [],
|
desc: "",
|
sort: "",
|
pic: "",
|
isShow: true,
|
},
|
rules: {
|
name: [{ required: true, message: "请输入名称", trigger: "blur" }],
|
pic: [{ required: true, message: "请上传图片", trigger: "blur" }],
|
typeId: [{ required: true, message: "请选择类型", trigger: "blur" }],
|
des: [{ required: true, message: "请输入描述", trigger: "blur" }],
|
},
|
typeArr: [],
|
productArr: [],
|
pic: [],
|
};
|
},
|
methods: {
|
async getFormData() {
|
const res = await getIndexModelInfo({
|
id: this.$route.query.id,
|
});
|
|
if (res && res.success) {
|
this.ruleForm = res.data.modelInfo;
|
const res2 = await getProductByType({
|
typeId: this.ruleForm.typeId,
|
});
|
|
if (res2 && res2.success) {
|
this.productArr = res2.data.productType.map((item) => {
|
return {
|
label: item.productName,
|
value: item.id,
|
};
|
});
|
console.log(this.productArr);
|
}
|
res.data.productList.forEach((item) => {
|
this.ruleForm.productId.push(item.productId);
|
});
|
if (this.ruleForm.pic && this.ruleForm.pic.indexOf("/images") !== 0) {
|
this.pic.push({
|
url: "/httpImage/" + this.ruleForm.pic,
|
});
|
} else {
|
this.pic.push({
|
url: this.ruleForm.pic,
|
});
|
}
|
}
|
},
|
async getTypeArr() {
|
const res = await getIndexModelTypeList();
|
if (res && res.success) {
|
this.typeArr = res.data.typeList.map((item) => {
|
return {
|
label: item.name,
|
value: item.id,
|
};
|
});
|
}
|
},
|
async getProductList(typeId) {
|
const res = await getProductByType({
|
typeId: typeId,
|
});
|
|
if (res && res.success) {
|
this.productArr = res.data.productType.map((item) => {
|
return {
|
label: item.productName,
|
value: item.id,
|
};
|
});
|
}
|
},
|
submitForm() {
|
this.$refs["ruleForm"].validate(async (valid) => {
|
if (valid) {
|
this.ruleForm.sort = +this.ruleForm.sort;
|
const res = await saveIndexModel(this.ruleForm);
|
if (res && res.success) {
|
this.$notify({
|
type: "success",
|
message: "添加成功",
|
});
|
this.$router.go("-1");
|
}
|
} else {
|
console.log("error submit!!");
|
return false;
|
}
|
});
|
},
|
back() {
|
// this.$router.push("/Layout/ModelList");
|
this.$router.go("-1");
|
},
|
uploadLogo(param) {
|
const fd = new FormData();
|
fd.append("file", param.file);
|
request({
|
method: "post",
|
url: `/admin/api-f/file/fileUpload`,
|
data: fd,
|
})
|
.then((res) => {
|
this.ruleForm.pic = res.data.picUrl;
|
})
|
.catch((err) => {
|
if (err && err.status == 401) {
|
return;
|
}
|
this.$notify({
|
type: "error",
|
message: "上传失败",
|
duration: 2500,
|
offset: 57,
|
});
|
});
|
},
|
handleRemoveLogo() {
|
this.ruleForm.pic = "";
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped >
|
.AddModel {
|
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;
|
}
|
}
|
}
|
|
.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>
|
