完成form file 弹窗选择文件并保存回显的功能
This commit is contained in:
		
							parent
							
								
									c0139480f5
								
							
						
					
					
						commit
						ec6cb33835
					
				| 
						 | 
				
			
			@ -1,29 +1,41 @@
 | 
			
		|||
<template>
 | 
			
		||||
  <div>
 | 
			
		||||
    <custom-modal v-model="visible" :width="1200" title="Load Data From File">
 | 
			
		||||
      <a-table :data-source="list" :columns="columns" :pagination="false" bordered>
 | 
			
		||||
        <template slot="sampleData" slot-scope="text, record">
 | 
			
		||||
          <phd-select type="file" @change="handleFileChange(record, 'sampleData', $event)" @select="handleFileSelect" :title="text && text.name">
 | 
			
		||||
            {{ text && text.name }}
 | 
			
		||||
          </phd-select>
 | 
			
		||||
      <a-table :data-source="list" :columns="columns" :loading="loading_list" :pagination="false" bordered>
 | 
			
		||||
        <template slot="sampleData" slot-scope="text">
 | 
			
		||||
          <div class="file-name" :title="text" @click="handleFileSelect">
 | 
			
		||||
            {{ text }}
 | 
			
		||||
          </div>
 | 
			
		||||
          <!-- <phd-select type="file" @change="handleFileChange(record, 'sampleData', $event)" @select="handleFileSelect" :title="text && text.name">
 | 
			
		||||
            {{ text }}
 | 
			
		||||
          </phd-select> -->
 | 
			
		||||
        </template>
 | 
			
		||||
        <template slot="gasBkData" slot-scope="text, record">
 | 
			
		||||
          <phd-select type="file" @change="handleFileChange(record, 'gasBkData', $event)" @select="handleFileSelect" :title="text && text.name">
 | 
			
		||||
        <template slot="gasBkData" slot-scope="text">
 | 
			
		||||
          <div class="file-name" :title="text" @click="handleFileSelect">
 | 
			
		||||
            {{ text }}
 | 
			
		||||
          </div>
 | 
			
		||||
          <!-- <phd-select type="file" @change="handleFileChange(record, 'gasBkData', $event)" @select="handleFileSelect" :title="text && text.name">
 | 
			
		||||
            {{ text && text.name }}
 | 
			
		||||
          </phd-select>
 | 
			
		||||
          </phd-select> -->
 | 
			
		||||
        </template>
 | 
			
		||||
        <template slot="detBkData" slot-scope="text, record">
 | 
			
		||||
          <phd-select type="file" @change="handleFileChange(record, 'detBkData', $event)" @select="handleFileSelect" :title="text && text.name">
 | 
			
		||||
        <template slot="detBkData" slot-scope="text">
 | 
			
		||||
          <div class="file-name" :title="text" @click="handleFileSelect">
 | 
			
		||||
            {{ text }}
 | 
			
		||||
          </div>
 | 
			
		||||
          <!-- <phd-select type="file" @change="handleFileChange(record, 'detBkData', $event)" @select="handleFileSelect" :title="text && text.name">
 | 
			
		||||
            {{ text && text.name }}
 | 
			
		||||
          </phd-select>
 | 
			
		||||
          </phd-select> -->
 | 
			
		||||
        </template>
 | 
			
		||||
        <template slot="qcData" slot-scope="text, record">
 | 
			
		||||
          <phd-select type="file" @change="handleFileChange(record, 'qcData', $event)" @select="handleFileSelect" :title="text && text.name">
 | 
			
		||||
        <template slot="qcData" slot-scope="text">
 | 
			
		||||
          <div class="file-name" :title="text" @click="handleFileSelect">
 | 
			
		||||
            {{ text }}
 | 
			
		||||
          </div>
 | 
			
		||||
          <!-- <phd-select type="file" @change="handleFileChange(record, 'qcData', $event)" @select="handleFileSelect" :title="text && text.name">
 | 
			
		||||
            {{ text && text.name }}
 | 
			
		||||
          </phd-select>
 | 
			
		||||
          </phd-select> -->
 | 
			
		||||
        </template>
 | 
			
		||||
        <template slot="status" slot-scope="text">
 | 
			
		||||
          <span class="status"></span>
 | 
			
		||||
        <template slot="status" slot-scope="text,record">
 | 
			
		||||
          <span :class="[record.detFileStatus&&record.gasFileStatus&&record.qcFileStatus?'status_true':'status_false','status']"></span>
 | 
			
		||||
        </template>
 | 
			
		||||
      </a-table>
 | 
			
		||||
  
 | 
			
		||||
| 
						 | 
				
			
			@ -68,7 +80,7 @@
 | 
			
		|||
      </div>
 | 
			
		||||
      <template slot="footer">
 | 
			
		||||
        <a-space class="operators" :size="20">
 | 
			
		||||
          <a-button type="success">Save</a-button>
 | 
			
		||||
          <a-button type="success" @click="saveFileName">Save</a-button>
 | 
			
		||||
          <a-button type="warn"  @click="cancelFileModale">Cancel</a-button>
 | 
			
		||||
        </a-space>
 | 
			
		||||
      </template>
 | 
			
		||||
| 
						 | 
				
			
			@ -84,7 +96,7 @@ import { getAction,postAction } from '../../../../api/manage'
 | 
			
		|||
const columns = [
 | 
			
		||||
  {
 | 
			
		||||
    title: 'SampleData',
 | 
			
		||||
    dataIndex: 'sampleData',
 | 
			
		||||
    dataIndex: 'sampleFileName',
 | 
			
		||||
    width: '23%',
 | 
			
		||||
    ellipsis: true,
 | 
			
		||||
    scopedSlots: {
 | 
			
		||||
| 
						 | 
				
			
			@ -93,7 +105,7 @@ const columns = [
 | 
			
		|||
  },
 | 
			
		||||
  {
 | 
			
		||||
    title: 'GasBkData',
 | 
			
		||||
    dataIndex: 'gasBkData',
 | 
			
		||||
    dataIndex: 'gasFileName',
 | 
			
		||||
    width: '23%',
 | 
			
		||||
    ellipsis: true,
 | 
			
		||||
    scopedSlots: {
 | 
			
		||||
| 
						 | 
				
			
			@ -102,7 +114,7 @@ const columns = [
 | 
			
		|||
  },
 | 
			
		||||
  {
 | 
			
		||||
    title: 'DetBkData',
 | 
			
		||||
    dataIndex: 'detBkData',
 | 
			
		||||
    dataIndex: 'detFileName',
 | 
			
		||||
    width: '23%',
 | 
			
		||||
    ellipsis: true,
 | 
			
		||||
    scopedSlots: {
 | 
			
		||||
| 
						 | 
				
			
			@ -111,7 +123,7 @@ const columns = [
 | 
			
		|||
  },
 | 
			
		||||
  {
 | 
			
		||||
    title: 'QCData',
 | 
			
		||||
    dataIndex: 'qcData',
 | 
			
		||||
    dataIndex: 'qcFileName',
 | 
			
		||||
    width: '23%',
 | 
			
		||||
    ellipsis: true,
 | 
			
		||||
    scopedSlots: {
 | 
			
		||||
| 
						 | 
				
			
			@ -157,6 +169,7 @@ export default {
 | 
			
		|||
      list_file: [],
 | 
			
		||||
      columns_file,
 | 
			
		||||
      loading_file: false,
 | 
			
		||||
      loading_list: false,
 | 
			
		||||
      list: this.getInitialList(),
 | 
			
		||||
      ipagination:{
 | 
			
		||||
        current: 1,
 | 
			
		||||
| 
						 | 
				
			
			@ -171,6 +184,7 @@ export default {
 | 
			
		|||
        total: 0
 | 
			
		||||
      },
 | 
			
		||||
      selectedRowKeys: [],
 | 
			
		||||
      selectedFiles: [],
 | 
			
		||||
      fileList: [],
 | 
			
		||||
      fileNum: 0,
 | 
			
		||||
      uploading: false
 | 
			
		||||
| 
						 | 
				
			
			@ -180,10 +194,10 @@ export default {
 | 
			
		|||
    // 初始化为10*4的表格
 | 
			
		||||
    getInitialList() {
 | 
			
		||||
      return new Array(10).fill(0).map(() => ({
 | 
			
		||||
        sampleData: undefined,
 | 
			
		||||
        gasBkData: undefined,
 | 
			
		||||
        detBkData: undefined,
 | 
			
		||||
        qcData: undefined
 | 
			
		||||
        sampleFileName: undefined,
 | 
			
		||||
        gasFileName: undefined,
 | 
			
		||||
        detFileName: undefined,
 | 
			
		||||
        qcFileName: undefined
 | 
			
		||||
      }))
 | 
			
		||||
    },
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			@ -222,9 +236,26 @@ export default {
 | 
			
		|||
        pageSize: size
 | 
			
		||||
      })
 | 
			
		||||
    },
 | 
			
		||||
    onSelectChange(selectedRowKeys) {
 | 
			
		||||
      console.log('selectedRowKeys changed: ', selectedRowKeys);
 | 
			
		||||
      this.selectedRowKeys = selectedRowKeys;
 | 
			
		||||
    onSelectChange(selectedRowKeys, selectedRows) {
 | 
			
		||||
      this.selectedRowKeys = selectedRowKeys
 | 
			
		||||
      this.selectedFiles = selectedRows.map(item => {
 | 
			
		||||
        return item.name
 | 
			
		||||
      });
 | 
			
		||||
    },
 | 
			
		||||
    saveFileName() {
 | 
			
		||||
      this.visible_file = false
 | 
			
		||||
      this.loading_list = true
 | 
			
		||||
      let params = {
 | 
			
		||||
        fileName: this.selectedFiles.join(",")
 | 
			
		||||
      }
 | 
			
		||||
      getAction("/spectrumAnalysis/getFilesBySampleFile", params).then(res => {
 | 
			
		||||
        this.loading_list = false
 | 
			
		||||
        if (res.success) {
 | 
			
		||||
          this.list =res.result.length>0? res.result:this.getInitialList()
 | 
			
		||||
        } else {
 | 
			
		||||
          this.$message.warning("This operation fails. Contact your system administrator")
 | 
			
		||||
        }
 | 
			
		||||
      })
 | 
			
		||||
    },
 | 
			
		||||
    cancelFileModale() {
 | 
			
		||||
      this.visible_file = false
 | 
			
		||||
| 
						 | 
				
			
			@ -315,6 +346,12 @@ export default {
 | 
			
		|||
 | 
			
		||||
  background-color: #00e170;
 | 
			
		||||
}
 | 
			
		||||
.status_true{
 | 
			
		||||
  background-color: #00e170;
 | 
			
		||||
}
 | 
			
		||||
.status_false{
 | 
			
		||||
  background-color: red;
 | 
			
		||||
}
 | 
			
		||||
::v-deep {
 | 
			
		||||
  @tableBorderColor: #000;
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			@ -370,4 +407,11 @@ export default {
 | 
			
		|||
    width: 92px;
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
.file-name {
 | 
			
		||||
  height: 42px;
 | 
			
		||||
  line-height: 42px;
 | 
			
		||||
  overflow: hidden;
 | 
			
		||||
  text-overflow: ellipsis;
 | 
			
		||||
  white-space: nowrap;
 | 
			
		||||
}
 | 
			
		||||
</style>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
		Reference in New Issue
	
	Block a user