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" maxlength="5000" minlength="60" placeholder="请从主要工作内容、成就等方面，描述你的工作经历，字数要求：60-5000字符"
                  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>