<template>
|
<div class="ProductList">
|
<div class="header">
|
<span class="iconfont" @click="back"></span> 产品列表
|
</div>
|
<!-- <div class="buttonArea">
|
<div class="addButton" @click="addProduct">
|
<span class="icon">+</span>
|
添加
|
</div>
|
</div> -->
|
<div class="content">
|
<div class="table-area">
|
<el-table
|
id="multipleTable"
|
ref="multipleTable"
|
:data="dataList"
|
tooltip-effect="dark"
|
:fit="true"
|
:key="num"
|
>
|
<el-table-column label="序号" width="68">
|
<template slot-scope="scope">{{ scope.$index + 1 }}</template>
|
</el-table-column>
|
<el-table-column
|
prop="productName"
|
label="产品名称"
|
></el-table-column>
|
|
<el-table-column label="模块类型" prop="modelName"> </el-table-column>
|
<el-table-column
|
prop="createTime"
|
label="添加时间"
|
sortable
|
></el-table-column>
|
<el-table-column prop="sort" label="排序"></el-table-column>
|
|
<el-table-column label="隐藏/显示">
|
<template slot-scope="scope">
|
<el-switch
|
v-model="scope.row.isShow"
|
active-color="#0064FF"
|
inactive-color="#C0C5CC"
|
@change="toggleIsShow($event, scope.row.id)"
|
>
|
</el-switch>
|
</template>
|
</el-table-column>
|
|
<el-table-column label="加入推荐位">
|
<template slot-scope="scope">
|
<el-checkbox
|
v-model="scope.row.showIndex"
|
@change="toggleIndexShow($event, scope.row.id)"
|
></el-checkbox>
|
</template>
|
</el-table-column>
|
|
<el-table-column label="操作">
|
<template slot-scope="scope">
|
<!-- <span class="link" @click="edit(scope.row)"> 编辑 </span> -->
|
<span class="del" @click="chooseDelete(scope.row.id)">
|
删除
|
</span>
|
</template>
|
</el-table-column>
|
|
<el-table-column
|
width="350"
|
key="status"
|
label="安装包管理"
|
align="center"
|
>
|
<template slot-scope="scope">
|
<div class="uploadBox">
|
<file-uploader
|
single
|
uploadPlaceholder="上传文件"
|
url="/admin/api-f/file/upload"
|
@complete="onFileUpload($event, scope.row)"
|
@file-added="onFileAdded(scope.row)"
|
v-if="scope.row.status === 0"
|
/>
|
<div class="name" v-if="scope.row.status === 1">
|
{{ scope.row.component_name }}
|
</div>
|
<div
|
class="cancel"
|
v-if="scope.row.status === 1"
|
@click="cancel(scope.row)"
|
>
|
取消
|
</div>
|
<div
|
class="save"
|
@click="submit(scope.row)"
|
v-if="scope.row.status === 1"
|
>
|
保存
|
</div>
|
|
<div
|
class="save"
|
@click="editPcg(scope.row)"
|
v-if="scope.row.status === 2"
|
>
|
编辑
|
</div>
|
</div>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
|
<DelBox
|
v-if="showDelBox"
|
@close="showDelBox = false"
|
@confirm="deleteProduct"
|
></DelBox>
|
</div>
|
</template>
|
|
<script>
|
import DelBox from "@/views/operateManage/productManage/DelBox";
|
import FileUploader from "@/components/subComponents/FileUpload/index";
|
import { getFilePath } from "@/api/utils";
|
|
import {
|
getProductListByModel,
|
setProductIsShow,
|
setProductIndexShow,
|
deleteProduct,
|
saveProductPackage,
|
} from "@/api/product";
|
|
export default {
|
components: {
|
DelBox,
|
FileUploader,
|
},
|
created() {
|
this.getProductList();
|
},
|
data() {
|
return {
|
input: "",
|
time: "",
|
dataList: [],
|
showDelBox: false,
|
delId: null,
|
stop: false,
|
num: 0,
|
};
|
},
|
methods: {
|
async getProductList() {
|
const res = await getProductListByModel({
|
id: this.$route.query.id,
|
});
|
if (res && res.success) {
|
this.dataList = res.data.productList;
|
this.dataList.forEach((item) => {
|
item.status = 2;
|
});
|
}
|
},
|
edit() {
|
this.$router.push("/Layout/AddProduct");
|
},
|
chooseDelete(id) {
|
this.delId = id;
|
this.showDelBox = true;
|
},
|
async deleteProduct() {
|
this.showDelBox = false;
|
const res = await deleteProduct({
|
id: this.delId,
|
});
|
if (res && res.success) {
|
this.getProductList();
|
this.$notify({
|
type: "success",
|
message: "删除成功",
|
});
|
}
|
},
|
addProduct() {
|
this.$router.push("/Layout/AddProduct");
|
},
|
back() {
|
this.$router.push("/Layout/ModelList");
|
},
|
async toggleIsShow(val, id) {
|
await setProductIsShow({
|
id: id,
|
isShow: val,
|
});
|
},
|
async toggleIndexShow(val, id) {
|
await setProductIndexShow({
|
id: id,
|
indexShow: val,
|
});
|
},
|
onFileUpload(params, row) {
|
row.component_name = params.filename;
|
console.log(row.component_name);
|
getFilePath(params).then((res) => {
|
if (res.code == 200) {
|
this.num++;
|
row.component_path = res.data;
|
row.status = 1;
|
}
|
});
|
},
|
onFileAdded() {},
|
cancel(row) {
|
this.num++;
|
row.status = 0;
|
},
|
async submit(row) {
|
console.log(row);
|
const res = await saveProductPackage({
|
component_path: row.component_path,
|
productId: row.productId,
|
});
|
if (res && res.success) {
|
this.$notify({
|
type: "success",
|
message: "保存成功",
|
});
|
row.status = 2;
|
this.num++;
|
}
|
},
|
editPcg(row) {
|
this.num++;
|
row.status = 0;
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.ProductList {
|
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;
|
}
|
}
|
|
.buttonArea {
|
display: flex;
|
margin: 20px 0 0 20px;
|
.addButton {
|
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;
|
}
|
}
|
}
|
|
.content {
|
margin: 24px;
|
padding: 20px;
|
background-color: #fff;
|
|
.search {
|
display: flex;
|
align-items: center;
|
line-height: 23px;
|
|
.label {
|
margin-right: 20px;
|
height: 20px;
|
font-size: 14px;
|
color: #3d3d3d;
|
}
|
|
.el-input ::v-deep {
|
margin-right: 30px;
|
width: 300px;
|
height: 32px;
|
.el-input__inner {
|
width: 100%;
|
height: 32px;
|
line-height: 32px;
|
color: #3d3d3d;
|
border-radius: 0;
|
border-color: #c0c5cc;
|
&::-webkit-input-placeholder {
|
color: #999999;
|
}
|
|
&:focus {
|
border-color: #0065ff;
|
}
|
}
|
}
|
|
.el-date-editor ::v-deep {
|
box-sizing: border-box;
|
height: 32px;
|
|
.el-input__icon,
|
.el-input__suffix {
|
margin-top: -7px;
|
}
|
.el-range-separator {
|
line-height: 27px;
|
}
|
}
|
|
.button {
|
margin-left: 36px;
|
width: 60px;
|
height: 32px;
|
text-align: center;
|
border-radius: 3px;
|
background: #0064ff;
|
font-size: 14px;
|
line-height: 32px;
|
color: #ffffff;
|
cursor: pointer;
|
}
|
}
|
|
.link {
|
margin-right: 10px;
|
color: #0064ff;
|
cursor: pointer;
|
}
|
|
.del {
|
color: #ff4a32;
|
cursor: pointer;
|
}
|
}
|
|
.uploadBox {
|
display: flex;
|
justify-content: center;
|
line-height: 32px;
|
|
.cancel {
|
color: #0064ff;
|
margin: 0 10px;
|
margin-left: 35px;
|
cursor: pointer;
|
}
|
|
.save {
|
color: #0064ff;
|
cursor: pointer;
|
}
|
}
|
}
|
</style>
|
