职位基本信息表单

src/components/FormUI/radioGroup/index.vue

@@ -17,6 +17,7 @@
       :key="`${item.key}_radio_${radio.label}`"
       :readonly="radio.readonly"
       :label="radio.label"
+      class="mr-3"
       :value="radio.value"
       :color="item.color || 'primary'"
     ></v-radio>
@@ -43,4 +44,7 @@ const modelValueUpDate = (val) => {
 :deep(.v-selection-control-group) {
   margin-top: 0 !important;
 }
+:deep(.v-label) {
+  margin-left: 0 !important;
+}
 </style>

src/components/FormUI/textArea/index.vue

@@ -14,6 +14,8 @@
       :density="item.dense || 'compact'"
       :placeholder="item.placeholder || item.label"
       :no-resize="!item.resize"
+      :clearable="item.clearable || false"
+      clear-icon="mdi-close-circle"
       @update:modelValue="modelValueUpDate"
     ></v-textarea>
   </div>

src/layout/enterprise.vue

@@ -1,9 +1,9 @@
 <template>
-  <div class="parent">
+  <div class="parent d-flex flex-column">
     <Headers class="headers"></Headers>
-    <div class="content">
-      <side></side>
-      <div class="pa-3" style="flex: 1;">
+    <div class="content d-flex">
+      <side class="content-sticky"></side>
+      <div class="pa-3 content-box">
         <router-view></router-view>
       </div>
     </div>
@@ -19,15 +19,12 @@ defineOptions({ name: 'enterprise-layout-index' })
 </script>
 
 <style lang="scss" scoped>
+$top: 50px;
 .parent {
   background-color: var(--default-bgc);
-  position: relative;
 }
 .headers {
-  position: fixed;
-  right: 0;
-  right: 0;
-  left: 0;
+  position: sticky;
   top: 0;
   z-index: 999;
 }
@@ -39,8 +36,14 @@ defineOptions({ name: 'enterprise-layout-index' })
   z-index: 999;
 }
 .content {
-  display: flex;
-  margin-top: 50px;
-  height: calc(100vh - 48px);
+  height: 0;
+  flex: 1;
+
+  &-sticky {
+    position: sticky;
+    top: $top;
+    height: calc(100vh - $top);
+  }
 }
+
 </style>

src/views/enterprise/positionManagement/components/add.vue

@@ -1,13 +1,57 @@
 <template>
   <div>
-    <v-card class="card-box pa-5">职位新增</v-card>
+    <v-card class="pa-5">
+      <v-timeline class="card-box" align="start" side="end">
+        <v-timeline-item
+          v-for="(val, i) in list"
+          :key="i"
+          :dot-color="val.color"
+          :icon="val.icon"
+          style="width: 100%;"
+        >
+          <div style="width: 100%;">
+            <h2 class="mt-n1 headline font-weight-regular">{{ val.title }}</h2>
+            <div class="mb-4 desc">{{ val.desc }}</div>
+            <component class="mt-10" :is="val.path"></component>
+          </div>
+        </v-timeline-item>
+      </v-timeline>
+      <div class="text-center">
+        <v-btn class="buttons" color="primary">发 布</v-btn>
+      </div>
+    </v-card>
   </div>
 </template>
 
 <script setup>
 defineOptions({ name: 'enterprise-position-add'})
+import baseInfo from './baseInfo.vue'
+import jobRequirements from './jobRequirements.vue'
+
+const list = [
+  {
+    color: '#00897B',
+    icon: 'mdi-numeric-1',
+    title: '职位基本信息',
+    desc: '职位发布成功后，招聘类型、职位名称、职位类型、工作城市，将无法修改',
+    path: baseInfo
+  },
+  {
+    color: 'indigo-lighten-2',
+    icon: 'mdi-numeric-2',
+    title: '职位要求',
+    desc: '我们将通过以下条件，为您精确推荐合适的人才，请尽量详细填写',
+    path: jobRequirements
+  }
+]
 </script>
 
 <style scoped lang="scss">
-
+.card-box {
+  width: 70%;
+}
+.desc {
+  font-size: 13px;
+  color: #777;
+}
 </style>

src/views/enterprise/positionManagement/components/baseInfo.vue

@@ -0,0 +1,132 @@
+<template>
+  <div>
+    <CtForm ref="formPageRef" :items="items" style="width: 100%;">
+      <template #enterpriseName="{ item }">
+        <div class="mb-4">
+          <span style="color: #777;">公司：</span>
+          <span style="color: #555">{{ item.value }}</span>
+        </div>
+      </template>
+      <template #positionId="{ item }">
+          <v-menu :close-delay="1" :open-delay="0" v-bind="$attrs">
+            <template v-slot:activator="{  props }">
+              <textUI
+                :modelValue="item.value"
+                :item="item"
+                v-bind="props"
+                style="position: relative;"
+              ></textUI>
+            </template>
+            <jobTypeCard class="jobTypeCardBox" :select="[query.positionId].filter(Boolean)" :isSingle="true" @handleJobClick="handleJobClickItem"></jobTypeCard>
+          </v-menu>
+        </template>
+    </CtForm>
+  </div>
+</template>
+
+<script setup>
+defineOptions({ name: 'position-add-baseInfo'})
+import CtForm from '@/components/CtForm'
+import { reactive, ref } from 'vue'
+import textUI from '@/components/FormUI/TextInput'
+import jobTypeCard from '@/components/jobTypeCard'
+
+const formPageRef = ref()
+const query = reactive({})
+const items = ref({
+  options: [
+    {
+      type: 'text',
+      key: 'enterpriseName',
+      disabled: true,
+      value: '辞图科技·计算机软件·广州辞图科技有限公司',
+      label: '公司名称 *'
+    },
+    {
+      type: 'ifRadio',
+      key: 'jobType',
+      value: '0',
+      label: '招聘类型 *',
+      dictTypeName: '',
+      items: [
+        {label: '社招全职', value: '0'},
+        {label: '应届校园招聘', value: '1'},
+        {label: '实习生招聘', value: '2'},
+        {label: '兼职招聘', value: '3'}
+      ],
+    },
+    {
+      type: 'ifRadio',
+      key: 'externallyStationed',
+      value: '2',
+      label: '是否外驻 *',
+      dictTypeName: '',
+      items: [
+        {label: '驻外岗位', value: '0'},
+        {label: '境外出差岗位', value: '1'},
+        {label: '非驻外/非境外出差岗位', value: '2'}
+      ],
+    },
+    {
+      type: 'text',
+      key: 'name',
+      value: '',
+      label: '职位名称 *',
+      rules: [v => !!v || '请选择职位名称']
+    },
+    {
+      slotName: 'positionId',
+      key: 'positionId',
+      value: '',
+      label: '职位类型 *',
+      rules: [v => !!v || '请选择职位类型']
+    },
+    {
+      type: 'textarea',
+      key: 'content',
+      rows: 10,
+      value: '',
+      label: '职位描述 *',
+      counter: 5000,
+      clearable: true,
+      rules: [
+        value => {
+          if (value) return true
+          return '请输入职位描述'
+        },
+        value => {
+          if (value?.length <= 5000) return true
+          return '请输入2-5000个字符'
+        }
+      ]
+    }
+  ]
+})
+
+const setValue = (key, value) => {
+  items.value.options.find(e => e.key === key).value = value
+}
+
+// 期望职位
+const handleJobClickItem = (list, name) => {
+  if (!list.length) return
+  query.positionId = list[0]
+  setValue('positionId', name)
+}
+
+defineExpose({
+  formPageRef,
+  query
+})
+</script>
+
+<style scoped lang="scss">
+.enterpriseName {
+  color: #777;
+}
+.jobTypeCardBox {
+  position: absolute;
+  top: -22px;
+  left: 0;
+}
+</style>

src/views/enterprise/positionManagement/components/jobRequirements.vue

@@ -0,0 +1,45 @@
+<template>
+  <div style="width: 100%;">
+    <CtForm ref="formPageRef" :items="items" style="width: 100%;"></CtForm>
+  </div>
+</template>
+
+<script setup>
+defineOptions({ name: 'position-add-job-requirements'})
+import CtForm from '@/components/CtForm'
+import { reactive, ref } from 'vue'
+
+const formPageRef = ref()
+const query = reactive({})
+console.log(query, 'qqq')
+const items = ref({
+  options: [
+    {
+      type: 'autocomplete',
+      key: 'eduType',
+      value: null,
+      label: '最高学历 *',
+      itemText: 'label',
+      itemValue: 'value',
+      dictTypeName: 'menduner_education_type',
+      rules: [v => !!v || '请选择最高学历'],
+      items: []
+    },
+    {
+      type: 'autocomplete',
+      key: 'expType',
+      value: null,
+      label: '工作经验 *',
+      itemText: 'label',
+      itemValue: 'value',
+      dictTypeName: 'menduner_exp_type',
+      rules: [v => !!v || '请选择工作经验'],
+      items: []
+    }
+  ]
+})
+</script>
+
+<style scoped lang="scss">
+
+</style>