优化文档管理及基础信息页面

张诺

2 天以前 437a70bd86d8adda3da41853b8b1c2706a22fdd7

 src/views/procureMent/index.vue

@@ -2,16 +2,36 @@
  <div class="app-container">
    <el-form :inline="true" :model="queryParams" class="search-form">
      <el-form-item label="搜索">
        <el-input v-model="queryParams.searchText" placeholder="请输入关键词" clearable :style="{ width: '100%' }" />
        <el-input
          v-model="queryParams.searchText"
          placeholder="请输入关键词"
          clearable
          :style="{ width: '100%' }"
        />
      </el-form-item>
      <el-form-item label="供应商名称">
        <el-input v-model="queryParams.supplierName" placeholder="请输入" clearable :style="{ width: '100%' }" />
        <el-input
          v-model="queryParams.supplierName"
          placeholder="请输入"
          clearable
          :style="{ width: '100%' }"
        />
      </el-form-item>
      <el-form-item label="统一人识别号">
        <el-input v-model="queryParams.identifyNumber" placeholder="请输入" clearable :style="{ width: '100%' }" />
        <el-input
          v-model="queryParams.identifyNumber"
          placeholder="请输入"
          clearable
          :style="{ width: '100%' }"
        />
      </el-form-item>
      <el-form-item label="经营地址">
        <el-input v-model="queryParams.address" placeholder="请输入" clearable :style="{ width: '100%' }" />
        <el-input
          v-model="queryParams.address"
          placeholder="请输入"
          clearable
          :style="{ width: '100%' }"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleQuery">查询</el-button>
@@ -21,17 +41,44 @@
    <el-card>
      <!-- 操作按钮区 -->
      <el-row :gutter="24" class="table-toolbar">
        <el-button type="primary" :icon="Plus" @click="handleAdd">新建</el-button>
        <el-button type="danger" :icon="Delete" @click="handleDelete">删除</el-button>
        <el-button type="primary" :icon="Plus" @click="handleAdd"
          >新建</el-button
        >
        <el-button type="danger" :icon="Delete" @click="handleDelete"
          >删除</el-button
        >
        <!-- <el-button type="info" :icon="Download" @click="handleExport">导出</el-button> -->
      </el-row>
      <!-- 表格组件 -->
      <data-table :loading="loading" :table-data="tableData" :columns="columns" @selection-change="handleSelectionChange"
        @edit="handleEdit" @delete="handleDeleteSuccess" :show-selection="true" :border="true" :maxHeight="440" />
      <pagination v-if="total>0" :page="pageNum" :limit="pageSize" :total="total" @pagination="handlePagination"
        :layout="'total, prev, pager, next, jumper'" />
    </el-card>    <ProductionDialog v-model:copyForm="copyForm" v-model:dialogFormVisible="dialogFormVisible" v-model:form="form" :title="title" @submit="handleSubmit"
      @success="handleSuccess" />
      <data-table
        :loading="loading"
        :table-data="tableData"
        :columns="columns"
        @selection-change="handleSelectionChange"
        @edit="handleEdit"
        @delete="handleDeleteSuccess"
        :show-selection="true"
        :border="true"
        :maxHeight="440"
      />
      <pagination
        v-if="total > 0"
        :page="current"
        :limit="pageSize"
        :total="total"
        @pagination="handlePagination"
        :layout="'total, prev, pager, next, jumper'"
      />
    </el-card>
    <ProductionDialog
      v-model:copyForm="copyForm"
      v-model:dialogFormVisible="dialogFormVisible"
      v-model:form="form"
      :title="title"
      @submit="handleSubmit"
      @success="handleSuccess"
      ref="productionDialogs"
    />
  </div>
</template>

@@ -41,32 +88,18 @@
import { Plus, Edit, Delete, Download } from "@element-plus/icons-vue";
import DataTable from "@/components/Table/ETable.vue";
import Pagination from "@/components/Pagination";
import ProductionDialog from './components/ProductionDialog.vue';
import ProductionDialog from "./components/ProductionDialog.vue";
import { purchaseRegistration } from "@/api/procureMent";
import useUserStore from '@/store/modules/user'
import useDictStore from "@/store/modules/dict";
import useUserStore from "@/store/modules/user";
// 引入字典数据
const useDictStores = useDictStore();
useDictStores.setDict({
  id: 1,
  name: "煤种类型",
  type: "coalType",
  items: [
    { label: "无烟煤", value: "anthracite" },
    { label: "烟煤", value: "bituminous" },
    { label: "褐煤", value: "lignite" }
  ]
})
console.log(useDictStores.dict);

const { proxy } = getCurrentInstance()
const { proxy } = getCurrentInstance();
const dialogFormVisible = ref(false);
const form = ref({});
const title = ref("");
// 状态变量
const loading = ref(false);
const total = ref(0);
const pageNum = ref(1)
const current = ref(1);
const pageSize = ref(10);
const selectedRows = ref([]);
const copyForm = ref({});
@@ -76,8 +109,8 @@
  supplierName: "",
  identifyNumber: "",
  address: "",
  pageNum: 1,
  pageSize: 10
  current: 1,
  pageSize: 10,
});
// 是否编辑
const addOrEdit = ref("add");
@@ -92,15 +125,15 @@
const userStore = useUserStore();
// 获取用户信息
const userInfo = ref({});
onMounted(async() => {
  let res = await userStore.getInfo()
onMounted(async () => {
  let res = await userStore.getInfo();
  userInfo.value = res.user;
});
// 分页处理
const handlePagination = (val) => {
  pageNum.value = val.page;
  current.value = val.page;
  pageSize.value = val.limit;
  queryParams.pageNum = val.page;
  queryParams.current = val.page;
  queryParams.pageSize = val.limit;
  getList();
};
@@ -122,7 +155,7 @@
// 重置查询
const resetQuery = () => {
  Object.keys(queryParams).forEach((key) => {
    if (key !== "pageNum" && key !== "pageSize") {
    if (key !== "current" && key !== "pageSize") {
      queryParams[key] = "";
    }
  });
@@ -133,9 +166,18 @@
  handleAddEdit();
};
// 新增编辑
const productionDialogs = ref(null); // 添加ref声明

const handleAddEdit = () => {
  addOrEdit.value == "add" ? (title.value = "新增") : (title.value = "编辑");
  title.value = title.value + "采购信息";
  
  // 正确使用子组件ref
  if (productionDialogs.value) {
    // 这里可以调用子组件的方法
    console.log("子组件实例:", productionDialogs.value.getDropdownData());
  }
  
  openDialog();
};
// 打开弹窗
@@ -144,6 +186,7 @@
    // 确保复制一份数据，避免直接引用
    copyForm.value = JSON.parse(JSON.stringify(form.value));
    dialogFormVisible.value = true;
    // 触发ref里面的方法
    return;
  }
  // 新建时初始化表单
@@ -158,7 +201,7 @@
    totalPriceIncludingTax: "",
    taxRate: "",
    registrantId: userInfo.value.userName,
    registrationDate: new Date().toISOString().split('T')[0]
    registrationDate: new Date().toISOString().split("T")[0],
  };
  // 新建时也需要设置 copyForm 用于重置功能
  copyForm.value = JSON.parse(JSON.stringify(form.value));
@@ -183,22 +226,18 @@
const handleEdit = (row) => {
  form.value = JSON.parse(JSON.stringify(row));
  addOrEdit.value = "edit";
  handleAddEdit()
  handleAddEdit();
};
const handleDelete = () => {
  if (selectedRows.value.length === 0) {
    ElMessage.warning("请选择要删除的数据");
    return;
  }
  ElMessageBox.confirm(
    `确定删除选中的数据吗？`,
    "提示",
    {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning"
    }
  )
  ElMessageBox.confirm(`确定删除选中的数据吗？`, "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      // 模拟删除操作
      tableData.value = tableData.value.filter(
@@ -210,15 +249,19 @@
    .catch(() => {
      ElMessage.info("已取消删除");
    });
}
};
const handleDeleteSuccess = (row) => {
  ElMessage.success("删除成功：" + row.supplierName);
};
// 导出
const handleExport = (row) => {
  proxy.download("system/post/export", {
    ...queryParams.value
  }, `post_${new Date().getTime()}.xlsx`)
  proxy.download(
    "system/post/export",
    {
      ...queryParams.value,
    },
    `post_${new Date().getTime()}.xlsx`
  );
  ElMessage.success("导出数据：" + row.supplierName);
};
// 成功
@@ -233,9 +276,9 @@
  try {
    // 传递分页参数
    let res = await purchaseRegistration({
      pageNum: pageNum.value,
      current: current.value,
      pageSize: pageSize.value,
      ...queryParams
      ...queryParams,
    });
    if (res && res.data) {
      tableData.value = res.data.records || [];
@@ -295,10 +338,10 @@
}
/* 表格工具栏 */
.table-toolbar,
.table-toolbar>* {
.table-toolbar > * {
  margin: 0 0 0 0 !important;
}
.table-toolbar{
.table-toolbar {
  margin-bottom: 20px !important;
}
</style>
</style>