kd-aiot-frontend-hr-H5/src/pages/manage/transfer-create.vue

<template>
  <view class="page-no-tab">
    <view class="form-intro">
      <ModuleIcon :icon="meta.icon" :color="meta.color" soft />
      <view>
        <text class="intro-title">{{ meta.title }}</text>
        <text class="intro-sub">{{ meta.subtitle }}</text>
      </view>
    </view>

    <view class="steps">
      <view class="step active"><view>1</view><text>填写申请</text></view>
      <view class="step-line"></view>
      <view class="step"><view>2</view><text>主管审批</text></view>
      <view class="step-line"></view>
      <view class="step"><view>3</view><text>完成</text></view>
    </view>

    <view class="form-card card section">
      <view class="field"><text class="label">申请人</text>
        <view class="readonly">
          <view class="avatar small-avatar">{{ currentUser.initials || '—' }}</view>
          <text>{{ currentUser.name }} · {{ currentUser.department }}</text>
        </view>
      </view>
      <view class="divider"></view>
      <view class="field"><text class="label">当前岗位</text>
        <text class="value">{{ currentUser.position || '—' }}</text>
      </view>
      <view class="divider"></view>
      <view class="field press" @click="chooseChangeType"><text class="label required">异动类型</text>
        <text :class="form.changeType ? 'value' : 'placeholder'">{{ changeTypeText }}</text>
        <text class="arrow">›</text>
      </view>
      <view class="divider"></view>
      <view class="field press" @click="chooseTargetDept"><text class="label">目标部门</text>
        <text :class="form.targetDeptName ? 'value' : 'placeholder'">{{ form.targetDeptName || '请选择' }}</text>
        <text class="arrow">›</text>
      </view>
      <view class="divider"></view>
      <view class="field press" @click="chooseTargetPosition"><text class="label required">目标岗位</text>
        <text :class="form.targetPositionName ? 'value' : 'placeholder'">{{ form.targetPositionName || '请选择' }}</text>
        <text class="arrow">›</text>
      </view>
      <template v-if="form.targetLevel">
        <view class="divider"></view>
        <view class="field"><text class="label">目标职级</text><text class="value">{{ form.targetLevel }}</text></view>
      </template>
      <view class="divider"></view>
      <view class="field press"><text class="label required">生效日期</text>
        <picker mode="date" :value="form.effectiveDate" :start="todayIso" @change="onEffectiveDateChange">
          <text :class="form.effectiveDate ? 'value' : 'placeholder'">{{ form.effectiveDate || '请选择' }}</text>
        </picker>
        <text class="arrow">›</text>
      </view>
    </view>

    <view class="section-title"><text>申请说明</text></view>
    <view class="form-card card section">
      <view class="field textarea-field"><text class="label required">调岗事由</text>
        <textarea v-model="form.reason" maxlength="200" placeholder="请说明调岗原因与工作安排" />
        <text class="counter">{{ form.reason.length }} / 200</text>
      </view>
    </view>
    <view class="form-card card section">
      <view class="field textarea-field"><text class="label">备注</text>
        <textarea v-model="form.remark" maxlength="200" placeholder="补充说明（选填）" />
        <text class="counter">{{ form.remark.length }} / 200</text>
      </view>
    </view>

    <view class="footer-tip muted">
      <text>{{ footerTip }}</text>
    </view>

    <view class="bottom-action">
      <view class="draft-btn press" @click="onSaveDraft">保存草稿</view>
      <view class="submit-btn press" @click="onSubmit">提交审批</view>
    </view>
  </view>
</template>

<script setup>
import { computed, reactive, ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import ModuleIcon from '@/components/ModuleIcon.vue'
import { useAuthGuard } from '@/hooks/useAuthGuard'
import { useCurrentUser } from '@/hooks/useCurrentUser'
import { applicationTypes } from '@/data/mock'
import { listOrganizations } from '@/api/organization'
import { pagePosition } from '@/api/position'
import { buildOrganizationTree } from '@/utils/organization-tree'
import { addApplication } from '@/utils/storage'
import { getServerConfig } from '@/utils/auth'
import { back } from '@/utils/router'
import {
  ESS_CHANGE_TYPE_OPTIONS,
  canEditUserChange,
  changeTypeLabel,
  loadTransferDetail,
  submitTransferApplication,
} from '@/api/userChange'

useAuthGuard()
const currentUser = useCurrentUser()
const meta = computed(() => applicationTypes.transfer || { title: '调岗申请', subtitle: '', icon: '岗', color: '#9270ca' })

const today = new Date()
const todayIso = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`

const form = reactive({
  id: null,
  userId: null,
  name: '',
  employeeNo: '',
  dept: '',
  position: '',
  level: '',
  changeType: 'POSITION_TRANSFER',
  targetDeptId: null,
  targetDeptName: '',
  targetPositionId: null,
  targetPositionName: '',
  targetLevel: '',
  effectiveDate: '',
  reason: '',
  remark: '',
})

const submitting = ref(false)
const deptOptions = ref([])
const positionOptions = ref([])
const positionLoading = ref(false)

const changeTypeText = computed(() => (form.changeType ? changeTypeLabel(form.changeType) : '请选择'))

const summaryText = computed(() => {
  const parts = [changeTypeLabel(form.changeType)]
  if (form.targetDeptName) parts.push(form.targetDeptName)
  if (form.targetPositionName) parts.push(form.targetPositionName)
  if (form.effectiveDate) parts.push(`生效 ${form.effectiveDate}`)
  return parts.join(' · ')
})

const footerTip = computed(() =>
  getServerConfig().mode === 'server'
    ? '提交后由 BPM 流程驱动审批，可在「调岗申请」中查看审批状态。'
    : '演示模式：申请保存在本机，提交后可在「调岗申请」与「我的申请」中查看进度。',
)

// 法人节点只作为路径前缀，不作为可选的调动目标
const LEGAL_TYPES = new Set(['10', '20', 'group', 'company'])

function flattenDepartments(nodes = []) {
  const result = []
  const walk = (items, parentPath) => {
    items.forEach((node) => {
      const path = parentPath ? `${parentPath} / ${node.name}` : node.name
      if (!LEGAL_TYPES.has(String(node.type))) result.push({ id: node.id, name: node.name, path })
      walk(node.children || [], path)
    })
  }
  walk(nodes, '')
  return result
}

async function loadDepartments() {
  try {
    const list = await listOrganizations()
    deptOptions.value = flattenDepartments(buildOrganizationTree(list))
  } catch (error) {
    deptOptions.value = []
  }
}

async function loadPositions() {
  positionLoading.value = true
  try {
    const data = await pagePosition({ pageNum: 1, size: 50 })
    positionOptions.value = (data?.list || []).map((p) => ({
      id: p.id,
      name: p.positionName,
      deptId: p.deptId,
      deptName: p.deptName,
      level: p.positionLevel || '',
    }))
  } catch (error) {
    positionOptions.value = []
  } finally {
    positionLoading.value = false
  }
}

function syncOrigin() {
  const user = currentUser || {}
  form.userId = form.userId || user.id || null
  form.name = form.name || user.name || ''
  form.employeeNo = form.employeeNo || user.id || ''
  form.dept = form.dept || user.department || ''
  form.position = form.position || user.position || ''
  form.level = form.level || user.level || ''
}

function chooseChangeType() {
  uni.showActionSheet({
    itemList: ESS_CHANGE_TYPE_OPTIONS.map((item) => item.label),
    success: (r) => {
      const picked = ESS_CHANGE_TYPE_OPTIONS[r.tapIndex]
      if (picked) form.changeType = picked.value
    },
  })
}

function chooseTargetDept() {
  if (!deptOptions.value.length) {
    uni.showToast({ title: '部门数据加载中，请稍后重试', icon: 'none' })
    loadDepartments()
    return
  }
  uni.showActionSheet({
    itemList: deptOptions.value.map((item) => item.path),
    success: (r) => {
      const dept = deptOptions.value[r.tapIndex]
      if (!dept) return
      form.targetDeptId = dept.id
      form.targetDeptName = dept.name
    },
  })
}

async function chooseTargetPosition() {
  if (positionLoading.value) return
  if (!positionOptions.value.length) {
    await loadPositions()
  }
  if (!positionOptions.value.length) {
    uni.showToast({ title: '暂无岗位数据', icon: 'none' })
    return
  }
  uni.showActionSheet({
    itemList: positionOptions.value.map((item) => (item.deptName ? `${item.name}（${item.deptName}）` : item.name)),
    success: (r) => {
      const position = positionOptions.value[r.tapIndex]
      if (!position) return
      form.targetPositionId = position.id
      form.targetPositionName = position.name
      // 目标岗位自带岗位层级时同步展示；与当前职级一致则不产生 GRADE 变动
      form.targetLevel = position.level || ''
      // 岗位归属部门即调动目标部门，避免部门与岗位不一致
      if (position.deptId != null && position.deptName) {
        form.targetDeptId = position.deptId
        form.targetDeptName = position.deptName
      }
    },
  })
}

function onEffectiveDateChange(e) {
  form.effectiveDate = e.detail.value
}

function validate() {
  if (!form.changeType) return '请选择异动类型'
  if (['DEPARTMENT_TRANSFER', 'COMPOSITE_CHANGE'].includes(form.changeType) && !form.targetDeptName) return '请选择目标部门'
  if (!form.targetPositionName) return '请选择目标岗位'
  if (!form.effectiveDate) return '请选择生效日期'
  if (!String(form.reason || '').trim()) return '请填写调岗事由'
  return null
}

async function save(submit) {
  const error = validate()
  if (error) {
    uni.showToast({ title: error, icon: 'none' })
    return
  }
  if (submitting.value) return
  submitting.value = true
  uni.showLoading({ title: submit ? '提交中...' : '保存中...' })
  try {
    syncOrigin()
    const id = await submitTransferApplication({
      form: { ...form, name: form.name || currentUser.name },
      submit,
      existingId: form.id,
    })
    form.id = id
    if (submit) {
      addApplication({
        type: meta.value.title,
        summary: summaryText.value,
        reason: form.reason,
        color: meta.value.color,
        metadata: {
          changeId: id,
          changeType: form.changeType,
          targetPositionName: form.targetPositionName,
          effectiveDate: form.effectiveDate,
          source: getServerConfig().mode === 'server' ? 'server' : 'demo',
        },
      })
    }
    uni.hideLoading()
    uni.showModal({
      title: submit ? '提交成功' : '已保存草稿',
      content: submit
        ? '调岗申请已提交审批，可在「调岗申请」或「我的申请」中查看进度。'
        : '草稿已保存，可在「调岗申请」列表中继续提交或编辑。',
      showCancel: false,
      success: () => uni.redirectTo({ url: '/pages/manage/transfer-list' }),
    })
  } catch (e) {
    uni.hideLoading()
    uni.showToast({ title: e.message || '操作失败', icon: 'none' })
  } finally {
    submitting.value = false
  }
}

function onSaveDraft() {
  save(false)
}

function onSubmit() {
  save(true)
}

async function hydrateForm(id) {
  uni.showLoading({ title: '加载中...' })
  try {
    const row = await loadTransferDetail(id)
    if (!row) throw new Error('未找到该调岗单')
    if (!canEditUserChange(row)) throw new Error('当前状态不可编辑')
    Object.assign(form, {
      id: row.id,
      userId: row.userId,
      name: row.name,
      employeeNo: row.employeeNo,
      dept: row.dept,
      position: row.position,
      level: row.level,
      changeType: row.changeType || 'POSITION_TRANSFER',
      targetDeptId: row.targetDeptId ?? null,
      targetDeptName: row.targetDept,
      targetPositionId: row.targetPositionId ?? null,
      targetPositionName: row.targetPosition,
      targetLevel: row.targetLevel,
      effectiveDate: row.effectiveDate,
      reason: row.reason,
      remark: row.remark,
    })
  } catch (e) {
    uni.hideLoading()
    uni.showToast({ title: e.message || '加载失败', icon: 'none' })
    setTimeout(() => back('/pages/manage/transfer-list'), 900)
    return
  }
  uni.hideLoading()
}

onLoad((options) => {
  uni.setNavigationBarTitle({ title: '调岗申请' })
  loadDepartments()
  loadPositions()
  const id = options?.id || ''
  if (id) {
    hydrateForm(id)
    return
  }
  syncOrigin()
})
</script>

<style scoped lang="scss">
.page-no-tab {
  padding-bottom: 150rpx;
}
.form-intro {
  padding: 30rpx 30rpx 22rpx;
  display: flex;
  align-items: center;
  background: #fff;
}
.form-intro > view:last-child {
  margin-left: 22rpx;
}
.intro-title {
  display: block;
  font-size: 32rpx;
  font-weight: 600;
}
.intro-sub {
  display: block;
  margin-top: 9rpx;
  color: #8b939f;
  font-size: 23rpx;
}
.steps {
  height: 128rpx;
  padding: 18rpx 70rpx 12rpx;
  display: flex;
  align-items: flex-start;
  background: #fff;
  border-top: 1rpx solid #f2f3f5;
}
.step {
  width: 92rpx;
  text-align: center;
  color: #a0a7b0;
  font-size: 20rpx;
}
.step > view {
  width: 42rpx;
  height: 42rpx;
  margin: 0 auto 8rpx;
  border-radius: 50%;
  background: #e8eaed;
  color: #8b939f;
  line-height: 42rpx;
}
.step.active {
  color: #1677ff;
}
.step.active > view {
  background: #1677ff;
  color: #fff;
}
.step-line {
  flex: 1;
  height: 2rpx;
  margin-top: 20rpx;
  background: #e1e4e8;
}
.form-card {
  overflow: hidden;
}
.field {
  position: relative;
  min-height: 108rpx;
  padding: 28rpx;
  display: flex;
  align-items: center;
}
.label {
  width: 180rpx;
  flex-shrink: 0;
  font-size: 28rpx;
}
.required::before {
  content: '*';
  color: #ee4d4d;
  margin-right: 6rpx;
}
.readonly {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 26rpx;
}
.small-avatar {
  width: 52rpx;
  height: 52rpx;
  margin-right: 14rpx;
  font-size: 22rpx;
}
.value {
  color: #1f2329;
  font-size: 27rpx;
}
.placeholder {
  color: #b2b7be;
  font-size: 27rpx;
}
.arrow {
  margin-left: 13rpx;
  color: #c4c8ce;
  font-size: 38rpx;
}
.textarea-field {
  display: block;
  min-height: 240rpx;
}
.textarea-field .label {
  display: block;
  width: auto;
  margin-bottom: 20rpx;
}
.textarea-field textarea {
  width: 100%;
  height: 130rpx;
  padding: 18rpx;
  border-radius: 12rpx;
  background: #f6f7f8;
  font-size: 27rpx;
}
.counter {
  position: absolute;
  right: 45rpx;
  bottom: 38rpx;
  color: #b2b7be;
  font-size: 21rpx;
}
.footer-tip {
  padding: 8rpx 34rpx 0;
  font-size: 22rpx;
  line-height: 34rpx;
}
.bottom-action {
  position: fixed;
  z-index: 10;
  left: 0;
  right: 0;
  bottom: 0;
  height: 120rpx;
  padding: 16rpx 24rpx;
  display: flex;
  gap: 18rpx;
  background: #fff;
  border-top: 1rpx solid #e8e9eb;
}
.draft-btn,
.submit-btn {
  height: 84rpx;
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30rpx;
}
.draft-btn {
  width: 210rpx;
  border: 1rpx solid #d7dce2;
  color: #4b5563;
}
.submit-btn {
  flex: 1;
  background: #1677ff;
  color: #fff;
}
@media (min-width: 800px) {
  .bottom-action {
    max-width: 520px;
    left: 50%;
    transform: translateX(-50%);
  }
}
</style>