系统管理ui

src/components/global/svg-icon/index.vue

@@ -30,7 +30,7 @@ const symbolId = computed(() => `#${props.prefix}-${props.name}`);
 .svg-icon {
   display: inline-block;
   vertical-align: middle;
-  width: 18px;
-  height: 18px;
+  width: 16px;
+  height: 16px;
 }
 </style>

src/layout/children-menu.vue

@@ -9,21 +9,13 @@
         @click="routerPush(menu)"
       >
         <template v-if="menu.meta.icon" #icon>
-          <svg-icon
-            class="t-icon"
-            :name="menu.meta.icon"
-            :color="userStore.curPage === menu.name ? '#165DFF' : undefined"
-          ></svg-icon>
+          <svg-icon :name="menu.meta.icon"></svg-icon>
         </template>
         {{ menu.meta.title }}
       </t-menu-item>
       <t-submenu v-else :value="menu.name">
         <template v-if="menu.meta.icon" #icon>
-          <svg-icon
-            class="t-icon"
-            :name="menu.meta.icon"
-            :color="userStore.curPage === menu.name ? '#165DFF' : undefined"
-          ></svg-icon>
+          <svg-icon :name="menu.meta.icon"></svg-icon>
         </template>
         <template #title>
           {{ menu.meta.title }}
@@ -38,11 +30,9 @@
 
 <script setup name="ChildrenMenu">
 import { useRouter } from 'vue-router';
-import { useUserStore } from '@/store';
 
 defineProps({ modelValue: Array });
 
-const userStore = useUserStore();
 const router = useRouter();
 const routerPush = (menu) => {
   if (menu.meta && menu.meta.type === 'L') {

src/layout/index.vue

@@ -10,17 +10,11 @@
           :key="item.name"
           :class="[
             'app-menu-item',
-            { 'is-actice': userStore.curPageModule === item.name },
+            { 'is-active': userStore.curPageModule === item.name },
           ]"
           @click="moduleChange(item.name)"
         >
-          <svg-icon
-            prefix="icon-icon-fill"
-            :name="item.meta.icon"
-            :color="
-              userStore.curPageModule === item.name ? '#165DFF' : undefined
-            "
-          ></svg-icon>
+          <svg-icon prefix="icon-icon-fill" :name="item.meta.icon"></svg-icon>
           <p>{{ item.meta.title }}</p>
         </div>
       </div>
@@ -32,6 +26,7 @@
         <t-dropdown
           trigger="hover"
           :options="userOptions"
+          :minColumnWidth="203"
           @click="clickHandler"
         >
           <div class="app-submenu-user">
@@ -125,9 +120,13 @@ const clickHandler = (data) => {
       &:hover {
         background-color: #e5e6eb;
       }
-      &.is-actice {
+      &.is-active {
         background-color: #e5e6eb;
         color: #165dff;
+
+        :deep(.svg-icon use) {
+          fill: #165dff;
+        }
       }
 
       > i {
@@ -145,6 +144,8 @@ const clickHandler = (data) => {
       .svg-icon {
         display: block;
         margin: 0 auto 3px;
+        width: 18px;
+        height: 18px;
       }
     }
 
@@ -196,13 +197,15 @@ const clickHandler = (data) => {
         }
       }
     }
-    :deep(.t-menu__item .t-icon) {
-      width: 18px;
-      height: 18px;
+    :deep(.t-menu__item .svg-icon) {
+      margin-right: 8px;
     }
     :deep(.t-menu__item:not(.t-is-active)) {
       color: #262626;
     }
+    :deep(.t-menu__item.t-is-active .svg-icon use) {
+      fill: #165dff;
+    }
     :deep(.t-menu__item.t-is-disabled) {
       color: rgb(140, 140, 140);
     }

src/router/modules/system.js

@@ -17,7 +17,6 @@ export default {
       meta: {
         title: '配置管理',
         sort: 1,
-        icon: 'setting',
         alias: 'configureManage',
       },
       children: [
@@ -30,6 +29,7 @@ export default {
             title: '客户配置',
             sort: 1,
             alias: 'custom',
+            icon: 'service-crm',
           },
         },
         {
@@ -41,6 +41,7 @@ export default {
             title: '供应商配置',
             sort: 1,
             alias: 'supplier',
+            icon: 'service-crm',
           },
         },
         {
@@ -52,6 +53,7 @@ export default {
             title: '设备配置',
             sort: 1,
             alias: 'device',
+            icon: 'service-crm',
           },
         },
         {
@@ -65,6 +67,7 @@ export default {
             title: '服务档位配置',
             sort: 1,
             alias: 'level',
+            icon: 'service-crm',
           },
         },
         {
@@ -76,6 +79,7 @@ export default {
             title: '考勤配置',
             sort: 1,
             alias: 'dingConfigure',
+            icon: 'service-crm',
           },
         },
       ],
@@ -87,7 +91,6 @@ export default {
       meta: {
         title: '通知日志',
         sort: 1,
-        icon: 'root-list',
         alias: 'logManage',
       },
       children: [
@@ -100,6 +103,7 @@ export default {
             title: '通知公告管理',
             sort: 1,
             alias: 'noticeManage',
+            icon: 'service-crm',
           },
         },
         {
@@ -111,6 +115,7 @@ export default {
             title: '日志查询',
             sort: 2,
             alias: 'log',
+            icon: 'service-crm',
           },
         },
       ],
@@ -122,7 +127,6 @@ export default {
       meta: {
         title: '任务管理',
         sort: 1,
-        icon: 'root-list',
         alias: 'taskManage',
       },
       children: [
@@ -134,6 +138,7 @@ export default {
             title: '任务管理',
             sort: 1,
             alias: 'task',
+            icon: 'service-crm',
           },
         },
       ],

src/style/global.less

@@ -27,6 +27,10 @@ body {
     }
   }
 }
+.page-header {
+  padding: 16px;
+  border-bottom: 1px solid #e5e5e5;
+}
 .table-search {
   .t-form__item {
     margin-bottom: 16px;

src/style/tdesign-reset.less

@@ -77,8 +77,6 @@
 }
 .t-button {
   .svg-icon {
-    width: 16px;
-    height: 16px;
     margin-right: 8px;
   }
   &.t-is-disabled {

src/views/system/config-manage/checkin-manage/index.vue

@@ -1,14 +1,17 @@
 <template>
-  <div class="registration-query flex flex-col h-full">
+  <div class="flex flex-col h-full">
+    <div class="page-action">
+      <t-button theme="primary" @click="handleAdd">
+        <template #icon><svg-icon name="add-circle" color="#fff" /></template
+        >新增考勤配置
+      </t-button>
+    </div>
     <SearchForm :fields="fields" :params="params">
       <template #service="{ item, params }">
         <select-service-unit v-model="params[item.prop]"></select-service-unit>
       </template>
     </SearchForm>
     <div class="flex-1 page-wrap">
-      <div class="btn-group">
-        <t-button theme="success" @click="handleAdd">新增</t-button>
-      </div>
       <t-table
         size="small"
         row-key="id"
@@ -56,7 +59,7 @@
             <t-link theme="primary" hover="color" @click="handleEdit(row)">
               修改
             </t-link>
-            <t-link theme="danger" hover="color" @click="handleDelete(row)">
+            <t-link theme="primary" hover="color" @click="handleDelete(row)">
               删除
             </t-link>
           </div>
@@ -114,25 +117,28 @@ const params = reactive({
 });
 
 const columns = [
-  { colKey: 'service', title: '服务单元' },
+  { colKey: 'service', title: '服务单元', minWidth: 120 },
   { colKey: 'status', title: '发布状态', cell: 'status', width: 100 },
-  { colKey: 'name', title: '考勤组名称' },
-  { colKey: 'dingObjs', title: '适用考勤对象', cell: 'ding-objs' },
-  { colKey: 'supplier', title: '适用供应商' },
-  { colKey: 'signInTime', title: '签到时段' },
-  { colKey: 'signOutTime', title: '签退时段' },
-  { colKey: 'auditRoles', title: '审核角色', cell: 'approve-objs' },
-  { colKey: 'faceOpen', title: '是否开启人脸', cell: 'face-open' },
-  { colKey: 'reissueCardCount', title: '允许补卡次数', width: 110 },
-  { colKey: 'createName', title: '创建人' },
-  { colKey: 'createTime', title: '创建时间', cell: 'create-time', width: 170 },
+  { colKey: 'name', title: '考勤组名称', minWidth: 140 },
+  {
+    colKey: 'dingObjs',
+    title: '适用考勤对象',
+    cell: 'ding-objs',
+    minWidth: 200,
+  },
+  { colKey: 'supplier', title: '适用供应商', minWidth: 140 },
+  { colKey: 'signInTime', title: '签到时段', width: 160 },
+  { colKey: 'signOutTime', title: '签退时段', width: 160 },
+  { colKey: 'auditRoles', title: '审核角色', cell: 'approve-objs', width: 120 },
+  { colKey: 'faceOpen', title: '是否开启人脸', cell: 'face-open', width: 120 },
+  { colKey: 'reissueCardCount', title: '允许补卡次数', width: 120 },
+  { colKey: 'createName', title: '创建人', with: 120 },
+  { colKey: 'createTime', title: '创建时间', cell: 'create-time', width: 180 },
   {
     title: '管理',
     colKey: 'operate',
-    cell: 'operate',
     fixed: 'right',
     width: 120,
-    align: 'center',
   },
 ];
 const {
@@ -158,6 +164,7 @@ const handleDelete = (row) => {
     body: `确定要删除当前记录吗`,
     confirmBtn: '确定',
     cancelBtn: '取消',
+    theme: 'warning',
     onConfirm: async () => {
       confirmDia.hide();
       const res = await checkinDeleteApi(row.id).catch(() => {});

src/views/system/config-manage/customer-manage/index.vue

@@ -1,5 +1,21 @@
 <template>
-  <div class="registration-query flex flex-col h-full">
+  <div class="flex flex-col h-full">
+    <div class="page-action">
+      <t-space size="small">
+        <t-button theme="primary" @click="handleAdd">
+          <template #icon><svg-icon name="add-circle" color="#fff" /></template
+          >新增客户
+        </t-button>
+        <upload-button
+          upload-url="/api/sys/custom/import"
+          :button-props="{
+            content: '批量导入',
+            variant: 'outline',
+            theme: 'default',
+          }"
+        ></upload-button>
+      </t-space>
+    </div>
     <SearchForm :fields="fields" :params="params">
       <template #manager="{ item, params }">
         <select-type-user v-model="params[item.prop]" type="ACCOUNT_MANAGER">
@@ -11,15 +27,6 @@
       </template>
     </SearchForm>
     <div class="flex-1 page-wrap">
-      <t-space size="small">
-        <t-button theme="success" @click="handleAdd">新增</t-button>
-        <upload-button
-          upload-url="/api/sys/custom/import"
-          :button-props="{
-            content: '批量导入',
-          }"
-        ></upload-button>
-      </t-space>
       <t-table
         size="small"
         row-key="id"
@@ -141,26 +148,29 @@ const params = reactive({
 });
 
 const columns = [
-  { colKey: 'id', title: '客户ID', width: 180 },
-  { colKey: 'name', title: '客户名称' },
+  { colKey: 'id', title: '客户ID', width: 200 },
+  { colKey: 'name', title: '客户名称', width: 120 },
   { colKey: 'type', title: '客户类型', cell: 'type', width: 100 },
   { colKey: 'province', title: '省份', width: 100 },
   { colKey: 'city', title: '城市', width: 100 },
   { colKey: 'area', title: '县区', width: 100 },
   { colKey: 'address', title: '地址', minWidth: 160 },
-  { colKey: 'managerName', title: '客户经理' },
-  { colKey: 'level', title: '服务档位名称' },
-  { colKey: 'roleList', title: '项目角色配置', cell: 'role-list', width: 170 },
-  { colKey: 'peoperDay', title: '标准人天', width: 80 },
-  { colKey: 'createName', title: '创建人' },
+  { colKey: 'managerName', title: '客户经理', width: 120 },
+  { colKey: 'level', title: '服务档位名称', width: 120 },
+  {
+    colKey: 'roleList',
+    title: '项目角色配置',
+    cell: 'role-list',
+    minWidth: 200,
+  },
+  { colKey: 'peoperDay', title: '标准人天', width: 100 },
+  { colKey: 'createName', title: '创建人', width: 120 },
   { colKey: 'createTime', title: '创建时间', width: 180, cell: 'create-time' },
   {
     title: '管理',
     colKey: 'operate',
     fixed: 'right',
     width: 120,
-    align: 'center',
-    cell: 'operate',
   },
 ];
 const {
@@ -176,15 +186,14 @@ const handleAdd = () => {
   curRow.value = null;
   showEditCustomerDialog.value = true;
 };
-const handleImport = () => {
-  console.log('import');
-};
+
 const handleDelete = (row) => {
   const confirmDia = DialogPlugin({
     header: '操作提示',
     body: `确定要删除当前记录吗`,
     confirmBtn: '确定',
     cancelBtn: '取消',
+    theme: 'warning',
     onConfirm: async () => {
       confirmDia.hide();
       const res = await customerDeleteApi(row.id).catch(() => {});

src/views/system/config-manage/device-manage/index.vue

@@ -1,5 +1,39 @@
 <template>
-  <div class="registration-query flex flex-col h-full">
+  <div class="flex flex-col h-full">
+    <div class="page-action">
+      <t-space size="small">
+        <t-button theme="primary" @click="handleAdd">
+          <template #icon><svg-icon name="add-circle" color="#fff" /></template
+          >新增设备
+        </t-button>
+        <t-button
+          variant="outline"
+          :disabled="!selectedRowKeys.length"
+          @click="handleDestroy"
+          >批量作废</t-button
+        >
+        <t-button
+          variant="outline"
+          :disabled="!selectedRowKeys.length"
+          @click="handleEable(selectedRowKeys, true)"
+          >批量启用</t-button
+        >
+        <t-button
+          variant="outline"
+          :disabled="!selectedRowKeys.length"
+          @click="handleEable(selectedRowKeys, false)"
+          >批量禁用</t-button
+        >
+        <upload-button
+          upload-url="/api/sys/device/import"
+          :button-props="{
+            content: '批量导入',
+            variant: 'outline',
+            theme: 'default',
+          }"
+        ></upload-button>
+      </t-space>
+    </div>
     <SearchForm :fields="fields" :params="params">
       <template #supplier="{ item, params }">
         <select-supplier
@@ -24,34 +58,6 @@
       </template>
     </SearchForm>
     <div class="flex-1 page-wrap">
-      <t-space size="small">
-        <t-button theme="success" @click="handleAdd">新增设备</t-button>
-        <t-button
-          theme="danger"
-          :disabled="!selectedRowKeys.length"
-          @click="handleDestroy"
-          >批量作废</t-button
-        >
-        <t-button
-          theme="success"
-          :disabled="!selectedRowKeys.length"
-          @click="handleEable(selectedRowKeys, true)"
-          >批量启用</t-button
-        >
-        <t-button
-          theme="danger"
-          :disabled="!selectedRowKeys.length"
-          @click="handleEable(selectedRowKeys, false)"
-          >批量禁用</t-button
-        >
-        <upload-button
-          upload-url="/api/sys/device/import"
-          :button-props="{
-            content: '批量导入',
-            theme: 'success',
-          }"
-        ></upload-button>
-      </t-space>
       <t-table
         size="small"
         row-key="id"
@@ -261,20 +267,18 @@ const columns = [
   { colKey: 'serialNo', title: '序列号' },
   { colKey: 'brand', title: '品牌' },
   { colKey: 'model', title: '型号' },
-  { colKey: 'buyTime', title: '购买时间', cell: 'buy-time', width: 170 },
-  { colKey: 'supplier', title: '设备供应商' },
-  { colKey: 'status', title: '运行状态', cell: 'status', width: 80 },
-  { colKey: 'location', title: '当前所在地' },
-  { colKey: 'scanCount', title: '总扫描量', width: 80 },
-  { colKey: 'bound', title: '出库/入库', width: 100 },
-  { colKey: 'enable', title: '启用/禁用', width: 100 },
+  { colKey: 'buyTime', title: '购买时间', cell: 'buy-time', width: 180 },
+  { colKey: 'supplier', title: '设备供应商', width: 140 },
+  { colKey: 'status', title: '运行状态', cell: 'status', width: 100 },
+  { colKey: 'location', title: '当前所在地', width: 140 },
+  { colKey: 'scanCount', title: '总扫描量', width: 100 },
+  { colKey: 'bound', title: '出库/入库', width: 120 },
+  { colKey: 'enable', title: '启用/禁用', width: 120 },
   {
     title: '管理',
     colKey: 'operate',
     fixed: 'right',
     width: 120,
-    align: 'center',
-    cell: 'operate',
   },
 ];
 const {

src/views/system/config-manage/service-level-manage/index.vue

@@ -1,9 +1,12 @@
 <template>
-  <div class="registration-query flex flex-col h-full">
+  <div class="flex flex-col h-full">
+    <div class="page-action page-header">
+      <t-button theme="primary" @click="handleAdd">
+        <template #icon><svg-icon name="add-circle" color="#fff" /></template
+        >新增服务档位
+      </t-button>
+    </div>
     <div class="flex-1 page-wrap">
-      <div class="btn-group">
-        <t-button theme="success" @click="handleAdd">新增</t-button>
-      </div>
       <t-table
         size="small"
         row-key="id"
@@ -66,19 +69,22 @@ const showEditServiceLevelDialog = ref(false);
 const curRow = ref(null);
 
 const columns = [
-  { colKey: 'level', title: '服务档位名称' },
+  { colKey: 'level', title: '服务档位名称', minWidth: 140 },
   { colKey: 'type', title: '业务类型', width: 100 },
-  { colKey: 'roleList', title: '项目角色配置', cell: 'role-list' },
-  { colKey: 'devices', title: '设备配置（台）', width: 120 },
-  { colKey: 'createName', title: '创建人' },
+  {
+    colKey: 'roleList',
+    title: '项目角色配置',
+    cell: 'role-list',
+    minWidth: 200,
+  },
+  { colKey: 'devices', title: '设备配置（台）', width: 140 },
+  { colKey: 'createName', title: '创建人', width: 120 },
   { colKey: 'createTime', title: '创建时间', width: 180, cell: 'create-time' },
   {
     title: '管理',
     colKey: 'operate',
     fixed: 'right',
     width: 120,
-    align: 'center',
-    cell: 'operate',
   },
 ];
 const {
@@ -103,6 +109,7 @@ const handleDelete = (row) => {
     body: `确定要删除当前记录吗`,
     confirmBtn: '确定',
     cancelBtn: '取消',
+    theme: 'warning',
     onConfirm: async () => {
       confirmDia.hide();
       const res = await serviceLevelDeleteApi(row.id).catch(() => {});

src/views/system/config-manage/supplier-manage/index.vue

@@ -1,9 +1,12 @@
 <template>
-  <div class="registration-query flex flex-col h-full">
+  <div class="flex flex-col h-full">
+    <div class="page-action page-header">
+      <t-button theme="primary" @click="handleAdd">
+        <template #icon><svg-icon name="add-circle" color="#fff" /></template
+        >新增供应商
+      </t-button>
+    </div>
     <div class="flex-1 page-wrap">
-      <div class="btn-group">
-        <t-button theme="success" @click="handleAdd">新增</t-button>
-      </div>
       <t-table
         size="small"
         row-key="id"
@@ -65,16 +68,14 @@ const curRow = ref(null);
 const columns = [
   { colKey: 'code', title: '供应商编号' },
   { colKey: 'name', title: '供应商名称' },
-  { colKey: 'type', title: '类型', cell: 'type' },
+  { colKey: 'type', title: '类型', cell: 'type', width: 120 },
   { colKey: 'remark', title: '备注' },
-  { colKey: 'enable', title: '启用/禁用', cell: 'enable', width: 80 },
+  { colKey: 'enable', title: '启用/禁用', cell: 'enable', width: 120 },
   {
     title: '管理',
     colKey: 'operate',
     fixed: 'right',
-    width: 100,
-    align: 'center',
-    cell: 'operate',
+    width: 120,
   },
 ];
 const {

src/views/system/notice-log/log-manage/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="registration-query flex flex-col h-full">
+    <div class="flex flex-col h-full">
       <SearchForm :fields="fields" :params="params"></SearchForm>
       <div class="flex-1 page-wrap">
         <t-table
@@ -81,7 +81,7 @@ const computedParams = computed(() => {
 });
 
 const columns = [
-  { colKey: 'createTime', title: '时间', cell: 'create-time', width: 170 },
+  { colKey: 'createTime', title: '时间', cell: 'create-time', width: 180 },
   { colKey: 'content', title: '内容' },
 ];
 const {

src/views/system/notice-log/notice-manage/index.vue

@@ -1,16 +1,21 @@
 <template>
-  <div class="registration-query flex flex-col h-full">
+  <div class="flex flex-col h-full">
+    <div class="page-action">
+      <t-button theme="primary" @click="handleAdd">
+        <template #icon><svg-icon name="add-circle" color="#fff" /></template
+        >新增通知
+      </t-button>
+      <t-button
+        variant="outline"
+        :disabled="!selectedRowKeys.length"
+        @click="handleDestroy"
+      >
+        <template #icon><svg-icon name="delete" color="#262626" /></template>
+        作废</t-button
+      >
+    </div>
     <SearchForm :fields="fields" :params="params"></SearchForm>
     <div class="flex-1 page-wrap">
-      <div class="btn-group">
-        <t-button theme="success" @click="handleAdd">新增</t-button>
-        <t-button
-          theme="danger"
-          :disabled="!selectedRowKeys.length"
-          @click="handleDestroy"
-          >作废</t-button
-        >
-      </div>
       <t-table
         size="small"
         row-key="id"
@@ -194,14 +199,12 @@ const columns = [
   { colKey: 'row-select', type: 'multiple', width: 50 },
   { colKey: 'type', title: '类型', cell: 'type', width: 120 },
   { colKey: 'title', title: '消息名称', cell: 'name' },
-  { colKey: 'status', title: '发布状态', cell: 'status', width: 100 },
+  { colKey: 'status', title: '发布状态', cell: 'status', width: 120 },
   {
     title: '管理',
     colKey: 'operate',
     fixed: 'right',
     width: 160,
-    align: 'center',
-    cell: 'operate',
   },
 ];
 const {
@@ -237,6 +240,7 @@ const handleDestroy = () => {
     body: `确定要作废当前选择的所有记录吗`,
     confirmBtn: '确定',
     cancelBtn: '取消',
+    theme: 'warning',
     onConfirm: async () => {
       confirmDia.hide();
       const res = await noticeDestroyApi(selectedRowKeys.value).catch(() => {});
@@ -252,6 +256,7 @@ const handleCancelPublish = (row) => {
     body: `您确定要撤销发布该通知公告吗？一旦撤销发布，该通知公告信息的回执将会被清空，重新发布后该通知公告将作为新消息发布。`,
     confirmBtn: '确定',
     cancelBtn: '取消',
+    theme: 'warning',
     onConfirm: async () => {
       confirmDia.hide();
       const res = await noticeCancelPublishApi(row.id).catch(() => {});
@@ -275,6 +280,7 @@ const handlePublish = (row) => {
     body: `您确定要发布该通知公告吗？`,
     confirmBtn: '确定',
     cancelBtn: '取消',
+    theme: 'warning',
     onConfirm: async () => {
       confirmDia.hide();
       const res = await noticePublishApi(row.id).catch(() => {});

src/views/system/task/task-manage/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="registration-query flex flex-col h-full">
+  <div class="flex flex-col h-full">
     <SearchForm :fields="fields" :params="params"></SearchForm>
     <div class="flex-1 page-wrap">
       <t-table
@@ -127,9 +127,9 @@ const params = reactive({
 const columns = [
   { colKey: 'type', title: '任务类型' },
   { colKey: 'status', title: '任务状态', width: 100 },
-  { colKey: 'result', title: '任务结果', width: 80 },
+  { colKey: 'result', title: '任务结果', width: 100 },
   { colKey: 'createName', title: '创建人' },
-  { colKey: 'createTime', title: '创建时间', cell: 'create-time', width: 170 },
+  { colKey: 'createTime', title: '创建时间', cell: 'create-time', width: 180 },
   {
     title: '管理',
     colKey: 'operate',