<%@ page contentType="text/html;charset=UTF-8"%>
|
<!DOCTYPE html>
|
<html>
|
<head>
|
<meta charset="UTF-8">
|
<!-- import CSS -->
|
<link rel="stylesheet" href="../js/static/css/element.css">
|
<link rel="stylesheet" href="../js/static/css/style.css">
|
<style >
|
.page-scroll {
|
height: 100%;
|
}
|
|
.page-scroll .el-scrollbar__wrap {
|
overflow-x: hidden;
|
}
|
img{
|
width: auto;
|
height: auto;
|
max-width: 100%;
|
max-height: 100%;
|
}
|
</style>
|
</head>
|
<body>
|
<div id="app" >
|
<el-container >
|
<el-header style="height: 3%;">
|
<el-button @click="showFlagFuc" type="primary" round style="float:left;">{{showFlag==false?'返回产品':'添加产品'}}</el-button>
|
</el-header>
|
<el-main >
|
<el-table v-show="showFlag"
|
:data="produceData"
|
max-height="600"
|
style="width: 100%;">
|
|
|
<el-table-column
|
v-for="(item,keys,index) in tableHead[0]"
|
:key="index"
|
:label="item"
|
>
|
<el-table-column :prop="keys" v-if="index==0">
|
<template slot-scope="scope" v-if="Object.keys(produceData[0]).length!=0">
|
<el-button
|
@click.native.prevent="updateRow(scope.$index, produceData)"
|
type="text"
|
size="small">
|
修改
|
</el-button>
|
</template>
|
</el-table-column>
|
|
<el-table-column :prop="keys" v-if="index>0">
|
<template slot="header" slot-scope="scope" >
|
<el-input v-model="selectGlass[index-1]" @keyup.enter.native="selectSub" type="text" size="mini" />
|
</template>
|
|
</el-table-column>
|
|
</el-table-column>
|
</el-table>
|
<!-- 新增修改 -->
|
<div v-show="updateShowFlag" style="width: 30%;float: left;margin-top: 10%;margin-left: 10%; ">
|
<img :src="ruleForm.route" >
|
</div>
|
|
<el-form v-show="!showFlag" :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" style="width: 25%;float: right;margin-right: 20%;">
|
<el-form-item>
|
<el-button v-show="updateShowFlag" type="primary" @click="updateGlassSub('ruleForm')" v-preventReClick ='3000'>修改</el-button>
|
<el-button v-show="!updateShowFlag" type="primary" @click="submitForm('ruleForm')" v-preventReClick='3000'>提交</el-button>
|
<el-button @click="resetForm('ruleForm')">重置</el-button>
|
</el-form-item>
|
|
<el-form-item label="产品编号" prop="produceid">
|
<el-input v-model="ruleForm.produceid" autocomplete="off" ></el-input>
|
</el-form-item>
|
<el-form-item label="宽" prop="width">
|
<el-input v-model="ruleForm.width" autocomplete="off" ></el-input>
|
</el-form-item>
|
<el-form-item label="高" prop="height">
|
<el-input v-model="ruleForm.height" autocomplete="off"></el-input>
|
</el-form-item>
|
<el-form-item label="厚度" prop="thickness">
|
<el-input v-model.number="ruleForm.thickness"></el-input>
|
</el-form-item>
|
|
<el-form-item label="颜色" prop="color">
|
<el-input v-model.number="ruleForm.color"></el-input>
|
</el-form-item>
|
|
<el-form-item label="opt文件编号" prop="optNum">
|
<template>
|
<el-select v-model="ruleForm.optNum" placeholder="请选择" clearable filterable>
|
<el-option
|
v-for="item in optList"
|
:key="item['0_id']"
|
:label="item['1_val']"
|
:value="item['0_id']">
|
</el-option>
|
</el-select>
|
</template>
|
</el-form-item>
|
|
<el-form-item label="文件上传" >
|
<el-upload
|
:limit="1"
|
:on-change="changeFile"
|
class="upload-demo"
|
ref="upload"
|
action="https://jsonplaceholder.typicode.com/posts/"
|
:file-list="fileList"
|
:auto-upload="false">
|
<el-button slot="trigger" size="small" type="primary" >选取文件</el-button>
|
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过5m</div>
|
</el-upload>
|
</el-form-item>
|
|
</el-form>
|
|
</el-main>
|
<!-- <el-footer style="background-color: azure;"></el-footer> -->
|
</el-container>
|
</div>
|
</body>
|
<!-- import Vue before Element -->
|
<script src="../js/jquery-3.4.1.min.js"></script>
|
<script src="../js/axios.min.js"></script>
|
<script src="../js/static/js/vue.js"></script>
|
<script src="../js/mixins.js"></script>
|
<!-- import JavaScript -->
|
<script src="../js/static/js/element.js"></script>
|
<script src="../js/static/js/echarts.min.js"></script>
|
|
<script >
|
//import * as echarts from '../js/echarts.min.js';
|
Vue.prototype.$echarts = echarts
|
Vue.prototype.$http= axios
|
let app =new Vue({
|
el: '#app',
|
mixins:[mixin],
|
data(){
|
var checkNum = (rule, value, callback) => {
|
if (!value) {
|
return callback(new Error('不能为空'));
|
}
|
setTimeout(() => {
|
let reg = new RegExp(`^[0-9]{1,4}(\.[0-9]{0,2})?$`)
|
|
if (!reg.test(value)) {
|
callback(new Error('请输入0.01-9999.99的数字'));
|
}else {
|
callback();
|
}
|
|
}, 1000);
|
};
|
var checkString = (rule, value, callback) => {
|
if (!value) {
|
return callback(new Error('不能为空'));
|
}
|
setTimeout(() => {
|
if (value.length>255) {
|
callback(new Error('最大长度255'));
|
}else {
|
callback();
|
}
|
}, 1000);
|
};
|
var checkThickness = (rule, value, callback) => {
|
if (!value) {
|
return callback(new Error('不能为空或者0'));
|
}
|
setTimeout(() => {
|
let reg = new RegExp(`^[0-9]*[1-9][0-9]*$`)
|
|
if (!reg.test(value)) {
|
callback(new Error('请输入正整数的厚度'));
|
}else {
|
callback();
|
}
|
|
}, 1000);
|
};
|
return {
|
ruleForm: {
|
produceid:'',
|
width: '',
|
height: '',
|
thickness: '',
|
color:'',
|
optNum:'',
|
creator:'<%= request.getParameter("xingming") %>',
|
route:''
|
},
|
rules: {
|
produceid: [
|
{ validator: checkString, trigger: 'blur' }
|
],
|
height: [
|
{ validator: checkNum, trigger: 'blur' }
|
],
|
width: [
|
{ validator: checkNum, trigger: 'blur' }
|
],
|
thickness: [
|
{ validator: checkThickness, trigger: 'blur' }
|
],
|
color: [
|
{ validator: checkString, trigger: 'blur' }
|
],
|
optNum: [
|
{ validator: checkString, trigger: 'blur' }
|
],
|
route: [
|
{ validator: checkString, trigger: 'blur' }
|
],
|
|
},
|
tableHead:[],
|
produceData:[],
|
showFlag:true,
|
updateShowFlag:false,
|
updateGlass:{
|
id:''
|
},
|
optList:[],
|
fileList:[],
|
selectGlass:["","","","","","","",""]
|
|
|
};
|
|
},
|
methods: {
|
submitForm(formName) {
|
this.$refs[formName].validate((valid) => {
|
if (!valid) {
|
return false;
|
}
|
this.ruleForm.creator='<%= request.getParameter("xingming") %>';
|
let sql="{call AXJ_a_produce_insert(?,?,?,?,?,?,?,?,?)}~"+JSON.stringify(this.ruleForm);
|
this.connects("新增产品",sql,1,1);
|
});
|
},
|
resetForm(formName) {
|
this.$refs[formName].resetFields();
|
},
|
showFlagFuc(){
|
Object.keys(this.ruleForm).forEach((key) => (this.ruleForm[key] = ''));
|
this.showFlag=!this.showFlag
|
this.updateShowFlag=false;
|
},
|
updateRow(index,row){//修改产品数据显示
|
this.showFlag=!this.showFlag
|
this.updateShowFlag=true;
|
let rowObj=row[index]
|
this.ruleForm.produceid=rowObj["1_recipe_no"]
|
this.ruleForm.width=rowObj["3_width"]
|
this.ruleForm.height=rowObj["4_height"]
|
this.ruleForm.thickness=rowObj["5_thickness"]
|
this.ruleForm.color=rowObj["6_color"]
|
this.ruleForm.optNum=rowObj["2_optfile_no"]
|
this.ruleForm.creator=rowObj["7_recipe_maker"]
|
this.ruleForm.route=rowObj["9_route"]
|
this.updateGlass.id=rowObj["0_id"]
|
console.log( row[index]);
|
},
|
updateGlassSub(formName){
|
this.$refs[formName].validate((valid) => {
|
if (!valid) {
|
return false;
|
}
|
let updateGlassObj=this.ruleForm
|
updateGlassObj.id=this.updateGlass.id
|
let sql="{call AXJ_a_produce_update(?,?,?,?,?,?,?,?,?,?)}~"+JSON.stringify(updateGlassObj);
|
this.connects("产品修改",sql,1,1);
|
});
|
|
},
|
changeFile(file){//添加文件触发生成base64文件
|
const isJPG = file.raw.type === 'image/jpeg' || file.raw.type === 'image/png' ;
|
const isLt2M = file.size / 1024 / 1024 < 5;
|
|
if (!isJPG) {
|
this.$message.error('上传头像图片只能是 JPG或者PNG 格式!')
|
this.$refs.upload.clearFiles()
|
return
|
}
|
if (!isLt2M) {
|
this.$message.error('上传头像图片大小不能超过 5MB!')
|
this.$refs.upload.clearFiles()
|
return
|
}
|
|
return new Promise((resolve, reject) => {
|
let reader = new FileReader();
|
reader.readAsDataURL(file.raw);
|
reader.onload = (e) => {
|
resolve(e.target.result);
|
this.ruleForm.route=e.target.result;
|
};
|
});
|
},
|
selectSub:function(){
|
let arrObj={}
|
for(let i in this.selectGlass){
|
arrObj[i]=this.selectGlass[i]
|
}
|
let sql="{call AXJ_a_produce_select(?,?,?,?,?,?,?,?,?)}~"+JSON.stringify(arrObj);
|
loadAjxs('产品查询',sql,2,"produceData");
|
}
|
},
|
computed:{
|
|
},
|
mounted() {
|
let sql="{call AXJ_a_produce_select_into()}";
|
let flag=2;
|
loadAjxs('产品初始查询',sql,flag,"produceData");
|
|
sql="{call AXJ_a_produceHeader_select()}";
|
loadAjxs('产品表头',sql,flag,"tableHead");
|
|
sql="{call AXJ_a_optFile_select()}";
|
loadAjxs('产品opt编码查询',sql,flag,"optList");
|
},
|
|
})
|
|
|
|
</script>
|
</html>
|
