let productsinfo = new Vue({ el: '#ProductTable', components: { 'BootstrapTable': BootstrapTable }, data: { columns: [ { title: '序号', sortable: true, align: "center", width: 20, formatter: function (value, row, index) { console.log(index); ////获取每页显示的数量 //var pageSize = $('#tbqc').bootstrapTable('getOptions').pageSize; ////获取当前是第几页 //var pageNumber = $('#tbqc').bootstrapTable('getOptions').pageNumber; ////返回序号,注意index是从0开始的,所以要加上1 //return pageSize * (pageNumber - 1) + index + 1; return ++index; } }, { title: '产品类型', field: 'productcode', align: 'center' }, { title: '描述', field: 'descriptions', align: 'center' }, { title: '产品系列', field: 'familycode', align: 'center' }, { title: '栅线类型', field: 'busbartype', align: 'center' }, { title: '晶体类型', field: 'crystype', align: 'center' }, { title: '组件规格', field: 'modulespec', align: 'center' }, { title: '工艺流程', field: 'flow', align: 'center' }, { title: '电池片数', field: 'cellqty', align: 'center' }, { title: '工艺类型', field: 'processtype', align: 'center' }, { title: '组件特征码', field: 'featurecode', align: 'center' }, { title: 'Action', align: 'center', formatter: function (value, row, index) { //// 由于id不能使用纯数字所有在id前面统一加上row字符串。取得时候截取即可 //var id = "row" + index; //var ans = "
"; //return ans; return [ '', '', '    ', '', '', '' ].join('') }, events: { 'click .like': function (e, value, row) { event.stopPropagation(); for (let i = 0; i < $('.select').length; i++) { //$('.select:eq(' + i + ')').find("option").each(function () { // if ($(this).text() == '组件1部') {$(this).attr('selected','selected')} // if ($(this).text() == '组件1部') { console.log('组件一部') } //}); //$('.select').eq(i).val('组件1部').trigger('change'); //$('.select').eq(i).select2({ width: '100%' }).change(); addproduct.selection[i].selectedValue = row[addproduct.index[i]]; addproduct.passToOptions[addproduct.index[i]] = addproduct.selection[i].selectedValue if (i==0||i==1) { $('.select:eq(' + i + ')').attr('disabled', 'disabled'); } } $('.select').eq(0).val('组件1部').trigger('change'); //$('.select').eq(0).select2().val('组件1部').trigger('change'); //$('.select').eq(0).select2({ width: '100%' }).change(); console.log(addproduct.passToOptions); $('#RoleModal').modal({ backdrop: 'static', keyboard: false }); //$('#affirm').click(function () { // toastr.clear(); // toastr.success('产品[' + row.productcode + ']修改成功', '', { progressBar: true }); // setTimeout(function () { $('#cancel').click(); }, 6000) //}) }, 'click .remove': function (e, value, row,index) { event.stopPropagation(); console.log(row); console.log(productsinfo.data); $('tr[data-index=' + index + ']').css('background-color', '#f39c12'); productsinfo.requestApi({ modulename: "Orders", funname: "QueryWorkshop", //BatchRate para: { prodectcode: row.productcode }, success: (res) => { console.log(res); toastr.success('产品[' + row.productcode + ']已经删除', '', { progressBar: true }).then(setTimeout(function () { productsinfo.data.splice(index, 1); },5500)); }, fail: (ex) => { console.log(ex); } }) //setTimeout(function () { // productsinfo.data.splice(index, 1); //},3000) }, } } ], data: [ // { // powergrade: 1, // igrade: 321, // color:'123' // } ], stations: [], //for循环用作显示流程快 hide: null, options: { //pagination: true, //是否显示分页(*) //pageSize: 12, //每页的记录行数(*) search: true, //是否显示表格搜索,此搜索是客户端搜索,不会进服务端, strictSearch: true, //showColumns: true, //是否显示所有的列 showRefresh: true, height: 580, onClickRow: function (row, $element, field) { console.log(row); var flow = row.flow; console.log(flow); productsinfo.requestApi({ modulename: "Orders", funname: "QueryWorkshop", //BatchRate para: {flow:flow}, success: (res) => { console.log(res); productsinfo.stations = res; //显示工艺流程 //clearTimeout(produstsinfo.hide); $("#flow").slideDown('slow'); console.log(productsinfo.hide); productsinfo.hide = setTimeout(function () { $("#flow").slideUp('slow'); }, 6000); $("#flow").mouseover(function () { clearTimeout(productsinfo.hide); console.log(productsinfo.hide); $("#flow").stop(false, true); }); $("#flow").mouseleave(function () { $("#flow").slideUp('slow'); }); }, fail: (ex) => { console.log(ex); } }) } } }, created() { this.inquireinfo(); }, mounted() { //var self = this; //$('button[title =刷新]').click(function () { // self.data = []; // self.inquireinfo('refresh'); //}) }, methods: { //查询表格数据 inquireinfo: function (estimate) { var self = this; self.requestApi({ modulename: "ProductsInfo", funname: "ProductsInfo", //BatchRate para: {}, success: (res) => { if (estimate == 'refresh') { console.log(res) self.data = res; } else { console.log(res) self.data = res; console.log(self.data); var $height = parseInt($(window).height()); var footer = $('#top').outerHeight(); console.log(footer); $('#flow').css('top', eval(footer - 3) + 'px'); } }, fail: (ex) => { console.log(ex); } }) }, requestApi: function (config) {//modulename, funname, para, success, fail) { fetch("/api/" + config.modulename + "/" + config.funname + "", { method: "post", headers: { "Accept": "application/json, text/plain, */*", "Content-Type": "application/json" }, body: JSON.stringify(config.para) }).then( (res) => { return res.json() } ).then( (res) => { config.success(res) } ).catch( (ex) => { config.fail(ex) } ) } } }); //添加产品 var addproduct = new Vue({ el: '#AddProduct', data: { selection: [{ name: '产品类型', passInOptions: [], selectedValue: '' }, { name: '产品系列', passInOptions: [], selectedValue: '' }, { name: '栅线类型', passInOptions: [], selectedValue: '' }, { name: '晶体类型', passInOptions: [], selectedValue: '' }, { name: '组件规格', passInOptions: [], selectedValue: '' }, { name: '工艺流程', passInOptions: [], selectedValue: '' }, { name: '电池片数', passInOptions: [], selectedValue: '' }, { name: '工艺类型', passInOptions: [], selectedValue: '' }, { name: '组件特征码', passInOptions: [], selectedValue: '' }], passToOptions: { productcode: '', familycode: '', busbartype: '', crystype: '', modulespec: '', flow: '', cellqty: '', processtype: '', featurecode: '' }, index: [], }, mounted() { $('.select').val(''); $('.select').select2({ width: '100%', placeholder: '', allowClear: true }); var self = this; for (let attribute in self.passToOptions) { self.index.push(attribute); } console.log(self.index); for (let i = 0; i < $('.select').length; i++) { $(".select:eq(" + i + ")").on('change', function (e) { console.log(e); console.log(e.target.value); self.selection[i].selectedValue = e.target.value; self.passToOptions[self.index[i]] = self.selection[i].selectedValue //var value = e.target.value; //var obj = {}; //if (value) { // obj = $(".select:eq(" + i + ")").find(item => { // return item.id === value; // }) // console.log(obj); // //self.selection[i].selectedValue = obj.text; //} }); } productsinfo.requestApi({ modulename: "Orders", funname: "QueryWorkshop", para: {}, success: (res) => { console.log(res); //根据后台数据进行处理 console.log(self.selection); var selections = self.selection; console.log(selections); for (let i = 0; i < selections.length; i++) { selections[i].passInOptions = res.info; } console.log(selections[0].passInOptions); //$('#RoleModal').modal({ backdrop: 'static', keyboard: false }); }, fail: (ex) => { console.log(ex); } }); }, methods: { addproduct() { var self = this; //新增产品每次都进行查询所有下拉的值 //productsinfo.requestApi({ // modulename: "Orders", // funname: "QueryWorkshop", // para: {}, // success: (res) => { // console.log(res); // //根据后台数据进行处理 // console.log(self.selection); // var selections = self.selection; // console.log(selections); // for (let i = 0; i < selections.length; i++) { // selections[i].passInOptions = res.info; // } // console.log(selections[0].passInOptions); // $('#RoleModal').modal({ backdrop: 'static', keyboard: false }); // }, // fail: (ex) => { // console.log(ex); // } //}); $('#RoleModal').modal({ backdrop: 'static', keyboard: false }); //for (let i = 0; i < $('.select').length; i++) { // $(".select:eq(" + i + ")").on('change', function (e) { // console.log(e); // console.log(e.target.value); // self.selection[i].selectedValue = e.target.value; // self.passToOptions[self.index[i]] = self.selection[i].selectedValue // }); //} }, save: function () { var self = this; console.log($('.select2-selection__placeholder').text()); console.log(self.selection); console.log(self.passToOptions); console.log($(".select:eq(0)").find("option:selected").text()) //进行存储数据库和页面增加 console.log(self.selection[0].selectedValue); var i = 0; $(".select").each(function () { //console.log($(".select")); //console.log($(this).select2().find("option:selected").text()); if ($(this).select2().find("option:selected").text() == '') { i++; $(this).next().css('box-shadow', '2px 0px 4px red'); $(this).on("select2:select", function () { if ($(this).select2().find("option:selected").text() == '') { $(this).next().css('box-shadow', '') } }); } }); console.log(i); if (i == 0) { $('.select').attr('disabled', 'disabled'); productsinfo.requestApi({ modulename: "Orders", funname: "QueryWorkshop", para: self.passToOptions, success: (res) => { console.log(res); toastr.clear(); toastr.success('产品添加成功', '', { progressBar: true }); setTimeout(function () { $('#cancel').click(); $('.select').removeAttr("disabled"); }, 6000) }, fail: (ex) => { console.log(ex); } }); } }, cancel: function () { var self = this; $('.select').val('').trigger("change"); $('.select').removeAttr("disabled"); for (let i = 0; i < $('.select').length;i++) { self.selection[i].selectedValue = ''; self.passToOptions[self.index[i]] = ''; } $(".select").each(function () { $(this).next().css('box-shadow', '') }) console.log(self.selection); console.log(self.passToOptions); //for (let i = 0; i < self.selection.length; i++) { // self.selection[i].selectedValue = ''; //} //console.log(self.selection); //console.log(self.passToOptions) } } }) //增加产品类型、产品系列 var increase = new Vue({ el: '#increase', data: { producttype: '', typeDetail: '', productline: '', lineDetail: '' }, methods: { addtype() { if (this.producttype != '' && this.typeDetail != '') { produstsinfo.requestApi({ modulename: "", funname: "", para: { producttype: this.producttype, typedetail: this.typeDetail }, success: (res) => { console.log(res); //直接获取addproduct.selection的值,就是所有的产品类型 console.log(addproduct.selection); //进行判断是否已经存在相同的产品类型 //如果存在提示产品类型已经存在 //不存在再进行传递参数 toastr.success('产品类型添加成功', '', { progressBar: true }); }, fail: (ex) => { console.log(ex); } }); } else { //toastr.warning('请完善信息', '', { progressBar: true }); $(".color1:text").each(function () { if ($.trim($(this).val()) == "") { $(this).css('box-shadow', '2px 0px 4px red') } $(this).bind("input propertychange", function () {//监控输入框的变化 $(this).css('box-shadow', '') }); }); return; } }, addline() { if (this.producttype != '' && this.typeDetail != '') { produstsinfo.requestApi({ modulename: "", funname: "", para: { productline: productline, linedetail: lineDetail }, success: (res) => { console.log(res); toastr.success('产品系列添加成功', '', { progressBar: true }); }, fail: (ex) => { console.log(ex); } }); } else { //toastr.warning('请完善信息', '', { progressBar: true }); $(".color2:text").each(function () { if ($.trim($(this).val()) == "") { $(this).css('box-shadow', '2px 0px 4px red') } $(this).bind("input propertychange", function () {//监控输入框的变化 $(this).css('box-shadow', '') }); }); return; } } } })