跟团游新增订单

src/components/SalesModule/components/addConfig.js

+// 邮轮列表配置
+export const addConfig = {
+  // 抽屉配置
+  drawerConfig: {
+    title: '跟团游信息',
+    size: '90%',
+    direction: 'rtl'
+  },
+}
+
+// 导出默认配置
+export default addConfig

src/components/SalesModule/components/addOrder.vue

+<style>
+  @import "../../../assets/css/DMC.css";
+  .drawer-mode {
+    display: flex;
+    height: 100%;
+    flex-direction: column;
+  }
+
+  /* 抽屉模式下的样式优化 */
+  .drawer-mode .changInfo {
+    padding: 0;
+    margin: 0;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .drawer-mode .resource-content {
+    padding: 0;
+    flex: 1;
+    overflow: hidden;
+    margin: 0 !important;
+  }
+
+  .drawer-mode .hotel-form-container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+
+  /* Tabs 样式优化 */
+  .drawer-mode .hotel-tabs {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    border: none;
+    box-shadow: none;
+    overflow: hidden;
+  }
+
+  .drawer-mode .hotel-tabs .el-tabs__header {
+    margin: 0;
+    background: #f8f9fa;
+    border-bottom: 1px solid #e8e8e8;
+  }
+
+  .drawer-mode .hotel-tabs .el-tabs__nav-wrap {
+    padding: 0 20px;
+  }
+
+  .drawer-mode .hotel-tabs .el-tabs__item {
+    height: 40px;
+    line-height: 40px;
+    font-size: 13px;
+    font-weight: 500;
+    color: #595959;
+    border: none;
+    padding: 0 20px;
+  }
+
+  .drawer-mode .hotel-tabs .el-tabs__item.is-active {
+    color: #1890ff;
+    background: #fff;
+    border-bottom: 2px solid #1890ff;
+  }
+
+  .drawer-mode .hotel-tabs .el-tabs__content {
+    flex: 1;
+    overflow-y: auto;
+    padding: 0;
+  }
+
+  .drawer-mode .hotel-tabs .el-tab-pane {
+    height: 100%;
+  }
+
+  /* Tab 内容区域 */
+  .drawer-mode .tab-content {
+    padding: 20px;
+    height: 100%;
+    overflow-y: auto;
+  }
+
+  .drawer-mode .tab-content.hidden {
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+  }
+
+  /* 表单样式优化 */
+  .drawer-mode .el-form {
+    padding: 0;
+  }
+
+  .drawer-mode .el-form-item {
+    margin-bottom: 16px;
+  }
+
+  .drawer-mode .el-form-item__label {
+    font-size: 13px;
+    font-weight: 500;
+    line-height: 32px;
+    color: #262626;
+    /* width: 120px !important; */
+  }
+
+  /* 输入框和下拉框优化 */
+  .drawer-mode .el-input,
+  .drawer-mode .el-select {
+    width: 100%;
+  }
+
+  .drawer-mode .el-input__inner,
+  .drawer-mode .el-select .el-input__inner {
+    height: 32px;
+    line-height: 32px;
+    font-size: 13px;
+    border: 1px solid #d9d9d9;
+    border-radius: 4px;
+    transition: all 0.2s ease;
+  }
+
+  .drawer-mode .el-input__inner:focus,
+  .drawer-mode .el-select .el-input__inner:focus {
+    border-color: #1890ff;
+    box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+  }
+
+  .drawer-mode .el-textarea__inner {
+    font-size: 13px;
+    border: 1px solid #d9d9d9;
+    border-radius: 4px;
+    min-height: 60px;
+  }
+
+  .drawer-mode .el-textarea__inner:focus {
+    border-color: #1890ff;
+    box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+  }
+
+  /* 日期选择器优化 */
+  .drawer-mode .el-date-editor {
+    width: 100%;
+  }
+
+  .drawer-mode .el-date-editor .el-input__inner {
+    height: 32px;
+    line-height: 32px;
+  }
+
+  /* 联系人区域样式 */
+  .drawer-mode .contact-header {
+    margin-bottom: 20px;
+    padding-bottom: 10px;
+    border-bottom: 1px solid #e8e8e8;
+    text-align: right;
+  }
+
+  .drawer-mode .contact-list {
+    flex: 1;
+    overflow-y: auto;
+  }
+
+  .drawer-mode .contact-item {
+    margin-bottom: 12px;
+    padding: 12px;
+    background: #fafbfc;
+    border: 1px solid #e8e8e8;
+    border-radius: 6px;
+    position: relative;
+    display: flex;
+    align-items: start;
+    padding-bottom: 0;
+  }
+
+  .drawer-mode .contact-item .el-form-item__content {
+    margin-left: 0px !important;
+  }
+
+  /* 上传区域样式 */
+  .drawer-mode .upload-section {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .drawer-mode .upload-section a {
+    color: #1890ff;
+    text-decoration: none;
+    font-size: 13px;
+    margin-right: 8px;
+    display: inline-block;
+    margin-bottom: 4px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  .drawer-mode .upload-section a:hover {
+    color: #40a9ff;
+    text-decoration: underline;
+  }
+
+  /* 按钮区域优化 */
+  .drawer-mode .btn-list {
+    position: sticky;
+    bottom: 0;
+    background: #fff;
+    padding: 16px 20px;
+    border-top: 1px solid #e8e8e8;
+    margin: 0;
+    z-index: 100;
+    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
+  }
+
+  .drawer-mode .btn-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 12px;
+  }
+
+  .drawer-mode .save-Btn,
+  .drawer-mode .cancel-Btn {
+    height: 36px;
+    padding: 0 20px;
+    font-size: 14px;
+    border-radius: 4px;
+    cursor: pointer;
+    border: 1px solid;
+    transition: all 0.2s ease;
+  }
+
+  .drawer-mode .save-Btn {
+    background: #1890ff;
+    border-color: #1890ff;
+    color: #fff;
+  }
+
+  .drawer-mode .save-Btn:hover {
+    background: #40a9ff;
+    border-color: #40a9ff;
+  }
+
+  .drawer-mode .save-Btn:disabled {
+    background: #d9d9d9;
+    border-color: #d9d9d9;
+    color: #bfbfbf;
+    cursor: not-allowed;
+  }
+
+  .drawer-mode .save-Btn:disabled:hover {
+    background: #d9d9d9;
+    border-color: #d9d9d9;
+  }
+
+  .drawer-mode .cancel-Btn {
+    background: #fff;
+    border-color: #d9d9d9;
+    color: #595959;
+  }
+
+  .drawer-mode .cancel-Btn:hover {
+    background: #f5f5f5;
+    border-color: #40a9ff;
+    color: #40a9ff;
+  }
+
+  /* 上传按钮优化 */
+  .drawer-mode .el-button--small {
+    height: 28px;
+    padding: 0 12px;
+    font-size: 12px;
+    border-radius: 4px;
+  }
+
+  .drawer-mode .el-button--primary.el-button--small {
+    background: #1890ff;
+    border-color: #1890ff;
+  }
+
+  .drawer-mode .el-button--primary.el-button--small:hover {
+    background: #40a9ff;
+    border-color: #40a9ff;
+  }
+
+  /* 滚动条样式 */
+  .drawer-mode .tab-content::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  .drawer-mode .tab-content::-webkit-scrollbar-track {
+    background-color: #f6f8fa;
+    border-radius: 3px;
+  }
+
+  .drawer-mode .tab-content::-webkit-scrollbar-thumb {
+    background-color: #d0d7de;
+    border-radius: 3px;
+  }
+
+  .drawer-mode .tab-content::-webkit-scrollbar-thumb:hover {
+    background-color: #8c959f;
+  }
+
+  /* 加载状态样式 */
+  .loading-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 300px;
+    padding: 40px;
+  }
+
+  .loading-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+  }
+
+  .loading-content .el-loading-spinner {
+    margin-bottom: 16px;
+  }
+
+  .loading-content .el-loading-spinner .circular {
+    width: 32px;
+    height: 32px;
+    color: #1890ff;
+  }
+
+  .loading-content p {
+    color: #666;
+    font-size: 14px;
+    margin: 0;
+  }
+
+  /* 错误状态样式 */
+  .error-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 300px;
+    padding: 40px;
+  }
+
+  .error-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    max-width: 400px;
+  }
+
+  .error-content .el-icon-warning {
+    font-size: 48px;
+    color: #f56c6c;
+    margin-bottom: 16px;
+  }
+
+  .error-content .error-title {
+    color: #f56c6c;
+    font-size: 16px;
+    font-weight: 500;
+    margin: 0 0 8px 0;
+  }
+
+  .error-content .error-message {
+    color: #666;
+    font-size: 14px;
+    margin: 0 0 20px 0;
+    line-height: 1.5;
+  }
+
+  .error-actions {
+    display: flex;
+    gap: 12px;
+  }
+
+  .error-actions .el-button {
+    min-width: 80px;
+  }
+
+  /* 响应式优化 */
+  @media (max-width: 1200px) {
+    .drawer-mode .el-col[class*="span-6"] {
+      width: 50% !important;
+    }
+
+    .drawer-mode .el-col[class*="span-4"] {
+      width: 33.333% !important;
+    }
+  }
+
+  @media (max-width: 768px) {
+    .drawer-mode .el-col[class*="span-"] {
+      width: 100% !important;
+    }
+
+    .drawer-mode .tab-content {
+      padding: 16px;
+    }
+
+    .drawer-mode .el-form-item__label {
+      width: 100px !important;
+    }
+
+    .loading-container,
+    .error-container {
+      min-height: 200px;
+      padding: 20px;
+    }
+
+    .error-actions {
+      flex-direction: column;
+      width: 100%;
+    }
+
+    .error-actions .el-button {
+      width: 100%;
+    }
+  }
+  .cruiseShipInfo{
+    display: flex;
+    flex-direction: row;
+  }
+
+</style>
+<template>
+  <div class="flexOne changInfo" :class="{ 'drawer-mode': isDrawerMode }">
+    <!-- 正常内容 -->
+    <div class="resource-content clearfix">
+      <el-form :model="addMsg" :rules="rules" class="h-full" ref="addMsg" label-width="120px"
+      :disabled="addMsg.OrderId>0&&(activeTab=='basic'||activeTab=='contact')">
+        <div class="hotel-form-container h-full">
+          <el-tabs v-model="activeTab" type="border-card" class="hotel-tabs">
+            <el-tab-pane label="基础资料" name="basic">
+              <div class="tab-content">
+                <el-row :gutter="16">
+                  <el-col :span="6">
+                    <el-form-item label="团标题" prop="Title">
+                      <el-input type="text" v-model="addMsg.Title"></el-input>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="6">
+                    <el-form-item label="行程天数" prop="DayNum">
+                      <el-input type="number" v-model="addMsg.DayNum" placeholder="请输入天数"></el-input>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="6">
+                    <el-form-item label="出发日期" prop="StartDate">
+                      <el-date-picker v-model="addMsg.StartDate" type="date" placeholder="请选择出发日期">
+                      </el-date-picker>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="6">
+                    <el-form-item label="团类型" prop="PriceTeamType">
+                      <el-select v-model="addMsg.PriceTeamType" 
+                      placeholder="请选择团类型">
+                      <el-option v-for='item in TeamTypeList' :label='item.label' 
+                      :value='item.value' :key='item.value'></el-option>
+                      </el-select>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="6">
+                    <el-form-item label="OP">
+                      <el-select v-model="addMsg.AppointOPList" 
+                      multiple filterable collapse-tags placeholder="请选择OP">
+                      <el-option v-for='item in EmployeeList' :label='item.EmName' 
+                      :value='item.EmployeeId' :key='item.EmployeeId'></el-option>
+                      </el-select>
+                    </el-form-item>
+                  </el-col>
+                  <!-- <el-col :span="6">
+                    <el-form-item label="预订人" prop="Name">
+                      <el-input type="text" v-model="addMsg.Name" maxlength="100"></el-input>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="6">
+                    <el-form-item label="预订人(英文名)">
+                      <el-input type="text" v-model="addMsg.EName" maxlength="100"></el-input>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="6">
+                    <el-form-item label="预订人手机号">
+                      <el-input type="text" v-model="addMsg.Mobile" maxlength="100"></el-input>
+                    </el-form-item>
+                  </el-col> -->
+                  <el-col :span="6">
+                    <el-form-item label="联系人" prop="ContactName">
+                      <el-input type="text" v-model="addMsg.ContactName" maxlength="100"></el-input>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="6">
+                    <el-form-item label="联系人手机号">
+                      <el-input type="tel" v-model="addMsg.ContactMobile" maxlength="100"></el-input>
+                    </el-form-item>
+                  </el-col>
+                  <!-- <el-col :span="6">
+                    <el-form-item label="预订人性别">
+                      <el-select v-model="addMsg.Sex" placeholder="请选择">
+                        <el-option label="男" value="1"></el-option>
+                        <el-option label="女" value="2"></el-option>
+                      </el-select>
+                    </el-form-item>
+                  </el-col> -->
+                  <el-col :span="6">
+                    <el-form-item label="供应商" prop="DisplaySupplierId">
+                      <el-select 
+                        v-model="addMsg.DisplaySupplierId" 
+                        placeholder="请输入关键字查询"
+                        filterable allow-create
+                        default-first-option clearable 
+                        remote
+                        reserve-keyword
+                        :remote-method="getSupplier"
+                        :loading="SPloading"
+                        @change="(val)=>{handleChange(val,3)}">
+                        <el-option v-for="item in SupplierList" :key="item.ID" :label="item.Name" :value="item.ID">
+                        </el-option>
+                      </el-select>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="6">
+                    <el-form-item label="供应商联系人" prop="Contact">
+                      <el-input type="text" v-model="addMsg.Contact"></el-input>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="6">
+                    <el-form-item label="供应商联系电话" prop="Tel">
+                      <el-input type="tel" v-model="addMsg.Tel"></el-input>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="6">
+                    <el-form-item label="供应商(公司名称)">
+                      <el-input type="text" v-model="addMsg.CompanyName"></el-input>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="6">
+                    <el-form-item label="供应商(公司电话)">
+                      <el-input type="tel" v-model="addMsg.CompanyPhone"></el-input>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="6">
+                    <el-form-item label="营业执照号">
+                      <el-input type="text" v-model="addMsg.DutyParagraph"></el-input>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="6">
+                    <el-form-item label="开户行">
+                      <el-input type="text" v-model="addMsg.OpeningBank"></el-input>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="6">
+                    <el-form-item label="开户账号">
+                      <el-input type="text" v-model="addMsg.BankNo"></el-input>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="6">
+                    <el-form-item label="成本" prop="Meet">
+                      <el-input type="number" v-model="addMsg.Meet"></el-input>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="6">
+                    <el-form-item label="应收总金额" prop="PreferPrice">
+                      <el-input type="number" v-model="addMsg.PreferPrice"></el-input>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="6">
+                    <el-form-item label="成人人数" prop="ManNum">
+                      <el-input type="number" v-model="addMsg.ManNum"></el-input>
+                    </el-form-item>
+                  </el-col>
+                  <!-- <el-col :span="6">
+                    <el-form-item label="儿童人数" prop="ChirdNum">
+                      <el-input type="number" v-model="addMsg.ChirdNum"></el-input>
+                    </el-form-item>
+                  </el-col> -->
+                  <el-col :span="6">
+                    <el-form-item label="儿童不占床数" prop="ChirdNoNeedBedNum">
+                      <el-input type="number" v-model="addMsg.ChirdNoNeedBedNum"></el-input>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="6">
+                    <el-form-item label="儿童占床数" prop="ChirdNeedBedNum">
+                      <el-input type="number" v-model="addMsg.ChirdNeedBedNum"></el-input>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="6">
+                    <el-form-item label="婴儿人数" prop="BabyNum">
+                      <el-input type="number" v-model="addMsg.BabyNum"></el-input>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="6">
+                    <el-form-item label="老人人数" prop="OldPeopleNum">
+                      <el-input type="number" v-model="addMsg.OldPeopleNum"></el-input>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="6">
+                    <el-form-item label="单房数量" prop="SingleRoomNum">
+                      <el-input type="number" v-model="addMsg.SingleRoomNum"></el-input>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="6">
+                    <el-form-item label="大床房">
+                      <el-input type="number" v-model="addMsg.BigRoomNum"></el-input>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="6">
+                    <el-form-item label="三人房">
+                      <el-input type="number" v-model="addMsg.TripleRoomNum"></el-input>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="6">
+                    <el-form-item :label="$t('salesModule.VisaNum')">
+                      <el-input type="number" v-model="addMsg.VisaNum"></el-input>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="6">
+                    <el-form-item :label="$t('salesModule.SaleNum')">
+                      <el-input type="number" v-model="addMsg.SafeNum"></el-input>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="6">
+                    <el-form-item :label="$t('salesModule.SingleFM')">
+                      <el-radio v-model="addMsg.OneSex" label="1">{{ $t("pub.man") }}
+                      </el-radio>
+                      <el-radio v-model="addMsg.OneSex" label="2">{{ $t("pub.woman") }}
+                      </el-radio>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="6">
+                    <el-form-item :label="$t('salesModule.PredictRoomNum')" prop="">
+                      <el-input v-model="addMsg.PredictRoomNum" :disabled="false"></el-input>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="6">
+                    <el-form-item :label="$t('Airticket.Air_EconomyClass')" prop="">
+                      <el-input type="number" v-model="addMsg.YSeatNum"></el-input>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="6">
+                    <el-form-item :label="$t('Airticket.Air_businessClass')" prop="">
+                      <el-input type="number" v-model="addMsg.ESeatNum"></el-input>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="6">
+                    <el-form-item :label="$t('Airticket.Air_firstClass')" prop="">
+                      <el-input type="number" v-model="addMsg.FSeatNum"></el-input>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="6">
+                    <el-form-item label="附件" prop="WordPath">
+                      <div class="upload-section">
+                        <a v-if="addMsg.WordPath" :href="addMsg.WordPath" target="_blank">{{addMsg.WordPath.split('/').pop()}}</a>
+                        <el-upload class="upload-demo" :http-request="UploadImage" :multiple="true"
+                          accept="image/jpeg,image/gif,image/png,image/bmp,.doc,.docx,.pdf,.PDF,.xls,.xlsx,.XLS,.XLSX,.txt,.TXT" :show-file-list="false" action="">
+                          <el-button size="small" type="primary">点击上传</el-button>
+                        </el-upload>
+                      </div>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="12">
+                    <el-form-item label="订单备注">
+                      <el-input type="textarea" v-model="addMsg.Remarks" placeholder="订单备注"></el-input>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="12">
+                    <el-form-item label="联运备注">
+                      <el-input type="textarea" v-model="addMsg.UnionRemark" placeholder="联运备注"></el-input>
+                    </el-form-item>
+                  </el-col>
+                </el-row>
+              </div>
+            </el-tab-pane>
+
+            <el-tab-pane label="旅客信息" name="contact">
+              <div class="tab-content hidden">
+                <div class="contact-header">
+                  <el-button type="primary" size="small" @click="AddContract()">添加旅客</el-button>
+                </div>
+                <div class="contact-list" v-if="addMsg.GuestList&&addMsg.GuestList.length>0">
+                  <el-form-item v-for="(item,index) in addMsg.GuestList" :key="index" label-width="0px">
+                      <div class="contact-item" :key="`contact-${index}`">
+                        <el-row :gutter="16" style="flex: 1;">
+                          <el-col :span="4">
+                            <el-form-item
+                            :label="addMsg.GuestList.length>0?`${$t('admin.mane')} ${index+1} `:` ` "
+                            :prop="`GuestList.${index}.Name`"
+                            :rules="rules.Name2"
+                            class="cruiseShipInfo"
+                            label-width="70px">
+                              <el-input placeholder="请输入旅客名称" v-model="item.Name" clearable>
+                              </el-input>
+                            </el-form-item>
+                          </el-col>
+                          <el-col :span="3">
+                            <el-form-item>
+                              <el-input placeholder="请输入身份证号" v-model="item.IdCard" clearable>
+                              </el-input>
+                            </el-form-item>
+                          </el-col>
+                          <el-col :span="3">
+                            <el-form-item>
+                              <el-input placeholder="请输入护照号" v-model="item.PassportNo" clearable>
+                              </el-input>
+                            </el-form-item>
+                          </el-col>
+                          <el-col :span="3">
+                            <el-form-item>
+                              <el-date-picker
+                                v-model="item.PassportIssued"
+                                type="date"
+                                placeholder="护照签发日期" clearable>
+                              </el-date-picker>
+                            </el-form-item>
+                          </el-col>
+                          <el-col :span="3">
+                            <el-form-item>
+                              <el-date-picker
+                                v-model="item.PassportExpiry"
+                                type="date"
+                                placeholder="护照有效期" clearable>
+                              </el-date-picker>
+                            </el-form-item>
+                          </el-col>
+                          <el-col :span="4">
+                            <el-form-item
+                            :label="addMsg.GuestList.length>0?`${$t('admin.admin_Birthday')} ${index+1} `:` ` "
+                            :prop="`GuestList.${index}.Birthday`"
+                            :rules="rules.Birthday"
+                             class="cruiseShipInfo"
+                             label-width="70px">
+                              <el-date-picker
+                                v-model="item.Birthday"
+                                type="date"
+                                placeholder="请选择生日" clearable>
+                              </el-date-picker>
+                            </el-form-item>
+                          </el-col>
+                          <el-col :span="4">
+                            <el-form-item
+                            :label="addMsg.GuestList.length>0?`${$t('hotel.table_tel')} ${index+1} `:` ` "
+                            :prop="`GuestList.${index}.Tel`"
+                            :rules="rules.Tel2"
+                            class="cruiseShipInfo"
+                            label-width="70px">
+                              <el-input :placeholder="$t('visaT.qsrphone')" v-model="item.Tel" clearable>
+                              </el-input>
+                            </el-form-item>
+                          </el-col>
+                        </el-row>
+                        <el-button style="margin-top: 8px; margin-left: 10px;" type="danger" size="mini"
+                          @click="deleteContract(index)">删除</el-button>
+                      </div>
+                  </el-form-item>
+                </div>
+              </div>
+            </el-tab-pane>
+
+            <el-tab-pane label="设置" name="internal">
+              <div class="tab-content">
+                <el-row :gutter="16">
+                  <el-col :span="4">
+                    <el-form-item label="尾款提醒" label-width="70px">
+                      <el-input type="number" v-model="addMsg.FinalPriceTips" placeholder="天数"></el-input>
+                    </el-form-item>
+                  </el-col>
+                </el-row>
+              </div>
+            </el-tab-pane>
+          </el-tabs>
+        </div>
+      </el-form>
+    </div>
+    <el-dialog custom-class="resourceImgAdd" :title="$t('ground.xuanzetupian')" center :visible.sync="addimg">
+      <DMCchooseImg @closeImg="closeDMCchooseImg" ref="DMCchooseImg1" @headCallBack="getDMCimg" v-bind:imgType="1">
+      </DMCchooseImg>
+    </el-dialog>
+    <div class="btn-list">
+      <div class="btn-actions">
+        <button v-if="!addMsg.OrderId" class="save-Btn" @click="submitForm('addMsg')" :disabled="isSaving">
+          <i v-if="isSaving" class="el-icon-loading" style="margin-right: 4px;"></i>
+          {{ isSaving ? '' : $t('pub.saveBtn') }}
+        </button>
+        <button class="cancel-Btn" @click="goUrl('HotelManagement')">
+          {{ isDrawerMode ? '关闭' : $t('pub.cancelBtn') }}
+        </button>
+      </div>
+    </div>
+    <viewer :images="images" :options='imageOptions' @inited="inited" class="viewer" ref="viewer">
+      <img v-for="src in images" :src="src" :key="src">
+    </viewer>
+  </div>
+</template>
+<script>
+  import DMCchooseImg from "../../commonPage/DMCchooseImg.vue";
+  import { listManagerMixin } from "../../common/mixins/listManagerMixin.js";
+  export default {
+    mixins: [listManagerMixin],
+    props: {
+      itemId: {
+        type: [String, Number],
+        default: 0
+      },
+      details: {
+        type: Object,
+        default: () => {}
+      },
+      isDrawerMode: {
+        type: Boolean,
+        default: false
+      }
+    },
+    data() {
+      return {
+        activeTab: 'basic', // 默认激活基础资料标签页
+        isLoading: false, // 加载状态
+        loadError: null, // 加载错误信息
+        isSaving: false, // 保存状态
+        isRetrying: false, // 重试状态
+        imageOptions: {
+          navbar: false,
+          title: false
+        },
+        images: [],
+        //是否显示添加图片
+        addimg: false,
+        //上传的文件数组
+        HotelImageArray: [],
+        //删除的图片文件数组
+        DeleteImageArray: [],
+        //地接资源图片
+        imglistArry: [],
+        //地接图片搜索关键字
+        imgKeyword: "",
+        starslevel: "", //获取酒店星级
+        totalimg: "",
+        selecnum: 0,
+
+        imgBeforeFile: this.domainManager().ViittoFileUrl,
+        //下拉框默认值
+        SelectDefaultValue: 0,
+        //国家列表
+        CountryList: [],
+        //省份列表
+        ProvinceList: [],
+        //城市列表
+        CityList: [],
+        addMsg: {
+          price: 0,
+          GroupTypeNeedHouse: 0,
+          OneSex: 0,
+          TCID: 0,
+          CustomerType: 4,
+          GroupType: 1,
+          IndustryCategory: "",
+          ContactName: "",
+          ContactMobile: "",
+          CustomerId: "",
+          CustomerChildrenId: "",
+          DepartureCityId: 0,
+          ReturnArriveCityId: "",
+          IsIntermodal: "2",
+          IsReturnIntermodal: "2",
+          Unit_Price: 0,
+          TC_Price: 0,
+          ManNum: 0, // 成人数量
+          ChirdNum: 0, // 小孩数量
+          ChirdNoNeedBedNum: 0,
+          ChirdNeedBedNum: 0,
+          BabyNum: 0,
+          OldPeopleNum: 0,
+          SingleRoomNum: 0,
+
+          PreferPrice: null,//	应收总金额
+
+          LessPrice: 0,
+          LessAvgPrice: 0,
+          YSeatNum: 0,
+          ESeatNum: 0,
+          FSeatNum: 0,
+          Commission: 0,
+          ClientSource: 0,
+          BrandId: 0,
+          TradeWay: "2",
+          PlatformAccount: "",
+          PlatformOrder: "",
+          GuestNum: 0,
+          IsChildrenTour: 0,
+          IsBirdDiscount: 0,
+          PredictRoomNum: 0,
+          BigRoomNum: 0,
+          TripleRoomNum: 0,
+          TradeDate: "",
+          CostType: "",
+          Remarks: "",
+          VisaNum: 0,
+          SafeNum: 0,
+          AirticketNum: 0,
+          ScenicRefundArr: [],
+          ScenicList: [], //可退景点人数
+          AirTicketIds:"",
+          GoCityTime: "",
+          BackCityTime: "",
+          CommissionSharePeople: 0,
+          CommissionShareMoney: 0,
+          OrderForm: "1",
+          SonControlID: "-1",
+          IsShowMessagesMoney: "2",
+          QuotationUrl: "", //单团附件
+          GatherAddress: "",
+          LureEmpId: 0, //引流id
+          CRMGuestId: 0, //客人ID
+          CouponAllotIds: '',
+          LuggageNum: '', //行李数量
+
+          OrderId: 0,//	订单号
+          Meet: null,//	成本
+          Remarks: '',//	订单备注
+          Title: '',//	团名称
+          StartDate: '',//	出游时间
+          Name: '',//	预订人
+          EName: '',//	预订人（英文名）
+          Sex: null,//	性别，1-男2女
+          Mobile: '',//	联系手机号
+          DisplaySupplierId: null,
+          SupplierId: null,//	供应商id
+          SupplierName: '',//	供应商
+          Tel: '',//	供应商联系电话
+          Contact: '',//	供应商联系人
+          CompanyName: '',//	供应商（公司名称）
+          DutyParagraph: '',//	营业执照号		
+          CompanyPhone: '',//	电话		
+          OpeningBank: '',//	开户行		
+          BankNo: '',//	开户账号		
+          AppointOPList: [],//	op 格式：([1,2,3])
+          GuestList: [],//	旅客名单		
+          FinalPriceTips: '',//	尾款提醒设置	
+
+          DayNum: null,//	行程天数
+          PriceTeamType: null,//	团类型
+          WordPath: null,//附件
+        },
+        GuestObj: {
+          Birthday: '',//	生日	
+          Name: '',//	名称	
+          IdCard: '',//	身份证号	
+          PassportNo: '',//	护照号
+          PassportIssued: '',//	护照签发日期	
+          PassportExpiry: '',//	护照有效期	
+          Tel: '',//	联系电话		
+        },
+        uploadType: "", //上传文件类型
+        baseList: [], //澡盆，婴儿床，连通房
+        vatList: [], //VAT配置
+        starList: [], //星级
+        bjfsList: [], //报价方式
+        configDetailsList: [], //酒店
+        rules: {
+          Title: [{
+            required: true,
+            message: '请输入团标题',
+            trigger: "blur"
+          }],
+          DayNum: [{
+            required: true,
+            message: '请输入行程天数',
+            trigger: "blur"
+          }],
+          StartDate: [{
+            required: true,
+            message: '请选择出游时间',
+            trigger: "change"
+          }],
+          PriceTeamType: [{
+            required: true,
+            message: '请选择团类型',
+            trigger: "change"
+          }],
+          DisplaySupplierId: [{
+            required: true,
+            message: '请选择或输入供应商',
+            trigger: "change"
+          }],
+          Contact: [{
+            required: true,
+            message: '请输入供应商联系人',
+            trigger: "blur"
+          }],
+          Tel: [{
+            required: true,
+            message: '请输入供应商联系电话',
+            trigger: "blur"
+          }],
+          Meet: [{
+            required: true,
+            message: '请输入成本',
+            trigger: "blur"
+          }],
+          PreferPrice: [{
+            required: true,
+            message: '请输入应收总金额',
+            trigger: "blur"
+          }],
+          Name: [{
+            required: true,
+            message: '请输入预订人名称',
+            trigger: "blur"
+          }],
+          ContactName: [{
+            required: true,
+            message: '请输入联系人名称',
+            trigger: "blur"
+          }],
+          EName: [{
+            required: true,
+            message: '请输入预订人名称(英文名)',
+            trigger: "blur"
+          }],
+          Name2: [{
+            required: true,
+            message: '请输入旅客名称',
+            trigger: "blur"
+          }],
+          Birthday: [{
+            required: true,
+            message: '请选择生日',
+            trigger: "change"
+          }],
+          Tel2: [{
+            required: true,
+            message: '请输入旅客名称',
+            trigger: "blur"
+          }],
+          ManNum: [{
+            required: true,
+            message: this.$t('objFill.v101.myOrdersAllType.qingtianxcrrs'),
+            trigger: "blur",
+          }, ],
+          ChirdNeedBedNum: [{
+            required: true,
+            message: this.$t('objFill.v101.myOrdersAllType.qingtxetzcrs'),
+            trigger: "blur",
+          }, ],
+          BabyNum: [{
+            required: true,
+            message: this.$t('objFill.v101.myOrdersAllType.qingtxyers'),
+            trigger: "blur",
+          }, ],
+          OldPeopleNum: [{
+            required: true,
+            message: this.$t('objFill.v101.myOrdersAllType.qingtxlrrs'),
+            trigger: "blur",
+          }, ],
+          ChirdNoNeedBedNum: [{
+            required: true,
+            message: this.$t('objFill.v101.myOrdersAllType.qiingtxetbzcrs'),
+            trigger: "blur",
+          }, ],
+        },
+        CSloading: false,
+        RoomTypeList: [],//房型
+        RTloading: false,
+        SupplierList: [],//供应商
+        SPloading: false,
+        employeeMsg: { // 员工
+          GroupId: '',
+          BranchId: -1,
+          DepartmentId: 0,
+          PostId: 0,
+          IsLeave: 0,
+        },
+        TeamTypeList:[
+          {
+            label: '定制团',
+            value: 1
+          },
+          {
+            label: '外丢团',
+            value: 8
+          }
+
+        ]
+      };
+    },
+    components: {
+      DMCchooseImg: DMCchooseImg
+    },
+    methods: {
+      async getRoomType(query){
+        if (query !== '') {
+          this.RTloading = true
+          await this.apipost(
+            "ticketcouponsticket_get_GetList",
+            {
+              TicketName: query,
+              CouponsId: this.addMsg.CouponsId,
+            },
+            response => {
+              this.RTloading = false
+              if (response.data.resultCode == 1) {
+                this.RoomTypeList = response.data.data
+              } else {
+                this.Error(response.data.message)
+              }
+            },
+            error => {
+              this.RTloading = false
+            }
+          )
+        }else{
+          this.RoomTypeList = []
+        }
+      },
+      async getSupplier(query){
+        if (query !== '') {
+          this.SPloading = true
+          await this.apipost(
+            "supplier_post_GetAllList",
+            {
+              Type: 3,
+              Name: query,
+            },
+            response => {
+              this.SPloading = false
+              if (response.data.resultCode == 1) {
+                this.SupplierList = response.data.data
+              } else {
+                this.Error(response.data.message)
+              }
+            },
+            error => {
+              this.SPloading = false
+            }
+          )
+        }else{
+          this.RoomTypeList = []
+          this.addMsg.SupplierName = query
+        }
+      },
+      handleChange(val,type) {
+        let findIndex = -1
+        if(type==1){
+       
+        }else if(type==2){
+          
+        }else if(type==3){
+          findIndex = this.SupplierList.findIndex(item => item.ID === val)
+          if(findIndex != -1) {
+            this.addMsg.SupplierName = this.SupplierList[findIndex].Name;
+            this.addMsg.SupplierId = val;
+            this.addMsg.CompanyName = this.SupplierList[findIndex].CompanyName;
+            this.addMsg.Contact = this.SupplierList[findIndex].Contact;
+            this.addMsg.Tel = this.SupplierList[findIndex].Tel;
+            this.addMsg.DutyParagraph = this.SupplierList[findIndex].DutyParagraph;
+            this.addMsg.CompanyPhone = this.SupplierList[findIndex].CompanyPhone;
+            this.addMsg.OpeningBank = this.SupplierList[findIndex].OpeningBank;
+            this.addMsg.BankNo = this.SupplierList[findIndex].BankNo;
+          }else{
+            this.addMsg.SupplierName = val
+            this.addMsg.SupplierId = 0
+            this.addMsg.CompanyName = null
+            this.addMsg.Contact = null
+            this.addMsg.Tel = null
+            this.addMsg.DutyParagraph = null
+            this.addMsg.CompanyPhone = null
+            this.addMsg.OpeningBank = null
+            this.addMsg.BankNo = null
+          }
+        }
+        // console.log(val);
+      },
+      //上传图片
+      UploadImage(file) {
+        let newArr = [];
+        newArr.push(file.file);
+        let fileName = file.file.name;
+        var path = "/Upload/DMC/";
+        var that = this;
+        this.UploadSelfFileT(path, newArr, x => {
+          var sourceFileName = x.data.SourceFileName;
+          var imgUrl = that.domainManager().ViittoFileUrl + x.data.FilePath;
+          // this.addMsg.WordName = sourceFileName;
+          this.addMsg.WordPath = imgUrl;
+        })
+      },
+      //添加联系人
+      AddContract() {
+        this.addMsg.GuestList.push(JSON.parse(JSON.stringify(this.GuestObj)));
+      },
+      //删除联系人
+      deleteContract(index) {
+        this.addMsg.GuestList.splice(index, 1);
+      },
+      //删除图片
+      delImg(index) {
+        var item = this.HotelImageArray[index];
+        this.DeleteImageArray.push(item);
+        this.HotelImageArray.splice(index, 1);
+      },
+      inited(viewer) {
+        this.$viewer = viewer
+      },
+      showImg: function (src) {
+        let srcArr = src.split('?')
+        src = srcArr[0]
+        let isExsit = false
+        this.images.forEach(x => {
+          if (x === src)
+            isExsit = true
+        })
+        if (!isExsit) {
+          this.images.push(src)
+        } else {
+          this.$viewer.view(this.images.indexOf(src))
+        }
+        this.$viewer.show()
+      },
+      addImgOpen() {
+        this.addimg = true;
+        this.initimgList();
+      },
+      saveResource() {
+        // 防重复提交
+        if (this.isSaving) {
+          return;
+        }
+        this.isSaving = true;
+        this.apipost(
+          'sellorder_post_SetOrderInfo_02',
+          this.addMsg,
+          response => {
+            this.isSaving = false;
+            //修改添加接口
+            if (response.data.resultCode == 1) {
+              this.Success(this.$t('tips.saveYes'))
+              if (this.isDrawerMode) {
+                this.$emit('save-success')
+              } else {
+                this.goUrl("HotelManagement")
+              }
+            } else {
+              this.Error(response.data.message)
+            }
+          },
+          error => {
+            this.isSaving = false;
+            this.Error('保存失败，请检查网络连接');
+          }
+        )
+      },
+      selectImg(index) {
+        //选取弹窗图片
+        this.imglistArry[index].isShow = !this.imglistArry[index].isShow;
+        let num = 0;
+        if (this.imglistArry != null) {
+          this.imglistArry.forEach(x => {
+            if (x.isShow == true) {
+              num++;
+            }
+            this.selecnum = num;
+          });
+        }
+      },
+      initDataDetails() {
+        // 验证酒店ID
+        if (!this.addMsg.OrderId || this.addMsg.OrderId <= 0) {
+          this.loadError = '无效的邮轮ID';
+          return;
+        }
+        // 设置加载状态
+        this.isLoading = true;
+        this.loadError = null;
+        var msg = {
+          hotelID: this.addMsg.OrderId
+        };
+        var _self = this;
+        this.apipost(
+          "hotel_post_GetAll",
+          msg,
+          res => {
+            _self.isLoading = false;
+            _self.isRetrying = false;
+            if (res.data.resultCode == 1) {
+              _self.addMsg = res.data.data;
+              if (_self.addMsg.Province > 0) {
+                this.GetSubAreaList(_self.addMsg.Province, 'city');
+              }
+            } else {
+              _self.loadError = res.data.message || '加载酒店信息失败';
+              _self.Error(res.data.message);
+            }
+          },
+          error => {
+            _self.isLoading = false;
+            _self.isRetrying = false;
+            _self.loadError = '网络请求失败，请检查网络连接';
+            _self.Error('网络请求失败，请检查网络连接');
+          }
+        );
+      },
+      // 重试加载方法
+      retryLoad() {
+        this.isRetrying = true;
+        this.initDataDetails();
+      },
+      goUrl(path) {
+        if (this.isDrawerMode) {
+          this.$emit('close')
+        } else {
+          this.$router.push({
+            path: path,
+            query: {
+              cache: true
+            }
+          })
+        }
+      },
+      validate(){
+        let msg = ''
+        // ||!this.addMsg.Name||this.addMsg.Name==''
+        if(msg==''&&(!this.addMsg.Title||this.addMsg.Title==''
+          ||!this.addMsg.DayNum||this.addMsg.DayNum==''
+          ||!this.addMsg.StartDate||this.addMsg.StartDate==''
+          ||!this.addMsg.Contact||this.addMsg.Contact==''
+          ||!this.addMsg.Tel||this.addMsg.Tel==''
+          ||!this.addMsg.Meet||this.addMsg.Meet==''
+          ||!this.addMsg.PreferPrice||this.addMsg.PreferPrice==''
+          ||this.addMsg.ManNum==''
+          ||this.addMsg.ChirdNum==''
+          ||this.addMsg.ChirdNoNeedBedNum==''
+          ||this.addMsg.ChirdNeedBedNum==''
+          ||this.addMsg.ContactName=='')){
+            msg = '基础资料请填入必填项'
+            this.activeTab = 'basic'
+        }else if(msg==''&&this.addMsg.ManNum==0){
+          msg = '成人数需大于0'
+          this.activeTab = 'basic'
+        }else if(this.addMsg.GuestList.length>0){
+          for(let i=0;i<this.addMsg.GuestList.length;i++){
+            let item = this.addMsg.GuestList[i]
+            if(msg==''&&(!item.Name||item.Name==''
+            ||!item.Birthday||item.Birthday==''
+            ||!item.Tel||item.Tel=='')){
+              msg = '旅客信息请填入必填项'
+              this.activeTab = 'contact'
+            }
+          }
+        }
+        return msg
+      },
+      submitForm(addMsg) {
+        //提交创建、修改表单
+        let msg = this.validate()
+        if(msg!='') return this.Error(msg)
+        let that = this;
+        
+        that.$refs[addMsg].validate(valid => {
+          if (valid) {
+            that.saveResource();
+          } else {
+            return false;
+          }
+        });
+      },
+      //选中的数组
+      checkImgList() {
+        if (this.imglistArry != null) {
+          this.imglistArry.forEach(x => {
+            if (x.isShow == true) {
+              var obj = this.$DMCUtils.DMCImageObj();
+              obj.Path = "/U" + this.$commonUtils.getCaption(x.Path, "Upload");
+              obj.ShowPath = x.Path;
+              obj.PicID = x.ID;
+              this.HotelImageArray.push(obj);
+            }
+            x.isShow = false;
+            this.selecnum = 0;
+          });
+        }
+        this.addimg = false;
+      },
+      closeDMCchooseImg() {
+        this.addimg = false;
+      },
+      getDMCimg(imgArr) {
+        imgArr.forEach(imgItem => {
+          var obj = this.$DMCUtils.DMCImageObj();
+          obj.ID = 0;
+          obj.Path = this.$commonUtils.removeDomain(imgItem.Path);
+          obj.PicID = imgItem.ID;
+          obj.ShowPath = imgItem.Path + "?x-oss-process=image/resize,l_140";
+          this.HotelImageArray.push(obj);
+        });
+      },
+      //获取国家
+      GetCounrty() {
+        var that = this;
+        this.apipost(
+          "dict_post_Destination_GetCountry", {},
+          res => {
+            var tempCountryArray = res.data.data;
+            if (tempCountryArray && tempCountryArray.length > 0) {
+              that.GetSubAreaList(tempCountryArray[0].ID, 'province')
+            }
+          }
+        );
+      },
+      //获取省份和城市
+      GetSubAreaList(ID, typeStr) {
+        let msg = {
+          Id: ID
+        };
+        this.apipost(
+          "dict_post_Destination_GetChildList",
+          msg,
+          res => {
+            if (typeStr == 'province') {
+              this.ProvinceList = res.data.data;
+            } else if (typeStr == 'city') {
+              this.CityList = res.data.data;
+            }
+          },
+          err => {}
+        );
+      },
+      //获取酒店配置
+      getHotelConfig() {
+        this.apipost(
+          "hotel_post_GetNewHotelConfig", {},
+          res => {
+            if (res.data.resultCode == 1) {
+              var tempData = res.data.data;
+              if (tempData && tempData.length > 0) {
+                tempData.forEach(item => {
+                  if (item.DicKey == 'Hotel_ZLY') {
+                    this.baseList = item.SubList
+                  } else if (item.DicKey == "Hotel_VAT") {
+                    this.vatList = item.SubList;
+                  } else if (item.DicKey == "Hotel_Star") {
+                    this.starList = item.SubList;
+                  } else if (item.DicKey == "Hotel_BJFS") {
+                    this.bjfsList = item.SubList;
+                  } else if (item.DicKey == "Hotel_Info") {
+                    this.configDetailsList = item.SubList;
+                    if (this.addMsg.OrderId == 0) {
+                      this.addMsg.HotelDetailsList = item.SubList;
+                    }
+                  }
+                })
+              }
+            }
+          });
+      }
+    },
+    created() {
+      // this.GetCounrty();
+      // this.getHotelConfig();
+    },
+    mounted() {
+      // 从 props 或 route 获取 ID
+      if (this.details) {
+        this.addMsg.OrderId = this.details.OrderId
+      }
+    },
+    watch: {
+      details: {
+        deep: true,
+        immediate: true,
+        handler(newVal) {
+          if (newVal && newVal.OrderId !== this.addMsg.OrderId) {
+            let t = newVal.DetailList[0]
+            let s = newVal.SupplierModel
+            this.RoomTypeList.push({
+              Id: t.TicketId,
+              TicketName: t.TicketName,
+            })
+            this.SupplierList.push({
+              ID: s.SupplierId,
+              Name: s.SupplierName,
+            })
+            
+            setTimeout(() => {
+              this.addMsg = {
+                OrderId: newVal.OrderId,//	订单号
+                PreferPrice: newVal.PreferPrice,//	应收总金额
+                Meet: newVal.Meet,//	成本
+                Remarks: newVal.Remarks,//	订单备注
+                Title: newVal.Title,//	
+                StartDate: newVal.StartDate,//	出游时间
+                Name: newVal.Name,//	预订人
+                EName: newVal.EName,//	预订人（英文名）
+                Sex: newVal.Sex,//	性别，1-男2女
+                Mobile: newVal.Mobile,//	联系手机号
+                DisplaySupplierId: s.SupplierId,
+                SupplierId: s.SupplierId,//	供应商id
+                SupplierName: s.SupplierName,//	供应商
+                Tel: newVal.Tel,//	供应商联系电话
+                Contact: newVal.Contact,//	供应商联系人
+                CompanyName: s.CompanyName,//	供应商（公司名称）
+                DutyParagraph: s.DutyParagraph,//	营业执照号		
+                CompanyPhone: s.CompanyPhone,//	电话		
+                OpeningBank: s.OpeningBank,//	开户行		
+                BankNo: s.BankNo,//	开户账号		
+                AppointOPList: newVal.AppointOPList,//	op 格式：([1,2,3])
+                GuestList: newVal.OrderGuestList,//	旅客名单		
+                FinalPriceTips: newVal.FinalPriceTips,//	尾款提醒设置
+                
+                DayNum: newVal.DayNum,//	行程天数
+                PriceTeamType: newVal.PriceTeamType,//	团类型
+                WordPath: newVal.WordPath,//附件
+              };
+            },1000)
+          }
+        }
+      }
+    }
+  };
+
+</script>

src/components/SalesModule/components/pinkDrawer.vue

+<template>
+    <div>
+        <el-drawer v-if="drawerConfig" :visible.sync="drawerVisible" v-bind="drawerConfig" @close="handleDrawerClose">
+            <slot name="drawer" :visible="drawerVisible" :data="drawerData" :close="handleDrawerClose">
+            </slot>
+        </el-drawer>
+    </div>
+</template>
+<script>
+export default {
+    props: {
+        // 抽屉配置
+        drawerConfig: {
+            type: Object,
+            default: null
+        },
+    },
+    data() {
+        return {
+            // 抽屉状态
+            drawerVisible: false,
+            drawerData: null,
+        }
+    },
+    mounted() {
+        
+    },
+    methods: {
+        // 抽屉相关方法
+        openDrawer(data = null) {
+            this.drawerData = data;
+            this.drawerVisible = true;
+        },
+
+        handleDrawerClose() {
+            this.drawerVisible = false;
+            this.drawerData = null;
+            this.$emit('drawer-close');
+        },
+    },
+
+
+
+}
+</script>
\ No newline at end of file

src/components/SalesModule/groupTourOrder.vue

 <style>
   @import "../../assets/css/newTravelManager.css";
-
+  @import '../common/BaseListManager.css';
   .color_red_order {
     color: #e95252 !important;
   }
@@ -1647,6 +1647,7 @@
           </el-popover>
         </li>
         <li>
+          <input v-if="userInfo.SimpleEasy==1" type="button" class="hollowFixedBtn" :value="$t('pub.addBtn')" @click="addOrders"/>
           <input type="button" class="hollowFixedBtn" :value="$t('pub.searchBtn')" @click="
               getList();
               resetPageIndex();
@@ -2685,6 +2686,14 @@
         </button>
       </div>
     </el-dialog> -->
+    <pinkDrawer ref="addOrders"
+    :drawer-config="drawerConfig">
+      <template slot="drawer" slot-scope="{ visible, close }">
+        <addOrder v-if="visible&&showType==1" :isDrawerMode="true" 
+        :details="selectedSpotData"
+        @close="close" @save-success="handleSaveSuccess"></addOrder>
+      </template>
+    </pinkDrawer>
   </div>
 </template>
 
@@ -2698,9 +2707,14 @@
   import orderRemark from "../orderCommon/order-remark.vue"; //订单备注
   import PriceDetail from '../orderCommon/PriceDetail.vue';
   import DateLimit from '../public/DateLimit.vue';
+  import pinkDrawer from './components/pinkDrawer.vue';
+  import addOrder from './components/addOrder.vue';
+  import addConfig from "./components/addConfig.js";
   export default {
     data() {
       return {
+        selectedSpotData: null,
+        showType: 1,
         pickerBeginDateAfter: {
           disabledDate: time => {
             let startTime = new Date(this.msg.QStartDate);
@@ -3046,7 +3060,9 @@
       commissionDialog,
       orderRemark: orderRemark,
       PriceDetail,
-      DateLimit
+      DateLimit,
+      pinkDrawer,
+      addOrder,
     },
     filters: {
       priceFormat(value) {
@@ -3062,12 +3078,26 @@
         return x1 + x2;
       },
     },
-    watch: {
+    watch: {  
       SQcheckdAll(val) {
         this.checkdAll(val);
       },
     },
+    computed: {
+      // 抽屉配置
+      drawerConfig() {
+        return addConfig.drawerConfig;
+      },
+    },
     methods: {
+      addOrders() {
+        this.$refs.addOrders.openDrawer();
+      },
+      handleSaveSuccess() {
+        this.$refs.addOrders.handleDrawerClose();
+        this.getList();
+        this.$message.success('保存成功');
+      },
       gotoProduct(item) {
         var path = "productQuery";
         if (item.teamType == 4) {

src/components/cruiseShip/components/editOP.vue

@@ -36,6 +36,7 @@
     flex-direction: column;
     border: none;
     box-shadow: none;
+    overflow: hidden;
   }
 
   .drawer-mode .hotel-tabs .el-tabs__header {
@@ -82,7 +83,6 @@
   }
 
   .drawer-mode .tab-content.hidden {
-    height: calc(100vh - 160px);
     overflow: hidden;
     display: flex;
     flex-direction: column;

src/components/cruiseShip/components/loss.vue

@@ -36,6 +36,7 @@
     flex-direction: column;
     border: none;
     box-shadow: none;
+    overflow: hidden;
   }
 
   .drawer-mode .hotel-tabs .el-tabs__header {
@@ -82,7 +83,6 @@
   }
 
   .drawer-mode .tab-content.hidden {
-    height: calc(100vh - 160px);
     overflow: hidden;
     display: flex;
     flex-direction: column;

src/components/cruiseShip/components/offset.vue

@@ -36,6 +36,7 @@
     flex-direction: column;
     border: none;
     box-shadow: none;
+    overflow: hidden;
   }
 
   .drawer-mode .hotel-tabs .el-tabs__header {
@@ -82,7 +83,6 @@
   }
 
   .drawer-mode .tab-content.hidden {
-    height: calc(100vh - 160px);
     overflow: hidden;
     display: flex;
     flex-direction: column;

src/components/cruiseShip/components/remarks.vue

@@ -36,6 +36,7 @@
     flex-direction: column;
     border: none;
     box-shadow: none;
+    overflow: hidden;
   }
 
   .drawer-mode .hotel-tabs .el-tabs__header {
@@ -82,7 +83,6 @@
   }
 
   .drawer-mode .tab-content.hidden {
-    height: calc(100vh - 160px);
     overflow: hidden;
     display: flex;
     flex-direction: column;

src/components/cruiseShip/components/totalAamount.vue

@@ -36,6 +36,7 @@
     flex-direction: column;
     border: none;
     box-shadow: none;
+    overflow: hidden;
   }
 
   .drawer-mode .hotel-tabs .el-tabs__header {
@@ -82,7 +83,6 @@
   }
 
   .drawer-mode .tab-content.hidden {
-    height: calc(100vh - 160px);
     overflow: hidden;
     display: flex;
     flex-direction: column;

src/components/cruiseShip/list/cruiseShipInfo.vue

@@ -36,6 +36,7 @@
     flex-direction: column;
     border: none;
     box-shadow: none;
+    overflow: hidden;
   }
 
   .drawer-mode .hotel-tabs .el-tabs__header {
@@ -82,7 +83,6 @@
   }
 
   .drawer-mode .tab-content.hidden {
-    height: calc(100vh - 160px);
     overflow: hidden;
     display: flex;
     flex-direction: column;