Răsfoiți Sursa

根据所聊内容进行整改

Huanyi 1 săptămână în urmă
părinte
comite
536fe7c381
5 a modificat fișierele cu 118 adăugiri și 160 ștergeri
  1. 13 0
      api/erp/color.js
  2. 9 0
      json/orderStatus.json
  3. 4 3
      pages/order/add-model/index.vue
  4. 41 49
      pages/order/detail/index.vue
  5. 51 108
      pages/order/list/index.vue

+ 13 - 0
api/erp/color.js

@@ -0,0 +1,13 @@
+import request from '@/utils/request';
+
+/**
+ * 分页获取 ERP 颜色列表
+ * @Author: Antigravity
+ */
+export function listPageColor(query) {
+  return request({
+    url: '/erp/color/page',
+    method: 'GET',
+    params: query
+  });
+}

+ 9 - 0
json/orderStatus.json

@@ -0,0 +1,9 @@
+{
+  "0": { "text": "待确认", "color": "#FF9900" },
+  "1": { "text": "已确认", "color": "#1890FF" },
+  "2": { "text": "已审核", "color": "#52C41A" },
+  "3": { "text": "已签批", "color": "#722ED1" },
+  "4": { "text": "挤压完成", "color": "#13C2C2" },
+  "5": { "text": "生产完成", "color": "#2F54EB" },
+  "6": { "text": "已取消", "color": "#F5222D" }
+}

+ 4 - 3
pages/order/add-model/index.vue

@@ -200,7 +200,7 @@
 
 
 <script>
 <script>
 import ErpNavBar from '@/components/erp-nav-bar.vue';
 import ErpNavBar from '@/components/erp-nav-bar.vue';
-import { listPageColorKind } from '@/api/erp/colorKind.js';
+import { listPageColor } from '@/api/erp/color.js';
 import { listPagePack } from '@/api/erp/pack.js';
 import { listPagePack } from '@/api/erp/pack.js';
 import { listPageModel } from '@/api/erp/model.js';
 import { listPageModel } from '@/api/erp/model.js';
 import { addOrderDetail } from '@/api/erp/orderDetail.js';
 import { addOrderDetail } from '@/api/erp/orderDetail.js';
@@ -280,13 +280,14 @@ export default {
 			if (this.surfaceLoading) return;
 			if (this.surfaceLoading) return;
 			this.surfaceLoading = true;
 			this.surfaceLoading = true;
 			try {
 			try {
-				const res = await listPageColorKind({
+				const res = await listPageColor({
 					pageNum: pageNum,
 					pageNum: pageNum,
 					pageSize: this.surfacePageSize
 					pageSize: this.surfacePageSize
 				});
 				});
 				let rows = res.rows || [];
 				let rows = res.rows || [];
 				const total = res.total || 0;
 				const total = res.total || 0;
-				rows = rows.filter(item => item.name !== '所有类别');
+				// 过滤未设置名称的非完整颜色数据
+				rows = rows.filter(item => item.name);
 				if (pageNum === 1) {
 				if (pageNum === 1) {
 					this.surfaceList = rows;
 					this.surfaceList = rows;
 				} else {
 				} else {

+ 41 - 49
pages/order/detail/index.vue

@@ -26,6 +26,8 @@
 						</view>
 						</view>
 						<view class="data-item"><text class="l">型号名称</text><text class="v">{{ model.typeName ||
 						<view class="data-item"><text class="l">型号名称</text><text class="v">{{ model.typeName ||
 							'铝型材主料' }}</text></view>
 							'铝型材主料' }}</text></view>
+						<view class="data-item"><text class="l">单据编号</text><text class="v">{{ model.docCode || '-' }}</text></view>
+						<view class="data-item"><text class="l">项目号</text><text class="v">{{ model.itemNo || '-' }}</text></view>
 						<view class="data-item"><text class="l">型材材质</text><text class="v">{{ model.material ||
 						<view class="data-item"><text class="l">型材材质</text><text class="v">{{ model.material ||
 							'6063-T5' }}</text></view>
 							'6063-T5' }}</text></view>
 						<view class="line-split"></view>
 						<view class="line-split"></view>
@@ -48,11 +50,7 @@
 					<view class="card-head">订单详情</view>
 					<view class="card-head">订单详情</view>
 					<view class="data-item"><text class="l">订单单号</text><text class="v selectable">{{ order.orderNo
 					<view class="data-item"><text class="l">订单单号</text><text class="v selectable">{{ order.orderNo
 							}}</text></view>
 							}}</text></view>
-					<!-- ERP单号 -->
-					<view class="data-item" v-if="order.erpDocCode">
-						<text class="l">ERP 单号</text>
-						<text class="v selectable erp-no">{{ order.erpDocCode }}</text>
-					</view>
+					<view class="data-item"><text class="l">单据编号</text><text class="v selectable">{{ order.docCode || '-' }}</text></view>
 					<view class="data-item"><text class="l">下单日期</text><text class="v">{{ order.time }}</text></view>
 					<view class="data-item"><text class="l">下单日期</text><text class="v">{{ order.time }}</text></view>
 					<view class="data-item"><text class="l">支付方式</text><text class="v">月结扣款</text></view>
 					<view class="data-item"><text class="l">支付方式</text><text class="v">月结扣款</text></view>
 				</view>
 				</view>
@@ -64,8 +62,7 @@
 
 
 		<!-- 3. 底部固定操作栏 -->
 		<!-- 3. 底部固定操作栏 -->
 		<view class="detail-action-bar-fixed" id="footer-bar">
 		<view class="detail-action-bar-fixed" id="footer-bar">
-			<view class="action-btn-wrap" v-if="order.status === 0">
-				<button class="action-btn cancel" @click="doCancel">撤销该订单</button>
+			<view class="action-btn-wrap single" v-if="order.isConfirmed === 0">
 				<button class="action-btn primary" @click="callSales">呼叫业务员</button>
 				<button class="action-btn primary" @click="callSales">呼叫业务员</button>
 			</view>
 			</view>
 			<view class="action-btn-wrap single" v-else>
 			<view class="action-btn-wrap single" v-else>
@@ -91,7 +88,8 @@ export default {
 			salesPhone: '',
 			salesPhone: '',
 			order: {
 			order: {
 				orderNo: '-',
 				orderNo: '-',
-				status: 1,
+				docCode: '',
+				isConfirmed: 1,
 				statusName: '加载中',
 				statusName: '加载中',
 				statusType: 'pending',
 				statusType: 'pending',
 				models: [],
 				models: [],
@@ -103,12 +101,13 @@ export default {
 	computed: {
 	computed: {
 		statusSubText() {
 		statusSubText() {
 			const map = {
 			const map = {
-				pending: '您的订单已提交,正在排队等待审核...',
-				expired: '该订单已被驳回。',
-				cancelled: '该订单已被撤销。',
-				process: '审核已完成,正在由相关主管签批...',
-				making: '订单已入库排产,工厂正在全力生产中...',
-				finish: '该订单生产已完成并正式入库。'
+				pending: '您的订单已提交,正在等待管理端同步确认中...',
+				finish: '订单已确认,并已成功同步到 ERP 系统中。',
+				approved: '订单已在 ERP 系统中审核通过。',
+				reviewed: '订单已由相关负责人签批。',
+				exFinished: '订单关联的产品型材已挤压完成。',
+				productionFinish: '订单所含产品型材已全部生产完成!',
+				cancelled: '该订单已被撤销。'
 			};
 			};
 			return map[this.order.statusType] || '订单状态更新中';
 			return map[this.order.statusType] || '订单状态更新中';
 		},
 		},
@@ -138,29 +137,32 @@ export default {
 					return;
 					return;
 				}
 				}
 
 
-				// 状态展示映射(与 ErpOrderStatus 枚举对齐)
+				// 状态展示映射
 				const statusMap = {
 				const statusMap = {
-					'-1': { name: '已撤销', type: 'cancelled' },
-					0: { name: '待审核', type: 'pending' },
-					1: { name: '已驳回', type: 'expired' },
-					2: { name: '待签批', type: 'process' },
-					3: { name: '生产中', type: 'making' },
-					4: { name: '已完成', type: 'finish' }
+					0: { name: '待确认', type: 'pending' },
+					1: { name: '已确认', type: 'finish' },
+					2: { name: '已审核', type: 'approved' },
+					3: { name: '已签批', type: 'reviewed' },
+					4: { name: '挤压完成', type: 'exFinished' },
+					5: { name: '生产完成', type: 'productionFinish' },
+					6: { name: '已取消', type: 'cancelled' }
 				};
 				};
-				const s = statusMap[data.status] || { name: '未知', type: 'expired' };
+				const s = statusMap[data.status] || { name: '待确认', type: 'pending' };
 
 
 				this.order = {
 				this.order = {
 					orderNo: data.code || '-',
 					orderNo: data.code || '-',
+					docCode: data.docCode || '',
 					rowId: data.rowId,
 					rowId: data.rowId,
-					status: data.status,
+					isConfirmed: data.isConfirmed,
 					statusName: s.name,
 					statusName: s.name,
 					statusType: s.type,
 					statusType: s.type,
 					time: data.createTime || '-',
 					time: data.createTime || '-',
 					totalCount: data.totalCount || 0,
 					totalCount: data.totalCount || 0,
-					erpDocCode: data.erpDocCode || '',
 					models: (data.details || []).map(d => ({
 					models: (data.details || []).map(d => ({
 						type: d.modelNum || '未知型号',
 						type: d.modelNum || '未知型号',
 						typeName: d.modelName || '铝型材主料',
 						typeName: d.modelName || '铝型材主料',
+						docCode: d.docCode || '',
+						itemNo: d.itemNo || '',
 						material: d.material || '6063-T5',
 						material: d.material || '6063-T5',
 						surface: d.surfaceName || '无',
 						surface: d.surfaceName || '无',
 						package: d.packName || '普通包装',
 						package: d.packName || '普通包装',
@@ -177,21 +179,7 @@ export default {
 			}
 			}
 		},
 		},
 		goBack() { uni.navigateBack(); },
 		goBack() { uni.navigateBack(); },
-		doCancel() {
-			uni.showModal({
-				title: '确认撤销',
-				content: '确定要撤销该订单吗?',
-				confirmColor: '#ff3b30',
-				success: (res) => {
-					if (res.confirm) {
-						this.order.status = -1;
-						this.order.statusName = '已撤销';
-						this.order.statusType = 'cancelled';
-						uni.showToast({ title: '撤销成功' });
-					}
-				}
-			});
-		},
+
 		callSales() { uni.makePhoneCall({ phoneNumber: this.salesPhone }); },
 		callSales() { uni.makePhoneCall({ phoneNumber: this.salesPhone }); },
 		goHome() { uni.reLaunch({ url: '/pages/order/index' }); },
 		goHome() { uni.reLaunch({ url: '/pages/order/index' }); },
 		async loadPhone() {
 		async loadPhone() {
@@ -233,27 +221,31 @@ export default {
 }
 }
 
 
 .status-banner-container.pending {
 .status-banner-container.pending {
-	background: linear-gradient(135deg, #C1001C 0%, #FF4D4F 100%);
+	background: linear-gradient(135deg, #FF9900 0%, #FFB84D 100%);
 }
 }
 
 
-.status-banner-container.process {
-	background: linear-gradient(135deg, #FF6A00 0%, #EE0979 100%);
+.status-banner-container.finish {
+	background: linear-gradient(135deg, #1890FF 0%, #69C0FF 100%);
 }
 }
 
 
-.status-banner-container.making {
-	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+.status-banner-container.approved {
+	background: linear-gradient(135deg, #52C41A 0%, #95DE64 100%);
 }
 }
 
 
-.status-banner-container.finish {
-	background: linear-gradient(135deg, #2af598 0%, #009efd 100%);
+.status-banner-container.reviewed {
+	background: linear-gradient(135deg, #722ED1 0%, #B37FEB 100%);
+}
+
+.status-banner-container.exFinished {
+	background: linear-gradient(135deg, #13C2C2 0%, #5CDBD3 100%);
 }
 }
 
 
-.status-banner-container.expired {
-	background: linear-gradient(135deg, #868f96 0%, #596164 100%);
+.status-banner-container.productionFinish {
+	background: linear-gradient(135deg, #2F54EB 0%, #85A5FF 100%);
 }
 }
 
 
 .status-banner-container.cancelled {
 .status-banner-container.cancelled {
-	background: linear-gradient(135deg, #a0a0a0 0%, #666666 100%);
+	background: linear-gradient(135deg, #F5222D 0%, #FF7875 100%);
 }
 }
 
 
 /* 状态横幅内容 */
 /* 状态横幅内容 */

+ 51 - 108
pages/order/list/index.vue

@@ -2,21 +2,21 @@
 	<view class="list-page-container">
 	<view class="list-page-container">
 		<erp-nav-bar title="全部订单" />
 		<erp-nav-bar title="全部订单" />
 
 
-		<!-- 2. 分类切换:使用翻译位移,彻底消除红框2残影 -->
-		<view class="tabs-fixed">
+		<!-- 2. 分类切换:使用 scroll-view 滚动,彻底释放所有综合状态 -->
+		<scroll-view scroll-x class="tabs-fixed" :show-scrollbar="false" :scroll-with-animation="true" :scroll-into-view="'tab-' + currentTab">
 			<view class="tabs-box">
 			<view class="tabs-box">
-				<view v-for="(tab, index) in tabs" :key="index" class="tab-item"
+				<view v-for="(tab, index) in tabs" :key="index" :id="'tab-' + index" class="tab-item"
 					:class="{ active: currentTab === index }" @click="switchTab(index)">
 					:class="{ active: currentTab === index }" @click="switchTab(index)">
 					<text class="tab-txt">{{ tab }}</text>
 					<text class="tab-txt">{{ tab }}</text>
 				</view>
 				</view>
-				<!-- 指示器:只负责位移,不负责显隐,彻底杜绝虚影 -->
+				<!-- 指示器:只负责等宽位移,彻底消除虚影与错位 -->
 				<view class="indicator-track">
 				<view class="indicator-track">
-					<view class="indicator-bar" :style="{ transform: 'translateX(' + (currentTab * 100) + '%)' }">
+					<view class="indicator-bar" :style="{ transform: 'translateX(' + (currentTab * 140) + 'rpx)' }">
 						<view class="bar-inner"></view>
 						<view class="bar-inner"></view>
 					</view>
 					</view>
 				</view>
 				</view>
 			</view>
 			</view>
-		</view>
+		</scroll-view>
 
 
 		<!-- 3. 固定高度的滚动区:强制启用滚动,解决不能滑动问题 -->
 		<!-- 3. 固定高度的滚动区:强制启用滚动,解决不能滑动问题 -->
 		<scroll-view scroll-y class="order-scroll-view" :style="{ height: scrollHeight }" @scrolltolower="onReachEnd"
 		<scroll-view scroll-y class="order-scroll-view" :style="{ height: scrollHeight }" @scrolltolower="onReachEnd"
@@ -49,9 +49,6 @@
 					<view class="card-foot">
 					<view class="card-foot">
 						<text class="time">{{ item.time }}</text>
 						<text class="time">{{ item.time }}</text>
 						<view class="btns">
 						<view class="btns">
-							<view class="btn-audit" v-if="item.status > 0" @click.stop="showAuditHistory(item)">审核记录
-							</view>
-							<view class="btn-cancel" v-if="item.status === 0" @click.stop="onCancel(item)">撤销</view>
 							<view class="btn-view primary" @click.stop="goDetail(item)">订单详情</view>
 							<view class="btn-view primary" @click.stop="goDetail(item)">订单详情</view>
 						</view>
 						</view>
 					</view>
 					</view>
@@ -81,40 +78,13 @@
 
 
 		<!-- 底部菜单栏 -->
 		<!-- 底部菜单栏 -->
 		<!-- <erp-tab-bar active="order"></erp-tab-bar> -->
 		<!-- <erp-tab-bar active="order"></erp-tab-bar> -->
-
-		<!-- 审核记录弹窗 -->
-		<view class="overlay" v-if="auditHistoryVisible" @click="auditHistoryVisible = false">
-			<view class="audit-history-modal" @click.stop>
-				<view class="modal-head">
-					<text class="modal-title">审核记录</text>
-					<text class="modal-close" @click="auditHistoryVisible = false">关闭</text>
-				</view>
-				<scroll-view scroll-y class="modal-body">
-					<view class="audit-item" v-for="(item, idx) in auditHistoryList" :key="idx">
-						<view class="audit-dot" :class="item.auditResult === 1 ? 'pass' : 'reject'"></view>
-						<view class="audit-content">
-							<view class="audit-row">
-								<text class="audit-result" :class="item.auditResult === 1 ? 'pass' : 'reject'">{{
-									item.auditResult === 1 ? '通过' : '驳回' }}</text>
-								<text class="audit-auditor">{{ item.auditorName || '未知' }}</text>
-							</view>
-							<text class="audit-reason" v-if="item.rejectReason">驳回理由:{{ item.rejectReason }}</text>
-							<text class="audit-time">{{ item.auditTime }}</text>
-						</view>
-					</view>
-					<view class="audit-empty" v-if="auditHistoryList.length === 0">
-						<text>暂无审核记录</text>
-					</view>
-				</scroll-view>
-			</view>
-		</view>
 	</view>
 	</view>
 </template>
 </template>
 
 
 <script>
 <script>
 import ErpTabBar from '@/components/erp-tab-bar.vue';
 import ErpTabBar from '@/components/erp-tab-bar.vue';
 import ErpNavBar from '@/components/erp-nav-bar.vue';
 import ErpNavBar from '@/components/erp-nav-bar.vue';
-import { listMyOrder, cancelOrder, getAuditHistory } from '@/api/erp/order.js';
+import { listMyOrder } from '@/api/erp/order.js';
 export default {
 export default {
 	components: { ErpTabBar, ErpNavBar },
 	components: { ErpTabBar, ErpNavBar },
 	data() {
 	data() {
@@ -126,11 +96,9 @@ export default {
 			loading: false,
 			loading: false,
 			noMore: false,
 			noMore: false,
 			pageNum: 1,
 			pageNum: 1,
-			tabs: ['全部', '已撤销', '待审核', '已驳回', '待签批', '生产中', '已完成'],
+			tabs: ['全部', '待确认', '已确认', '已审核', '已签批', '挤压完成', '生产完成', '已取消'],
 			allOrders: [],
 			allOrders: [],
-			displayList: [],
-			auditHistoryVisible: false,
-			auditHistoryList: []
+			displayList: []
 		}
 		}
 	},
 	},
 	computed: {
 	computed: {
@@ -162,22 +130,24 @@ export default {
 					pageSize: 5
 					pageSize: 5
 				};
 				};
 				if (this.currentTab > 0) {
 				if (this.currentTab > 0) {
-					const tabToStatus = [undefined, -1, 0, 1, 2, 3, 4];
-					params.status = tabToStatus[this.currentTab];
+					// 对应 status:0-待确认 1-已确认 2-已审核 3-已签批 4-挤压完成 5-生产完成 6-已取消
+					const indexToStatus = [undefined, 0, 1, 2, 3, 4, 5, 6];
+					params.status = indexToStatus[this.currentTab];
 				}
 				}
 				const res = await listMyOrder(params);
 				const res = await listMyOrder(params);
 				const rows = res.rows || [];
 				const rows = res.rows || [];
 
 
 				const formattedRows = rows.map(item => {
 				const formattedRows = rows.map(item => {
 					const statusMap = {
 					const statusMap = {
-						'-1': { name: '已撤销', type: 'cancelled' },
-						0: { name: '待审核', type: 'pending' },
-						1: { name: '已驳回', type: 'expired' },
-						2: { name: '待签批', type: 'process' },
-						3: { name: '生产中', type: 'making' },
-						4: { name: '已完成', type: 'finish' }
+						0: { name: '待确认', type: 'pending' },
+						1: { name: '已确认', type: 'finish' },
+						2: { name: '已审核', type: 'approved' },
+						3: { name: '已签批', type: 'reviewed' },
+						4: { name: '挤压完成', type: 'exFinished' },
+						5: { name: '生产完成', type: 'productionFinish' },
+						6: { name: '已取消', type: 'cancelled' }
 					};
 					};
-					const s = statusMap[item.status] || { name: '未知', type: 'expired' };
+					const s = statusMap[item.status] || { name: '待确认', type: 'pending' };
 
 
 					return {
 					return {
 						orderNo: item.code,
 						orderNo: item.code,
@@ -206,40 +176,6 @@ export default {
 				this.loading = false;
 				this.loading = false;
 			}
 			}
 		},
 		},
-		async onCancel(item) {
-			uni.showModal({
-				title: '确认撤销',
-				content: `确认要撤销订单:${item.orderNo} 吗?`,
-				confirmColor: '#ff4d4f',
-				success: async (res) => {
-					if (res.confirm) {
-						uni.showLoading({ title: '撤销中' });
-						try {
-							await cancelOrder(item.rowId);
-							uni.hideLoading();
-							uni.showToast({ title: '已撤销', icon: 'success' });
-							this.refresh();
-						} catch (e) {
-							uni.hideLoading();
-							uni.showToast({ title: e || '撤销失败', icon: 'none' });
-						}
-					}
-				}
-			});
-		},
-		async showAuditHistory(item) {
-			uni.showLoading({ title: '加载中' });
-			try {
-				const res = await getAuditHistory(item.rowId);
-				this.auditHistoryList = res.data || [];
-			} catch (e) {
-				uni.showToast({ title: e || '加载审核记录失败', icon: 'none' });
-				this.auditHistoryList = [];
-			} finally {
-				uni.hideLoading();
-				this.auditHistoryVisible = true;
-			}
-		},
 		goDetail(item) {
 		goDetail(item) {
 			uni.navigateTo({
 			uni.navigateTo({
 				url: `/pages/order/detail/index?rowId=${item.rowId}`
 				url: `/pages/order/detail/index?rowId=${item.rowId}`
@@ -268,26 +204,28 @@ export default {
 }
 }
 
 
 
 
-/* 2. 选项卡:解决残影红框2 */
+/* 2. 选项卡:彻底解决残影红框2并支持 8 档横向滚动 */
 .tabs-fixed {
 .tabs-fixed {
 	background: #fff;
 	background: #fff;
 	width: 100%;
 	width: 100%;
 	flex-shrink: 0;
 	flex-shrink: 0;
 	border-bottom: 1rpx solid #f0f0f0;
 	border-bottom: 1rpx solid #f0f0f0;
+	white-space: nowrap;
 }
 }
 
 
 .tabs-box {
 .tabs-box {
 	height: 110rpx;
 	height: 110rpx;
 	position: relative;
 	position: relative;
-	display: flex;
-	width: 100%;
+	display: inline-flex;
 }
 }
 
 
 .tab-item {
 .tab-item {
-	flex: 1;
+	width: 140rpx;
+	height: 100%;
 	display: flex;
 	display: flex;
 	align-items: center;
 	align-items: center;
 	justify-content: center;
 	justify-content: center;
+	flex-shrink: 0;
 	z-index: 5;
 	z-index: 5;
 }
 }
 
 
@@ -303,18 +241,18 @@ export default {
 	font-size: 32rpx;
 	font-size: 32rpx;
 }
 }
 
 
-/* 指示器轨道:通过位移消除虚影 */
+/* 指示器轨道:等比平移消除虚影 */
 .indicator-track {
 .indicator-track {
 	position: absolute;
 	position: absolute;
 	bottom: 10rpx;
 	bottom: 10rpx;
 	left: 0;
 	left: 0;
 	width: 100%;
 	width: 100%;
 	height: 6rpx;
 	height: 6rpx;
-	display: flex;
+	pointer-events: none;
 }
 }
 
 
 .indicator-bar {
 .indicator-bar {
-	width: 14.285%;
+	width: 140rpx;
 	height: 100%;
 	height: 100%;
 	display: flex;
 	display: flex;
 	align-items: center;
 	align-items: center;
@@ -367,33 +305,38 @@ export default {
 }
 }
 
 
 .status-badge.pending {
 .status-badge.pending {
-	background: #FFF1F2;
-	color: #C1001C;
+	background: #FFF7E6;
+	color: #FF9900;
 }
 }
 
 
-.status-badge.expired {
-	background: #f5f5f5;
-	color: #999;
+.status-badge.finish {
+	background: #E6F7FF;
+	color: #1890FF;
 }
 }
 
 
-.status-badge.cancelled {
-	background: #f0f0f0;
-	color: #666;
+.status-badge.approved {
+	background: #F6FFED;
+	color: #52C41A;
 }
 }
 
 
-.status-badge.process {
-	background: #fff7e6;
-	color: #ffa940;
+.status-badge.reviewed {
+	background: #F9F0FF;
+	color: #722ED1;
 }
 }
 
 
-.status-badge.making {
-	background: #e6fffb;
-	color: #36cfc9;
+.status-badge.exFinished {
+	background: #E6FFF9;
+	color: #13C2C2;
 }
 }
 
 
-.status-badge.finish {
-	background: #f6ffed;
-	color: #52c41a;
+.status-badge.productionFinish {
+	background: #EEF2FE;
+	color: #2F54EB;
+}
+
+.status-badge.cancelled {
+	background: #FFF1F0;
+	color: #F5222D;
 }
 }
 
 
 .card-body {
 .card-body {