n20-common-lib 1.2.46 → 1.3.2

package/src/components/NstcG6Components/NstcDialogForm/NstcDialogForm.vue

@@ -0,0 +1,176 @@
+<template>
+  <NstcDialog  v-model="dialogVisible"
+               v-bind="$attrs"
+               @confirm="handleConfirm"
+               @cancel="handleCancel">
+    <slot name="before" />
+    <NstcForm
+        ref="dialogForm"
+        v-model="formModel"
+        :reset.sync="reset"
+        :mount-and-query="false"
+        :config="formConfig"
+        :rules="rules"
+        :pureable="pureable"
+        :label-position="labelPosition"
+        :label-width="labelWidth"
+        :show-message="showMessage"
+        :validate-on-rule-change="validateOnRuleChange"
+        :mode="mode"
+    />
+    <slot name="after" />
+
+  </NstcDialog>
+</template>
+
+<script>
+import NstcDialog from '../NstcDialog/NstcDialog'
+import NstcForm from '../NstcForm/Component'
+export default {
+  name: "NstcDialogForm",
+  components: {
+    NstcDialog,
+    NstcForm
+  },
+  inheritAttrs: false,
+  model: {
+    prop: 'formModel'
+  },
+
+  props: {
+    formModel: {
+      default: () => ({}),
+      type: Object
+    },
+
+    visible: {
+      type: Boolean,
+      default: false
+    },
+
+    showMessage: {
+      type: Boolean,
+      default: true
+    },
+
+    formConfig: {
+      type: Array,
+      default: () => []
+    },
+
+    rules: {
+      type: Object,
+      default: null
+    },
+
+    labelPosition: {
+      type: String,
+      default: 'right'
+    },
+
+    labelWidth: {
+      type: [String, Number],
+      default: 80
+    },
+
+    resetAfterClose: {
+      type: Boolean,
+      default: true
+    },
+
+    // 是否是纯净模式 (删除 renderable === false 的item.prop对应model的值)
+    pureable: {
+      default: false,
+      type: Boolean
+    },
+
+    validateOnRuleChange: {
+      default: false,
+      type: Boolean
+    },
+
+    mode: {
+      default: 'horizontal',
+      validator: function(val) {
+        return ['horizontal', 'vertical'].includes(val)
+      }
+    }
+  },
+
+  data() {
+    return {
+      reset: false
+    }
+  },
+
+  computed: {
+    dialogVisible: {
+      get() {
+        return this.visible
+      },
+      set(val) {
+        this.$emit('update:visible', val)
+      }
+    }
+  },
+
+  watch: {
+    formModel: {
+      deep: true,
+      handler(val) {
+        this.$emit('input', val)
+        this.$emit('change', val)
+      }
+    }
+  },
+
+  methods: {
+    async handleConfirm() {
+      try {
+        if (this.rules) {
+          await this.$refs.dialogForm.validate()
+        }
+
+        if (this.$listeners.confirm) {
+          await this.$listeners.confirm(this.formModel) // $listeners.confirm 须返回Promise
+        }
+
+        await this.$nextTick()
+
+        this.handleReset()
+
+        return Promise.resolve()
+      } catch (err) {
+        return Promise.reject(err)
+      }
+    },
+
+    async handleCancel() {
+      try {
+        const model = JSON.parse(JSON.stringify(this.formModel))
+
+        this.$listeners.cancel && await this.$listeners.cancel(model) // $listeners.confirm 须返回Promise
+
+        this.handleReset()
+
+        return Promise.resolve()
+      } catch (err) {
+        return Promise.reject(err)
+      }
+    },
+
+    clearFormValidate() {
+      this.$refs.dialogForm.clearValidate()
+    },
+
+    handleReset() {
+      if (this.resetAfterClose) {
+        this.reset = true
+        this.$nextTick(() => {
+          this.$refs.dialogForm && this.$refs.dialogForm.clearValidate()
+        })
+      }
+    }
+  }
+}
+</script>

package/src/components/NstcG6Components/NstcDialogTable/NstcDialogTable.vue

@@ -0,0 +1,282 @@
+<template>
+  <NstcDialog
+    v-drag
+    class="dialog-table"
+    :title="title"
+    :visible.sync="dialogVisible"
+    :width="width"
+    :close-on-click-modal="false"
+    :append-to-body="appendToBody"
+  >
+    <slot name="form"></slot>
+    <slot name="table">
+      <el-table
+        :data="tableData"
+        :row-key="rowKey"
+        border
+        :height="maxHeight"
+        @selection-change="handleSelectionChange"
+        @row-click="handleRowClick"
+      >
+        <el-table-column v-if="multiple" type="selection" :width="55" />
+        <el-table-column v-if="single" :width="55">
+          <template slot-scope="scope">
+            <el-radio
+              v-model="singleSelect"
+              class="row-radio"
+              :label="scope.row[rowKey]"
+            >
+              <i></i>
+            </el-radio>
+          </template>
+        </el-table-column>
+        <el-table-column
+          v-for="(column, idx) in columns"
+          :key="idx"
+          :label="column.label"
+          :width="column.width"
+          :align="column.align"
+          show-overflow-tooltip
+        >
+          <template slot-scope="scope"> {{ scope.row[column.prop] }} </template>
+        </el-table-column>
+      </el-table>
+      <nstc-pagination
+        v-model="pagination"
+        :page="pagination.current"
+        :page-size="pagination.size"
+        :total="pagination.total"
+        @pagination-change="paginationChange"
+      />
+    </slot>
+
+    <div slot="footer" class="btns">
+      <el-button type="primary" class="nstc-g6-common-btn-1" @click="onSubmit"
+        >确定</el-button
+      >
+      <el-button
+        class="nstc-g6-common-btn-3"
+        style="margin-left: 8px"
+        @click="closeDialog"
+        >取消</el-button
+      >
+    </div>
+  </NstcDialog>
+</template>
+
+<script>
+import NstcDialog from '../../Dialog/index'
+import NstcPagination from '../NstcPagination/NstcPagination'
+export default {
+  name: 'NstcDialogTable',
+  components: {
+    NstcDialog,
+    NstcPagination
+  },
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    appendToBody: {
+      type: Boolean,
+      default: true
+    },
+    value: {
+      type: Boolean,
+      default: false
+    },
+    rowKey: {
+      type: String,
+      default: 'id'
+    },
+    columns: {
+      type: Array,
+      default: () => []
+    },
+    width: {
+      type: String,
+      default: '1000px'
+    },
+    maxHeight: {
+      type: String,
+      default: '300px'
+    },
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    single: {
+      type: Boolean,
+      default: false
+    },
+    queryApi: {
+      type: Function,
+      default: () => {}
+    },
+    formatParams: {
+      type: Function,
+      default: (p) => p
+    },
+    formatData: {
+      type: Function,
+      default: (d) => d
+    },
+    warning: {
+      type: String,
+      default: '请选择数据'
+    },
+    selectRowKey: String
+  },
+  data() {
+    return {
+      tableData: [],
+      singleSelect: '',
+      selectRowIds: [],
+      pagination: {
+        size: 20,
+        current: 1,
+        total: 0
+      }
+    }
+  },
+  computed: {
+    dialogVisible: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    },
+    showPagination() {
+      return this.pagination.total > this.pagination.size
+    }
+  },
+  methods: {
+    queryData(eventname) {
+      this.tableData = []
+      this.setPagination(0)
+      if (eventname && eventname == 'searchbtn') {
+        this.pagination.current = 1
+      }
+      let params = this.formatParams(this.pagination)
+      Promise.resolve(this.queryApi(params)).then((res) => {
+        let { data, total } = this.formatData(res)
+        this.tableData = data
+        this.setPagination(total)
+        this.setCurrentRow()
+      })
+    },
+
+    handleSelectionChange(rows) {
+      if (this.multiple) {
+        const rowIds = []
+        rows.forEach((item) => {
+          rowIds.push(item[this.rowKey])
+        })
+        this.selectRowIds = Object.freeze(rowIds)
+      }
+    },
+
+    handleRowClick(row) {
+      this.singleSelect = row[this.rowKey]
+    },
+
+    onSubmit() {
+      let result = []
+      let row = {}
+      if (this.multiple) {
+        result = this.selectRowIds
+      }
+      if (this.single) {
+        let select = this.singleSelect
+        result = select ? [select] : []
+      }
+      if (result.length > 0) {
+        row = this.tableData.find(
+          (item) => item[this.rowKey] === this.singleSelect
+        )
+        this.$emit('comfirm', result, row)
+        this.closeDialog()
+      } else {
+        this.$message.warning(this.warning)
+      }
+    },
+
+    closeDialog() {
+      this.dialogVisible = false
+      this.selectRowIds = []
+      this.singleSelect = ''
+      this.tableData = []
+    },
+
+    async paginationChange(val) {
+      const { limit, page } = val
+      if (this.pagination.size == limit && this.pagination.current == page) {
+        return
+      }
+      this.pagination.size = limit
+      this.pagination.current = page
+      this.queryData()
+    },
+
+    setPagination(total) {
+      this.pagination.total = total || 0
+    },
+
+    setCurrentRow() {
+      let selectRowId = this.selectRowKey
+      if (this.single) {
+        let rowKey = this.rowKey
+        let data = this.tableData
+        let val = selectRowId
+        if (selectRowId) {
+          let row = data.find((item) => item[rowKey] == selectRowId)
+          if (row) {
+            val = row[rowKey]
+          }
+        }
+        this.singleSelect = val
+      }
+    }
+  }
+}
+</script>
+
+<!-- <style lang="scss" scoped>
+.dialog-table .el-dialog {
+  position: relative;
+  overflow: hidden;
+}
+.dialog-table ::v-deep .el-dialog__body {
+  padding-bottom: 0 !important;
+}
+.dialog-table .el-table.el-table--border {
+  border-bottom: none;
+}
+.dialog-table .el-table.el-table--border::before {
+  height: 1px;
+}
+
+.dialog-table .el-dialog__body {
+  margin-bottom: 35px;
+}
+.dialog-table .el-dialog__footer {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  border-radius: 0px 0px 4px 4px;
+  background: #fff;
+}
+// .dialog-table ::v-deep .el-table__body tr:last-child td {
+//   border-bottom: none;
+// }
+.dialog-table .el-dialog__footer .btns {
+  display: flex;
+  justify-content: center;
+}
+.row-radio ::v-deep .el-radio__label {
+  padding: 0;
+}
+</style> -->

package/src/components/NstcG6Components/NstcDropdown/NstcDropdown.vue

@@ -0,0 +1,52 @@
+<!--
+  功能：    表格里面的弹框
+  作者：    nstc
+  创建时间： 2021-02-04
+-->
+<template>
+  <el-dropdown
+      v-bind="$attrs"
+      v-on="$listeners"
+  >
+    <slot />
+    <el-dropdown-menu slot="dropdown">
+      <el-dropdown-item
+          v-for="(item,index) in options"
+          :key="index"
+          v-bind="item"
+          :command="item"
+      >
+        {{ item.label }}
+      </el-dropdown-item>
+    </el-dropdown-menu>
+  </el-dropdown>
+</template>
+
+<script>
+export default {
+  name: 'NstcDropdown',
+
+  inheritAttrs: false,
+
+  props: {
+    options: {
+      type: Array,
+      default: () => []
+    }
+  },
+
+  data() {
+    return {}
+  },
+
+  created() {},
+
+  methods: {
+    handleClick() {},
+
+    handleCommand() {}
+  }
+}
+</script>
+
+