n20-common-lib 1.3.5 → 1.3.6

package/src/components/NstcG6Components/FormGroup/src/main.vue

@@ -1,639 +0,0 @@
-<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/src/components/NstcG6Components/FormGroup/src/validate.js

@@ -1,23 +0,0 @@
-/**
- * 占位 不校验
- */
-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('请输入期限'))
-    }
-}