proginn-frontend/components/sign/experience-form.vue

<template>
  <div class="edit">
    <el-form ref="form" :rules="rules" :model="item" label-width="147px">
      <div class="header">
        <!-- <el-date-picker
          v-model="item.date"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
        ></el-date-picker>-->
        <date-range class="range" v-model="item.date"></date-range>
        <el-select
          v-model="item.company"
          allow-create
          filterable
          remote
          reserve-keyword
          placeholder="请输入公司名称"
          :remote-method="fetchCompany"
          :loading="loadingCompany"
        >
          <el-option
            v-for="item in companys"
            :key="item.label"
            :label="item.label"
            :value="item.label"
          ></el-option>
        </el-select>
        <el-select
          v-model="item.title"
          allow-create
          filterable
          remote
          reserve-keyword
          placeholder="请输入职位"
          :remote-method="fetchTitle"
          :loading="loadingTitle"
        >
          <el-option
            v-for="item in titles"
            :key="item.label"
            :label="item.label"
            :value="item.label"
          ></el-option>
        </el-select>
        <span class="opts">
          <el-button type="danger" @click="handleDelete(item, idx)">删除</el-button>
          <el-button type="info" @click="handleCancel(item, idx)">取消</el-button>
          <el-button type="primary" @click="handleConfirm(item, idx)">保存</el-button>
        </span>
      </div>
      <div class="content">
        <el-input
          type="textarea"
          :rows="7"
          placeholder="请从主要工作内容、成就等方面，描述你的工作经历，字数不少于60字符"
          v-model="item.description"
        ></el-input>
        <uploader
          :imageUrl="item.work_certify_img"
          title="工作证明"
          @change="val => handleImageUrl(idx, val)"
        ></uploader>
      </div>
      <footer>
        <p>注：有效的工作证明包括：工牌/入职通知邮件/在职证明/公司邮箱截图/公司获奖证书/钉钉截图/离职证明/社保公积金证明等（其中之一即可，截图中需同时出现公司信息和个人信息，才能作为有效工作证明，并与目前公司相一致）</p>
      </footer>
    </el-form>
  </div>
</template>

<script>
import uploader from "@/components/uploader";
import dateRange from "@/components/date-range";
export default {
  props: ["idx", "item", "handleDelete", "handleCancel", "handleConfirm"],
  components: {
    uploader,
    dateRange
  },
  data() {
    return {
      rules: {
        // date: [
        //   {
        //     required: true,
        //     message: "请设置开始时间/结束时间",
        //     trigger: "change"
        //   }
        // ],
        // company: [
        //   {
        //     required: true,
        //     message: "请设置公司名称/职位",
        //     trigger: "change"
        //   }
        // ],
        // title: [
        //   {
        //     required: true,
        //     message: "请设置公司名称/职位",
        //     trigger: "change"
        //   }
        // ],
        // description: [
        //   { min: 60, message: "经历描述不少于60字符", trigger: "blur" }
        // ]
        name: [
          {
            required: true,
            message: "作品名称不得为空",
            trigger: "blur"
          },
          { max: 50, message: "作品名称不得超过50字符", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              if (/[&￥%\/\*]+/.test(value)) {
                callback(new Error("作品名称不包含特殊字符"));
              } else {
                callback();
              }
            },
            trigger: "blur"
          }
        ],
        description: [
          {
            required: true,
            message: "作品简介不得为空",
            trigger: "blur"
          },
          { min: 60, message: "作品简介不得低于60字符", trigger: "blur" }
        ],
        industry_id: [
          {
            required: true,
            message: "行业类型不得为空",
            trigger: "change"
          }
        ],
        function_ops: [
          {
            required: true,
            message: "关键功能不得为空",
            trigger: "change"
          }
        ],
        duty: [
          {
            required: true,
            message: "作品职责不得为空",
            trigger: "blur"
          },
          { min: 15, message: "作品职责不得低于15字符", trigger: "blur" },
          { max: 200, message: "作品职责不得高于200字符", trigger: "blur" }
        ]
      },
      companys: [],
      loadingCompany: false,
      titles: [],
      loadingTitle: false
    };
  },
  computed: {},
  async mounted() {},
  methods: {
    async handleSubmit(idx) {
      this.$refs["form"].validate(async valid => {
        if (valid) {
          console.log("submit!", this.item);
          const item = this.item;
          this.onSubmit(this.item, idx);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    async fetchCompany(keyword) {
      this.loadingCompany = true;
      const res = await this.$axios.$post("/api/simple_data/select_company", {
        keyword
      });
      this.loadingCompany = false;
      const data = res.data || [];
      this.companys = data.map(it => ({ value: it.id, label: it.name }));
    },
    async fetchTitle(keyword) {
      this.loadingTitle = true;
      const res = await this.$axios.$post("/api/simple_data/select_title", {
        keyword
      });
      this.loadingTitle = false;
      const data = res.data || [];
      this.titles = data.map(it => ({ value: it.id, label: it.name }));
    },
    handleImageUrl(idx, url) {
      this.item.work_certify_img = url;
    }
  }
};
</script>

<style lang="scss" scoped>
.edit {
  padding: 20px;
  > form {
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
    }
    .opts {
      display: flex;
      align-items: center;
      .el-button {
        margin-left: 5px;
      }
    }
    .el-select,
    .el-input {
      width: 136px;
      margin-right: 10px;
      .el-input--suffix .el-input__inner {
        padding-right: 0;
      }
    }
    .to {
      margin-right: 10px;
    }
    .times {
      .el-checkbox {
        width: 88px;
      }
      .el-input {
        width: 136px;
      }
    }
    .content {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-top: 10px;
      .el-textarea {
        display: flex;
        width: 766px;
        height: 162px;
      }
    }
  }
  footer {
    margin-top: 10px;
    p {
      margin-top: 15px;
      width: 766px;
      font-size: 12px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(145, 154, 167, 1);
      line-height: 17px;
    }
  }
}
</style>