| | |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="" class="col-17"> |
| | | <el-select v-model="query.unitProject" placeholder="请选择单位工程" clearable style="width: 100%"> |
| | | <el-option v-for="item in unitProjectOptions" :key="item.value" :label="item.label" :value="item.value" /> |
| | | </el-select> |
| | | <!-- <el-select v-model="query.unitProject" placeholder="请选择单位工程" clearable style="width: 100%">--> |
| | | <!-- <el-option v-for="item in unitProjectOptions" :key="item.value" :label="item.label" :value="item.value" />--> |
| | | <!-- </el-select>--> |
| | | <el-tree-select |
| | | ref="areaIdTreeRef" |
| | | v-model="query.unitProject" |
| | | :data="unitProjectOptions" |
| | | placeholder="请选择单位工程" |
| | | multiple |
| | | collapse-tags |
| | | collapse-tags-tooltip |
| | | clearable |
| | | :default-expand-all="true" |
| | | :render-after-expand="false" |
| | | show-checkbox |
| | | style="width: 170px;" |
| | | @change="importantAreaCh" |
| | | @clear="importantAreaClear" |
| | | /> |
| | | </el-form-item> |
| | | <el-form-item label="产品类型" class="col-30"> |
| | | <el-select v-model="query.productType" placeholder="请选择产品类型" clearable style="width: 100%" @change="handleProductTypeChange"> |
| | |
| | | <el-option v-for="s in statusOptions" :key="s.value" :label="s.label" :value="s.value" /> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="" class="col-17"> |
| | | <el-select v-model="query.productSubType" placeholder="请选择产品类型子级" clearable style="width: 100%"> |
| | | <el-option v-for="item in productSubTypeOptions" :key="item.value" :label="item.label" :value="item.value" /> |
| | | </el-select> |
| | | </el-form-item> |
| | | <!-- <el-form-item label="" class="col-17">--> |
| | | <!-- <el-select v-model="query.productSubType" placeholder="请选择产品类型子级" clearable style="width: 100%">--> |
| | | <!-- <el-option v-for="item in productSubTypeOptions" :key="item.value" :label="item.label" :value="item.value" />--> |
| | | <!-- </el-select>--> |
| | | <!-- </el-form-item>--> |
| | | <el-form-item label="申请时间" class="col-30"> |
| | | <el-date-picker |
| | | v-model="query.dateRange" |
| | |
| | | </template> |
| | | </el-table-column> |
| | | </el-table-column> |
| | | |
| | | |
| | | <!-- 购买方式 --> |
| | | <el-table-column label="购买方式" align="center"> |
| | | <el-table-column label="销售形式/账户数量" width="150"> |
| | |
| | | </template> |
| | | </el-table-column> |
| | | </el-table-column> |
| | | |
| | | <!-- 总价 --> |
| | | <el-table-column label="总价" align="center"> |
| | | <el-table-column label="单价" prop="unitPrice" width="90"> |
| | | |
| | | <!-- 单价(与“期限(年)”保持相同的父子表头结构) --> |
| | | <el-table-column label="单价" align="center" width="80"> |
| | | <el-table-column label="" prop="unitPrice" width="80"> |
| | | <template #default="{ row }"> |
| | | <div v-if="row.isSpacer" class="spacer-cell"></div> |
| | | <div v-else-if="!row.isMainOrder" class="price-info"> |
| | |
| | | </div> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="数量" prop="quantity" width="50"> |
| | | </el-table-column> |
| | | |
| | | <!-- 数量(与“期限(年)”保持相同的父子表头结构) --> |
| | | <el-table-column label="数量" align="center" width="80"> |
| | | <el-table-column label="" prop="quantity" width="80" align="center"> |
| | | <template #default="{ row }"> |
| | | <div v-if="row.isSpacer" class="spacer-cell"></div> |
| | | <div v-else-if="!row.isMainOrder" class="quantity">{{ row.quantity }}</div> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table-column> |
| | | |
| | | |
| | | <!-- 期限(年) --> |
| | | <el-table-column label="期限(年)" align="center" width="80"> |
| | | <el-table-column label="" prop="period" width="80"> |
| | | <el-table-column label="" prop="period" width="80" align="center"> |
| | | <template #default="{ row }"> |
| | | <div v-if="row.isSpacer" class="spacer-cell"></div> |
| | | <div v-else-if="!row.isMainOrder" class="period-info"> |
| | |
| | | </template> |
| | | </el-table-column> |
| | | </el-table-column> |
| | | |
| | | |
| | | <!-- 操作 --> |
| | | <el-table-column label="操作" align="center" width="120" class="operation-column"> |
| | | <el-table-column label="" width="120"> |
| | |
| | | <div class="action-item"> |
| | | <div class="action-buttons"> |
| | | <template v-for="action in getAvailableActions(row.parentOrder)" :key="action.type"> |
| | | <el-button |
| | | <el-button |
| | | v-if="action.type === ActionType.VIEW" |
| | | type="primary" |
| | | link |
| | | size="small" |
| | | type="primary" |
| | | link |
| | | size="small" |
| | | @click="handleAction(action, row.parentOrder)" |
| | | > |
| | | 查看 |
| | | </el-button> |
| | | <!-- <el-button |
| | | <!-- <el-button |
| | | v-else-if="action.type === ActionType.TRACK" |
| | | type="primary" |
| | | link |
| | | size="small" |
| | | type="primary" |
| | | link |
| | | size="small" |
| | | @click="handleAction(action, row.parentOrder)" |
| | | > |
| | | 追踪 |
| | |
| | | /> |
| | | </div> |
| | | </el-card> |
| | | |
| | | |
| | | <!-- 订单状态对话框 --> |
| | | <ProductOrderStatusDialog |
| | | v-model="orderStatusDialogVisible" |
| | | :order-id="currentOrderId" |
| | | <ProductOrderStatusDialog |
| | | v-model="orderStatusDialogVisible" |
| | | :order-id="currentOrderId" |
| | | /> |
| | | </div> |
| | | </template> |
| | |
| | | |
| | | const router = useRouter() |
| | | const userStore = useUserInfo() |
| | | const areaIdTreeRef=ref() |
| | | |
| | | // 状态选项(更新为新的工作流程状态) |
| | | const statusOptions = [ |
| | |
| | | const query = reactive({ |
| | | productName: '', |
| | | industry: '', |
| | | unitProject: '', |
| | | unitProject: [] as string[], |
| | | productType: '', |
| | | productSubType: '', |
| | | importantDistrictIdList: [] as string[], |
| | | orderNo: '', |
| | | status: '', |
| | | dateRange: [], |
| | | dateRange: [] as string[], |
| | | }) |
| | | |
| | | // 分页信息 |
| | |
| | | // 获取产品类型选项 |
| | | const getProductTypeOptions = async () => { |
| | | try { |
| | | const res = await productApi.getCategoryByParent({ parentCode: 'product_type' }) |
| | | const res = await productApi.getCategoryByParent({ parentCode: 'ProductTechnologyType' }) |
| | | if (res?.code === 200 && res.data) { |
| | | productTypeOptions.value = res.data.map((item: any) => ({ |
| | | label: item.name, |
| | |
| | | try { |
| | | const res = await productApi.getCategoryByParent({ parentId: industryCode }) |
| | | if (res?.code === 200 && res.data) { |
| | | unitProjectOptions.value = res.data.map((item: any) => ({ |
| | | label: item.name, |
| | | value: item.id |
| | | })) |
| | | unitProjectOptions.value = handleIndustryData(res.data) |
| | | } |
| | | } catch (error) { |
| | | console.error('获取单位工程选项失败:', error) |
| | | unitProjectOptions.value = [] |
| | | } |
| | | } |
| | | |
| | | const handleIndustryData=(list:any)=>{ |
| | | if(list&& list.length>0){ |
| | | let data=list.map((item:any)=>{ |
| | | return { |
| | | label:item.name, |
| | | value:item.id, |
| | | parentId:item.parentId, |
| | | parentName:item.parentName, |
| | | children:item.childrenList?handleIndustryChildData(item,item.childrenList):[] |
| | | } |
| | | }) |
| | | return data |
| | | } |
| | | } |
| | | const handleIndustryChildData=(parentItem:any,childList:any)=>{ |
| | | if(childList&& childList.length>0){ |
| | | let data=childList.map((item:any)=>{ |
| | | return { |
| | | parentId:parentItem.id, |
| | | parentName:parentItem.name, |
| | | label:item.name, |
| | | value:item.id, |
| | | children:item.childrenList?handleIndustryChildData(item,item.childrenList):[] |
| | | } |
| | | }) |
| | | return data |
| | | } |
| | | } |
| | | |
| | |
| | | } |
| | | } |
| | | |
| | | const importantAreaCh=()=>{ |
| | | let checkedKeys = areaIdTreeRef.value!.getCheckedNodes(false, true) |
| | | if(checkedKeys&&checkedKeys.length>0&& query.unitProject.length>0){ |
| | | query.importantDistrictIdList=[] |
| | | checkedKeys.forEach((item:any)=>{ |
| | | if(item.children&&item.children.length>0){ |
| | | query.importantDistrictIdList.push(String(item.value)) |
| | | } |
| | | }) |
| | | } |
| | | } |
| | | |
| | | const importantAreaClear=()=>{ |
| | | query.unitProject = [] |
| | | query.importantDistrictIdList = [] |
| | | areaIdTreeRef.value.setCheckedKeys([]) |
| | | } |
| | | |
| | | // 处理行业领域变化 |
| | | const handleIndustryChange = async (value: string) => { |
| | | // 清空单位工程选择 |
| | | query.unitProject = '' |
| | | query.unitProject = [] |
| | | // 获取对应的单位工程选项 |
| | | await getUnitProjectOptions(value) |
| | | } |
| | |
| | | // 清空产品子级选择 |
| | | query.productSubType = '' |
| | | // 获取对应的产品子级选项 |
| | | await getProductSubTypeOptions(value) |
| | | // await getProductSubTypeOptions(value) |
| | | } |
| | | |
| | | |
| | | |
| | | // 获取状态类型 |
| | | const getStatusType = (status: string) => { |
| | |
| | | // 主订单行,合并所有列显示订单信息 |
| | | if (columnIndex === 0) { // 第一列,合并所有列 |
| | | return { |
| | | colspan: 8, // 总共8列:订单信息2列 + 购买方式2列 + 总价2列 + 期限1列 + 操作1列 |
| | | colspan: 8, // 总共8列:订单信息2列 + 购买方式2列 + 单价1列 + 数量1列 + 期限1列 + 操作1列 |
| | | rowspan: 1 |
| | | } |
| | | } else { |
| | |
| | | |
| | | // 添加产品条件查询 |
| | | if (query.industry) payload.industryId = query.industry |
| | | if (query.unitProject) payload.unitProjectId = query.unitProject |
| | | if (query.unitProject.length > 0) payload.unitProjectId = query.unitProject |
| | | if (query.importantDistrictIdList.length > 0) payload.importantDistrictId = query.importantDistrictIdList |
| | | if (query.productType) payload.productTypeId = query.productType |
| | | if (query.productSubType) payload.productSubTypeId = query.productSubType |
| | | |
| | | // 根据是否有产品条件选择不同的API |
| | | const hasProductConditions = query.industry || query.unitProject || query.productType || query.productSubType |
| | | const hasProductConditions = query.industry || query.unitProject.length > 0 || query.productType || query.productSubType |
| | | const apiMethod = hasProductConditions ? orderApi.getSellerOrderPageWithProductConditions : orderApi.getSellerOrderPage |
| | | |
| | | |
| | | const res = (await apiMethod(payload)) as any |
| | | const pageData = res?.data |
| | | const list: any[] = Array.isArray(pageData?.list) ? pageData.list : [] |
| | |
| | | return |
| | | } |
| | | } |
| | | |
| | | |
| | | // 获取初始选项数据 |
| | | await Promise.all([ |
| | | getIndustryOptions(), |
| | | getProductTypeOptions() |
| | | ]) |
| | | |
| | | |
| | | // 执行搜索 |
| | | handleSearch() |
| | | }) |
| | |
| | | border-bottom: 2px solid #e4e7ed; // 与分隔行一致的下边框 |
| | | } |
| | | } |
| | | |
| | | |
| | | // 调整表头高度 |
| | | tr:first-child { |
| | | th { |
| | |
| | | |
| | | .search-card { |
| | | margin-bottom: 20px; |
| | | |
| | | |
| | | .query-form { |
| | | .form-row { |
| | | display: flex; |
| | | gap: 0; |
| | | width: 100%; |
| | | margin-bottom: 8px; |
| | | |
| | | |
| | | &.actions { |
| | | justify-content: flex-end; |
| | | } |
| | | |
| | | |
| | | .el-form-item { margin-right: 0 !important; } |
| | | > .el-form-item { padding-right: 8px; } |
| | | > .el-form-item:last-child { padding-right: 0; } |
| | |
| | | .el-form-item { |
| | | margin-bottom: 16px; |
| | | margin-right: 20px; |
| | | |
| | | |
| | | &:last-child { |
| | | margin-right: 0; |
| | | } |
| | |
| | | .table-container { |
| | | position: relative; |
| | | z-index: 1; |
| | | |
| | | |
| | | .custom-table { |
| | | // 表头第二行文字大小调整 |
| | | .el-table__header-wrapper { |
| | |
| | | } |
| | | } |
| | | } |
| | | |
| | | |
| | | // 确保表头所有行的文字大小一致 |
| | | .el-table__header { |
| | | th { |
| | |
| | | } |
| | | } |
| | | } |
| | | |
| | | |
| | | .el-table { |
| | | position: relative; |
| | | z-index: 1; |
| | | |
| | | |
| | | .main-order-row { |
| | | background-color: #f8f9fa; |
| | | font-weight: 600; |
| | | |
| | | |
| | | td { |
| | | border-bottom: 2px solid #e4e7ed; |
| | | } |
| | | } |
| | | |
| | | |
| | | .sub-order-row { |
| | | background-color: #ffffff; |
| | | |
| | | |
| | | td { |
| | | border-bottom: 1px solid #ebeef5; |
| | | } |
| | |
| | | gap: 20px; |
| | | align-items: center; |
| | | overflow: hidden; |
| | | |
| | | |
| | | .order-item { |
| | | display: flex; |
| | | align-items: center; |
| | | gap: 8px; |
| | | flex-shrink: 0; |
| | | |
| | | |
| | | .label { |
| | | color: #909399; |
| | | font-size: 12px; |
| | | min-width: 60px; |
| | | flex-shrink: 0; |
| | | } |
| | | |
| | | |
| | | .value { |
| | | color: #303133; |
| | | font-size: 12px; |
| | |
| | | |
| | | .price-info { |
| | | font-size: 12px; |
| | | |
| | | |
| | | .price-points { |
| | | color: #e6a23c; |
| | | font-weight: 500; |
| | | } |
| | | |
| | | |
| | | .price-currency { |
| | | color: #67c23a; |
| | | font-weight: 500; |
| | | } |
| | | |
| | | |
| | | .price-agreement { |
| | | color: #409eff; |
| | | font-weight: 500; |
| | | } |
| | | |
| | | |
| | | .price-free { |
| | | color: #909399; |
| | | font-style: italic; |
| | |
| | | .period-info { |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | gap: 8px; |
| | | font-size: 12px; |
| | | |
| | | |
| | | .permanent { |
| | | color: #909399; |
| | | font-size: 12px; |
| | |
| | | display: flex; |
| | | align-items: center; |
| | | margin-bottom: 4px; |
| | | |
| | | |
| | | &:last-child { |
| | | margin-bottom: 0; |
| | | } |
| | | |
| | | |
| | | .label { |
| | | color: #909399; |
| | | font-size: 12px; |
| | | min-width: 60px; |
| | | flex-shrink: 0; |
| | | } |
| | | |
| | | |
| | | .value { |
| | | color: #303133; |
| | | font-size: 12px; |
| | |
| | | color: #303133; |
| | | text-align: center; |
| | | line-height: 1.4; |
| | | |
| | | |
| | | .all-actions { |
| | | display: flex; |
| | | flex-direction: column; |
| | |
| | | justify-content: center; |
| | | gap: 6px; |
| | | width: 100%; |
| | | |
| | | |
| | | .action-item { |
| | | width: 100%; |
| | | |
| | | |
| | | .action-buttons { |
| | | display: flex; |
| | | flex-direction: column; |
| | |
| | | align-items: center; |
| | | justify-content: center; |
| | | width: 100%; |
| | | |
| | | |
| | | .el-button { |
| | | width: 100%; |
| | | text-align: center; |
| | |
| | | height: auto; |
| | | line-height: 1.2; |
| | | } |
| | | |
| | | |
| | | .op-text { |
| | | margin: 4px 0; |
| | | text-align: center; |
| | |
| | | flex-wrap: wrap; |
| | | } |
| | | |
| | | .op-text { |
| | | color: #606266; |
| | | .op-text { |
| | | color: #606266; |
| | | font-size: 12px; |
| | | } |
| | | .op-text.warning { |
| | | color: #f59e0b; |
| | | .op-text.warning { |
| | | color: #f59e0b; |
| | | font-size: 12px; |
| | | } |
| | | |
| | |
| | | .el-table__fixed-right { |
| | | z-index: 2 !important; |
| | | } |
| | | |
| | | |
| | | .el-table__fixed-right-patch { |
| | | z-index: 2 !important; |
| | | } |
| | | |
| | | |
| | | // 操作列样式优化 |
| | | .operation-column { |
| | | .cell { |