baozhida-deliver-medicine/src/views/page/statisticalManagement.vue

<template>
  <!-- 统计分析管理 -->
  <div>
    <actionBar :operateList="operateList" :formList="formList" :ruleForm="searchRuleForm" @openModel="openModel"
      @searchProtocol="searchProtocol"></actionBar>
    <div class="card_content_interior">
      <div class="left_interior">
        <div style="display: flex;margin-bottom: 10px;">
          <el-checkbox :indeterminate="isIndeterminate" v-model="checked" @change="checkAll">全选</el-checkbox>
          <div class="title_invert center_in" @click="Inverse">反选</div>
        </div>
        <el-checkbox-group v-model="checkedList" @change="checkboxChange">
          <el-checkbox class="card_checkbox_analyse" :label="item.code" :key="index" :checked="item.checked"
            v-for="(item,index) in list">
            <div class="analyse_title">
              <div class="item_title1">{{item.title}}</div>
              <div class="item_title2">{{item.code}}</div>
            </div>
          </el-checkbox>
        </el-checkbox-group>
      </div>
      <div class="right_interior">
        <!-- 表单 -->
        <tables :tableList="tableList" :tableData="tableData" @buttonData="buttonData"></tables>
        <!-- 分页 -->
        <div v-if="Total">
          <pagination :total="Total" :currentPage="Pagination.PageIndex" @changeSize="changeSize"
            @changeCurrent="changeCurrent">
          </pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import actionBar from '@/components/actionBar'
  import tables from '@/components/tables'
  import pagination from '@/components/pagination'
  import {
    employee,
  } from "./statistics.js";
  export default {
    name: 'statisticalManagement',
    components: {
      actionBar,
      tables,
      pagination
    },
    data() {
      return {
        operateList: [{
          type: 'add',
          title: '导出Excel',
          icon: 'el-icon-plus',
          colour: 'warning'
        }, {
          type: 'import',
          title: '下载PDF',
          icon: 'el-icon-upload',
        }],
        formList: [{
          type: 'input',
          label: '名称',
          field: 'name',
          placeholder: '请输入名称',
        }, {
          type: 'input',
          label: 'SN',
          field: 'sn',
          placeholder: 'SN',
        }],
        searchRuleForm: {
          name: '',
          sn: '',
          status: '',
        },
        searchValue: {},
        checked: '',
        checkedList: [],
        list: [],
        Pagination: {
          PageIndex: 1,
          PageSize: 10,
        },
        Total: 1,
        tableData: [],
        tableList: employee(),
        isIndeterminate: true,
      }
    },
    methods: {
      // 搜索
      searchProtocol(value) {
        this.Pagination.PageIndex = 1
        this.searchValue = value
        // this.getList()
      },
      openModel(type) {},
      buttonData(row, type) {},
      checkboxChange(value) {
        let checkedCount = value.length;
        for (let i = 0; i < this.list.length; i++) {
          let flag = value.includes(this.list[i].code);
          if (flag) {
            this.list[i].checked = true
          } else {
            this.list[i].checked = false
          }
        }
        this.checkedList = value;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.list.length;
      },
      // 全选
      checkAll() {
        this.checkedList = []
        for (let i = 0; i < this.list.length; i++) {
          this.$set(this.list[i], 'checked', true)
        }
        this.list.forEach(item => {
          if (item.checked) {
            this.checkedList.push(item.code)
          }
        })
        this.isIndeterminate = false;
      },
      // 反选
      Inverse() {
        this.checkedList = []
        for (let i = 0; i < this.list.length; i++) {
          let flag = this.list[i].checked;
          this.$set(this.list[i], 'checked', !flag)
        }
        this.list.forEach(item => {
          if (item.checked) {
            this.checkedList.push(item.code)
          }
        })
      },
      changeSize(val) {
        this.Pagination.PageSize = val
        // this.getList()
      },
      changeCurrent(val) {
        this.Pagination.PageIndex = val
        // this.getList()
      },
    }
  }
</script>

<style lang="scss">
  .card_content_interior {
    display: flex;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .05);
    margin-top: 15px;
  }

  .left_interior {
    width: 20%;
    padding: 10px;
  }

  .right_interior {
    width: 80%;
  }

  .span-ellipsis {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-right: 20px;
  }

  .card_checkbox_analyse {
    width: 100%;
    padding: 10px 0px;
    margin-right: 0px !important;
  }

  .analyse_title {
    display: flex;
    margin-left: 20rpx;
    flex-direction: column;

    .item_title1 {
      font-size: 16px;
    }

    .item_title2 {
      font-size: 14px;
      margin-top: 5px;
    }
  }

  .title_invert {
    font-size: 14px;
    cursor: pointer;
    color: red;
    margin-left: 10px;
  }
</style>