@mayaxxp/cueui安装使用

mayaxxp

752人浏览 · 2026-02-26 12:37:13

mayaxxp · 2026-02-26 12:37:13 发布

@mayaxxp/cueui安装使用：@mayaxxp@sina.com

欢迎使用@mayaxxp/cueui 前端组件库

你好！这是一款基于Element UI 二次开发封装的完全前段的可配置低代码组件库，如果你的项目采用的是ElementUI，项目中有较多的增删改查表单页面功能，可以考虑安装使用此组件库，它可以帮助你提高开发效率，减少出错率。请仔细阅读这篇文章，了解一下基本用法

npm 安装命令

npm install @mayaxxp/cueui -S

main.js引入

 import cueui from "@mayaxxp/cueui";
 import { getDicOpts } from '@/api/systemData/dictionary.js'
 // 字典数据 获取与缓存
//export async function getDicOpts(dictionaryTypeId) {
  // return async function(dictionaryTypeId) {
    //let cacheRes = undefined
    //if (Vue && Vue.ls) {
      //cacheRes = Vue.ls.get(dictionaryTypeId)
    //}
    //if (!cacheRes) {
      //const cacheRes_ = await request({
        //url: `/api/DictionaryData/${dictionaryTypeId}`,
        //method: 'get',
      //}) 
      //cacheRes = cacheRes_.data.list || undefined
      //缓存30秒钟
      //if (Vue && Vue.ls) {
        //Vue.ls.set(dictionaryTypeId, cacheRes, 30000)
      //}
    //}
    //return cacheRes || []
  // }
//}
 //引入样式
 import "@mayaxxp/cueui/dist/cueui.css"
  //安装使用
  Vue.use(cueui,{
     		axios: request, // 注册axios
    		$getDicOpts: getDicOpts, // 注册字典接口配置
    	}
    )

表格：

This is a DynTable example.

<template>
 <cu-table
  ref="tableList"
  :key="'tableList' + radomkey"
  v-loading="listLoading"
  :data="list"
  :column-data="columnData"
  cell-class-name="rulecellTxTlength ys"
  :style="'width:${collapse_Width}px;height: calc(100% - 72px);'"
  :height="450"
  border
  row-key="id"
  :multiple="false"
  :show-select="false"
  :show-no="false"
  :local-tran-fn="allLocColumnOption"
  :show-overflow-tooltip="false"
  :show-sum-columns="true"
  :sum-columns="['receivedFare']">
   <template slot="payeeType" slot-scope="scope">
     <span :style="{'color':scope.$index==1?'red':'unset'}">{{ scope.row.payeeType === '0' ? '集团内' : '集团外' }}</span>
   </template>
   <template slot="distributeStatus" slot-scope="scope">
      {{ scope.row.distributeStatus === '0' ? '未变更' : scope.row.distributeStatus === '1' ? '待变更' : scope.row.distributeStatus === '2' ? '已变更' : '' }}
   </template>
   <template slot="control" slot-scope="scope">
      <el-button type="text" @click="linkRowFn(scope, 'show')">关联</el-button>
   </template>
   <template slot="lowFlag" slot-scope="scope">
      <el-button type="text" @click="flagLowFn(scope, 'submit')">
         <span :style="{color: scope.row.lowFlag === '1' ? '#ff8200' : 'green'}">{{ scope.row.lowFlag === '1' ? '撤销错误' : '标注错误' }}</span>
      </el-button>
   </template>
   <template slot="control2" slot-scope="scope">
      <el-button type="text" @click="addOrUpdateHandle(scope, false)">修改</el-button>
      <el-button type="text" @click="splitDistributeFn(scope, false)">拆分</el-button>
      <el-button type="text" @click="addOrUpdateHandle(scope, true)">
    <span style="color: #ff8200">详情</span>
    </el-button>
    </template>
  </cu-table>
</template>

<script>
export default {
  name: 'DemoTable',
  props: {
    msg: String,
  },
  data: function () {
    return {
      width: '100%',
      showAll: false,
      formVisible: false, //新增
      formVisible2: false, //拆分单
      radomkey: Math.random(),
      // 选择列表配置 开始*****************************************
      allLocColumnOption: {},
      selHasfilterOption: [
        {
          label: '公司Id(查询项)',
          code: 'requestId',
          type: 'input',
          dircode: null,
          option: null,
          value: '',
        },
        {
          label: '类别',
          code: 'basicDataType',
          type: 'cu-select',
          dircode: '355583443444439',
          option: { label: 'fullName', value: 'enCode', disable: 'disable' },
          value: '',
        },
        {
          label: '用户名称',
          code: 'mainName',
          type: 'input',
          dircode: null,
          option: null,
        },
        {
          label: '客户选择',
          code: 'custem',
          type: 'list',
          dircode: '/api/app/payee/searchPageLt',
          option: null,
          filterOption: [
            {
              label: '公司Id(查询项)',
              code: 'requestId',
              type: 'input',
              dircode: null,
              option: null,
              value: '',
            },
            {
              label: '类别',
              code: 'basicDataType',
              type: 'cu-select',
              dircode: '355583443444439',
              option: {
                label: 'fullName',
                value: 'enCode',
                disable: 'disable',
              },
              value: '',
            },
            {
              label: '用户名称',
              code: 'mainName',
              type: 'input',
              dircode: null,
              option: null,
            },
          ],
          hideColumn: [ // 需要隐藏的列字段string
            
          ],
          hasColumn: [ // 包含的列字段 配置
            { prop: 'userName', label: '用户名称', width: '200' },
            { prop: 'control', label: '操作', width: '80', type: 'btn' },
          ],
        },
      ],
      selHideColumn: [
        'basicDataType', 
      ],
      selHasColumn: [
        { prop: 'mainName', label: '用户名称', width: '200' },
        { prop: 'control', label: '操作', width: '80', type: 'btn' },
      ],
      selbackOption: [{ param: 'mainName', keyName: 'mainName' }], //返回项设置
      // 选择列表配置结束*****************************************
      query: { 
        custem: undefined,
      },
      treeProps: {
        children: 'children',
        label: 'fullName',
        value: 'id',
      },
      columnData: [
        { prop: 'distributeNumber', label: '收款总单编号', width: '120' },
        { prop: 'totalFare', label: '收款总金额', width: '100' },
        { prop: 'receivedFare', label: '已收总金额', width: '100' },
        { prop: 'balanceFare', label: '剩余总金额', width: '100' },
        { prop: 'subjectId', label: '会计科目', width: '90' },
        { prop: 'tallyTime', label: '记账日期', width: '110' },
        { prop: 'payeeId', label: '客户名称', width: 'auto' },
        { prop: 'payeeType', label: '集团内外类型', width: '100' },
        { prop: 'distributeStatus', label: '收款总单变更状态', width: '120' },
        { prop: 'linkStatus', label: '收款单关联状态', width: '120' },
        { prop: 'departmentId', label: '负责部门', width: '120' },
        { prop: 'manger', label: '负责人', width: 'auto' },
        { prop: 'importtime', label: '录入时间', width: '110' },
        { prop: 'control', label: '关联收款单', width: '80', type: 'btn' },
        { prop: 'lowFlag', label: '低效标识', width: '80', type: 'btn' },
        {
          prop: 'control2',
          label: '收款分发单处置',
          width: '160',
          type: 'btn',
        },
      ],
      list: [
         
      ],
      listLoading: false,
      multipleSelection: [],
      total: 0,
      flowId_: '',
      listQuery: {
        currentPage: 1,
        pageSize: 20,
        sort: 'desc',
        sidx: 'date',
      },
      flowVisible: false,

      finalApproverOptions: [
        { fullName: '选项一', id: '1' },
        { fullName: '选项二', id: '2' },
      ],
      finalApproverProps: { label: 'fullName', value: 'id' },
      izSignOptions: [],
      izSignProps: { label: 'fullName', value: 'id' },
      flowStateOptions: [
        {
          id: 0,
          name: '等待提交',
        },
        {
          id: 1,
          name: '等待审核',
        },
        {
          id: 2,
          name: '审核通过',
        },
        {
          id: 3,
          name: '审核驳回',
        },
        {
          id: 4,
          name: '流程撤回',
        },
        {
          id: 5,
          name: '审核终止',
        },
      ],
    }
  },
  computed: {
    collapse_Width() {
      const width_ = isNaN(this.width) ? this.width : this.width - 63
      return width_
    },
  },
  mounted() {
    this.initData()
  },
  methods: {
    initData() {
      this.listLoading = true
      let _query = {
        ...this.listQuery,
        ...this.query,
      }
      this.$request({
        url: `/api/getList`,
        method: 'post',
        data: _query,
      })
        .then((res) => {
          var _list = []
          for (let i = 0; i < res.data.list.length; i++) {
            let _data = res.data.list[i]
            _list.push(_data)
          }
          this.list = _list
          this.radomkey = new Date().getTime().valueOf()
          this.total = res.data.pagination.total
          this.flowId_ = res.data.flowId
        })
        .finally(() => {
          this.listLoading = false
        })
    },
    addOrUpdateHandle() {},
    splitDistributeFn() {},
    rowdbClick() {},
    sortChange({ column, prop, order }) {
      this.listQuery.sort = order == 'ascending' ? 'asc' : 'desc'
      this.listQuery.sidx = !order ? '' : prop
      this.initData()
    },
    handleSelectionChange(val) {
      let tempVal = val
      if (this.multiple) {
        this.multipleSelection = tempVal //已经选择 的有效数据；
      } else {
        this.multipleSelection = tempVal[0] //单选的有效数据；
      }
      this.$emit('backSelectss', this.multipleSelection)
    },
  },
}
</script>

This is a CuSelect example.

<template>
  <el-row style="width: 100%; height: 100%" :gutter="4">
    <el-col :span="24">
      <el-col :span="12">
        <label>金额：{{type}}<\/label>
      <\/el-col>
      <el-col :span="12">
        <CuSelect
          v-model="type"
          dic-code="sys"
          placeholder="请选择"
          clearable
          :option-param="{
            label: 'fullName',
            value: 'enCode',
            disable: 'disable',
          }"
        \/>
      <\/el-col>
    <\/el-col>
    <el-col :span="24">
      <el-col :span="12">
        <label>金额单位：{{type2}}<\/label>
      <\/el-col>
      <el-col :span="12">
        <CuSelect
          v-model="type2"
          dic-code="492610776293550149"
          placeholder="请选择"
          clearable
          :option-param="{
            label: 'fullName',
            value: 'enCode',
            disable: 'disable',
          }"
        \/>
      <\/el-col>
    <\/el-col>
    <el-col :span="24">
      <el-col :span="12">
        <label>币种下拉：{{type3}}</label>
      </el-col>
      <el-col :span="12">
        <CuSelect
          v-model="type3"
          dic-code="375348417167123461"
          placeholder="请选择"
          clearable
          :back-options.sync="typeOptions"
          :option-param="{
            label: 'fullName',
            value: 'enCode',
            disable: 'disable',
          }"
        />
      <\/el-col>
    <\/el-col>

    <el-col :span="24">
      <el-col :span="12">
        <label>转译币种字典：</label>
      <\/el-col>
      <el-col :span="12">
        {{ typeOptions["1"] + "-" + typeOptions["2"] + "-" + typeOptions["3"] }}
      <\/el-col>
    <\/el-col>
  <\/el-row>
<\/template>

<script>
  export default {
    props: {
      msg: String,
    },
    data: function () {
      return {
        type: "",
        type2: "",
        type3: "",
        list: [],
        typeOptions: {}, // 字典map配置 用于转译字典值 如 { 1:是 , 0:否 }
      };
    },
    mounted() {},
    methods: {},
  };
<\/script>