proginn-frontend/components/sign/info.vue

<template>
  <div class="info">
    <header>
      <h5>基本信息</h5>
      <div v-if="editing" class="opts">
        <el-button type="info" @click="editing = false">取消</el-button>
        <el-button type="primary" @click="onSubmit">确认</el-button>
      </div>
      <div v-else class="opts">
        <el-button type="primary" @click="editing = true">编辑</el-button>
      </div>
    </header>
    <div v-if="editing" class="edit">
      <el-form ref="form" :rules="rules" :model="form" label-width="147px">
        <el-form-item label="昵称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="工作状态">
          <el-select v-model="form.region" placeholder="请选择">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="职业方向">
          <el-select v-model="form.region" placeholder="请选择">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
          <el-select v-model="form.region" placeholder="请选择">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所在地区">
          <el-select v-model="form.region" placeholder="请选择">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
          <!-- <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="form.date1"
              style="width: 100%;"
          ></el-date-picker>-->
          <el-select v-model="form.region" placeholder="请选择">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
          <!-- <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker> -->
        </el-form-item>
        <el-form-item label="日薪">
          <el-input-number
            :min="200"
            :max="2000"
            :controls="false"
            v-model="form.name"
            :style="{width: '150px', marginRight: '10px'}"
          ></el-input-number>元/天（8小时）
        </el-form-item>
        <el-form-item label="可工作时间">
          <div class="times">
            <el-checkbox v-model="form.workingday" label="工作日"></el-checkbox>
            <el-time-select
              v-model="form.workingStart"
              :picker-options="{
                  start: '00:00',
                  step: '00:30',
                  end: '24:00'
                }"
              placeholder="开始时间"
            ></el-time-select>
            <span class="to">至</span>
            <el-time-select
              v-model="form.workingEnd"
              :picker-options="{
                  start: '00:00',
                  step: '00:30',
                  end: '24:00'
                }"
              placeholder="结束时间"
            ></el-time-select>
          </div>
          <div class="times">
            <el-checkbox v-model="form.weekend" label="周末"></el-checkbox>
            <el-time-select
              v-model="form.weekendStart"
              :picker-options="{
                  start: '00:00',
                  step: '00:30',
                  end: '24:00'
                }"
              placeholder="开始时间"
            ></el-time-select>
            <span class="to">至</span>
            <el-time-select
              v-model="form.weekendEnd"
              :picker-options="{
                  start: '00:00',
                  step: '00:30',
                  end: '24:00'
                }"
              placeholder="结束时间"
            ></el-time-select>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <div v-else class="show">
      <el-form ref="form" :rules="rules" :model="form" label-width="147px">
        <el-form-item label="昵称">{{form.name}}</el-form-item>
        <el-form-item label="工作状态">{{form.status}}</el-form-item>
        <el-form-item label="职业方向">{{form.position}}</el-form-item>
        <el-form-item label="所在地区">{{form.address}}</el-form-item>
        <el-form-item label="日薪">{{form.dailyRate}}</el-form-item>
        <el-form-item label="可工作时间">{{form.workingTime}}</el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rules: {
        name: ""
      },
      form: {
        name: "1123",
        status: "123",
        position: "123",
        address: "123",
        region: "123",
        workingDay: "33",
        weekend: "333",
        workingStart: "333",
        workingEnd: "33",
        weekendStart: "33",
        weekendEnd: "333",
        dailyRate: "312",
        workingTime: "123"
      },
      editing: true
    };
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    }
  }
};
</script>

<style lang="scss" scoped>
.info {
  .edit {
    > form {
      margin-top: 44px;
      .el-select,
      .el-input {
        width: 217px;
        margin-right: 10px;
      }
      .times {
        .el-checkbox {
          width: 88px;
        }
        .to {
          margin-right: 10px;
        }
        .el-input {
          width: 136px;
        }
      }
    }
  }
}
</style>