You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
spms-vue/src/views/warehouse/companyAddSalesman.vue

348 lines
14 KiB
Vue

3 years ago
<template>
<div>
<el-form :model="formData" :rules="formRules" ref="dataForm">
<div style="display: flex; margin-top: -30px" v-if="hiddenAdd === true && hiddenAdd2 !== true">
<el-button style="margin: 0 20px 0 auto"type="primary" size="small" @click.native="updateAuditStatus(1)">通过</el-button>
<el-button style="margin: 0 20px 0 0"type="primary" size="small" @click.native="updateAuditStatus(2)">不通过</el-button>
<el-button style="margin: 0 20px 0 0" @click="centerDialogVisible = false">取消</el-button>
</div>
<el-card>
<el-button-group style="display: flex" v-if="hiddenAdd !== true">
<el-button
type="primary"
@click.native="submitUpload()"
style="margin: 0 60px 10px auto; height: 35px"
:loading="loading"
>提交
</el-button
>
</el-button-group>
<el-row :gutter="20">
<el-col :span="10">
<el-form-item label="姓名:" label-width="150px" prop="name">
<el-input v-model="formData.name" auto-complete="off" :disabled="hiddenAdd"></el-input>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="电话:" label-width="150px" prop="tel">
<el-input v-model="formData.tel" auto-complete="off" :disabled="hiddenAdd">></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="10">
<el-form-item label="手机:" label-width="150px" prop="phone">
<el-input v-model="formData.phone" auto-complete="off" :disabled="hiddenAdd">></el-input>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="邮箱:" label-width="150px" prop="email">
<el-input v-model="formData.email" auto-complete="off" :disabled="hiddenAdd">></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="10" class="el-col">
<el-form-item label="证件类型:" label-width="150px" prop="certType">
<el-select
size="small"
v-model="formData.certType"
placeholder="证件类型"
style="width: 100%;"
:disabled="hiddenAdd">
>
<el-option label="身份证" value="1"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="证件号码:" label-width="150px" prop="certCode">
<el-input v-model="formData.certCode" auto-complete="off" :disabled="hiddenAdd">></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="10" class="el-col">
<el-form-item label="证件电子档:" label-width="150px">
<el-upload
v-if="hiddenAdd !== true"
class="upload-demo"
ref="upload"
:action="this.uploadUrl"
:limit="1"
:headers="headers"
3 years ago
:on-exceed="uploadHandleExceed"
accept=".jpg,.png"
:on-change="uploadOnchange"
:on-success="uploadHandleSuccess"
:file-list="fileList"
:data="{type:'image5'}"
:auto-upload="false">
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<div>只能上传 .jpg,.png 文件且不超过 2 MB</div>
</el-upload>
<el-button
v-if="hiddenAdd === true"
:disabled="formData.filePath === null"
type="primary"
@click.native="openFile(formData.filePath)"
style="margin: 0 60px 10px auto; height: 35px"
:loading="loading"
>查看
</el-button
>
</el-form-item>
</el-col>
<el-col :span="10" class="el-col">
<el-form-item label="授权书电子档:" label-width="150px">
<el-upload
v-if="hiddenAdd !== true"
class="upload-demo2"
ref="upload2"
:action="this.uploadUrl"
:limit="1"
:headers="headers"
3 years ago
:on-exceed="uploadHandleExceed"
accept=".jpg,.png"
:on-change="uploadOnchange"
:on-success="uploadHandleSuccess2"
:file-list="fileList2"
:data="{type:'image5'}"
:auto-upload="false">
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<div>只能上传 .jpg,.png 文件且不超过 2 MB</div>
</el-upload>
<el-button
v-if="hiddenAdd === true"
:disabled="formData.filePath2 === null"
type="primary"
@click.native="openFile(formData.filePath2)"
style="margin: 0 60px 10px auto; height: 35px"
:loading="loading"
>查看
</el-button
>
</el-form-item>
</el-col>
</el-row>
</el-card>
</el-form>
</div>
</template>
<script>
import draggable from "vuedraggable";
import {saveAs} from "file-saver";
import {parseTime} from "../../filtres/index";
import store from "../../store";
import {BASE_URL} from "../../config/app";
import {insertCompanySalesman, updateCompanySalesman} from "../../api/warehouse/companySalesman";
export default {
name: "idQuery",
props: {
closeDialog: {
type: Function,
required: true,
},
idQuery: {
type: Object,
required: true,
},
},
data() {
return {
code: "",
formData: {
certType: "1"
},
formRules: {
name: [
{required: true, message: "请输入姓名", trigger: "blur"}
],
tel: [
{required: true, message: "请输入电话", trigger: "blur"}
],
certType: [
{required: true, message: "请选择证件类型", trigger: "blur"}
],
certCode: [
{required: true, message: "请输入证件号码", trigger: "blur"}
],
},
loading: false,
uploadUrl: "",
fileList: [],
fileList2: [],
hiddenAdd: false,
hiddenAdd2: false,
headers: {},
3 years ago
};
},
components: {
draggable,
},
methods: {
submitUpload() {
this.$refs["dataForm"].validate(valid => {
if (valid) {
if (this.$refs.upload.uploadFiles.length > 0) {
this.$refs.upload.submit();
} else if (this.$refs.upload2.uploadFiles.length > 0) {
this.$refs.upload2.submit();
} else if (this.$isBlank(this.idQuery)) {
this.$message.warning(`请选择文件`);
} else {
this.onSubmit();
}
}
});
},
openFile(filePath) {
window.open(BASE_URL + "/udiwms/image/register/file/getImage?type=image5&name=" + filePath)
},
updateAuditStatus(num) {
this.formData.auditStatus = num;
updateCompanySalesman(this.formData).then(response => {
this.loading = false;
if (response.code === 20000) {
this.$message.success("成功");
this.closeDialog(true);
} else {
this.$message.error(response.message);
}
});
},
onSubmit() {
this.loading = true;
if (this.$isBlank(this.idQuery)) {
this.formData.customerId = store.getters.customerId;
insertCompanySalesman(this.formData).then(response => {
this.loading = false;
if (response.code === 20000) {
this.$message.success("添加成功");
this.closeDialog(true);
} else {
this.$message.error(response.message);
}
});
} else {
updateCompanySalesman(this.formData).then(response => {
this.loading = false;
if (response.code === 20000) {
this.$message.success("修改成功");
this.closeDialog(true);
} else {
this.$message.error(response.message);
}
});
}
},
uploadHandleExceed(files, fileList) {
this.$message.warning(`当前限制选择 1 个文件,本次选择了 ${files.length} 个文件,共选择了 ${files.length + fileList.length} 个文件`);
},
uploadOnchange(file, fileList) {
let fileName = file.name;
let uid = file.uid
let pos = fileName.lastIndexOf(".");
let lastName = fileName.substring(pos, fileName.length);
if (lastName.toLowerCase() !== ".jpg" && lastName.toLowerCase() !== ".png") {
this.$message.error("上传文件只能是 .jpg,.png 格式");
for (let i = 0; i < fileList.length; i++) {//从list删除
if (fileList[i].uid === uid) {
fileList.splice(i, 1)
}
}
return;
}
// 限制上传文件的大小
const isLt = file.size / 1024 / 1024 / 2 <= 1;
if (!isLt) {
this.$message.error("上传文件大小不能超过 2MB");
for (let i = 0; i < fileList.length; i++) {
if (fileList[i].uid === uid) {
fileList.splice(i, 1)
}
}
}
return isLt;
},
uploadHandleSuccess(response, file, fileList) {
if (response.code === 20000) {
if (this.$isBlank(this.idQuery)) {
this.formData.filePath = response.data.name;
} else {
this.formData.newFilePath = response.data.name;
}
if(this.$refs.upload2.uploadFiles.length > 0) {
this.$refs.upload2.submit();
} else {
this.onSubmit();
}
} else {
this.$message.error("文件上传失败:" + response.message);
}
},
uploadHandleSuccess2(response, file, fileList) {
if (response.code === 20000) {
if (this.$isBlank(this.idQuery)) {
this.formData.filePath2 = response.data.name;
} else {
this.formData.newFilePath2 = response.data.name;
}
this.onSubmit();
} else {
this.$message.error("文件上传失败:" + response.message);
}
},
},
filters: {},
mounted() {
document.body.ondrop = function (event) {
event.preventDefault();
event.stopPropagation();
};
},
created() {
this.uploadUrl = BASE_URL + "/udiwms/upload/register/file";
if (this.$isNotBlank(this.idQuery)) {
this.formData = this.idQuery.formData;
if (this.$isNotBlank(this.idQuery.toView)) {
this.hiddenAdd = true;
if (this.$isNotBlank(this.idQuery.toView2)) {
this.hiddenAdd2 = true;
}
} else {
this.hiddenAdd = false;
}
}
this.headers = {
ADMIN_ID: store.getters.adminId,
ADMIN_TOKEN: store.getters.token,
};
3 years ago
},
};
</script>
<style>
.ao-text {
width: 100%;
font-size: 13px;
font-family: "Microsoft YaHei";
float: right;
text-align: right;
margin-top: 10px;
}
</style>