车间管理页面

yyb

2026-05-08 453d8c81962520db1e865357a7557b1b83b30dfd

车间管理页面

 src/api/basicData/workshop.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,28 @@
import request from "@/utils/request";

/** è½¦é—´åˆ†é¡µæŸ¥è¯¢ POST /workshop/page */
export function workshopPage(data) {
  return request({
    url: "/workshop/page",
    method: "post",
    data,
  });
}

/** è½¦é—´æ–°å¢ž/修改 POST /workshop/save */
export function workshopSave(data) {
  return request({
    url: "/workshop/save",
    method: "post",
    data,
  });
}

/** è½¦é—´åˆ é™¤ POST /workshop/deleteById/{id} */
export function workshopDeleteById(id) {
  return request({
    url: `/workshop/deleteById/${id}`,
    method: "post",
    data: {},
  });
}

 src/views/basicData/workshopManagement/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,294 @@
<template>
  <div class="app-container">
    <div class="search_form">
      <div>
        <span class="search_title ml10">车间名称：</span>
        <el-input
          v-model="searchForm.name"
          style="width: 180px"
          placeholder="请输入车间名称"
          clearable
          @keyup.enter="handleQuery"
        />
        <span class="search_title ml10">负责人：</span>
        <el-input
          v-model="searchForm.principal"
          style="width: 160px"
          placeholder="请输入负责人"
          clearable
          @keyup.enter="handleQuery"
        />
        <el-button type="primary" @click="handleQuery" style="margin-left: 10px">搜索</el-button>
        <el-button @click="handleReset">重置</el-button>
        <el-button type="primary" @click="handleAdd" style="margin-left: 10px">新增车间</el-button>
      </div>
    </div>
    <div class="table_list">
      <PIMTable
        rowKey="id"
        :column="tableColumn"
        :tableData="tableData"
        :page="page"
        height="calc(100vh - 320px)"
        :tableLoading="tableLoading"
        :isSelection="false"
        :isShowPagination="true"
        @pagination="pagination"
      />
    </div>
    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="520px" @close="onDialogClose">
      <el-form :model="formData" :rules="rules" ref="formRef" label-width="100px">
        <el-form-item label="车间名称" prop="name">
          <el-input v-model="formData.name" placeholder="请输入车间名称" maxlength="100" show-word-limit clearable />
        </el-form-item>
        <el-form-item label="负责人" prop="principal">
          <el-input v-model="formData.principal" placeholder="请输入负责人" maxlength="100" clearable />
        </el-form-item>
        <el-form-item label="联系方式" prop="contactPhone">
          <el-input v-model="formData.contactPhone" placeholder="请输入联系方式" maxlength="200" clearable />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="formData.remark" type="textarea" :rows="3" placeholder="请输入备注" maxlength="500" show-word-limit />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="handleSubmit">确定</el-button>
          <el-button @click="dialogVisible = false">取消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
  import { onMounted, reactive, ref } from "vue";
  import { ElMessage, ElMessageBox } from "element-plus";
  import PIMTable from "@/components/PIMTable/PIMTable.vue";
  import { workshopPage, workshopSave, workshopDeleteById } from "@/api/basicData/workshop.js";

  const tableColumn = ref([
    { label: "车间名称", prop: "name", minWidth: "140" },
    { label: "负责人", prop: "principal", minWidth: "120" },
    { label: "联系方式", prop: "contactPhone", minWidth: "160" },
    { label: "备注", prop: "remark", minWidth: "160" },
    {
      label: "操作",
      dataType: "action",
      width: "150",
      fixed: "right",
      operation: [
        {
          name: "编辑",
          clickFun: row => handleEdit(row),
        },
        {
          name: "删除",
          clickFun: row => handleDelete(row),
        },
      ],
    },
  ]);

  const tableData = ref([]);
  const tableLoading = ref(false);
  const page = reactive({
    current: 1,
    size: 10,
    total: 0,
  });

  const searchForm = reactive({
    name: "",
    principal: "",
  });

  const dialogVisible = ref(false);
  const dialogTitle = ref("");
  const formRef = ref(null);
  const formData = reactive({
    id: null,
    name: "",
    principal: "",
    contactPhone: "",
    remark: "",
  });

  const rules = reactive({
    name: [{ required: true, message: "请输入车间名称", trigger: "blur" }],
    principal: [{ required: true, message: "请输入负责人", trigger: "blur" }],
    contactPhone: [{ required: true, message: "请输入联系方式", trigger: "blur" }],
  });

  const isEdit = ref(false);

  function parsePagePayload(res) {
    const payload = res?.data;
    if (!payload) {
      return { records: [], total: 0 };
    }
    if (Array.isArray(payload)) {
      return { records: payload, total: payload.length };
    }
    const records = payload.records ?? payload.list ?? payload.rows ?? [];
    const total = Number(payload.total ?? payload.totalCount ?? 0);
    return { records: Array.isArray(records) ? records : [], total };
  }

  const getList = () => {
    tableLoading.value = true;
    workshopPage({
      name: searchForm.name?.trim() ?? "",
      principal: searchForm.principal?.trim() ?? "",
      contactPhone: "",
      current: page.current,
      size: page.size,
    })
      .then(res => {
        if (res.code === 200) {
          const { records, total } = parsePagePayload(res);
          tableData.value = records;
          page.total = total;
        } else {
          ElMessage.error(res.msg || "查询失败");
        }
      })
      .catch(() => {
        ElMessage.error("查询失败");
      })
      .finally(() => {
        tableLoading.value = false;
      });
  };

  const handleQuery = () => {
    page.current = 1;
    getList();
  };

  const handleReset = () => {
    searchForm.name = "";
    searchForm.principal = "";
    page.current = 1;
    getList();
  };

  const pagination = obj => {
    page.current = obj.page;
    page.size = obj.limit;
    getList();
  };

  const resetFormModel = () => {
    formData.id = null;
    formData.name = "";
    formData.principal = "";
    formData.contactPhone = "";
    formData.remark = "";
  };

  const handleAdd = () => {
    isEdit.value = false;
    dialogTitle.value = "新增车间";
    resetFormModel();
    dialogVisible.value = true;
  };

  const handleEdit = row => {
    isEdit.value = true;
    dialogTitle.value = "编辑车间";
    formData.id = row.id;
    formData.name = row.name ?? "";
    formData.principal = row.principal ?? "";
    formData.contactPhone = row.contactPhone ?? "";
    formData.remark = row.remark ?? "";
    dialogVisible.value = true;
  };

  const handleDelete = row => {
    ElMessageBox.confirm("确定要删除该车间吗？", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => workshopDeleteById(row.id))
      .then(() => {
        ElMessage.success("删除成功");
        getList();
      })
      .catch(err => {
        if (err === "cancel" || err === "close") return;
        ElMessage.error("删除失败");
      });
  };

  const onDialogClose = () => {
    formRef.value?.resetFields?.();
  };

  const handleSubmit = () => {
    formRef.value?.validate(valid => {
      if (!valid) return;
      const payload = {
        id: isEdit.value ? formData.id : null,
        name: formData.name.trim(),
        principal: formData.principal.trim(),
        contactPhone: formData.contactPhone.trim(),
        remark: (formData.remark || "").trim(),
      };
      workshopSave(payload)
        .then(res => {
          if (res.code === 200) {
            ElMessage.success(isEdit.value ? "修改成功" : "新增成功");
            dialogVisible.value = false;
            getList();
          } else {
            ElMessage.error(res.msg || "保存失败");
          }
        })
        .catch(() => {
          ElMessage.error("保存失败");
        });
    });
  };

  onMounted(() => {
    getList();
  });
</script>

<style scoped lang="scss">
  .app-container {
    padding: 24px;
    background-color: #f0f2f5;
    min-height: calc(100vh - 48px);
  }

  .search_form {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 6px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);

    .search_title {
      color: #606266;
      font-size: 14px;
      font-weight: 500;
    }

    .ml10 {
      margin-left: 10px;
    }
  }

  .table_list {
    background-color: #ffffff;
    padding: 16px;
    border-radius: 6px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  }
</style>