decorate/src/views/member/edit.vue

<template>
  <a-modal
    v-model:visible="visible"
    :title="`${editMember.teamId ? $t('sys.update') : $t('sys.add')} ${$t(
      'material.name'
    )}`"
    width="480px"
    :after-close="onCancel"
    @ok="saveHandler"
  >
    <template #footer>
      <a-button class="action-bottom" size="middle" @click="visible = false">
        {{ $t('sys.cancel') }}
      </a-button>
      <a-button
        class="action-bottom"
        type="primary"
        size="middle"
        @click="saveHandler"
      >
        {{ $t('sys.save') }}
      </a-button>
    </template>

    <a-form
      ref="fromRef"
      :model="editMember"
      class="form"
      label-align="right"
      :label-col="{ span: 5 }"
    >
      <a-form-item
        name="userName"
        :label="$t('material.userNameLabel')"
        :rules="[{ required: true, message: $t('material.ruleUserName') }]"
      >
        <a-input
          v-model:value="editMember.userName"
          :disabled="!!editMember.teamId"
          :placeholder="$t('material.ruleUserName')"
        />
      </a-form-item>
      <a-form-item
        name="nickName"
        :label="$t('material.nickNameLabel')"
        :rules="[
          { required: true, message: $t('material.ruleNickName') },
          { max: 50, message: $t('material.ruleNickName1') }
        ]"
      >
        <a-input
          v-model:value="editMember.nickName"
          :placeholder="$t('material.ruleNickName')"
        />
      </a-form-item>
      <a-form-item
        :label="$t('material.roleLabel')"
        :rules="[{ required: true, message: $t('material.ruleRole') }]"
      >
        <a-select
          v-model:value="currentRole"
          :placeholder="$t('material.ruleRole')"
        >
          <a-select-option
            v-for="role in roleOptions"
            :key="role.roleId"
            :value="role.roleId"
            >{{ role.roleName }}</a-select-option
          >
        </a-select>
      </a-form-item>
      <a-form-item
        name="bindAccount"
        :label="$t('material.bindAccountLabel')"
        :rules="[phoneRule]"
      >
        <a-input
          v-model:value="editMember.bindAccount"
          :placeholder="$t('material.rulebindAccount')"
        />
      </a-form-item>
      <a-form-item
        name="remark"
        :label="$t('material.remarkLabel')"
        :rules="[
          {
            required: false,
            max: 200,
            message: $t('material.ruleRemark1', { max: 200 })
          }
        ]"
      >
        <a-textarea
          v-model:value.trim="editMember.remark"
          :resize="false"
          style="height: 104px; resize: none"
          :placeholder="$t('material.ruleRemark1', { max: 200 })"
        />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script lang="ts" setup>
import { ref, defineProps, toRaw, onMounted, computed } from 'vue'
import { fetchRoleSelects } from '@/api'
import router from '@/router'
import { phoneRule } from '@/views/system/shared'
import { message } from 'ant-design-vue'

import type { Role, SetMemberProps } from '@/api'
import type { FormInstance } from 'ant-design-vue'
import { ui18n } from '@/lang'

export type EditMember = PartialPart<SetMemberProps, 'projectId'>

defineOptions({ name: 'EditMember' })

const props = defineProps<{
  member?: EditMember
  onSave: (data: EditMember) => void
  onCancel: () => void
}>()

const currentRole = ref<number>()
const roleOptions = ref<Pick<Role, 'roleId' | 'roleName'>[]>()
const currentProjectId = computed(() =>
  Number(router.currentRoute.value.params.id)
)
const editMember = ref<EditMember>(
  props.member
    ? { ...props.member }
    : {
        userName: '',
        nickName: '',
        remark: '',
        roles: [],
        bindAccount: ''
      }
)

currentRole.value = editMember.value.roles[0]

const fromRef = ref<FormInstance>()
const visible = ref(true)

const saveHandler = async () => {
  if (!currentRole.value) {
    throw message.error(ui18n.t('material.ruleRole'))
  }
  await fromRef.value?.validate()
  await props.onSave({
    ...toRaw(editMember.value),
    remark: editMember.value.remark || '',
    bindAccount: editMember.value.bindAccount || '',
    roles: currentRole.value ? [currentRole.value] : []
  })
  visible.value = false
}

onMounted(async () => {
  roleOptions.value = await fetchRoleSelects(currentProjectId.value)
  if (!currentRole.value) {
    currentRole.value = roleOptions.value[0].roleId
  }
})

</script>

<style lang="scss" scoped>
.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;

  p {
    margin-bottom: 0;
    color: #646566;
    font-size: 14px;
  }
}
</style>