修改云盘智搜-附件管理,基础界面

yz_08

2021-02-24 3ca12c43a0cb1680e2508ca2d16bd207e29cb5c1

修改云盘智搜-附件管理,基础界面

 src/settings.js

@@ -25,6 +25,6 @@
    // 个人文件上传地址
    uploadSinglePath: 'http://120.24.23.155:8301/hr/empAccessory',
    // 个人文件上传地址
    getEmpBaseInfoImage: 'http://127.0.0.1:8301/hr/empBaseInfo/image/'
    getEmpBaseInfoImage: 'http://120.24.23.155:8301/hr/empBaseInfo/image/'
  }
}

 src/utils/request.js

@@ -84,10 +84,12 @@
        })
        break
      case 401:
        Message({
          message: '很抱歉，认证已失效，请重新登录',
          type: 'error',
          duration: messageDuration
        MessageBox.alert('很抱歉，认证已失效', '温馨提示', {
          confirmButtonText: '确定',
          showClose: false,
          callback: action => {
            router.push('/login')
          }
        })
        break
      default:
@@ -151,7 +153,7 @@
        return tansParams(params)
      }],
      headers: {
        'Content-Type': 'multipart/form-data'
        'Content-Type': 'application/x-www-form-urlencoded'
      }
    })
  },

 src/views/user/Informationinput.vue

@@ -72,7 +72,6 @@
              </el-button>
            </template>
          </el-table-column>
          <el-table-column prop="" label="照片" width="60" />
          <el-table-column prop="empNumb" label="员工编号" width="100" />
          <el-table-column prop="empName" label="姓名" width="100" />
          <el-table-column prop="deptName" label="护卫点" width="100" />

 src/views/yunpan/fujian.vue

@@ -1,704 +1,730 @@
<template>

  <div>

    <el-container>

      <el-header :height="headerHeight">

        <el-row class="search-title">

          <el-col :span="18" class="title">

            <div class="zs-title">附件管理</div>

          </el-col>

          <el-col :span="6" class="search">

            <el-input v-model="empName" class="input-empName" maxlength="10" size="medium" style="width:220px">

              <el-button slot="append" icon="el-icon-search" @click.native="findEmpAccessory()" />

            </el-input>

            <el-button

              type="danger"

              size="mini"

              class="hr-but-all"

              @click="advancedQueryShowMethods"

            >高级查询</el-button>

          </el-col>

        </el-row>

        <el-form v-show="advancedQueryShow" ref="queryform" :model="queryform">

          <el-row>

            <el-col :span="3">员工编号：

              <el-input v-model="queryform.empNumb" size="small" maxlength="20" style="width:85px" />

            </el-col>

            <el-col :span="3">姓名：

              <el-input v-model="queryform.empName" size="small" maxlength="10" style="width:110px" />

            </el-col>

            <el-col :span="4">身份证号：

              <el-input v-model="queryform.certificateNumb" size="small" maxlength="18" style="width:140px" />

            </el-col>

            <el-col :span="3">护卫点：

              <el-input v-model="queryform.deptName" size="small" maxlength="20" style="width:100px" />

            </el-col>

            <el-col :span="8">入职日期：

              <el-date-picker

                v-model="queryform.entryDate"

                size="small"

                type="daterange"

                align="right"

                unlink-panels

                range-separator="至"

                value-format="yyyy-MM-dd"

                start-placeholder="开始日期"

                end-placeholder="结束日期"

                :picker-options="pickerOptions"

              />

            </el-col>

            <el-col :span="3">

              <el-button size="mini" class="hr-but-all" type="primary" @click="findEmpAccessoryAll()">查询</el-button>

              <el-button size="mini" class="hr-but" type="danger" @click="resetQueryform()">重置</el-button>

            </el-col>

          </el-row>

          <el-row>

            <el-col :span="24">

              <table id="searchTable">

                <tr>

                  <td class="td">性别</td>

                  <td class="td-group">

                    <el-checkbox-group v-model="queryform.sex" class="fj-checkbox">

                      <el-checkbox label="" @change="selectAllSex">全部</el-checkbox>

                      <el-checkbox label="1">男性</el-checkbox>

                      <el-checkbox label="2">女性</el-checkbox>

                    </el-checkbox-group>

                  </td>

                </tr>

                <tr>

                  <td class="td">最高学历</td>

                  <td class="td-group">

                    <el-checkbox-group v-model="queryform.education" class="fj-checkbox">

                      <el-checkbox label="" @change="selectAllEducation">全部</el-checkbox>

                      <el-checkbox label="91">无学历</el-checkbox>

                      <el-checkbox label="81">小学</el-checkbox>

                      <el-checkbox label="71">初中</el-checkbox>

                      <el-checkbox label="61">高中</el-checkbox>

                      <el-checkbox label="42">中技</el-checkbox>

                      <el-checkbox label="41">中专</el-checkbox>

                      <el-checkbox label="31">大学专科</el-checkbox>

                      <el-checkbox label="21">大学本科</el-checkbox>

                      <el-checkbox label="11">硕士</el-checkbox>

                      <el-checkbox label="10">博士</el-checkbox>

                    </el-checkbox-group>

                  </td>

                </tr>

                <tr>

                  <td class="td">政治面貌</td>

                  <td class="td-group">

                    <el-checkbox-group v-model="queryform.politics" class="fj-checkbox">

                      <el-checkbox label="" @change="selectAllPolitics">全部</el-checkbox>

                      <el-checkbox label="01">党员</el-checkbox>

                      <el-checkbox label="02">预备</el-checkbox>

                      <el-checkbox label="03">共青</el-checkbox>

                      <el-checkbox label="04">民革</el-checkbox>

                      <el-checkbox label="05">民盟</el-checkbox>

                      <el-checkbox label="06">民建</el-checkbox>

                      <el-checkbox label="07">民进</el-checkbox>

                      <el-checkbox label="08">农工</el-checkbox>

                      <el-checkbox label="09">致公</el-checkbox>

                      <el-checkbox label="10">九三</el-checkbox>

                      <el-checkbox label="11">台盟</el-checkbox>

                      <el-checkbox label="12">民主</el-checkbox>

                      <el-checkbox label="13">群众</el-checkbox>

                    </el-checkbox-group>

                  </td>

                </tr>

                <tr>

                  <td class="td">年龄</td>

                  <td class="td-group">

                    <el-checkbox-group v-model="queryform.age" class="fj-checkbox">

                      <el-checkbox label="" @change="selectAllage">全部</el-checkbox>

                      <el-checkbox label="18-29">18-29</el-checkbox>

                      <el-checkbox label="30-39">30-39</el-checkbox>

                      <el-checkbox label="40-49">40-49</el-checkbox>

                      <el-checkbox label="50-59">50-59</el-checkbox>

                      <el-checkbox label="60-69">60-69</el-checkbox>

                      <el-checkbox label="69-999">69及以上</el-checkbox>

                    </el-checkbox-group>

                  </td>

                </tr>

                <tr>

                  <td class="td">档案情况</td>

                  <td class="td-group">

                    <el-checkbox-group v-model="queryform.archivesStatus" class="fj-checkbox">

                      <el-checkbox label="" @change="selectAllArchivesStatus">全部</el-checkbox>

                      <el-checkbox label="0">已移交</el-checkbox>

                      <el-checkbox label="1">未移交</el-checkbox>

                    </el-checkbox-group>

                  </td>

                </tr>

                <tr>

                  <td class="td">保险类型</td>

                  <td class="td-group">

                    <el-checkbox-group v-model="queryform.insuranceType" class="fj-checkbox">

                      <el-checkbox label="" @change="selectAllInsuranceType">全部</el-checkbox>

                      <el-checkbox label="1">深户（五险一档）</el-checkbox>

                      <el-checkbox label="2">非深户(五险一档)</el-checkbox>

                      <el-checkbox label="3">非深户(五险二档)</el-checkbox>

                      <el-checkbox label="4">非深户(五险三档)</el-checkbox>

                      <el-checkbox label="5">非深户(四险三档)</el-checkbox>

                    </el-checkbox-group>

                  </td>

                </tr>

              </table>

            </el-col>

          </el-row>

        </el-form>

      </el-header>

      <el-main>

        <el-row style="margin-bottom: 10px;height: 40px;">

          <el-col :span="24">

            <el-button class="hr-but-all" type="danger" @click="dialogFormVisible = true">新建标签</el-button>

            <el-popconfirm title="是否删除标签？" @onConfirm="deldialogFormVisible = true">

              <el-button slot="reference" class="hr-but" type="danger">删除标签</el-button>

            </el-popconfirm>

            <el-button class="hr-but-all" type="danger" @click="downloaddialogFormVisible = true">下载附件</el-button>

            <el-dialog

              title="新建标签"

              :visible.sync="dialogFormVisible"

              width="25%"

              class="add-label"

            >

              <el-form ref="labelform" :model="labelform" :rules="rules">

                <el-form-item

                  label="标签名称:"

                  :label-width="formLabelWidth"

                  prop="labelname"

                >

                  <el-input v-model="labelform.labelname" autocomplete="off" />

                </el-form-item>

                <el-form-item

                  label="标签code:"

                  :label-width="formLabelWidth"

                  prop="labelcode"

                >

                  <el-input v-model="labelform.labelcode" autocomplete="off" />

                </el-form-item>

                <el-form-item label="标签排序:" :label-width="formLabelWidth" prop="sort">

                  <el-input-number

                    v-model="labelform.sort"

                    :min="0"

                    :max="100"

                    label="排序"

                  />

                </el-form-item></el-form>

              <div slot="footer" class="dialog-footer">

                <el-button @click="dialogFormVisible = false">取 消</el-button>

                <el-button

                  type="primary"

                  @click="addlabel('labelform')"

                >确 定</el-button>

              </div>

            </el-dialog>

            <el-dialog

              title="删除标签"

              :visible.sync="deldialogFormVisible"

              width="25%"

              class="add-label"

            >

              <el-form ref="dellabelform" :model="labelform" :rules="delrules">

                <el-form-item

                  label="标签名称:"

                  :label-width="formLabelWidth"

                  prop="labelid"

                >

                  <el-select v-model="labelform.labelid" placeholder="请选择标签名称">

                    <el-option

                      v-for="item in labelData"

                      :key="item.labelid"

                      :value="item.labelid"

                      :label="item.labelname"

                    />

                  </el-select>

                </el-form-item>

              </el-form>

              <div slot="footer" class="dialog-footer">

                <el-button @click="deldialogFormVisible = false">取 消</el-button>

                <el-button

                  type="primary"

                  @click="dellabel('dellabelform')"

                >确 定</el-button>

              </div>

            </el-dialog>

            <el-dialog

              title="下载附件"

              :visible.sync="downloaddialogFormVisible"

              width="25%"

              class="add-label"

            >

              <el-form ref="dellabelform" :model="labelform" :rules="delrules">

                <el-form-item

                  label="标签名称:"

                  :label-width="formLabelWidth"

                  prop="labelid"

                >

                  <el-select v-model="labelform.labelid" placeholder="请选择标签名称">

                    <el-option

                      key="-1"

                      value="-1"

                      label="全部"

                    />

                    <el-option

                      v-for="item in labelData"

                      :key="item.labelid"

                      :value="item.labelid"

                      :label="item.labelname"

                    />

                  </el-select>

                </el-form-item>

              </el-form>

              <div slot="footer" class="dialog-footer">

                <el-button @click="downloaddialogFormVisible = false">取 消</el-button>

                <el-button

                  type="primary"

                  @click="downloadlabel('dellabelform')"

                >确 定</el-button>

              </div>

            </el-dialog>



          </el-col>

        </el-row>

        <el-dialog title="附件管理" :visible.sync="dialogShowUploadfj" width="80%" class="fjgl-class" top="10px">

          <uploadfj v-if="dialogShowUploadfj" :rowitem="rowitem" @cancleChooseUser="cancleChooseUser()" />

        </el-dialog>

        <el-table ref="empAccessoryTable" :data="tableData" class="fj-table" style="width: 100%;color: #000;">

          <el-table-column

            type="selection"

            width="55"

          />

          <el-table-column label="操作" width="120">

            <template slot-scope="scope">

              <el-button

                type="text"

                size="small"

                @click.native.prevent="dialogShow(scope.$index, scope.row)"

              >

                上传

              </el-button>

            </template>

          </el-table-column>

          <el-table-column prop="empName" label="姓名" width="100" />

          <el-table-column prop="certificateNumb" label="身份证号" width="180" />

          <el-table-column prop="deptName" label="护卫点(部门)" width="180" />

          <el-table-column prop="jobName" label="岗位" width="100" />

          <template v-for="(col) in labelData">

            <el-table-column :key="col.labelid" :prop="col.labelcode" :label="col.labelname">

              <template slot-scope="scope">

                <el-link type="primary"> {{ scope.row[col.labelcode] }}</el-link>

              </template>

            </el-table-column>

          </template>



        </el-table>

        <pagination

          v-show="total>0"

          :total="total"

          :page.sync="pagination.num"

          :limit.sync="pagination.size"

          @pagination="search"

        />

      </el-main>

    </el-container>

  </div>

</template>

<script>

import Pagination from '@/components/Pagination'



export default {

  components: {

    Pagination

  },

  data() {

    return {

      queryCheckAll: {

        sexcheckAll: false,

        sexisIndeterminate: true

      },

      downloaddialogFormVisible: false,

      deldialogFormVisible: false,

      formLabelWidth: '100px',

      dialogFormVisible: false,

      labelform: {

        labelname: '',

        labelid: '',

        labelcode: '',

        empIds: '',

        sort: 0

      },

      rules: {

        labelname: [

          { required: true, message: '请输入标签名称', trigger: 'blur' },

          { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }

        ],

        labelcode: [

          { required: true, message: '请输入标签code', trigger: 'blur' },

          { min: 3, max: 10, message: '长度在 3 到 20 个字符', trigger: 'blur' }

        ],

        sort: [{ required: true, message: '请输入排序', type: 'number', trigger: 'blur' }]

      },

      delrules: {

        labelid: [{ required: true, message: '请选择标签', trigger: 'change' }]

      },

      dialogShowUploadfj: false,

      empName: '',

      queryform: {

        empNumb: '',

        empName: '',

        certificateNumb: '',

        deptName: '',

        entryDate: '',

        sex: [],

        education: [],

        politics: [],

        age: [],

        archivesStatus: [],

        insuranceType: []

      },

      total: 0, // 总数量

      pagination: { // 分页参数

        size: 10,

        num: 1

      },

      headerHeight: '20px',

      advancedQueryShow: false,

      dialogTableVisible: false,

      pickerOptions: {

        shortcuts: [

          {

            text: '最近一周',

            onClick(picker) {

              const end = new Date()

              const start = new Date()

              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)

              picker.$emit('pick', [start, end])

            }

          },

          {

            text: '最近一个月',

            onClick(picker) {

              const end = new Date()

              const start = new Date()

              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)

              picker.$emit('pick', [start, end])

            }

          },

          {

            text: '最近三个月',

            onClick(picker) {

              const end = new Date()

              const start = new Date()

              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)

              picker.$emit('pick', [start, end])

            }

          }

        ]

      },

      tableData: [],

      labelData: [],

      defaultProps: {

        children: 'children',

        label: 'label'

      },

      rowitem: {}

    }

  },

  mounted() {

    this.initLabel()

    this.fetch()

  },

  methods: {

    handleCheckAllChange(val) {

      debugger

      this.queryCheckAll.sexisIndeterminate = false

    },

    downloadlabel(formName) {

      this.$refs[formName].validate(valid => {

        if (valid) {

          var selected = this.$refs.empAccessoryTable.selection

          if (selected.length < 1) {

            this.$message({

              message: '请选择数据!',

              type: 'warning'

            })

            return

          }

          const empIds = []

          selected.forEach((j) => {

            empIds.push(j.empId)

          })

          this.labelform.empIds = empIds

          this.$download('hr/empAccessory/singledownload', { ...this.labelform }, '附件_' + new Date().getTime() + '.zip').then(() => {

            this.downloaddialogFormVisible = false

            this.$message({

              message: this.$t('下载成功'),

              type: 'success'

            })

          })

        }

      })

    },

    dellabel(formName) {

      this.$refs[formName].validate(valid => {

        if (valid) {

          this.$get('hr/empAccessory/' + this.labelform.labelid).then((r) => {

            if (r.data.data > 0) {

              this.$message({

                message: this.$t('标签内还有' + r.data.data + '个附件,若要删除请先转存附件!'),

                type: 'warning'

              })

            } else {

              this.$delete('hr/label', { ...this.labelform }).then(() => {

                this.dialogFormVisible = false

                this.$message({

                  message: this.$t('tips.deleteSuccess'),

                  type: 'success'

                })

                this.deldialogFormVisible = false

                // 初始加载

                this.initLabel()

                this.fetch()

              })

            }

          })

        }

      })

    },

    addlabel(formName) {

      this.$refs[formName].validate(valid => {

        if (valid) {

          this.$post('hr/label', { ...this.labelform }).then(() => {

            this.dialogFormVisible = false

            this.$message({

              message: this.$t('tips.createSuccess'),

              type: 'success'

            })

            this.labelform.labelname = ''

            this.labelform.sort = 0

            this.labelform.labelcode = ''

            // 初始加载

            this.initLabel()

            this.fetch()

          })

        }

      })

    },

    dialogShow(index, tableData) {

      this.rowitem = tableData

      this.dialogShowUploadfj = true

    },

    cancleChooseUser() {

      this.dialogShowUploadfj = false

    },

    skipuploadfj() {

      this.resolvePath('/uploadfj')

    },

    resetQueryform() {

      this.queryform = {

        empNumb: '',

        empName: '',

        certificateNumb: '',

        deptName: '',

        entryDate: '',

        sex: [],

        education: [],

        politics: [],

        age: [],

        archivesStatus: [],

        insuranceType: []

      }

    },

    findEmpAccessoryAll() {

      this.fetch({

        ...this.queryform

      })

    },

    findEmpAccessory() {

      var params = { empName: this.empName }

      this.fetch({

        ...params

      })

    },

    // 翻页方法

    search() {

      this.fetch({

        ...this.queryform

      })

    },

    handleNodeClick(data) {

      console.log(data)

    },

    fetch(params = {}) {

      params.pageSize = this.pagination.size

      params.pageNum = this.pagination.num

      this.$get('hr/empAccessory/list', {

        ...params

      }).then((r) => {

        const data = r.data.data

        this.total = data.total

        this.tableData = data.rows

      })

    },

    initLabel() {

      this.$get('hr/label').then((r) => {

        this.labelData = r.data.data

      })

    },

    advancedQueryShowMethods() {

      if (this.advancedQueryShow) {

        this.headerHeight = '70px'

        this.advancedQueryShow = false

      } else {

        this.headerHeight = '330px'

        this.advancedQueryShow = true

      }

    },

    showEmpInfo() {

      this.dialogTableVisible = true

    },

    selectAllSex(val) {

      if (val) {

        this.queryform.sex = ['1', '2']

      } else {

        this.queryform.sex = []

      }

    },

    selectAllEducation(val) {

      if (val) {

        this.queryform.education = ['91', '81', '71', '61', '42', '41', '31', '21', '11', '10']

      } else {

        this.queryform.education = []

      }

    },

    selectAllPolitics(val) {

      if (val) {

        this.queryform.politics = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13']

      } else {

        this.queryform.politics = []

      }

    },

    selectAllage(val) {

      if (val) {

        this.queryform.age = ['18-29', '30-39', '40-49', '50-59', '60-69', '69-999']

      } else {

        this.queryform.age = []

      }

    },

    selectAllArchivesStatus(val) {

      if (val) {

        this.queryform.archivesStatus = ['0', '1']

      } else {

        this.queryform.archivesStatus = []

      }

    },

    selectAllInsuranceType(val) {

      if (val) {

        this.queryform.insuranceType = ['1', '2', '3', '4', '5']

      } else {

        this.queryform.insuranceType = []

      }

    }

  }

}

</script>

<style lang="scss" scoped>

.el-main {

    margin-top: 10px;

}

.el-input-number {

    width: 100%;

}

</style>

<style lang="scss">

.fj-checkbox{

  .el-checkbox__input.is-checked .el-checkbox__inner {

      border-color: #a32c30;;

      background: #a32c30;;

  }

  .el-checkbox__label {

    color: #000 !important;

  }

}

.fjgl-class{

    height: 90%;

     overflow: auto;

}

.add-lable {

    text-align: initial;

}

.input-empName .el-input-group__append{

      padding: 0 15px 0 0;

}

.fj-table thead {

    color: #000;

}

.td {

    background-color: #dddcdc !important;

    width: 160px;

    text-align: center;

}

.td-group {

    padding-left: 20px;

}

.search-title {

    height: 50px;

    .search {

        position: relative;

        top: 50%;

        transform: translateY(-50%);

    }

    .title {

        position: relative;

        top: 40%;

        transform: translateY(-50%);

    }

    .zs-title {

        border-left: 4px solid #a32c30;

        padding-left: 10px;

        font-size: 16px;

    }

}



#searchTable {

    margin-top: 10px;

    border-collapse: collapse;

    width: 100%;

}



#searchTable td,

#searchTable th {

    border: 1px solid #b0b0b0;

    color: #000;

    height: 40px;

    background-color: #fff;

}



#ygxq table {

    color: #000;

    border-collapse: collapse;

    margin: 0 auto;

    text-align: center;

    width: 100%;

    margin-top: 20px;

}



#ygxq table td,

#ygxq table th {

    border: 1px solid #eae9e9;

    color: #666;

    height: 30px;

}



#ygxq table thead th {

    background-color: #fff;

    width: 100px;

}



#ygxq table tr:nth-child(odd) {

    background: #fff;

}



#ygxq table tr:nth-child(even) {

    background: #f5fafa;

}



</style>

<template>
  <div>
    <el-container>
      <el-header :height="headerHeight">
        <el-row class="search-title">
          <el-col :span="16" class="title">
            <div class="zs-title">附件管理</div>
          </el-col>
          <el-col :span="8" class="search">
            <el-input v-model="basic" class="input-empName" maxlength="10" size="medium" style="width:220px" />
            <el-button type="primary" size="mini" @click="findEmpAccessory()">查询</el-button>
            <el-button
              type="danger"
              size="mini"
              class="hr-but-all"
              @click="advancedQueryShowMethods"
            >高级查询</el-button>
          </el-col>
        </el-row>
        <el-form v-show="advancedQueryShow" ref="queryform" :model="queryform">
          <el-row>
            <el-col :span="3">员工编号：
              <el-input v-model="queryform.empNumb" size="small" maxlength="20" style="width:85px" />
            </el-col>
            <el-col :span="3">姓名：
              <el-input v-model="queryform.empName" size="small" maxlength="10" style="width:110px" />
            </el-col>
            <el-col :span="4">身份证号：
              <el-input v-model="queryform.certificateNumb" size="small" maxlength="18" style="width:140px" />
            </el-col>
            <el-col :span="3">护卫点：
              <el-input v-model="queryform.deptName" size="small" maxlength="20" style="width:100px" />
            </el-col>
            <el-col :span="8">入职日期：
              <el-date-picker
                v-model="queryform.entryDate"
                size="small"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                value-format="yyyy-MM-dd"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions"
              />
            </el-col>
            <el-col :span="3">
              <el-button size="mini" class="hr-but-all" type="primary" @click="findEmpAccessoryAll()">查询</el-button>
              <el-button size="mini" class="hr-but" type="danger" @click="resetQueryform()">重置</el-button>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <table id="searchTable">
                <tr>
                  <td class="td">性别</td>
                  <td class="td-group">
                    <el-checkbox-group v-model="queryform.sex" class="fj-checkbox">
                      <el-checkbox label="" @change="selectAllSex">全部</el-checkbox>
                      <el-checkbox label="1">男性</el-checkbox>
                      <el-checkbox label="2">女性</el-checkbox>
                    </el-checkbox-group>
                  </td>
                </tr>
                <tr>
                  <td class="td">最高学历</td>
                  <td class="td-group">
                    <el-checkbox-group v-model="queryform.education" class="fj-checkbox">
                      <el-checkbox label="" @change="selectAllEducation">全部</el-checkbox>
                      <el-checkbox label="91">无学历</el-checkbox>
                      <el-checkbox label="81">小学</el-checkbox>
                      <el-checkbox label="71">初中</el-checkbox>
                      <el-checkbox label="61">高中</el-checkbox>
                      <el-checkbox label="42">中技</el-checkbox>
                      <el-checkbox label="41">中专</el-checkbox>
                      <el-checkbox label="31">大学专科</el-checkbox>
                      <el-checkbox label="21">大学本科</el-checkbox>
                      <el-checkbox label="11">硕士</el-checkbox>
                      <el-checkbox label="10">博士</el-checkbox>
                    </el-checkbox-group>
                  </td>
                </tr>
                <tr>
                  <td class="td">政治面貌</td>
                  <td class="td-group">
                    <el-checkbox-group v-model="queryform.politics" class="fj-checkbox">
                      <el-checkbox label="" @change="selectAllPolitics">全部</el-checkbox>
                      <el-checkbox label="01">党员</el-checkbox>
                      <el-checkbox label="02">预备</el-checkbox>
                      <el-checkbox label="03">共青</el-checkbox>
                      <el-checkbox label="04">民革</el-checkbox>
                      <el-checkbox label="05">民盟</el-checkbox>
                      <el-checkbox label="06">民建</el-checkbox>
                      <el-checkbox label="07">民进</el-checkbox>
                      <el-checkbox label="08">农工</el-checkbox>
                      <el-checkbox label="09">致公</el-checkbox>
                      <el-checkbox label="10">九三</el-checkbox>
                      <el-checkbox label="11">台盟</el-checkbox>
                      <el-checkbox label="12">民主</el-checkbox>
                      <el-checkbox label="13">群众</el-checkbox>
                    </el-checkbox-group>
                  </td>
                </tr>
                <tr>
                  <td class="td">年龄</td>
                  <td class="td-group">
                    <el-checkbox-group v-model="queryform.age" class="fj-checkbox">
                      <el-checkbox label="" @change="selectAllage">全部</el-checkbox>
                      <el-checkbox label="18-29">18-29</el-checkbox>
                      <el-checkbox label="30-39">30-39</el-checkbox>
                      <el-checkbox label="40-49">40-49</el-checkbox>
                      <el-checkbox label="50-59">50-59</el-checkbox>
                      <el-checkbox label="60-69">60-69</el-checkbox>
                      <el-checkbox label="69-999">69及以上</el-checkbox>
                    </el-checkbox-group>
                  </td>
                </tr>
                <tr>
                  <td class="td">档案情况</td>
                  <td class="td-group">
                    <el-checkbox-group v-model="queryform.archivesStatus" class="fj-checkbox">
                      <el-checkbox label="" @change="selectAllArchivesStatus">全部</el-checkbox>
                      <el-checkbox label="0">已移交</el-checkbox>
                      <el-checkbox label="1">未移交</el-checkbox>
                    </el-checkbox-group>
                  </td>
                </tr>
                <tr>
                  <td class="td">保险类型</td>
                  <td class="td-group">
                    <el-checkbox-group v-model="queryform.insuranceType" class="fj-checkbox">
                      <el-checkbox label="" @change="selectAllInsuranceType">全部</el-checkbox>
                      <el-checkbox label="1">深户（五险一档）</el-checkbox>
                      <el-checkbox label="2">非深户(五险一档)</el-checkbox>
                      <el-checkbox label="3">非深户(五险二档)</el-checkbox>
                      <el-checkbox label="4">非深户(五险三档)</el-checkbox>
                      <el-checkbox label="5">非深户(四险三档)</el-checkbox>
                    </el-checkbox-group>
                  </td>
                </tr>
                <tr>
                  <td class="td">员工状态：</td>
                  <td class="td-group">
                    <el-checkbox-group v-model="queryform.empStatus" class="fj-checkbox">
                      <el-checkbox label="" @change="selectAllEmpStatus">全部</el-checkbox>
                      <el-checkbox label="0">在职</el-checkbox>
                      <el-checkbox label="1">正常离职</el-checkbox>
                      <el-checkbox label="2">自动离职</el-checkbox>
                      <el-checkbox label="3">公司辞退</el-checkbox>
                    </el-checkbox-group>
                  </td>
                </tr>
              </table>
            </el-col>
          </el-row>
        </el-form>
      </el-header>
      <el-main>
        <el-row style="margin-bottom: 10px;height: 40px;">
          <el-col :span="24">
            <el-button class="hr-but-all" type="danger" @click="dialogFormVisible = true">新建标签</el-button>
            <el-popconfirm title="是否删除标签？" @onConfirm="deldialogFormVisible = true">
              <el-button slot="reference" class="hr-but" type="danger">删除标签</el-button>
            </el-popconfirm>
            <el-button class="hr-but-all" type="danger" @click="downloaddialogFormVisible = true">下载附件</el-button>
            <el-dialog
              title="新建标签"
              :visible.sync="dialogFormVisible"
              width="25%"
              class="add-label"
            >
              <el-form ref="labelform" :model="labelform" :rules="rules">
                <el-form-item
                  label="标签名称:"
                  :label-width="formLabelWidth"
                  prop="labelname"
                >
                  <el-input v-model="labelform.labelname" autocomplete="off" />
                </el-form-item>
                <el-form-item
                  label="标签code:"
                  :label-width="formLabelWidth"
                  prop="labelcode"
                >
                  <el-input v-model="labelform.labelcode" autocomplete="off" />
                </el-form-item>
                <el-form-item label="标签排序:" :label-width="formLabelWidth" prop="sort">
                  <el-input-number
                    v-model="labelform.sort"
                    :min="0"
                    :max="100"
                    label="排序"
                  />
                </el-form-item></el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button
                  type="primary"
                  @click="addlabel('labelform')"
                >确 定</el-button>
              </div>
            </el-dialog>
            <el-dialog
              title="删除标签"
              :visible.sync="deldialogFormVisible"
              width="25%"
              class="add-label"
            >
              <el-form ref="dellabelform" :model="labelform" :rules="delrules">
                <el-form-item
                  label="标签名称:"
                  :label-width="formLabelWidth"
                  prop="labelid"
                >
                  <el-select v-model="labelform.labelid" placeholder="请选择标签名称">
                    <el-option
                      v-for="item in labelData"
                      :key="item.labelid"
                      :value="item.labelid"
                      :label="item.labelname"
                    />
                  </el-select>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="deldialogFormVisible = false">取 消</el-button>
                <el-button
                  type="primary"
                  @click="dellabel('dellabelform')"
                >确 定</el-button>
              </div>
            </el-dialog>
            <el-dialog
              title="下载附件"
              :visible.sync="downloaddialogFormVisible"
              width="25%"
              class="add-label"
            >
              <el-form ref="dellabelform" :model="labelform" :rules="delrules">
                <el-form-item
                  label="标签名称:"
                  :label-width="formLabelWidth"
                  prop="labelid"
                >
                  <el-select v-model="labelform.labelid" placeholder="请选择标签名称">
                    <el-option
                      key="-1"
                      value="-1"
                      label="全部"
                    />
                    <el-option
                      v-for="item in labelData"
                      :key="item.labelid"
                      :value="item.labelid"
                      :label="item.labelname"
                    />
                  </el-select>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="downloaddialogFormVisible = false">取 消</el-button>
                <el-button
                  type="primary"
                  @click="downloadlabel('dellabelform')"
                >确 定</el-button>
              </div>
            </el-dialog>

          </el-col>
        </el-row>
        <el-dialog title="附件管理" :visible.sync="dialogShowUploadfj" width="80%" class="fjgl-class" top="10px" @close="closeDialog()">
          <uploadfj v-if="dialogShowUploadfj" :rowitem="rowitem" />
        </el-dialog>
        <el-table ref="empAccessoryTable" :data="tableData" class="fj-table" style="width: 100%;color: #000;">
          <el-table-column
            type="selection"
            width="55"
          />
          <el-table-column label="操作" width="120">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                @click.native.prevent="dialogShow(scope.$index, scope.row)"
              >
                上传
              </el-button>
            </template>
          </el-table-column>
          <el-table-column prop="empName" label="姓名" />
          <el-table-column prop="certificateNumb" label="身份证号" />
          <el-table-column prop="deptName" label="护卫点(部门)" />
          <el-table-column prop="jobName" label="岗位" />
          <template v-for="(col) in labelData">
            <el-table-column :key="col.labelid" :prop="col.labelcode" :label="col.labelname">
              <template slot-scope="scope">
                <el-link type="primary"> {{ scope.row[col.labelcode] }}</el-link>
              </template>
            </el-table-column>
          </template>

        </el-table>
        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="pagination.num"
          :limit.sync="pagination.size"
          @pagination="search"
        />
      </el-main>
    </el-container>
  </div>
</template>
<script>
import Pagination from '@/components/Pagination'

export default {
  components: {
    Pagination
  },
  data() {
    return {
      queryCheckAll: {
        sexcheckAll: false,
        sexisIndeterminate: true
      },
      downloaddialogFormVisible: false,
      deldialogFormVisible: false,
      formLabelWidth: '100px',
      dialogFormVisible: false,
      labelform: {
        labelname: '',
        labelid: '',
        labelcode: '',
        empIds: '',
        sort: 0
      },
      rules: {
        labelname: [
          { required: true, message: '请输入标签名称', trigger: 'blur' },
          { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
        ],
        labelcode: [
          { required: true, message: '请输入标签code', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 20 个字符', trigger: 'blur' }
        ],
        sort: [{ required: true, message: '请输入排序', type: 'number', trigger: 'blur' }]
      },
      delrules: {
        labelid: [{ required: true, message: '请选择标签', trigger: 'change' }]
      },
      dialogShowUploadfj: false,
      basic: '',
      queryform: {
        basic: '',
        empNumb: '',
        empName: '',
        certificateNumb: '',
        deptName: '',
        entryDate: '',
        sex: [],
        education: [],
        politics: [],
        age: [],
        archivesStatus: [],
        insuranceType: [],
        empStatus: []
      },
      total: 0, // 总数量
      pagination: { // 分页参数
        size: 10,
        num: 1
      },
      headerHeight: '20px',
      advancedQueryShow: false,
      dialogTableVisible: false,
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      tableData: [],
      labelData: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      rowitem: {}
    }
  },
  mounted() {
    this.initLabel()
    this.fetch()
  },
  methods: {
    closeDialog() {
      this.search()
    },
    handleCheckAllChange(val) {
      this.queryCheckAll.sexisIndeterminate = false
    },
    downloadlabel(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          var selected = this.$refs.empAccessoryTable.selection
          if (selected.length < 1) {
            this.$message({
              message: '请选择数据!',
              type: 'warning'
            })
            return
          }
          const empIds = []
          selected.forEach((j) => {
            empIds.push(j.empId)
          })
          this.labelform.empIds = empIds
          this.$download('hr/empAccessory/singledownload', { ...this.labelform }, '附件_' + new Date().getTime() + '.zip').then(() => {
            this.downloaddialogFormVisible = false
            this.$message({
              message: this.$t('下载成功'),
              type: 'success'
            })
          })
        }
      })
    },
    dellabel(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$get('hr/empAccessory/' + this.labelform.labelid).then((r) => {
            if (r.data.data > 0) {
              this.$message({
                message: this.$t('标签内还有' + r.data.data + '个附件,若要删除请先转存附件!'),
                type: 'warning'
              })
            } else {
              this.$delete('hr/label', { ...this.labelform }).then(() => {
                this.dialogFormVisible = false
                this.$message({
                  message: this.$t('tips.deleteSuccess'),
                  type: 'success'
                })
                this.deldialogFormVisible = false
                // 初始加载
                this.initLabel()
                this.fetch()
              })
            }
          })
        }
      })
    },
    addlabel(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$post('hr/label', { ...this.labelform }).then(() => {
            this.dialogFormVisible = false
            this.$message({
              message: this.$t('tips.createSuccess'),
              type: 'success'
            })
            this.labelform.labelname = ''
            this.labelform.sort = 0
            this.labelform.labelcode = ''
            // 初始加载
            this.initLabel()
            this.fetch()
          })
        }
      })
    },
    dialogShow(index, tableData) {
      this.rowitem = tableData
      this.dialogShowUploadfj = true
    },
    skipuploadfj() {
      this.resolvePath('/uploadfj')
    },
    resetQueryform() {
      this.queryform = {
        empNumb: '',
        empName: '',
        certificateNumb: '',
        deptName: '',
        entryDate: '',
        sex: [],
        education: [],
        politics: [],
        age: [],
        archivesStatus: [],
        insuranceType: []
      }
    },
    findEmpAccessoryAll() {
      this.fetch({
        ...this.queryform
      })
    },
    findEmpAccessory() {
      var params = { basic: this.basic }
      this.fetch({
        ...params
      })
    },
    // 刷新方法
    search() {
      if (this.basic === '') {
        this.fetch({
          ...this.queryform
        })
      } else {
        var params = { basic: this.basic }
        this.fetch({
          ...params
        })
      }
    },
    handleNodeClick(data) {
      console.log(data)
    },
    fetch(params = {}) {
      params.pageSize = this.pagination.size
      params.pageNum = this.pagination.num
      this.$get('hr/empAccessory/list', {
        ...params
      }).then((r) => {
        const data = r.data.data
        this.total = data.total
        this.tableData = data.rows
      })
    },
    initLabel() {
      this.$get('hr/label').then((r) => {
        this.labelData = r.data.data
      })
    },
    advancedQueryShowMethods() {
      if (this.advancedQueryShow) {
        this.headerHeight = '20px'
        this.advancedQueryShow = false
      } else {
        this.headerHeight = '360px'
        this.advancedQueryShow = true
      }
    },
    showEmpInfo() {
      this.dialogTableVisible = true
    },
    selectAllSex(val) {
      if (val) {
        this.queryform.sex = ['1', '2']
      } else {
        this.queryform.sex = []
      }
    },
    selectAllEducation(val) {
      if (val) {
        this.queryform.education = ['91', '81', '71', '61', '42', '41', '31', '21', '11', '10']
      } else {
        this.queryform.education = []
      }
    },
    selectAllPolitics(val) {
      if (val) {
        this.queryform.politics = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13']
      } else {
        this.queryform.politics = []
      }
    },
    selectAllage(val) {
      if (val) {
        this.queryform.age = ['18-29', '30-39', '40-49', '50-59', '60-69', '69-999']
      } else {
        this.queryform.age = []
      }
    },
    selectAllArchivesStatus(val) {
      if (val) {
        this.queryform.archivesStatus = ['0', '1']
      } else {
        this.queryform.archivesStatus = []
      }
    },
    selectAllInsuranceType(val) {
      if (val) {
        this.queryform.insuranceType = ['1', '2', '3', '4', '5']
      } else {
        this.queryform.insuranceType = []
      }
    },
    selectAllEmpStatus(val) {
      if (val) {
        this.queryParams.empStatus = ['0', '1', '2', '3']
      } else {
        this.queryParams.empStatus = []
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.el-main {
    margin-top: 10px;
}
.el-input-number {
    width: 100%;
}
</style>
<style lang="scss">
.fj-checkbox{
  .el-checkbox__input.is-checked .el-checkbox__inner {
      border-color: #a32c30;;
      background: #a32c30;;
  }
  .el-checkbox__label {
    color: #000 !important;
  }
}
.fjgl-class{
    height: 90%;
     overflow: auto;
}
.add-lable {
    text-align: initial;
}
.input-empName .el-input-group__append{
      padding: 0 15px 0 0;
}
.fj-table thead {
    color: #000;
}
.td {
    background-color: #dddcdc !important;
    width: 160px;
    text-align: center;
}
.td-group {
    padding-left: 20px;
}
.search-title {
    height: 50px;
    .search {
        position: relative;
        top: 50%;
        transform: translateY(-50%);
    }
    .title {
        position: relative;
        top: 40%;
        transform: translateY(-50%);
    }
    .zs-title {
        border-left: 4px solid #a32c30;
        padding-left: 10px;
        font-size: 16px;
    }
}

#searchTable {
    margin-top: 10px;
    border-collapse: collapse;
    width: 100%;
}

#searchTable td,
#searchTable th {
    border: 1px solid #b0b0b0;
    color: #000;
    height: 40px;
    background-color: #fff;
}

#ygxq table {
    color: #000;
    border-collapse: collapse;
    margin: 0 auto;
    text-align: center;
    width: 100%;
    margin-top: 20px;
}

#ygxq table td,
#ygxq table th {
    border: 1px solid #eae9e9;
    color: #666;
    height: 30px;
}

#ygxq table thead th {
    background-color: #fff;
    width: 100px;
}

#ygxq table tr:nth-child(odd) {
    background: #fff;
}

#ygxq table tr:nth-child(even) {
    background: #f5fafa;
}

</style>

 src/views/yunpan/uploadfj.vue

@@ -116,9 +116,11 @@
                    :src="showFileImg(node.filesformat)"
                    class="uploading-image"
                  >
                  <div style="padding-top: 14px;">
                    <el-checkbox v-model="checkedArr[index * 8 + nodeIndex].isChecked" class="myRedCheckBox">{{ node.filesname }}</el-checkbox>
                  </div>
                  <el-tooltip class="item" effect="dark" :content="node.filesname" placement="bottom">
                    <div style="padding-top: 14px;">
                      <el-checkbox v-model="checkedArr[index * 8 + nodeIndex].isChecked" class="myRedCheckBox">{{ node.filesname }}</el-checkbox>
                    </div>
                  </el-tooltip>
                </el-card>
              </el-col>
              <el-col v-if="node.isUpload" :key="node.filesid" :span="3">

 src/views/yunpan/zhishou.vue

@@ -78,17 +78,17 @@
            <i
              class="el-icon-bell"
              style=" color: #a32c30; margin-right: 10px;"
            />提示：文件不要超过10个，单个文件大小不超过50M，单击或者拖动文件到下面区域，支持单个或批量文件的上传。</el-col>
            />提示：文件不要超过10个，单个文件大小不超过200M，单击或者拖动文件到下面区域，支持单个或批量文件的上传。</el-col>
          </el-row>
          <el-row style="background-color: rgba(0,0,0,0.2);">
            <el-col :span="19">
            <el-col :span="17">
              <el-checkbox
                v-model="checkAll"
                class="myRedCheckBox"
                style="color: #000; margin-left: 20px;"
                @change="checkAllMethods()"
              >全选</el-checkbox></el-col>
            <el-col :span="5">
            <el-col :span="7">
              <el-button
                type="primary"
                icon="el-icon-download"
@@ -102,7 +102,7 @@
                @click="delFile()"
              >删除</el-button>
              <el-popconfirm title="是否移动文件？" @onConfirm="mvdialogFormVisible = true">
                <el-button slot="reference" class="hr-but" type="danger">转存</el-button>
                <el-button slot="reference" class="hr-but" type="danger">移动</el-button>
              </el-popconfirm>
            </el-col>
          </el-row>
@@ -140,21 +140,23 @@
        <el-main style="background-color: #fff;">
          <el-row v-for="(data, index) in filesUploadData" :key="index">
            <template v-for="(node, nodeIndex) in data.node">
              <el-col v-if="node.isUpload === false" :key="node.filesid" :span="3">
              <el-col v-if="node.isUpload === false" :key="node.filesid" :span="2">
                <el-card
                  shadow="never"
                  @click.native="clickCard(index * 8 + nodeIndex)"
                >
                  <img
                    :src="showFileImg(node.filesformat)"
                    class="uploading-image"
                    @click="clickCard(index * rowCount + nodeIndex)"
                  >
                  <div style="padding-top: 14px;">
                    <el-checkbox v-model="checkedArr[index * 8 + nodeIndex].isChecked" class="myRedCheckBox">{{ node.filesname }}</el-checkbox>
                  </div>
                  <el-tooltip class="item" effect="dark" :content="node.filesname" placement="bottom">
                    <div style="padding-top: 14px;">
                      <el-checkbox v-model="checkedArr[index * rowCount + nodeIndex].isChecked" class="myRedCheckBox">{{ node.filesname }}</el-checkbox>
                    </div>
                  </el-tooltip>
                </el-card>
              </el-col>
              <el-col v-if="node.isUpload" :key="node.filesid" :span="3">
              <el-col v-if="node.isUpload" :key="node.filesid" :span="2">
                <el-card shadow="never">
                  <el-upload
                    class="avatar-uploader"
@@ -166,7 +168,7 @@
                    :on-success="handleAvatarSuccess"
                    :on-error="handleAvatarError"
                    :multiple="true"
                    :limit="10"
                    :limit="20"
                    drag
                  >
                    <i class="el-icon-upload" />
@@ -188,6 +190,7 @@
export default {
  data() {
    return {
      rowCount: 12,
      mvrules: {
        folderid: [{ required: true, message: '请选择目录', trigger: 'change' }]
      },
@@ -252,8 +255,8 @@
      this.$get('hr/filesUpload', { ...params }).then(r => {
        r.data.data.forEach((v, i) => {
          this.checkedArr.push({ isChecked: false, filesid: v.filesid })
          // 一行8个 等于8就换行
          if (i % 8 === 0 && i !== 0) {
          // 一行12个 等于12就换行
          if (i % this.rowCount === 0 && i !== 0) {
            this.filesUploadData.push(node)
            node = { node: [] }
          }
@@ -270,8 +273,8 @@
        if (this.filesUploadData.length === 0) {
          this.filesUploadData.push({ node: [{ isUpload: true }] })
        } else {
          // 如果不为空,但是这一行刚好满8个了,就将数组,新增一个对象
          if (this.filesUploadData[this.filesUploadData.length - 1].node.length === 8) {
          // 如果不为空,但是这一行刚好满12个了,就将数组,新增一个对象
          if (this.filesUploadData[this.filesUploadData.length - 1].node.length === this.rowCount) {
            this.filesUploadData.push({ node: [{ isUpload: true }] })
          } else {
            // 新增一个上传
@@ -635,25 +638,35 @@
.myRedCheckBox .el-checkbox__inner:hover {
    border-color: #a32c30;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
.avatar-uploader{
  .el-upload-dragger{
    width: 65px !important;
    height: 65px !important;
    .el-icon-upload{
      font-size: 40px;
      color: #8c939d;
      line-height: 30px;
    }
  }
}
.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}
// .avatar-uploader .el-upload {
//     border: 1px dashed #d9d9d9;
//     border-radius: 6px;
//     cursor: pointer;
//     position: relative;
//     overflow: hidden;
// }
// .avatar-uploader .el-upload:hover {
//     border-color: #409eff;
// }
// .avatar-uploader-icon {
//     font-size: 28px;
//     color: #8c939d;
//     width: 178px;
//     height: 178px;
//     line-height: 178px;
//     text-align: center;
// }
.avatar {
    width: 178px;
    height: 178px;