Situation-Awareness-Platform-Frontend/src/views/Jyh/PersonalCenter/OrganizationManage/OrganizationManage.vue

<template>
  <div class="mt-3">
    <div v-if="hasOrganization">
      <d-card class="mb-[16px] bg-white" shadow="never">
        <div class="text-[14px] w-full flex items-center justify-between">
          <div class="font-bold mb-[16px]">基础信息</div>
          <div>
            <d-icon v-if="!isEdit" class="font-normal" name="edit" operable @click="editIconClick">
              <template #suffix>
                <span>编辑</span>
              </template>
            </d-icon>
          </div>
        </div>
        <d-form ref="baseInfoFormRef" :data="createFormData" message-type="none">
          <d-form-item field="organizationName" label="组织名称">
            <d-input v-if="isEdit" v-model="createFormData.organizationName" />
            <div v-else>{{ organizationInfo.organizationName }}</div>
          </d-form-item>
          <d-form-item field="organizationProfile" label="组织简介">
            <d-textarea v-if="isEdit" v-model="createFormData.organizationProfile" show-count maxlength="200" />
            <div v-else>{{ organizationInfo.organizationProfile }}</div>
          </d-form-item>
        </d-form>
        <div v-if="isEdit">
          <d-button variant="solid" class="mr-[8px]" @click="editOrganizationConfirm">完成</d-button>
          <d-button @click="editOrganizationCancel">取消</d-button>
        </div>
      </d-card>

      <d-card class="mb-[16px] bg-white" shadow="never">
        <div class="font-bold text-[14px] mb-[12px]">成员管理</div>
        <div class="flex mb-[12px]">
          <d-button icon="add" variant="solid" class="mr-[8px]" @click="openInviteMemberModal">邀请成员</d-button>
          <d-search icon-position="left" class="w-[296px]" placeholder="请输入搜索内容" />
        </div>
        <d-table
          v-if="memberTableData.length"
          :data="memberTableData"
          class="w-full mb-[20px]"
          fix-header
          header-bg
          max-height="500px"
        >
          <d-column field="userName" header="成员名" />
          <d-column field="role" header="角色">
            <template #default="{ row }">
              {{ memberRoleMap[row.role] ?? '' }}
            </template>
          </d-column>
          <d-column field="email" header="邮箱" />
          <d-column field="joinDate" header="加入时间" />
          <d-column header="操作">
            <template #default="{ row }">
              <d-button variant="text" color="primary" @click="openDeleteModal(row)">删除</d-button>
            </template>
          </d-column>
        </d-table>
        <NoData v-else />
        <d-pagination
          class="flex justify-end"
          :total="pager.total"
          v-model:pageSize="pager.pageSize"
          v-model:pageIndex="pager.pageIndex"
          :can-view-total="true"
          :can-change-page-size="true"
          :max-items="5"
        />
      </d-card>
    </div>

    <div v-else>
      <NoData :small="false">
        <div class="font-bold mb-[20px]">很抱歉，当前无任何组织，赶快去</div>
        <d-button size="lg" variant="solid" @click="openCreateOrganizationModal">新建组织</d-button>
      </NoData>
    </div>
  </div>

  <d-modal v-model="createOrganizationModalCtrl" title="新建组织" class="w-[600px]">
    <d-form ref="createFormRef" layout="vertical" :data="createFormData" message-type="none">
      <d-form-item field="organizationName" label="组织名称" required>
        <d-input v-model="createFormData.organizationName" />
      </d-form-item>
      <d-form-item field="organizationProfile" label="组织简介" required>
        <d-textarea v-model="createFormData.organizationProfile" show-count maxlength="200" />
      </d-form-item>
    </d-form>

    <div class="flex justify-center">
      <d-button variant="solid" class="mr-[8px]" @click="confirmCreateOrganizationBtnClick">确定</d-button>
      <d-button @click="closeOrganizationModal">取消</d-button>
    </div>
  </d-modal>

  <d-modal v-model="inviteMemberModalCtrl" title="邀请成员" class="w-[600px]">
    <d-form ref="inviteMemberFormRef" layout="vertical" :data="inviteMemberFormData" message-type="none">
      <d-form-item field="userName" label="成员" required>
        <d-input v-model="inviteMemberFormData.userName" placeholder="请输入" />
      </d-form-item>
      <d-form-item field="role" label="角色" required>
        <d-select v-model="inviteMemberFormData.role">
          <d-option v-for="item of inviteMemberSelectOptions" :key="item.value" :value="item.value" :name="item.name" />
        </d-select>
      </d-form-item>
    </d-form>

    <div class="flex justify-center">
      <d-button variant="solid" class="mr-[8px]" @click="inviteMemberConfirmBtnClick">确定</d-button>
      <d-button @click="closeInviteMemberModal">取消</d-button>
    </div>
  </d-modal>

  <d-modal v-model="deleteMemberModalCtrl" title="删除成员" class="w-[600px]">
    <div>即将删除成员‘{{ deleteRow.userName }}’，请确认是否继续？</div>
    <div class="flex justify-center">
      <d-button variant="solid" class="mr-[8px]" @click="deleteMember">确定</d-button>
      <d-button @click="closeDeleteMemberModal">取消</d-button>
    </div>
  </d-modal>
</template>

<script setup lang="ts">
import { reactive, ref, shallowRef } from 'vue';
import NoData from '@/components/NoData/NoData.vue';
import {
  createOrganizationApi,
  deleteOrganizationMemberApi,
  getOrganizationInfoApi,
  getOrganizationMemberListApi,
  inviteOrganizationMemberApi,
  updateOrganizationInfoApi
} from '@/api/organizationManage/organizationManageApi';
import {
  type OrganizationInfoType,
  type OrganizationMemberItemType
} from '@/api/organizationManage/organizationManageType';
import table from '@/components/AIRepair/Table.vue';

const searchOrganizationLoading = ref(false);
const hasOrganization = ref(false);
const organizationInfo = shallowRef<OrganizationInfoType>({
  organizationName: '',
  organizationProfile: ''
});

const createOrganizationModalCtrl = ref(false);
const createFormData = reactive({
  organizationName: '',
  organizationProfile: '' // 组织简介
});
const createFormRef = ref();
const createOrganizationLoading = ref(false);

const isEdit = ref(false);
const editLoading = ref(false);

const memberListSearchLoading = ref(false);
const memberListSearchParam = ref('');
const memberTableData = shallowRef<OrganizationMemberItemType[]>([]);
const pager = reactive({
  pageSize: 10,
  pageIndex: 1,
  total: 0
});

const deleteRow = shallowRef<OrganizationMemberItemType>(null);
const deleteMemberModalCtrl = ref(false);
const deleteMemberLoading = ref(false);

const inviteMemberFormRef = ref();
const inviteMemberModalCtrl = ref(false);
const inviteMemberLoading = ref(false);
const inviteMemberFormData = reactive({
  userName: '',
  role: ''
});
const inviteMemberSelectOptions = [
  { name: '创建者', value: 'creator' },
  { name: '成员', value: 'member' }
];
const memberRoleMap = {
  creator: '创建者',
  member: '成员'
};

const mockTableData = [
  { userName: '张三', role: 'member', email: '111@gmail.com', joinDate: '2090-02-30', id: '1' },
  { userName: '李四', role: 'creator', email: '111@gmail.com', joinDate: '2090-02-30', id: '2' },
  { userName: '王五', role: 'member', email: '111@gmail.com', joinDate: '2090-02-30', id: '3' },
  { userName: '赵六', role: 'member', email: '111@gmail.com', joinDate: '2090-02-30', id: '4' },
  { userName: '秦七', role: 'member', email: '111@gmail.com', joinDate: '2090-02-30', id: '5' }
];

// -------------------- 获取组织信息 --------------------
async function getOrganizationInfo() {
  const params = {
    organizationName: createFormData.organizationName,
    organizationProfile: createFormData.organizationProfile
  };
  searchOrganizationLoading.value = true;
  try {
    const res = await getOrganizationInfoApi(params);
  } catch (e) {}
  searchOrganizationLoading.value = false;
  getMemberList();
  // TODO 待接口定义好后删除下面两行固定赋值语句
  hasOrganization.value = true;
  organizationInfo.value = {
    organizationName: createFormData.organizationName,
    organizationProfile: createFormData.organizationProfile
  };
}

// -------------------- 获取成员信息 --------------------
async function getOrganizationMember(organizationId: string) {
  const params = {};
}

// -------------------- 创建组织 --------------------
function confirmCreateOrganizationBtnClick() {
  createFormRef.value.validate((isValid: boolean) => {
    if (isValid) {
      createOrganization();
    }
  });
}

async function createOrganization() {
  const params = {
    organizationName: createFormData.organizationName,
    organizationProfile: createFormData.organizationProfile
  };
  createOrganizationLoading.value = true;
  try {
    const res = await createOrganizationApi(params);
  } catch (e) {}
  closeOrganizationModal();
  // TODO 待接口定义好后删除下面调用逻辑
  getOrganizationInfo();
  createOrganizationLoading.value = false;
}

function openCreateOrganizationModal() {
  createOrganizationModalCtrl.value = true;
}

function closeOrganizationModal() {
  createOrganizationModalCtrl.value = false;
}

// -------------------- 编辑组织信息 --------------------
function editIconClick() {
  isEdit.value = true;
}

async function editOrganizationConfirm() {
  editLoading.value = true;
  const params = {
    organizationName: createFormData.organizationName,
    organizationProfile: createFormData.organizationProfile
  };
  try {
    const res = await updateOrganizationInfoApi(params);
  } catch (e) {}
  editLoading.value = false;
  isEdit.value = false;
  // TODO 待接口定义好后删除下面两行固定赋值语句
  hasOrganization.value = true;
  organizationInfo.value = {
    organizationName: createFormData.organizationName,
    organizationProfile: createFormData.organizationProfile
  };
}

function editOrganizationCancel() {
  isEdit.value = false;
  createFormData.organizationName = organizationInfo.value.organizationName;
  createFormData.organizationProfile = organizationInfo.value.organizationProfile;
}

// -------------------- 邀请、查询成员 --------------------
async function getMemberList() {
  const params = {
    organizationName: createFormData.organizationName,
    pageIndex: pager.pageIndex,
    pageSize: pager.pageSize,
    searchParam: memberListSearchParam.value
  };
  memberListSearchLoading.value = true;
  try {
    const res = await getOrganizationMemberListApi(params);
  } catch (e) {}
  memberTableData.value = mockTableData;
  pager.total = 6;
  memberListSearchLoading.value = false;
}

function openInviteMemberModal() {
  inviteMemberModalCtrl.value = true;
}

function openDeleteModal(row: any) {
  deleteRow.value = row;
  deleteMemberModalCtrl.value = true;
}

function inviteMemberConfirmBtnClick() {
  inviteMemberFormRef.value.validate((isValid: boolean) => {
    if (isValid) {
      console.log('aaaaaaaa');
      inviteMember();
    }
  });
}

async function inviteMember() {
  const params = {
    userName: inviteMemberFormData.userName,
    role: inviteMemberFormData.role
  };
  inviteMemberLoading.value = true;
  try {
    const res = await inviteOrganizationMemberApi(params);
  } catch (e) {}
  inviteMemberLoading.value = false;
  closeInviteMemberModal();
  // TODO 待接口定义好后删除下面调用逻辑
  mockTableData.unshift({
    userName: inviteMemberFormData.userName,
    role: inviteMemberFormData.role,
    joinDate: new Date().toDateString(),
    id: String(pager.total++),
    email: `${inviteMemberFormData.userName}@gmail.com`
  });
  memberTableData.value = [...mockTableData];
}

function closeInviteMemberModal() {
  inviteMemberModalCtrl.value = false;
}

async function deleteMember() {
  const params = {
    id: deleteRow.value.id
  };
  deleteMemberLoading.value = true;
  try {
    const res = await deleteOrganizationMemberApi(params);
  } catch (e) {}
  deleteMemberLoading.value = false;
  closeDeleteMemberModal();
  // TODO 待接口定义好后删除下面调用逻辑
  const index = mockTableData.findIndex((item) => item.id === deleteRow.value.id);
  mockTableData.splice(index, 1);
  memberTableData.value = [...mockTableData];
  pager.total--;
}

function closeDeleteMemberModal() {
  deleteMemberModalCtrl.value = false;
}
</script>

<style scoped lang="scss">
:deep(.devui-table__row td) {
  padding: 10px 16px;
}
</style>