添加 单位字段 自动计算属性不可修改

zhang_12370

6 天以前 e251be5ee099b73aebd646cb2ade4246f95d54b1

 src/views/procureMent/index.vue

@@ -18,12 +18,11 @@
      <!-- 操作按钮区 -->
      <el-row :gutter="24" class="table-toolbar">
        <el-button type="primary" :icon="Plus" @click="handleAdd"
          >新建</el-button
        >
          >新建
        </el-button>
        <el-button type="danger" :icon="Delete" @click="handleDelete"
          >删除</el-button
        >
        <!-- <el-button type="info" :icon="Download" @click="handleExport">导出</el-button> -->
          >删除
        </el-button>
      </el-row>
      <!-- 表格组件 -->
      <data-table
@@ -36,7 +35,11 @@
        @delete="handleDeleteSuccess"
        :show-selection="true"
        :border="true"
        :maxHeight="440"
        style="width: 100%; height: calc(100vh - 26em)"
        @viewRow="handleView"
        :operations="['edit', 'viewRow']"
        :operationsWidth="200"
        :show-overflow-tooltip="false"
      />
      <pagination
        v-if="total > 0"
@@ -66,7 +69,14 @@
import DataTable from "@/components/Table/ETable.vue";
import Pagination from "@/components/Pagination";
import ProductionDialog from "./components/ProductionDialog.vue";
import { purchaseRegistration } from "@/api/procureMent";
import {
  purchaseRegistration,
  getSupplyList,
  getCoalInfoList,
  delPR
} from "@/api/procureMent";
import { useDelete } from "@/hooks/useDelete";

import useUserStore from "@/store/modules/user";
// 引入字典数据
const { proxy } = getCurrentInstance();
@@ -117,9 +127,22 @@

// supplier 供应商数据
const columns = ref([
  { prop: "supplierName", label: "供应商名称", minWidth: 200 },
  { prop: "coal", label: "煤种类型", minWidth: 120 },
  { prop: "unit", label: "单位", minWidth: 150 },
  {
    prop: "supplierId",
    label: "供应商名称",
    minWidth: 200,
    formatter: (row) => {
      return MatchQuery(row.supplierId, "supplyRes") || "未知供应商";
    },
  },
  {
    prop: "coalId",
    label: "煤种类型",
    minWidth: 120,
    formatter: (row) => {
      return MatchQuery(row.coalId, "coalRes") || "未知煤种";
    },
  },
  { prop: "purchaseQuantity", label: "采购数量", minWidth: 100 },
  { prop: "priceIncludingTax", label: "单价（含税）", minWidth: 150 },
  { prop: "totalPriceIncludingTax", label: "总价（含税）", minWidth: 100 },
@@ -128,6 +151,16 @@
  { prop: "registrantId", label: "登记人", minWidth: 100 },
  { prop: "registrationDate", label: "登记日期", minWidth: 100 },
]);

// 匹配查询字段
const MatchQuery = (data, name) => {
  const list = name === "supplyRes" ? supplyRes.value.data : coalRes.value.data;
  const item = list.find((items) => items.id == data);
  return item ? item.coal || item.supplierName : "";
};
// 获取供应商列表
const supplyRes = ref([]);
const coalRes = ref([]);

// 重置查询
const resetQuery = () => {
@@ -150,31 +183,32 @@
const productionDialogs = ref(null); // 添加ref声明

const handleAddEdit = () => {
  addOrEdit.value == "add" ? (title.value = "新增") : (title.value = "编辑");
  addOrEdit.value == "add" ? (title.value = "新增") : addOrEdit.value == "viewRow" ? (title.value = "查看") : (title.value = "编辑");
  title.value = title.value + "采购信息";
  openDialog();
};
// 打开弹窗
const openDialog = () => {
  if (addOrEdit.value === "edit") {
  if (addOrEdit.value === "edit" || addOrEdit.value === "viewRow") {
    // 确保复制一份数据，避免直接引用
    copyForm.value = JSON.parse(JSON.stringify(form.value));
    dialogFormVisible.value = true;
    // 触发ref里面的方法
    return;
  }
  console.log(userInfo.value)
  // 新建时初始化表单
  form.value = {
    supplierName: "",
    coal: "",
    unit: "",
    unit: "t",
    purchaseQuantity: "",
    priceExcludingTax: "",
    totalPriceExcludingTax: "",
    priceIncludingTax: "",
    totalPriceIncludingTax: "",
    taxRate: "",
    registrantId: userInfo.value.userName,
    registrantId: userInfo.value.userId,
    registrationDate: new Date().toISOString().split("T")[0],
  };
  // 新建时也需要设置 copyForm 用于重置功能
@@ -202,41 +236,22 @@
  addOrEdit.value = "edit";
  handleAddEdit();
};
const handleDelete = () => {
  if (selectedRows.value.length === 0) {
    ElMessage.warning("请选择要删除的数据");
    return;
  }
  ElMessageBox.confirm(`确定删除选中的数据吗？`, "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      // 模拟删除操作
      tableData.value = tableData.value.filter(
        (item) => !selectedRows.value.includes(item)
      );
      total.value = tableData.value.length;
      ElMessage.success("删除成功");
    })
    .catch(() => {
      ElMessage.info("已取消删除");
    });
const handleView = (row) => {
  form.value = JSON.parse(JSON.stringify(row));
  addOrEdit.value = "viewRow";
  handleAddEdit();
};
// 使用删除组合式函数 - 简化版本
const { handleDeleteBatch: handleDelete } = useDelete({
  deleteApi: delPR,
  selectedRows,
  tableData,
  total,
  confirmText: "确定删除选中的采购记录吗？",
  useLocalUpdate: true
});
const handleDeleteSuccess = (row) => {
  ElMessage.success("删除成功：" + row.supplierName);
};
// 导出
const handleExport = (row) => {
  proxy.download(
    "system/post/export",
    {
      ...queryParams.value,
    },
    `post_${new Date().getTime()}.xlsx`
  );
  ElMessage.success("导出数据：" + row.supplierName);
};
// 成功
const handleSuccess = (val) => {
@@ -248,6 +263,10 @@
const getList = async () => {
  loading.value = true;
  try {
    [supplyRes.value, coalRes.value] = await Promise.all([
      getSupplyList(),
      getCoalInfoList(),
    ]);
    // 传递分页参数
    let res = await purchaseRegistration({
      current: current.value,
@@ -271,6 +290,7 @@
.app-container {
  box-sizing: border-box;
}

.search-form {
  background-color: #fff;
  padding: 20px 20px 0 20px;
@@ -278,6 +298,7 @@
  border-radius: 4px;
  box-shadow: var(--el-box-shadow-light);
}

.search-form :deep(.el-form-item) {
  margin-bottom: 16px;
  width: 100%;
@@ -289,11 +310,13 @@
    width: 50%;
  }
}

@media screen and (min-width: 1200px) {
  .search-form :deep(.el-form-item) {
    width: 18%;
  }
}

.table-toolbar {
  margin-bottom: 20px;
  display: flex;
@@ -306,15 +329,18 @@
  .table-toolbar {
    flex-direction: column;
  }

  .table-toolbar .el-button {
    width: 100%;
  }
}

/* 表格工具栏 */
.table-toolbar,
.table-toolbar > * {
  margin: 0 0 0 0 !important;
}

.table-toolbar {
  margin-bottom: 20px !important;
}