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>