| | |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item |
| | | label="纳税人识别号:" |
| | | prop="taxpayerIdentificationNum" |
| | | > |
| | | <el-input |
| | | v-model="form.taxpayerIdentificationNum" |
| | | placeholder="请输入" |
| | | clearable |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row :gutter="30"> |
| | | <el-col :span="12"> |
| | | <el-form-item label="公司地址:" prop="companyAddress"> |
| | | <el-input |
| | | v-model="form.companyAddress" |
| | | placeholder="请输入" |
| | | clearable |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="公司电话:" prop="companyPhone"> |
| | | <el-input |
| | | v-model="form.companyPhone" |
| | | placeholder="请输入" |
| | | clearable |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row :gutter="30"> |
| | | <el-col :span="12"> |
| | | <el-form-item label="开户行:" prop="bankAccountName"> |
| | | <el-input |
| | | v-model="form.bankAccountName" |
| | | placeholder="请输入" |
| | | clearable |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="账号:" prop="bankAccountNum"> |
| | | <el-input |
| | | v-model="form.bankAccountNum" |
| | | placeholder="请输入" |
| | | clearable |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row :gutter="30"> |
| | | <el-col :span="12"> |
| | | <el-form-item label="联系人:" prop="contactUserName"> |
| | | <el-input |
| | | v-model="form.contactUserName" |
| | | placeholder="请输入" |
| | | clearable |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="联系电话:" prop="contactUserPhone"> |
| | | <el-input |
| | | v-model="form.contactUserPhone" |
| | | placeholder="请输入" |
| | | clearable |
| | | /> |
| | |
| | | <el-col :span="12"> |
| | | <el-form-item label="维护人:" prop="maintainUserId"> |
| | | <el-select |
| | | filterable |
| | | v-model="form.maintainUserId" |
| | | placeholder="请选择" |
| | | clearable |
| | |
| | | type="date" |
| | | placeholder="请选择" |
| | | clearable |
| | | disabled |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row :gutter="30"> |
| | | <el-col :span="12"> |
| | | <el-form-item label="产品大类:" prop="productId"> |
| | | <el-tree-select |
| | | v-model="form.productId" |
| | | placeholder="请选择" |
| | | clearable |
| | | check-strictly |
| | | :data="productOptions" |
| | | :render-after-expand="false" |
| | | style="width: 100%" |
| | | @change="getModels" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="规格型号:" prop="productModelId"> |
| | | <el-select |
| | | v-model="form.productModelId" |
| | | placeholder="请选择" |
| | | clearable |
| | | style="width: 100%" |
| | | @change="getProductModel" |
| | | > |
| | | <el-option |
| | | v-for="item in modelOptions" |
| | | :key="item.id" |
| | | :label="item.model" |
| | | :value="item.id" |
| | | /> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | |
| | | </div> |
| | | </template> |
| | | </el-dialog> |
| | | <el-dialog |
| | | v-model="historyDialogVisible" |
| | | :title="`${currentHistorySupplierName || ''}合作历史`" |
| | | width="80%" |
| | | > |
| | | <el-table |
| | | :data="historyTableData" |
| | | border |
| | | v-loading="historyTableLoading" |
| | | style="width: 100%" |
| | | max-height="500" |
| | | > |
| | | <el-table-column align="center" label="序号" type="index" width="60" /> |
| | | <el-table-column label="采购合同号" prop="purchaseContractNumber" min-width="180" show-overflow-tooltip /> |
| | | <el-table-column label="销售合同号" prop="salesContractNo" min-width="180" show-overflow-tooltip /> |
| | | <el-table-column label="供应商名称" prop="supplierName" min-width="160" show-overflow-tooltip /> |
| | | <el-table-column label="付款方式" prop="paymentMethod" min-width="120" show-overflow-tooltip /> |
| | | <el-table-column label="合同金额(元)" prop="contractAmount" min-width="140" show-overflow-tooltip /> |
| | | <el-table-column label="录入人" prop="recorderName" min-width="100" show-overflow-tooltip /> |
| | | <el-table-column label="录入日期" prop="entryDate" min-width="120" show-overflow-tooltip /> |
| | | </el-table> |
| | | <pagination |
| | | v-show="historyPage.total > 0" |
| | | :total="historyPage.total" |
| | | layout="total, sizes, prev, pager, next, jumper" |
| | | :page="historyPage.current" |
| | | :limit="historyPage.size" |
| | | @pagination="historyPagination" |
| | | /> |
| | | </el-dialog> |
| | | <files-dia ref="filesDia"></files-dia> |
| | | </div> |
| | | </template> |
| | | |
| | | <script setup> |
| | | import { onMounted, ref } from "vue"; |
| | | import { Search } from "@element-plus/icons-vue"; |
| | | import Pagination from "@/components/PIMTable/Pagination.vue"; |
| | | import { delSupplier } from "@/api/basicData/supplierManageFile.js"; |
| | | import { ElMessageBox } from "element-plus"; |
| | | import { userListNoPage } from "@/api/system/user.js"; |
| | | import { purchaseListPage } from "@/api/procurementManagement/procurementLedger.js"; |
| | | import { productTreeList, modelList } from "@/api/basicData/product.js"; |
| | | import { |
| | | addSupplier, |
| | | getSupplier, |
| | |
| | | } from "@/api/basicData/supplierManageFile.js"; |
| | | import useUserStore from "@/store/modules/user"; |
| | | import { getToken } from "@/utils/auth.js"; |
| | | import FilesDia from "./filesDia.vue"; |
| | | const { proxy } = getCurrentInstance(); |
| | | const userStore = useUserStore(); |
| | | |
| | |
| | | { |
| | | label: "供应商名称", |
| | | prop: "supplierName", |
| | | width: 250, |
| | | }, |
| | | { |
| | | label: "纳税人识别号", |
| | | prop: "taxpayerIdentificationNum", |
| | | width: 230, |
| | | }, |
| | | { |
| | | label: "公司地址", |
| | | prop: "companyAddress", |
| | | width: 220, |
| | | }, |
| | | { |
| | | label: "联系方式", |
| | | prop: "companyPhone", |
| | | width:150 |
| | | }, |
| | | { |
| | | label: "开户行", |
| | | prop: "bankAccountName", |
| | | width: 220, |
| | | }, |
| | | { |
| | | label: "账号", |
| | | prop: "bankAccountNum", |
| | | width: 220, |
| | | }, |
| | | { |
| | | label: "联系人", |
| | | prop: "contactUserName", |
| | | }, |
| | | { |
| | | label: "联系电话", |
| | | prop: "contactUserPhone", |
| | | width: 150, |
| | | }, |
| | | { |
| | | label: "维护人", |
| | | prop: "maintainUserName", |
| | | }, |
| | | |
| | | { |
| | | label: "维护时间", |
| | | prop: "maintainTime", |
| | | width:100 |
| | | width:160 |
| | | }, |
| | | { |
| | | dataType: "action", |
| | | label: "操作", |
| | | align: "center", |
| | | fixed: 'right', |
| | | width:230, |
| | | operation: [ |
| | | { |
| | | name: "编辑", |
| | | type: "text", |
| | | clickFun: (row) => { |
| | | openForm("edit", row); |
| | | }, |
| | | disabled: (row) => { |
| | | return row.maintainUserName !== userStore.nickName |
| | | } |
| | | } |
| | | }, |
| | | { |
| | | name: "合作历史", |
| | | type: "text", |
| | | clickFun: (row) => { |
| | | openHistoryDialog(row); |
| | | } |
| | | }, |
| | | { |
| | | //资质附件 |
| | | name: "资质文件", |
| | | type: "text", |
| | | clickFun: (row) => { |
| | | openFilesFormDia(row) |
| | | } |
| | | } |
| | | ], |
| | | }, |
| | | ]); |
| | |
| | | const selectedRows = ref([]); |
| | | const userList = ref([]); |
| | | const tableLoading = ref(false); |
| | | const productOptions = ref([]); |
| | | const modelOptions = ref([]); |
| | | const historyDialogVisible = ref(false); |
| | | const historyTableData = ref([]); |
| | | const historyTableLoading = ref(false); |
| | | const currentHistorySupplierName = ref(""); |
| | | const page = reactive({ |
| | | current: 1, |
| | | size: 100, |
| | | total: 0, |
| | | }); |
| | | const historyPage = reactive({ |
| | | current: 1, |
| | | size: 100, |
| | | total: 0, |
| | |
| | | }, |
| | | form: { |
| | | supplierName: "", |
| | | taxpayerIdentificationNum: "", |
| | | companyAddress: "", |
| | | companyPhone: "", |
| | | bankAccountName: "", |
| | | bankAccountNum: "", |
| | | contactUserName: "", |
| | | contactUserPhone: "", |
| | | maintainUserId: "", |
| | | maintainTime: "", |
| | | productId: "", |
| | | productCategory: "", |
| | | productModelId: "", |
| | | specificationModel: "", |
| | | }, |
| | | rules: { |
| | | supplierName: [{ required: true, message: "请输入", trigger: "blur" }], |
| | | taxpayerIdentificationNum: [ |
| | | { required: true, message: "请输入", trigger: "blur" }, |
| | | ], |
| | | companyAddress: [{ required: true, message: "请输入", trigger: "blur" }], |
| | | companyPhone: [{ required: true, message: "请输入", trigger: "blur" }], |
| | | bankAccountName: [{ required: true, message: "请输入", trigger: "blur" }], |
| | | bankAccountNum: [{ required: true, message: "请输入", trigger: "blur" }], |
| | | contactUserName: [{ required: false, message: "请输入", trigger: "blur" }], |
| | | contactUserPhone: [{ required: false, message: "请输入", trigger: "blur" }], |
| | | maintainUserId: [{ required: false, message: "请选择", trigger: "change" }], |
| | | maintainTime: [{ required: false, message: "请选择", trigger: "change" }], |
| | | }, |
| | | }); |
| | | const { searchForm, form, rules } = toRefs(data); |
| | | const filesDia = ref() |
| | | |
| | | // 查询列表 |
| | | /** 搜索按钮操作 */ |
| | |
| | | tableData.value = res.data.records; |
| | | page.total = res.data.total; |
| | | }); |
| | | }; |
| | | // 打开附件弹框 |
| | | const openFilesFormDia = (row) => { |
| | | nextTick(() => { |
| | | filesDia.value?.openDialog(row) |
| | | }) |
| | | }; |
| | | const upload = reactive({ |
| | | // 是否显示弹出层(供应商导入) |
| | |
| | | const handleSelectionChange = (selection) => { |
| | | selectedRows.value = selection; |
| | | }; |
| | | const getProductTreeData = () => { |
| | | return productTreeList().then((res) => { |
| | | productOptions.value = convertIdToValue(res); |
| | | return productOptions.value; |
| | | }); |
| | | }; |
| | | const getModels = (value) => { |
| | | form.value.productId = value; |
| | | form.value.productModelId = ""; |
| | | form.value.specificationModel = ""; |
| | | form.value.productCategory = findNodeById(productOptions.value, value); |
| | | modelList({ id: value }).then((res) => { |
| | | modelOptions.value = res; |
| | | }); |
| | | }; |
| | | const getProductModel = (value) => { |
| | | const index = modelOptions.value.findIndex((item) => item.id === value); |
| | | if (index !== -1) { |
| | | form.value.specificationModel = modelOptions.value[index].model; |
| | | } else { |
| | | form.value.specificationModel = ""; |
| | | } |
| | | }; |
| | | const findNodeById = (nodes, productId) => { |
| | | for (let i = 0; i < nodes.length; i++) { |
| | | if (nodes[i].value === productId) { |
| | | return nodes[i].label; |
| | | } |
| | | if (nodes[i].children && nodes[i].children.length > 0) { |
| | | const foundNode = findNodeById(nodes[i].children, productId); |
| | | if (foundNode) { |
| | | return foundNode; |
| | | } |
| | | } |
| | | } |
| | | return ""; |
| | | }; |
| | | const findNodeIdByLabel = (nodes, label) => { |
| | | for (let i = 0; i < nodes.length; i++) { |
| | | if (nodes[i].label === label) { |
| | | return nodes[i].id; |
| | | } |
| | | if (nodes[i].children && nodes[i].children.length > 0) { |
| | | const found = findNodeIdByLabel(nodes[i].children, label); |
| | | if (found) { |
| | | return found; |
| | | } |
| | | } |
| | | } |
| | | return ""; |
| | | }; |
| | | const convertIdToValue = (data) => { |
| | | return data.map((item) => { |
| | | const { id, children, ...rest } = item; |
| | | const newItem = { |
| | | ...rest, |
| | | value: id, |
| | | }; |
| | | if (children && children.length > 0) { |
| | | newItem.children = convertIdToValue(children); |
| | | } |
| | | return newItem; |
| | | }); |
| | | }; |
| | | const getHistoryList = () => { |
| | | if (!currentHistorySupplierName.value) { |
| | | historyTableData.value = []; |
| | | historyPage.total = 0; |
| | | return; |
| | | } |
| | | historyTableLoading.value = true; |
| | | purchaseListPage({ |
| | | supplierName: currentHistorySupplierName.value, |
| | | current: historyPage.current, |
| | | size: historyPage.size, |
| | | }) |
| | | .then((res) => { |
| | | historyTableData.value = res.data.records || []; |
| | | historyPage.total = res.data.total || 0; |
| | | }) |
| | | .finally(() => { |
| | | historyTableLoading.value = false; |
| | | }); |
| | | }; |
| | | const openHistoryDialog = (row) => { |
| | | currentHistorySupplierName.value = row.supplierName || ""; |
| | | historyPage.current = 1; |
| | | historyDialogVisible.value = true; |
| | | getHistoryList(); |
| | | }; |
| | | const historyPagination = (obj) => { |
| | | historyPage.current = obj.page; |
| | | historyPage.size = obj.limit; |
| | | getHistoryList(); |
| | | }; |
| | | // 打开弹框 |
| | | const openForm = (type, row) => { |
| | | operationType.value = type; |
| | | form.value = {}; |
| | | modelOptions.value = []; |
| | | form.value.maintainUserId = userStore.id; |
| | | form.value.maintainTime = getCurrentDate(); |
| | | userListNoPage().then((res) => { |
| | | userList.value = res.data; |
| | | }); |
| | | if (type === "edit") { |
| | | getSupplier(row.id).then((res) => { |
| | | form.value = { ...res.data }; |
| | | getProductTreeData().then(() => { |
| | | getSupplier(row.id).then(async (res) => { |
| | | form.value = { ...res.data }; |
| | | try { |
| | | const productId = form.value.producutId || form.value.productId; |
| | | if (productId) { |
| | | form.value.productId = productId; |
| | | form.value.productCategory = findNodeById(productOptions.value, productId); |
| | | const models = await modelList({ id: productId }); |
| | | modelOptions.value = models || []; |
| | | const currentModel = (modelOptions.value || []).find((m) => `${m.id}` === `${form.value.supplyProduct}`); |
| | | if (currentModel) { |
| | | form.value.productModelId = currentModel.id; |
| | | form.value.specificationModel = currentModel.model; |
| | | } |
| | | } |
| | | } catch (e) { |
| | | console.error("加载产品规格型号失败", e); |
| | | } |
| | | }); |
| | | }); |
| | | } else { |
| | | getProductTreeData(); |
| | | } |
| | | dialogFormVisible.value = true; |
| | | }; |
| | |
| | | }; |
| | | // 提交新增 |
| | | const submitAdd = () => { |
| | | addSupplier(form.value).then((res) => { |
| | | addSupplier({ |
| | | ...form.value, |
| | | supplyProduct: form.value.productModelId, |
| | | }).then((res) => { |
| | | proxy.$modal.msgSuccess("提交成功"); |
| | | closeDia(); |
| | | getList(); |
| | |
| | | }; |
| | | // 提交修改 |
| | | const submitEdit = () => { |
| | | updateSupplier(form.value).then((res) => { |
| | | updateSupplier({ |
| | | ...form.value, |
| | | supplyProduct: form.value.productModelId, |
| | | }).then((res) => { |
| | | proxy.$modal.msgSuccess("提交成功"); |
| | | closeDia(); |
| | | getList(); |