erp_fans/src/views/EHSD/procurement/purchasedEHSD/index.vue

<template>
  <div class="pageIndexClass">
    <byTable :source="sourceList.data" :pagination="sourceList.pagination" :config="config" :loading="loading" :selectConfig="selectConfig"
             :row-class-name="getRowClass" highlight-current-row @get-list="getList">
      <template #code="{ item }">
        <div v-if="Number(item.sumPayMoney) > Number(item.amount)" style="cursor: pointer; color: #f54a45" @click="handleClickCode(item)">
          {{ item.code }}
        </div>
        <div v-else style="cursor: pointer; color: #409eff" @click="handleClickCode(item)">
          {{ item.code }}
        </div>
      </template>
      <template #amount="{ item }">
        <div>
          <!-- <span style="padding-right: 4px">{{ item.currency }}</span> -->
          <span>￥ {{ moneyFormat(item.amount, 2) }}</span>
        </div>
      </template>
      <template #sumPayMoney="{ item }">
        <div>
          <!-- <span style="padding-right: 4px">{{ item.currency }}</span> -->
          <span>￥ {{ moneyFormat(item.sumPayMoney, 2) }}</span>
        </div>
      </template>

      <template #payStatus="{ item }">
        <div style="width:100%">
          <span :class="{'tag-active':item.payStatus==20,'tag-active-1':item.payStatus==10}">{{dictValueLabel(item.payStatus, payStatus)}}</span>
        </div>
      </template>

    </byTable>
    <el-dialog title="打印" v-if="openPdf" v-model="openPdf" width="920px">
      <PurchasePDF :rowData="rowData"></PurchasePDF>
      <!-- <PurchasePDFOne :rowData="rowData"></PurchasePDFOne> -->
      <!-- <PurchasePDFOneNew :rowData="rowData" ref="PdfDom"></PurchasePDFOneNew> -->
      <!-- <template #footer ref="printBtn">
        <el-button @click="openPdf = false" size="default">关闭</el-button>
        <el-button type="primary" v-print="printObj" size="default">打印</el-button>
        <el-button type="primary" @click="clickDownload()" size="default">下载PDF</el-button>
        <el-button type="primary" @click="exportExcel()" size="default">导出Excel</el-button>
      </template> -->
    </el-dialog>

    <el-dialog title="到货登记" v-model="arrivalDialog" width="80%" destroy-on-close>
      <el-tabs v-model="activeName" class="demo-tabs" type="card" @tab-change="handleTabChange">
        <el-tab-pane label="到货登记" name="1">
          <byForm :formConfig="formConfig" :formOption="formOption" v-model="formData.data" :rules="rules" ref="formDom" v-loading="submitLoading">
            <template #details>
              <div style="width:100%;padding:0 15px">
                <el-table :data="formData.data.arrivalDetailList">
                  <el-table-column label="商品图片" width="80">
                    <template #default="{ row }">
                      <div v-if="row.fileUrl">
                        <img :src="row.fileUrl" class="pic" @click="openImg(row.fileUrl)" />
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="productCode" label="商品编码" width="200" />
                  <el-table-column prop="productName" label="商品名称" min-width="130" />
                  <el-table-column label="规格尺寸 (cm)" width="140">
                    <template #default="{ row, $index }">
                      <div style="width: 100%">
                        {{row.productLength}} * {{row.productWidth}} * {{row.productHeight}}
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column label="采购数量" prop="purchaseQuantity" width="100" />
                  <el-table-column label="可登记最大数量（105%）" prop="maxQuantity" width="190" />
                  <el-table-column label="已到货数量" prop="arrivalQuantity" width="100" />
                  <el-table-column prop="quantity" label="到货数量" width="130">
                    <template #default="{ row, $index }">
                      <el-form-item :prop="'arrivalDetailList.' + $index + '.quantity'" :rules="rules.quantity" :inline-message="true"
                                    class="margin-b-0">
                        <el-input-number onmousewheel="return false;" v-model="row.quantity" placeholder="请输入" style="width: 100%" :precision="0"
                                         :controls="false" :min="0" />
                      </el-form-item>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </template>

            <template #details1>
              <div style="width:100%;padding:0 15px">
                <el-table :data="formData.data.arrivalDetailListOne">
                  <el-table-column label="到货日期" prop="arrivalTime" width="150" />
                  <el-table-column label="商品图片" width="80">
                    <template #default="{ row }">
                      <div v-if="row.fileUrl">
                        <img :src="row.fileUrl" class="pic" @click="openImg(row.fileUrl)" />
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="productCode" label="商品编码" width="200" />
                  <el-table-column prop="productName" label="商品名称" min-width="130" />
                  <el-table-column label="规格尺寸 (cm)" width="140">
                    <template #default="{ row, $index }">
                      <div style="width: 100%">
                        {{row.productLength}} * {{row.productWidth}} * {{row.productHeight}}
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column label="采购数量" prop="purchaseQuantity" width="100" />
                  <el-table-column label="到货数量" prop="quantity" width="100" />
                </el-table>
              </div>
            </template>
          </byForm>
        </el-tab-pane>
        <el-tab-pane label="历史到货登记" name="2">
          <div style="margin:10px 0">
            <TitleInfo :content="'历史到货登记'"></TitleInfo>
          </div>
          <div style="width:100%;padding:0 15px">
            <el-table :data="formData.data.arrivalDetailListOne">
              <el-table-column label="到货日期" prop="arrivalTime" width="110" :formatter="(row)=>row.arrivalTime.slice(0,10)" />
              <el-table-column label="商品图片" width="80">
                <template #default="{ row }">
                  <div v-if="row.fileUrl">
                    <img :src="row.fileUrl" class="pic" @click="openImg(row.fileUrl)" />
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="productCode" label="商品编码" width="200" />
              <el-table-column prop="productName" label="商品名称" min-width="130" />
              <el-table-column label="规格尺寸 (cm)" width="140">
                <template #default="{ row, $index }">
                  <div style="width: 100%">
                    {{row.productLength}} * {{row.productWidth}} * {{row.productHeight}}
                  </div>
                </template>
              </el-table-column>
              <!-- <el-table-column label="采购数量" prop="purchaseQuantity" width="100" /> -->
              <el-table-column label="到货数量" prop="quantity" width="100" />
              <el-table-column label="实际入库数量" prop="receiptQuantity" width="110" />
              <el-table-column label="入库状态" prop="receiptStatus" width="100" :formatter="(row)=>dictValueLabel(row.receiptStatus,inBoundStatus)" />
              <el-table-column label="账期" width="150">
                <template #default="{ row, $index }">
                  <div style="width: 100%">
                    <el-form-item :prop="'arrivalDetailListOne.' + $index + '.accountPeriod'" :rules="rules.accountPeriod" :inline-message="true"
                                  class="margin-b-0">
                      <el-date-picker v-model="row.accountPeriod" type="month" placeholder="请选择" style="width: 100%" value-format="YYYY-MM"
                                      :disabled-date="disabledFn" :clearable="false" @change="(val)=>handleChangeAccountPeriod(val,row)" />

                    </el-form-item>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
      </el-tabs>
      <template #footer>
        <el-button @click="arrivalDialog = false" size="defualt" v-debounce>取 消</el-button>
        <el-button type="primary" @click="submitForm()" size="defualt" v-debounce>
          确 定
        </el-button>
      </template>
    </el-dialog>

  </div>
</template>

<script setup>
import { computed, ref } from "vue";
import byTable from "@/components/byTable/index";
import byForm from "@/components/byForm/index";
import { ElMessage, ElMessageBox } from "element-plus";
import PurchasePDF from "@/components/PDF/purchasePDF.vue";
// import PurchasePDFOne from "@/components/PDF/purchasePDFOne.vue";
// import PurchasePDFOneNew from "@/components/PDF/purchasePDFOneNew.vue";

const route = useRoute();
const { proxy } = getCurrentInstance();
const activeName = ref("1");
const supplierList = ref([]);
const status = ref([
  {
    label: "草稿",
    value: 0,
  },
  {
    label: "审批中",
    value: 10,
  },
  {
    label: "驳回",
    value: 20,
  },
  {
    label: "已采购",
    value: 30,
  },
  {
    label: "变更中",
    value: 60,
  },
  {
    label: "已变更",
    value: 70,
  },
  {
    label: "作废",
    value: 88,
  },
  {
    label: "终止",
    value: 99,
  },
]);
const inBoundStatus = ref([
  {
    label: "待入库",
    value: 0,
  },
  {
    label: "部分入库",
    value: 1,
  },
  {
    label: "入库完成",
    value: 2,
  },
]);
const payStatus = ref([
  {
    label: "未付款",
    value: 0,
  },
  {
    label: "部分付款",
    value: 10,
  },
  {
    label: "已付款",
    value: 20,
  },
]);
const sourceList = ref({
  data: [],
  pagination: {
    total: 0,
    pageNum: 1,
    pageSize: 10,
    keyword: "",
    status: "",
    payStatus: "",
  },
});
const loading = ref(false);
const companyData = ref([]);
const selectConfig = computed(() => {
  return [
    {
      label: "业务公司",
      prop: "companyId",
      data: proxy.useUserStore().allDict["list_company_data"],
    },
    {
      label: "采购状态",
      prop: "status",
      data: status.value,
    },
    {
      label: "付款状态",
      prop: "payStatus",
      data: payStatus.value,
    },
  ];
});
const config = computed(() => {
  return [
    {
      attrs: {
        label: "业务公司",
        prop: "companyName",
        width: 130,
      },
    },
    {
      attrs: {
        label: "采购单号",
        slot: "code",
        width: 180,
      },
    },
    {
      attrs: {
        label: "供应商",
        prop: "supplyName",
        "min-width": 220,
      },
      // render(type) {
      //   return proxy.dictValueLabel(type, supplierList.value);
      // },
    },
    {
      attrs: {
        label: "采购金额",
        prop: "amount",
        width: 110,
      },
      render(val) {
        return proxy.moneyFormat(val, 2);
      },
    },
    {
      attrs: {
        label: "退货金额",
        prop: "backAmount",
        width: 110,
      },
      render(val) {
        return proxy.moneyFormat(val, 2);
      },
    },
    {
      attrs: {
        label: "应付金额",
        prop: "payableAmount",
        width: 110,
      },
      render(val) {
        return proxy.moneyFormat(val, 2);
      },
    },
    {
      attrs: {
        label: "已付款金额",
        prop: "sumPayMoney",
        width: 110,
      },
      render(val) {
        return proxy.moneyFormat(val, 2);
      },
    },
    {
      attrs: {
        label: "采购状态",
        prop: "status",
        width: 140,
      },
      render(type) {
        return proxy.dictValueLabel(type, status.value);
      },
    },
    {
      attrs: {
        label: "付款状态",
        prop: "payStatus",
        slot: "payStatus",
        width: 140,
      },
      // render(type) {
      //   return proxy.dictValueLabel(type, payStatus.value);
      // },
    },
    {
      attrs: {
        label: "采购人",
        prop: "userName",
        width: 140,
      },
    },
    {
      attrs: {
        label: "采购时间",
        prop: "createTime",
        width: 160,
      },
    },
    {
      attrs: {
        label: "操作",
        width: 200,
        align: "right",
        fixed: "right",
      },
      renderHTML(row) {
        return [
          row.status == 30 && row.arrivalStatus == 0
            ? {
                attrs: {
                  label: "变更",
                  type: "primary",
                  text: true,
                },
                el: "button",
                click() {
                  handleChange(row);
                },
              }
            : {},
          row.status == 30
            ? {
                attrs: {
                  label: "到货登记",
                  type: "primary",
                  text: true,
                },
                el: "button",
                click() {
                  handleArrival(row);
                },
              }
            : {},
          {
            attrs: {
              label: "打印",
              type: "primary",
              text: true,
            },
            el: "button",
            click() {
              handlePrintPdf(row);
            },
          },
          // && Number(row.amount) > Number(row.sumPayMoney)
          row.status == 10 || (row.status == 30 && Number(row.sumPayMoney) == 0)
            ? {
                attrs: {
                  label: "作废",
                  type: "danger",
                  text: true,
                },
                el: "button",
                click() {
                  ElMessageBox.confirm(
                    "此操作将作废该数据, 是否继续?",
                    "提示",
                    {
                      confirmButtonText: "确定",
                      cancelButtonText: "取消",
                      type: "warning",
                    }
                  ).then(() => {
                    proxy
                      .post("/ehsdPurchase/cancellation", {
                        id: row.id,
                        status: 88,
                      })
                      .then(() => {
                        ElMessage({
                          message: "作废成功",
                          type: "success",
                        });
                        getList();
                      });
                  });
                },
              }
            : {},
          row.status == 30 && Number(row.amount) > Number(row.sumPayMoney)
            ? {
                attrs: {
                  label: "终止",
                  type: "primary",
                  text: true,
                },
                el: "button",
                click() {
                  ElMessageBox.confirm(
                    "此操作将终止该数据, 是否继续?",
                    "提示",
                    {
                      confirmButtonText: "确定",
                      cancelButtonText: "取消",
                      type: "warning",
                    }
                  ).then(() => {
                    proxy
                      .post("/ehsdPurchase/edit", {
                        id: row.id,
                        status: 99,
                      })
                      .then(() => {
                        ElMessage({
                          message: "终止",
                          type: "success",
                        });
                        getList();
                      });
                  });
                },
              }
            : {},
        ];
      },
    },
  ];
});
const getDict = () => {
  proxy
    .post("/supplierInfo/page", { pageNum: 1, pageSize: 999 })
    .then((res) => {
      supplierList.value = res.rows.map((item) => {
        return {
          ...item,
          label: item.name,
          value: item.id,
        };
      });
    });
};
const getList = async (req) => {
  sourceList.value.pagination = { ...sourceList.value.pagination, ...req };
  loading.value = true;
  proxy.post("/ehsdPurchase/page", sourceList.value.pagination).then((res) => {
    console.log(res);
    sourceList.value.data = res.rows;
    sourceList.value.pagination.total = res.total;
    setTimeout(() => {
      loading.value = false;
    }, 200);
  });
};
getDict();
if (route.query.code) {
  sourceList.value.pagination.keyword = route.query.code;
}
getList();

const openPdf = ref(false);
const pdfData = ref({});
const rowData = ref({});
const handlePrintPdf = (row) => {
  rowData.value = {
    id: row.id,
    code: row.code,
  };
  rowData.value = row;
  openPdf.value = true;
};
const clickDownload = () => {
  proxy.getPdf("购销合同" + rowData.value.code);
};
const pdfDom = ref(null);
const printObj = ref({
  id: "pdfDom",
  popTitle: "",
  extraCss:
    "https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css, https://cdn.bootcdn.net/ajax/libs/hover.css/2.3.1/css/hover-min.css",
  extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',
});

const handleClickCode = (row) => {
  // let submitType = row.dataResource > 0 ? "10" : "20";
  proxy.$router.push({
    path: "/platform_manage/process/processApproval",
    query: {
      flowKey: "purchase_flow",
      id: row.flowId,
      processType: 20,
      businessId: row.id,
      // submitType,
    },
  });
};

const getRowClass = ({ row }) => {
  if (Number(row.sumPayMoney) > Number(row.amount)) {
    return "redClass";
  }
  return "";
};

const handleChange = (row) => {
  let submitType = row.dataResource > 0 ? "10" : "20";
  let type = "";
  if (row.dataResource == 1) {
    type = 1;
  } else if (row.dataResource == 2) {
    type = 2;
  }
  proxy.$router.push({
    path: "/platform_manage/process/processApproval",
    query: {
      flowKey: "purchase_update_flow",
      flowName: "采购订单变更",
      random: proxy.random(),
      businessId: row.id,
      submitType,
      type,
    },
  });
};

const formData = reactive({
  data: {},
});
const formOption = reactive({
  inline: true,
  labelWidth: 110,
  itemWidth: 100,
  rules: [],
});
const formConfig = computed(() => {
  return [
    {
      type: "title1",
      title: "基本信息",
    },
    {
      type: "input",
      prop: "code",
      label: "采购单号",
      itemWidth: 50,
      disabled: true,
    },
    {
      type: "input",
      prop: "sellCorporationName",
      label: "供应商",
      itemWidth: 50,
      disabled: true,
    },
    {
      type: "date",
      prop: "arrivalTime",
      label: "到货日期",
      itemType: "date",
      itemWidth: 50,
    },
    {
      type: "title1",
      title: "到货明细",
    },
    {
      type: "slot",
      slotName: "details",
      label: "",
    },
    // {
    //   type: "title1",
    //   title: "历史到货登记",
    // },
    // {
    //   type: "slot",
    //   slotName: "details1",
    //   label: "",
    // },
  ];
});

const rules = ref({
  arrivalTime: [
    { required: true, message: "请选择到货日期", trigger: "change" },
  ],
  quantity: [{ required: true, message: "请输入到货数量", trigger: "blur" }],
});

const formDom = ref(null);
const arrivalDialog = ref(false);
const submitLoading = ref(false);
const handleArrival = (row) => {
  proxy.post("/ehsdPurchase/detail", { id: row.id }).then((res) => {
    formData.data = {
      purchaseId: row.id,
      code: row.code,
      sellCorporationName: res.sellCorporationName,
      arrivalDetailList: res.purchaseProductList.map((x) => ({
        // ...x,
        productId: x.productId,
        productCode: x.productCode,
        productName: x.productName,
        productLength: x.productLength,
        productWidth: x.productWidth,
        productHeight: x.productHeight,
        purchaseDetailId: x.id,
        purchaseQuantity: x.quantity,
        maxQuantity: parseFloat(x.quantity * 1.05).toFixed(0),
        arrivalQuantity: x.arrivalQuantity,
        quantity: null,
      })),
      arrivalDetailListOne: res.arrivalDetailList,
    };
    if (
      formData.data.arrivalDetailList &&
      formData.data.arrivalDetailList.length > 0
    ) {
      let productIds = formData.data.arrivalDetailList.map((x) => x.productId);
      proxy.getFileData({
        businessIdList: productIds,
        data: formData.data.arrivalDetailList,
        att: "productId",
        businessType: "0",
        fileAtt: "fileList",
        filePathAtt: "fileUrl",
      });
    }
    if (
      formData.data.arrivalDetailListOne &&
      formData.data.arrivalDetailListOne.length > 0
    ) {
      let productIds = formData.data.arrivalDetailListOne.map(
        (x) => x.productId
      );
      setTimeout(() => {
        proxy.getFileData({
          businessIdList: productIds,
          data: formData.data.arrivalDetailListOne,
          att: "productId",
          businessType: "0",
          fileAtt: "fileList",
          filePathAtt: "fileUrl",
        });
      }, 500);
    }
  });
  arrivalDialog.value = true;
};
const submitForm = () => {
  formDom.value.handleSubmit(() => {
    let allQuantity = 0;
    for (let i = 0; i < formData.data.arrivalDetailList.length; i++) {
      const ele = formData.data.arrivalDetailList[i];
      allQuantity += ele.quantity;
      if (
        ele.quantity + ele.arrivalQuantity >
        Number(parseFloat(Number(ele.purchaseQuantity * 1.05)).toFixed(2))
      ) {
        return proxy.msgTip("到货量超出上限，若要接收，请另发申购单", 2);
      }
    }
    if (!(allQuantity > 0)) {
      return proxy.msgTip("到货总量不能为0", 2);
    }
    submitLoading.value = true;
    proxy.post("/arrival/add", formData.data).then(
      (res) => {
        ElMessage({
          message: "操作成功",
          type: "success",
        });
        arrivalDialog.value = false;
        submitLoading.value = false;
        // getList();
      },
      (err) => {
        submitLoading.value = false;
      }
    );
  });
};

const PdfDom = ref(null);
const exportExcel = () => {
  PdfDom.value.exportExcel();
};

const handleChangeAccountPeriod = (val, row) => {
  proxy
    .post("/arrivalDetail/editAccountPeriods", {
      id: row.id,
      accountPeriod: val,
    })
    .then(
      (res) => {
        return proxy.msgTip("操作成功");
      },
      (err) => {}
    );
};
</script>

<style lang="scss" scoped>
.tenant {
  padding: 20px;
}
::v-deep(.el-input-number .el-input__inner) {
  text-align: left;
}
.baseRow {
  min-height: 24px;
  border-top: 1px solid black;
  border-left: 1px solid black;
}
.contentRow {
  border-right: 1px solid black;
  line-height: 24px;
  padding-left: 4px;
}
</style>
<style>
.redClass {
  color: #f54a45 !important;
}
</style>