web_dist/src/views/dictionary/YiBaoKeShiPiPei.vue

<template>
  <div class="layout_container">
    <header>
      <el-tag type="info">
        医保科室匹配
      </el-tag>
      <el-select v-model="piPeiLeiXing" style="width: 120px" @change="queryYuanNeiKeShiChange">
        <el-option key="1" label="未匹配" value="1"></el-option>
        <el-option key="2" label="已匹配" value="2"></el-option>
      </el-select>
      <span>同步查询 &nbsp;</span>
      <el-select style="width: 120px" v-model="tongbu">
        <el-option key="false" label="禁用" :value="false"></el-option>
        <el-option key="true" label="启用" :value="true"></el-option>
      </el-select>&nbsp;
      <el-button @click="chongZhi" type="warning">重置</el-button>
      <el-button @click="keShiPiPeiClick" type="success">匹配</el-button>
    </header>
    <div class="layout_main layout_container layout-horizontal">
      <aside class="layout_el-table layout_flex_1-x">
        <el-tag type="info" effect="dark">本院数据</el-tag>
        <el-divider direction="vertical"></el-divider>
        <span>本院科室名称 &nbsp;&nbsp;</span>
        <el-input style="width: 200px" v-model="benYuanMingCheng"></el-input>
        <el-table :data="cptBenYuan"
                  stripe
                  highlight-current-row
                  @row-click="benYuanRow"
                  style="margin-top: 5px">
          <el-table-column label="本院编码">
            <template #default="scope">
              <el-radio :label="scope.row.code" :value="scope.row.code" v-model="benYuanRadio.code"></el-radio>
            </template>
          </el-table-column>
          <el-table-column label="本院名称" prop="name"></el-table-column>
          <el-table-column label="匹配医保编码" v-if="piPeiLeiXing == 2" prop="siCaty"></el-table-column>
          <el-table-column label="匹配医保名称" prop="siCatyName" v-if="piPeiLeiXing == 2"></el-table-column>
          <el-table-column label="删除匹配" v-if="piPeiLeiXing == 2">
            <template #default="scope">
              <el-popconfirm
                  confirm-button-text="确认"
                  cancel-button-text="取消"
                  icon="Info"
                  iconColor="red"
                  title="是否删除该数据"
                  @confirm="shanChuPiPei(scope.$index, scope.row)"
              >
                <template #reference>
                  <el-button type="danger">删除</el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </aside>
      <div class="layout_main layout_el-table">
        <el-tag type="info" effect="dark">医保数据</el-tag>
        <el-divider direction="vertical"></el-divider>
        <span>医保科室名称 &nbsp;&nbsp;</span>
        <el-input style="width: 200px" v-model="yiBaoMingCheng"></el-input>
        <el-table :data="cptYiBao" stripe highlight-current-row @row-click="yiBaoRow"
                  style="margin-top: 5px">
          <el-table-column label="医保编码">
            <template #default="scope">
              <el-radio :label="scope.row.code" :value="scope.row.code" v-model="yiBaoRadio.code"></el-radio>
            </template>
          </el-table-column>
          <el-table-column label="医保名称" prop="name"></el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script setup>
import {computed, onMounted, ref} from 'vue'
import {getYiBaoKeShi, getBenYuanKeShi, piPeiKeShi} from '@/api/dictionary/yi-bao-ke-shi-pi-pei'
import {ElMessage, ElMessageBox} from 'element-plus'

const tableHeight = window.innerHeight - 75
const benYuanMingCheng = ref('')
const yiBaoMingCheng = ref('')

const piPeiLeiXing = ref('1')

///////////////////////////// 查看匹配还是未匹配 /////////////////////////////////////////////////////
const queryYuanNeiKeShiChange = () => {
  getBenYuanKeShi(piPeiLeiXing.value).then((res) => {
    benYuanKeShiTable.value = res
  })
}

//////////////////////// 处理表格数据 ///////////////////////////////////////////
const benYuanKeShiTable = ref([])
const yiBaoKeShiTable = ref([])

onMounted(() => {
  getYiBaoKeShi().then((res) => {
    yiBaoKeShiTable.value = res
  })

  getBenYuanKeShi(piPeiLeiXing.value).then((res) => {
    benYuanKeShiTable.value = res
  })
})

const cptBenYuan = computed(() => {
  if (tongbu.value) {
    yiBaoMingCheng.value = benYuanMingCheng.value
  }
  return benYuanKeShiTable.value.filter((item) => {
    return item.name.indexOf(benYuanMingCheng.value) > -1
  })
})

const cptYiBao = computed(() => {
  return yiBaoKeShiTable.value.filter((item) => {
    return item.name.indexOf(yiBaoMingCheng.value) > -1
  })
})

// 重置 //
const chongZhi = () => {
  benYuanMingCheng.value = ''
  yiBaoMingCheng.value = ''
  benYuanRadio.value = ''
  yiBaoRadio.value = ''
}
//////////////////////////////// 处理点击表格事件 ////////////////////////////////
const benYuanRadio = ref({})
const yiBaoRadio = ref({})

const benYuanRow = (row) => {
  // 截取开头的两位字符串
  yiBaoMingCheng.value = row.name.substring(0, 2)
  benYuanRadio.value = row
}

const yiBaoRow = (row) => {
  yiBaoRadio.value = row
}

/////////////////////////////////////////// 开始匹配 /////////////////////////////////////////////////
const keShiPiPeiClick = () => {
  if (!benYuanRadio.value || !yiBaoRadio.value) {
    ElMessage.error({
      message: '还有一项未选择',
      showClose: true,
    })
  } else {
    ElMessageBox.confirm(
        '<span>院内：【' +
        benYuanRadio.value.code +
        '】【' +
        benYuanRadio.value.name +
        '】</span></br><span>医保：【' +
        yiBaoRadio.value.code +
        '】【' +
        yiBaoRadio.value.name +
        '】</span>',
        '提示',
        {
          dangerouslyUseHTMLString: true,
          type: 'warning',
        }
    ).then(() => {
      piPeiKeShi(benYuanRadio.value.code, yiBaoRadio.value.code, yiBaoRadio.value.name, 1).then((res) => {
        for (let i = 0; i < benYuanKeShiTable.value.length; i++) {
          if (benYuanKeShiTable.value[i].code === benYuanRadio.value.code) {
            benYuanKeShiTable.value.splice(i, 1)
          }
        }
        chongZhi()
      })
    }).catch((e) => {})
  }
}

const shanChuPiPei = (index, row) => {
  piPeiKeShi(row.code, row.siCaty, row.siCaty,2).then((res) => {
    benYuanKeShiTable.value.splice(index, 1)
  })
}

////////////////判断是否同步 /////////////////////////
const tongbu = ref(false)

</script>

<style>
.match-title {
  padding: 5px 10px;
  background-color: lightslategray;
  font-size: 18px;
  font-weight: bold;
  color: white;
  border-radius: 3px;
  margin-right: 15px;
}
</style>