qukaidi 3 éve
szülő
commit
d3af2f58d4

+ 51 - 208
src/components/fee-info/main.vue

@@ -1,272 +1,115 @@
 <template>
   <div>
-    <containerTitle title="费用明细"></containerTitle>
-    <basic-container>
-      <avue-crud
-        ref="feeCrud"
-        :data="feeData"
-        :option="feeOption"
-        @saveColumn="saveColumn"
-        @resetColumn="resetColumn"
-        @selection-change="selectionChange"
-        :summary-method="summaryMethod"
-        :cell-style="cellStyle"
-      >
+    <trade-card title="费用明细">
+      <avue-crud ref="feeCrud" :data="feeData" :option="feeOption" @saveColumn="saveColumn" @resetColumn="resetColumn"
+        @selection-change="selectionChange" :summary-method="summaryMethod" :cell-style="cellStyle">
         <template slot="menuLeft">
           <el-tabs v-model="activeName" @tab-click="tabHandle">
-            <el-tab-pane
-              label="应收"
-              name="first"
-              :key="'first'"
-              v-if="tabShow == 1 || tabShow == 2"
-            >
+            <el-tab-pane label="应收" name="first" :key="'first'" v-if="tabShow == 1 || tabShow == 2">
             </el-tab-pane>
-            <el-tab-pane
-              label="应付"
-              name="second"
-              :key="'second'"
-              v-if="tabShow == 1 || tabShow == 3"
-            >
+            <el-tab-pane label="应付" name="second" :key="'second'" v-if="tabShow == 1 || tabShow == 3">
             </el-tab-pane>
           </el-tabs>
-          <el-button
-            type="primary"
-            icon="el-icon-plus"
-            size="small"
-            @click.stop="rowAdd"
-            :loading="buttonLoading"
-            :disabled="disabled"
-            >录入明细</el-button
-          >
-          <el-button
-            type="warning"
-            size="small"
-            @click.stop="billingDetails('收费')"
-            :loading="buttonLoading"
-            :disabled="
-              (financeDisabled && disabled) || selectionList.length == 0
-            "
-            v-if="selectTab === 1"
-            >生成账单</el-button
-          >
-          <el-button
-            type="warning"
-            size="small"
-            @click.stop="billingDetails('申请')"
-            :loading="buttonLoading"
-            :disabled="
-              (financeDisabled && disabled) || selectionList.length == 0
-            "
-            v-if="selectTab === 2"
-            >申请付费</el-button
-          >
+          <el-button type="primary" icon="el-icon-plus" size="small" @click.stop="rowAdd" :loading="buttonLoading"
+            :disabled="disabled">录入明细</el-button>
+          <el-button type="warning" size="small" @click.stop="billingDetails('收费')" :loading="buttonLoading" :disabled="
+            (financeDisabled && disabled) || selectionList.length == 0
+          " v-if="selectTab === 1">生成账单</el-button>
+          <el-button type="warning" size="small" @click.stop="billingDetails('申请')" :loading="buttonLoading" :disabled="
+            (financeDisabled && disabled) || selectionList.length == 0
+          " v-if="selectTab === 2">申请付费</el-button>
         </template>
         <template slot="menu" slot-scope="{ row, index }">
-          <el-button
-            size="small"
-            icon="el-icon-edit"
-            type="text"
-            @click="rowCell(row, index)"
-            :disabled="disabled"
-            >{{ row.$cellEdit ? "保存" : "修改" }}</el-button
-          >
-          <el-button
-            size="small"
-            icon="el-icon-delete"
-            type="text"
-            @click="rowDel(row, index)"
-            :disabled="disabled"
-            >删 除</el-button
-          >
+          <el-button size="small" icon="el-icon-edit" type="text" @click="rowCell(row, index)" :disabled="disabled">{{
+              row.$cellEdit ? "保存" : "修改"
+          }}</el-button>
+          <el-button size="small" icon="el-icon-delete" type="text" @click="rowDel(row, index)" :disabled="disabled">删 除
+          </el-button>
         </template>
         <template slot="headerSerial">
-          <el-button
-            type="primary"
-            icon="el-icon-plus"
-            size="mini"
-            @click.stop="addRow"
-            :disabled="disabled"
-            circle
-          ></el-button>
+          <el-button type="primary" icon="el-icon-plus" size="mini" @click.stop="addRow" :disabled="disabled" circle>
+          </el-button>
         </template>
         <template slot="corpId" slot-scope="{ row, index }">
-          <span v-if="row.$cellEdit && !inCropId" class="required_fields"
-            >*</span
-          >
-          <crop-select
-            ref="corp"
-            style="width: 90% !important;display: inline-block"
-            v-if="row.$cellEdit"
-            v-model="row.corpId"
-            :cropIndex="index"
-            @getCorpData="getCorpData"
-            corpType="KG"
-          ></crop-select>
+          <span v-if="row.$cellEdit && !inCropId" class="required_fields">*</span>
+          <crop-select ref="corp" style="width: 90% !important;display: inline-block" v-if="row.$cellEdit"
+            v-model="row.corpId" :cropIndex="index" @getCorpData="getCorpData" corpType="KG"></crop-select>
           <span v-else>{{ row.corpName }}</span>
         </template>
         <template slot="feeName" slot-scope="{ row }">
           <span v-if="row.$cellEdit" class="required_fields">*</span>
-          <breakdown-select
-            v-if="row.$cellEdit"
-            v-model="row.itemId"
-            @selectValue="value => selectValue(value, row)"
-            :configuration="breakConfiguration"
-          >
+          <breakdown-select v-if="row.$cellEdit" v-model="row.itemId" @selectValue="value => selectValue(value, row)"
+            :configuration="breakConfiguration">
           </breakdown-select>
           <span v-else>{{ row.feeName }}</span>
         </template>
         <template slot="billNo" slot-scope="{ row }">
-          <el-select
-            v-if="row.$cellEdit"
-            v-model="row.billNo"
-            size="small"
-            filterable
-            allow-create
-            default-first-option
-            clearable
-          >
-            <el-option
-              v-for="(item, index) in billNoList"
-              :key="index"
-              :label="item"
-              :value="item"
-            >
+          <el-select v-if="row.$cellEdit" v-model="row.billNo" size="small" filterable allow-create default-first-option
+            clearable>
+            <el-option v-for="(item, index) in billNoList" :key="index" :label="item" :value="item">
             </el-option>
           </el-select>
           <span v-else>{{ row.billNo }}</span>
         </template>
         <template slot="price" slot-scope="{ row }">
-          <el-input-number
-            v-if="row.$cellEdit"
-            v-model="row.price"
-            placeholder="请输入"
-            size="small"
-            :controls="false"
-            :precision="2"
-            @input="countChange(row)"
-            style="width: 100%"
-          ></el-input-number>
+          <el-input-number v-if="row.$cellEdit" v-model="row.price" placeholder="请输入" size="small" :controls="false"
+            :precision="2" @input="countChange(row)" style="width: 100%"></el-input-number>
           <span v-else>{{ row.price | micrometerFormat }}</span>
         </template>
         <template slot="quantity" slot-scope="{ row }">
-          <el-input-number
-            v-if="row.$cellEdit"
-            v-model="row.quantity"
-            size="small"
-            placeholder="请输入"
-            :controls="false"
-            :precision="0"
-            @input="countChange(row)"
-            style="width: 100%"
-          ></el-input-number>
+          <el-input-number v-if="row.$cellEdit" v-model="row.quantity" size="small" placeholder="请输入" :controls="false"
+            :precision="0" @input="countChange(row)" style="width: 100%"></el-input-number>
           <span v-else>{{ row.quantity | decimalFormat }}</span>
         </template>
         <template slot="amount" slot-scope="{ row }">
           <span>{{ row.amount | micrometerFormat }}</span>
         </template>
         <template slot="exchangeRate" slot-scope="{ row }">
-          <el-input-number
-            v-if="row.$cellEdit"
-            v-model="row.exchangeRate"
-            size="small"
-            :controls="false"
-            :precision="6"
-            @change="rateChange(row)"
-            style="width: 100%"
-            placeholder="请输入"
-          ></el-input-number>
+          <el-input-number v-if="row.$cellEdit" v-model="row.exchangeRate" size="small" :controls="false" :precision="6"
+            @change="rateChange(row)" style="width: 100%" placeholder="请输入"></el-input-number>
           <span v-else>{{ row.exchangeRate }}</span>
         </template>
         <template slot="currency" slot-scope="{ row }">
-          <el-select
-            v-if="row.$cellEdit"
-            v-model="row.currency"
-            filterable
-            allow-create
-            default-first-option
-            placeholder="请选择"
-            size="small"
-            @change="currencyChange(row)"
-          >
-            <el-option
-              v-for="(item, index) in currencyList"
-              :key="index"
-              :label="item.dictValue"
-              :value="item.dictValue"
-            >
+          <el-select v-if="row.$cellEdit" v-model="row.currency" filterable allow-create default-first-option
+            placeholder="请选择" size="small" @change="currencyChange(row)">
+            <el-option v-for="(item, index) in currencyList" :key="index" :label="item.dictValue"
+              :value="item.dictValue">
             </el-option>
           </el-select>
           <span v-else>{{ row.currency }}</span>
         </template>
         <template slot="unit" slot-scope="{ row }">
-          <el-select
-            v-if="row.$cellEdit"
-            v-model="row.unit"
-            filterable
-            placeholder="请选择"
-            size="small"
-          >
-            <el-option
-              v-for="(item, index) in unitList"
-              :key="index"
-              :label="item.dictValue"
-              :value="item.dictValue"
-            >
+          <el-select v-if="row.$cellEdit" v-model="row.unit" filterable placeholder="请选择" size="small">
+            <el-option v-for="(item, index) in unitList" :key="index" :label="item.dictValue" :value="item.dictValue">
             </el-option>
           </el-select>
           <span v-else>{{ row.unit }}</span>
         </template>
       </avue-crud>
-    </basic-container>
-    <el-dialog
-      title="导入费用"
-      append-to-body
-      :visible.sync="feeDialog"
-      top="5vh"
-      width="60%"
-      :close-on-click-modal="false"
-      @closed="feeClose"
-      class="el-dialogDeep"
-      v-dialog-drag
-    >
+    </trade-card>
+
+    <el-dialog title="导入费用" append-to-body :visible.sync="feeDialog" top="5vh" width="60%" :close-on-click-modal="false"
+      @closed="feeClose" class="el-dialogDeep" v-dialog-drag>
       <el-row style="height: 0;">
         <el-col :span="5">
           <div style="margin-top:45px">
             <el-scrollbar>
               <basic-container>
-                <avue-tree
-                  :option="treeOption"
-                  :data="treeData"
-                  @node-click="nodeClick"
-                />
+                <avue-tree :option="treeOption" :data="treeData" @node-click="nodeClick" />
               </basic-container>
             </el-scrollbar>
           </div>
         </el-col>
         <el-col :span="19">
-          <avue-crud
-            :option="option"
-            :table-loading="loading"
-            :data="data"
-            ref="crud"
-            @refresh-change="refreshChange"
-            @selection-change="selectionChange"
-            @current-change="currentChange"
-            @size-change="sizeChange"
-            :page.sync="page"
-            @on-load="onLoad"
-            :cell-style="cellStyle"
-          >
+          <avue-crud :option="option" :table-loading="loading" :data="data" ref="crud" @refresh-change="refreshChange"
+            @selection-change="selectionChange" @current-change="currentChange" @size-change="sizeChange"
+            :page.sync="page" @on-load="onLoad" :cell-style="cellStyle">
           </avue-crud>
         </el-col>
       </el-row>
       <div class="dialogButton">
         <el-button @click="feeDialog = false">取 消</el-button>
-        <el-button
-          type="primary"
-          @click="importData"
-          :disabled="this.selectionList.length == 0"
-        >
+        <el-button type="primary" @click="importData" :disabled="this.selectionList.length == 0">
           导入
         </el-button>
       </div>
@@ -304,7 +147,7 @@ export default {
       treeOption: {
         nodeKey: "id",
         lazy: true,
-        treeLoad: function(node, resolve) {
+        treeLoad: function (node, resolve) {
           const parentId = node.level === 0 ? 0 : node.data.id;
           getDeptLazyTree(parentId).then(res => {
             resolve(
@@ -456,7 +299,7 @@ export default {
     ApplyPayment
   },
   watch: {
-    disabled: function() {
+    disabled: function () {
       this.$refs.feeCrud.refreshTable();
     },
     orderFeesList(newVla, oldVal) {

+ 128 - 0
src/components/trade-card/main.vue

@@ -0,0 +1,128 @@
+<template>
+  <div>
+    <div class="container">
+      <div class="title">
+        <div class="redcolumn"></div>
+        <div class="container-title">{{ title }}</div>
+      </div>
+      <div class="container-foot" @click="show = !show">
+        <div v-show="show" style="height: 20px">
+          <span><i class="el-icon-arrow-up" /></span>
+        </div>
+        <div v-show="!show" style="height: 20px">
+          <span><i class="el-icon-arrow-down" /></span>
+        </div>
+      </div>
+    </div>
+    <div class="basic-container" :style="styleName" :class="{ 'basic-container--block': block }">
+      <el-card class="basic-container__card">
+        <el-collapse-transition>
+          <div v-show="show">
+            <slot></slot>
+          </div>
+        </el-collapse-transition>
+      </el-card>
+    </div>
+  </div>
+
+</template>
+
+<script>
+export default {
+  name: "basicContainer",
+  data() {
+    return {
+      show: true,
+      showSpan: false
+    };
+  },
+  props: {
+    radius: {
+      type: [String, Number],
+      default: 10
+    },
+    background: {
+      type: String
+    },
+    block: {
+      type: Boolean,
+      default: false
+    },
+    showBtn: {
+      type: Boolean,
+      default: false
+    },
+    title: {
+      type: String
+    }
+  },
+  methods: {
+  },
+  computed: {
+    styleName() {
+      return {
+        borderRadius: this.setPx(this.radius),
+        background: this.background
+      };
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+.container {
+  display: flex;
+  justify-content: space-between;
+  margin-left: 10px;
+  margin-right: 10px;
+  background-color: inherit;
+  height: 18px;
+  // padding-bottom: 12px;
+  vertical-align: middle;
+
+  .title {
+    display: flex;
+
+    .redcolumn {
+      width: 4px;
+      height: 13px;
+      background-color: #d6000f;
+      margin: 3px 4px 0 0;
+    }
+
+    .container-title {
+      font-size: 12px;
+      line-height: 18px;
+      font-family: PingFangSC-Semibold, PingFang SC;
+      font-weight: 600;
+      color: #323233;
+    }
+  }
+
+  .container-foot {
+    font-size: 16px;
+    font-weight: 1000;
+  }
+}
+
+.basic-container {
+  padding: 5px 6px;
+  box-sizing: border-box;
+
+  &--block {
+    height: 100%;
+
+    .basic-container__card {
+      height: 100%;
+    }
+  }
+
+  &__card {
+    width: 100%;
+  }
+
+  &:first-child {
+    padding-top: 6px;
+  }
+}
+</style>

+ 0 - 11
src/views/businessManagement/salesOrder/index.vue

@@ -657,15 +657,4 @@ export default {
 </script>
 
 <style scoped>
-/deep/ .el-table__expanded-cell .el-table__header-wrapper .cell {
-  font-size: 8px !important;
-}
-
-/deep/ .el-table__body-wrapper .cell {
-  font-size: 8px;
-}
-
-/*/deep/ .el-table__expanded-cell {*/
-/*  padding-left: 90px;*/
-/*}*/
 </style>

+ 118 - 436
src/views/exportTrade/customerInquiry/detailsPage.vue

@@ -2,593 +2,273 @@
   <div class="borderless" v-loading="pageLoading">
     <div class="customer-head">
       <div class="customer-back">
-        <el-button
-          type="danger"
-          style="border: none;background: none;color: red"
-          icon="el-icon-arrow-left"
-          @click="backToList"
-          >返回列表
+        <el-button type="danger" style="border: none;background: none;color: red" icon="el-icon-arrow-left"
+          @click="backToList">返回列表
         </el-button>
       </div>
       <div class="add-customer-btn" v-if="showBut">
-        <el-button
-          type="primary"
-          size="small"
-          v-if="detailData.status == 1"
-          class="el-button--small-yh "
-          @click.stop="openEdit"
-          >编辑
+        <el-button type="primary" size="small" v-if="detailData.status == 1" class="el-button--small-yh "
+          @click.stop="openEdit">编辑
         </el-button>
-        <el-button type="info" @click="saveSell" size="small"
-          >生成销售单</el-button
-        >
-        <el-button
-          type="success"
-          :disabled="!form.id"
-          size="small"
-          @click="copyDoc"
-        >
+        <el-button type="info" @click="saveSell" size="small">生成销售单</el-button>
+        <el-button type="success" :disabled="!form.id" size="small" @click="copyDoc">
           复制单据
         </el-button>
-        <el-button
-          type="primary"
-          :disabled="disabled"
-          @click="editCustomer"
-          :loading="subLoading"
-          v-if="detailData.status != 1"
-          size="small"
-          >保存数据
+        <el-button type="primary" :disabled="disabled" @click="editCustomer" :loading="subLoading"
+          v-if="detailData.status != 1" size="small">保存数据
         </el-button>
       </div>
     </div>
     <div class="customer-main">
-      <containerTitle title="基础信息"></containerTitle>
-      <basic-container :showBtn="true">
-        <avue-form
-          ref="form"
-          class="trading-form"
-          v-model="form"
-          :option="option"
-        >
+      <trade-card title="基础信息">
+        <avue-form ref="form" class="trading-form" v-model="form" :option="option">
           <template slot="portOfLoad">
-            <port-info
-              v-model="form.portOfLoad"
-              :disabled="detailData.status == 1"
-            />
+            <port-info v-model="form.portOfLoad" :disabled="detailData.status == 1" />
           </template>
           <template slot="portOfDestination">
-            <port-info
-              v-model="form.portOfDestination"
-              :disabled="detailData.status == 1"
-            />
+            <port-info v-model="form.portOfDestination" :disabled="detailData.status == 1" />
           </template>
           <template slot="corpId">
-            <crop-select
-              v-model="form.corpId"
-              @getCorpData="getCorpData"
-              corpType="KH"
-              :disabled="detailData.status == 1"
-            ></crop-select>
+            <crop-select v-model="form.corpId" @getCorpData="getCorpData" corpType="KH"
+              :disabled="detailData.status == 1"></crop-select>
           </template>
           <template slot="corpId2">
-            <details-select
-              :value="form.clientMessage"
-              :obj="form"
-              @detailsDate="detailsDate"
-              :disabled="detailData.status == 1"
-            ></details-select>
+            <details-select :value="form.clientMessage" :obj="form" @detailsDate="detailsDate"
+              :disabled="detailData.status == 1"></details-select>
           </template>
           <template slot="corpAttn">
-            <el-select
-              size="small"
-              v-model="form.corpAttn"
-              placeholder="请选择"
-              @change="corpAttnChange"
-              clearable
-              :disabled="detailData.status == 1"
-            >
-              <el-option
-                v-for="item in corpsattns"
-                :key="item.id"
-                :label="item.cname"
-                :value="item.cname"
-              >
+            <el-select size="small" v-model="form.corpAttn" placeholder="请选择" @change="corpAttnChange" clearable
+              :disabled="detailData.status == 1">
+              <el-option v-for="item in corpsattns" :key="item.id" :label="item.cname" :value="item.cname">
               </el-option>
             </el-select>
           </template>
           <template slot="belongToCorpId">
-            <crop-select
-              v-model="form.belongToCorpId"
-              corpType="GS"
-              :disabled="detailData.status == 1"
-            ></crop-select>
+            <crop-select v-model="form.belongToCorpId" corpType="GS" :disabled="detailData.status == 1"></crop-select>
           </template>
           <template slot="priceTerms">
-            <el-select
-              size="small"
-              v-model="form.priceTerms"
-              placeholder="请选择"
-              @change="priceTermsChange"
-              clearable
-              :disabled="detailData.status == 1"
-            >
-              <el-option
-                v-for="item in priceTermsList"
-                :key="item.id"
-                :label="item.dictValue"
-                :value="item.dictValue"
-              >
+            <el-select size="small" v-model="form.priceTerms" placeholder="请选择" @change="priceTermsChange" clearable
+              :disabled="detailData.status == 1">
+              <el-option v-for="item in priceTermsList" :key="item.id" :label="item.dictValue" :value="item.dictValue">
               </el-option>
             </el-select>
           </template>
           <template slot="paymentType">
-            <el-select
-              size="small"
-              v-model="form.paymentType"
-              placeholder="请选择"
-              @change="paymentTypeChange"
-              clearable
-              :disabled="detailData.status == 1"
-            >
-              <el-option
-                v-for="item in paymentTermList"
-                :key="item.id"
-                :label="item.dictValue"
-                :value="item.dictValue"
-              >
+            <el-select size="small" v-model="form.paymentType" placeholder="请选择" @change="paymentTypeChange" clearable
+              :disabled="detailData.status == 1">
+              <el-option v-for="item in paymentTermList" :key="item.id" :label="item.dictValue" :value="item.dictValue">
               </el-option>
             </el-select>
           </template>
           <template slot="businesDate">
-            <el-date-picker
-              v-model="form.businesDate"
-              type="date"
-              format="yyyy-MM-dd"
-              value-format="yyyy-MM-dd 00:00:00"
-              :disabled="detailData.status == 1"
-              @change="businesDateChange"
-            >
+            <el-date-picker v-model="form.businesDate" type="date" format="yyyy-MM-dd"
+              value-format="yyyy-MM-dd 00:00:00" :disabled="detailData.status == 1" @change="businesDateChange">
             </el-date-picker>
           </template>
           <template slot="currency">
-            <el-select
-              size="small"
-              v-model="form.currency"
-              placeholder="请选择"
-              @change="currencyChange"
-              :disabled="detailData.status == 1"
-              clearable
-            >
-              <el-option
-                v-for="item in currencyList"
-                :key="item.id"
-                :label="item"
-                :value="item"
-              >
+            <el-select size="small" v-model="form.currency" placeholder="请选择" @change="currencyChange"
+              :disabled="detailData.status == 1" clearable>
+              <el-option v-for="item in currencyList" :key="item.id" :label="item" :value="item">
               </el-option>
             </el-select>
           </template>
           <template slot="exchangeRate">
-            <el-input
-              size="small"
-              v-model="form.exchangeRate"
+            <el-input size="small" v-model="form.exchangeRate"
               oninput="value=value.replace(/[^0-9.]/g,'').replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3')"
-              placeholder="请输入 汇率"
-              :disabled="detailData.status == 1"
-              @change="exchangeRateChange"
-            />
+              placeholder="请输入 汇率" :disabled="detailData.status == 1" @change="exchangeRateChange" />
           </template>
           <template slot="boxPile">
-            <el-select
-              size="small"
-              v-model="form.boxPile"
-              placeholder="请选择"
-              clearable
-              filterable
-              :disabled="detailData.status == 1"
-            >
-              <el-option
-                v-for="item in allBoxs"
-                :key="item.id"
-                :label="item.name"
-                :value="item.name"
-              >
+            <el-select size="small" v-model="form.boxPile" placeholder="请选择" clearable filterable
+              :disabled="detailData.status == 1">
+              <el-option v-for="item in allBoxs" :key="item.id" :label="item.name" :value="item.name">
               </el-option>
             </el-select>
           </template>
           <template slot="boxNumber">
-            <el-input
-              size="small"
-              v-model="form.boxNumber"
+            <el-input size="small" v-model="form.boxNumber"
               oninput="value=value.replace(/[^0-9.]/g,'').replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3')"
-              placeholder="请输入 箱量"
-              :disabled="detailData.status == 1"
-            />
+              placeholder="请输入 箱量" :disabled="detailData.status == 1" />
           </template>
           <template slot="minOrder">
-            <el-input
-              size="small"
-              v-model="form.minOrder"
+            <el-input size="small" v-model="form.minOrder"
               oninput="value=value.replace(/[^0-9.]/g,'').replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3')"
-              placeholder="请输入 起订量"
-              :disabled="detailData.status == 1"
-            />
+              placeholder="请输入 起订量" :disabled="detailData.status == 1" />
           </template>
           <template slot="predictOceanFreight">
-            <el-input
-              size="small"
-              v-model="form.predictOceanFreight"
+            <el-input size="small" v-model="form.predictOceanFreight"
               oninput="value=value.replace(/[^0-9.]/g,'').replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3')"
-              placeholder="请输入 预计海运费"
-              :disabled="detailData.status == 1"
-            />
+              placeholder="请输入 预计海运费" :disabled="detailData.status == 1" />
           </template>
           <template slot="referenceOceanFreight">
-            <el-input
-              size="small"
-              v-model="form.referenceOceanFreight"
+            <el-input size="small" v-model="form.referenceOceanFreight"
               oninput="value=value.replace(/[^0-9.]/g,'').replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3')"
-              placeholder="请输入 参考海运费"
-              :disabled="detailData.status == 1"
-            />
+              placeholder="请输入 参考海运费" :disabled="detailData.status == 1" />
           </template>
           <template slot="oceanFreight">
-            <el-input
-              size="small"
-              v-model="form.oceanFreight"
+            <el-input size="small" v-model="form.oceanFreight"
               oninput="value=value.replace(/[^0-9.]/g,'').replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3')"
-              placeholder="请输入 实际海运费"
-              :disabled="detailData.status == 1"
-            />
+              placeholder="请输入 实际海运费" :disabled="detailData.status == 1" />
           </template>
         </avue-form>
-      </basic-container>
-      <containerTitle title="商品信息"></containerTitle>
-      <basic-container>
-        <avue-crud
-          ref="crud"
-          :data="data"
-          :option="tableOption"
-          @row-del="rowDel"
-          :summary-method="summaryMethod"
-          @saveColumn="saveColumn"
-          @resetColumn="resetColumn"
-          :cell-style="cellStyle"
-        >
+      </trade-card>
+      <trade-card title="商品信息">
+        <avue-crud ref="crud" :data="data" :option="tableOption" @row-del="rowDel" :summary-method="summaryMethod"
+          @saveColumn="saveColumn" @resetColumn="resetColumn" :cell-style="cellStyle">
           <template slot="headerSerial">
-            <el-button
-              type="primary"
-              icon="el-icon-plus"
-              size="mini"
-              @click.stop="addRow"
-              :disabled="detailData.status == 1"
-              circle
-            ></el-button>
+            <el-button type="primary" icon="el-icon-plus" size="mini" @click.stop="addRow"
+              :disabled="detailData.status == 1" circle></el-button>
           </template>
           <template slot="menuLeft">
-            <el-button
-              type="primary"
-              icon="el-icon-plus"
-              size="small"
-              @click.stop="newDetails"
-              :disabled="detailData.status == 1"
-              >批量录入</el-button
-            >
-            <el-button
-              type="primary"
-              icon="el-icon-plus"
-              size="small"
-              @click.stop="addLibrary"
-              :disabled="detailData.status == 1"
-              >出口价格库</el-button
-            >
-            <el-button
-              type="info"
-              icon="el-icon-printer"
-              size="small"
-              @click.stop="openReport()"
-              >报表打印</el-button
-            >
-            <el-button
-              type="info"
-              size="small"
-              @click.stop="savePurchase"
-              :disabled="detailData.status == 1"
-              >采购询价</el-button
-            >
-            <el-button
-              type="info"
-              size="small"
-              @click.stop="saveShipping"
-              :disabled="detailData.status == 1"
-              >船务询价</el-button
-            >
+            <el-button type="primary" icon="el-icon-plus" size="small" @click.stop="newDetails"
+              :disabled="detailData.status == 1">批量录入</el-button>
+            <el-button type="primary" icon="el-icon-plus" size="small" @click.stop="addLibrary"
+              :disabled="detailData.status == 1">出口价格库</el-button>
+            <el-button type="info" icon="el-icon-printer" size="small" @click.stop="openReport()">报表打印</el-button>
+            <el-button type="info" size="small" @click.stop="savePurchase" :disabled="detailData.status == 1">采购询价
+            </el-button>
+            <el-button type="info" size="small" @click.stop="saveShipping" :disabled="detailData.status == 1">船务询价
+            </el-button>
           </template>
           <template slot="menu" slot-scope="{ row, index }">
-            <el-button
-              size="small"
-              icon="el-icon-edit"
-              type="text"
-              @click="rowCell(row, index)"
-              :disabled="disabled || detailData.status == 1"
-              >{{ row.$cellEdit ? "保存" : "修改" }}</el-button
-            >
-            <el-button
-              size="small"
-              icon="el-icon-delete"
-              type="text"
-              @click="rowDel(row, index)"
-              :disabled="detailData.status == 1"
-              >删除</el-button
-            >
+            <el-button size="small" icon="el-icon-edit" type="text" @click="rowCell(row, index)"
+              :disabled="disabled || detailData.status == 1">{{ row.$cellEdit ? "保存" : "修改" }}</el-button>
+            <el-button size="small" icon="el-icon-delete" type="text" @click="rowDel(row, index)"
+              :disabled="detailData.status == 1">删除</el-button>
           </template>
           <template slot="itemType" slot-scope="{ row }">
-            <el-select
-              v-if="row.$cellEdit"
-              v-model="row.itemType"
-              filterable
-              allow-create
-              default-first-option
-              placeholder="请输入"
-              size="small"
-              @focus="itemTypeFocus(row)"
-            >
-              <el-option
-                v-for="(item, index) in itemtypeList"
-                :key="index"
-                :label="item.value"
-                :value="item.value"
-              >
+            <el-select v-if="row.$cellEdit" v-model="row.itemType" filterable allow-create default-first-option
+              placeholder="请输入" size="small" @focus="itemTypeFocus(row)">
+              <el-option v-for="(item, index) in itemtypeList" :key="index" :label="item.value" :value="item.value">
               </el-option>
             </el-select>
             <span v-else>{{ row.itemType }}</span>
           </template>
           <template slot="itemProp" slot-scope="{ row, index }">
             <span v-if="row.$cellEdit" style="display:flex">
-              <el-input
-                v-model="row.itemProp"
-                size="small"
-                placeholder="请点击右边按钮"
-              ></el-input>
-              <el-button
-                icon="el-icon-edit"
-                size="mini"
-                @click="openProperty(row, index)"
-              ></el-button>
+              <el-input v-model="row.itemProp" size="small" placeholder="请点击右边按钮"></el-input>
+              <el-button icon="el-icon-edit" size="mini" @click="openProperty(row, index)"></el-button>
             </span>
             <span v-else>{{ row.itemProp }}</span>
           </template>
           <template slot="cname" slot-scope="{ row, index }">
             <span v-if="row.$cellEdit" style="display:flex">
-              <el-select
-                v-model="row.itemId"
-                placeholder="请选择"
-                size="small"
-                style="width:60%"
-                @change="cnameChange(row, index)"
-              >
-                <el-option
-                  v-for="item in goodsoptions"
-                  :key="item.id"
-                  :label="item.cname"
-                  :value="item.id"
-                >
+              <el-select v-model="row.itemId" placeholder="请选择" size="small" style="width:60%"
+                @change="cnameChange(row, index)">
+                <el-option v-for="item in goodsoptions" :key="item.id" :label="item.cname" :value="item.id">
                 </el-option>
               </el-select>
-              <el-button
-                icon="el-icon-search"
-                size="small"
-                @click="rePick(row, index)"
-              ></el-button>
+              <el-button icon="el-icon-search" size="small" @click="rePick(row, index)"></el-button>
             </span>
 
             <span v-else> {{ row.cname }}</span>
           </template>
           <template slot="partsDescribe" slot-scope="{ row, index }">
             <span v-if="row.$cellEdit" style="display:flex">
-              <el-input
-                v-model="row.partsDescribe"
-                size="small"
-                placeholder="请点击右边按钮"
-              ></el-input>
-              <el-button
-                icon="el-icon-edit"
-                size="mini"
-                @click="partrePick(row, index)"
-              ></el-button>
+              <el-input v-model="row.partsDescribe" size="small" placeholder="请点击右边按钮"></el-input>
+              <el-button icon="el-icon-edit" size="mini" @click="partrePick(row, index)"></el-button>
             </span>
             <span v-else>{{ row.partsDescribe }}</span>
           </template>
           <template slot="priorityReferrer" slot-scope="{ row }">
-            <el-checkbox
-              :disabled="!row.$cellEdit"
-              v-model="row.priorityReferrer"
-              :true-label="1"
-              :false-label="0"
-            />
+            <el-checkbox :disabled="!row.$cellEdit" v-model="row.priorityReferrer" :true-label="1" :false-label="0" />
           </template>
           <template slot="corpId" slot-scope="{ row }">
             <span>{{ row.corpName }}</span>
           </template>
           <template slot="purchaseCost" slot-scope="{ row }">
-            <el-input
-              v-if="row.$cellEdit"
-              v-model="row.purchaseCost"
-              size="small"
-              placeholder="请输入"
-              oninput="value=value.replace(/[^0-9.]/g,'').replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3')"
-            ></el-input>
+            <el-input v-if="row.$cellEdit" v-model="row.purchaseCost" size="small" placeholder="请输入"
+              oninput="value=value.replace(/[^0-9.]/g,'').replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3')"></el-input>
             <span v-else>{{ row.purchaseCost | micrometerFormat }}</span>
           </template>
           <template slot="purchaseAmount" slot-scope="{ row }">
-            <el-input
-              v-if="row.$cellEdit"
-              v-model="row.purchaseAmount"
-              size="small"
-              placeholder="请输入"
+            <el-input v-if="row.$cellEdit" v-model="row.purchaseAmount" size="small" placeholder="请输入"
               @change="purchaseAmountChange(row)"
-              oninput="value=value.replace(/[^0-9.]/g,'').replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3')"
-            ></el-input>
+              oninput="value=value.replace(/[^0-9.]/g,'').replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3')"></el-input>
             <span v-else>{{ row.purchaseAmount | micrometerFormat }}</span>
           </template>
           <template slot="price" slot-scope="{ row }">
-            <el-input
-              v-if="row.$cellEdit"
-              v-model="row.price"
-              size="small"
+            <el-input v-if="row.$cellEdit" v-model="row.price" size="small"
               oninput="value=value.replace(/[^0-9.]/g,'').replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3')"
-              @change="priceChange(row)"
-            ></el-input>
+              @change="priceChange(row)"></el-input>
             <span v-else>{{ row.price | micrometerFormat }}</span>
           </template>
           <template slot="amount" slot-scope="{ row }">
             <span>{{ row.amount | micrometerFormat }}</span>
           </template>
           <template slot="orderQuantity" slot-scope="{ row }">
-            <el-input
-              v-if="row.$cellEdit"
-              v-model="row.orderQuantity"
-              size="small"
-              oninput='this.value=this.value.replace(/[^(\d)]/g,"")'
-              @change="priceChange(row)"
-            ></el-input>
+            <el-input v-if="row.$cellEdit" v-model="row.orderQuantity" size="small"
+              oninput='this.value=this.value.replace(/[^(\d)]/g,"")' @change="priceChange(row)"></el-input>
             <span v-else>{{ row.orderQuantity | IntegerFormat }}</span>
           </template>
           <template slot="discount" slot-scope="{ row }">
-            <el-input
-              v-if="row.$cellEdit"
-              v-model="row.discount"
-              size="small"
+            <el-input v-if="row.$cellEdit" v-model="row.discount" size="small"
               oninput="value=value.replace(/[^0-9.]/g,'').replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3')"
-              @change="discountChange(row)"
-            ></el-input>
+              @change="discountChange(row)"></el-input>
             <span v-else>{{ row.discount | isDiscount }}</span>
           </template>
           <template slot="insurance" slot-scope="{ row }">
-            <el-input
-              v-if="row.$cellEdit"
-              v-model="row.insurance"
-              size="small"
+            <el-input v-if="row.$cellEdit" v-model="row.insurance" size="small"
               oninput="value=value.replace(/[^0-9.]/g,'').replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3')"
-              @change="priceChange(row)"
-            ></el-input>
+              @change="priceChange(row)"></el-input>
             <span v-else>{{ row.insurance | micrometerFormat }}</span>
           </template>
           <template slot="freight" slot-scope="{ row }">
-            <el-input
-              v-if="row.$cellEdit"
-              v-model="row.freight"
-              size="small"
+            <el-input v-if="row.$cellEdit" v-model="row.freight" size="small"
               oninput="value=value.replace(/[^0-9.]/g,'').replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3')"
-              @change="priceChange(row)"
-            ></el-input>
+              @change="priceChange(row)"></el-input>
             <span v-else>{{ row.freight | micrometerFormat }}</span>
           </template>
           <template slot="taxRate" slot-scope="{ row }">
-            <el-input
-              v-if="row.$cellEdit"
-              v-model="row.taxRate"
-              size="small"
+            <el-input v-if="row.$cellEdit" v-model="row.taxRate" size="small"
               oninput="value=value.replace(/[^0-9.]/g,'').replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3')"
-              @change="taxRateChange(row)"
-            ></el-input>
+              @change="taxRateChange(row)"></el-input>
             <span v-else>{{ row.taxRate | isPercentage }}</span>
           </template>
           <template slot="itemMargin" slot-scope="{ row }">
             <span>{{ row.itemMargin | isPercentage }}</span>
           </template>
         </avue-crud>
-      </basic-container>
-      <fee-info
-        ref="feeInfo"
-        :orderFeesList="orderFeesList"
-        :disabled="detailData.status == 1"
-        feeUrl="/blade-purchase-sales/orderfees/update"
-        optionType="CK"
-        itemType="报价"
-        @beforeFinance="beforeFinance"
-        :inCropId="true"
-      />
-      <containerTitle title="合同附件"></containerTitle>
-      <c-upload
-        typeUpload="CK"
-        :data="orderFilesList"
-        :disabled="detailData.status == 1"
-        :enumerationValue="76"
-        deleteUrl="/blade-purchase-sales/orderfiles/update"
-      />
+      </trade-card>
+      <fee-info ref="feeInfo" :orderFeesList="orderFeesList" :disabled="detailData.status == 1"
+        feeUrl="/blade-purchase-sales/orderfees/update" optionType="CK" itemType="报价" @beforeFinance="beforeFinance"
+        :inCropId="true" />
+      <containerTitle title="合同附件">
+
+      </containerTitle>
+      <c-upload typeUpload="CK" :data="orderFilesList" :disabled="detailData.status == 1" :enumerationValue="76"
+        deleteUrl="/blade-purchase-sales/orderfiles/update" />
     </div>
-    <el-dialog
-      title="导入商品"
-      append-to-body
-      class="el-dialogDeep"
-      :visible.sync="dialogVisible"
-      width="80%"
-      :close-on-click-modal="false"
-      :destroy-on-close="true"
-      :close-on-press-escape="false"
-      @close="closeGoods"
-      top="5vh"
-      v-dialog-drag
-    >
+    <el-dialog title="导入商品" append-to-body class="el-dialogDeep" :visible.sync="dialogVisible" width="80%"
+      :close-on-click-modal="false" :destroy-on-close="true" :close-on-press-escape="false" @close="closeGoods"
+      top="5vh" v-dialog-drag>
       <span>
         <el-row>
           <el-col :span="4">
             <div>
               <el-scrollbar>
                 <basic-container>
-                  <avue-tree
-                    :option="treeOption"
-                    @node-click="nodeClick"
-                    :style="treeStyle"
-                  />
+                  <avue-tree :option="treeOption" @node-click="nodeClick" :style="treeStyle" />
                 </basic-container>
               </el-scrollbar>
             </div>
           </el-col>
           <el-col :span="20">
-            <avue-crud
-              :option="goodsOption"
-              :table-loading="loading"
-              :data="goodsList"
-              ref="goodsCrud"
-              :search.sync="search"
-              @search-change="searchChange"
-              @refresh-change="refreshChange"
-              @selection-change="selectionChange"
-              @row-click="rowClick"
-              :page.sync="page"
-              @on-load="onLoad"
-              @saveColumn="saveGoodsColumn"
-              @resetColumn="resetGoodsColumn"
-              :cell-style="cellStyle"
-            ></avue-crud>
+            <avue-crud :option="goodsOption" :table-loading="loading" :data="goodsList" ref="goodsCrud"
+              :search.sync="search" @search-change="searchChange" @refresh-change="refreshChange"
+              @selection-change="selectionChange" @row-click="rowClick" :page.sync="page" @on-load="onLoad"
+              @saveColumn="saveGoodsColumn" @resetColumn="resetGoodsColumn" :cell-style="cellStyle"></avue-crud>
           </el-col>
         </el-row>
       </span>
 
       <span slot="footer" class="dialog-footer">
         <el-button @click="dialogVisible = false">取 消</el-button>
-        <el-button
-          type="primary"
-          @click="importGoods"
-          :disabled="selectionList.length == 0"
-          >导入</el-button
-        >
+        <el-button type="primary" @click="importGoods" :disabled="selectionList.length == 0">导入</el-button>
       </span>
     </el-dialog>
-    <report-dialog
-      :switchDialog="switchDialog"
-      :reportId="form.id"
-      reportName="报价单明细(E)"
-      @onClose="onClose()"
-    ></report-dialog>
-    <part-dialog
-      ref="part"
-      :partList="partList"
-      @importPart="importPart"
-      @partClosed="partClosed"
-    />
+    <report-dialog :switchDialog="switchDialog" :reportId="form.id" reportName="报价单明细(E)" @onClose="onClose()">
+    </report-dialog>
+    <part-dialog ref="part" :partList="partList" @importPart="importPart" @partClosed="partClosed" />
     <property-dialog ref="property" @importProperty="importProperty" />
     <price-library ref="library" @importLibray="importLibray" />
   </div>
@@ -936,7 +616,7 @@ export default {
       treeOption: {
         nodeKey: "id",
         lazy: true,
-        treeLoad: function(node, resolve) {
+        treeLoad: function (node, resolve) {
           const parentId = node.level === 0 ? 0 : node.data.id;
           getDeptLazyTree(parentId).then(res => {
             resolve(
@@ -2172,7 +1852,7 @@ export default {
     }
   },
   watch: {
-    "form.corpId": function(id) {
+    "form.corpId": function (id) {
       if (id) {
         this.corpsattns = [];
         getCorpsattn({ pid: id }).then(res => {
@@ -2188,9 +1868,11 @@ export default {
 .trading-form ::v-deep .el-form-item {
   margin-bottom: 8px !important;
 }
+
 ::v-deep .el-form-item__error {
   display: none !important;
 }
+
 ::v-deep .select-component {
   display: flex !important;
 }

+ 4 - 6
src/views/exportTrade/invoice/detailsPage.vue

@@ -54,8 +54,7 @@
       </div>
     </div>
     <div class="customer-main">
-      <containerTitle title="基础信息"></containerTitle>
-      <basic-container>
+      <trade-card title="基础信息">
         <avue-form
           ref="form"
           class="trading-form"
@@ -77,9 +76,8 @@
             ></warehouse-select>
           </template>
         </avue-form>
-      </basic-container>
-      <containerTitle title="商品信息"></containerTitle>
-      <basic-container>
+      </trade-card>
+      <trade-card title="商品信息">
         <avue-crud
           ref="crud"
           :data="data"
@@ -201,7 +199,7 @@
             <span v-else>{{ row.actualQuantity | IntegerFormat }}</span>
           </template>
         </avue-crud>
-      </basic-container>
+      </trade-card>
       <fee-info
         ref="feeInfo"
         :orderFeesList="orderFeesList"

+ 6 - 9
src/views/exportTrade/purchaseContract/detailsPage.vue

@@ -68,8 +68,7 @@
       </div>
     </div>
     <div class="customer-main">
-      <containerTitle title="基础信息"></containerTitle>
-      <basic-container>
+      <trade-card title="基础信息">
         <avue-form
           ref="form"
           class="trading-form"
@@ -104,10 +103,9 @@
             />
           </template>
         </avue-form>
-      </basic-container>
+      </trade-card>
       <div>
-        <containerTitle title="商品信息"></containerTitle>
-        <basic-container>
+        <trade-card title="商品信息">
           <avue-crud
             ref="crud"
             :data="data"
@@ -216,7 +214,7 @@
               >
             </template>
           </avue-crud>
-        </basic-container>
+        </trade-card>
       </div>
 
       <fee-info
@@ -238,15 +236,14 @@
         deleteUrl="/trade-purchase/purchase-order/removeByFiles"
       />
       <div>
-        <containerTitle title="银行信息"></containerTitle>
-        <basic-container>
+        <trade-card title="银行信息">
           <avue-form
             class="trading-form"
             ref="form"
             v-model="form"
             :option="bankOption"
           />
-        </basic-container>
+        </trade-card>
       </div>
     </div>
     <el-dialog

+ 4 - 6
src/views/exportTrade/purchaseInquiry/detailsPage.vue

@@ -48,8 +48,7 @@
       </div>
     </div>
     <div class="customer-main">
-      <containerTitle title="基础信息"></containerTitle>
-      <basic-container>
+      <trade-card title="基础信息">
         <avue-form
           ref="form"
           class="trading-form"
@@ -75,9 +74,8 @@
             ></el-date-picker>
           </template>
         </avue-form>
-      </basic-container>
-      <containerTitle title="商品信息"></containerTitle>
-      <basic-container>
+      </trade-card>
+      <trade-card title="商品信息">
         <avue-crud
           ref="crud"
           :data="data"
@@ -233,7 +231,7 @@
             >
           </template>
         </avue-crud>
-      </basic-container>
+      </trade-card>
     </div>
     <el-dialog
       title="导入商品"

+ 4 - 6
src/views/exportTrade/receipt/detailsPage.vue

@@ -54,8 +54,7 @@
       </div>
     </div>
     <div class="customer-main">
-      <containerTitle title="基础信息"></containerTitle>
-      <basic-container>
+      <trade-card title="基础信息">
         <avue-form
           ref="form"
           class="trading-form"
@@ -77,9 +76,8 @@
             ></warehouse-select>
           </template>
         </avue-form>
-      </basic-container>
-      <containerTitle title="商品信息"></containerTitle>
-      <basic-container>
+      </trade-card>
+      <trade-card title="商品信息">
         <avue-crud
           ref="crud"
           :data="data"
@@ -176,7 +174,7 @@
             <span v-else>{{ row.actualQuantity | IntegerFormat }}</span>
           </template>
         </avue-crud>
-      </basic-container>
+      </trade-card>
       <fee-info
         ref="feeInfo"
         :orderFeesList="orderFeesList"

+ 10 - 15
src/views/exportTrade/salesContract/detailsPage.vue

@@ -71,8 +71,7 @@
       </div>
     </div>
     <div class="customer-main">
-      <containerTitle title="基础信息"></containerTitle>
-      <basic-container>
+      <trade-card title="基础信息">
         <avue-form
           ref="form"
           class="trading-form"
@@ -272,10 +271,9 @@
             />
           </template>
         </avue-form>
-      </basic-container>
+      </trade-card>
       <div>
-        <containerTitle title="商品信息"></containerTitle>
-        <basic-container>
+        <trade-card title="商品信息">
           <avue-crud
             ref="crud"
             :data="data"
@@ -526,7 +524,7 @@
               >
             </template>
           </avue-crud>
-        </basic-container>
+        </trade-card>
       </div>
       <fee-info
         ref="feeInfo"
@@ -547,37 +545,34 @@
         deleteUrl="/blade-purchase-sales/orderfiles/update"
       />
       <div>
-        <containerTitle title="银行信息"></containerTitle>
-        <basic-container>
+        <trade-card title="银行信息">
           <avue-form
             class="trading-form"
             ref="form"
             v-model="form"
             :option="bankOption"
           />
-        </basic-container>
+        </trade-card>
       </div>
       <div>
-        <containerTitle title="保险信息"></containerTitle>
-        <basic-container>
+        <trade-card title="保险信息">
           <avue-form
             class="trading-form"
             ref="form"
             v-model="form"
             :option="insuranceOption"
           />
-        </basic-container>
+        </trade-card>
       </div>
       <div>
-        <containerTitle title="唛头"></containerTitle>
-        <basic-container>
+        <trade-card title="唛头">
           <avue-form
             class="trading-form"
             ref="form"
             v-model="form"
             :option="markOption"
           />
-        </basic-container>
+        </trade-card>
       </div>
     </div>
     <el-dialog

+ 6 - 9
src/views/exportTrade/shippingInquiry/detailsPage.vue

@@ -40,8 +40,7 @@
       </div>
     </div>
     <div class="customer-main">
-      <containerTitle title="基础信息"></containerTitle>
-      <basic-container>
+      <trade-card title="基础信息">
         <avue-form
           class="trading-form"
           ref="form"
@@ -55,9 +54,8 @@
             <port-info v-model="form.portOfDestination" :disabled="true" />
           </template>
         </avue-form>
-      </basic-container>
-      <containerTitle title="商品信息"></containerTitle>
-      <basic-container>
+      </trade-card>
+      <trade-card title="商品信息">
         <avue-crud
           ref="crud"
           :data="data"
@@ -72,9 +70,8 @@
             <span>{{ row.orderQuantity | IntegerFormat }}</span>
           </template>
         </avue-crud>
-      </basic-container>
-      <containerTitle title="运费明细"></containerTitle>
-      <basic-container>
+      </trade-card>
+      <trade-card title="运费明细">
         <avue-crud
           ref="freightCrud"
           :data="freightData"
@@ -141,7 +138,7 @@
             ></template
           >
         </avue-crud>
-      </basic-container>
+      </trade-card>
     </div>
     <el-dialog
       title="导入商品"