doors-windows-web/src/views/production/Popup/unitPopup.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>
                <!-- <template v-if="toggleSearchStatus">  -->
                    <a-col :md="8" :sm="24">
                        <a-form-item label="Code">
                            <a-input placeholder="请输入" v-model="queryParam.code" ></a-input>
                        </a-form-item>
                    </a-col>
                <!-- </template> -->
                <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'
                :loading="loading"
                :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: 'inventoryPopup',
        mixins: [JEditableTableModelMixin],
        components: {
        },
        data() {
          return {
            visible:false,
            queryParam:{},
            selectedRowKeys:[],
            selectedRows:[],
            dataSource:[],
            loading:false,
            pagination:{
                current: 1,
                pageSize: 5,
                pageSizeOptions: ['5', '10', '20'],
                showTotal: (total, range) => {
                    return range[0] + "-" + range[1] + " 共" + total + "条"
                },
                showQuickJumper: true,
                showSizeChanger: true,
                total: 0
            },
            queryParam:{
                pageNo:1
            },
            record:{},
            toggleSearchStatus:false,
            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: 'Code',
                    align:"center",
                    dataIndex: 'code',
                    ellipsis: true,
                },
            ],
            whatUnit:'',
          }
        },
        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.whatUnit)
                    this.handleCancel()
                }
            },
            getData(data){
                this.loading = true 
                this.queryParam.Org = data
                this.selectedRowKeys = []
                this.selectedRows = []
                getAction('/production/safetyStock/selectUnit',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);
                          
                        }
                }).finally(()=>{
                    this.loading = false
                })
            },
            searchQuery(){
                this.getData(this.queryParam.Org)
            },
            searchReset(){
                this.queryParam.name = ''
                this.queryParam.code = ''
                this.getData(this.queryParam.Org)
            },
            handleTableChange(pagination, filters, sorter) {
                this.queryParam.pageNo = pagination.current
                this.queryParam.pageSize = pagination.pageSize
                this.getData()
            },
            onSelectChange(selectedRowKeys, selectionRows) {
              this.selectedRowKeys = selectedRowKeys;
              this.selectedRows = selectionRows;
            },
            handleToggleSearch(){
                this.toggleSearchStatus=!this.toggleSearchStatus
            },
            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>