feat: update style

sanmu
1 parent 16f44981
Showing 7 changed files with 114 additions and 45 deletions
src/views/project/order/FormDetail/BaseFormPanel.vue
src/views/project/order/FormDetail/InspectionFormPanel.vue
src/views/project/order/FormDetail/ProfitFormPanel.vue
src/views/project/order/FormDetail/ReportFormPanel.vue
src/views/project/order/FormDetail/TrackFormPanel.vue
src/views/project/order/index.vue
src/views/project/order/tableData.tsx
@@ -106,6 +106,7 @@
         useForm({
           labelWidth: 120,
           schemas,
+          layout: 'vertical',
           showActionButtonGroup: false,
           actionColOptions: {
             span: 24,
@@ -49,6 +49,7 @@
       const [registerForm, { setFieldsValue, getFieldsValue, resetFields }] = useForm({
         labelWidth: 120,
         schemas,
+        layout: 'vertical',
         showActionButtonGroup: false,
         actionColOptions: {
           span: 24,
@@ -46,6 +46,7 @@
       const [registerForm, { setFieldsValue, getFieldsValue, resetFields }] = useForm({
         labelWidth: 120,
         schemas,
+        layout: 'vertical',
         showActionButtonGroup: false,
         actionColOptions: {
           span: 24,
@@ -57,6 +57,7 @@
       const [registerForm, { setFieldsValue, getFieldsValue }] = useForm({
         labelWidth: 120,
         schemas,
+        layout: 'vertical',
         showActionButtonGroup: false,
         actionColOptions: {
           span: 24,
@@ -38,6 +38,7 @@
       const [registerForm, { setFieldsValue, getFieldsValue, resetFields }] = useForm({
         labelWidth: 120,
         schemas,
+        layout: 'vertical',
         showActionButtonGroup: false,
         actionColOptions: {
           span: 24,
 <template>
-  <div>
+  <div class="order-page">
     <BasicTable @register="registerTable" bordered>
       <template #headerCell="{ column }">
         <!-- <template v-if="column.key === 'address1'">
@@ -340,5 +340,9 @@
     width: 100px;
     height: 100px;
   }
+
+  .order-page .vben-basic-table .ant-form-item .ant-picker {
+    width: 100%;
+  }
 </style>
 ./constant
@@ -484,6 +484,15 @@ const ORDER_LIST_INSPECT_FIELDS = [
     ],
   },
 ];
+
+const ORDER_LIST_SCHEDULE = [
+  {
+    title: '进度条',
+    width: 100,
+    dataIndex: 'schedule',
+  },
+];
+
 export function getOrderColumns(role: ROLE) {
   if (role === ROLE.ADMIN || role === ROLE.BUSINESS) {
     return [
@@ -492,6 +501,7 @@ export function getOrderColumns(role: ROLE) {
       ...ORDER_LIST_REPORT_FIELDS,
       ...ORDER_LIST_TRACK_FIELDS,
       ...ORDER_LIST_INSPECT_FIELDS,
+      ...ORDER_LIST_SCHEDULE,
     ];
   }
@@ -507,11 +517,17 @@ export function getOrderColumns(role: ROLE) {
       }),
       ...ORDER_LIST_TRACK_FIELDS,
       ...ORDER_LIST_INSPECT_FIELDS,
+      ...ORDER_LIST_SCHEDULE,
     ];
   }
   if (role === ROLE.INSPECT) {
-    return [...ORDER_LIST_BASE_FIELDS, ...ORDER_LIST_TRACK_FIELDS, ...ORDER_LIST_INSPECT_FIELDS];
+    return [
+      ...ORDER_LIST_BASE_FIELDS,
+      ...ORDER_LIST_TRACK_FIELDS,
+      ...ORDER_LIST_INSPECT_FIELDS,
+      ...ORDER_LIST_SCHEDULE,
+    ];
   }
   return [];
@@ -522,66 +538,77 @@ export const FIELDS_BASE_INFO = [
   {
     field: 'customerCode',
     component: 'Select',
+    labelWidth: 150,
     label: '客户编码',
     rules: [{ required: true }],
   },
   {
     field: 'projectNo',
     component: 'Select',
+    labelWidth: 150,
     label: '项目号',
     rules: [{ required: true }],
   },
   {
     field: 'productionDepartment',
     component: 'Select',
+    labelWidth: 150,
     label: '生产科',
     rules: [{ required: true }],
   },
   {
     field: 'modeleLo',
     component: 'Input',
+    labelWidth: 150,
     label: 'Modelo(REFERENCE)',
     rules: [{ required: true }],
   },
   {
     field: 'innerNo',
     component: 'Select',
+    labelWidth: 150,
     label: '内部编号',
     rules: [{ required: true }],
   },
   {
     field: 'customerPo',
     component: 'Input',
+    labelWidth: 150,
     label: '客户po号',
     rules: [{ required: true }],
   },
   {
     field: 'customerStyle',
     component: 'Input',
+    labelWidth: 150,
     label: '客户STYLE',
     rules: [{ required: true }],
   },
   {
     field: 'collection',
     component: 'Input',
+    labelWidth: 250,
     label: 'COLLECTION (style description)',
     rules: [{ required: true }],
   },
   {
     field: 'poColor',
     component: 'Select',
+    labelWidth: 150,
     label: 'PO COLOR',
     rules: [{ required: true }],
   },
   {
     field: 'cnColor',
     component: 'Select',
+    labelWidth: 150,
     label: '颜色中文',
     rules: [{ required: true }],
   },
   {
     field: 'picUrl',
     component: 'FieldUpload',
+    labelWidth: 150,
     label: '图片',
     rules: [{ required: true }],
   },
@@ -589,35 +616,41 @@ export const FIELDS_BASE_INFO = [
     field: 'productionComment',
     component: 'Input',
     rules: [{ required: true }],
+    labelWidth: 150,
     label: '生产要求',
   },
   {
     field: 'orderCount',
     component: 'InputNumber',
     rules: [{ required: true }],
+    labelWidth: 150,
     label: '数量',
   },
   {
     field: 'orderComposition',
     component: 'Input',
     rules: [{ required: true }],
+    labelWidth: 150,
     label: '订单成分',
   },
   {
     field: 'productStyle',
     component: 'Select',
     rules: [{ required: true }],
+    labelWidth: 150,
     label: '款式类型',
   },
   {
     field: 'productionDepartmentConsignTime',
     component: 'DatePicker',
+    labelWidth: 150,
     label: '生成科拖货时间',
     rules: [{ required: true }],
   },
   {
     field: 'orderHodTime',
     component: 'DatePicker',
+    labelWidth: 150,
     label: '订单上HOD时间',
     rules: [{ required: true }],
@@ -625,6 +658,7 @@ export const FIELDS_BASE_INFO = [
   {
     field: 'outboundType',
     component: 'Select',
+    labelWidth: 150,
     label: '出库类型',
     rules: [{ required: true }],
@@ -632,6 +666,7 @@ export const FIELDS_BASE_INFO = [
   {
     field: 'packetType',
     component: 'Select',
+    labelWidth: 150,
     label: '包装类型',
     rules: [{ required: true }],
   },
@@ -643,6 +678,7 @@ export const FIELDS_REPORT_INFO = [
     field: 'ideaSource',
     component: 'Select',
     optionField: 'ideaSource',
+    labelWidth: 150,
     label: '想法来源',
     // rules: [{ required: true }],
   },
@@ -650,12 +686,14 @@ export const FIELDS_REPORT_INFO = [
     field: 'manualPreform',
     component: 'Select',
     optionField: 'manualPreform',
+    labelWidth: 150,
     label: '手工初型',
     // rules: [{ required: true }],
   },
   {
     field: 'ideaManualRate',
     component: 'Input',
+    labelWidth: 150,
     label: '想法和手工比例分配',
     // rules: [{ required: true }],
   },
@@ -685,11 +723,13 @@ export const FIELDS_TRACK_STAGE_INFO = [
     field: 'esoSampleSendTime',
     component: 'DatePicker',
     label: 'EXTRA,SHOWROOM,ONLINE sample发送时间',
+    labelWidth: 350,
   },
   {
     field: 'shippmentSampleSendTime',
     component: 'DatePicker',
     label: 'shippment sample 发送时间',
+    labelWidth: 250,
   },
   {
     field: 'shippmentSampleConfirmResult',
@@ -703,6 +743,7 @@ export const FIELDS_TRACK_STAGE_INFO = [
       ],
     },
     label: 'shipment sample确认意见',
+    labelWidth: 250,
   },
   {
     field: 'selfTestPassTime',
@@ -749,6 +790,7 @@ export const FIELDS_TRACK_STAGE_INFO = [
     field: 'barcodeStickerArrivalTime',
     component: 'DatePicker',
     label: 'Barcode sticker arrival time',
+    labelWidth: 250,
     componentProps: {
       options: [
         {
@@ -770,6 +812,7 @@ export const FIELDS_TRACK_STAGE_INFO = [
       ],
     },
     label: '最晚包材到货时间',
+    labelWidth: 250,
   },
   {
     field: 'latestBkTime',
@@ -783,6 +826,7 @@ export const FIELDS_TRACK_STAGE_INFO = [
       ],
     },
     label: '最晚订舱+报关资料时间',
+    labelWidth: 250,
   },
 ];
@@ -822,7 +866,7 @@ export const FIELDS_PROFIT_INFO = [
     field: 'productionDepartmentCurrency',
     component: 'Select',
     label: '生成科货币单位',
-    rules: [{ required: true }],
+    // rules: [{ required: true }],
     componentProps: {
       options: [
         { label: '$', value: '$' },
@@ -887,6 +931,7 @@ export const FIELDS_INSPECTION_INFO = [
     component: 'Input',
     label: '中期验货（功能性-拉力/跌落等、外观性-颜色/规格等、耐久性-烤厅等）',
     // rules: [{ required: true }],
+    labelWidth: 400,
   },
   {
     field: 'midCheckResult',
@@ -941,11 +986,13 @@ export const FIELDS_INSPECTION_INFO = [
     field: 'boxPacket',
     component: 'Input',
     label: '包装：卡片、条码、箱贴，箱单',
+    labelWidth: 300,
     // rules: [{ required: true }],
   },
   {
     field: 'endCheckResult',
     component: 'Select',
+    labelWidth: 250,
     label: '尾期验货结果PASS / FAIL',
     optionField: 'endCheckResult',
     // rules: [{ required: true }],
@@ -978,28 +1025,31 @@ export function getFormConfig(): Partial&lt;FormProps&gt; {
         field: `createStartTime`,
         label: `生成开始时间`,
         component: 'DatePicker',
+        widhth: '100%',
+        style: { width: '100%' },
         colProps: {
-          xl: 8,
-          xxl: 8,
+          span: 6,
         },
+        labelWidth: 150,
       },
       {
         field: `createEndTime`,
         label: `生成结束时间`,
         component: 'DatePicker',
         colProps: {
-          xl: 8,
-          xxl: 8,
+          span: 6,
         },
+        labelWidth: 150,
       },
       {
         field: `orderStatus`,
         label: `单据状态`,
         component: 'Select',
         colProps: {
-          xl: 12,
-          xxl: 8,
+          span: 6,
         },
+        labelWidth: 150,
+
         componentProps: {
           options: [
             { label: '订单创建完成', value: 0 },
@@ -1022,27 +1072,28 @@ export function getFormConfig(): Partial&lt;FormProps&gt; {
         label: `提交人名称`,
         component: 'Input',
         colProps: {
-          xl: 12,
-          xxl: 8,
+          span: 6,
         },
+        labelWidth: 150,
       },
       {
         field: `commitUserPhone`,
         label: `提交人手机号码`,
         component: 'Input',
         colProps: {
-          xl: 12,
-          xxl: 8,
+          span: 6,
         },
+        labelWidth: 150,
       },
       {
         field: `customerCode`,
         label: `客户编码`,
         component: 'Select',
         colProps: {
-          xl: 12,
-          xxl: 8,
+          span: 6,
         },
+        labelWidth: 150,
+
         componentProps: {
           options: customerCode,
         },
@@ -1052,9 +1103,10 @@ export function getFormConfig(): Partial&lt;FormProps&gt; {
         label: `项目号`,
         component: 'Select',
         colProps: {
-          xl: 12,
-          xxl: 8,
+          span: 6,
         },
+        labelWidth: 150,
+
         componentProps: {
           options: projectNo,
         },
@@ -1064,9 +1116,10 @@ export function getFormConfig(): Partial&lt;FormProps&gt; {
         label: `生产科`,
         component: 'Select',
         colProps: {
-          xl: 12,
-          xxl: 8,
+          span: 6,
         },
+        labelWidth: 150,
+
         componentProps: {
           options: productionDepartment,
         },
@@ -1076,18 +1129,19 @@ export function getFormConfig(): Partial&lt;FormProps&gt; {
         label: `生成科拖货开始时间`,
         component: 'DatePicker',
         colProps: {
-          xl: 12,
-          xxl: 8,
+          span: 6,
         },
+        labelWidth: 150,
       },
       {
         field: `productionDepartmentConsignEndTime`,
         label: `生成科拖货结束时间`,
         component: 'DatePicker',
         colProps: {
-          xl: 12,
-          xxl: 8,
+          span: 6,
         },
+        labelWidth: 150,
+
         componentProps: {
           options: customerCode,
         },
@@ -1097,45 +1151,46 @@ export function getFormConfig(): Partial&lt;FormProps&gt; {
         label: `订单上HOD开始时间`,
         component: 'DatePicker',
         colProps: {
-          xl: 12,
-          xxl: 8,
+          span: 6,
         },
+        labelWidth: 150,
       },
       {
         field: `orderHodEndTime`,
         label: `订单上HOD结束时间`,
         component: 'DatePicker',
         colProps: {
-          xl: 12,
-          xxl: 8,
+          span: 6,
         },
+        labelWidth: 150,
       },
       {
         field: `profitRateLqt`,
         label: `最小利润率`,
         component: 'InputNumber',
         colProps: {
-          xl: 12,
-          xxl: 8,
+          span: 6,
         },
+        labelWidth: 150,
       },
       {
         field: `profitRateGqt`,
         label: `最大利润率`,
         component: 'InputNumber',
         colProps: {
-          xl: 12,
-          xxl: 8,
+          span: 6,
         },
+        labelWidth: 150,
       },
       {
         field: `ideaSource`,
         label: `想法来源`,
         component: 'Select',
         colProps: {
-          xl: 12,
-          xxl: 8,
+          span: 6,
         },
+        labelWidth: 150,
+
         componentProps: {
           options: ideaSource,
         },
@@ -1145,9 +1200,10 @@ export function getFormConfig(): Partial&lt;FormProps&gt; {
         label: `手工初型`,
         component: 'Select',
         colProps: {
-          xl: 12,
-          xxl: 8,
+          span: 6,
         },
+        labelWidth: 150,
+
         componentProps: {
           options: manualPreform,
         },
@@ -1157,9 +1213,10 @@ export function getFormConfig(): Partial&lt;FormProps&gt; {
         label: `pp样品确认意见`,
         component: 'Select',
         colProps: {
-          xl: 12,
-          xxl: 8,
+          span: 6,
         },
+        labelWidth: 150,
+
         componentProps: {
           options: [
             {
@@ -1174,18 +1231,19 @@ export function getFormConfig(): Partial&lt;FormProps&gt; {
         label: `自测通过开始时间`,
         component: 'DatePicker',
         colProps: {
-          xl: 12,
-          xxl: 8,
+          span: 6,
         },
+        labelWidth: 150,
       },
       {
         field: `selfTestPassEndTime`,
         label: `自测通过结束时间`,
         component: 'DatePicker',
         colProps: {
-          xl: 12,
-          xxl: 8,
+          span: 6,
         },
+        labelWidth: 150,
+
         componentProps: {
           options: customerCode,
         },
@@ -1195,9 +1253,10 @@ export function getFormConfig(): Partial&lt;FormProps&gt; {
         label: `中期验货结果`,
         component: 'Select',
         colProps: {
-          xl: 12,
-          xxl: 8,
+          span: 6,
         },
+        labelWidth: 150,
+
         componentProps: {
           options: midCheckResult,
         },
@@ -1207,9 +1266,10 @@ export function getFormConfig(): Partial&lt;FormProps&gt; {
         label: `尾期验货结果`,
         component: 'Select',
         colProps: {
-          xl: 12,
-          xxl: 8,
+          span: 6,
         },
+        labelWidth: 150,
+
         componentProps: {
           options: endCheckResult,
         },