fix: 样式修改

253f46ce · qinjianhui · 0d7b48e1 · 253f46ce · 253f46ce · 253f46ce
Commit 253f46ce authored Mar 18, 2026 by qinjianhui
5 changed files
--- a/.cursor/rules/factory-rule.mdc
+++ b/.cursor/rules/factory-rule.mdc
@@ -9,10 +9,10 @@ alwaysApply: true
 Vue3 + Element Plus + Pinia + Axios + TypeScript + Vite
 ## UI 相关编码要求
 -- 当有上下两个子表时，使用 `src/components/splitDiv/splitDiv.vue` 组件，使用时注意传递对应的 props 和插槽
-- 所有按钮都需要使用 `span` 标签包裹，并添加 `class="item"` 类名
-- 所有按钮都需要使用 `type` 属性，并且值为 `primary`、`success`、`warning`、`danger`
 -- 表格相关布局时，使用 `src/components/TableView.vue` 组件，使用时注意传递对应的 props 和插槽
+-- `ElDialog`组件中`footer`插槽都放在中间位置
 ## 接口相关

--- a/src/views/order/factoryOrderNew/component/PickCompleteDialog.vue
+++ b/src/views/order/factoryOrderNew/component/PickCompleteDialog.vue
@@ -6,27 +6,21 @@
    :close-on-click-modal="false"
    @close="handleClose"
  >
-    <div class="pick-complete-tip">
-      根据拣胚情况分三种提示：
-    </div>
-    <div class="pick-complete-hints">
-      <div>情况1文案：本次选择的操作单可以直接拣胚完成</div>
-      <div>情况2文案：本次选择的操作单只能部分拣胚完成</div>
-      <div>情况3文案：本次选择操作单库存不足，无法拣胚完成</div>
-    </div>
    <div class="pick-complete-actions" style="margin-bottom: 10px">
-      <ElButton type="primary" @click="handleCreateInbound">
+      <span class="item">
-        创建入库单
+        <ElButton type="success" @click="handleCreateInbound">
-      </ElButton>
+          创建入库单
+        </ElButton>
+      </span>
    </div>
+    <div class="table-view">
-    <ElTable :data="tableData" border style="width: 100%">
+      <TableView
-      <ElTableColumn type="selection" width="40" />
+        :paginated-data="tableData"
-      <ElTableColumn type="index" label="序号" width="60" align="center" />
+        :columns="columns"
-      <ElTableColumn prop="warehouseName" label="仓库名称" min-width="100" />
+        serial-numberable
-      <ElTableColumn label="SKU图片" width="80" align="center">
+        selectionable
-        <template #default="{ row }">
+      >
+        <template #skuImage="{ row }">
          <el-image
            v-if="row.skuImage"
            :src="row.skuImage"
@@ -36,43 +30,38 @@
            preview-teleported
          />
        </template>
-      </ElTableColumn>
+        <template #pickQuantity="{ row }">
-      <ElTableColumn prop="productName" label="商品名称" min-width="120" show-overflow-tooltip />
+          <span style="color: #e6a23c; font-weight: bold">{{
-      <ElTableColumn prop="styleNo" label="款号" min-width="80" />
+            row.pickQuantity
-      <ElTableColumn prop="stockSku" label="库存SKU" min-width="120" />
+          }}</span>
-      <ElTableColumn prop="pickQuantity" label="本次拣胚数量" min-width="110" align="center">
-        <template #default="{ row }">
-          <span style="color: #e6a23c; font-weight: bold">{{ row.pickQuantity }}</span>
        </template>
-      </ElTableColumn>
+        <template #pickStatus="{ row }">
-      <ElTableColumn prop="availableStock" label="可调配库存" min-width="100" align="center" />
-      <ElTableColumn prop="stockQuantity" label="库存数量" min-width="90" align="center" />
-      <ElTableColumn prop="producingQuantity" label="生产中数量" min-width="100" align="center" />
-      <ElTableColumn prop="occupiedQuantity" label="占用数量" min-width="90" align="center" />
-      <ElTableColumn label="拣胚情况" min-width="130" align="center" fixed="right">
-        <template #default="{ row }">
          <span v-if="row.pickStatus === 'fail'" style="color: #f56c6c">
            ✕ 无法拣胚
          </span>
-          <ElButton
+          <span v-else-if="row.pickStatus === 'partial'" class="item">
-            v-else-if="row.pickStatus === 'partial'"
+            <ElButton type="warning" size="small">调整拣胚顺序</ElButton>
-            type="warning"
-            size="small"
-          >
-            调整拣胚顺序
-          </ElButton>
-          <span v-else style="color: #67c23a">
-            ✓ 直接拣胚
          </span>
+          <span v-else style="color: #67c23a"> ✓ 直接拣胚 </span>
        </template>
-      </ElTableColumn>
+      </TableView>
-    </ElTable>
+    </div>
    <template #footer>
-      <ElButton @click="visible = false">取消</ElButton>
+      <div class="dialog-footer" style="text-align: center">
-      <ElButton type="primary" :loading="submitLoading" @click="handleSubmit">
+        <span class="item">
-        确定
+          <ElButton @click="visible = false">取消</ElButton>
-      </ElButton>
+        </span>
+        <span class="item">
+          <ElButton
+            type="primary"
+            :loading="submitLoading"
+            @click="handleSubmit"
+          >
+            确定
+          </ElButton>
+        </span>
+      </div>
    </template>
  </ElDialog>
 </template>
@@ -82,6 +71,8 @@ import { ref } from 'vue'
 import { ElMessage } from 'element-plus'
 import { pickCompleteApi } from '@/api/factoryOrderNew'
 import type { PickCompleteData } from '@/types/api/factoryOrderNew'
+import TableView from '@/components/TableView.vue'
+import type { CustomColumn } from '@/types/table'
 const emit = defineEmits<{
  success: []
@@ -92,6 +83,75 @@ const submitLoading = ref(false)
 const tableData = ref<PickCompleteData[]>([])
 const orderIds = ref<(number | string)[]>([])
+const columns: CustomColumn<PickCompleteData>[] = [
+  {
+    key: 'warehouseName',
+    prop: 'warehouseName',
+    label: '仓库名称',
+    minWidth: 100,
+  },
+  {
+    key: 'skuImage',
+    label: 'SKU图片',
+    width: 100,
+    align: 'center',
+    slot: 'skuImage',
+  },
+  {
+    key: 'productName',
+    prop: 'productName',
+    label: '商品名称',
+    minWidth: 120,
+    showOverflowTooltip: true,
+  },
+  { key: 'styleNo', prop: 'styleNo', label: '款号', minWidth: 80 },
+  { key: 'stockSku', prop: 'stockSku', label: '库存SKU', minWidth: 120 },
+  {
+    key: 'pickQuantity',
+    prop: 'pickQuantity',
+    label: '本次拣胚数量',
+    minWidth: 110,
+    align: 'center',
+    slot: 'pickQuantity',
+  },
+  {
+    key: 'availableStock',
+    prop: 'availableStock',
+    label: '可调配库存',
+    minWidth: 100,
+    align: 'center',
+  },
+  {
+    key: 'stockQuantity',
+    prop: 'stockQuantity',
+    label: '库存数量',
+    minWidth: 90,
+    align: 'center',
+  },
+  {
+    key: 'producingQuantity',
+    prop: 'producingQuantity',
+    label: '生产中数量',
+    minWidth: 100,
+    align: 'center',
+  },
+  {
+    key: 'occupiedQuantity',
+    prop: 'occupiedQuantity',
+    label: '占用数量',
+    minWidth: 90,
+    align: 'center',
+  },
+  {
+    key: 'pickStatus',
+    label: '拣胚情况',
+    minWidth: 130,
+    align: 'center',
+    fixed: 'right',
+    slot: 'pickStatus',
+  },
+]
 const open = async (ids: (number | string)[]) => {
  orderIds.value = ids
  visible.value = true
@@ -128,15 +188,7 @@ defineExpose({ open })
 </script>
 <style scoped lang="scss">
-.pick-complete-tip {
+.table-view {
-  font-size: 14px;
+  height: 600px;
-  color: #606266;
-  margin-bottom: 8px;
-}
-.pick-complete-hints {
-  font-size: 13px;
-  color: #909399;
-  margin-bottom: 12px;
-  line-height: 1.8;
 }
 </style>
--- a/src/views/order/factoryOrderNew/component/PickFailDialog.vue
+++ b/src/views/order/factoryOrderNew/component/PickFailDialog.vue
@@ -8,19 +8,20 @@
  >
    <div class="pick-fail-info">
      <span>
-        您选择了 <strong>{{ orderIds.length }}</strong> 件操作单，如拣胚失败，库位没有实物库存，
+        您选择了
-        <ElButton type="primary" link @click="handleCreateInbound">
+        <strong>{{ orderIds.length }}</strong>
-          建议创建出库单
+        件操作单，如拣胚失败，库位没有实物库存，
-        </ElButton>
+        <strong style="color: #f56c6c"> 建议创建出库单 </strong>
        ，详细库存信息如下：
      </span>
    </div>
+    <div class="table-view">
-    <ElTable :data="tableData" border style="width: 100%; margin-top: 10px">
+      <TableView
-      <ElTableColumn type="index" label="序号" width="60" align="center" />
+        :paginated-data="tableData"
-      <ElTableColumn prop="warehouseName" label="仓库名称" min-width="90" />
+        :columns="columns"
-      <ElTableColumn label="SKU图片" width="80" align="center">
+        serial-numberable
-        <template #default="{ row }">
+      >
+        <template #skuImage="{ row }">
          <el-image
            v-if="row.skuImage"
            :src="row.skuImage"
@@ -30,41 +31,37 @@
            preview-teleported
          />
        </template>
-      </ElTableColumn>
+        <template #producingQuantity="{ row }">
-      <ElTableColumn prop="productName" label="商品名称" min-width="110" show-overflow-tooltip />
+          <span style="color: #e6a23c; font-weight: bold">{{
-      <ElTableColumn prop="styleNo" label="款号" min-width="70" />
+            row.producingQuantity
-      <ElTableColumn prop="stockSku" label="库存SKU" min-width="110" />
+          }}</span>
-      <ElTableColumn prop="currentStock" label="当前库存数量" min-width="100" align="center" />
-      <ElTableColumn prop="occupiedQuantity" label="占用数量" min-width="80" align="center" />
-      <ElTableColumn prop="currentAvailableStock" label="当前可用库存" min-width="100" align="center" />
-      <ElTableColumn prop="producingQuantity" label="生产中数量" min-width="90" align="center">
-        <template #default="{ row }">
-          <span style="color: #e6a23c; font-weight: bold">{{ row.producingQuantity }}</span>
        </template>
-      </ElTableColumn>
+        <template #suggestOutQuantity="{ row }">
-      <ElTableColumn label="建议出库数量" min-width="100" align="center">
+          <span style="color: #f56c6c; font-weight: bold">{{
-        <template #default="{ row }">
+            row.suggestOutQuantity
-          <span style="color: #f56c6c; font-weight: bold">{{ row.suggestOutQuantity }}</span>
+          }}</span>
        </template>
-      </ElTableColumn>
+        <template #afterOutStock="{ row }">
-      <ElTableColumn label="出库后库存数量" min-width="110" align="center">
-        <template #default="{ row }">
          <span style="color: #f56c6c">{{ row.afterOutStock }}</span>
        </template>
-      </ElTableColumn>
+      </TableView>
-      <ElTableColumn prop="afterOutOccupied" label="出库后占用数量" min-width="110" align="center" />
+    </div>
-      <ElTableColumn prop="afterOutAvailable" label="出库后可用库存" min-width="110" align="center" />
-    </ElTable>
    <template #footer>
-      <ElButton @click="visible = false">取消</ElButton>
+      <div class="dialog-footer" style="text-align: center">
-      <ElButton
+        <span class="item">
-        type="primary"
+          <ElButton @click="visible = false">取消</ElButton>
-        :loading="submitLoading"
+        </span>
-        @click="handleCreateOutbound"
+        <span class="item">
-      >
+          <ElButton
-        快速创建出库单
+            type="primary"
-      </ElButton>
+            :loading="submitLoading"
+            @click="handleCreateOutbound"
+          >
+            快速创建出库单
+          </ElButton>
+        </span>
+      </div>
    </template>
  </ElDialog>
 </template>
@@ -74,6 +71,8 @@ import { ref } from 'vue'
 import { ElMessage } from 'element-plus'
 import { pickFailApi, createOutboundOrderApi } from '@/api/factoryOrderNew'
 import type { PickFailData } from '@/types/api/factoryOrderNew'
+import TableView from '@/components/TableView.vue'
+import type { CustomColumn } from '@/types/table'
 const emit = defineEmits<{
  success: []
@@ -84,6 +83,90 @@ const submitLoading = ref(false)
 const tableData = ref<PickFailData[]>([])
 const orderIds = ref<(number | string)[]>([])
+const columns: CustomColumn<PickFailData>[] = [
+  {
+    key: 'warehouseName',
+    prop: 'warehouseName',
+    label: '仓库名称',
+    minWidth: 120,
+  },
+  {
+    key: 'skuImage',
+    label: 'SKU图片',
+    width: 100,
+    align: 'center',
+    slot: 'skuImage',
+  },
+  {
+    key: 'productName',
+    prop: 'productName',
+    label: '商品名称',
+    minWidth: 160,
+    showOverflowTooltip: true,
+  },
+  { key: 'styleNo', prop: 'styleNo', label: '款号', minWidth: 70 },
+  { key: 'stockSku', prop: 'stockSku', label: '库存SKU', minWidth: 110 },
+  {
+    key: 'currentStock',
+    prop: 'currentStock',
+    label: '当前库存数量',
+    minWidth: 120,
+    align: 'center',
+  },
+  {
+    key: 'occupiedQuantity',
+    prop: 'occupiedQuantity',
+    label: '占用数量',
+    minWidth: 90,
+    align: 'center',
+  },
+  {
+    key: 'currentAvailableStock',
+    prop: 'currentAvailableStock',
+    label: '当前可用库存',
+    minWidth: 120,
+    align: 'center',
+  },
+  {
+    key: 'producingQuantity',
+    prop: 'producingQuantity',
+    label: '生产中数量',
+    minWidth: 110,
+    align: 'center',
+    slot: 'producingQuantity',
+  },
+  {
+    key: 'suggestOutQuantity',
+    prop: 'suggestOutQuantity',
+    label: '建议出库数量',
+    minWidth: 120,
+    align: 'center',
+    slot: 'suggestOutQuantity',
+  },
+  {
+    key: 'afterOutStock',
+    prop: 'afterOutStock',
+    label: '出库后库存数量',
+    minWidth: 130,
+    align: 'center',
+    slot: 'afterOutStock',
+  },
+  {
+    key: 'afterOutOccupied',
+    prop: 'afterOutOccupied',
+    label: '出库后占用数量',
+    minWidth: 130,
+    align: 'center',
+  },
+  {
+    key: 'afterOutAvailable',
+    prop: 'afterOutAvailable',
+    label: '出库后可用库存',
+    minWidth: 130,
+    align: 'center',
+  },
+]
 const open = async (ids: (number | string)[]) => {
  orderIds.value = ids
  visible.value = true
@@ -99,10 +182,6 @@ const handleClose = () => {
  tableData.value = []
 }
-const handleCreateInbound = () => {
-  ElMessage.info('创建出库单功能待实现')
-}
 const handleCreateOutbound = async () => {
  submitLoading.value = true
  try {
@@ -110,8 +189,8 @@ const handleCreateOutbound = async () => {
    ElMessage.success('创建出库单成功')
    visible.value = false
    emit('success')
-  } catch (e: any) {
+  } catch (e: unknown) {
-    ElMessage.error(e?.message || '创建出库单失败')
+    ElMessage.error((e as Error)?.message || '创建出库单失败')
  } finally {
    submitLoading.value = false
  }
@@ -126,4 +205,7 @@ defineExpose({ open })
  color: #606266;
  line-height: 1.8;
 }
+.table-view {
+  height: 600px;
+}
 </style>
--- a/src/views/order/factoryOrderNew/index.vue
+++ b/src/views/order/factoryOrderNew/index.vue
@@ -426,7 +426,10 @@
            >确认接单</ElButton
          >
        </span>
-        <span v-if="status === 'PENDING_ACCEPT'" class="item">
+        <span
+          v-if="status === 'PENDING_ACCEPT' || status === 'SUSPENDED'"
+          class="item"
+        >
          <ElButton type="danger" @click="handleCancelOrder">取消订单</ElButton>
        </span>
@@ -457,7 +460,7 @@
            </ElDropdownMenu>
          </template>
        </ElDropdown>
        <span v-if="status === 'PENDING_LOGISTICS'" class="item">
          <ElButton type="success" @click="handleUpdateCustomsInfo"
            >更新报关信息</ElButton
@@ -558,7 +561,7 @@
            >生产完成</ElButton
          >
        </span>
        <!-- 待发货 -->
        <template v-if="status === 'PENDING_SHIP'">
          <span class="item">
@@ -597,16 +600,10 @@
              >同步收货地址</ElButton
            >
          </span>
-          <span class="item">
-            <ElButton type="danger" @click="handleCancelOrder"
-              >取消订单</ElButton
-            >
-          </span>
        </template>
        <span
          v-if="
            [
-              'PENDING_ACCEPT',
              'PENDING_LOGISTICS',
              'PENDING_SCHEDULE',
              'PENDING_SHIP',
@@ -1411,7 +1408,7 @@ const handleConfirmOrder = () => {
 }
 const handleCancelOrder = () => {
-  if (!ensureSelection()) return
+  // if (!ensureSelection()) return
  cancelOrderDialogRef.value?.open(getSelectedIds())
 }
@@ -1584,7 +1581,7 @@ const handlePickComplete = () => {
 }
 const handlePickFail = () => {
-  if (!ensureSelection()) return
+  // if (!ensureSelection()) return
  pickFailDialogRef.value?.open(getSelectedIds())
 }

--- a/src/views/order/factoryOrderNew/newOrder.md
+++ b/src/views/order/factoryOrderNew/newOrder.md
@@ -49,8 +49,8 @@
 -- 注意：这里可用 `src/components/CommonCard.vue` 组件，使用时注意传递对应的 props 和插槽
 -- 可参考 `src/views/order/podCN/index.vue` 中的卡片实现方法，但是内容需要根据图片2所示进行调整
 ### 该状态中的操作栏，分别有如下按钮：
-#### 派单
+#### 排单
-- 此为原有逻辑，可把 `src/views/order/podCN/index.vue` 中的 `派单` 功能拷贝过来
+-- 此为原有逻辑，可把 `src/views/order/podCN/index.vue` 中的 `排单` 功能拷贝过来
 #### 下载素材
 -- 此为原有逻辑，可把 `src/views/order/podCN/index.vue` 中的 `下载素材` 功能拷贝过来
 ## 批量管理状态