web-achieve/src/views/userDeclare/parts/research.vue

<template>
  <div id="research">
    <el-row>
      <el-col :span="24" class="research">
        <el-col :span="24" class="one">
          <el-button type="primary" size="mini" @click="add">添加研发用户</el-button>
        </el-col>
        <el-col :span="24" class="two">
          <el-col :span="24" class="list">
            <el-table :data="list" border height="580">
              <el-table-column prop="research_name" label="姓名" align="center" show-overflow-tooltip> </el-table-column>
              <el-table-column prop="card" label="身份证号" align="center" show-overflow-tooltip> </el-table-column>
              <el-table-column prop="gender" label="性别" align="center" show-overflow-tooltip> </el-table-column>
              <el-table-column prop="birth" label="出生日期" align="center" show-overflow-tooltip> </el-table-column>
              <el-table-column prop="phone" label="电话" align="center" show-overflow-tooltip> </el-table-column>
              <el-table-column prop="email" label="邮箱" align="center" show-overflow-tooltip> </el-table-column>
              <el-table-column prop="zw" label="职务" align="center" show-overflow-tooltip> </el-table-column>
              <el-table-column prop="position" label="职称" align="center" show-overflow-tooltip> </el-table-column>
              <el-table-column prop="education" label="文化程度" align="center" show-overflow-tooltip> </el-table-column>
              <el-table-column prop="degree" label="学位" align="center" show-overflow-tooltip> </el-table-column>
              <el-table-column prop="abroad" label="是否留学归国" align="center" show-overflow-tooltip> </el-table-column>
              <el-table-column prop="research_company" label="工作单位" align="center" show-overflow-tooltip> </el-table-column>
              <el-table-column prop="devote" label="对成果创造性贡献" align="center" show-overflow-tooltip> </el-table-column>
              <el-table-column fixed="right" label="操作" width="100" align="center">
                <template slot-scope="scope">
                  <el-button type="text" size="small" @click="toEdit(scope.$index, scope.row)">编辑</el-button>
                  <el-button type="text" size="small" @click="toDelete(scope.$index, scope.row)">刪除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-col>
        <el-col :span="24" class="btn">
          <el-button type="primary" size="mini" @click="researchUp">上一步</el-button>
          <el-button type="primary" size="mini" @click="researchBtn">下一步</el-button>
        </el-col>
      </el-col>
    </el-row>
    <el-dialog class="dialog" title="研发人员信息管理" width="40%" :visible.sync="dialog" @closed="handleClose" :destroy-on-close="true">
      <el-form :model="form" :rules="rules" ref="form" label-width="130px">
        <el-form-item label="姓名" prop="research_name">
          <el-input v-model="form.research_name" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="身份证号" prop="card">
          <el-input v-model="form.card" placeholder="请输入身份证号"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-radio-group v-model="form.gender">
            <el-radio label="男"></el-radio>
            <el-radio label="女"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="出生日期" prop="birth">
          <el-date-picker v-model="form.birth" type="date" placeholder="选择日期时间" format="yyyy-MM-dd" value-format="yyyy-MM-dd"> </el-date-picker>
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input v-model="form.phone" placeholder="请输入电话"></el-input>
        </el-form-item>
        <el-form-item label="email" prop="email">
          <el-input v-model="form.email" placeholder="请输入邮箱"></el-input>
        </el-form-item>
        <el-form-item label="职务" prop="zw">
          <el-input v-model="form.zw" placeholder="请输入职务"></el-input>
        </el-form-item>
        <el-form-item label="职称" prop="position">
          <el-input v-model="form.position" placeholder="请输入职称"></el-input>
        </el-form-item>
        <el-form-item label="文化程度" prop="education">
          <el-input v-model="form.education" placeholder="请输入文化程度"></el-input>
        </el-form-item>
        <el-form-item label="学位" prop="degree">
          <el-input v-model="form.degree" placeholder="请输入学位"></el-input>
        </el-form-item>
        <el-form-item label="是否留学归国" prop="abroad">
          <el-radio-group v-model="form.abroad">
            <el-radio label="是"></el-radio>
            <el-radio label="否"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="工作单位" prop="research_company">
          <el-input v-model="form.research_company" placeholder="请输入工作单位"></el-input>
        </el-form-item>
        <el-form-item label="对成果创造性贡献" prop="devote">
          <el-input
            v-model="form.devote"
            type="textarea"
            maxlength="200"
            show-word-limit
            :autosize="{ minRows: 4, maxRows: 5 }"
            placeholder="请输入对成果创造性贡献"
          ></el-input>
        </el-form-item>
        <el-col :span="24" class="btn">
          <el-button type="primary" size="mini" @click="handleClose">取消</el-button>
          <el-button type="primary" size="mini" @click="onSubmit('form')">保存</el-button>
        </el-col>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
export default {
  name: 'research',
  props: {
    researchForm: { type: Array },
  },
  components: {},
  data: function() {
    return {
      dialog: false,
      form: {},
      rules: {
        research_name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        card: [{ required: true, message: '请输入身份证号', trigger: 'blur' }],
        gender: [{ required: true, message: '请选择性别', trigger: 'change' }],
        position: [{ required: true, message: '请输入技术职称', trigger: 'blur' }],
        education: [{ required: true, message: '请输入文化程度', trigger: 'blur' }],
        degree: [{ required: true, message: '请输入学位', trigger: 'blur' }],
        abroad: [{ required: true, message: '请选择是否留学归国', trigger: 'change' }],
        research_company: [{ required: true, message: '请输入工作单位', trigger: 'blur' }],
        devote: [{ required: true, message: '请输入对成果创造性贡献', trigger: 'blur' }],
      },
      // 列表
      list: [],
    };
  },
  created() {},
  methods: {
    researchUp() {
      this.$emit('researchUp');
    },
    researchBtn() {
      this.$emit('researchBtn', { data: this.list });
    },
    // 添加研发人员
    // 添加用户
    add() {
      this.dialog = true;
    },
    // 保存
    onSubmit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          console.log(this.form);
          if (this.form.index == undefined) {
            let data = _.cloneDeep(this.list);
            data.push(this.form);
            this.$set(this, `list`, data);
            this.handleClose();
          } else {
            this.handleClose();
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 编辑
    toEdit(index, row) {
      row.index = index;
      this.$set(this, `form`, row);
      this.dialog = true;
    },
    // 删除
    toDelete(index) {
      this.list.splice(index, 1);
    },
    // 取消
    handleClose() {
      this.form = {};
      this.dialog = false;
    },
    search() {
      this.$set(this, `list`, this.researchForm);
    },
  },
  computed: {
    ...mapState(['user']),
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    researchForm: {
      deep: true,
      immediate: true,
      handler(val) {
        this.search();
      },
    },
  },
};
</script>

<style lang="less" scoped>
.research {
  padding: 0 10px 0 0;
  .one {
    margin: 0 0 10px 0;
  }
  .two {
    margin: 0 0 10px 0;
    .list {
      margin: 0 0 10px 0;
      border-bottom: 1px solid #f1f1f1;
    }
    .page {
      height: 40px;
      overflow: hidden;
      border: 1px solid red;
    }
  }
  .btn {
    text-align: center;
  }
}
.dialog {
  .btn {
    text-align: center;
    padding: 0 0 10px 0;
  }
}
/deep/.el-dialog__body {
  padding: 0 15px 40px 0;
}
</style>