产品库清单详情

package.json

@@ -55,6 +55,7 @@
     "js-beautify": "1.13.0",
     "js-cookie": "3.0.1",
     "jsencrypt": "3.0.0-rc.1",
+    "jszip": "^3.10.1",
     "lodash": "^4.17.21",
     "nprogress": "0.2.0",
     "print-js": "^1.6.0",

src/api/material/extend/material.js

@@ -0,0 +1,76 @@
+import request from '@/utils/request';
+
+// 获取基本信息
+export function getInfo(p1) {
+  return request({
+    url: '/system/material/details/'+p1,
+    method: 'get'
+  })
+}
+
+// 获取资质信息
+export function getMaterialQualifications(p1) {
+  return request({
+    url: '/detail/dept/getMaterialQualifications/'+p1,
+    method: 'get'
+  })
+}
+
+// 获取销售信息 三甲
+export function getSaleRankGrade(p1) {
+  return request({
+    url: '/detail/dept/getSaleRankGrade/'+p1,
+    method: 'get'
+  })
+}
+
+
+// 获取销售信息 三级
+export function getSaleRank(p1) {
+  return request({
+    url: '/detail/dept/getSaleRank/'+p1,
+    method: 'get'
+  })
+}
+
+
+// 产品库详情更新
+export function infoSave(data) {
+  return request({
+    url: "/detail/dept/infoSave",
+    method: "post",
+    data: data
+  });
+}
+
+// 物料适用科室详情
+export function getInfoSuitDeptByMaterialId(p1) {
+  return request({
+    url: '/detail/dept/getInfoSuitDeptByMaterialId/'+p1,
+    method: 'get'
+  })
+}
+
+// 物料图册详情
+export function getInfoPicturesByMaterialId(p1) {
+  return request({
+    url: '/detail/dept/getInfoPicturesByMaterialId/'+p1,
+    method: 'get'
+  })
+}
+
+// 物料附件科室详情
+export function getInfoAnnexByMaterialId(p1) {
+  return request({
+    url: '/detail/dept/getInfoAnnexByMaterialId/'+p1,
+    method: 'get'
+  })
+}
+
+// 获取文件信息
+export function readFile(p1) {
+  return request({
+    url: '/document/attachment/'+p1,
+    method: 'get'
+  })
+}

src/router/index.js

@@ -324,6 +324,13 @@ export const constantRoutes = [
     component: () => import('@/views/business/as/after-sales/user/index'),
     hidden: true,
   },
+   // 合作企业
+   {
+    path: '/ctyc/info/index',
+    name: "Ctyc",
+    component: () => import('@/views/ctyc/info/index'),
+    hidden: true,
+  },
   // 风险监控
   {
     path: '/ctyc/info/approvalMain',
@@ -345,6 +352,48 @@ export const constantRoutes = [
     component: () => import('@/views/ctyc/info/approved'),
     hidden: true,
   },
+  // 产品清单-详情
+  {
+    path: '/material/extend/detailMain',
+    name: "MaterialDetailMain",
+    component: () => import('@/views/material/extend/detailMain'),
+    hidden: true,
+  },
+  // 产品清单-详情-基本信息
+  {
+    path: '/material/extend/baseinfo',
+    name: "MaterialBaseInfo",
+    component: () => import('@/views/material/extend/baseinfo'),
+    hidden: true,
+  },
+  // 产品清单-详情-物料图册
+  {
+    path: '/material/extend/pictures',
+    name: "MaterialPictures",
+    component: () => import('@/views/material/extend/pictures'),
+    hidden: true,
+  },
+  // 产品清单-详情-附件
+  {
+    path: '/material/extend/annex',
+    name: "MaterialAnnex",
+    component: () => import('@/views/material/extend/annex'),
+    hidden: true,
+  },
+  // 产品清单-详情-资质信息
+  {
+    path: '/material/extend/qualifications',
+    name: "MaterialQualifications",
+    component: () => import('@/views/material/extend/qualifications'),
+    hidden: true,
+  },
+  // 产品清单-详情-销售情况
+  {
+    path: '/material/extend/sale',
+    name: "MaterialSale",
+    component: () => import('@/views/material/extend/sale'),
+    hidden: true,
+  },
 ]
 
 

src/views/ctyc/info/approval.vue

@@ -41,7 +41,7 @@
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="企业名称" align="center" prop="companyName" />
       <el-table-column label="新企业名称" align="center" prop="newCompanyName" />
-      <el-table-column label="企业风险预警" align="center" >
+      <el-table-column label="企业风险预警" align="center" width="300">
        <template slot-scope="scope">
           <el-button
             size="mini"

src/views/ctyc/info/approved.vue

@@ -60,7 +60,7 @@
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="企业名称" align="center" prop="companyName" />
       <el-table-column label="新企业名称" align="center" prop="newCompanyName" />
-      <el-table-column label="企业风险预警" align="center" >
+      <el-table-column label="企业风险预警" align="center" width="300">
        <template slot-scope="scope">
           <el-button
             size="mini"

src/views/material/basicFile/index.vue

@@ -235,7 +235,7 @@ export default {
     },
   },
   created() {
-    this.getTagList("material_list");
+    this.getTagList("material");
     this.useList();
   },
 };

src/views/material/extend/annex.vue

@@ -0,0 +1,248 @@
+<template>
+    <div class="app-container">
+        <el-form ref="form" :model="form" :rules="rules" class="baseinfoClass">
+            <el-form-item style="margin-left: -3vw;">
+                <div class="text-with-line">附件</div>
+            </el-form-item> 
+            <el-form-item class="container">
+                <el-button type="danger"  style="margin-right: 4vw;" @click="upload()">上传附件</el-button>
+            </el-form-item> 
+            <el-table
+                :data="submitAnnexData"
+                highlight-current-row
+                style="width: 100%; margin-left: -2vw; text-align: center;">
+                <el-table-column
+                    type="index"
+                    width="50">
+                    </el-table-column>
+                <el-table-column
+                property="suitDept"
+                label="附件"
+                width="240">
+                    <template slot-scope="scope">
+                        <span @click="downfile(scope.row.annex)" class="downfile">{{ scope.row.annexName }}</span>
+                    </template>
+                </el-table-column>
+                <el-table-column
+                property="accountLevel"
+                label="附件说明"
+                width="520">
+                    <template slot-scope="scope">
+                        {{ scope.row.explains }}
+                    </template>
+                </el-table-column>
+                <el-table-column
+                label="操作">
+                    <template slot-scope="scope">
+                        <el-button type="danger" icon="el-icon-delete" @click="deleteAnnex(scope.row)"></el-button>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </el-form>
+        <el-dialog
+            title="文件上传"
+            :visible.sync="dialogVisible"
+            width="30%"
+            :before-close="handleClose">
+            
+            <el-row>
+                <el-col :span="4">
+                    附件:
+                </el-col>
+                <el-col :span="8">
+                    <el-upload
+                        :action="uploadUrl"
+                        class="upload-demo"
+                        drag
+                        :on-success="onSuccess"
+                        :limit="1"
+                        :headers="headers"
+                        :file-list="thisFile"
+                        multiple>
+                        <i class="el-icon-upload"></i>
+                        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+                    </el-upload>
+                </el-col>
+            </el-row>
+            <el-row>
+                <el-col :span="4">
+                    附件说明:
+                </el-col>
+                <el-col :span="8">
+                    <el-input v-model="uploadExplains"></el-input>
+                </el-col>
+            </el-row>
+            
+            <span slot="footer" class="dialog-footer">
+                <el-button @click="canclUpload">取 消</el-button>
+                <el-button type="primary" @click="submitUpload">确 定</el-button>
+            </span>
+        </el-dialog>
+    </div>
+  </template>  
+  
+  <script>
+  import { EventBus } from '@/views/material/extend/event/event-bus.js';
+  import { getToken } from '@/utils/auth'
+  import { getInfoAnnexByMaterialId, readFile } from "@/api/material/extend/material.js";
+  export default {
+      name: "MaterialAnnex",
+      components: {
+        BatchImport: () => import("@/components/BatchImport/indexa.vue"),
+      },
+      props: {
+        materialId:{
+          type: String,
+          default: ''
+        }
+      },
+      data() {
+        return {
+            uploadExplains: '',
+            dialogVisible: false,
+            form:{},
+            rules:{},
+            thisFile: [],
+            submitAnnexData:[{
+                 id:1,
+                annex: '125410786',
+                annexName: '附件名称.xlsx',
+                explains: '这是一个附件说明'
+            },{
+                id:2,
+                annex: '125410786',
+                annexName: '附件名称.xlsx',
+                explains: '这是一个附件说明'
+            }],
+            currentRow: null,
+            uploadUrl: 
+                process.env.NODE_ENV == "development"
+                ? "/drp-file/document-center/fastdfs/upload"
+                : "/document-center/fastdfs/upload",
+            // 如果需要token认证，添加token到headers
+            headers: {
+                Authorization: 'Bearer ' + getToken()
+             }
+        }
+      },
+      created() {
+        this.getDetailAnnexByMaterialId();
+      },
+      mounted() {
+        // EventBus.$on('sendMaterialAnnex', this.handleSubmitAnnex);
+    },
+      beforeDestroy() {
+        // EventBus.$off('sendMaterialAnnex', this.handleSubmitAnnex);
+      },
+      methods: {
+        getDetailAnnexByMaterialId(){
+            getInfoAnnexByMaterialId(this.materialId).then(response => {
+                this.submitAnnexData = [];
+                this.submitAnnexData = response.data;
+            });
+        },
+        canclUpload(){
+            this.uploadExplains = '';
+            this.thisFile = [];
+            this.dialogVisible = false;
+        },
+        submitUpload(){
+            this.submitAnnexData.push({id:this.thisFile[0].id,
+                                        annex: this.thisFile[0].annex,
+                                        annexName: this.thisFile[0].annexName,
+                                        explains: this.uploadExplains})
+            EventBus.$emit('sendMaterialInfo', this.submitAnnexData);                            
+            this.thisFile = [];
+            this.uploadExplains = '';
+            this.dialogVisible = false;
+        },
+        upload(){
+            this.thisFile = [];
+            this.uploadExplains = '';
+            this.dialogVisible = true;
+        },
+        handleClose(done) {
+            this.thisFile = [];
+            this.uploadExplains = '';
+            this.$confirm('确认关闭？')
+            .then(_ => {
+                done();
+            })
+            .catch(_ => {});
+        },
+        downfile(e){
+            readFile(e).then(response => {
+                window.open('https://dev-sy.derom.com/document-center/minio/'+response.data.filepath);
+            });
+        },
+        onSuccess(e){
+            this.thisFile.push({id:e.id,
+                                        annex: e.id,
+                                        annexName: e.filename,
+                                        name: e.filename});
+        },
+        deleteAnnex(e) {
+          if(this.submitAnnexData.length === 1){
+              this.$message({
+                  message: '当前行无法删除, 请至少保留一条附件信息!',
+                  type: 'warning'
+              });
+              return;
+          }
+          this.submitAnnexData = this.submitAnnexData.filter(row => 
+              row.id != e.id
+          );
+          EventBus.$emit('sendMaterialInfo', this.submitAnnexData);    
+        },
+        handleSubmitAnnex(val){
+            this.$set(this.submitAnnexData, 'pictures', val);
+        },
+      }
+  };
+  </script>
+  
+<style>
+.baseinfoClass {
+    margin-left: 4vw;
+}
+.text-with-line {
+    position: relative;
+    font-size: 16px;
+    color: #333;
+    padding-bottom: 5px; /* 确保条线在文字下方 */
+}
+.text-with-line::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%; /* 条线的宽度 */
+    height: 2px; /* 条线的高度 */
+    background: #000; /* 条线的颜色 */
+}
+.container {
+    display: flex;
+    justify-content: flex-end; /* 这会把子元素放在容器的右边 */
+}  
+.button-container {
+  position: fixed;  /* 使用fixed定位，使得容器始终相对于浏览器窗口 */
+  top: 10px;        /* 距离顶部10像素 */
+  right: 60px;      /* 距离右侧10像素 */
+  z-index: 1000;    /* 设置一个较高的z-index确保按钮在其他内容之上 */
+} 
+.downfile {
+    color:blue;
+    position: relative;
+    text-decoration: none;
+}
+.downfile::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 1px; /* 下划线厚度 */
+  background: blue; /* 下划线颜色 */
+  width: 100%;
+}
+</style>

src/views/material/extend/baseinfo.vue

@@ -0,0 +1,272 @@
+<template>
+  <div class="app-container">
+    <el-form ref="form" :model="form" :rules="rules" class="baseinfoClass" >
+        <el-form-item style="margin-left: -3vw;">
+            <div class="text-with-line">基本信息</div>
+        </el-form-item> 
+        <el-form-item>
+          <el-col :span="8">
+            <span>物料编码：{{submitBaseInfoData.code}}</span>
+          </el-col>
+          <el-col :span="8">
+            <span>物料名称：{{submitBaseInfoData.name}}</span>
+          </el-col>
+          <el-col :span="8">
+            <span>规格：{{submitBaseInfoData.specification}}</span>
+          </el-col>
+        </el-form-item> 
+        <el-form-item>
+          <el-col :span="8">
+            <span>型号：{{submitBaseInfoData.model}}</span>
+          </el-col>
+          <el-col :span="8">
+            <span>生产厂家：{{submitBaseInfoData.manufacturerIdName}}</span>
+          </el-col>
+          <el-col :span="8">
+            <span>产地：{{submitBaseInfoData.originPlaceName}}</span>
+          </el-col>
+        </el-form-item>  
+        <el-form-item>
+          <el-col :span="8">
+            <span>一级分类：{{submitBaseInfoData.oneClassName}}</span>
+          </el-col>
+          <el-col :span="8">
+            <span>二级分类：{{submitBaseInfoData.twoClassName}}</span>
+          </el-col>
+          <el-col :span="8">
+            <span>三级分类：{{submitBaseInfoData.threeClassName}}</span>
+          </el-col>
+        </el-form-item>  
+        <el-form-item>
+          <el-col :span="8">
+            <span>四级分类：{{submitBaseInfoData.fourClassName}}</span>
+          </el-col>
+          <el-col :span="8">
+            <span>储存条件：{{submitBaseInfoData.storageConditionName}}</span>
+          </el-col>
+          <el-col :span="8">
+            <span>运输条件：{{submitBaseInfoData.transportationConditionName}}</span>
+          </el-col>
+        </el-form-item>  
+        <el-form-item>
+          <el-col :span="8">
+            <span>包装说明：{{submitBaseInfoData.packExplain}}</span>
+          </el-col>
+          <el-col :span="8">
+            <span>适用年限/次数：{{submitBaseInfoData.serviceLife || '无'}}</span>
+          </el-col>
+          <el-col :span="8">
+            <span>长度(mm)：{{submitBaseInfoData.length}}</span>
+          </el-col>
+        </el-form-item>  
+        <el-form-item>
+          <el-col :span="8">
+            <span>高度(mm)：{{submitBaseInfoData.height}}</span>
+          </el-col>
+          <el-col :span="8">
+            <span>宽度(mm)：{{submitBaseInfoData.width}}</span>
+          </el-col>
+          <el-col :span="8">
+            <span>负责采购员：{{submitBaseInfoData.puPersonnelIdName}}</span>
+          </el-col>
+        </el-form-item>  
+        <el-form-item>
+            <span>结构及组成：{{submitBaseInfoData.transportationConditionName}}</span>
+        </el-form-item>  
+        <el-form-item>
+            <span>适用范围：{{submitBaseInfoData.transportationConditionName}}</span>
+        </el-form-item>  
+        <el-form-item style="margin-left: -3vw;">
+            <div class="text-with-line">医药行业</div>
+        </el-form-item> 
+        <el-form-item>
+          <el-col :span="8">
+            <span>药品类型：{{submitBaseInfoData.medcines[0].isDrug == "0" ? '药品' : '非药品'}}</span>
+          </el-col>
+          <el-col :span="8">
+            <span>通用名称：{{submitBaseInfoData.medcines[0].commonName}}</span>
+          </el-col>
+          <el-col :span="8">
+            <span>剂型：{{submitBaseInfoData.dosageFormName}}</span>
+          </el-col>
+        </el-form-item>  
+        <el-form-item>
+          <el-col :span="8">
+            <span>医疗器械：{{submitBaseInfoData.medcines[0].medicalInstruments == '0' ? 玻璃仪器 : submitBaseInfoData.medcines[0].medicalInstruments == '1' ? '一类' :submitBaseInfoData.medcines[0].medicalInstruments == '2' ? '二类' :submitBaseInfoData.medcines[0].medicalInstruments == '3' ? '三类' : '无'}}</span>
+          </el-col>
+          <el-col :span="8">
+            <span>养护类型：{{submitBaseInfoData.medcines[0].curingType == "01" ? '一般养护' : '重点养护'}}</span>
+          </el-col>
+        </el-form-item>  
+        <el-form-item style="margin-left: -3vw;">
+            <div class="text-with-line">药品类别</div>
+        </el-form-item> 
+        <el-form-item>
+          <el-col :span="8">
+            <span>药品类别：{{submitBaseInfoData.classifyId}}</span>
+          </el-col>
+          <el-col :span="8">
+            <span>类别名称：{{submitBaseInfoData.classifyIdName}}</span>
+          </el-col>
+        </el-form-item>  
+        <el-form-item style="margin-left: -3vw;">
+            <div class="text-with-line">适用科室</div>
+        </el-form-item> 
+        <el-form-item class="container">
+            <el-button type="danger"  style="margin-right: 4vw;" @click="addSuitDept()">新增适用科室</el-button>
+        </el-form-item> 
+        <el-table
+            :data="tableData"
+            highlight-current-row
+            style="width: 100%; margin-left: -2vw; text-align: center;">
+            <el-table-column
+                type="index"
+                width="50">
+                </el-table-column>
+            <el-table-column
+            property="suitDept"
+            label="适用科室"
+            width="240">
+                <template slot-scope="scope">
+                    <el-input v-model="scope.row.suitDept" placeholder="请输入适用科室" @blur="tableDataBlur"></el-input>
+                </template>
+            </el-table-column>
+            <el-table-column
+            property="accountLevel"
+            label="账号级别"
+            width="360">
+                <template slot-scope="scope">
+                    <el-input v-model="scope.row.accountLevel" placeholder="请输入账号级别" @blur="tableDataBlur"></el-input>
+                </template>
+            </el-table-column>
+            <el-table-column
+            label="操作">
+                <template slot-scope="scope">
+                    <el-button type="danger" icon="el-icon-delete" @click="deleteSuitDept(scope.row)"></el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+    </el-form> 
+  </div>
+</template>  
+
+<script>
+import { EventBus } from '@/views/material/extend/event/event-bus.js';
+import { getInfo, getInfoSuitDeptByMaterialId } from "@/api/material/extend/material.js";
+export default {
+    name: "MaterialBaseInfo",
+    props: {
+      materialId:{
+        type: String,
+        default: ''
+      }
+    },
+    data() {
+      return {
+        // 表单参数
+        form: {},
+        // 表单校验
+        rules: {},
+        submitBaseInfoData: {},
+        tableData: [{
+            id: 1,
+            suitDept: '外科',
+            accountLevel: '王小虎',
+        },{
+            id: 2,
+            suitDept: '外科',
+            accountLevel: '王小虎',
+        }],
+        currentRow: null,
+      };
+    },
+    created() {
+      this.getDetailBaseInfo();
+      this.getDetailSuitDeptByMaterialId();
+    },
+    mounted() {
+        // EventBus.$on('sendMaterialBaseInfo', this.handleSubmitBaseInfo);
+    },
+    beforeDestroy() {
+        // EventBus.$off('sendMaterialBaseInfo', this.handleSubmitBaseInfo);
+    },
+    methods: {
+      getDetailBaseInfo() {
+        getInfo(this.materialId).then(response => {
+          this.submitBaseInfoData = response.data.data;
+        });
+      },
+      getDetailSuitDeptByMaterialId(){
+        getInfoSuitDeptByMaterialId(this.materialId).then(response => {
+          this.tableData = [];
+          this.tableData = response.data;
+        });
+      },
+        handleSubmitBaseInfo(val){
+          this.$set(this.submitBaseInfoData, 'annex', val);
+        },
+        setCurrent(row) {
+            this.$refs.singleTable.setCurrentRow(row);
+        },
+        handleCurrentChange(val) {
+            this.currentRow = val;
+        },
+        addSuitDept() {
+            const newRow = { id: this.randomLong(), suitDept: '', accountLevel: '' };
+            this.tableData.push(newRow);
+        },
+        deleteSuitDept(e) {
+          if(this.tableData.length === 1){
+              this.$message({
+                  message: '当前行无法删除, 请至少保留一条适用科室信息!',
+                  type: 'warning'
+              });
+              return;
+          }
+          this.tableData = this.tableData.filter(row => 
+              row.id != e.id
+          );
+          EventBus.$emit('sendMaterialInfo', this.tableData);
+        },
+        tableDataBlur(){
+          EventBus.$emit('sendMaterialInfo', this.tableData);
+        },
+        randomLong() {
+            const min = Number.MIN_SAFE_INTEGER;
+            const max = Number.MAX_SAFE_INTEGER;
+            // 50% chance of a negative number
+            const isNegative = Math.random() < 0.5; 
+            const randomValue = Math.random() * (max - min) + min;
+            return isNegative ? Math.round(randomValue) : Math.round(randomValue) * -1;
+        }
+    }
+    
+};
+</script>
+
+<style>
+    .baseinfoClass {
+        margin-left: 4vw;
+    }
+    .text-with-line {
+        position: relative;
+        font-size: 16px;
+        color: #333;
+        padding-bottom: 5px; /* 确保条线在文字下方 */
+    }
+    .text-with-line::after {
+        content: '';
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        width: 100%; /* 条线的宽度 */
+        height: 2px; /* 条线的高度 */
+        background: #000; /* 条线的颜色 */
+    }
+    .container {
+        display: flex;
+        justify-content: flex-end; /* 这会把子元素放在容器的右边 */
+    }  
+
+</style>
+  

src/views/material/extend/detailMain.vue

@@ -0,0 +1,121 @@
+<template>
+    <div class="app-container">
+        <el-tabs v-model="activeName" >
+            <el-tab-pane label="基本信息" name="MaterialBaseInfo" >
+                <MaterialBaseInfo :materialId="materialId"></MaterialBaseInfo>
+            </el-tab-pane>
+            <el-tab-pane label="物料图册" name="MaterialPictures" >
+                <MaterialPictures :materialId="materialId"></MaterialPictures>
+            </el-tab-pane>
+            <el-tab-pane label="资质信息" name="MaterialQualifications" >
+                <MaterialQualifications :materialId="materialId"></MaterialQualifications>
+            </el-tab-pane>
+            <el-tab-pane label="销售情况" name="MaterialSale" >
+                <MaterialSale :materialId="materialId"></MaterialSale>
+            </el-tab-pane>
+            <el-tab-pane label="附件" name="MaterialAnnex" >
+                <MaterialAnnex :materialId="materialId"></MaterialAnnex>
+            </el-tab-pane>
+        </el-tabs>
+        <div class="button-container">
+            <el-button type="danger" @click="qx">取消</el-button>
+            <el-button type="danger" @click="bc">保存</el-button>
+        </div>
+    </div>
+</template>
+<script>
+import { infoSave } from "@/api/material/extend/material.js";
+import MaterialBaseInfo from '@/views/material/extend/baseinfo';
+import MaterialAnnex from '@/views/material/extend/annex';
+import MaterialPictures from '@/views/material/extend/pictures';
+import MaterialQualifications from '@/views/material/extend/qualifications';
+import MaterialSale from '@/views/material/extend/sale';
+import { EventBus } from '@/views/material/extend/event/event-bus.js';
+  export default {
+    name: "MaterialDetailMain",
+    components: {
+        MaterialBaseInfo,
+        MaterialAnnex,
+        MaterialPictures,
+        MaterialQualifications,
+        MaterialSale
+    },
+    data() {
+      return {
+        activeName: 'MaterialBaseInfo', // 默认激活第一个标签
+        materialId:'430016',
+        dataSave: {
+        },
+      };
+    },
+    created() {
+        this.$set(this.dataSave, 'materialId', this.materialId);
+    },
+    mounted() {
+        EventBus.$on('sendMaterialInfo', this.handleSubmit);
+    },
+    beforeDestroy() {
+        EventBus.$off('sendMaterialInfo', this.handleSubmit);
+    },
+    methods: {
+        handleSubmit(val){
+            console.log("E:::" + JSON.stringify(val))
+            if(JSON.stringify(val).includes('homePicture')){
+                // 物料图册
+                this.$set(this.dataSave, 'materialPictures', {});
+                this.$set(this.dataSave, 'materialPictures', val);
+            }
+            if(JSON.stringify(val).includes('annex')){
+                // 附件
+                this.$set(this.dataSave, 'materialAnnex', []);
+                this.$set(this.dataSave, 'materialAnnex', val);
+            }
+            if(JSON.stringify(val).includes('suitDept')){
+                // 适用科室
+                this.$set(this.dataSave, 'materialSuitDept', []);
+                this.$set(this.dataSave, 'materialSuitDept', val);
+            }
+        },
+        bc(){
+            if(this.dataSave.materialSuitDept != undefined && this.dataSave.materialSuitDept.length > 0){
+                let flag = false;
+                this.dataSave.materialSuitDept.forEach(e => {
+                    if(e.suitDept == ''){
+                        flag = true;
+                    }
+                });
+                if(flag){
+                    this.$message({
+                        message: '无法保存, 当前存在未填写的适用科室信息, 请处理 !',
+                        type: 'error'
+                    });
+                    return;
+                };
+            }
+            // 提交
+            infoSave(this.dataSave).then(response => {
+                if(response.code == 200){
+                    this.$message({
+                        message: '保存成功 !',
+                        type: 'success'
+                    });
+                }
+            });
+        },
+        qx(){
+
+        }
+    },
+  };
+</script>
+
+<style>
+    .button-container {
+      position: fixed;  /* 使用fixed定位，使得容器始终相对于浏览器窗口 */
+      top: 10px;        /* 距离顶部10像素 */
+      right: 60px;      /* 距离右侧10像素 */
+      z-index: 1000;    /* 设置一个较高的z-index确保按钮在其他内容之上 */
+    } 
+</style>
+
+  

src/views/material/extend/event/event-bus.js

@@ -0,0 +1,4 @@
+import Vue from 'vue';
+
+// 创建一个事件总线
+export const EventBus = new Vue();

src/views/material/extend/pictures.vue

@@ -0,0 +1,756 @@
+<template>
+    <div class="app-container">
+        <el-form ref="form" :model="form" :rules="rules" class="baseinfoClass">
+            <el-form-item style="margin-left: -3vw;">
+                <div class="text-with-line">物料图册</div>
+            </el-form-item> 
+            <el-row>
+                <el-col :span="1" style="margin-top: 5px;">
+                    <span >首页图册</span>
+                </el-col>
+                <el-col :span="8">
+                    <el-button type="success" size="small" style="width: 90px;" @click="downBtn1">下载</el-button>
+                    <el-button type="danger" size="small" style="width: 90px;" @click="deleteBtn1">删除</el-button>
+                </el-col>
+                <el-col :span="1" style="margin-top: 5px;">
+                    <span >详情图册</span>
+                </el-col>
+                <el-col :span="8">
+                    <el-button type="success" size="small" style="width: 90px;" @click="downBtn2">下载</el-button>
+                    <el-button type="danger" size="small" style="width: 90px;" @click="deleteBtn2">删除</el-button>
+                </el-col>
+            </el-row> 
+            <el-row style="margin-top: 24px;">
+                <el-col :span="1" style="min-height:1px;"></el-col>
+                <el-col :span="9">
+                    <el-upload
+                        class="upload-demo"
+                        drag
+                        :action="uploadUrl"
+                        :on-success="onSuccess1"
+                        :on-remove="onRemove1"
+                        accept="image/png, image/jpeg"
+                        :headers="headers"
+                        multiple>
+                        <i class="el-icon-upload"></i>
+                        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+                        <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
+                    </el-upload>
+                </el-col>
+                <el-col :span="12">
+                    <el-upload
+                        class="upload-demo"
+                        drag
+                        :action="uploadUrl"
+                        :on-success="onSuccess2"
+                        :on-remove="onRemove2"
+                        accept="image/png, image/jpeg"
+                        :headers="headers"
+                        multiple>
+                        <i class="el-icon-upload"></i>
+                        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+                        <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
+                    </el-upload>
+                </el-col>
+            </el-row> 
+            <el-row style="margin-top: 30px;">
+                <el-col :span="1" style="margin-top: 5px;">
+                    <span >首页视频</span>
+                </el-col>
+                <el-col :span="8">
+                    <el-button type="success" size="small" style="width: 90px;" @click="downBtn3">下载</el-button>
+                    <el-button type="danger" size="small" style="width: 90px;" @click="deleteBtn3">删除</el-button>
+                </el-col>
+                <el-col :span="1" style="margin-top: 5px;">
+                    <span >详情视频</span>
+                </el-col>
+                <el-col :span="8">
+                    <el-button type="success" size="small" style="width: 90px;" @click="downBtn4">下载</el-button>
+                    <el-button type="danger" size="small" style="width: 90px;" @click="deleteBtn4">删除</el-button>
+                </el-col>
+            </el-row> 
+            <el-row style="margin-top: 24px;">
+                <el-col :span="1" style="min-height:1px;"></el-col>
+                <el-col :span="9">
+                    <el-upload
+                        class="upload-demo"
+                        drag
+                        :action="uploadUrl"
+                        :on-success="onSuccess3"
+                        :on-remove="onRemove3"
+                        :before-upload="beforeUpload3"
+                        :headers="headers"
+                        multiple>
+                        <i class="el-icon-upload"></i>
+                        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+                        <div class="el-upload__tip" slot="tip">每个附件大小不可超过<em>5M</em>, 支持格式MP4</div>
+                    </el-upload>
+                </el-col>
+                <el-col :span="12">
+                    <el-upload
+                        class="upload-demo"
+                        drag
+                        :action="uploadUrl"
+                        :on-success="onSuccess4"
+                        :on-remove="onRemove4"
+                        :before-upload="beforeUpload4"
+                        :headers="headers"
+                        multiple>
+                        <i class="el-icon-upload"></i>
+                        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+                        <div class="el-upload__tip" slot="tip">每个附件大小不可超过<em>5M</em>, 支持格式MP4</div>
+                    </el-upload>
+                </el-col>
+            </el-row> 
+        </el-form>    
+    </div>
+  </template>  
+  
+  <script>
+  import { EventBus } from '@/views/material/extend/event/event-bus.js';
+  import { getToken } from '@/utils/auth';
+  import { getInfoPicturesByMaterialId, readFile } from "@/api/material/extend/material.js";
+  import JSZip from 'jszip';
+  import FileSaver from 'file-saver';
+  export default {
+      name: "MaterialPictures",
+      components: {
+        BatchImport: () => import("@/components/BatchImport/indexa.vue"),
+      },
+      props: {
+        materialId:{
+          type: String,
+          default: ''
+        }
+      },
+      data() {
+        return {
+            form:{},
+            rules:{},
+            uploadUrl: 
+                process.env.NODE_ENV == "development"
+                ? "/drp-file/document-center/fastdfs/upload"
+                : "/document-center/fastdfs/upload",
+            // 如果需要token认证，添加token到headers
+            headers: {
+                Authorization: 'Bearer ' + getToken()
+            },
+            sendMaterialPictures:{
+                id: 1,
+                materialId: '432986',
+                homePicture: '123,123',
+                homeVideo: '123,123',
+                infoPicture: '123,123',
+                infoVideo: '123,123'
+            },
+            fileList1: [],
+            fileList2: [],
+            fileList3: [],
+            fileList4: [],
+        }
+      },
+      created() {
+        this.getDetailPicturesByMaterialId();
+      },
+      mounted() {
+        // EventBus.$on('sendMaterialPictures', this.sendMaterialPictures);
+      },
+      beforeDestroy() {
+        // EventBus.$off('sendMaterialPictures', this.sendMaterialPictures);
+      },
+      methods: {
+        getDetailPicturesByMaterialId(){
+            getInfoPicturesByMaterialId(this.materialId).then(response => {
+                this.sendMaterialPictures = {
+                    id: '',
+                    materialId: '',
+                    homePicture: '',
+                    homeVideo: '',
+                    infoPicture: '',
+                    infoVideo: ''
+                };
+                if(response.data != undefined){
+                    this.sendMaterialPictures = response.data;
+                }
+            });
+        },
+        // sendMaterialPictures(val){
+        //     this.$set(this.sendMaterialPictures, 'annex', val);
+        // },
+        getTimestamp() {
+            return Date.now();
+        },
+        downBtn1(){
+            if(this.sendMaterialPictures.homePicture != ''){
+                if(this.sendMaterialPictures.homePicture.includes(',')){
+                    let fileInfoList = [];
+                    let pics = this.sendMaterialPictures.homePicture.split(',');
+                    let flag = false;
+                    pics.forEach((element,index) => {
+                        if(index == pics.length-1){
+                            flag = true;
+                        }
+                        readFile(element).then(response => {
+                            let newdx = {'fileUrl': 'https://dev-sy.derom.com/document-center/minio/'+response.data.filepath, 'renameFileName': response.data.filepath};
+                            fileInfoList.push(newdx);
+                        });
+                        if(flag){
+                            setTimeout(()=>{
+                                this.filesToRar(fileInfoList, this.getTimestamp());
+                            },1000)
+                        }
+                    });
+                }else{
+                    readFile(this.sendMaterialPictures.homePicture).then(response => {
+                        let fileInfoList = [];
+                        let newdx = {'fileUrl': 'https://dev-sy.derom.com/document-center/minio/'+response.data.filepath, 'renameFileName': response.data.filepath};
+                            fileInfoList.push(newdx);
+                        this.filesToRar(fileInfoList, this.getTimestamp());
+                    });
+                }
+            }else{
+                this.$message({
+                    type: 'info',
+                    message: '当前文件是空的, 请上传文件 !'
+                });
+            }
+        },
+        downBtn2(){
+            if(this.sendMaterialPictures.infoPicture != ''){
+                if(this.sendMaterialPictures.infoPicture.includes(',')){
+                    let fileInfoList = [];
+                    let pics = this.sendMaterialPictures.infoPicture.split(',');
+                    let flag = false;
+                    pics.forEach((element,index) => {
+                        if(index == pics.length-1){
+                            flag = true;
+                        }
+                        readFile(element).then(response => {
+                            let newdx = {'fileUrl': 'https://dev-sy.derom.com/document-center/minio/'+response.data.filepath, 'renameFileName': response.data.filepath};
+                            fileInfoList.push(newdx);
+                        });
+                        if(flag){
+                            setTimeout(()=>{
+                                this.filesToRar(fileInfoList, this.getTimestamp());
+                            },1000)
+                        }
+                    });
+                }else{
+                    readFile(this.sendMaterialPictures.infoPicture).then(response => {
+                        let fileInfoList = [];
+                        let newdx = {'fileUrl': 'https://dev-sy.derom.com/document-center/minio/'+response.data.filepath, 'renameFileName': response.data.filepath};
+                            fileInfoList.push(newdx);
+                        this.filesToRar(fileInfoList, this.getTimestamp());
+                    });
+                }
+            }else{
+                this.$message({
+                    type: 'info',
+                    message: '当前文件是空的, 请上传文件 !'
+                });
+            }
+        },
+        downBtn3(){
+            if(this.sendMaterialPictures.homeVideo != ''){
+                if(this.sendMaterialPictures.homeVideo.includes(',')){
+                    let fileInfoList = [];
+                    let pics = this.sendMaterialPictures.homeVideo.split(',');
+                    let flag = false;
+                    pics.forEach((element,index) => {
+                        if(index == pics.length-1){
+                            flag = true;
+                        }
+                        readFile(element).then(response => {
+                            let newdx = {'fileUrl': 'https://dev-sy.derom.com/document-center/minio/'+response.data.filepath, 'renameFileName': response.data.filepath};
+                            fileInfoList.push(newdx);
+                        });
+                        if(flag){
+                            setTimeout(()=>{
+                                this.filesToRar(fileInfoList, this.getTimestamp());
+                            },1000)
+                        }
+                    });
+                }else{
+                    readFile(this.sendMaterialPictures.homeVideo).then(response => {
+                        let fileInfoList = [];
+                        let newdx = {'fileUrl': 'https://dev-sy.derom.com/document-center/minio/'+response.data.filepath, 'renameFileName': response.data.filepath};
+                            fileInfoList.push(newdx);
+                        this.filesToRar(fileInfoList, this.getTimestamp());
+                    });
+                }
+            }else{
+                this.$message({
+                    type: 'info',
+                    message: '当前文件是空的, 请上传文件 !'
+                });
+            }
+        },
+        downBtn4(){
+            if(this.sendMaterialPictures.infoVideo != ''){
+                if(this.sendMaterialPictures.infoVideo.includes(',')){
+                    let fileInfoList = [];
+                    let pics = this.sendMaterialPictures.infoVideo.split(',');
+                    let flag = false;
+                    pics.forEach((element,index) => {
+                        if(index == pics.length-1){
+                            flag = true;
+                        }
+                        readFile(element).then(response => {
+                            let newdx = {'fileUrl': 'https://dev-sy.derom.com/document-center/minio/'+response.data.filepath, 'renameFileName': response.data.filepath};
+                            fileInfoList.push(newdx);
+                        });
+                        if(flag){
+                            setTimeout(()=>{
+                                this.filesToRar(fileInfoList, this.getTimestamp());
+                            },1000)
+                        }
+                    });
+                }else{
+                    readFile(this.sendMaterialPictures.infoVideo).then(response => {
+                        let fileInfoList = [];
+                        let newdx = {'fileUrl': 'https://dev-sy.derom.com/document-center/minio/'+response.data.filepath, 'renameFileName': response.data.filepath};
+                            fileInfoList.push(newdx);
+                        this.filesToRar(fileInfoList, this.getTimestamp());
+                    });
+                }
+            }else{
+                this.$message({
+                    type: 'info',
+                    message: '当前文件是空的, 请上传文件 !'
+                });
+            }
+        },
+        deleteBtn1(){
+            this.deleteFileKey('homePicture');
+        },
+        deleteBtn2(){
+            this.deleteFileKey('infoPicture');
+        },
+        deleteBtn3(){
+            this.deleteFileKey('homeVideo');
+        },
+        deleteBtn4(){
+            this.deleteFileKey('infoVideo');
+        },
+        deleteFileKey(val){
+            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+            }).then(() => {
+                this.$set(this.sendMaterialPictures, val, '');
+                this.$message({
+                    type: 'success',
+                    message: '删除成功!'
+                });
+                if(val == 'homePicture'){
+                    this.submitBus1();
+                }
+                if(val == 'infoPicture'){
+                    this.submitBus2();
+                }
+                if(val == 'homeVideo'){
+                    this.submitBus3();
+                }
+                if(val == 'infoVideo'){
+                    this.submitBus4();
+                }
+            }).catch(() => {
+                this.$message({
+                    type: 'info',
+                    message: '已取消删除'
+                });          
+            });
+        },
+        onSuccess1(e){
+            this.fileList1.push({id: e.id, name:e.filename})
+            this.submitBus1();
+        },
+        onSuccess2(e){
+            this.fileList2.push({id: e.id, name:e.filename})
+            this.submitBus2();
+        },
+        onSuccess3(e){
+            this.fileList3.push({id: e.id, name:e.filename})
+            this.submitBus3();
+        },
+        onSuccess4(e){
+            this.fileList4.push({id: e.id, name:e.filename})
+            this.submitBus4();
+        },
+        onRemove1(e){
+            this.fileList1 = this.fileList1.filter(row => 
+              row.id != e.response.id
+            );
+            let _this = this;
+            if(_this.sendMaterialPictures.homePicture != ''){
+                if(_this.sendMaterialPictures.homePicture.includes(',')){
+                    let sz1 = _this.sendMaterialPictures.homePicture.split(',');
+                    sz1 = sz1.filter(row => 
+                        row != e.response.id
+                    );
+                    _this.sendMaterialPictures.homePicture = sz1.join(',');
+                }else{
+                    if(_this.sendMaterialPictures.homePicture == e.response.id){
+                        _this.$set(_this.sendMaterialPictures, 'homePicture', '');
+                    }
+                }
+            }
+            _this.submitBus1();
+        },
+        onRemove2(e){
+            this.fileList2 = this.fileList2.filter(row => 
+              row.id != e.response.id
+            );
+            let _this = this;
+            if(_this.sendMaterialPictures.infoPicture != ''){
+                if(_this.sendMaterialPictures.infoPicture.includes(',')){
+                    let sz2 = _this.sendMaterialPictures.infoPicture.split(',');
+                    sz2 = sz2.filter(row => 
+                        row != e.response.id
+                    );
+                    _this.sendMaterialPictures.infoPicture = sz2.join(',');
+                }else{
+                    if(_this.sendMaterialPictures.infoPicture == e.response.id){
+                        _this.$set(_this.sendMaterialPictures, 'infoPicture', '');
+                    }
+                }
+            }
+            _this.submitBus2();
+        },
+        onRemove3(e){
+            this.fileList3 = this.fileList3.filter(row => 
+              row.id != e.response.id
+            );
+            let _this = this;
+            if(_this.sendMaterialPictures.homeVideo != ''){
+                if(_this.sendMaterialPictures.homeVideo.includes(',')){
+                    let sz3 = _this.sendMaterialPictures.homeVideo.split(',');
+                    sz3 = sz3.filter(row => 
+                        row != e.response.id
+                    );
+                    _this.sendMaterialPictures.homeVideo = sz3.join(',');
+                }else{
+                    if(_this.sendMaterialPictures.homeVideo == e.response.id){
+                        _this.$set(_this.sendMaterialPictures, 'homeVideo', '');
+                    }
+                }
+            }
+            _this.submitBus3();
+        },
+        onRemove4(e){
+            this.fileList4 = this.fileList4.filter(row => 
+              row.id != e.response.id
+            );
+            let _this = this;
+            if(_this.sendMaterialPictures.infoVideo != ''){
+                if(_this.sendMaterialPictures.infoVideo.includes(',')){
+                    let sz4 = _this.sendMaterialPictures.infoVideo.split(',');
+                    sz4 = sz4.filter(row => 
+                        row != e.response.id
+                    );
+                    _this.sendMaterialPictures.infoVideo = sz4.join(',');
+                }else{
+                    if(_this.sendMaterialPictures.infoVideo == e.response.id){
+                        _this.$set(_this.sendMaterialPictures, 'infoVideo', '');
+                    }
+                }
+            }
+            _this.submitBus4();
+        },
+        beforeUpload3(file){
+            const isMP4 = file.type === 'video/mp4';
+            if (!isMP4) {
+                this.$message.error('只能上传MP4格式的视频！');
+            }
+            return isMP4;
+        },
+        beforeUpload4(file){
+            const isMP4 = file.type === 'video/mp4';
+            if (!isMP4) {
+                this.$message.error('只能上传MP4格式的视频！');
+            }
+            return isMP4;
+        },
+        submitBus1(){
+            if(this.sendMaterialPictures.homePicture.includes(',')){
+                let result = '';
+                this.fileList1.forEach(e1 => {
+                    let flag = true;
+                    this.sendMaterialPictures.homePicture.split(',').forEach(e2 => {
+                        if(e1.id == e2){
+                            flag = false;
+                        }
+                    });
+                    if(flag){
+                        result = result+','+e1.id;
+                    }
+                });
+                this.sendMaterialPictures.homePicture = this.sendMaterialPictures.homePicture + result;
+            }else{
+                if(this.sendMaterialPictures.homePicture != ''){
+                    this.fileList1.forEach((e1,index) => {
+                        if(this.sendMaterialPictures.homePicture != e1.id){
+                            this.sendMaterialPictures.homePicture = this.sendMaterialPictures.homePicture+','+e1.id;
+                        }
+                    });
+                }else{
+                    if(this.fileList1.length > 0){
+                        if(this.fileList1.length == 1){
+                            this.sendMaterialPictures.homePicture = this.fileList1[0].id+"";
+                        }else{
+                            let resu = '';
+                            if(this.sendMaterialPictures.homePicture != ''){
+                                this.fileList1.forEach(element => {
+                                    resu = resu +','+ element.id;
+                                });
+                                this.sendMaterialPictures.homePicture = this.sendMaterialPictures.homePicture + resu;
+                            }else{
+                                this.fileList1.forEach(element => {
+                                    resu = resu + element.id + ','
+                                })
+                                resu = resu.slice(0, -1);
+                                this.sendMaterialPictures.homePicture = this.sendMaterialPictures.homePicture + resu ;
+                            }
+                        }
+                    }
+                    
+                }
+            }
+            EventBus.$emit('sendMaterialInfo', this.sendMaterialPictures);
+        },
+        submitBus2(){
+            if(this.sendMaterialPictures.infoPicture.includes(',')){
+                let result = '';
+                this.fileList2.forEach(e1 => {
+                    let flag = true;
+                    this.sendMaterialPictures.infoPicture.split(',').forEach(e2 => {
+                        if(e1.id == e2){
+                            flag = false;
+                        }
+                    });
+                    if(flag){
+                        result = result+','+e1.id;
+                    }
+                });
+                this.sendMaterialPictures.infoPicture = this.sendMaterialPictures.infoPicture + result;
+            }else{
+                if(this.sendMaterialPictures.infoPicture != ''){
+                    this.fileList2.forEach((e1,index) => {
+                        if(this.sendMaterialPictures.infoPicture != e1.id){
+                            this.sendMaterialPictures.infoPicture = this.sendMaterialPictures.infoPicture+','+e1.id;
+                        }
+                    });
+                }else{
+                    if(this.fileList2.length > 0){
+                        if(this.fileList2.length == 1){
+                            this.sendMaterialPictures.infoPicture = this.fileList2[0].id+"";
+                        }else{
+                            let resu = '';
+                            if(this.sendMaterialPictures.infoPicture != ''){
+                                this.fileList2.forEach(element => {
+                                    resu = resu +','+ element.id;
+                                });
+                                this.sendMaterialPictures.infoPicture = this.sendMaterialPictures.infoPicture + resu;
+                            }else{
+                                this.fileList2.forEach(element => {
+                                    resu = resu + element.id + ','
+                                })
+                                resu = resu.slice(0, -1);
+                                this.sendMaterialPictures.infoPicture = this.sendMaterialPictures.infoPicture + resu ;
+                            }
+                        }
+                    }
+                    
+                }
+            }
+            EventBus.$emit('sendMaterialInfo', this.sendMaterialPictures);
+        },
+        submitBus3(){
+            if(this.sendMaterialPictures.homeVideo.includes(',')){
+                let result = '';
+                this.fileList3.forEach(e1 => {
+                    let flag = true;
+                    this.sendMaterialPictures.homeVideo.split(',').forEach(e2 => {
+                        if(e1.id == e2){
+                            flag = false;
+                        }
+                    });
+                    if(flag){
+                        result = result+','+e1.id;
+                    }
+                });
+                this.sendMaterialPictures.homeVideo = this.sendMaterialPictures.homeVideo + result;
+            }else{
+                if(this.sendMaterialPictures.homeVideo != ''){
+                    this.fileList3.forEach((e1,index) => {
+                        if(this.sendMaterialPictures.homeVideo != e1.id){
+                            this.sendMaterialPictures.homeVideo = this.sendMaterialPictures.homeVideo+','+e1.id;
+                        }
+                    });
+                }else{
+                    if(this.fileList3.length > 0){
+                        if(this.fileList3.length == 1){
+                            this.sendMaterialPictures.homeVideo = this.fileList3[0].id+"";
+                        }else{
+                            let resu = '';
+                            if(this.sendMaterialPictures.homeVideo != ''){
+                                this.fileList3.forEach(element => {
+                                    resu = resu +','+ element.id;
+                                });
+                                this.sendMaterialPictures.homeVideo = this.sendMaterialPictures.homeVideo + resu;
+                            }else{
+                                this.fileList3.forEach(element => {
+                                    resu = resu + element.id + ','
+                                })
+                                resu = resu.slice(0, -1);
+                                this.sendMaterialPictures.homeVideo = this.sendMaterialPictures.homeVideo + resu ;
+                            }
+                        }
+                    }
+                }
+            }
+            EventBus.$emit('sendMaterialInfo', this.sendMaterialPictures);
+        },
+        submitBus4(){
+            if(this.sendMaterialPictures.infoVideo.includes(',')){
+                let result = '';
+                this.fileList4.forEach(e1 => {
+                    let flag = true;
+                    this.sendMaterialPictures.infoVideo.split(',').forEach(e2 => {
+                        if(e1.id == e2){
+                            flag = false;
+                        }
+                    });
+                    if(flag){
+                        result = result+','+e1.id;
+                    }
+                });
+                this.sendMaterialPictures.infoVideo = this.sendMaterialPictures.infoVideo + result;
+            }else{
+                if(this.sendMaterialPictures.infoVideo != ''){
+                    this.fileList4.forEach((e1,index) => {
+                        if(this.sendMaterialPictures.infoVideo != e1.id){
+                            this.sendMaterialPictures.infoVideo = this.sendMaterialPictures.infoVideo+','+e1.id;
+                        }
+                    });
+                }else{
+                    if(this.fileList4.length > 0){
+                        if(this.fileList4.length == 1){
+                            this.sendMaterialPictures.infoVideo = this.fileList4[0].id+"";
+                        }else{
+                            let resu = '';
+                            if(this.sendMaterialPictures.infoVideo != ''){
+                                this.fileList4.forEach(element => {
+                                    resu = resu +','+ element.id;
+                                });
+                                this.sendMaterialPictures.infoVideo = this.sendMaterialPictures.infoVideo + resu;
+                            }else{
+                                this.fileList4.forEach(element => {
+                                    resu = resu + element.id + ','
+                                })
+                                resu = resu.slice(0, -1);
+                                this.sendMaterialPictures.infoVideo = this.sendMaterialPictures.infoVideo + resu ;
+                            }
+                        }
+                    }
+                }
+            }
+            EventBus.$emit('sendMaterialInfo', this.sendMaterialPictures);
+        },
+        /**文件打包* arrImages:文件list:[{fileUrl:文件url,renameFileName:文件名}]* filename 压缩包名* */
+        filesToRar(arrImages, filename) {
+            let _this = this;
+            let zip = new JSZip();
+            let cache = {};
+            let promises = [];
+            _this.title = '正在加载压缩文件';
+            const loading = this.$loading({lock: true,text: '正在加载压缩文件',spinner: 'el-icon-loading',background: 'rgba(0, 0, 0, 0.7)'});
+            for (let item of arrImages) {
+                // 下载文件, 并存成ArrayBuffer对象
+                const promise = this.getImgArrayBuffer(item.fileUrl).then(data => { 
+                // 获取文件名
+                const file_name = item.renameFileName;
+                // 逐个添加文件
+                zip.file(file_name, data, { binary: true })           
+                cache[file_name] = data})
+                promises.push(promise);
+            }
+            Promise.all(promises)
+            // 生成二进制流
+            .then(() => {zip.generateAsync({ type: "blob" })
+            .then(content => {_this.title = '正在压缩';
+                // 利用file-saver保存文件  自定义文件名
+                FileSaver.saveAs(content, filename);             
+                _this.title = '压缩完成';}
+            );
+            loading.close();
+            }).catch(res=>{
+                _this.$message.error('文件压缩失败');
+                loading.close();
+            });
+        },
+        getImgArrayBuffer(url) {
+            return new Promise((resolve, reject) => {
+                //通过请求获取文件blob格式
+                let xmlhttp = new XMLHttpRequest();
+                xmlhttp.open("GET", url, true);
+                xmlhttp.responseType = "blob";
+                xmlhttp.onload = function () {
+                if (this.status == 200) {
+                    resolve(this.response);
+                } else {
+                    reject(this.status);
+                }};
+                xmlhttp.send();
+            });
+        },
+      } 
+  };
+  </script>
+  
+<style>
+.baseinfoClass {
+    margin-left: 4vw;
+}
+.text-with-line {
+    position: relative;
+    font-size: 16px;
+    color: #333;
+    padding-bottom: 5px; /* 确保条线在文字下方 */
+}
+.text-with-line::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%; /* 条线的宽度 */
+    height: 2px; /* 条线的高度 */
+    background: #000; /* 条线的颜色 */
+}
+.container {
+    display: flex;
+    justify-content: flex-end; /* 这会把子元素放在容器的右边 */
+}  
+.button-container {
+  position: fixed;  /* 使用fixed定位，使得容器始终相对于浏览器窗口 */
+  top: 10px;        /* 距离顶部10像素 */
+  right: 60px;      /* 距离右侧10像素 */
+  z-index: 1000;    /* 设置一个较高的z-index确保按钮在其他内容之上 */
+} 
+.downfile {
+    color:blue;
+    position: relative;
+    text-decoration: none;
+}
+.downfile::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 1px; /* 下划线厚度 */
+  background: blue; /* 下划线颜色 */
+  width: 100%;
+}
+</style>

src/views/material/extend/qualifications.vue

@@ -0,0 +1,116 @@
+<template>
+  <div class="app-container">
+    <el-form ref="form" :model="form" :rules="rules" class="baseinfoClass" >
+        <el-form-item style="margin-left: -3vw;">
+            <div class="text-with-line">资质信息</div>
+        </el-form-item> 
+        <el-table
+            :data="submitQualificationsData"
+            highlight-current-row
+            style="width: 100%; margin-left: -2vw; text-align: center;">
+            <el-table-column
+                type="index"
+                width="50">
+                </el-table-column>
+            <el-table-column
+              property="key"
+              label="资质名称"
+              width="240">
+              </el-table-column>
+            <el-table-column
+              property="value"
+              label="证件号"
+              >
+              </el-table-column>
+        </el-table>
+    </el-form> 
+  </div>
+</template>  
+
+<script>
+import { getMaterialQualifications } from "@/api/material/extend/material.js";
+export default {
+    name: "MaterialQualifications",
+    props: {
+      materialId:{
+        type: String,
+        default: ''
+      }
+    },
+    data() {
+      return {
+        // 表单参数
+        form: {},
+        // 表单校验
+        rules: {},
+        submitQualificationsData: [
+          {id:2,key:'注册人/上市许可持有人',value:''},
+          {id:3,key:'DI',value:''},
+          {id:4,key:'医保代码',value:''},
+          {id:5,key:'生产许可证',value:''},
+          {id:6,key:'注册证号',value:''},
+        ],
+      };
+    },
+    created() {
+      this.getDetailQualifications();
+    },
+    methods: {
+      getDetailQualifications() {
+        getMaterialQualifications(this.materialId).then(response => {
+          if(response.data != undefined){
+            this.submitQualificationsData.forEach(element => {
+              if(element.id == 2){
+                this.$set(element,'value',response.data.createMan)
+              }
+              if(element.id == 3){
+                this.$set(element,'value',response.data.diCode)
+              }
+              if(element.id == 4){
+                this.$set(element,'value','/')
+              }
+              if(element.id == 5){
+                this.$set(element,'value',response.data.vproducelic)
+              } 
+              if(element.id == 6){
+                this.$set(element,'value',response.data.vregistrationno)
+              }
+            });
+          }
+        });
+      },
+    }
+};
+</script>
+
+<style>
+    .baseinfoClass {
+        margin-left: 4vw;
+    }
+    .text-with-line {
+        position: relative;
+        font-size: 16px;
+        color: #333;
+        padding-bottom: 5px; /* 确保条线在文字下方 */
+    }
+    .text-with-line::after {
+        content: '';
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        width: 100%; /* 条线的宽度 */
+        height: 2px; /* 条线的高度 */
+        background: #000; /* 条线的颜色 */
+    }
+    .container {
+        display: flex;
+        justify-content: flex-end; /* 这会把子元素放在容器的右边 */
+    }  
+    .button-container {
+      position: fixed;  /* 使用fixed定位，使得容器始终相对于浏览器窗口 */
+      top: 10px;        /* 距离顶部10像素 */
+      right: 60px;      /* 距离右侧10像素 */
+      z-index: 1000;    /* 设置一个较高的z-index确保按钮在其他内容之上 */
+    } 
+</style>
+  

src/views/material/extend/sale.vue

@@ -0,0 +1,132 @@
+<template>
+  <div class="app-container">
+    <el-form ref="form" :model="form" :rules="rules" class="baseinfoClass" >
+        <el-form-item style="margin-left: -3vw;">
+            <div class="text-with-line">三级甲等</div>
+        </el-form-item> 
+        <el-table
+            :data="submitSaleData1"
+            highlight-current-row
+            style="width: 100%; margin-left: -2vw; text-align: center;">
+            <el-table-column
+                type="index"
+                width="50">
+                </el-table-column>
+            <el-table-column
+              property="name"
+              label="医院名称"
+              width="240">
+              </el-table-column>
+            <el-table-column
+              property="news"
+              label="本年销售数量"
+              width="300"
+              >
+              </el-table-column>
+            <el-table-column
+              property="olds"
+              label="上年销售数量"
+              >
+              </el-table-column>
+        </el-table>
+        <el-form-item style="margin-left: -3vw;margin-top: 4vh;">
+            <div class="text-with-line">三级</div>
+        </el-form-item> 
+        <el-table
+            :data="submitSaleData2"
+            highlight-current-row
+            style="width: 100%; margin-left: -2vw; text-align: center;">
+            <el-table-column
+                type="index"
+                width="50">
+                </el-table-column>
+            <el-table-column
+              property="name"
+              label="医院名称"
+              width="240">
+              </el-table-column>
+            <el-table-column
+              property="news"
+              label="本年销售数量"
+              width="300"
+              >
+              </el-table-column>
+            <el-table-column
+              property="olds"
+              label="上年销售数量"
+              >
+              </el-table-column>
+        </el-table>
+    </el-form> 
+  </div>
+</template>  
+
+<script>
+import { getSaleRankGrade, getSaleRank } from "@/api/material/extend/material.js";
+export default {
+    name: "MaterialSale",
+    props: {
+      materialId:{
+        type: String,
+        default: ''
+      }
+    },
+    data() {
+      return {
+        // 表单参数
+        form: {},
+        // 表单校验
+        rules: {},
+        submitSaleData1: [
+        ],
+        submitSaleData2: [
+        ],
+      };
+    },
+    created() {
+      this.getDetailSale();
+    },
+    methods: {
+      getDetailSale() {
+        getSaleRankGrade(this.materialId).then(response => {
+          this.submitSaleData1 = response.data
+        });
+        getSaleRank(this.materialId).then(response => {
+          this.submitSaleData2 = response.data
+        });
+      },
+    }
+};
+</script>
+
+<style>
+    .baseinfoClass {
+        margin-left: 4vw;
+    }
+    .text-with-line {
+        position: relative;
+        font-size: 16px;
+        color: #333;
+        padding-bottom: 5px; /* 确保条线在文字下方 */
+    }
+    .text-with-line::after {
+        content: '';
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        width: 100%; /* 条线的宽度 */
+        height: 2px; /* 条线的高度 */
+        background: #000; /* 条线的颜色 */
+    }
+    .container {
+        display: flex;
+        justify-content: flex-end; /* 这会把子元素放在容器的右边 */
+    }  
+    .button-container {
+      position: fixed;  /* 使用fixed定位，使得容器始终相对于浏览器窗口 */
+      top: 10px;        /* 距离顶部10像素 */
+      right: 60px;      /* 距离右侧10像素 */
+      z-index: 1000;    /* 设置一个较高的z-index确保按钮在其他内容之上 */
+    } 
+</style>
+