【发运明细】新增、详情、编辑页面完善+其他小修改

src/views/reportForms/cost-allocation-table/costAllocationDrawer.vue

@@ -2,8 +2,8 @@
   <!-- 成本分配详情-->
   <div id="costAllocationDrawer">
     <a-drawer
-      title="成本分配详情"
-      width="100%"
+      title="详情"
+      width="89%"
       placement="right"
       :closable="true"
       :visible="visible"

src/views/reportForms/full-rate-table/emailMsgModal.vue

@@ -20,6 +20,8 @@
           :columns="emailMsgColumns"
           :data-source="form.emailMsgData"
         >
+
+          <!-- 是否启用 -->
           <template slot="isEnable" slot-scope="text, record, index">
             <a-form-model-item prop="isEnable" :rules="rules.isEnable">
               <a-select v-model="record.isEnable">
@@ -50,15 +52,15 @@
               <a-input style="width:100%" type="number" :min="1" :max="31" v-model="record.monthly" />
             </a-form-model-item>
           </template>
-          <!-- 状态 -->
-          <!-- slot-scope="text, record" -->
+
+          <!--状态 slot-scope="text, record" -->
           <span slot="state">
             <!-- v-if="record.isRelease == '0'" -->
             <a-tag color="orange">已发送</a-tag>
             <!-- <a-tag color="#87d068" v-else>仅保存</a-tag> -->
           </span>
 
-          <!-- 操作 确定 取消 -->
+          <!-- 操作按钮 保存 发送 -->
           <span slot="operationSlot" slot-scope="text, record">
             <a @click="send(record)" style="color:green;">发送</a>
             <a-divider type="vertical" />

src/views/reportForms/pro-progress-report.vue

@@ -81,11 +81,6 @@
       </a-form>
     </div>
 
-    <!-- 操作按钮区域 -->
-    <!-- <div class="table-operator">
-      <a-button type="primary" @click="synchronization" icon="reload">同步</a-button>
-    </div> -->
-
     <!-- table区域  -->
     <div>
       <a-table

src/views/reportForms/pro-progress-report/outInDetailDataDrawer.vue

@@ -2,7 +2,7 @@
   <!-- 出入库详细数据 -->
   <a-drawer
     title="出入库详细数据"
-    width="89%"
+    width="70%"
     placement="right"
     :closable="true"
     :visible="visible"

src/views/reportForms/pro-progress-report/singleOrderReportDrawer.vue

@@ -3,7 +3,7 @@
   <a-card :bordered="false">
     <a-drawer
       title="单个订单报表"
-      width="100%"
+      width="89%"
       placement="right"
       :closable="true"
       :visible="visible"
@@ -389,9 +389,8 @@ export default {
       // console.log('>>>>重置')
       this.queryParam = {}
     },
-
+    // 关闭抽屉
     onClose() {
-      // 关闭抽屉
       this.visible = false
     },
 

src/views/shipment-details/addShipDetDrawer.vue

@@ -0,0 +1,547 @@
+<template>
+  <!-- 新增发运明细 -->
+  <a-card :bordered="false">
+    <a-drawer
+      title="新增发运明细"
+      width="89%"
+      placement="right"
+      :closable="true"
+      :visible="visible"
+      @close="handleCancel"
+    >
+      <!-- 主表信息 填写-->
+      <div class="table-page-search-wrapper">
+        <a-form-model layout="inline" ref="form" :model="addShipDet" :rules="validatorRules">
+          <!-- 主表信息 填写-->
+          <a-row :gutter="24">
+            <a-col :md="6" :sm="8">
+              <a-form-model-item label="单据号" prop="orderNum">
+                <a-input placeholder="请输入单据号" v-model="addShipDet.orderNum"></a-input>
+              </a-form-model-item>
+            </a-col>
+
+            <a-col :md="6" :sm="8">
+              <a-form-model-item label="单据日期" required prop="billDate">
+                <a-date-picker
+                  placeholder="请选择单据日期"
+                  :format="dateFormat"
+                  style="width:100%;"
+                  v-model="addShipDet.billDate"
+                />
+              </a-form-model-item>
+            </a-col>
+
+            <a-col :md="6" :sm="8">
+              <a-form-model-item label="客户" prop="customer">
+                <a-input placeholder="请输入客户" v-model="addShipDet.customer"></a-input>
+              </a-form-model-item>
+            </a-col>
+
+            <a-col :md="6" :sm="8">
+              <a-form-model-item label="预发货日期" required prop="scheduledShipDate">
+                <a-date-picker
+                  placeholder="请选择预发货时间"
+                  :format="dateFormat"
+                  style="width:100%;"
+                  v-model="addShipDet.scheduledShipDate"
+                />
+              </a-form-model-item>
+            </a-col>
+
+            <a-col :md="6" :sm="8">
+              <a-form-model-item label="预完工日期" required prop="scheduledDoneDate">
+                <a-date-picker
+                  placeholder="请选择预完工时间"
+                  :format="dateFormat"
+                  style="width:100%;"
+                  v-model="addShipDet.scheduledDoneDate"
+                />
+              </a-form-model-item>
+            </a-col>
+
+            <a-col :md="18" :sm="18">
+              <a-form-model-item label="备注" prop="note">
+                <a-input placeholder="请输入备注" v-model="addShipDet.note"></a-input>
+              </a-form-model-item>
+            </a-col>
+          </a-row>
+        </a-form-model>
+      </div>
+
+      <!--  参照订单数据 増行-->
+      <div class="table-operator">
+        <a-button type="primary" @click="referOrderDataOpen" icon="ordered-list">参照订单数据</a-button>
+        <a-button type="primary" @click="handleAddColumn" icon="plus" style="margin-left: 20px">増行</a-button>
+      </div>
+
+      <!-- 子表  -->
+      <a-spin :spinning="confirmLoading">
+        <a-form-model ref="formRef" :model="form" :rules="validatorRules">
+          <a-table
+            bordered
+            rowKey="id"
+            size="middle"
+            :columns="columns"
+            :data-source="form.data"
+            :loading="loading"
+            :pagination="ipagination"
+            :scroll="{ x: 1500 }"
+            @change="handleTableChange"
+          >
+            <!-- 款号 输入框 -->
+            <template slot="styleNum" slot-scope="text, record, index">
+              <a-form-model-item prop="styleNum" :rules="rules.styleNum" required>
+                <a-input style="width:100%" type="text" v-model="record.styleNum" />
+              </a-form-model-item>
+            </template>
+
+            <!-- 发货数量 -->
+            <template slot="shipQuantity" slot-scope="text, record, index">
+              <a-form-model-item prop="styleNum" :rules="rules.shipQuantity">
+                <a-input style="width:100%" type="text" v-model="record.shipQuantity" />
+              </a-form-model-item>
+            </template>
+
+            <!-- 是否TC功能 -->
+            <template slot="isTC" slot-scope="text, record, index">
+              <a-form-model-item prop="isEnable" :rules="rules.isTC">
+                <a-select v-model="record.isTC">
+                  <a-select-option :value="1">是</a-select-option>
+                  <a-select-option :value="2">否</a-select-option>
+                </a-select>
+              </a-form-model-item>
+            </template>
+
+            <!-- 物料成分 -->
+            <template slot="materialComposition" slot-scope="text, record, index">
+              <a-form-model-item prop="styleNum" :rules="rules.materialComposition">
+                <a-input style="width:100%" type="text" v-model="record.materialComposition" />
+              </a-form-model-item>
+            </template>
+
+            <!-- 操作 -->
+            <span slot="operationSlot" slot-scope="text, record">
+              <a-popconfirm title="确定删除吗?" ok-text="是" cancel-text="否" @confirm="handleDelete(record.id)">
+                <a href="javascript:void(0);" style="color:red;">删除</a>
+              </a-popconfirm>
+              <a-divider type="vertical" />
+              <a @click="copy(record)">复制</a>
+            </span>
+          </a-table>
+        </a-form-model>
+      </a-spin>
+
+      <!-- 页面底部保存取消 -->
+      <div
+        :style="{
+          position: 'absolute',
+          right: 0,
+          bottom: 0,
+          width: '100%',
+          borderTop: '1px solid #e9e9e9',
+          padding: '10px 16px',
+          background: '#fff',
+          textAlign: 'right',
+          zIndex: 1
+        }"
+      >
+        <a-popconfirm title="确定放弃新增？" @confirm="handleCancel" okText="确定" cancelText="取消">
+          <a-button :style="{ marginRight: '8px' }">取消</a-button>
+        </a-popconfirm>
+        <a-button type="primary" @click="submitAdd">
+          提交
+        </a-button>
+      </div>
+    </a-drawer>
+
+    <!-- 参照订单数据弹框 -->
+    <referOrderData-modal ref="referOrderDataModal" :father="aa" @ok="referOrderDataOk"></referOrderData-modal>
+  </a-card>
+</template>
+
+<script>
+import { JeecgListMixin } from '@/mixins/JeecgListMixin' // 分页等
+import JEllipsis from '@/components/jeecg/JEllipsis'
+import moment from 'moment'
+import ReferOrderDataModal from '@views/shipment-details/referOrderDataModal.vue'
+
+export default {
+  name: 'AddShipDetDrawer', // 新增 发运明细 抽屉
+  mixins: [JeecgListMixin], // 分页等
+  components: { JEllipsis, ReferOrderDataModal, moment }, // 参照订单数据 弹框
+  data() {
+    let ellipsis = (v, l = 20) => <j-ellipsis value={v} length={l} /> // 省略
+    return {
+      id: '',
+      // 表头
+      columns: [
+        {
+          title: '账套',
+          dataIndex: 'accountSet',
+          width: 120,
+          fixed: 'left',
+          className: 'replacecolor'
+        },
+        {
+          title: '订单号',
+          dataIndex: 'orderNum',
+          width: 120,
+          fixed: 'left',
+          className: 'replacecolor'
+        },
+        {
+          title: '款号',
+          dataIndex: 'styleNum',
+          scopedSlots: { customRender: 'styleNum' },
+          fixed: 'left',
+          width: 180,
+          className: 'replacecolor'
+        },
+        // {
+        //   title: '创建时间',
+        //   dataIndex: 'createTime',
+        //   align: 'center',
+        //   sorter: true,
+        //   customRender: text => {
+        //     return moment(text).format('YYYY-MM-DD')
+        //   }
+        // },
+        {
+          title: '订单日期',
+          dataIndex: 'orderDate',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '业务类型',
+          dataIndex: 'businessType',
+          width: 120,
+          className: 'replacecolor'
+        },
+
+        {
+          title: '客户订单',
+          dataIndex: 'customerOrder',
+          width: 120,
+
+          className: 'replacecolor'
+        },
+        {
+          title: '小po',
+          dataIndex: 'smallPo',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: 'Pack Id',
+          dataIndex: 'packId',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '订单数据',
+          dataIndex: 'orderData',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '订单剩余数量',
+          dataIndex: 'orderRemaQuantity',
+          width: 120,
+          className: 'replacecolor'
+        },
+
+        {
+          title: '发货数量',
+          dataIndex: 'shipQuantity',
+          scopedSlots: { customRender: 'shipQuantity' },
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '是否TC功能',
+          dataIndex: 'isTC',
+          width: 90,
+          scopedSlots: { customRender: 'isTC' },
+          className: 'replacecolor'
+        },
+        {
+          title: '物料成分',
+          dataIndex: 'materialComposition',
+          scopedSlots: { customRender: 'materialComposition' },
+          width: 140,
+          className: 'replacecolor'
+        },
+
+        {
+          title: '销售类型',
+          dataIndex: 'saleType',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '客户简称',
+          dataIndex: 'customerShortName',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '客户名称',
+          dataIndex: 'customerName',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '汇率',
+          dataIndex: 'exchangeRate',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '整单合计',
+          dataIndex: 'wholeSingleCombined',
+          width: 120,
+          className: 'replacecolor'
+        },
+
+        {
+          title: '销售部门',
+          dataIndex: 'salesDepartment',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '业务员',
+          dataIndex: 'salesman',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '币种',
+          dataIndex: 'currency',
+          width: 120,
+          className: 'replacecolor'
+        },
+
+        {
+          title: '品牌方',
+          dataIndex: 'brand',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '第三方',
+          dataIndex: 'thirdParty',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '定金比例(%)',
+          dataIndex: 'depositRate',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '定金',
+          dataIndex: 'deposit',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '协同路线',
+          dataIndex: 'collaborativeRoute',
+          width: 120,
+          className: 'replacecolor'
+        },
+
+        {
+          title: '付款条件',
+          dataIndex: 'paymentClause',
+          width: 160,
+          customRender: t => ellipsis(t),
+          className: 'replacecolor'
+        },
+        {
+          title: '最终客户',
+          dataIndex: 'finalCustomer',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '订单备注',
+          dataIndex: 'orderNote',
+          width: 160,
+          customRender: t => ellipsis(t),
+          className: 'replacecolor'
+        },
+
+        {
+          title: '价格备注',
+          dataIndex: 'priceNote',
+          width: 160,
+          customRender: t => ellipsis(t),
+          className: 'replacecolor'
+        },
+        {
+          title: '订单变更说明',
+          dataIndex: 'orderChangeDesc',
+          width: 160,
+          customRender: t => ellipsis(t),
+          className: 'replacecolor'
+        },
+        {
+          title: '操作',
+          dataIndex: 'operation',
+          scopedSlots: { customRender: 'operationSlot' },
+          width: 220,
+          fixed: 'right',
+          className: 'replacecolor'
+        }
+      ],
+      // 子表数据
+      form: {
+        data: [
+          {
+            orderNum: 'AA002200001',
+            smallPo: '008',
+            // shipQuantity: '',
+            // isTC: '',
+            paymentClause: '定金达到50%定金达到50%定金达到50%定金达到50%定金达到50%定金达到50%'
+          },
+          {}
+        ]
+      },
+
+      addShipDet: [], // 新增发运明细
+      visible: false,
+      confirmLoading: false,
+      dateFormat: 'YYYY-MM-DD',
+      validatorRules: {
+        orderNum: [{ required: true, message: '订单号不能为空', trigger: 'blur' }], // 单据号
+        billDate: [{ required: true, message: '单据日期不能为空', trigger: 'blur' }],
+        customer: [{ required: true, message: '客户不能为空', trigger: 'blur' }], // 客户
+        scheduledShipDate: [{ required: true, message: '预发货日期不能为空', trigger: 'blur' }],
+        scheduledDoneDate: [{ required: true, message: '预完工日期不能为空', trigger: 'blur' }],
+        note: [{ required: false, trigger: 'blur' }],
+        styleNum: [{ required: true, message: '款号不能为空', trigger: 'blur' }],
+        shipQuantity: [{ required: true, message: '发货数量不能为空', trigger: 'blur' }],
+        isTC: [{ required: true, message: '请选择是否TC功能', trigger: 'blur' }],
+        materialComposition: [{ required: true, message: '物料成分不能为空', trigger: 'blur' }]
+      }
+    }
+  },
+  created() {
+    // this.getShipmentList() // 发运明细列表
+  },
+
+  methods: {
+    // 参照订单数据
+    referOrderDataOpen() {
+      console.log('打开参照订单数据')
+      this.$refs.referOrderDataModal.referOrderDataModVis = true
+    },
+    // 増行
+    handleAddColumn() {
+      console.log('増行')
+      const addrow = {
+        accountSet: '',
+        orderNum: '',
+        styleNum: '',
+        orderDate: '',
+        businessType: '',
+        customerOrder: '',
+        smallPo: '',
+        packId: '',
+        orderData: '',
+        orderRemaQuantity: '',
+        shipQuantity: '',
+        isTC: '',
+        materialComposition: '',
+        saleType: '',
+        customerShortName: '',
+        customerName: '',
+        exchangeRate: '',
+        wholeSingleCombined: '',
+        salesDepartment: '',
+        salesman: '',
+        currency: '',
+        brand: '',
+        thirdParty: '',
+        depositRate: '',
+        deposit: '',
+        collaborativeRoute: '',
+        paymentClause: '',
+        finalCustomer: '',
+        orderNote: '',
+        priceNote: '',
+        orderChangeDesc: '',
+        operation: ''
+      }
+      this.data.push(addrow)
+    },
+    // --------------------------------------
+    // 操作 删除
+    handleDelete(id) {
+      console.log('id:', id)
+    },
+    // 操作 复制
+    copy(record) {},
+    // --------------------------------------
+    // 抽屉 取消
+    handleCancel() {
+      console.log('点击抽屉取消')
+      this.close()
+    },
+    // 抽屉 提交
+    submitAdd() {
+      console.log('保存新增、刷新发运明细列表')
+      const that = this
+      // 触发表单验证
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          that.confirmLoading = true
+        }
+      })
+      this.close()
+      // this.getShipmentList() // 刷新发运明细列表
+    },
+    // --------------------------------------
+    close() {
+      this.$emit('close')
+      this.visible = false
+      this.$refs.form.resetFields()
+    },
+
+    // --------------------------------------
+    // validateorderNum(rule, value, callback) {},
+    // 分页、排序、筛选变化时触发
+    // handleTableChange(pagination, filters, sorter) {
+    //   // console.log('当前页信息>>>>',pagination)
+    //   this.queryParam.pageNo = pagination.current
+    //   // this.getAnnList()
+    // },
+    // 参照订单数据弹框 ok-------------------------------------
+    referOrderDataOk() {
+      console.log('参照订单数据弹框确定')
+      this.$refs.referOrderDataModal.referOrderDataModVis = false
+    },
+    // father
+    aa() {}
+  },
+  computed: {},
+  mounted() {}
+}
+</script>
+<style lang="less" scoped>
+@import '~@assets/less/common.less';
+/deep/ .ant-table-thead > tr > th {
+  text-align: center;
+  // font-weight: 700;
+}
+/deep/ .ant-table-tbody {
+  text-align: center;
+}
+// /deep/ th.replacecolor {
+//   background-color: #ccc;
+// }
+</style>

src/views/shipment-details/addShipmentDetails.vue

@@ -1,556 +0,0 @@
-<template>
-  <!-- 新增发运明细 -->
-  <a-card :bordered="false">
-    <!-- 主表填写信息 -->
-    <div class="table-page-search-wrapper">
-      <a-form layout="inline" @keyup.enter.native="searchQuery" :model="addShipmentDetails">
-        <a-row :gutter="24">
-          <a-col :md="6" :sm="8">
-            <a-form-item label="单据号">
-              <a-input placeholder="请输入单据号" v-model="addShipmentDetails.orderNum"></a-input>
-            </a-form-item>
-          </a-col>
-
-          <a-col :md="6" :sm="8">
-            <a-form-item label="单据日期">
-              <a-date-picker
-                @change="billsDateChange"
-                placeholder="请选择单据日期"
-                style="width:100%;"
-                v-model="addShipmentDetails.billDate"
-              />
-            </a-form-item>
-          </a-col>
-
-          <a-col :md="6" :sm="8">
-            <a-form-item label="客户">
-              <a-input placeholder="请输入客户" v-model="addShipmentDetails.customer"></a-input>
-            </a-form-item>
-          </a-col>
-
-          <a-col :md="6" :sm="8">
-            <a-form-item label="预发货日期">
-              <a-date-picker
-                @change="advanceShipmentChange"
-                placeholder="请选择预发货时间"
-                style="width:100%;"
-                v-model="addShipmentDetails.scheduledShipDate"
-              />
-            </a-form-item>
-          </a-col>
-
-          <a-col :md="6" :sm="8">
-            <a-form-item label="预完工日期" style="width:100%;">
-              <a-date-picker
-                @change="advanceCompletedChange"
-                placeholder="请选择预完工时间"
-                style="width:100%;"
-                v-model="addShipmentDetails.scheduledDoneDate"
-              />
-            </a-form-item>
-          </a-col>
-
-          <a-col :md="18" :sm="18">
-            <a-form-item label="备注">
-              <a-input placeholder="请输入备注" v-model="addShipmentDetails.note"></a-input>
-            </a-form-item>
-          </a-col>
-        </a-row>
-      </a-form>
-    </div>
-
-    <!-- 操作按钮区域 参照订单数据 増行-->
-    <div class="table-operator">
-      <a-button type="primary" @click="referOrderDataOpen" icon="ordered-list">参照订单数据</a-button>
-      <a-button type="primary" @click="handleAddColumn" icon="plus" style="margin-left: 20px">増行</a-button>
-    </div>
-
-    <!-- table  y: 300 -->
-    <div>
-      <a-table
-        bordered
-        rowKey="id"
-        size="middle"
-        :columns="shipmentListDetailsColumns"
-        :data-source="shipmentListDetailsData"
-        :loading="loading"
-        :pagination="ipagination"
-        :scroll="{ x: 1500 }"
-        @change="handleTableChange"
-      >
-        <!-- :rules="rules"  -->
-        <!-- 款号 -->
-        <a-form-model
-          slot="styleNum"
-          slot-scope="text, record"
-          :ref="record.index"
-          :model="record"
-          style="width:100%;height:40px"
-        >
-          <a-form-model-item prop="styleNum">
-            <a-input style="width:100%" v-model="record.styleNum" />
-          </a-form-model-item>
-        </a-form-model>
-
-        <!-- 发货数量 -->
-        <a-form-model
-          slot="shipQuantity"
-          slot-scope="text, record"
-          :ref="record.index"
-          :model="record"
-          style="width:100%;height:40px"
-        >
-          <a-form-model-item prop="shipQuantity">
-            <a-input style="width:100%" v-model="record.shipQuantity" />
-          </a-form-model-item>
-        </a-form-model>
-
-        <!-- 是否TC功能 -->
-        <a-form-model
-          slot="isTC"
-          slot-scope="text, record"
-          :ref="record.index"
-          :model="record"
-          style="width:100%;height:40px"
-        >
-          <a-form-model-item prop="isTC">
-            <a-select v-model="record.isTC">
-              <a-select-option :value="1">是</a-select-option>
-              <a-select-option :value="2">否</a-select-option>
-            </a-select>
-          </a-form-model-item>
-        </a-form-model>
-
-        <!-- 物料成分 -->
-        <a-form-model
-          slot="materialComposition"
-          slot-scope="text, record"
-          :ref="record.index"
-          :model="record"
-          style="width:100%;height:40px"
-        >
-          <a-form-model-item prop="materialComposition">
-            <a-input style="width:100%" v-model="record.materialComposition" />
-          </a-form-model-item>
-        </a-form-model>
-
-        <!-- 操作 -->
-        <span slot="operationSlot" slot-scope="text, record">
-          <a-popconfirm title="确定删除吗?" ok-text="是" cancel-text="否" @confirm="handleDelete(record.id)">
-            <a href="javascript:void(0);" style="color:red;">删除</a>
-          </a-popconfirm>
-          <a-divider type="vertical" />
-          <a @click="copy(record)">复制</a>
-        </span>
-      </a-table>
-    </div>
-
-    <!-- 保存 取消 -->
-    <a-row>
-      <a-col :md="24" :sm="12">
-        <span style="float: right;overflow: hidden;">
-          <a-button type="primary" style="left: 10px" @click="save">保存</a-button>
-          <a-button type="primary" @click="cancel" style="margin-left: 20px">取消</a-button>
-        </span>
-      </a-col>
-    </a-row>
-
-    <!-- 参照订单数据弹框 -->
-    <referOrderData-modal ref="referOrderDataModal" :father="aa" @ok="modalFormOk"></referOrderData-modal>
-  </a-card>
-</template>
-
-<script>
-import { JeecgListMixin } from '@/mixins/JeecgListMixin' // 分页等
-import JEllipsis from '@/components/jeecg/JEllipsis'
-import moment from 'moment'
-import ReferOrderDataModal from '@views/shipment-details/referOrderDataModal.vue'
-
-export default {
-  name: 'AddShipmentDetails', // 新增发运明细列表
-  mixins: [JeecgListMixin], // 分页等
-  components: { JEllipsis, ReferOrderDataModal, moment }, // 参照订单数据 弹框
-  data() {
-    let ellipsis = (v, l = 20) => <j-ellipsis value={v} length={l} /> // 省略
-    return {
-      description: '新增发运明细',
-      id: '',
-      // 表头
-      shipmentListDetailsColumns: [
-        {
-          title: '账套',
-          dataIndex: 'accountSet',
-          width: 120,
-          fixed: 'left',
-          className: 'replacecolor'
-        },
-        {
-          title: '订单号',
-          dataIndex: 'orderNum',
-          width: 120,
-          fixed: 'left',
-          className: 'replacecolor'
-        },
-        {
-          title: '款号',
-          dataIndex: 'styleNum',
-          scopedSlots: { customRender: 'styleNum' },
-          fixed: 'left',
-          width: 180,
-          className: 'replacecolor'
-        },
-        // {
-        //   title: '创建时间',
-        //   dataIndex: 'createTime',
-        //   align: 'center',
-        //   sorter: true,
-        //   customRender: text => {
-        //     return moment(text).format('YYYY-MM-DD')
-        //   }
-        // },
-        {
-          title: '订单日期',
-          dataIndex: 'orderDate',
-          width: 120,
-          className: 'replacecolor'
-        },
-        {
-          title: '业务类型',
-          dataIndex: 'businessType',
-          width: 120,
-          className: 'replacecolor'
-        },
-
-        {
-          title: '客户订单',
-          dataIndex: 'customerOrder',
-          width: 120,
-
-          className: 'replacecolor'
-        },
-        {
-          title: '小po',
-          dataIndex: 'smallPo',
-          width: 120,
-          className: 'replacecolor'
-        },
-        {
-          title: 'Pack Id',
-          dataIndex: 'packId',
-          width: 120,
-          className: 'replacecolor'
-        },
-        {
-          title: '订单数据',
-          dataIndex: 'orderData',
-          width: 120,
-          className: 'replacecolor'
-        },
-        {
-          title: '订单剩余数量',
-          dataIndex: 'orderRemaQuantity',
-          width: 120,
-          className: 'replacecolor'
-        },
-
-        {
-          title: '发货数量',
-          dataIndex: 'shipQuantity',
-          scopedSlots: { customRender: 'shipQuantity' },
-          width: 120,
-          className: 'replacecolor'
-        },
-        {
-          title: '是否TC功能',
-          dataIndex: 'isTC',
-          width: 90,
-          scopedSlots: { customRender: 'isTC' },
-          className: 'replacecolor'
-        },
-        {
-          title: '物料成分',
-          dataIndex: 'materialComposition',
-          scopedSlots: { customRender: 'materialComposition' },
-          width: 140,
-          className: 'replacecolor'
-        },
-
-        {
-          title: '销售类型',
-          dataIndex: 'saleType',
-          width: 120,
-          className: 'replacecolor'
-        },
-        {
-          title: '客户简称',
-          dataIndex: 'customerShortName',
-          width: 120,
-          className: 'replacecolor'
-        },
-        {
-          title: '客户名称',
-          dataIndex: 'customerName',
-          width: 120,
-          className: 'replacecolor'
-        },
-        {
-          title: '汇率',
-          dataIndex: 'exchangeRate',
-          width: 120,
-          className: 'replacecolor'
-        },
-        {
-          title: '整单合计',
-          dataIndex: 'wholeSingleCombined',
-          width: 120,
-          className: 'replacecolor'
-        },
-
-        {
-          title: '销售部门',
-          dataIndex: 'salesDepartment',
-          width: 120,
-          className: 'replacecolor'
-        },
-        {
-          title: '业务员',
-          dataIndex: 'salesman',
-          width: 120,
-          className: 'replacecolor'
-        },
-        {
-          title: '币种',
-          dataIndex: 'currency',
-          width: 120,
-          className: 'replacecolor'
-        },
-
-        {
-          title: '品牌方',
-          dataIndex: 'brand',
-          width: 120,
-          className: 'replacecolor'
-        },
-        {
-          title: '第三方',
-          dataIndex: 'thirdParty',
-          width: 120,
-          className: 'replacecolor'
-        },
-        {
-          title: '定金比例(%)',
-          dataIndex: 'depositRate',
-          width: 120,
-          className: 'replacecolor'
-        },
-        {
-          title: '定金',
-          dataIndex: 'deposit',
-          width: 120,
-          className: 'replacecolor'
-        },
-        {
-          title: '协同路线',
-          dataIndex: 'collaborativeRoute',
-          width: 120,
-          className: 'replacecolor'
-        },
-
-        {
-          title: '付款条件',
-          dataIndex: 'paymentClause',
-          width: 160,
-          customRender: t => ellipsis(t),
-          className: 'replacecolor'
-        },
-        {
-          title: '最终客户',
-          dataIndex: 'finalCustomer',
-          width: 120,
-          className: 'replacecolor'
-        },
-        {
-          title: '订单备注',
-          dataIndex: 'orderNote',
-          width: 160,
-          customRender: t => ellipsis(t),
-          className: 'replacecolor'
-        },
-
-        {
-          title: '价格备注',
-          dataIndex: 'priceNote',
-          width: 160,
-          customRender: t => ellipsis(t),
-          className: 'replacecolor'
-        },
-        {
-          title: '订单变更说明',
-          dataIndex: 'orderChangeDesc',
-          width: 160,
-          customRender: t => ellipsis(t),
-          className: 'replacecolor'
-        },
-        {
-          title: '操作',
-          dataIndex: 'operation',
-          scopedSlots: { customRender: 'operationSlot' },
-          width: 160,
-          fixed: 'right',
-          className: 'replacecolor'
-        }
-      ],
-      shipmentListDetailsData: [
-        {
-          orderNum: 'AA002200001',
-          smallPo: '008',
-          // shipQuantity: '',
-          // isTC: '',
-          paymentClause: '定金达到50%定金达到50%定金达到50%定金达到50%定金达到50%定金达到50%'
-        },
-        {}
-      ],
-      addShipmentDetails: [] // 新增发运明细
-    }
-  },
-  created() {
-    // this.getShipmentList() // 发运明细列表
-  },
-
-      // const addrow = {
-        // accountSet: '',
-        // clothesFactory: '',
-        // hod: '',
-        // styleNo: '',
-        // poNo: '',
-        // itemNo: '',
-        // dcLabel: '',
-        // s: '',
-        // m: '',
-        // l: '',
-        // xl: '',
-        // xxl: '',
-        // xxxl: '',
-        // inceptionBoxNo: '',
-        // endBoxNo: '',
-        // colorChUsa: '',
-        // configCode: '',
-        // packagesBox: '',
-        // boxes: '',
-        // totalPackagesNum: '',
-        // suttle: '',
-        // totalSuttle: '',
-        // roughWeight: '',
-        // totalRoughWeigh: '',
-        // boxLength: '',
-        // boxWidth: '',
-        // boxHeight: '',
-        // totalVolume: '',
-        // netNetWeight: '',
-        // price: '',
-        // totalPrices: '',
-        // note: '',
-        // operation: ''
-      // }
-
-  methods: {
-    // 单据日期
-    billsDateChange() {},
-    // 预发货日期
-    advanceShipmentChange() {},
-    // 预完工日期
-    advanceCompletedChange() {},
-    // --------------------------------------
-    // 参照订单数据
-    referOrderDataOpen() {
-      console.log('打开参照订单数据')
-      // 打开订单数据弹框
-      this.$refs.referOrderDataModal.referOrderDataModVis = true
-    },
-    // 増行
-    handleAddColumn() {
-      console.log('増行')
-
-      const addrow = {
-        accountSet: '',
-        orderNum: '',
-        styleNum: '',
-        orderDate: '',
-        businessType: '',
-        customerOrder: '',
-        smallPo: '',
-        packId: '',
-        orderData: '',
-        orderRemaQuantity: '',
-        shipQuantity: '',
-        isTC: '',
-        materialComposition: '',
-        saleType: '',
-        customerShortName: '',
-        customerName: '',
-        exchangeRate: '',
-        wholeSingleCombined: '',
-        salesDepartment: '',
-        salesman: '',
-        currency: '',
-        brand: '',
-        thirdParty: '',
-        depositRate: '',
-        deposit: '',
-        collaborativeRoute: '',
-        paymentClause: '',
-        finalCustomer: '',
-        orderNote: '',
-        priceNote: '',
-        orderChangeDesc: '',
-        operation: ''
-      }
-
-      this.shipmentListDetailsData.push(addrow)
-    },
-    // --------------------------------------
-    // 操作 删除
-    handleDelete() {},
-    // 操作 复制
-    copy() {},
-
-    // 保存
-    save() {
-      this.$router.push('shipmentList')
-    },
-
-    // 取消
-    cancel() {
-      this.$router.push('shipmentList')
-    },
-    // --------------------------------------
-    // 分页、排序、筛选变化时触发
-    // handleTableChange(pagination, filters, sorter) {
-    //   // console.log('当前页信息>>>>',pagination)
-    //   this.queryParam.pageNo = pagination.current
-    //   // this.getAnnList()
-    // },
-    // 弹框-------------------------------------
-    modalFormOk() {
-      console.log('弹框确定')
-    },
-    // father
-    aa() {}
-  },
-  computed: {},
-  mounted() {}
-}
-</script>
-<style lang="less" scoped>
-@import '~@assets/less/common.less';
-/deep/ .ant-table-thead > tr > th {
-  text-align: center;
-  // font-weight: 700;
-}
-/deep/ .ant-table-tbody {
-  text-align: center;
-}
-// /deep/ th.replacecolor {
-//   background-color: #ccc;
-// }
-</style>

src/views/shipment-details/detailsShipDetDrawer.vue

@@ -0,0 +1,416 @@
+<template>
+  <!-- 详情 发运明细 -->
+  <a-card :bordered="false">
+    <a-drawer
+      title="详情"
+      width="89%"
+      placement="right"
+      :closable="true"
+      :visible="visible"
+      @close="handleCancel">
+      <!-- 主表信息 填写-->
+      <div class="table-page-search-wrapper">
+        <a-form-model layout="inline" ref="form" :model="detailsShipDet">
+          <!-- 主表信息 填写-->
+          <a-row :gutter="24">
+            <a-col :md="6" :sm="8">
+              <a-form-model-item label="单据号" prop="orderNum">
+                <a-input v-model="detailsShipDet.orderNum"></a-input>
+              </a-form-model-item>
+            </a-col>
+
+            <a-col :md="6" :sm="8">
+              <a-form-model-item label="单据日期" prop="billDate">
+                <a-date-picker :format="dateFormat" style="width:100%;" v-model="detailsShipDet.billDate" />
+              </a-form-model-item>
+            </a-col>
+
+            <a-col :md="6" :sm="8">
+              <a-form-model-item label="客户" prop="customer">
+                <a-input placeholder="请输入客户" v-model="detailsShipDet.customer"></a-input>
+              </a-form-model-item>
+            </a-col>
+
+            <a-col :md="6" :sm="8">
+              <a-form-model-item label="预发货日期" prop="scheduledShipDate">
+                <a-date-picker :format="dateFormat" style="width:100%;" v-model="detailsShipDet.scheduledShipDate" />
+              </a-form-model-item>
+            </a-col>
+
+            <a-col :md="6" :sm="8">
+              <a-form-model-item label="预完工日期" prop="scheduledDoneDate">
+                <a-date-picker :format="dateFormat" style="width:100%;" v-model="detailsShipDet.scheduledDoneDate" />
+              </a-form-model-item>
+            </a-col>
+
+            <a-col :md="18" :sm="18">
+              <a-form-model-item label="备注" prop="note">
+                <a-input v-model="detailsShipDet.note"></a-input>
+              </a-form-model-item>
+            </a-col>
+          </a-row>
+        </a-form-model>
+      </div>
+
+      <!-- 子表  -->
+      <a-spin :spinning="confirmLoading">
+        <a-form-model ref="formRef" :model="form">
+          <a-table
+            bordered
+            rowKey="id"
+            size="middle"
+            :columns="columns"
+            :data-source="form.data"
+            :loading="loading"
+            :pagination="ipagination"
+            :scroll="{ x: 1500 }"
+            @change="handleTableChange"
+          >
+            <!-- 款号 输入框 -->
+            <!-- <template slot="styleNum" slot-scope="text, record, index">
+              <a-form-model-item prop="styleNum" :rules="rules.styleNum">
+                <a-input style="width:100%" type="text" v-model="record.styleNum" />
+              </a-form-model-item>
+            </template> -->
+
+            <!-- 发货数量 -->
+            <!-- <template slot="shipQuantity" slot-scope="text, record, index">
+              <a-form-model-item prop="styleNum" :rules="rules.shipQuantity">
+                <a-input style="width:100%" type="text" v-model="record.shipQuantity" />
+              </a-form-model-item>
+            </template> -->
+
+            <!-- 是否TC功能 -->
+            <!-- <template slot="isTC" slot-scope="text, record, index">
+              <a-form-model-item prop="isEnable" :rules="rules.isTC">
+                <a-select v-model="record.isTC">
+                  <a-select-option :value="1">是</a-select-option>
+                  <a-select-option :value="2">否</a-select-option>
+                </a-select>
+              </a-form-model-item>
+            </template> -->
+
+            <!-- 物料成分 -->
+            <!-- <template slot="materialComposition" slot-scope="text, record, index">
+              <a-form-model-item prop="styleNum" :rules="rules.materialComposition">
+                <a-input style="width:100%" type="text" v-model="record.materialComposition" />
+              </a-form-model-item>
+            </template> -->
+          </a-table>
+        </a-form-model>
+      </a-spin>
+
+      <!-- 页面底部保存取消 -->
+      <div
+        :style="{
+          position: 'absolute',
+          right: 0,
+          bottom: 0,
+          width: '100%',
+          borderTop: '1px solid #e9e9e9',
+          padding: '10px 16px',
+          background: '#fff',
+          textAlign: 'right',
+          zIndex: 1
+        }"
+      >
+        <!-- <a-popconfirm title="确定放弃编辑？" @confirm="handleCancel" okText="确定" cancelText="取消">
+          <a-button :style="{ marginRight: '8px' }">取消</a-button>
+        </a-popconfirm>
+        <a-button type="primary" @click="submitAdd">
+          提交
+        </a-button> -->
+      </div>
+    </a-drawer>
+  </a-card>
+</template>
+
+<script>
+import { JeecgListMixin } from '@/mixins/JeecgListMixin' // 分页等
+import JEllipsis from '@/components/jeecg/JEllipsis'
+import moment from 'moment'
+
+export default {
+  name: 'DetailsShipDetDrawer', // 详情 发运明细 抽屉
+  mixins: [JeecgListMixin], // 分页等
+  components: { JEllipsis, moment }, // 参照订单数据 弹框 ReferOrderDataModal
+  data() {
+    let ellipsis = (v, l = 20) => <j-ellipsis value={v} length={l} /> // 省略
+    return {
+      id: '',
+      // 表头
+      columns: [
+        {
+          title: '账套',
+          dataIndex: 'accountSet',
+          width: 120,
+          fixed: 'left',
+          className: 'replacecolor'
+        },
+        {
+          title: '订单号',
+          dataIndex: 'orderNum',
+          width: 120,
+          fixed: 'left',
+          className: 'replacecolor'
+        },
+        {
+          title: '款号',
+          dataIndex: 'styleNum',
+          scopedSlots: { customRender: 'styleNum' },
+          fixed: 'left',
+          width: 180,
+          className: 'replacecolor'
+        },
+        // {
+        //   title: '创建时间',
+        //   dataIndex: 'createTime',
+        //   align: 'center',
+        //   sorter: true,
+        //   customRender: text => {
+        //     return moment(text).format('YYYY-MM-DD')
+        //   }
+        // },
+        {
+          title: '订单日期',
+          dataIndex: 'orderDate',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '业务类型',
+          dataIndex: 'businessType',
+          width: 120,
+          className: 'replacecolor'
+        },
+
+        {
+          title: '客户订单',
+          dataIndex: 'customerOrder',
+          width: 120,
+
+          className: 'replacecolor'
+        },
+        {
+          title: '小po',
+          dataIndex: 'smallPo',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: 'Pack Id',
+          dataIndex: 'packId',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '订单数据',
+          dataIndex: 'orderData',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '订单剩余数量',
+          dataIndex: 'orderRemaQuantity',
+          width: 120,
+          className: 'replacecolor'
+        },
+
+        {
+          title: '发货数量',
+          dataIndex: 'shipQuantity',
+          scopedSlots: { customRender: 'shipQuantity' },
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '是否TC功能',
+          dataIndex: 'isTC',
+          width: 90,
+          scopedSlots: { customRender: 'isTC' },
+          className: 'replacecolor'
+        },
+        {
+          title: '物料成分',
+          dataIndex: 'materialComposition',
+          scopedSlots: { customRender: 'materialComposition' },
+          width: 140,
+          className: 'replacecolor'
+        },
+
+        {
+          title: '销售类型',
+          dataIndex: 'saleType',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '客户简称',
+          dataIndex: 'customerShortName',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '客户名称',
+          dataIndex: 'customerName',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '汇率',
+          dataIndex: 'exchangeRate',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '整单合计',
+          dataIndex: 'wholeSingleCombined',
+          width: 120,
+          className: 'replacecolor'
+        },
+
+        {
+          title: '销售部门',
+          dataIndex: 'salesDepartment',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '业务员',
+          dataIndex: 'salesman',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '币种',
+          dataIndex: 'currency',
+          width: 120,
+          className: 'replacecolor'
+        },
+
+        {
+          title: '品牌方',
+          dataIndex: 'brand',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '第三方',
+          dataIndex: 'thirdParty',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '定金比例(%)',
+          dataIndex: 'depositRate',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '定金',
+          dataIndex: 'deposit',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '协同路线',
+          dataIndex: 'collaborativeRoute',
+          width: 120,
+          className: 'replacecolor'
+        },
+
+        {
+          title: '付款条件',
+          dataIndex: 'paymentClause',
+          width: 160,
+          customRender: t => ellipsis(t),
+          className: 'replacecolor'
+        },
+        {
+          title: '最终客户',
+          dataIndex: 'finalCustomer',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '订单备注',
+          dataIndex: 'orderNote',
+          width: 160,
+          customRender: t => ellipsis(t),
+          className: 'replacecolor'
+        },
+
+        {
+          title: '价格备注',
+          dataIndex: 'priceNote',
+          width: 160,
+          customRender: t => ellipsis(t),
+          className: 'replacecolor'
+        },
+        {
+          title: '订单变更说明',
+          dataIndex: 'orderChangeDesc',
+          width: 160,
+          customRender: t => ellipsis(t),
+          className: 'replacecolor'
+        }
+      ],
+      form: {
+        data: [
+          {
+            orderNum: 'AA002200001',
+            smallPo: '008',
+            // shipQuantity: '',
+            // isTC: '',
+            paymentClause: '定金达到50%定金达到50%定金达到50%定金达到50%定金达到50%定金达到50%'
+          },
+          {}
+        ]
+      },
+
+      detailsShipDet: [], // 新增发运明细
+      visible: false,
+      confirmLoading: false,
+      dateFormat: 'YYYY-MM-DD'
+    }
+  },
+  created() {
+    // this.getShipmentList() // 发运明细列表
+  },
+
+  methods: {
+    // 抽屉 取消
+    handleCancel() {
+      console.log('点击抽屉取消')
+      this.close()
+    },
+    close() {
+      this.$emit('close')
+      this.visible = false
+      this.$refs.form.resetFields()
+    }
+    // --------------------------------------
+    // 分页、排序、筛选变化时触发
+    // handleTableChange(pagination, filters, sorter) {
+    //   // console.log('当前页信息>>>>',pagination)
+    //   this.queryParam.pageNo = pagination.current
+    //   // this.getAnnList()
+    // },
+  },
+  computed: {},
+  mounted() {}
+}
+</script>
+<style lang="less" scoped>
+@import '~@assets/less/common.less';
+/deep/ .ant-table-thead > tr > th {
+  text-align: center;
+  // font-weight: 700;
+}
+/deep/ .ant-table-tbody {
+  text-align: center;
+}
+// /deep/ th.replacecolor {
+//   background-color: #ccc;
+// }
+</style>

src/views/shipment-details/editShipDetDrawer.vue

@@ -0,0 +1,546 @@
+<template>
+  <!-- 编辑发运明细 -->
+  <a-card :bordered="false">
+    <a-drawer
+      title="编辑"
+      width="89%"
+      placement="right"
+      :closable="true"
+      :visible="visible"
+      @close="handleCancel">
+      <!-- 主表信息 填写-->
+      <div class="table-page-search-wrapper">
+        <a-form-model layout="inline" ref="form" :model="editShipDet" :rules="validatorRules">
+          <!-- 主表信息 填写-->
+          <a-row :gutter="24">
+            <a-col :md="6" :sm="8">
+              <a-form-model-item label="单据号" prop="orderNum">
+                <a-input placeholder="请输入单据号" v-model="editShipDet.orderNum"></a-input>
+              </a-form-model-item>
+            </a-col>
+
+            <a-col :md="6" :sm="8">
+              <a-form-model-item label="单据日期" required prop="billDate">
+                <a-date-picker
+                  placeholder="请选择单据日期"
+                  :format="dateFormat"
+                  style="width:100%;"
+                  v-model="editShipDet.billDate"
+                />
+              </a-form-model-item>
+            </a-col>
+
+            <a-col :md="6" :sm="8">
+              <a-form-model-item label="客户" prop="customer">
+                <a-input placeholder="请输入客户" v-model="editShipDet.customer"></a-input>
+              </a-form-model-item>
+            </a-col>
+
+            <a-col :md="6" :sm="8">
+              <a-form-model-item label="预发货日期" required prop="scheduledShipDate">
+                <a-date-picker
+                  placeholder="请选择预发货时间"
+                  :format="dateFormat"
+                  style="width:100%;"
+                  v-model="editShipDet.scheduledShipDate"
+                />
+              </a-form-model-item>
+            </a-col>
+
+            <a-col :md="6" :sm="8">
+              <a-form-model-item label="预完工日期" required prop="scheduledDoneDate">
+                <a-date-picker
+                  placeholder="请选择预完工时间"
+                  :format="dateFormat"
+                  style="width:100%;"
+                  v-model="editShipDet.scheduledDoneDate"
+                />
+              </a-form-model-item>
+            </a-col>
+
+            <a-col :md="18" :sm="18">
+              <a-form-model-item label="备注" prop="note">
+                <a-input placeholder="请输入备注" v-model="editShipDet.note"></a-input>
+              </a-form-model-item>
+            </a-col>
+          </a-row>
+        </a-form-model>
+      </div>
+
+      <!--  参照订单数据 増行-->
+      <div class="table-operator">
+        <a-button type="primary" @click="referOrderDataOpen" icon="ordered-list">参照订单数据</a-button>
+        <a-button type="primary" @click="handleAddColumn" icon="plus" style="margin-left: 20px">増行</a-button>
+      </div>
+
+      <!-- 子表  -->
+      <a-spin :spinning="confirmLoading">
+        <a-form-model ref="formRef" :model="form" :rules="validatorRules">
+          <a-table
+            bordered
+            rowKey="id"
+            size="middle"
+            :columns="columns"
+            :data-source="form.data"
+            :loading="loading"
+            :pagination="ipagination"
+            :scroll="{ x: 1500 }"
+            @change="handleTableChange"
+          >
+            <!-- 款号 输入框 -->
+            <template slot="styleNum" slot-scope="text, record, index">
+              <a-form-model-item prop="styleNum" :rules="rules.styleNum" required>
+                <a-input style="width:100%" type="text" v-model="record.styleNum" />
+              </a-form-model-item>
+            </template>
+
+            <!-- 发货数量 -->
+            <template slot="shipQuantity" slot-scope="text, record, index">
+              <a-form-model-item prop="styleNum" :rules="rules.shipQuantity">
+                <a-input style="width:100%" type="text" v-model="record.shipQuantity" />
+              </a-form-model-item>
+            </template>
+
+            <!-- 是否TC功能 -->
+            <template slot="isTC" slot-scope="text, record, index">
+              <a-form-model-item prop="isEnable" :rules="rules.isTC">
+                <a-select v-model="record.isTC">
+                  <a-select-option :value="1">是</a-select-option>
+                  <a-select-option :value="2">否</a-select-option>
+                </a-select>
+              </a-form-model-item>
+            </template>
+
+            <!-- 物料成分 -->
+            <template slot="materialComposition" slot-scope="text, record, index">
+              <a-form-model-item prop="styleNum" :rules="rules.materialComposition">
+                <a-input style="width:100%" type="text" v-model="record.materialComposition" />
+              </a-form-model-item>
+            </template>
+
+            <!-- 操作 -->
+            <span slot="operationSlot" slot-scope="text, record">
+              <a-popconfirm title="确定删除吗?" ok-text="是" cancel-text="否" @confirm="handleDelete(record.id)">
+                <a href="javascript:void(0);" style="color:red;">删除</a>
+              </a-popconfirm>
+              <a-divider type="vertical" />
+              <a @click="copy(record)">复制</a>
+            </span>
+          </a-table>
+        </a-form-model>
+      </a-spin>
+
+      <!-- 页面底部提交取消 -->
+      <div
+        :style="{
+          position: 'absolute',
+          right: 0,
+          bottom: 0,
+          width: '100%',
+          borderTop: '1px solid #e9e9e9',
+          padding: '10px 16px',
+          background: '#fff',
+          textAlign: 'right',
+          zIndex: 1
+        }"
+      >
+        <a-popconfirm title="确定放弃编辑？" @confirm="handleCancel" okText="确定" cancelText="取消">
+          <a-button :style="{ marginRight: '8px' }">取消</a-button>
+        </a-popconfirm>
+        <a-button type="primary" @click="submitEdit">
+          提交
+        </a-button>
+      </div>
+    </a-drawer>
+
+    <!-- 参照订单数据弹框 -->
+    <referOrderData-modal ref="referOrderDataModal" :father="aa" @ok="referOrderDataOk"></referOrderData-modal>
+  </a-card>
+</template>
+
+<script>
+import { JeecgListMixin } from '@/mixins/JeecgListMixin' // 分页等
+import JEllipsis from '@/components/jeecg/JEllipsis'
+import moment from 'moment'
+import ReferOrderDataModal from '@views/shipment-details/referOrderDataModal.vue'
+
+export default {
+  name: 'EditShipDetDrawer', // 编辑 发运明细 抽屉
+  mixins: [JeecgListMixin], // 分页等
+  components: { JEllipsis, ReferOrderDataModal, moment }, // 参照订单数据 弹框
+  data() {
+    let ellipsis = (v, l = 20) => <j-ellipsis value={v} length={l} /> // 省略
+    return {
+      id: '',
+      // 表头
+      columns: [
+        {
+          title: '账套',
+          dataIndex: 'accountSet',
+          width: 120,
+          fixed: 'left',
+          className: 'replacecolor'
+        },
+        {
+          title: '订单号',
+          dataIndex: 'orderNum',
+          width: 120,
+          fixed: 'left',
+          className: 'replacecolor'
+        },
+        {
+          title: '款号',
+          dataIndex: 'styleNum',
+          scopedSlots: { customRender: 'styleNum' },
+          fixed: 'left',
+          width: 180,
+          className: 'replacecolor'
+        },
+        // {
+        //   title: '创建时间',
+        //   dataIndex: 'createTime',
+        //   align: 'center',
+        //   sorter: true,
+        //   customRender: text => {
+        //     return moment(text).format('YYYY-MM-DD')
+        //   }
+        // },
+        {
+          title: '订单日期',
+          dataIndex: 'orderDate',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '业务类型',
+          dataIndex: 'businessType',
+          width: 120,
+          className: 'replacecolor'
+        },
+
+        {
+          title: '客户订单',
+          dataIndex: 'customerOrder',
+          width: 120,
+
+          className: 'replacecolor'
+        },
+        {
+          title: '小po',
+          dataIndex: 'smallPo',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: 'Pack Id',
+          dataIndex: 'packId',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '订单数据',
+          dataIndex: 'orderData',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '订单剩余数量',
+          dataIndex: 'orderRemaQuantity',
+          width: 120,
+          className: 'replacecolor'
+        },
+
+        {
+          title: '发货数量',
+          dataIndex: 'shipQuantity',
+          scopedSlots: { customRender: 'shipQuantity' },
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '是否TC功能',
+          dataIndex: 'isTC',
+          width: 90,
+          scopedSlots: { customRender: 'isTC' },
+          className: 'replacecolor'
+        },
+        {
+          title: '物料成分',
+          dataIndex: 'materialComposition',
+          scopedSlots: { customRender: 'materialComposition' },
+          width: 140,
+          className: 'replacecolor'
+        },
+
+        {
+          title: '销售类型',
+          dataIndex: 'saleType',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '客户简称',
+          dataIndex: 'customerShortName',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '客户名称',
+          dataIndex: 'customerName',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '汇率',
+          dataIndex: 'exchangeRate',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '整单合计',
+          dataIndex: 'wholeSingleCombined',
+          width: 120,
+          className: 'replacecolor'
+        },
+
+        {
+          title: '销售部门',
+          dataIndex: 'salesDepartment',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '业务员',
+          dataIndex: 'salesman',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '币种',
+          dataIndex: 'currency',
+          width: 120,
+          className: 'replacecolor'
+        },
+
+        {
+          title: '品牌方',
+          dataIndex: 'brand',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '第三方',
+          dataIndex: 'thirdParty',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '定金比例(%)',
+          dataIndex: 'depositRate',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '定金',
+          dataIndex: 'deposit',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '协同路线',
+          dataIndex: 'collaborativeRoute',
+          width: 120,
+          className: 'replacecolor'
+        },
+
+        {
+          title: '付款条件',
+          dataIndex: 'paymentClause',
+          width: 160,
+          customRender: t => ellipsis(t),
+          className: 'replacecolor'
+        },
+        {
+          title: '最终客户',
+          dataIndex: 'finalCustomer',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '订单备注',
+          dataIndex: 'orderNote',
+          width: 160,
+          customRender: t => ellipsis(t),
+          className: 'replacecolor'
+        },
+
+        {
+          title: '价格备注',
+          dataIndex: 'priceNote',
+          width: 160,
+          customRender: t => ellipsis(t),
+          className: 'replacecolor'
+        },
+        {
+          title: '订单变更说明',
+          dataIndex: 'orderChangeDesc',
+          width: 160,
+          customRender: t => ellipsis(t),
+          className: 'replacecolor'
+        },
+        {
+          title: '操作',
+          dataIndex: 'operation',
+          scopedSlots: { customRender: 'operationSlot' },
+          width: 220,
+          fixed: 'right',
+          className: 'replacecolor'
+        }
+      ],
+      form: {
+        data: [
+          {
+            orderNum: 'AA002200001',
+            smallPo: '008',
+            // shipQuantity: '',
+            // isTC: '',
+            paymentClause: '定金达到50%定金达到50%定金达到50%定金达到50%定金达到50%定金达到50%'
+          },
+          {}
+        ]
+      },
+
+      editShipDet: [], // 编辑发运明细
+      visible: false,
+      confirmLoading: false,
+      dateFormat: 'YYYY-MM-DD',
+      validatorRules: {
+        orderNum: [{ required: true, message: '订单号不能为空', trigger: 'blur' }], // 单据号
+        billDate: [{ required: true, message: '单据日期不能为空', trigger: 'blur' }],
+        customer: [{ required: true, message: '客户不能为空', trigger: 'blur' }], // 客户
+        scheduledShipDate: [{ required: true, message: '预发货日期不能为空', trigger: 'blur' }],
+        scheduledDoneDate: [{ required: true, message: '预完工日期不能为空', trigger: 'blur' }],
+        note: [{ required: false, trigger: 'blur' }],
+        styleNum: [{ required: true, message: '款号不能为空', trigger: 'blur' }],
+        shipQuantity: [{ required: true, message: '发货数量不能为空', trigger: 'blur' }],
+        isTC: [{ required: true, message: '请选择是否TC功能', trigger: 'blur' }],
+        materialComposition: [{ required: true, message: '物料成分不能为空', trigger: 'blur' }]
+      }
+    }
+  },
+  created() {
+    // this.getShipmentList() // 发运明细列表
+  },
+
+  methods: {
+    // 参照订单数据
+    referOrderDataOpen() {
+      console.log('打开参照订单数据')
+      // 打开订单数据弹框
+      this.$refs.referOrderDataModal.referOrderDataModVis = true
+    },
+    // 増行
+    handleAddColumn() {
+      console.log('増行')
+      const addrow = {
+        accountSet: '',
+        orderNum: '',
+        styleNum: '',
+        orderDate: '',
+        businessType: '',
+        customerOrder: '',
+        smallPo: '',
+        packId: '',
+        orderData: '',
+        orderRemaQuantity: '',
+        shipQuantity: '',
+        isTC: '',
+        materialComposition: '',
+        saleType: '',
+        customerShortName: '',
+        customerName: '',
+        exchangeRate: '',
+        wholeSingleCombined: '',
+        salesDepartment: '',
+        salesman: '',
+        currency: '',
+        brand: '',
+        thirdParty: '',
+        depositRate: '',
+        deposit: '',
+        collaborativeRoute: '',
+        paymentClause: '',
+        finalCustomer: '',
+        orderNote: '',
+        priceNote: '',
+        orderChangeDesc: '',
+        operation: ''
+      }
+
+      this.data.push(addrow)
+    },
+    // --------------------------------------
+    // 操作 删除
+    handleDelete(id) {
+      console.log('id:', id)
+    },
+    // 操作 复制
+    copy(record) {},
+
+    // --------------------------------------
+    // 抽屉 取消
+    handleCancel() {
+      console.log('点击抽屉取消')
+      this.close()
+    },
+
+    // 编辑 提交
+    submitEdit() {
+      console.log('提交编辑、刷新发运明细列表')
+      const that = this
+      // 触发表单验证
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          that.confirmLoading = true
+        }
+      })
+      this.close()
+      // this.getShipmentList() // 刷新发运明细列表
+    },
+    close() {
+      this.$emit('close')
+      this.visible = false
+      this.$refs.form.resetFields()
+    },
+    // --------------------------------------
+    // 分页、排序、筛选变化时触发
+    // handleTableChange(pagination, filters, sorter) {
+    //   // console.log('当前页信息>>>>',pagination)
+    //   this.queryParam.pageNo = pagination.current
+    //   // this.getAnnList()
+    // },
+    // 参照订单数据弹框 ok-------------------------------------
+    referOrderDataOk() {
+      console.log('参照订单数据弹框确定')
+      this.$refs.referOrderDataModal.referOrderDataModVis = false
+    },
+    // father
+    aa() {}
+  },
+  computed: {},
+  mounted() {}
+}
+</script>
+<style lang="less" scoped>
+@import '~@assets/less/common.less';
+/deep/ .ant-table-thead > tr > th {
+  text-align: center;
+  // font-weight: 700;
+}
+/deep/ .ant-table-tbody {
+  text-align: center;
+}
+// /deep/ th.replacecolor {
+//   background-color: #ccc;
+// }
+</style>

src/views/shipment-details/referOrderDataModal.vue

@@ -136,7 +136,7 @@ export default {
           title: '颜色',
           dataIndex: 'color',
           width: 120,
-            customRender: t => ellipsis(t),
+          customRender: t => ellipsis(t),
           className: 'replacecolor'
         },
         {
@@ -262,7 +262,7 @@ export default {
           title: '付款条件',
           dataIndex: 'paymentClause',
           width: 120,
-            customRender: t => ellipsis(t),
+          customRender: t => ellipsis(t),
           className: 'replacecolor'
         },
         {
@@ -275,7 +275,7 @@ export default {
           title: '订单备注',
           dataIndex: 'OrderNote',
           width: 120,
-            customRender: t => ellipsis(t),
+          customRender: t => ellipsis(t),
           className: 'replacecolor'
         },
 
@@ -283,14 +283,14 @@ export default {
           title: '价格备注',
           dataIndex: 'priceNote',
           width: 120,
-            customRender: t => ellipsis(t),
+          customRender: t => ellipsis(t),
           className: 'replacecolor'
         },
         {
           title: '订单变更说明',
           dataIndex: 'OrderChangeDesc',
           width: 120,
-            customRender: t => ellipsis(t),
+          customRender: t => ellipsis(t),
           className: 'replacecolor'
         }
       ],
@@ -324,21 +324,25 @@ export default {
     },
     // 弹框确定
     onSubmit() {
-      console.log('弹框确定')
+      console.log('参照订单数据弹框确定,重新渲染【新增发运明细】')
+      this.referOrderDataModVis = false
     },
 
     close() {
       this.$emit('close')
-      this.visible = false
+      this.referOrderDataModVis = false
     },
     handleCancel() {
       this.close()
     },
-    handleTableChange() {},
+    handleTableChange() {
+      console.log('??这是啥')
+    },
     // 选中行
     onSelectChange(keys, rows) {
       this.selectedRowKeys = keys
       this.selectedRows = rows
+      console.log('选中行keys:', keys, '选中行rows:', rows)
     }
   },
   computed: {

src/views/shipment-details/shipmentList.vue

@@ -84,7 +84,7 @@
 
     <!-- 操作按钮区域 -->
     <div class="table-operator">
-      <a-button type="primary" @click="AddShipmentDetails" icon="plus">新增</a-button>
+      <a-button type="primary" @click="addShipDet" icon="plus">新增</a-button>
     </div>
 
     <!-- table  y: 300 -->
@@ -121,14 +121,14 @@
               <a class="ant-dropdown-link">更多<a-icon type="down"/></a>
               <a-menu slot="overlay">
                 <a-menu-item>
-                  <a @click="checke(record)">查看</a>
+                  <a @click="details(record)">详情</a>
                 </a-menu-item>
 
                 <a-menu-item>
                   <a @click="submit(record)">提交</a>
                 </a-menu-item>
                 <a-menu-item>
-                  <a @click="edit(record)">修改</a>
+                  <a @click="edit(record)">编辑</a>
                 </a-menu-item>
                 <a-menu-item>
                   <a @click="push(record)">推送</a>
@@ -144,8 +144,10 @@
         </a-table>
       </a-row>
     </div>
-    <!-- 查看、修改 抽屉 -->
-    <!-- <shipmentListDetails-drawer ref="shipmentListDetailsDrawer" :father="aa" @ok="modalFormOk"></shipmentListDetails-drawer> -->
+    <!-- 新增 详情 修改 抽屉 -->
+    <addShipDet-drawer ref="addShipDetDrawer" :father="aa" @ok="modalFormOk"></addShipDet-drawer>
+    <detailsShipDet-drawer ref="detailsShipDetDrawer" :father="bb" @ok="modalFormOk"></detailsShipDet-drawer>
+    <editShipDet-drawer ref="editShipDetDrawer" :father="cc" @ok="modalFormOk"></editShipDet-drawer>
   </a-card>
 </template>
 
@@ -153,10 +155,14 @@
 import { JeecgListMixin } from '@/mixins/JeecgListMixin'
 import JEllipsis from '@/components/jeecg/JEllipsis'
 import moment from 'moment'
+
+import addShipDetDrawer from '@views/shipment-details/addShipDetDrawer.vue'
+import detailsShipDetDrawer from '@views/shipment-details/detailsShipDetDrawer.vue'
+import editShipDetDrawer from '@views/shipment-details/editShipDetDrawer.vue'
 export default {
   name: 'ShipmentList', // 发运明细列表
   mixins: [JeecgListMixin],
-  components: { JEllipsis, moment },
+  components: { JEllipsis, moment, addShipDetDrawer, detailsShipDetDrawer, editShipDetDrawer },
 
   data() {
     let ellipsis = (v, l = 20) => <j-ellipsis value={v} length={l} /> // 省略
@@ -445,7 +451,7 @@ export default {
           dataIndex: 'operation',
           scopedSlots: { customRender: 'operationSlot' },
           fixed: 'right',
-          width: 160,
+          width: 220,
           className: 'replacecolor'
         }
       ],
@@ -468,15 +474,14 @@ export default {
     // this.getShipmentList() // 发运明细列表
   },
   methods: {
-    // --------------------------------------
     // 开始时间
     startTimeChange() {},
     // 结束时间
     endTimeChange() {},
     // 发货日期
     shipDateChange() {},
-
     // --------------------------------------
+
     // 查询按钮
     searchQuery() {
       // this.getAnnList() // 渲染公告
@@ -488,24 +493,34 @@ export default {
       // this.getAnnList()
     },
     // --------------------------------------
+
     // 新增 按钮
-    AddShipmentDetails() {
+    addShipDet() {
       console.log('新增发运明细')
-      this.$router.push('addShipmentDetails')
+      this.$refs.addShipDetDrawer.visible = true
     },
+
     // --------------------------------------
     // 操作 申报要素
     declareElements() {},
-    // 操作 查看
-    checke() {},
+    // 操作 详情
+    details(record) {
+      console.log('查看发运明细')
+      this.$refs.detailsShipDetDrawer.visible = true
+    },
     // 操作 提交
     submit() {},
-    // 操作 修改
-    edit() {},
+    // 操作 编辑
+    edit(record) {
+      console.log('编辑发运明细')
+      this.$refs.editShipDetDrawer.visible = true
+    },
     // 操作 推送
-    push() {},
+    push(record) {},
     // 操作 删除
-    handleDelete() {},
+    handleDelete(id) {
+      console.log('id:', id)
+    },
 
     // 分页、排序、筛选变化时触发
     // handleTableChange(pagination, filters, sorter) {
@@ -515,7 +530,9 @@ export default {
     // }
 
     // father方法
-    aa() {}
+    aa() {},
+    bb() {},
+    cc() {}
   },
   computed: {},
   mounted() {}