更新后台

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

@@ -1,154 +1,86 @@
 <template>
   <div class="dialog" v-if="dialogForm">
     <div class="head_box">
-      <span class="title">社会信息人员建设管理{{ title }}</span>
+      <span class="title">社会信息人员建设管理{{ title }} </span>
       <div>
+        <el-button type="primary" size="small" :loading="loading" @click="submit" >保存</el-button>
         <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 class="form_cnt">
+      <FormMessage :formList="formData" ref="elform" :rules="rules"></FormMessage>
     </div>
   </div>
 </template>
 
 <script setup>
-import MyTable from "@/components/aboutTable/MyTable.vue";
-import { ref,reactive } from "vue";
-
-const dialogForm = ref(false);
-const title = ref("");
+import FormMessage from '@/components/aboutTable/FormMessage.vue'
+import { qcckGet, qcckPost, qcckPut } from "@/api/qcckApi.js";
+import * as rule from "@/utils/rules.js";
+import { ref, defineExpose, reactive, onMounted, defineEmits, getCurrentInstance, nextTick } from "vue";
+const emit = defineEmits(["updateDate"]);
+const props = defineProps({
+  dic: Object
+});
+const { proxy } = getCurrentInstance();
+const dialogForm = ref(false); //弹窗
+const formData = ref([
+  { label: "管线部门", prop: "gxbm",  type: "input" },
+  { label: "所属辖区", prop: "ssxq", type: "input", },
+  { label: "信息员姓名", prop: "xm",  type: "input" },
+  { label: "身份证号", prop: "sfzh",  type: "input" },
+  { label: "性别", prop: "xb",  type: "select", options: []  },
+  { label: "年龄", prop: "age",  type: "input" },
+  { label: "联系方式", prop: "lxfs",  type: "input" },
+  { label: "考核得分", prop: "kgdf",  type: "input" },
+]);
 const listQuery = ref({
-  xgry: []
+  sfbqdj: []
+}); //表单
+const loading = ref(false);
+const elform = ref();
+const title = ref("");
+const rules = reactive({
+  rwbt: [{ required: true, message: "请输入任务标题", trigger: "blur" }]
 });
-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 editpeo = ref();
+onMounted(() => {});
 // 初始化数据
-const init = (type, row) => {
+const init = (type, row,) => {
   dialogForm.value = true;
-  title.value = type === "add" ? "新增" : "编辑";
-  if (type === "edit" && row) {
-    listQuery.value = { ...row };
-  } else {
-    listQuery.value = {
-      xgry: []
-    };
-  }
+  title.value = type == 'add' ? "新增" : "编辑";
+  if (row) getDataById(row.id);
+};
+// 根据id查询详情
+const getDataById = (id) => {
+  // qcckGet({}, '/mosty-gsxt/tbGsxtBqgl/'+id).then((res) => {
+  //   listQuery.value = res;
+  // });
 };
 
-const close = () => {
-  dialogForm.value = false;
-};
-
-const handleAdd = () => {
-  listQuery.value.xgry.push({
-    xm: "",
-    zjhm: "",
-    lxdh: ""
+// 提交
+const submit = () => {
+  elform.value.submit((data)=>{
+    // let url =  title.value == "新增" ? '/mosty-gsxt/tbGsxtBqgl/save':'/mosty-gsxt/tbGsxtBqgl/update';
+    // let params = { ...data }
+    // qcckPost(params, url).then((res) => {
+    //   proxy.$message({ type: "success", message: title.value + "成功" });
+    //   emit("updateDate");
+    //   close();
+    // }).catch(() => {});
   });
 };
 
-const handleDelete = (index) => {
-  listQuery.value.xgry.splice(index, 1);
+// 关闭
+const close = () => {
+  listQuery.value = {};
+  dialogForm.value = false;
+  loading.value = false;
 };
-
 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;
-  }
-}
+@import "~@/assets/css/layout.scss";
+@import "~@/assets/css/element-plus.scss";
 </style>