优化系统设置、账户管理页面

src/views/system/user.vue

@@ -1,129 +1,101 @@
 <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">
-                            <HcIcon name="add"/>
-                            <span>创建账户</span>
-                        </el-button>
-                </div>
-                <div class="ml-2">
-                        <el-button type="danger" @click="cancelClick"  size="large" :disabled="tableCheckedKeys.length <= 0">
-                            <HcIcon name="delete-bin-2"/>
-                            <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>
+    <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">
+                    <HcIcon name="add"/>
+                    <span>创建账户</span>
+                </el-button>
+            </div>
+            <div class="ml-2">
+                <el-button type="danger" @click="cancelClick" size="large" :disabled="tableCheckedKeys.length <= 0">
+                    <HcIcon name="delete-bin-2"/>
+                    <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>
-        </HcCard>
-        <HcDialog bgColor="#ffffff" isToBody :show="addModal" :title="modalTitle" @close="addModalClose"  widths="70rem">
-           
-            <HcCard >
-                <HcCardItem ui="hac-card-item">
-                    <template #header>
-                                <div class="hac-card-title">基础信息</div>
-                    </template>
-                    <el-form ref="formUserRef" :model="formUserModel" :rules="formUserRules" size="large" label-width="auto" label-position="left">
-                            <el-form-item label="登录账号:" prop="account">
-                                <el-input v-model="formUserModel.account"  placeholder="" autocomplete="new-password" />
-                            </el-form-item>
+        </HcTable>
 
-                            <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>
-                </HcCardItem>
-                <HcCardItem ui="hac-card-item"  class="mt-2">
-                    <template #header>
-                                <div class="hac-card-title">详细信息</div>
-                    </template>
-                    <el-form ref="formUserRef" :model="formUserModel" :rules="formUserRules" label-position="left" label-width="auto"
-                        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"  placeholder="选择部门" size="large">
-                                        <el-option
-                                        v-for="item in options"
-                                        :key="item.value"
-                                        :label="item.label"
-                                        :value="item.value"
-                                        />
-                                    </el-select>
+        <template #action>
+            <HcPages :pages="searchForm" @change="pageChange"></HcPages>
+        </template>
 
-                                    <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="block" 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>
-                 </HcCardItem>
-            </HcCard>
+        <!--新增编辑弹窗-->
+        <HcDialog bgColor="#ffffff" isToBody :show="addModal" :title="modalTitle" @close="addModalClose" widths="51rem">
+            <HcCardItem ui="hac-bg-grey">
+                <template #header>
+                    <div class="hac-card-title">基础信息</div>
+                </template>
+                <el-form ref="formUserRef" :model="formUserModel" :rules="formUserRules" size="large" label-width="auto" label-position="left">
+                    <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>
+            </HcCardItem>
+            <HcCardItem ui="hac-bg-grey" class="mt-2">
+                <template #header>
+                    <div class="hac-card-title">详细信息</div>
+                </template>
+                <el-form ref="formUserRef" :model="formUserModel" :rules="formUserRules" label-position="left" label-width="auto" 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" 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="ml-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="ml-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="block" 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>
+            </HcCardItem>
             <template #footer>
                 <div class="dialog-footer">
                     <el-button size="large" @click="addModal = false">
@@ -137,17 +109,20 @@
                 </div>
             </template>
         </HcDialog>
+    </HcCard>
 </template>
 
 <script setup>
 import {ref, watch} from "vue";
-import {useAppStore} from "~src/store";
-import {arrIndex, formValidate, getArrValue, isPhone} from "js-fast-way"
+import {isPhone} from "js-fast-way"
+
+const value = ref('')
 
 const searchForm = ref({
-    postType: '', name:'',
+    postType: '', name: '',
     current: 1, size: 20, total: 0
 })
+
 //分页被点击
 const pageChange = ({current, size}) => {
     searchForm.value.current = current
@@ -160,10 +135,18 @@ const postOptions = ref([
     {label: '会计', value: '4'},
 
 ])
-const searchClick=()=>{
+
+const options = ref([
+    {label: 'xx', value: '1'},
+    {label: 'aa', value: '2'},
+    {label: 'cc', value: '3'},
+    {label: 'bb', value: '4'},
+])
+
+const searchClick = () => {
 
 }
-const keyUpEvent=()=>{
+const keyUpEvent = () => {
 
 }
 const tableColumn = [
@@ -184,22 +167,22 @@ const tableData = ref([
 const tableCheckedKeys = ref([]);
 const tableSelectionChange = (rows) => {
     tableCheckedKeys.value = rows
-    if(tableCheckedKeys.value.length>1){
+    if (tableCheckedKeys.value.length > 1) {
         window.$message.warning('只能选择一条数据')
     }
 }
 const addModal = ref(false)
-const modalTitle=ref('新增')
-const eidtModal=()=>{
-    modalTitle.value='编辑'
-    addModal.value=true
+const modalTitle = ref('新增')
+const eidtModal = () => {
+    modalTitle.value = '编辑'
+    addModal.value = true
 }
 //弹窗关闭
 const addModalClose = () => {
     console.log('弹窗关闭')
-   addModal.value = false
+    addModal.value = false
 }
-const addClick=()=>{
+const addClick = () => {
     addModal.value = true
 }
 //基础信息表单
@@ -254,12 +237,12 @@ const formUserRules = {
     },
 
 }
-const stateoptions=ref([
+const stateoptions = ref([
     {label: '启用', value: '1'},
     {label: '停用', value: '2'},
 
 ])
-const cancelClick=()=>{
+const cancelClick = () => {
     window?.$messageBox?.alert('您确定要注销[xxx] 的账户信息吗? 一旦注销数据将彻底清除，请谨慎操作？', '注销提醒', {
         showCancelButton: true,
         confirmButtonText: '确认注销',
@@ -272,12 +255,14 @@ const cancelClick=()=>{
         }
     })
 }
-</script>
 
-<style lang="scss" scoped>
+const sureSignUserLoading = ref(false)
+const sureSignUserClick = () => {
 
-</style>
+}
 
-<style lang="scss">
+</script>
+
+<style lang="scss" scoped>
 
 </style>