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",
|
||||
"version": "0.1.0",
|
||||
"dependencies": {
|
||||
"code-brick-zj": "^1.0.2",
|
||||
"code-brick-zj": "^0.0.1",
|
||||
"core-js": "^3.8.3",
|
||||
"element-ui": "^2.15.12",
|
||||
"vue": "^2.6.14",
|
||||
@ -4007,9 +4007,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/code-brick-zj": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/code-brick-zj/-/code-brick-zj-1.1.0.tgz",
|
||||
"integrity": "sha512-J6S5ILHdweYMiEfpLuU8EvgQNEJ4EMAvjBAbLRtpGOBtXNX4U7z+IB9jDu2FE1TdkOaKJUpVLubgZwxkGzXNaA=="
|
||||
"version": "0.0.1",
|
||||
"resolved": "https://registry.npmjs.org/code-brick-zj/-/code-brick-zj-0.0.1.tgz",
|
||||
"integrity": "sha512-XLvQEoiVWESDirkMKVKCIdH1jW3drkSS472uMWd1m6Ul5UVTUAiJvBQ15kEo+L7w8Zt7cC5ErF+laYHhNeoaIA=="
|
||||
},
|
||||
"node_modules/color-convert": {
|
||||
"version": "1.9.3",
|
||||
@ -14473,9 +14473,9 @@
|
||||
}
|
||||
},
|
||||
"code-brick-zj": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/code-brick-zj/-/code-brick-zj-1.1.0.tgz",
|
||||
"integrity": "sha512-J6S5ILHdweYMiEfpLuU8EvgQNEJ4EMAvjBAbLRtpGOBtXNX4U7z+IB9jDu2FE1TdkOaKJUpVLubgZwxkGzXNaA=="
|
||||
"version": "0.0.1",
|
||||
"resolved": "https://registry.npmjs.org/code-brick-zj/-/code-brick-zj-0.0.1.tgz",
|
||||
"integrity": "sha512-XLvQEoiVWESDirkMKVKCIdH1jW3drkSS472uMWd1m6Ul5UVTUAiJvBQ15kEo+L7w8Zt7cC5ErF+laYHhNeoaIA=="
|
||||
},
|
||||
"color-convert": {
|
||||
"version": "1.9.3",
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
"lint": "vue-cli-service lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"code-brick-zj": "^1.0.2",
|
||||
"code-brick-zj": "^0.0.1",
|
||||
"core-js": "^3.8.3",
|
||||
"element-ui": "^2.15.12",
|
||||
"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 }
|
||||
]
|
||||
|
||||
|
||||
@ -3,79 +3,7 @@
|
||||
<p>
|
||||
组件包目前封装常用的四个组件:表格，搜索区域，分页，对话框。包npm地址为：https://www.npmjs.com/package/code-brick-zj。
|
||||
</p>
|
||||
<p>文档当前使用的组件包的版本为：1.1.0</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>
|
||||
<p>文档当前使用的组件包的版本为：0.0.3</p>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
@ -2,10 +2,6 @@
|
||||
<div class="search-bar">
|
||||
<div class="demo-box">
|
||||
<h3>input输入框(size默认small高度是32px)</h3>
|
||||
<p>
|
||||
部分业务需要输入框必填， 可以设置required的值为true来显示红星，
|
||||
判断逻辑还是得在js中写，required只是样式上显示红星
|
||||
</p>
|
||||
<div style="height: 50px">
|
||||
<SearchBar :formConfigs="formConfig1" />
|
||||
</div>
|
||||
@ -26,8 +22,7 @@
|
||||
type: 'input',
|
||||
label: '姓名',
|
||||
placeholder: 'width不传默认200px',
|
||||
param: 'xm1',
|
||||
required: true
|
||||
param: 'xm1'
|
||||
},
|
||||
{
|
||||
type: 'input',
|
||||
@ -64,9 +59,6 @@
|
||||
<h3>
|
||||
select下拉框(选项默认是id和name,可以通过labelField，valueField去改取值的key)
|
||||
</h3>
|
||||
<p>
|
||||
可以通过multiple:true来开启多选，collapseTags:true来将选中值按文字的形式展示，multipleLimit来设置多选时用户最多可以选择的项目数
|
||||
</p>
|
||||
<div style="height: 50px">
|
||||
<SearchBar
|
||||
:formConfigs="formConfig2"
|
||||
@ -126,16 +118,10 @@
|
||||
label: '性别',
|
||||
selectOptions: [
|
||||
{ id: 1, name: '男(可多选)' },
|
||||
{ id: 2, name: '女' },
|
||||
{ id: 3, name: '未知1' },
|
||||
{ id: 4, name: '保密' },
|
||||
{ id: 5, name: '保密2' }
|
||||
{ id: 2, name: '女' }
|
||||
],
|
||||
placeholder: '多选',
|
||||
param: 'xb4',
|
||||
multiple: true,
|
||||
collapseTags: true,
|
||||
multipleLimit: 3
|
||||
multiple: true
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
@ -159,7 +145,7 @@
|
||||
</div>
|
||||
<div class="demo-box">
|
||||
<h3>Cascader 级联选择器</h3>
|
||||
<div>
|
||||
<div style="height: 120px">
|
||||
<SearchBar
|
||||
:formConfigs="formConfig22"
|
||||
@headBtnClick="headBtnClickCascader"
|
||||
@ -167,7 +153,7 @@
|
||||
</div>
|
||||
<el-collapse>
|
||||
<el-collapse-item title="显示代码">
|
||||
<div class="description">搜索条件过多的，显示不下自动换行</div>
|
||||
<div class="description"></div>
|
||||
<div>
|
||||
<pre>
|
||||
<<span>template</span>>
|
||||
@ -603,9 +589,6 @@
|
||||
btnName: '重置',
|
||||
name: 'reset'
|
||||
},
|
||||
{
|
||||
type: 'separate'
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: '打印',
|
||||
@ -1154,8 +1137,7 @@ export default {
|
||||
type: 'input',
|
||||
label: '姓名',
|
||||
placeholder: 'width不传默认200px',
|
||||
param: 'xm1',
|
||||
required: true
|
||||
param: 'xm1'
|
||||
},
|
||||
{
|
||||
type: 'input',
|
||||
@ -1217,16 +1199,10 @@ export default {
|
||||
label: '性别',
|
||||
selectOptions: [
|
||||
{ id: 1, name: '男(可多选)' },
|
||||
{ id: 2, name: '女' },
|
||||
{ id: 3, name: '未知1' },
|
||||
{ id: 4, name: '保密' },
|
||||
{ id: 5, name: '保密2' }
|
||||
{ id: 2, name: '女' }
|
||||
],
|
||||
placeholder: '多选',
|
||||
param: 'xb4',
|
||||
multiple: true,
|
||||
collapseTags: true,
|
||||
multipleLimit: 3
|
||||
multiple: true
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
@ -1342,16 +1318,6 @@ export default {
|
||||
endPlaceholder: '结束时间',
|
||||
defaultSelect: ['2022-08-11', '2022-08-12'],
|
||||
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: [
|
||||
@ -1477,9 +1443,6 @@ export default {
|
||||
btnName: '重置',
|
||||
name: 'reset'
|
||||
},
|
||||
{
|
||||
type: 'separate'
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: '打印',
|
||||
@ -1491,8 +1454,7 @@ export default {
|
||||
type: 'button',
|
||||
btnName: '成功',
|
||||
name: 'success',
|
||||
color: 'success',
|
||||
plain: true
|
||||
color: 'success'
|
||||
},
|
||||
{
|
||||
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">
|
||||
<h3>表格内嵌输入框</h3>
|
||||
<base-table
|
||||
border
|
||||
:table-props="tableProps"
|
||||
:table-data="tableData"
|
||||
@emitFun="inputChange"
|
||||
@ -25,7 +26,6 @@
|
||||
/>
|
||||
<<span>/template</span>>
|
||||
<script>
|
||||
import inputArea from './components/InputArea.vue'
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'testItems',
|
||||
@ -101,44 +101,6 @@
|
||||
}
|
||||
}
|
||||
</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>
|
||||
</div>
|
||||
</el-collapse-item>
|
||||
@ -147,6 +109,7 @@
|
||||
<div class="demo-box">
|
||||
<h3>表格底部新增按钮</h3>
|
||||
<base-table
|
||||
border
|
||||
:table-props="tableProps2"
|
||||
:table-data="tableData2"
|
||||
:add-button-show="addButtonShow"
|
||||
@ -171,7 +134,6 @@
|
||||
/>
|
||||
<<span>/template</span>>
|
||||
<script>
|
||||
import inputArea from './components/InputArea.vue'
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'testItems',
|
||||
|
||||
@ -17,18 +17,11 @@
|
||||
第一列的图标可以控制表格列的显示和隐藏。序号列的宽度可以自定义，默认为70，参数为<code>pageWidth</code>,类型为<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>
|
||||
<pre>
|
||||
<<span>template</span>>
|
||||
<base-table
|
||||
ref="baseTable1"
|
||||
id="baseTable"
|
||||
:table-props="tableProps"
|
||||
:page="1"
|
||||
:limit="20"
|
||||
@ -92,11 +85,6 @@
|
||||
}]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
doLayout() {
|
||||
this.$refs.baseTable1.doLayout('baseTable')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</pre>
|
||||
@ -105,14 +93,14 @@
|
||||
</el-collapse>
|
||||
</div>
|
||||
<div class="demo-box">
|
||||
<h3>不带边框和带斑马纹表格</h3>
|
||||
<h3>带边框和斑马纹表格</h3>
|
||||
<base-table
|
||||
:table-props="tableProps"
|
||||
:table-data="tableData"
|
||||
stripe
|
||||
:page="1"
|
||||
:limit="20"
|
||||
:cancel-border="true"
|
||||
border
|
||||
/>
|
||||
<el-collapse>
|
||||
<el-collapse-item title="显示代码">
|
||||
@ -120,7 +108,7 @@
|
||||
<code>stripe</code>属性可以创建带斑马纹的表格。它接受一个
|
||||
<code>Boolean</code>，默认为<code>false</code>，
|
||||
设置为<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>
|
||||
<pre>
|
||||
@ -131,7 +119,7 @@
|
||||
:limit="20"
|
||||
:table-data="tableData"
|
||||
stripe
|
||||
:cancel-border="true"
|
||||
border
|
||||
/>
|
||||
<<span>/template</span>>
|
||||
</pre>
|
||||
@ -330,11 +318,7 @@
|
||||
</div>
|
||||
<div class="demo-box">
|
||||
<h3>单选</h3>
|
||||
<el-button size="small" @click="setCurrent(1)">选中第二行</el-button>
|
||||
<el-button size="small" @click="setCurrent(-1)">取消选中</el-button>
|
||||
<base-table
|
||||
ref="palletTable1"
|
||||
id="palletTable"
|
||||
:table-props="tableProps"
|
||||
:table-data="tableData"
|
||||
:page="1"
|
||||
@ -348,16 +332,11 @@
|
||||
Table
|
||||
组件提供了单选的支持，只需要配置<code>highlight-current-row</code>属性即可实现单选。
|
||||
之后由<code>current-change</code>事件来管理选中时触发的事件，它会传入<code>currentRow</code>，<code>oldCurrentRow</code>。
|
||||
使用按钮选中取消，必须要传id,id的值是唯一的，id的值需要和<code>setCurrent</code>中第一参数一样。
|
||||
</div>
|
||||
<div>
|
||||
<pre>
|
||||
<el-button size="small" @click="setCurrent(1)">选中第二行</el-button>
|
||||
<el-button size="small" @click="setCurrent(-1)">取消选中</el-button>
|
||||
<<span>template</span>>
|
||||
<base-table
|
||||
ref="palletTable1"
|
||||
id="palletTable"
|
||||
:table-props="tableProps"
|
||||
:table-data="tableData"
|
||||
:page="1"
|
||||
@ -366,10 +345,6 @@
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
<<span>/template</span>>
|
||||
methods:
|
||||
setCurrent(index) {
|
||||
this.$refs.palletTable1.setCurrent('palletTable', index)
|
||||
}
|
||||
</pre>
|
||||
</div>
|
||||
</el-collapse-item>
|
||||
@ -519,11 +494,6 @@
|
||||
详情--detail 编辑---edit
|
||||
删除---delete,以上三个是显示图标，其他按钮显示中文字字，图标按上述传，自动加载图标。
|
||||
</p>
|
||||
<p>
|
||||
showTip:默认是禁用的，如部分按钮文字过长，需缩短文字，又怕意思不清，
|
||||
可以加showTip来显示，具体样式见 开始 按钮。
|
||||
showParam:是控制按钮能否被点击，可以根据表格中的字段，按规则来控制按钮。
|
||||
</p>
|
||||
<base-table :table-props="tableProps" :table-data="tableData">
|
||||
<method-btn
|
||||
v-if="tableBtn.length"
|
||||
@ -617,7 +587,6 @@
|
||||
{
|
||||
type: 'start',
|
||||
btnName: '开始',
|
||||
showTip: '开始生产',
|
||||
showParam: {
|
||||
type: '&',
|
||||
data: [
|
||||
@ -889,7 +858,6 @@ const tableBtn = [
|
||||
{
|
||||
type: 'start',
|
||||
btnName: '开始',
|
||||
showTip: '开始生产',
|
||||
showParam: {
|
||||
type: '&',
|
||||
data: [
|
||||
@ -1200,8 +1168,8 @@ export default {
|
||||
}
|
||||
return ''
|
||||
},
|
||||
setCurrent(index) {
|
||||
this.$refs.palletTable1.setCurrent('palletTable', index)
|
||||
setCurrent(row) {
|
||||
this.$refs.singleTable.setCurrentRow(this.tableData[row])
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
console.log(val)
|
||||
|
||||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user