AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

vue项目开发笔记记录（三）

2024-04-16 145
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： vue项目开发笔记记录（三）

vue项目开发笔记记录（二）：https://developer.aliyun.com/article/1483518


搜索条件

search() {
    if (this.queryForm.optTime.length > 0) {
        this.queryForm.optTimeBegn = this.queryForm.optTime[0]
        this.queryForm.optTimeEnd = this.queryForm.optTime[1]
    }
    this.$refs.queryForm['elForm'].validate(valid => {
        if (valid) {
            // 查询灵活就业征集信息发送审核列表
            Api.listTaxFlexiblePaySendAud(Object.assign(this.queryForm, this.paginationQuery)).then(res => {
                if (res.code === 0) {
                    this.tableData = res.data.data
                    this.setPaginationQuery(res.data)
                } else {
                    this.$msgError(res.message)
                }
            })
        }
    })
}

form-items的配置和码表查询

input
number
textarea
select
codeTable codeKey: 'XXX_XXX'，告诉组件加载什么码值
radio
checkbox
cascader 级联选择器
date 选择日期
dateMoon 选择月份
dateYear 选择年份
dateRange 开始日期-结束日期
dateTime 选择日期时间
dateTimeRange 开始时间-结束时间
monthRange 开始月份-结束月份
file
switch
custom
component
<!-- 需要prop, componentName, folder or allPath -->
<!-- 注意： 仅支持v-model传参 以及change事件 的组件-->

码表查询：
{ label: '状态', prop: 'status', type: 'codeTable', codeKey: 'CAPT_DFR_TAB_STAS', options: [] }

查询接口

// 查询接口
listMidCancLog() {
    const params = {
        accrym: this.queryForm.date || '',
        certNo: this.queryForm.peopleInfo.certNo || '',
        name: this.queryForm.peopleInfo.psnName || '',
        psnNo: this.queryForm.peopleInfo.psnNo || ''
    }
    listMidCancLog(params).then(res => {
        if (res.code === 0) {
            this.tableData = res.data.data
            this.$set(this.paginationQuery, 'total', res.data.recordCounts)
            this.$set(this.paginationQuery, 'startRow', res.data.startRow)
            this.$set(this.paginationQuery, 'endRow', res.data.endRow)
            this.loading = false
        }
    })
}

分页组件

import PageHandle from '@/mixins/pageHandle'
<Pagination :data="paginationQuery" @refresh="pageChange" />
this.setPaginationQuery(res.data)

this.$set(this.paginationQuery, 'total', res.data.recordCounts)
this.$set(this.paginationQuery, 'startRow', res.data.startRow)
this.$set(this.paginationQuery, 'endRow', res.data.endRow)

审核组件

<audit-dialog v-model="showAuditDialog" dialog-title="城乡大病资金拨付列表" @submit="submitAudit" />
auditAppropriationTable(params).then((res) => {
   v.fn()
   this.multipleSelection = []
   this.search()
}).catch((err) => {
   v.fn('error', err.message)
})

格式化年月

import moment from 'moment'
{ label: '对应款项属期', prop: 'accrym', type: 'dateMoon' ,valueFormat: 'yyyyMM'}
queryForm: {
   accrym: moment().format('yyyyMM'),
},

人员编码

00000000000000000000000144
00000000000000000000000152
00000000000000000000000155
00000000000000000000000171
00000000000000000000000176
00000000000000000000000178
00000000000000000000000191
00000000000000000000000193
00000000000000000000000206
00000000000000000000000208
00000000000000000000000211
00000000000000000000000214

00000000000000000000000193

列表返回处理

if (res.code === 0) {
  const temp = res.data || {}
  this.tableData = temp.data
  this.setPaginationQuery(res.data)
}

审核处理

submitAudit(v) {
  const listInfo = []
  this.multipleSelection.map(item => {
    const { acctIncDetlId, exchDataLotnum } = item
    listInfo.push({
      'acctIncDetlId': acctIncDetlId,
      'exchDataLotnum': exchDataLotnum
    })
  })
  const params = {
    'memo': v.data.content,
    'auditFlag': v.data.statue,
    'personAccountCrtfDTOList': listInfo,
    'exchDataLotnum': this.queryForm.exchDataLotnum.value || '100003'
  }
  updateBatchApplyAcctCrtfs(params).then((res) => {
    v.fn()
    this.multipleSelection = []
    this.search()
  }).catch((err) => {
    v.fn('error', err.message)
  })
}

acpType: "0"
admdvs: ""
bizStas: ""
endAccrym: ""
endTime: ""
isPage: ""
name: ""
pageNum: 1
pageSize: 15
pageType: "0"
psnNo: ""
startAccrym: ""
startTime: ""
// target: 'http://172.18.20.182:20001', // 和宇云地址
// target: 'http://172.18.20.178:8080', // 测试ip地址
// target: 'http://172.16.74.187:8888',
// target: 'http://172.16.75.103:8888',
// target: 'http://172.16.72.164:8888', // 麻超宇
// target: 'http://172.16.75.21:8888', // 罗忠伟
target: 'http://172.16.73.247:8888', // 曾楷轩
// target: 'http://172.16.39.58:8888', // 胡自强
// target: 'http://172.16.43.156:8888', // 李彩

更新父级页面表单

this.$emit('update-table')


//父级
 @update-table="updateTable"
 
 updateTable() {
      this.showDetailDialog = false
      this.search()
    },

分页处理

:data="paginationQuery" @refresh="pageChange"

paginationQuery: {
 pageNum: 1,
 pageSize: 15,
 total: 10,
 startRow: 1,
 endRow: 10
},   
pageChange(data) {
 this.paginationQuery = data.pagination
 this.search()
},

编辑详情

detail:{}
editClick(row) {
  this.dialogTitle = '数据库维护修改'
  this.showDetailDialog = true
  this.detail = row
}
detail: {
  type: Object,
  default: function() {
    return {}
  }
}

<edit-dialog v-model="showEditDialog" :dialog-title="dialogTitle" @update-table="updateTable" />
 watch: {
    detail: {
      handler(newVal) {
        console.log(newVal)
        if (newVal) {
          this.dataForm = newVal
        }
      },
      deep: true
  }
}

查询企业信息

{ label: '查询条件', prop: 'empInfo', type: 'component', componentName: 'EmpInfo', folder: 'Common',
          fn: (v) => {
            this.queryForm = {
              empInfo: v,
              empNo: v.empNo,
              empName: v.empName
            }
          }
        }

输入框设置默认值

infoForm1: {
    empNo: '',
    insutype: INSU_TYPE_BASIC,
    year: CURRENT_YEAR,
    rchkFlag: RCHK_FLAG_F,
    date: [CURRENT_DAY, CURRENT_DAY],
}

form-items细节处理

{ label: '年度', prop: 'year', type: 'dateYear', clearable: false },

{ label: '险种类型', prop: 'insutype', type: 'select', options: [{ dataVal: '310', dispVal: '职工基本医疗保险' }], clearable: false },

import { CURRENT_YEAR, RCHK_FLAG_F, INSU_TYPE_BASIC, PAGE_SIZE, CALC_RULES_PS } from '@/utils/constant'

paginationQuery1: { pageSize: PAGE_SIZE, pageNum: 1, total: 0, startRow: 0, endRow: 0 }

// 处理平均工资输入金额
changeAveSalary(row) {
    this.$set(row, 'empMonsAvesalNew', handleInputPrice(row.empMonsAvesalNew))
},

{ label: '台账类型', prop: 'ledType', type: 'codeTable', codeKey: 'LED_TYPE', events: { change: this.selLedType }, clearable: false },

过滤审核状态

{ label: '审核标志', prop: 'rchkFlagName', type: 'custom', slotName: 'handleStatus' },

filters: {
    filtersStatus: function(val) {
        switch (val) {
            case '0':
                return 'nostart'
            case '1':
                return 'pass'
            case '2':
                return 'nopass'
        }
    }
},

处理单位信息

{ label: '单位信息', prop: 'empNo', type: 'component', componentName: 'EmpInfo', folder: 'Common', fn: this.change },

resetForm处理

resetForm() {
    this.reset()
    this.queryForm.rchkFlag = RCHK_FLAG_F
    this.queryForm.date = [CURRENT_DAY, CURRENT_DAY]
},
resetForm() {
    this.reset()
    this.infoForm1.insutype = INSU_TYPE_BASIC
    this.infoForm1.year = CURRENT_YEAR
    this.infoForm1.rchkFlag = RCHK_FLAG_F
},

审核

<AuditDialog :is-dialog-visible="reviewDialogVisible" :dialog-title="reviewDialogTitle" @closeAll="closeAuditDialog" @submit="submitAudit" />

submitAudit(v) {
    const params = {
        empAvesalDclaIdList: this.empAvesalDclaIdList,
        rchkFlag: v.data.statue,
        rchkOpnn: v.data.content
    }
    saveRchkEmpAvesalDcla(params).then(() => {
        v.fn()
        this.search()
    }).catch(() => {
        v.fn('', 'fail')
    })
},

批量审核

// 点击批量审核按钮
batchReview() {
    if (this.multipleSelection.length > 0) {
        this.empAvesalDclaIdList = this.multipleSelection.map(item => item.empAvesalDclaId)
        this.reviewDialogVisible = true
        this.reviewDialogTitle = '单位平均工资维护审核'
    } else {
        this.$msgInfo('请选择所需操作项')
    }
},

获取列表数据

// 获取列表数据
listEmpAvgWagDetlApply() {
    const params = {
        rchkFlag: this.queryForm.rchkFlag,
        opterFitr: this.queryForm.opterFitr,
        empNo: this.queryForm.empNo ? this.queryForm.empNo.empNo : '',
        optBeginTime: Array.isArray(this.queryForm.date) ? this.queryForm.date[0] : '',
        optEndTime: Array.isArray(this.queryForm.date) ? this.queryForm.date[1] : '',
        pageSize: this.paginationQuery.pageSize,
        pageNum: this.paginationQuery.pageNum
    }
    this.loading = true
    listEmpAvgWagDetlApply(params).then(res => {
        this.tableData = res.data.data
        this.setPaginationQuery(res.data)
        this.loading = false
    }).catch(() => {
        this.loading = false
    })
}

表格里面自定义插槽

<template slot="handleStatus" slot-scope="scope">
    <StateTag :title="scope.row.rchkFlagName" :tag-type="scope.row.rchkFlag | filtersStatus" />
</template>

{ label: '审核状态', prop: 'rchkFlagName', type: 'custom', slotName: 'handleStatus' },

<template slot="rchkFlag" slot-scope="scope">
    <state-tag v-if="scope.row.rchkFlag === '0'" :title="scope.row.rchkFlagName" tag-type="nostart" />
    <state-tag v-if="scope.row.rchkFlag === '1'" :title="scope.row.rchkFlagName" tag-type="pass" />
    <state-tag v-if="scope.row.rchkFlag === '2'" :title="scope.row.rchkFlagName" tag-type="nopass" />
</template>

弹窗详情接收数据监听

props: {
    isDialogVisible: {
        type: Boolean,
      default: false
    }
},
watch: {
    isDialogVisible: function(val) {
        if (val) {
            this.getDetails()
        }
    }
},

区保医划处理

  { label: '医保区划', prop: 'admdvs', type: 'component', componentName: 'MedicalArea', folder: 'Common', fn: (v) => {
          this.queryForm.admdvs = getArrayLast(v)
        } },

引入pageSize

import { PAGE_SIZE } from '@/utils/constant'

下拉选择框条件判断处理

itemsDatas: [
    { label: '台账类型', prop: 'ledType', type: 'codeTable', codeKey: 'LED_TYPE', events: { change: this.selLedType }, clearable: false },
    {
        label: '单位信息', prop: 'empInfo', type: 'component', componentName: 'EmpInfo', folder: 'Common', hidden: false, fn: (v) => {
            console.log(v)
        }
    }
],

// 切换台账类型的回调
selLedType(v) {
    switch (v) {
        case '1':
            this.itemsDatas[1] = {
                label: '单位信息',
                prop: 'objCodg',
                type: 'component',
                componentName: 'EmpInfo',
                folder: 'Common',
                fn: (v) => {
                    this.queryForm.objCodg = v.empNo
                }
            }
            break
        case '2':
            this.itemsDatas[1] = {
                label: '人员信息',
                prop: 'objCodg',
                type: 'component',
                componentName: 'Personal',
                folder: 'Common',
                fn: (v) => {
                    this.queryForm.objCodg = v.psnNo
                }
            }
            break
        case '3':
            this.itemsDatas[1] = {
                label: '医疗机构',
                prop: 'objCodg',
                type: 'component',
                componentName: 'MedicalInstitutionsSelect/index',
                folder: 'Common',
                fn: (v) => {
                    this.queryForm.objCodg = v
                }
            }
            break
        case '4':
            this.itemsDatas[1] = {
                label: '药店信息',
                prop: 'objCodg',
                type: 'component',
                componentName: 'DrugstoreSelect/index',
                folder: 'Common',
                fn: (v) => {
                    this.queryForm.objCodg = v
                }
            }
            break
    }
}

vue项目开发笔记记录（三）：https://developer.aliyun.com/article/1483523

文章标签：
JavaScript
关键词：
笔记VUE.js
vue笔记VUE.js
项目开发VUE.js
vue项目开发VUE.js
微芒不朽
目录
相关文章
谢妹纸
|
23天前
|
人工智能 JavaScript 算法
Vue 中 key 属性的深入解析：改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析：改变 key 导致组件销毁与重建
谢妹纸
163 0
我们是幸福一家人
|
24天前
|
JavaScript UED
用组件懒加载优化Vue应用性能
用组件懒加载优化Vue应用性能
我们是幸福一家人
150 82
34789737
|
1月前
|
JavaScript 前端开发 开发者
Vue 自定义进度条组件封装及使用方法详解
这是一篇关于自定义进度条组件的使用指南和开发文档。文章详细介绍了如何在Vue项目中引入、注册并使用该组件，包括基础与高级示例。组件支持分段配置（如颜色、文本）、动画效果及超出进度提示等功能。同时提供了完整的代码实现，支持全局注册，并提出了优化建议，如主题支持、响应式设计等，帮助开发者更灵活地集成和定制进度条组件。资源链接已提供，适合前端开发者参考学习。
34789737
141 17
34789737
|
1月前
|
JavaScript 前端开发 UED
Vue 表情包输入组件实现代码及详细开发流程解析
这是一篇关于 Vue 表情包输入组件的使用方法与封装指南的文章。通过安装依赖、全局注册和局部使用，可以快速集成表情包功能到 Vue 项目中。文章还详细介绍了组件的封装实现、高级配置（如自定义表情列表、主题定制、动画效果和懒加载）以及完整集成示例。开发者可根据需求扩展功能，例如 GIF 搜索或自定义表情上传，提升用户体验。资源链接提供进一步学习材料。
34789737
77 1
蓝易云
|
1月前
|
JavaScript API 开发者
Vue框架中常见指令的应用概述。
通过以上的详细解析，你应该已经初窥Vue.js的指令的威力了。它们是Vue声明式编程模型的核心之一，无论是构建简单的静态网站还是复杂的单页面应用，你都会经常用到。记住，尽管Vue提供了大量预定义的指令，你还可以创建自定义指令以满足特定的需求。为你的Vue应用程序加上这些功能增强器，让编码变得更轻松、更愉快吧！
蓝易云
34 1
34789737
|
1月前
|
存储 JavaScript 前端开发
如何高效实现 vue 文件批量下载及相关操作技巧
在Vue项目中，实现文件批量下载是常见需求。例如文档管理系统或图片库应用中，用户可能需要一次性下载多个文件。本文介绍了三种技术方案：1) 使用`file-saver`和`jszip`插件在前端打包文件为ZIP并下载；2) 借助后端接口完成文件压缩与传输；3) 使用`StreamSaver`解决大文件下载问题。同时，通过在线教育平台的实例详细说明了前后端的具体实现步骤，帮助开发者根据项目需求选择合适方案。
34789737
94 0
34789737
|
1月前
|
JavaScript 前端开发 UED
Vue 项目中如何自定义实用的进度条组件
本文介绍了如何使用Vue.js创建一个灵活多样的自定义进度条组件。该组件可接受进度段数据数组作为输入，动态渲染进度段，支持动画效果和内容展示。当进度超出总长时，超出部分将以红色填充。文章详细描述了组件的设计目标、实现步骤（包括props定义、宽度计算、模板渲染、动画处理及超出部分的显示），并提供了使用示例。通过此组件，开发者可根据项目需求灵活展示进度情况，优化用户体验。资源地址：[https://pan.quark.cn/s/35324205c62b](https://pan.quark.cn/s/35324205c62b)。
34789737
44 0
凌浩雨
|
JavaScript 测试技术 容器
Vue2+VueRouter2+webpack 构建项目
1). 安装Node环境和npm包管理工具 检测版本 node -v npm -v 图1.png 2). 安装vue-cli(vue脚手架) npm install -g vue-cli --registry=https://registry.
凌浩雨
1153 0
小宋1021
|
3月前
|
JavaScript
vue实现任务周期cron表达式选择组件
vue实现任务周期cron表达式选择组件
小宋1021
354 4
34789737
|
2月前
|
JavaScript 数据可视化 前端开发
基于 Vue 与 D3 的可拖拽拓扑图技术方案及应用案例解析
本文介绍了基于Vue和D3实现可拖拽拓扑图的技术方案与应用实例。通过Vue构建用户界面和交互逻辑，结合D3强大的数据可视化能力，实现了力导向布局、节点拖拽、交互事件等功能。文章详细讲解了数据模型设计、拖拽功能实现、组件封装及高级扩展（如节点类型定制、连接样式优化等），并提供了性能优化方案以应对大数据量场景。最终，展示了基础网络拓扑、实时更新拓扑等应用实例，为开发者提供了一套完整的实现思路和实践经验。
34789737
229 77

热门文章

最新文章

  • 1
    Vue 中 key 属性的深入解析：改变 key 导致组件销毁与重建
  • 2
    用组件懒加载优化Vue应用性能
  • 3
    【vue】 Tinymce 数据 回显问题 | 第一次正常回显后面，显示空白bug不能编辑
  • 4
    vue项目 git上传忽略node_modules和dist
  • 5
    vue基础
  • 6
    搭建 Vite + Vue 3 + TypeScript 的基础项目模板
  • 7
    vue和react diff算法的区别
  • 8
    Vue找到package.json中没有用到依赖并删除
  • 9
    Vue3 如何实现全局异常处理？
  • 10
    在 Vue3 + ElementPlus 项目中使用 el-autocomplete 控件
  • 1
    Vue 中 key 属性的深入解析：改变 key 导致组件销毁与重建
    163
  • 2
    用组件懒加载优化Vue应用性能
    150
  • 3
    Vue 表情包输入组件实现代码及详细开发流程解析
    77
  • 4
    Vue 自定义进度条组件封装及使用方法详解
    141
  • 5
    如何高效实现 vue 文件批量下载及相关操作技巧
    94
  • 6
    Vue 项目中如何自定义实用的进度条组件
    44
  • 7
    Vue框架中常见指令的应用概述。
    34
  • 8
    Vue 文件批量下载组件封装完整使用方法及优化方案解析
    164
  • 9
    Vue 表情包输入组件的实现代码：支持自定义表情库、快捷键发送和输入框联动的聊天表情解决方案
    114
  • 10
    Vue 手风琴实现的三种常用方式及长尾关键词解析
    102

    • 相关课程

    更多
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • 利用编译将 Vue 组件转成 React 组件
  • Vue.js在前端服务化上的实践与探索
    • 下一篇
    【案例实战】SpringBoot整合阿里云文件上传OSS