|
|
@@ -80,20 +80,27 @@
|
|
|
<el-form-item label="目标院校" prop="targetCollege">
|
|
|
<div class="w-full flex items-center gap-x-2 ">
|
|
|
<div class="flex-1 flex flex-col gap-2">
|
|
|
- <div
|
|
|
- class="flex items-center gap-x-2 border-1 border-solid border-[#e5e5e5] rounded-[4px] px-2 py-2 relative"
|
|
|
- v-for="(item, index) in form.directionStudy" :key="item.id">
|
|
|
- <div class="text-[13px] leading-[13px] font-bold">{{ item.universityName }}</div>
|
|
|
- <div
|
|
|
- class="text-[11px] text-[#5692fa] leading-[11px] border-1 border-solid border-[#5692fa] rounded-[4px] px-1 py-1">
|
|
|
- {{ item.majorName }}</div>
|
|
|
- <div class="text-[11px] text-[#999] leading-[11px]">{{ item.majorAncestors }}</div>
|
|
|
- <div class="absolute top-1/2 right-2 -translate-y-1/2 cursor-pointer">
|
|
|
- <el-icon @click="handleRemoveTargetCollege(index)" color="#ff4949">
|
|
|
- <Close />
|
|
|
- </el-icon>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <draggable v-model="form.directionStudy" item-key="id" handle=".drag-handle" animation="200"
|
|
|
+ class="flex flex-col gap-2" ghost-class="ghost-class" chosen-class="chosen-class">
|
|
|
+ <template #item="{ element, index }">
|
|
|
+ <div
|
|
|
+ class="flex items-center gap-x-2 border-1 border-solid border-[#e5e5e5] rounded-[4px] px-2 py-2 relative bg-white">
|
|
|
+ <el-icon class="cursor-move drag-handle mr-1" color="#909399">
|
|
|
+ <Rank />
|
|
|
+ </el-icon>
|
|
|
+ <div class="text-[13px] leading-[13px] font-bold">{{ element.universityName }}</div>
|
|
|
+ <div
|
|
|
+ class="text-[11px] text-[#5692fa] leading-[11px] border-1 border-solid border-[#5692fa] rounded-[4px] px-1 py-1">
|
|
|
+ {{ element.majorName }}</div>
|
|
|
+ <div class="text-[11px] text-[#999] leading-[11px]">{{ element.majorAncestors }}</div>
|
|
|
+ <div class="absolute top-1/2 right-2 -translate-y-1/2 cursor-pointer">
|
|
|
+ <el-icon @click="handleRemoveTargetCollege(index)" color="#ff4949">
|
|
|
+ <Close />
|
|
|
+ </el-icon>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </draggable>
|
|
|
</div>
|
|
|
<el-button type="primary" :disabled="form.directionStudy.length >= 3" icon="plus" plain
|
|
|
@click="handleAddTargetCollege">添加</el-button>
|
|
|
@@ -113,6 +120,8 @@ import IeUniversitySelect from '@/components/IeUniversitySelect/index.vue';
|
|
|
import DirectionDialog from './DirectionDialog.vue';
|
|
|
import { updateCardUser, getUserByCardId } from '@/api/dz/cards';
|
|
|
import { getCurrentInstance, nextTick, watch, watchEffect } from 'vue';
|
|
|
+import draggable from 'vuedraggable';
|
|
|
+import { Rank } from '@element-plus/icons-vue';
|
|
|
|
|
|
const { proxy } = getCurrentInstance();
|
|
|
|
|
|
@@ -238,4 +247,15 @@ defineExpose({
|
|
|
close
|
|
|
})
|
|
|
</script>
|
|
|
-<style lang="scss" scoped></style>
|
|
|
+<style lang="scss" scoped>
|
|
|
+:deep(.ghost-class) {
|
|
|
+ opacity: 1 !important;
|
|
|
+ background: #fff !important;
|
|
|
+ border: 1px solid #e5e5e5 !important;
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.chosen-class) {
|
|
|
+ background: #fff !important;
|
|
|
+ border: 1px solid var(--el-color-primary) !important;
|
|
|
+}
|
|
|
+</style>
|
