| | |
| | | :model="editConfig.infomation" |
| | | :rules="rules" |
| | | label-position="right" |
| | | label-width="308px" |
| | | label-width="150px" |
| | | size="mini" |
| | | > |
| | | <!-- 信息 --> |
| | |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="供应商名称" prop="supplier_name"> |
| | | <el-form-item label="供应商名称" prop="name"> |
| | | <el-input v-model="editConfig.infomation.name"></el-input> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="供应商类型" prop="supplierType_id"> |
| | | <el-form-item label="供应商类型" prop="supplierType"> |
| | | <div class="custom-name"> |
| | | <el-select |
| | | v-model="editConfig.infomation.supplierType_id" |
| | | v-model="editConfig.infomation.supplierType" |
| | | placeholder="请选择供应商类型" |
| | | class="common-select-sel" |
| | | size="mini" |
| | | > |
| | | <el-option v-for="item in supplierTypeOptions" :key="item.id" :label="item.name" :value="item.id"> |
| | | <el-option |
| | | v-for="(item, index) in supplierTypeOptions" |
| | | :key="index" |
| | | :label="item.name" |
| | | :value="item.name" |
| | | > |
| | | </el-option> |
| | | </el-select> |
| | | <div class="common-select-btn" @click="setSupplierType"><i class="el-icon-setting"></i></div> |
| | |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="所属行业" prop="industry_id"> |
| | | <el-form-item label="所属行业" prop="industry"> |
| | | <div class="custom-name"> |
| | | <el-select |
| | | v-model="editConfig.infomation.industry_id" |
| | | v-model="editConfig.infomation.industry" |
| | | placeholder="请选择供应商行业" |
| | | class="common-select-sel" |
| | | size="mini" |
| | | > |
| | | <el-option v-for="item in industryOptions" :key="item.id" :label="item.name" :value="item.id"> |
| | | <el-option |
| | | v-for="(item, index) in industryOptions" |
| | | :key="index" |
| | | :label="item.name" |
| | | :value="item.name" |
| | | > |
| | | </el-option> |
| | | </el-select> |
| | | <div class="common-select-btn" @click="setIndustry"><i class="el-icon-setting"></i></div> |
| | |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="联系人" prop="contact_name"> |
| | | <el-input v-model="editConfig.infomation.contact_name"></el-input> |
| | | <el-form-item label="联系人" prop="contact"> |
| | | <el-input v-model="editConfig.infomation.contact"></el-input> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="销售负责人" prop="sale_member"> |
| | | <el-input v-model="editConfig.infomation.sale_member" disabled></el-input> |
| | | <el-form-item label="销售负责人" prop="responsiblePersonName"> |
| | | <!-- <el-input v-model="editConfig.infomation.responsiblePersonId"></el-input> --> |
| | | <el-select |
| | | v-model="editConfig.infomation.responsiblePersonName" |
| | | placeholder="请选择" |
| | | size="mini" |
| | | style="width: 63%" |
| | | > |
| | | <el-option |
| | | v-for="item in memberOptions" |
| | | :key="item.id" |
| | | :label="item.username" |
| | | :value="item.userName" |
| | | > |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="详细地址" prop="address_detail"> |
| | | <el-form-item label="详细地址" prop="detailAddress"> |
| | | <el-input |
| | | type="textarea" |
| | | :autosize="{ minRows: 2 }" |
| | | placeholder="请输入内容" |
| | | v-model="editConfig.infomation.address_detail" |
| | | disabled |
| | | v-model="editConfig.infomation.detailAddress" |
| | | ></el-input> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="网址" prop="webUrl"> |
| | | <el-input v-model="editConfig.infomation.webUrl" disabled></el-input> |
| | | <el-form-item label="网址" prop="url"> |
| | | <el-input v-model="editConfig.infomation.url"></el-input> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | |
| | | <div class="basic-info-view"> |
| | | <el-row> |
| | | <el-col :span="12"> |
| | | <el-form-item label="户名" prop="account_name"> |
| | | <el-input v-model="editConfig.infomation.account_name" disabled></el-input> |
| | | <el-form-item label="户名" prop="accountName"> |
| | | <el-input v-model="editConfig.infomation.accountName"></el-input> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="开户行" prop="account_name"> |
| | | <el-input v-model="editConfig.infomation.account_name" disabled></el-input> |
| | | <el-form-item label="开户行" prop="bank"> |
| | | <el-input v-model="editConfig.infomation.bank"></el-input> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="账号" prop="account_name"> |
| | | <el-input v-model="editConfig.infomation.account_name" disabled></el-input> |
| | | <el-form-item label="账号" prop="account"> |
| | | <el-input v-model="editConfig.infomation.account"></el-input> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="24"> |
| | |
| | | <span style="margin-left: 5px">合同附件</span> |
| | | </div> |
| | | </template> |
| | | <div class="annex-view"> |
| | | <div v-if="file_id === 0" class="annex-view"> |
| | | <div @click="addAnnexClick"> |
| | | <div style="display: flex; float: right"> |
| | | <div style="font-size: 16px"><i class="el-icon-paperclip"></i></div> |
| | | <span>添加附件</span> |
| | | </div> |
| | | <el-upload |
| | | class="upload-demo" |
| | | :headers="headers" |
| | | action="" |
| | | :limit="1" |
| | | :before-upload="beforeAvatarUpload" |
| | | :on-exceed="handleExceed" |
| | | :file-list="fileList" |
| | | :show-file-list="false" |
| | | > |
| | | <div style="display: flex; float: right"> |
| | | <div style="font-size: 16px"><i class="el-icon-paperclip"></i></div> |
| | | <span>添加附件</span> |
| | | </div> |
| | | </el-upload> |
| | | </div> |
| | | </div> |
| | | <div class="file-content"> |
| | | <div>文件名称</div> |
| | | <!-- v-if="file_name && file_name.length > 0" --> |
| | | <div v-else class="file-content"> |
| | | <div>{{ file_name }}</div> |
| | | <div> |
| | | <el-button type="text">预览</el-button> |
| | | <el-button type="text">下载</el-button> |
| | | <el-button type="text">删除</el-button> |
| | | <el-button type="text" @click="previewClick" style="margin-left: 10px">预览</el-button> |
| | | <el-button type="text" @click="downloadClick">下载</el-button> |
| | | <el-button type="text" @click="delContractClick">删除</el-button> |
| | | </div> |
| | | <div ref="file"></div> |
| | | </div> |
| | | </el-form-item> |
| | | </el-col> |
| | |
| | | </template> |
| | | |
| | | <script> |
| | | import { getAddContact, getUpdateContact } from "@/api/client/contacts" |
| | | import { |
| | | createSupplier, |
| | | createContract, |
| | | updateSupplier, |
| | | getIndustryList, |
| | | getSupplierTypeList, |
| | | // downloadContract |
| | | // previewContract |
| | | } from "@/api/supplierManage/supplier" |
| | | import EditDropdownDialog from "@/views/other/commonDialog/EditDropdownDialog" |
| | | import { getMemberListFromGrpc } from "@/api/common/other" |
| | | import download from "downloadjs" |
| | | // import { renderAsync } from "docx-preview" |
| | | import axios from "axios" |
| | | export default { |
| | | name: "AddSupplierDialog", |
| | | props: { |
| | |
| | | } |
| | | }, |
| | | components: { EditDropdownDialog }, |
| | | computed: {}, |
| | | computed: { |
| | | headers() { |
| | | const authorization = "Bearer "+document.cookie.replace(/(?:(?:^|.*;\s*)token\s*=\s*([^;]*).*$)|^.*$/, "$1")|| '' |
| | | return { authorization } |
| | | } |
| | | }, |
| | | data() { |
| | | return { |
| | | dialogWidth: "80%", |
| | | dialogWidth: "50%", |
| | | editConfig: this.addCommonConfig, |
| | | rules: { |
| | | supplier_name: [{ required: true, message: "请输入", trigger: "blur" }], |
| | | member_id: [{ required: true, message: "请选择", trigger: "change" }], |
| | | name: [{ required: true, message: "请输入", trigger: "blur" }], |
| | | responsiblePersonName: [{ required: true, message: "请选择", trigger: "change" }], |
| | | phone: [ |
| | | { required: false, message: "", trigger: "blur" }, |
| | | { len: 11, message: "长度在11个字符", trigger: "blur" }, |
| | |
| | | } |
| | | ] |
| | | }, |
| | | supplierTypeOptions: [], // 供应商类型 |
| | | industryOptions: [], // 所属行业 |
| | | memberOptions: [], |
| | | supplierTypeOptions: [{ id: 1, name: "供应商类型1" }], // 供应商类型 |
| | | industryOptions: [{ id: 1, name: "所属行业1" }], // 所属行业 |
| | | memberOptions: [{ id: 1, username: "admin" }], |
| | | editDropdownConfig: { |
| | | editVisible: false, |
| | | title: "", |
| | | infomation: {} |
| | | } |
| | | }, |
| | | fileList: [], |
| | | file_name: this.addCommonConfig.infomation.file_name, |
| | | file_id: this.addCommonConfig.infomation.fileId, |
| | | previewUrl: "", |
| | | loading: false |
| | | } |
| | | }, |
| | | created() { |
| | | if (this.editConfig.title !== "新建" && this.editConfig.infomation.province_id !== 0) { |
| | | this.getCityList(this.editConfig.infomation.province_id, "edit") |
| | | this.getSupplierTypeList() |
| | | this.getIndustryList() |
| | | this.getMemberList() |
| | | if (this.editConfig.title === "修改") { |
| | | // this.previewContract() |
| | | } |
| | | }, |
| | | methods: { |
| | | // 销售负责人 |
| | | async getMemberList() { |
| | | await getMemberListFromGrpc({ |
| | | page: 1, |
| | | pageSize: 100 |
| | | }).then((res) => { |
| | | console.log(res) |
| | | this.memberOptions = res.data.list |
| | | }) |
| | | }, |
| | | // 供应商类型 |
| | | async getSupplierTypeList() { |
| | | await getSupplierTypeList({ |
| | | page: 1, |
| | | pageSize: 100 |
| | | }).then((res) => { |
| | | this.supplierTypeOptions = res.data.list |
| | | }) |
| | | }, |
| | | // 所属行业 |
| | | async getIndustryList() { |
| | | await getIndustryList({ |
| | | page: 1, |
| | | pageSize: 100 |
| | | }).then((res) => { |
| | | this.industryOptions = res.data.list |
| | | }) |
| | | }, |
| | | handleClose() { |
| | | this.editConfig.visible = false |
| | | }, |
| | |
| | | if (valid) { |
| | | console.log(this.editConfig.infomation) |
| | | const params = this.saveParams() |
| | | console.log(params) |
| | | if (this.editConfig.title === "新建") { |
| | | getAddContact(params) |
| | | createSupplier(params) |
| | | .then((res) => { |
| | | console.log(res) |
| | | this.editConfig.visible = false |
| | | if (res.code === 200) { |
| | | this.$message({ |
| | | message: "添加成功", |
| | | type: "success" |
| | | }) |
| | | this.$message.success("添加成功") |
| | | this.$parent.getData() |
| | | } |
| | | }) |
| | |
| | | console.log(err) |
| | | }) |
| | | } else { |
| | | getUpdateContact(params) |
| | | .then((res) => { |
| | | console.log(res) |
| | | this.editConfig.visible = false |
| | | if (res.code === 200) { |
| | | this.$message({ |
| | | message: "编辑成功", |
| | | type: "success" |
| | | }) |
| | | this.$parent.getData() |
| | | } |
| | | }) |
| | | .catch((err) => { |
| | | console.log(err) |
| | | }) |
| | | updateSupplier(params).then((res) => { |
| | | this.editConfig.visible = false |
| | | if (res.code === 200) { |
| | | this.$message.success("编辑成功") |
| | | this.$parent.getData() |
| | | } |
| | | }) |
| | | } |
| | | } else { |
| | | console.log("error submit") |
| | |
| | | saveParams() { |
| | | let data = this.editConfig.infomation |
| | | let params = { |
| | | id: this.editConfig.title === "新建" ? 0 : data.id, |
| | | birthday: data.birthday || "", |
| | | city_id: data.city_id || 0, |
| | | client_id: this.clientId || 0, |
| | | country_id: data.country_id || 0, |
| | | desc: data.desc || "", |
| | | account: data.account || "", |
| | | accountName: data.accountName || "", |
| | | bank: data.bank || "", |
| | | contact: data.contact || "", |
| | | detailAddress: data.detailAddress || "", |
| | | email: data.email || "", |
| | | is_first: data.is_first || false, |
| | | member_id: data.member_id || 0, |
| | | fileId: this.file_id || 0, |
| | | id: data.ID || 0, |
| | | industry: data.industry || "", |
| | | name: data.name || "", |
| | | number: data.number || "", |
| | | phone: data.phone || "", |
| | | position: data.position || "", |
| | | province_id: data.province_id || 0, |
| | | region_id: data.region_id || 0, |
| | | wechat: data.wechat || "" |
| | | responsiblePersonName: data.responsiblePersonName || document.cookie.replace(/(?:(?:^|.*;\s*)username\s*=\s*([^;]*).*$)|^.*$/, "$1"), |
| | | status: data.status || 0, |
| | | supplierType: data.supplierType || "", |
| | | url: data.url || "" |
| | | } |
| | | return params |
| | | }, |
| | |
| | | setIndustry() { |
| | | this.editDropdownConfig.editVisible = true |
| | | this.editDropdownConfig.title = "所属行业" |
| | | }, |
| | | // 文件上传--start |
| | | beforeAvatarUpload(file) { |
| | | // 文件类型判断 |
| | | var testmsg = file.name.substring(file.name.lastIndexOf(".") + 1) |
| | | const extension = testmsg === "doc" |
| | | const extension2 = testmsg === "pdf" |
| | | const extension3 = testmsg === "docx" |
| | | if (!extension && !extension2 && !extension3) { |
| | | this.$message({ |
| | | message: "上传文件只能是 word、pdf格式!", |
| | | type: "warning" |
| | | }) |
| | | this.fileList = [] |
| | | } else { |
| | | // 参数拼接 |
| | | console.log(file) |
| | | let fd = new FormData() |
| | | fd.append("file", file) |
| | | fd.append("name", file.name) |
| | | // 调用接口 |
| | | createContract(fd).then((res) => { |
| | | if (res.code == 200) { |
| | | this.file_name = file.name |
| | | this.file_id = res.data.id |
| | | } |
| | | }) |
| | | } |
| | | }, |
| | | // 文件超出个数限制时的钩子 |
| | | handleExceed(files, fileList) { |
| | | console.log(fileList) |
| | | this.$message.warning(`当前限制选择 1 个文件,本次选择了 ${files.length} 个文件`) |
| | | }, |
| | | // 下载合同 |
| | | downloadClick() { |
| | | let url = "/api/downloadContract?id=" + this.file_id |
| | | download(url, "", "") |
| | | }, |
| | | // 删除合同 |
| | | delContractClick() { |
| | | // deleteContract({ |
| | | // id: this.file_id |
| | | // }).then((res) => { |
| | | // console.log(res) |
| | | // this.$message.success(res.msg) |
| | | this.file_id = 0 |
| | | // }) |
| | | }, |
| | | // 预览合同 |
| | | // async previewClick() { |
| | | // this.previewUrl = "/api/con/previewContract?id=" + this.file_id |
| | | // if (this.file_name.includes("pdf")) { |
| | | // window.open(this.previewUrl, "_blank") |
| | | // } else { |
| | | // let routeUrl = this.$router.resolve({ |
| | | // path: "/PreviewFile", |
| | | // query: { |
| | | // //要传的参数 |
| | | // previewUrl: this.previewUrl |
| | | // } |
| | | // }) |
| | | // window.open(routeUrl.href, "_blank") |
| | | // } |
| | | // } |
| | | async previewClick() { |
| | | this.previewUrl = "/api/previewContract?id=" + this.file_id |
| | | if (this.file_name.includes("pdf")) { |
| | | console.log("是pdf文件") |
| | | await axios.get(this.previewUrl, { headers: { "Authorization":"Bearer "+ document.cookie.replace(/(?:(?:^|.*;\s*)token\s*=\s*([^;]*).*$)|^.*$/, "$1")} }) |
| | | .then(response => { |
| | | window.open(this.previewUrl, "_blank") |
| | | console.log("response",response,this.previewUrl) |
| | | }) |
| | | .catch(error => { |
| | | console.error(error); |
| | | }); |
| | | } else { |
| | | console.log(this.previewUrl,"看看是啥子") |
| | | let routeUrl = this.$router.resolve({ |
| | | path: "/PreviewFile", |
| | | query: { |
| | | //要传的参数 |
| | | previewUrl: this.previewUrl |
| | | } |
| | | }) |
| | | window.open(routeUrl.href, "_blank") |
| | | } |
| | | } |
| | | } |
| | | } |
| | |
| | | .file-content { |
| | | display: flex; |
| | | } |
| | | } |
| | | .dialog-footer { |
| | | background-color: #f5f5f5; |
| | | height: 55px; |
| | | line-height: 55px; |
| | | } |
| | | } |
| | | } |