feat: detail mode form theme

src/views/plugin/workflow/assets/styles/theme.scss

@@ -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;
+    }
+  }
+}

src/views/plugin/workflow/assets/styles/theme/blue.scss

@@ -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;
-    }
-  }
-}

src/views/plugin/workflow/assets/styles/theme/border.scss

@@ -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;
-    }
-  }
-}

src/views/plugin/workflow/assets/styles/theme/default.scss

@@ -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;
-      }
-    }
-  }
-}

src/views/plugin/workflow/mixins/ex-form.js

@@ -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

src/views/plugin/workflow/mixins/theme.js

@@ -1,20 +1,14 @@
+import { getList } from '../api/design/form-theme.js'
 export default {
   data() {
     return {
       theme: '',
-      themeList: [{
+      themeList: [],
-        label: '默认',
+      themeCustomStyle: {},
-        value: 'default'
-      }, {
-        label: '边框',
-        value: 'border'
-      }, {
-        label: '蓝色',
-        value: 'blue'
-      }]
     }
   },
   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]
+      }
+    },
+  },
+}

src/views/plugin/workflow/pages/design/form-theme.vue

@@ -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宽度",
+          //   label: "label宽度",
-            prop: "labelWidth",
+          //   prop: "labelWidth",
-            type: "input",
+          //   type: "input",
-            hide: true,
+          //   hide: true,
-            span: 24,
+          //   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 {
+      getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
-      } = this.query;
-
-      let values = {
-      };
-
-      getList(page.currentPage, page.pageSize, values).then(res => {
         const data = res.data.data;
         this.page.total = data.total;
         this.data = data.records;

src/views/plugin/workflow/pages/external/Leave/detail.vue

@@ -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]
         }

src/views/plugin/workflow/pages/process/form/detail.vue

@@ -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
+            <div id="printBody" :class="process.status != 'todo' ? `nf-theme-custom` : ''">
-              id="printBody"
-              :class="process.status != 'todo' ? `nf-theme-${theme}` : ''"
-            >
               <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
+          <el-card shadow="never" style="margin-top: 20px" v-if="process.status == 'todo'">
-            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
+              <nf-design ref="bpmn" style="height: 500px" :options="bpmnOption"></nf-design>
-                ref="bpmn"
-                style="height: 500px"
-                :options="bpmnOption"
-              ></nf-design>
             </el-card>
           </template>
         </el-tab-pane>