添加员工管理

yz_08

2021-01-22 faea1186aa736e93b7da38e928f64e8d83b56b59

 src/views/user/inemployees.vue

@@ -1,62 +1,250 @@
<template>
  <div>
    <el-row>
      <el-col :span="18"><h3 class="bu-tian-jia-title">在职员工</h3></el-col>
      <el-col :span="6"><el-input v-model="input" placeholder="请输入内容" style="width:200px" /><el-button type="primary">查询</el-button> <el-button type="danger">高级查询</el-button></el-col>
    </el-row>
    <el-row>
      <el-col :span="3">员工编号：<el-input v-model="input" placeholder="请输入内容" style="width:120px" /></el-col>
      <el-col :span="3">员工编号：<el-input v-model="input" placeholder="请输入内容" style="width:120px" /></el-col>
      <el-col :span="3">员工编号：<el-input v-model="input" placeholder="请输入内容" style="width:120px" /></el-col>
      <el-col :span="3">员工编号：<el-input v-model="input" placeholder="请输入内容" style="width:120px" /></el-col>
      <el-col :span="3">员工编号：<el-input v-model="input" placeholder="请输入内容" style="width:120px" /></el-col>
      <el-col :span="3">员工编号：<el-input v-model="input" placeholder="请输入内容" style="width:120px" /></el-col>
      <el-col :span="6"><el-button type="primary">查询</el-button> <el-button type="danger">高级查询</el-button></el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <form>
          <table>
            <tr><td>性别：</td><td><el-radio-group v-model="radio">
              <el-radio :label="3">备选项</el-radio>
              <el-radio :label="6">备选项</el-radio>
              <el-radio :label="9">备选项</el-radio>
            </el-radio-group></td></tr>
            <tr><td>最高学历：</td><td><el-radio-group v-model="radio">
              <el-radio :label="3">备选项</el-radio>
              <el-radio :label="6">备选项</el-radio>
              <el-radio :label="9">备选项</el-radio>
            </el-radio-group></td></tr>
            <tr><td>政治面貌：</td><td><el-radio-group v-model="radio">
              <el-radio :label="3">备选项</el-radio>
              <el-radio :label="6">备选项</el-radio>
              <el-radio :label="9">备选项</el-radio>
            </el-radio-group></td></tr>
            <tr><td>入职日期：</td><td><el-radio-group v-model="radio">
              <el-radio :label="3">备选项</el-radio>
              <el-radio :label="6">备选项</el-radio>
              <el-radio :label="9">备选项</el-radio>
            </el-radio-group></td></tr>
            <tr><td>年龄：</td><td><el-radio-group v-model="radio">
              <el-radio :label="3">备选项</el-radio>
              <el-radio :label="6">备选项</el-radio>
              <el-radio :label="9">备选项</el-radio>
            </el-radio-group></td></tr>
            <tr><td>档案情况：</td><td><el-radio-group v-model="radio">
              <el-radio :label="3">备选项</el-radio>
              <el-radio :label="6">备选项</el-radio>
              <el-radio :label="9">备选项</el-radio>
            </el-radio-group></td></tr>
            <tr><td>保险类型：</td><td><el-radio-group v-model="radio">
              <el-radio :label="3">备选项</el-radio>
              <el-radio :label="6">备选项</el-radio>
              <el-radio :label="9">备选项</el-radio>
            </el-radio-group></td></tr>
          </table>
        </form>
      </el-col>
    </el-row>
    <el-container>
      <el-header :height="headerHeight">
        <el-row>
          <el-col :span="16"><h3 class="bu-tian-jia-title">在职员工</h3></el-col>
          <el-col :span="8">
            <el-input
              v-model="input"
              placeholder="请输入内容"
              style="width:200px"
            /><el-button type="primary">查询</el-button>
            <el-button type="danger" @click="advancedQueryShowMethods">高级查询</el-button></el-col>
        </el-row>
        <div v-show="advancedQueryShow">
          <form>
            <el-row>
              <el-col
                :span="3"
              >员工编号：<el-input
                v-model="input"
                placeholder="请输入内容"
                style="width:80px"
              /></el-col>
              <el-col
                :span="3"
              >员工编号：<el-input
                v-model="input"
                placeholder="请输入内容"
                style="width:80px"
              /></el-col>
              <el-col
                :span="3"
              >员工编号：<el-input
                v-model="input"
                placeholder="请输入内容"
                style="width:80px"
              /></el-col>
              <el-col
                :span="3"
              >员工编号：<el-input
                v-model="input"
                placeholder="请输入内容"
                style="width:80px"
              /></el-col>
              <el-col
                :span="3"
              >员工编号：<el-input
                v-model="input"
                placeholder="请输入内容"
                style="width:80px"
              /></el-col>
              <el-col
                :span="3"
              >员工编号：<el-input
                v-model="input"
                placeholder="请输入内容"
                style="width:80px"
              /></el-col>
              <el-col
                :span="6"
              ><el-button type="primary">查询</el-button>
                <el-button type="danger">重置</el-button></el-col>
            </el-row>
            <el-row>
              <el-col :span="24">

                <table>
                  <tr><td>性别：</td><td><el-radio-group v-model="radio">
                    <el-radio :label="3">备选项</el-radio>
                    <el-radio :label="6">备选项</el-radio>
                    <el-radio :label="9">备选项</el-radio>
                  </el-radio-group></td></tr>
                  <tr><td>最高学历：</td><td><el-radio-group v-model="radio">
                    <el-radio :label="3">备选项</el-radio>
                    <el-radio :label="6">备选项</el-radio>
                    <el-radio :label="9">备选项</el-radio>
                  </el-radio-group></td></tr>
                  <tr><td>政治面貌：</td><td><el-radio-group v-model="radio">
                    <el-radio :label="3">备选项</el-radio>
                    <el-radio :label="6">备选项</el-radio>
                    <el-radio :label="9">备选项</el-radio>
                  </el-radio-group></td></tr>
                  <tr><td>入职日期：</td><td><el-radio-group v-model="radio">
                    <el-radio :label="3">备选项</el-radio>
                    <el-radio :label="6">备选项</el-radio>
                    <el-radio :label="9">备选项</el-radio>
                  </el-radio-group></td></tr>
                  <tr><td>年龄：</td><td><el-radio-group v-model="radio">
                    <el-radio :label="3">备选项</el-radio>
                    <el-radio :label="6">备选项</el-radio>
                    <el-radio :label="9">备选项</el-radio>
                  </el-radio-group></td></tr>
                  <tr><td>档案情况：</td><td><el-radio-group v-model="radio">
                    <el-radio :label="3">备选项</el-radio>
                    <el-radio :label="6">备选项</el-radio>
                    <el-radio :label="9">备选项</el-radio>
                  </el-radio-group></td></tr>
                  <tr><td>保险类型：</td><td><el-radio-group v-model="radio">
                    <el-radio :label="3">备选项</el-radio>
                    <el-radio :label="6">备选项</el-radio>
                    <el-radio :label="9">备选项</el-radio>
                  </el-radio-group></td></tr>
                </table>
              </el-col>
            </el-row></form>
        </div>
      </el-header>
      <el-container>
        <el-aside width="300px">
          <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" />
        </el-aside>
        <el-main> <el-table
          :data="tableData"
          style="width: 100%"
        >
          <el-table-column
            prop="date"
            label="日期"
            width="180"
          />
          <el-table-column
            prop="name"
            label="姓名"
            width="180"
          />
          <el-table-column
            prop="address"
            label="地址"
          />
        </el-table></el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
export default {
  data() {
    return {
      headerHeight: '60px',
      advancedQueryShow: false,
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }],
      data: [
        {
          label: '一级 1',
          children: [
            {
              label: '二级 1-1',
              children: [
                {
                  label: '三级 1-1-1'
                }
              ]
            }
          ]
        },
        {
          label: '一级 2',
          children: [
            {
              label: '二级 2-1',
              children: [
                {
                  label: '三级 2-1-1'
                }
              ]
            },
            {
              label: '二级 2-2',
              children: [
                {
                  label: '三级 2-2-1'
                }
              ]
            }
          ]
        },
        {
          label: '一级 3',
          children: [
            {
              label: '二级 3-1',
              children: [
                {
                  label: '三级 3-1-1'
                }
              ]
            },
            {
              label: '二级 3-2',
              children: [
                {
                  label: '三级 3-2-1'
                }
              ]
            }
          ]
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  methods: {
    handleNodeClick(data) {
      console.log(data)
    },
    advancedQueryShowMethods() {
      if (this.advancedQueryShow) {
        this.headerHeight = '60px'
        this.advancedQueryShow = false
      } else {
        this.headerHeight = '300px'
        this.advancedQueryShow = true
      }
    }
  }
}
</script>
<style lang="scss">
.el-aside{
padding: 20px;
background: #f3f5f8;
height: 600px;
  .el-tree{
      height: 100%;
  }
}
.el-main{
  height: 600px;
}
</style>