emis-frontend/src/views/emis/emisCustomerUser/monthUserList.vue
2024-06-05 12:53:57 +08:00

640 lines
26 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<XdPageContainer class="app-container">
<SearchForm slot="pageHeader" :model="queryParams" ref="queryForm" size="mini" :maxShow="10" label-width="100px" v-show="showSearch" @search="handleQuery" @reset="resetQuery">
<el-form-item label="客户名称" prop="company">
<el-input
v-model="queryParams.company"
:placeholder="$t('客户名称')"
clearable
@keyup.enter.native="handleQuery"
@input="handleQuery"
/>
</el-form-item>
<el-form-item label="月结卡号" prop="company">
<el-input
v-model="queryParams.monthlyPayCode"
:placeholder="$t('月结卡号')"
clearable
@keyup.enter.native="handleQuery"
@input="handleQuery"
/>
</el-form-item>
<el-form-item label="所属网点" prop="parentSiteCode">
<EmisSiteSimplePicker :placeholder="$t('所属网点')" v-model="queryParams.ownerSite" @onChange="handleQuery"></EmisSiteSimplePicker>
</el-form-item>
<el-form-item label="联系人" prop="contact">
<el-input
v-model="queryParams.contact"
:placeholder="$t('联系人')"
clearable
@keyup.enter.native="handleQuery"
@input="handleQuery"
/>
</el-form-item>
<el-form-item label="电话" prop="phone">
<el-input
v-model="queryParams.phone"
:placeholder="$t('电话')"
clearable
@keyup.enter.native="handleQuery"
@input="handleQuery"
/>
</el-form-item>
<el-form-item label="国家" prop="country">
<CountryPicker :placeholder="$t('国家')" v-model="queryParams.country" ></CountryPicker>
</el-form-item>
<el-form-item label="省份" prop="province">
<ProvincePicker v-model="queryParams.province" :countryCode="queryParams.country" ></ProvincePicker>
</el-form-item>
<el-form-item label="回款联系人" prop="payee" >
<PayeePicker :placeholder="$t('回款联系人')" v-model="queryParams.payee" ></PayeePicker>
</el-form-item>
<el-form-item label="销售联系人" prop="salesmen" >
<SalemanPicker :placeholder="$t('销售联系人')" v-model="queryParams.salesmen" ></SalemanPicker>
</el-form-item>
<el-form-item :label="$t('启用状态')" prop="status">
<el-select v-model="queryParams.status" clearable :placeholder="$t('启用状态')" @change="handleQuery">
<el-option key="0" label="停用" :value="0" />
<el-option key="1" label="启用" :value="1" />
</el-select>
</el-form-item>
<el-form-item :label="$t('开通OMS')" prop="blOpenOms">
<el-select v-model="queryParams.blOpenOms" clearable :placeholder="$t('启用状态')" @change="handleQuery">
<el-option key="0" label="否" :value="0" />
<el-option key="1" label="是" :value="1" />
</el-select>
</el-form-item>
<el-form-item :label="$t('发送短信')" prop="blSms">
<el-select v-model="queryParams.blSms" clearable :placeholder="$t('启用状态')" @change="handleQuery">
<el-option key="0" label="否" :value="0" />
<el-option key="1" label="是" :value="1" />
</el-select>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input
v-model="queryParams.remark"
:placeholder="$t('备注')"
clearable
@keyup.enter.native="handleQuery"
@input="handleQuery"
/>
</el-form-item>
</SearchForm>
<XdTable
slot="pageContent"
slot-scope="slotProps"
:height="(slotProps.contentHeight)+'px'"
v-loading="loading"
border stripe
size="small"
:data="emisCustomerUserList"
:showSearch.sync="showSearch"
:queryParams="queryParams"
:total="total"
@queryTable="getList"
@selection-change="handleSelectionChange"
@sort-change="handleSortChange"
>
<div slot="toolbar">
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPermi="['emis:emisCustomerUser:add']"
>新增客户</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="success"
plain
icon="el-icon-edit"
size="mini"
:disabled="multiple"
@click="handleBatchUpdate"
v-hasPermi="['emis:emisCustomerUser:edit']"
>批量修改</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['emis:emisCustomerUser:remove']"
>删除</el-button>
</el-col>
<el-col :span="1.5">
<el-upload
action=""
name="file"
accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
:show-file-list="false"
v-hasPermi="['emis:emisCustomerUser:add']"
:before-upload="beforeAvatarUpload">
<el-button slot="trigger" plain class="filter-item" size="mini" type="primary" >导入</el-button>
<el-link type="primary" style="line-height: 28px;font-size:13px" href="/static/tpl/imp_month_user.xlsx">下载导入模版</el-link>
</el-upload>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
size="mini"
@click="handleExport"
v-hasPermi="['emis:emisCustomerUser:export']"
>导出</el-button>
</el-col>
</el-row>
</div>
<el-table-column type="selection" width="55" align="center" />
<!-- <el-table-column :label="$t('客户编码')" align="center" prop="customerCode" min-width="100" >
<template slot-scope="scope">
<div class="link-type" @click="handleUpdate(scope.row)">{{scope.row.customerCode}}</div>
</template>
</el-table-column> -->
<el-table-column :label="$t('客户名称')" align="left" prop="company" width="180" :show-overflow-tooltip="true">
<template slot-scope="scope">
<div class="link-type" @click="handleUpdate(scope.row)">{{scope.row.customerName}}</div>
</template>
</el-table-column>
<el-table-column :label="$t('主归属网点')" align="center" prop="ownerSiteName" min-width="100" />
<el-table-column :label="$t('月结卡号')" align="center" prop="monthlyPayCode" min-width="100" />
<el-table-column :label="$t('联系人')" align="left" prop="contact" width="120" :show-overflow-tooltip="true" />
<el-table-column :label="$t('电话')" align="center" prop="phone" width="100" />
<el-table-column :label="$t('国家')" align="left" prop="countryName" min-width="100" />
<el-table-column :label="$t('省份')" align="left" prop="provinceName" min-width="100" :show-overflow-tooltip="true"/>
<el-table-column :label="$t('城市')" align="left" prop="citeName" min-width="130" :show-overflow-tooltip="true" >
<template slot-scope="scope">
<div >
{{ scope.row.cityName }} {{ scope.row.countyName }}
</div>
</template>
</el-table-column>
<el-table-column :label="$t('地址')" align="center" prop="address" min-width="100" :show-overflow-tooltip="true" />
<el-table-column :label="$t('业务网点范围')" align="center" prop="bizSiteName" min-width="150" :show-overflow-tooltip="true"/>
<el-table-column :label="$t('回款联系人')" align="center" prop="payee" min-width="100" />
<el-table-column :label="$t('销售联系人')" align="center" prop="salesmen" min-width="100" />
<el-table-column :label="$t('开通oms')" align="center" prop="blOpenOms" min-width="100" >
<template slot-scope="scope">
<el-tag v-if="scope.row.blOpenOms==1" type="success">是</el-tag>
<el-tag v-if="scope.row.blOpenOms==0" type="danger">否</el-tag>
</template>
</el-table-column>
<el-table-column :label="$t('是否短信')" align="center" prop="blSms" min-width="100" >
<template slot-scope="scope">
<el-tag v-if="scope.row.blSms==1" type="success">是</el-tag>
<el-tag v-if="scope.row.blSms==0" type="danger">否</el-tag>
</template>
</el-table-column>
<el-table-column label="启用状态" align="center" prop="status" min-width="100" >
<template slot-scope="scope">
<el-tag v-if="scope.row.status==1" type="success">启用</el-tag>
<el-tag v-if="scope.row.status==0" type="danger">停用</el-tag>
</template>
</el-table-column>
<el-table-column :label="$t('首次签约日期')" align="center" prop="firstSigningDay" min-width="100" />
<!-- <el-table-column :label="$t('专属业务员')" align="center" prop="opEmpName" min-width="100" /> -->
<!-- <el-table-column :label="$t('微信昵称')" align="center" prop="nickName" min-width="120" /> -->
<!-- <el-table-column :label="$t('openid')" align="center" prop="openid" min-width="100" /> -->
<el-table-column :label="$t('数据来源')" align="center" prop="dataFrom" min-width="100" />
<el-table-column :label="$t('最近下单时间')" align="center" prop="loginDate" min-width="170" />
<el-table-column :label="$t('数据来源')" align="center" prop="dataFrom" min-width="100" />
<el-table-column label="备注" align="center" prop="remark" width="80"/>
<el-table-column label="创建人" align="center" prop="createByName" width="80" :show-overflow-tooltip="true"/>
<el-table-column label="创建网点" align="center" prop="createSiteName" width="80" :show-overflow-tooltip="true"/>
<el-table-column label="创建时间" align="center" prop="createTime" width="170"/>
<el-table-column label="修改人" align="center" prop="updateByName" width="80" :show-overflow-tooltip="true"/>
<el-table-column label="修改网点" align="center" prop="updateSiteName" width="80" :show-overflow-tooltip="true"/>
<el-table-column label="修改时间" align="center" prop="updateTime" width="170"/>
<!-- <el-table-column :label="$t('排序')" align="center" prop="orderNum" min-width="100" /> -->
<!-- <el-table-column :label="$t('备注')" align="center" prop="remark" min-width="100" /> -->
<!-- <el-table-column :label="$t('删除标志(0代表存在')" align="center" prop="delFlag" min-width="100" /> -->
<el-table-column :label="$t('操作')" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['emis:emisCustomerUser:edit']"
>修改</el-button>
<!--
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['emis:emisCustomerUser:remove']"
>删除</el-button> -->
</template>
</el-table-column>
</XdTable>
<el-dialog :title="titleForm" :visible.sync="openForm" width="60%" :destroy-on-close="true" :close-on-click-modal="false" v-dialogDrag append-to-body>
<monthUserForm :id="currentId" customerType="2" @on-changed="handleFormChanged" @on-cancel="cancelForm"></monthUserForm>
</el-dialog>
<el-dialog :title="titleForm" :visible.sync="openBatchUpdateForm" width="50%" :destroy-on-close="true" :close-on-click-modal="false" v-dialogDrag append-to-body>
<batchUpdateForm :ids="ids" @on-changed="handleFormChanged" @on-cancel="cancelForm"></batchUpdateForm>
</el-dialog>
<!-- <el-dialog :title="title" :visible.sync="open" width="50%" v-dialogDrag :close-on-click-modal="false" append-to-body>
<el-row :gutter="0">
<el-form ref="form" :model="form" :rules="rules" size="mini" label-width="80px">
<el-col :span="24">
<el-form-item label="选择文件" prop="uploadFile" >
<el-upload
action=""
name="file"
accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
:show-file-list="true"
:limit="1"
:file-list="fileList"
:on-change="fileChange"
:before-upload="beforeUpload">
<el-button slot="trigger" plain class="filter-item" size="mini" type="primary" >选择文件</el-button>
<el-link type="primary" style="line-height: 28px;font-size:13px" href="/static/tpl/imp_exp_order.xls">下载Excel模板</el-link>
<div v-if="uploadExcelDataInfo !=''" style="color: black;font-size: 12px;font-weight: 800;">{{ fileName }} {{ uploadExcelDataInfo }}</div>
</el-upload>
<el-alert
title="注意"
type="success"
description="仅允许导入“xls”或“xlsx”格式文件!"
close-text="知道了">
</el-alert>
</el-form-item>
</el-col>
</el-form>
</el-row>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="batchImpDataForm">开始导入</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog> -->
</XdPageContainer>
</template>
<script>
import { listMonthUser, delEmisCustomerUser,addMonthUser } from "@/api/emis/emisCustomerUser";
import elDateSimplePicker from '@/components/DatePickerAdv/elDateSimplePicker';
// import emisCustomerUserView from '@/views/emis/emisCustomerUser/emisCustomerUserView';
import monthUserForm from '@/views/emis/emisCustomerUser/monthUserForm';
import batchUpdateForm from '@/views/emis/emisCustomerUser/batchUpdateForm';
import EmisSiteSimplePicker from '@/views/emis/EmisBaseTools/EmisSiteSimplePicker.vue';
import CountryPicker from '@/views/emis/EmisBaseTools/CountryPicker.vue';
import ProvincePicker from '@/views/emis/EmisBaseTools/ProvincePicker.vue';
import CityPicker from '@/views/emis/EmisBaseTools/CityPicker.vue';
import EmisUserSimplePicker0 from '@/views/emis/EmisBaseTools/EmisUserSimplePicker.vue';
import EmisUserSimplePicker1 from '@/views/emis/EmisBaseTools/EmisUserSimplePicker.vue';
import EmisUserSimplePicker2 from '@/views/emis/EmisBaseTools/EmisUserSimplePicker.vue';
import PayeePicker from '@/views/emis/EmisBaseTools/PayeePicker.vue';
import SalemanPicker from '@/views/emis/EmisBaseTools/SalemanPicker.vue';
import XLSX from 'xlsx'
export default {
name: "MonthUserList",
components: {
PayeePicker,SalemanPicker,
elDateSimplePicker,monthUserForm,batchUpdateForm,CountryPicker,
EmisSiteSimplePicker,ProvincePicker,CityPicker,
EmisUserSimplePicker0,EmisUserSimplePicker1,EmisUserSimplePicker2
},
dicts: [
],
data() {
return {
tableHeight: 200,
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 创建时间搜索
dateTimeRange:[],
// 总条数
total: 0,
// 快递客户用户表格数据
emisCustomerUserList: [],
currentId:null,
openForm: false,
openBatchUpdateForm:false,
titleForm: "",
customerType:1,
// 弹出展示层
id:null,
titleView:"",
openView: false,
// 修改站点代码时间范围
daterangeCreateTime: [],
// 修改站点代码时间范围
daterangeUpdateTime: [],
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 20,
customerType:2,
customerName: null,
phone: null,
company: null,
},
};
},
created() {
this.getList();
},
methods: {
/** 查询快递客户用户列表 */
getList() {
this.loading = true;
this.queryParams.params = {};
if (null != this.daterangeCreateTime && '' != this.daterangeCreateTime) {
this.queryParams.params["beginCreateTime"] = this.daterangeCreateTime[0];
this.queryParams.params["endCreateTime"] = this.daterangeCreateTime[1];
}
if (null != this.daterangeUpdateTime && '' != this.daterangeUpdateTime) {
this.queryParams.params["beginUpdateTime"] = this.daterangeUpdateTime[0];
this.queryParams.params["endUpdateTime"] = this.daterangeUpdateTime[1];
}
listMonthUser(this.addDateRange(this.queryParams, this.dateTimeRange)).then(response => {
this.emisCustomerUserList = response.rows;
this.total = response.total;
this.loading = false;
});
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.id)
this.single = selection.length!==1
this.multiple = !selection.length
},
// 排序 查询字段是表格中字段名字 动态取值排序顺序
handleSortChange(column) {
this.queryParams.orderByColumn = column.prop;
this.queryParams.isAsc = column.order;
this.getList();
},
/** 新增按钮操作 */
handleAdd(row) {
this.currentId=null;
this.openForm= true;
this.titleForm = "新增月结客户";
},
handleShowMoreInput(){
this.moreInputVisible = !this.moreInputVisible;
},
/** 修改按钮操作 */
handleBatchUpdate(row) {
this.currentId= row.id;
this.openBatchUpdateForm = true;
this.titleForm = "批量修改";
},
handleUpdate(row) {
this.currentId= row.id;
this.openForm = true;
this.titleForm = "修改月结客户";
},
handleView(row) {
this.id=row.id;
this.titleView="查看";
this.openView=true;
// this.router.push({ path: '/emis/emisCustomerUser/viewDetail', query: { id: row.id }})
},
handleFormChanged(){
this.openForm = false;
this.openBatchUpdateForm = false;
this.getList();
},
cancelForm(){
this.openBatchUpdateForm = false;
this.openForm = false;
},
/** 删除按钮操作 */
handleDelete(row) {
const ids = row.id || this.ids;
this.$modal.confirm('是否确认删除').then(function() {
return delEmisCustomerUser(ids);
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {});
},
beforeAvatarUpload(file) {
this.readerData(file)
return false
},
readerData(rawFile) {
return new Promise((resolve, reject) => {
const reader = new FileReader()
reader.onload = e => {
const data = e.target.result
const workbook = XLSX.read(data, { type: 'array' })
const firstSheetName = workbook.SheetNames[0] // firstSheetName
// if (!excelTypes.includes(firstSheetName)) {
// reject('无法识别当前Excel模板')
// this.$message.error('无法识别当前Excel模板')
// return
// }
const worksheet = workbook.Sheets[firstSheetName]
// const header = this.getHeaderRow(worksheet) // 标题
const results = XLSX.utils.sheet_to_json(worksheet)
console.log(results);
this.batchImportData(results);
resolve()
}
reader.readAsArrayBuffer(rawFile)
})
},
getHeaderRow(sheet) {
const headers = []
const range = XLSX.utils.decode_range(sheet['!ref'])
let C
const R = range.s.r
/* start in the first row */
for (C = range.s.c; C <= range.e.c; ++C) { /* walk every column in the range */
const cell = sheet[XLSX.utils.encode_cell({ c: C, r: R })]
/* find the cell in the first row */
let hdr = 'UNKNOWN ' + C // <-- replace with your desired default
if (cell && cell.t) hdr = XLSX.utils.format_cell(cell)
headers.push(hdr)
}
return headers
},
async batchImportData(results) {
const _index = 1
let loadingInstance = this.$loading({
text: '正在导入 ' + _index + ' ...'
})
for (let index = 0; index < results.length; index++) {
const element = results[index]
// 客户名称 英文简称 月结编号 联系人 手机号码 主归属网点 回款联系人 销售联系人 结算类型 国家 省份 城市 区县 联系地址 E-Mail 是否启用 是否开启OMS账号 首次签约时间 备注
const postData= {
customerName: element['客户名称'],
customerNameEn: element['英文简称'],
contact: element['联系人'],
phone: element['手机号码'],
customerType: '2',
settledType: '2',
userType: '2',
monthlyPayCode: element['月结编号'],
ownerSite: element['主归属网点'],
country: element['国家'],
province: element['省份'],
city:element['城市'],
county: element['区县'],
address: element['联系地址'],
email: element['E-Mail'],
status: element['是否启用'],
payee: element['回款联系人'],
salesmen: element['销售联系人'],
dataFrom: "pc",
firstSigningDay:element['首次签约时间'],
blOpenOms: element['是否开启OMS账号'],
remark: element['备注']
};
// postData.cosignee= element['']
// postData.cosigneeAddress= element['收件地址']
// postData.cosigneeTelephone= element['收件电话']
// postData.country= element['国家']
// postData.extJsonStr = JSON.stringify(extJsonStr)
const res = await addMonthUser(postData)
console.log(res);
if (res.code !== 200) {
this.$message.error(JSON.stringify(res.msg))
loadingInstance.close()
return
}
loadingInstance.close()
loadingInstance = this.$loading({
text: '正在导入 ' + _index + ' 数据...'
})
}
loadingInstance.close()
this.handleQuery();
},
/** 导出按钮操作 */
handleExport() {
// this.download('emis/emisCustomerUser/export', {
// ...this.queryParams
// }, `emisCustomerUser_${new Date().getTime()}.xlsx`)
const loadingInstance = this.$loading({
text: '正在导出...'
})
var qParam = {...this.queryParams};
qParam.pageNum=1;
qParam.pageSize=5000;
listMonthUser(this.addDateRange(this.queryParams, this.dateTimeRange)).then(response => {
this.downloadLoading = false
if (response.code === 200) {
const curList = response.rows
import('@/vendor/Export2Excel').then(excel => {
// 客户名称 英文简称 月结编号 联系人 手机号码 主归属网点 回款联系人 销售联系人 结算类型 国家 省份 城市 区县 联系地址 E-Mail 是否启用 是否开启OMS账号 首次签约时间 备注
const tHeader = ['客户名称','英文简称','月结编号','联系人','手机号码','主归属网点','回款联系人','销售联系人','结算类型','国家','省份','城市','区县','联系地址','E-Mail','是否启用','是否开启OMS账号','首次签约时间','备注'];
const filterVal = ['customerName','customerNameEn','monthlyPayCode','contact','phone','ownerSite','payee','salesmen','settedType','country','province','city','county','address','email','status','blOpenOms','firstSigningDay','remark'];
const data = this.formatJson(filterVal, curList, response.rows)
excel.export_json_to_excel({
header: tHeader,
data,
filename: '月结客户',
autoWidth: true
})
loadingInstance.close()
})
}
});
},
formatJson(filterVal, jsonData, resData) {
let index = 0
return jsonData.map(v => filterVal.map(j => {
if (j === 'index') {
return ++index
}
if (j === 'status') {
var statusStr='停用'
if(v[j] == 1){
statusStr='启用'
}
return statusStr;
}
return v[j]
}))
},
/** 列索引函数 */
getIndex($index) {
return (this.queryParams.pageNum - 1) * this.queryParams.pageSize + $index + 1
},
/** 时间搜索响应函数 */
dateTimeChange(value){
this.dateTimeRange=value;
},
}
};
</script>
<style scoped>
.el-divider{
margin-top: 0px;
background: 0 0;
border-top: 1px solid #E6EBF5;
}
.el-divider__text {
color: #0955ee;
cursor: pointer;
}
</style>