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

<template>
  <div class="edit">
    <el-form ref="form" :rules="rules" :model="work" label-width="147px">
      <el-form-item label="作品名称" prop="name">
        <el-input
          :style="{width: '440px'}"
          v-model="work.name"
          placeholder="50字以内 不能包含 & ￥ % / \ *"
        ></el-input>
        <span class="opts">
          <el-button type="danger" @click="handleDelete(work, idx)">删除</el-button>
          <el-button type="info" @click="handleCancel(work, idx)">取消</el-button>
          <el-button type="primary" @click="handleSubmit(work, idx)">保存</el-button>
          <!-- <el-button type="text" icon="el-icon-delete" @click="handleDelete(idx)"></el-button> -->
        </span>
      </el-form-item>
      <div class="inline">
        <el-form-item label="行业类型" prop="industry_id">
          <!-- <el-select :style="{width: '217px'}" v-model="work.industry_id" placeholder="选择行业类型">
            <el-option
              v-for="item in industries"
              :label="`${item.label}`"
              :key="item.value"
              :value="item.value"
            ></el-option>
          </el-select>-->
          <el-cascader
            :style="{width: '217px'}"
            placeholder="选择行业类型"
            v-model="work.industry_id"
            @change="industryChange"
            :options="industries"
            :props="{ expandTrigger: 'hover' }"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="关键功能" prop="function_ops">
          <el-select
            :style="{width: '217px'}"
            multiple
            v-model="work.function_ops"
            placeholder="请选择"
          >
            <el-option
              v-for="item in functions"
              :label="`${item.label}`"
              :key="item.value"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </div>
      <el-form-item label="作品描述" prop="description">
        <el-input
          type="textarea"
          :rows="5"
          placeholder="请输入60~200字的作品描述"
          v-model="work.description"
        ></el-input>
      </el-form-item>
      <el-form-item label="作品职责" prop="duty">
        <el-input
          type="textarea"
          :rows="4"
          placeholder="描述你在该作品中承担的责任，完成了哪些工作（不少于15字符）"
          v-model="work.duty"
        ></el-input>
      </el-form-item>
      <el-form-item label="作品地址" prop="url">
        <el-input placeholder="例如：https://www.proginn.com 若无法添加作品有效链接，请添加作品截图" v-model="work.url"></el-input>
      </el-form-item>
      <el-form-item label="作品截图" prop="image_list">
        <multi-uploader v-model="work.image_list"></multi-uploader>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import multiUploader from "@/components/multi-uploader";
export default {
  props: [
    "idx",
    "industries",
    "functions",
    "work",
    "handleDelete",
    "handleCancel",
    "onSubmit"
  ],
  components: {
    multiUploader
  },
  data() {
    return {
      rules: {
        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" },
          { max: 200, message: "作品简介不得高于200字符", trigger: "blur" }
        ],
        industry_id: [
          {
            required: true,
            message: "行业类型不得为空",
            trigger: "blur"
          }
        ],
        function_ops: [
          {
            required: true,
            message: "关键功能不得为空",
            trigger: "blur"
          }
        ],
        duty: [
          {
            required: true,
            message: "作品职责不得为空",
            trigger: "blur"
          },
          { min: 15, message: "作品职责不得低于15字符", trigger: "blur" },
          { max: 200, message: "作品职责不得高于200字符", trigger: "blur" }
        ]
      }
    };
  },
  computed: {
    realname_verify_status() {
      return this.userInfo ? this.userInfo.realname_verify_status : "";
    }
  },
  async mounted() {
    // realname_verify_status, 1是待审核，2审核通过，3是拒绝
    this.userInfo = await this.getUserInfo();
  },
  methods: {
    async handleSubmit(idx) {
      this.$refs["form"].validate(async valid => {
        if (valid) {
          console.log("submit!", this.work);
          const work = this.work;
          this.onSubmit(this.work, idx);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    handleImageUrl(idx, url) {
      this.work.diploma_photo = url;
    },
    industryChange(value) {
      console.log(value);
    }
  }
};
</script>

<style lang="scss" scoped>
.edit {
  padding: 20px;
  > form {
    .opts {
      display: flex;
      align-items: center;
      float: right;
      .el-button {
        margin-left: 5px;
      }
    }
    .inline {
      display: flex;
    }
    .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;
      }
    }
  }
}
</style>