doctor-admin-components 1.0.13-beta.4 → 1.0.13-beta.41

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

@@ -0,0 +1,107 @@
+<!--
+ * @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
+ * @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">
+        <el-tab-pane :label="$t('contractDetail.summary')" name="first">
+          <contract-summary v-if="activeName == 'first'" :channel="channel"></contract-summary>
+        </el-tab-pane>
+        <el-tab-pane :label="$t('contractDetail.info')" name="second">
+          <contract-info v-if="activeName == 'second'" :channel="channel"></contract-info>
+        </el-tab-pane>
+        <el-tab-pane
+          v-if="contract.contractType == 'sale'"
+          :label="$t('contractDetail.blInfo')"
+          name="third"
+        >
+          <bill-info :contract="contract" v-if="activeName == 'third'"
+          :channel="channel"
+          ></bill-info>
+        </el-tab-pane>
+        <el-tab-pane :label="$t('contractDetail.fileManage')" name="fourth">
+          <contract-file
+            v-if="activeName == 'fourth'"
+            :contract="contract"
+            :channel="channel"
+            :buyerFlag="buyerFlag"
+          ></contract-file>
+        </el-tab-pane>
+      </el-tabs>
+
+      <!-- 这里添加合同编号的显示 -->
+      <div
+        style="
+          position: absolute;
+          right: 10px;
+          top: 5px;
+          margin-top: 10px;
+          font-weight: bold;
+        "
+      >{{$t('contractDetail.Contract_No')}}：{{ contract.contractNo }}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getBizContract } 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';
+
+export default {
+  name: 'ContractTracingDetail',
+  mixins: [],
+  components: {
+    ContractSummary,
+    BillInfo,
+    ContractFile,
+    ContractInfo,
+  },
+  props: {
+    channel: '',
+  },
+  data() {
+    return {
+      activeName: 'first',
+      contract: {},
+      buyerFlag: true,
+    };
+  },
+  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';
+    localStorage.setItem('contractDetail', location.href);
+    location.href;
+  },
+  mounted() {},
+  methods: {
+    getContract(contractId) {
+      getBizContract(contractId).then((res) => {
+        this.contract = res.data;
+        // Debit note是给卖家的，要放在 ARS 下
+        // Credit note是给买家的，要放在 ARP 下
+        this.buyerFlag = this.contract?.contractNo
+          ?.toLowerCase()
+          ?.includes('arp');
+      });
+    },
+    handleClick(tab, event) {
+      console.log(tab, event);
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss"></style>

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

@@ -2,14 +2,55 @@
  * @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-03-26 17:12:41
  * @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="tab-root">
+          <div :class="['tab', activeName == tabsItem.name ? 'active' : '']" v-for="tabsItem in (contract.contractType == 'sale' ? saleTabsArr : purchaseTabsArr) " :key="tabsItem.id" @click="changeTabs(tabsItem)">
+            {{ tabsItem.label }}
+          </div>
+        </div>
+        <div>
+              <!-- 选择项 -->
+        <div class="selection-root">
+          <span>已选择 {{ selectFileList.length }} 项</span>
+          <div class="border-button" @click.stop="downLoadAll">全部下载</div>
+          <div class="border-button" @click.stop="deleteAll">全部删除</div>
+          <div class="border-button" @click.stop="cancelAll">取消选择</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>
+
+        <bill-info :contract="contract" v-if="activeName == 'third'"
+          :channel="channel"
+        ></bill-info>
+
+        <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 +74,10 @@
             :buyerFlag="buyerFlag"
           ></contract-file>
         </el-tab-pane>
-      </el-tabs>
+      </el-tabs> -->
 
       <!-- 这里添加合同编号的显示 -->
-      <div
+      <!-- <div
         style="
           position: absolute;
           right: 10px;
@@ -45,7 +86,7 @@
           font-weight: bold;
         "
       >{{$t('contractDetail.Contract_No')}}：{{ contract.contractNo }}</div>
-    </div>
+    </div> -->
   </div>
 </template>
 
@@ -55,6 +96,7 @@ 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,6 +115,38 @@ export default {
       activeName: 'first',
       contract: {},
       buyerFlag: true,
+      saleTabsArr:[{
+        label: '订单概括',
+        name: 'first',
+        id:0
+      },{
+        label: '合同详情',
+        name: 'second',
+        id:1
+      },{
+        label: '提单指令',
+        name: 'third',
+        id:2
+      },{
+        label: '文件管理',
+        name: 'fourth',
+        id:3
+      }],
+      purchaseTabsArr:[{
+        label: '订单概括',
+        name: 'first',
+        id:0
+      },{
+        label: '合同详情',
+        name: 'second',
+        id:1
+      },{
+        label: '文件管理',
+        name: 'fourth',
+        id:2
+      }],
+      
+      selectFileList: [],
     };
   },
   computed: {},
@@ -81,12 +155,59 @@ export default {
     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 = 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.$refs.contractFileRef.downloadZip()
+    },
+    deleteAll() {
+      console.log('==delBizFileInfo==',this.selectFileList);
+      if(this.selectFileList.length == 0) {
+        return this.$message.warning('请选择文件')
+      }
+
+      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;
@@ -104,4 +225,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>