yudao-ui-saas/src/views/oa/entry/edit.vue

<template>
    <div class="container">
      <el-form :model="form" label-position="top" :rules="rules" ref="form" label-width="80px">
              <el-form-item label="入职人" prop="loginName">
                <el-input v-model="form.loginName" placeholder='请输入'></el-input>
              </el-form-item>
              <el-form-item label="部门">
                <treeselect :default-expand-level="1" v-model="form.deptId" :options="deptOptions" :normalizer="normalizer" placeholder="选择部门" />
              </el-form-item>
              <el-form-item label="职位">
                <el-select v-model="form.position" placeholder="请选择" style="width: 100%;">
                  <el-option v-for="item in posOptions" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="员工类型" prop="employeeType">
                <el-select v-model="form.employeeType" placeholder="请选择" style="width: 100%;">
                  <el-option v-for="item in posOptions" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="性别" prop="gender">
                <el-select v-model="form.gender" placeholder="请选择" style="width: 100%;">
                  <el-option v-for="item in posOptions" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="出生日期" prop="birthday">
                <el-date-picker value-format="yyyy-MM-dd" v-model="form.birthday" type="date" placeholder="选择日期" style="width: 100%;">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="联系电话" prop="contactNumber">
                <el-input v-model="form.contactNumber" placeholder='请输入'></el-input>
              </el-form-item>
              <el-form-item label="电子邮箱" prop="email">
                <el-input v-model="form.email" placeholder='请输入'></el-input>
              </el-form-item>
              <el-form-item label="教育背景">
                <el-input maxlength="50" show-word-limit type="textarea" v-model="form.education" placeholder='请输入'></el-input>
              </el-form-item>
              <el-form-item label="工作经验">
                <el-input maxlength="200" rows="4" show-word-limit type="textarea" v-model="form.workExperience" placeholder='请输入'></el-input>
              </el-form-item>
              <el-form-item label="入职日期" prop="startDate">
                <el-date-picker value-format="yyyy-MM-dd" v-model="form.startDate" type="date" placeholder="选择日期" style="width: 100%;">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="附件">
                <!-- <FileUpload v-model="form.files" :limit="1"/> -->
            <el-upload
              action=""
              ref="privateKeyContentFile"
              :limit="1"
              :http-request="appCertUpload"
              :before-upload="fileBeforeUpload">
              <el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button>
            </el-upload>
          </el-form-item>
              <el-form-item label="备注">
                <el-input maxlength="200" rows="4" show-word-limit type="textarea" v-model="form.remarks" placeholder="请输入备注" />
              </el-form-item>
              <el-form-item label="审批人" prop="peopleList">
                <el-input type="textarea" v-model="form.peopleList" style="display: none;"/>
                <el-button class="button-new-tag" @click="openPS">+ 添加</el-button>
                <span :key="tag" v-for="tag in peopleList">
                  <i class="el-icon-arrow-right"></i>
                  <el-tag type="info" closable :disable-transitions="false"
                  @close="handleClose(tag)">
                  <span class="user-avatar">{{ tag.substring(0,1) || 'U' }}</span>
                 {{ tag }}
                </el-tag>
                </span>

              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmit()">提交</el-button>
                <el-button @click="onSave()">暂存</el-button>
              </el-form-item>
            </el-form>
          <PeopleSelect ref="peopleSelect" :type="type" :isCheck="true" :open="peopleOpen" @cancel="peopleOpen = false"
            @submit="submitPeople"></PeopleSelect>
           
    </div>

</template>

<script>
import { getLeave }  from "@/api/bpm/leave"
import { listDept } from "@/api/system/dept";
import PeopleSelect from "@/components/PeopleSelect/index.vue";
import FileUpload from "@/components/FileUpload";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
  name: 'Index',
  components: {
    PeopleSelect,
    FileUpload,
    Treeselect,
  },
  props: {
    id: {
      type: [String, Number],
      default: undefined
    },
  },
  data() {
    return {
      entryId: undefined, // 编号
      // 部门树选项
      posOptions: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      deptOptions: [],
      peopleList: [],
      form: {
        loginName: undefined,
        deptId: undefined,
        position: undefined,
        employeeType: undefined,
        gender: undefined,
        birthday: undefined,
        contactNumber: undefined,
        email: undefined,
        education: undefined,
        workExperience: undefined,
        startDate: undefined,
        files:undefined,
        remarks: undefined,
        peopleList: '',
      },
      rules: {
        loginName: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          employeeType: [
            { required: true, message: '请选择', trigger: 'change' }
          ],
          gender: [
            { required: true, message: '请选择', trigger: 'change' }
          ],
          birthday: [
            { required: true, message: '请选择日期', trigger: 'change' }
          ],
          contactNumber: [
          { required: true, trigger: "blur", message: "联系电话不能为空" },
          {
            validator: function (rule, value, callback) {
              if (/^1[0-9]\d{9}$|^0\d{2,3}-\d{7,8}$/.test(value) === false) {
                callback(new Error("联系电话格式错误"));
              } else {
                callback();
              }
            }, trigger: "blur"
          }
          ],
          email: [
          {
            required: true,
            type: "email",
            message: "'请输入正确的邮箱地址",
            trigger: ["blur", "change"]
          }
        ],
        startDate: [
            { required: true, message: '请选择日期', trigger: 'change' }
          ],
          peopleList:[
            { required: true, message: '请选择审批人', }
          ]
        },
      status: true,

      type: 'multiple',
      //是否打开选人组件，默认不打开
      peopleOpen: false,
      fileAccept: ".crt",
      queryParams: {
        name: undefined,
        status: undefined
      },
    }
  },

  created() {
    this.entryId = this.id || this.$route.query.id;
    console.log(this.entryId);
    // this.getDetail();
    this.getList();
  },
  methods: {
    /** 获得表单信息 */
    getDetail() {
      getLeave(this.entryId).then(response => {
        this.form = response.data;
      });
    },
    fileBeforeUpload(file) {
      // let format = '.' + file.name.split(".")[1];
      // if (format !== this.fileAccept) {
      //   this.$message.error('请上传指定格式"' + this.fileAccept + '"文件');
      //   return false;
      // }
      let isRightSize = file.size / 1024 / 1024 < 5
      if (!isRightSize) {
        this.$message.error('文件大小超过 5MB')
      }
      return isRightSize
    },
    appCertUpload(event) {
      console.log(event);
      // const file = event.file;
      const readFile = new FileReader()
      readFile.onload = (e) => {
        this.form.files = e.target.result
        console.log(this.form.files);
      }
      readFile.readAsText(event.file);
    },
    /** 查询部门列表 */
    getList() {
      listDept(this.queryParams).then(response => {
        this.deptOptions = this.handleTree(response.data, "id");
      });
    },
    /** 转换部门数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.id,
        label: node.name,
        children: node.children
      };
    },
    //提交
    onSubmit() {
       this.$refs.form.validate(valid => {
          if (valid) {
            console.log(this.form);
            this.$message.success('提交成功')
          } else {
            console.log('error submit!!');
            return false;
          }
        });
    },
    //暂存
    onSave() {

    },
    // 关闭标签
    handleClose(tag) {
      this.peopleList.splice(this.peopleList.indexOf(tag), 1);
    },
    //打开选人弹窗
    openPS() {
      this.peopleOpen = true;
    },
    //选择人的确定按钮事件 submitPeople(nikeNamelist)方法传参一个默认接收用户昵称数组   submitPeople(peopleList,nikeNamelist)方法传参两个则是接收用户昵称数组和用户账号数组
    submitPeople(peopleList,nikeNamelist) {
      console.log(peopleList);
      this.peopleList = nikeNamelist;
      this.form.peopleList = nikeNamelist.join(',');
      this.peopleOpen = false;
    },
  }
}
</script>
<style lang="scss" scoped>
.user-avatar{
  width: 22px;
    height: 22px;
    line-height: 19px;
    font-size: 12px;
    background: #46c26f;
    border: 1px solid transparent;
    border-radius: 50%;
    color: #fff;
    display: inline-block;
    overflow: hidden;
    text-align: center;
    vertical-align: middle;
    margin-bottom: 2px;
}
.el-tag+.el-tag {
  margin-left: 10px;
}

.button-new-tag {
  margin-right: 10px;
  height: 30px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
</style>