xg

src/views/components/DepartmentList.vue

@@ -0,0 +1,121 @@
+<template>
+    <div class="left">
+        <div class="name">科室名称</div>
+        <div>
+            <el-input v-model="querydepartmen.departmentName" placeholder="请输入科室名称" clearable
+                @keyup.enter.native="Departmentlist" />
+        </div>
+        <div class="listitem">
+            <div :class="itemid == null ? 'allactive' : 'all'" @click="itemdata()">
+                全部
+            </div>
+            <span class="count">{{ count }}</span>
+        </div>
+        <div class="listitem" v-for="(item, index) in DepartmentoList" :key="index" @click="itemdata(item)">
+            <div :class="itemid == item.id ? 'allactive' : 'all'">
+                {{ item.departmentName }}
+            </div>
+            <span class="count">{{ item.countNum }}</span>
+        </div>
+    </div>
+</template>
+
+<script>
+import { listOperationNum } from "@/api/operationInfo/operationInfo";
+export default {
+    name: "DepartmentList",
+    data() {
+        return {
+            //校验
+            itemid: null,
+            // 表格数据
+            DepartmentoList: [],
+            count: '',
+            // 查询参数
+            querydepartmen: {
+                departmentName: "",
+            },
+        };
+    },
+    created() {
+        this.Departmentlist();
+    },
+    watch: {
+        name(val) {
+            this.querydepartmen.departmentName = val
+            this.Departmentlist();
+        },
+    },
+    mounted() {
+    },
+    methods: {
+        // 左侧科室
+        itemdata(item) {
+            if (item) {
+                this.itemid = item.id
+            } else {
+                this.itemid = null
+            }
+        },
+        // 左侧科室
+        Departmentlist() {
+            listOperationNum(this.querydepartmen).then(response => {
+                this.DepartmentoList = response.data;
+                let sum = 0;
+                this.DepartmentoList.forEach((item) => {
+                    if (item.countNum != null) {
+                        sum += item.countNum;
+                    }
+                    this.count = sum;
+                });
+            });
+        },
+    }
+};
+</script>
+<style lang="scss" scoped>
+::v-deep .el-input-number .el-input__inner {
+    text-align: left;
+}
+
+.left {
+    // height: calc(100vh - 119px);
+    height: 100%;
+    overflow: auto;
+
+    .name {
+        font-weight: 700;
+        margin-bottom: 10px;
+    }
+
+    .listitem {
+        width: 100%;
+        height: 50px;
+        border-bottom: 1px solid #dcdfe6;
+
+        .count {
+            display: inline-block;
+            position: relative;
+            // right: -172px;
+            left: 210px;
+            color: #a4a6aa;
+            top: -35px;
+            font-size: 13px;
+        }
+
+        .all {
+            height: 50px;
+            line-height: 50px;
+            padding-left: 13px;
+        }
+
+        .allactive {
+            background: #e8f4ff;
+            height: 50px;
+            line-height: 50px;
+            padding-left: 13px;
+            border-left: 3px solid #4d9de7;
+        }
+    }
+}
+</style>