Cold_erp_web/src/views/account/users/components/DrawerFrom.vue

<script setup lang="ts">
import { ref, reactive, onMounted, nextTick } from 'vue'
import Drawer from '@/components/Drawer/index.vue'
import { User_Power_List } from '@/api/role/index'
import { User_Post_List, User_Add, User_Edit } from '@/api/user/index'
import { GlobalStore } from '@/stores/index'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import { reuls_validator } from './relus'
import md5 from 'js-md5'

const globalStore = GlobalStore()
const _PASS = '******'
let userPowerList: any = []
const getUserPowerList = async () => {
  const res: any = await User_Power_List({ User_tokey: globalStore.GET_User_tokey, page: 1, page_z: 9999 })
  userPowerList = res.Data.Data
}
let userPostList = ref<any>([])
const changeDept = async (val: number) => {
  const res = await User_Post_List({ T_dept: val })
  userPostList.value = res.Data
}
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
const formRef = ref()
const drawerRef = ref()
const formLabelWidth = ref('95px')
let form = ref({
  T_power: '',
  T_name: '',
  T_user: '',
  T_pass: '',
  T_dept: '',
  T_post: '',
  T_sex: '',
  T_id_card: '',
  T_nation: '',
  T_school: '',
  T_major: '',
  T_education: '',
  T_marry: '',
  T_phone: '',
  T_entry_time: '',
  T_spouse_name: '',
  T_entry_type: '',
  T_contract_start_time: '',
  T_contract_end_time: '',
  T_remark: '',
  T_positive_time: '',
  T_spouse_phone: '',
  T_expire: ''
})
const rules = reactive<FormRules>(reuls_validator)
type Fn = () => void
const callbackDrawer = (done: Fn) => {
  done()
  nextTick(() => {
    resetForm(formRef.value)
  })
}

const openDrawer = () => {
  drawerRef.value.openDrawer()
}
const AddUser = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate(async valid => {
    if (valid) {
      let res: any = {}
      if (props.action) {
        form.value.T_pass = md5(form.value.T_pass)
        res = await User_Add(form.value)
      } else {
        form.value.T_pass === _PASS && (form.value.T_pass = '')
        res = await User_Edit(form.value)
      }
      if (res.Code === 200) {
        ElMessage({
          type: 'success',
          message: `${props.action ? '添加' : '编辑'}成功！`
        })
        nextTick(() => {
          drawerRef.value.closeDrawer()
          emit('onTableList')
          resetForm(formRef.value)
          emit('onaction', true)
        })
      }
    } else {
      return false
    }
  })
}

const DataEcho = async (row: any) => {
  row.T_entry_type = +row.T_entry_type
  row.T_pass = _PASS
  const res = await User_Post_List({ T_dept: row.T_dept })
  userPostList.value = res.Data
  nextTick(() => {
    form.value = { ...row }
  })
}

onMounted(() => {
  if (userPowerList.length <= 0) {
    getUserPowerList()
  }
})

const emit = defineEmits<{ (event: 'onTableList'): void; (event: 'onaction', val: boolean): void }>()

interface PropsType {
  action: boolean
}
const props = defineProps<PropsType>()
defineExpose({
  openDrawer,
  callbackDrawer,
  DataEcho
})
</script>
<template>
  <Drawer ref="drawerRef" :handleClose="callbackDrawer">
    <template #header="{ params }">
      <h4 :id="params.titleId" :class="params.titleClass">{{ action ? '添加' : '编辑' }} - 账户管理</h4>
    </template>
    <el-form :model="form" ref="formRef" :rules="rules">
      <el-form-item label="角色权限：" :label-width="formLabelWidth" prop="T_power">
        <el-select v-model="form.T_power" placeholder="请选择角色">
          <el-option v-for="item in userPowerList" :key="item.T_id" :label="item.T_name" :value="item.T_id" />
        </el-select>
      </el-form-item>
      <el-form-item label="名称：" :label-width="formLabelWidth" prop="T_name">
        <el-input v-model="form.T_name" autocomplete="off" placeholder="名称" />
      </el-form-item>
      <el-form-item label="账号：" :label-width="formLabelWidth" prop="T_user">
        <el-input v-model="form.T_user" autocomplete="off" placeholder="账号" />
      </el-form-item>
      <el-form-item label="密码：" :label-width="formLabelWidth" prop="T_pass">
        <el-input v-model="form.T_pass" type="password" autocomplete="off" placeholder="密码" />
      </el-form-item>
      <el-form-item label="部门：" :label-width="formLabelWidth" prop="T_dept">
        <el-select v-model="form.T_dept" placeholder="请选择部门" @change="changeDept">
          <el-option v-for="item in globalStore.GET_Dept_List" :key="item.Id" :label="item.T_name" :value="item.Id" />
        </el-select>
      </el-form-item>
      <el-form-item label="岗位：" :label-width="formLabelWidth" prop="T_post">
        <el-select v-model="form.T_post" placeholder="请选择岗位">
          <el-option v-for="item in userPostList" :key="item.Id" :label="item.T_name" :value="item.Id" />
        </el-select>
      </el-form-item>
      <el-form-item label="性别：" :label-width="formLabelWidth" prop="T_sex">
        <el-radio-group v-model="form.T_sex" class="ml-4">
          <el-radio :label="1">男</el-radio>
          <el-radio :label="2">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="身份证号：" :label-width="formLabelWidth" prop="T_id_card">
        <el-input v-model="form.T_id_card" autocomplete="off" placeholder="身份证号" />
      </el-form-item>
      <el-form-item label="民族：" :label-width="formLabelWidth" prop="T_nation">
        <el-input v-model="form.T_nation" autocomplete="off" placeholder="民族" />
      </el-form-item>
      <el-form-item label="毕业院校：" :label-width="formLabelWidth" prop="T_school">
        <el-input v-model="form.T_school" autocomplete="off" placeholder="毕业院校" />
      </el-form-item>
      <el-form-item label="专业：" :label-width="formLabelWidth" prop="T_major">
        <el-input v-model="form.T_major" autocomplete="off" placeholder="专业" />
      </el-form-item>
      <el-form-item label="学历：" :label-width="formLabelWidth" prop="T_education">
        <el-input v-model="form.T_education" autocomplete="off" placeholder="学历" />
      </el-form-item>
      <el-form-item label="联系电话：" :label-width="formLabelWidth" prop="T_phone">
        <el-input v-model="form.T_phone" autocomplete="off" placeholder="联系电话" />
      </el-form-item>
      <el-form-item label="婚否：" :label-width="formLabelWidth" prop="T_marry">
        <el-radio-group v-model="form.T_marry" class="ml-4">
          <el-radio :label="0">未婚</el-radio>
          <el-radio :label="1">已婚</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="入职时间：" :label-width="formLabelWidth" prop="T_entry_time">
        <el-date-picker
          v-model="form.T_entry_time"
          type="date"
          placeholder="入职时间"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
        />
      </el-form-item>
      <el-form-item label="转正时间：" :label-width="formLabelWidth" prop="T_positive_time">
        <el-date-picker
          v-model="form.T_positive_time"
          type="date"
          placeholder="转正时间"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
        />
      </el-form-item>
      <el-form-item label="配偶姓名：" :label-width="formLabelWidth">
        <el-input v-model="form.T_spouse_name" autocomplete="off" placeholder="配偶姓名" />
      </el-form-item>
      <el-form-item label="配偶联系电话：" label-width="110px">
        <el-input v-model="form.T_spouse_phone" autocomplete="off" placeholder="配偶联系电话" />
      </el-form-item>
      <el-form-item label="入职类型：" :label-width="formLabelWidth" prop="T_entry_type">
        <el-radio-group v-model="form.T_entry_type" class="ml-4">
          <el-radio :label="1">全职</el-radio>
          <el-radio :label="2">兼职</el-radio>
          <el-radio :label="3">实习生</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="劳动合同开始时间：" label-width="150px" prop="T_contract_start_time">
        <el-date-picker
          v-model="form.T_contract_start_time"
          type="date"
          placeholder="劳动合同开始时间"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
        />
      </el-form-item>
      <el-form-item label="劳动合同结束时间：" label-width="150px" prop="T_contract_end_time">
        <el-date-picker
          v-model="form.T_contract_end_time"
          type="date"
          placeholder="劳动合同结束时间"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
        />
      </el-form-item>
      <el-form-item label="是否到期：" :label-width="formLabelWidth" prop="T_expire">
        <el-radio-group v-model="form.T_expire" class="ml-4">
          <el-radio :label="0">否</el-radio>
          <el-radio :label="1">是</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="备注：" :label-width="formLabelWidth">
        <el-input v-model="form.T_remark" type="textarea" autocomplete="off" placeholder="备注" />
      </el-form-item>

      <el-form-item :label-width="formLabelWidth">
        <el-button v-if="action" color="#626aef" @click="AddUser(formRef)">添加</el-button>
        <el-button v-else color="#626aef" @click="AddUser(formRef)">编辑</el-button>
      </el-form-item>
    </el-form>
  </Drawer>
</template>
<style scoped lang="scss"></style>