仓库初始化+岗位相关页面

src/components/JobGoalDialog.vue

@@ -0,0 +1,268 @@
+<template>
+  <!-- 求职目标设置弹窗 -->
+  <el-dialog
+    v-model="visible"
+    width="480px"
+    :show-close="false"
+    :close-on-click-modal="false"
+    :close-on-press-escape="true"
+    :align-center="false"
+    :style="{ marginLeft: 'auto', marginRight: '0.2rem' }"
+    class="job-goal-dialog"
+    @close="handleClose"
+  >
+    <!-- 头部区域 -->
+    <div class="job-goal-dialog__header">
+      <!-- 关闭按钮 -->
+      <button class="job-goal-dialog__close-btn" @click="handleClose">
+        <el-icon><Close /></el-icon>
+      </button>
+      <!-- 弹窗标题 -->
+      <span class="job-goal-dialog__title">求职目标设置</span>
+    </div>
+
+    <!-- 岗位选择模块 -->
+    <div class="job-goal-dialog__section ">
+      <div class="job-goal-dialog__label">*岗位</div>
+      <!-- 已选岗位标签列表 -->
+      <div class="job-goal-dialog__tags">
+        <span
+          v-for="(item, index) in form.positions"
+          :key="index"
+          class="job-goal-dialog__tag"
+        >
+          {{ item }}
+          <!-- 删除岗位标签 -->
+          <el-icon class="job-goal-dialog__tag-close" @click="removePosition(index)"><Close /></el-icon>
+        </span>
+      </div>
+      <!-- 岗位下拉选择器 -->
+      <el-select
+        v-model="newPosition"
+        placeholder="新增岗位"
+        filterable
+        class="job-goal-dialog__select"
+        @change="addPosition"
+      >
+        <el-option
+          v-for="opt in positionOptions"
+          :key="opt"
+          :label="opt"
+          :value="opt"
+        />
+      </el-select>
+    </div>
+
+    <!-- 行业选择模块 -->
+    <div class="job-goal-dialog__section ">
+      <div class="job-goal-dialog__label">*行业</div>
+      <!-- 已选行业标签列表 -->
+      <div class="job-goal-dialog__tags">
+        <span
+          v-for="(item, index) in form.industries"
+          :key="index"
+          class="job-goal-dialog__tag"
+        >
+          {{ item }}
+          <!-- 删除行业标签 -->
+          <el-icon class="job-goal-dialog__tag-close" @click="removeIndustry(index)"><Close /></el-icon>
+        </span>
+      </div>
+      <!-- 行业下拉选择器 -->
+      <el-select
+        v-model="newIndustry"
+        placeholder="新增行业"
+        filterable
+        class="job-goal-dialog__select"
+        @change="addIndustry"
+      >
+        <el-option
+          v-for="opt in industryOptions"
+          :key="opt"
+          :label="opt"
+          :value="opt"
+        />
+      </el-select>
+    </div>
+
+    <!-- 城市选择模块 -->
+    <div class="job-goal-dialog__section ">
+      <div class="job-goal-dialog__label">*城市</div>
+      <!-- 已选城市标签列表 -->
+      <div class="job-goal-dialog__tags">
+        <span
+          v-for="(item, index) in form.cities"
+          :key="index"
+          class="job-goal-dialog__tag"
+        >
+          {{ item }}
+          <!-- 删除城市标签 -->
+          <el-icon class="job-goal-dialog__tag-close" @click="removeCity(index)"><Close /></el-icon>
+        </span>
+      </div>
+      <!-- 城市下拉选择器 -->
+      <el-select
+        v-model="newCity"
+        placeholder="新增城市"
+        filterable
+        class="job-goal-dialog__select"
+        @change="addCity"
+      >
+        <el-option
+          v-for="opt in cityOptions"
+          :key="opt"
+          :label="opt"
+          :value="opt"
+        />
+      </el-select>
+    </div>
+
+    <!-- 工作类型选择模块 -->
+    <div class="job-goal-dialog__section ">
+      <div class="job-goal-dialog__label">*工作类型</div>
+      <!-- 工作类型按钮组 -->
+      <div class="job-goal-dialog__type-group">
+        <button
+          v-for="t in jobTypes"
+          :key="t"
+          class="job-goal-dialog__type-btn"
+          :class="{ 'job-goal-dialog__type-btn--active': form.jobType === t }"
+          @click="form.jobType = t"
+        >
+          {{ t }}
+        </button>
+      </div>
+    </div>
+
+    <!-- 保存按钮区域 -->
+    <div class="job-goal-dialog__footer mt10">
+      <button class="job-goal-dialog__save-btn" @click="handleSave">保存</button>
+    </div>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, watch } from 'vue'
+import { Close } from '@element-plus/icons-vue'
+
+/** 组件属性：控制弹窗显示/隐藏 */
+const props = defineProps<{ modelValue: boolean }>()
+
+/** 组件事件：更新弹窗状态、保存表单数据 */
+const emit = defineEmits<{
+  (e: 'update:modelValue', val: boolean): void
+  (e: 'save', data: { positions: string[]; industries: string[]; cities: string[]; jobType: string }): void
+}>()
+
+/** 弹窗可见状态 */
+const visible = ref(props.modelValue)
+/** 监听外部传入的 modelValue 同步弹窗状态 */
+watch(() => props.modelValue, (v) => { visible.value = v })
+/** 监听弹窗状态变化并通知父组件 */
+watch(visible, (v) => { emit('update:modelValue', v) })
+
+/** 表单数据 */
+const form = reactive({
+  /** 已选岗位列表 */
+  positions: ['产品经理'] as string[],
+  /** 已选行业列表 */
+  industries: ['互联网'] as string[],
+  /** 已选城市列表 */
+  cities: ['北京'] as string[],
+  /** 工作类型 */
+  jobType: '全职',
+})
+
+/** 新增岗位的绑定值 */
+const newPosition = ref('')
+/** 新增行业的绑定值 */
+const newIndustry = ref('')
+/** 新增城市的绑定值 */
+const newCity = ref('')
+
+/** 岗位选项列表 */
+const positionOptions = ['产品经理', '前端工程师', '后端工程师', 'UI设计师', '数据分析师', '运营', '市场营销']
+/** 行业选项列表 */
+const industryOptions = ['互联网', '金融', '教育', '医疗健康', '电子商务', '人工智能', '游戏', '新能源', '房地产', '制造业']
+/** 城市选项列表 */
+const cityOptions = ['北京', '上海', '广州', '深圳', '杭州', '成都', '南京', '武汉']
+/** 工作类型选项列表 */
+const jobTypes = ['实习', '全职']
+
+/**
+ * 添加岗位
+ * @param val 选中的岗位名称
+ */
+function addPosition(val: string) {
+  if (val && !form.positions.includes(val)) {
+    form.positions.push(val)
+  }
+  newPosition.value = ''
+}
+
+/**
+ * 移除岗位
+ * @param index 要移除的岗位索引
+ */
+function removePosition(index: number) {
+  form.positions.splice(index, 1)
+}
+
+/**
+ * 添加行业
+ * @param val 选中的行业名称
+ */
+function addIndustry(val: string) {
+  if (val && !form.industries.includes(val)) {
+    form.industries.push(val)
+  }
+  newIndustry.value = ''
+}
+
+/**
+ * 移除行业
+ * @param index 要移除的行业索引
+ */
+function removeIndustry(index: number) {
+  form.industries.splice(index, 1)
+}
+
+/**
+ * 添加城市
+ * @param val 选中的城市名称
+ */
+function addCity(val: string) {
+  if (val && !form.cities.includes(val)) {
+    form.cities.push(val)
+  }
+  newCity.value = ''
+}
+
+/**
+ * 移除城市
+ * @param index 要移除的城市索引
+ */
+function removeCity(index: number) {
+  form.cities.splice(index, 1)
+}
+
+/**
+ * 保存表单数据并关闭弹窗
+ */
+function handleSave() {
+  emit('save', {
+    ...form,
+    positions: [...form.positions],
+    industries: [...form.industries],
+    cities: [...form.cities],
+  })
+  visible.value = false
+}
+
+/**
+ * 关闭弹窗
+ */
+function handleClose() {
+  visible.value = false
+}
+</script>