<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="materialName">-->
<!--        <el-select v-model="queryParams.materialId" placeholder="请选择要报废的物料" clearable>-->
<!--          <el-option-->
<!--            v-for="dict in this.materialList"-->
<!--            :key="dict.materialId"-->
<!--            :label="dict.materialName"-->
<!--            :value="dict.materialId"-->
<!--          />-->
<!--        </el-select>-->
<!--      </el-form-item>-->
      <el-form-item label="报废物料" prop="materialName">
      <el-select v-model="queryParams.materialId" placeholder="请选择要报废的物料" clearable>
        <el-option
          v-for="dict in this.materialNameList"
          :key="dict.productId"
          :label="dict.productDesc"
          :value="dict.productId"
        />
      </el-select>
    </el-form-item>

<!--			<el-form-item label="报废单号" prop="scrapCode">-->
<!--				<el-input-->
<!--					v-model="queryParams.scrapCode"-->
<!--					placeholder="请输入报废单号"-->
<!--					clearable-->
<!--					@keyup.enter.native="handleQuery"-->
<!--				/>-->
<!--			</el-form-item>-->
<!--			<el-form-item label="物料ID" prop="materialId">-->
<!--				<el-input-->
<!--					v-model="queryParams.materialId"-->
<!--					placeholder="请输入物料ID"-->
<!--					clearable-->
<!--					@keyup.enter.native="handleQuery"-->
<!--				/>-->
<!--			</el-form-item>-->
<!--			<el-form-item label="物料编码" prop="materialCode">-->
<!--				<el-input-->
<!--					v-model="queryParams.materialCode"-->
<!--					placeholder="请输入物料编码"-->
<!--					clearable-->
<!--					@keyup.enter.native="handleQuery"-->
<!--				/>-->
<!--			</el-form-item>-->
<!--			<el-form-item label="物料名称" prop="materialName">-->
<!--				<el-input-->
<!--					v-model="queryParams.materialName"-->
<!--					placeholder="请输入物料名称"-->
<!--					clearable-->
<!--					@keyup.enter.native="handleQuery"-->
<!--				/>-->
<!--			</el-form-item>-->
      <el-col :offset="2" :span="8">
        <el-form-item label-width="100px" label="报废日期" prop="planComplete">
          <el-date-picker clearable
                          v-model="queryParams.createTime"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="选择计划完成日期"
          >
          </el-date-picker>
        </el-form-item>
      </el-col>
<!--			<el-form-item label="工位ID" prop="workCellId">-->
<!--				<el-input-->
<!--					v-model="queryParams.workCellId"-->
<!--					placeholder="请输入工位ID"-->
<!--					clearable-->
<!--					@keyup.enter.native="handleQuery"-->
<!--				/>-->
<!--			</el-form-item>-->
<!--			<el-form-item label="工位编码" prop="workCellCode">-->
<!--				<el-input-->
<!--					v-model="queryParams.workCellCode"-->
<!--					placeholder="请输入工位编码"-->
<!--					clearable-->
<!--					@keyup.enter.native="handleQuery"-->
<!--				/>-->
<!--			</el-form-item>-->
<!--			<el-form-item label="工位名称" prop="workCellName">-->
<!--				<el-input-->
<!--					v-model="queryParams.workCellName"-->
<!--					placeholder="请输入工位名称"-->
<!--					clearable-->
<!--					@keyup.enter.native="handleQuery"-->
<!--				/>-->
<!--			</el-form-item>-->
<!--			<el-form-item label="报废数量" prop="scrapQuality">-->
<!--				<el-input-->
<!--					v-model="queryParams.scrapQuality"-->
<!--					placeholder="请输入要报废数量"-->
<!--					clearable-->
<!--					@keyup.enter.native="handleQuery"-->
<!--				/>-->
<!--			</el-form-item>-->
<!--			<el-form-item label="单位" prop="unit">-->
<!--				<el-input-->
<!--					v-model="queryParams.unit"-->
<!--					placeholder="请输入单位"-->
<!--					clearable-->
<!--					@keyup.enter.native="handleQuery"-->
<!--				/>-->
<!--			</el-form-item>-->
      <el-form-item label="报废状态">
        <el-select v-model="queryParams.status" placeholder="请选择报废状态">
          <el-option label="已报废" value="1"></el-option>
          <el-option label="未报废" value="0"></el-option>
        </el-select>
      </el-form-item>
<!--			<el-form-item label="预留字段1" prop="attr1" label-width="80px">-->
<!--				<el-input-->
<!--					v-model="queryParams.attr1"-->
<!--					placeholder="请输入预留字段1"-->
<!--					clearable-->
<!--					@keyup.enter.native="handleQuery"-->
<!--				/>-->
<!--			</el-form-item>-->
<!--			<el-form-item label="预留字段2" prop="attr2" label-width="80px">-->
<!--				<el-input-->
<!--					v-model="queryParams.attr2"-->
<!--					placeholder="请输入预留字段2"-->
<!--					clearable-->
<!--					@keyup.enter.native="handleQuery"-->
<!--				/>-->
<!--			</el-form-item>-->
<!--			<el-form-item label="预留字段3" prop="attr3" label-width="80px">-->
<!--				<el-input-->
<!--					v-model="queryParams.attr3"-->
<!--					placeholder="请输入预留字段3"-->
<!--					clearable-->
<!--					@keyup.enter.native="handleQuery"-->
<!--				/>-->
<!--			</el-form-item>-->
<!--			<el-form-item label="预留字段4" prop="attr4" label-width="80px">-->
<!--				<el-input-->
<!--					v-model="queryParams.attr4"-->
<!--					placeholder="请输入预留字段4"-->
<!--					clearable-->
<!--					@keyup.enter.native="handleQuery"-->
<!--				/>-->
<!--			</el-form-item>-->
<!--			<el-form-item label="0删除1正常" prop="active" label-width="90px">-->
<!--				<el-input-->
<!--					v-model="queryParams.active"-->
<!--					placeholder="请输入0删除1正常"-->
<!--					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="['mes:scrap: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="['mes:scrap: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="['mes:scrap: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="['mes:scrap:export']"
				>导出</el-button>
			</el-col>
			<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
		</el-row>

		<el-table v-loading="loading" :data="scrapList" @selection-change="handleSelectionChange">
			<el-table-column type="selection" width="55" align="center" />
			<el-table-column label="ID" align="center" prop="id" />
			<el-table-column label="报废单号" align="center" prop="scrapCode" />
			<el-table-column label="物料ID" align="center" prop="materialId" />
			<el-table-column label="物料编码" align="center" prop="materialCode" />
			<el-table-column label="物料名称" align="center" prop="materialName" />
			<el-table-column label="工位ID" align="center" prop="workCellId" />
			<el-table-column label="工位编码" align="center" prop="workCellCode" />
			<el-table-column label="工位名称" align="center" prop="workCellName" />
			<el-table-column label="报废数量" align="center" prop="scrapQuality" />
			<el-table-column label="单位" align="center" prop="unit" />
			<el-table-column label="状态" align="center" prop="status" >
        <template slot-scope="scope">
          <span v-if="scope.row.status == 0">未报废</span>
          <span v-else>已报废</span>
        </template>

      </el-table-column>
<!--			<el-table-column label="备注" align="center" prop="remark" />-->
<!--			<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="0删除1正常" align="center" prop="active" />-->
			<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="['mes:scrap:edit']"
					>修改</el-button>
					<el-button
						size="mini"
						type="text"
						icon="el-icon-delete"
						@click="handleDelete(scope.row)"
						v-hasPermi="['mes:scrap: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="scrapCode">
					<el-input v-if="isAdd" v-model="form.scrapCode" placeholder="请输入报废单号" />
					<el-input v-if="!isAdd" disabled v-model="form.scrapCode"  />

				</el-form-item>
<!--				<el-form-item label="物料ID" prop="materialId">-->
<!--					<el-input v-model="form.materialId" placeholder="请输入物料ID" />-->
<!--				</el-form-item>-->
<!--				<el-form-item label="物料编码" prop="materialCode">-->
<!--					<el-input v-model="form.materialCode" placeholder="请输入物料编码" />-->
<!--				</el-form-item>-->
<!--				<el-form-item label="物料名称" prop="materialName">-->
<!--					<el-input v-model="form.materialName" placeholder="请输入物料名称" />-->

<!--				</el-form-item>-->

        <el-form-item label="物料名称" prop="productDesc">
          <el-select v-model="form.materialId" placeholder="请选择要报废的物料名称" clearable>
            <el-option
              v-for="dict in this.materialNameList"
              :key="dict.productId"
              :label="dict.productDesc"
              :value="dict.productId"
            />
          </el-select>
        </el-form-item>

<!--				<el-form-item label="工位ID" prop="workCellId">-->
<!--					<el-input v-model="form.workCellId" placeholder="请输入工位ID" />-->
<!--				</el-form-item>-->
<!--				<el-form-item label="工位编码" prop="workCellCode">-->
<!--					<el-input v-model="form.workCellCode" placeholder="请输入工位编码" />-->
<!--				</el-form-item>-->
<!--				<el-form-item label="工位名称" prop="workCellName">-->
<!--					<el-input v-model="form.workCellName" placeholder="请输入工位名称" />-->
<!--				</el-form-item>-->


        <el-form-item label="工位名称" prop="postName">
          <el-select v-model="form.workCellId" placeholder="请选择工位名称" clearable>
            <el-option
              v-for="dict in postNameList"
              :key="dict.postId"
              :label="dict.postName"
              :value="dict.postId"
            />
          </el-select>
        </el-form-item>




				<el-form-item label="报废数量" prop="scrapQuality">
					<el-input v-model="form.scrapQuality" placeholder="请输入报废数量" />
				</el-form-item>
				<el-form-item label="单位" prop="unit">
					<el-input v-model="form.unit" placeholder="请输入单位" />
				</el-form-item>
        <el-form-item label="报废状态">
          <el-select v-model="form.status" placeholder="请选择报废状态">
            <el-option label="已报废" value="1"></el-option>
            <el-option label="未报废" value="0"></el-option>
          </el-select>
        </el-form-item>
<!--        <el-col :span="20">-->
<!--          <el-form-item size="small" label="报废状态:">-->
<!--            <el-select v-model="form.status" placeholder="请选择状态">-->
<!--              <el-option v-for="item in selectProductList" :key="item.status" :label="item.productDesc"-->
<!--                         :value="item.status"-->
<!--              ></el-option>-->
<!--            </el-select>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--        <el-form-item label="报废状态" prop="status">-->
<!--          <el-input v-model="form.status" placeholder="请输入报废状态" />-->
<!--        </el-form-item>-->
				<el-form-item label="备注" prop="remark">
					<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
				</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 {listScrap, getScrap, delScrap, addScrap, updateScrap, listWuliao,listMaterialName,listPostName} from "@/api/mes/scrap";

export default {
	name: "Scrap",
	data() {
		return {
			// 遮罩层
			loading: true,
			// 选中数组
			ids: [],
			// 非单个禁用
			single: true,
			// 非多个禁用
			multiple: true,
			// 显示搜索条件
			showSearch: true,
			// 总条数
			total: 0,
			// 【请填写功能名称】表格数据
			scrapList: [],
			// 弹出层标题
			title: "",
			// 是否显示弹出层
			open: false,
			isAdd: false,
			// 查询参数
			queryParams: {
				pageNum: 1,
				pageSize: 10,
				scrapCode: null,
				materialId: null,
				materialCode: null,
				materialName: null,
				workCellId: null,
				workCellCode: null,
				workCellName: null,
				scrapQuality: null,
				unit: null,
				status: null,
				attr1: null,
				attr2: null,
				attr3: null,
				attr4: null,
				active: null,
        createTime: null
			},
			// 表单参数
			form: {},
			// 表单校验
			rules: {
			},
      materialList: [],
      materialNameList: [],
      postNameList:[]
		};
	},
	created() {
		this.getList();
    this.getWuluiaoList();
    this.getMaterialNameList();
    this.getPostNameList();
  },
	methods: {
		/** 查询【请填写功能名称】列表 */
		getList() {
			this.loading = true;
			listScrap(this.queryParams).then(response => {
				this.scrapList = response.rows;
				this.total = response.total;
				this.loading = false;
			});
		},
    /** 查询物料列表 */
    getWuluiaoList() {
      listWuliao(this.queryParams).then(response => {
        console.log("---------------")
        this.materialList = response.data
        console.log(this.materialList)
      });
    },

    /** 查询物料名称 */
    getMaterialNameList() {
      listMaterialName(this.queryParams).then(response => {
        this.materialNameList = response.data
      });
    },

    /** 查询工位名称 */
    getPostNameList() {
      listPostName(this.queryParams).then(response => {
        this.postNameList = response.data
        this.postNameList.map(item => {
          item.postId = item.postId + ''
        })

        console.log(this.postNameList)
      });
    },
    // getMaterialName()
		// 取消按钮
		cancel() {
			this.open = false;
			this.reset();
		},
		// 表单重置
		reset() {
			this.form = {
				id: null,
				scrapCode: null,
				materialId: null,
				materialCode: null,
				materialName: null,
				workCellId: null,
				workCellCode: null,
				workCellName: null,
				scrapQuality: null,
				unit: null,
				status: null,
				remark: null,
				attr1: null,
				attr2: null,
				attr3: null,
				attr4: null,
				createBy: null,
				createTime: null,
				updateBy: null,
				updateTime: null,
				active: 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.isAdd = true;
      this.getMaterialNameList();
      this.getPostNameList();
			this.title = "添加报废单";
		},
		/** 修改按钮操作 */
		handleUpdate(row) {
      // console.log("row", row)
			this.reset();
      // console.log('===========')
      console.log(this.postNameList)
			const id = row.id || this.ids

      // console.log("this.from", this.from)
      this.open = true;
      this.isAdd = false;
      this.title = "修改报废单";
			getScrap(id).then(response => {
				this.form = response.data;
        console.log("+++++++++++", this.form)
				this.open = true;
				this.title = "修改报废单";
			});
		},
		/** 提交按钮 */
		submitForm() {
			this.$refs["form"].validate(valid => {
				if (valid) {
          console.log("数据",this.form)
					if (this.form.id != null) {
            console.log("更新",this.form.id)
						updateScrap(this.form).then(response => {
							this.$modal.msgSuccess("修改成功");
							this.open = false;
							this.getList();
						});
					} else {
            console.log("新增",this.form.id)
						addScrap(this.form).then(response => {
							this.$modal.msgSuccess("新增成功");
							this.open = false;
							this.getList();
						});
					}
				}
			});
		},
		/** 删除按钮操作 */
		handleDelete(row) {
			const ids = row.id || this.ids;
			this.$modal.confirm('是否确认删除【请填写功能名称】编号为"' + ids + '"的数据项？').then(function() {
				return delScrap(ids);
			}).then(() => {
				this.getList();
				this.$modal.msgSuccess("删除成功");
			}).catch(() => {});
		},
		/** 导出按钮操作 */
		handleExport() {
			this.download('system/scrap/export', {
				...this.queryParams
			}, `scrap_${new Date().getTime()}.xlsx`)
		}
	}
};
</script>
