Skip to content

Z
zendata

易企天创 / zendata
9 个月 前同步成功

通知 17
Star 2
Fork 1
Z
zendata

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

未验证 提交 5ec614cc 编写于 作者: aaronchen2k2k's avatar aaronchen2k2k 提交者： GitHub
浏览文件
操作

Merge pull request #5 from catouse/master 

🎉 brand new web UI.
上级 f3e924e4 b1835534
隐藏空白更改
内联 并排
Showing with 1292 addition and 845 deletion
ui/package.json
浏览文件 @ 5ec614cc
......@@ -42,7 +42,9 @@
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
"rules": {
"no-unused-vars": "warn"
}
},
"browserslist": [
"> 1%",
......
ui/src/components/Design.vue
浏览文件 @ 5ec614cc
......@@ -80,7 +80,7 @@
</a-tab-pane>
<a-tab-pane key="preview" :tab="$t('msg.preview')" force-render>
<div class="preview-data" v-html="previewData"></div>
<pre class="preview-data" v-html="previewData" style="margina: 0"></pre>
</a-tab-pane>
</a-tabs>
</div>
......
ui/src/components/FieldInfo.vue
浏览文件 @ 5ec614cc
<template>
<div>
<a-form-model ref="editForm" :model="model" :rules="rules">
<a-row :gutter="colsFull">
<a-form-model-item :label="$t('form.name')" prop="field" :labelCol="labelColFull" :wrapperCol="wrapperColFull">
<a-input v-model="model.field" />
</a-form-model-item>
</a-row>
<a-row :gutter="colsFull">
<a-form-model-item :label="$t('form.prefix')" :labelCol="labelColFull" class="zui-input-group">
<a-form-model-item prop="prefix" :style="{ display: 'inline-block', width: 'calc(40% - 35px)' }">
<a-form-model ref="editForm" :model="model" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
<a-form-model-item :label="$t('form.name')" prop="field" :wrapper-col="wrapperColHalf">
<a-input v-model="model.field" />
</a-form-model-item>
<a-form-model-item :label="$t('form.prefix')" :wrapper-col="wrapperColHalf">
<div class="input-group">
<a-form-model-item prop="prefix">
<a-input v-model="model.prefix" />
</a-form-model-item>
<span class="zui-input-group-addon" :style="{ width: '60px' }">
<span>{{$t('form.postfix')}}</span>
</span>
<a-form-model-item prop="postfix" :style="{ display: 'inline-block', width: 'calc(27% - 30px)' }">
<span class="input-group-addon">{{$t('form.postfix')}}</span>
<a-form-model-item prop="postfix">
<a-input v-model="model.postfix" />
</a-form-model-item>
</a-form-model-item>
</a-row>
</div>
</a-form-model-item>
<a-row :gutter="colsFull">
<a-form-model-item :label="$t('form.loop')" :labelCol="labelColFull" class="zui-input-group">
<a-form-model-item prop="loop" :style="{ display: 'inline-block', width: 'calc(40% - 35px)' }">
<a-form-model-item :label="$t('form.loop')" :wrapper-col="wrapperColHalf">
<div class="input-group">
<a-form-model-item prop="loop">
<a-input v-model="model.loop" :placeholder="$t('tips.range.int')" />
</a-form-model-item>
<span class="zui-input-group-addon" :style="{ width: '60px' }">
<span> {{ $t('form.loopfix') }}</span>
<span class="input-group-addon">
{{$t('form.loopfix')}}
</span>
<a-form-model-item prop="loopfix" :style="{ display: 'inline-block', width: 'calc(27% - 30px)' }">
<a-form-model-item prop="loopfix">
<a-input v-model="model.loopfix" />
</a-form-model-item>
</a-form-model-item>
</a-row>
</div>
</a-form-model-item>
<a-row :gutter="colsFull">
<a-form-model-item :label="$t('form.type')" :labelCol="labelColFull" class="zui-input-group">
<a-form-model-item prop="type" :style="{ display: 'inline-block', width: 'calc(40% - 35px)' }">
<a-form-model-item :label="$t('form.type')" :wrapper-col="wrapperColHalf">
<div class="input-group">
<a-form-model-item prop="type">
<a-select v-model="model.type">
<a-select-option value="list">{{ $t('form.type.list') }}</a-select-option>
<a-select-option value="timestamp">{{ $t('form.type.timestamp') }}</a-select-option>
<a-select-option value="list">{{$t('form.type.list')}}</a-select-option>
<a-select-option value="timestamp">{{$t('form.type.timestamp')}}</a-select-option>
</a-select>
</a-form-model-item>
<span class="zui-input-group-addon" :style="{ width: '60px' }">
<span>{{ $t('form.mode') }}</span>
</span>
<a-form-model-item prop="mode" :style="{ display: 'inline-block', width: 'calc(27% - 30px)' }">
<span class="input-group-addon"> {{$t('form.mode')}}</span>
<a-form-model-item prop="mode">
<a-select v-model="model.mode">
<a-select-option value="parallel">{{ $t('form.mode.parallel') }}</a-select-option>
<a-select-option value="recursive">{{ $t('form.mode.recursive') }}</a-select-option>
<a-select-option value="parallel">{{$t('form.mode.parallel')}}</a-select-option>
<a-select-option value="recursive">{{$t('form.mode.recursive')}}</a-select-option>
</a-select>
</a-form-model-item>
</a-form-model-item>
</a-row>
</div>
</a-form-model-item>
<a-row :gutter="colsFull">
<a-form-model-item :label="$t('form.width')" :labelCol="labelColFull" class="zui-input-group">
<a-form-model-item prop="length" :style="{ display: 'inline-block', width: 'calc(40% - 45px)' }">
<a-form-model-item :label="$t('form.width')" :wrapper-col="wrapperColHalf">
<div class="input-group">
<a-form-model-item prop="length">
<a-input v-model="model.length" :min="0" />
</a-form-model-item>
<span class="zui-input-group-addon" :style="{ width: '70px' }">
<span>{{$t('form.left.pad')}}</span>
</span>
<a-form-model-item prop="leftPad" :style="{ display: 'inline-block', width: 'calc(13% - 45px)' }">
<span class="input-group-addon">{{$t('form.left.pad')}}</span>
<a-form-model-item prop="leftPad">
<a-input v-model="model.leftPad" />
</a-form-model-item>
<span class="zui-input-group-addon" :style="{ width: '70px' }">
<span>{{$t('form.right.pad')}}</span>
</span>
<a-form-model-item prop="rightPad" :style="{ display: 'inline-block', width: 'calc(13% - 43px)' }">
<span class="input-group-addon">{{$t('form.right.pad')}}</span>
<a-form-model-item prop="rightPad">
<a-input v-model="model.rightPad" />
</a-form-model-item>
</a-form-model-item>
</a-row>
<a-row :gutter="colsFull">
<a-col :span="colsHalf">
<a-form-model-item :label="$t('form.format')" prop="format" :labelCol="labelColHalf" :wrapperCol="wrapperColHalf">
<div class="inline">
<a-input v-model="model.format">
<a-select v-model="model.format" slot="addonAfter" default-value="" style="width: 100px">
<a-select-option value="">
{{$t('form.function')}}
</a-select-option>
<a-select-option value="md5">md5</a-select-option>
<a-select-option value="sha1">sha1</a-select-option>
<a-select-option value="base64">base64</a-select-option>
<a-select-option value="urlencode">urlencode</a-select-option>
</a-select>
</a-input>
</div>
</a-form-model-item>
</a-col>
<a-col :span="colsHalf">
<a-form-model-item :label="$t('form.rand')" prop="rand" :labelCol="labelColHalf2" :wrapperCol="wrapperColHalf">
</div>
</a-form-model-item>
<a-form-model-item :label="$t('form.format')" prop="format" :wrapperCol="wrapperColHalf">
<div class="input-group">
<a-input v-model="model.format">
<a-select v-model="model.format" slot="addonAfter" default-value="" style="width: 100px">
<a-select-option value="">
{{$t('form.function')}}
</a-select-option>
<a-select-option value="md5">md5</a-select-option>
<a-select-option value="sha1">sha1</a-select-option>
<a-select-option value="base64">base64</a-select-option>
<a-select-option value="urlencode">urlencode</a-select-option>
</a-select>
</a-input>
<a-form-model-item :label="$t('form.rand')" prop="rand" :wrapperCol="wrapperColHalf">
<a-switch v-model="model.rand" />
</a-form-model-item>
</a-col>
</a-row>
</div>
</a-form-model-item>
<a-row :gutter="colsFull">
<a-form-model-item :label="$t('form.desc')" prop="note" :labelCol="labelColFull" :wrapperCol="wrapperColFull">
<a-input v-model="model.note" type="textarea" rows="3" />
</a-form-model-item>
</a-row>
<a-form-model-item :label="$t('form.desc')" prop="note">
<a-input v-model="model.note" type="textarea" rows="3" />
</a-form-model-item>
<a-row :gutter="colsFull">
<a-form-model-item class="center">
<a-button @click="save" type="primary">{{ $t('form.save') }}</a-button>
<a-button @click="reset" style="margin-left: 10px;">{{ $t('form.reset') }}</a-button>
</a-form-model-item>
</a-row>
<a-form-model-item class="center" :wrapper-col="{ span: 19, offset: 4 }">
<a-button @click="save" type="primary">{{$t('form.save')}}</a-button>
<a-button @click="reset" style="margin-left: 10px;">{{$t('form.reset')}}</a-button>
</a-form-model-item>
</a-form-model>
</div>
</template>
<script>
import {saveDefField, saveInstancesItem} from "../api/manage";
import {checkLoop} from "../api/utils";
import {labelColLarge, wrapperColLarge} from "../utils/const";
import {labelColFull, wrapperColFull} from "../utils/const";
export default {
name: 'FieldInfoComponent',
data() {
return {
labelCol: labelColLarge,
wrapperCol: wrapperColLarge,
labelCol: labelColFull,
wrapperCol: wrapperColFull,
colsFull: 24,
colsHalf: 12,
......@@ -144,7 +114,7 @@ export default {
wrapperColFull: { lg: { span: 16 }, sm: { span: 16 } },
labelColHalf: { lg: { span: 8}, sm: { span: 8 } },
labelColHalf2: { lg: { span: 4}, sm: { span: 4 } },
wrapperColHalf: { lg: { span: 12 }, sm: { span: 12 } },
wrapperColHalf: { lg: { span: 10 }, sm: { span: 10 } },
rules: {
field: [
{ required: true, message: this.$i18n.t('valid.required'), trigger: 'change' },
......
ui/src/components/SelectLang/index.jsx
浏览文件 @ 5ec614cc
......@@ -41,7 +41,7 @@ const SelectLang = {
return (
<Dropdown overlay={langMenu} placement="bottomRight">
<span class={prefixCls}>
<Icon type="global" title={i18nRender('navBar.lang')} />
<Icon type="global" title={i18nRender('navBar.lang')} style={{fontSize: '18px'}} />
</span>
</Dropdown>
)
......
ui/src/layout/ColLayout.vue
浏览文件 @ 5ec614cc
<template>
<div class="all">
<div class="left">
<Menu></Menu>
<div class="sync">
<a-button @click="syncData" size="small" type="primary">{{ $t('action.import.from.file') }}</a-button>
</div>
</div>
<div class="content">
<router-view />
</div>
<div class="content">
<router-view />
</div>
</template>
<script>
import Menu from "./Menu";
import {syncData} from "../api/manage";
export default {
name: 'ColLayout',
components: {
Menu,
},
data () {
return {
}
......@@ -31,21 +17,6 @@ export default {
},
mounted () {
},
methods: {
syncData() {
console.log("syncData")
syncData().then(json => {
console.log('syncData', json)
if (json.code == 1) {
this.$notification['success']({
message: this.$i18n.t('tips.success.to.import'),
placement: 'bottomLeft',
duration: 3,
});
}
})
},
}
}
</script>
......@@ -61,7 +32,6 @@ export default {
position: relative;
}
.content {
flex: 1;
padding: 0 10px;
}
}
......
ui/src/layout/Header.vue
浏览文件 @ 5ec614cc
<template>
<div class="header">
<h2 class="left">
<a href="https://www.zendata.cn" target="_blank">{{$t('site.title')}}</a>
<a href="https://www.zendata.cn" target="_blank" :title="$t('site.title')"><img src="logo.png" :alt="$t('site.title')"></a>
</h2>
<div class="center"></div>
<div class="center">
<Navbar />
</div>
<div class="right">
<span class="dir">{{$t('msg.workdir')}}: {{workDir}}</span>
<div class="dir">
<div>
<span><Icon type="folder-open" /> {{$t('msg.workdir')}} |</span>
<a-button @click="syncData" size="small" type="link" class="btn"><Icon type="sync" :title="$t('msg.help')" />{{ $t('action.import.from.file') }}</a-button>
</div>
<code>{{workDir}}</code>
</div>
<select-lang :prefixCls="'select-lang'" />
<a href="https://www.zendata.cn/book/zendata/" target="_blank">{{$t('msg.help')}}</a>
<a href="https://www.zendata.cn/book/zendata/" target="_blank"><Icon type="question-circle" :title="$t('msg.help')" :style="{fontSize: '18px'}" /></a>
</div>
</div>
</template>
<script>
import {getWorkDir} from "../api/manage";
import {Icon} from 'ant-design-vue'
import {getWorkDir, syncData} from "../api/manage";
import {config} from "../utils/vari";
import SelectLang from '../components/SelectLang'
import Navbar from './Navbar';
export default {
name: 'Header',
components: {
SelectLang
SelectLang,
Icon,
Navbar,
},
data () {
return {
workDir: '',
}
},
computed: {
},
created () {
getWorkDir().then(json => {
console.log('getWorkDir', json)
......@@ -41,9 +48,17 @@ export default {
config.workDir = this.workDir
})
},
mounted () {
},
methods: {
syncData() {
syncData().then(json => {
if (json.code == 1) {
this.$notification['success']({
message: this.$i18n.t('tips.success.to.import'),
duration: 3,
});
}
})
},
}
}
</script>
......@@ -53,32 +68,43 @@ export default {
display: flex;
height: 49px;
line-height: 49px;
a {
color: #fff;
}
.left {
margin: 0 15px;
width: 100px;
color: #fff;
flex: none;
> a {
display: block;
img {
height: 38px;
display: block;
margin-top: 5px;
}
}
}
.center {
flex: 1;
}
.right {
margin: 0 15px;
width: 500px;
text-align: right;
display: flex;
align-items: center;
.dir {
display: inline-block;
padding-right: 20px;
padding: 0 20px 3px 10px;
font-size: 12px;
line-height: 13px;
div > span {
opacity: .6;
}
.btn {
font-size: 12px;
color: #fff;
}
}
}
.select-lang {
padding-right: 10px;
padding-right: 15px;
cursor: pointer;
}
}
......
ui/src/layout/MainLayout.less
浏览文件 @ 5ec614cc
......@@ -14,22 +14,38 @@ h1, h2, h3, h4, h5, h6 {
.head {
display: flex;
align-items: center;
padding: 5px 0;
.title {
width: 300px;
margin-bottom: 15px;
padding: 3px 5px;
line-height: 32px;
font-weight: bolder;
font-size: 16px;
font-size: 14px;
flex: 1;
display: flex;
align-items: center;
.anticon + span {
display: inline-block;
margin-left: 5px;
}
}
.filter {
flex: 1;
padding: 2px;
display: flex;
justify-content: center;
}
.buttons {
flex: 1;
width: 100px;
text-align: right;
}
.ant-menu {
flex: 1;
}
}
.input-tips {
......@@ -74,8 +90,7 @@ a.common {
}
.pagination-wrapper {
margin-top: 10px;
padding: 5px 0;
width: 100%;
text-align: right;
}
ui/src/layout/MainLayout.vue
浏览文件 @ 5ec614cc
......@@ -6,20 +6,21 @@
<div class="content-container">
<router-view></router-view>
</div>
<div class="footer-container">
<!-- <div class="footer-container">
<Footer></Footer>
</div>
</div> -->
</div>
</template>
<script>
import Header from "./Header";
import Footer from "./Footer";
// import Footer from "./Footer";
export default {
name: 'MainLayout',
components: {
Header, Footer
Header,
// Footer,
},
data () {
return {
......@@ -49,19 +50,16 @@ export default {
.header-container {
height: 50px;
color: #fff;
background-color: #1183fb;
background-color: #0056c9;
border-bottom: 1px solid #e9f2fb;
}
.content-container {
flex: 1;
display:flex;
padding: 10px;
background: #fff;
}
.footer-container {
height: 40px;
background: #fff;
border-top: 1px solid #eff1f7;
}
.content-container {
padding: 0 15px 15px;
}
}
</style>
ui/src/layout/Menu.vue
浏览文件 @ 5ec614cc
......@@ -21,7 +21,6 @@
<a-menu-item key="buildin/instances/list">
{{ $t('msg.instances') }}
</a-menu-item>
<a-menu-item key="buildin/text/list">
{{ $t('msg.text') }}
</a-menu-item>
......
ui/src/layout/Navbar.vue 0 → 100644
浏览文件 @ 5ec614cc
<template>
<div>
<a-menu
:default-selected-keys="['mine']"
:selected-keys="[selectedKey]"
:open-keys.sync="openKeys"
mode="horizontal"
@click="handleClick"
>
<a-menu-item key="mine/list">
<Icon type="database" :style="{fontSize: '16px'}" />{{$t('msg.mine')}}
</a-menu-item>
<a-menu-item key="buildin/config/list">
<Icon type="build" :style="{fontSize: '16px'}" />{{$t('msg.buildin')}}
</a-menu-item>
</a-menu>
</div>
</template>
<script>
import {Icon} from 'ant-design-vue'
export default {
name: 'Navbar',
components: {
Icon,
},
data () {
return {
current: [],
openKeys: [],
};
},
computed: {
selectedKey: function() {
return this.$route.path.split('/')[2] === 'mine' ? 'mine/list' : 'buildin/config/list';
}
},
watch: {
openKeys(val) {
console.log('openKeys', val);
},
},
methods: {
handleClick (e) {
console.log('handleClick', e, this.$route.path, e.key)
if (e.key.indexOf('buildin') > -1) this.openKeys = ['buildin']
const path = '/data/' + e.key
if (this.$route.path != path) this.$router.push(path);
},
}
}
</script>
<style lang="less" scoped>
</style>
ui/src/layout/Zui.less
浏览文件 @ 5ec614cc
.zui-input-group {
.ant-row.ant-form-item {
margin-bottom: 0 !important;
}
&.zui-input-with-tips {
margin-bottom: 8px !important;
}
.zui-input-group-addon {
display: inline-block;
height: 32px;
line-height: 30px;
color: #3c495c;
text-align: center;
background-color: #eee;
border-top: 1px solid #dcdcdc;
border-bottom: 1px solid #dcdcdc;
span {
line-height: 32px;
body {
font-size: 13px;
background-color: #efefef;
}
.header {
.ant-menu {
background: transparent;
color: #fff;
float: left;
border: none;
margin-left: 20px;
}
.ant-menu-item,
.ant-menu-item:hover,
.ant-menu-item-selected,
.ant-menu-item-selected:hover {
color: #fff;
border-bottom: none;
opacity: .8;
padding: 0 10px;
}
.ant-menu-item-selected {
font-weight: bold;
}
.ant-menu-item:hover,
.ant-menu-item-selected {
opacity: 1;
}
}
.navbar-secondary {
font-size: 14px;
background: transparent;
border: none;
line-height: 24px;
.ant-menu-item {
padding: 0 2px;
margin-right: 10px;
}
.ant-menu-item-selected {
font-weight: bold;
}
}
.ant-btn-primary {
font-size: 13px;
background-color: #0056c9;
border-color: #0056c9;
&:hover {
background-color: #0763dd;
border-color: #0763dd;
}
}
.main-table {
border-radius: 4px;
background-color: #fff;
box-shadow: 0 1px 1px rgba(0,0,0,.05),0 2px 6px 0 rgba(0,0,0,.045);
border: 1px solid #e8e8e8;
}
.ant-table {
font-size: 13px;
}
.ant-table-thead > tr > th, .ant-table-tbody > tr > td {
padding: 7px 12px;
vertical-align: middle;
}
.ant-table-tbody > tr.selected > td {
background-color: #fff3e0;
}
.ant-table-tbody > tr.selected:hover > td {
background-color: #ffebbc;
}
.ant-table-tbody > tr.selected > td.title {
font-weight: bold;
}
.ant-card {
font-size: 13px;
border-radius: 4px;
box-shadow: 0 1px 1px rgba(0,0,0,.05),0 2px 6px 0 rgba(0,0,0,.045);
}
.ant-card-head {
min-height: 36px;
padding: 0 10px;
}
.ant-card-head-title {
padding: 7px 0;
font-size: 14px;
}
.ant-card-body {
padding: 10px;
}
.ant-tooltip-arrow::before {
background: #fff;
}
.ant-pagination {
font-size: 13px;
}
.ant-dropdown-menu-item,
.ant-dropdown-menu-submenu-title {
font-size: 13px;
}
.ant-form-item {
font-size: 13px;
margin-bottom: 15px;
}
.ant-form-item-label {
line-height: 32px;
}
.ant-form label {
color: #3c495c;
font-size: 13px;
font-weight: bold;
}
.ant-form-item-control {
line-height: 32px;
}
.ant-select-selection,
.ant-input,
.ant-input-group-addon {
font-size: 13px;
border-radius: 1px;
}
.ant-form-item-control {
.ant-btn {
min-width: 120px;
+ .ant-btn {
margin-left: 15px;
}
}
}
.ant-form-item-control {
text-align: center;
}
.ant-form-item-children {
display: block
}
.input-group {
display: flex;
flex-direction: row;
align-items: stretch;
flex-wrap: nowrap;
.zui-input-tips {
display: inline-block;
padding-top: 5px;
line-height: 18px;
.ant-form-item {
margin-bottom: 0;
}
.ant-input-group-wrapper,
.ant-form-item,
.ant-select,
.ant-input {
flex: auto;
}
.ant-input-group-wrapper {
width: auto;
display: block;
}
.ant-form-item-label {
margin-left: 20px;
}
}
.input-group-addon {
flex: none;
height: 32px;
line-height: 30px;
background-color: #eee;
border: 1px solid #dcdcdc;
padding: 0 5px;
.ant-form-item + &,
.ant-select + &,
.ant-input + & {
border-left: none;
}
&:not(:last-child) {
border-right: none;
}
&.fix-border {
border-left: none;
border-right: none;
}
}
.ant-modal-title {
font-size: 14px;
}
.ant-modal-content {
border-radius: 1px;
}
ui/src/locales/lang/en-US.js
浏览文件 @ 5ec614cc
......@@ -117,7 +117,7 @@ const locale = {
'form.col': 'Column',
'form.count': 'Count',
'form.expr': 'Expression',
'form.opt': 'Operation',
'form.opt': 'Actions',
'form.save': 'Save',
'form.reset': 'Reset',
'form.cancel': 'Cancel',
......
ui/src/locales/lang/zh-CN.js
浏览文件 @ 5ec614cc
......@@ -10,7 +10,7 @@ const components = {
const locale = {
'site.title': 'ZenData',
'menu.data.list': '数据列表',
'menu.data.list': '我的数据',
'menu.data.edit': '数据编辑',
'menu.config.list': '字段列表',
'menu.config.edit': '字段编辑',
......
ui/src/main.js
浏览文件 @ 5ec614cc
......@@ -64,6 +64,9 @@ import 'ant-design-vue/lib/tooltip/style';
import Pagination from "ant-design-vue/lib/pagination";
import 'ant-design-vue/lib/pagination/style';
import Card from "ant-design-vue/lib/card";
import "ant-design-vue/lib/card/style";
import notification from "ant-design-vue/lib/notification";
import 'ant-design-vue/lib/notification/style';
import message from "ant-design-vue/lib/message";
......@@ -73,6 +76,7 @@ Vue.prototype.$notification = notification;
import router from "./router"
Vue.config.productionTip = false
Vue.use(ConfigProvider)
......@@ -100,6 +104,7 @@ Vue.use(Spin)
Vue.use(Popover)
Vue.use(Tooltip)
Vue.use(Pagination)
Vue.use(Card)
new Vue({
router,
......
ui/src/router/index.js
浏览文件 @ 5ec614cc
......@@ -4,6 +4,7 @@ import VueRouter from "vue-router";
import MainLayout from "../layout/MainLayout";
import ColLayout from "../layout/ColLayout";
import BlankLayout from "../layout/BlankLayout";
import BuildinLayout from "../views/data/buildin/Layout";
Vue.use(VueRouter);
......@@ -41,7 +42,7 @@ const routes = [
{
path: 'buildin',
name: 'buildin',
component: BlankLayout,
component: BuildinLayout,
children: [
{
path: 'ranges',
......@@ -49,7 +50,7 @@ const routes = [
component: BlankLayout,
children: [
{
path: 'list',
path: 'list/:id?',
name: 'ranges-list',
component: () => import('../views/data/buildin/ranges/List'),
meta: { title: 'menu.ranges.list' }
......@@ -68,7 +69,7 @@ const routes = [
component: BlankLayout,
children: [
{
path: 'list',
path: 'list/:id?',
name: 'instances-list',
component: () => import('../views/data/buildin/instances/List'),
meta: { title: 'menu.instances.list' }
......@@ -87,7 +88,7 @@ const routes = [
component: BlankLayout,
children: [
{
path: 'list',
path: 'list/:id?',
name: 'excel-list',
component: () => import('../views/data/buildin/excel/List'),
meta: { title: 'menu.excel.list' }
......@@ -106,7 +107,7 @@ const routes = [
component: BlankLayout,
children: [
{
path: 'list',
path: 'list/:id?',
name: 'config-list',
component: () => import('../views/data/buildin/config/List'),
meta: { title: 'menu.config.list' }
......@@ -125,7 +126,7 @@ const routes = [
component: BlankLayout,
children: [
{
path: 'list',
path: 'list/:id?',
name: 'text-list',
component: () => import('../views/data/buildin/text/List'),
meta: { title: 'menu.text.list' }
......
ui/src/utils/const.js
浏览文件 @ 5ec614cc
// a-form-model level
const labelCol = { lg: { span: 6 }, sm: { span: 6 } }
const wrapperCol = { lg: { span: 10 }, sm: { span: 10 } }
const labelCol = { lg: { span: 4 }, sm: { span: 4 } }
const wrapperCol = { lg: { span: 18 }, sm: { span: 20 } }
const labelColLarge = { lg: { span: 6 }, sm: { span: 6 } }
const wrapperColLarge = { lg: { span: 14 }, sm: { span: 14 } }
......@@ -9,7 +9,7 @@ const wrapperColLarge = { lg: { span: 14 }, sm: { span: 14 } }
const colsFull = 24
const colsHalf = 12
const labelColFull = { lg: { span: 4 }, sm: { span: 4 } }
const wrapperColFull = { lg: { span: 16 }, sm: { span: 16 } }
const wrapperColFull = { lg: { span: 19 }, sm: { span: 20 } }
const labelColHalf = { lg: { span: 8}, sm: { span: 8 } }
const labelColHalf2 = { lg: { span: 4}, sm: { span: 4 } }
......
ui/src/views/data/buildin/Layout.vue 0 → 100644
浏览文件 @ 5ec614cc
<template>
<div class="container">
<div class="head">
<a-menu
:default-selected-keys="['config']"
:selectedKeys="[selectedKey]"
mode="horizontal"
@click="handleMenuClick"
class="navbar-secondary"
>
<a-menu-item key="config">
{{ $t('msg.config') }}
</a-menu-item>
<a-menu-item key="ranges">
{{ $t('msg.ranges') }}
</a-menu-item>
<a-menu-item key="instances">
{{ $t('msg.instances') }}
</a-menu-item>
<a-menu-item key="text">
{{ $t('msg.text') }}
</a-menu-item>
<a-menu-item key="excel">
{{ $t('msg.excel') }}
</a-menu-item>
</a-menu>
<div class="filter">
<a-input-search v-model="keywords" @change="onSearch" :allowClear="true" :placeholder="$t('tips.search')" style="width: 300px" />
</div>
<div class="buttons">
<a-button type="primary" @click="handleCreateClick()"><a-icon type="plus" :style="{fontSize: '16px'}" /> {{$t('action.create')}}</a-button>
</div>
</div>
<router-view />
</div>
</template>
<script>
export default {
name: 'BuildinLayout',
data () {
return {
selected: this.$route.path.split('/')[3] || 'config',
keywords: '',
createShow: false
}
},
computed: {
selectedKey: function() {
return this.$route.path.split('/')[3];
}
},
methods: {
handleMenuClick: function(e) {
this.selected = e.key;
this.keywords = '';
this.createShow = false;
this.updateRoutePath();
},
onSearch: function() {
this.updateRoutePath();
},
updateRoutePath: function() {
const {selected, keywords, createShow} = this;
const path = `/data/buildin/${selected}/list${createShow ? '/0' : ''}`;
const {query = {}} = this.$router;
const oldKeywords = typeof query.search === 'string' ? query.search : '';
if (this.$route.path !== path || oldKeywords !== keywords) {
if (keywords.length) {
query.search = keywords;
}
this.$router.push({
path,
query
}).then(() => {
console.log(this.$route);
});
}
},
handleCreateClick: function() {
this.createShow = true;
this.updateRoutePath();
}
},
}
</script>
ui/src/views/data/buildin/config/Edit.vue
浏览文件 @ 5ec614cc
<template>
<div>
<div class="head">
<div class="title">
<div class="title">
<span v-if="id==0">{{ $t('title.config.create') }}</span>
<span v-if="id!=0">{{ $t('menu.config.edit') }}</span>
</div>
</div>
<div class="filter"></div>
<div class="buttons">
<a-button type="primary" @click="back()">{{ $t('action.back') }}</a-button>
</div>
</div>
<div>
<a-form-model ref="editForm" :model="model" :rules="rules">
<a-row :gutter="colsFull">
<a-form-model-item :label="$t('form.name')" prop="title" :labelCol="labelColFull" :wrapperCol="wrapperColFull">
<a-input v-model="model.title" />
<a-form-model ref="editForm" :model="model" :rules="rules">
<a-form-model-item :label="$t('form.name')" prop="title" :labelCol="labelColFull" :wrapperCol="wrapperColFull">
<a-input v-model="model.title" />
</a-form-model-item>
<a-form-model-item :label="$t('form.dir')"
:labelCol="labelColFull" :wrapperCol="wrapperColFull">
<div class="input-group">
<a-form-model-item prop="folder">
<a-select v-model="model.folder">
<a-select-option v-for="(item, index) in dirs" :value="item.name" :key="index">
{{item.name}}</a-select-option>
</a-select>
</a-form-model-item>
</a-row>
<a-row :gutter="colsFull">
<a-form-model-item :label="$t('form.dir')" class="zui-input-group zui-input-with-tips"
:labelCol="labelColFull" :wrapperCol="wrapperColFull">
<a-form-model-item prop="folder" :style="{ display: 'inline-block', width: 'calc(70% - 40px)' }">
<a-select v-model="model.folder">
<a-select-option v-for="(item, index) in dirs" :value="item.name" :key="index">
{{item.name}}</a-select-option>
</a-select>
</a-form-model-item>
<span class="zui-input-group-addon" :style="{ width: '80px' }">
<span>{{ $t('form.folder') }}</span>
</span>
<a-form-model-item :style="{ display: 'inline-block', width: 'calc(30% - 40px)' }">
<a-input v-model="model.subFolder"></a-input>
</a-form-model-item>
<span class="input-group-addon">{{ $t('form.folder') }}</span>
<a-form-model-item>
<a-input v-model="model.subFolder"></a-input>
</a-form-model-item>
</a-row>
</div>
</a-form-model-item>
<a-row :gutter="colsFull">
<a-form-model-item :label="$t('form.file.name')" prop="fileName" :labelCol="labelColFull" :wrapperCol="wrapperColFull">
<a-input v-model="model.fileName" />
<a-form-model-item :label="$t('form.file.name')" prop="fileName" :labelCol="labelColFull" :wrapperCol="wrapperColFull">
<a-input v-model="model.fileName" />
</a-form-model-item>
<a-form-model-item :label="$t('form.prefix')"
:labelCol="labelColFull" :wrapperCol="wrapperColFull">
<div class="input-group">
<a-form-model-item prop="prefix">
<a-input v-model="model.prefix" />
</a-form-model-item>
</a-row>
<a-row :gutter="colsFull">
<a-form-model-item :label="$t('form.prefix')" class="zui-input-group zui-input-with-tips"
:labelCol="labelColFull" :wrapperCol="wrapperColFull">
<a-form-model-item prop="prefix" :style="{ display: 'inline-block', width: 'calc(70% - 40px)' }">
<a-input v-model="model.prefix" />
</a-form-model-item>
<span class="zui-input-group-addon" :style="{ width: '80px' }">
<span>{{$t('form.postfix')}}</span>
</span>
<a-form-model-item prop="postfix" :style="{ display: 'inline-block', width: 'calc(30% - 40px)' }">
<a-input v-model="model.postfix" />
</a-form-model-item>
<span class="input-group-addon">{{$t('form.postfix')}}</span>
<a-form-model-item prop="postfix">
<a-input v-model="model.postfix" />
</a-form-model-item>
</a-row>
</div>
</a-form-model-item>
<a-row :gutter="colsFull">
<a-form-model-item :label="$t('form.loop')" class="zui-input-group zui-input-with-tips"
:labelCol="labelColFull" :wrapperCol="wrapperColFull">
<a-form-model-item :label="$t('form.loop')"
:labelCol="labelColFull" :wrapperCol="wrapperColFull">
<a-form-model-item prop="loop" :style="{ display: 'inline-block', width: 'calc(70% - 40px)' }">
<a-input v-model="model.loop" :placeholder="$t('tips.range.int')" />
</a-form-model-item>
<div class="input-group">
<a-form-model-item prop="loop">
<a-input v-model="model.loop" :placeholder="$t('tips.range.int')" />
</a-form-model-item>
<span class="zui-input-group-addon" :style="{ width: '80px' }">
<span>{{$t('form.loopfix')}}</span>
</span>
<span class="input-group-addon">{{$t('form.loopfix')}}</span>
<a-form-model-item prop="loopfix" :style="{ display: 'inline-block', width: 'calc(30% - 40px)' }">
<a-input v-model="model.loopfix" />
</a-form-model-item>
<a-form-model-item prop="loopfix">
<a-input v-model="model.loopfix" />
</a-form-model-item>
</a-row>
</div>
</a-form-model-item>
<a-row :gutter="colsFull">
<a-form-model-item :label="$t('form.format')" class="zui-input-group zui-input-with-tips"
:labelCol="labelColFull" :wrapperCol="wrapperColFull">
<a-form-model-item :label="$t('form.format')"
:labelCol="labelColFull" :wrapperCol="wrapperColFull">
<div class="input-group">
<a-form-model-item prop="format">
<a-input v-model="model.format"></a-input>
</a-form-model-item>
<a-form-model-item prop="format" :style="{ display: 'inline-block', width: 'calc(70% - 40px)' }">
<a-input v-model="model.format"></a-input>
</a-form-model-item>
<span class="input-group-addon">{{$t('form.function')}}</span>
<span class="zui-input-group-addon" :style="{ width: '80px' }">
<span>{{$t('form.function')}}</span>
</span>
<a-form-model-item prop="format">
<a-select v-model="model.format">
<a-select-option value="md5">md5</a-select-option>
<a-select-option value="sha1">sha1</a-select-option>
<a-select-option value="base64">base64</a-select-option>
<a-select-option value="urlencode">urlencode</a-select-option>
</a-select>
</a-form-model-item>
</div>
</a-form-model-item>
<a-form-model-item prop="format" :style="{ display: 'inline-block', width: 'calc(30% - 40px)' }">
<a-select v-model="model.format">
<a-select-option value="md5">md5</a-select-option>
<a-select-option value="sha1">sha1</a-select-option>
<a-select-option value="base64">base64</a-select-option>
<a-select-option value="urlencode">urlencode</a-select-option>
</a-select>
</a-form-model-item>
</a-form-model-item>
</a-row>
<a-row :gutter="colsFull">
<a-form-model-item :label="$t('form.desc')" prop="desc" :labelCol="labelColFull" :wrapperCol="wrapperColFull">
<a-input v-model="model.desc" type="textarea" rows="3" />
</a-form-model-item>
</a-row>
<a-row :gutter="colsFull">
<a-form-model-item class="center">
<a-button @click="save" type="primary">{{$t('form.save')}}</a-button>
<a-button @click="reset" style="margin-left: 10px;">{{$t('form.reset')}}</a-button>
</a-form-model-item>
</a-row>
</a-form-model>
</div>
<a-form-model-item :label="$t('form.desc')" prop="desc" :labelCol="labelColFull" :wrapperCol="wrapperColFull">
<a-input v-model="model.desc" type="textarea" rows="3" />
</a-form-model-item>
<a-form-model-item class="center" :wrapper-col="{ span: 18, offset: 4 }">
<a-button @click="save" type="primary">{{$t('form.save')}}</a-button>
<a-button @click="reset" style="margin-left: 10px;">{{$t('form.reset')}}</a-button>
</a-form-model-item>
</a-form-model>
</div>
</template>
......@@ -140,6 +102,9 @@ import {
export default {
name: 'ConfigEdit',
props: {
afterSave: Function
},
data() {
return {
colsFull: colsFull,
......@@ -202,8 +167,10 @@ export default {
if (this.model.subFolder && this.model.subFolder != '') this.model.folder += this.model.subFolder
saveConfig(this.model).then(json => {
console.log('saveConfig', json)
this.back()
console.log('saveConfig', json, this.afterSave)
if (this.afterSave) {
this.afterSave(json);
}
})
})
},
......@@ -211,9 +178,6 @@ export default {
console.log('reset')
this.$refs.editForm.reset()
},
back() {
this.$router.push({path: '/data/buildin/config/list'});
},
}
}
</script>
......
ui/src/views/data/buildin/config/List.vue
浏览文件 @ 5ec614cc
<template>
<div>
<div class="head">
<div class="title">{{ $t('menu.config.list') }}</div>
<div class="filter">
<a-input-search v-model="keywords" @change="onSearch" :allowClear="true"
placeholder="$t('tips.search')" style="width: 300px" />
</div>
<div class="buttons">
<a-button type="primary" @click="create()">{{ $t('action.create') }}</a-button>
</div>
</div>
<div class='main-table'>
<a-table :columns="columns" :data-source="models" :pagination="false" rowKey="id">
<span slot="folderWithPath" slot-scope="text, record">
<a-tooltip placement="top" overlayClassName="tooltip-light">
......@@ -22,8 +11,8 @@
</span>
<span slot="action" slot-scope="record">
<a @click="edit(record)">{{ $t('action.edit') }}</a> |
<a @click="design(record)">{{ $t('action.design') }}</a> |
<a @click="edit(record)" :title="$t('action.edit')"><a-icon type="form" :style="{fontSize: '16px'}" /></a> &nbsp;
<a @click="design(record)" :title="$t('action.design')"><a-icon type="control" :style="{fontSize: '16px'}" /></a> &nbsp;
<a-popconfirm
:title="$t('tips.delete')"
......@@ -31,7 +20,7 @@
:cancelText="$t('msg.no')"
@confirm="remove(record)"
>
<a href="#">{{ $t('action.delete') }}</a> |
<a href="#" :title="$t('action.delete')"><a-icon type="delete" :style="{fontSize: '16px'}" /></a> &nbsp;
</a-popconfirm>
<a-tooltip placement="top" overlayClassName="tooltip-light">
......@@ -43,14 +32,14 @@
</div>
</div>
</template>
<a href="#">{{$t('tips.refer')}}</a>
<a href="#" :title="$t('tips.refer')">&nbsp; <a-icon type="link" :style="{fontSize: '16px'}" /></a>
</a-tooltip>
</span>
</a-table>
<div class="pagination-wrapper">
<a-pagination @change="onPageChange" :current="page" :total="total" :defaultPageSize="15" />
<a-pagination @change="onPageChange" :current="page" :total="total" :defaultPageSize="15" size="small" simple />
</div>
<div class="full-screen-modal">
......@@ -65,6 +54,20 @@
</design-component>
</div>
<a-modal
:visible="editModalVisible"
:title="editModalVisible ? editRecord ? `${$t('menu.config.edit')}: ${editRecord.title}` : $t('title.config.create') : ''"
:footer="false"
:centered="true"
:width="700"
@cancel="handleCancelEditModal"
>
<Edit
:v-if="editModalVisible"
:id="editModalVisible ? editID ? editID : 0 : null"
:afterSave="handleEditSave"
/>
</a-modal>
</div>
</template>
......@@ -74,11 +77,13 @@ import {listConfig, removeConfig} from "../../../../api/manage";
import {PageSize, pathToRelated} from "../../../../api/utils";
import { DesignComponent } from '../../../../components'
import debounce from "lodash.debounce"
import Edit from './Edit';
export default {
name: 'ConfigList',
components: {
DesignComponent
DesignComponent,
Edit,
},
data() {
const columns = [
......@@ -90,11 +95,13 @@ export default {
title: this.$i18n.t('form.file'),
dataIndex: 'folder',
scopedSlots: { customRender: 'folderWithPath' },
width: 450
},
{
title: this.$i18n.t('form.opt'),
key: 'action',
scopedSlots: { customRender: 'action' },
width: 100
},
];
......@@ -106,19 +113,42 @@ export default {
designModel: {},
time: 0,
keywords: '',
page: 1,
total: 0,
pageSize: PageSize,
};
},
computed: {
keywords: function() {
if (this.$route.query && typeof this.$route.query.search === 'string') {
return this.$route.query.search;
}
return '';
},
editID: function() {
if (this.$route.params && this.$route.params.id !== undefined) {
return this.$route.params.id;
}
return null;
},
editModalVisible: function() {
return this.editID !== null;
},
editRecord: function() {
const {editID} = this;
if (!editID) {
return null;
}
return this.models.find(x => x.id == editID);
}
},
created () {
this.loadData()
},
mounted () {
watch: {
keywords: function() {
this.onSearch();
}
},
filters: {
pathToRelated: function (path) {
......@@ -136,9 +166,23 @@ export default {
this.total = json.total
})
},
handleCancelEditModal() {
const {path, query} = this.$route;
const newPath = '/data/buildin/config/list';
if (path !== newPath) {
this.$router.replace({path: newPath, query});
}
},
handleEditSave() {
this.handleCancelEditModal();
this.loadData();
},
edit(record) {
console.log(record)
this.$router.push({path: `/data/buildin/config/edit/${record.id}`});
const {path, query = {}} = this.$router;
const newPath = `/data/buildin/config/list/${record.id}`;
if (path !== newPath) {
this.$router.replace({path: newPath, query});
}
},
design(record) {
this.time = Date.now() // trigger data refresh
......@@ -175,7 +219,3 @@ export default {
}
}
</script>
<style scoped>
</style>
ui/src/views/data/buildin/excel/Edit.vue
浏览文件 @ 5ec614cc
<template>
<div>
<div class="head">
<div class="title">
<div class="title">
<span v-if="id==0">{{ $t('title.excel.create') }}</span>
<span v-if="id!=0">{{ $t('menu.excel.edit') }}</span>
</div>
</div>
<div class="filter"></div>
<div class="buttons">
<a-button type="primary" @click="back()">{{ $t('action.back') }}</a-button>
</div>
</div>
<a-form-model ref="editForm" :model="model" :rules="rules">
<a-form-model-item :label="$t('form.name')" prop="title" :labelCol="labelColFull" :wrapperCol="wrapperColFull">
<a-input v-model="model.title" />
</a-form-model-item>
<div>
<a-form-model ref="editForm" :model="model" :rules="rules">
<a-row :gutter="colsFull">
<a-form-model-item :label="$t('form.name')" prop="title" :labelCol="labelColFull" :wrapperCol="wrapperColFull">
<a-input v-model="model.title" />
<a-form-model-item :label="$t('form.dir')" prop="folder" class="zui-input-group zui-input-with-tips"
:labelCol="labelColFull" :wrapperCol="wrapperColFull">
<div class="input-group">
<a-form-model-item prop="folder">
<a-select v-model="model.folder">
<a-select-option v-for="(item, index) in dirs" :value="item.name" :key="index">
{{item.name}}</a-select-option>
</a-select>
</a-form-model-item>
</a-row>
<a-row :gutter="colsFull">
<a-form-model-item :label="$t('form.dir')" prop="folder" class="zui-input-group zui-input-with-tips"
:labelCol="labelColFull" :wrapperCol="wrapperColFull">
<a-form-model-item prop="folder" :style="{ display: 'inline-block', width: 'calc(70% - 30px)' }">
<a-select v-model="model.folder">
<a-select-option v-for="(item, index) in dirs" :value="item.name" :key="index">
{{item.name}}</a-select-option>
</a-select>
</a-form-model-item>
<span class="zui-input-group-addon" :style="{ width: '60px' }">
<span>{{ $t('form.folder') }}</span>
</span>
<span class="input-group-addon">{{ $t('form.folder') }}</span>
<a-form-model-item :style="{ display: 'inline-block', width: 'calc(30% - 30px)' }">
<a-input v-model="model.subFolder"></a-input>
</a-form-model-item>
<a-form-model-item>
<a-input v-model="model.subFolder"></a-input>
</a-form-model-item>
</a-row>
</div>
</a-form-model-item>
<a-row :gutter="colsFull">
<a-form-model-item :label="$t('form.file.name')" prop="fileName" :labelCol="labelColFull" :wrapperCol="wrapperColFull">
<a-input v-model="model.fileName" />
</a-form-model-item>
</a-row>
<a-form-model-item :label="$t('form.file.name')" prop="fileName" :labelCol="labelColFull" :wrapperCol="wrapperColFull">
<a-input v-model="model.fileName" />
</a-form-model-item>
<a-row :gutter="colsFull">
<a-form-model-item class="center">
<a-button @click="save" type="primary">{{$t('form.save')}}</a-button>
<a-button @click="reset" style="margin-left: 10px;">{{$t('form.reset')}}</a-button>
</a-form-model-item>
</a-row>
</a-form-model>
</div>
<a-form-model-item class="center" :wrapper-col="{ span: 18, offset: 4 }">
<a-button @click="save" type="primary">{{$t('form.save')}}</a-button>
<a-button @click="reset" style="margin-left: 10px;">{{$t('form.reset')}}</a-button>
</a-form-model-item>
</a-form-model>
</div>
</template>
......@@ -73,6 +50,9 @@ import {
export default {
name: 'TestEdit',
props: {
afterSave: Function
},
data() {
return {
colsFull: colsFull,
......@@ -135,7 +115,9 @@ export default {
if (this.model.subFolder && this.model.subFolder != '') this.model.folder += this.model.subFolder
saveText(this.model).then(json => {
console.log('saveText', json)
this.back()
if (this.afterSave) {
this.afterSave(json);
}
})
})
},
......@@ -143,9 +125,6 @@ export default {
console.log('reset')
this.$refs.editForm.reset()
},
back() {
this.$router.push({path: '/data/buildin/excel/list'});
},
}
}
</script>
......
ui/src/views/data/buildin/excel/List.vue
浏览文件 @ 5ec614cc
<template>
<div>
<div class="head">
<div class="title">{{ $t('menu.excel.list') }}</div>
<div class="filter">
<a-input-search v-model="keywords" @change="onSearch" :allowClear="true"
placeholder="$t('tips.search')" style="width: 300px" />
</div>
<div class="buttons">
<a-button type="primary" @click="create()">{{ $t('action.create') }}</a-button>
</div>
</div>
<div class="main-table">
<a-table :columns="columns" :data-source="models" :pagination="false" rowKey="id">
<span slot="folderWithPath" slot-scope="text, record">
<a-tooltip placement="top" overlayClassName="tooltip-light">
......@@ -22,7 +11,7 @@
</span>
<span slot="action" slot-scope="record">
<a @click="edit(record)">{{ $t('action.edit') }}</a> |
<a @click="edit(record)" :title="$t('action.edit')"><a-icon type="form" :style="{fontSize: '16px'}" /></a> &nbsp;
<a-popconfirm
:title="$t('tips.delete')"
......@@ -30,8 +19,8 @@
:cancelText="$t('msg.no')"
@confirm="remove(record)"
>
<a href="#">{{ $t('action.delete') }}</a>
</a-popconfirm> |
<a href="#" :title="$t('action.delete')"><a-icon type="delete" :style="{fontSize: '16px'}" /></a> &nbsp;
</a-popconfirm> &nbsp;
<a-tooltip placement="top" overlayClassName="tooltip-light">
<template slot="title">
......@@ -44,17 +33,29 @@
</div>
</div>
</template>
<a href="#">{{$t('tips.refer')}}</a>
<a href="#" :title="$t('tips.refer')">&nbsp; <a-icon type="link" :style="{fontSize: '16px'}" /></a>
</a-tooltip>
</span>
</a-table>
<div class="pagination-wrapper">
<a-pagination @change="onPageChange" :current="page" :total="total" :defaultPageSize="15" />
<a-pagination @change="onPageChange" :current="page" :total="total" :defaultPageSize="15" simple size="small" />
</div>
<a-modal
:visible="editModalVisible"
:title="editModalVisible ? editRecord ? `${$t('menu.excel.edit')}: ${editRecord.title}` : $t('title.excel.create') : ''"
:footer="false"
:centered="true"
:width="700"
@cancel="handleCancelEditModal"
>
<Edit
:v-if="editModalVisible"
:id="editModalVisible ? editID ? editID : 0 : null"
:afterSave="handleEditSave"
/>
</a-modal>
</div>
</template>
......@@ -63,10 +64,12 @@
import {listExcel, removeExcel} from "../../../../api/manage";
import {PageSize, pathToRelated} from "../../../../api/utils";
import debounce from "lodash.debounce"
import Edit from './Edit';
export default {
name: 'ExcelList',
components: {
Edit,
},
data() {
const columns = [
......@@ -78,11 +81,13 @@ export default {
title: this.$i18n.t('form.file'),
dataIndex: 'folder',
scopedSlots: { customRender: 'folderWithPath' },
width: 450
},
{
title: this.$i18n.t('form.opt'),
key: 'action',
scopedSlots: { customRender: 'action' },
width: 80
},
];
......@@ -94,20 +99,43 @@ export default {
designModel: {},
time: 0,
keywords: '',
page: 1,
total: 0,
pageSize: PageSize,
};
},
computed: {
keywords: function() {
if (this.$route.query && typeof this.$route.query.search === 'string') {
return this.$route.query.search;
}
return '';
},
editID: function() {
if (this.$route.params && this.$route.params.id !== undefined) {
return this.$route.params.id;
}
return null;
},
editModalVisible: function() {
return this.editID !== null;
},
editRecord: function() {
const {editID} = this;
if (!editID) {
return null;
}
return this.models.find(x => x.id == editID);
}
},
watch: {
keywords: function() {
this.onSearch();
}
},
created () {
this.loadData()
},
mounted () {
},
filters: {
pathToRelated: function (path) {
return pathToRelated(path)
......@@ -124,9 +152,23 @@ export default {
this.total = json.total
})
},
handleCancelEditModal() {
const {path, query} = this.$route;
const newPath = '/data/buildin/excel/list';
if (path !== newPath) {
this.$router.replace({path: newPath, query});
}
},
handleEditSave() {
this.handleCancelEditModal();
this.loadData();
},
edit(record) {
console.log(record)
this.$router.push({path: `/data/buildin/excel/edit/${record.id}`});
const {path, query = {}} = this.$router;
const newPath = `/data/buildin/excel/list/${record.id}`;
if (path !== newPath) {
this.$router.replace({path: newPath, query});
}
},
remove(record) {
console.log(record)
......
ui/src/views/data/buildin/instances/Edit.vue
浏览文件 @ 5ec614cc
<template>
<div>
<div class="head">
<div class="title">
<div class="title">
<span v-if="id==0">{{ $t('title.instances.create') }}</span>
<span v-if="id!=0">{{ $t('menu.instances.edit') }}</span>
</div>
</div>
<div class="filter"></div>
<div class="buttons">
<a-button type="primary" @click="back()">{{ $t('action.back') }}</a-button>
</div>
</div>
<div>
<a-form-model ref="editForm" :model="model" :rules="rules">
<a-row :gutter="colsFull">
<a-form-model-item :label="$t('form.name')" prop="title" :labelCol="labelColFull" :wrapperCol="wrapperColFull">
<a-input v-model="model.title" />
</a-form-model-item>
</a-row>
<a-row :gutter="colsFull">
<a-form-model-item :label="$t('form.dir')" prop="folder" class="zui-input-group zui-input-with-tips"
:labelCol="labelColFull" :wrapperCol="wrapperColFull">
<a-form-model-item prop="folder" :style="{ display: 'inline-block', width: 'calc(70% - 30px)' }">
<a-select v-model="model.folder">
<a-select-option v-for="(item, index) in dirs" :value="item.name" :key="index">
{{item.name}}</a-select-option>
</a-select>
</a-form-model-item>
<span class="zui-input-group-addon" :style="{ width: '60px' }">
<span>{{ $t('form.folder') }}</span>
</span>
<a-form-model-item :style="{ display: 'inline-block', width: 'calc(30% - 30px)' }">
<a-input v-model="model.subFolder"></a-input>
</a-form-model-item>
<a-form-model ref="editForm" :model="model" :rules="rules">
<a-form-model-item :label="$t('form.name')" prop="title" :labelCol="labelColFull" :wrapperCol="wrapperColFull">
<a-input v-model="model.title" />
</a-form-model-item>
<a-form-model-item :label="$t('form.dir')" prop="folder" class="zui-input-group zui-input-with-tips"
:labelCol="labelColFull" :wrapperCol="wrapperColFull">
<div class="input-group">
<a-form-model-item prop="folder">
<a-select v-model="model.folder">
<a-select-option v-for="(item, index) in dirs" :value="item.name" :key="index">
{{item.name}}</a-select-option>
</a-select>
</a-form-model-item>
</a-row>
<a-row :gutter="colsFull">
<a-form-model-item :label="$t('form.file.name')" prop="fileName" :labelCol="labelColFull" :wrapperCol="wrapperColFull">
<a-input v-model="model.fileName" />
<span class="input-group-addon">{{ $t('form.folder') }}</span>
<a-form-model-item :style="{ display: 'inline-block', width: 'calc(30% - 30px)' }">
<a-input v-model="model.subFolder"></a-input>
</a-form-model-item>
</a-row>
<a-row :gutter="colsFull">
<a-col :span="colsHalf">
<a-form-model-item :label="$t('form.prefix')" prop="prefix" :labelCol="labelColHalf" :wrapperCol="wrapperColHalf">
<a-input v-model="model.prefix" />
</a-form-model-item>
</a-col>
<a-col :span="colsHalf">
<a-form-model-item :label="$t('form.postfix')" prop="postfix" :labelCol="labelColHalf2" :wrapperCol="wrapperColHalf">
<a-input v-model="model.postfix" />
</a-form-model-item>
</a-col>
</a-row>
<a-row :gutter="colsFull">
<a-form-model-item :label="$t('form.desc')" prop="desc" :labelCol="labelColFull" :wrapperCol="wrapperColFull">
<a-input v-model="model.desc" type="textarea" rows="3" />
</div>
</a-form-model-item>
<a-form-model-item :label="$t('form.file.name')" prop="fileName" :labelCol="labelColFull" :wrapperCol="wrapperColFull">
<a-input v-model="model.fileName" />
</a-form-model-item>
<a-form-model-item :label="$t('form.prefix')" prop="prefix" :labelCol="labelColFull" :wrapperCol="wrapperColFull">
<div class="input-group">
<a-input v-model="model.prefix" />
<span class="input-group-addon">{{ $t('form.postfix') }}</span>
<a-form-model-item prop="postfix">
<a-input v-model="model.postfix" />
</a-form-model-item>
</a-row>
</div>
</a-form-model-item>
<a-row :gutter="colsFull">
<a-form-model-item class="center">
<a-button @click="save" type="primary">{{$t('form.save')}}</a-button>
<a-button @click="reset" style="margin-left: 10px;">{{$t('form.reset')}}</a-button>
</a-form-model-item>
</a-row>
</a-form-model>
</div>
<a-form-model-item :label="$t('form.desc')" prop="desc" :labelCol="labelColFull" :wrapperCol="wrapperColFull">
<a-input v-model="model.desc" type="textarea" rows="3" />
</a-form-model-item>
<a-form-model-item class="center" :wrapper-col="{ span: 18, offset: 4 }">
<a-button @click="save" type="primary">{{$t('form.save')}}</a-button>
<a-button @click="reset" style="margin-left: 10px;">{{$t('form.reset')}}</a-button>
</a-form-model-item>
</a-form-model>
</div>
</template>
......@@ -92,6 +62,9 @@ import {
export default {
name: 'RangesEdit',
props: {
afterSave: Function
},
data() {
return {
colsFull: colsFull,
......@@ -154,7 +127,9 @@ export default {
if (this.model.subFolder && this.model.subFolder != '') this.model.folder += this.model.subFolder
saveInstances(this.model).then(json => {
console.log('saveInstances', json)
this.back()
if (this.afterSave) {
this.afterSave(json);
}
})
})
},
......@@ -162,9 +137,6 @@ export default {
console.log('reset')
this.$refs.editForm.reset()
},
back() {
this.$router.push({path: '/data/buildin/instances/list'});
},
}
}
</script>
......
ui/src/views/data/buildin/instances/List.vue
浏览文件 @ 5ec614cc
<template>
<div>
<div class="head">
<div class="title">{{ $t('menu.instances.list') }}</div>
<div class="filter">
<a-input-search v-model="keywords" @change="onSearch" :allowClear="true"
placeholder="$t('tips.search')" style="width: 300px" />
</div>
<div class="buttons">
<a-button type="primary" @click="create()">{{ $t('action.create') }}</a-button>
</div>
</div>
<div class="main-table">
<a-table :columns="columns" :data-source="models" :pagination="false" rowKey="id">
<span slot="folderWithPath" slot-scope="text, record">
<a-tooltip placement="top" overlayClassName="tooltip-light">
......@@ -22,8 +11,8 @@
</span>
<span slot="action" slot-scope="record">
<a @click="edit(record)">{{ $t('action.edit') }}</a> |
<a @click="design(record)">{{ $t('action.design') }}</a> |
<a @click="edit(record)" :title="$t('action.edit')"><a-icon type="form" :style="{fontSize: '16px'}" /></a> &nbsp;
<a @click="design(record)" :title="$t('action.design')"><a-icon type="control" :style="{fontSize: '16px'}" /></a> &nbsp;
<a-popconfirm
:title="$t('tips.delete')"
......@@ -31,8 +20,8 @@
:cancelText="$t('msg.no')"
@confirm="remove(record)"
>
<a href="#">{{ $t('action.delete') }}</a>
</a-popconfirm> |
<a href="#" :title="$t('action.delete')"><a-icon type="delete" :style="{fontSize: '16px'}" /></a> &nbsp;
</a-popconfirm> &nbsp;
<a-tooltip placement="top" overlayClassName="tooltip-light">
<template slot="title">
......@@ -44,15 +33,13 @@
</div>
</div>
</template>
<a href="#">{{$t('tips.refer')}}</a>
<a href="#" :title="$t('tips.refer')">&nbsp; <a-icon type="link" :style="{fontSize: '16px'}" /></a>
</a-tooltip>
</span>
</a-table>
<div class="pagination-wrapper">
<a-pagination @change="onPageChange" :current="page" :total="total" :defaultPageSize="15" />
<a-pagination @change="onPageChange" :current="page" :total="total" :defaultPageSize="15" simple size="small" />
</div>
<div class="full-screen-modal">
......@@ -67,6 +54,20 @@
</design-component>
</div>
<a-modal
:visible="editModalVisible"
:title="editModalVisible ? editRecord ? `${$t('menu.instances.edit')}: ${editRecord.title}` : $t('title.instances.create') : ''"
:footer="false"
:centered="true"
:width="700"
@cancel="handleCancelEditModal"
>
<Edit
:v-if="editModalVisible"
:id="editModalVisible ? editID ? editID : 0 : null"
:afterSave="handleEditSave"
/>
</a-modal>
</div>
</template>
......@@ -76,11 +77,13 @@ import {listInstances, removeInstances} from "../../../../api/manage";
import { DesignComponent } from '../../../../components'
import {PageSize, ResTypeInstances, pathToRelated} from "../../../../api/utils";
import debounce from "lodash.debounce"
import Edit from './Edit';
export default {
name: 'InstanceList',
components: {
DesignComponent
DesignComponent,
Edit,
},
data() {
const columns = [
......@@ -92,11 +95,13 @@ export default {
title: this.$i18n.t('form.file'),
dataIndex: 'folder',
scopedSlots: { customRender: 'folderWithPath' },
width: 450
},
{
title: this.$i18n.t('form.opt'),
key: 'action',
scopedSlots: { customRender: 'action' },
width: 100
},
];
......@@ -109,14 +114,39 @@ export default {
type: ResTypeInstances,
time: 0,
keywords: '',
page: 1,
total: 0,
pageSize: PageSize,
};
},
computed: {
keywords: function() {
if (this.$route.query && typeof this.$route.query.search === 'string') {
return this.$route.query.search;
}
return '';
},
editID: function() {
if (this.$route.params && this.$route.params.id !== undefined) {
return this.$route.params.id;
}
return null;
},
editModalVisible: function() {
return this.editID !== null;
},
editRecord: function() {
const {editID} = this;
if (!editID) {
return null;
}
return this.models.find(x => x.id == editID);
}
},
watch: {
keywords: function() {
this.onSearch();
}
},
created () {
this.loadData()
......@@ -139,9 +169,23 @@ export default {
this.total = json.total
})
},
handleCancelEditModal() {
const {path, query} = this.$route;
const newPath = '/data/buildin/instances/list';
if (path !== newPath) {
this.$router.replace({path: newPath, query});
}
},
handleEditSave() {
this.handleCancelEditModal();
this.loadData();
},
edit(record) {
console.log(record)
this.$router.push({path: `/data/buildin/instances/edit/${record.id}`});
const {path, query = {}} = this.$router;
const newPath = `/data/buildin/instances/list/${record.id}`;
if (path !== newPath) {
this.$router.replace({path: newPath, query});
}
},
design(record) {
this.time = Date.now() // trigger data refresh
......
ui/src/views/data/buildin/ranges/Edit.vue
浏览文件 @ 5ec614cc
<template>
<div>
<div class="head">
<div class="title">
<div class="title">
<span v-if="id==0">{{ $t('title.ranges.create') }}</span>
<span v-if="id!=0">{{ $t('menu.ranges.edit') }}</span>
</div>
</div>
<div class="filter"></div>
<div class="buttons">
<a-button type="primary" @click="back()">{{ $t('action.back') }}</a-button>
</div>
</div>
<div>
<a-form-model ref="editForm" :model="model" :rules="rules">
<a-row :gutter="colsFull">
<a-form-model-item :label="$t('form.name')" prop="title" :labelCol="labelColFull" :wrapperCol="wrapperColFull">
<a-input v-model="model.title" />
</a-form-model-item>
</a-row>
<a-row :gutter="colsFull">
<a-form-model-item :label="$t('form.dir')" prop="folder" class="zui-input-group zui-input-with-tips"
:labelCol="labelColFull" :wrapperCol="wrapperColFull">
<a-form-model-item prop="folder" :style="{ display: 'inline-block', width: 'calc(70% - 30px)' }">
<a-select v-model="model.folder">
<a-select-option v-for="(item, index) in dirs" :value="item.name" :key="index">
{{item.name}}</a-select-option>
</a-select>
</a-form-model-item>
<span class="zui-input-group-addon" :style="{ width: '60px' }">
<span>{{ $t('form.folder') }}</span>
</span>
<a-form-model-item :style="{ display: 'inline-block', width: 'calc(30% - 30px)' }">
<a-input v-model="model.subFolder"></a-input>
</a-form-model-item>
<a-form-model ref="editForm" :model="model" :rules="rules">
<a-form-model-item :label="$t('form.name')" prop="title" :labelCol="labelColFull" :wrapperCol="wrapperColFull">
<a-input v-model="model.title" />
</a-form-model-item>
<a-form-model-item :label="$t('form.dir')" prop="folder" class="zui-input-group zui-input-with-tips"
:labelCol="labelColFull" :wrapperCol="wrapperColFull">
<div class="input-group">
<a-form-model-item prop="folder">
<a-select v-model="model.folder">
<a-select-option v-for="(item, index) in dirs" :value="item.name" :key="index">
{{item.name}}</a-select-option>
</a-select>
</a-form-model-item>
</a-row>
<a-row :gutter="colsFull">
<a-form-model-item :label="$t('form.file.name')" prop="fileName" :labelCol="labelColFull" :wrapperCol="wrapperColFull">
<a-input v-model="model.fileName" />
</a-form-model-item>
</a-row>
<span class="input-group-addon">{{ $t('form.folder') }}</span>
<a-row :gutter="colsFull">
<a-col :span="colsHalf">
<a-form-model-item :label="$t('form.prefix')" prop="prefix" :labelCol="labelColHalf" :wrapperCol="wrapperColHalf">
<a-input v-model="model.prefix" />
<a-form-model-item :style="{ display: 'inline-block', width: 'calc(30% - 30px)' }">
<a-input v-model="model.subFolder"></a-input>
</a-form-model-item>
</a-col>
<a-col :span="colsHalf">
<a-form-model-item :label="$t('form.post')" prop="postfix" :labelCol="labelColHalf2" :wrapperCol="wrapperColHalf">
</div>
</a-form-model-item>
<a-form-model-item :label="$t('form.file.name')" prop="fileName" :labelCol="labelColFull" :wrapperCol="wrapperColFull">
<a-input v-model="model.fileName" />
</a-form-model-item>
<a-form-model-item :label="$t('form.prefix')" prop="prefix" :labelCol="labelColFull" :wrapperCol="wrapperColFull">
<div class="input-group">
<a-input v-model="model.prefix" />
<span class="input-group-addon">{{$t('form.postfix')}}</span>
<a-form-model-item prop="postfix">
<a-input v-model="model.postfix" />
</a-form-model-item>
</a-col>
</a-row>
<a-row :gutter="colsFull">
<a-form-model-item :label="$t('form.desc')" prop="desc" :labelCol="labelColFull" :wrapperCol="wrapperColFull">
<a-input v-model="model.desc" type="textarea" rows="3" />
</a-form-model-item>
</a-row>
<a-row :gutter="colsFull">
<a-form-model-item class="center">
<a-button @click="save" type="primary">{{$t('form.save')}}</a-button>
<a-button @click="reset" style="margin-left: 10px;">{{$t('form.reset')}}</a-button>
</a-form-model-item>
</a-row>
</div>
</a-form-model-item>
<a-form-model-item :label="$t('form.desc')" prop="desc" :labelCol="labelColFull" :wrapperCol="wrapperColFull">
<a-input v-model="model.desc" type="textarea" rows="3" />
</a-form-model-item>
<a-form-model-item class="center" :wrapper-col="{ span: 18, offset: 4 }">
<a-button @click="save" type="primary">{{$t('form.save')}}</a-button>
<a-button @click="reset" style="margin-left: 10px;">{{$t('form.reset')}}</a-button>
</a-form-model-item>
</a-form-model>
</div>
</div>
</template>
......@@ -92,6 +64,9 @@ import {
export default {
name: 'RangesEdit',
props: {
afterSave: Function
},
data() {
return {
colsFull: colsFull,
......@@ -154,7 +129,9 @@ export default {
if (this.model.subFolder && this.model.subFolder != '') this.model.folder += this.model.subFolder
saveRanges(this.model).then(json => {
console.log('saveRanges', json)
this.back()
if (this.afterSave) {
this.afterSave(json);
}
})
})
},
......@@ -162,9 +139,6 @@ export default {
console.log('reset')
this.$refs.editForm.reset()
},
back() {
this.$router.push({path: '/data/buildin/ranges/list'});
},
}
}
</script>
......
ui/src/views/data/buildin/ranges/List.vue
浏览文件 @ 5ec614cc
<template>
<div>
<div class="head">
<div class="title">{{ $t('menu.ranges.list') }}</div>
<div class="filter">
<a-input-search v-model="keywords" @change="onSearch" :allowClear="true"
placeholder="$t('tips.search')" style="width: 300px" />
</div>
<div class="buttons">
<a-button type="primary" @click="create()">{{ $t('action.create') }}</a-button>
</div>
</div>
<div class="main-table">
<a-table :columns="columns" :data-source="models" :pagination="false" rowKey="id">
<span slot="folderWithPath" slot-scope="text, record">
<a-tooltip placement="top" overlayClassName="tooltip-light">
......@@ -22,8 +11,8 @@
</span>
<span slot="action" slot-scope="record">
<a @click="edit(record)">{{ $t('action.edit') }}</a> |
<a @click="design(record)">{{ $t('action.design') }}</a> |
<a @click="edit(record)" :title="$t('action.edit')"><a-icon type="form" :style="{fontSize: '16px'}" /></a> &nbsp;
<a @click="design(record)" :title="$t('action.design')"><a-icon type="control" :style="{fontSize: '16px'}" /></a> &nbsp;
<a-popconfirm
:title="$t('tips.delete')"
......@@ -31,7 +20,7 @@
:cancelText="$t('msg.no')"
@confirm="remove(record)"
>
<a href="#">{{ $t('action.delete') }}</a> |
<a href="#" :title="$t('action.delete')"><a-icon type="delete" :style="{fontSize: '16px'}" /></a> &nbsp;
</a-popconfirm>
<a-tooltip placement="top" overlayClassName="tooltip-light">
......@@ -44,7 +33,7 @@
</div>
</div>
</template>
<a href="#">{{$t('tips.refer')}}</a>
<a href="#" :title="$t('tips.refer')">&nbsp; <a-icon type="link" :style="{fontSize: '16px'}" /></a>
</a-tooltip>
</span>
......@@ -52,7 +41,7 @@
</a-table>
<div class="pagination-wrapper">
<a-pagination @change="onPageChange" :current="page" :total="total" :defaultPageSize="15" />
<a-pagination @change="onPageChange" :current="page" :total="total" :defaultPageSize="15" simple size="small"/>
</div>
<div class="full-screen-modal">
......@@ -67,6 +56,20 @@
</design-component>
</div>
<a-modal
:visible="editModalVisible"
:title="editModalVisible ? editRecord ? `${$t('menu.ranges.edit')}: ${editRecord.title}` : $t('title.ranges.create') : ''"
:footer="false"
:centered="true"
:width="700"
@cancel="handleCancelEditModal"
>
<Edit
:v-if="editModalVisible"
:id="editModalVisible ? editID ? editID : 0 : null"
:afterSave="handleEditSave"
/>
</a-modal>
</div>
</template>
......@@ -76,11 +79,13 @@ import {listRanges, removeRanges} from "../../../../api/manage";
import { DesignComponent } from '../../../../components'
import {PageSize, pathToRelated} from "../../../../api/utils";
import debounce from "lodash.debounce"
import Edit from './Edit';
export default {
name: 'RangesList',
components: {
DesignComponent
DesignComponent,
Edit,
},
data() {
const columns = [
......@@ -92,11 +97,13 @@ export default {
title: this.$i18n.t('form.file'),
dataIndex: 'folder',
scopedSlots: { customRender: 'folderWithPath' },
width: 450
},
{
title: this.$i18n.t('form.opt'),
key: 'action',
scopedSlots: { customRender: 'action' },
width: 100
},
];
......@@ -108,14 +115,39 @@ export default {
designModel: {},
time: 0,
keywords: '',
page: 1,
total: 0,
pageSize: PageSize,
};
},
computed: {
keywords: function() {
if (this.$route.query && typeof this.$route.query.search === 'string') {
return this.$route.query.search;
}
return '';
},
editID: function() {
if (this.$route.params && this.$route.params.id !== undefined) {
return this.$route.params.id;
}
return null;
},
editModalVisible: function() {
return this.editID !== null;
},
editRecord: function() {
const {editID} = this;
if (!editID) {
return null;
}
return this.models.find(x => x.id == editID);
}
},
watch: {
keywords: function() {
this.onSearch();
}
},
created () {
this.loadData()
......@@ -139,9 +171,23 @@ export default {
this.total = json.total
})
},
handleCancelEditModal() {
const {path, query} = this.$route;
const newPath = '/data/buildin/ranges/list';
if (path !== newPath) {
this.$router.replace({path: newPath, query});
}
},
handleEditSave() {
this.handleCancelEditModal();
this.loadData();
},
edit(record) {
console.log(record)
this.$router.push({path: `/data/buildin/ranges/edit/${record.id}`});
const {path, query = {}} = this.$router;
const newPath = `/data/buildin/ranges/list/${record.id}`;
if (path !== newPath) {
this.$router.replace({path: newPath, query});
}
},
design(record) {
this.time = Date.now() // trigger data refresh
......
ui/src/views/data/buildin/text/Edit.vue
浏览文件 @ 5ec614cc
<template>
<div>
<div class="head">
<div class="title">
<div class="title">
<span v-if="id==0">{{ $t('title.text.create') }}</span>
<span v-if="id!=0">{{ $t('menu.text.edit') }}</span>
</div>
</div>
<div class="filter"></div>
<div class="buttons">
<a-button type="primary" @click="back()">{{ $t('action.back') }}</a-button>
</div>
</div>
<div>
<a-form-model ref="editForm" :model="model" :rules="rules">
<a-row :gutter="colsFull">
<a-form-model-item :label="$t('form.name')" prop="title" :labelCol="labelColFull" :wrapperCol="wrapperColFull">
<a-input v-model="model.title" />
<a-form-model ref="editForm" :model="model" :rules="rules">
<a-form-model-item :label="$t('form.name')" prop="title" :labelCol="labelColFull" :wrapperCol="wrapperColFull">
<a-input v-model="model.title" />
</a-form-model-item>
<a-form-model-item :label="$t('form.dir')" prop="folder" class="zui-input-group zui-input-with-tips"
:labelCol="labelColFull" :wrapperCol="wrapperColFull">
<div class="input-group">
<a-form-model-item>
<a-select v-model="model.folder">
<a-select-option v-for="(item, index) in dirs" :value="item.name" :key="index">
{{item.name}}</a-select-option>
</a-select>
</a-form-model-item>
</a-row>
<a-row :gutter="colsFull">
<a-form-model-item :label="$t('form.dir')" prop="folder" class="zui-input-group zui-input-with-tips"
:labelCol="labelColFull" :wrapperCol="wrapperColFull">
<a-form-model-item prop="folder" :style="{ display: 'inline-block', width: 'calc(70% - 30px)' }">
<a-select v-model="model.folder">
<a-select-option v-for="(item, index) in dirs" :value="item.name" :key="index">
{{item.name}}</a-select-option>
</a-select>
</a-form-model-item>
<span class="zui-input-group-addon" :style="{ width: '60px' }">
<span>{{ $t('form.folder') }}</span>
</span>
<span class="input-group-addon">{{ $t('form.folder') }}</span>
<a-form-model-item :style="{ display: 'inline-block', width: 'calc(30% - 30px)' }">
<a-input v-model="model.subFolder"></a-input>
</a-form-model-item>
<a-form-model-item>
<a-input v-model="model.subFolder"></a-input>
</a-form-model-item>
</a-row>
</div>
</a-form-model-item>
<a-row :gutter="colsFull">
<a-form-model-item :label="$t('form.file.name')" prop="fileName" :labelCol="labelColFull" :wrapperCol="wrapperColFull">
<a-input v-model="model.fileName" />
</a-form-model-item>
</a-row>
<a-form-model-item :label="$t('form.file.name')" prop="fileName" :labelCol="labelColFull" :wrapperCol="wrapperColFull">
<a-input v-model="model.fileName" />
</a-form-model-item>
<a-row :gutter="colsFull">
<a-form-model-item :label="$t('form.file.content')" prop="content" :labelCol="labelColFull" :wrapperCol="wrapperColFull">
<a-input v-model="model.content" type="textarea" rows="3" />
</a-form-model-item>
</a-row>
<a-form-model-item :label="$t('form.file.content')" prop="content" :labelCol="labelColFull" :wrapperCol="wrapperColFull">
<a-input v-model="model.content" type="textarea" rows="3" />
</a-form-model-item>
<a-row :gutter="colsFull">
<a-form-model-item class="center">
<a-button @click="save" type="primary">{{$t('form.save')}}</a-button>
<a-button @click="reset" style="margin-left: 10px;">{{$t('form.reset')}}</a-button>
</a-form-model-item>
</a-row>
<a-form-model-item class="center" :wrapper-col="{ span: 18, offset: 4 }">
<a-button @click="save" type="primary">{{$t('form.save')}}</a-button>
<a-button @click="reset" style="margin-left: 10px;">{{$t('form.reset')}}</a-button>
</a-form-model-item>
</a-form-model>
</div>
</div>
</template>
......@@ -71,6 +46,9 @@ import {colsFull, colsHalf, labelColFull, wrapperColFull, labelColHalf, labelCol
export default {
name: 'TestEdit',
props: {
afterSave: Function
},
data() {
return {
colsFull: colsFull,
......@@ -100,15 +78,10 @@ export default {
};
},
computed: {
},
created () {
this.id = parseInt(this.$route.params.id)
console.log(this.id)
this.loadData()
},
mounted () {
},
methods: {
loadData () {
......@@ -133,7 +106,9 @@ export default {
if (this.model.subFolder && this.model.subFolder != '') this.model.folder += this.model.subFolder
saveText(this.model).then(json => {
console.log('saveText', json)
this.back()
if (this.afterSave) {
this.afterSave(json);
}
})
})
},
......@@ -141,9 +116,6 @@ export default {
console.log('reset')
this.$refs.editForm.reset()
},
back() {
this.$router.push({path: '/data/buildin/text/list'});
},
}
}
</script>
......
ui/src/views/data/buildin/text/List.vue
浏览文件 @ 5ec614cc
<template>
<div>
<div class="head">
<div class="title">{{ $t('menu.text.list') }}</div>
<div class="filter">
<a-input-search v-model="keywords" @change="onSearch" :allowClear="true"
placeholder="$t('tips.search')" style="width: 300px" />
</div>
<div class="buttons">
<a-button type="primary" @click="create()">{{ $t('action.create') }}</a-button>
</div>
</div>
<div class="main-table">
<a-table :columns="columns" :data-source="models" :pagination="false" rowKey="id">
<span slot="folderWithPath" slot-scope="text, record">
<a-tooltip placement="top" overlayClassName="tooltip-light">
......@@ -22,7 +11,7 @@
</span>
<span slot="action" slot-scope="record">
<a @click="edit(record)">{{ $t('action.edit') }}</a> |
<a @click="edit(record)" :title="$t('action.edit')"><a-icon type="form" :style="{fontSize: '16px'}" /></a> &nbsp;
<a-popconfirm
:title="$t('tips.delete')"
......@@ -30,8 +19,8 @@
:cancelText="$t('msg.no')"
@confirm="remove(record)"
>
<a href="#">{{ $t('action.delete') }}</a>
</a-popconfirm> |
<a href="#" :title="$t('action.delete')"><a-icon type="delete" :style="{fontSize: '16px'}" /></a> &nbsp;
</a-popconfirm> &nbsp;
<a-tooltip placement="top" overlayClassName="tooltip-light">
<template slot="title">
......@@ -42,7 +31,7 @@
</div>
</div>
</template>
<a href="#">{{$t('tips.refer')}}</a>
<a href="#" :title="$t('tips.refer')">&nbsp; <a-icon type="link" :style="{fontSize: '16px'}" /></a>
</a-tooltip>
</span>
......@@ -50,9 +39,23 @@
</a-table>
<div class="pagination-wrapper">
<a-pagination @change="onPageChange" :current="page" :total="total" :defaultPageSize="15" />
<a-pagination @change="onPageChange" :current="page" :total="total" :defaultPageSize="15" simple size="small" />
</div>
<a-modal
:visible="editModalVisible"
:title="editModalVisible ? editRecord ? `${$t('menu.text.edit')}: ${editRecord.title}` : $t('title.text.create') : ''"
:footer="false"
:centered="true"
:width="700"
@cancel="handleCancelEditModal"
>
<Edit
:v-if="editModalVisible"
:id="editModalVisible ? editID ? editID : 0 : null"
:afterSave="handleEditSave"
/>
</a-modal>
</div>
</template>
......@@ -61,10 +64,12 @@
import {listText, removeText} from "../../../../api/manage";
import {PageSize, pathToRelated} from "../../../../api/utils";
import debounce from "lodash.debounce"
import Edit from './Edit';
export default {
name: 'TextList',
components: {
Edit,
},
data() {
const columns = [
......@@ -76,11 +81,13 @@ export default {
title: this.$i18n.t('form.file'),
dataIndex: 'folder',
scopedSlots: { customRender: 'folderWithPath' },
width: 450
},
{
title: this.$i18n.t('form.opt'),
key: 'action',
scopedSlots: { customRender: 'action' },
width: 80
},
];
......@@ -92,14 +99,39 @@ export default {
designModel: {},
time: 0,
keywords: '',
page: 1,
total: 0,
pageSize: PageSize,
};
},
computed: {
keywords: function() {
if (this.$route.query && typeof this.$route.query.search === 'string') {
return this.$route.query.search;
}
return '';
},
editID: function() {
if (this.$route.params && this.$route.params.id !== undefined) {
return this.$route.params.id;
}
return null;
},
editModalVisible: function() {
return this.editID !== null;
},
editRecord: function() {
const {editID} = this;
if (!editID) {
return null;
}
return this.models.find(x => x.id == editID);
}
},
watch: {
keywords: function() {
this.onSearch();
}
},
created () {
this.loadData()
......@@ -122,9 +154,23 @@ export default {
this.total = json.total
})
},
handleCancelEditModal() {
const {path, query} = this.$route;
const newPath = '/data/buildin/text/list';
if (path !== newPath) {
this.$router.replace({path: newPath, query});
}
},
handleEditSave() {
this.handleCancelEditModal();
this.loadData();
},
edit(record) {
console.log(record)
this.$router.push({path: `/data/buildin/text/edit/${record.id}`});
const {path, query = {}} = this.$router;
const newPath = `/data/buildin/text/list/${record.id}`;
if (path !== newPath) {
this.$router.replace({path: newPath, query});
}
},
remove(record) {
console.log(record)
......
ui/src/views/data/mine/Edit.vue
浏览文件 @ 5ec614cc
<template>
<div>
<div class="head">
<div class="title">
<span v-if="id==0">{{ $t('title.data.create') }}</span>
<span v-if="id!=0">{{ $t('menu.data.edit') }}</span>
</div>
<div class="filter"></div>
<div class="buttons">
<a-button type="primary" @click="back()">{{ $t('action.back') }}</a-button>
</div>
</div>
<div>
<a-form-model ref="editForm" :model="model" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
<a-form-model-item :label="$t('form.name')" prop="title">
<a-input v-model="model.title" />
</a-form-model-item>
<a-form-model-item :label="$t('form.dir')" class="zui-input-group zui-input-with-tips">
<a-form-model-item prop="folder" :style="{ display: 'inline-block', width: 'calc(70% - 30px)' }">
<a-select v-model="model.folder">
<a-select-option v-for="(item, index) in dirs" :value="item.name" :key="index">
{{item.name}}</a-select-option>
</a-select>
</a-form-model-item>
<span class="zui-input-group-addon" :style="{ width: '60px' }">
<span>{{ $t('form.folder') }}</span>
</span>
<a-form-model-item :style="{ display: 'inline-block', width: 'calc(30% - 30px)' }">
<a-input v-model="model.subFolder"></a-input>
</a-form-model-item>
</a-form-model-item>
<a-form-model-item :label="$t('form.file.name')" prop="fileName">
<a-input v-model="model.fileName" />
</a-form-model-item>
<a-form-model-item :label="$t('form.desc')" prop="desc">
<a-input v-model="model.desc" type="textarea" rows="3" />
</a-form-model-item>
<a-form-model-item :wrapper-col="{ span: 14, offset: 6 }">
<a-button @click="save" type="primary">
{{$t('form.save')}}
</a-button>
<a-button @click="reset" style="margin-left: 10px;">
{{$t('form.reset')}}
</a-button>
</a-form-model-item>
</a-form-model>
</div>
<a-form-model ref="editForm" :model="model" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol" :colon="false">
<a-form-model-item :label="$t('form.name')" prop="title">
<a-input v-model="model.title" />
</a-form-model-item>
<a-form-model-item :label="$t('form.dir')" prop="folder">
<div class="input-group">
<a-select v-model="model.folder">
<a-select-option v-for="(item, index) in dirs" :value="item.name" :key="index">
{{item.name}}</a-select-option>
</a-select>
<span class="input-group-addon fix-border">{{ $t('form.folder') }}</span>
<a-input v-model="model.subFolder"></a-input>
</div>
</a-form-model-item>
<a-form-model-item :label="$t('form.file.name')" prop="fileName">
<a-input v-model="model.fileName" />
</a-form-model-item>
<a-form-model-item :label="$t('form.desc')" prop="desc">
<a-input v-model="model.desc" type="textarea" rows="3" />
</a-form-model-item>
<a-form-model-item :wrapper-col="{ span: 18, offset: 4 }">
<a-button @click="save" type="primary">
{{$t('form.save')}}
</a-button>
<a-button @click="reset">
{{$t('form.reset')}}
</a-button>
</a-form-model-item>
</a-form-model>
</div>
</template>
<script>
import { getDef, saveDef } from "../../../api/manage";
import { labelColLarge, wrapperColLarge } from "../../../utils/const";
import {getDef, saveDef} from "../../../api/manage";
import {labelCol, wrapperCol} from "../../../utils/const";
import {checkDirIsUsers} from "../../../api/utils";
export default {
name: 'Mine',
props: {
id: {
type: Number,
default: function() {
return this.$route.params.id;
}
},
afterSave: Function
},
data() {
return {
labelCol: labelColLarge,
wrapperCol: wrapperColLarge,
labelCol: labelCol,
wrapperCol: wrapperCol,
rules: {
title: [
{ required: true, message: this.$i18n.t('valid.required'), trigger: 'change' },
......@@ -78,31 +68,34 @@ export default {
{ validator: checkDirIsUsers, trigger: 'change' },
],
},
id: 0,
model: { folder: 'users/', type: 'text' },
dirs: [],
workDir: '',
};
},
computed: {
},
created () {
this.id = parseInt(this.$route.params.id)
console.log(this.id)
if (this.id == 0) return
getDef(this.id).then(json => {
console.log('getDef', json)
this.model = json.data
this.dirs = json.res
this.workDir = json.workDir
})
watch: {
id: function() {
this.loadData();
}
},
mounted () {
this.loadData();
},
methods: {
loadData() {
if (this.id === null) {
return;
}
if (this.id) {
getDef(this.id).then(json => {
this.model = json.data
this.dirs = json.res
this.workDir = json.workDir
})
} else {
this.reset();
}
},
save() {
this.$refs.editForm.validate(valid => {
console.log(valid, this.model)
......@@ -114,16 +107,15 @@ export default {
if (this.model.subFolder && this.model.subFolder != '') this.model.folder += this.model.subFolder
saveDef(this.model).then(json => {
console.log('saveDef', json)
this.back()
if (this.afterSave) {
this.afterSave(json);
}
})
})
},
reset () {
this.$refs.editForm.resetFields()
},
back() {
this.$router.push({path: '/data/mine/list'});
},
}
}
</script>
......
ui/src/views/data/mine/List.vue
浏览文件 @ 5ec614cc
<template>
<div>
<div class="container">
<div class="head">
<div class="title">{{ $t('menu.data.list') }}</div>
<div class="title"><Icon type="database" :style="{fontSize: '16px'}" /><span>{{$t('menu.data.list')}}</span></div>
<div class="filter">
<a-input-search v-model="keywords" @change="onSearch" :allowClear="true"
:placeholder="$t('tips.search')" style="width: 300px" />
<a-input-search v-model="keywords" @change="onSearch" :allowClear="true" :placeholder="$t('tips.search')" style="width: 300px" />
</div>
<div class="buttons">
<a-button type="primary" @click="create()">{{ $t('action.create') }}</a-button>
<a-button type="primary" @click="create()"><Icon type="plus" :style="{fontSize: '16px'}" /> {{$t('action.create')}}</a-button>
</div>
</div>
<a-table :columns="columns" :data-source="defs" :pagination="false" rowKey="id">
<span slot="folderWithPath" slot-scope="text, record">
<a-tooltip placement="top" overlayClassName="tooltip-light">
<template slot="title">
<span>{{record.path}}</span>
</template>
<a>{{record.path | pathToRelated}}</a>
</a-tooltip>
</span>
<span slot="action" slot-scope="record">
<a @click="edit(record)">{{ $t('action.edit') }}</a> &nbsp;
<a @click="design(record)">{{ $t('action.design') }}</a> &nbsp;
<a-popconfirm
:title="$t('tips.delete')"
:okText="$t('msg.yes')"
:cancelText="$t('msg.no')"
@confirm="remove(record)"
>
<a href="#">{{ $t('action.delete') }}</a>
</a-popconfirm> &nbsp;
<a @click="showPreview(record)">{{ $t('msg.preview') }}</a>
</span>
</a-table>
<div class="pagination-wrapper">
<a-pagination @change="onPageChange" :current="page" :total="total" :defaultPageSize="15" />
</div>
<a-row :gutter="10">
<a-col :span="hasSelected ? 12 : 24">
<div class="main-table">
<a-table :columns="columns" :data-source="defs" :pagination="false" rowKey="id" :custom-row="customRow">
<a slot="recordTitle" slot-scope="text, record" @click="design(record)">{{record.title}}</a>
<span slot="folderWithPath" slot-scope="text, record">
<a-tooltip placement="top" overlayClassName="tooltip-light">
<template slot="title">
<span>{{record.path}}</span>
</template>
<span>{{record.path | pathToRelated}}</span>
</a-tooltip>
</span>
<span slot="action" slot-scope="record">
<a @click="design(record)" :title="$t('action.design')"><Icon type="control" :style="{fontSize: '16px'}" /></a> &nbsp;
<a @click="edit(record)" :title="$t('action.edit')"><Icon type="form" :style="{fontSize: '16px'}" /></a> &nbsp;
<a @click="showDeleteConfirm(record)" :title="$t('action.delete')"><Icon type="delete" :style="{fontSize: '16px'}" /></a>
</span>
</a-table>
<div class="pagination-wrapper">
<a-pagination size="small" simple @change="onPageChange" :current="page" :total="total" :defaultPageSize="15" />
</div>
</div>
</a-col>
<a-col v-if="hasSelected" :span="12">
<Preview :record="selectedRecord" />
</a-col>
</a-row>
<div class="full-screen-modal">
<design-component
......@@ -55,48 +54,67 @@
</design-component>
</div>
<a-modal v-model="previewVisible" :title="$t('msg.data.preview')" @ok="closePreview"
dialogClass="preview-popup" width="60%">
<div v-html="previewData"></div>
<a-modal
:visible="editModalVisible"
:title="editModalVisible ? editRecord ? `${$t('menu.data.edit')}: ${editRecord.title}` : $t('title.data.create') : ''"
:footer="false"
:centered="true"
:width="700"
@cancel="handleCancelEditModal"
>
<Edit
:v-if="editModalVisible"
:id="editModalVisible ? editRecord ? editRecord.id : 0 : null"
:afterSave="handleEditSave"
/>
</a-modal>
</div>
</template>
<script>
import { listDef, removeDef, previewDefData } from "../../../api/manage";
import { DesignComponent } from '../../../components'
import {Icon, Modal} from 'ant-design-vue'
import {listDef, removeDef} from "../../../api/manage";
import {DesignComponent} from '../../../components'
import {PageSize, ResTypeDef, pathToRelated} from "../../../api/utils";
import debounce from "lodash.debounce"
import Preview from './Preview';
import Edit from './Edit';
export default {
name: 'Mine',
components: {
DesignComponent
DesignComponent,
Icon,
Preview,
Edit,
},
data() {
const columns = [
{
title: this.$i18n.t('form.name'),
dataIndex: 'title',
'class': 'title',
scopedSlots: { customRender: 'recordTitle' },
},
{
title: this.$i18n.t('form.file'),
dataIndex: 'folder',
scopedSlots: { customRender: 'folderWithPath' },
width: '300px'
},
{
title: this.$i18n.t('form.opt'),
key: 'action',
scopedSlots: { customRender: 'action' },
width: '80px'
},
];
return {
defs: [],
previewData: '',
columns,
selected: null,
designVisible: false,
designModel: {},
......@@ -108,11 +126,17 @@ export default {
total: 0,
pageSize: PageSize,
previewVisible: false,
editModalVisible: false,
editRecord: null,
};
},
computed: {
hasSelected: function() {
return this.defs.some(x => x.id == this.selected);
},
selectedRecord: function() {
return this.defs.find(x => x.id == this.selected);
}
},
created () {
this.loadData()
......@@ -130,15 +154,24 @@ export default {
console.log('listDefs', json)
const that = this
that.defs = json.data
this.total = json.total
that.total = json.total
that.selected = json.data.length ? json.data[0].id : null
})
},
create() {
this.$router.push({path: '/data/mine/edit/0'});
this.editRecord = null;
this.editModalVisible = true;
},
edit(record) {
console.log(record)
this.$router.push({path: `/data/mine/edit/${record.id}`});
this.editRecord = record;
this.editModalVisible = true;
},
handleCancelEditModal() {
this.editModalVisible = false;
},
handleEditSave() {
this.editModalVisible = false;
this.loadData();
},
design(record) {
this.time = Date.now() // trigger data refresh
......@@ -153,19 +186,6 @@ export default {
this.loadData()
})
},
showPreview(record) {
console.log(record)
this.previewVisible = true
previewDefData(record.id).then(json => {
console.log('previewDefData', json)
this.previewData = json.data
})
},
closePreview() {
this.previewVisible = false
this.previewData = ''
},
handleDesignOk() {
console.log('handleDesignOk')
this.designVisible = false
......@@ -185,16 +205,36 @@ export default {
console.log('onSearch', this.keywords)
this.loadData()
}, 500),
handleClickRow: function(event) {
const id = event.target.closest('tr').getAttribute('data-row-key');
this.selected = id;
},
customRow: function(record) {
const {selected} = this;
return {
attrs: {
'class': record.id == selected ? 'selected' : ''
},
on: {
click: this.handleClickRow
}
}
},
showDeleteConfirm: function(record) {
Modal.confirm({
title: this.$t('tips.delete'),
content: (h) => <strong>{record.title}</strong>,
okText: this.$t('msg.yes'),
cancelText: this.$t('msg.no'),
cancelType: 'danger',
onOk: () => {
this.remove(record)
},
});
}
}
}
</script>
<style lang="less" scoped>
.preview-popup {
.ant-modal-body {
div {
}
}
}
</style>
ui/src/views/data/mine/Preview.vue 0 → 100644
浏览文件 @ 5ec614cc
<template>
<a-card>
<span slot="title">
<a-icon type="profile" /> {{$t('msg.preview')}} - {{record.title}}
</span>
<pre v-if="previewData !== null" v-html="previewData" style="margin: 0"></pre>
<div v-else style="padding: 10px; text-align: center"><a-icon type="loading" /></div>
</a-card>
</template>
<script>
import {previewDefData} from "../../../api/manage";
export default {
name: 'Preview',
components: {
},
props: {
record: {
type: Object,
required: true
},
},
data: function() {
return {previewData: null};
},
mounted: function() {
this.loadPrevewData();
},
methods: {
loadPrevewData() {
this.previewData = null;
previewDefData(this.record.id).then(json => {
this.previewData = json.data
})
}
},
watch: {
record: function() {
this.loadPrevewData();
}
}
}
</script>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或