sen-yu-new-web/src/views/shipment-details/addShipDetDrawer.vue

<template>
  <!-- 新增发运明细 -->
  <div id="AddShipDetDrawer">
    <a-drawer
      title="新增发运明细"
      width="89%"
      placement="right"
      :closable="true"
      :visible="visible"
      @close="handleCancel"
    >
      <!-- 主表信息 填写-->
      <a-card :bordered="true">
        <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>
      </a-card>
      <!--  参照订单数据 増行-->
      <a-card :bordered="true" style="margin:10px 0">
        <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>

        <!-- 子表  :model="form" :pagination="ipagination" -->
        <a-spin :spinning="confirmLoading">
          <a-form-model ref="formRef" :rules="validatorRules">
            <a-table
              bordered
              :row-key="record => record.id"
              :columns="columns"
              :data-source="data"
              :loading="loading"
              :pagination="false"
              :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>
      </a-card>
      <!-- 页面底部保存取消 -->
      <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>
  </div>
</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'
        }
      ],
      // 子表数据
      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;
// }

// 抽屉里的card样式
/deep/ .ant-drawer-content {
  background-color: #f0f2f5;
}
/deep/ .ant-drawer-body {
  padding: 10px;
}
</style>