mosr-web/src/views/system/user/index.vue

<template>
  <fvSearchForm ref="form" :searchConfig="searchConfig" @search="search"></fvSearchForm>
  <fvTable ref="tableIns" :tableConfig="tableConfig" @headBtnClick="headBtnClick"></fvTable>
</template>

<script setup lang="jsx">
import Tag from '@/components/Tag.vue'
import fvSelect from '@/fvcomponents/fvSelect/index.vue'
import { useAuthStore } from '@/stores/userstore.js'
import { getDeptOpt, getSubCompOpt } from '../../../api/user/user.js';
import { ElMessageBox } from 'element-plus';

const authStore = useAuthStore()
const router = useRouter()

const searchConfig = ref([
  {
    label: '子公司ID',
    prop: 'subCompanyId',
    component: 'el-tree-select',
    props: {
      placeholder: '请输入',
      clearable: true,
      data: [],
      filterable: true,
      checkStrictly: true
    },
    on: {
      change: async (val) =>{
        const { data } = await getDeptOpt({subCompanyId: val})
        searchConfig.value.find(item=>item.prop == 'departmentId').props.data = data
      }
    }
  },
  {
    label: '部门ID',
    prop: 'departmentId',
    component: 'el-tree-select',
    props: {
      placeholder: '请选择',
      clearable: true,
      data: [],
      filterable: true,
      checkStrictly: true
    }
  },
  {
    label: '用户账号',
    prop: 'userName',
    component: 'el-input',
    props: {
      placeholder: '请输入',
      clearable: true
    }
  },
  {
    label: '状态',
    prop: 'state',
    component: shallowRef(fvSelect),
    props: {
      placeholder: '请输入',
      cacheKey: 'normal_disable',
      clearable: true
    }
  },
])

const tableIns = ref()

const tableConfig = reactive({
  columns: [
    {
      prop: 'userName',
      label: '用户名称',
      align: 'center',
    },
    {
      prop: 'nickName',
      label: '用户昵称',
      align: 'center',
    },
    {
      prop: 'subCompanyName',
      label: '子公司名称',
      align: 'center',
    },
    {
      prop: 'jobActivityDesc',
      label: '岗位名称',
      align: 'center',
    },
    {
      prop: 'departmentName',
      label: '部门',
      align: 'center',
    },
    {
      prop: 'mobile',
      label: '手机号码',
      align: 'center',
    },
    {
      prop: 'state',
      label: '状态',
      align: 'center',
      currentRender: ({row, index}) => (<Tag dictType={'normal_disable'} value={row.state} />)
    },
    {
      prop: 'createTime',
      label: '创建时间',
      align: 'center',
    },
    {
      prop: 'oper',
      label: '操作',
      fixed: 'right',
      width: '150',
      align: 'center',
      currentRender: ({row, index}) => {
        return (
          <div>
            {
              row.userType == 0 ? 
              '--' :
              <div>
                <el-button type="primary" link onClick={()=>handleEdit(row)}>编辑</el-button>
                <el-button type="danger" link onClick={()=>handleDel(row)}>删除</el-button>
              </div>
            }
          </div>
        )
      }
    }
  ],
  api: '/admin/mosr/user',
  params: {},
  btns: [
    {name: '新增', type: 'primary', auth: ['admin:user:add'], key: 'add'}
  ]
})

const init = async () => {
  console.log(authStore.roles,'userinfo');
  if(!authStore.roles.includes('superAdmin')) {
    searchConfig.value = searchConfig.value.slice(1)
  }
  searchConfig.value = searchConfig.value
  const { data } = await getDeptOpt()
  searchConfig.value.find(item=>item.prop == 'departmentId').props.data = data
  const res = await getSubCompOpt()
  searchConfig.value.find(item=>item.prop == 'subCompanyId').props.data = res.data
}

init()

const search = (val) => {
  tableConfig.params = {...val}
  tableIns.value.refresh()
}

const handleAdd = () => {
  router.push({
    path: '/system/useradd',
    query: {
      isAdd: 1
    }
  })
}

const handleEdit = (row) => {
  router.push({
    path: '/system/useredit',
    query: {
      id: row.userId
    }
  })
}

const handleDel = (row) => {
  ElMessageBox.confirm('确定删除该条数据吗?', '确定删除', {
    type: 'warning',
    confirmButtonText: '确定',
    cancelButtonText: '取消'
  }).then(async res => {
    // const { code } = await 
  }).catch(()=>{})
}

const headBtnClick = (key) => {
  switch(key) {
    case 'add': handleAdd()
      break;
  }
}
</script>

<style lang="scss" scoped>

</style>