1.正在实现角色导入（测试）

loulijun2021

2023-09-15 078e2b223b845d47481a421366ed2fdf5d7bdd4e

1.正在实现角色导入（测试）

 src/components/UploadExcel/index.vue

@@ -13,6 +13,7 @@
      :disabled="disabled"
      type="primary"
      icon="el-icon-upload2"
      waves
      @click="handleUpload"
    >
      文件上传
@@ -22,8 +23,10 @@

<script>
import XLSX from 'xlsx'
import waves from '@/directive/waves'

export default {
  directives: { waves },
  props: {
    disabled: Boolean,
    beforeUpload: Function, // eslint-disable-line

 src/router/index.js

@@ -453,7 +453,7 @@
      },
      {
        path: 'dataImport',
        name: 'dataImportCancel',
        name: 'dataImport',
        code: '0803',
        component: () => import('@/views/systemSetting/dataImport'),
        meta: { code: '0803', title: '数据导入', icon: '', keepAlive: true }

 src/views/basicSettings/groupList.vue

@@ -3,6 +3,7 @@
    <div class="body" :style="{height:mainHeight+'px'}">
      <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=2')">导入</el-button>
      </div>

      <div class="bodyTopFormGroup">

 src/views/basicSettings/personList.vue

@@ -128,15 +128,18 @@
                prop="usercode"
                label="用户编码"
                sortable="custom"
                show-overflow-tooltip
              />
              <el-table-column
                prop="username"
                label="用户名称"
                sortable="custom"
                show-overflow-tooltip
              />
              <el-table-column
                prop="storg_name"
                label="所属组织"
                show-overflow-tooltip
                sortable="custom"
              >
                <template slot-scope="{row}">
@@ -147,6 +150,7 @@
              <el-table-column
                prop="status"
                label="状态"
                show-overflow-tooltip
                sortable="custom"
              >
                <template slot-scope="{row}">

 src/views/basicSettings/roleList.vue

@@ -3,6 +3,7 @@
    <div class="body" :style="{height:mainHeight+'px'}">
      <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=4')">导入</el-button>
      </div>

      <div class="bodyTopFormGroup">
@@ -89,11 +90,11 @@
              <el-tag v-if="row.status==='N'" size="small" type="danger">停用</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="dataname"
            label="权限范围"
            sortable="custom"
          />
          <!--          <el-table-column-->
          <!--            prop="dataname"-->
          <!--            label="权限范围"-->
          <!--            sortable="custom"-->
          <!--          />-->
          <el-table-column
            prop="description"
            label="备注"

 src/views/systemSetting/dataImport.vue

@@ -23,6 +23,7 @@
        style="margin-left: 20px"
        :disabled="excelCode===''"
        icon="el-icon-download"
        waves
        @click="getExcel"
      >下载模板
      </el-button>
@@ -38,6 +39,7 @@
        style="margin-left: 20px"
        :disabled="excelCode===''"
        icon="el-icon-refresh"
        waves
        @click="reset"
      >重置
      </el-button>
@@ -47,6 +49,7 @@
        style="margin-left: 20px"
        icon="el-icon-circle-plus-outline"
        :disabled="excelCode===''||tableData.length===0"
        waves
        @click="addRow"
      >新增行
      </el-button>
@@ -56,18 +59,10 @@
        style="margin-left: 20px"
        :disabled="excelCode===''||tableData.length===0"
        icon="el-icon-thumb"
        waves
        @click="submit"
      >提交数据
      </el-button>

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

    </div>

    <div
@@ -81,7 +76,7 @@
          :key="i+j"
          :label="i"
        >
          <!--          :key="tableKey"-->

          <el-table
            v-if="tableData[j].length>0"
            :ref="'tableDataRef'+i"
@@ -120,6 +115,7 @@

                <div
                  v-if="item.indexOf('编号(唯一)')!==-1||
                    item.indexOf('用户姓名')!==-1||
                    item.indexOf('密码')!==-1||
                    item.indexOf('手机号')!==-1||
                    item.indexOf('邮箱')!==-1||
@@ -129,31 +125,12 @@
                >
                  <el-input v-model="row[item]" placeholder="请输入" />
                </div>
                <div
                  v-else-if="item.indexOf('用户姓名')!==-1"
                >
                  <el-input v-model="row[item]" placeholder="请输入" />
                </div>
                <div v-else-if="item.indexOf('数据范围')!==-1">
                  <el-select
                    v-model="row[item]"
                    placeholder="请选择"
                    filterable
                    clearable
                  >
                    <el-option
                      v-for="item in powerArr"
                      :key="item.code"
                      :label="item.name"
                      :value="item.code"
                    />
                  </el-select>
                </div>
                <div v-else-if="item.indexOf('状态')!==-1">
                  <el-select
                    v-model="row[item]"
                    placeholder="请选择"
                    filterable
                    style="width:100%"
                    clearable
                  >
                    <el-option
@@ -229,18 +206,6 @@
                    :show-all-levels="false"
                  />
                </div>
                <div v-else-if="item.indexOf('数据权限')!==-1">
                  <el-cascader
                    ref="cascader"
                    v-model="row[item]"
                    :options="orgOptions"
                    filterable
                    collapse-tags
                    :disabled="row['数据范围']!=='CUSTOM'"
                    :props="orgDefaultProps"
                    :show-all-levels="false"
                  />
                </div>
                <div v-else> {{ row[item] }}</div>
              </template>
            </el-table-column>
@@ -275,6 +240,56 @@
      <el-button type="text" style="margin-left: 0;">3.请上传文件提交</el-button>
    </el-empty>

    <el-dialog
      v-el-drag-dialog
      title="失败原因"
      :visible.sync="dialogVisible"
      width="1000px"
      :close-on-click-modal="false"
      top="15vh"
      @closed="handleClose"
      @close="handleClose"
    >
      <div class="">
        <el-table
          ref="tableDataRef"
          class="tableFixed"
          :data="dialogTableData"
          :height="400"
          border
          row-class-name="custom-row"
          :style="{width: 100+'%',height: '400px',}"
          highlight-current-row
          :header-cell-style="this.$headerCellStyle"
          :cell-style="this.$cellStyle"
        >
          <el-table-column
            type="index"
            width="50"
            fixed
            label="序号"
          />
          <el-table-column
            prop="errorField"
            label="错误字段"

            show-overflow-tooltip
          />
          <el-table-column
            prop="errorCont"
            show-overflow-tooltip
            label="错误原因"
          />
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <div class="footerButton">
          <el-button v-waves @click="dialogVisible=false">返 回</el-button>
          <!--          <el-button v-waves type="primary" @click="dialogVisibleConfirm">确 定</el-button>-->
        </div>
      </span>
    </el-dialog>

  </div>
</template>

@@ -284,10 +299,13 @@
import { GroupsPermissions, PostPermissions, PrentOrganization, RolePermissions } from '@/api/GeneralBasicData'
import { nanoid } from 'nanoid'
import arrayToTree from 'array-to-tree'
import elDragDialog from '@/directive/el-drag-dialog'
import waves from '@/directive/waves'

export default {
  name: 'UploadExcel',
  name: 'DataImport',
  components: { UploadExcelComponent },
  directives: { elDragDialog, waves },
  data() {
    return {
      mainHeight: window.innerHeight - 85,
@@ -318,14 +336,8 @@
      roleArr: [], // 角色
      groupArr: [], // 班组

      powerArr: [
        { code: 'ALL', name: '全部' },
        { code: 'LEVEL', name: '本级' },
        { code: 'PERSON', name: '本人' },
        { code: 'CUSTOM', name: '自定义' }
      ], // 数据范围

      tableKey: new Date().getTime()
      dialogVisible: false,
      dialogTableData: []

    }
  },
@@ -352,11 +364,12 @@
      }

      this.$message({
        message: 'Please do not upload files larger than 1m in size.',
        message: '请不要上传大于1兆的文件。',
        type: 'warning'
      })
      return false
    },
    // excel成功后的回调
    async handleSuccess({ results, header, sheetName }) {
      if (results[0].length === 0) {
        return this.$message.info('表格数据不能为空！')
@@ -368,10 +381,98 @@
      console.log(this.tableData)
      console.log(this.tableHeader)

      // this.tableHeader

      // 人员管理导入判断
      if (this.sheetName.indexOf('人员管理') !== -1) {
        this.handlePersonListUploadTemplate(true)
      }

      if (this.sheetName.indexOf('角色管理') !== -1 || this.sheetName.indexOf('班组管理') !== -1) {
        this.statusArr = [
          { code: 'Y', name: '正常' },
          { code: 'N', name: '停用' }
        ]
        this.tableData[0].forEach(j => {
          j['*状态'] = j['*状态'] ? this.statusArr.find(e => e.name === j['*状态']).code : ''
          j.uuid = nanoid()
        })
      }
    },
    // 提交
    submit() {
      this.$confirm('是否确认提交?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          if (this.sheetName.indexOf('人员管理') !== -1) {
            const res = this.handlePersonListSubmitData()
            if (res.code !== '200') {
              return this.$message.info(res.message)
            }
          }

          if (this.sheetName.indexOf('角色管理') !== -1) {
            const res = this.handleRoleListSubmitData()
            if (res.code !== '200') {
              return this.$message.info(res.message)
            }
          }
          if (this.sheetName.indexOf('班组管理') !== -1) {
            const res = this.handleGroupListSubmitData()
            if (res.code !== '200') {
              return this.$message.info(res.message)
            }
          }

          const data = {
            fileCode: this.excelCode,
            tableData: this.tableData
          }
          ExcelModelCheck(data).then(res => {
            // 返回的json1、json2、json3   json1为模板校验、json2为数据校验、json3为导入数据库校验(可能会有系统报错产生)
            if (res.json1.code !== '200' && res.json2 === null && res.json3 === null) {
              this.$message.error(res.json1.message)
            }
            if (res.json1.code === '200' && res.json2 !== '200' && res.json3 === null) {
              this.$message.error(res.json2.message)
            }
            if (res.json1.code === '200' && res.json2 === '200' && res.json3 !== '200') {
              this.$message.error(res.json3.message)
            }

            if (res.json1.code === '300' && res.json2.code === '200' && res.json3.code === '300') { // 系统报错
              return this.$message.error(res.json3.message)
            }

            if (res.json1.code === '200' && res.json2.code === '301' && res.json3 === null) {
              this.dialogVisible = true
              this.dialogTableData = res.json2.data
            }

            if (res.json1.code === '200' && res.json2.code === '200' && res.json3.code === '200') {
              this.$notify.success('数据提交成功!')
              this.tableData = []
              this.tableHeader = []
              this.sheetName = []
              this.excelCode = ''

              return
            }

            if (this.sheetName.indexOf('人员管理') !== -1) {
              this.handlePersonListUploadTemplate(false)
            }
          })
        })
        .catch(e => {
          console.log(e)
          this.$notify.info('已取消提交！')
        })
    },

    // 处理人员管理导入模板
    handlePersonListUploadTemplate(isFirstUpload) {
        this.statusArr = [
          { code: 'Y', name: '在职' },
          { code: 'N', name: '离职' }
@@ -382,69 +483,34 @@
        const orgArr = this.orgArr.map(i => i.torg_code)

        // this.sheetName.indexOf('人员管理')
      // 第一次提交
      if (isFirstUpload) {
        this.tableData[0].forEach(j => {
          // j.所属岗位编码 = typeof j.所属岗位编码 === 'undefined' ? new Set() : j.所属岗位编码.split(',').filter(e => postArr.includes(e))
          // j.所属角色编码 = typeof j.所属角色编码 === 'undefined' ? ''.split(',') : j.所属角色编码.split(',').filter(e => roleArr.includes(e))
          // j.所属班组编码 = typeof j.所属班组编码 === 'undefined' ? ''.split(',') : j.所属班组编码.split(',').filter(e => groupArr.includes(e))

          j['所属岗位编码'] = j['所属岗位编码'] ? j['所属岗位编码'].split(',').filter(e => postArr.includes(e)) : []
          j['所属角色编码'] = j['所属角色编码'] ? j['所属角色编码'].split(',').filter(e => roleArr.includes(e)) : []
          j['所属班组编码'] = j['所属班组编码'] ? j['所属班组编码'].split(',').filter(e => groupArr.includes(e)) : []
          j['*所属组织编码'] = j['*所属组织编码'] ? (orgArr.includes(j['*所属组织编码']) ? j['*所属组织编码'] : '') : ''
          j['*所属组织编码'] = j['*所属组织编码'] ? (orgArr.includes(j['*所属组织编码']) ? this.findParent([], j['*所属组织编码'], this.orgOptions).reverse() : '') : ''
          j['*在职状态'] = j['*在职状态'] ? this.statusArr.find(e => e.name === j['*在职状态']).code : 'Y'

          // j['手机号'] = j['手机号'] ? j['手机号'] : ''
          // j['邮箱'] = j['邮箱'] ? j['邮箱'] : ''
          // j['*密码'] = j['*密码'] ? j['*密码'] : ''
          // j['*用户姓名'] = j['*用户姓名'] ? j['*用户姓名'] : ''
          // j['*用户编号(唯一)'] = j['*用户编号(唯一)'] ? j['*用户编号(唯一)'] : ''
          j.uuid = nanoid()
        })

        // this.tableKey = 'asd'
        // this.$forceUpdate()
      }

      if (this.sheetName.indexOf('角色管理') !== -1) {
        this.statusArr = [
          { code: 'Y', name: '停用' },
          { code: 'N', name: '启用' }
        ]

      // 非第一次提交
      if (!isFirstUpload) {
        this.tableData[0].forEach(j => {
          // j.所属岗位编码 = j.所属岗位编码.split(',').filter(e => postArr.includes(e))
          // console.log(j['数据权限'], 1) // 级联多选回显  待研究  下次写
          j['数据范围'] = this.powerArr.find(e => e.name === j['数据范围']).code
          j['*状态'] = this.statusArr.find(e => e.name === j['*状态']).code
          j.所属岗位编码 = typeof j.所属岗位编码 === 'string' ? j.所属岗位编码.split(',').filter(e => postArr.includes(e)) : []
          j.所属角色编码 = typeof j.所属角色编码 === 'string' ? j.所属角色编码.split(',').filter(e => roleArr.includes(e)) : []
          j.所属班组编码 = typeof j.所属班组编码 === 'string' ? j.所属班组编码.split(',').filter(e => groupArr.includes(e)) : []
          j['*所属组织编码'] = this.findParent([], j['*所属组织编码'], this.orgOptions).reverse()

          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 })
      window.location.href = res.data
    },
    submit() {
      this.$confirm('是否确认提交?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
    // 处理人员管理提交数据
    handlePersonListSubmitData() {
          let flag = true
          let msg = ''
          if (this.sheetName.indexOf('人员管理') !== -1) {
            if ([...new Set(this.tableData[0].map(i => i['*用户编号(唯一)']))].length !== this.tableData[0].length) {
              return this.$message.info('编码不能重复！')
            }
@@ -473,13 +539,9 @@
            })

            if (!flag) {
              return this.$message.info(msg + '不能为空！')
        return { code: '301', message: msg + '不能为空！' }
            }

            this.tableData[0].forEach(j => {
              // j['所属岗位编码'] = typeof j['所属岗位编码'] === 'string' ? j['所属岗位编码'] : j['所属岗位编码'].join(',')
              // j['所属班组编码'] = typeof j['所属班组编码'] === 'string' ? j['所属班组编码'] : j['所属班组编码'].join(',')
              // j['所属角色编码'] = typeof j['所属角色编码'] === 'string' ? j['所属角色编码'] : j['所属角色编码'].join(',')
              j['所属岗位编码'] = j['所属岗位编码'].join(',')
              j['所属班组编码'] = j['所属班组编码'].join(',')
              j['所属角色编码'] = j['所属角色编码'].join(',')
@@ -489,62 +551,91 @@
            this.tableData[0].map(item => {
              delete (item.uuid)
            })
          }

          const data = {
            fileCode: this.excelCode,
            tableData: this.tableData
      return { code: '200', message: '成功！' }
    },
    // 处理角色管理提交数据
    handleRoleListSubmitData() {
      let flag = true
      let msg = ''
      if ([...new Set(this.tableData[0].map(i => i['*角色编号(唯一)']))].length !== this.tableData[0].length) {
        return this.$message.info('编码不能重复！')
          }

          ExcelModelCheck(data).then(res => {
            // 返回的json1、json2、json3   json1为模板校验、json2为数据校验、json3为导入数据库校验(可能会有系统报错产生)
            if (res.json1.code !== '200' && res.json2 === null && res.json3 === null) {
              this.$message.error(res.json1.message)
            }
            if (res.json1.code === '200' && res.json2 !== '200' && res.json3 === null) {
              this.$message.error(res.json2.message)
            }
            if (res.json1.code === '200' && res.json2 === '200' && res.json3 !== '200') {
              this.$message.error(res.json3.message)
            }

            // if (res.json1.code !== '200' && res.json2.code !== '200') {
            // if (res.json2.code !== '200') {
            if (this.sheetName.indexOf('人员管理') !== -1) {
              const postArr = this.postArr.map(i => i.postcode)
              const roleArr = this.roleArr.map(i => i.rolecode)
              const groupArr = this.groupArr.map(i => i.usergroupcode)
              const orgArr = this.orgArr.map(i => i.torg_code)

              this.tableData[0].forEach(j => {
                j.所属岗位编码 = j.所属岗位编码.split(',').filter(e => postArr.includes(e))
                j.所属角色编码 = j.所属角色编码.split(',').filter(e => roleArr.includes(e))
                j.所属班组编码 = j.所属班组编码.split(',').filter(e => groupArr.includes(e))
                // j['*在职状态'] = this.statusArr.find(e => e.name === j['*在职状态']).code
                // j['*所属组织编码'] = j['*所属组织编码'][j['*所属组织编码'].length - 1]
                j['*所属组织编码'] = this.findParent([], j['*所属组织编码'], this.orgOptions).reverse()

                j.uuid = nanoid()
              })
        if (!j['*角色编号(唯一)']) {
          flag = false
          msg = '*角色编号(唯一)'
            }
            // return this.$message.error(res.json1.message + ',' + res.json2.message)
            // }

            if (res.json1.code === '200' && res.json2 === '200' && res.json3 === '200') {
              this.$notify.success('数据提交成功!')
              this.tableData = []
              this.tableHeader = []
              this.sheetName = []
              this.excelCode = ''
            } else {
              this.$notify.error('数据提交失败!')
        if (!j['*角色名称']) {
          flag = false
          msg = '*角色名称'
        }
        if (!j['*状态']) {
          flag = false
          msg = '*状态'
            }
          })

      if (!flag) {
        return { code: '301', message: msg + '不能为空！' }
      }

      this.tableData[0].map(item => {
        delete (item.uuid)
        })
        .catch(e => {
          console.log(e)
          this.$notify.info('已取消提交！')

      return { code: '200', message: '成功！' }
    },
    // 处理班组管理提交数据
    handleGroupListSubmitData() {
      let flag = true
      let msg = ''
      if ([...new Set(this.tableData[0].map(i => i['*角色编号(唯一)']))].length !== this.tableData[0].length) {
        return this.$message.info('编码不能重复！')
      }
      this.tableData[0].forEach(j => {
        if (!j['*班组编号(唯一)']) {
          flag = false
          msg = '*班组编号(唯一)'
        }
        if (!j['*班组名称']) {
          flag = false
          msg = '*班组名称'
        }
        if (!j['*状态']) {
          flag = false
          msg = '*状态'
        }
        })

      if (!flag) {
        return { code: '301', message: msg + '不能为空！' }
      }

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

      return { code: '200', message: '成功！' }
    },

    // 获取模板
    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 })
      window.location.href = res.data
    },

    handleClose() {
      this.dialogTableData = []
    },
    // parents:用于返回的数组，childNode:要查询的节点，treeData：json树形数据
    findParent(parents, childNode, treeData) {
@@ -584,16 +675,37 @@
          '所属班组编码': []
        })
      }
      //  角色管理新增行
      if (this.sheetName.indexOf('角色管理') !== -1) {
        this.tableData[0].unshift({
          uuid: nanoid(),
          '*角色编号(唯一)': '',
          '*角色名称': '',
          '*状态': 'Y',
          '描述': ''
        })
      }
      //  班组管理新增行
      if (this.sheetName.indexOf('班组管理') !== -1) {
        this.tableData[0].unshift({
          uuid: nanoid(),
          '*班组编号(唯一)': '',
          '*班组名称': '',
          '*状态': 'Y',
          '描述': ''
        })
      }
    },
    delRow(row) {
      // 人员管理删除行
      if (this.sheetName.indexOf('人员管理') !== -1) {
      // 针对单sheet
      if (this.sheetName.length === 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('必须要有一条数据！')
        }
      }
      // 针对多sheet
    },

    reset() {
@@ -679,3 +791,9 @@
}
</script>

<style lang="scss">
::v-deep .el-dialog__body {
  padding: 20px 20px !important;
}

</style>