suojin
/
bladex_workflow_saber
mirror of https://git.nutflow.vip/blade-workflow/Saber.git
22
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: 详情模式表单主题配置

Browse Source
master
ssc 3 years ago
parent 24f2c2921b
commit d552260e5b
10 changed files with 620 additions and 260 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 50
      src/api/plugin/workflow/form-theme.js
  2. 455
      src/views/plugin/workflow/design/form-theme.vue
  3. 2
      src/views/plugin/workflow/mixins/ex-form.js
  4. 37
      src/views/plugin/workflow/mixins/theme.js
  5. 7
      src/views/plugin/workflow/process/components/detail.vue
  6. 3
      src/views/plugin/workflow/process/external/Leave/detail.vue
  7. 82
      src/views/plugin/workflow/styles/theme.scss
  8. 63
      src/views/plugin/workflow/styles/theme/blue.scss
  9. 47
      src/views/plugin/workflow/styles/theme/border.scss
  10. 134
      src/views/plugin/workflow/styles/theme/default.scss

50
src/api/plugin/workflow/form-theme.js
Unescape View File

@ -0,0 +1,50 @@
import request from '@/router/axios';
const prefix = '/api/blade-workflow/design/form/theme'
export const getList = (current, size, params) => {
return request({
url: `${prefix}/list`,
method: 'get',
params: {
...params,
current,
size,
}
})
}
export const getDetail = (params) => {
return request({
url: `${prefix}/detail`,
method: 'get',
params
})
}
export const remove = (ids) => {
return request({
url: `${prefix}/remove`,
method: 'post',
params: {
ids,
}
})
}
export const add = (row) => {
return request({
url: `${prefix}/submit`,
method: 'post',
data: row
})
}
export const update = (row) => {
return request({
url: `${prefix}/update`,
method: 'post',
data: row
})
}

455
src/views/plugin/workflow/design/form-theme.vue
Unescape View File

@ -0,0 +1,455 @@
<template>
<basic-container>
<avue-crud
:option="option"
:search.sync="search"
:table-loading="loading"
:data="data"
:page.sync="page"
:permission="permissionList"
:before-open="beforeOpen"
v-model="form"
ref="crud"
@row-update="rowUpdate"
@row-save="rowSave"
@row-del="rowDel"
@search-change="searchChange"
@search-reset="searchReset"
@selection-change="selectionChange"
@current-change="currentChange"
@size-change="sizeChange"
@refresh-change="refreshChange"
@on-load="onLoad"
>
<template slot="menuLeft">
<el-button
type="danger"
size="small"
icon="el-icon-delete"
plain
v-if="permission.wf_design_form_theme_delete"
@click="handleDelete"
>删 除
</el-button>
</template>
<template #menu="{ row }">
<el-button
type="text"
size="small"
icon="el-icon-view"
@click="handlePreview(row)"
>预览
</el-button>
</template>
</avue-crud>
<el-drawer
title="预览"
:visible.sync="previewVisible"
append-to-body
destroy-on-close
size="50%"
>
<div class="wf-theme-custom">
<avue-form
v-model="previewForm"
:option="previewOption"
:style="themeCustomStyle"
></avue-form>
</div>
</el-drawer>
</basic-container>
</template>
<script>
import { getList, getDetail, add, update, remove } from "@/api/plugin/workflow/form-theme";
import { mapGetters } from "vuex";
import theme from '../mixins/theme'
export default {
mixins: [theme],
data() {
return {
form: {},
query: {},
search: {},
loading: true,
page: {
pageSize: 10,
currentPage: 1,
total: 0
},
selectionList: [],
option: {
height: 'auto',
calcHeight: 30,
tip: false,
searchMenuSpan: 6,
border: true,
index: true,
viewBtn: false,
selection: true,
dialogClickModal: false,
dialogType: 'drawer',
dialogWidth: '50%',
labelWidth: 140,
menuWidth: 240,
column: [
{
label: "名称",
prop: "name",
type: "input",
rules: [{
required: true,
message: "请输入名称",
trigger: "blur"
}],
search: true
},
{
label: "主题key",
prop: "themeKey",
type: "input",
rules: [{
required: true,
message: "请输入主题key",
trigger: "blur"
}],
search: true
},
{
label: "边框宽度",
prop: "borderWidth",
type: "input",
hide: true,
span: 24,
},
{
label: "边框颜色",
prop: "borderColor",
type: "color",
hide: true,
span: 24,
},
{
label: "label字体颜色",
prop: "labelColor",
type: "color",
hide: true,
span: 24,
},
{
label: "label背景颜色",
prop: "labelBg",
type: "color",
hide: true,
span: 24,
},
// {
// label: "label宽度",
// prop: "labelWidth",
// type: "input",
// hide: true,
// span: 24,
// },
{
label: "label字体大小",
prop: "labelFontSize",
type: "input",
hide: true,
span: 24,
},
{
label: "value字体颜色",
prop: "valueColor",
type: "color",
hide: true,
span: 24,
},
{
label: "value背景颜色",
prop: "valueBg",
type: "color",
hide: true,
span: 24,
},
{
label: "value字体大小",
prop: "valueFontSize",
type: "input",
hide: true,
span: 24,
},
]
},
data: [],
previewVisible: false,
previewForm: {},
previewOption: {
detail: true,
column: [
{
type: 'input',
label: '输入框',
prop: 'input',
value: '输入框',
},
{
type: 'select',
label: '下拉框',
prop: 'select',
value: '下拉框',
},
{
type: 'radio',
label: '单选框',
prop: 'radio',
value: '单选框1',
dicData: [{
label: '单选框1',
value: '单选框1'
}, {
label: '单选框2',
value: '单选框2'
}]
},
{
type: 'checkbox',
label: '多选框',
prop: 'checkbox',
value: ['多选框1', '多选框2'],
dicData: [{
label: '多选框1',
value: '多选框1'
}, {
label: '多选框2',
value: '多选框2'
}]
},
{
type: 'datetime',
label: '日期时间',
prop: 'date',
value: '2020-01-01 12:00:00'
},
{
type: 'slider',
label: '滑块',
prop: 'slider',
range: true,
value: [20, 50]
},
{
type: 'rate',
label: '评分',
prop: 'rate',
value: 3
},
{
type: 'switch',
label: '开关',
prop: 'switch',
value: true
},
{
component: 'avue-ueditor',
label: '富文本',
prop: 'editor',
span: 24,
},
{
type: 'dynamic',
label: '子表单',
prop: 'dynamic',
span: 24,
value: [
{
input1: '输入框1',
input2: '输入框2'
}
],
children: {
addBtn: false,
align: 'center',
column: [
{
type: 'input',
label: '输入框1',
prop: 'input1',
},
{
type: 'input',
label: '输入框2',
prop: 'input2',
},
]
}
}
],
group: [
{
label: '分组1',
column: [
{
type: 'input',
label: '输入框',
prop: 'input3',
value: '输入框'
},
{
type: 'select',
label: '下拉框',
prop: 'select3',
value: '下拉框',
},
]
},
]
},
theme: 'default'
};
},
computed: {
...mapGetters(["permission"]),
permissionList() {
return {
addBtn: this.vaildData(this.permission.wf_design_form_theme_add, false),
viewBtn: this.vaildData(this.permission.wf_design_form_theme_view, false),
delBtn: this.vaildData(this.permission.wf_design_form_theme_delete, false),
editBtn: this.vaildData(this.permission.wf_design_form_theme_edit, false)
};
},
ids() {
let ids = [];
this.selectionList.forEach(ele => {
ids.push(ele.id);
});
return ids.join(",");
}
},
methods: {
handlePreview(row) {
this.theme = row.themeKey
this.setThemeStyle()
this.previewVisible = true
},
rowSave(row, done, loading) {
add(row).then(() => {
this.onLoad(this.page);
this.$message({
type: "success",
message: "操作成功!"
});
this.initTheme()
done();
}, error => {
loading();
window.console.log(error);
});
},
rowUpdate(row, index, done, loading) {
update(row).then(() => {
this.onLoad(this.page);
this.$message({
type: "success",
message: "操作成功!"
});
this.initTheme()
done();
}, error => {
loading();
console.log(error);
});
},
rowDel(row) {
this.$confirm("确定将选择数据删除?", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
})
.then(() => {
return remove(row.id);
})
.then(() => {
this.onLoad(this.page);
this.initTheme()
this.$message({
type: "success",
message: "操作成功!"
});
});
},
handleDelete() {
if (this.selectionList.length === 0) {
this.$message.warning("请选择至少一条数据");
return;
}
this.$confirm("确定将选择数据删除?", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
})
.then(() => {
return remove(this.ids);
})
.then(() => {
this.onLoad(this.page);
this.initTheme()
this.$message({
type: "success",
message: "操作成功!"
});
this.$refs.crud.toggleSelection();
});
},
beforeOpen(done, type) {
if (["edit", "view"].includes(type)) {
getDetail({ id: this.form.id }).then(res => {
this.form = res.data.data;
})
}
done();
},
searchReset() {
this.query = {};
this.onLoad(this.page);
},
searchChange(params, done) {
this.query = params;
this.page.currentPage = 1;
this.onLoad(this.page, params);
done();
},
selectionChange(list) {
this.selectionList = list;
},
selectionClear() {
this.selectionList = [];
this.$refs.crud.toggleSelection();
},
currentChange(currentPage) {
this.page.currentPage = currentPage;
},
sizeChange(pageSize) {
this.page.pageSize = pageSize;
},
refreshChange() {
this.onLoad(this.page, this.query);
},
onLoad(page, params = {}) {
this.loading = true;
getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
const data = res.data.data;
this.page.total = data.total;
this.data = data.records;
this.loading = false;
this.selectionClear();
});
}
}
};
</script>
<style>
</style>

2
src/views/plugin/workflow/mixins/ex-form.js
Unescape View File

@ -99,7 +99,7 @@ export default {
// event.forEach(e => delete col[e]) // event.forEach(e => delete col[e])
} }
if (col.type == 'dynamic') { // 处理子表单 if (col.type == 'dynamic') { // 处理子表单
col.children.column = _this.filterAvueColumn(col.children.column, taskForm).column col.children.column = _this.filterAvueColumn(col.children.column, taskForm, isExForm).column
} }
if (col.rules && col.pattern) { // 处理正则 if (col.rules && col.pattern) { // 处理正则
col.rules.forEach(c => { col.rules.forEach(c => {

37
src/views/plugin/workflow/mixins/theme.js
Unescape View File

@ -1,20 +1,14 @@
import { getList } from '@/api/plugin/workflow/form-theme.js'
export default { export default {
data() { data() {
return { return {
theme: '', theme: '',
themeList: [{ themeList: [],
label: '默认', themeCustomStyle: {},
value: 'default'
}, {
label: '边框',
value: 'border'
}, {
label: '蓝色',
value: 'blue'
}]
} }
}, },
created() { created() {
this.initTheme()
const theme = localStorage.getItem("wf-form-theme") const theme = localStorage.getItem("wf-form-theme")
if (theme || theme == '') this.theme = theme || 'default' if (theme || theme == '') this.theme = theme || 'default'
else this.theme = 'default' else this.theme = 'default'
@ -23,11 +17,30 @@ export default {
theme: { theme: {
handler(val) { handler(val) {
if (val) { if (val) {
import(`../styles/theme/${val}.scss`) import(`../styles/theme.scss`)
localStorage.setItem('wf-form-theme', val) localStorage.setItem('wf-form-theme', val)
this.setThemeStyle()
} }
}, },
immediate: true immediate: true
}, },
}, },
} methods: {
initTheme() {
getList(1, -1).then(res => {
this.themeList = res.data.data.records
this.themeList.forEach(e => {
e.label = e.name
e.value = e.themeKey
})
this.setThemeStyle()
});
},
setThemeStyle() {
let obj = this.themeList.find(item => item.themeKey == this.theme)
for (let i in obj) {
this.themeCustomStyle[`--${i}`] = obj[i]
}
},
},
}

7
src/views/plugin/workflow/process/components/detail.vue
Unescape View File

@ -11,7 +11,8 @@
主题：<avue-select v-model="theme" 主题：<avue-select v-model="theme"
size="mini" size="mini"
:clearable="false" :clearable="false"
:dic="themeList"></avue-select> :dic="themeList"
@change="setThemeStyle"></avue-select>
</div> </div>
</div> </div>
</avue-affix> </avue-affix>
@ -20,15 +21,17 @@
name="first"> name="first">
<el-card shadow="never"> <el-card shadow="never">
<div id="printBody" <div id="printBody"
:class="process.status != 'todo' ? `wf-theme-${theme}`: ''"> :class="process.status != 'todo' ? `wf-theme-custom`: ''">
<avue-form v-if="summaryOption && ((summaryOption.column && summaryOption.column.length > 0) || (summaryOption.group && summaryOption.group.length > 0))" <avue-form v-if="summaryOption && ((summaryOption.column && summaryOption.column.length > 0) || (summaryOption.group && summaryOption.group.length > 0))"
v-model="form" v-model="form"
:style="themeCustomStyle"
ref="summaryForm" ref="summaryForm"
:option="summaryOption" :option="summaryOption"
:upload-preview="handleUploadPreview" :upload-preview="handleUploadPreview"
style="margin-bottom: 20px;"></avue-form> style="margin-bottom: 20px;"></avue-form>
<avue-form v-if="option && ((option.column && option.column.length > 0) || (option.group && option.group.length > 0))" <avue-form v-if="option && ((option.column && option.column.length > 0) || (option.group && option.group.length > 0))"
v-model="form" v-model="form"
:style="themeCustomStyle"
ref="form" ref="form"
:defaults.sync="defaults" :defaults.sync="defaults"
:option="option" :option="option"

3
src/views/plugin/workflow/process/external/Leave/detail.vue vendored
Unescape View File

@ -20,9 +20,10 @@
name="first"> name="first">
<el-card shadow="never"> <el-card shadow="never">
<div id="printBody" <div id="printBody"
:class="process.status != 'todo' ? `wf-theme-${theme}`: ''"> :class="process.status != 'todo' ? `wf-theme-custom`: ''">
<avue-form v-if="option && ((option.column && option.column.length > 0) || (option.group && option.group.length > 0))" <avue-form v-if="option && ((option.column && option.column.length > 0) || (option.group && option.group.length > 0))"
v-model="form" v-model="form"
:style="themeCustomStyle"
ref="form" ref="form"
:defaults.sync="defaults" :defaults.sync="defaults"
:option="option" :option="option"

82
src/views/plugin/workflow/styles/theme.scss
Unescape View File

@ -0,0 +1,82 @@
// form - border
.wf-theme-custom {
//google chrome explore
-webkit-print-color-adjust: exact;
//firefox explore
-moz-print-color-adjust: exact;
color-adjust: exact;
.avue--detail {
.avue-form__group,
.avue-form__row {
border: var(--borderWidth) solid var(--borderColor) !important;
}
.el-col:nth-child(1) {
border-top: var(--borderWidth) solid var(--borderColor) !important;
}
.el-col,
.el-row {
border: none;
}
.el-form-item>.el-form-item__content {
border-left: var(--borderWidth) solid var(--borderColor) !important;
}
.el-table__row .el-form-item__content {
border-left: none !important;
}
.avue-form__row {
margin-bottom: 0px !important;
}
.el-form-item {
margin-bottom: 0px !important;
background: var(--labelBg);
}
.el-col>.el-form-item>.el-form-item__label {
// width: var(--labelWidth) !important;
color: var(--labelColor);
font-size: var(--labelFontSize);
text-align: center !important;
}
.el-col>.el-form-item>.el-form-item__content {
// margin-left: var(--labelWidth) !important;
background-color: var(--valueBg, #fff)
}
.el-radio.is-disabled .el-radio__label,
.el-checkbox.is-disabled .el-checkbox__label,
.el-input.is-disabled .el-input__inner,
.el-range-editor.is-disabled,
.el-range-editor.is-disabled input,
.el-textarea.is-disabled .el-textarea__inner {
color: var(--valueColor) !important;
-webkit-text-fill-color: var(--valueColor) !important;
font-size: var(--valueFontSize);
border: var(--borderWidth) solid transparent;
background: #fff;
background-color: #fff;
}
.el-input-number.is-disabled .el-input-number__decrease,
.el-input-number.is-disabled .el-input-number__increase {
display: none;
}
.el-rate {
line-height: 2.5;
}
.avue-dynamic,
.avue-ueditor {
margin-left: -20px;
}
}
}

63
src/views/plugin/workflow/styles/theme/blue.scss
Unescape View File

@ -1,63 +0,0 @@
// form - border
.wf-theme-blue {
//google chrome explore
-webkit-print-color-adjust: exact;
//firefox explore
-moz-print-color-adjust: exact;
color-adjust: exact;
.avue--detail {
.avue-form__group,
.avue-form__row {
border: 1px solid #cbdcf0 !important;
}
.el-col {
border: none;
}
.el-col:nth-child(1) {
border-top: 1px solid #cbdcf0 !important;
}
.el-row {
border: none;
}
.el-form-item>.el-form-item__content {
border-left: 1px solid #cbdcf0 !important;
}
.el-table__row .el-form-item__content {
border-left: none !important;
}
.avue-form__row {
margin-bottom: 0px !important;
}
.el-form-item {
margin-bottom: 0px !important;
background: #eef6ff !important;
}
.el-form-item__label {
color: #01418a !important;
text-align: center !important;
}
.el-input.is-disabled .el-input__inner,
.el-range-editor.is-disabled,
.el-textarea.is-disabled .el-textarea__inner {
border: 1px solid transparent;
background: #fff;
background-color: #fff;
}
.el-input-number.is-disabled .el-input-number__decrease,
.el-input-number.is-disabled .el-input-number__increase {
display: none;
}
}
}

47
src/views/plugin/workflow/styles/theme/border.scss
Unescape View File

@ -1,47 +0,0 @@
// form - border
.wf-theme-border {
//google chrome explore
-webkit-print-color-adjust: exact;
//firefox explore
-moz-print-color-adjust: exact;
color-adjust: exact;
.avue--detail {
.avue-form__group,
.avue-form__row {
border: 1px solid #333 !important;
}
.el-form-item > .el-form-item__content {
border-left: 2px solid #333 !important;
}
.el-table__row .el-form-item__content {
border-left: none !important;
}
.avue-form__row {
margin-bottom: 0px !important;
}
.el-form-item {
margin-bottom: 0px !important;
}
.el-form-item__label {
text-align: center !important;
}
.el-input.is-disabled .el-input__inner,
.el-range-editor.is-disabled,
.el-textarea.is-disabled .el-textarea__inner {
border: 1px solid transparent;
background: #fff;
background-color: #fff;
}
.el-input-number.is-disabled .el-input-number__decrease,
.el-input-number.is-disabled .el-input-number__increase {
display: none;
}
}
}

134
src/views/plugin/workflow/styles/theme/default.scss
Unescape View File

@ -1,134 +0,0 @@
.wf-theme-default {
//google chrome explore
-webkit-print-color-adjust: exact;
//firefox explore
-moz-print-color-adjust: exact;
color-adjust: exact;
.avue--detail {
.el-col {
margin-bottom: 0 !important;
}
.hover-row td {
background-color: #fff !important;
}
.avue-group__header {
padding-left: 10px;
}
.el-collapse-item__header {
margin-bottom: 0;
}
.el-input.is-disabled .el-input__inner,
.el-textarea.is-disabled .el-textarea__inner,
.el-range-editor.is-disabled,
.el-range-editor.is-disabled input {
color: #606266;
background-color: #fff;
padding-left: 0;
cursor: default;
}
.el-input-number__decrease,
.el-input-number__increase {
display: none;
}
.el-input-group__append,
.el-input-group__prepend {
background-color: transparent;
border: none;
}
.el-input__suffix {
display: none;
}
.el-input__inner,
.el-textarea__inner {
border: none;
&::-webkit-input-placeholder {
color: transparent !important;
}
&::-moz-placeholder {
color: transparent !important;
}
&::-moz-placeholder {
color: transparent !important;
}
&::-ms-input-placeholder {
color: transparent !important;
}
&::-ms-input-placeholder {
color: transparent !important;
}
}
.avue-checkbox__all {
display: none;
}
.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
background-color: #409eff;
border-color: #409eff;
}
.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after {
border-color: #fff;
}
.el-radio__input.is-disabled.is-checked .el-radio__inner {
background-color: #409eff;
border-color: #409eff;
}
.el-radio__input.is-disabled.is-checked .el-radio__inner::after {
background-color: #fff;
}
.el-checkbox__input.is-disabled + span.el-checkbox__label,
.el-radio__input.is-disabled + span.el-radio__label {
color: #606266;
}
.el-form-item.is-required:not(.is-no-asterisk)
.el-form-item__label-wrap
> .el-form-item__label:before,
.el-form-item.is-required:not(.is-no-asterisk)
> .el-form-item__label:before {
display: none;
}
.el-row {
border-top: 1px solid #ebeef5;
border-left: 1px solid #ebeef5;
}
.el-col {
padding: 0 !important;
border-bottom: 1px solid #ebeef5;
border-right: 1px solid #ebeef5;
}
.el-form-item {
margin: 0;
background: #fafafa;
}
.el-form-item__label,
.el-form-item__content {
padding: 2px 0;
}
.el-form-item__label {
padding: 0 10px;
color: #909399;
box-sizing: border-box;
}
.el-tag {
margin-left: 0 !important;
margin-right: 6px !important;
}
.el-form-item__content {
border-left: 1px solid #ebeef5;
padding-left: 20px;
box-sizing: border-box;
background-color: #fff;
}
&__column {
.el-form-item {
background-color: #fff;
}
.el-form-item__label {
padding-right: 12px;
}
.el-form-item__content {
padding-left: 0;
border-left: none;
}
}
}
}
Write Preview
Loading…
Cancel
Save