<!DOCTYPE html>
|
<html>
|
<head>
|
<meta charset="UTF-8">
|
<!-- import CSS -->
|
<script src="../js/main.js"></script>
|
<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-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-container>
|
<img :src="ruleForm.route" style="margin-right: 0;width: 1000px;height: 700px;background-color: aqua;" >
|
</div>
|
</body>
|
|
<script >
|
//import * as echarts from '../js/echarts.min.js';
|
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:'',
|
route:null
|
},
|
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;
|
}
|
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"]
|
},
|
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);
|
console.log(e.target.result)
|
this.updateShowFlag=true
|
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>
|
