sd-new-vue/src/views/group/data-board/quoted-price/index.vue

<template>
  <el-card class="box-card">
    <byTable
      :hideTable="true"
      :hidePagination="true"
      :source="sourceList.data"
      :pagination="sourceList.pagination"
      :config="config"
      :loading="loading"
      :searchConfig="searchConfig"
      highlight-current-row
      @get-list="getList"
      @clickReset="clickReset">
    </byTable>
    <el-form :model="sourceList" ref="quotedPrice">
      <el-table :data="sourceList.data" :row-style="{ height: '35px' }" header-row-class-name="tableHeader" v-loading="loading">
        <el-table-column label="BOM品号" prop="code" width="160" />
        <el-table-column label="BOM品名" prop="name" min-width="220" />
        <el-table-column label="颜色" prop="colour" width="160" />
        <el-table-column label="尺寸（长宽高，cm）" width="200">
          <template #default="{ row }">
            <div>{{ row.length }} * {{ row.width }} * {{ row.height }}</div>
          </template>
        </el-table-column>
        <el-table-column label="成本价" width="160">
          <template #default="{ row, $index }">
            <el-form-item
              :prop="'data.' + $index + '.costPrice'"
              :rules="[{ required: true, message: '请输入成本价', trigger: 'blur' }]"
              :inline-message="true"
              style="width: 100%"
              @change="changePrice(row)">
              <el-input-number
                onmousewheel="return false;"
                v-model="row.costPrice"
                placeholder="成本价"
                style="width: 100%"
                :controls="false"
                :min="0"
                :precision="2" />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="对内销售价（含税）" width="160">
          <template #default="{ row, $index }">
            <el-form-item
              :prop="'data.' + $index + '.internalSellingPrice'"
              :rules="[{ required: true, message: '请输入成本价', trigger: 'blur' }]"
              :inline-message="true"
              style="width: 100%"
              @change="changePrice(row)">
              <el-input-number
                onmousewheel="return false;"
                v-model="row.internalSellingPrice"
                placeholder="成本价"
                style="width: 100%"
                :controls="false"
                :min="0"
                :precision="2" />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="对外销售价（含税）" width="160">
          <template #default="{ row, $index }">
            <el-form-item
              :prop="'data.' + $index + '.externalSellingPrice'"
              :rules="[{ required: true, message: '请输入成本价', trigger: 'blur' }]"
              :inline-message="true"
              style="width: 100%"
              @change="changePrice(row)">
              <el-input-number
                onmousewheel="return false;"
                v-model="row.externalSellingPrice"
                placeholder="成本价"
                style="width: 100%"
                :controls="false"
                :min="0"
                :precision="2" />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="安全库存" prop="safetyStock" width="120" />
      </el-table>
    </el-form>

    <el-row style="padding: 10px 0" justify="end" type="flex">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :current-page="sourceList.pagination.pageNum"
        :page-size="sourceList.pagination.pageSize"
        :total="sourceList.pagination.total"
        @current-change="handlePageChange"
        @size-change="handleSizeChange" />
    </el-row>
  </el-card>
</template>

<script setup>
import byTable from "/src/components/byTable/index";
import { ElMessage } from "element-plus";

const { proxy } = getCurrentInstance();
const sourceList = ref({
  data: [],
  pagination: {
    total: 0,
    pageNum: 1,
    pageSize: 10,
    code: "",
    name: "",
  },
});
const loading = ref(false);
const searchConfig = computed(() => {
  return [
    {
      type: "input",
      prop: "code",
      label: "BOM品号",
    },
    {
      type: "input",
      prop: "name",
      label: "BOM品名",
    },
  ];
});
const config = computed(() => {
  return [];
});
const getList = async (req, status) => {
  if (status) {
    sourceList.value.pagination = {
      pageNum: sourceList.value.pagination.pageNum,
      pageSize: sourceList.value.pagination.pageSize,
    };
  } else {
    sourceList.value.pagination = { ...sourceList.value.pagination, ...req };
  }
  loading.value = true;
  proxy.post("/bomSpec/page", sourceList.value.pagination).then((res) => {
    sourceList.value.data = res.rows;
    sourceList.value.pagination.total = res.total;
    setTimeout(() => {
      loading.value = false;
    }, 200);
  });
};
getList();
const clickReset = () => {
  getList("", true);
};
const handlePageChange = (val) => {
  getList({ pageNum: val });
};
const handleSizeChange = (val) => {
  getList({ pageNum: 1, pageSize: val });
};
const changePrice = (item) => {
  if (
    !(item.costPrice === null || item.costPrice === "") &&
    !(item.internalSellingPrice === null || item.internalSellingPrice === "") &&
    !(item.externalSellingPrice === null || item.externalSellingPrice === "")
  ) {
    proxy.post("/bomSpec/editPrice", item).then(() => {
      ElMessage({ message: "修改完成", type: "success" });
    });
  } else {
    return ElMessage("请输入所有价格");
  }
};
</script>

<style lang="scss" scoped>
::v-deep(.el-input-number .el-input__inner) {
  text-align: left;
}
::v-deep(.cell .el-form-item) {
  margin-bottom: 0px !important;
}
</style>