项目初始化
This commit is contained in:
297
web/src/views/backend/routine/adminInfo.vue
Normal file
297
web/src/views/backend/routine/adminInfo.vue
Normal file
@@ -0,0 +1,297 @@
|
||||
<template>
|
||||
<div class="default-main">
|
||||
<el-row :gutter="30">
|
||||
<el-col class="lg-mb-20" :xs="24" :sm="24" :md="24" :lg="10">
|
||||
<div class="admin-info">
|
||||
<el-upload
|
||||
class="avatar-uploader"
|
||||
action=""
|
||||
:show-file-list="false"
|
||||
@change="onAvatarBeforeUpload"
|
||||
:auto-upload="false"
|
||||
accept="image/gif, image/jpg, image/jpeg, image/bmp, image/png, image/webp"
|
||||
v-if="!isEmpty(state.adminInfo)"
|
||||
>
|
||||
<el-image fit="cover" :src="fullUrl(state.adminInfo.avatar)" class="avatar">
|
||||
<template #error>
|
||||
<div class="image-slot">
|
||||
<Icon size="30" color="#c0c4cc" name="el-icon-Picture" />
|
||||
</div>
|
||||
</template>
|
||||
</el-image>
|
||||
</el-upload>
|
||||
<div class="admin-info-base">
|
||||
<div class="admin-nickname">{{ state.adminInfo.nickname }}</div>
|
||||
<div class="admin-other">
|
||||
<div>{{ t('routine.adminInfo.Last logged in on') }} {{ timeFormat(state.adminInfo.last_login_time) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="admin-info-form">
|
||||
<el-form
|
||||
@keyup.enter="onSubmit()"
|
||||
:key="state.formKey"
|
||||
label-position="top"
|
||||
:rules="rules"
|
||||
ref="formRef"
|
||||
:model="state.adminInfo"
|
||||
>
|
||||
<el-form-item :label="t('routine.adminInfo.user name')">
|
||||
<el-input disabled v-model="state.adminInfo.username"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="t('routine.adminInfo.User nickname')" prop="nickname">
|
||||
<el-input :placeholder="t('routine.adminInfo.Please enter a nickname')" v-model="state.adminInfo.nickname"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="t('routine.adminInfo.e-mail address')" prop="email">
|
||||
<el-input
|
||||
:placeholder="t('Please input field', { field: t('routine.adminInfo.e-mail address') })"
|
||||
v-model="state.adminInfo.email"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="t('routine.adminInfo.phone number')" prop="mobile">
|
||||
<el-input
|
||||
:placeholder="t('Please input field', { field: t('routine.adminInfo.phone number') })"
|
||||
v-model="state.adminInfo.mobile"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="t('routine.adminInfo.autograph')" prop="motto">
|
||||
<el-input
|
||||
@keyup.enter.stop=""
|
||||
@keyup.ctrl.enter="onSubmit()"
|
||||
:placeholder="t('routine.adminInfo.This guy is lazy and doesn write anything')"
|
||||
type="textarea"
|
||||
v-model="state.adminInfo.motto"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="t('routine.adminInfo.New password')" prop="password">
|
||||
<el-input
|
||||
type="password"
|
||||
:placeholder="t('routine.adminInfo.Please leave blank if not modified')"
|
||||
v-model="state.adminInfo.password"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" :loading="state.buttonLoading" @click="onSubmit()">
|
||||
{{ t('routine.adminInfo.Save changes') }}
|
||||
</el-button>
|
||||
<el-button @click="onResetForm(formRef)">{{ t('Reset') }}</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col v-loading="state.logLoading" :xs="24" :sm="24" :md="24" :lg="12">
|
||||
<el-card :header="t('routine.adminInfo.Operation log')" shadow="never">
|
||||
<el-timeline>
|
||||
<el-timeline-item v-for="(item, idx) in state.log" :key="idx" size="large" :timestamp="timeFormat(item.create_time)">
|
||||
{{ item.title }}
|
||||
</el-timeline-item>
|
||||
</el-timeline>
|
||||
<el-pagination
|
||||
:currentPage="state.logCurrentPage"
|
||||
:page-size="state.logPageSize"
|
||||
:page-sizes="[12, 22, 52, 100]"
|
||||
background
|
||||
layout="prev, next, jumper"
|
||||
:total="state.logTotal"
|
||||
@size-change="onLogSizeChange"
|
||||
@current-change="onLogCurrentChange"
|
||||
></el-pagination>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { reactive, useTemplateRef } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { index, log, postData } from '/@/api/backend/routine/AdminInfo'
|
||||
import type { FormItemRule } from 'element-plus'
|
||||
import { fullUrl, onResetForm, timeFormat } from '/@/utils/common'
|
||||
import { uuid } from '../../../utils/random'
|
||||
import { buildValidatorData } from '/@/utils/validate'
|
||||
import { fileUpload } from '/@/api/common'
|
||||
import { useAdminInfo } from '/@/stores/adminInfo'
|
||||
import { isEmpty } from 'lodash-es'
|
||||
|
||||
defineOptions({
|
||||
name: 'routine/adminInfo',
|
||||
})
|
||||
|
||||
const { t } = useI18n()
|
||||
const formRef = useTemplateRef('formRef')
|
||||
|
||||
const adminInfoStore = useAdminInfo()
|
||||
|
||||
const state: {
|
||||
adminInfo: anyObj
|
||||
formKey: string
|
||||
buttonLoading: boolean
|
||||
log: {
|
||||
title: string
|
||||
create_time: string
|
||||
url: string
|
||||
}[]
|
||||
logFilter: anyObj
|
||||
logCurrentPage: number
|
||||
logPageSize: number
|
||||
logTotal: number
|
||||
logLoading: boolean
|
||||
} = reactive({
|
||||
adminInfo: {},
|
||||
formKey: uuid(),
|
||||
buttonLoading: false,
|
||||
log: [],
|
||||
logFilter: {
|
||||
limit: 12,
|
||||
},
|
||||
logCurrentPage: 1,
|
||||
logPageSize: 12,
|
||||
logTotal: 100,
|
||||
logLoading: true,
|
||||
})
|
||||
|
||||
index().then((res) => {
|
||||
state.adminInfo = res.data.info
|
||||
// 重新渲染表单以记录初始值
|
||||
state.formKey = uuid()
|
||||
|
||||
// 管理员日志加载，加筛选防止超管读取到其他管理员的日志记录
|
||||
state.logFilter.search = [
|
||||
{
|
||||
field: 'admin_id',
|
||||
val: res.data.info.id,
|
||||
operator: 'eq',
|
||||
},
|
||||
]
|
||||
getLog()
|
||||
})
|
||||
|
||||
const getLog = () => {
|
||||
log(state.logFilter)
|
||||
.then((res) => {
|
||||
state.log = res.data.list
|
||||
state.logTotal = res.data.total
|
||||
state.logLoading = false
|
||||
})
|
||||
.catch(() => {
|
||||
state.logLoading = false
|
||||
})
|
||||
}
|
||||
|
||||
const onLogSizeChange = (limit: number) => {
|
||||
state.logPageSize = limit
|
||||
state.logFilter.limit = limit
|
||||
getLog()
|
||||
}
|
||||
|
||||
const onLogCurrentChange = (page: number) => {
|
||||
state.logCurrentPage = page
|
||||
state.logFilter.page = page
|
||||
getLog()
|
||||
}
|
||||
|
||||
const rules: Partial<Record<string, FormItemRule[]>> = reactive({
|
||||
nickname: [buildValidatorData({ name: 'required', title: t('routine.adminInfo.User nickname') })],
|
||||
email: [buildValidatorData({ name: 'email', title: t('routine.adminInfo.e-mail address') })],
|
||||
mobile: [buildValidatorData({ name: 'mobile', message: t('Please enter the correct field', { field: t('routine.adminInfo.phone number') }) })],
|
||||
password: [buildValidatorData({ name: 'password' })],
|
||||
})
|
||||
|
||||
const onAvatarBeforeUpload = (file: any) => {
|
||||
let fd = new FormData()
|
||||
fd.append('file', file.raw)
|
||||
fileUpload(fd).then((res) => {
|
||||
if (res.code == 1) {
|
||||
postData({
|
||||
id: state.adminInfo.id,
|
||||
avatar: res.data.file.url,
|
||||
}).then(() => {
|
||||
adminInfoStore.dataFill({ avatar: res.data.file.full_url })
|
||||
state.adminInfo.avatar = res.data.file.full_url
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const onSubmit = () => {
|
||||
formRef.value?.validate((valid) => {
|
||||
if (valid) {
|
||||
let data = { ...state.adminInfo }
|
||||
delete data.last_login_time
|
||||
delete data.username
|
||||
delete data.avatar
|
||||
state.buttonLoading = true
|
||||
postData(data)
|
||||
.then(() => {
|
||||
adminInfoStore.dataFill({ nickname: state.adminInfo.nickname })
|
||||
state.buttonLoading = false
|
||||
})
|
||||
.catch(() => {
|
||||
state.buttonLoading = false
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.admin-info {
|
||||
background-color: var(--ba-bg-color-overlay);
|
||||
border-radius: var(--el-border-radius-base);
|
||||
border-top: 3px solid #409eff;
|
||||
.avatar-uploader {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
margin: 60px auto 10px auto;
|
||||
border-radius: 50%;
|
||||
box-shadow: var(--el-box-shadow-light);
|
||||
border: 1px dashed var(--el-border-color);
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
}
|
||||
.avatar-uploader:hover {
|
||||
border-color: var(--el-color-primary);
|
||||
}
|
||||
.avatar {
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
display: block;
|
||||
}
|
||||
.image-slot {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
}
|
||||
.admin-info-base {
|
||||
.admin-nickname {
|
||||
font-size: 22px;
|
||||
color: var(--el-text-color-primary);
|
||||
text-align: center;
|
||||
padding: 8px 0;
|
||||
}
|
||||
.admin-other {
|
||||
color: var(--el-text-color-regular);
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
.admin-info-form {
|
||||
padding: 30px;
|
||||
}
|
||||
}
|
||||
.el-card :deep(.el-timeline-item__icon) {
|
||||
font-size: 10px;
|
||||
}
|
||||
@media screen and (max-width: 1200px) {
|
||||
.lg-mb-20 {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
12
web/src/views/backend/routine/attachment/index.ts
Normal file
12
web/src/views/backend/routine/attachment/index.ts
Normal file
@@ -0,0 +1,12 @@
|
||||
import { buildSuffixSvgUrl } from '/@/api/common'
|
||||
|
||||
/**
|
||||
* 表格和表单中文件预览图的生成
|
||||
*/
|
||||
export const previewRenderFormatter = (row: TableRow, column: TableColumn, cellValue: string) => {
|
||||
const imgSuffix = ['gif', 'jpg', 'jpeg', 'bmp', 'png', 'webp']
|
||||
if (imgSuffix.includes(cellValue)) {
|
||||
return row.full_url
|
||||
}
|
||||
return buildSuffixSvgUrl(cellValue)
|
||||
}
|
||||
184
web/src/views/backend/routine/attachment/index.vue
Normal file
184
web/src/views/backend/routine/attachment/index.vue
Normal file
@@ -0,0 +1,184 @@
|
||||
<template>
|
||||
<div class="default-main">
|
||||
<div class="ba-table-box">
|
||||
<el-alert class="ba-table-alert" v-if="baTable.table.remark" :title="baTable.table.remark" type="info" show-icon />
|
||||
|
||||
<!-- 表格顶部菜单 -->
|
||||
<TableHeader
|
||||
:buttons="['refresh', 'edit', 'comSearch', 'quickSearch', 'columnDisplay']"
|
||||
:quick-search-placeholder="t('Quick search placeholder', { fields: t('utils.Original name') })"
|
||||
>
|
||||
<el-popconfirm
|
||||
v-if="auth('del')"
|
||||
@confirm="baTable.onTableHeaderAction('delete', {})"
|
||||
:confirm-button-text="t('Delete')"
|
||||
:cancel-button-text="t('Cancel')"
|
||||
confirmButtonType="danger"
|
||||
:title="t('routine.attachment.Files and records will be deleted at the same time Are you sure?')"
|
||||
:disabled="baTable.table.selection!.length > 0 ? false : true"
|
||||
>
|
||||
<template #reference>
|
||||
<div class="mlr-12">
|
||||
<el-tooltip :content="t('Delete selected row')" placement="top">
|
||||
<el-button
|
||||
v-blur
|
||||
:disabled="baTable.table.selection!.length > 0 ? false : true"
|
||||
class="table-header-operate"
|
||||
type="danger"
|
||||
>
|
||||
<Icon color="#ffffff" name="fa fa-trash" />
|
||||
<span class="table-header-operate-text">{{ t('Delete') }}</span>
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</TableHeader>
|
||||
|
||||
<!-- 表格 -->
|
||||
<!-- 要使用`el-table`组件原有的属性，直接加在Table标签上即可 -->
|
||||
<Table ref="tableRef" />
|
||||
|
||||
<!-- 编辑和新增表单 -->
|
||||
<PopupForm />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, provide, useTemplateRef } from 'vue'
|
||||
import PopupForm from './popupForm.vue'
|
||||
import Table from '/@/components/table/index.vue'
|
||||
import TableHeader from '/@/components/table/header/index.vue'
|
||||
import baTableClass from '/@/utils/baTable'
|
||||
import { defaultOptButtons } from '/@/components/table'
|
||||
import { previewRenderFormatter } from './index'
|
||||
import { baTableApi } from '/@/api/common'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { auth } from '/@/utils/common'
|
||||
|
||||
defineOptions({
|
||||
name: 'routine/attachment',
|
||||
})
|
||||
|
||||
const { t } = useI18n()
|
||||
const tableRef = useTemplateRef('tableRef')
|
||||
|
||||
const optBtn = defaultOptButtons(['edit', 'delete'])
|
||||
optBtn[1].popconfirm = {
|
||||
...optBtn[1].popconfirm,
|
||||
title: t('routine.attachment.Files and records will be deleted at the same time Are you sure?'),
|
||||
}
|
||||
|
||||
const baTable = new baTableClass(new baTableApi('/admin/routine.Attachment/'), {
|
||||
column: [
|
||||
{ type: 'selection', align: 'center', operator: false },
|
||||
{ label: t('Id'), prop: 'id', align: 'center', operator: '=', operatorPlaceholder: t('Id'), width: 70 },
|
||||
{ label: t('utils.Breakdown'), prop: 'topic', align: 'center', operator: 'LIKE', operatorPlaceholder: t('Fuzzy query') },
|
||||
{
|
||||
label: t('routine.attachment.Upload administrator'),
|
||||
prop: 'admin.nickname',
|
||||
align: 'center',
|
||||
operator: 'LIKE',
|
||||
operatorPlaceholder: t('Fuzzy query'),
|
||||
},
|
||||
{
|
||||
label: t('routine.attachment.Upload user'),
|
||||
prop: 'user.nickname',
|
||||
align: 'center',
|
||||
operator: 'LIKE',
|
||||
operatorPlaceholder: t('Fuzzy query'),
|
||||
},
|
||||
{
|
||||
label: t('utils.size'),
|
||||
prop: 'size',
|
||||
align: 'center',
|
||||
formatter: (row: TableRow, column: TableColumn, cellValue: string) => {
|
||||
const size = parseFloat(cellValue)
|
||||
const i = Math.floor(Math.log(size) / Math.log(1024))
|
||||
return (size / Math.pow(1024, i)).toFixed(i < 1 ? 0 : 2) + ' ' + ['B', 'KB', 'MB', 'GB', 'TB'][i]
|
||||
},
|
||||
operator: 'RANGE',
|
||||
sortable: 'custom',
|
||||
operatorPlaceholder: 'bytes',
|
||||
},
|
||||
{
|
||||
label: t('utils.type'),
|
||||
prop: 'mimetype',
|
||||
align: 'center',
|
||||
operator: 'LIKE',
|
||||
showOverflowTooltip: true,
|
||||
operatorPlaceholder: t('Fuzzy query'),
|
||||
},
|
||||
{
|
||||
label: t('utils.preview'),
|
||||
prop: 'suffix',
|
||||
align: 'center',
|
||||
formatter: previewRenderFormatter,
|
||||
render: 'image',
|
||||
operator: false,
|
||||
},
|
||||
{
|
||||
label: t('utils.Upload (Reference) times'),
|
||||
prop: 'quote',
|
||||
align: 'center',
|
||||
width: 150,
|
||||
operator: 'RANGE',
|
||||
sortable: 'custom',
|
||||
},
|
||||
{
|
||||
label: t('utils.Original name'),
|
||||
prop: 'name',
|
||||
align: 'center',
|
||||
showOverflowTooltip: true,
|
||||
operator: 'LIKE',
|
||||
operatorPlaceholder: t('Fuzzy query'),
|
||||
},
|
||||
{
|
||||
label: t('routine.attachment.Storage mode'),
|
||||
prop: 'storage',
|
||||
align: 'center',
|
||||
width: 100,
|
||||
operator: 'LIKE',
|
||||
operatorPlaceholder: t('Fuzzy query'),
|
||||
},
|
||||
{
|
||||
label: t('utils.Last upload time'),
|
||||
prop: 'last_upload_time',
|
||||
align: 'center',
|
||||
render: 'datetime',
|
||||
operator: 'RANGE',
|
||||
width: 160,
|
||||
sortable: 'custom',
|
||||
},
|
||||
{
|
||||
label: t('Operate'),
|
||||
align: 'center',
|
||||
width: '100',
|
||||
render: 'buttons',
|
||||
buttons: optBtn,
|
||||
operator: false,
|
||||
},
|
||||
],
|
||||
defaultOrder: { prop: 'last_upload_time', order: 'desc' },
|
||||
})
|
||||
|
||||
provide('baTable', baTable)
|
||||
|
||||
onMounted(() => {
|
||||
baTable.table.ref = tableRef.value
|
||||
baTable.mount()
|
||||
baTable.getData()?.then(() => {
|
||||
baTable.initSort()
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.table-header-operate {
|
||||
margin-left: 12px;
|
||||
}
|
||||
.table-header-operate-text {
|
||||
margin-left: 6px;
|
||||
}
|
||||
</style>
|
||||
150
web/src/views/backend/routine/attachment/popupForm.vue
Normal file
150
web/src/views/backend/routine/attachment/popupForm.vue
Normal file
@@ -0,0 +1,150 @@
|
||||
<template>
|
||||
<!-- 对话框表单 -->
|
||||
<el-dialog
|
||||
class="ba-operate-dialog"
|
||||
:close-on-click-modal="false"
|
||||
:model-value="['Add', 'Edit'].includes(baTable.form.operate!)"
|
||||
@close="baTable.toggleForm"
|
||||
>
|
||||
<template #header>
|
||||
<div class="title" v-drag="['.ba-operate-dialog', '.el-dialog__header']" v-zoom="'.ba-operate-dialog'">
|
||||
{{ baTable.form.operate ? t(baTable.form.operate) : '' }}
|
||||
</div>
|
||||
</template>
|
||||
<el-scrollbar v-loading="baTable.form.loading" class="ba-table-form-scrollbar">
|
||||
<div
|
||||
class="ba-operate-form"
|
||||
:class="'ba-' + baTable.form.operate + '-form'"
|
||||
:style="config.layout.shrink ? '' : 'width: calc(100% - ' + baTable.form.labelWidth! / 2 + 'px)'"
|
||||
>
|
||||
<el-form
|
||||
@keyup.enter="baTable.onSubmit()"
|
||||
v-model="baTable.form.items"
|
||||
:label-position="config.layout.shrink ? 'top' : 'right'"
|
||||
:label-width="baTable.form.labelWidth + 'px'"
|
||||
>
|
||||
<el-form-item :label="t('utils.preview')">
|
||||
<el-image
|
||||
class="preview-img"
|
||||
:preview-src-list="[baTable.form.items!.full_url]"
|
||||
:src="previewRenderFormatter(baTable.form.items!, {}, baTable.form.items!.suffix)"
|
||||
></el-image>
|
||||
</el-form-item>
|
||||
<el-form-item :label="t('utils.Breakdown')">
|
||||
<el-input
|
||||
v-model="baTable.form.items!.topic"
|
||||
type="string"
|
||||
:placeholder="
|
||||
t(
|
||||
'routine.attachment.The file is saved in the directory, and the file will not be automatically transferred if the record is modified'
|
||||
)
|
||||
"
|
||||
readonly
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="t('routine.attachment.Physical path')">
|
||||
<el-input
|
||||
v-model="baTable.form.items!.url"
|
||||
type="string"
|
||||
:placeholder="t('routine.attachment.File saving path Modifying records will not automatically transfer files')"
|
||||
readonly
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="t('routine.attachment.image width')">
|
||||
<el-input
|
||||
v-model="baTable.form.items!.width"
|
||||
type="number"
|
||||
:placeholder="t('routine.attachment.Width of picture file')"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="t('routine.attachment.Picture height')">
|
||||
<el-input
|
||||
v-model="baTable.form.items!.height"
|
||||
type="number"
|
||||
:placeholder="t('routine.attachment.Height of picture file')"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="t('utils.Original name')">
|
||||
<el-input
|
||||
v-model="baTable.form.items!.name"
|
||||
type="string"
|
||||
:placeholder="t('routine.attachment.Original file name')"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="t('routine.attachment.file size')">
|
||||
<el-input
|
||||
v-model="baTable.form.items!.size"
|
||||
type="number"
|
||||
:placeholder="t('routine.attachment.File size (bytes)')"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="t('routine.attachment.mime type')">
|
||||
<el-input
|
||||
v-model="baTable.form.items!.mimetype"
|
||||
type="string"
|
||||
:placeholder="t('routine.attachment.File MIME type')"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="t('utils.Upload (Reference) times')">
|
||||
<el-input
|
||||
v-model="baTable.form.items!.quote"
|
||||
type="number"
|
||||
:placeholder="t('routine.attachment.Upload (Reference) times of this file')"
|
||||
></el-input>
|
||||
<span class="block-help">
|
||||
{{
|
||||
t(
|
||||
'routine.attachment.When the same file is uploaded multiple times, only one attachment record will be saved and added'
|
||||
)
|
||||
}}
|
||||
</span>
|
||||
</el-form-item>
|
||||
<el-form-item :label="t('routine.attachment.Storage mode')">
|
||||
<el-input
|
||||
v-model="baTable.form.items!.storage"
|
||||
type="string"
|
||||
:placeholder="t('routine.attachment.Storage mode')"
|
||||
readonly
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="t('routine.attachment.SHA1 code')">
|
||||
<el-input
|
||||
v-model="baTable.form.items!.sha1"
|
||||
type="string"
|
||||
:placeholder="t('routine.attachment.SHA1 encoding of file')"
|
||||
readonly
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
<template #footer>
|
||||
<div :style="'width: calc(100% - ' + baTable.form.labelWidth! / 1.8 + 'px)'">
|
||||
<el-button @click="baTable.toggleForm('')">{{ t('Cancel') }}</el-button>
|
||||
<el-button v-blur :loading="baTable.form.submitLoading" @click="baTable.onSubmit()" type="primary">
|
||||
{{ baTable.form.operateIds!.length > 1 ? t('Save and edit next item') : t('Save') }}
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { inject } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import type baTableClass from '/@/utils/baTable'
|
||||
import { previewRenderFormatter } from './index'
|
||||
import { useConfig } from '/@/stores/config'
|
||||
|
||||
const config = useConfig()
|
||||
const baTable = inject('baTable') as baTableClass
|
||||
|
||||
const { t } = useI18n()
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.preview-img {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
</style>
|
||||
136
web/src/views/backend/routine/config/add.vue
Normal file
136
web/src/views/backend/routine/config/add.vue
Normal file
@@ -0,0 +1,136 @@
|
||||
<template>
|
||||
<el-dialog class="ba-operate-dialog" :close-on-click-modal="false" :model-value="props.modelValue" @close="closeForm">
|
||||
<template #header>
|
||||
<div class="title" v-drag="['.ba-operate-dialog', '.el-dialog__header']" v-zoom="'.ba-operate-dialog'">
|
||||
{{ t('routine.config.Add configuration item') }}
|
||||
</div>
|
||||
</template>
|
||||
<el-scrollbar class="ba-table-form-scrollbar">
|
||||
<div class="ba-operate-form ba-add-form" :style="config.layout.shrink ? '' : 'width: calc(100% - ' + state.labelWidth / 2 + 'px)'">
|
||||
<el-form
|
||||
ref="formRef"
|
||||
@keyup.enter="onAddSubmit()"
|
||||
:rules="rules"
|
||||
:model="{ ...state.addConfig, ...state.formItemData }"
|
||||
:label-position="config.layout.shrink ? 'top' : 'right'"
|
||||
:label-width="160"
|
||||
>
|
||||
<FormItem
|
||||
:label="t('routine.config.Variable group')"
|
||||
type="select"
|
||||
v-model="state.addConfig.group"
|
||||
prop="group"
|
||||
:input-attr="{ content: configGroup }"
|
||||
:placeholder="t('Please select field', { field: t('routine.config.Variable group') })"
|
||||
/>
|
||||
<CreateFormItemData v-model="state.formItemData" />
|
||||
<FormItem :label="t('Weigh')" type="number" v-model="state.addConfig.weigh" prop="weigh" />
|
||||
</el-form>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
<template #footer>
|
||||
<div :style="'width: calc(100% - ' + state.labelWidth / 1.8 + 'px)'">
|
||||
<el-button @click="closeForm">{{ t('Cancel') }}</el-button>
|
||||
<el-button v-blur :loading="state.submitLoading" @click="onAddSubmit()" type="primary"> {{ t('Add') }} </el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { reactive, useTemplateRef } from 'vue'
|
||||
import FormItem from '/@/components/formItem/index.vue'
|
||||
import type { FormRules } from 'element-plus'
|
||||
import { buildValidatorData } from '/@/utils/validate'
|
||||
import { postData } from '/@/api/backend/routine/config'
|
||||
import CreateFormItemData from '/@/components/formItem/createData.vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useConfig } from '/@/stores/config'
|
||||
|
||||
const config = useConfig()
|
||||
|
||||
interface Props {
|
||||
modelValue: boolean
|
||||
configGroup: anyObj
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
modelValue: false,
|
||||
configGroup: () => {
|
||||
return {}
|
||||
},
|
||||
})
|
||||
|
||||
const emits = defineEmits<{
|
||||
(e: 'update:modelValue', value: boolean): void
|
||||
}>()
|
||||
|
||||
const closeForm = () => {
|
||||
emits('update:modelValue', false)
|
||||
}
|
||||
|
||||
const { t } = useI18n()
|
||||
const formRef = useTemplateRef('formRef')
|
||||
|
||||
const state: {
|
||||
inputTypes: anyObj
|
||||
labelWidth: number
|
||||
submitLoading: boolean
|
||||
addConfig: {
|
||||
group: string
|
||||
weigh: number
|
||||
content: string
|
||||
}
|
||||
formItemData: anyObj
|
||||
} = reactive({
|
||||
inputTypes: {},
|
||||
labelWidth: 180,
|
||||
submitLoading: false,
|
||||
addConfig: {
|
||||
group: '',
|
||||
weigh: 0,
|
||||
content: '',
|
||||
},
|
||||
formItemData: {
|
||||
dict: `key1=value1
|
||||
key2=value2`,
|
||||
},
|
||||
})
|
||||
|
||||
const rules = reactive<FormRules>({
|
||||
group: [
|
||||
buildValidatorData({
|
||||
name: 'required',
|
||||
trigger: 'change',
|
||||
message: t('Please select field', { field: t('routine.config.Variable group') }),
|
||||
}),
|
||||
],
|
||||
name: [
|
||||
buildValidatorData({ name: 'required', title: t('routine.config.Variable name') }),
|
||||
buildValidatorData({ name: 'varName', message: t('Please enter the correct field', { field: t('routine.config.Variable name') }) }),
|
||||
],
|
||||
title: [buildValidatorData({ name: 'required', title: t('routine.config.Variable title') })],
|
||||
type: [
|
||||
buildValidatorData({
|
||||
name: 'required',
|
||||
trigger: 'change',
|
||||
message: t('Please select field', { field: t('routine.config.Variable type') }),
|
||||
}),
|
||||
],
|
||||
weigh: [buildValidatorData({ name: 'integer', title: t('routine.config.number') })],
|
||||
})
|
||||
|
||||
const onAddSubmit = () => {
|
||||
formRef.value?.validate((valid) => {
|
||||
if (valid) {
|
||||
state.addConfig.content = state.formItemData.dict
|
||||
delete state.formItemData.dict
|
||||
postData('add', { ...state.addConfig, ...state.formItemData }).then(() => {
|
||||
emits('update:modelValue', false)
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
369
web/src/views/backend/routine/config/index.vue
Normal file
369
web/src/views/backend/routine/config/index.vue
Normal file
@@ -0,0 +1,369 @@
|
||||
<template>
|
||||
<div class="default-main">
|
||||
<el-row v-loading="state.loading" :gutter="20">
|
||||
<el-col class="xs-mb-20" :xs="24" :sm="16">
|
||||
<el-form
|
||||
v-if="!state.loading"
|
||||
ref="formRef"
|
||||
@submit.prevent=""
|
||||
@keyup.enter="onSubmit()"
|
||||
:model="state.form"
|
||||
:rules="state.rules"
|
||||
:label-position="'top'"
|
||||
:key="state.formKey"
|
||||
>
|
||||
<el-tabs v-model="state.activeTab" type="border-card" :before-leave="onBeforeLeave">
|
||||
<el-tab-pane class="config-tab-pane" v-for="(group, key) in state.config" :key="key" :name="key" :label="group.title">
|
||||
<div class="config-form-item" v-for="(item, idx) in group.list" :key="idx">
|
||||
<template v-if="item.group == state.activeTab">
|
||||
<FormItem
|
||||
v-if="item.type == 'number'"
|
||||
:label="item.title"
|
||||
:type="item.type"
|
||||
v-model="state.form[item.name]"
|
||||
:attr="{ prop: item.name, ...item.extend }"
|
||||
:input-attr="{ ...item.input_extend }"
|
||||
:tip="item.tip"
|
||||
:key="'number-' + item.id"
|
||||
/>
|
||||
<!-- 富文本在dialog内全屏编辑器时必须拥有很高的z-index，此处选择单独为editor设定较小的z-index -->
|
||||
<FormItem
|
||||
v-else-if="item.type == 'editor'"
|
||||
:label="item.title"
|
||||
:type="item.type"
|
||||
@keyup.enter.stop=""
|
||||
@keyup.ctrl.enter="onSubmit()"
|
||||
v-model="state.form[item.name]"
|
||||
:attr="{ prop: item.name, ...item.extend }"
|
||||
:input-attr="{
|
||||
style: {
|
||||
zIndex: 99,
|
||||
},
|
||||
...item.input_extend,
|
||||
}"
|
||||
:tip="item.tip"
|
||||
:key="'editor-' + item.id"
|
||||
/>
|
||||
<FormItem
|
||||
v-else-if="item.type == 'textarea'"
|
||||
:label="item.title"
|
||||
:type="item.type"
|
||||
@keyup.enter.stop=""
|
||||
@keyup.ctrl.enter="onSubmit()"
|
||||
v-model="state.form[item.name]"
|
||||
:attr="{ prop: item.name, ...item.extend }"
|
||||
:input-attr="{ rows: 3, ...item.input_extend }"
|
||||
:tip="item.tip"
|
||||
:key="'textarea-' + item.id"
|
||||
/>
|
||||
<FormItem
|
||||
v-else
|
||||
:label="item.title"
|
||||
:type="item.type"
|
||||
v-model="state.form[item.name]"
|
||||
:attr="{ prop: item.name, ...item.extend }"
|
||||
:input-attr="!isEmpty(item.content) ? { content: item.content, ...item.input_extend } : item.input_extend"
|
||||
:tip="item.tip"
|
||||
:key="'other-' + item.id"
|
||||
/>
|
||||
<div class="config-form-item-name">${{ item.name }}</div>
|
||||
<div class="del-config-form-item">
|
||||
<el-popconfirm
|
||||
@confirm="onDelConfig(item)"
|
||||
v-if="item.allow_del"
|
||||
:confirmButtonText="t('Delete')"
|
||||
:title="t('routine.config.Are you sure to delete the configuration item?')"
|
||||
>
|
||||
<template #reference>
|
||||
<Icon class="close-icon" size="15" name="el-icon-Close" />
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div v-if="group.name == 'mail'" class="send-test-mail">
|
||||
<el-button @click="onTestSendMail()">{{ t('routine.config.Test mail sending') }}</el-button>
|
||||
</div>
|
||||
<el-button type="primary" @click="onSubmit()">{{ t('Save') }}</el-button>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane
|
||||
name="add_config"
|
||||
class="config-tab-pane config-tab-pane-add"
|
||||
:label="t('routine.config.Add configuration item')"
|
||||
></el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-form>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="8">
|
||||
<el-card :header="t('routine.config.Quick configuration entry')">
|
||||
<el-button v-for="(item, idx) in state.quickEntrance" class="config_quick_entrance" :key="idx">
|
||||
<div @click="routePush({ name: item['value'] })">{{ item['key'] }}</div>
|
||||
</el-button>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<AddFrom v-if="!state.loading" v-model="state.showAddForm" :config-group="state.configGroup" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { FormItemRule } from 'element-plus'
|
||||
import { ElMessageBox, ElNotification } from 'element-plus'
|
||||
import { isEmpty } from 'lodash-es'
|
||||
import { onActivated, onDeactivated, onMounted, onUnmounted, reactive, useTemplateRef } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import AddFrom from './add.vue'
|
||||
import { del, index, postData, postSendTestMail } from '/@/api/backend/routine/config'
|
||||
import FormItem from '/@/components/formItem/index.vue'
|
||||
import { adminBaseRoutePath } from '/@/router/static/adminBase'
|
||||
import type { SiteConfig } from '/@/stores/interface'
|
||||
import { useSiteConfig } from '/@/stores/siteConfig'
|
||||
import { uuid } from '/@/utils/random'
|
||||
import { routePush } from '/@/utils/router'
|
||||
import { buildValidatorData, type buildValidatorParams } from '/@/utils/validate'
|
||||
import { closeHotUpdate, openHotUpdate } from '/@/utils/vite'
|
||||
|
||||
defineOptions({
|
||||
name: 'routine/config',
|
||||
})
|
||||
|
||||
const { t } = useI18n()
|
||||
const siteConfig = useSiteConfig()
|
||||
|
||||
const formRef = useTemplateRef('formRef')
|
||||
|
||||
const state: {
|
||||
loading: boolean
|
||||
config: anyObj
|
||||
remark: string
|
||||
configGroup: anyObj
|
||||
activeTab: string
|
||||
showAddForm: boolean
|
||||
rules: Partial<Record<string, FormItemRule[]>>
|
||||
form: anyObj
|
||||
quickEntrance: anyObj
|
||||
formKey: string
|
||||
} = reactive({
|
||||
loading: true,
|
||||
config: [],
|
||||
remark: '',
|
||||
configGroup: {},
|
||||
activeTab: '',
|
||||
showAddForm: false,
|
||||
rules: {},
|
||||
form: {},
|
||||
quickEntrance: {},
|
||||
formKey: uuid(),
|
||||
})
|
||||
|
||||
const getData = () => {
|
||||
index()
|
||||
.then((res) => {
|
||||
state.config = res.data.list
|
||||
state.remark = res.data.remark
|
||||
state.configGroup = res.data.configGroup
|
||||
state.quickEntrance = res.data.quickEntrance
|
||||
state.loading = false
|
||||
for (const key in state.configGroup) {
|
||||
state.activeTab = key
|
||||
break
|
||||
}
|
||||
let formNames: anyObj = {}
|
||||
let rules: Partial<Record<string, FormItemRule[]>> = {}
|
||||
for (const key in state.config) {
|
||||
for (const lKey in state.config[key].list) {
|
||||
if (state.config[key].list[lKey].rule) {
|
||||
let ruleStr = state.config[key].list[lKey].rule.split(',')
|
||||
let ruleArr: anyObj = []
|
||||
ruleStr.forEach((item: string) => {
|
||||
ruleArr.push(
|
||||
buildValidatorData({ name: item as buildValidatorParams['name'], title: state.config[key].list[lKey].title })
|
||||
)
|
||||
})
|
||||
rules = Object.assign(rules, {
|
||||
[state.config[key].list[lKey].name]: ruleArr,
|
||||
})
|
||||
}
|
||||
formNames[state.config[key].list[lKey].name] =
|
||||
state.config[key].list[lKey].type == 'number'
|
||||
? parseFloat(state.config[key].list[lKey].value)
|
||||
: state.config[key].list[lKey].value
|
||||
}
|
||||
}
|
||||
|
||||
state.form = formNames
|
||||
state.rules = rules
|
||||
state.formKey = uuid()
|
||||
})
|
||||
.catch(() => {
|
||||
state.loading = false
|
||||
})
|
||||
}
|
||||
|
||||
const onBeforeLeave = (newTabName: string | number) => {
|
||||
if (newTabName == 'add_config') {
|
||||
state.showAddForm = true
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
const onSubmit = () => {
|
||||
formRef.value?.validate((valid) => {
|
||||
if (valid) {
|
||||
// 只提交当前tab的表单数据
|
||||
const formData: anyObj = {}
|
||||
for (const key in state.config) {
|
||||
if (key != state.activeTab) {
|
||||
continue
|
||||
}
|
||||
for (const lKey in state.config[key].list) {
|
||||
formData[state.config[key].list[lKey].name] = state.form[state.config[key].list[lKey].name] ?? ''
|
||||
}
|
||||
}
|
||||
postData('edit', formData).then(() => {
|
||||
for (const key in siteConfig.$state) {
|
||||
if (formData[key] && siteConfig.$state[key as keyof SiteConfig] != formData[key]) {
|
||||
;(siteConfig.$state[key as keyof SiteConfig] as any) = formData[key]
|
||||
}
|
||||
}
|
||||
|
||||
if (formData.backend_entrance && formData.backend_entrance != adminBaseRoutePath) {
|
||||
window.open(window.location.href.replace(adminBaseRoutePath, formData.backend_entrance))
|
||||
window.close()
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const onDelConfig = (config: anyObj) => {
|
||||
del([config.id]).then(() => {
|
||||
getData()
|
||||
})
|
||||
}
|
||||
|
||||
const onTestSendMail = () => {
|
||||
if (!state.form.smtp_server || !state.form.smtp_port || !state.form.smtp_user || !state.form.smtp_pass || !state.form.smtp_sender_mail) {
|
||||
ElNotification({
|
||||
type: 'error',
|
||||
message: t('routine.config.Please enter the correct mail configuration'),
|
||||
})
|
||||
return false
|
||||
}
|
||||
|
||||
ElMessageBox.prompt(t('routine.config.Please enter the recipient email address'), t('routine.config.Test mail sending'), {
|
||||
confirmButtonText: t('routine.config.send out'),
|
||||
cancelButtonText: t('Cancel'),
|
||||
inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
|
||||
inputErrorMessage: t('routine.config.Please enter the correct email address'),
|
||||
beforeClose: (action, instance, done) => {
|
||||
if (action === 'confirm') {
|
||||
instance.confirmButtonLoading = true
|
||||
instance.confirmButtonText = t('routine.config.Sending')
|
||||
postSendTestMail(state.form, instance.inputValue)
|
||||
.then(() => {
|
||||
done()
|
||||
})
|
||||
.catch(() => {
|
||||
done()
|
||||
})
|
||||
} else {
|
||||
done()
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getData()
|
||||
closeHotUpdate('config')
|
||||
})
|
||||
onActivated(() => {
|
||||
closeHotUpdate('config')
|
||||
})
|
||||
onDeactivated(() => {
|
||||
openHotUpdate('config')
|
||||
})
|
||||
onUnmounted(() => {
|
||||
openHotUpdate('config')
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.send-test-mail {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
.el-tabs--border-card {
|
||||
border: none;
|
||||
box-shadow: var(--el-box-shadow-light);
|
||||
border-radius: var(--el-border-radius-base);
|
||||
}
|
||||
.el-tabs--border-card :deep(.el-tabs__header) {
|
||||
background-color: var(--ba-bg-color);
|
||||
border-bottom: none;
|
||||
border-top-left-radius: var(--el-border-radius-base);
|
||||
border-top-right-radius: var(--el-border-radius-base);
|
||||
}
|
||||
.el-tabs--border-card :deep(.el-tabs__item.is-active) {
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
.el-tabs--border-card :deep(.el-tabs__nav-wrap) {
|
||||
border-top-left-radius: var(--el-border-radius-base);
|
||||
border-top-right-radius: var(--el-border-radius-base);
|
||||
}
|
||||
.el-card :deep(.el-card__header) {
|
||||
height: 40px;
|
||||
padding: 0;
|
||||
line-height: 40px;
|
||||
border: none;
|
||||
padding-left: 20px;
|
||||
background-color: var(--ba-bg-color);
|
||||
}
|
||||
.config-tab-pane {
|
||||
padding: 5px;
|
||||
}
|
||||
.config-tab-pane-add {
|
||||
width: 80%;
|
||||
}
|
||||
.config-form-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.el-form-item {
|
||||
flex: 13;
|
||||
}
|
||||
.config-form-item-name {
|
||||
opacity: 0;
|
||||
flex: 3;
|
||||
font-size: 13px;
|
||||
color: var(--el-text-color-disabled);
|
||||
padding-left: 20px;
|
||||
}
|
||||
.del-config-form-item {
|
||||
cursor: pointer;
|
||||
flex: 1;
|
||||
padding-left: 10px;
|
||||
}
|
||||
.close-icon {
|
||||
display: none;
|
||||
}
|
||||
&:hover {
|
||||
.config-form-item-name {
|
||||
opacity: 1;
|
||||
}
|
||||
.close-icon {
|
||||
display: block;
|
||||
color: var(--el-text-color-disabled) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.config_quick_entrance {
|
||||
margin-left: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
.xs-mb-20 {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user