diantou/src_custom/spicdecisionsupportcenter/components/iam-audit-dsc-userbase-list.vue

<template>
  <div :class="$style.wrapHeight">
    <div :class="$style.rowHeight">
      <audit-tree
        :checkable="false"
        :draggable="false"
        :is-search="true"
        :show-line="true"
        :top-node-id="topNodeId"
        :top-node-text="topNodeText"
        :selected-keys="[topNodeId]"
        :treeparams="{
          formId: 'IAM_ORG',
          idColumnId: 'id',
          nameColumnId: 'org_name',
          parentColumnId: 'parent_id',
          otherColumnId: ['org_id', 'creation_time'],
          configId: '11',
        }"
        :default-expanded-keys="[topNodeId]"
        :is-select-dep="false"
        manager-type="view"
        check-node-edit
        @treeSelect="treeSelect"
      ></audit-tree>
      <div :class="$style.rightcard">
        <a-card>
          <a-radio-group v-model="radioValue" :class="$style.radioGroup" @change="radioOnChange">
            <a-radio :value="'01'"> 在岗 </a-radio>
            <a-radio :value="'02'"> 调离 </a-radio>
          </a-radio-group>
          <div :class="[$style.btns]">
            <audit-advanced-export
              ref="userexport"
              :class-style="[$style.buttonSpacing]"
              :exclebxh="false"
              :expressions="SJRYKTableExpressions"
              :config-id="41"
              :v-if="false"
            />
          </div>
          <sd-oa-table
            ref="iamUserBaseTable"
            :editnode="editnode"
            form-id="iamUserBase"
            page-id="audit/auditsource/userbase/iamUserBase"
            :filter-expressions="getSJRYKTableExpressions"
            :columns="columns"
            :actions="actions"
            show-selection
            :search-fields="['userName']"
            :show-advance-query="true"
            @searchbtnClick="searchbtnClick"
          >
            <div slot="islink" slot-scope="text, record">
              <a :title="text" @click="rowClick(record)">{{ text }}</a>
            </div>
            <div slot="isProject" slot-scope="text, e">
              <a :title="text" @click="handleOk(e)">{{ text }}</a>
            </div>
          </sd-oa-table>
          <audit-advanced-query
            :expand="expand"
            :search-data="SJRYKFormData"
            :ref-name="searchform"
            :search-style="{ height: '245px', left: '35px', top: '60px' }"
            :search-fun="handleSearch"
            @searchedClick="searchedClick"
          >
            <template>
              <a-col :span="8">
                <a-form-model-item
                  :label="'姓\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002名'"
                  prop="userName"
                >
                  <a-input v-model="SJRYKFormData.userName" allow-clear />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item :label="'性\u2002\u2002\u2002\u2002别'" prop="userSex">
                  <sd-select
                    v-model="SJRYKFormData.userSex"
                    :allow-clear="true"
                    :options="userSex"
                  />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item :label="'所属机构'" prop="orgName">
                  <a-input v-model="SJRYKFormData.orgName" allow-clear />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item :label="'专/兼\u2002\u2002\u2002\u2002\u2002职'" prop="userJob">
                  <sd-select
                    v-model="SJRYKFormData.userJob"
                    :allow-clear="true"
                    :options="userJob"
                  />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item :label="'职\u2002\u2002\u2002\u2002级'" prop="userLevel">
                  <sd-select
                    v-model="SJRYKFormData.userLevel"
                    :allow-clear="true"
                    :options="userLevel"
                  />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item :label="'岗\u2002\u2002\u2002\u2002位'" prop="userPost">
                  <sd-select
                    v-model="SJRYKFormData.userPost"
                    :allow-clear="true"
                    :options="userPost"
                  />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item
                  :label="'民\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002族'"
                  prop="userNationality"
                >
                  <sd-select
                    v-model="SJRYKFormData.userNationality"
                    :allow-clear="true"
                    :options="userNationality"
                  />
                </a-form-model-item>
              </a-col>

              <a-col :span="8">
                <a-form-model-item :label="'学\u2002\u2002\u2002\u2002历'" prop="education">
                  <sd-select
                    v-model="SJRYKFormData.education"
                    :allow-clear="true"
                    :options="education"
                  />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item :label="'职\u2002\u2002\u2002\u2002称'" prop="competent">
                  <sd-select
                    v-model="SJRYKFormData.competent"
                    :allow-clear="true"
                    :options="competent"
                  />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item :label="'专业技术资格'" prop="qualification">
                  <sd-select
                    v-model="SJRYKFormData.qualification"
                    :allow-clear="true"
                    :options="qualification"
                  />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item :label="'知识结构'" prop="knowledge">
                  <sd-select
                    v-model="SJRYKFormData.knowledge"
                    :allow-clear="true"
                    :options="knowledge"
                  />
                </a-form-model-item>
              </a-col>
            </template>
          </audit-advanced-query>
        </a-card>
      </div>
    </div>
    <a-modal
      ref="projectList"
      title="项目信息"
      :visible="visible"
      :confirm-loading="confirmLoading"
      width="1000px"
      :footer="null"
      @cancel="handleCancel"
    >
      <sd-data-table-ex
        :data-url="projectDataUrl"
        form-id="iamAuditProject"
        page-id="audit/project/iamAuditProject"
        :columns="projectColumns"
        :filter-expressions="projectTableExpressions"
      >
      </sd-data-table-ex>
    </a-modal>
  </div>
</template>

<script>
import auditAdvancedQuery from '@product/iam/components/audit-advanced-query.vue'
import auditTree from '@product/iam/components/audit-tree.vue'
import auditAdvancedQueryMixins from '@product/iam/components/audit-advanced-query-mixins'
import auditAdvancedExport from '@product/iam/components/audit-advanced-export.vue'
import crossWindowWatcher from '@/common/services/cross-window-watcher'
import axios from '@/common/services/axios-instance'
import TableActionTypes from '@/common/services/table-action-types'
import { getUserInfo } from '@/common/store-mixin'
import components from './_import-components/iam-audit-dsc-userbase-list-import'
const columns = [
  {
    title: '序号',
    dataIndex: 'sortNumber',
    width: '80px',
    customRender: (text, record, index) => `${index + 1}`,
  },
  {
    dataIndex: 'id',
    sdHidden: true,
  },
  {
    dataIndex: 'parentId',
    sdHidden: true,
  },
  {
    dataIndex: 'userAccount',
    sdHidden: true,
  },
  {
    title: '姓名',
    dataIndex: 'userName',
    align: 'center',
    // sdClickable: true, // 列内容是否可点击
    scopedSlots: { customRender: 'islink' },
    width: '150px',
  },
  {
    title: '所属组织机构',
    dataIndex: 'orgName',
    sorter: true,
  },
  {
    title: '职级',
    dataIndex: 'userLevel',
    defaultSortOrder: 'descend',
    sorter: true,
  },
  {
    title: '岗位',
    dataIndex: 'userPost',
  },
  {
    title: '手机',
    dataIndex: 'userMobile',
  },
  {
    title: '专/兼职',
    dataIndex: 'userJob',
    width: '100px',
  },
  {
    title: '当前参与项目',
    dataIndex: 'joinProject',
    scopedSlots: { customRender: 'isProject' },
    width: '130px',
  },
  {
    title: '在岗状态',
    dataIndex: 'userMound',
  },
]
const projectColumns = [
  {
    title: '序号',
    customRender: (text, record, index) => `${index + 1}`,
    width: '80px',
  },
  {
    title: '项目名称',
    dataIndex: 'projectTitle',
    width: '180px',
  },
  {
    title: '项目角色',
    dataIndex: 'projectRole',
  },
  {
    title: '项目状态',
    sorter: true,
    dataIndex: 'itemStatus',
  },
  {
    title: '项目参与日期',
    dataIndex: 'projectJoinDate',
  },
]
export default {
  name: 'IamAuditDscUserbaseList',
  metaInfo: {
    title: '审计人员基本信息',
  },
  components: {
    ...components,
    auditAdvancedQuery,
    auditTree,
    auditAdvancedExport,
  },
  mixins: [auditAdvancedQueryMixins],
  data() {
    return {
      defaultTopNodeId: '0',
      defaultTopNodeText: '审计人员库',
      editnode: true,
      projectDataUrl: 'api/xcoa-mobile/v1/iamuserbase/project/list',
      columns,
      projectColumns,
      radioValue: '01',
      radioType: true,
      visible: false,
      confirmLoading: false,
      searchform: 'searchform',
      parentId: '0',
      userSex: [],
      userJob: [],
      userLevel: [],
      userPost: [],
      userNationality: [],
      education: [],
      competent: [],
      qualification: [],
      knowledge: [],
      userAccount: null,
      SJRYKFormData: {
        userName: '',
        userSex: '',
        orgName: '',
        userJob: '',
        userLevel: '',
        userPost: '',
        userNationality: '',
        // 学历
        education: '',
        competent: '',
        qualification: '',
        knowledge: '',
      },
      SJRYKTableExpressions: [
        {
          dataType: 'str',
          name: 'parentId',
          op: 'eq',
          stringValue: this.parentId,
        },
        {
          dataType: 'str',
          name: 'userMound',
          op: 'eq',
          stringValue: '01',
        },
      ],
      projectTableExpressions: [],
      // 树控件列表加载使用这个
      SJRYKSelectTableExpressions: [
        {
          dataType: 'str',
          name: 'parentId',
          op: 'eq',
          stringValue: this.parentId,
        },
      ],
      actions: [
        {
          label: '新建',
          id: 'new',
          permission: 'create',
          type: TableActionTypes.primary, // 新建按钮，不需要回调，自动处理
          callback: () => {
            var parentId = this.parentId
            const url = '/iam-audit-userbase-form?parentId=' + parentId // 新页面要打开的路由地址
            crossWindowWatcher.waitForChanged(url).then((refreshFlag) => {
              if (refreshFlag) {
                // 这里写或者调刷新的方法
                this.refresh()
              }
            })
          },
        },
        {
          label: '删除',
          id: 'delete',
          type: TableActionTypes.oa.delete, // 删除按钮，不需要回调，会自动处理
        },
        {
          label: '导出',
          permission: null, // 纯前端操作，不需要权限控制
          callback: this.export,
        },
      ],
    }
  },
  computed: {
    /***
     * 计算id以及名称
     *  */
    topNodeId() {
      return this.defaultTopNodeId
    },
    topNodeText() {
      return this.defaultTopNodeText
    },
    getSJRYKTableExpressions() {
      const exp = this.SJRYKTableExpressions
      exp.forEach((item) => {
        if (item.name === 'parentId') {
          item.stringValue = this.parentId
        }
      })
      return exp
    },
  },
  created() {
    // 获取url传过来的id以及名称
    if (this.$route.query.depid) {
      this.defaultTopNodeId = this.$route.query.depid
      this.parentId = this.$route.query.depid
    }
    if (this.$route.query.deptext) {
      this.defaultTopNodeText = this.$route.query.deptext
    }
    // 查找当前用户角色，如果不是管理员，则不显示根节点新建按钮
    this.checkRootNodeEdit()
  },
  mounted() {
    setTimeout(() => {
      // 如果是展示的，那么可能去获取字典值去
      if (!this.strOrArr(this.SJRYKFormData.userSex)) {
        // 获取性别的字典值 'GENDER'
        if (!this.strOrArr(this.userSex)) {
          axios({
            url: 'api/xcoa-mobile/v1/iam-law/dictionary?key=GENDER',
            method: 'get',
          }).then((res) => {
            if (res.status === 200) {
              this.userSex = res.data
            }
          })
        }
      }
      if (!this.strOrArr(this.SJRYKFormData.userJob)) {
        // 获取专//兼职的字典值 'EXPERT-CUM'
        if (!this.strOrArr(this.userJob)) {
          axios({
            url: 'api/xcoa-mobile/v1/iam-law/dictionary?key=EXPERT-CUM',
            method: 'get',
          }).then((res) => {
            if (res.status === 200) {
              this.userJob = res.data
            }
          })
        }
      }

      if (!this.strOrArr(this.SJRYKFormData.userLevel)) {
        // 获取职级的字典值 'RANK'
        if (!this.strOrArr(this.userLevel)) {
          axios({
            url: 'api/xcoa-mobile/v1/iam-law/dictionary?key=RANK',
            method: 'get',
          }).then((res) => {
            if (res.status === 200) {
              this.userLevel = res.data
            }
          })
        }
      }
      if (!this.strOrArr(this.SJRYKFormData.userPost)) {
        // 获取岗位的字典值 'POST'
        if (!this.strOrArr(this.userPost)) {
          axios({
            url: 'api/xcoa-mobile/v1/iam-law/dictionary?key=POST',
            method: 'get',
          }).then((res) => {
            if (res.status === 200) {
              this.userPost = res.data
            }
          })
        }
      }

      if (!this.strOrArr(this.SJRYKFormData.userNationality)) {
        // 获取民族的字典值 'NATIONALITY'
        if (!this.strOrArr(this.userNationality)) {
          axios({
            url: 'api/xcoa-mobile/v1/iam-law/dictionary?key=NATIONALITY',
            method: 'get',
          }).then((res) => {
            if (res.status === 200) {
              this.userNationality = res.data
            }
          })
        }
      }

      if (!this.strOrArr(this.SJRYKFormData.education)) {
        // 获取学历的字典值 'EDUCATION'
        if (!this.strOrArr(this.education)) {
          axios({
            url: 'api/xcoa-mobile/v1/iam-law/dictionary?key=EDUCATION',
            method: 'get',
          }).then((res) => {
            if (res.status === 200) {
              this.education = res.data
            }
          })
        }
      }
      if (!this.strOrArr(this.SJRYKFormData.competent)) {
        // 获取职称的字典值 'JOB-TITLE'
        if (!this.strOrArr(this.competent)) {
          axios({
            url: 'api/xcoa-mobile/v1/iam-law/dictionary?key=JOB-TITLE',
            method: 'get',
          }).then((res) => {
            if (res.status === 200) {
              this.competent = res.data
            }
          })
        }
      }
      if (!this.strOrArr(this.SJRYKFormData.qualification)) {
        // 获取专业技术资格的字典值 'PRO-SKILL-QUA'
        if (!this.strOrArr(this.qualification)) {
          axios({
            url: 'api/xcoa-mobile/v1/iam-law/dictionary?key=PRO-SKILL-QUA',
            method: 'get',
          }).then((res) => {
            if (res.status === 200) {
              this.qualification = res.data
            }
          })
        }
      }
      if (!this.strOrArr(this.SJRYKFormData.knowledge)) {
        // 获取知识结构的字典值 'LORE-STRUCTURE'
        if (!this.strOrArr(this.knowledge)) {
          axios({
            url: 'api/xcoa-mobile/v1/iam-law/dictionary?key=LORE-STRUCTURE',
            method: 'get',
          }).then((res) => {
            if (res.status === 200) {
              this.knowledge = res.data
            }
          })
        }
      }
    }, 500)
  },
  methods: {
    export() {
      this.$refs.userexport.exportdata()
    },
    // 检查根节点属性
    checkRootNodeEdit() {
      const adminRole = getUserInfo().roles.find((item) => {
        return item.code === 'ADMINISTRATOR'
      })
      if (!adminRole) {
        this.editnode = false
      } else {
        this.editnode = true
      }
    },
    handleOk(e) {
      this.projectTableExpressions = []
      this.projectTableExpressions.push({
        dataType: 'str',
        name: 'baseUserAccount',
        op: 'eq',
        stringValue: e.userAccount,
      })
      this.confirmLoading = true
      this.visible = true
      this.confirmLoading = false
    },
    handleCancel(e) {
      this.visible = false
    },
    // 点击树
    treeSelect(selectedKeys, info) {
      this.parentId = info.selectedNodes[0].data.props.id // 父级id
      this.parentName = info.selectedNodes[0].data.props.text // 父级名称
      this.selectedKeys = selectedKeys
      this.SJRYKSelectTableExpressions.forEach((item) => {
        if (item.name === 'parentId') {
          item.stringValue = Number(info.selectedNodes[0].data.props.id)
        }
      })
      this.SJRYKSelectTableExpressions.push({
        dataType: 'str',
        name: 'userMound',
        op: 'eq',
        stringValue: this.radioValue,
      })
      this.SJRYKTableExpressions = [...this.SJRYKSelectTableExpressions]
      this.selectedKeys = selectedKeys
      this.parentId = Number(info.selectedNodes[0].data.props.id)
      // 如果点击的是根节点，则检查权限
      if (info.selectedNodes[0].data.props.props.isroot) {
        this.checkRootNodeEdit()
      } else {
        this.editnode = info.selectedNodes[0].data.props.edit
      }
    },
    strOrArr(strOrArr) {
      return strOrArr !== null && strOrArr.length > 0
    },
    handleSearch() {
      this.SJRYKTableExpressions = [
        {
          dataType: 'str',
          name: 'parentId',
          op: 'eq',
          stringValue: this.parentId,
        },
      ]
      // 人员名称
      if (this.SJRYKFormData.userName) {
        this.SJRYKTableExpressions.push({
          dataType: 'str',
          name: 'userName',
          op: 'like',
          stringValue: `%${this.SJRYKFormData.userName}%`,
        })
      }
      // 性别
      if (this.SJRYKFormData.userSex) {
        this.SJRYKTableExpressions.push({
          dataType: 'long',
          name: 'userSex',
          op: 'eq',
          longValue: this.SJRYKFormData.userSex[0].id,
        })
      }
      // 所属组织机构
      if (this.SJRYKFormData.orgName) {
        this.SJRYKTableExpressions.push({
          dataType: 'str',
          name: 'orgName',
          op: 'like',
          stringValue: `%${this.SJRYKFormData.orgName}%`,
        })
      }
      // 专/兼职
      if (this.SJRYKFormData.userJob) {
        this.SJRYKTableExpressions.push({
          dataType: 'long',
          name: 'userJob',
          op: 'eq',
          longValue: this.SJRYKFormData.userJob[0].id,
        })
      }
      // 职级
      if (this.SJRYKFormData.userLevel) {
        this.SJRYKTableExpressions.push({
          dataType: 'long',
          name: 'userLevel',
          op: 'eq',
          longValue: this.SJRYKFormData.userLevel[0].id,
        })
      }
      // 岗位
      if (this.SJRYKFormData.userPost) {
        this.SJRYKTableExpressions.push({
          dataType: 'long',
          name: 'userPost',
          op: 'eq',
          longValue: this.SJRYKFormData.userPost[0].id,
        })
      }
      // 民族
      if (this.SJRYKFormData.userNationality) {
        this.SJRYKTableExpressions.push({
          dataType: 'long',
          name: 'userNationality',
          op: 'eq',
          longValue: this.SJRYKFormData.userNationality[0].id,
        })
      }
      // 学历
      if (this.SJRYKFormData.education) {
        this.SJRYKTableExpressions.push({
          dataType: 'long',
          name: 'education',
          op: 'eq',
          longValue: this.SJRYKFormData.education[0].id,
        })
      }
      // 职称
      if (this.SJRYKFormData.competent) {
        this.SJRYKTableExpressions.push({
          dataType: 'long',
          name: 'competent',
          op: 'eq',
          longValue: this.SJRYKFormData.competent[0].id,
        })
      }
      // 专业技术资格
      if (this.SJRYKFormData.qualification) {
        this.SJRYKTableExpressions.push({
          dataType: 'str',
          name: 'qualification',
          op: 'like',
          stringValue: `%${this.SJRYKFormData.qualification}%`,
        })
      }
      // 知识结构
      if (this.SJRYKFormData.knowledge) {
        this.SJRYKTableExpressions.push({
          dataType: 'str',
          name: 'knowledge',
          op: 'like',
          stringValue: `%${this.SJRYKFormData.knowledge}%`,
        })
      }
    },
    rowClick(record) {
      const url = '/iam-audit-userbase-form?record=' + record.id // 新页面要打开的路由地址
      crossWindowWatcher.waitForChanged(url).then((refreshFlag) => {
        if (refreshFlag) {
          this.refresh()
        }
      })
    },
    refresh(toFirstPage) {
      return this.$refs.iamUserBaseTable.refresh(toFirstPage)
    },
    radioOnChange(e, info) {
      this.radioValue = e.target.value
      this.SJRYKTableExpressions.forEach((item) => {
        if (item.name === 'userMound') {
          item.stringValue = this.radioValue
          this.radioType = false
        }
      })

      if (this.radioType) {
        this.SJRYKTableExpressions.push({
          dataType: 'str',
          name: 'userMound',
          op: 'eq',
          stringValue: this.radioValue,
        })
      }
      this.SJRYKTableExpressions = [...this.SJRYKTableExpressions]
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.btns {
  position: absolute;
  top: 24px;
  right: 99.5px;
  z-index: 100;
}
.button-spacing {
  margin-left: 5px;
}
.wrap-height {
  height: 100%;
  padding: 20px;
  background: #f0f2f5;
  .row-height {
    display: flex;
    flex: auto;
    height: 100%;
    .rightcard {
      flex: 1;
      width: calc(100% - 20%);
      height: 100%;
    }
  }
}
.radio-group {
  position: absolute;
  top: 30px;
}
</style>