20231129

src/api/index.ts

@@ -5,4 +5,7 @@ export * from './module/storageInquire'
 export * from './module/sellManage'
 
 export * from './module/storageOrderGoods'
+export * from './module/essentialinfo'
+
+
 

src/api/module/essentialinfo.ts

@@ -0,0 +1,25 @@
+
+import $http from '@/utils/index'
+
+/**
+ * 品种
+ * @param params 
+ * @returns 
+ */
+// 品种列表
+export const productList = (params: any) => $http.post('/product/list', params)
+// 品种删除
+export const productDel = (params: any) => $http.post('/product/delete', params)
+// 品种编辑
+export const productedit = (params: any) => $http.post('/product/edit', params)
+// 品种添加
+export const productadd = (params: any) => $http.post('/product/add', params)
+
+
+
+// 药品信息管理-列表
+export const medicinelist = (params: any) => $http.post('/medicine-template/list', params)
+// 药品信息管理-添加
+export const medicineAdd = (params: any) => $http.post('/medicine-template/add', params)
+// 药品信息管理-表头
+export const medicinecolumns = (params: any) => $http.post('/medicine-template/columns', params)

src/components/table.vue

@@ -3,6 +3,7 @@
     <div class="y-tabs">
         <el-table v-loading="loading" :data="tableData" @row-click="props.rowClick"
             @selection-change="props.selectionChange" :row-key="props.getRowKey"
+            :border="props.border"
             :row-style="tableRowClassName" table-layout="auto">
            <!-- 默认插槽 -->
       <slot></slot>
@@ -64,7 +65,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, CSSProperties } from "vue";
+import { ref, CSSProperties,watch } from "vue";
 import { useTable } from '@/hooks/useTable'
 import { TableProps } from 'element-plus'
 import { ColumnProps } from './interface/index'
@@ -98,7 +99,10 @@ const props = withDefaults(defineProps<ProTableProps>(), {
     searchCol: () => ({ xs: 1, sm: 2, md: 2, lg: 3, xl: 4 })
 })
 
-
+watch(() =>props.columns , (toPath:any) => {
+    console.log('表头',toPath)
+    props.selectionChange
+}, {immediate:true,deep: true })
 
 // 表格操作 Hooks
 const { tableData, getTableList, pageable, loading, handleSizeChange, handleCurrentChange } = useTable(
@@ -114,7 +118,7 @@ const tableColumns = ref<ColumnProps[]>(props.columns)
 
 //暴露方法
 defineExpose({
-  getTableList
+  getTableList,tableColumns,props
 })
 
 </script>

src/main.ts

@@ -8,6 +8,12 @@ const app = createApp(App)
 
 import 'element-plus/theme-chalk/index.css'  // 引入组件样式
 import ElementPlus from 'element-plus'
+
+//解决ResizeObserver loop limit exceeded报错
+window.ResizeObserver = class _NewResizeObserver extends ResizeObserver {
+    constructor(callback: any) { super(() => window.requestAnimationFrame(() => callback.apply(this, arguments))); }
+}
+
 app.use(ElementPlus)
 
 // import {elementList} from "@/plugins/elementData";

src/plugins/newData.ts

@@ -0,0 +1,31 @@
+
+export function newDataFun(data: any) {
+    console.log('发送数据', data)
+}
+/**
+ * 
+ * @param 该显示哪一项的新增
+ */
+export function showDialog(key: any) {
+    console.log('发送数据1', key)
+    switch (key) {
+        case 'a':
+            return '药品信息管理'
+            break;
+        case 'b':
+            return '规格'
+            break;
+        case 'c':
+            return '剂型'
+            break;
+        case 'd':
+            return '单位'
+            break;
+        case 'e':
+            return '品种'
+            break;
+        default:
+            return '生产企业'
+            break;
+    }
+}

src/views/essentialinfo/dosageForm.vue

@@ -0,0 +1,37 @@
+<!-- 剂型 -->
+<template>
+    <div class="">
+        <tables ref="TableRef" :requestApi="salesList" :columns="columns" :initParam="data.initParam" :border="true">
+            <template #right="{ row }">
+                <el-button link type="primary" size="small">编辑</el-button>
+                <el-button link type="danger" size="small">删除</el-button>
+            </template>
+        </tables>
+    </div>
+</template>
+
+<script setup lang="ts">
+import tables from "@/components/table.vue";
+import { salesList} from "@/api";
+import {reactive } from 'vue'
+// 渲染表格
+const columns: any = [
+    { prop: 'date', label: '编号',width:120},
+    { prop: 'receiving_unit', label: '名称',width:300},
+    { prop: 'operation', label: '操作', fixed: 'right',align:'left','min-width':200  }
+]
+
+//请求参数
+const data:any = reactive({
+    initParam: {
+        "endDate": "",
+        "startDate": "",
+        "productId":null,
+        "receivingUnit": ""
+    }
+})
+</script>
+<style lang="scss">
+/* @import url(); 引入css类 */
+
+</style>

src/views/essentialinfo/drugInformation.vue

@@ -0,0 +1,44 @@
+<!-- 药品信息 -->
+<script setup lang="ts">
+import tables from "@/components/table.vue";
+import { medicinelist,medicinecolumns } from "@/api";
+import { reactive,onMounted,nextTick,ref} from 'vue'
+const TableRef = ref()
+onMounted(()=>{
+    medicinecolumnsApi()
+})
+// 渲染表格
+let columns: any = [
+    { prop: 'operation', label: '操作', fixed: 'right','min-width':200 }
+]
+
+/**
+ * 获取表头
+ */
+const medicinecolumnsApi = async ()=>{
+    columns = [{ prop: 'operation', label: '操作', fixed: 'right','min-width':200 }]
+    const reslut:any = await medicinecolumns({})
+    columns = [...reslut.data.list,...columns]
+    TableRef.value.tableColumns = columns
+    TableRef.value?.getTableList()
+}
+//请求参数
+const data: any = reactive({
+    initParam: {}
+})
+</script>
+<template>
+    <div class="">
+        <tables ref="TableRef" :requestApi="medicinelist" :columns="columns" :initParam="data.initParam" :border="true">
+            <template #right="{ row }">
+                <el-button link type="primary" size="small">编辑</el-button>
+                <el-button link type="danger" size="small">删除</el-button>
+            </template>
+        </tables>
+    </div>
+</template>
+
+
+<style lang="scss">
+/* @import url(); 引入css类 */
+</style>

src/views/essentialinfo/index.vue

@@ -27,14 +27,29 @@
             </bgPure>
         </div>
         <bg istitle="基本信息">
+            <template #btn>
+                <newData/>
+            </template>
             <template #bg>
                 <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
-                    <el-tab-pane label="规格" name="first">规格</el-tab-pane>
-                    <el-tab-pane label="剂型" name="second">剂型</el-tab-pane>
-                    <el-tab-pane label="单位" name="third">单位</el-tab-pane>
-                    <el-tab-pane label="疫苗名称" name="fourth">疫苗名称</el-tab-pane>
-                    <el-tab-pane label="生产企业" name="third1">生产企业</el-tab-pane>
-                    <el-tab-pane label="药品信息管理" name="fourth2">药品信息管理</el-tab-pane>
+                    <el-tab-pane label="药品信息管理" name="first">
+                        <drugInformation v-if="activeName=='first'"></drugInformation>
+                    </el-tab-pane>
+                    <el-tab-pane label="规格" name="fourth2">
+                        <specification v-if="activeName=='fourth2'"></specification>
+                    </el-tab-pane>
+                    <el-tab-pane label="剂型" name="second">
+                        <dosageForm v-if="activeName=='second'"></dosageForm>
+                    </el-tab-pane>
+                    <el-tab-pane label="单位" name="third">
+                        <unit v-if="activeName=='third'"></unit>
+                    </el-tab-pane>
+                    <el-tab-pane label="品种" name="fourth">
+                        <vaccineName v-if="activeName=='fourth'"></vaccineName>
+                    </el-tab-pane>
+                    <el-tab-pane label="生产企业" name="third1">
+                        <productionEnterprise v-if="activeName=='third1'"></productionEnterprise>
+                    </el-tab-pane>
                 </el-tabs>
             </template>
         </bg>
@@ -42,9 +57,20 @@
 </template>
 <script lang="ts" setup>
 import bg from '@/components/bg.vue'
+import drugInformation from "./drugInformation.vue";//药品信息管理
+import specification from "./specification.vue";//规格
+import dosageForm from "./dosageForm.vue";//剂型
+import unit from "./unit.vue";//单位
+import vaccineName from "./vaccineName.vue";//品种
+import productionEnterprise from "./productionEnterprise.vue";//生产企业
+
+import newData from "./newData.vue";//药品信息管理
+
+
 import bgPure from '@/components/bgPure.vue'
 import statistics from '@/components/statistics.vue'
 import { ref } from 'vue'
+
 import type { TabsPaneContext } from 'element-plus'
 
 const activeName = ref('first')
@@ -52,6 +78,9 @@ const activeName = ref('first')
 const handleClick = (tab: TabsPaneContext, event: Event) => {
     console.log(tab, event)
 }
+
+
+
 </script>
 <style lang="scss">
 .essentialinfo {

src/views/essentialinfo/newData.vue

@@ -0,0 +1,142 @@
+<!-- 新增 -->
+<template>
+    <div class="">
+        <el-dropdown @command="handleCommand">
+            <el-button type="primary">新增<el-icon class="el-icon--right"><arrow-down /></el-icon>
+            </el-button>
+            <template #dropdown>
+                <el-dropdown-menu>
+                    <el-dropdown-item :icon="CircleCheck" command="a">药品信息管理</el-dropdown-item>
+                    <el-dropdown-item :icon="CircleCheck" command="b">规格</el-dropdown-item>
+                    <el-dropdown-item :icon="CircleCheck" command="c">剂型</el-dropdown-item>
+                    <el-dropdown-item :icon="CircleCheck" command="d">单位</el-dropdown-item>
+                    <el-dropdown-item :icon="CircleCheck" command="e">品种</el-dropdown-item>
+                    <el-dropdown-item :icon="CircleCheck" command="f">生产企业</el-dropdown-item>
+                </el-dropdown-menu>
+            </template>
+        </el-dropdown>
+
+        <el-dialog v-model="dialogFormVisible" title="新增药品信息管理" draggable :append-to-body="true">
+            <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules">
+                <el-form-item label="数据类型" :label-width="formLabelWidth" prop="type">
+                    <el-select v-model="ruleForm.type" placeholder="请选择数据类型">
+                        <el-option label="Zone No.1" value="shanghai" />
+                        <el-option label="Zone No.2" value="beijing" />
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="标签名称" :label-width="formLabelWidth" prop="text">
+                    <el-input v-model="ruleForm.text" autocomplete="off" placeholder="请输入标签名称" />
+                </el-form-item>
+                <el-form-item label="列宽" :label-width="formLabelWidth">
+                    <el-input v-model="ruleForm.width" autocomplete="off" placeholder="请输入列宽" >
+                        <template #append>px</template>
+                    </el-input>
+                </el-form-item>
+                <el-form-item label="排序" :label-width="formLabelWidth">
+                    <el-input v-model="ruleForm.sort" autocomplete="off" placeholder="请输入排序" />
+                </el-form-item>
+                <el-form-item label="表格展示" :label-width="formLabelWidth">
+                    <el-radio-group v-model="ruleForm.show">
+                        <el-radio label="1">显示</el-radio>
+                        <el-radio label="2">隐藏</el-radio>
+                    </el-radio-group>
+                </el-form-item>
+                <el-form-item label="描述" :label-width="formLabelWidth" placeholder="请输入描述">
+                    <el-input v-model="ruleForm.name" type="textarea" />
+                </el-form-item>
+            </el-form>
+            <template #footer>
+                <span class="dialog-footer">
+                    <el-button @click="dialogFormVisible = false">Cancel</el-button>
+                    <el-button type="primary" @click="submitForm(ruleFormRef)">
+                        Confirm
+                    </el-button>
+                </span>
+            </template>
+        </el-dialog>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { CircleCheck } from '@element-plus/icons-vue'
+import { newDataFun, showDialog } from "@/plugins/newData";
+import type { FormInstance, FormRules,ElMessage, ElMessageBox } from 'element-plus'
+import { reactive, ref } from 'vue'
+import { 
+    medicineAdd,//药品信息管理添加
+} from "@/api";
+
+interface RuleForm {
+    type: string
+    text: string
+    width: string
+    sort: string
+    show: string
+    name: string
+}
+
+const ruleFormRef = ref<FormInstance>()
+const dialogFormVisible = ref(false)
+const formLabelWidth = '80px'
+
+const ruleForm = reactive<RuleForm>({
+    "type": '',
+    "text": "",
+    "width": '',
+    "sort": '',
+    "show": '1',
+    "name": ""
+})
+
+const rules = reactive<FormRules<RuleForm>>({
+    type: [{ required: true, message: '请选择数据类型', trigger: 'change', }],
+    text: [{ required: true, message: '请输入标签名称', trigger: 'blur' }],
+})
+
+const handleCommand = (command: string | number | object) => {
+    console.log('command', command)
+    if(command=='a'){
+        dialogFormVisible.value = true
+    }else{
+        otherFun(command)
+    }
+}
+
+
+
+//函数
+const otherFun = async (command:any) => {
+    ElMessageBox.prompt(`新增${showDialog(command)}，请填写正确格式`, '新增', {
+        confirmButtonText: 'OK',
+        cancelButtonText: 'Cancel',
+        inputPattern: /\S/,
+        inputErrorMessage: `[${showDialog(command)}]名称格式不能为空`,
+    }).then(({ value }) => {
+        console.log('值',value)
+    }).catch(() => {
+        ElMessage.info('已取消新增'+showDialog(command))
+    })
+}
+
+
+
+/**
+ * 提交dio
+ * @param formEl 
+ */
+const submitForm = async (formEl: FormInstance | undefined) => {
+    if (!formEl) return
+    await formEl.validate(async(valid, fields) => {
+        if (valid) {
+            const reslut = await medicineAdd(ruleForm)
+            console.log('添加情况',reslut)
+        } else {
+            console.log('error submit!', fields)
+        }
+    })
+}
+
+</script>
+<style lang="scss">
+/* @import url(); 引入css类 */
+</style>

src/views/essentialinfo/productionEnterprise.vue

@@ -0,0 +1,37 @@
+<!-- 生产企业 -->
+<template>
+    <div class="">
+        <tables ref="TableRef" :requestApi="salesList" :columns="columns" :initParam="data.initParam" :border="true">
+            <template #right="{ row }">
+                <el-button link type="primary" size="small">编辑</el-button>
+                <el-button link type="danger" size="small">删除</el-button>
+            </template>
+        </tables>
+    </div>
+</template>
+
+<script setup lang="ts">
+import tables from "@/components/table.vue";
+import { salesList} from "@/api";
+import {reactive } from 'vue'
+// 渲染表格
+const columns: any = [
+    { prop: 'date', label: '编号',width:120},
+    { prop: 'receiving_unit', label: '名称',width:300},
+    { prop: 'operation', label: '操作', fixed: 'right',align:'left','min-width':200  }
+]
+
+//请求参数
+const data:any = reactive({
+    initParam: {
+        "endDate": "",
+        "startDate": "",
+        "productId":null,
+        "receivingUnit": ""
+    }
+})
+</script>
+<style lang="scss">
+/* @import url(); 引入css类 */
+
+</style>

src/views/essentialinfo/specification.vue

@@ -0,0 +1,37 @@
+<!-- 规格 -->
+<template>
+    <div class="">
+        <tables ref="TableRef" :requestApi="salesList" :columns="columns" :initParam="data.initParam" :border="true">
+            <template #right="{ row }">
+                <el-button link type="primary" size="small">编辑</el-button>
+                <el-button link type="danger" size="small">删除</el-button>
+            </template>
+        </tables>
+    </div>
+</template>
+
+<script setup lang="ts">
+import tables from "@/components/table.vue";
+import { salesList} from "@/api";
+import {reactive } from 'vue'
+// 渲染表格
+const columns: any = [
+    { prop: 'date', label: '编号',width:120},
+    { prop: 'receiving_unit', label: '名称',width:300},
+    { prop: 'operation', label: '操作', fixed: 'right',align:'left','min-width':200  }
+]
+
+//请求参数
+const data:any = reactive({
+    initParam: {
+        "endDate": "",
+        "startDate": "",
+        "productId":null,
+        "receivingUnit": ""
+    }
+})
+</script>
+<style lang="scss">
+/* @import url(); 引入css类 */
+
+</style>

src/views/essentialinfo/unit.vue

@@ -0,0 +1,37 @@
+<!-- 单位 -->
+<template>
+    <div class="">
+        <tables ref="TableRef" :requestApi="salesList" :columns="columns" :initParam="data.initParam" :border="true">
+            <template #right="{ row }">
+                <el-button link type="primary" size="small">编辑</el-button>
+                <el-button link type="danger" size="small">删除</el-button>
+            </template>
+        </tables>
+    </div>
+</template>
+
+<script setup lang="ts">
+import tables from "@/components/table.vue";
+import { salesList} from "@/api";
+import {reactive } from 'vue'
+// 渲染表格
+const columns: any = [
+    { prop: 'date', label: '编号',width:120},
+    { prop: 'receiving_unit', label: '名称',width:300},
+    { prop: 'operation', label: '操作', fixed: 'right',align:'left','min-width':200  }
+]
+
+//请求参数
+const data:any = reactive({
+    initParam: {
+        "endDate": "",
+        "startDate": "",
+        "productId":null,
+        "receivingUnit": ""
+    }
+})
+</script>
+<style lang="scss">
+/* @import url(); 引入css类 */
+
+</style>

src/views/essentialinfo/vaccineName.vue

@@ -0,0 +1,61 @@
+<!-- 品种 -->
+<template>
+    <div class="">
+        <tables ref="TableRef" :requestApi="productList" :columns="columns" :initParam="data.initParam" :border="true">
+            <template #right="{ row }">
+                <el-button link type="primary" size="small" @click="HaneditFun(row)">编辑</el-button>
+                <el-button link type="danger" size="small" @click="HandeleteFun(row)">删除</el-button>
+            </template>
+        </tables>
+    </div>
+</template>
+
+<script setup lang="ts">
+import tables from "@/components/table.vue";
+import { productList, productDel, productedit, productadd } from "@/api";
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { reactive } from 'vue'
+// 渲染表格
+const columns: any = [
+    { type: 'index', label: '编号', width: 80, },
+    { prop: 'name', label: '名称', width: 300 },
+    { prop: 'operation', label: '操作', fixed: 'right', align: 'left', 'min-width': 200 }
+]
+
+//请求参数
+const data: any = reactive({
+    initParam: {
+        "name": ""
+    }
+})
+
+/**
+ * 编辑
+ * @param data 列数据
+ */
+const HaneditFun = async (data: any)=>{
+    console.log('编辑',data)
+}
+/**
+ * 删除
+ * @param data 列数据
+ */
+const HandeleteFun = async (data: any) => {
+    console.log('删除',data)
+    ElMessageBox.confirm('删除列数据操作，是否继续?', '提示', {
+        confirmButtonText: '删除',
+        cancelButtonText: '取消',
+        type: 'warning',
+        center: true,
+    }).then(async() => {
+        const reslut:any = await productDel({id:data.id})
+        console.log('删除',reslut)
+        ElMessage.success('删除成功')
+    }).catch(() => {
+        ElMessage.info('已取消删除')
+    })
+}
+</script>
+<style lang="scss">
+/* @import url(); 引入css类 */
+</style>

src/views/layout/routerMenu.vue

@@ -84,11 +84,10 @@ const setTag = (data: any) => {
 }
 
 // .el-menu-item.is-active 只修改2级
-.is-active {
+.el-menu-item.is-active {
   color: var(--el-menu-active-color);
   background: #f6f8fa;
 }
-
 .el-menu {
   border: none !important;
   --el-menu-hover-bg-color: none !important; //解决去掉导航背景色后鼠标放上去颜色为黑色