Skip to content

S
so-manage-ui
Commit 9f57ca73 authored by 白舜's avatar 白舜 🎱
Browse files
Options

重构能力推荐管理功能，修复之前的bug

parent c2cf6ba7
Hide whitespace changes
Inline Side-by-side
Showing with 159 additions and 106 deletions
src/components/ability-card.vue
View file @ 9f57ca73
......@@ -2,25 +2,46 @@
<div class="item_card" :style="{ height: props.flag ? '242px' : '206px' }">
<div class="action_box" v-if="props.flag">
<div class="can_click_text" @click="deleteItem(props.item)">删除</div>
<div class="can_click_text" @click="move(1)" :class="props.item.canDown ? '' : 'disabled'">下移</div>
<div class="can_click_text" @click="move(2)" :class="props.item.canUp ? '' : 'disabled'">上移</div>
<div class="can_click_text" @click="move(1)" :class="props.item.canDown ? '' : 'disabled'">
下移
</div>
<div class="can_click_text" @click="move(2)" :class="props.item.canUp ? '' : 'disabled'">
上移
</div>
</div>
<div class="top_info" :style="{ 'padding-left': !props.flag ? '8px' : '24px' }">
<template v-if="props.item.isSelected">
<el-checkbox
v-if="!props.flag"
class="select_box"
v-model="props.item.isSelected"
:disabled="props.item.isSelected"
@change="changeSelectedList"></el-checkbox>
</template>
<el-checkbox
v-if="!props.flag"
v-else-if="!props.flag"
class="select_box"
v-model="props.item.checked"
@change="change_check"></el-checkbox>
v-model="checked"
@change="changeSelectedList"></el-checkbox>
<div class="logo">
<img v-if="props.item.ability_logo" :src="JSON.parse(props.item.ability_logo)[0].url" alt="" />
<img
v-if="props.item.ability_logo !== '[]'"
:src="JSON.parse(props.item.ability_logo)[0].url"
alt="" />
<img v-else src="../assets/imgs/img_cover_ability.png" alt="" />
</div>
<div class="info">
<div class="name">
<el-tooltip class="box-item" effect="light" :content="props.item.ability_name" placement="top">
<el-tooltip
class="box-item"
effect="light"
:content="props.item.ability_name"
placement="top">
<span class="ability_name">{{ props.item.ability_name }}</span>
</el-tooltip>
<span class="icon_box openness" :class="openClassObj[props.item.openness_id]">{{ props.item.openness }}</span>
<span class="icon_box openness" :class="openClassObj[props.item.openness_id]">{{
props.item.openness
}}</span>
<span class="icon_box mock" v-if="props.item.include_mock_service">mock</span>
</div>
<div class="count">
......@@ -33,7 +54,8 @@
<div class="line"></div>
<div class="box2">
阅读{{
props.item.browse_count == 0 || (props.item.browse_count && props.item.browse_count < 10000)
props.item.browse_count == 0 ||
(props.item.browse_count && props.item.browse_count < 10000)
? props.item.browse_count
: props.item.browse_count < 10000000
? Math.floor(props.item.browse_count / 10000) + "万+"
......@@ -53,7 +75,9 @@
</div>
</div>
</div>
<div class="bottom_info" :style="{ height: props.flag ? 'calc(100% - 128px)' : 'calc(100% - 92px)' }">
<div
class="bottom_info"
:style="{ height: props.flag ? 'calc(100% - 128px)' : 'calc(100% - 92px)' }">
<div class="desc" :title="props.item.synopsis">
{{ props.item.synopsis }}
</div>
......@@ -68,8 +92,9 @@
</template>
<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
const checked = ref(false);
const router = useRouter();
const props = defineProps({
item: {
......@@ -81,7 +106,7 @@ const props = defineProps({
default: false,
},
});
const emit = defineEmits(["change_check", "deleteItem", "move"]);
const emit = defineEmits(["changeSelectedList", "deleteItem", "move"]);
const openClassObj = {
"9de06ba6-6ee2-4449-91d9-31a1c7554311": "open",
"4e8b4c37-e565-4195-8303-3b1ccd48dd13": "share",
......@@ -89,9 +114,8 @@ const openClassObj = {
"4e8b4c37-e565-4195-8303-3b1ccd48dd16": "sensitive",
};
const change_check = () => {
console.log(props.item);
emit("change_check", props.item);
const changeSelectedList = () => {
emit("changeSelectedList", props.item, checked.value);
};
const deleteItem = (item) => {
emit("deleteItem", item);
......
src/components/ability-list.vue
View file @ 9f57ca73
<template>
<div v-if="!props.flag && props.loading === true">
<div class="empty-tips">数据加载中...</div>
</div>
<div class="card_list">
<div v-for="(e, i) in props.list" :key="'card' + i" class="item">
<ability-card
v-if="e.id"
:item="e"
@change_check="changeCheck"
:flag="props.flag"
@deleteItem="deleteItem"
@move="move" />
<div v-else class="empty_card" @click="open">
<template v-if="props.list.length > 0">
<div v-for="(item, i) in props.list" :key="'card' + i" class="item">
<ability-card
:item="item"
@change-selected-list="changeSelectedList"
:flag="props.flag"
@deleteItem="deleteItem"
@move="move" />
</div>
</template>
<div class="item" v-if="props.flag">
<div v-if="props.list.length < 9" class="empty_card" @click="open">
<span>+</span>
</div>
</div>
......@@ -26,13 +32,16 @@ const props = defineProps({
type: Boolean,
default: false,
},
loading: {
type: Boolean,
default: false,
}
});
const emit = defineEmits(["changeCheck", "openBox", "deleteItem", "move"]);
const changeCheck = (item) => {
emit("changeCheck", item);
const emit = defineEmits(["changeSelectedList", "openBox", "deleteItem", "move"]);
const changeSelectedList = (item, checked) => {
emit("changeSelectedList", item, checked);
};
const open = () => {
console.log(3333);
emit("openBox");
};
const deleteItem = (item) => {
......@@ -67,5 +76,9 @@ const move = (temp) => {
font-size: 48px;
font-weight: 100;
}
.empty-tips {
text-align: center;
}
}
</style>
src/page/main/home-config/recommend/edit/index.vue
View file @ 9f57ca73
......@@ -11,14 +11,14 @@
@changeType="changeType"></type-form>
<div class="ability_select">
<div class="title">
<span>已选择能力（{{ selectArrNew.length }}/9）</span>
<span>已选择能力（{{ selectedItemList.length }}/9）</span>
<el-tooltip class="box-item" effect="light" content="最少需选择6个能力" placement="top">
<bg-icon icon="#bg-ic-circle-warning" style="color: #7784a6"></bg-icon>
</el-tooltip>
</div>
<div class="select_arr">
<ability-list
:list="selectArr"
:list="selectedItemList"
:flag="true"
@openBox="openDialog"
@deleteItem="deleteItem"
......@@ -37,7 +37,12 @@
</div>
</div>
</div>
<el-dialog class="select_dialog" title="选择能力" v-model="selectDialog" width="1220px">
<el-dialog
class="select_dialog"
title="选择能力"
v-model="selectDialog"
width="1220px"
:before-close="cancelSelectDialog">
<div class="select_box">
<div class="topFilter">
<div class="right">
......@@ -97,13 +102,17 @@
</div>
<div>
<span>已选择</span>
<span class="num">（{{ selectArrNew.length }}/9）</span>
<span class="num">（{{ toBeAddedItemList.length }}/9）</span>
<span>项</span>
<span class="can_click_text" @click="clearSelection">清空</span>
</div>
</div>
<div class="user_table bg-scroll">
<ability-list :list="list" @changeCheck="changeCheck"></ability-list>
<ability-list
:list="list"
:loading="abilityLoading"
:flag="false"
@change-selected-list="changeSelectedList"></ability-list>
</div>
</div>
</div>
......@@ -117,8 +126,8 @@
:pageSizes="[15, 30, 50]">
</bg-pagination>
<div class="apaas_button">
<el-button type="default" @click="selectDialog = false">取 消</el-button>
<el-button type="primary" @click="conform">确 定</el-button>
<el-button type="default" @click="cancelSelectDialog">取 消</el-button>
<el-button type="primary" @click="confirm">确 定</el-button>
</div>
</template>
</el-dialog>
......@@ -143,7 +152,7 @@ const state = reactive({
logo: [],
state: 1,
},
selectArr: ["", "", "", "", "", "", "", "", ""],
selectedItemList: [],
selectDialog: false,
dialogFilter: {
openness: [],
......@@ -176,7 +185,8 @@ const state = reactive({
],
businessList: [],
list: [],
selectArrNew: [],
abilityLoading: false,
toBeAddedItemList: [],
});
const getDetail = (id) => {
......@@ -185,30 +195,25 @@ const getDetail = (id) => {
.then((res) => {
if (res.data.code == 200) {
const data = res.data.data;
console.log(data);
typeFormRef.value.setForm({
business_type_id: data.business_type_id,
logo: data.logo ? [{ url: data.logo }] : [],
});
state.selectArr = [];
state.selectArrNew = [];
state.selectedItemList = [];
state.toBeAddedItemList = [];
state.formData.state = data.state;
state.formData.business_type_id = data.business_type_id;
state.selectArrNew = data.ability_list || [];
state.selectArrNew.forEach((e, i) => {
state.selectedItemList = data.ability_list || [];
state.selectedItemList.forEach((e, i) => {
e.canDown = true;
e.canUp = true;
if (i == 0) {
e.canUp = false;
}
if (i == state.selectArrNew.length - 1) {
if (i == state.selectedItemList.length - 1) {
e.canDown = false;
}
});
state.selectArr.push(...state.selectArrNew);
for (var i = 0; i < 9 - state.selectArrNew.length; i++) {
state.selectArr.push("");
}
} else {
ElMessage.error(res.data.data);
}
......@@ -230,36 +235,33 @@ const getOrgList = () => {
const changeType = (val) => {
state.formData.business_type_id = val;
state.selectArr = ["", "", "", "", "", "", "", "", ""];
state.selectArrNew = [];
state.selectedItemList = [];
state.toBeAddedItemList = [];
};
const getAbilityList = () => {
state.abilityLoading = true;
let params = {
...state.dialogFilter,
business_type: state.formData.business_type_id,
};
params.organization_id =
params.organization_id && params.organization_id.length > 0 ? params.organization_id.join(",") : "";
params.organization_id && params.organization_id.length > 0
? params.organization_id.join(",")
: "";
params.openness = params.openness && params.openness.length > 0 ? params.openness.join(",") : "";
axios.get(`/apaas/system/v5/recommend/ability/list`, { params }).then((res) => {
if (res.data.code == 200) {
let selecteItemIdList = state.selectedItemList.map((e) => e.id);
state.list = res.data.data.ability_list || [];
state.selectArrNew = [];
state.total = res.data.data.ability_total;
nextTick(() => {
state.list.forEach((e) => {
e.checked = false;
state.selectArr.forEach((k) => {
if (k.id) {
if (e.id == k.id) {
e.checked = true;
state.selectArrNew.push(e);
}
}
});
});
state.list.forEach((item) => {
if (selecteItemIdList.indexOf(item.id) > -1) {
item.isSelected = true;
}
});
state.total = res.data.data.ability_total;
}
state.abilityLoading = false;
});
};
......@@ -269,58 +271,58 @@ const openDialog = () => {
};
const deleteItem = (item) => {
changeCheck(item, true);
let selecteItemIdList = state.selectedItemList.map((e) => e.id);
state.selectedItemList.splice(selecteItemIdList.indexOf(item.id), 1);
moveAbleChanging();
};
const move = (temp) => {
let id = temp.item.id;
let index = null;
state.selectArr.forEach((e, i) => {
state.selectedItemList.forEach((e, i) => {
if (e.id == id) {
index = i;
}
});
if (temp.type == 1) {
state.selectArr[index] = state.selectArr[index + 1];
state.selectArr[index + 1] = temp.item;
state.selectedItemList[index] = state.selectedItemList[index + 1];
state.selectedItemList[index + 1] = temp.item;
} else {
state.selectArr[index] = state.selectArr[index - 1];
state.selectArr[index - 1] = temp.item;
state.selectedItemList[index] = state.selectedItemList[index - 1];
state.selectedItemList[index - 1] = temp.item;
}
state.selectArr.forEach((e, i) => {
state.selectedItemList.forEach((e, i) => {
if (e != "") {
e.canDown = true;
e.canUp = true;
if (i == 0) {
e.canUp = false;
}
if (i == state.selectArrNew.length - 1) {
if (i == state.selectedItemList.length - 1) {
e.canDown = false;
}
}
});
state.selectArrNew = state.selectArr.filter((e) => e )
};
const changePage = (val) => {
state.dialogFilter.page = 1;
state.dialogFilter.page = val;
getAbilityList();
};
const changeSize = (val) => {
state.dialogFilter.limit = val;
changePage(1);
changePage(val);
};
const changeCollation = (val) => {
state.dialogFilter.collation = val;
changePage(1);
changePage(val);
};
const clearSelection = () => {
state.list.forEach((e) => {
e.checked = false;
});
state.selectArrNew = [];
state.toBeAddedItemList = [];
state.list = [];
};
const searchAction = () => {
changePage(1);
......@@ -337,59 +339,73 @@ const clearAction = () => {
changePage(1);
};
const changeCheck = (item, deleteFlag) => {
let arr = state.selectArrNew.map((e) => e.id) || [];
if (arr.indexOf(item.id) > -1) {
state.selectArrNew.splice(arr.indexOf(item.id), 1);
const changeSelectedList = (item, checked) => {
if (checked) {
state.toBeAddedItemList.push(item);
} else {
state.selectArrNew.push(item);
let _toBeAddedItemIdList = state.toBeAddedItemList.map((e) => e.id);
state.toBeAddedItemList.splice(_toBeAddedItemIdList.indexOf(item.id), 1);
}
state.selectArrNew.forEach((e, i) => {
moveAbleChanging();
};
const moveAbleChanging = () => {
state.selectedItemList.forEach((e, i) => {
e.canDown = true;
e.canUp = true;
if (i == 0) {
e.canUp = false;
}
if (i == state.selectArrNew.length - 1) {
if (i == state.selectedItemList.length - 1) {
e.canDown = false;
}
});
if (deleteFlag) {
conform();
}
};
const submit = () => {
typeFormRef.value.submitForm();
};
const conform = () => {
if (state.selectArrNew.length > 9) {
const cancelSelectDialog = () => {
state.selectDialog = false;
clearSelection();
};
const confirm = () => {
if (
state.toBeAddedItemList.length > 9 ||
state.selectedItemList.length + state.toBeAddedItemList.length > 9
) {
ElMessage.error("最多可选择9个能力");
return;
}
state.selectArr = JSON.parse(JSON.stringify(state.selectArrNew));
if (state.selectArr.length < 9) {
let arr = [];
for (var i = 0; i < 9 - state.selectArr.length; i++) {
arr.push("");
const _newItemList = [];
state.toBeAddedItemList.forEach((toBeAddedItem) => {
const hasItem = state.selectedItemList.some(
(selectedItem) => toBeAddedItem.id === selectedItem.id
);
if (!hasItem) {
_newItemList.push(toBeAddedItem);
}
state.selectArr.push(...arr);
}
});
state.selectedItemList.push(..._newItemList);
state.toBeAddedItemList.length = 0;
moveAbleChanging();
clearSelection();
state.selectDialog = false;
};
const submitFormData = (data) => {
if (state.selectArrNew.length < 6) {
if (state.selectedItemList.length < 6) {
ElMessage.error("最少选择6个能力");
return;
}
if (data) {
Object.assign(state.formData, data);
console.log(state.formData);
if (route.query.id) {
// 编辑
let abilitys = [];
state.selectArrNew.forEach((e) => {
state.selectedItemList.forEach((e) => {
abilitys.push(e.ability_id);
});
let params = {
......@@ -409,7 +425,7 @@ const submitFormData = (data) => {
});
} else {
let abilitys = [];
state.selectArrNew.forEach((e) => {
state.selectedItemList.forEach((e) => {
abilitys.push(e.ability_id);
});
let params = {
......@@ -461,16 +477,16 @@ onBeforeMount(() => {
const {
formData,
selectArr,
selectedItemList,
selectDialog,
dialogFilter,
typeList,
total,
orgList,
collationArr,
selection,
list,
selectArrNew,
abilityLoading,
toBeAddedItemList,
businessList,
} = toRefs(state);
</script>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment