384 lines
15 KiB
Vue
384 lines
15 KiB
Vue
<template>
|
|
<div>
|
|
<!--表单-->
|
|
<el-form ref="supplierDataField" size="small" :rules="ruleValidate" :model="supplierData" label-width="130px" @submit.native.prevent>
|
|
<el-tabs v-loading="loading" type="border-card" v-model="activeName">
|
|
<div class="section">
|
|
<div class="title">邀请人</div>
|
|
<el-row :gutter="24" class="mt20">
|
|
<el-col :span="12">
|
|
<el-form-item label="选择邀请人：">
|
|
<el-button size="small" type="primary" @click="showSelectAgent(1)">{{ supplierData.inviteUser ? '变更邀请人' : '选择邀请人' }}</el-button>
|
|
</el-form-item>
|
|
<el-form-item label="">
|
|
<div class="user-content" v-if="supplierData.inviteUser">
|
|
<div class="user-avatar">
|
|
<img :src="supplierData.inviteUser.avatar || moren" />
|
|
</div>
|
|
<div class="user-info">
|
|
<div class="nickname">{{ supplierData.inviteUser.nickname }}</div>
|
|
<div class="agent-type-text">
|
|
<el-tag type="info" effect="dark" size="small">{{ supplierData.inviteUser.uid }}</el-tag>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<div class="title">基础信息</div>
|
|
<el-row :gutter="24" class="mt20">
|
|
<el-col :span="12">
|
|
<el-form-item label="供应商名称：" prop="supplier_name">
|
|
<el-input v-model="supplierData.supplier_name" placeholder="请填写供应商名称" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="供应商地址：" prop="detailed_address">
|
|
<el-input v-model="supplierData.detailed_address" placeholder="请填写详细地址" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="联系人姓名：" prop="name">
|
|
<el-input type="text" placeholder="请填写联系人姓名" v-model="supplierData.name" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="联系电话：" prop="phone">
|
|
<el-input placeholder="请填写联系电话" v-model="supplierData.phone" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="供应商邮箱：" prop="email">
|
|
<el-input v-model="supplierData.email" placeholder="请填写邮箱地址" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="排序：" prop="sort">
|
|
<el-input-number v-model="supplierData.sort" controls-position="right" placeholder="请输入排序"/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="状态：" prop="is_show">
|
|
<el-switch v-model="supplierData.is_show" :active-value="1" :inactive-value="0" :width="55" active-text="开启" inactive-text="关闭" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="商品审核：" prop="is_examine">
|
|
<el-switch v-model="supplierData.is_examine" :active-value="1" :inactive-value="0" :width="50" active-text="是" inactive-text="否" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="24">
|
|
<el-form-item label="备注：" prop="mark">
|
|
<el-input type="textarea" v-model="supplierData.mark" placeholder="请填写备注" :maxlength="250" autosize :rows="5" resize="none" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<div class="title">账号密码</div>
|
|
<el-row :gutter="24" class="mt20">
|
|
<el-col :span="12">
|
|
<el-form-item label="商户账号：" :prop="isAdd ? 'supplier_account' : ''">
|
|
<el-input type="text" v-model="supplierData.supplier_account" :disabled="!isAdd"/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="登陆密码：" :prop="isAdd ? 'supplier_password' : ''">
|
|
<el-input type="password" v-model="supplierData.supplier_password" :disabled="!isAdd"/>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</el-tabs>
|
|
</el-form>
|
|
<!-- 邀请人选择器 -->
|
|
<el-dialog title="负责人选择" :visible.sync="selectAgentPopupVisible" width="80%" :before-close="closeSelectAgent" :append-to-body="true">
|
|
<el-card class="box-card">
|
|
<!--顶部搜索栏-->
|
|
<div slot="header" class="clearfix">
|
|
<div class="container">
|
|
<el-form inline size="small" label-width="80px">
|
|
<el-form-item label="">
|
|
<el-input v-model="agentTableFrom.uid" placeholder="请输入用户ID" class="selWidth" clearable />
|
|
<el-input v-model="agentTableFrom.contact_name" placeholder="请输入联系人姓名" class="selWidth" clearable />
|
|
<el-input v-model="agentTableFrom.contact_phone" placeholder="请输入联系人电话" class="selWidth" clearable />
|
|
<el-select v-model="agentTableFrom.agent_type" class="selWidth" >
|
|
<el-option label="发起人" :value="1"></el-option>
|
|
<el-option label="省公司" :value="2"></el-option>
|
|
<el-option label="省合伙人(外勤)" :value="3"></el-option>
|
|
<el-option label="省合伙人(内勤)" :value="4"></el-option>
|
|
<el-option label="区县运营商" :value="5"></el-option>
|
|
<!--<el-option label="区县合伙人" :value="6"></el-option>-->
|
|
<!--<el-option label="餐厅" :value="7"></el-option>-->
|
|
<!--<el-option label="配送商" :value="8"></el-option>-->
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-form>
|
|
<el-button size="small" type="primary" @click="getAgentList(1)">搜索</el-button>
|
|
</div>
|
|
</div>
|
|
<!--表格信息-->
|
|
<el-table v-loading="selectAgentLoading" :data="agentTableData.data" style="width: 100%" size="mini">
|
|
<el-table-column label="负责人" min-width="300" align="center">
|
|
<template slot-scope="scope">
|
|
<div class="user-content">
|
|
<div class="user-avatar">
|
|
<img :src="scope.row.user.avatar || moren" />
|
|
</div>
|
|
<div class="user-info">
|
|
<div class="nickname">{{ scope.row.user.nickname }}</div>
|
|
<div class="agent-type-text">
|
|
<el-tag type="info" effect="dark" size="small">{{ scope.row.user.uid }}</el-tag>
|
|
<el-tag v-if="Number(scope.row.agent_type) == 7 && scope.row.mer" type="success" effect="dark" size="small">{{ scope.row.mer.mer_name }}</el-tag>
|
|
<el-tag v-if="Number(scope.row.agent_type) == 8 && Object.values(scope.row.merList).length > 0" type="success" effect="dark" size="small">
|
|
{{ scope.row.merList[0].mer_name }}
|
|
{{ Object.values(scope.row.merList).length > 1 ? '+'+Object.values(scope.row.merList).length : '' }}
|
|
</el-tag>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="代理身份" min-width="200" align="center">
|
|
<template slot-scope="scope">
|
|
<el-tag v-if="Number(scope.row.agent_type) == 1" type="info" effect="dark" size="small">发起人</el-tag>
|
|
<el-tag v-if="Number(scope.row.agent_type) == 2" type="info" effect="dark" size="small">省公司</el-tag>
|
|
<el-tag v-if="Number(scope.row.agent_type) == 3" type="info" effect="dark" size="small">省合伙人(外勤)</el-tag>
|
|
<el-tag v-if="Number(scope.row.agent_type) == 4" type="info" effect="dark" size="small">省合伙人(内勤)</el-tag>
|
|
<el-tag v-if="Number(scope.row.agent_type) == 5" type="info" effect="dark" size="small">区县运营商</el-tag>
|
|
<el-tag v-if="Number(scope.row.agent_type) == 6" type="info" effect="dark" size="small">区县合伙人</el-tag>
|
|
<el-tag v-if="Number(scope.row.agent_type) == 7" type="info" effect="dark" size="small">餐厅</el-tag>
|
|
<el-tag v-if="Number(scope.row.agent_type) == 8" type="info" effect="dark" size="small">配送商</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="联系人" min-width="200" align="center">
|
|
<template slot-scope="scope">
|
|
{{ scope.row.contact_name }}<br />
|
|
{{ scope.row.contact_phone }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="操作" min-width="150" align="center">
|
|
<template slot-scope="scope">
|
|
<el-button type="success" effect="dark" @click="selectedAgent(scope.row)">选择</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<!--分页-->
|
|
<div class="block">
|
|
<el-pagination
|
|
:page-sizes="[20, 40, 60, 80]"
|
|
:page-size="agentTableFrom.limit"
|
|
:current-page="agentTableFrom.page"
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
:total="agentTableData.total"
|
|
@size-change="handleAgentSizeChange"
|
|
@current-change="pageAgentChange"
|
|
/>
|
|
</div>
|
|
</el-card>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="closeSelectAgent">关 闭</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { merchantUpdate } from "@/api/merchant";
|
|
import {accountCreate} from "@/api/supplier";
|
|
import {agentList} from "@/api/marketing";
|
|
|
|
export default {
|
|
props: {
|
|
supplierData: {
|
|
type: Object,
|
|
default: {},
|
|
},
|
|
isAdd: {
|
|
type: Boolean,
|
|
default: false,
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
moren: require("@/assets/images/f.png"),
|
|
// 代理信息
|
|
loading: false,
|
|
supplierId: '',
|
|
direction: 'rtl',
|
|
activeName: 'detail',
|
|
ruleValidate: {
|
|
supplier_name: [{ required: true, message: '请输入供应商名称', trigger: 'blur' }],
|
|
supplier_account: [{ required: true, message: '请输入账号', trigger: 'blur' }],
|
|
supplier_password: [{ required: true, message: '请输入登录密码', trigger: 'blur' }],
|
|
name: [{ required: true, message: '请输入联系人姓名', trigger: 'blur' }],
|
|
phone: [
|
|
{
|
|
required: true, validator: function (rule, value, callback) {
|
|
if (!value) {
|
|
return callback(new Error('请填写联系方式'))
|
|
} else if (!/^1[3456789]\d{9}$/.test(value)) {
|
|
callback(new Error('格式不正确!'))
|
|
} else {
|
|
callback()
|
|
}
|
|
}, trigger: 'blur'
|
|
}
|
|
],
|
|
},
|
|
// 用户选择弹框
|
|
selectAgentPopupVisible: false,
|
|
selectAgentLoading: true,
|
|
userListLoading: false,
|
|
agentTableFrom: {
|
|
page: 1,
|
|
limit: 20,
|
|
uid: '',
|
|
contact_name: '',
|
|
contact_phone: '',
|
|
agent_type: '',
|
|
},
|
|
agentTableData: {
|
|
data: [],
|
|
total: 0,
|
|
},
|
|
};
|
|
},
|
|
filters: {},
|
|
mounted() {},
|
|
methods: {
|
|
// 重置表单数据
|
|
resetData(){
|
|
this.$refs.supplierDataField.resetFields();
|
|
},
|
|
// 提交信息
|
|
submitInfo(){
|
|
let _this = this;
|
|
_this.$refs['supplierDataField'].validate((valid) => {
|
|
if (valid) {
|
|
accountCreate(_this.supplierData).then(async (res) => {
|
|
_this.$message.success(res.message);
|
|
_this.$emit('success');
|
|
}).catch((res) => {
|
|
_this.$message.error(res.message);
|
|
});
|
|
}
|
|
});
|
|
},
|
|
// 代理商选择器 - 弹框显示
|
|
showSelectAgent(){
|
|
this.getAgentList(1);
|
|
this.selectAgentPopupVisible = true;
|
|
},
|
|
// 代理商选择器 - 弹框关闭
|
|
closeSelectAgent() {
|
|
this.selectAgentPopupVisible = false;
|
|
},
|
|
// 代理商选择器 - 获取列表及分页
|
|
getAgentList(num){
|
|
let _this = this;
|
|
_this.selectAgentLoading = true;
|
|
_this.agentTableFrom.page = num ? num : _this.agentTableFrom.page;
|
|
agentList(_this.agentTableFrom)
|
|
.then((res) => {
|
|
_this.agentTableData.data = res.data.list;
|
|
_this.agentTableData.total = res.data.count;
|
|
_this.selectAgentLoading = false;
|
|
})
|
|
.catch((res) => {
|
|
_this.selectAgentLoading = false;
|
|
_this.$message.error(res.message);
|
|
});
|
|
},
|
|
pageAgentChange(page) {
|
|
this.agentTableFrom.page = page;
|
|
this.getAgentList('');
|
|
},
|
|
handleAgentSizeChange(val) {
|
|
this.agentTableFrom.limit = val;
|
|
this.getAgentList('');
|
|
},
|
|
// 代理商选择器 - 选中用户
|
|
selectedAgent(item){
|
|
this.supplierData.inviteUser = item.user || {};
|
|
this.supplierData.invite_uid = item.uid;
|
|
this.supplierData.invite_agent_id = item.id;
|
|
this.closeSelectAgent();
|
|
this.$forceUpdate();
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.selWidth{
|
|
margin-bottom: 10px!important;
|
|
}
|
|
.user-content{
|
|
--user-content-height-: 80px;
|
|
|
|
height: var(--user-content-height-);
|
|
width: 100%;
|
|
display: inline-flex;
|
|
flex-direction: row;
|
|
flex-wrap: nowrap;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
.user-avatar{
|
|
height: var(--user-content-height-);
|
|
width: var(--user-content-height-);
|
|
display: inline-flex;
|
|
flex-direction: row;
|
|
flex-wrap: nowrap;
|
|
justify-content: center;
|
|
align-items: center;
|
|
img{
|
|
height: 80%!important;
|
|
width: 80%!important;
|
|
border-radius: 50% !important;
|
|
}
|
|
}
|
|
.user-info{
|
|
max-width: calc(100% - var(--user-content-height-));
|
|
height: var(--user-content-height-);
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
flex-wrap: nowrap;
|
|
justify-content: center;
|
|
align-items: flex-start;
|
|
.nickname{
|
|
width: 100%;
|
|
height: 25px;
|
|
line-height: 25px;
|
|
text-align: left;
|
|
font-size: 15px;
|
|
font-weight: bold;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: inline-flex;
|
|
flex-direction: row;
|
|
flex-wrap: nowrap;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
.user-id{
|
|
color: #fff;
|
|
background-color: #409eff;
|
|
border-color: #409eff;
|
|
height: 18px;
|
|
line-height: 20px;
|
|
font-size: 13px;
|
|
padding: 0 5px;
|
|
border-radius: 5px;
|
|
margin-left: 10px;
|
|
width: max-content!important;
|
|
}
|
|
}
|
|
.user-id{
|
|
width: 100%;
|
|
text-align: left;
|
|
font-size: 13px;
|
|
line-height: calc(var(--user-content-height- * 35%));
|
|
}
|
|
}
|
|
}
|
|
</style>
|