feat: 文件转换功能

src/utils/file.js

@@ -1,6 +1,11 @@
 import { Modal } from 'ant-design-vue'
 import { saveAs } from 'file-saver'
 import JSZip from 'jszip'
+import Vue from 'vue'
+import signMd5Utils from '@/utils/encryption/signMd5Utils'
+import Axios from 'axios'
+import { ACCESS_TOKEN, TENANT_ID } from '@/store/mutation-types'
+import { message } from 'ant-design-vue'
 
 /**
  * 弹窗填入文件名保存文件
@@ -85,3 +90,52 @@ export const zipFile = async (fileList, zipName) => {
   const content = await zip.generateAsync({ type: 'blob' })
   return new File([content], zipName, { type: content.type })
 }
+
+/**
+ * 根据响应头获取文件名
+ * @param {String} contentDisposition
+ */
+export function getFileNameByHeaderContentDisposition(contentDisposition) {
+  const patt = new RegExp('file[Nn]ame=([^;]+\\.[^\\.;]+);*')
+  contentDisposition = decodeURI(contentDisposition)
+  const result = patt.exec(contentDisposition)
+  let fileName = result[1]
+  fileName = fileName.replace(/"/g, '')
+  return fileName
+}
+
+export const fetchAndDownload = async (url, data) => {
+  const apiBaseUrl = window._CONFIG['domianURL'] || '/jeecg-boot'
+  const sign = signMd5Utils.getSign(url, data)
+  const response = await Axios({
+    baseURL: apiBaseUrl,
+    method: 'post',
+    url,
+    data: data,
+    headers: {
+      'X-Sign': sign,
+      'X-TIMESTAMP': signMd5Utils.getTimestamp(),
+      'X-Access-Token': Vue.ls.get(ACCESS_TOKEN),
+      'tenant-id': Vue.ls.get(TENANT_ID)
+    }
+  })
+  const { status, headers, data: responseData } = response
+  if (status == 200) {
+    if (typeof responseData == 'object') {
+      const { message: msg } = responseData
+      message.error(msg)
+      throw new Error(msg)
+    } else {
+      const disposition = headers['content-disposition']
+      const fileName = getFileNameByHeaderContentDisposition(disposition)
+      if (typeof responseData == 'string') {
+        const blob = new Blob([responseData], { type: headers['content-type'] })
+        saveAs(blob, fileName)
+        return fileName
+      }
+    }
+  } else {
+    message.error('This operation fails. Contact your system administrator')
+    throw new Error('This operation fails. Contact your system administrator')
+  }
+}

src/views/spectrumAnalysis/components/Modals/FtransltModal/components/CanberraIECImsTransfer.vue

@@ -3,10 +3,10 @@
     <a-form-model class="settings" :labelCol="{ style: { width: '75px', textAlign: 'center' } }">
       <div class="top-left">
         <a-form-model-item label="MSG_ID">
-          <a-input v-model="canberraIecImsParams.msgId"></a-input>
+          <a-input v-model="params.msg_id"></a-input>
         </a-form-model-item>
         <a-form-model-item label="Comment">
-          <a-textarea v-model="canberraIecImsParams.comment"></a-textarea>
+          <a-textarea v-model="params.comment"></a-textarea>
         </a-form-model-item>
         <title-over-border title="Collection Block">
           <a-form-model-item label="Start Time">
@@ -14,7 +14,7 @@
               show-time
               format="YYYY/MM/DD HH:mm:ss"
               valueFormat="YYYY/MM/DD HH:mm:ss"
-              v-model="canberraIecImsParams.startTime"
+              v-model="params.collect_start"
             />
           </a-form-model-item>
           <a-form-model-item label="Stop Time">
@@ -22,12 +22,12 @@
               show-time
               format="YYYY/MM/DD HH:mm:ss"
               valueFormat="YYYY/MM/DD HH:mm:ss"
-              v-model="canberraIecImsParams.stopTime"
+              v-model="params.collect_stop"
             />
           </a-form-model-item>
           <div>
             <p>Total air volume sampled</p>
-            <a-input v-model="canberraIecImsParams.totalAir"></a-input>
+            <a-input-number v-model="params.air_volume" style="width: 100%;"></a-input-number>
           </div>
         </title-over-border>
       </div>
@@ -35,43 +35,43 @@
         <div class="header-block-list">
           <div class="header-block-item">
             <div>
-              <a-checkbox></a-checkbox>
+              <a-checkbox v-model="states.designatorEditable"></a-checkbox>
               Designator
             </div>
-            <a-input v-model="canberraIecImsParams.designator"></a-input>
+            <a-input :disabled="!states.designatorEditable" v-model="params.designator"></a-input>
           </div>
           <div class="header-block-item">
             <div>
-              <a-checkbox></a-checkbox>
+              <a-checkbox v-model="states.stationCodeEditable"></a-checkbox>
               Station code
             </div>
-            <a-input v-model="canberraIecImsParams.stationCode"></a-input>
+            <a-input :disabled="!states.stationCodeEditable" v-model="params.station"></a-input>
           </div>
           <div class="header-block-item">
             <div>
-              <a-checkbox></a-checkbox>
+              <a-checkbox v-model="states.detectorCodeEditable"></a-checkbox>
               Detector code
             </div>
-            <a-input v-model="canberraIecImsParams.detectorCode"></a-input>
+            <a-input :disabled="!states.detectorCodeEditable" v-model="params.detector"></a-input>
           </div>
           <div class="header-block-item">
             <div>
-              <a-checkbox></a-checkbox>
+              <a-checkbox v-model="states.sampleGeometryEditable"></a-checkbox>
               Sample geometry
             </div>
-            <a-input v-model="canberraIecImsParams.sampleGeometry"></a-input>
+            <a-input :disabled="!states.sampleGeometryEditable" v-model="params.sam_geom"></a-input>
           </div>
         </div>
         <div class="system-type-and-spectrum-qualifier">
           <title-over-border title="System type" class="system-type">
-            <a-radio-group v-model="canberraIecImsParams.systemType">
+            <a-radio-group v-model="params.sys_type">
               <a-radio value="P">P</a-radio>
               <a-radio value="G">G</a-radio>
               <a-radio value="B">B</a-radio>
             </a-radio-group>
           </title-over-border>
           <title-over-border title="Spectrum qualifier" class="spectrum-qualifier">
-            <a-radio-group v-model="canberraIecImsParams.spectrumQualifier">
+            <a-radio-group v-model="params.quantity">
               <a-radio value="PREL">PREL</a-radio>
               <a-radio value="FULL">FULL</a-radio>
             </a-radio-group>
@@ -80,44 +80,27 @@
         <div class="identifications">
           <div>
             <p>Sample reference identification</p>
-            <a-input v-model="canberraIecImsParams.sampleRef"></a-input>
+            <a-input v-model="params.srId"></a-input>
           </div>
           <div>
             <p>Background measurement identification</p>
-            <a-input v-model="canberraIecImsParams.backgroundMea"></a-input>
+            <a-input v-model="params.bgMeasureId"></a-input>
           </div>
         </div>
         <div class="transmit-time">
-          <a-checkbox>Transmit time</a-checkbox>
+          <a-checkbox v-model="states.transmitTimeEditable">Transmit time</a-checkbox>
           <custom-date-picker
+            :disabled="!states.transmitTimeEditable"
             show-time
             format="YYYY/MM/DD HH:mm:ss"
             valueFormat="YYYY/MM/DD HH:mm:ss"
-            v-model="canberraIecImsParams.transmitTime"
+            v-model="params.transmit"
           />
         </div>
       </title-over-border>
     </a-form-model>
     <title-over-border title="Spectrum Transfer" class="spectrum-transfer">
-      <div class="title-container">
+      <spectrum-transfer-com :params="params" :fileOptions="fileOptions" />
-        <div class="title">
-          <a-upload name="file" :multiple="true" :showUploadList="false" :beforeUpload="ortecBeforeUpload">
-            <div>Canberra IEC1455(.IEC)</div>
-          </a-upload>
-        </div>
-        <div class="data-type">
-          Data type
-          <div class="data-type-select">
-            <custom-select :option="[{ label: 'SAMPLEPHD', value: 1 }]" />
-          </div>
-        </div>
-        <div class="title">
-          <a-upload name="file" :multiple="true" :showUploadList="false" :beforeUpload="imsBeforeUpload">
-            <div>IMS .ims .rms</div>
-          </a-upload>
-        </div>
-      </div>
-      <a-transfer :render="(item) => item.title" :data-source="dataSource" :target-keys="targetKeys" />
     </title-over-border>
   </div>
 </template>
@@ -125,50 +108,58 @@
 <script>
 import TitleOverBorder from '../../../TitleOverBorder.vue'
 import moment from 'moment'
+import { cloneDeep } from 'lodash'
+import SpectrumTransferCom from './SpectrumTransferCom.vue'
+
+const initParams = {
+  msg_id: '123456789',
+  comment: '',
+  collect_start: moment(new Date()).format('YYYY/MM/DD HH:mm:ss'),
+  collect_stop: moment(new Date()).format('YYYY/MM/DD HH:mm:ss'),
+  air_volume: '0',
+  designator: '3',
+  station: 'CNL06',
+  detector: 'CNL06_001',
+  sam_geom: 'DISC70MMX5MM',
+  sys_type: 'P',
+  quantity: 'FULL',
+  srId: '123456789',
+  bgMeasureId: '0',
+  transmit: moment(new Date()).format('YYYY/MM/DD HH:mm:ss'),
+}
+
+const initStates = {
+  designatorEditable: false,
+  stationCodeEditable: false,
+  detectorCodeEditable: false,
+  sampleGeometryEditable: false,
+  transmitTimeEditable: false,
+}
+
 export default {
-  components: { TitleOverBorder },
+  components: { TitleOverBorder, SpectrumTransferCom },
   data() {
     return {
-      canberraIecImsParams: {
+      params: cloneDeep(initParams),
-        msgId: '123456789',
+      states: cloneDeep(initStates),
-        comment: '',
+      fileOptions: [
-        startTime: moment(new Date()).format('YYYY/MM/DD HH:mm:ss'),
+        {
-        stopTime: moment(new Date()).format('YYYY/MM/DD HH:mm:ss'),
+          title: 'Canberra IEC1455(.IEC)',
-        totalAir: '0',
+          accept: '.IEC',
-        designator: '3',
+          transformUrl: '/gamma/ftransit/IecToIms',
-        stationCode: 'CNL06',
-        detectorCode: 'CNL06_001',
-        sampleGeometry: 'DISC70MMX5MM',
-        systemType: 'P',
-        spectrumQualifier: 'FULL',
-        sampleRef: '123456789',
-        backgroundMea: '0',
-        transmitTime: moment(new Date()).format('YYYY/MM/DD HH:mm:ss'),
         },
-      dataSource: [],
+        {
-      targetKeys: [],
+          title: 'IMS.ims.rms',
+          accept: '.IMS,.RMS,.PHD',
+          transformUrl: '/gamma/ftransit/ImsToIec'
+        },
+      ],
     }
   },
   methods: {
-    ortecBeforeUpload(file, fileList) {
+    beforeModalOpen() {
-      console.log(file, fileList)
+      this.params = cloneDeep(initParams)
-      this.dataSource = fileList.map((item) => {
+      this.states = cloneDeep(initStates)
-        return {
-          key: item.uid,
-          title: item.name,
-        }
-      })
-    },
-    imsBeforeUpload(file, fileList) {
-      console.log(file, fileList)
-      let arr = fileList.map((item) => {
-        return {
-          key: item.uid,
-          title: item.name,
-        }
-      })
-      this.targetKeys = arr.map((item) => item.key)
-      this.dataSource.push(...arr)
     },
   },
 }
@@ -261,67 +252,5 @@ export default {
 
 .spectrum-transfer {
   margin-top: 20px;
-
-  .title-container {
-    display: flex;
-
-    .title {
-      flex: 1;
-      text-align: center;
-      background-color: #225a6a;
-      height: 32px;
-      line-height: 32px;
-      /deep/.ant-upload {
-        width: 100%;
-        cursor: pointer;
-      }
-    }
-  }
-
-  .data-type {
-    width: 166px;
-    padding: 0 8px;
-    position: relative;
-    text-align: center;
-    z-index: 1;
-    line-height: 32px;
-
-    &-select {
-      top: 100%;
-      left: 0;
-      position: absolute;
-      padding: 8px;
-      width: 100%;
-    }
-  }
-
-  .ant-transfer {
-    margin-top: 8px;
-    display: flex;
-    align-items: flex-end;
-
-    ::v-deep {
-      .ant-transfer {
-        &-list {
-          flex: 1;
-
-          &-header {
-            display: none;
-          }
-        }
-
-        &-operation {
-          width: 150px;
-
-          .ant-btn {
-            width: 100%;
-            height: 32px;
-            margin-bottom: 20px;
-            text-align: center;
-          }
-        }
-      }
-    }
-  }
 }
 </style>

src/views/spectrumAnalysis/components/Modals/FtransltModal/components/IntSpcCanberraIecTransfer.vue

@@ -1,11 +1,7 @@
 <template>
   <div class="int-spc-canberra-iec-transfer">
     <div class="spectrum-transfer">
-      <div class="title-container">
+      <spectrum-transfer-com :fileOptions="fileOptions" :showDataType="false" />
-        <div class="title">Select .SPC File</div>
-        <div class="title">Select .IEC File</div>
-      </div>
-      <a-transfer></a-transfer>
 
       <div class="desc">
         <p>使用说明</p>
@@ -17,64 +13,31 @@
 </template>
 
 <script>
-import TitleOverBorder from '../../../TitleOverBorder.vue'
+import SpectrumTransferCom from './SpectrumTransferCom.vue'
 export default {
-  components: { TitleOverBorder }
+  components: { SpectrumTransferCom },
+  data() {
+    return {
+      fileOptions: [
+        {
+          title: 'Select .SPC File',
+          accept: '.SPC',
+          transformUrl: '/gamma/ftransit/SpcToIec',
+        },
+        {
+          title: 'Select .IEC File',
+          accept: '.IEC',
+          transformUrl: '/gamma/ftransit/IecToSpc',
+        },
+      ],
+    }
+  },
 }
 </script>
 
 <style lang="less" scoped>
-
-
 .spectrum-transfer {
   margin-top: 20px;
-
-  .title-container {
-    display: flex;
-    gap: 66px;
-
-    .title {
-      flex: 1;
-      text-align: center;
-      background-color: #225a6a;
-      height: 32px;
-      line-height: 32px;
-    }
-  }
-
-  .ant-transfer {
-    margin-top: 8px;
-    display: flex;
-    align-items: center;
-
-    ::v-deep {
-      .ant-transfer {
-        &-list {
-          flex: 1;
-          height: 400px;
-
-          &-header {
-            display: none;
-          }
-        }
-
-        &-operation {
-          width: 50px;
-
-          .ant-btn {
-            width: 100%;
-            height: 32px;
-            text-align: center;
-
-            &:first-child {
-              margin-bottom: 50px;
-            }
-          }
-        }
-      }
-    }
-  }
-
   .desc {
     margin-top: 20px;
 
@@ -82,5 +45,17 @@ export default {
       margin-bottom: 0;
     }
   }
+
+  .spectrum-transfer-com {
+    grid-template-rows: 30px 450px;
+    grid-template-columns: 1fr 75px 1fr;
+
+    ::v-deep {
+      .operators {
+        justify-content: center;
+        gap: 80px;
+      }
+    }
+  }
 }
 </style>

src/views/spectrumAnalysis/components/Modals/FtransltModal/components/IntSpcImsTransfer.vue

@@ -3,10 +3,10 @@
     <a-form-model class="settings" :labelCol="{ style: { width: '75px', textAlign: 'center' } }">
       <div class="top-left">
         <a-form-model-item label="MSG_ID">
-          <a-input v-model="intSpacImsParams.msgId"></a-input>
+          <a-input v-model="params.msg_id"></a-input>
         </a-form-model-item>
         <a-form-model-item label="Comment">
-          <a-textarea v-model="intSpacImsParams.comment"></a-textarea>
+          <a-textarea v-model="params.comment"></a-textarea>
         </a-form-model-item>
         <title-over-border title="Collection Block">
           <a-form-model-item label="Start Time">
@@ -14,7 +14,7 @@
               show-time
               format="YYYY/MM/DD HH:mm:ss"
               valueFormat="YYYY/MM/DD HH:mm:ss"
-              v-model="intSpacImsParams.startTime"
+              v-model="params.collect_start"
             />
           </a-form-model-item>
           <a-form-model-item label="Stop Time">
@@ -22,12 +22,12 @@
               show-time
               format="YYYY/MM/DD HH:mm:ss"
               valueFormat="YYYY/MM/DD HH:mm:ss"
-              v-model="intSpacImsParams.stopTime"
+              v-model="params.collect_stop"
             />
           </a-form-model-item>
           <div>
             <p>Total air volume sampled</p>
-            <a-input v-model="intSpacImsParams.totalAir"></a-input>
+            <a-input-number v-model="params.air_volume" style="width: 100%;"></a-input-number>
           </div>
         </title-over-border>
       </div>
@@ -35,43 +35,43 @@
         <div class="header-block-list">
           <div class="header-block-item">
             <div>
-              <a-checkbox></a-checkbox>
+              <a-checkbox v-model="states.designatorEditable"></a-checkbox>
               Designator
             </div>
-            <a-input v-model="intSpacImsParams.designator"></a-input>
+            <a-input :disabled="!states.designatorEditable" v-model="params.designator"></a-input>
           </div>
           <div class="header-block-item">
             <div>
-              <a-checkbox></a-checkbox>
+              <a-checkbox v-model="states.stationCodeEditable"></a-checkbox>
               Station code
             </div>
-            <a-input v-model="intSpacImsParams.stationCode"></a-input>
+            <a-input :disabled="!states.stationCodeEditable" v-model="params.station"></a-input>
           </div>
           <div class="header-block-item">
             <div>
-              <a-checkbox></a-checkbox>
+              <a-checkbox v-model="states.detectorCodeEditable"></a-checkbox>
               Detector code
             </div>
-            <a-input v-model="intSpacImsParams.detectorCode"></a-input>
+            <a-input :disabled="!states.detectorCodeEditable" v-model="params.detector"></a-input>
           </div>
           <div class="header-block-item">
             <div>
-              <a-checkbox></a-checkbox>
+              <a-checkbox v-model="states.sampleGeometryEditable"></a-checkbox>
               Sample geometry
             </div>
-            <a-input v-model="intSpacImsParams.sampleGeometry"></a-input>
+            <a-input :disabled="!states.sampleGeometryEditable" v-model="params.sam_geom"></a-input>
           </div>
         </div>
         <div class="system-type-and-spectrum-qualifier">
           <title-over-border title="System type" class="system-type">
-            <a-radio-group v-model="intSpacImsParams.systemType">
+            <a-radio-group v-model="params.sys_type">
               <a-radio value="P">P</a-radio>
               <a-radio value="G">G</a-radio>
               <a-radio value="B">B</a-radio>
             </a-radio-group>
           </title-over-border>
           <title-over-border title="Spectrum qualifier" class="spectrum-qualifier">
-            <a-radio-group v-model="intSpacImsParams.spectrumQualifier">
+            <a-radio-group v-model="params.quantity">
               <a-radio value="PREL">PREL</a-radio>
               <a-radio value="FULL">FULL</a-radio>
             </a-radio-group>
@@ -80,44 +80,27 @@
         <div class="identifications">
           <div>
             <p>Sample reference identification</p>
-            <a-input v-model="intSpacImsParams.sampleRef"></a-input>
+            <a-input v-model="params.srId"></a-input>
           </div>
           <div>
             <p>Background measurement identification</p>
-            <a-input v-model="intSpacImsParams.backgroundMea"></a-input>
+            <a-input v-model="params.bgMeasureId"></a-input>
           </div>
         </div>
         <div class="transmit-time">
-          <a-checkbox>Transmit time</a-checkbox>
+          <a-checkbox v-model="states.transmitTimeEditable">Transmit time</a-checkbox>
           <custom-date-picker
+            :disabled="!states.transmitTimeEditable"
             show-time
             format="YYYY/MM/DD HH:mm:ss"
             valueFormat="YYYY/MM/DD HH:mm:ss"
-            v-model="intSpacImsParams.transmitTime"
+            v-model="params.transmit"
           />
         </div>
       </title-over-border>
     </a-form-model>
     <title-over-border title="Spectrum Transfer" class="spectrum-transfer">
-      <div class="title-container">
+      <spectrum-transfer-com :params="params" :fileOptions="fileOptions" />
-        <div class="title">
-          <a-upload name="file" :multiple="true" :showUploadList="false" :beforeUpload="ortecBeforeUpload">
-            <div>ORTEC int.spc</div>
-          </a-upload>
-        </div>
-        <div class="data-type">
-          Data type
-          <div class="data-type-select">
-            <custom-select :option="[{ label: 'SAMPLEPHD', value: 1 }]" />
-          </div>
-        </div>
-        <div class="title">
-          <a-upload name="file" :multiple="true" :showUploadList="false" :beforeUpload="imsBeforeUpload">
-            <div>IMS .ims .rms</div>
-          </a-upload>
-        </div>
-      </div>
-      <a-transfer :render="(item) => item.title" :data-source="dataSource" :target-keys="targetKeys" />
     </title-over-border>
   </div>
 </template>
@@ -125,50 +108,58 @@
 <script>
 import TitleOverBorder from '../../../TitleOverBorder.vue'
 import moment from 'moment'
+import { cloneDeep } from 'lodash'
+import SpectrumTransferCom from './SpectrumTransferCom.vue'
+
+const initParams = {
+  msg_id: '123456789',
+  comment: '',
+  collect_start: moment(new Date()).format('YYYY/MM/DD HH:mm:ss'),
+  collect_stop: moment(new Date()).format('YYYY/MM/DD HH:mm:ss'),
+  air_volume: '0',
+  designator: '3',
+  station: 'CNL06',
+  detector: 'CNL06_001',
+  sam_geom: 'DISC70MMX5MM',
+  sys_type: 'P',
+  quantity: 'FULL',
+  srId: '123456789',
+  bgMeasureId: '0',
+  transmit: moment(new Date()).format('YYYY/MM/DD HH:mm:ss'),
+}
+
+const initStates = {
+  designatorEditable: false,
+  stationCodeEditable: false,
+  detectorCodeEditable: false,
+  sampleGeometryEditable: false,
+  transmitTimeEditable: false,
+}
+
 export default {
-  components: { TitleOverBorder },
+  components: { TitleOverBorder, SpectrumTransferCom },
   data() {
     return {
-      intSpacImsParams: {
+      params: cloneDeep(initParams),
-        msgId: '123456789',
+      states: cloneDeep(initStates),
-        comment: '',
+      fileOptions: [
-        startTime: moment(new Date()).format('YYYY/MM/DD HH:mm:ss'),
+        {
-        stopTime: moment(new Date()).format('YYYY/MM/DD HH:mm:ss'),
+          title: 'ORTEC int.spc',
-        totalAir: '0',
+          accept: '.SPC',
-        designator: '3',
+          transformUrl: '/gamma/ftransit/SpcToIms',
-        stationCode: 'CNL06',
-        detectorCode: 'CNL06_001',
-        sampleGeometry: 'DISC70MMX5MM',
-        systemType: 'P',
-        spectrumQualifier: 'FULL',
-        sampleRef: '123456789',
-        backgroundMea: '0',
-        transmitTime: moment(new Date()).format('YYYY/MM/DD HH:mm:ss'),
         },
-      dataSource: [],
+        {
-      targetKeys: [],
+          title: 'IMS.ims.rms',
+          accept: '.IMS,.RMS,.PHD',
+          transformUrl: '/gamma/ftransit/ImsToSpc'
+        },
+      ],
     }
   },
   methods: {
-    ortecBeforeUpload(file, fileList) {
+    beforeModalOpen() {
-      console.log(file, fileList)
+      this.params = cloneDeep(initParams)
-      this.dataSource = fileList.map((item) => {
+      this.states = cloneDeep(initStates)
-        return {
-          key: item.uid,
-          title: item.name,
-        }
-      })
-    },
-    imsBeforeUpload(file, fileList) {
-      console.log(file, fileList)
-      let arr = fileList.map((item) => {
-        return {
-          key: item.uid,
-          title: item.name,
-        }
-      })
-      this.targetKeys = arr.map((item) => item.key)
-      this.dataSource.push(...arr)
     },
   },
 }
@@ -261,67 +252,5 @@ export default {
 
 .spectrum-transfer {
   margin-top: 20px;
-
-  .title-container {
-    display: flex;
-
-    .title {
-      flex: 1;
-      text-align: center;
-      background-color: #225a6a;
-      height: 32px;
-      line-height: 32px;
-      /deep/.ant-upload {
-        width: 100%;
-        cursor: pointer;
-      }
-    }
-  }
-
-  .data-type {
-    width: 166px;
-    padding: 0 8px;
-    position: relative;
-    text-align: center;
-    z-index: 1;
-    line-height: 32px;
-
-    &-select {
-      top: 100%;
-      left: 0;
-      position: absolute;
-      padding: 8px;
-      width: 100%;
-    }
-  }
-
-  .ant-transfer {
-    margin-top: 8px;
-    display: flex;
-    align-items: flex-end;
-
-    ::v-deep {
-      .ant-transfer {
-        &-list {
-          flex: 1;
-
-          &-header {
-            display: none;
-          }
-        }
-
-        &-operation {
-          width: 150px;
-
-          .ant-btn {
-            width: 100%;
-            height: 32px;
-            margin-bottom: 20px;
-            text-align: center;
-          }
-        }
-      }
-    }
-  }
 }
 </style>

src/views/spectrumAnalysis/components/Modals/FtransltModal/components/SpectrumTransferCom.vue

@@ -0,0 +1,255 @@
+<template>
+  <div class="spectrum-transfer-com">
+    <div class="title">
+      <a-upload
+        name="file"
+        :multiple="true"
+        :showUploadList="false"
+        :beforeUpload="beforeLeftFileUpload"
+        :accept="fileOptions[0].accept"
+      >
+        <div>{{ fileOptions[0].title }}</div>
+      </a-upload>
+    </div>
+    <div class="data-type">
+      <template v-if="showDataType"> Data type </template>
+    </div>
+    <div class="title">
+      <a-upload
+        name="file"
+        :multiple="true"
+        :showUploadList="false"
+        :beforeUpload="beforeRightFileUpload"
+        :accept="fileOptions[1].accept"
+      >
+        <div>{{ fileOptions[1].title }}</div>
+      </a-upload>
+    </div>
+    <div class="file-list">
+      <div
+        class="file-item"
+        :class="{ active: leftSelFileIndex == index }"
+        v-for="(file, index) in leftFileList"
+        :key="index"
+        @click="handleFileClick('left', index)"
+      >
+        {{ file.name }}
+      </div>
+    </div>
+    <div class="operators">
+      <div class="data-type-select" v-if="showDataType">
+        <custom-select :options="dataTypeList" v-model="dataType" />
+      </div>
+      <div class="transit">
+        <a-button :disabled="leftSelFileIndex == null" type="primary" @click="handleTransfer('right')">
+          <a-icon type="double-right" />
+        </a-button>
+      </div>
+      <div class="transit">
+        <a-button :disabled="rightSelFileIndex == null" type="primary" @click="handleTransfer('left')">
+          <a-icon type="double-left" />
+        </a-button>
+      </div>
+    </div>
+    <div class="file-list">
+      <div
+        class="file-item"
+        :class="{ active: rightSelFileIndex == index }"
+        v-for="(file, index) in rightFileList"
+        :key="index"
+        @click="handleFileClick('right', index)"
+      >
+        {{ file.name }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { fetchAndDownload } from '@/utils/file'
+import { isNullOrUndefined } from '@/utils/util'
+const dataTypeList = ['SAMPLEPHD', 'BLANKPHD', 'DETBKPHD', 'CALIBPHD', 'QCPHD']
+
+const rules = {
+  msg_id: `MSG_ID can't be null`,
+  designator: `Designator can't be null!`,
+  station: `Station code can't be null!`,
+  detector: `Detector code can't be null!`,
+  sam_geom: `Sample geometry can't be null!`,
+  srId: `Sample reference identification can't be null!`,
+  air_volume: `The format of Total air volume sampled is error!`,
+}
+
+export default {
+  props: {
+    params: {
+      type: Object,
+      default: () => ({}),
+    },
+    fileOptions: {
+      type: Array,
+    },
+    showDataType: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    this.dataTypeList = dataTypeList.map((item) => ({
+      label: item,
+      value: item,
+    }))
+
+    return {
+      dataType: dataTypeList[0],
+      leftFileList: [],
+      rightFileList: [],
+
+      leftSelFileIndex: null,
+      rightSelFileIndex: null,
+    }
+  },
+  methods: {
+    beforeLeftFileUpload(file) {
+      this.leftFileList = [...this.leftFileList, file]
+      return false
+    },
+
+    beforeRightFileUpload(file) {
+      this.rightFileList = [...this.rightFileList, file]
+      return false
+    },
+
+    handleFileClick(side, index) {
+      if (side == 'left') {
+        this.leftSelFileIndex = index
+      } else {
+        this.rightSelFileIndex = index
+      }
+    },
+
+    validateForm() {
+      const entries = Object.entries(this.params)
+      if (entries.length) {
+        for (const item of entries) {
+          const [k, v] = item
+          const rule = rules[k]
+          if (rule) {
+            // 如果这个字段需要验证
+            if (typeof v == 'string' && (!v || !v.trim())) {
+              this.$message.warn(rule)
+              return false
+            } else if (typeof v == 'object' && isNullOrUndefined(v)) {
+              this.$message.warn(rule)
+              return false
+            }
+          }
+        }
+      }
+      return true
+    },
+
+    // 转换
+    async handleTransfer(target) {
+      const validate = this.validateForm()
+      if (!validate) {
+        return
+      }
+
+      let url = this.fileOptions[1].transformUrl
+      let file = this.rightFileList[this.rightSelFileIndex]
+      const formData = new FormData()
+
+      if (target == 'right') {
+        url = this.fileOptions[0].transformUrl
+        file = this.leftFileList[this.leftSelFileIndex]
+        Object.entries(this.params).forEach(([k, v]) => {
+          if (['collect_start', 'collect_stop', 'transmit'].includes(k)) {
+            v = v + '.0'
+          }
+          formData.append(k, v)
+        })
+      }
+
+      if (!file.size) {
+        return
+      }
+
+      formData.append('file', file)
+
+      if (this.showDataType) {
+        formData.append('data_type', this.dataType)
+      }
+
+      try {
+        const fileName = await fetchAndDownload(url, formData)
+        if (target == 'left') {
+          this.leftFileList.push({
+            name: fileName,
+          })
+        } else {
+          this.rightFileList.push({
+            name: fileName,
+          })
+        }
+      } catch (error) {
+        console.error(error)
+      }
+    },
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.spectrum-transfer-com {
+  display: grid;
+  grid-template-rows: 30px 175px;
+  grid-template-columns: 1fr 166px 1fr;
+  row-gap: 8px;
+  column-gap: 10px;
+}
+
+.title {
+  text-align: center;
+  background-color: #225a6a;
+  line-height: 30px;
+  /deep/.ant-upload {
+    width: 100%;
+    cursor: pointer;
+  }
+}
+
+.data-type {
+  text-align: center;
+  line-height: 30px;
+}
+
+.file-list {
+  background-color: #225a6a;
+  overflow: auto;
+}
+
+.file-item {
+  padding: 0 5px;
+  height: 30px;
+  line-height: 30px;
+  cursor: pointer;
+
+  &.active {
+    background-color: #296d81;
+  }
+}
+
+.operators {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  .transit {
+    .ant-btn {
+      height: 40px;
+      width: 100%;
+    }
+  }
+}
+</style>

src/views/spectrumAnalysis/components/Modals/FtransltModal/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <custom-modal v-model="visible" :width="1080" title="File-Format-Ftransit" :footer="null">
+  <custom-modal v-model="visible" :width="1080" title="File-Format-Ftransit" :footer="null" destroy-on-close>
     <a-tabs :animated="false">
       <a-tab-pane tab="INT.SPC<=>.IMS" key="1">
         <int-spc-ims-transfer />

src/views/spectrumAnalysis/index.vue

@@ -743,7 +743,6 @@ export default {
                 {
                   type: 'a-menu-item',
                   title: 'Ftransit',
-                  show: this.isGamma || this.isBetaGamma,
                   handler: () => (this.ftransltModalVisible = true),
                 },
                 {