Merge remote-tracking branch 'origin/dev_天津军泰伟业' into dev_天津军泰伟业

gaoluyang

6 天以前 71a9eef518f2f2f1a1eb2fb90f2eb8ab7b155bc8

 src/views/equipmentManagement/spareParts/index.vue

@@ -2,91 +2,114 @@
  <div class="spare-part-category">
    <div class="table_list">
      <div class="actions">
        <el-text class="mx-1" size="large">设备分类</el-text>
        <el-text class="mx-1"
                 size="large">设备分类</el-text>
        <div>
          <el-button @click="fetchTreeData" :loading="loading">刷新</el-button>
          <el-button type="primary" @click="addCategory" >新增</el-button>
          <el-button @click="fetchTreeData"
                     :loading="loading">刷新</el-button>
          <el-button type="primary"
                     @click="addCategory">新增</el-button>
        </div>
      </div>
      <el-table
        v-loading="loading"
      <el-table v-loading="loading"
        :data="renderTableData"
        style="width: 100%; margin-top: 10px;"
        border
        row-key="id"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <el-table-column prop="name" label="分类名称" width="450">
                :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
        <el-table-column prop="name"
                         label="分类名称"
                         width="450">
          <template #default="{ row }">
            <span :style="{ paddingLeft: getIndentation(row) + 'px' }">
              {{ row.name }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="sparePartsNo" label="分类编号" width="200"></el-table-column>
        <el-table-column prop="status" label="状态" width="100">
        <el-table-column prop="sparePartsNo"
                         label="分类编号"
                         width="200"></el-table-column>
        <el-table-column prop="status"
                         label="状态"
                         width="100">
          <template #default="{ row }">
            <el-tag type="success" size="small">{{ row.status }}</el-tag>
            <el-tag type="success"
                    size="small">{{ row.status }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="description" label="描述" win-width="330"></el-table-column>
        <el-table-column label="操作" width="180" fixed="right">
        <el-table-column prop="description"
                         label="描述"
                         win-width="330"></el-table-column>
        <el-table-column label="操作"
                         width="180"
                         fixed="right">
          <template #default="{ row }">
            <el-button
              type="text"
            <el-button type="text"
              size="small"
              @click="() => editCategory(row)"
              :disabled="loading"
            >
                       :disabled="loading">
              编辑
            </el-button>
            <el-button
              type="text"
            <el-button type="text"
              size="small"
              @click="() => deleteCategory(row.id)"
              style="color: #f56c6c;"
              :disabled="loading"
            >
                       :disabled="loading">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog title="分类管理" v-model="dialogVisible" width="60%">
      <el-form :model="form" :rules="rules" ref="formRef" label-width="100px">
        <el-form-item label="分类名称" prop="name">
    <el-dialog title="分类管理"
               v-model="dialogVisible"
               width="60%">
      <el-form :model="form"
               :rules="rules"
               ref="formRef"
               label-width="100px">
        <el-form-item label="分类名称"
                      prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="分类编号" prop="sparePartsNo">
        <el-form-item label="分类编号"
                      prop="sparePartsNo">
          <el-input v-model="form.sparePartsNo"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="form.status" placeholder="请选择状态">
            <el-option label="正常" value="正常"></el-option>
            <el-option label="禁用" value="禁用"></el-option>
        <el-form-item label="状态"
                      prop="status">
          <el-select v-model="form.status"
                     placeholder="请选择状态">
            <el-option label="正常"
                       value="正常"></el-option>
            <el-option label="禁用"
                       value="禁用"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="描述" prop="description">
        <el-form-item label="描述"
                      prop="description">
          <el-input v-model="form.description"></el-input>
        </el-form-item>
        <el-form-item label="上级分类" prop="parentId">
          <el-select v-model="form.parentId" placeholder="请选择上级分类">
            <el-option label="无上级分类" :value="null"></el-option>
            <el-option
              v-for="(item, index) in categories"
        <el-form-item label="上级分类"
                      prop="parentId">
          <el-select v-model="form.parentId"
                     placeholder="请选择上级分类">
            <el-option label="无上级分类"
                       :value="null"></el-option>
            <el-option v-for="(item, index) in categories"
              :key="index"
              :label="item.name"
              :value="item.id"
              
            ></el-option>
                       :value="item.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false" :disabled="formLoading">取消</el-button>
          <el-button type="primary" @click="submitForm" :loading="formLoading">确定</el-button>
          <el-button type="primary"
                     @click="submitForm"
                     :loading="formLoading">确定</el-button>
          <el-button @click="dialogVisible = false"
                     :disabled="formLoading">取消</el-button>
        </span>
      </template>
    </el-dialog>
@@ -94,9 +117,15 @@
</template>

<script setup>
import { ref, computed, onMounted, reactive, watch } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { getSparePartsList, addSparePart, editSparePart, delSparePart,getSparePartsTree } from "@/api/equipmentManagement/spareParts";
  import { ref, computed, onMounted, reactive, watch } from "vue";
  import { ElMessage, ElMessageBox } from "element-plus";
  import {
    getSparePartsList,
    addSparePart,
    editSparePart,
    delSparePart,
    getSparePartsTree,
  } from "@/api/equipmentManagement/spareParts";

// 加载状态
const loading = ref(false);
@@ -110,38 +139,34 @@
// 渲染用的表格数据
// const renderTableData = computed(() => buildTree(categories.value));
const renderTableData = ref([]);
const operationType = ref('add')
  const operationType = ref("add");
// 表单引用
const formRef = ref(null);
// 表单数据
const form = reactive({
  id:'',
  name: '',
  sparePartsNo: '',
  status: '',
  description: '',
  parentId: null
    id: "",
    name: "",
    sparePartsNo: "",
    status: "",
    description: "",
    parentId: null,
});

// 表单验证规则
const rules = reactive({
  name: [
    { required: true, message: '请输入分类名称', trigger: 'blur' }
  ],
    name: [{ required: true, message: "请输入分类名称", trigger: "blur" }],
  sparePartsNo: [
    { required: true, message: '请输入分类编号', trigger: 'blur' }
      { required: true, message: "请输入分类编号", trigger: "blur" },
  ],
  status: [
    { required: true, message: '请选择状态', trigger: 'change' }
  ]
    status: [{ required: true, message: "请选择状态", trigger: "change" }],
});
// 获取缩进量
const getIndentation = (row) => {
  const getIndentation = row => {
  // 这里简单返回 20，可根据实际需求实现层级缩进逻辑
  return 20; 
};
// 定义 buildTree 函数
const buildTree = (flatData) => {
  const buildTree = flatData => {
  const map = {};
  const result = [];
  if(flatData){
@@ -167,12 +192,12 @@
    if (res.code === 200) {
      renderTableData.value = res.data;
    } else {
      ElMessage.error(res.message || '获取分类列表失败');
        ElMessage.error(res.message || "获取分类列表失败");
    }
  }catch (error) {
    ElMessage.error('获取分类列表失败');
      ElMessage.error("获取分类列表失败");
  }
}
  };

// 获取分类列表
const fetchCategories = async () => {
@@ -182,10 +207,10 @@
    if (res.code === 200) {
      categories.value = res.data.records;
    } else {
      ElMessage.error(res.message || '获取分类列表失败');
        ElMessage.error(res.message || "获取分类列表失败");
    }
  } catch (error) {
    ElMessage.error('获取分类列表失败');
      ElMessage.error("获取分类列表失败");
  } finally {
    loading.value = false;
  }
@@ -193,43 +218,43 @@

// 新增分类
const addCategory = () => {
  form.id = '';
  form.name = '';
  form.sparePartsNo = '';
  form.status = '';
  form.description = '';
    form.id = "";
    form.name = "";
    form.sparePartsNo = "";
    form.status = "";
    form.description = "";
  form.parentId = null;
  operationType.value = 'add'
    operationType.value = "add";
  dialogVisible.value = true;
  console.log('dialogVisible 更新为', dialogVisible.value);
    console.log("dialogVisible 更新为", dialogVisible.value);
};

// 编辑分类
const editCategory = (row) => {
  const editCategory = row => {
  Object.assign(form, row);
  operationType.value = 'edit'
    operationType.value = "edit";
  dialogVisible.value = true;
};

// 删除分类
const deleteCategory = async (id) => {
  const deleteCategory = async id => {
  try {
    await ElMessageBox.confirm('此操作将永久删除该分类，是否继续?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
      await ElMessageBox.confirm("此操作将永久删除该分类，是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
    });
    loading.value = true;
    const res = await delSparePart(id);
    if (res.code === 200) {
      ElMessage.success('删除成功');
        ElMessage.success("删除成功");
      fetchTreeData();
    } else {
      ElMessage.error(res.message || '删除失败');
        ElMessage.error(res.message || "删除失败");
    }
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('删除失败');
      if (error !== "cancel") {
        ElMessage.error("删除失败");
    }
  } finally {
    loading.value = false;
@@ -242,23 +267,23 @@
  try {
    await formRef.value.validate();
    formLoading.value = true;
    if (operationType.value === 'edit') {
      if (operationType.value === "edit") {
      let res = await editSparePart(form);
      if (res.code === 200) {
      ElMessage.success('编辑成功');
          ElMessage.success("编辑成功");
      dialogVisible.value = false;
      fetchTreeData();
    }
    } else {
      let res = await addSparePart(form);
        if (res.code === 200) {
        ElMessage.success('编辑成功');
          ElMessage.success("编辑成功");
        dialogVisible.value = false;
        fetchTreeData();
      }
    }
  } catch (error) {
    ElMessage.error('请填写完整表单信息');
      ElMessage.error("请填写完整表单信息");
  } finally {
    formLoading.value = false;
  }
@@ -358,7 +383,7 @@

/* 空状态样式 */
.el-table .cell:empty::before {
  content: '-';
    content: "-";
  color: #c0c4cc;
}