vue3+TS+pinia+解构分层实现渲染增删改查

天下秦风101

已于 2023-07-24 16:45:32 修改

阅读量885

点赞数

文章标签： vue typescript

于 2023-05-16 17:22:07 首次发布

本文链接：https://blog.csdn.net/2201_75522570/article/details/130710066

版权

体检项管理页面(view):

<template>
  <div id="box">
<!-- 页面抬头 -->
    <div
      style="
        font-size: 16px;
        margin: 0 0 10px 0;
        background-color: white;
        height: 40px;
        display: flex;
        align-items: center;
      "
    >
      <span style="margin: 10px">体检项管理</span>
    </div>
    <div class="BigBox">
      <div class="header">
        <h5 style="margin-left: 20px">数据筛选</h5>
      </div>
 <!-- 头部查询功能区 -->
      <div class="navigation">
        <el-row :model="findListList">
          <el-col :span="5">
            <el-form-item label="输入查询：">
              <el-input placeholder="项目ID或者项目名称" v-model="findListList.input"/>
            </el-form-item>
          </el-col>

          <el-col :span="10">
            <el-form-item label="选择地区">
              <el-select
                placeholder="四川省"
                style="width: 100px"
                v-model="findListList.provenceName"
              >
                <el-option label="四川省" value="四川省" />
                <el-option label="福建省" value="福建省" />
                <el-option label="湖南省" value="湖南省" />
                <el-option label="浙江省" value="浙江省" />
              </el-select>
              <el-select
                placeholder="成都市"
                style="width: 100px"
                v-model="findListList.cityName"
              >
                <el-option label="成都市" value="成都市" />
                <el-option label="雅安市" value="雅安市" />
                <el-option label="绵阳市" value="绵阳市" />
                <el-option label="福州市" value="福州市" />
                <el-option label="南平市" value="南平市" />
                <el-option label="漳州市" value="漳州市" />
                <el-option label="厦门市" value="厦门市" />
                <el-option label="长沙市" value="长沙市" />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="5">
            <el-form-item label="选择机构">
              <el-select placeholder="华西医院">
                <el-option label="华西医院" value="huaXi" />
                <el-option label="省人民医院" value="shengRenMin" />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="4">
            <el-button type="primary" @click="phyItemFindListVue">查询</el-button>
            <el-button>重置</el-button>
          </el-col>
        </el-row>
      </div>
    </div>
    <div
      class="BigBox"
      style="height: 50px; display: flex; align-items: center"
    >
      <div style="margin-left: 10px">
        <el-button @click="deleteModel = true">批量删除</el-button>
        <el-button @click="openAddPage">添加</el-button>
        <el-button>导入</el-button>
      </div>
    </div>
<!-- 页面数据渲染区 -->
    <div class="BigBox">
      <!-- data绑定的需要是一个数组才行，可以直接绑定pinia的状态 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="selection" width="55" />

        <el-table-column label="项目ID" width="120" align="center">
          <template #default="scope">{{ scope.row.itemsId }}</template>
        </el-table-column>

        <el-table-column
          property="itemsName"
          label="项目名称"
          width="120"
          align="center"
        />
        <el-table-column property="originalPrice" label="原价" align="center" />

        <el-table-column property="sellingPrice" label="售价" align="center" />

        <el-table-column property="cityName" label="适用地区" align="center" />

        <el-table-column property="enable" label="是否启用" align="center">
          <template #default="scope">
            <!-- <span>{{ scope.row.enable == 1 ? "启用" : "禁用" }}</span> -->
            <span v-if="scope.row.enable == 1">启用</span>
            <span v-else>禁用</span>
          </template>
        </el-table-column>

        <el-table-column
          property="orderQuantity"
          label="订购数量"
          align="center"
        />

        <el-table-column label="操作" width="200" align="center">
          <template #default="scope">
            <el-button
              text
              style="color: #1abc9c"
              @click="danFind(scope.row.itemsId)"
              >编辑</el-button
            >
            <el-button
              text
              style="color: #1abc9c"
              @click="
                deleteModel = true;
                open(scope.row.itemsId);
              "
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
<!-- 页面渲染分页区 -->
    <div class="demo-pagination-block">
      <el-pagination
        v-model:page-num="pageNum"
        v-model:page-size="PageSize"
        :page-sizes="[1, 2, 3, 4]"
        :total="20"
      />
    </div>

    <!-- 添加模态框 -->
    <el-dialog
      v-model="dialogFormVisible"
      title="新增体检套餐"
      style="
        background-color: #f2f2f2;
        font-size: 18px;
        font-weight: 600;
        width: 1200px;
      "
    >
      <el-form style="background-color: white" :model="addForm">
        <el-div class="cardBox">
          <el-div class="cardBoxLift">
            <el-form-item
              label="体检项名称:"
              class="souShuo"
              style="display: flex; margin-top: 10px"
              prop="itemsName"
            >
              <el-input
                placeholder="请输入体检项名称"
                v-model="addForm.itemsName"
              />
            </el-form-item>

            <el-form-item
              label="体检项ID:"
              class="souShuo"
              style="margin-top: 10px"
              prop="itemsId"
            >
              <el-input disabled v-model="objId" placeholder="系统自动生成" />
              <el-input
                placeholder="请输入系统生成ID"
                v-model="addForm.itemsId"
              />
            </el-form-item>

            <el-form-item
              label="是否启用:"
              prop="enable"
              style="margin-top: 10px"
            >
              <el-switch v-model="addForm.enable" />
            </el-form-item>

            <el-form-item label="适用标签:" style="margin-top: 10px">
              <el-select
                placeholder="女性套餐"
                style="width: 200px"
                v-model="addForm.labelId"
              >
                <el-option label="男性项目" value="1" />
                <el-option label="女性项目" value="2" />
                <el-option label="已婚项目" value="3" />
                <el-option label="未婚项目" value="4" />
                <el-option label="不区分性别" value="6" />
                <el-option label="不区分婚否" value="7" />
                <el-option label="男性套餐" value="8" />
                <el-option label="女性套餐" value="9" />
                <el-option label="老人套餐" value="10" />
                <el-option label="入职体检" value="11" />
              </el-select>
            </el-form-item>

            <el-form-item
              label="原价:"
              class="souShuo"
              style="margin-top: 10px"
            >
              <el-input placeholder="1000" v-model="addForm.originalPrice" />
            </el-form-item>

            <el-form-item
              label="售价:"
              class="souShuo"
              style="margin-top: 10px"
            >
              <el-input placeholder="1200" v-model="addForm.sellingPrice" />
            </el-form-item>
          </el-div>

          <div class="cardBoxRight">
            <el-form-item
              label="适用城市:"
              class="souShuo"
              style="margin-top: 10px"
            >
              <el-select
                placeholder="四川省"
                style="width: 100px"
                v-model="addForm.provinceId"
              >
                <el-option label="四川省" value="1" />
                <el-option label="福建省" value="2" />
                <el-option label="湖南省" value="3" />
                <el-option label="浙江省" value="4" />
              </el-select>
              <el-select
                placeholder="成都市"
                style="width: 100px"
                v-model="addForm.cityId"
              >
                <el-option label="成都市" value="1" />
                <el-option label="雅安市" value="2" />
                <el-option label="绵阳市" value="3" />
                <el-option label="福州市" value="4" />
                <el-option label="南平市" value="5" />
                <el-option label="漳州市" value="6" />
                <el-option label="厦门市" value="7" />
                <el-option label="长沙市" value="8" />
              </el-select>
            </el-form-item>

            <el-form-item
              label="适用机构:"
              class="souShuo"
              style="margin-top: 10px"
            >
              <el-select
                placeholder="南医三院"
                style="width: 200px"
                v-model="addForm.matchInstitutionId"
              >
                <el-option label="南医三院" value="1" />
                <el-option label="瑞慈" value="2" />
                <el-option label="慈铭体检" value="3" />
                <el-option label="宜宾医疗" value="4" />
                <el-option label="妇幼保健院" value="17" />
                <el-option label="医疗" value="24" />
              </el-select>
            </el-form-item>

            <el-form-item label="分支机构:" style="margin-top: 10px">
              <el-transfer
                v-model="addForm.itemsBranchIds"
                filterable
                :filter-method="filterMethod"
                filter-placeholder="查询机构"
                :data="data"
              />
            </el-form-item>
          </div>
        </el-div>

        <el-form-item label="检查范围:" style="margin-top: 10px">
          <el-input
            v-model="addForm.checkScope"
            :rows="2"
            type="textarea"
            placeholder="请输入"
          />
        </el-form-item>

        <el-form-item label="检查意义:" style="margin-top: 10px">
          <el-input
            v-model="addForm.checkSignificance"
            :rows="2"
            type="textarea"
            placeholder="请输入"
          />
        </el-form-item>

        <el-form-item label="注意事项:" style="margin-top: 10px">
          <el-input
            v-model="addForm.notes"
            :rows="2"
            type="textarea"
            placeholder="请输入"
          />
        </el-form-item>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button
            type="primary"
            @click="
              dialogFormVisible = false;
              addPackage(addForm);
            "
          >
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 修改模态框 -->
    <el-dialog
      v-model="dialogFormVisible2"
      title="新增体检项"
      style="
        background-color: #f2f2f2;
        font-size: 18px;
        font-weight: 600;
        width: 1200px;
      "
    >
      <el-form style="background-color: white" :data="updates2">
        <el-div class="cardBox">
          <el-div class="cardBoxLift">
            <el-form-item
              label="体检项名称:"
              class="souShuo"
              style="display: flex; margin-top: 10px"
            >
              <el-input v-model="updates2.itemsName" />
            </el-form-item>

            <el-form-item
              label="体检项ID:"
              class="souShuo"
              style="margin-top: 10px"
            >
              <el-input disabled v-model="objId" placeholder="系统自动生成" />
              <el-input v-model="updates2.itemsId" />
            </el-form-item>

            <el-form-item label="是否启用:" style="margin-top: 10px">
              <el-switch v-model="updates2.enable" />
            </el-form-item>

            <el-form-item label="适用标签:" style="margin-top: 10px">
              <el-select style="width: 200px" v-model="updates2.labelId">
                <el-option label="男性项目" value="1" />
                <el-option label="女性项目" value="2" />
                <el-option label="已婚项目" value="3" />
                <el-option label="未婚项目" value="4" />
                <el-option label="不区分性别" value="6" />
                <el-option label="不区分婚否" value="7" />
                <el-option label="男性套餐" value="8" />
                <el-option label="女性套餐" value="9" />
                <el-option label="老人套餐" value="10" />
                <el-option label="入职体检" value="11" />
              </el-select>
            </el-form-item>

            <el-form-item
              label="原价:"
              class="souShuo"
              style="margin-top: 10px"
            >
              <el-input v-model="updates2.originalPrice" />
            </el-form-item>

            <el-form-item
              label="售价:"
              class="souShuo"
              style="margin-top: 10px"
            >
              <el-input v-model="updates2.sellingPrice" />
            </el-form-item>
          </el-div>

          <div class="cardBoxRight">
            <el-form-item
              label="适用城市:"
              class="souShuo"
              style="margin-top: 10px"
            >
              <el-select style="width: 100px" v-model="updates2.provinceId">
                <el-option label="四川省" value="1" />
                <el-option label="福建省" value="2" />
                <el-option label="湖南省" value="3" />
                <el-option label="浙江省" value="4" />
              </el-select>
              <el-select style="width: 100px" v-model="updates2.cityId">
                <el-option label="成都市" value="1" />
                <el-option label="雅安市" value="2" />
                <el-option label="绵阳市" value="3" />
                <el-option label="福州市" value="4" />
                <el-option label="南平市" value="5" />
                <el-option label="漳州市" value="6" />
                <el-option label="厦门市" value="7" />
                <el-option label="长沙市" value="8" />
              </el-select>
            </el-form-item>

            <el-form-item
              label="适用机构:"
              class="souShuo"
              style="margin-top: 10px"
            >
              <el-select
                style="width: 200px"
                v-model="updates2.matchInstitutionId"
              >
                <el-option label="南医三院" value="1" />
                <el-option label="瑞慈" value="2" />
                <el-option label="慈铭体检" value="3" />
                <el-option label="宜宾医疗" value="4" />
                <el-option label="妇幼保健院" value="17" />
                <el-option label="医疗" value="24" />
              </el-select>
            </el-form-item>

            <el-form-item label="分支机构:" style="margin-top: 10px">
              <el-transfer
                v-model="updates2.itemsBranchIds"
                filterable
                :filter-method="filterMethod"
                filter-placeholder="查询机构"
                :data="data"
              />
            </el-form-item>
          </div>
        </el-div>

        <el-form-item label="检查范围:" style="margin-top: 10px">
          <el-input v-model="updates2.checkScope" :rows="2" type="textarea" />
        </el-form-item>

        <el-form-item label="检查意义:" style="margin-top: 10px">
          <el-input
            v-model="updates2.checkSignificance"
            :rows="2"
            type="textarea"
          />
        </el-form-item>

        <el-form-item label="注意事项:" style="margin-top: 10px">
          <el-input v-model="updates2.notes" :rows="2" type="textarea" />
        </el-form-item>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible2 = false">取消</el-button>
          <el-button
            type="primary"
            @click="
              dialogFormVisible2 = false;
              updatePackage(updates2);
            "
          >
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
  
<script setup lang="ts">
// -----------------------------<<方法引入>>-----------------------------
import { ElMessage, ElMessageBox } from "element-plus";
import { ref, reactive, onMounted } from "vue";
import phyExaItemHooks from "../hooks/physicalExaminationItemHook";
import phyExaItemStores from "../stores/physicalExaminationItemStores";
import phyDanFindStores from "../stores/phyDanFindStores";

// -----------------------------<<变量定义>>-----------------------------
// 项目ID
let objId = ref<string>("");
let autoID: number = 1;
//页面渲染常量stores
const stores = phyExaItemStores();
//修改模态框渲染常量storesFind
const storesFind = phyDanFindStores();
//页面渲染常量设置
const tableData = ref<Array<any>>([]);
//页面修改常量设置
const updates2 = ref<any>({
  //用ref，后面的变量updates2数据更改要加.value
  checkScope: "",
  checkSignificance: "",
  cityId: "",
  enable: "",
  itemsBranchIds: [""],
  itemsId: "",
  itemsName: "",
  labelId: "",
  matchInstitutionId: "",
  notes: "",
  originalPrice: "",
  provinceId: "",
  sellingPrice: "",
  orderQuantity: 11,
});
//页面添加常量设置
const addForm = reactive({
  checkScope: "",
  checkSignificance: "",
  cityId: "",
  enable: "",
  itemsBranchIds: [""],
  itemsId: "",
  itemsName: "",
  labelId: "",
  matchInstitutionId: "",
  notes: "",
  originalPrice: "",
  provinceId: "",
  sellingPrice: "",
});
//页面查询常量设置
const findListList = ref<any>({
  cityName:"",
  input:"",
  provenceName:""
})
//分页
const pageNum = ref(1); //第几页默认1
const PageSize = ref(20); //每页大小默认20
// 添加模态框隐藏显示
const dialogFormVisible2 = ref(false);
//.......删除确认模态框........
const deleteModel = ref(false);
const dialogFormVisible = ref(false);
//模态框切换栏-基本信息-穿梭框
interface Option {
  key: number;
  label: string;
  initial: string;
}

// -----------------------------<<方法定义>>-----------------------------
//查询功能
const phyItemFindListVue =()=>{
  console.log("页面查询功能传值findListList:", findListList);
  phyExaItemHooks.phyItemFindList(findListList.value,getData)
}

//删除功能
const deletePhyExamItem = (id: any) => {
  console.log("页面删除功能传值ID:", id);
  phyExaItemHooks.physicalExaminationItemDelete(id, deletePhyExamItemCallback);
};
//删除确认框
const open = (id: any) => {
  ElMessageBox.alert("确认删除吗？", "删除确认框", {
    // if you want to disable its autofocus
    // autofocus: false,
    confirmButtonText: "确认",
    callback: (Action: any) => {
      deletePhyExamItem(id);
    },
  });
};
// 删除-callback方法
const deletePhyExamItemCallback = function (res: number) {
  if (res == 0) {
    phyExaItemHooks.physicalExaminationItemList(
      pageNum.value,
      PageSize.value,
      getData
    );
  }
};
//添加功能
const addPackage = (addForm: any) => {
  //添加功能中是否启用按钮的布尔值转换
  addForm.enable = addForm.enable ? 1 : 0;
  console.log("添加模态框获得数据：", addForm);
  phyExaItemHooks.physicalExaminationItemAdd(
    addForm,
    deletePhyExamItemCallback
  );
};
//添加-添加模态框
const openAddPage = function () {
  dialogFormVisible.value = true;
  window.sessionStorage.setItem("autoID", String(autoID));
  // 自增项目ID函数
  autoAddProjectID();
};
//修改功能
const updatePackage = (updates2: any) => {
  //获得的数据进行转换，转换为正确的传值类型
  updates2.enable = addForm.enable ? 1 : 0;
  updates2.cityId=Number(updates2.cityId);
  // updates2.itemsBranchIds=Array(updates2.itemsBranchIds);
  updates2.labelId=Number(updates2.labelId);
  updates2.matchInstitutionId=Number(updates2.matchInstitutionId);
  console.log("修改模态框获得数据updates2：", updates2);
  //updates22剔除后端返回的数据中不要的参数
  let updates22 = {
    checkScope: updates2.checkScope,
    checkSignificance: updates2.checkSignificance,
    cityId: updates2.cityId,
    enable: updates2.enable,
    itemsBranchIds: [updates2.itemsBranchIds.index],
    itemsId: updates2.itemsId,
    itemsName: updates2.itemsName,
    labelId: updates2.labelId,
    matchInstitutionId: updates2.matchInstitutionId,
    notes: updates2.notes,
    originalPrice: updates2.originalPrice,
    provinceId: updates2.provinceId,
    sellingPrice: updates2.sellingPrice,
  };
  phyExaItemHooks.physicalExaminationItemUpdate(
    updates22,
    updatePhyExamItemCallback
  );
};
//修改-单项查询功能
const danFind = (id: any) => {
  //模态框的显示隐藏在一个函数里时需要在后面加.value：dialogFormVisible2.value = true;
  dialogFormVisible2.value = true;
  console.log("修改时获取的该行ID：", id);
  phyExaItemHooks.phyDanFindId(id, getFindData);
};
//修改-获取单项查询功能获取的数据回调函数
const getFindData = () => {
  console.log("触发修改-获取单项查询功能回调函数");
  updates2.value = storesFind.getrotation;
  console.log("拿到数据后updates2的值：", updates2);
};
// 修改-callback方法
const updatePhyExamItemCallback = function (res: number) {
  if (res == 200) {
    phyExaItemHooks.physicalExaminationItemList(
      pageNum.value,
      PageSize.value,
      getData
    );
  }
};
// 自增项目ID
const autoAddProjectID = function () {
  let tempID = `TC0000${Number(window.sessionStorage.getItem("autoID"))}`;
  console.log("参数", tempID);
  phyExaItemHooks.physicalExaminationItemFindIdDanChaXun(
    tempID,
    autoAddProjectIDCallback
  );
};

// 自增IDCallback
const autoAddProjectIDCallback = function (res: number) {
  console.log(res);
  if (res == 0) {
    console.log("重复值");
    autoID = Number(window.sessionStorage.getItem("autoID")) + 1;
    objId.value = `TC0000${autoID}`;
    autoID++;
  } else {
    objId.value = `TC0000${Number(window.sessionStorage.getItem("autoID"))}`;
    autoID++;
    console.log("不重复");
  }
};
//添加模态框-分支机构
const generateData = () => {
  const data: Option[] = [];
  const states = ["武侯区分区", "金牛区分区", "高新区分区", "江安县中心"];
  const initials = ["武侯区分区", "金牛区分区", "高新区分区", "江安县中心"];
  states.forEach((city, index) => {
    data.push({
      label: city,
      key: index,
      initial: initials[index],
    });
  });
  return data;
};
const data = ref<Option[]>(generateData());
const filterMethod = (query: any, item: any) => {
  return item.initial.toLowerCase().includes(query.toLowerCase());
};
// 参数传入hook时，让获取数据操作和请求数据操作形成同步
const getData = () => {
  tableData.value = stores.getrotation;
  console.log("查询回调数据getData：",tableData.value);
  
};
// -----------------------------<<生命周期>>-----------------------------
// 挂载后
onMounted(() => {
  //reactive是直接取值，ref是变量名.value
  phyExaItemHooks.physicalExaminationItemList(
    pageNum.value,
    PageSize.value,
    getData
  );
});
</script>
  
<style lang="less" scoped>
@headerHeight: 50px;

* {
  margin: 0;
  padding: 0;
}

#box {
  width: 100%;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.header {
  height: @headerHeight;
  display: flex;
  align-items: center;
  border: solid 1px #d7d7d7;
}

.BigBox {
  border: solid 1px #d7d7d7;
  background-color: white;
}

button {
  width: 80px;
}

/* 头部查询功能区 */
.navigation {
  height: 40px;
  margin-left: 40px;
  margin-top: 10px;
}

// 模态框input框
.souShuo {
  width: 300px;
}

// 模态框布局
.cardBox {
  display: flex;
  justify-content: space-between;
}

//模态框文本框
.wenBen {
  width: 800px;
  height: 200px;
}
</style>

hooks文件(业务逻辑处理):

// 引入请求方法
import physicalExaminationItemService from '../server/physicalExaminationItemService';
import { ElMessage } from 'element-plus'
import physicalExaminationItemStores from "../stores/physicalExaminationItemStores";
import phyDanFindStores from "../stores/phyDanFindStores"

//页面渲染 业务逻辑 callback用于接收传入的回调
function physicalExaminationItemList(pageNum: any, PageSize: any, callback: any) {
	console.log("页面渲染 业务逻辑", pageNum, PageSize)
	const store = physicalExaminationItemStores()
	physicalExaminationItemService.physicalExaminationItemList(pageNum, PageSize).then((res) => {
		//如果正确存储数据
		console.log("hooks里页面数据:", res.data);
		console.log("hooks所需数据:", res.data.data.informations);
		if (res.data.code == 0) {
			//存数据 
			console.log("hooks存好数据");
			//store.setrotation(res.data.data.informations)也是异步
			store.setrotation(res.data.data.informations)
			//拿到数据后执行回调函数 去store里面取值
			callback()
		} else {
			//不正确，提示
			//
			ElMessage({
				type: "info",
				message: res.data.message
			})
		}
		// 如果不正确，给提示
	}).catch(err => {
		console.log(err);

	})
}
//页面添加 业务逻辑
function physicalExaminationItemAdd(phyAdd: any, callback: any) {
	console.log("Hooks页面添加业务逻辑", phyAdd)
	physicalExaminationItemService.physicalExaminationItemAdd(phyAdd).then((res) => {
		if (res.data.code == 0) {
			console.log("Hooks业务逻辑添加成功", res.data.data);
			// 提示
			ElMessage({
				type: "success",
				message: "添加成功"
			})
			callback(res.data.code)
		} else {
			//不正确，提示
			ElMessage({
				type: "info",
				message: res.data.message
			})
		}
	}).catch(err => {
		// 如果不正确，给提示
		console.log(err);
	})
}
//页面删除 业务逻辑
function physicalExaminationItemDelete(id: any, callback: any) {
	console.log("hook删除功能接受的ID", id);
	physicalExaminationItemService.physicalExaminationItemDelete(id).then((res) => {
		console.log("hook删除功能返回res.data:", res.data);
		if (res.data.code == 0) {
			// 提示
			ElMessage({
				type: "success",
				message: "删除成功"
			})
			callback(res.data.code)
		} else {
			//不正确，提示
			ElMessage({
				type: "error",
				message: res.data.message
			})
		}
		// 如果不正确，给提示
	}).catch(err => {
		console.log(err);

	})
}
//页面修改业务逻辑
function physicalExaminationItemUpdate(Updates: any, callback: any) {
	console.log("Hooks页面修改业务逻辑", Updates)
	physicalExaminationItemService.physicalExaminationItemUpdate(Updates).then((res) => {
		console.log("Hooks业务修改成功", res.data.data);
		if (res.data.code == 200) {
			// 提示
			ElMessage({
				type: "success",
				message: "修改成功"
			})
			//刷新
			callback(res.data.code)
		} else {
			//不正确，提示
			ElMessage({
				type: "info",
				message: res.data.message
			})
		}

	}).catch(err => {
		console.log(err);

	})
}
//单点查询业务逻辑
function physicalExaminationItemFindIdDanChaXun(id: string, callback: any) {
	physicalExaminationItemService.physicalExaminationItemFindId(id).then(res => {
		if (res.data.code == 0) {
			callback(res.data.data.length)
		}
		console.log(res)
	})
}
//修改单项查询业务逻辑
function phyDanFindId(id: string, callback: any) {
	console.log("Hooks修改单项查询接受id", id);
	callback()
	const storesFind = phyDanFindStores()
	physicalExaminationItemService.physicalExaminationItemFindId(id).then(res => {
		console.log("Hooks修改单项查询成功", res.data.data);
		if (res.data.code == 0) {
			// 提示
			ElMessage({
				type: "success",
				message: "单项查询成功"
			})
			//Store存数据
			storesFind.setrotation(res.data.data)
			console.log("hooks存好数据", res.data.data);
			callback();
		} else {
			//不正确，提示
			ElMessage({
				type: "info",
				message: res.data.message
			})
		}
	}).catch(err => {
		console.log(err);
	})
}
//页面查询业务逻辑
function phyItemFindList(findListList:any,callback: any){
	console.log("页面查询业务逻辑接受的findListList", findListList)
	const store = physicalExaminationItemStores()
	physicalExaminationItemService.physicalExaminationItemFind(findListList).then((res) => {
		//如果正确存储数据
		console.log("hooks里页面数据:", res.data);
		console.log("hooks所需数据:", res.data.data.informations);
		if (res.data.code == 0) {
			// 提示
			ElMessage({
				type: "success",
				message: "查询成功!"
			})
			//存数据 
			console.log("hooks存好数据");
			store.setrotation(res.data.data.informations)
			callback()
		} else {
			//不正确，提示
			ElMessage({
				type: "info",
				message: res.data.message
			})
		}
		// 如果不正确，给提示
	}).catch(err => {
		console.log(err);

	})
}

export default {
	physicalExaminationItemList,
	physicalExaminationItemAdd,
	physicalExaminationItemDelete,
	physicalExaminationItemUpdate,
	physicalExaminationItemFindIdDanChaXun,
	phyDanFindId,
	phyItemFindList
}

stores文件(数据处理):

import { defineStore } from 'pinia'

interface IState {
	physicalExaminationItemList: any;
}

const physicalExaminationItem = defineStore("phyExaItemList", {
	state: (): IState => {
		console.log("srores里面渲染数据");
		return {
			physicalExaminationItemList: []
		}
	},
	getters: {
		getrotation(): Array<any> {
			console.log("测试stores里getters", this.physicalExaminationItemList);
			return [...this.physicalExaminationItemList]
		}
	},
	actions: {
		setrotation(value: Array<any>) {
			console.log("测试stores里actions", this.physicalExaminationItemList);
			this.physicalExaminationItemList = value;

		}
	}
})

export default physicalExaminationItem

server文件(请求处理):

//体检项目管理
import Axios from "./../utils/axios";
import api from "./../api/index";

//页面添加按钮 发起Axios请求
function physicalExaminationItemAdd(phyAdd: any) {
	console.log("server添加功能接受的phyAdd", phyAdd);
	return Axios.post(api.physicalExaminationItemApi.physicalExaminationItemAdd,phyAdd)
		
}
//页面删除按钮 发起Axios请求
function physicalExaminationItemDelete(ids: any) {
	console.log("server删除功能接受的ID", ids);
	return Axios({
		url: api.physicalExaminationItemApi.physicalExaminationItemDelete,
		method: "post",
		//报450的错  高概率为传参的问题 传参是params还是data，参数类型，
		params: {
			'ids': ids
		},
	});
}
//页面修改按钮 发起Axios请求
function physicalExaminationItemUpdate(Updates: any) {
	console.log("server修改功能接受的Updates", Updates);
	return Axios.post(api.physicalExaminationItemApi.physicalExaminationItemUpdate,Updates)
}
//页面渲染 发起Axios请求
function physicalExaminationItemList(pageNum: any, PageSize: any) {
	console.log("serves里页面渲染", pageNum, PageSize);
	console.log("页面渲染 发起Axios请求", pageNum, PageSize)
	return Axios({
		url: api.physicalExaminationItemApi.physicalExaminationItemList,
		method: "post",
		data: {
			pageNum,
			PageSize,
            
		},
	});
}
//页面查询 发起Axios请求
function physicalExaminationItemFind(phyFind: any) {
	console.log("serves里页面查询phyFind", phyFind);
	return Axios({
		url: api.physicalExaminationItemApi.physicalExaminationItemFind,
		method: "post",
		data: {
			phyFind
		},
	});
}
//体项单点查询(ID)
function physicalExaminationItemFindId(id: string) {
	console.log("server单项查询功能接受的ID", id);
	return Axios.get(api.physicalExaminationItemApi.physicalExaminationItemFindId,{
		params:{
			"id":id
		}
	});
}
//市查询接口
function physicalExaminationItemFindCitys(id: number) {
	return Axios({
		url: api.physicalExaminationItemApi.physicalExaminationItemFindCitys,
		method: "get",
		data: {
			id
		},
	});
}
//机构分支查询接口
function physicalExaminationItemFindInstitutionalBranches(id: number) {
	return Axios({
		url: api.physicalExaminationItemApi.physicalExaminationItemFindInstitutionalBranches,
		method: "get",
		data: {
			id
		},
	});
}
//机构查询接口
function physicalExaminationItemFindInstitutionals(id: number) {
	return Axios({
		url: api.physicalExaminationItemApi.physicalExaminationItemFindInstitutionals,
		method: "get",
		data: {
			id
		},
	});
}
//省查询接口
function physicalExaminationItemFindProvences(id: number) {
	return Axios({
		url: api.physicalExaminationItemApi.physicalExaminationItemFindProvences,
		method: "get",
		data: {
			id
		},
	});
}

export default {
	physicalExaminationItemAdd,
	physicalExaminationItemDelete,
	physicalExaminationItemUpdate,
	physicalExaminationItemList,
	physicalExaminationItemFind,
	physicalExaminationItemFindId,
	physicalExaminationItemFindCitys,
	physicalExaminationItemFindInstitutionalBranches,
	physicalExaminationItemFindInstitutionals,
	physicalExaminationItemFindProvences
};

utils文件(封装axios):

// -----------------------------<<插件引入>>-----------------------------
// 引入axios
import axios from 'axios';


// -----------------------------<<实例创建>>-----------------------------
// 创建axios实例
const Server = axios.create({
    // baseURL: 'http://82.'    //lilei
    timeout: 30000,
    headers: {
        "Content-Type": "application/json;charset=utf-8"
    }
})
// 设置post请求提交的默认数据格式
Server.defaults.headers.post["Content-Type"] = "application/json;charset=utf-8";

// -----------------------------<<实例配置>>-----------------------------
// 请求拦截
Server.interceptors.request.use(config => {
    // 获取admin-token值
    let token = window.sessionStorage.getItem("token");
    // 如果token有值，在请求头中添加admin-token
    if (token) {
        config.headers["token"] = token;
    }
    // 返回config
    return config;
}, err => {
    return Promise.reject(err);
})

// 响应拦截
Server.interceptors.response.use(response => {
    return response
}, err => {
    return Promise.reject(err);
})

// -----------------------------<<实例导出>>-----------------------------
// 实例导出
export default Server