2026-01-06

物料未维护模版清单

src/api/report/partTemplateStatus.js

@@ -0,0 +1,15 @@
+import { createAPI } from "@/utils/httpRequest.js";
+
+// -------------物料未维护模版清单--------------
+
+/**
+ * 查询物料模版状态数据（分页）
+ * @param {Object} data 查询条件
+ */
+export const searchPartTemplateStatus = data => createAPI(`/report/partTemplateStatus/list`, 'post', data);
+
+/**
+ * 获取用户可访问的site列表
+ */
+export const getSiteList = () => createAPI(`/report/partTemplateStatus/getSiteList`, 'get');
+

src/views/modules/report/partTemplateStatus.vue

@@ -0,0 +1,682 @@
+<template>
+  <div class="mod-config">
+    <!-- 条件查询 -->
+    <el-card :class="['search-card', { 'collapsed': !searchExpanded }]" shadow="hover">
+      <div slot="header" class="search-header">
+        <div class="header-left">
+          <i class="el-icon-search"></i>
+          <span class="header-title">物料未维护模版清单</span>
+        </div>
+        <div class="header-right">
+          <el-button
+            type="text"
+            size="small"
+            @click="toggleSearchExpand"
+            class="collapse-btn">
+            <i :class="searchExpanded ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
+            {{ searchExpanded ? '收起' : '展开' }}
+          </el-button>
+        </div>
+      </div>
+
+      <el-form
+        :inline="true"
+        label-position="top"
+        :model="searchData"
+        class="search-form"
+        @keyup.enter.native="getData">
+
+        <!-- 所有查询条件 - 可展开/收起 -->
+        <template v-if="searchExpanded">
+          <!-- 第一行 -->
+          <el-row :gutter="16">
+            <el-col :span="4">
+              <el-form-item label="工厂编码">
+                <el-select v-model="searchData.site" placeholder="请选择工厂" clearable filterable style="width: 100%">
+                  <el-option
+                    v-for="item in siteList"
+                    :key="item"
+                    :label="item"
+                    :value="item">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="4">
+              <el-form-item label="物料编码">
+                <el-input v-model="searchData.partNo" placeholder="请输入物料编码" clearable></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="4">
+              <el-form-item label="物料名称">
+                <el-input v-model="searchData.partDesc" placeholder="请输入物料名称" clearable></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="4">
+              <el-form-item label="规格型号">
+                <el-input v-model="searchData.spec" placeholder="请输入规格型号" clearable></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="4">
+              <el-form-item label="部门">
+                <el-select v-model="searchData.department" placeholder="请选择部门" clearable style="width: 100%">
+                  <el-option label="全部" value=""></el-option>
+                  <el-option label="质量" value="质量"></el-option>
+                  <el-option label="工艺" value="工艺"></el-option>
+                  <el-option label="生产" value="生产"></el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <!-- 第二行 -->
+          <el-row :gutter="16">
+            <el-col :span="4">
+              <el-form-item label="IQC检验标识">
+                <el-select v-model="searchData.iqcExempt" placeholder="请选择" clearable style="width: 100%">
+                  <el-option label="全部" value=""></el-option>
+                  <el-option label="是" value="是"></el-option>
+                  <el-option label="否" value="否"></el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="4">
+              <el-form-item label="IQC检验模版">
+                <el-select v-model="searchData.iqcHas" placeholder="请选择" clearable style="width: 100%">
+                  <el-option label="全部" value=""></el-option>
+                  <el-option label="是" value="是"></el-option>
+                  <el-option label="否" value="否"></el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="4">
+              <el-form-item label="IPQC检验标识">
+                <el-select v-model="searchData.ipqcExempt" placeholder="请选择" clearable style="width: 100%">
+                  <el-option label="全部" value=""></el-option>
+                  <el-option label="是" value="是"></el-option>
+                  <el-option label="否" value="否"></el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="4">
+              <el-form-item label="IPQC检验模版">
+                <el-select v-model="searchData.ipqcHas" placeholder="请选择" clearable style="width: 100%">
+                  <el-option label="全部" value=""></el-option>
+                  <el-option label="是" value="是"></el-option>
+                  <el-option label="否" value="否"></el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="4">
+              <el-form-item label="FQC检验标识">
+                <el-select v-model="searchData.fqcExempt" placeholder="请选择" clearable style="width: 100%">
+                  <el-option label="全部" value=""></el-option>
+                  <el-option label="是" value="是"></el-option>
+                  <el-option label="否" value="否"></el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="4">
+              <el-form-item label="FQC检验模版">
+                <el-select v-model="searchData.fqcHas" placeholder="请选择" clearable style="width: 100%">
+                  <el-option label="全部" value=""></el-option>
+                  <el-option label="是" value="是"></el-option>
+                  <el-option label="否" value="否"></el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <!-- 第三行 -->
+          <el-row :gutter="16">
+            <el-col :span="4">
+              <el-form-item label="OQC检验标识">
+                <el-select v-model="searchData.oqcExempt" placeholder="请选择" clearable style="width: 100%">
+                  <el-option label="全部" value=""></el-option>
+                  <el-option label="是" value="是"></el-option>
+                  <el-option label="否" value="否"></el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="4">
+              <el-form-item label="OQC检验模版">
+                <el-select v-model="searchData.oqcHas" placeholder="请选择" clearable style="width: 100%">
+                  <el-option label="全部" value=""></el-option>
+                  <el-option label="是" value="是"></el-option>
+                  <el-option label="否" value="否"></el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="4">
+              <el-form-item label="SOP维护标识">
+                <el-select v-model="searchData.hasSop" placeholder="请选择" clearable style="width: 100%">
+                  <el-option label="全部" value=""></el-option>
+                  <el-option label="是" value="是"></el-option>
+                  <el-option label="否" value="否"></el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="4">
+              <el-form-item label="打印维护标识">
+                <el-select v-model="searchData.hasLabelTemplate" placeholder="请选择" clearable style="width: 100%">
+                  <el-option label="全部" value=""></el-option>
+                  <el-option label="是" value="是"></el-option>
+                  <el-option label="否" value="否"></el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </template>
+
+        <!-- 操作按钮区域 -->
+        <el-row :gutter="16">
+          <el-col :span="24">
+            <div class="search-actions">
+              <div class="action-left">
+                <el-button
+                  type="primary"
+                  icon="el-icon-search"
+                  :loading="searchLoading"
+                  @click="getData">
+                  查询
+                </el-button>
+                <el-button
+                  icon="el-icon-refresh-left"
+                  @click="resetSearch">
+                  重置
+                </el-button>
+                <download-excel
+                  :fields="exportFields"
+                  :data="dataList"
+                  type="xls"
+                  name="物料未维护模版清单"
+                  worksheet="数据"
+                  class="el-button el-button--success el-button--medium">
+                  <i class="el-icon-download"></i> 导出
+                </download-excel>
+              </div>
+            </div>
+          </el-col>
+        </el-row>
+      </el-form>
+    </el-card>
+
+    <!-- 数据列表 -->
+    <div class="section-title-bar">
+      <i class="el-icon-document"></i>
+      <span>物料模版状态列表</span>
+      <span class="total-count">（共 {{ totalPage }} 条）</span>
+    </div>
+    <el-table
+      ref="dataTable"
+      :height="tableHeight"
+      :data="dataList"
+      border
+      v-loading="dataListLoading"
+      style="width: 100%;">
+      <el-table-column
+        type="index"
+        header-align="center"
+        align="center"
+        width="60"
+        label="序号">
+      </el-table-column>
+      <el-table-column
+        v-for="(item, index) in columnList"
+        :key="index"
+        :sortable="item.columnSortable"
+        :prop="item.columnProp"
+        :header-align="item.headerAlign"
+        :show-overflow-tooltip="true"
+        :align="item.align"
+        :min-width="item.columnWidth"
+        :label="item.columnLabel">
+        <template slot-scope="scope">
+          <span
+            :class="{
+              'status-yes': scope.row[item.columnProp] === '是',
+              'status-no': scope.row[item.columnProp] === '否'
+            }">
+            {{ scope.row[item.columnProp] }}
+          </span>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      style="margin-top: 0px"
+      @size-change="sizeChangeHandle"
+      @current-change="currentChangeHandle"
+      :current-page="pageIndex"
+      :page-sizes="[20, 50, 100, 200, 500]"
+      :page-size="pageSize"
+      :total="totalPage"
+      layout="total, sizes, prev, pager, next, jumper">
+    </el-pagination>
+  </div>
+</template>
+
+<script>
+import { searchPartTemplateStatus, getSiteList } from "@/api/report/partTemplateStatus.js";
+
+export default {
+  name: "partTemplateStatus",
+  data() {
+    return {
+      // 搜索条件
+      searchData: {
+        site: '',
+        partNo: '',
+        partDesc: '',
+        spec: '',
+        iqcExempt: '',
+        iqcHas: '',
+        ipqcExempt: '',
+        ipqcHas: '',
+        fqcExempt: '',
+        fqcHas: '',
+        oqcExempt: '',
+        oqcHas: '',
+        hasSop: '',
+        hasLabelTemplate: '',
+        department: ''
+      },
+      // Site列表
+      siteList: [],
+      // 搜索展开状态
+      searchExpanded: true,
+      // 加载状态
+      searchLoading: false,
+      dataListLoading: false,
+      // 数据列表
+      dataList: [],
+      // 分页
+      pageIndex: 1,
+      pageSize: 50,
+      totalPage: 0,
+      // 表格高度
+      tableHeight: 400,
+      // 列定义
+      columnList: [
+        { columnProp: 'partNo', columnLabel: '物料编码', columnWidth: '150', headerAlign: 'center', align: 'left' },
+        { columnProp: 'partDesc', columnLabel: '物料名称', columnWidth: '200', headerAlign: 'center', align: 'left' },
+        { columnProp: 'spec', columnLabel: '规格型号', columnWidth: '150', headerAlign: 'center', align: 'left' },
+        { columnProp: 'iqcExempt', columnLabel: 'IQC检验标识', columnWidth: '110', headerAlign: 'center', align: 'center' },
+        { columnProp: 'iqcHas', columnLabel: 'IQC检验模版', columnWidth: '110', headerAlign: 'center', align: 'center' },
+        { columnProp: 'ipqcExempt', columnLabel: 'IPQC检验标识', columnWidth: '120', headerAlign: 'center', align: 'center' },
+        { columnProp: 'ipqcHas', columnLabel: 'IPQC检验模版', columnWidth: '120', headerAlign: 'center', align: 'center' },
+        { columnProp: 'fqcExempt', columnLabel: 'FQC检验标识', columnWidth: '110', headerAlign: 'center', align: 'center' },
+        { columnProp: 'fqcHas', columnLabel: 'FQC检验模版', columnWidth: '110', headerAlign: 'center', align: 'center' },
+        { columnProp: 'oqcExempt', columnLabel: 'OQC检验标识', columnWidth: '110', headerAlign: 'center', align: 'center' },
+        { columnProp: 'oqcHas', columnLabel: 'OQC检验模版', columnWidth: '110', headerAlign: 'center', align: 'center' },
+        { columnProp: 'hasSop', columnLabel: 'SOP维护标识', columnWidth: '110', headerAlign: 'center', align: 'center' },
+        { columnProp: 'hasLabelTemplate', columnLabel: '打印维护标识', columnWidth: '120', headerAlign: 'center', align: 'center' },
+        { columnProp: 'department', columnLabel: '部门', columnWidth: '100', headerAlign: 'center', align: 'center' }
+      ],
+      // 导出字段
+      exportFields: {
+        '工厂编码': 'site',
+        '物料编码': 'partNo',
+        '物料名称': 'partDesc',
+        '规格型号': 'spec',
+        'IQC检验标识': 'iqcExempt',
+        'IQC检验模版': 'iqcHas',
+        'IPQC检验标识': 'ipqcExempt',
+        'IPQC检验模版': 'ipqcHas',
+        'FQC检验标识': 'fqcExempt',
+        'FQC检验模版': 'fqcHas',
+        'OQC检验标识': 'oqcExempt',
+        'OQC检验模版': 'oqcHas',
+        'SOP维护标识': 'hasSop',
+        '打印维护标识': 'hasLabelTemplate',
+        '部门': 'department'
+      }
+    };
+  },
+  created() {
+    this.getSiteList();
+    this.calculateTableHeight();
+    window.addEventListener('resize', this.calculateTableHeight);
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.calculateTableHeight);
+  },
+  methods: {
+    // 计算表格高度
+    calculateTableHeight() {
+      this.$nextTick(() => {
+        const windowHeight = window.innerHeight;
+        // 根据搜索条件展开状态动态计算
+        const headerHeight = this.searchExpanded ? 360 : 186;
+        this.tableHeight = windowHeight - headerHeight - 105;
+      });
+    },
+    // 切换搜索展开/收起
+    toggleSearchExpand() {
+      this.searchExpanded = !this.searchExpanded;
+      this.calculateTableHeight();
+    },
+    // 获取Site列表
+    getSiteList() {
+      getSiteList().then(({ data }) => {
+        if (data && data.code === 0) {
+          this.siteList = data.siteList || [];
+          // 如果有权限的site，默认选择第一个
+          if (this.siteList.length > 0) {
+            this.searchData.site = this.siteList[0];
+          }
+        }
+      }).catch(err => {
+        console.error('获取Site列表失败:', err);
+      });
+    },
+    // 查询数据
+    getData() {
+      this.searchLoading = true;
+      this.dataListLoading = true;
+
+      const params = {
+        ...this.searchData,
+        page: this.pageIndex,
+        limit: this.pageSize
+      };
+
+      searchPartTemplateStatus(params).then(({ data }) => {
+        this.searchLoading = false;
+        this.dataListLoading = false;
+        if (data && data.code === 0) {
+          this.dataList = data.page.list || [];
+          this.totalPage = data.page.totalCount || 0;
+        } else {
+          this.dataList = [];
+          this.totalPage = 0;
+          this.$message.error(data.msg || '查询失败');
+        }
+      }).catch(err => {
+        console.error(err);
+        this.searchLoading = false;
+        this.dataListLoading = false;
+        this.$message.error('查询异常：' + err.message);
+      });
+    },
+    // 重置搜索条件
+    resetSearch() {
+      this.searchData = {
+        site: this.siteList.length > 0 ? this.siteList[0] : '',
+        partNo: '',
+        partDesc: '',
+        spec: '',
+        iqcExempt: '',
+        iqcHas: '',
+        ipqcExempt: '',
+        ipqcHas: '',
+        fqcExempt: '',
+        fqcHas: '',
+        oqcExempt: '',
+        oqcHas: '',
+        hasSop: '',
+        hasLabelTemplate: '',
+        department: ''
+      };
+      this.pageIndex = 1;
+    },
+    // 分页处理
+    sizeChangeHandle(val) {
+      this.pageSize = val;
+      this.pageIndex = 1;
+      this.getData();
+    },
+    currentChangeHandle(val) {
+      this.pageIndex = val;
+      this.getData();
+    }
+  }
+};
+</script>
+
+<style scoped>
+/* 搜索卡片样式 */
+.search-card {
+  margin-bottom: 16px;
+  border-radius: 8px;
+  overflow: hidden;
+  transition: all 0.3s ease;
+}
+
+.search-card:hover {
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+}
+
+.search-card /deep/ .el-card__header {
+  padding: 5px 20px;
+  background: linear-gradient(135deg, #9ac3d0 20%, #b6c7dd 80%);
+  border-bottom: none;
+}
+
+.search-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  color: #fff;
+}
+
+.header-left i {
+  font-size: 16px;
+  margin-right: 8px;
+}
+
+.header-title {
+  font-size: 14px;
+  font-weight: 600;
+  letter-spacing: 0.5px;
+}
+
+.header-right {
+  color: #fff;
+}
+
+.collapse-btn {
+  color: #fff;
+  font-weight: 500;
+  transition: all 0.3s ease;
+}
+
+.collapse-btn:hover {
+  color: #f0f0f0;
+  transform: translateY(-1px);
+}
+
+.collapse-btn i {
+  transition: transform 0.3s ease;
+}
+
+/* 搜索表单样式 */
+.search-form {
+  padding: 6px 0;
+  min-height: 0;
+}
+
+/* 卡片主体样式 */
+.search-card /deep/ .el-card__body {
+  padding: 10px;
+  transition: all 0.3s ease;
+}
+
+/* 收起时的样式 */
+.search-card.collapsed /deep/ .el-card__body {
+  padding: 10px 20px;
+}
+
+.search-form /deep/ .el-form-item {
+  margin-bottom: 12px;
+}
+
+.search-form /deep/ .el-form-item__label {
+  font-weight: 500;
+  color: #606266;
+  padding-bottom: 4px;
+}
+
+.search-form /deep/ .el-input__inner,
+.search-form /deep/ .el-textarea__inner {
+  border-radius: 6px;
+  border: 1px solid #DCDFE6;
+  transition: all 0.3s ease;
+}
+
+.search-form /deep/ .el-input__inner:focus,
+.search-form /deep/ .el-textarea__inner:focus {
+  border-color: #9ac3d0;
+  box-shadow: 0 0 0 2px rgba(154, 195, 208, 0.1);
+}
+
+.search-form /deep/ .el-select {
+  width: 100%;
+}
+
+/* 操作按钮区域 */
+.search-actions {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 0 2px 0;
+}
+
+/* 展开时显示上边框 */
+.search-card:not(.collapsed) .search-actions {
+  border-top: 1px solid #f0f0f0;
+  margin-top: 6px;
+}
+
+/* 收起时不显示上边框和上边距 */
+.search-card.collapsed .search-actions {
+  border-top: none;
+  margin-top: 0;
+  padding-top: 0;
+}
+
+.action-left {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.search-actions .el-button {
+  border-radius: 4px;
+  padding: 5px 10px;
+  font-size: 12px;
+  font-weight: 500;
+  transition: all 0.3s ease;
+}
+
+.search-actions .el-button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.search-actions .el-button--primary {
+  background: #60aeff;
+  border-color: #60aeff;
+}
+
+.search-actions .el-button--primary:hover {
+  background: #7dbdff;
+  border-color: #7dbdff;
+}
+
+.search-actions .el-button--success {
+  background: #67C23A;
+  border-color: #67C23A;
+}
+
+.search-actions .el-button--success:hover {
+  background: #85ce61;
+  border-color: #85ce61;
+}
+
+.search-actions .el-button--danger {
+  background: #F56C6C;
+  border-color: #F56C6C;
+}
+
+.search-actions .el-button--danger:hover {
+  background: #f78989;
+  border-color: #f78989;
+}
+
+.search-actions .el-button--warning {
+  background: #E6A23C;
+  border-color: #E6A23C;
+}
+
+.search-actions .el-button--warning:hover {
+  background: #ebb563;
+  border-color: #ebb563;
+}
+
+/* 区域标题栏样式 */
+.section-title-bar {
+  display: flex;
+  align-items: center;
+  padding: 8px 12px;
+  background: linear-gradient(135deg, #f5f7fa 0%, #e4e7eb 100%);
+  border-radius: 4px;
+  margin-bottom: 8px;
+  font-size: 14px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.section-title-bar i {
+  font-size: 16px;
+  margin-right: 8px;
+  color: #409eff;
+}
+
+.section-title-bar .total-count {
+  margin-left: 10px;
+  font-size: 12px;
+  font-weight: normal;
+  color: #909399;
+}
+
+/* 状态样式 */
+.status-yes {
+  color: #67C23A;
+  font-weight: 600;
+}
+
+.status-no {
+  color: #F56C6C;
+  font-weight: 600;
+}
+
+/* 表格样式 */
+/deep/ .el-table th {
+  background-color: #f5f7fa;
+  color: #303133;
+  font-weight: 600;
+}
+
+/deep/ .el-table tr:hover > td {
+  background-color: #f5f7fa !important;
+}
+
+/* 响应式设计 */
+@media (max-width: 1200px) {
+  .search-actions {
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  .action-left {
+    width: 100%;
+    justify-content: center;
+  }
+}
+</style>
+