maxcess-synergy-admin/src/views/mssPurchaseOrder/selectedData.vue

<template>
	<el-dialog :model-value="props.showes" @close="closeFun" width="80%">
		<avue-crud
			ref="crudRef"
			:data="state.data"
			:option="state.option"
		>
      <template #fSupplierLot="{row}">
        <div style="display: flex;align-items: center;justify-content: center">
          <el-input v-model="row.fSupplierLot" placeholder="批号" size="small"/>
        </div>
      </template>
      <template #notSendQty="{row}">
        <div style="display: flex;align-items: center;justify-content: center">
          <el-input-number v-model="row.notSendQty" size="small"/>
        </div>
      </template>
      <template #chengNuoJiaoQi="{row}">
        <div style="display: flex;align-items: center;justify-content: center">
          <el-date-picker v-model="row.chengNuoJiaoQi" type="date" size="small" style="width: 100%" format="YYYY/MM/DD"
                           @change="batchSetChengNuoJiaoQiFun([{id:row.id,newTime:row.chengNuoJiaoQi}])"/>
        </div>
      </template>
      <template #newChengNuoJiaoQi="{row}">
        <div style="display: flex;align-items: center;justify-content: center">
          <el-date-picker v-model="row.newChengNuoJiaoQi" type="date" size="small" style="width: 100%" format="YYYY/MM/DD"
                           @change="batchSetNewChengNuoJiaoQiFun([{id:row.id,newTime:row.newChengNuoJiaoQi}])"/>
        </div>
      </template>
      <template #menu-left>
        <div class="selectBoxes">
          <el-date-picker
              v-model="state.chengNuoJiaoQiP"
              type="date"
              placeholder="批量修改选中承诺日期"
              style="width: 190px;"
              @change="chengNuoJiaoQiPFun('0')"
          />
          <el-date-picker
              v-model="state.newChengNuoJiaoQiP"
              type="date"
              placeholder="批量修改选中承诺最新交期"
              style="width: 190px; margin-left: 12px"
              @change="chengNuoJiaoQiPFun('1')"
          />
          <el-input v-model="state.fSupplierLot" style="width: 190px;margin-left: 12px" placeholder="批号" @input="fSupplierLotFun"/>
        </div>
      </template>
    </avue-crud>
		<div class="btnList">
			<el-button type="primary" @click="batchAddInvoiceOrderFun">确定</el-button>
		</div>
	</el-dialog>
</template>
<script setup lang="ts">
import { defineProps, reactive, defineEmits, watch } from 'vue';
import { listApi } from '../../api/list/index'
const emits = defineEmits(['generateDocuments','close']);
import { useI18n } from 'vue-i18n';
import {ElMessage} from "element-plus";
const { t } = useI18n();
const props = defineProps({
	listData: {
		type: Array,
		default: () => [],
	},
	showes: {
		type: Boolean,
		default: false,
	},
});

const state = reactive({
  fSupplierLot:'',
	dialogVisible: true,
	data: [],
  show:true,
	formData: {},
	option: {
		tip: false,
		selection: false,
		index: true,
		menu: false,
		menuWidth: 150,
		border: true,
		delBtn: false,
		editBtn: false,
		align: 'center',
		searchLabelWidth: 140,
		searchMenuSpan: 6,
		addBtn: false,
		column: [
			{ label: 'PO号', prop: 'fBillNo' },
			{ label: '物料编码', prop: 'materialCode' },
			{ label: '物料名称', prop: 'materialName',width:'180' },
			{ label: '采购单位', prop: 'unitName' },
			{ label: '采购数量', prop: 'qty' },
			{ label: '已发货数量', prop: 'sendedQty' },
			{ label: '批号', prop: 'fSupplierLot' },
      { label: '本次发货数量', prop: 'notSendQty',width:'180' },
      { label: '供应商承诺交期', prop: 'chengNuoJiaoQi',width:'180' },
      { label: '供应商承诺最新交期', prop: 'newChengNuoJiaoQi',width:'180' },
		],
	},
	topId: '',
  chengNuoJiaoQiP:'',
  newChengNuoJiaoQiP:'',
});
watch(() => props.listData,() => {
  state.data = props.listData
})
const fSupplierLotFun = () => {
  state.data.forEach((item:any) => {
    item.fSupplierLot = state.fSupplierLot
  })
  console.log(state.data)
  // state.fSupplierLot = '';
}
const chengNuoJiaoQiPFun = (e: string) => {
  let arr: any = [];
  if (e === '0') {
    state.data.forEach((item: any) => {
      arr.push({ id: item.id, newTime: state.chengNuoJiaoQiP });
    });
    batchSetChengNuoJiaoQiFun(arr)
  }
  if (e === '1') {
    state.data.forEach((item: any) => {
      arr.push({ id: item.id, newTime: state.newChengNuoJiaoQiP });
    });
    batchSetNewChengNuoJiaoQiFun(arr)
  }
};
const batchSetChengNuoJiaoQiFun = (arr:any) => {
  listApi().batchSetChengNuoJiaoQi(arr).then((res: any) => {
    if (res.resultCode === 0) {
      ElMessage.success('操作成功');
      state.data.forEach((item:any) => {
        item.chengNuoJiaoQi = state.chengNuoJiaoQiP
      })
      // state.chengNuoJiaoQiP = '';
    }
    if (res.resultCode === -1) {
      ElMessage.success(res.errorMessage);
      // state.newChengNuoJiaoQiP = '';
    }
  });
}
const batchSetNewChengNuoJiaoQiFun = (arr:any) => {
  listApi().batchSetNewChengNuoJiaoQi(arr).then((res: any) => {
    if (res.resultCode === 0) {
      ElMessage.success('操作成功');

      state.data.forEach((item:any) => {
        item.newChengNuoJiaoQi = state.newChengNuoJiaoQiP
      })
      // state.chengNuoJiaoQiP = '';
    }
    if (res.resultCode === -1) {
      ElMessage.success(res.errorMessage);
      // state.newChengNuoJiaoQiP = '';
    }
  });
}
const batchAddInvoiceOrderFun = () => {
  console.log(props.listData)
  let arr:any = []
  props.listData.forEach((item:any) => {
    arr.push({
      id:item.id,
      qty:item.notSendQty
    })
  })
  listApi().batchAddInvoiceOrder(arr).then((res:any) => {
    if(res.resultCode === 0){
      ElMessage.success('操作成功');
      emits('generateDocuments')
    }
    if(res.resultCode === -1){
      ElMessage.error(res.errorMessage);
    }
  })
}
const closeFun = () => {
  emits('close')
}
</script>
<style scoped lang="scss">
.btnList {
	margin-top: 26px;
	display: flex;
	justify-content: center;
}
:deep(.avue-crud__left) {
  flex: 1;
}

:deep(.avue-crud__refreshBtn) {
  display: none;
}

:deep(.avue-crud__gridBtn) {
  display: none;
}

.piliang {
  margin-left: 12px;
  border: 1px solid #d5d5d5;
  border-radius: 8px;
  flex: 1;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 4px;
}

.system-user-container {
  //padding: 0 !important;
}

.multi-line-omit {
  word-break: break-all; // 允许单词内自动换行，如果一个单词很长的话
  text-overflow: ellipsis; // 溢出用省略号显示
  overflow: hidden; // 超出的文本隐藏
  display: -webkit-box; // 作为弹性伸缩盒子模型显示
  -webkit-line-clamp: 1; // 显示的行
  -webkit-box-orient: vertical; // 设置伸缩盒子的子元素排列方式--从上到下垂直排列
}

.selectBoxes {
  display: flex;
  flex: 1;

  .selectItem {
    margin-right: 16px;
    display: flex;
  }
}

:deep(.avue-crud) {
  height: 100%;
  width: 100%;
}

:deep(.avue-crud--card) {
  display: flex;
  flex-direction: column;
  flex: 1;
}

:deep(.avue-crud__body) {
  flex: 1;
}

:deep(.el-table__header) {
  height: 40px;
}

:deep(.el-card__body) {
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  padding: 0 !important;
}

:deep(.el-table__cell) {
  //padding: 0 !important;
  //height: 56px !important;
}

:deep(.el-card) {
  padding: 12px;
}

:deep(.el-form) {
  flex: 1;
}

.system-user-container {
  :deep(.el-card__body) {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: auto;

    .el-table {
      flex: 1;
    }
  }
}

:deep(.el-col) {
  margin-bottom: 16px;
}
</style>