# avue-admin-temp

**Repository Path**: gaoswatou/avue-admin-temp

## Basic Information

- **Project Name**: avue-admin-temp
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-03-29
- **Last Updated**: 2022-03-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: 言之舍

## README

## 基于avue的管理后台模板

## 快速开发 https://avuejs.com/crud/crud.html

## 下拉框

```js
// 字典接口数据
type: "select",
    dicUrl: "/api/blade-system/dict/dictionary?code=notice",
    props: {
        label: "dictValue",
        value: "dictKey"
    },
    dataType: "number",

    // 本地数据
    type: "select",
    dicData: [{
            label: "固定线路",
            value: 1
        },
        {
            label: "临时线路",
            value: 2
        }
    ],

    // 列表接口数据
    type: "select", // 如需要有带有搜索框的下拉框，可以使用tree
    dicUrl: "/api/tor-pbp/info/get-line-list",
    props: {
        label: "value",
        value: "code"
    },
```

## 时间框

```js
type: "time",
    valueFormat: "HH:mm:ss", //H：24小时   h：12小时
```

## 日期框

```js
type: "date",
    valueFormat: "yyyy-MM-dd", // 注意是小写的yyyy
```

## 日期时间框

```js
type: "datetime",
    format: "yyyy-MM-dd HH:mm", //页面操作和显示 不显示秒
    valueFormat: "yyyy-MM-dd HH:mm:ss", //保存的时候加上秒 默认 00
```

## 附件上传

```js
type: "upload",
    listType: "picture-img",
    action: "/api/blade-resource/oss/endpoint/put-file",
    propsHttp: {
        res: "data",
        url: "link"
    },
```

## 引用颜色拾取组件

```html
<template slot="mainColor" slot-scope="scope">
    <div :style="{
    background: scope.row.mainColor,
    width: '20px',
    height: '20px'
    }"></div>
</template>
<template slot="mainColorForm" slot-scope="scope">
    <avue-input-color :disabled="viewDisabled" placeholder="请选择颜色" v-model="scope.row.mainColor"></avue-input-color>
</template>
```

```js
// data 中添加
viewDisabled: false,

    // column 对应项中添加
    formslot: true,
    slot: true,

    // 修改beforeOpen
    beforeOpen(done, type) {
        if (["edit", "view"].includes(type)) {
            if (["view"].includes(type)) {
                this.viewDisabled = true;
            } else {
                this.viewDisabled = false;
            }
            getDetail(this.form.id).then(res => {
                this.form = res.data.data;
            });
        }
        done();
    },
```

## 隐藏列

```js
hide: true,
    showColumn: false, //使用这个直接不展示，无法通过显隐设置进行展示
```

## 头像

```js
type: "upload",
    listType: "picture-img",
    propsHttp: {
        res: "data",
        url: "link"
    },
    loadText: "头像上传中，请稍等",
    action: "/api/blade-resource/oss/endpoint/put-file",
    rules: [{
        required: false,
        message: "请上传头像",
        trigger: "blur"
    }]

// save
row.avatar = row.avatar.replace(this.domainPath, "");

// list
data.records.forEach(el => {
    el.avatar = this.domainPath + el.avatar;
});

// detail
this.form.avatar = this.domainPath + this.form.avatar;
```

## dialog里面放crud 弹窗蒙层处理

```js
// dialog配置
: modal - append - to - body = "false"
```

```js
// crud option配置
: modal - append - to - body = "false"
dialogModal: false,
```

## 正整数正则

```js
// 对应字段的rules添加以下规则
{
    pattern: /^[0-9]*[1-9][0-9]*$/,
    message: "排序值必须为正整数",
    trigger: "blur"
}
```