完善成长经历阅历,解决折叠面板文字重叠,自传的新增样式已修改,自传已可以成功修改内容

Tcsm

2023-09-17 fa2bbe82b73ff975f520caf8f9d32b2c98c7bd56

 ruoyi-ui/src/views/self/show.vue

@@ -287,7 +287,7 @@
      <el-collapse-item name="1"  >
        <template v-slot:title>
          <div class="title-wrapper">
            主要学习及工作经历
            <div class="left-content">主要学习及工作经历</div>
            <div>
            <el-button class="button" size="mini" type="text"  @click="showDialog('open')" >
              <sapn v-html="'\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'"></sapn></el-button>
@@ -341,9 +341,9 @@
      <el-collapse-item name="2" >
        <template v-slot:title>
          <div class="title-wrapper">
            家庭成员及主要社会关系情况
            <div class="left-content">家庭成员及主要社会关系情况</div>
            <div>
            <el-button class="button2" size="mini" type="text"  @click="showDialog('relation1')">
            <el-button class="button" size="mini" type="text"  @click="showDialog('relation1')">
              <sapn v-html="'\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'"></sapn></el-button>
            </div>
          </div>
@@ -396,8 +396,8 @@
      <el-collapse-item  name="4">
        <template v-slot:title>
          <div class="title-wrapper">
            持有证件情况
            <el-button class="button4" size="mini" type="text"  @click="showDialog('certificate')">
            <div class="left-content">持有证件情况</div>
            <el-button class="button" size="mini" type="text"  @click="showDialog('certificate')">
              <sapn v-html="'\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'"></sapn></el-button>
          </div>
        </template>
@@ -461,8 +461,8 @@
      <el-collapse-item  name="5">
        <template v-slot:title>
          <div class="title-wrapper">
            出国（境）情况
            <el-button class="button5" size="mini" type="text"  @click="showDialog('abroad')">
            <div class="left-content">出国（境）情况</div>
            <el-button class="button" size="mini" type="text"  @click="showDialog('abroad')">
              <sapn v-html="'\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'"></sapn></el-button>
          </div>
        </template>
@@ -514,9 +514,9 @@
      <el-collapse-item  name="6">
        <template v-slot:title>
          <div class="title-wrapper">
            自传
            <div class="left-content">自传</div>
            <div>
              <el-button size='mini' type="text" class="btn_autobiography" @click="showDialog('autobiography')" >
              <el-button size='mini' type="text" class="button" @click="showDialog('autobiography')" >
                <sapn v-html="'\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'"></sapn>
              </el-button>
            </div>
@@ -528,16 +528,17 @@
                     v-loading="loading" :data="AutobiographyList" >
              <el-tab-pane v-for="(item, index) in AutobiographyList"
                           :key='item.id' :label="item.ageBegin+'~'+item.ageEnd+'岁'+'('+item.term+')'">
                <div v-if="item.term === '婴儿'"> {{item.content}}</div>
                <div v-if="item.term === '幼儿'"> {{item.content}}</div>
                <div v-if="item.term === '小学'"> {{item.content}}</div>
                <div v-if="item.term === '初中'"> {{item.content}}</div>
                <div v-if="item.term === '高中'"> {{item.content}}</div>
                <div v-if="item.term === '大学'"> {{item.content}}</div>
                <div v-if="item.term === '研究生'"> {{item.content}}</div>
                <div v-if="item.term === '工作'"> {{item.content}}</div>
                <div v-if="item.term === '结婚后'"> {{item.content}}</div>
                <el-button size='mini' type="text" class="btn_edit" @click="editData(item)" style='position: absolute;right:10px;top:5px;'>
                <div>{{ item.content }}</div>
<!--                <div v-if="item.term === '婴儿'"> {{item.content}}</div>-->
<!--                <div v-if="item.term === '幼儿'"> {{item.content}}</div>-->
<!--                <div v-if="item.term === '小学'"> {{item.content}}</div>-->
<!--                <div v-if="item.term === '初中'"> {{item.content}}</div>-->
<!--                <div v-if="item.term === '高中'"> {{item.content}}</div>-->
<!--                <div v-if="item.term === '大学'"> {{item.content}}</div>-->
<!--                <div v-if="item.term === '研究生'"> {{item.content}}</div>-->
<!--                <div v-if="item.term === '工作'"> {{item.content}}</div>-->
<!--                <div v-if="item.term === '结婚后'"> {{item.content}}</div>-->
                <el-button size='mini' type="text" class="btn_edit" @click="editAutobiography(item)" style='position: absolute;right:10px;top:5px;'>
                  <sapn v-html="'\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'"></sapn>
                </el-button>
              </el-tab-pane>
@@ -708,10 +709,12 @@
              <span> 岁 </span>
          </el-form-item>
            <el-form-item label="时期：" prop="term">
              <el-select v-model="formDat.term" placeholder="请选择时期" clearable :style="{width: '50%'}"  >
                <el-option v-for="(item, index) in typeOptions" :key="index" :label="item.label" :value="item.value"
                ></el-option>
              </el-select>
<!--              <el-select v-model="formDat.term" placeholder="请选择时期" clearable :style="{width: '50%'}"  >-->
<!--                <el-option v-for="(item, index) in typeOptions" :key="index" :label="item.label" :value="item.value"-->
<!--                ></el-option>-->
<!--              </el-select>-->
              <el-input v-model="formDat.term"  placeholder="请输入时期" clearable :style="{width: '100%'}" >
              </el-input>
            </el-form-item>
            <el-form-item label="内容编辑：" prop="content">
              <el-input v-model="formDat.content" type="textarea" :rows="5" placeholder="" clearable :style="{width: '100%'}" >
@@ -1002,7 +1005,7 @@
        //自传
        term: [{
          required: true,
          message: '请选择时期',
          message: '请输入时期',
          trigger: 'blur'
        }],
        ageBegin: [{
@@ -1076,6 +1079,11 @@
      // 打开弹窗
      this.dialogVisible.autobiography = true;
    },
    editAutobiography(item) {
      this.isEdit1 = true;
      this.dialogVisible.autobiography = true;
      this.formDat = { ...item };
    },

    //隔行变色
    tableRowClassName({ row, rowIndex }) {
@@ -1115,7 +1123,7 @@
          //  alert(123)
          //   console.log(response.data)
          this.experienceList = response.data;
          this.total = response.data.total;
          // this.total = response.data.total;
          this.loading = false;
        }
      );
@@ -1124,7 +1132,7 @@
          //  alert(123)
          //   console.log(response.data)
          this.relationList = response.data;
          this.total = response.data.total;
          // this.total = response.data.total;
          this.loading = false;
        }
      );
@@ -1133,7 +1141,7 @@
          //  alert(123)
          //   console.log(response.data)
          this.individualList = response.data;
          this.total = response.data.total;
          // this.total = response.data.total;
          this.loading = false;
        }
      );
@@ -1142,7 +1150,7 @@
          //  alert(123)
          //   console.log(response.data)
          this.certificateList = response.data;
          this.total = response.data.total;
          // this.total = response.data.total;
          this.loading = false;
        }
      );
@@ -1151,7 +1159,7 @@
          //  alert(123)
          //   console.log(response.data)
          this.AbroadList = response.data;
          this.total = response.data.total;
          // this.total = response.data.total;
          this.loading = false;
        }
      );
@@ -1160,7 +1168,7 @@
        //  alert(123)
        //   console.log(response.data)
        this.AutobiographyList = response.data;
        this.total = response.data.total;
        // this.total = response.data.total;
        this.loading = false;

      });
@@ -1174,7 +1182,7 @@
      // });
      listType(this.queryParams).then(response => {
          this.typeList = response.data;
          this.total = response.data.total;
          // this.total = response.data.total;
          // console.log( this.typeList )
          // 在回调函数中调用 getTypeOptions()
          this.getTypeOptions();
@@ -1405,14 +1413,14 @@
      this.$refs["elForm"].validate(valid => {
        if (valid) {
          // 根据值找到选中的选项对象
          const selectedOption = this.typeOptions.find(option => option.value === this.formDat.term);
          // const selectedOption = this.typeOptions.find(option => option.value === this.formDat.term);

          if (this.isEdit1) {
            // 执行修改操作
            updateAutobiography(this.formDat).then(response => {
              // 将选中选项的文本设置为"term"字段的值
              this.formDat.term = selectedOption.label;
              this.formDat.id = selectedOption.id;
              // this.formDat.term = selectedOption.value;
              // this.formDat.id = selectedOption.id;
              console.log("1")
              this.$modal.msgSuccess("修改成功");
              this.dialogVisible.autobiography = false;
@@ -1426,7 +1434,7 @@
          } else {
            // 执行新增操作
            addAutobiography(this.formDat).then(response => {
              this.formDat.term = selectedOption.label;
              // this.formDat.term = selectedOption.label;
              this.$modal.msgSuccess("新增成功");
              this.dialogVisible.autobiography = false;
              this.getList();
@@ -1725,10 +1733,17 @@

.el-collapse-item__header {
  background-color:#FEF7FC;
  width: 100%;
}
.title-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: calc(100% - 50px);
}
.left-content {

  width: 100%;
}
.btn_autobiography{
  background:center no-repeat url('../../assets/icons/add1.png') ;
@@ -1747,8 +1762,10 @@
}
.button {
  background:center no-repeat url('../../assets/icons/add1.png') ;
  margin-left: 69.5vw;

  /*margin-right: -10px ;*/
  flex-shrink: 0;
  width: 30px;
  height: 28px;
}
.button2 {
  background: center no-repeat url('../../assets/icons/add1.png') ;