@bytenew/bn-bus-ui 1.1.462 → 1.1.463

package/packages/BnImportTemplate/components/TemplateFieldsConfig.vue

@@ -0,0 +1,401 @@
+<template>
+  <div class="BnImportTemplate-fields" :class="{ 'is-no-key': importType !== 1 && importType !== 3 }">
+    <el-input
+      v-model="filterText"
+      class="BnImportTemplate-field-filter"
+      clearable
+      placeholder="请输入字段名称"
+    />
+    <div class="BnImportTemplate-fields-content">
+      <div class="BnImportTemplate-fields-header">
+        <div class="BnImportTemplate-field-name">字段名称</div>
+        <div class="BnImportTemplate-field-show">
+          <BnCheck v-model="showAll" label="模板显示" @change="checkAllShow" />
+          <el-tooltip content="不显示的字段，导入时会忽略该字段" placement="top">
+            <span class="bnUIcon bnUIcon-question BnImportTemplate-help"></span>
+          </el-tooltip>
+        </div>
+        <div class="BnImportTemplate-field-other">
+          <BnCheck v-model="checkMustAll" label="必填" @change="checkAllCheckMust" />
+        </div>
+        <div v-show="importType === 1 || importType === 3" class="BnImportTemplate-field-other">
+          <BnCheck v-model="keyAll" label="主键" @change="checkAllKey" />
+          <el-tooltip
+            content="导入创建时以所选主键进行工单合并；导入更新时以主键ID进行工单合并；子表单、子订单不可选为主键"
+            placement="top"
+          >
+            <span class="bnUIcon bnUIcon-question BnImportTemplate-help"></span>
+          </el-tooltip>
+        </div>
+      </div>
+      <el-scrollbar class="BnImportTemplate-fields-scrollbar">
+        <div class="BnImportTemplate-fields-content-view">
+          <div v-for="item in columns" :key="item.columnId">
+            <div
+              v-show="(!filterText || item.columnName.indexOf(filterText) !== -1) && !(importType === 1 && item.columnId === 0)"
+              class="BnImportTemplate-field-row"
+            >
+              <div
+                class="BnImportTemplate-field-name"
+                :class="{ 'is-leaf': item.behaviorType !== 13 }"
+                @click="showOrCloseChildList(item)"
+              >
+                <span v-if="item.behaviorType === 13" class="BnImportTemplate-expand">
+                  {{ item.childOpen ? '▾' : '▸' }}
+                </span>
+                {{ item.columnName }}
+              </div>
+              <div class="BnImportTemplate-field-show">
+                <BnCheck
+                  v-model="item.show"
+                  :disabled="importType !== 1 && item.columnId === 0"
+                  @change="itemCheckChange(item, 'show')"
+                />
+              </div>
+              <div class="BnImportTemplate-field-other">
+                <BnCheck
+                  v-model="item.checkMust"
+                  :disabled="importType !== 1 && item.columnId === 0"
+                  @change="itemCheckChange(item, 'checkMust')"
+                />
+              </div>
+              <div v-show="importType === 1 || importType === 3" class="BnImportTemplate-field-other">
+                <BnCheck
+                  v-model="item.key"
+                  :disabled="item.behaviorType === 13 || (importType !== 1 && item.columnId === 0) || !mergeCells"
+                  @change="itemCheckChange(item, 'key')"
+                />
+              </div>
+            </div>
+            <div v-if="item.childColumns && item.childOpen">
+              <div
+                v-for="childItem in item.childColumns"
+                :key="childItem.columnId"
+                class="BnImportTemplate-field-row is-child"
+              >
+                <div class="BnImportTemplate-field-name">{{ childItem.columnName }}</div>
+                <div class="BnImportTemplate-field-show">
+                  <BnCheck v-model="childItem.show" @change="itemCheckChange(childItem, 'show')" />
+                </div>
+                <div class="BnImportTemplate-field-other">
+                  <BnCheck v-model="childItem.checkMust" @change="itemCheckChange(childItem, 'checkMust')" />
+                </div>
+                <div v-show="importType === 1 || importType === 3" class="BnImportTemplate-field-other">
+                  <BnCheck v-model="childItem.key" disabled />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </el-scrollbar>
+    </div>
+  </div>
+</template>
+
+<script>
+// 字段配置区只负责渲染字段树和收集用户操作。
+// “模板显示/必填/主键”的父子联动规则在父组件中处理，避免这里同时承担复杂业务状态计算。
+export default {
+  name: "TemplateFieldsConfig",
+  props: {
+    // 父组件维护的字段配置树，包含普通字段和子表单 childColumns。
+    columns: {
+      type: Array,
+      default() {
+        return [];
+      },
+    },
+    // 字段名称过滤关键字，对应顶部搜索框。
+    filterVar: {
+      type: String,
+      default: "",
+    },
+    // “模板显示”表头复选框状态。
+    allShow: {
+      type: Boolean,
+      default: false,
+    },
+    // “必填”表头复选框状态。
+    allCheckMust: {
+      type: Boolean,
+      default: false,
+    },
+    // “主键”表头复选框状态。
+    allKey: {
+      type: Boolean,
+      default: false,
+    },
+    // 导入方式：1 新增、2 更新、3 更新和新增；用于控制主键ID和主键列可编辑状态。
+    importType: {
+      type: Number,
+      default: 1,
+    },
+    // 是否开启多行合并导入；关闭时主键列不可勾选。
+    mergeCells: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: [
+    "update:filterVar",
+    "update:allShow",
+    "update:allCheckMust",
+    "update:allKey",
+    "checkAllShow",
+    "checkAllCheckMust",
+    "checkAllKey",
+    "itemCheckChange",
+    "toggleChild",
+  ],
+  computed: {
+    /**
+     * 字段过滤关键字的 v-model 代理，输入框变化时同步给父组件。
+     *
+     * @return 当前字段过滤关键字。
+     */
+    filterText: {
+      get() {
+        return this.filterVar;
+      },
+      set(val) {
+        this.$emit("update:filterVar", val);
+      },
+    },
+    /**
+     * “模板显示”表头全选状态代理，真实批量逻辑由父组件执行。
+     *
+     * @return 当前“模板显示”表头是否全选。
+     */
+    showAll: {
+      get() {
+        return this.allShow;
+      },
+      set(val) {
+        this.$emit("update:allShow", val);
+      },
+    },
+    /**
+     * “必填校验”表头全选状态代理，真实批量逻辑由父组件执行。
+     *
+     * @return 当前“必填校验”表头是否全选。
+     */
+    checkMustAll: {
+      get() {
+        return this.allCheckMust;
+      },
+      set(val) {
+        this.$emit("update:allCheckMust", val);
+      },
+    },
+    /**
+     * “相同合并主键”表头全选状态代理，真实批量逻辑由父组件执行。
+     *
+     * @return 当前“相同合并主键”表头是否全选。
+     */
+    keyAll: {
+      get() {
+        return this.allKey;
+      },
+      set(val) {
+        this.$emit("update:allKey", val);
+      },
+    },
+  },
+  methods: {
+    /**
+     * 通知父组件批量切换所有字段的“模板显示”状态。
+     *
+     * @return 无返回值。
+     */
+    checkAllShow() {
+      this.$emit("checkAllShow");
+    },
+    /**
+     * 通知父组件批量切换所有字段的“必填校验”状态。
+     *
+     * @return 无返回值。
+     */
+    checkAllCheckMust() {
+      this.$emit("checkAllCheckMust");
+    },
+    /**
+     * 通知父组件批量切换所有可选字段的“相同合并主键”状态。
+     *
+     * @return 无返回值。
+     */
+    checkAllKey() {
+      this.$emit("checkAllKey");
+    },
+    /**
+     * 将单个字段的勾选变化转发给父组件处理父子联动和表头全选状态。
+     *
+     * @param item 当前发生勾选变化的字段配置项。
+     * @param type 勾选类型，可取 show、checkMust、key。
+     * @return 无返回值。
+     */
+    itemCheckChange(item, type) {
+      this.$emit("itemCheckChange", item, type);
+    },
+    /**
+     * 通知父组件展开或收起当前子表单字段列表。
+     *
+     * @param item 当前点击的字段配置项。
+     * @return 无返回值。
+     */
+    showOrCloseChildList(item) {
+      this.$emit("toggleChild", item);
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.BnImportTemplate {
+  &-fields {
+    --BnImportTemplate-fields-grid: minmax(220px, 1fr) 128px 128px 128px;
+
+    padding: 12px 14px 14px;
+    border: 1px solid #e6edf5;
+    border-radius: 6px;
+    background: linear-gradient(180deg, #fbfdff 0%, #ffffff 42%);
+    box-shadow: 0 8px 24px rgba(31, 45, 61, 0.06);
+
+    &.is-no-key {
+      --BnImportTemplate-fields-grid: minmax(220px, 1fr) 128px 128px;
+    }
+  }
+
+  &-field-filter {
+    max-width: 360px;
+    height: 32px;
+    margin-bottom: 16px;
+
+    :deep(.el-input__wrapper) {
+      border-radius: 3px;
+      box-shadow: 0 0 0 1px #dfe6ee inset;
+    }
+
+    :deep(.el-input__wrapper.is-focus) {
+      box-shadow: 0 0 0 1px #409eff inset;
+    }
+  }
+
+  &-fields-header,
+  &-field-row {
+    display: grid;
+    grid-template-columns: var(--BnImportTemplate-fields-grid);
+    align-items: center;
+    min-height: 40px;
+  }
+
+  &-fields-header {
+    border-bottom: 1px solid #dce7f3;
+    background: linear-gradient(180deg, #eef6ff 0%, #e7f0fb 100%);
+    color: #1f2d3d;
+    font-size: 13px;
+    font-weight: 600;
+    flex-shrink: 0;
+    padding-right: 14px;
+  }
+
+  &-fields-content {
+    display: flex;
+    flex-direction: column;
+    height: 400px;
+    border: 1px solid #dce7f3;
+    border-radius: 4px;
+    background: #fff;
+    overflow: hidden;
+  }
+
+  &-fields-scrollbar {
+    flex: 1;
+    min-height: 0;
+
+    :deep(.el-scrollbar__wrap) {
+      scrollbar-gutter: auto;
+      scrollbar-width: none;
+    }
+
+    :deep(.el-scrollbar__wrap::-webkit-scrollbar) {
+      display: none;
+      width: 0;
+      height: 0;
+    }
+
+    :deep(.el-scrollbar__view) {
+      min-width: 100%;
+    }
+  }
+
+  &-field-row {
+    min-height: 36px;
+    border-bottom: 1px solid #edf1f6;
+    color: #1f2d3d;
+    font-size: 13px;
+
+    &:hover {
+      background-color: #f7fbff;
+    }
+
+    &.is-child {
+      .BnImportTemplate-field-name {
+        padding-left: 42px;
+      }
+    }
+  }
+
+  &-field-name {
+    min-width: 0;
+    padding: 0 16px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    word-break: break-all;
+    white-space: nowrap;
+    cursor: pointer;
+
+    &.is-leaf {
+      padding-left: 16px;
+      cursor: auto;
+    }
+  }
+
+  &-field-show {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    min-width: 0;
+    padding-left: 24px;
+  }
+
+  &-field-other {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    min-width: 0;
+    padding-left: 24px;
+  }
+
+  &-expand {
+    display: inline-block;
+    width: 14px;
+  }
+
+  &-help {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    color: #8a97a8;
+    font-size: 16px;
+    cursor: help;
+
+    &:hover {
+      color: #409eff;
+    }
+  }
+}
+</style>

package/packages/BnImportTemplate/components/TemplateListDialog.vue

@@ -0,0 +1,297 @@
+<template>
+  <el-dialog
+      v-model="visible"
+      width="960px"
+      top="48px"
+      class="BnImportTemplate-dialog"
+      title="自定义导入模板管理"
+      destroy-on-close
+      :close-on-click-modal="false"
+  >
+    <div class="BnImportTemplate-list" v-loading="loading">
+      <div class="BnImportTemplate-list-top">
+        <div class="BnImportTemplate-list-title">
+          <span class="BnImportTemplate-list-dot"></span>
+          <span>模板列表</span>
+        </div>
+        <el-button class="BnImportTemplate-add-btn" type="primary" size="small" @click="$emit('addTemplate')">
+          新建
+        </el-button>
+      </div>
+      <el-table
+          :data="modalListData"
+          border
+          size="small"
+          max-height="360"
+          class="BnImportTemplate-table"
+          style="width: 100%"
+      >
+        <template #empty>
+          <div class="BnImportTemplate-empty">暂无数据</div>
+        </template>
+        <el-table-column prop="templateName" label="模板名称" min-width="180" show-overflow-tooltip/>
+        <el-table-column prop="sheetName" label="Sheet名称" min-width="160" show-overflow-tooltip/>
+        <el-table-column prop="gmtCreate" label="创建时间" width="170" show-overflow-tooltip/>
+        <el-table-column prop="gmtModify" label="更新时间" width="170" show-overflow-tooltip/>
+        <el-table-column label="操作" width="170" fixed="right">
+          <template #default="{ row }">
+            <div class="BnImportTemplate-actions">
+              <el-button link type="primary" @click="$emit('editTemplate', row)">编辑</el-button>
+              <el-button link type="primary" @click="$emit('copyTemplate', row)">复制</el-button>
+              <el-button link type="danger" @click="$emit('deleteTemplate', row)">删除</el-button>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="BnImportTemplate-pagination">
+        <el-pagination
+            v-model:current-page="currentPage"
+            v-model:page-size="currentPageSize"
+            :page-sizes="[10, 20, 40, 80]"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="total"
+            @current-change="$emit('pageChange')"
+            @size-change="$emit('sizeChange', 1)"
+        />
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+// 自定义模板管理列表只管理表格、分页和操作入口。
+// 列表查询、删除确认、复制刷新等业务状态都放在父组件，保证弹窗组件可复用且没有接口依赖。
+export default {
+  name: "TemplateListDialog",
+  props: {
+    // 父组件控制的模板管理弹窗显隐状态，对应 v-model。
+    modelValue: {
+      type: Boolean,
+      default: false,
+    },
+    // 当前页模板列表数据，由父组件请求后传入表格。
+    modalListData: {
+      type: Array,
+      default() {
+        return [];
+      },
+    },
+    // 列表加载状态，由父组件在请求模板列表时控制。
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+    // 当前页码，对应分页组件 current-page。
+    pageNum: {
+      type: Number,
+      default: 1,
+    },
+    // 每页条数，对应分页组件 page-size。
+    pageSize: {
+      type: Number,
+      default: 10,
+    },
+    // 后端返回的模板总数，用于分页总条数展示。
+    total: {
+      type: Number,
+      default: 0,
+    },
+  },
+  emits: [
+    "update:modelValue",
+    "update:pageNum",
+    "update:pageSize",
+    "addTemplate",
+    "editTemplate",
+    "copyTemplate",
+    "deleteTemplate",
+    "pageChange",
+    "sizeChange",
+  ],
+  computed: {
+    /**
+     * 管理弹窗显隐状态的 v-model 代理，变化时同步给父组件。
+     *
+     * @return 当前弹窗是否显示。
+     */
+    visible: {
+      get() {
+        return this.modelValue;
+      },
+      set(val) {
+        this.$emit("update:modelValue", val);
+      },
+    },
+    /**
+     * 分页当前页码的 v-model 代理，供父组件持有真实页码。
+     *
+     * @return 当前分页页码。
+     */
+    currentPage: {
+      get() {
+        return this.pageNum;
+      },
+      set(val) {
+        this.$emit("update:pageNum", val);
+      },
+    },
+    /**
+     * 分页每页条数的 v-model 代理，供父组件持有真实 pageSize。
+     *
+     * @return 当前每页条数。
+     */
+    currentPageSize: {
+      get() {
+        return this.pageSize;
+      },
+      set(val) {
+        this.$emit("update:pageSize", val);
+      },
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+:deep(.BnImportTemplate-dialog) {
+  border-radius: 2px;
+
+  .el-dialog__header {
+    display: flex;
+    align-items: center;
+    min-height: 48px;
+    padding: 0 18px;
+    margin-right: 0;
+    border-bottom: 1px solid #e5eaf3;
+  }
+
+  .el-dialog__title {
+    color: #1f2d3d;
+    font-size: 15px;
+    font-weight: 600;
+    line-height: 48px;
+  }
+
+  .el-dialog__headerbtn {
+    top: 0;
+    width: 48px;
+    height: 48px;
+  }
+
+  .el-dialog__body {
+    padding: 0;
+    background: #fff;
+  }
+}
+
+.BnImportTemplate {
+  &-list {
+    min-height: 430px;
+    padding: 12px;
+    background: #fff;
+  }
+
+  &-list-top {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 42px;
+    padding-bottom: 10px;
+    border-bottom: 1px solid #e5eaf3;
+  }
+
+  &-list-title {
+    display: inline-flex;
+    align-items: center;
+    color: #1f2d3d;
+    font-size: 13px;
+    font-weight: 600;
+  }
+
+  &-list-dot {
+    width: 3px;
+    height: 14px;
+    margin-right: 8px;
+    border-radius: 1px;
+    background: #409eff;
+  }
+
+  &-add-btn {
+    min-width: 60px;
+    height: 32px;
+    padding: 0 16px;
+    border-color: #409eff;
+    border-radius: 3px;
+    background: #409eff;
+    font-weight: 600;
+  }
+
+  &-empty {
+    padding: 52px 0;
+    color: #8a97a8;
+    font-size: 13px;
+  }
+
+  &-table {
+    margin-top: 10px;
+    color: #1f2d3d;
+
+    :deep(.el-table__header th) {
+      height: 36px;
+      padding: 0;
+      background: #edf4fc;
+      color: #1f2d3d;
+      font-size: 13px;
+      font-weight: 600;
+    }
+
+    :deep(.el-table__cell) {
+      height: 36px;
+      padding: 0 0;
+      border-color: #e4eaf2;
+    }
+
+    :deep(.cell) {
+      padding: 0 8px;
+      line-height: 36px;
+    }
+
+    :deep(.el-table__row:hover > td.el-table__cell) {
+      background: #f7fbff;
+    }
+  }
+
+  &-actions {
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+
+    :deep(.el-button) {
+      margin-left: 0;
+      padding: 0;
+      font-size: 12px;
+      font-weight: 500;
+    }
+  }
+
+  &-pagination {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 12px;
+    padding-top: 10px;
+    border-top: 1px solid #edf1f6;
+
+    :deep(.el-pagination) {
+      --el-pagination-button-width: 28px;
+      --el-pagination-button-height: 28px;
+      --el-pagination-font-size: 12px;
+      color: #3f4b5f;
+    }
+
+    :deep(.el-pagination .el-select .el-input) {
+      width: 100px;
+    }
+  }
+
+}
+</style>