@bytenew/bn-bus-ui 1.1.461 → 1.1.463

package/packages/BnImportTemplate/components/ImportTemplateTrigger.vue

@@ -0,0 +1,198 @@
+<template>
+  <div class="BnImportTemplate-trigger">
+    <el-popover
+      v-model:visible="visible"
+      placement="bottom-start"
+      :width="178"
+      trigger="click"
+      @show="$emit('showTemplatePopover')"
+    >
+      <template #reference>
+        <el-button
+          link
+          class="BnImportTemplate-setting-btn"
+          title="导入模板设置"
+        >
+          <slot name="icon">
+            <span class="bnUIcon bnUIcon-arrowDown w-font12"></span>
+          </slot>
+        </el-button>
+      </template>
+      <div class="BnImportTemplate-settings">
+        <div class="BnImportTemplate-settings-title">导入模板</div>
+        <div class="BnImportTemplate-settings-tempbox">
+          <div v-if="importTemplateList.length" class="BnImportTemplate-settings-temps">
+            <div
+              v-for="item in importTemplateList"
+              :key="item.id"
+              class="BnImportTemplate-settings-temps-item"
+              :title="item.templateName"
+              @click="selectTemplate(item)"
+            >
+              {{ item.templateName }}
+            </div>
+          </div>
+          <div v-else class="BnImportTemplate-settings-nodata">暂无模板</div>
+        </div>
+        <div
+          class="BnImportTemplate-settings-manage"
+          @click="$emit('openTemplateList')"
+        >
+          <span>自定义模板</span>
+          <span class="BnImportTemplate-settings-link">设置</span>
+        </div>
+      </div>
+    </el-popover>
+  </div>
+</template>
+
+<script>
+
+// 导入模板设置入口组件：点击 icon 打开 Popover，展示模板名称、触发模板导入并进入自定义模板管理。
+// 后续业务动作由父组件控制，这里只负责入口 UI 和事件分发。
+export default {
+  name: "ImportTemplateTrigger",
+  props: {
+    // 父组件传入的 Popover 显隐状态，对应 v-model。
+    modelValue: {
+      type: Boolean,
+      default: false,
+    },
+    // 父组件拉取到的自定义导入模板列表，点击模板名称后交给父组件打开批量导入弹框。
+    importTemplateList: {
+      type: Array,
+      default() {
+        return [];
+      },
+    },
+  },
+  emits: [
+    "update:modelValue",
+    "showTemplatePopover",
+    "openTemplateList",
+    "selectTemplate",
+  ],
+  computed: {
+    /**
+     * 入口 Popover 显隐状态的 v-model 代理，变化时同步给父组件。
+     *
+     * @return 当前入口 Popover 是否显示。
+     */
+    visible: {
+      get() {
+        return this.modelValue;
+      },
+      set(val) {
+        this.$emit("update:modelValue", val);
+      },
+    },
+  },
+  methods: {
+    /**
+     * 选择导入模板列表中的某一项，并通知父组件执行后续导入动作。
+     *
+     * @param template 当前点击的导入模板项。
+     * @return 无返回值。
+     */
+    selectTemplate(template) {
+      this.$emit("selectTemplate", template);
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.BnImportTemplate {
+  &-trigger {
+    display: inline-flex;
+    align-items: center;
+    height: 32px;
+  }
+
+  &-setting-btn {
+    height: 32px;
+    min-width: 32px;
+    padding: 0 6px;
+    color: #409eff;
+    border-radius: 3px;
+
+    &:hover {
+      background: #eef6ff;
+    }
+  }
+
+  &-settings {
+    width: 100%;
+    background: #fff;
+    border: 1px solid #e5eaf3;
+    box-shadow: 0 8px 24px rgba(31, 45, 61, 0.12);
+  }
+
+  &-settings-title {
+    height: 34px;
+    padding: 0 12px;
+    border-bottom: 1px solid #edf1f6;
+    color: #1f2d3d;
+    font-size: 13px;
+    font-weight: 600;
+    line-height: 34px;
+  }
+
+  &-settings-tempbox {
+    max-height: 188px;
+    overflow: auto;
+  }
+
+  &-settings-temps {
+    max-height: 360px;
+    overflow: auto;
+  }
+
+  &-settings-temps-item {
+    height: 36px;
+    line-height: 36px;
+    max-width: 178px;
+    padding: 0 12px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: #1f2d3d;
+    font-size: 13px;
+    cursor: pointer;
+
+    &:hover {
+      background: #f7fbff;
+    }
+  }
+
+  &-settings-nodata {
+    height: 100px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: rgba(0, 0, 0, 0.45);
+    font-size: 12px;
+  }
+
+  &-settings-manage {
+    height: 36px;
+    width: 100%;
+    padding: 0 12px;
+    border-top: 1px solid #edf1f6;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    color: #1f2d3d;
+    font-size: 13px;
+    cursor: pointer;
+
+    &:hover {
+      background: #f7fbff;
+    }
+  }
+
+  &-settings-link {
+    color: #409eff;
+  }
+}
+</style>

package/packages/BnImportTemplate/components/TemplateEditDialog.vue

@@ -0,0 +1,340 @@
+<template>
+  <el-dialog
+    v-model="visible"
+    width="840px"
+    top="50px"
+    class="BnImportTemplate-edit-dialog"
+    :title="modalDetail.id ? '编辑导入模板' : '新增导入模板'"
+    destroy-on-close
+    :close-on-click-modal="false"
+    @opened="$emit('opened')"
+    @closed="$emit('closed')"
+  >
+    <el-scrollbar max-height="calc(100vh - 220px)" class="BnImportTemplate-edit-scrollbar">
+      <div class="BnImportTemplate-edit">
+        <div class="BnImportTemplate-edit-item">
+          <div class="BnImportTemplate-edit-title"><span class="w-color-red">*</span>模板名称</div>
+          <div class="BnImportTemplate-edit-content">
+            <el-input
+              v-model="detail.templateName"
+              maxlength="15"
+              show-word-limit
+              placeholder="请输入"
+            />
+          </div>
+        </div>
+        <div v-if="false" class="BnImportTemplate-edit-item">
+          <div class="BnImportTemplate-edit-title">
+            设置sheet名称
+            <el-popover placement="bottom-start" trigger="hover" :width="360" popper-class="BnImportTemplate-sheet-popper">
+              <div class="BnImportTemplate-tips-box">
+                <p>设置了sheet名称后，Excel文件的Sheet名称需与设置的一致才可导入</p>
+                <img :src="sheetTipImg" class="BnImportTemplate-sheet-img" alt="Sheet 名称说明">
+              </div>
+              <template #reference>
+                <span class="bnUIcon bnUIcon-question BnImportTemplate-help"></span>
+              </template>
+            </el-popover>
+          </div>
+          <div class="BnImportTemplate-edit-content">
+            <el-input
+              v-model="detail.sheetName"
+              maxlength="31"
+              show-word-limit
+              placeholder="请输入"
+              @change="$emit('validateSheetName')"
+            />
+          </div>
+        </div>
+        <div class="BnImportTemplate-edit-item">
+          <div class="BnImportTemplate-edit-title">选择导入方式</div>
+          <div class="BnImportTemplate-edit-content">
+            <el-radio-group v-model="detail.type">
+              <el-radio :value="1">仅新增数据</el-radio>
+              <el-radio v-if="!isWorkflow" :value="2">仅更新数据</el-radio>
+              <!-- <el-radio v-if="!isWorkflow" :value="3">更新和新增数据</el-radio> -->
+            </el-radio-group>
+          </div>
+        </div>
+        <div class="BnImportTemplate-edit-item">
+          <BnCheck
+            v-model="detail.mergeCells"
+            label="导入未合并的多行数据( 组件：子表单、子订单)"
+          />
+        </div>
+        <div class="BnImportTemplate-edit-item is-fields">
+          <div class="BnImportTemplate-edit-title">工作表字段</div>
+          <div class="BnImportTemplate-edit-content">
+            <TemplateFieldsConfig
+              :columns="editColumnList"
+              :import-type="detail.type"
+              :merge-cells="detail.mergeCells"
+              :filter-var="filterVar"
+              :all-show="allShow"
+              :all-check-must="allCheckMust"
+              :all-key="allKey"
+              @update:filterVar="$emit('update:filterVar', $event)"
+              @update:allShow="$emit('update:allShow', $event)"
+              @update:allCheckMust="$emit('update:allCheckMust', $event)"
+              @update:allKey="$emit('update:allKey', $event)"
+              @checkAllShow="$emit('checkAllShow')"
+              @checkAllCheckMust="$emit('checkAllCheckMust')"
+              @checkAllKey="$emit('checkAllKey')"
+              @itemCheckChange="(item, type) => $emit('itemCheckChange', item, type)"
+              @toggleChild="$emit('toggleChild', $event)"
+            />
+          </div>
+        </div>
+      </div>
+    </el-scrollbar>
+    <template #footer>
+      <el-button @click="visible = false">取消</el-button>
+      <el-button type="primary" :loading="loading" @click="$emit('confirm')">确认</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+import TemplateFieldsConfig from "./TemplateFieldsConfig.vue";
+
+// 模板编辑弹窗承载表单布局，但不直接改接口数据。
+// modalDetail/editColumnList 由父组件传入并维护，字段联动通过事件回到父组件统一处理。
+export default {
+  name: "TemplateEditDialog",
+  components: {
+    TemplateFieldsConfig,
+  },
+  props: {
+    // 父组件控制的新增/编辑模板弹窗显隐状态，对应 v-model。
+    modelValue: {
+      type: Boolean,
+      default: false,
+    },
+    // 保存模板接口的 loading 状态，用于确认按钮加载态。
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+    // 当前编辑的模板详情；新增时是空模板，编辑时是后端详情。
+    modalDetail: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
+    // 当前模板的字段配置列表，字段显示/必填/主键等勾选状态都在该数组中维护。
+    editColumnList: {
+      type: Array,
+      default() {
+        return [];
+      },
+    },
+    // 字段名称过滤关键字，由父组件持有，传给字段配置区做本地过滤。
+    filterVar: {
+      type: String,
+      default: "",
+    },
+    // “模板显示”表头全选状态，由父组件根据字段列表同步计算。
+    allShow: {
+      type: Boolean,
+      default: false,
+    },
+    // “必填”表头全选状态，由父组件根据字段列表同步计算。
+    allCheckMust: {
+      type: Boolean,
+      default: false,
+    },
+    // “主键”表头全选状态，由父组件根据字段列表同步计算。
+    allKey: {
+      type: Boolean,
+      default: false,
+    },
+    // 是否工作流模板；工作流场景不展示更新类导入方式。
+    isWorkflow: {
+      type: Boolean,
+      default: false,
+    },
+    // Sheet 名称说明图资源，由父组件统一传入。
+    sheetTipImg: {
+      type: String,
+      default: "",
+    },
+  },
+  emits: [
+    "update:modelValue",
+    "update:filterVar",
+    "update:allShow",
+    "update:allCheckMust",
+    "update:allKey",
+    "opened",
+    "closed",
+    "validateSheetName",
+    "checkAllShow",
+    "checkAllCheckMust",
+    "checkAllKey",
+    "itemCheckChange",
+    "toggleChild",
+    "confirm",
+  ],
+  computed: {
+    /**
+     * 编辑弹窗显隐状态的 v-model 代理，变化时同步给父组件。
+     *
+     * @return 当前编辑弹窗是否显示。
+     */
+    visible: {
+      get() {
+        return this.modelValue;
+      },
+      set(val) {
+        this.$emit("update:modelValue", val);
+      },
+    },
+    /**
+     * 模板详情代理，模板内表单直接读写父组件传入的 modalDetail。
+     *
+     * @return 当前编辑中的模板详情对象。
+     */
+    detail() {
+      return this.modalDetail;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+:deep(.BnImportTemplate-edit-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: 18px 20px 8px;
+    background: #fff;
+  }
+
+  .el-dialog__footer {
+    padding: 12px 20px 16px;
+    border-top: 1px solid #edf1f6;
+  }
+}
+
+.BnImportTemplate {
+  &-edit-scrollbar {
+    max-height: calc(100vh - 220px);
+
+    :deep(.el-scrollbar__view) {
+      padding-right: 14px;
+    }
+  }
+
+  &-edit-item {
+    display: flex;
+    justify-content: flex-start;
+    margin-bottom: 16px;
+    color: #1f2d3d;
+
+    &.is-fields {
+      align-items: flex-start;
+    }
+  }
+
+  &-edit-title {
+    display: flex;
+    align-items: center;
+    width: 130px;
+    height: 32px;
+    flex: none;
+    color: #3f4b5f;
+    font-size: 13px;
+    font-weight: 500;
+
+  }
+
+  &-edit-content {
+    flex: 1;
+    min-width: 0;
+
+    > .el-input {
+      max-width: 360px;
+    }
+  }
+
+  &-help {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    margin-left: 6px;
+    color: #8a97a8;
+    font-size: 16px;
+    cursor: help;
+
+    &:hover {
+      color: #409eff;
+    }
+  }
+
+  &-tips-box {
+    max-width: 100%;
+    color: rgba(0, 0, 0, 0.65);
+    font-size: 12px;
+    background: #fff;
+    box-sizing: border-box;
+    overflow: hidden;
+
+    p {
+      margin: 0;
+      line-height: 1.5;
+    }
+  }
+
+  &-sheet-img {
+    display: block;
+    width: 100%;
+    max-width: 100%;
+    height: auto;
+    margin-top: 10px;
+  }
+
+  :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;
+  }
+
+  :deep(.el-radio__label) {
+    color: #3f4b5f;
+    font-size: 13px;
+  }
+}
+
+:global(.BnImportTemplate-sheet-popper) {
+  box-sizing: border-box;
+  overflow: hidden;
+}
+</style>