|
@@ -116,12 +116,46 @@ async function emitChange() {
|
|
localStorage.setItem('platformNumberList', platformNumberList.value);
|
|
localStorage.setItem('platformNumberList', platformNumberList.value);
|
|
localStorage.setItem('platformNameList', platformNameList.value);
|
|
localStorage.setItem('platformNameList', platformNameList.value);
|
|
localStorage.setItem('operationList', operationList.value);
|
|
localStorage.setItem('operationList', operationList.value);
|
|
- //localStorage.setItem('usersList', JSON.stringify(usersList.value));
|
|
|
|
|
|
+ localStorage.setItem('usersList', JSON.stringify(usersList.value));
|
|
localStorage.setItem('countryList', JSON.stringify(countryList.value));
|
|
localStorage.setItem('countryList', JSON.stringify(countryList.value));
|
|
localStorage.setItem('brandNameList', JSON.stringify(brandNameList.value));
|
|
localStorage.setItem('brandNameList', JSON.stringify(brandNameList.value));
|
|
localStorage.setItem('platformList', JSON.stringify(platformList.value));
|
|
localStorage.setItem('platformList', JSON.stringify(platformList.value));
|
|
}
|
|
}
|
|
|
|
|
|
|
|
+// 快捷选择美洲区国家
|
|
|
|
+const selectCommonGroup1 = () => {
|
|
|
|
+ countryList.value = ['美国', '加拿大', '墨西哥'];
|
|
|
|
+ emitChange(); // 更新选择后的数据
|
|
|
|
+};
|
|
|
|
+
|
|
|
|
+// 快捷选择欧洲+英国国家
|
|
|
|
+const selectCommonGroup2 = () => {
|
|
|
|
+ countryList.value = ['比利时', '德国', '法国', '荷兰', '西班牙', '意大利', '英国'];
|
|
|
|
+ emitChange(); // 更新选择后的数据
|
|
|
|
+};
|
|
|
|
+
|
|
|
|
+const clearAll = () => {
|
|
|
|
+ countryList.value = [];
|
|
|
|
+ emitChange(); // 更新选择后的数据
|
|
|
|
+};
|
|
|
|
+
|
|
|
|
+//// 搜索用户
|
|
|
|
+//const searchUsers = async (query) => {
|
|
|
|
+// if (query) {
|
|
|
|
+// // 当输入有值时,进行过滤
|
|
|
|
+// usersOptions.value = usersOptions.value.filter(option =>
|
|
|
|
+// option.label.toLowerCase().includes(query.toLowerCase())
|
|
|
|
+// );
|
|
|
|
+// } else {
|
|
|
|
+// await loadUsers();
|
|
|
|
+// }
|
|
|
|
+//};
|
|
|
|
+//
|
|
|
|
+//// 加载用户选项
|
|
|
|
+//const loadUsers = async () => {
|
|
|
|
+// await fetchUsersSelect();
|
|
|
|
+//};
|
|
|
|
+
|
|
watch([countryList, brandNameList, usersList, platformList], () => {
|
|
watch([countryList, brandNameList, usersList, platformList], () => {
|
|
emitChange();
|
|
emitChange();
|
|
});
|
|
});
|
|
@@ -142,13 +176,38 @@ defineExpose({ fetchFilteredData, filteredData, updateData });
|
|
<el-input v-model="platformNameList" class="flex-item" clearable placeholder="平台名称"
|
|
<el-input v-model="platformNameList" class="flex-item" clearable placeholder="平台名称"
|
|
@change="emitChange"></el-input>
|
|
@change="emitChange"></el-input>
|
|
<el-input v-model="operationList" class="flex-item" clearable placeholder="运营" @change="emitChange"></el-input>
|
|
<el-input v-model="operationList" class="flex-item" clearable placeholder="运营" @change="emitChange"></el-input>
|
|
- <el-select v-if="props.showOperationSearch" v-model="usersList" class="flex-item" collapse-tags
|
|
|
|
|
|
+ <el-select v-model="usersList" class="flex-item" collapse-tags
|
|
collapse-tags-tooltip
|
|
collapse-tags-tooltip
|
|
multiple placeholder="填写人">
|
|
multiple placeholder="填写人">
|
|
<el-option v-for="item in usersOptions" :key="item.value" :label="item.label" :value="item.value" />
|
|
<el-option v-for="item in usersOptions" :key="item.value" :label="item.label" :value="item.value" />
|
|
</el-select>
|
|
</el-select>
|
|
|
|
+ <!--<el-select-->
|
|
|
|
+ <!-- v-model="usersList"-->
|
|
|
|
+ <!-- class="flex-item"-->
|
|
|
|
+ <!-- multiple-->
|
|
|
|
+ <!-- filterable-->
|
|
|
|
+ <!-- clearable-->
|
|
|
|
+ <!-- collapse-tags-->
|
|
|
|
+ <!-- placeholder="填写人"-->
|
|
|
|
+ <!-- :filter-method="searchUsers"-->
|
|
|
|
+
|
|
|
|
+ <!-- @change="emitChange"-->
|
|
|
|
+ <!-- style="width: 300px;"-->
|
|
|
|
+ <!-->-->
|
|
|
|
+ <!-- <el-option-->
|
|
|
|
+ <!-- v-for="item in usersOptions"-->
|
|
|
|
+ <!-- :key="item.value"-->
|
|
|
|
+ <!-- :label="item.label"-->
|
|
|
|
+ <!-- :value="item.value"-->
|
|
|
|
+ <!-- />-->
|
|
|
|
+ <!--</el-select>-->
|
|
<el-select v-model="countryList" class="flex-item" collapse-tags collapse-tags-tooltip multiple placeholder="国家">
|
|
<el-select v-model="countryList" class="flex-item" collapse-tags collapse-tags-tooltip multiple placeholder="国家">
|
|
<el-option v-for="item in countryOptions" :key="item" :label="item" :value="item" />
|
|
<el-option v-for="item in countryOptions" :key="item" :label="item" :value="item" />
|
|
|
|
+ <template #footer>
|
|
|
|
+ <el-button text size="small" @click="selectCommonGroup1">美洲区</el-button>
|
|
|
|
+ <el-button text size="small" @click="selectCommonGroup2">欧洲+英国</el-button>
|
|
|
|
+ <el-button text icon="Delete" type="danger" @click="clearAll"></el-button>
|
|
|
|
+ </template>
|
|
</el-select>
|
|
</el-select>
|
|
<el-select v-model="brandNameList" class="flex-item" collapse-tags collapse-tags-tooltip multiple
|
|
<el-select v-model="brandNameList" class="flex-item" collapse-tags collapse-tags-tooltip multiple
|
|
placeholder="品牌">
|
|
placeholder="品牌">
|
|
@@ -171,7 +230,11 @@ defineExpose({ fetchFilteredData, filteredData, updateData });
|
|
.flex-item {
|
|
.flex-item {
|
|
flex: 1 1 160px; /* 自适应大小并设定最小宽度 */
|
|
flex: 1 1 160px; /* 自适应大小并设定最小宽度 */
|
|
min-width: 100px;
|
|
min-width: 100px;
|
|
- max-width: 186px;
|
|
|
|
|
|
+ max-width: 300px; /* 设定最大宽度,确保不会变形 */
|
|
height: 30px;
|
|
height: 30px;
|
|
}
|
|
}
|
|
|
|
+
|
|
|
|
+.el-select {
|
|
|
|
+ max-width: 300px; /* 确保下拉框宽度不超过最大宽度 */
|
|
|
|
+}
|
|
</style>
|
|
</style>
|