Browse Source

fix(bugs): 修改方案选择场景过多处理

tangning 3 years ago
parent
commit
54d88b84fd
1 changed files with 81 additions and 18 deletions
  1. 81 18
      src/views/scenes/liveDrawer.vue

+ 81 - 18
src/views/scenes/liveDrawer.vue

@@ -33,6 +33,18 @@
             </template>
           </a-input>
         </template>
+        <template #sceneNum="{ model, field }">
+          <a-select
+            :disabled="isUpdate"
+            v-bind="$attrs"
+            v-model:value="model[field]"
+            @change="handleChange"
+            @search="handleSearch"
+            showSearch
+            placeholder="请选择场景链接"
+            :options="sceneNumOption.list"
+          />
+        </template>
       </BasicForm>
     </div>
   </BasicDrawer>
@@ -46,6 +58,7 @@
   import { useI18n } from '/@/hooks/web/useI18n';
   import { useUserStore } from '/@/store/modules/user';
   import { data as CascaderData, getCode } from '/@/utils/cascaderData';
+  import { ListApi } from '/@/api/scene/list';
 
   import {
     brandTypeListApi,
@@ -57,7 +70,6 @@
     brandUpdateApi,
     // LiveSceneDeleteApi,
   } from '/@/api/scene/live';
-
   import { useScript } from '/@/hooks/web/useScript';
   const A_MAP_URL = 'https://webapi.amap.com/maps?v=2.0&key=e661b00bdf2c44cccf71ef6070ef41b8';
 
@@ -79,7 +91,10 @@
       const token = userStore.getToken;
       const userinfo = computed(() => userStore.getUserInfo);
       const wrapRef = ref<HTMLDivElement | null>(null);
-
+      const sceneNumOption = reactive({
+        list: [],
+        allList: [],
+      });
       interface AddressComponentType {
         city: string;
         district: string;
@@ -111,6 +126,7 @@
         id: '',
         introduceVideoCover: '',
       });
+
       const defaultAddress = reactive({
         address: '山阴路688号恒隆广场B座1217',
         // address: '权晖花园21栋',
@@ -197,21 +213,25 @@
           },
           required: true,
           helpMessage: '直播间绑定后,将无法修改',
-          componentProps: {
-            api: getAllSceneApi,
-            immediate: true,
-            resultField: 'list',
-            labelField: 'sceneName',
-            valueField: 'num',
-            onChange: function (_, item) {
-              console.log('onChange', item);
-              myData.sceneUrl = item.webSite || item.sceneUrl || item.liveRoomUrl;
-            },
-            params: {
-              page: 1,
-              limit: 100,
-            },
-          },
+          slot: 'sceneNum',
+          // componentProps: {
+          //   api: getAllSceneApi,
+          //   immediate: true,
+          //   resultField: 'list',
+          //   labelField: 'sceneName',
+          //   valueField: 'num',
+          //   onChange: function (_, item) {
+          //     console.log('onChange', item);
+          //     myData.sceneUrl = item.webSite || item.sceneUrl || item.liveRoomUrl;
+          //   },
+          //   onSearch:function(vale,item) {
+          //     console.log('onChange', vale,item);
+          //   },
+          //   params: {
+          //     page: 1,
+          //     limit: 100,
+          //   },
+          // },
         },
 
         {
@@ -370,8 +390,21 @@
         resetFields();
         setDrawerProps({ confirmLoading: false });
         isUpdate.value = !!data?.isUpdate;
-        console.log('isUpdate', isUpdate.value);
         const { record } = data;
+        let Option = await getAllSceneApi({
+          page: 1,
+          limit: 100,
+          sceneNum: record && record.sceneNum,
+        });
+        sceneNumOption.list = Option.list.map((ele) => {
+          return {
+            ...ele,
+            label: ele.sceneName,
+            value: ele.num,
+          };
+        });
+        sceneNumOption.allList = sceneNumOption.list;
+        console.log('isUpdate', isUpdate.value, Option.list);
         await updateSchema({
           field: 'sceneNum',
           componentProps: {
@@ -498,6 +531,33 @@
         });
       }
 
+      function handleChange(value, item) {
+        console.log('handleChange', value, item);
+        console.log('myData.sceneUrl', myData.sceneUrl);
+        setFieldsValue({
+          sceneNum: value,
+        });
+      }
+
+      async function handleSearch(value) {
+        if (!value) {
+          return (sceneNumOption.list = sceneNumOption.allList);
+        }
+        let { list } = await ListApi({
+          sceneName: value,
+          limit: 100,
+          page: 1,
+        });
+        sceneNumOption.list = list.map((ele) => {
+          return {
+            ...ele,
+            value: ele.num,
+            label: ele.sceneName,
+          };
+        });
+        console.log('handleSearch', value, list);
+      }
+
       function getCodeArray(addressComponent) {
         let { province, city, district } = addressComponent;
         return [province, city, district];
@@ -616,7 +676,10 @@
         handleClose,
         t,
         token,
+        sceneNumOption,
         isUpdate,
+        handleChange,
+        handleSearch,
       };
     },
   });