7 changed files with 3084 additions and 2904 deletions
@ -1,72 +1,83 @@ |
||||
<template> |
||||
<div> |
||||
<el-form ref="form" :model="form"> |
||||
<el-form-item prop="brandName" label="品牌名称" label-width="100px" |
||||
:rules="[{ required: true, message: '请输入品牌名称', trigger: ['blur', 'change'] }]"> |
||||
<el-input v-model="form.brandName"></el-input> |
||||
</el-form-item> |
||||
<el-form-item label="品牌首字母" prop="firstLetter" label-width="100px" |
||||
:rules="[{ required: true, message: '请输入品牌首字母', trigger: ['blur', 'change'] }]"> |
||||
<el-input v-model="form.firstLetter"></el-input> |
||||
</el-form-item> |
||||
<el-form-item label=" 品牌LOGO" label-width="100px"> |
||||
<upload :photo="form.logoUrl" @success="uploadSuccess" tip="只能上传jpg/png格式文件，文件不能超过50kb"> |
||||
</upload> |
||||
</el-form-item> |
||||
<el-form-item label="排序" label-width="100px"> |
||||
<el-input-number v-model="form.sort" :min="0" /> |
||||
</el-form-item> |
||||
<el-form-item label="是否显示" label-width="100px"> |
||||
<el-switch v-model="form.showFlag" active-text="显示" inactive-text="隐藏" active-value="1" |
||||
inactive-value="2" /> |
||||
</el-form-item> |
||||
</el-form> |
||||
<div slot="footer" class="footer"> |
||||
<el-button @click="$emit('close')" >取 消</el-button> |
||||
<el-button @click="save" type="primary">确 定</el-button> |
||||
</div> |
||||
<div> |
||||
<el-form ref="form" :model="form"> |
||||
<el-form-item |
||||
prop="brandName" |
||||
label="品牌名称" |
||||
label-width="100px" |
||||
:rules="[{ required: true, message: '请输入品牌名称', trigger: ['blur', 'change'] }]" |
||||
> |
||||
<el-input v-model="form.brandName"></el-input> |
||||
</el-form-item> |
||||
<el-form-item |
||||
label="品牌首字母" |
||||
prop="firstLetter" |
||||
label-width="100px" |
||||
:rules="[{ required: true, message: '请输入品牌首字母', trigger: ['blur', 'change'] }]" |
||||
> |
||||
<el-input v-model="form.firstLetter"></el-input> |
||||
</el-form-item> |
||||
<el-form-item |
||||
label=" 品牌LOGO" |
||||
label-width="100px" |
||||
prop="logoUrl" |
||||
:rules="[{ required: true, message: '请上传品牌LOGO', trigger: ['blur', 'change'] }]" |
||||
> |
||||
<upload :photo="form.logoUrl" @success="uploadSuccess" tip="只能上传jpg/png格式文件，文件不能超过50kb"> </upload> |
||||
</el-form-item> |
||||
<el-form-item label="排序" label-width="100px"> |
||||
<el-input-number v-model="form.sort" :min="0" /> |
||||
</el-form-item> |
||||
<el-form-item label="是否显示" label-width="100px"> |
||||
<el-switch v-model="form.showFlag" active-text="显示" inactive-text="隐藏" active-value="1" inactive-value="2" /> |
||||
</el-form-item> |
||||
</el-form> |
||||
<div slot="footer" class="footer"> |
||||
<el-button @click="$emit('close')">取 消</el-button> |
||||
<el-button @click="save" type="primary">确 定</el-button> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import upload from '@/components/Upload/index' |
||||
export default { |
||||
components: { upload }, |
||||
components: { upload }, |
||||
|
||||
data() { |
||||
return { |
||||
apiMode:"brandSave", |
||||
form: { |
||||
"brandName": "", |
||||
"firstLetter": "", |
||||
"logoUrl": "", |
||||
"showFlag": "1", |
||||
"sort": "1" |
||||
} |
||||
data() { |
||||
return { |
||||
apiMode: 'brandSave', |
||||
form: { |
||||
brandName: '', |
||||
firstLetter: '', |
||||
logoUrl: '', |
||||
showFlag: '1', |
||||
sort: '1' |
||||
} |
||||
} |
||||
}, |
||||
methods: { |
||||
save() { |
||||
this.$refs.form.validate(valid => { |
||||
if (valid) { |
||||
this.$emit('brandSave', this.form, this.apiMode) |
||||
} |
||||
}) |
||||
}, |
||||
methods: { |
||||
save() { |
||||
this.$refs.form.validate((valid) => { |
||||
if (valid) { |
||||
this.$emit("brandSave",this.form,this.apiMode) |
||||
} |
||||
}); |
||||
}, |
||||
uploadSuccess(e, res) { |
||||
console.log(...arguments,"uploadSuccess") |
||||
if (res.code == 20000) { |
||||
({ publicUrl: this.form.logoUrl } = res.data); |
||||
} |
||||
}, |
||||
uploadSuccess(e, res) { |
||||
console.log(...arguments, 'uploadSuccess') |
||||
if (res.code == 20000) { |
||||
;({ publicUrl: this.form.logoUrl } = res.data) |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
.footer { |
||||
width: 100%; |
||||
display: flex; |
||||
justify-content: center; |
||||
width: 100%; |
||||
display: flex; |
||||
justify-content: center; |
||||
} |
||||
</style> |
||||
@ -1,175 +1,195 @@ |
||||
<template> |
||||
<div> |
||||
<el-card :bordered="false" shadow="never" class="ivu-mt" :body-style="{ padding: 0 }"> |
||||
<div class="padding-add"> |
||||
<el-form ref="artFrom" :model="page" label-width="80px" label-position="right" class="tabform" |
||||
@submit.native.prevent inline> |
||||
<el-form-item label="输入搜索"> |
||||
<el-input clearable v-model="page.brandName" placeholder="品牌名称/关键词" |
||||
class="form_content_width"></el-input> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<el-button type="primary" @click="userSearchs">查询</el-button> |
||||
</el-form-item> |
||||
</el-form> |
||||
</div> |
||||
</el-card> |
||||
<el-card :bordered="false" shadow="never" class="ivu-mt-16"> |
||||
<el-button type="primary" @click="addBrand">添加品牌</el-button> |
||||
<el-table @current-change="tableCurrentChange" ref="table" :data="tableData" v-loading="loading" |
||||
highlight-current-row :row-key="getRowKey" @selection-change="handleSelectRow" empty-text="暂无数据" |
||||
class="mt14"> |
||||
<el-table-column type="selection" width="60" :reserve-selection="true"> </el-table-column> |
||||
<el-table-column label="编号"> |
||||
<template slot-scope="scope"> |
||||
<span>{{ scope.row.brandNum }}</span> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="品牌名称"> |
||||
<template slot-scope="scope"> |
||||
<span>{{ scope.row.brandName }}</span> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="品牌首字母" prop="firstLetter"> </el-table-column> |
||||
<el-table-column label="排序" prop="sort"> </el-table-column> |
||||
<el-table-column label="是否显示"> |
||||
<template slot-scope="scope"> |
||||
<el-switch disabled active-value="1" inactive-value="0" v-model="scope.row.showFlag" |
||||
active-color="#13ce66" inactive-color="#ff4949"> |
||||
</el-switch> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="操作" fixed="right"> |
||||
<template slot-scope="scope"> |
||||
<el-button type="text" @click="edit(scope.row)">编辑</el-button> |
||||
<el-divider direction="vertical"></el-divider> |
||||
<el-button type="text" @click="del(scope.row)">删除</el-button> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
<div class="acea-row row-right page"> |
||||
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" |
||||
:current-page="page.currentPage" :page-sizes="[10, 15, 20, 30]" :page-size="page.pageSize" |
||||
layout="total, sizes, prev, pager, next, jumper" :total="page.totalCount" /> |
||||
</div> |
||||
</el-card> |
||||
<el-dialog title="品牌设置" :visible.sync="isAddOrEdit" v-loading="addLoading"> |
||||
<addOrEdit v-if="isAddOrEdit" @close="isAddOrEdit = false" @brandSave="brandSave" ref="addOrEdit"></addOrEdit> |
||||
</el-dialog> |
||||
</div> |
||||
<div> |
||||
<el-card :bordered="false" shadow="never" class="ivu-mt" :body-style="{ padding: 0 }"> |
||||
<div class="padding-add"> |
||||
<el-form ref="artFrom" :model="page" label-width="80px" label-position="right" class="tabform" @submit.native.prevent inline> |
||||
<el-form-item label="输入搜索"> |
||||
<el-input clearable v-model="page.params.brandName" placeholder="品牌名称/关键词" class="form_content_width"></el-input> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<el-button type="primary" @click="userSearchs">查询</el-button> |
||||
</el-form-item> |
||||
</el-form> |
||||
</div> |
||||
</el-card> |
||||
<el-card :bordered="false" shadow="never" class="ivu-mt-16"> |
||||
<el-button type="primary" @click="addBrand">添加品牌</el-button> |
||||
<el-table |
||||
@current-change="tableCurrentChange" |
||||
ref="table" |
||||
:data="tableData" |
||||
v-loading="loading" |
||||
highlight-current-row |
||||
:row-key="getRowKey" |
||||
@selection-change="handleSelectRow" |
||||
empty-text="暂无数据" |
||||
class="mt14" |
||||
> |
||||
<el-table-column type="selection" width="60" :reserve-selection="true"> </el-table-column> |
||||
<el-table-column label="编号"> |
||||
<template slot-scope="scope"> |
||||
<span>{{ scope.row.brandNum }}</span> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="品牌名称"> |
||||
<template slot-scope="scope"> |
||||
<span>{{ scope.row.brandName }}</span> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="品牌首字母" prop="firstLetter"> </el-table-column> |
||||
<el-table-column label="排序" prop="sort"> </el-table-column> |
||||
<el-table-column label="是否显示"> |
||||
<template slot-scope="scope"> |
||||
<el-switch disabled active-value="1" inactive-value="0" v-model="scope.row.showFlag" active-color="#13ce66" inactive-color="#ff4949"> |
||||
</el-switch> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="操作" fixed="right"> |
||||
<template slot-scope="scope"> |
||||
<el-button type="text" @click="edit(scope.row)">编辑</el-button> |
||||
<el-divider direction="vertical"></el-divider> |
||||
<el-button type="text" @click="del(scope.row)">删除</el-button> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
<div class="acea-row row-right page"> |
||||
<el-pagination |
||||
@size-change="handleSizeChange" |
||||
@current-change="handleCurrentChange" |
||||
:current-page="page.currentPage" |
||||
:page-sizes="[10, 15, 20, 30]" |
||||
:page-size="page.pageSize" |
||||
layout="total, sizes, prev, pager, next, jumper" |
||||
:total="page.totalCount" |
||||
/> |
||||
</div> |
||||
</el-card> |
||||
<el-dialog title="品牌设置" :visible.sync="isAddOrEdit" v-loading="addLoading"> |
||||
<addOrEdit v-if="isAddOrEdit" @close="isAddOrEdit = false" @brandSave="brandSave" ref="addOrEdit"></addOrEdit> |
||||
</el-dialog> |
||||
</div> |
||||
</template> |
||||
<script> |
||||
import productApi from '@/api/product/productAttr.js'; |
||||
import { loadingFn } from "@/utils/validate" |
||||
import addOrEdit from "./components/AddOrEdit.vue" |
||||
import productApi from '@/api/product/productAttr.js' |
||||
import { loadingFn } from '@/utils/validate' |
||||
import addOrEdit from './components/AddOrEdit.vue' |
||||
export default { |
||||
components: { addOrEdit }, |
||||
data() { |
||||
return { |
||||
addLoading: false, |
||||
isAddOrEdit: false, |
||||
selection: [], |
||||
selectAttrList: null, |
||||
isShowAttrList: false, |
||||
loading: false, |
||||
page: { |
||||
"currentPage": 1, |
||||
"pageSize": 10, |
||||
"params": { |
||||
brandName:"" |
||||
}, |
||||
totalCount: 0 |
||||
}, |
||||
tableData: [], |
||||
total: 0, |
||||
selectedIds: new Set(), //选中合并项的id |
||||
ids: [], |
||||
multipleSelection: [], |
||||
}; |
||||
components: { addOrEdit }, |
||||
data() { |
||||
return { |
||||
addLoading: false, |
||||
isAddOrEdit: false, |
||||
selection: [], |
||||
selectAttrList: null, |
||||
isShowAttrList: false, |
||||
loading: false, |
||||
page: { |
||||
currentPage: 1, |
||||
pageSize: 10, |
||||
params: { |
||||
brandName: '' |
||||
}, |
||||
totalCount: 0 |
||||
}, |
||||
tableData: [], |
||||
total: 0, |
||||
selectedIds: new Set(), //选中合并项的id |
||||
ids: [], |
||||
multipleSelection: [] |
||||
} |
||||
}, |
||||
computed: {}, |
||||
created() { |
||||
this.init() |
||||
}, |
||||
methods: { |
||||
addBrand() { |
||||
this.isAddOrEdit = true |
||||
}, |
||||
computed: {}, |
||||
created() { |
||||
this.init() |
||||
brandSave(e, model = 'brandSave') { |
||||
loadingFn.call( |
||||
this, |
||||
'addLoading', |
||||
productApi[model](e).then(res => { |
||||
if (res.code == 20000) { |
||||
this.$message.success('操作成功') |
||||
setTimeout(() => { |
||||
this.isAddOrEdit = false |
||||
this.getList() |
||||
}, 1000) |
||||
} |
||||
}), |
||||
1000 |
||||
) |
||||
}, |
||||
methods: { |
||||
addBrand() { |
||||
this.isAddOrEdit = true; |
||||
}, |
||||
brandSave(e,model="brandSave") { |
||||
loadingFn.call(this, "addLoading", productApi[model](e).then(res => { |
||||
if (res.code == 20000) { |
||||
this.$message.success("操作成功") |
||||
setTimeout(() => { |
||||
this.isAddOrEdit = false; |
||||
this.getList(); |
||||
|
||||
}, 1000); |
||||
} |
||||
}), 1000); |
||||
|
||||
}, |
||||
tableCurrentChange(e) { }, |
||||
handleCurrentChange(val) { |
||||
this.page.currentPage = val; |
||||
this.getList() |
||||
}, |
||||
handleSizeChange(val) { |
||||
this.page.pageSize = val |
||||
this.getList() |
||||
}, |
||||
clearSelection() { }, |
||||
onCancel() { }, |
||||
tableCurrentChange(e) {}, |
||||
handleCurrentChange(val) { |
||||
this.page.currentPage = val |
||||
this.getList() |
||||
}, |
||||
handleSizeChange(val) { |
||||
this.page.pageSize = val |
||||
this.getList() |
||||
}, |
||||
clearSelection() {}, |
||||
onCancel() {}, |
||||
|
||||
showAttrList(e) { }, |
||||
getRowKey(row) { }, |
||||
//全选和取消全选时触发 |
||||
handleSelectAll(selection) { }, |
||||
// 选中某一行 |
||||
handleSelectRow(selection) { }, |
||||
setChecked() { }, |
||||
// 删除 |
||||
del(row) { |
||||
this.$alert('请确定删除该数据!', '提示', { |
||||
confirmButtonText: '确定', |
||||
callback: action => { |
||||
if (action == "confirm") { |
||||
loadingFn.call(this, "loading", productApi.brandDelete(row).then(res => { |
||||
if (res.code = 20000) { |
||||
this.$message.success("操作成功！") |
||||
this.handleCurrentChange() |
||||
} |
||||
})); |
||||
} |
||||
showAttrList(e) {}, |
||||
getRowKey(row) {}, |
||||
//全选和取消全选时触发 |
||||
handleSelectAll(selection) {}, |
||||
// 选中某一行 |
||||
handleSelectRow(selection) {}, |
||||
setChecked() {}, |
||||
// 删除 |
||||
del(row) { |
||||
this.$alert('请确定删除该数据!', '提示', { |
||||
confirmButtonText: '确定', |
||||
callback: action => { |
||||
if (action == 'confirm') { |
||||
loadingFn.call( |
||||
this, |
||||
'loading', |
||||
productApi.brandDelete(row).then(res => { |
||||
if ((res.code = 20000)) { |
||||
this.$message.success('操作成功！') |
||||
this.handleCurrentChange() |
||||
} |
||||
}); |
||||
}, |
||||
addAttr(model) { |
||||
}, |
||||
// 编辑 |
||||
edit(row) { |
||||
this.isAddOrEdit = true; |
||||
this.$nextTick(() => { |
||||
this.$refs.addOrEdit.apiMode = "brandUpdate" |
||||
this.$refs.addOrEdit.form = Object.assign(this.$refs.addOrEdit.form, row); |
||||
}) |
||||
}, |
||||
// 列表 |
||||
getList() { |
||||
loadingFn.call(this, "loading", productApi.brandGetByPage(this.page).then(res => { |
||||
if (res.code = 20000) ({ list: this.tableData = [], totalCount: this.page.totalCount = 0 } = res.data); |
||||
})); |
||||
}, |
||||
// 表格搜索 |
||||
userSearchs() { |
||||
this.handleCurrentChange() |
||||
}, |
||||
// 初始化 |
||||
init() { |
||||
this.getList() |
||||
}) |
||||
) |
||||
} |
||||
} |
||||
}) |
||||
}, |
||||
}; |
||||
addAttr(model) {}, |
||||
// 编辑 |
||||
edit(row) { |
||||
this.isAddOrEdit = true |
||||
this.$nextTick(() => { |
||||
this.$refs.addOrEdit.apiMode = 'brandUpdate' |
||||
this.$refs.addOrEdit.form = Object.assign(this.$refs.addOrEdit.form, row) |
||||
}) |
||||
}, |
||||
// 列表 |
||||
getList() { |
||||
loadingFn.call( |
||||
this, |
||||
'loading', |
||||
productApi.brandGetByPage(this.page).then(res => { |
||||
if ((res.code = 20000)) ({ list: this.tableData = [], totalCount: this.page.totalCount = 0 } = res.data) |
||||
}) |
||||
) |
||||
}, |
||||
// 表格搜索 |
||||
userSearchs() { |
||||
this.handleCurrentChange() |
||||
}, |
||||
// 初始化 |
||||
init() { |
||||
this.getList() |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped></style> |
||||
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue