lis8.0-vue3/src/views/liswork/xmKnowledge/Modify.vue

<template>
  <!-- 修改界面 -->
<el-dialog v-model="visible" width="600px" @open="open">
  <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="70px">
    <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="xsbzCheck" label="显示标志"></el-checkbox> 
    </el-form-item> 
  </el-form>
  <span class="text-span">知识库条目：</span>
  <el-divider style="margin: 5px 0;"/>
  <CustomTable ref="tableRefRight" :data="dataList" :columns="columnsRight" :enable-column-drag="true" @column-drag-end="handleColumnDragEnd"
      :config="tableConfig" :show-overflow-tooltip="true">
    <template #reserve="{row}">
      {{ reserve(row.reserve) }}
    </template>    
    <template #textresult="{row}">
      <el-input v-model="row.textresult" type="textarea" class="full-width-input"></el-input>
    </template>
    <template #zd="{row}">
      <el-input v-model="row.zd" type="textarea" class="full-width-input"></el-input>
    </template>
  </CustomTable>  
  <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 CustomTable from '@/components/elTable/index.vue'
import { addService } from '@/api/liswork/xmKnowledge/xmKnowledgeApi'
import { ElMessage } from 'element-plus'

const props = defineProps({
  title:{
    type: String,
    default: ''
  },
  type: {
    type: String,
    default: ''
  }
})
const visible = defineModel()
const emit = defineEmits(['closeWithReturn'])

const formData = ref({
  xmdh: '',
  xmmc: '',
  zjf: '',
  xmlb: '' ,
  xmz: '',
  dw: '',
  cksx: '',
  ckxx: '',
  dyckz: '',
  dyxh: '',
  jsgs: '',
  lcyy: '',
  bz:'',
  xsbz: ''
})


const columnsRight = ref([
  { prop: 'reserve', label: '类别', visible: true, align: 'center',slot: 'reserve', width: 50 ,showOverflowTooltip: false},
  { prop: 'textresult', label: '说明', visible: true, align: 'center',slot: 'textresult', width: 300,showOverflowTooltip: false},
  { prop: 'zd', label: '指导建议', visible: true, align: 'center',slot: 'zd', width: 200,showOverflowTooltip: false },
])

const tableConfig = ref({
  border: true, // 边框
  height: '40vh', // 高度
  highlightCurrentRow: true, // 高亮当前行
  // cellStyle: cellStyleHd
})

const xsbzCheck = computed({
  get() {
    return formData.value.xsbz === '1'
  },
  set(checked){
    formData.value.xsbz = checked ? '1' : '0';
  }
})

//退拽属性
const handleColumnDragEnd = (data: any) => {
  // 更新列配置
  columnsRight.value = data.columns;
}


const dataList = ref<any>([])


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 '阴性'
  }
}

const handleCancel = () => {
  visible.value = false
}

const handleOk = async () => {
  //保存数据
  console.log(formData.value)
  await addService(formData.value);
  ElMessage.success('保存成功！')
  visible.value = false

}

const open = () => {
  if(props.type === '新增'){
    dataList.value = [
      {reserve:'1',textresult:'',yxjs:'',cjyy:'',zd:''},
      {reserve:'H',textresult:'',yxjs:'',cjyy:'',zd:''},
      {reserve:'L',textresult:'',yxjs:'',cjyy:'',zd:''},
      {reserve:'P',textresult:'',yxjs:'',cjyy:'',zd:''},
      {reserve:'Q',textresult:'',yxjs:'',cjyy:'',zd:''},
      {reserve:'J',textresult:'',yxjs:'',cjyy:'',zd:''},
      {reserve:'N',textresult:'',yxjs:'',cjyy:'',zd:''},
    ]
  }else{

  }
    
}

</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>