修改

.eslintrc.js

@@ -1,4 +1,5 @@
 module.exports = {
+  "root": true,
   env: {
     browser: true,
     es2021: true,

src/api/cdt/menus/index.ts

@@ -8,9 +8,33 @@ import { AxiosPromise } from 'axios';
  */
 
 export const testPackageList = (query?: any): any => {
-  return request({
-    url: '/dgtmedicine/testPackage/list',
-    method: 'get',
-    params: query
-  });
+    return request({
+        url: '/dgtmedicine/testPackage/list',
+        method: 'get',
+        params: query
+    });
+};
+/**
+ * 查询检测套餐列表统计
+ * @param query
+ * @returns {*}
+ */
+export const testPackageListCount = (query?: any): any => {
+    return request({
+        url: '/dgtmedicine/testPackage/queryPackCount',
+        method: 'get',
+        params: query
+    });
+};
+/**
+ * 获取企业信息列表
+ * @param id
+ * @returns {*}
+ */
+export const getEnterpriseList = (query?: any): any => {
+    return request({
+        url: '/company/listByPage',
+        method: 'get',
+        params: query
+    });
 };

src/views/cdt/menus/form/index.vue

@@ -0,0 +1,117 @@
+<template>
+    <div class="p-3">
+        <div class="bg-fff flex1 ov-hd d-flex flex-cln">
+            <div class="d-flex a-c pd-16 border-bottom">
+                <div class="f-s-20 c-333 f-w-7 mr-10">新增套餐</div>
+                <el-button @click="router.go(-1)" type="primary" text>
+                    <el-icon>
+                        <Back />
+                    </el-icon>
+                    返回上一级
+                </el-button>
+            </div>
+            <div class="flex1 over-auto">
+                <el-form :model="form" :rules="rules" ref="formRef" label-width="auto" label-position="top">
+                    <div class="pd-16 border-bottom">
+                        <el-form-item>
+                            <div class="flex1"><add-btn content="选择检测项目"></add-btn></div>
+                        </el-form-item>
+                    </div>
+                    <div class="pd-16 border-bottom">
+                        <div class="info-title mb-10">套餐基本信息</div>
+                        <el-row :gutter="90">
+                            <el-col :span="8">
+                                <el-form-item label="套餐名称" prop="name">
+                                    <el-input v-model="form.name" clearable placeholder="请输入套餐名称"></el-input>
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="8">
+                                <el-form-item label="套餐类型" prop="publicFlag">
+                                    <el-select v-model="form.publicFlag" clearable placeholder="请选择套餐类型">
+                                        <el-option v-for="item in dm_package_type" :key="item.value" :label="item.label" :value="item.value"></el-option>
+                                    </el-select>
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="8">
+                                <el-form-item label="制定规则" prop="permitType">
+                                    <el-radio-group v-model="form.permitType">
+                                        <el-radio v-for="item in dm_permit_type" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
+                                    </el-radio-group>
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="8">
+                                <el-form-item label="适用类型" prop="permit">
+                                    <el-select v-model="form.permit" clearable multiple placeholder="请选择适用类型">
+                                        <el-option v-for="item in vip_level" :key="item.value" :label="item.label" :value="item.value"></el-option>
+                                    </el-select>
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="8">
+                                <el-form-item label="适用企业" prop="permit">
+                                    <SearchSelect></SearchSelect>
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="8">
+                                <el-form-item label="检测周期" prop="period">
+                                    <el-input v-model.number="form.period" clearable placeholder="请输入检测周期">
+                                        <template #suffix>天</template>
+                                    </el-input>
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="8">
+                                <el-form-item label="上架数量" prop="totalCount">
+                                    <el-input v-model.number="form.totalCount" clearable placeholder="请输入套餐价格"></el-input>
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="8">
+                                <el-form-item label="执行标准" prop="standard">
+                                    <el-input type="textarea" v-model="form.standard" placeholder="请输入执行标准" :rows="4" show-word-limit maxlength="100"></el-input>
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="8">
+                                <el-form-item label="送样信息" prop="price">
+                                    <el-input type="textarea" placeholder="请输入送样信息" :rows="4" show-word-limit maxlength="100"></el-input>
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="8">
+                                <el-form-item label="购买须知" prop="purchaseNotes">
+                                    <el-input type="textarea" v-model="form.purchaseNotes" placeholder="请输入购买须知" :rows="4" show-word-limit maxlength="100"></el-input>
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="8">
+                                <el-form-item label="封面图" prop="price">
+                                    <el-input v-model="form.price" clearable placeholder="请输入套餐价格"></el-input>
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="8">
+                                <el-form-item label="产品图" prop="price">
+                                    <el-input v-model="form.price" clearable placeholder="请输入套餐价格"></el-input>
+                                </el-form-item>
+                            </el-col>
+                        </el-row>
+                    </div>
+                    <div class="pd-16">
+                        <div class="info-title">套餐价格确认</div>
+                    </div>
+                </el-form>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup name="Member-detail" lang="ts">
+import { AddBtn, SearchSelect } from '@/views/models';
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const { dm_package_type, dm_permit_type, vip_level } = toRefs<any>(proxy?.useDict('dm_package_type', 'dm_permit_type', 'vip_level'));
+// 字典
+const router = useRouter();
+const activeName = ref('info');
+const form = ref<any>({
+   items: []
+});
+const rules = reactive({
+    items: [
+        { required: true, message: '请选择检测项目', trigger: 'change' }
+    ]
+});
+</script>

src/views/cdt/menus/index.vue

@@ -4,8 +4,8 @@
             <div class="pd-16 pb-4 border-bottom">
                 <div class="f-s-20 c-333 f-w-7 mb-16">套餐管理</div>
                 <div class="d-flex">
-                    <div class="">
-                        <el-button type="primary">新增套餐</el-button>
+                    <div class="mr-40">
+                        <el-button @click="router.push({ path: 'menus-form' })" type="primary">新增套餐</el-button>
                     </div>
                     <div class="flex1 ov-hd d-flex j-ed">
                         <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="auto">
@@ -38,6 +38,8 @@
                 </div>
             </div>
             <div class="flex1 ov-hd pd-16">
+                <searchTabs v-model="queryParams.type" :list="tabs" key-label="name" key-value="type" key-count="num"></searchTabs>
+                <div class="pd-8"></div>
                 <vxe-table :loading="loading" border :data="list" min-height="0" max-height="100%">
                     <!-- 序号 -->
                     <vxe-column type="seq" width="60" title="序号" align="center" />
@@ -48,8 +50,10 @@
     </div>
 </template>
 <script setup name="Menus" lang="ts">
-import { testPackageList } from '@/api/cdt/menus';
+import { testPackageList, testPackageListCount } from '@/api/cdt/menus';
 import { colNoData } from '@/utils/noData';
+import { searchTabs } from '@/views/models';
+const router = useRouter();
 const queryParams = ref<any>({
     pageNum: 1,
     pageSize: 10
@@ -74,7 +78,16 @@ const resetQuery = () => {
     queryFormRef.value?.resetFields();
     handleQuery();
 };
+// 获取tabs统计数据
+const tabs = ref<any[]>([]);
+const getTabsCount = async () => {
+    const res = await testPackageListCount({ ...queryParams.value });
+    if (!res || res.code !== 200) return;
+    // this.tabsList = res.rows;
+    tabs.value = res.data;
+};
 onMounted(() => {
+    getTabsCount();
     getList();
 });
 </script>

src/views/models/AddBtn.vue

@@ -0,0 +1,29 @@
+<template>
+    <div @click.stop="$emit('click')" class="add-btn d-flex a-c j-c u-s-n" :style="{ height: height  }">
+        <slot>
+            <el-icon size="18"><CirclePlusFilled /></el-icon>
+            <span class="pl5 f-16">{{ content }}</span>
+        </slot>
+    </div>
+</template>
+<script setup name="AddBtn" lang="ts">
+import { propTypes } from '@/utils/propTypes';
+
+const props = defineProps({
+    content: propTypes.string.def(''),
+    height: propTypes.string.def('66px')
+});
+</script>
+<style lang="scss" scoped>
+.add-btn {
+    height: 66px;
+    border-radius: 4px;
+    color: var(--el-color-primary);
+    border: 1px dashed var(--el-color-primary);
+    cursor: pointer;
+
+    &:hover {
+        opacity: .8;
+    }
+}
+</style>

src/views/models/SearchSelect.vue

@@ -0,0 +1,67 @@
+<template>
+    <el-select ref="selectDropRef" v-selectLazyLoad:pageNum="loadMoreData" v-model="value" filterable popper-class="custom-dropdown" remote reserve-keyword :remote-method="remoteMethod" remote-show-suffix clearable placeholder="请选择适用企业">
+        <div class="optionBox" infinite-scroll-delay="500" infinite-scroll-distance="20" v-infinite-scroll="load">
+            <el-option v-for="item in options" :key="item.value" filterable :label="item.cpyName" :value="item.id"></el-option>
+        </div>
+    </el-select>
+</template>
+<script setup lang="ts">
+import { getEnterpriseList } from '@/api/cdt/menus'
+// 防抖
+import { debounce } from 'lodash';
+const value = ref('')
+const options = ref([])
+const total = ref(0)
+const selectDropRef = ref(null)
+const queryParams = ref({
+    pageSize: 10,
+    pageNum: 1,
+    cpyName: ''
+})
+const getList = async (hasRx = true) => {
+    if (hasRx) {
+        queryParams.value.pageNum = 1
+        options.value = []
+    }
+    const res = await getEnterpriseList(queryParams.value)
+    total.value = res.total;
+    if (hasRx) {
+        options.value = res.rows
+    } else {
+        options.value = options.value.concat(res.rows)
+    }
+}
+const remoteMethod = (text: string) => {
+    console.log(text);
+    if (text) {
+        queryParams.value.cpyName = text
+        selectSearch()
+    }
+}
+const load = () => {
+    if (options.value.length < total.value) {
+        queryParams.value.pageNum++
+        getList(false)
+    }
+}
+const loadMoreData = (event: any) => {
+    console.log('---');
+}
+const selectSearch = debounce(() => {
+    getList()
+}, 500)
+
+onMounted(() => {
+    getList()
+    nextTick(() => {
+      // 获取下拉框的dom
+      const dropdown = document.querySelector('.custom-dropdown .el-select-dropdown__wrap');
+      dropdown.addEventListener('scroll', () => {
+        if (dropdown.scrollTop + dropdown.clientHeight >= dropdown.scrollHeight) {
+          // 在这里执行你的操作
+          load()
+        }
+      });
+    });
+})
+</script>

src/views/models/index.ts

@@ -1,5 +1,6 @@
-
 export { default as DateRange } from './DateRange.vue'; // 包装任务
 export { default as searchTabs } from './searchTabs.vue'; // tabs组件
 export { default as DescCol } from './DescCol.vue'; // 描述组件
-export { default as BtnRadio } from './BtnRadio.vue'; // 按钮单选
+export { default as BtnRadio } from './BtnRadio.vue'; // 按钮单选
+export { default as AddBtn } from './AddBtn.vue'; // 新增按钮
+export { default as SearchSelect } from './SearchSelect.vue'; // 搜索选择服务端获取数据