企业管理

zhouwx

2024-06-18 0dc7b51e881f5d46bd7be4d665922611f01b4757

企业管理

 src/api/onlineEducation/company.js

对比新文件
@@ -0,0 +1,48 @@
import request from '@/utils/request'

export function getCompany() {
    return request({
        url: '/system/company/list',
        method: 'get'
    })
}

export function addCompany(data) {
    return request({
        url: '/system/company',
        method: 'post',
        data: data
    })
}

export function editCompany(params) {
    return request({
        url: `/system/company`,
        method: 'put',
        data: params
    })
}

export function delCompany(data) {
    return request({
        url: `system/company/` + data,
        method: 'delete'
    })
}

export function checkName(data) {
    return request({
        url: '/system/company/checkNameUnique',
        method: 'post',
        data: data
    })
}


export function distributeCompany(params) {
    return request({
        url: `system/company/assignPeriod`,
        method: 'post',
        data: params
    })
}

 src/api/onlineEducation/user.js

对比新文件
@@ -0,0 +1,39 @@
import request from '@/utils/request'

export function getUser() {
    return request({
        url: '/system/user/list',
        method: 'get'
    })
}

export function getUserById(params) {
    return request({
        url: '/system/user/' +params ,
        method: 'get',
        params: params
    })
}

export function addUser(data) {
    return request({
        url: '/system/user',
        method: 'post',
        data: data
    })
}

export function editCompany(params) {
    return request({
        url: `/system/company`,
        method: 'put',
        data: params
    })
}

export function delCompany(data) {
    return request({
        url: `system/company/` + data,
        method: 'delete'
    })
}

 src/views/onlineEducation/systemManage/company/components/companyDialog.vue

对比新文件
@@ -0,0 +1,228 @@
<template>
  <div class="notice">
    <el-dialog
        v-model="dialogVisible"
        :title="title"
        width="500px"
        :before-close="handleClose"
    >
      <el-form :model="state.form" size="default" ref="busRef" :rules="state.formRules" label-width="150px" >
        <el-form-item label="企业信用代码:" prop="creditCode" v-if="title!=='分配课时'">
          <el-input v-model.trim="state.form.creditCode"></el-input>
        </el-form-item>
        <el-form-item label="企业名称:" prop="name" v-if="title!=='分配课时'">
          <el-input v-model.trim="state.form.name" ></el-input>
        </el-form-item>
        <el-form-item label="负责人:" prop="major" v-if="title!=='分配课时'">
          <el-input v-model.trim="state.form.major"></el-input>
        </el-form-item>
        <el-form-item label="联系电话:" prop="phone" v-if="title!=='分配课时'">
          <el-input v-model.trim="state.form.phone" ></el-input>
        </el-form-item>
        <el-form-item label="当前剩余课时(分):" prop="remainPeriod" v-if="title!=='分配课时'">
          <el-input
              v-model.trim="state.form.remainPeriod"
              @input="state.form.remainPeriod= state.form.remainPeriod.replace(/[^0-9]/g,'')">
          </el-input>
        </el-form-item>
        <el-form-item label="累计已用课时(分):" prop="spendPeriod" v-if="title!=='分配课时'">
          <el-input
              v-model.trim="state.form.spendPeriod"
              @input="state.form.spendPeriod= state.form.spendPeriod.replace(/[^0-9]/g,'')">
          </el-input>
        </el-form-item>
        <el-form-item label="总课时(分):" prop="totalPeriod">
          <el-input
              v-model.trim="state.form.totalPeriod"
              @input="state.form.totalPeriod = state.form.totalPeriod.replace(/[^0-9]/g,'')">
          </el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
            <el-button @click="handleClose" size="default">取 消</el-button>
            <el-button type="primary"  @click="onSubmit" size="default" v-preReClick>确认</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import {reactive, ref, toRefs} from 'vue'
import Editor from "@/components/Editor/index.vue";
import {ElMessage} from "element-plus";
import {addNotice} from "@/api/backManage/notice";
import {addDict, editDict, getDictDetail} from "@/api/backManage/evaluate";
import {addCompany, checkName, distributeCompany, editCompany} from "@/api/onlineEducation/company";
import {verifyPhone} from "@/utils/validate";

const dialogVisible = ref(false);
const title = ref("");
const busRef = ref();
const length = ref()
const emit = defineEmits(["getList"]);
const startUsername = ref('');
const startPhone = ref('');

const validateName = (rule, value, callback)=>{
  if(value === ''){
    callback(new Error('请输入企业名称'))
  }else if(title.value === '编辑' && value === startUsername.value){
    callback()
  }else{
    let param = {}
    if(title.value === '新增') {
      param = {
        name:value
      }
    }else if(title.value === '编辑'){
      param = {
        name:value,
        id: state.form.id
      }
    }
    checkName(param).then((res)=>{
      if(res.data == false){
        callback(new Error('企业名称已被占用，请更换其他名称'))
      }else{
        callback()
      }
    })
  }
}
const validatePhone = (rule, value, callback)=>{
  if(value === ''){
    callback(new Error('请输入手机号'))
  }else if(title.value === '编辑' && value == startPhone.value){
    callback()
  } else{
    if(!verifyPhone(value)){
      callback(new Error('手机号格式有误'))
    }else {
      callback()
    }
  }
}
const state = reactive({
  form: {
    id: '',
    creditCode: '',
    name: '',
    major: '',
    phone: '',
    remainPeriod: '',
    spendPeriod: '',
    totalPeriod: ''
  },
  formRules:{
    creditCode: [{ required: true, message: '请输入企业信用代码', trigger: 'blur' }],
    major:[{ required: true, message: '请输入负责人', trigger: 'blur' }],
    remainPeriod:[{ required: true, message: '请输入剩余课时', trigger: 'blur' }],
    spendPeriod:[{ required: true, message: '请输入已用课时', trigger: 'blur' }],
    totalPeriod:[{ required: true, message: '请输入总课时', trigger: 'blur' }],
    name: [{ required: true, trigger: "blur", validator: validateName }],
    phone:[{ required: true, trigger: "blur", validator: validatePhone }],
  },
})


const openDialog = async (type, value) => {
  length.value = value.listLength
  title.value = type === 'add' ? '新增' : type ==='edit' ? '编辑' : '分配课时' ;
  if(type === 'edit' || type === 'distribute') {
    state.form = value;
    startUsername.value = value.username
    startPhone.value = value.phone
  }
  dialogVisible.value = true;
}

const onSubmit = async () => {
  const valid = await busRef.value.validate();
  if(valid){
    if(title.value === '新增'){
      const {id, ...data} = JSON.parse(JSON.stringify(state.form))
      const res = await addCompany(data)
      if(res.code === 200){
        ElMessage({
          type: 'success',
          message: '新增成功'
        });
      }else{
        ElMessage.warning(res.message)
      }
      emit("getList")
      busRef.value.clearValidate();
      reset();
      dialogVisible.value = false;
    }else if(title.value === '编辑'){
      const {...data} = JSON.parse(JSON.stringify(state.form))
      const res = await editCompany(data)
      if(res.code === 200){
        ElMessage({
          type: 'success',
          message: '编辑成功'
        });
      }else{
        ElMessage.warning(res.message)
      }
      emit("getList")
      busRef.value.clearValidate();
      reset();
      dialogVisible.value = false;
    }else if(title.value === '分配课时') {
      const {creditCode,name,major,phone,remainPeriod,spendPeriod,...data} = JSON.parse(JSON.stringify(state.form))
      const res = await distributeCompany(data)
      if(res.code === 200){
        ElMessage({
          type: 'success',
          message: '成功'
        });
      }else{
        ElMessage.warning(res.message)
      }
      emit("getList")
      busRef.value.clearValidate();
      reset();
      dialogVisible.value = false;
    }
  }
}

const handleClose = () => {
  busRef.value.clearValidate();
  reset();
  dialogVisible.value = false;
  emit("getList")

}
const reset = () => {
  state.form = {
    id: '',
    creditCode: '',
    name: '',
    major: '',
    phone: '',
    remainPeriod: '',
    spendPeriod: '',
    totalPeriod: ''
  }
}
defineExpose({
  openDialog
});

</script>

<style scoped lang="scss">
.notice{
  :deep(.el-form .el-form-item__label) {
    font-size: 15px;
  }
  .file {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
}
</style>

 src/views/onlineEducation/systemManage/company/index.vue

@@ -1,12 +1,115 @@
<template>
<div>企业管理</div>
  <div class="app-container">
    <div style="margin-bottom: 10px">
      <el-button
          type="primary"
          plain
          icon="Plus"
          @click="openDialog('add',{})"
      >新增</el-button>
    </div>
    <!-- 表格数据 -->
    <el-table v-loading="loading" :data="dataList" :border="true">
      <el-table-column label="序号" type="index" align="center" width="80" />
      <el-table-column label="企业信用代码" prop="creditCode" align="center"  />
      <el-table-column label="企业名称" prop="name" align="center" />
      <el-table-column label="负责人" prop="major" align="center"  />
      <el-table-column label="联系电话" prop="phone" align="center"/>
      <el-table-column label="当前剩余课时（分）" prop="remainPeriod" align="center" width="150"/>
      <el-table-column label="累计已用课时（分）" prop="spendPeriod" align="center" width="150"/>
      <el-table-column label="总课时（分）" prop="totalPeriod" align="center"/>
      <el-table-column label="课时变动详情" align="center" class-name="small-padding fixed-width" >
        <template #default="scope">
          <el-button link type="primary">查看详情</el-button>
</template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" >
        <template #default="scope">
          <el-button link type="primary" @click="openDialog('distribute',scope.row)">分配课时</el-button>
          <el-button link type="primary" @click="openDialog('edit',scope.row)">编辑</el-button>
          <el-button link type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
    />

    <company-dialog ref="dialogRef" @getList=getList></company-dialog>
  </div>
</template>

<script setup>
import {getCurrentInstance, onMounted, onUnmounted, reactive, ref, toRefs} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
import {delCompany, getCompany} from "@/api/onlineEducation/company";
import companyDialog from "./components/companyDialog.vue";

const { proxy } = getCurrentInstance();
const loading = ref(false);
const dialogRef = ref();
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
  },
  total: 0,
  dataList: []
});

const { queryParams, total, dataList } = toRefs(data);

onMounted(()=>{
  getList()
})

onUnmounted(()=>{

})

const getList = async () => {
  loading.value = true
  const res = await getCompany(data.queryParams)
  if(res.code == 200){
    data.dataList = res.data.list
    data.total = res.data.total
  }else{
    ElMessage.warning(res.message)
  }
  loading.value = false
}

const openDialog = (type, value) => {
  dialogRef.value.openDialog(type, value);
}

/** 重置新增的表单以及其他数据  */
function reset() {
  proxy.resetForm("roleRef");
}
const handleDelete = (val) => {
  ElMessageBox.confirm(
      '确定删除此条数据？',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
      .then( async() => {
        const res = await delCompany(val.id)
        if(res.code == 200){
          ElMessage.success('数据删除成功')
          await getList()
        }else{
          ElMessage.warning(res.message)
        }
      })
}

</script>



<style scoped lang="scss">

</style>

 src/views/onlineEducation/systemManage/user/components/userDialog.vue

对比新文件
@@ -0,0 +1,314 @@
<template>
  <div class="notice">
    <el-dialog
        v-model="dialogVisible"
        :title="state.title"
        width="700px"
        :before-close="handleClose"
    >
      <el-form :model="state.form" size="default" ref="superRef" :rules="state.formRules" label-width="150px" >
        <el-form-item label="用户名:"  prop="username" v-if="state.title !== '修改密码'">
          <el-input v-model.trim="state.form.username" :disabled="state.title =='编辑' || state.title =='查看'" placeholder="请输入用户名" ></el-input>
        </el-form-item>
        <el-form-item label="名称:"  prop="name" v-if="state.title !== '修改密码'">
          <el-input v-model.trim="state.form.name" :disabled="state.title =='编辑' || state.title =='查看'" placeholder="请输入公司、部门或者车间岗位名"></el-input>
        </el-form-item>
        <el-form-item label="密码:" prop="password" v-if="state.title == '新增' || state.title == '修改密码'">
          <el-input v-model.trim="state.form.password" type="password" show-password placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item label="重复密码:" prop="confirmPassword" v-if="state.title == '新增' || state.title == '修改密码'">
          <el-input v-model.trim="state.form.confirmPassword" type="password" show-password placeholder="请输入确认密码"></el-input>
        </el-form-item>
        <el-form-item label="手机号:" prop="phone" v-if="state.title !== '修改密码'" >
          <el-input v-model.trim="state.form.phone" :maxlength="11" :disabled="disabled" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item label="用户类型:" v-if="state.title !== '修改密码'">
          <el-radio-group v-model="state.form.userType"  :disabled="disabled">
            <el-radio :label="0">管理员</el-radio>
            <el-radio :label="1">企业级</el-radio>
            <el-radio :label="2">部门级</el-radio>
            <el-radio :label="3">车间（岗位）级</el-radio>
            <el-radio :label="4">其他</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="选择所属父级账号:" prop="companyId" v-if="state.title !== '修改密码'">
          <el-select
               v-model="state.form.companyName"
               @change="selectValue"
               style="width: 45%"
               v-loadMore="loadMore"
               class="m-2"
               placeholder="请选择所属企业"
               popper-class="more_select_dropdown"
          >
            <el-option
                v-for="item in state.companyList"
                :key="item.id"
                :label="item.name"
                :value="item.name"
            />
          </el-select>
          <el-select
              v-if="state.form.userType === 2 || state.form.userType === 3 "
              v-model="state.form.userName"
              @change="selectValueUser"
              style="width: 45%;margin-left: 10px"
              class="m-2"
              placeholder="请选择所属上级账号"
              popper-class="more_select_dropdown"
          >
            <el-option
                v-for="item in state.userList"
                :key="item.id"
                :label="item.name"
                :value="item.name"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer v-if="state.title !='查看'">
        <span class="dialog-footer">
            <el-button @click="handleClose" size="default">取 消</el-button>
            <el-button type="primary"  @click="onSubmit" size="default" v-preReClick>确认</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import {reactive, ref, toRefs, defineEmits, nextTick} from 'vue'
import { View } from "@element-plus/icons-vue";
import {ElMessage} from "element-plus";
import {verifyPhone, verifyPwd, verifyUsername} from "../../../../../utils/validate";
import { checkUserName, checkPhone } from "@/api/login"
import {getUserById} from "@/api/onlineEducation/user"
import {Base64} from "js-base64"
import {resetUserPwd} from "../../../../../api/sysUsers";
import {getInstitutionDetail} from "@/api/backManage/insitution";
import {getCompany} from "@/api/onlineEducation/company";
import {get} from "@vueuse/core";
import {getUser} from "@/api/system/user";

const emit = defineEmits(["getList"]);
const dialogVisible = ref(false)
const superRef = ref(null)

const equalToPassword = (rule, value, callback) => {
  if (state.form.password !== value) {
    callback(new Error("两次输入的密码不一致"));
  } else {
    callback();
  }
};

const validateUserPhone = (rule, value, callback)=>{
  if(value === ''){
    callback(new Error('请输入手机号'))
  }else{
    if(!verifyPhone(value)){
      callback(new Error('手机号格式有误'))
    }else{
      callback()
    }
  }
}

let validatePwd = (rule, value, callback)=>{
  if(value === ''){
    callback(new Error('请输入密码'))
  }else{
    if(!verifyPwd(value)){
      callback(new Error('密码须包含字母、数字、特殊字符，长度在6-16之间'))
    }else{
      callback()
    }
  }
}

const state = reactive({
  title: '',
  form: {
    id: null,
    name: '',
    phone: '',
    password: '',
    confirmPassword: '',
    username: '',
    userType: 0,
    companyId: null,
    parentId: null
  },
  formRules:{
    name: [{ required: true, message: '请输入公司、部门或者车间岗位名称', trigger: 'blur' }],
    username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
    password: [{ required: true, validator: validatePwd, trigger: 'blur' }],
    confirmPassword: [{ required: true, validator: equalToPassword, trigger: 'blur' }],
    phone: [{ required: true, validator: validateUserPhone, trigger: 'blur' }],
  },
  companyList: [],
  userList: [],
  pageNum: 1,
  pageSize: 10

})

const disabled = ref(false);
const openDialog = async (type, value) => {
  await getCompanyList('open')
  await getUserList()
  state.title = type === 'add' ? '新增' : type ==='edit' ? '编辑' : type ==='pwd' ? '修改密码' : '查看' ;
  if(type === 'edit' || type === 'view') {
    if( type === 'view'){
      disabled.value = true;
    }
    const res = await getUserById(value.id);
    if(res.code === 200){
      state.form = res.data
    }
  }
  if(type == 'pwd'){
    state.form.id = value.id
  }
  dialogVisible.value = true
}

const finshed = ref(false)
const getCompanyList = async (type)=>{
  if (type === 'open' && state.pageNum !== 1) {
  } else {
    const queryParams = {
      pageNum: state.pageNum,
      pageSize: state.pageSize,
    }
    const res = await getCompany(queryParams)
    if (res.code == 200) {
      if (res.data.pageNum === state.pageNum) {
        finshed.value = false;
        if (state.pageNum == 1) {
          state.companyList = res.data.list
        } else {
          state.companyList = state.companyList.concat(res.data.list)
        }
      } else {
        finshed.value = true;
      }

    } else {
      ElMessage.warning(res.message)
    }
    console.log("state.companyList",state.companyList)
  }
}
const getUserList = async () => {
  const queryParams = {
    userType: state.form.userType
  }
  const res = await getUser(queryParams)
  if (res.code == 200) {
    debugger
  } else {
    ElMessage.warning(res.message)
  }
}

const onSubmit = async () => {
  const valid = await superRef.value.validate();
  if(valid){
    if(state.title == '新增'){
      const {confirmPassword,id,...data} = state.form
      data.password = Base64.encode(data.password)
      const res = await addMonitor(data)
      if(res.code == 200){
        ElMessage.success(res.message)
        emit('getList')
        state.form.userType = 0
        superRef.value.clearValidate();
        superRef.value.resetFields();
        dialogVisible.value = false;
      }else{
        ElMessage.warning(res.message)
      }
    }else if(state.title == '编辑'){
      const {confirmPassword,...data} = state.form
      data.password = Base64.encode(data.password)
      const res = await editMonitor(data)
      if(res.code == 200){
        ElMessage.success(res.message)
        emit('getList')
        state.form.userType = 0
        superRef.value.clearValidate();
        superRef.value.resetFields();
        dialogVisible.value = false;
      }else{
        ElMessage.warning(res.message)
      }
    }else{
      const {id,password} = state.form
      const data = {id,password}
      data.password = Base64.encode(data.password)
      const res = await resetUserPwd(data)
      if(res.code == 200){
        ElMessage.success(res.message)
        emit('getList')
        superRef.value.clearValidate();
        superRef.value.resetFields();
        dialogVisible.value = false;
      }else{
        ElMessage.warning(res.message)
      }
    }
  }
}

const handleClose = () => {
  state.form.userType = 0
  superRef.value.clearValidate();
  superRef.value.resetFields()
  dialogVisible.value = false;
}
//触底函数
const loadMore = () => {
  console.log(' 触底了');
  // 防抖处理
  setTimeout(() => {
    if (finshed.value) return //值为true，则代表没有数据了
    state.pageNum += 1
    getCompanyList('')
  }, 500)
}
const selectValue = (val) => {
  state.companyList.forEach(item => {
    if(item.name === val){
      state.form.companyId = item.id
    }
  })
}
const selectValueUser = (val) => {
  state.userList.forEach(item => {
    if(item.name === val){
      state.form.parentId = item.id
    }
  })
}




defineExpose({
  openDialog
});

</script>

<style scoped lang="scss">
.notice{
  :deep(.el-form .el-form-item__label) {
    font-size: 15px;
  }
  .file {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
}
</style>

 src/views/onlineEducation/systemManage/user/index.vue

@@ -1,12 +1,113 @@
<template>
<div>用户管理</div>
  <div class="app-container">
    <div style="margin-bottom: 10px">
      <el-button
          type="primary"
          plain
          icon="Plus"
          @click="openDialog('add',{})"
      >新增</el-button>
    </div>
    <!-- 表格数据 -->
    <el-table v-loading="loading" :data="dataList" :border="true">
      <el-table-column label="序号" type="index" align="center" width="80" />
      <el-table-column label="用户名" prop="username" align="center"  />
      <el-table-column label="名称" prop="name" align="center" />
      <el-table-column label="手机号" prop="phone" align="center"/>
      <el-table-column label="用户类型" prop="userTypeName" align="center" width="150" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" >
        <template #default="scope">
          <el-button link type="primary" @click="openDialog('edit',scope.row)">编辑</el-button>
          <el-button link type="danger" @click="handleDelete(scope.row)">删除</el-button>
          <el-button link type="primary" @click="openDialog('pwd',scope.row)">修改密码</el-button>
</template>
      </el-table-column>
    </el-table>

    <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
    />

    <user-dialog ref="dialogRef" @getList=getList></user-dialog>
  </div>
</template>

<script setup>
import {getCurrentInstance, onMounted, onUnmounted, reactive, ref, toRefs} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
import {delCompany, getCompany} from "@/api/onlineEducation/company";
import userDialog from './components/userDialog.vue'
import {getUser} from "@/api/onlineEducation/user";

const { proxy } = getCurrentInstance();
const loading = ref(false);
const dialogRef = ref();
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
  },
  total: 0,
  dataList: []
});

const { queryParams, total, dataList } = toRefs(data);

onMounted(()=>{
  getList()
})

onUnmounted(()=>{

})

const getList = async () => {
  loading.value = true
  const res = await getUser(data.queryParams)
  if(res.code == 200){
    data.dataList = res.data.list.map(item => {
      return {
        ...item,
        userTypeName: item.userType === 0 ? '管理员' : item.userType === 1 ? '企业级' : item.userType === 2 ? '部门级' : item.userType === 3 ? '车间级' :'其他'
      }
    })
    data.total = res.data.total
  }else{
    ElMessage.warning(res.message)
  }
  loading.value = false
}

const openDialog = (type, value) => {
  dialogRef.value.openDialog(type, value);
}

/** 重置新增的表单以及其他数据  */
function reset() {
  proxy.resetForm("roleRef");
}
const handleDelete = (val) => {
  ElMessageBox.confirm(
      '确定删除此条数据？',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
      .then( async() => {
        const res = await delCompany(val.id)
        if(res.code == 200){
          ElMessage.success('数据删除成功')
          await getList()
        }else{
          ElMessage.warning(res.message)
        }
      })
}

</script>



<style scoped lang="scss">

</style>