@{
    ViewBag.Title = "不良现象编辑";
    Layout = "~/Views/Shared/_Form.cshtml";
}
<script src="~/Content/js/datepicker/WdatePicker.js"></script>
<!--引入 element-ui 的样式，-->
<link rel="stylesheet" href="~/Content/element-ui/lib/theme-chalk/index.css">
<script src="~/Content/vue/dist/vue.js"></script>
<script src="~/Content/element-ui/lib/index.js"></script>

<script src="~/Content/axios.min.js"></script>
<style>
</style>
<form id="form1">
    <div id="app">
        <template>
            <el-form ref="form" :model="form" :rules="rules" label-width="120px">
                <el-divider>主表信息</el-divider>
                <el-row :gutter="24">
                    <el-col :span="6">
                        <el-form-item label="不良现象组编码" prop="BRGCode">
                            <el-input v-model="form.BRGCode" placeholder="请输入内容" size="mini" :disabled="disabled4RulesCode"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="不良现象组描述" prop="BRGDesc">
                            <el-input v-model="form.BRGDesc" placeholder="请输入内容" size="mini"></el-input>
                        </el-form-item>
                    </el-col>

                </el-row>

                <el-divider>子表信息</el-divider>
                <el-row :gutter="24">
                    <el-col :span="24">

                        <a id="NF-Add" authorize="no" style="margin-left:3px;" class="btn btn-primary" v-on:click="addLine()"><i class="fa fa-pencil-square-o"></i>新增</a>
                    </el-col>
                </el-row>
                <el-row :gutter="24">
                    <el-col :span="2">

                    </el-col>
                    <el-col :span="20">
                        <el-table ref="singleTable" highlight-current-row
                                  :data="dataSource4Detail"
                                  style="width: 100%"
                                  stripe border
                                  size="mini"
                                  v-on:current-change="handleCurrentChange">
                            <el-table-column type="index" width="50"></el-table-column>
                            <el-table-column prop="BadReasonCode" label="不良现象代码" width="140">
                                <template slot-scope="scope">
                                    <el-input v-model="scope.row.BadReasonCode" size="small" :disabled="disabled4RulesCode"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column prop="BadReasonDesc" label="不良现象描述" width="140">
                                <template slot-scope="scope">
                                    <el-input v-model="scope.row.BadReasonDesc" size="small"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作">
                                <template slot-scope="scope">

                                    <a id="NF-Delete" authorize="yes" class="btn btn-primary" v-on:click="handleDelete(scope.$index, scope.row)"><i class="fa fa-trash-o"></i>删除</a>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-col>
                    <el-col :span="2">
                        &nbsp;  &nbsp;
                    </el-col>
                </el-row>
            </el-form>
        </template>
    </div>
</form>

<script type="text/javascript">
    //const { Console } = require("node:console");
    var vm = new Vue({
        el: '#app',
        data: {
            id:'',
            userCode: "",

            form: {},
            detail: {
                key:0,
                BadReasonCode: '',
                BadReasonDesc: '',

            },
            dataSource4Detail: [],
            currentRow: null,
            rules: {
                BRGCode: [{ required: true, message: '请输入', trigger: 'blur' },],
                BRGDesc: [{ required: true, message: '请输入', trigger: 'blur' },],
            },
            disabled4RulesCode:false,
        },
        //挂在DOM 触发
        mounted() {
            let reactiveObject = {
                BRGCode: '',
                BCGName: '',
                DetailList: [],
            };
            this.form = reactiveObject;

        // this.loadGrid();
        // this.show();
            this.id = '@ViewData["ids"]';
            this.initControl();
           // console.log(this.id);
        },
        beforeDestroy() {
        // this.autoScrol1(true);

        },
        methods: {
            initControl: function () {
                let that = this;
                let orgName = '';
                this.disabled4RulesCode = this.id ? true : false;
                let userName = '@NFine.Code.OperatorProvider.Provider.GetCurrent().UserName';
                //  console.log(userName);
                this.getData();
            },
            getData() {
                if (!this.id) return;

                axios
                    .get('/BBWMS/IQCQuality/GetBadReasonGroup?keyValue=' + this.id)
                    .then(function (res) {

                        if (res.data) {
                            for (var i in res.data) {
                                Vue.set(vm.form, i, res.data[i]);
                            }

                            res.data.DetailList.forEach(function (el, i) {
                                Vue.set(vm.dataSource4Detail, i, el)
                            });
                        }
                    })
                    .catch(function (error) { // 请求失败处理
                        alert(error);
                    });
            },
            addLine() {
                //debugger;
               // console.log('new line');
                let key = 1;
                let maxObj = this.dataSource4Detail.sort((a, b) => b.key - a.key)[0];
                if (maxObj != null) {
                    key = maxObj.key + 1;
                }
                let obj = {
                    key: key,
                    BadReasonCode: '',
                    BadReasonDesc: '',
                };
                this.dataSource4Detail.push(obj );

            },
            //删除行
            handleDelete(index, row) {
               // console.log(index, row);
                this.dataSource4Detail = this.dataSource4Detail.filter(x => x.key != row.key);
            },
            //选中行变化
            handleCurrentChange(val) {
                this.currentRow = val;
               // console.log(val);
            },
            submitCheck() {
               // debugger;
                if (this.dataSource4Detail.length == 0) {
                    $.modalMsg("必须存在不良现象行", "warning");
                    return false;
                }

                for (var i = 0; i < this.dataSource4Detail.length; i++) {
                    let detail = this.dataSource4Detail[i];

                    if (!detail.BadReasonCode || !detail.BadReasonDesc ) {
                        $.modalMsg("不良现象代码名称必填,行号 " + (i + 1), "warning");
                        return false;
                    }
                }

                this.form.DetailList = this.dataSource4Detail;
               this.$refs['form'].validate((valid) => {
                    if (valid) {
                        //alert('submit!');

                         $.submitForm({
                             url: "/BBWMS/IQCQuality/SaveBadReasonGroup",
                             param: { keyValue: JSON.stringify(this.form) },
                             success: function () {
                                $.currentWindow().$("#gridList").trigger("reloadGrid");
                            }
                        })

                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
               // console.log(result);
            },
        },
    });
    function submitForm() {
        //debugger;
        vm.submitCheck();


    }
</script>