更新代码

src/views/backOfficeSystem/HumanIntelligence/ConstructionManagement/components/addForm.vue

@@ -0,0 +1,154 @@
+<template>
+  <div class="dialog" v-if="dialogForm">
+    <div class="head_box">
+      <span class="title">社会信息人员建设管理{{ title }}</span>
+      <div>
+        <el-button size="small" @click="close">关闭</el-button>
+      </div>
+    </div>
+    <div class="cntinfo">
+      <el-form :model="listQuery" :label-width="130" label-position="right">
+        <div class="form-row">
+          <el-form-item label="管线部门">
+            <el-input v-model="listQuery.gxbm" placeholder="请输入管线部门" />
+          </el-form-item>
+          <el-form-item label="所属辖区">
+            <el-input v-model="listQuery.ssxq" placeholder="请输入所属辖区" />
+          </el-form-item>
+          <el-form-item label="信息员姓名">
+            <el-input v-model="listQuery.xm" placeholder="请输入信息员姓名" />
+          </el-form-item>
+          <el-form-item label="身份证号">
+            <el-input v-model="listQuery.sfzh" placeholder="请输入身份证号" />
+          </el-form-item>
+        </div>
+
+        <div class="form-row">
+          <el-form-item label="性别">
+            <el-select v-model="listQuery.xb" placeholder="请选择性别">
+              <el-option label="类型1" value="1" />
+              <el-option label="类型2" value="2" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="年龄">
+            <el-input v-model="listQuery.age" placeholder="请输入年龄" />
+          </el-form-item>
+          <el-form-item label="联系方式">
+            <el-input v-model="listQuery.lxfs" placeholder="请输入联系方式" />
+          </el-form-item>
+          <el-form-item label="考核得分">
+            <el-input v-model="listQuery.kgdf" placeholder="请输入考核得分" />
+          </el-form-item>
+        </div>
+      </el-form>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import MyTable from "@/components/aboutTable/MyTable.vue";
+import { ref,reactive } from "vue";
+
+const dialogForm = ref(false);
+const title = ref("");
+const listQuery = ref({
+  xgry: []
+});
+const pageForm = reactive({
+  tableData: [
+    {
+      xm: "张三",
+      xb: "男",
+      sfzh: "51018319969699999",
+      hjd: "",
+      hjdpcs: "",
+      bq: "重点人员"
+    }
+  ],
+  keyCount: 0,
+  tableConfiger: {
+    rowHieght: 61,
+    showSelectType: "checkBox",
+    loading: false
+  },
+  controlsWidth: 220,
+  tableColumn: [
+    { label: "姓名", prop: "xm" },
+    { label: "性别", prop: "xb" },
+    { label: "身份证号", prop: "sfzh" },
+    { label: "户籍地", prop: "hjd" },
+    { label: "户籍地派出所", prop: "hjdpcs" },
+    { label: "标签", prop: "bq" }
+  ]
+});
+
+// 初始化数据
+const init = (type, row) => {
+  dialogForm.value = true;
+  title.value = type === "add" ? "新增" : "编辑";
+  if (type === "edit" && row) {
+    listQuery.value = { ...row };
+  } else {
+    listQuery.value = {
+      xgry: []
+    };
+  }
+};
+
+const close = () => {
+  dialogForm.value = false;
+};
+
+const handleAdd = () => {
+  listQuery.value.xgry.push({
+    xm: "",
+    zjhm: "",
+    lxdh: ""
+  });
+};
+
+const handleDelete = (index) => {
+  listQuery.value.xgry.splice(index, 1);
+};
+
+defineExpose({ init });
+</script>
+
+<style lang="scss" scoped>
+.dialog {
+  padding: 20px;
+
+  .head_box {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+  }
+  .cntinfo {
+    height: calc(100% - 70px);
+    overflow: hidden;
+    overflow-y: auto;
+  }
+
+  .form-row {
+    display: flex;
+    flex-wrap: wrap;
+    margin-bottom: 20px;
+
+    .el-form-item {
+      flex: 1;
+      min-width: 300px;
+      margin-right: 20px;
+
+      &.full-width {
+        flex: 0 0 100%;
+      }
+    }
+  }
+
+  :deep(.el-divider__text) {
+    font-size: 16px;
+    font-weight: bold;
+  }
+}
+</style>