<style>
.companyManagement .avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
cursor: pointer;
position: relative;
overflow: hidden;
width: 100px;
height: 100px;
border-radius: 50%
}
.companyManagement .avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.companyManagement .avatar-uploader-icon {
font-size: 28px;
color: white;
width: 100px;
height: 100px;
line-height: 80px;
text-align: center;
position: absolute;
left: 0;
top: 0;
background: rgba(0, 0, 0, 0.5);
}
/* 上传样式 */
.companyManagement .avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
cursor: pointer;
position: relative;
overflow: hidden;
width: 100px;
height: 100px;
border-radius: 50%
}
.companyManagement .avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.companyManagement .avatar-uploader-icon {
font-size: 28px;
color: white;
width: 100px;
height: 100px;
line-height: 80px;
text-align: center;
position: absolute;
left: 0;
top: 0;
background: rgba(0, 0, 0, 0.5);
}
.companyManagement .avatar {
width: 100px;
height: 100px;
display: block;
position: absolute;
left: 0;
top: 0
}
</style>
<template>
<div class="flexOne companyManagement">
<div class="query-box">
<ul>
<li>
<span><em>{{$t('admin.admin_company')}}</em>
<el-input @keyup.enter.native="getList" v-model="msg.BName" :placeholder="$t('pub.pleaseImport')">
</el-input>
</span>
</li>
<li>
<span><em>{{$t('admin.admin_domain')}}</em>
<el-input @keyup.enter.native="getList" v-model="msg.Domain" :placeholder="$t('pub.pleaseImport')">
</el-input>
</span>
</li>
<li>
<span><em>{{$t('admin.admin_status')}}</em>
<el-select v-model="msg.Status" :placeholder="$t('pub.unlimitedSel')">
<el-option :label="$t('pub.unlimitedSel')" value=''></el-option>
<el-option :label="$t('pub.openSel')" value='0'></el-option>
<el-option :label="$t('pub.closeSel')" value='1'></el-option>
</el-select>
</span>
</li>
<li>
<input type="button" class="hollowFixedBtn" :value="$t('pub.searchBtn')"
@click="resetPageIndex(),getList()" />
<input type="button" class="normalBtn" :value="$t('pub.addBtn')"
@click="outerVisible = true,dialogTitle='新增公司'" />
</li>
</ul>
</div>
<table class="singeRowTable" border="0" cellspacing="0" cellpadding="0">
<tr>
<th width="300">{{$t('admin.admin_company')}}</th>
<th>{{$t('hotel.suplier_contact')}}</th>
<th>{{$t('restaurant.res_ContactNumber')}}</th>
<th>{{$t('admin.admin_status')}}</th>
<th>{{$t('admin.admin_isshow')}}</th>
<th>B2B是否显示</th>
<th>公司类型</th>
<th width="200">{{$t('admin.admin_operate')}}</th>
</tr>
<tr v-for="(item,index) in DataList" v-loading='loading'>
<td>{{item.BName}}</td>
<td>{{item.ContactPersion}}</td>
<td>{{item.MobilePhone}}</td>
<td>{{item.Status==0? $t('pub.openSel'): $t('pub.closeSel')}}</td>
<td>{{item.is_show==0?'显示':'不显示'}}</td>
<td>{{item.B2BShow==0?'显示':'不显示'}}</td>
<td>{{item.IsParentCompany=='1'?'总公司':'分公司'}}</td>
<td>
<el-row>
<el-tooltip class="item" effect="dark" content="修改" placement="top-start">
<el-button @click="outerVisible = true,dialogTitle='修改公司信息',updateData(item.Id)" type="primary"
icon="el-icon-edit" circle></el-button>
</el-tooltip>
</el-row>
</td>
</tr>
</table>
<el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPage"
layout="total,prev, pager, next, jumper" :page-size=msg.pageSize :total=total>
</el-pagination>
<el-dialog custom-class='w500' :title="dialogTitle" :visible.sync="outerVisible" center
:before-close="closeChangeMachie">
<el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="120px">
<el-form-item class='w400' :label="$t('admin.admin_company')" prop="BName">
<el-input type="text" v-model="addMsg.BName" :placeholder="$t('pub.pleaseImport')"></el-input>
</el-form-item>
<el-form-item class='w400' label="确认件抬头" prop="CompanyTitle">
<el-input type="text" v-model="addMsg.CompanyTitle" placeholder="请输入确认件抬头"></el-input>
</el-form-item>
<el-form-item :label="$t('system.table_pvrg')" prop="Province">
<el-select class='w280' :placeholder="$t('pub.pleaseSel')" filterable v-model="addMsg.Province"
@change="getCityList(addMsg.Province,1)">
<el-option :label="$t('pub.unlimitedSel')" :value='commonDefaultSelect'></el-option>
<el-option v-for='item in ProvinceList' :key="item.ID" :label="item.Name" :value="item.ID">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="城市" prop="City">
<el-select class='w280' :placeholder="$t('pub.pleaseSel')" filterable v-model="addMsg.City">
<el-option :label="$t('pub.unlimitedSel')" :value='commonDefaultSelect'></el-option>
<el-option v-for='item in CityList' :key="item.ID" :label="item.Name" :value="item.ID">
</el-option>
</el-select>
</el-form-item>
<el-form-item class='w400' :label="$t('admin.admin_address')" prop="Address">
<el-input type="text" v-model="addMsg.Address" :placeholder="$t('pub.pleaseImport')"></el-input>
</el-form-item>
<el-form-item class='w400' :label="$t('pub.telphone')" prop="Tel">
<el-input type="text" v-model="addMsg.Tel" :placeholder="$t('pub.pleaseImport')"></el-input>
</el-form-item>
<el-form-item class='w400' label='联系人姓名' prop="ContactPersion">
<el-input type="text" v-model="addMsg.ContactPersion" :placeholder="$t('pub.pleaseImport')"></el-input>
</el-form-item>
<el-form-item class='w400' label='联系人手机' prop="MobilePhone">
<el-input type="text" v-model="addMsg.MobilePhone" :placeholder="$t('pub.pleaseImport')"></el-input>
</el-form-item>
<el-form-item class='w400' label='接机人姓名' prop="AirportServicePerson">
<el-input type="text" v-model="addMsg.AirportServicePerson" :placeholder="$t('pub.pleaseImport')"></el-input>
</el-form-item>
<el-form-item class='w400' label='接机人手机' prop="AirportServicePhone">
<el-input type="text" v-model="addMsg.AirportServicePhone" :placeholder="$t('pub.pleaseImport')"></el-input>
</el-form-item>
<el-form-item class='w400' label='出团通知名' prop="NoticesName">
<el-input type="text" v-model="addMsg.NoticesName" :placeholder="$t('pub.pleaseImport')"></el-input>
</el-form-item>
<el-form-item class='w400' :label='$t("admin.admin_status")' prop="Status">
<el-switch v-model="addMsg.Status" active-value="0" inactive-value="1"></el-switch>
</el-form-item>
<el-form-item class='w400' :label='$t("admin.admin_isshow")' prop="is_show">
<el-switch v-model="addMsg.is_show" active-value="0" inactive-value="1"></el-switch>
</el-form-item>
<el-form-item class='w400' label='B2B是否显示' prop="B2BShow">
<el-switch v-model="addMsg.B2BShow" active-value="0" inactive-value="1"></el-switch>
</el-form-item>
<el-form-item class='w400' label='是否为总公司' prop="IsParentCompany">
<el-switch v-model="addMsg.IsParentCompany" active-value="1" inactive-value="2"></el-switch>
</el-form-item>
<el-form-item class='w400' label='部门初始层级' prop="BeginTier">
<el-input type="text" v-model="addMsg.BeginTier" :placeholder="$t('pub.pleaseImport')"></el-input>
</el-form-item>
<el-form-item class='w400' :label='$t("admin.admin_leader")' prop="BranchManager">
<el-select filterable clearable v-model='addMsg.BranchManager' :placeholder="$t('pub.pleaseSel')"
class='w280'>
<el-option label="请选择" :value='0'></el-option>
<el-option v-for='item in employeeList' :key="item.EmployeeId" :label="item.EmName"
:value="item.EmployeeId">
</el-option>
</el-select>
</el-form-item>
<el-form-item label='公司确认章'>
<el-upload class="avatar-uploader" :http-request="UploadImage" :show-file-list="false"
:on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i class="el-icon-upload2 avatar-uploader-icon"></i>
<span v-if="imageUrl" class="repUp">{{$t('system.up_againUp')}}</span>
<span v-else class="repUp">{{$t('system.up_upImg')}}</span>
</el-upload>
</el-form-item>
<el-form-item label='行程Logo'>
<el-upload class="avatar-uploader" :http-request="UploadImage_Logo" :show-file-list="false"
:on-success="handleAvatarSuccessLogo" :before-upload="beforeAvatarUpload">
<img v-if="imageUrlLogo" :src="imageUrlLogo" class="avatar">
<i class="el-icon-upload2 avatar-uploader-icon"></i>
<span v-if="imageUrlLogo" class="repUp">{{$t('system.up_againUp')}}</span>
<span v-else class="repUp">{{$t('system.up_upImg')}}</span>
</el-upload>
</el-form-item>
<el-form-item class='w400' label='备注' prop="Remarks">
<el-input type="textarea" v-model="addMsg.Remarks"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<button class="hollowFixedBtn"
@click="outerVisible = false,resetForm('addMsg')">{{$t('pub.cancelBtn')}}</button>
<button class="normalBtn" type="primary" @click="submitForm('addMsg')">{{$t('pub.saveBtn')}}</button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
let reg = /^([1-9][0-9]{0,1}|100)$/
let validateBeginTier = (rule, value, callback) => {
if (this.addMsg.IsParentCompany == '1' && value != '1') {
return callback(new Error('总公司初始层级只能为1'));
} else if (this.addMsg.IsParentCompany == '2' && !reg.test(value)) {
return callback(new Error('层级只能为1~100数字'));
} else {
callback();
}
}
return {
options: [{
value: '0',
label: this.$t('pub.openSel')
}, {
value: '1',
label: this.$t('pub.closeSel')
}],
ProvinceList: [],
CityList: [],
commonDefaultSelect: 0,
imageUrl: '',
imageUrlLogo: '',
loading: true,
chosenIndex: -1,
res: {},
total: 0,
pageSize: '',
value: '',
DataList: [],
groupList: [],
layerGroupList: [],
employeeList: [],
currentPage: 1,
outerVisible: false,
dialogTitle: '',
msg: { //请求数据
pageIndex: 1,
pageSize: 15,
Status: '',
BName: '',
Domain: '',
RB_Group_Id: ''
},
groupMsg: {
Status: '',
},
employeeMsg: {
IsLeave: 0,
},
rules: { //表单验证
GroupName: [{
required: true,
message: '请选择集团',
trigger: 'change'
}],
BName: [{
required: true,
message: '请输入公司名称',
trigger: 'blur'
}],
Address: [{
required: true,
message: '请输入地址',
trigger: 'blur'
}],
Tel: [{
required: true,
message: '请输入座机',
trigger: 'blur'
}],
ContactPersion: [{
required: true,
message: '请输入联系人姓名',
trigger: 'blur'
}],
MobilePhone: [{
required: true,
message: '请输入联系人电话',
trigger: 'blur'
}],
NoticesName: [{
required: true,
message: '请输入出团通知书名称',
trigger: 'blur'
}],
Remarks: [{
required: false,
message: '',
trigger: 'blur'
}],
BeginTier: [{
required: true,
validator: validateBeginTier,
trigger: 'blur'
}],
CompanyTitle: [{
required: true,
message: '请输入确认件抬头',
trigger: 'blur'
}]
},
addMsg: {
Id: '-1',
BName: '',
Domain: '',
ContactPersion: '',
MobilePhone: '',
Tel: '',
Address: '',
Remarks: '',
Status: '0',
RB_Group_Id: '',
NoticesName: '',
AirportServicePerson: '',
AirportServicePhone: '',
is_show: '0',
B2BShow: '0',
BranchManager: '',
IsParentCompany: '1',
BeginTier: '',
Province: '',
City: '',
ConfirmationSignet: '',
GatheringTime: '',
GatheringAddress: '',
TravelLogo: '',
CompanyTitle: '',
},
updateMsg: {
GroupId: '1'
},
}
},
mounted() {
let userInfo = this.getLocalStorage(); //获取用户登录信息
if (this.$route.query.id != undefined) { //如果用户从集团页面跳到 公司页面， 那查询公司使用的是 选中集团id. 如果直接进入公司页面， 默认使用该用户登录信息中的 集团id
this.addMsg.RB_Group_Id = this.msg.RB_Group_Id = this.$route.query.id;
} else {
this.addMsg.RB_Group_Id = this.msg.RB_Group_Id = userInfo.RB_Group_id
}
this.getProvince();
this.getList();
this.getGroup();
this.getEmployee();
},
methods: {
//上传图片
UploadImage(file) {
let newArr = [];
newArr.push(file.file);
let fileName = file.file.name;
var path = "/Upload/Temporary/";
this.UploadSelfFileT(path, newArr, x => {
this.imageUrl = this.domainManager().ViittoFileUrl + x.data.FilePath;
this.addMsg.ConfirmationSignet = x.data.FilePath;
});
},
//上传图片
UploadImage_Logo(file) {
let newArr = [];
newArr.push(file.file);
let fileName = file.file.name;
var path = "/Upload/Temporary/";
this.UploadSelfFileT(path, newArr, x => {
this.imageUrlLogo = this.domainManager().ViittoFileUrl + x.data.FilePath;
this.addMsg.TravelLogo = x.data.FilePath;
});
},
handleAvatarSuccess(res, file) { //上传
if (res.resultCode == 1) {
var img_path = res.data.FullFilePath
this.addMsg.ConfirmationSignet = res.data.FilePath
this.imageUrl = img_path
}
},
handleAvatarSuccessLogo(res, file) { //上传
if (res.resultCode == 1) {
var img_path = res.data.FullFilePath
this.addMsg.TravelLogo = res.data.FilePath
this.imageUrlLogo = img_path
}
},
beforeAvatarUpload(file) { //上传-
// const isJPG = file.type === 'image/jpeg';
// const isLt2M = file.size / 1024 / 1024 < 2;
// if (!isJPG) {
// this.$message.error('上传头像图片只能是 JPG 格式!');
// }
// if (!isLt2M) {
// this.$message.error('上传头像图片大小不能超过 2MB!');
// }
// return isJPG && isLt2M;
},
getList() { //获取数据
this.loading = true
this.apipost('admin_get_BranchGetPageList', this.msg, res => {
if (res.data.resultCode == 1) {
this.DataList = res.data.data.pageData;
this.total = res.data.data.count;
this.loading = false
} else {
this.$message.error(res.data.message)
}
}, err => {})
},
getGroup() { //获取集团
this.apipost('admin_get_GroupGetList', this.groupMsg, res => {
this.layerGroupList = this.groupList = res.data.data;
}, err => {})
},
getEmployee() { //员工
this.apipost('admin_get_EmployeeGetList', this.employeeMsg, res => {
this.employeeList = res.data.data;
}, err => {})
},
submitForm(addMsg) { //提交创建、修改表单
this.$refs[addMsg].validate((valid) => {
if (valid) {
this.addData()
} else {
return false;
}
});
},
addData() { //新增数据
this.apipost('admin_post_BranchSet', this.addMsg, res => {
if (res.data.resultCode == 1) {
this.$message.success(res.data.message);
this.outerVisible = false;
this.getList()
this.resetForm('addMsg');
} else {
this.$message.error(res.data.message)
}
}, err => {})
this.getList();
},
updateData(id) {
this.apipost('admin_get_BranchGet', {
branchId: id
}, res => {
if (res.data.resultCode == 1) {
this.addMsg = res.data.data;
this.getCityList(this.addMsg.Province, 2);
this.addMsg.Status = this.addMsg.Status.toString();
this.addMsg.is_show = this.addMsg.is_show.toString();
this.addMsg.B2BShow = this.addMsg.B2BShow.toString();
this.addMsg.IsParentCompany = this.addMsg.IsParentCompany.toString();
this.imageUrl = this.addMsg.ConfirmationSignet;
this.imageUrlLogo = this.addMsg.TravelLogo;
} else {}
}, err => {})
},
handleCurrentChange(val) {
this.msg.pageIndex = val;
this.getList();
},
resetPageIndex() {
this.msg.pageIndex = 1;
this.currentPage = 1
},
closeChangeMachie(done) { //弹出框关闭初始化弹框内表单
done();
this.resetForm('addMsg');
},
resetForm(formName) { //弹出框取消 初始化谈框内表单
this.$refs[formName].resetFields();
this.addMsg.Id = '-1'
this.addMsg.ConfirmationSignet = '';
this.addMsg.TravelLogo = '';
this.imageUrl = '';
this.imageUrlLogo = '';
},
//获取城市列表
getProvince() {
let msg = {
Id: 2
};
this.apipost(
"dict_post_Destination_GetChildList",
msg,
res => {
this.ProvinceList = res.data.data;
},
err => {}
);
},
//根据省份选择获取城市
getCityList(Id, type) {
this.CityList = [];
if (type == 1) {
this.addMsg.City = "";
}
let msg = {
Id: Id
};
this.apipost(
"dict_post_Destination_GetChildList",
msg,
res => {
this.CityList = res.data.data;
},
err => {}
);
},
},
}
</script>