proapp 1.工作台分类修改

gaoluyang

2026-06-16 c4d25912d11ab9059f8165c25a161634bb9b5e97

 src/pages/productionManagement/productionDispatching/index.vue

@@ -1,235 +1,236 @@
<template>
   <view class="production-dispatching">
      <!-- 使用通用页面头部组件 -->
      <PageHeader title="生产派工" @back="goBack" />
		
      <!-- 搜索区域 -->
      <view class="search-section">
         <view class="search-bar">
            <view class="search-input">
               <up-input
                  class="search-text"
                  placeholder="请输入客户名称搜索"
                  v-model="searchForm.customerName"
                  @change="handleQuery"
                  clearable
               />
            </view>
            <view class="filter-button" @click="handleQuery">
               <up-icon name="search" size="24" color="#999"></up-icon>
            </view>
         </view>
      </view>
		
      <!-- 生产派工列表 -->
      <view class="ledger-list" v-if="tableData.length > 0">
         <view v-for="(item, index) in tableData" :key="item.id || index">
            <view class="ledger-item">
               <view class="item-header">
                  <view class="item-left">
                     <view class="document-icon">
                        <up-icon name="file-text" size="16" color="#ffffff"></up-icon>
                     </view>
                     <text class="item-id">{{ item.salesContractNo }}</text>
                  </view>
               </view>
               <up-divider></up-divider>
					
               <view class="item-details">
                  <view class="detail-row">
                     <text class="detail-label">录入日期</text>
                     <text class="detail-value">{{ item.entryDate }}</text>
                  </view>
                  <view class="detail-row">
                     <text class="detail-label">客户合同号</text>
                     <text class="detail-value">{{ item.customerContractNo }}</text>
                  </view>
                  <view class="detail-row">
                     <text class="detail-label">客户名称</text>
                     <text class="detail-value">{{ item.customerName }}</text>
                  </view>
                  <view class="detail-row">
                     <text class="detail-label">项目名称</text>
                     <text class="detail-value">{{ item.projectName }}</text>
                  </view>
                  <view class="detail-row">
                     <text class="detail-label">产品大类</text>
                     <text class="detail-value">{{ item.productCategory }}</text>
                  </view>
                  <view class="detail-row">
                     <text class="detail-label">规格型号</text>
                     <text class="detail-value">{{ item.specificationModel }}</text>
                  </view>
                  <view class="detail-row">
                     <text class="detail-label">总数量</text>
                     <text class="detail-value">{{ item.quantity }} {{ item.unit }}</text>
                  </view>
                  <view class="detail-row">
                     <text class="detail-label">排产数量</text>
                     <text class="detail-value highlight">{{ item.schedulingNum }}</text>
                  </view>
                  <view class="detail-row">
                     <text class="detail-label">待排数量</text>
                     <text class="detail-value" :class="{ 'danger': item.pendingQuantity <= 0 }">{{ item.pendingQuantity }}</text>
                  </view>
               </view>
					
               <!-- 操作按钮区域 -->
               <view class="action-buttons">
                  <up-button
                     type="primary"
                     size="small"
                     @click="handleDispatch(item)"
                     class="action-btn"
                     :disabled="item.pendingQuantity <= 0"
                  >
                     生产派工
                  </up-button>
               </view>
            </view>
         </view>
      </view>
      <view v-else class="no-data">
         <text>暂无生产派工数据</text>
      </view>
		
      <!-- 派工弹窗 -->
      <DispatchModal ref="dispatchModalRef" @confirm="handleDispatchConfirm" />
   </view>
  <view class="production-dispatching">
    <!-- 使用通用页面头部组件 -->
    <PageHeader title="生产派工"
                @back="goBack" />
    <!-- 搜索区域 -->
    <view class="search-section">
      <view class="search-bar">
        <view class="search-input">
          <up-input class="search-text"
                    placeholder="请输入客户名称搜索"
                    v-model="searchForm.customerName"
                    @change="handleQuery"
                    clearable />
        </view>
        <view class="filter-button"
              @click="handleQuery">
          <up-icon name="search"
                   size="24"
                   color="#999"></up-icon>
        </view>
      </view>
    </view>
    <!-- 生产派工列表 -->
    <view class="ledger-list"
          v-if="tableData.length > 0">
      <view v-for="(item, index) in tableData"
            :key="item.id || index">
        <view class="ledger-item">
          <view class="item-header">
            <view class="item-left">
              <view class="document-icon">
                <up-icon name="file-text"
                         size="16"
                         color="#ffffff"></up-icon>
              </view>
              <text class="item-id">{{ item.salesContractNo }}</text>
            </view>
          </view>
          <up-divider></up-divider>
          <view class="item-details">
            <view class="detail-row">
              <text class="detail-label">录入日期</text>
              <text class="detail-value">{{ item.entryDate }}</text>
            </view>
            <view class="detail-row">
              <text class="detail-label">客户合同号</text>
              <text class="detail-value">{{ item.customerContractNo }}</text>
            </view>
            <view class="detail-row">
              <text class="detail-label">客户名称</text>
              <text class="detail-value">{{ item.customerName }}</text>
            </view>
            <view class="detail-row">
              <text class="detail-label">项目名称</text>
              <text class="detail-value">{{ item.projectName }}</text>
            </view>
            <view class="detail-row">
              <text class="detail-label">产品大类</text>
              <text class="detail-value">{{ item.productCategory }}</text>
            </view>
            <view class="detail-row">
              <text class="detail-label">规格型号</text>
              <text class="detail-value">{{ item.specificationModel }}</text>
            </view>
            <view class="detail-row">
              <text class="detail-label">总数量</text>
              <text class="detail-value">{{ item.quantity }} {{ item.unit }}</text>
            </view>
            <view class="detail-row">
              <text class="detail-label">排产数量</text>
              <text class="detail-value highlight">{{ item.schedulingNum }}</text>
            </view>
            <view class="detail-row">
              <text class="detail-label">待排数量</text>
              <text class="detail-value"
                    :class="{ 'danger': item.pendingQuantity <= 0 }">{{ item.pendingQuantity }}</text>
            </view>
          </view>
          <!-- 操作按钮区域 -->
          <view class="action-buttons">
            <up-button type="primary"
                       size="small"
                       @click="handleDispatch(item)"
                       class="action-btn"
                       :disabled="item.pendingQuantity <= 0">
              生产派工
            </up-button>
          </view>
        </view>
      </view>
    </view>
    <view v-else
          class="no-data">
      <text>暂无生产派工数据</text>
    </view>
    <!-- 派工弹窗 -->
    <DispatchModal ref="dispatchModalRef"
                   @confirm="handleDispatchConfirm" />
  </view>
</template>

<script setup>
import { ref, reactive, toRefs, getCurrentInstance } from "vue";
import { onShow } from '@dcloudio/uni-app';
import dayjs from "dayjs";
import {schedulingListPage} from "@/api/productionManagement/productionOrder.js";
import PageHeader from "@/components/PageHeader.vue";
import DispatchModal from "./components/DispatchModal.vue";
const { proxy } = getCurrentInstance();
  import { ref, reactive, toRefs, getCurrentInstance } from "vue";
  import { onShow } from "@dcloudio/uni-app";
  import dayjs from "dayjs";
  // import {schedulingListPage} from "@/api/productionManagement/productionOrder.js";
  import PageHeader from "@/components/PageHeader.vue";
  import DispatchModal from "./components/DispatchModal.vue";
  const { proxy } = getCurrentInstance();

// 加载状态
const loading = ref(false);
  // 加载状态
  const loading = ref(false);

// 列表数据
const tableData = ref([]);
  // 列表数据
  const tableData = ref([]);

  // 搜索表单数据
  const data = reactive({
    searchForm: {
      customerName: "",
    },
  });
  const { searchForm } = toRefs(data);

// 搜索表单数据
const data = reactive({
   searchForm: {
      customerName: "",
   },
});
const { searchForm } = toRefs(data);
  // 分页配置
  const page = reactive({
    current: -1,
    size: -1,
  });

// 分页配置
const page = reactive({
   current: -1,
   size: -1,
});
  // 派工弹窗引用
  const dispatchModalRef = ref();

// 派工弹窗引用
const dispatchModalRef = ref();
  // 通用提示函数
  const showLoadingToast = message => {
    uni.showLoading({
      title: message,
      mask: true,
    });
  };

// 通用提示函数
const showLoadingToast = (message) => {
   uni.showLoading({
      title: message,
      mask: true
   });
};
  const closeToast = () => {
    uni.hideLoading();
  };

const closeToast = () => {
   uni.hideLoading();
};
  // 返回上一页
  const goBack = () => {
    uni.navigateBack();
  };

// 返回上一页
const goBack = () => {
   uni.navigateBack();
};
  // 查询列表
  const handleQuery = () => {
    getList();
  };

// 查询列表
const handleQuery = () => {
   getList();
};
  // 获取列表数据
  const getList = () => {
    loading.value = true;
    showLoadingToast("加载中...");

// 获取列表数据
const getList = () => {
   loading.value = true;
   showLoadingToast('加载中...');
	
   // 构造请求参数
   const params = { ...searchForm.value, ...page };
	
   schedulingListPage(params).then((res) => {
      loading.value = false;
      closeToast();
		
      // 处理每条数据，增加pendingQuantity字段
      tableData.value = (res.data.records || []).map(item => ({
         ...item,
         pendingQuantity: (Number(item.quantity) || 0) - (Number(item.schedulingNum) || 0)
      }));
   }).catch(() => {
      loading.value = false;
      closeToast();
      uni.showToast({
         title: '加载失败',
         icon: 'error'
      });
   });
};
    // 构造请求参数
    const params = { ...searchForm.value, ...page };

// 处理派工操作
const handleDispatch = (item) => {
   if (item.pendingQuantity <= 0) {
      uni.showToast({
         title: '该项目无需再派工',
         icon: 'none'
      });
      return;
   }
	
   dispatchModalRef.value?.open(item);
};
    // schedulingListPage(params).then((res) => {
    //    loading.value = false;
    //    closeToast();

// 处理派工确认
const handleDispatchConfirm = () => {
   getList(); // 刷新列表
};
    //    // 处理每条数据，增加pendingQuantity字段
    //    tableData.value = (res.data.records || []).map(item => ({
    //       ...item,
    //       pendingQuantity: (Number(item.quantity) || 0) - (Number(item.schedulingNum) || 0)
    //    }));
    // }).catch(() => {
    //    loading.value = false;
    //    closeToast();
    //    uni.showToast({
    //       title: '加载失败',
    //       icon: 'error'
    //    });
    // });
  };

// 页面显示时加载数据
onShow(() => {
   // 加载列表数据
   getList();
});
  // 处理派工操作
  const handleDispatch = item => {
    if (item.pendingQuantity <= 0) {
      uni.showToast({
        title: "该项目无需再派工",
        icon: "none",
      });
      return;
    }

    dispatchModalRef.value?.open(item);
  };

  // 处理派工确认
  const handleDispatchConfirm = () => {
    getList(); // 刷新列表
  };

  // 页面显示时加载数据
  onShow(() => {
    // 加载列表数据
    getList();
  });
</script>

<style scoped lang="scss">
@import '@/styles/sales-common.scss';
  @import "@/styles/sales-common.scss";

// 生产派工页面样式
.production-dispatching {
   min-height: 100vh;
   background: #f8f9fa;
   position: relative;
}
  // 生产派工页面样式
  .production-dispatching {
    min-height: 100vh;
    background: #f8f9fa;
    position: relative;
  }

// 列表项样式
.ledger-item {
   .detail-value.highlight {
      color: #ff6b35;
      font-weight: 600;
   }
	
   .detail-value.danger {
      color: #ee0a24;
      font-weight: 600;
   }
}
  // 列表项样式
  .ledger-item {
    .detail-value.highlight {
      color: #ff6b35;
      font-weight: 600;
    }

// 适配 uView 组件样式
:deep(.up-input) {
   background: transparent;
}
    .detail-value.danger {
      color: #ee0a24;
      font-weight: 600;
    }
  }

  // 适配 uView 组件样式
  :deep(.up-input) {
    background: transparent;
  }
</style>