医疗技术目录添加功能与优化

src/components/search/Index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="component-box-wrapper__half-transparent" style="z-index: 9999">
+  <div class="component-box-wrapper__half-transparent" :style="{ zIndex }">
     <div class="component-content-box__dialog-like box-width">
       <div class="component-header-box">
         <div class="component-header__title">{{ title }}</div>
@@ -11,21 +11,38 @@
         <div>检索依据：</div>
         <div>
           <el-select v-model="params.method" style="width: 70px">
-            <el-option v-for="item in allMethods" :key="item.code" :label="item.name" :value="item.code"></el-option> </el-select
-          >
+            <el-option
+                v-for="item in allMethods"
+                :key="item.code"
+                :label="item.name"
+                :value="item.code"
+            ></el-option>
+          </el-select>
         </div>
         <div>
-          <el-input ref="inputRef" v-model="params.content"
-                    style="width: 180px;margin-left: 4px"
-                    clearable placeholder="请输入检索内容"></el-input>
+          <el-input
+              ref="inputRef"
+              v-model="params.content"
+              clearable
+              placeholder="请输入检索内容"
+              style="width: 180px;margin-left: 4px"
+          ></el-input>
         </div>
       </div>
       <div class="data-box">
-        <el-table ref="resultRef" :data="data.list" stripe height="360px" highlight-current-row @row-click="clickItem">
+        <el-table
+            ref="resultRef"
+            :data="data.list"
+            stripe height="360px"
+            highlight-current-row
+            @row-click="clickItem"
+        >
           <el-table-column prop="code" label="编码"></el-table-column>
           <el-table-column prop="name" label="名称"></el-table-column>
           <el-table-column v-if="showEmpDept" prop="deptName" label="科室"></el-table-column>
           <el-table-column v-if="showYbCode" prop="ybCode" label="医保赋码"></el-table-column>
+          <el-table-column v-if="showOpScale" prop="opScale" label="手术/操作级别" align="center"></el-table-column>
+          <el-table-column v-if="showOpType" prop="opTypeName" label="手术/操作类型"></el-table-column>
         </el-table>
         <el-pagination
           @current-change="handleCurrentChange"
@@ -62,10 +79,15 @@
 <script setup>
 import { reactive, ref, watch } from 'vue'
 import { searchFromServer } from '@/api/inpatient/dictionary'
-import { diagTypes } from '@/data/index'
+import { diagTypes } from '@/data'
 import Sleep from '@/utils/sleep'
+import {useZIndex} from "element-plus";
 
 const props = defineProps({
+  width: {
+    type: String,
+    default: '420px'
+  },
   title: {
     type: String,
     required: true,
@@ -85,10 +107,19 @@ const props = defineProps({
   showYbCode: {
     type: Boolean,
     default: false
+  },
+  showOpScale: {
+    type: Boolean,
+    default: false
+  },
+  showOpType: {
+    type: Boolean,
+    default: false
   }
 })
 
 const emits = defineEmits(['close', 'clickItem'])
+const width = props.width
 
 const inputRef = ref(null)
 const resultRef = ref(null)
@@ -164,10 +195,11 @@ watch(
     }
 )
 
+const zIndex = ref(0)
 onMounted(async () => {
+  zIndex.value = useZIndex().nextZIndex()
   await Sleep(100)
   inputRef.value.focus()
-
   document.onkeydown = (e) => {
     switch (e.code) {
       case 'ArrowUp':
@@ -199,7 +231,7 @@ onMounted(async () => {
 
 <style scoped>
 .box-width {
-  width: 420px;
+  width: v-bind(width);
 }
 .data-box {
   margin-top: 16px;

src/views/dictionary/MedicalTechnologyCatalog.vue

@@ -29,13 +29,21 @@
       <el-input
           v-model="request.itemName"
           readonly
-          @click="showSearch = true"
-          style="width: 160px"
+          @click="displaySearchPanel"
+          style="width: 200px"
           placeholder="项目名称"
       />
+      <el-button
+          style="margin-left: -24px"
+          icon="Close"
+          circle
+          plain
+          @click="request.itemCode = request.itemName = null"
+      ></el-button>
       <el-divider direction="vertical"/>
       <el-button type="primary" icon="Search" @click="handleSearchClick">检索</el-button>
       <el-button type="primary" icon="Plus" @click="showEditDialog({})">新增</el-button>
+      <el-button type="primary" icon="Download" @click="exportExcel">导出Excel</el-button>
     </header>
     <div class="layout_main layout_el-table">
       <el-table
@@ -44,14 +52,10 @@
           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="itemCode" label="项目编码" width="150"></el-table-column>
+        <el-table-column prop="itemName" label="项目名称"></el-table-column>
+        <el-table-column prop="surgeryLevel" label="手术/操作级别" width="120"></el-table-column>
+        <el-table-column prop="surgeryTypeName" label="手术/操作类型" width="120"></el-table-column>
         <el-table-column prop="opDate" label="更新时间" width="150"></el-table-column>
         <el-table-column label="状态" width="120">
           <template #default="{row}">
@@ -89,7 +93,6 @@
           :total="techdata.length"
       ></el-pagination>
     </div>
-
   </div>
   <el-dialog
       v-model="editDialogVisible"
@@ -103,6 +106,7 @@
         <el-select
             v-model="request.category"
             style="width: 220px"
+            @change="handleCategoryChange"
         >
           <el-option
               v-for="item in categoryList"
@@ -132,13 +136,21 @@
       <div>
         项目：
         <el-input
-            v-model="currentRow.name"
+            v-model="currentRow.itemName"
             readonly
-            @click="showSearch = true"
+            @click="displaySearchPanel"
             style="width: 220px"
             placeholder="项目名称"
         />
       </div>
+      <div v-if="request.category === 'SSCZ' " class="op-scale-type">
+        <div>
+          手术/操作级别：{{ currentRow.surgeryLevel ? currentRow.surgeryLevel + ' 级' : '无' }}
+        </div>
+        <div>
+          手术/操作类型：{{ currentRow.surgeryTypeName ? currentRow.surgeryTypeName : '无' }}
+        </div>
+      </div>
       <div class="footer">
         <el-button type="success" icon="Check" @click="saveCatalogue">保存</el-button>
         <el-button type="danger" icon="Close" @click="closeDialog">关闭</el-button>
@@ -146,9 +158,12 @@
     </div>
   </el-dialog>
   <Search
-      v-show="showSearch"
+      v-if="showSearch"
+      width="550px"
       :title="searchPanelTitle"
       :target="request.category"
+      :show-op-scale="request.category === 'SSCZ'"
+      :show-op-type="request.category === 'SSCZ'"
       @click-item="onChooseItem"
       @close="showSearch = false"
   />
@@ -160,6 +175,7 @@ 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";
 import {useUserStore} from "@/pinia/user-store";
+import {Export} from "@/utils/ExportExcel";
 
 const request = reactive({
   deptCode: '',
@@ -177,12 +193,16 @@ const categoryList = [
 ]
 
 const showSearch = ref(false)
+function displaySearchPanel() {
+  showSearch.value = true
+}
+
 const currentRow = ref({})
 const searchPanelTitle = computed(() => {
-  return '医疗技术目录搜索 - ' + filterCategoryName()
+  return '医疗技术目录搜索 - ' + getCategoryName()
 })
 
-function filterCategoryName() {
+function getCategoryName() {
   let index = categoryList.findIndex(item => {
     return item.code === request.category
   })
@@ -191,8 +211,11 @@ function filterCategoryName() {
 
 function onChooseItem(val) {
   if (editDialogVisible.value) {
-    currentRow.value.code = val.code
-    currentRow.value.name = val.name
+    currentRow.value.itemCode = val.code
+    currentRow.value.itemName = val.name
+    currentRow.value.surgeryLevel = val.opScale
+    currentRow.value.surgeryType = val.opType
+    currentRow.value.surgeryTypeName = val.opTypeName
   } else {
     request.itemCode = val.code
     request.itemName = val.name
@@ -221,19 +244,6 @@ function filterDelFlag(delFlag) {
       '<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(() => {
@@ -248,6 +258,12 @@ function showEditDialog(row) {
   editDialogVisible.value = true
 }
 
+function handleCategoryChange() {
+  currentRow.value.itemCode = currentRow.value.itemName
+      = currentRow.value.surgeryLevel = currentRow.value.surgeryType
+      = currentRow.value.surgeryTypeName = null
+}
+
 function saveCatalogue() {
   currentRow.value.category = request.category
   currentRow.value.deptCode = request.deptCode
@@ -272,8 +288,23 @@ function handleDeleteClick(row) {
   })
 }
 
-const user = useUserStore()
+function exportExcel() {
+  if (techdata.value.length === 0) {
+    xcMessage.warning('没有可以导出的数据。')
+    return
+  }
+  const title = {
+    deptName: '科室名称',
+    itemCode: '项目编码',
+    itemName: '项目名称',
+    surgeryLevel: '手术/操作级别',
+    surgeryTypeName: '手术/操作类型',
+    opDate: '更新时间',
+  }
+  Export(techdata.value, title, `医疗技术目录 - ${getCategoryName()}`)
+}
 
+const user = useUserStore()
 function permissionDenied() {
   let roles = user?.userInfo?.roles
   if (!roles || roles.indexOf(74) === -1) {
@@ -295,6 +326,12 @@ onMounted(() => {
   > div {
     margin-bottom: 12px;
   }
+  .op-scale-type {
+    margin-top: 24px;
+    > div {
+      margin-top: 12px;
+    }
+  }
   .footer {
     padding-top: 20px;
     width: 100%;