n20-common-lib 1.3.46 → 1.3.49

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

@@ -1,327 +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>
+<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>