Otsuka-APP/pages/work/OrderManager/components/NewAdd.vue

<template>
  <view class="order-detail-container">
    <!-- 基础信息区域 -->

    <view class="info-section">
      <uni-row class="info-grid">
        <uni-col class="flex-row">
          <view class="label">生产单位: </view>
          <uni-data-select
               v-model="form.companyId"
               :localdata="companyOptions"
               text-field="deptName"        
               value-field="deptId"        
               @change="getEdu"      
               :clear="true"
             />
        </uni-col>
      </uni-row>
      <uni-row class="info-grid">
        <uni-col :span="12">
          <view class="label">剩余金额:{{ remainingMoney}}</view>
        </uni-col>
        <uni-col :span="12">
          <view class="label">订单金额:{{ orderAmount }}</view>
        </uni-col>
      </uni-row>
      <uni-row class="info-grid">
        <uni-col :span="24" style="display: flex;">
          <view class="label">已选补差:</view>
		  <view class="">
		  	<view style="color: red;" v-if="buchaGoodsList.length&&selectedBuCha.length==0">
		  		 提示:当前有补差数据可选择
		  	</view>
		  
		  <view v-else class="" v-for="(item,index) in selectedBuCha"  :key="index">
		  	商品：{{item.goodsname}},金额：{{item.piaokou}}
		  </view>
		  </view>
        </uni-col>
      </uni-row>
      <button type="primary" @click="toShowBucha" v-show="buChaButState">选择补差</button>
    </view>

	<!-- 补差列表 -->
  <view class="" v-if="ShowBucha">
    <!-- 商品信息区域 -->
    <view class="goods-section">
      <view class="section-title">
		  <view class="">
		  	补差商品信息
		  </view>
	   <view class="select-all">
	          <checkbox 
			  :checked="allSelected" 
			  @click="toggleSelectAll" 
			 ></checkbox>
	        </view>
	  </view>
      <view v-if="buchaGoodsList.length === 0" class="no-data">
        暂无商品数据
      </view>

      <view v-else class="goods-double-column">
	   <checkbox-group @change="checkboxChange">		
        <view 
          v-for="(goods, index) in buchaGoodsList" 
          :key="goods.piaokouid" 
          class="goods-item"
        >
          <view class="goods-header">
           
              <text class="serial-number">{{ index + 1 }}</text>
              <text class="goods-name">{{ goods.goodsname }}</text>
			   <checkbox :checked="selectedList.includes(goods.piaokouid)" :value="goods.piaokouid">
			   </checkbox>
           
          </view>
          
          <view class="goods-content">
           
            <uni-row class="info-row">
              <uni-col :span="12" class="info-pair">
                <view class="label">申请日期:{{  goods.applydate }}</view>
              </uni-col>
              <uni-col :span="12" class="info-pair">
                <view class="label">补差类型:{{  goods.piaokoutype }}</view>
              </uni-col>
            </uni-row>

           
            <uni-row class="info-row">
              <uni-col :span="12" class="info-pair">
                <view class="label">商品简称:{{ goods.shortname }}</view>
              </uni-col>
              <uni-col :span="12" class="info-pair">
                <view class="label">可补差金额:{{ goods.piaokou }}</view>
              </uni-col>
            </uni-row>
			
          </view>
        </view>
		</checkbox-group>
      </view>
    </view>
	<!-- 操作按钮 -->
	<view class="action-buttons">
	  <button @click="goAdd" class="btn btn-secondary">添加</button>
	  <button @click="goCancel" class="btn btn-primary">取消</button>
	</view>
	 </view>
	
  <view v-else>
    <!-- 商品信息区域 -->
    <view class="goods-section">
      <view class="section-title">
    	  <view class="">
    	  	商品信息
    	  </view>

      </view>
      <view v-if="goodsList.length === 0" class="no-data">
        暂无商品数据
      </view>
    
      <view v-else class="goods-double-column">
        <view 
          v-for="(goods, index) in goodsList"
          :key="goods.goodsid"
          class="goods-item"
        >
          <view class="goods-header">
           
              <text class="serial-number">{{ index + 1 }}</text>
              <text class="goods-name">{{ goods.goodsname }}</text>
    		 
           
          </view>
          
          <view class="goods-content">
           
            <uni-row class="info-row">
              <uni-col :span="12" class="info-pair">
                <view class="label">件装数:{{  goods.packingnum }}</view>
              </uni-col>
              <uni-col :span="12" class="info-pair">
                <view class="label">供应参考价:{{  goods.invoiceprice }}</view>
              </uni-col>
            </uni-row>
    
           
            <uni-row class="info-row">
              <uni-col :span="12" class="info-pair">
                <view class="label">前三月平均数:{{ goods.threeMonths }}</view>
              </uni-col>
              <uni-col :span="12" class="info-pair">
                <view class="label">使用票扣:{{ goods.piaokou }}</view>
              </uni-col>
            </uni-row>
    
           
            <uni-row class="info-row">
              <uni-col :span="12" class="info-pair">
                <view class="label">小计:{{ goods.allmoney }}</view>
              </uni-col>
             <uni-col :span="12" class="info-pair">
               <view class="label">税率:{{ goods.taxrate }}</view>
             </uni-col>
            </uni-row>
            <uni-row class="info-row">
              <uni-col :span="12" class="info-pair flex-row" >
                <view class="label">采购数量:</view>
                <input
                  class="uni-input custom-input"
                  v-model="goods.goodsnum"
                  placeholder="请输入采购数量"
                  @confirm="e =>handleInput(e,index)"/>
              </uni-col>
            </uni-row>
    		
          </view>
        </view>
      </view>
    </view>
	<!-- 操作按钮 -->
	<view class="action-buttons">
	  <button @click="goSave" class="btn btn-secondary">保存</button>
	  <button @click="goSubmit" class="btn btn-primary">确认提交</button>
	</view>
	 </view>
   
  </view>
</template>

<script setup>
import { addsalemain } from '../../../../api/orderManager/index.js'
import { getsalemaincheckAmount } from '../../../../api/orderManager/index.js'
import { onMounted, ref ,computed} from 'vue'
import { contractData, goodsData } from '../detailData.js'
import { listsaleBusGoodsList } from '../../../../api/orderManager/index.js'
import { listproductList } from '../../../../api/orderManager/index.js'
// import { getInfo } from '../../../../store/modules/user.js'
import { useUserStore } from '../../../../store/modules/user.js'
import data1 from './data1.js'
//已选补差
const selectedBuCha = ref([])
// 商品列表数据
const buchaGoodsList =ref([])
const goodsList = ref([])
const form = ref({
	companyId:1,
})
const RemainingMoney = ref('0.00') // 剩余金额
//显示补差按钮
const buChaButState = ref(true)
//显示选中所有按钮
const allSelected = ref(false)
//储存选中的列表
const selectedList = ref([])
//显示补差
const ShowBucha = ref(false)
//剩余金额
const remainingMoney = ref(0)
//订单金额
const orderAmount = ref(0.00)
// 入参
const queryNum = ref({})
// 基础信息
const contract = ref({})
// 生产单位
const companyOptions = ref([])
const monthOptions = ref([
  { value: 0, text: '本月执行' },
  { value: 1, text: '下月执行' }
])
// // 通用的金额格式化函数
// const formatMoney = (value) => {
//   const num = Number(value)
//   return isNaN(num) 
//     ? '0.00' 
//     : num.toLocaleString('en-US', {
//         minimumFractionDigits: 2,
//         maximumFractionDigits: 2
//       })
// }
// // 创建计算属性（可选）
// const formattedRemainingMoney = computed(() => formatMoney(RemainingMoney.value))
// const formattedContractMoney = computed(() => formatMoney(form.value.contractmoney))

onMounted(() => {
  // contract.value = contractData.data[0]
  // console.log(contract.value)
  getEdu()
  getsalemainpiAoKouList()
  getDeptLists()
  GetlistsaleBusGoodsList()
})
// 获取补差，票扣列表数据
function getsalemainpiAoKouList() {
    const body = {
       companyId:form.value.companyId, 
    }
   buchaGoodsList.value = data1.data
    // salemainpiAoKouList(body).then(res => {
    //     BuChatableData.value = res.data
    // });
}
function GetlistsaleBusGoodsList() {
  // // 查询可销售商品列表
    const KeSaleGoodsParams ={
        companyId:form.value.companyId,
        // userid: useUserStore.id,暂时替换为41
        userid: 41,
        deleteflag:0,           //不禁用的，禁用标志 0: 不禁用 1: 禁用 2, 流程中
        // state:1,                //状态0待审核,1已审核
    }
    const KeSaleGoodsQuery = {
        pageNum: 1,
        pageSize: 999,
    }
    listsaleBusGoodsList(KeSaleGoodsParams,KeSaleGoodsQuery).then(res => {
        goodsList.value = res.data
    });
}


const getDeptLists = () =>{
  listproductList().then(res => {
     companyOptions.value = res.data.map(item => {
				return {
					value:item.deptId,
					text:item.deptName
				}
			})
	  console.log('companyOptions.value', companyOptions.value)
  });
 
}
/**
 * 判断两个数组是否**严格相等**（顺序、值、类型都一致）
 */

function arraysEqual(a, b) {
  return (
    Array.isArray(a) &&
    Array.isArray(b) &&
    a.length === b.length &&
    a.every((val, idx) => val === b[idx])
  );
}
// 操作方法
const checkboxChange = (value) =>{
	// console.log("value",value)
	let idList = value.detail.value
	let compareList = []
	selectedList.value = idList//对比列表
	selectedBuCha.value = []
	let temp =true
	idList.forEach(item =>{
		
		buchaGoodsList.value.forEach(item1 =>{
			
			if( temp ){
			compareList.push(item1.piaokouid)
			}
			if(item1.piaokouid == item){
				selectedBuCha.value.push(
				{ goodsname: item1.goodsname,
				piaokou: item1.piaokou,
				goodsid:item1.goodsid}
				)
			}
		})
		temp =false
	}
	)
	//判断是否全选中
	console.log("111",arraysEqual(idList,compareList))

	console.log("111",idList,compareList)
    
	if(compareList.length!==0&&idList.length!==0&&arraysEqual(idList,compareList)){
		allSelected.value = true
	}else{
		allSelected.value = false
	}
	
}
/** 更改生产单位时，查询额度 */
function getEdu() {
    console.log(form.value.companyId,'form.value.companyId生产单位ID')
     // 清空已选补差数据
    const AmountqueryParams = {
        companyId:form.value.companyId,
        saleId: 0,
    }
    // 查询剩余额度
    getsalemaincheckAmount(AmountqueryParams).then(res => {
        remainingMoney.value = res.data.amounts
    });
    GetlistsaleBusGoodsList()
    getsalemainpiAoKouList()

}
//选择所有列表
const toggleSelectAll = () =>{
	if(!allSelected.value){
		selectedList.value = buchaGoodsList.value.map(item => item.piaokouid)
		allSelected.value = true
		selectedBuCha.value = []
		buchaGoodsList.value.forEach(item1 =>{
				selectedBuCha.value.push(
				{ goodsname: item1.goodsname,
				piaokou: item1.piaokou,
				goodsid:item1.goodsid}
				)
			
		})
	}else{
		selectedBuCha.value = []//清除已补差数据
		selectedList.value = []//清除已选中
		allSelected.value = false
	}
	console.log("value",selectedList.value)
	console.log("value",allSelected.value)
}

//添加
const goAdd = () =>{
	console.log('添加！')
	//算出每个药品的总piaokou
	console.log('selectedBuCha.value！',selectedBuCha.value)
	if(selectedBuCha.value.length!==0){
		const piaoKouSum = selectedBuCha.value.reduce((acc , cur) =>{
			  acc[cur.goodsid] = (acc[cur.goodsid]||0) + cur.piaokou
			  return acc
		},{})
	   
		console.log('piaoKouSum！',piaoKouSum)
		goodsList.value.forEach( item =>{
			  if(piaoKouSum[item.goodsid] !== undefined){
				  item.piaokou = piaoKouSum[item.goodsid]
			  }
		})
		
	}else{
		uni.showToast({
		  title: '没有选择数据!',
		  icon: 'none',
		  duration: 2000
		});
		return
	}
	
	uni.showToast({
	  title: '添加成功!',
	  icon: 'success',
	  duration: 2000
	});
	window.scrollTo({ top: 0, behavior: 'smooth' });
	ShowBucha.value = false
	buChaButState.value =true
}
//取消
const goCancel = () =>{
	ShowBucha.value = false
	buChaButState.value =true
	window.scrollTo({ top: 0, behavior: 'smooth' });
	console.log('取消！')
}
// 计算小计
const handleInput = (e, index) => {
	console.log('index',index)
  const value = e.detail.value
  // 将输入值转为数字
  const num = Number(value)
  if (isNaN(num)) return // 防止非数字输入
  // 更新采购数量
  goodsList.value[index].goodsnum = num
  // 重新计算小计 = 采购数量 × 供应参考价
  goodsList.value[index].allmoney = Math.ceil(num * goodsList.value[index].invoiceprice*100)/100
  //计算订单金额
  orderAmount.value = 0
  goodsList.value.forEach(item =>{
	  orderAmount.value += Number(item.invoiceprice)*Number(item.goodsnum)
  } )
   orderAmount.value = Math.ceil(orderAmount.value * 100) / 100;
   console.log('orderAmount',orderAmount.value)
}

const toggleSelection = (index) => {
  goodsList.value[index].selected = !goodsList.value[index].selected;
}

const handleByCompany = (value) => {
  console.log("value", value)
  // 更新数据
}
const validatePiaokou = () => {
  // 找出所有piaokou大于xiaoji的商品
  const invalidItems = form.value.saledetailList.filter(
    item => item.piaokou > item.xiaoji
  );
  
  if (invalidItems.length > 0) {
    // 构建错误提示信息
    const errorMessage = `以下商品的票扣金额大于小计金额：\n` +
      invalidItems.map(item => 
        `- ${item.goodsname} (票扣: ${item.piaokou}, 小计: ${item.xiaoji})`
      ).join('\n');
    
    uni.showToast({
      title: errorMessage,
      icon: 'none',
      duration: 3000
    });
    return false;
  }
  
  return true;
};
const goSave = () => {
  console.log("回退操作")
  // 成功提示 (类似 ElMessage.success)
  const tableData =goodsList.value;
      const filteredData = tableData.filter(item => 
          item.goodsnum !== null && 
          item.goodsnum !== '' && 
          item.goodsnum !== 0 && 
          !isNaN(item.goodsnum)
      );
      form.value.saledetailList = filteredData
       form.value.saledetailList = form.value.saledetailList.map(item => ({
          ...item,
          price:item.invoiceprice,
          xiaoji:item.allmoney
      }));
      // 添加验证
    if (!validatePiaokou()) {
      return; // 验证不通过，停止执行
    }
	form.value.state = 0 // 0为保存，可修改编辑，1的时候为提交，
	addsalemain(form.value).then(res => {
	        uni.showToast({
              title: '保存成功!',
               icon: 'success',
              duration: 2000
                });
				uni.navigateTo({
					url:'/pages/work/OrderManager/index'
				})
	         })
      
	  //提交
     console.log(" form.value.state", form.value)
  
}
const goSubmit = () => {
  console.log("审核操作")
      const tableData =goodsList.value;
     const filteredData = tableData.filter(item => 
         item.goodsnum !== null && 
         item.goodsnum !== '' && 
         item.goodsnum !== 0 && 
         !isNaN(item.goodsnum)
     );
     form.value.saledetailList = filteredData
      form.value.saledetailList = form.value.saledetailList.map(item => ({
         ...item,
         price:item.invoiceprice,
         xiaoji:item.allmoney
     }));
     // 添加验证
   if (!validatePiaokou()) {
     return; // 验证不通过，停止执行
   }
 	form.value.state = 1 // 0为保存，可修改编辑，1的时候为提交，
 	addsalemain(form.value).then(res => {
 	        uni.showToast({
             title: '提交成功!',
              icon: 'success',
             duration: 2000
               });
 				uni.navigateTo({
 					url:'/pages/work/OrderManager/index'
 				})
 	         })
}

const toShowBucha = () => {
	ShowBucha.value = true
	buChaButState.value =false
  console.log("选择补差")
}
</script>

<style lang="scss" scoped>
	// ::v-deep .uni-checkbox-input {
	//   background-color: #fff !important;
	//   border-color: #67c23a !important;
	// }
	
	// ::v-deep .uni-checkbox-input-checked {
	//   background-color: #fff !important;
	//   color: #67c23a !important; /* 对号颜色 */
	
	// }
	// ::v-deep .uni-checkbox-input svg{
	// 	  viewBox: 0 0 36 36;
	// 	  width: 22rpx;
	// 	  height: 22rpx;
	//   }
	.select-all {
		//靠右显示
		margin-left: auto;
		// margin-left: 10rpx;
		// background-color: #67c23a;
	}
.custom-input {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 5px;
  height: 25px;
}
.order-detail-container {
  padding: 16px;
  background-color: #f5f5f5;
  min-height: 100vh;
}
.flex-row {
  display: flex;
  align-items: center; /* 垂直居中对齐 */
  gap: 10px; /* 标签和下拉框之间的间距 */
}

.page-title {
  text-align: center;
  margin-bottom: 24px;
  color: #333;
  font-size: 18px;
  font-weight: 600;
  padding: 12px 0;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* 基础信息网格布局 */
.info-section {
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.info-grid {
  :deep(.uni-row) {
    display: flex;
    flex-wrap: wrap;
  }
  .info-value {
    font-size: 15px;
    color: #333;
    font-weight: 500;
    display: flex;
    justify-content: flex-end;
  }
  
  margin-bottom: 20rpx;
  margin-top: 20rpx;
}

.info-item {
  margin-bottom: 12px;
}

.label {
  font-size: 14px;
  color: #666;
  margin-bottom: 4px;
  font-weight: 500;
}

.required::after {
  content: '*';
  color: #f56c6c;
  margin-left: 2px;
}

.amount {
  color: #f56c6c;
  font-weight: 600;
}

.select-container {
  width: 100%;
}

:deep(.uni-data-select__text) {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #fff;
}

:deep(.month-popup) {
  min-width: 120px;
}

/* 商品信息区域 */
.goods-section {
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.section-title {
  font-size: 16px;
  color: #333;
  margin: 0 0 16px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid #eee;
  font-weight: 600;
  display: flex;
  align-items: center;
}

.no-data {
  text-align: center;
  color: #999;
  padding: 40px 0;
  font-size: 14px;
}

/* 商品双栏布局 */
.goods-double-column {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.goods-item {
  border: 1px solid #eee;
  border-radius: 12px;
  overflow: hidden;
  background: #fafafa;
}

.goods-header {
  background: #409eff;
  color: white;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.serial-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  font-size: 12px;
  font-weight: 600;
}

.goods-name {
  font-size: 15px;
  font-weight: 600;
  flex: 1;
}

/* 商品内容区域 */
.goods-content {
  padding: 12px 16px;
}

.info-row {
  display: flex;
  margin-bottom: 8px;
}

.info-pair {
  flex: 1;
  padding: 0 8px;
}

.info-pair .label {
  font-size: 14px;
  color: #666;
  margin-bottom: 2px;
}

.info-pair .value {
  font-size: 14px;
  color: #333;
  font-weight: 500;
  text-align: right;
}

.quantity {
  color: #409eff;
  font-weight: 600;
}

.total {
  color: #f56c6c;
  font-weight: 600;
}

.empty {
  visibility: hidden;
}

/* 操作按钮 */
.action-buttons {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 16px 0;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.btn {
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  min-width: 80px;
  text-align: center;
  flex: 1;
}

.btn-primary {
  background: #409eff;
  color: white;
}

.btn-secondary {
  background: #67c23a;
  color: white;
}

.btn-outline {
  background: #fff;
  color: #333;
  border: 1px solid #ddd;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .order-detail-container {
    padding: 12px;
  }

  .info-item {
    margin-bottom: 10px;
  }

  .info-pair {
    padding: 0 4px;
  }

  .action-buttons {
    flex-direction: column;
  }

  .btn {
    width: 100%;
    margin-bottom: 8px;
  }

  .btn:last-child {
    margin-bottom: 0;
  }
}

/* 添加多选框样式 */
.uni-checkbox {
  display: inline-flex;
  align-items: center;
  margin-right: 8px;
}
</style>