预算编制优化人员选择和设备选择

oa-ui/src/views/flowable/form/budget/addBudget.vue

  * @Author: ysh
  * @Date: 2024-06-21 18:51:51
  * @LastEditors: Please set LastEditors
- * @LastEditTime: 2025-06-11 11:06:16
+ * @LastEditTime: 2025-07-03 16:10:00
 -->
 <template>
   <div class="app-container">
       });
     },
     // 保存
-    preserve() {
-      if (!this.flag) {
-        this.addBudgetForm(this.budgetForm);
-        this.flag = true;
-      } else {
-        this.updateBudgetForm(this.budgetForm);
+    async preserve() {
+      let loadingInstance = null;
+      try {
+        loadingInstance = this.$loading({ fullscreen: true, lock: true, text: '正在保存...', background: 'rgba(0,0,0,0.2)' });
+        if (!this.flag) {
+          await this.addBudgetForm(this.budgetForm);
+          this.flag = true;
+        } else {
+          await this.updateBudgetForm(this.budgetForm);
+        }
+      } finally {
+        if (loadingInstance) loadingInstance.close();
       }
-      this.$message.success("正在保存......");
     },
     viewForm() {
       this.viewOpen = true;
       }
       this.$message.success("预算添加成功");
     },
-    updateBudgetForm(form) {
-      updateBudget(form);
-      delBudgetStaff(form.budgetId).then(async res => {
-        for (let user of form.chooseUser) {
-          user.budgetId = form.budgetId;
-          await addBudgetStaff(user);
-        }
-      });
-      delBudgetCar(form.budgetId).then(async res => {
-        for (let car of form.chooseCar) {
-          car.budgetId = form.budgetId;
-          await addBudgetCar(car);
-        }
-      });
-      delBudgetDevice(form.budgetId).then(async res => {
-        for (let device of form.chooseDevice) {
-          device.budgetId = form.budgetId;
-          await addBudgetDevice(device);
-        }
-      });
-      delBudgetSettle(form.budgetId).then(async res => {
-        for (let work of form.contentList) {
-          work.budgetId = form.budgetId;
-          await addBudgetSettle(work);
-        }
-      });
-      delSite(form.budgetId).then(async res => {
-        for (let site of form.expensesList) {
-          site.budgetId = form.budgetId;
-          await addSite(site);
-        }
-        this.$message.success("预算添加成功");
-      })
+    async updateBudgetForm(form) {
+      await updateBudget(form);
+      await delBudgetStaff(form.budgetId);
+      for (let user of form.chooseUser) {
+        user.budgetId = form.budgetId;
+        await addBudgetStaff(user);
+      }
+      await delBudgetCar(form.budgetId);
+      for (let car of form.chooseCar) {
+        car.budgetId = form.budgetId;
+        await addBudgetCar(car);
+      }
+      await delBudgetDevice(form.budgetId);
+      for (let device of form.chooseDevice) {
+        device.budgetId = form.budgetId;
+        await addBudgetDevice(device);
+      }
+      await delBudgetSettle(form.budgetId);
+      for (let work of form.contentList) {
+        work.budgetId = form.budgetId;
+        await addBudgetSettle(work);
+      }
+      await delSite(form.budgetId);
+      for (let site of form.expensesList) {
+        site.budgetId = form.budgetId;
+        await addSite(site);
+      }
+      this.$message.success("预算添加成功");
     },
     getChooseUser(val) {
       this.$set(this.budgetForm, "chooseUser", val);

oa-ui/src/views/flowable/form/budget/components/chooseDevice.vue

  * @Author: ysh
  * @Date: 2024-06-21 18:51:51
  * @LastEditors: Please set LastEditors
- * @LastEditTime: 2024-09-20 09:49:18
+ * @LastEditTime: 2025-07-03 16:38:50
 -->
 <template>
   <div>
       </el-form-item>
     </el-form>
     <el-table border ref="chooseDeviceRef" :data="list" @selection-change="handleSelectionChange" :row-key="getRowKeys"
-      @current-change="handleCurrentChange" @row-dblclick="confirmChooseBySingle" :highlight-current-row="!multiple">
+      @current-change="handleCurrentChange" @row-dblclick="confirmChooseBySingle" :highlight-current-row="!multiple"
+      :selectable="isSelectable">
       <el-table-column type="selection" width="50" align="center" :reserve-selection="true" v-if="multiple" />
       <el-table-column label="设备状态" align="center" prop="status">
         <template slot-scope="scope">
     multiple: {
       type: Boolean,
       default: true
+    },
+    selectedDeviceIds: {
+      type: Array,
+      default: () => []
     }
   },
   watch: {
       return row.deviceId;
     },
     confirmChoose() {
-      this.$emit('chooseList', this.chooseList)
+      if (!this.chooseList || (Array.isArray(this.chooseList) && this.chooseList.length === 0) ||
+          (typeof this.chooseList === 'object' && !Array.isArray(this.chooseList) && Object.keys(this.chooseList).length === 0)) {
+        return;
+      }
+      let devices = Array.isArray(this.chooseList) ? this.chooseList : [this.chooseList];
+      // 找出已存在的设备
+      const existedDevices = devices.filter(d => this.selectedDeviceIds.includes(d.deviceId));
+      // 过滤掉已存在的设备
+      devices = devices.filter(d => !this.selectedDeviceIds.includes(d.deviceId));
+      if (devices.length === 0) {
+        const names = existedDevices.map(d => `${d.name}-${d.series}-${d.brand}`).join('、');
+        this.$message.warning(`所选设备【${names}】已存在，无法重复添加`);
+        return;
+      }
+      if (existedDevices.length > 0) {
+        const names = existedDevices.map(d => `${d.name}-${d.series}-${d.brand}`).join('、');
+        this.$message.warning(`设备【${names}】已存在，已自动过滤`);
+      }
+      this.$emit('chooseList', this.multiple ? devices : devices[0]);
+      this.clearChoose();
     },
     confirmChooseBySingle() {
       if (!this.multiple) {
       } else {
         return null
       }
+    },
+    isSelectable(row) {
+      return !this.selectedDeviceIds.includes(row.deviceId);
     }
   }
 }

oa-ui/src/views/flowable/form/budget/components/choosePeople.vue

     multiple: {
       type: Boolean,
       default: true
+    },
+    selectedUserIds: {
+      type: Array,
+      default: () => []
     }
   },
   data() {
       return row.userId;
     },
     confirmChoose() {
-      if (this.chooseUser)
-        this.$emit('chooseUser', this.chooseUser)
+      // 当 this.chooseUser 为空数组或空对象时，不做操作
+      if (
+        !this.chooseUser ||
+        (Array.isArray(this.chooseUser) && this.chooseUser.length === 0) ||
+        (typeof this.chooseUser === 'object' && !Array.isArray(this.chooseUser) && Object.keys(this.chooseUser).length === 0)
+      ) {
+        return;
+      }
+      let users = Array.isArray(this.chooseUser) ? this.chooseUser : [this.chooseUser];
+      // 找出已存在的用户
+      const existedUsers = users.filter(u => this.selectedUserIds.includes(u.userId));
+      // 过滤掉已存在的 userId
+      users = users.filter(u => !this.selectedUserIds.includes(u.userId));
+      if (users.length === 0) {
+        const names = existedUsers.map(u => u.nickName).join('、');
+        this.$message.warning(`所选人员【${names}】已存在，无法重复添加`);
+        return;
+      }
+      if (existedUsers.length > 0) {
+        const names = existedUsers.map(u => u.nickName).join('、');
+        this.$message.warning(`人员【${names}】已存在，已自动过滤`);
+      }
+      this.$emit('chooseUser', this.multiple ? users : users[0]);
+      this.clearChoose();
     },
     confirmChooseBySingle() {
       if (!this.multiple) {

oa-ui/src/views/flowable/form/budget/deviceTable.vue

       <el-form-item label="选择设备：">
         <span v-if="chooseDeviceList.length != 0">
           <el-tag effect="plain" type="success" v-for="item in chooseDeviceList" style="margin: 5px; font-size: 14px"
-            :key="item.code">
-            {{ item.name + "-" + item.series + "-" + item.brand }}
+            :key="item.deviceId" closable @close="removeDevice(item.deviceId)">
+            {{ item.name + '-' + item.series + '-' + item.brand }}
           </el-tag>
         </span>
-        <el-button type="success" plain icon="el-icon-plus" @click="openDevice = true" size="mini">选择</el-button>
+        <el-button type="success" plain icon="el-icon-plus" @click="openDevice = true" size="mini">新增</el-button>
       </el-form-item>
       <el-form-item v-if="chooseDeviceList.length != 0">
         <table border="1">
             <td :colspan="6" class="head">设备成本预算</td>
           </tr>
           <tr>
+            <td style="width: 100px">出厂编号</td>
             <td style="width: 120px">设备名称</td>
             <td style="width: 120px">规格型号</td>
             <td style="width: 120px">品牌</td>
             <td style="width: 100px">总额</td>
           </tr>
           <tr v-for="device in chooseDeviceList" :key="device.deviceId">
+            <td>{{ device.code }}</td>
             <td>{{ device.name }}</td>
             <td>{{ device.series }}</td>
             <td>{{ device.brand }}</td>
     </el-form>
     <!-- 选择设备对话框 -->
     <el-dialog title="选择设备" :visible.sync="openDevice" width="750px" append-to-body>
-      <chooseDevice @chooseList="getChooseDevice"></chooseDevice>
+      <chooseDevice @chooseList="getChooseDevice" :selectedDeviceIds="chooseDeviceList.map(d => d.deviceId)"></chooseDevice>
     </el-dialog>
   </div>
 </template>
         listBudgetDevice({ pageSize: 100, budgetId: this.budgetId }).then((res) => {
           this.chooseDeviceList = res.rows;
           for (let device of this.chooseDeviceList) {
+            device.code = device.device.code
             device.brand = device.device.brand
             device.depreciation = device.device.dayCost
             device.name = device.device.name
       this.form.deviceCost = deviceCost.toFixed(2)
     },
     getChooseDevice(val) {
-      this.chooseDeviceList = val;
+      // 过滤掉已存在的设备
+      const newDevices = val.filter(v => !this.chooseDeviceList.some(d => d.deviceId === v.deviceId));
+      // 追加新设备
+      this.chooseDeviceList = this.chooseDeviceList.concat(newDevices);
       this.openDevice = false;
-      for (let v of val) {
+      for (let v of newDevices) {
         v.depreciation = v.dayCost;
       }
-      this.recalculateCost(val, 'amount', 'deviceCost');
+      this.recalculateCost(this.chooseDeviceList, 'amount', 'deviceCost');
+    },
+    removeDevice(deviceId) {
+      this.chooseDeviceList = this.chooseDeviceList.filter(d => d.deviceId !== deviceId);
+      this.recalculateCost(this.chooseDeviceList, 'amount', 'deviceCost');
     },
     calculateDeviceTotal(device) {
       let total = Number(device.depreciation) * Number(device.days);

oa-ui/src/views/flowable/form/budget/staffTable.vue

       <el-form-item label="选择内业人员：">
         <span v-if="innerUsers.length != 0">
           <el-tag effect="plain" type="success" v-for="item in innerUsers" style="margin: 5px; font-size: 14px"
-            :key="item.userId">
+            :key="item.userId" closable @close="removeUser('inner', item.userId)">
             {{ item.nickName }}
           </el-tag>
         </span>
-        <el-button type="success" plain icon="el-icon-plus" @click="openPeople('inner')" size="mini">选择</el-button>
+        <el-button type="success" plain icon="el-icon-plus" @click="openPeople('inner')" size="mini">新增</el-button>
       </el-form-item>
 
       <!-- <div class="mb20" style="color:#E23D28;font-size:12px;">
             <td style="width: 100px">预算天数</td>
             <td style="width: 100px">预算绩效</td>
             <td style="width: 100px">金额</td>
-            <td style="width: 100px">备注</td>
+            <td style="width: 160px">备注</td>
           </tr>
           <tr v-for="user, index in innerUsers" :key="user.userId">
             <td>{{ index + 1 }}</td>
               {{ user.dayCost }}
             </td>
             <td>
-              <el-input-number :controls="false" v-model="user.days" placeholder="请输入天数"
+              <el-input-number style="width: 100px" :controls="false" v-model="user.days" placeholder="请输入天数"
                 @blur="calculateUserTotal(user)"></el-input-number>
             </td>
-            <td>
-              <el-input-number :controls="false" v-model="user.performance" placeholder="请输入预算绩效"
+            <td>  
+              <el-input-number style="width: 100px" :controls="false" v-model="user.performance" placeholder="请输入预算绩效"
                 @blur="calculateUserTotal(user)"></el-input-number>
               <el-button type="text" @click="openCalculatePerformance(user)">计算绩效</el-button>
             </td>
             </td>
           </tr>
           <tr>
-            <td colspan="4">合计</td>
-            <td>{{ form.innerDays }}</td>
+            <td colspan="5">合计</td>
+            <!-- <td>{{ form.innerDays }}</td> -->
             <td>{{ form.innerSettle }}</td>
             <td>{{ form.innerStaffCost }}</td>
           </tr>
       <el-form-item label="选择外业人员：">
         <span v-if="outerUsers.length != 0">
           <el-tag effect="plain" type="success" v-for="item in outerUsers" style="margin: 5px; font-size: 14px"
-            :key="item.userId">
+            :key="item.userId" closable @close="removeUser('outer', item.userId)">
             {{ item.nickName }}
           </el-tag>
         </span>
-        <el-button type="success" plain icon="el-icon-plus" @click="openPeople('outer')" size="mini">选择</el-button>
+        <el-button type="success" plain icon="el-icon-plus" @click="openPeople('outer')" size="mini">新增</el-button>
       </el-form-item>
       <!-- 外业人员表格 -->
       <el-form-item v-if="outerUsers.length != 0">
         <table border="1">
           <tr>
-            <td :colspan="9" class="head">外业人员成本预算</td>
+            <td :colspan="10" class="head">外业人员成本预算</td>
           </tr>
           <tr>
             <td style="width: 50px">序号</td>
             <td style="width: 100px">预算系数</td>
             <td style="width: 100px">预算绩效</td>
             <td style="width: 100px">总额</td>
-            <td style="width: 100px">备注</td>
+            <td style="width: 160px">备注</td>
           </tr>
           <tr v-for="user, index in outerUsers" :key="user.userId">
             <td>{{ index + 1 }}</td>
               200
             </td>
             <td>
-              <el-input-number :controls="false" v-model="user.days" placeholder="请输入天数"
+              <el-input-number style="width: 100px" :controls="false" v-model="user.days" placeholder="请输入天数"
                 @blur="calculateUserTotal(user)"></el-input-number>
             </td>
             <td>
-              <el-input-number :controls="false" v-model="user.coefficient" placeholder="请输入系数"
+              <el-input-number style="width: 100px" :controls="false" v-model="user.coefficient" placeholder="请输入系数"
                 @blur="calculateUserTotal(user)"></el-input-number>
             </td>
             <td>
             </td>
           </tr>
           <tr>
-            <td colspan="6">合计</td>
+            <td colspan="7">合计</td>
             <td>{{ form.outerSettle }}</td>
             <td>{{ form.outerStaffCost }}</td>
           </tr>
     <!-- 选择人员对话框 -->
     <el-dialog :title="currentType === 'inner' ? '选择内业人员' : '选择外业人员'" :visible.sync="isOpenPeople" width="700px"
       append-to-body>
-      <choosePeople @chooseUser="getChooseUser"></choosePeople>
+      <choosePeople @chooseUser="getChooseUser"
+        :selectedUserIds="currentType === 'inner' ? innerUsers.map(u => u.userId) : outerUsers.map(u => u.userId)"
+        :currentType="currentType"
+      ></choosePeople>
     </el-dialog>
 
     <!-- 计算绩效对话框 -->
       });
       
       if (this.currentType === 'inner') {
-        this.innerUsers = processedUsers;
+        this.innerUsers = this.innerUsers.concat(processedUsers);
       } else {
-        this.outerUsers = processedUsers;
+        this.outerUsers = this.outerUsers.concat(processedUsers);
       }
       this.isOpenPeople = false;
       this.updateStaffCosts();
         this.calculateUserTotal(this.currentUser);
       }
     },
+    removeUser(type, userId) {
+      if (type === 'inner') {
+        this.innerUsers = this.innerUsers.filter(user => user.userId !== userId);
+      } else if (type === 'outer') {
+        this.outerUsers = this.outerUsers.filter(user => user.userId !== userId);
+      }
+      this.updateStaffCosts();
+    },
   },
 }
 </script>