bdms-vue-module-editor

页面地址配置

在【文件】>【首选项】>【设置】中输入:

bdmsVueModuleEditor.src

可配置设计器远程网页链接， 默认地址：http://localhost:3001/。

本插件是方便代码块加入开发文件内。支持 vue，typescript（'vue-property-decorator' 插件开发项目）

支持 组件、css、js 插入，需要本地设置好配置文件，将项目里可复用的代码块按照要求注册好。

打开要编辑的 vue 文件，右键选择 配置业务代码 ，会打开一个web配置页面，读取本地配置文件，用户只需上面操作要加入的代码块。默认指向本地开发好的配置页面：http://localhost:3001/。

特别说明：假如要插入组件（template内），请先将光标移到到要插入的位置（template），然后右键选择 配置业务代码，在打开的配置页里操作完毕后，会自动插入组件代码。

web项目示例下载地址：web示例下载

插入的代码没有格式化，请自行配置。比如使用 eslint，打开vscode设置，扩展 eslint 配置

{
  "editor.wordWrap": "on",
  "javascript.updateImportsOnFileMove.enabled": "always",
  "php.validate.executablePath": "",
  "workbench.iconTheme": "vscode-icons",
  "files.autoSave": "off",
  "typescript.updateImportsOnFileMove.enabled": "always",
  "files.eol": "\n",
  "editor.tabSize": 2,
  "editor.formatOnSave": false,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue",
    "typescript",
    "typescriptreact",
    "html"
  ],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "mssql.connections": [
    {
      "server": "{{put-server-name-here}}",
      "database": "{{put-database-name-here}}",
      "user": "{{put-username-here}}",
      "password": "{{put-password-here}}"
    }
  ],
  "vsicons.dontShowNewVersionMessage": true,
  "debug.javascript.suggestPrettyPrinting": false,
  "debug.onTaskErrors": "showErrors",
  "eslint.codeAction.disableRuleComment": {
    "enable": false
  }
}

用户可以自行开发这个页面，具体如下：

// index.js

import React from 'react';
import ReactDOM from 'react-dom';

import App from './App';

// 配置页面的应用入口文件，监听 message 事件

window.addEventListener('message', init, false);

function init(event) {
  if (event.data.cmd === 'mountApp') {
    ReactDOM.render(
      <React.StrictMode>
        <App localConfig={event.data.data}/>
      </React.StrictMode>,
      document.getElementById('root')
    );
  }
}

// App.js

import  { useState } from 'react';

import { Button, Select, Radio, message } from 'antd';

const { Option } = Select;


const utils = {
  // 通知 vscode插件 执行插入命令
  insertCode(type, data) {
    window.parent.postMessage({
      cmd: 'insertCode',
      type: type,
      code: {
        component: data
      }
    }, '*')
    message.info('设置完毕');
  },
  // 重新读取本地配置信息,例子没有做自动更新（）
  getLocalConfig() {
    window.parent.postMessage({
      cmd: 'getLocalConfig'
    }, '*')
    message.info('同步完毕');
  }
}

const typeArr = [
  {
    label: '组件模块',
    value: 'component'
  },
  {
    label: '方法块',
    value: 'js'
  },
  {
    label: '样式块',
    value: 'css'
  }
]


function App(props) {
  const { localConfig } = props;
  const { components } = localConfig;
  const [type, setType] = useState();
  const [componentName, setComponentName] = useState();
  
  let data = null;
  if (type === 'component') {
    data = (components || []).find(item => {
      return item.name === componentName;
    });
  }

  return (
    <div className="App">

      <div className="btnBottom24">
        <span>插入类型：</span>
        <Select 
          onChange={setType}
          placeholder="请选择要添加的内容"
          value={type || undefined}
          className="select"
          >
            {
              typeArr.map(item => {
                return (<Option value={item.value} key={item.value}>{item.label}</Option>)
              })
            }
        </Select>
      </div>
      {
        type === 'component' ? 
        
          <div className="btnBottom24">
          <span>插入组件模块：</span>
          <Radio.Group onChange={(e) => setComponentName(e.target.value)} value={componentName}>
            {
              (components || []).map(item => {
                return <Radio value={item.name} key={item.name}>{item.name}</Radio>
              })
            }
          </Radio.Group>  
          </div>
         : null
      }

      
      <Button type="primary" onClick={() => utils.insertCode(type, data)}>提交</Button>
    </div>
  );
}

export default App;

进入开发项目，根目录下建立本地配置文件 bdms-vue-module-editor.js。在这里面设置代码块。

内容格式如下：

const components = [
  {
    name: '测试组件',
    html: '<Condition @change="changeConditionConfig" @refresh="refresh" />',
    importArr: [
      "import { ObjectItem } from '@/types/object/object.type'",
      "import { ConditionConfig } from '@/types/persona/persona.type'"
    ],
    registerArr: [
      "Condition"
    ],
    // js部分，是如何使用这个组件的例子
    js: 
      `get busy() {
         return this.end || this.loading
      }`,
    // css部分，是使用这个组件相关的样式  
    css: ``
  },
  {
    name: '测试组件2',
    html: '<Condition @change="changeConditionConfig" @refresh="refresh" />',
    importArr: [
      "import { ObjectItem } from '@/types/object/object.type'",
      "import { ConditionConfig } from '@/types/persona/persona.type'"
    ],
    registerArr: [
      "Condition2"
    ],
    // js部分，是如何使用这个组件的例子
    js: 
      `get busy2() {
         return this.end || this.loading
      }`,
    // css部分，是使用这个组件相关的样式  
    css: ``
  }
];

// 返回格式必须是这种，必须有 getConfig 方法
module.exports = function() {
  return {
    components: components,
    js: [],
    css: []
  }
}

新增菜单-导入日志采集器。