Compare commits
No commits in common. "develop" and "gtz" have entirely different histories.
41
.drone.yml
41
.drone.yml
@ -1,41 +0,0 @@
|
|||||||
---
|
|
||||||
kind: pipeline
|
|
||||||
type: docker
|
|
||||||
name: default
|
|
||||||
|
|
||||||
steps:
|
|
||||||
- name: build
|
|
||||||
image: docker:dind
|
|
||||||
volumes:
|
|
||||||
- name: dockersock
|
|
||||||
path: /var/run/docker.sock
|
|
||||||
- name: dockerconfig
|
|
||||||
path: /root/.docker
|
|
||||||
commands:
|
|
||||||
- docker build --add-host github.com:192.30.255.113 -t harbor.picaiba.com/kszny/cnbmai:1.0.0 ./ && docker push harbor.picaiba.com/kszny/cnbmai:1.0.0
|
|
||||||
|
|
||||||
- name: deploy
|
|
||||||
image: harbor.picaiba.com/tools/kubectl:1.19.8
|
|
||||||
commands:
|
|
||||||
- echo "172.27.0.20 lb.kubesphere.local" >> /etc/hosts
|
|
||||||
#- echo "52.74.223.119 github.com" >> /etc/hosts
|
|
||||||
- sleep 1
|
|
||||||
- kubectl scale --replicas=0 deployment/cnbmai -n cnbmai
|
|
||||||
- sleep 3
|
|
||||||
- kubectl scale --replicas=1 deployment/cnbmai -n cnbmai
|
|
||||||
depends_on:
|
|
||||||
- build
|
|
||||||
|
|
||||||
volumes:
|
|
||||||
- name: dockersock
|
|
||||||
host:
|
|
||||||
path: /var/run/docker.sock
|
|
||||||
- name: dockerconfig
|
|
||||||
host:
|
|
||||||
path: /root/.docker
|
|
||||||
|
|
||||||
trigger:
|
|
||||||
branch:
|
|
||||||
- develop
|
|
||||||
event:
|
|
||||||
- push
|
|
10
Dockerfile
10
Dockerfile
@ -1,10 +0,0 @@
|
|||||||
FROM node:12 AS builder
|
|
||||||
WORKDIR /app
|
|
||||||
ADD package.json /app/
|
|
||||||
RUN npm config set registry https://registry.npmmirror.com && npm install
|
|
||||||
ADD . /app
|
|
||||||
RUN npm run build
|
|
||||||
|
|
||||||
FROM busybox
|
|
||||||
LABEL maintainer thomas.hairong@gmail.com
|
|
||||||
COPY --from=builder /app/dist /html
|
|
14
package-lock.json
generated
14
package-lock.json
generated
@ -8,7 +8,7 @@
|
|||||||
"name": "code-brick-wd",
|
"name": "code-brick-wd",
|
||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"code-brick-zj": "^1.0.2",
|
"code-brick-zj": "^0.0.1",
|
||||||
"core-js": "^3.8.3",
|
"core-js": "^3.8.3",
|
||||||
"element-ui": "^2.15.12",
|
"element-ui": "^2.15.12",
|
||||||
"vue": "^2.6.14",
|
"vue": "^2.6.14",
|
||||||
@ -4007,9 +4007,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/code-brick-zj": {
|
"node_modules/code-brick-zj": {
|
||||||
"version": "1.1.0",
|
"version": "0.0.1",
|
||||||
"resolved": "https://registry.npmjs.org/code-brick-zj/-/code-brick-zj-1.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/code-brick-zj/-/code-brick-zj-0.0.1.tgz",
|
||||||
"integrity": "sha512-J6S5ILHdweYMiEfpLuU8EvgQNEJ4EMAvjBAbLRtpGOBtXNX4U7z+IB9jDu2FE1TdkOaKJUpVLubgZwxkGzXNaA=="
|
"integrity": "sha512-XLvQEoiVWESDirkMKVKCIdH1jW3drkSS472uMWd1m6Ul5UVTUAiJvBQ15kEo+L7w8Zt7cC5ErF+laYHhNeoaIA=="
|
||||||
},
|
},
|
||||||
"node_modules/color-convert": {
|
"node_modules/color-convert": {
|
||||||
"version": "1.9.3",
|
"version": "1.9.3",
|
||||||
@ -14473,9 +14473,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"code-brick-zj": {
|
"code-brick-zj": {
|
||||||
"version": "1.1.0",
|
"version": "0.0.1",
|
||||||
"resolved": "https://registry.npmjs.org/code-brick-zj/-/code-brick-zj-1.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/code-brick-zj/-/code-brick-zj-0.0.1.tgz",
|
||||||
"integrity": "sha512-J6S5ILHdweYMiEfpLuU8EvgQNEJ4EMAvjBAbLRtpGOBtXNX4U7z+IB9jDu2FE1TdkOaKJUpVLubgZwxkGzXNaA=="
|
"integrity": "sha512-XLvQEoiVWESDirkMKVKCIdH1jW3drkSS472uMWd1m6Ul5UVTUAiJvBQ15kEo+L7w8Zt7cC5ErF+laYHhNeoaIA=="
|
||||||
},
|
},
|
||||||
"color-convert": {
|
"color-convert": {
|
||||||
"version": "1.9.3",
|
"version": "1.9.3",
|
||||||
|
@ -8,7 +8,7 @@
|
|||||||
"lint": "vue-cli-service lint"
|
"lint": "vue-cli-service lint"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"code-brick-zj": "^1.0.2",
|
"code-brick-zj": "^0.0.1",
|
||||||
"core-js": "^3.8.3",
|
"core-js": "^3.8.3",
|
||||||
"element-ui": "^2.15.12",
|
"element-ui": "^2.15.12",
|
||||||
"vue": "^2.6.14",
|
"vue": "^2.6.14",
|
||||||
|
@ -112,24 +112,6 @@ export const routes = [
|
|||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
|
||||||
path: '/splitPane',
|
|
||||||
component: Layout,
|
|
||||||
name: 'splitPane',
|
|
||||||
meta: {
|
|
||||||
title: '分割面板'
|
|
||||||
},
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
path: 'splitPane',
|
|
||||||
name: 'splitPane',
|
|
||||||
meta: {
|
|
||||||
title: '分割面板'
|
|
||||||
},
|
|
||||||
component: () => import('../views/splitPane/splitPane')
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{ path: '*', redirect: '/home/introduce', hidden: true }
|
{ path: '*', redirect: '/home/introduce', hidden: true }
|
||||||
]
|
]
|
||||||
|
|
||||||
|
@ -3,79 +3,7 @@
|
|||||||
<p>
|
<p>
|
||||||
组件包目前封装常用的四个组件:表格,搜索区域,分页,对话框。包npm地址为:https://www.npmjs.com/package/code-brick-zj。
|
组件包目前封装常用的四个组件:表格,搜索区域,分页,对话框。包npm地址为:https://www.npmjs.com/package/code-brick-zj。
|
||||||
</p>
|
</p>
|
||||||
<p>文档当前使用的组件包的版本为:1.1.0</p>
|
<p>文档当前使用的组件包的版本为:0.0.3</p>
|
||||||
<div class="block">
|
|
||||||
<el-timeline>
|
|
||||||
<el-timeline-item timestamp="2024/4/10" placement="top">
|
|
||||||
<el-card>
|
|
||||||
<h4>修改</h4>
|
|
||||||
<h4>搜索栏:去除展开收起的样式,变成显示不下自动换行</h4>
|
|
||||||
<p>组件版本号为:1.1.0</p>
|
|
||||||
</el-card>
|
|
||||||
</el-timeline-item>
|
|
||||||
<el-timeline-item timestamp="2023/11/28" placement="top">
|
|
||||||
<el-card>
|
|
||||||
<h4>修改</h4>
|
|
||||||
<h4>
|
|
||||||
searchBar:select增加属性collapseTags将选中值按文字的形式展示
|
|
||||||
multipleLimit来设置多选时用户最多可以选择的项目数
|
|
||||||
placeholder有值显示,无值默认显示label
|
|
||||||
</h4>
|
|
||||||
<p>组件版本号为:1.0.5</p>
|
|
||||||
</el-card>
|
|
||||||
</el-timeline-item>
|
|
||||||
<el-timeline-item timestamp="2023/11/24" placement="top">
|
|
||||||
<el-card>
|
|
||||||
<h4>增加/修改</h4>
|
|
||||||
<h4>
|
|
||||||
表格:增加表格操作列按钮的tooltip样式,
|
|
||||||
设置showTip的值即可对当前按钮开启tooptip并显示showTip中的值
|
|
||||||
</h4>
|
|
||||||
<h4>时间选择器:修改了默认的width尺寸</h4>
|
|
||||||
<p>组件版本号为:1.0.3</p>
|
|
||||||
</el-card>
|
|
||||||
</el-timeline-item>
|
|
||||||
<el-timeline-item timestamp="2023/2/28" placement="top">
|
|
||||||
<el-card>
|
|
||||||
<h4>修改</h4>
|
|
||||||
<h4>搜索栏:增加展开收起的样式" 1.1.0 "版本开始废弃</h4>
|
|
||||||
<p>组件版本号为:1.0.2</p>
|
|
||||||
</el-card>
|
|
||||||
</el-timeline-item>
|
|
||||||
<el-timeline-item timestamp="2023/2/28" placement="top">
|
|
||||||
<el-card>
|
|
||||||
<h4>新增</h4>
|
|
||||||
<h4>增加组件SplitPane,可以拖动来调整面板的大小</h4>
|
|
||||||
<p>组件版本号为:0.1.0</p>
|
|
||||||
</el-card>
|
|
||||||
</el-timeline-item>
|
|
||||||
<el-timeline-item timestamp="2023/1/10" placement="top">
|
|
||||||
<el-card>
|
|
||||||
<h4>修改</h4>
|
|
||||||
<h4>搜索区域UI样式更新,按2023.1.16的样式修改</h4>
|
|
||||||
<p>组件版本号为:0.0.7</p>
|
|
||||||
</el-card>
|
|
||||||
</el-timeline-item>
|
|
||||||
<el-timeline-item timestamp="2023/1/9" placement="top">
|
|
||||||
<el-card>
|
|
||||||
<h4>修改</h4>
|
|
||||||
<h4>
|
|
||||||
1.table的序号列默认左侧固定,提供cancelPageFixed可以取消固定。
|
|
||||||
</h4>
|
|
||||||
<h4>2.提供方法doLayout,具体见文档基础表格下说明。</h4>
|
|
||||||
<p>组件版本号为:0.0.6</p>
|
|
||||||
</el-card>
|
|
||||||
</el-timeline-item>
|
|
||||||
<el-timeline-item timestamp="2023/1/6" placement="top">
|
|
||||||
<el-card>
|
|
||||||
<h4>修改</h4>
|
|
||||||
<h4>1.table改成默认有border的,需要无border的table另外传参数。</h4>
|
|
||||||
<h4>2.css修改,适配没有sass-loader的项目</h4>
|
|
||||||
<p>组件版本号为:0.0.5</p>
|
|
||||||
</el-card>
|
|
||||||
</el-timeline-item>
|
|
||||||
</el-timeline>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
|
@ -2,10 +2,6 @@
|
|||||||
<div class="search-bar">
|
<div class="search-bar">
|
||||||
<div class="demo-box">
|
<div class="demo-box">
|
||||||
<h3>input输入框(size默认small高度是32px)</h3>
|
<h3>input输入框(size默认small高度是32px)</h3>
|
||||||
<p>
|
|
||||||
部分业务需要输入框必填, 可以设置required的值为true来显示红星,
|
|
||||||
判断逻辑还是得在js中写,required只是样式上显示红星
|
|
||||||
</p>
|
|
||||||
<div style="height: 50px">
|
<div style="height: 50px">
|
||||||
<SearchBar :formConfigs="formConfig1" />
|
<SearchBar :formConfigs="formConfig1" />
|
||||||
</div>
|
</div>
|
||||||
@ -26,8 +22,7 @@
|
|||||||
type: 'input',
|
type: 'input',
|
||||||
label: '姓名',
|
label: '姓名',
|
||||||
placeholder: 'width不传默认200px',
|
placeholder: 'width不传默认200px',
|
||||||
param: 'xm1',
|
param: 'xm1'
|
||||||
required: true
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'input',
|
type: 'input',
|
||||||
@ -64,9 +59,6 @@
|
|||||||
<h3>
|
<h3>
|
||||||
select下拉框(选项默认是id和name,可以通过labelField,valueField去改取值的key)
|
select下拉框(选项默认是id和name,可以通过labelField,valueField去改取值的key)
|
||||||
</h3>
|
</h3>
|
||||||
<p>
|
|
||||||
可以通过multiple:true来开启多选,collapseTags:true来将选中值按文字的形式展示,multipleLimit来设置多选时用户最多可以选择的项目数
|
|
||||||
</p>
|
|
||||||
<div style="height: 50px">
|
<div style="height: 50px">
|
||||||
<SearchBar
|
<SearchBar
|
||||||
:formConfigs="formConfig2"
|
:formConfigs="formConfig2"
|
||||||
@ -126,16 +118,10 @@
|
|||||||
label: '性别',
|
label: '性别',
|
||||||
selectOptions: [
|
selectOptions: [
|
||||||
{ id: 1, name: '男(可多选)' },
|
{ id: 1, name: '男(可多选)' },
|
||||||
{ id: 2, name: '女' },
|
{ id: 2, name: '女' }
|
||||||
{ id: 3, name: '未知1' },
|
|
||||||
{ id: 4, name: '保密' },
|
|
||||||
{ id: 5, name: '保密2' }
|
|
||||||
],
|
],
|
||||||
placeholder: '多选',
|
|
||||||
param: 'xb4',
|
param: 'xb4',
|
||||||
multiple: true,
|
multiple: true
|
||||||
collapseTags: true,
|
|
||||||
multipleLimit: 3
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'select',
|
type: 'select',
|
||||||
@ -159,7 +145,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="demo-box">
|
<div class="demo-box">
|
||||||
<h3>Cascader 级联选择器</h3>
|
<h3>Cascader 级联选择器</h3>
|
||||||
<div>
|
<div style="height: 120px">
|
||||||
<SearchBar
|
<SearchBar
|
||||||
:formConfigs="formConfig22"
|
:formConfigs="formConfig22"
|
||||||
@headBtnClick="headBtnClickCascader"
|
@headBtnClick="headBtnClickCascader"
|
||||||
@ -167,7 +153,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<el-collapse>
|
<el-collapse>
|
||||||
<el-collapse-item title="显示代码">
|
<el-collapse-item title="显示代码">
|
||||||
<div class="description">搜索条件过多的,显示不下自动换行</div>
|
<div class="description"></div>
|
||||||
<div>
|
<div>
|
||||||
<pre>
|
<pre>
|
||||||
<<span>template</span>>
|
<<span>template</span>>
|
||||||
@ -603,9 +589,6 @@
|
|||||||
btnName: '重置',
|
btnName: '重置',
|
||||||
name: 'reset'
|
name: 'reset'
|
||||||
},
|
},
|
||||||
{
|
|
||||||
type: 'separate'
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
type: 'button',
|
type: 'button',
|
||||||
btnName: '打印',
|
btnName: '打印',
|
||||||
@ -1154,8 +1137,7 @@ export default {
|
|||||||
type: 'input',
|
type: 'input',
|
||||||
label: '姓名',
|
label: '姓名',
|
||||||
placeholder: 'width不传默认200px',
|
placeholder: 'width不传默认200px',
|
||||||
param: 'xm1',
|
param: 'xm1'
|
||||||
required: true
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'input',
|
type: 'input',
|
||||||
@ -1217,16 +1199,10 @@ export default {
|
|||||||
label: '性别',
|
label: '性别',
|
||||||
selectOptions: [
|
selectOptions: [
|
||||||
{ id: 1, name: '男(可多选)' },
|
{ id: 1, name: '男(可多选)' },
|
||||||
{ id: 2, name: '女' },
|
{ id: 2, name: '女' }
|
||||||
{ id: 3, name: '未知1' },
|
|
||||||
{ id: 4, name: '保密' },
|
|
||||||
{ id: 5, name: '保密2' }
|
|
||||||
],
|
],
|
||||||
placeholder: '多选',
|
|
||||||
param: 'xb4',
|
param: 'xb4',
|
||||||
multiple: true,
|
multiple: true
|
||||||
collapseTags: true,
|
|
||||||
multipleLimit: 3
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'select',
|
type: 'select',
|
||||||
@ -1342,16 +1318,6 @@ export default {
|
|||||||
endPlaceholder: '结束时间',
|
endPlaceholder: '结束时间',
|
||||||
defaultSelect: ['2022-08-11', '2022-08-12'],
|
defaultSelect: ['2022-08-11', '2022-08-12'],
|
||||||
param: 'searchTime4'
|
param: 'searchTime4'
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'datePicker',
|
|
||||||
label: '产品上片时间',
|
|
||||||
dateType: 'datetime',
|
|
||||||
format: 'yyyy-MM-dd HH:mm:ss',
|
|
||||||
valueFormat: 'yyyy-MM-dd HH:mm:ss',
|
|
||||||
placeholder: '产品上片时间',
|
|
||||||
param: 'testTime',
|
|
||||||
width: 200
|
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
formConfig33: [
|
formConfig33: [
|
||||||
@ -1477,9 +1443,6 @@ export default {
|
|||||||
btnName: '重置',
|
btnName: '重置',
|
||||||
name: 'reset'
|
name: 'reset'
|
||||||
},
|
},
|
||||||
{
|
|
||||||
type: 'separate'
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
type: 'button',
|
type: 'button',
|
||||||
btnName: '打印',
|
btnName: '打印',
|
||||||
@ -1491,8 +1454,7 @@ export default {
|
|||||||
type: 'button',
|
type: 'button',
|
||||||
btnName: '成功',
|
btnName: '成功',
|
||||||
name: 'success',
|
name: 'success',
|
||||||
color: 'success',
|
color: 'success'
|
||||||
plain: true
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'button',
|
type: 'button',
|
||||||
|
@ -1,306 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="split-page">
|
|
||||||
<h2>可将一片区域,分割为可以拖拽调整宽度或高度的两部分区域。</h2>
|
|
||||||
<div class="demo-box">
|
|
||||||
<h3>左右分割</h3>
|
|
||||||
<div class="split">
|
|
||||||
<SplitPane v-model="split1">
|
|
||||||
<template #left>
|
|
||||||
<div class="split-pane">Left Pane</div>
|
|
||||||
</template>
|
|
||||||
<template #right>
|
|
||||||
<div class="split-pane">Right Pane</div>
|
|
||||||
</template>
|
|
||||||
</SplitPane>
|
|
||||||
</div>
|
|
||||||
<el-collapse>
|
|
||||||
<el-collapse-item title="显示代码">
|
|
||||||
<div>
|
|
||||||
<pre>
|
|
||||||
<div class="split">
|
|
||||||
<SplitPane v-model="split1">
|
|
||||||
<template #left>
|
|
||||||
<div class="split-pane">Left Pane</div>
|
|
||||||
</template>
|
|
||||||
<template #right>
|
|
||||||
<div class="split-pane">Right Pane</div>
|
|
||||||
</template>
|
|
||||||
</SplitPane>
|
|
||||||
</div>
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
split1: 0.5
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.split {
|
|
||||||
height: 200px;
|
|
||||||
border: 1px solid #dcdee2;
|
|
||||||
}
|
|
||||||
.split-pane {
|
|
||||||
padding: 20px;
|
|
||||||
}
|
|
||||||
</pre>
|
|
||||||
</div>
|
|
||||||
</el-collapse-item>
|
|
||||||
</el-collapse>
|
|
||||||
</div>
|
|
||||||
<div class="demo-box">
|
|
||||||
<h3>上下分割</h3>
|
|
||||||
<div class="split">
|
|
||||||
<SplitPane v-model="split2" mode="vertical">
|
|
||||||
<template #top>
|
|
||||||
<div class="split-pane">Left Pane</div>
|
|
||||||
</template>
|
|
||||||
<template #bottom>
|
|
||||||
<div class="split-pane">Right Pane</div>
|
|
||||||
</template>
|
|
||||||
</SplitPane>
|
|
||||||
</div>
|
|
||||||
<el-collapse>
|
|
||||||
<el-collapse-item title="显示代码">
|
|
||||||
<div>
|
|
||||||
<pre>
|
|
||||||
<div class="split" mode="vertical">
|
|
||||||
<SplitPane v-model="split2">
|
|
||||||
<template #top>
|
|
||||||
<div class="split-pane">Left Pane</div>
|
|
||||||
</template>
|
|
||||||
<template #bottom>
|
|
||||||
<div class="split-pane">Right Pane</div>
|
|
||||||
</template>
|
|
||||||
</SplitPane>
|
|
||||||
</div>
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
split2: 0.5
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.split {
|
|
||||||
height: 200px;
|
|
||||||
border: 1px solid #dcdee2;
|
|
||||||
}
|
|
||||||
.split-pane {
|
|
||||||
padding: 20px;
|
|
||||||
}
|
|
||||||
</pre>
|
|
||||||
</div>
|
|
||||||
</el-collapse-item>
|
|
||||||
</el-collapse>
|
|
||||||
</div>
|
|
||||||
<div class="demo-box">
|
|
||||||
<h3>嵌套使用</h3>
|
|
||||||
<div class="split">
|
|
||||||
<SplitPane v-model="split3">
|
|
||||||
<template #left>
|
|
||||||
<div class="split-pane no-padding">
|
|
||||||
<SplitPane v-model="split4" mode="vertical">
|
|
||||||
<template #top>
|
|
||||||
<div class="split-pane">Top Pane</div>
|
|
||||||
</template>
|
|
||||||
<template #bottom>
|
|
||||||
<div class="split-pane">Bottom Pane</div>
|
|
||||||
</template>
|
|
||||||
</SplitPane>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<template #right>
|
|
||||||
<div class="split-pane">Right Pane</div>
|
|
||||||
</template>
|
|
||||||
</SplitPane>
|
|
||||||
</div>
|
|
||||||
<el-collapse>
|
|
||||||
<el-collapse-item title="显示代码">
|
|
||||||
<div>
|
|
||||||
<pre>
|
|
||||||
<div class="split">
|
|
||||||
<SplitPane v-model="split3">
|
|
||||||
<template #left>
|
|
||||||
<div class="split-pane no-padding">
|
|
||||||
<SplitPane v-model="split4" mode="vertical">
|
|
||||||
<template #top>
|
|
||||||
<div class="split-pane">Top Pane</div>
|
|
||||||
</template>
|
|
||||||
<template #bottom>
|
|
||||||
<div class="split-pane">Bottom Pane</div>
|
|
||||||
</template>
|
|
||||||
</SplitPane>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<template #right>
|
|
||||||
<div class="split-pane">Right Pane</div>
|
|
||||||
</template>
|
|
||||||
</SplitPane>
|
|
||||||
</div>
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
split3: 0.5,
|
|
||||||
split4: 0.5
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.split {
|
|
||||||
height: 200px;
|
|
||||||
border: 1px solid #dcdee2;
|
|
||||||
}
|
|
||||||
.split-pane {
|
|
||||||
padding: 20px;
|
|
||||||
}
|
|
||||||
.split-pane.no-padding {
|
|
||||||
height: 200px;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
</pre>
|
|
||||||
</div>
|
|
||||||
</el-collapse-item>
|
|
||||||
</el-collapse>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3>API</h3>
|
|
||||||
<h4>SplitPane Props</h4>
|
|
||||||
<base-table :table-props="tableProps1" :table-data="tableData1" />
|
|
||||||
<h4>SplitPane Events</h4>
|
|
||||||
<base-table :table-props="tableProps2" :table-data="tableData2" />
|
|
||||||
<h4>SplitPane Slots</h4>
|
|
||||||
<base-table :table-props="tableProps3" :table-data="tableData3" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'splitPane',
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
split1: 0.5,
|
|
||||||
split2: 0.5,
|
|
||||||
split3: 0.5,
|
|
||||||
split4: 0.5,
|
|
||||||
tableProps1: [
|
|
||||||
{
|
|
||||||
prop: 'a1',
|
|
||||||
label: '属性'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
prop: 'a2',
|
|
||||||
label: '说明',
|
|
||||||
minWidth: 200
|
|
||||||
},
|
|
||||||
{
|
|
||||||
prop: 'a3',
|
|
||||||
label: '类型'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
prop: 'a4',
|
|
||||||
label: '默认值'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
tableData1: [
|
|
||||||
{
|
|
||||||
a1: 'model-value',
|
|
||||||
a2: '面板位置,可以是 0~1 代表百分比,或具体数值的像素,可用 v-model 双向绑定',
|
|
||||||
a3: 'Number | String',
|
|
||||||
a4: '0.5'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
a1: 'mode',
|
|
||||||
a2: '类型,可选值为 horizontal 或 vertical',
|
|
||||||
a3: 'String',
|
|
||||||
a4: 'horizontal'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
a1: 'min',
|
|
||||||
a2: '最小阈值',
|
|
||||||
a3: 'Number | String',
|
|
||||||
a4: '40px'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
a1: 'max',
|
|
||||||
a2: '最大阈值',
|
|
||||||
a3: 'Number | String',
|
|
||||||
a4: '40px'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
tableProps2: [
|
|
||||||
{
|
|
||||||
prop: 'a1',
|
|
||||||
label: '事件名'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
prop: 'a2',
|
|
||||||
label: '说明'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
prop: 'a3',
|
|
||||||
label: '返回值'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
tableData2: [
|
|
||||||
{
|
|
||||||
a1: 'on-move-start',
|
|
||||||
a2: '拖拽开始',
|
|
||||||
a3: '-'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
a1: 'on-moving',
|
|
||||||
a2: '拖拽中',
|
|
||||||
a3: 'event'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
a1: 'on-move-end',
|
|
||||||
a2: '拖拽结束',
|
|
||||||
a3: '-'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
tableProps3: [
|
|
||||||
{
|
|
||||||
prop: 'a1',
|
|
||||||
label: '名称'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
prop: 'a2',
|
|
||||||
label: '说明'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
tableData3: [
|
|
||||||
{
|
|
||||||
a1: 'left',
|
|
||||||
a2: 'mode 为 horizontal 时可用,左边面板'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
a1: 'right',
|
|
||||||
a2: 'mode 为 horizontal 时可用,右边面板'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
a1: 'top',
|
|
||||||
a2: 'mode 为 vertical 时可用,上边面板'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
a1: 'bottom',
|
|
||||||
a2: 'mode 为 vertical 时可用,下边面板'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
a1: 'trigger',
|
|
||||||
a2: '自定义分割拖拽节点'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.split-page {
|
|
||||||
.demo-box {
|
|
||||||
margin-bottom: 40px;
|
|
||||||
.split {
|
|
||||||
height: 200px;
|
|
||||||
border: 1px solid #dcdee2;
|
|
||||||
}
|
|
||||||
.split-pane {
|
|
||||||
padding: 20px;
|
|
||||||
}
|
|
||||||
.split-pane.no-padding {
|
|
||||||
height: 200px;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
@ -4,6 +4,7 @@
|
|||||||
<div class="demo-box">
|
<div class="demo-box">
|
||||||
<h3>表格内嵌输入框</h3>
|
<h3>表格内嵌输入框</h3>
|
||||||
<base-table
|
<base-table
|
||||||
|
border
|
||||||
:table-props="tableProps"
|
:table-props="tableProps"
|
||||||
:table-data="tableData"
|
:table-data="tableData"
|
||||||
@emitFun="inputChange"
|
@emitFun="inputChange"
|
||||||
@ -25,7 +26,6 @@
|
|||||||
/>
|
/>
|
||||||
<<span>/template</span>>
|
<<span>/template</span>>
|
||||||
<script>
|
<script>
|
||||||
import inputArea from './components/InputArea.vue'
|
|
||||||
const tableProps = [
|
const tableProps = [
|
||||||
{
|
{
|
||||||
prop: 'testItems',
|
prop: 'testItems',
|
||||||
@ -101,44 +101,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
inputArea 参考代码:
|
|
||||||
<template>
|
|
||||||
<div class="tableInner">
|
|
||||||
<el-input v-model="list[itemProp]" @blur="changeInput" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'InputArea',
|
|
||||||
props: {
|
|
||||||
injectData: {
|
|
||||||
type: Object,
|
|
||||||
default: () => ({})
|
|
||||||
},
|
|
||||||
itemProp: {
|
|
||||||
type: String
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
list: this.injectData
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
changeInput() {
|
|
||||||
console.log(this.list)
|
|
||||||
this.$emit('emitData', this.list)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style scoped>
|
|
||||||
.tableInner .el-input__inner {
|
|
||||||
border: none;
|
|
||||||
padding: 0;
|
|
||||||
height: 33px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</pre>
|
</pre>
|
||||||
</div>
|
</div>
|
||||||
</el-collapse-item>
|
</el-collapse-item>
|
||||||
@ -147,6 +109,7 @@
|
|||||||
<div class="demo-box">
|
<div class="demo-box">
|
||||||
<h3>表格底部新增按钮</h3>
|
<h3>表格底部新增按钮</h3>
|
||||||
<base-table
|
<base-table
|
||||||
|
border
|
||||||
:table-props="tableProps2"
|
:table-props="tableProps2"
|
||||||
:table-data="tableData2"
|
:table-data="tableData2"
|
||||||
:add-button-show="addButtonShow"
|
:add-button-show="addButtonShow"
|
||||||
@ -171,7 +134,6 @@
|
|||||||
/>
|
/>
|
||||||
<<span>/template</span>>
|
<<span>/template</span>>
|
||||||
<script>
|
<script>
|
||||||
import inputArea from './components/InputArea.vue'
|
|
||||||
const tableProps = [
|
const tableProps = [
|
||||||
{
|
{
|
||||||
prop: 'testItems',
|
prop: 'testItems',
|
||||||
|
@ -17,18 +17,11 @@
|
|||||||
第一列的图标可以控制表格列的显示和隐藏。序号列的宽度可以自定义,默认为70,参数为<code>pageWidth</code>,类型为<code
|
第一列的图标可以控制表格列的显示和隐藏。序号列的宽度可以自定义,默认为70,参数为<code>pageWidth</code>,类型为<code
|
||||||
>Number</code
|
>Number</code
|
||||||
>
|
>
|
||||||
。默认序号列是左侧固定的,如果需要取消固定可以传入参数<code>cancelPageFixed</code>值为<code>true</code>,elementUI提供了<code>doLayout</code>函数,对
|
|
||||||
Table 进行重新布局。当 Table
|
|
||||||
或其祖先元素由隐藏切换为显示时,可能需要调用此方法,具体用法如下demo。<code
|
|
||||||
>cancelPageFixed</code
|
|
||||||
><code>doLayout</code>函数在组件code-brick-zj0.0.6版本支持。
|
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<pre>
|
<pre>
|
||||||
<<span>template</span>>
|
<<span>template</span>>
|
||||||
<base-table
|
<base-table
|
||||||
ref="baseTable1"
|
|
||||||
id="baseTable"
|
|
||||||
:table-props="tableProps"
|
:table-props="tableProps"
|
||||||
:page="1"
|
:page="1"
|
||||||
:limit="20"
|
:limit="20"
|
||||||
@ -92,11 +85,6 @@
|
|||||||
}]
|
}]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
doLayout() {
|
|
||||||
this.$refs.baseTable1.doLayout('baseTable')
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
</pre>
|
</pre>
|
||||||
@ -105,14 +93,14 @@
|
|||||||
</el-collapse>
|
</el-collapse>
|
||||||
</div>
|
</div>
|
||||||
<div class="demo-box">
|
<div class="demo-box">
|
||||||
<h3>不带边框和带斑马纹表格</h3>
|
<h3>带边框和斑马纹表格</h3>
|
||||||
<base-table
|
<base-table
|
||||||
:table-props="tableProps"
|
:table-props="tableProps"
|
||||||
:table-data="tableData"
|
:table-data="tableData"
|
||||||
stripe
|
stripe
|
||||||
:page="1"
|
:page="1"
|
||||||
:limit="20"
|
:limit="20"
|
||||||
:cancel-border="true"
|
border
|
||||||
/>
|
/>
|
||||||
<el-collapse>
|
<el-collapse>
|
||||||
<el-collapse-item title="显示代码">
|
<el-collapse-item title="显示代码">
|
||||||
@ -120,7 +108,7 @@
|
|||||||
<code>stripe</code>属性可以创建带斑马纹的表格。它接受一个
|
<code>stripe</code>属性可以创建带斑马纹的表格。它接受一个
|
||||||
<code>Boolean</code>,默认为<code>false</code>,
|
<code>Boolean</code>,默认为<code>false</code>,
|
||||||
设置为<code>true</code>即为启用。默认情况下,Table
|
设置为<code>true</code>即为启用。默认情况下,Table
|
||||||
组件是有竖直方向的边框的,如果需要取消,可以使用<code>cancel-border</code>属性,它接受一个<code>Boolean</code>,设置为<code>true</code>即可取消边框,<code>cancel-border</code>属性在组件code-brick-zj0.0.5版本支持。
|
组件是不具有竖直方向的边框的,如果需要,可以使用<code>border</code>属性,它接受一个<code>Boolean</code>,设置为<code>true</code>即可启用。
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<pre>
|
<pre>
|
||||||
@ -131,7 +119,7 @@
|
|||||||
:limit="20"
|
:limit="20"
|
||||||
:table-data="tableData"
|
:table-data="tableData"
|
||||||
stripe
|
stripe
|
||||||
:cancel-border="true"
|
border
|
||||||
/>
|
/>
|
||||||
<<span>/template</span>>
|
<<span>/template</span>>
|
||||||
</pre>
|
</pre>
|
||||||
@ -330,11 +318,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="demo-box">
|
<div class="demo-box">
|
||||||
<h3>单选</h3>
|
<h3>单选</h3>
|
||||||
<el-button size="small" @click="setCurrent(1)">选中第二行</el-button>
|
|
||||||
<el-button size="small" @click="setCurrent(-1)">取消选中</el-button>
|
|
||||||
<base-table
|
<base-table
|
||||||
ref="palletTable1"
|
|
||||||
id="palletTable"
|
|
||||||
:table-props="tableProps"
|
:table-props="tableProps"
|
||||||
:table-data="tableData"
|
:table-data="tableData"
|
||||||
:page="1"
|
:page="1"
|
||||||
@ -348,16 +332,11 @@
|
|||||||
Table
|
Table
|
||||||
组件提供了单选的支持,只需要配置<code>highlight-current-row</code>属性即可实现单选。
|
组件提供了单选的支持,只需要配置<code>highlight-current-row</code>属性即可实现单选。
|
||||||
之后由<code>current-change</code>事件来管理选中时触发的事件,它会传入<code>currentRow</code>,<code>oldCurrentRow</code>。
|
之后由<code>current-change</code>事件来管理选中时触发的事件,它会传入<code>currentRow</code>,<code>oldCurrentRow</code>。
|
||||||
使用按钮选中取消,必须要传id,id的值是唯一的,id的值需要和<code>setCurrent</code>中第一参数一样。
|
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<pre>
|
<pre>
|
||||||
<el-button size="small" @click="setCurrent(1)">选中第二行</el-button>
|
|
||||||
<el-button size="small" @click="setCurrent(-1)">取消选中</el-button>
|
|
||||||
<<span>template</span>>
|
<<span>template</span>>
|
||||||
<base-table
|
<base-table
|
||||||
ref="palletTable1"
|
|
||||||
id="palletTable"
|
|
||||||
:table-props="tableProps"
|
:table-props="tableProps"
|
||||||
:table-data="tableData"
|
:table-data="tableData"
|
||||||
:page="1"
|
:page="1"
|
||||||
@ -366,10 +345,6 @@
|
|||||||
@current-change="handleCurrentChange"
|
@current-change="handleCurrentChange"
|
||||||
/>
|
/>
|
||||||
<<span>/template</span>>
|
<<span>/template</span>>
|
||||||
methods:
|
|
||||||
setCurrent(index) {
|
|
||||||
this.$refs.palletTable1.setCurrent('palletTable', index)
|
|
||||||
}
|
|
||||||
</pre>
|
</pre>
|
||||||
</div>
|
</div>
|
||||||
</el-collapse-item>
|
</el-collapse-item>
|
||||||
@ -519,11 +494,6 @@
|
|||||||
详情--detail 编辑---edit
|
详情--detail 编辑---edit
|
||||||
删除---delete,以上三个是显示图标,其他按钮显示中文字字,图标按上述传,自动加载图标。
|
删除---delete,以上三个是显示图标,其他按钮显示中文字字,图标按上述传,自动加载图标。
|
||||||
</p>
|
</p>
|
||||||
<p>
|
|
||||||
showTip:默认是禁用的,如部分按钮文字过长,需缩短文字,又怕意思不清,
|
|
||||||
可以加showTip来显示,具体样式见 开始 按钮。
|
|
||||||
showParam:是控制按钮能否被点击,可以根据表格中的字段,按规则来控制按钮。
|
|
||||||
</p>
|
|
||||||
<base-table :table-props="tableProps" :table-data="tableData">
|
<base-table :table-props="tableProps" :table-data="tableData">
|
||||||
<method-btn
|
<method-btn
|
||||||
v-if="tableBtn.length"
|
v-if="tableBtn.length"
|
||||||
@ -617,7 +587,6 @@
|
|||||||
{
|
{
|
||||||
type: 'start',
|
type: 'start',
|
||||||
btnName: '开始',
|
btnName: '开始',
|
||||||
showTip: '开始生产',
|
|
||||||
showParam: {
|
showParam: {
|
||||||
type: '&',
|
type: '&',
|
||||||
data: [
|
data: [
|
||||||
@ -889,7 +858,6 @@ const tableBtn = [
|
|||||||
{
|
{
|
||||||
type: 'start',
|
type: 'start',
|
||||||
btnName: '开始',
|
btnName: '开始',
|
||||||
showTip: '开始生产',
|
|
||||||
showParam: {
|
showParam: {
|
||||||
type: '&',
|
type: '&',
|
||||||
data: [
|
data: [
|
||||||
@ -1200,8 +1168,8 @@ export default {
|
|||||||
}
|
}
|
||||||
return ''
|
return ''
|
||||||
},
|
},
|
||||||
setCurrent(index) {
|
setCurrent(row) {
|
||||||
this.$refs.palletTable1.setCurrent('palletTable', index)
|
this.$refs.singleTable.setCurrentRow(this.tableData[row])
|
||||||
},
|
},
|
||||||
handleCurrentChange(val) {
|
handleCurrentChange(val) {
|
||||||
console.log(val)
|
console.log(val)
|
||||||
|
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user