vue项目开发笔记记录(四)

简介: vue项目开发笔记记录

vue项目开发笔记记录(三):https://developer.aliyun.com/article/1483520


码值过滤

filterFn:(v)=>{ return v.filter(item.dispVal.indexOf('住院')>-1)}

export const items = [
  {
    label: '人员类别',
    prop: 'psnide',
    span: 8,
    type: 'codeTable',
    codeKey: 'INSU_IDET_TYPE',
    filterFn: (v) => { return v.filter(item => item.dispVal.indexOf('在职人员') > -1) },
    filterable: true,
    options: []
  }
]

重置表单

:model="queryForm"
ref="queryForm"

resetForm() {
    this.reset()
    this.$refs.queryForm.elForm.resetFields()
},

一次性引入

import * as Api from '@/api/PaymentInAdvance/PaymentInAdvanceManage/Request'

经办日期处理

import { ACP_DATATYPE, CURRENT_DAY, CURRENT_MONTH_FIRST } from '@/utils/constant'
dateRange: [
  moment().startOf('month').format('YYYY-MM-DD'),
  moment().endOf('month').format('YYYY-MM-DD')
]      
sendDate: [CURRENT_MONTH_FIRST, CURRENT_DAY],
     
optTimeBegn: Array.isArray(this.queryForm.sendDate) ? this.queryForm.sendDate[0] : '',
optTimeEnd: Array.isArray(this.queryForm.sendDate) ? this.queryForm.sendDate[1] : '',

码值过滤

{ label: '业务办理情形', prop: 'bizStas', type: 'codeTable', codeKey: 'PH_BIZ_STAS', options: [], filterFn: (v) => {
    return v.filter(item => ['-1', '0', '2'].includes(item.dataVal) === true)
}

监听码值变化,切换

 queryForm: {
        personInfo: {},
        name: '',
        certno: '',
        empNo: '',
        empName: '',
        acpType: ACP_DATATYPE,
        dateRange: [
          moment().startOf('month').format('YYYY-MM'),
          moment().endOf('month').format('YYYY-MM')
        ],
        sendDate: [CURRENT_MONTH_FIRST, CURRENT_DAY]
},
acpType: '0',

  watch: {
    queryForm: {
      handler: function(newVal) {
        if (newVal.personInfo) {
          this.queryForm.psnNo = newVal.personInfo.psnNo
          this.queryForm.certno = newVal.personInfo.certno
          this.queryForm.name = newVal.personInfo.psnName
          this.queryForm.empNo = newVal.personInfo.empNo
        }
        this.acpType = newVal.acpType
        if (this.acpType) {
          this.changeAcpType(this.acpType)
        }
      },
      deep: true
    }
  },


changeAcpType(v) {
      if (v === '0') {
        this.itemsDatas.forEach(item => {
          if (item.prop === 'empNo' || item.prop === 'empName') {
            this.$set(item, 'hidden', true)
          }
          if (item.prop === 'certno' || item.prop === 'name') {
            this.$set(item, 'hidden', false)
          }
        })
      } else {
        this.itemsDatas.forEach(item => {
          if (item.prop === 'empNo' || item.prop === 'empName') {
            this.$set(item, 'hidden', false)
          }
          if (item.prop === 'certno' || item.prop === 'name') {
            this.$set(item, 'hidden', true)
          }
        })
      }
    },

校验

rules: {
  insutype: { required: true, message: '请选择险种', trigger: 'change' }
},
ref="queryForm" :model="queryForm" :rules="rules"

this.$refs.queryForm.elForm.validate((valid) => {
   if (valid) {
      this.getList()
    } else {
      return false
    }
})

手机号校验

conerMob: [{ required: true, message: '请输入正确的手机号', validator: validator, regexp: 'phone', trigger: 'blur' }]
import validator from '@/utils/el-validator'

表格常用操作图标

注意: type和icon二选一,不能混合使用

type:
蓝色按钮类型: search 查询, submit 提交,save 保存,import 导入, export 导出,print 打印 , sure 确定,audit 审核(初审), batchAudit 批量审核以及其他 other
绿色按钮类型: add 新增(新增,添加,新建)
黄色按钮类型: edit 修改,review 复审
红色按钮类型: delete 删除, batchDelete 批量删除,cancel 取消,disable 禁用
白色按钮类型: reset 重置, close 关闭, back 返回,以及默认白色

icon: 这种基本用于表格操作里面的图标按钮
edit 修改,
maintenance 维护, 
detail 详情,
audit 审核, 
review 复审, 
cancelAudit 取消审核, 
delete 删除,
print 打印,
export 导出
cancel 取消,
stop 停止,
upload 上传, 
calculate 计算, 
check 核查, 
replace 替换 
save 保存, 
submit 提交, 
exit 退出
accept 受理, 
historicalRecord 历史记录, 
adjust 调整, 
send 发起/发送, 
invitation 邀请函, 
supplement 补充材料
personnel 人员

具体使用:
operationTypeArr: [
  { type: 'search', title: '查询', eleType: 'primary' },
  { type: 'submit', title: '提交', eleType: 'primary' },
  { type: 'save', title: '保存', eleType: 'primary' },
  { type: 'import', title: '导入', eleType: 'primary' },
  { type: 'export', title: '导出', eleType: 'primary' },
  { type: 'sure', title: '确定', eleType: 'primary' },
  { type: 'audit', title: '审核', eleType: 'primary' },
  { type: 'batchAudit', title: '批量审核', eleType: 'primary' },
  { type: 'other', title: '其他', eleType: 'primary' },
  { type: 'add', title: '新增', eleType: 'success' },
  { type: 'edit', title: '修改', eleType: 'warning' },
  { type: 'review', title: '复审', eleType: 'warning' },
  { type: 'delete', title: '删除', eleType: 'danger' },
  { type: 'batchDelete', title: '批量删除', eleType: 'danger' },
  { type: 'cancel', title: '取消', eleType: 'danger' },
  { type: 'disable', title: '禁用', eleType: 'danger' },
  { type: 'print', title: '打印', eleType: 'primary' },
  { type: 'reset', title: '重置', eleType: '' },
  { type: 'close', title: '关闭', eleType: '' },
  { type: 'back', title: '返回', eleType: '' }
],
iconArr: [
  { icon: 'edit', title: '修改', iconSvg: 'el-icon-edit', isFontSize: true, eleType: 'warning' },
  { icon: 'delete', title: '删除', iconSvg: 'el-icon-delete', isFontSize: true, eleType: 'danger' },
  { icon: 'detail', title: '详情', iconSvg: 'el-icon-view', isFontSize: true, eleType: 'primary' },
  { icon: 'upload', title: '上传', iconSvg: 'el-icon-upload2', isFontSize: true, eleType: 'success' },
  { icon: 'preview', title: '预览', iconSvg: 'el-icon-view', isFontSize: true, eleType: 'primary' },
  { icon: 'lookover', title: '查看', iconSvg: 'el-icon-view', isFontSize: true, eleType: 'primary' },
  { icon: 'setting', title: '设置', iconSvg: 'el-icon-setting', isFontSize: true, eleType: 'warning' },
  { icon: 'config', title: '配置', iconSvg: 'el-icon-setting', isFontSize: true, eleType: 'warning' },
  { icon: 'sure', title: '确认', iconSvg: 'el-icon-check', isFontSize: true, eleType: 'success' },

  { icon: 'save', title: '保存', iconSvg: 'save', eleType: 'primary' },
  { icon: 'submit', title: '提交', iconSvg: 'submit', eleType: 'primary' },
  { icon: 'maintenance', title: '维护', iconSvg: 'maintenance', eleType: 'warning' },
  { icon: 'audit', title: '审核', iconSvg: 'aduit', eleType: 'primary' },
  { icon: 'review', title: '复审', iconSvg: 'aduit', eleType: 'warning' },
  { icon: 'cancelAudit', title: '取消审核', iconSvg: 'cancelAduit', eleType: 'danger' },
  { icon: 'print', title: '打印', iconSvg: 'el-icon-printer', isFontSize: true, eleType: 'primary' },
  { icon: 'export', title: '导出', iconSvg: 'el-icon-download', isFontSize: true, eleType: 'primary' },
  { icon: 'cancel', title: '取消', iconSvg: 'cancel', eleType: 'danger' },
  { icon: 'stop', title: '停止', iconSvg: 'stop', eleType: 'danger' },
  { icon: 'calculate', title: '计算', iconSvg: 'count', eleType: 'primary' },
  { icon: 'recall', title: '撤回', iconSvg: 'recall', eleType: 'danger' },
  { icon: 'exit', title: '退出', iconSvg: 'exit', eleType: 'danger' },
  { icon: 'check', title: '核查', iconSvg: 'check', eleType: 'warning' },
  { icon: 'replace', title: '替换', iconSvg: 'replace', eleType: 'warning' },
  { icon: 'analysis', title: '分析', iconSvg: 'analysis', eleType: 'warning' },
  { icon: 'apply', title: '申请', iconSvg: 'apply', eleType: 'primary' },
  { icon: 'duizhang', title: '对账', iconSvg: 'duizhang', eleType: 'primary' },
  { icon: 'accept', title: '受理', iconSvg: 'accept', eleType: 'primary' },
  { icon: 'historicalRecord', title: '历史记录', iconSvg: 'historicalRecord', eleType: 'primary' },
  { icon: 'adjust', title: '调整', iconSvg: 'adjust', eleType: 'warning' },
  { icon: 'send', title: '发起/发送', iconSvg: 'send', eleType: 'primary' },
  { icon: 'invitation', title: '邀请函', iconSvg: 'invitation', eleType: 'primary' },
  { icon: 'supplement', title: '补充材料', iconSvg: 'supplement', eleType: 'primary' },
  { icon: 'personnel', title: '人员', iconSvg: 'personnel', eleType: 'primary' }
]

监听码值变化,切换

 queryForm: {
        personInfo: {},
        name: '',
        certno: '',
        empNo: '',
        empName: '',
        acpType: ACP_DATATYPE,
        dateRange: [
          moment().startOf('month').format('YYYY-MM'),
          moment().endOf('month').format('YYYY-MM')
        ],
        sendDate: [CURRENT_MONTH_FIRST, CURRENT_DAY]
},
acpType: '0',

  watch: {
    queryForm: {
      handler: function(newVal) {
        if (newVal.personInfo) {
          this.queryForm.psnNo = newVal.personInfo.psnNo
          this.queryForm.certno = newVal.personInfo.certno
          this.queryForm.name = newVal.personInfo.psnName
          this.queryForm.empNo = newVal.personInfo.empNo
        }
        this.acpType = newVal.acpType
        if (this.acpType) {
          this.changeAcpType(this.acpType)
        }
      },
      deep: true
    }
  },


changeAcpType(v) {
      if (v === '0') {
        this.itemsDatas.forEach(item => {
          if (item.prop === 'empNo' || item.prop === 'empName') {
            this.$set(item, 'hidden', true)
          }
          if (item.prop === 'certno' || item.prop === 'name') {
            this.$set(item, 'hidden', false)
          }
        })
      } else {
        this.itemsDatas.forEach(item => {
          if (item.prop === 'empNo' || item.prop === 'empName') {
            this.$set(item, 'hidden', false)
          }
          if (item.prop === 'certno' || item.prop === 'name') {
            this.$set(item, 'hidden', true)
          }
        })
      }
    },

日期选择器时,默认显示当天日期

<el-form-item label="交易数据">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="searchFormField.date"
              style="width: 100%;"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
</el-form-item>
        
     
 methods: {
    getNowTime() {
       var now = new Date();
       var year = now.getFullYear(); //得到年份
       var month = now.getMonth(); //得到月份
       var date = now.getDate(); //得到日期
       month = month + 1;
       month = month.toString().padStart(2, "0");
       date = date.toString().padStart(2, "0");
       var defaultDate = `${year}-${month}-${date}`;
       this.$set(this.searchFormField, "date", defaultDate);
   },
 }

状态为tag标签

<template slot="valiFlagName" slot-scope="scope">
        <State-tag :tag-type="scope.row.valiFlagName === '有效'? 'pass' : 'nopass'" :title="scope.row.valiFlagName" />
</template>

{
  label: '有效标志',
  prop: 'valiFlagName',
  align: 'center',
  type: 'custom',
  slotName: 'valiFlagName',
},

文件预览

import PreviewImage from '@/components/Preview'
<PreviewImage
      ref="ImgPreview"
      :viewer-visible.sync="viewerVisible"
      :img-data-list.sync="imgDataList"
      :img-index.sync="imgIndex"
/>

viewerVisible: false,
imgDataList: [],
imgIndex: 0,

 // 预览
showUploadPreview(data) {
      // this.isInnerVisible = true
      // this.currentPreview = data
 this.imgDataList = [{ title: data.filename, url: data.filePath, id: data.fileId }]
 this.viewerVisible = true
}

解决弹窗高度滚动条问题

/deep/.pf-table {
  min-height: 430px;
  /deep/.el-table {
    min-height: 430px !important;
  }
}

>>>.el-table--small th, >>>.el-table--small td {
    padding: 7px 0;
}
>>>.el-table thead th .cell {
    height: 32px;
    line-height: 32px;
}

弹窗关闭与打开

<EditDialog
:dialog-title="dialogTitle"
:administrative-domain-form="administrativeDomainForm"
:is-dialog-visible="isDialogVisible"
@saveAddministrativeDomain="saveAddministrativeDomain"
@update:isShow="isShow"
@search="search"
/>

isDialogVisible: false,

this.isDialogVisible = true


isShow(v) {
  this.isDialogVisible = v
},
//子组件
 <form-dialog size="middle" :title="dialogTitle" :is-show="isDialogVisible" @update:isShow="isShow" @resetForm="resetForm">

props: {
    isDialogVisible: {
      type: Boolean,
      default: false
    },
}
isShow(v) {
   this.$emit('update:isShow', v)
},
closeDialog() {
   this.$emit('update:isShow', false)
},

<el-button @click="closeDialog()">取消</el-button>

正则图片校验

isImage(str) {
      var reg = /\.(png|jpg|gif|jpeg|webp)$/
      return reg.test(str)
    },

文件下载

/* 文件下载处理 */
export function funDownload(href, filename) {
  var a = document.createElement('a')
  var e = document.createEvent('MouseEvents')
  e.initEvent('click', false, false)
  a.href = href
  a.download = filename
  a.dispatchEvent(e)
}

限制input框只能输入整数

onkeyup="this.value = this.value.replace(/[^\d.]/g,'');"

校验是否为正整数

1.首先在vue文件的methods()中添加校验方法,这里校验方法命名为isNumber用自带的.test方法进行正则校验

 methods: {
   isNumber(rule, value, callback) {
      if (value === '') {
        return callback();
      }  //这是用来判断如果不是必须输入的,则直接跳出
      const r = /^\+?[1-9][0-9]*$/; // 正整数
      // 如果判断不符合正则,则不是正整数不能提交
      if (!r.test(value)) {
        return callback(new Error('数量必须为正整数'));
      } else {
        return callback();
      }
    },
}

2.在data()中定义的rules里使用校验规则
rules: {
  size: [{ validator: this.isNumber, trigger: 'blur' }],
},

vue打包war

cnpm install --save folder-zip-sync

"build:war": "npm run build:prod && node ./build/war.js",

添加war.js

Cascader 级联选择器清除选中

<el-cascader
    v-model="value"
    :options="options"
    ref="cascader">
</el-cascader>

// 清空级联选择器选中状态
this.$refs.cascader.$refs.panel.clearCheckedNodes()
// 清除高亮
this.$refs.cascader.$refs.panel.activePath = []

重置表格选中状态


clearSelection() {
  this.$refs['pf-table'].clearSelection() // 清除多选
}
ref="multipleTable"

this.$refs.multipleTable.clearSelection()

病案首页处理

import Modal from '@/views/expert-review-sys/components/Medical/modal'

//modal.vue
<el-row :gutter="10">
      <el-col :span="isFold && !isFold2 ?24:10" style="height: 100%">
      
<Group-plan v-bind="this.$attrs" @handle-fold="handleFold" />
      
<transition name="fade" model="out-in">
    <el-col v-if="!isFold" :span="!isFold && isFold2 ?24:14">
      <Details v-bind="this.$attrs" @handle-fold2="handleFold2" />
    </el-col>
</transition>

isFold: false,
isFold2: false

handleFold(v) {
  this.isFold = v
},
handleFold2(v) {
  this.isFold2 = v
}

//detailsRight.vue
<section class="layer pf-item" :class="isFold2?'audiut-box':''">

<div class="audiut-boxs" style="height: 100%;width: 100%;padding: 0 15px;">
      <div class="box-header handle">
        <span class="box-title box-title1">信息评审项</span>
        <div class="box-tools">
          <i class="fold" :class="isFold2?'el-icon-s-unfold':'el-icon-s-fold'" :title="isFold2?'折叠':'展开'" @click="foldClick" />
        </div>
      </div>
isFold2: false,

foldClick() {
  this.isFold2 = !this.isFold2
  this.$emit('handle-fold2', this.isFold2)
}

//baxq.vue
<i :class="isFold?'el-icon-s-fold folded':'el-icon-s-unfold fold'" :title="isFold?'折叠':'展开'" @click="foldClick" />
    <section class="layer" :class="isFold?'medical-homePage':''">

setDate(value) {
  if (value) {
    return moment(value).format('YYYY/MM/DD')
  } else {
    return ''
  }
}
return '\u3000\u3000\u3000\u3000\u3000\u3000'

import moment from 'moment'
isFold: false
 
foldClick() {
  this.isFold = !this.isFold
  this.$emit('handle-fold', this.isFold)
}

当前年份

(new Date()).getFullYear() + ''

区保医划

 <template slot="search-header">
      <form-items ref="form" :model="queryForm" :items-datas="itemsDatas" :form-datas="queryForm" :rules="rules">
        <my-button type="reset" title="重置" @click="resetForm" />
        <my-button type="search" title="查询" @click="search" />
      </form-items>
    </template>
    
itemsDatas: [
        {
          label: '医保区划',
          prop: 'admdvs',
          type: 'component',
          componentName: 'MedicalArea',
          folder: 'Common'
        },
        { label: '抽样日期', prop: 'datetimerange', type: 'dateRange' }
],

form-items中使用模板

<template slot="applFlagName" slot-scope="scope">
          <State-tag :tag-type="scope.row.applFlagName === '申诉'? 'pass' : 'nopass'" :title="scope.row.applFlagName" />
        </template>

分页处理

  this.table.total = res.data.pageInfo.recordCounts
            this.table.pageNum = res.data.pageInfo.pageNum
            this.table.pageSize = res.data.pageInfo.pageSize
            
            
            this.table1.total = res.data.recordCounts
            this.table1.startRow = res.data.startRow
            this.table1.endRow = res.data.endRow

原生分页处理

<el-pagination :current-page="table.pageNum" :page-sizes="[15, 30, 50, 100]" :page-size="table.pageSize" :total="table.total" layout="slot, sizes, prev, pager, next, jumper" @current-change="handleCurrentChange" @size-change="handleSizeChange">
            <template slot>
              <span class="el-pagination__total">{{ `总共${table.total}条 显示${table.startRow}-${table.endRow}条` }}</span>
            </template>
          </el-pagination>

table: {
        tableData: [],
        loading: false,
        pageNum: 1,
        pageSize: 15,
        total: 10,
        height: 555,
        startRow: 0,
        endRow: 0
      },
      
 handleCurrentChange(val) {
      this.table.pageNum = val
      this.getCmiKpiAnalysisList()
    },
    handleSizeChange(val) {
      this.table1.pageSize = val
      this.getCmiKpiAnalysisList()
    },


this.table.tableData = res.data.rows
            this.table.pageNum = res.data.pageInfo.pageNum
            this.table.pageSize = res.data.pageInfo.pageSize
            this.table.total = res.data.pageInfo.recordCounts
            this.table.startRow = res.data.pageInfo.startRow
            this.table.endRow = res.data.pageInfo.endRow

button颜色

>>>.el-table .el-button {
    color: #1B65B9;
    width: auto;
}

.el-table >>>.el-button {
    color: #1B65B9;
    width: auto;
}

医院名称组件

itemsDatas: [
        {
          label: '医保区划',
          prop: 'admdvs',
          type: 'component',
          componentName: 'MedicalArea',
          folder: 'Common'
        },
        {
          label: '医院名称',
          prop: 'medinsCodg',
          type: 'component',
          componentName: 'MedicalInstitutionsSelect/index',
          folder: 'Common',
          params: { bindType: 'name', fixFlag: '0', queCont: '1' }
        }
      ],

亿万过滤器

filters: {
     numberFormat: function (value) {
              let unit = '';
                var k = 10000,
                   sizes = ['', '万', '亿', '万亿'],
                   i;
                   if(value < k){
                       value =value;
                   }else{
                       i = Math.floor(Math.log(value) / Math.log(k));
                       value = ((value / Math.pow(k, i))).toFixed(2);
                       unit = sizes[i];
                   }
              return value+unit;
        }
},

操作按钮

<my-button icon="detail" title="详情" @click="showDetail(scope.row)" />
        <my-button icon="delete" title="删除" @click="delRule(scope.row)" />

统计年度宽度

>>>.el-date-editor.el-input, >>>.el-date-editor.el-input__inner {
    width: 100%;
}

分页

this.paginationQuery.pageSize

自定义图标

<my-button title="退回" @click="giveUp(scope.row)">
    <svg-icon icon-class="back" class="backss" />
</my-button>

svg图标放在icons->svg文件夹下面


reset

reset() {
      this.$refs.form.elForm.resetFields()
},
 <el-tab-pane label="病案首页" name="first">
        <Group-plan :rew-task-detl="medcasInfo" />
      </el-tab-pane>
      <el-tab-pane label="出院小结" name="second">
        <Hospital :dscg-end="medcasInfo" />
      </el-tab-pane>
      <el-tab-pane label="检查报告" name="third" />
      <el-tab-pane label="细菌结果" name="fourth">
        <Bacteria :bacteria-rslt="medcasInfo" />
      </el-tab-pane>
      <el-tab-pane label="申诉信息" name="fifth">
        <GriInfo :appl-info="medcasInfo" />
      </el-tab-pane>
      <el-tab-pane label="长期医嘱单" name="sixth">
        <Orders :drord-records="medcasInfo" />
      </el-tab-pane>
      <el-tab-pane label="检验结果" name="seventh">
        <DschaSumma :test-rslt="medcasInfo" />
      </el-tab-pane>
无右边的

有右边的


<el-tab-pane label="病案首页" name="first">
          <Group-plan :rew-task-detl="rewTaskDetl" />
        </el-tab-pane>
        <el-tab-pane label="出院小结" name="second">
          <Hospital :dscg-end="rewTaskDetl" />
        </el-tab-pane>
        <el-tab-pane label="检查报告" name="third" />
        <el-tab-pane label="细菌结果" name="fourth">
          <Bacteria :bacteria-rslt="rewTaskDetl" />
        </el-tab-pane>
        <el-tab-pane label="申诉信息" name="fifth">
          <GriInfo :appl-info="rewTaskDetl" />
        </el-tab-pane>
        <el-tab-pane label="长期医嘱单" name="sixth">
          <Orders :drord-records="rewTaskDetl" />
        </el-tab-pane>
        <el-tab-pane label="检验结果" name="seventh">
          <DschaSumma :test-rslt="rewTaskDetl" />
        </el-tab-pane>
fixmedinsCode: rewTaskDetl.medinsCodg,
medcasno: rewTaskDetl.medcasno

展示错误内容

<el-dialog title="错误内容" :visible.sync="errorShow" :modal-append-to-body="true" :append-to-body="true" size="big">
      <section>
        <my-table-view :columns="errorColumns" :data="errorData" :is-configheader="false" />
      </section>
      <span slot="footer" class="dialog-footer">
        <my-button type="close" title="关闭" @click="errorShow = false" />
      </span>
    </el-dialog>


this.$msgWarning('部分费用信息保存失败!')
this.errorShow = true

this.errorShow = true
this.errorData = res.data.errorList

2020092901

默认时间处理

//月初到今天
/**
 * 获取本月第一天
 * @param {number} format
 */
export function getFirstDay(format) {
  if (format) {
    return parseTime((new Date()).setDate(1), format)
  } else {
    return parseTime((new Date()).setDate(1), '{y}-{m}-{d}')
  }
}

/**
 * 获取当前天
 * @param {string}
 */
export function getToday(format) {
  if (format) {
    return parseTime(new Date(), format)
  } else {
    return parseTime(new Date(), '{y}-{m}-{d}')
  }
}

import { getToday, getFirstDay } from '@/utils/index'

this.queryForm.queryDate = [getFirstDay(), getToday()]

state

const state = {
  bizParaValInfo: {
    isDiseSpdrug: false,
    isPrescription: false,
    isAddManually: false,
    isOpspDise: false,
    isOutPatient: false
  }
}

mutations

SET_BIZPARAVAL_INFO: (state, info) => {
    state.bizParaValInfo = info
}

actions

const actions = {
  setBizParaValInfo({ commit }, info) {
    commit('SET_BIZPARAVAL_INFO', info)
  }
}

getters

const getters = {
  bizParaValInfo: state => state.virtualSettlement.bizParaValInfo,
}
export default getters

触发状态管理

this.$store.dispatch('realSettlement/setBizParaValInfo', { ...data })

医保区划


itemsDatas: [
        {
          label: '医保区划',
          prop: 'poolarea',
          type: 'component',
          componentName: 'MedicalArea',
          folder: 'Common',
          span: 24,
          md: 24,
          lg: 24,
          xl: 24
        }
      ],
this.searchForm.poolarea.join(',')
相关文章
|
6天前
|
缓存 JavaScript 前端开发
vue学习第四章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中计算属性的基本与复杂使用、setter/getter、与methods的对比及与侦听器的总结。如果你觉得有用,请关注我,将持续更新更多优质内容!🎉🎉🎉
vue学习第四章
|
6天前
|
JavaScript 前端开发
vue学习第九章(v-model)
欢迎来到我的博客,我是瑞雨溪,一名热爱JavaScript与Vue的大一学生,自学前端2年半,正向全栈进发。此篇介绍v-model在不同表单元素中的应用及修饰符的使用,希望能对你有所帮助。关注我,持续更新中!🎉🎉🎉
vue学习第九章(v-model)
|
6天前
|
JavaScript 前端开发 开发者
vue学习第十章(组件开发)
欢迎来到瑞雨溪的博客,一名热爱JavaScript与Vue的大一学生。本文深入讲解Vue组件的基本使用、全局与局部组件、父子组件通信及数据传递等内容,适合前端开发者学习参考。持续更新中,期待您的关注!🎉🎉🎉
vue学习第十章(组件开发)
|
11天前
|
JavaScript 前端开发 UED
vue学习第二章
欢迎来到我的博客!我是一名自学了2年半前端的大一学生,熟悉JavaScript与Vue,目前正在向全栈方向发展。如果你从我的博客中有所收获,欢迎关注我,我将持续更新更多优质文章。你的支持是我最大的动力!🎉🎉🎉
|
11天前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript和Vue的大一学生。自学前端2年半,熟悉JavaScript与Vue,正向全栈方向发展。博客内容涵盖Vue基础、列表展示及计数器案例等,希望能对你有所帮助。关注我,持续更新中!🎉🎉🎉
|
12天前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。
|
12天前
|
存储 缓存 JavaScript
在 Vue 中使用 computed 和 watch 时,性能问题探讨
本文探讨了在 Vue.js 中使用 computed 计算属性和 watch 监听器时可能遇到的性能问题,并提供了优化建议,帮助开发者提高应用性能。
|
12天前
|
存储 缓存 JavaScript
如何在大型 Vue 应用中有效地管理计算属性和侦听器
在大型 Vue 应用中,合理管理计算属性和侦听器是优化性能和维护性的关键。本文介绍了如何通过模块化、状态管理和避免冗余计算等方法,有效提升应用的响应性和可维护性。
|
12天前
|
存储 缓存 JavaScript
Vue 中 computed 和 watch 的差异
Vue 中的 `computed` 和 `watch` 都用于处理数据变化,但使用场景不同。`computed` 用于计算属性,依赖于其他数据自动更新;`watch` 用于监听数据变化,执行异步或复杂操作。
|
13天前
|
存储 JavaScript 开发者
Vue 组件间通信的最佳实践
本文总结了 Vue.js 中组件间通信的多种方法,包括 props、事件、Vuex 状态管理等,帮助开发者选择最适合项目需求的通信方式,提高开发效率和代码可维护性。
下一篇
无影云桌面