linux怎么查看本机内存大小
247
2022-08-28
疫情期间，写的两个场景
疫情期间，写的两个场景
落笔前，先期望疫情快快过去，都要生锈了都~
场景一
模拟接口请求，对请求头的参数进行处理，如下图：
嗯，我是用的vue版本的ant design，然后实现之后是这样的:
相关代码：
嗯~这种实现的方式还是和舒服的，不用自己布局，不用自己再次思考逻辑；如果你想自己捣鼓一个，那你是真的闲，还不如花点时间捣鼓其他非编程的东西。 注意：能用react版本的ant design尽量用react版本的~ 场景二 根据后台接口返回的字段来渲染。类型值对应不同的组件，如下： 类型值1：单行文本组件类型值2：多行文本组件类型值3：单选组件类型值4：多选组件类型值5：文件上传组件 每种类型出现的次数是大于等于0，而且后端可配置必填或者非必填。嗯，下面实现它~ 因为是移动端的业务，肯定是选UI框架帮我干活啊，这里我选了有赞的vant。用的还是vue去搭建工程，别问为啥不用react，公司给我时间，我就用react~这是业务线啊，想得倒是美，而且还是疫情期间，不压你时间就很好了。所以做完后，乖乖申请回去中台~ 下面实现的思路，效果和关键代码~ 动态组件，那么每个字段都要有一个字段标识该组件，这里后端没有配，那么我自己创建一个uuid（能叫得动后端，就叫后端配吧...） 后端返回类型（优先）/前端写死类型（备选），对后端返回的动态数据进行遍历，以展示不同类型的组件 我这里前端写死了，蓝瘦香菇，三个字"人真懒"。 types: [{ code: 1, text: '单行文本' }, { code: 2, text: '多行文本' }, { code: 3, text: '单选' }, { code: 4, text: '多选' }, { code: 5, text: '文件上传' 编辑的时候，信息回填前要考虑动态数据时候已经发生改动（时刻以后端返回的动态数据为准来回填） // 将返回的字段和编辑的字段进行配对，回填let _alterFields = []for (let i = 0; i < vm.alterFields.length; i++) { let _item = vm.alterFields[i] _alterFields.push(_item) for (let j = 0; j < vm.editFileds.length; j++) { if (_item.id === vm.editFileds[i].id) { // 替换值 _alterFields.splice(i, 1, Object.assign(_item, { fieldValue: vm.editFileds[i].fieldValue, [_item.uuid]: vm.editFileds[i].fieldValue, })) } }}vm.alterFields 前端限制文件上传的大小，有必要自己做什么压缩文件之类的骚操作，这里是内嵌到app里面的，app里面已经对图片处理。上传文件不要直接调公司的服务，直接调上传到云的操作就行，不然公司服务会崩溃的~ // 文件资源的限制prompt_for_oversize () { this.$dialog({ title: '提 示', text: '单个文件大小不应该大于10M', confirmText: '了解', showCancelBtn: false, confirm 文件上传使用async await来操作，更加直观明了 realUploadFile (item) { let vm = this let temp_valueFiled = [] let be_upload = false return new Promise(resolve => { // 上传到云 let formData = new FormData(); for (let i = 0; i < item[item.uuid].length; i++) { let row = item[item.uuid][i] if (row.fileName) { // 编辑的时候存在文件就不用再上传到服务器了 temp_valueFiled.push(row) if (temp_valueFiled.length === item[item.uuid].length) { resolve(temp_valueFiled) } } else { be_upload = true console.log('row.file', row.file.size) formData.append("files", row.file); } } if (!be_upload) { // 不需要上传的时候直接返回 return } vm.api.apply.uploadMultiFiles(formData).then(res => { console.log(res) if (res.code === '00000') { temp_valueFiled.push(...res.data) resolve(temp_valueFiled) } else { vm.$toast({ msg: res.message || '上传失败，请重试！' }) vm.forbidden = false 对单选组件进行处理，非必填的状态下，要允许取消勾选 // 处理单选框（如果是非必填字段，允许用户取消）handleRadio (type, type_index, item_title) { // type是整个项目，type_index是类型遍历的索引, item_title是选中项目的名称 if (type.isRequired) { return } // 必选的单选框，啥都不做 let vm = this let union = `${type['uuid']}_${item_title}` // 唯一的标识 if (vm.radioSet.has(union)) { // 存在集合中 vm.radioSet.delete(union) vm.alterFields.splice(type_index, 1, Object.assign(type, { [type.uuid]: '' })) } else { if (vm.radioSet.size > 0) { vm.radioSet.forEach(function (val) { if (val.indexOf(`${type['uuid']}_`) >= 0) { vm.radioSet.delete(val) // 移除当前组件的唯一标识的所有值 } }) } vm.radioSet.add(union) // 每个单选的组件只维护一个数据 ... 效果如下： 公司业务，我怂，不敢放全部代码
版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。
相关文章
发表评论
暂时没有评论，来抢沙发吧~