医疗技术目录

src/api/dictionary/medical-technology-catalog.js

@@ -0,0 +1,32 @@
+import request from '../../utils/request'
+
+export function getDeptSelections() {
+  return request({
+    url: '/medicalTechnologyCatalog/getDeptSelections',
+    method: 'get',
+  })
+}
+
+export function queryQualifiedItems(data) {
+  return request({
+    url: '/medicalTechnologyCatalog/queryQualifiedItems',
+    method: 'post',
+    data
+  })
+}
+
+export function saveTechnologyCatalogue(data) {
+  return request({
+    url: '/medicalTechnologyCatalog/saveTechnologyCatalogue',
+    method: 'post',
+    data
+  })
+}
+
+export function updateDelFlag(data) {
+  return request({
+    url: '/medicalTechnologyCatalog/updateDelFlag',
+    method: 'post',
+    data
+  })
+}

src/components/search/Index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="component-box-wrapper__half-transparent">
+  <div class="component-box-wrapper__half-transparent" style="z-index: 9999">
     <div class="component-content-box__dialog-like box-width">
       <div class="component-header-box">
         <div class="component-header__title">{{ title }}</div>

src/views/dictionary/MedicalTechnologyCatalog.vue

@@ -0,0 +1,294 @@
+<template>
+  <div class="layout_container">
+    <header class="round-header">
+      <el-select
+          v-model="request.category"
+          style="width: 120px"
+      >
+        <el-option
+            v-for="item in categoryList"
+            :key="item.code"
+            :value="item.code"
+            :label="item.name"
+        />
+      </el-select>
+      <el-select
+          v-model="request.deptCode"
+          style="width: 160px"
+          placeholder="请选择科室"
+          filterable
+          clearable
+      >
+        <el-option
+            v-for="item in deptList"
+            :key="item.code"
+            :value="item.code"
+            :label="item.name"
+        />
+      </el-select>
+      <el-input
+          v-model="request.itemName"
+          readonly
+          @click="showSearch = true"
+          style="width: 160px"
+          placeholder="项目名称"
+      />
+      <el-divider direction="vertical"/>
+      <el-button type="primary" icon="Search" @click="handleSearchClick">检索</el-button>
+      <el-button type="primary" icon="Plus" @click="showEditDialog({})">新增</el-button>
+    </header>
+    <div class="layout_main layout_el-table">
+      <el-table
+          :data="techdata.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
+          highlight-current-row
+          stripe
+      >
+        <el-table-column prop="deptName" label="科室名称" width="230"></el-table-column>
+        <el-table-column prop="code" label="项目编码" width="150"></el-table-column>
+        <el-table-column prop="name" label="项目名称"></el-table-column>
+        <el-table-column prop="level" label="手术/操作级别" width="120"></el-table-column>
+        <el-table-column label="手术/操作类型" width="120">
+          <template #default="{row}">
+            {{ filterItemType(row.type) }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="opDate" label="更新时间" width="150"></el-table-column>
+        <el-table-column label="状态" width="120">
+          <template #default="{row}">
+            <span v-html="filterDelFlag(row.delFlag)"></span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作">
+          <template #default="{row}">
+            <el-button
+                circle
+                type="primary"
+                plain
+                icon="Edit"
+                title="编辑"
+                @click="showEditDialog(row)"
+            ></el-button>
+            <el-button
+                circle
+                :type="row.delFlag === 0 ? 'danger' : 'success' "
+                plain
+                :icon="row.delFlag === 0 ? 'Delete' : 'RefreshLeft' "
+                :title="row.delFlag === 0 ? '停用' : '启用' "
+                @click="handleDeleteClick(row)"
+            ></el-button>
+<!--            <el-button-->
+<!--                v-else-->
+<!--                circle -->
+<!--                type="success"-->
+<!--                plain-->
+<!--                icon="RefreshLeft"-->
+<!--                title="启用"-->
+<!--            ></el-button>-->
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page="currentPage"
+          :page-sizes="[20, 30, 50, 100]"
+          :page-size="pageSize"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="techdata.length"
+      ></el-pagination>
+    </div>
+
+  </div>
+  <el-dialog
+      v-model="editDialogVisible"
+      :title="editDialogTitle"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      width="300px">
+    <div class="edit-dialog">
+      <div>
+        类别：
+        <el-select
+            v-model="request.category"
+            style="width: 220px"
+        >
+          <el-option
+              v-for="item in categoryList"
+              :key="item.code"
+              :value="item.code"
+              :label="item.name"
+          />
+        </el-select>
+      </div>
+      <div>
+        科室：
+        <el-select
+            v-model="request.deptCode"
+            style="width: 220px"
+            placeholder="请选择"
+            filterable
+            clearable
+        >
+          <el-option
+              v-for="item in deptList"
+              :key="item.code"
+              :value="item.code"
+              :label="item.name"
+          />
+        </el-select>
+      </div>
+      <div>
+        项目：
+        <el-input
+            v-model="currentRow.name"
+            readonly
+            @click="showSearch = true"
+            style="width: 220px"
+            placeholder="项目名称"
+        />
+      </div>
+      <div class="footer">
+        <el-button type="success" icon="Check" @click="saveCatalogue">保存</el-button>
+        <el-button type="danger" icon="Close" @click="closeDialog">关闭</el-button>
+      </div>
+    </div>
+  </el-dialog>
+  <Search
+      v-show="showSearch"
+      :title="searchPanelTitle"
+      :target="request.category"
+      @click-item="onChooseItem"
+      @close="showSearch = false"
+  />
+</template>
+
+<script setup>
+import Search from '@/components/search/Index.vue'
+
+import {getDeptSelections, queryQualifiedItems, saveTechnologyCatalogue, updateDelFlag} from "@/api/dictionary/medical-technology-catalog";
+import {xcMessage} from "@/utils/xiaochan-element-plus";
+
+const request = reactive({
+  deptCode: '',
+  category: 'SSCZ',
+  itemCode: '',
+  itemName: ''
+})
+
+const deptList = ref([])
+const categoryList = [
+  {code: 'SSCZ', name: '手术操作'},
+  {code: 'SFXM', name: '收费项目'},
+  {code: 'JY', name: '检验'},
+  {code: 'JC', name: '检查'},
+]
+
+const showSearch = ref(false)
+const currentRow = ref({})
+const searchPanelTitle = computed(() => {
+  return '医疗技术目录搜索 - ' + filterCategoryName()
+})
+
+function filterCategoryName() {
+  let index = categoryList.findIndex(item => {
+    return item.code === request.category
+  })
+  return categoryList[index].name
+}
+
+function onChooseItem(val) {
+  if (editDialogVisible.value) {
+    currentRow.value.code = val.code
+    currentRow.value.name = val.name
+  } else {
+    request.itemCode = val.code
+    request.itemName = val.name
+  }
+  showSearch.value = false
+}
+
+const techdata = ref([])
+function handleSearchClick() {
+  queryQualifiedItems(request).then(res => {
+    techdata.value = res
+  })
+}
+
+const currentPage = ref(1)
+const pageSize = ref(20)
+function handleSizeChange(val) {
+  pageSize.value = val
+}
+function handleCurrentChange(val) {
+  currentPage.value = val
+}
+
+function filterDelFlag(delFlag) {
+  return delFlag === 0 ? '<span style="color: green">启用</span>' :
+      '<span style="color: red">停用</span>'
+}
+
+function filterItemType(type) {
+  switch (type) {
+    case '1':
+      return '手术'
+    case '2':
+      return '介入治疗'
+    case '3':
+      return '治疗性操作'
+    case '4':
+      return '诊断性操作'
+  }
+}
+
+const editDialogVisible = ref(false)
+const isEditMode = ref(false)
+const editDialogTitle = computed(() => {
+  return isEditMode.value ? '编辑医疗技术目录' : '新增医疗技术目录'
+})
+function showEditDialog(row) {
+  isEditMode.value = row.deptCode
+  currentRow.value = row
+  editDialogVisible.value = true
+}
+
+function saveCatalogue() {
+  currentRow.value.category = request.category
+  currentRow.value.deptCode = request.deptCode
+  saveTechnologyCatalogue(currentRow.value).then(res => {
+    xcMessage.success(res)
+    closeDialog()
+    handleSearchClick()
+  })
+}
+
+function closeDialog() {
+  currentRow.value = {}
+  editDialogVisible.value = false
+}
+
+function handleDeleteClick(row) {
+  updateDelFlag(row).then(() => {
+    handleSearchClick()
+  })
+}
+
+onMounted(() => {
+  getDeptSelections().then(res => {
+    deptList.value = res
+  })
+})
+</script>
+
+<style scoped lang="scss">
+.edit-dialog {
+  > div {
+    margin-bottom: 12px;
+  }
+  .footer {
+    padding-top: 20px;
+    width: 100%;
+    text-align: right;
+  }
+}
+</style>