cn-rdms-web/src/views/product/setting/modules/member-operate-dialog.vue

<script setup lang="ts">
import { computed, nextTick, reactive, watch } from 'vue';
import { useForm, useFormRules } from '@/hooks/common/form';
import BusinessFormDialog from '@/components/custom/business-form-dialog.vue';
import BusinessFormSection from '@/components/custom/business-form-section.vue';
import BusinessUserSelect from '@/components/custom/business-user-select.vue';
import { getPreviousManagerRoleOptions, shouldRequireManagerHandover } from '../shared';

defineOptions({ name: 'MemberOperateDialog' });

type OperateMode = 'create' | 'edit';

interface Props {
  mode: OperateMode;
  member: Api.Product.ProductMember | null;
  currentManager: Api.Product.ProductMember | null;
  roleOptions: Api.SystemManage.RoleSimple[];
  userOptions: Api.SystemManage.UserSimple[];
  /** 已是有效成员、需在下拉中禁选并标记"已添加"的 userId 集合 */
  disabledUserIds?: readonly string[];
}

interface SubmitPayload {
  mode: OperateMode;
  memberId?: string;
  managerChanged: boolean;
  payload: Api.Product.CreateProductMemberParams | Api.Product.UpdateProductMemberParams;
}

interface Emits {
  (e: 'submit', payload: SubmitPayload): void;
}

const props = withDefaults(defineProps<Props>(), {
  disabledUserIds: () => []
});
const emit = defineEmits<Emits>();

const visible = defineModel<boolean>('visible', {
  default: false
});

const { formRef, validate } = useForm();
const { createRequiredRule } = useFormRules();

interface Model {
  userId: string;
  roleId: string;
  remark: string;
  reason: string;
  previousManagerRoleId: string;
}

const model = reactive<Model>({
  userId: '',
  roleId: '',
  remark: '',
  reason: '',
  previousManagerRoleId: ''
});

const dialogTitle = computed(() => (props.mode === 'create' ? '新增团队成员' : '调整成员角色'));
const selectedUserId = computed(() => (props.mode === 'create' ? model.userId : props.member?.userId || ''));
const showManagerHandover = computed(() => {
  return (
    shouldRequireManagerHandover(model.roleId, props.currentManager) &&
    Boolean(selectedUserId.value) &&
    selectedUserId.value !== props.currentManager?.userId
  );
});
const previousManagerRoleOptions = computed(() =>
  getPreviousManagerRoleOptions(props.roleOptions, props.currentManager?.roleId || '')
);
const userLabelMap = computed(() => new Map(props.userOptions.map(item => [item.id, item.nickname])));

const rules = computed(
  () =>
    ({
      userId: props.mode === 'create' ? [createRequiredRule('请选择成员用户')] : [],
      roleId: [createRequiredRule('请选择角色')],
      previousManagerRoleId: showManagerHandover.value ? [createRequiredRule('请选择原产品经理交接后角色')] : []
    }) satisfies Record<string, App.Global.FormRule[]>
);

async function handleConfirm() {
  await validate();

  const sharedPayload = {
    roleId: model.roleId,
    remark: model.remark.trim() || null,
    previousManagerUserId: showManagerHandover.value ? props.currentManager?.userId || null : null,
    previousManagerRoleId: showManagerHandover.value ? model.previousManagerRoleId : null
  };

  if (props.mode === 'create') {
    emit('submit', {
      mode: 'create',
      managerChanged: showManagerHandover.value,
      payload: {
        userId: model.userId,
        roleId: sharedPayload.roleId,
        remark: sharedPayload.remark,
        previousManagerUserId: sharedPayload.previousManagerUserId,
        previousManagerRoleId: sharedPayload.previousManagerRoleId
      }
    });
    return;
  }

  emit('submit', {
    mode: 'edit',
    memberId: props.member?.id,
    managerChanged: showManagerHandover.value,
    payload: {
      roleId: sharedPayload.roleId,
      remark: sharedPayload.remark,
      reason: model.reason.trim() || null,
      previousManagerUserId: sharedPayload.previousManagerUserId,
      previousManagerRoleId: sharedPayload.previousManagerRoleId
    }
  });
}

watch(
  () => visible.value,
  async value => {
    if (!value) {
      return;
    }

    model.userId = props.mode === 'create' ? '' : props.member?.userId || '';
    model.roleId = props.mode === 'create' ? '' : props.member?.roleId || '';
    model.remark = props.mode === 'create' ? '' : props.member?.remark || '';
    model.reason = '';
    model.previousManagerRoleId = '';

    await nextTick();
    formRef.value?.clearValidate();
  }
);
</script>

<template>
  <BusinessFormDialog v-model="visible" :title="dialogTitle" preset="sm" @confirm="handleConfirm">
    <ElForm ref="formRef" :model="model" :rules="rules" label-position="top" :validate-on-rule-change="false">
      <BusinessFormSection title="成员信息">
        <ElRow :gutter="16">
          <ElCol :span="24">
            <ElFormItem v-if="mode === 'create'" label="成员用户" prop="userId">
              <BusinessUserSelect
                v-model="model.userId"
                :options="userOptions"
                :disabled-user-ids="props.disabledUserIds"
                disabled-label="已添加"
                placeholder="请选择成员用户"
              />
            </ElFormItem>
            <ElFormItem v-else label="成员用户">
              <ElInput
                :model-value="member?.userNickname || userLabelMap.get(member?.userId || '') || ''"
                readonly
                class="member-operate-dialog__readonly-input"
                placeholder="未获取到成员用户"
              />
            </ElFormItem>
          </ElCol>
          <ElCol :span="24">
            <ElFormItem label="目标角色" prop="roleId">
              <ElSelect v-model="model.roleId" class="w-full" placeholder="请选择角色">
                <ElOption v-for="item in roleOptions" :key="item.id" :label="item.name" :value="item.id" />
              </ElSelect>
            </ElFormItem>
          </ElCol>
          <ElCol :span="24">
            <ElFormItem label="备注">
              <ElInput
                v-model="model.remark"
                type="textarea"
                :rows="3"
                maxlength="500"
                show-word-limit
                placeholder="请输入备注"
              />
            </ElFormItem>
          </ElCol>
        </ElRow>
      </BusinessFormSection>

      <BusinessFormSection v-if="mode === 'edit'" title="角色调整说明">
        <ElFormItem label="变更原因">
          <ElInput
            v-model="model.reason"
            type="textarea"
            :rows="3"
            maxlength="500"
            show-word-limit
            placeholder="请输入变更原因"
          />
        </ElFormItem>
      </BusinessFormSection>

      <BusinessFormSection v-if="showManagerHandover" title="产品经理交接">
        <ElAlert
          :title="`当前产品经理 ${currentManager?.userNickname || currentManager?.userId || ''} 将完成交接，请选择其交接后角色。`"
          type="warning"
          :closable="false"
          class="mb-16px"
        />
        <ElFormItem label="原产品经理交接后角色" prop="previousManagerRoleId">
          <ElSelect v-model="model.previousManagerRoleId" class="w-full" placeholder="请选择原产品经理交接后角色">
            <ElOption v-for="item in previousManagerRoleOptions" :key="item.id" :label="item.name" :value="item.id" />
          </ElSelect>
        </ElFormItem>
      </BusinessFormSection>
    </ElForm>
  </BusinessFormDialog>
</template>

<style scoped>
:deep(.member-operate-dialog__readonly-input .el-input__wrapper) {
  background: linear-gradient(180deg, rgb(241 245 249 / 98%), rgb(226 232 240 / 94%)), rgb(241 245 249);
  box-shadow: 0 0 0 1px rgb(203 213 225 / 96%) inset;
  cursor: default;
}

:deep(.member-operate-dialog__readonly-input .el-input__wrapper:hover),
:deep(.member-operate-dialog__readonly-input.is-focus .el-input__wrapper) {
  box-shadow: 0 0 0 1px rgb(203 213 225 / 96%) inset;
}

:deep(.member-operate-dialog__readonly-input .el-input__inner) {
  color: rgb(51 65 85 / 96%);
  cursor: default;
  -webkit-text-fill-color: rgb(51 65 85 / 96%);
}
</style>