arms-app 1.0.63 → 1.0.65

package/package.json

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

package/view/4.vue

@@ -0,0 +1,407 @@
+<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
+      stripe
+      size="small"
+      style="width: 100%"
+    >
+      <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" 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="highestEduDegreeDesc" 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>
+
+<script>
+export default {
+  name: "PersonTableView",
+  data() {
+    return {
+      rows: [
+        {
+          id: 3286648151643648,
+          name: "李白",
+          sex: "1",
+          postName: "保洁",
+          happenPerio: "2002-02-02",
+          telNo: "18966541247",
+          dtlAddr: "北京",
+          emergContactPersonName: "王安石",
+          emergContactPhoneNo: "15466257489",
+          birthDt: "2000-02-02",
+          highestEduDegreeDesc: "硕士",
+          createTm: "2025-12-25",
+          rmk: "好人",
+          beloOrgNO: "000291",
+          creatorNo: "022171",
+          delFlag: "0",
+        },
+      ],
+      dialogVisible: false,
+      dialogMode: "add",
+      editingId: null,
+      form: {
+        name: "",
+        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>
+
+<style scoped>
+.person-table-page {
+  padding: 24px;
+}
+.toolbar {
+  margin-bottom: 12px;
+}
+.upload-block {
+  width: 100%;
+}
+.dialog-footer {
+  text-align: center;
+}
+</style>