fl-web-component 0.1.0 → 0.1.1

package/packages/components/com-page/index.vue

@@ -0,0 +1,101 @@
+<template>
+	<el-pagination
+		:small="comTable.size == 'mini'"
+		:disabled="defaultPage.disabled"
+		:hide-on-single-page="defaultPage.single"
+		:pager-count="defaultPage.pagerCount"
+		:current-page.sync="defaultPage.currentPage"
+		:background="defaultPage.background"
+		:page-size="defaultPage.pageSize"
+		:page-sizes="defaultPage.pageSizes"
+		@size-change="sizeChange"
+		@prev-click="prevClick"
+		@next-click="nextClick"
+		@current-change="currentChange"
+		:layout="defaultPage.layout"
+		:total="defaultPage.total"
+	></el-pagination>
+</template>
+
+<script>
+import base from "../../utils/base.js";
+
+export default {
+  name: "comTable",
+  inject: ["comTable"],
+  mixins: [base()],
+  data() {
+    return {
+      defaultPage: {
+        single: false,
+        total: 0, // 总页数
+        pagerCount: 7, //超过多少条隐藏
+        currentPage: 1, // 当前页数
+        pageSize: 10, // 每页显示多少条
+        pageSizes: [10, 20, 30, 40, 50, 100],
+        layout: "total, sizes, prev, pager, next, jumper",
+        background: true, // 背景颜色
+      },
+    };
+  },
+  created() {
+    this.pageInit();
+    this.comTable.$emit("on-load", this.defaultPage);
+  },
+  watch: {
+    "comTable.page": {
+      handler() {
+        this.pageInit();
+      },
+      deep: true,
+    },
+  },
+  computed: {
+    pageFlag() {
+      return this.defaultPage.total != 0;
+    },
+  },
+  methods: {
+    pageInit() {
+      this.defaultPage = Object.assign(this.defaultPage, this.comTable.page);
+      this.updateValue();
+    },
+    updateValue() {
+      console.log("updateValue defaultPage", this.defaultPage);
+      this.comTable.$emit("update:page", this.defaultPage);
+    },
+    //下一页事件
+    nextClick(val) {
+      console.log("nextClick", val);
+      this.comTable.$emit("next-click", val);
+    },
+    //上一页事件
+    prevClick(val) {
+      console.log("prevClick", val);
+      this.comTable.$emit("prev-click", val);
+    },
+    // 页大小回调
+    sizeChange(val) {
+      this.defaultPage.currentPage = 1;
+      this.defaultPage.pageSize = val;
+      this.updateValue();
+      console.log("sizeChange", val);
+      this.comTable.$emit("on-load", this.defaultPage);
+      this.comTable.$emit("size-change", val);
+    },
+    // 页码回调
+    currentChange(val) {
+      this.updateValue();
+      this.comTable.$emit("on-load", this.defaultPage);
+      this.comTable.$emit("current-change", val);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.el-pagination {
+  text-align: right;
+  padding: 15px 10px 15px 20px !important;
+}
+</style>

package/packages/components/com-selectTree/Readme.md

@@ -0,0 +1,17 @@
+<!-- 使用方法 样例 -->
+<SelectTree
+  ref="SelectTree"
+  :filterable="true"
+  :value-key="`deptId`"
+  :select-key="`deptId`"
+  :value-name="`deptName`"
+  :tree-data="item.optionArr"
+  :tree-props="{
+    id: 'deptId',
+    label: 'deptName',
+    children: 'children'
+  }"
+  :tree-node-key="`deptId`"
+  :placeholder-title="`请选择${item.label}`"
+  @nodeClickTree="nodeClickTree"
+/>

package/packages/components/com-selectTree/index.vue

@@ -0,0 +1,238 @@
+<!--
+ * @Author: fengyang9326@163.com
+ * @Date: 2024-05-13 10:36:07
+ * @LastEditors: fengyang9326@163.com
+ * @LastEditTime: 2024-05-20 09:38:24
+ * @FilePath: /web/components/com-selectTree/index.vue
+ * @Description: 树结构下拉框
+-->
+<template>
+  <el-select
+    ref="Select"
+    v-model="formData"
+    :value-key="selectKey"
+    :placeholder="placeholderTitle"
+    size="medium"
+    :clearable="clearable"
+    :disabled="disabled"
+    :filterable="filterable"
+    :filter-method="filterMethod"
+    style="width: 100%;"
+    @clear="clear"
+    @visible-change="visibleChange"
+    @focus="setMinWidth"
+  >
+    <el-option
+      ref="option"
+      class="select_tree_option"
+      :value="formData.id"
+      :label="formData.name"
+      :style="{'width': minWidth + 2 + 'px'}"
+    >
+      <el-tree
+        ref="Tree"
+        class="select_tree_tree"
+        :node-key="treeNodeKey"
+        :current-node-key="currentSelect"
+        :data="treeData"
+        :props="treeProps"
+        :highlight-current="true"
+        :expand-on-click-node="false"
+        :default-expanded-keys="parentList"
+        :filter-node-method="filterNode"
+        @node-click="handleNodeClick"
+      >
+        <span slot-scope="{ node }" class="custom-tree-node">
+          <span :title="node.label" class="title_tree">{{ node.label }}</span>
+        </span>
+      </el-tree>
+    </el-option>
+  </el-select>
+</template>
+<script>
+
+export default {
+  name: 'SelectTree',
+  props: {
+    // v-model绑定
+    // 作为 el-select value 唯一标识的键名，绑定值为对象类型时必填
+    selectKey: {
+      type: String,
+      default: 'id'
+    },
+    valueKey: {
+      type: String,
+      default: 'id'
+    },
+    valueName: {
+      type: String,
+      default: 'name'
+    },
+    // 树形的数据
+    treeData: {
+      type: Array,
+      default: () => ([])
+    },
+    // 下拉框默认提示
+    placeholderTitle: {
+      type: String,
+      default: '请选择'
+    },
+    // 每个树节点用来作为唯一标识的属性
+    treeNodeKey: {
+      type: [String, Number],
+      default: 'id'
+    },
+    // 是否可搜
+    filterable: {
+      type: Boolean,
+      default: false
+    },
+    // 是否禁用
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    // 是否可清空input
+    clearable: {
+      type: Boolean,
+      default: false
+    },
+    // tree的props配置
+    treeProps: {
+      type: Object,
+      default: () => ({})
+    },
+    // 弹窗标题
+    title: {
+      type: String,
+      default: '新建'
+    },
+    echoData: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      // 下拉框最小宽度样式
+      minWidth: undefined,
+      formData: {
+        id: '',
+        name: ''
+      },
+      parentList: [], // 树结构默认展开的节点的 key 的数组
+      filterFlag: false,
+      currentSelect: '' // 当前选中的节点
+    }
+  },
+  computed: {
+  },
+  created() {
+    if (this.echoData[this.selectKey]) {
+      this.parentList.push(this.echoData[this.selectKey])
+      this.$set(this, 'currentSelect', this.echoData[this.selectKey])
+      this.$set(this.formData, 'id', this.echoData[this.selectKey])
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.$refs.Tree.setCurrentKey(this.currentSelect)
+      const nodeTree = this.$refs.Tree.getCurrentNode()
+      if (nodeTree) {
+        this.$set(this.formData, 'name', nodeTree[this.valueName])
+      }
+      if (!nodeTree) this.$set(this.formData, 'id', '')
+    })
+  },
+  methods: {
+    /* 下拉框样式 无数据的情况下，给请选择提示设置最小宽度*/
+    setMinWidth(val) {
+      this.minWidth = val.srcElement.clientWidth
+    },
+    /* 树节点被点击时的回调 */
+    handleNodeClick(data) {
+      if (!data[this.valueKey]) return
+      const DataId = data[this.valueKey]
+      const DataName = data[this.valueName]
+      this.$set(this.formData, 'id', DataId)
+      this.$set(this.formData, 'name', DataName)
+      this.$set(this, 'currentSelect', data[this.valueKey])
+      this.$refs.Select.visible = false
+      // this.$emit('nodeClickTree', this.formData)
+      this.$emit('nodeClickTree', data)
+    },
+    /* 下拉框出现/隐藏时触发 */
+    visibleChange(e) {
+      if (e) {
+        const tree = this.$refs.Tree
+        this.filterFlag && tree.filter('')
+        this.filterFlag = false
+        let selectDom = null
+        selectDom = tree.$el.querySelector('.is-current')
+        setTimeout(() => {
+          this.$refs.Select.scrollToOption({ $el: selectDom })
+        }, 0)
+      }
+    },
+    clear() {
+      this.formData = {
+        id: '',
+        name: ''
+      }
+      this.$refs.Tree.setCurrentKey(null)
+      this.$emit('nodeClickTree', this.formData)
+    },
+    /* 自定义搜索方法 */
+    filterMethod(val) {
+      this.filterFlag = true
+      this.$refs.Tree.filter(val)
+    },
+    /* 对树节点进行筛选时执行的方法 */
+    filterNode(value, data) {
+      if (!value) return true
+      const label = this.treeProps.label || 'name'
+      return data[label].indexOf(value) !== -1
+    }
+  }
+}
+</script>
+<style lang="scss" scope>
+.el-select-dropdown {
+  padding: 5px 0;
+}
+.select_tree_option {
+  &.el-select-dropdown__item {
+    height: auto;
+    line-height: 1;
+    padding: 0;
+    background-color: #fff;
+  }
+}
+
+.select_tree_tree {
+  padding: 0px 0px;
+  font-weight: 400;
+}
+.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
+  background-color: #fff;
+  color: #1890ff;
+}
+.el-tree-node__content {
+  width: 100%!important;
+  height: 34px!important;
+  line-height: 34px!important;
+  overflow: hidden;
+  &:hover{
+    background-color: transparent!important;
+  }
+}
+::v-deep .select_tree_tree .el-tree-node .el-tree-node__content .custom-tree-node {
+  display: inline-block;
+  vertical-align: middle;
+  width: calc(100% - 50px)!important;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+</style>

package/packages/components/com-table/column-default.vue

@@ -0,0 +1,76 @@
+<template>
+  <div>
+    <component :is="comTable.tableColumnName" width="1px"></component>
+    <!-- 选择框 -->
+    <component
+      :is="comTable.tableColumnName"
+      v-if="comTable.tableOption.selection"
+      :fixed="
+        vaildData(comTable.tableOption.selectionFixed, config.selectionFixed)
+      "
+      type="selection"
+      key="selection"
+      :selectable="comTable.tableOption.selectable"
+      align="center"
+    ></component>
+    <!-- 序号 -->
+    <component
+      :is="comTable.tableColumnName"
+      v-if="vaildData(comTable.tableOption.index)"
+      :fixed="vaildData(comTable.tableOption.indexFixed, config.indexFixed)"
+      :label="comTable.tableOption.indexLabel || config.indexLabel"
+      type="index"
+      key="index"
+      :index="indexMethod"
+      align="center"
+    >
+    </component>
+  </div>
+</template>
+
+<script>
+import config from "./config.js";
+import base from "../../utils/base.js";
+
+export default {
+  name: "comTable",
+  mixins: [base()],
+  components: {},
+  data() {
+    return {
+      config: config,
+    };
+  },
+  inject: ["comTable"],
+  mounted() {
+    this.setSort();
+  },
+  methods: {
+    indexMethod(index) {
+      return (
+        index +
+        1 +
+        ((this.comTable.page.currentPage || 1) - 1) *
+          (this.comTable.page.pageSize || 10)
+      );
+    },
+    setSort() {
+      this.rowDrop();
+    },
+    rowDrop() {
+      if (!this.comTable.$refs.table) return;
+      const el = this.comTable.$refs.table.$el.querySelectorAll(
+        this.config.dropRowClass
+      )[0];
+      this.comTable.tableDrop("row", el, (evt) => {
+        const oldIndex = evt.oldIndex;
+        const newIndex = evt.newIndex;
+        const targetRow = this.comTable.list.splice(oldIndex, 1)[0];
+        this.comTable.list.splice(newIndex, 0, targetRow);
+        this.comTable.$emit("sortable-change", oldIndex, newIndex);
+        this.comTable.refreshTable(() => this.rowDrop());
+      });
+    },
+  },
+};
+</script>

package/packages/components/com-table/column-dynamic.vue

@@ -0,0 +1,40 @@
+<template>
+  <component
+    :is="comTable.tableColumnName"
+    :prop="columnOption.prop"
+    :key="columnOption.prop"
+    :label="columnOption.label"
+    :show-overflow-tooltip="columnOption.overHidden"
+    :align="columnOption.align || comTable.tableOption.align"
+  >
+    <template v-for="column in columnOption.children">
+      <column-dynamic
+        v-if="column.children && column.children.length > 0"
+        :key="column.label"
+        :columnOption="column"
+      >
+      </column-dynamic>
+      <column-slot
+        v-else
+        :column="column"
+        :column-option="columnOption.children"
+      >
+      </column-slot>
+    </template>
+  </component>
+</template>
+
+<script>
+import columnSlot from "./column-slot";
+export default {
+  name: "column-dynamic",
+  components: {
+    columnSlot,
+  },
+  inject: ["comTable"],
+  props: {
+    columnOption: Object,
+  },
+  created() {},
+};
+</script>

package/packages/components/com-table/column-menu.vue

@@ -0,0 +1,71 @@
+<template>
+  <!-- 操作栏 -->
+  <component
+    :is="comTable.tableColumnName"
+    prop="menu"
+    key="menu"
+    :fixed="vaildData(comTable.tableOption.menuFixed, config.menuFixed)"
+    v-if="vaildData(comTable.tableOption.menu, config.menu)"
+    :label="comTable.tableOption.menuTitle || '操作'"
+    :align="comTable.tableOption.menuAlign || config.menuAlign"
+    :header-align="comTable.tableOption.menuHeaderAlign || config.menuHeaderAlign"
+    :width="comTable.tableOption.menuWidth || config.menuWidth"
+  >
+    <template slot="header" slot-scope="scope">
+      <span>{{ comTable.tableOption.menuTitle || "操作" }}</span>
+    </template>
+    <template slot-scope="{ row, column: tableColumn, $index }">
+      <div>
+        <template>
+          <el-button
+            :type="`text`"
+            :icon="`el-icon-edit`"
+            :size="comTable.isMediumSize"
+            :disabled="comTable.btnDisabled"
+            @click.stop="comTable.rowEdit(row, $index)"
+            v-if="vaildData(comTable.tableOption.editBtn, config.editBtn)"
+          >
+            {{ "编 辑" }}
+          </el-button>
+          <el-button
+            :type="`text`"
+            :icon="`el-icon-delete`"
+            :size="comTable.isMediumSize"
+            :disabled="comTable.btnDisabled"
+            @click.stop="comTable.rowDel(row, $index)"
+            v-if="vaildData(comTable.tableOption.delBtn, config.delBtn)"
+          >
+            {{ "删 除" }}
+          </el-button>
+        </template>
+        <slot
+          name="menu"
+          :row="row"
+          :column="tableColumn"
+          :type="`text`"
+          :disabled="comTable.btnDisabled"
+          :size="comTable.isMediumSize"
+          :index="$index"
+        ></slot>
+      </div>
+    </template>
+  </component>
+</template>
+
+<script>
+import config from "./config.js";
+import base from "../../utils/base.js";
+
+export default {
+  name: "comTable",
+  mixins: [base()],
+  components: {},
+  data() {
+    return {
+      config: config,
+    };
+  },
+  inject: ["comTable"],
+  mounted: function () {},
+};
+</script>

package/packages/components/com-table/column-slot.vue

@@ -0,0 +1,53 @@
+<template>
+  <component
+    :is="comTable.tableColumnName"
+    :key="column.prop"
+    :prop="column.prop"
+    :label="column.label"
+    :column-key="column.prop"
+    :show-overflow-tooltip="column.showOverflowTooltip || column.overHidden"
+    :align="column.align || comTable.tableOption.align"
+    :header-align="column.headerAlign || comTable.tableOption.headerAlign"
+    :fixed="vaildData(column.fixed, config.columnFixed)"
+  >
+    <template slot-scope="{ row, column: tableColumn, $index }">
+      <slot
+        :row="row"
+        :tableColumn="tableColumn"
+        :column="column"
+        :index="$index"
+        :size="comTable.isMediumSize"
+        :label="row[column.prop]"
+        :name="column.prop"
+        v-if="comTable.$scopedSlots[column.prop]"
+      ></slot>
+      <template v-else>
+        <span v-text="row[column.prop]"></span>
+      </template>
+    </template>
+  </component>
+</template>
+
+<script>
+import base from "../../utils/base.js";
+import config from "./config.js";
+
+export default {
+  name: "column-slot",
+  mixins: [base()],
+  inject: ["comTable"],
+  data: function () {
+    return {
+      config: config,
+    };
+  },
+  components: {},
+  props: {
+    column: Object,
+  },
+  created() {},
+  methods: {},
+};
+</script>
+
+<style></style>

package/packages/components/com-table/column.vue

@@ -0,0 +1,49 @@
+<template>
+  <div>
+    <slot name="header"></slot>
+    <!-- 动态列 -->
+    <template v-for="(column, index) in columnOption">
+      <column-dynamic
+        v-if="column.children && column.children.length > 0"
+        :columnOption="column"
+        :key="column.label"
+      >
+      </column-dynamic>
+      <column-slot 
+        v-else 
+        :column="column" 
+        :column-option="columnOption"
+      >
+        <template
+          v-for="item in comTable.mainSlot"
+          slot-scope="scope"
+          :slot="item"
+        >
+          <slot v-bind="scope" :name="item"></slot>
+        </template>
+      </column-slot>
+    </template>
+    <slot name="footer"></slot>
+  </div>
+</template>
+
+<script>
+import columnDynamic from "./column-dynamic";
+import columnSlot from "./column-slot";
+export default {
+  name: "comTable",
+  data() {
+    return {};
+  },
+  components: {
+    columnSlot,
+    columnDynamic,
+  },
+  inject: ["comTable"],
+  props: {
+    columnOption: Array,
+  },
+  computed: {},
+  methods: {},
+};
+</script>

package/packages/components/com-table/config.js

@@ -0,0 +1,21 @@
+// 配置文件
+export default {
+  menuWidth: 220,
+  menuFixed: "right",
+  menuAlign: "center",
+  menuHeaderAlign: "center",
+  // 显隐
+  editBtn: true,
+  delBtn: true,
+  selectClearBtn: true,
+  tip: true,
+  menu: true,
+  indexLabel: "#",
+  indexFixed: "left",
+  selectionFixed: "left",
+  columnFixed: null,
+  width: "100%",
+  dropRowClass: ".el-table__body-wrapper > table > tbody",
+  showOverflowTooltip: true,
+  rowKey: "id",
+};