更新 新增货种/货种绑定货主公司

src/views/cargoManage/cargoList.vue

@@ -61,7 +61,10 @@
       <template #header="{ close, titleId, titleClass }">
         <div class="df jcsb" style="color: #409eff">
           <div>{{ currentCargo + " - 货主公司列表" }}</div>
-          <el-button type="primary" @click="bindModel = true">
+          <el-button
+            type="primary"
+            @click="(bindModel = true), (ruleForm.cargoName = currentCargo)"
+          >
             新增绑定货主公司
           </el-button>
         </div>
@@ -110,18 +113,51 @@
           ? currentCargo + ' - 新增绑定货主公司'
           : '新增货种'
       "
+      @close="
+        ruleForm = {
+          cargoName: '',
+          cargoOwnerIds: [],
+        }
+      "
     >
       <el-form
         ref="ruleFormRef"
         :model="ruleForm"
         :rules="rules"
-        label-width="100px"
-      ></el-form>
+        label-width="120px"
+      >
+        <el-form-item label="货种名称" prop="cargoName">
+          <el-input
+            v-model="ruleForm.cargoName"
+            :disabled="cargoOwnerModelVisible"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="货主公司(多选)" prop="cargoOwnerIds">
+          <el-select
+            v-model="ruleForm.cargoOwnerIds"
+            multiple
+            style="width: 400px"
+          >
+            <el-option
+              v-for="(item, index) in cargoOwnerModelVisible
+                ? filterCargoOwnerOptions
+                : cargoOwnerOptions"
+              :key="index"
+              :label="item.value"
+              :value="item.key"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <div class="df aic jcfe mt30 mr30">
+        <el-button type="default" @click="bindModel = false">取消</el-button>
+        <el-button type="primary" @click="submit()">确认</el-button>
+      </div>
     </el-dialog>
   </div>
 </template>
 <script setup>
-import { ref, h, reactive, toRefs, onMounted } from "vue";
+import { ref, h, reactive, toRefs, onMounted, computed } from "vue";
 import { ElNotification, ElMessageBox, ElMessage } from "element-plus";
 import store from "../../store";
 import router from "../../router";
@@ -185,6 +221,12 @@ async function enableDisableCargoOwnerCompany(status, row) {
 }
 const bindModel = ref(false);
 const cargoOwnerOptions = ref([]);
+const filterCargoOwnerOptions = computed(() => {
+  return cargoOwnerOptions.value.filter(
+    (item) =>
+      !cargoOwnerInfos.value.some((obj) => obj.cargoOwnerName === item.value)
+  );
+});
 async function getCargoOwnerCompanySelect() {
   let { data } = await api.getCargoOwnerCompanySelect({});
   cargoOwnerOptions.value = data.result;
@@ -203,9 +245,29 @@ const rules = ref({
 function cancel() {}
 
 function submit() {
-  ruleFormRef.value.validate((valid) => {
+  ruleFormRef.value.validate(async (valid) => {
     if (valid) {
-      console.log(ruleForm.value);
+      let { data } = await api[
+        cargoOwnerModelVisible.value ? "bindCargoOwnerCompany" : "addCargo"
+      ]({
+        cargoName: ruleForm.value.cargoName,
+        cargoOwnerIds: ruleForm.value.cargoOwnerIds.join(","),
+      });
+      if (data.status == 0) {
+        ElNotification({
+          message: data.msg,
+          type: "success",
+        });
+        bindModel.value = false;
+        cargoOwnerModelVisible.value = false;
+      } else {
+        ElMessage({
+          message: data.msg,
+          type: "error",
+        });
+      }
+
+      getCargoList();
     }
   });
 }