VUE--项目中乱七八糟的记录

1.生成foundation.js文件的命令

node vueapi.js
//替换开头部分
import axios from 'axios'换成
import axios from '../utils/request'

2.vue项目打包的命令

yarn build

3.npm安装yarn

npm install yarn -g

4.回车刷新

@keyup.enter.native="handleRefresh"

5.filter过滤

this.files.filter(item => item.uid == file.uid)

6.$Bus

this.$Bus.$on('refreshTable', () => {
  if (this.$refs.table) {
  this.$refs.table.refresh()
  }
})
this.$Bus.$emit("refreshTable");

7.合并两个数组

arr1.push(...arr2)
//或者
arr1 = [...arr1,...arr2]

8.去重相关代码

let arr3 = Array.from(new Set(arr1))   //let arr3 = [...new Set(arr1)]
//去重然后转成对象
[...new Set(users)].map(item => { return { id: item } })

let orgusers = this.checkedKeys.map(item => { return { id: item } })
let roleusers = this.checkedKeysRoleUsers.map(item => { return { id: item } })
let users = [...orgusers, ...roleusers]
let res = new Map()
users = users.filter((item) => !res.has(item.id) && res.set(item.id, 1))

9.$forceUpdate

this.$forceUpdate()

10.$next

this.$nextTick(function() {})

11.AntDesign列表相关

pageNo: 0,
pageSize: 10,

this.pageNo = res.number
this.pageSize = res.size

{
  title: '操作',
  dataIndex: 'action',
  width: '150px',
  fixed: 'right',
  scopedSlots: { customRender: 'action' }
}
customRender: (text, row, index) => {
  if (text == 1) { return '有效' }
  return '无效'
}
<span slot="serial" slot-scope="text, record, index">{{pageNo  * pageSize + index + 1}}</span>

rowSelection() {
      return {
        selectedRowKeys: this.selectedRowKeys,
        onChange: this.onSelectChange,
        getCheckboxProps: (record) => ({
          props: {
            disabled: record.projectId_name.length == 0,
          },
        }),
      };
    },

12.vxe-grid相关

安装命令

npm install --save vxe-table
npm install --save xe-utils
//版本
"vxe-table": "^3.4.11",
"xe-utils": "^3.4.3",

1.固定至右侧，slot

{
  title: this.$t("操作"),
  fixed: "right",
//slots: { default: "action" },
  slots: {
    default: ({ row }) => {
      if (row.valid === 1) {
        return "有效";
      } else {
        return "无效";
      }
    },
  },
}
//
slots: {
  default: ({ row }) => {
    return [
    <span>
      {row.secIdNo
      ? this.GLOBAL.decryptOfficeCode(row.secIdNo)
      : ""}
    </span>,
    ];
  },
  },

2.rowClassName

//:row-class-name="rowClassName" //也可
:rowClassName="
  (record, index) => {
    if (
      record.remarks && record.remarks.length > 0
    ) {
      return 'lineHightClass'
    }
  }
"

3.formatter

formatter: ({ cellValue, row, column }) => {
            return cellValue === 1 ? "有效" : "无效";
          },
      
formatter: ({ cellValue, row, column }) => {
            return moment(new Date(cellValue)).format("YYYY-MM-DD HH:mm:ss");
          },

4.columnConfig

columnConfig: {
  minWidth: 120,
}

5.配置 multiple 启用多字段组合排序，如果是服务端排序，只需加上 sort-config.remote 和 sort-change 事件就可以实现

13.a-tabs

<template slot="footer">
      <a-tabs default-active-key="1">
        <a-tab-pane key="1" tab="Details" />
        <a-tab-pane key="2" tab="Rule" />
      </a-tabs>
    </template>

14.tab页标签关闭过滤

const includeName = this.pages.find(item => item.fullPath === targetKey).name
store.dispatch('delInclude', includeName)
this.pages = this.pages.filter(page => page.fullPath !== targetKey)
this.fullPathList = this.fullPathList.filter(path => path !== targetKey)
// 判断当前标签是否关闭，若关闭则跳转到最后一个还存在的标签页
if (!this.fullPathList.includes(this.activeKey)) {
this.selectedLastPath()
}

15.input的label自定义必填

<span slot="label">
  <span class="epc-required"></span>{{ $t("label") }}
</span>
.epc-required::before {
  display: inline-block;
  color: #f5222d;
  font-size: 14px;
  font-family: SimSun, sans-serif;
  line-height: 1;
  content: '*';
  margin-right: 4px;
}

16.radio类型的ui

<a-form-item label="有效性">
  <a-radio-group v-model="queryParam.majorparam.valid">
    <a-radio :value="1">有效</a-radio>
    <a-radio :value="0">无效</a-radio>
  </a-radio-group>
</a-form-item>

<a-radio-group @change="decisionChange"
          v-decorator="[
            'test',
            {
              rules: [
                { required: true, message: this.$t('test') },
              ],
            },
          ]"
></a-radio-group>

17.select类型

<a-select :disabled="!edit" v-decorator="['type']">
<a-select-option v-for="d in types" :key="d.id" :value="d.id">
  {{ d.name }}
</a-select-option>
</a-select>
//
<a-select v-model="queryParam.dml.version" :allowClear="true">
  <a-select-option
  v-for="d in versions"
  :key="d.id"
  :value="d.id"
  >
  {{ d.name }}
  </a-select-option>
</a-select>

//验证
:rules="rules"  
rules: {
        name: [
          { required: true, message: ''}
]}

设置分隔符

:token-separators="[',']"

设置空选项

开头插入的方法：unshift
字符：'\u{0}'

18.AntDesign日期组件

<a-date-picker
:disabled="!edit"
placeholder
style="width: 100%"
v-model="form.begindate"
/>

19.路由跳转

this.$router.push('/list/table-list')

20.computed

computed: {
    files: {
      get() {
        return this.parames.files
      },
      set() {},
    },
  },
//
computed: {
    columns() {
      return '';
    }
}

21.获取，设置form表单的某个值

this.form.setFieldsValue({ "check_up_user": '' })
this.form.getFieldsValue(['','']);
this.form.getFieldValue('');

22.vue2-datepicker

npm install vue2-datepicker --save

import DatePicker from 'vue2-datepicker'
import 'vue2-datepicker/index.css'
import 'vue2-datepicker/locale/zh-cn'
Vue.use(DatePicker)

日期范围控制

<date-picker
  v-model="queryParam.vo.times"
  style="width: 100%"
  value-type="format"
  range
  :disabled-date="disabledDate"
  @change="changeDate"
  >
  <template v-slot:footer="{ emit }">
  <div style="text-align: center">
  <button
  class="mx-btn mx-btn-text"
  @click="emit(new Date())"
  >
  今天
  </button>
  </div>
 </template>
</date-picker>
import moment from "moment";
//mothed  当前日期的前后一周时间可选
disabledDate(current, date) {
  if (!date) return;
  date = new Date(date);
  return (
  current < moment(date).subtract(6, "days") ||
  current > moment(date).add(6, "days")
  );
  },
  changeDate() {
  this.disabledDate(null, this.queryParam.vo.times[0]);
},
//前后一周，不算当前日期
(
current < moment(date).subtract(1, "weeks") ||
current > moment(date).add(1, "weeks")
)

23.await async

getlists () {
  return new Promise((resolve, reject) => {
    API.workMattersListUsingPOST({})).then(re => {
      resolve(re)
    })
  })
}

24.流程-bpmn

​​https://github.com/miniclound/vue-bpmn​​

yarn add bpmn-js --save
yarn add bpmn-js-properties-panel --save
yarn add --save vue-color
npm install --save jquery

25.echarts

​​https://v-charts.js.org/#/​​

npm i v-charts echarts@4.9.0 -S

26.watch

watch: {
    timer: {
      deep: true,
      immediate: true,
      handler (newV, oldV) {
        if (newV) {
          if (this.visible) {
            this.handleRefresh()
          }
        }
      }
    }
  }

27.filters

filters: {
    statusFilter(type) {
      return statusMap[type].text;
    },
    statusTypeFilter(type) {
      return statusMap[type].status;
    },
  },

28.鼠标放上去再显示全部内容

<a-form-item label="" class="epc-zj"><div class="epc-over-ellipsis">...</div></a-form-item>
.epc-zj .ant-form-item-control {
  height: 32px;
  line-height: 28px;
}
.epc-zj {
  &:hover {
    .ant-form-item-control {
      max-height: 200px;
      z-index: 1000;
      .ant-select-selection--multiple {
        height: auto;
        overflow: auto;
      }
      .epc-over-ellipsis {
        display: none;
      }
    }
  }
}
.ant-modal-wrap {
  z-index: 1001
}

.epc-over-ellipsis {
  position: absolute;
  right: 10px;
  top: -18px;
}
.epc-table-select-over {
  right: 24px;
  top: 0px;
}

29.布局相关

:labelCol="{ span: 3 }"
:wrapperCol="{ span: 21 }"

const fcols_4 = { xxl: 6, xl: 8, lg: 12, md: 12, sm: 24 }
<a-col v-bind="GLOBAL.fcols_4">
//相当于
 <a-col :xxl="GLOBAL.fcols.xxl"  :xl="GLOBAL.fcols.xl" :lg="GLOBAL.fcols.lg"
        :md="GLOBAL.fcols.md" :sm="GLOBAL.fcols.sm">

30.pdf-annotate相关的安装内容

  "@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.7",
  "@babel/plugin-proposal-optional-chaining": "^7.16.7",
  "create-stylesheet": "^0.3.0",
  "pdfjs-dist": "2.0.943",
  "twitter-text": "^3.1.0",
  "worker-loader": "^3.0.8",

31.npm命令

node_modules删除掉，重新npm run install 的时候报错用以下命令

npm cache clean --force

32.外网路由跳转

{
  path: 'http://www.shipxy.com/',
  meta: { title: '链接', keepAlive: false, target: '_blank' }
},

33.报错整理

1.动态表单less fade的报错解决：在vue.config.js文件中添加

css: {
    loaderOptions: {
      less: {
        modifyVars: {
          'primary-color': '#1890ff',
          'link-color': '#1890ff',
          'border-radius-base': '2px',
          'layout-color': '#9867f7'//关键的内容
        },
        javascriptEnabled: true
      }
    }
  },

34.for循环遍历公共的方法

for (let key in globalFns) {
  this[key] = globalFns[key].bind(this);
}

35.声明公共的变量

import globalVariable from '@/api/global_variable'
Vue.prototype.GLOBAL = globalVariable

36.import其他模块的方法以及变量

import('doc/api/global_variable').then(({ default: obj }) => {
  for (let key in obj) {
    if (!result.hasOwnProperty(key)) {
      result[key] = obj[key];
    }
  }
})

37.cmd命令

1.查找端口

netstat -noa |findstr 9091