| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362 |
- <!DOCTYPE html>
- <html lang="zh-CN">
- <head>
- <meta charset="UTF-8" />
- <meta
- name="viewport"
- content="width=device-width, initial-scale=1.0, user-scalable=no"
- />
- <title>基本信息</title>
- <script src="/js/mp_base/base.js"></script>
- <style>
- [v-cloak] {
- display: none !important;
- }
- #app {
- background: #f5f5f5;
- min-height: 100vh;
- padding-top: 8px;
- box-sizing: border-box;
- }
- /* 新增班级点名考勤记录页纯转圈加载态 by xu 2026-03-06 */
- .loading {
- min-height: 40vh;
- display: flex;
- align-items: center;
- justify-content: center;
- padding: 32px 16px;
- }
- .loading-spinner {
- width: 30px;
- height: 30px;
- border: 3px solid #e8f3ed;
- border-top-color: #40ac6d;
- border-radius: 50%;
- animation: page-spin 0.9s linear infinite;
- }
- @keyframes page-spin {
- from {
- transform: rotate(0deg);
- }
- to {
- transform: rotate(360deg);
- }
- }
- .error {
- text-align: center;
- padding: 50px;
- color: #ff4d4f;
- }
- .section-card {
- margin: 0 8px 10px;
- background: #ffffff;
- border-radius: 8px;
- overflow: hidden;
- }
- .form {
- width: 100%;
- border-collapse: collapse;
- }
- .form th {
- width: 140px;
- max-width: 170px;
- }
- .desc-text {
- white-space: pre-wrap;
- line-height: 1.6;
- }
- </style>
- </head>
- <body>
- <div id="app" v-cloak>
- <!-- 新增班级点名考勤记录页纯转圈加载态 by xu 2026-03-06 -->
- <div v-if="loading" class="loading">
- <div class="loading-spinner"></div>
- </div>
- <div v-else-if="error" class="error">{{ error }}</div>
- <!-- 新增班级点名考勤记录基本信息回显页 by xu 2026-03-06 -->
- <div v-else class="content-div">
- <div class="section-card">
- <table class="form">
- <tr>
- <th>名称</th>
- <td>{{ displayData.mc || formData.mc || '-' }}</td>
- </tr>
- <tr>
- <th>人员</th>
- <td>{{ displayData.rymc || formData.ryid || '-' }}</td>
- </tr>
- <tr>
- <th>开始时间</th>
- <td>{{ displayData.kssj || '-' }}</td>
- </tr>
- <tr>
- <th>结束时间</th>
- <td>{{ displayData.jssj || '-' }}</td>
- </tr>
- <tr>
- <th>考勤类别</th>
- <td>{{ displayData.kqlb || formData.kqlbm || '-' }}</td>
- </tr>
- <tr>
- <th>班级</th>
- <td>{{ displayData.bjmc || formData.bjid || '-' }}</td>
- </tr>
- <tr>
- <th>描述</th>
- <td class="desc-text">{{ displayData.mswj || formData.mswj || formData.ms || '-' }}</td>
- </tr>
- </table>
- </div>
- </div>
- </div>
- <script>
- window.SS.ready(function () {
- window.SS.dom.initializeFormApp({
- el: "#app",
- data() {
- return {
- pageParams: {},
- loading: false,
- error: "",
- formData: {},
- displayData: {
- mc: "",
- rymc: "",
- kssj: "",
- jssj: "",
- kqlb: "",
- bjmc: "",
- mswj: "",
- },
- };
- },
- async mounted() {
- this.pageParams = this.getUrlParams();
- await this.loadData();
- },
- methods: {
- getUrlParams() {
- const params = {};
- const urlSearchParams = new URLSearchParams(
- window.location.search
- );
- for (const [key, value] of urlSearchParams) {
- params[key] = decodeURIComponent(value);
- }
- return params;
- },
- parseParamObject(paramStr) {
- if (!paramStr) return {};
- try {
- return JSON.parse(paramStr);
- } catch (err) {
- try {
- const fixed = paramStr.replace(
- /([,{]\s*)([a-zA-Z_][a-zA-Z0-9_]*)\s*:/g,
- '$1"$2":'
- );
- return JSON.parse(fixed);
- } catch (err2) {
- console.error("解析param失败:", err2);
- return {};
- }
- }
- },
- async loadData() {
- // 加载班级点名考勤记录详情数据并回显 by xu 2026-03-06
- const service = this.pageParams.service;
- if (!service) {
- this.error = "缺少service参数";
- return;
- }
- this.loading = true;
- this.error = "";
- try {
- const paramObj = this.parseParamObject(this.pageParams.param);
- const requestData = {
- ...paramObj,
- };
- const appendIfMissing = (targetKey, sourceKeys) => {
- if (
- requestData[targetKey] !== undefined &&
- requestData[targetKey] !== null &&
- requestData[targetKey] !== ""
- ) {
- return;
- }
- for (let i = 0; i < sourceKeys.length; i += 1) {
- const sourceKey = sourceKeys[i];
- const value = this.pageParams[sourceKey];
- if (value !== undefined && value !== null && value !== "") {
- requestData[targetKey] = value;
- return;
- }
- }
- };
- appendIfMissing("sqid", ["sqid"]);
- appendIfMissing("shid", ["shid"]);
- appendIfMissing("ssObjName", ["ssObjName", "ssobjname"]);
- appendIfMissing("ssObjId", ["ssObjId", "ssobjid"]);
- appendIfMissing("bdlbm", ["bdlbm"]);
- appendIfMissing("dataType", ["dataType", "datatype"]);
- appendIfMissing("encode_shid", ["encode_shid"]);
- appendIfMissing("jdmc", ["jdmc"]);
- appendIfMissing("ssToken", ["ssToken"]);
- const response = await request.post(
- `/service?ssServ=${service}&ssDest=data`,
- requestData,
- { loading: false, formData: true }
- );
- const raw = this.pickKqjlData(response?.data);
- if (!raw) {
- this.error = "未获取到考勤记录数据";
- return;
- }
- this.formData = raw;
- await this.buildDisplayData(raw);
- } catch (error) {
- console.error("加载班级点名考勤记录基本信息失败:", error);
- this.error = "加载失败:" + (error.message || "未知错误");
- } finally {
- this.loading = false;
- }
- },
- pickKqjlData(data) {
- if (!data) return null;
- if (data.bjdmKqjl) return data.bjdmKqjl;
- if (data.kqjl) return data.kqjl;
- if (data.bjdmkqjl) return data.bjdmkqjl;
- if (Array.isArray(data.objectList) && data.objectList.length > 0) {
- return (
- data.objectList[0]?.bjdmKqjl ||
- data.objectList[0]?.kqjl ||
- data.objectList[0]
- );
- }
- if (Array.isArray(data.data) && data.data.length > 0) {
- return data.data[0]?.bjdmKqjl || data.data[0]?.kqjl || data.data[0];
- }
- if (typeof data === "object") return data;
- return null;
- },
- async buildDisplayData(raw) {
- // 格式化班级点名考勤记录显示字段 by xu 2026-03-06
- this.displayData = {
- mc: raw.mc || raw.name || "",
- rymc: await this.translateDict(
- "ry",
- raw.ryid,
- raw.rymc || raw.xm || raw.name
- ),
- kssj: this.formatDate(raw.kssj),
- jssj: this.formatDate(raw.jssj),
- kqlb: await this.translateKqlb(raw.kqlbm, raw.kqlb),
- bjmc: await this.translateDict(
- "bj",
- raw.bjid,
- raw.bjmc || raw.bjname
- ),
- mswj: this.normalizeDesc(raw.mswj || raw.ms || raw.sqms || ""),
- };
- },
- formatDate(value) {
- if (!value) return "";
- if (
- window.H5FieldFormatter &&
- typeof window.H5FieldFormatter.formatDate === "function"
- ) {
- return window.H5FieldFormatter.formatDate(
- value,
- "YYYY-MM-DD HH:mm:ss"
- );
- }
- return value;
- },
- normalizeDesc(value) {
- if (!value) return "";
- return String(value)
- .replace(/<br\s*\/?\>/gi, "\n")
- .replace(/<[^>]+>/g, "")
- .trim();
- },
- async translateDict(dictName, value, fallbackName) {
- if (fallbackName) return fallbackName;
- if (value === undefined || value === null || value === "") {
- return "";
- }
- try {
- if (typeof window.getDictOptions === "function") {
- const options = await window.getDictOptions(dictName);
- const target = (options || []).find(
- (item) => String(item.v) === String(value)
- );
- if (target && target.n) return target.n;
- }
- } catch (error) {
- console.error(`${dictName} 字典翻译失败:`, error);
- }
- return String(value);
- },
- async translateKqlb(kqlbm, fallbackName) {
- if (fallbackName) return fallbackName;
- if (kqlbm === undefined || kqlbm === null || kqlbm === "") {
- return "";
- }
- const code = String(kqlbm);
- const localMap = {
- 81: "出勤",
- 1: "缺勤",
- 41: "病假",
- 31: "事假",
- };
- try {
- if (typeof window.getDictOptions === "function") {
- const dictNames = ["kqlb", "kqlbm", "kqzt"];
- for (let i = 0; i < dictNames.length; i += 1) {
- const options = await window.getDictOptions(dictNames[i]);
- const target = (options || []).find(
- (item) => String(item.v) === code
- );
- if (target && target.n) return target.n;
- }
- }
- } catch (error) {
- console.error("考勤类别翻译失败:", error);
- }
- return localMap[code] || code;
- },
- },
- });
- });
- </script>
- </body>
- </html>
|