一些框架使用总结

我的账号昵称

已于 2024-05-14 09:16:56 修改

阅读量339

点赞数 1

文章标签：前端 java javascript

于 2023-09-25 11:00:54 首次发布

本文链接：https://blog.csdn.net/weixin_42112342/article/details/133268904

版权

一.力软

1. 菜单相关

1) 页面菜单配置

自己写的页面都在 src/modules中，基本结构如下图，具体页面在 views 文件夹中

module.js中，code字段需要和文件夹名称对应起来

export default {
    name: '案例演示模块',
    code: 'demo',
    version: '1.0.0',
    description: '一些案例演示'
  }

index.js 文件负责引入所有，基本没有变化

import './api'
import store from './store'
import routes from './routes'
import components from './components'
import module from './module'

export default {
    module,
    routes,
    store,
    components
}

进入系统配置管理 - 菜单管理中配置页面

如果是点击菜单，跳转到相应页面的话，首先是目录一栏选择功能页面这项，

其次是下面的地址，第一级是上述 module.js 中 code 所对应的文件夹名称，再下一级是 views 文件夹下的文件夹的名称

如果只是菜单的分级用处没有实际页面的话，上述的目标一栏选择菜单目录即可，地址一栏也不需要有内容

2）角标（menu.vue / menuItem.vue

定义store，引入store，处理数据，监听触发function，html中显示数据，处理样式

定义store count.js

export default {
    namespaced: true,
    state: {
        menusCount: {},
        menusCountChange: false,
    },
    actions: {
         menusCount({ commit },data) {
            commit('SET_MENUS_COUNT',data)
        },
    },
    mutations: {
        SET_MENUS_COUNT: (state, data) => {
            state.menusCount = data
        },
    }
}

在 src/core/store/getter.js 中引入文件

progressMenusCountChange: state => state.ProgressSupervision.count.menusCount,

在menu 中引入

import { mapGetters } from "vuex";


computed: {
  ...mapGetters(['progressMenusCountChange']),
},

处理数据

async setProgressMenuCount(){
  const api = window.$crud("/quota/above/index/count")
  let data = await this.$awaitWraper(api.getInfo())
  this.menuCount = this.dealMenuCount(data);
},
dealMenuCount(data){
  const processedData = {};
  data.forEach((item) => {
    if (item.indexName === 'IncompleteCheck' ) {
      processedData["日常检查"] = item.count;
    } else if (item.indexName === 'IncompleteDisposal' ) {
      processedData["问题处置"] =item.count;
    }
  });
  return processedData
}

在需要的时候触发监听

this.$store.dispatch("ProgressSupervision/count/menusCount", data)

监听后改变数据

watch: {
  progressMenusCountChange(){
    const data = this.$store.state.ProgressSupervision.count.menusCount;
    this.menuCount = this.dealMenuCount(data);
  }
}

html页面显示（判断有数据则显示，并改变样式

<template v-if="menuCount[child.f_FullName]">
  <span class="menus-tag-conut"> {{menuCount[child.f_FullName]}} </span>
</template>

2.页面筛选字段

需要注意的是，主要展示的内容及顺序是由 js 的 queryItems 控制的，

1）html（组件可以用 l-query,l-query2等，主要是样式上的区别，也可以自己再包几个

<l-query :span="4" :labelWidth="80" :height.sync="queryHeight" :items="queryItems" :formData="queryData"
        :loading="tableLoading" @search="handleSearch">
  <template #RegionCode>
    <l-select :options="regionOptions" v-model="queryData.RegionCode" @change="handleSearch"/>
  </template>
  <template #projectName>
    <el-input v-model="queryData.Keyword" :placeholder="$t('请输入项目名称')" @keyup.enter.native="handleSearch"/>
  </template>
</l-query>

2）js

queryItems: [
  {label: "功能区", prop: "RegionCode"},
  {label: "项目名称", prop: "projectName"},
],

3）涉及到的数据字典

regionOptions() { // 功能区名称
  let data = this.lr_dataItemOptions(this.lr_dataItem['FunctionZoneName'])//固定写法，中间引用内容需要到数据字段中配一下
  if (this.regionCode) {
    const item = data.filter(t => t.f_ItemValue == this.regionCode)
    if (item.length) {
      return item
    }
    return []
  }
  return data
},

如果要在html中使用数据字典、数据源

{{ lr_dataItemName(lr_dataItem['EngineeringStatus'],formData.projectStatusCode) }} //数据字典
{{ lr_dataSourceName2(dataCode, value, valueKey, labelKey) }} // 数据源

4）页面查询参数，级联选择

export const formColmuns = [
  {
    label: "房屋名称/地址",
    prop: "nameAddress",
    minWidth: 140,
    dataType: "input",
    isNotAutoWrap: true,
  },
  {
    label: "所属板块",
    prop: "regionCodes",
    minWidth: 140,
    dataType: "dataItem",
    dataCode: "subordinatePlate",
  },
  {
    label: "所属村",
    prop: "village",
    minWidth: 140,
    dataType: "groupDataItem",
    relatedDataCode: "subordinatePlate",
    relatedProp:"regionCodes",
    dataCode: "g_subordinatePlate",
    isNotAutoWrap: true,
  },
  {
    label: "是否",
    prop: "isFollowUpConducted",
    minWidth: 140,
    dataType: "boolean",
    isNotAutoWrap: true,
  },
]

3.列表显示（l-table

1) 涉及到数据字典，数据源的

mounted() {
  this.lr_loadDataItem('FunctionZoneName') // 功能区名称（上述数据字典
  this.lr_loadDataSourceData('数据源code')
},

2）基本格式的html

<l-table ref="mainTable" 
:loading="tableLoading" 
:columns="columns"  //列的数据
:dataSource="tableData" 
:isPage="true"
:pageTotal="tableTotal" 
:tablePage.sync="tableCurrentPage" 
@loadPageData="turnTablePage">
        <l-table-btns :btns="tableBtns" :filterBtns="filterBtns" @click="lr_handleTableBtnClick"
                      :isAuth="false"></l-table-btns> // 操作按钮
</l-table>

3) 一些基本类型的Columns

yczColumns = [
    { label: "项目编号", prop: "projectCode", minWidth: 120, dataType: "input", isNotAutoWrap: true, },
    { label: "建设进度", prop: "projectStatusCode", minWidth: 80, dataType: "dataItem",  dataCode: "EngineeringStatus",isNotAutoWrap: true, },
    { label: "检查日期", prop: "createTime", minWidth: 100, dataType: "datetime", format: "yyyy-MM-dd", isNotAutoWrap: true, sortable:true,},
    { label: "报送部门", prop: "problemSubmissionUnitIds", minWidth: 120, dataType: "department", isNotAutoWrap: true, },
    { label: '地址', prop: 'projectAddress', dataType: 'append', dataCode: 'm²' },
]

字段解释

isNotAutoWrap // 数据是否换行，true为不换行，超出省略号显示且hover有提示效果
sortable //排序
dataType: "dataItem",  dataCode: "EngineeringStatus",// 数据字典格式，在数据字段中配置过的会显示相应的值
dataType: 'dataSource', dataCode: "xzc", valueKey: 'value', labelKey: 'label',//数据源格式
dataType: "datetime", format: "yyyy-MM-dd",//转换时间的显示格式( dataType 也可以为 year )
dataType: 'append', dataCode: 'm²'//拼接的模式，给返回的数据加后缀
dataType: 'image', //图片
其他的 dataType ： company、department、user、amount

4）操作按钮

tableBtns() { //绑定的操作列的按钮，divided: true为显示红色
  return [
    {prop: 'Down', label: '下载'},
    {prop: 'Edit', label: '重命名', width: 48},
    {prop: 'Delete', label: '删除', divided: true}
  ]
},
filterBtns(row, btns) { // 过滤按钮，可做权限控制
  if (row.type == 1) {
    // 文件夹 取消下载按钮
    var downBtn = btns.find(t => t.prop == 'Down')
    downBtn && (downBtn.disabled = true)
  }
  return btns
},
handleEdit($index, row) { // handle + tableBtns的prop 会直接绑定操作按钮的函数
  xxx
},

5）如果 columns 中的包装的内容不能满足业务需求，我们可以直接在html中改写

 <l-table ref="mainTable" :loading="tableLoading" :columns="columns" :dataSource="tableData" :isPage="true"
               :pageTotal="tableTotal" :tablePage.sync="tableCurrentPage" @loadPageData="turnTablePage">
    <!-- 项目名称 -->
    <template v-slot:projectName="scope" >
      <div v-if="scope.row.projectName " class="name-box" :class=" scope.row.isShutdown ? 'part' : 'all' ">
        <a @click="handleDetails(0,scope.row)">{{ scope.row.projectName }}</a>
        <span v-if="scope.row.isShutdown" class="status-line-cont-tag red-box nowrap-box" > 停工</span>
      </div>
      <span v-else>---</span>
    </template>
  </l-table>