390 行
18 KiB
HTML
可执行文件
390 行
18 KiB
HTML
可执行文件
<!--[1.5.66]-->
|
||
<style>
|
||
#supplierSet .el-alert {
|
||
margin: 0 auto;
|
||
max-width: 664px;
|
||
}
|
||
|
||
#supplierSet .el-form {
|
||
margin: 10px auto 0;
|
||
max-width: 664px;
|
||
}
|
||
|
||
#supplierSet .el-input {
|
||
max-width: 584px;
|
||
}
|
||
|
||
#supplierSet .el-button {
|
||
margin: 0 auto;
|
||
display: block;
|
||
}
|
||
</style>
|
||
<div id="supplierSet">
|
||
<el-alert :closable="false" title="表单所有信息均为必填项,请您认真填写" type="info"></el-alert>
|
||
<el-form label-width="80px" size="small" :model="dataForm" :rules="ruleForm" ref="dataForm">
|
||
<el-form-item label="编码" prop="code">
|
||
<el-input v-model="dataForm.code" placeholder="请输入供货商编码"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="名称" prop="supplier_name">
|
||
<el-input v-model="dataForm.supplier_name" placeholder="请输入供货商名称"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="联系人" prop="linkman">
|
||
<el-input v-model="dataForm.linkman" placeholder="请输入联系人"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="联系方式" prop="phone">
|
||
<el-input v-model="dataForm.phone"
|
||
oninput="(this.v=function(){this.value=this.value.replace(/[^0-9-]+/,'');}).call(this)"
|
||
placeholder="请输入联系方式"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="所在地区" prop="provinceid">
|
||
<el-select clearable
|
||
filterable
|
||
v-model="dataForm.provinceid"
|
||
@change="selectPro"
|
||
placeholder="请选择省">
|
||
<el-option
|
||
v-for="item in provinceList"
|
||
:key="item.cityid"
|
||
:label="item.city_name"
|
||
:value="item.cityid">
|
||
</el-option>
|
||
</el-select>
|
||
<el-select clearable
|
||
filterable
|
||
v-model="dataForm.cityid"
|
||
@change="selectCity"
|
||
placeholder="请选择市">
|
||
<el-option
|
||
v-for="item in cityList"
|
||
:key="item.cityid"
|
||
:label="item.city_name"
|
||
:value="item.cityid">
|
||
</el-option>
|
||
</el-select>
|
||
<el-select clearable
|
||
filterable
|
||
v-model="dataForm.areaid"
|
||
placeholder="请选择区">
|
||
<el-option
|
||
v-for="item in areaList"
|
||
:key="item.cityid"
|
||
:label="item.city_name"
|
||
:value="item.cityid">
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="详细地址" prop="address">
|
||
<el-input v-model="dataForm.address" placeholder="请输入详细地址"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="经营方式">
|
||
<el-input v-model="dataForm.operation_mode" placeholder="请输入经营方式"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="结算方式">
|
||
<el-input v-model="dataForm.settlement_method" placeholder="请输入结算方式"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="结算天数">
|
||
<el-input v-model="dataForm.settlement_days"
|
||
oninput="value=this.value.replace(/^[0]|\D/,'')"
|
||
placeholder="请输入结算天数"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="扣点比例">
|
||
<el-input v-model="dataForm.ratio"
|
||
oninput="value=value.replace(/[^\d.]/g,'')"
|
||
placeholder="请输入扣点比例；如：0.03"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="开户银行">
|
||
<el-select clearable
|
||
style="width: 100%"
|
||
filterable
|
||
allow-create
|
||
default-first-option
|
||
v-model="dataForm.bank_name"
|
||
@change="selectBank($event)"
|
||
placeholder="请选择/输入开户银行">
|
||
<el-option
|
||
v-for="item in bankList"
|
||
:key="item.bank_name"
|
||
:label="item.bank_name"
|
||
:value="item.bank_name">
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="银行卡号">
|
||
<div class="el-input el-input--small">
|
||
<input type="text"
|
||
v-model="dataForm.bank_card"
|
||
autocomplete="off"
|
||
oninput="formatBankNo(this)"
|
||
placeholder="请输入银行卡号"
|
||
class="el-input__inner">
|
||
</div>
|
||
</el-form-item>
|
||
</el-form>
|
||
<el-button type="primary"
|
||
size="medium"
|
||
:disabled="submitLoading"
|
||
@click="submitData('dataForm')">
|
||
<span v-if="submitLoading">提交中<i class="el-icon-loading"></i></span>
|
||
<span v-else>保 存</span>
|
||
</el-button>
|
||
</div>
|
||
<script>
|
||
var supplierSet = new Vue({
|
||
el: '#supplierSet',
|
||
data: {
|
||
submitLoading: false,//是否禁止提交
|
||
provinceList: [],//省列表
|
||
cityList: [],//市列表
|
||
areaList: [],//区列表
|
||
bankList: {$bank},//银行列表
|
||
dataForm: {
|
||
id: "{$info['id']}",
|
||
code: "{$info['code']}",//供货商编码
|
||
supplier_name: "{$info['supplier_name']}",//供货商名称
|
||
linkman: "{$info['supplier_name']}",//联系人
|
||
phone: "{$info['phone']}",//联系方式
|
||
provinceid: "{$info['provinceid']}",//省
|
||
cityid: "{$info['cityid']}",//市
|
||
areaid: "{$info['areaid']}",//区
|
||
address: "{$info['address']}",//详细地址
|
||
operation_mode: "{$info['operation_mode']}",//经营方式
|
||
settlement_method: "{$info['settlement_method']}",//结算方式
|
||
settlement_days: "{$info['settlement_days']}",//结算天数
|
||
ratio: "{$info['ratio']}",//扣点比例
|
||
bank_name: "{$info['bank_name']}",//银行
|
||
bank_card: "{$info['bank_card']}",//银行卡号
|
||
},
|
||
ruleForm: {
|
||
code: [{message: '请输入供货商编码', required: true, trigger: 'change'}, {
|
||
validator: function (rule, value, callback) {
|
||
var reg = /^[\?'"\.\w]{1,20}$/;
|
||
if (value == '') {
|
||
callback(new Error("请输入供货商编码"));
|
||
} else if (reg.test(value) == false) {
|
||
callback(new Error("供货商编码只能输入1-20位字母、数字及英文逗号、句号、引号、问号"));
|
||
} else {
|
||
callback();
|
||
}
|
||
}, trigger: 'change'
|
||
}],//供货商编码
|
||
supplier_name: [{message: '请输入供货商名称', required: true, trigger: 'change'}, {
|
||
validator: function (rule, value, callback) {
|
||
var reg = /^[\?？。'"‘’“”\.\w\u4E00-\u9FA5\uF900-\uFA2D]{1,20}$/;
|
||
if (value == '') {
|
||
callback(new Error("请输入供货商名称"));
|
||
} else if (reg.test(value) == false) {
|
||
callback(new Error("供货商名称只能输入1-20位汉字、字母、数字及中英文逗号、句号、引号、问号"));
|
||
} else {
|
||
callback();
|
||
}
|
||
}, trigger: 'change'
|
||
}],
|
||
linkman: [{message: '请输入联系人', required: true, trigger: 'change'}, {
|
||
validator: function (rule, value, callback) {
|
||
var reg = /^[\?？。'"‘’“”\.\w\u4E00-\u9FA5\uF900-\uFA2D]{1,20}$/;
|
||
if (value == '') {
|
||
callback(new Error("请输入联系人"));
|
||
} else if (reg.test(value) == false) {
|
||
callback(new Error("联系人只能输入1-20位汉字、字母、数字及中英文逗号、句号、引号、问号"));
|
||
} else {
|
||
callback();
|
||
}
|
||
}, trigger: 'change'
|
||
}],//联系人
|
||
phone: [{message: '请输入联系方式', required: true, trigger: 'change'}, {
|
||
validator: function (rule, value, callback) {
|
||
if (!value) {
|
||
callback(new Error("请输入联系方式"));
|
||
} else if (!/^0\d{2,3}-?\d{7,8}$/.test(value) && !/^[1]{1}[3|5|6|7|8|9]{1}\d{9}$/.test(value) && !/^400-[016789]\d{2}-\d{4}$/.test(value)) {
|
||
callback(new Error("请输入正确的联系方式"));
|
||
} else {
|
||
callback();
|
||
}
|
||
}, trigger: 'change'
|
||
}],//联系方式
|
||
provinceid: [{message: '请选择省、市、区', required: true, trigger: 'change'}, {
|
||
validator: function (rule, value, callback) {
|
||
let _t = supplierSet.dataForm;
|
||
console.log(value, _t.cityid, _t.areaid);
|
||
if (!value) {
|
||
callback(new Error("请选择省"));
|
||
} else if (!_t.cityid) {
|
||
callback(new Error("请选择市"));
|
||
} else if (!_t.areaid) {
|
||
callback(new Error("请选择区"));
|
||
} else {
|
||
callback();
|
||
}
|
||
}, trigger: 'change'
|
||
}],//省市区
|
||
address: [{message: '请输入详细地址', required: true, trigger: 'change'}, {
|
||
validator: function (rule, value, callback) {
|
||
var reg = /^[\?？。'"‘’“”\.\w\u4E00-\u9FA5\uF900-\uFA2D]{1,50}$/;
|
||
if (value == '') {
|
||
callback(new Error("请输入详细地址"));
|
||
} else if (reg.test(value) == false) {
|
||
callback(new Error("详细地址只能输入1-50位汉字、字母、数字及中英文逗号、句号、引号、问号"));
|
||
} else {
|
||
callback();
|
||
}
|
||
}, trigger: 'change'
|
||
}],//详细地址
|
||
},
|
||
},
|
||
methods: {
|
||
//提交新增、编辑
|
||
submitData(formName) {
|
||
this.$refs[formName].validate((valid) => {
|
||
if (valid) {
|
||
this.$confirm('确认保存该供货商信息吗?', '提示', {
|
||
confirmButtonText: '保存',
|
||
cancelButtonText: '取消',
|
||
type: 'warning'
|
||
}).then(() => {
|
||
this.submitLoading = true;
|
||
$.ajax({
|
||
url: "{:U('supplierSet')}",
|
||
type: "post",
|
||
data: this.dataForm,
|
||
success: (res) => {
|
||
this.submitLoading = false;
|
||
if (res.status == 1) {
|
||
this.$message({
|
||
message: res.msg,
|
||
type: 'success',
|
||
duration: 1000,
|
||
onClose: () => {
|
||
MenuApp.backPreview();//返回上一页面
|
||
}
|
||
});
|
||
} else {
|
||
this.submitLoading = false;
|
||
this.$alert(res.msg, '错误提示', {
|
||
confirmButtonText: '确定',
|
||
callback: action => {
|
||
|
||
}
|
||
});
|
||
}
|
||
},
|
||
error: (data) => {
|
||
console.log(data);
|
||
this.submitLoading = false;
|
||
this.$alert('请求发生错误，请稍后重试！', '错误提示', {
|
||
confirmButtonText: '确定',
|
||
callback: action => {
|
||
|
||
}
|
||
});
|
||
}
|
||
})
|
||
}).catch(() => {
|
||
})
|
||
}
|
||
})
|
||
},
|
||
//选择银行
|
||
selectBank(val) {
|
||
console.log(val);
|
||
},
|
||
//选择省、省发生改变
|
||
selectPro(val) {
|
||
this.dataForm.cityid = '';
|
||
this.cityList = [];
|
||
this.dataForm.areaid = '';
|
||
this.areaList = [];
|
||
if (val) {
|
||
this.cityList = this.getProAndCityList(val);
|
||
}
|
||
},
|
||
//选择市、市发生改变
|
||
selectCity(val) {
|
||
this.dataForm.areaid = '';
|
||
this.areaList = [];
|
||
if (val) {
|
||
this.areaList = this.getProAndCityList(val);
|
||
}
|
||
},
|
||
//获取省市区
|
||
getProAndCityList(pid = 0) {
|
||
let data = [];
|
||
$.ajax({
|
||
url: '/index.php/Retail/Component/getProAndCityList',
|
||
type: 'post',
|
||
async: false,
|
||
data: {
|
||
pid: pid,
|
||
},
|
||
success: (res) => {
|
||
if (res.status == 1) {
|
||
data = res.data;
|
||
} else {
|
||
console.log(res);
|
||
this.$alert(res.msg ? res.msg : '请求发生错误，请稍后重试！', '错误提示', {
|
||
confirmButtonText: '确定',
|
||
callback: action => {
|
||
|
||
}
|
||
});
|
||
}
|
||
},
|
||
error: (data) => {
|
||
console.log(data);
|
||
this.$alert('请求发生错误，请稍后重试！', '错误提示', {
|
||
confirmButtonText: '确定',
|
||
callback: action => {
|
||
|
||
}
|
||
});
|
||
}
|
||
})
|
||
return data;
|
||
},
|
||
},
|
||
created() {
|
||
this.provinceList = this.getProAndCityList(0);//获取省
|
||
},
|
||
mounted() {
|
||
if (this.dataForm.provinceid) {
|
||
this.cityList = this.getProAndCityList(this.dataForm.provinceid);//获取市
|
||
if (this.dataForm.cityid) {
|
||
this.areaList = this.getProAndCityList(this.dataForm.cityid);//获取区
|
||
}
|
||
}
|
||
}
|
||
});
|
||
|
||
//处理银行卡号
|
||
function formatBankNo(BankNo) {
|
||
if (BankNo.value == "") return;
|
||
var account = new String(BankNo.value);
|
||
account = account.substring(0, 25);
|
||
/*帐号的总数, 包括空格在内 */
|
||
if (account.match(".[0-9]{4}-[0-9]{4}-[0-9]{4}-[0-9]{7}") == null) {
|
||
/* 对照格式 */
|
||
if (account.match(".[0-9]{4}-[0-9]{4}-[0-9]{4}-[0-9]{7}|" + ".[0-9]{4}-[0-9]{4}-[0-9]{4}-[0-9]{7}|" +
|
||
".[0-9]{4}-[0-9]{4}-[0-9]{4}-[0-9]{7}|" + ".[0-9]{4}-[0-9]{4}-[0-9]{4}-[0-9]{7}") == null) {
|
||
var accountNumeric = accountChar = "", i;
|
||
for (i = 0; i < account.length; i++) {
|
||
accountChar = account.substr(i, 1);
|
||
if (!isNaN(accountChar) && (accountChar != " ")) accountNumeric = accountNumeric + accountChar;
|
||
}
|
||
account = "";
|
||
for (i = 0; i < accountNumeric.length; i++) { /* 可将以下空格改为-,效果也不错 */
|
||
if (i == 4) account = account + " ";
|
||
/* 帐号第四位数后加空格 */
|
||
if (i == 8) account = account + " ";
|
||
/* 帐号第八位数后加空格 */
|
||
if (i == 12) account = account + " ";
|
||
/* 帐号第十二位后数后加空格 */
|
||
if (i == 16) account = account + " ";
|
||
/* 帐号第十六位后数后加空格 */
|
||
account = account + accountNumeric.substr(i, 1)
|
||
}
|
||
}
|
||
} else {
|
||
account = " " + account.substring(1, 5) + " " + account.substring(6, 10) + " " + account.substring(14, 18) + "-" + account.substring(18, 25);
|
||
}
|
||
if (account != BankNo.value) BankNo.value = account;
|
||
}
|
||
</script> |