团检分组

src/components/unitGrouping/unitGroupingTable.vue

@@ -1,8 +1,8 @@
 <template>
   <div style="display: flex">
-    <el-table :data="tableData" style="width: 100%">
+    <el-table :data="personnelUnit.personnelgrouping" style="width: 100%">
       <el-table-column prop="index" label="序号" width=""> </el-table-column>
-      <el-table-column prop="groupnumber" label="分组编号" width="">
+      <el-table-column prop="displayName" label="分组编号" width="">
       </el-table-column>
       <el-table-column prop="groupname" label="分组名称"> </el-table-column>
       <el-table-column prop="sex" label="性别"> </el-table-column>
@@ -12,23 +12,116 @@
     <div style="margin-top: 3%; margin-left: 10px">
       <div style="margin-left: 10px; margin-top: 5%">
         <div style="margin-top: 10px">
-          <el-button type="primary">新增</el-button>
+          <el-button type="primary" @click="groupaddtion">新增</el-button>
         </div>
         <div style="margin-top: 10px">
-          <el-button type="success">编辑</el-button>
+          <el-button type="success" @click="editgroup">编辑</el-button>
         </div>
         <div style="margin-top: 10px">
           <el-button type="danger">删除</el-button>
         </div>
       </div>
     </div>
+    <!-- 新增或者编辑弹框 -->
+    <el-dialog
+      :title="title == '1' ? '新增' : '编辑'"
+      :visible.sync="dialogVisible"
+      width="50%"
+    >
+      <el-form :model="form" label-width="80px">
+        <el-row>
+          <el-col :span="8">
+            <el-form-item label="分组名称">
+              <el-input v-model="form.displayName"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="价格">
+              <el-input v-model="form.price"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="适用性别">
+              <el-select v-model="form.forSexId" placeholder="请选择">
+                <el-option
+                  v-for="item in forSexId"
+                  :key="item.id"
+                  :label="item.displayName"
+                  :value="item.id"
+                >
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="婚姻状况">
+              <el-select v-model="form.maritalStatusId" placeholder="请选择">
+                <el-option
+                  v-for="item in maritalStatusId"
+                  :key="item.id"
+                  :label="item.displayName"
+                  :value="item.id"
+                >
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="年龄下限">
+              <el-input v-model="form.ageLowerLimit"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="年龄上限">
+              <el-input v-model="form.ageUpperLimit"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="适用职务">
+              <el-input v-model="form.jobPost"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="适用职称">
+              <el-input v-model="form.jobTitle"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="备注">
+              <el-input v-model="form.remark"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="Onsubmint">确 定</el-button>
+      </span>
+    </el-dialog>
+    <!--  -->
   </div>
 </template>
 <script>
-import { mapGetters } from "vuex";
+import { getapi, postapi } from "@/api/api";
+import { mapState } from "vuex";
 export default {
   data() {
     return {
+      title: 1,
+      form: {
+        displayName: "",
+        price: "",
+        forSexId: "",
+        maritalStatusId: "",
+        ageLowerLimit: "",
+        ageUpperLimit: "",
+        jobPost: "",
+        jobTitle: "",
+        remark: "",
+      },
+      forSexId: [], //性别id
+      maritalStatusId: [], //婚姻状况
+      dialogVisible: false,
       tableData: [
         {
           index: "2",
@@ -50,11 +143,59 @@ export default {
     };
   },
   computed: {
-    ...mapGetters(["customerOrg"]),
+    ...mapState(["personnelUnit"]),
   },
-  mounted() {
-    console.log(customerOrg.personnelgrouping);
+  created() {
+   
+  },
+  mounted() {    
+    //console.log('00000',this.personnelUnit.id);
+  },
+  methods: {
+    //编辑弹框
+    editgroup() {
+      this.title = 2;
+      this.obtainsuperior();
+      this.dialogVisible = true;
+    },
+    //获取性别和婚姻状况
+    obtainsuperior() {
+      //获取性别
+      getapi("/api/app/sex").then((res) => {
+        this.forSexId = res.data;
+      });
+      //获取婚姻状况
+      getapi("/api/app/marital-statuses").then((res) => {
+        this.maritalStatusId = res.data.items;
+        console.log(res);
+      });
+    },
+    Onsubmint() {
+      if (this.title == 1) {
+        let obj = {
+          displayName: this.form.displayName,
+          price: Number(this.form.price),
+          forSexId: this.form.forSexId,
+          maritalStatusId: this.form.maritalStatusId,
+          ageLowerLimit: Number(this.form.ageLowerLimit),
+          ageUpperLimit: Number(this.form.ageUpperLimit),
+          jobPost: this.form.jobPost,
+          jobTitle: this.form.jobTitle,
+          remark: this.form.remark,
+        };
+        postapi("/api/app/customer-org-group", obj).then((res) => {
+          this.$message.success("新增成功");
+          this.dialogVisible = false;
+        });
+      }
+    },
+    //新增弹框
+    groupaddtion() {
+      console.log(this.personnelUnit.id);
+      this.dialogVisible = true;
+      this.title = 1;
+      this.obtainsuperior();
+    },
   },
-  methods: {},
 };
 </script>

src/store/index.js

@@ -18,7 +18,11 @@ export default new Vuex.Store({
       customerOrgRegisterList: [], //单位体检次数登记列表
       contactPersonList:[],   //联系人列表
       contactMethodList:[],    //联系方式列表
+    
+    },
+    personnelUnit:{
       personnelgrouping:[], //人员分组
+      id:''
     }
   },
   getters: {},

src/views/customerOrg/customerOrgGroup.vue

@@ -28,7 +28,7 @@
 <script>
 import CustomerOrgTree from "../../components/unitGrouping/unitGroupingTable.vue";
 import UnitGroupCategory from "../../components/unitGrouping/unitGroupCategory.vue";
-import {mapState} from 'vuex'
+import { mapState } from "vuex";
 import { getapi } from "@/api/api";
 export default {
   components: {
@@ -41,21 +41,22 @@ export default {
       value: "",
     };
   },
-  computed:{
-     ...mapState['customerOrg']
+  computed: {
+    ...mapState(["personnelUnit"]),
   },
   created() {
     this.getitemtype();
   },
   methods: {
+      
     secltchang(v) {
-      //let that=this
-            console.log(this.customerOrg);
-      getapi(`/api/app/customer-org-group/in-customer-org-id/${v}`).then(res=>{       
-      //  this.customerOrg.personnelgrouping=res.data
-      // console.log(res.data);
-      // console.log(that.customerOrg.personnelgrouping);
-      })
+      this.personnelUnit.id=v
+      console.log(this.personnelUnit);
+      getapi(`/api/app/customer-org-group/in-customer-org-id/${v}`).then(
+        (res) => {
+          this.personnelUnit.personnelgrouping = res.data;
+        }
+      );
       console.log(v);
     },
     //获取单位列表