简柏林 / 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 6
7 7 # Cross-domain proxy, you can configure multiple
8 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 10 # VITE_PROXY=[["/api","https://vvbin.cn/test"]]
11 11
12 12 # Delete console
... ...
... ... @@ -27,5 +27,4 @@ const repeatDirective: Directive = {
27 27 });
28 28 },
29 29 };
30   -
31 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 19 </RadioGroup>
20 20 <div class="scroll-wrap">
21 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 28 <div class="flex" style="border-bottom: 1px solid #ccc">
24 29 <div>
25 30 <div class="flex">
... ... @@ -91,10 +96,13 @@
91 96 onMounted(() => {
92 97 initMap();
93 98 });
94   -
95 99 const deviceValue = ref('');
96 100 const deviceStatus = ref(1);
97 101 const current = ref(2);
  102 + const currentIndex = ref(1);
  103 + const bander = (index: number) => {
  104 + currentIndex.value = index;
  105 + };
98 106 const [registerForm] = useForm({
99 107 labelWidth: 90,
100 108 schemas: formSchema,
... ... @@ -103,7 +111,17 @@
103 111 const handleReset = () => {
104 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 127 </script>
... ... @@ -112,6 +130,9 @@
112 130 .wrapper {
113 131 position: relative;
114 132 }
  133 + .active {
  134 + background-color: #fff;
  135 + }
115 136 .right-wrap {
116 137 padding-top: 10px;
117 138 width: 20%;
... ...
1 1 import { BasicColumn } from '/@/components/Table';
2 2 import { FormSchema } from '/@/components/Table';
3 3 import { getOrganizationList } from '/@/api/system/system';
  4 +import { copyTransFun } from '/@/utils/fnUtils';
4 5 // 表格列数据
5 6 export const columns: BasicColumn[] = [
6 7 {
... ... @@ -81,24 +82,6 @@ export const formSchema: FormSchema[] = [
81 82 componentProps: {
82 83 api: async () => {
83 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 85 copyTransFun(data as any as any[]);
103 86 return data;
104 87 },
... ...
1 1 <template>
2 2 <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
3 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 5 <template #toolbar>
15   - <a-button type="primary" @click="handleCreate"> 新增联系人 </a-button>
  6 + <a-button type="primary" @click="handleCreateOrEdit"> 新增联系人 </a-button>
16 7 <a-button
17 8 type="primary"
18 9 color="error"
19   - @click="handleBatchDelete"
  10 + @click="handleDeleteOrBatchDelete"
20 11 :disabled="hasBatchDelete"
21 12 >
22 13 批量删除
... ... @@ -28,7 +19,7 @@
28 19 {
29 20 label: '编辑',
30 21 icon: 'clarity:note-edit-line',
31   - onClick: handleEdit.bind(null, record),
  22 + onClick: handleCreateOrEdit.bind(null, record),
32 23 },
33 24 {
34 25 label: '删除',
... ... @@ -36,7 +27,7 @@
36 27 color: 'error',
37 28 popConfirm: {
38 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 46 import { useDrawer } from '/@/components/Drawer';
56 47 import ContactDrawer from './ContactDrawer.vue';
57 48 import OrganizationIdTree from '../../common/OrganizationIdTree.vue';
  49 + import { Modal } from 'ant-design-vue';
58 50 import { getAlarmContact, deleteAlarmContact } from '/@/api/alarm/contact/alarmContact';
59 51 import { searchFormSchema, columns } from './config.data';
60 52 export default defineComponent({
... ... @@ -68,6 +60,11 @@
68 60 setup() {
69 61 let selectedRowIds = ref<string[]>([]);
70 62 const hasBatchDelete = computed(() => selectedRowIds.value.length <= 0);
  63 + // 复选框事件
  64 + const onSelectRowChange = (selectedRowKeys: string[]) => {
  65 + selectedRowIds.value = selectedRowKeys;
  66 + };
  67 + // 表格hooks
71 68 const [registerTable, { reload }] = useTable({
72 69 api: getAlarmContact,
73 70 columns,
... ... @@ -78,7 +75,11 @@
78 75 useSearchForm: true,
79 76 showTableSetting: true,
80 77 bordered: true,
81   - showIndexColumn: false,
  78 + rowSelection: {
  79 + onChange: onSelectRowChange,
  80 + type: 'checkbox',
  81 + },
  82 + rowKey: 'id',
82 83 actionColumn: {
83 84 width: 180,
84 85 title: '操作',
... ... @@ -87,69 +88,66 @@
87 88 fixed: 'right',
88 89 },
89 90 });
  91 + // 弹框
90 92 const [registerDrawer, { openDrawer }] = useDrawer();
91 93 const { createMessage } = useMessage();
92 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 96 const handleSuccess = () => {
129 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 139 searchInfo.organizationId = organizationId;
137   - console.log(organizationId);
138   - reload();
  140 + handleSuccess();
139 141 };
140 142 return {
141 143 searchInfo,
142 144 hasBatchDelete,
143   - onSelectChange,
144   - handleBatchDelete,
145   - handleEdit,
146   - handleCreate,
147   - handleDelete,
  145 + handleCreateOrEdit,
  146 + handleDeleteOrBatchDelete,
148 147 handleSelect,
149 148 handleSuccess,
150 149 registerTable,
151 150 registerDrawer,
152   - reload,
153 151 };
154 152 },
155 153 });
... ...