From 4a91d4d3503201ac47f503f828bd2dea1a93d613 Mon Sep 17 00:00:00 2001
From: wx-jincw <jin.chenwei@iwhalecloud.com>
Date: Sun, 22 Mar 2026 17:41:33 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E9=87=87=E8=B4=AD=E9=9C=80=E6=B1=82?=
 =?UTF-8?q?=E6=89=B9=E9=87=8F=E4=BF=AE=E6=94=B9=EF=BC=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 admin/src/api/pmcanteendemand.js              |  24 ++
 .../views/pm/canteen/demand/DispatchList.vue  |  42 +--
 admin/src/views/pm/canteen/demand/index.vue   |  70 ++--
 .../demand/pmcanteendemand-add-and-update.vue | 306 ++++++++++++++++--
 4 files changed, 355 insertions(+), 87 deletions(-)

diff --git a/admin/src/api/pmcanteendemand.js b/admin/src/api/pmcanteendemand.js
index a21f4e2..9160d4e 100644
--- a/admin/src/api/pmcanteendemand.js
+++ b/admin/src/api/pmcanteendemand.js
@@ -25,6 +25,30 @@ export function pmcanteendemandUpdateApi(data) {
     })
 }
 
+/**
+ * 新增pmcanteendemand
+ * @param pram
+ */
+export function pmcanteendemandBatchCreateApi(data) {
+    return request({
+        url: `autogencode/pmcanteendemand/batchSave`,
+        method: 'POST',
+        data
+    })
+}
+
+/**
+ * pmcanteendemand更新
+ * @param pram
+ */
+export function pmcanteendemandBatchUpdateApi(data) {
+    return request({
+        url: `autogencode/pmcanteendemand/batchUpdate`,
+        method: 'POST',
+        data
+    })
+}
+
 /**
  * pmcanteendemand详情
  * @param pram
diff --git a/admin/src/views/pm/canteen/demand/DispatchList.vue b/admin/src/views/pm/canteen/demand/DispatchList.vue
index 8ca687a..aa5bad9 100644
--- a/admin/src/views/pm/canteen/demand/DispatchList.vue
+++ b/admin/src/views/pm/canteen/demand/DispatchList.vue
@@ -1,24 +1,20 @@
 <template>
   <div>
-    <div style="margin-bottom: 10px;">
-      <el-button type="primary" size="small" @click="addDetail">新增明细</el-button>
-    </div>
     <el-table
       :data="dataList"
       border
       v-loading="dataListLoading"
       :row-key="'id'"
-      style="width: 100%;">
+      style="width: 100%;background: #f5f7fa;">
       <el-table-column prop="goodsName" header-align="center" align="center" label="采购商品名称"></el-table-column>
       <el-table-column prop="goodsCode" header-align="center" align="center" label="商品编号"></el-table-column>
       <el-table-column prop="spec" header-align="center" align="center" label="规格"></el-table-column>
       <el-table-column prop="unit" header-align="center" align="center" label="单位"></el-table-column>
       <el-table-column prop="demandQuantity" header-align="center" align="center" label="需求采购数量"></el-table-column>
       <el-table-column prop="remark" header-align="center" align="center" label="备注" show-overflow-tooltip></el-table-column>
-      <el-table-column header-align="center"   align="center" width="150" label="操作">
+      <el-table-column v-if="status === '0' || status === '2'" header-align="center"   align="center" width="100" label="操作">
         <template slot-scope="scope">
-          <el-button type="text" size="small" @click="editDetail(scope.row.id)">{{ '修改' }}</el-button>
-          <el-button type="text" size="small" @click="deleteDetail(scope.row.id, scope.$index)" style="color: #f56c6c;">删除</el-button>
+          <el-button v-if="status === '0' || status === '2'" v-hasPermi="['autogencode:pmcanteendemand:update']" type="text" size="small" @click="deleteDetail(scope.row.id, scope.$index)" style="color: #f56c6c;">{{ '删除' }}</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -33,21 +29,12 @@
       :total="totalPage"
       layout="total, sizes, prev, pager, next, jumper">
     </el-pagination>
-    <!-- 需求详情弹窗 -->
-    <DetailAddOrUpdate
-      ref="detailAddOrUpdate"
-      @refreshDataList="getDataList"
-    ></DetailAddOrUpdate>
   </div>
 </template>
 
 <script>
 import * as detailApi from '@/api/pmcanteendemanddetail.js'
-import DetailAddOrUpdate from './detail/pmcanteendemanddetail-add-and-update.vue'
 export default {
-  components: {
-    DetailAddOrUpdate
-  },
   props: {
     orderId: {
       type: [Number, String],
@@ -56,6 +43,10 @@ export default {
     showSearch: {
       type: Boolean,
       default: true
+    },
+    status: {
+      type: String,
+      default: ''
     }
   },
   data() {
@@ -86,22 +77,6 @@ export default {
     this.getDataList()
   },
   methods: {
-    // 新增需求详情
-    addDetail() {
-      // 向父组件发送 addDetail 事件
-      this.$emit('addDetail', this.orderId)
-      if (this.$refs.detailAddOrUpdate) {
-        this.$refs.detailAddOrUpdate.init(0, this.orderId)
-      }
-    },
-    // 编辑需求详情
-    editDetail(id) {
-      // 向父组件发送 editDetail 事件
-      this.$emit('editDetail', this.orderId, id)
-      if (this.$refs.detailAddOrUpdate) {
-        this.$refs.detailAddOrUpdate.init(id, this.orderId)
-      }
-    },
     // 删除需求详情
     deleteDetail(id, index) {
       this.$confirm('确定要删除这条需求详情记录吗?', '提示', {
@@ -175,4 +150,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+::v-deep .el-table--medium .el-table__cell {
+  padding: 6px;
+}
 </style>
diff --git a/admin/src/views/pm/canteen/demand/index.vue b/admin/src/views/pm/canteen/demand/index.vue
index 2b2517d..1c2fcc7 100644
--- a/admin/src/views/pm/canteen/demand/index.vue
+++ b/admin/src/views/pm/canteen/demand/index.vue
@@ -29,7 +29,7 @@
         <el-button @click="resetForm()">重置</el-button>
         <el-button v-hasPermi="['autogencode:pmcanteendemand:save']" type="primary" @click="addOrUpdateHandle()">新增需求</el-button>
         <el-button v-hasPermi="['autogencode:pmcanteendemand:submit']" type="primary" @click="batchSubmitDemand()" :disabled="dataListSelections.length <= 0">提交</el-button>
-        <el-button v-hasPermi="['autogencode:pmcanteendemand:delete']" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
+        <!-- <el-button v-hasPermi="['autogencode:pmcanteendemand:delete']" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button> -->
       </el-form-item>
     </el-form>
     <el-table
@@ -37,8 +37,6 @@
       border
       v-loading="dataListLoading"
       @selection-change="selectionChangeHandle"
-      @expand-change="handleExpandChange"
-      :expand-row-keys="expandedRowKeys"
       style="width: 100%;">
       <el-table-column
         type="selection"
@@ -48,11 +46,13 @@
       </el-table-column>
       <el-table-column type="expand" header-align="center" align="center">
         <template slot-scope="scope">
-          <DispatchList
-            :orderId="scope.row.id"
-            @addDetail="addDetail"
-            @editDetail="editDetail"
-          />
+          <div class="content">
+            <DispatchList
+              :orderId="scope.row.id"
+              :status="scope.row.status"
+            />
+          </div>
+          
         </template>
       </el-table-column>
       <el-table-column
@@ -98,9 +98,10 @@
         width="200"
         label="操作">
         <template slot-scope="scope">
-          <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">{{ '修改' }}</el-button>
-          <el-button type="text" size="small" @click="submitDemand(scope.row.id)" v-if="['1', '3'].includes(scope.row.status)">{{ '提交' }}</el-button>
-          <el-button v-hasPermi="['autogencode:pmcanteendemand:delete']" type="text" size="small" @click="deleteHandle(scope.row.id)" style="color: #f56c6c;">{{ '删除' }}</el-button>
+          <el-button v-hasPermi="['autogencode:pmcanteendemand:update']" type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">{{ '修改' }}</el-button>
+          <el-button v-hasPermi="['autogencode:pmcanteendemand:submit']" type="text" size="small" @click="submitDemand(scope.row.id)" v-if="['0', '2'].includes(scope.row.status)">{{ '提交' }}</el-button>
+          <el-button v-hasPermi="['autogencode:pmcanteendemand:submit']" type="text" size="small" @click="rejectDemand(scope.row.id)" v-if="['3'].includes(scope.row.status)">{{ '驳回' }}</el-button>
+          <el-button v-hasPermi="['autogencode:pmcanteendemand:delete']" type="text" size="small" @click="deleteHandle(scope.row.id)" v-if="['0', '2'].includes(scope.row.status)" style="color: #f56c6c;">{{ '删除' }}</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -142,7 +143,6 @@
         dataListLoading: false,
         dataListSelections: [],
         addOrUpdateVisible: false,
-        expandedRowKeys: [] // 存储展开的行的ID
       }
     },
     components: {
@@ -158,29 +158,7 @@
       this.getDataList()
     },
     methods: {
-      // 处理行的展开和折叠事件
-      handleExpandChange(row, expandedRows) {
-        if (expandedRows.includes(row)) {
-          // 展开行，将其ID添加到 expandedRowKeys 数组
-          if (!this.expandedRowKeys.includes(row.id)) {
-            this.expandedRowKeys.push(row.id)
-          }
-        } else {
-          // 折叠行，将其ID从 expandedRowKeys 数组中移除
-          const index = this.expandedRowKeys.indexOf(row.id)
-          if (index !== -1) {
-            this.expandedRowKeys.splice(index, 1)
-          }
-        }
-      },
-      // 新增需求详情
-      addDetail(orderId) {
-        // 这里可以添加新增需求详情的逻辑
-      },
-      // 编辑需求详情
-      editDetail(orderId, detailId) {
-        // 这里可以添加编辑需求详情的逻辑
-      },
+
       // 重置表单
       resetForm() {
         this.dataForm = {
@@ -238,6 +216,19 @@
           this.$refs.addOrUpdate.init(id)
         })
       },
+      rejectDemand(id) {
+        this.$confirm(`确定驳回该需求吗？`, '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          // 调用API更新状态
+          api.pmcanteendemandUpdateApi({id: id, status: '2'}).then(res => {
+            this.$message.success('驳回成功')
+            this.getDataList()
+          })
+        })
+      },
       // 提交需求
       submitDemand (id) {
         this.$confirm(`确定提交该需求吗？`, '提示', {
@@ -246,7 +237,7 @@
           type: 'warning'
         }).then(() => {
           // 调用API更新状态
-          api.pmcanteendemandUpdateApi({id: id, status: '4'}).then(res => {
+          api.pmcanteendemandUpdateApi({id: id, status: '3'}).then(res => {
             this.$message.success('提交成功')
             this.getDataList()
           })
@@ -299,3 +290,10 @@
     }
   }
 </script>
+<style scoped>
+
+::v-deep .el-table--medium .el-table__cell .content {
+  padding: 10px;
+  background: #f5f7fa;
+}
+</style>
\ No newline at end of file
diff --git a/admin/src/views/pm/canteen/demand/pmcanteendemand-add-and-update.vue b/admin/src/views/pm/canteen/demand/pmcanteendemand-add-and-update.vue
index 7e13c01..176d8f2 100644
--- a/admin/src/views/pm/canteen/demand/pmcanteendemand-add-and-update.vue
+++ b/admin/src/views/pm/canteen/demand/pmcanteendemand-add-and-update.vue
@@ -3,7 +3,8 @@
   <el-dialog
       :title="!dataForm.id ? '添加' : '修改'"
       :close-on-click-modal="false"
-      :visible.sync="visible">
+      :visible.sync="visible"
+      width="80%">
     <!-- 新增和修改表单 -->
     <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataSubmit()" label-width="120px">
     <el-form-item label="计划采购日期" prop="demandDate">
@@ -30,22 +31,127 @@
       </el-select>
     </el-form-item>
     <el-form-item label="状态" prop="status">
-      <el-select v-model="dataForm.status" placeholder="请选择状态" style="width: 100%">
-        <el-option
-          v-for="dict in dict.type.demand_status"
-          :key="dict.value"
-          :label="dict.label"
-          :value="dict.value"
-        />
-      </el-select>
+      <DictTag :options="dict.type.demand_status" :value="dataForm.status"/>
     </el-form-item>
     <el-form-item label="备注" prop="remark">
       <el-input v-model="dataForm.remark" type="textarea" placeholder="备注" rows="4"></el-input>
     </el-form-item>
     </el-form>
+    
+    <!-- 商品明细部分 -->
+    <div style="margin-top: 20px;">
+      <el-card>
+        <template slot="header">
+          <div class="card-header">
+            <span>商品明细</span>
+            <div class="button-group">
+              <el-button type="primary" size="small" @click="openBatchAddModal">批量添加商品</el-button>
+              <el-button type="primary" size="small" @click="addSingleProduct">添加单个商品</el-button>
+            </div>
+          </div>
+        </template>
+        <el-table
+          :data="productList"
+          border
+          style="width: 100%;">
+          <el-table-column prop="goodsName" header-align="center" align="center" label="采购商品名称"></el-table-column>
+          <el-table-column prop="goodsCode" header-align="center" align="center" label="商品编号"></el-table-column>
+          <el-table-column prop="spec" header-align="center" align="center" label="规格"></el-table-column>
+          <el-table-column prop="unit" header-align="center" align="center" label="单位"></el-table-column>
+          <el-table-column prop="demandQuantity" header-align="center" align="center" label="需求采购数量">
+            <template slot-scope="scope">
+              <el-input-number v-model="scope.row.demandQuantity" placeholder="数量" :min="1" style="width: 100%"></el-input-number>
+            </template>
+          </el-table-column>
+          <el-table-column prop="remark" header-align="center" align="center" label="备注">
+            <template slot-scope="scope">
+              <el-input v-model="scope.row.remark" placeholder="备注"></el-input>
+            </template>
+          </el-table-column>
+          <el-table-column header-align="center" align="center" width="100" label="操作">
+            <template slot-scope="scope">
+              <el-button type="text" size="small" @click="removeProduct(scope.$index)" style="color: #f56c6c;">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-card>
+    </div>
+    
+    <!-- 批量添加商品弹窗 -->
+    <el-dialog
+      title="批量添加商品"
+      :visible.sync="batchAddVisible"
+      append-to-body
+      :close-on-click-modal="false"
+      width="70%">
+      <el-select
+        v-model="selectedGoods"
+        multiple
+        filterable
+        allow-create
+        default-first-option
+        placeholder="请选择商品"
+        style="width: 100%; margin-bottom: 20px;">
+        <el-option
+          v-for="goods in goodsList"
+          :key="goods.id"
+          :label="goods.goodsName + '|' + goods.spec + '|' + goods.unit"
+          :value="goods.id"
+        />
+      </el-select>
+      <el-button type="primary" @click="confirmBatchAdd">确认添加</el-button>
+    </el-dialog>
+    
+    <!-- 单个添加商品弹窗 -->
+    <el-dialog
+      title="添加商品"
+      append-to-body
+      :close-on-click-modal="false"
+      :visible.sync="singleAddVisible"
+      width="50%">
+      <el-form :model="singleProductForm" :rules="singleProductRule" ref="singleProductForm" label-width="120px">
+        <el-form-item label="采购商品" prop="goodsName">
+          <el-select v-model="singleProductForm.goodsName" placeholder="请选择采购商品" style="width: 100%" @change="handleGoodsChange">
+            <el-option
+              v-for="goods in goodsList"
+              :key="goods.id"
+              :label="goods.goodsName + '|' + goods.spec + '|' + goods.unit"
+              :value="goods.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="商品编号" prop="goodsCode">
+          <el-input v-model="singleProductForm.goodsCode" placeholder="商品编号" disabled></el-input>
+        </el-form-item>
+        <el-form-item label="规格" prop="spec">
+          <el-input v-model="singleProductForm.spec" placeholder="规格" disabled></el-input>
+        </el-form-item>
+        <el-form-item label="单位" prop="unit">
+          <el-input v-model="singleProductForm.unit" placeholder="单位" disabled></el-input>
+        </el-form-item>
+        <el-form-item label="需求采购数量" prop="demandQuantity">
+          <el-input-number v-model="singleProductForm.demandQuantity" placeholder="需求采购数量" :min="1" style="width: 100%"></el-input-number>
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="singleProductForm.remark" type="textarea" placeholder="备注" rows="4"></el-input>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="singleAddVisible = false">取消</el-button>
+        <el-button type="primary" @click="confirmSingleAdd">确定</el-button>
+      </span>
+    </el-dialog>
+    
     <span slot="footer" class="dialog-footer">
       <el-button @click="visible = false">取消</el-button>
-      <el-button type="primary" @click="dataSubmit()">确定</el-button>
+      <template v-if="!dataForm.id || dataForm.status === '0' || dataForm.status === '2'">
+        <el-button type="primary" @click="dataSubmit()">保存</el-button>
+        <el-button v-hasPermi="['autogencode:pmcanteendemand:submit']" type="primary" @click="submitDemand">提交</el-button>
+      </template>
+      <template v-if="dataForm.id && dataForm.status === '3'">
+        <el-button v-hasPermi="['autogencode:pmcanteendemand:audit']" type="danger" @click="rejectDemand">驳回</el-button>
+        <el-button v-hasPermi="['autogencode:pmcanteendemand:audit']" type="success" @click="approveDemand">通过</el-button>
+      </template>
     </span>
   </el-dialog>
 </template>
@@ -53,20 +159,34 @@
 <script>
   import * as api from '@/api/pmcanteendemand.js'
   import * as ebuserApi from '@/api/ebuser.js'
+  import * as cmcustproductApi from '@/api/cmcustproduct.js'
   export default {
     dicts: ['owner_type', 'demand_status'],
     data () {
       return {
         visible: false,
+        batchAddVisible: false,
+        singleAddVisible: false,
         userList: [],
+        goodsList: [],
+        selectedGoods: [],
+        productList: [],
         dataForm: {
-          id: 0,
+          id: '',
           demandDate: '' ,
           demandUser: '' ,
           userType: '' ,
-          status: '' ,
+          status: '0' ,
           remark: '' ,
         },
+        singleProductForm: {
+          goodsName: '',
+          goodsCode: '',
+          spec: '',
+          unit: '',
+          demandQuantity: 1,
+          remark: ''
+        },
         dataRule: {
           demandDate: [
             { required: true, message: '计划采购日期  为必填项', trigger: 'blur' }
@@ -77,14 +197,20 @@
           userType: [
             { required: true, message: '申请人类型  为必填项', trigger: 'blur' }
           ],
-          status: [
-            { required: true, message: '状态  为必填项', trigger: 'blur' }
+        },
+        singleProductRule: {
+          goodsName: [
+            { required: true, message: '采购商品名称  为必填项', trigger: 'blur' }
+          ],
+          demandQuantity: [
+            { required: true, message: '需求采购数量  为必填项', trigger: 'blur' }
           ],
         }
       }
     },
     mounted() {
       this.loadUserList()
+      this.loadGoodsList()
     },
     methods: {
       loadUserList() {
@@ -98,8 +224,82 @@
           this.userList = res.list || []
         })
       },
+      loadGoodsList() {
+        cmcustproductApi.cmcustproductListApi({ page: 1, limit: 9999 }).then(res => {
+          this.goodsList = res.list || []
+        })
+      },
+      handleGoodsChange(id) {
+        const selectedGoods = this.goodsList.find(goods => goods.id === id)
+        if (selectedGoods) {
+          this.singleProductForm.goodsName = selectedGoods.goodsName
+          this.singleProductForm.goodsCode = selectedGoods.goodsCode
+          this.singleProductForm.spec = selectedGoods.spec
+          this.singleProductForm.unit = selectedGoods.unit
+        }
+      },
+      openBatchAddModal() {
+        this.selectedGoods = []
+        this.batchAddVisible = true
+      },
+      confirmBatchAdd() {
+        if (this.selectedGoods.length === 0) {
+          this.$message.warning('请选择商品')
+          return
+        }
+        
+        this.selectedGoods.forEach(id => {
+          const selectedGoods = this.goodsList.find(goods => goods.id === id)
+          const existingProduct = this.productList.find(p => p.goodsName === selectedGoods.goodsName && p.goodsCode === selectedGoods.goodsCode)
+          if (!existingProduct) {
+            this.productList.push({
+              goodsName: selectedGoods.goodsName,
+              goodsCode: selectedGoods.goodsCode,
+              spec: selectedGoods.spec,
+              unit: selectedGoods.unit,
+              demandQuantity: 1,
+              remark: ''
+            })
+          }
+        })
+        
+        this.batchAddVisible = false
+      },
+      addSingleProduct() {
+        this.singleProductForm = {
+          goodsName: '',
+          goodsCode: '',
+          spec: '',
+          unit: '',
+          demandQuantity: 1,
+          remark: ''
+        }
+        this.singleAddVisible = true
+      },
+      confirmSingleAdd() {
+        this.$refs['singleProductForm'].validate((valid) => {
+          if (valid) {
+            const existingProduct = this.productList.find(p => p.goodsName === this.singleProductForm.goodsName)
+            if (!existingProduct) {
+              this.productList.push({
+                goodsName: this.singleProductForm.goodsName,
+                goodsCode: this.singleProductForm.goodsCode,
+                spec: this.singleProductForm.spec,
+                unit: this.singleProductForm.unit,
+                demandQuantity: this.singleProductForm.demandQuantity,
+                remark: this.singleProductForm.remark
+              })
+            }
+            this.singleAddVisible = false
+          }
+        })
+      },
+      removeProduct(index) {
+        this.productList.splice(index, 1)
+      },
       init (id) { // 初始化表单验证规则
-        this.dataForm.id = id || 0
+        this.dataForm.id = id
+        this.productList = []
         this.visible = true
         this.$nextTick(function() {
           this.$refs['dataForm'].resetFields()
@@ -108,22 +308,37 @@
               this.dataForm = res;
               // 加载用户列表，确保编辑时能正确显示用户
               this.loadUserList()
+              // 这里可以添加加载商品明细的逻辑
+              if (res.pmCanteenDemandDetails) {
+                this.productList = res.pmCanteenDemandDetails
+              }
             }.bind(this))
           }
         }.bind(this))
       },
       // 表单数据提交
-      dataSubmit () {
+      dataSubmit (status) {
         this.$refs['dataForm'].validate((valid) => {
           if (valid) {
+            if (this.productList.length === 0) {
+              this.$message.warning('请添加商品明细')
+              return
+            }
+            
+            const submitData = {
+              ...this.dataForm,
+              status: status || this.dataForm.status,
+              pmCanteenDemandDetails: this.productList
+            }
+            
             if (this.dataForm.id) {
-              api.pmcanteendemandUpdateApi(this.dataForm).then(function(res) {
+              api.pmcanteendemandBatchUpdateApi([submitData]).then(function(res) {
                 this.$message.success('保存成功')
                 this.visible = false
                 this.$emit('refreshDataList')
               }.bind(this));
             } else {
-              api.pmcanteendemandCreateApi(this.dataForm).then(function(res) {
+              api.pmcanteendemandBatchCreateApi([submitData]).then(function(res) {
                 this.$message.success('新增成功')
                 this.visible = false
                 this.$emit('refreshDataList')
@@ -131,7 +346,60 @@
             }
           }
         })
-      }
+      },
+      // 驳回需求
+      rejectDemand() {
+        this.$confirm(`确定驳回该需求吗？`, '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          // 调用API更新状态
+          this.dataSubmit('2');
+        })
+      },
+      // 通过需求
+      approveDemand() {
+        this.$confirm(`确定通过该需求吗？`, '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          this.dataSubmit('1');
+        })
+      },
+      // 提交需求
+      submitDemand() {
+        this.$confirm(`确定提交该需求吗？`, '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          this.dataSubmit('3');
+        })
+      },
+      
     }
   }
 </script>
+
+<style scoped>
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.button-group {
+  display: flex;
+  align-items: center;
+}
+
+.button-group .el-button {
+  margin-left: 10px;
+}
+
+.button-group .el-button:first-child {
+  margin-left: 0;
+}
+</style>