文件
xionggeshop/public/assets/js/backend/shopro_huifu/onboard.js
可乐加冰 375bc7af20 ```后台: 新增用户搜索功能并优化进件页面UI
- 在Onboard控制器中添加searchUser方法,支持按昵称、手机号、ID搜索用户
- 修改noNeedRight权限配置,添加searchUser访问权限
- 重构用户选择逻辑,使用新的fetchUserPublic和formatUserOption方法
- 实现用户搜索功能,支持关键词模糊匹配并返回格式化的用户选项
- 优化前端页面样式,采用卡片式布局提升用户体验
- 添加用户头像显示和个人信息展示功能
- 调整页面结构,增加标题栏、底部操作栏等组件
```
2026-09-29 15:47:22 +08:00

487 行
21 KiB
JavaScript

define(['jquery', 'bootstrap', 'backend'], function ($, undefined, Backend) {
var areaCache = null;
var branchTimer = null;
function withVue(callback) {
if (typeof Vue !== 'undefined') {
callback(Vue);
return;
}
require.config({
paths: {
'vue': '../addons/shopro/libs/vue',
'ELEMENT': '../addons/shopro/libs/element/element'
},
shim: {
'ELEMENT': {
deps: ['css!../addons/shopro/libs/element/element.css', 'vue']
}
}
});
require(['vue', 'ELEMENT'], function (Vue, ELEMENT) {
Vue.use(ELEMENT);
callback(Vue);
});
}
function defaultForm() {
return {
account_type: 'indv',
bank_account_type: '0',
name: '',
cert_no: '',
cert_validity_type: '1',
cert_begin_date: '',
cert_end_date: '',
mobile_no: '',
reg_detail: '',
shopro_province_id: '',
shopro_city_id: '',
shopro_district_id: '',
prov_id: '',
area_id: '',
district_id: '',
card_no: '',
card_name: '',
branch_code: '',
branch_name: '',
mp: '',
id_card_front_url: '',
id_card_back_url: '',
bank_card_url: '',
reg_name: '',
license_code: '',
license_validity_type: '1',
license_begin_date: '',
license_end_date: '',
legal_name: '',
legal_mobile: '',
legal_cert_no: '',
legal_cert_validity_type: '1',
legal_cert_begin_date: '',
legal_cert_end_date: '',
license_url: '',
legal_id_front_url: '',
legal_id_back_url: '',
account_permit_url: ''
};
}
function createFormMixin() {
return {
data: function () {
return {
isEdit: false,
editId: 0,
userId: '',
userLabel: '',
roleKey: '',
roleType: '',
roleRefId: 0,
roleLabel: '',
userOptions: [],
userLoading: false,
selectedUser: null,
roleOptions: [],
form: defaultForm(),
regionPath: [],
areaOptions: [],
areaProps: { value: 'id', label: 'name', children: 'children' },
branchKeyword: '',
branchResults: [],
uploadUrl: Fast.api.fixurl('ajax/upload'),
saving: false
};
},
computed: {
bankMobile: {
get: function () {
return this.form.account_type === 'ent' ? this.form.legal_mobile : this.form.mobile_no;
},
set: function (val) {
if (this.form.account_type === 'ent') {
this.form.legal_mobile = val;
} else {
this.form.mobile_no = val;
}
this.form.mp = val;
}
}
},
mounted: function () {
this.loadAreaTree();
this.initFromConfig();
},
methods: {
initFromConfig: function () {
var init = (typeof Config !== 'undefined' && Config.onboardForm) ? Config.onboardForm : null;
if (!init) return;
this.isEdit = true;
this.editId = init.onboard_id || 0;
this.userId = init.user_id;
this.userLabel = init.user_label || '';
this.roleType = init.role_type;
this.roleRefId = init.role_ref_id;
this.roleKey = init.role_type + ':' + init.role_ref_id;
this.roleLabel = init.role_label || '';
this.form = Object.assign(defaultForm(), init.form || {});
this.branchKeyword = this.form.branch_name || '';
this.restoreRegionPath();
},
loadAreaTree: function () {
var vm = this;
var done = function (data) {
areaCache = data || [];
vm.areaOptions = areaCache;
vm.restoreRegionPath();
};
if (areaCache) {
done(areaCache);
return;
}
Fast.api.ajax({ url: 'shopro/area/getCascader', type: 'GET' }, function (ret, res) {
done(res.data || []);
return false;
});
},
restoreRegionPath: function () {
var ids = [];
if (this.form.shopro_province_id) ids.push(parseInt(this.form.shopro_province_id, 10));
if (this.form.shopro_city_id) ids.push(parseInt(this.form.shopro_city_id, 10));
if (this.form.shopro_district_id) ids.push(parseInt(this.form.shopro_district_id, 10));
this.regionPath = ids.filter(function (n) { return !!n; });
},
onRegionChange: function (val) {
val = val || [];
this.form.shopro_province_id = val[0] ? String(val[0]) : '';
this.form.shopro_city_id = val[1] ? String(val[1]) : '';
this.form.shopro_district_id = val[2] ? String(val[2]) : '';
this.form.prov_id = this.form.shopro_province_id;
this.form.area_id = this.form.shopro_city_id;
this.form.district_id = this.form.shopro_district_id;
},
userAvatarText: function (item) {
if (!item) return '?';
var name = item.display_name || item.nickname || '';
return name ? name.slice(0, 1) : '?';
},
applySelectedUser: function (user) {
if (!user || !user.id) {
this.selectedUser = null;
this.userLabel = '';
return;
}
this.selectedUser = user;
this.userLabel = user.option_label || (user.display_name + ' (' + (user.mobile || user.id) + ')');
},
searchUser: function (keyword) {
keyword = (keyword || '').trim();
if (!keyword) {
this.userOptions = [];
return;
}
var vm = this;
vm.userLoading = true;
Fast.api.ajax({
url: 'shopro_huifu/onboard/searchUser',
type: 'GET',
data: { keyword: keyword, limit: 20 }
}, function (ret, res) {
vm.userOptions = res.data || [];
vm.userLoading = false;
return false;
}, function () {
vm.userLoading = false;
});
},
onUserChange: function () {
var vm = this;
vm.roleKey = '';
vm.roleType = '';
vm.roleRefId = 0;
vm.roleOptions = [];
if (!vm.userId) {
vm.applySelectedUser(null);
return;
}
var cached = vm.userOptions.find(function (item) { return item.id === vm.userId; });
if (cached) {
vm.applySelectedUser(cached);
}
Fast.api.ajax({
url: 'shopro_huifu/onboard/userRoles',
type: 'GET',
data: { user_id: vm.userId }
}, function (ret, res) {
var data = res.data || {};
vm.roleOptions = data.roles || [];
if (data.user) {
vm.applySelectedUser(data.user);
}
return false;
});
},
onRoleChange: function () {
var parts = String(this.roleKey || '').split(':');
this.roleType = parts[0] || '';
this.roleRefId = parseInt(parts[1] || '0', 10);
var role = this.roleOptions.find(function (item) {
return item.role_type === this.roleType && item.role_ref_id === this.roleRefId;
}.bind(this));
this.roleLabel = role ? role.role_label : '';
},
onBranchInput: function () {
var vm = this;
clearTimeout(branchTimer);
branchTimer = setTimeout(function () {
if (!vm.branchKeyword) {
vm.branchResults = [];
return;
}
Fast.api.ajax({
url: 'shopro_huifu/onboard/searchBranch',
type: 'GET',
data: {
keyword: vm.branchKeyword,
area_id: vm.form.area_id || vm.form.shopro_city_id
}
}, function (ret, res) {
vm.branchResults = res.data || [];
return false;
});
}, 300);
},
selectBranch: function (item) {
this.form.branch_code = item.branch_code;
this.form.branch_name = item.branch_name;
this.branchKeyword = item.branch_name;
this.branchResults = [];
if (item.prov_id) this.form.prov_id = item.prov_id;
if (item.area_id) this.form.area_id = item.area_id;
},
onUploadSuccess: function (field, res) {
if (res && res.code === 1 && res.data && res.data.url) {
this.form[field] = res.data.fullurl || res.data.url;
return;
}
this.$message.error((res && res.msg) || '上传失败');
},
closeForm: function () {
Fast.api.close();
},
submitForm: function () {
var vm = this;
if (!vm.isEdit) {
if (!vm.userId) {
Toastr.error('请选择用户');
return;
}
if (!vm.roleType || !vm.roleRefId) {
Toastr.error('请选择进件角色');
return;
}
}
vm.saving = true;
var url = vm.isEdit
? ('shopro_huifu/onboard/edit/ids/' + vm.editId)
: 'shopro_huifu/onboard/add';
Fast.api.ajax({
url: url,
type: 'POST',
data: {
user_id: vm.userId,
role_type: vm.roleType,
role_ref_id: vm.roleRefId,
form: vm.form
}
}, function () {
vm.saving = false;
Fast.api.close();
return false;
}, function () {
vm.saving = false;
});
}
}
};
}
var Controller = {
index: function () {
withVue(function (Vue) {
new Vue({
el: '#huifuOnboardIndex',
data: {
listData: [],
loading: false,
filterStatus: '',
detailVisible: false,
detailLoading: false,
detailData: null,
detailId: 0
},
computed: {
previewList: function () {
if (!this.detailData || !this.detailData.form) {
return [];
}
var f = this.detailData.form;
return [f.id_card_front_url, f.id_card_back_url, f.bank_card_url].filter(function (u) { return !!u; });
}
},
mounted: function () {
this.getList();
},
methods: {
openCreate: function () {
var vm = this;
Backend.api.open('shopro_huifu/onboard/add', '新建汇付进件', {
area: ['960px', '92%'],
callback: function () {
vm.getList();
}
});
},
openEdit: function (id) {
var vm = this;
Backend.api.open('shopro_huifu/onboard/edit/ids/' + id, '编辑汇付进件', {
area: ['960px', '92%'],
callback: function () {
vm.getList();
if (vm.detailVisible && vm.detailId === id) {
vm.openDetail(id);
}
}
});
},
canEditRow: function (row) {
return ['draft', 'failed', 'rejected'].indexOf(row.onboard_status) >= 0;
},
getList: function () {
var vm = this;
vm.loading = true;
Fast.api.ajax({
url: 'shopro_huifu/onboard/index',
type: 'GET',
data: { limit: 200, status: vm.filterStatus }
}, function (ret, res) {
vm.listData = (res.data && res.data.rows) || [];
vm.loading = false;
return false;
}, function () {
vm.loading = false;
});
},
openDetail: function (id) {
var vm = this;
vm.detailId = id;
vm.detailVisible = true;
vm.detailLoading = true;
vm.detailData = null;
Fast.api.ajax({
url: 'shopro_huifu/onboard/index',
type: 'GET',
data: { detail_id: id }
}, function (ret, res) {
vm.detailData = res.data || null;
vm.detailLoading = false;
return false;
}, function () {
vm.detailLoading = false;
});
},
goAudit: function (url) {
if (!url) return;
Backend.api.addtabs(url, '业务审核');
},
submitRow: function (id) {
var vm = this;
Layer.confirm('确认资料无误并提交汇付进件?', function (index) {
Layer.close(index);
Fast.api.ajax({ url: 'shopro_huifu/onboard/submit/ids/' + id, type: 'POST' }, function () {
vm.getList();
if (vm.detailVisible && vm.detailId === id) {
vm.openDetail(id);
}
});
});
},
pollRow: function (id) {
var vm = this;
Fast.api.ajax({ url: 'shopro_huifu/onboard/poll/ids/' + id, type: 'POST' }, function () {
vm.getList();
if (vm.detailVisible && vm.detailId === id) {
vm.openDetail(id);
}
});
},
retryRow: function (id) {
var vm = this;
Fast.api.ajax({ url: 'shopro_huifu/onboard/retry/ids/' + id, type: 'POST' }, function () {
vm.getList();
if (vm.detailVisible && vm.detailId === id) {
vm.openDetail(id);
}
});
},
submitFromDetail: function () {
if (this.detailId) {
this.submitRow(this.detailId);
}
},
pollFromDetail: function () {
if (this.detailId) {
this.pollRow(this.detailId);
}
},
retryFromDetail: function () {
if (this.detailId) {
this.retryRow(this.detailId);
}
},
editFromDetail: function () {
if (this.detailId) {
this.openEdit(this.detailId);
}
},
statusText: function (status) {
var map = {
draft: '待后台审核',
submitting: '提交中',
basic_ok: '开户成功',
busi_pending: '汇付审核中',
approved: '已通过',
rejected: '已驳回',
failed: '失败'
};
return map[status] || status || '-';
},
roleText: function (role) {
return role === 'regional_agent' ? '区域公司' : (role === 'promoter' ? '推广员' : role);
},
formatTime: function (ts) {
if (!ts) return '-';
var d = new Date(ts * 1000);
var p = function (n) { return n < 10 ? '0' + n : n; };
return d.getFullYear() + '-' + p(d.getMonth() + 1) + '-' + p(d.getDate()) + ' ' + p(d.getHours()) + ':' + p(d.getMinutes());
}
}
});
});
},
add: function () {
withVue(function (Vue) {
new Vue({
el: '#huifuOnboardAdd',
mixins: [createFormMixin()]
});
});
},
edit: function () {
Controller.add();
}
};
return Controller;
});