龙岩做网站公司有哪些,本公司经营网站建设,购物网站界面设计策划,学企业管理培训班请求地址#xff1a;geecg-uniapp 同源策略 数据请求 获取后台数据 ui库安装 冲突解决#xff08;3#xff09;-CSDN博客
一.uniapp转小程序
(1) 运行微信开发工具 #xff08;2#xff09; 配置id 然后运行 打开小程序 路径 E:\通\uniapp-jeecg\unpackage\dist\d… 请求地址geecg-uniapp 同源策略 数据请求 获取后台数据 ui库安装 冲突解决3-CSDN博客
一.uniapp转小程序
(1) 运行微信开发工具 2 配置id 然后运行 打开小程序 路径 E:\通\uniapp-jeecg\unpackage\dist\dev\mp-weixin 5运行 二.表单页面 templateviewcu-custom bgColorbg-gradual-blue :isBacktrueblock slotcontent额外加工/block/cu-customuni-section title view stylemargin: 0 20px;uni-forms refcustomForm :rulescustomRules :modelValuecustomFormDatauni-forms-item label类型 required nameseTypeuni-data-select v-modelcustomFormData.seType :localdatarange stylewidth: 215px; changeselect/uni-data-select/uni-forms-itemuni-forms-item label石材编号 required nameseRknumuni-data-select stylewidth: 215px; v-modelcustomFormData.seRknum :localdatacandidates/uni-data-select/uni-forms-itemuni-forms-item label日期时间 required nameseDateuni-datetime-picker stylewidth: 215px; typedatetime return-typetimestamp v-modelcustomFormData.seDate //uni-forms-itemuni-forms-item label长 required nameseLong!-- input v-modelcustomFormData.seLong placeholder请输入长 typenumber / --input classuni-input nameinput v-modelcustomFormData.seLong placeholder请输入长inputfpNumInput //uni-forms-itemuni-forms-item label宽 required nameseWeightinput classuni-input nameinput v-modelcustomFormData.seWeight placeholder请输入宽typenumber inputfpNumInputseWeight //uni-forms-itemuni-forms-item label高 required nameseHeightinput classuni-input nameinput v-modelcustomFormData.seHeight placeholder请输入高typenumber inputfpNumInputseHeight //uni-forms-itemuni-forms-item label数量 required nameseNuminput classuni-input nameinput v-modelcustomFormData.seNum placeholder请输入数量typenumber inputfpNumInputseNum //uni-forms-itemuni-forms-item label面积 required nameseMjinput classuni-input nameinput v-modelcustomFormData.seMj placeholder请输入面积typenumber inputfpNumInputseMj //uni-forms-itemuni-forms-item label体积 required nameseTjinput classuni-input nameinput v-modelcustomFormData.seTj placeholder请输入体积typenumber inputfpNumInputseTj //uni-forms-itemuni-forms-item label额外加工 required namesePromeduni-data-select stylewidth: 215px; v-modelcustomFormData.sePromed :localdatasePromed/uni-data-select/uni-forms-itemuni-forms-item label机组 required nameseSetuni-data-select stylewidth: 215px; v-modelcustomFormData.seSet :localdataseSets/uni-data-select/uni-forms-itemuni-forms-item label单价 required namesePriceinput classuni-input nameinput v-modelcustomFormData.sePrice placeholder请输入单价typenumber inputfpNumInputsePrice //uni-forms-itemuni-forms-item label总价input classuni-input nameinput v-modelcustomFormData.seZprice placeholder请输入总价typenumber inputfpNumInputseZprice //uni-forms-itemuni-forms-item label人员 required namesePersonuni-data-select stylewidth: 215px; v-modelcustomFormData.sePerson :localdatasePerson/uni-data-select/uni-forms-itemuni-forms-item label操作人uni-easyinput v-modelcustomFormData.seOpuser placeholder请输入操作人 disabled stylewidth: 215px; /!-- input classuni-input v-modelcustomFormData.seOpuser placeholder请输入操作人 disabled / --/uni-forms-itemuni-forms-item label图片 required namesePicuni-file-picker v-modelimageValue fileMediatypeimage modegrid selectuploaddeletedelIMG title最多选择3张图片 :auto-uploadfalse limit3/uni-file-picker/uni-forms-itemuni-forms-item label备注uni-easyinput stylewidth: 215px; typetextarea v-modelcustomFormData.seRemake placeholder请输入备注 //uni-forms-item/uni-formsbutton typeprimary clicksubmit(customForm) stylebackground-color: blue;提交/button/view/uni-section/view
/template
script
export default {data() {return {imgURL: ,imageValue: [],imageUrls: [],tableDatafinish: [],// 定义初始数据 绑定类型 :localdatarangerange: [{value: 1,text: 荒料},{value: 2,text: 板材成品},{value: 3,text: 板材半成品},{value: 4,text: 路边石成品},{value: 5,text: 路边石半成品},{value: 6,text: 界石成品},{value: 7,text: 界石半成品}],// 定义初始数据 绑定石材编号 :localdatacandidatescandidates: [],// 定义初始数据 绑定机组 :localdataseSetseSets: [],// 定义初始数据 绑定机组 :localdataseSetsePerson: [],sePromed: [],// 定义初始数据 绑定输入框 获取输入数据 v-modelcustomFormData.xxx aacustomFormData: {seType: ,seRknum: ,seDate: new Date(),seLong: ,seWeight: ,seHeight: ,seNum: ,seMj: ,seTj: ,sePromed: ,seSet: ,sePrice: ,seZprice: ,sePerson: ,seOpuser: ,seRemake: ,sePic: },customRules: {seType: {rules: [{required: true,errorMessage: 石材编号不能为空}]},seRknum: {rules: [{required: true,errorMessage: 石材编号不能为空}]},seDate: {rules: [{required: true,errorMessage: 时间不能为空}]},seLong: {rules: [{required: true,errorMessage: 长度不能为空}]},// seLong: [// { required: true, message: 请再次输入密码, trigger: blur },// { pattern: /^\S{6,15}$/, message: 请输入 6 ~ 15 位的非空字符, trigger: blur },// ],seWeight: {rules: [{required: true,errorMessage: 宽度不能为空}]},seHeight: {rules: [{required: true,errorMessage: 高度不能为空}]},seNum: {rules: [{required: true,errorMessage: 数量不能为空}]},seMj: {rules: [{required: true,errorMessage: 面积不能为空}]},seTj: {rules: [{required: true,errorMessage: 体积不能为空}]},sePromed: {rules: [{required: true,errorMessage: 额外加工不能为空}]},seSet: {rules: [{required: true,errorMessage: 机组不能为空}]},sePrice: {rules: [{required: true,errorMessage: 单价不能为空}]},sePerson: {rules: [{required: true,errorMessage: 人员不能为空}]},},}},mounted() {// 机组let url33 /ewjg/smsEwjg/gztj;this.$http.get(url33).then(res {console.log(res.data.result)res.data.result.records.forEach(value { //循环 添加到 candidatesthis.seSets.push({value: value.seSet,text: value.seSet_dictText})})res.data.result.records.forEach(value { //循环 添加到 candidatesthis.sePerson.push({value: value.sePerson,text: value.sePerson_dictText})})res.data.result.records.forEach(value { //循环 添加到 candidatesthis.sePromed.push({value: value.sePromed,text: value.sePromed_dictText})})})},methods: {fpNumInput(e) {const o e.target;const inputRule /[^\d]/gthis.$nextTick(function() {this.customFormData.seLong o.value.replace(inputRule, );})},fpNumInputseWeight(e) {const o e.target;const inputRule /[^\d]/gthis.$nextTick(function() {this.customFormData.seWeight o.value.replace(inputRule, );})},fpNumInputseHeight(e) {const o e.target;const inputRule /[^\d]/gthis.$nextTick(function() {this.customFormData.seHeight o.value.replace(inputRule, );})},fpNumInputseNum(e) {const o e.target;const inputRule /[^\d]/gthis.$nextTick(function() {this.customFormData.seNum o.value.replace(inputRule, );})},fpNumInputseMj(e) {const o e.target;const inputRule /[^\d]/gthis.$nextTick(function() {this.customFormData.seMj o.value.replace(inputRule, );})},fpNumInputseTj(e) {const o e.target;const inputRule /[^\d]/gthis.$nextTick(function() {this.customFormData.seTj o.value.replace(inputRule, );})},fpNumInputsePrice(e) {const o e.target;const inputRule /[^\d]/gthis.$nextTick(function() {this.customFormData.sePrice o.value.replace(inputRule, );})},fpNumInputseZprice(e) {const o e.target;const inputRule /[^\d]/gthis.$nextTick(function() {this.customFormData.seZprice o.value.replace(inputRule, );})},// 获取上传状态upload(e) {this.imageValue.push(e.tempFiles[0])},delIMG(e) {const index this.imageValue.findIndex(v v.url e.tempFilePath);if (index ! -1) {this.imageValue.splice(index, 1);}},submitImage() {if (this.imageValue.length ! 0) {const uploadPromises this.imageValue.map(val {const formData {biz: temp,};return new Promise((resolve, reject) {uni.uploadFile({url: http://43.138.31.228:1888/jeecg-boot/sys/common/upload,formData: formData,filePath: val.path,name: file,fileType: image,fileName: val.name,success: (uploadFileRes) {var jsonObject JSON.parse(uploadFileRes.data);const imageUrl jsonObject.message;this.imageUrls.push(imageUrl); // 将每次上传的图片链接添加到数组中if (this.imageUrls.length 1) {this.customFormData.sePic this.imageUrls.join(,);} else {this.customFormData.sePic imageUrl}resolve();},fail: (err) {reject(err);}});});});this.imageUrls []return Promise.all(uploadPromises)} else {this.customFormData.sePic ;return Promise.resolve(); // 如果没有上传图片直接返回一个已解决的Promise对象}},select() {let url3 /cwkhfk/cwKhfk/scxxList;let params {type: this.value //定义 this.value 赋值给type 最后parmas}this.$http.get(url3, {params: params //定义赋值 params parmas}).then(res {// this.candidates res.data.resultres.data.result.forEach(value { //循环 添加到 candidatesthis.candidates.push({value: value.number,text: value.number})})})},async submit(ref) {console.log(tijiao)// await this.submitImage();// console.log(this.customFormData.sePic)// //添加上传// let customFormData this.customFormData// // 获取数据进行添加// let url /ewjg/smsEwjg/add;// var params customFormData //定义赋值 params customFormData 后端带着parmas去后端// this.$http.post(url, params).then(res {// this.customFormData res.data.result// })// this.customFormData // this.$refs[ref].validate().then(res {// console.log(success, res);// uni.showToast({// title: 校验通过// })// }).catch(err {// console.log(err, err);// })},}
}
/scriptstyle
.uni-input {width: 215px;font-size: 12px;height: 35px;border: 1px solid #dedede;padding: 0 5px;border-radius: 5px;
}
/style二. 点击跳到详情页 父页面
templateview classorder-listcu-custom bgColorbg-gradual-blue :isBacktrueblock slotcontent荒料管理/block/cu-customview class !-- 订单展示 --mescroll-uni refmescrollRef initmescrollInit top60rpx downdownCallback upupCallback!-- 数据列表 --view classdata-list style margin-top: 2rem;!-- 空内容展示--u-empty :texttextNoMore v-ifdataList.length0 modelist/u-empty!-- 空内容展示End--view classorder margin-top-sm v-for(item, aindex) in dataList :keyitem.idclickjumpToOrder(item)view classbg-white padding-sm flex padding-right-zero flex-betweenview classflex-sub radius text-left text-xs margin-top-xsimage src../../static/common/huang.pngstylewidth: 100rpx;height: 80rpx;margin-top: -10px;/image/viewview classflex-sub radius text-left text-xs margin-top-xsstylemargin-left: -200px;font-size: 12px;编号{{ item.sbwWarehousingNumber}}/view/viewview classbg-white padding-sm solid-top view classpadding-top-sm text-sm flexview classleft-title stylefont-size: 12px;日期/viewview classright-content stylefont-size: 12px;{{ item.sbwWarehousingDate}}/view /viewview classpadding-top-sm text-sm flex/view/view/view!-- 返回顶部 --u-back-top :scroll-topscrollTop top600/u-back-top!-- 返回顶部End --/view/mescroll-uni/view!-- 订单展示完毕End --/view/templatescriptimport MescrollMixin from /components/mescroll-uni/mescroll-mixins.js;import configService from /common/service/config.service.js;export default {mixins: [MescrollMixin],data() {return {pageable: {pageIndex: 0,pageSize: 10},list: [{complainantStatus: 0,name: 待解决}, {complainantStatus: 10,name: 已解决}],textNoMore :-- 没有更多数据了 --,tabCurrent: 0,scrollTop: 0,dataList: [],}},methods: {//下拉刷新downCallback() {this.mescroll.scrollTo(0, 0)this.mescroll.resetUpScroll();},//上拉加载async upCallback(pages) {let pageIndex pages.num // 页码, 默认从1开始let pageSize pages.size // 页长, 默认每页10条this.pageable.pageIndex pageIndexthis.pageable.pageSize pageSizelet data await this.getOrder(this.pageable)console.log(data data)const curPageData data.records || []if (data curPageData.length 0) {const curPageLen curPageData.length // 当前数据长度const totalPage data.total // 获取接口总共有多少页this.mescroll.endByPage(curPageLen, totalPage);} else {this.mescroll.endErr()}},//订单列表async getOrder(pageable) {let that thislet params {openid: uni.getStorageSync(openId),complainantStatus: this.list[this.tabCurrent].complainantStatus,pageNo: pageable.pageIndex,pageSize: pageable.pageSize}// console.log(params)let preData {records: []}// 获取列表数据 await that.$http.get(/block/smsBlockWarehousing/list, {params: params}).then(res {console.log(res)if (res.data.success ! true) {that.$tip.alert(res.data.message)} else {if (pageable.pageIndex 2)that.dataList [] // 如果是第一页需手动置空列表that.dataList.push(...res.data.result.records) //数据添加到dataListconsole.log(res.data.result)preData res.data.result;}}).catch(err {// that.$tip.alert(网络波动请重试)console.log(err)})console.log(preData)return preData},// 点击跳转到huangliao页面 携带当前点击的id 过去jumpToOrder(item) {// console.log(item, adad)uni.navigateTo({url: /pages/common/huangliao?id item.id})},}}/script
子页面 templateview stylebackground-color: #ffffff;cu-custom bgColorbg-gradual-blue :isBacktrueblock slotcontent荒料详情/block/cu-customu-form :modelform refuFormview classcontainerview stylemargin-top: 5px; font-size: 13px;padding:10px 15px ; display: flex;入库编号 spanstylecolor:#666;{{form.sbwWarehousingNumber}}/span/viewview styleborder: #e5e5e5 1px solid; margin: 10px;/viewview stylemargin-top: 5px; font-size: 13px;padding:10px 15px ;入库日期 spanstylecolor:#666;{{form.sbwWarehousingDate}}/span/viewview styleborder: #e5e5e5 1px solid; margin: 10px;;/viewview stylemargin-top: 5px; font-size: 13px;padding:10px 15px ;荒料种类 spanstylecolor:#666;{{form.sbwName_dictText}}/span/viewview styleborder: #e5e5e5 1px solid; margin: 10px;;/viewview stylemargin-top: 5px; font-size: 13px;padding:10px 15px ;长 spanstylecolor:#666;{{form.sbwLong}}/span/viewview styleborder: #e5e5e5 1px solid; margin: 10px;;/viewview stylemargin-top: 5px; font-size: 13px;padding:10px 15px ;宽 spanstylecolor:#666;{{form.sbwWidth}}/span/viewview styleborder: #e5e5e5 1px solid; margin: 10px;;/viewview stylemargin-top: 5px; font-size: 13px;padding:10px 15px ;高 spanstylecolor:#666;{{form.sbwTall}}/span/viewview styleborder: #e5e5e5 1px solid; margin: 10px;;/viewview stylemargin-top: 5px; font-size: 13px;padding:10px 15px ;体积 spanstylecolor:#666;{{form.sbwSbwVolume}}/span/viewview styleborder: #e5e5e5 1px solid; margin: 10px;;/viewview stylemargin-top: 5px; font-size: 13px;padding:10px 15px ;颜色 spanstylecolor:#666;{{form.sbwColor_dictText}}/span/viewview styleborder: #e5e5e5 1px solid; margin: 10px;;/viewview stylemargin-top: 5px; font-size: 13px;padding:10px 15px ;价格 spanstylecolor:#666;{{form.sbwPrice}}/span/viewview styleborder: #e5e5e5 1px solid; margin: 10px;;/viewview stylemargin-top: 5px; font-size: 13px;padding:10px 15px ;数量 spanstylecolor:#666;{{form.sbwNum}}/span/viewview styleborder: #e5e5e5 1px solid; margin: 10px;;/viewview stylemargin-top: 5px; font-size: 13px;padding:10px 15px ;运单单价 spanstylecolor:#666;{{form.sbwFreightPrice}}/span/viewview styleborder: #e5e5e5 1px solid; margin: 10px;;/viewview stylemargin-top: 5px; font-size: 13px;padding:10px 15px ;运费 spanstylecolor:#666;{{form.sbwFreight}}/span/viewview styleborder: #e5e5e5 1px solid; margin: 10px;;/viewview stylemargin-top: 5px; font-size: 13px;padding:10px 15px ;运输人 spanstylecolor:#666;{{form.sbwTransporter_dictText}}/span/viewview styleborder: #e5e5e5 1px solid; margin: 10px;;/viewview stylemargin-top: 5px; font-size: 13px;padding:10px 15px ;总价 spanstylecolor:#666;{{form.sbwNum}}/span/viewview styleborder: #e5e5e5 1px solid; margin: 10px;;/viewview stylemargin-top: 5px; font-size: 13px;padding:10px 15px ;料场 spanstylecolor:#666;{{form.sbwFreight}}/span/viewview styleborder: #e5e5e5 1px solid; margin: 10px;;/viewview stylemargin-top: 5px; font-size: 13px;padding:10px 15px ;操作员 spanstylecolor:#666;{{form.sbwTransporter_dictText}}/span/viewview styleborder: #e5e5e5 1px solid; margin: 10px;;/viewview stylemargin-top: 5px; font-size: 13px;padding:10px 15px ;图片 !-- spanstylecolor:#666;{{form.sbwPic}}/span --image srcform.sbwPic mode/image/viewview styleborder: #e5e5e5 1px solid; margin: 10px;;/viewview stylemargin-top: 5px; font-size: 13px;padding:10px 15px ;文件 spanstylecolor:#666;{{form.sbwFile}}/span/viewview styleborder: #e5e5e5 1px solid; margin: 10px;;/viewview stylemargin-top: 5px; font-size: 13px;padding:10px 15px ;备注 spanstylecolor:#666;{{form.sbwRemake}}/span/viewview styleborder: #e5e5e5 1px solid; margin: 10px;;/view/view/u-form/view
/templatescriptexport default {data() {return {form: {sbwWarehousingDate: ,sbwWarehousingNumber: ,sbwName_dictText: ,sbwLong: ,sbwWidth: ,sbwTall: ,sbwSbwVolume: ,sbwColor_dictText: ,sbwPrice: ,sbwNum: ,sbwFreightPrice: ,sbwFreight: ,sbwTransporter_dictText: ,sbwTotalPrice: ,sbwStockyard_dictText: ,sbwPic: ,sbwFile: ,sbwRemake: },}},onLoad: function(options) {this.getOrderDetail()},methods: {// 接受数据async getOrderDetail() {let that thislet params {id: this.id}console.log(params)//return await this.$http.get(/block/smsBlockWarehousing/list, {params: params}).then(res {console.log(get RES)console.log(res.data.result.records[0], 马甲的喇嘛是的)if (res.data.success ! true) {that.form res.data.result.records[0]that.$tip.alert(res.data.message)} else {that.form res.data.result.records[0]if (that.form.complaintFileString) {that.fileList that.form.complaintFileString.split(,)}console.log(that.fileList)}}).catch(err {// that.$tip.alert(网络波动请重试)console.log(err)})},}}
/script 三.图标
templateviewcu-custom bgColorbg-gradual-blue :isBacktrueblock slotcontent出库统计图/block/cu-customviewuni-segmented-control :currentcurrent :valuesitems clickItemonClickItem styleTypebutton activeColor#3a82f8/uni-segmented-control/viewview classcharts-boxqiun-data-charts typepie:optsopts:chartDatachartData/qiun-data-chartstypemount:optsopt:chartDatachartData//view/view
/templatescript
import { forEach } from ../../common/luch-request/utils;
export default {data() {return {items: [日, 月, 年],current: 0,chartData: {},//您可以通过修改 config-ucharts.js 文件中下标为 [pie] 的节点来配置全局默认参数如都是默认参数此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式达到页面简洁的需求。// 饼图opts: {color: [#1890FF,#91CB74,#FAC858,#EE6666,#73C0DE,#3CA272,#FC8452,#9A60B4,#ea7ccc],// padding: [15,5,5,5],// enableScroll: false,// legend: {// show:true,// lineHeight:20// },// extra: {// pie: {// activeOpacity: 0.5,// activeRadius: 10,// offsetAngle: 0,// labelWidth: 15,// border: true,// borderWidth: 3,// borderColor: #FFFFFF// }// }},// 条形图opt: {color: [#1890FF,#91CB74,#FAC858,#EE6666,#73C0DE,#3CA272,#FC8452,#9A60B4,#ea7ccc],// padding: [15,10,0,5],// enableScroll: false,// legend: {// show:false,// },// xAxis: {// disableGrid: true,// rotateLabel:true,// rotateAngle:45,// },// yAxis: {// data: [// {// min: 0// }// ]// },// extra: {// mount: {// type: bar,// widthRatio: 0.3,// borderWidth: 0,// barBorderRadius: [// 50,// 50,// 50,// 50// ],// linearType: custom// }// }}};},mounted() {var today new Date(); // 日var yesterday new Date(today.getTime()); // 月this.getServerData(yesterday.getFullYear() - (yesterday.getMonth() 1) - yesterday.getDate(),0) //年},methods: {// 定义方法 和值 (item,type)async getServerData(item,type) {let that thislet params {item: item, //自己定义的值 和后端的值要对应 问后端type: type}// 请求数据 携带 paramsawait that.$http.get(/totalView/totalView/PieChuKu,{params: params}).then(res {// 计算总值 reduce 累加 // 在括号内的箭头函数(acc, item) acc item.value是reduce方法所接受的函数。这个箭头函数接收两个参数acc表示累加器accumulatoritem表示当前正在处理的数组元素。箭头函数的功能是将累加器acc和当前元素的value属性相加并返回相加的结果。//最后的, 0表示reduce方法的初始值为0。这意味着在开始累加之前累加器acc的初始值为0。const totalValue res.data.result.reduce((acc, item) acc item.value, 0);// console.log(totalValue,asasasasa)// 计算占比并更新数组// console.log(res.data.result,dadsada)// 判断数据 要是是0 要么是有数值// 如果totalValue值 等于0 就循环遍历渲染if(totalValue0){res.data.result.forEach(item {item.labelText 0%; //强制数值变成0% 不写的话 就平均分成6份 因为有6份});}else{// 如果不是 就截取后两位 拼接上%res.data.result.forEach(item {const percentage (item.value / totalValue) * 100; //获取的数值× 100item.labelText percentage.toFixed(2)%; //然后 拼接上%});}// ress是一个包含series属性的对象。
// series是一个包含一个对象的数组。
// 这个对象包含一个名为data的属性其值为res.data.result假设res是一个包含data属性的对象而data属性包含一个名为result的数组。let ress {series: [{data:res.data.result}]};this.chartData JSON.parse(JSON.stringify(ress));}).catch(err {console.log(err,err)})},onClickItem(e) {if (this.current ! e.currentIndex) {this.current e.currentIndex;if(this.current0){// var today new Date(); 创建了一个Date对象表示当前的日期和时间。它会将当前的日期和时间信息存储在today变量中。// console.log(today,sasasasa) 打印出了today的值以及额外的字符串sasasasa到控制台。这里主要是用来调试和查看today的值。// var yesterday new Date(today.getTime()); 创建了另一个Date对象其时间戳以毫秒为单位的时间值与today相同。这意味着yesterday代表的是和today相同的日期和时间。// this.getServerData(yesterday.getFullYear() - (yesterday.getMonth() 1) - yesterday.getDate(),2); 这行代码调用了一个名为getServerData的方法并传递了两个参数。第一个参数是一个表示日期的字符串格式为年-月-日通过yesterday.getFullYear() - (yesterday.getMonth() 1) - yesterday.getDate()获取。第二个参数是字符串2。var today new Date();var yesterday new Date(today.getTime());this.getServerData(yesterday.getFullYear() - (yesterday.getMonth() 1) - yesterday.getDate(),0)}if(this.current1){var today new Date();var yesterday new Date(today.getTime());this.getServerData(yesterday.getFullYear() - (yesterday.getMonth() 1) - yesterday.getDate(),1);}if(this.current2){var today new Date(); //显示console.log(today,sasasasa)var yesterday new Date(today.getTime());this.getServerData(yesterday.getFullYear() - (yesterday.getMonth() 1) - yesterday.getDate(),2);} }}}
};
/scriptstyle scoped/* 请根据实际需求修改父元素尺寸组件自动识别宽高 */.charts-box {width: 100%;height: 230px;}
/style 地址演示 - uCharts跨平台图表库 五获取后台数据 进行页面渲染
案例一
1代码展示
templateviewcu-custom bgColorbg-gradual-pink :isBacktrueblock slotcontent荒料管理/block/cu-customview classuni-containeruni-table border stripe emptyText暂无更多数据uni-tr stylebackground-color:#ebebeb;uni-th width150 aligncenter序号/uni-thuni-th width150 aligncenter入库编号/uni-thuni-th aligncenter日期/uni-thuni-th aligncenter荒料种类/uni-thuni-th aligncenter长/uni-thuni-th aligncenter宽/uni-thuni-th aligncenter高/uni-thuni-th aligncenter体积/uni-thuni-th aligncenter颜色/uni-thuni-th aligncenter价格/uni-thuni-th aligncenter数量/uni-thuni-th aligncenter运单单价/uni-thuni-th aligncenter运费/uni-thuni-th width204 aligncenter运输人/uni-thuni-th width204 aligncenter总价/uni-thuni-th width204 aligncenter料场/uni-thuni-th aligncenter操作员/uni-thuni-th aligncenter图片/uni-thuni-th aligncenter文件/uni-thuni-th aligncenter备注/uni-th/uni-truni-tr v-for(item, index) in tableData :keyindexuni-td{{index1}}/uni-tduni-tdview classname{{ item.sbwWarehousingNumber}}/view/uni-tduni-td aligncenter{{ item.sbwWarehousingDate}}/uni-tduni-td aligncenter{{ item.sbwName_dictText }}/uni-tduni-td aligncenter{{ item.sbwLong }}/uni-tduni-td aligncenter{{ item.sbwWidth }}/uni-tduni-td aligncenter{{ item.sbwTall }}/uni-tduni-td aligncenter{{ item.sbwSbwVolume }}/uni-tduni-td aligncenter{{ item.sbwColor_dictText }}/uni-tduni-td aligncenter{{ item.sbwPrice }}/uni-tduni-td aligncenter{{ item.sbwNum }}/uni-tduni-td aligncenter{{ item.sbwFreightPrice }}/uni-tduni-td aligncenter{{ item.sbwFreight }}/uni-tduni-td aligncenter{{ item.sbwTransporter_dictText }}/uni-tduni-td aligncenter{{ item.sbwTotalPrice }}/uni-tduni-td aligncenter{{ item.sbwStockyard_dictText }}/uni-tduni-td aligncenter{{ item.sbwTransporter_dictText }}/uni-tduni-td aligncenter{{ item.sbwPic }}/uni-tduni-td aligncenter{{ item.sbwFile }}/uni-tduni-td aligncenter{{ item.sbwRemake }}/uni-td/uni-tr/uni-tablep总数据量{{this.total}}/pview classuni-pagination-boxuni-pagination show-icon :page-sizepageSize :currentpageCurrent:totaltotal changechange //view/view/view/templatescriptexport default {data() {return {searchVal: ,tableData: [],// 每页数据量pageSize: 10,// 当前页pageCurrent: 1,// 数据总量total: 0,}},onLoad() {this.selectedIndexs []this.getData(1) //初始化默认第一页},methods: {// 分页触发change(e) {// this.selectedIndexs.length 0this.getData(e.current) //点击出发 :currentpageCurrent 当前页},// 获取数据getData(pageCurrent) {// 定义请求数据 然后通过路径带到后端返回需要的数据this.pageCurrent pageCurrentlet pageNothis.pageCurrent //当前页let pageSizethis.pageSize //每页数据量// 路径拼接数据 发送到后端 获取翻页的数据和效果let url /block/smsBlockWarehousing/list?pageNopageNopageSizepageSize;this.$http.get(url).then(res {this.tableData res.data.result.recordsthis.totalres.data.result.total; //总数据量// console.log(结果, res.data.result.records)})},}}/script
2页面展示 案例二
1代码展示
templateviewcu-custom bgColorbg-gradual-pink :isBacktrueblock slotcontent路边石管理/block/cu-customuni-section titleviewuni-segmented-control :currentcurrent :valuesitems clickItemonClickItem //viewview classcontentview v-ifcurrent 0uni-table border stripe emptyText暂无更多数据uni-tr stylebackground-color:#ebebeb;uni-th width100 aligncenter序号/uni-thuni-th width204 aligncenter入库编号/uni-thuni-th aligncenter width204库存日期/uni-thuni-th width150 aligncenter长m/uni-thuni-th width150 aligncenter宽m/uni-thuni-th width150 aligncenter高m/uni-thuni-th width150 aligncenter数量/uni-thuni-th width150 aligncenter单价/uni-thuni-th width150 aligncenter体积㎡/uni-thuni-th width204 aligncenter加工费/uni-thuni-th width150 aligncenter颜色/uni-thuni-th width150 aligncenter机组/uni-thuni-th width150 aligncenter人员/uni-thuni-th width204 aligncenter操作员/uni-thuni-th width204 aligncenter图片/uni-thuni-th width150 aligncenter文件/uni-thuni-th width204 aligncenter备注/uni-th/uni-truni-tr v-for(item, index) in tableData :keyindexuni-td{{index1}}/uni-tduni-td aligncenter{{ item.sskwRkid }}/uni-tduni-td aligncenter{{ item.sskwDate }}/uni-tduni-td aligncenter{{ item.sskwLong }}/uni-tduni-td aligncenter{{ item.sskwWight }}/uni-tduni-td aligncenter{{ item.sskwHight }}/uni-tduni-td aligncenter{{ item.sskwNum }}/uni-tduni-td aligncenter{{ item.sskwPrice }}/uni-tduni-td aligncenter{{ item.sskwVolume }}/uni-tduni-td aligncenter{{ item.sskwWages }}/uni-tduni-td aligncenter{{item.sskwColor_dictText}}/uni-tduni-td aligncenter{{item.sskwSet_dictText}}/uni-tduni-td aligncenter{{ item.sskwPromed_dictText }}/uni-tduni-td aligncenter{{ item.sskwOpuser }}/uni-tduni-td aligncenterimg :srcitem.sabwPic //uni-tduni-td aligncenter{{ item.sskwFile }}/uni-tduni-td aligncenter{{ item.sskwRemake }}/uni-td/uni-tr/uni-tableview classuni-pagination-boxuni-pagination show-icon :page-sizepageSize:currentpageCurrent :totaltotal changechange //view/viewview v-ifcurrent 1uni-table border stripe emptyText暂无更多数据uni-tr stylebackground-color:#ebebeb;uni-th width100 aligncenter序号/uni-thuni-th width204 aligncenter入库编号/uni-thuni-th aligncenter width204库存日期/uni-thuni-th width150 aligncenter长m/uni-thuni-th width150 aligncenter宽m/uni-thuni-th width150 aligncenter高m/uni-thuni-th width150 aligncenter数量/uni-thuni-th width150 aligncenter单价/uni-thuni-th width150 aligncenter体积㎡/uni-thuni-th width204 aligncenter加工费/uni-thuni-th width150 aligncenter颜色/uni-thuni-th width150 aligncenter机组/uni-thuni-th width150 aligncenter人员/uni-thuni-th width204 aligncenter操作员/uni-thuni-th width150 aligncenter加工方式/uni-thuni-th width204 aligncenter图片/uni-thuni-th width150 aligncenter文件/uni-thuni-th width204 aligncenter备注/uni-th/uni-truni-tr v-for(item, index) in tableData2 :keyindexuni-td{{index1}}/uni-tduni-tdview classname{{ item.skwRkid }}/view/uni-tduni-td aligncenter{{ item.skwDate }}/uni-tduni-td aligncenter{{ item.skwLong }}/uni-tduni-td aligncenter{{ item.skwWight}}/uni-tduni-td aligncenter{{ item.skwHight }}/uni-tduni-td aligncenter{{ item.skwNum }}/uni-tduni-td aligncenter{{ item.skwPrice}}/uni-tduni-td aligncenter{{ item.skwVolume }}/uni-tduni-td aligncenter{{ item.skwWages }}/uni-tduni-td aligncenter{{item.skwColor_dictText}}/uni-tduni-td aligncenter{{item.skwSet_dictText}}/uni-tduni-td aligncenter{{ item.skwPerson_dictText }}/uni-tduni-td aligncenter{{ item.skwOpuser }}/uni-tduni-td aligncenter{{ item.skwPromed_dictText}}/uni-tduni-td aligncenterimg :srcitem.skwPic //uni-tduni-td aligncenter{{ item.skwFile }}/uni-tduni-td aligncenter{{ item.skwRemake }}/uni-td/uni-tr/uni-tableview classuni-pagination-boxuni-pagination show-icon :page-sizepageSize2:currentpageCurrent2 :totaltotal2 changechangeChengpin //view/view/view/uni-section/view
/templatescriptexport default {data() {return {tableData: [], //半成品获取数据tableData2: [], //成品获取数据// 每页数据量pageSize: 7,pageSize2: 7,// 当前页pageCurrent: 1,pageCurrent2: 1,// 数据总量total: 0,total2:0,loading: false,current: 0,current2: 0,items: [半成品展示, 成品展示],}},// 初始值onLoad() {// this.getRemote()this.selectedIndexs []this.getData(1)this.getData2(1)},// 方法methods: {// 点击切换展示页面onClickItem(e) {if (this.current ! e.currentIndex) {this.current e.currentIndex}},// 分页触发change(e) {// this.$refs.table.clearSelection()this.selectedIndexs.length 0this.getData(e.current) //半成品},changeChengpin(e) {// this.$refs.table.clearSelection()this.selectedIndexs.length 0this.getData2(e.current) //成品},// 半成品获取数据getData(pageCurrent) {this.loading truethis.pageCurrent pageCurrentlet pageNo this.pageCurrentlet pageSize this.pageSizelet url /sakerb/smsSaKerbWarehousing/list?pageNo pageNo pageSize pageSize;this.$http.get(url).then(res {this.tableData res.data.result.recordsthis.total res.data.result.total;// console.log(结果, res.data.result.records)});},// 成品获取数据getData2(pageCurrent2) {this.loading truethis.pageCurrent2 pageCurrent2let pageNo this.pageCurrent2let pageSize this.pageSize2let url2 /kerb/smsKerbWarehousing/list?pageNo pageNo pageSize pageSize;this.$http.get(url2).then(res {this.tableData2 res.data.result.recordsthis.total2 res.data.result.total;// console.log(结果, res.data.result.records)})}// 成品伪request请求 }}
/script2页面展示
