gva
/
web-admin
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改媒体库分类 

修改页面样式
This commit is contained in:
jacky 2024-05-07 10:21:15 +08:00
parent 58ca49626e
commit abad8f8bba
12 changed files with 168 additions and 307 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/style/main.scss
View File

@ -713,13 +713,26 @@ li {
}
.gva-image {
width: 120px;
height: 80px;
background: #F5F7FA;
background: var(--el-fill-color-light);
padding: 6px;
border-radius: 5px;
}
.gva-media-box {
display: flex;
background: var(--el-fill-color-light);
padding: 6px;
border-radius: 5px;
justify-content: center;
align-items: center;
cursor: pointer;
}
.gva-media-box .el-icon {
color: var(--el-text-color-secondary);
font-size: 30px;
}
.avatar-uploader .avatar {
width: 100%;
height: 100%;
@ -751,3 +764,12 @@ li {
margin: 15px;
line-height: 1.5rem;
}
.admin-box .el-table .gva-text-truncate .cell {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
line-height: 1.8rem;
}

4
src/view/content/academician/index.vue
View File

@ -47,9 +47,9 @@
<p>{{ scope.row.title }}</p>
</template>
</el-table-column>
<el-table-column align="left" label="简介" min-width="300" prop="brief" class-name="text-truncate">
<el-table-column align="left" label="简介" min-width="300" prop="brief" class-name="gva-text-truncate">
<template #default="scope">
<p><el-text :line-clamp="3">{{ scope.row.brief }}</el-text></p>
<p>{{ scope.row.brief }}</p>
</template>
</el-table-column>
<el-table-column align="left" fixed="right" label="操作" width="200">

8
src/view/content/activity/index.vue
View File

@ -168,7 +168,6 @@
</template>
<el-form :model="formData" label-position="top" ref="elFormRef" :inline="true" :rules="rule" label-width="100px">
<el-form-item label="封面" prop="cover" style="width: 850px">
<!-- <SelectImage v-model="formData.cover" category="activity_imgs" /> -->
<el-upload class="avatar-uploader" :action="`${imgUploadPath}/cms/mediaFile/upload?category=activity_imgs`"
:show-file-list="false" :on-success="uploadSuccess" :on-error="uploadFailure" :before-upload="beforeUpload">
<img v-if="formData.cover" :src="formData.cover" class="avatar"
@ -254,13 +253,10 @@ import {
import { isUrl } from '@/utils/validator'
import { getUrl } from '@/utils/image'
import { isImageMime } from '@/utils/image'
// 图片选择组件
import SelectImage from '@/components/selectImage/selectImage.vue'
// 富文本组件
import RichEdit from '@/components/richtext/rich-edit.vue'
// 全量引入格式化工具 请按需保留
import { getDictFunc, formatDate, formatBoolean, filterDict, ReturnArrImg, onDownloadFile } from '@/utils/format'
import { getDictFunc, formatDate, filterDict } from '@/utils/format'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ref, reactive } from 'vue'
@ -442,13 +438,11 @@ const setOptions = async () => {
activityStatusOptions.value.map((item) => { item.value = parseInt(item.value); return item })
activityKindOptions.value = await getDictFunc('activityKind')
activityKindOptions.value.map((item) => { item.value = parseInt(item.value); return item })
console.log(activityKindOptions.value)
}
// 获取需要的字典 可能为空 按需保留
setOptions()
// 多选数据
const multipleSelection = ref([])
// 多选

14
src/view/content/article/index.vue
View File

@ -59,11 +59,7 @@
<p><el-text :line-clamp="2" size="small">{{ scope.row.subtitle }}</el-text></p>
</template>
</el-table-column>
<el-table-column align="left" label="摘要" min-width="400" prop="desc" class-name="text-truncate">
<template #default="scope">
<el-text :line-clamp="3">{{ scope.row.desc }}</el-text>
</template>
</el-table-column>
<el-table-column align="left" label="摘要" min-width="400" prop="desc" class-name="gva-text-truncate" />
<el-table-column align="left" label="标签" min-width="150" prop="tags">
<template #default="scope">
<el-tag v-for="(item, index) in formatTags(scope.row.tags)" :key="index" size="small"
@ -520,12 +516,4 @@ getTableData()
.cell button {
line-height: 22px;
}
.text-truncate .cell {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
}
</style>

8
src/view/content/components/academicianEdit.vue
View File

@ -41,7 +41,7 @@
</el-form-item>
<el-form-item label="个人详细介绍" prop="description">
<div v-if="showDrawer">
<RichEdit v-model="editForm.description" media-category="academician_dsc_imgs" style="height: 40rem;" />
<RichEdit v-model="editForm.description" media-category="academician_imgs" style="height: 40rem;" />
</div>
</el-form-item>
<el-form-item label="专家论文" prop="papers">
@ -58,7 +58,7 @@
<el-alert type="info" :closable="false" style="margin-bottom: 10px;"
:description="`类型为：${avatarInfo.mediaTypeInfo}, 大小不超过${avatarInfo.fileSizeInfo}, 宽*高: ${avatarInfo.mediaWidth}px*${avatarInfo.mediaHeight}px`" />
<el-upload class="avatar-uploader"
:action="`${imgUploadPath}/cms/mediaFile/upload?category=academician_avatar`" :show-file-list="false"
:action="`${imgUploadPath}/cms/mediaFile/upload?category=academician_imgs`" :show-file-list="false"
:on-success="(res) => { uploadSuccess(res, 'avatar') }" :on-error="uploadFailure"
:before-upload="(file) => { return beforeUpload(file, avatarInfo) }">
<img v-if="editForm.avatar" :src="editForm.avatar" class="avatar" style="object-fit: cover;">
@ -71,7 +71,7 @@
<el-alert type="info" :closable="false" style="margin-bottom: 10px;"
:description="`类型为：${videoInfo.mediaTypeInfo}, 大小不超过${videoInfo.fileSizeInfo}, 宽*高: ${videoInfo.mediaWidth}px*${videoInfo.mediaHeight}px`" />
<el-upload class="avatar-uploader"
:action="`${imgUploadPath}/cms/mediaFile/upload?category=academician_video`" :show-file-list="false"
:action="`${imgUploadPath}/cms/mediaFile/upload?category=academician_imgs`" :show-file-list="false"
:on-success="(res) => { uploadSuccess(res, 'video') }" :on-error="uploadFailure"
:before-upload="(file) => { return beforeUpload(file, videoInfo) }">
<el-button type="primary" plain icon="upload">上传</el-button>
@ -84,7 +84,7 @@
<el-alert type="info" :closable="false" style="margin-bottom: 10px;"
:title="`类型为：${qrcodeInfo.mediaTypeInfo}, 大小不超过${qrcodeInfo.fileSizeInfo}, 宽*高: ${qrcodeInfo.mediaWidth}px*${qrcodeInfo.mediaHeight}px`" />
<el-upload class="avatar-uploader" style="width: 100px; height: 100px"
:action="`${imgUploadPath}/cms/mediaFile/upload?category=academician_qrcode`" :show-file-list="false"
:action="`${imgUploadPath}/cms/mediaFile/upload?category=academician_imgs`" :show-file-list="false"
:on-success="(res) => { uploadSuccess(res, 'qrcode') }" :on-error="uploadFailure"
:before-upload="(file) => { return beforeUpload(file, qrcodeInfo) }">
<img v-if="editForm.qrcodeUrl" :src="editForm.qrcodeUrl" class="avatar" style="object-fit: cover;">

12
src/view/content/components/entrepreneurEdit.vue
View File

@ -41,14 +41,12 @@
</el-form-item>
<el-form-item label="个人详细介绍" prop="description">
<div v-if="showDrawer">
<RichEdit v-model="editForm.description" media-category="entrepreneur_dsc_imgs"
style="height: 30rem;" />
<RichEdit v-model="editForm.description" media-category="entrepreneur_imgs" style="height: 30rem;" />
</div>
</el-form-item>
<el-form-item label="企业详细介绍" prop="enterpriseDsc">
<div v-if="showDrawer">
<RichEdit v-model="editForm.enterpriseDsc" media-category="enterprise_dsc_imgs"
style="height: 30rem;" />
<RichEdit v-model="editForm.enterpriseDsc" media-category="entrepreneur_imgs" style="height: 30rem;" />
</div>
</el-form-item>
</el-col>
@ -60,7 +58,7 @@
<el-alert type="info" :closable="false" style="margin-bottom: 10px;"
:description="`类型为：${avatarInfo.mediaTypeInfo}, 大小不超过${avatarInfo.fileSizeInfo}, 宽*高: ${avatarInfo.mediaWidth}px*${avatarInfo.mediaHeight}px`" />
<el-upload class="avatar-uploader"
:action="`${imgUploadPath}/cms/mediaFile/upload?category=entrepreneur_avatar`" :show-file-list="false"
:action="`${imgUploadPath}/cms/mediaFile/upload?category=entrepreneur_imgs`" :show-file-list="false"
:on-success="(res) => { uploadSuccess(res, 'avatar') }" :on-error="uploadFailure"
:before-upload="(file) => { return beforeUpload(file, avatarInfo) }">
<img v-if="editForm.avatar" :src="editForm.avatar" class="avatar" style="object-fit: cover;">
@ -73,7 +71,7 @@
<el-alert type="info" :closable="false" style="margin-bottom: 10px;"
:description="`类型为：${videoInfo.mediaTypeInfo}, 大小不超过${videoInfo.fileSizeInfo}, 宽*高: ${videoInfo.mediaWidth}px*${videoInfo.mediaHeight}px`" />
<el-upload class="avatar-uploader"
:action="`${imgUploadPath}/cms/mediaFile/upload?category=entrepreneur_video`" :show-file-list="false"
:action="`${imgUploadPath}/cms/mediaFile/upload?category=entrepreneur_imgs`" :show-file-list="false"
:on-success="(res) => { uploadSuccess(res, 'video') }" :on-error="uploadFailure"
:before-upload="(file) => { return beforeUpload(file, videoInfo) }">
<el-button type="primary" plain icon="upload">上传</el-button>
@ -86,7 +84,7 @@
<el-alert type="info" :closable="false" style="margin-bottom: 10px;"
:title="`类型为：${qrcodeInfo.mediaTypeInfo}, 大小不超过${qrcodeInfo.fileSizeInfo}, 宽*高: ${qrcodeInfo.mediaWidth}px*${qrcodeInfo.mediaHeight}px`" />
<el-upload class="avatar-uploader" style="width: 100px; height: 100px"
:action="`${imgUploadPath}/cms/mediaFile/upload?category=entrepreneur_qrcode`" :show-file-list="false"
:action="`${imgUploadPath}/cms/mediaFile/upload?category=entrepreneur_imgs`" :show-file-list="false"
:on-success="(res) => { uploadSuccess(res, 'qrcode') }" :on-error="uploadFailure"
:before-upload="(file) => { return beforeUpload(file, qrcodeInfo) }">
<img v-if="editForm.qrcodeUrl" :src="editForm.qrcodeUrl" class="avatar" style="object-fit: cover;">

6
src/view/content/entrepreneur/index.vue
View File

@ -47,11 +47,7 @@
<p>{{ scope.row.enterprise }}</p>
</template>
</el-table-column>
<el-table-column align="left" label="介绍" min-width="300" prop="brief" class-name="text-truncate">
<template #default="scope">
<p><el-text :line-clamp="3">{{ scope.row.brief }}</el-text></p>
</template>
</el-table-column>
<el-table-column align="left" label="介绍" min-width="300" prop="brief" class-name="gva-text-truncate" />
<el-table-column align="left" fixed="right" label="操作" width="160">
<template #default="scope">
<el-button type="primary" link icon="edit" @click="handleRowEdit(scope.row.ID)">编辑</el-button>

10
src/view/content/fetcher/article.vue
View File

@ -185,13 +185,3 @@ const handlerSaveArticle = () => {
}
</script>
<style type="scss">
.text-truncate .cell {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
}
</style>

68
src/view/mediaFile/index.vue
View File

@ -7,16 +7,31 @@
@on-before-upload="beforeUpload" />
<upload-image category="media" label="图片压缩上传" :file-size="512" :max-w-h="1080" @on-success="uploadSuccess"
@on-failure="uploadFailure" @on-before-upload="beforeUpload" />
<el-select v-model="search.category" clearable placeholder="请选择分类" style="width: 350px;"
@clear="() => { search.category = undefined }">
<el-option v-for="(item, key) in mediaFileCategoryOpts" :key="key" :label="item.label" :value="item.value" />
</el-select>
<el-input v-model="search.keyword" class="keyword" placeholder="请输入文件名或备注" clearable />
<el-button type="primary" icon="search" @click="getTableData">查询</el-button>
</div>
<el-table :data="tableData">
<el-table-column align="left" label="预览" width="110">
<el-table-column align="left" label="预览" width="150">
<template #default="scope">
<el-image :src="getUrl(scope.row.url)" class="gva-image" fit="contain"
<el-image v-if="isImage(scope.row.tag)" :src="getUrl(scope.row.url)" class="gva-image" fit="contain"
:preview-src-list="[getUrl(scope.row.url)]" :preview-teleported="true"
style="width: 100px; height: 100px;" />
style="width: 120px; height: 100px;" />
<div v-else-if="isVideo(scope.row.tag)" class="gva-media-box" style="width: 120px; height: 100px;"
@click="clickPreviewVideo(scope.row.url)">
<el-icon>
<VideoPlay />
</el-icon>
</div>
<div v-else class="gva-media-box" style="width: 120px; height: 80px;">
<el-icon>
<Document />
</el-icon>
</div>
</template>
</el-table-column>
<el-table-column align="left" label="日期" prop="UpdatedAt" width="180">
@ -24,12 +39,21 @@
<div>{{ formatDate(scope.row.UpdatedAt) }}</div>
</template>
</el-table-column>
<el-table-column align="left" label="文件名/备注" prop="name" width="280">
<el-table-column align="left" label="文件名/备注" prop="name" width="280" class-name="gva-text-truncate">
<template #default="scope">
<div class="name" @click="editFileNameFunc(scope.row)">{{ scope.row.name }}</div>
</template>
</el-table-column>
<el-table-column align="left" label="链接" prop="url" min-width="300" />
<el-table-column align="left" label="链接" prop="url" min-width="300" class-name="gva-text-truncate">
<template #default="scope">
<div>{{ scope.row.url }}</div>
</template>
</el-table-column>
<el-table-column align="left" label="分类" prop="kind" width="140">
<template #default="scope">
{{ filterDict(scope.row.category, mediaFileCategoryOpts) }}
</template>
</el-table-column>
<el-table-column align="left" label="标签" prop="tag" width="100">
<template #default="scope">
<el-tag :type="scope.row.tag === 'jpg' ? 'info' : 'success'" disable-transitions>{{ scope.row.tag }}
@ -56,12 +80,10 @@
import { getUrl } from '@/utils/image'
import { getFileList, deleteFile, editFileName } from '@/api/mediaFile'
import { downloadImage } from '@/utils/downloadImg'
import CustomPic from '@/components/customPic/index.vue'
import UploadImage from '@/components/upload/image.vue'
import UploadCommon from '@/components/upload/common.vue'
import { formatDate } from '@/utils/format'
import { getDictFunc, formatDate, filterDict } from '@/utils/format'
import WarningBar from '@/components/warningBar/warningBar.vue'
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
@ -69,8 +91,16 @@ defineOptions({
name: 'Upload',
})
const path = ref(import.meta.env.VITE_BASE_API)
const mediaFileCategoryOpts = ref([])
// 获取需要的字典 可能为空 按需保留
const setOptions = async () => {
mediaFileCategoryOpts.value = await getDictFunc('mediaFileCategory')
}
// 获取需要的字典 可能为空 按需保留
setOptions()
const path = ref(import.meta.env.VITE_BASE_API)
const page = ref(1)
const total = ref(0)
const pageSize = ref(10)
@ -78,6 +108,22 @@ const search = ref({})
const tableData = ref([])
const fullscreenLoading = ref(false)
const isImage = (tag) => {
tag = tag.toLowerCase()
if (tag == 'jpg' || tag == 'png' || tag == 'webp' || tag == 'gif') {
return true
}
return false
}
const isVideo = (tag) => {
tag = tag.toLowerCase()
if (tag == 'mp4' || tag == 'ogg' || tag == 'webm') {
return true
}
return false
}
// 分页
const handleSizeChange = (val) => {
pageSize.value = val
@ -178,6 +224,10 @@ const editFileNameFunc = async (row) => {
})
})
}
const clickPreviewVideo = () => {
console.log('clickPreviewVideo')
}
</script>
<style scoped>

12
src/view/organize/components/userList.vue
View File

@ -1,14 +1,16 @@
<template>
<div v-if="selectedOrganize">
<div class="gva-btn-list" style="margin-bottom: 15px;">
<div class="gva-btn-list justify-between" style="margin-bottom: 15px;">
<div class="text-black cursor-pointer text-lg leading-5" @click="totalCollapse">
<div v-if="isCollapse" class="gvaIcon gvaIcon-arrow-double-right" />
<div v-else class="gvaIcon gvaIcon-arrow-double-left" />
<span v-if="isCollapse" class="gvaIcon gvaIcon-arrow-double-right" />
<span v-else class="gvaIcon gvaIcon-arrow-double-left" />
<el-text size="large" tag="b" style="margin-left: 10px;">
用户管理，当前选中：{{ selectedOrganize.name }}（共{{ total }}人）
</el-text>
</div>
<el-text size="large" tag="b">用户管理，当前选中：{{ selectedOrganize.name }}（共{{ total }}人）</el-text>
<el-button type="primary" icon="plus" @click="addUser">新增用户</el-button>
</div>
<div class="gva-btn-list">
<el-button type="primary" icon="plus" @click="addUser">新增用户</el-button>
</div>
<el-table :data="tableData" row-key="ID">
<el-table-column align="left" label="账户" min-width="120" prop="userName" />

102
src/view/superAdmin/dictionary/sysDictionary.vue
View File

@ -1,44 +1,28 @@
<template>
<div>
<warning-bar
title="获取字典且缓存方法已在前端utils/dictionary 已经封装完成 不必自己书写 使用方法查看文件内注释"
/>
<warning-bar title="获取字典且缓存方法已在前端utils/dictionary 已经封装完成 不必自己书写 使用方法查看文件内注释" />
<div class="dict-box flex gap-4">
<div class="w-64 bg-white p-4">
<div class="flex justify-between items-center">
<span class="text font-bold">字典列表</span>
<el-button
type="primary"
@click="openDialog"
>
<el-button type="primary" @click="openDialog">
新增
</el-button>
</div>
<el-scrollbar
class="mt-4"
style="height: calc(100vh - 300px)"
>
<div
v-for="dictionary in dictionaryData"
:key="dictionary.ID"
<el-scrollbar class="mt-4" style="height: calc(100vh - 300px)">
<div v-for="dictionary in dictionaryData" :key="dictionary.ID"
class="rounded flex justify-between items-center px-2 py-4 cursor-pointer mt-2 hover:bg-blue-50 hover:text-gray-800 group bg-gray-50"
:class="selectID === dictionary.ID && 'active'"
@click="toDetail(dictionary)"
>
:class="selectID === dictionary.ID && 'active'" @click="toDetail(dictionary)">
<span class="max-w-[160px] truncate">{{ dictionary.name }}</span>
<div>
<el-icon
class="group-hover:text-blue-500"
<el-icon class="group-hover:text-blue-500"
:class="selectID === dictionary.ID ? 'text-white-800' : 'text-blue-500'"
@click.stop="updateSysDictionaryFunc(dictionary)"
>
@click.stop="updateSysDictionaryFunc(dictionary)">
<Edit />
</el-icon>
<el-icon
class="ml-2 group-hover:text-red-500"
<el-icon class="ml-2 group-hover:text-red-500"
:class="selectID === dictionary.ID ? 'text-white-800' : 'text-red-500'"
@click="deleteSysDictionaryFunc(dictionary)"
>
@click="deleteSysDictionaryFunc(dictionary)">
<Delete />
</el-icon>
</div>
@ -49,70 +33,25 @@
<sysDictionaryDetail :sys-dictionary-i-d="selectID" />
</div>
</div>
<el-dialog
v-model="dialogFormVisible"
:before-close="closeDialog"
:title="type==='create'?'添加字典':'修改字典'"
>
<el-form
ref="dialogForm"
:model="formData"
:rules="rules"
label-width="110px"
>
<el-form-item
label="字典名（中）"
prop="name"
>
<el-input
v-model="formData.name"
placeholder="请输入字典名（中）"
clearable
:style="{ width: '100%' }"
/>
<el-dialog v-model="dialogFormVisible" :before-close="closeDialog" :title="type === 'create' ? '添加字典' : '修改字典'">
<el-form ref="dialogForm" :model="formData" :rules="rules" label-width="110px">
<el-form-item label="字典名（中）" prop="name">
<el-input v-model="formData.name" placeholder="请输入字典名（中）" clearable :style="{ width: '100%' }" />
</el-form-item>
<el-form-item
label="字典名（英）"
prop="type"
>
<el-input
v-model="formData.type"
placeholder="请输入字典名（英）"
clearable
:style="{ width: '100%' }"
/>
<el-form-item label="字典名（英）" prop="type">
<el-input v-model="formData.type" placeholder="请输入字典名（英）" clearable :style="{ width: '100%' }" />
</el-form-item>
<el-form-item
label="状态"
prop="status"
required
>
<el-switch
v-model="formData.status"
active-text="开启"
inactive-text="停用"
/>
<el-form-item label="状态" prop="status" required>
<el-switch v-model="formData.status" active-text="开启" inactive-text="停用" />
</el-form-item>
<el-form-item
label="描述"
prop="desc"
>
<el-input
v-model="formData.desc"
placeholder="请输入描述"
clearable
:style="{ width: '100%' }"
/>
<el-form-item label="描述" prop="desc">
<el-input v-model="formData.desc" placeholder="请输入描述" clearable :style="{ width: '100%' }" />
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button @click="closeDialog">取 消</el-button>
<el-button
type="primary"
@click="enterDialog"
>确 定</el-button>
<el-button type="primary" @click="enterDialog">确 定</el-button>
</div>
</template>
</el-dialog>
@ -255,6 +194,7 @@ const openDialog = () => {
.dict-box {
height: calc(100vh - 240px);
}
.active {
background-color: var(--el-color-primary) !important;
color: #fff;

175
src/view/superAdmin/dictionary/sysDictionaryDetail.vue
View File

@ -3,172 +3,54 @@
<div class="gva-table-box">
<div class="gva-btn-list justify-between">
<span class="text font-bold">字典详细内容</span>
<el-button
type="primary"
icon="plus"
@click="openDialog"
>新增字典项</el-button>
<el-button type="primary" icon="plus" @click="openDialog">新增字典项</el-button>
</div>
<el-table
ref="multipleTable"
:data="tableData"
style="width: 100%"
tooltip-effect="dark"
row-key="ID"
>
<el-table-column
type="selection"
width="55"
/>
<el-table-column
align="left"
label="日期"
width="180"
>
<template #default="scope">{{ formatDate(scope.row.CreatedAt) }}</template>
</el-table-column>
<el-table-column
align="left"
label="展示值"
prop="label"
/>
<el-table-column
align="left"
label="字典值"
prop="value"
/>
<el-table-column
align="left"
label="扩展值"
prop="extend"
/>
<el-table-column
align="left"
label="启用状态"
prop="status"
width="120"
>
<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" row-key="ID">
<el-table-column align="left" label="字典值" prop="value" min-width="120" />
<el-table-column align="left" label="展示值" prop="label" min-width="120" />
<el-table-column align="left" label="扩展值" prop="extend" />
<el-table-column align="left" label="启用状态" prop="status" width="100">
<template #default="scope">{{ formatBoolean(scope.row.status) }}</template>
</el-table-column>
<el-table-column
align="left"
label="排序标记"
prop="sort"
width="120"
/>
<el-table-column
align="left"
label="操作"
width="180"
>
<el-table-column align="left" label="排序标记" prop="sort" width="100" />
<el-table-column align="left" label="操作" width="180">
<template #default="scope">
<el-button
type="primary"
link
icon="edit"
@click="updateSysDictionaryDetailFunc(scope.row)"
>变更</el-button>
<el-button
type="primary"
link
icon="delete"
@click="deleteSysDictionaryDetailFunc(scope.row)"
>删除</el-button>
<el-button type="primary" link icon="edit" @click="updateSysDictionaryDetailFunc(scope.row)">变更</el-button>
<el-button type="primary" link icon="delete"
@click="deleteSysDictionaryDetailFunc(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<div class="gva-pagination">
<el-pagination
:current-page="page"
:page-size="pageSize"
:page-sizes="[10, 30, 50, 100]"
:total="total"
layout="total, sizes, prev, pager, next, jumper"
@current-change="handleCurrentChange"
@size-change="handleSizeChange"
/>
<el-pagination :current-page="page" :page-size="pageSize" :page-sizes="[10, 30, 50, 100]" :total="total"
layout="total, sizes, prev, pager, next, jumper" @current-change="handleCurrentChange"
@size-change="handleSizeChange" />
</div>
</div>
<el-dialog
v-model="dialogFormVisible"
:before-close="closeDialog"
:title="type==='create'?'添加字典项':'修改字典项'"
>
<el-form
ref="dialogForm"
:model="formData"
:rules="rules"
label-width="110px"
>
<el-form-item
label="展示值"
prop="label"
>
<el-input
v-model="formData.label"
placeholder="请输入展示值"
clearable
:style="{width: '100%'}"
/>
<el-dialog v-model="dialogFormVisible" :before-close="closeDialog" :title="type === 'create' ? '添加字典项' : '修改字典项'">
<el-form ref="dialogForm" :model="formData" :rules="rules" label-width="110px">
<el-form-item label="展示值" prop="label">
<el-input v-model="formData.label" placeholder="请输入展示值" clearable :style="{ width: '100%' }" />
</el-form-item>
<el-form-item
label="字典值"
prop="value"
>
<el-input
v-model="formData.value"
placeholder="请输入字典值"
clearable
:style="{width: '100%'}"
/>
<el-form-item label="字典值" prop="value">
<el-input v-model="formData.value" placeholder="请输入字典值" clearable :style="{ width: '100%' }" />
</el-form-item>
<el-form-item
label="扩展值"
prop="extend"
>
<el-input
v-model="formData.extend"
placeholder="请输入扩展值"
clearable
:style="{width: '100%'}"
/>
<el-form-item label="扩展值" prop="extend">
<el-input v-model="formData.extend" placeholder="请输入扩展值" clearable :style="{ width: '100%' }" />
</el-form-item>
<el-form-item
label="启用状态"
prop="status"
required
>
<el-switch
v-model="formData.status"
active-text="开启"
inactive-text="停用"
/>
<el-form-item label="启用状态" prop="status" required>
<el-switch v-model="formData.status" active-text="开启" inactive-text="停用" />
</el-form-item>
<el-form-item
label="排序标记"
prop="sort"
>
<el-input-number
v-model.number="formData.sort"
placeholder="排序标记"
/>
<el-form-item label="排序标记" prop="sort">
<el-input-number v-model.number="formData.sort" placeholder="排序标记" />
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button @click="closeDialog">取 消</el-button>
<el-button
type="primary"
@click="enterDialog"
>确 定</el-button>
<el-button type="primary" @click="enterDialog">确 定</el-button>
</div>
</template>
</el-dialog>
@ -340,5 +222,4 @@ watch(() => props.sysDictionaryID, () => {
</script>
<style>
</style>
<style></style>