账户管理

src/views/system/user.vue

@@ -1,13 +1,267 @@
 <template>
-    <div class="home-styles-box">
-        用户管理
-    </div>
+       <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>