117 lines
4.0 KiB
Vue
117 lines
4.0 KiB
Vue
<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>
|