zc_saas_admin/src/views/education/studentManageMent/studentXQ/studentBaseManage.vue

<template>
  <div id="studentBaseManage">
    <div class="YZsty">
      <el-form
        label-position="right"
        label-width="120px"
        :model="listData"
        ref="listData"
        :rules="rules"
      >
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="dis_fs">
              <div class="photoSty1">
                <img
                  style="width: 100%; height: 100%"
                  v-if="!listData.oneInchPhotos"
                  src="@/assets/404_images/wuyuxaog.png"
                  alt=""
                />
                <el-image
                  v-else
                  style="width: 100%; height: 100%"
                  :src="$methodsTools.splitImgHost(listData.oneInchPhotos)"
                  :preview-src-list="[
                    $methodsTools.splitImgHost(listData.oneInchPhotos),
                  ]"
                >
                </el-image>
                <div class="pos_bottom">一寸头像图</div>
              </div>
              <div class="photoSty2">
                <img
                  style="width: 100%; height: 100%"
                  v-if="!listData.idCardImg1"
                  src="@/assets/404_images/wuyuxaog.png"
                  alt=""
                />
                <el-image
                  v-else
                  style="width: 100%; height: 100%"
                  :src="$methodsTools.splitImgHost(listData.idCardImg1)"
                  :preview-src-list="[
                    $methodsTools.splitImgHost(listData.idCardImg1),
                  ]"
                >
                </el-image>
                <div class="pos_bottom">身份证正面照片</div>
              </div>
              <div class="photoSty2" style="margin-right: 0px">
                <img
                  style="width: 100%; height: 100%"
                  v-if="!listData.idCardImg2"
                  src="@/assets/404_images/wuyuxaog.png"
                  alt=""
                />
                <el-image
                  v-else
                  style="width: 100%; height: 100%"
                  :src="$methodsTools.splitImgHost(listData.idCardImg2)"
                  :preview-src-list="[
                    $methodsTools.splitImgHost(listData.idCardImg2),
                  ]"
                >
                </el-image>
                <div class="pos_bottom">身份证背面照片</div>
              </div>
            </div>
          </el-col>
          <el-col :span="9">
            <el-form-item label="学员编码" prop="studentCode">
              <el-input disabled v-model="listData.studentCode"></el-input>
            </el-form-item>
            <el-form-item label="绑定手机号" prop="telphone">
              <el-input disabled v-model="listData.telphone"></el-input>
            </el-form-item>
            <el-form-item label="姓名" prop="realname">
              <el-input disabled v-model="listData.realname"></el-input>
            </el-form-item>
            <el-form-item label="身份证号码" prop="idCard">
              <el-input disabled v-model="listData.idCard"></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="sex">
              <el-radio-group v-model="listData.sex">
                <el-radio :label="1">男</el-radio>
                <el-radio :label="2">女</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="出生日期" prop="userBirth">
              <el-date-picker
                v-model="listData.userBirth"
                type="date"
                placeholder="选择出生日期"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="微信" prop="nickname">
              <el-input disabled v-model="listData.nickname"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="listData.email"></el-input>
            </el-form-item>
            <el-form-item label="学历" prop="eduLevel">
              <el-select v-model="listData.eduLevel" placeholder="请选择学历">
                <el-option
                  v-for="(item, index) in dictManages['edu_level']"
                  :key="index"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="工作年限">
              <el-select
                v-model="listData.workYear"
                placeholder="请选择工作年限"
              >
                <el-option
                  v-for="(item, index) in dictManages['working_years']"
                  :key="index"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="在职状况" prop="jobStatus">
              <el-radio-group v-model="listData.jobStatus">
                <el-radio :label="1">在职</el-radio>
                <el-radio :label="2">离职</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item label="民族" prop="nation">
              <el-input v-model="listData.nation"></el-input>
            </el-form-item>
            <el-form-item label="籍贯" prop="nativePlace">
              <el-input v-model="listData.nativePlace"></el-input>
            </el-form-item>
            <el-form-item label="政治面貌" prop="politic">
              <el-select
                v-model="listData.politic"
                placeholder="请选择政治面貌"
              >
                <el-option
                  v-for="(item, index) in dictManages['politic_status']"
                  :key="index"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="婚姻状况" prop="marry">
              <el-select v-model="listData.marry" placeholder="请选择婚姻状况">
                <el-option
                  v-for="(item, index) in dictManages['marry_status']"
                  :key="index"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="户口性质" prop="census">
              <el-select v-model="listData.census" placeholder="请选择户口性质">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="户口所在地" prop="houseAddress">
              <el-input v-model="listData.houseAddress"></el-input>
            </el-form-item>
            <el-form-item label="联系地址" prop="contactAddress">
              <el-input v-model="listData.contactAddress"></el-input>
            </el-form-item>
            <el-form-item label="收件地址" prop="consigneeAddress">
              <el-input v-model="listData.consigneeAddress"></el-input>
            </el-form-item>
            <el-form-item label="备注" prop="remark">
              <el-input
                type="textarea"
                :rows="4"
                v-model="listData.remark"
              ></el-input>
            </el-form-item>
            <el-form-item label="所在公司" prop="companyName">
              <el-input v-model="listData.companyName"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div style="text-align: center">
        <el-button @click="backPage">返回</el-button>
        <el-button type="primary" @click="submit('listData')">保存</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      options: [
        {
          label: "农村户口",
          value: 1,
        },
        {
          label: "城镇户口",
          value: 2,
        },
      ],
      listData: {},
      rules: {},
    };
  },
  computed: {
    ...mapGetters(["dictManages"]),
  },
  mounted() {
    this.getUserInfos();
  },
  methods: {
    getUserInfos() {
      this.$api
        .inquiregradestudentlistStudent({ userId: this.$route.query.id })
        .then((res) => {
          this.listData = res.rows[0];
          console.log(res);
        });
    },
    backPage() {
      this.$store.dispatch("tagsView/delView", this.$route).then((res) => {
        this.$router.push({
          path: "StudentList",
        });
      });
    },
    submit() {
      this.$api.editgradestudent(this.listData).then((res) => {
        this.$message.success("保存成功");
      });
    },
  },
};
</script>

<style lang="less" scoped>
.YZsty {
  background-color: #eee;
  padding: 30px;
}
.fgx {
  border-bottom: 1px dotted #9a9a9a;
  margin-bottom: 12px;
}
.dis_fs {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  background-color: #eee;
}
.photoSty1 {
  flex-shrink: 0;
  width: 150px;
  height: 160px;
  background-color: #fff;
  position: relative;
  margin-bottom: 30px;
}
.photoSty2 {
  position: relative;
  flex-shrink: 0;
  width: 230px;
  height: 160px;
  background-color: #fff;
  margin-bottom: 30px;
}
.pos_bottom {
  position: absolute;
  height: 20px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  background-color: rgba(0, 0, 0, 0.8);
  text-align: center;
  line-height: 20px;
  font-size: 14px;
  color: #fff;
}
</style>