aiot-app/pages/hr/manage/regular-template-list.vue

<template>
  <view class="page-no-tab">
    <uni-nav-bar
      fixed="true"
      statusBar="true"
      left-icon="back"
      title="模板管理"
      background-color="#157A2C"
      color="#fff"
      @clickLeft="back"
    ></uni-nav-bar>

    <view class="tabs">
      <view
        v-for="item in TEMPLATE_STATUS_FILTERS"
        :key="item.value"
        class="tab press"
        :class="{ active: active === item.value }"
        @click="active = item.value"
      >{{ item.label }}<text class="tab-count">{{ countStatus(item.value) }}</text></view>
    </view>

    <view class="filters">
      <view class="search-row">
        <input
          v-model.trim="keyword"
          class="search-input"
          type="text"
          confirm-type="search"
          placeholder="模板名称 / 编码"
        />
        <text class="reset press" @click="resetFilters">重置</text>
      </view>
    </view>

    <view class="summary">
      <text>共 {{ list.length }} 个模板</text>
      <view class="summary-right">
        <text class="muted">{{ summaryTip }}</text>
        <text class="link press" @click="loadList">刷新</text>
      </view>
    </view>

    <view v-if="loading" class="empty">加载中…</view>

    <view v-else-if="list.length" class="list">
      <view
        v-for="item in list"
        :key="item.id"
        class="tpl-card card press"
        @click="openEdit(item)"
      >
        <view class="card-head">
          <view class="card-icon" :style="{ color: meta.color, background: meta.color + '18' }">模</view>
          <view class="card-title">
            <text>{{ item.templateName || '—' }}<text class="muted small"> {{ item.templateCode || '' }}</text></text>
            <text>分类 {{ item.categoryId || '—' }} · 当前版本 V{{ item.currentVersionNo || 1 }}</text>
          </view>
          <text class="status-tag" :class="item.enabled ? 'status-approved' : 'status-pending'">
            {{ item.templateStatusLabel }}
          </text>
        </view>

        <view v-if="item.remark" class="card-tip">{{ item.remark }}</view>

        <view class="card-meta">
          <view><text>变量个数</text><text>{{ variableCount(item) }}</text></view>
          <view><text>创建时间</text><text>{{ item.createTime || '—' }}</text></view>
        </view>

        <view class="card-actions">
          <text class="link" @click.stop="openPreview(item)">预览</text>
          <text class="link" @click.stop="openEdit(item)">编辑</text>
          <text class="link" @click.stop="openVersions(item)">版本历史</text>
          <text
            class="link"
            :class="{ danger: item.enabled }"
            @click.stop="onToggle(item)"
          >{{ item.enabled ? '停用' : '启用' }}</text>
        </view>
      </view>
    </view>

    <view v-else class="empty">
      <view>□</view>
      <text>{{ active === 'all' ? '暂无线上 Word 模板' : '该状态下暂无模板' }}</text>
    </view>

    <view class="bottom-action">
      <view class="primary-btn press" @click="openCreate">新增模板</view>
    </view>

    <view v-if="versionVisible" class="mask" @click="versionVisible = false">
      <view class="sheet" @click.stop>
        <view class="sheet-head">
          <text>{{ versionTitle }}</text>
          <text class="link" @click="versionVisible = false">关闭</text>
        </view>
        <view v-if="versionLoading" class="empty">加载中…</view>
        <scroll-view v-else scroll-y class="version-list">
          <view v-for="item in versions" :key="item.id" class="version-item">
            <text class="version-no">V{{ item.versionNo }}</text>
            <view class="version-main">
              <text>{{ item.changeRemark || '无变更说明' }}</text>
              <text class="muted small">{{ item.createTime || '—' }}</text>
            </view>
            <text class="muted small">{{ item.versionStatus || '' }}</text>
          </view>
          <view v-if="!versions.length" class="empty">暂无版本记录</view>
        </scroll-view>
      </view>
    </view>

    <view v-if="previewVisible" class="mask" @click="previewVisible = false">
      <view class="sheet" @click.stop>
        <view class="sheet-head">
          <text>{{ previewTitle }}</text>
          <text class="link" @click="previewVisible = false">关闭</text>
        </view>
        <view v-if="previewLoading" class="empty">加载中…</view>
        <scroll-view v-else scroll-y class="preview-body">
          <A4Preview :content="previewContent" />
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script>
import A4Preview from "@/pages/hr/components/A4Preview.vue";
import { applicationTypes } from "@/pages/hr/data/apply-config";
import {
  TEMPLATE_STATUS_FILTERS,
  loadOnlineTemplateList,
  loadOnlineTemplateDetail,
  loadOnlineTemplateVersions,
  toggleOnlineTemplate,
} from "@/api/hr/onlineDocument";

export default {
  components: { A4Preview },
  data() {
    return {
      TEMPLATE_STATUS_FILTERS,
      active: "all",
      keyword: "",
      records: [],
      loading: false,
      versionVisible: false,
      versionLoading: false,
      versionTitle: "版本历史",
      versions: [],
      previewVisible: false,
      previewLoading: false,
      previewTitle: "画布预览",
      previewContent: "",
    };
  },
  computed: {
    meta() {
      return applicationTypes.regular || { title: "转正申请", color: "#269a99" };
    },
    list() {
      const k = this.keyword.toLowerCase();
      return this.records
        .filter((row) => this.active === "all" || row.templateStatus === this.active)
        .filter((row) => {
          if (!this.keyword) return true;
          const text = `${row.templateName}${row.templateCode}`.toLowerCase();
          return text.indexOf(k) >= 0;
        });
    },
    summaryTip() {
      return "数据来自 /hr/online-documents/templates";
    },
  },
  onShow() {
    this.loadList();
  },
  methods: {
    countStatus(status) {
      if (status === "all") return this.records.length;
      return this.records.filter((row) => row.templateStatus === status).length;
    },
    variableCount(item) {
      try {
        const parsed = JSON.parse(item.variablesJson || "[]");
        return Array.isArray(parsed) ? parsed.length : 0;
      } catch (error) {
        return 0;
      }
    },
    async loadList() {
      this.loading = true;
      try {
        const page = await loadOnlineTemplateList({});
        this.records = (page && page.list) || [];
      } catch (error) {
        this.records = [];
        uni.showToast({ title: (error && error.message) || "模板列表加载失败", icon: "none" });
      } finally {
        this.loading = false;
      }
    },
    resetFilters() {
      this.keyword = "";
      this.active = "all";
    },
    openCreate() {
      uni.navigateTo({ url: "/pages/hr/manage/regular-template-form" });
    },
    openEdit(item) {
      if (!item || !item.id) return;
      uni.navigateTo({ url: `/pages/hr/manage/regular-template-form?id=${item.id}` });
    },
    onToggle(item) {
      const label = item.enabled ? "停用" : "启用";
      uni.showModal({
        title: `${label}模板`,
        content: `确认${label}「${item.templateName || item.templateCode}」？`,
        success: async (r) => {
          if (!r.confirm) return;
          uni.showLoading({ title: "处理中..." });
          try {
            await toggleOnlineTemplate(item);
            uni.hideLoading();
            uni.showToast({ title: `${label}成功`, icon: "success" });
            await this.loadList();
          } catch (error) {
            uni.hideLoading();
            uni.showToast({ title: (error && error.message) || `${label}失败`, icon: "none" });
          }
        },
      });
    },
    async openVersions(item) {
      this.versionTitle = `${item.templateName || "模板"} · 版本历史`;
      this.versionVisible = true;
      this.versionLoading = true;
      this.versions = [];
      try {
        this.versions = await loadOnlineTemplateVersions(item.id);
      } catch (error) {
        uni.showToast({ title: (error && error.message) || "版本历史加载失败", icon: "none" });
      } finally {
        this.versionLoading = false;
      }
    },
    async openPreview(item) {
      this.previewTitle = `${item.templateName || "模板"} · 画布预览`;
      this.previewContent = "";
      this.previewVisible = true;
      this.previewLoading = true;
      try {
        // 列表接口不回传长正文，预览需要按主键取详情
        const row = await loadOnlineTemplateDetail(item.id, item);
        this.previewContent = (row && row.documentContent) || "";
      } catch (error) {
        uni.showToast({ title: (error && error.message) || "正文加载失败", icon: "none" });
      } finally {
        this.previewLoading = false;
      }
    },
  },
};
</script>

<style scoped lang="scss">
@import "@/pages/hr/common-style.scss";

.page-no-tab {
  padding-bottom: 150rpx;
}
.tabs {
  display: flex;
  overflow-x: auto;
  background: #fff;
  border-bottom: 1rpx solid #edf0f2;
}
.tab {
  position: relative;
  flex: 1;
  min-width: 130rpx;
  height: 92rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6f7782;
  font-size: 26rpx;
  white-space: nowrap;
}
.tab.active {
  color: #157a2c;
  font-weight: 500;
}
.tab.active:after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 40rpx;
  height: 5rpx;
  border-radius: 3rpx;
  background: #157a2c;
}
.tab-count {
  margin-left: 8rpx;
  font-size: 22rpx;
  color: #a0a7b0;
}
.filters {
  padding: 20rpx 24rpx;
  background: #fff;
  border-bottom: 1rpx solid #edf0f2;
}
.search-row {
  display: flex;
  align-items: center;
  gap: 20rpx;
}
.search-input {
  flex: 1;
  min-width: 0;
  height: 72rpx;
  padding: 0 24rpx;
  border-radius: 12rpx;
  background: #f5f6f7;
  font-size: 26rpx;
}
.reset {
  flex-shrink: 0;
  color: #6f7782;
  font-size: 26rpx;
}
.summary {
  padding: 22rpx 28rpx 6rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 24rpx;
}
.summary-right {
  display: flex;
  align-items: center;
  gap: 20rpx;
  min-width: 0;
}
.summary-right .muted {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.list {
  padding: 18rpx 24rpx;
}
.tpl-card {
  margin-bottom: 20rpx;
  padding: 26rpx;
}
.card-head {
  display: flex;
  align-items: center;
}
.card-icon {
  width: 68rpx;
  height: 68rpx;
  border-radius: 15rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  font-weight: 600;
  flex-shrink: 0;
}
.card-title {
  flex: 1;
  min-width: 0;
  margin-left: 18rpx;
}
.card-title text {
  display: block;
  font-size: 29rpx;
  font-weight: 600;
}
.card-title text + text {
  margin-top: 8rpx;
  color: #a0a7b0;
  font-size: 21rpx;
  font-weight: 400;
}
.small {
  font-size: 21rpx;
  font-weight: 400;
}
.card-tip {
  margin-top: 16rpx;
  font-size: 23rpx;
  color: #6f7782;
}
.card-meta {
  display: flex;
  gap: 16rpx;
  margin-top: 18rpx;
}
.card-meta view {
  flex: 1;
  padding: 16rpx 18rpx;
  border-radius: 12rpx;
  background: #fafbfc;
}
.card-meta text {
  display: block;
  font-size: 22rpx;
  color: #a0a7b0;
}
.card-meta text + text {
  margin-top: 8rpx;
  color: #1f2329;
  font-size: 26rpx;
  font-weight: 500;
}
.card-actions {
  margin-top: 18rpx;
  padding-top: 18rpx;
  border-top: 1rpx solid #f2f3f5;
  display: flex;
  justify-content: flex-end;
  gap: 30rpx;
}
.link {
  color: #157a2c;
  font-size: 25rpx;
}
.link.danger {
  color: #ee4d4d;
}
.empty {
  padding-top: 180rpx;
  text-align: center;
  color: #a0a7b0;
}
.empty view {
  font-size: 80rpx;
  color: #cfd4da;
}
.empty text {
  display: block;
  margin-top: 20rpx;
}
.bottom-action {
  position: fixed;
  z-index: 10;
  left: 0;
  right: 0;
  bottom: 0;
  height: 120rpx;
  padding: 16rpx 24rpx;
  background: #fff;
  border-top: 1rpx solid #e8e9eb;
}
.bottom-action .primary-btn {
  height: 84rpx;
  font-size: 30rpx;
}
.mask {
  position: fixed;
  z-index: 20;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: flex-end;
}
.sheet {
  width: 100%;
  max-height: 70vh;
  padding: 28rpx 28rpx 40rpx;
  border-radius: 24rpx 24rpx 0 0;
  background: #fff;
  box-sizing: border-box;
}
.sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 30rpx;
  font-weight: 600;
  margin-bottom: 12rpx;
}
.version-list {
  max-height: 52vh;
}
.preview-body {
  max-height: 58vh;
}
.version-item {
  display: flex;
  align-items: center;
  gap: 20rpx;
  padding: 22rpx 0;
  border-bottom: 1rpx solid #f2f3f5;
}
.version-no {
  width: 68rpx;
  height: 44rpx;
  line-height: 44rpx;
  text-align: center;
  border-radius: 10rpx;
  background: #f0f8f2;
  color: #157a2c;
  font-size: 24rpx;
  flex-shrink: 0;
}
.version-main {
  flex: 1;
  min-width: 0;
}
.version-main text {
  display: block;
  font-size: 26rpx;
}
.version-main text + text {
  margin-top: 6rpx;
  color: #a0a7b0;
}
@media (min-width: 800px) {
  .bottom-action {
    max-width: 520px;
    left: 50%;
    transform: translateX(-50%);
  }
  .mask {
    justify-content: center;
  }
  .sheet {
    max-width: 520px;
    border-radius: 24rpx;
    margin-bottom: 40rpx;
  }
}
</style>