arms-app 1.0.64 → 1.0.66

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "arms-app",
-  "version": "1.0.64",
+  "version": "1.0.66",
   "description": "一个基于 Express 的 Web 应用1",
   "main": "index.js",
   "scripts": {

package/view/4.vue

@@ -1,6 +1,13 @@
 <template>
+  <!-- 人员信息表页面 -->
   <section class="person-table-page">
+    <!-- 页面标题 -->
     <h1>人员信息表</h1>
+    <!-- 工具栏：新增按钮 -->
+    <div class="toolbar">
+      <el-button type="primary" size="mini" @click="onOpenAdd">新增</el-button>
+    </div>
+    <!-- 人员信息表格 -->
     <el-table
       :data="rows"
       border
@@ -8,24 +15,196 @@
       size="small"
       style="width: 100%"
     >
-      <el-table-column type="index" label="序号" width="60" align="center" />
-      <el-table-column prop="name" label="人员姓名" min-width="100" />
-      <el-table-column label="性别" width="80">
+      <!-- 序号列 -->
+      <el-table-column type="index" label="序号" width="60" align="center" header-align="center" />
+      <!-- 基础信息列 -->
+      <el-table-column prop="name" label="人员姓名" min-width="100" align="center" header-align="center" />
+      <el-table-column label="性别" width="80" align="center" header-align="center">
         <template slot-scope="scope">
           {{ formatSex(scope.row.sex) }}
         </template>
       </el-table-column>
-      <el-table-column prop="postName" label="岗位" min-width="80" />
-      <el-table-column prop="happenPerio" label="入行日期" min-width="110" />
-      <el-table-column prop="telNo" label="联系方式" min-width="130" />
-      <el-table-column prop="dtlAddr" label="现居住地" min-width="120" />
-      <el-table-column prop="emergContactPersonName" label="紧急联系人" min-width="100" />
-      <el-table-column prop="emergContactPhoneNo" label="紧急联系方式" min-width="130" />
-      <el-table-column prop="birthDt" label="出生日期" min-width="110" />
-      <el-table-column prop="highestEduDegreeDesc" label="最高学历" min-width="90" />
-      <el-table-column prop="createTm" label="创建日期" min-width="110" />
-      <el-table-column prop="rmk" label="备注" min-width="120" />
+      <el-table-column prop="postName" label="岗位" min-width="80" align="center" header-align="center" />
+      <el-table-column prop="happenPerio" label="入行日期" min-width="110" align="center" header-align="center" />
+      <el-table-column prop="telNo" label="联系方式" min-width="130" align="center" header-align="center" />
+      <el-table-column prop="dtlAddr" label="现居住地" min-width="120" align="center" header-align="center" />
+      <el-table-column prop="emergContactPersonName" label="紧急联系人" min-width="100" align="center" header-align="center" />
+      <el-table-column prop="emergContactPhoneNo" label="紧急联系方式" min-width="130" align="center" header-align="center" />
+      <el-table-column prop="birthDt" label="出生日期" min-width="110" align="center" header-align="center" />
+      <el-table-column prop="最高EduDegreeDesc" label="最高学历" min-width="90" align="center" header-align="center" />
+      <el-table-column prop="createTm" label="创建日期" min-width="110" align="center" header-align="center" />
+      <el-table-column prop="rmk" label="备注" min-width="120" align="center" header-align="center" />
+      <!-- 操作列：详情、编辑、删除 -->
+      <el-table-column label="操作" width="200" align="center" header-align="center">
+        <template slot-scope="scope">
+          <el-button type="text" size="mini" @click="onView(scope.row)">详情</el-button>
+          <el-button type="text" size="mini" @click="onEdit(scope.row)">编辑</el-button>
+          <el-button type="text" size="mini" @click="onRemove(scope.row)">删除</el-button>
+        </template>
+      </el-table-column>
     </el-table>
+
+    <!-- 新增/编辑/查看 弹窗 -->
+    <el-dialog
+      :title="dialogTitle"
+      :visible.sync="dialogVisible"
+      width="720px"
+    >
+      <!-- 人员信息表单 -->
+      <el-form
+        ref="addForm"
+        :model="form"
+        :rules="rules"
+        label-width="90px"
+        size="small"
+      >
+        <!-- 第一行：姓名、岗位 -->
+        <el-row :gutter="16">
+          <el-col :span="12">
+            <el-form-item label="人员姓名" prop="name">
+              <el-input v-model="form.name" placeholder="请输入" :disabled="isView" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="岗位" prop="postName">
+              <el-select v-model="form.postName" placeholder="请选择" style="width: 100%" :disabled="isView">
+                <el-option
+                  v-for="opt in postOptions"
+                  :key="opt"
+                  :label="opt"
+                  :value="opt"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <!-- 第二行：入行日期、性别 -->
+        <el-row :gutter="16">
+          <el-col :span="12">
+            <el-form-item label="入行日期" prop="happenPerio">
+              <el-date-picker
+                v-model="form.happenPerio"
+                type="date"
+                placeholder="请选择"
+                value-format="yyyy-MM-dd"
+                style="width: 100%"
+                :disabled="isView"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="性别" prop="sex">
+              <el-select v-model="form.sex" placeholder="请选择" style="width: 100%" :disabled="isView">
+                <el-option label="男" value="1" />
+                <el-option label="女" value="2" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <!-- 第三行：联系方式、出生日期 -->
+        <el-row :gutter="16">
+          <el-col :span="12">
+            <el-form-item label="联系方式" prop="telNo">
+              <el-input v-model="form.telNo" placeholder="请输入" :disabled="isView" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="出生日期" prop="birthDt">
+              <el-date-picker
+                v-model="form.birthDt"
+                type="date"
+                placeholder="请选择"
+                value-format="yyyy-MM-dd"
+                style="width: 100%"
+                :disabled="isView"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <!-- 第四行：家庭住址 -->
+        <el-row :gutter="16">
+          <el-col :span="24">
+            <el-form-item label="家庭住址" prop="dtlAddr">
+              <el-input v-model="form.dtlAddr" placeholder="请输入" :disabled="isView" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <!-- 第五行：紧急联系人及联系方式 -->
+        <el-row :gutter="16">
+          <el-col :span="12">
+            <el-form-item label="紧急联系人" prop="emergContactPersonName">
+              <el-input v-model="form.emergContactPersonName" placeholder="请输入" :disabled="isView" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="紧急联系方式" prop="emergContactPhoneNo">
+              <el-input v-model="form.emergContactPhoneNo" placeholder="请输入" :disabled="isView" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <!-- 第六行：最高学历、备注 -->
+        <el-row :gutter="16">
+          <el-col :span="12">
+            <el-form-item label="最高学历" prop="highestEduDegreeDesc">
+              <el-select v-model="form.highestEduDegreeDesc" placeholder="请选择" style="width: 100%" :disabled="isView">
+                <el-option
+                  v-for="opt in eduOptions"
+                  :key="opt"
+                  :label="opt"
+                  :value="opt"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="备注" prop="rmk">
+              <el-input
+                v-model="form.rmk"
+                type="textarea"
+                :rows="3"
+                maxlength="100"
+                show-word-limit
+                placeholder="请输入"
+                :disabled="isView"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <!-- 第七行：附件上传 -->
+        <el-row :gutter="16">
+          <el-col :span="24">
+            <el-form-item label="选择文件">
+              <el-upload
+                class="upload-block"
+                drag
+                action="#"
+                :auto-upload="false"
+                :file-list="fileList"
+                :on-change="onFileChange"
+                :on-remove="onFileRemove"
+                :disabled="isView"
+              >
+                <el-button type="primary" plain>上传文件</el-button>
+                <div slot="tip" class="el-upload__tip">
+                  支持格式：png/jpg/docx/pdf，单个文件不能超过10mb
+                </div>
+              </el-upload>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <!-- 弹窗底部按钮 -->
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button
+          v-if="dialogMode !== 'view'"
+          type="primary"
+          @click="onSave"
+        >
+          保存
+        </el-button>
+      </span>
+    </el-dialog>
   </section>
 </template>
 
@@ -34,34 +213,246 @@ export default {
   name: "PersonTableView",
   data() {
     return {
+      // 表格数据源：人员列表
       rows: [
         {
+          // 唯一标识
           id: 3286648151643648,
+          // 人员姓名
           name: "李白",
+          // 性别：1-男，2-女
           sex: "1",
+          // 岗位名称
           postName: "保洁",
+          // 入行日期（yyyy-MM-dd）
           happenPerio: "2002-02-02",
+          // 联系电话
           telNo: "18966541247",
+          // 现居住地
           dtlAddr: "北京",
+          // 紧急联系人姓名
           emergContactPersonName: "王安石",
+          // 紧急联系人电话
           emergContactPhoneNo: "15466257489",
+          // 出生日期（yyyy-MM-dd）
           birthDt: "2000-02-02",
+          // 最高学历说明
           highestEduDegreeDesc: "硕士",
+          // 创建日期（yyyy-MM-dd）
           createTm: "2025-12-25",
+          // 备注信息
           rmk: "好人",
+          // 所属机构号
           beloOrgNO: "000291",
+          // 创建人工号
           creatorNo: "022171",
+          // 删除标识：0-正常 1-删除
           delFlag: "0",
         },
       ],
+      // 弹窗显隐状态
+      dialogVisible: false,
+      // 弹窗模式：add 新增 / edit 编辑 / view 查看
+      dialogMode: "add",
+      // 当前编辑或查看的人员ID
+      editingId: null,
+      // 表单数据模型
+      form: {
+        // 人员姓名
+        name: "",
+        // 性别：1-男，2-女
+        sex: "",
+        // 岗位名称
+        postName: "",
+        // 入行日期
+        happenPerio: "",
+        // 联系电话
+        telNo: "",
+        // 家庭住址
+        dtlAddr: "",
+        // 紧急联系人姓名
+        emergContactPersonName: "",
+        // 紧急联系人电话
+        emergContactPhoneNo: "",
+        // 出生日期
+        birthDt: "",
+        // 最高学历说明
+        highestEduDegreeDesc: "",
+        // 备注信息
+        rmk: "",
+      },
+      // 表单校验规则
+      rules: {
+        name: [{ required: true, message: "请输入人员姓名", trigger: "blur" }],
+        postName: [{ required: true, message: "请选择岗位", trigger: "change" }],
+        sex: [{ required: true, message: "请选择性别", trigger: "change" }],
+        happenPerio: [{ required: true, message: "请选择入行日期", trigger: "change" }],
+        telNo: [{ required: true, message: "请输入联系方式", trigger: "blur" }],
+        emergContactPersonName: [{ required: true, message: "请输入紧急联系人", trigger: "blur" }],
+        emergContactPhoneNo: [{ required: true, message: "请输入紧急联系方式", trigger: "blur" }],
+      },
+      // 岗位下拉选项
+      postOptions: ["保洁", "柜员", "客户经理", "运营专员"],
+      // 学历下拉选项
+      eduOptions: ["大专", "本科", "硕士", "博士"],
+      // 上传的附件列表
+      fileList: [],
     };
   },
+  computed: {
+    // 弹窗标题文案
+    dialogTitle() {
+      if (this.dialogMode === "edit") return "编辑";
+      if (this.dialogMode === "view") return "详情";
+      return "新增";
+    },
+    // 是否为只读查看模式
+    isView() {
+      return this.dialogMode === "view";
+    },
+  },
   methods: {
+    // 性别字段格式化显示
     formatSex(v) {
       if (v === "1" || v === 1) return "男";
       if (v === "2" || v === 2) return "女";
       return "";
     },
+    // 打开新增弹窗
+    onOpenAdd() {
+      this.dialogVisible = true;
+       this.dialogMode = "add";
+       this.editingId = null;
+      this.resetForm();
+    },
+    // 打开编辑弹窗并回显数据
+    onEdit(row) {
+      this.dialogMode = "edit";
+      this.editingId = row.id;
+      this.dialogVisible = true;
+      this.form = {
+        name: row.name || "",
+        sex: row.sex || "",
+        postName: row.postName || "",
+        happenPerio: row.happenPerio || "",
+        telNo: row.telNo || "",
+        dtlAddr: row.dtlAddr || "",
+        emergContactPersonName: row.emergContactPersonName || "",
+        emergContactPhoneNo: row.emergContactPhoneNo || "",
+        birthDt: row.birthDt || "",
+        highestEduDegreeDesc: row.highestEduDegreeDesc || "",
+        rmk: row.rmk || "",
+        createTm: row.createTm || "",
+      };
+      this.fileList = [];
+      if (this.$refs.addForm) {
+        this.$refs.addForm.clearValidate();
+      }
+    },
+    // 打开详情弹窗（只读）
+    onView(row) {
+      this.dialogMode = "view";
+      this.editingId = row.id;
+      this.dialogVisible = true;
+      this.form = {
+        name: row.name || "",
+        sex: row.sex || "",
+        postName: row.postName || "",
+        happenPerio: row.happenPerio || "",
+        telNo: row.telNo || "",
+        dtlAddr: row.dtlAddr || "",
+        emergContactPersonName: row.emergContactPersonName || "",
+        emergContactPhoneNo: row.emergContactPhoneNo || "",
+        birthDt: row.birthDt || "",
+        highestEduDegreeDesc: row.highestEduDegreeDesc || "",
+        rmk: row.rmk || "",
+        createTm: row.createTm || "",
+      };
+      this.fileList = [];
+      if (this.$refs.addForm) {
+        this.$refs.addForm.clearValidate();
+      }
+    },
+    // 重置表单数据及校验
+    resetForm() {
+      this.form = {
+        name: "",
+        sex: "",
+        postName: "",
+        happenPerio: "",
+        telNo: "",
+        dtlAddr: "",
+        emergContactPersonName: "",
+        emergContactPhoneNo: "",
+        birthDt: "",
+        highestEduDegreeDesc: "",
+        rmk: "",
+      };
+      this.fileList = [];
+      if (this.$refs.addForm) {
+        this.$refs.addForm.clearValidate();
+      }
+    },
+    // 文件选择变更回调
+    onFileChange(file, fileList) {
+      this.fileList = fileList.slice();
+    },
+    // 文件移除回调
+    onFileRemove(file, fileList) {
+      this.fileList = fileList.slice();
+    },
+    // 保存（新增或编辑）人员信息
+    onSave() {
+      if (!this.$refs.addForm) return;
+      this.$refs.addForm.validate((valid) => {
+        if (!valid) return;
+        const now = new Date();
+        const createTm =
+          this.form.createTm ||
+          `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}-${String(
+            now.getDate()
+          ).padStart(2, "0")}`;
+        const base = {
+          name: this.form.name,
+          sex: this.form.sex,
+          postName: this.form.postName,
+          happenPerio: this.form.happenPerio,
+          telNo: this.form.telNo,
+          dtlAddr: this.form.dtlAddr,
+          emergContactPersonName: this.form.emergContactPersonName,
+          emergContactPhoneNo: this.form.emergContactPhoneNo,
+          birthDt: this.form.birthDt,
+          highestEduDegreeDesc: this.form.highestEduDegreeDesc,
+          createTm,
+          rmk: this.form.rmk,
+          beloOrgNO: "",
+          creatorNo: "",
+          delFlag: "0",
+        };
+        if (this.dialogMode === "edit" && this.editingId) {
+          // 编辑模式：更新原有记录
+          this.rows = this.rows.map((r) =>
+            r.id === this.editingId
+              ? Object.assign({}, r, base, { id: r.id })
+          : r
+          );
+        } else {
+          // 新增模式：追加新记录
+          const row = Object.assign({}, base, { id: Date.now() });
+          this.rows = this.rows.concat(row);
+        }
+        this.dialogVisible = false;
+      });
+    },
+    // 删除人员信息
+    onRemove(row) {
+      if (!row || !row.id) return;
+      this.$confirm("确认删除该人员吗？", "提示", { type: "warning" })
+        .then(() => {
+          this.rows = this.rows.filter((r) => r.id !== row.id);
+        })
+        .catch(() => {});
+    },
   },
 };
 </script>
@@ -70,5 +461,13 @@ export default {
 .person-table-page {
   padding: 24px;
 }
+.toolbar {
+  margin-bottom: 12px;
+}
+.upload-block {
+  width: 100%;
+}
+.dialog-footer {
+  text-align: center;
+}
 </style>
-