• 小程序 打开方式 页面效果 表单页面 点击跳到详情页 图标 获取后台数据 进行页面渲染

     请求地址：geecg-uniapp 同源策略 数据请求 获取后台数据 ui库安装 冲突解决（3）-CSDN博客

    一.uniapp转小程序  

    (1)  运行微信开发工具

    （2） 配置id  然后运行

     打开小程序  路径  E:\通\uniapp-jeecg\unpackage\dist\dev\mp-weixin

    （5）运行

    二.表单页面

    1. <template>
    2.   <view>
    3.     <cu-custom bgColor="bg-gradual-blue" :isBack="true">
    4.       <block slot="content">额外加工</block>
    5.     </cu-custom>
    6.  
    7.  
    8.     <uni-section title=" ">
    9.       <view style="margin: 0 20px;">
    10.  
    11.         <uni-forms ref="customForm" :rules="customRules" :modelValue="customFormData">
    12.           <uni-forms-item label="类型" required name="seType">
    13.             <uni-data-select v-model="customFormData.seType" :localdata="range" style="width: 215px; "
    14.                              @change="select"></uni-data-select>
    15.           </uni-forms-item>
    16.           <uni-forms-item label="石材编号" required name="seRknum">
    17.             <uni-data-select style="width: 215px; " v-model="customFormData.seRknum" :localdata="candidates"></uni-data-select>
    18.           </uni-forms-item>
    19.           <uni-forms-item label="日期时间" required name="seDate">
    20.             <uni-datetime-picker style="width: 215px; " type="datetime" return-type="timestamp" v-model="customFormData.seDate" />
    21.           </uni-forms-item>
    22.           <uni-forms-item label="长" required name="seLong">
    23.             <!-- <input  v-model="customFormData.seLong"   placeholder="请输入长" type="number"  /> -->
    24.  
    25.             <input class="uni-input " name="input" v-model="customFormData.seLong" placeholder="请输入长"
    26.                    @input="fpNumInput" />
    27.           </uni-forms-item>
    28.           <uni-forms-item label="宽" required name="seWeight">
    29.             <input class="uni-input " name="input" v-model="customFormData.seWeight" placeholder="请输入宽"
    30.                    type="number" @input="fpNumInputseWeight" />
    31.           </uni-forms-item>
    32.           <uni-forms-item label="高" required name="seHeight">
    33.             <input class="uni-input " name="input" v-model="customFormData.seHeight" placeholder="请输入高"
    34.                    type="number" @input="fpNumInputseHeight" />
    35.           </uni-forms-item>
    36.           <uni-forms-item label="数量" required name="seNum">
    37.             <input class="uni-input " name="input" v-model="customFormData.seNum" placeholder="请输入数量"
    38.                    type="number" @input="fpNumInputseNum" />
    39.           </uni-forms-item>
    40.           <uni-forms-item label="面积" required name="seMj">
    41.             <input class="uni-input " name="input" v-model="customFormData.seMj" placeholder="请输入面积"
    42.                    type="number" @input="fpNumInputseMj" />
    43.           </uni-forms-item>
    44.           <uni-forms-item label="体积" required name="seTj">
    45.             <input class="uni-input " name="input" v-model="customFormData.seTj" placeholder="请输入体积"
    46.                    type="number" @input="fpNumInputseTj" />
    47.           </uni-forms-item>
    48.           <uni-forms-item label="额外加工" required name="sePromed">
    49.             <uni-data-select style="width: 215px; " v-model="customFormData.sePromed" :localdata="sePromed"></uni-data-select>
    50.           </uni-forms-item>
    51.  
    52.           <uni-forms-item label="机组" required name="seSet">
    53.             <uni-data-select style="width: 215px; " v-model="customFormData.seSet" :localdata="seSets"></uni-data-select>
    54.           </uni-forms-item>
    55.           <uni-forms-item label="单价" required name="sePrice">
    56.             <input class="uni-input " name="input" v-model="customFormData.sePrice" placeholder="请输入单价"
    57.                    type="number" @input="fpNumInputsePrice" />
    58.           </uni-forms-item>
    59.           <uni-forms-item label="总价">
    60.             <input class="uni-input " name="input" v-model="customFormData.seZprice" placeholder="请输入总价"
    61.                    type="number" @input="fpNumInputseZprice" />
    62.           </uni-forms-item>
    63.           <uni-forms-item label="人员" required name="sePerson">
    64.             <uni-data-select style="width: 215px; " v-model="customFormData.sePerson" :localdata="sePerson"></uni-data-select>
    65.           </uni-forms-item>
    66.           <uni-forms-item label="操作人">
    67.             <uni-easyinput v-model="customFormData.seOpuser" placeholder="请输入操作人" disabled  style="width: 215px; "/>
    68.             <!-- <input class="uni-input " v-model="customFormData.seOpuser" placeholder="请输入操作人" disabled /> -->
    69.           </uni-forms-item>
    70.           <uni-forms-item label="图片" required name="sePic">
    71.  
    72.             <uni-file-picker v-model="imageValue" fileMediatype="image" mode="grid" @select="upload"
    73.                              @delete="delIMG" title="最多选择3张图片" :auto-upload='false' limit="3"></uni-file-picker>
    74.  
    75.           </uni-forms-item>
    76.           <uni-forms-item label="备注">
    77.             <uni-easyinput style="width: 215px; " type="textarea" v-model="customFormData.seRemake" placeholder="请输入备注" />
    78.           </uni-forms-item>
    79.  
    80.  
    81.         </uni-forms>
    82.         <button type="primary" @click="submit('customForm')" style='background-color: blue;'>提交</button>
    83.       </view>
    84.     </uni-section>
    85.   </view>
    86. </template>
    87. <script>
    88. export default {
    89.   data() {
    90.     return {
    91.       imgURL: '',
    92.       imageValue: [],
    93.       imageUrls: [],
    94.  
    95.       tableDatafinish: [],
    96.       // 定义初始数据  绑定类型   :localdata="range"
    97.       range: [{
    98.         value: 1,
    99.         text: "荒料"
    100.       },
    101.         {
    102.           value: 2,
    103.           text: "板材成品"
    104.         },
    105.         {
    106.           value: 3,
    107.           text: "板材半成品"
    108.         },
    109.         {
    110.           value: 4,
    111.           text: "路边石成品"
    112.         },
    113.         {
    114.           value: 5,
    115.           text: "路边石半成品"
    116.         },
    117.         {
    118.           value: 6,
    119.           text: "界石成品"
    120.         },
    121.         {
    122.           value: 7,
    123.           text: "界石半成品"
    124.         }
    125.       ],
    126.       // 定义初始数据  绑定石材编号   :localdata="candidates"
    127.       candidates: [],
    128.  
    129.       // 定义初始数据  绑定机组   :localdata="seSet"
    130.       seSets: [],
    131.  
    132.       // 定义初始数据  绑定机组   :localdata="seSet"
    133.       sePerson: [],
    134.  
    135.       sePromed: [],
    136.  
    137.       // 定义初始数据  绑定输入框  获取输入数据   v-model="customFormData.xxx" aa
    138.       customFormData: {
    139.         seType: '',
    140.         seRknum: '',
    141.         seDate: new Date(),
    142.         seLong: '',
    143.         seWeight: '',
    144.         seHeight: '',
    145.         seNum: '',
    146.         seMj: '',
    147.         seTj: '',
    148.         sePromed: '',
    149.         seSet: '',
    150.         sePrice: '',
    151.         seZprice: '',
    152.         sePerson: '',
    153.         seOpuser: '',
    154.         seRemake: '',
    155.         sePic: ''
    156.       },
    157.       customRules: {
    158.  
    159.         seType: {
    160.           rules: [{
    161.             required: true,
    162.             errorMessage: '石材编号不能为空'
    163.           }]
    164.         },
    165.         seRknum: {
    166.           rules: [{
    167.             required: true,
    168.             errorMessage: '石材编号不能为空'
    169.           }]
    170.         },
    171.         seDate: {
    172.           rules: [{
    173.             required: true,
    174.             errorMessage: '时间不能为空'
    175.           }]
    176.         },
    177.         seLong: {
    178.           rules: [{
    179.             required: true,
    180.             errorMessage: '长度不能为空'
    181.           }]
    182.         },
    183.         // seLong: [
    184.         // 		 { required: true, message: '请再次输入密码', trigger: 'blur' },
    185.         // 		          { pattern: /^\S{6,15}$/, message: '请输入 6 ~ 15 位的非空字符', trigger: 'blur' },
    186.  
    187.         // ],
    188.         seWeight: {
    189.           rules: [{
    190.             required: true,
    191.             errorMessage: '宽度不能为空'
    192.           }]
    193.         },
    194.         seHeight: {
    195.           rules: [{
    196.             required: true,
    197.             errorMessage: '高度不能为空'
    198.           }]
    199.         },
    200.         seNum: {
    201.           rules: [{
    202.             required: true,
    203.             errorMessage: '数量不能为空'
    204.           }]
    205.         },
    206.         seMj: {
    207.           rules: [{
    208.             required: true,
    209.             errorMessage: '面积不能为空'
    210.           }]
    211.         },
    212.         seTj: {
    213.           rules: [{
    214.             required: true,
    215.             errorMessage: '体积不能为空'
    216.           }]
    217.         },
    218.         sePromed: {
    219.           rules: [{
    220.             required: true,
    221.             errorMessage: '额外加工不能为空'
    222.           }]
    223.         },
    224.         seSet: {
    225.           rules: [{
    226.             required: true,
    227.             errorMessage: '机组不能为空'
    228.           }]
    229.         },
    230.         sePrice: {
    231.           rules: [{
    232.             required: true,
    233.             errorMessage: '单价不能为空'
    234.           }]
    235.         },
    236.         sePerson: {
    237.           rules: [{
    238.             required: true,
    239.             errorMessage: '人员不能为空'
    240.           }]
    241.         },
    242.       },
    243.     }
    244.   },
    245.  
    246.   mounted() {
    247.     // 机组
    248.     let url33 = '/ewjg/smsEwjg/gztj';
    249.     this.$http.get(url33).then(res => {
    250.       console.log(res.data.result)
    251.  
    252.       res.data.result.records.forEach(value => { //循环 添加到 candidates
    253.         this.seSets.push({
    254.           value: value.seSet,
    255.           text: value.seSet_dictText
    256.         })
    257.       })
    258.  
    259.       res.data.result.records.forEach(value => { //循环 添加到 candidates
    260.         this.sePerson.push({
    261.           value: value.sePerson,
    262.           text: value.sePerson_dictText
    263.         })
    264.       })
    265.  
    266.       res.data.result.records.forEach(value => { //循环 添加到 candidates
    267.         this.sePromed.push({
    268.           value: value.sePromed,
    269.           text: value.sePromed_dictText
    270.         })
    271.       })
    272.     })
    273.   },
    274.   methods: {
    275.     fpNumInput(e) {
    276.       const o = e.target;
    277.       const inputRule = /[^\d]/g
    278.       this.$nextTick(function() {
    279.         this.customFormData.seLong = o.value.replace(inputRule, '');
    280.       })
    281.     },
    282.  
    283.     fpNumInputseWeight(e) {
    284.       const o = e.target;
    285.       const inputRule = /[^\d]/g
    286.       this.$nextTick(function() {
    287.         this.customFormData.seWeight = o.value.replace(inputRule, '');
    288.       })
    289.     },
    290.  
    291.     fpNumInputseHeight(e) {
    292.       const o = e.target;
    293.       const inputRule = /[^\d]/g
    294.       this.$nextTick(function() {
    295.         this.customFormData.seHeight = o.value.replace(inputRule, '');
    296.       })
    297.     },
    298.  
    299.     fpNumInputseNum(e) {
    300.       const o = e.target;
    301.       const inputRule = /[^\d]/g
    302.       this.$nextTick(function() {
    303.         this.customFormData.seNum = o.value.replace(inputRule, '');
    304.       })
    305.     },
    306.  
    307.     fpNumInputseMj(e) {
    308.       const o = e.target;
    309.       const inputRule = /[^\d]/g
    310.       this.$nextTick(function() {
    311.         this.customFormData.seMj = o.value.replace(inputRule, '');
    312.       })
    313.     },
    314.  
    315.  
    316.     fpNumInputseTj(e) {
    317.       const o = e.target;
    318.       const inputRule = /[^\d]/g
    319.       this.$nextTick(function() {
    320.         this.customFormData.seTj = o.value.replace(inputRule, '');
    321.       })
    322.     },
    323.  
    324.     fpNumInputsePrice(e) {
    325.       const o = e.target;
    326.       const inputRule = /[^\d]/g
    327.       this.$nextTick(function() {
    328.         this.customFormData.sePrice = o.value.replace(inputRule, '');
    329.       })
    330.     },
    331.  
    332.     fpNumInputseZprice(e) {
    333.       const o = e.target;
    334.       const inputRule = /[^\d]/g
    335.       this.$nextTick(function() {
    336.         this.customFormData.seZprice = o.value.replace(inputRule, '');
    337.       })
    338.     },
    339.  
    340.  
    341.  
    342.     // 获取上传状态
    343.     upload(e) {
    344.       this.imageValue.push(e.tempFiles[0])
    345.     },
    346.     delIMG(e) {
    347.       const index = this.imageValue.findIndex(v => v.url === e.tempFilePath);
    348.       if (index !== -1) {
    349.         this.imageValue.splice(index, 1);
    350.       }
    351.     },
    352.     submitImage() {
    353.       if (this.imageValue.length != 0) {
    354.         const uploadPromises = this.imageValue.map(val => {
    355.  
    356.           const formData = {
    357.             biz: 'temp',
    358.           };
    359.           return new Promise((resolve, reject) => {
    360.             uni.uploadFile({
    361.               url: 'http://43.138.31.228:1888/jeecg-boot/sys/common/upload',
    362.               formData: formData,
    363.               filePath: val.path,
    364.               name: 'file',
    365.               fileType: 'image',
    366.               fileName: val.name,
    367.               success: (uploadFileRes) => {
    368.                 var jsonObject = JSON.parse(uploadFileRes.data);
    369.                 const imageUrl = jsonObject.message;
    370.                 this.imageUrls.push(imageUrl); // 将每次上传的图片链接添加到数组中
    371.                 if (this.imageUrls.length > 1) {
    372.                   this.customFormData.sePic = this.imageUrls.join(',');
    373.                 } else {
    374.                   this.customFormData.sePic = imageUrl
    375.                 }
    376.                 resolve();
    377.               },
    378.               fail: (err) => {
    379.                 reject(err);
    380.               }
    381.             });
    382.           });
    383.         });
    384.         this.imageUrls = []
    385.         return Promise.all(uploadPromises)
    386.       } else {
    387.         this.customFormData.sePic = '';
    388.         return Promise.resolve(); // 如果没有上传图片，直接返回一个已解决的Promise对象
    389.       }
    390.     },
    391.  
    392.     select() {
    393.  
    394.       let url3 = '/cwkhfk/cwKhfk/scxxList';
    395.       let params = {
    396.         type: this.value //定义 this.value 赋值给type  最后parmas
    397.       }
    398.       this.$http.get(url3, {
    399.         params: params //定义赋值  params = parmas
    400.       }).then(res => {
    401.         // this.candidates = res.data.result
    402.         res.data.result.forEach(value => { //循环 添加到 candidates
    403.           this.candidates.push({
    404.             value: value.number,
    405.             text: value.number
    406.           })
    407.         })
    408.  
    409.  
    410.       })
    411.     },
    412.     async submit(ref) {
    413. 		console.log('tijiao')
    414.  
    415.       // await this.submitImage();
    416.  
    417.       // console.log(this.customFormData.sePic)
    418.  
    419.       // //添加上传
    420.       // let customFormData = this.customFormData
    421.       // // 获取数据进行添加
    422.       // let url = '/ewjg/smsEwjg/add';
    423.       // var params = customFormData //定义赋值  params = customFormData  后端带着parmas去后端
    424.       // this.$http.post(url, params).then(res => {
    425.       //   this.customFormData = res.data.result
    426.       // })
    427.       // this.customFormData = ''
    428.       // this.$refs[ref].validate().then(res => {
    429.       //   console.log('success', res);
    430.       //   uni.showToast({
    431.       //     title: `校验通过`
    432.       //   })
    433.       // }).catch(err => {
    434.       //   console.log('err', err);
    435.       // })
    436.  
    437.     },
    438.   }
    439. }
    440. </script>
    441.  
    442. <style>
    443. .uni-input {
    444.   width: 215px;
    445.   font-size: 12px;
    446.   height: 35px;
    447.   border: 1px solid #dedede;
    448.   padding: 0 5px;
    449.   border-radius: 5px;
    450. }
    451. </style>

    二. 点击跳到详情页

     父页面

    1.  
    2.  
    3.  <template>
    4.  	<view class="order-list">
    5.  
    6.  			<cu-custom bgColor="bg-gradual-blue" :isBack="true">
    7.  				<block slot="content">荒料管理</block>
    8.  			</cu-custom>
    9.  
    10.  		<view class="" >
    11.  			<!-- 订单展示 -->
    12.  			<mescroll-uni ref="mescrollRef" @init="mescrollInit" top="60rpx" @down="downCallback" @up="upCallback">
    13.  				<!-- 数据列表 -->
    14.  				<view class="data-list" style=" margin-top: 2rem;">
    15.  					<!-- 空内容展示-->
    16.  					<u-empty :text="textNoMore" v-if="dataList.length==0" mode="list"></u-empty>
    17.  					<!-- 空内容展示End-->
    18.  					<view class="order margin-top-sm" v-for="(item, aindex) in dataList" :key="item.id"
    19.  						@click="jumpToOrder(item)">
    20.  						<view class='bg-white padding-sm flex padding-right-zero flex-between'>
    21.  			
    22.  							<view class='flex-sub  radius text-left text-xs margin-top-xs'>
    23.  								<image src="../../static/common/huang.png"
    24.  									style="width: 100rpx;height: 80rpx;margin-top: -10px;"></image>
    25.  							</view>
    26.  							<view class='flex-sub  radius text-left text-xs margin-top-xs'
    27.  								 style="margin-left: -200px;font-size: 12px;">
    28.  								编号：{{ item.sbwWarehousingNumber}}</view>
    29.  						</view>
    30.  			
    31.  						<view class="bg-white padding-sm solid-top" >
    32.  							<view class='padding-top-sm text-sm flex'>
    33.  							<view class="left-title"  style="font-size: 12px;">日期：</view><view class="right-content"  style="font-size: 12px;">{{ item.sbwWarehousingDate}}</view>					
    34.  							</view>
    35.  							<view class='padding-top-sm text-sm flex'></view>
    36.  						</view>
    37.  			
    38.  					</view>
    39.  					<!-- 返回顶部 -->
    40.  					<u-back-top :scroll-top="scrollTop" top="600">
    41.  					</u-back-top>
    42.  					<!-- 返回顶部End -->
    43.  				</view>
    44.  			</mescroll-uni>
    45.  			
    46.  		</view>
    47.  
    48.  		<!-- 订单展示完毕End -->
    49.  	</view>
    50.  </template>
    51.  
    52.  <script>
    53.  	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
    54.  	import configService from '@/common/service/config.service.js';
    55.  	export default {
    56.  		mixins: [MescrollMixin],
    57.  		data() {
    58.  			return {
    59.  				pageable: {
    60.  					pageIndex: 0,
    61.  					pageSize: 10
    62.  				},
    63.  				list: [{
    64.  					complainantStatus: '0',
    65.  					name: '待解决'
    66.  				
    67.  				}, {
    68.  					complainantStatus: '10',
    69.  					name: '已解决'
    70.  		
    71.  				}],
    72.  			    textNoMore :'-- 没有更多数据了 --',
    73.  				tabCurrent: 0,
    74.  				scrollTop: 0,
    75.  				dataList: [],
    76.  			}
    77.  		},
    78.  
    79.  		methods: {
    80.  
    81.  			//下拉刷新
    82.  			downCallback() {
    83.  				this.mescroll.scrollTo(0, 0)
    84.  				this.mescroll.resetUpScroll();
    85.  			},
    86.  			//上拉加载
    87.  			async upCallback(pages) {
    88.  				let pageIndex = pages.num // 页码, 默认从1开始
    89.  				let pageSize = pages.size // 页长, 默认每页10条
    90.  				this.pageable.pageIndex = pageIndex
    91.  				this.pageable.pageSize = pageSize
    92.  				let data = await this.getOrder(this.pageable)
    93.  				console.log("data" + data)
    94.  				const curPageData = data.records || []
    95.  				if (data && curPageData.length > 0) {
    96.  					const curPageLen = curPageData.length // 当前数据长度
    97.  					const totalPage = data.total // 获取接口总共有多少页
    98.  					this.mescroll.endByPage(curPageLen, totalPage);
    99.  				} else {
    100.  					this.mescroll.endErr()
    101.  				}
    102.  			},
    103.  			//订单列表
    104.  			async getOrder(pageable) {
    105.  				let that = this
    106.  				let params = {
    107.  					openid: uni.getStorageSync("openId"),
    108.  					complainantStatus: this.list[this.tabCurrent].complainantStatus,
    109.  					pageNo: pageable.pageIndex,
    110.  					pageSize: pageable.pageSize
    111.  				}
    112.  				// console.log(params)
    113.  				let preData = {
    114.  					records: []
    115.  				}
    116. 				// 获取列表数据 
    117.  				await that.$http.get('/block/smsBlockWarehousing/list', {
    118.  					params: params
    119.  				}).then(res => {
    120.  					console.log(res)
    121.  					if (res.data.success !== true) {
    122.  						that.$tip.alert(res.data.message)
    123.  					} else {
    124.  						if (pageable.pageIndex < 2)
    125.  							that.dataList = [] // 如果是第一页需手动置空列表
    126.  						that.dataList.push(...res.data.result.records)  //数据添加到dataList
    127.  						console.log(res.data.result)
    128.  						preData = res.data.result;
    129.  					}
    130.  				}).catch(err => {
    131.  					// that.$tip.alert("网络波动，请重试！")
    132.  					console.log("err")
    133.  				})
    134.  				console.log(preData)
    135.  				return preData
    136.  			},
    137.  			
    138. 			// 点击跳转到huangliao页面 携带当前点击的id 过去
    139.  			jumpToOrder(item) {
    140.  				// console.log(item, 'adad')
    141.  				uni.navigateTo({
    142.  					url: '/pages/common/huangliao?id=' + item.id
    143.  				})
    144.  			},
    145.  		
    146.  
    147.  		}
    148.  	}
    149.  </script>

    子页面

    1.  
    2. <template>
    3. 	<view style="background-color: #ffffff;">
    4. 		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
    5. 			<block slot="content">荒料详情</block>
    6. 		</cu-custom>
    7. 		<u-form :model="form" ref="uForm">
    8. 			<view class="container">
    9.  
    10. 				<view style="margin-top: 5px; font-size: 13px;padding:10px 15px ; display: flex;">入库编号 ：<span
    11. 						style="color:#666;">{{form.sbwWarehousingNumber}}</span></view>
    12. 				<view style="border: #e5e5e5 1px solid; margin: 10px;"></view>
    13.  
    14. 				<view style="margin-top: 5px; font-size: 13px;padding:10px 15px ;">入库日期 ：<span
    15. 						style="color:#666;">{{form.sbwWarehousingDate}}</span></view>
    16. 				<view style="border: #e5e5e5 1px solid; margin: 10px;;"></view>
    17. 				<view style="margin-top: 5px; font-size: 13px;padding:10px 15px ;">荒料种类 ：<span
    18. 						style="color:#666;">{{form.sbwName_dictText}}</span></view>
    19. 				<view style="border: #e5e5e5 1px solid; margin: 10px;;"></view>
    20.  
    21. 				<view style="margin-top: 5px; font-size: 13px;padding:10px 15px ;">长 ：<span
    22. 						style="color:#666;">{{form.sbwLong}}</span></view>
    23. 				<view style="border: #e5e5e5 1px solid; margin: 10px;;"></view>
    24. 				<view style="margin-top: 5px; font-size: 13px;padding:10px 15px ;">宽 ：<span
    25. 						style="color:#666;">{{form.sbwWidth}}</span></view>
    26. 				<view style="border: #e5e5e5 1px solid; margin: 10px;;"></view>
    27.  
    28. 				<view style="margin-top: 5px; font-size: 13px;padding:10px 15px ;">高 ：<span
    29. 						style="color:#666;">{{form.sbwTall}}</span></view>
    30. 				<view style="border: #e5e5e5 1px solid; margin: 10px;;"></view>
    31. 				<view style="margin-top: 5px; font-size: 13px;padding:10px 15px ;">体积 ：<span
    32. 						style="color:#666;">{{form.sbwSbwVolume}}</span></view>
    33. 				<view style="border: #e5e5e5 1px solid; margin: 10px;;"></view>
    34.  
    35. 				<view style="margin-top: 5px; font-size: 13px;padding:10px 15px ;">颜色 ：<span
    36. 						style="color:#666;">{{form.sbwColor_dictText}}</span></view>
    37. 				<view style="border: #e5e5e5 1px solid; margin: 10px;;"></view>
    38. 				<view style="margin-top: 5px; font-size: 13px;padding:10px 15px ;">价格 ：<span
    39. 						style="color:#666;">{{form.sbwPrice}}</span></view>
    40. 				<view style="border: #e5e5e5 1px solid; margin: 10px;;"></view>
    41.  
    42. 				<view style="margin-top: 5px; font-size: 13px;padding:10px 15px ;">数量 ：<span
    43. 						style="color:#666;">{{form.sbwNum}}</span></view>
    44. 				<view style="border: #e5e5e5 1px solid; margin: 10px;;"></view>
    45. 				<view style="margin-top: 5px; font-size: 13px;padding:10px 15px ;">运单单价 ：<span
    46. 						style="color:#666;">{{form.sbwFreightPrice}}</span></view>
    47. 				<view style="border: #e5e5e5 1px solid; margin: 10px;;"></view>
    48.  
    49. 				<view style="margin-top: 5px; font-size: 13px;padding:10px 15px ;">运费 ：<span
    50. 						style="color:#666;">{{form.sbwFreight}}</span></view>
    51. 				<view style="border: #e5e5e5 1px solid; margin: 10px;;"></view>
    52.  
    53. 				<view style="margin-top: 5px; font-size: 13px;padding:10px 15px ;">运输人 ：<span
    54. 						style="color:#666;">{{form.sbwTransporter_dictText}}</span></view>
    55. 				<view style="border: #e5e5e5 1px solid; margin: 10px;;"></view>
    56. 				<view style="margin-top: 5px; font-size: 13px;padding:10px 15px ;">总价 ：<span
    57. 						style="color:#666;">{{form.sbwNum}}</span></view>
    58. 				<view style="border: #e5e5e5 1px solid; margin: 10px;;"></view>
    59.  
    60. 				<view style="margin-top: 5px; font-size: 13px;padding:10px 15px ;">料场 ：<span
    61. 						style="color:#666;">{{form.sbwFreight}}</span></view>
    62. 				<view style="border: #e5e5e5 1px solid; margin: 10px;;"></view>
    63. 				<view style="margin-top: 5px; font-size: 13px;padding:10px 15px ;">操作员 ：<span
    64. 						style="color:#666;">{{form.sbwTransporter_dictText}}</span></view>
    65. 				<view style="border: #e5e5e5 1px solid; margin: 10px;;"></view>
    66.  
    67. 				<view style="margin-top: 5px; font-size: 13px;padding:10px 15px ;">图片 ：<!-- <span
    68. 						style="color:#666;">{{form.sbwPic}}</span> -->
    69. 					<image src="form.sbwPic" mode=""></image>
    70. 				</view>
    71. 				<view style="border: #e5e5e5 1px solid; margin: 10px;;"></view>
    72.  
    73. 				<view style="margin-top: 5px; font-size: 13px;padding:10px 15px ;">文件 ：<span
    74. 						style="color:#666;">{{form.sbwFile}}</span></view>
    75. 				<view style="border: #e5e5e5 1px solid; margin: 10px;;"></view>
    76. 				<view style="margin-top: 5px; font-size: 13px;padding:10px 15px ;">备注 ：<span
    77. 						style="color:#666;">{{form.sbwRemake}}</span></view>
    78. 				<view style="border: #e5e5e5 1px solid; margin: 10px;;"></view>
    79. 			</view>
    80. 		</u-form>
    81.  
    82. 	</view>
    83. </template>
    84.  
    85. <script>
    86. 	export default {
    87. 		data() {
    88. 			return {
    89.  
    90. 				form: {
    91. 					sbwWarehousingDate: '',
    92. 					sbwWarehousingNumber: '',
    93. 					sbwName_dictText: '',
    94. 					sbwLong: '',
    95. 					sbwWidth: '',
    96. 					sbwTall: '',
    97. 					sbwSbwVolume: '',
    98. 					sbwColor_dictText: '',
    99. 					sbwPrice: '',
    100. 					sbwNum: '',
    101. 					sbwFreightPrice: '',
    102. 					sbwFreight: '',
    103.  
    104. 					sbwTransporter_dictText: '',
    105. 					sbwTotalPrice: '',
    106. 					sbwStockyard_dictText: '',
    107. 					sbwPic: '',
    108. 					sbwFile: '',
    109. 					sbwRemake: ''
    110. 				},
    111.  
    112. 			}
    113. 		},
    114.  
    115. 		onLoad: function(options) {
    116.  
    117. 			this.getOrderDetail()
    118.  
    119. 		},
    120.  
    121. 		methods: {
    122.  
    123.  
    124. 			// 接受数据
    125. 			async getOrderDetail() {
    126. 				let that = this
    127. 				let params = {
    128. 					id: this.id
    129. 				}
    130. 				console.log(params)
    131. 				//return 
    132. 				await this.$http.get('/block/smsBlockWarehousing/list', {
    133. 					params: params
    134. 				}).then(res => {
    135. 					console.log("get RES")
    136. 					console.log(res.data.result.records[0], '马甲的喇嘛是的')
    137. 					if (res.data.success !== true) {
    138. 						that.form = res.data.result.records[0]
    139. 						that.$tip.alert(res.data.message)
    140. 					} else {
    141. 						that.form = res.data.result.records[0]
    142. 						if (that.form.complaintFileString) {
    143. 							that.fileList = that.form.complaintFileString.split(",")
    144. 						}
    145. 						console.log(that.fileList)
    146. 					}
    147. 				}).catch(err => {
    148. 					// that.$tip.alert("网络波动，请重试！")
    149. 					console.log(err)
    150. 				})
    151. 			},
    152.  
    153.  
    154. 		}
    155. 	}
    156. </script>

    三.图标

    1. <template>
    2. 		<view>
    3. 		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
    4. 			<block slot="content">出库统计图</block>
    5. 		</cu-custom>
    6. 		<view>
    7. 			 <uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="button" activeColor="#3a82f8"></uni-segmented-control>
    8. 		</view>
    9.   <view class="charts-box">
    10.     <qiun-data-charts 
    11.       type="pie"
    12.       :opts="opts"
    13.       :chartData="chartData"
    14.     />
    15. 	<qiun-data-charts
    16. 	  type="mount"
    17. 	  :opts="opt"
    18. 	  :chartData="chartData"
    19. 	/>
    20.   </view>
    21.     </view>
    22. </template>
    23.  
    24. <script>
    25. import { forEach } from '../../common/luch-request/utils';
    26. export default {
    27.   data() {
    28.     return {
    29. 	items: ['日', '月', '年'],
    30. 	current: 0,
    31.     chartData: {},
    32.       //您可以通过修改 config-ucharts.js 文件中下标为 ['pie'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
    33.      
    34. 	  // 饼图
    35. 	  opts: {
    36.         color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
    37.         // padding: [15,5,5,5],
    38.         // enableScroll: false,
    39. 		// legend: {
    40. 		// 	show:true,
    41. 		// 	lineHeight:20
    42. 		// },
    43.         // extra: {
    44.         //   pie: {
    45.         //     activeOpacity: 0.5,
    46.         //     activeRadius: 10,
    47.         //     offsetAngle: 0,
    48.         //     labelWidth: 15,
    49.         //     border: true,
    50.         //     borderWidth: 3,
    51.         //     borderColor: "#FFFFFF"
    52.         //   }
    53.         // }
    54.       },
    55. 	  
    56. 	  // 条形图
    57. 	  opt: {
    58. 	          color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
    59. 	   //        padding: [15,10,0,5],
    60. 	   //        enableScroll: false,
    61. 	   //        legend: {
    62. 				//   show:false,
    63. 				
    64. 			 //  },
    65. 	   //        xAxis: {
    66. 	   //          disableGrid: true,
    67. 				// rotateLabel:true,
    68. 				// rotateAngle:"45",
    69. 	   //        },
    70. 	   //        yAxis: {
    71. 	   //          data: [
    72. 	   //            {
    73. 	   //              min: 0
    74. 	   //            }
    75. 	   //          ]
    76. 	   //        },
    77. 	   //        extra: {
    78. 	   //          mount: {
    79. 	   //            type: "bar",
    80. 	   //            widthRatio: 0.3,
    81. 	   //            borderWidth: 0,
    82. 	   //            barBorderRadius: [
    83. 	   //              50,
    84. 	   //              50,
    85. 	   //              50,
    86. 	   //              50
    87. 	   //            ],
    88. 	   //            linearType: "custom"
    89. 	   //          }
    90. 	   //        }
    91. 	        }
    92. 	      };
    93.     
    94.   },
    95. 	
    96.   mounted() {
    97. 	  var today = new Date();   // 日
    98. 	  var yesterday = new Date(today.getTime()); // 月
    99. 	  this.getServerData(yesterday.getFullYear() + "-" + (yesterday.getMonth() + 1) + "-" + yesterday.getDate(),'0') //年
    100.   },
    101.   methods: {
    102. 	  // 定义方法  和值 (item,type)
    103. 	async getServerData(item,type) {
    104. 			let that = this
    105. 			let params = {
    106. 				item: item,  //自己定义的值  和后端的值要对应  问后端
    107. 				type: type
    108. 			}
    109. 			// 请求数据  携带 params
    110. 			await that.$http.get('/totalView/totalView/PieChuKu',{params: params}).then(res => {
    111. 				   // 计算总值  reduce 累加  
    112. 				   // 在括号内的箭头函数(acc, item) => acc + item.value是reduce方法所接受的函数。这个箭头函数接收两个参数，acc表示累加器（accumulator），item表示当前正在处理的数组元素。箭头函数的功能是将累加器acc和当前元素的value属性相加，并返回相加的结果。
    113.  
    114.                    //最后的, 0表示reduce方法的初始值为0。这意味着在开始累加之前，累加器acc的初始值为0。
    115. 				   const totalValue = res.data.result.reduce((acc, item) => acc + item.value, 0);
    116. 				   // console.log(totalValue,'asasasasa')
    117. 				   
    118. 				   // 计算占比并更新数组
    119. 				   // console.log(res.data.result,'dadsada')
    120. 				   
    121. 				   
    122. 				   // 判断数据 要是是0  要么是有数值
    123. 				   // 如果totalValue值 等于0  就循环遍历渲染
    124. 				   if(totalValue==0){
    125. 					   res.data.result.forEach(item => {
    126. 					     item.labelText = '0%';  //强制数值变成0%  不写的话 就平均分成6份   因为有6份
    127. 					   });
    128. 				   }
    129. 				  else{
    130. 					  // 如果不是  就截取后两位  拼接上%
    131. 					  res.data.result.forEach(item => {
    132. 					    const percentage = (item.value / totalValue) * 100;  //获取的数值× 100
    133. 					  	item.labelText = percentage.toFixed(2)+"%";   //然后 拼接上%
    134. 					  });
    135. 				  }
    136. 				  
    137. 				  
    138. 				  // ress是一个包含series属性的对象。
    139. // series是一个包含一个对象的数组。
    140. // 这个对象包含一个名为data的属性，其值为res.data.result，假设res是一个包含data属性的对象，而data属性包含一个名为result的数组。
    141. 					   let ress = {
    142. 					       series: [
    143. 					         {
    144. 					   		data:res.data.result
    145. 					   	  }
    146. 					       ]
    147. 						   
    148. 					     };
    149. 						 this.chartData = JSON.parse(JSON.stringify(ress));
    150. 						 
    151. 				   
    152. 			}).catch(err => {
    153. 			    console.log(err,"err")
    154. 			})
    155. 	 },
    156. 	 onClickItem(e) {
    157. 	       if (this.current != e.currentIndex) {
    158. 	         this.current = e.currentIndex;
    159. 			 if(this.current=="0"){
    160. 				 // var today = new Date(); 创建了一个Date对象，表示当前的日期和时间。它会将当前的日期和时间信息存储在today变量中。
    161.  
    162. // console.log(today,'sasasasa') 打印出了today的值，以及额外的字符串sasasasa到控制台。这里主要是用来调试和查看today的值。
    163.  
    164. // var yesterday = new Date(today.getTime()); 创建了另一个Date对象，其时间戳（以毫秒为单位的时间值）与today相同。这意味着yesterday代表的是和today相同的日期和时间。
    165.  
    166. // this.getServerData(yesterday.getFullYear() + "-" + (yesterday.getMonth() + 1) + "-" + yesterday.getDate(),'2'); 这行代码调用了一个名为getServerData的方法，并传递了两个参数。第一个参数是一个表示日期的字符串，格式为"年-月-日"，通过yesterday.getFullYear() + "-" + (yesterday.getMonth() + 1) + "-" + yesterday.getDate()获取。第二个参数是字符串'2'。
    167. 				 var today = new Date();
    168. 				 var yesterday = new Date(today.getTime());
    169. 			     this.getServerData(yesterday.getFullYear() + "-" + (yesterday.getMonth() + 1) + "-" + yesterday.getDate(),'0')
    170. 			 }
    171. 	
    172. 			 if(this.current=="1"){
    173. 			 	var today = new Date();
    174. 			 	var yesterday = new Date(today.getTime());
    175. 			 	this.getServerData(yesterday.getFullYear() + "-" + (yesterday.getMonth() + 1) + "-" + yesterday.getDate(),'1');
    176. 			 }
    177. 			 
    178. 			 if(this.current=="2"){
    179. 			 	var today = new Date();  //显示
    180. 				console.log(today,'sasasasa')
    181. 			 	var yesterday = new Date(today.getTime());
    182. 			 	this.getServerData(yesterday.getFullYear() + "-" + (yesterday.getMonth() + 1) + "-" + yesterday.getDate(),'2');
    183. 			 }  
    184. 	       }
    185. 	     }
    186.   }
    187. };
    188. </script>
    189.  
    190. <style scoped>
    191.   /* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
    192.   .charts-box {
    193.     width: 100%;
    194.     height: 230px;
    195.   }
    196. </style>

    地址：演示 - uCharts跨平台图表库 

     五，获取后台数据 进行页面渲染

    案例一

    （1）代码展示
    1.  
    2.  
    3.   <template>
    4.   	<view>
    5.   		<cu-custom bgColor="bg-gradual-pink" :isBack="true">
    6.   			<block slot="content">荒料管理</block>
    7.   		</cu-custom>
    8.   		<view class="uni-container">
    9.   			<uni-table border stripe emptyText="暂无更多数据">
    10.   				<uni-tr style="background-color:#ebebeb;">
    11.   					<uni-th width="150" align="center">序号</uni-th>
    12.   					<uni-th width="150" align="center">入库编号</uni-th>
    13.   					<uni-th align="center">日期</uni-th>
    14.   					<uni-th align="center">荒料种类</uni-th>
    15.   					<uni-th align="center">长</uni-th>
    16.   					<uni-th align="center">宽</uni-th>
    17.   					<uni-th align="center">高</uni-th>
    18.   					<uni-th align="center">体积</uni-th>
    19.   					<uni-th align="center">颜色</uni-th>
    20.   					<uni-th align="center">价格</uni-th>
    21.   					<uni-th align="center">数量</uni-th>
    22.   					<uni-th align="center">运单单价</uni-th>
    23.   					<uni-th align="center">运费</uni-th>
    24.   					<uni-th width="204" align="center">运输人</uni-th>
    25.   					<uni-th width="204" align="center">总价</uni-th>
    26.   					<uni-th width="204" align="center">料场</uni-th>
    27.   					<uni-th align="center">操作员</uni-th>
    28.   					<uni-th align="center">图片</uni-th>
    29.   					<uni-th align="center">文件</uni-th>
    30.   					<uni-th align="center">备注</uni-th>
    31.   				</uni-tr>
    32.   				<uni-tr v-for="(item, index) in tableData" :key="index">
    33.   					<uni-td>{{index+1}}</uni-td>
    34.   					<uni-td>
    35.   						<view class="name">{{ item.sbwWarehousingNumber}}</view>
    36.   					</uni-td>
    37.   					<uni-td align="center">{{ item.sbwWarehousingDate}}</uni-td>
    38.   					<uni-td align="center">{{ item.sbwName_dictText }}</uni-td>
    39.   					<uni-td align="center">{{ item.sbwLong }}</uni-td>
    40.   					<uni-td align="center">{{ item.sbwWidth }}</uni-td>
    41.   					<uni-td align="center">{{ item.sbwTall }}</uni-td>
    42.   					<uni-td align="center">{{ item.sbwSbwVolume }}</uni-td>
    43.   					<uni-td align="center">{{ item.sbwColor_dictText }}</uni-td>
    44.   					<uni-td align="center">{{ item.sbwPrice }}</uni-td>
    45.   					<uni-td align="center">{{ item.sbwNum }}</uni-td>
    46.   					<uni-td align="center">{{ item.sbwFreightPrice }}</uni-td>
    47.   					<uni-td align="center">{{ item.sbwFreight }}</uni-td>
    48.   					<uni-td align="center">{{ item.sbwTransporter_dictText }}</uni-td>
    49.   					
    50.   					<uni-td align="center">{{ item.sbwTotalPrice }}</uni-td>
    51.   					<uni-td align="center">{{ item.sbwStockyard_dictText }}</uni-td>
    52.   					<uni-td align="center">{{ item.sbwTransporter_dictText }}</uni-td>
    53.   					<uni-td align="center">{{ item.sbwPic }}</uni-td>
    54.   					<uni-td align="center">{{ item.sbwFile }}</uni-td>
    55.   					<uni-td align="center">{{ item.sbwRemake }}</uni-td>
    56.   				</uni-tr>
    57.   			</uni-table>
    58. 			<p>总数据量{{this.total}}</p>
    59.   			<view class="uni-pagination-box"><uni-pagination show-icon :page-size="pageSize" :current="pageCurrent"
    60.   					:total="total" @change="change" /></view>
    61.   		</view>
    62.   	</view>
    63.   </template>
    64.   
    65.   <script>
    66.   export default {
    67.   	data() {
    68.   		return {
    69.   			searchVal: '',
    70.   			tableData: [],
    71.   			// 每页数据量
    72.   			pageSize: 10,
    73.   			// 当前页
    74.   			pageCurrent: 1,
    75.   			// 数据总量
    76.   			total: 0,
    77.   		
    78.   		}
    79.   	},
    80.   	onLoad() {
    81.   		this.selectedIndexs = []
    82.   		this.getData(1)  //初始化默认第一页
    83.   	},
    84.   	methods: {
    85.   		
    86.   		// 分页触发
    87.   		change(e) {
    88.   			
    89.   			// this.selectedIndexs.length = 0
    90.   		
    91.   			this.getData(e.current)  //点击出发 :current="pageCurrent"  当前页
    92.   		},
    93.   	
    94.   		// 获取数据
    95.   		getData(pageCurrent) {
    96. 			// 定义请求数据  然后通过路径带到后端返回需要的数据
    97.   			this.pageCurrent = pageCurrent
    98.   			let pageNo=this.pageCurrent  //当前页
    99.   			let pageSize=this.pageSize //每页数据量
    100.   			
    101. 			// 路径拼接数据 发送到后端 获取翻页的数据和效果
    102.   			let url = '/block/smsBlockWarehousing/list?pageNo='+pageNo+"&pageSize="+pageSize;
    103.   			this.$http.get(url).then(res => {
    104.   				this.tableData = res.data.result.records
    105.   				this.total=res.data.result.total;  //总数据量
    106.   		
    107.   				// console.log('结果', res.data.result.records)
    108.   			})
    109.   			
    110.   		},
    111.   	}
    112.   }
    113.   </script>
    114.  
    115.
    （2）页面展示

    案例二

    （1）代码展示
    1. <template>
    2. 	<view>
    3. 		<cu-custom bgColor="bg-gradual-pink" :isBack="true">
    4. 			<block slot="content">路边石管理</block>
    5. 		</cu-custom>
    6.  
    7. 		<uni-section title="">
    8. 			<view>
    9. 				<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" />
    10. 			</view>
    11. 			<view class="content">
    12. 				<view v-if="current === 0">
    13. 					<uni-table border stripe emptyText="暂无更多数据">
    14. 						<uni-tr style="background-color:#ebebeb;">
    15. 							<uni-th width="100" align="center">序号</uni-th>
    16. 							<uni-th width="204" align="center">入库编号</uni-th>
    17. 							<uni-th align="center" width="204">库存日期</uni-th>
    18. 							<uni-th width="150" align="center">长（m）</uni-th>
    19. 							<uni-th width="150" align="center">宽（m）</uni-th>
    20. 							<uni-th width="150" align="center">高（m）</uni-th>
    21. 							<uni-th width="150" align="center">数量</uni-th>
    22. 							<uni-th width="150" align="center">单价</uni-th>
    23. 							<uni-th width="150" align="center">体积（㎡）</uni-th>
    24. 							<uni-th width="204" align="center">加工费</uni-th>
    25. 							<uni-th width="150" align="center">颜色</uni-th>
    26. 							<uni-th width="150" align="center">机组</uni-th>
    27. 							<uni-th width="150" align="center">人员</uni-th>
    28. 							<uni-th width="204" align="center">操作员</uni-th>
    29. 							<uni-th width="204" align="center">图片</uni-th>
    30. 							<uni-th width="150" align="center">文件</uni-th>
    31. 							<uni-th width="204" align="center">备注</uni-th>
    32. 						</uni-tr>
    33. 						<uni-tr v-for="(item, index) in tableData" :key="index">
    34. 							<uni-td>{{index+1}}</uni-td>
    35. 							<uni-td align="center">{{ item.sskwRkid }}</uni-td>
    36. 							<uni-td align="center">{{ item.sskwDate }}</uni-td>
    37. 							<uni-td align="center">{{ item.sskwLong }}</uni-td>
    38. 							<uni-td align="center">{{ item.sskwWight }}</uni-td>
    39. 							<uni-td align="center">{{ item.sskwHight }}</uni-td>
    40. 							<uni-td align="center">{{ item.sskwNum }}</uni-td>
    41. 							<uni-td align="center">{{ item.sskwPrice }}</uni-td>
    42. 							<uni-td align="center">{{ item.sskwVolume }}</uni-td>
    43. 							<uni-td align="center">{{ item.sskwWages }}</uni-td>
    44. 							<uni-td align="center">{{item.sskwColor_dictText}}</uni-td>
    45. 							<uni-td align="center">{{item.sskwSet_dictText}}</uni-td>
    46. 							<uni-td align="center">{{ item.sskwPromed_dictText }}</uni-td>
    47. 							<uni-td align="center">{{ item.sskwOpuser }}</uni-td>
    48. 							<uni-td align="center"><img :src="item.sabwPic" /></uni-td>
    49.  
    50. 							<uni-td align="center">{{ item.sskwFile }}</uni-td>
    51. 							<uni-td align="center">{{ item.sskwRemake }}</uni-td>
    52. 						</uni-tr>
    53. 					</uni-table>
    54. 					<view class="uni-pagination-box"><uni-pagination show-icon :page-size="pageSize"
    55. 							:current="pageCurrent" :total="total" @change="change" /></view>
    56. 				</view>
    57. 				<view v-if="current === 1">
    58. 					<uni-table border stripe emptyText="暂无更多数据">
    59. 						<uni-tr style="background-color:#ebebeb;">
    60. 							<uni-th width="100" align="center">序号</uni-th>
    61. 							<uni-th width="204" align="center">入库编号</uni-th>
    62. 							<uni-th align="center" width="204">库存日期</uni-th>
    63. 							<uni-th width="150" align="center">长（m）</uni-th>
    64. 							<uni-th width="150" align="center">宽（m）</uni-th>
    65. 							<uni-th width="150" align="center">高（m）</uni-th>
    66. 							<uni-th width="150" align="center">数量</uni-th>
    67. 							<uni-th width="150" align="center">单价</uni-th>
    68. 							<uni-th width="150" align="center">体积（㎡）</uni-th>
    69. 							<uni-th width="204" align="center">加工费</uni-th>
    70. 							<uni-th width="150" align="center">颜色</uni-th>
    71. 							<uni-th width="150" align="center">机组</uni-th>
    72. 							<uni-th width="150" align="center">人员</uni-th>
    73. 							<uni-th width="204" align="center">操作员</uni-th>
    74. 							<uni-th width="150" align="center">加工方式</uni-th>
    75. 							<uni-th width="204" align="center">图片</uni-th>
    76. 							<uni-th width="150" align="center">文件</uni-th>
    77. 							<uni-th width="204" align="center">备注</uni-th>
    78. 						</uni-tr>
    79. 						<uni-tr v-for="(item, index) in tableData2" :key="index">
    80. 							<uni-td>{{index+1}}</uni-td>
    81. 							<uni-td>
    82. 								<view class="name">{{ item.skwRkid }}</view>
    83. 							</uni-td>
    84. 							<uni-td align="center">{{ item.skwDate }}</uni-td>
    85. 							<uni-td align="center">{{ item.skwLong }}</uni-td>
    86. 							<uni-td align="center">{{ item.skwWight}}</uni-td>
    87. 							<uni-td align="center">{{ item.skwHight }}</uni-td>
    88. 							<uni-td align="center">{{ item.skwNum }}</uni-td>
    89. 							<uni-td align="center">{{ item.skwPrice}}</uni-td>
    90. 							<uni-td align="center">{{ item.skwVolume }}</uni-td>
    91. 							<uni-td align="center">{{ item.skwWages }}</uni-td>
    92. 							<uni-td align="center">{{item.skwColor_dictText}}</uni-td>
    93. 							<uni-td align="center">{{item.skwSet_dictText}}</uni-td>
    94. 							<uni-td align="center">{{ item.skwPerson_dictText }}</uni-td>
    95. 							<uni-td align="center">{{ item.skwOpuser }}</uni-td>
    96. 							<uni-td align="center">{{ item.skwPromed_dictText}}</uni-td>
    97. 							<uni-td align="center"><img :src="item.skwPic" /></uni-td>
    98. 							<uni-td align="center">{{ item.skwFile }}</uni-td>
    99. 							<uni-td align="center">{{ item.skwRemake }}</uni-td>
    100. 						</uni-tr>
    101. 					</uni-table>
    102. 					<view class="uni-pagination-box"><uni-pagination show-icon :page-size="pageSize2"
    103. 							:current="pageCurrent2" :total="total2" @change="changeChengpin" /></view>
    104. 				</view>
    105. 			</view>
    106. 		</uni-section>
    107.  
    108.  
    109. 	</view>
    110. </template>
    111.  
    112. <script>
    113. 	export default {
    114. 		data() {
    115. 			return {
    116. 				tableData: [], //半成品获取数据
    117. 				tableData2: [], //成品获取数据
    118. 				// 每页数据量
    119. 				pageSize: 7,
    120. 				pageSize2: 7,
    121. 				// 当前页
    122. 				pageCurrent: 1,
    123. 				pageCurrent2: 1,
    124. 				// 数据总量
    125. 				total: 0,
    126. 				total2:0,
    127. 				loading: false,
    128. 				current: 0,
    129. 				current2: 0,
    130. 				items: ['半成品展示', '成品展示'],
    131. 			}
    132. 		},
    133. 		// 初始值
    134. 		onLoad() {
    135. 			// this.getRemote()
    136. 			this.selectedIndexs = []
    137. 			this.getData(1)
    138. 			this.getData2(1)
    139. 		},
    140. 		// 方法
    141. 		methods: {
    142. 			// 点击切换展示页面
    143. 			onClickItem(e) {
    144. 				if (this.current !== e.currentIndex) {
    145. 					this.current = e.currentIndex
    146. 				}
    147. 			},
    148. 			// 分页触发
    149. 			change(e) {
    150. 				// this.$refs.table.clearSelection()
    151. 				this.selectedIndexs.length = 0
    152. 				this.getData(e.current) //半成品
    153. 				
    154. 			},
    155. 			changeChengpin(e) {
    156. 				// this.$refs.table.clearSelection()
    157. 				this.selectedIndexs.length = 0
    158. 				this.getData2(e.current) //成品
    159. 			},
    160.  
    161.  
    162. 			// 半成品获取数据
    163. 			getData(pageCurrent) {
    164. 				this.loading = true
    165. 				this.pageCurrent = pageCurrent
    166. 				let pageNo = this.pageCurrent
    167. 				let pageSize = this.pageSize
    168.  
    169. 				let url = '/sakerb/smsSaKerbWarehousing/list?pageNo=' + pageNo + "&pageSize=" + pageSize;
    170. 				this.$http.get(url).then(res => {
    171. 					this.tableData = res.data.result.records
    172. 					this.total = res.data.result.total;
    173. 					// console.log('结果', res.data.result.records)
    174. 				});
    175. 			},
    176.  
    177. 			
    178.  
    179.  
    180. 			// 成品获取数据
    181. 			getData2(pageCurrent2) {
    182. 				this.loading = true
    183. 				this.pageCurrent2 = pageCurrent2
    184. 				let pageNo = this.pageCurrent2
    185. 				let pageSize = this.pageSize2
    186. 			
    187.  
    188. 				let url2 = '/kerb/smsKerbWarehousing/list?pageNo=' + pageNo + "&pageSize=" + pageSize;
    189. 				this.$http.get(url2).then(res => {
    190. 					this.tableData2 = res.data.result.records
    191. 					this.total2 = res.data.result.total;
    192. 					// console.log('结果', res.data.result.records)
    193. 				})
    194. 			}
    195. 			// 成品伪request请求 
    196. 			
    197. 		}
    198. 	}
    199. </script>
    （2）页面展示

  • 相关阅读:
    作为一个十年卷王，告诫你们年轻人应该如何才能认清自己的价值
    如何利用快解析实现个人私有云
    算法课作业1
    入局AI手机 苹果公布Apple Intelligence
    compile Python missing or unusable error while cross compiling GDB
    Vue——状态管理库Pinia
    bootstrap-fileinput拦截文件上传处理失败，根据后台返回数据处理
    redis未授权访问漏洞
    如何使用API接口获取商品数据，从申请API接口、使用API接口到实际应用，一一讲解
    全世界 LoRA 训练脚本，联合起来!
  • 原文地址：https://blog.csdn.net/weixin_68266812/article/details/134293000