<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
      <crudOperation :permission="permission" />
      <!--表单组件-->
      <el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="1000px">
        <el-form ref="form" :model="form" :rules="rules" size="mini" label-width="160px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="木箱唯一码">
                <el-input v-model="form.package_box_sn" style="width: 300px;" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="箱内子卷数量">
                <el-input v-model="form.quanlity_in_box" style="width: 300px;" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="木箱自身重量">
                <el-input v-model="form.box_weight" style="width: 300px;" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="保质期">
                <el-input v-model="form.quality_guaran_period" style="width: 300px;" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="客户编码" prop="customer_name">
                <el-input v-model="form.customer_name" style="width: 300px;" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="客户名称" prop="customer_description">
                <el-input v-model="form.customer_description" style="width: 300px;" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="产品编码" prop="product_name">
                <el-input v-model="form.product_name" style="width: 300px;" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="产品描述" prop="product_description">
                <el-input v-model="form.product_description" style="width: 300px;" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="入库日期">
                <el-input v-model="form.date_of_FG_inbound" style="width: 300px;" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="子卷号" prop="container_name">
                <el-input v-model="form.container_name" style="width: 300px;" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="产品规格(幅宽)" prop="width">
                <el-input v-model="form.width" style="width: 300px;" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="产品厚度" prop="thickness">
                <el-input v-model="form.thickness" style="width: 300px;" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="单位面积质量" prop="mass_per_unit_area">
                <el-input v-model="form.mass_per_unit_area" style="width: 300px;" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="净重" prop="net_weight">
                <el-input v-model="form.net_weight" style="width: 300px;" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="长度" prop="length">
                <el-input v-model="form.length" style="width: 300px;" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="制造完成日期" prop="date_of_production">
                <el-input v-model="form.date_of_production" style="width: 300px;" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="计划外分切的子卷" prop="is_un_plan_production">
                <el-input v-model="form.is_un_plan_production" style="width: 300px;" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="子卷的物性值1">
                <el-input v-model="form.un_plan_product_property1" style="width: 300px;" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="子卷的物性值2">
                <el-input v-model="form.un_plan_product_property2" style="width: 300px;" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="子卷的物性值3">
                <el-input v-model="form.un_plan_product_property3" style="width: 300px;" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="木箱料号">
                <el-input v-model="form.box_type" style="width: 300px;" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="SAP批次">
                <el-input v-model="form.sap_pcsn" style="width: 300px;" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="是否重打外包装标签">
                <el-input v-model="form.isRePrintPackageBoxLabel" style="width: 300px;" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="是否拆包重打子卷标签">
                <el-input v-model="form.isUnPackBox" style="width: 300px;" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="销售订单及行号">
                <el-input v-model="form.sale_order_name" style="width: 300px;" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="备注">
                <el-input v-model="form.remark" style="width: 300px;" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="text" @click="crud.cancelCU">取消</el-button>
          <el-button :loading="crud.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
        </div>
      </el-dialog>
      <!--表格渲染-->
      <el-table ref="table" v-loading="crud.loading" style="width: 100%" :data="crud.data" size="mini" @selection-change="crud.selectionChangeHandler">
        <el-table-column type="selection" />
        <el-table-column prop="package_box_sn" label="木箱码" :min-width="flexWidth('package_box_sn',crud.data,'木箱码')" />
        <el-table-column prop="quanlity_in_box" label="箱内子卷数量" :min-width="flexWidth('quanlity_in_box',crud.data,'箱内子卷数量')" />
        <el-table-column prop="box_weight" label="木箱自身重量" :min-width="flexWidth('box_weight',crud.data,'木箱自身重量')" />
        <el-table-column prop="quality_guaran_period" label="保质期" :min-width="flexWidth('quality_guaran_period',crud.data,'保质期')"/>
        <el-table-column v-if="false" prop="sale_order_name" label="销售订单及行号" class-name="leave-alone"/>
        <el-table-column prop="customer_description" label="客户名称" :min-width="flexWidth('customer_description',crud.data,'客户名称')" />
        <el-table-column v-if="false" prop="product_name" label="产品编码" :min-width="flexWidth('product_name',crud.data,'产品编码')" />
        <el-table-column prop="product_description" label="产品描述" :min-width="flexWidth('product_description',crud.data,'产品描述')"/>
        <el-table-column prop="date_of_FG_inbound" label="入库日期" :min-width="flexWidth('date_of_FG_inbound',crud.data,'入库日期')" />
        <el-table-column prop="container_name" label="子卷号" :min-width="flexWidth('container_name',crud.data,'子卷号')" />
        <el-table-column prop="sap_pcsn" label="sap批次" :min-width="flexWidth('sap_pcsn',crud.data,'SAP批次')" />
        <el-table-column prop="width" label="产品规格(幅宽)" :min-width="flexWidth('width',crud.data,'产品规格(幅宽)')" />
        <el-table-column prop="thickness" label="产品厚度" :min-width="flexWidth('thickness',crud.data,'产品厚度')" />
        <el-table-column prop="mass_per_unit_area" label="单位面积质量" :formatter="crud.formatNum3" :min-width="flexWidth('mass_per_unit_area',crud.data,'单位面积质量')" />
        <el-table-column prop="net_weight" label="净重" :formatter="crud.formatNum3" :min-width="flexWidth('net_weight',crud.data,'净重')" />
        <el-table-column prop="length" label="长度" :formatter="crud.formatNum3" :min-width="flexWidth('length',crud.data,'长度')" />
        <el-table-column prop="date_of_production" label="制造完成日期" :min-width="flexWidth('date_of_production',crud.data,'制造完成日期')" />
        <el-table-column prop="is_un_plan_production" label="计划外分切的子卷" :min-width="flexWidth('is_un_plan_production',crud.data,'计划外分切的子卷')" >
          <template slot-scope="scope">
            {{ dict.label.IS_OR_NOT[scope.row.is_un_plan_production] }}
          </template>
        </el-table-column>
        <el-table-column prop="box_type" label="木箱料号" :min-width="flexWidth('box_type',crud.data,'木箱料号')" />
        <el-table-column prop="un_plan_product_property1" label="子卷的物性值1" :min-width="flexWidth('un_plan_product_property1',crud.data,'子卷的物性值1')" />
        <el-table-column prop="un_plan_product_property2" label="子卷的物性值2" :min-width="flexWidth('un_plan_product_property2',crud.data,'子卷的物性值2')" />
        <el-table-column prop="un_plan_product_property3" label="子卷的物性值3" :min-width="flexWidth('un_plan_product_property3',crud.data,'子卷的物性值3')" />
        <el-table-column prop="remark" label="备注" :min-width="flexWidth('remark',crud.data,'备注')" />
        <el-table-column prop="create_name" label="创建人" :min-width="flexWidth('create_name',crud.data,'创建人')" />
        <el-table-column prop="create_time" label="创建时间" :min-width="flexWidth('create_time',crud.data,'创建时间')" />
        <el-table-column prop="status" label="状态" :min-width="flexWidth('status',crud.data,'状态')" >
          <template slot-scope="scope">
            {{ dict.label.sub_package_relation[scope.row.status] }}
          </template>
        </el-table-column>
        <el-table-column prop="isRePrintPackageBoxLabel" label="是否需要重打外包装标签" :min-width="flexWidth('isRePrintPackageBoxLabel',crud.data,'是否需要重打外包装标签')" />
        <el-table-column prop="isUnPackBox" label="是否需要拆包重打子卷标签" :min-width="flexWidth('isUnPackBox',crud.data,'是否需要拆包重打子卷标签')" />
        <el-table-column v-permission="[]" label="操作" align="center" fixed="right" min-width="120">
          <template slot-scope="scope">
            <udOperation
              :data="scope.row"
              :permission="permission"
            />
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination />
    </div>
  </div>
</template>

<script>
import crudSubpackagerelation from './subpackagerelation'
import CRUD, { crud, form, header, presenter } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'

const defaultForm = { workorder_id: null, package_box_sn: null, quanlity_in_box: null, box_weight: null, quality_guaran_period: null, sale_order_name: null, customer_name: null, customer_description: null, product_name: null, product_description: null, date_of_FG_inbound: null, container_name: null, width: null, thickness: null, mass_per_unit_area: null, net_weight: null, length: null, date_of_production: null, is_un_plan_production: null, un_plan_product_property1: null, un_plan_product_property2: null, un_plan_product_property3: null, box_type: null, sap_pcsn: null, remark: null, create_id: null, create_name: null, create_time: null, status: null, isRePrintPackageBoxLabel: null, isUnPackBox: null }
export default {
  name: 'Subpackagerelation',
  dicts: ['sub_package_relation', 'IS_OR_NOT'],
  components: { pagination, crudOperation, rrOperation, udOperation },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  cruds() {
    return CRUD({ title: '子卷包装关系', url: 'api/subpackagerelation', idField: 'workorder_id', sort: 'workorder_id,desc', crudMethod: { ...crudSubpackagerelation }})
  },
  data() {
    return {
      permission: {
      },
      rules: {
        customer_description: [
          { required: true, message: '客户名称不能为空', trigger: 'blur' }
        ],
        product_name: [
          { required: true, message: '产品编码不能为空', trigger: 'blur' }
        ],
        product_description: [
          { required: true, message: '产品描述不能为空', trigger: 'blur' }
        ],
        container_name: [
          { required: true, message: '子卷号不能为空', trigger: 'blur' }
        ],
        width: [
          { required: true, message: '产品规格(幅宽)不能为空', trigger: 'blur' }
        ],
        thickness: [
          { required: true, message: '产品厚度不能为空', trigger: 'blur' }
        ],
        mass_per_unit_area: [
          { required: true, message: '单位面积质量不能为空', trigger: 'blur' }
        ],
        net_weight: [
          { required: true, message: '净重不能为空', trigger: 'blur' }
        ],
        length: [
          { required: true, message: '长度不能为空', trigger: 'blur' }
        ],
        date_of_production: [
          { required: true, message: '制造完成日期不能为空', trigger: 'blur' }
        ],
        is_un_plan_production: [
          { required: true, message: '计划外分切的子卷不能为空', trigger: 'blur' }
        ],
        status: [
          { required: true, message: '状态不能为空', trigger: 'blur' }
        ]
      }}
  },
  methods: {
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      return true
    }

  }
}
</script>

<style scoped>
.tableAuto.el-table .cell {
  white-space: nowrap;
}
</style>
