提交 e973b984 编写于 作者: ibizdev's avatar ibizdev

ibizdev提交

上级 614435b9
此差异已折叠。
<?xml version="1.0" encoding="UTF-8"?>
<projectDescription>
<name>srv_Default_pub</name>
<comment></comment>
<projects>
</projects>
<buildSpec>
</buildSpec>
<natures>
</natures>
</projectDescription>
\ No newline at end of file
此差异已折叠。
<?xml version="1.0" encoding="UTF-8"?>
<diagram>
<page_setting>
<direction_horizontal>true</direction_horizontal>
<scale>100</scale>
<paper_size>A4 210 x 297 mm</paper_size>
<top_margin>30</top_margin>
<left_margin>30</left_margin>
<bottom_margin>30</bottom_margin>
<right_margin>30</right_margin>
</page_setting>
<category_index>0</category_index>
<zoom>1.0</zoom>
<x>0</x>
<y>0</y>
<default_color>
<r>128</r>
<g>128</g>
<b>192</b>
</default_color>
<color>
<r>255</r>
<g>255</g>
<b>255</b>
</color>
<font_name>Microsoft YaHei UI</font_name>
<font_size>9</font_size>
<settings>
<database>StandardSQL</database>
<capital>false</capital>
<table_style></table_style>
<notation></notation>
<notation_level>0</notation_level>
<notation_expand_group>false</notation_expand_group>
<view_mode>2</view_mode>
<outline_view_mode>2</outline_view_mode>
<view_order_by>1</view_order_by>
<auto_ime_change>false</auto_ime_change>
<validate_physical_name>true</validate_physical_name>
<use_bezier_curve>false</use_bezier_curve>
<suspend_validator>false</suspend_validator>
<export_setting>
<export_ddl_setting>
<output_path></output_path>
<encoding></encoding>
<line_feed></line_feed>
<is_open_after_saved>true</is_open_after_saved>
<environment_id>null</environment_id>
<category_id>null</category_id>
<ddl_target>
<create_comment>true</create_comment>
<create_foreignKey>true</create_foreignKey>
<create_index>true</create_index>
<create_sequence>true</create_sequence>
<create_table>true</create_table>
<create_tablespace>true</create_tablespace>
<create_trigger>true</create_trigger>
<create_view>true</create_view>
<drop_index>true</drop_index>
<drop_sequence>true</drop_sequence>
<drop_table>true</drop_table>
<drop_tablespace>true</drop_tablespace>
<drop_trigger>true</drop_trigger>
<drop_view>true</drop_view>
<inline_column_comment>true</inline_column_comment>
<inline_table_comment>true</inline_table_comment>
<comment_value_description>true</comment_value_description>
<comment_value_logical_name>false</comment_value_logical_name>
<comment_value_logical_name_description>false</comment_value_logical_name_description>
<comment_replace_line_feed>false</comment_replace_line_feed>
<comment_replace_string></comment_replace_string>
</ddl_target>
</export_ddl_setting>
<export_excel_setting>
<category_id>null</category_id>
<output_path></output_path>
<template></template>
<template_path></template_path>
<used_default_template_lang></used_default_template_lang>
<image_output></image_output>
<is_open_after_saved>true</is_open_after_saved>
<is_put_diagram>true</is_put_diagram>
<is_use_logical_name>true</is_use_logical_name>
</export_excel_setting>
<export_html_setting>
<output_dir></output_dir>
<with_category_image>true</with_category_image>
<with_image>true</with_image>
<is_open_after_saved>true</is_open_after_saved>
</export_html_setting>
<export_image_setting>
<output_file_path></output_file_path>
<category_dir_path></category_dir_path>
<with_category_image>true</with_category_image>
<is_open_after_saved>true</is_open_after_saved>
</export_image_setting>
<export_java_setting>
<java_output></java_output>
<package_name></package_name>
<class_name_suffix></class_name_suffix>
<src_file_encoding></src_file_encoding>
<with_hibernate>false</with_hibernate>
</export_java_setting>
<export_testdata_setting>
<file_encoding></file_encoding>
<file_path></file_path>
<format>0</format>
</export_testdata_setting>
</export_setting>
<category_settings>
<free_layout>false</free_layout>
<show_referred_tables>false</show_referred_tables>
<categories>
</categories>
</category_settings>
<translation_settings>
<use>false</use>
<translations>
</translations>
</translation_settings>
<model_properties>
<id></id>
<height>-1</height>
<width>-1</width>
<font_name>Microsoft YaHei UI</font_name>
<font_size>9</font_size>
<x>50</x>
<y>50</y>
<color>
<r>255</r>
<g>255</g>
<b>255</b>
</color>
<connections>
</connections>
<display>false</display>
<creation_date>2016-09-01 09:10:11</creation_date>
<updated_date>2016-09-01 19:00:53</updated_date>
<model_property>
<name>Project Name</name>
<value></value>
</model_property>
<model_property>
<name>Model Name</name>
<value></value>
</model_property>
<model_property>
<name>Version</name>
<value></value>
</model_property>
<model_property>
<name>Company</name>
<value></value>
</model_property>
<model_property>
<name>Author</name>
<value></value>
</model_property>
</model_properties>
<table_properties>
<schema></schema>
</table_properties>
<environment_setting>
<environment>
<id>0</id>
<name>Default</name>
</environment>
</environment_setting>
</settings>
<dictionary>
</dictionary>
<tablespace_set>
</tablespace_set>
<contents>
</contents>
<column_groups>
</column_groups>
<test_data_list>
</test_data_list>
<sequence_set>
</sequence_set>
<trigger_set>
</trigger_set>
<change_tracking_list>
</change_tracking_list>
</diagram>
\ No newline at end of file
module.exports = {
presets: [
'@vue/app'
]
}
{
"name": "super-form-two",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"ant-design-vue": "^1.3.16",
"async-validator": "^3.1.0",
"axios": "^0.19.0",
"core-js": "^2.6.5",
"moment": "^2.24.0",
"rxjs": "6.4.0",
"tinymce": "4.8.5",
"vue": "^2.6.10",
"vue-i18n": "^8.14.1"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.11.0",
"@vue/cli-plugin-eslint": "^3.11.0",
"@vue/cli-service": "^3.11.0",
"babel-eslint": "^10.0.1",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"vue-template-compiler": "^2.6.10"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
}
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions"
]
}
<template>
<a-locale-provider :locale="locale">
<div id="app">
<a-layout id="components-layout-demo-custom-trigger">
<a-layout-sider :trigger="null" collapsible>
<div class="logo"><img src="/assets/images/logo.png"/></div>
<a-menu theme="dark" mode="inline" :defaultSelectedKeys="['0']" @click="handleClick">
<a-menu-item key="0">
<a-icon type="user" />
<span>表单4</span>
</a-menu-item>
<a-menu-item key="1">
<a-icon type="video-camera" />
<span>实体编辑视图</span>
</a-menu-item>
<a-menu-item key="2">
<a-icon type="upload" />
<span>基础编辑器</span>
</a-menu-item>
<a-menu-item key="3">
<a-icon type="user" />
<span>基础表单项</span>
</a-menu-item>
<a-menu-item key="4">
<a-icon type="video-camera" />
<span>实体3编辑视图</span>
</a-menu-item>
<a-menu-item key="5">
<a-icon type="upload" />
<span>实体4编辑视图</span>
</a-menu-item>
<a-menu-item key="6">
<a-icon type="user" />
<span>实体5编辑视图</span>
</a-menu-item>
<a-menu-item key="7">
<a-icon type="video-camera" />
<span>表单项动态逻辑示例</span>
</a-menu-item>
<a-menu-item key="8">
<a-icon type="upload" />
<span>实体2编辑视图</span>
</a-menu-item>
<a-menu-item key="9">
<a-icon type="user" />
<span>DemoForm</span>
</a-menu-item>
<a-menu-item key="10">
<a-icon type="video-camera" />
<span>表单3</span>
</a-menu-item>
</a-menu>
</a-layout-sider>
<a-layout>
<a-layout-content :style="{ margin: '24px 16px', padding: '24px', background: '#fff', minHeight: '280px' }">
<ExampleMain4EditView v-show="curSelected == '0'"/>
<EntityEditView v-show="curSelected == '1'"/>
<ExampleEditorType v-show="curSelected == '2'"/>
<ExampleEditView v-show="curSelected == '3'"/>
<Entity3EditView v-show="curSelected == '4'"/>
<Entity4EditView v-show="curSelected == '5'"/>
<Entity5EditView v-show="curSelected == '6'"/>
<ExampleDLFEditView v-show="curSelected == '7'"/>
<Entity2EditView v-show="curSelected == '8'"/>
<ExampleMain2EditView v-show="curSelected == '9'"/>
<ExampleMain3EditView v-show="curSelected == '10'"/>
</a-layout-content>
</a-layout>
</a-layout>
</div>
</a-locale-provider>
</template>
<script>
import zhCN from "ant-design-vue/lib/locale-provider/zh_CN";
import enUS from "ant-design-vue/lib/locale-provider/en_US";
import AppService from "@service/AppService";
import ExampleMain4EditView from '@pages/exapmple/example-main4-edit-view/example-main4-edit-view.vue';
import EntityEditView from '@pages/module/entity-edit-view/entity-edit-view.vue';
import ExampleEditorType from '@pages/exapmple/example-editor-type/example-editor-type.vue';
import ExampleEditView from '@pages/exapmple/example-edit-view/example-edit-view.vue';
import Entity3EditView from '@pages/module3/entity3-edit-view/entity3-edit-view.vue';
import Entity4EditView from '@pages/module4/entity4-edit-view/entity4-edit-view.vue';
import Entity5EditView from '@pages/module5/entity5-edit-view/entity5-edit-view.vue';
import ExampleDLFEditView from '@pages/exapmple/example-dlfedit-view/example-dlfedit-view.vue';
import Entity2EditView from '@pages/module2/entity2-edit-view/entity2-edit-view.vue';
import ExampleMain2EditView from '@pages/exapmple/example-main2-edit-view/example-main2-edit-view.vue';
import ExampleMain3EditView from '@pages/exapmple/example-main3-edit-view/example-main3-edit-view.vue';
export default {
name: "app",
components: {
ExampleMain4EditView,
EntityEditView,
ExampleEditorType,
ExampleEditView,
Entity3EditView,
Entity4EditView,
Entity5EditView,
ExampleDLFEditView,
Entity2EditView,
ExampleMain2EditView,
ExampleMain3EditView
},
data() {
return {
curSelected: "0",
locale: zhCN
};
},
created() {
if (Object.is(window.localStorage.getItem("curLang"), "zh")) {
this.locale = zhCN;
} else {
this.locale = enUS;
}
AppService.getInstance().subject.subscribe(res => {
if (Object.is(res, "zh")) {
this.locale = zhCN;
} else {
this.locale = enUS;
}
this.$forceUpdate();
});
},
methods: {
handleClick(e) {
this.curSelected = e.key;
}
}
};
</script>
<style>
.ant-layout.ant-layout-has-sider {
min-height: 100vh;
}
#components-layout-demo-custom-trigger .trigger {
font-size: 18px;
line-height: 64px;
padding: 0 24px;
cursor: pointer;
transition: color 0.3s;
}
#components-layout-demo-custom-trigger .trigger:hover {
color: #1890ff;
}
#components-layout-demo-custom-trigger .logo {
height: 32px;
text-align: center;
margin: 16px;
}
</style>
\ No newline at end of file
import FormDetailModel from './form-detail.js';
/**
* 表单按钮模型
* @param {*} opts
*/
export default class FormButtonModel extends FormDetailModel {
constructor(opts) {
super(opts);
}
}
\ No newline at end of file
/**
* 表单成员模型
*
*/
export default class FormDetailModel {
constructor(opts) {
/**
* 成员标题
*/
this.caption = !Object.is(opts.caption, '') ? opts.caption : '';
/**
* 成员类型
*/
this.detailType = !Object.is(opts.detailType, '') ? opts.detailType : '';
/**
* 表单对象
*/
this.form = opts.form ? opts.form : {};
/**
* 成员名称
*/
this.name = !Object.is(opts.name, '') ? opts.name : '';
/**
* 成员是否显示
*/
this.visible = opts.visible ? true : false;
/**
* 成员是否显示标题
*/
this.isShowCaption = opts.isShowCaption ? true : false;
}
/**
* 设置显示与隐藏
*
* @param {boolean} state
* @memberof FormDetailModel
*/
setVisible(state) {
this.visible = state;
}
/**
* 设置显示标题栏
*
* @param {boolean} state
* @memberof FormDetailModel
*/
setShowCaption(state) {
this.isShowCaption = state;
}
}
import FormDetailModel from './form-detail.js';
/**
* 数据关系界面模型
* @param {*} opts
*/
export default class FormDRUIPartModel extends FormDetailModel {
constructor(opts) {
super(opts);
}
}
\ No newline at end of file
import FormDetailModel from './form-detail.js';
/**
* 分组面板模型
* @param {*} opts
*/
export default class FormGroupPanelModel extends FormDetailModel {
constructor(opts) {
super(opts);
this.uiActionGroup = opts.uiActionGroup;
}
}
\ No newline at end of file
import FormDetailModel from './form-detail.js';
/**
* 嵌入成员模型
* @param {*} opts
*/
export default class FormIFrameModel extends FormDetailModel {
constructor(opts) {
super(opts);
}
}
\ No newline at end of file
import FormDetailModel from './form-detail.js';
/**
* 表单项模型
* @param {*} opts
*/
export default class FormItemModel extends FormDetailModel {
constructor(opts) {
super(opts);
/**
* 错误信息
*/
this.error = opts.error;
/**
* 是否禁用
*/
this.disabled = opts.disabled ? true : false;
/**
* 是否必填
*/
this.required = opts.required ? true : false;
/**
* 是否启用
*/
this.enableCond = opts.enableCond ? opts.enableCond : 3;
/**
* 校验状态
*/
this.validateStatus = this.validateStatus ? this.validateStatus : "";
}
/**
* 设置是否启用
*
* @param {boolean} state
* @memberof FormItemModel
*/
setDisabled(state) {
this.disabled = state;
}
/**
* 设置信息内容
*
* @param {string} error
* @memberof FormItemModel
*/
setError(error) {
this.error = error;
if (!Object.is(error, "")) {
this.validateStatus = "error";
} else {
this.validateStatus = "";
}
}
/**
* 设置是否启用
*
* @param {string} srfuf
* @memberof FormItemModel
*/
setEnableCond(srfuf) {
// 是否有权限
const isReadOk = true;
const _srfuf = parseInt(srfuf, 10);
let state = true;
if (isReadOk) {
if (_srfuf === 1) {
if ((this.enableCond & 2) === 2) {
state = false;
}
} else {
if ((this.enableCond & 1) === 1) {
state = false;
}
}
}
this.setDisabled(state);
}
}
import FormDetailModel from './form-detail.js';
/**
* 表单分页模型
* @param {*} opts
*/
export default class FormPageModel extends FormDetailModel {
constructor(opts) {
super(opts);
}
}
\ No newline at end of file
import FormDetailModel from './form-detail.js';
/**
* 表单部件模型
* @param {*} opts
*/
export default class FormPartModel extends FormDetailModel {
constructor(opts) {
super(opts);
}
}
\ No newline at end of file
import FormDetailModel from './form-detail.js';
/**
* 直接内容模型
* @param {*} opts
*/
export default class FormRowItemModel extends FormDetailModel {
constructor(opts) {
super(opts);
}
}
\ No newline at end of file
import FormDetailModel from './form-detail.js';
/**
* 分页面板模型
* @param {*} opts
*/
export default class FormTabPageModel extends FormDetailModel {
constructor(opts) {
super(opts);
}
/**
* 设置分页是否启用
*
* @param {boolean} state
* @memberof FormTabPageModel
*/
setVisible(state) {
this.visible = state;
const tabPanel = this.getTabPanelModel();
if (tabPanel) {
tabPanel.setActiviePage();
}
}
/**
* 获取分页面板
*
* @returns {(FormTabPanelModel | null)}
* @memberof FormTabPageModel
*/
getTabPanelModel() {
if (!this.form) {
return null;
}
const tabPanels = Object.values(this.form.detailsModel).filter((model) => Object.is(model.detailType, 'TABPANEL'));
let index = tabPanels.findIndex((tabPanel) => {
return tabPanel.tabPages.some((tabPag) => Object.is(tabPag.name, this.name));
});
if (index === -1) {
return null;
}
const tabPanel = tabPanels[index];
return tabPanel;
}
}
\ No newline at end of file
import FormDetailModel from './form-detail.js';
/**
* 分页部件模型
* @param {*} opts
*/
export default class FormTabPanelModel extends FormDetailModel {
constructor(opts) {
super(opts);
/**
* 被激活分页
*/
this.activiedPage = "";
/**
* 选中激活状态
*/
this.clickActiviePage = "";
/**
* 分页子成员
*/
this.tabPages = [...opts.tabPages];
if (this.tabPages.length > 0) {
this.activiedPage = this.tabPages[0].name;
}
}
/**
* 设置激活分页
*
* @memberof FormTabPanelModel
*/
setActiviePage() {
if (!this.form) {
return;
}
const detailsModel = this.form.detailsModel;
const index = this.tabPages.findIndex((tabpage) => Object.is(tabpage.name, this.clickActiviePage) && Object.is(tabpage.name, this.activiedPage) && detailsModel[tabpage.name].visible);
if (index !== - 1) {
return;
}
this.tabPages.some((tabpage) => {
if (detailsModel[tabpage.name].visible) {
this.activiedPage = tabpage.name;
return true;
}
return false;
});
}
/**
* 选中页面
*
* @param {*} $event
* @returns {void}
* @memberof FormTabPanelModel
*/
clickPage($event) {
if (!$event) {
return;
}
this.clickActiviePage = $event;
this.activiedPage = $event;
}
}
\ No newline at end of file
import FormDetailModel from './form-detail.js';
/**
* 用户控件模型
* @param {*} opts
*/
export default class FormUserControlModel extends FormDetailModel {
constructor(opts) {
super(opts);
}
}
\ No newline at end of file
import FormButtonModel from './form-button.js';
import FormDetailModel from './form-detail.js';
import FormItemModel from './form-item.js';
import FormDRUIPartModel from './form-druipart.js';
import FormGroupPanelModel from './form-group-panel.js';
import FormIFrameModel from './form-iframe.js';
import FormPageModel from './form-page.js';
import FormPartModel from './form-part.js'
import FormRowItemModel from './form-row-item.js';
import FormTabPageModel from './form-tab-page.js';
import FormTabPanelModel from './form-tab-panel.js';
import FormUserControlModel from './form-user-control.js';
export {
FormButtonModel,
FormDetailModel,
FormItemModel,
FormDRUIPartModel,
FormGroupPanelModel,
FormIFrameModel,
FormPageModel,
FormPartModel,
FormRowItemModel,
FormTabPageModel,
FormTabPanelModel,
FormUserControlModel
}
\ No newline at end of file
import {Subject} from 'rxjs';
export default class AppService {
static appService = new AppService();
constructor( LanguageList = ["zh", "en"]) {
this.subject = new Subject();
this.LanguageList = LanguageList;
if (!window.localStorage.getItem('curLang')) {
window.localStorage.setItem('curLang', "zh");
this.curLanguage = "zh";
}else{
this.curLanguage = window.localStorage.getItem('curLang');
}
}
changeLanguage(value) {
this.curLanguage = value;
window.localStorage.setItem('curLang', value);
this.subject.next(value);
}
static getInstance() {
if (!AppService.appService) {
AppService.appService = new AppService();
}
return AppService.appService;
}
}
\ No newline at end of file
此差异已折叠。
<template>
<a-checkbox-group :value="selectArray" :disabled="disabled" @change="onChange">
<a-checkbox v-for="item in curCodelist" v-bind:key="item.id" :value="item.id">{{$t(item.text)}}</a-checkbox>
</a-checkbox-group>
</template>
<script>
export default {
name: "AppCheckBoxGroup",
model: {
prop: "value",
event: "change"
},
props: {
tag: String,
value: String | Number,
disabled: Boolean,
codelist: Object,
/**
* 模式(数字或者字符串)
*
*/
mode: String,
/**
* 分隔符
*
*/
separator: String
},
computed: {
curCodelist: function() {
return this.codelist[this.tag];
},
/**
* 当前模式
*
*/
currentmode: function() {
if (this.mode) {
return this.mode;
} else {
return "str";
}
},
/**
* 获取分隔符
*
*/
currentseparator: function() {
if (this.separator) {
return this.separator;
} else {
return ";";
}
},
/**
* 选中数组
*
*/
selectArray: function() {
if (this.value) {
if (Object.is(this.currentmode, "num") && this.curCodelist) {
let selectsArray = [];
let num = parseInt(this.value, 10);
this.curCodelist.forEach(item => {
if ((num & item.id) == item.id) {
selectsArray.push(item.id);
}
});
return selectsArray;
} else if (Object.is(this.currentmode, "str")) {
if (this.value !== "") {
return this.value.split(this.currentseparator);
}else{
return [];
}
}
} else {
return [];
}
}
},
methods: {
onChange(val) {
let value = null;
if (Object.is(this.currentmode, "num")) {
let temp = 0;
val.forEach(item => {
temp = temp | parseInt(item, 10);
});
value = temp;
} else if (Object.is(this.currentmode, "str")) {
let _datas = [];
this.curCodelist.forEach(item => {
const index = val.findIndex(_key => Object.is(item.id, _key));
if (index === -1) {
return;
}
_datas.push(item.id);
});
value = _datas.join(this.currentseparator);
}
this.$emit("change", value);
}
}
};
</script>
<style>
</style>
<template>
<a-checkbox :checked="value" :disabled="disabled" @change="onChange" ></a-checkbox>
</template>
<script>
export default {
name: "AppCheckBox",
model: {
prop: "value",
event: "change"
},
props: {
value: Boolean,
disabled: Boolean
},
methods: {
onChange($event) {
this.$emit("change", $event.target.checked);
}
}
};
</script>
<style>
</style>
<template>
<a-date-picker
:value="dateValue"
:disabled="disabled"
:format="format"
:showTime="showTime"
:placeholder="placeholder"
@change="onChange"
/>
</template>
<script>
const moment = require("moment");
export default {
name: "AppDatePicker",
model: {
prop: "value",
event: "change"
},
props: {
value: String,
disabled: Boolean,
format: String,
placeholder: String,
showTime:Boolean
},
computed: {
dateValue: function() {
return this.value ? moment(this.value) : null;
}
},
methods: {
onChange(date, dateString) {
this.$emit("change", dateString);
}
}
};
</script>
<style>
</style>
<template>
<a-select :value="value" v-bind:style="curStyleObj" :placeholder="placeholder" :disabled="disabled" allowClear @change="onChange">
<a-select-option v-for="item in curCodelist" v-bind:key="item.id" :value="item.id">{{$t(item.text)}}</a-select-option>
</a-select>
</template>
<script>
export default {
name: "AppDropdownList",
model: {
prop: "value",
event: "change"
},
props: {
tag:String,
value: String,
disabled: Boolean,
isauto:Boolean,
tag:String,
codelist:Object,
placeholder:String
},
computed:{
curCodelist:function(){
return this.codelist[this.tag];
},
curStyleObj:function(){
return {width:this.isauto == true?'100%':'100px'};
}
},
methods: {
onChange($event) {
this.$emit("change",$event);
}
}
};
</script>
<style>
</style>
\ No newline at end of file
<template>
<a-upload
name="file"
:multiple="true"
:defaultFileList="fileList"
:disabled="disabled"
:action="uploadurl"
:headers="headers"
@change="handleChange"
>
<a-button>
<a-icon type="upload" />{{$t('upload')}}
</a-button>
</a-upload>
</template>
<script>
export default {
name: "AppFileUpload",
model: {
prop: "value",
event: "change"
},
props: {
value: Array,
disabled: Boolean,
uploadparams: String,
exportparams: String,
customparams: Object
},
computed: {
fileList: {
get: function() {
return this.value ? this.handleInputData(this.value) : [];
},
set: function(val) {
this.$emit("change", this.handleOutData(val));
}
}
},
data() {
return {
uploadurl: "https://www.mocky.io/v2/5cc8019d300000980a055e76",
headers: {
authorization: "authorization-text"
}
};
},
methods: {
handleChange(info) {
if (info.file.status === "done") {
this.fileList = info.fileList;
this.$message.success(`${info.file.name} 上传成功`);
} else if (info.file.status === "error") {
this.$message.error(`${info.file.name} 上传失败`);
}
},
handleOutData(value) {
//todo 输出之前处理数据格式
return value;
},
handleInputData(value) {
//todo 输入之前处理数据格式
return value;
}
}
};
</script>
<style>
</style>
<template>
<a-form-item
v-bind:class="actualClass"
:validate-status="validateStatus"
>
<span
class="app-form-item-label"
v-bind:style="{ width: labelwidth,height:'32px'}"
v-show="isShowCaption"
>
<span v-show="this.required" class="isrequired">*</span>
{{labelName}}
</span>
<span class="app-form-item-content" v-bind:style="actualContentStyle">
<slot></slot>
</span>
<template v-slot:help>
<div v-bind:style="{'padding-left':labelPosition ==='LEFT'?labelwidth:'0px',height:'20px'}">{{helpInfo}}</div>
</template>
</a-form-item>
</template>
<script>
export default {
// v-bind:style="formItemStyle"
name: "AppFormItem",
props: {
helpInfo: String,
validateStatus: String,
labelName: String,
labelwidth: String,
labelPosition: String,
isShowCaption: Boolean,
formItemStyle: Object,
isEmptyCaption: Boolean,
formItemContentStyle: Object,
required: Boolean
},
data() {
return {
rules: [],
};
},
computed: {
actualClass: function() {
if (Object.is(this.labelPosition, "TOP")) {
return { "app-form-item": true, "app-form-item-top": true };
} else if (Object.is(this.labelPosition, "BOTTOM")) {
return { "app-form-item": true, "app-form-item-bottom": true };
} else if (Object.is(this.labelPosition, "RIGHT")) {
return { "app-form-item": true, "app-form-item-right": true };
} else {
return { "app-form-item": true };
}
},
actualContentStyle: function() {
if (Object.keys(this.formItemContentStyle).length > 0) {
return Object.assign(
{ width: "calc(100% - " + this.labelwidth + ")" },
this.formItemContentStyle
);
} else {
return { width: "calc(100% - " + this.labelwidth + ")" };
}
}
}
};
</script>
<style>
.app-form-item-top .app-form-item-label {
display: block;
}
.app-form-item-top .app-form-item-content {
display: block !important;
}
.app-form-item-right .app-form-item-label {
float: right;
}
.app-form-item-right .app-form-item-content {
float: left;
}
.app-form-item-bottom .ant-form-item-children {
display: flex !important;
flex-direction: column-reverse !important;
}
.app-form-item .app-form-item-label {
display: inline-block;
padding-right: 16px;
text-align: right;
vertical-align: top;
}
.app-form-item .app-form-item-content {
display: inline-block;
text-align: left;
}
.app-form-item-label .isrequired {
display: inline-block;
margin-right: 4px;
font-family: SimSun;
line-height: 1;
font-size: 14px;
color: #f5222d;
}
</style>
<template>
<div class="clearfix">
<a-upload
:action="uploadurl"
accept="image/*"
:multiple="multiple"
listType="picture-card"
:fileList="fileList"
:disabled="disabled"
@preview="handlePreview"
@change="handleChange"
>
<div v-if="fileList.length < maxlength">
<a-icon type="plus" />
<div class="ant-upload-text">{{$t('upload')}}</div>
</div>
</a-upload>
<a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
<img alt="example" style="width: 100%" :src="previewImage" />
</a-modal>
</div>
</template>
<script>
export default {
name: "AppImageUpload",
model: {
prop: "value",
event: "change"
},
props: {
value: Array,
disabled: Boolean,
multiple: Boolean,
uploadparams: String,
exportparams: String,
customparams: Object
},
computed: {
fileList: {
get: function() {
return this.value ? this.handleInputData(this.value) : [];
},
set: function(val) {
this.$emit("change", this.handleOutData(val));
}
},
maxlength: function() {
return this.multiple ? 3 : 1;
}
},
data() {
return {
uploadurl: "https://www.mocky.io/v2/5cc8019d300000980a055e76",
previewVisible: false,
previewImage: ""
};
},
methods: {
handleCancel() {
this.previewVisible = false;
},
handlePreview(file) {
this.previewImage = file.url || file.thumbUrl;
this.previewVisible = true;
},
handleChange({ file, fileList, event }) {
this.fileList = fileList;
},
handleOutData(value) {
//todo 输出之前处理数据格式
return value;
},
handleInputData(value) {
//todo 输入之前处理数据格式
return value;
}
}
};
</script>
<style>
.ant-upload-select-picture-card i {
font-size: 32px;
color: #999;
}
.ant-upload-select-picture-card .ant-upload-text {
margin-top: 8px;
color: #666;
}
</style>
\ No newline at end of file
<template>
<a-radio-group :name="tag" :value="value" :disabled="disabled" @change="onChange">
<a-radio v-for="item in curCodelist" v-bind:key="item.id" :value="item.id">{{$t(item.text)}}</a-radio>
</a-radio-group>
</template>
<script>
export default {
name: "AppRadioGroup",
model: {
prop: "value",
event: "change"
},
props: {
tag: String,
value: String,
disabled: Boolean,
codelist: Object
},
computed: {
curCodelist: function() {
return this.codelist[this.tag];
}
},
methods: {
onChange($event) {
this.$emit("change", $event.target.value);
}
}
};
</script>
<style>
</style>
\ No newline at end of file
// 引入组件
import AppFormItem from './app-form-item/app-form-item.vue';
import AppDatePicker from './app-date-picker/app-date-picker';
import AppCheckBox from './app-checkbox/app-checkbox';
import AppDropdownList from './app-dropdown-list/app-dropdown-list';
import AppRadioGroup from './app-radio-group/app-radio-group';
import AppCheckBoxGroup from './app-checkbox-group/app-checkbox-group';
import AppTimePicker from './app-time-picker/app-time-picker';
import AppRichTextEditor from './app-rich-text-editor/app-rich-text-editor';
import AppImageUpload from './app-image-upload/app-image-upload';
import AppFileUpload from './app-file-upload/app-file-upload';
const AppRegister = {
install: function (Vue) {
Vue.component('app-form-item', AppFormItem);
Vue.component('app-date-picker', AppDatePicker);
Vue.component('app-checkbox', AppCheckBox);
Vue.component('app-dropdown-list', AppDropdownList);
Vue.component('app-radio-group', AppRadioGroup);
Vue.component('app-checkbox-group', AppCheckBoxGroup);
Vue.component('app-time-picker', AppTimePicker);
Vue.component('app-rich-text-editor', AppRichTextEditor);
Vue.component('app-image-upload', AppImageUpload);
Vue.component('app-file-upload', AppFileUpload);
}
}
// 导出
export default AppRegister
\ No newline at end of file
<template>
<div>
<textarea :id="id"></textarea>
</div>
</template>
<script>
import { Subject } from "rxjs";
import axios from "axios";
import tinymce from "tinymce/tinymce";
import "tinymce/themes/modern";
import "tinymce/plugins/link";
import "tinymce/plugins/paste";
import "tinymce/plugins/table";
import "tinymce/plugins/image";
import "tinymce/plugins/imagetools";
import "tinymce/plugins/codesample";
import "tinymce/plugins/code";
import "tinymce/plugins/fullscreen";
import "tinymce/plugins/preview";
import ComUtil from "@utils/ComUtil";
export default {
name: "AppRichTextEditor",
model: {
prop: "value",
event: "change"
},
props: {
value: String,
height: Number,
disabled: Boolean,
langu: String,
uploadurl: String,
downloadurl: String
},
data() {
return {
editor: null | Object,
id: ComUtil.createUUID()
};
},
computed: {
uploadUrl: function() {
return this.uploadurl ? this.uploadurl : "";
},
downloadUrl: function() {
return this.downloadurl ? this.downloadurl : "";
}
},
watch: {
langu: {
handler: "onLanguChanged"
}
},
mounted() {
this.init("");
},
destroyed() {
tinymce.remove(this.editor);
},
methods: {
init(val) {
let richtexteditor = this;
tinymce.init({
selector: "#" + this.id,
height: this.height,
min_height: 400,
branding: false,
plugins: [
"link",
"paste",
"table",
"image",
"codesample",
"code",
"fullscreen",
"preview"
],
codesample_languages: [
{ text: "HTML/XML", value: "markup" },
{ text: "JavaScript", value: "javascript" },
{ text: "CSS", value: "css" },
{ text: "PHP", value: "php" },
{ text: "Ruby", value: "ruby" },
{ text: "Python", value: "python" },
{ text: "Java", value: "java" },
{ text: "C", value: "c" },
{ text: "C#", value: "csharp" },
{ text: "C++", value: "cpp" }
],
codesample_content_css: "/assets/tinymce/prism.css",
skin_url: "/assets/tinymce/skins/lightgray",
language_url:
"/assets/tinymce/langs/" +
(this.langu ? this.langu : "zh_CN") +
".js",
setup: editor => {
this.editor = editor;
editor.on("blur", () => {
const content = editor.getContent();
this.$emit("change", content);
});
},
images_upload_handler: (bolbinfo, success, failure) => {
const formData = new FormData();
formData.append("file", bolbinfo.blob(), bolbinfo.filename());
if (Object.is(richtexteditor.uploadUrl, "")) {
failure("需要提供上传路径");
} else {
const _url = richtexteditor.uploadUrl;
richtexteditor.uploadFile(_url, formData).subscribe(
response => {
if (response.ret === 0 && response.files.length > 0) {
if (Object.is(richtexteditor.downloadUrl, "")) {
failure("需要提供下载路径");
} else {
const id = response.files[0].id;
const url = `${richtexteditor.downloadUrl}?fileid=${id}`;
success(url);
}
}
},
error => {
console.log(error);
}
);
}
},
init_instance_callback: editor => {
this.editor = editor;
let value = this.value && this.value.length > 0 ? this.value : "";
if (this.editor) {
this.editor.setContent(value);
}
if (this.disabled) {
this.editor.setMode("readonly");
}
}
});
},
uploadFile(url, formData) {
let _this = this;
const subject = new Subject();
axios({
method: "post",
url: url,
data: formData,
headers: { "Content-Type": "image/png", Accept: "application/json" }
})
.then(response => {
if (response.status === 200) {
subject.next(response.data);
} else {
subject.error(response);
}
})
.catch(response => {
subject.error(response);
});
return subject;
},
onLanguChanged(val, oldVal) {
if (!Object.is(val, oldVal)) {
const content = this.editor.getContent();
tinymce.remove(this.editor);
this.init(content);
this.$forceUpdate();
}
}
}
};
</script>
<style>
</style>
<template>
<a-time-picker
:value="dateValue"
:disabled="disabled"
:format="format"
:placeholder="placeholder"
@change="onChange"
allowEmpty
/>
</template>
<script>
const moment = require("moment");
export default {
name: "AppTimePicker",
model: {
prop: "value",
event: "change"
},
props: {
id: String,
value: String,
disabled: Boolean,
format: String,
placeholder: String
},
computed: {
dateValue: function() {
return this.value ? moment(this.value, this.format) : null;
}
},
methods: {
onChange(date, dateString) {
this.$emit("change", dateString);
}
}
};
</script>
<style>
</style>
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
import Vue from 'vue';
import App from './App.vue';
import VueI18n from 'vue-i18n';
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
import moment from 'moment';
import 'moment/locale/zh-cn';
moment.locale('zh-cn');
import AppRegister from '@components/app-register.js';
Vue.config.productionTip = false
Vue.use(VueI18n);
Vue.use(Antd);
Vue.use(AppRegister);
const i18n = new VueI18n({
locale: 'zh', // 语言标识
})
new Vue({
i18n,
render: h => h(App),
}).$mount('#app')
<template>
<div>
<DynamicLogicFormform :formData="formData" @formItemChange="formItemChange"></DynamicLogicFormform></div>
</template>
<script>
import DynamicLogicFormform from '@forms/example/dynamic-logic-form/dynamic-logic-form.vue';
export default {
name: "ExampleDLFEditView",
components: {
DynamicLogicFormform
},
data(){
return {
formData:{
"bookname":"test1",
"input":"文本test",
"label":"标签test",
"group1":"书籍基本信息test",
"formpage1":"基本信息test",
"createman":"建立人test",
"createdate":"建立时间test",
"updateman":"更新人test",
"updatedate":"更新时间test",
"group2":"操作信息test",
"formpage2":"其它test"
}
}
},
methods:{
formItemChange(value){
console.log(value);
}
}
}
</script>
<style scoped>
</style>
<template>
<div>
<Mainform :formData="formData" @formItemChange="formItemChange"></Mainform></div>
</template>
<script>
import Mainform from '@forms/example/main/main.vue';
export default {
name: "ExampleEditView",
components: {
Mainform
},
data(){
return {
formData:{
"bookname":"test1",
"input":"文本test",
"label":"标签test",
"group1":"书籍基本信息test",
"formpage1":"基本信息test",
"createman":"建立人test",
"createdate":"建立时间test",
"updateman":"更新人test",
"updatedate":"更新时间test",
"group2":"操作信息test",
"formpage2":"其它test"
}
}
},
methods:{
formItemChange(value){
console.log(value);
}
}
}
</script>
<style scoped>
</style>
此差异已折叠。
此差异已折叠。
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册