n20-common-lib 1.3.8 → 1.3.11

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

@@ -0,0 +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>

package/nstc-g6/components/FormGroup/src/validate.js

@@ -0,0 +1,23 @@
+/**
+ * 占位 不校验
+ */
+export function notValid(rule, value, callback) {
+    callback()
+}
+
+
+/**
+ * 校验 【融资】 - 【期限】
+ */
+export function validInputWithUnit(rule, value, callback) {
+    if (value[0] && value[1]) {
+        // if (/^[0-9]*$/.test(value[0])) {
+        callback()
+        // } else {
+        //     callback(new Error('请输入正整数'))
+        // }
+
+    } else {
+        callback(new Error('请输入期限'))
+    }
+}