lis8.0-vue3/src/views/liswork/xtwh/comopt/components/sysParameter/index.vue

<template>
  <!-- 参数列表 -->
  <div>
    <el-row :gutter="10" class="table-toolbar">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="Check" @click="handleSave">保存</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="success" plain icon="Edit" @click="handleCancelEdit">取消修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" plain icon="RefreshRight" @click="handleRestoreDefault">还原默认</el-button>
      </el-col>
    </el-row>

    <el-form ref="form" :model="formData" :rules="rules" label-width="120px" class="form-inline" inline>
      <div class="title">说明：公式中阴阳对照请用NC,PC表示</div>
      <el-row>
        <el-col :span="8">
          <el-form-item label="测试波长" prop="csbc">
            <el-select v-model="formData.csbc" style="width: 12rem;">
              <el-option v-for="item in dzList" :key="item.lgph" :value="item.lgph" :label="item.bc" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8" style="display: flex;">
          <el-form-item label="参考波长" prop="ckbc">
            <el-select v-model="formData.ckbc" style="width: 12rem;">
              <el-option v-for="item in dzList" :key="item.lgph" :value="item.lgph" :label="item.bc" />
            </el-select>
          </el-form-item>
          <el-button type="primary" @click="openDz">滤光片波长对照表</el-button>
        </el-col>
        <el-col :span="8">
          <el-form-item label="阳性判断公式" prop="yxgs">
            <el-input v-model="formData.yxgs" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="8">
          <el-form-item label="上灰区" prop="shq">
            <el-input v-model="formData.shq">
              <template #append>% </template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="下灰区" prop="xhq">
            <el-input v-model="formData.xhq">
              <template #append>% </template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="阴性对照下限" prop="negxx">
            <el-input v-model="formData.negxx" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="8">
          <el-form-item label="阳性对照下限" prop="posxx">
            <el-input v-model="formData.posxx" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="阴性对照上限" prop="negsx">
            <el-input v-model="formData.negsx" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="阳性对照上限" prop="possx">
            <el-input v-model="formData.possx" />
          </el-form-item>
        </el-col>
        <el-col :span="6">

        </el-col>
      </el-row>

      <el-divider></el-divider>
      <el-row>
        <el-col :span="8">
          <el-form-item label="项目性质" prop="xmxz">
            <el-radio-group v-model="formData.xmxz">
              <el-radio value="1">定性</el-radio>
              <el-radio value="2">定量</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="移动模式" prop="ydfs">
            <el-radio-group v-model="formData.ydfs">
              <el-radio value="1">连续</el-radio>
              <el-radio value="2">步进</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="8">

          <el-form-item label="测试模式" prop="csms">
            <el-radio-group v-model="formData.csms">
              <el-radio value="1">终点法</el-radio>
              <el-radio value="2">两点法</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="振板频率" prop="zbpl">
            <el-radio-group v-model="formData.zbpl">
              <el-radio value="1">高</el-radio>
              <el-radio value="2">中</el-radio>
              <el-radio value="3">低</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="空白形式" prop="kbms">
            <el-radio-group v-model="formData.kbms">
              <el-radio value="1">空气</el-radio>
              <el-radio value="2">试剂</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="振板时间" prop="zbsj">
            <el-input v-model="formData.zbsj">
              <template #append>秒</template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider></el-divider>
      <el-row>
        <el-col :span="8">
          <el-form-item label="默认模板" prop="mrmb">
            <el-select v-model="formData.mrmb" style="width: 12rem;">
              <el-option v-for="item in sjtableData" :key="item.sjph" :value="item.sjph" :label="item.sjph" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8" style="display: flex;">
          <el-form-item label="默认试剂" prop="mrsjph">
            <el-select v-model="formData.mrsjph" style="width: 12rem;">
              <el-option v-for="item in sjtableData" :key="item.sjph" :value="item.sjph" :label="item.sjph" />
            </el-select>
          </el-form-item>
          <el-button type="primary" @click="sjHandle">试剂维护</el-button>
        </el-col>
      </el-row>
    </el-form>

    <!-- 波长对照表 -->
    <el-dialog v-model="dialogVisible" title="滤光波长对照表" draggable :close-on-click-modal="false" width="500px">
      <div class="mb5">
        <el-button type="primary" @click="savaItem">保存</el-button>
        <el-button type="primary" @click="addItem">新增</el-button>
        <el-button type="danger" @click="delItem">删除</el-button>
      </div>

      <el-table :data="dzList" style="width: 100%" height="450" border highlight-current-row
        @row-click="handleRowClick">
        <el-table-column type="index" width="50" label="No" align="center" />
        <el-table-column label="滤光片号" prop="lgph">
          <template #default="scope">
            <el-input v-model="scope.row.lgph" class="full-width-input" />
          </template>
        </el-table-column>
        <el-table-column label="波长" prop="bc">
          <template #default="scope">
            <el-input v-model="scope.row.bc" class="full-width-input" />
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>


    <!-- 试剂维护 -->
    <el-dialog v-model="sjShow" title="试剂维护" draggable :close-on-click-modal="false" width="700px">
      <div class="mb5">
        <el-button type="primary" @click="sjsavaItem">保存</el-button>
        <el-button type="primary" @click="sjaddItem">新增</el-button>
        <el-button type="danger" @click="sjdelItem">删除</el-button>
      </div>
      <el-table :data="sjtableData" height="400px" border highlight-current-row @row-click="sjRowClick">
        <el-table-column label="试剂批号" prop="sjph" width="120">
          <template #default="scope">
            <el-input v-model="scope.row.sjph" class="full-width-input" />
          </template>
        </el-table-column>
        <el-table-column label="厂商" prop="sjcs">
          <template #default="scope">
            <el-select v-model="scope.row.sjcs" class="full-width-input">
              <el-option label="请选择" value="" />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="有效期" prop="yxq">
          <template #default="scope">
            <el-date-picker v-model="scope.row.yxq" type="datetime" placeholder="0000:00:00 00:00"
              format="YYYY-MM-DD HH:mm" value-format="YYYY-MM-DD HH:mm" style="width:100%" />
          </template>
        </el-table-column>
        <el-table-column label="方法" prop="csff">
          <template #default="scope">
            <el-select v-model="scope.row.csff" class="full-width-input">
              <el-option label="请选择" value="" />
            </el-select>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { queryFilter, addXmFilter, delXmFilter, addXmLot, delXmLot, queryXmLot } from '@/api/liswork/xtwh/ComOpt'
import { ElMessage } from 'element-plus';


const yq = defineModel<string>()

const dialogVisible = ref(false)
const formData = ref({
  csbc: '',
  ckbc: '',
  yxgs: '',
  shq: '',
  xhq: '',
  negxx: '',
  posxx: '',
  negsx: '',
  possx: '',
  xmxz: '1',
  ydfs: '1',
  csms: '1',
  zbpl: '1',
  kbms: '1',
  zbsj: '',
  mrmb: '',
  mrsjph: ''
});
const rules = ref({
  csbc: [
    { required: true, message: '请选择测试波长', trigger: 'change' }
  ],
  yxgs: [
    { required: true, message: '请输入阳性判断公式', trigger: 'blur' }
  ]
});

const form = ref();
const handleSave = () => {
  console.log('保存')
  form.value.validate((valid: boolean) => {
    if (valid) {
      console.log('submit!')
    }
  })
}
const handleCancelEdit = () => {
  console.log('取消修改')
}
const handleRestoreDefault = () => {
  console.log('还原默认')
}
const dzList = ref<Array<{ lgph: string, bc: string, yq?: string }>>([])
const getDzList = () => {
  selectRow.value = null
  queryFilter({ yq: yq.value }).then((res: any) => {
    dzList.value = res.data
  })
}

const selectRow = ref()
const handleRowClick = (row: any) => {
  selectRow.value = row
}
const openDz = () => {
  getDzList()
  dialogVisible.value = true
}

const savaItem = () => {
  const flag = dzList.value.every(item => item.bc && item.lgph)
  if (!flag) return ElMessage.warning('请检查滤光片号和波长填写！')
  addXmFilter(dzList.value).then((res: any) => {
    if (res.code == 0) {
      ElMessage.success('保存成功！')
      getDzList()
    }
  })
}
const addItem = () => {
  dzList.value.push({ lgph: '', bc: '', yq: yq.value })
}
const delItem = () => {
  if (!selectRow.value) return ElMessage.warning('请选择要删除的行！')
  if (selectRow.value.lgph) {
    delXmFilter(selectRow.value)
  }
  dzList.value = dzList.value.filter(item => item.lgph != selectRow.value.lgph)
  selectRow.value = null
}

interface sjList {
  sjcs: string, sjph: string, yq: string, yxq: string, csff: string
}
const sjShow = ref(false)
const sjtableData = ref<sjList[]>([])
const sjHandle = () => {
  sjShow.value = true
  getSjList()
}

const sjRowClick = (row: any) => {
  selectRow.value = row
}
const getSjList = () => {
  selectRow.value = null
  queryXmLot().then((res: any) => {
    sjtableData.value = res.data
  })
}

const sjsavaItem = () => {

}
const sjaddItem = () => {
  sjtableData.value.push({
    sjcs: '',
    sjph: '',
    yq: '',
    yxq: '',
    csff: ''
  })
}
const sjdelItem = () => {

}

watch(yq, (newVal) => {
  getDzList()
}, { immediate: true })
</script>

<style scoped lang="scss">
.table-toolbar {
  margin-bottom: 8px;
  height: 36px;
  line-height: 36px;
}

.title {
  font-family: SourceHanSansCN, SourceHanSansCN;
  font-size: 16px;
  color: #409eff;
  font-weight: 600;
  margin-bottom: 8px;
}
</style>