yos_web/src/components/normal-basic-layout/index.vue

<template>
  <div class="basic__layout__panel">
    <div>
      <div class="layout-header-panel container normal-panel">
        <div class="flex-align-center flex-between">
          <div class="normal-margin flex-align-center">
            <p style="font-size:26px;font-weight:300">{{acitveApp.meta.title}}&nbsp;<i @click="addToAsideBar" style="color:#999" class="el-icon-star-off"></i></p>
            <el-divider direction="vertical"></el-divider>
            <div class="flex-align-center">
              <cpAdd v-if="tool.checkAuth($route.name,'insert')" :formPath="formPath" :oldFormPath="oldFormPath" @onAddSuccess="listData(param.content.pageNumber = 1)"></cpAdd>
              <el-button-group v-if="tool.checkAuth($route.name,'delete')" class="inline-16">
                <el-button type="default" :disabled="selection.length === 0" size="small" @click="deleteData">删 除</el-button>
              </el-button-group>
              <!-- <el-button class="inline-16" size="small" type="primary" plain>导 入</el-button> -->
              <excel :tablecols="layout" :param="param" :total="total" :excelTitle="routerName"></excel>
            </div>
            <slot name="titleRight"></slot>
          </div>
          <div class="normal-margin">
            <setColumn :layout="layout" @changeColumn="changeColumn"></setColumn>
            <setFixed :data="tableLayout" @onFixedClick="onFixedClick"></setFixed>
            <i class="el-icon-refresh" @click="listData(param.content.pageNumber = 1,param.content.where.condition = '')"></i>
          </div>
        </div>
        <div class="flex-align-center">
          <!-- <el-radio-group v-if="options" class="inline-16" v-model="listType" size="small">
            <el-radio-button label="table" ><i class="el-icon-tickets"></i></el-radio-button>
            <el-radio-button label="card"><i class="el-icon-menu"></i></el-radio-button>
          </el-radio-group> -->
          <slot name="custom"></slot>
          <el-input placeholder="请输入搜索内容" suffix-icon="el-icon-search" v-model="param.content.where.condition" @keyup.native.enter="listData(param.content.pageNumber = 1)" @clear="listData(param.content.pageNumber = 1)" style="width:200px" size="small" class="input-with-select inline-16" clearable>
          </el-input>
        </div>
      </div>
      <div class="normal-panel flex-align-center" style="padding:0 16px">
        <slot name="tableLeft"></slot>
        <div style="flex:0 1 auto;width: 100%;" v-if="listType === 'table' && refreshTable">
          <tableTemp ref="table" :layout="tableLayout" :tableName="tableName" :custom="true" :data="list" :fixRightData="fixRightData" :fixLeftData="fixLeftData" @checkboxCallBack="checkboxCallBack">
            <template v-slot:customcol="scope">
              <slot :data="scope" name="tbList"></slot>
            </template>
            <template v-slot:opreation="scope">
              <drawerTemp class="inline-16" v-if="detailPath" :data="scope.data" :detailPath="detailPath" :idName="idName" @onSuccess="listData"></drawerTemp>
              <slot :data="scope" name="tbOpreation"></slot>
            </template>
          </tableTemp>
          <div class="container normal-panel" style="text-align:right">
            <el-pagination
              background
              small
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[20, 50, 100, 200]"
              layout="total,sizes, prev, pager, next, jumper"
              :total="total">
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'
export default {
  props:['tableName','idName','tableData','apiId','formPath','oldFormPath','options','autoQuery','detailPath'],
  components:{
    tableTemp: () => import('./modules/table.vue'),
    setColumn: () => import('./modules/setColumn.vue'),
    cpAdd: () => import('./modules/cpAdd'),
    cpEdit: () => import('./modules/cpEdit'),
    setFixed: () => import('./modules/setFixed'),
    drawerTemp:() =>  import('./drawerDetail/index'),
    excel:() =>  import('@/components/export_excel/index.vue'),
    cardTemp:() => import('./modules/cardList.vue')
  },
  computed:{
    ...mapGetters({
      acitveApp:'acitveApp',
      searchValue:'searchValue'
    })
  },
  data () {
    return {
      listType:'table',
      routerName:'',
      select:'',
      param:{
        content:{
          "isExport":0,
          "pageNumber": 1,
          "pageSize": 20,
          "where": {
            "condition": ""
          }
        }
      },
      layout:[],
      fixRightData:['operation'],
      fixLeftData:[],
      tableLayout:[],
      selection:[],
      list:[],
      total:0,
      currentPage:0,
      refreshTable:true
    }
  },
  methods:{
    async listData () {
      this.param.id = this.apiId.query
      const res = await this.$api.requested(this.param)
      this.list = res.data
      this.total = res.total
      this.currentPage = res.pageNumber
      /* 请求的数据暴露出去 二次处理 */
      this.$emit('listData',this.list)
    },
    selectChange () {
      this.param.content.pageNumber = 1
      this.param.content.where.status = this.select
      this.listData()
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.param.content.pageSize = val
      this.listData()
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.param.content.pageNumber = val
      this.listData()
    },
    checkboxCallBack (val) {
      this.selection = val
      this.$emit('checkboxCallBack',val)
    },
    deleteData () {
      this.$confirm('确定删除这些数据吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let param = {
          "id": this.apiId.del,
          "content":{}
        }
        if (this.idName instanceof Array) { //判断传入的类型是多个还是单个idname
          let obj = {}
          this.idName.forEach(e=>{
            obj[e] = ''
          })
          param.content[`${this.idName[0]}s`] = this.selection.map(e=>{
            Object.keys(obj).map((key,item)=>{
              obj[key] = e[key]
            })
            return obj
          })
        } else {
          param.content[`${this.idName}s`] = this.selection.map(e=>{
            return e[this.idName]
          })
        }
        const res = await this.$api.requested(param)
        this.tool.showMessage(res,()=>{
          this.listData()
        })
      }).catch((err) => {
        
        console.log(err)
        this.$message({
          type: 'info',
          message: '已取消删除'
        });          
      });
    },
    onFixedClick (right,left) {
      this.fixRightData = right
      this.fixLeftData = left
      this.$refs['table'].checkFixed()
    },
    // 筛选列
    changeColumn (arr) {
      this.tableLayout = arr
      this.refreshTable= false
      setTimeout(() => {
        this.refreshTable= true
      }, 0);
    },
    // 创建快捷应用
    async addToAsideBar () {
      const res = await this.$api.requested({
        "classname": "sysmanage.develop.userauthforweb.userauth",
        "method": "create_usershortcuts",
        "content": {
          "systemappid":this.acitveApp.systemappid
        }
      })
      this.$store.dispatch('setAppMenu')
    },
  },
  mounted () {
    this.autoQuery === false?'':this.listData()
  },
  created () {
    this.routerName = this.$route.meta.title
    this.param.content.where.condition = this.searchValue
    this.layout = this.tool.tabelCol(this.$route.name)[this.tableName].tablecols
    this.tableLayout = this.layout
    this.$emit('listCreate',this.param)
  },
}

</script>
<style>
.layout-header-panel .el-input-group__append, .el-input-group__prepend{
  background-color: #fff !important;
  color: #999 !important;
  border: 1px solid #dcdfe6 !important;
  cursor: pointer;
}
</style>
<style scoped>

/* .basic__layout__panel{
  padding: 16px 0;
} */
.card__list{
  display: flex;
}
</style>