KCGL/inventory-web/src/views/material/list.vue

<template>
  <div class="app-container">
    <el-card shadow="never">
      <div class="filter-wrapper">
        <div class="filter-container">
          <el-input
              v-model="queryParams.keyword"
              placeholder="请输入名称或规格 (支持模糊搜索)"
              style="width: 240px; margin-right: 10px;"
              clearable
              @input="handleInputSearch"
          />

          <el-select
              v-model="queryParams.category"
              placeholder="类别"
              clearable
              filterable
              allow-create
              default-first-option
              style="width: 140px; margin-right: 10px;"
              @change="handleQuery"
          >
            <el-option v-for="item in categoryOptions" :key="item" :label="item" :value="item" />
          </el-select>

          <el-select
              v-model="queryParams.type"
              placeholder="类型"
              clearable
              filterable
              allow-create
              default-first-option
              style="width: 140px; margin-right: 10px;"
              @change="handleQuery"
          >
            <el-option v-for="item in typeOptions" :key="item" :label="item" :value="item" />
          </el-select>

          <el-select
              v-model="queryParams.isEnabled"
              placeholder="状态"
              clearable
              style="width: 100px; margin-right: 10px;"
              @change="handleQuery"
          >
            <el-option label="启用" :value="1" />
            <el-option label="禁用" :value="0" />
          </el-select>

          <el-button type="primary" plain @click="handleQuery">搜索</el-button>
          <el-button plain @click="resetQuery">重置</el-button>
        </div>

        <div class="right-toolbar">
          <el-button type="primary" @click="handleAdd" style="margin-right: 10px">
            <el-icon style="margin-right: 5px"><Plus /></el-icon>新增
          </el-button>

          <el-tooltip content="刷新" placement="top">
            <el-button circle :icon="Refresh" @click="getList" />
          </el-tooltip>

          <el-dropdown trigger="click" @command="handleSizeChange">
            <el-button circle :icon="Rank" style="margin-left: 8px" title="表格密度" />
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="large">宽松 (默认)</el-dropdown-item>
                <el-dropdown-item command="default">中等</el-dropdown-item>
                <el-dropdown-item command="small">紧凑</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>

          <el-popover placement="bottom" :width="150" trigger="click">
            <template #reference>
              <el-button circle :icon="Setting" style="margin-left: 8px" title="列设置" />
            </template>
            <div class="column-setting-list">
              <div style="font-weight: bold; margin-bottom: 5px; border-bottom: 1px solid #eee; padding-bottom: 5px">
                列展示设置
              </div>
              <el-checkbox v-model="columns.id.visible" label="ID" />
              <el-checkbox v-model="columns.name.visible" label="名称" />
              <el-checkbox v-model="columns.category.visible" label="类别" />
              <el-checkbox v-model="columns.type.visible" label="类型" />
              <el-checkbox v-model="columns.spec.visible" label="规格型号" />
              <el-checkbox v-model="columns.unit.visible" label="单位" />
              <el-checkbox v-model="columns.visibilityLevel.visible" label="可见等级" />
              <el-checkbox v-model="columns.files.visible" label="资料" />
              <el-checkbox v-model="columns.isEnabled.visible" label="状态" />
            </div>
          </el-popover>
        </div>
      </div>

      <el-table
          v-loading="loading"
          :data="tableData"
          border
          stripe
          :size="tableSize"
          style="width: 100%; margin-top: 15px"
      >
        <el-table-column v-if="columns.id.visible" prop="id" label="ID" min-width="80" align="center" fixed="left" />
        <el-table-column v-if="columns.name.visible" prop="name" label="基础信息名称" min-width="180" show-overflow-tooltip />
        <el-table-column v-if="columns.category.visible" prop="category" label="类别" min-width="120" align="center" show-overflow-tooltip>
          <template #default="scope">{{ scope.row.category || '-' }}</template>
        </el-table-column>
        <el-table-column v-if="columns.type.visible" prop="type" label="类型" min-width="120" align="center" show-overflow-tooltip>
          <template #default="scope">{{ scope.row.type || '-' }}</template>
        </el-table-column>
        <el-table-column v-if="columns.spec.visible" prop="spec" label="规格型号" min-width="180" show-overflow-tooltip />
        <el-table-column v-if="columns.unit.visible" prop="unit" label="单位" min-width="80" align="center" />
        <el-table-column v-if="columns.visibilityLevel.visible" prop="visibilityLevel" label="可见等级" min-width="100" align="center">
          <template #default="scope">L{{ scope.row.visibilityLevel }}</template>
        </el-table-column>
        <el-table-column v-if="columns.files.visible" label="资料" min-width="100" align="center">
          <template #default="scope">
            <el-button v-if="scope.row.generalImage" link type="primary" :icon="Picture" title="查看图片" @click="openLink(scope.row.generalImage)" />
            <el-button v-if="scope.row.generalManual" link type="primary" :icon="Document" title="查看说明书" @click="openLink(scope.row.generalManual)" />
          </template>
        </el-table-column>
        <el-table-column v-if="columns.isEnabled.visible" prop="isEnabled" label="是否启用" min-width="100" align="center">
          <template #default="scope">
            <el-switch
                v-model="scope.row.isEnabled"
                :active-value="1"
                :inactive-value="0"
                :loading="scope.row.statusLoading"
                @change="handleStatusChange(scope.row)"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="150" fixed="right" align="center">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button link type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div style="margin-top: 20px; text-align: right;">
        <el-pagination
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            v-model:current-page="queryParams.pageNum"
            v-model:page-size="queryParams.pageSize"
            :page-sizes="[10, 20, 50, 100]"
            @size-change="getList"
            @current-change="getList"
        />
      </div>

      <el-dialog
          v-model="dialog.visible"
          :title="dialog.title"
          width="600px"
          append-to-body
          @close="cancel"
      >
        <el-form ref="formRef" :model="form" :rules="rules" label-width="110px">

          <el-form-item label="名称" prop="name">
            <el-input v-model="form.name" placeholder="请输入基础信息名称" />
          </el-form-item>

          <el-row>
            <el-col :span="12">
              <el-form-item label="类别" prop="category">
                <el-autocomplete
                    v-model="form.category"
                    :fetch-suggestions="querySearchCategory"
                    placeholder="可输入或选择"
                    clearable
                    style="width: 100%"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="类型" prop="type">
                <el-autocomplete
                    v-model="form.type"
                    :fetch-suggestions="querySearchType"
                    placeholder="可输入或选择"
                    clearable
                    style="width: 100%"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="规格型号" prop="spec">
                <el-input v-model="form.spec" placeholder="请输入规格型号" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="计量单位" prop="unit">
                <el-input v-model="form.unit" placeholder="如: 个, 台, 米" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item label="可见等级" prop="visibilityLevel">
            <el-input-number v-model="form.visibilityLevel" :min="0" :max="9" label="等级" />
            <span style="margin-left: 10px; color: #999; font-size: 12px;">(0为最低，9为最高)</span>
          </el-form-item>

          <el-form-item label="说明书链接" prop="generalManual">
            <el-input v-model="form.generalManual" placeholder="请输入说明书URL链接" />
          </el-form-item>

          <el-form-item label="产品图链接" prop="generalImage">
            <el-input v-model="form.generalImage" placeholder="请输入图片URL链接" />
          </el-form-item>

          <el-form-item label="状态" prop="isEnabled">
            <el-radio-group v-model="form.isEnabled">
              <el-radio :value="1">启用</el-radio>
              <el-radio :value="0">禁用</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>

        <template #footer>
          <div class="dialog-footer">
            <el-button @click="cancel">取 消</el-button>
            <el-button type="primary" @click="submitForm" :loading="submitLoading">确 定</el-button>
          </div>
        </template>
      </el-dialog>

    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, nextTick } from 'vue';
import { Plus, Picture, Document, Refresh, Setting, Rank } from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import type { FormInstance, FormRules } from 'element-plus';

import {
  listMaterialBase,
  addMaterialBase,
  updateMaterialBase,
  delMaterialBase
} from '@/api/material_base';

// --- 类型定义 ---
interface MaterialBaseVO {
  id: number;
  name: string;
  category: string;
  type: string;
  spec: string;
  unit: string;
  visibilityLevel: number;
  generalManual?: string;
  generalImage?: string;
  isEnabled: number;
  statusLoading?: boolean;
}

interface QueryParams {
  pageNum: number;
  pageSize: number;
  keyword: string;
  category: string;
  type: string;
  isEnabled?: number;
}

// --- 响应式数据 ---
const loading = ref(false);
const total = ref(0);
const tableData = ref<MaterialBaseVO[]>([]);
const submitLoading = ref(false);
const tableSize = ref<'large' | 'default' | 'small'>('large');

const columns = reactive({
  id: { visible: true },
  name: { visible: true },
  category: { visible: true },
  type: { visible: true },
  spec: { visible: true },
  unit: { visible: true },
  visibilityLevel: { visible: true },
  files: { visible: true },
  isEnabled: { visible: true }
});

const categoryOptions = ref<string[]>([]);
const typeOptions = ref<string[]>([]);

const queryParams = reactive<QueryParams>({
  pageNum: 1,
  pageSize: 10,
  keyword: '',
  category: '',
  type: '',
  isEnabled: undefined
});

// --- 弹窗与表单相关 ---
const dialog = reactive({
  visible: false,
  title: ''
});

const formRef = ref<FormInstance>();

const initForm = {
  id: undefined,
  name: '',
  category: '',
  type: '',
  spec: '',
  unit: '',
  visibilityLevel: 0,
  generalManual: '',
  generalImage: '',
  isEnabled: 1
};

const form = ref({...initForm});

const rules = reactive<FormRules>({
  name: [{ required: true, message: '请输入基础信息名称', trigger: 'blur' }],
  category: [{ required: true, message: '请选择或输入类别', trigger: 'change' }],
  type: [{ required: true, message: '请选择或输入类型', trigger: 'change' }],
  spec: [{ required: true, message: '请输入规格型号', trigger: 'blur' }],
  unit: [{ required: true, message: '请输入单位', trigger: 'blur' }]
});

// --- 业务逻辑方法 ---

const extractDynamicOptions = (items: MaterialBaseVO[]) => {
  if (!items || items.length === 0) return;
  const newCategories = new Set(categoryOptions.value);
  const newTypes = new Set(typeOptions.value);
  items.forEach(item => {
    if (item.category) newCategories.add(item.category);
    if (item.type) newTypes.add(item.type);
  });
  categoryOptions.value = Array.from(newCategories);
  typeOptions.value = Array.from(newTypes);
};

// 【核心新增】Autocomplete 的建议查询方法
// 格式化数据以适配 el-autocomplete 的回调参数格式 [{ value: 'abc' }]
const querySearchCategory = (queryString: string, cb: any) => {
  const results = queryString
      ? categoryOptions.value.filter(item => item.toLowerCase().includes(queryString.toLowerCase()))
      : categoryOptions.value;
  // el-autocomplete 默认只展示 value 属性
  const formattedResults = results.map(item => ({ value: item }));
  cb(formattedResults);
};

const querySearchType = (queryString: string, cb: any) => {
  const results = queryString
      ? typeOptions.value.filter(item => item.toLowerCase().includes(queryString.toLowerCase()))
      : typeOptions.value;
  const formattedResults = results.map(item => ({ value: item }));
  cb(formattedResults);
};

const getList = () => {
  loading.value = true;
  listMaterialBase(queryParams)
      .then((response: any) => {
        if (response && response.data) {
          tableData.value = response.data.items;
          total.value = response.data.total;
          extractDynamicOptions(tableData.value);
        } else {
          tableData.value = [];
          total.value = 0;
        }
      })
      .catch((err) => {
        console.error(err);
        tableData.value = [];
      })
      .finally(() => {
        loading.value = false;
      });
};

let searchTimer: ReturnType<typeof setTimeout> | null = null;
const handleInputSearch = () => {
  if (searchTimer) clearTimeout(searchTimer);
  searchTimer = setTimeout(() => {
    queryParams.pageNum = 1;
    getList();
  }, 500);
};

const handleQuery = () => {
  queryParams.pageNum = 1;
  getList();
};

const resetQuery = () => {
  queryParams.keyword = '';
  queryParams.category = '';
  queryParams.type = '';
  queryParams.isEnabled = undefined;
  handleQuery();
};

const handleSizeChange = (command: 'large' | 'default' | 'small') => {
  tableSize.value = command;
};

const handleAdd = () => {
  resetForm();
  dialog.title = '新增基础信息';
  dialog.visible = true;
};

const handleEdit = (row: MaterialBaseVO) => {
  resetForm();
  dialog.title = '编辑基础信息';
  dialog.visible = true;
  nextTick(() => {
    Object.assign(form.value, row);
  });
};

const checkDuplicate = async (name: string, spec: string): Promise<boolean> => {
  try {
    const nameRes: any = await listMaterialBase({ pageNum: 1, pageSize: 100, keyword: name });
    if (nameRes.data?.items?.some((item: MaterialBaseVO) => item.name === name)) {
      ElMessage.error(`添加失败：已存在名称为 "${name}" 的基础信息！`);
      return true;
    }
    const specRes: any = await listMaterialBase({ pageNum: 1, pageSize: 100, keyword: spec });
    if (specRes.data?.items?.some((item: MaterialBaseVO) => item.spec === spec)) {
      ElMessage.error(`添加失败：已存在规格/编号为 "${spec}" 的基础信息！`);
      return true;
    }
  } catch (e) {
    return false;
  }
  return false;
};

const submitForm = async () => {
  if (!formRef.value) return;

  await formRef.value.validate(async (valid) => {
    if (valid) {
      submitLoading.value = true;
      try {
        if (!form.value.id) {
          const isDuplicate = await checkDuplicate(form.value.name, form.value.spec);
          if (isDuplicate) {
            submitLoading.value = false;
            return;
          }
        }
        const requestApi = form.value.id ? updateMaterialBase : addMaterialBase;
        const actionText = form.value.id ? '修改' : '新增';
        await requestApi(form.value);
        ElMessage.success(`${actionText}成功`);
        dialog.visible = false;
        getList();
      } catch (error) {
        console.error(error);
      } finally {
        submitLoading.value = false;
      }
    }
  });
};

const cancel = () => {
  dialog.visible = false;
  resetForm();
};

const resetForm = () => {
  form.value = {...initForm};
  if (formRef.value) formRef.value.resetFields();
};

const handleStatusChange = (row: MaterialBaseVO) => {
  row.statusLoading = true;
  const text = row.isEnabled === 1 ? "启用" : "停用";
  const updateData = { id: row.id, isEnabled: row.isEnabled };
  updateMaterialBase(updateData)
      .then(() => ElMessage.success(`已${text} "${row.name}"`))
      .catch(() => { row.isEnabled = row.isEnabled === 1 ? 0 : 1; })
      .finally(() => { row.statusLoading = false; });
};

const handleDelete = (row: MaterialBaseVO) => {
  ElMessageBox.confirm(
      `是否确认删除名称为 "${row.name}" 的数据项?`,
      "警告",
      { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning" }
  ).then(() => {
    delMaterialBase(row.id).then(() => {
      ElMessage.success("删除成功");
      if (tableData.value.length === 1 && queryParams.pageNum > 1) queryParams.pageNum--;
      getList();
    });
  }).catch(() => {});
};

const openLink = (url: string) => {
  if (!url) return;
  window.open(url, '_blank');
}

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

<style scoped>
.app-container {
  padding: 20px;
}
.filter-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.filter-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.right-toolbar {
  display: flex;
  align-items: center;
}
.column-setting-list {
  display: flex;
  flex-direction: column;
}
</style>