doors-windows-web/src/views/production/safetyStock/encoderList.vue

<template>
    <div>
        <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="4" :sm="24">
                  <a-form-item label="料品名称">
                    <a-input placeholder="请输入" v-model="queryParam.inventoryName" ></a-input>
                  </a-form-item>
                </a-col>
                <a-col  :md="4" :sm="24">
                  <a-form-item label="料品类别">
                    <a-input placeholder="请输入" v-model="queryParam.classifyName"></a-input>
                  </a-form-item>
                </a-col>
                <a-col :md="4" :sm="24">
                    <a-form-item label="料品主单位">
                        <a-input placeholder="请输入" v-model="queryParam.unit" ></a-input>
                    </a-form-item>
                  </a-col>
                  <a-col :md="4" :sm="24">
                    <a-form-item label="料品单位">
                      <a-input placeholder="请输入" v-model="queryParam.auxiliaryUnit"></a-input>
                    </a-form-item>
                  </a-col>
                <template v-if="toggleSearchStatus"> 
                  <a-col :md="4" :sm="24">
                    <a-form-item label="颜色">
                      <a-input placeholder="请输入" v-model="queryParam.color" ></a-input>
                    </a-form-item>
                  </a-col>
                  <a-col :md="4" :sm="24">
                    <a-form-item label="宽/高">
                      <a-input placeholder="请输入" v-model="queryParam.widthHeight"></a-input>
                    </a-form-item>
                  </a-col>
                  <a-col :md="4" :sm="24">
                    <a-form-item label="支长">
                      <a-input placeholder="请输入" v-model="queryParam.fixedLength"></a-input>
                    </a-form-item>
                  </a-col>
                  <a-col :md="4" :sm="24">
                    <a-form-item label="料品属性">
                      <a-input placeholder="请输入" v-model="queryParam.attribute"></a-input>
                    </a-form-item>
                  </a-col>
                </template>
                <a-col  :md="4" :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-card>
        
        <a-card class="middle" style="margin-bottom:1%">
          <!-- 操作按钮区域 -->
          <div class="table-operator">
            <a-button  type="danger" size="small" @click='addList'>新增</a-button>
            <a-button  size="small" @click='editList'>修改</a-button>
            <a-button type="danger" size="small" @click="delectList">删除</a-button>
            
            <a-button  size="small" @click="detailList">详情</a-button>
            <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" @change="handleUploadChange"  :action="fileUpload">
               <a-button  size="small">导入</a-button>
            </a-upload>
            <a-button size="small" @click="exportList('编码器列表')">导出</a-button>
            <a-button size="small" @click="syncList">同步至u9</a-button>
          </div>
      
          <!-- table区域-begin -->
          <div>  
            <a-table
              ref="table"
              size="middle"
              bordered
              rowKey="id"
              :columns="columns"
              :dataSource="dataSource"
              :pagination="ipagination"
              
              :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
              @change="handleTableChange"
              :customRow ="clickRow"
              >
      <!-- :scroll="{ x: 1500, y: 300 }" -->
            </a-table>
          </div>
          <AddEncoder ref="AddEncoder" @ok="getTableList"></AddEncoder>
          <EncoderDetail ref="EncoderDetail" @ok="getTableList"></EncoderDetail>
        </a-card>
    </div>
    </template>
      
      <script>
        import alertModal from '../../../plugins/modal'
        import AddEncoder from './modules/AddEncoder'
        import EncoderDetail from './modules/EncoderDetail'
        import { JeecgListMixin } from '@/mixins/JeecgListMixin'
        import moment from 'dayjs'
        import { httpAction ,getAction,postAction,putAction,deleteAction,downFile} from '@/api/manage'
        export default {
          name: "SafetyStockList",
          mixins: [JeecgListMixin],
          components: {
            AddEncoder,
            EncoderDetail
          },
          data () {
            return {
              description: '编码器列表页面',
              queryParam:{},
              selectedRowKeys:[],
              selectedRow:[],
              documentData:[],
              toggleSearchStatus:false,
              dataSource:[{}],
              ipagination:{
                current: 1,
                pageSize: 10,
                pageSizeOptions: ['10', '20', '30'],
                showTotal: (total, range) => {
                    return range[0] + '-' + range[1] + ' 共' + total + '条'
                },
                showQuickJumper: true,
                showSizeChanger: true,
                total: 0
              },
              // 表头
              columns: [
                {
                  title: '行号',
                  dataIndex: '',
                  key: 'rowIndex',
                  width: 60,
                  align: "center",
                  customRender:function (t, r, index) {
                    return parseInt(index)+1;
                  }
                },
               {
                  title: '料品名称',
                  align:"center",
                  dataIndex: 'inventoryName',
                  ellipsis: true,
    
                },
                {
                  title: '料品类别',
                  align:"center",
                  dataIndex: 'classifyName',
                  ellipsis: true,
    
                },
                {
                  title: '料品主单位',
                  align:"center",
                  dataIndex: 'unit',
                  ellipsis: true,
    
                },
                {
                  title: '料品单位',
                  align:"center",
                  dataIndex: 'auxiliaryUnit',
                  ellipsis: true,
    
                },
                {
                  title: '颜色',
                  align:"center",
                  dataIndex: 'color',
                  ellipsis: true,
    
                },
                {
                  title: '支长',
                  align:"center",
                  dataIndex: 'fixedLength',
                  ellipsis: true,
    
                },
                {
                  title: '宽/高',
                  align:"center",
                  dataIndex: 'widthHeight',
                  ellipsis: true,
    
                },
                {
                  title: '料品属性',
                  align:"center",
                  dataIndex: 'attribute',
                  width: 200,
                  ellipsis: true,
    
                }, {
                  title: '是否同步',
                  align:"center",
                  dataIndex: 'sync',
                  ellipsis: true,
                  // customRender:function (t, r, index) {
                  //   if(t == '是'){
                  //     return t +"（"+r.inventoryCode+"）";
                  //   }else{
                  //     return t;
                  //   }
                    
                  // }
    
                }, {
                  title: 'u9编码',
                  align:"center",
                  dataIndex: 'inventoryCode',
                  ellipsis: true,
    
                }, 
              ],
              url: {
                    list: "/encoder/encoder/list",
              },
              fileUpload: window._CONFIG['domianURL'] + "/encoder/encoder/importExcel",
              }
            },      
           created () {
            this.getTableList()
           },
           computed: {
           },
          methods: {
            //获取数据
            getTableList(){
                alertModal.loading("执行中，请稍后！")
                getAction('/encoder/encoder/list',this.queryParam).then(res=>{
                    alertModal.closeLoading();
                    if(res.success){
                       this.dataSource =res.result.records
                       this.selectedRowKeys = []
                       this.selectedRows = []
                       this.ipagination = {
                            total: res.result.total,
                            current: res.result.current,
                            pageSize: res.result.size
                        }
                    }else{
                      this.$message.error(res.message);
                    }
                })
            },
            onSearch(){
            //   this.$refs.materialProcurementSearch.visible = true
            },
            //导出
            exportList(fileName){
              this.$confirm({
                  title: '确认导出',
                  content: '是否导出数据?',
                  onOk:  ()=> {
                    alertModal.loading("执行中，请稍后！")
                    let param = this.queryParam;
                    param['selections'] = ''
                    if(this.selectedRowKeys && this.selectedRowKeys.length>0){
                      param['selections'] = this.selectedRowKeys.join(",")
                    }
                    downFile('/encoder/encoder/exportXls', param).then(data => {
                      alertModal.closeLoading();
                      if (!data) {
                        this.$message.warning('文件下载失败')
                        return
                      }
                      if (typeof window.navigator.msSaveBlob !== 'undefined') {
                        window.navigator.msSaveBlob(new Blob([data], { type: 'application/vnd.ms-excel' }), fileName + '.xlsx')
                      } else {
                        let url = window.URL.createObjectURL(new Blob([data], { type: 'application/vnd.ms-excel' }))
                        let link = document.createElement('a')
                        link.style.display = 'none'
                        link.href = url
                        link.setAttribute('download', fileName + '.xlsx')
                        document.body.appendChild(link)
                        link.click()
                        document.body.removeChild(link) // 下载完成移除元素
                        window.URL.revokeObjectURL(url) // 释放掉blob对象
                      }
                    })
                  }
                })
            },
            //重置
            searchReset(){
                this.queryParam={}
                this.getTableList()
            },
            //查询
            searchQuery(){
              this.queryParam.pageNo = '1'
                this.getTableList()
            },
            //新增
            addList(){
                this.$refs.AddEncoder.visible = true
                this.$refs.AddEncoder.defaultMethod='add'
                // this.$refs.AddEncoder.getOptionUnit()
                this.$refs.AddEncoder.getOptionUnitArr()
            },
            //编辑
            editList(){
              
              if(this.selectedRow[0].sync == '是'){
                this.$message.warning('已同步的数据无法修改！')
                return;
              }
              if(this.selectedRowKeys.length==0){
                this.$message.warning('请勾选数据！')
              }else if(this.selectedRowKeys.length>1){
                this.$message.warning('只可勾选一条数据')
              }else{
                
                this.$refs.AddEncoder.visible=true
                this.$refs.AddEncoder.defaultMethod='edit'
                this.$refs.AddEncoder.getEditData(this.selectedRowKeys[0])
                this.$refs.AddEncoder.getOptionUnitArr()
              }
            },
            handleUploadChange({ file, fileList }){
                if (file.status === 'done'&&file.response.success) {
                    this.$message.success(file.response.message)
                    this.getTableList()
                }else if(file.status === 'done'&&!file.response.success){
                    this.$message.error(file.response.message)
                }
                
            },
            //同步
            syncList(){
              if(this.selectedRowKeys.length==0){
                this.$message.warning('请勾选数据！')
              }else{
                this.$confirm({
                  title: '确认同步',
                  content: '是否同步选中数据?',
                  onOk:  ()=> {
                    var ids =  this.selectedRowKeys.toString()
                    var that = this
                    alertModal.loading("执行中，请稍后！")
                    deleteAction('/encoder/encoder/syncBatch', {ids: ids}).then((res) => {
                      alertModal.closeLoading();
                      if (res.success) {
                        this.$message.success('同步成功！');
                        this.getTableList()
                      } else {
                        this.$message.error(res.message);
                      }
                    });
                  }
                })
              }
            },
            //删除
            delectList(){
              if(this.selectedRowKeys.length==0){
                this.$message.warning('请勾选数据！')
              }else if(this.selectedRowKeys.length>1){
                this.$confirm({
                  title: '确认删除',
                  content: '是否删除选中数据?',
                  onOk:  ()=> {
                    var ids =  this.selectedRowKeys.toString()
                    var that = this
                    alertModal.loading("执行中，请稍后！")
                    deleteAction('/encoder/encoder/deleteBatch', {ids: ids}).then((res) => {
                      alertModal.closeLoading();
                      if (res.success) {
                        this.$message.success('删除成功！');
                        this.getTableList()
                      } else {
                        this.$message.error(res.message);
                      }
                    });
                  }
                })
              }else{
                this.$confirm({
                  title: '确认删除',
                  content: '是否删除选中数据?',
                  onOk:  ()=> {
                    alertModal.loading("执行中，请稍后！")
                    deleteAction('/encoder/encoder/delete', {id: this.selectedRowKeys[0]}).then((res) => {
                      alertModal.closeLoading();
                      if (res.success) {
                        this.$message.success('删除成功！');
                        this.getTableList()
                      } else {
                        this.$message.error(res.message);
                      }
                    });
                  }
                })
              }
            },
            //勾选
            onSelectChange(selectedRowKeys, selectionRows) {
              this.selectedRowKeys = selectedRowKeys;
              this.selectedRow = selectionRows;
            },
            handleTableChange(pagination, filters, sorter) {
                // console.log('当前页信息>>>>',pagination)
                this.queryParam.pageNo = pagination.current
                this.queryParam.pageSize = pagination.pageSize
                this.getTableList()
            },
            detailList(){
              if(this.selectedRowKeys.length==0){
                this.$message.warning('请选择数据！')
              }else if(this.selectedRowKeys.length>1){
                this.$message.warning('请选择一条数据！')
              }else{
                this.$refs.EncoderDetail.visible=true
                this.$refs.EncoderDetail.getEditData(this.selectedRowKeys[0])
              }
            },
            //双击
            clickRow(record, index){
              return {
                on: {
                  dblclick: () => {
                    this.$refs.EncoderDetail.visible=true
                    this.$refs.EncoderDetail.getEditData(record.id)
                  },
                } 
              }  
            }
        }
    }
      </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/.top>.ant-card-body{
            padding-bottom:0px;
            padding-top: 12px;
        }
        /deep/.ant-btn{
            height:28px
        }
        /deep/.ant-table-thead > tr > th{
            padding: 6px 8px !important;
        }
        /deep/ .ant-table-tbody > tr > td{
            padding: 6px 8px !important;
        }
        /deep/ .ant-table{
            font-size:12px
        }
        /deep/.ant-table-fixed-header .ant-table-scroll .ant-table-header{
            width: calc(100% + 9px);//减去滚动条的宽度
        }
        /deep/.middle>.ant-card-body{
            padding-bottom:14px;
            padding-top:14px;
        }
        /deep/.ant-select-sm .ant-select-selection__rendered{
            line-height: 27px;
        }
      </style>