|
@@ -0,0 +1,228 @@
|
|
|
+<template>
|
|
|
+ <CyDialog
|
|
|
+ title="艾迪康检验项目匹配"
|
|
|
+ body-width="900px"
|
|
|
+ body-height="600px"
|
|
|
+ cancel-text="关闭"
|
|
|
+ confirm-text="执行匹配"
|
|
|
+ :confirm-click="handleClickConfirm"
|
|
|
+ >
|
|
|
+ <div class="layout_container layout-horizontal adicon-item-match">
|
|
|
+ <div class="layout_flex_1-x layout_container layout_el-table">
|
|
|
+ <el-table
|
|
|
+ size="large"
|
|
|
+ :data="checkItems"
|
|
|
+ highlight-current-row
|
|
|
+ @row-click="handleLeftRowClick"
|
|
|
+ >
|
|
|
+ <el-table-column prop="itemCode" label="项目编码" width="100"></el-table-column>
|
|
|
+ <el-table-column label="项目名称">
|
|
|
+ <template #default="{row}">
|
|
|
+ <span class="m-r_8px">
|
|
|
+ {{row.itemName}}
|
|
|
+ </span>
|
|
|
+ <el-icon v-if="row.matchCode" color="green">
|
|
|
+ <Check />
|
|
|
+ </el-icon>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="match-area-box">
|
|
|
+ <div>
|
|
|
+ <div>
|
|
|
+ <el-tag type="success" effect="plain" class="m-b_8px">当前待匹配项目</el-tag>
|
|
|
+ </div>
|
|
|
+ <div class="green-text bold-text">
|
|
|
+ <div class="m-b_8px">
|
|
|
+ {{ currentRow.itemCode }}
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ {{ currentRow.itemName }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-divider class="el-divider_shorter"></el-divider>
|
|
|
+ <div>
|
|
|
+ <el-tag type="primary" effect="plain" class="m-b_8px">当前已选择项目</el-tag>
|
|
|
+ </div>
|
|
|
+ <div class="blue-text bold-text">
|
|
|
+ <div class="m-b_8px">
|
|
|
+ {{ currentRow.matchCode }}
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ {{ currentRow.matchName }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="layout_flex_1-x layout_container">
|
|
|
+ <el-input
|
|
|
+ size="large"
|
|
|
+ prefix-icon="Search"
|
|
|
+ v-model="matchItemInput"
|
|
|
+ placeholder="输入 编码/名称 进行检索"
|
|
|
+ clearable
|
|
|
+ ></el-input>
|
|
|
+ <div class="layout_main layout_el-table">
|
|
|
+ <el-auto-resizer>
|
|
|
+ <template #default="{height,width}">
|
|
|
+ <el-table-v2
|
|
|
+ size="large"
|
|
|
+ :data="cptZdItems"
|
|
|
+ :columns="columns"
|
|
|
+ :width="width"
|
|
|
+ :height="height"
|
|
|
+ :row-event-handlers="tableV2RowEvent"
|
|
|
+ >
|
|
|
+ <template v-if="disableRightTable" #overlay>
|
|
|
+ <div class="loading-mask">
|
|
|
+ <span>
|
|
|
+ 请先从左侧列表选择待匹配项目
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-v2>
|
|
|
+ </template>
|
|
|
+ </el-auto-resizer>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </CyDialog>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import CyDialog from "@/components/cy/dialog/src/CyDialog.vue";
|
|
|
+import {executeMatch, getZdItems} from "@/api/inspections/adicon";
|
|
|
+import {xcMessage} from "@/utils/xiaochan-element-plus";
|
|
|
+import {clone} from "xe-utils";
|
|
|
+import {Check} from "@element-plus/icons-vue";
|
|
|
+
|
|
|
+const props = defineProps({
|
|
|
+ rawItems: {
|
|
|
+ type: Array,
|
|
|
+ required: true
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+const checkItems = ref(clone(props.rawItems))
|
|
|
+
|
|
|
+const currentRow = ref({})
|
|
|
+function handleLeftRowClick(row) {
|
|
|
+ currentRow.value = row
|
|
|
+}
|
|
|
+
|
|
|
+const disableRightTable = computed(() => {
|
|
|
+ return currentRow.value.itemCode === null
|
|
|
+ || currentRow.value.itemCode === undefined
|
|
|
+ || currentRow.value.itemCode === ''
|
|
|
+})
|
|
|
+
|
|
|
+const allZdItems = ref([])
|
|
|
+const matchItemInput = ref('')
|
|
|
+
|
|
|
+const cptZdItems = computed(() => {
|
|
|
+ return allZdItems.value.filter(item => {
|
|
|
+ return item.itemName.indexOf(matchItemInput.value) !== -1
|
|
|
+ || item.itemCode.indexOf(matchItemInput.value) !== -1
|
|
|
+ })
|
|
|
+})
|
|
|
+
|
|
|
+function handleRightRowClick(row) {
|
|
|
+ currentRow.value.matchCode = row.itemCode
|
|
|
+ currentRow.value.matchName = row.itemName
|
|
|
+}
|
|
|
+
|
|
|
+const tableV2RowEvent = {
|
|
|
+ 'onClick': (row) => {
|
|
|
+ handleRightRowClick(row.rowData)
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+function handleClickConfirm(next) {
|
|
|
+ // todo 执行匹配,并判断是否有没匹配的项目
|
|
|
+ executeMatch(checkItems.value).then(res => {
|
|
|
+ if (res.length === 0) {
|
|
|
+ next()
|
|
|
+ } else {
|
|
|
+ xcMessage.error('有未匹配的项目')
|
|
|
+ checkItems.value = res
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+const columns = [
|
|
|
+ {
|
|
|
+ key: 'itemCode',
|
|
|
+ dataKey: 'itemCode',
|
|
|
+ title: '项目编码',
|
|
|
+ width: 100,
|
|
|
+ color: 'black'
|
|
|
+ }, {
|
|
|
+ key: 'itemName',
|
|
|
+ dataKey: 'itemName',
|
|
|
+ title: '项目名称',
|
|
|
+ }
|
|
|
+]
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ getZdItems().then(res => {
|
|
|
+ allZdItems.value = res
|
|
|
+ })
|
|
|
+})
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+.adicon-item-match {
|
|
|
+ .loading-mask {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
+ background-color: rgba(0, 0, 0, .7);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ > span {
|
|
|
+ color: #349aff;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ border-radius: 4px;
|
|
|
+ padding: 8px 12px;
|
|
|
+ background-color: #303030;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .match-area-box {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ width: 200px;
|
|
|
+ background-color: #f3faff;
|
|
|
+
|
|
|
+ > div {
|
|
|
+ margin-top: -100px;
|
|
|
+
|
|
|
+ > div {
|
|
|
+ text-align: center;
|
|
|
+ padding: 4px;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .green-text {
|
|
|
+ color: green;
|
|
|
+ }
|
|
|
+
|
|
|
+ .blue-text {
|
|
|
+ color: blue;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bold-text {
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|