web_dist/src/views/dictionary/orderZdMaintain/compoents/orderitem/OrderIten.vue

<script setup lang="ts">
import * as api from "@/api/orderZdMaintain";
import CyComboGrid from "@/components/cy/combo-grid/src/CyComboGrid.vue";
import { listFilter } from "@/utils/list-utlis";
import { useDialog } from "@/components/cy/CyDialog/index";
import { xcMessage } from "@/utils/xiaochan-element-plus";

const EditorDialog = defineAsyncComponent(() => import("./EditorDialog.vue"));

const operations = [
  { code: "p", name: "手术" },
  { code: "x", name: "材料" },
  { code: "o", name: "其他" },
  { code: "s", name: "输血" },
];

const store = reactive({
  // 项目属性
  changeItemType: [],
  // 手术分类
  ssType: [],
  currentOrderChange: {
    orderCode: null,
  },
  orderItem: [],
  searchValue: "",
  flag: "0",
  mainTableLoading: false,

  // 这个费用的子项
  changeItem: [],

  // 搜索到的数据
  searchChangeData: [],
});

const tableRef = shallowRef();

const dataTmp = computed(() => {
  if (store.searchValue === "") {
    return store.orderItem;
  }

  return listFilter(store.orderItem, store.searchValue, [
    "orderName",
    "orderCode",
    "pyCode",
    "wCode",
  ]);
});

async function handleRadioChange() {
  store.mainTableLoading = true;
  store.orderItem = await api
    .getOrderItem(store.flag)
    .finally(() => (store.mainTableLoading = false));
}

function checkBoxValue(value) {
  return value === "1";
}

function getChangeItem({ row }) {
  api.getChangeItem(row.orderCode).then(data => {
    store.changeItem = data;
    store.currentOrderChange = row;
  });
}

async function searchChangeItemMethod(value) {
  store.searchChangeData = await api.searchChangeItem(value);
}

function openAddEditorDialog() {
  openEditorDialog({
    orderCode: null,
    orderName: "",
    orderClass: null,
    operation: null,
    delFlag: "0",
    excluGroupType: "0",
    qjFlag: "0",
    frequType: "0",
    ypFlag: "0",
    jyType: "0",
    execDept: "",
    ssType: null,
    discription: "",
    ybComment: "",
    nCode: "",
  }).then(res => {
    store.orderItem.push(res);
  });
}

function openEditorDialog(data) {
  return useDialog(EditorDialog, {
    dialogProps: {
      title: "医嘱编辑",
    },
    params: {
      data: data,
      changeType: store.changeItemType,
      ssType: store.ssType,
      operations,
    },
    confirmText: "保存",
  })
    .then(res => {
      Object.assign(data, res);
      return res;
    })
    .catch(() => {});
}

function findOperationName(value) {
  const find = operations.find(v => v.code === value);
  return find ? find.name : "";
}

async function handleDelFlag(data, value) {
  const delFlag = value ? "1" : "0";
  await api.setDelFlag({
    orderCode: data.orderCode,
    delFlag: delFlag,
  });
  data.delFlag = delFlag;
}

async function saveChangeItemDetails() {
  if (store.currentOrderChange.orderCode == null) return 0;

  const tmp = store.changeItem.filter(item => {
    return item.occCode !== null;
  });
  await api.saveOrderOccurence({
    orderCode: store.currentOrderChange.orderCode,
    orderItem: tmp,
  });
}

function addChangeItemDetails() {
  if (store.currentOrderChange.orderCode == null) {
    xcMessage.error("请先选着医嘱项目");
    return 0;
  }
  store.changeItem.push({
    occCode: null,
    name: "",
    amount: 1,
    price: 0,
    orderCode: "",
    isAdd: true,
  });
}

function handleChangeItemRowClick(row, data) {
  data.isUpdate = true;
  data.occCode = row.code;
  data.name = row.name;
  data.amount = 1;
  data.price = row.price;
  data.orderCode = store.currentOrderChange.orderCode;
}

onMounted(async () => {
  store.changeItemType = await api.getChangeItemType();
  store.ssType = await api.getSsType();
  handleRadioChange();
});
</script>

<template>
  <div class="layout_container">
    <header>
      <el-input v-model="store.searchValue" style="width: 220px" clearable />
      <el-radio-group v-model="store.flag" @change="handleRadioChange">
        <el-radio value="0">在用</el-radio>
        <el-radio value="1">停用</el-radio>
        <el-radio value="all">全部</el-radio>
      </el-radio-group>
    </header>
    <div class="layout_main">
      <vxe-table
        border
        ref="tableRef"
        :row-config="{
          keyField: 'orderCode',
          isCurrent: true,
        }"
        show-overflow
        @cellClick="getChangeItem"
        height="60%"
        :edit-config="{ mode: 'row', trigger: 'manual', autoClear: false }"
        :data="dataTmp"
        :scroll-y="{ enabled: true, gt: 0 }"
      >
        <vxe-column field="delFlag" title="停用" width="60">
          <template #default="{ row }">
            <el-checkbox
              :modelValue="checkBoxValue(row.delFlag)"
              @update:modelValue="
                value => {
                  handleDelFlag(row, value);
                }
              "
            />
          </template>
        </vxe-column>
        <vxe-column field="orderClassName" title="属性" width="120">
        </vxe-column>
        <vxe-column field="orderCode" title="编码" width="120" />
        <vxe-column field="orderName" title="名称" width="190" />
        <vxe-column field="excluGroupType" title="排斥" width="60">
          <template #default="{ row }">
            {{ row.excluGroupType === "1" ? "是" : "否" }}
          </template>
        </vxe-column>
        <vxe-column title="描述" width="220" field="discription"></vxe-column>
        <vxe-column title="医嘱类型" width="90" field="operation">
          <template #default="{ row }">
            {{ findOperationName(row.operation) }}
          </template>
        </vxe-column>

        <vxe-column field="qjFlag" title="抢救" width="60">
          <template #default="{ row }">
            {{ row.qjFlag === "1" ? "是" : "否" }}
          </template>
        </vxe-column>

        <vxe-column field="frequType" title="长期" width="60">
          <template #default="{ row }">
            {{ row.frequType === "1" ? "是" : "否" }}
          </template>
        </vxe-column>

        <vxe-column field="ypFlag" title="药品" width="60">
          <template #default="{ row }">
            {{ row.ypFlag === "1" ? "是" : "否" }}
          </template>
        </vxe-column>

        <vxe-column field="jyType" title="检验" width="60">
          <template #default="{ row }">
            {{ row.jyType === "1" ? "是" : "否" }}
          </template>
        </vxe-column>
        <vxe-column field="jyTypeName" title="检验" width="90" />
        <vxe-column title="执行科室" width="150" field="execDeptName" />
        <vxe-column title="医保备注" field="ybComment" width="220" />
        <vxe-column title="操作" width="90" fixed="right">
          <template #header>
            <el-button @click="openAddEditorDialog"> 新增</el-button>
          </template>
          <template #default="{ row }">
            <el-button @click.stop.prevent="openEditorDialog(row)"
              >编辑
            </el-button>
          </template>
        </vxe-column>
      </vxe-table>

      <vxe-table height="40%" :data="store.changeItem">
        <vxe-column title="名称" field="occCode" width="120"></vxe-column>
        <vxe-column title="项目编码" field="name" width="250">
          <template #default="scope">
            <CyComboGrid
              style="width: 100%"
              v-model="scope.row"
              placement="top-start"
              @rowClick="
                ({ row }) => {
                  handleChangeItemRowClick(row, scope.row);
                }
              "
              label="name"
              :data="store.searchChangeData"
              value="occCode"
              :remote-method="searchChangeItemMethod"
              :table-header="[
                { name: '项目编码', code: 'code', width: '90px' },
                { name: '名字', code: 'name', width: '250px' },
                { name: '单价', code: 'price', width: '120px' },
                { name: '执行科室', code: 'execDeptName', width: '90px' },
              ]"
            />
          </template>
        </vxe-column>
        <vxe-column title="数量" field="amount">
          <template #default="{ row }">
            <el-input-number
              v-model="row.amount"
              @change="
                () => {
                  row.isUpdate = true;
                }
              "
            />
          </template>
        </vxe-column>
        <vxe-column title="金额" field="price" />
        <vxe-column title="医嘱码" field="orderCode" />
        <vxe-column>
          <template #header>
            <el-button v-el-btn="saveChangeItemDetails">保存</el-button>
            <el-button @click="addChangeItemDetails">新增子项</el-button>
          </template>
          <template #default="{ rowIndex }">
            <el-button
              @click="store.changeItem.splice(rowIndex, 1)"
              type="danger"
              >删除
            </el-button>
          </template>
        </vxe-column>
      </vxe-table>
    </div>
  </div>
</template>