shanxia2.0/web-admin/src/views/crm/customer/TransferDialog.vue

<template>
  <el-dialog
    title="客户转移"
    v-model="dialog.visible"
    width="560px"
    class="dialog-form-layout"
    align-center
    destroy-on-close
    :close-on-click-modal="false"
  >
    <el-alert title="转移说明" type="info" :closable="false" show-icon class="transfer-alert">
      <div>已选择 {{ selectedIds.length }} 位客户，将统一转移给指定的负责人</div>
    </el-alert>

    <el-form ref="formRef" :model="form" :rules="rules" label-position="right" label-width="100px" class="crm-dialog-form">
      <el-form-item label="新负责人" prop="newOwnerUserId">
        <UserSelector v-model="form.newOwnerUserId" placeholder="请选择新负责人" @change="handleOwnerChange" />
      </el-form-item>
      <el-form-item label="转移类型" prop="transferType">
        <el-radio-group v-model="form.transferType">
          <el-radio value="1">转移全部（客户+商机+合同）</el-radio>
          <el-radio value="2">仅转移客户</el-radio>
        </el-radio-group>
        <div class="form-label-tip">
          {{
            form.transferType === '1'
              ? '客户下的所有商机、合同、回款等数据将一并转移'
              : '仅转移客户基本信息，商机、合同等仍归原负责人'
          }}
        </div>
      </el-form-item>
      <el-form-item label="转移原因" prop="remark">
        <el-input
          v-model="form.remark"
          type="textarea"
          :rows="4"
          placeholder="请输入转移原因"
          maxlength="500"
          show-word-limit
        />
      </el-form-item>
    </el-form>

    <el-alert title="温馨提示" type="warning" :closable="false" show-icon class="transfer-tip-alert">
      <ul class="tip-list">
        <li>转移后原负责人将失去对客户的编辑权限</li>
        <li>新负责人将收到通知</li>
        <li>跟进记录和操作日志将保留</li>
        <li>转移记录将被保存到操作日志中</li>
      </ul>
    </el-alert>

    <template #footer>
      <div class="dialog-footer">
        <el-button class="btn-ghost" @click="cancel">
          <el-icon><Close /></el-icon>取消
        </el-button>
        <el-button class="btn-main" type="primary" :loading="submitting" @click="submitForm">
          <el-icon><Position /></el-icon>确认转移
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts" name="CustomerTransferForm">
import { Close, Position } from '@element-plus/icons-vue'
import { fetchTransferCustomer } from '@/api/crm/customer'
import type { CustomerTransferParams } from '@/api/crm/customerTypes'
import UserSelector from '@/components/UserSelector/index.vue'

const emit = defineEmits(['success'])

// 选中的客户ID
const selectedIds = ref<number[]>([])

// 表单数据
const form = ref<CustomerTransferParams>({
  ids: [],
  newOwnerUserId: undefined,
  transferType: '1',
  remark: '',
})

// 表单校验规则
const rules = ref({
  newOwnerUserId: [{ required: true, message: '请选择新负责人', trigger: 'change' }],
  transferType: [{ required: true, message: '请选择转移类型', trigger: 'change' }],
  remark: [{ required: true, message: '转移原因不能为空', trigger: 'blur' }],
})

// 对话框
const dialog = reactive({
  visible: false,
})

// 提交状态
const submitting = ref(false)

const formRef = ref()

/** 打开对话框 */
const open = async (ids: number[]) => {
  reset()
  selectedIds.value = ids
  form.value.ids = ids
  dialog.visible = true
}

/** 负责人变更处理 */
const handleOwnerChange = (userId: number) => {
  console.log('选择的新负责人ID:', userId)
}

/** 提交表单 */
const submitForm = () => {
  formRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      try {
        submitting.value = true
        await fetchTransferCustomer(form.value)
        ElMessage.success('转移成功')
        dialog.visible = false
        emit('success')
      } catch (error) {
        console.error(error)
      } finally {
        submitting.value = false
      }
    }
  })
}

/** 取消按钮 */
const cancel = () => {
  dialog.visible = false
  reset()
}

/** 表单重置 */
const reset = () => {
  selectedIds.value = []
  form.value = {
    ids: [],
    newOwnerUserId: undefined,
    transferType: '1',
    remark: '',
  }
  submitting.value = false
  formRef.value?.resetFields()
}

defineExpose({ open })
</script>

<style scoped lang="scss">
.transfer-alert {
  margin-bottom: 16px;
}

.transfer-tip-alert {
  margin-top: 16px;
}

.tip-list {
  padding-left: 20px;
  margin: 0;
  list-style: disc;
}
</style>