简柏林 / thingskit-front · Commits

Commit 81eba1ad8cd5f7865d4e1bddc1ccb82047275fca

Authored by sqy
1 parent 8cef03a8

fix(front):'优化代码'

Inline Side-by-side
Showing 6 changed files with 102 additions and 84 deletions
@@ -6,7 +6,7 @@ VITE_PUBLIC_PATH = / @@ -6,7 +6,7 @@ VITE_PUBLIC_PATH = /
6 6
7 # Cross-domain proxy, you can configure multiple 7 # Cross-domain proxy, you can configure multiple
8 # Please note that no line breaks 8 # Please note that no line breaks
9 -VITE_PROXY = [["/api","http://192.168.10.122:8082/api"],["/upload","http://192.168.10.122:3300/upload"]] 9 +VITE_PROXY = [["/api","http://192.168.10.129:8082/api"],["/upload","http://192.168.10.122:3300/upload"]]
10 # VITE_PROXY=[["/api","https://vvbin.cn/test"]] 10 # VITE_PROXY=[["/api","https://vvbin.cn/test"]]
11 11
12 # Delete console 12 # Delete console
@@ -27,5 +27,4 @@ const repeatDirective: Directive = { @@ -27,5 +27,4 @@ const repeatDirective: Directive = {
27 }); 27 });
28 }, 28 },
29 }; 29 };
30 -  
31 export default repeatDirective; 30 export default repeatDirective;
  1 +export const copyTransFun = (arr: any[]) => {
  2 + arr.forEach((item) => {
  3 + if (item.name) {
  4 + item.label = item.name;
  5 + delete item.name;
  6 + }
  7 + if (item.id) {
  8 + item.value = item.id;
  9 + delete item.id;
  10 + }
  11 + if (item.children) {
  12 + if (item.children.length) {
  13 + copyTransFun(item.children);
  14 + }
  15 + }
  16 + });
  17 +};
@@ -19,7 +19,12 @@ @@ -19,7 +19,12 @@
19 </RadioGroup> 19 </RadioGroup>
20 <div class="scroll-wrap"> 20 <div class="scroll-wrap">
21 <ScrollContainer ref="scrollRef"> 21 <ScrollContainer ref="scrollRef">
22 - <template v-for="item in 10" :key="item"> 22 + <template
  23 + v-for="(item, index) in 10"
  24 + :key="index"
  25 + :class="{ active: currentIndex == index }"
  26 + @click="bander(index)"
  27 + >
23 <div class="flex" style="border-bottom: 1px solid #ccc"> 28 <div class="flex" style="border-bottom: 1px solid #ccc">
24 <div> 29 <div>
25 <div class="flex"> 30 <div class="flex">
@@ -91,10 +96,13 @@ @@ -91,10 +96,13 @@
91 onMounted(() => { 96 onMounted(() => {
92 initMap(); 97 initMap();
93 }); 98 });
94 -  
95 const deviceValue = ref(''); 99 const deviceValue = ref('');
96 const deviceStatus = ref(1); 100 const deviceStatus = ref(1);
97 const current = ref(2); 101 const current = ref(2);
  102 + const currentIndex = ref(1);
  103 + const bander = (index: number) => {
  104 + currentIndex.value = index;
  105 + };
98 const [registerForm] = useForm({ 106 const [registerForm] = useForm({
99 labelWidth: 90, 107 labelWidth: 90,
100 schemas: formSchema, 108 schemas: formSchema,
@@ -103,7 +111,17 @@ @@ -103,7 +111,17 @@
103 const handleReset = () => { 111 const handleReset = () => {
104 deviceValue.value = ''; 112 deviceValue.value = '';
105 }; 113 };
106 - return { wrapRef, registerForm, deviceValue, deviceStatus, handleReset, scrollRef, current }; 114 + return {
  115 + wrapRef,
  116 + registerForm,
  117 + deviceValue,
  118 + deviceStatus,
  119 + handleReset,
  120 + scrollRef,
  121 + current,
  122 + currentIndex,
  123 + bander,
  124 + };
107 }, 125 },
108 }); 126 });
109 </script> 127 </script>
@@ -112,6 +130,9 @@ @@ -112,6 +130,9 @@
112 .wrapper { 130 .wrapper {
113 position: relative; 131 position: relative;
114 } 132 }
  133 + .active {
  134 + background-color: #fff;
  135 + }
115 .right-wrap { 136 .right-wrap {
116 padding-top: 10px; 137 padding-top: 10px;
117 width: 20%; 138 width: 20%;
1 import { BasicColumn } from '/@/components/Table'; 1 import { BasicColumn } from '/@/components/Table';
2 import { FormSchema } from '/@/components/Table'; 2 import { FormSchema } from '/@/components/Table';
3 import { getOrganizationList } from '/@/api/system/system'; 3 import { getOrganizationList } from '/@/api/system/system';
  4 +import { copyTransFun } from '/@/utils/fnUtils';
4 // 表格列数据 5 // 表格列数据
5 export const columns: BasicColumn[] = [ 6 export const columns: BasicColumn[] = [
6 { 7 {
@@ -81,24 +82,6 @@ export const formSchema: FormSchema[] = [ @@ -81,24 +82,6 @@ export const formSchema: FormSchema[] = [
81 componentProps: { 82 componentProps: {
82 api: async () => { 83 api: async () => {
83 const data = await getOrganizationList(); 84 const data = await getOrganizationList();
84 -  
85 - const copyTransFun = (arr: any[]) => {  
86 - arr.forEach((item) => {  
87 - if (item.name) {  
88 - item.label = item.name;  
89 - delete item.name;  
90 - }  
91 - if (item.id) {  
92 - item.value = item.id;  
93 - delete item.id;  
94 - }  
95 - if (item.children) {  
96 - if (item.children.length) {  
97 - copyTransFun(item.children);  
98 - }  
99 - }  
100 - });  
101 - };  
102 copyTransFun(data as any as any[]); 85 copyTransFun(data as any as any[]);
103 return data; 86 return data;
104 }, 87 },
1 <template> 1 <template>
2 <PageWrapper dense contentFullHeight fixedHeight contentClass="flex"> 2 <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
3 <OrganizationIdTree class="w-1/4 xl:w-1/5" @select="handleSelect" /> 3 <OrganizationIdTree class="w-1/4 xl:w-1/5" @select="handleSelect" />
4 - <BasicTable  
5 - @register="registerTable"  
6 - :searchInfo="searchInfo"  
7 - class="w-3/4 xl:w-4/5"  
8 - :rowSelection="{  
9 - onChange: onSelectChange,  
10 - type: 'checkbox',  
11 - }"  
12 - rowKey="id"  
13 - > 4 + <BasicTable @register="registerTable" :searchInfo="searchInfo" class="w-3/4 xl:w-4/5">
14 <template #toolbar> 5 <template #toolbar>
15 - <a-button type="primary" @click="handleCreate"> 新增联系人 </a-button> 6 + <a-button type="primary" @click="handleCreateOrEdit"> 新增联系人 </a-button>
16 <a-button 7 <a-button
17 type="primary" 8 type="primary"
18 color="error" 9 color="error"
19 - @click="handleBatchDelete" 10 + @click="handleDeleteOrBatchDelete"
20 :disabled="hasBatchDelete" 11 :disabled="hasBatchDelete"
21 > 12 >
22 批量删除 13 批量删除
@@ -28,7 +19,7 @@ @@ -28,7 +19,7 @@
28 { 19 {
29 label: '编辑', 20 label: '编辑',
30 icon: 'clarity:note-edit-line', 21 icon: 'clarity:note-edit-line',
31 - onClick: handleEdit.bind(null, record), 22 + onClick: handleCreateOrEdit.bind(null, record),
32 }, 23 },
33 { 24 {
34 label: '删除', 25 label: '删除',
@@ -36,7 +27,7 @@ @@ -36,7 +27,7 @@
36 color: 'error', 27 color: 'error',
37 popConfirm: { 28 popConfirm: {
38 title: '是否确认删除', 29 title: '是否确认删除',
39 - confirm: handleDelete.bind(null, record), 30 + confirm: handleDeleteOrBatchDelete.bind(null, record),
40 }, 31 },
41 }, 32 },
42 ]" 33 ]"
@@ -55,6 +46,7 @@ @@ -55,6 +46,7 @@
55 import { useDrawer } from '/@/components/Drawer'; 46 import { useDrawer } from '/@/components/Drawer';
56 import ContactDrawer from './ContactDrawer.vue'; 47 import ContactDrawer from './ContactDrawer.vue';
57 import OrganizationIdTree from '../../common/OrganizationIdTree.vue'; 48 import OrganizationIdTree from '../../common/OrganizationIdTree.vue';
  49 + import { Modal } from 'ant-design-vue';
58 import { getAlarmContact, deleteAlarmContact } from '/@/api/alarm/contact/alarmContact'; 50 import { getAlarmContact, deleteAlarmContact } from '/@/api/alarm/contact/alarmContact';
59 import { searchFormSchema, columns } from './config.data'; 51 import { searchFormSchema, columns } from './config.data';
60 export default defineComponent({ 52 export default defineComponent({
@@ -68,6 +60,11 @@ @@ -68,6 +60,11 @@
68 setup() { 60 setup() {
69 let selectedRowIds = ref<string[]>([]); 61 let selectedRowIds = ref<string[]>([]);
70 const hasBatchDelete = computed(() => selectedRowIds.value.length <= 0); 62 const hasBatchDelete = computed(() => selectedRowIds.value.length <= 0);
  63 + // 复选框事件
  64 + const onSelectRowChange = (selectedRowKeys: string[]) => {
  65 + selectedRowIds.value = selectedRowKeys;
  66 + };
  67 + // 表格hooks
71 const [registerTable, { reload }] = useTable({ 68 const [registerTable, { reload }] = useTable({
72 api: getAlarmContact, 69 api: getAlarmContact,
73 columns, 70 columns,
@@ -78,7 +75,11 @@ @@ -78,7 +75,11 @@
78 useSearchForm: true, 75 useSearchForm: true,
79 showTableSetting: true, 76 showTableSetting: true,
80 bordered: true, 77 bordered: true,
81 - showIndexColumn: false, 78 + rowSelection: {
  79 + onChange: onSelectRowChange,
  80 + type: 'checkbox',
  81 + },
  82 + rowKey: 'id',
82 actionColumn: { 83 actionColumn: {
83 width: 180, 84 width: 180,
84 title: '操作', 85 title: '操作',
@@ -87,69 +88,66 @@ @@ -87,69 +88,66 @@
87 fixed: 'right', 88 fixed: 'right',
88 }, 89 },
89 }); 90 });
  91 + // 弹框
90 const [registerDrawer, { openDrawer }] = useDrawer(); 92 const [registerDrawer, { openDrawer }] = useDrawer();
91 const { createMessage } = useMessage(); 93 const { createMessage } = useMessage();
92 const searchInfo = reactive<Recordable>({}); 94 const searchInfo = reactive<Recordable>({});
93 - // 新增  
94 - const handleCreate = () => {  
95 - openDrawer(true, {  
96 - isUpdate: false,  
97 - });  
98 - };  
99 - // 编辑  
100 - const handleEdit = (record: Recordable) => {  
101 - openDrawer(true, {  
102 - isUpdate: true,  
103 - record,  
104 - });  
105 - };  
106 - // 删除  
107 - const handleDelete = async (record: Recordable) => {  
108 - let ids: string[] = [record.id];  
109 - try {  
110 - await deleteAlarmContact(ids);  
111 - createMessage.success('删除联系人成功');  
112 - handleSuccess();  
113 - } catch (e) {  
114 - createMessage.error('删除失败');  
115 - }  
116 - };  
117 - // 批量删除  
118 - const handleBatchDelete = async () => {  
119 - try {  
120 - await deleteAlarmContact(selectedRowIds.value);  
121 - createMessage.success('批量删除联系人成功');  
122 - handleSuccess();  
123 - } catch (e) {  
124 - createMessage.error('删除失败');  
125 - }  
126 - };  
127 // 刷新 95 // 刷新
128 const handleSuccess = () => { 96 const handleSuccess = () => {
129 reload(); 97 reload();
130 }; 98 };
131 - // 复选框事件  
132 - const onSelectChange = (selectedRowKeys: string[]) => {  
133 - selectedRowIds.value = selectedRowKeys; 99 + // 新增或编辑
  100 + const handleCreateOrEdit = (record: Recordable) => {
  101 + if (record) {
  102 + openDrawer(true, {
  103 + isUpdate: true,
  104 + record,
  105 + });
  106 + } else {
  107 + openDrawer(true, {
  108 + isUpdate: false,
  109 + });
  110 + }
134 }; 111 };
135 - const handleSelect = (organizationId = '') => { 112 + // 删除或批量删除
  113 + const handleDeleteOrBatchDelete = async (record?: Recordable) => {
  114 + if (record) {
  115 + try {
  116 + await deleteAlarmContact([record.id]);
  117 + createMessage.success('删除联系人成功');
  118 + handleSuccess();
  119 + } catch (e) {
  120 + createMessage.error('删除失败');
  121 + }
  122 + } else {
  123 + try {
  124 + await Modal.confirm({
  125 + title: '警告',
  126 + content: '是否删除勾选的信息?',
  127 + });
  128 + await deleteAlarmContact(selectedRowIds.value);
  129 + createMessage.success('批量删除联系人成功');
  130 + handleSuccess();
  131 + } catch (e) {
  132 + createMessage.info('取消删除');
  133 + }
  134 + }
  135 + };
  136 +
  137 + // 树形选择器
  138 + const handleSelect = (organizationId: string) => {
136 searchInfo.organizationId = organizationId; 139 searchInfo.organizationId = organizationId;
137 - console.log(organizationId);  
138 - reload(); 140 + handleSuccess();
139 }; 141 };
140 return { 142 return {
141 searchInfo, 143 searchInfo,
142 hasBatchDelete, 144 hasBatchDelete,
143 - onSelectChange,  
144 - handleBatchDelete,  
145 - handleEdit,  
146 - handleCreate,  
147 - handleDelete, 145 + handleCreateOrEdit,
  146 + handleDeleteOrBatchDelete,
148 handleSelect, 147 handleSelect,
149 handleSuccess, 148 handleSuccess,
150 registerTable, 149 registerTable,
151 registerDrawer, 150 registerDrawer,
152 - reload,  
153 }; 151 };
154 }, 152 },
155 }); 153 });