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