n20-common-lib 1.3.46 → 1.3.49

package/nstc-g6/components/FormGroup/src/main.vue

@@ -1,639 +1,639 @@
-<template>
-  <div class="form-group-custom">
-    <div class="form-group-custom-body">
-      <div class="form-group-custom-body-ap" v-if="anchorPoint">
-        <el-tabs v-model="activeName" :tab-position="tabPosition" @tab-click="tabClickAction">
-          <el-tab-pane
-              v-for="(item,index) in anchorPointArr.filter(item => item.title)"
-              :key="index"
-              :label="item.name || item.title"
-          />
-        </el-tabs>
-      </div>
-      <div :class="{ 'form-group-custom-body-form': true, 'form-group-custom-body-form-anchor-point': anchorPoint}">
-        <slot name="before" />
-
-        <div
-            v-for="(form,index) in innerConfig"
-            :key="index"
-            :class="['form-group-item', { 'is-upload': getIsUpload(form) }]"
-        >
-          <template v-if="form.renderable !== false">
-            <a :id="`nstc-form-group-${form.anchorPoint}`" />
-            <ExpandCollapse
-                v-if="form.title"
-                :is-can-collapse="isCanCollapse"
-            >
-              <NstcForm
-                  :ref="`formCustom${index}`"
-                  v-model="model[index]"
-                  :reset.sync="form.formReset"
-                  :config="form.formConfig"
-                  :mount-and-query="false"
-                  :rules="rules"
-                  :disabled="disabled"
-                  pureable
-                  :label-width="labelWidth"
-                  :show-mode="showMode"
-              />
-              <template v-slot:title>
-                <template v-if="typeof form.title === 'object'">
-                  <component :is="compile(form.title.component, form, model[index])" v-if="'template' in form.title.component" />
-                  <component :is="form.title.component" v-else />
-                </template>
-
-                <span v-else>{{ form.title }}</span>
-              </template>
-            </ExpandCollapse>
-            <NstcForm
-                v-else
-                :ref="`formCustom${index}`"
-                v-model="model[index]"
-                :reset.sync="form.formReset"
-                :config="form.formConfig"
-                :mount-and-query="false"
-                :rules="rules"
-                :disabled="disabled"
-                pureable
-                :label-width="labelWidth"
-                :show-mode="showMode"
-            />
-          </template>
-        </div>
-
-        <slot name="after" />
-      </div>
-    </div>
-
-    <div
-        v-if="customSubmit"
-        :class="[
-        isFix ? 'form-group-footer form-group-footer-form' : 'form-group-footer' ]"
-    >
-      <slot name="submit" />
-    </div>
-
-    <div
-        v-if="!customSubmit &&showFooter"
-        :class="[
-        isFix ? 'form-group-footer form-group-footer-form' : 'form-group-footer' ]"
-    >
-      <el-button
-          v-if="handlers.submit"
-          type="primary"
-          :loading="loading.submit"
-          :class="handlers.submit.className || ''"
-          @click="handleQuery('submit')"
-      >
-        {{ handlers.submit.label }}
-      </el-button>
-      <el-button
-          v-if="handlers.save"
-          :loading="loading.save"
-          :class="handlers.save.className || ''"
-          @click="handleQuery('save')"
-      >
-        {{ handlers.save.label }}
-      </el-button>
-      <el-button
-          v-if="handlers.reset"
-          class="assist-button"
-          @click="handleReset"
-          :class="handlers.reset.className || ''"
-      >
-        {{ handlers.reset.label }}
-      </el-button>
-      <el-button
-          v-if="handlers.cancel"
-          @click="handleCancel('cancel')"
-      >
-        {{ handlers.cancel.label }}
-      </el-button>
-    </div>
-  </div>
-</template>
-
-<script>
-import Vue from 'vue'
-import NstcForm from '../../NstcForm/Component'
-import ExpandCollapse from '^/ExpandCollapse/src/main'
-
-// 引入特殊检验
-import { validInputWithUnit } from './validate'
-
-export default {
-  name: 'NstcFormGroup',
-
-  components: {
-    NstcForm,
-    ExpandCollapse
-  },
-
-  props: {
-    config: {
-      type: Array,
-      default: () => []
-    },
-
-    handlers: {
-      type: Object,
-      default: function () {
-        return {
-          submit: {
-            label: '提交',
-            isShow: true,
-            className: 'nstc-g6-common-btn-1'
-          },
-          save: {
-            label: '保存',
-            isShow: true,
-            className: 'nstc-g6-common-btn-1'
-          },
-          reset: {
-            label: '重置',
-            isShow: true,
-            className: 'nstc-g6-common-btn-4 nstc-g6-common-btn-size-b'
-          }
-          // cancel: { // 针对弹窗嵌套的表单
-          //   label: '取消'
-          // }
-        }
-      }
-    },
-
-    labelWidth: {
-      default: '80px',
-      type: [String, Number]
-    },
-    // activeName 高亮值
-    activeName: {
-      type: String,
-      default: '0'
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-
-    showFooter: {
-      type: Boolean,
-      default: true
-    },
-
-    // 是否可以折叠
-    isCanCollapse: {
-      type: Boolean,
-      default: true
-    },
-
-    // 是否 fix 提交框
-    isFix: {
-      type: Boolean,
-      default: false
-    },
-
-    // 是否显示锚点
-    anchorPoint: {
-      type: Boolean,
-      default: false
-    },
-
-    addAnchorPoint: {
-      type: Array,
-      default: () => {
-        return []
-      }
-    },
-
-    // 自定义提交
-    customSubmit: {
-      type: Boolean,
-      default: false
-    },
-
-    // 显示模式
-    showMode: {
-      type: String,
-      default: ''
-    },
-
-    // 重置
-    reset:{
-      type: Boolean,
-      default: false
-    }
-  },
-
-  data() {
-    return {
-      model: [],
-      innerConfig: [],
-
-      loading: {
-        submit: false,
-        save: false
-      },
-
-      rules: undefined,
-
-      // 特殊组件校验规则
-      // validateObj: {
-      //   inputwithunit: validInputWithUnit
-      // },
-    validateObj: {
-        inputwithunit: validInputWithUnit
-      },
-      // 表单配置更新
-      renderFormConfig: false,
-
-      tabPosition: 'left',
-      anchorPointArr: []
-    }
-  },
-
-  computed: {
-    getIsUpload() {
-      return form => {
-        return form.formConfig && form.formConfig[0] &&
-            (form.formConfig[0].mold === 'nstcupload' || form.formConfig[0].length && form.formConfig[0][0].mold === 'nstcupload')
-      }
-    },
-  },
-
-  watch: {
-    model: {
-      deep: true,
-      handler(val) {
-        this.$emit('change', val)
-      }
-    },
-
-    config: {
-      immediate: true,
-      deep: true,
-      handler(val,oldValue) {
-        this.$bus.$emit('nstc_custom_form_config_update', val)
-        if (val !== oldValue) {
-          this.init(val)
-        }
-      }
-    }
-  },
-
-  mounted() {
-    this.formInit()
-    this.getRules()
-  },
-
-  methods: {
-    async handleQuery(action) {
-      try {
-        // console.log('00')
-        this.loading[action] = true
-        // 动态更新 formCustom 的 config 文件时 form[0]可能为空
-        this.rules && await Promise.all(Object.values(this.$refs).map(form => form[0] && form[0].validate()))
-        // console.log('11')
-
-        if (this.$listeners.query) {
-        // console.log('22')
-          // this.$listeners.query需返回promise
-          await this.$listeners.query(JSON.parse(JSON.stringify(this.model)), action)
-        // console.log('33')
-        }
-        // console.log('444',err,JSON.parse(JSON.stringify(this.model)),action,form)
-      } catch (err) {
-        console.log(err)
-        this.$message({
-          type: 'warning',
-          message: '请确认表单信息'
-        })
-        // this.$confirm('', '请确认表单信息', {
-        //   type: 'warning' // success info warning error
-        //   // showCancelButton: false,
-        //   // showConfirmButton: false,
-        //   // center: true
-        // })
-      } finally {
-        this.loading[action] = false
-      }
-    },
-
-    /**
-     *  取消 - 针对弹窗嵌套的表单
-     */
-    handleCancel() {
-      this.$bus.$emit('dialog-cancel', false)
-    },
-
-    async triggerQuery(action) {
-      try {
-        this.loading[action] = true
-        this.rules && await Promise.all(Object.values(this.$refs).map(form => form[0].validate()))
-        // if (this.$listeners.query) {
-        //   // this.$listeners.query需返回promise
-        //   await this.$listeners.query(JSON.parse(JSON.stringify(this.model)), action)
-        // }
-        return true
-      } catch (err) {
-        this.$message({
-          type: 'warning',
-          message: '请确认表单信息'
-        })
-        // this.$confirm('', '请确认表单信息', {
-        //   type: 'warning' // success info warning error
-        //   // showCancelButton: false,
-        //   // showConfirmButton: false,
-        //   // center: true
-        // })
-        this.loading[action] = false
-        return false
-      } finally {
-        this.loading[action] = false
-      }
-    },
-
-    async handleReset() {
-      this.innerConfig.forEach(item => { item.formReset = true })
-      await this.$nextTick()
-      Object.values(this.$refs).forEach(form => form[0] && form[0].clearValidate())
-
-      if (this.$listeners.reset) {
-        await this.$listeners.reset(JSON.parse(JSON.stringify(this.model)))
-      }
-    },
-
-    setModel(index, model) {
-      Object.keys(model).map(k => {
-        this.$set(this.model[index], k, model[k])
-      })
-    },
-
-    init(config) {
-      this.innerConfig = []
-      if (this.model.length !== config.length) {
-        this.model = config.map(() => ({}))
-      }
-      this.getRules()
-      this.$nextTick(() => {
-        this.innerConfig = config.map(item => ({
-          ...item,
-          formReset: false,
-          anchorPoint: `ap-${Math.random()
-              .toString(36)
-              .slice(2)}`
-        }))
-        this.anchorPointArr = this.innerConfig.map(item => ({
-          title: item.name || item.title,
-          anchorPoint: item[`anchorPoint`]
-        }))
-        // anchorPointArr 表示右侧描点数组
-        this.anchorPointArr = this.anchorPointArr.concat(this.addAnchorPoint)
-        this.$bus.$emit('nstc_custom_form_anchorPointArr', this.anchorPointArr)
-      })
-    },
-
-    compile(component, form, model) {
-      const template = Vue.compile(component.template)
-      const data = {
-        data() {
-          return Object.assign({}, component.data, { form, model })
-        }
-      }
-
-      return Object.assign({}, template, component, data)
-    },
-
-    /**
-     *  动态设置表单高度
-     */
-    formInit() {
-      if (this.showFooter && this.isFix) {
-        // 如果有提交按钮
-        let dom = document.querySelector('.form-group-custom')
-        dom.style.cssText = 'min-height:' + (document.body.clientHeight - 212) + 'px'
-      }
-    },
-
-    /**
-     * 获取表单验证规则
-     */
-    getRules() {
-        const that = this
-        const tempConfig = JSON.parse(JSON.stringify(this.config))
-        this.rules = {}
-        this.rules = tempConfig
-            .reduce((prev, next) => ([
-              ...prev,
-              ...next.formConfig
-            ]), [])
-            .reduce((prev, next) => ([
-              ...prev,
-              ...Array.isArray(next) ? next : [next]
-            ]), [])
-            .reduce((prev, next) => {
-              if (next.link) {
-                const links = next.link.filter(item => !!item.mold)
-
-                return [
-                  ...prev,
-                  next,
-                  ...links
-                ]
-              }
-
-              return [
-                ...prev,
-                next
-              ]
-            }, [])
-            .filter(item => item.isRequired)
-            .reduce((res, curr) => {
-              const isInput = (curr.mold === 'input') || (curr.prop === 'dueDate' || curr.prop ==='lastShipmentDate')
-
-              // 自定义校验
-              const hasSpecificValid = that.validateObj[curr.mold]
-              return {
-                ...res,
-                [curr.prop]: {
-                  required: true,
-                  [`${hasSpecificValid ? 'nstc-': ''}message`]: `请${isInput ? '输入' : '选择'}${curr.name}`,
-                  trigger: isInput ? 'blur' : 'change',
-                  ...(hasSpecificValid ? { validator: hasSpecificValid } : {})
-                  // whitespace: isInput || undefined,
-                  // ...isInput
-                  //   ? {
-                  //     transform(val) {
-                  //       return typeof val === 'string' ? val.trim() : val
-                  //     }
-                  //   }
-                  //   : {}
-                }
-              }
-            }, {})
-    },
-
-    /**
-     * 锚点切换
-     */
-    tabClickAction(vmEl) {
-      this.activeName = vmEl.index
-      const anchorPoint = this.anchorPointArr[vmEl.index].anchorPoint
-      const el = document.querySelector(`#nstc-form-group-${anchorPoint}`)
-      el && el.scrollIntoView(true)
-      if (!el) {
-        let wEl = document.getElementById(`#nstc-form-group-${anchorPoint}`)
-        wEl && wEl.scrollIntoView(true)
-      }
-      // eslint-disable-next-line no-debugger
-      // debugger
-    }
-  }
-}
-</script>
-
-<style lang="scss">
-// .form-group-custom-wrap {
-//   height: ;
-// }
-.form-group-custom {
-  background-color: #fff;
-  border-radius: 10px;
-  padding-bottom: 30px;
-  height: 100%;
-  &-body{
-    display: flex;
-    flex-direction: row;
-    height: 100%;
-    &-ap{
-      width: 152px;
-      margin-right: 20px;
-      .el-tabs__header{
-        width: 100%;
-      }
-    }
-    &-form{
-      flex: 1;
-      overflow-y: auto;
-    }
-    &-form-anchor-point {
-      .form-group-item:nth-child(1) {
-        margin-top: 0;
-        padding-top: 0!important;
-      }
-    }
-  }
-  .expand-collapse-header,
-  .expand-collapse-header-collapse {
-    display: flex;
-    > span {
-      font-weight: bold;
-      font-size: 14px;
-    }
-    > i {
-      color: #F5F5F5;
-      // margin-left: 19px;
-    }
-    &::after{
-      content: '';
-      flex: 1;
-    }
-  }
-  .expand-collapse .form-base-wrapper {
-    display: block;
-  }
-  .expand-collapse .form-base-wrapper .form-group,
-  .form-base-wrapper {
-    width: 100%;
-    .form-item {
-      width: 400px;
-    }
-    .form-item:nth-child(1) {
-      margin-left: calc((50% - 400px)* 0.64);
-    }
-    .form-item:nth-child(2) {
-      margin-left: calc((50% - 400px)* 0.745);
-    }
-  }
-  .form-custom {
-    display: flex;
-    justify-content: center;
-  }
-  .form-base-wrapper {
-    //min-width: 1300px;
-  }
-  .form-group {
-    &-item {
-      & + .form-group-item {
-        // border-top: 1px solid rgba(228, 228, 228, .91);
-      }
-      &:first-child {
-        padding-top: 20px;
-      }
-      &.is-upload {
-        .form-base-wrapper {
-          width: 100%;
-          .nstc-upload-box {
-            width: 100%;
-          }
-        }
-      }
-    }
-    &-footer {
-      margin-top: 70px;
-      text-align: center;
-    }
-  }
-
-  .form-group-footer-form {
-    position: fixed;
-    bottom: 0;
-    border-radius: 0px 0px 5px 5px;
-    width: 100%;
-    height: 61px;
-    transition: width 0.3s;
-    background-color: #fff;
-    box-shadow: 0px -2px 6px 0px rgba(92,100,113,0.11);
-    .sider-close {
-      background-color: #fff;
-      width: calc(100% - 103px) !important;
-    }
-    z-index: 999;
-  }
-  .form-group-footer {
-    .el-button {
-      margin: 14px 20px 0px 0px;
-      width: 90px;
-      height: 34px;
-      padding: 8px 12px;
-      font-size: 14px;
-      border-radius: 5px;
-    }
-  }
-  .form-item-text {
-    margin-left: 20px;
-    .el-form-item__label {
-      text-align: left;
-      font-size: 14px;
-    }
-    .el-form-item {
-      margin-bottom: 3px;
-    }
-  }
-
-  .el-button--primary {
-    background-color: #007aff;
-    border: 1px solid #007aff;
-  }
-  .el-button--default {
-    border: 1px solid #007aff;
-    color: #007aff;
-  }
-  .assist-button {
-    background: #fff;
-    border: 1px solid #dcdfe6;
-    color: #606266;
-  }
-
-}
-
-</style>
+<template>
+  <div class="form-group-custom">
+    <div class="form-group-custom-body">
+      <div class="form-group-custom-body-ap" v-if="anchorPoint">
+        <el-tabs v-model="activeName" :tab-position="tabPosition" @tab-click="tabClickAction">
+          <el-tab-pane
+              v-for="(item,index) in anchorPointArr.filter(item => item.title)"
+              :key="index"
+              :label="item.name || item.title"
+          />
+        </el-tabs>
+      </div>
+      <div :class="{ 'form-group-custom-body-form': true, 'form-group-custom-body-form-anchor-point': anchorPoint}">
+        <slot name="before" />
+
+        <div
+            v-for="(form,index) in innerConfig"
+            :key="index"
+            :class="['form-group-item', { 'is-upload': getIsUpload(form) }]"
+        >
+          <template v-if="form.renderable !== false">
+            <a :id="`nstc-form-group-${form.anchorPoint}`" />
+            <ExpandCollapse
+                v-if="form.title"
+                :is-can-collapse="isCanCollapse"
+            >
+              <NstcForm
+                  :ref="`formCustom${index}`"
+                  v-model="model[index]"
+                  :reset.sync="form.formReset"
+                  :config="form.formConfig"
+                  :mount-and-query="false"
+                  :rules="rules"
+                  :disabled="disabled"
+                  pureable
+                  :label-width="labelWidth"
+                  :show-mode="showMode"
+              />
+              <template v-slot:title>
+                <template v-if="typeof form.title === 'object'">
+                  <component :is="compile(form.title.component, form, model[index])" v-if="'template' in form.title.component" />
+                  <component :is="form.title.component" v-else />
+                </template>
+
+                <span v-else>{{ form.title }}</span>
+              </template>
+            </ExpandCollapse>
+            <NstcForm
+                v-else
+                :ref="`formCustom${index}`"
+                v-model="model[index]"
+                :reset.sync="form.formReset"
+                :config="form.formConfig"
+                :mount-and-query="false"
+                :rules="rules"
+                :disabled="disabled"
+                pureable
+                :label-width="labelWidth"
+                :show-mode="showMode"
+            />
+          </template>
+        </div>
+
+        <slot name="after" />
+      </div>
+    </div>
+
+    <div
+        v-if="customSubmit"
+        :class="[
+        isFix ? 'form-group-footer form-group-footer-form' : 'form-group-footer' ]"
+    >
+      <slot name="submit" />
+    </div>
+
+    <div
+        v-if="!customSubmit &&showFooter"
+        :class="[
+        isFix ? 'form-group-footer form-group-footer-form' : 'form-group-footer' ]"
+    >
+      <el-button
+          v-if="handlers.submit"
+          type="primary"
+          :loading="loading.submit"
+          :class="handlers.submit.className || ''"
+          @click="handleQuery('submit')"
+      >
+        {{ handlers.submit.label }}
+      </el-button>
+      <el-button
+          v-if="handlers.save"
+          :loading="loading.save"
+          :class="handlers.save.className || ''"
+          @click="handleQuery('save')"
+      >
+        {{ handlers.save.label }}
+      </el-button>
+      <el-button
+          v-if="handlers.reset"
+          class="assist-button"
+          @click="handleReset"
+          :class="handlers.reset.className || ''"
+      >
+        {{ handlers.reset.label }}
+      </el-button>
+      <el-button
+          v-if="handlers.cancel"
+          @click="handleCancel('cancel')"
+      >
+        {{ handlers.cancel.label }}
+      </el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import Vue from 'vue'
+import NstcForm from '../../NstcForm/Component'
+import ExpandCollapse from '^/ExpandCollapse/src/main'
+
+// 引入特殊检验
+import { validInputWithUnit } from './validate'
+
+export default {
+  name: 'NstcFormGroup',
+
+  components: {
+    NstcForm,
+    ExpandCollapse
+  },
+
+  props: {
+    config: {
+      type: Array,
+      default: () => []
+    },
+
+    handlers: {
+      type: Object,
+      default: function () {
+        return {
+          submit: {
+            label: '提交',
+            isShow: true,
+            className: 'nstc-g6-common-btn-1'
+          },
+          save: {
+            label: '保存',
+            isShow: true,
+            className: 'nstc-g6-common-btn-1'
+          },
+          reset: {
+            label: '重置',
+            isShow: true,
+            className: 'nstc-g6-common-btn-4 nstc-g6-common-btn-size-b'
+          }
+          // cancel: { // 针对弹窗嵌套的表单
+          //   label: '取消'
+          // }
+        }
+      }
+    },
+
+    labelWidth: {
+      default: '80px',
+      type: [String, Number]
+    },
+    // activeName 高亮值
+    activeName: {
+      type: String,
+      default: '0'
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+
+    showFooter: {
+      type: Boolean,
+      default: true
+    },
+
+    // 是否可以折叠
+    isCanCollapse: {
+      type: Boolean,
+      default: true
+    },
+
+    // 是否 fix 提交框
+    isFix: {
+      type: Boolean,
+      default: false
+    },
+
+    // 是否显示锚点
+    anchorPoint: {
+      type: Boolean,
+      default: false
+    },
+
+    addAnchorPoint: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+
+    // 自定义提交
+    customSubmit: {
+      type: Boolean,
+      default: false
+    },
+
+    // 显示模式
+    showMode: {
+      type: String,
+      default: ''
+    },
+
+    // 重置
+    reset:{
+      type: Boolean,
+      default: false
+    }
+  },
+
+  data() {
+    return {
+      model: [],
+      innerConfig: [],
+
+      loading: {
+        submit: false,
+        save: false
+      },
+
+      rules: undefined,
+
+      // 特殊组件校验规则
+      // validateObj: {
+      //   inputwithunit: validInputWithUnit
+      // },
+    validateObj: {
+        inputwithunit: validInputWithUnit
+      },
+      // 表单配置更新
+      renderFormConfig: false,
+
+      tabPosition: 'left',
+      anchorPointArr: []
+    }
+  },
+
+  computed: {
+    getIsUpload() {
+      return form => {
+        return form.formConfig && form.formConfig[0] &&
+            (form.formConfig[0].mold === 'nstcupload' || form.formConfig[0].length && form.formConfig[0][0].mold === 'nstcupload')
+      }
+    },
+  },
+
+  watch: {
+    model: {
+      deep: true,
+      handler(val) {
+        this.$emit('change', val)
+      }
+    },
+
+    config: {
+      immediate: true,
+      deep: true,
+      handler(val,oldValue) {
+        this.$bus.$emit('nstc_custom_form_config_update', val)
+        if (val !== oldValue) {
+          this.init(val)
+        }
+      }
+    }
+  },
+
+  mounted() {
+    this.formInit()
+    this.getRules()
+  },
+
+  methods: {
+    async handleQuery(action) {
+      try {
+        // console.log('00')
+        this.loading[action] = true
+        // 动态更新 formCustom 的 config 文件时 form[0]可能为空
+        this.rules && await Promise.all(Object.values(this.$refs).map(form => form[0] && form[0].validate()))
+        // console.log('11')
+
+        if (this.$listeners.query) {
+        // console.log('22')
+          // this.$listeners.query需返回promise
+          await this.$listeners.query(JSON.parse(JSON.stringify(this.model)), action)
+        // console.log('33')
+        }
+        // console.log('444',err,JSON.parse(JSON.stringify(this.model)),action,form)
+      } catch (err) {
+        console.log(err)
+        this.$message({
+          type: 'warning',
+          message: '请确认表单信息'
+        })
+        // this.$confirm('', '请确认表单信息', {
+        //   type: 'warning' // success info warning error
+        //   // showCancelButton: false,
+        //   // showConfirmButton: false,
+        //   // center: true
+        // })
+      } finally {
+        this.loading[action] = false
+      }
+    },
+
+    /**
+     *  取消 - 针对弹窗嵌套的表单
+     */
+    handleCancel() {
+      this.$bus.$emit('dialog-cancel', false)
+    },
+
+    async triggerQuery(action) {
+      try {
+        this.loading[action] = true
+        this.rules && await Promise.all(Object.values(this.$refs).map(form => form[0].validate()))
+        // if (this.$listeners.query) {
+        //   // this.$listeners.query需返回promise
+        //   await this.$listeners.query(JSON.parse(JSON.stringify(this.model)), action)
+        // }
+        return true
+      } catch (err) {
+        this.$message({
+          type: 'warning',
+          message: '请确认表单信息'
+        })
+        // this.$confirm('', '请确认表单信息', {
+        //   type: 'warning' // success info warning error
+        //   // showCancelButton: false,
+        //   // showConfirmButton: false,
+        //   // center: true
+        // })
+        this.loading[action] = false
+        return false
+      } finally {
+        this.loading[action] = false
+      }
+    },
+
+    async handleReset() {
+      this.innerConfig.forEach(item => { item.formReset = true })
+      await this.$nextTick()
+      Object.values(this.$refs).forEach(form => form[0] && form[0].clearValidate())
+
+      if (this.$listeners.reset) {
+        await this.$listeners.reset(JSON.parse(JSON.stringify(this.model)))
+      }
+    },
+
+    setModel(index, model) {
+      Object.keys(model).map(k => {
+        this.$set(this.model[index], k, model[k])
+      })
+    },
+
+    init(config) {
+      this.innerConfig = []
+      if (this.model.length !== config.length) {
+        this.model = config.map(() => ({}))
+      }
+      this.getRules()
+      this.$nextTick(() => {
+        this.innerConfig = config.map(item => ({
+          ...item,
+          formReset: false,
+          anchorPoint: `ap-${Math.random()
+              .toString(36)
+              .slice(2)}`
+        }))
+        this.anchorPointArr = this.innerConfig.map(item => ({
+          title: item.name || item.title,
+          anchorPoint: item[`anchorPoint`]
+        }))
+        // anchorPointArr 表示右侧描点数组
+        this.anchorPointArr = this.anchorPointArr.concat(this.addAnchorPoint)
+        this.$bus.$emit('nstc_custom_form_anchorPointArr', this.anchorPointArr)
+      })
+    },
+
+    compile(component, form, model) {
+      const template = Vue.compile(component.template)
+      const data = {
+        data() {
+          return Object.assign({}, component.data, { form, model })
+        }
+      }
+
+      return Object.assign({}, template, component, data)
+    },
+
+    /**
+     *  动态设置表单高度
+     */
+    formInit() {
+      if (this.showFooter && this.isFix) {
+        // 如果有提交按钮
+        let dom = document.querySelector('.form-group-custom')
+        dom.style.cssText = 'min-height:' + (document.body.clientHeight - 212) + 'px'
+      }
+    },
+
+    /**
+     * 获取表单验证规则
+     */
+    getRules() {
+        const that = this
+        const tempConfig = JSON.parse(JSON.stringify(this.config))
+        this.rules = {}
+        this.rules = tempConfig
+            .reduce((prev, next) => ([
+              ...prev,
+              ...next.formConfig
+            ]), [])
+            .reduce((prev, next) => ([
+              ...prev,
+              ...Array.isArray(next) ? next : [next]
+            ]), [])
+            .reduce((prev, next) => {
+              if (next.link) {
+                const links = next.link.filter(item => !!item.mold)
+
+                return [
+                  ...prev,
+                  next,
+                  ...links
+                ]
+              }
+
+              return [
+                ...prev,
+                next
+              ]
+            }, [])
+            .filter(item => item.isRequired)
+            .reduce((res, curr) => {
+              const isInput = (curr.mold === 'input') || (curr.prop === 'dueDate' || curr.prop ==='lastShipmentDate')
+
+              // 自定义校验
+              const hasSpecificValid = that.validateObj[curr.mold]
+              return {
+                ...res,
+                [curr.prop]: {
+                  required: true,
+                  [`${hasSpecificValid ? 'nstc-': ''}message`]: `请${isInput ? '输入' : '选择'}${curr.name}`,
+                  trigger: isInput ? 'blur' : 'change',
+                  ...(hasSpecificValid ? { validator: hasSpecificValid } : {})
+                  // whitespace: isInput || undefined,
+                  // ...isInput
+                  //   ? {
+                  //     transform(val) {
+                  //       return typeof val === 'string' ? val.trim() : val
+                  //     }
+                  //   }
+                  //   : {}
+                }
+              }
+            }, {})
+    },
+
+    /**
+     * 锚点切换
+     */
+    tabClickAction(vmEl) {
+      this.activeName = vmEl.index
+      const anchorPoint = this.anchorPointArr[vmEl.index].anchorPoint
+      const el = document.querySelector(`#nstc-form-group-${anchorPoint}`)
+      el && el.scrollIntoView(true)
+      if (!el) {
+        let wEl = document.getElementById(`#nstc-form-group-${anchorPoint}`)
+        wEl && wEl.scrollIntoView(true)
+      }
+      // eslint-disable-next-line no-debugger
+      // debugger
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+// .form-group-custom-wrap {
+//   height: ;
+// }
+.form-group-custom {
+  background-color: #fff;
+  border-radius: 10px;
+  padding-bottom: 30px;
+  height: 100%;
+  &-body{
+    display: flex;
+    flex-direction: row;
+    height: 100%;
+    &-ap{
+      width: 152px;
+      margin-right: 20px;
+      .el-tabs__header{
+        width: 100%;
+      }
+    }
+    &-form{
+      flex: 1;
+      overflow-y: auto;
+    }
+    &-form-anchor-point {
+      .form-group-item:nth-child(1) {
+        margin-top: 0;
+        padding-top: 0!important;
+      }
+    }
+  }
+  .expand-collapse-header,
+  .expand-collapse-header-collapse {
+    display: flex;
+    > span {
+      font-weight: bold;
+      font-size: 14px;
+    }
+    > i {
+      color: #F5F5F5;
+      // margin-left: 19px;
+    }
+    &::after{
+      content: '';
+      flex: 1;
+    }
+  }
+  .expand-collapse .form-base-wrapper {
+    display: block;
+  }
+  .expand-collapse .form-base-wrapper .form-group,
+  .form-base-wrapper {
+    width: 100%;
+    .form-item {
+      width: 400px;
+    }
+    .form-item:nth-child(1) {
+      margin-left: calc((50% - 400px)* 0.64);
+    }
+    .form-item:nth-child(2) {
+      margin-left: calc((50% - 400px)* 0.745);
+    }
+  }
+  .form-custom {
+    display: flex;
+    justify-content: center;
+  }
+  .form-base-wrapper {
+    //min-width: 1300px;
+  }
+  .form-group {
+    &-item {
+      & + .form-group-item {
+        // border-top: 1px solid rgba(228, 228, 228, .91);
+      }
+      &:first-child {
+        padding-top: 20px;
+      }
+      &.is-upload {
+        .form-base-wrapper {
+          width: 100%;
+          .nstc-upload-box {
+            width: 100%;
+          }
+        }
+      }
+    }
+    &-footer {
+      margin-top: 70px;
+      text-align: center;
+    }
+  }
+
+  .form-group-footer-form {
+    position: fixed;
+    bottom: 0;
+    border-radius: 0px 0px 5px 5px;
+    width: 100%;
+    height: 61px;
+    transition: width 0.3s;
+    background-color: #fff;
+    box-shadow: 0px -2px 6px 0px rgba(92,100,113,0.11);
+    .sider-close {
+      background-color: #fff;
+      width: calc(100% - 103px) !important;
+    }
+    z-index: 999;
+  }
+  .form-group-footer {
+    .el-button {
+      margin: 14px 20px 0px 0px;
+      width: 90px;
+      height: 34px;
+      padding: 8px 12px;
+      font-size: 14px;
+      border-radius: 5px;
+    }
+  }
+  .form-item-text {
+    margin-left: 20px;
+    .el-form-item__label {
+      text-align: left;
+      font-size: 14px;
+    }
+    .el-form-item {
+      margin-bottom: 3px;
+    }
+  }
+
+  .el-button--primary {
+    background-color: #007aff;
+    border: 1px solid #007aff;
+  }
+  .el-button--default {
+    border: 1px solid #007aff;
+    color: #007aff;
+  }
+  .assist-button {
+    background: #fff;
+    border: 1px solid #dcdfe6;
+    color: #606266;
+  }
+
+}
+
+</style>