| | |
| | | <template> |
| | | <div> <el-form :inline="true" :model="queryParams" class="search-form"> |
| | | <el-form-item label="搜索" v-if="shouldShowSearch"> |
| | | <el-input v-model="queryParams.searchAll" :placeholder="searchPlaceholder" clearable /> |
| | | <div> |
| | | <el-form :inline="true" :model="queryParams" class="search-form"> |
| | | <el-form-item v-if="shouldShowSearch" label="搜索"> |
| | | <el-input v-model="queryParams.searchAll" :placeholder="searchPlaceholder" clearable/> |
| | | </el-form-item> |
| | | <el-form-item> |
| | | <el-button type="primary" @click="search">查询</el-button> |
| | |
| | | <el-card> |
| | | <!-- 标签页 --> |
| | | <el-tabs v-model="activeTab" class="info-tabs" @tab-click="handleTabClick"> |
| | | <el-tab-pane v-for="tab in tabs" :key="tab.name" :label="tab.label" :name="tab.name" /> |
| | | <el-tab-pane v-for="tab in tabs" :key="tab.name" :label="tab.label" :name="tab.name"/> |
| | | </el-tabs> |
| | | |
| | | <!-- 操作按钮区 --> |
| | | <el-row :gutter="24" class="table-toolbar"> |
| | | <el-button type="primary" :icon="Plus" @click="handleAdd">新建</el-button> |
| | | <el-button type="danger" :icon="Delete" @click="handleDelete">删除</el-button> |
| | | <el-button type="info" :icon="Download" @click="handleExport" v-show="canExport">导出</el-button> |
| | | <el-button :icon="Plus" type="primary" @click="handleAdd">新建</el-button> |
| | | <el-button :icon="Delete" type="danger" @click="handleDelete">删除</el-button> |
| | | <el-button @click="jump">admins</el-button> |
| | | <el-button v-show="canExport" :icon="Download" type="info" @click="handleExport">导出</el-button> |
| | | </el-row> <!-- 表格组件 --> |
| | | <div> |
| | | <data-table :loading="loading" :table-data="tableData" :columns="columns" |
| | | @selection-change="handleSelectionChange" @edit="handleEdit" :show-selection="true" :border="true"> <!-- 字段名称列的自定义插槽 - 显示为标签 --> |
| | | <template v-if="tabName === 'coalQualityMaintenance'" #coalFields="{ row }"> |
| | | <template v-if="typeof row.coalFields === 'string' && row.coalFields.includes(',')"> |
| | | <el-tag v-for="(field, index) in row.coalFields.split(',')" :key="index" type="primary" size="small" |
| | | style="margin-right: 4px; margin-bottom: 2px;"> |
| | | <data-table :border="true" :columns="columns" :loading="loading" |
| | | :show-selection="true" :table-data="tableData" @edit="handleEdit" @selection-change="handleSelectionChange"> |
| | | <!-- 字段名称列的自定义插槽 - 显示为标签 --> |
| | | <template v-if="tabName === 'coalQualityMaintenance'" #fieldIds="{ row }"> |
| | | <template v-if="typeof row.fieldIds === 'string' && row.fieldIds.includes(',')"> |
| | | <el-tag v-for="(field, index) in row.fieldIds.split(',')" :key="index" size="small" style="margin-right: 4px; margin-bottom: 2px;" |
| | | type="primary"> |
| | | {{ getFieldDisplayName(field.trim()) }} |
| | | </el-tag> |
| | | </template> |
| | | <template v-else> |
| | | <el-tag type="primary" size="small"> |
| | | {{ getFieldDisplayName(row.coalFields) || '--' }} |
| | | <el-tag size="small" type="primary"> |
| | | {{ getFieldDisplayName(row.fieldIds) || '--' }} |
| | | </el-tag> |
| | | </template> |
| | | </template> |
| | | </data-table> |
| | | </div> |
| | | <pagination v-if="total > 0" :page="pageNum" :limit="pageSizes" :total="total" @pagination="handPagination" |
| | | :layout="'total, prev, pager, next, jumper'" /> |
| | | <pagination v-if="total > 0" :layout="'total, prev, pager, next, jumper'" :limit="pageSizes" :page="pageNum" :total="total" |
| | | @pagination="handPagination"/> |
| | | <Supplier v-if="tabName === 'supplier'" v-model:copyForm="copyForm" |
| | | v-model:supplierDialogFormVisible="dialogFormVisible" :form="form" :title="title" @submit="handleSubmit" |
| | | @beforeClose="handleBeforeClose" @update:dialogFormVisible="handleDialogFormVisible" :addOrEdit="addOrEdit" /> |
| | | v-model:supplierDialogFormVisible="dialogFormVisible" :addOrEdit="addOrEdit" :form="form" :title="title" |
| | | @beforeClose="handleBeforeClose" @submit="handleSubmit" |
| | | @update:dialogFormVisible="handleDialogFormVisible"/> |
| | | <Customer v-if="tabName === 'customer'" v-model:copyForm="copyForm" |
| | | v-model:customerDialogFormVisible="dialogFormVisible" :form="form" :title="title" @submit="handleSubmit" |
| | | :addOrEdit="addOrEdit" @beforeClose="handleBeforeClose" /> |
| | | <Coal v-if="tabName === 'coal'" v-model:copyForm="copyForm" v-model:coalDialogFormVisible="dialogFormVisible" |
| | | :form="form" :title="title" :addOrEdit="addOrEdit" @submit="handleSubmit" /> |
| | | <coalQualityMaintenance v-if="tabName === 'coalQualityMaintenance'" v-model:copyForm="copyForm" |
| | | v-model:coalQualityMaintenanceDialogFormVisible="dialogFormVisible" :form="form" :title="title" |
| | | :addOrEdit="addOrEdit" @submit="handleSubmit" /> |
| | | <coalMeiZhiZiDuanWeiHu v-if="tabName === 'coalMeiZhiZiDuanWeiHu'" v-model:copyForm="copyForm" |
| | | v-model:coalMaintenanceFieldDialogVisible="dialogFormVisible" :form="form" :title="title" :addOrEdit="addOrEdit" |
| | | @submit="handleSubmit" /> |
| | | v-model:customerDialogFormVisible="dialogFormVisible" :addOrEdit="addOrEdit" :form="form" :title="title" |
| | | @beforeClose="handleBeforeClose" @submit="handleSubmit"/> |
| | | <Coal v-if="tabName === 'coal'" v-model:coalDialogFormVisible="dialogFormVisible" v-model:copyForm="copyForm" |
| | | :addOrEdit="addOrEdit" :form="form" :title="title" @submit="handleSubmit"/> |
| | | <coalQualityMaintenance v-if="tabName === 'coalQualityMaintenance'" v-model:coalQualityMaintenanceDialogFormVisible="dialogFormVisible" |
| | | v-model:copyForm="copyForm" :addOrEdit="addOrEdit" |
| | | :form="form" |
| | | :title="title" @submit="handleSubmit"/> |
| | | <coalMeiZhiZiDuanWeiHu v-if="tabName === 'coalMeiZhiZiDuanWeiHu'" v-model:coalMaintenanceFieldDialogVisible="dialogFormVisible" |
| | | v-model:copyForm="copyForm" :addOrEdit="addOrEdit" :form="form" |
| | | :title="title" |
| | | @submit="handleSubmit"/> |
| | | </el-card> |
| | | </div> |
| | | </template> |
| | | |
| | | <script setup> |
| | | // ===== 核心依赖导入 ===== |
| | | import { ref, reactive, onMounted, computed, getCurrentInstance } from "vue"; |
| | | import { ElMessage, ElMessageBox } from "element-plus"; |
| | | import { Plus, Edit, Delete, Download } from "@element-plus/icons-vue"; |
| | | import {computed, getCurrentInstance, onMounted, reactive, ref, nextTick} from "vue"; |
| | | import {ElMessage, ElMessageBox} from "element-plus"; |
| | | import {Delete, Download, Plus} from "@element-plus/icons-vue"; |
| | | |
| | | // ===== 组件导入 ===== |
| | | import DataTable from "@/components/Table/ETable.vue"; |
| | |
| | | import coalMeiZhiZiDuanWeiHu from "./mould/coalMeiZhiZiDuanWeiHu.vue"; |
| | | |
| | | // ===== API 服务导入 ===== |
| | | import { getSupply, delSupply } from "@/api/basicInformation/supplier.js"; |
| | | import { getCoalInfo, delCoalInfo } from "@/api/basicInformation/coal.js"; |
| | | import { testUserList } from "@/api/tool/publicInterface.js"; |
| | | import { getAreaOptions } from "@/api/system/area.js"; |
| | | import { getCustomerList, delCustomer } from "@/api/basicInformation/customer.js"; |
| | | import { coalField, deleteCoalField } from "@/api/basicInformation/coalFieldMaintenance.js"; |
| | | import { getCoalFieldList, getCoalPlanList } from "@/api/basicInformation/coalQualityMaintenance"; |
| | | import {delSupply, getSupply} from "@/api/basicInformation/supplier.js"; |
| | | import {delCoalInfo, getCoalInfo} from "@/api/basicInformation/coal.js"; |
| | | import {testUserList} from "@/api/tool/publicInterface.js"; |
| | | import {getAreaOptions} from "@/api/system/area.js"; |
| | | import {delCustomer, getCustomerList} from "@/api/basicInformation/customer.js"; |
| | | import {coalField, deleteCoalField} from "@/api/basicInformation/coalFieldMaintenance.js"; |
| | | import {getCoalFieldList, getCoalPlanList} from "@/api/basicInformation/coalQualityMaintenance"; |
| | | |
| | | const { proxy } = getCurrentInstance(); |
| | | const {proxy} = getCurrentInstance(); |
| | | import router from "@/router"; |
| | | |
| | | // ===== 响应式状态管理 ===== |
| | | |
| | | const jump = () => { |
| | | }; |
| | | // 弹窗控制状态 |
| | | const dialogFormVisible = ref(false); |
| | | const form = ref({}); |
| | |
| | | |
| | | // 标签页配置 |
| | | const tabs = reactive([ |
| | | { name: "supplier", label: "供应商信息" }, |
| | | { name: "customer", label: "客户信息" }, |
| | | { name: "coal", label: "煤种信息" }, |
| | | { name: "coalQualityMaintenance", label: "煤质方案" }, |
| | | { name: "coalMeiZhiZiDuanWeiHu", label: "煤质字段" } |
| | | {name: "supplier", label: "供应商信息"}, |
| | | {name: "customer", label: "客户信息"}, |
| | | {name: "coal", label: "煤种信息"}, |
| | | {name: "coalQualityMaintenance", label: "煤质方案"}, |
| | | {name: "coalMeiZhiZiDuanWeiHu", label: "煤质字段"} |
| | | ]); |
| | | |
| | | // ===== 工具函数 ===== |
| | |
| | | * @description 将地址ID数组转换为可读的地址字符串 |
| | | */ |
| | | const formatAddressArray = (addressIds) => { |
| | | if (!addressMap.value || Object.keys(addressMap.value).length === 0 || |
| | | !addressIds || !Array.isArray(addressIds) || addressIds.length === 0 || |
| | | if (!addressMap.value || Object.keys(addressMap.value).length === 0 || |
| | | !addressIds || !Array.isArray(addressIds) || addressIds.length === 0 || |
| | | addressIds.every(id => !id)) { |
| | | return '--'; |
| | | } |
| | | |
| | | |
| | | const addressNames = addressIds.map(id => addressMap.value[id]?.name || '--'); |
| | | |
| | | |
| | | if (addressNames.every(name => name === '--')) { |
| | | return '--'; |
| | | } |
| | | |
| | | |
| | | return addressNames.filter(name => name !== '--').join(' / '); |
| | | }; |
| | | |
| | |
| | | */ |
| | | const coalFieldData = async () => { |
| | | try { |
| | | const { data, code } = await getCoalFieldList(); |
| | | const {data, code} = await getCoalFieldList(); |
| | | if (code === 200) { |
| | | coalFieldList.value = data; |
| | | } |
| | |
| | | */ |
| | | const getFieldDisplayName = (fieldId) => { |
| | | if (!fieldId) return '--'; |
| | | |
| | | |
| | | const numId = parseInt(fieldId); |
| | | const matchedField = coalFieldList.value.find(item => item.id === numId); |
| | | |
| | | |
| | | return matchedField ? matchedField.fieldName : numId; |
| | | }; |
| | | |
| | |
| | | const searchPlaceholder = computed(() => { |
| | | const placeholderMap = { |
| | | supplier: "供应商/识别码/详细地址", |
| | | customer: "供应商/识别码/详细地址", |
| | | customer: "供应商/识别码/详细地址", |
| | | coal: "请输入搜索信息", |
| | | coalQualityMaintenance: "请输入搜索信息", |
| | | coalMeiZhiZiDuanWeiHu: "请输入搜索信息" |
| | |
| | | * 是否显示搜索框 |
| | | */ |
| | | const shouldShowSearch = computed(() => { |
| | | return ['supplier', 'customer', 'coal', 'coalQualityMaintenance','coalMeiZhiZiDuanWeiHu'].includes(tabName.value); |
| | | return ['supplier', 'customer', 'coal', 'coalQualityMaintenance', 'coalMeiZhiZiDuanWeiHu'].includes(tabName.value); |
| | | }); |
| | | |
| | | /** |
| | |
| | | * 供应商表格列配置 |
| | | */ |
| | | const supplierColumns = ref([ |
| | | { prop: "supplierName", label: "供应商名称", minWidth: 100 }, |
| | | { prop: "taxpayerId", label: "统一人识别号", minWidth: 170 }, |
| | | {prop: "supplierName", label: "供应商名称", minWidth: 100}, |
| | | {prop: "taxpayerId", label: "统一人识别号", minWidth: 170}, |
| | | { |
| | | prop: "bids", |
| | | label: "经营地址", |
| | |
| | | return formatAddressArray(addressIds); |
| | | } |
| | | }, |
| | | { prop: "businessAddress", label: "经营详细地址", minWidth: 150 }, |
| | | { prop: "bankAccount", label: "开户行", minWidth: 120 }, |
| | | { prop: "bankName", label: "银行账号", minWidth: 150 }, |
| | | { prop: "contactPerson", label: "联系人", minWidth: 100 }, |
| | | {prop: "businessAddress", label: "经营详细地址", minWidth: 150}, |
| | | {prop: "bankAccount", label: "开户行", minWidth: 120}, |
| | | {prop: "bankName", label: "银行账号", minWidth: 150}, |
| | | {prop: "contactPerson", label: "联系人", minWidth: 100}, |
| | | { |
| | | prop: "cids", |
| | | label: "联系人地址", |
| | |
| | | return formatAddressArray(addressIds); |
| | | } |
| | | }, |
| | | { prop: "contactAddress", label: "联系人详细地址", minWidth: 120 }, |
| | | { prop: "createTime", label: "维护日期", minWidth: 120 }, |
| | | {prop: "contactAddress", label: "联系人详细地址", minWidth: 120}, |
| | | {prop: "updateTime", label: "维护日期", minWidth: 120}, |
| | | ]); |
| | | |
| | | /** |
| | | * 客户表格列配置 |
| | | */ |
| | | const customerColumns = ref([ |
| | | { prop: "customerName", label: "客户名称", minWidth: 100 }, |
| | | { prop: "taxpayerId", label: "统一人识别号", minWidth: 120 }, |
| | | {prop: "customerName", label: "客户名称", minWidth: 100}, |
| | | {prop: "taxpayerId", label: "统一人识别号", minWidth: 120}, |
| | | { |
| | | prop: "bids", |
| | | label: "经营地址", |
| | |
| | | return formatAddressArray(addressIds); |
| | | } |
| | | }, |
| | | { prop: "businessAddress", label: "详细地址", minWidth: 150 }, |
| | | { prop: "bankName", label: "开户行", minWidth: 120 }, |
| | | { prop: "bankAccount", label: "银行账号", minWidth: 150 }, |
| | | { prop: "contactPerson", label: "联系人", minWidth: 100 }, |
| | | { prop: "contactPhone", label: "联系人电话", minWidth: 100 }, |
| | | {prop: "businessAddress", label: "详细地址", minWidth: 150}, |
| | | {prop: "bankName", label: "开户行", minWidth: 120}, |
| | | {prop: "bankAccount", label: "银行账号", minWidth: 150}, |
| | | {prop: "contactPerson", label: "联系人", minWidth: 100}, |
| | | {prop: "contactPhone", label: "联系人电话", minWidth: 100}, |
| | | { |
| | | prop: "cids", |
| | | label: "联系人地址", |
| | |
| | | return formatAddressArray(addressIds); |
| | | } |
| | | }, |
| | | { prop: "contactAddress", label: "联系人详细地址", minWidth: 150 }, |
| | | { prop: "updateTime", label: "维护日期", minWidth: 100 }, |
| | | {prop: "contactAddress", label: "联系人详细地址", minWidth: 150}, |
| | | {prop: "updateTime", label: "维护日期", minWidth: 100}, |
| | | ]); |
| | | |
| | | /** |
| | | * 煤种表格列配置 |
| | | */ |
| | | const coalColumns = ref([ |
| | | { prop: "coal", label: "煤种名称", minWidth: 200 }, |
| | | {prop: "coal", label: "煤种名称", minWidth: 200}, |
| | | { |
| | | prop: "maintainerId", |
| | | label: "维护人", |
| | |
| | | return userMap.value[cellValue] || '--'; |
| | | } |
| | | }, |
| | | { prop: "maintenanceDate", label: "维护日期", minWidth: 150 }, |
| | | {prop: "maintenanceDate", label: "维护日期", minWidth: 150}, |
| | | ]); |
| | | |
| | | /** |
| | | * 煤质方案表格列配置 |
| | | */ |
| | | const coalQualityMaintenanceColumns = ref([ |
| | | { prop: "plan", label: "方案名称", minWidth: 100 }, |
| | | {prop: "plan", label: "方案名称", minWidth: 100}, |
| | | { |
| | | prop: "coalFields", |
| | | prop: "fieldIds", |
| | | label: "字段名称", |
| | | minWidth: 200, |
| | | showOverflowTooltip: true, |
| | |
| | | return cellValue || '--'; |
| | | } |
| | | }, |
| | | { prop: "schemeDesc", label: "字段描述", minWidth: 100 }, |
| | | {prop: "schemeDesc", label: "字段描述", minWidth: 100}, |
| | | ]); |
| | | |
| | | /** |
| | | * 煤质字段表格列配置 |
| | | */ |
| | | const coalMeiZhiZiDuanWeiHuColumns = ref([ |
| | | { prop: "fieldName", label: "字段名称", minWidth: 200 }, |
| | | { prop: "fieldDescription", label: "字段描述", minWidth: 200 }, |
| | | {prop: "fieldName", label: "字段名称", minWidth: 200}, |
| | | {prop: "fieldDescription", label: "字段描述", minWidth: 200}, |
| | | ]); |
| | | // ===== 事件处理函数 ===== |
| | | |
| | |
| | | loading.value = true; |
| | | tabName.value = tab.props.name; |
| | | tableData.value = []; |
| | | |
| | | pageNum.value = 1; |
| | | pageSizes.value = 10; |
| | | total.value = 0; |
| | | queryParams.searchAll = ""; |
| | | // 根据标签页类型设置对应的列配置 |
| | | const tabConfig = { |
| | | supplier: () => { |
| | |
| | | */ |
| | | const handleAddEdit = (currentTabName) => { |
| | | const actionText = addOrEdit.value === "add" ? "新增" : "编辑"; |
| | | |
| | | |
| | | const tabTitleMap = { |
| | | supplier: "供应商信息", |
| | | customer: "客户信息", |
| | | customer: "客户信息", |
| | | coal: "煤种信息", |
| | | coalQualityMaintenance: "煤质方案维护", |
| | | coalMeiZhiZiDuanWeiHu: "煤质字段维护" |
| | |
| | | */ |
| | | const handleEdit = (row) => { |
| | | form.value = JSON.parse(JSON.stringify(row)); |
| | | |
| | | |
| | | // 构建供应商业务地址数组 |
| | | if (form.value.bprovinceId && form.value.bdistrictId && form.value.bcityId) { |
| | | form.value.bids = [row.bprovinceId, row.bcityId, row.bdistrictId]; |
| | | } |
| | | |
| | | |
| | | // 构建供应商联系地址数组 |
| | | if (form.value.cprovinceId && form.value.cdistrictId && form.value.ccityId) { |
| | | form.value.cids = [row.cprovinceId, row.ccityId, row.cdistrictId]; |
| | | } |
| | | |
| | | |
| | | // 构建客户业务地址数组 |
| | | if (form.value.businessCityId && form.value.businessDistrictId && form.value.businessProvinceId) { |
| | | form.value.bids = [row.businessProvinceId, row.businessCityId, row.businessDistrictId]; |
| | | } |
| | | |
| | | |
| | | // 构建客户联系地址数组 |
| | | if (form.value.cityId && form.value.districtId && form.value.provinceId) { |
| | | form.value.cids = [row.provinceId, row.cityId, row.districtId]; |
| | | } |
| | | |
| | | |
| | | addOrEdit.value = "edit"; |
| | | handleAddEdit(tabName.value); |
| | | }; |
| | |
| | | } |
| | | |
| | | const deleteIds = selectedRows.value.map(item => item.id); |
| | | |
| | | |
| | | try { |
| | | await ElMessageBox.confirm("确定删除选中的数据吗?", "提示", { |
| | | confirmButtonText: "确定", |
| | |
| | | const deleteApiMap = { |
| | | supplier: delSupply, |
| | | coal: delCoalInfo, |
| | | coalQualityMaintenance: () => { throw new Error('delCoalQuality API not imported'); }, |
| | | coalQualityMaintenance: () => { |
| | | throw new Error('delCoalQuality API not imported'); |
| | | }, |
| | | customer: delCustomer, |
| | | coalMeiZhiZiDuanWeiHu: deleteCoalField |
| | | }; |
| | |
| | | ElMessage.error("删除接口未配置"); |
| | | return; |
| | | } |
| | | |
| | | console.log(deleteIds) |
| | | const res = await deleteApi(deleteIds); |
| | | |
| | | |
| | | if (res.code !== 200 && res.msg !== "操作成功") { |
| | | ElMessage.error("删除失败:" + res.msg); |
| | | return; |
| | | } |
| | | |
| | | |
| | | ElMessage.success("删除成功"); |
| | | await getList(); |
| | | } catch (error) { |
| | |
| | | */ |
| | | const handleExport = () => { |
| | | const exportConfig = { |
| | | supplier: { api: "/supply/export", name: "供应商信息" }, |
| | | customer: { api: "/customer/export", name: "客户信息" }, |
| | | coal: { api: "/supply/export", name: "煤种信息" }, |
| | | coalQualityMaintenance: { api: "/supply/export", name: "煤质维护信息" } |
| | | supplier: {api: "/supply/export", name: "供应商信息"}, |
| | | customer: {api: "/customer/export", name: "客户信息"}, |
| | | coal: {api: "/supply/export", name: "煤种信息"}, |
| | | coalQualityMaintenance: {api: "/supply/export", name: "煤质维护信息"} |
| | | }; |
| | | |
| | | const config = exportConfig[tabName.value]; |
| | |
| | | * @param {string} name - 导出文件名前缀 |
| | | */ |
| | | const exportData = (api, name) => { |
| | | proxy.download(api, { ...queryParams }, `${name}${new Date().getTime()}.xlsx`); |
| | | proxy.download(api, {...queryParams}, `${name}${new Date().getTime()}.xlsx`); |
| | | ElMessage.success("导出数据:" + name); |
| | | }; |
| | | // ===== 数据获取函数 ===== |
| | |
| | | const getList = async () => { |
| | | try { |
| | | loading.value = true; |
| | | const { data, code } = await selectInterface(); |
| | | |
| | | const {data, code} = await selectInterface(); |
| | | |
| | | if (code !== 200) { |
| | | ElMessage.error("获取数据失败:" + (data?.msg || '未知错误')); |
| | | return; |
| | | } |
| | | |
| | | |
| | | tableData.value = data.records || []; |
| | | total.value = data.total || 0; |
| | | } catch (error) { |
| | |
| | | try { |
| | | // 并行执行初始化操作 |
| | | await Promise.all([ |
| | | handleTabClick({ props: { name: "supplier" } }), |
| | | handleTabClick({props: {name: "supplier"}}), |
| | | fetchAreaOptions(), |
| | | getUserList() |
| | | ]); |
| | |
| | | |
| | | /* 表格工具栏 */ |
| | | .table-toolbar, |
| | | .table-toolbar>* { |
| | | .table-toolbar > * { |
| | | margin: 0 0 0 0 !important; |
| | | } |
| | | |