npmapps 1.0.25 → 1.0.26

package/app/src/views/element/components/shift/index.vue

@@ -0,0 +1,147 @@
+<template>
+  <div class="attendanceCycle" v-loading="loading">
+    <div class="header">
+      <div class="left">
+        <el-button size="mini" type="primary" @click="onSave">选择</el-button>
+      </div>
+      <div class="right">
+     
+      </div>
+    </div>
+    <el-table
+      size="mini"
+      :data="tableData"
+      style="width: 100%"
+      border
+      @row-click="handleRowClick"
+    >
+      <!-- 单选框列 -->
+      <el-table-column width="50">
+        <template slot-scope="scope">
+          <el-radio
+            :value="currentRow.monthId"
+            :label="scope.row.monthId"
+          >&nbsp;</el-radio>
+        </template>
+      </el-table-column>
+      <el-table-column prop="monthId" label="表集合"></el-table-column>
+      <el-table-column prop="monthName" label="名称"></el-table-column>
+      <el-table-column prop="monthName" label="休息班"></el-table-column>
+      <el-table-column prop="monthName" label="班段信息"></el-table-column>
+      <el-table-column prop="monthName" label="班次类型"></el-table-column>
+      <el-table-column prop="monthName" label="状态"></el-table-column>
+    </el-table>
+     <div class="footer">
+      <div class="left">
+        
+      </div>
+      <div class="right">
+        <el-pagination
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page="currentPage"
+          :page-sizes="[10, 20, 30, 100]"
+          :page-size="10"
+          layout="total, sizes, prev, pager, next"
+          :total="total"
+        >
+        </el-pagination>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  getOpenAttendanceCycleMonthListApi,
+} from "../../employeeSchedulingManagement/data.js";
+
+export default {
+  // 班次
+  props: {
+    close: {
+      type: Function,
+      default: () => {},
+    },
+    setData:{
+        type: Function,
+        default: () => {},
+    },
+  },
+
+  data() {
+    return {
+      loading: false,
+      tableData: [],
+      year: "2025",
+      options: [],
+      currentRow: {
+        monthId: "",
+      }, // 当前选中的行
+      currentPage: 1,
+      total: 11110,
+    };
+  },
+  mounted() {
+    this.loading = false;
+    this.getTableData();
+  },
+  methods: {
+    getTableData() {
+      this.loading = true;
+      getOpenAttendanceCycleMonthListApi(this.year).then((res) => {
+        this.tableData = res;
+        console.log(res, "res");
+        this.loading = false;
+      });
+    },
+   
+    yearChange() {
+      this.getTableData();
+    },
+    handleRowClick(row) {
+      this.currentRow = row; // 点击行时更新选中状态
+    },
+    onSave() {
+        if (this.currentRow.monthId === "") {
+            return this.$message.error("请选择");
+        }
+      this.close();
+      this.setData(this.currentRow);
+    },
+    handleSizeChange(val) {
+      this.currentPage = 1;
+      this.getTableData();
+    },
+    handleCurrentChange(val) {
+      this.currentPage = val;
+      this.getTableData();
+    },
+    
+
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.attendanceCycle {
+  .header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 10px;
+    .left {
+      display: flex;
+      align-items: center;
+    }
+    .right {
+      display: flex;
+      align-items: center;
+    }
+  }
+  .footer {
+    display: flex;
+    justify-content: space-between;
+  }
+}
+</style>

package/app/src/views/element/components/shiftRotationSystem/index.vue

@@ -0,0 +1,147 @@
+<template>
+  <div class="attendanceCycle" v-loading="loading">
+    <div class="header">
+      <div class="left">
+        <el-button size="mini" type="primary" @click="onSave">选择</el-button>
+      </div>
+      <div class="right">
+     
+      </div>
+    </div>
+    <el-table
+      size="mini"
+      :data="tableData"
+      style="width: 100%"
+      border
+      @row-click="handleRowClick"
+    >
+      <!-- 单选框列 -->
+      <el-table-column width="50">
+        <template slot-scope="scope">
+          <el-radio
+            :value="currentRow.monthId"
+            :label="scope.row.monthId"
+          >&nbsp;</el-radio>
+        </template>
+      </el-table-column>
+      <el-table-column prop="monthId" label="表集合"></el-table-column>
+      <el-table-column prop="monthId" label="编码"></el-table-column>
+      <el-table-column prop="monthName" label="名称"></el-table-column>
+      <el-table-column prop="monthName" label="是否按周期排班"></el-table-column>
+      <el-table-column prop="monthName" label="周期"></el-table-column>
+      <el-table-column prop="monthName" label="生效日期"></el-table-column>
+    </el-table>
+     <div class="footer">
+      <div class="left">
+        
+      </div>
+      <div class="right">
+        <el-pagination
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page="currentPage"
+          :page-sizes="[10, 20, 30, 100]"
+          :page-size="10"
+          layout="total, sizes, prev, pager, next"
+          :total="total"
+        >
+        </el-pagination>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  getOpenAttendanceCycleMonthListApi,
+} from "../../employeeSchedulingManagement/data.js";
+
+export default {
+  // 轮班制度
+  props: {
+    close: {
+      type: Function,
+      default: () => {},
+    },
+    setData:{
+        type: Function,
+        default: () => {},
+    },
+  },
+
+  data() {
+    return {
+      loading: false,
+      tableData: [],
+      year: "2025",
+      options: [],
+      currentRow: {
+        monthId: "",
+      }, // 当前选中的行
+      currentPage: 1,
+      total: 11110,
+    };
+  },
+  mounted() {
+    this.loading = false;
+    this.getTableData();
+  },
+  methods: {
+    getTableData() {
+      this.loading = true;
+      getOpenAttendanceCycleMonthListApi(this.year).then((res) => {
+        this.tableData = res;
+        console.log(res, "res");
+        this.loading = false;
+      });
+    },
+   
+    yearChange() {
+      this.getTableData();
+    },
+    handleRowClick(row) {
+      this.currentRow = row; // 点击行时更新选中状态
+    },
+    onSave() {
+        if (this.currentRow.monthId === "") {
+            return this.$message.error("请选择");
+        }
+      this.close();
+      this.setData(this.currentRow);
+    },
+    handleSizeChange(val) {
+      this.currentPage = 1;
+      this.getTableData();
+    },
+    handleCurrentChange(val) {
+      this.currentPage = val;
+      this.getTableData();
+    },
+    
+
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.attendanceCycle {
+  .header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 10px;
+    .left {
+      display: flex;
+      align-items: center;
+    }
+    .right {
+      display: flex;
+      align-items: center;
+    }
+  }
+  .footer {
+    display: flex;
+    justify-content: space-between;
+  }
+}
+</style>

package/app/src/views/element/elTableJsx/columnManagement.vue

@@ -0,0 +1,340 @@
+<script>
+import _ from "lodash";
+import vuedraggable from "vuedraggable";
+export default {
+  components: {
+    vuedraggable,
+  },
+  name: "columnManagement",
+  props: {
+    columns: {
+      type: Array,
+      default: () => [],
+    },
+    setColumns: {
+      type: Function,
+      default: () => {},
+    },
+  },
+  data() {
+    return {
+      fixLeftColumn: [],
+      fixRightColumn: [],
+      notFixedColumn: [],
+    };
+  },
+  watch: {
+    columns: {
+      handler(newVal) {
+        this.fixLeftColumn = [];
+        this.fixRightColumn = [];
+        this.notFixedColumn = [];
+        const column = _.cloneDeep(newVal);
+        column.forEach((c) => {
+          if (c.props && c.props.fixed === "left") {
+            this.fixLeftColumn.push(c);
+          } else if (c.props && c.props.fixed === "right") {
+            this.fixRightColumn.push(c);
+          } else {
+            this.notFixedColumn.push(c);
+          }
+        });
+      },
+      deep: true,
+      immediate: true,
+    },
+  },
+  methods: {
+    dialogClose() {
+      this.fixLeftColumn.forEach((c) => {
+        c.props = {
+          ...c.props,
+          fixed: "left",
+        };
+      });
+      this.fixRightColumn.forEach((c) => {
+        c.props = {
+          ...c.props,
+          fixed: "right",
+        };
+      });
+      this.notFixedColumn.forEach((c) => {
+        c.props = {
+          ...c.props,
+          fixed: false,
+        };
+      });
+      const list = [
+        ...this.fixLeftColumn,
+        ...this.notFixedColumn,
+        ...this.fixRightColumn,
+      ];
+      this.setColumns(_.cloneDeep(list));
+    },
+    onCheckboxChange() {
+      this.dialogClose();
+    },
+    onStart(e) {
+    },
+    onEnd(e) {
+      // 检查固定列中的元素，如果有children且不为空，则移动到notFixedColumn
+      const checkAndMoveToNotFixed = (column, _, array) => {
+        if (column.children && column.children.length > 0) {
+          // 从原数组中移除
+          const sourceArray = array;
+          const index = sourceArray.findIndex(
+            (item) => item.key === column.key
+          );
+          if (index > -1) {
+            const [movedColumn] = sourceArray.splice(index, 1);
+            // 移除fixed属性
+            movedColumn.props = { ...movedColumn.props, fixed: false };
+            // 添加到notFixedColumn
+            this.notFixedColumn.unshift(movedColumn);
+            this.$message.warning(
+              "该列包含子列，不可以固定列，已移动到不固定列"
+            );
+          }
+        }
+      };
+      // 检查左固定列和右固定列
+      this.fixLeftColumn.forEach(checkAndMoveToNotFixed);
+      this.fixRightColumn.forEach(checkAndMoveToNotFixed);
+      this.dialogClose();
+    },
+  },
+  render() {
+    return (
+      <div class="columnManagement">
+        <div class="fixLeft fixed">
+          <div class="title">
+            固定在左侧{" "}
+            <el-tooltip class="item" effect="dark" placement="right">
+              <template slot="content">
+                <div>
+                  固定在左侧的列将始终显示在表格最左边，
+                  <br />
+                  适合放置重要的标识信息。
+                  <br />
+                  注意：包含子列的列项不可固定
+                </div>
+              </template>
+              <i class="el-icon-warning" style="margin-left: 10px" />
+            </el-tooltip>
+          </div>
+          <div
+            class={{
+              noDraggableItem: !this.fixLeftColumn.length,
+              content: true,
+            }}
+          >
+            <vuedraggable
+              value={this.fixLeftColumn}
+              onInput={(v) => (this.fixLeftColumn = v)}
+              group="fixed"
+              ghost-class="ghost"
+              animation={300}
+              onEnd={this.onEnd}
+              onStart={this.onStart}
+              ghostClass="ghost"
+              chosenClass="chosen"
+            >
+              {this.fixLeftColumn.map((c) => {
+                return (
+                  <div key={c.key} class="draggableItem">
+                    <i class="el-icon-rank" style="margin: 4px 10px" />
+                    <el-checkbox
+                      onChange={() => this.onCheckboxChange()}
+                      value={!c.hide}
+                      onInput={(v) => {
+                        this.$set(c, "hide", !v);
+                      }}
+                    >
+                      {c.label}
+                    </el-checkbox>
+                  </div>
+                );
+              })}{" "}
+            </vuedraggable>
+          </div>
+        </div>
+        <div class="notFixed fixed">
+          <div class="title">
+            不固定{" "}
+            <el-tooltip class="item" effect="dark" placement="right">
+              <template slot="content">
+                <div>
+                  不固定的列可以自由拖动排序，
+                  <br />
+                  并且可以拖入左侧或右侧固定区域。
+                  <br />
+                  当表格内容过多需要横向滚动时，这些列会随之滚动
+                </div>
+              </template>
+              <i class="el-icon-warning" style="margin-left: 10px" />
+            </el-tooltip>
+          </div>
+          <div
+            class={{
+              noDraggableItem: !this.notFixedColumn.length,
+              content: true,
+            }}
+          >
+            <vuedraggable
+              value={this.notFixedColumn}
+              onInput={(v) => (this.notFixedColumn = v)}
+              group="fixed"
+              ghost-class="ghost"
+              animation={300}
+              onEnd={this.onEnd}
+              onStart={this.onStart}
+              ghostClass="ghost"
+              chosenClass="chosen"
+            >
+              {this.notFixedColumn.map((c) => {
+                return (
+                  <div key={c.key} class="draggableItem">
+                    <i class="el-icon-rank" style="margin: 4px 10px;" />
+
+                    <el-checkbox
+                      onChange={() => this.onCheckboxChange()}
+                      value={!c.hide}
+                      onInput={(v) => {
+                        this.$set(c, "hide", !v);
+                      }}
+                    >
+                      {c.label}
+                    </el-checkbox>
+
+                    {c.children && c.children.length > 0 && (
+                      <el-tooltip class="item" effect="dark" placement="right">
+                        <template slot="content">
+                          <div>注意：包含子列的列项不可固定</div>
+                        </template>
+                        <i class="el-icon-warning" style="margin-left: 10px" />
+                      </el-tooltip>
+                    )}
+                  </div>
+                );
+              })}
+            </vuedraggable>
+          </div>
+        </div>
+        <div class="fixRight fixed">
+          <div class="title">
+            固定在右侧{" "}
+            <el-tooltip class="item" effect="dark" placement="right">
+              <template slot="content">
+                <div>
+                  固定在右侧的列将始终显示在表格最右边，
+                  <br />
+                  适合放置操作按钮等控制元素。
+                  <br />
+                  注意：包含子列的列项不可固定
+                </div>
+              </template>
+              <i class="el-icon-warning" style="margin-left: 10px" />
+            </el-tooltip>
+          </div>
+          <div
+            class={{
+              noDraggableItem: !this.fixRightColumn.length,
+              content: true,
+            }}
+          >
+            <vuedraggable
+              value={this.fixRightColumn}
+              onInput={(v) => (this.fixRightColumn = v)}
+              group="fixed"
+              ghost-class="ghost"
+              animation={300}
+              onEnd={this.onEnd}
+              onStart={this.onStart}
+              ghostClass="ghost"
+              chosenClass="chosen"
+            >
+              {this.fixRightColumn.map((c) => {
+                return (
+                  <div key={c.key} class="draggableItem">
+                    <i class="el-icon-rank" style="margin: 4px 10px" />
+
+                    <el-checkbox
+                      onChange={() => this.onCheckboxChange()}
+                      value={!c.hide}
+                      onInput={(v) => {
+                        c.hide = !v;
+                      }}
+                    >
+                      {c.label}
+                    </el-checkbox>
+                  </div>
+                );
+              })}
+            </vuedraggable>
+          </div>
+        </div>
+      </div>
+    );
+  },
+};
+</script>
+
+<style lang="less">
+.columnManagement {
+  .fixed {
+    .title {
+      font-size: 14px;
+      font-weight: 700;
+      margin-bottom: 10px;
+      display: flex;
+      align-items: center;
+      &::before {
+        content: "";
+        width: 4px;
+        height: 16px;
+        background: #409eff;
+        margin-right: 8px;
+        border-radius: 2px;
+      }
+    }
+    .content {
+      overflow-y: auto;
+      border: 1px solid #e6e6e6;
+      border-radius: 4px;
+      padding: 10px;
+      margin-bottom: 10px;
+      .draggableItem {
+        display: flex;
+        align-items: center;
+        margin-bottom: 5px;
+        .el-checkbox {
+          margin-right: 10px;
+        }
+        &:hover {
+          background-color: #f5f5f5;
+        }
+      }
+      .chosen {
+        background-color: #f5f5f5;
+      }
+      .ghost {
+        opacity: 0.4;
+        background-color: #ccc;
+      }
+    }
+    .noDraggableItem {
+      position: relative;
+      height: 30px;
+      &::before {
+        content: "暂无列，可拖动列到这";
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        color: #999;
+        font-size: 14px;
+      }
+    }
+  }
+}
+</style>

package/app/src/views/element/elTableJsx/dialogInput.vue

@@ -0,0 +1,71 @@
+<template>
+    <div>
+        <el-form-item :prop="`data[${slotData.$index}].${slotData.column.key}`" :rules="slotData.input.rules">
+            <el-input ref="inputRef" v-show="slotData.row[`${slotData.column.key}ShowByTableJsx`]" type="text"
+                v-model="inputValue" :size="slotData.vm.tableSize" @blur="onBlur" />
+        </el-form-item>
+        <div v-show="!slotData.row[`${slotData.column.key}ShowByTableJsx`]" @click="showInput">
+            <span v-show="slotData.row[slotData.column.key]">{{
+                slotData.row[slotData.column.key]
+                }}</span>
+            <i v-show="!slotData.row[slotData.column.key]" class="el-icon-edit"></i>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        slotData: {
+            type: Object,
+            default: () => ({}),
+        },
+    },
+    data() {
+        return {
+            inputValue: "",
+        };
+    },
+    watch: {
+        slotData: {
+            handler(val) {
+                console.log(val, "valwatch");
+
+                this.inputValue = this.slotData.row[this.slotData.column.key];
+            },
+        },
+    },
+
+    methods: {
+        showInput() {
+            this.$set(
+                this.slotData.row,
+                `${this.slotData.column.key}ShowByTableJsx`,
+                true
+            );
+            this.$nextTick(() => {
+                this.$refs.inputRef.focus();
+            });
+        },
+        onBlur() {
+            if (this.inputValue == '') return
+
+            const { input, $index, column, vm, row } = this.slotData;
+            this.$set(row, column.key, this.inputValue);
+            if (input.rules && input.rules.length > 0) {
+                vm.$refs.elForm.validateField(
+                    `data[${$index}].${column.key}`,
+                    (err) => {
+                        if (!err) {
+                            this.$set(row, `${column.key}ShowByTableJsx`, false);
+                        }
+                    }
+                );
+            }
+            else {
+                this.$set(row, `${column.key}ShowByTableJsx`, false);
+            }
+        },
+    },
+};
+</script>