n20-common-lib 1.3.10 → 1.3.11

package/nstc-g6/components/NstcForm/Item.vue

@@ -0,0 +1,327 @@
+<template>
+  <div>
+    <template v-if="SUPPORT_TYPE.includes(item.mold)">
+      <el-form-item
+        :ref="item.required ? item.prop : null"
+        :label="item.name"
+        :prop="item.prop"
+      >
+        <el-tooltip
+          v-if="item.tooltip"
+          class="item-tooltip"
+          effect="dark"
+          :content="item.tooltip"
+          placement="top-start"
+          :style="{ left: -tipLength + 'px' }"
+        >
+          <i class="el-icon-question"></i>
+        </el-tooltip>
+        <!-- 多个link -->
+
+        <template v-if="Array.isArray(item.link)">
+          <component
+            :is="getComponentModel(item.mold)"
+            ref="item"
+            :key="item.prop"
+            v-model="value[item.prop]"
+            icon-type="drop"
+            :show-checkbox="item.showCheckbox"
+            :only-click-leaf="item.onlyClickLeaf"
+            v-bind="item"
+            :reset.sync="resets[item.prop]"
+            :disabled="disableds[item.prop]"
+            :popper-class="popperClass"
+            :check-strictly="item.checkStrictly"
+            :disable-unclick-leaf="item.disableUnclickLeaf"
+            :label="formData[item.queryKey]"
+            v-on="item.listeners"
+            @after-leave="$emit('after-leave', item.prop)"
+            @enter-click="$emit('enter-click')"
+            @treeNodeClick="treeNodeClick"
+          />
+          <template v-for="link in item.link">
+            <template v-if="link.mold && link.renderable !== false">
+              <!--              <span-->
+              <!--                v-show="link.name"-->
+              <!--                :key="`${link.prop}-${link.name}`"-->
+              <!--                class="form-item-name form-item-name-link"-->
+              <!--                v-html="link.name"-->
+              <!--              />-->
+              <el-form-item
+                :key="link.prop"
+                :label="link.name"
+                :prop="link.prop"
+                :label-width="link.labelWidth"
+                class="form-item-link-child"
+                :dev-use="link.mold"
+              >
+                <component
+                  :is="getComponentModel(item.mold)"
+                  v-if="link.renderable !== false"
+                  v-model="value[link.prop]"
+                  icon-type="drop"
+                  :show-checkbox="item.showCheckbox"
+                  :only-click-leaf="item.onlyClickLeaf"
+                  :disable-unclick-leaf="item.disableUnclickLeaf"
+                  v-bind="link"
+                  :reset.sync="resets[link.prop]"
+                  :disabled="disableds[item.prop]"
+                  :check-strictly="item.checkStrictly"
+                  :popper-class="popperClass"
+                  :label="formData[item.queryKey]"
+                  v-on="link.listeners"
+                  @after-leave="$emit('after-leave', link.prop)"
+                  @enter-click="$emit('enter-click')"
+                  @treeNodeClick="treeNodeClick"
+                />
+              </el-form-item>
+            </template>
+          </template>
+        </template>
+        <!-- 单个link -->
+        <template v-else-if="item.link && item.link.mold">
+          <template v-if="item.link.position === 'after'">
+            <component
+              :is="getComponentModel(item.link.mold)"
+              v-if="item.link.renderable !== false"
+              ref="item"
+              :key="item.link.prop"
+              v-model="value[item.link.prop]"
+              icon-type="drop"
+              :show-checkbox="item.showCheckbox"
+              :only-click-leaf="item.onlyClickLeaf"
+              :disable-unclick-leaf="item.disableUnclickLeaf"
+              v-bind="item.link"
+              :reset.sync="resets[item.link.prop]"
+              :disabled="disableds[item.link.prop]"
+              :popper-class="popperClass"
+              :check-strictly="item.checkStrictly"
+              :label="formData[item.queryKey]"
+              v-on="item.link.listeners"
+              @after-leave="$emit('after-leave', item.link.prop)"
+              @enter-click="$emit('enter-click')"
+              @treeNodeClick="treeNodeClick"
+            />
+            <span
+              v-show="item.link.name"
+              class="form-item-name form-item-name-link"
+              v-html="item.link.name"
+            ></span>
+            <component
+              :is="getComponentModel(item.mold)"
+              :key="item.prop"
+              v-model="value[item.prop]"
+              icon-type="drop"
+              :show-checkbox="item.showCheckbox"
+              :only-click-leaf="item.onlyClickLeaf"
+              :disable-unclick-leaf="item.disableUnclickLeaf"
+              v-bind="item"
+              :reset.sync="resets[item.prop]"
+              :disabled="disableds[item.prop]"
+              :check-strictly="item.checkStrictly"
+              :popper-class="popperClass"
+              :label="formData[item.queryKey]"
+              v-on="item.listeners"
+              @after-leave="$emit('after-leave', item.prop)"
+              @enter-click="$emit('enter-click')"
+              @treeNodeClick="treeNodeClick"
+            />
+          </template>
+          <template v-else>
+            <component
+              :is="getComponentModel(item.mold)"
+              :key="item.prop"
+              v-model="value[item.prop]"
+              icon-type="drop"
+              :show-checkbox="item.showCheckbox"
+              :only-click-leaf="item.onlyClickLeaf"
+              :disable-unclick-leaf="item.disableUnclickLeaf"
+              v-bind="item"
+              :reset.sync="resets[item.prop]"
+              :check-strictly="item.checkStrictly"
+              :disabled="disableds[item.prop]"
+              :popper-class="popperClass"
+              :label="formData[item.queryKey]"
+              v-on="item.listeners"
+              @after-leave="$emit('after-leave', item.prop)"
+              @enter-click="$emit('enter-click')"
+              @treeNodeClick="treeNodeClick"
+            />
+            <span
+              v-show="item.link.name"
+              class="form-item-name form-item-name-link"
+              v-html="item.link.name"
+            ></span>
+            <component
+              :is="getComponentModel(item.link.mold)"
+              v-if="item.link.renderable !== false"
+              :key="item.link.prop"
+              v-model="value[item.link.prop]"
+              icon-type="drop"
+              :show-checkbox="item.showCheckbox"
+              :only-click-leaf="item.onlyClickLeaf"
+              :disable-unclick-leaf="item.disableUnclickLeaf"
+              v-bind="item.link"
+              :reset.sync="resets[item.link.prop]"
+              :check-strictly="item.checkStrictly"
+              :disabled="disableds[item.link.prop]"
+              :popper-class="popperClass"
+              :label="formData[item.queryKey]"
+              v-on="item.link.listeners"
+              @after-leave="$emit('after-leave', item.link.prop)"
+              @enter-click="$emit('enter-click')"
+              @treeNodeClick="treeNodeClick"
+            />
+          </template>
+        </template>
+
+        <template v-else>
+          <component
+            :is="getComponentModel(item.mold)"
+            ref="item"
+            :key="item.prop"
+            v-model="value[item.prop]"
+            icon-type="drop"
+            :show-checkbox="item.showCheckbox"
+            :only-click-leaf="item.onlyClickLeaf"
+            :disable-unclick-leaf="item.disableUnclickLeaf"
+            :lazy-load="item.lazyLoad"
+            :label-key="item.labelKey"
+            :value-key="item.valueKey"
+            :check-strictly="item.checkStrictly"
+            :http-method="item.httpMethod"
+            :params="item.params"
+            v-bind="item"
+            :multiple="item.multiple"
+            :reset.sync="resets[item.prop]"
+            :disabled="disableds[item.prop]"
+            :popper-class="popperClass"
+            :query="item.query"
+            :label="formData[item.queryKey]"
+            :placeholder="item.placeholder"
+            :remote="item.remote"
+            :filterable="item.filterable"
+            :options="item.options"
+            :number-rule="item.defaultProps || {}"
+            :clearable="item.clearable"
+            :is-cache="item.isCache"
+            :date-type="item.dateType"
+            v-on="item.listeners"
+            @after-leave="$emit('after-leave', item.prop)"
+            @enter-click="$emit('enter-click')"
+            @treeNodeClick="treeNodeClick"
+          />
+        </template>
+      </el-form-item>
+    </template>
+  </div>
+</template>
+
+<script>
+import { SUPPORT_TYPE, components } from './configs'
+
+export default {
+  name: 'FormCustomBaseItem',
+
+  components,
+
+  inheritAttrs: false,
+
+  props: {
+    formData: {
+      type: Object,
+      default: () => ({})
+    },
+    from: {
+      type: String,
+      default: ''
+    },
+    item: {
+      default: () => ({}),
+      type: Object
+    },
+
+    loading: {
+      default: false,
+      type: Boolean
+    },
+
+    resets: {
+      default: () => ({}),
+      type: Object
+    },
+
+    disableds: {
+      default: () => ({}),
+      type: Object
+    },
+
+    popperClass: {
+      type: String,
+      default: ''
+    },
+
+    value: {
+      default: () => ({}),
+      type: Object
+    },
+
+    // 显示模式
+    showMode: {
+      type: String,
+      default: ''
+    }
+  },
+
+  // created() {
+  //   console.log('item:', this.item)
+  // },
+
+  data() {
+    return {
+      SUPPORT_TYPE
+    }
+  },
+  computed: {
+    tipLength() {
+      // if (this.item.name.length === 2) {
+      //   return 68
+      // }
+      return this.item.name.length * 16 + 30
+    }
+    // tipLength
+  },
+
+  methods: {
+    getComponentModel(model) {
+      if (!this.showMode) {
+        return `${model}-custom`
+      } else {
+        return `text-custom`
+      }
+    },
+    treeNodeClick(data, node) {
+      this.$emit('tree-node-click', data, node)
+      setTimeout(() => {
+        const key = this.item.queryKey
+        this.$refs['item'].filterText = this.formData[key]
+      }, 0)
+    }
+  }
+}
+</script>
+<style lang="scss">
+.el-form-item {
+  .el-tooltip {
+    position: absolute;
+    top: 9px;
+  }
+  .query-button {
+    width: 72px;
+    height: 26px;
+    padding: 0px;
+    border: 1px solid #007aff;
+    border-radius: 5px;
+  }
+}
+</style>

package/nstc-g6/components/NstcForm/ItemSecond.vue

@@ -0,0 +1,269 @@
+<template>
+  <div :class="{ 'form-item-button':['querybutton', 'addbutton', 'otherbutton'].includes(item.mold) }">
+    <el-form-item v-if="item.mold === 'querybutton'">
+      <el-button
+        type="primary"
+        v-bind="item"
+        :loading="loading"
+        :disabled="disableds[item.prop || item.mold]"
+        :icon="item.icon || 'el-icon-search'"
+        class="query-button nstc-g6-common-btn-1 nstc-g6-common-btn-size-b"
+        @click="$emit('query-click')"
+      >
+        {{ item.name || '查询' }}
+      </el-button>
+    </el-form-item>
+
+    <el-form-item v-if="item.mold === 'addbutton'">
+      <el-button
+        v-bind="item"
+        :disabled="disableds[item.prop || item.mold]"
+        :icon="item.icon || 'el-icon-plus'"
+        @click="$emit('add-click')"
+      >
+        {{ item.name || '新增' }}
+      </el-button>
+    </el-form-item>
+
+    <el-form-item v-if="item.mold === 'otherbutton'">
+      <el-button
+        v-bind="item"
+        :disabled="disableds[item.prop || item.mold]"
+        :icon="item.type === 'icon' ? item.icon : undefined"
+        class="other-button"
+        @click="$emit('other-click')"
+      >
+        {{ item.name || '' }}
+      </el-button>
+    </el-form-item>
+
+    <template v-else-if="SUPPORT_TYPE.includes(item.mold)">
+      <el-form-item
+        :label="item.name"
+        :prop="item.prop"
+      >
+        <el-tooltip
+          v-if="item.tooltip"
+          class="item-tooltip"
+          effect="dark"
+          :content="item.tooltip"
+          placement="top-start"
+          :style="{left: -tipLength + 'px'}"
+        >
+          <i class="el-icon-question" />
+        </el-tooltip>
+        <!-- 多个 -->
+        <template v-if="Array.isArray(item.link)">
+          <component
+            :is="`${item.mold}-custom`"
+            :key="item.prop"
+            v-model="value[item.prop]"
+            v-bind="item"
+            :reset.sync="resets[item.prop]"
+            :disabled="disableds[item.prop]"
+            :popper-class="popperClass"
+            v-on="item.listeners"
+            @after-leave="$emit('after-leave', item.prop)"
+            @enter-click="$emit('enter-click')"
+          />
+          <template v-for="link in item.link">
+            <template v-if="link.mold && link.renderable !== false">
+              <!--              <span-->
+              <!--                v-show="link.name"-->
+              <!--                :key="`${link.prop}-${link.name}`"-->
+              <!--                class="form-item-name form-item-name-link"-->
+              <!--                v-html="link.name"-->
+              <!--              />-->
+              <el-form-item
+                :key="link.prop"
+                :label="link.name"
+                :prop="link.prop"
+                :label-width="link.labelWidth"
+                class="form-item-link-child"
+                :dev-use="link.mold"
+              >
+                <component
+                  :is="`${link.mold}-custom`"
+                  v-if="link.renderable !== false"
+                  v-model="value[link.prop]"
+                  v-bind="link"
+                  :reset.sync="resets[link.prop]"
+                  :disabled="disableds[item.prop]"
+                  :popper-class="popperClass"
+                  v-on="link.listeners"
+                  @after-leave="$emit('after-leave', link.prop)"
+                  @enter-click="$emit('enter-click')"
+                />
+              </el-form-item>
+
+            </template>
+          </template>
+        </template>
+        <!-- 单个 -->
+        <template v-else-if="item.link &&item.link.mold">
+          <template v-if="item.link.position === 'after'">
+            <component
+              :is="`${item.link.mold}-custom`"
+              v-if="item.link.renderable !== false"
+              :key="item.link.prop"
+              v-model="value[item.link.prop]"
+              v-bind="item.link"
+              :reset.sync="resets[item.link.prop]"
+              :disabled="disableds[item.link.prop]"
+              :popper-class="popperClass"
+              v-on="item.link.listeners"
+              @after-leave="$emit('after-leave', item.link.prop)"
+              @enter-click="$emit('enter-click')"
+            />
+            <span
+
+              v-show="item.link.name"
+              class="form-item-name form-item-name-link"
+              v-html="item.link.name"
+            />
+            <component
+              :is="`${item.mold}-custom`"
+              :key="item.prop"
+              v-model="value[item.prop]"
+              v-bind="item"
+              :reset.sync="resets[item.prop]"
+              :disabled="disableds[item.prop]"
+              :popper-class="popperClass"
+              v-on="item.listeners"
+              @after-leave="$emit('after-leave', item.prop)"
+              @enter-click="$emit('enter-click')"
+            />
+          </template>
+          <template v-else>
+            <component
+              :is="`${item.mold}-custom`"
+              :key="item.prop"
+              v-model="value[item.prop]"
+              v-bind="item"
+              :reset.sync="resets[item.prop]"
+              :disabled="disableds[item.prop]"
+              :popper-class="popperClass"
+              v-on="item.listeners"
+              @after-leave="$emit('after-leave', item.prop)"
+              @enter-click="$emit('enter-click')"
+            />
+            <span
+
+              v-show="item.link.name"
+              class="form-item-name form-item-name-link"
+              v-html="item.link.name"
+            />
+            <component
+              :is="`${item.link.mold}-custom`"
+              v-if="item.link.renderable !== false"
+              :key="item.link.prop"
+              v-model="value[item.link.prop]"
+              v-bind="item.link"
+              :reset.sync="resets[item.link.prop]"
+              :disabled="disableds[item.link.prop]"
+              :popper-class="popperClass"
+              v-on="item.link.listeners"
+              @after-leave="$emit('after-leave', item.link.prop)"
+              @enter-click="$emit('enter-click')"
+            />
+          </template>
+        </template>
+
+        <template v-else>
+          <component
+            :is="`${item.mold}-custom`"
+            :key="item.prop"
+            v-model="value[item.prop]"
+            v-bind="item"
+            :reset.sync="resets[item.prop]"
+            :disabled="disableds[item.prop]"
+            :popper-class="popperClass"
+            v-on="item.listeners"
+            @after-leave="$emit('after-leave', item.prop)"
+            @enter-click="$emit('enter-click')"
+          />
+        </template>
+      </el-form-item>
+    </template>
+  </div>
+</template>
+
+<script>
+import { SUPPORT_TYPE, components } from './configsSecond'
+
+export default {
+  name: 'FormCustomBaseItem',
+
+  components,
+
+  inheritAttrs: false,
+
+  props: {
+    from: {
+      type: String,
+      default: ''
+    },
+    item: {
+      default: () => ({}),
+      type: Object
+    },
+
+    loading: {
+      default: false,
+      type: Boolean
+    },
+
+    resets: {
+      default: () => ({}),
+      type: Object
+    },
+
+    disableds: {
+      default: () => ({}),
+      type: Object
+    },
+
+    popperClass: {
+      type: String,
+      default: ''
+    },
+
+    value: {
+      default: () => ({}),
+      type: Object
+    }
+  },
+
+  data() {
+    return {
+      SUPPORT_TYPE
+    }
+  },
+  computed: {
+    tipLength() {
+      console.log('this.item.name', this.item.name.length)
+      // if (this.item.name.length === 2) {
+      //   return 68
+      // }
+      return this.item.name.length * 16 + 30
+    }
+    // tipLength
+  }
+}
+</script>
+<style lang="scss">
+.el-form-item {
+  .el-tooltip {
+    position: absolute;
+    top: 9px;
+  }
+  .query-button {
+    width: 72px;
+    height: 26px;
+    padding: 0px;
+    border: 1px solid #007AFF;
+    border-radius: 5px;
+  }
+}
+
+</style>