@bytenew/bn-bus-ui 1.1.463 → 1.1.464

package/packages/BnImportTemplate/components/TemplateFieldsConfig.vue

@@ -1,401 +0,0 @@
-<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

@@ -1,297 +0,0 @@
-<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>