lis8.0-vue3/src/views/liswork/xtwh/xmFeeInstr/index.vue

<!--仪器收费项目对照-->
<template>
  <div class="app-container">
    <el-row>
      <el-form ref="form" :model="formData" label-width="80px" inline>
        <el-form-item label="仪器" prop="yq">
          <YQSelectTable v-model:data="formData.yq" width="200px" @getDataValue="getList" />
        </el-form-item>
        <el-form-item label="项目检索" prop="item">
          <el-input placeholder="名称，简拼" v-model="formData.item" @change="getList"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onQueryClick">查询</el-button>
        </el-form-item>
        <el-form-item>
          <span class="tips">说明：双击左侧列表，能删除对照数据，双击右边列表能新增数据到对照当中</span>
        </el-form-item>
      </el-form>
    </el-row>
    <el-row :gutter="20" class="table-row">
      <el-col :span="6" class="table-col">
        <CustomTable ref="tableRefLeft" :data="dataListLeft" :columns="columnsLeft" :config="tableConfig"
          @row-dblclick="onDBClickLeft" />
      </el-col>
      <el-col :span="18" class="table-col">
        <CustomTable ref="tableRefRight" :data="dataListRight" :columns="columnsRight" :enable-column-drag="true"
          @column-drag-end="handleColumnDragEnd" :config="tableConfig" @row-dblclick="onDBClickRight" />
      </el-col>
    </el-row>

  </div>


</template>

<script setup lang="ts">
import CustomTable from '@/components/elTable/index.vue'
import YQSelectTable from '@/components/SelectTable/YQSelectTable/index.vue';
import { queryService, queryXmService, addService, delService } from '@/api/liswork/xtwh/xmFeeinstrApi';
import { queryOneService } from '@/api/system/parameter'
import { ElMessage } from 'element-plus';

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

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

const columnsLeft = ref([
  { prop: 'sfxmmc', label: '当前仪器对应的收费项目', visible: true, },
  { prop: 'yq', label: '仪器', visible: false, align: 'center', width: 100 },
]);
const columnsRight = ref([
  { prop: 'xmlb', label: '类别', visible: true, align: 'center', },
  { prop: 'sfxmdh', label: '收费项目代号', visible: true, align: 'center', },
  { prop: 'sfxmmc', label: '收费项目名称', visible: true, align: 'center', },
  { prop: 'dj', label: '单价', visible: true, align: 'center', },
  { prop: 'cp_yq', label: '分配了仪器', visible: true, align: 'center', }
]);

const dataListLeft = ref([])
const dataListRight = ref([])
const formData = ref({
  yq: '46',
  item: ''
})

//刷新数据
const getList = async () => {
  if (!formData.value.yq) formData.value.yq = ''
  let res = await queryService({ yq: formData.value.yq });
  dataListLeft.value = res.data;
  // res = await queryOneService('HISOPT', 'sp_gyxmyljg')
  // let param = res.data.value
  //先写固定值，后面再改
  let param = '1'
  if (param && param !== '') {
    param = '1'
  } else {
    param = '1'
  }
  res = await queryXmService({ yljg: param, yq: formData.value.yq, queryValue: formData.value.item });
  dataListRight.value = res.data;
};

const onDBClickRight = async (row: any) => {
  //新增数据
  await addService({ sfxmdh: row.sfxmdh, yq: formData.value.yq })
  ElMessage.success('新增成功！')
  getList()
}

const onDBClickLeft = async (row: any) => {
  //删除数据
  await delService({ yq: formData.value.yq, sfxmdh: row.sfxmdh })
  ElMessage.success('删除成功！')
  getList()
}

const onQueryClick = () => {
  if (!formData.value.yq) {
    ElMessage.error('请先选择仪器！')
    return
  }
  getList()
}

getList()

</script>

<style scoped lang="scss">
.tips {
  font-family: SourceHanSansCN, SourceHanSansCN;
  font-size: 16px;
  color: #409eff;
  font-weight: 600;
}

.table-row {
  height: calc(100% - 58px);

  .table-col {
    height: 100%;
  }
}
</style>