0919xx

src/api/sys/mapTools.ts

@@ -5,8 +5,44 @@ enum Api {
     GetLayer2d = '/xld-2And3/findAllLayer2d',
     GetLayer3d = '/xld-2And3/findAllLayer3d',
     GetMenu = '/xld-2And3/findAllMenu',
+    AddTools = '/xld-2And3/addTool',
+    RemoveTool = '/xld-2And3/removeTool',
 }
 const locationType = { mapToolsUrl: true };
+/**
+ * @description: 新增地图工具
+ */
+export const addTools = (params) => {
+    return new Promise<void>((resolve) => {
+        defHttp.post({ 
+            ...locationType, 
+            url: Api.AddTools, 
+            data:{
+                data:JSON.stringify(params)
+            }
+         }).then((res) => {
+            resolve(res)
+        })
+    })
+};
+/**
+ * @description: 删除地图工具
+ */
+export const delTools = (params) => {
+    return new Promise<void>((resolve) => {
+        defHttp.post({ 
+            ...locationType, 
+            url: Api.RemoveTool, 
+            params:params
+         },
+         {
+            joinParamsToUrl:true
+         }
+         ).then((res) => {
+            resolve(res)
+        })
+    })
+};
 /**
  * @description: 获取所有地图工具
  */

src/views/systemAdmin/system/mapTools/tools/ToolsDrawer.vue

@@ -0,0 +1,166 @@
+<template>
+    <a-drawer title="新增工具" :visible="true" :width="540" :body-style="{ paddingBottom: '80px' }"
+        :footer-style="{ textAlign: 'right' }" @close="onClose">
+        <a-form ref="formRef" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
+            <a-form-item label="分组名称" name="group">
+                <a-input v-model:value="form.group" style="width: 100%" placeholder="请输入分组名称" />
+            </a-form-item>
+            <a-form-item label="工具标题" name="label">
+                <a-input v-model:value="form.label" style="width: 100%" placeholder="请输入标题" />
+            </a-form-item>
+            <a-form-item label="提示文字" name="tip">
+                <a-input v-model:value="form.tip" style="width: 100%" placeholder="请输入提示文字" />
+            </a-form-item>
+            <a-form-item label="是否启用" name="show" :label-col="{span:6}" :wrapper-col="{span:6}">
+                <a-radio-group v-model:value="form.show" button-style="solid">
+                    <a-radio-button value="1">是</a-radio-button>
+                    <a-radio-button value="0">否</a-radio-button>
+                </a-radio-group>
+            </a-form-item>
+            <a-form-item label="快捷定位" name="isQuick" :label-col="{span:6}" :wrapper-col="{span:6}">
+                <a-radio-group v-model:value="form.isQuick" button-style="solid">
+                    <a-radio-button value="1">是</a-radio-button>
+                    <a-radio-button value="0">否</a-radio-button>
+                </a-radio-group>
+            </a-form-item>
+            <a-form-item label="工具配置" name="option">
+                <a-textarea v-model:value="form.option" :rows="3" />
+            </a-form-item>
+            <a-form-item label="工具图标" name="icon">
+                <a-input v-model:value="form.icon" style="width: 100%" placeholder="请输入图标标识" />
+            </a-form-item>
+            <a-form-item label="工具功能" name="action">
+                <a-input v-model:value="form.action" style="width: 100%" placeholder="请输入工具功能" />
+            </a-form-item>
+            <a-form-item label="工具排序" name="idx">
+                <a-input v-model:value="form.idx" style="width: 100%" placeholder="请输入工具排序" />
+            </a-form-item>
+        </a-form>
+        <div :style="{
+            position: 'absolute',
+            right: 0,
+            bottom: 0,
+            width: '100%',
+            borderTop: '1px solid #e9e9e9',
+            padding: '10px 16px',
+            background: '#fff',
+            textAlign: 'right',
+            zIndex: 1,
+        }">
+            <a-button style="margin-right: 8px" @click="onClose">取消</a-button>
+            <a-button type="primary" @click="onSubmit">确定</a-button>
+        </div>
+    </a-drawer>
+</template>
+<script>
+import { defineComponent, reactive, ref, onMounted, watch } from 'vue';
+import { message } from 'ant-design-vue';
+import { getAllTagsType, generateCodeByName, addTag, updateTag, checkTagCode } from '/@/api/sys/tag';
+import { session } from '/@/utils/Memory';
+import { addTools } from '/@/api/sys/mapTools';
+import { v4 as uuidv4 } from 'uuid';
+
+const props = {
+}
+export default defineComponent({
+    name: 'ToolsDrawer',
+    components: {},
+    props,
+    setup(props, { emit }) {
+        const form = reactive({
+            group: "",
+            show: '1',
+            isQuick: '1',
+            label: "",
+            option: "{\n\n}",
+            idx: "",
+            id: "",
+            tip: "",
+            icon: "",
+            action: ""
+        });
+        const rules = {
+            group: [{
+                required: true,
+                message: '请输入分组名称',
+                trigger: 'blur'
+            }],
+            label: [{
+                required: true,
+                message: '请输入工具标题',
+                trigger: 'blur'
+            }],
+            idx: [{
+                required: true,
+                message: '请输入工具排序',
+                trigger: 'blur'
+            }],
+            tip: [{
+                required: true,
+                message: '请输入提示文字',
+                trigger: 'blur'
+            }],
+            icon: [{
+                required: true,
+                message: '请选择工具图标',
+                trigger: 'blur'
+            }],
+            action: [{
+                required: true,
+                message: '请输入工具功能',
+                trigger: 'blur'
+            }]
+        };
+        const formRef = ref()
+
+        // 关闭弹窗
+        const onClose = () => {
+            emit('closeDialog')
+            resetForm()
+        };
+        // 提交信息
+        const onSubmit = () => {
+            formRef.value.validate().then(() => {
+                //在这里新增，新增之前处理一下form后再传
+                let params = {
+                    group: form.group,
+                    show: form.show === '0' ? false : true,
+                    isQuick: form.isQuick === '0' ? false : true,
+                    label: form.label,
+                    option: JSON.parse(form.option),
+                    idx: parseInt(form.idx),
+                    id: uuidv4(),
+                    tip: form.tip,
+                    icon: form.icon,
+                    action: form.action
+                }
+                addTools(params).then(res => {
+                    if(res.code===200 && res.data?.insertedId){
+                        message.success('新增成功')
+                        emit('onSubmit')
+                        onClose();
+                    }else{
+                        message.error('新增失败')
+                    }
+                })
+            }).catch((error) => {
+                console.log('error', error);
+            });
+        };
+        // 重置表单
+        const resetForm = () => {
+            formRef.value.resetFields();
+        };
+        return {
+            form,
+            rules,
+            formRef,
+            labelCol: { span: 6 },
+            wrapperCol: { span: 18 },
+            onClose,
+            onSubmit,
+            resetForm
+        };
+    },
+});
+</script>

src/views/systemAdmin/system/mapTools/tools/index.vue

@@ -3,7 +3,7 @@
         <div class="tools-body">
             <BasicTable @register="registerTable">
                 <template #toolbar>
-                    <Button type="primary" @click="openDialog(null)">
+                    <Button type="primary" @click="handleAdd">
                         新增工具
                     </Button>
                     <Button type="primary" danger :disabled="hasSelected" @click="handleBatchDelete">
@@ -29,32 +29,32 @@
                             tooltip: '删除',
                             icon: 'ant-design:delete-outlined',
                             color: 'error',
-                            popConfirm: {
-                                title: '确定删除该数据吗?',
-                                confirm: handleDelete.bind(null, record),
-                            },
+                            onClick: handleDelete.bind(null, record)
                         },
                     ]" />
                 </template>
             </BasicTable>
         </div>
+        <ToolsDrawer v-if="ifShowDialog" @closeDialog="ifShowDialog = false" @onSubmit="onSubmit">
+        </ToolsDrawer>
     </div>
 </template>
 
 <script>
-import { defineComponent, onMounted, watch, ref, reactive, toRefs, computed } from 'vue';
+import { defineComponent, onMounted, watch, ref, reactive, toRefs, computed, createVNode } from 'vue';
 // 导入表格组件，表格事件
 import { BasicTable, useTable, TableAction } from '/@/components/Table';
 import { Button } from 'ant-design-vue';
-
+import ToolsDrawer from './ToolsDrawer.vue';
 import { message, Modal } from 'ant-design-vue';
 import moment from 'moment'
 import { session } from '/@/utils/Memory';
-import { getAllTools } from '/@/api/sys/mapTools';
+import { getAllTools, addTools, delTools } from '/@/api/sys/mapTools';
 import { useSyncConfirm } from '/@/hooks/component/useSyncConfirm';
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
 
 export default defineComponent({
-    components: { BasicTable, TableAction, Button },
+    components: { BasicTable, TableAction, Button, ToolsDrawer, ExclamationCircleOutlined },
     name: "tools",
     setup() {
         const columns = [
@@ -98,8 +98,32 @@ export default defineComponent({
         const handleEdit = () => {
 
         }
-        const handleDelete = () => {
-
+        const handleDelete = (record) => {
+            Modal.confirm({
+                title: '删除提示',
+                icon: createVNode(ExclamationCircleOutlined),
+                content: '确定删除该工具？',
+                centered: true,
+                okText: '确定',
+                okType: 'danger',
+                cancelText: '取消',
+                onOk: (() => {
+                    let param = {
+                        id:record.id
+                    }
+                    delTools(param).then(res => {
+                        message.success('操作成功');
+                        reload();
+                    })
+                })
+            });
+        }
+        const ifShowDialog = ref(false)
+        const handleAdd = () => {
+            ifShowDialog.value = true
+        }
+        const onSubmit = () => {
+            reload();
         }
         const { createSyncConfirm } = useSyncConfirm();
         const handleBatchDelete = async () => {
@@ -161,6 +185,7 @@ export default defineComponent({
         });
         return {
             hasSelected,
+            ifShowDialog,
             registerTable,
             reload,
             getRowSelection,
@@ -168,7 +193,9 @@ export default defineComponent({
             setSelectedRowKeys,
             handleEdit,
             handleDelete,
-            handleBatchDelete
+            handleBatchDelete,
+            handleAdd,
+            onSubmit
         }
     }
 })