订单追踪
This commit is contained in:
朱昊天
490
klp-ui/src/views/wms/post/aps/orderTrack.vue
Normal file
490
klp-ui/src/views/wms/post/aps/orderTrack.vue
Normal file
@@ -0,0 +1,490 @@
|
|||||||
|
<template>
|
||||||
|
<div class="app-container" style="height: calc(100vh - 84px); display: flex;">
|
||||||
|
<div class="left-panel" v-loading="orderLoading"
|
||||||
|
style="width: 30%; border-right: 1px solid #e4e7ed; overflow-y: auto;">
|
||||||
|
<div class="filter-section" style="padding: 10px; border-bottom: 1px solid #e4e7ed;">
|
||||||
|
<div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px;">
|
||||||
|
<div style="display: flex; align-items: center; gap: 4px; flex-wrap: wrap;">
|
||||||
|
<el-input v-model="queryParams.keyword" placeholder="请输入关键字" clearable @keyup.enter.native="handleSearch"
|
||||||
|
style="width: 160px;" />
|
||||||
|
<el-button class="aps-btn-red" icon="el-icon-search" size="mini" @click="handleSearch">筛选</el-button>
|
||||||
|
<el-button icon="el-icon-sort" size="mini" @click="toggleMoreFilter"
|
||||||
|
:class="showMoreFilter ? 'aps-btn-red' : 'aps-btn-silver'"></el-button>
|
||||||
|
</div>
|
||||||
|
<div style="font-size: 12px; color: #909399;">
|
||||||
|
共 <span class="aps-total-count">{{ total }}</span> 条记录
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style="display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 4px;">
|
||||||
|
<div style="display: flex; align-items: center; gap: 4px; font-size: 13px; color: #606266;">
|
||||||
|
<span style="white-space: nowrap;">签订日期：</span>
|
||||||
|
<el-date-picker clearable v-model="queryParams.signDateStart" type="date" value-format="yyyy-MM-dd"
|
||||||
|
placeholder="签订开始" style="width: 150px;" @change="handleSearch" />
|
||||||
|
<span>~</span>
|
||||||
|
<el-date-picker clearable v-model="queryParams.signDateEnd" type="date" value-format="yyyy-MM-dd"
|
||||||
|
placeholder="签订结束" style="width: 150px;" @change="handleSearch" />
|
||||||
|
</div>
|
||||||
|
<div style="display: flex; align-items: center; gap: 4px; font-size: 13px; color: #606266;">
|
||||||
|
<span style="white-space: nowrap;">交货日期：</span>
|
||||||
|
<el-date-picker clearable v-model="queryParams.deliveryDateStart" type="date" value-format="yyyy-MM-dd"
|
||||||
|
placeholder="交货开始" style="width: 150px;" @change="handleSearch" />
|
||||||
|
<span>~</span>
|
||||||
|
<el-date-picker clearable v-model="queryParams.deliveryDateEnd" type="date" value-format="yyyy-MM-dd"
|
||||||
|
placeholder="交货结束" style="width: 150px;" @change="handleSearch" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-show="showMoreFilter" class="more-filter"
|
||||||
|
style="margin-top: 8px; padding-top: 10px; border-top: 1px dashed #e4e7ed;">
|
||||||
|
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="80px">
|
||||||
|
<el-form-item label="订单编号" prop="orderCode">
|
||||||
|
<el-input v-model="queryParams.orderCode" placeholder="请输入订单编号" clearable
|
||||||
|
@keyup.enter.native="handleSearch" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="销售员" prop="salesman">
|
||||||
|
<el-select v-model="queryParams.salesman" placeholder="请选择销售员" clearable style="width: 140px;">
|
||||||
|
<el-option v-for="item in dict.type.wip_pack_saleman" :key="item.value" :label="item.label"
|
||||||
|
:value="item.value" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="订单状态" prop="orderStatus">
|
||||||
|
<el-select v-model="queryParams.orderStatus" placeholder="请选择订单状态" clearable style="width: 140px;">
|
||||||
|
<el-option v-for="(value, key) in ORDER_STATUS" :key="value" :label="key" :value="value" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button class="aps-btn-silver" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="custom-list">
|
||||||
|
<div class="list-body">
|
||||||
|
<div v-for="item in orderList" :key="item.orderId" class="list-item"
|
||||||
|
:class="{ 'list-item-active': currentOrder && currentOrder.orderId === item.orderId }"
|
||||||
|
@click="handleOrderClick(item)">
|
||||||
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
|
||||||
|
<div style="display: flex; align-items: center; gap: 8px;">
|
||||||
|
<div style="font-weight: bold;">{{ item.contractName }}</div>
|
||||||
|
</div>
|
||||||
|
<div style="font-size: 12px; color: #606266;">{{ item.companyName }}</div>
|
||||||
|
</div>
|
||||||
|
<div style="font-size: 12px; color: #909399; margin-bottom: 6px;">
|
||||||
|
<span>销售员: {{ item.salesman }}</span>
|
||||||
|
<span style="margin-left: 20px;">合同号: {{ item.contractCode }}</span>
|
||||||
|
</div>
|
||||||
|
<div style="font-size: 12px; color: #909399; margin-bottom: 6px;">
|
||||||
|
<span>签订时间: {{ item.signTime }}</span>
|
||||||
|
<span style="margin-left: 20px;">交货日期: {{ item.deliveryDate }}</span>
|
||||||
|
</div>
|
||||||
|
<div style="display: flex; justify-content: space-between; align-items: center;">
|
||||||
|
<div style="font-size: 12px; color: #909399;">
|
||||||
|
签订地点: {{ item.signLocation || '-' }}
|
||||||
|
</div>
|
||||||
|
<el-tag :type="statusTagType(item.orderStatus)" size="small">{{ statusLabel(item.orderStatus) }}</el-tag>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-if="orderList.length === 0 && !orderLoading"
|
||||||
|
style="padding: 40px; text-align: center; color: #909399;">
|
||||||
|
暂无订单数据
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
|
||||||
|
@pagination="getList" style="padding: 10px; margin-bottom: 10px !important;" />
|
||||||
|
</div>
|
||||||
|
<div class="right-panel" v-if="currentOrder && currentOrder.orderId"
|
||||||
|
style="flex: 1; display: flex; flex-direction: column;">
|
||||||
|
<div class="detail-panel">
|
||||||
|
<div class="detail-card progress-card">
|
||||||
|
<div class="detail-card-header">
|
||||||
|
<span>完成进度</span>
|
||||||
|
</div>
|
||||||
|
<div class="detail-card-body progress-body">
|
||||||
|
<div class="progress-row">
|
||||||
|
<div class="progress-title">
|
||||||
|
已完成：{{ formatTon(completedKg) }} 吨 / {{ formatTon(plannedKg) }} 吨
|
||||||
|
</div>
|
||||||
|
<div class="progress-percent">{{ completionPercent.toFixed(2) }}%</div>
|
||||||
|
</div>
|
||||||
|
<el-progress :percentage="Number(completionPercent.toFixed(2))" :stroke-width="14"
|
||||||
|
:color="['#e6a23c', '#f56c6c', '#67c23a']" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="detail-card">
|
||||||
|
<div class="detail-card-header">
|
||||||
|
<span>合同总览 - 生产成果</span>
|
||||||
|
</div>
|
||||||
|
<div class="detail-card-body" style="padding: 12px;">
|
||||||
|
<div v-loading="productCoilLoading">
|
||||||
|
<CoilTable ref="productCoilTable" :data="productCoilList || []" :showSelection="true"
|
||||||
|
:pagination="productPagination" :total-statistics="productTotalStatistics"
|
||||||
|
@selection-change="handleProductSelectionChange" @page-change="handleProductPageChange">
|
||||||
|
<template slot="filter-actions" slot-scope="{ selectedRows }">
|
||||||
|
<el-button class="aps-btn-red" size="mini" icon="el-icon-refresh"
|
||||||
|
:disabled="!selectedRows.length" @click="handleBatchTransferContract(selectedRows)">
|
||||||
|
批量转单
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</CoilTable>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="detail-card">
|
||||||
|
<div class="detail-card-header">
|
||||||
|
<span>订单明细（{{ productList.length }} 条）</span>
|
||||||
|
</div>
|
||||||
|
<div class="detail-card-body" style="padding:0;">
|
||||||
|
<div v-if="productList.length > 0" class="aps-product-table-wrap">
|
||||||
|
<div class="aps-product-summary">
|
||||||
|
<span>产品名称：{{ productName }}</span>
|
||||||
|
<span>总数量：{{ totalQuantity }} 吨</span>
|
||||||
|
<span>含税总额：{{ totalTaxTotal }}</span>
|
||||||
|
</div>
|
||||||
|
<el-table :data="productList" border size="small" class="aps-product-table">
|
||||||
|
<el-table-column label="规格" prop="spec" min-width="120" />
|
||||||
|
<el-table-column label="材质" prop="material" width="100" align="center" />
|
||||||
|
<el-table-column label="数量(吨)" prop="quantity" width="90" align="right" />
|
||||||
|
<el-table-column label="含税单价" prop="taxPrice" width="100" align="right" />
|
||||||
|
<el-table-column label="含税总额" prop="taxTotal" width="100" align="right" />
|
||||||
|
<el-table-column label="无税单价" prop="noTaxPrice" width="100" align="right" />
|
||||||
|
<el-table-column label="无税总额" prop="noTaxTotal" width="100" align="right" />
|
||||||
|
<el-table-column label="税额" prop="taxAmount" width="90" align="right" />
|
||||||
|
<el-table-column label="备注" prop="remark" min-width="120" />
|
||||||
|
</el-table>
|
||||||
|
</div>
|
||||||
|
<el-empty v-else description="暂无产品明细" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<el-dialog title="批量转单" :visible.sync="batchTransferDialogVisible" width="500px" append-to-body
|
||||||
|
@closed="batchTargetContractId = ''">
|
||||||
|
<div style="margin-bottom: 12px;">
|
||||||
|
已选择 <strong>{{ (batchTransferCoilIds || []).length }}</strong> 卷钢卷，请选择目标合同：
|
||||||
|
</div>
|
||||||
|
<ContractSelect v-model="batchTargetContractId" mode="all" />
|
||||||
|
<span slot="footer">
|
||||||
|
<el-button @click="batchTransferDialogVisible = false">取消</el-button>
|
||||||
|
<el-button class="aps-btn-red" :disabled="!batchTargetContractId" :loading="batchTransferLoading"
|
||||||
|
@click="confirmBatchTransfer">确认转单</el-button>
|
||||||
|
</span>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
<div v-else style="flex: 1; display: flex; flex-direction: column;">
|
||||||
|
<el-empty description="选择订单后查看内容" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { listCrmOrder } from '@/api/aps/order'
|
||||||
|
import { parseProductContent } from '@/utils/productContent'
|
||||||
|
import { ORDER_STATUS } from '@/views/crm/js/enum'
|
||||||
|
import CoilTable from '@/views/crm/components/CoilTable.vue'
|
||||||
|
import ContractSelect from '@/components/KLPService/ContractSelect'
|
||||||
|
import { batchUpdateContractCoil } from '@/api/wms/coil'
|
||||||
|
import { listProductCoilsByContract, getProductCoilsStatisticsByContract } from '@/api/crm/coil'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'ApsOrderTrack',
|
||||||
|
components: { CoilTable, ContractSelect },
|
||||||
|
dicts: ['wip_pack_saleman'],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
ORDER_STATUS,
|
||||||
|
showMoreFilter: false,
|
||||||
|
orderLoading: false,
|
||||||
|
orderList: [],
|
||||||
|
total: 0,
|
||||||
|
currentOrder: null,
|
||||||
|
productList: [],
|
||||||
|
productName: '',
|
||||||
|
totalQuantity: 0,
|
||||||
|
totalTaxTotal: 0,
|
||||||
|
productCoilList: [],
|
||||||
|
selectedProductRows: [],
|
||||||
|
productCoilStatistics: {},
|
||||||
|
productPagination: { total: 0, currentPage: 1, pageSize: 20 },
|
||||||
|
productCoilLoading: false,
|
||||||
|
batchTransferDialogVisible: false,
|
||||||
|
batchTargetContractId: '',
|
||||||
|
batchTransferCoilIds: [],
|
||||||
|
batchTransferLoading: false,
|
||||||
|
queryParams: {
|
||||||
|
keyword: '',
|
||||||
|
orderCode: '',
|
||||||
|
salesman: '',
|
||||||
|
orderStatus: undefined,
|
||||||
|
signDateStart: undefined,
|
||||||
|
signDateEnd: undefined,
|
||||||
|
deliveryDateStart: undefined,
|
||||||
|
deliveryDateEnd: undefined,
|
||||||
|
pageNum: 1,
|
||||||
|
pageSize: 10
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
productTotalStatistics() {
|
||||||
|
const stats = this.productCoilStatistics
|
||||||
|
if (!stats || Object.keys(stats).length === 0) return null
|
||||||
|
return {
|
||||||
|
totalCoils: stats.total_count || 0,
|
||||||
|
totalNetWeight: stats.total_net_weight || 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
plannedKg() {
|
||||||
|
const v = Number(this.totalQuantity) || 0
|
||||||
|
return v * 1000
|
||||||
|
},
|
||||||
|
completedKg() {
|
||||||
|
const stats = this.productCoilStatistics || {}
|
||||||
|
return Number(stats.total_net_weight) || 0
|
||||||
|
},
|
||||||
|
completionPercent() {
|
||||||
|
const planned = this.plannedKg
|
||||||
|
if (!planned) return 0
|
||||||
|
const percent = (this.completedKg / planned) * 100
|
||||||
|
if (!isFinite(percent) || isNaN(percent)) return 0
|
||||||
|
return Math.max(0, Math.min(100, percent))
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.getList()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
toggleMoreFilter() {
|
||||||
|
this.showMoreFilter = !this.showMoreFilter
|
||||||
|
},
|
||||||
|
handleSearch() {
|
||||||
|
this.queryParams.pageNum = 1
|
||||||
|
this.getList()
|
||||||
|
},
|
||||||
|
resetQuery() {
|
||||||
|
this.queryParams.orderCode = ''
|
||||||
|
this.queryParams.salesman = ''
|
||||||
|
this.queryParams.orderStatus = undefined
|
||||||
|
this.queryParams.signDateStart = undefined
|
||||||
|
this.queryParams.signDateEnd = undefined
|
||||||
|
this.queryParams.deliveryDateStart = undefined
|
||||||
|
this.queryParams.deliveryDateEnd = undefined
|
||||||
|
this.handleSearch()
|
||||||
|
},
|
||||||
|
getList() {
|
||||||
|
this.orderLoading = true
|
||||||
|
listCrmOrder(this.queryParams).then(res => {
|
||||||
|
this.orderList = res.rows || []
|
||||||
|
this.total = res.total || 0
|
||||||
|
}).catch(() => {
|
||||||
|
this.orderList = []
|
||||||
|
this.total = 0
|
||||||
|
}).finally(() => {
|
||||||
|
this.orderLoading = false
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleOrderClick(order) {
|
||||||
|
this.currentOrder = order
|
||||||
|
this.productPagination.currentPage = 1
|
||||||
|
this.parseProductContent(order)
|
||||||
|
this.fetchProductCoils()
|
||||||
|
this.fetchProductCoilStatistics()
|
||||||
|
},
|
||||||
|
parseProductContent(order) {
|
||||||
|
if (!order || !order.productContent) {
|
||||||
|
this.productList = []
|
||||||
|
this.productName = ''
|
||||||
|
this.totalQuantity = 0
|
||||||
|
this.totalTaxTotal = 0
|
||||||
|
return
|
||||||
|
}
|
||||||
|
const parsed = parseProductContent(order.productContent)
|
||||||
|
this.productList = parsed.products || []
|
||||||
|
this.productName = parsed.productName || ''
|
||||||
|
this.totalQuantity = parsed.totalQuantity || 0
|
||||||
|
this.totalTaxTotal = parsed.totalTaxTotal || 0
|
||||||
|
},
|
||||||
|
statusTagType(status) {
|
||||||
|
const map = { 0: 'info', 1: 'warning', 2: 'primary', 3: 'success', 4: 'success' }
|
||||||
|
return map[status] || 'info'
|
||||||
|
},
|
||||||
|
statusLabel(status) {
|
||||||
|
const labels = { 0: '待生产', 1: '生产中', 2: '部分发货', 3: '已发货', 4: '已签收' }
|
||||||
|
return labels[status] || '未知'
|
||||||
|
},
|
||||||
|
formatTon(kg) {
|
||||||
|
const v = Number(kg) || 0
|
||||||
|
return (v / 1000).toFixed(3)
|
||||||
|
},
|
||||||
|
fetchProductCoils() {
|
||||||
|
if (!this.currentOrder || !this.currentOrder.orderId) return
|
||||||
|
this.productCoilLoading = true
|
||||||
|
listProductCoilsByContract(this.currentOrder.orderId, {
|
||||||
|
pageNum: this.productPagination.currentPage,
|
||||||
|
pageSize: this.productPagination.pageSize
|
||||||
|
}).then(res => {
|
||||||
|
this.productCoilList = res.rows || []
|
||||||
|
this.productPagination.total = res.total || 0
|
||||||
|
}).finally(() => {
|
||||||
|
this.productCoilLoading = false
|
||||||
|
})
|
||||||
|
},
|
||||||
|
fetchProductCoilStatistics() {
|
||||||
|
if (!this.currentOrder || !this.currentOrder.orderId) return
|
||||||
|
getProductCoilsStatisticsByContract(this.currentOrder.orderId).then(res => {
|
||||||
|
this.productCoilStatistics = res.data || {}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleProductSelectionChange(selection) {
|
||||||
|
this.selectedProductRows = selection
|
||||||
|
},
|
||||||
|
handleProductPageChange({ currentPage, pageSize }) {
|
||||||
|
this.productPagination.currentPage = currentPage
|
||||||
|
this.productPagination.pageSize = pageSize
|
||||||
|
this.fetchProductCoils()
|
||||||
|
},
|
||||||
|
handleBatchTransferContract(selectedRows) {
|
||||||
|
if (!selectedRows || !selectedRows.length) {
|
||||||
|
this.$message.warning('请先选择需要转单的钢卷')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.batchTransferCoilIds = selectedRows.map(row => row.coilId)
|
||||||
|
this.batchTargetContractId = ''
|
||||||
|
this.batchTransferDialogVisible = true
|
||||||
|
},
|
||||||
|
confirmBatchTransfer() {
|
||||||
|
const contractId = this.batchTargetContractId
|
||||||
|
if (!contractId) {
|
||||||
|
this.$message.warning('请选择目标合同')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
const coilIds = this.batchTransferCoilIds || []
|
||||||
|
if (!coilIds.length) {
|
||||||
|
this.$message.warning('未选择任何钢卷')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.batchTransferLoading = true
|
||||||
|
batchUpdateContractCoil(contractId, coilIds).then(() => {
|
||||||
|
this.$message.success('转单成功')
|
||||||
|
this.batchTransferDialogVisible = false
|
||||||
|
this.fetchProductCoils()
|
||||||
|
this.fetchProductCoilStatistics()
|
||||||
|
}).finally(() => {
|
||||||
|
this.batchTransferLoading = false
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
@import './scss/aps-theme.scss';
|
||||||
|
|
||||||
|
.app-container {
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-panel {
|
||||||
|
height: calc(100vh - 84px);
|
||||||
|
box-sizing: border-box;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-panel {
|
||||||
|
height: calc(100vh - 84px);
|
||||||
|
overflow: hidden;
|
||||||
|
min-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-list {
|
||||||
|
border: 1px solid #e4e7ed;
|
||||||
|
border-radius: 4px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-item {
|
||||||
|
padding: 10px;
|
||||||
|
border-bottom: 2px solid #dddddd;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-item:hover {
|
||||||
|
background-color: $aps-silver-1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-item-active {
|
||||||
|
background-color: $aps-red-1;
|
||||||
|
border-left: 3px solid $aps-red-2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.aps-total-count {
|
||||||
|
color: $aps-red-2;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.aps-btn-red {
|
||||||
|
@include aps-btn-red;
|
||||||
|
}
|
||||||
|
|
||||||
|
.aps-btn-silver {
|
||||||
|
@include aps-btn-silver;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-panel {
|
||||||
|
flex: 1;
|
||||||
|
overflow-y: scroll;
|
||||||
|
padding: 16px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 16px;
|
||||||
|
background: $aps-bg;
|
||||||
|
min-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-card {
|
||||||
|
background: $aps-white;
|
||||||
|
border: 1px solid $aps-border;
|
||||||
|
border-radius: $aps-radius;
|
||||||
|
box-shadow: $aps-shadow-sm;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-card-header {
|
||||||
|
background: linear-gradient(to right, $aps-red-2, $aps-red-3);
|
||||||
|
color: white;
|
||||||
|
padding: 8px 14px;
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 600;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-card-body {
|
||||||
|
padding: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-body {
|
||||||
|
padding: 12px 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
color: #606266;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-title {
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-percent {
|
||||||
|
flex-shrink: 0;
|
||||||
|
font-weight: 600;
|
||||||
|
color: $aps-red-2;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user