更新 货种管理

src/components/RemoteSelect.vue

@@ -9,13 +9,13 @@
     :placeholder="placeholder"
     :loading="loading"
     @change="selectItem"
-    @focus="getSelectList"
+    v-model="value"
   >
     <el-option
       v-for="item in options"
       :key="item.key"
       :label="item.value"
-      :value="{ value: item.key, key: item.value }"
+      :value="{ value: item.value, key: item.key }"
     />
   </el-select>
 </template>
@@ -44,6 +44,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    value: {
+      type: Array,
+      default: [],
+    },
   },
 
   emits: ["selectItem"],
@@ -72,7 +76,9 @@ export default {
       emit("selectItem", item);
     };
 
-    onMounted(() => {});
+    onMounted(() => {
+      getSelectList();
+    });
     return {
       getSelectList,
       selectItem,

src/views/cargoManage/cargoList.vue

@@ -18,7 +18,7 @@
     </div>
     <el-dialog
       v-model="visable"
-      :title="currentCargoId ? '修改货种' : '添加货种'"
+      :title="ruleForm.cargoId ? '修改货种' : '添加货种'"
       width="550px"
       @close="resetForm()"
     >
@@ -41,7 +41,7 @@
             <el-form-item prop="proxyIds" label="启用代理">
               <RemoteSelect
                 api="getAgencySelect"
-                v-model="ruleForm.proxyIds"
+                :value="ruleForm.proxyIds"
                 multiple
                 @selectItem="selectAgency($event)"
                 class="mb10"
@@ -85,7 +85,12 @@
         </el-table-column>
         <el-table-column label="启用/禁用" min-width="80" align="center">
           <template v-slot="scope">
-            <el-switch v-model="scope.disabled"></el-switch>
+            <el-switch
+              v-model="scope.row.status"
+              :active-value="1"
+              :inactive-value="0"
+              @change="changeStatus($event, scope.row.id)"
+            ></el-switch>
           </template>
         </el-table-column>
         <el-table-column label="操作" min-width="80" align="center">
@@ -115,7 +120,7 @@
 <script setup>
 import api from "../../apis/fetch";
 import { ref, onMounted } from "vue";
-import { ElNotification, ElMessageBox } from "element-plus";
+import { ElNotification, ElMessageBox, ElMessage } from "element-plus";
 import { subTimeStr } from "../../utils/utils";
 
 let tableData = ref([]);
@@ -123,15 +128,15 @@ let currentPage = ref(1);
 let total = ref(0);
 let term = ref("");
 let loginAccountId = ref(0);
-let currentCargoId = ref(0);
 let form = ref(null);
 let visable = ref(false);
 let ruleForm = ref({
   cargo: "",
-  proxyIds: "",
+  proxyIds: [],
 });
 function resetForm() {
   visable.value = false;
+  ruleForm.value = {};
   form.value.resetFields();
 }
 const rules = ref({
@@ -151,7 +156,7 @@ const rules = ref({
   ],
 });
 function selectAgency(e) {
-  console.log(e);
+  ruleForm.value.proxyIds = e;
 }
 
 async function getCargoList() {
@@ -175,13 +180,17 @@ function pageChange(e) {
   getCargoList();
 }
 async function addCargo() {
-  console.log(ruleForm.value);
-  let { cargo, proxyIds } = ruleForm.value;
+  let { cargo, proxyIds, cargoId } = ruleForm.value;
   let arr = [];
   for (let i of proxyIds) {
-    arr.push(i.value);
+    arr.push(i.key);
   }
-  let res = await api.addCargo({
+  let postData = {};
+  if (cargoId) {
+    postData = { cargoId };
+  }
+  let res = await api[cargoId ? "updateCargo" : "addCargo"]({
+    ...postData,
     cargo,
     proxyIds: arr.join(","),
   });
@@ -195,34 +204,33 @@ async function addCargo() {
     resetForm();
     getCargoList();
   } else {
+    console.log(res);
+  }
+}
+
+async function changeStatus(status, cargoId) {
+  let res = await api.updateCargoStatus({
+    status,
+    cargoId,
+  });
+  if (res.data.status == 0) {
     ElNotification({
-      title: "失败",
+      title: (status == 1 ? "启用" : "禁用") + "成功",
       duration: 1500,
       message: res.data.msg,
-      type: "error",
+      type: "success",
     });
   }
 }
 
 async function showUpdate(item) {
-  console.log(item);
   visable.value = true;
-  let { id: cargoId } = item;
-  currentCargoId.value = cargoId;
+  let { id: cargoId, proxyCargos: proxyIds, cargo } = item;
   ruleForm.value = {
-    proxyIds: [],
-  };
-  let res = await api.getAgencySelected({
+    proxyIds,
+    cargo,
     cargoId,
-  });
-  ruleForm.value.proxyIds = [];
-  for (let i of res.data.result) {
-    ruleForm.value.proxyIds.push({
-      value: i.proxyName,
-      key: i.proxyId,
-    });
-  }
-  console.log(res);
+  };
 }
 
 onMounted(() => {