hac/src/views/system/user.vue

<template>
       <HcCard actionSize="lg" scrollbar>
            <template #header>
                <div class="w-40">
                        <el-select v-model="searchForm.postType" placeholder="选择岗位类型" clearable size="large">
                            <el-option v-for="item in postOptions" :key="item.value" :label="item['label']" :value="item['value']"/>
                        </el-select>
                </div>
                <div class="w-64 ml-3">
                        <el-input v-model="searchForm.name" size="large" placeholder="请输入名称搜索" clearable @keyup="keyUpEvent"/>
                    </div>
                <div class="ml-3">
                        <el-button type="primary" @click="searchClick"  size="large">
                            <HcIcon name="search-2"/>
                            <span>搜索</span>
                        </el-button>
                </div>
            </template>
            <template #extra>
                <div class="ml-2">
                        <el-button type="primary" @click="addClick"  size="large">
                            <span>创建账户</span>
                        </el-button>
                </div>
                <div class="ml-2">
                        <el-button type="danger" @click="cancelClick"  size="large" :disabled="tableCheckedKeys.length <= 0">
                            <span>注销账户</span>
                        </el-button>
                </div>
            </template>
            <HcTable :column="tableColumn" :datas="tableData" isCheck @selection-change="tableSelectionChange" >
                <template #name="{row}">{{ row['name'] }}</template>
                <template #text="{row}">{{ row['text'] }}</template>
                <template #color="{row}">{{ row['color'] }}</template>
                <template #action="{row, index}">
                    <el-button size="small" type="primary" @click="eidtModal">编辑</el-button>
                </template>
            </HcTable>

            <template #action>
                <HcPages :pages="searchForm" @change="pageChange"></HcPages>
            </template>
        </HcCard>
        <HcDialog :show="addModal" :title="modalTitle" @close="addModalClose"  widths="80rem">
            <HcCard title="基础信息">
                 <el-form ref="formUserRef" :model="formUserModel" :rules="formUserRules" label-position="left"
                             size="large" >
                        <el-form-item label="登录账号" prop="account">
                            <el-input v-model="formUserModel.account"  placeholder="" autocomplete="new-password" />
                        </el-form-item>
                 
                        <el-form-item label="新的密码" prop="newPassword"  >
                            <el-input v-model="formUserModel.newPassword" placeholder="请输入新的密码"  autocomplete="new-password"
                                      show-password type="password"/>
                        </el-form-item>
                        <el-form-item label="确认新密码" prop="newPassword1"   >
                            <el-input v-model="formUserModel.newPassword1" placeholder="请输入确认新密码" autocomplete="new-password"
                                      show-password type="password"/>
                        </el-form-item>
                    </el-form>
            </HcCard>
            <HcCard title="详细信息"  class="mt-2">
                <el-form ref="formUserRef" :model="formUserModel" :rules="formUserRules" label-position="left"
                size="large">
                        <el-form-item label="用户姓名" prop="real_name">
                            <el-input v-model="formUserModel.real_name" />
                        </el-form-item>
                        <el-form-item prop="phone" label="手机号码">
                            <el-input v-model="formUserModel.phone" 
                                        placeholder="请输入绑定手机"/>
                        </el-form-item>
                        <el-form-item label="身份证号">
                            <el-input v-model="formUserModel.idNumber"  placeholder=""/>
                        </el-form-item>
                        <el-form-item label="机构信息" prop="real_name">
                            <el-select v-model="value" class="m-2" placeholder="选择部门" size="large">
                                <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                                />
                            </el-select>
                            
                            <el-select v-model="value" class="m-2" placeholder="选择岗位" size="large">
                                <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                                />
                            </el-select>
                            <el-select v-model="value" class="m-2" placeholder="是否为部门负责人" size="large">
                                <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="日单价">
                            <el-input v-model="formUserModel.roleName"  placeholder=""/>
                        </el-form-item>
                        <el-form-item label="启用状态">
                            <el-select v-model="formUserModel.state" class="m-2" placeholder="" size="large">
                                <el-option
                                v-for="item in stateoptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-form>
            </HcCard>
            <template #footer>
                <div class="dialog-footer">
                    <el-button size="large" @click="addModal = false">
                        <HcIcon name="close"/>
                        <span>取消</span>
                    </el-button>
                    <el-button :loading="sureSignUserLoading" hc-btn type="primary" @click="sureSignUserClick">
                        <HcIcon name="check"/>
                        <span>确定创建</span>
                    </el-button>
                </div>
            </template>
        </HcDialog>
</template>

<script setup>
import {ref, watch} from "vue";
import {useAppStore} from "~src/store";
import {arrIndex, formValidate, getArrValue, isPhone} from "js-fast-way"

const searchForm = ref({
    postType: '', name:'',
    current: 1, size: 20, total: 0
})
//分页被点击
const pageChange = ({current, size}) => {
    searchForm.value.current = current
    searchForm.value.size = size
}
const postOptions = ref([
    {label: '所有', value: '1'},
    {label: '财务', value: '2'},
    {label: '总经理', value: '3'},
    {label: '会计', value: '4'},

])
const searchClick=()=>{

}
const keyUpEvent=()=>{
    
}
const tableColumn = [
    {key: 'name', name: '用户名称'},
    {key: 'name', name: '账号ID'},
    {key: 'name', name: '密码'},
    {key: 'text', name: '所属部门'},
    {key: 'text', name: '岗位'},
    {key: 'text', name: '创建日期'},
    {key: 'text', name: '启用状态'},
    {key: 'action', name: '操作', width: 100}
]
const tableData = ref([
    {name: '名称1', text: '文本1', color: 'red'},
    {name: '名称2', text: '文本2', color: 'blue'},
    {name: '名称3', text: '文本3', color: '无'}
])
const tableCheckedKeys = ref([]);
const tableSelectionChange = (rows) => {
    tableCheckedKeys.value = rows
    if(tableCheckedKeys.value.length>1){
        window.$message.warning('只能选择一条数据')
    }
}
const addModal = ref(false)
const modalTitle=ref('新增')
const eidtModal=()=>{
    modalTitle.value='编辑'
    addModal.value=true
}
//弹窗关闭
const addModalClose = () => {
    console.log('弹窗关闭')
   addModal.value = false
}
const addClick=()=>{
    addModal.value = true
}
//基础信息表单
const formUserRef = ref(null)
const formUserModel = ref({})
const formUserRules = {
    phone: {
        required: true,
        validator: (rule, value, callback) => {
            if (!value) {
                callback(new Error('请输入手机号'))
            } else if (!isPhone(value)) {
                callback(new Error('手机号码格式错误'))
            } else {
                callback()
            }
        },
        trigger: "blur"
    },
    account: {
        required: true,
        validator: (rule, value, callback) => {
            if (!value) {
                callback(new Error('请输入登录账号'))
            } else {
                callback()
            }
        },
        trigger: "blur"
    },
    newPassword: {
        required: true,
        validator: (rule, value, callback) => {
            if (!value) {
                callback(new Error('请输入新密码'))
            } else {
                callback()
            }
        },
        trigger: "blur"
    },
    newPassword1: {
        required: true,
        validator: (rule, value, callback) => {
            if (!value) {
                callback(new Error('请确认新密码'))
            } else {
                callback()
            }
        },
        trigger: "blur"
    },
    
}
const stateoptions=ref([
    {label: '启用', value: '1'},
    {label: '停用', value: '2'},
   
])
const cancelClick=()=>{
    window?.$messageBox?.alert('您确定要注销[xxx] 的账户信息吗? 一旦注销数据将彻底清除，请谨慎操作？', '注销提醒', {
        showCancelButton: true,
        confirmButtonText: '确认注销',
        cancelButtonText: '取消',
        type: 'warning',
        callback: (action) => {
            if (action === 'confirm') {
                console.log(11111);
            }
        }
    })
}
</script>

<style lang="scss" scoped>

</style>

<style lang="scss">

</style>