doors-windows-web/src/views/production/Popup/OperatorsPopup.vue

<template>
    <a-modal
      title="业务员列表"
       width="60%"
      :visible="visible"
      :maskClosable="false"
      switchFullscreen
      @cancel="handleCancel"
      @ok='handleOk'
      >
      <a-card :bordered="false" class="top" style="margin-bottom:1%;margin-top:1%">
        <div class="table-page-search-wrapper">
            <a-form layout="inline" @keyup.enter.native="searchQuery">
              <a-row :gutter="24">
                <a-col :md="8" :sm="24">
                  <a-form-item label="名称">
                    <a-input placeholder="请输入" v-model="queryParam.name" ></a-input>
                  </a-form-item>
                </a-col>
                <a-col :md="8" :sm="24">
                  <a-form-item label="编码">
                    <a-input placeholder="请输入" v-model="queryParam.code" ></a-input>
                  </a-form-item>
                </a-col>
                <a-col  :md="8" :sm="24">
                  <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                    <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                    <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
                    <!-- <a @click="handleToggleSearch" style="margin-left: 8px">
                      {{ toggleSearchStatus ? '收起' : '展开' }}
                      <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
                    </a> -->
                  </span>
                </a-col>
              </a-row>
            </a-form>
        </div>
        <a-form-model ref="formRef">
            <a-table
            ref="table"
            size="middle"
            bordered
            id='sonList1'
            :columns="columns"
            rowKey="rowIndex"
            :dataSource="dataSource"
            :pagination="pagination"
            :scroll="{ x: 800, y: 300 }"
            :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
            @change="handleTableChange"
            :customRow ="clickRow"
            >
            </a-table>
        </a-form-model>
    </a-card >
    </a-modal>
  </template>
  <script>
  
      import { FormTypes } from '@/utils/JEditableTableUtil'
      import { JEditableTableModelMixin } from '@/mixins/JEditableTableModelMixin'
      import moment from "moment"
      import { httpAction ,getAction,postAction,putAction} from '@/api/manage'
      export default {
        name: 'OperatorsPopup',
        mixins: [JEditableTableModelMixin],
        components: {
        },
        data() {
          return {
            visible:false,
            selectedRowKeys:[],
            selectedRows:[],
            dataSource:[],
            pagination:{
                current: 1,
                pageSize: 5,
                pageSizeOptions: ['5', '10', '20','50'],
                showTotal: (total, range) => {
                    return range[0] + "-" + range[1] + " 共" + total + "条"
                },
                showQuickJumper: true,
                showSizeChanger: true,
                total: 0
            },
            queryParam:{
                pageNo:1
            },
            columns:[
                {
                    title: '行号',
                    dataIndex: '',
                    key: 'rowIndex',
                    width: 60,
                    align: "center",
                    customRender:function (t, r, index) {
                        return parseInt(index)+1;
                    }
                },
                {
                    title: '名称',
                    align:"center",
                    dataIndex: 'Name',
                    ellipsis: true,
                },
                {
                    title: '编码',
                    align:"center",
                    dataIndex: 'Code',
                    ellipsis: true,
                },
                {
                    title: '部门',
                    align:"center",
                    dataIndex: 'DeptName',
                    ellipsis: true,
                },
            ]
          }
        },
        created() {
          
        },
        methods: {
            handleCancel(){
                this.visible=false
                this.dataSource = [] 
                this.selectedRowKeys = []
                this.selectedRows = []
            },
            handleOk(){
                if(this.selectedRowKeys.length!==1){
                    this.$message.warning('请选择一条数据！')
                }else{
                    this.$emit('okData',this.selectedRows[0])
                    this.handleCancel()
                }
            },
            getData(data,dept){
                this.queryParam.Org = data
                this.queryParam.DeptId = dept
                this.selectedRowKeys = []
                this.selectedRows = []
                getAction('/production/safetyStock/selectOperators',this.queryParam).then(res=>{
                        if(res.success){
                          this.dataSource = res.result.records
                          this.pagination = {
                            total: res.result.total,
                            current: res.result.current,
                            pageSize: res.result.size
                          }
                        }else{
                          this.$message.error(res.message);
                          
                        }
                })
            },
            handleTableChange(pagination, filters, sorter) {
                this.queryParam.pageNo = pagination.current
                this.queryParam.pageSize = pagination.pageSize
                this.getData(this.queryParam.Org,this.queryParam.DeptId)
            },
            searchQuery(){
                this.queryParam.pageNo = 1
                this.getData(this.queryParam.Org,this.queryParam.DeptId)
            },
            searchReset(){
                this.queryParam.name = ''
                this.queryParam.code = ''
                this.getData(this.queryParam.Org,this.queryParam.DeptId)
            },
            onSelectChange(selectedRowKeys, selectionRows) {
              this.selectedRowKeys = selectedRowKeys;
              this.selectedRows = selectionRows;
            },
            clickRow(record, index){
              return {
                on: {
                  click: () => {
                   
                    this.selectedRowKeys=[]
                    this.selectedRows=[]
                    this.selectedRowKeys.push(index)
                    this.selectedRows.push(record)
                  },
                }
              }       
           },
        }
      }
  </script>
  
  <style scoped lang="less"> 
    /* @import '~@assets/less/common.less' */
    /deep/.ant-input{
        height:29px;
    }
    /deep/.ant-select-selection--single {
        height: 29px;
    }
    /deep/.ant-select{
        font-size: 12px;
    }
    /deep/.ant-form label{
        font-size: 12px;
    }
    /deep/.table-page-search-wrapper .ant-form-inline .ant-form-item{
        margin-bottom:9px
    }
    /deep/.moddle>.ant-card-body{
        padding-bottom:0px;
        padding-top: 12px;
    }
    /deep/.top>.ant-card-body{
        padding-bottom: 12px;
        padding-top: 12px;
    }
    /deep/.ant-btn{
        height:28px
    }
    /deep/.ant-modal-body{
        padding-bottom: 0px;
        padding-top: 0px;
    }
    // /deep/.ant-modal-body{
    //     background: #f0f2f5;
    // }
    /deep/.ant-modal-content{
        background: #f0f2f5;
    }
    /deep/.ant-card-body .table-operator {
        margin-bottom: 0px;
    }
    /deep/.three>.ant-card-body{
        padding-bottom:12px;
        padding-top: 12px;
    }
    /deep/.bottom>.ant-card-body{
        padding-bottom:0px;
        padding-top: 12px;
    }

    /deep/.ant-calendar-picker{
        min-width: 0px !important;  
    }
    /deep/.sonItem {
        margin-bottom:0px !important
    }
    /deep/#sonList1>.ant-spin-nested-loading>.ant-spin-container>.ant-table>.ant-table-content>.ant-table-scroll>.ant-table-body>.ant-table-fixed>.ant-table-tbody > tr > td {
        padding: 8px 8px !important;
    }
    /deep/.ant-table-fixed-header .ant-table-scroll .ant-table-header{
        width: calc(100% + 9px);//减去滚动条的宽度
    }
  </style>