<template>
  <div>
    <!-- <el-row :gutter="10" class="mb8" v-if="mode != 'info'">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          >新增</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          @click="handleDelete"
          >删除</el-button
        >
      </el-col>
    </el-row> -->

    <el-form
      class="page-form"
      :model="form"
      ref="form"
      size="small"
      :inline="true"
      label-width="8em"
    >
      <el-row>
        <el-col :lg="6" :md="8" :sm="12" :xs="12"
          ><el-form-item label="指令号" prop="clientCmd"
            ><el-input
              v-model="form.clientCmd"
              placeholder="请输入指令号"
            ></el-input></el-form-item
        ></el-col>
        <el-col :lg="6" :md="8" :sm="12" :xs="12"
          ><el-form-item label="LOSS数" prop="lossNum"
            ><el-input
              v-model="form.lossNum"
              placeholder="请输入LOSS数"
            ></el-input></el-form-item
        ></el-col>
        <el-col :lg="6" :md="8" :sm="12" :xs="12"
          ><el-form-item label="销售凭证" prop="salesVoucher"
            ><el-input
              v-model="form.salesVoucher"
              placeholder="请输入销售凭证"
            ></el-input></el-form-item
        ></el-col>
        <el-col :lg="6" :md="8" :sm="12" :xs="12"
          ><el-form-item label="销售凭证项目" prop="salesVoucherItem"
            ><el-input
              v-model="form.salesVoucherItem"
              placeholder="请输入销售凭证项目"
            ></el-input></el-form-item
        ></el-col>
        <el-col :lg="6" :md="8" :sm="12" :xs="12"
          ><el-form-item label="客户编号" prop="clientCode"
            ><el-input
              v-model="form.clientCode"
              placeholder="请输入客户编号"
            ></el-input></el-form-item
        ></el-col>
        <el-col :lg="6" :md="8" :sm="12" :xs="12"
          ><el-form-item label="尺码组" prop="sizeGroup"
            ><el-input
              v-model="form.sizeGroup"
              placeholder="请输入尺码组"
            ></el-input></el-form-item
        ></el-col>
        <el-col :lg="6" :md="8" :sm="12" :xs="12"
          ><el-form-item label="尺码单位" prop="clientSizeUnit"
            ><el-input
              v-model="form.clientSizeUnit"
              placeholder="请输入尺码单位"
            ></el-input></el-form-item
        ></el-col>
        <el-col :lg="6" :md="8" :sm="12" :xs="12"
          ><el-form-item label="型体号" prop="typeNo"
            ><el-input
              v-model="form.typeNo"
              placeholder="请输入型体号"
            ></el-input></el-form-item
        ></el-col>
        <el-col :lg="6" :md="8" :sm="12" :xs="12"
          ><el-form-item label="配色号" prop="colorNo"
            ><el-input
              v-model="form.colorNo"
              placeholder="请输入配色号"
            ></el-input></el-form-item
        ></el-col>
        <el-col :lg="6" :md="8" :sm="12" :xs="12"
          ><el-form-item label="颜色" prop="color"
            ><el-input
              v-model="form.color"
              placeholder="请输入颜色"
            ></el-input></el-form-item
        ></el-col>
        <el-col :lg="6" :md="8" :sm="12" :xs="12"
          ><el-form-item label="销线" prop="salePath"
            ><el-input
              v-model="form.salePath"
              placeholder="请输入销线"
            ></el-input></el-form-item
        ></el-col>
        <el-col :lg="6" :md="8" :sm="12" :xs="12"
          ><el-form-item label="段别" prop="segment"
            ><el-input
              v-model="form.segment"
              placeholder="请输入段别"
            ></el-input></el-form-item
        ></el-col>
        <el-col :lg="6" :md="8" :sm="12" :xs="12"
          ><el-form-item label="季度" prop="quarter"
            ><el-input
              v-model="form.quarter"
              placeholder="请输入季度"
            ></el-input></el-form-item
        ></el-col>
        <el-col :lg="6" :md="8" :sm="12" :xs="12"
          ><el-form-item label="整/半码" prop="wholeSize"
            ><el-input
              v-model="form.wholeSize"
              placeholder="请输入整/半码"
            ></el-input></el-form-item
        ></el-col>
        <el-col :lg="6" :md="8" :sm="12" :xs="12"
          ><el-form-item label="特殊SIZE" prop="specSize"
            ><el-input
              v-model="form.specSize"
              placeholder="请输入特殊SIZE"
            ></el-input></el-form-item
        ></el-col>
        <el-col :lg="6" :md="8" :sm="12" :xs="12"
          ><el-form-item label="PO#" prop="poNo"
            ><el-input
              v-model="form.poNo"
              placeholder="请输入PO#"
            ></el-input></el-form-item
        ></el-col>
        <el-col :lg="6" :md="8" :sm="12" :xs="12"
          ><el-form-item label="WIP#" prop="wipNo"
            ><el-input
              v-model="form.wipNo"
              placeholder="请输入WIP#"
            ></el-input></el-form-item
        ></el-col>
        <el-col :lg="6" :md="8" :sm="12" :xs="12"
          ><el-form-item label="装箱数" prop="packingNum"
            ><el-input
              v-model="form.packingNum"
              placeholder="请输入装箱数"
            ></el-input></el-form-item
        ></el-col>
        <el-col :lg="6" :md="8" :sm="12" :xs="12"
          ><el-form-item label="产地" prop="region"
            ><el-input
              v-model="form.region"
              placeholder="请输入产地"
            ></el-input></el-form-item
        ></el-col>
        <el-col :lg="6" :md="8" :sm="12" :xs="12"
          ><el-form-item label="周期" prop="cycle"
            ><el-input
              v-model="form.cycle"
              placeholder="请输入周期"
            ></el-input></el-form-item
        ></el-col>
        <el-col :lg="6" :md="8" :sm="12" :xs="12"
          ><el-form-item label="SK编号" prop="skNo"
            ><el-input
              v-model="form.skNo"
              placeholder="请输入SK编号"
            ></el-input></el-form-item
        ></el-col>
        <el-col :lg="6" :md="8" :sm="12" :xs="12"
          ><el-form-item label="专利号" prop="patentNo"
            ><el-input
              v-model="form.patentNo"
              placeholder="请输入专利号"
            ></el-input></el-form-item
        ></el-col>
        <el-col :lg="6" :md="8" :sm="12" :xs="12"
          ><el-form-item label="材质描述" prop="materialDesc"
            ><el-input
              v-model="form.materialDesc"
              placeholder="请输入材质描述"
            ></el-input></el-form-item
        ></el-col>
        <el-col :lg="6" :md="8" :sm="12" :xs="12"
          ><el-form-item label="签收人" prop="signer"
            ><el-input
              v-model="form.signer"
              placeholder="请输入签收人"
            ></el-input></el-form-item
        ></el-col>
        <el-col :lg="6" :md="8" :sm="12" :xs="12"
          ><el-form-item label="SHIP TO ID" prop="shipToId"
            ><el-input
              v-model="form.shipToId"
              placeholder="请输入SHIP TO ID"
            ></el-input></el-form-item
        ></el-col>
        <el-col :lg="6" :md="8" :sm="12" :xs="12"
          ><el-form-item label="产品规格" prop="prodSpec"
            ><el-input
              v-model="form.prodSpec"
              placeholder="请输入产品规格"
            ></el-input></el-form-item
        ></el-col>
        <el-col :lg="6" :md="8" :sm="12" :xs="12"
          ><el-form-item label="产品用途" prop="prodUsage"
            ><el-input
              v-model="form.prodUsage"
              placeholder="请输入产品用途"
            ></el-input></el-form-item
        ></el-col>
        <el-col :lg="6" :md="8" :sm="12" :xs="12"
          ><el-form-item label="厚度（丝）" prop="thickness"
            ><el-input
              v-model="form.thickness"
              placeholder="请输入厚度（丝）"
            ></el-input></el-form-item
        ></el-col>
        <el-col :lg="6" :md="8" :sm="12" :xs="12"
          ><el-form-item label="包装方式" prop="packMode"
            ><el-input
              v-model="form.packMode"
              placeholder="请输入包装方式"
            ></el-input></el-form-item
        ></el-col>
        <el-col :lg="6" :md="8" :sm="12" :xs="12"
          ><el-form-item label="印刷方向" prop="printingDirection"
            ><el-input
              v-model="form.printingDirection"
              placeholder="请输入印刷方向"
            ></el-input></el-form-item
        ></el-col>
        <el-col :lg="6" :md="8" :sm="12" :xs="12"
          ><el-form-item label="工厂代号" prop="plantCode"
            ><el-input
              v-model="form.plantCode"
              placeholder="请输入工厂代号"
            ></el-input></el-form-item
        ></el-col>
        <el-col :lg="6" :md="8" :sm="12" :xs="12"
          ><el-form-item label="包装数量" prop="packNum"
            ><el-input
              v-model="form.packNum"
              placeholder="请输入包装数量"
            ></el-input></el-form-item
        ></el-col>
        <el-col :lg="6" :md="8" :sm="12" :xs="12">
          <el-form-item label="按指令包装" prop="packByDirective">
            <el-select
              v-model="form.packByDirective"
              placeholder="请选择是否按指令包装"
            >
              <el-option
                v-for="dict in dict.type.sys_yes_no"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :lg="6" :md="8" :sm="12" :xs="12">
          <el-form-item label="按size包装" prop="packBySize">
            <el-select
              v-model="form.packBySize"
              placeholder="请选择是否按size包装"
            >
              <el-option
                v-for="dict in dict.type.sys_yes_no"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :lg="6" :md="8" :sm="12" :xs="12"
          ><el-form-item label="采购组织" prop="purchaseOrg"
            ><el-input
              v-model="form.purchaseOrg"
              placeholder="请输入采购组织"
            ></el-input></el-form-item
        ></el-col>
      </el-row>
    </el-form>

    <!-- <el-table :data="tableData">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column
        label="指令号"
        align="center"
        prop="clientCmd"
        width="120"
      />
      <el-table-column
        label="LOSS数"
        align="center"
        prop="lossNum"
        width="120"
      />
      <el-table-column
        label="销售凭证"
        align="center"
        prop="salesVoucher"
        width="120"
      />
      <el-table-column
        label="销售凭证项目"
        align="center"
        prop="salesVoucherItem"
        width="120"
      />
      <el-table-column
        label="客户编号"
        align="center"
        prop="clientCode"
        width="120"
      />
      <el-table-column
        label="尺码组"
        align="center"
        prop="sizeGroup"
        width="120"
      />
      <el-table-column
        label="尺码单位"
        align="center"
        prop="clientSizeUnit"
        width="120"
      />
      <el-table-column
        label="指令号"
        align="center"
        prop="clientCmd"
        width="120"
      />
      <el-table-column
        label="型体号"
        align="center"
        prop="typeNo"
        width="120"
      />
      <el-table-column
        label="配色号"
        align="center"
        prop="colorNo"
        width="120"
      />
      <el-table-column label="颜色" align="center" prop="color" width="120" />
      <el-table-column
        label="销线"
        align="center"
        prop="salePath"
        width="120"
      />
      <el-table-column label="段别" align="center" prop="segment" width="120" />
      <el-table-column label="季度" align="center" prop="quarter" width="120" />
      <el-table-column
        label="整/半码"
        align="center"
        prop="wholeSize"
        width="120"
      />
      <el-table-column
        label="特殊SIZE"
        align="center"
        prop="specSize"
        width="120"
      />
      <el-table-column label="PO#" align="center" prop="poNo" width="120" />
      <el-table-column label="WIP#" align="center" prop="wipNo" width="120" />
      <el-table-column
        label="装箱数"
        align="center"
        prop="packingNum"
        width="120"
      />
      <el-table-column label="产地" align="center" prop="region" width="120" />
      <el-table-column label="周期" align="center" prop="cycle" width="120" />
      <el-table-column label="SK编号" align="center" prop="skNo" width="120" />
      <el-table-column
        label="专利号"
        align="center"
        prop="patentNo"
        width="120"
      />
      <el-table-column
        label="材质描述"
        align="center"
        prop="materialDesc"
        width="120"
      />
      <el-table-column
        label="签收人"
        align="center"
        prop="signer"
        width="120"
      />
      <el-table-column
        label="SHIP TO ID"
        align="center"
        prop="shipToId"
        width="120"
      />
      <el-table-column
        label="产品规格"
        align="center"
        prop="prodSpec"
        width="120"
      />
      <el-table-column
        label="产品用途"
        align="center"
        prop="prodUsage"
        width="120"
      />
      <el-table-column
        label="厚度（丝）"
        align="center"
        prop="thickness"
        width="120"
      />
      <el-table-column
        label="包装方式"
        align="center"
        prop="packMode"
        width="120"
      />
      <el-table-column
        label="印刷方向"
        align="center"
        prop="printingDirection"
        width="120"
      />
      <el-table-column
        label="工厂代号"
        align="center"
        prop="plantCode"
        width="120"
      />
      <el-table-column
        label="采购组织"
        align="center"
        prop="purchaseOrg"
        width="120"
      />
      <el-table-column
        v-if="mode != 'info'"
        label="操作"
        align="center"
        width="120"
      >
        <template slot-scope="{ row, $index }">
          <el-button
            type="text"
            icon="el-icon-edit"
            size="small"
            @click="updateRow(row, $index)"
            >修改</el-button
          >
          <el-button
            type="text"
            icon="el-icon-delete"
            size="small"
            @click="deleteRow($index)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table> -->
  </div>
</template>

<script>
export default {
  components: {},
  inject: ["mode"],
  dicts: ["sys_yes_no"],
  data() {
    return {
      /**弹窗状态 */
      showFlag: false,
      /**表格数据 */
      tableData: [],
      /**表单规则 */
      rules: {},
      /**多选 */
      selection: [],
      optType: "add",
      /**表单初始化数据 */
      form: {
        clientCmd: "",
        lossNum: "",
        salesVoucher: "",
        salesVoucherItem: "",
        clientCode: "",
        sizeGroup: "",
        clientSizeUnit: "",
        typeNo: "",
        colorNo: "",
        color: "",
        salePath: "",
        segment: "",
        quarter: "",
        wholeSize: "",
        specSize: "",
        poNo: "",
        wipNo: "",
        packingNum: "",
        region: "",
        cycle: "",
        skNo: "",
        patentNo: "",
        materialDesc: "",
        signer: "",
        shipToId: "",
        prodSpec: "",
        prodUsage: "",
        thickness: "",
        packMode: "",
        printingDirection: "",
        plantCode: "",
        packNum: "",
        packByDirective: "",
        packBySize: "",
        purchaseOrg: "",
      },
      currentRowIdx: undefined,
    };
  },
  created() {},
  methods: {
    /**多选 */
    handleSelectionChange(val) {
      this.selection = val;
    },
    /**删除操作 */
    handleDelete() {},
    /**添加操作 */
    handleAdd() {
      this.resetForm();
      this.showFlag = true;
      this.optType = "add";
    },
    /**更新行 */
    updateRow(row, idx) {
      Object.assign(this.form, row);
      this.currentRowIdx = idx;
      this.optType = "edit";
      this.showFlag = true;
    },
    /**删除行 */
    deleteRow(index) {
      this.tableData.splice(index, 1);
    },
    /**表单提交 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.optType == "add") {
            this.tableData.unshift({ ...this.form });
          } else {
            this.tableData.splice(this.currentRowIdx, 1, this.form);
          }
          this.showFlag = false;
        }
      });
    },
    /**重置表单 */
    resetForm() {
      this.form = {
        clientCmd: "",
        lossNum: "",
        salesVoucher: "",
        salesVoucherItem: "",
        clientCode: "",
        sizeGroup: "",
        clientSizeUnit: "",
        typeNo: "",
        colorNo: "",
        color: "",
        salePath: "",
        segment: "",
        quarter: "",
        wholeSize: "",
        specSize: "",
        poNo: "",
        wipNo: "",
        packingNum: "",
        region: "",
        cycle: "",
        skNo: "",
        patentNo: "",
        materialDesc: "",
        signer: "",
        shipToId: "",
        prodSpec: "",
        prodUsage: "",
        thickness: "",
        packMode: "",
        printingDirection: "",
        plantCode: "",
        packNum: "",
        packByDirective: "",
        packBySize: "",
        purchaseOrg: "",
      };
    },
    /**重置组件状态 */
    resetState() {
      this.resetForm();
      this.tableData = [];
    },
    /**获取组件数据 */
    getComData() {
      return this.tableData;
    },
  },
};
</script>

<style></style>
