1.数据导入60% 实现demo

loulijun2021

2023-09-08 588083b5e983686cebac8da2f26dbe231b824472

1.数据导入60%   实现demo

 package.json

@@ -42,7 +42,8 @@
    "vue-print-nb": "^1.7.5",
    "vue-router": "3.0.6",
    "vue-splitpane": "^1.0.6",
    "vuedraggable": "^2.24.3"
    "vuedraggable": "^2.24.3",
    "xlsx": "0.14.1"
  },
  "devDependencies": {
    "@aspnet/signalr": "^1.0.27",

 src/api/Excel.js

@@ -1,6 +1,15 @@
import request from '@/utils/request'

// Excel导入模板下载
// æŸ¥è¯¢excel模板
export function ExcelModelData(data) {
  return request({
    url: 'ImportExcel/ExcelModelData',
    method: 'get',
    params: data
  })
}

// ä¸‹è½½excel模板
export function DownLoadExcel(data) {
  return request({
    url: 'ImportExcel/DownLoadExcel',
@@ -9,29 +18,38 @@
  })
}

// Excel导入文件上传、模板验证、数据量、验证
// Excel导入数据提交、模板验证
export function ExcelModelCheck(data) {
  return request({
    url: 'ImportExcel/ExcelModelCheck',
    method: 'post',
    params: data
    data
  })
}

// Excel导入数据验证
export function ExcelCheckData(data) {
  return request({
    url: 'ImportExcel/ExcelCheckData',
    method: 'post',
    params: data
  })
}

// Excel导入数据
export function ExcelImportSubmit(data) {
  return request({
    url: 'ImportExcel/ExcelImportSubmit',
    method: 'POST',
    params: data
  })
}
// Excel导入文件上传、模板验证、数据量、验证
// export function ExcelModelCheck(data) {
//   return request({
//     url: 'ImportExcel/ExcelModelCheck',
//     method: 'post',
//     params: data
//   })
// }
//
// // Excel导入数据验证
// export function ExcelCheckData(data) {
//   return request({
//     url: 'ImportExcel/ExcelCheckData',
//     method: 'post',
//     params: data
//   })
// }
//
// // Excel导入数据
// export function ExcelImportSubmit(data) {
//   return request({
//     url: 'ImportExcel/ExcelImportSubmit',
//     method: 'POST',
//     params: data
//   })
// }

 src/components/UploadExcel/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,158 @@
<template>
  <div>
    <input
      ref="excel-upload-input"
      class="excel-upload-input"
      type="file"
      accept=".xlsx, .xls"
      @change="handleClick"
    >
    <el-button
      :loading="loading"
      style="margin-left:16px;"
      :disabled="disabled"
      type="primary"
      @click="handleUpload"
    >
      æ–‡ä»¶ä¸Šä¼ 
    </el-button>
  </div>
</template>

<script>
import XLSX from 'xlsx'

export default {
  props: {
    disabled: Boolean,
    beforeUpload: Function, // eslint-disable-line
    onSuccess: Function// eslint-disable-line
  },
  data() {
    return {
      loading: false,
      excelData: {
        header: null,
        results: null,
        sheetName: null
      }
    }
  },
  methods: {
    generateData({ header, results }) {
      this.excelData.header = header // ç”¨åšel-table表头
      this.excelData.results = results // ç”¨åšel-table表体
      this.onSuccess && this.onSuccess(this.excelData)

      // æ•°ç»„对象更换键名
      // const aaa = JSON.parse(JSON.stringify(results))
      // const bb = aaa.map(({
      //   åºå·, å§“名
      // }) => ({
      //   index: åºå·,
      //   name: å§“名
      // }))
      // console.log(bb, 321)
    },
    handleUpload() {
      this.$refs['excel-upload-input'].click()
    },
    handleClick(e) {
      const files = e.target.files
      const rawFile = files[0] // only use files[0]
      if (!rawFile) return
      this.upload(rawFile)
    },
    upload(rawFile) {
      this.$refs['excel-upload-input'].value = null // fix can't select the same excel
      if (!this.beforeUpload) {
        this.readerData(rawFile)
        return
      }
      const before = this.beforeUpload(rawFile)
      if (before) { // æ‰§è¡Œäº†
        this.readerData(rawFile)
      }
    },
    readerData(rawFile) {
      this.loading = true
      return new Promise((resolve, reject) => {
        const reader = new FileReader()
        reader.onload = e => {
          const data = e.target.result
          const workbook = XLSX.read(data, { type: 'array' })
          let worksheet = []
          const header = []
          const results = []
          workbook.SheetNames.forEach((item, index) => {
            worksheet = workbook.Sheets[item]
            header.push(this.getHeaderRow(worksheet))
            results.push(XLSX.utils.sheet_to_json(worksheet))
          })
          this.excelData.sheetName = workbook.SheetNames
          // console.log(header)
          // console.log(results)
          // const firstSheetName = workbook.SheetNames[0]
          // const worksheet = workbook.Sheets[firstSheetName]
          // const header = this.getHeaderRow(worksheet)
          // const results = XLSX.utils.sheet_to_json(worksheet)
          this.generateData({ header, results })
          this.loading = false
          resolve()
        }
        reader.readAsArrayBuffer(rawFile)
      })
    },
    getHeaderRow(sheet) {
      const headers = []
      const range = XLSX.utils.decode_range(sheet['!ref'])
      let C
      const R = range.s.r
      /* start in the first row */
      for (C = range.s.c; C <= range.e.c; ++C) { /* walk every column in the range */
        const cell = sheet[XLSX.utils.encode_cell({ c: C, r: R })]
        /* find the cell in the first row */
        let hdr = 'UNKNOWN ' + C // <-- replace with your desired default
        if (cell && cell.t) hdr = XLSX.utils.format_cell(cell)
        headers.push(hdr)
      }
      return headers
    },
    isExcel(file) {
      return /\.(xlsx|xls|csv)$/.test(file.name)
    }
  }
}
</script>

<style scoped>
.excel-upload-input {
  display: none;
  z-index: -9999;
}

.drop {
  border: 2px dashed #bbb;
  width: 600px;
  height: 160px;
  line-height: 160px;
  margin: 0 auto;
  font-size: 24px;
  border-radius: 5px;
  text-align: center;
  color: #bbb;
  position: relative;
}

</style>

<style>

/*.has-gutter{*/
/*  color:  #34bfa3 !important;*/
/*}*/

/*.is-leaf{*/
/*  background-color: #34bfa3 !important;*/
/*}*/
</style>

 src/router/index.js

@@ -450,6 +450,13 @@
        code: '0802',
        component: () => import('@/views/systemSetting/encodingRules'),
        meta: { code: '0802', title: '编码规则', icon: '', keepAlive: true }
      },
      {
        path: 'dataImport',
        name: 'dataImportCancel',
        code: '0803',
        component: () => import('@/views/systemSetting/dataImport'),
        meta: { code: '0803', title: '数据导入', icon: '', keepAlive: true }
      }
    ]
  }

 src/views/basicSettings/personList.vue

@@ -149,8 +149,8 @@
                sortable="custom"
              >
                <template slot-scope="{row}">
                  <el-tag v-if="row.status==='Y'" size="small" type="success">正常</el-tag>
                  <el-tag v-if="row.status==='N'" size="small" type="danger">停用</el-tag>
                  <el-tag v-if="row.status==='Y'" size="small" type="success">在职</el-tag>
                  <el-tag v-if="row.status==='N'" size="small" type="danger">离职</el-tag>
                </template>
              </el-table-column>
              <el-table-column
@@ -300,8 +300,8 @@

        <el-form-item required label="用户状态">
          <el-radio-group v-model="dialogForm.status" style="width: 200px;">
            <el-radio label="Y">正常</el-radio>
            <el-radio label="N">停用</el-radio>
            <el-radio label="Y">在职</el-radio>
            <el-radio label="N">离职</el-radio>
          </el-radio-group>
        </el-form-item>


 src/views/basicSettings/roleList.vue

@@ -211,34 +211,34 @@
            <el-radio label="N">停用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="dialogForm.datacode==='CUSTOM'" label="数据权限" style="margin: 0">
          <el-checkbox-group v-model="checkboxGroupSelected" @change="checkboxGroupChange">
            <el-checkbox v-for="item in checkboxGroup" :key="item" :label="item">
              {{ item }}
              <el-tooltip class="item" effect="dark" content="勾选父节点是否同时选中子节点" placement="top">
                <i v-if="item==='父子联动'" class="el-icon-question" />
              </el-tooltip>
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-card
          v-if="dialogForm.datacode==='CUSTOM'"
          class="box-card"
          shadow="never"
          style="margin-bottom: 30px;width: 78%;margin-left: 12%;"
        >
        <!--        <el-form-item v-if="dialogForm.datacode==='CUSTOM'" label="数据权限" style="margin: 0">-->
        <!--          <el-checkbox-group v-model="checkboxGroupSelected" @change="checkboxGroupChange">-->
        <!--            <el-checkbox v-for="item in checkboxGroup" :key="item" :label="item">-->
        <!--              {{ item }}-->
        <!--              <el-tooltip class="item" effect="dark" content="勾选父节点是否同时选中子节点" placement="top">-->
        <!--                <i v-if="item==='父子联动'" class="el-icon-question" />-->
        <!--              </el-tooltip>-->
        <!--            </el-checkbox>-->
        <!--          </el-checkbox-group>-->
        <!--        </el-form-item>-->
        <!--        <el-card-->
        <!--          v-if="dialogForm.datacode==='CUSTOM'"-->
        <!--          class="box-card"-->
        <!--          shadow="never"-->
        <!--          style="margin-bottom: 30px;width: 78%;margin-left: 12%;"-->
        <!--        >-->

          <el-tree
            ref="tree"
            :key="checkboxGroupSelected.toString()"
            :data="treeData"
            show-checkbox
            :check-strictly="!checkboxGroupSelected.includes('父子联动')"
            :default-expand-all="checkboxGroupSelected.includes('展开/折叠')"
            node-key="torg_code"
            :props="defaultProps"
          />
        </el-card>
        <!--          <el-tree-->
        <!--            ref="tree"-->
        <!--            :key="checkboxGroupSelected.toString()"-->
        <!--            :data="treeData"-->
        <!--            show-checkbox-->
        <!--            :check-strictly="!checkboxGroupSelected.includes('父子联动')"-->
        <!--            :default-expand-all="checkboxGroupSelected.includes('展开/折叠')"-->
        <!--            node-key="torg_code"-->
        <!--            :props="defaultProps"-->
        <!--          />-->
        <!--        </el-card>-->

        <el-form-item label="备注">
          <el-input v-model="dialogForm.description" type="textarea" style="width:500px" />

 src/views/systemSetting/dataImport.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,452 @@
<template>
  <div class="" :style="{height:mainHeight+'px'}">

    <div style="display: flex;margin: 20px 10px;">

      <el-select
        v-model="excelCode"
        style="width:200px"
        placeholder="请选择模板文件"
        :popper-append-to-body="false"
        clearable
      >
        <el-option
          v-for="item in excelArr"
          :key="item.fileCode"
          :label="item.fileName"
          :value="item.fileCode"
        />
      </el-select>

      <el-button
        type="primary"
        style="margin-left: 20px"
        :disabled="excelCode===''"
        @click="getExcel"
      >下载模板
      </el-button>

      <upload-excel-component
        :on-success="handleSuccess"
        :before-upload="beforeUpload"
        :disabled="excelCode===''"
      />

      <el-button
        type="info"
        style="margin-left: 20px"
        :disabled="excelCode===''"
        @click="reset"
      >重置
      </el-button>

      <el-button
        type="primary"
        style="margin-left: 20px"
        :disabled="excelCode===''"
        @click="submit"
      >提交
      </el-button>

    </div>

    <div
      v-if="sheetName.length>0"
      style="margin: 10px"
    >

      <el-tabs type="border-card">
        <el-tab-pane
          v-for="(i,j) in sheetName"
          :key="i+j"
          :label="i"
        >
          <!--          height:(mainHeight-180)+'px',-->
          <el-table
            ref="tableDataRef"
            :data="tableData[j]"
            border
            :height="(mainHeight-180)+'px'"
            :header-cell-style="headerCellStyle"
            :cell-style="cellStyle"
            :style="{width: 100+'%',height:(mainHeight-180)+'px',zIndex:10}"
            style="overflow-y: scroll;"
            highlight-current-row
          >
            <!--          <el-table-column-->
            <!--            type="selection"-->
            <!--            width="55"-->
            <!--          />-->
            <el-table-column
              type="index"
              label="序号"
              width="55"
              fixed
              align="center"
            />

            <el-table-column
              v-for="item of tableHeader[j]"
              :key="item"
              :prop="item"
              :label="item"
              align="center"
              :render-header="addRedStar"
              width="220"
            >
              <template slot-scope="{row}">

                <div
                  v-if="item.indexOf('用户编号(唯一)')!==-1||
                    item.indexOf('用户姓名')!==-1||
                    item.indexOf('密码')!==-1||
                    item.indexOf('手机号')!==-1||
                    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 statusArr"
                      :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]"
                    style="width: 100%;"
                    placeholder="请选择"
                    multiple
                    filterable
                    collapse-tags
                    clearable
                  >

                    <el-option
                      v-for="item in postArr"
                      :key="item.postcode"
                      :label="item.postname"
                      :value="item.postcode"
                    />
                  </el-select>
                </div>
                <div v-else-if="item.indexOf('所属角色编码')!==-1">
                  <el-select
                    v-model="row[item]"
                    style="width: 100%;"
                    placeholder="请选择"
                    multiple
                    filterable
                    collapse-tags
                    clearable
                  >
                    <el-option
                      v-for="item in roleArr"
                      :key="item.rolecode"
                      :label="item.rolename"
                      :value="item.rolecode"
                    />
                  </el-select>
                </div>
                <div v-else-if="item.indexOf('所属班组编码')!==-1">
                  <el-select
                    v-model="row[item]"
                    style="width: 100%;"
                    placeholder="请选择"
                    collapse-tags
                    multiple
                    filterable
                    clearable
                  >
                    <el-option
                      v-for="item in groupArr"
                      :key="item.usergroupcode"
                      :label="item.usergroupname"
                      :value="item.usergroupcode"
                    />
                  </el-select>
                </div>
                <div v-else-if="item.indexOf('所属组织编码')!==-1">
                  <el-select
                    v-model="row[item]"
                    style="width: 100%;"
                    placeholder="请选择"
                    filterable
                    clearable
                  >
                    <el-option
                      v-for="item in orgArr"
                      :key="item.torg_code"
                      :label="item.torg_name"
                      :value="item.torg_code"
                    />
                  </el-select>
                </div>
                <div v-else> {{ row[item] }}</div>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              width="120"
              fixed="right"
            />
          </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>-->
  </div>
</template>

<script>
import UploadExcelComponent from '@/components/UploadExcel/index.vue'
import { DownLoadExcel, ExcelModelCheck, ExcelModelData } from '@/api/Excel'
import { GroupsPermissions, PostPermissions, PrentOrganization, RolePermissions } from '@/api/GeneralBasicData'

export default {
  name: 'UploadExcel',
  components: { UploadExcelComponent },
  data() {
    return {
      mainHeight: window.innerHeight - 85,

      tableData: [],
      tableHeader: [],
      sheetName: [],

      excelCode: '',
      excelArr: [],

      statusArr: [
        { code: 'Y', name: '在职' },
        { code: 'N', name: '离职' }
      ],
      orgArr: [], // ç»„织
      postArr: [], // å²—位
      roleArr: [], // è§’色
      groupArr: []// ç­ç»„

    }
  },
  mounted() {
    this.getExcelModelData()

    this.getSelectArr()
    window.addEventListener('resize', this.getHeight)
  },
  methods: { // èŽ·å–页面高度
    getHeight() {
      this.$nextTick(() => {
        this.mainHeight = window.innerHeight - 85

        // this.$nextTick(() => {
        //   this.$refs.tableDataRef.doLayout()
        // })
      })
    },
    async beforeUpload(file) {
      const isLt1M = file.size / 1024 / 1024 < 1
      if (isLt1M) {
        return true
      }

      this.$message({
        message: 'Please do not upload files larger than 1m in size.',
        type: 'warning'
      })
      return false
    },
    async handleSuccess({ results, header, sheetName }) {
      this.tableData = results
      this.tableHeader = header
      this.sheetName = sheetName

      // ç”¨æˆ·æ¸…单导入判断
      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[this.sheetName.indexOf('用户清单')].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['*所属组织编码'] = orgArr.includes(j['*所属组织编码']) ? j['*所属组织编码'] : ''
          j['*在职状态'] = this.statusArr.find(e => e.name === j['*在职状态']).code
        })
      }
    },
    async getExcelModelData() {
      const { data: res } = await ExcelModelData()
      this.excelArr = res
    },
    async getExcel() {
      const res = await DownLoadExcel({ FileCode: this.excelCode })
      window.location.href = res.data
    },
    submit() {
      // console.log(this.excelCode)
      // console.log(JSON.stringify(this.sheetName))
      // console.log(JSON.stringify(this.tableHeader))
      // console.log(JSON.stringify(this.tableData))

      this.$confirm('是否确认提交?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let flag = true
        let msg = ''
        if (this.sheetName.indexOf('用户清单') !== -1) {
          // if ([...new Set(this.tableData[0].filter(i => i['*用户编号(唯一)'] !== '').map(i => i['*用户编号(唯一)']))].length !== this.tableData[0].length) {
          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['*用户编号(唯一)'].trim() === '') {
              flag = false
              msg = '*用户编号(唯一)'
            }
            if (j['*用户姓名'].trim() === '') {
              flag = false
              msg = '*用户姓名'
            }
            if (j['*密码'].trim() === '') {
              flag = false
              msg = '*密码'
            }
            if (j['*在职状态'].trim() === '') {
              flag = false
              msg = '*在职状态'
            }
            if (j['*所属组织编码'].trim() === '') {
              flag = false
              msg = '*所属组织编码'
            }
          })

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

          this.tableData[0].forEach(j => {
            j.所属岗位编码 = j.所属岗位编码.join(',')
            j.所属班组编码 = j.所属班组编码.join(',')
            j.所属角色编码 = j.所属角色编码.join(',')
          })
        }
        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('提交成功!')
            this.tableData = []
            this.tableHeader = []
            this.sheetName = []
            this.excelCode = ''
          }
        })
      }).catch(() => {
        this.$notify.info('已取消提交！')
      })
    },
    reset() {
      this.tableData = []
      this.tableHeader = []
      this.sheetName = []
      this.excelCode = ''
    },
    async getSelectArr() {
      await this.getPrentOrganization()
      await this.getPostPermissions()
      await this.getRolePermissions()
      await this.getGroupsPermissions()
    },
    // ç»„织架构级联选择器
    async getPrentOrganization() {
      const { data: res } = await PrentOrganization()
      this.orgArr = res
      // this.cascaderOptions = arrayToTree(res, {
      //   parentProperty: 'parent_id',
      //   customID: 'torg_code',
      //   childrenProperty: 'children'
      // })
    },
    // èŽ·å–岗位下拉数组
    async getPostPermissions() {
      const { data: res } = await PostPermissions()
      this.postArr = res
    },
    // èŽ·å–角色下拉数组
    async getRolePermissions() {
      const { data: res } = await RolePermissions()
      this.roleArr = res
    },
    // èŽ·å–班组下拉数组
    async getGroupsPermissions() {
      const { data: res } = await GroupsPermissions()
      this.groupArr = res
    },
    headerCellStyle({ row, column, rowIndex, columnIndex }) {
      let string = ''
      if (column.label.indexOf('*') !== -1 && rowIndex === 0) {
        string = 'background:#ffc000;'
      } else if (column.label.indexOf('*') === -1 && rowIndex === 0) {
        string = 'background:#00b0f0;'
      }
      return string + 'padding: 5px 0; fontWeight: 500;'
    },
    cellStyle() {
      const option = {
        padding: '5px 0'
      }
      return option
    },
    addRedStar(h, { column }) {
      if (column.label.indexOf('*') !== -1) { // å¿…填字段
        return [
          h('span', { style: 'color:#F56C6C' }, ' * '),
          h('span', { style: 'color:#FFF' }, column.label.substring(1))
        ]
      } else { // éžå¿…填字段
        return [
          // h('span', { style: 'color:#F56C6C' }, ' * '),
          h('span', { style: 'color:#FFF' }, column.label)
        ]
      }
    }

  }
}
</script>

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

</style>


 src/views/workOrder/workOrderClose.vue

@@ -1,11 +0,0 @@
<template />

<script>
export default {
  name: 'WorkOrderClose'
}
</script>

<style scoped>

</style>