thridLargeScreen/src/views/schemeLibrary/checkitemLibrary.vue

<template>
  <div class="page-channel p-6">
    <div class="h-full w-full flex">
      <div class="mr-2">
        <el-card shadow="never" class="h-full">
          <template #header>
            <div class="flex items-center justify-between">
              <div class="flex items-center">
                <el-input
                  v-model.trim="query.name"
                  clearable
                  placeholder="输入机构名称进行搜索"
                />
                <el-button
                  type="primary"
                  class="ml-2"
                  @click="onSearch"
                  :icon="Search"
                  >搜索</el-button
                >
              </div>
              <el-button
                type="primary"
                :icon="Plus"
                class="ml-2"
                @click="
                  editVisible = true;
                  editForm = {
                    id: undefined,
                    name: '',
                    comment: ''
                  };
                "
                >新增</el-button
              >
            </div>
          </template>
          <div>
            <el-table
              :data="state.list"
              class="w-full"
              :show-header="false"
              max-height="85vh"
              @row-click="editRow"
            >
              <el-table-column prop="name" label="姓名">
                <template #default="{ row }">
                  <div
                    class="p-2 hover:bg-gray-50 cursor-pointer rounded"
                    :class="{
                      'bg-gray-10 border-r-4 border-blue-500':
                        currentValue?.id == row.id
                    }"
                  >
                    <h3>{{ row.name }}</h3>
                    <el-text>备注：{{ row.comment }}</el-text> <br />
                    <el-text>最后更新时间：{{ row.updatedAt }}</el-text>
                  </div>
                </template>
              </el-table-column>
            </el-table>

            <el-pagination
              background
              class="justify-end mt-4"
              layout="total, prev, pager, next"
              :page-size="10"
              :total="state.total"
              @change="handleCurrentChange"
            />
          </div>
        </el-card>
      </div>
      <div class="flex-1 h-full">
        <div v-if="currentValue?.id" class="h-full flex flex-col bg-white">
          <div class="p-4 border-b border-solid border-gray-200">
            <div class="flex items-center justify-between">
              <div>
                <h4>{{ currentValue.name }}</h4>
                <el-text>使用范围：{{ currentValue.comment }}</el-text>
              </div>
              <div class="ml-8">
                <el-button type="primary" :icon="Edit" link @click="handleEdit"
                  >编辑</el-button
                >
                <el-popconfirm
                  title="确定要删除这个机构吗？"
                  width="300"
                  @confirm="handleDelete"
                >
                  <template #reference>
                    <el-button type="danger" :icon="Delete" link
                      >删除</el-button
                    >
                  </template>
                </el-popconfirm>
              </div>
            </div>
          </div>
          <div class="flex-1 p-4 overflow-y-auto">
            <div class="flex items-center">
              <el-button type="primary" @click="showEditCheckItem(null)"
                >新增检查项目</el-button
              >
              <div class="flex flex-1 justify-end">
                <el-input
                  v-model="checkItem.query.name"
                  class="w-64"
                  placeholder="请输入检查项目名称"
                  clearable
                  @keyup.enter="
                    checkItem.query.page = 1;
                    getCheckItemList();
                  "
                />
                <el-button
                  type="primary"
                  class="ml-2"
                  @click="
                    checkItem.query.page = 1;
                    getCheckItemList();
                  "
                  >搜索</el-button
                >
              </div>
            </div>
            <el-table
              :data="checkItem.list"
              border
              class="mt-4"
              v-loading="checkItem.loading"
              element-loading-text="加载中..."
            >
              <el-table-column label="检查项目名称" prop="name" />
              <el-table-column label="检查项目类型">
                <template #default="{ row }">
                  {{ ["检验", "检查"][row.type - 1] }}
                </template>
              </el-table-column>
              <el-table-column label="检查内容">
                <template #default="{ row }">
                  <div>
                    {{ row.checkItems.map(v => v.name).join() }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="200">
                <template #default="{ row }">
                  <el-button
                    type="primary"
                    :icon="Edit"
                    link
                    @click="showEditCheckItem(row)"
                    >编辑</el-button
                  >
                  <el-popconfirm
                    title="确定要删除这个检查项目吗？"
                    width="300"
                    @confirm="handleDeleteCheckItem(row)"
                  >
                    <template #reference>
                      <el-button type="danger" :icon="Delete" link
                        >删除</el-button
                      >
                    </template>
                  </el-popconfirm>
                </template>
              </el-table-column></el-table
            >

            <el-pagination
              background
              class="justify-end mt-4"
              layout="total, prev, pager, next"
              v-model:current-page="checkItem.query.page"
              :total="checkItem.total"
              @current-change="
                p => {
                  checkItem.query.page = p;
                  getCheckItemList();
                }
              "
            />
          </div>
        </div>
        <el-card shadow="never" class="h-full" v-else>
          <div>
            <el-empty />
          </div>
        </el-card>
      </div>
    </div>

    <el-dialog title="检查机构管理" v-model="editVisible">
      <div>
        <el-form ref="formRef" :model="editForm" label-width="120px">
          <el-form-item
            label="检查机构名称："
            prop="name"
            :rules="[
              {
                required: true,
                message: '请输入机构名称',
                trigger: 'blur'
              }
            ]"
          >
            <el-input
              v-model="editForm.name"
              placeholder="请输入机构名称"
              clearable
            />
          </el-form-item>
          <el-form-item label="备注：" prop="comment">
            <el-input
              v-model="editForm.comment"
              placeholder="请输入备注"
              clearable
            />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div>
          <el-button @click="editVisible = false">取 消</el-button>
          <el-button type="primary" @click="saveEditTemplate">保 存</el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog
      v-model="editCheckItem.visible"
      title="检查项目编辑"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      destroy-on-close
      width="80%"
    >
      <el-form>
        <el-form-item label="检查项目名称">
          <el-input v-model="editCheckItem.row.name" />
        </el-form-item>
        <el-form-item label="系统体检项目">
          <el-select
            v-model="editCheckItem.row.systemCheck"
            placeholder="请选择"
            filterable
          >
            <el-option
              v-for="item in editCheckItem.systemCheckList"
              :key="item.id"
              :label="item.label"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="检查项目类型">
          <el-select v-model="editCheckItem.row.type" placeholder="请选择">
            <el-option label="检验" :value="1" />
            <el-option label="检查" :value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="检查内容">
          <el-button
            type="primary"
            plain
            :icon="Plus"
            @click="
              state.massAddvisible = true;
              state.content = '';
            "
            >批量添加</el-button
          >
        </el-form-item>
      </el-form>
      <el-table :data="editCheckItem.row.checkItems">
        <el-table-column
          :label="editCheckItem.row.type == 1 ? '检验项目名称' : '检验项目名称'"
        >
          <template #default="{ row }">
            <el-input v-model="row.name" placeholder="请输入" />
          </template>
        </el-table-column>
        <template v-if="editCheckItem.row.type == 1">
          <el-table-column label="单位">
            <template #default="{ row }">
              <el-input v-model="row.unit" placeholder="请输入" />
            </template>
          </el-table-column>
          <el-table-column label="参考范围">
            <template #default="{ row }">
              <el-input v-model="row.scope" placeholder="请输入" /> </template
          ></el-table-column>
        </template>

        <el-table-column label="排序">
          <template #default="{ row }">
            <el-input v-model.number="row.sort" placeholder="请输入" />
          </template>
        </el-table-column>

        <el-table-column
          v-for="(col, colIdx) in editCheckItem.row.type == 1
            ? ['系统身体物质/部位', '系统检查项目']
            : ['系统检查项目', '系统身体物质/部位']"
          :label="col"
        >
          <template #default="{ row, $index }">
            <template v-if="col == '系统身体物质/部位'">
              <el-select
                v-model="row.node"
                :disabled="editCheckItem.row.type == 2 && !row.matchProject"
                placeholder="请输入搜索后选择"
                filterable
                clearable
                collapse-tags
                remote
                :class="{
                  'no-match': !row.node
                }"
                :multiple="editCheckItem.row.type == 2"
                :remote-method="
                  query =>
                    editCheckItem.row.type == 1 && searchBodyNodes(query, row)
                "
                @change="matchNodeChange(row)"
                @clear="matchNodeClear(row)"
              >
                <el-option
                  v-for="(project, projectIdx) in row.nodes"
                  :key="project.id"
                  :label="project.label"
                  :value="project.id"
                  class="h-auto"
                >
                  <div class="">
                    <div>{{ project.label }}</div>
                    <div v-if="project.matched" class="text-gray-500 text-xs">
                      匹配名称：{{ project.matched }}
                    </div>
                  </div>
                </el-option>
              </el-select>
            </template>
            <template v-else>
              <el-select
                v-model="row.matchProject"
                :disabled="editCheckItem.row.type == 1 && !row.nodes.length"
                placeholder="请输入搜索后选择"
                filterable
                clearable
                remote
                :class="{
                  'no-match': !row.matchProject
                }"
                :remote-method="query => searchOcrIndicator(query, row)"
                @change="matchProjectChange(row)"
                @clear="matchProjectClear(row)"
              >
                <el-option
                  v-for="(project, projectIdx) in row.indicators"
                  :key="project.id"
                  :label="project.label"
                  :value="project.id"
                  class="h-auto"
                >
                  <div class="">
                    <div>{{ project.label }}</div>
                    <div v-if="project.matched" class="text-gray-500 text-xs">
                      匹配名称：{{ project.matched }}
                    </div>
                  </div>
                </el-option>
              </el-select>
            </template>
          </template></el-table-column
        >

        <el-table-column label="操作">
          <template #default="{ row, $index }">
            <el-button
              type="danger"
              link
              @click="editCheckItem.row.checkItems.splice($index, 1)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div>
        <el-button
          type="primary"
          link
          class="mt-2"
          @click="addEditCheckItemLine"
        >
          + 新增一行</el-button
        >
      </div>
      <template #footer>
        <el-button type="primary" @click="saveEditCheckItem">保存</el-button>
      </template>
    </el-dialog>
    <el-dialog title="" v-model="state.massAddvisible" width="50%">
      <div>
        <el-input
          type="textarea"
          v-model="state.content"
          :rows="18"
          placeholder="输入检查内容，多个检查内容之间用中文输入法下的分号或顿号区隔"
        />
      </div>
      <template #footer>
        <el-button @click="state.massAddvisible = false">取 消</el-button>
        <el-button type="primary" @click="handleMassAddContent"
          >确 定</el-button
        >
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref, reactive } from "vue";
import { Search, Plus, Edit, Delete } from "@element-plus/icons-vue";

import { request, unique } from "@/utils";
import { ElMessage } from "element-plus";

const state = reactive({
  visible: false,
  list: [],
  total: 0,
  rowData: {},
  content: "",
  massAddvisible: false
});
const query = reactive({
  title: "",
  page: 1
});

const onSearch = () => {
  query.page = 1;
  getList();
};
const getList = async () => {
  const { data } = await request.get(
    "dataService/schemeManage/medicalCheck/hospital/paginate",
    { params: query }
  );
  state.list = data.list;
  state.total = data.total;
  if (query.page == 1 && data.list[0]) {
    editRow(data.list[0]);
  }
};
const handleCurrentChange = page => {
  query.page = page;
  getList();
};
const handleDelete = async () => {
  const { message } = await request.post(
    `dataService/schemeManage/medicalCheck/hospital/delete`,
    {
      id: currentValue.value.id
    }
  );
  ElMessage.success(message);
  getList();
};
getList();

const editRow = row => {
  currentValue.value = row;
  checkItem.query.hospitalId = row.id;
  getCheckItemList();
};
const editForm = ref({
  id: "",
  name: "",
  comment: ""
});
const editVisible = ref(false);
const currentValue = ref({
  id: ""
});

const handleEdit = () => {
  editForm.value = currentValue.value;
  editVisible.value = true;
};
const saveEditTemplate = async () => {
  const { message } = await request.post(
    `dataService/schemeManage/medicalCheck/hospital${
      editForm.value.id ? "/update" : ""
    }`,
    editForm.value
  );
  ElMessage.success(message);
  editVisible.value = false;
  if (!editForm.value.id) {
    onSearch();
  }
  getList();
};

const checkItem = reactive({
  query: {
    hospitalId: "",
    name: "",
    page: 1
  },
  list: [],
  total: 0,
  rowData: {}
});
const editCheckItem = reactive({
  visible: false,
  systemCheckList: [],
  row: {
    id: undefined,
    name: "",
    systemCheck: "",
    type: 1,
    checkItems: []
  }
});

const relatedRelationship = ["异常属于", "可检测"];
const getCheckItemList = async () => {
  const { data } = await request.get(
    "dataService/schemeManage/medicalCheck/item/paginate",
    { params: checkItem.query }
  );
  checkItem.list = data.list || [];
  checkItem.total = data.total;
};
const showEditCheckItem = async row => {
  if (row) {
    editCheckItem.row = row;
  } else {
    editCheckItem.row = {
      id: undefined,
      name: "",
      systemCheck: "",
      type: 1,
      checkItems: []
    };
  }
  editCheckItem.visible = true;
  editCheckItem.systemCheckList = await getNodes({
    tag: "体检项目"
  });
};
const getNodes = async (query = {}) => {
  const { data } = await request.get(`/graphService/open/node/paginate`, {
    params: {
      page: 1,
      pageSize: 9999,
      ...query
    }
  });
  return (data.list || [])
    .map(v => {
      return {
        id: v.id,
        label: v.properties.name
      };
    })
    .sort((a, b) => a.label?.length - b.label?.length);
};

const addEditCheckItemLine = () => {
  editCheckItem.row.checkItems.push({
    name: "",
    unit: "",
    scope: "",
    sort: "",
    node: "",
    nodes: [],
    matchProject: [],
    indicators: []
  });
};
const deleteEditCheckItemLine = index => {
  editCheckItem.row.checkItems.splice(index, 1);
};
const saveEditCheckItem = async () => {
  console.log(editCheckItem);
  // return
  const { message } = await request.post(
    `dataService/schemeManage/medicalCheck/item${
      editCheckItem.row.id ? "/update" : ""
    }`,
    {
      ...editCheckItem.row,
      hospitalId: checkItem.query.hospitalId
    }
  );
  ElMessage.success(message);
  editCheckItem.visible = false;
  getCheckItemList();
};
const handleDeleteCheckItem = async row => {
  const { message } = await request.post(
    `dataService/schemeManage/medicalCheck/item/delete`,
    {
      id: row.id,
      hospitalId: checkItem.query.hospitalId
    }
  );
  ElMessage.success(message);
  getCheckItemList();
};

const searchRelateNodes = async (id, relationship, query = {}) => {
  const { data } = await request.get(`/graphService/open/node/related`, {
    params: { id, relationship: relatedRelationship[relationship], ...query }
  });
  return (data || [])
    .map(v => {
      return {
        id: v.id,
        label: v.properties.name
      };
    })
    .sort((a, b) => a.label?.length - b.label?.length);
};
const searchBodyNodes = async (key, row) => {
  if (!key) return;
  const nodes =
    (await getNodes({
      name: key,
      tag: "身体物质/部位"
    })) || [];
  const dataIds = nodes.map(v => v.id);
  console.log(row);
  const findItem = row.nodes.find(v => v.id == row.node);
  row.nodes =
    findItem && !dataIds.includes(findItem.id) ? [findItem, ...nodes] : nodes;
};
const matchNodeChange = async row => {
  console.log(row);
  // console.log(item, row, item.nodes[rowIdx]);
  const appendChildren = [];
  if (editCheckItem.row.type == 1) {
    const curNode = row.nodes.find(v => row.node == v.id);
    const projects = await searchRelateNodes(row.node, 1);
    row.matchProject = "";
    row.indicators = projects;
  }
  if (editCheckItem.row.type == 2) {
    const curNodes = row.node.filter(v => {
      const curNode = row.nodes.find(v2 => v == v2.id);
      return (
        curNode.properties["类型编号"] &&
        Number(curNode.properties["类型编号"][0]) == 0
      );
    });
    console.log(curNodes);
    if (curNodes?.length) {
      const data = await searchRelateNodes(curNodes.join(","), 0);
      data.length &&
        appendChildren.push({
          id: row.node,
          abnormal: data
        });
    }
  }
};
const matchNodeClear = row => {
  if (editCheckItem.row.type == 1) {
    row.nodes = [];
    row.matchProject = "";
    row.indicators = [];
  }
};
const searchOcrIndicator = async (key, row) => {
  if (!key) return;
  const nodes =
    (await getNodes({
      name: key,
      tag: "医学检查项目"
    })) || [];
  const dataIds = nodes.map(v => v.id);
  const findItem = row.indicators.find(v => v.id == row.matchProject);
  row.indicators =
    findItem && !dataIds.includes(findItem.id) ? [findItem, ...nodes] : nodes;
};
const matchProjectChange = async row => {
  if (editCheckItem.row.type == 2) {
    console.log(row);
    const nodes = await searchRelateNodes(row.matchProject, 1);
    row.node = [];
    row.nodes = nodes;
  }
};
const matchProjectClear = (item, rowIdx) => {
  if (editCheckItem.row.type == 2) {
    row.node = [];
    row.nodes = [];
    row.matchProject = "";
    row.indicators = [];
  }
};
const handleMassAddContent = () => {
  try {
    const contentArray = state.content
      .replaceAll(";", "、")
      .split("、")
      .filter(v => v);

    const array = [];
    contentArray.map(v => {
      array.push({
        name: v,
        unit: "",
        scope: "",
        sort: "",
        node: "",
        nodes: [],
        matchProject: [],
        indicators: []
      });
    });
    // 去重
    editCheckItem.row.checkItems = unique(
      [...editCheckItem.row.checkItems, ...array],
      "name"
    );
  } catch (error) {
    ElMessage.error(error);
  } finally {
    state.massAddvisible = false;
  }
};
</script>
<style lang="scss">
.el-scrollbar__view {
  height: 100%;
  .main-content.page-channel {
    height: 100%;
    margin: 0;
  }
}
::v-deep {
  .el-card__header {
    height: 74px;
  }
  .el-table .el-table__body tr:hover > td {
    background-color: transparent;
  }
}
</style>