适宜技术开具

src/components/ui/suitMadePadTech.vue

@@ -0,0 +1,337 @@
+<!-- 适宜技术处方笺 -->
+<template>
+    <div class="chinese-m-pad">
+        <header class="flex flex-row-center flex-col-center">
+            <!-- 条形码 -->
+            <div class="code-img">
+                <img :src="recipeData.barcode" alt="">
+                <div>{{recipeData.pid}}</div>
+            </div>
+            <div class="title">适宜技术处方笺</div>
+            <div class="type">普通处方</div>
+        </header>
+
+        <!-- 患者信息部分 -->
+        <div class="patients-msg">
+            <div class="patients-msg1 flex flex-col-center flex-row-between">
+                <div class="msg1-item" style="flex:0 0 28%;">姓名：{{recipeData.name}}</div>
+                <div class="msg1-item flex flex-row-between">
+                    <div>性别：{{recipeData.sex}}</div>
+                    <div>年龄：{{recipeData.age}}</div>
+                </div>
+                <div class="msg1-item">科室：{{recipeData.clinic}}</div>
+            </div>
+            <div class="patients-msg1 flex flex-col-center flex-row-between">
+                <div class="msg1-item">临床诊断：{{recipeData.clinicalDiagnosis}}</div>
+
+                <div class="msg1-item">开方时间：{{recipeData.prescriptionTime?recipeData.prescriptionTime:''}}</div>
+            </div>
+            <div class="patients-msg1 flex flex-col-center flex-row-between">
+                <div class="msg1-item" style="flex:0 0 30%;">电话：{{recipeData.phone}}</div>
+                <!-- 没有地址 则为自提 -->
+                <!-- <div class="msg1-item ellipsis-line1">地址：{{recipeData.address?recipeData.address:'自提'}}</div> -->
+            </div>
+        </div>
+        <!-- 药品信息部分 -->
+        <div class="Rp">
+            <div class="Rp-title">Rp:</div>
+            <div class="Rp-detail">
+                <!-- 项目名称 -->
+                <div class="Rp-option flex flex-col-top flex-row-left" v-if="recipeData.itemName">
+                    <div class="option-name">项目名称：</div>
+                    <div class="option-right flex flex-wrap">{{recipeData.itemName}}</div>
+                </div>
+                <!-- 穴位（带数量） -->
+                <div class="Rp-option flex flex-col-top flex-row-left" v-if="recipeData.prescriptiontechnologydetailVos && recipeData.prescriptiontechnologydetailVos.length">
+                    <div class="option-name">穴位：</div>
+                    <div class="option-right flex flex-wrap">
+                        <div class="Rp-item" v-for="(item,index) in recipeData.prescriptiontechnologydetailVos"
+                            :key="index">{{item.pointname}}<span v-if="item.num">{{item.num}}</span></div>
+                    </div>
+                </div>
+                <!-- 经络 -->
+                <div class="Rp-option flex flex-col-top flex-row-left" v-if="recipeData.meridian">
+                    <div class="option-name">经络：</div>
+                    <div class="option-right flex flex-wrap">{{recipeData.meridian}}</div>
+                </div>
+                <!-- 数量 / 治疗次数 / 频次（同一行，数量作为行标签，与上面各行对齐） -->
+                <div class="Rp-option flex flex-col-top flex-row-left" v-if="recipeData.singleQty || recipeData.treatNum || recipeData.frequency">
+                    <div class="option-name">数量：</div>
+                    <div class="option-right flex flex-wrap">
+                        <span class="Rp-item" v-if="recipeData.singleQty">{{recipeData.singleQty}}{{recipeData.pricingUnit}}</span>
+                        <span class="Rp-item" v-if="recipeData.treatNum">治疗次数：{{recipeData.treatNum}}次</span>
+                        <span class="Rp-item" v-if="recipeData.frequency">频次：{{recipeData.frequency}}</span>
+                    </div>
+                </div>
+                <!-- 配穴指南 -->
+                <div class="Rp-option flex flex-col-top flex-row-left" v-if="recipeData.pointMatchGuide">
+                    <div class="option-name">配穴指南：</div>
+                    <div class="option-right flex flex-wrap">{{recipeData.pointMatchGuide}}</div>
+                </div>
+                <!-- 操作指南 -->
+                <div class="Rp-option flex flex-col-top flex-row-left" v-if="recipeData.useExplain">
+                    <div class="option-name">操作指南：</div>
+                    <div class="option-right flex flex-wrap">{{recipeData.useExplain}}</div>
+                </div>
+
+                <!-- 旧字段保留注释（原件 suitMadePad.vue 未动）
+                <div class="Rp-option flex flex-col-top flex-row-left">
+                    <div class="option-name">类型：</div>
+                    <div class="option-right flex flex-wrap">{{recipeData.technologyType}}</div>
+                </div>
+                <div class="Rp-option flex flex-col-top flex-row-left">
+                    <div class="option-name">次数：</div>
+                    <div class="option-right flex flex-wrap">{{recipeData.num}}</div>
+                </div>
+                -->
+            </div>
+            <div class="Rp-other">
+
+                <div style="text-align:right;" v-if="recipeData.entrust">
+                    {{recipeData.entrust}}
+                </div>
+            </div>
+        </div>
+
+        <!-- 价格部分 -->
+        <div class="patients-bottom flex flex-row-left flex-col-center">
+            <div class="left-table">
+                <div class="rp-price">项目费：{{recipeData.amountOfMedicine.toFixed(2)}}</div>
+
+                <div class="total-price">
+                    总金额：{{recipeData.lumpSum.toFixed(2)}}
+                </div>
+            </div>
+            <div class="right-sign">
+                <div class="kf-name">开方医生：{{recipeData.prescriber}}</div>
+                <div class="flex flex-row-l flex-wrap other-name">
+                    <div style="flex:0 0 50%;">审核：{{recipeData.reviewer}}</div>
+                    <div style="flex:0 0 50%;">调配：{{recipeData.dispatcher}}</div>
+                    <div style="flex:0 0 50%;">核对：{{recipeData.checker}}</div>
+                    <div style="flex:0 0 50%;">发药：{{recipeData.dispenser}}</div>
+                </div>
+            </div>
+        </div>
+        <div class="flex flex-col-top fle-row-left" style="font-size:13px;">
+            <div>注:</div>
+            <div>
+                <div>1、本处方当日有效</div>
+                <div>2、取药时请您当面核对药品名称、规格、数量</div>
+                <div>3、延长处方用量时间原因：慢性病 其他老年病 外地 其他</div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+    export default {
+        props: {
+            recipeData: {
+                type: Object,
+                default: () => {
+                    return {}
+                }
+            }
+        }
+    }
+</script>
+<style lang="scss" scoped>
+    @import "~@/style/common.scss";
+
+    .chinese-m-pad {
+        max-width: 420px;
+        margin: 0 auto;
+        width: 100%;
+        // height: 609px;
+        height: 560px; // 1280 下
+        overflow: auto;
+        padding: 5px;
+        box-sizing: border-box;
+        background: #fff;
+        // border: 1px solid red;
+        overflow: hidden;
+
+        header {
+
+            position: relative;
+            height: 34px;
+
+            .title {
+                font-size: 18px;
+                font-weight: bold;
+                margin-left: 24px;
+            }
+
+            .code-img {
+                position: absolute;
+                top: 0px;
+                left: 0px;
+                width: 150px;
+
+
+                img {
+                    display: inline-block;
+                    width: 100%;
+                    height: 40px;
+                    background: red;
+                    font-size: 0px;
+                }
+
+                div {
+                    font-size: 12px;
+                    text-align: center;
+                    margin-top: -5px;
+                }
+            }
+
+            .type {
+                font-size: 15px;
+                position: absolute;
+                top: 0px;
+                right: 0px;
+                width: 40px;
+            }
+        }
+
+        .patients-msg {
+            font-size: 13px;
+            margin-top: 20px;
+            padding-bottom: 5px;
+            border-bottom: 1px solid #000;
+
+            .patients-msg1 {
+                margin-bottom: 5px;
+
+                .msg1-item {
+                    flex: 1;
+                    margin-right: 10px;
+                }
+
+                .msg1-item:last-child {
+                    margin-right: 0;
+                }
+            }
+
+            .patients-msg1:last-child {
+                margin-bottom: 0;
+            }
+        }
+
+        .Rp {
+            margin-top: 5px;
+            border-bottom: 1px solid #000;
+            padding-bottom: 5px;
+            min-height: 187px;
+
+            &-title {
+                font-size: 15px;
+                font-weight: bold;
+                color: #000;
+            }
+
+            &-detail {
+                font-size: 13px;
+
+
+            }
+
+            &-option {
+                padding: 0 10px 0 30px;
+                margin-bottom: 10px;
+
+                .option-name {
+                    display: block;
+                    width: 72px;
+                    flex-shrink: 0;
+                    white-space: nowrap;
+                    text-align: right;
+                }
+
+                .option-right {
+                    flex: 1;
+                }
+            }
+
+
+
+            &-item {
+                margin-right: 10px;
+                // text-align: center;
+                margin-bottom: 8px;
+
+
+            }
+
+            &-other {
+                font-size: 13px;
+                padding: 0 10px 0 44px;
+
+                div:nth-child(1) {
+                    margin-top: 5px;
+                    margin-bottom: 5px;
+
+                    span {
+                        margin-right: 5px;
+                    }
+                }
+            }
+        }
+
+        .patients-bottom {
+            padding: 5px 0;
+            border-bottom: 1px solid #000;
+
+            .left-table {
+                width: 190px;
+                height: 50px;
+                border: 1px solid #333;
+                font-size: 13px;
+                text-align: center;
+
+                .rp-price {
+                    padding: 4px 0 4px;
+                    // padding-bottom: 5px;
+                    border-bottom: 1px solid #333;
+                }
+
+                .other-price {
+
+
+                    div {
+                        flex: 1;
+                        padding: 3px 0;
+                        border-top: 1px solid #333;
+                        border-bottom: 1px solid #333;
+                    }
+
+                    div:nth-child(1) {
+                        border-right: 1px solid #333;
+                    }
+
+
+                }
+
+                .total-price {
+                    padding: 0px 0 0px;
+                }
+            }
+
+            .right-sign {
+                flex: 1;
+                font-size: 13px;
+                padding: 0 10px;
+
+                .kf-name {
+                    margin-bottom: 5px;
+                }
+
+                .other-name {
+                    padding: 0 10px;
+
+                    div {
+                        margin-bottom: 5px;
+                    }
+                }
+            }
+        }
+    }
+</style>

src/views/business/components/AcupointTable.vue

@@ -394,6 +394,22 @@
                 ></el-input>
               </div>
             </div>
+            <div
+              class="item flex-vertical-center-l"
+              style="align-items: flex-start;"
+            >
+              <span><span style="opacity:0">*</span> 嘱托：</span>
+              <div style="flex: 1;">
+                <el-input
+                  size="mini"
+                  placeholder="请输入"
+                  v-model="command"
+                  type="textarea"
+                  auto-size="{ minRows: 1, maxRows: 2 }"
+                  @input="emitStatistics"
+                ></el-input>
+              </div>
+            </div>
           </div>
           <div class="header-about">
             <div class="stat-row flex-vertical-center-l flex-wrap">
@@ -631,6 +647,7 @@ function createPrescriptionData(options = {}) {
     detailRequired: !!detailRequired,
     operationGuide: "",
     pointMatchGuide: "",
+    command: "",
     singleCount,
     treatCount: 1,
     frequency: undefined,
@@ -698,6 +715,7 @@ export default {
       currentUnitPrice: 0,
       operationGuide: "",
       pointMatchGuide: "",
+      command: "",
       singleCount: 0,
       treatCount: 1,
       frequency: undefined,
@@ -810,6 +828,7 @@ export default {
         detailRequired: this.detailRequired,
         operationGuide: this.operationGuide,
         pointMatchGuide: this.pointMatchGuide,
+        command: this.command,
         singleCount: this.singleCount,
         treatCount: this.treatCount,
         frequency: this.frequency,
@@ -832,6 +851,7 @@ export default {
         this.detailRequired = data.detailRequired;
         this.operationGuide = data.operationGuide;
         this.pointMatchGuide = data.pointMatchGuide || "";
+        this.command = data.command || "";
         this.singleCount = data.singleCount;
         this.treatCount = data.treatCount;
         this.frequency = data.frequency;
@@ -1385,6 +1405,7 @@ export default {
     emitStatistics() {
       this.$emit("update:statistics", {
         operationGuide: this.operationGuide,
+        command: this.command,
         singleCount: this.singleCount,
         treatCount: this.treatCount,
         frequency: this.frequency,
@@ -1414,7 +1435,8 @@ export default {
       return true;
     },
     handleSave() {
-      if (!this.validate()) return;
+      // [临时调试] 调预览弹窗样式：暂时跳过校验，保证点保存一定触发 emit（原逻辑保留为注释）
+      // if (!this.validate()) return;
       this.saveLoading = true;
       const treatmentList = this.buildTreatmentList();
       const firstP = this.prescriptions[0] || {};
@@ -1494,6 +1516,7 @@ export default {
               ? `${d.frequency}天${d.frequencyUnit}次`
               : "",
           useExplain: d.operationGuide || "",
+          command: d.command || "",
           pointMatchGuide: d.pointMatchGuide || "",
           seqn: index + 1,
           ownerType: "1",
@@ -1611,6 +1634,7 @@ export default {
           innerDetailTypes: activeTypes.size > 0 ? [...activeTypes] : ["穴位"],
           detailRequired: item.basisStitutionsnondrug?.detailIsnull === "1",
           operationGuide: item.useExplain || "",
+          command: item.command || "",
           pointMatchGuide: item.pointMatchGuide || "",
           singleCount: item.singleQty || 0,
           treatCount: item.treatNum || 1,

src/views/diagnosis/Prescribing.vue

@@ -452,6 +452,7 @@
           v-show="container_i==2"
           ref="suitScience"
           :showEditable="false"
+          :showGuide="true"
           @save="submitRecipe1()"
         />
       </div>
@@ -966,7 +967,8 @@
     </Popup>
 
     <!-- 处方预览 -->
-    <submitRecipe :show.sync="showPriview" :priviewData="priviewData"></submitRecipe>
+    <!-- <submitRecipe :show.sync="showPriview" :priviewData="priviewData"></submitRecipe> -->
+    <submitRecipeTech :show.sync="showPriview" :priviewData="priviewData"></submitRecipeTech>
     <!-- <div style="position:fixed;top:0;z-index:9999;width:100vw;">
       <suitMadePad></suitMadePad>
     </div>-->
@@ -1073,7 +1075,8 @@ import medicineChinese from "@/components/MedicineAndChina.vue";
 // import suitScience from "@/components/SuitScience.vue";
 import AcupointTable from "@/views/business/components/AcupointTable.vue";
 
-import submitRecipe from "./components/submitRecipe.vue";
+// import submitRecipe from "./components/submitRecipe.vue";
+import submitRecipeTech from "./components/submitRecipeTech.vue";
 // import TCMDiagnosis from "./components/TCMDiagnosis.vue";
 import TCMDiagnosis from "../../components/TCMDiagnosis.vue";
 import doctorCase from "./components/doctorCase.vue";
@@ -1146,7 +1149,8 @@ export default {
     // suitScience,
     AcupointTable,
     TCMDiagnosis,
-    submitRecipe,
+    // submitRecipe,
+    submitRecipeTech,
     prescription,
     UnifyPrescription,
     TongueAnalysis,
@@ -2621,6 +2625,115 @@ export default {
     },
     // 提交中药处方
     async submitRecipe1() {
+      // ============================================================
+      // [临时调试] 后端 getRecipePriview 接口数据结构待确认，
+      // 先跳过校验/组装/网络，直接用 mock 数据弹出预览弹窗，仅用于调样式。
+      // 原有保存逻辑（含 dealRecipe3 等）全部保留在下方未删除；
+      // 接口确认后把 DEBUG_PREVIEW_POPUP 改为 false（或删除本 if 块）即可恢复。
+      // ============================================================
+      const DEBUG_PREVIEW_POPUP = true; // 调试完改为 false
+      if (DEBUG_PREVIEW_POPUP) {
+        // mock 条形码（SVG 数据 URI，仅用于占位调样式）
+        const barcodeSvg = `<svg xmlns='http://www.w3.org/2000/svg' width='160' height='48'><rect width='160' height='48' fill='white'/><g fill='black'><rect x='4' y='4' width='2' height='40'/><rect x='8' y='4' width='1' height='40'/><rect x='11' y='4' width='3' height='40'/><rect x='16' y='4' width='1' height='40'/><rect x='19' y='4' width='2' height='40'/><rect x='23' y='4' width='4' height='40'/><rect x='29' y='4' width='1' height='40'/><rect x='32' y='4' width='2' height='40'/><rect x='36' y='4' width='1' height='40'/><rect x='39' y='4' width='3' height='40'/><rect x='44' y='4' width='2' height='40'/><rect x='48' y='4' width='1' height='40'/><rect x='51' y='4' width='2' height='40'/><rect x='55' y='4' width='3' height='40'/><rect x='60' y='4' width='1' height='40'/><rect x='63' y='4' width='2' height='40'/><rect x='67' y='4' width='4' height='40'/><rect x='73' y='4' width='1' height='40'/><rect x='76' y='4' width='2' height='40'/><rect x='80' y='4' width='1' height='40'/><rect x='83' y='4' width='3' height='40'/><rect x='88' y='4' width='2' height='40'/><rect x='92' y='4' width='1' height='40'/><rect x='95' y='4' width='2' height='40'/><rect x='99' y='4' width='3' height='40'/><rect x='104' y='4' width='1' height='40'/><rect x='107' y='4' width='2' height='40'/><rect x='111' y='4' width='1' height='40'/><rect x='114' y='4' width='4' height='40'/><rect x='120' y='4' width='2' height='40'/><rect x='124' y='4' width='1' height='40'/><rect x='127' y='4' width='3' height='40'/><rect x='132' y='4' width='2' height='40'/><rect x='136' y='4' width='1' height='40'/><rect x='139' y='4' width='2' height='40'/><rect x='143' y='4' width='3' height='40'/><rect x='148' y='4' width='1' height='40'/></g></svg>`;
+        const techPatient = {
+          name: "张三", sex: "男", age: "30岁", clinic: "中医科",
+          clinicalDiagnosis: "示例临床诊断", prescriptionTime: "2026-06-12 10:00",
+          phone: "138****0000",
+          prescriber: "开方医生", reviewer: "审核", dispatcher: "调配",
+          checker: "核对", dispenser: "发药"
+        };
+        const techBarcode = "data:image/svg+xml," + encodeURIComponent(barcodeSvg);
+        this.priviewData = {
+          shiyijishuFormVos: [
+            {
+              ...techPatient, barcode: techBarcode, pid: "DEBUG-001",
+              itemName: "内科失眠推拿治疗", // 项目名称
+              prescriptiontechnologydetailVos: [
+                { pointname: "大椎", num: 1 },
+                { pointname: "肺俞", num: 2 },
+                { pointname: "风池", num: 2 }
+              ],
+              meridian: "膀胱经", // 经络
+              singleQty: 6, pricingUnit: "部位", // 数量
+              treatNum: 7, // 治疗次数
+              frequency: "1天1次", // 频次
+              pointMatchGuide: "示例配穴指南：以局部穴位为主，配合循经取穴",
+              useExplain: "示例操作指南：患者仰卧位，常规消毒后进针，得气后留针20分钟",
+              entrust: "注意保暖，避免吹风、洗澡", // 嘱托
+              amountOfMedicine: 20, lumpSum: 20
+            },
+            {
+              ...techPatient, barcode: techBarcode, pid: "DEBUG-002",
+              itemName: "普通针刺（快速针）",
+              prescriptiontechnologydetailVos: [
+                { pointname: "合谷", num: 1 },
+                { pointname: "足三里", num: 2 }
+              ],
+              meridian: "阳明胃经",
+              singleQty: 10, pricingUnit: "次",
+              treatNum: 5,
+              frequency: "2天1次",
+              pointMatchGuide: "示例配穴指南：循经取穴，局部与远端配合",
+              useExplain: "示例操作指南：常规消毒，快速进针，得气后行平补平泻手法",
+              entrust: "针刺后请按压片刻，避免出血",
+              amountOfMedicine: 30, lumpSum: 30
+            },
+            {
+              ...techPatient, barcode: techBarcode, pid: "DEBUG-003",
+              itemName: "拔罐疗法（电）",
+              prescriptiontechnologydetailVos: [
+                { pointname: "肩井", num: 1 },
+                { pointname: "天宗", num: 1 }
+              ],
+              meridian: "小肠经",
+              singleQty: 4, pricingUnit: "部位",
+              treatNum: 3,
+              frequency: "1天1次",
+              pointMatchGuide: "示例配穴指南：以痛点及周围肌肉为主",
+              useExplain: "示例操作指南：清洁皮肤，扣罐后接电针仪，留罐10分钟",
+              entrust: "拔罐后避免吹风、洗澡",
+              amountOfMedicine: 40, lumpSum: 40
+            }
+          ],
+          // 左侧 患者信息 + 就诊信息（submitRecipe 的 msg 来源）
+          prescriptionVo: {
+            patient: {
+              name: "张三",
+              sex: "男",
+              age: "30",
+              idcard: "110101199001011234",
+              phone: "138****0000"
+            },
+            outpatientRecords: {
+              recordstime: "2026-06-12 10:00",
+              departmentName: "中医科"
+            },
+            mainDiagnosis: {
+              namemedicine: "示例中医诊断",
+              treatment: "示例治法"
+            },
+            secondDiagnosis: [
+              { namemedicine: "示例其他中医诊断", diagnosis: "" },
+              { namemedicine: "", diagnosis: "示例西医诊断" }
+            ],
+            electronicmedicalrecord: {
+              chiefcomplaint: "示例主诉内容",
+              historypresent: "示例现病史内容",
+              pasthistory: "示例既往史内容",
+              fourmedicine: "示例中医四诊内容",
+              physicalexamination: "示例体格检查内容",
+              supplementaryexamination: "示例辅助检查内容",
+              image1: ""
+            }
+          }
+        };
+        this.showPriview = true;
+        this.saving = false;
+        this.$refs.suitScience && this.$refs.suitScience.saveDone();
+        return;
+      }
+      // ==================== [临时调试结束] ====================
+
       const cancel = (id) => {
         this.saving = false;
         if (id) this.container_i = this.contentTabs.findIndex(tab => tab.id === id);

src/views/diagnosis/components/submitRecipeTech.vue

@@ -0,0 +1,891 @@
+<template>
+  <div class="recipe">
+    <Popup
+      @cancle="closePopup"
+      width="80%"
+      title="处置方案"
+      :showDialog.sync="show"
+      distanceTop="3vh"
+      :showBtns="false"
+      :showBody="false"
+    >
+      <div slot="body">
+        <div class="recipe-priview flex flex-col-top">
+          <div class="left-table">
+            <!-- 用户信息 -->
+            <div class="message" v-if="msg">
+              <div class="msg-title">
+                <img src="../../../assets/new-icon/people.png" alt />
+                <span>患者信息</span>
+              </div>
+              <div class="ms-row">
+                <div class="row-item">
+                  <span>姓名：</span>
+                  <span>{{ msg.patient.name }}</span>
+                </div>
+                <div class="row-item">
+                  <span>性别：</span>
+                  <span>{{ msg.patient.sex }}</span>
+                </div>
+                <div class="row-item">
+                  <span>年龄：</span>
+                  <span>{{msg.patient.age}}岁</span>
+                </div>
+              </div>
+              <div class="ms-row">
+                <div class="row-item">
+                  <span>身份证：</span>
+                  <span>{{ msg.patient.idcard}}</span>
+                </div>
+                <div class="row-item">
+                  <span>电话：</span>
+                  <span>{{ msg.patient.phone }}</span>
+                </div>
+              </div>
+              <!-- <div class="ms-row">
+                <div class="row-item">
+                  <span>地址：</span>
+                  <span>{{ msg.patient.province}}{{ msg.patient.city}}{{msg.patient.district}}{{ msg.patient.detailadress }}</span>
+                </div>
+              </div>-->
+              <div class="ms-row" v-if="recipes.length>0">
+                <div class="row-item" style="font-weight:bold;" v-if=" recipes[0].recipeType==1">
+                  <span>是否代煎：</span>
+                  <span>{{ isDj?'是':'否'}}</span>
+                </div>
+                <div class="row-item">
+                  <span>是否快递：</span>
+                  <span>{{ isPs?'是':'否' }}</span>
+                </div>
+              </div>
+              <!-- v-if="recipes.length>0 && isPs" -->
+              <template v-if="false">
+                <div class="ms-row">
+                  <div class="row-item">
+                    <span>收货人：</span>
+                    <span>{{ psMsg.name || ''}}</span>
+                  </div>
+                  <div class="row-item">
+                    <span>收货电话：</span>
+                    <span>{{ psMsg.phone || ''}}</span>
+                  </div>
+                </div>
+                <div class="ms-row">
+                  <div class="row-item" style="font-weight:bold;">
+                    <span>收货地址：</span>
+                    <span>{{ psMsg.address || ''}}</span>
+                  </div>
+                </div>
+              </template>
+
+              <div class="msg-title" style="margin-top: 20px;">
+                <img src="../../../assets/new-icon/book.png" alt />
+                <span>就诊信息</span>
+              </div>
+              <div class="ms-row">
+                <div class="row-item">
+                  <span>就诊日期：</span>
+                  <span>{{ msg.outpatientRecords.recordstime }}</span>
+                </div>
+                <div class="row-item">
+                  <span>就诊科室：</span>
+                  <span>{{ msg.outpatientRecords.departmentName}}</span>
+                </div>
+              </div>
+              <div class="ms-row">
+                <div class="row-item">
+                  <span>中医诊断：</span>
+                  <span>{{ msg.mainDiagnosis.namemedicine}}</span>
+                </div>
+                <div class="row-item">
+                  <span>治法：</span>
+                  <span>{{ msg.mainDiagnosis.treatment }}</span>
+                </div>
+              </div>
+              <div class="ms-row">
+                <div class="row-item">
+                  <span>其他诊断：</span>
+                  <div>
+                    <div
+                      v-for="(item,index) in msg.secondDiagnosis
+"
+                      :key="index"
+                    >{{ item.namemedicine?'中医诊断':'西医诊断' }}:{{ item.namemedicine || item.diagnosis}}</div>
+                  </div>
+                </div>
+              </div>
+              <div class="ms-row">
+                <div class="row-item">
+                  <span>主诉：</span>
+                  <span>{{ msg.electronicmedicalrecord.chiefcomplaint }}</span>
+                </div>
+              </div>
+              <div class="ms-row">
+                <div class="row-item">
+                  <span>现病史：</span>
+                  <span>{{ msg.electronicmedicalrecord.historypresent }}</span>
+                </div>
+              </div>
+              <div class="ms-row">
+                <div class="row-item">
+                  <span>既往史：</span>
+                  <span>{{ msg.electronicmedicalrecord.pasthistory }}</span>
+                </div>
+              </div>
+              <div class="ms-row">
+                <div class="row-item">
+                  <span>中医四诊：</span>
+                  <span>{{ msg.electronicmedicalrecord. fourmedicine}}</span>
+                </div>
+              </div>
+              <div class="ms-row">
+                <div class="row-item">
+                  <span>体格检查：</span>
+                  <span>{{ msg.electronicmedicalrecord.physicalexamination }}</span>
+                </div>
+              </div>
+              <div class="ms-row">
+                <div class="row-item">
+                  <span>辅助检查：</span>
+                  <span>{{ msg.electronicmedicalrecord.supplementaryexamination }}</span>
+                </div>
+              </div>
+              <div class="ms-row" v-if="msg.electronicmedicalrecord.image1.length">
+                <div class="row-item">
+                  <span>报告照片：</span>
+                  <div class="img-body">
+                    <el-image
+                      class="img-item"
+                      :preview-src-list="msg.electronicmedicalrecord.image1"
+                      :src="item1"
+                      alt
+                      v-for="(item1,index1) in msg.electronicmedicalrecord.image1"
+                      :key="index1"
+                      z-index="99999"
+                    ></el-image>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <!-- 安全合理用药审查报告 -->
+            <div class="report" v-if="false">
+              <h3>安全合理用药审查报告</h3>
+              <div class="patiens-msg mr-t10" v-if="rationalMed.length>0">
+                <div class="p">
+                  <!-- {{item.matname}}({{item.matbzjj}}) -->
+                  <!-- <div class="patiens-name">{{item.matname}}</div> -->
+                  <div class="patiens-cate">超剂量药品：</div>
+                  <div class="patiens-desc" v-for="(item,index) in rationalMed10" :key="index">
+                    <span v-if="item.showDose">
+                      <span class="matname">{{item.matname}}</span>
+                      <span style="color:red;">({{item.matmindosage}}-{{item.matmaxdosage}})</span>
+                    </span>
+                  </div>
+                </div>
+
+                <div class="p" v-if="rationalMed2.length>0">
+                  <div class="patiens-cate">慎忌禁用药：</div>
+                  <div class="patiens-desc" v-for="(item,index) in rationalMed2" :key="index">
+                    <span v-if="item.matsjj">
+                      <span class="matname">{{item.matname}}</span>
+                      ({{item.matsjj}})
+                    </span>
+                  </div>
+                </div>
+
+                <div class="p" v-if="rationalMed3.length>0">
+                  <div class="patiens-cate">孕妇慎忌禁：</div>
+                  <div class="patiens-desc" v-for="(item,index) in rationalMed3" :key="index">
+                    <span v-if="item.matyfsjj">
+                      <span class="matname">{{item.matname}}</span>
+                      <span :style="{color:item.matyfsj==3?'red':''}">({{item.matyfsjj |fyfsjj}})</span>
+                    </span>
+                  </div>
+                </div>
+
+                <div class="p" v-if="rationalMed4.length>0">
+                  <div class="patiens-cate">服药饮食禁忌：</div>
+                  <div class="patiens-desc" v-for="(item,index) in rationalMed4" :key="index">
+                    <span v-if="item.matysjj">
+                      <span class="matname">{{item.matname}}</span>
+                      ({{item.matysjj?item.matysjj:'无'}})
+                    </span>
+                  </div>
+                </div>
+
+                <div class="p" v-if="rationalMed5.length>0">
+                  <div class="patiens-cate">药物毒性说明：</div>
+                  <div class="patiens-desc" v-for="(item,index) in rationalMed5" :key="index">
+                    <span v-if="item.matdxsm">
+                      <span class="matname" style="color:red;">{{item.matname}}</span>
+                      ({{item.matdxsm?item.matdxsm:'无'}})
+                    </span>
+                  </div>
+                </div>
+
+                <div class="p" v-if="rationalMed6.length>0">
+                  <div class="patiens-cate">病证用药禁忌：</div>
+                  <div class="patiens-desc" v-for="(item,index) in rationalMed6" :key="index">
+                    <span v-if="item.matbzjj">
+                      <span class="matname">{{item.matname}}</span>
+                      ({{item.matbzjj?item.matbzjj:'无'}})
+                    </span>
+                  </div>
+                </div>
+
+                <div class="p" v-if="rationalMed7.length>0">
+                  <div class="patiens-cate">十八反：</div>
+                  <div class="patiens-desc" v-for="(item,index) in rationalMed7" :key="index">
+                    <!-- <span v-if='item.matsbf'>{{fsbf(item.matsbf,item.matname)}}</span> -->
+                    <span v-if="item.matsbf">
+                      <span style="color:red;">{{item.matname}}</span>
+                      反{{item.matsbf}}
+                    </span>
+                  </div>
+                </div>
+
+                <div class="p" v-if="rationalMed8.length>0">
+                  <div class="patiens-cate">十九畏：</div>
+                  <div class="patiens-desc" v-for="(item,index) in rationalMed8" :key="index">
+                    <!-- <span v-if="item.matsjw">{{fsjw(item.matsjw,item.matname)}}</span> -->
+                    <span v-if="item.matsjw">
+                      <span style="color:red;">{{item.matname}}</span>
+                      畏{{item.matsjw}}
+                    </span>
+                  </div>
+                </div>
+
+                <div class="p" v-if="rationalMed9.length>0">
+                  <div class="patiens-cate">用药不宜：</div>
+                  <div class="patiens-desc" v-for="(item,index) in rationalMed9" :key="index">
+                    <span v-if="item.matby">{{fmatby(item.matby,item.matname) }}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <!-- <div style="text-align:center;margin-top:10px;" v-if="recipeItem.showSign">
+                            <el-button size="small" type="primary" @click="signToRecipt">双签名</el-button>
+            </div>-->
+          </div>
+          <!-- 右侧处方笺 -->
+          <div class="right-pad">
+            <!-- 处方标题 -->
+            <div class="message">
+              <div class="ms-row" style="margin-top: 0;">
+                <div class="row-item msg-title">
+                  <img src="../../../assets/new-icon/book.png" alt />
+                  <span>处方信息</span>
+                </div>
+                <div class="row-item" style="justify-content: flex-end;">
+                  <span>合计金额：{{totalCount || 0}}元</span>
+                </div>
+              </div>
+            </div>
+            <!-- 处方tab -->
+            <div class="recipe-tabs">
+              <el-tooltip
+                v-for="(item,index) in recipes"
+                :key="index"
+                placement="top"
+                :open-delay="300"
+                :content="item.recipeType==1 ? ('中药处方'+(index+1)) : (item.recipeType==2 ? '中药制剂处方' : (item.itemName||'适宜技术处方'))"
+              >
+                <div
+                  :class="['tabs-item',recipeItem.pid==item.pid?'tabs-active':'']"
+                  @click="leftChange(item)"
+                >
+                  <span class="tabs-text" v-if="item.recipeType==1">中药处方{{index+1}}</span>
+                  <span class="tabs-text" v-if="item.recipeType==2">中药制剂处方</span>
+                  <span class="tabs-text" v-if="item.recipeType==3">{{item.itemName || '适宜技术处方'}}</span>
+                  <img src="~@/assets/new-icon/close.png" alt @click.self="deleteItem(index)" />
+                </div>
+              </el-tooltip>
+            </div>
+            <!-- 中药处方 -->
+            <div v-if="recipeItem.recipeType==1">
+              <chineseMedicinePad ref="chineseM" :recipeData="recipeItem"></chineseMedicinePad>
+            </div>
+            <!-- 中药制剂 -->
+            <div v-if="recipeItem.recipeType==2">
+              <chineseMadePad :recipeData="recipeItem"></chineseMadePad>
+            </div>
+            <!-- 适宜技术处方 -->
+            <div v-if="recipeItem.recipeType==3">
+              <!-- <suitMadePad :recipeData="recipeItem"></suitMadePad> -->
+              <suitMadePadTech :recipeData="recipeItem"></suitMadePadTech>
+            </div>
+          </div>
+        </div>
+        <div class="flex-center btns">
+          <el-button size="small" @click="closePopup">取消</el-button>
+          <el-button size="small" type="primary" @click="sureToSubmit">确认并提交</el-button>
+        </div>
+      </div>
+    </Popup>
+  </div>
+</template>
+
+<script>
+import { addRecipe, updateRecipe } from "@/api/diagnosis.js";
+import { mapGetters } from "vuex";
+import Popup from "@/components/Propup.vue";
+import chineseMedicinePad from "@/components/ui/chineseMedicinePad.vue";
+import chineseMadePad from "@/components/ui/chineseMadePad.vue";
+// import suitMadePad from "@/components/ui/suitMadePad.vue";
+import suitMadePadTech from "@/components/ui/suitMadePadTech.vue";
+
+import { formatPicture } from "@/utils/picture";
+import {inform} from '@/utils/url';
+
+export default {
+  components: {
+    Popup,
+    chineseMedicinePad,
+    chineseMadePad,
+    // suitMadePad,
+    suitMadePadTech
+  },
+  props: {
+    show: {
+      type: Boolean,
+      default: false
+    },
+    priviewData: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    }
+  },
+  data() {
+    return {
+      showDialog: false,
+      recipes: [], // 处方数据
+      recipeItem: {}, // 右侧显示处方
+      msg: null, // 用户信息
+      // isDj: false, // 是否代煎
+      // isPs: false, // 是否配送
+      psMsg: {}, // 配送相关信息
+      rationalMed: [],
+      rationalMed1: [],
+      rationalMed2: [],
+      rationalMed3: [],
+      rationalMed4: [],
+      rationalMed5: [],
+      rationalMed6: [],
+      rationalMed7: [],
+      rationalMed8: [],
+      rationalMed9: [],
+      rationalMed10: []
+    };
+  },
+  watch: {
+    show() {
+      this.showDialog = this.show;
+      if (!this.showDialog) {
+        this.recipes = [];
+        this.recipeItem = {};
+      }
+    },
+    priviewData: {
+      deep: false,
+      handler: function() {
+        if (!this.show) return;
+        if (Object.keys(this.priviewData).length == 0) return;
+        this.recipes = [];
+        this.recipeItem = {};
+        this.dealPriviewData();
+      }
+    }
+  },
+  computed: {
+    totalCount() {
+      let total = 0;
+      this.recipes.forEach(item => {
+        total += item.lumpSum;
+      });
+      return total.toFixed(2);
+    },
+    isDj() {
+      let isDj = false;
+      let item = this.recipeItem;
+      if (item.recipeType == 1 && item.fried == "代煎") {
+        isDj = true;
+      }
+      if (item.recipeType == 1 && item.fried == "") {
+        isDj = false;
+      }
+
+      return isDj;
+    },
+    isPs() {
+      let isPs = false;
+      let item = this.recipeItem;
+      if (item.isdelivery == 0 && item.recipeType != 3) {
+        isPs = true;
+        // this.psMsg = {
+        //   name: item.name,
+        //   phone: item.phone,
+        //   address: item.address
+        // };
+      }
+
+      return isPs;
+    },
+    ...mapGetters(["getPatiensInfo", "getuserinfo", "getDrugInfo", "getIsSee", "getPreNo"])
+  },
+  created() {
+    this.showDialog = this.show;
+    this.dealPriviewData();
+  },
+  methods: {
+    getEditPreNo() {
+      return this.$route.query && this.$route.query.recipeType === "edit" ? this.$route.query.recipeID : this.getPreNo;
+    },
+    signToRecipt() {
+      this.recipes.forEach(item => {
+        if (item.pid == this.recipeItem.pid) {
+          item.showSign = false;
+          // this.recipeItem = item
+          this.$set(this.recipeItem, "showSign", false);
+        }
+      });
+      this.$forceUpdate();
+      this.$refs.chineseM.showSign = true;
+    },
+    closePopup() {
+      this.showDialog = !this.showDialog;
+      // this.priviewData = {}
+      this.recipes = []; // 处方数据
+      this.recipeItem = {}; // 右侧显示处方
+      this.$emit("update:show", this.showDialog);
+      this.$emit("cancle", 1);
+    },
+    // 处理数据
+    dealPriviewData() {
+      if (!this.priviewData) return;
+      // this.isPs = false;
+      // this.isDj = false;
+      // 中药处方
+      if (Array.isArray(this.priviewData.tcmPrescriptionFormVos) && this.priviewData.tcmPrescriptionFormVos.length > 0) {
+        this.priviewData.tcmPrescriptionFormVos.forEach((item, index) => {
+          item.showSign = true;
+          item.recipeType = 1;
+          this.recipes.push(item);
+        });
+      }
+      // 中药制剂
+      if (this.priviewData.zhongyaozhijiFormVo) {
+        if (this.priviewData.zhongyaozhijiFormVo.pid) {
+          this.priviewData.zhongyaozhijiFormVo.recipeType = 2;
+          this.recipes.push(this.priviewData.zhongyaozhijiFormVo);
+        }
+      }
+
+      // 适宜技术处方（多个，用于调试 tab 切换）
+      if (Array.isArray(this.priviewData.shiyijishuFormVos)) {
+        this.priviewData.shiyijishuFormVos.forEach((item) => {
+          if (item.pid) {
+            item.recipeType = 3;
+            this.recipes.push(item);
+          }
+        });
+      }
+
+      // 适宜技术处方（单个，兼容原结构）
+      if (this.priviewData.shiyijishuFormVo) {
+        if (this.priviewData.shiyijishuFormVo.pid) {
+          this.priviewData.shiyijishuFormVo.recipeType = 3;
+          this.recipes.push(this.priviewData.shiyijishuFormVo);
+        }
+      }
+
+      this.recipeItem = this.recipes[0] || {};
+      // this.recipes.forEach(item => {
+      //   if (item.recipeType == 1 && item.fried == "代煎") {
+      //     this.isDj = true;
+      //   }
+      //   if (item.recipeType == 1 && item.fried == "") {
+      //     this.isDj = false;
+      //   }
+      //   if (item.isdelivery == 0 && item.recipeType != 3) {
+      //     this.isPs = true;
+      //     this.psMsg = {
+      //       name: item.name,
+      //       phone: item.phone,
+      //       address: item.address
+      //     };
+      //   }
+      // });
+      if (this.priviewData.prescriptionVo) {
+        this.msg = this.priviewData.prescriptionVo;
+        this.msg.electronicmedicalrecord.image1 = formatPicture(this.msg.electronicmedicalrecord.image1);
+      }
+    },
+    // 删除处方
+    deleteItem(index) {
+      this.$confirm("此操作将删除当前处方, 是否继续?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      })
+        .then(() => {
+          if (index == 0 && this.recipes.length == 1) {
+            this.deleteRawData(this.recipes[index].recipeType, index);
+            this.recipes.splice(index, 1);
+            this.closePopup();
+            return;
+          }
+          if (this.recipes[index].pid == this.recipeItem.pid) {
+            this.deleteRawData(this.recipes[index].recipeType, index);
+            this.recipes.splice(index, 1);
+            this.recipeItem = this.recipes[0];
+          } else {
+            this.deleteRawData(this.recipes[index].recipeType, index);
+            this.recipes.splice(index, 1);
+          }
+        })
+        .catch(() => {});
+    },
+    // 左侧切换处方
+    leftChange(item) {
+      this.recipeItem = item;
+
+      this.$refs.chineseM.showSign = !item.showSign;
+    },
+
+    // 同时删除 缓存内保存的 提交数据
+    deleteRawData(type, index) {
+      let data = JSON.parse(sessionStorage.getItem("priviewRawData"));
+      let zhongyao = data.zhongyao;
+      let zhongchengyao = data.zhongchengyao;
+      let technology = data.technology;
+      if (type == 1) {
+        zhongyao.splice(index, 1);
+      }
+
+      if (type == 2) {
+        zhongchengyao = {};
+      }
+
+      if (type == 3) {
+        technology = {};
+      }
+
+      sessionStorage.setItem(
+        "priviewRawData",
+        JSON.stringify({
+          zhongchengyao,
+          technology,
+          zhongyao
+        })
+      );
+    },
+    sureToSubmit() {
+      let data = JSON.parse(sessionStorage.getItem("priviewRawData"));
+      let zhongyao = data.zhongyao;
+      let zhongchengyao = data.zhongchengyao;
+      let technology = data.technology;
+
+      if (!!this.getEditPreNo()) {
+        this.updateRecipe(zhongyao, zhongchengyao, technology);
+      } else {
+        this.addRecipe(zhongyao, zhongchengyao, technology);
+      }
+    },
+    // 提交处方
+    async addRecipe(zhongyao, zhongchengyao, technology) {
+      const loading = this.$loading({
+        lock: true,
+        text: "正在提交",
+        spinner: "el-icon-loading",
+        background: "rgba(0, 0, 0, 0.7)"
+      });
+      let params = {
+        recordid: this.getPatiensInfo.pid,
+        technology: technology,
+        zhongchengyao: zhongchengyao,
+        zhongyao: zhongyao
+      };
+
+      let res = await addRecipe(params).catch(err => void 0);
+      loading.close();
+      if (res && res.ResultCode == 0) {
+        this.$message.success("提交成功");
+        let msg = {
+          origin: "Recipe",
+          msg: "刷新数据"
+        };
+        inform(msg);
+        if (this.$route.query.from && this.$route.query.from == "validation") {
+          setTimeout(() => {
+            loading.close();
+            this.$router.back();
+          }, 3000);
+        } else {
+          setTimeout(() => {
+            loading.close();
+            this.$router.push({
+              path: "/index/recipe"
+            });
+          }, 3000);
+        }
+        sessionStorage.setItem("priviewRawData", "");
+        sessionStorage.removeItem("prescr" + this.getPatiensInfo.pid);
+      }
+    },
+    // 审核不通过 修改处方
+    async updateRecipe(zhongyao, zhongchengyao, technology) {
+      const loading = this.$loading({
+        lock: true,
+        text: "正在修改",
+        spinner: "el-icon-loading",
+        background: "rgba(0, 0, 0, 0.7)"
+      });
+      const recipeID = this.getEditPreNo();
+      zhongyao.forEach(item => {
+        item.preId = recipeID;
+      });
+      zhongchengyao.preId = recipeID;
+      technology.preId = recipeID;
+      let params = {
+        recordid: this.$route.query.recordsId || this.getPatiensInfo.pid,
+        technology: technology,
+        zhongchengyao: zhongchengyao,
+        zhongyao: zhongyao
+      };
+      let res = await updateRecipe(params).catch(err => void 0);
+      loading.close();
+      if (res && res.ResultCode == 0) {
+        let msg = {
+          origin: "Recipe",
+          msg: "刷新数据"
+        };
+        inform(msg);
+        this.$message.success("修改成功");
+        setTimeout(() => {
+          loading.close();
+          this.$router.push({
+            path: "/index/recipe"
+          });
+        }, 3000);
+
+        sessionStorage.setItem("priviewRawData", "");
+      }
+    }
+  }
+};
+</script>
+
+<style scoped lang="scss">
+@import "~@/style/common.scss";
+
+.recipe-priview {
+  // height: 400px;
+  height: 70vh;
+
+  .right-pad {
+    width: 420px;
+    // background: red;
+    height: 100%;
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+
+  .report {
+    margin-top: 40px;
+    height: 400px;
+    overflow: auto;
+    background: rgba($color: #d7d7d7, $alpha: 0.3);
+    padding: 10px;
+    box-sizing: border-box;
+
+    h3 {
+      text-align: center;
+    }
+  }
+
+  .left-table {
+    flex: 1;
+    // height: 100%;
+    overflow: auto;
+    margin-right: 10px;
+
+    .table-body {
+      border: 1px solid #d7d7d7;
+      border-bottom: 0;
+    }
+
+    .table-title {
+      font-size: 15px;
+      font-weight: 600;
+      text-align: center;
+      padding: 8px;
+      color: #fff;
+      background: #5386f6;
+    }
+
+    .table-tr {
+      border-bottom: 1px solid #d7d7d7;
+      cursor: default;
+      // line-height: 30px;;
+      font-size: 14px;
+      height: 33px;
+
+      div:nth-child(1) {
+        flex: 1;
+        border-right: 1px solid #d7d7d7;
+      }
+
+      div:nth-child(2) {
+        flex: 1;
+        border-right: 1px solid #d7d7d7;
+        color: red;
+      }
+
+      div:nth-child(3) {
+        width: 30px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        img {
+          width: 60%;
+        }
+      }
+    }
+
+    .table-tr:last-child {
+      div:nth-child(1) {
+        font-weight: 600;
+      }
+    }
+
+    .table-tr-active {
+      background: #d7d7d7;
+    }
+  }
+
+  .message {
+    .msg-title {
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+
+      img {
+        width: 24px;
+        margin-right: 5px;
+      }
+
+      span {
+        font-size: 14px;
+        font-weight: 600;
+      }
+    }
+
+    .ms-row {
+      margin-top: 10px;
+      display: flex;
+      align-items: flex-start;
+      justify-content: flex-start;
+    }
+
+    .row-item {
+      display: flex;
+      flex: 1;
+      align-items: flex-start;
+    }
+
+    .img-body {
+      display: flex;
+      align-items: flex-start;
+      flex-wrap: wrap;
+    }
+
+    .img-item {
+      width: 80px;
+      height: 80px;
+      margin-right: 10px;
+      margin-bottom: 10px;
+    }
+  }
+}
+
+.btns {
+  margin-top: 10px;
+}
+
+.patiens-msg {
+  font-size: 14px;
+  font-family: PingFang SC;
+  font-weight: 400;
+  color: #333333;
+
+  .p {
+    margin-bottom: 5px;
+    cursor: default;
+
+    .patiens-name {
+      color: #5386f6;
+      font-weight: bold;
+      font-size: 16px;
+    }
+
+    .patiens-desc {
+      display: inline-block;
+
+      .matname {
+        color: #5386f6;
+      }
+    }
+
+    .patiens-cate {
+      font-weight: bold;
+    }
+  }
+}
+
+.recipe-tabs {
+  width: 100%;
+  overflow-x: auto;
+  display: flex;
+  align-items: flex-start;
+  margin-top: 10px;
+  .tabs-item {
+    cursor: pointer;
+    min-width: 105px;
+    max-width: 140px;
+    flex-shrink: 0;
+    padding: 2px 5px;
+    font-size: 14px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid #000;
+    border-right: 0;
+
+    .tabs-text {
+      flex: 1;
+      min-width: 0;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      text-align: center;
+    }
+
+    img {
+      width: 15px;
+      margin-left: 5px;
+      flex-shrink: 0;
+    }
+  }
+
+  .tabs-active {
+    background: #d7d7d7;
+  }
+
+  .tabs-item:last-child {
+    border-right: 1px solid #000;
+  }
+}
+</style>