@@ -0,0 +1,12 @@ | |||||
root = true | |||||
[*] | |||||
indent_style = space | |||||
indent_size = 2 | |||||
end_of_line = lf | |||||
charset = utf-8 | |||||
trim_trailing_whitespace = true | |||||
insert_final_newline = true | |||||
[*.md] | |||||
trim_trailing_whitespace = false |
@@ -0,0 +1,16 @@ | |||||
// https://eslint.org/docs/user-guide/configuring | |||||
module.exports = { | |||||
"extends": [ | |||||
"standard", | |||||
"plugin:vue/recommended" | |||||
], | |||||
"rules": { | |||||
"semi": "off", | |||||
"no-new": "off", | |||||
"vue/valid-template-root": "off", | |||||
"vue/require-default-prop": "off", | |||||
"vue/require-prop-types": "off" | |||||
} | |||||
} |
@@ -0,0 +1,23 @@ | |||||
.DS_Store | |||||
node_modules | |||||
/dist | |||||
# local env files | |||||
.env.local | |||||
.env.*.local | |||||
# Log files | |||||
npm-debug.log* | |||||
yarn-debug.log* | |||||
yarn-error.log* | |||||
pnpm-debug.log* | |||||
# Editor directories and files | |||||
.idea | |||||
#.vscode | |||||
*.suo | |||||
*.ntvs* | |||||
*.njsproj | |||||
*.sln | |||||
*.sw? |
@@ -0,0 +1,13 @@ | |||||
# 忽略目录 | |||||
example/ | |||||
dist/ | |||||
src/ | |||||
node_modules/ | |||||
.vscode/ | |||||
# 忽略指定文件 | |||||
vue.config.js | |||||
babel.config.js | |||||
.eslintrc.js | |||||
.editorconfig | |||||
*.map |
@@ -0,0 +1,19 @@ | |||||
{ | |||||
// 使用 IntelliSense 了解相关属性。 | |||||
// 悬停以查看现有属性的描述。 | |||||
// 欲了解更多信息,请访问: https://go.microsoft.com/fwlink/?linkid=830387 | |||||
"version": "0.2.0", | |||||
"configurations": [ | |||||
{ | |||||
"type": "chrome", | |||||
"request": "launch", | |||||
"name": "vuejs: chrome", | |||||
"url": "http://localhost:8080", | |||||
"webRoot": "${workspaceFolder}/src", | |||||
"breakOnLoad": true, | |||||
"sourceMapPathOverrides": { | |||||
"webpack:///src/*": "${webRoot}/*" | |||||
} | |||||
}, | |||||
] | |||||
} |
@@ -0,0 +1,28 @@ | |||||
/** | |||||
项目统一格式化,禁止使用prettier,beautify格式化代码 | |||||
*/ | |||||
{ | |||||
"editor.tabSize": 2, | |||||
"editor.formatOnSave": true, | |||||
"editor.codeActionsOnSave": { | |||||
"source.fixAll.eslint": true | |||||
}, | |||||
"eslint.format.enable": false, | |||||
"eslint.options": { | |||||
"configFile": "./.eslintrc.js" | |||||
}, | |||||
"vetur.format.options.tabSize": 2, | |||||
"vetur.format.options.useTabs": false, | |||||
// ----1使用prettie格式化工具---- | |||||
"vetur.format.defaultFormatter.html": "prettyhtml", | |||||
"vetur.format.defaultFormatter.js": "prettier", | |||||
"vetur.format.defaultFormatterOptions": { | |||||
"prettier": { | |||||
"printWidth": 120, | |||||
"singleQuote": true, | |||||
"semi": false, | |||||
//将>多行JSX元素放在最后一行的末尾,而不是单独放在下一行 | |||||
"jsxBracketSameLine": false | |||||
} | |||||
} | |||||
} |
@@ -0,0 +1,405 @@ | |||||
# kr-print-designer | |||||
## 简介 | |||||
一个基于 Vue、ElementUi、C-Lodop 的打印模板设计器。实现打印模板的设计、预览和打印功能。[示例](https://myliuxia.github.io/demo/kr-print-designer/index.html) | |||||
## 安装 | |||||
Vue 项目中引用该组件 | |||||
``` | |||||
npm install kr-print-designer | |||||
``` | |||||
打印功能基于 C-Lodop 打印控件,需前往[下载](http://www.lodop.net/download.html) | |||||
## 引入 | |||||
main.js | |||||
```javascript | |||||
import Vue from "vue"; | |||||
import KrPrintDesigner from "kr-print-designer"; | |||||
import "kr-print-designer/lib/kr-print-designer.css"; | |||||
Vue.use(KrPrintDesigner); | |||||
``` | |||||
demo.vue | |||||
```html | |||||
<template> | |||||
<div id="app"> | |||||
<kr-print-designer | |||||
:temp-value="value" | |||||
:widget-options="widgets" | |||||
:lodop-license="licenseInfo" | |||||
@save="handleSave" | |||||
/> | |||||
</div> | |||||
</template> | |||||
``` | |||||
lodop 打印/预览及设置 lodop 注册信息方法使用 | |||||
```javascript | |||||
// 直接打印 | |||||
this.$lodop.print(temp, data); | |||||
// 预览打印内容 | |||||
this.$lodop.preview(temp, data); | |||||
// 预览打印模板 | |||||
this.$lodop.previewTemp(temp); | |||||
// 设置Lodop产品注册信息 | |||||
this.$lodop.setLicenses(licenseInfo); | |||||
``` | |||||
## Attributes | |||||
| 参数 | 说明 | 类型 | 默认值 | | |||||
| ------------- | ---------------- | ------ | ------ | | |||||
| tempValue | 模板对象 | Object | ; | | |||||
| widgetOptions | 模板设计选项配置 | Array | [] | | |||||
### tempValue 参数详解 | |||||
#### 参数示例: | |||||
```javascript | |||||
{ | |||||
title: 'demo', | |||||
width: 750, | |||||
height: 550, | |||||
pageWidth: 750, | |||||
pageHeight: 550, | |||||
tempItems: [], | |||||
} | |||||
``` | |||||
#### 参数说明: | |||||
tempValue 为打印模板对象, 对象中参数具体解析如下: | |||||
##### tempValue: | |||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | |||||
| ---------- | ------------------ | ------ | ------ | ------ | | |||||
| title | 模板名称 | String | —— | —— | | |||||
| width | 模板宽度 | Number | —— | 750 | | |||||
| height | 模板高度 | Number | —— | 550 | | |||||
| pageWidth | 模板纸张宽度(mm) | Number | —— | 750 | | |||||
| pageHeight | 模板纸张高度(mm) | Number | —— | 550 | | |||||
| tempItems | 模板打印项内容 | Array | —— | [] | | |||||
### widgetOptions 参数详解 | |||||
#### 参数示例: | |||||
```javascript | |||||
[ | |||||
{ | |||||
type: "braid-txt", | |||||
isEdit: true, | |||||
title: "自定义文本", | |||||
value: "自定义文本", | |||||
defaultValue: "自定义文本" | |||||
}, | |||||
{ | |||||
type: "braid-txt", | |||||
isEdit: false, | |||||
title: "公司名称", | |||||
value: "{公司名称}", | |||||
defaultValue: "九州科瑞", | |||||
name: "companyName" | |||||
}, | |||||
{ | |||||
type: "bar-code", | |||||
title: "订单编号(条码)", | |||||
value: "{orderNumber}", | |||||
defaultValue: "1234567890", | |||||
name: "orderNumber" | |||||
lodopStyle: { QRCodeVersion: '1', QRCodeErrorLevel: 'L' }, | |||||
}, | |||||
{ | |||||
type: "braid-html", | |||||
title: "分页", | |||||
value: "{第##页/共##页}", | |||||
defaultValue: | |||||
"<font ><span tdata='pageNO'>第##页</span>/<span tdata='pageCount'>共##页</span></font>" | |||||
}, | |||||
{ | |||||
type: "braid-image", | |||||
title: "logo", | |||||
value: "http://192.168.7.229/syy/file/files/view/5f9fb42dabebb4049ffbd019" | |||||
}, | |||||
{ | |||||
type: "braid-table", | |||||
title: "商品明细", | |||||
name: "details", | |||||
value: "{details}", | |||||
defaultValue: [ | |||||
{ | |||||
productName: "苹果ipone11pro", | |||||
skuName: "iphone11pro256g", | |||||
specModel: "165L", | |||||
quantity: 3, | |||||
price: "12.00" | |||||
}, | |||||
{ | |||||
productName: "苹果ipone11pro", | |||||
skuName: "iphone11pro124g", | |||||
specModel: "165L", | |||||
quantity: 3, | |||||
price: "12.00" | |||||
} | |||||
], | |||||
columnsAttr: [ | |||||
{ | |||||
title: "产品名称", | |||||
value: "{产品名称}", | |||||
name: "productName" | |||||
}, | |||||
{ | |||||
title: "sku名称", | |||||
value: "{sku名称}", | |||||
name: "skuName" | |||||
}, | |||||
{ | |||||
title: "规格型号", | |||||
value: "{规格型号}", | |||||
name: "specModel" | |||||
}, | |||||
{ | |||||
title: "数量", | |||||
value: "{数量}", | |||||
name: "quantity" | |||||
}, | |||||
{ | |||||
title: "单价", | |||||
value: "{单价}", | |||||
name: "price" | |||||
} | |||||
] | |||||
} | |||||
]; | |||||
``` | |||||
#### 参数说明: | |||||
widgetOptions 为设计打印模板的打印项配置, 打印项有多种类型,各种打印项参数具体解析如下: | |||||
#### braid-txt | |||||
##### Attributes: | |||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | |||||
| ------------ | ------------------------------------------- | ------- | ------------------------------------------------------------- | ------ | | |||||
| type | 模板类型 | String | braid-txt / braid-table / braid-html / braid-image / bar-code | —— | | |||||
| isEdit | 是否可编辑 | Boolean | true / false | —— | | |||||
| dragable | 是否可拖拽 | Boolean | true / false | true | | |||||
| resizable | 尺寸是否可变 | Boolean | true / false | true | | |||||
| width | 打印项宽度(px) | Number | —— | 120 | | |||||
| height | 打印项高度(px) | Number | —— | 60 | | |||||
| left | 左偏移量(px) | Number | —— | 50 | | |||||
| top | 上偏移量(px) | Number | —— | 0 | | |||||
| title | 打印项名称 | String | —— | —— | | |||||
| value | 打印项内容 | String | —— | —— | | |||||
| defaultValue | 打印项默认内容 | String | —— | —— | | |||||
| name | 动态打印项数据名称(对应打印数据 key-name) | String | —— | '' | | |||||
| lodopStyle | LODOP 默认打印项样式 | Object | —— | {} | | |||||
| style | 打印项样式 | Object | —— | {} | | |||||
##### Style: | |||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | |||||
| --------- | ------------------ | ------- | -------------------------------------------------------------- | --------- | | |||||
| zIndex | 层级 | Number | —— | 0 | | |||||
| FontSize | 字体大小(pt) | Number | —— | 9 | | |||||
| FontColor | 字体颜色 | String | —— | "#000000" | | |||||
| Bold | 字体是否加粗 | Boolean | true / false(是 / 否) | false | | |||||
| Italic | 字体是否设置斜体 | Boolean | true / false(是 / 否) | false | | |||||
| Underline | 字体是否设置下划线 | Boolean | true / false(是 / 否) | false | | |||||
| Alignment | 文字对齐方式 | String | "left" / "center" / "right"(左靠齐 / 居中/ 右靠齐) | left | | |||||
| ItemType | 打印项类型 | Number | 0 / 1 / 2 / 3 / 4(普通项 / 页眉页脚/ 页号项/ 页数项/ 多页项) | 0 | | |||||
#### braid-image | |||||
##### Attributes: | |||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | |||||
| ------------ | ------------------------------------------- | ------- | ------------------------------------------------------------- | ------ | | |||||
| type | 模板类型 | String | braid-txt / braid-table / braid-html / braid-image / bar-code | —— | | |||||
| isEdit | 是否可编辑 | Boolean | true / false | false | | |||||
| dragable | 是否可拖拽 | Boolean | true / false | true | | |||||
| resizable | 尺寸是否可变 | Boolean | true / false | true | | |||||
| width | 打印项宽度(px) | Number | —— | 120 | | |||||
| height | 打印项高度(px) | Number | —— | 60 | | |||||
| left | 左偏移量(px) | Number | —— | 50 | | |||||
| top | 上偏移量(px) | Number | —— | 0 | | |||||
| title | 打印项名称 | String | —— | —— | | |||||
| value | 图片路劲 | String | —— | —— | | |||||
| defaultValue | 图片默认路劲 | String | —— | —— | | |||||
| name | 动态打印项数据名称(对应打印数据 key-name) | String | —— | '' | | |||||
| lodopStyle | LODOP 默认打印项样式 | Object | —— | {} | | |||||
| style | 打印项样式 | Object | —— | {} | | |||||
##### Style: | |||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | |||||
| -------- | ---------- | ------ | -------------------------------------------------------------- | ------ | | |||||
| zIndex | 层级 | Number | —— | 0 | | |||||
| ItemType | 打印项类型 | Number | 0 / 1 / 2 / 3 / 4(普通项 / 页眉页脚/ 页号项/ 页数项/ 多页项) | 0 | | |||||
#### braid-html | |||||
##### Attributes: | |||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | |||||
| ------------ | ------------------------------------------- | ------- | ------------------------------------------------------------- | ---------------- | | |||||
| type | 模板类型 | String | braid-txt / braid-table / braid-html / braid-image / bar-code | —— | | |||||
| isEdit | 是否可编辑 | Boolean | true / false | false | | |||||
| dragable | 是否可拖拽 | Boolean | true / false | true | | |||||
| resizable | 尺寸是否可变 | Boolean | true / false | true | | |||||
| width | 打印项宽度(px) | Number | —— | 120 | | |||||
| height | 打印项高度(px) | Number | —— | 60 | | |||||
| left | 左偏移量(px) | Number | —— | 50 | | |||||
| top | 上偏移量(px) | Number | —— | 0 | | |||||
| title | 打印项名称 | String | —— | "html" | | |||||
| value | html 内容 | String | —— | "<div>html<div>" | | |||||
| defaultValue | 默认 html | String | —— | "<div>html<div>" | | |||||
| name | 动态打印项数据名称(对应打印数据 key-name) | String | —— | '' | | |||||
| lodopStyle | LODOP 默认打印项样式 | Object | —— | {} | | |||||
| style | 打印项样式 | Object | —— | {} | | |||||
##### Style: | |||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | |||||
| ------------ | ---------------------------- | ------- | -------------------------------------------------------------- | ------ | | |||||
| zIndex | 层级 | Number | —— | 0 | | |||||
| ItemType | 打印项类型 | Number | 0 / 1 / 2 / 3 / 4(普通项 / 页眉页脚/ 页号项/ 页数项/ 多页项) | 0 | | |||||
| AutoHeight | 是否设置自动高度 | Boolean | true / false(是 / 否) | 0 | | |||||
| BottomMargin | 打印项距离纸张的下边距(mm) | Number | —— | 0 | | |||||
#### braid-html | |||||
##### Attributes: | |||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | |||||
| ------------ | ------------------------------------------- | ------- | ------------------------------------------------------------- | ------ | | |||||
| type | 模板类型 | String | braid-txt / braid-table / braid-html / braid-image / bar-code | —— | | |||||
| isEdit | 是否可编辑 | Boolean | true / false | false | | |||||
| dragable | 是否可拖拽 | Boolean | true / false | true | | |||||
| resizable | 尺寸是否可变 | Boolean | true / false | true | | |||||
| width | 打印项宽度(px) | Number | —— | 240 | | |||||
| height | 打印项高度(px) | Number | —— | 60 | | |||||
| left | 左偏移量(px) | Number | —— | 50 | | |||||
| top | 上偏移量(px) | Number | —— | 10 | | |||||
| title | 打印项名称 | String | —— | "表格" | | |||||
| value | 表格数据 | Array | —— | [] | | |||||
| defaultValue | 表格默认数据 | Array | —— | [] | | |||||
| columnsAttr | 表格可选列配置 | Array | —— | [] | | |||||
| name | 动态打印项数据名称(对应打印数据 key-name) | String | —— | '' | | |||||
| lodopStyle | LODOP 默认打印项样式 | Object | —— | {} | | |||||
| style | 打印项样式 | Object | —— | {} | | |||||
##### Style: | |||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | |||||
| ------------ | ---------------------------- | ------- | ---------------------------------------------------- | --------- | | |||||
| zIndex | 层级 | Number | —— | 0 | | |||||
| FontSize | 字体大小(pt) | Number | —— | 9 | | |||||
| FontColor | 字体颜色 | String | —— | "#000000" | | |||||
| BorderColor | 边框颜色 | String | —— | "#000000" | | |||||
| Alignment | 文字对齐方式 | String | "left" / "center" / "right"(左靠齐 / 居中/ 右靠齐) | 1 | | |||||
| AutoHeight | 是否设置自动高度 | Boolean | true / false(是 / 否) | 0 | | |||||
| BottomMargin | 打印项距离纸张的下边距(mm) | Number | —— | 0 | | |||||
##### columnsAttr: | |||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | |||||
| ----- | ------------------------------------------- | ------ | ------ | ------ | | |||||
| title | 表格列名称 | String | —— | —— | | |||||
| value | 表格列数据 | String | —— | —— | | |||||
| name | 动态打印项数据名称(对应打印数据 key-name) | String | —— | —— | | |||||
#### bar-code | |||||
##### Attributes: | |||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | |||||
| ------------ | ------------------------------------------- | ------- | ------------------------------------------------------------- | ------------ | | |||||
| type | 模板类型 | String | braid-txt / braid-table / braid-html / braid-image / bar-code | —— | | |||||
| isEdit | 是否可编辑 | Boolean | true / false | false | | |||||
| dragable | 是否可拖拽 | Boolean | true / false | true | | |||||
| resizable | 尺寸是否可变 | Boolean | true / false | true | | |||||
| width | 打印项宽度(px) | Number | —— | 120 | | |||||
| height | 打印项高度(px) | Number | —— | 60 | | |||||
| left | 左偏移量(px) | Number | —— | 50 | | |||||
| top | 上偏移量(px) | Number | —— | 0 | | |||||
| title | 打印项名称 | String | —— | "条码" | | |||||
| value | html 内容 | String | —— | "1234567890" | | |||||
| defaultValue | 默认 html | String | —— | "1234567890" | | |||||
| name | 动态打印项数据名称(对应打印数据 key-name) | String | —— | '' | | |||||
| lodopStyle | LODOP 默认打印项样式 | Object | —— | {} | | |||||
| style | 打印项样式 | Object | —— | {} | | |||||
##### Style: | |||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | |||||
| ----------- | -------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | | |||||
| zIndex | 层级 | Number | —— | 0 | | |||||
| FontSize | 字体大小(pt) | Number | —— | false | | |||||
| ShowBarText | 是否显示条码值 | Boolean | false / true(不显示 / 显示) | 0 | | |||||
| codeType | 条码类型 | Number | '128A' / '128B' / '128C' / '128Auto' / 'EAN8' / 'EAN13' / 'EAN128A' / 'EAN128B' / 'EAN128C' / 'Code39' / '39Extended' / '2_5interleaved' / '2_5industrial' / '2_5matrix' / 'UPC_A' / 'UPC_E0' / 'UPC_E1' / 'UPCsupp2' / 'UPCsupp5' / 'Code93' / '93Extended' / 'MSI' / 'PostNet' / 'Codabar'/ 'QRCode'/ 'PDF417' | "Code39" | | |||||
| ItemType | 打印项类型 | Number | 0 / 1 / 2 / 3 / 4(普通项 / 页眉页脚/ 页号项/ 页数项/ 多页项) | 0 | | |||||
## Events | |||||
| 事件名称 | 说明 | 回调参数 | | |||||
| -------- | -------------- | ---------------- | | |||||
| save | 点击保存时触发 | 设计后的模板对象 | | |||||
## Methods | |||||
| 方法名称 | 说明 | 参数 | | |||||
| -------- | ------------------ | -------------------------------------------------------- | | |||||
| initTemp | 手动初始化模板数据 | Function(tempValue: object, widgetOptions:widgetOptions) | | |||||
## \$lodop 对象 Methods | |||||
| 名称 | 说明 | 参数 | | |||||
| ----------- | ------------------------------------ | ---------------------------------- | | |||||
| print | 对数据和模板解析,实现打印 | Function(temp: object, data:array) | | |||||
| preview | 对数据和模板解析,实现打印内容的预览 | Function(temp: object, data:array) | | |||||
| previewTemp | 对模板进行预览 | Function(temp: object ) | | |||||
| setLicenses | 设置 Lodop 软件产品注册信息 | Function(licenseInfo: object ) | | |||||
### setLicenses 方法详解 | |||||
#### 回调示例: | |||||
```javascript | |||||
let licenseInfo = { | |||||
strCompanyName: "某某某公司", | |||||
strLicense: "******", | |||||
strLicenseA: "", | |||||
strLicenseB: "" | |||||
}; | |||||
// 设置Lodop产品注册信息 | |||||
this.$lodop.setLicenses(licenseInfo); | |||||
``` | |||||
#### licenseInfo 对象值说明: | |||||
licenseInfo 为 Lodop 打印软件产品注册信息, 对象中参数具体解析如下: | |||||
| 值 | 说明 | 类型 | 可选值 | 默认值 | | |||||
| -------------- | ------------ | ------ | ------ | ------ | | |||||
| strCompanyName | 注册单位名称 | String | —— | —— | | |||||
| strLicense | 主注册号 | String | —— | —— | | |||||
| strLicenseA | 附加注册号 A | String | —— | —— | | |||||
| strLicenseB | 附加注册号 B | String | —— | —— | |
@@ -0,0 +1,14 @@ | |||||
module.exports = { | |||||
presets: [ | |||||
'@vue/cli-plugin-babel/preset' | |||||
], | |||||
"plugins": [ | |||||
[ | |||||
"component", | |||||
{ | |||||
"libraryName": "element-ui", | |||||
"styleLibraryName": "~theme-chalk" | |||||
} | |||||
] | |||||
] | |||||
} |
@@ -0,0 +1,31 @@ | |||||
<template> | |||||
<div id="app" data-theme="kr-designer"> | |||||
<router-view /> | |||||
</div> | |||||
</template> | |||||
<script> | |||||
export default { | |||||
data() { | |||||
return {} | |||||
}, | |||||
created() { | |||||
let licenseInfo = { | |||||
strCompanyName: '某某某公司', | |||||
strLicense: '*****', | |||||
strLicenseA: '', | |||||
strLicenseB: '', | |||||
} | |||||
// 设置Lodop产品注册信息 | |||||
this.$lodop.setLicenses(licenseInfo) | |||||
}, | |||||
methods: {}, | |||||
} | |||||
</script> | |||||
<style> | |||||
#app { | |||||
height: 100%; | |||||
} | |||||
</style> |
@@ -0,0 +1,387 @@ | |||||
/** | |||||
* 出库单 模板设计选项 | |||||
*/ | |||||
export const OutStockOptions = [ | |||||
{ | |||||
type: 'braid-txt', | |||||
isEdit: 1, | |||||
title: '自定义文本', | |||||
value: '自定义文本', | |||||
defaultValue: '自定义文本', | |||||
name: '' | |||||
}, | |||||
{ | |||||
type: 'braid-txt', | |||||
isEdit: 0, | |||||
title: '公司名称', | |||||
value: '{公司名称}', | |||||
defaultValue: '某某公司', | |||||
name: 'companyName' | |||||
}, | |||||
{ | |||||
type: 'braid-txt', | |||||
isEdit: 1, | |||||
title: '出库单号', | |||||
value: '{出库单号}', | |||||
defaultValue: 'CK-1234567890', | |||||
name: 'stockoutCode' | |||||
}, | |||||
{ | |||||
type: 'bar-code', | |||||
isEdit: 1, | |||||
title: '单号条码', | |||||
value: '{单号}', | |||||
defaultValue: 'CK-1234567890', | |||||
name: 'stockoutCode', | |||||
lodopStyle: { QRCodeVersion: '1', QRCodeErrorLevel: 'L' }, | |||||
}, | |||||
{ | |||||
type: 'braid-txt', | |||||
isEdit: 1, | |||||
title: '客户/供应商', | |||||
value: '{客户/供应商}', | |||||
defaultValue: '中国苹果', | |||||
name: 'unitName' | |||||
}, | |||||
{ | |||||
type: 'braid-txt', | |||||
isEdit: 1, | |||||
title: '经办人', | |||||
value: '{经办人}', | |||||
defaultValue: 'zj001', | |||||
name: 'handlerName' | |||||
}, | |||||
{ | |||||
type: 'braid-txt', | |||||
isEdit: 1, | |||||
title: '出库类型', | |||||
value: '{出库类型}', | |||||
defaultValue: '销售出库', | |||||
name: 'stockoutType' | |||||
}, | |||||
{ | |||||
type: 'braid-txt', | |||||
isEdit: 1, | |||||
title: '出库仓库', | |||||
value: '{出库仓库}', | |||||
defaultValue: '北京仓库', | |||||
name: 'warehouseName' | |||||
}, | |||||
{ | |||||
type: 'braid-txt', | |||||
isEdit: 1, | |||||
title: '出库时间', | |||||
value: '{出库时间}', | |||||
defaultValue: '2020-08-27 12:00:00', | |||||
name: 'businessDate' | |||||
}, | |||||
{ | |||||
type: 'braid-txt', | |||||
isEdit: 1, | |||||
title: '制单人', | |||||
value: '{制单人}', | |||||
defaultValue: 'jz002', | |||||
name: 'createUserName' | |||||
}, | |||||
{ | |||||
type: 'braid-txt', | |||||
isEdit: 1, | |||||
title: '制单时间', | |||||
value: '{制单时间}', | |||||
defaultValue: '2020-08-27 12:00:00', | |||||
name: 'created' | |||||
}, | |||||
{ | |||||
type: 'braid-txt', | |||||
isEdit: 1, | |||||
title: '收货人(销售)', | |||||
value: '{收货人}', | |||||
defaultValue: '刘某某', | |||||
name: 'receivePerson' | |||||
}, | |||||
{ | |||||
type: 'braid-txt', | |||||
isEdit: 1, | |||||
title: '收货电话(销售)', | |||||
value: '{收货人电话}', | |||||
defaultValue: '收货人', | |||||
name: 'receivePhone' | |||||
}, | |||||
{ | |||||
type: 'braid-txt', | |||||
isEdit: 1, | |||||
title: '收货地址(销售)', | |||||
value: '{收货地址}', | |||||
defaultValue: '四川成都', | |||||
name: 'address' | |||||
}, | |||||
{ | |||||
type: 'braid-txt', | |||||
isEdit: 1, | |||||
title: '合计金额', | |||||
value: '{合计金额}', | |||||
defaultValue: '123.00', | |||||
name: 'totalPrice' | |||||
}, | |||||
{ | |||||
type: 'braid-txt', | |||||
isEdit: 1, | |||||
title: '摘要', | |||||
value: '{摘要}', | |||||
defaultValue: '北京采购入库成都摘要', | |||||
name: 'remark' | |||||
}, | |||||
{ | |||||
type: 'braid-html', | |||||
isEdit: 1, | |||||
title: '分页', | |||||
value: '{第##页/共##页}', | |||||
defaultValue: '<font><span tdata=\'pageNO\'>第##页</span>/<span tdata=\'pageCount\'>共##页</span></font>', | |||||
name: '' | |||||
}, | |||||
{ | |||||
type: 'braid-table', | |||||
isEdit: 0, | |||||
title: '出库商品明细', | |||||
name: 'details', | |||||
value: '{details}', | |||||
style: {}, | |||||
defaultValue: [ | |||||
{ | |||||
productName: '苹果ipone11pro', | |||||
skuName: 'iphone11pro256g', | |||||
specModel: '165L', | |||||
quantity: 3, | |||||
snCode: '[SPP1Y79G1]', | |||||
price: '23.00' | |||||
}, | |||||
{ | |||||
productName: '苹果ipone11pro', | |||||
skuName: 'iphone11pro124g', | |||||
specModel: '165L', | |||||
quantity: 3, | |||||
snCode: ' [SPP1Y79G1]', | |||||
price: '12.00' | |||||
} | |||||
], | |||||
tabelHtml: '', | |||||
columnsAttr: [ | |||||
{ | |||||
title: '产品名称', | |||||
value: '{产品名称}', | |||||
name: 'productName', | |||||
}, | |||||
{ | |||||
title: 'sku名称', | |||||
value: '{sku名称}', | |||||
name: 'skuName', | |||||
}, | |||||
{ | |||||
title: '规格型号', | |||||
value: '{规格型号}', | |||||
name: 'specModel' | |||||
}, | |||||
{ | |||||
title: '数量', | |||||
value: '{数量}', | |||||
name: 'quantity' | |||||
}, | |||||
{ | |||||
title: '单价', | |||||
value: '{单价}', | |||||
name: 'price' | |||||
}, | |||||
{ | |||||
title: '产品序列号', | |||||
value: '产品序列号明细:<br>{产品序列号}', | |||||
name: 'snCode', | |||||
trSet: { | |||||
title: '产品序列号明细:', | |||||
col: 5, | |||||
margin: '50px' | |||||
}, | |||||
} | |||||
], | |||||
columns: [] | |||||
} | |||||
] | |||||
/** | |||||
* 入库单 模板设计选项 | |||||
*/ | |||||
export const InStockOptions = [ | |||||
{ | |||||
type: 'braid-txt', | |||||
isEdit: 1, | |||||
title: '自定义文本', | |||||
value: '自定义文本', | |||||
defaultValue: '自定义文本', | |||||
name: '' | |||||
}, | |||||
{ | |||||
type: 'braid-txt', | |||||
isEdit: 0, | |||||
title: '公司名称', | |||||
value: '{公司名称}', | |||||
defaultValue: '科技公司', | |||||
name: 'companyName' | |||||
}, | |||||
{ | |||||
type: 'braid-txt', | |||||
isEdit: 1, | |||||
title: '入库单号', | |||||
value: '{入库单号}', | |||||
defaultValue: 'RK-1234567890', | |||||
name: 'purcheckCode' | |||||
}, | |||||
{ | |||||
type: 'bar-code', | |||||
isEdit: 1, | |||||
title: '单号条码', | |||||
value: '{单号}', | |||||
defaultValue: 'RK-1234567890', | |||||
name: 'stockoutCode' | |||||
}, | |||||
{ | |||||
type: 'braid-txt', | |||||
isEdit: 1, | |||||
title: '供应商/客户', | |||||
value: '{供应商/客户}', | |||||
defaultValue: '中国苹果', | |||||
name: 'unitName' | |||||
}, | |||||
{ | |||||
type: 'braid-txt', | |||||
isEdit: 1, | |||||
title: '采购业务员', | |||||
value: '{采购业务员}', | |||||
defaultValue: 'zj001', | |||||
name: 'purchaseSaleManName' | |||||
}, | |||||
{ | |||||
type: 'braid-txt', | |||||
isEdit: 1, | |||||
title: '入库类型', | |||||
value: '{入库类型}', | |||||
defaultValue: '采购入库', | |||||
name: 'purcheckType' | |||||
}, | |||||
{ | |||||
type: 'braid-txt', | |||||
isEdit: 1, | |||||
title: '入库仓库', | |||||
value: '{入库仓库}', | |||||
defaultValue: '成都仓库', | |||||
name: 'warehouseName' | |||||
}, | |||||
{ | |||||
type: 'braid-txt', | |||||
isEdit: 1, | |||||
title: '入库时间', | |||||
value: '{入库时间}', | |||||
defaultValue: '2020-08-27 12:00:00', | |||||
name: 'businessDate' | |||||
}, | |||||
{ | |||||
type: 'braid-txt', | |||||
isEdit: 1, | |||||
title: '制单人', | |||||
value: '{制单人}', | |||||
defaultValue: 'jz002', | |||||
name: 'createUserName' | |||||
}, | |||||
{ | |||||
type: 'braid-txt', | |||||
isEdit: 1, | |||||
title: '制单时间', | |||||
value: '{制单时间}', | |||||
defaultValue: '2020-08-27 12:00:00', | |||||
name: 'created' | |||||
}, | |||||
{ | |||||
type: 'braid-txt', | |||||
isEdit: 1, | |||||
title: '摘要', | |||||
value: '{摘要}', | |||||
defaultValue: '北京采购入库成都摘要', | |||||
name: 'remark' | |||||
}, | |||||
{ | |||||
type: 'braid-txt', | |||||
isEdit: 1, | |||||
title: '合计金额', | |||||
value: '{合计金额}', | |||||
defaultValue: '12331.00', | |||||
name: 'totalPrice' | |||||
}, | |||||
{ | |||||
type: 'braid-html', | |||||
isEdit: 1, | |||||
title: '分页', | |||||
value: '{第##页/共##页}', | |||||
defaultValue: '<font ><span tdata=\'pageNO\'>第##页</span>/<span tdata=\'pageCount\'>共##页</span></font>', | |||||
name: '' | |||||
}, | |||||
{ | |||||
type: 'braid-table', | |||||
isEdit: 0, | |||||
title: '入库商品明细', | |||||
name: 'details', | |||||
value: '{details}', | |||||
style: {}, | |||||
defaultValue: [ | |||||
{ | |||||
productName: '苹果ipone11pro', | |||||
skuName: 'iphone11pro256g', | |||||
specModel: '165L', | |||||
quantity: 3, | |||||
snCode: '[SPP1Y79G1]', | |||||
price: '12.00' | |||||
}, | |||||
{ | |||||
productName: '苹果ipone11pro', | |||||
skuName: 'iphone11pro124g', | |||||
specModel: '165L', | |||||
quantity: 3, | |||||
snCode: '[SPP1Y79G1] ', | |||||
price: '12.00' | |||||
} | |||||
], | |||||
columnsAttr: [ | |||||
{ | |||||
title: '产品名称', | |||||
value: '{产品名称}', | |||||
name: 'productName', | |||||
}, | |||||
{ | |||||
title: 'sku名称', | |||||
value: '{sku名称}', | |||||
name: 'skuName', | |||||
}, | |||||
{ | |||||
title: '规格型号', | |||||
value: '{规格型号}', | |||||
name: 'specModel' | |||||
}, | |||||
{ | |||||
title: '数量', | |||||
value: '{数量}', | |||||
name: 'quantity' | |||||
}, | |||||
{ | |||||
title: '单价', | |||||
value: '{单价}', | |||||
name: 'price' | |||||
}, | |||||
{ | |||||
title: '产品序列号', | |||||
value: '{产品序列号}', | |||||
name: 'snCode', | |||||
} | |||||
], | |||||
columns: [] | |||||
} | |||||
] |
@@ -0,0 +1,77 @@ | |||||
export const OutStockData = [ | |||||
{ | |||||
companyName: '四川某某公司', | |||||
stockoutCode: 'CK-12345678910231', | |||||
unitName: '北京代理商', | |||||
handlerName: '刘某某', | |||||
stockoutType: '销售出库', | |||||
warehouseName: '京东北京仓', | |||||
businessDate: '2020-08-27 12:00:00', | |||||
createUserName: '胡某某', | |||||
created: '2020-08-27 12:00:00', | |||||
remark: '备注一下', | |||||
totalPrice: '129.00', | |||||
receivePerson: '易某某', | |||||
receivePhone: '18982068701', | |||||
address: '四川省成都市武侯区 天府软件园', | |||||
details: [ | |||||
{ | |||||
productName: '苹果ipone11pro', | |||||
skuName: 'iphone11pro256g', | |||||
specModel: '165L', | |||||
quantity: 17, | |||||
snCode: '[SPP1Y79G1]', | |||||
price: '8999.00' | |||||
}, | |||||
{ | |||||
productName: '苹果手机壳123', | |||||
skuName: 'iphone11pro256g', | |||||
specModel: '165L', | |||||
quantity: 9, | |||||
snCode: '[SPP1Y79G1]', | |||||
price: '23.00' | |||||
}, | |||||
{ | |||||
productName: '苹果ipone11pro', | |||||
skuName: 'iphone11pro124g', | |||||
specModel: '165L', | |||||
quantity: 13, | |||||
snCode: '[SPP1Y79G1]', | |||||
price: '7099.00' | |||||
} | |||||
] | |||||
} | |||||
] | |||||
export const InStockData = [ | |||||
{ | |||||
companyName: '某某偶科技公司', | |||||
purcheckCode: 'Rk-12345678910231', | |||||
unitName: '四川分销商', | |||||
purchaseSaleManName: '刘夏', | |||||
purcheckType: '采购入库', | |||||
warehouseName: '京东成都仓', | |||||
businessDate: '2020-08-27 12:00:00', | |||||
createUserName: '胡某某', | |||||
created: '2020-08-27 12:00:00', | |||||
remark: '备注一下', | |||||
totalPrice: '129.00', | |||||
details: [ | |||||
{ | |||||
productName: '苹果ipone11pro', | |||||
skuName: 'iphone11pro256g', | |||||
specModel: '165L', | |||||
quantity: 3, | |||||
snCode: '[SPP1Y79G1]', | |||||
price: '12.00' | |||||
}, | |||||
{ | |||||
productName: '苹果ipone11pro', | |||||
skuName: 'iphone11pro124g', | |||||
specModel: '165L', | |||||
quantity: 3, | |||||
snCode: '[SPP1Y79G1]', | |||||
price: '12.00' | |||||
}] | |||||
} | |||||
] |
@@ -0,0 +1,15 @@ | |||||
<!DOCTYPE html> | |||||
<html> | |||||
<head> | |||||
<meta charset="utf-8"> | |||||
<meta name="viewport" content="width=device-width,initial-scale=1.0"> | |||||
<title><%= htmlWebpackPlugin.options.title %></title> | |||||
</head> | |||||
<body> | |||||
<div id="app"></div> | |||||
<!-- built files will be auto injected --> | |||||
</body> | |||||
</html> |
@@ -0,0 +1,35 @@ | |||||
import Vue from 'vue' | |||||
import App from './App.vue' | |||||
import vuePrintDesigner from '../src' | |||||
import VueRouter from 'vue-router' | |||||
import Designer from './page/designer.vue' | |||||
import Index from './page/index.vue' | |||||
import { outStockTemp } from './data/defaultTemp' | |||||
// 默认设置一条模板示例 | |||||
let tempList | |||||
try { | |||||
tempList = JSON.parse(localStorage.getItem('tempList')) || [] | |||||
} catch (error) { | |||||
tempList = [] | |||||
} | |||||
if (tempList.length == 0) { | |||||
localStorage.setItem('tempList', outStockTemp) | |||||
} | |||||
Vue.use(VueRouter) | |||||
Vue.use(vuePrintDesigner) | |||||
const routes = [ | |||||
{ path: '/', component: Index }, | |||||
{ path: '/designer', component: Designer } | |||||
] | |||||
const router = new VueRouter({ | |||||
routes | |||||
}) | |||||
new Vue({ | |||||
router, | |||||
render: h => h(App), | |||||
}).$mount('#app') |
@@ -0,0 +1,45 @@ | |||||
<template> | |||||
<kr-print-designer ref="printDesigner" :temp-value="value" :widget-options="widgets" @save="handleSave" /> | |||||
</template> | |||||
<script> | |||||
import { OutStockOptions, InStockOptions } from '../data/options' | |||||
export default { | |||||
data() { | |||||
return { | |||||
index: '', | |||||
value: { | |||||
title: 'demo', | |||||
width: 750, | |||||
height: 550, | |||||
pageWidth: 750, | |||||
pageHeight: 550, | |||||
tempItems: [], | |||||
}, | |||||
widgets: OutStockOptions, | |||||
} | |||||
}, | |||||
created() { | |||||
this.index = this.$route.query.index | |||||
try { | |||||
let tempList = JSON.parse(localStorage.getItem('tempList')) || [] | |||||
this.value = tempList[this.index] | |||||
this.widgets = this.value.type == 1 ? OutStockOptions : InStockOptions | |||||
} catch (err) { | |||||
console.error(err) | |||||
} | |||||
}, | |||||
methods: { | |||||
handleSave(data) { | |||||
let tempList = JSON.parse(localStorage.getItem('tempList')) || [] | |||||
tempList[this.index] = data | |||||
localStorage.setItem('tempList', JSON.stringify(tempList)) | |||||
this.$router.back() | |||||
}, | |||||
// 手动初始话模板数据 | |||||
initTemp(){ | |||||
this.$refs.printDesigner.initTemp(this.value,this.widgets) | |||||
} | |||||
}, | |||||
} | |||||
</script> |
@@ -0,0 +1,279 @@ | |||||
<template> | |||||
<div class="box"> | |||||
<div class="title">kr-print-designer 打印模板设计器</div> | |||||
<section> | |||||
<div class="section">模板管理</div> | |||||
<el-table :data="tempList" style="width: 100%" size="mini" border> | |||||
<el-table-column label="模板名称" prop="title"></el-table-column> | |||||
<el-table-column label="模板类型"> | |||||
<template slot-scope="scope"> | |||||
<span>{{scope.row.type == 1 ? '出库单' : '入库单'}}</span> | |||||
</template> | |||||
</el-table-column> | |||||
<el-table-column label="模板宽高"> | |||||
<template slot-scope="scope"> | |||||
<span>{{scope.row.width + ' * '+ scope.row.height}}</span> | |||||
</template> | |||||
</el-table-column> | |||||
<el-table-column label="纸张大小"> | |||||
<template slot-scope="scope"> | |||||
<span>{{scope.row.pageWidth + 'mm * '+ scope.row.pageHeight+'mm'}}</span> | |||||
</template> | |||||
</el-table-column> | |||||
<el-table-column align="right"> | |||||
<template slot="header"> | |||||
<el-button size="mini" type="primary" @click="openCreate">创建模板</el-button> | |||||
</template> | |||||
<template slot-scope="scope"> | |||||
<el-button type="text" size="mini" @click="handleEdit(scope.$index, scope.row)">设计</el-button> | |||||
<el-button type="text" size="mini" @click="handlePreview(scope.$index, scope.row)">预览</el-button> | |||||
<el-button type="text" size="mini" @click="handleCopy(scope.row)">复制新增</el-button> | |||||
<el-button | |||||
v-if="!scope.row.default" | |||||
type="text" | |||||
size="mini" | |||||
@click="handleDelete(scope.$index, scope.row)" | |||||
>删除</el-button> | |||||
</template> | |||||
</el-table-column> | |||||
</el-table> | |||||
<el-dialog title="添加模板" :visible.sync="visible" width="310px"> | |||||
<el-form ref="form" :model="form" size="small" :rules="rules" label-width="80px"> | |||||
<el-form-item label="模板名称" prop="title"> | |||||
<el-input v-model="form.title"></el-input> | |||||
</el-form-item> | |||||
<el-form-item label="模板类型" prop="type"> | |||||
<el-select v-model="form.type"> | |||||
<el-option label="出库单" :value="1"></el-option> | |||||
<el-option label="入库单" :value="2"></el-option> | |||||
</el-select> | |||||
</el-form-item> | |||||
<el-form-item label="模板宽度" prop="width"> | |||||
<el-input v-model="form.width"></el-input> | |||||
</el-form-item> | |||||
<el-form-item label="模板高度" prop="height"> | |||||
<el-input v-model="form.height"></el-input> | |||||
</el-form-item> | |||||
<el-form-item label="纸张宽度" prop="pageWidth"> | |||||
<el-input v-model="form.pageWidth"></el-input> | |||||
</el-form-item> | |||||
<el-form-item label="纸张高度" prop="pageHeight"> | |||||
<el-input v-model="form.pageHeight"></el-input> | |||||
</el-form-item> | |||||
</el-form> | |||||
<div slot="footer" class="dialog-footer"> | |||||
<el-button size="mini" @click="visible = false">取 消</el-button> | |||||
<el-button type="primary" size="mini" @click="savaTemp">确 定</el-button> | |||||
</div> | |||||
</el-dialog> | |||||
</section> | |||||
<section> | |||||
<div class="section">模板打印测试</div> | |||||
<el-form ref="printForm" :model="printForm" size="small" :rules="printRules" :inline="true"> | |||||
<el-form-item label="打印模板" prop="tempIndex"> | |||||
<el-select v-model="printForm.tempIndex"> | |||||
<el-option | |||||
v-for="(item,index) in tempList" | |||||
:key="index" | |||||
:label="item.title" | |||||
:value="index" | |||||
></el-option> | |||||
</el-select> | |||||
</el-form-item> | |||||
<el-form-item label="测试数据" prop="data"> | |||||
<el-input | |||||
type="textarea" | |||||
style="width:520px" | |||||
:rows="6" | |||||
v-model="printForm.data" | |||||
placeholder="数据模板对应的数据,数据格式为json对象" | |||||
></el-input> | |||||
</el-form-item> | |||||
<el-form-item> | |||||
<div> | |||||
<el-button size="mini" type="primary" @click="printPreview(1)">打印预览</el-button> | |||||
</div> | |||||
<div style="margin-top:10px"> | |||||
<el-button size="mini" type="success" @click="printPreview(2)">直接打印</el-button> | |||||
</div> | |||||
</el-form-item> | |||||
</el-form> | |||||
</section> | |||||
<section> | |||||
<el-collapse> | |||||
<el-collapse-item title="测试数据" name="1"> | |||||
<el-form ref="testData" :model="testData" size="small" :inline="true"> | |||||
<el-form-item label="出库数据"> | |||||
<el-input | |||||
type="textarea" | |||||
style="width:920px" | |||||
:rows="8" | |||||
v-model="testData.OutStock" | |||||
placeholder="数据模板对应的数据,数据格式为json对象" | |||||
></el-input> | |||||
</el-form-item> | |||||
<el-form-item label="入库数据"> | |||||
<el-input | |||||
type="textarea" | |||||
style="width:920px" | |||||
:rows="8" | |||||
v-model="testData.InStock" | |||||
placeholder="数据模板对应的数据,数据格式为json对象" | |||||
></el-input> | |||||
</el-form-item> | |||||
</el-form> | |||||
</el-collapse-item> | |||||
</el-collapse> | |||||
</section> | |||||
</div> | |||||
</template> | |||||
<script> | |||||
import { Table, TableColumn, Dialog, MessageBox } from 'element-ui' | |||||
import Vue from 'vue' | |||||
Vue.prototype.$confirm = (...args) => MessageBox.confirm(...args) | |||||
const defaultTemp = () => ({ | |||||
title: '', | |||||
type: 1, // 模板类型 1:出库单;2:入库单 | |||||
width: '', | |||||
height: '', | |||||
pageWidth: '', | |||||
pageHeight: '', | |||||
tempItems: [], | |||||
}) | |||||
import { OutStockData, InStockData } from '../data/test' | |||||
export default { | |||||
data() { | |||||
return { | |||||
visible: false, | |||||
value: {}, | |||||
tempList: [], | |||||
form: defaultTemp(), | |||||
rules: { | |||||
title: { required: true, message: '请输入模板名称' }, | |||||
type: { required: true, message: '请选择模板类型' }, | |||||
width: { required: true, message: '请输入模板宽度' }, | |||||
height: { required: true, message: '请输入模板高度' }, | |||||
pageWidth: { required: true, message: '请输入纸张宽度' }, | |||||
pageHeight: { required: true, message: '请输入纸张高度' }, | |||||
}, | |||||
printForm: { | |||||
tempIndex: '', | |||||
data: '', | |||||
}, | |||||
printRules: { | |||||
tempIndex: { required: true, message: '请选择模板' }, | |||||
data: { required: true, message: '请输入模板测试数据' }, | |||||
}, | |||||
testData: { | |||||
OutStock: JSON.stringify(OutStockData), | |||||
InStock: JSON.stringify(InStockData), | |||||
}, | |||||
} | |||||
}, | |||||
created() { | |||||
Vue.use(Table) | |||||
Vue.use(TableColumn) | |||||
Vue.use(Dialog) | |||||
this.tempList = JSON.parse(localStorage.getItem('tempList')) || [] | |||||
}, | |||||
methods: { | |||||
// 预览 | |||||
handlePreview(index, row) { | |||||
this.$lodop.previewTemp(row) | |||||
}, | |||||
// 设计 | |||||
handleEdit(index, row) { | |||||
this.$router.push({ | |||||
path: '/designer', | |||||
query: { | |||||
index: index, | |||||
}, | |||||
}) | |||||
}, | |||||
// 删除 | |||||
handleDelete(index, row) { | |||||
this.$confirm('确认删除该条数据吗?', '确认信息') | |||||
.then((isPass) => { | |||||
if (isPass) { | |||||
this.tempList.splice(index, 1) | |||||
localStorage.setItem('tempList', JSON.stringify(this.tempList)) | |||||
} | |||||
}) | |||||
.catch() | |||||
}, | |||||
handleCopy(row) { | |||||
let copyTemp = JSON.parse(JSON.stringify(row)) | |||||
copyTemp.title = copyTemp.title + '_copy' | |||||
copyTemp.default = false | |||||
this.tempList.push(copyTemp) | |||||
localStorage.setItem('tempList', JSON.stringify(this.tempList)) | |||||
}, | |||||
// 新增 | |||||
openCreate() { | |||||
this.form = defaultTemp() | |||||
this.visible = true | |||||
}, | |||||
// 保存新增 | |||||
savaTemp() { | |||||
this.$refs.form.validate((valid) => { | |||||
if (valid) { | |||||
this.tempList.push(this.form) | |||||
localStorage.setItem('tempList', JSON.stringify(this.tempList)) | |||||
this.visible = false | |||||
} | |||||
}) | |||||
}, | |||||
/** | |||||
* 测试打印预览/直接打印 | |||||
* flag 1:打印预览,2:直接打印 | |||||
*/ | |||||
printPreview(flag) { | |||||
this.$refs.printForm.validate((valid) => { | |||||
if (valid) { | |||||
let printData | |||||
try { | |||||
printData = JSON.parse(this.printForm.data) | |||||
} catch (err) { | |||||
return this.$message('请输入正确格式的打印数据') | |||||
} | |||||
if (flag == 1) { | |||||
this.$lodop.preview(this.tempList[this.printForm.tempIndex], printData) | |||||
} else { | |||||
this.$confirm('确认直接打印吗?', '确认信息') | |||||
.then((isPass) => { | |||||
if (isPass) { | |||||
this.$lodop.print(this.tempList[this.printForm.tempIndex], printData) | |||||
} | |||||
}) | |||||
.catch((err) => { | |||||
console.log(err) | |||||
}) | |||||
} | |||||
} | |||||
}) | |||||
}, | |||||
}, | |||||
} | |||||
</script> | |||||
<style scoped> | |||||
.box { | |||||
width: 1000px; | |||||
margin: auto; | |||||
padding: 10px 0; | |||||
font-family: Arial, Helvetica, sans-serif; | |||||
} | |||||
.title { | |||||
text-align: center; | |||||
font-size: 24px; | |||||
color: #1890ff; | |||||
margin: 20px; | |||||
font-weight: bold; | |||||
} | |||||
.section { | |||||
font-size: 18px; | |||||
color: #333333; | |||||
padding: 10px 0; | |||||
} | |||||
</style> |
@@ -0,0 +1,10 @@ | |||||
<meta charset="utf-8"> | |||||
<title>kr-print-designer demo</title> | |||||
<script src="./kr-print-designer.umd.js"></script> | |||||
<link rel="stylesheet" href="./kr-print-designer.css"> | |||||
<script> | |||||
console.log(kr-print-designer) | |||||
</script> |
@@ -0,0 +1,39 @@ | |||||
{ | |||||
"name": "kr-print-designer", | |||||
"version": "1.1.8", | |||||
"description": "一个基于Vue、ElementUi、Lodop的打印模板设计器。实现打印模板的设计、预览和打印功能。", | |||||
"publish": true, | |||||
"main": "lib/kr-print-designer.umd.min.js", | |||||
"files": [ | |||||
"/lib" | |||||
], | |||||
"keyword": "lodop print-designer", | |||||
"author": "liuxia", | |||||
"scripts": { | |||||
"dev": "vue-cli-service serve", | |||||
"build": "vue-cli-service build", | |||||
"lib": "vue-cli-service build --target lib --name kr-print-designer --dest lib src/index.js" | |||||
}, | |||||
"dependencies": { | |||||
"nanoid": "^1.0.1" | |||||
}, | |||||
"devDependencies": { | |||||
"@vue/cli-plugin-babel": "^4.0.0", | |||||
"@vue/cli-service": "^4.0.0", | |||||
"babel-eslint": "^10.0.3", | |||||
"babel-plugin-component": "^1.1.1", | |||||
"eslint": "^5.16.0", | |||||
"eslint-plugin-vue": "^5.0.0", | |||||
"sass": "^1.26.5", | |||||
"sass-loader": "^8.0.2", | |||||
"element-ui": "2.13.0", | |||||
"vue": "^2.6.11", | |||||
"vue-router": "^3.4.8", | |||||
"vue-template-compiler": "^2.6.10" | |||||
}, | |||||
"browserslist": [ | |||||
"> 1%", | |||||
"last 2 versions", | |||||
"not dead" | |||||
] | |||||
} |
@@ -0,0 +1,132 @@ | |||||
<template> | |||||
<div class="kr-designer" data-theme="kr-designer"> | |||||
<viewport class="kr-designer-view" /> | |||||
<div class="kr-designer-tool"> | |||||
<el-scrollbar class="kr-designer-tool_con"> | |||||
<panel class="control-panel" /> | |||||
</el-scrollbar> | |||||
<div class="kr-designer-tool_bar"> | |||||
<el-button size="mini" type="success" @click="saveTemp">保存</el-button> | |||||
<el-button size="mini" type="primary" @click="previewTemp">预览</el-button> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
</template> | |||||
<script> | |||||
import Viewport from './components/viewport/index.vue' | |||||
import Panel from './components/panel/index.vue' | |||||
import cloneDeep from 'lodash/cloneDeep' | |||||
export default { | |||||
name: 'kr-print-designer', | |||||
components: { Viewport, Panel }, | |||||
props: { | |||||
widgetOptions: { | |||||
type: Array, | |||||
default: () => [], | |||||
}, | |||||
tempValue: { | |||||
type: Object, | |||||
default: () => ({ title: 'demo', width: 750, height: 550, pageWidth: 750, pageHeight: 550, tempItems: [] }), | |||||
}, | |||||
}, | |||||
created() { | |||||
this.initTemp(this.tempValue, this.widgetOptions) | |||||
}, | |||||
methods: { | |||||
// 保存模板 | |||||
saveTemp() { | |||||
let page = this.$vptd.state.page | |||||
this.$emit('save', cloneDeep(page)) | |||||
}, | |||||
// 预览模板 | |||||
previewTemp() { | |||||
let page = { ...this.$vptd.state.page } | |||||
this.$lodop.previewTemp(cloneDeep(page)) | |||||
}, | |||||
// 初始化设计器 | |||||
initTemp(tempValue, widgetOptions) { | |||||
this.$vptd.dispatch('designerInit', { | |||||
tempValue: cloneDeep(tempValue), | |||||
options: cloneDeep(widgetOptions), | |||||
}) | |||||
}, | |||||
}, | |||||
} | |||||
</script> | |||||
<style lang="scss"> | |||||
body, | |||||
html { | |||||
padding: 0; | |||||
margin: 0; | |||||
height: 100%; | |||||
box-sizing: border-box; | |||||
} | |||||
.kr-designer { | |||||
font-family: Avenir, Helvetica, Arial, sans-serif; | |||||
-webkit-font-smoothing: antialiased; | |||||
-moz-osx-font-smoothing: grayscale; | |||||
color: #2c3e50; | |||||
width: 100%; | |||||
height: 100%; | |||||
text-align: left; | |||||
display: flex; | |||||
flex-direction: row; | |||||
.kr-designer-view { | |||||
flex: 1; | |||||
display: flex; | |||||
flex-direction: column; | |||||
} | |||||
.kr-designer-tool { | |||||
width: 400px; | |||||
height: 100%; | |||||
display: flex; | |||||
flex-direction: column; | |||||
.el-scrollbar__wrap { | |||||
overflow: auto; | |||||
} | |||||
&_con { | |||||
flex: 1; | |||||
height: 100%; | |||||
width: 100%; | |||||
overflow: hidden; | |||||
} | |||||
&_bar { | |||||
padding: 10px; | |||||
text-align: center; | |||||
} | |||||
} | |||||
} | |||||
.kr-form { | |||||
.el-form-item--mini.el-form-item { | |||||
margin-bottom: 10px; | |||||
} | |||||
.min-input { | |||||
width: 100px; | |||||
} | |||||
.unit-text { | |||||
font-size: 12px; | |||||
color: #999999; | |||||
margin-left: 5px; | |||||
} | |||||
} | |||||
.kr-collapse { | |||||
color: #555555; | |||||
width: 400px; | |||||
.el-collapse-item__header { | |||||
box-sizing: border-box; | |||||
padding-left: 10px; | |||||
} | |||||
.el-collapse-item__content { | |||||
box-sizing: border-box; | |||||
padding: 10px; | |||||
} | |||||
} | |||||
</style> |
@@ -0,0 +1,15 @@ | |||||
[data-theme="kr-designer"] { | |||||
.widgets { | |||||
outline: none; | |||||
font-size: 12px; | |||||
&:hover { | |||||
outline: 1px solid #ddd !important; | |||||
} | |||||
&.active { | |||||
outline: 1px solid #2196f3 !important; | |||||
&:hover { | |||||
outline: 1px solid #2196f3 !important; | |||||
} | |||||
} | |||||
} | |||||
} |
@@ -0,0 +1,52 @@ | |||||
<template> | |||||
<div class="kr-collapse"> | |||||
<el-collapse v-model="activeNames"> | |||||
<el-collapse-item title name="1"> | |||||
<template slot="title"> | |||||
<span>页面参数</span> | |||||
</template> | |||||
<page /> | |||||
</el-collapse-item> | |||||
<el-collapse-item name="2"> | |||||
<template slot="title"> | |||||
<span>样式</span> | |||||
</template> | |||||
<appearance class="pd-l-10" /> | |||||
</el-collapse-item> | |||||
<el-collapse-item name="3"> | |||||
<template slot="title"> | |||||
<span>组件</span> | |||||
</template> | |||||
<options /> | |||||
</el-collapse-item> | |||||
<el-collapse-item name="4"> | |||||
<template slot="title"> | |||||
<span>已加组件</span> | |||||
</template> | |||||
<layers /> | |||||
</el-collapse-item> | |||||
</el-collapse> | |||||
</div> | |||||
</template> | |||||
<script> | |||||
import page from './page.vue' | |||||
import style from './style.vue' | |||||
import options from './options/index.vue' | |||||
import layers from './layers.vue' | |||||
export default { | |||||
components: { | |||||
page, | |||||
appearance: style, | |||||
options, | |||||
layers, | |||||
}, | |||||
data() { | |||||
return { | |||||
activeNames: ['1', '2', '3', '4'], | |||||
} | |||||
}, | |||||
} | |||||
</script> |
@@ -0,0 +1,58 @@ | |||||
<template> | |||||
<div class="tag-box"> | |||||
<el-tag | |||||
v-for="(layer,index) in layers" | |||||
:key="index" | |||||
:closable="layer === activeElement?true:false" | |||||
size="small" | |||||
:type="layer === activeElement?'':'info'" | |||||
@click="(e) => {activeLayer(e, layer)}" | |||||
@close="(e) => {dele(e, layer)}" | |||||
>{{ layer.title }}</el-tag> | |||||
</div> | |||||
</template> | |||||
<script> | |||||
import { cumulativeOffset, checkInView } from '../../utils/offset' | |||||
export default { | |||||
computed: { | |||||
// 已添加的组件 | |||||
layers() { | |||||
return this.$vptd.state.page.tempItems | |||||
}, | |||||
activeElement() { | |||||
return this.$vptd.state.activeElement | |||||
}, | |||||
}, | |||||
methods: { | |||||
activeLayer(e, item) { | |||||
this.$vptd.commit('select', { | |||||
uuid: item.uuid, | |||||
}) | |||||
let viewport = document.querySelector('#viewport') | |||||
if (viewport) { | |||||
let target = viewport.querySelector(`[data-uuid='${item.uuid}']`) | |||||
if (target && !checkInView(target)) { | |||||
viewport.scrollTop = cumulativeOffset(target).top - 50 | |||||
} | |||||
} else { | |||||
console.error('未找到 "#viewport" 的节点') | |||||
} | |||||
}, | |||||
// 删除元件 | |||||
dele(e, item) { | |||||
this.$vptd.commit('delete', item.uuid) | |||||
}, | |||||
}, | |||||
} | |||||
</script> | |||||
<style lang="scss" scoped> | |||||
.tag-box { | |||||
.el-tag { | |||||
margin-bottom: 10px; | |||||
margin-right: 10px; | |||||
} | |||||
} | |||||
</style> |
@@ -0,0 +1,78 @@ | |||||
<template> | |||||
<div class="options-box"> | |||||
<template v-for="(item,index) in optionItems"> | |||||
<el-popover | |||||
v-if="item.type == 'braid-table'" | |||||
:key="index" | |||||
placement="top" | |||||
width="200" | |||||
v-model="tablePopover" | |||||
> | |||||
<div> | |||||
<el-checkbox-group v-model="item.selectCol"> | |||||
<el-row> | |||||
<el-col v-for="col in item.columnsAttr" :key="col.name" :span="12"> | |||||
<el-checkbox :label="col.name">{{col.title}}</el-checkbox> | |||||
</el-col> | |||||
</el-row> | |||||
</el-checkbox-group> | |||||
<el-button size="mini" type="primary" @click="(e) => {addTempItem(e,item)}">确定</el-button> | |||||
</div> | |||||
<el-button size="mini" slot="reference">{{ item.title }}</el-button> | |||||
</el-popover> | |||||
<el-button | |||||
v-else | |||||
size="mini" | |||||
:key="index" | |||||
@click="(e) => {addTempItem(e,item)}" | |||||
>{{ item.title }}</el-button> | |||||
</template> | |||||
</div> | |||||
</template> | |||||
<script> | |||||
export default { | |||||
data() { | |||||
return { | |||||
tablePopover: false, | |||||
} | |||||
}, | |||||
computed: { | |||||
optionItems() { | |||||
return this.$vptd.state.optionItems | |||||
}, | |||||
}, | |||||
methods: { | |||||
// 添加组件 | |||||
addTempItem(e, item) { | |||||
switch (item.type) { | |||||
case 'braid-table': { | |||||
let selectCol = [] | |||||
item.selectCol.forEach((itemName) => { | |||||
let colInfo = item.columnsAttr.find((col) => col.name === itemName) | |||||
if (colInfo) { | |||||
selectCol.push(colInfo) | |||||
} | |||||
}) | |||||
item.columns = selectCol //表格显示的字段 | |||||
this.$vptd.dispatch('addTempItem', item) | |||||
this.tablePopover = false | |||||
break | |||||
} | |||||
default: | |||||
this.$vptd.dispatch('addTempItem', item) | |||||
} | |||||
}, | |||||
}, | |||||
} | |||||
</script> | |||||
<style lang="scss" scoped> | |||||
.options-box { | |||||
.el-button { | |||||
margin-bottom: 10px; | |||||
margin-right: 10px; | |||||
margin-left: 0; | |||||
} | |||||
} | |||||
</style> |
@@ -0,0 +1,66 @@ | |||||
<template> | |||||
<div> | |||||
<el-form label-width="80px" :model="pageInfo" size="mini" class="kr-form"> | |||||
<el-row> | |||||
<el-form-item label="模板名称"> | |||||
<el-input v-model="pageInfo.title" class="full-w"></el-input> | |||||
</el-form-item> | |||||
</el-row> | |||||
<el-row> | |||||
<el-col :span="12"> | |||||
<el-form-item label="模板宽度"> | |||||
<el-input-number | |||||
v-model="pageInfo.width" | |||||
controls-position="right" | |||||
:min="0" | |||||
class="min-input" | |||||
></el-input-number> | |||||
</el-form-item> | |||||
</el-col> | |||||
<el-col :span="12"> | |||||
<el-form-item label="模板高度"> | |||||
<el-input-number | |||||
v-model="pageInfo.height" | |||||
controls-position="right" | |||||
:min="0" | |||||
class="min-input" | |||||
></el-input-number> | |||||
</el-form-item> | |||||
</el-col> | |||||
</el-row> | |||||
<el-row> | |||||
<el-form-item label="纸张宽度"> | |||||
<el-input-number | |||||
v-model="pageInfo.pageWidth" | |||||
controls-position="right" | |||||
:min="0" | |||||
class="min-input" | |||||
></el-input-number> | |||||
<span class="unit-text">(mm)</span> | |||||
</el-form-item> | |||||
</el-row> | |||||
<el-row> | |||||
<el-form-item label="纸张高度"> | |||||
<el-input-number | |||||
v-model="pageInfo.pageHeight" | |||||
controls-position="right" | |||||
:min="0" | |||||
class="min-input" | |||||
></el-input-number> | |||||
<span class="unit-text">(mm)</span> | |||||
</el-form-item> | |||||
</el-row> | |||||
</el-form> | |||||
</div> | |||||
</template> | |||||
<script> | |||||
export default { | |||||
computed: { | |||||
pageInfo() { | |||||
return this.$vptd.state.page | |||||
}, | |||||
}, | |||||
} | |||||
</script> | |||||
@@ -0,0 +1,193 @@ | |||||
<template> | |||||
<div> | |||||
<!-- 公共属性 --> | |||||
<el-form label-width="80px" :model="activeElement" size="mini" class="kr-form"> | |||||
<el-row> | |||||
<el-col :span="12"> | |||||
<el-form-item label="宽度"> | |||||
<el-input-number | |||||
v-model="activeElement.width" | |||||
controls-position="right" | |||||
:min="1" | |||||
class="min-input" | |||||
></el-input-number> | |||||
</el-form-item> | |||||
</el-col> | |||||
<el-col :span="12"> | |||||
<el-form-item label="高度"> | |||||
<el-input-number | |||||
v-model="activeElement.height" | |||||
controls-position="right" | |||||
:min="1" | |||||
class="min-input" | |||||
></el-input-number> | |||||
</el-form-item> | |||||
</el-col> | |||||
</el-row> | |||||
<el-row> | |||||
<el-col :span="12"> | |||||
<el-form-item label="横坐标"> | |||||
<el-input-number | |||||
v-model="activeElement.left" | |||||
controls-position="right" | |||||
:min="0" | |||||
class="min-input" | |||||
></el-input-number> | |||||
</el-form-item> | |||||
</el-col> | |||||
<el-col :span="12"> | |||||
<el-form-item label="纵坐标"> | |||||
<el-input-number | |||||
v-model="activeElement.top" | |||||
controls-position="right" | |||||
:min="0" | |||||
class="min-input" | |||||
></el-input-number> | |||||
</el-form-item> | |||||
</el-col> | |||||
</el-row> | |||||
<el-row> | |||||
<el-col :span="12"> | |||||
<el-form-item label="字号"> | |||||
<el-input-number | |||||
:disabled="activeElement.style.FontSize===undefined" | |||||
v-model="activeElement.style.FontSize" | |||||
controls-position="right" | |||||
:min="0" | |||||
class="min-input" | |||||
></el-input-number> | |||||
</el-form-item> | |||||
</el-col> | |||||
<el-col :span="12"> | |||||
<el-form-item label="加粗"> | |||||
<el-switch | |||||
:disabled="activeElement.style.Bold===undefined" | |||||
v-model="activeElement.style.Bold" | |||||
:active-value="true" | |||||
:inactive-value="false" | |||||
></el-switch> | |||||
</el-form-item> | |||||
</el-col> | |||||
</el-row> | |||||
<el-row> | |||||
<el-col :span="8"> | |||||
<el-form-item label="字体颜色"> | |||||
<el-color-picker | |||||
:disabled="activeElement.style.FontColor===undefined" | |||||
v-model="activeElement.style.FontColor" | |||||
></el-color-picker> | |||||
</el-form-item> | |||||
</el-col> | |||||
<el-col :span="8"> | |||||
<el-form-item label="边框颜色"> | |||||
<el-color-picker | |||||
:disabled="activeElement.style.BorderColor===undefined" | |||||
v-model="activeElement.style.BorderColor" | |||||
></el-color-picker> | |||||
</el-form-item> | |||||
</el-col> | |||||
<el-col :span="8"> | |||||
<el-form-item label="条码值"> | |||||
<el-switch | |||||
:disabled="activeElement.style.ShowBarText===undefined" | |||||
v-model="activeElement.style.ShowBarText" | |||||
:active-value="true" | |||||
:inactive-value="false" | |||||
></el-switch> | |||||
</el-form-item> | |||||
</el-col> | |||||
</el-row> | |||||
<el-row> | |||||
<el-form-item label="对齐方式"> | |||||
<el-radio-group | |||||
:disabled="activeElement.style.Alignment===undefined" | |||||
v-model="activeElement.style.Alignment" | |||||
> | |||||
<el-radio :label="'left'">左对齐</el-radio> | |||||
<el-radio :label="'center'">居中</el-radio> | |||||
<el-radio :label="'right'">右对齐</el-radio> | |||||
</el-radio-group> | |||||
</el-form-item> | |||||
</el-row> | |||||
<el-row> | |||||
<el-col :span="12"> | |||||
<el-form-item label="条码类型"> | |||||
<el-select | |||||
:disabled="activeElement.style.codeType===undefined" | |||||
v-model="activeElement.style.codeType" | |||||
class="min-input" | |||||
> | |||||
<el-option v-for="val in codeTypeArray" :key="val" :label="val" :value="val" /> | |||||
</el-select> | |||||
</el-form-item> | |||||
</el-col> | |||||
<el-col :span="12"> | |||||
<el-form-item label="打印类型"> | |||||
<el-select | |||||
:disabled="activeElement.style.ItemType===undefined" | |||||
v-model="activeElement.style.ItemType" | |||||
class="min-input" | |||||
> | |||||
<el-option | |||||
v-for="val in itemTypeArray" | |||||
:key="val.value" | |||||
:label="val.label" | |||||
:value="val.value" | |||||
/> | |||||
</el-select> | |||||
</el-form-item> | |||||
</el-col> | |||||
<el-col :span="12"> | |||||
<el-form-item label="高度自动"> | |||||
<el-switch | |||||
:disabled="activeElement.style.AutoHeight===undefined" | |||||
v-model="activeElement.style.AutoHeight" | |||||
:active-value="true" | |||||
:inactive-value="false" | |||||
></el-switch> | |||||
</el-form-item> | |||||
</el-col> | |||||
<el-col :span="12"> | |||||
<el-form-item label="下边距"> | |||||
<el-input-number | |||||
:disabled="activeElement.style.BottomMargin===undefined || !activeElement.style.AutoHeight" | |||||
v-model="activeElement.style.BottomMargin" | |||||
controls-position="right" | |||||
:min="0" | |||||
class="min-input" | |||||
></el-input-number> | |||||
</el-form-item> | |||||
</el-col> | |||||
</el-row> | |||||
</el-form> | |||||
</div> | |||||
</template> | |||||
<script> | |||||
import { getCodeTypeArray, getItemTypeArray } from '../../libs/props.js' | |||||
export default { | |||||
data() { | |||||
return { | |||||
codeTypeArray: getCodeTypeArray(), | |||||
itemTypeArray: getItemTypeArray(), | |||||
} | |||||
}, | |||||
computed: { | |||||
activeElement() { | |||||
return this.$vptd.state.activeElement | |||||
}, | |||||
// 页面高度 | |||||
height() { | |||||
return this.$vptd.state.page.height | |||||
}, | |||||
}, | |||||
} | |||||
</script> | |||||
<style lang="scss" scoped> | |||||
.mini-form { | |||||
::v-deep.el-form-item--mini.el-form-item { | |||||
margin-bottom: 10px; | |||||
} | |||||
} | |||||
</style> |
@@ -0,0 +1,173 @@ | |||||
<template> | |||||
<div id="viewport" data-type="viewport" class="holder"> | |||||
<div | |||||
:style="{ | |||||
height: page.height + 'px', | |||||
width: page.width + 'px', | |||||
backgroundImage: 'url('+backImg+')' | |||||
}" | |||||
class="screen" | |||||
> | |||||
<!-- 组件 --> | |||||
<component | |||||
v-for="val in widgetStore" | |||||
:is="val.type" | |||||
:data-title="val.type" | |||||
:class="{'active': widgetId === val.uuid}" | |||||
:key="val.uuid" | |||||
:val="val" | |||||
:data-type="val.type" | |||||
:data-uuid="val.uuid" | |||||
class="layer" | |||||
></component> | |||||
<!-- 参考线 --> | |||||
<!-- <ref /> --> | |||||
<!-- 尺寸控制器 --> | |||||
<control /> | |||||
</div> | |||||
</div> | |||||
</template> | |||||
<script> | |||||
import control from './size-control.vue' | |||||
import move from '../../mixins/move' | |||||
export default { | |||||
components: { | |||||
control, // 尺寸控制 | |||||
}, | |||||
mixins: [move], | |||||
data() { | |||||
return {} | |||||
}, | |||||
computed: { | |||||
// 已添加的组件 | |||||
widgetStore() { | |||||
return this.$vptd.state.page.tempItems | |||||
}, | |||||
// 背景图地址 | |||||
backImg() { | |||||
return this.$vptd.state.page.imageUrl ? this.$vptd.state.page.imageUrl : '' | |||||
}, | |||||
// 画布高度 | |||||
page() { | |||||
return this.$vptd.state.page | |||||
}, | |||||
// 选中项id | |||||
widgetId() { | |||||
return this.$vptd.state.uuid | |||||
}, | |||||
}, | |||||
mounted() { | |||||
// 采用事件代理的方式监听元件的选中操作 | |||||
let viewportDom = document.getElementById('viewport') | |||||
if (viewportDom) { | |||||
viewportDom.addEventListener('mousedown', this.handleSelection, false) | |||||
} else { | |||||
console.error('未找的‘viewport’节点') | |||||
} | |||||
// 绑定键盘上下左右键用于元件的移动 | |||||
document.addEventListener( | |||||
'keydown', | |||||
(e) => { | |||||
e.stopPropagation() | |||||
var target = this.$vptd.state.activeElement | |||||
// 左 | |||||
if (e.keyCode === 37 && target.left) { | |||||
target.left -= 1 | |||||
return | |||||
} | |||||
// 上 | |||||
if (e.keyCode === 38 && target.top) { | |||||
e.preventDefault() | |||||
target.top -= 1 | |||||
return | |||||
} | |||||
// 右 | |||||
if (e.keyCode === 39 && target.left) { | |||||
target.left += 1 | |||||
return | |||||
} | |||||
// 下 | |||||
if (e.keyCode === 40 && target.top) { | |||||
e.preventDefault() | |||||
target.top += 1 | |||||
} | |||||
}, | |||||
true | |||||
) | |||||
}, | |||||
methods: { | |||||
/** | |||||
* 目标元素获得焦点 | |||||
*/ | |||||
handleSelection(e) { | |||||
var target = this.selectTarget(e.target) | |||||
if (target) { | |||||
var uuid = target.getAttribute('data-uuid') | |||||
// 设置选中元素 | |||||
this.$vptd.commit('select', { | |||||
uuid: uuid || -1, | |||||
}) | |||||
// 绑定移动事件:除背景图以外的元件才能移动 | |||||
target = this.$vptd.state.activeElement | |||||
if (target.dragable) { | |||||
this.initmovement(e) // 参见 mixins | |||||
} | |||||
} else { | |||||
// 取消选中元素 | |||||
this.$vptd.commit('select', { | |||||
uuid: -1, | |||||
}) | |||||
} | |||||
}, | |||||
/** | |||||
* 获得选中的目标,如果没有返回false | |||||
*/ | |||||
selectTarget(target) { | |||||
let type = target.getAttribute('data-type') | |||||
if (type) { | |||||
if (type === 'viewport') { | |||||
return false | |||||
} else { | |||||
return target | |||||
} | |||||
} else { | |||||
return this.selectTarget(target.parentNode) | |||||
} | |||||
}, | |||||
}, | |||||
} | |||||
</script> | |||||
<style scoped> | |||||
.holder { | |||||
display: flex; | |||||
justify-content: center; | |||||
overflow: auto; | |||||
font-size: 0; | |||||
border: 1px solid #f5f5f5; | |||||
border-width: 0 1px; | |||||
background-image: linear-gradient(45deg, #f5f5f5 25%, transparent 0, transparent 75%, #f5f5f5 0), | |||||
linear-gradient(45deg, #f5f5f5 25%, transparent 0, transparent 75%, #f5f5f5 0); | |||||
background-position: 0 0, 13px 13px; | |||||
background-size: 26px 26px; | |||||
} | |||||
.screen { | |||||
margin: 25px auto; | |||||
transform-origin: center top; | |||||
position: relative; | |||||
box-shadow: 0 0 5px 1px #cccccc; | |||||
background-color: #ffffff; | |||||
background-repeat: no-repeat; | |||||
} | |||||
</style> |
@@ -0,0 +1,139 @@ | |||||
<template> | |||||
<div v-show="optionsType !=='page'"> | |||||
<!-- 左 --> | |||||
<div | |||||
:style="{ | |||||
height: elm.height + 'px', | |||||
top: elm.top + 'px', | |||||
left: elm.left + 'px' | |||||
}" | |||||
class="verti" | |||||
@mousedown="handlemousedown($event, 'left', 'left', 'width')" | |||||
> | |||||
<div class="square" /> | |||||
</div> | |||||
<!-- 右 --> | |||||
<div | |||||
:style="{ | |||||
height: elm.height + 'px', | |||||
top: elm.top + 'px', | |||||
left: elm.left + elm.width + 'px' | |||||
}" | |||||
class="verti" | |||||
@mousedown="handlemousedown($event, 'right', 'width')" | |||||
> | |||||
<div class="square" /> | |||||
</div> | |||||
<!-- 上 --> | |||||
<div | |||||
:style="{ | |||||
width: elm.width + 'px', | |||||
top: elm.top + 'px', | |||||
left: elm.left + 'px' | |||||
}" | |||||
class="horiz" | |||||
@mousedown="handlemousedown($event, 'up', 'top', 'height')" | |||||
> | |||||
<div class="square" /> | |||||
</div> | |||||
<!-- 下 --> | |||||
<div | |||||
:style="{ | |||||
width: elm.width + 'px', | |||||
top: elm.top + elm.height + 'px', | |||||
left: elm.left + 'px' | |||||
}" | |||||
class="horiz" | |||||
@mousedown="handlemousedown($event, 'down', 'height')" | |||||
> | |||||
<div class="square" /> | |||||
</div> | |||||
</div> | |||||
</template> | |||||
<script> | |||||
export default { | |||||
data() { | |||||
return { | |||||
type: '', // 调整方向 left | right | up | down | |||||
} | |||||
}, | |||||
computed: { | |||||
optionsType() { | |||||
return this.$vptd.state.type | |||||
}, | |||||
elm() { | |||||
let target = this.$vptd.state.activeElement | |||||
if (!target.resizable) return '' | |||||
return target | |||||
}, | |||||
}, | |||||
methods: { | |||||
handlemousedown(e, type, originX, originY) { | |||||
e.stopPropagation() | |||||
this.type = type | |||||
this.$vptd.commit('initmove', { | |||||
startX: e.pageX, | |||||
startY: e.pageY, | |||||
originX: this.elm[originX], | |||||
originY: this.elm[originY], | |||||
}) | |||||
document.addEventListener('mousemove', this.handlemousemove, true) | |||||
document.addEventListener('mouseup', this.handlemouseup, true) | |||||
}, | |||||
handlemousemove(e) { | |||||
e.stopPropagation() | |||||
e.preventDefault() | |||||
this.$vptd.commit('resize', { | |||||
x: e.pageX, | |||||
y: e.pageY, | |||||
type: this.type, | |||||
}) | |||||
}, | |||||
handlemouseup() { | |||||
document.removeEventListener('mousemove', this.handlemousemove, true) | |||||
document.removeEventListener('mouseup', this.handlemouseup, true) | |||||
this.$vptd.commit('stopmove') | |||||
}, | |||||
}, | |||||
} | |||||
</script> | |||||
<style scoped> | |||||
.verti, | |||||
.horiz { | |||||
position: absolute; | |||||
z-index: 999; | |||||
display: flex; | |||||
justify-content: center; | |||||
align-items: center; | |||||
} | |||||
.verti { | |||||
width: 0; | |||||
cursor: ew-resize; | |||||
} | |||||
.horiz { | |||||
height: 0; | |||||
cursor: ns-resize; | |||||
} | |||||
.square { | |||||
box-sizing: border-box; | |||||
width: 6px; | |||||
height: 6px; | |||||
border: 1px solid #2196f3; | |||||
background-color: #fff; | |||||
position: absolute; | |||||
top: 50%; | |||||
left: 50%; | |||||
transform: translate(-50%, -50%); | |||||
} | |||||
</style> |
@@ -0,0 +1,97 @@ | |||||
<template> | |||||
<div | |||||
class="bar-code" | |||||
:style="{ | |||||
position: 'absolute', | |||||
width: val.width + 'px', | |||||
height: val.height + 'px', | |||||
left: val.left + 'px', | |||||
top: val.top +'px', | |||||
zIndex: val.zIndex, | |||||
}" | |||||
> | |||||
<img :src="codeUrl" /> | |||||
<div | |||||
class="text" | |||||
:style="{ | |||||
display:val.style.ShowBarText ? '' : 'none', | |||||
fontSize: val.style.FontSize + 'pt', | |||||
fontWeight: val.style.Bold ? 'bold' : 'normal' | |||||
}" | |||||
>1234567890</div> | |||||
</div> | |||||
</template> | |||||
<script> | |||||
const WIDGET_NAME = 'bar-code' | |||||
export default { | |||||
name: WIDGET_NAME, | |||||
setting: { | |||||
type: WIDGET_NAME, | |||||
isEdit: false, | |||||
dragable: true, // 是否可拖拽 | |||||
resizable: true, // 尺寸是否可变 | |||||
width: 120, | |||||
height: 40, | |||||
left: 50, | |||||
top: 0, | |||||
title: '条码', | |||||
value: '1234567890', | |||||
defaultValue: '1234567890', | |||||
name: '', | |||||
style: { | |||||
zIndex: 0, | |||||
FontSize: 9, | |||||
ShowBarText: false, // 条码是否显示值 0--不显示 1--显示 | |||||
codeType: 'Code39', // 条码类型 | |||||
ItemType: 0, // 打印类型 0--普通项 1--页眉页脚 2--页号项 3--页数项 4--多页项 | |||||
}, | |||||
}, | |||||
props: ['val'], | |||||
data() { | |||||
return { | |||||
// codeImg: require('../../../assets/image/barCode.png'), | |||||
} | |||||
}, | |||||
computed: { | |||||
// 'QRCode', 'PDF417' | |||||
codeUrl() { | |||||
if (this.val.style.codeType === 'QRCode') { | |||||
return require('./QRCode.png') | |||||
} else if (this.val.style.codeType === 'PDF417') { | |||||
return require('./PDF417.png') | |||||
} else { | |||||
return require('./barCode.png') | |||||
} | |||||
}, | |||||
}, | |||||
} | |||||
</script> | |||||
<style lang="scss" scoped> | |||||
.bar-code { | |||||
&:hover { | |||||
outline: 1px solid #ddd !important; | |||||
} | |||||
&.active { | |||||
outline: 1px solid #2196f3 !important; | |||||
&:hover { | |||||
outline: 1px solid #2196f3 !important; | |||||
} | |||||
} | |||||
img { | |||||
width: 100%; | |||||
height: 100%; | |||||
user-select: none; | |||||
-webkit-user-drag: none; | |||||
pointer-events: none; | |||||
} | |||||
.text { | |||||
position: absolute; | |||||
left: 0; | |||||
bottom: 0; | |||||
width: 100%; | |||||
text-align: center; | |||||
background-color: #ffffff; | |||||
} | |||||
} | |||||
</style> |
@@ -0,0 +1,60 @@ | |||||
<template> | |||||
<div | |||||
class="widgets" | |||||
v-html="val.value" | |||||
:contenteditable="!!val.isEdit" | |||||
@blur="(e) => updateText(e, val.uuid)" | |||||
:style="{ | |||||
position:'absolute', | |||||
left: val.left + 'px' , | |||||
top: val.top + 'px', | |||||
width: val.width + 'px', | |||||
minHeight: val.height + 'px', | |||||
zIndex: val.style.zIndex, | |||||
fontSize: val.style.FontSize + 'pt', | |||||
color: val.style.FontColor, | |||||
}" | |||||
></div> | |||||
</template> | |||||
<script> | |||||
const WIDGET_NAME = 'braid-html' | |||||
export default { | |||||
name: WIDGET_NAME, | |||||
setting: { | |||||
type: WIDGET_NAME, | |||||
isEdit: false, | |||||
dragable: true, // 是否可拖拽 | |||||
resizable: true, // 尺寸是否可变 | |||||
width: 120, | |||||
height: 40, | |||||
left: 50, | |||||
top: 0, | |||||
title: 'html', | |||||
value: '<div>html<div>', | |||||
defaultValue: '<div>html<div>', | |||||
name: '', | |||||
style: { | |||||
zIndex: 0, | |||||
ItemType: 0, // 打印类型 0--普通项 1--页眉页脚 2--页号项 3--页数项 4--多页项 | |||||
AutoHeight: false, // 高度自动(模板在该元素位置以下的元素都关联打印) | |||||
BottomMargin: 0, // 距离下边距 | |||||
}, | |||||
}, | |||||
props: [ | |||||
'val', // 文本对象 | |||||
], | |||||
methods: { | |||||
updateText(e, uuid) { | |||||
let text = e.target.innerHTML | |||||
this.$vptd.commit('updateData', { | |||||
uuid: uuid, | |||||
key: 'value', | |||||
value: text, | |||||
}) | |||||
}, | |||||
}, | |||||
} | |||||
</script> | |||||
@@ -0,0 +1,69 @@ | |||||
<template> | |||||
<div | |||||
class="widgets" | |||||
:style="{ | |||||
position: 'absolute', | |||||
width: val.width + 'px', | |||||
height: val.height + 'px', | |||||
left: val.left + 'px', | |||||
top: val.top +'px', | |||||
zIndex: val.zIndex | |||||
}" | |||||
> | |||||
<img class="braid-image" :title="val.title" :src="val.value || val.defaultValue" /> | |||||
</div> | |||||
</template> | |||||
<script> | |||||
const WIDGET_NAME = 'braid-image' | |||||
export default { | |||||
name: WIDGET_NAME, | |||||
setting: { | |||||
type: WIDGET_NAME, | |||||
title: '图片', | |||||
isEdit: false, | |||||
dragable: true, // 是否可拖拽 | |||||
resizable: true, // 尺寸是否可变 | |||||
width: 120, | |||||
height: 40, | |||||
left: 50, | |||||
top: 0, | |||||
value: '', | |||||
defaultValue: '', | |||||
name: '', | |||||
style: { | |||||
zIndex: 0, | |||||
ItemType: 0, // 打印类型 0--普通项 1--页眉页脚 2--页号项 3--页数项 4--多页项 | |||||
}, | |||||
}, | |||||
props: [ | |||||
'val', // 图片对象 | |||||
], | |||||
data() { | |||||
return {} | |||||
}, | |||||
computed: { | |||||
imageUrl() { | |||||
return this.val.value | |||||
}, | |||||
}, | |||||
watch: { | |||||
val(newVal) { | |||||
this.imageUrl = newVal.value | |||||
}, | |||||
}, | |||||
} | |||||
</script> | |||||
<style scoped> | |||||
.braid-image { | |||||
position: absolute; | |||||
top: 0; | |||||
left: 0; | |||||
width: 100%; | |||||
height: 100%; | |||||
user-select: none; | |||||
-webkit-user-drag: none; | |||||
pointer-events: none; | |||||
} | |||||
</style> |
@@ -0,0 +1,30 @@ | |||||
// import braidPic from './pic/index.vue' | |||||
import braidTxt from './txt/index.vue' | |||||
import barCode from './bar-code/index.vue' | |||||
import table from './table/index.vue' | |||||
import image from './image/index.vue' | |||||
import html from './html/index.vue' | |||||
const install = function (Vue) { | |||||
Vue.component(braidTxt.name, braidTxt) | |||||
Vue.component(barCode.name, barCode) | |||||
Vue.component(table.name, table) | |||||
Vue.component(image.name, image) | |||||
Vue.component(html.name, html) | |||||
} | |||||
const getWidgetsSetting = function () { | |||||
return { | |||||
[braidTxt.name]: braidTxt.setting, | |||||
[barCode.name]: barCode.setting, | |||||
[table.name]: table.setting, | |||||
[image.name]: image.setting, | |||||
[html.name]: html.setting, | |||||
} | |||||
} | |||||
export default { | |||||
install, | |||||
getWidgetsSetting | |||||
} |
@@ -0,0 +1,82 @@ | |||||
<template> | |||||
<div | |||||
class="widgets" | |||||
:style="{ | |||||
left: val.left + 'px' , | |||||
top: val.top + 'px', | |||||
width: val.width + 'px', | |||||
height: val.height + 'px', | |||||
textAlign: val.style.Alignment, | |||||
fontSize: val.style.FontSize + 'pt', | |||||
color: val.style.FontColor, | |||||
}" | |||||
style="position:absolute;overflow:hidden" | |||||
> | |||||
<table | |||||
border="1" | |||||
width="100%" | |||||
cellspacing="0" | |||||
cellpadding="2" | |||||
style="border-collapse:collapse;font-size:12px;" | |||||
bordercolor="#000000" | |||||
> | |||||
<tr> | |||||
<th | |||||
v-for="item in columns" | |||||
:key="item.name" | |||||
:width="item.name==='_seq'?40:''" | |||||
>{{item.title}}</th> | |||||
</tr> | |||||
<tr> | |||||
<td v-for="item in columns" :key="item.name">{{item.value}}</td> | |||||
</tr> | |||||
</table> | |||||
</div> | |||||
</template> | |||||
<script> | |||||
const WIDGET_NAME = 'braid-table' | |||||
export default { | |||||
name: WIDGET_NAME, | |||||
setting: { | |||||
type: WIDGET_NAME, | |||||
isEdit: false, // 是否可编辑 | |||||
dragable: true, // 是否可拖拽 | |||||
resizable: true, // 尺寸是否可变 | |||||
width: 240, | |||||
height: 60, | |||||
left: 50, | |||||
top: 10, | |||||
title: '表格', | |||||
value: [], | |||||
defaultValue: [], | |||||
tabelHtml: '', | |||||
columnsAttr: [], // 表格列选项 | |||||
columns: [], // 已选表格列表 | |||||
selectCol: [], // 已选表格列name数组(用于多选框双向绑定) | |||||
name: '', | |||||
style: { | |||||
zIndex: 0, | |||||
Alignment: 'left', // 对齐方式 1--左靠齐 2--居中 3--右靠齐 | |||||
FontSize: 9, | |||||
FontColor: '#000000', | |||||
BorderColor: '#000000', | |||||
AutoHeight: false, // 高度自动(模板在该元素位置以下的元素都关联打印) | |||||
BottomMargin: 0, // 距离下边距 | |||||
}, | |||||
}, | |||||
props: [ | |||||
'val', // 文本对象 | |||||
], | |||||
computed: { | |||||
// 去掉type='row'的数据 | |||||
columns() { | |||||
let col = this.val.columns || [] | |||||
return col | |||||
}, | |||||
}, | |||||
methods: {}, | |||||
} | |||||
</script> | |||||
@@ -0,0 +1,75 @@ | |||||
<template> | |||||
<div | |||||
class="widgets" | |||||
v-html="val.value" | |||||
:contenteditable="!!val.isEdit" | |||||
@blur="(e) => updateText(e, val.uuid)" | |||||
:style="{ | |||||
position:'absolute', | |||||
left: val.left + 'px' , | |||||
top: val.top + 'px', | |||||
width: val.width + 'px', | |||||
minHeight: val.height + 'px', | |||||
zIndex: val.style.zIndex, | |||||
fontSize: val.style.FontSize + 'pt', | |||||
color: val.style.FontColor, | |||||
textAlign: val.style.Alignment, | |||||
fontWeight: val.style.Bold ? 'bold': 'normal' | |||||
}" | |||||
></div> | |||||
</template> | |||||
<script> | |||||
// let itemAttr = { | |||||
// type: 'braid-txt', | |||||
// isEdit: 0, | |||||
// title: '收货人手机', | |||||
// value: '{收货人手机}', | |||||
// defaultValue: '18982068702', | |||||
// name: 'buyerPhone' | |||||
// } | |||||
const WIDGET_NAME = 'braid-txt' | |||||
export default { | |||||
name: WIDGET_NAME, | |||||
setting: { | |||||
type: WIDGET_NAME, | |||||
isEdit: true, | |||||
dragable: true, // 是否可拖拽 | |||||
resizable: true, // 尺寸是否可变 | |||||
width: 120, | |||||
height: 40, | |||||
left: 50, | |||||
top: 0, | |||||
title: '自定义文本', | |||||
value: '自定义文本', | |||||
defaultValue: '自定义文本', | |||||
name: '', | |||||
style: { | |||||
zIndex: 0, | |||||
FontSize: 9, | |||||
FontColor: '#000000', | |||||
Bold: false, // 1代表粗体,0代表非粗体 | |||||
Italic: false, // 1代表斜体,0代表非斜体 | |||||
Underline: false, // 1代表有下划线,0代表无下划线 | |||||
Alignment: 'left', // 对齐方式 | |||||
ItemType: 0, // 打印类型 0--普通项 1--页眉页脚 2--页号项 3--页数项 4--多页项 | |||||
}, | |||||
}, | |||||
props: [ | |||||
'val', // 文本对象 | |||||
], | |||||
methods: { | |||||
updateText(e, uuid) { | |||||
let text = e.target.innerHTML | |||||
this.$vptd.commit('updateData', { | |||||
uuid: uuid, | |||||
key: 'value', | |||||
value: text, | |||||
}) | |||||
}, | |||||
}, | |||||
} | |||||
</script> | |||||
@@ -0,0 +1,69 @@ | |||||
import KrPrintDesigner from './App.vue' | |||||
import { | |||||
Button, | |||||
Scrollbar, | |||||
Input, | |||||
InputNumber, | |||||
Switch, | |||||
Select, | |||||
Option, | |||||
RadioGroup, | |||||
Radio, | |||||
Popover, | |||||
Checkbox, | |||||
CheckboxGroup, | |||||
Row, | |||||
Col, | |||||
Collapse, | |||||
CollapseItem, | |||||
Form, | |||||
FormItem, | |||||
Tag, | |||||
ColorPicker, | |||||
} from 'element-ui'; | |||||
import './assets/style/index.scss' | |||||
// LODOP打印服务 | |||||
import './libs/lodop/LodopFuncs.js' | |||||
import lodop from './libs/lodop/index.js' | |||||
import vptd from './store/index' | |||||
import widgets from '@/components/widgets/index' | |||||
const install = function (Vue, opts = {}) { | |||||
Vue.component(Button.name, Button) | |||||
Vue.component(Scrollbar.name, Scrollbar) | |||||
Vue.component(Input.name, Input) | |||||
Vue.component(InputNumber.name, InputNumber) | |||||
Vue.component(Switch.name, Switch) | |||||
Vue.component(Select.name, Select) | |||||
Vue.component(Option.name, Option) | |||||
Vue.component(RadioGroup.name, RadioGroup) | |||||
Vue.component(Radio.name, Radio) | |||||
Vue.component(Popover.name, Popover) | |||||
Vue.component(Checkbox.name, Checkbox) | |||||
Vue.component(CheckboxGroup.name, CheckboxGroup) | |||||
Vue.component(Row.name, Row) | |||||
Vue.component(Col.name, Col) | |||||
Vue.component(Collapse.name, Collapse) | |||||
Vue.component(CollapseItem.name, CollapseItem) | |||||
Vue.component(Form.name, Form) | |||||
Vue.component(FormItem.name, FormItem) | |||||
Vue.component(Tag.name, Tag) | |||||
Vue.component(ColorPicker.name, ColorPicker) | |||||
Vue.use(widgets); | |||||
Vue.component('kr-print-designer', KrPrintDesigner) | |||||
Vue.prototype.$lodop = lodop | |||||
Vue.prototype.$vptd = vptd | |||||
}; | |||||
if (typeof window !== 'undefined' && window.Vue) { | |||||
install(window.Vue); | |||||
} | |||||
export default { | |||||
install, | |||||
KrPrintDesigner | |||||
} |
@@ -0,0 +1,162 @@ | |||||
import { MessageBox } from 'element-ui' | |||||
//==本JS是加载Lodop插件及CLodop服务的综合示例,可直接使用,建议看懂后融进自己页面程序== | |||||
var CreatedOKLodopObject, CLodopIsLocal, CLodopJsState | |||||
//==判断是否需要CLodop(那些不支持插件的浏览器):== | |||||
function needCLodop() { | |||||
try { | |||||
var ua = navigator.userAgent | |||||
if (ua.match(/Windows\sPhone/i)) | |||||
return true | |||||
if (ua.match(/iPhone|iPod|iPad/i)) | |||||
return true | |||||
if (ua.match(/Android/i)) | |||||
return true | |||||
if (ua.match(/Edge\D?\d+/i)) | |||||
return true | |||||
var verTrident = ua.match(/Trident\D?\d+/i) | |||||
var verIE = ua.match(/MSIE\D?\d+/i) | |||||
var verOPR = ua.match(/OPR\D?\d+/i) | |||||
var verFF = ua.match(/Firefox\D?\d+/i) | |||||
var x64 = ua.match(/x64/i) | |||||
if ((!verTrident) && (!verIE) && (x64)) | |||||
return true | |||||
else if (verFF) { | |||||
verFF = verFF[0].match(/\d+/) | |||||
if ((verFF[0] >= 41) || (x64)) | |||||
return true | |||||
} else if (verOPR) { | |||||
verOPR = verOPR[0].match(/\d+/) | |||||
if (verOPR[0] >= 32) | |||||
return true | |||||
} else if ((!verTrident) && (!verIE)) { | |||||
var verChrome = ua.match(/Chrome\D?\d+/i) | |||||
if (verChrome) { | |||||
verChrome = verChrome[0].match(/\d+/) | |||||
if (verChrome[0] >= 41) | |||||
return true | |||||
} | |||||
} | |||||
return false | |||||
} catch (err) { | |||||
return true | |||||
} | |||||
} | |||||
//==引用CLodop的主JS,用双端口8000和18000(以防其中一个被占):== | |||||
if (needCLodop()) { | |||||
var head = document.head || document.getElementsByTagName('head')[0] || document.documentElement | |||||
var JS1 = document.createElement('script') | |||||
JS1.src = 'http://localhost:8000/CLodopfuncs.js?priority=1' | |||||
head.insertBefore(JS1, head.firstChild) | |||||
var JS2 = document.createElement('script') | |||||
JS2.src = 'http://localhost:18000/CLodopfuncs.js?priority=0' | |||||
head.insertBefore(JS2, head.firstChild) | |||||
CLodopIsLocal = !!((JS1.src + JS2.src).match(/\/\/localho|\/\/127.0.0./i)) | |||||
if (JS1.attachEvent) { | |||||
CLodopJsState = 'loading' | |||||
var onChange = function () { | |||||
if (window.event.srcElement.readyState == 'loaded') | |||||
CLodopJsState = 'complete' | |||||
} | |||||
JS1.attachEvent('onreadystatechange', onChange) | |||||
JS2.attachEvent('onreadystatechange', onChange) | |||||
} | |||||
} | |||||
// / | |||||
//==获取LODOP对象主过程,判断是否安装、需否升级:== | |||||
function getLodop(oOBJECT, oEMBED) { | |||||
let exeUrl = 'http://www.lodop.net/download.html' | |||||
var strHtmInstall = '<br><font color=\'#FF00FF\'>打印控件未安装!点击这里<a href=' + exeUrl + ' target=\'_blank\'>下载</a>,安装后请刷新页面或重新进入。</font>' | |||||
var strHtmUpdate = '<br><font color=\'#FF00FF\'>打印控件需要升级!点击这里<a href=' + exeUrl + ' target=\'_blank\'>下载</a>,升级后请重新进入。</font>' | |||||
var strHtm64_Install = '<br><font color=\'#FF00FF\'>打印控件未安装!点击这里<a href=' + exeUrl + ' target=\'_blank\'>下载</a>,安装后请刷新页面或重新进入。</font>' | |||||
var strHtm64_Update = '<br><font color=\'#FF00FF\'>打印控件需要升级!点击这里<a href=' + exeUrl + ' target=\'_blank\'>下载</a>,升级后请重新进入。</font>' | |||||
var strHtmFireFox = '<br><font color=\'#FF00FF\'>(注意:如曾安装过Lodop旧版附件npActiveXPLugin,请在【工具】->【附加组件】->【扩展】中先卸它)</font>' | |||||
var strHtmChrome = '<br><font color=\'#FF00FF\'>(如果此前正常,仅因浏览器升级或重安装而出问题,需重新执行以上安装)</font>' | |||||
var strCLodopInstall_1 = '<br><font color=\'#FF00FF\'>Web打印服务CLodop未安装启动,点击这里<a href=' + exeUrl + ' target=\'_blank\'>下载</a>,' | |||||
var strCLodopInstall_2 = '<br>(若此前已安装过,可<a href=\'CLodop.protocol:setup\' target=\'_self\'>点这里直接再次启动</a>)' | |||||
var strCLodopInstall_3 = ',成功后请刷新本页面。</font>' | |||||
var strCLodopUpdate = '<br><font color=\'#FF00FF\'>Web打印服务CLodop需升级!点击这里<a href=' + exeUrl + ' target=\'_blank\'>下载</a>,,升级后请刷新页面。</font>' | |||||
var LODOP | |||||
try { | |||||
var ua = navigator.userAgent | |||||
var isIE = !!(ua.match(/MSIE/i)) || !!(ua.match(/Trident/i)) | |||||
if (needCLodop()) { | |||||
try { | |||||
LODOP = window.getCLodop() | |||||
} catch (err) { '' } | |||||
if (!LODOP && (document.readyState !== 'complete' || (isIE && CLodopJsState == 'loading'))) { | |||||
alert('网页还没下载完毕,请稍等一下再操作.') | |||||
return | |||||
} | |||||
if (!LODOP) { | |||||
MessageBox.alert(strCLodopInstall_1 + (CLodopIsLocal ? strCLodopInstall_2 : '') + strCLodopInstall_3, '提示', { | |||||
dangerouslyUseHTMLString: true | |||||
}) | |||||
//document.body.innerHTML = strCLodopInstall_1 + (CLodopIsLocal ? strCLodopInstall_2 : '') + strCLodopInstall_3 + document.body.innerHTML | |||||
return | |||||
} else { | |||||
if (window.CLODOP.CVERSION < '3.0.9.3') { | |||||
MessageBox.alert(strCLodopUpdate, '提示', { dangerouslyUseHTMLString: true }) | |||||
//document.body.innerHTML = strCLodopUpdate + document.body.innerHTML | |||||
} | |||||
if (oEMBED && oEMBED.parentNode) | |||||
oEMBED.parentNode.removeChild(oEMBED) | |||||
if (oOBJECT && oOBJECT.parentNode) | |||||
oOBJECT.parentNode.removeChild(oOBJECT) | |||||
} | |||||
} else { | |||||
var is64IE = isIE && !!(ua.match(/x64/i)) | |||||
//==如果页面有Lodop就直接使用,否则新建:== | |||||
if (oOBJECT || oEMBED) { | |||||
if (isIE) | |||||
LODOP = oOBJECT | |||||
else | |||||
LODOP = oEMBED | |||||
} else if (!CreatedOKLodopObject) { | |||||
LODOP = document.createElement('object') | |||||
LODOP.setAttribute('width', 0) | |||||
LODOP.setAttribute('height', 0) | |||||
LODOP.setAttribute('style', 'position:absolute;left:0px;top:-100px;width:0px;height:0px;') | |||||
if (isIE) | |||||
LODOP.setAttribute('classid', 'clsid:2105C259-1E0C-4534-8141-A753534CB4CA') | |||||
else | |||||
LODOP.setAttribute('type', 'application/x-print-lodop') | |||||
document.documentElement.appendChild(LODOP) | |||||
CreatedOKLodopObject = LODOP | |||||
} else | |||||
LODOP = CreatedOKLodopObject | |||||
//==Lodop插件未安装时提示下载地址:== | |||||
if ((!LODOP) || (!LODOP.VERSION)) { | |||||
if (ua.indexOf('Chrome') >= 0) | |||||
MessageBox.alert(strHtmChrome, '提示', { dangerouslyUseHTMLString: true }) | |||||
//document.body.innerHTML = strHtmChrome + document.body.innerHTML | |||||
if (ua.indexOf('Firefox') >= 0) | |||||
MessageBox.alert((is64IE ? strHtm64_Install : strHtmInstall) + strHtmFireFox, '提示', { dangerouslyUseHTMLString: true }) | |||||
// document.body.innerHTML = strHtmFireFox + document.body.innerHTML | |||||
// document.body.innerHTML = (is64IE ? strHtm64_Install : strHtmInstall) + document.body.innerHTML | |||||
return LODOP | |||||
} | |||||
} | |||||
if (LODOP.VERSION < '6.2.2.6') { | |||||
if (!needCLodop()) | |||||
MessageBox.alert((is64IE ? strHtm64_Update : strHtmUpdate), '提示', { dangerouslyUseHTMLString: true }) | |||||
//document.body.innerHTML = (is64IE ? strHtm64_Update : strHtmUpdate) + document.body.innerHTML | |||||
} | |||||
//===如下空白位置适合调用统一功能(如注册语句、语言选择等):== | |||||
//======================================================= | |||||
return LODOP | |||||
} catch (err) { | |||||
alert('getLodop出错:' + err) | |||||
} | |||||
} | |||||
export default getLodop |
@@ -0,0 +1,296 @@ | |||||
import getLodop from './LodopFuncs' | |||||
import cloneDeep from 'lodash/cloneDeep' | |||||
import { tableTempTohtml, imageTempTohtml, strTempToValue, htmlTempTohtml } from './tools' | |||||
let strCompanyName = '' | |||||
let strLicense = '' | |||||
let strLicenseA = '' | |||||
let strLicenseB = '' | |||||
export default { print, preview, previewTemp, setLicenses } | |||||
/** | |||||
* 设置Lodop打印软件产品注册信息 | |||||
* @param {*} licenseInfo | |||||
*/ | |||||
function setLicenses(licenseInfo) { | |||||
strCompanyName = licenseInfo.strCompanyName || '' | |||||
strLicense = licenseInfo.strLicense || '' | |||||
strLicenseA = licenseInfo.strLicenseA || '' | |||||
strLicenseB = licenseInfo.strLicenseB || '' | |||||
} | |||||
/** | |||||
* 打印功能 | |||||
* @param {*Object} temp 打印模板 | |||||
* @param {*Array} data 打印数据 | |||||
*/ | |||||
function print(temp, data) { | |||||
let LODOP = _CreateLodop(temp.title, temp.width, temp.height, temp.pageWidth, temp.pageHeight) | |||||
let tempItems = cloneDeep(temp.tempItems) | |||||
let printContent = _TempParser(tempItems, data) | |||||
if (printContent.length > 1) { | |||||
// 打印多份 | |||||
printContent.forEach((aPrint, index) => { | |||||
LODOP.NewPageA() | |||||
aPrint.forEach((printItem) => { | |||||
_AddPrintItem(LODOP, printItem, index) | |||||
}) | |||||
}) | |||||
} else { | |||||
// 单份 | |||||
printContent[0].forEach((printItem) => { | |||||
_AddPrintItem(LODOP, printItem) | |||||
}) | |||||
} | |||||
let flag = LODOP.PRINT() | |||||
return flag | |||||
} | |||||
/** | |||||
* 打印预览功能 | |||||
* @param {*Object} temp 打印模板 | |||||
* @param {*Array} data 打印数据 | |||||
*/ | |||||
function preview(temp, data) { | |||||
let LODOP = _CreateLodop(temp.title, temp.width, temp.height, temp.pageWidth, temp.pageHeight) | |||||
let tempItems = cloneDeep(temp.tempItems) | |||||
let printContent = _TempParser(tempItems, data) | |||||
if (data.length > 1) { | |||||
// 打印多份 | |||||
printContent.forEach((aPrint, index) => { | |||||
LODOP.NewPageA() | |||||
aPrint.forEach((printItem) => { | |||||
_AddPrintItem(LODOP, printItem, index) | |||||
}) | |||||
}) | |||||
} else { | |||||
// 单份 | |||||
printContent[0].forEach((printItem) => { | |||||
_AddPrintItem(LODOP, printItem) | |||||
}) | |||||
} | |||||
let flag = LODOP.PREVIEW() | |||||
return flag | |||||
} | |||||
/** | |||||
* 模板预览功能 | |||||
* @param {*Object} temp 打印模板 | |||||
*/ | |||||
function previewTemp(temp) { | |||||
let LODOP = _CreateLodop(temp.title, temp.width, temp.height, temp.pageWidth, temp.pageHeight) | |||||
let printContent = _TempParser(temp.tempItems) | |||||
printContent[0].forEach(printItem => { | |||||
_AddPrintItem(LODOP, printItem) | |||||
}) | |||||
let flag = LODOP.PREVIEW() | |||||
return flag | |||||
} | |||||
/** | |||||
* LODOP 根据属性创建打印 | |||||
* @param pageName 纸张名称 | |||||
* @param width 可视区域宽度(单位px) | |||||
* @param height 可视区域高度(单位px) | |||||
* @param pageWidth 纸张宽度(mm) | |||||
* @param pageHeight 纸张高度(mm) | |||||
* @param top 可视区域上边距(单位px) | |||||
* @param left 可视区域左边距(单位px) | |||||
*/ | |||||
function _CreateLodop(pageName, width, height, pageWidth = 0, pageHeight = 0, top = 0, left = 0) { | |||||
let LODOP = getLodop() | |||||
// console.log(strCompanyName, strLicense, strLicenseA, strLicenseB) | |||||
// 设置软件产品注册信息 | |||||
LODOP.SET_LICENSES(strCompanyName, strLicense, strLicenseA, strLicenseB) | |||||
LODOP.PRINT_INITA(top, left, width, height, pageName) | |||||
LODOP.SET_PRINT_PAGESIZE(1, pageWidth ? pageWidth + 'mm' : 0, pageHeight ? pageHeight + 'mm' : 0, '') | |||||
return LODOP | |||||
} | |||||
/** | |||||
* 解析模板和数据生成打印项 | |||||
* @param {*Array} tempItem 模板打赢项 | |||||
* @param {Array} data 打印数据, | |||||
* @return {Array} 若data为null则返回处理后的模板 | |||||
*/ | |||||
function _TempParser(tempItem, data) { | |||||
let temp = cloneDeep(tempItem) | |||||
//修改模板答应项顺序 | |||||
//将自适应高度的打印项(item.style.AutoHeight == true)放在第一项 | |||||
let flag = temp.findIndex(item => item.style.AutoHeight) | |||||
if (flag != -1) { | |||||
let autoItem = temp[flag] | |||||
temp.splice(flag, 1) | |||||
temp.unshift(autoItem) | |||||
// 处理位于自适应打印项下方的打印项 | |||||
temp.forEach(item => { | |||||
// 位于自适应高度项下的打印项修改top、left,并添加关联属性(style.LinkedItem) | |||||
if (item.top > autoItem.top && item.style.ItemType == 0) { | |||||
item.top = item.top - autoItem.top - autoItem.height | |||||
item.left = item.left - autoItem.left | |||||
item.style.LinkedItem = 1 | |||||
} | |||||
}) | |||||
} | |||||
if (data && data.length > 0) { | |||||
// 解析打印模板和数据,生成生成打印内容 | |||||
let tempContent = [] | |||||
data.forEach(dataItem => { | |||||
let conItem = temp.map(tempItem => { | |||||
let item = cloneDeep(tempItem) | |||||
if (item.name) { | |||||
item.defaultValue = dataItem[item.name] | |||||
item.value = strTempToValue(item.value, item.defaultValue) | |||||
} | |||||
return item | |||||
}) | |||||
tempContent.push(conItem) | |||||
}) | |||||
return tempContent | |||||
} else { | |||||
return [temp] | |||||
} | |||||
} | |||||
/** | |||||
* 添加打印项 | |||||
* @param {lodop} LODOP 打印实例 | |||||
* @param {Object} printItem 打印项内容 | |||||
* @param {Number} pageIndex 当前打印页的开始序号 | |||||
*/ | |||||
function _AddPrintItem(LODOP, tempItem, pageIndex = 0) { | |||||
let printItem = cloneDeep(tempItem) | |||||
// TempItemStyle转换为LodopItemStyle | |||||
let lodopStyle = _createLodopStyle(printItem.style) | |||||
// 批量打印时,修改关联打印项的关联序号 | |||||
if (lodopStyle.LinkedItem == 1) { | |||||
lodopStyle.LinkedItem = 1 + pageIndex | |||||
} | |||||
// 添加打印项 | |||||
switch (printItem.type) { | |||||
case 'braid-txt': | |||||
LODOP.ADD_PRINT_TEXT( | |||||
printItem.top, | |||||
printItem.left, | |||||
printItem.width, | |||||
printItem.height, | |||||
printItem.value | |||||
) | |||||
break | |||||
case 'bar-code': | |||||
LODOP.ADD_PRINT_BARCODE( | |||||
printItem.top, | |||||
printItem.left, | |||||
printItem.width, | |||||
printItem.height, | |||||
lodopStyle.codeType, | |||||
printItem.value | |||||
) | |||||
break | |||||
case 'braid-html': | |||||
{ | |||||
let html = htmlTempTohtml(printItem.defaultValue, printItem.style) | |||||
if (lodopStyle.AutoHeight) { | |||||
LODOP.ADD_PRINT_HTM( | |||||
printItem.top, | |||||
printItem.left, | |||||
printItem.width, | |||||
'BottomMargin:' + lodopStyle.BottomMargin + 'mm', | |||||
html | |||||
) | |||||
} else { | |||||
LODOP.ADD_PRINT_HTM( | |||||
printItem.top, | |||||
printItem.left, | |||||
printItem.width, | |||||
printItem.height, | |||||
html | |||||
) | |||||
} | |||||
} | |||||
break | |||||
case 'braid-table': | |||||
{ | |||||
let html = tableTempTohtml(printItem.columns ? printItem.columns : [], printItem.defaultValue, printItem.style) | |||||
if (lodopStyle.AutoHeight) { | |||||
LODOP.ADD_PRINT_TABLE( | |||||
printItem.top, | |||||
printItem.left, | |||||
printItem.width, | |||||
'BottomMargin:' + lodopStyle.BottomMargin + 'mm', | |||||
html | |||||
) | |||||
} else { | |||||
LODOP.ADD_PRINT_TABLE( | |||||
printItem.top, | |||||
printItem.left, | |||||
printItem.width, | |||||
printItem.height, | |||||
html | |||||
) | |||||
} | |||||
} | |||||
break | |||||
case 'braid-image': | |||||
{ | |||||
let html = imageTempTohtml(printItem.value) | |||||
LODOP.ADD_PRINT_IMAGE( | |||||
printItem.top, | |||||
printItem.left, | |||||
printItem.width, | |||||
printItem.height, | |||||
html | |||||
) | |||||
} | |||||
break | |||||
default: '' | |||||
} | |||||
// 设置打印项样式 | |||||
Object.keys(lodopStyle).forEach(key => { | |||||
LODOP.SET_PRINT_STYLEA(0, key, lodopStyle[key]) | |||||
}) | |||||
// 设置默认LodopStyle | |||||
let defaultLodopStyle = printItem.lodopStyle | |||||
if (defaultLodopStyle) { | |||||
Object.keys(defaultLodopStyle).forEach(key => { | |||||
LODOP.SET_PRINT_STYLEA(0, key, defaultLodopStyle[key]) | |||||
}) | |||||
} | |||||
} | |||||
/** | |||||
* 将模板设计样式转换为lodop样式 | |||||
* @param style 模板样式 | |||||
* @returns lodop样式对象 | |||||
*/ | |||||
function _createLodopStyle(style) { | |||||
let lodopStyle = { | |||||
zIndex: style.zIndex | |||||
} | |||||
for (let key in style) { | |||||
if (['Bold', 'Italic', 'Underline', 'ShowBarText'].indexOf(key) > -1) { | |||||
lodopStyle[key] = style[key] ? 1 : 0 | |||||
} else if (key === 'Alignment') { | |||||
lodopStyle[key] = style[key] == 'left' ? 1 : style[key] == 'center' ? 2 : 3 | |||||
} else { | |||||
lodopStyle[key] = style[key] | |||||
} | |||||
} | |||||
return lodopStyle | |||||
} |
@@ -0,0 +1,104 @@ | |||||
/** | |||||
* 通过模板和模板数据生成打印内容 | |||||
* @param temp 打印模板 | |||||
* @param data 模板数据 | |||||
*/ | |||||
export const tempToPrint = (temp, data) => { | |||||
let printContent = temp.map(item => { | |||||
var reg = /({[^{]*})/g | |||||
let value = item.value.replace(reg, data[item.name] || '') | |||||
return { | |||||
top: item.top, | |||||
left: item.left, | |||||
width: item.width, | |||||
height: item.height, | |||||
value: value | |||||
} | |||||
}) | |||||
return printContent | |||||
} | |||||
/** | |||||
* braid-tabel类型的模板转换成html | |||||
* @param columns 表格列配置信息 | |||||
* @param data 表格数据 | |||||
*/ | |||||
export const tableTempTohtml = (columns, data, style) => { | |||||
// 表格全局样式 | |||||
let styleStr = 'text-align:' + style.Alignment + ';' | |||||
styleStr += 'font-size:' + style.FontSize + 'pt;' | |||||
styleStr += 'color:' + style.FontColor + ';' | |||||
let html = '<style> table td,table th {word-break: break-all;box-sizing:border-box;border:1px solid ' + style.BorderColor + '}</style>' | |||||
html += '<table border=1 width=\'100%\' cellspacing=\'0\' frame="box" cellpadding=\'2\' style=\'border-collapse:collapse;' + styleStr + '\' bordercolor=\'' + style.BorderColor + '\'>' | |||||
// 解析表头 | |||||
html += '<thead><tr>' | |||||
columns.forEach(column => { | |||||
if (column.name === '_seq') { // 序号列 | |||||
html += '<th width="30">' | |||||
} else { | |||||
html += '<th>' | |||||
} | |||||
html += column.title | |||||
html += '</th>' | |||||
}) | |||||
html += '</tr></thead>' | |||||
html += '<tbody>' | |||||
// 解析内容 | |||||
if (Array.isArray(data)) { | |||||
data.forEach((item, idx) => { | |||||
html += '<tr>' | |||||
columns.forEach(column => { | |||||
if (column.name === '_seq') { | |||||
html += '<td>' | |||||
html += (idx + 1) | |||||
} else { | |||||
html += '<td>' | |||||
html += item[column.name] | |||||
} | |||||
html += '</td>' | |||||
}) | |||||
html += '</tr>' | |||||
}) | |||||
} | |||||
html += '</tbody>' | |||||
html += '</table>' | |||||
return html | |||||
} | |||||
/** | |||||
* braid-image类型的模板转换成html | |||||
* @param value 图片相对地址 | |||||
*/ | |||||
export const imageTempTohtml = (value) => { | |||||
let html = '<img style=\'width:100%\' src=\'' + value + '\'/>' | |||||
return html | |||||
} | |||||
/** | |||||
* 将字符串模板中{}内的内容替换成指定值 | |||||
* @param str 表格列配置信息 | |||||
* @param value 表格数据 | |||||
*/ | |||||
export const strTempToValue = (str, value) => { | |||||
let reg = /({[^}^{]*})/g | |||||
return str.replace(reg, value || '') | |||||
} | |||||
export const htmlTempTohtml = (val, style) => { | |||||
// 表格全局样式 | |||||
let styleStr = 'text-align:' + style.Alignment + ';' | |||||
styleStr += 'font-size:' + style.FontSize + 'pt;' | |||||
styleStr += 'color:' + style.FontColor + ';' | |||||
let html = '<span style=\'' + styleStr + '\'>' | |||||
html += val | |||||
html += '</span>' | |||||
// console.log(html) | |||||
return html | |||||
} |
@@ -0,0 +1,28 @@ | |||||
export const getDefaultProps = () => ({ | |||||
uuid: '', | |||||
type: 'braid-txt', | |||||
name: '', | |||||
isEdit: true, | |||||
dragable: true, // 是否可拖拽 | |||||
resizable: true, // 尺寸是否可变 | |||||
width: 120, | |||||
height: 40, | |||||
left: 50, | |||||
top: 0, | |||||
value: '自定义文本', | |||||
title: '自定义文本', | |||||
defaultValue: '自定义文本', | |||||
style: { zIndex: 1 } | |||||
}) | |||||
export const getCodeTypeArray = () => (['128A', '128B', '128C', '128Auto', 'EAN8', 'EAN13', 'EAN128A', 'EAN128B', 'EAN128C', 'Code39', '39Extended', '2_5interleaved', '2_5industrial', '2_5matrix', 'UPC_A', 'UPC_E0', 'UPC_E1', 'UPCsupp2', 'UPCsupp5', 'Code93', '93Extended', 'MSI', 'PostNet', 'Codabar', 'QRCode', 'PDF417']) | |||||
export const getItemTypeArray = () => ([ | |||||
{ label: '普通项', value: 0 }, | |||||
{ label: '页眉页脚', value: 1 }, | |||||
{ label: '页号项', value: 2 }, | |||||
{ label: '页数项', value: 3 }, | |||||
{ label: '多页项', value: 4 }, | |||||
]) | |||||
@@ -0,0 +1,49 @@ | |||||
export default { | |||||
methods: { | |||||
/** | |||||
* 初始化鼠标拖拽事件 | |||||
* @param {*} e | |||||
*/ | |||||
initmovement(e) { | |||||
var target = this.$vptd.state.activeElement | |||||
// 设置移动状态初始值 | |||||
this.$vptd.commit('initmove', { | |||||
startX: e.pageX, | |||||
startY: e.pageY, | |||||
originX: target.left, | |||||
originY: target.top | |||||
}) | |||||
// 绑定鼠标移动事件 | |||||
document.addEventListener('mousemove', this.handlemousemove, true) | |||||
// 取消鼠标移动事件 | |||||
document.addEventListener('mouseup', this.handlemouseup, true) | |||||
}, | |||||
/** | |||||
* 鼠标移动 | |||||
* @param {*} e | |||||
*/ | |||||
handlemousemove(e) { | |||||
e.stopPropagation() | |||||
e.preventDefault() | |||||
this.$vptd.commit('move', { | |||||
x: e.pageX, | |||||
y: e.pageY | |||||
}) | |||||
}, | |||||
/** | |||||
* 鼠标up | |||||
*/ | |||||
handlemouseup() { | |||||
document.removeEventListener('mousemove', this.handlemousemove, true) | |||||
document.removeEventListener('mouseup', this.handlemouseup, true) | |||||
this.$vptd.commit('stopmove') | |||||
} | |||||
} | |||||
} |
@@ -0,0 +1,7 @@ | |||||
import vptd from '../store' | |||||
export default { | |||||
beforeCreate() { | |||||
this.$vptd = vptd | |||||
} | |||||
} |
@@ -0,0 +1,121 @@ | |||||
import Vue from 'vue' | |||||
function resolveSource(source, type) { | |||||
return typeof type === 'function' ? type : source[type] | |||||
} | |||||
function normalizeMap(map) { | |||||
return Array.isArray(map) | |||||
? map.map(k => ({ k, v: k })) | |||||
: Object.keys(map).map(k => ({ k, v: map[k] })) | |||||
} | |||||
const createMapState = _store => states => { | |||||
const res = {} | |||||
const db = normalizeMap(states) | |||||
for (const k in db) { | |||||
let v = db[k] | |||||
res[k] = function () { | |||||
const store = _store || this.$vptd | |||||
return typeof v === 'function' | |||||
? v.call(this, store.state) | |||||
: store.state[v] | |||||
} | |||||
} | |||||
return res | |||||
} | |||||
const mapToMethods = (sourceName, runnerName, _store) => map => { | |||||
const res = {} | |||||
const db = normalizeMap(map) | |||||
for (const k in db) { | |||||
let v = db[k] | |||||
res[k] = function (payload) { | |||||
const store = _store || this.$vptd | |||||
const source = store[sourceName] | |||||
const runner = store[runnerName] | |||||
const actualSource = typeof v === 'function' ? v.call(this, source) : v | |||||
return runner.call(store, actualSource, payload) | |||||
} | |||||
} | |||||
return res | |||||
} | |||||
export default class Store { | |||||
constructor( | |||||
{ state, mutations = {}, actions = {}, plugins, subscribers = [] } = {} | |||||
) { | |||||
this.vm = new Vue({ | |||||
data: { | |||||
$$state: typeof state === 'function' ? state() : state | |||||
} | |||||
}) | |||||
this.mutations = mutations | |||||
this.actions = actions | |||||
this.subscribers = subscribers | |||||
if (plugins) { | |||||
plugins.forEach(p => this.use(p)) | |||||
} | |||||
this.mapState = createMapState(this) | |||||
this.mapActions = mapToMethods('actions', 'dispatch', this) | |||||
this.mapMutations = mapToMethods('mutations', 'commit', this) | |||||
} | |||||
get state() { | |||||
return this.vm.$data.$$state | |||||
} | |||||
set state(v) { | |||||
if (process.env.NODE_ENV === 'development') { | |||||
throw new Error( | |||||
'[puex] store.state is read-only, use store.replaceState(state) instead' | |||||
) | |||||
} | |||||
} | |||||
$emit(event, ...args) { | |||||
return this.vm.$emit(event, ...args) | |||||
} | |||||
$on(event, callback) { | |||||
return this.vm.$on(event, callback) | |||||
} | |||||
subscribe(sub) { | |||||
this.subscribers.push(sub) | |||||
return () => this.subscribers.splice(this.subscribers.indexOf(sub), 1) | |||||
} | |||||
commit(type, payload) { | |||||
this.subscribers.forEach(sub => sub({ type, payload }, this.state)) | |||||
const mutation = resolveSource(this.mutations, type) | |||||
return mutation && mutation(this.state, payload) | |||||
} | |||||
dispatch(type, payload) { | |||||
const action = resolveSource(this.actions, type) | |||||
const ctx = { | |||||
state: this.state, | |||||
dispatch: this.dispatch.bind(this), | |||||
commit: this.commit.bind(this), | |||||
store: this | |||||
} | |||||
return Promise.resolve(action && action(ctx, payload)) | |||||
} | |||||
use(fn) { | |||||
fn(this) | |||||
return this | |||||
} | |||||
replaceState(state) { | |||||
this.vm.$data.$$state = state | |||||
return this | |||||
} | |||||
} | |||||
export const mapState = createMapState() | |||||
export const mapActions = mapToMethods('actions', 'dispatch') | |||||
export const mapMutations = mapToMethods('mutations', 'commit') |
@@ -0,0 +1,17 @@ | |||||
export default { | |||||
// 添加模板项 | |||||
addTempItem({ state, commit }, item) { | |||||
commit('addTempItem', item) | |||||
// 设置选中 | |||||
commit('select', { | |||||
uuid: state.page.tempItems[state.page.tempItems.length - 1].uuid | |||||
}) | |||||
}, | |||||
// 初始化模板设计器 | |||||
async designerInit({ state, commit }, tempInfo) { | |||||
commit('initOptionItems', tempInfo.options) | |||||
commit('initPage', tempInfo.tempValue) | |||||
} | |||||
} |
@@ -0,0 +1,14 @@ | |||||
import Store from '../plugins/store' | |||||
import state from './state' | |||||
import actions from './actions' | |||||
import mutations from './mutation' | |||||
/** | |||||
* 自定义状态管理器 | |||||
*/ | |||||
export default new Store({ | |||||
state, | |||||
actions, | |||||
mutations | |||||
}) |
@@ -0,0 +1,165 @@ | |||||
const generate = require('nanoid/generate') | |||||
import { getDefaultProps, styleMap } from '../libs/props.js' | |||||
export default { | |||||
// 初始化页面属性 | |||||
initPage(state, pageInfo) { | |||||
state.page = pageInfo | |||||
// 补全默认样式 | |||||
let tempItems = pageInfo.tempItems ? pageInfo.tempItems.map(item => { | |||||
let optionItem = { ...state.widgetSetting[item.type], ...item, style: { ...state.widgetSetting[item.type].style, ...(item.style || {}) } } | |||||
return optionItem | |||||
}) : [] | |||||
state.page.tempItems = tempItems | |||||
}, | |||||
// 初始化可选对象 | |||||
initOptionItems(state, options) { | |||||
// 补全默认属性 | |||||
let optionsObject = options ? options.map(item => { | |||||
let optionItem = { ...state.widgetSetting[item.type], ...item, style: { ...state.widgetSetting[item.type].style, ...(item.style || {}) } } | |||||
return optionItem | |||||
}) : [] | |||||
state.optionItems = optionsObject | |||||
}, | |||||
// 初始化选中对象 | |||||
initActive(state) { | |||||
state.activeElement = getDefaultProps() | |||||
}, | |||||
// 设置 mousemove 操作的初始值 | |||||
initmove(state, payload) { | |||||
state.startX = payload.startX | |||||
state.startY = payload.startY | |||||
state.originX = payload.originX | |||||
state.originY = payload.originY | |||||
state.moving = true | |||||
}, | |||||
// 选中元件与取消选中 | |||||
select(state, temp) { | |||||
state.uuid = temp.uuid | |||||
if (temp.uuid === -1) { | |||||
state.activeElement = getDefaultProps() | |||||
state.type = 'page' | |||||
} else { | |||||
let widget = state.page.tempItems.find(w => w.uuid === temp.uuid) | |||||
if (widget) { | |||||
state.activeElement = widget | |||||
state.type = widget.type | |||||
} | |||||
} | |||||
}, | |||||
// 元件移动结束 | |||||
stopmove(state) { | |||||
state.moving = false | |||||
}, | |||||
// 移动元件 | |||||
move(state, track) { | |||||
var target = state.activeElement | |||||
var dx = track.x - state.startX | |||||
var dy = track.y - state.startY | |||||
var left = state.originX + Math.floor(dx * 100 / state.zoom) | |||||
var top = state.originY + Math.floor(dy * 100 / state.zoom) | |||||
target.left = left > 0 ? left : 0 | |||||
target.top = top > 0 ? top : 0 | |||||
}, | |||||
// 调整元件尺寸 | |||||
resize(state, track) { | |||||
var dx = track.x - state.startX | |||||
var dy = track.y - state.startY | |||||
var value | |||||
if (track.type === 'right') { | |||||
value = state.originX + Math.floor(dx * 100 / state.zoom) | |||||
state.activeElement.width = value > 10 ? value : 10 | |||||
return | |||||
} | |||||
if (track.type === 'down') { | |||||
value = state.originX + Math.floor(dy * 100 / state.zoom) | |||||
state.activeElement.height = value > 10 ? value : 10 | |||||
return | |||||
} | |||||
if (track.type === 'left') { | |||||
var left = state.originX + Math.floor(dx * 100 / state.zoom) | |||||
var width = state.originY - Math.floor(dx * 100 / state.zoom) | |||||
state.activeElement.left = left > 0 ? left : 0 | |||||
state.activeElement.width = width > 10 ? width : 10 | |||||
return | |||||
} | |||||
if (track.type === 'up') { | |||||
var top = state.originX + Math.floor(dy * 100 / state.zoom) | |||||
var height = state.originY - Math.floor(dy * 100 / state.zoom) | |||||
state.activeElement.top = top > 0 ? top : 0 | |||||
state.activeElement.height = height > 10 ? height : 10 | |||||
} | |||||
}, | |||||
// 更新元件初始 top 值 | |||||
updateSrollTop(state, top) { | |||||
state.top = top | |||||
}, | |||||
// 页面缩放 | |||||
zoom(state, val) { | |||||
state.zoom = val | |||||
}, | |||||
// 删除选中元件 | |||||
delete(state, uuid) { | |||||
var type = state.type | |||||
if (type === 'page') return | |||||
let index = 0 | |||||
state.page.tempItems.forEach((item, idx) => { | |||||
if (item.uuid === uuid) { | |||||
index = idx | |||||
} | |||||
}) | |||||
// 删除元件 | |||||
state.page.tempItems.splice(index, 1) | |||||
// 重置 activeElement | |||||
state.activeElement = getDefaultProps() | |||||
state.type = 'page' | |||||
state.uuid = -1 | |||||
}, | |||||
// 添加组件 | |||||
addTempItem(state, item) { | |||||
let def = { uuid: generate('1234567890abcdef', 10) } | |||||
let setting = JSON.parse(JSON.stringify(item)) | |||||
state.page.tempItems.push(Object.assign(setting, def)) | |||||
}, | |||||
// 更新数据 | |||||
updateData(state, { uuid, value }) { | |||||
let widget = state.page.tempItems.find(w => w.uuid === uuid) | |||||
widget ? widget.value = value : '' | |||||
}, | |||||
// 设置模板Id | |||||
setTempId(state, id) { | |||||
state.tempId = id | |||||
}, | |||||
setLoading(state, flag) { | |||||
state.loading = flag | |||||
}, | |||||
// 设置模板默认属性 | |||||
setWidgetSetting(state, settingObj) { | |||||
state.widgetSetting = settingObj | |||||
} | |||||
} |
@@ -0,0 +1,34 @@ | |||||
import { getDefaultProps } from '../libs/props.js' | |||||
import widgets from '@/components/widgets/index' | |||||
export default { | |||||
zoom: 100, // 画布缩放百分比 | |||||
type: 'page', // 选中元素类型 | |||||
index: -1, // 选中元素索引 | |||||
uuid: -1, // 选中元素uuid | |||||
originX: 0, // 选中元件的横向初始值 | |||||
originY: 0, // 选中元件的纵向初始值 | |||||
startX: 0, // 鼠标摁下时的横坐标 | |||||
startY: 0, // 鼠标摁下时的纵坐标 | |||||
moving: false, // 是否正在移动元件(参考线仅在移动元件时显示) | |||||
activeElement: getDefaultProps(), // 选中对象,要么是元件,要么是页面 | |||||
// 模板信息 | |||||
page: { | |||||
title: 'demo', | |||||
width: 750, | |||||
height: 550, | |||||
pageWidth: 750, | |||||
pageHeight: 550, | |||||
tempItems: [], // 模板已选项 | |||||
}, | |||||
optionItems: [], // 可选项 | |||||
//模板参数 | |||||
tempId: '', // 模板Id | |||||
loading: false, // 是否正在初始化中 | |||||
widgetSetting: widgets.getWidgetsSetting(), // 模板组件默认属性 | |||||
} |
@@ -0,0 +1,26 @@ | |||||
/** | |||||
* 获取元素位置 | |||||
* @param {*} element | |||||
*/ | |||||
export function cumulativeOffset(element) { | |||||
let top = el.offsetTop | |||||
let left = el.offsetLeft | |||||
return { | |||||
top: top, | |||||
left: left | |||||
} | |||||
} | |||||
/** | |||||
* 判断元素是否在窗口内 | |||||
* @param {*} el | |||||
*/ | |||||
export function checkInView(el) { | |||||
let rect = el.getBoundingClientRect() | |||||
return ( | |||||
(rect.top > 0 && rect.top < window.innerHeight) && | |||||
(rect.left < window.innerWidth && | |||||
rect.right > 0) | |||||
) | |||||
} |
@@ -0,0 +1 @@ | |||||
[data-theme=kr-designer] .el-alert{width:100%;padding:8px 16px;margin:0;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:4px;position:relative;background-color:#FFF;overflow:hidden;opacity:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-transition:opacity .2s;transition:opacity .2s}[data-theme=kr-designer] .el-alert.is-light .el-alert__closebtn{color:#C0C4CC}[data-theme=kr-designer] .el-alert.is-dark .el-alert__closebtn,[data-theme=kr-designer] .el-alert.is-dark .el-alert__description{color:#FFF}[data-theme=kr-designer] .el-alert.is-center{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}[data-theme=kr-designer] .el-alert--success.is-light{background-color:#f0f9eb;color:#67C23A}[data-theme=kr-designer] .el-alert--success.is-light .el-alert__description{color:#67C23A}[data-theme=kr-designer] .el-alert--success.is-dark{background-color:#67C23A;color:#FFF}[data-theme=kr-designer] .el-alert--info.is-light{background-color:#f4f4f5;color:#909399}[data-theme=kr-designer] .el-alert--info.is-dark{background-color:#909399;color:#FFF}[data-theme=kr-designer] .el-alert--info .el-alert__description{color:#909399}[data-theme=kr-designer] .el-alert--warning.is-light{background-color:#fdf6ec;color:#E6A23C}[data-theme=kr-designer] .el-alert--warning.is-light .el-alert__description{color:#E6A23C}[data-theme=kr-designer] .el-alert--warning.is-dark{background-color:#E6A23C;color:#FFF}[data-theme=kr-designer] .el-alert--error.is-light{background-color:#fef0f0;color:#F56C6C}[data-theme=kr-designer] .el-alert--error.is-light .el-alert__description{color:#F56C6C}[data-theme=kr-designer] .el-alert--error.is-dark{background-color:#F56C6C;color:#FFF}.el-alert__content{display:table-cell;padding:0 8px}.el-alert__icon{font-size:16px;width:16px}.el-alert__icon.is-big{font-size:28px;width:28px}.el-alert__title{font-size:13px;line-height:18px}.el-alert__title.is-bold{font-weight:700}[data-theme=kr-designer] .el-alert .el-alert__description{font-size:12px;margin:5px 0 0}.el-alert__closebtn{font-size:12px;opacity:1;position:absolute;top:12px;right:15px;cursor:pointer}.el-alert__closebtn.is-customed{font-style:normal;font-size:13px;top:9px}[data-theme=kr-designer] .el-alert-fade-enter,[data-theme=kr-designer] .el-alert-fade-leave-active{opacity:0} |
@@ -0,0 +1 @@ | |||||
[data-theme=kr-designer] .el-aside{overflow:auto;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-negative:0;flex-shrink:0} |
@@ -0,0 +1 @@ | |||||
[data-theme=kr-designer] .el-avatar{display:inline-block;-webkit-box-sizing:border-box;box-sizing:border-box;text-align:center;overflow:hidden;color:#fff;background:#C0C4CC;width:40px;height:40px;line-height:40px;font-size:14px}[data-theme=kr-designer] .el-avatar>img{display:block;height:100%;vertical-align:middle}[data-theme=kr-designer] .el-avatar--circle{border-radius:50%}[data-theme=kr-designer] .el-avatar--square{border-radius:4px}[data-theme=kr-designer] .el-avatar--icon{font-size:18px}[data-theme=kr-designer] .el-avatar--large{width:40px;height:40px;line-height:40px}[data-theme=kr-designer] .el-avatar--medium{width:36px;height:36px;line-height:36px}[data-theme=kr-designer] .el-avatar--small{width:28px;height:28px;line-height:28px} |
@@ -0,0 +1 @@ | |||||
[data-theme=kr-designer] .el-backtop{position:fixed;background-color:#FFF;width:40px;height:40px;border-radius:50%;color:#409EFF;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;font-size:20px;-webkit-box-shadow:0 0 6px rgba(0,0,0,.12);box-shadow:0 0 6px rgba(0,0,0,.12);cursor:pointer;z-index:5}[data-theme=kr-designer] .el-backtop:hover{background-color:#F2F6FC} |
@@ -0,0 +1 @@ | |||||
[data-theme=kr-designer] .el-badge{position:relative;vertical-align:middle;display:inline-block}.el-badge__content{background-color:#F56C6C;border-radius:10px;color:#FFF;display:inline-block;font-size:12px;height:18px;line-height:18px;padding:0 6px;text-align:center;white-space:nowrap;border:1px solid #FFF}.el-badge__content.is-fixed{position:absolute;top:0;right:10px;-webkit-transform:translateY(-50%) translateX(100%);transform:translateY(-50%) translateX(100%)}.el-badge__content.is-fixed.is-dot{right:5px}.el-badge__content.is-dot{height:8px;width:8px;padding:0;right:0;border-radius:50%}.el-badge__content--primary{background-color:#409EFF}.el-badge__content--success{background-color:#67C23A}.el-badge__content--warning{background-color:#E6A23C}.el-badge__content--info{background-color:#909399}.el-badge__content--danger{background-color:#F56C6C} |
@@ -0,0 +1 @@ | |||||
[data-theme=kr-designer] .el-breadcrumb{font-size:14px;line-height:1}[data-theme=kr-designer] .el-breadcrumb::after,[data-theme=kr-designer] .el-breadcrumb::before{display:table;content:""}[data-theme=kr-designer] .el-breadcrumb::after{clear:both}.el-breadcrumb__separator{margin:0 9px;font-weight:700;color:#C0C4CC}.el-breadcrumb__separator[class*=icon]{margin:0 6px;font-weight:400}.el-breadcrumb__item{float:left}.el-breadcrumb__inner{color:#606266}.el-breadcrumb__inner a,.el-breadcrumb__inner.is-link{font-weight:700;text-decoration:none;-webkit-transition:color .2s cubic-bezier(.645,.045,.355,1);transition:color .2s cubic-bezier(.645,.045,.355,1);color:#303133}.el-breadcrumb__inner a:hover,.el-breadcrumb__inner.is-link:hover{color:#409EFF;cursor:pointer}.el-breadcrumb__item:last-child .el-breadcrumb__inner,.el-breadcrumb__item:last-child .el-breadcrumb__inner a,.el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover,.el-breadcrumb__item:last-child .el-breadcrumb__inner:hover{font-weight:400;color:#606266;cursor:text}.el-breadcrumb__item:last-child .el-breadcrumb__separator{display:none} |
@@ -0,0 +1,557 @@ | |||||
[data-theme="kr-designer"] .el-button { | |||||
display: inline-block; | |||||
line-height: 1; | |||||
white-space: nowrap; | |||||
cursor: pointer; | |||||
background: #fff; | |||||
border: 1px solid #dcdfe6; | |||||
color: #606266; | |||||
-webkit-appearance: none; | |||||
text-align: center; | |||||
-webkit-box-sizing: border-box; | |||||
box-sizing: border-box; | |||||
outline: 0; | |||||
margin: 0; | |||||
-webkit-transition: 0.1s; | |||||
transition: 0.1s; | |||||
font-weight: 500; | |||||
-moz-user-select: none; | |||||
-webkit-user-select: none; | |||||
-ms-user-select: none; | |||||
padding: 12px 20px; | |||||
font-size: 14px; | |||||
border-radius: 4px; | |||||
} | |||||
[data-theme="kr-designer"] .el-button + .el-button { | |||||
margin-left: 10px; | |||||
} | |||||
[data-theme="kr-designer"] .el-button:focus, | |||||
[data-theme="kr-designer"] .el-button:hover { | |||||
color: #409eff; | |||||
border-color: #c6e2ff; | |||||
background-color: #ecf5ff; | |||||
} | |||||
[data-theme="kr-designer"] .el-button:active { | |||||
color: #3a8ee6; | |||||
border-color: #3a8ee6; | |||||
outline: 0; | |||||
} | |||||
[data-theme="kr-designer"] .el-button::-moz-focus-inner { | |||||
border: 0; | |||||
} | |||||
[data-theme="kr-designer"] .el-button [class*="el-icon-"] + span { | |||||
margin-left: 5px; | |||||
} | |||||
[data-theme="kr-designer"] .el-button.is-plain:focus, | |||||
[data-theme="kr-designer"] .el-button.is-plain:hover { | |||||
background: #fff; | |||||
border-color: #409eff; | |||||
color: #409eff; | |||||
} | |||||
[data-theme="kr-designer"] .el-button.is-plain:active { | |||||
background: #fff; | |||||
border-color: #3a8ee6; | |||||
color: #3a8ee6; | |||||
outline: 0; | |||||
} | |||||
[data-theme="kr-designer"] .el-button.is-active { | |||||
color: #3a8ee6; | |||||
border-color: #3a8ee6; | |||||
} | |||||
[data-theme="kr-designer"] .el-button.is-disabled, | |||||
[data-theme="kr-designer"] .el-button.is-disabled:focus, | |||||
[data-theme="kr-designer"] .el-button.is-disabled:hover { | |||||
color: #c0c4cc; | |||||
cursor: not-allowed; | |||||
background-image: none; | |||||
background-color: #fff; | |||||
border-color: #ebeef5; | |||||
} | |||||
[data-theme="kr-designer"] .el-button.is-disabled.el-button--text { | |||||
background-color: transparent; | |||||
} | |||||
[data-theme="kr-designer"] .el-button.is-disabled.is-plain, | |||||
[data-theme="kr-designer"] .el-button.is-disabled.is-plain:focus, | |||||
[data-theme="kr-designer"] .el-button.is-disabled.is-plain:hover { | |||||
background-color: #fff; | |||||
border-color: #ebeef5; | |||||
color: #c0c4cc; | |||||
} | |||||
[data-theme="kr-designer"] .el-button.is-loading { | |||||
position: relative; | |||||
pointer-events: none; | |||||
} | |||||
[data-theme="kr-designer"] .el-button.is-loading:before { | |||||
pointer-events: none; | |||||
content: ""; | |||||
position: absolute; | |||||
left: -1px; | |||||
top: -1px; | |||||
right: -1px; | |||||
bottom: -1px; | |||||
border-radius: inherit; | |||||
background-color: rgba(255, 255, 255, 0.35); | |||||
} | |||||
[data-theme="kr-designer"] .el-button.is-round { | |||||
border-radius: 20px; | |||||
padding: 12px 23px; | |||||
} | |||||
[data-theme="kr-designer"] .el-button.is-circle { | |||||
border-radius: 50%; | |||||
padding: 12px; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--primary { | |||||
color: #fff; | |||||
background-color: #409eff; | |||||
border-color: #409eff; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--primary:focus, | |||||
[data-theme="kr-designer"] .el-button--primary:hover { | |||||
background: #66b1ff; | |||||
border-color: #66b1ff; | |||||
color: #fff; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--primary:active { | |||||
background: #3a8ee6; | |||||
border-color: #3a8ee6; | |||||
color: #fff; | |||||
outline: 0; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--primary.is-active { | |||||
background: #3a8ee6; | |||||
border-color: #3a8ee6; | |||||
color: #fff; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--primary.is-disabled, | |||||
[data-theme="kr-designer"] .el-button--primary.is-disabled:active, | |||||
[data-theme="kr-designer"] .el-button--primary.is-disabled:focus, | |||||
[data-theme="kr-designer"] .el-button--primary.is-disabled:hover { | |||||
color: #fff; | |||||
background-color: #a0cfff; | |||||
border-color: #a0cfff; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--primary.is-plain { | |||||
color: #409eff; | |||||
background: #ecf5ff; | |||||
border-color: #b3d8ff; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--primary.is-plain:focus, | |||||
[data-theme="kr-designer"] .el-button--primary.is-plain:hover { | |||||
background: #409eff; | |||||
border-color: #409eff; | |||||
color: #fff; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--primary.is-plain:active { | |||||
background: #3a8ee6; | |||||
border-color: #3a8ee6; | |||||
color: #fff; | |||||
outline: 0; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--primary.is-plain.is-disabled, | |||||
[data-theme="kr-designer"] .el-button--primary.is-plain.is-disabled:active, | |||||
[data-theme="kr-designer"] .el-button--primary.is-plain.is-disabled:focus, | |||||
[data-theme="kr-designer"] .el-button--primary.is-plain.is-disabled:hover { | |||||
color: #8cc5ff; | |||||
background-color: #ecf5ff; | |||||
border-color: #d9ecff; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--success { | |||||
color: #fff; | |||||
background-color: #67c23a; | |||||
border-color: #67c23a; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--success:focus, | |||||
[data-theme="kr-designer"] .el-button--success:hover { | |||||
background: #85ce61; | |||||
border-color: #85ce61; | |||||
color: #fff; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--success:active { | |||||
background: #5daf34; | |||||
border-color: #5daf34; | |||||
color: #fff; | |||||
outline: 0; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--success.is-active { | |||||
background: #5daf34; | |||||
border-color: #5daf34; | |||||
color: #fff; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--success.is-disabled, | |||||
[data-theme="kr-designer"] .el-button--success.is-disabled:active, | |||||
[data-theme="kr-designer"] .el-button--success.is-disabled:focus, | |||||
[data-theme="kr-designer"] .el-button--success.is-disabled:hover { | |||||
color: #fff; | |||||
background-color: #b3e19d; | |||||
border-color: #b3e19d; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--success.is-plain { | |||||
color: #67c23a; | |||||
background: #f0f9eb; | |||||
border-color: #c2e7b0; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--success.is-plain:focus, | |||||
[data-theme="kr-designer"] .el-button--success.is-plain:hover { | |||||
background: #67c23a; | |||||
border-color: #67c23a; | |||||
color: #fff; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--success.is-plain:active { | |||||
background: #5daf34; | |||||
border-color: #5daf34; | |||||
color: #fff; | |||||
outline: 0; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--success.is-plain.is-disabled, | |||||
[data-theme="kr-designer"] .el-button--success.is-plain.is-disabled:active, | |||||
[data-theme="kr-designer"] .el-button--success.is-plain.is-disabled:focus, | |||||
[data-theme="kr-designer"] .el-button--success.is-plain.is-disabled:hover { | |||||
color: #a4da89; | |||||
background-color: #f0f9eb; | |||||
border-color: #e1f3d8; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--warning { | |||||
color: #fff; | |||||
background-color: #e6a23c; | |||||
border-color: #e6a23c; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--warning:focus, | |||||
[data-theme="kr-designer"] .el-button--warning:hover { | |||||
background: #ebb563; | |||||
border-color: #ebb563; | |||||
color: #fff; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--warning:active { | |||||
background: #cf9236; | |||||
border-color: #cf9236; | |||||
color: #fff; | |||||
outline: 0; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--warning.is-active { | |||||
background: #cf9236; | |||||
border-color: #cf9236; | |||||
color: #fff; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--warning.is-disabled, | |||||
[data-theme="kr-designer"] .el-button--warning.is-disabled:active, | |||||
[data-theme="kr-designer"] .el-button--warning.is-disabled:focus, | |||||
[data-theme="kr-designer"] .el-button--warning.is-disabled:hover { | |||||
color: #fff; | |||||
background-color: #f3d19e; | |||||
border-color: #f3d19e; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--warning.is-plain { | |||||
color: #e6a23c; | |||||
background: #fdf6ec; | |||||
border-color: #f5dab1; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--warning.is-plain:focus, | |||||
[data-theme="kr-designer"] .el-button--warning.is-plain:hover { | |||||
background: #e6a23c; | |||||
border-color: #e6a23c; | |||||
color: #fff; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--warning.is-plain:active { | |||||
background: #cf9236; | |||||
border-color: #cf9236; | |||||
color: #fff; | |||||
outline: 0; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--warning.is-plain.is-disabled, | |||||
[data-theme="kr-designer"] .el-button--warning.is-plain.is-disabled:active, | |||||
[data-theme="kr-designer"] .el-button--warning.is-plain.is-disabled:focus, | |||||
[data-theme="kr-designer"] .el-button--warning.is-plain.is-disabled:hover { | |||||
color: #f0c78a; | |||||
background-color: #fdf6ec; | |||||
border-color: #faecd8; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--danger { | |||||
color: #fff; | |||||
background-color: #f56c6c; | |||||
border-color: #f56c6c; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--danger:focus, | |||||
[data-theme="kr-designer"] .el-button--danger:hover { | |||||
background: #f78989; | |||||
border-color: #f78989; | |||||
color: #fff; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--danger:active { | |||||
background: #dd6161; | |||||
border-color: #dd6161; | |||||
color: #fff; | |||||
outline: 0; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--danger.is-active { | |||||
background: #dd6161; | |||||
border-color: #dd6161; | |||||
color: #fff; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--danger.is-disabled, | |||||
[data-theme="kr-designer"] .el-button--danger.is-disabled:active, | |||||
[data-theme="kr-designer"] .el-button--danger.is-disabled:focus, | |||||
[data-theme="kr-designer"] .el-button--danger.is-disabled:hover { | |||||
color: #fff; | |||||
background-color: #fab6b6; | |||||
border-color: #fab6b6; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--danger.is-plain { | |||||
color: #f56c6c; | |||||
background: #fef0f0; | |||||
border-color: #fbc4c4; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--danger.is-plain:focus, | |||||
[data-theme="kr-designer"] .el-button--danger.is-plain:hover { | |||||
background: #f56c6c; | |||||
border-color: #f56c6c; | |||||
color: #fff; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--danger.is-plain:active { | |||||
background: #dd6161; | |||||
border-color: #dd6161; | |||||
color: #fff; | |||||
outline: 0; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--danger.is-plain.is-disabled, | |||||
[data-theme="kr-designer"] .el-button--danger.is-plain.is-disabled:active, | |||||
[data-theme="kr-designer"] .el-button--danger.is-plain.is-disabled:focus, | |||||
[data-theme="kr-designer"] .el-button--danger.is-plain.is-disabled:hover { | |||||
color: #f9a7a7; | |||||
background-color: #fef0f0; | |||||
border-color: #fde2e2; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--info { | |||||
color: #fff; | |||||
background-color: #909399; | |||||
border-color: #909399; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--info:focus, | |||||
[data-theme="kr-designer"] .el-button--info:hover { | |||||
background: #a6a9ad; | |||||
border-color: #a6a9ad; | |||||
color: #fff; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--info:active { | |||||
background: #82848a; | |||||
border-color: #82848a; | |||||
color: #fff; | |||||
outline: 0; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--info.is-active { | |||||
background: #82848a; | |||||
border-color: #82848a; | |||||
color: #fff; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--info.is-disabled, | |||||
[data-theme="kr-designer"] .el-button--info.is-disabled:active, | |||||
[data-theme="kr-designer"] .el-button--info.is-disabled:focus, | |||||
[data-theme="kr-designer"] .el-button--info.is-disabled:hover { | |||||
color: #fff; | |||||
background-color: #c8c9cc; | |||||
border-color: #c8c9cc; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--info.is-plain { | |||||
color: #909399; | |||||
background: #f4f4f5; | |||||
border-color: #d3d4d6; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--info.is-plain:focus, | |||||
[data-theme="kr-designer"] .el-button--info.is-plain:hover { | |||||
background: #909399; | |||||
border-color: #909399; | |||||
color: #fff; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--info.is-plain:active { | |||||
background: #82848a; | |||||
border-color: #82848a; | |||||
color: #fff; | |||||
outline: 0; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--info.is-plain.is-disabled, | |||||
[data-theme="kr-designer"] .el-button--info.is-plain.is-disabled:active, | |||||
[data-theme="kr-designer"] .el-button--info.is-plain.is-disabled:focus, | |||||
[data-theme="kr-designer"] .el-button--info.is-plain.is-disabled:hover { | |||||
color: #bcbec2; | |||||
background-color: #f4f4f5; | |||||
border-color: #e9e9eb; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--medium { | |||||
padding: 10px 20px; | |||||
font-size: 14px; | |||||
border-radius: 4px; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--medium.is-round { | |||||
padding: 10px 20px; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--medium.is-circle { | |||||
padding: 10px; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--small { | |||||
padding: 9px 15px; | |||||
font-size: 12px; | |||||
border-radius: 3px; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--small.is-round { | |||||
padding: 9px 15px; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--small.is-circle { | |||||
padding: 9px; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--mini { | |||||
padding: 7px 15px; | |||||
font-size: 12px; | |||||
border-radius: 3px; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--mini.is-round { | |||||
padding: 7px 15px; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--mini.is-circle { | |||||
padding: 7px; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--text { | |||||
border-color: transparent; | |||||
color: #409eff; | |||||
background: 0 0; | |||||
padding-left: 0; | |||||
padding-right: 0; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--text:focus, | |||||
[data-theme="kr-designer"] .el-button--text:hover { | |||||
color: #66b1ff; | |||||
border-color: transparent; | |||||
background-color: transparent; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--text:active { | |||||
color: #3a8ee6; | |||||
border-color: transparent; | |||||
background-color: transparent; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--text.is-disabled, | |||||
[data-theme="kr-designer"] .el-button--text.is-disabled:focus, | |||||
[data-theme="kr-designer"] .el-button--text.is-disabled:hover { | |||||
border-color: transparent; | |||||
} | |||||
[data-theme="kr-designer"] .el-button-group { | |||||
display: inline-block; | |||||
vertical-align: middle; | |||||
} | |||||
[data-theme="kr-designer"] .el-button-group::after, | |||||
[data-theme="kr-designer"] .el-button-group::before { | |||||
display: table; | |||||
content: ""; | |||||
} | |||||
[data-theme="kr-designer"] .el-button-group::after { | |||||
clear: both; | |||||
} | |||||
[data-theme="kr-designer"] .el-button-group > .el-button { | |||||
float: left; | |||||
position: relative; | |||||
} | |||||
[data-theme="kr-designer"] .el-button-group > .el-button + .el-button { | |||||
margin-left: 0; | |||||
} | |||||
[data-theme="kr-designer"] .el-button-group > .el-button.is-disabled { | |||||
z-index: 1; | |||||
} | |||||
[data-theme="kr-designer"] .el-button-group > .el-button:first-child { | |||||
border-top-right-radius: 0; | |||||
border-bottom-right-radius: 0; | |||||
} | |||||
[data-theme="kr-designer"] .el-button-group > .el-button:last-child { | |||||
border-top-left-radius: 0; | |||||
border-bottom-left-radius: 0; | |||||
} | |||||
[data-theme="kr-designer"] | |||||
.el-button-group | |||||
> .el-button:first-child:last-child { | |||||
border-radius: 4px; | |||||
} | |||||
[data-theme="kr-designer"] | |||||
.el-button-group | |||||
> .el-button:first-child:last-child.is-round { | |||||
border-radius: 20px; | |||||
} | |||||
[data-theme="kr-designer"] | |||||
.el-button-group | |||||
> .el-button:first-child:last-child.is-circle { | |||||
border-radius: 50%; | |||||
} | |||||
[data-theme="kr-designer"] | |||||
.el-button-group | |||||
> .el-button:not(:first-child):not(:last-child) { | |||||
border-radius: 0; | |||||
} | |||||
[data-theme="kr-designer"] .el-button-group > .el-button:not(:last-child) { | |||||
margin-right: -1px; | |||||
} | |||||
[data-theme="kr-designer"] .el-button-group > .el-button.is-active, | |||||
[data-theme="kr-designer"] .el-button-group > .el-button:active, | |||||
[data-theme="kr-designer"] .el-button-group > .el-button:focus, | |||||
[data-theme="kr-designer"] .el-button-group > .el-button:hover { | |||||
z-index: 1; | |||||
} | |||||
[data-theme="kr-designer"] .el-button-group > .el-dropdown > .el-button { | |||||
border-top-left-radius: 0; | |||||
border-bottom-left-radius: 0; | |||||
border-left-color: rgba(255, 255, 255, 0.5); | |||||
} | |||||
[data-theme="kr-designer"] .el-button-group .el-button--primary:first-child { | |||||
border-right-color: rgba(255, 255, 255, 0.5); | |||||
} | |||||
[data-theme="kr-designer"] .el-button-group .el-button--primary:last-child { | |||||
border-left-color: rgba(255, 255, 255, 0.5); | |||||
} | |||||
[data-theme="kr-designer"] | |||||
.el-button-group | |||||
.el-button--primary:not(:first-child):not(:last-child) { | |||||
border-left-color: rgba(255, 255, 255, 0.5); | |||||
border-right-color: rgba(255, 255, 255, 0.5); | |||||
} | |||||
[data-theme="kr-designer"] .el-button-group .el-button--success:first-child { | |||||
border-right-color: rgba(255, 255, 255, 0.5); | |||||
} | |||||
[data-theme="kr-designer"] .el-button-group .el-button--success:last-child { | |||||
border-left-color: rgba(255, 255, 255, 0.5); | |||||
} | |||||
[data-theme="kr-designer"] | |||||
.el-button-group | |||||
.el-button--success:not(:first-child):not(:last-child) { | |||||
border-left-color: rgba(255, 255, 255, 0.5); | |||||
border-right-color: rgba(255, 255, 255, 0.5); | |||||
} | |||||
[data-theme="kr-designer"] .el-button-group .el-button--warning:first-child { | |||||
border-right-color: rgba(255, 255, 255, 0.5); | |||||
} | |||||
[data-theme="kr-designer"] .el-button-group .el-button--warning:last-child { | |||||
border-left-color: rgba(255, 255, 255, 0.5); | |||||
} | |||||
[data-theme="kr-designer"] | |||||
.el-button-group | |||||
.el-button--warning:not(:first-child):not(:last-child) { | |||||
border-left-color: rgba(255, 255, 255, 0.5); | |||||
border-right-color: rgba(255, 255, 255, 0.5); | |||||
} | |||||
[data-theme="kr-designer"] .el-button-group .el-button--danger:first-child { | |||||
border-right-color: rgba(255, 255, 255, 0.5); | |||||
} | |||||
[data-theme="kr-designer"] .el-button-group .el-button--danger:last-child { | |||||
border-left-color: rgba(255, 255, 255, 0.5); | |||||
} | |||||
[data-theme="kr-designer"] | |||||
.el-button-group | |||||
.el-button--danger:not(:first-child):not(:last-child) { | |||||
border-left-color: rgba(255, 255, 255, 0.5); | |||||
border-right-color: rgba(255, 255, 255, 0.5); | |||||
} | |||||
[data-theme="kr-designer"] .el-button-group .el-button--info:first-child { | |||||
border-right-color: rgba(255, 255, 255, 0.5); | |||||
} | |||||
[data-theme="kr-designer"] .el-button-group .el-button--info:last-child { | |||||
border-left-color: rgba(255, 255, 255, 0.5); | |||||
} | |||||
[data-theme="kr-designer"] | |||||
.el-button-group | |||||
.el-button--info:not(:first-child):not(:last-child) { | |||||
border-left-color: rgba(255, 255, 255, 0.5); | |||||
border-right-color: rgba(255, 255, 255, 0.5); | |||||
} |
@@ -0,0 +1,626 @@ | |||||
[data-theme="kr-designer"] .el-button { | |||||
display: inline-block; | |||||
line-height: 1; | |||||
white-space: nowrap; | |||||
cursor: pointer; | |||||
background: #fff; | |||||
border: 1px solid #dcdfe6; | |||||
color: #606266; | |||||
-webkit-appearance: none; | |||||
text-align: center; | |||||
-webkit-box-sizing: border-box; | |||||
box-sizing: border-box; | |||||
outline: 0; | |||||
margin: 0; | |||||
-webkit-transition: 0.1s; | |||||
transition: 0.1s; | |||||
font-weight: 500; | |||||
-moz-user-select: none; | |||||
-webkit-user-select: none; | |||||
-ms-user-select: none; | |||||
padding: 12px 20px; | |||||
font-size: 14px; | |||||
border-radius: 4px; | |||||
} | |||||
[data-theme="kr-designer"] .el-button + .el-button { | |||||
margin-left: 10px; | |||||
} | |||||
[data-theme="kr-designer"] .el-button:focus, | |||||
[data-theme="kr-designer"] .el-button:hover { | |||||
color: #409eff; | |||||
border-color: #c6e2ff; | |||||
background-color: #ecf5ff; | |||||
} | |||||
[data-theme="kr-designer"] .el-button:active { | |||||
color: #3a8ee6; | |||||
border-color: #3a8ee6; | |||||
outline: 0; | |||||
} | |||||
[data-theme="kr-designer"] .el-button::-moz-focus-inner { | |||||
border: 0; | |||||
} | |||||
[data-theme="kr-designer"] .el-button [class*="el-icon-"] + span { | |||||
margin-left: 5px; | |||||
} | |||||
[data-theme="kr-designer"] .el-button.is-plain:focus, | |||||
[data-theme="kr-designer"] .el-button.is-plain:hover { | |||||
background: #fff; | |||||
border-color: #409eff; | |||||
color: #409eff; | |||||
} | |||||
[data-theme="kr-designer"] .el-button.is-plain:active { | |||||
background: #fff; | |||||
border-color: #3a8ee6; | |||||
color: #3a8ee6; | |||||
outline: 0; | |||||
} | |||||
[data-theme="kr-designer"] .el-button.is-active { | |||||
color: #3a8ee6; | |||||
border-color: #3a8ee6; | |||||
} | |||||
[data-theme="kr-designer"] .el-button.is-disabled, | |||||
[data-theme="kr-designer"] .el-button.is-disabled:focus, | |||||
[data-theme="kr-designer"] .el-button.is-disabled:hover { | |||||
color: #c0c4cc; | |||||
cursor: not-allowed; | |||||
background-image: none; | |||||
background-color: #fff; | |||||
border-color: #ebeef5; | |||||
} | |||||
[data-theme="kr-designer"] .el-button.is-disabled.el-button--text { | |||||
background-color: transparent; | |||||
} | |||||
[data-theme="kr-designer"] .el-button.is-disabled.is-plain, | |||||
[data-theme="kr-designer"] .el-button.is-disabled.is-plain:focus, | |||||
[data-theme="kr-designer"] .el-button.is-disabled.is-plain:hover { | |||||
background-color: #fff; | |||||
border-color: #ebeef5; | |||||
color: #c0c4cc; | |||||
} | |||||
[data-theme="kr-designer"] .el-button.is-loading { | |||||
position: relative; | |||||
pointer-events: none; | |||||
} | |||||
[data-theme="kr-designer"] .el-button.is-loading:before { | |||||
pointer-events: none; | |||||
content: ""; | |||||
position: absolute; | |||||
left: -1px; | |||||
top: -1px; | |||||
right: -1px; | |||||
bottom: -1px; | |||||
border-radius: inherit; | |||||
background-color: rgba(255, 255, 255, 0.35); | |||||
} | |||||
[data-theme="kr-designer"] .el-button.is-round { | |||||
border-radius: 20px; | |||||
padding: 12px 23px; | |||||
} | |||||
[data-theme="kr-designer"] .el-button.is-circle { | |||||
border-radius: 50%; | |||||
padding: 12px; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--primary { | |||||
color: #fff; | |||||
background-color: #409eff; | |||||
border-color: #409eff; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--primary:focus, | |||||
[data-theme="kr-designer"] .el-button--primary:hover { | |||||
background: #66b1ff; | |||||
border-color: #66b1ff; | |||||
color: #fff; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--primary:active { | |||||
background: #3a8ee6; | |||||
border-color: #3a8ee6; | |||||
color: #fff; | |||||
outline: 0; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--primary.is-active { | |||||
background: #3a8ee6; | |||||
border-color: #3a8ee6; | |||||
color: #fff; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--primary.is-disabled, | |||||
[data-theme="kr-designer"] .el-button--primary.is-disabled:active, | |||||
[data-theme="kr-designer"] .el-button--primary.is-disabled:focus, | |||||
[data-theme="kr-designer"] .el-button--primary.is-disabled:hover { | |||||
color: #fff; | |||||
background-color: #a0cfff; | |||||
border-color: #a0cfff; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--primary.is-plain { | |||||
color: #409eff; | |||||
background: #ecf5ff; | |||||
border-color: #b3d8ff; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--primary.is-plain:focus, | |||||
[data-theme="kr-designer"] .el-button--primary.is-plain:hover { | |||||
background: #409eff; | |||||
border-color: #409eff; | |||||
color: #fff; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--primary.is-plain:active { | |||||
background: #3a8ee6; | |||||
border-color: #3a8ee6; | |||||
color: #fff; | |||||
outline: 0; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--primary.is-plain.is-disabled, | |||||
[data-theme="kr-designer"] .el-button--primary.is-plain.is-disabled:active, | |||||
[data-theme="kr-designer"] .el-button--primary.is-plain.is-disabled:focus, | |||||
[data-theme="kr-designer"] .el-button--primary.is-plain.is-disabled:hover { | |||||
color: #8cc5ff; | |||||
background-color: #ecf5ff; | |||||
border-color: #d9ecff; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--success { | |||||
color: #fff; | |||||
background-color: #67c23a; | |||||
border-color: #67c23a; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--success:focus, | |||||
[data-theme="kr-designer"] .el-button--success:hover { | |||||
background: #85ce61; | |||||
border-color: #85ce61; | |||||
color: #fff; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--success:active { | |||||
background: #5daf34; | |||||
border-color: #5daf34; | |||||
color: #fff; | |||||
outline: 0; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--success.is-active { | |||||
background: #5daf34; | |||||
border-color: #5daf34; | |||||
color: #fff; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--success.is-disabled, | |||||
[data-theme="kr-designer"] .el-button--success.is-disabled:active, | |||||
[data-theme="kr-designer"] .el-button--success.is-disabled:focus, | |||||
[data-theme="kr-designer"] .el-button--success.is-disabled:hover { | |||||
color: #fff; | |||||
background-color: #b3e19d; | |||||
border-color: #b3e19d; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--success.is-plain { | |||||
color: #67c23a; | |||||
background: #f0f9eb; | |||||
border-color: #c2e7b0; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--success.is-plain:focus, | |||||
[data-theme="kr-designer"] .el-button--success.is-plain:hover { | |||||
background: #67c23a; | |||||
border-color: #67c23a; | |||||
color: #fff; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--success.is-plain:active { | |||||
background: #5daf34; | |||||
border-color: #5daf34; | |||||
color: #fff; | |||||
outline: 0; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--success.is-plain.is-disabled, | |||||
[data-theme="kr-designer"] .el-button--success.is-plain.is-disabled:active, | |||||
[data-theme="kr-designer"] .el-button--success.is-plain.is-disabled:focus, | |||||
[data-theme="kr-designer"] .el-button--success.is-plain.is-disabled:hover { | |||||
color: #a4da89; | |||||
background-color: #f0f9eb; | |||||
border-color: #e1f3d8; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--warning { | |||||
color: #fff; | |||||
background-color: #e6a23c; | |||||
border-color: #e6a23c; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--warning:focus, | |||||
[data-theme="kr-designer"] .el-button--warning:hover { | |||||
background: #ebb563; | |||||
border-color: #ebb563; | |||||
color: #fff; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--warning:active { | |||||
background: #cf9236; | |||||
border-color: #cf9236; | |||||
color: #fff; | |||||
outline: 0; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--warning.is-active { | |||||
background: #cf9236; | |||||
border-color: #cf9236; | |||||
color: #fff; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--warning.is-disabled, | |||||
[data-theme="kr-designer"] .el-button--warning.is-disabled:active, | |||||
[data-theme="kr-designer"] .el-button--warning.is-disabled:focus, | |||||
[data-theme="kr-designer"] .el-button--warning.is-disabled:hover { | |||||
color: #fff; | |||||
background-color: #f3d19e; | |||||
border-color: #f3d19e; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--warning.is-plain { | |||||
color: #e6a23c; | |||||
background: #fdf6ec; | |||||
border-color: #f5dab1; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--warning.is-plain:focus, | |||||
[data-theme="kr-designer"] .el-button--warning.is-plain:hover { | |||||
background: #e6a23c; | |||||
border-color: #e6a23c; | |||||
color: #fff; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--warning.is-plain:active { | |||||
background: #cf9236; | |||||
border-color: #cf9236; | |||||
color: #fff; | |||||
outline: 0; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--warning.is-plain.is-disabled, | |||||
[data-theme="kr-designer"] .el-button--warning.is-plain.is-disabled:active, | |||||
[data-theme="kr-designer"] .el-button--warning.is-plain.is-disabled:focus, | |||||
[data-theme="kr-designer"] .el-button--warning.is-plain.is-disabled:hover { | |||||
color: #f0c78a; | |||||
background-color: #fdf6ec; | |||||
border-color: #faecd8; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--danger { | |||||
color: #fff; | |||||
background-color: #f56c6c; | |||||
border-color: #f56c6c; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--danger:focus, | |||||
[data-theme="kr-designer"] .el-button--danger:hover { | |||||
background: #f78989; | |||||
border-color: #f78989; | |||||
color: #fff; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--danger:active { | |||||
background: #dd6161; | |||||
border-color: #dd6161; | |||||
color: #fff; | |||||
outline: 0; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--danger.is-active { | |||||
background: #dd6161; | |||||
border-color: #dd6161; | |||||
color: #fff; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--danger.is-disabled, | |||||
[data-theme="kr-designer"] .el-button--danger.is-disabled:active, | |||||
[data-theme="kr-designer"] .el-button--danger.is-disabled:focus, | |||||
[data-theme="kr-designer"] .el-button--danger.is-disabled:hover { | |||||
color: #fff; | |||||
background-color: #fab6b6; | |||||
border-color: #fab6b6; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--danger.is-plain { | |||||
color: #f56c6c; | |||||
background: #fef0f0; | |||||
border-color: #fbc4c4; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--danger.is-plain:focus, | |||||
[data-theme="kr-designer"] .el-button--danger.is-plain:hover { | |||||
background: #f56c6c; | |||||
border-color: #f56c6c; | |||||
color: #fff; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--danger.is-plain:active { | |||||
background: #dd6161; | |||||
border-color: #dd6161; | |||||
color: #fff; | |||||
outline: 0; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--danger.is-plain.is-disabled, | |||||
[data-theme="kr-designer"] .el-button--danger.is-plain.is-disabled:active, | |||||
[data-theme="kr-designer"] .el-button--danger.is-plain.is-disabled:focus, | |||||
[data-theme="kr-designer"] .el-button--danger.is-plain.is-disabled:hover { | |||||
color: #f9a7a7; | |||||
background-color: #fef0f0; | |||||
border-color: #fde2e2; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--info { | |||||
color: #fff; | |||||
background-color: #909399; | |||||
border-color: #909399; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--info:focus, | |||||
[data-theme="kr-designer"] .el-button--info:hover { | |||||
background: #a6a9ad; | |||||
border-color: #a6a9ad; | |||||
color: #fff; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--info:active { | |||||
background: #82848a; | |||||
border-color: #82848a; | |||||
color: #fff; | |||||
outline: 0; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--info.is-active { | |||||
background: #82848a; | |||||
border-color: #82848a; | |||||
color: #fff; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--info.is-disabled, | |||||
[data-theme="kr-designer"] .el-button--info.is-disabled:active, | |||||
[data-theme="kr-designer"] .el-button--info.is-disabled:focus, | |||||
[data-theme="kr-designer"] .el-button--info.is-disabled:hover { | |||||
color: #fff; | |||||
background-color: #c8c9cc; | |||||
border-color: #c8c9cc; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--info.is-plain { | |||||
color: #909399; | |||||
background: #f4f4f5; | |||||
border-color: #d3d4d6; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--info.is-plain:focus, | |||||
[data-theme="kr-designer"] .el-button--info.is-plain:hover { | |||||
background: #909399; | |||||
border-color: #909399; | |||||
color: #fff; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--info.is-plain:active { | |||||
background: #82848a; | |||||
border-color: #82848a; | |||||
color: #fff; | |||||
outline: 0; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--info.is-plain.is-disabled, | |||||
[data-theme="kr-designer"] .el-button--info.is-plain.is-disabled:active, | |||||
[data-theme="kr-designer"] .el-button--info.is-plain.is-disabled:focus, | |||||
[data-theme="kr-designer"] .el-button--info.is-plain.is-disabled:hover { | |||||
color: #bcbec2; | |||||
background-color: #f4f4f5; | |||||
border-color: #e9e9eb; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--medium { | |||||
padding: 10px 20px; | |||||
font-size: 14px; | |||||
border-radius: 4px; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--medium.is-round { | |||||
padding: 10px 20px; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--medium.is-circle { | |||||
padding: 10px; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--small { | |||||
padding: 9px 15px; | |||||
font-size: 12px; | |||||
border-radius: 3px; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--small.is-round { | |||||
padding: 9px 15px; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--small.is-circle { | |||||
padding: 9px; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--mini { | |||||
padding: 7px 15px; | |||||
font-size: 12px; | |||||
border-radius: 3px; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--mini.is-round { | |||||
padding: 7px 15px; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--mini.is-circle { | |||||
padding: 7px; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--text { | |||||
border-color: transparent; | |||||
color: #409eff; | |||||
background: 0 0; | |||||
padding-left: 0; | |||||
padding-right: 0; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--text:focus, | |||||
[data-theme="kr-designer"] .el-button--text:hover { | |||||
color: #66b1ff; | |||||
border-color: transparent; | |||||
background-color: transparent; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--text:active { | |||||
color: #3a8ee6; | |||||
border-color: transparent; | |||||
background-color: transparent; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--text.is-disabled, | |||||
[data-theme="kr-designer"] .el-button--text.is-disabled:focus, | |||||
[data-theme="kr-designer"] .el-button--text.is-disabled:hover { | |||||
border-color: transparent; | |||||
} | |||||
[data-theme="kr-designer"] .el-button-group { | |||||
display: inline-block; | |||||
vertical-align: middle; | |||||
} | |||||
[data-theme="kr-designer"] .el-button-group::after, | |||||
[data-theme="kr-designer"] .el-button-group::before { | |||||
display: table; | |||||
content: ""; | |||||
} | |||||
[data-theme="kr-designer"] .el-button-group::after { | |||||
clear: both; | |||||
} | |||||
[data-theme="kr-designer"] .el-button-group > .el-button { | |||||
float: left; | |||||
position: relative; | |||||
} | |||||
[data-theme="kr-designer"] .el-button-group > .el-button + .el-button { | |||||
margin-left: 0; | |||||
} | |||||
[data-theme="kr-designer"] .el-button-group > .el-button.is-disabled { | |||||
z-index: 1; | |||||
} | |||||
[data-theme="kr-designer"] .el-button-group > .el-button:first-child { | |||||
border-top-right-radius: 0; | |||||
border-bottom-right-radius: 0; | |||||
} | |||||
[data-theme="kr-designer"] .el-button-group > .el-button:last-child { | |||||
border-top-left-radius: 0; | |||||
border-bottom-left-radius: 0; | |||||
} | |||||
[data-theme="kr-designer"] | |||||
.el-button-group | |||||
> .el-button:first-child:last-child { | |||||
border-radius: 4px; | |||||
} | |||||
[data-theme="kr-designer"] | |||||
.el-button-group | |||||
> .el-button:first-child:last-child.is-round { | |||||
border-radius: 20px; | |||||
} | |||||
[data-theme="kr-designer"] | |||||
.el-button-group | |||||
> .el-button:first-child:last-child.is-circle { | |||||
border-radius: 50%; | |||||
} | |||||
[data-theme="kr-designer"] | |||||
.el-button-group | |||||
> .el-button:not(:first-child):not(:last-child) { | |||||
border-radius: 0; | |||||
} | |||||
[data-theme="kr-designer"] .el-button-group > .el-button:not(:last-child) { | |||||
margin-right: -1px; | |||||
} | |||||
[data-theme="kr-designer"] .el-button-group > .el-button.is-active, | |||||
[data-theme="kr-designer"] .el-button-group > .el-button:active, | |||||
[data-theme="kr-designer"] .el-button-group > .el-button:focus, | |||||
[data-theme="kr-designer"] .el-button-group > .el-button:hover { | |||||
z-index: 1; | |||||
} | |||||
[data-theme="kr-designer"] .el-button-group > .el-dropdown > .el-button { | |||||
border-top-left-radius: 0; | |||||
border-bottom-left-radius: 0; | |||||
border-left-color: rgba(255, 255, 255, 0.5); | |||||
} | |||||
[data-theme="kr-designer"] .el-button-group .el-button--primary:first-child { | |||||
border-right-color: rgba(255, 255, 255, 0.5); | |||||
} | |||||
[data-theme="kr-designer"] .el-button-group .el-button--primary:last-child { | |||||
border-left-color: rgba(255, 255, 255, 0.5); | |||||
} | |||||
[data-theme="kr-designer"] | |||||
.el-button-group | |||||
.el-button--primary:not(:first-child):not(:last-child) { | |||||
border-left-color: rgba(255, 255, 255, 0.5); | |||||
border-right-color: rgba(255, 255, 255, 0.5); | |||||
} | |||||
[data-theme="kr-designer"] .el-button-group .el-button--success:first-child { | |||||
border-right-color: rgba(255, 255, 255, 0.5); | |||||
} | |||||
[data-theme="kr-designer"] .el-button-group .el-button--success:last-child { | |||||
border-left-color: rgba(255, 255, 255, 0.5); | |||||
} | |||||
[data-theme="kr-designer"] | |||||
.el-button-group | |||||
.el-button--success:not(:first-child):not(:last-child) { | |||||
border-left-color: rgba(255, 255, 255, 0.5); | |||||
border-right-color: rgba(255, 255, 255, 0.5); | |||||
} | |||||
[data-theme="kr-designer"] .el-button-group .el-button--warning:first-child { | |||||
border-right-color: rgba(255, 255, 255, 0.5); | |||||
} | |||||
[data-theme="kr-designer"] .el-button-group .el-button--warning:last-child { | |||||
border-left-color: rgba(255, 255, 255, 0.5); | |||||
} | |||||
[data-theme="kr-designer"] | |||||
.el-button-group | |||||
.el-button--warning:not(:first-child):not(:last-child) { | |||||
border-left-color: rgba(255, 255, 255, 0.5); | |||||
border-right-color: rgba(255, 255, 255, 0.5); | |||||
} | |||||
[data-theme="kr-designer"] .el-button-group .el-button--danger:first-child { | |||||
border-right-color: rgba(255, 255, 255, 0.5); | |||||
} | |||||
[data-theme="kr-designer"] .el-button-group .el-button--danger:last-child { | |||||
border-left-color: rgba(255, 255, 255, 0.5); | |||||
} | |||||
[data-theme="kr-designer"] | |||||
.el-button-group | |||||
.el-button--danger:not(:first-child):not(:last-child) { | |||||
border-left-color: rgba(255, 255, 255, 0.5); | |||||
border-right-color: rgba(255, 255, 255, 0.5); | |||||
} | |||||
[data-theme="kr-designer"] .el-button-group .el-button--info:first-child { | |||||
border-right-color: rgba(255, 255, 255, 0.5); | |||||
} | |||||
[data-theme="kr-designer"] .el-button-group .el-button--info:last-child { | |||||
border-left-color: rgba(255, 255, 255, 0.5); | |||||
} | |||||
[data-theme="kr-designer"] | |||||
.el-button-group | |||||
.el-button--info:not(:first-child):not(:last-child) { | |||||
border-left-color: rgba(255, 255, 255, 0.5); | |||||
border-right-color: rgba(255, 255, 255, 0.5); | |||||
} | |||||
[data-theme="kr-designer"] .el-calendar { | |||||
background-color: #fff; | |||||
} | |||||
.el-calendar__header { | |||||
display: -webkit-box; | |||||
display: -ms-flexbox; | |||||
display: flex; | |||||
-webkit-box-pack: justify; | |||||
-ms-flex-pack: justify; | |||||
justify-content: space-between; | |||||
padding: 12px 20px; | |||||
border-bottom: 1px solid #ebeef5; | |||||
} | |||||
.el-calendar__title { | |||||
color: #000; | |||||
-ms-flex-item-align: center; | |||||
align-self: center; | |||||
} | |||||
.el-calendar__body { | |||||
padding: 12px 20px 35px; | |||||
} | |||||
[data-theme="kr-designer"] .el-calendar-table { | |||||
table-layout: fixed; | |||||
width: 100%; | |||||
} | |||||
[data-theme="kr-designer"] .el-calendar-table thead th { | |||||
padding: 12px 0; | |||||
color: #606266; | |||||
font-weight: 400; | |||||
} | |||||
[data-theme="kr-designer"] .el-calendar-table:not(.is-range) td.next, | |||||
[data-theme="kr-designer"] .el-calendar-table:not(.is-range) td.prev { | |||||
color: #c0c4cc; | |||||
} | |||||
[data-theme="kr-designer"] .el-calendar-table td { | |||||
border-bottom: 1px solid #ebeef5; | |||||
border-right: 1px solid #ebeef5; | |||||
vertical-align: top; | |||||
-webkit-transition: background-color 0.2s ease; | |||||
transition: background-color 0.2s ease; | |||||
} | |||||
[data-theme="kr-designer"] .el-calendar-table td.is-selected { | |||||
background-color: #f2f8fe; | |||||
} | |||||
[data-theme="kr-designer"] .el-calendar-table td.is-today { | |||||
color: #409eff; | |||||
} | |||||
[data-theme="kr-designer"] .el-calendar-table tr:first-child td { | |||||
border-top: 1px solid #ebeef5; | |||||
} | |||||
[data-theme="kr-designer"] .el-calendar-table tr td:first-child { | |||||
border-left: 1px solid #ebeef5; | |||||
} | |||||
[data-theme="kr-designer"] | |||||
.el-calendar-table | |||||
tr.el-calendar-table__row--hide-border | |||||
td { | |||||
border-top: none; | |||||
} | |||||
[data-theme="kr-designer"] .el-calendar-table .el-calendar-day { | |||||
-webkit-box-sizing: border-box; | |||||
box-sizing: border-box; | |||||
padding: 8px; | |||||
height: 85px; | |||||
} | |||||
[data-theme="kr-designer"] .el-calendar-table .el-calendar-day:hover { | |||||
cursor: pointer; | |||||
background-color: #f2f8fe; | |||||
} |
@@ -0,0 +1 @@ | |||||
[data-theme=kr-designer] .el-card{border-radius:4px;border:1px solid #EBEEF5;background-color:#FFF;overflow:hidden;color:#303133;-webkit-transition:.3s;transition:.3s}[data-theme=kr-designer] .el-card.is-always-shadow,[data-theme=kr-designer] .el-card.is-hover-shadow:focus,[data-theme=kr-designer] .el-card.is-hover-shadow:hover{-webkit-box-shadow:0 2px 12px 0 rgba(0,0,0,.1);box-shadow:0 2px 12px 0 rgba(0,0,0,.1)}.el-card__header{padding:18px 20px;border-bottom:1px solid #EBEEF5;-webkit-box-sizing:border-box;box-sizing:border-box}.el-card__body{padding:20px} |
@@ -0,0 +1 @@ | |||||
.el-carousel__item,.el-carousel__mask{position:absolute;height:100%;top:0;left:0}.el-carousel__item{width:100%;display:inline-block;overflow:hidden;z-index:0}.el-carousel__item.is-active{z-index:2}.el-carousel__item.is-animating{-webkit-transition:-webkit-transform .4s ease-in-out;transition:-webkit-transform .4s ease-in-out;transition:transform .4s ease-in-out;transition:transform .4s ease-in-out,-webkit-transform .4s ease-in-out}.el-carousel__item--card{width:50%;-webkit-transition:-webkit-transform .4s ease-in-out;transition:-webkit-transform .4s ease-in-out;transition:transform .4s ease-in-out;transition:transform .4s ease-in-out,-webkit-transform .4s ease-in-out}.el-carousel__item--card.is-in-stage{cursor:pointer;z-index:1}.el-carousel__item--card.is-in-stage.is-hover .el-carousel__mask,.el-carousel__item--card.is-in-stage:hover .el-carousel__mask{opacity:.12}.el-carousel__item--card.is-active{z-index:2}.el-carousel__mask{width:100%;background-color:#FFF;opacity:.24;-webkit-transition:.2s;transition:.2s} |
@@ -0,0 +1 @@ | |||||
[data-theme=kr-designer] .el-carousel{position:relative}[data-theme=kr-designer] .el-carousel--horizontal{overflow-x:hidden}[data-theme=kr-designer] .el-carousel--vertical{overflow-y:hidden}.el-carousel__container{position:relative;height:300px}.el-carousel__arrow{border:none;outline:0;padding:0;margin:0;height:36px;width:36px;cursor:pointer;-webkit-transition:.3s;transition:.3s;border-radius:50%;background-color:rgba(31,45,61,.11);color:#FFF;position:absolute;top:50%;z-index:10;-webkit-transform:translateY(-50%);transform:translateY(-50%);text-align:center;font-size:12px}.el-carousel__arrow--left{left:16px}.el-carousel__arrow--right{right:16px}.el-carousel__arrow:hover{background-color:rgba(31,45,61,.23)}.el-carousel__arrow i{cursor:pointer}.el-carousel__indicators{position:absolute;list-style:none;margin:0;padding:0;z-index:2}.el-carousel__indicators--horizontal{bottom:0;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.el-carousel__indicators--vertical{right:0;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.el-carousel__indicators--outside{bottom:26px;text-align:center;position:static;-webkit-transform:none;transform:none}.el-carousel__indicators--outside .el-carousel__indicator:hover button{opacity:.64}.el-carousel__indicators--outside button{background-color:#C0C4CC;opacity:.24}.el-carousel__indicators--labels{left:0;right:0;-webkit-transform:none;transform:none;text-align:center}.el-carousel__indicators--labels .el-carousel__button{height:auto;width:auto;padding:2px 18px;font-size:12px}.el-carousel__indicators--labels .el-carousel__indicator{padding:6px 4px}.el-carousel__indicator{background-color:transparent;cursor:pointer}.el-carousel__indicator:hover button{opacity:.72}.el-carousel__indicator--horizontal{display:inline-block;padding:12px 4px}.el-carousel__indicator--vertical{padding:4px 12px}.el-carousel__indicator--vertical .el-carousel__button{width:2px;height:15px}.el-carousel__indicator.is-active button{opacity:1}.el-carousel__button{display:block;opacity:.48;width:30px;height:2px;background-color:#FFF;border:none;outline:0;padding:0;margin:0;cursor:pointer;-webkit-transition:.3s;transition:.3s}[data-theme=kr-designer] .carousel-arrow-left-enter,[data-theme=kr-designer] .carousel-arrow-left-leave-active{-webkit-transform:translateY(-50%) translateX(-10px);transform:translateY(-50%) translateX(-10px);opacity:0}[data-theme=kr-designer] .carousel-arrow-right-enter,[data-theme=kr-designer] .carousel-arrow-right-leave-active{-webkit-transform:translateY(-50%) translateX(10px);transform:translateY(-50%) translateX(10px);opacity:0} |
@@ -0,0 +1 @@ | |||||
[data-theme=kr-designer] .el-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-flex:1;-ms-flex:1;flex:1;-ms-flex-preferred-size:auto;flex-basis:auto;-webkit-box-sizing:border-box;box-sizing:border-box;min-width:0}[data-theme=kr-designer] .el-container.is-vertical{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column} |
@@ -0,0 +1 @@ | |||||
.v-modal-enter{-webkit-animation:v-modal-in .2s ease;animation:v-modal-in .2s ease}.v-modal-leave{-webkit-animation:v-modal-out .2s ease forwards;animation:v-modal-out .2s ease forwards}@-webkit-keyframes v-modal-in{0%{opacity:0}}@keyframes v-modal-in{0%{opacity:0}}@-webkit-keyframes v-modal-out{100%{opacity:0}}@keyframes v-modal-out{100%{opacity:0}}.v-modal{position:fixed;left:0;top:0;width:100%;height:100%;opacity:.5;background:#000}.el-popup-parent--hidden{overflow:hidden}[data-theme=kr-designer] .el-dialog{position:relative;margin:0 auto 50px;background:#FFF;border-radius:2px;-webkit-box-shadow:0 1px 3px rgba(0,0,0,.3);box-shadow:0 1px 3px rgba(0,0,0,.3);-webkit-box-sizing:border-box;box-sizing:border-box;width:50%}[data-theme=kr-designer] .el-dialog.is-fullscreen{width:100%;margin-top:0;margin-bottom:0;height:100%;overflow:auto}.el-dialog__wrapper{position:fixed;top:0;right:0;bottom:0;left:0;overflow:auto;margin:0}.el-dialog__header{padding:20px 20px 10px}.el-dialog__headerbtn{position:absolute;top:20px;right:20px;padding:0;background:0 0;border:none;outline:0;cursor:pointer;font-size:16px}.el-dialog__headerbtn .el-dialog__close{color:#909399}.el-dialog__headerbtn:focus .el-dialog__close,.el-dialog__headerbtn:hover .el-dialog__close{color:#409EFF}.el-dialog__title{line-height:24px;font-size:18px;color:#303133}.el-dialog__body{padding:30px 20px;color:#606266;font-size:14px;word-break:break-all}.el-dialog__footer{padding:10px 20px 20px;text-align:right;-webkit-box-sizing:border-box;box-sizing:border-box}[data-theme=kr-designer] .el-dialog--center{text-align:center}[data-theme=kr-designer] .el-dialog--center .el-dialog__body{text-align:initial;padding:25px 25px 30px}[data-theme=kr-designer] .el-dialog--center .el-dialog__footer{text-align:inherit}[data-theme=kr-designer] .dialog-fade-enter-active{-webkit-animation:dialog-fade-in .3s;animation:dialog-fade-in .3s}[data-theme=kr-designer] .dialog-fade-leave-active{-webkit-animation:dialog-fade-out .3s;animation:dialog-fade-out .3s}@-webkit-keyframes dialog-fade-in{0%{-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0);opacity:0}100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}}@keyframes dialog-fade-in{0%{-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0);opacity:0}100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}}@-webkit-keyframes dialog-fade-out{0%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}100%{-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0);opacity:0}}@keyframes dialog-fade-out{0%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}100%{-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0);opacity:0}} |
@@ -0,0 +1 @@ | |||||
@media only screen and (max-width:767px){[data-theme=kr-designer] .hidden-xs-only{display:none!important}}@media only screen and (min-width:768px){[data-theme=kr-designer] .hidden-sm-and-up{display:none!important}}@media only screen and (min-width:768px) and (max-width:991px){[data-theme=kr-designer] .hidden-sm-only{display:none!important}}@media only screen and (max-width:991px){[data-theme=kr-designer] .hidden-sm-and-down{display:none!important}}@media only screen and (min-width:992px){[data-theme=kr-designer] .hidden-md-and-up{display:none!important}}@media only screen and (min-width:992px) and (max-width:1199px){[data-theme=kr-designer] .hidden-md-only{display:none!important}}@media only screen and (max-width:1199px){[data-theme=kr-designer] .hidden-md-and-down{display:none!important}}@media only screen and (min-width:1200px){[data-theme=kr-designer] .hidden-lg-and-up{display:none!important}}@media only screen and (min-width:1200px) and (max-width:1919px){[data-theme=kr-designer] .hidden-lg-only{display:none!important}}@media only screen and (max-width:1919px){[data-theme=kr-designer] .hidden-lg-and-down{display:none!important}}@media only screen and (min-width:1920px){[data-theme=kr-designer] .hidden-xl-only{display:none!important}} |
@@ -0,0 +1 @@ | |||||
[data-theme=kr-designer] .el-divider{background-color:#DCDFE6;position:relative}[data-theme=kr-designer] .el-divider--horizontal{display:block;height:1px;width:100%;margin:24px 0}[data-theme=kr-designer] .el-divider--vertical{display:inline-block;width:1px;height:1em;margin:0 8px;vertical-align:middle;position:relative}.el-divider__text{position:absolute;background-color:#FFF;padding:0 20px;font-weight:500;color:#303133;font-size:14px}.el-divider__text.is-left{left:20px;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.el-divider__text.is-center{left:50%;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%)}.el-divider__text.is-right{right:20px;-webkit-transform:translateY(-50%);transform:translateY(-50%)} |
@@ -0,0 +1,808 @@ | |||||
[data-theme="kr-designer"] .el-button { | |||||
display: inline-block; | |||||
line-height: 1; | |||||
white-space: nowrap; | |||||
cursor: pointer; | |||||
background: #fff; | |||||
border: 1px solid #dcdfe6; | |||||
color: #606266; | |||||
-webkit-appearance: none; | |||||
text-align: center; | |||||
-webkit-box-sizing: border-box; | |||||
box-sizing: border-box; | |||||
outline: 0; | |||||
margin: 0; | |||||
-webkit-transition: 0.1s; | |||||
transition: 0.1s; | |||||
font-weight: 500; | |||||
-moz-user-select: none; | |||||
-webkit-user-select: none; | |||||
-ms-user-select: none; | |||||
padding: 12px 20px; | |||||
font-size: 14px; | |||||
border-radius: 4px; | |||||
} | |||||
[data-theme="kr-designer"] .el-button + .el-button { | |||||
margin-left: 10px; | |||||
} | |||||
[data-theme="kr-designer"] .el-button:focus, | |||||
[data-theme="kr-designer"] .el-button:hover { | |||||
color: #409eff; | |||||
border-color: #c6e2ff; | |||||
background-color: #ecf5ff; | |||||
} | |||||
[data-theme="kr-designer"] .el-button:active { | |||||
color: #3a8ee6; | |||||
border-color: #3a8ee6; | |||||
outline: 0; | |||||
} | |||||
[data-theme="kr-designer"] .el-button::-moz-focus-inner { | |||||
border: 0; | |||||
} | |||||
[data-theme="kr-designer"] .el-button [class*="el-icon-"] + span { | |||||
margin-left: 5px; | |||||
} | |||||
[data-theme="kr-designer"] .el-button.is-plain:focus, | |||||
[data-theme="kr-designer"] .el-button.is-plain:hover { | |||||
background: #fff; | |||||
border-color: #409eff; | |||||
color: #409eff; | |||||
} | |||||
[data-theme="kr-designer"] .el-button.is-plain:active { | |||||
background: #fff; | |||||
border-color: #3a8ee6; | |||||
color: #3a8ee6; | |||||
outline: 0; | |||||
} | |||||
[data-theme="kr-designer"] .el-button.is-active { | |||||
color: #3a8ee6; | |||||
border-color: #3a8ee6; | |||||
} | |||||
[data-theme="kr-designer"] .el-button.is-disabled, | |||||
[data-theme="kr-designer"] .el-button.is-disabled:focus, | |||||
[data-theme="kr-designer"] .el-button.is-disabled:hover { | |||||
color: #c0c4cc; | |||||
cursor: not-allowed; | |||||
background-image: none; | |||||
background-color: #fff; | |||||
border-color: #ebeef5; | |||||
} | |||||
[data-theme="kr-designer"] .el-button.is-disabled.el-button--text { | |||||
background-color: transparent; | |||||
} | |||||
[data-theme="kr-designer"] .el-button.is-disabled.is-plain, | |||||
[data-theme="kr-designer"] .el-button.is-disabled.is-plain:focus, | |||||
[data-theme="kr-designer"] .el-button.is-disabled.is-plain:hover { | |||||
background-color: #fff; | |||||
border-color: #ebeef5; | |||||
color: #c0c4cc; | |||||
} | |||||
[data-theme="kr-designer"] .el-button.is-loading { | |||||
position: relative; | |||||
pointer-events: none; | |||||
} | |||||
[data-theme="kr-designer"] .el-button.is-loading:before { | |||||
pointer-events: none; | |||||
content: ""; | |||||
position: absolute; | |||||
left: -1px; | |||||
top: -1px; | |||||
right: -1px; | |||||
bottom: -1px; | |||||
border-radius: inherit; | |||||
background-color: rgba(255, 255, 255, 0.35); | |||||
} | |||||
[data-theme="kr-designer"] .el-button.is-round { | |||||
border-radius: 20px; | |||||
padding: 12px 23px; | |||||
} | |||||
[data-theme="kr-designer"] .el-button.is-circle { | |||||
border-radius: 50%; | |||||
padding: 12px; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--primary { | |||||
color: #fff; | |||||
background-color: #409eff; | |||||
border-color: #409eff; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--primary:focus, | |||||
[data-theme="kr-designer"] .el-button--primary:hover { | |||||
background: #66b1ff; | |||||
border-color: #66b1ff; | |||||
color: #fff; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--primary:active { | |||||
background: #3a8ee6; | |||||
border-color: #3a8ee6; | |||||
color: #fff; | |||||
outline: 0; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--primary.is-active { | |||||
background: #3a8ee6; | |||||
border-color: #3a8ee6; | |||||
color: #fff; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--primary.is-disabled, | |||||
[data-theme="kr-designer"] .el-button--primary.is-disabled:active, | |||||
[data-theme="kr-designer"] .el-button--primary.is-disabled:focus, | |||||
[data-theme="kr-designer"] .el-button--primary.is-disabled:hover { | |||||
color: #fff; | |||||
background-color: #a0cfff; | |||||
border-color: #a0cfff; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--primary.is-plain { | |||||
color: #409eff; | |||||
background: #ecf5ff; | |||||
border-color: #b3d8ff; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--primary.is-plain:focus, | |||||
[data-theme="kr-designer"] .el-button--primary.is-plain:hover { | |||||
background: #409eff; | |||||
border-color: #409eff; | |||||
color: #fff; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--primary.is-plain:active { | |||||
background: #3a8ee6; | |||||
border-color: #3a8ee6; | |||||
color: #fff; | |||||
outline: 0; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--primary.is-plain.is-disabled, | |||||
[data-theme="kr-designer"] .el-button--primary.is-plain.is-disabled:active, | |||||
[data-theme="kr-designer"] .el-button--primary.is-plain.is-disabled:focus, | |||||
[data-theme="kr-designer"] .el-button--primary.is-plain.is-disabled:hover { | |||||
color: #8cc5ff; | |||||
background-color: #ecf5ff; | |||||
border-color: #d9ecff; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--success { | |||||
color: #fff; | |||||
background-color: #67c23a; | |||||
border-color: #67c23a; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--success:focus, | |||||
[data-theme="kr-designer"] .el-button--success:hover { | |||||
background: #85ce61; | |||||
border-color: #85ce61; | |||||
color: #fff; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--success:active { | |||||
background: #5daf34; | |||||
border-color: #5daf34; | |||||
color: #fff; | |||||
outline: 0; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--success.is-active { | |||||
background: #5daf34; | |||||
border-color: #5daf34; | |||||
color: #fff; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--success.is-disabled, | |||||
[data-theme="kr-designer"] .el-button--success.is-disabled:active, | |||||
[data-theme="kr-designer"] .el-button--success.is-disabled:focus, | |||||
[data-theme="kr-designer"] .el-button--success.is-disabled:hover { | |||||
color: #fff; | |||||
background-color: #b3e19d; | |||||
border-color: #b3e19d; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--success.is-plain { | |||||
color: #67c23a; | |||||
background: #f0f9eb; | |||||
border-color: #c2e7b0; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--success.is-plain:focus, | |||||
[data-theme="kr-designer"] .el-button--success.is-plain:hover { | |||||
background: #67c23a; | |||||
border-color: #67c23a; | |||||
color: #fff; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--success.is-plain:active { | |||||
background: #5daf34; | |||||
border-color: #5daf34; | |||||
color: #fff; | |||||
outline: 0; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--success.is-plain.is-disabled, | |||||
[data-theme="kr-designer"] .el-button--success.is-plain.is-disabled:active, | |||||
[data-theme="kr-designer"] .el-button--success.is-plain.is-disabled:focus, | |||||
[data-theme="kr-designer"] .el-button--success.is-plain.is-disabled:hover { | |||||
color: #a4da89; | |||||
background-color: #f0f9eb; | |||||
border-color: #e1f3d8; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--warning { | |||||
color: #fff; | |||||
background-color: #e6a23c; | |||||
border-color: #e6a23c; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--warning:focus, | |||||
[data-theme="kr-designer"] .el-button--warning:hover { | |||||
background: #ebb563; | |||||
border-color: #ebb563; | |||||
color: #fff; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--warning:active { | |||||
background: #cf9236; | |||||
border-color: #cf9236; | |||||
color: #fff; | |||||
outline: 0; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--warning.is-active { | |||||
background: #cf9236; | |||||
border-color: #cf9236; | |||||
color: #fff; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--warning.is-disabled, | |||||
[data-theme="kr-designer"] .el-button--warning.is-disabled:active, | |||||
[data-theme="kr-designer"] .el-button--warning.is-disabled:focus, | |||||
[data-theme="kr-designer"] .el-button--warning.is-disabled:hover { | |||||
color: #fff; | |||||
background-color: #f3d19e; | |||||
border-color: #f3d19e; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--warning.is-plain { | |||||
color: #e6a23c; | |||||
background: #fdf6ec; | |||||
border-color: #f5dab1; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--warning.is-plain:focus, | |||||
[data-theme="kr-designer"] .el-button--warning.is-plain:hover { | |||||
background: #e6a23c; | |||||
border-color: #e6a23c; | |||||
color: #fff; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--warning.is-plain:active { | |||||
background: #cf9236; | |||||
border-color: #cf9236; | |||||
color: #fff; | |||||
outline: 0; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--warning.is-plain.is-disabled, | |||||
[data-theme="kr-designer"] .el-button--warning.is-plain.is-disabled:active, | |||||
[data-theme="kr-designer"] .el-button--warning.is-plain.is-disabled:focus, | |||||
[data-theme="kr-designer"] .el-button--warning.is-plain.is-disabled:hover { | |||||
color: #f0c78a; | |||||
background-color: #fdf6ec; | |||||
border-color: #faecd8; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--danger { | |||||
color: #fff; | |||||
background-color: #f56c6c; | |||||
border-color: #f56c6c; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--danger:focus, | |||||
[data-theme="kr-designer"] .el-button--danger:hover { | |||||
background: #f78989; | |||||
border-color: #f78989; | |||||
color: #fff; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--danger:active { | |||||
background: #dd6161; | |||||
border-color: #dd6161; | |||||
color: #fff; | |||||
outline: 0; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--danger.is-active { | |||||
background: #dd6161; | |||||
border-color: #dd6161; | |||||
color: #fff; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--danger.is-disabled, | |||||
[data-theme="kr-designer"] .el-button--danger.is-disabled:active, | |||||
[data-theme="kr-designer"] .el-button--danger.is-disabled:focus, | |||||
[data-theme="kr-designer"] .el-button--danger.is-disabled:hover { | |||||
color: #fff; | |||||
background-color: #fab6b6; | |||||
border-color: #fab6b6; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--danger.is-plain { | |||||
color: #f56c6c; | |||||
background: #fef0f0; | |||||
border-color: #fbc4c4; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--danger.is-plain:focus, | |||||
[data-theme="kr-designer"] .el-button--danger.is-plain:hover { | |||||
background: #f56c6c; | |||||
border-color: #f56c6c; | |||||
color: #fff; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--danger.is-plain:active { | |||||
background: #dd6161; | |||||
border-color: #dd6161; | |||||
color: #fff; | |||||
outline: 0; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--danger.is-plain.is-disabled, | |||||
[data-theme="kr-designer"] .el-button--danger.is-plain.is-disabled:active, | |||||
[data-theme="kr-designer"] .el-button--danger.is-plain.is-disabled:focus, | |||||
[data-theme="kr-designer"] .el-button--danger.is-plain.is-disabled:hover { | |||||
color: #f9a7a7; | |||||
background-color: #fef0f0; | |||||
border-color: #fde2e2; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--info { | |||||
color: #fff; | |||||
background-color: #909399; | |||||
border-color: #909399; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--info:focus, | |||||
[data-theme="kr-designer"] .el-button--info:hover { | |||||
background: #a6a9ad; | |||||
border-color: #a6a9ad; | |||||
color: #fff; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--info:active { | |||||
background: #82848a; | |||||
border-color: #82848a; | |||||
color: #fff; | |||||
outline: 0; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--info.is-active { | |||||
background: #82848a; | |||||
border-color: #82848a; | |||||
color: #fff; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--info.is-disabled, | |||||
[data-theme="kr-designer"] .el-button--info.is-disabled:active, | |||||
[data-theme="kr-designer"] .el-button--info.is-disabled:focus, | |||||
[data-theme="kr-designer"] .el-button--info.is-disabled:hover { | |||||
color: #fff; | |||||
background-color: #c8c9cc; | |||||
border-color: #c8c9cc; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--info.is-plain { | |||||
color: #909399; | |||||
background: #f4f4f5; | |||||
border-color: #d3d4d6; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--info.is-plain:focus, | |||||
[data-theme="kr-designer"] .el-button--info.is-plain:hover { | |||||
background: #909399; | |||||
border-color: #909399; | |||||
color: #fff; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--info.is-plain:active { | |||||
background: #82848a; | |||||
border-color: #82848a; | |||||
color: #fff; | |||||
outline: 0; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--info.is-plain.is-disabled, | |||||
[data-theme="kr-designer"] .el-button--info.is-plain.is-disabled:active, | |||||
[data-theme="kr-designer"] .el-button--info.is-plain.is-disabled:focus, | |||||
[data-theme="kr-designer"] .el-button--info.is-plain.is-disabled:hover { | |||||
color: #bcbec2; | |||||
background-color: #f4f4f5; | |||||
border-color: #e9e9eb; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--medium { | |||||
padding: 10px 20px; | |||||
font-size: 14px; | |||||
border-radius: 4px; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--medium.is-round { | |||||
padding: 10px 20px; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--medium.is-circle { | |||||
padding: 10px; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--small { | |||||
padding: 9px 15px; | |||||
font-size: 12px; | |||||
border-radius: 3px; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--small.is-round { | |||||
padding: 9px 15px; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--small.is-circle { | |||||
padding: 9px; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--mini { | |||||
padding: 7px 15px; | |||||
font-size: 12px; | |||||
border-radius: 3px; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--mini.is-round { | |||||
padding: 7px 15px; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--mini.is-circle { | |||||
padding: 7px; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--text { | |||||
border-color: transparent; | |||||
color: #409eff; | |||||
background: 0 0; | |||||
padding-left: 0; | |||||
padding-right: 0; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--text:focus, | |||||
[data-theme="kr-designer"] .el-button--text:hover { | |||||
color: #66b1ff; | |||||
border-color: transparent; | |||||
background-color: transparent; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--text:active { | |||||
color: #3a8ee6; | |||||
border-color: transparent; | |||||
background-color: transparent; | |||||
} | |||||
[data-theme="kr-designer"] .el-button--text.is-disabled, | |||||
[data-theme="kr-designer"] .el-button--text.is-disabled:focus, | |||||
[data-theme="kr-designer"] .el-button--text.is-disabled:hover { | |||||
border-color: transparent; | |||||
} | |||||
[data-theme="kr-designer"] .el-button-group { | |||||
display: inline-block; | |||||
vertical-align: middle; | |||||
} | |||||
[data-theme="kr-designer"] .el-button-group::after, | |||||
[data-theme="kr-designer"] .el-button-group::before { | |||||
display: table; | |||||
content: ""; | |||||
} | |||||
[data-theme="kr-designer"] .el-button-group::after { | |||||
clear: both; | |||||
} | |||||
[data-theme="kr-designer"] .el-button-group > .el-button { | |||||
float: left; | |||||
position: relative; | |||||
} | |||||
[data-theme="kr-designer"] .el-button-group > .el-button + .el-button { | |||||
margin-left: 0; | |||||
} | |||||
[data-theme="kr-designer"] .el-button-group > .el-button.is-disabled { | |||||
z-index: 1; | |||||
} | |||||
[data-theme="kr-designer"] .el-button-group > .el-button:first-child { | |||||
border-top-right-radius: 0; | |||||
border-bottom-right-radius: 0; | |||||
} | |||||
[data-theme="kr-designer"] .el-button-group > .el-button:last-child { | |||||
border-top-left-radius: 0; | |||||
border-bottom-left-radius: 0; | |||||
} | |||||
[data-theme="kr-designer"] | |||||
.el-button-group | |||||
> .el-button:first-child:last-child { | |||||
border-radius: 4px; | |||||
} | |||||
[data-theme="kr-designer"] | |||||
.el-button-group | |||||
> .el-button:first-child:last-child.is-round { | |||||
border-radius: 20px; | |||||
} | |||||
[data-theme="kr-designer"] | |||||
.el-button-group | |||||
> .el-button:first-child:last-child.is-circle { | |||||
border-radius: 50%; | |||||
} | |||||
[data-theme="kr-designer"] | |||||
.el-button-group | |||||
> .el-button:not(:first-child):not(:last-child) { | |||||
border-radius: 0; | |||||
} | |||||
[data-theme="kr-designer"] .el-button-group > .el-button:not(:last-child) { | |||||
margin-right: -1px; | |||||
} | |||||
[data-theme="kr-designer"] .el-button-group > .el-button.is-active, | |||||
[data-theme="kr-designer"] .el-button-group > .el-button:active, | |||||
[data-theme="kr-designer"] .el-button-group > .el-button:focus, | |||||
[data-theme="kr-designer"] .el-button-group > .el-button:hover { | |||||
z-index: 1; | |||||
} | |||||
[data-theme="kr-designer"] .el-button-group > .el-dropdown > .el-button { | |||||
border-top-left-radius: 0; | |||||
border-bottom-left-radius: 0; | |||||
border-left-color: rgba(255, 255, 255, 0.5); | |||||
} | |||||
[data-theme="kr-designer"] .el-button-group .el-button--primary:first-child { | |||||
border-right-color: rgba(255, 255, 255, 0.5); | |||||
} | |||||
[data-theme="kr-designer"] .el-button-group .el-button--primary:last-child { | |||||
border-left-color: rgba(255, 255, 255, 0.5); | |||||
} | |||||
[data-theme="kr-designer"] | |||||
.el-button-group | |||||
.el-button--primary:not(:first-child):not(:last-child) { | |||||
border-left-color: rgba(255, 255, 255, 0.5); | |||||
border-right-color: rgba(255, 255, 255, 0.5); | |||||
} | |||||
[data-theme="kr-designer"] .el-button-group .el-button--success:first-child { | |||||
border-right-color: rgba(255, 255, 255, 0.5); | |||||
} | |||||
[data-theme="kr-designer"] .el-button-group .el-button--success:last-child { | |||||
border-left-color: rgba(255, 255, 255, 0.5); | |||||
} | |||||
[data-theme="kr-designer"] | |||||
.el-button-group | |||||
.el-button--success:not(:first-child):not(:last-child) { | |||||
border-left-color: rgba(255, 255, 255, 0.5); | |||||
border-right-color: rgba(255, 255, 255, 0.5); | |||||
} | |||||
[data-theme="kr-designer"] .el-button-group .el-button--warning:first-child { | |||||
border-right-color: rgba(255, 255, 255, 0.5); | |||||
} | |||||
[data-theme="kr-designer"] .el-button-group .el-button--warning:last-child { | |||||
border-left-color: rgba(255, 255, 255, 0.5); | |||||
} | |||||
[data-theme="kr-designer"] | |||||
.el-button-group | |||||
.el-button--warning:not(:first-child):not(:last-child) { | |||||
border-left-color: rgba(255, 255, 255, 0.5); | |||||
border-right-color: rgba(255, 255, 255, 0.5); | |||||
} | |||||
[data-theme="kr-designer"] .el-button-group .el-button--danger:first-child { | |||||
border-right-color: rgba(255, 255, 255, 0.5); | |||||
} | |||||
[data-theme="kr-designer"] .el-button-group .el-button--danger:last-child { | |||||
border-left-color: rgba(255, 255, 255, 0.5); | |||||
} | |||||
[data-theme="kr-designer"] | |||||
.el-button-group | |||||
.el-button--danger:not(:first-child):not(:last-child) { | |||||
border-left-color: rgba(255, 255, 255, 0.5); | |||||
border-right-color: rgba(255, 255, 255, 0.5); | |||||
} | |||||
[data-theme="kr-designer"] .el-button-group .el-button--info:first-child { | |||||
border-right-color: rgba(255, 255, 255, 0.5); | |||||
} | |||||
[data-theme="kr-designer"] .el-button-group .el-button--info:last-child { | |||||
border-left-color: rgba(255, 255, 255, 0.5); | |||||
} | |||||
[data-theme="kr-designer"] | |||||
.el-button-group | |||||
.el-button--info:not(:first-child):not(:last-child) { | |||||
border-left-color: rgba(255, 255, 255, 0.5); | |||||
border-right-color: rgba(255, 255, 255, 0.5); | |||||
} | |||||
[data-theme="kr-designer"] .el-popper .popper__arrow, | |||||
[data-theme="kr-designer"] .el-popper .popper__arrow::after { | |||||
position: absolute; | |||||
display: block; | |||||
width: 0; | |||||
height: 0; | |||||
border-color: transparent; | |||||
border-style: solid; | |||||
} | |||||
[data-theme="kr-designer"] .el-popper .popper__arrow { | |||||
border-width: 6px; | |||||
-webkit-filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03)); | |||||
filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03)); | |||||
} | |||||
[data-theme="kr-designer"] .el-popper .popper__arrow::after { | |||||
content: " "; | |||||
border-width: 6px; | |||||
} | |||||
[data-theme="kr-designer"] .el-popper[x-placement^="top"] { | |||||
margin-bottom: 12px; | |||||
} | |||||
[data-theme="kr-designer"] .el-popper[x-placement^="top"] .popper__arrow { | |||||
bottom: -6px; | |||||
left: 50%; | |||||
margin-right: 3px; | |||||
border-top-color: #ebeef5; | |||||
border-bottom-width: 0; | |||||
} | |||||
[data-theme="kr-designer"] | |||||
.el-popper[x-placement^="top"] | |||||
.popper__arrow::after { | |||||
bottom: 1px; | |||||
margin-left: -6px; | |||||
border-top-color: #fff; | |||||
border-bottom-width: 0; | |||||
} | |||||
[data-theme="kr-designer"] .el-popper[x-placement^="bottom"] { | |||||
margin-top: 12px; | |||||
} | |||||
[data-theme="kr-designer"] .el-popper[x-placement^="bottom"] .popper__arrow { | |||||
top: -6px; | |||||
left: 50%; | |||||
margin-right: 3px; | |||||
border-top-width: 0; | |||||
border-bottom-color: #ebeef5; | |||||
} | |||||
[data-theme="kr-designer"] | |||||
.el-popper[x-placement^="bottom"] | |||||
.popper__arrow::after { | |||||
top: 1px; | |||||
margin-left: -6px; | |||||
border-top-width: 0; | |||||
border-bottom-color: #fff; | |||||
} | |||||
[data-theme="kr-designer"] .el-popper[x-placement^="right"] { | |||||
margin-left: 12px; | |||||
} | |||||
[data-theme="kr-designer"] .el-popper[x-placement^="right"] .popper__arrow { | |||||
top: 50%; | |||||
left: -6px; | |||||
margin-bottom: 3px; | |||||
border-right-color: #ebeef5; | |||||
border-left-width: 0; | |||||
} | |||||
[data-theme="kr-designer"] | |||||
.el-popper[x-placement^="right"] | |||||
.popper__arrow::after { | |||||
bottom: -6px; | |||||
left: 1px; | |||||
border-right-color: #fff; | |||||
border-left-width: 0; | |||||
} | |||||
[data-theme="kr-designer"] .el-popper[x-placement^="left"] { | |||||
margin-right: 12px; | |||||
} | |||||
[data-theme="kr-designer"] .el-popper[x-placement^="left"] .popper__arrow { | |||||
top: 50%; | |||||
right: -6px; | |||||
margin-bottom: 3px; | |||||
border-right-width: 0; | |||||
border-left-color: #ebeef5; | |||||
} | |||||
[data-theme="kr-designer"] | |||||
.el-popper[x-placement^="left"] | |||||
.popper__arrow::after { | |||||
right: 1px; | |||||
bottom: -6px; | |||||
margin-left: -6px; | |||||
border-right-width: 0; | |||||
border-left-color: #fff; | |||||
} | |||||
[data-theme="kr-designer"] .el-dropdown { | |||||
display: inline-block; | |||||
position: relative; | |||||
color: #606266; | |||||
font-size: 14px; | |||||
} | |||||
[data-theme="kr-designer"] .el-dropdown .el-button-group { | |||||
display: block; | |||||
} | |||||
[data-theme="kr-designer"] .el-dropdown .el-button-group .el-button { | |||||
float: none; | |||||
} | |||||
[data-theme="kr-designer"] .el-dropdown .el-dropdown__caret-button { | |||||
padding-left: 5px; | |||||
padding-right: 5px; | |||||
position: relative; | |||||
border-left: none; | |||||
} | |||||
[data-theme="kr-designer"] .el-dropdown .el-dropdown__caret-button::before { | |||||
content: ""; | |||||
position: absolute; | |||||
display: block; | |||||
width: 1px; | |||||
top: 5px; | |||||
bottom: 5px; | |||||
left: 0; | |||||
background: rgba(255, 255, 255, 0.5); | |||||
} | |||||
[data-theme="kr-designer"] | |||||
.el-dropdown | |||||
.el-dropdown__caret-button.el-button--default::before { | |||||
background: rgba(220, 223, 230, 0.5); | |||||
} | |||||
[data-theme="kr-designer"] | |||||
.el-dropdown | |||||
.el-dropdown__caret-button:hover::before { | |||||
top: 0; | |||||
bottom: 0; | |||||
} | |||||
[data-theme="kr-designer"] | |||||
.el-dropdown | |||||
.el-dropdown__caret-button | |||||
.el-dropdown__icon { | |||||
padding-left: 0; | |||||
} | |||||
.el-dropdown__icon { | |||||
font-size: 12px; | |||||
margin: 0 3px; | |||||
} | |||||
[data-theme="kr-designer"] .el-dropdown .el-dropdown-selfdefine:focus:active, | |||||
[data-theme="kr-designer"] | |||||
.el-dropdown | |||||
.el-dropdown-selfdefine:focus:not(.focusing) { | |||||
outline-width: 0; | |||||
} | |||||
[data-theme="kr-designer"] .el-dropdown-menu { | |||||
position: absolute; | |||||
top: 0; | |||||
left: 0; | |||||
z-index: 10; | |||||
padding: 10px 0; | |||||
margin: 5px 0; | |||||
background-color: #fff; | |||||
border: 1px solid #ebeef5; | |||||
border-radius: 4px; | |||||
-webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); | |||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); | |||||
} | |||||
.el-dropdown-menu__item { | |||||
list-style: none; | |||||
line-height: 36px; | |||||
padding: 0 20px; | |||||
margin: 0; | |||||
font-size: 14px; | |||||
color: #606266; | |||||
cursor: pointer; | |||||
outline: 0; | |||||
} | |||||
.el-dropdown-menu__item:focus, | |||||
.el-dropdown-menu__item:not(.is-disabled):hover { | |||||
background-color: #ecf5ff; | |||||
color: #66b1ff; | |||||
} | |||||
.el-dropdown-menu__item i { | |||||
margin-right: 5px; | |||||
} | |||||
.el-dropdown-menu__item--divided { | |||||
position: relative; | |||||
margin-top: 6px; | |||||
border-top: 1px solid #ebeef5; | |||||
} | |||||
.el-dropdown-menu__item--divided:before { | |||||
content: ""; | |||||
height: 6px; | |||||
display: block; | |||||
margin: 0 -20px; | |||||
background-color: #fff; | |||||
} | |||||
.el-dropdown-menu__item.is-disabled { | |||||
cursor: default; | |||||
color: #bbb; | |||||
pointer-events: none; | |||||
} | |||||
[data-theme="kr-designer"] .el-dropdown-menu--medium { | |||||
padding: 6px 0; | |||||
} | |||||
[data-theme="kr-designer"] .el-dropdown-menu--medium .el-dropdown-menu__item { | |||||
line-height: 30px; | |||||
padding: 0 17px; | |||||
font-size: 14px; | |||||
} | |||||
[data-theme="kr-designer"] | |||||
.el-dropdown-menu--medium | |||||
.el-dropdown-menu__item.el-dropdown-menu__item--divided { | |||||
margin-top: 6px; | |||||
} | |||||
[data-theme="kr-designer"] | |||||
.el-dropdown-menu--medium | |||||
.el-dropdown-menu__item.el-dropdown-menu__item--divided:before { | |||||
height: 6px; | |||||
margin: 0 -17px; | |||||
} | |||||
[data-theme="kr-designer"] .el-dropdown-menu--small { | |||||
padding: 6px 0; | |||||
} | |||||
[data-theme="kr-designer"] .el-dropdown-menu--small .el-dropdown-menu__item { | |||||
line-height: 27px; | |||||
padding: 0 15px; | |||||
font-size: 13px; | |||||
} | |||||
[data-theme="kr-designer"] | |||||
.el-dropdown-menu--small | |||||
.el-dropdown-menu__item.el-dropdown-menu__item--divided { | |||||
margin-top: 4px; | |||||
} | |||||
[data-theme="kr-designer"] | |||||
.el-dropdown-menu--small | |||||
.el-dropdown-menu__item.el-dropdown-menu__item--divided:before { | |||||
height: 4px; | |||||
margin: 0 -15px; | |||||
} | |||||
[data-theme="kr-designer"] .el-dropdown-menu--mini { | |||||
padding: 3px 0; | |||||
} | |||||
[data-theme="kr-designer"] .el-dropdown-menu--mini .el-dropdown-menu__item { | |||||
line-height: 24px; | |||||
padding: 0 10px; | |||||
font-size: 12px; | |||||
} | |||||
[data-theme="kr-designer"] | |||||
.el-dropdown-menu--mini | |||||
.el-dropdown-menu__item.el-dropdown-menu__item--divided { | |||||
margin-top: 3px; | |||||
} | |||||
[data-theme="kr-designer"] | |||||
.el-dropdown-menu--mini | |||||
.el-dropdown-menu__item.el-dropdown-menu__item--divided:before { | |||||
height: 3px; | |||||
margin: 0 -10px; | |||||
} |
@@ -0,0 +1 @@ | |||||
[data-theme=kr-designer] .el-footer{padding:0 20px;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-negative:0;flex-shrink:0} |
@@ -0,0 +1 @@ | |||||
.el-form-item__content::after,[data-theme=kr-designer] .el-form-item::after{clear:both}[data-theme=kr-designer] .el-form--label-left .el-form-item__label{text-align:left}[data-theme=kr-designer] .el-form--label-top .el-form-item__label{float:none;display:inline-block;text-align:left;padding:0 0 10px}[data-theme=kr-designer] .el-form--inline .el-form-item{display:inline-block;margin-right:10px;vertical-align:top}[data-theme=kr-designer] .el-form--inline .el-form-item__label{float:none;display:inline-block}[data-theme=kr-designer] .el-form--inline .el-form-item__content{display:inline-block;vertical-align:top}[data-theme=kr-designer] .el-form--inline.el-form--label-top .el-form-item__content{display:block}.el-form-item__content::after,.el-form-item__content::before,[data-theme=kr-designer] .el-form-item::after,[data-theme=kr-designer] .el-form-item::before{display:table;content:""}[data-theme=kr-designer] .el-form-item{margin-bottom:22px}[data-theme=kr-designer] .el-form-item .el-form-item{margin-bottom:0}[data-theme=kr-designer] .el-form-item--mini.el-form-item,[data-theme=kr-designer] .el-form-item--small.el-form-item{margin-bottom:18px}[data-theme=kr-designer] .el-form-item .el-input__validateIcon{display:none}[data-theme=kr-designer] .el-form-item--medium .el-form-item__content,[data-theme=kr-designer] .el-form-item--medium .el-form-item__label{line-height:36px}[data-theme=kr-designer] .el-form-item--small .el-form-item__content,[data-theme=kr-designer] .el-form-item--small .el-form-item__label{line-height:32px}[data-theme=kr-designer] .el-form-item--small .el-form-item__error{padding-top:2px}[data-theme=kr-designer] .el-form-item--mini .el-form-item__content,[data-theme=kr-designer] .el-form-item--mini .el-form-item__label{line-height:28px}[data-theme=kr-designer] .el-form-item--mini .el-form-item__error{padding-top:1px}.el-form-item__label-wrap{float:left}.el-form-item__label-wrap .el-form-item__label{display:inline-block;float:none}.el-form-item__label{text-align:right;vertical-align:middle;float:left;font-size:14px;color:#606266;line-height:40px;padding:0 12px 0 0;-webkit-box-sizing:border-box;box-sizing:border-box}.el-form-item__content{line-height:40px;position:relative;font-size:14px}.el-form-item__content .el-input-group{vertical-align:top}.el-form-item__error{color:#F56C6C;font-size:12px;line-height:1;padding-top:4px;position:absolute;top:100%;left:0}.el-form-item__error--inline{position:relative;top:auto;left:auto;display:inline-block;margin-left:10px}[data-theme=kr-designer] .el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap>.el-form-item__label:before,[data-theme=kr-designer] .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before{content:'*';color:#F56C6C;margin-right:4px}[data-theme=kr-designer] .el-form-item.is-error .el-input__inner,[data-theme=kr-designer] .el-form-item.is-error .el-input__inner:focus,[data-theme=kr-designer] .el-form-item.is-error .el-textarea__inner,[data-theme=kr-designer] .el-form-item.is-error .el-textarea__inner:focus{border-color:#F56C6C}[data-theme=kr-designer] .el-form-item.is-error .el-input-group__append .el-input__inner,[data-theme=kr-designer] .el-form-item.is-error .el-input-group__prepend .el-input__inner{border-color:transparent}[data-theme=kr-designer] .el-form-item.is-error .el-input__validateIcon{color:#F56C6C}[data-theme=kr-designer] .el-form-item--feedback .el-input__validateIcon{display:inline-block} |
@@ -0,0 +1 @@ | |||||
[data-theme=kr-designer] .el-header{padding:0 20px;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-negative:0;flex-shrink:0} |