MacaoBankWeb/src/views/wel/index.vue

<template>
  <div>
    <el-row>
      <el-col :span="24">
        <basic-container v-if="permission.home_front">
          <avue-data-rotate :option="optionFront"></avue-data-rotate>
        </basic-container>

        <basic-container v-if="permission.home_quick_menu || permission.home_manage">

          <el-collapse v-model="activeNames" @change="handleChange">

            <div v-if="permission.home_quick_menu">
              <el-row v-for="(item1, index1) in menus" :key="item1.id">
                <el-collapse-item :title="item1.name" :name="index1" >
                  <el-col :span="8" v-for="(item2, index2) in item1.children" :key="item2.id">
                    <el-button type="primary" plain @click="$router.push({path: item2.path})">{{item2.name}}</el-button>
                  </el-col>
                </el-collapse-item>
              </el-row>
            </div>

            <div v-if="permission.home_manage">
              <el-select v-model="selectOrgNo" filterable placeholder="請選擇" style="position: absolute;left: 400px;margin-top: 5px;" @change="selectDept">
                <el-option
                  v-for="item in deptList"
                  :key="item.orgNo"
                  :label="item.deptName"
                  :value="item.orgNo">
                </el-option>
              </el-select>
              <el-collapse-item title="每日、每周、每月待辦事項" :name="5">
                <el-col :span="8" >
                  <avue-crud
                    :option="optionDay"
                    :data="dataDay"
                    :page.sync="pageDay"
                    v-model="form"
                    ref="crud"
                  >
                    <template slot="status" slot-scope="{row, index}">
                      <div align="center">
                        <i v-if="row.checked > 0" style="width:20px;height:20px;border-radius:50%;background-color:green;display: block"></i>
                        <i v-if="!row.checked > 0" style="width:20px;height:20px;border-radius:50%;background-color:red;display: block"></i>
                      </div>
                    </template>
                  </avue-crud>
                </el-col>
                <el-col :span="8" >
                  <avue-crud
                    :option="optionWeek"
                    :data="dataWeek"
                    :page.sync="pageWeek"
                    v-model="form"
                    ref="crud"
                  >
                    <template slot="status" slot-scope="{row, index}">
                      <div align="center">
                        <i v-if="row.checked > 0" style="width:20px;height:20px;border-radius:50%;background-color:green;display: block"></i>
                        <i v-if="!row.checked > 0" style="width:20px;height:20px;border-radius:50%;background-color:red;display: block"></i>
                      </div>
                    </template>
                  </avue-crud>
                </el-col>
                <el-col :span="8" >
                  <avue-crud
                    :option="optionMonth"
                    :data="dataMonth"
                    :page.sync="pageMonth"
                    v-model="form"
                    ref="crud"
                  >
                    <template slot="status" slot-scope="{row, index}">
                      <div align="center">
                        <i v-if="row.checked > 0" style="width:20px;height:20px;border-radius:50%;background-color:green;display: block"></i>
                        <i v-if="!row.checked > 0" style="width:20px;height:20px;border-radius:50%;background-color:red;display: block"></i>
                      </div>
                    </template>
                  </avue-crud>
                </el-col>
              </el-collapse-item>
            </div>
          </el-collapse>
        </basic-container>

        <basic-container v-if="permission.home_backgr">
          <avue-data-rotate :option="optionBackgr"></avue-data-rotate>
        </basic-container>

      </el-col>
    </el-row>

  </div>
</template>

<script>
  import {mapGetters} from "vuex";
  import {getMyInitiated, getToBoReleased, getToBeConfirmed, getMyConfirmation} from "@/api/bank/home";
  import {getHomeCount, getReport} from "../../api/bank/home";
  import {getList} from "@/api/bank/checklist";
  import {getTopMenu, getRoutes} from '@/api/system/menu'
  import {getChildsDept, getDeptTree, getTree} from "../../api/system/dept";

  export default {
    name: "wel",
    data() {
      return {
        activeNames: [0,1,2,3,4,5],
        selectOrgNo: '',
        deptList: [],
        menus: [],
        initiatedCount: 0,
        releaseCount: 0,
        tobeconfirmCount: 0,
        confirmedCount: 0,
        optionFront: {
          span: 8,
          data: [
            {
              click: (item) => {
                this.$router.push({path: "/desk/initiated"})
              },
              count: 0,
              title: '我的發起',
              icon: 'el-icon-warning',
              color: '#409eff'
            }, {
              click: (item) => {
                this.$router.push({path: "/desk/tobeconfirm"})
              },
              count: '53%',
              title: '待處理',
              display: false,
              icon: 'el-icon-view',
              color: '#f39c12'
            }, {
              click: (item) => {
                this.$router.push({path: "/desk/confirmed"})
              },
              count: '0',
              title: '已處理',
              icon: 'el-icon-setting',
              color: '#5daf34'
            }
          ]
        },
        optionManage: {
          span: 8,
          data: [
            {
              click: (item) => {
                // this.$router.push({path: "/desk/initiated"})
                alert("待开发");
              },
              count: 0,
              title: '每日',
              icon: 'el-icon-warning',
              color: 'rgb(49, 180, 141)'
            }, {
              click: function (item) {
                // alert(JSON.stringify(item));
                alert("待开发");
              },
              count: '0',
              title: '每週',
              icon: 'el-icon-view',
              color: '#00a65a'
            }, {
              click: function (item) {
                // alert(JSON.stringify(item));
                alert("待开发");
              },
              count: '0',
              title: '每月',
              display: false,
              icon: 'el-icon-view',
              color: '#00a65a'
            }
          ]
        },
        optionBackgr: {
          span: 8,
          data: [
            /*{
              click: (item) => {
                this.$router.push({path: "/bank/checklist"})
              },
              count: '0/0',
              title: '每日',
              icon: 'el-icon-warning',
              color: 'rgb(49, 180, 141)'
            }, {
              click: (item) => {
                this.$router.push({path: "/bank/checklist"})
              },
              count: '0/0',
              title: '每週',
              icon: 'el-icon-view',
              color: '#00a65a'
            }, {
              click: (item) => {
                this.$router.push({path: "/bank/checklist"})
              },
              count: '0/0',
              title: '每月',
              display: false,
              icon: 'el-icon-view',
              color: '#00a65a'
            },*/
            {
              click: (item) => {
                this.$router.push({path: "/desk/tobeconfirm"})
              },
              count: '0',
              title: '待處理',
              icon: 'el-icon-setting',
              color: '#f39c12'
            },{
              click: (item) => {
                this.$router.push({path: "/desk/initiated"})
              },
              count: 0,
              title: '我的發起',
              icon: 'el-icon-warning',
              color: '#409eff'
            }, {
              click: (item) => {
                this.$router.push({path: "/desk/toberelease"})
              },
              count: '0',
              title: '待發佈',
              display: false,
              icon: 'el-icon-view',
              color: '#00a65a'
            }
          ]
        },
        form: {},

        dataDay: [],
        pageDay: {
          pageSize: 10,
          currentPage: 1,
          total: 0
        },
        optionDay: {
          card: true,
          menu: false,
          align: 'center',
          header: false,
          column: [
            {
              label: "每日核對項目",
              prop: "item",
              type: "select",
              dicUrl: "/api/blade-system/dict/dictionary?code=check_item",
              props:{
                label: "dictValue",
                value: "dictKey",
              },
            },
            {
              label: "區域/支行",
              prop: "deptName",
            },
            {
              label: "狀態",
              prop: "status",
            },
            {
              label: "最近核對時間",
              prop: "checkDate",
              type: "datetime",
            },
          ],
        },


        dataWeek:[],
        pageWeek: {
          pageSize: 10,
          currentPage: 1,
          total: 0
        },
        optionWeek: {
          card: true,
          menu: false,
          align: 'center',
          header: false,
          column: [
            {
              label: "每週核對項目",
              prop: "item",
              type: "select",
              dicUrl: "/api/blade-system/dict/dictionary?code=check_item",
              props:{
                label: "dictValue",
                value: "dictKey",
              },
            },
            {
              label: "區域/支行",
              prop: "deptName",
            },
            {
              label: "狀態",
              prop: "status",
            },
            {
              label: "最近核對時間",
              prop: "checkDate",
              type: "datetime",
            },
          ],
        },


        dataMonth: [],
        pageMonth: {
          pageSize: 10,
          currentPage: 1,
          total: 0
        },
        optionMonth: {
          card: true,
          menu: false,
          header: false,
          align: 'center',
          column: [
            {
              label: "每月核對項目",
              prop: "item",
              type: "select",
              overHidden: true,
              dicUrl: "/api/blade-system/dict/dictionary?code=check_item",
              props:{
                label: "dictValue",
                value: "dictKey",
              },
            },
            {
              label: "區域/支行",
              prop: "deptName",
            },
            {
              label: "狀態",
              prop: "status",
            },
            {
              label: "最近核對時間",
              prop: "checkDate",
              type: "datetime",
            },
          ],
        },

      };
    },
    computed: {
      ...mapGetters(["permission", "userInfo", "menuAll"]),
    },
    created() {
      getChildsDept().then(res => {
        let data = res.data.data;
        for (let i = 0; i < data.length; i++) {
          let item = data[i];
          if (item.orgNo.indexOf('999') == 0){
            data.splice(i,1);
            i--;
          }
        }
        this.deptList = data;
        if (data && data.length > 0){
          this.selectDept(data[0].orgNo)
        }
      });
      getMyInitiated().then(res => {
        const initiatedCount = res.data.data;
        this.optionFront.data[0].count = initiatedCount;
        this.optionBackgr.data[1].count = initiatedCount;
      })
      getToBoReleased().then(res => {
        const tobeReleaseCount = res.data.data;
        this.optionBackgr.data[2].count = tobeReleaseCount;
      });
      getToBeConfirmed().then(res => {
        const tobeConfirmedCount = res.data.data;
        this.optionFront.data[1].count = tobeConfirmedCount;
        this.optionBackgr.data[0].count = tobeConfirmedCount;
      });
      getMyConfirmation().then(res => {
        const confirmedCount = res.data.data;
        this.optionFront.data[2].count = confirmedCount;
      });
    },
    mounted() {
      if (this.menuAll.length > 0){
        this.getBusinessMenu();
      }else{
        getRoutes().then(res => {
          this.menuAll = res.data.data;
          this.getBusinessMenu();
        });
      }
    },
    methods: {
      selectDept(value){
        this.selectOrgNo = value;
        this.onLoadDay(this.pageDay)
        this.onLoadWeek(this.pageWeek)
        this.onLoadMonth(this.pageMonth)
      },
      getBusinessMenu() {
        for (let i = 0; i < this.menuAll.length; i++) {
          let item = this.menuAll[i];
          if (item.name == '業務管理') {
            this.menus = item.children;
          }
        }
      },
      handleChange(val) {
      },
      onLoadDay(page, params = {}){
        params.cycle = "day";
        params.orgNo = this.selectOrgNo;
        getReport(Object.assign(params, page)).then(res => {
          const data = res.data.data;
          this.dataDay = data;
          this.loading = false;
          // this.selectionClear();
        });
        /*getList(page.currentPage, page.pageSize, params).then(res => {
          const data = res.data.data;
          let list = data.records;
          for (let i = 0; i < list.length; i++) {
            let item = list[i];
            let status = false;
            if (item.isChecked == 1){
              let create = item.createTime.split(' ');
              let update = item.updateTime.split(' ');
              let time = update[1].split(':');
              if (create[0] == update[0] && time[0] < 21){
                status = true;
              }
            }
            item.status = status;
          }
          this.pageDay.total = data.total;
          this.dataDay = list;
        });*/
      },
      onLoadWeek(page, params = {}){
        params.cycle = "week";
        params.orgNo = this.selectOrgNo;
        getReport(Object.assign(params, page)).then(res => {
          const data = res.data.data;
          this.dataWeek = data;
          this.loading = false;
          // this.selectionClear();
        });
        /*getList(page.currentPage, page.pageSize, params).then(res => {
          const data = res.data.data;
          let list = data.records;
          for (let i = 0; i < list.length; i++) {
            let item = list[i];
            let status = false;
            if (item.isChecked == 1){
              let create = item.createTime.split(' ');
              let update = item.updateTime.split(' ');
              let time = update[1].split(':');
              if (create[0] == update[0] && time[0] < 21){
                status = true;
              }
            }
            item.status = status;
          }
          this.pageWeek.total = data.total;
          this.dataWeek = list;
        });*/
      },
      onLoadMonth(page, params = {}){
        params.cycle = "month";
        params.orgNo = this.selectOrgNo;
        getReport(Object.assign(params, page)).then(res => {
          const data = res.data.data;
          this.dataMonth = data;
          this.loading = false;
          // this.selectionClear();
        });
      },
    },
  };
</script>

<style scoped>
  >>> .el-font-size {
    font-size: 14px;
  }
  >>> .el-collapse-item__header{
    font-size: 25px;
    font-weight: bold;
  }
  >>> .el-collapse-item__wrap{
    margin: 15px;
  }
  >>> th, td{
    padding: 10px;
    margin: 10px;
  }
</style>