推送项目重构代码

ruoyi-ui/src/views/oa/oaWarehouse/task.vue

@@ -1,107 +1,154 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+    <!-- 状态筛选 tabs：全部 / 加急 / 未完成 / 已完成 -->
+    <el-tabs v-model="statusFilter" @tab-click="onStatusTabChange" class="compact-tabs">
+      <el-tab-pane label="全部" name="all" />
+      <el-tab-pane name="urgent">
+        <span slot="label" style="color:#f56c6c;">
+          <i class="el-icon-warning-outline"></i> 加急 ({{ stat.urgent }})
+        </span>
+      </el-tab-pane>
+      <el-tab-pane :label="`未完成 (${stat.undone})`" name="undone" />
+      <el-tab-pane :label="`已完成 (${stat.done})`" name="done" />
+    </el-tabs>
+
+    <el-form :model="queryParams" ref="queryForm" size="mini" :inline="true" v-show="showSearch"
+      label-width="68px" class="compact-search">
+      <el-form-item label="关联需求" prop="requirementId">
+        <el-select v-model="queryParams.requirementId" placeholder="选择需求" filterable clearable style="width: 200px">
+          <el-option v-for="item in requirementList" :key="item.requirementId" :label="item.title"
+            :value="item.requirementId" />
+        </el-select>
+      </el-form-item>
       <el-form-item label="操作时间" prop="signTime">
         <el-date-picker v-model="searchTime" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期"
-          :default-time="['00:00:00', '23:59:59']">
-        </el-date-picker>
+          :default-time="['00:00:00', '23:59:59']" />
       </el-form-item>
       <el-form-item>
         <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
       </el-form-item>
     </el-form>
-    <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
-        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
-          v-hasPermi="['oa:oaOutWarehouse:remove']">删除
-        </el-button>
-      </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-    </el-row>
+    <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    <el-button type="primary" size="mini" icon="el-icon-plus" class="add-purchase-btn"
+      @click="addDialogVisible = true">新建采购单</el-button>
+    <add-purchase-dialog :visible.sync="addDialogVisible" @saved="getList" />
 
-    <el-table v-loading="loading" :data="TaskList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="序号" align="center" type="index" />
-      <el-table-column label="采购单编号" align="center" prop="masterNum">
-        <template slot-scope="scope">
-          <el-input v-model="scope.row.masterNum" size="mini" placeholder="请输入采购单编号"
-            @blur="updateMasterRemark(scope.row)" />
+    <el-table v-loading="loading" :data="TaskList" @selection-change="handleSelectionChange" stripe size="small"
+      row-key="masterId" :expand-row-keys="expandedKeys"
+      :row-class-name="rowClassName" @expand-change="onRowExpand">
+      <el-table-column type="expand" width="36">
+        <template slot-scope="props">
+          <div style="padding: 10px 24px; background:#fafafa;">
+            <!-- 顶部：模式 + 批量入库 -->
+            <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:8px;">
+              <div style="display:flex; align-items:center; gap:8px;">
+                <span style="font-weight:600;">物料明细（{{ (itemsMap[props.row.masterId] || []).length }} 项）</span>
+                <el-radio-group v-model="mode" size="mini" v-if="props.row.status === 0">
+                  <el-radio-button label="single">单个操作</el-radio-button>
+                  <el-radio-button label="batch">批量操作</el-radio-button>
+                </el-radio-group>
+              </div>
+              <div v-if="mode === 'batch' && props.row.status === 0"
+                style="display:flex; align-items:center; gap:6px;">
+                <el-select v-model="batchStatus" size="mini" placeholder="批量设置状态" style="width:140px">
+                  <el-option v-for="s in statusOptions" :key="s.value" :value="s.value" :label="s.label" />
+                </el-select>
+                <el-button size="mini" type="success" @click="submitComplete">执行入库</el-button>
+              </div>
+            </div>
+            <el-table v-loading="itemsLoading[props.row.masterId]"
+              :data="itemsMap[props.row.masterId] || []" size="mini" stripe ref="warehouseTable">
+              <el-table-column v-if="mode === 'batch' && props.row.status === 0"
+                type="selection" width="44" align="center" />
+              <el-table-column label="物料名" prop="name" min-width="120" />
+              <el-table-column label="截止" prop="endTime" width="120" align="center">
+                <template slot-scope="s">
+                  <template v-if="s.row.endTime != null && s.row.taskStatus !== 2">
+                    <span v-if="dayDiff(s.row.endTime) > 3">{{ parseTime(s.row.endTime, '{y}-{m}-{d}') }}</span>
+                    <el-tag v-else-if="dayDiff(s.row.endTime) > 0" type="warning" size="mini" effect="plain">剩{{ dayDiff(s.row.endTime) }}天</el-tag>
+                    <el-tag v-else-if="dayDiff(s.row.endTime) === 0" type="danger" size="mini" effect="plain">今日</el-tag>
+                    <el-tag v-else type="danger" size="mini" effect="plain">逾{{ Math.abs(dayDiff(s.row.endTime)) }}天</el-tag>
+                  </template>
+                </template>
+              </el-table-column>
+              <el-table-column label="数量" prop="taskInventory" width="64" align="right" />
+              <el-table-column label="单位" prop="unit" width="56" />
+              <el-table-column label="单价" width="110" align="right">
+                <template slot-scope="s">
+                  <el-input v-if="s.row.taskStatus !== 2 && props.row.status === 0"
+                    v-model="s.row.price" size="mini" type="number" placeholder="¥" />
+                  <span v-else>¥{{ Number(s.row.price || 0).toFixed(2) }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column label="型号" prop="model" min-width="100" />
+              <el-table-column label="规格" prop="specifications" min-width="100" />
+              <el-table-column label="品牌" prop="brand" min-width="80" />
+              <el-table-column label="备注" prop="remark" min-width="140">
+                <template slot-scope="s">
+                  <el-input v-model="s.row.remark" size="mini" placeholder="备注"
+                    :disabled="s.row.taskStatus === 2 || props.row.status === 1"
+                    @blur="updateRemark(s.row)" />
+                </template>
+              </el-table-column>
+              <el-table-column label="状态" prop="taskStatus" width="110" align="center">
+                <template slot-scope="s">
+                  <el-tag v-if="s.row.taskStatus === 2" type="success" size="mini">完成</el-tag>
+                  <el-select v-else-if="mode === 'single' && props.row.status === 0"
+                    v-model="s.row.taskStatus" size="mini" placeholder="状态"
+                    @change="handleUpdateTask(s.row)">
+                    <el-option v-for="opt in filteredStatusOptions(s.row)" :key="opt.value"
+                      :value="opt.value" :label="opt.label" />
+                  </el-select>
+                  <el-tag v-else size="mini">{{ statusLabel(s.row.taskStatus) }}</el-tag>
+                </template>
+              </el-table-column>
+              <el-table-column label="操作" align="center" width="60">
+                <template slot-scope="s">
+                  <el-button v-if="s.row.taskStatus !== 2 && props.row.status === 0"
+                    size="mini" type="text" style="color:#f56c6c"
+                    @click="handleBatchDelete(s.row)">删除</el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
         </template>
       </el-table-column>
-      <el-table-column label="状态" align="center" prop="status">
-        <template slot-scope="scope">
-          <el-tag :type="scope.row.status === 1 ? 'success' : 'warning'">{{
-            scope.row.status === 1 ? "完成" : "未完成"
-          }}
-          </el-tag>
-        </template>
+      <el-table-column type="selection" width="44" align="center" />
+      <el-table-column label="操作时间" prop="signTime" width="100">
+        <template slot-scope="scope">{{ parseTime(scope.row.signTime, "{y}-{m}-{d}") }}</template>
       </el-table-column>
-      <el-table-column label="最近截止日期" align="center" prop="nearestEndTime">
-        <template slot-scope="scope" v-if="scope.row.nearestEndTime != null && scope.row.status !== 1">
-          <template v-if="dayDiff(scope.row.nearestEndTime) > 3">
-            <!-- 超过 3 天，正常显示 -->
-            <span>{{ parseTime(scope.row.nearestEndTime, '{y}-{m}-{d}') }}</span>
-
-          </template><template v-else-if="dayDiff(scope.row.nearestEndTime) > 0">
-            <!-- 未来 1–3 天 -->
-            <el-tag type="warning" effect="plain">
-              剩余{{ dayDiff(scope.row.nearestEndTime) }}天
-            </el-tag>
-
-          </template><template v-else-if="dayDiff(scope.row.nearestEndTime) === 0">
-            <!-- 今天到期 -->
-            <el-tag type="danger" effect="plain">
-              <i class="el-icon-warning-outline"></i> 今日过期！
-            </el-tag>
-
-          </template><template v-else>
-            <!-- 已过期 -->
-            <el-tag type="danger" effect="plain">
-              逾期{{ Math.abs(dayDiff(scope.row.endTime)) }}天
-            </el-tag>
-          </template>
-        </template>
-      </el-table-column>
-      <el-table-column label="操作时间" align="center" prop="signTime">
+      <el-table-column label="操作人" prop="signUser" width="90" />
+      <el-table-column label="关联需求" min-width="220">
         <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.signTime, "{y}-{m}-{d}") }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="操作人" align="center" prop="signUser" />
-      <el-table-column label="备注" align="center" prop="remark">
-        <template slot-scope="scope">
-          <el-input v-model="scope.row.remark" size="mini" type="textarea" placeholder="请输入备注"
-            @blur="updateMasterRemark(scope.row)" />
-        </template>
-      </el-table-column>
-      <el-table-column label="需求编号" align="center" prop="requirementNum">
-        <template slot-scope="scope">
-          <el-select v-model="scope.row.requirementId" placeholder="请选择需求编号" filterable clearable
-            @change="updateMasterRemark(scope.row)">
+          <el-select v-model="scope.row.requirementId" placeholder="选择需求" filterable clearable size="mini"
+            style="width: 100%" @change="updateMasterRemark(scope.row)">
             <el-option v-for="item in requirementList" :key="item.requirementId" :label="item.title"
               :value="item.requirementId" />
           </el-select>
         </template>
       </el-table-column>
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+      <el-table-column label="状态" prop="status" width="90" align="center">
         <template slot-scope="scope">
-          <el-button size="mini" type="text" icon="el-icon-search" @click="showDetail(scope.row)">查看
-          </el-button>
-
-          <el-button size="mini" type="text" icon="el-icon-finished" v-if="scope.row.status === 0"
-            @click="handleIn(scope.row)">执行入库
-          </el-button>
-
-          <el-button size="mini" type="text" icon="el-icon-check" v-if="scope.row.status === 0"
-            @click="handComplete(scope.row)">完成
-          </el-button>
-
-          <el-button size="mini" type="text" icon="el-icon-download" @click="handleExport(scope.row)">导出
-          </el-button>
-
-          <el-button size="mini" type="text" icon="el-icon-remove" @click="handleDelete(scope.row)">删除
-          </el-button>
+          <el-tag :type="scope.row.status === 1 ? 'success' : 'warning'" size="mini">
+            {{ scope.row.status === 1 ? "已完成" : "未完成" }}
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="备注" prop="remark" min-width="200">
+        <template slot-scope="scope">
+          <el-input v-model="scope.row.remark" size="mini" placeholder="点击编辑"
+            @blur="updateMasterRemark(scope.row)" />
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" width="220" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-button size="mini" type="text" v-if="scope.row.status === 0"
+            @click="expandRow(scope.row)">执行入库</el-button>
+          <el-button size="mini" type="text" v-if="scope.row.status === 0"
+            @click="handComplete(scope.row)">完成</el-button>
+          <el-button size="mini" type="text" @click="handleExport(scope.row)">导出</el-button>
+          <el-button size="mini" type="text" style="color:#f56c6c" @click="handleDelete(scope.row)">删除</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -109,126 +156,12 @@
     <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
       @pagination="getList" />
 
-    <el-drawer size="70%" :title="parseTime(searchItem.signTime) + '-采购单'" :visible.sync="drawer">
-      <el-table v-loading="loading" :data="warehouseTaskList">
-        <el-table-column type="selection" width="55" align="center" />
-        <el-table-column label="序号" align="center" type="index" />
-        <el-table-column label="物料名" align="center" prop="name" />
-        <el-table-column label="采购数量" align="center" prop="taskInventory" />
-        <el-table-column label="单位" align="center" prop="unit" />
-        <el-table-column label="品牌" align="center" prop="brand" />
-        <el-table-column label="型号" align="center" prop="model" />
-        <el-table-column label="规格" align="center" prop="specifications" />
-        <el-table-column label="操作" align="center" prop="remark">
-          <template slot-scope="scope">
-            <el-button type="text" icon="el-icon-edit" @click="handleRemoveTask(scope.row)">删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-    </el-drawer>
-
-    <el-drawer size="70%" :title="parseTime(searchItem.signTime, '{y}_{m}_{d}') + '_采购单'"
-      :visible.sync="completeDrawer">
-      <!-- 工具栏 -->
-      <div style="display:flex;justify-content:space-between;margin-bottom:10px">
-        <!-- 模式切换 -->
-        <el-radio-group v-model="mode" size="mini">
-          <el-radio-button label="single">单个入库</el-radio-button>
-          <el-radio-button label="batch">批量操作</el-radio-button>
-        </el-radio-group>
-      </div>
-
-      <el-table v-loading="loading" :data="warehouseTaskList" ref="warehouseTable">
-        <el-table-column type="selection" width="55" align="center" />
-        <el-table-column label="序号" align="center" type="index" />
-        <el-table-column label="物料名" align="center" prop="name" />
-        <el-table-column label="截止日期" align="center" prop="endTime">
-          <template slot-scope="scope" v-if="scope.row.endTime != null">
-            <template v-if="dayDiff(scope.row.endTime) > 3">
-              <!-- 超过 3 天，正常显示 -->
-              <span>{{ parseTime(scope.row.endTime, '{y}-{m}-{d}') }}</span>
-
-            </template><template v-else-if="dayDiff(scope.row.endTime) > 0">
-              <!-- 未来 1–3 天 -->
-              <el-tag type="warning" effect="plain">
-                剩余{{ dayDiff(scope.row.endTime) }}天
-              </el-tag>
-
-            </template><template v-else-if="dayDiff(scope.row.endTime) === 0">
-              <!-- 今天到期 -->
-              <el-tag type="danger" effect="plain">
-                <i class="el-icon-warning-outline"></i> 今日过期！
-              </el-tag>
-
-            </template><template v-else>
-              <!-- 已过期 -->
-              <el-tag type="danger" effect="plain">
-                逾期{{ Math.abs(dayDiff(scope.row.endTime)) }}天
-              </el-tag>
-            </template>
-          </template>
-        </el-table-column>
-
-        <el-table-column label="采购数量" align="center" prop="taskInventory" />
-        <el-table-column label="采购价格" align="center" prop="price">
-          <template slot-scope="scope">
-            <el-input v-model="scope.row.price" v-if="scope.row.taskStatus !== 2" type="number"></el-input>
-            <span v-else>
-              已经操作入库，录入价格请前往入库明细查看
-            </span>
-          </template>
-        </el-table-column>
-        <el-table-column label="品牌" align="center" prop="brand" />
-        <el-table-column label="规格" align="center" prop="specifications" />
-        <el-table-column label="备注" align="center" prop="remark">
-          <template slot-scope="scope">
-            <el-input v-model="scope.row.remark" size="mini" placeholder="请输入备注" :disabled="scope.row.taskStatus === 2"
-              @blur="updateRemark(scope.row)" />
-          </template>
-        </el-table-column>
-        <!-- ⇩⇩⇩ ③ 操作列（单行按钮） ⇩⇩⇩ -->
-        <!-- ★ 新增状态列 ★ -->
-        <el-table-column label="状态" prop="taskStatus" width="140" align="center">
-          <template slot-scope="scope">
-            <!-- 单个模式：可编辑 -->
-            <el-tag type="success" v-if="scope.row.taskStatus === 2">完成</el-tag>
-            <!-- 单个模式下可编辑，动态过滤选项 -->
-            <el-select v-else-if="mode === 'single'" v-model="scope.row.taskStatus" size="mini" placeholder="状态"
-              @change="handleUpdateTask(scope.row)">
-              <el-option v-for="s in filteredStatusOptions(scope.row)" :key="s.value" :value="s.value"
-                :label="s.label" />
-            </el-select>
-
-            <!-- 批量模式：只显示 -->
-            <span v-else>{{ statusLabel(scope.row.taskStatus) }}</span>
-          </template>
-        </el-table-column>
-
-        <el-table-column label="操作" align="center">
-          <template slot-scope="scope">
-
-            <el-button size="mini" type="danger" v-if="scope.row.taskStatus !== 2"
-              @click="handleBatchDelete(scope.row)">删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-      <div style="display: flex; justify-content: flex-end; margin: 20px">
-        <!-- 批量模式下才显示 -->
-        <div v-if="mode === 'batch'">
-          <el-select v-model="batchStatus" size="mini" placeholder="选择批量状态">
-            <el-option v-for="s in statusOptions" :key="s.value" :value="s.value" :label="s.label" />
-          </el-select>
-        </div>
-        <el-button @click="submitComplete" v-if="mode === 'batch'" size="mini" type="success">执行入库</el-button>
-        <el-button @click="completeDrawer = false" size="mini">关闭</el-button>
-
-      </div>
-    </el-drawer>
   </div>
 </template>
 
 <script>
 import { listRequirements } from "@/api/oa/requirement";
+import AddPurchaseDialog from "./components/AddPurchaseDialog.vue";
 import {
   addOaWarehouseMaster,
   delOaWarehouseMaster, listOaWarehouseMaster,
@@ -246,8 +179,19 @@ import {
 
 export default {
   name: "OaOutWarehouse",
+  components: { AddPurchaseDialog },
   data () {
     return {
+      // 顶部状态筛选
+      statusFilter: 'all',
+      stat: { undone: 0, done: 0, urgent: 0 },
+      // 物料明细缓存（按 masterId）
+      itemsMap: {},
+      itemsLoading: {},
+      // 当前展开的行（单展开）
+      expandedKeys: [],
+      // 新建采购单 dialog
+      addDialogVisible: false,
       completeDrawer: false,
       mode: 'single',
       batchStatus: null,       // 批量入库时选择的状态
@@ -484,10 +428,84 @@ export default {
         this.queryParams.endTime = '';
       }
       listOaWarehouseMaster(this.queryParams).then((res) => {
-        this.TaskList = res.rows;
-        this.total = res.total;
+        this.TaskList = res.rows || [];
+        this.total = res.total || 0;
         this.loading = false;
+        // 重置已展开行的缓存
+        this.itemsMap = {};
       });
+      this.refreshStat();
+    },
+    // 加急判定（备注里含「急」）
+    isUrgent (remark) {
+      return !!remark && remark.indexOf('急') !== -1
+    },
+    // 加急且未完成 → 行红底
+    rowClassName ({ row }) {
+      if (row.status !== 1 && this.isUrgent(row.remark)) return 'row-urgent'
+      return ''
+    },
+    // 拉总览数量（不分页快速 head 计数）
+    refreshStat () {
+      const base = { ...this.queryParams, pageNum: 1, pageSize: 1, status: undefined, remark: undefined };
+      Promise.all([
+        listOaWarehouseMaster({ ...base, status: 0 }),
+        listOaWarehouseMaster({ ...base, status: 1 }),
+        listOaWarehouseMaster({ ...base, remark: '急' })
+      ]).then(([u, d, urg]) => {
+        this.stat.undone = u.total || 0
+        this.stat.done = d.total || 0
+        this.stat.urgent = urg.total || 0
+      })
+    },
+    // tab 切换
+    onStatusTabChange () {
+      // 重置过滤
+      this.queryParams.status = undefined
+      this.queryParams.remark = undefined
+      if (this.statusFilter === 'undone') {
+        this.queryParams.status = 0
+      } else if (this.statusFilter === 'done') {
+        this.queryParams.status = 1
+      } else if (this.statusFilter === 'urgent') {
+        this.queryParams.remark = '急'
+      }
+      this.queryParams.pageNum = 1
+      this.getList()
+    },
+    // 行展开：懒加载物料明细 + 同步 warehouseTaskList（兼容老方法）
+    onRowExpand (row, expanded) {
+      // 单展开：只保留当前
+      if (expanded && expanded.length) {
+        this.expandedKeys = [row.masterId]
+      } else {
+        this.expandedKeys = this.expandedKeys.filter(k => k !== row.masterId)
+      }
+      if (!expanded || !expanded.length) return
+      const id = row.masterId
+      this.currentMasterId = id
+      if (this.itemsMap[id]) {
+        this.warehouseTaskList = this.itemsMap[id]
+        return
+      }
+      this.$set(this.itemsLoading, id, true)
+      getOaWarehouseTaskByMasterId(id).then(res => {
+        const list = res.data || res.rows || []
+        this.$set(this.itemsMap, id, list)
+        this.warehouseTaskList = list
+      }).finally(() => {
+        this.$set(this.itemsLoading, id, false)
+      })
+    },
+    // 程序化展开（用于"执行入库"按钮）
+    expandRow (row) {
+      if (this.expandedKeys.includes(row.masterId)) {
+        this.expandedKeys = this.expandedKeys.filter(k => k !== row.masterId)
+        return
+      }
+      this.expandedKeys = [row.masterId]
+      // 触发数据加载
+      this.onRowExpand(row, [row.masterId])
     },
     // 取消按钮
     cancel () {
@@ -639,3 +657,18 @@ export default {
   },
 };
 </script>
+
+<style lang="scss" scoped>
+.add-purchase-btn.el-button {
+  position: absolute;
+  top: 12px;
+  right: 110px;            /* 让出 right-toolbar 的位置 */
+  z-index: 3;
+  height: 24px;
+  line-height: 22px;
+  padding: 0 8px !important;
+  font-size: 11px !important;
+  border-radius: 4px;
+  i { font-size: 11px; margin-right: 2px; }
+}
+</style>