web/src/views/settings/member.vue

<template>
  <div class="container-wrapper">
    <div class="title">
      <div class="title-search">
        <el-form
            :model="search"
            label-width="auto"
            :inline="true"
            class="demo-form-inline"
        >
          <el-form-item>
            <el-input v-model="search.name" placeholder="请输入姓名" style="width: 200px"></el-input>
          </el-form-item>
          <el-form-item>
            <el-select v-model="search.sectionId" placeholder="请选择" style="width: 200px">
              <el-option
                  v-for="item in roleList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div class="title-btn">
        <span class="default-btn" @click="resetSearch">
          <span class="iconfont icon-RectangleCopy1"></span>
          重置
        </span>
        <span class="default-btn" @click="init()"><span class="iconfont icon-RectangleCopy"></span>查询</span>
        <span class="default-btn" @click="openDialog(null)">
          <span class="iconfont icon-jia"></span>
          新增
        </span>
      </div>
    </div>
    <div class="table">
      <el-table :data="tableData" style="width: 100%;height: 100%" @row-click="rowClick">
        <el-table-column prop="date" label="日期" width="180" show-overflow-tooltip>
          <template #default="scope">
            {{ formatDate(scope.row.memberInfo.createDatetime) }}
          </template>
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="180" show-overflow-tooltip>
          <template #default="scope">
            {{ scope.row.memberInfo.name }}
          </template>
        </el-table-column>
        <el-table-column prop="role" label="角色" width="180" show-overflow-tooltip>
          <template #default="scope">
            {{ roleList.find((item: any) => item.value === scope.row.memberInfo.role)?.label || '-' }}
          </template>
        </el-table-column>
        <el-table-column prop="sectionNames" label="科室" show-overflow-tooltip>
          <template #default="scope">
            {{ scope.row.memberInfo.sectionNames }}
          </template>
        </el-table-column>
        <el-table-column prop="memo" label="备注" show-overflow-tooltip>
          <template #default="scope">
            {{ scope.row.memberInfo.memo }}
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="bottom">
      <div class="page_btn_list">
        <el-pagination
            background
            layout="prev, pager, next"
            :page-size="pageSize"
            :current-page="page"
            :total="total"
            @current-change="changePage"
        />
      </div>
    </div>
    <MemberEdit ref="memberEditRef" @close="init()"></MemberEdit>
  </div>
</template>
<script setup lang="ts">
import {onMounted, ref, nextTick} from "vue"
import MemberEdit from "@/components/settings/MemberEdit.vue";
import {post} from "@/utils/request.ts";
import {formatDate} from "@/utils/dateUtils.ts";
import {apiConfig} from "@/assets/config/apiConfig.ts";

const isShow = ref(false)
const tableData = ref<any>([]);
const memberEditRef = ref<any>(null)
const rowClick = (row: any) => {
  openDialog(row.memberInfo.id)
}
const openDialog = (id: any) => {
  nextTick(() => {
    memberEditRef.value?.init(id)
  })
}
const roleList = [
  {
    value: 1,
    label: '医生',
  },
  {
    value: 2,
    label: '护士',
  },
  {
    value: 3,
    label: '检验技师',
  },
  {
    value: 4,
    label: '理疗师',
  },
  {
    value: 5,
    label: '医生助手',
  },
  {
    value: 6,
    label: '检查技师',
  },
  {
    value: 7,
    label: '管理员',
  },
  {
    value: 8,
    label: '其他',
  },
]
const init = (() => {
  isShow.value = false
  post('organization/member/list ', {page: page.value, size: pageSize.value, ...search.value}).then((res: any) => {
    tableData.value = res.list
    total.value = res.total_count
    list()
  })
})
const sectionList = ref<any>([]);
const list = () => {
  post(apiConfig.OrganizationSectionAllList).then((res: any) => {
    sectionList.value = res
  })
}
onMounted(() => {
  init()
})
const changePage = (val: any) => {
  page.value = val
  init()
};
const pageSize = ref(20);
const page = ref(1);
const total = ref(0);

const search = ref<any>({})
const resetSearch = () => {
  search.value = {}
  init()
}
</script>
<style scoped lang="scss">
@use "@/assets/scss/base.scss";

.container-wrapper {
  background: #fff;
  padding: 24px;
  display: flex;
  flex-direction: column;
  height: 100%;

  .title {
    height: 60px;
    display: flex;
    justify-content: space-between;
  }


  .table {
    flex: 1;
    min-height: 0;
  }

  .bottom {
    height: 60px;
    background-color: #FFF;
    box-sizing: border-box;
    padding: 10px;
    border-top: 1px solid #EEE;
    display: flex;
    justify-content: flex-end;
  }
}

:deep(.el-input__wrapper) {
  height: 42px;
}

:deep(.el-select__wrapper) {
  height: 42px;
}
.default-btn{
  margin-left: 5px;
  &:first-child{
    margin-left: 0;
  }
}
</style>