erp_jxst/src/views/purchaseSales/outAndInWarehouse/record/index.vue

<template>
  <div class="tenant">
    <div class="content">
      <byTable :source="sourceList.data" :pagination="sourceList.pagination" :config="config" :loading="loading" :selectConfig="selectConfig"
               highlight-current-row :action-list="[
         
        ]" @get-list="getList">
        <!-- {
            text: '导出Excel',
            action: () => deriveExcel(),
          }, -->
        <template #warehouseName="{ item }">
          <div>
            <!-- <span v-if="item.opType == 1">{{ item.toWarehouseName }}</span>
            <span v-else>{{ item.warehouseName }}</span> -->
            <span>{{ item.warehouseName }}</span>
          </div>
        </template>
      </byTable>
    </div>

    <el-dialog title="打印" v-if="openPdf" v-model="openPdf" width="840px">
      <div id="pdfDom" ref="pdfDom" style="width: 776px">
        <div class="title">
          {{ dictValueLabel(printData.type, typeList) }}单
        </div>
        <div class="flex-top-bottom">
          <div>
            <span v-show="printData.corporateName && printData.code">
              {{ printData.corporateName }} （{{ printData.code }}）</span>
          </div>
          <div>{{ printData.createTime }}</div>
        </div>
        <table border="1" style="width: 100%" class="table">
          <tr>
            <td style="width: 80px">物品编码</td>
            <td>物品名称</td>
            <td>规格型号</td>
            <td style="width: 60px">单位</td>
            <td style="width: 60px">数量</td>
            <td style="width: 70px">单价</td>
            <td style="width: 90px">金额</td>
          </tr>
          <tr v-for="(row, index) in printData.list" :key="row.id">
            <td>{{ row.productCode }}</td>
            <td>{{ row.productName }}</td>
            <td>{{ row.productSpec }}</td>
            <td>{{ dictValueLabel(row.productUnit, productUnit) }}</td>
            <td>{{ row.quantity }}</td>
            <td>
              <!-- {{ dictValueLabel(printData.currency, currencyType) }} -->
              <span v-show="row.price">
                {{ printData.currency }}
                {{ row.price }}
              </span>
            </td>
            <td>
              <!-- {{ dictValueLabel(printData.currency, currencyType) }} -->
              <span v-show="row.amount">
                {{ printData.currency }}
                {{ row.amount }}
              </span>
            </td>
          </tr>
        </table>
        <div class="flex-top-bottom">
          <div>仓库名称：{{ printData.warehouseName }}</div>
          <div>
            合计金额：{{ getTotalAmount(printData.currency, printData.list) }}
          </div>
        </div>
      </div>
      <template #footer ref="printBtn">
        <el-button @click="openPdf = false" size="large">关闭</el-button>
        <el-button type="primary" v-print="printObj" size="large">打印</el-button>
        <el-button type="primary" @click="clickDownload()" size="large">下载PDF</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { computed, nextTick, ref, toRef } from "vue";
import byTable from "@/components/byTable/index";

const { proxy } = getCurrentInstance();
const route = useRoute();
const opTypeList = ref([
  {
    label: "入库",
    value: "1",
  },
  {
    label: "出库",
    value: "2",
  },
]);
const typeList = ref([
  {
    label: "手动入库",
    value: "1",
  },
  {
    label: "手动出库",
    value: "2",
  },
  {
    label: "调仓入库",
    value: "3",
  },
  {
    label: "待入库入库",
    value: "4",
  },
  {
    label: "待出库出库",
    value: "5",
  },
  // {
  //   label: "组合入库",
  //   value: "6",
  // },
  // {
  //   label: "组合出库",
  //   value: "7",
  // },
  // {
  //   label: "组合拆分入库",
  //   value: "8",
  // },
  // {
  //   label: "组合拆分出库",
  //   value: "9",
  // },
  // {
  //   label: "京东销售出库",
  //   value: "10",
  // },
  {
    label: "调仓出库",
    value: "11",
  },
  {
    label: "销售订单出库",
    value: "12",
  },
  {
    label: "退货出库",
    value: "13",
  },
  {
    label: "到货入库",
    value: "14",
  },
  // {
  //   label: "京东退货入库",
  //   value: "15",
  // },
  {
    label: "完工入库",
    value: "17",
  },
  {
    label: "采购到货",
    value: "18",
  },
  {
    label: "到货质检",
    value: "19",
  },
  {
    label: "生产任务出库",
    value: "20",
  },
  {
    label: "工单出库",
    value: "21",
  },
  {
    label: "库存盘点修正入库",
    value: "22",
  },
  {
    label: "库存盘点修正出库",
    value: "23",
  },
  {
    label: "销售合同出库",
    value: "24",
  },
]);
const warehouseList = ref([]);
const productUnit = ref([]);
const currencyType = ref([]);
const sourceList = ref({
  data: [],
  pagination: {
    total: 0,
    pageNum: 1,
    pageSize: 10,
    keyword: "",
    opType: "",
    productId: "",
    warehouseId: "",
  },
});
const loading = ref(false);
const openPdf = ref(false);
let printData = ref({});
const selectConfig = computed(() => {
  return [
    {
      label: "操作类型",
      prop: "opType",
      data: opTypeList.value,
    },
    {
      label: "出入库类型",
      prop: "type",
      data: typeList.value,
    },
  ];
});
const config = computed(() => {
  return [
    {
      attrs: {
        label: "操作类型",
        prop: "opType",
        width: 80,
      },
      render(type) {
        return proxy.dictValueLabel(type, opTypeList.value);
      },
    },
    {
      attrs: {
        label: "出入库类型",
        prop: "type",
        width: 130,
      },
      render(type) {
        return proxy.dictValueLabel(type, typeList.value);
      },
    },
    {
      attrs: {
        label: "工单号",
        prop: "workOrderCode",
        width: 110,
      },
    },
    {
      attrs: {
        label: "仓库名称",
        slot: "warehouseName",
      },
    },
    {
      attrs: {
        label: "物品编码",
        prop: "productCode",
        width: 110,
      },
    },
    {
      attrs: {
        label: "物品名称",
        prop: "productName",
      },
    },
    {
      attrs: {
        label: "规格型号",
        prop: "productSpec",
      },
    },
    {
      attrs: {
        label: "单位",
        prop: "productUnit",
        width: 80,
      },
      render(unit) {
        return proxy.dictValueLabel(unit, productUnit.value);
      },
    },
    {
      attrs: {
        label: "操作数量",
        prop: "quantity",
        width: 120,
      },
    },
    {
      attrs: {
        label: "操作人",
        prop: "opUserName",
        width: 130,
      },
    },
    {
      attrs: {
        label: "操作时间",
        prop: "createTime",
        width: 155,
      },
    },
    // {
    //   attrs: {
    //     label: "操作",
    //     width: "80",
    //     align: "center",
    //   },
    //   renderHTML(row) {
    //     return [
    //       {
    //         attrs: {
    //           label: "打印",
    //           type: "primary",
    //           text: true,
    //         },
    //         el: "button",
    //         click() {
    //           handlePrintPdf(row);
    //         },
    //       },
    //     ];
    //   },
    // },
  ];
});
const getDict = () => {
  proxy.post("/warehouse/page", { pageNum: 1, pageSize: 999 }).then((res) => {
    if (res.rows && res.rows.length > 0) {
      warehouseList.value = res.rows.map((item) => {
        return {
          label: item.name,
          value: item.id,
        };
      });
    }
  });
  proxy.getDictOne(["unit", "account_currency"]).then((res) => {
    productUnit.value = res["unit"].map((x) => ({
      label: x.dictValue,
      value: x.dictKey,
    }));
    currencyType.value = res["account_currency"].map((x) => ({
      label: x.dictValue,
      value: x.dictKey,
    }));
  });
};
const getList = async (req) => {
  sourceList.value.pagination = { ...sourceList.value.pagination, ...req };
  loading.value = true;
  proxy
    .post("/stockJournalDetails/page", sourceList.value.pagination)
    .then((res) => {
      sourceList.value.data = res.rows;
      sourceList.value.pagination.total = res.total;
      setTimeout(() => {
        loading.value = false;
      }, 200);
    });
};
getDict();

onMounted(() => {
  if (route.query.productId) {
    sourceList.value.pagination.productId = route.query.productId;
  }
  if (route.query.warehouseId) {
    sourceList.value.pagination.warehouseId = route.query.warehouseId;
  }
  getList();
});

const deriveExcel = () => {
  console.log("deriveExcel");
};

const handlePrintPdf = (row) => {
  proxy.post("/stockJournal/detail", { id: row.stockJournalId }).then((res) => {
    printData.value = res;
    printData.value.createTime = printData.value.createTime.slice(0, 10);
    openPdf.value = true;
  });
};

const getTotalAmount = (currency, arr) => {
  let total = arr.reduce((total, cur) => (total += cur.amount), 0);
  total = total ? total : "";
  if (currency && total) {
    return currency + " " + proxy.moneyFormat(total, 2);
  } else {
    return proxy.moneyFormat(total, 2);
  }
};

const clickDownload = () => {
  proxy.getPdf(
    proxy.dictValueLabel(printData.value.type, typeList.value) + "单"
  );
};
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"/>',
});
</script>

<style lang="scss" scoped>
.tenant {
  padding: 20px;
}
::v-deep(.el-input-number .el-input__inner) {
  text-align: left;
}
#pdfDom {
  font-size: 12px;
  color: #000000;
  padding: 60px 30px;
  .title {
    font-size: 16px;
    // font-weight: 700;
    margin-bottom: 20px;
    text-align: center;
  }
  .table {
    border-collapse: collapse;
    border-spacing: 0;
    td {
      text-align: center;
      padding: 8px 0px;
    }
  }
  .flex-top-bottom {
    display: flex;
    justify-content: space-between;
    margin: 5px 0px;
  }
}
</style>