manhole-cover/src/views/back-stage-management/index.vue

<template>
  <div class="mainBox">
    <div class="title">
      <span>{{activeName === 'first' ? '已预约人数：' + tableDataCustomer.length + '人' : '商务负责人：' + tableDataUser.length + '位'}}</span>永天科技-安博会人员信息管理
    </div>
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="客户信息" name="first"></el-tab-pane>
      <el-tab-pane label="接待人信息" name="second"></el-tab-pane>
    </el-tabs>
    <div class="tableBox">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="" v-if="activeName === 'first'">
          <el-input v-model="formInline.customer" placeholder="客户姓名/联系电话"></el-input>
        </el-form-item>
        <el-form-item label="">
          <el-input v-model="formInline.user" placeholder="接待人/接待人手机号"></el-input>
        </el-form-item>
        <el-form-item label="是否已分配" v-if="activeName === 'first'">
            <el-select v-model="formInline.distribution" placeholder="">
            <el-option label="全部" :value="0"></el-option>
            <el-option label="已分配" :value="1"></el-option>
            <el-option label="未分配" :value="2"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit()">查询</el-button>
          <el-button type="primary" @click="exportExcel()">导出</el-button>
          <el-button type="primary" @click="type = 'add';dialogUserVisible = true" v-if="activeName === 'second'">新增接待人</el-button>
        </el-form-item>
      </el-form>
      <div class="tableList">
        <el-table
            :data="tableData"
            border
            height="100%"
            id="userTable"
            style="width: 100%">
            <template v-if="activeName === 'first'">
                <el-table-column prop="name" label="客户姓名" show-overflow-tooltip></el-table-column>
                <el-table-column prop="phone" label="联系电话" show-overflow-tooltip></el-table-column>
                <el-table-column prop="companyName" label="客户单位名称" show-overflow-tooltip></el-table-column>
                <el-table-column prop="post" label="职位" show-overflow-tooltip></el-table-column>
                <el-table-column prop="sf" label="省份" show-overflow-tooltip></el-table-column>
                <el-table-column prop="dateOfVisit" label="到访日期" show-overflow-tooltip></el-table-column>
                <el-table-column prop="accompany" label="随行人数" show-overflow-tooltip>
                  <template slot-scope="scope">
                    {{ scope.row.accompany === 1 ? '1-3人' : scope.row.accompany === 2 ? '3-7人' : '7人以上' }}
                  </template>
                </el-table-column>
                <el-table-column prop="userName" label="接待人" show-overflow-tooltip></el-table-column>
                <el-table-column prop="userPhone" label="接待人手机号" show-overflow-tooltip></el-table-column>
            </template>
            <template v-if="activeName === 'second'">
                <el-table-column prop="userName" label="接待人"></el-table-column>
                <el-table-column prop="phone" label="接待人手机号"></el-table-column>
                <!-- <el-table-column prop="phone" label="登录账号"></el-table-column> -->
                <!-- <el-table-column prop="zip" label="接待客户数（人）"></el-table-column> -->
            </template>
            <el-table-column label="操作" v-if="!isExportExcel">
                <template slot-scope="scope">
                    <template v-if="activeName === 'first'">
                        <el-button type="text" size="small" v-if="!scope.row.userPhone" @click="type = 'add';currentRow = scope.row;dialogVisible = true">分配接待人</el-button>
                        <el-button type="text" size="small" v-else @click="type = 'edit';currentRow = scope.row;dialogVisible = true">重新分配</el-button>
                    </template>
                    <template v-else-if="activeName === 'second'">
                        <el-button type="text" size="small" @click="type = 'edit';currentRow = scope.row;dialogUserVisible = true">修改</el-button>
                        <!-- <el-button type="text" size="small" style="color:red;" @click="deleteClick(scope.row)">删除</el-button> -->
                    </template>
                </template>
            </el-table-column>
        </el-table>
      </div>
    </div>
    <el-dialog :visible.sync="dialogVisible" :type="type" v-model="currentRow" @getData="getDataCustomer" :tableDataUser="tableDataUser"></el-dialog>
    <el-dialog-user :visible.sync="dialogUserVisible" :type="type" v-model="currentRow" @getData="getDataReception"></el-dialog-user>
  </div>
</template>

<script>
import elDialog from './dialog';
import elDialogUser from './dialog-user';
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
export default {
components: {
    elDialog,
    elDialogUser
},
data() {
    return {
      activeName: "first",
      formInline: {
        user: "",
        customer: "",
        distribution: 0,
      },
      tableData:[],
      tableDataUser:[],
      tableDataCustomer:[],
      dialogVisible:false,
      dialogUserVisible:false,
      isExportExcel:false,
      type:null,
      currentRow:{}
    };
  },
  mounted(){
      this.getDataCustomer()
      this.getDataReception()
  },
  methods: {
    async getDataCustomer(){
        let res = await this.$axios.post('/AF/listAppointment')
        if(res.data.success){
            this.tableDataCustomer = res.data.data
        }
        this.onSubmit()
    },
    async getDataReception(){
        let res = await this.$axios.post('/AF/listUserInfo')
        if(res.data.success){
            this.tableDataUser = res.data.data
        }
        this.onSubmit()
    },
    handleClick(tab, event) {
        console.log(tab, event);
        this.onSubmit()
    },
    // deleteClick(row){

    // },
    exportExcel () {
      this.isExportExcel = true
      this.$nextTick(()=>{
        //指定想要导出表格的id
        let wb = XLSX.utils.table_to_book(document.querySelector('#userTable'))
        wb.Sheets.Sheet1['!cols'] = [ {wpx: 100}, { wpx:100}, { wpx:100}, { wpx:100}, { wpx:100}, { wpx:100}, { wpx:100}, { wpx:100}, { wpx:100}, { wpx:100}, { wpx:100}, { wpx:100},]
        console.log(wb)
        //数据写入
        let wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
        // console.log(wbout)
        try {
          //表格的参数
          FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), 'user.xlsx')
        } catch (e) { 
        if(typeof console !== 'undefined') console.log(e, wbout) 
        }
        this.isExportExcel = false
        return wbout;
      })
    },
    onSubmit() {
        if(this.activeName === 'first'){
            this.tableData = this.tableDataCustomer.filter(val=>{
                return (!this.formInline.user || (val.userName && val.userName.indexOf(this.formInline.user) !== -1) || (val.userPhone && val.userPhone.indexOf(this.formInline.user) !== -1)) && 
                (!this.formInline.customer || val.name.indexOf(this.formInline.customer) !== -1 || val.phone.indexOf(this.formInline.customer) !== -1) && 
                (this.formInline.distribution === 0 || (this.formInline.distribution === 1 && !!val.userPhone) || (this.formInline.distribution === 2 && !val.userPhone)) 
            })
        } else if(this.activeName === 'second'){
            this.tableData = this.tableDataUser.filter(val=>{
                return (!this.formInline.user || (val.userName && val.userName.indexOf(this.formInline.user) !== -1) || (val.phone && val.phone.indexOf(this.formInline.user) !== -1)) 
            })
        } else{
            this.tableData = []
        }
    },
  },
};
</script>

<style lang="scss" scoped>
.mainBox {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 20PX;
  box-sizing: border-box;
  overflow: hidden;
  .title {
    text-align: center;
    font-size: 20PX;
    margin-bottom: 20PX;
    span {
      float: left;
    }
  }
  .tableBox {
    flex: 1;
    display: flex;
    flex-direction: column;
    .tableList{
        flex: 1;
    }
  }
}
</style>