<template>
<el-dialog
:title="dialogTitle"
:visible.sync="dialogVisible"
width="1200px"
:before-close="handleClose"
:destroy-on-close="true"
>
<el-form
:model="dynamicValidateForm"
ref="dynamicValidateForm"
:rules="rules"
label-width="90px"
size="small"
>
<el-row>
<el-col :span="10">
<el-form-item label="是否走访" prop="interviewOrders">
<el-radio-group
@change="handleInterView"
v-model="dynamicValidateForm.interviewOrders"
>
<el-radio label="是"></el-radio>
<el-radio label="否"></el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="10" v-if="isShowInterView">
<el-form-item label="是否接单" prop="receivingOrders">
<el-radio-group
@change="handleOrder"
v-model="dynamicValidateForm.receivingOrders"
>
<el-radio label="是"></el-radio>
<el-radio label="否"></el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
<el-row v-if="isShowInterView">
<el-col :span="10">
<el-form-item label="走访单位" prop="interviewUnitName">
<!-- 走访单位名称 -->
<el-select
v-refresh="{ loadMore }"
v-model="dynamicValidateForm.interviewUnitName"
filterable
remote
clearable
reserve-keyword
placeholder="请输入走访单位名称"
:remote-method="remoteMethodUnit"
:loading="remoteUnitLoading"
style="width: 100%"
>
<el-option
v-for="(item, index) in remoteUnitOptions"
:key="index"
:label="item.label"
:value="item.label"
>
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="走访类型" prop="interviewType">
<el-select
v-model="dynamicValidateForm.interviewType"
placeholder="请选择走访类型"
style="width: 100%"
>
<el-option
v-for="(item, index) in zflxList"
:key="index"
:label="item.itemName"
:value="item.itemName"
></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-divider v-if="isShowInterView" content-position="left"
>走访人员</el-divider
>
<div class="person-info" v-if="isShowInterView">
<el-row
v-for="(
domain, index
) in dynamicValidateForm.xfxdyxInterviewPersonVos"
:key="domain.key"
>
<el-col :span="5">
<el-form-item
:label="'姓名'"
:prop="'xfxdyxInterviewPersonVos.' + index + '.interviewPerName'"
:rules="rules.xfxdyxInterviewPersonVos.interviewPerName"
>
<!-- 姓名 -->
<el-select
v-model="domain.interviewPerName"
filterable
remote
clearable
reserve-keyword
placeholder="请输入姓名"
:remote-method="remoteMethod"
:loading="remoteLoading"
@change="hangdleOrgName"
>
<el-option
v-for="item in remoteOptions"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item
:label="'所属机构'"
:prop="
'xfxdyxInterviewPersonVos.' + index + '.interviewPerOrgName'
"
:rules="rules.xfxdyxInterviewPersonVos.interviewPerOrgName"
>
<!-- 所属机构 -->
<el-input
v-model="domain.interviewPerOrgName"
placeholder="请输入所属机构"
disabled
></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item
:label="'工号'"
:prop="'xfxdyxInterviewPersonVos.' + index + '.interviewPerId'"
:rules="rules.xfxdyxInterviewPersonVos.interviewPerId"
>
<!-- 工号 -->
<el-input
placeholder="请输入工号"
v-model="domain.interviewPerId"
disabled
></el-input>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item
:label="'职务'"
:prop="'xfxdyxInterviewPersonVos.' + index + '.interviewPerJob'"
:rules="rules.xfxdyxInterviewPersonVos.interviewPerJob"
>
<!-- 职务 -->
<el-select
style="width: 100%"
v-model="domain.interviewPerJob"
placeholder="请选择职务"
>
<el-option
v-for="(item, index) in zfzwList"
:key="index"
:label="item.itemName"
:value="item.itemName"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="3">
<el-button
size="small"
type="danger"
style="margin-left: 5px"
@click.prevent="removeDomain(domain)"
v-if="dynamicValidateForm.xfxdyxInterviewPersonVos.length > 1"
>删除</el-button
>
<el-button
size="small"
type="primary"
@click.prevent="addDomain(domain)"
style="margin-left: 5px"
>添加</el-button
>
</el-col>
</el-row>
</div>
<el-divider v-if="isShowRecieveOrder" content-position="left"
>接单类型</el-divider
>
<div v-if="isShowRecieveOrder" class="type-info">
<el-row>
<!-- 业务落地机构 -->
<el-col :span="7">
<el-form-item
:label="'我行业务落地机构'"
prop="busOrgId"
:rules="rules.busOrgId"
label-width="135px"
>
<el-cascader
v-model="dynamicValidateForm.busOrgId"
:options="instTree"
@change="handleBusiness"
ref="bussinessOrg"
:props="{
value: 'instId',
label: 'instName',
children: 'children',
checkStrictly: true,
}"
:show-all-levels="false"
></el-cascader>
</el-form-item>
</el-col>
</el-row>
<el-row
v-for="(
domain, index
) in dynamicValidateForm.xfxdyxInterviewOrderTypeVos"
:key="domain.key"
>
<el-col :span="7">
<el-form-item
:label="'合作方名称'"
:prop="'xfxdyxInterviewOrderTypeVos.' + index + '.partnerName'"
:rules="rules.xfxdyxInterviewOrderTypeVos.partnerName"
label-width="135px"
>
<!-- 合作方名称 -->
<el-select
v-refresh="{ loadMore }"
v-model="domain.partnerName"
filterable
remote
clearable
reserve-keyword
placeholder="请输入合作方名称"
:remote-method="remoteMethodUnit"
:loading="remoteLoading"
style="width: 100%"
>
<el-option
v-for="(item, index) in remoteUnitOptions"
:key="index"
:label="item.label"
:value="item.label"
>
</el-option>
</el-select>
</el-form-item>
</el-col>
<!-- 申请产品名称 -->
<el-col :span="7">
<el-form-item
:label="'申请产品名称'"
:prop="'xfxdyxInterviewOrderTypeVos.' + index + '.orderType'"
:rules="rules.xfxdyxInterviewOrderTypeVos.orderType"
label-width="135px"
>
<el-select
style="width: 100%"
v-model="domain.orderType"
placeholder="请选择产品名称"
>
<el-option
v-for="(item, index) in orderTypeList"
:key="index"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item
:label="'申请人姓名'"
:prop="'xfxdyxInterviewOrderTypeVos.' + index + '.custName'"
:rules="rules.xfxdyxInterviewOrderTypeVos.custName"
label-width="135px"
>
<el-input
placeholder="请输入申请人姓名"
v-model="domain.custName"
></el-input>
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item
:label="'申请人身份证号'"
:prop="'xfxdyxInterviewOrderTypeVos.' + index + '.custCardId'"
:rules="rules.xfxdyxInterviewOrderTypeVos.custCardId"
label-width="135px"
>
<el-input
placeholder="请输入申请人身份证号"
v-model="domain.custCardId"
></el-input>
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item
:label="'申请金额（万元）'"
:prop="'xfxdyxInterviewOrderTypeVos.' + index + '.custLoanAmount'"
:rules="rules.xfxdyxInterviewOrderTypeVos.custLoanAmount"
label-width="135px"
>
<el-input-number
v-model="domain.custLoanAmount"
:min="1"
:max="2000"
:precision="2"
></el-input-number>
</el-form-item>
</el-col>
<el-col :span="7">
<el-button
type="danger"
size="small"
style="margin-left: 5px"
@click.prevent="removeType(domain)"
v-if="dynamicValidateForm.xfxdyxInterviewOrderTypeVos.length > 1"
>删除</el-button
>
<el-button
type="primary"
size="small"
@click.prevent="addType(domain)"
style="margin-left: 5px"
>添加</el-button
>
</el-col>
</el-row>
</div>
<el-divider content-position="left">其他</el-divider>
<el-row>
<el-col :span="10">
<el-form-item
:label="isShowInterView ? '走访日期' : '收单日期'"
prop="interviewDate"
>
<el-date-picker
:readonly="isShowInterView ? true : false"
v-model="dynamicValidateForm.interviewDate"
type="date"
placeholder="请选择走访日期"
style="width: 100%"
>
</el-date-picker>
</el-form-item>
</el-col>
<el-col v-if="isShowInterView" :span="10">
<el-form-item label="定位信息" prop="locationInfo">
<el-input
v-model="dynamicValidateForm.locationInfo"
placeholder="请输入定位信息"
></el-input>
</el-form-item>
</el-col>
<el-col :span="2" v-if="isShowInterView">
<el-button
size="small"
style="margin-left: 20px"
:loading="locationLoading"
@click.prevent="getAddressByBaidu()"
>定位</el-button
>
</el-col>
</el-row>
<el-row v-if="isShowInterView">
<el-col :span="20">
<el-form-item label="走访成效" prop="other">
<el-input
type="textarea"
:rows="2"
:maxlength="200"
placeholder="请输入走访成效"
v-model="dynamicValidateForm.other"
>
</el-input>
</el-form-item>
</el-col>
</el-row>
<el-row v-if="isShowInterView">
<el-form-item label="走访图片" prop="xfxdyxInterviewFileVos">
<el-upload
action="#"
ref="upload"
list-type="picture-card"
:http-request="uploadFileToOss"
:on-remove="beforeRemove"
:before-upload="beforeUpload"
:limit="5"
:on-exceed="onExceed"
:file-list="dynamicValidateForm.xfxdyxInterviewFileVos"
>
<i slot="default" class="el-icon-plus"></i>
<div slot="tip" class="el-upload__tip">
只能上传jpg/png文件，最多五张
</div>
</el-upload>
</el-form-item>
</el-row>
<el-row type="flex" justify="end">
<el-button @click="handleCancle('dynamicValidateForm')">取消</el-button>
<el-button type="primary" @click="submitForm('dynamicValidateForm')"
>确定</el-button
>
</el-row>
</el-form>
</el-dialog>
</template>
<script>
import myBMap from "@/utils/myBMap";
import global from "@/global";
import { validateIdCard } from "@/utils/validate";
export default {
data() {
return {
dialogVisible: false,
dialogTitle: "新增",
instTree: [],
dynamicValidateForm: {
xfxdyxInterviewPersonVos: [
{
interviewPerName: "",
interviewPerOrgName: "",
interviewPerId: "",
interviewPerJob: "",
interviewPerOrgId: sessionStorage.getItem("orgId"),
},
],
xfxdyxInterviewOrderTypeVos: [
{
partnerName: "", // 合作方名称
orderType: "", // 申请产品名称
custName: "", // 申请人姓名
custCardId: "", // 申请人身份证号
custLoanAmount: "", // 申请金额（万元）
},
],
interviewOrders: "是",
interviewType: "",
interviewUnitName: "",
receivingOrders: "否",
other: "", //其他走访成效 (200字限制)
interviewDate: new Date(),
xfxdyxInterviewFileVos: [], //图片文件
locationInfo: "", //定位信息
busOrgName: "",
busOrgId: "",
},
busRecord: [],
rules: {
busOrgId: [
{
required: true,
message: "请选择我行业务落地机构",
trigger: "change",
},
],
interviewOrders: [
{ required: true, message: "请选择", trigger: "change" },
],
interviewType: [
{ required: true, message: "请选择走访类型", trigger: "change" },
],
interviewUnitName: [
{ required: true, message: "请选择走访单位", trigger: "change" },
],
receivingOrders: [
{ required: true, message: "请选择走访单位", trigger: "change" },
],
interviewDate: [
{
type: "date",
required: true,
message: "请选择日期",
trigger: "change",
},
],
locationInfo: [
{ required: true, message: "请输入定位信息", trigger: "blur" },
],
xfxdyxInterviewFileVos: [
{ required: true, message: "请上传图片", trigger: "blur" },
],
xfxdyxInterviewPersonVos: {
interviewPerName: {
required: true,
message: "姓名不能为空",
trigger: "change",
},
interviewPerOrgName: {
required: true,
message: "所属机构不能为空",
trigger: "blur",
},
interviewPerId: {
required: true,
message: "工号不能为空",
trigger: "blur",
},
interviewPerJob: {
required: true,
message: "职务不能为空",
trigger: "change",
},
},
xfxdyxInterviewOrderTypeVos: {
partnerName: {
required: true,
message: "合作方名称不能为空",
trigger: "change",
},
orderType: {
required: true,
message: "申请产品名称不能为空",
trigger: "change",
},
custName: {
required: true,
message: "申请人姓名不能为空",
trigger: "blur",
},
custCardId: [
{
required: true,
message: "申请人身份证号不能为空",
trigger: "blur",
},
{
validator: validateIdCard,
trigger: "blur",
},
],
custLoanAmount: {
required: true,
message: "申请金额不能为空",
trigger: "blur",
},
},
},
// 申请产品
orderTypeList: [
{ label: "一手房", value: "一手房" },
{ label: "二手房", value: "二手房" },
// { label: "商用房", value: "商用房" },
{ label: "车位贷", value: "车位贷" },
{ label: "车贷", value: "车贷" },
{ label: "信消", value: "信消" },
{ label: "房抵综消", value: "房抵综消" },
{ label: "其他", value: "其他" },
],
// 走访类型
zflxList: [
{
itemName: "开发商",
},
{
itemName: "房产中介",
},
{
itemName: "汽车经销商",
},
{
itemName: "优质单位",
},
// {
// itemName: '政府主管单位'
// },
{
itemName: "房贷相关主管单位",
},
{
itemName: "其他",
},
],
// 走访职务
zfzwList: [
{
itemName: "一分支行长",
},
{
itemName: "一分部门负责人",
},
{
itemName: "二分行领导",
},
{
itemName: "二分部门负责人",
},
{
itemName: "一支行领导",
},
{
itemName: "一支部门负责人",
},
{
itemName: "二支行长",
},
{
itemName: "消费金融中心主管",
},
{
itemName: "客户经理",
},
{
itemName: "产品经理",
},
{
itemName: "其他",
},
],
pageIndex: 1,
pageSize: 30,
unitTotal: 0,
unitValue: "",
// 走访单位名称
unityNameList: [],
locationLoading: false,
remoteOptions: [], // 远程搜索列表
remoteLoading: false, // 是否正在从远程获取数据
remoteUnitOptions: [], // 远程搜索列表
remoteUnitLoading: false, // 是否正在从远程获取数据
dialogImageUrl: "",
isShowInterView: true,
isShowType: false,
isShowRecieveOrder: false,
isEdit: false,
locationInfo: "",
uuid: "",
};
},
mounted() {
this.getAddressByBaidu(); //百度定位获取<<<<<<<<<<<<<<<<<<<进页面先获取定位回显
this.getBusinessList();
},
methods: {
handleRefresh() {
this.$forceUpdate();
},
handleOperationName(e) {
this.dynamicValidateForm.xfxdyxInterviewOrderTypeVos[0].partnerName = e;
},
// 判断是否显示走访内容
handleInterView(e) {
this.$refs["dynamicValidateForm"].clearValidate();
this.isShowInterView = e == "是" ? true : false;
this.dynamicValidateForm.interviewOrders = e;
if (!this.isShowInterView) {
this.isShowRecieveOrder = true;
} else {
if (this.isShowType) {
this.isShowRecieveOrder = true;
} else {
this.isShowRecieveOrder = false;
}
}
if (this.isShowRecieveOrder) {
this.dynamicValidateForm.xfxdyxInterviewOrderTypeVos = [
{
partnerName: "", // 合作方名称
orderType: "", // 申请产品名称
custName: "", // 申请人姓名
custCardId: "", // 申请人身份证号
custLoanAmount: "", // 申请金额（万元）
},
];
}
},
// 判断是否显示接单内容
handleOrder(e) {
this.$refs["dynamicValidateForm"].clearValidate();
this.isShowType = e == "是" ? true : false;
this.dynamicValidateForm.receivingOrders = e;
if (this.isShowType) {
this.isShowRecieveOrder = true;
} else {
this.isShowRecieveOrder = false;
}
if (this.isShowRecieveOrder) {
this.dynamicValidateForm.xfxdyxInterviewOrderTypeVos = [
{
partnerName: "", // 合作方名称
orderType: "", // 申请产品名称
custName: "", // 申请人姓名
custCardId: "", // 申请人身份证号
custLoanAmount: "", // 申请金额（万元）
},
];
}
},
handleBusiness(value) {
this.busRecord = value;
},
// 业务落地机构
getBusinessList() {
const instId = sessionStorage.getItem("instId");
// 第一次是根据用户的机构号来获取信息
this.$api.base.getInfoTree(instId).then((res) => {
this.instTree = res.data;
});
},
recursiveArrayTraversal(arr) {
for (let i = 0; i < arr.length; i++) {
if (Array.isArray(arr[i])) {
recursiveArrayTraversal(arr[i]);
} else {
arr[i].label = arr[i].instName;
arr[i].value = arr[i].instId;
}
}
},
show() {
this.dialogVisible = true;
this.dialogTitle = "新增";
this.isEdit = false;
this.$nextTick(() => {
this.resetForm();
this.remoteOptions = [];
this.remoteUnitOptions = [];
this.dynamicValidateForm.interviewUnitName = undefined;
this.dynamicValidateForm.interviewType = undefined;
this.dynamicValidateForm.other = undefined;
this.dynamicValidateForm.xfxdyxInterviewFileVos = [];
this.dynamicValidateForm.interviewDate = new Date();
this.dynamicValidateForm.locationInfo = this.locationInfo;
this.isShowInterView = true;
this.dynamicValidateForm.interviewOrders = "是";
this.isShowType = false;
this.dynamicValidateForm.receivingOrders = "否";
if (!this.isShowInterView) {
this.isShowRecieveOrder = true;
} else {
if (this.isShowType) {
this.isShowRecieveOrder = true;
} else {
this.isShowRecieveOrder = false;
}
}
});
},
edit(row) {
this.dialogVisible = true;
this.dialogTitle = "编辑";
this.isEdit = true;
this.uuid = row.uuid;
this.remoteOptions = [];
this.$nextTick(() => {
this.resetForm();
});
this.queryDetailByUuid(row);
},
async queryDetailByUuid(row) {
let data = {
uuid: row.uuid,
electronicTape: "pc", //用于区分pc端还是移动端请求
};
let res = await this.$api.ZfMxb.queryDetailByUuid(data);
if (res.code == 0 || res.code == 200) {
this.dynamicValidateForm = this.pick(res.data, [
"busOrgId",
"busOrgName",
"interviewDate",
"interviewOrders",
"interviewType",
"interviewUnitName",
"locationInfo",
"other",
"receivingOrders",
"xfxdyxInterviewFileVos",
"xfxdyxInterviewOrderTypeVos",
"xfxdyxInterviewPersonVos",
]);
// 日期格式
this.dynamicValidateForm.interviewDate = new Date(
this.dynamicValidateForm.interviewDate
);
// 图片上传呢
if (this.dynamicValidateForm.xfxdyxInterviewFileVos.length != 0) {
this.dynamicValidateForm.xfxdyxInterviewFileVos.map((item) => {
item.url = global.imgURL + item.ossUrl;
});
}
// 判断是否显示接单内容
this.isShowInterView =
this.dynamicValidateForm.interviewOrders == "是" ? true : false;
this.isShowType =
this.dynamicValidateForm.receivingOrders == "是" ? true : false;
if (!this.isShowInterView) {
this.isShowRecieveOrder = true;
} else {
if (this.isShowType) {
this.isShowRecieveOrder = true;
} else {
this.isShowRecieveOrder = false;
}
}
if (this.isShowRecieveOrder) {
let arr = [];
arr = this.clone(
this.dynamicValidateForm.xfxdyxInterviewOrderTypeVos
);
// 接单类型
if (
this.dynamicValidateForm.xfxdyxInterviewOrderTypeVos.length != 0
) {
arr.forEach((item) => {
item.partnerName =
item.xfxdyxInterviewOrderTypeDetailVos[0]?.partnerName;
item.custName =
item.xfxdyxInterviewOrderTypeDetailVos[0]?.custName;
item.uuid = item.xfxdyxInterviewOrderTypeDetailVos[0]?.uuid;
item.custCardId =
item.xfxdyxInterviewOrderTypeDetailVos[0]?.custCardId;
item.custLoanAmount =
item.xfxdyxInterviewOrderTypeDetailVos[0]?.custLoanAmount;
});
}
this.$set(
this.dynamicValidateForm,
"xfxdyxInterviewOrderTypeVos",
arr
);
}
console.log(this.dynamicValidateForm);
} else {
this.$message.error(res.message);
}
},
// 选择属性
pick(obj, keys) {
return keys
.map((k) => (k in obj ? { [k]: obj[k] } : {}))
.reduce((res, o) => Object.assign(res, o), {});
},
// 触底刷新
loadMore(flag, value) {
flag && this.getUnitList(++this.pageIndex);
},
async getUnitList(pageIndex) {
if (
this.remoteUnitOptions.length === this.unitTotal &&
this.pageIndex !== 1
)
return;
this.remoteUnitLoading = true;
const pageRequest = { current: this.pageIndex, size: this.pageSize };
const _data = {
partnerName: this.unitValue,
};
let res = await this.$api.ZfMxb.getUnitQuery(_data, pageRequest);
this.remoteUnitLoading = false;
this.pageIndex = pageIndex;
let arr = res.data.map((item) => {
return {
value: `${item.uuid}`,
label: `${item.partnerName}`,
};
});
arr = arr.filter((item) => {
return item.label.indexOf(this.unitValue) > -1;
});
if (this.pageIndex === 1) {
this.remoteUnitOptions = arr;
} else {
this.remoteUnitOptions = this.remoteUnitOptions.concat(arr);
}
this.unitTotal = res.pageInfo.total;
},
// 获取走访单位列表
remoteMethodUnit(query) {
this.unitValue = query;
this.getUnitList(1);
},
// 获取通讯录
async remoteMethod(query) {
if (query !== "" && query !== undefined && query !== null) {
this.remoteLoading = true;
let data = {
userName: query,
};
let res = await this.$api.ZfMxb.queryUser(data, query);
this.remoteLoading = false;
let arr = res.data.map((item) => {
return {
value: `${item.userId}`,
label: `${item.userName}\u00A0${item.userId}\u00A0${item.instName}`,
address: `${item.instName}`,
name: `${item.userName}`,
};
});
this.remoteOptions = arr.filter((item) => {
return item.label.indexOf(query) > -1;
});
} else {
this.remoteOptions = [];
}
},
hangdleOrgName(value) {
if (
this.remoteOptions.length != 0 &&
value !== undefined &&
value !== null
) {
const arr = this.remoteOptions.filter((item) => {
return item.value == value;
});
this.dynamicValidateForm.xfxdyxInterviewPersonVos.forEach((item) => {
if (item.interviewPerName == value) {
item.interviewPerOrgName = arr[0].address;
item.interviewPerId = arr[0].value;
item.interviewPerName = arr[0].name;
}
});
}
},
getAddressByBaidu() {
this.locationLoading = true;
myBMap.init().then(() => {
let that = this;
let geolocation = new BMap.Geolocation();
this.locationLoading = false;
// 创建百度地理位置实例，代替 navigator.geolocation
geolocation.getCurrentPosition(function (e) {
if (this.getStatus() == BMAP_STATUS_SUCCESS) {
// 百度 geolocation 的经纬度属性不同，此处是 point.lat 而不是 coords.latitude
let point = new BMap.Point(e.point.lng, e.point.lat);
let gc = new BMap.Geocoder();
gc.getLocation(point, function (rs) {
//<<<<<<<<<<<<<<<<需要的位置信息在这获取
that.dynamicValidateForm.locationInfo = rs.address;
that.locationInfo = rs.address;
// console.log(rs,rs.address,'地理位置',that.dynamicValidateForm.locationInfo)
});
} else {
this.$message.error("定位失败，请手动选择区域或重新定位");
}
});
});
},
//查看图片
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
},
beforeUpload(file) {
return new Promise((resolve) => {
const reader = new FileReader();
reader.readAsDataURL(file); // file转base64
reader.onload = (e) => {
const canvas = document.createElement("canvas");
const img = new Image();
img.src = e.target.result;
img.onload = () => {
//图片加载后再添加水印，否则可能报错
let width = img.width;
let height = img.height;
canvas.width = width;
canvas.height = height;
const ctx = canvas.getContext("2d"); // 绘制2d图形
ctx.drawImage(img, 0, 0, width, height);
var basePx = canvas.width;
//字体大小 照片添加水印
var fontSize = basePx / 20; //水印文字尺寸
ctx.shadowColor = "rgba(0, 0, 0,1)";
ctx.shadowOffsetX = 3; //水印文字阴影
ctx.shadowOffsetY = 3;
ctx.shadowBlur = 5;
ctx.rotate((-20 * Math.PI) / 180); //水印文字倾斜
ctx.font = fontSize + "px 微软雅黑";
ctx.fillStyle = "rgba(255,255,255,0.6)"; //水印透明度
var watermark =
sessionStorage.getItem("id") +
"|" +
sessionStorage.getItem("name") +
"|" +
sessionStorage.getItem("orgName"); //水印文字内容
var watermarkSplit = watermark.split("|");
let w = 1; //横向绘制次数
let h = 4; //纵向绘制次数'
//水印的总绘制次数
let num = Math.round(w * h);
for (let i = 0; i < num; i++) {
if (i < w) {
ctx.fillText(
watermarkSplit[0],
(width / 3) * i,
height / 2 - 2.7 * fontSize
);
ctx.fillText(
watermarkSplit[1],
(width / 3) * i,
height / 2 - 1.5 * fontSize
);
ctx.fillText(
watermarkSplit[2],
(width / 3) * i,
height / 2 - 0.5 * fontSize
);
} else if (i >= w && i < w * 2) {
ctx.fillText(
watermarkSplit[0],
(width / 3) * (i - w),
height - 2.7 * fontSize
);
ctx.fillText(
watermarkSplit[1],
(width / 3) * (i - w),
height - 1.5 * fontSize
);
ctx.fillText(
watermarkSplit[2],
(width / 3) * (i - w),
height - 0.5 * fontSize
);
} else if (i >= w * 2 && i < w * 3) {
ctx.fillText(
watermarkSplit[0],
(width / 3) * (i - w * 2),
height * 1.5 - 2.7 * fontSize
);
ctx.fillText(
watermarkSplit[1],
(width / 3) * (i - w * 2),
height * 1.5 - 1.5 * fontSize
);
ctx.fillText(
watermarkSplit[2],
(width / 3) * (i - w * 2),
height * 1.5 - 0.5 * fontSize
);
}
}
var dataBase64 = canvas.toDataURL(file.type); // 输出压缩后的base64
// base64转file
const arr = dataBase64.split(",");
const mime = arr[0].match(/:(.*?);/)[1];
const bstr = atob(arr[1]);
let n = bstr.length;
const u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
const files = new File(
[new Blob([u8arr], { type: mime })],
file.name,
{ type: file.type }
);
files.uid = file.uid;
resolve(files);
};
};
});
},
beforeRemove(file) {
this.dynamicValidateForm.xfxdyxInterviewFileVos =
this.dynamicValidateForm.xfxdyxInterviewFileVos.filter(
(item) => item.uid != file.uid
);
console.log(this.dynamicValidateForm.xfxdyxInterviewFileVos);
},
async uploadFileToOss(param) {
const form = new FormData();
form.append("file", param.file);
form.append("applicationId", "xfxdyx_interview");
let res = await this.$api.ZfMxb.uploadImg(form);
if (res.code == 0) {
this.$message({
message: "上传成功",
type: "success",
});
} else {
this.$message({
message: res.msg,
type: "warn",
});
}
this.dynamicValidateForm.xfxdyxInterviewFileVos.push({
ossType: res.data.ossType,
ossUrl: res.data.ossUrl,
systemUuid: res.data.systemUuid,
url: global.imgURL + res.data.ossUrl,
});
console.log(this.dynamicValidateForm.xfxdyxInterviewFileVos);
},
// 文件超出个数限制时的钩子
onExceed() {
this.$message.error("最多上传5张走访图片");
return;
},
handleClose() {
this.dialogVisible = false;
},
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.$confirm("确定提交吗?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
if (this.isEdit) {
this.dynamicValidateForm.uuid = this.uuid;
}
this.dynamicValidateForm.busOrgName =
this.dynamicValidateForm.busOrgName == ""
? sessionStorage.getItem("orgName")
: this.dynamicValidateForm.busOrgName;
this.dynamicValidateForm.busOrgId =
this.dynamicValidateForm.busOrgId == ""
? sessionStorage.getItem("orgId")
: this.dynamicValidateForm.busOrgId;
console.log(this.dynamicValidateForm);
if (this.busRecord.length != 0) {
// 业务处理机构
this.dynamicValidateForm.busOrgName =
this.$refs["bussinessOrg"].getCheckedNodes()[0].label;
this.dynamicValidateForm.busOrgId =
this.busRecord[this.busRecord.length - 1];
}
const dataForm = this.clone(this.dynamicValidateForm);
console.log(dataForm);
const arr = [];
// 接单类型数据处理
if (this.isShowRecieveOrder) {
if (
dataForm.xfxdyxInterviewOrderTypeVos.length != 0 &&
dataForm.xfxdyxInterviewOrderTypeVos[0].orderType != ""
) {
dataForm.xfxdyxInterviewOrderTypeVos.forEach((item) => {
arr.push({
orderType: item.orderType,
xfxdyxInterviewOrderTypeDetailVos: [
{
partnerName: item.partnerName,
custName: item.custName,
custCardId: item.custCardId,
custLoanAmount: item.custLoanAmount,
uuid: item.uuid ? item.uuid : "",
},
],
});
});
}
}
dataForm.xfxdyxInterviewOrderTypeVos = arr;
// 走访人员
dataForm.xfxdyxInterviewPersonVos = this.isShowInterView
? dataForm.xfxdyxInterviewPersonVos
: [];
dataForm.interviewDate = this.formatDate(
this.dynamicValidateForm.interviewDate
);
this.$api.ZfMxb.updateXfxdyxInterview(dataForm)
.then((res) => {
if (res.code == 0) {
this.$message.success("提交成功");
this.dialogVisible = false;
this.resetForm();
this.$emit("ok");
} else {
this.$message({ message: res.message, type: "error" });
}
})
.catch((err) => {
this.$message({ message: err, type: "error" });
});
})
.catch(() => {});
} else {
console.log("error submit!!");
return false;
}
});
},
resetForm() {
this.$refs["dynamicValidateForm"].resetFields();
this.$refs["dynamicValidateForm"].clearValidate();
this.dynamicValidateForm.xfxdyxInterviewPersonVos = [
{
interviewPerName: sessionStorage.getItem("name"),
interviewPerOrgName: sessionStorage.getItem("orgName"),
interviewPerId: sessionStorage.getItem("id"),
interviewPerJob: "",
interviewPerOrgId: sessionStorage.getItem("orgId"),
},
];
this.dynamicValidateForm.xfxdyxInterviewOrderTypeVos = [
{
partnerName: "", // 合作方名称
orderType: "", // 申请产品名称
custName: "", // 申请人姓名
custCardId: "", // 申请人身份证号
custLoanAmount: "", // 申请金额（万元）
},
];
this.dynamicValidateForm.busOrgId = sessionStorage.getItem("instId");
},
handleCancle() {
this.resetForm();
this.dialogVisible = false;
},
removeDomain(item) {
var index =
this.dynamicValidateForm.xfxdyxInterviewPersonVos.indexOf(item);
if (index !== -1) {
this.dynamicValidateForm.xfxdyxInterviewPersonVos.splice(index, 1);
}
},
removeType(item) {
var index =
this.dynamicValidateForm.xfxdyxInterviewOrderTypeVos.indexOf(item);
if (index !== -1) {
this.dynamicValidateForm.xfxdyxInterviewOrderTypeVos.splice(index, 1);
}
},
addDomain() {
this.remoteOptions = [];
this.dynamicValidateForm.xfxdyxInterviewPersonVos.push({
interviewPerName: "",
interviewPerOrgName: "",
interviewPerId: "",
interviewPerJob: "",
interviewPerOrgId: sessionStorage.getItem("orgId"),
key: Date.now(),
});
},
addType() {
this.dynamicValidateForm.xfxdyxInterviewOrderTypeVos.push({
partnerName: "",
orderType: "",
custName: "",
custCardId: "",
custLoanAmount: "",
key: Date.now(),
});
},
},
};
</script>
8339
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
