doctor-admin-components 1.0.13-beta.21 → 1.0.13-beta.23

package/packages/src/views/biz/bizFileInfo/contractFile/BillOfLadingNoTab.vue

@@ -0,0 +1,114 @@
+<!--
+ * @Author: zhangpengwei@1338418459736990.onaliyun.com zhangpengwei@1338418459736990.onaliyun.com
+ * @Date: 2024-03-13 14:28:59
+ * @LastEditors: zhangpengwei@1338418459736990.onaliyun.com zhangpengwei@1338418459736990.onaliyun.com
+ * @LastEditTime: 2024-03-28 15:42:56
+ * @FilePath: /doctor-admin-components 公共组件/packages/src/views/biz/bizFileInfo/contractFile/BillOfLadingNoTab.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
+<template>
+    <div class="bill-no-root" :style="open ? 'height:max-content': ''">
+        <div :class="'bill-no'" :style="shipmentIndex == shipBillNo ? { color: progressInfo.bgcolor } : ''" v-for="(
+              shipmentFileInfo, shipmentIndex
+            ) in contractFileInfoData.shipmentFileInfoList" :key="shipmentIndex" @click="changeShipBillNo(shipmentIndex)">
+
+          提单号 {{ shipmentFileInfo.billOfLadingNo
+    ? shipmentFileInfo.billOfLadingNo
+    : '' }}
+        </div>
+        <div class="billOfLadingNo-more" v-if="contractFileInfoData.shipmentFileInfoList && contractFileInfoData.shipmentFileInfoList.length > 3" @click.stop="openFun">
+        <!-- <div class="billOfLadingNo-more"  @click.stop="openFun"> -->
+          <i v-if="open" class="el-icon-caret-top"></i>
+          <i v-else class="el-icon-caret-bottom"></i>
+        </div>
+      </div>
+</template>
+
+<script>
+export default {
+  name: 'BillOfLadingNoTab',
+  props: {
+    contractFileInfo: {
+      type: Object,
+      default: () => {}
+    },
+    shipBillNoProp: {
+      type: String | Number,
+      default: ''
+    },
+    progressInfo: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      open: false,
+      shipBillNo:0,
+      contractFileInfoData: {}
+    }
+  },
+  methods: {
+    openFun () {
+        this.open = !this.open
+    },
+    changeShipBillNo(index) {
+      this.$emit('changeShipBillNo', index)
+    }
+  },
+  watch: {
+    shipBillNoProp: {
+      handler(val) {
+        this.shipBillNo = val
+        console.log('shipBillNoProp', val);
+      },
+      immediate: true,
+      deep: true
+    },
+    contractFileInfo: {
+      handler(val) {
+        this.contractFileInfoData = val
+      },
+      immediate: true,
+      deep: true
+    }
+  },
+}
+
+</script>
+
+<style lang="scss" scoped>
+.bill-no-root {
+  display: flex;
+  flex-wrap: wrap;
+  padding:0 20px;
+  width:100%;
+  position:relative;
+  height:60px;
+  overflow:hidden;
+
+  .billOfLadingNo-more {
+    width:20px;
+    height:30px;
+    position:absolute;
+    right:0;
+    top:15px;
+    background-color: #999;
+    text-align: center;
+    line-height: 30px;
+  }
+
+  .bill-no {
+    width:33%;
+    font-size: 14px;
+    color: #A7A9AC;
+    margin:20px 20px 20px 0;
+    cursor: pointer;
+  }
+
+  .bill-no-active {
+    color: #4DA9EB;
+  }
+}
+
+</style>

package/packages/src/views/biz/bizFileInfo/contractFile/ContentTitle.vue

@@ -0,0 +1,102 @@
+<!--
+ * @Author: zhangpengwei@1338418459736990.onaliyun.com zhangpengwei@1338418459736990.onaliyun.com
+ * @Date: 2024-02-23 16:17:11
+ * @LastEditors: zhangpengwei@1338418459736990.onaliyun.com zhangpengwei@1338418459736990.onaliyun.com
+ * @LastEditTime: 2024-03-15 20:10:26
+ * @FilePath: /doctor-admin-components 公共组件/packages/src/views/biz/bizFileInfo/contractFile/ContentTitle.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
+<template>
+    <div class="content-title">
+        <div class="bg-button-success" v-if="successFlag">
+            <i class="el-icon-success success"></i>
+            {{ contentTitleInfo.bgButton }}
+        </div>
+        <div class="bg-button"  v-else :style="{backgroundColor:contentTitleInfo.bgcolor}">{{ contentTitleInfo.bgButton }}</div>
+        <div class="bg-time" v-if="contentTitleInfo.bgTime">{{ contentTitleInfo.bgTime }} 上传</div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'DoctorAdminComponentsContentTitle',
+    props: {
+        contentTitleProp: {
+            type: Object,
+            default: {}
+        },
+        successFlag: {
+            type: Boolean,
+            default: false
+        }
+    },
+    data() {
+        return {
+            contentTitleInfo: {}
+        };
+    },
+
+    mounted() {
+        
+    },
+
+    methods: {
+        
+    },
+    watch: {
+        contentTitleProp: {
+            handler: function (val) {
+                this.contentTitleInfo = val;
+            },
+            deep: true,
+            immediate: true
+        }
+        
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+.content-title {
+  display: flex;
+  align-items: center;
+  margin: 20px 0;
+  width: max-content;
+  max-width: max-content;
+  .bg-button {
+    min-width: 69px;
+    width:max-content;
+    height: 21px;
+    line-height: 21px;
+    text-align: center;
+    padding: 0 10px;
+    background-color: #FBB040;
+    border-radius: 10px;
+    font-size: 14px;
+    margin-right:20px;
+  }
+  .bg-button-success {
+    min-width: 69px;
+    width:max-content;
+    height: 21px;
+    line-height: 21px;
+    text-align: center;
+    padding: 0 10px;
+    font-size: 14px;
+    margin-right:20px;
+  }
+  .bg-time {
+    color: #939598;
+    line-height: 12px;
+    text-align: left;
+    font-size: 14px;
+    margin-right:20px;
+  }
+}
+
+.success {
+  color: #67C23A;
+  font-size:15px;
+}
+
+</style>

package/packages/src/views/biz/bizFileInfo/contractFile/IMGPreviewCheckBox.vue

@@ -0,0 +1,235 @@
+<!--
+ * @Author: zhangpengwei@1338418459736990.onaliyun.com zhangpengwei@1338418459736990.onaliyun.com
+ * @Date: 2024-02-26 10:03:01
+ * @LastEditors: zhangpengwei@1338418459736990.onaliyun.com zhangpengwei@1338418459736990.onaliyun.com
+ * @LastEditTime: 2024-03-28 15:16:00
+ * @FilePath: /doctor-admin-components 公共组件/packages/src/views/biz/bizFileInfo/IMGPreviewCheckBox.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
+<template>
+    <div class="img-preview-root">
+        <div class="img-preview" :style="open ? 'height:max-content' : ''">
+            <slot></slot>
+            <div class="img-block" v-for="(fit, key) in imgList" :key="key">
+                <el-image
+                    style="width: 100px; height: 100px;object-fit:cover;"
+                    :src="fit.url"
+                    :preview-src-list="srcList">
+                </el-image>
+                <i :class="['checkbox-size', 'el-checkbox__input', fit.checked ? 'is-checked' : '']" @click.stop="checkClick(key)">
+                    <i class="el-checkbox__inner"></i>
+                </i>
+                <i @click.stop="downloadSingleFile(fit)" class="el-icon-download download-icon"/>
+            </div>
+             <div class="billOfLadingNo-more"  @click.stop="openFun" v-if="imgList && imgList.length > 7">
+                <i v-if="open" class="el-icon-caret-top"></i>
+                <i v-else class="el-icon-caret-bottom"></i>
+            </div>
+        </div>
+        <div class="batch-download" v-show="showDownloadIcon" @click.stop="downLoadFile">批量下载</div>
+    </div>
+</template>
+
+<script>
+import JSZip from 'jszip';
+import { saveAs } from 'file-saver';
+import { isImage, isVideo } from '@/utils/index';
+
+export default {
+    name: 'IMGPreviewCheckBox',
+    props: {
+        imgArr: {
+            type: Array,
+            default: () => []
+        },
+        info: {
+            type: Object,
+            default: () => {}
+        }
+    },
+    data() {
+        return {
+            open: false,
+            imgList: [],
+            srcList:[]
+        };
+    },
+
+    mounted() {
+        
+    },
+
+    methods: {
+        checkClick(index) {
+            this.imgList[index].checked = !this.imgList[index].checked;
+        },
+        checkAll1() {
+            this.imgList.forEach((item) => {
+                item.checked = true;
+            });
+        },
+        cancelAll1() {
+            this.imgList.forEach((item) => {
+                item.checked = false;
+            });
+        },
+        // 文件名称
+        extractFileName() {
+            return 'loading photos-' + this.info.containerNo + '/container ' + this.info?.containerId  + '/ Dated ' +  this.$moment(new Date().getTime()).format('YYYY-MM-DD')
+        },
+        /**
+         * @description: 下载一个文件
+         * @param {*} file
+         * @return {*}
+         */
+        downloadSingleFile(file) {
+            // 从URL中提取文件名
+            const fileName = this.extractFileName();
+            // 如果是zip文件，重新命名为当前时间戳，否则使用原文件名
+            const newName = /\.zip$/i.test(fileName) ? fileName + '.zip' : fileName;
+            saveAs(file.url, newName);
+            this.loading = false
+        },
+        /**
+         * @description: 文件下载
+         * @return {*}
+         */
+        async downLoadFile () {
+            this.loading = true
+            // test
+            let files = this.imgList.filter(item => item.checked)
+
+            if (files.length === 1) {
+                // 如果只有一个文件且该文件是图片/视频，直接下载
+                this.downloadSingleFile(files[0]);
+            } else {
+                // 创建一个ZIP包，但只添加图片文件
+                const zip = new JSZip();
+                for (let file of files) {
+                if (isImage(file.url) || isVideo(file.url)) { // 检查是否为图片/视频文件
+                    const fileData = await fetch(file.url).then(response => {
+                    if (!response.ok) throw new Error('Network response was not ok');
+                    return response.blob();
+                    });
+                    // 从URL中提取文件名
+                    const fileName = file.url.split('/').pop();
+                    zip.file(fileName, fileData, { binary: true });
+                }
+                }
+                if (Object.keys(zip.files).length > 0) {
+                    zip.generateAsync({ type: 'blob' }).then(content => {
+                        const fileName = this.extractFileName();
+                        saveAs(content, fileName + '.zip');
+                        this.loading = false
+                    });
+                } else {
+                this.loading = false
+                alert("没有文件可下载");
+                }
+            }
+            this.cancelAll1()
+        },
+        openFun () {
+            this.open = !this.open
+        },
+    },
+    watch: {
+        imgArr: {
+            handler(val) {
+                if(val.length) {
+                    this.imgList = [];
+                    this.srcList = [];
+                    val.forEach((item) => {
+                        this.imgList.push({
+                            url: item.url,
+                            checked: false
+                        });
+                        this.srcList.push(item.url);
+                    });
+                }
+            },
+            deep: true,
+            immediate: true
+        }
+    },
+    computed: {
+        showDownloadIcon () {
+            let res = this.imgList.filter(item => item.checked)
+            return res.length > 0
+        }
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+.img-preview {
+    display:flex;
+    flex-wrap: wrap;
+    padding-right:40px;
+    height:110px;
+    overflow:hidden;
+    position: relative;
+    width:100%;
+    .img-block {
+        position: relative;
+        margin:0 15px 15px 0;
+    }
+    .fold-wrap {
+        position: absolute;
+        right: 0;
+        width: 80px;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        .el-button {
+            margin-bottom: 20px;
+        }
+    
+    }
+}
+.checkbox-size {
+    position:absolute;
+    left:0;
+    width:18px;
+    height:18px;
+}
+.download-icon {
+    position: absolute;
+    bottom:2px;
+    right:0;
+    background-color: #fff;
+    cursor: pointer;
+}
+
+.billOfLadingNo-more {
+    width:20px;
+    height:100px;
+    position:absolute;
+    right:0;
+    top:0;
+    background-color: #999;
+    text-align: center;
+    line-height: 100px;
+  }
+
+.img-preview-root {
+    position: relative;
+    .batch-download {
+        position: absolute;
+        top: -41px;
+        left: 480px;
+        min-width: 80px;
+        width:max-content;
+        padding:0 10px;
+        height: 22px;
+        line-height: 22px;
+        text-align: center;
+        border-radius: 10px;
+        background-color: #54B8FF;
+        cursor: pointer;
+        font-size:12px;
+    }
+}
+
+</style>

package/packages/src/views/biz/bizFileInfo/contractFile/Progress.vue

@@ -0,0 +1,84 @@
+<!--
+ * @Author: zhangpengwei@1338418459736990.onaliyun.com zhangpengwei@1338418459736990.onaliyun.com
+ * @Date: 2024-02-22 11:04:36
+ * @LastEditors: zhangpengwei@1338418459736990.onaliyun.com zhangpengwei@1338418459736990.onaliyun.com
+ * @LastEditTime: 2024-02-22 11:43:24
+ * @FilePath: /doctor-admin-components 公共组件/packages/src/views/biz/bizFileInfo/contractFile/Process.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
+<template>
+    <div class="progress" :style="{backgroundColor:info.bgcolor}">
+        <img class="progress-img" :src="info.img" alt="">
+        <div class="progress-text">{{ info.text}}</div>
+        <div class="progress-rate">{{ info.rate }}%</div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'DoctorAdminComponentsProcess',
+    props: {
+        infoPro: {
+            type: Object,
+            default: () => {
+                return {};
+            },
+        },
+    },
+    data() {
+        return {
+            info:{}
+        };
+    },
+
+    mounted() {
+        
+    },
+
+    methods: {
+        
+    },
+    watch: {
+        infoPro: {
+            handler (val) {
+                this.info = val;
+            },
+            deep: true,
+            immediate: true
+        },
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+.progress {
+    min-width: 85px;
+    height: 27px;
+    background: #FBB040;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 5px;
+    box-sizing: border-box;
+    margin-left:15px;
+    .progress-img {
+        width: 17px;
+        height: 17px;
+        background: #FFFFFF;
+        border-radius: 8px;
+    }
+    .progress-text {
+        font-size: 14px;
+        font-weight: normal;
+    }
+    .progress-rate {
+        font-size: 14px;
+        font-weight: normal;
+        font-size: 9px;
+        font-weight: normal;
+        color: #231F20;
+    }
+
+
+}
+</style>

package/packages/src/views/biz/bizFileInfo/contractFile/ProgressDetail.vue

@@ -0,0 +1,122 @@
+<!--
+ * @Author: zhangpengwei@1338418459736990.onaliyun.com zhangpengwei@1338418459736990.onaliyun.com
+ * @Date: 2024-02-22 11:04:36
+ * @LastEditors: zhangpengwei@1338418459736990.onaliyun.com zhangpengwei@1338418459736990.onaliyun.com
+ * @LastEditTime: 2024-03-13 19:59:58
+ * @FilePath: /doctor-admin-components 公共组件/packages/src/views/biz/bizFileInfo/contractFile/Process.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
+<template>
+    <div class="progress" :style="{backgroundColor:info.bgcolor}">
+        <el-row>
+            <el-col :span="8">
+                <div class="progress-left">
+                    <img class="progress-img" :src="info.img" alt="">
+                    <div class="progress-text">{{ info.text}}</div>
+                </div>
+            </el-col>
+            <el-col :span="16">
+                <div class="progress-info"
+                 :style="{background:`linear-gradient(to right,${info.bgcolor} 0%, ${info.bgcolor} ${rate}%, #fff ${rate}%, #fff 100%)`}"
+                 >
+                 <div class="progress-info-text">
+                     <div v-if="info.textArr && info.textArr.length" class="progress-info-item" v-for="(textItem, key) in info.textArr" :key="key">
+                         {{textItem}}
+                     </div>
+                 </div>
+                </div>
+            </el-col>
+        </el-row>
+        <div class="progress-rate">进度{{ info.rate }}%</div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'DoctorAdminComponentsProgressDetail',
+    props: {
+        infoPro: {
+            type: Object,
+            default: () => {
+                return {};
+            },
+        },
+    },
+    data() {
+        return {
+            info:{},
+            rate:0
+        };
+    },
+
+    mounted() {
+    },
+
+    methods: {
+        
+    },
+    watch: {
+        infoPro: {
+            handler (val) {
+                this.info = val;
+                this.rate = +val.rate;
+            },
+            deep: true,
+            immediate: true
+        },
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+.progress {
+    min-width: 85px;
+    min-height: 112px;
+    padding:5px;
+    box-sizing: border-box;
+    position:relative;
+    .progress-left {
+        min-height:112px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        .progress-img {
+            width: 36px;
+            height: 36px;
+            background: #FFFFFF;
+            border-radius: 50%;
+        }
+        .progress-text {
+            font-size: 33px;
+            margin-left:30px;
+            font-weight: normal;
+            color: #fff;
+        }
+    }
+    .progress-rate {
+        position: absolute;
+        top:15px;
+        right:20px;
+        font-size: 18px;
+        font-weight: 600;
+        color: #231F20;
+    }
+    .progress-info {
+        min-height:112px;
+        overflow:hidden;
+        .progress-info-item {
+            margin-top:8px;
+            overflow:hidden;
+        }
+        .progress-info-text {
+            min-height:112px;
+            padding-left:10px;
+            display:flex;
+            flex-direction: column;
+            justify-content: center;
+        }
+    }
+
+
+}
+</style>