<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
                 label-width="68px">
<!--                        <el-form-item label="工厂编码" prop="factoryCode">-->
<!--                            <el-input-->
<!--                                    v-model="queryParams.factoryCode"-->
<!--                                    placeholder="请输入工厂编码"-->
<!--                                    clearable-->
<!--                                    @keyup.enter.native="handleQuery"-->
<!--                            />-->
<!--                        </el-form-item>-->
                        <el-form-item label="生产订单号" prop="productOrder">
                            <el-input
                                    v-model="queryParams.productOrder"
                                    placeholder="请输入生产订单号"
                                    clearable
                                    @keyup.enter.native="handleQuery"
                            />
                        </el-form-item>
<!--                        <el-form-item label="仓库编码" prop="whCode">-->
<!--                            <el-input-->
<!--                                    v-model="queryParams.whCode"-->
<!--                                    placeholder="请输入仓库编码"-->
<!--                                    clearable-->
<!--                                    @keyup.enter.native="handleQuery"-->
<!--                            />-->
<!--                        </el-form-item>-->
<!--                        <el-form-item label="库区编码" prop="waCode">-->
<!--                            <el-input-->
<!--                                    v-model="queryParams.waCode"-->
<!--                                    placeholder="请输入库区编码"-->
<!--                                    clearable-->
<!--                                    @keyup.enter.native="handleQuery"-->
<!--                            />-->
<!--                        </el-form-item>-->
<!--                        <el-form-item label="库位编码" prop="wlCode">-->
<!--                            <el-input-->
<!--                                    v-model="queryParams.wlCode"-->
<!--                                    placeholder="请输入库位编码"-->
<!--                                    clearable-->
<!--                                    @keyup.enter.native="handleQuery"-->
<!--                            />-->
<!--                        </el-form-item>-->
                        <el-form-item label="产品名称" prop="productName">
                            <el-input
                                    v-model="queryParams.productName"
                                    placeholder="请输入产品名称"
                                    clearable
                                    @keyup.enter.native="handleQuery"
                            />
                        </el-form-item>
                        <el-form-item label="产品编码" prop="productCode">
                            <el-input
                                    v-model="queryParams.productCode"
                                    placeholder="请输入产品编码"
                                    clearable
                                    @keyup.enter.native="handleQuery"
                            />
                        </el-form-item>
<!--                        <el-form-item label="产品分类" prop="productSort">-->
<!--                            <el-input-->
<!--                                    v-model="queryParams.productSort"-->
<!--                                    placeholder="请输入产品分类"-->
<!--                                    clearable-->
<!--                                    @keyup.enter.native="handleQuery"-->
<!--                            />-->
<!--                        </el-form-item>-->
<!--                        <el-form-item label="规格型号" prop="specification">-->
<!--                            <el-input-->
<!--                                    v-model="queryParams.specification"-->
<!--                                    placeholder="请输入规格型号"-->
<!--                                    clearable-->
<!--                                    @keyup.enter.native="handleQuery"-->
<!--                            />-->
<!--                        </el-form-item>-->
<!--                        <el-form-item label="单位" prop="unitOfMeasure">-->
<!--                            <el-input-->
<!--                                    v-model="queryParams.unitOfMeasure"-->
<!--                                    placeholder="请输入单位"-->
<!--                                    clearable-->
<!--                                    @keyup.enter.native="handleQuery"-->
<!--                            />-->
<!--                        </el-form-item>-->
<!--                        <el-form-item label="计划入库数量" prop="planQuantity">-->
<!--                            <el-input-->
<!--                                    v-model="queryParams.planQuantity"-->
<!--                                    placeholder="请输入计划入库数量"-->
<!--                                    clearable-->
<!--                                    @keyup.enter.native="handleQuery"-->
<!--                            />-->
<!--                        </el-form-item>-->
<!--                        <el-form-item label="入库数量" prop="putQuantity">-->
<!--                            <el-input-->
<!--                                    v-model="queryParams.putQuantity"-->
<!--                                    placeholder="请输入入库数量"-->
<!--                                    clearable-->
<!--                                    @keyup.enter.native="handleQuery"-->
<!--                            />-->
<!--                        </el-form-item>-->
                        <el-form-item label="过账SAP凭证" prop="sapProof">
                            <el-input
                                    v-model="queryParams.sapProof"
                                    placeholder="请输入过账SAP凭证"
                                    clearable
                                    @keyup.enter.native="handleQuery"
                            />
                        </el-form-item>
                        <el-form-item label="过账SAP返回信息" prop="sapMessage">
                            <el-input
                                    v-model="queryParams.sapMessage"
                                    placeholder="请输入过账SAP返回信息"
                                    clearable
                                    @keyup.enter.native="handleQuery"
                            />
                        </el-form-item>
<!--                        <el-form-item label="入库时间" prop="putDate">-->
<!--                            <el-date-picker clearable-->
<!--                                            v-model="queryParams.putDate"-->
<!--                                            type="date"-->
<!--                                            value-format="yyyy-MM-dd"-->
<!--                                            placeholder="请选择入库时间">-->
<!--                            </el-date-picker>-->
<!--                        </el-form-item>-->
<!--                        <el-form-item label="预留字段1" prop="attr1">-->
<!--                            <el-input-->
<!--                                    v-model="queryParams.attr1"-->
<!--                                    placeholder="请输入预留字段1"-->
<!--                                    clearable-->
<!--                                    @keyup.enter.native="handleQuery"-->
<!--                            />-->
<!--                        </el-form-item>-->
<!--                        <el-form-item label="预留字段2" prop="attr2">-->
<!--                            <el-input-->
<!--                                    v-model="queryParams.attr2"-->
<!--                                    placeholder="请输入预留字段2"-->
<!--                                    clearable-->
<!--                                    @keyup.enter.native="handleQuery"-->
<!--                            />-->
<!--                        </el-form-item>-->
<!--                        <el-form-item label="预留字段3" prop="attr3">-->
<!--                            <el-input-->
<!--                                    v-model="queryParams.attr3"-->
<!--                                    placeholder="请输入预留字段3"-->
<!--                                    clearable-->
<!--                                    @keyup.enter.native="handleQuery"-->
<!--                            />-->
<!--                        </el-form-item>-->
<!--                        <el-form-item label="预留字段4" prop="attr4">-->
<!--                            <el-input-->
<!--                                    v-model="queryParams.attr4"-->
<!--                                    placeholder="请输入预留字段4"-->
<!--                                    clearable-->
<!--                                    @keyup.enter.native="handleQuery"-->
<!--                            />-->
<!--                        </el-form-item>-->
<!--                        <el-form-item label="预留字段5" prop="attr5">-->
<!--                            <el-input-->
<!--                                    v-model="queryParams.attr5"-->
<!--                                    placeholder="请输入预留字段5"-->
<!--                                    clearable-->
<!--                                    @keyup.enter.native="handleQuery"-->
<!--                            />-->
<!--                        </el-form-item>-->
<!--                        <el-form-item label="预留字段6" prop="attr6">-->
<!--                            <el-input-->
<!--                                    v-model="queryParams.attr6"-->
<!--                                    placeholder="请输入预留字段6"-->
<!--                                    clearable-->
<!--                                    @keyup.enter.native="handleQuery"-->
<!--                            />-->
<!--                        </el-form-item>-->
<!--                        <el-form-item label="预留字段7" prop="attr7">-->
<!--                            <el-input-->
<!--                                    v-model="queryParams.attr7"-->
<!--                                    placeholder="请输入预留字段7"-->
<!--                                    clearable-->
<!--                                    @keyup.enter.native="handleQuery"-->
<!--                            />-->
<!--                        </el-form-item>-->
<!--                        <el-form-item label="预留字段8" prop="attr8">-->
<!--                            <el-input-->
<!--                                    v-model="queryParams.attr8"-->
<!--                                    placeholder="请输入预留字段8"-->
<!--                                    clearable-->
<!--                                    @keyup.enter.native="handleQuery"-->
<!--                            />-->
<!--                        </el-form-item>-->
<!--                        <el-form-item label="预留字段9" prop="attr9">-->
<!--                            <el-input-->
<!--                                    v-model="queryParams.attr9"-->
<!--                                    placeholder="请输入预留字段9"-->
<!--                                    clearable-->
<!--                                    @keyup.enter.native="handleQuery"-->
<!--                            />-->
<!--                        </el-form-item>-->
<!--                        <el-form-item label="预留字段10" prop="attr10">-->
<!--                            <el-input-->
<!--                                    v-model="queryParams.attr10"-->
<!--                                    placeholder="请输入预留字段10"-->
<!--                                    clearable-->
<!--                                    @keyup.enter.native="handleQuery"-->
<!--                            />-->
<!--                        </el-form-item>-->
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button
                        type="primary"
                        plain
                        icon="el-icon-plus"
                        size="mini"
                        @click="handleAdd"
                        v-hasPermi="['wms:ruturn:add']"
                >新增
                </el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button
                        type="success"
                        plain
                        icon="el-icon-edit"
                        size="mini"
                        :disabled="single"
                        @click="handleUpdate"
                        v-hasPermi="['wms:ruturn:edit']"
                >修改
                </el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button
                        type="danger"
                        plain
                        icon="el-icon-delete"
                        size="mini"
                        :disabled="multiple"
                        @click="handleDelete"
                        v-hasPermi="['wms:ruturn:remove']"
                >删除
                </el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button
                        type="warning"
                        plain
                        icon="el-icon-download"
                        size="mini"
                        @click="handleExport"
                        v-hasPermi="['wms:ruturn:export']"
                >导出
                </el-button>
            </el-col>
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <el-table v-loading="loading" :data="ruturnList" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center"/>
                    <el-table-column label="ID" align="center" prop="id"  v-if="false" />
                    <el-table-column label="工厂编码" align="center" prop="factoryCode" v-if="false" />
                    <el-table-column label="生产订单号" align="center" prop="productOrder"/>
                    <el-table-column label="仓库编码" align="center" prop="whCode"/>
                    <el-table-column label="库区编码" align="center" prop="waCode"/>
                    <el-table-column label="库位编码" align="center" prop="wlCode"/>
                    <el-table-column label="产品名称" align="center" prop="productName"/>
                    <el-table-column label="产品编码" align="center" prop="productCode"/>
                    <el-table-column label="产品分类" align="center" prop="productSort" v-if="false" />
                    <el-table-column label="规格型号" align="center" prop="specification" v-if="false" />
                    <el-table-column label="单位" align="center" prop="unitOfMeasure"/>
                    <el-table-column label="计划入库数量" align="center" prop="planQuantity"/>
                    <el-table-column label="入库数量" align="center" prop="putQuantity"/>
                    <el-table-column label="入库状态" align="center" prop="status"/>
                    <el-table-column label="过账SAP状态" align="center" prop="sapStatus"/>
                    <el-table-column label="过账SAP凭证" align="center" prop="sapProof"/>
                    <el-table-column label="过账SAP返回信息" align="center" prop="sapMessage"/>
                    <el-table-column label="入库时间" align="center" prop="putDate" width="180">
                        <template slot-scope="scope">
                            <span>{{ parseTime(scope.row.putDate, '{y}-{m}-{d}') }}</span>
                        </template>
                    </el-table-column>
<!--                    <el-table-column label="预留字段1" align="center" prop="attr1"/>-->
<!--                    <el-table-column label="预留字段2" align="center" prop="attr2"/>-->
<!--                    <el-table-column label="预留字段3" align="center" prop="attr3"/>-->
<!--                    <el-table-column label="预留字段4" align="center" prop="attr4"/>-->
<!--                    <el-table-column label="预留字段5" align="center" prop="attr5"/>-->
<!--                    <el-table-column label="预留字段6" align="center" prop="attr6"/>-->
<!--                    <el-table-column label="预留字段7" align="center" prop="attr7"/>-->
<!--                    <el-table-column label="预留字段8" align="center" prop="attr8"/>-->
<!--                    <el-table-column label="预留字段9" align="center" prop="attr9"/>-->
<!--                    <el-table-column label="预留字段10" align="center" prop="attr10"/>-->
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="text"
                            icon="el-icon-edit"
                            @click="handleUpdate(scope.row)"
                            v-hasPermi="['wms:ruturn:edit']"
                    >修改
                    </el-button>
                    <el-button
                            size="mini"
                            type="text"
                            icon="el-icon-delete"
                            @click="handleDelete(scope.row)"
                            v-hasPermi="['wms:ruturn:remove']"
                    >删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination
                v-show="total>0"
                :total="total"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                @pagination="getList"
        />

        <!-- 添加或修改成品退货入库对话框 -->
        <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                                <el-form-item label="工厂编码" prop="factoryCode">
                                    <el-input v-model="form.factoryCode" placeholder="请输入工厂编码"/>
                                </el-form-item>
                                <el-form-item label="生产订单号" prop="productOrder">
                                    <el-input v-model="form.productOrder" placeholder="请输入生产订单号"/>
                                </el-form-item>
                                <el-form-item label="仓库编码" prop="whCode">
                                    <el-input v-model="form.whCode" placeholder="请输入仓库编码"/>
                                </el-form-item>
                                <el-form-item label="库区编码" prop="waCode">
                                    <el-input v-model="form.waCode" placeholder="请输入库区编码"/>
                                </el-form-item>
                                <el-form-item label="库位编码" prop="wlCode">
                                    <el-input v-model="form.wlCode" placeholder="请输入库位编码"/>
                                </el-form-item>
                                <el-form-item label="产品名称" prop="productName">
                                    <el-input v-model="form.productName" placeholder="请输入产品名称"/>
                                </el-form-item>
                                <el-form-item label="产品编码" prop="productCode">
                                    <el-input v-model="form.productCode" placeholder="请输入产品编码"/>
                                </el-form-item>
                                <el-form-item label="产品分类" prop="productSort">
                                    <el-input v-model="form.productSort" placeholder="请输入产品分类"/>
                                </el-form-item>
                                <el-form-item label="规格型号" prop="specification">
                                    <el-input v-model="form.specification" placeholder="请输入规格型号"/>
                                </el-form-item>
                                <el-form-item label="单位" prop="unitOfMeasure">
                                    <el-input v-model="form.unitOfMeasure" placeholder="请输入单位"/>
                                </el-form-item>
                                <el-form-item label="计划入库数量" prop="planQuantity">
                                    <el-input v-model="form.planQuantity" placeholder="请输入计划入库数量"/>
                                </el-form-item>
                                <el-form-item label="入库数量" prop="putQuantity">
                                    <el-input v-model="form.putQuantity" placeholder="请输入入库数量"/>
                                </el-form-item>
                                <el-form-item label="过账SAP凭证" prop="sapProof">
                                    <el-input v-model="form.sapProof" placeholder="请输入过账SAP凭证"/>
                                </el-form-item>
                                <el-form-item label="过账SAP返回信息" prop="sapMessage">
                                    <el-input v-model="form.sapMessage" placeholder="请输入过账SAP返回信息"/>
                                </el-form-item>
                                <el-form-item label="入库时间" prop="putDate">
                                    <el-date-picker clearable
                                                    v-model="form.putDate"
                                                    type="date"
                                                    value-format="yyyy-MM-dd"
                                                    placeholder="请选择入库时间">
                                    </el-date-picker>
                                </el-form-item>
                                <el-form-item label="预留字段1" prop="attr1">
                                    <el-input v-model="form.attr1" placeholder="请输入预留字段1"/>
                                </el-form-item>
                                <el-form-item label="预留字段2" prop="attr2">
                                    <el-input v-model="form.attr2" placeholder="请输入预留字段2"/>
                                </el-form-item>
                                <el-form-item label="预留字段3" prop="attr3">
                                    <el-input v-model="form.attr3" placeholder="请输入预留字段3"/>
                                </el-form-item>
                                <el-form-item label="预留字段4" prop="attr4">
                                    <el-input v-model="form.attr4" placeholder="请输入预留字段4"/>
                                </el-form-item>
                                <el-form-item label="预留字段5" prop="attr5">
                                    <el-input v-model="form.attr5" placeholder="请输入预留字段5"/>
                                </el-form-item>
                                <el-form-item label="预留字段6" prop="attr6">
                                    <el-input v-model="form.attr6" placeholder="请输入预留字段6"/>
                                </el-form-item>
                                <el-form-item label="预留字段7" prop="attr7">
                                    <el-input v-model="form.attr7" placeholder="请输入预留字段7"/>
                                </el-form-item>
                                <el-form-item label="预留字段8" prop="attr8">
                                    <el-input v-model="form.attr8" placeholder="请输入预留字段8"/>
                                </el-form-item>
                                <el-form-item label="预留字段9" prop="attr9">
                                    <el-input v-model="form.attr9" placeholder="请输入预留字段9"/>
                                </el-form-item>
                                <el-form-item label="预留字段10" prop="attr10">
                                    <el-input v-model="form.attr10" placeholder="请输入预留字段10"/>
                                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import {
        listRuturn,
        getRuturn,
        delRuturn,
        addRuturn,
        updateRuturn } from "@/api/wms/ruturn";

    export default {
        name: "Ruturn",
        data() {
            return {
                // 遮罩层
                loading: true,
                // 选中数组
                ids: [],
                // 非单个禁用
                single: true,
                // 非多个禁用
                multiple: true,
                // 显示搜索条件
                showSearch: true,
                // 总条数
                total: 0,
                // 成品退货入库表格数据
                    ruturnList: [],
                // 弹出层标题
                title: "",
                // 是否显示弹出层
                open: false,
                // 查询参数
                queryParams: {
                    pageNum: 1,
                    pageSize: 10,
                    factoryCode: null,
                    productOrder: null,
                    whCode: null,
                    waCode: null,
                    wlCode: null,
                    productName: null,
                    productCode: null,
                    productSort: null,
                    specification: null,
                    unitOfMeasure: null,
                    planQuantity: null,
                    putQuantity: null,
                    status: null,
                    sapStatus: null,
                    sapProof: null,
                    sapMessage: null,
                    putDate: null,
                    attr1: null,
                    attr2: null,
                    attr3: null,
                    attr4: null,
                    attr5: null,
                    attr6: null,
                    attr7: null,
                    attr8: null,
                    attr9: null,
                    attr10: null,
        },
            // 表单参数
            form: {
            }
        ,
            // 表单校验
            rules: {
                        factoryCode: [
                        {
                            required: true, message: "工厂编码不能为空", trigger: "blur" }
                    ],
            }
        }
            ;
        },
        created() {
            this.getList();
        },
        methods: {
          /** 查询成品退货入库列表 */
          getList() {
            this.loading = true;
            listRuturn(this.queryParams).then(response => {
              this.ruturnList = response.rows;
              this.total = response.total;
              this.loading = false;
            });
          },
          // 取消按钮
          cancel() {
            this.open = false;
            this.reset();
          },
          // 表单重置
          reset() {
            this.form = {
              id: null,
              factoryCode: null,
              productOrder: null,
              whCode: null,
              waCode: null,
              wlCode: null,
              productName: null,
              productCode: null,
              productSort: null,
              specification: null,
              unitOfMeasure: null,
              planQuantity: null,
              putQuantity: null,
              status: null,
              sapStatus: null,
              sapProof: null,
              sapMessage: null,
              putDate: null,
              attr1: null,
              attr2: null,
              attr3: null,
              attr4: null,
              attr5: null,
              attr6: null,
              attr7: null,
              attr8: null,
              attr9: null,
              attr10: null,
              createBy: null,
              createTime: null,
              updateBy: null,
              updateTime: null
            }
            ;
            this.resetForm("form");
          },
          /** 搜索按钮操作 */
          handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
          },
          /** 重置按钮操作 */
          resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
          },
          // 多选框选中数据
          handleSelectionChange(selection) {
            this.ids = selection.map(item => item.id)
            this.single = selection.length !== 1
            this.multiple = !selection.length
          },
          /** 新增按钮操作 */
          handleAdd() {
            this.reset();
            this.open = true;
            this.title = "添加成品退货入库";
          },
          /** 修改按钮操作 */
          handleUpdate(row) {
            this.reset();
            const id =
              row.id || this.ids
            getRuturn(id).then(response => {
              this.form = response.data;
              this.open = true;
              this.title = "修改成品退货入库";
            });
          },
          /** 提交按钮 */
        }
    }
    ;
</script>
