知识库界面

src/views/liswork/xmKnowledge/Modify.vue

@@ -1,10 +1,125 @@
 <template>
   <!-- 修改界面 -->
+<el-dialog v-model="visible" width="600px">
+  <template #header>
+    {{ title }}
+  </template>
+  <span class="text-span">项目信息：</span>
+  <el-divider style="margin: 5px 0;"/>
+  <el-form ref="form" :model="formData" size="small" class="form-inline" inline label-width="60px">
+    <el-form-item label="项目代号" prop="xmdh">
+      <el-input placeholder="项目代号" v-model="formData.xmdh"></el-input>
+    </el-form-item>
+    <el-form-item label="项目名称" prop="xmmc">
+      <el-input placeholder="项目名称" v-model="formData.xmmc"></el-input>
+    </el-form-item>
+    <el-form-item label="助记符" prop="zjf">
+      <el-input placeholder="助记符" v-model="formData.zjf"></el-input>
+    </el-form-item>
+    <el-form-item label="项目类别" prop="xmlb">
+      <el-input placeholder="项目类别" v-model="formData.xmlb"></el-input>
+    </el-form-item>
+    <el-form-item label="所属组" prop="xmz">
+      <el-input placeholder="所属组" v-model="formData.xmz"></el-input>
+    </el-form-item>
+    <el-form-item label="单位" prop="dw">
+      <el-input placeholder="单位" v-model="formData.dw"></el-input>
+    </el-form-item>
+    <el-form-item label="参考上限" prop="cksx">
+      <el-input placeholder="参考上限" v-model="formData.cksx"></el-input>
+    </el-form-item>
+    <el-form-item label="参考下限" prop="ckxx">
+      <el-input placeholder="参考下限" v-model="formData.ckxx"></el-input>
+    </el-form-item>
+    <el-form-item label="打印参考值" prop="dyckz">
+      <el-input placeholder="打印参考值" v-model="formData.dyckz"></el-input>
+    </el-form-item>
+    <el-form-item label="打印序号" prop="dyxh">
+      <el-input placeholder="打印序号" v-model="formData.dyxh"></el-input>
+    </el-form-item>
+    <el-form-item label="计算公式" prop="jsgs">
+      <el-input placeholder="计算公式" v-model="formData.jsgs"></el-input>
+    </el-form-item>
+    <el-form-item label="临床意义" prop="lcyy">
+      <el-input placeholder="临床意义" v-model="formData.lcyy"></el-input>
+    </el-form-item>
+    <el-form-item label="备注" prop="bz">
+      <el-input placeholder="备注" v-model="formData.bz"></el-input>
+    </el-form-item>
+    <el-form-item prop="xsbz">
+      <el-checkbox v-model="formData.xsbz" label="显示标志"></el-checkbox> 
+    </el-form-item> 
+  </el-form>
+  <span class="text-span">知识库条目：</span>
+  <el-divider style="margin: 5px 0;"/>
+  <TableRight :style-config="styleConfig"/>
+  <template #footer>
+    <div class="dialog-footer">
+       <el-button @click="handleCancel">取 消</el-button>
+       <el-button type="primary" @click="handleOk">确 定</el-button>
+    </div>
+  </template>
+</el-dialog>   
+
 </template>
 
 <script setup lang="ts">
+import TableRight from './TableData.vue'
+
+const props = defineProps({
+  title:{
+    type: String,
+    default: ''
+  }
+})
+
+const visible = defineModel()
+
+const formData = ref({
+  xmdh: '',
+  xmmc: '',
+  zjf: '',
+  xmlb: '' ,
+  xmz: '',
+  dw: '',
+  cksx: '',
+  ckxx: '',
+  dyckz: '',
+  dyxh: '',
+  jsgs: '',
+  lcyy: '',
+  bz:'',
+  xsbz: ''
+})
+
+const styleConfig = ref({
+  textresultWidth: 300,
+  zdWidth: 300,
+  tableHeight: '40vh'
+})
+
+const handleCancel = () => {
+
+}
+
+const handleOk = () => {
+
+}
 
 </script>
 
 <style scoped lang="scss">
+.form-inline {
+  padding: 10px;
+  background-color: #f5f7fa;
+  height: auto;
+  .el-input {
+    width: 150px;
+  }
+  .el-form-item {
+    margin-right: 10px;
+    margin-bottom: 2px;
+  }
+
+}
 </style>

src/views/liswork/xmKnowledge/TableData.vue

@@ -0,0 +1,76 @@
+<template>
+<CustomTable ref="tableRefRight" :data="dataList" :columns="columnsRight" :enable-column-drag="true" @column-drag-end="handleColumnDragEnd"
+      :config="tableConfig">
+  <template #reserve="{row}">
+    {{ reserve(row.reserve) }}
+  </template>    
+</CustomTable>  
+</template>
+
+<script setup lang="ts">
+import CustomTable from '@/components/elTable/index.vue'
+
+const props = defineProps({
+  dataList:{
+    type: Array,
+    required: false,
+    default: []
+  },
+  styleConfig: {
+    type: Object,
+    required: false,
+    default: {
+      reserveWidth: 50,
+      textresultWidth: 200,
+      zdWidth: 100,
+      tableHeight: '85vh'
+    }
+   
+  }
+})
+
+//const dataListRight = ref([]);
+const columnsRight = ref([
+  { prop: 'reserve', label: '类别', visible: true, align: 'center',slot: 'reserve', width: props.styleConfig.reserveWidth },
+  { prop: 'textresult', label: '说明', visible: true, align: 'center', width: props.styleConfig.textresultWidth ,showOverflowTooltip: false},
+  { prop: 'zd', label: '指导建议', visible: true, align: 'center', width: props.styleConfig.zdWidth,showOverflowTooltip: false },
+])
+
+const tableConfig = ref({
+  border: true, // 边框
+  height: props.styleConfig.tableHeight, // 高度
+  highlightCurrentRow: true, // 高亮当前行
+  // cellStyle: cellStyleHd
+})
+
+//退拽属性
+const handleColumnDragEnd = (data: any) => {
+  // 更新列配置
+  columnsRight.value = data.columns;
+}
+
+
+const reserve = (reserve:string) => {
+  switch(reserve){
+    case '1':
+      return '综述'
+    case 'H':
+      return '偏高'
+    case 'L':  
+      return '偏低'
+    case 'P':
+      return '阳性'
+    case 'Q':
+      return '弱阳性'
+    case 'J':
+      return '危机'
+    case 'N':
+      return '阴性'
+  }
+}
+
+
+</script>
+
+<style scoped lang="scss">
+</style>

src/views/liswork/xmKnowledge/index.vue

@@ -1,4 +1,11 @@
 <template>
+<div class="topForm">
+  <el-form ref="formRef" :model="formData" inline label-width="80px" class="mb8" @submit.prevent="handleSubmit">
+    <el-form-item label="检索" prop="js">
+      <el-input placeholder="项目代号，名称，简拼" v-model="formData.js" style="width: 200px;" @keyup.enter="getList"></el-input>
+    </el-form-item>
+  </el-form>
+</div>
 <el-row>
   <el-button type="primary" @click="onQueryClick">查询</el-button>
   <el-button type="primary" @click="onAddClick">新增</el-button>
@@ -14,16 +21,18 @@
     </CustomTable>
   </el-col>
   <el-col :span="7">
-    <CustomTable ref="tableRefRight" :data="dataListRight" :columns="columnsRight" :enable-column-drag="true" @column-drag-end="handleColumnDragEnd"
+    <TableRight :data-list="dataListRight"/>
-          :config="tableConfig">
-    </CustomTable>
   </el-col>
 </el-row>
+
+<Modify v-model="modifyVisible" :title="modifyTitle"/>
 </template>
 
 <script setup lang="ts">
 import CustomTable from '@/components/elTable/index.vue'
 import {queryService,queryDetailService} from '@/api/liswork/xmKnowledge/xmKnowledgeApi'
+import TableRight from './TableData.vue'
+import Modify from './Modify.vue'
 
 const dataListLeft = ref([]);
 const dataListRight = ref([]);
@@ -44,11 +53,7 @@ const columnsLeft = ref([
   { prop: 'zjf', label: '助记符', visible: true, align: 'center', width: 100 },
   { prop: 'bz', label: '备注', visible: true, align: 'center', width: 100 },
 ]);
-const columnsRight = ref([
+
-  { prop: 'reserve', label: '类别', visible: true, align: 'center', width: 50 },
-  { prop: 'textresult', label: '说明', visible: true, align: 'center', width: 200 },
-  { prop: 'zd', label: '指导建议', visible: true, align: 'center', width: 100 },
-])
 const tableConfig = ref({
   border: true, // 边框
   height: '85vh', // 高度
@@ -56,11 +61,14 @@ const tableConfig = ref({
   // cellStyle: cellStyleHd
 })
 
+const modifyVisible = ref(false)
+const modifyTitle = ref('')
+
+
 //退拽属性
 const handleColumnDragEnd = (data: any) => {
   // 更新列配置
   columnsLeft.value = data.columns;
-  columnsRight.value = data.columns;
 }
 
 const pagination = ref({
@@ -81,8 +89,16 @@ const sizeChange = (page: { currentPage: number, pageSize: number }) => {
   getList()
 }
 
+const formData = ref({
+  js: ''
+})
+
+const handleSubmit = (event: any) => {
+  event.preventDefault();
+}
+
 const onClick = async (row:any) => {
-  const res = await queryDetailService(row.xmdh);
+  const res = await queryDetailService(row.xmid);
   dataListRight.value = res.data
 }
 
@@ -91,7 +107,8 @@ const onDBClick = ()=>{
 }
 
 const onAddClick = ()=> {
-
+  modifyVisible.value = true
+  modifyTitle.value = '新增'
 }
 
 const onDelClick = () => {
@@ -103,7 +120,7 @@ const onQueryClick = () => {
 }
 
 const getList = async () => {
-  const data = {pageSize: pagination.value.pageSize, pageNum: pagination.value.currentPage }
+  const data = {pageSize: pagination.value.pageSize, pageNum: pagination.value.currentPage,inputData: formData.value.js }
   const res = await queryService(data);
   dataListLeft.value = res.rows
   pagination.value.total = res.total
@@ -124,4 +141,8 @@ onMounted(()=>{
   margin-top: 5px;
   margin-bottom: 5px;
 }
+
+.topForm {
+  margin-top: 10px;
+}
 </style>