网页端：更新项目预算里车辆预算的选择逻辑

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

@@ -2,15 +2,15 @@
   <div>
     <el-form ref="form" :model="form" style="padding: 20px 100px 0">
       <el-form-item label="选择车辆：">
-        <span v-if="chooseCar.length != 0">
-          <el-tag effect="plain" type="success" v-for="item in chooseCar" style="margin: 5px; font-size: 14px"
-            :key="item.licensePlate">
+        <span v-if="chooseCarList.length != 0">
+          <el-tag effect="plain" type="success" v-for="item in chooseCarList" style="margin: 5px; font-size: 14px"
+            :key="item.carId" closable @close="removeCar(item.carId)">
             {{ item.licensePlate + item.brand }}
           </el-tag>
         </span>
-        <el-button type="success" plain icon="el-icon-plus" @click="openCar = true" size="mini">选择</el-button>
+        <el-button type="success" plain icon="el-icon-plus" @click="openCar = true" size="mini">新增</el-button>
       </el-form-item>
-      <el-form-item v-if="chooseCar.length != 0">
+      <el-form-item v-if="chooseCarList.length != 0">
         <table border="1">
           <tr>
             <td :colspan="4" class="head">车辆成本预算</td>
@@ -21,7 +21,7 @@
             <td style="width: 110px">预算天数</td>
             <td style="width: 100px">总额</td>
           </tr>
-          <tr v-for="car in chooseCar" :key="car.carId">
+          <tr v-for="car in chooseCarList" :key="car.carId">
             <td>{{ car.licensePlate + car.brand }}</td>
             <td>
               {{ car.dayCost }}
@@ -41,7 +41,7 @@
     </el-form>
     <!-- 选择车辆对话框 -->
     <el-dialog title="选择车辆" :visible.sync="openCar" width="700px" append-to-body>
-      <chooseCar @chooseList="getChooseCar"></chooseCar>
+      <chooseCar @chooseList="getChooseCar" :selectedCarIds="chooseCarList.map(c => c.carId)"></chooseCar>
     </el-dialog>
   </div>
 </template>
@@ -64,7 +64,7 @@ export default {
       form: {
         carCost: 0
       },
-      chooseCar: [],
+      chooseCarList: [],
       openCar: false,
     }
   },
@@ -77,7 +77,7 @@ export default {
     budgetId() {
       this.initForm()
     },
-    chooseCar: {
+    chooseCarList: {
       handler(newVal) {
         this.$emit('chooseCar', newVal)
       },
@@ -92,8 +92,8 @@ export default {
     initForm() {
       if (this.budgetId != '') {
         listBudgetCar({ pageSize: 100, budgetId: this.budgetId }).then((res) => {
-          this.chooseCar = res.rows
-          for (let car of this.chooseCar) {
+          this.chooseCarList = res.rows
+          for (let car of this.chooseCarList) {
             car.fuel = car.car.fuel
             car.insurance = car.car.insurance
             car.maintenance = car.car.maintenance
@@ -107,22 +107,27 @@ export default {
     },
     initCarCost() {
       let carCost = 0;
-      for (let car of this.chooseCar) {
+      for (let car of this.chooseCarList) {
         carCost = carCost + Number(car.amount);
       }
       this.form.carCost = carCost.toFixed(2)
     },
     getChooseCar(val) {
-      this.chooseCar = val;
+      const newCars = val.filter(v => !this.chooseCarList.some(c => c.carId === v.carId));
+      this.chooseCarList = this.chooseCarList.concat(newCars);
       this.openCar = false;
-      this.recalculateCost(val, 'amount', 'carCost');
+      this.recalculateCost(this.chooseCarList, 'amount', 'carCost');
+    },
+    removeCar(carId) {
+      this.chooseCarList = this.chooseCarList.filter(c => c.carId !== carId);
+      this.recalculateCost(this.chooseCarList, 'amount', 'carCost');
     },
     calculateCarTotal(car) {
       let total = Number(car.dayCost) * Number(car.days);
       let sum = total.toFixed(2);
       this.$set(car, "depreciation", car.dayCost);
       this.$set(car, "amount", sum);
-      this.getCost("amount", "carCost", this.chooseCar);
+      this.getCost("amount", "carCost", this.chooseCarList);
     },
     recalculateCost(arr, name, formName) {
       let sum = arr.reduce((accumulator, item) => {

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

@@ -18,7 +18,7 @@
       </el-form-item>
     </el-form>
     <el-table ref="chooseCar" :data="list" @selection-change="handleSelectionChange" :row-key="getRowKeys">
-      <el-table-column type="selection" width="50" align="center" :reserve-selection="true" />
+      <el-table-column type="selection" width="50" align="center" :reserve-selection="true" :selectable="isSelectable" />
       <el-table-column label="车辆状态" align="center" prop="status">
         <template slot-scope="scope">
           <el-tag :type="statusTypeStyle(scope.row.status)">{{ statusTypeText(scope.row.status) }}</el-tag>
@@ -51,6 +51,12 @@
 import { listCar } from "@/api/oa/car/car";
 import { getUserByPost } from "@/api/system/post";
 export default {
+  props: {
+    selectedCarIds: {
+      type: Array,
+      default: () => []
+    }
+  },
   data() {
     return {
       queryParams: {
@@ -92,7 +98,25 @@ export default {
       return row.carId;
     },
     confirmChoose() {
-      this.$emit('chooseList', this.chooseList)
+      if (!this.chooseList || this.chooseList.length === 0) {
+        return;
+      }
+      const existedCars = this.chooseList.filter(c => this.selectedCarIds.includes(c.carId));
+      let cars = this.chooseList.filter(c => !this.selectedCarIds.includes(c.carId));
+      if (cars.length === 0) {
+        const names = existedCars.map(c => c.licensePlate + c.brand).join('、');
+        this.$message.warning(`所选车辆【${names}】已存在，无法重复添加`);
+        return;
+      }
+      if (existedCars.length > 0) {
+        const names = existedCars.map(c => c.licensePlate + c.brand).join('、');
+        this.$message.warning(`车辆【${names}】已存在，已自动过滤`);
+      }
+      this.$emit('chooseList', cars);
+      this.clearChoose();
+    },
+    isSelectable(row) {
+      return !this.selectedCarIds.includes(row.carId);
     },
     clearChoose() {
       this.$refs.chooseCar.clearSelection();