1.人员管理导入实现

loulijun2021

2023-09-11 e30795348373e277fe3d27f55ec800c0833e8733

1.人员管理导入实现

 package.json

@@ -27,6 +27,7 @@
    "jsonwebtoken": "^9.0.1",
    "lib-flexible": "^0.3.2",
    "lib-flexible-computer": "^1.0.2",
    "nanoid": "^4.0.2",
    "normalize.css": "7.0.0",
    "nprogress": "0.2.0",
    "path-to-regexp": "2.4.0",

 src/components/UploadExcel/index.vue

@@ -12,6 +12,7 @@
      style="margin-left:16px;"
      :disabled="disabled"
      type="primary"
      icon="el-icon-upload2"
      @click="handleUpload"
    >
      文件上传

 src/styles/global.css

@@ -63,6 +63,11 @@
  justify-content: flex-end;
}

.el-button--text{
  font-size: 14px !important;
  cursor: pointer !important;
}


/*头部按钮组样式*/
.bodyTopButtonGroup {

 src/views/basicSettings/organizationList.vue

@@ -131,15 +131,15 @@
        </el-table>
      </div>
      <!--分页-->
      <pagination
        :total="total"
        :page.sync="form.page"
        :limit.sync="form.rows"
        align="right"
        layout="total,prev, pager, next,sizes,jumper"
        popper-class="select_bottom"
        @pagination="getSTorgData"
      />
      <!--      <pagination-->
      <!--        :total="total"-->
      <!--        :page.sync="form.page"-->
      <!--        :limit.sync="form.rows"-->
      <!--        align="right"-->
      <!--        layout="total,prev, pager, next,sizes,jumper"-->
      <!--        popper-class="select_bottom"-->
      <!--        @pagination="getSTorgData"-->
      <!--      />-->
    </div>

    <el-dialog
@@ -219,11 +219,11 @@
      tableHeight: 0,
      form: {
        storg_code: '', // 组织架构编码
        storg_name: '', // 组织架构名称
        prop: 'lm_date', // 排序字段
        order: 'desc', // 排序字段
        page: 1, // 第几页
        rows: 20 // 每页多少条
        storg_name: '' // 组织架构名称
        // prop: 'lm_date', // 排序字段
        // order: 'desc', // 排序字段
        // page: 1, // 第几页
        // rows: 20 // 每页多少条
      },
      total: 10,
      tableData: [],
@@ -431,7 +431,7 @@
    getHeight() {
      this.$nextTick(() => {
        this.mainHeight = window.innerHeight - 85
        this.tableHeight = this.mainHeight - 200
        this.tableHeight = this.mainHeight - 137
        this.$refs.tableDataRef.doLayout()
      })
    }

 src/views/basicSettings/personList.vue

@@ -37,8 +37,9 @@
        </div>

        <div style="width: calc(100% - 300px)">
          <div class="bodyTopButtonGroup">
          <div class="bodyTopButtonGroup" style="justify-content: space-between">
            <el-button v-waves type="primary" icon="el-icon-circle-plus-outline" @click="add('add')">新增</el-button>
            <el-button v-waves type="success" icon="el-icon-download" @click="$router.push('./../systemSetting/dataImport?fileCode=3')">导入</el-button>
          </div>

          <div class="bodyTopFormGroup">

 src/views/systemSetting/dataImport.vue

@@ -1,7 +1,7 @@
<template>
  <div class="" :style="{height:mainHeight+'px'}">

    <div style="display: flex;margin: 20px 10px;">
    <div style="display: flex;margin: 20px 10px;align-items: center">

      <el-select
        v-model="excelCode"
@@ -22,6 +22,7 @@
        type="primary"
        style="margin-left: 20px"
        :disabled="excelCode===''"
        icon="el-icon-download"
        @click="getExcel"
      >下载模板
      </el-button>
@@ -36,17 +37,36 @@
        type="info"
        style="margin-left: 20px"
        :disabled="excelCode===''"
        icon="el-icon-refresh"
        @click="reset"
      >重置
      </el-button>

      <el-button
        type="primary"
        type="warning"
        style="margin-left: 20px"
        :disabled="excelCode===''"
        @click="submit"
      >提交
        icon="el-icon-circle-plus-outline"
        :disabled="excelCode===''||tableData.length===0"
        @click="addRow"
      >新增行
      </el-button>

      <el-button
        type="success"
        style="margin-left: 20px"
        :disabled="excelCode===''||tableData.length===0"
        icon="el-icon-thumb"
        @click="submit"
      >提交数据
      </el-button>

      <!--      <el-button-->
      <!--        type="danger"-->
      <!--        style="margin-left: 20px"-->
      <!--        :disabled="excelCode===''||tableData.length===0"-->
      <!--        @click="batchDel"-->
      <!--      >批量删除-->
      <!--      </el-button>-->

    </div>

@@ -61,9 +81,9 @@
          :key="i+j"
          :label="i"
        >
          <!--          height:(mainHeight-180)+'px',-->
          <el-table
            ref="tableDataRef"
            v-if="tableData[j].length>0"
            :ref="'tableDataRef'+j"
            :data="tableData[j]"
            border
            :height="(mainHeight-180)+'px'"
@@ -73,17 +93,24 @@
            style="overflow-y: scroll;"
            highlight-current-row
          >
            <!--          <el-table-column-->
            <!--            type="selection"-->
            <!--            width="55"-->
            <!--          />-->
            <!--            @selection-change="handleSelectionChange"-->

            <!--            <el-table-column-->
            <!--              type="selection"-->
            <!--              width="55"-->
            <!--              fixed-->
            <!--            />-->
            <el-table-column
              type="index"
              label="序号"
              width="55"
              fixed
              align="center"
            />
              :render-header="indexRender"
            >
              <template slot-scope="scope">
                {{ scope.$index }}
              </template>
            </el-table-column>

            <el-table-column
              v-for="item of tableHeader[j]"
@@ -196,22 +223,37 @@
                <div v-else> {{ row[item] }}</div>
              </template>
            </el-table-column>

            <el-table-column
              label="操作"
              width="120"
              width="55"
              :render-header="operationRender"
              fixed="right"
            />
            >
              <template slot-scope="{row}">
                <div class="operationClass" style="padding-left: 10px">
                  <el-tooltip v-del-tab-index class="item" effect="dark" content="删除" placement="top">
                    <i
                      class="el-icon-delete"
                      :style="{color:$store.state.settings.theme}"
                      @click="delRow(row)"
                    />
                  </el-tooltip>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>

    </div>

    <!--    <div v-for="(i,j) in tableHeader" :key="i">-->
    <!--      <el-table :data="tableData[j]" border highlight-current-row style="width: 100%;margin-top:20px;">-->
    <!--        <el-table-column v-for="item of tableHeader[j]" :key="item" :prop="item" :label="item" />-->
    <!--      </el-table>-->
    <!--    </div>-->
    <el-empty v-if="tableData.length===0" :image-size="500">
      <el-button type="text">1.请选择模板下载</el-button>
      <el-button type="text" style="margin-left: 0;">2.请填写模板数据</el-button>
      <el-button type="text" style="margin-left: 0;">3.请上传文件提交</el-button>
    </el-empty>

  </div>
</template>

@@ -219,6 +261,7 @@
import UploadExcelComponent from '@/components/UploadExcel/index.vue'
import { DownLoadExcel, ExcelModelCheck, ExcelModelData } from '@/api/Excel'
import { GroupsPermissions, PostPermissions, PrentOrganization, RolePermissions } from '@/api/GeneralBasicData'
import { nanoid } from 'nanoid'

export default {
  name: 'UploadExcel',
@@ -290,12 +333,17 @@
          j.所属班组编码 = j.所属班组编码.split(',').filter(e => groupArr.includes(e))
          j['*所属组织编码'] = orgArr.includes(j['*所属组织编码']) ? j['*所属组织编码'] : ''
          j['*在职状态'] = this.statusArr.find(e => e.name === j['*在职状态']).code
          j.uuid = nanoid()
        })
      }
    },
    async getExcelModelData() {
      const { data: res } = await ExcelModelData()
      this.excelArr = res

      if (window.location.hash.indexOf('?') !== -1) {
        this.excelCode = window.location.hash.split('?')[1].split('=')[1]
      }
    },
    async getExcel() {
      const res = await DownLoadExcel({ FileCode: this.excelCode })
@@ -351,25 +399,62 @@
            j.所属班组编码 = j.所属班组编码.join(',')
            j.所属角色编码 = j.所属角色编码.join(',')
          })

          this.tableData[0].map(item => {
            delete (item.uuid)
          })
        }

        const data = {
          fileCode: this.excelCode,
          tableData: this.tableData
        }
        // console.log(JSON.stringify(this.tableData))
        ExcelModelCheck(data).then(res => {
          if (res.code === '200') {
            this.$notify.success('提交成功!')
          if (res.json1.code === '200' && res.json2.code === '200') {
            this.$notify.success('数据提交成功!')
            this.tableData = []
            this.tableHeader = []
            this.sheetName = []
            this.excelCode = ''
          } else {

          }
        })
      }).catch(() => {
        this.$notify.info('已取消提交！')
      })
    },

    addRow() {
      // 用户清单新增行
      if (this.sheetName.indexOf('用户清单') !== -1) {
        this.tableData[0].unshift({
          uuid: nanoid(),
          '*用户编号(唯一)': '',
          '*用户姓名': '',
          '*密码': '',
          '*在职状态': 'Y',
          '手机号': '',
          '邮箱': '',
          '*所属组织编码': '',
          '所属岗位编码': [],
          '所属角色编码': [],
          '所属班组编码': []
        })
      }
    },
    delRow(row) {
      // 用户清单删除行
      if (this.sheetName.indexOf('用户清单') !== -1) {
        if (this.tableData[0].length > 1) {
          return this.tableData[0].splice(this.tableData[0].findIndex(i => i.uuid === row.uuid), 1)
        } else {
          return this.$message.info('必须要有一条数据！')
        }
      }
    },

    reset() {
      this.tableData = []
      this.tableHeader = []
@@ -414,6 +499,9 @@
      } else if (column.label.indexOf('*') === -1 && rowIndex === 0) {
        string = 'background:#00b0f0;'
      }
      // else if (rowIndex === 0 && columnIndex === 0) {
      //   string = 'background:red;color:#fff'
      // }
      return string + 'padding: 5px 0; fontWeight: 500;'
    },
    cellStyle() {
@@ -421,6 +509,16 @@
        padding: '5px 0'
      }
      return option
    },
    indexRender(h, { column }) {
      return [
        h('span', { style: 'color:#FFF' }, column.label)
      ]
    },
    operationRender(h, { column }) {
      return [
        h('span', { style: 'color:#FFF' }, column.label)
      ]
    },
    addRedStar(h, { column }) {
      if (column.label.indexOf('*') !== -1) { // 必填字段
@@ -442,10 +540,10 @@

<style scoped lang="scss">
//::v-deep .el-table__body-wrapper {
  //overflow-y: auto;
  //overflow-x: scroll !important;
  //height: calc(100% - 34px);
  //width: 100% !important;
//overflow-y: auto;
//overflow-x: scroll !important;
//height: calc(100% - 34px);
//width: 100% !important;
//}

</style>