<template>
|
<div>
|
<list-condition-template ref="table" :form="listQuery" :formLabel="formLabel"
|
:tableData="tableData" :total="total"
|
@page-info-change="handlePageInfoChange">
|
<template slot="otherElement">
|
<el-col :span="6" :offset="0">
|
<el-form-item>
|
<el-button size="mini" type="primary" @click="queryData">查询</el-button>
|
<el-button size="mini" @click="resetQuery">重置</el-button>
|
</el-form-item>
|
</el-col>
|
</template>
|
<template slot="operationSection">
|
<el-button size="mini" type="success" @click="addItem">新增</el-button>
|
</template>
|
<template slot="columns">
|
<el-table-column label="品牌名称" prop="brandName" show-overflow-tooltip>
|
</el-table-column>
|
<el-table-column label="品牌描述" prop="brandDesc" show-overflow-tooltip>
|
<template slot-scope="scope">
|
{{scope.row.brandDesc ? scope.row.brandDesc : '-' }}
|
</template>
|
</el-table-column>
|
<el-table-column label="状态" prop="state">
|
<template slot-scope="scope">
|
<span class="statusTag"
|
:style="{ background: scope.row.state === '1' ? '#52c41a' :'#f5222d'}"></span>
|
<span>{{scope.row.state === "1" ? '已启用' : '已停用'}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" :width="`${3 * $store.getters.colSize}px`">
|
<template slot-scope="scope">
|
<wly-btn @click="lookInfo(scope.row)">详情</wly-btn>
|
<wly-btn :type="'primary'" @click="editInfo(scope.row)"
|
:disabled="scope.row.state==='1'">编辑</wly-btn>
|
<wly-btn :type="scope.row.state === '1' ? 'info' : 'success'"
|
@click="updateState(scope.row)">{{scope.row.state === '1' ? '停用' : '启用'}}
|
</wly-btn>
|
</template>
|
</el-table-column>
|
</template>
|
</list-condition-template>
|
<brand-info :show.sync="show" :row="row" :title="title"></brand-info>
|
<el-dialog :visible.sync="dialogVisible" title="品牌详情" :close-on-click-modal="false"
|
:modal-append-to-body="false" width="40%">
|
<el-form size="mini" label-width="120px" ref="formDialog" class="detailsInfo">
|
<el-form-item label="品牌名称：">{{form.brandName}}</el-form-item>
|
<el-form-item label="品牌描述：">{{form.brandDesc ? form.brandDesc : '-'}}</el-form-item>
|
<el-form-item label="品牌图片：" v-show="form.brandUrl">
|
<el-image style="width: 200px;" :src="form.brandUrl" :preview-src-list="[form.brandUrl]">
|
</el-image>
|
</el-form-item>
|
</el-form>
|
<div slot="footer" class="dialog-footer">
|
<el-button size="mini" @click="dialogVisible=false">关闭</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
<script>
|
import brandApi from '@/api/productmanagement/brand'
|
import brandInfo from '@/views/brandManagement/info.vue'
|
import { objectCopy } from '@/utils/objectCopyHelper'
|
export default {
|
components: { brandInfo },
|
data () {
|
return {
|
formLabel: [
|
{
|
model: 'brandName',
|
label: '品牌名称',
|
type: 'input'
|
},
|
{
|
model: 'brandDesc',
|
label: '品牌描述',
|
type: 'input'
|
},
|
{
|
model: 'state',
|
label: '状态',
|
type: 'select',
|
opts: [
|
{
|
id: '0',
|
name: '停用'
|
},
|
{
|
id: '1',
|
name: '启用'
|
}
|
]
|
}
|
|
],
|
listQuery: {
|
brandName: null,
|
brandDesc: null,
|
state: null
|
},
|
tableData: [],
|
show: false,
|
title: null,
|
row: {},
|
dialogVisible: false,
|
form: {},
|
total: 0
|
}
|
},
|
/**
|
* 数据变化后刷新列表
|
*/
|
activated () {
|
this.queryList(this.$refs.table.getPageInfo())
|
},
|
methods: {
|
/**
|
* '分页信息改变时查询列表
|
*/
|
handlePageInfoChange (pageInfo) {
|
this.queryList(pageInfo)
|
},
|
/**
|
* 重置
|
*/
|
resetQuery () {
|
this.$refs.table.reloadCurrent()
|
},
|
/**
|
* 点击查询按钮
|
*/
|
queryData () {
|
this.$refs.table.changeCondition()
|
},
|
/**
|
* 查看详情
|
*/
|
lookInfo (row) {
|
this.dialogVisible = true
|
this.form = row
|
},
|
/**
|
* 编辑
|
*/
|
editInfo (row) {
|
this.show = true
|
this.title = '编辑品牌'
|
this.row = objectCopy(row)
|
},
|
/**
|
* 修改状态
|
*/
|
updateState (row) {
|
this.$confirm(`确认${row.state === '1' ? '停用' : '启用'}吗?`, '修改状态', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
brandApi.updateInfo({ state: row.state === '1' ? '0' : '1', brandId: row.brandId }).then(res => {
|
if (res.data) {
|
this.$message({
|
message: '操作成功',
|
type: 'success'
|
})
|
row.state = row.state === '1' ? '0' : '1'
|
}
|
})
|
}).catch(() => { })
|
},
|
|
/**
|
* 查询列表
|
*/
|
queryList (pageInfo = { pageNum: 1, pageSize: 10 }) {
|
brandApi.getList({ ...this.listQuery, ...pageInfo }).then(res => {
|
if (res.data) {
|
this.tableData = res.data.list
|
this.total = res.data.total
|
}
|
})
|
},
|
/**
|
* 跳转到新增页面
|
*/
|
addItem () {
|
this.show = true
|
this.title = '添加品牌'
|
}
|
}
|
}
|
</script>
|
<style lang="scss">
|
.statusTag {
|
width: 6px;
|
height: 6px;
|
border-radius: 50%;
|
display: inline-block;
|
margin-right: 4px;
|
position: relative;
|
bottom: 2px;
|
}
|
</style>
|
