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: detail mode form theme

Browse Source
3.x
ssc 3 years ago
parent a74f669ed8
commit 1e33e322ab
9 changed files with 281 additions and 319 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 82
      src/views/plugin/workflow/assets/styles/theme.scss
  2. 63
      src/views/plugin/workflow/assets/styles/theme/blue.scss
  3. 47
      src/views/plugin/workflow/assets/styles/theme/border.scss
  4. 161
      src/views/plugin/workflow/assets/styles/theme/default.scss
  5. 3
      src/views/plugin/workflow/mixins/ex-form.js
  6. 37
      src/views/plugin/workflow/mixins/theme.js
  7. 181
      src/views/plugin/workflow/pages/design/form-theme.vue
  8. 6
      src/views/plugin/workflow/pages/external/Leave/detail.vue
  9. 20
      src/views/plugin/workflow/pages/process/form/detail.vue

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

@ -0,0 +1,82 @@
.nf-theme-custom {
//google chrome explore
-webkit-print-color-adjust: exact;
//firefox explore
-moz-print-color-adjust: exact;
color-adjust: exact;
.nf-form--detail {
.el-row {
border-top: var(--borderWidth) solid var(--borderColor);
border-left: var(--borderWidth) solid var(--borderColor);
}
.el-col {
border-bottom: var(--borderWidth) solid var(--borderColor);
border-right: var(--borderWidth) solid var(--borderColor);
}
.el-form-item__label {
// width: var(--labelWidth);
padding: 0 10px;
color: var(--labelColor);
font-size: var(--labelFontSize, 14px);
border-right: var(--borderWidth) solid var(--borderColor);
background-color: var(--labelBg);
box-sizing: border-box;
}
.el-form-item__content {
box-sizing: border-box;
background-color: #fff;
}
.hover-row td {
background-color: #fff !important;
}
.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: var(--valueColor) !important;
-webkit-text-fill-color: var(--valueColor) !important;
font-size: var(--valueFontSize);
background-color: #fff;
cursor: default;
}
.nf-checkbox__all,
.el-input__suffix,
.el-input-number__decrease,
.el-input-number__increase,
.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-input-group__append,
.el-input-group__prepend {
background-color: transparent;
border: none;
}
.el-input__inner,
.el-textarea__inner {
border: none;
&::-moz-placeholder,
&::-moz-placeholder,
&::-ms-input-placeholder,
&::-webkit-input-placeholder,
&::-ms-input-placeholder {
color: transparent !important;
}
}
.el-tag {
margin-left: 0 !important;
margin-right: 6px !important;
}
}
}

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

@ -1,63 +0,0 @@
// form - border
.nf-theme-blue {
//google chrome explore
-webkit-print-color-adjust: exact;
//firefox explore
-moz-print-color-adjust: exact;
color-adjust: exact;
.nf-form--detail {
.nf-form__group,
.nf-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;
}
.nf-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/assets/styles/theme/border.scss
Unescape View File

@ -1,47 +0,0 @@
// form - border
.nf-theme-border {
//google chrome explore
-webkit-print-color-adjust: exact;
//firefox explore
-moz-print-color-adjust: exact;
color-adjust: exact;
.nf-form--detail {
.nf-form__group,
.nf-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;
}
.nf-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;
}
}
}

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

@ -1,161 +0,0 @@
.nf-theme-default {
//google chrome explore
-webkit-print-color-adjust: exact;
//firefox explore
-moz-print-color-adjust: exact;
color-adjust: exact;
.nf-form--detail {
.el-col {
margin-bottom: 0 !important;
}
.hover-row td {
background-color: #fff !important;
}
.nf-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;
}
}
.nf-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;
}
}
}
}

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

@ -130,7 +130,7 @@ export default {
// event.forEach(e => delete col[e])
}
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) { // 处理正则
col.rules.forEach(c => {
@ -540,6 +540,7 @@ export default {
})
}
this.isPrintShow = true
console.log(this.option)
setTimeout(() => {
loading.close()
// const watermarkText = this.userInfo.user_name + " " + this.userInfo.dept_name

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

@ -1,20 +1,14 @@
import { getList } from '../api/design/form-theme.js'
export default {
data() {
return {
theme: '',
themeList: [{
label: '默认',
value: 'default'
}, {
label: '边框',
value: 'border'
}, {
label: '蓝色',
value: 'blue'
}]
themeList: [],
themeCustomStyle: {},
}
},
created() {
this.initTheme()
const theme = localStorage.getItem("nf-form-theme")
if (theme || theme == '') this.theme = theme || 'default'
else this.theme = 'default'
@ -23,11 +17,30 @@ export default {
theme: {
handler(val) {
if (val) {
import(`../assets/styles/theme/${val}.scss`)
import(`../assets/styles/theme.scss`)
localStorage.setItem('nf-form-theme', val)
this.setThemeStyle()
}
},
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]
}
},
},
}

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

@ -26,20 +26,33 @@
type="danger"
icon="el-icon-delete"
plain
v-if="permission.wfFormTheme_delete"
v-if="permission.wf_form_theme_delete"
@click="handleDelete"
>删 除
</el-button>
</template>
<template #menu="{ row }">
<el-button type="primary" text icon="el-icon-view" @click="handlePreview(row)"
>预览
</el-button>
</template>
</avue-crud>
<el-drawer title="预览" v-model="previewVisible" append-to-body destroy-on-close size="50%">
<div class="nf-theme-custom">
<nf-form v-model="previewForm" :option="previewOption" :style="themeCustomStyle"></nf-form>
</div>
</el-drawer>
</basic-container>
</template>
<script>
import { getList, getDetail, add, update, remove } from "../../api/design/form-theme";
import { mapGetters } from "vuex";
import theme from '../../mixins/theme'
export default {
mixins: [theme],
data() {
return {
form: {},
@ -59,11 +72,13 @@ export default {
searchMenuSpan: 6,
border: true,
index: true,
viewBtn: true,
viewBtn: false,
selection: true,
dialogClickModal: false,
dialogType: 'drawer',
dialogWidth: '50%',
labelWidth: 140,
menuWidth: 240,
column: [
{
label: "名称",
@ -115,13 +130,13 @@ export default {
hide: true,
span: 24,
},
{
label: "label宽度",
prop: "labelWidth",
type: "input",
hide: true,
span: 24,
},
// {
// label: "label宽度",
// prop: "labelWidth",
// type: "input",
// hide: true,
// span: 24,
// },
{
label: "label字体大小",
prop: "labelFontSize",
@ -152,7 +167,132 @@ export default {
},
]
},
data: []
data: [],
previewVisible: false,
previewForm: {},
previewOption: {
detail: true,
// span: 24,
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
},
{
type: '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: {
@ -174,6 +314,11 @@ export default {
}
},
methods: {
handlePreview(row) {
this.theme = row.themeKey
this.setThemeStyle()
this.previewVisible = true
},
rowSave(row, done, loading) {
add(row).then(() => {
this.onLoad(this.page);
@ -181,6 +326,7 @@ export default {
type: "success",
message: "操作成功!"
});
this.initTheme()
done();
}, error => {
loading();
@ -194,6 +340,7 @@ export default {
type: "success",
message: "操作成功!"
});
this.initTheme()
done();
}, error => {
loading();
@ -211,6 +358,7 @@ export default {
})
.then(() => {
this.onLoad(this.page);
this.initTheme()
this.$message({
type: "success",
message: "操作成功!"
@ -232,6 +380,7 @@ export default {
})
.then(() => {
this.onLoad(this.page);
this.initTheme()
this.$message({
type: "success",
message: "操作成功!"
@ -241,9 +390,9 @@ export default {
},
beforeOpen(done, type) {
if (["edit", "view"].includes(type)) {
getDetail(this.form.id).then(res => {
getDetail({ id: this.form.id }).then(res => {
this.form = res.data.data;
});
})
}
done();
},
@ -276,13 +425,7 @@ export default {
onLoad(page, params = {}) {
this.loading = true;
const {
} = this.query;
let values = {
};
getList(page.currentPage, page.pageSize, values).then(res => {
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;

6
src/views/plugin/workflow/pages/external/Leave/detail.vue vendored
Unescape View File

@ -10,6 +10,7 @@
size="default"
:clearable="false"
:options="themeList"
@change="setThemeStyle"
></el-select-v2>
</div>
</div>
@ -17,7 +18,7 @@
<el-tabs v-model="activeName">
<el-tab-pane label="申请信息" name="first">
<el-card shadow="never">
<div id="printBody" :class="process.status != 'todo' ? `nf-theme-${theme}` : ''">
<div id="printBody" :class="process.status != 'todo' ? `nf-theme-custom` : ''">
<nf-form
v-if="
option &&
@ -25,6 +26,7 @@
(option.group && option.group.length > 0))
"
v-model="form"
:style="themeCustomStyle"
ref="form"
v-model:defaults="defaults"
:option="option"
@ -277,7 +279,7 @@ export default {
}
option.column = column
option.group = group
for (let key in variables) {
if (!variables[key]) delete variables[key]
}

20
src/views/plugin/workflow/pages/process/form/detail.vue
Unescape View File

@ -10,6 +10,7 @@
size="default"
:clearable="false"
:options="themeList"
@change="setThemeStyle"
></el-select-v2>
</div>
</div>
@ -17,10 +18,7 @@
<el-tabs v-model="activeName">
<el-tab-pane label="申请信息" name="first">
<el-card shadow="never">
<div
id="printBody"
:class="process.status != 'todo' ? `nf-theme-${theme}` : ''"
>
<div id="printBody" :class="process.status != 'todo' ? `nf-theme-custom` : ''">
<nf-form
v-if="
summaryOption &&
@ -28,6 +26,7 @@
(summaryOption.group && summaryOption.group.length > 0))
"
v-model="form"
:style="themeCustomStyle"
ref="summaryForm"
:option="summaryOption"
:upload-preview="handleUploadPreview"
@ -40,6 +39,7 @@
(option.group && option.group.length > 0))
"
v-model="form"
:style="themeCustomStyle"
ref="form"
v-model:defaults="defaults"
:option="option"
@ -57,11 +57,7 @@
</el-card>
</div>
</el-card>
<el-card
shadow="never"
style="margin-top: 20px"
v-if="process.status == 'todo'"
>
<el-card shadow="never" style="margin-top: 20px" v-if="process.status == 'todo'">
<nf-examine-form
ref="examineForm"
v-model:comment="comment"
@ -78,11 +74,7 @@
<el-tab-pane label="流程跟踪" name="third">
<template v-if="activeName == 'third'">
<el-card shadow="never" style="margin-top: 5px">
<nf-design
ref="bpmn"
style="height: 500px"
:options="bpmnOption"
></nf-design>
<nf-design ref="bpmn" style="height: 500px" :options="bpmnOption"></nf-design>
</el-card>
</template>
</el-tab-pane>

Write Preview
Loading…
Cancel
Save