<template>
|
<div class="dealerMgt">
|
<list-condition-template ref="table" :isExistBtn="true" :form="listQuery" :formLabel="formLabel" :tableData="tableData" :total="total" @page-info-change="pageInfoChange">
|
<template slot="otherElement">
|
<el-col class="formLayout" :xs='12' :sm='12' :md='12' :lg='6' :offset="0">
|
<el-form-item label="经销商城市：" prop="aeraId">
|
<address-component ref="addressComponent" :adressArr.sync='adressArray'></address-component>
|
</el-form-item>
|
</el-col>
|
<el-col :span="24" :offset="0" class="buttonPosition">
|
<el-button size="mini" type="primary" @click="queryData">查询</el-button>
|
<el-button size="mini" @click="resetQuery">重置</el-button>
|
</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="merchantName" width="160px" show-overflow-tooltip></el-table-column>
|
<el-table-column label="所在地区" prop="aera" width="180px" show-overflow-tooltip>
|
<template slot-scope="scope">
|
{{scope.row.province}}{{scope.row.city}}{{scope.row.aera}}
|
</template>
|
</el-table-column>
|
<el-table-column label="经销商状态" prop="status" :formatter="statusFormatter" width="140px"></el-table-column>
|
<el-table-column label="联系人" prop="contactName"></el-table-column>
|
<el-table-column label="联系电话" prop="contactPhone" width="180px"></el-table-column>
|
<el-table-column label="门店" prop="contactPhone">
|
<template slot-scope="scope">
|
<el-button type="text" v-if="scope.row.shopCount > 0" @click="$router.push({name:'shopMgtList',params:{merchantId:scope.row.merchantId}})">{{scope.row.shopCount}}</el-button>
|
<span v-else>{{scope.row.shopCount}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="创建时间" prop="createdOn" width="180px"></el-table-column>
|
<el-table-column label="审核状态" prop="auditStatus">
|
<template slot-scope="scope">
|
<span v-if="scope.row.auditStatus == '0'">
|
<span class="statusTag" :style="{ background: '#d0931e'}"></span>
|
<span>待审核</span>
|
</span>
|
<span v-else-if="scope.row.auditStatus == '1'">
|
<span class="statusTag" :style="{ background: '#22d01e'}"></span>
|
<span>已通过</span>
|
</span>
|
<span v-else-if="scope.row.auditStatus == '2'">
|
<span class="statusTag" :style="{ background: '#d0261e'}"></span>
|
<span>已驳回</span>
|
</span>
|
<span v-else>
|
<span>-</span>
|
</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" :width="`${2 * $store.getters.colSize}px`">
|
<template slot-scope="scope">
|
<wly-btn @click="checkitem(scope.row,scope.$index)" >查看</wly-btn>
|
<!-- <wly-btn v-if="scope.row.sourceType === '1'" :type="'primary'" @click="updateItem(scope.row,scope.$index)" >编辑</wly-btn> -->
|
<wly-btn v-if="scope.row.auditStatus === '0'" :type="'warning'" @click="reviewItem(scope.row,scope.$index)" >审核</wly-btn>
|
</template>
|
</el-table-column>
|
</template>
|
</list-condition-template>
|
<el-dialog :visible.sync="dialogVisible" :title="title" :close-on-click-modal="false" :modal-append-to-body="false" v-if="dialogVisible" width="40%">
|
<el-form size="mini" label-width="120px" :model="form" :rules="formRules" ref="form">
|
<el-form-item label="经销商名称：" prop="merchantName">
|
<el-input v-model="form.merchantName" placeholder="请输入经销商名称"></el-input>
|
</el-form-item>
|
<el-form-item label="经销商手机号：" prop="contactPhone">
|
<el-input v-model="form.contactPhone" placeholder="请输入经销商手机号"></el-input>
|
</el-form-item>
|
</el-form>
|
<div slot="footer" class="dialog-footer">
|
<el-button size="mini" type="primary" :loading="loading" @click="submit">保存</el-button>
|
<el-button size="mini" @click="dialogVisible=false">关闭</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
<script>
|
import { ecMarketMerchantQueryEcMarketMerchantList, ecMarketMerchantInsertSelective } from '../../../api/MarketingMgt/dealerMgt'
|
import { validateMobile } from '@/utils/validator'
|
import addressComponent from '@/components/formTemplate/addressComponent.vue'
|
var _this = null
|
export default {
|
name: 'dealerMgtList',
|
components: { addressComponent },
|
data () {
|
return {
|
title: null,
|
adressArray: [],
|
form: {
|
merchantName: null,
|
contactPhone: null
|
},
|
dialogVisible: false,
|
loading: false,
|
formRules: {
|
merchantName: [
|
{ required: true, message: '请输入经销商名称', trigger: 'change' },
|
{ message: '经销商名称最大长度为32', max: 32, trigger: 'change' }
|
],
|
contactPhone: [
|
{ validator: validateMobile, required: true, trigger: 'change' }
|
]
|
},
|
tableData: [],
|
total: 0,
|
listQuery: {
|
merchantName: '',
|
startDate: '',
|
endDate: null,
|
auditStatus: '',
|
status: null,
|
aeraId: null
|
},
|
formLabel: [
|
{
|
model: 'startDate',
|
label: '创建时间',
|
type: 'date',
|
pickerOptions: {
|
disabledDate (time) {
|
return _this.listQuery.endDate && time.getTime() >= new Date(_this.listQuery.endDate).getTime() + 86400000
|
}
|
},
|
timeClass: 'start-time-style'
|
},
|
{
|
model: 'endDate',
|
label: '-',
|
customLabel: '创建时间',
|
type: 'date',
|
labelWidth: '20px',
|
pickerOptions: {
|
disabledDate (time) {
|
return _this.listQuery.startDate && time.getTime() <= new Date(_this.listQuery.startDate).getTime() - 86400000
|
}
|
},
|
timeClass: 'end-time-style'
|
},
|
{
|
model: 'merchantName',
|
label: '经销商名称',
|
type: 'input',
|
labelWidth: '90px'
|
},
|
{
|
model: 'auditStatus',
|
label: '审核状态',
|
type: 'select',
|
opts: [
|
{
|
id: '0',
|
name: '待审核'
|
},
|
{
|
id: '1',
|
name: '已通过'
|
},
|
{
|
id: '2',
|
name: '已驳回'
|
}
|
]
|
},
|
{
|
model: 'status',
|
label: '经销商状态',
|
labelWidth: '90px',
|
type: 'select',
|
opts: [
|
{
|
id: '0',
|
name: '注册中'
|
},
|
{
|
id: '1',
|
name: '正常'
|
},
|
{
|
id: '2',
|
name: '停用'
|
},
|
{
|
id: '3',
|
name: '未完善'
|
}
|
]
|
}
|
]
|
}
|
},
|
created () {
|
_this = this
|
},
|
/**
|
* 数据变化后刷新列表
|
*/
|
activated () {
|
this.queryList(this.$refs.table.getPageInfo())
|
},
|
methods: {
|
disabledDate (time) {
|
return time.getTime() > Date.now()
|
},
|
/**
|
*保存经销商
|
*/
|
submit () {
|
this.$refs.form.validate((valid) => {
|
if (valid) {
|
this.loading = true
|
ecMarketMerchantInsertSelective(this.form).then(res => {
|
if (res.code === '0') {
|
this.$message({
|
message: '保存成功',
|
type: 'success'
|
})
|
this.loading = false
|
this.dialogVisible = false
|
this.$refs.table.changeCondition()
|
} else {
|
this.loading = false
|
}
|
}).catch(() => {
|
this.loading = false
|
})
|
} else {
|
console.log('error submit!!')
|
return false
|
}
|
})
|
},
|
statusFormatter (row, column, cellValue, index) {
|
switch (row.status) {
|
case '0': return '注册中'
|
case '1': return '正常'
|
case '2': return '停用'
|
default: return '未完善'
|
}
|
},
|
auditStatusFormatter (row, column, cellValue, index) {
|
switch (row.auditStatus) {
|
case '0': return '待审核'
|
case '1': return '已通过'
|
case '2': return '已驳回'
|
default: return '-'
|
}
|
},
|
/**
|
* 新增
|
*/
|
addItem () {
|
this.dialogVisible = true
|
this.title = '添加经销商'
|
this.form.merchantName = null
|
this.form.contactPhone = null
|
// this.$router.push({ name: 'dealerMgtAdd' })
|
},
|
/**
|
*查看
|
*/
|
checkitem (row, index) {
|
this.$router.push({
|
path: '/dash/dealerMgt/detail',
|
query: {
|
id: row.merchantId
|
}
|
})
|
},
|
/**
|
* 修改
|
*/
|
updateItem (row, index) {
|
this.$router.push({
|
path: '/dash/dealerMgt/edit',
|
query: {
|
id: row.merchantId
|
}
|
})
|
},
|
/**
|
* 审核
|
*/
|
reviewItem (row, index) {
|
this.$router.push({
|
path: '/dash/dealerMgt/review',
|
query: {
|
id: row.merchantId
|
}
|
})
|
},
|
/**
|
* '分页信息改变时查询列表
|
*/
|
pageInfoChange (pageInfo) {
|
this.queryList(pageInfo)
|
},
|
|
/**
|
* 重置
|
*/
|
resetQuery () {
|
this.adressArray = []
|
this.$refs.table.reloadCurrent()
|
},
|
/**
|
* 点击查询按钮
|
*/
|
queryData () {
|
this.$refs.table.changeCondition()
|
},
|
/**
|
* 查询列表
|
*/
|
queryList (pageInfo = { pageNum: 1, pageSize: 10 }) {
|
const length = this.adressArray.length
|
this.listQuery.aeraId = length ? this.adressArray[length - 1] : null
|
this.listQuery.sourceType = this.listQuery.status === '3' ? '1' : null
|
const param = JSON.parse(JSON.stringify(this.listQuery))
|
param.status = this.listQuery.status === '3' ? null : this.listQuery.status
|
ecMarketMerchantQueryEcMarketMerchantList(Object.assign({ param }, pageInfo)).then(res => {
|
if (res.code === '0') {
|
this.tableData = res.data.list
|
this.total = res.data.total
|
}
|
})
|
}
|
}
|
}
|
</script>
|
<style scoped lang="scss">
|
.dealerMgt{
|
.formLayout{
|
display: flex;
|
.el-form-item{
|
flex-grow:1;
|
/deep/.el-cascader{
|
width:calc(100% - 97px);
|
}
|
}
|
}
|
}
|
</style>
|
