123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179 |
- <template>
- <div>
- <en-table-layout :tableData="tableData.records" :loading="loading" :selection-change="handleSelectionChange">
- <div slot="toolbar" class="inner-toolbar">
- <div class="toolbar-btns">
- <el-button size="mini" type="primary" icon="el-icon-circle-plus-outline" @click="handleAddBrand"
- v-if="checkPermission(['brand:add'])">添加</el-button>
- </div>
- <div class="toolbar-search">
- <en-table-search @search="searchEvent" placeholder="请输入品牌名称" />
- </div>
- </div>
- <template slot="table-columns">
- <el-table-column type="selection" width="100" />
- <!--品牌名称-->
- <el-table-column prop="name" label="组合名称" />
- <!--品牌图片-->
- <el-table-column label="组合说明" prop="remark">
- </el-table-column>
- <!--操作-->
- <el-table-column label="操作" >
- <template slot-scope="scope">
- <el-button size="mini"
- @click="handleEditBrand('check', scope.row)">查看</el-button>
- <el-button size="mini" type="primary"
- @click="handleEditBrand('edit', scope.row)">编辑</el-button>
- <el-button size="mini" type="danger"
- @click="handleDeleteBrand(scope.$index, scope.row)">删除</el-button>
- </template>
- </el-table-column>
- </template>
- <el-pagination v-if="tableData" slot="pagination" @size-change="handlePageSizeChange"
- @current-change="handlePageCurrentChange" :current-page="tableData.pages"
- :page-sizes="[10, 20, 50, 100]" :page-size="tableData.size"
- layout="total, sizes, prev, pager, next, jumper" :total="tableData.total">
- </el-pagination>
- </en-table-layout>
- </div>
- </template>
- <script>
- import * as API_productClass from "@/api/productClass.js"
- export default {
- name: 'brandList',
- data() {
- return {
- /** 列表loading状态 */
- loading: false,
- /** 列表参数 */
- params: {
- pages: 1,
- size: 10
- },
- /** 列表数据 */
- tableData: '',
- /** 被选数据 */
- selectedData: [],
- // 添加、修改品牌 dialog
- dialogBrandVisible: false,
- /** 添加、修改品牌 表单 */
- brandForm: {
- logo: ".."
- },
- }
- },
- mounted() {
- this.GET_BrandList()
- },
- methods: {
- /** 当选择项发生变化 */
- handleSelectionChange(val) {
- this.selectedData = val.map(item => item.brand_id)
- },
- uploadSuccess(res) {
- this.$set(this.brandForm, 'logo', res.url)
- this.$refs['brandForm'].validateField('logo')
- },
- /** 图片移除之后 */
- delGiftImg() {
- this.fileList = []
- this.brandForm.logo = ''
- },
- /** 分页大小发生改变 */
- handlePageSizeChange(size) {
- this.params.size = size
- this.GET_BrandList()
- },
- /** 分页页数发生改变 */
- handlePageCurrentChange(page) {
- this.params.page = page
- this.GET_BrandList()
- },
- /** 搜索事件触发 */
- searchEvent(data) {
- this.params.page = 1
- this.params.name = data
- if (!data) delete this.params.name
- this.GET_BrandList()
- },
- /** 获取品牌列表 */
- GET_BrandList() {
- this.loading = true
- API_productClass.getProductList(this.params).then(response => {
- this.loading = false
- this.tableData = response
- }).catch(() => { this.loading = false })
- },
- /** 添加品牌触发事件 */
- handleAddBrand() {
- this.$router.push({
- name: "productClassAdd",
- });
- },
- /** 添加、修改品牌 表单提交 */
- submitBrandForm(formName) {
-
- },
- /** 修改品牌操作 */
- handleEditBrand(index, row) {
- this.$router.push({
- name: "productClassEdit",
- params: { id:row.id, type:index },
- });
- /* this.brandForm = this.MixinClone(row)
- this.fileList = this.brandForm.logo ? [{ name: 'brand_image', url: this.brandForm.logo }] : []
- this.dialogBrandVisible = true */
- },
- /** 删除品牌操作 */
- handleDeleteBrand(index, row) {
- this.$confirm('确定要删除这个品牌吗?', '提示', { type: 'warning' }).then(() => {
- this.DELETE_Brand(row.id)
- }).catch(() => { })
- },
- /** 删除商品组合 */
- DELETE_Brand(ids) {
- API_productClass.removeProduct(ids).then(() => {
- this.$message.success('删除成功!')
- this.GET_BrandList()
- })
- }
- }
- }
- </script>
- <style type="text/scss" lang="scss" scoped>
- /deep/ .el-table td:not(.is-left) {
- text-align: center;
- }
- .inner-toolbar {
- display: flex;
- width: 100%;
- justify-content: space-between;
- padding: 0 20px;
- }
- .goods-image {
- max-width: 120px;
- height: 75px;
- }
- /deep/ .el-select .el-input {
- width: 100px;
- }
- /deep/ .input-with-select .el-input-group__prepend {
- background-color: #fff;
- }
- /deep/ .el-form-item__content .edui-editor {
- line-height: normal;
- }
- </style>
|