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

<template>
  <div class="system-user-container layout-padding">
    <el-card class="layout-padding-auto" shadow="hover">
      <avue-crud
          ref="crudRef"
          :data="state.data"
          :option="state.option"
          @selection-change="selectionChange"
          :table-loading="state.loading"
      >
        <template #fBillNo="{ row }">{{row.fBillNo}}</template>
        <template #fDate="{ row }">{{row.fDate}}</template>
        <template #fCancelStatus="{ row }">{{row.fCancelStatus === 'A' ? '未关闭' : '已关闭'}} </template>
        <template #materialName="{ row }">
          <el-tooltip :content="row.materialName" placement="top">
            <div class="multi-line-omit">{{ row.materialName }}</div>
          </el-tooltip>
        </template>
        <template #chengNuoJiaoQi="{ row }">
          <el-date-picker
              v-model="row.chengNuoJiaoQi"
              type="date"
              placeholder="日期"
              size="small"
              style="width: 115px"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              @change="batchSetChengNuoJiaoQiFun([{id:row.id,newTime:row.chengNuoJiaoQi}])"
          />
        </template>
        <template #newChengNuoJiaoQi="{ row }">
          <el-date-picker
              v-model="row.newChengNuoJiaoQi"
              type="date"
              placeholder="日期"
              size="small"
              style="width: 130px"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              @change="batchSetNewChengNuoJiaoQiFun([{id:row.id,newTime:row.newChengNuoJiaoQi}])"
          />
        </template>
        <template #menu-left>
          <div class="selectBoxes">
            <div class="selectItem">
              <el-input v-model="state.formData.fBillNo" style="width: 240px" placeholder="单据编号" size="default" />
            </div>
            <div class="selectItem">
              <el-select placeholder="业务状态" size="default" style="width: 240px" v-model="state.formData.fmrpCloseStatus">
                <el-option v-for="item in state.option.column[2].dicData" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </div>
            <div class="selectItem">
              <el-date-picker
                  v-model="state.elDatePicker"
                  style="width: 560px"
                  type="daterange"
                  range-separator="-"
                  start-placeholder="开始采购日期"
                  end-placeholder="采购结束日期"
                  size="default"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  @change="elDatePickerFun"
              />
            </div>
            <div class="selectItem" style="flex: 1">
              <el-button type="primary" size="default" @click="selectFun">搜索</el-button>
              <el-button size="default" @click="resetFun">重置</el-button>
              <div class="piliang">
                <el-button type="primary" size="small" @click="state.selectedDataShow = true">
                  <span>已选中 {{ state.selectedData.length }} 条数据，去查看</span>
                </el-button>
                <el-date-picker
                    v-model="state.chengNuoJiaoQiP"
                    type="date"
                    placeholder="批量修改选中承诺日期"
                    size="small"
                    style="width: 190px; margin-left: 12px"
                    @change="chengNuoJiaoQiPFun('0')"
                />
                <el-date-picker
                    v-model="state.newChengNuoJiaoQiP"
                    type="date"
                    placeholder="批量修改选中承诺最新交期"
                    size="small"
                    style="width: 190px; margin-left: 12px"
                    @change="chengNuoJiaoQiPFun('1')"
                />
              </div>
            </div>
          </div>
        </template>
        <template #menu="{ row }">
          <el-button type="text" icon="el-icon-pie-chart" @click="toPurchaseDetails(row)">查看</el-button>
        </template>
      </avue-crud>
    </el-card>
    <selectedData ref="selectedDataRef" :showes="state.selectedDataShow" :listData="state.selectedData" @generateDocuments="generateDocumentsFun" @close="state.selectedDataShow = false"/>
  </div>
</template>

<script lang="ts" setup>
import {reactive, onMounted, computed, nextTick, ref} from 'vue';
import { useRouter,useRoute } from 'vue-router';
import { listApi } from '../../api/list/index';
// import { useI18n } from 'vue-i18n';
import SelectedData from '/@/views/mssPurchaseOrder/selectedData.vue';
import { ElMessage } from 'element-plus';
const selectedDataRef = ref()
// const { t } = useI18n();
const router = useRouter();
const route = useRoute()
// 定义变量内容
const state = reactive({
  page: {
    total: 1000,
    currentPage: 1,
    pageSize: 25,
  },
  option: {
    height: '720',
    tip: false,
    index: false,
    menuWidth: 120,
    border: true,
    delBtn: false,
    editBtn: false,
    align: 'center',
    // searchLabelWidth:100,
    selection: true,
    searchMenuSpan: 3,
    addBtn: false,
    column: [
      { label: 'PO号', prop: 'fBillNo', /*search: true,*/ searchSpan: 3, width: '125' },
      { label: '采购日期', prop: 'fDate', /*search: true,*/ type: 'datetime', searchSpan: 6, searchRange: true },
      {
        label: '关闭状态',
        prop: 'fCancelStatus',
        dicData: [
          { label: '未关闭', value: 'A' },
          { label: '已关闭', value: 'B' },
        ],
        width: '90',
      },
      { label: '物料编码', prop: 'materialCode', width: '120' },
      { label: '物料名称', prop: 'materialName', width: '240' },
      { label: '采购单位', prop: 'unitName', width: '90' },
      { label: '采购数量', prop: 'qty', width: '90' },
      { label: '交货日期', prop: 'fDeliveryDate', width: '165' },
      {
        label: '业务状态',
        prop: 'fmrpCloseStatus' /*search: true,*/,
        searchSpan: 3,
        dicData: [
          { label: '正常', value: 'A' },
          { label: '业务关闭', value: 'B' },
        ],
        width: '90',
      },
      { label: '累计收料数量', prop: 'sendedQty', width: '110' },
      { label: '剩余收料数量', prop: 'notSendQty' },
      { label: '供应商承诺交期', prop: 'chengNuoJiaoQi', width: '140' },
      { label: '供应商承诺最新交期', prop: 'newChengNuoJiaoQi', width: '160' },
    ],
  },
  data: [],
  elDatePicker: '',
  formData: {
    fBillNo: '',
    fDateBegin: '',
    fDateEmd: '',
    fmrpCloseStatus: '',
  },
  selectedData: [],
  chengNuoJiaoQiP: '',
  newChengNuoJiaoQiP: '',
  selectedDataShow:false,
  loading:false,
  topId:''
});
const selectionChange = (list: any) => {
  state.selectedData = list;
};
const chengNuoJiaoQiPFun = (e: string) => {
  if (state.selectedData.length != 0) {
    let arr: any = [];
    if (e === '0') {
      state.selectedData.forEach((item: any) => {
        arr.push({ id: item.id, newTime: state.chengNuoJiaoQiP });
      });
      batchSetChengNuoJiaoQiFun(arr)
    }
    if (e === '1') {
      state.selectedData.forEach((item: any) => {
        arr.push({ id: item.id, newTime: state.newChengNuoJiaoQiP });
      });
      batchSetNewChengNuoJiaoQiFun(arr)
    }
  } else {
    ElMessage.warning('请先选中数据');
  }
};
const batchSetChengNuoJiaoQiFun = (arr:any) => {
  listApi().batchSetChengNuoJiaoQi(arr).then((res: any) => {
    if (res.resultCode === 0) {
      ElMessage.success('操作成功');
      getList();
      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('操作成功');
      getList();
    }
    if (res.resultCode === -1) {
      ElMessage.success(res.errorMessage);
    }
  });
}
const generateDocumentsFun = () => {
  state.selectedDataShow = false
  getList()
}
//跳转详情
const toPurchaseDetails = (item: any) => {
  router.push({
    path: '/purchaseDetails',
    query: {
      topId: item.fiD,
    },
  });
};
const elDatePickerFun = (val: any) => {
  state.formData.fDateBegin = val[0];
  state.formData.fDateEmd = val[1];
};
//接口数据处理
const selectFun = () => {
  state.page.currentPage = 1;
  state.page.pageSize = 20;
  getList();
};
const resetFun = () => {
  state.page.currentPage = 1;
  state.page.pageSize = 20;
  state.elDatePicker = '';
  state.formData = {
    fBillNo: '',
    fDateBegin: '',
    fDateEmd: '',
    fmrpCloseStatus: '',
  };
  getList();
};

const getList = () => {
  state.loading = true
  listApi().getPurchaseOrderItemList({
    fid:state.topId
  }).then((res:any) => {
    if(res.resultCode === 0){
      state.data = res.data
    }
  })
};
// 页面加载时
onMounted(() => {
  state.topId = route.query.topId as string
  getList()
});
</script>

<style lang="scss" scoped>
: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>