cmanager/src/views/tenant/main/serve/Dialog/pushService.vue

<template>
  <el-drawer
    size="100%"
    append-to-body
    title="推送服务"
    :visible.sync="visible"
    @close="changeVisible"
  >

     <div>
       <div>
         <el-form :inline="true" size="small" :model="formInline" label-width="70px" label-position="right" class="demo-form-inline">
           <el-row :gutter="20">
             <el-col :span="4">
               <el-form-item label="用户名">
                 <el-input v-model="formInline.userName" style="width: 150px" placeholder="用户名"></el-input>
               </el-form-item>
             </el-col>
             <el-col :span="4">
               <el-form-item label="服务类型">
                 <el-select v-model="formInline.groupId"  style="width: 150px" placeholder="请选择"@change="groupNameChange">
                   <el-option
                     v-for="item in leftServeOptions"
                     :key="item.id"
                     :label="item.groupName"
                     :value="item.id">
                   </el-option>
                 </el-select>
               </el-form-item>
             </el-col>
             <el-col :span="4">
               <el-form-item>
                 <el-button type="primary" style="width: 80px" size="small" @click="leftSearch">搜索</el-button>
               </el-form-item>
             </el-col>
           </el-row>
         </el-form>
       </div>
       <div class="content">
         <!--  用户板块  -->
         <div class="content-left">
           <avue-crud
             ref="crud1"
             :data="leftUserDataList"
             :option="leftUserOptions"
             :table-loading="leftLoading"
             :page.sync="leftPages"
             @current-change="leftCurrentPageChange"
             @selection-change="leftSelectionChange"
           >
             <template slot="menuLeft">
               <el-button type="primary" style="width: 80px" size="small" @click="onSubmit">推送政策</el-button>
             </template>
           </avue-crud>
         </div>
         <!--  操作  -->
         <div class="content-center">
           <div><el-button type="primary" size="small">匹配政策</el-button></div>
           <div style="margin-top: 30px"><el-button type="primary" size="small">匹配岗位</el-button></div>
         </div>
         <!--  列表  -->
         <div class="content-right">
           <avue-crud
             :data="tableData"
             :option="leftUserOptions"
             :page.sync="leftPages"
             @current-change="leftCurrentPageChange"
             @selection-change="leftSelectionChange"
           >
           </avue-crud>
         </div>
       </div>
     </div>
  </el-drawer>
</template>

<script>
import { getListAllByLabels, getListGroupByLabels, getServeAllPolicyList } from "@/api/tenant/serve.js";
const pages = { layout: 'prev, pager, next, jumper', total: 0, size: 10, current: 1 }
let leftUserOptions = {
  dateBtn: false,
  addBtn: false,
  editBtn: false,
  delBtn: false,
  height: "auto",
  reserveSelection: false,
  border: true,
  columnBtn: false,
  refreshBtn: false,
  menu:false,
  tip: false,
  selection: true,
  column: [{
    label: '企业名称',
    prop: 'companyName',
  }, {
    label: '用户名',
    prop: 'name',
  },{
    label: '身份证',
    prop: 'idNumber',
  }]
}
export default {
  data() {
    return {
      formInline: {},
      tableData: [],
      leftServeOptions: [],
      leftUserDataList: [],
      leftUserPages: {},
      leftUserSelections: [],
      leftPages: Object.assign({}, pages),
      leftUserOptions: Object.assign({}, leftUserOptions),
      leftLoading: false,
    }
  },
  props: {
    visible: { default: false, type: Boolean },
    rowData: { default: null, type: Function  },
    changeVisible: { default: null, type: Function  },
  },
  watch: {
    visible(val) {
      val ? this.onPageLoad() : this.onPageInit()
    }
  },
  methods: {
    onPageLoad() {
      console.log('row', this.rowData)
      if(!this.rowData) return
      this.getLeftServeList()
      this.getLeftUserList()
    },
    onPageInit() {
      this.formInline = {}
      this.tableData = []
      this.leftServeOptions = []
      this.leftUserDataList = []
      this.leftUserSelections = []
      this.leftUserPages = Object({}, pages)
    },
    leftSearch() {
      console.log('submit!', this.formInline);
    },
    leftCurrentPageChange(current) {
      this.leftPages.current = current
      this.getLeftUserList()
    },
    leftSelectionChange(val) {
      console.log(val)
      this.leftUserSelections = val
    },
    groupNameChange() {
      delete this.formInline.userName
      this.getLeftUserList('serve')
    },

    async getLeftUserList(type) {
      let params = {
        ...this.formInline,
        ...this.leftPages,
        labels: this.rowData.serveLabels,
      }
      // params.labels = '未分组'
      this.leftLoading = true
      let resData = await getListAllByLabels(params)
      if ( resData.data.code === 200 ) {
        const { records, total, size, current } = resData.data.data
        this.leftUserDataList = records
        this.leftPages = { total, size, current }
        this.leftLoading = false
      }
    },
    async getLeftServeList() {
      let params = { labels: this.rowData.serveLabels }
      // params.labels = '未分组'
      let resData = await getListGroupByLabels(params)
      if ( resData.data.code === 200 ) {
        this.leftServeOptions = resData.data.data
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.content{
  display: grid;
  grid-template-columns: 500px 100px 1fr;
  grid-gap: 20px;
  .content-left{

  }
  .content-center{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  .content-right{

  }
}
</style>