117 lines
4.0 KiB
Vue
Raw Normal View History

2025-12-23 15:16:11 +08:00
<template>
<!-- 收费项目,报告项目对照 -->
<div class="app-container">
<el-form ref="form" :model="formData" label-width="80px" inline>
<el-form-item label="仪器" prop="yq">
<YQSelectTable v-model:data="formData.yq" width="200px" placeholder="请输入仪器名称" @get-data-value="getList" />
</el-form-item>
<el-form-item label="项目" prop="xmdh">
<el-input placeholder="请输入项目名称" v-model="formData.xmdh" style="width: 200px;"></el-input>
</el-form-item>
<el-form-item>
<el-checkbox v-model="checked" label="只看仪器对照收费项目" :value="xmValue"></el-checkbox>
</el-form-item>
</el-form>
<el-row>
<el-button type="primary" icon="Plus" @click="onClickAdd">新增</el-button>
<el-button type="primary" icon="Delete" @click="onClickDel">删除</el-button>
<el-button type="primary" icon="Edit" @click="onClickSave">保存</el-button>
</el-row>
<el-row>
<el-col :span="6">
<CustomTable ref="tableRefLeft" :data="dataListLeft" :columns="columnsLeft" :enable-column-drag="true"
@column-drag-end="handleColumnDragEnd" :config="tableConfig" @row-click="rowClickLeft" />
</el-col>
<el-col :span="18">
<CustomTable ref="tableRefRight" :data="dataListRight" :columns="columnsRight" :enable-column-drag="true"
@column-drag-end="handleColumnDragEnd" :config="tableConfig">
<template #xmdh="{ row }">
{{ row.xmdh }} {{ row.xmmc }}
</template>
<template #tdh="{ row }">
<el-input placeholder="" v-model="row.tdh" class="full-width-input"></el-input>
</template>
<template #mrz="{ row }">
<el-input v-model="row.mrz" class="full-width-input"></el-input>
</template>
<template #def="{ row }">
<el-checkbox v-model="row.def" true-value="1" false-value="0" />
</template>
</CustomTable>
</el-col>
</el-row>
</div>
</template>
<script setup lang="ts">
import { queryListService, queryDetailService } from '@/api/liswork/xtwh/xmReqItemVsApi';
import YQSelectTable from '@/components/SelectTable/YQSelectTable/index.vue';
import CustomTable from '@/components/elTable/index.vue'
const formData = ref({
yq: '',
xmdh: ''
})
const dataListLeft = ref([])
const dataListRight = ref([])
const checked = ref(false);
const xmValue = '1';
//退拽属性
const handleColumnDragEnd = (data: any) => {
// 更新列配置
columnsLeft.value = data.columns;
columnsRight.value = data.columns;
}
const tableConfig = ref({
border: true, // 边框
height: '76vh', // 高度
highlightCurrentRow: true, // 高亮当前行
// cellStyle: cellStyleHd
})
const columnsLeft = ref([
{ prop: 'sqxmmc', label: '申请/收费项目名称', visible: true, align: 'center', width: 200 },
{ prop: 'sqxmdh', label: '申请/收费项目代号', visible: true, align: 'center', width: 130 },
]);
const columnsRight = ref([
{ prop: 'xmdh', label: '报告项目', visible: true, align: 'center', width: 300, slot: 'xmdh' },
{ prop: 'tdh', label: '双工代号', visible: true, align: 'center', width: 100, slot: 'tdh' },
{ prop: 'mrz', label: '默认值', visible: true, align: 'center', width: 100, slot: 'mrz' },
{ prop: 'seq', label: '序号', visible: true, align: 'center', width: 100 },
{ prop: 'def', label: '非必做', visible: true, align: 'center', width: 100, slot: 'def' },
]);
// 获取数据列表
const getList = async () => {
const res = await queryListService({ yq: formData.value.yq })
dataListLeft.value = res.data
}
const onClickAdd = () => {
// TODO 新增
}
const onClickDel = () => {
// TODO 删除
}
const onClickSave = () => {
// TODO 保存
}
//点击事件
const rowClickLeft = async (row: any) => {
const res = await queryDetailService({ sqxmdh: row.sqxmdh, sqxmmc: row.sqxmmc, yq: formData.value.yq })
dataListRight.value = res.rows
}
</script>
<style scoped lang="scss"></style>