yos_web/src/SDrpManagement/myaccountclass/index.vue

<template>
  <div>
    <normal-layout>
      <div slot="content">
        <div class="container">
          <el-row :gutter="20">
            <el-col v-for="(item,index) in acountlist" :key="index" :span="6" class="mt-10" @click.native="handleClick(index)">
              <div class="acccounet__panel" :style="activeName == index?{border:'1px solid #d8dde8'}:''">
                <p class="normal-margin">{{item.accountname}}</p>
                <p class="normal-title" style="font-size:1.825rem" :style="activeName == index?{color:'#3874f6'}:''"><small>¥</small>&nbsp;{{tool.formatAmount(item.balance)}}</p>
                <div class="score">
                  <p style="margin-top:16px">信用额度:{{item.creditquota}}</p>
                </div>
              </div>
            </el-col>
          </el-row>
          <tableLayout :layout="tablecols" :data="list" :opwidth="200" :custom="true" :fixedName="'operation'" height="calc(100vh - 390px)">
            <template v-slot:customcol="scope">
              <div v-if="scope.column.columnname == 'type'">
                {{ scope.column.data.type ? '收入凭证' : '支出凭证' }}
              </div>
              <div v-else>
                {{scope.column.data[[scope.column.columnname]]?scope.column.data[[scope.column.columnname]]:'--'}}
              </div>
            </template>
            <template v-slot:opreation="scope">
              <editPrice v-if="tool.checkAuth($route.name,'update')" class="inline-16" :data="scope.data"/>
              <delete-btn 
                @deleteCreate="deleteCreate" 
                v-if="tool.checkAuth($route.name,'delete')" 
                :id="scope.data.sa_itempriceadjust_itemsid" 
                @deleteSuccess="$refs.basicLayout.listData()" 
                nameId="20221025095404" 
                nameKey="sa_itempriceadjust_itemsids"
              />
            </template>
          </tableLayout>
          <div style="margin-top:16px;text-align:right">
            <el-pagination
              background
              small
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="param.content.pageNumber"
              :page-size="param.content.pageSize"
              layout="total, prev, pager, next, jumper"
              :total="total">
            </el-pagination>
          </div>
        </div>
      </div>
    </normal-layout>
  </div>
</template>

<script>
export default {
  data () {
    return {
      activeName:0,
      acountlist:[],
      list:[],
      param: {
        "id":20230111103403,
        "content": {
          "pageNumber":1,
          "pageSize":20,
          "sa_accountclassid":""
        }
      },
      total:0
    }
  },
  async created () {
  },
  methods:{
    async listData () {
      const res = await this.$api.requested({
        id:"20221008145903",
        content:{
          type:1
          // "sys_enterpriseid":JSON.parse(window.sessionStorage.getItem('accountinfo')).enterprise.sys_enterpriseid
        }
      })
      this.acountlist = res.data
      console.log(this.acountlist);
      
      this.accountMx()
    },
    async accountMx () {
      this.param.content.sa_accountclassid = this.acountlist[this.activeName].sa_accountclassid
      const res = await this.$api.requested(this.param)
      this.list = res.data.rows
    },
    handleClick (index) {
      this.activeName = index
      this.accountMx()
    },
     handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.param.content.pageSize = val
      this.accountMx()
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.param.content.pageNumber = val
      this.accountMx()
    },
  },
  mounted () {
    this.listData()
  },
  created () {
    this.tablecols = this.tool.tabelCol(this.$route.name)['accountMoneyDetailTable'].tablecols
  },
}

</script>
<style>
</style>
<style scoped>
.acccounet__panel{
  padding: 10px;
  line-height: 30px;
  border:1px solid #f1f2f3;
  color:#666;
  border-radius: 5px;
  cursor: pointer;
}
</style>