SmartOpsWeb/src/views/system/user/index.vue

<template>
  <fvSearchForm :searchConfig="searchConfig" @search="search"></fvSearchForm>
  <fvTable ref="tableIns" :tableConfig="tableConfig" @headBtnClick="headBtnClick"></fvTable>
  <fvFormDialog ref="formDialogRef" :title="dialogTitle" :dialogType="dialogType"
                :form-schema="formSchema" :form-rules="formRules"
                @dialogSubmit="handleSubmitAddressBook"></fvFormDialog>
</template>

<script setup>
import {getUserDetail, addUser, editUser} from "@/api/user/user";
import {ElMessage} from "element-plus";
import {useCacheStore} from "@/stores/cache.js";

const tableIns = ref()
const formDialogRef = ref()
const dialogType = ref("");
const showAddOrEditUserDialog = ref(false)
const dialogTitle = ref("");
const searchConfig = reactive([
  {
    label: '用户名称',
    prop: 'requirementName',
    props: {
      placeholder: '请输入用户名称查询',
      clearable: true,
      checkStrictly: true
    },
    component: 'el-input',
  },
  {
    label: '手机号码',
    prop: 'requirementName',
    props: {
      placeholder: '请输入手机号码查询',
      clearable: true,
      checkStrictly: true
    },
    component: 'el-input',
  },
])
const tableConfig = reactive({
  columns: [
    {
      prop: 'index',
      type: 'index',
      label: '序号',
      align: 'center',
      width: 80,
    },
    {
      prop: 'userName',
      label: '登录账号',
      align: 'center'
    },
    {
      prop: 'nickName',
      label: '用户姓名',
      align: 'center'
    },
    {
      prop: 'phoneNumber',
      label: '手机号码',
      align: 'center'
    },
    {
      prop: 'workOrderTime',
      label: '电子邮箱',
      align: 'center',
    },
  ],
  api: '/user',
  params: {},
  btns: [
    {name: '新增', key: 'add', type: 'primary'},
  ]
})
const formRules = reactive({
  nickName: [
    {required: true, message: "请输入用户昵称", trigger: "blur"}
  ],
  userName: [
    {required: true, message: "请输入用户名称", trigger: "blur"}
  ],
  password: [
    {required: true, message: "请输入用户密码", trigger: "blur"}
  ]
});
const formSchema = computed(() => {
  return [
    {
      label: '登录账号',
      prop: 'userName',
      component: 'el-input',
      colProps: {
        span: 24
      },
      props: {
        placeholder: '请输入登录账号',
        clearable: true,
        // type: 'textarea',
        // rows: 3
      }
    },
    {
      label: '用户姓名',
      prop: 'nickName',
      component: 'el-input',
      colProps: {
        span: 24
      },
      props: {
        placeholder: '请输入用户姓名',
        clearable: true,
      }
    },
    {
      label: '用户性别',
      prop: 'sex',
      component: 'el-input',
      colProps: {
        span: 24
      },
      props: {
        placeholder: '请输入用户性别',
        clearable: true,
      }
    },
    {
      label: '用户密码',
      prop: 'password',
      component: 'el-input',
      colProps: {
        span: 24
      },
      props: {
        placeholder: '请输入用户密码',
        clearable: true,
      },
    },
    {
      label: '手机号码',
      prop: 'phoneNumber',
      component: 'el-input',
      colProps: {
        span: 24
      },
      props: {
        placeholder: '请输入手机号码',
        clearable: true,
      },
    },
    {
      label: '电子邮箱',
      prop: 'email',
      component: 'el-input',
      colProps: {
        span: 24
      },
      props: {
        placeholder: '请输入电子邮箱',
        clearable: true,
      },
    },
  ]
})
const search = (val) => {
  let obj = {...val}
  if (obj.dateValue) {
    obj.startTime = obj.dateValue[0]
    obj.endTime = obj.dateValue[1]
    delete obj.dateValue
  }
  tableConfig.params = obj
  tableIns.value.refresh()
}
const headBtnClick = (key) => {
  switch (key) {
    case 'add':
      handleAdd()
      break;
  }
}
//新增用户
const handleAdd = () => {
  showAddOrEditUserDialog.value = true
  // formRules.value.password[0].required = true
  // restForm();
  dialogTitle.value = "新增用户";
  dialogType.value = "add";
  nextTick(() => {
    // formDialogRef.value.getFormInstance().setValues({})
    // 清空校验
    formDialogRef.value.getFormInstance().clearValidate()
    formDialogRef.value.getFormInstance().resetFields()
  })
};

const handleEdit = (row) => {
  formDialogRef.value.openOrCloseDialog(true)
  getDetail(row)
  dialogTitle.value = "编辑用户";
  dialogType.value = "edit";
}

const getDetail = (row) => {
  getUserDetail(row.userId).then(res => {
    if (res.code === 1000) {
      ElMessage.success(res.msg)
      nextTick(() => {
        formDialogRef.value.getFormInstance().setValues(res.data)
        // 清空校验
        formDialogRef.value.getFormInstance().clearValidate()
      })
    } else {
    }
  })
}

//取消
const handleCancel = () => {
  showAddOrEditUserDialog.value = false;
};
//提交
const handleSubmit = async (formInstance) => {
  if (!formInstance) return;
  let validate = await formInstance.validate()
  if (!validate.isValidate) return;
  if (dialogType.value === "add") {
    addUser(formInstance.getValues()).then(res => {
      if (res.code === 1000) {
        ElMessage.success(res.msg);
        tableIns.value.refresh()
        formDialogRef.value.openOrCloseDialog(false)
      } else {
        ElMessage.error(res.msg);
      }
    });
  }
  // editUser
}
</script>