@@ -69,6 +72,9 @@ export default class SearchForm extends Vue {
// 远程数据方法
@Prop({ default: () => ({}), type: Object }) remoteFuncs!: any;
+ // 是否显示高级查询按钮
+ @Prop({ default: true, type: Boolean }) showSeniorSearchFormButton!: boolean;
+
// 表格设计json
@Prop({
type: Array,
@@ -80,7 +86,7 @@ export default class SearchForm extends Vue {
searchContent = '';
// 查询tips
- paramsTips: any = null;
+ paramsTips:any = null;
get isArray() {
return Array.isArray(this.paramsTips);
@@ -117,7 +123,7 @@ export default class SearchForm extends Vue {
* 获取查询条件
*/
getParams() {
- let params: any = [];
+ let params:any = [];
// 拿到所有字段
const props = this.columns.filter(item => item.searchable).map(item => item.prop);
const str = props.toString();
@@ -143,7 +149,7 @@ export default class SearchForm extends Vue {
// 获取高级查询组件中的查询条件
getFetchParamsSearch(data) {
this.paramsTips = [];
- const params: any = [];
+ const params:any = [];
Object.keys(data).forEach((key) => {
if (key && data[key]) {
if (Array.isArray(data[key])) {
diff --git a/packages/crud-table/src/SeniorSearchForm.vue b/packages/crud-table/src/SeniorSearchForm.vue
index d7bad5c..30e344c 100644
--- a/packages/crud-table/src/SeniorSearchForm.vue
+++ b/packages/crud-table/src/SeniorSearchForm.vue
@@ -43,12 +43,13 @@
+
+
diff --git a/packages/table-designer/src/SelectConfig.vue b/packages/table-designer/src/SelectConfig.vue
new file mode 100644
index 0000000..345c612
--- /dev/null
+++ b/packages/table-designer/src/SelectConfig.vue
@@ -0,0 +1,189 @@
+
+
+
+
+
下拉菜单数据来源
+
+ 字典
+ 静态
+ 自定义
+
+
+
+
查询条件使用
+
+ value
+ label
+
+
+
+
+
+ {{ item.label }}
+ {{ item.value }}
+
+
+
+
+
+
+ 远端方法
+
+
+ 值
+
+
+ 标签
+
+
+
+
+ 添加选项
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/table-designer/src/TableDesignerDialog.vue b/packages/table-designer/src/TableDesignerDialog.vue
new file mode 100644
index 0000000..190eb28
--- /dev/null
+++ b/packages/table-designer/src/TableDesignerDialog.vue
@@ -0,0 +1,331 @@
+
+
+
+
+
+
+
+
+
+
+
+ |
+
+ {{column.name}}
+
+ {{column.name}}
+ |
+
+
+
+
+
+
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 编辑菜单
+
+
+
+
+ 转为菜单
+
+ |
+
+
+
+
+ |
+
+
+
+
+ 表格配置规则
+ 1.操作列插槽默认为actionColumn,自定义列插槽为columnFormatter
+ 2.支持通过表单设计json自动生成表格
+
+
+
+ 保存
+ 取消
+
+
+
+
+
+
+
+
+
diff --git a/packages/table-designer/src/columnsConfig.ts b/packages/table-designer/src/columnsConfig.ts
new file mode 100644
index 0000000..8282c40
--- /dev/null
+++ b/packages/table-designer/src/columnsConfig.ts
@@ -0,0 +1,169 @@
+/**
+ * @file 表格设计功能列配置
+ * @author ytyang
+ * @copyright NanJing Anshare Tech .Com
+ * @createDate 2018年12月26日11:28:17
+ */
+
+export default [
+ {
+ name: '#',
+ is: 'i',
+ show: true,
+ bodyStyle: 'el-icon-sort',
+ tootip: '拖拽我上下滑动可以改变字段顺序',
+ },
+ {
+ name: '字段',
+ field: 'prop',
+ is: 'input',
+ show: true,
+ },
+ {
+ name: '列名',
+ field: 'label',
+ is: 'input',
+ headStyle: 'width:150px',
+ show: true,
+ },
+ {
+ name: '高级查询',
+ field: 'option',
+ is: 'popover',
+ headStyle: 'width:90px',
+ show: true,
+ tootip: '默认为文本框，可转为下拉菜单',
+ },
+ {
+ name: '列宽',
+ field: 'width',
+ is: 'input',
+ headStyle: 'width:70px',
+ show: false,
+ },
+ {
+ name: '最小宽',
+ field: 'minWidth',
+ is: 'input',
+ headStyle: 'width:70px',
+ tootip: '加粗黑色表示非默认宽度',
+ show: true,
+ },
+ {
+ name: '表格对齐',
+ field: 'align',
+ is: 'select',
+ list: [
+ {
+ label: '靠左',
+ value: 'left',
+ },
+ {
+ label: '居中',
+ value: 'center',
+ },
+ {
+ label: '靠右',
+ value: 'right',
+ },
+ {
+ label: '默认对齐',
+ value: undefined,
+ },
+ ],
+ show: true,
+ },
+ {
+ name: '表头对齐',
+ field: 'headerAlign',
+ is: 'select',
+ headStyle: 'width:50px',
+ list: [
+ {
+ label: '靠左',
+ value: 'left',
+ },
+ {
+ label: '居中',
+ value: 'center',
+ },
+ {
+ label: '靠右',
+ value: 'right',
+ },
+ {
+ label: '默认对齐',
+ value: undefined,
+ },
+ ],
+ show: true,
+ },
+ {
+ name: '固定方式',
+ field: 'fixed',
+ is: 'select',
+ headStyle: 'width:50px',
+ list: [
+ {
+ label: '靠左',
+ value: 'left',
+ },
+ {
+ label: '靠右',
+ value: 'right',
+ },
+ {
+ label: '不固定',
+ value: false,
+ },
+ ],
+ show: true,
+ },
+ {
+ name: '溢出隐藏',
+ field: 'showOverflowTooltip',
+ headStyle: 'width:80px',
+ is: 'switch',
+ show: true,
+ },
+ {
+ name: '排序方式',
+ field: 'sortable',
+ is: 'select',
+ headStyle: 'width:120px',
+ // 区分客户端和服务端排序，所以value统一使用string
+ list: [
+ {
+ label: '不排序',
+ value: 'false',
+ },
+ // {
+ // label: '客户端排序',
+ // value: 'true',
+ // },
+ {
+ label: '服务端排序',
+ value: 'custom',
+ },
+ ],
+ show: true,
+ },
+ {
+ name: '是否检索',
+ field: 'searchable',
+ headStyle: 'width:80px',
+ is: 'switch',
+ tootip: '是否在表格顶部高级查询区域显示',
+ show: true,
+ },
+ {
+ name: '插槽',
+ field: 'slotName',
+ is: 'input',
+ show: true,
+ },
+ {
+ name: '操作',
+ show: true,
+ },
+];
diff --git a/packages/utils/confirm.ts b/packages/utils/confirm.ts
index bd2b936..a74a3b4 100755
--- a/packages/utils/confirm.ts
+++ b/packages/utils/confirm.ts
@@ -6,6 +6,7 @@
*/
import { MessageBox } from 'element-ui';
+const ElMessageBox = MessageBox;
/**
* 确认提示框装饰器
* @param {*} message 提示信息
@@ -18,7 +19,7 @@ export function confirm(message, title = '提示', cancelFn = (error) => {}) {
// eslint-disable-next-line func-names
descriptor.value = async function (...rest) {
try {
- await MessageBox.confirm(message, title);
+ await ElMessageBox.confirm(message, title);
originFn.apply(this, rest);
} catch (error) {
if (cancelFn) {
@@ -39,7 +40,7 @@ export function alert(message, title = '提示') {
const originFn = descriptor.value;
// eslint-disable-next-line func-names
descriptor.value = async function (...rest) {
- await MessageBox.alert(message, title);
+ await ElMessageBox.alert(message, title);
originFn.apply(this, rest);
};
};
diff --git a/packages/form-designer/src/utils/download.ts b/packages/utils/download.ts
similarity index 95%
rename from packages/form-designer/src/utils/download.ts
rename to packages/utils/download.ts
index 27940c4..a8f934b 100644
--- a/packages/form-designer/src/utils/download.ts
+++ b/packages/utils/download.ts
@@ -1,10 +1,10 @@
/**
* @file 文件下载
- * @author BoBo
+ * @author ytyang
* @copyright NanJing Anshare Tech .Com
* @createDate 2018年11月18日08:13:10
*/
-import axios from '../../../api/axios';
+import axios from '../api/axios';
/**
* 通用下载
diff --git a/public/demo.html b/public/demo.html
new file mode 100644
index 0000000..ebf905a
--- /dev/null
+++ b/public/demo.html
@@ -0,0 +1,36 @@
+
+
+
+
+
+
+
+
+
+
打开表单设计器
+
打开表格设计器
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/vue.config.js b/vue.config.js
index eb00bb6..7bfe529 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -1,4 +1,15 @@
+/*
+ * @file: vue.config.js
+ * @copyright: NanJing Anshare Tech .Com
+ * @author: BoBo
+ * @Date: 2020年10月28 10:44:39
+ */
+const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
+const path = require('path');
+function resolve(dir) {
+ return path.join(__dirname, dir);
+}
module.exports = {
// 将 examples 目录添加为新的页面
pages: {
@@ -11,4 +22,39 @@ module.exports = {
filename: 'index.html',
},
},
+ chainWebpack: (config) => {
+ if (process.env.IS_REPORT) {
+ config.plugin('webpack-report').use(BundleAnalyzerPlugin, [
+ {
+ analyzerMode: 'static',
+ },
+ ]);
+ }
+ // vue inspect --rules 列出所有规则，可以看到svg是第三个
+ // vue inspect module.rules.2 可以列出默认svg规则配置
+ // 从默认svg规则中排除src/icons路径，因为会当做图标自动加载
+ config.module.rule('svg').exclude.add(resolve('packages/common/icons'));
+ // 添加svg-sprite-loader加载器
+ config.module
+ .rule('svg-sprite-loader')
+ .test(/.svg$/)
+ .include.add(resolve('packages/common/icons')) // 处理svg目录
+ .end()
+ .use('svg-sprite-loader')
+ .loader('svg-sprite-loader')
+ .options({
+ symbolId: 'icon-[name]',
+ })
+ .end()
+ .use('svgo-loader')
+ .loader('svgo-loader')
+ .end();
+ },
+ configureWebpack: {
+ resolve: {
+ alias: {
+ '@': resolve('packages'),
+ },
+ },
+ },
};