@ddwl/ddwl-ui 1.1.3 → 1.1.5-beta.1

package/src/packages/descriptions/index.vue

@@ -1,124 +1,124 @@
-<!-- eslint-disable vue/no-lone-template -->
-<!-- 描述列表 -->
-<template>
-  <el-descriptions
-    :class="{
-      'd-descriptions': true,
-      'border': border
-    }"
-    :border="border"
-    :label-style="{
-      width: labelWidth,
-      ...labelStyle
-    }"
-    v-bind="$attrs"
-  >
-    <el-descriptions-item
-      v-for="item in config"
-      :key="item.prop"
-      v-bind="item"
-    >
-      <template slot="label">
-        <item-render v-if="item.labelRender" :scope="data" :render="item.labelRender" />
-        <span v-else>{{ item.label }}</span>
-      </template>
-      <template>
-        <component
-          :is="item.component"
-          v-if="item.component"
-          v-bind="item"
-          :row="data"
-        />
-        <item-render v-else-if="item.render" :scope="data" :render="item.render" />
-        <span v-else>{{ data[item.prop] }}</span>
-      </template>
-    </el-descriptions-item>
-  </el-descriptions>
-</template>
-
-<script>
-import ItemRender from '../render'
-import modules from '../../lib/slots'
-
-export default {
-  name: 'DDescriptions',
-  components: { ...modules, ItemRender },
-  props: {
-    data: {
-      default: () => ({}),
-      type: Object
-    },
-    config: {
-      default: () => [],
-      type: Array
-    },
-     border: {
-      default: true,
-      type: Boolean
-    },
-    labelWidth: {
-      default: '112px',
-      type: String
-    },
-    labelStyle: {
-      default: () => ({}),
-      type: Object
-    }
-  },
-  data () {
-    return {}
-  },
-  computed: {},
-  watch: {},
-  created () {},
-  methods: {}
-}
-</script>
-
-<style lang='scss' scoped>
-.d-descriptions {
-  :deep(.el-descriptions__body) {
-    .el-descriptions__header {
-      margin-bottom: 12px;
-    }
-    .el-descriptions-item__container {
-      display: flex;
-    }
-    .el-descriptions-item__label {
-      display: block;
-      width: 112px;
-      text-align: right;
-      color: #333;
-    }
-    .el-descriptions-item__cell {
-      padding: 6px 0;
-      color: #333;
-      vertical-align: middle;
-    }
-    .el-descriptions-item__content {
-      color: #666;
-    }
-  }
-}
-.d-descriptions.border {
-  :deep(.el-descriptions__body) {
-    .el-descriptions__table.is-bordered {
-      width: 100%;
-      table-layout: fixed;
-      border-collapse: collapse;
-    }
-    .el-descriptions-item__cell {
-      padding: 12px;
-      color: #333;
-      border: 1px solid #ebeef5;
-      vertical-align: middle;
-      padding-left: 14px;
-    }
-    .el-descriptions-item__cell.el-descriptions-item__label.is-bordered-label {
-      display: table-cell;
-      vertical-align: middle;
-      font-weight: normal;
-    }
-  }
-}
-</style>
+<!-- eslint-disable vue/no-lone-template -->
+<!-- 描述列表 -->
+<template>
+  <el-descriptions
+    :class="{
+      'd-descriptions': true,
+      'border': border
+    }"
+    :border="border"
+    :label-style="{
+      width: labelWidth,
+      ...labelStyle
+    }"
+    v-bind="$attrs"
+  >
+    <el-descriptions-item
+      v-for="item in config"
+      :key="item.prop"
+      v-bind="item"
+    >
+      <template slot="label">
+        <item-render v-if="item.labelRender" :scope="data" :render="item.labelRender" />
+        <span v-else>{{ item.label }}</span>
+      </template>
+      <template>
+        <component
+          :is="item.component"
+          v-if="item.component"
+          v-bind="item"
+          :row="data"
+        />
+        <item-render v-else-if="item.render" :scope="data" :render="item.render" />
+        <span v-else>{{ data[item.prop] }}</span>
+      </template>
+    </el-descriptions-item>
+  </el-descriptions>
+</template>
+
+<script>
+import ItemRender from '../render'
+import modules from '../../lib/slots'
+
+export default {
+  name: 'DDescriptions',
+  components: { ...modules, ItemRender },
+  props: {
+    data: {
+      default: () => ({}),
+      type: Object
+    },
+    config: {
+      default: () => [],
+      type: Array
+    },
+     border: {
+      default: true,
+      type: Boolean
+    },
+    labelWidth: {
+      default: '112px',
+      type: String
+    },
+    labelStyle: {
+      default: () => ({}),
+      type: Object
+    }
+  },
+  data () {
+    return {}
+  },
+  computed: {},
+  watch: {},
+  created () {},
+  methods: {}
+}
+</script>
+
+<style lang='scss' scoped>
+.d-descriptions {
+  :deep(.el-descriptions__body) {
+    .el-descriptions__header {
+      margin-bottom: 12px;
+    }
+    .el-descriptions-item__container {
+      display: flex;
+    }
+    .el-descriptions-item__label {
+      display: block;
+      width: 112px;
+      text-align: right;
+      color: #333;
+    }
+    .el-descriptions-item__cell {
+      padding: 6px 0;
+      color: #333;
+      vertical-align: middle;
+    }
+    .el-descriptions-item__content {
+      color: #666;
+    }
+  }
+}
+.d-descriptions.border {
+  :deep(.el-descriptions__body) {
+    .el-descriptions__table.is-bordered {
+      width: 100%;
+      table-layout: fixed;
+      border-collapse: collapse;
+    }
+    .el-descriptions-item__cell {
+      padding: 12px;
+      color: #333;
+      border: 1px solid #ebeef5;
+      vertical-align: middle;
+      padding-left: 14px;
+    }
+    .el-descriptions-item__cell.el-descriptions-item__label.is-bordered-label {
+      display: table-cell;
+      vertical-align: middle;
+      font-weight: normal;
+    }
+  }
+}
+</style>

package/src/packages/dialog/index.vue

@@ -1,172 +1,172 @@
-<!-- 弹窗 -->
-<template>
-  <el-dialog
-    :class="fullscreen ? 'cover-screen-dialog' : ''"
-    class="d-dialog"
-    v-bind="$attrs"
-    :title="title"
-    :close-on-click-modal="closeOnClickModal"
-    :visible.sync="visible"
-    :width="width"
-    v-on="$listeners"
-    @closed="closed"
-  >
-    <template slot="title">
-      <slot name="title" />
-    </template>
-    <slot />
-    <template slot="footer">
-      <slot name="footer" />
-      <div v-if="showButton" class="ar">
-        <el-button
-          type="primary"
-          :icon="submitButtonIcon"
-          :loading="loading"
-          @click="submit"
-        >
-          {{ submitButtonText }}
-        </el-button>
-        <el-button @click="cancel">
-          {{ cancelButtonText }}
-        </el-button>
-      </div>
-    </template>
-  </el-dialog>
-</template>
-
-<script>
-export default {
-  name: 'DDialog',
-  components: {},
-  model: {
-    prop: 'modelValue',
-    event: 'change'
-  },
-  props: {
-    modelValue: {
-      type: Boolean,
-      default: false
-    },
-    title: {
-      type: String,
-      default: ''
-    },
-    closeOnClickModal: {
-      type: Boolean,
-      default: false
-    },
-    showButton: {
-      type: Boolean,
-      default: true
-    },
-    submitButtonText: {
-      type: String,
-      default: '确定'
-    },
-    submitButtonIcon: {
-      type: String,
-      default: ''
-    },
-    cancelButtonText: {
-      type: String,
-      default: '取消'
-    },
-    // 需要重置的表单ref, 支持ref字符串或ref对象或ref字符串|对象数组
-    formRefs: {
-      type: [String, Object, Array],
-      default: ''
-    },
-    width: {
-      type: String,
-      default: '70%'
-    },
-    maxWidth: {
-      type: String,
-      default: '70%'
-    },
-    // 是否高度撑满
-    fullscreen: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data () {
-    return {
-      loading: false
-    }
-  },
-  computed: {
-    visible: {
-      get () {
-        return this.modelValue
-      },
-      set (value) {
-        this.$emit('change', value)
-      }
-    }
-  },
-  methods: {
-    getRef (ref) {
-      return typeof ref === 'string' ? this.$parent.$refs[ref] : ref
-    },
-    async submit () {
-      // 是否需要进行表单校验
-      if (this.formRefs) {
-        // 多表单校验
-        if (Array.isArray(this.formRefs)) {
-          await Promise.all(this.formRefs.map(ref => this.getRef(ref)?.validate()))
-        } else {
-          await this.getRef(this.formRefs)?.validate()
-        }
-      }
-      this.loading = true
-      this.$emit('submit', (status) => {
-        this.loading = false
-        if (!status) {
-          this.visible = false
-        }
-      })
-    },
-    cancel () {
-      this.$emit('cancel')
-      this.visible = false
-    },
-    /**
-     * @description: 弹窗关闭时清除表单校验
-     */
-    closed () {
-      this.$emit('closed')
-      if (this.formRefs) {
-        // 多表单校验
-        if (Array.isArray(this.formRefs)) {
-          this.formRefs.forEach(ref => this.getRef(ref)?.resetFields())
-        } else {
-          this.getRef(this.formRefs)?.resetFields()
-        }
-      }
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-.d-dialog {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  :deep(.el-dialog) {
-    max-height: 90vh;
-    display: flex;
-    flex-direction: column;
-    margin: 0 !important;
-    .el-dialog__body {
-      flex: 1;
-      overflow: auto;
-    }
-  }
-}
-.cover-screen-dialog {
-  :deep(.el-dialog) {
-    height: 90vh;
-  }
-}
-</style>
+<!-- 弹窗 -->
+<template>
+  <el-dialog
+    :class="fullscreen ? 'cover-screen-dialog' : ''"
+    class="d-dialog"
+    v-bind="$attrs"
+    :title="title"
+    :close-on-click-modal="closeOnClickModal"
+    :visible.sync="visible"
+    :width="width"
+    v-on="$listeners"
+    @closed="closed"
+  >
+    <template slot="title">
+      <slot name="title" />
+    </template>
+    <slot />
+    <template slot="footer">
+      <slot name="footer" />
+      <div v-if="showButton" class="ar">
+        <el-button
+          type="primary"
+          :icon="submitButtonIcon"
+          :loading="loading"
+          @click="submit"
+        >
+          {{ submitButtonText }}
+        </el-button>
+        <el-button @click="cancel">
+          {{ cancelButtonText }}
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: 'DDialog',
+  components: {},
+  model: {
+    prop: 'modelValue',
+    event: 'change'
+  },
+  props: {
+    modelValue: {
+      type: Boolean,
+      default: false
+    },
+    title: {
+      type: String,
+      default: ''
+    },
+    closeOnClickModal: {
+      type: Boolean,
+      default: false
+    },
+    showButton: {
+      type: Boolean,
+      default: true
+    },
+    submitButtonText: {
+      type: String,
+      default: '确定'
+    },
+    submitButtonIcon: {
+      type: String,
+      default: ''
+    },
+    cancelButtonText: {
+      type: String,
+      default: '取消'
+    },
+    // 需要重置的表单ref, 支持ref字符串或ref对象或ref字符串|对象数组
+    formRefs: {
+      type: [String, Object, Array],
+      default: ''
+    },
+    width: {
+      type: String,
+      default: '70%'
+    },
+    maxWidth: {
+      type: String,
+      default: '70%'
+    },
+    // 是否高度撑满
+    fullscreen: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      loading: false
+    }
+  },
+  computed: {
+    visible: {
+      get () {
+        return this.modelValue
+      },
+      set (value) {
+        this.$emit('change', value)
+      }
+    }
+  },
+  methods: {
+    getRef (ref) {
+      return typeof ref === 'string' ? this.$parent.$refs[ref] : ref
+    },
+    async submit () {
+      // 是否需要进行表单校验
+      if (this.formRefs) {
+        // 多表单校验
+        if (Array.isArray(this.formRefs)) {
+          await Promise.all(this.formRefs.map(ref => this.getRef(ref)?.validate()))
+        } else {
+          await this.getRef(this.formRefs)?.validate()
+        }
+      }
+      this.loading = true
+      this.$emit('submit', (status) => {
+        this.loading = false
+        if (!status) {
+          this.visible = false
+        }
+      })
+    },
+    cancel () {
+      this.$emit('cancel')
+      this.visible = false
+    },
+    /**
+     * @description: 弹窗关闭时清除表单校验
+     */
+    closed () {
+      this.$emit('closed')
+      if (this.formRefs) {
+        // 多表单校验
+        if (Array.isArray(this.formRefs)) {
+          this.formRefs.forEach(ref => this.getRef(ref)?.resetFields())
+        } else {
+          this.getRef(this.formRefs)?.resetFields()
+        }
+      }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.d-dialog {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  :deep(.el-dialog) {
+    max-height: 90vh;
+    display: flex;
+    flex-direction: column;
+    margin: 0 !important;
+    .el-dialog__body {
+      flex: 1;
+      overflow: auto;
+    }
+  }
+}
+.cover-screen-dialog {
+  :deep(.el-dialog) {
+    height: 90vh;
+  }
+}
+</style>