web_dist/src/views/crb-manage/CrbBaseInfo.vue

<template>
  <div class="layout_container">
    <header>
      <el-input v-model.trim="codeRs" class="w-50 m-2" style="width: 280px" placeholder="请输入工号" clearable>
        <template #prepend>工号</template>
      </el-input>
      <el-input v-model.trim="xm" class="w-50 m-2" style="width: 280px; margin-left: 3px" placeholder="请输入姓名" clearable>
        <template #prepend>姓名</template>
      </el-input>
      <el-input v-model.trim="idCard" class="w-50 m-2" style="width: 280px; margin-left: 3px" placeholder="请输入身份证号码" clearable>
        <template #prepend>身份证号码</template>
      </el-input>
      <el-input v-model.trim="deptName" class="w-50 m-2" style="width: 280px; margin-left: 3px" placeholder="请输入科室名称" clearable>
        <template #prepend>科室名称</template>
      </el-input>
      <el-divider direction="vertical" />
      <el-button type="primary" icon="Search" @click="queryBaseInfo" style="margin-left: 5px">查询</el-button>
    </header>
    <div class="layout_main">
      <el-tabs class="el-tabs__fill" v-model="editableTabsValue" type="border-card" @tab-click="handleClick">
        <el-tab-pane key="baseUser" label="用户上传" name="baseUser">
          <div class="layout_display_flex_y">
            <div class="layout_flex_1-y">
              <el-table :data="baseUserData.slice(pageSize * (currentPage - 1), pageSize * currentPage)" border
                        stripe highlight-current-row height="100%">
                <el-table-column type="index" label="序号" width="50" fixed/>
                <el-table-column prop="id" label="账号" width="100" />
                <el-table-column prop="loginName" label="工号" width="100"/>
                <el-table-column prop="orgCode" label="所属机构" width="100" />
                <el-table-column prop="deptCode" label="所属科室" width="100" />
                <el-table-column prop="userName" label="姓名" width="100" />
                <el-table-column prop="idCardTypeCode" label="身份证件类别" width="120"/>
                <el-table-column prop="idCard" label="身份证件号码" width="180" >
                  <template #default="scope">
                    {{scope.row.idCard.replace(reg, '\$1******\$2')}}
                  </template>
                </el-table-column>
                <el-table-column prop="tel" label="联系电话" width="180">
                  <template #default="scope">
                    {{scope.row.tel.replace(reg1, '\$1****\$2')}}
                  </template>
                </el-table-column>
                <el-table-column prop="physicianNo" label="医师执业资格证号" width="180"/>
                <el-table-column prop="userTypeCode" label="用户类型" width="100"/>
                <el-table-column fixed="right" label="操作" min-width="80" width="80" center>
                  <template #default="scope">
                    <el-button type="primary" size="small" @click="uploadBaseUser(scope.row)">上传</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div>
              <el-pagination :current-page="currentPage" :page-size="pageSize" :page-sizes="[10, 15, 20, 25]"
                             :total="baseUserData.length" layout="total, sizes, prev, pager, next, jumper"
                             style="margin-top: 5px" @size-change="handleSizeChange"
                             @current-change="handleCurrentChange">
              </el-pagination>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane key="baseDept" label="科室上传" name="baseDept">
          <div class="layout_display_flex_y">
            <div class="layout_flex_1-y">
              <el-table :data="baseDeptData.slice(pageSizeDept * (currentPageDept - 1), pageSizeDept * currentPageDept)" border
                        stripe highlight-current-row height="100%">
                <el-table-column type="index" label="序号" width="50" />
                <el-table-column prop="deptCode" label="院内科室代码" width="180" />
                <el-table-column prop="deptName" label="院内科室名称" width="280" />
                <el-table-column prop="targetDeptCode" label="前置软件科室代码" width="180" />
                <el-table-column prop="targetDeptName" label="前置软件科室名称" width="280" />
                <el-table-column fixed="right" label="操作" min-width="80" width="80" center>
                  <template #default="scope">
                    <el-button type="primary" size="small" @click="uploadBaseDept(scope.row)">上传</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div>
              <el-pagination :current-page="currentPageDept" :page-size="pageSizeDept" :page-sizes="[10, 15, 20, 25]"
                             :total="baseDeptData.length" layout="total, sizes, prev, pager, next, jumper"
                             style="margin-top: 5px" @size-change="handleSizeChangeDept"
                             @current-change="handleCurrentChangeDept">
              </el-pagination>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script setup name="CrbBaseInfo">
import {nextTick, onMounted, ref} from "vue";
import {
  selectBaseDept,
  selectBaseUser,
  uploadBaseDeptData,
  uploadBaseUserData
} from "@/api/crb-manage/crb-base-info.js";
import {ElMessage, ElMessageBox} from "element-plus";
import {updateMzDrugCodgData} from "@/api/yp-codg/yp-codg-match.js";

const codeRs = ref('')
const xm = ref('')
const idCard = ref('')
const deptName = ref('')
const editableTabsValue = ref("baseUser")
const baseUserData = ref([])

const pageSize = ref(20)
const currentPage = ref(1)
const handleSizeChange = (val) => {
  pageSize.value = val
}
const handleCurrentChange = (val) => {
  currentPage.value = val
}

const baseDeptData = ref([])
const pageSizeDept = ref(20)
const currentPageDept = ref(1)
const handleSizeChangeDept = (val) => {
  pageSizeDept.value = val
}
const handleCurrentChangeDept = (val) => {
  currentPageDept.value = val
}

const reg = /^(.{6})\d+(.{4})$/
const reg1 = /^(1[3-9][0-9])\d{4}(\d{4}$)/

onMounted(() => {
  nextTick(() => {
    queryBaseUser()
  })
})

const handleClick = (tab, event) => {
  // 查询哪个tab页面
  editableTabsValue.value = tab.props.name;
  if (editableTabsValue.value === "baseUser") {
    queryBaseUser()
  } if(editableTabsValue.value === "baseDept"){
    queryBaseDept()
  }
}

const queryBaseInfo = () => {
  if (editableTabsValue.value === "baseUser") {
    queryBaseUser()
  } if(editableTabsValue.value === "baseDept"){
    queryBaseDept()
  }
}

const userInfo = ref({
  loginName: '', // 工号
  userName: '', // 姓名
  idCard: '', // 身份证号码
})
//查询用户信息
const queryBaseUser = () => {
  userInfo.value.loginName = codeRs.value
  userInfo.value.userName = xm.value
  userInfo.value.idCard = idCard.value
  selectBaseUser(userInfo.value).then((res) => {
    baseUserData.value = res
  })
}
// 上传用户信息
const uploadBaseUser = (row) => {
  ElMessageBox.confirm('确定上传用户信息？', {
    cancelButtonText: '取消',
    confirmButtonText: '确定',
    type: 'warning',
    distinguishCancelAndClose: true,
    dangerouslyUseHTMLString: true
  }).then(() => {
    uploadBaseUserData(row).then((res) => {
      ElMessage({
        type: "success",
        message: "用户信息上传成功！",
        duration: 2500,
        showClose: true,
      });
    })
  }).catch((action) => {
    if (action === 'cancel') {
      console.log("已取消。。。")
    }
  })
}
const deptInfo = ref({
  deptCode: '',
  deptName: '',
})
//查询科室信息
const queryBaseDept = () => {
  deptInfo.value.deptName = deptName.value
  selectBaseDept(deptInfo.value).then((res) => {
    baseDeptData.value = res
  })
}
// 上传科室信息
const uploadBaseDept = (row) => {
  ElMessageBox.confirm('确定上传科室信息？', {
    cancelButtonText: '取消',
    confirmButtonText: '确定',
    type: 'warning',
    distinguishCancelAndClose: true,
    dangerouslyUseHTMLString: true
  }).then(() => {
    uploadBaseDeptData(row).then((res) => {
      ElMessage({
        type: "success",
        message: "科室信息上传成功！",
        duration: 2500,
        showClose: true,
      });
    })
  }).catch((action) => {
    if (action === 'cancel') {
      console.log("已取消。。。")
    }
  })
}
</script>