n20-common-lib 1.2.41 → 1.3.0

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>
+
+

package/src/components/NstcG6Components/NstcDropdownTree/NstcDropdownTree.vue

@@ -0,0 +1,392 @@
+<!--
+  功能：    下拉树
+  作者：    nstc
+  创建时间： 2021-02-05
+-->
+
+<template>
+  <div class="form-create-dropdown-tree">
+    <el-popover placement="bottom-start" trigger="click"  v-model="showPopoverFlag">
+      <el-input
+          :ref="inputRefName"
+          v-model="filterText"
+          suffix-icon="el-icon-search"
+          :placeholder="placeholder || placeholderTemp"
+          :style="{ width: inputWidth }"
+          @input="inputChange"
+          @blur="clearFilterText"
+          @focus="inputFocus"
+          @change="inputChangeAction"
+          clearable
+        />
+        <el-tree
+          :ref="treeRefName"
+          class="filter-tree"
+          :data="treeData"
+          :props="defaultProps"
+          :node-key="nodeKey"
+          default-expand-all
+          :show-checkbox="showCheckbox"
+          :check-strictly="showCheckbox"
+          v-bind="$attrs"
+          v-on="$listeners"
+          @node-click="treeNodeClick"
+          @check="handleCheckChange"
+        />
+      <span class="el-dropdown-link" slot="reference">
+        {{ unitNameText }}
+        <i class="el-icon-arrow-down el-icon--right" />
+      </span>
+    </el-popover>
+  </div>
+</template>
+
+<script>
+import axios from "@/utils/axios";
+export default {
+  name: "NstcDropdownTree", // 单位按树模块查询
+  props: {
+    value: {
+      type: [String, Number, Array, Object],
+      default: () => {
+        return "";
+      },
+    },
+
+    lazy: {
+      type: Boolean,
+      default: false,
+    },
+
+    inputWidth: {
+      type: String,
+      default: "",
+    },
+
+    showCheckbox: {
+      type: Boolean,
+      default: false,
+    },
+
+    url: {
+      type: String,
+      default: "",
+    },
+
+    nodeKey: {
+      type: String,
+      default: "id",
+    },
+
+    defaultProps: {
+      type: Object,
+      default: () => {
+        return {
+          children: "children",
+          label: "label",
+        };
+      },
+    },
+
+    params: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+
+    queryKey: {
+      type: String,
+      default: "query",
+    },
+
+    label: {
+      type: [String, Number],
+      default: "",
+    },
+
+    // 额外的查询参数
+    query: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+
+    // 组件的大小
+    size: {
+      type: String,
+      default: () => {
+        return "normal";
+      },
+    },
+    //是否添加 无
+    showNull: {
+      type: Boolean,
+      default: false,
+    },
+    dropUnitName: {
+      type: String,
+      default: "全部单位",
+    },
+    placeholderTemp: {
+      type: String,
+      default: "请输入关键字进行过滤",
+    },
+  },
+  data() {
+    return {
+      showPopoverFlag: false,
+      filterText: null,
+      treeData: [],
+      treeRefName: "",
+      inputRefName: this.getRefName(),
+      queryFlag: true,
+      placeholder: "",
+      windowEventFlag: false,
+      timeTemp: null,
+      unitNameText: "全部单位",
+    };
+  },
+  computed: {
+    _value: {
+      get() {
+        return this.value;
+      },
+      set(val) {
+        this.$emit("input", val);
+      },
+    },
+  },
+  watch: {
+    label(val) {
+      this.filterText = val;
+    },
+    value(val) {
+      if (["", null].includes(val)) {
+        this.filterText = null;
+        this.placeholder = null;
+      }
+    },
+    dropUnitName: {
+      handler(val) {
+        this.unitNameText = val;
+      },
+      deep: true,
+    },
+  },
+
+  created() {
+    //
+    this.treeRefName = this.getRefName();
+    this.unitNameText = this.dropUnitName;
+    // 默认加载一次
+    this.remoteMethod();
+
+    this.filterText = this.label;
+
+    // 点击其他地方关闭关闭下拉
+    const that = this;
+    document.documentElement.onclick = function () {
+      that.windowEventFlag && that.clearFilterText();
+    };
+  },
+  methods: {
+    /**
+     * input 输入框变化事件
+     */
+    inputChange() {
+      const that = this;
+      this.timeTemp && clearTimeout(that.timeTemp);
+      this.timeTemp = setTimeout(() => {
+        console.log("input change", this.filterText);
+        this.queryFlag && this.remoteMethod();
+        this.queryFlag = true;
+      }, 300);
+    },
+
+    inputChangeAction(val) {
+      console.log("change");
+      this.$emit("inputChangeAction", val);
+    },
+
+    /**
+     * 本地模糊查询
+     */
+    filterNode(value, data) {
+      if (!value) return true;
+      return data.label.indexOf(value) !== -1;
+    },
+
+    /**
+     * 随机生成 formId
+     */
+    getRefName() {
+      return `ref_${new Date().getTime()}_${Math.random()
+        .toString()
+        .slice(5, 13)}`;
+    },
+
+    /**
+     * 远程查询
+     */
+    remoteMethod() {
+      const that = this;
+      //担保的需求化，默认是树，搜索时为列表
+      // if(this.filterText){
+      //   this.params.resultType = 0
+      // }else{
+      //   this.params.resultType = 1
+      // }
+      console.log(this.params, "this.params");
+      axios({
+        url: that.url,
+        method: "get",
+        loading: false,
+        params: {
+          [that.queryKey]: that.filterText,
+          ...that.params,
+        },
+      })
+        .then((data) => {
+          that.treeData = data.list ? data.list : data;
+          if (that.showNull) {
+            let map = {
+              treeNo: "",
+              unitName: "全部单位",
+              unitNo: "",
+            };
+            // eslint-disable-next-line no-debugger
+            // debugger;
+            that.treeData.unshift(map);
+          }
+          that.$nextTick(() => {
+            that.$forceUpdate();
+          });
+        })
+        .catch(() => {});
+    },
+
+    /**
+     * 树节点点击事件
+     *  回调参数： data, node, tree
+     */
+    treeNodeClick(data) {
+      if (!this.showCheckbox) {
+        this.queryFlag = false;
+
+        const k = this.defaultProps.label || "label";
+
+        this.filterText = data[k];
+        this.unitNameText = data[k];
+        this.placeholder = this.filterText;
+
+        this._value = data[this.nodeKey];
+
+        // 主动让input框失去交单
+        this.$refs[this.inputRefName].blur();
+        this.showPopoverFlag = false;
+        this.$emit("treeNodeClick", data);
+      }
+    },
+
+    /**
+     * 多选树 -- 只支持查询不支持回显
+     * 回调参数： data, node, tree
+     */
+    handleCheckChange(checkedNodes, checkedKeys) {
+      console.log(checkedNodes, checkedKeys);
+
+      this.queryFlag = false;
+
+      // const k = this.defaultProps.label || "label";
+      // this.filterText = checkedKeys[k];
+      let newText = [];
+      checkedKeys["checkedNodes"].forEach((item) => {
+        checkedKeys["checkedKeys"].forEach((el) => {
+          if (item.unitNo === el) {
+            newText.push(item.unitName);
+          }
+        });
+      });
+
+      this.filterText = newText.toString();
+
+      this.placeholder = this.filterText;
+
+      this._value = checkedKeys["checkedKeys"];
+
+      this.$emit("checkedClick", checkedKeys);
+    },
+
+    /**
+     * input框失去焦点
+     */
+    clearFilterText() {
+      if (!this.showCheckbox) {
+        this.filterText = this.placeholder;
+        this.placeholder = null;
+        this.showPopoverFlag = false;
+        this.$nextTick(() => {
+          this.$forceUpdate();
+        });
+        this.$emit("filterText", this.filterText);
+        console.log(
+          "TreeSelect关闭弹框...",
+          this.showPopoverFlag,
+          this.filterText
+        );
+      }
+    },
+
+    /**
+     * input聚焦时
+     */
+    inputFocus() {
+      if (!this.showCheckbox) {
+        this.timeTemp && clearTimeout(this.timeTemp);
+        this.windowEventFlag = false;
+        this.placeholder = this.filterText;
+        this.filterText = "";
+        this.queryFlag = true;
+        console.log("input focus...");
+        this.remoteMethod();
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.form-create-dropdown-tree {
+  display: inline-block;
+  .select-tree-el-popover {
+    overflow-y: auto;
+  }
+  .temp-input {
+    width: 100%;
+    border: 1px solid #ccc;
+    padding-right: 10px;
+    margin-right: 15px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    height: 29px;
+    > span {
+      padding-left: 10px;
+      width: calc(100% - 10px);
+      height: 100%;
+      overflow: hidden;
+      display: flex;
+      align-items: center;
+    }
+  }
+  .el-popper {
+    min-width: 264px;
+  }
+
+  .el-tree-node__content:hover {
+    background-color: rgba(0, 122, 255, 0.1) !important;
+  }
+}
+</style>