ryui-vue/COMPONENT.md

ry公共组件库

# 组件

## 表格
- `index.vue`

```html
<template>
  <div class="ele-body">
    <el-card>
      <ry-query
        :queryArgs="queryArgs"
        @load="load"
        :recursive-end-time="6000"
        :v-model-form-types="[{
          key:'name',
          type:'select'
        },{
          key:'tree',
          type:'tree'
        },{
          key:'cascader',
          type:'cascader'
        }]"
        @submit="query"
        @reset="
          () => {
            where = {};
          }
        "
      >
      </ry-query>
    </el-card>
    <el-card>
      <el-button type="primary" @click="onChange">change</el-button>
      <ry-table :url="url" :columns="columns" :where="where">
        <template #status="{ row }">
          {{ row.status ? '在线' : '离线' }}
        </template>
        <template #action="{ row }">
          <button>{{row.status ? '在线' : '离线'}}</button>
        </template>
      </ry-table>
    </el-card>
  </div>
</template>

<script>
  import RyQuery from '@/components/query';
  import RyTable from '@/components/table';
  import { columnFactory } from 'ry-form-create';
  import { QueryArgs, Column } from './model';
  export default {
    name: 'Table',
    components: {
      RyQuery,
      RyTable
    },
    data() {
      return {
        queryArgs: new QueryArgs(),
        where: {},
        columns: columnFactory(new Column()),
        url: [
          { no: 1, name: '1', status: true },
          { no: 2, name: '2', status: true }
        ],
        state:false,
        action:null
      };
    },
    created() {
      this.action = this.columns.at(-1);
    },
    methods: {
      onChange() {
        this.state = !this.state;
        if(this.state){
          this.columns.pop();
        }else {
          this.columns.push(this.action);
        }
      },
      load(ruleMap) {
        // select
        // ruleMap.get('projectTaskId').setOptinos = tasks;
        // cascader
        // ruleMap.get('areaCode').setOptinos = districts;
      },
      query(form) {
        this.where = { ...form };
      }
    }
  };
</script>

</script>
```
- `model.js`

```js
import { formType, column } from 'ry-form-create';

const col = {
  xs: 12,
  sm: 12,
  md: 8,
  lg: 8,
  xl: 8
};

const wrap = {
  labelWidth: '80px'
};

const style = {
  width: '100%'
};

const options = [
  {
    value: 1,
    label: '小鸟有限公司'
  },
  {
    value: 2,
    label: '大地有限公司'
  },
  {
    value: 3,
    label: '东方有限公司'
  }
];

export class QueryArgs {
  @formType({
    title: '关键字',
    col,
    wrap
  })
  keywords = '';
  @formType({ type: 'select', title: '主体', col, wrap, style })
  name = '';
  @formType({ type: 'tree', title: '树', col, wrap, style,props:{
      defaultExpandedKeys:[3],
      data:[]
    } })
  tree = [7];
  @formType({ type: 'cascader', title: '级联', col, wrap, style,props:{
      options:[]
    } })
  cascader = [];
  constructor() {
    setTimeout(() => {
      this['nameForm__Target'].options = options;
    },3000);
    setTimeout(() => {
      this['treeForm__Target'].props.data = [{
        id: 3,
        label: '一级 3',
        children: [{
          id: 7,
          label: '二级 3-1'
        }, {
          id: 8,
          label: '二级 3-2'
        }]
      }];
    },4000);
    setTimeout(() => {
      this['cascaderForm__Target'].props.options = [
        {
          label:'湖州市',
          value:'111',
          children:[
            {
              label:'吴兴区',
              value:'222',
              children:[
                {
                  label:'康山街道',
                  value:'333'
                }
              ]
            }
          ]
        }
      ];
    },5000);
  }
}

export class Column {
  @column({ label: '编号' })
  no;
  @column({ label: '名称' })
  name;
  @column({ label: '在线状态', minWidth: 160, slot: 'status' })
  status;
  @column({ label: '操作', minWidth: 200, slot: 'action', fixed: 'right' })
  action;
}
```

## 图片上传

- `upload/index.vue`
```html
<template>
  <div class="ele-body">
    <ry-upload
      multiple
      :file-list="[
        {
          id:1,
          url:'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg'
        }
      ]"
      @handlerSuccess="handlerSuccess"
      @afterRemove="afterRemove"
      :limit="3"
      themeColor="pink"
      gap="20px"
      text="上传图片">
    </ry-upload>
  </div>
</template>

<script>
  import RyUpload from '@/components/upload';
  export default {
    name: 'upload',
    components: {
      RyUpload
    },
    methods: {
      handlerSuccess(file) {
        console.log(file)
      },
      afterRemove({afterList, current,index}) {
        console.log(afterList, current,index)
      }
    }
  };
</script>
```

- 属性列表

|  属性名   | 说明  | 类型 | 默认值 |
|  ----  | ----  | ---- | ---- |
| fileList  | 图片列表,数组格式 [{id:string,url:string}] | Array |  [ ]       |
| gap  | 上传图片列表之间的间距 | String | '10px' |
| multiple | 是否支持多选文件, 同 el-upload 的属性 |Boolean|false|
|fileSize|单个上传文件大小限制|Number|5|
|limit|限制传入个数|Number|9|
|fileType|上传类型|Array|['jpg', 'png', 'gif', 'jpeg']|
|isFileTypeMerge|传入的上传类型是否合并到默认|Boolean|false|
|url|上传路径|[Boolean, String]|false|
|isCustomText|是否自定义文本|Boolean|false|
|unit|上传单位(支持KB，MB，GB),大小写不敏感|String|MB|
|isTip|是否显示提示|Boolean|false|
|width|宽度|Number|200|
|height|高度|Number|200|
|themeColor|主题颜色|String|rgba(102, 151, 77,.8)|
|themeClass|主题类名(优先级高于主题颜色),注意只对ele-admin框架情景色控制类绝对兼容,只能uploadType为'file'时起作用|String|无|
|text|显示的上传文字|String|' '|
|textColor|文字的颜色，默认主题颜色themeColor|String|themeColor|
|uploadType|上传格式可选file|String|image|
|@handlerSuccess|验证成功钩子函数,(file)=>{}|Function||
|@afterRemove|删除后的回调({afterList, current,index})=>{afterList是删除后的列表，current是当前删除数据，index当前删除的索引}|Function|
- slot

| 名称  | 说明 |
|---- | ---- |
|trigger|isCustomText属性为true时起作用，自己定义上传样式的插槽|
|tip|上传提示|

## ry-dialog
- `dialog/index`
```html
<template>
  <div class="ele-body">
    <ry-dialog
      :visible.sync="dialogVisible"
      :args="args"
      :editValue="editValue"
      :width="600"
      createText="创建标题"
      updateText="修改标题"
      cancelText="取消按钮文字"
      submitText="确定按钮文字"
      @loadRuleMap="loadRuleMap"
      @submit="submit"
      @cancel="cancel"
    >
      <el-button type="primary">我是默认插槽</el-button>
      <div slot="footer">
        <el-button @click="dialogVisible = false">我是footer插槽取消按钮</el-button>
        <el-button type="primary" @click="customSubmit">我是footer插槽确定按钮</el-button>
      </div>
    </ry-dialog>
    <el-button type="primary" @click="add">添加弹窗</el-button>
    <el-button type="primary" @click="update">修改弹窗</el-button>
  </div>
</template>

<script>
import RyDialog from '@/components/dialog';
import {Args} from "./model";
export default {
  name: "index",
  components: {
    RyDialog
  },
  data() {
    return {
      args: new Args(),
      dialogVisible: false,
      editValue: null,
      fApi:null
    }
  },
  methods:{
    add() {
      this.editValue = null;
      this.dialogVisible = true;
    },
    update() {
      this.dialogVisible = true;
      const names = ['小张','小沈','小李','小董','小王'];
      this.editValue = {
        name: names[Math.floor(Math.random() * 4)]
      }
    },
    loadRuleMap({fApi,ruleMap}) {
      this.fApi = fApi;
      console.log('fApi',fApi);
      console.log('ruleMap',ruleMap);
    },
    submit(formData) {
      console.log(formData);
    },
    customSubmit() {
      //如果slot = "footer"需要只定义submit方法
      this.fApi?.submit(formData => {
        console.log(formData);
      });
    },
    cancel(cb) {
      //cb:阻止默认执行逻辑
      //cb();
    }
  }
}
</script>
```
- `./model.js`
```js
import { formType } from 'ry-form-create';
export class Args {
  @formType({title:'姓名',wrap:{labelWidth:'60px'}})
  name = ''
}
```
- 属性列表

|属性名|说明|类型|默认值|
| ---- | ---- | ---- | ---- |
|editValue|复显数据|Object|null|
|visible|弹窗的显示隐藏|Boolean|false|
|args|生成表单属性列，详见上 ./model.js|Object|null|
|width|弹窗的宽度|Number|500|
|createText|创建标题|string|'添加'|
|updateText|修改标题|string|'修改'|
|cancelText|取消按钮文字|string|'取消'|
|submitText|确定按钮文字|string|'确定'|
|submit|点击确认回调(formData) => {}|Function|无|
|cancel|点击取消回调(callback) => {},callback为阻止默认执行逻辑,根据情况可以不调用|Function|无|

- slot

|名称|说明|
|----|----|
|default|默认插槽|
|footer|底部按钮插槽，注意:取消和确定事件需要自定义，通过初始化回调@loadRuleMap返回的fApi进行效验，详细见dialog/index.vue|