mirror of
https://github.com/0xJacky/nginx-ui.git
synced 2025-05-12 19:05:55 +02:00
[frontend-next] Refactored fronted
This commit is contained in:
0xJacky
parent
2f91918f54
commit
2fff1f5181
193 changed files with 3920 additions and 26548 deletions
|
|
@ -1,10 +1,121 @@
|
|||
<script setup lang="ts">
|
||||
import gettext from '@/gettext'
|
||||
|
||||
const {$gettext, interpolate} = gettext
|
||||
import StdTable from './StdTable.vue'
|
||||
|
||||
import StdDataEntry from '@/components/StdDataEntry'
|
||||
|
||||
import {reactive, ref} from 'vue'
|
||||
import {message} from 'ant-design-vue'
|
||||
|
||||
const props = defineProps({
|
||||
api: Object,
|
||||
columns: Array,
|
||||
title: String,
|
||||
data_key: {
|
||||
type: String,
|
||||
default: 'data'
|
||||
},
|
||||
disable_search: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
disable_add: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
soft_delete: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
edit_text: String,
|
||||
deletable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
get_params: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
editable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
})
|
||||
|
||||
const visible = ref(false)
|
||||
const update = ref(0)
|
||||
let data = reactive({id: null})
|
||||
let error = reactive({})
|
||||
const params = reactive({})
|
||||
const selected = reactive([])
|
||||
|
||||
function onSelect(keys: any) {
|
||||
selected.concat(...keys)
|
||||
}
|
||||
|
||||
function editableColumns() {
|
||||
return props.columns!.filter((c: any) => {
|
||||
return c.edit
|
||||
})
|
||||
}
|
||||
|
||||
function add() {
|
||||
data = reactive({
|
||||
id: null
|
||||
})
|
||||
visible.value = true
|
||||
}
|
||||
|
||||
const table = ref(null)
|
||||
|
||||
interface Table {
|
||||
get_list(): void
|
||||
}
|
||||
|
||||
const ok = async () => {
|
||||
error = reactive({})
|
||||
props.api!.save(data.id, data).then((r: any) => {
|
||||
message.success($gettext('Save Successfully'))
|
||||
Object.assign(data, r)
|
||||
const t: Table | null = table.value
|
||||
t!.get_list()
|
||||
|
||||
}).catch((e: any) => {
|
||||
message.error((e?.message ?? $gettext('Server error')), 5)
|
||||
error = e.errors
|
||||
})
|
||||
}
|
||||
|
||||
function cancel() {
|
||||
visible.value = false
|
||||
error = reactive({})
|
||||
}
|
||||
|
||||
function edit(id: any) {
|
||||
props.api!.get(id).then((r: any) => {
|
||||
Object.assign(data, r)
|
||||
visible.value = true
|
||||
}).catch((e: any) => {
|
||||
message.error((e?.message ?? $gettext('Server error')), 5)
|
||||
})
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="std-curd">
|
||||
<a-card :title="title">
|
||||
<a v-if="!disable_add" slot="extra" @click="add">添加</a>
|
||||
<a-card :title="title||$gettext('Table')">
|
||||
<template v-if="!disable_add" #extra>
|
||||
<a @click="add" v-translate>Add</a>
|
||||
</template>
|
||||
|
||||
<std-table
|
||||
ref="table"
|
||||
v-bind="this.$props"
|
||||
v-bind="props"
|
||||
@clickEdit="edit"
|
||||
@selected="onSelect"
|
||||
:key="update"
|
||||
|
|
@ -14,207 +125,29 @@
|
|||
</template>
|
||||
</std-table>
|
||||
</a-card>
|
||||
|
||||
<a-modal
|
||||
class="std-curd-edit-modal"
|
||||
:mask="false"
|
||||
:title="data.id ? '编辑 ID: ' + data.id : '添加'"
|
||||
:title="data.id ? $gettext('Modify') : $gettext('Add')"
|
||||
:visible="visible"
|
||||
cancel-text="关闭"
|
||||
ok-text="保存"
|
||||
@cancel="visible=false;error={}"
|
||||
:cancel-text="$gettext('Cancel')"
|
||||
:ok-text="$gettext('OK')"
|
||||
@cancel="cancel"
|
||||
@ok="ok"
|
||||
:width="600"
|
||||
destroyOnClose
|
||||
>
|
||||
<std-data-entry ref="std_data_entry" :data-list="editableColumns()" :data-source="data"
|
||||
:error="error">
|
||||
<div slot="supplement">
|
||||
<slot name="supplement"></slot>
|
||||
</div>
|
||||
<div slot="action">
|
||||
<slot name="action"></slot>
|
||||
</div>
|
||||
</std-data-entry>
|
||||
</a-modal>
|
||||
<footer-tool-bar v-if="batch_columns.length">
|
||||
<a-space>
|
||||
当前已选中{{ selected.length }}条数据
|
||||
<a-button :disabled="!selected.length"
|
||||
@click="selected=[];update++">清空选中
|
||||
</a-button>
|
||||
<a-button type="primary"
|
||||
:disabled="!selected.length"
|
||||
@click="visible_batch_edit=true" ghost>批量修改
|
||||
</a-button>
|
||||
</a-space>
|
||||
</footer-tool-bar>
|
||||
<a-modal
|
||||
:mask="false"
|
||||
title="批量修改"
|
||||
:visible="visible_batch_edit"
|
||||
cancel-text="取消"
|
||||
ok-text="保存"
|
||||
@cancel="visible_batch_edit=false"
|
||||
@ok="okBatchEdit"
|
||||
>
|
||||
留空则不修改
|
||||
<std-data-entry :data-list="batch_columns" :data-source="data"/>
|
||||
<std-data-entry
|
||||
ref="std_data_entry"
|
||||
:data-list="editableColumns()"
|
||||
:data-source="data"
|
||||
:error="error"
|
||||
/>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import StdTable from './StdTable'
|
||||
import StdDataEntry from '@/components/StdDataEntry/StdDataEntry'
|
||||
import FooterToolBar from '@/components/FooterToolbar/FooterToolBar'
|
||||
|
||||
export default {
|
||||
name: 'StdCurd',
|
||||
components: {
|
||||
StdTable,
|
||||
StdDataEntry,
|
||||
FooterToolBar
|
||||
},
|
||||
props: {
|
||||
api: Object,
|
||||
columns: Array,
|
||||
title: {
|
||||
type: String,
|
||||
default: '列表'
|
||||
},
|
||||
data_key: {
|
||||
type: String,
|
||||
default: 'data'
|
||||
},
|
||||
disable_search: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
disable_add: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
soft_delete: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
edit_text: String,
|
||||
deletable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
get_params: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
editable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
visible_batch_edit: false,
|
||||
data: {
|
||||
id: null,
|
||||
},
|
||||
error: {},
|
||||
params: {},
|
||||
selected: [],
|
||||
batch_columns: this.batchColumns(),
|
||||
update: 0,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onSelect(keys) {
|
||||
this.selected = keys
|
||||
},
|
||||
batchColumns() {
|
||||
return this.columns.filter((column) => {
|
||||
return column.batch
|
||||
&& column.edit && column.edit.type !== 'upload'
|
||||
&& column.edit.type !== 'transfer'
|
||||
})
|
||||
},
|
||||
okBatchEdit() {
|
||||
this.api.batchSave(this.selected, this.data)
|
||||
.then(() => {
|
||||
this.$message.success('批量修改成功')
|
||||
this.$refs.table.get_list()
|
||||
}).catch(e => {
|
||||
this.$message.error(e.message)
|
||||
})
|
||||
},
|
||||
editableColumns() {
|
||||
return this.columns.filter((c) => {
|
||||
return c.edit
|
||||
})
|
||||
},
|
||||
uploadColumns() {
|
||||
return this.columns.filter(c => {
|
||||
return c.edit && c.edit.type === 'upload'
|
||||
})
|
||||
},
|
||||
async add() {
|
||||
this.data = {
|
||||
id: null
|
||||
}
|
||||
this.visible = true
|
||||
},
|
||||
async do_upload() {
|
||||
const columns = await this.uploadColumns()
|
||||
|
||||
for (let i = 0; i < columns.length; i++) {
|
||||
const refs = this.$refs.std_data_entry.$refs
|
||||
const t = refs['std_upload_' + columns[i].dataIndex][0]
|
||||
if (t) {
|
||||
await t.upload()
|
||||
}
|
||||
}
|
||||
},
|
||||
async ok() {
|
||||
this.error = {}
|
||||
if (this.data.id) {
|
||||
await this.do_upload()
|
||||
this.api.save((this.data.id ? this.data.id : null), this.data).then(r => {
|
||||
this.$message.success('保存成功')
|
||||
this.data = Object.assign(this.data, r)
|
||||
this.$refs.table.get_list()
|
||||
}).catch(error => {
|
||||
this.$message.error((error.message ? error.message : '保存失败'), 5)
|
||||
this.error = error.errors
|
||||
})
|
||||
|
||||
} else {
|
||||
this.api.save((this.data.id ? this.data.id : null), this.data).then(r => {
|
||||
this.$message.success('保存成功')
|
||||
this.data = this.extend(this.data, r)
|
||||
this.$nextTick().then(() => {
|
||||
this.do_upload()
|
||||
})
|
||||
this.$refs.table.get_list()
|
||||
}).catch(error => {
|
||||
this.$message.error((error.message ? error.message : '保存失败'), 5)
|
||||
this.error = error.errors
|
||||
})
|
||||
}
|
||||
},
|
||||
edit(id) {
|
||||
this.api.get(id).then(r => {
|
||||
this.data = r
|
||||
this.visible = true
|
||||
}).catch(e => {
|
||||
console.log(e)
|
||||
this.$message.error('系统错误')
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue