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

<template>
  <div class="sign-new-work-experience-form">
    <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.company_scale" placeholder="公司规模">
          <el-option
            v-for="item in companySize"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></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>
      </div>
      <div class="content">
        <el-input
          type="textarea"
          :rows="7"
          maxlength="5000"
          minlength="40"
          placeholder="可简要描述公司主要业务，我的职责和工作内容，字数要求：40-5000字符"
          v-model="item.description"
          show-word-limit
        ></el-input>
        <!-- <uploader
          :imageUrl="item.work_certify_img"
          title="工作证明"
          @change="val => handleImageUrl(idx, val)"
        ></uploader> -->
      </div>
      <footer class="sign-new-form-footer">
        <div class="sign-new-form-tips">
          <!-- <p>
            注：有效的工作证明包括：工牌/入职通知邮件/在职证明/公司邮箱截图/公司获奖证书/钉钉截图/离职证明/社保公积金证明等（其中之一即可，截图中需同时出现公司信息和个人信息，才能作为有效工作证明，并与目前公司相一致）
          </p> -->
        </div>
        <div class="sign-new-btn-area">
          <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>
      </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: 40, message: "作品简介不得低于40字符", 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: [],
      company_scale: "",
      companySize: [
        {
          value: "1",
          label: "0-19人"
        },
        {
          value: "2",
          label: "20-99人"
        },
        {
          value: "3",
          label: "100-499人"
        },
        {
          value: "4",
          label: "500-2000人"
        },
        {
          value: "5",
          label: "2000人以上"
        }
      ],
      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.item.company=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.item.title=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>
.sign-new-work-experience-form {
  padding: 20px 0;

  > 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: 610px;
        // height: 162px;
        height: 138px;
      }
    }
  }

  footer {
    margin-top: 10px;

    p {
      margin-top: 15px;
      font-size: 12px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(145, 154, 167, 1);
      line-height: 17px;
    }
  }
}
</style>