parent
7ece66f7a6
commit
6bdd800fd4
@ -0,0 +1,257 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="100px" size="medium" class="ry_form">
|
||||
<el-form-item label="状态" prop="showStatus">
|
||||
<DictRadio v-model="queryParams.showStatus" @change="handleQuery" size="small"
|
||||
:radioData="dict.type.sys_normal_disable" :showAll="'all'"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="名称" prop="name">
|
||||
<el-input
|
||||
v-model="queryParams.nameLike"
|
||||
placeholder="名称"
|
||||
clearable
|
||||
size="small"
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item class="flex_one tr">
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
>新增</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="pmsBrandList" @selection-change="handleSelectionChange" border>
|
||||
<el-table-column type="selection" width="55" align="center"/>
|
||||
<el-table-column label="品牌logo" prop="logo">
|
||||
<template slot-scope="{ row }">
|
||||
<el-image v-if="row.logo" :src="row.logo" :preview-src-list="[row.logo]" class="small-img circle-img"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="名称" prop="name"/>
|
||||
<el-table-column label="排序" prop="sort"/>
|
||||
<el-table-column label="状态" prop="showStatus">
|
||||
<template slot-scope="{ row }">
|
||||
<dict-tag :value="row.showStatus" prop-name="sys_normal_disable"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" class-name="small-padding fixed-width">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
@click="handleUpdate(scope.row)"
|
||||
>修改
|
||||
</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
>删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<InBody v-show="total>0">
|
||||
<pagination
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</InBody>
|
||||
|
||||
<!-- 添加或修改品牌管理对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="50%" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="108px" inline class="dialog-form-one">
|
||||
<el-form-item label="状态">
|
||||
<DictRadio v-model="form.showStatus" size="small"
|
||||
:radioData="dict.type.sys_normal_disable"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="名称" prop="name">
|
||||
<el-input v-model="form.name" placeholder="名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input v-model="form.sort" placeholder="请输入排序" />
|
||||
</el-form-item>
|
||||
<el-form-item label="logo" prop="logo">
|
||||
<oss-image-upload v-model="form.logo" :limit="1" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {addPmsBrand, delPmsBrand, exportPmsBrand, getPmsBrand, listPmsBrand, updatePmsBrand} from "@/api/pms/brand";
|
||||
|
||||
export default {
|
||||
name: "PmsBrand",
|
||||
dicts: ['sys_normal_disable'],
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 导出遮罩层
|
||||
exportLoading: false,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 品牌管理表格数据
|
||||
pmsBrandList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
nameLike: null,
|
||||
sort: null,
|
||||
showStatus: null,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
/** 查询品牌管理列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
const {pageNum, pageSize} = this.queryParams;
|
||||
const query = {...this.queryParams, pageNum: undefined, pageSize: undefined};
|
||||
const pageReq = {page: pageNum - 1, size: pageSize};
|
||||
listPmsBrand(query, pageReq).then(response => {
|
||||
const { content, totalElements } = response
|
||||
this.pmsBrandList = content;
|
||||
this.total = totalElements;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
name: null,
|
||||
sort: null,
|
||||
showStatus: 0,
|
||||
logo: null,
|
||||
createBy: null,
|
||||
createTime: null,
|
||||
updateBy: null,
|
||||
updateTime: null
|
||||
};
|
||||
this.resetForm("form");
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1;
|
||||
this.getList();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.id)
|
||||
this.single = selection.length!==1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset();
|
||||
this.open = true;
|
||||
this.title = "添加品牌";
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset();
|
||||
const id = row.id || this.ids
|
||||
getPmsBrand(id).then(response => {
|
||||
this.form = response;
|
||||
this.open = true;
|
||||
this.title = "修改品牌";
|
||||
});
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
if (this.form.id != null) {
|
||||
updatePmsBrand(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
} else {
|
||||
addPmsBrand(this.form).then(response => {
|
||||
this.$modal.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const ids = row.id || this.ids;
|
||||
this.$modal.confirm('是否确认删除品牌管理编号为"' + ids + '"的数据项？').then(function() {
|
||||
return delPmsBrand(ids);
|
||||
}).then(() => {
|
||||
this.getList();
|
||||
this.$modal.msgSuccess("删除成功");
|
||||
}).catch(() => {});
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
const queryParams = this.queryParams;
|
||||
this.$modal.confirm('是否确认导出所有品牌管理数据项？').then(() => {
|
||||
this.exportLoading = true;
|
||||
return exportPmsBrand(queryParams);
|
||||
}).then(response => {
|
||||
this.$download.download(response);
|
||||
this.exportLoading = false;
|
||||
}).catch(() => {});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,376 @@
|
||||
<template>
|
||||
<div class="add-product-wrapper">
|
||||
<el-form label-width="108px" :model="form" ref="form" :rules="rules">
|
||||
<el-card style="margin: 20px 20px; font-size: 14px">
|
||||
<div slot="header">
|
||||
<span>基本信息</span>
|
||||
</div>
|
||||
<el-row>
|
||||
<el-form-item label="是否为课程">
|
||||
<DictRadio v-model="form.isCourse" size="small"
|
||||
:radioData="dict.type.pms_is_course" @change="findCourse"/>
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="商品名称" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入商品名称"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="商品编码" prop="outProductId">
|
||||
<el-input v-model="form.outProductId" placeholder="请输入商品编码"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="品牌" prop="brandId">
|
||||
<brand-select v-model="form.brandId" @change="onBrandChange"></brand-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="分类" prop="categoryId">
|
||||
<product-category-select v-model="form.categoryId" @change="categoryChange"></product-category-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input v-model="form.sort" placeholder="请输入排序"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="价格" prop="price">
|
||||
<el-input v-model="form.price" placeholder="请输入PRICE"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="单位" prop="unit">
|
||||
<el-input v-model="form.unit" placeholder="请输入单位"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="商品重量" prop="weight">
|
||||
<el-input v-model="form.weight" placeholder="商品重量，默认为克"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="上架状态">
|
||||
<DictRadio v-model="form.publishStatus" size="small"
|
||||
:radioData="dict.type.pms_publish_status"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
|
||||
<el-card style="margin: 20px 20px; font-size: 14px">
|
||||
<div slot="header">
|
||||
<span>产品图片</span>
|
||||
</div>
|
||||
<el-form-item label="主图" prop="pic">
|
||||
<oss-image-upload v-model="form.pic" :limit="1"></oss-image-upload>
|
||||
</el-form-item>
|
||||
<el-form-item label="轮播图" prop="albumPics">
|
||||
<oss-image-upload v-model="albumPics" :limit="5"></oss-image-upload>
|
||||
</el-form-item>
|
||||
</el-card>
|
||||
|
||||
<el-card style="margin: 20px 20px; font-size: 14px">
|
||||
<div slot="header">
|
||||
<span>产品规格</span>
|
||||
</div>
|
||||
<el-form-item label="规格类型">
|
||||
<div class="sku-wrapper">
|
||||
<div class="sku_sorts">
|
||||
<div class="sku_sort" v-for="(s, idx0) in productAttr" :key="s.name">
|
||||
<div class="label flex-center">
|
||||
<div class="flex-one">
|
||||
<dict-select v-model="s.name" prop-name="sku_sort_list" value-prop="label"></dict-select>
|
||||
</div><a class="red" @click="deleteSkuSort(idx0)">删除规格类型</a>
|
||||
</div>
|
||||
<div class="values" v-if="s.name">
|
||||
<div class="value" v-for="(it2, idx1) in s.options" :key="idx1">
|
||||
<el-input :value="it2.name" @input="changeName(s, idx1, $event)" placeholder="请输入规格名称"></el-input><a class="red no-break ml8" v-if="idx1 < s.options.length - 1 || (s.options.length === maxOptionNum && idx1 === 3)" @click="deleteOption(s, idx1)">删除</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-button v-if="productAttr.length < 2" @click="addSkuSort">+添加规格类型</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="规格信息">
|
||||
<el-button @click="refreshSku()" class="mb20">刷新列表</el-button>
|
||||
<el-table :data="form.skuList" :max-height="400">
|
||||
<el-table-column v-for="s in skuAttr" :label="s.name" :key="s.name" :prop="s.name"></el-table-column>
|
||||
<el-table-column label="展示图片">
|
||||
<template v-slot="{ row }">
|
||||
<oss-image-upload class="img-upload-mini" v-model="row.pic" :limit="1" :is-show-tip="false"></oss-image-upload>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="销售价格" >
|
||||
<template v-slot="{ row,$index }">
|
||||
<el-form-item
|
||||
:rules="{ required: true, message: '请填写价格', trigger: 'blur' }"
|
||||
:prop="'skuList['+$index+'].price'">
|
||||
<el-input v-model="row.price"></el-input>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="库存">
|
||||
<template v-slot="{ row, $index }">
|
||||
<el-input v-model="row.stock" type="number"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="编码">
|
||||
<template v-slot="{ row }">
|
||||
<el-form-item>
|
||||
<el-input v-model="row.outSkuId"></el-input>
|
||||
<el-input v-model="row.spData" v-show="false"></el-input>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-form-item>
|
||||
</el-card>
|
||||
<el-card style="margin: 20px 20px; font-size: 14px">
|
||||
<div slot="header">
|
||||
<span>详情页</span>
|
||||
</div>
|
||||
<el-form-item label="移动端" prop="detailMobileHtml">
|
||||
<Editor v-model="form.detailMobileHtml" placeholder="请输入内容" type="url"></Editor>
|
||||
</el-form-item>
|
||||
|
||||
|
||||
</el-card>
|
||||
|
||||
<div class="tc">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
|
||||
<CourseSelect ref="courseSelect"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {addPmsProduct, getPmsProduct, updatePmsProduct} from "@/api/pms/product";
|
||||
import ProductCategorySelect from "@/views/components/ProductCategorySelect.vue";
|
||||
import BrandSelect from "@/views/components/BrandSelect.vue";
|
||||
import CourseSelect from "@/views/mall/product/courseSelect";
|
||||
export default {
|
||||
name: "AddProduct",
|
||||
dicts: ['pms_publish_status','pms_is_course'],
|
||||
components: {BrandSelect, ProductCategorySelect,CourseSelect},
|
||||
data() {
|
||||
return {
|
||||
|
||||
rules: {
|
||||
name: [
|
||||
{ required: true, message: '请输入商品名称', trigger: 'blur' },
|
||||
],
|
||||
},
|
||||
form: {
|
||||
publishStatus: 0,
|
||||
sort: 1000,
|
||||
isCourse:'0',
|
||||
},
|
||||
skuAttr:[],
|
||||
albumPics:null,
|
||||
productAttr: [
|
||||
{
|
||||
name: '颜色',
|
||||
options: [
|
||||
{name: '红'},
|
||||
{name: null}
|
||||
]
|
||||
}
|
||||
],
|
||||
maxOptionNum: 44
|
||||
}
|
||||
},
|
||||
created() {
|
||||
const {id} = this.$route.query
|
||||
if (id) {
|
||||
this.getInfo(id);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
findCourse(){
|
||||
if (this.form.isCourse=='1'){
|
||||
this.$refs.courseSelect.chooseCourseObj.open = true
|
||||
}
|
||||
},
|
||||
refreshSku(){
|
||||
let skus = [];
|
||||
let skuMap = new Map()
|
||||
this.skuAttr=[...this.productAttr]
|
||||
if(this.form.skuList){
|
||||
this.form.skuList.forEach(sku=>{
|
||||
skuMap.set(sku.spData,sku)
|
||||
})
|
||||
}
|
||||
this.productAttr.forEach((attr, index) => {
|
||||
const attrSku = [];
|
||||
attr.options.forEach((option) => {
|
||||
if (!option.name) {
|
||||
return
|
||||
}
|
||||
if (index === 0) {
|
||||
attrSku.push({[attr.name]: option.name});
|
||||
} else {
|
||||
skus.forEach(it3 => {
|
||||
attrSku.push({...it3, [attr.name]: option.name })
|
||||
})
|
||||
}
|
||||
})
|
||||
skus = attrSku;
|
||||
})
|
||||
skus.forEach(it => {
|
||||
if(it){
|
||||
it.spData=JSON.stringify(it)
|
||||
}
|
||||
})
|
||||
skus.forEach(it => {
|
||||
let sku = skuMap.get(it.spData);
|
||||
if(sku){
|
||||
it.outSkuId = sku.outSkuId;
|
||||
it.price = sku.price;
|
||||
it.pic = sku.pic;
|
||||
it.stock = sku.stock;
|
||||
it.id = sku.id
|
||||
}else{
|
||||
it.outSkuId = null;
|
||||
it.price = null;
|
||||
it.pic = null;
|
||||
it.stock = null;
|
||||
it.id = null
|
||||
}
|
||||
|
||||
})
|
||||
this.form.productAttr = JSON.stringify(this.productAttr)
|
||||
this.form.skuList= skus
|
||||
},
|
||||
categoryChange(value){
|
||||
if(Array.isArray(value)){
|
||||
console.log(value.toString())
|
||||
this.form.productCategoryName=value.toString()
|
||||
}else{
|
||||
this.form.productCategoryName=null
|
||||
}
|
||||
|
||||
},
|
||||
onBrandChange(value){
|
||||
this.form.brandName = value
|
||||
},
|
||||
getInfo(id) {
|
||||
getPmsProduct(id).then(response => {
|
||||
const {albumPics } = response
|
||||
if (albumPics) {
|
||||
this.albumPics = albumPics.split(',')
|
||||
}
|
||||
this.form = response;
|
||||
if(this.form.productAttr){
|
||||
this.productAttr =JSON.parse(this.form.productAttr)
|
||||
}
|
||||
this.refreshSku()
|
||||
});
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
if(this.albumPics){
|
||||
this.form.albumPics = this.albumPics.toString()
|
||||
}
|
||||
if(this.form.categoryId && Array.isArray(this.form.categoryId)){
|
||||
this.form.categoryId = this.form.categoryId.pop()
|
||||
}
|
||||
//商品价格没填时取sku的最低价
|
||||
if (!this.form.price){
|
||||
this.form.price = Math.min.apply(Math, this.form.skuList.map(it => it.price))
|
||||
}
|
||||
if (this.form.id != null) {
|
||||
updatePmsProduct(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
});
|
||||
} else {
|
||||
addPmsProduct(this.form).then(response => {
|
||||
this.$modal.msgSuccess("新增成功");
|
||||
});
|
||||
}
|
||||
this.cancel();
|
||||
}else{
|
||||
if(this.form.name){
|
||||
this.$alert('请填写规格价格', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
});
|
||||
}else{
|
||||
this.$alert('请填写商品名称', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
cancel() {
|
||||
this.$tab.closeOpenPage({ path: '/pms/product' })
|
||||
},
|
||||
changeName(s, idx, val) {
|
||||
s.options[idx].name = val;
|
||||
if (s.options.length - 1 !== idx || s.options.length >= this.maxOptionNum) {
|
||||
return
|
||||
}
|
||||
s.options.push({name: null})
|
||||
},
|
||||
addSkuSort() {
|
||||
this.productAttr.push({
|
||||
name: null,
|
||||
options: [{name: null}]
|
||||
})
|
||||
},
|
||||
deleteSkuSort(idx) {
|
||||
this.productAttr.splice(idx);
|
||||
},
|
||||
deleteOption(s, idx) {
|
||||
s.options.splice(idx, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus">
|
||||
.add-product-wrapper
|
||||
padding 12px
|
||||
.content
|
||||
margin 0 auto
|
||||
width 75%
|
||||
min-width 800px
|
||||
.sku-wrapper
|
||||
background-color #f7f8fa
|
||||
padding 12px
|
||||
.sku_sorts
|
||||
.sku_sort
|
||||
background-color white
|
||||
margin-bottom 12px
|
||||
.label
|
||||
padding 8px
|
||||
.values
|
||||
padding 8px 0 0 8px
|
||||
border-top 1px solid $border-color
|
||||
display flex
|
||||
flex-wrap wrap
|
||||
.value
|
||||
padding 0 32px 8px 0
|
||||
width 200px!important
|
||||
display flex
|
||||
align-items center
|
||||
.img-upload-mini .el-upload--picture-card
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
line-height: 57px;
|
||||
</style>
|
||||
@ -0,0 +1,133 @@
|
||||
<template>
|
||||
<el-dialog :title="chooseCourseObj.title" :visible.sync="chooseCourseObj.open" :width="chooseCourseObj.width" append-to-body>
|
||||
<el-form ref="auditForm" inline :model="chooseCourseObj.queryParams" label-width="80px">
|
||||
<el-form-item label="课程名称" prop="courseName">
|
||||
<el-input
|
||||
size="small"
|
||||
placeholder="请输入课程名称"
|
||||
v-model="chooseCourseObj.queryParams.courseName"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="课程分类" prop="courseTypeId">
|
||||
<product-category-select v-model="chooseCourseObj.queryParams.courseTypeId"></product-category-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="getCourseList">搜索</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-table class="mt20" :data="chooseCourseObj.list" ref="table" v-loading="chooseCourseObj.loading" max-height="500" border
|
||||
row-key="id" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" :reserve-selection="true"/>
|
||||
<el-table-column label="课程名称" prop="courseName">
|
||||
<template v-slot="{row}">
|
||||
<div class="flex-center">
|
||||
<el-image v-if="row.pic" :src="row.pic" :preview-src-list="[row.pic]" class="small-img circle-img"/>
|
||||
<span class="ml5">{{ row.name }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="课程类型" prop="courseTypeName"/>
|
||||
<el-table-column label="课程状态" prop="sale"/>
|
||||
<el-table-column label="授课模式" prop="teachingMode"/>
|
||||
<el-table-column label="创建时间" prop="createTime"/>
|
||||
</el-table>
|
||||
<pagination
|
||||
v-show="chooseCourseObj.total>0"
|
||||
:total="chooseCourseObj.total"
|
||||
:page.sync="chooseCourseObj.queryParams.pageNum"
|
||||
:limit.sync="chooseCourseObj.queryParams.pageSize"
|
||||
@pagination="getCourseList"
|
||||
/>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="chooseCourseObj.open=false">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
import ProductCategorySelect from "@/views/components/ProductCategorySelect.vue";
|
||||
import {listCourseForProduct} from "@/api/pms/product";
|
||||
|
||||
export default {
|
||||
components: {ProductCategorySelect},
|
||||
name: "CourseSelect",
|
||||
data() {
|
||||
return {
|
||||
selectCourseIds: [],
|
||||
selectProducts: [],
|
||||
chooseCourseObj: {
|
||||
loading: false,
|
||||
open: false,
|
||||
title: "选择课程",
|
||||
list: [],
|
||||
width: '60%',
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
sale:'1',
|
||||
courseTypeId: null,
|
||||
courseName: null
|
||||
},
|
||||
total: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
submitForm() {
|
||||
this.$emit('onComplete', this.selectProducts)
|
||||
this.chooseCourseObj.open = false
|
||||
},
|
||||
async init(chooseProductId) {
|
||||
this.chooseCourseObj.queryParams.excludeProductIds = chooseProductId;
|
||||
this.chooseCourseObj.queryParams.pageNum = 1;
|
||||
await this.getCourseList();
|
||||
this.chooseCourseObj.open = true
|
||||
this.$nextTick(()=>{
|
||||
this.$refs.table.clearSelection()
|
||||
})
|
||||
},
|
||||
judge() {
|
||||
this.$nextTick(()=>{
|
||||
this.chooseCourseObj.list.forEach(ele => {
|
||||
if (this.selectProducts.some(item => item.id === ele.id)) {
|
||||
this.$refs.table.toggleRowSelection(ele, true)
|
||||
} else {
|
||||
this.$refs.table.toggleRowSelection(ele, false)
|
||||
}
|
||||
});
|
||||
})
|
||||
},
|
||||
handleSelectionChange(selection) {
|
||||
this.selectProducts = selection
|
||||
},
|
||||
async getCourseList() {
|
||||
this.chooseCourseObj.loading = true;
|
||||
const query = {...this.chooseCourseObj.queryParams, pageNum: undefined, pageSize: undefined};
|
||||
if (query.categoryId && Array.isArray(query.categoryId)) {
|
||||
query.categoryId = query.categoryId.pop()
|
||||
}
|
||||
const {pageNum, pageSize} = this.chooseCourseObj.queryParams;
|
||||
const pageReq = {page: pageNum - 1, size: pageSize};
|
||||
await listCourseForProduct(query, pageReq).then(response => {
|
||||
const {content, totalElements} = response
|
||||
this.chooseCourseObj.list = [...content];
|
||||
this.chooseCourseObj.total = totalElements;
|
||||
this.chooseCourseObj.loading = false;
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus">
|
||||
.line
|
||||
display flex
|
||||
align-items center
|
||||
margin-bottom: 5px;
|
||||
border-bottom 1px dashed #ccc
|
||||
|
||||
.line:last-child
|
||||
border-bottom 0 !important
|
||||
margin-bottom 0 !important
|
||||
</style>
|
||||
@ -0,0 +1,320 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form
|
||||
:model="queryParams"
|
||||
ref="queryForm"
|
||||
:inline="true"
|
||||
v-show="showSearch"
|
||||
label-width="100px"
|
||||
size="medium"
|
||||
class="ry_form"
|
||||
>
|
||||
<el-form-item label="状态" prop="showStatus">
|
||||
<DictRadio
|
||||
v-model="queryParams.showStatus"
|
||||
@change="handleQuery"
|
||||
size="small"
|
||||
:radioData="dict.type.sys_show_status"
|
||||
:showAll="'all'"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="名称" prop="typeName">
|
||||
<el-input
|
||||
v-model="queryParams.nameLike"
|
||||
placeholder="名称"
|
||||
clearable
|
||||
size="small"
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item class="flex_one tr">
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-search"
|
||||
size="mini"
|
||||
@click="handleQuery"
|
||||
>搜索</el-button
|
||||
>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
|
||||
>重置</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
>新增
|
||||
</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="pmsProductCategoryList"
|
||||
border
|
||||
:tree-props="{ hasChildren: 'hasChildren', children: 'children' }"
|
||||
@selection-change="handleSelectionChange"
|
||||
row-key="id"
|
||||
>
|
||||
<el-table-column label="名称" prop="typeName" />
|
||||
<el-table-column label="图片" prop="icon">
|
||||
<template slot-scope="{ row }">
|
||||
<el-image
|
||||
v-if="row.icon"
|
||||
:src="row.icon"
|
||||
:preview-src-list="[row.icon]"
|
||||
class="small-img circle-img"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="排序" prop="sort" />
|
||||
<el-table-column label="状态" prop="showStatus">
|
||||
<template v-slot="{ row }">
|
||||
<dict-tag
|
||||
:value="row.showStatus"
|
||||
prop-name="sys_show_status"
|
||||
></dict-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="操作"
|
||||
class-name="small-padding fixed-width"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
@click="handleUpdate(scope.row)"
|
||||
>修改
|
||||
</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
>删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 添加或修改商品分类对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="500px">
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="108px">
|
||||
<el-form-item label="名称" prop="typeName">
|
||||
<el-input v-model="form.typeName" placeholder="名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="图片" prop="icon">
|
||||
<oss-image-upload v-model="form.icon" :limit="1" />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态">
|
||||
<DictRadio
|
||||
v-model="form.showStatus"
|
||||
size="small"
|
||||
:radioData="dict.type.sys_show_status"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input v-model="form.sort" placeholder="排序" />
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="层级" prop="level">
|
||||
<el-input v-model="form.level" placeholder="层级" />
|
||||
</el-form-item> -->
|
||||
<!-- <el-form-item label="上级分类" prop="parentId">
|
||||
<product-category-select class="w200" v-model="form.parentId" :props="{ checkStrictly: true }"/>
|
||||
</el-form-item> -->
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
listPmsProductCategory,
|
||||
getPmsProductCategory,
|
||||
delPmsProductCategory,
|
||||
addPmsProductCategory,
|
||||
updatePmsProductCategory,
|
||||
exportPmsProductCategory,
|
||||
} from "@/api/pms/productCategory";
|
||||
import ProductCategorySelect from "@/views/components/ProductCategorySelect.vue";
|
||||
|
||||
export default {
|
||||
name: "PmsProductCategory",
|
||||
dicts: ["sys_show_status"],
|
||||
components: { ProductCategorySelect },
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 导出遮罩层
|
||||
exportLoading: false,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 商品分类表格数据
|
||||
pmsProductCategoryList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
parentId: null,
|
||||
nameLike: null,
|
||||
level: null,
|
||||
showStatus: null,
|
||||
sort: null,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
/** 查询商品分类列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
const query = { ...this.queryParams };
|
||||
listPmsProductCategory(query).then((rows) => {
|
||||
this.pmsProductCategoryList = rows;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
parentId: null,
|
||||
name: null,
|
||||
level: null,
|
||||
showStatus: 0,
|
||||
sort: null,
|
||||
icon: null,
|
||||
createBy: null,
|
||||
createTime: null,
|
||||
updateBy: null,
|
||||
updateTime: null,
|
||||
};
|
||||
this.resetForm("form");
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.getList();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map((item) => item.id);
|
||||
this.single = selection.length !== 1;
|
||||
this.multiple = !selection.length;
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset();
|
||||
this.open = true;
|
||||
this.title = "添加商品分类";
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset();
|
||||
const id = row.id || this.ids;
|
||||
getPmsProductCategory(id).then((response) => {
|
||||
this.form = response;
|
||||
this.open = true;
|
||||
this.title = "修改商品分类";
|
||||
});
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate((valid) => {
|
||||
if (valid) {
|
||||
let p;
|
||||
if (this.form.parentId) {
|
||||
this.form.parentId = this.form.parentId.pop();
|
||||
}
|
||||
if (this.form.id != null) {
|
||||
p = updatePmsProductCategory(this.form).then((response) => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
} else {
|
||||
p = addPmsProductCategory(this.form).then((response) => {
|
||||
this.$modal.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
}
|
||||
p.then(() => {
|
||||
this.$store.dispatch("mall/loadProductCategories", true);
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
if (row.children && row.children.length > 0) {
|
||||
this.$message.error("请先删除子目录");
|
||||
return;
|
||||
}
|
||||
const ids = row.id;
|
||||
this.$modal
|
||||
.confirm('是否确认删除商品分类编号为"' + ids + '"的数据项？')
|
||||
.then(function () {
|
||||
return delPmsProductCategory(ids);
|
||||
})
|
||||
.then(() => {
|
||||
this.getList();
|
||||
this.$modal.msgSuccess("删除成功");
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
const queryParams = this.queryParams;
|
||||
this.$modal
|
||||
.confirm("是否确认导出所有商品分类数据项？")
|
||||
.then(() => {
|
||||
this.exportLoading = true;
|
||||
return exportPmsProductCategory(queryParams);
|
||||
})
|
||||
.then((response) => {
|
||||
this.$download.download(response);
|
||||
this.exportLoading = false;
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
Loading…
Reference in new issue