doctor-admin-components 1.0.13-beta.9 → 1.0.13-beta.90

package/packages/src/views/biz/contractTracing/contractTracingDetail.vue

@@ -2,14 +2,63 @@
  * @Author: zhangpengwei 15038779532@163.com
  * @Date: 2023-07-20 17:13:54
  * @LastEditors: zhangpengwei@1338418459736990.onaliyun.com zhangpengwei@1338418459736990.onaliyun.com
- * @LastEditTime: 2024-01-19 13:54:56
+ * @LastEditTime: 2024-05-08 14:21:04
  * @FilePath: /recycle-vue-ui再生博士后台管理/src/views/biz/contractTracing/contractTracingDetail.vue
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
 <template>
   <div class="app-container">
-    <div style="position: relative">
-      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
+    <div class="app-container-container">
+      <div class="app-container-left">
+        <div class="contract-number">
+          <div>{{$t('contractDetail.Contract_No')}}</div>
+          <div>{{ contract.contractNo }}</div>
+        </div>
+        <div class="contract-number">
+          <div>{{$t('contractDetail.Reference_No')}}</div>
+          <div>{{ contract.reference  || '--' }}</div>
+        </div>
+        <div class="tab-root">
+          <div :class="['tab', activeName == tabsItem.name ? 'active' : '']" v-for="tabsItem in saleTabsArr" :key="tabsItem.id" @click="changeTabs(tabsItem)">
+            {{ tabsItem.label }}
+          </div>
+        </div>
+        <div>
+              <!-- 选择项 -->
+        <div class="selection-root">
+          <span>{{ $t('contractDetail.Selected') }} {{ selectFileList.length }} {{ $t('contractDetail.item') }}</span>
+          <div class="border-button" @click.stop="downLoadAll">{{ $t('contractDetail.Download_All') }}</div>
+          <div class="border-button" @click.stop="deleteAll">{{$t('contractDetail.Delete_All')}}</div>
+          <div class="border-button" @click.stop="cancelAll">{{ $t('contractDetail.Deselect') }}</div>
+        </div>
+        </div>
+      </div>
+      <div class="app-container-right">
+        <contract-summary v-if="activeName == 'first'" :channel="channel"></contract-summary>
+        <contract-info v-if="activeName == 'second'" :channel="channel"></contract-info>
+        <!-- 提单指令 -->
+        <div v-if="activeName == 'third'">
+          <!-- 标题分栏 -->
+          <el-tabs v-model="activeBillIndex">
+            <el-tab-pane v-for="(bill, i) in blList" :key="i" :label="contract.contractNo+' 提单指令'" :name="i.toString()">
+              <bill-info @refresh="getBlList" :contract="contract" :billData="bill" :channel="channel"></bill-info>
+            </el-tab-pane>
+          </el-tabs>
+        </div>
+        
+        <contract-file
+          v-if="activeName == 'fourth' && contract.contractType"
+          :contract="contract"
+          :channel="channel"
+          :buyerFlag="buyerFlag"
+          :selectFileListProp="selectFileList"
+          ref="contractFileRef"
+        ></contract-file>
+
+      </div>
+    </div>
+    <!-- <div style="position: relative">
+      <el-tabs tabPosition="left" v-model="activeName" type="card" @tab-click="handleClick">
         <el-tab-pane :label="$t('contractDetail.summary')" name="first">
           <contract-summary v-if="activeName == 'first'" :channel="channel"></contract-summary>
         </el-tab-pane>
@@ -33,10 +82,10 @@
             :buyerFlag="buyerFlag"
           ></contract-file>
         </el-tab-pane>
-      </el-tabs>
+      </el-tabs> -->
 
       <!-- 这里添加合同编号的显示 -->
-      <div
+      <!-- <div
         style="
           position: absolute;
           right: 10px;
@@ -45,16 +94,17 @@
           font-weight: bold;
         "
       >{{$t('contractDetail.Contract_No')}}：{{ contract.contractNo }}</div>
-    </div>
+    </div> -->
   </div>
 </template>
 
 <script>
-import { getBizContract } from '../../../api/biz/bizContract';
+import { getBizContract, getContractBlList } from '../../../api/biz/bizContract';
 import ContractSummary from './contractSummary.vue';
 import BillInfo from './billInfo.vue';
 import ContractFile from '../bizFileInfo/contract.vue';
 import ContractInfo from './contractInfo.vue';
+import { delBizFileInfo } from '../../../api/biz/bizFileInfo';
 
 export default {
   name: 'ContractTracingDetail',
@@ -73,20 +123,104 @@ export default {
       activeName: 'first',
       contract: {},
       buyerFlag: true,
+      saleTabsArr:[{
+        label: this.$t('contractDetail.summary'),
+        name: 'first',
+        id:0
+      },{
+        label: this.$t('contractDetail.info'),
+        name: 'second',
+        id:1
+      },{
+        label: this.$t('contractDetail.blInfo'),
+        name: 'third',
+        id:2
+      },{
+        label: this.$t('contractDetail.fileManage'),
+        name: 'fourth',
+        id:3
+      }],
+      purchaseTabsArr:[{
+        label: this.$t('contractDetail.summary'),
+        name: 'first',
+        id:0
+      },{
+        label: this.$t('contractDetail.info'),
+        name: 'second',
+        id:1
+      },{
+        label: this.$t('contractDetail.fileManage'),
+        name: 'fourth',
+        id:2
+      }],
+      
+      selectFileList: [],
+      // 提单指令列表
+      blList: null,
+      activeBillIndex: null,
     };
   },
-  computed: {},
+  computed: {
+    
+  },
   watch: {},
   created() {
     const contractId = this.$route.params && this.$route.params.contractId;
     this.getContract(contractId);
     const activeName = this.$route.query && this.$route.query.activeName;
     this.activeName = activeName || 'first';
+    // this.activeName = 'fourth'
     localStorage.setItem('contractDetail', location.href);
     location.href;
   },
   mounted() {},
   methods: {
+    /**
+     * @description: 取消全部选择
+     * @return {*}
+     */
+    cancelAll () {
+      this.$refs.contractFileRef.cancelAllSelectFileList()
+    },
+
+    /**
+     * @description: 全部下载
+     * @return {*}
+     */
+    downLoadAll() {
+      if(this.selectFileList.length == 0) {
+        return this.$message.warning(this.$t('contractDetail.please_select_file'))
+      }
+      this.$refs.contractFileRef.downloadZip()
+    },
+    deleteAll() {
+      console.log('==delBizFileInfo==',this.selectFileList);
+      if(this.selectFileList.length == 0) {
+        return this.$message.warning(this.$t('contractDetail.please_select_file'))
+      }
+
+      this.$confirm('是否删除选中文件', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+      }).then(() => {
+        const ids = this.selectFileList.map(item => item.fileId)
+        delBizFileInfo(ids).then(() => {
+          this.$message.success('删除成功')
+          this.$refs.contractFileRef.handleRefresh()
+        })
+      }).catch(() => {
+        this.$message.info('已取消删除')
+      })
+    },
+    /**
+     * @description: 切换tab
+     * @param {*} tab
+     * @return {*}
+     */
+    changeTabs(tab) {
+      this.activeName = tab.name;
+    },
     getContract(contractId) {
       getBizContract(contractId).then((res) => {
         this.contract = res.data;
@@ -95,8 +229,21 @@ export default {
         this.buyerFlag = this.contract?.contractNo
           ?.toLowerCase()
           ?.includes('arp');
+        // 获取提单指令
+        this.getBlList()
       });
     },
+    getBlList() {
+      const contractId = this.$route.params && this.$route.params.contractId;
+      getContractBlList(contractId).then((res) => {
+        this.blList = res.rows
+        // 默认选中第一个
+        if (!this.activeBillIndex) {
+          this.activeBillIndex = '0'
+        }
+      })
+    },
+
     handleClick(tab, event) {
       console.log(tab, event);
     },
@@ -104,4 +251,77 @@ export default {
 };
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.app-container {
+  .app-container-container {
+    display: flex;
+    height: calc(100vh - 126px);
+    .app-container-left {
+      width: 141px;
+      height: 100%;
+      margin-right:10px;
+      background-color: #D9DFE8;
+      .contract-number {
+        font-size: 12px;
+        font-weight: normal;
+        color: #000000;
+        line-height: 14px;
+        text-align:left;
+        padding: 10px 0 0 15px;
+      }
+      .tab-root {
+        margin-top:40px;
+        display:flex;
+        flex-direction: column;
+        align-items: flex-end;
+        .tab {
+          height: 48px;
+          font-size: 14px;
+          font-weight: normal;
+          color: #000;
+          line-height: 48px;
+          text-align:right;
+          width:max-content;
+          padding:0 20px;
+          box-sizing: border-box;
+        }
+        .active {
+          background: #EFF5FF;
+          border-radius: 5px 0px 0px 5px;
+          color:#009444;
+        }
+
+      }
+    }
+    .app-container-right {
+      flex:1;
+      height: 100%;
+      overflow:auto;
+     
+    }
+  }
+}
+
+.selection-root {
+  margin-top: 26px;
+  display:flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.border-button {
+  margin-top:10px;
+  padding: 0 10px;
+  width: max-content;
+  height: 21px;
+  text-align: center;
+  line-height: 17px;
+  background: #FFFFFF;
+  border-radius: 11px;
+  font-size: 12px;
+  border: 2px solid #D1D3D4;
+  cursor: pointer;
+}
+</style>