1.优化

loulijun2021

2023-09-11 09abac7e834d4938e9cb243df0995f7b71531c07

 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,18 @@
            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"
            />
              :render-header="indexRender"
            >
              <template slot-scope="scope">
                {{ scope.$index + 1 }}
              </template>
            </el-table-column>

            <el-table-column
              v-for="item of tableHeader[j]"
@@ -92,21 +113,38 @@
              :label="item"
              align="center"
              :render-header="addRedStar"
              width="220"
              min-width="220"
            >
              <template slot-scope="{row}">

                <div
                  v-if="item.indexOf('用户编号(唯一)')!==-1||
                  v-if="item.indexOf('编号(唯一)')!==-1||
                    item.indexOf('用户姓名')!==-1||
                    item.indexOf('密码')!==-1||
                    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">
                <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="请选择"
@@ -121,7 +159,6 @@
                    />
                  </el-select>
                </div>

                <div v-else-if="item.indexOf('所属岗位编码')!==-1">
                  <el-select
                    v-model="row[item]"
@@ -178,40 +215,76 @@
                  </el-select>
                </div>
                <div v-else-if="item.indexOf('所属组织编码')!==-1">
                  <el-select
                  <el-cascader
                    ref="cascader"
                    v-model="row[item]"
                    style="width: 100%;"
                    placeholder="请选择"
                    :options="orgOptions"
                    filterable
                    clearable
                  >
                    <el-option
                      v-for="item in orgArr"
                      :key="item.torg_code"
                      :label="item.torg_name"
                      :value="item.torg_code"
                    />
                  </el-select>
                    :props="defaultProps"
                    :show-all-levels="false"
                  />

                  <!--                  <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-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>

            <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 +292,8 @@
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'
import arrayToTree from 'array-to-tree'

export default {
  name: 'UploadExcel',
@@ -234,14 +309,31 @@
      excelCode: '',
      excelArr: [],

      statusArr: [
        { code: 'Y', name: '在职' },
        { code: 'N', name: '离职' }
      ],
      statusArr: [],
      orgArr: [], // 组织
      orgOptions: [],
      defaultProps: {
        checkStrictly: true,
        expandTrigger: 'hover',
        value: 'torg_code',
        label: 'torg_name'
      },
      orgDefaultProps: {
        multiple: true,
        expandTrigger: 'hover',
        value: 'torg_code',
        label: 'torg_name'
      },
      postArr: [], // 岗位
      roleArr: [], // 角色
      groupArr: []// 班组
      groupArr: [], // 班组

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

    }
  },
@@ -278,25 +370,57 @@
      this.tableHeader = header
      this.sheetName = sheetName

      // 用户清单导入判断
      if (this.sheetName.indexOf('用户清单') !== -1) {
      // 人员管理导入判断
      if (this.sheetName.indexOf('人员管理') !== -1) {
        this.statusArr = [
          { code: 'Y', name: '在职' },
          { code: 'N', name: '离职' }
        ]
        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 => {
        this.tableData[this.sheetName.indexOf('人员管理')].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.所属岗位编码.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
          j.uuid = nanoid()
        })
        console.log(this.tableData[0])
        // console.log(JSON.stringify(this.tableData[0]))
      }

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

        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.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
@@ -311,65 +435,146 @@
        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('已取消提交！')
      })
        .then(() => {
          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('编码不能重复！')
            }
            this.tableData[0].forEach(j => {
              if (!j['*用户编号(唯一)']) {
                flag = false
                msg = '*用户编号(唯一)'
              }

              if (!j['*用户姓名']) {
                flag = false
                msg = '*用户姓名'
              }
              if (!j['*密码']) {
                flag = false
                msg = '*密码'
              }
              if (!j['*在职状态']) {
                flag = false
                msg = '*在职状态'
              }
              if (!j['*所属组织编码']) {
                flag = false
                msg = '*所属组织编码'
              }
            })

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

            this.tableData[0].forEach(j => {
              j.所属岗位编码 = j.所属岗位编码.join(',')
              j.所属班组编码 = j.所属班组编码.join(',')
              j.所属角色编码 = j.所属角色编码.join(',')
              j['*所属组织编码'] = j['*所属组织编码'][j['*所属组织编码'].length - 1]
            })

            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.json1.code === '301' || res.json1.code === '300') {
              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()
                })
              }
              return this.$message.error(res.json1.message)
            }

            if (res.json1.code === '200' && res.json2.code === '200') {
              this.$notify.success('数据提交成功!')
              this.tableData = []
              this.tableHeader = []
              this.sheetName = []
              this.excelCode = ''
            } else {
              this.$notify.success('数据提交失败!')
            }
          })
        })
        .catch(e => {
          console.log(e)
          this.$notify.info('已取消提交！')
        })
    },
    // parents:用于返回的数组，childNode:要查询的节点，treeData：json树形数据
    findParent(parents, childNode, treeData) {
      // console.log(parents, childNode, treeData, 2)

      for (let i = 0; i < treeData.length; i++) {
        // 父节点查询条件
        if (treeData[i].torg_code === childNode) {
          // 如果找到结果,保存当前节点
          parents.push(treeData[i].torg_code)
          // 用当前节点再去原数据查找当前节点的父节点
          this.findParent(parents, treeData[i].parent_id, this.orgOptions)
          break
        } else {
          if (treeData[i].children instanceof Array) {
            //   没找到，遍历该节点的子节点
            this.findParent(parents, childNode, treeData[i].children)
          }
        }
      }
      return parents
    },
    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 = []
@@ -386,11 +591,11 @@
    async getPrentOrganization() {
      const { data: res } = await PrentOrganization()
      this.orgArr = res
      // this.cascaderOptions = arrayToTree(res, {
      //   parentProperty: 'parent_id',
      //   customID: 'torg_code',
      //   childrenProperty: 'children'
      // })
      this.orgOptions = arrayToTree(res, {
        parentProperty: 'parent_id',
        customID: 'torg_code',
        childrenProperty: 'children'
      })
    },
    // 获取岗位下拉数组
    async getPostPermissions() {
@@ -414,6 +619,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 +629,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) { // 必填字段
@@ -439,14 +657,4 @@
  }
}
</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>