修改异常管理页面

src/views/system/user.vue

@@ -1,112 +1,92 @@
-<!--  -->
 <template>
-    <div class="hc-layout-box user-page">
-        <hc-card :scrollbar="false" action-size="lg">
-            <template #header>
-                <el-button color="#20C98B" type="primary" @click="addClick">
-                    <hc-icon name="add" class="text-white" />
-                    <span class="text-white">新增</span>
-                </el-button>
-
-                <el-button color="#FF6C6C" :disabled="tableCheckedKeys.length === 0" @click="rowDelClick">
-                    <hc-icon name="delete-bin-2" class="text-white" />
-                    <span class="text-white">删除</span>
-                </el-button>
-                <el-button v-yes-com:[refreshPassword] type="info" :disabled="tableCheckedKeys.length === 0" yes-com-text="是否重置密码为 123456">
-                    <hc-icon name="refresh" />
-                    <span>重置密码</span>
-                </el-button>
-                <el-button v-yes-com:[exportClick] color="#6CC2FF" yes-com-text="确定导出用户数据?">
-                    <hc-icon name="download" class="text-white" />
-                    <span class="text-white">导出</span>
-                </el-button>
-            </template>
-            <template #extra>
-                <el-input v-model="searchForm.queryValue" placeholder="请输入" clearable />
-                <el-button color=" #4b4b4b" type="primary" class="ml-2">
-                    <hc-icon name="search" class="text-white" />
-                    <span class="text-white">搜索</span>
-                </el-button>
-            </template>
-            <hc-table
-                class="user-page-table"
-                is-check
-                :column="tableColumn"
-                :datas="tableData"
-
-                @selection-change="tableSelectionChange"
-            >
-                <template #action="{ row }">
-                    <el-link type="success" @click="rowEditClick(row)">   <hc-icon name="edit" />编辑</el-link>
-                    <el-link type="success" @click="rowDelClick(row)">  <hc-icon name="delete-bin-2" />删除</el-link>
-                </template>
-            </hc-table>
-            <template #action>
-                <HcPages :pages="searchForm" @change="pageChange" />
+    <hc-card :scrollbar="false" action-size="lg" class="user-page">
+        <template #header>
+            <div class="relative w-[300px]">
+                <hc-search-input v-model="searchForm.queryValue" text="搜索" @search="searchClick" />
+            </div>
+        </template>
+        <template #extra>
+            <el-button color="#20C98B" type="primary" @click="addClick">
+                <hc-icon class="text-white" name="add" />
+                <span class="text-white">新增</span>
+            </el-button>
+            <el-button :disabled="tableCheckedKeys.length === 0" color="#FF6C6C" @click="rowDelClick">
+                <hc-icon class="text-white" name="delete-bin-2" />
+                <span class="text-white">删除</span>
+            </el-button>
+            <el-button v-yes-com:[refreshPassword] :disabled="tableCheckedKeys.length === 0" type="info" yes-com-text="是否重置密码为 123456">
+                <hc-icon name="refresh" />
+                <span>重置密码</span>
+            </el-button>
+            <el-button v-yes-com:[exportClick] color="#6CC2FF" yes-com-text="确定导出用户数据?">
+                <hc-icon class="text-white" name="download" />
+                <span class="text-white">导出</span>
+            </el-button>
+        </template>
+        <hc-table :column="tableColumn" :datas="tableData" class="user-page-table" is-check @selection-change="tableSelectionChange">
+            <template #action="{ row }">
+                <el-link type="success" @click="rowEditClick(row)">
+                    <hc-icon name="edit" />编辑
+                </el-link>
+                <el-link type="success" @click="rowDelClick(row)">
+                    <hc-icon name="delete-bin-2" />删除
+                </el-link>
             </template>
-        </hc-card>
-    </div>
-    <hc-dialog v-model="addModal" title="新增" widths="50rem">
-        <hc-icon name="user" style="font-size: 18px;" class="font-bold" />
-        <span class="font-bold">基础信息</span>
+        </hc-table>
+        <template #action>
+            <hc-pages :pages="searchForm" @change="pageChange" />
+        </template>
 
-        <el-divider style="margin-top: 10px;" />
-        <el-form :inline="true" :model="baseForm" label-width="auto" :rules="baseFormRules">
-            <div class="hc-form-item">
-                <el-form-item label="登陆账户:" prop="user">
-                    <el-input v-model="baseForm.user" placeholder="请输入" clearable />
-                </el-form-item>
-                <el-form-item label="密码:" prop="password">
-                    <el-input v-model="baseForm.password" placeholder="请输入" clearable show-password type="password" />
-                </el-form-item>
-            </div>
-            <div class="hc-form-item">
-                <el-form-item label="用户名:" prop="username">
-                    <el-input v-model="baseForm.username" placeholder="请输入" clearable />
-                </el-form-item>
-                <el-form-item label="角色:" prop="role">
-                    <el-select
-                        v-model="baseForm.role"
-                        placeholder="请选择"
-                    >
-                        <el-option
-                            v-for="item in roleOptions"
-                            :key="item.value"
-                            :label="item.label"
-                            :value="item.value"
-                        />
-                    </el-select>
-                </el-form-item>
-            </div>
-        </el-form>
-    </hc-dialog>
+        <!-- 新增编辑 -->
+        <hc-dialog v-model="addModal" title="新增" widths="50rem">
+            <hc-icon class="font-bold" name="user" style="font-size: 18px;" />
+            <span class="font-bold">基础信息</span>
+            <el-divider style="margin-top: 10px;" />
+            <el-form :inline="true" :model="baseForm" :rules="baseFormRules" label-width="auto">
+                <div class="hc-form-item">
+                    <el-form-item label="登陆账户:" prop="user">
+                        <el-input v-model="baseForm.user" clearable placeholder="请输入" />
+                    </el-form-item>
+                    <el-form-item label="密码:" prop="password">
+                        <el-input v-model="baseForm.password" clearable placeholder="请输入" show-password type="password" />
+                    </el-form-item>
+                </div>
+                <div class="hc-form-item">
+                    <el-form-item label="用户名:" prop="username">
+                        <el-input v-model="baseForm.username" clearable placeholder="请输入" />
+                    </el-form-item>
+                    <el-form-item label="角色:" prop="role">
+                        <el-select v-model="baseForm.role" placeholder="请选择">
+                            <el-option v-for="item in roleOptions" :key="item.value" :label="item.label" :value="item.value" />
+                        </el-select>
+                    </el-form-item>
+                </div>
+            </el-form>
+        </hc-dialog>
+    </hc-card>
 </template>
 
-   <script setup>
-   import { ref, watch } from 'vue'
-   import { HcDelMsg } from 'hc-vue3-ui'
-   const tableColumn = [
-       { key: 'key1', name: '登陆账户', align:'center' },
-       { key: 'key2', name: '用户名', align:'center' },
-       { key: 'key3', name: '角色', align:'center' },
-       { key: 'action', name: '操作', align:'center' },
-   ]
-   const tableData = ref([
-       { key1: 'admin', key2: 'xxx', key3: '超级管理员' },
-       { key1: '13028304756', key2: 'aaa', key3: '角色' },
-   ])
+<script setup>
+import { ref } from 'vue'
+import { HcDelMsg } from 'hc-vue3-ui'
+
+const tableColumn = [
+    { key: 'key1', name: '登陆账户', align: 'center' },
+    { key: 'key2', name: '用户名', align: 'center' },
+    { key: 'key3', name: '角色', align: 'center' },
+    { key: 'action', name: '操作', align: 'center', width: '140' },
+]
+const tableData = ref([
+    { key1: 'admin', key2: 'xxx', key3: '超级管理员' },
+    { key1: '13028304756', key2: 'aaa', key3: '角色' },
+])
 
-   const addModal = ref(false)
-   const addClick = ()=>{
-       addModal.value = true
-   }
-   const baseForm = ref({
-     user:'',
-     username: '',
-     password: '',
-     role: '',
-   })
-   const baseFormRules = {
+const addModal = ref(false)
+const addClick = () => {
+    addModal.value = true
+}
+const baseForm = ref({ user: '', username: '', password: '', role: '' })
+const baseFormRules = {
     user: {
         required: true,
         trigger: 'blur',
@@ -129,15 +109,18 @@
     },
 }
 const tableCheckedKeys = ref([])
- //多选事件
+//多选事件
 const tableSelectionChange = (rows) => {
     tableCheckedKeys.value = rows
 }
 //搜索表单
-const searchForm = ref({
-    queryValue: null, current: 1, size: 20, total: 0,
-})
-const getTableData = ()=>{
+const searchForm = ref({ queryValue: null, current: 1, size: 20, total: 0 })
+
+const searchClick = () => {
+
+}
+
+const getTableData = () => {
 
 }
 //分页被点击
@@ -146,14 +129,14 @@ const pageChange = ({ current, size }) => {
     searchForm.value.size = size
     getTableData()
 }
-const rowEditClick = (row)=>{
+const rowEditClick = (row) => {
     addModal.value = true
     baseForm.value = row
 }
-const rowDelClick = ()=>{
-    HcDelMsg( async ( resolve) => {
-            // await removeContractTreeNode()
-            resolve() //关闭弹窗的回调
+const rowDelClick = () => {
+    HcDelMsg(async (resolve) => {
+        // await removeContractTreeNode()
+        resolve() //关闭弹窗的回调
     })
 }
 const refreshPassword = async (_, resolve) => {
@@ -164,32 +147,11 @@ const exportClick = async (_, resolve) => {
     //这里可以写一些操作
     resolve() //这个一定要存在，否则不会关闭弹窗
 }
-const roleOptions = ref([ {
-    value: 'Option1',
-    label: 'Option1',
-  },
-  {
-    value: 'Option2',
-    label: 'Option2',
-  },
-  {
-    value: 'Option3',
-    label: 'Option3',
-  },
-  {
-    value: 'Option4',
-    label: 'Option4',
-  },
-  {
-    value: 'Option5',
-    label: 'Option5',
-  }])
+const roleOptions = ref([
+    { value: 'Option1', label: 'Option1' },
+    { value: 'Option2', label: 'Option2' },
+    { value: 'Option3', label: 'Option3' },
+    { value: 'Option4', label: 'Option4' },
+    { value: 'Option5', label: 'Option5' },
+])
 </script>
-
- <style lang='scss' scoped>
-.hc-layout-box{
-    position: relative;
-    height: 100%;
-    width: 100%;
-}
-</style>