新增

马宇豪

2023-12-04 216f377862182c94471c0b452977ac7b4a113a9f

新增

 src/api/home/homePage.js

@@ -3,7 +3,7 @@
// 获取分页
export function getNotice(params) {
    return request({
        url: '/system/notice/noticeList',
        url: '/notice/noticeList',
        method: 'get',
        params: params
    })
@@ -12,7 +12,7 @@
// 获取详情
export function getNoticeDetails(params) {
    return request({
        url: '/system/notice/getNoticeById',
        url: '/notice/getNoticeById',
        method: 'get',
        params: params
    })
@@ -21,7 +21,7 @@
// 获取分页
export function getLaws(params) {
    return request({
        url: '/system/law/lawList',
        url: '/law/lawList',
        method: 'get',
        params: params
    })
@@ -30,7 +30,7 @@
// 获取详情
export function getLawsDetails(params) {
    return request({
        url: '/system/law/getLawById',
        url: '/law/getLawById',
        method: 'get',
        params: params
    })
@@ -39,7 +39,7 @@
// 获取分页
export function getPublish(params) {
    return request({
        url: '/system/agency/agencyList',
        url: '/agency/agencyList',
        method: 'get',
        params: params
    })
@@ -48,7 +48,7 @@
// 获取详情
export function getPublishDetails(params) {
    return request({
        url: '/system/agency/getAgencyById',
        url: '/agency/getAgencyById',
        method: 'get',
        params: params
    })

 src/layout/components/Register/index.vue

@@ -2,7 +2,7 @@
    <el-dialog v-model="dialogVisible" width="75%" top="50vh" align-center @close="closeDialog">
      <template #header>
        <div style="display:flex;font-size: 1.2rem;font-weight: bolder">
          机构注册
          {{state.title}}
          <div style="font-size: 0.9rem;display:flex;align-items: center;font-weight: normal;margin-left: 6px"><Warning style="color:#EF4444;width: 0.9rem; height: 0.9rem;margin-right: 2px" />请认真填写注册信息，带 <span style="color:#EF4444;vertical-align: middle">*</span> 为必填项</div>
        </div>
      </template>
@@ -31,8 +31,8 @@
          <el-col :span="8">
            <el-form-item prop="agency.attribute" label="机构属性">
              <el-radio-group v-model="registerForm.agency.attribute" style="width: 50%" @change="changeAttr()">
                <el-radio :label="0" size="large">疆内</el-radio>
                <el-radio :label="1" size="large">疆外</el-radio>
                <el-radio :label="0" size="large" border>疆内</el-radio>
                <el-radio :label="1" size="large" border>疆外</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
@@ -224,7 +224,7 @@
          <el-col :span="12">
            <el-form-item prop="username" label="登录用户名(字母+数字，长度在5-16之间)">
              <el-input
                  v-model="registerForm.username"
                  v-model.trim="registerForm.username"
                  size="large"
                  placeholder="请输入登录用户名"
              />
@@ -233,18 +233,18 @@
          <el-col :span="12">
            <el-form-item prop="phone" label="用户电话">
              <el-input
                  v-model="registerForm.phone"
                  v-model.trim="registerForm.phone"
                  size="large"
                  placeholder="请输入用户电话"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
        <el-row :gutter="30" v-if="state.title == '新增/注册'">
          <el-col :span="12">
            <el-form-item prop="password" label="密码">
              <el-input
                  v-model="registerForm.password"
                  v-model.trim="registerForm.password"
                  type="password"
                  size="large"
                  placeholder="请输入密码"
@@ -255,7 +255,7 @@
          <el-col :span="12">
            <el-form-item prop="confirmPassword" label="确认密码">
              <el-input
                  v-model="registerForm.confirmPassword"
                  v-model.trim="registerForm.confirmPassword"
                  type="password"
                  size="large"
                  auto-complete="off"
@@ -274,8 +274,14 @@
            style="width:40%;margin: 0 auto"
            @click.prevent="handleRegister"
          >
            <span v-if="!loading">注 册</span>
            <span v-else>注 册 中...</span>
            <div v-if="state.title == '新增/注册'">
              <span v-if="!loading">注 册</span>
              <span v-else>注 册 中...</span>
            </div>
            <div v-else>
              <span v-if="!loading">确定</span>
              <span v-else>编 辑 中...</span>
            </div>
          </el-button>
        </el-form-item>
      </el-form>
@@ -286,7 +292,7 @@
</template>

<script setup>
import {ref, watch, defineExpose, onMounted, reactive} from "vue"
import {ref, watch, defineExpose, onMounted, reactive, toRefs, watchEffect} from "vue"
import {ElMessage, ElMessageBox} from "element-plus"
import { register,delPic,getDict,checkUserName, checkPhone } from "@/api/login"
import { getRegionTree } from "@/api/area"
@@ -294,35 +300,7 @@
import {verifyPhone, verifyUsername, verifyPwd} from "../../../utils/validate";
let { proxy } = getCurrentInstance()
import { Base64 } from 'js-base64'
const registerForm = ref({
  agency:{
    name: "",
    creditCode: "",
    attribute: 0,
    area: [],
    province: '',
    city: '',
    district: '',
    address: '',
    legalPerson: '',
    legalPhone: '',
    manager: '',
    managerPhone: '',
    certNumber: '',
    issueDate: '',
    validDate: '',
    assetValue: '',
    workArea: '',
    archiveArea: '',
    regAddress: '',
    business: '',
    reportPath: '',
  },
  username: '',
  phone: '',
  password: '',
  confirmPassword: ''
});
import {getAgencyById} from "../../../api/sysUsers";

const props = {
  expandTrigger: 'hover',
@@ -331,6 +309,7 @@
}

const state = reactive({
  title: '',
  areaList: [],
  busList: [],
  fileList: [],
@@ -340,12 +319,41 @@
    Authorization: 'Bearer ' + getToken()
  },
  dialogImageUrl: '',
  dialogImg: false
  dialogImg: false,
  isView: false,
  registerForm:{
    agency:{
      name: "",
      creditCode: "",
      attribute: 0,
      area: [],
      province: '',
      city: '',
      district: '',
      address: '',
      legalPerson: '',
      legalPhone: '',
      manager: '',
      managerPhone: '',
      certNumber: '',
      issueDate: '',
      validDate: '',
      assetValue: '',
      workArea: '',
      archiveArea: '',
      regAddress: '',
      business: '',
      reportPath: '',
    },
    username: '',
    phone: '',
    password: '',
    confirmPassword: ''
  }
})


const {registerForm} = toRefs(state);
const equalToPassword = (rule, value, callback) => {
  if (registerForm.value.password !== value) {
  if (state.registerForm.password !== value) {
    callback(new Error("两次输入的密码不一致"));
  } else {
    callback();
@@ -372,7 +380,7 @@
      callback(new Error('手机号格式有误'))
    }else{
      checkPhone({phone:value}).then((res)=>{
        if(res == false){
        if(res.data == false){
          callback(new Error('该手机号已被绑定用户，请更换其他手机号'))
        }else{
          callback()
@@ -390,7 +398,7 @@
      callback(new Error('用户名须使用字母+数字，长度在5-16之间'))
    }else{
      checkUserName({username:value}).then((res)=>{
        if(res == false){
        if(res.data == false){
          callback(new Error('用户名已被占用，请更换其他用户名'))
        }else{
          callback()
@@ -446,18 +454,51 @@

onMounted(()=>{
  getBusiness()
  getArea()
  watchEffect(() => {
    // 在副作用中调用 getArea()
    getArea();
  });
})

const openDialog=(type, value)=>{
  state.title = type === 'add' ? '新增/注册' : type ==='edit' ? '编辑' : '查看' ;
  if(type === 'edit' || type == 'view') {
    state.registerForm.id = value.id
    state.registerForm.username = value.username
    state.registerForm.phone = value.phone
    getAgencyById({agencyId: value.agencyId}).then((res)=>{
      if(res.code == 200){
        const info = JSON.parse(JSON.stringify(res.data))
        for(let i in state.registerForm.agency){
          if(validKey(i,info)){
            state.registerForm.agency[i] = info[i]
          }
        }
        state.registerForm.agency.business = info.business.split(',').map(Number)
      }else{
        ElMessage.warning(res.message)
      }
    })
    if(type == 'view'){
      state.isView = true
    }
  }
  dialogVisible.value = true
}

const validKey=(key,obj)=>{
  return key in obj
}

const handleChange = (value) => {
  if(registerForm.value.agency.attribute == 0){
    registerForm.value.agency.province = '新疆维吾尔自治区'
    registerForm.value.agency.city = value[0]?value[0]:''
    registerForm.value.agency.district  = value[1]?value[1]:''
  if(state.registerForm.agency.attribute == 0){
    state.registerForm.agency.province = '新疆维吾尔自治区'
    state.registerForm.agency.city = value[0]?value[0]:''
    state.registerForm.agency.district  = value[1]?value[1]:''
  }else{
    registerForm.value.agency.province = value[0]?value[0]:''
    registerForm.value.agency.city = value[1]?value[1]:''
    registerForm.value.agency.district  = value[2]?value[2]:''
    state.registerForm.agency.province = value[0]?value[0]:''
    state.registerForm.agency.city = value[1]?value[1]:''
    state.registerForm.agency.district  = value[2]?value[2]:''
  }
}

@@ -471,7 +512,7 @@
}

const getArea = async ()=>{
  const type = registerForm.value.agency.attribute
  const type = state.registerForm.agency.attribute
  const res = await getRegionTree({name: '',parentId: null,regionType: type})
  if(res.code == 200){
    state.areaList = res.data
@@ -510,7 +551,7 @@

const handleAvatarSuccess = (res, uploadFile) => {
  if(res.code == 200){
    registerForm.value.agency.reportPath = res.data.path
    state.registerForm.agency.reportPath = res.data.path
  }else{
    ElMessage({
      type: 'warning',
@@ -520,7 +561,7 @@
}

const handleRemove = async (file, uploadFiles) => {
  const res = await delPic({path: registerForm.value.agency.reportPath})
  const res = await delPic({path: state.registerForm.agency.reportPath})
  if(res.code == 200){
    ElMessage({
      type: 'success',
@@ -538,32 +579,34 @@
  proxy.$refs.registerRef.validate(valid => {
    if (valid) {
      loading.value = true;
      const {confirmPassword, ...data} = registerForm.value
      data.password = Base64.encode(data.password)
      data.agency.business = data.agency.business.join(',')
      delete data.agency.area
      register(data).then(res => {
        if(res.code == 200){
          const username = registerForm.value.username
          ElMessageBox.alert("<font color='red'>恭喜，您的账号 " + username + " 注册成功！</font>", "系统提示", {
            dangerouslyUseHTMLString: true,
            type: "success",
          }).then(() => {
            dialogVisible.value = false
            proxy.$refs.registerRef.resetFields()
            proxy.$refs.registerRef.clearValidate()
            state.fileList = []
            // router.push("/homePage")
          }).catch(() => {})
        }else{
          ElMessage({
            type: 'warning',
            message: res.message
          })
        }
      }).catch(() => {
        loading.value = false
      })
      if(state.title == '新增/注册'){
        const {confirmPassword, ...data} = state.registerForm
        data.password = Base64.encode(data.password)
        data.agency.business = data.agency.business.join(',')
        delete data.agency.area
        register(data).then(res => {
          if(res.code == 200){
            const username = state.registerForm.username
            ElMessageBox.alert("<font color='red'>恭喜，您的账号 " + username + " 注册成功！</font>", "系统提示", {
              dangerouslyUseHTMLString: true,
              type: "success",
            }).then(() => {
              dialogVisible.value = false
              proxy.$refs.registerRef.resetFields()
              proxy.$refs.registerRef.clearValidate()
              state.fileList = []
              // router.push("/homePage")
            }).catch(() => {})
          }else{
            ElMessage({
              type: 'warning',
              message: res.message
            })
          }
        }).catch(() => {
          loading.value = false
        })
      }
    }
  });
}
@@ -575,7 +618,7 @@
}

defineExpose({
  dialogVisible,
  openDialog
})

</script>

 src/utils/request.js

@@ -6,7 +6,7 @@
import cache from '@/plugins/cache'
import { saveAs } from 'file-saver'
import useUserStore from '@/store/modules/user'

import router from '../router'
let downloadLoadingInstance;
// 是否显示重新登录
export let isRelogin = { show: false };
@@ -88,7 +88,9 @@
          ElMessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', { confirmButtonText: '重新登录', cancelButtonText: '取消', type: 'warning' }).then(() => {
            isRelogin.show = false;
            useUserStore().logOut().then(() => {
              location.href = '/index';
              // router.push('/homePage')

              location.href = '/homePage';
            })
          }).catch(() => {
            isRelogin.show = false

 src/views/components/loginForm.vue

@@ -107,7 +107,7 @@
})

const openRegist = ()=>{
  regRef.value.dialogVisible = true
  regRef.value.openDialog('add', {});
}

watch(route, (newRoute) => {

 src/views/safetyReview/userManage/institutionUsers/index.vue

@@ -1,34 +1,51 @@
<template>
    <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="用户ID" prop="userID" align="center"  />
            <el-table-column label="机构名称" prop="name" align="center" />
            <el-table-column label="信用代码" prop="code" align="center"  />
            <el-table-column label="用户名" prop="username" align="center"  />
            <el-table-column label="注册手机号" prop="phone" align="center"  />
            <el-table-column label="注册审批" prop="examine" align="center" >
                <template #default="scope">
                    <span v-if="scope.row.examine === 1">待审批</span>
                    <span v-if="scope.row.examine === 2">未通过</span>
                    <span v-if="scope.row.examine === 3">已通过</span>
                </template>
            </el-table-column>
            <el-table-column label="状态" prop="status" align="center" >
                <template #default="scope">
                    <span v-if="scope.row.status === 1">可用</span>
                    <span v-if="scope.row.status === 2">不可用</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width"  width="300px">
                <template #default="scope">
                    <el-button link type="primary"  @click="openDialog('review',scope.row)" >查看</el-button>
                    <el-button link type="primary"  @click="openDialog('edit',scope.row)" v-hasPermi="['system:role:edit']">编辑</el-button>
                    <el-button link type="danger" v-if="!(scope.row.status === 1 && scope.row.examine === 3)" @click="handleDelete(scope.row)" v-hasPermi="['system:role:remove']">删除</el-button>
                    <el-button link type="primary" v-if="scope.row.examine === 3 && scope.row.status === 1"  @click="stop(scope.row)" >停用</el-button>
                    <el-button link type="primary" v-if="scope.row.examine !== 3 && scope.row.status === 2"  @click="pass(scope.row)" >审批通过</el-button>
                </template>
            </el-table-column>
          <el-table-column label="用户ID" prop="id" align="center"/>
          <el-table-column label="机构名称" prop="agency.name" align="center"/>
          <el-table-column label="信用代码" prop="agency.creditCode" align="center"/>
          <el-table-column label="用户名" prop="username" align="center" />
          <el-table-column label="注册手机号" prop="phone" align="center"/>
          <el-table-column label="注册审批" prop="approve" align="center">
            <template #default="scope">
              <el-tag :type="scope.row.approve == 0?'success':scope.row.approve == 1?'':'danger'">
                {{scope.row.approve == 0?'审批通过':scope.row.approve == 1?'待审批':'未通过'}}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="状态" prop="status" align="center">
            <template #default="scope">
              <el-switch
                  v-if="scope.row.approve == 0"
                  v-model="scope.row.status"
                  :active-value="0"
                  :inactive-value="1"
                  inline-prompt
                  active-text="正常"
                  inactive-text="停用"
                  @change="switchStatus($event,scope.row)"
              />
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="250" class-name="small-padding fixed-width" >
              <template #default="scope">
                <el-button link type="primary" @click="openDialog('view',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>
                <el-button link type="primary" v-if="isSuper && scope.row.approve !==0 " @click="openApprove(scope.row)">审批</el-button>
                <el-button link type="primary" @click="openPwd('pwd',scope.row)">修改密码</el-button>
              </template>
          </el-table-column>
        </el-table>

        <pagination
@@ -38,36 +55,126 @@
            v-model:limit="queryParams.pageSize"
            @pagination="getList"
        />
        <supervise-dialog ref="superRef" @getList=getList></supervise-dialog>
        <register ref="regRef"/>
        <el-dialog v-model="appDialog" title="审批用户" width="30%" center align-center>
          <el-radio-group v-model="appoveForm.approve" style="width: 100%">
            <el-radio :label="0" size="large" border>通过</el-radio>
            <el-radio :label="2" size="large" border>驳回</el-radio>
          </el-radio-group>
          <template #footer>
            <span class="dialog-footer">
              <el-button @click="appDialog = false">取消</el-button>
              <el-button type="primary" @click="confirmApproval">确认</el-button>
            </span>
          </template>
        </el-dialog>
    </div>
</template>

<script setup>
import {getCurrentInstance, reactive, ref, toRefs} from "vue";
import {ElMessageBox} from "element-plus";
import {getCurrentInstance, onMounted, onUnmounted, reactive, ref, toRefs} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
import superviseDialog from "../superviseUsers/components/superviseDialog.vue"
import { Register } from "@/layout/components";
import {delMonitor, getAgencyList, changeApprove, changeStatus} from "../../../../api/sysUsers"
import Cookies from "js-cookie";

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


    dataList: [],
    isSuper: false,
    appDialog: false,
    appoveForm: {
      id: null,
      approve: null
    }
});

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

const getList = () => {
    loading.value = true;
    console.log("获取数据")
    loading.value = false;
onMounted(()=>{
  const userInfo = JSON.parse(Cookies.get('userInfo'))
  if(userInfo.identity == 0){data.isSuper = true}
  getList()
})

onUnmounted(()=>{

})

const getList = async () => {
    loading.value = true
    const res = await getAgencyList(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) => {
    superRef.value.openDialog(type, value);
const openPwd = (type, value) => {
  superRef.value.openDialog(type, value);
}

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

const openApprove =(val)=>{
  data.appoveForm = {
    id: null,
    approve: null
  }
  data.appoveForm.id = val.id
  data.appDialog = true
}

const confirmApproval = async () =>{
  if(data.appoveForm.approve !== null){
    const res = await changeApprove(data.appoveForm)
    if(res.code == 200){
      ElMessage.success('审批成功')
      await getList()
      data.appDialog = false
    }else{
      ElMessage.warning(res.message)
    }
  }
}

const switchStatus = (e,val) => {
  ElMessageBox.confirm(
      '确定修改该机构当前状态？',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
      .then( async() => {
        const res = await changeStatus({id: val.id,status: e})
        if(res.code == 200){
          ElMessage.success('状态修改成功')
          await getList()
        }else{
          ElMessage.warning(res.message)
        }
      })
      .catch(() => {
        getList()
      })

}

/** 重置新增的表单以及其他数据  */
@@ -84,13 +191,14 @@
            type: 'warning',
        })
        .then( async() => {

            const res = await delMonitor(val.id)
            if(res.code == 200){
              ElMessage.success('数据删除成功')
              getList()
            }else{
              ElMessage.warning(res.message)
            }
        })
}
const stop = (val) => {

}
const pass= (val) => {

}
</script>

 src/views/safetyReview/userManage/superviseUsers/components/superviseDialog.vue

@@ -2,47 +2,39 @@
    <div class="notice">
        <el-dialog
            v-model="dialogVisible"
            :title="title"
            :title="state.title"
            width="500px"
            :before-close="handleClose"
        >
            <el-form :model="state.form" size="default" ref="superRef" :rules="title === '新增'  ? state.formRules : {}" label-width="110px" >
                <el-form-item label="姓名:" prop="name" >
            <el-form :model="state.form" size="default" ref="superRef" :rules="state.formRules" label-width="110px" >
                <el-form-item label="姓名:" prop="name" v-if="state.title !== '修改密码'">
                    <el-input v-model.trim="state.form.name" ></el-input>
                </el-form-item>
                <el-form-item label="用户名:"  prop="username">
                <el-form-item label="用户名:"  prop="username" v-if="state.title !== '修改密码'">
                    <el-input v-model.trim="state.form.username" ></el-input>
                </el-form-item>
                <el-form-item label="密码:" prop="password">
                    <el-input v-model.trim="state.form.password" :type="passwordType" placeholder="请输入密码" autocomplete="new-password">
                        <template #append>
                            <el-button :icon="View" @click="showPwd" />
                        </template>
                    </el-input>
                <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">
                    <el-input v-model.trim="state.form.confirmPassword" :type="confirmPasswordType" placeholder="请输入确认密码" autocomplete="new-password">
                        <template #append>
                            <el-button :icon="View" @click="showConfirmPwd" />
                        </template>
                    </el-input>
                <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">
                <el-form-item label="手机号:" prop="phone" v-if="state.title !== '修改密码'">
                    <el-input v-model.trim="state.form.phone" :maxlength="11" ></el-input>
                </el-form-item>
                <el-form-item label="账号类型:" >
                    <el-radio-group v-model="state.form.accountType" >
                        <el-radio :label="1">工作人员</el-radio>
                        <el-radio :label="2">领导</el-radio>
                <el-form-item label="账号类型:" v-if="state.title !== '修改密码'">
                    <el-radio-group v-model="state.form.userType" >
                        <el-radio :label="0">工作人员</el-radio>
                        <el-radio :label="1">领导</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="管辖地区:" >
                    <el-select v-model="state.form.area" class="m-2" placeholder="请选择" style="width:100%">
                <el-form-item label="管辖地区:" prop="manageRegion" v-if="state.title !== '修改密码'">
                    <el-select v-model="state.form.manageRegion" class="m-2" placeholder="请选择" style="width:100%">
                        <el-option
                            v-for="item in state.areaList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                            :key="item.id"
                            :label="item.name"
                            :value="item.name"
                        />
                    </el-select>
                </el-form-item>
@@ -57,121 +49,185 @@
    </div>
</template>
<script setup>
import {reactive, ref, toRefs} from 'vue'
import {reactive, ref, toRefs, defineEmits} 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 { getRegionTree } from "@/api/area"
import { addMonitor, editMonitor } from "@/api/sysUsers"
import {Base64} from "js-base64"
import {resetUserPwd} from "../../../../../api/sysUsers";

const emit = defineEmits(["getList"]);
const dialogVisible = ref(false);
const title = ref("");
const superRef = ref();
const passwordType = ref('password');
const confirmPasswordType= ref('password');
const validatePwd = (rule, value, callback)=>{
    if(title.value === '新增'){
        if(value === ''){
            callback(new Error('请再次输入密码'))
        }else if(value !== state.form.password){
            callback(new Error('两次输入密码不同'))
        }else{
            callback()
        }
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{
        if(state.form.password!==''){
            if(value === ''){
                callback(new Error('请再次输入密码'))
            }else if(value !== state.form.password){
                callback(new Error('两次输入密码不同'))
            }else{
                callback()
            }
      checkPhone({phone:value,id: state.form.id}).then((res)=>{
        if(res.data == false){
          callback(new Error('该手机号已被绑定用户，请更换其他手机号'))
        }else{
            callback()
          callback()
        }
      })
    }
  }
}
const phoneRegex = /^1[3456789]\d{9}$/;
const validatePhone = (rule, value, callback)=>{
    if(value === ''){
        callback(new Error('请输入手机号'))

const validateUsername = (rule, value, callback)=>{
  if(value === ''){
    callback(new Error('请输入登录时用户名'))
  }else{
    if(!verifyUsername(value)){
      callback(new Error('用户名须使用字母+数字，长度在5-16之间'))
    }else{
        if(!phoneRegex.test(value)){
            callback(new Error('请按要求格式输入手机号'))
      checkUserName({username:value,id: state.form.id}).then((res)=>{
        if(res.data == false){
          callback(new Error('用户名已被占用，请更换其他用户名'))
        }else{
            callback()
          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: '',
        accountType: 1,
        area: ''
        userType: 0,
        manageRegion: ''
    },
    formRules:{
        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password: [{ required: true, message: '密码不能为空', trigger: 'blur' }],
        confirmPassword: [{ required: true, validator: validatePwd, trigger: 'blur' }],
        phone: [{ required: true, validator: validatePhone, trigger: 'blur' }],
        username: [{ required: true, validator: validateUsername, trigger: 'blur' }],
        password: [{ required: true, validator: validatePwd, trigger: 'blur' }],
        confirmPassword: [{ required: true, validator: equalToPassword, trigger: 'blur' }],
        phone: [{ required: true, validator: validateUserPhone, trigger: 'blur' }],
        manageRegion: [{ required: true, message: '请选择管辖区域', trigger: 'blur' }],
    },
    areaList: []

})

const showPwd = () => {
    if (passwordType.value === 'password') {
        passwordType.value = ''
    } else {
        passwordType.value = 'password'
    }
};
const showConfirmPwd = () => {
    if (confirmPasswordType.value === 'password') {
        confirmPasswordType.value = ''
    } else {
        confirmPasswordType.value = 'password'
    }
};


const openDialog = (type, value) => {
    title.value = type === 'add' ? '新增' : type ==='edit' ? '编辑' : '查看' ;
    getArea()
    state.title = type === 'add' ? '新增' : type ==='edit' ? '编辑' : type ==='pwd' ? '修改密码' : '查看' ;
    if(type === 'edit') {
        state.form = value;
        for(let i in state.form){
          if(validKey(i,value)){
              state.form[i] = value[i]
          }
        }
    }
    dialogVisible.value = true;
    if(type == 'pwd'){
      state.form.id = value.id
    }
    dialogVisible.value = true
}

const validKey=(key,obj)=>{
  return key in obj
}

const getArea = async ()=>{
  const res = await getRegionTree({name: '',parentId: null,regionType: 0})
  if(res.code == 200){
    state.areaList = res.data
    state.areaList.unshift({
      id: 0,
      name: '新疆维吾尔自治区'
    })
  }else{
    ElMessage.warning(res.message)
  }
}

const onSubmit = async () => {
    const valid = await superRef.value.validate();
    if(valid){
        superRef.value.clearValidate();
        reset();
        dialogVisible.value = false;

        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')
            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')
            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 = () => {
    superRef.value.clearValidate();
    reset();
    superRef.value.resetFields()
    dialogVisible.value = false;

}
const reset = () => {
    state.form = {
        name: '',
        phone: '',
        password: '',
        confirmPassword: '',
        username: '',
        accountType: 1,
        area: ''
    }
}



 src/views/safetyReview/userManage/superviseUsers/index.vue

@@ -13,17 +13,17 @@
            <el-table-column label="姓名" prop="name" align="center"  />
            <el-table-column label="手机号" prop="phone" align="center" />
            <el-table-column label="用户名" prop="username" align="center"  />
            <el-table-column label="账号类型" prop="accountType" align="center" >
            <el-table-column label="账号类型" prop="userType" align="center" >
                <template #default="scope">
                    <span v-if="scope.row.accountType === 1">工作人员</span>
                    <span v-if="scope.row.accountType === 2">领导</span>
                    {{scope.row.userType == 0?'工作人员':scope.row.userType == 1?'领导':'其他'}}
                </template>
            </el-table-column>
            <el-table-column label="监管地区" prop="area" align="center"  />
            <el-table-column label="监管地区" prop="manageRegion" align="center"/>
            <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)" v-hasPermi="['system:role:edit']">编辑</el-button>
                    <el-button link type="danger"  @click="handleDelete(scope.row)" v-hasPermi="['system:role:remove']">删除</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>
                    <el-button link type="primary" @click="openDialog('pwd',scope.row)">修改密码</el-button>
                </template>
            </el-table-column>
        </el-table>
@@ -40,9 +40,11 @@
</template>

<script setup>
import {getCurrentInstance, reactive, ref, toRefs} from "vue";
import {ElMessageBox} from "element-plus";
import {getCurrentInstance, onMounted, onUnmounted, reactive, ref, toRefs} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
import superviseDialog from "./components/superviseDialog.vue"
import { getMonitorList, delMonitor } from "../../../../api/sysUsers"

const { proxy } = getCurrentInstance();
const loading = ref(false);
const superRef = ref();
@@ -52,18 +54,29 @@
        pageSize: 10,
    },
    total: 0,
    dataList: [
    ]


    dataList: []
});

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

const getList = () => {
    loading.value = true;
    console.log("获取数据")
    loading.value = false;
onMounted(()=>{
  getList()
})

onUnmounted(()=>{

})

const getList = async () => {
    loading.value = true
    const res = await getMonitorList(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) => {
@@ -84,7 +97,13 @@
            type: 'warning',
        })
        .then( async() => {

            const res = await delMonitor(val.id)
            if(res.code == 200){
              ElMessage.success('数据删除成功')
              getList()
            }else{
              ElMessage.warning(res.message)
            }
        })
}