|
|
@@ -0,0 +1,169 @@
|
|
|
+<template>
|
|
|
+ <!-- <a-drawer title="新增工具" :visible="true" :width="540" :body-style="{ paddingBottom: '80px' }"
|
|
|
+ :footer-style="{ textAlign: 'right' }" @close="onClose"> -->
|
|
|
+ <BasicModal v-bind="$attrs" showFooter title="新增工具" width="50%" :maskClosable="false" :showOkBtn="false" :showCancelBtn="false">
|
|
|
+ <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> -->
|
|
|
+ </BasicModal>
|
|
|
+</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';
|
|
|
+ import { BasicModal } from '/@/components/Modal';
|
|
|
+
|
|
|
+const props = {
|
|
|
+}
|
|
|
+export default defineComponent({
|
|
|
+ name: 'ToolsDrawer',
|
|
|
+ components: { BasicModal },
|
|
|
+ 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: 3 },
|
|
|
+ wrapperCol: { span: 20 },
|
|
|
+ onClose,
|
|
|
+ onSubmit,
|
|
|
+ resetForm
|
|
|
+ };
|
|
|
+ },
|
|
|
+});
|
|
|
+</script>
|
XiaXxxxxx