feat: 新增系统管理页面，数据字典功能。
This commit is contained in:
tianyongbao
209
src/pages_mine/pages/system/dict/addEdit.vue
Normal file
209
src/pages_mine/pages/system/dict/addEdit.vue
Normal file
@@ -0,0 +1,209 @@
|
||||
<template>
|
||||
<view class="container" style="paddingBottom:1rpx;">
|
||||
<u-navbar
|
||||
leftIconSize="40rpx"
|
||||
leftIconColor="#333333"
|
||||
:title="title"
|
||||
>
|
||||
</u-navbar>
|
||||
<view class="section">
|
||||
<view class="section-title">{{ title }}</view>
|
||||
<view class="form-view">
|
||||
<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="auto"
|
||||
:labelStyle="{ color: '#333333', fontSize: '30rpx' }">
|
||||
<u-form-item label="字典名称" prop="dictName" required>
|
||||
<u--input v-model="form.dictName" placeholder="请输入字典名称"
|
||||
inputAlign="right" border="none"></u--input>
|
||||
</u-form-item>
|
||||
|
||||
<u-form-item label="字典类型" prop="dictType" required>
|
||||
<u--input v-model="form.dictType" placeholder="请输入字典类型"
|
||||
inputAlign="right" border="none"></u--input>
|
||||
</u-form-item>
|
||||
|
||||
<u-form-item label="状态" prop="statusName" @click="showStatusPicker = true">
|
||||
<u--input v-model="statusName" disabled disabledColor="#ffffff" placeholder="请选择状态"
|
||||
inputAlign="right" border="none"></u--input>
|
||||
<template #right>
|
||||
<u-icon name="arrow-down"></u-icon>
|
||||
</template>
|
||||
</u-form-item>
|
||||
|
||||
<u-form-item label="备注" prop="remark" labelPosition="top">
|
||||
<u--textarea v-model="form.remark" placeholder="请输入备注" border="none" autoHeight inputAlign="right" count
|
||||
maxlength="500" style="padding:18rpx 0;"></u--textarea>
|
||||
</u-form-item>
|
||||
</u--form>
|
||||
<view class="form-btn">
|
||||
<u-button type="primary" text="提交" @click="submit"></u-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<u-toast ref="uToast"></u-toast>
|
||||
<u-picker itemHeight="88" :show="showStatusPicker" :columns="statusList" keyName="dictLabel" @cancel="showStatusPicker = false"
|
||||
@confirm="handleStatusConfirm"></u-picker>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, getCurrentInstance } from 'vue'
|
||||
import { getType, addType, updateType } from '@/api/system/dict/type'
|
||||
import { getDicts } from "@/api/system/dict/data"
|
||||
import { onLoad } from "@dcloudio/uni-app"
|
||||
|
||||
const { proxy } = getCurrentInstance()
|
||||
const statusList = ref([])
|
||||
const title = ref('添加字典类型')
|
||||
const showStatusPicker = ref(false)
|
||||
const statusName = ref('')
|
||||
|
||||
const form = reactive({
|
||||
dictId: undefined,
|
||||
dictName: undefined,
|
||||
dictType: undefined,
|
||||
status: '0',
|
||||
remark: undefined
|
||||
})
|
||||
|
||||
const rules = {
|
||||
dictName: [
|
||||
{ required: true, message: '字典名称不能为空', trigger: ['blur', 'change'] }
|
||||
],
|
||||
dictType: [
|
||||
{ required: true, message: '字典类型不能为空', trigger: ['blur', 'change'] }
|
||||
]
|
||||
}
|
||||
|
||||
onLoad((option) => {
|
||||
getDicts('sys_normal_disable').then(res => {
|
||||
statusList.value = [res.data]
|
||||
})
|
||||
|
||||
if (option.id) {
|
||||
title.value = '修改字典类型'
|
||||
getDetail(option.id)
|
||||
} else {
|
||||
// 新增时默认显示状态
|
||||
setTimeout(() => {
|
||||
updateStatusName()
|
||||
}, 100)
|
||||
}
|
||||
})
|
||||
|
||||
// 获取详情
|
||||
function getDetail(id) {
|
||||
getType(id).then(res => {
|
||||
Object.assign(form, res.data)
|
||||
updateStatusName()
|
||||
})
|
||||
}
|
||||
|
||||
// 更新状态名称显示
|
||||
function updateStatusName() {
|
||||
if (statusList.value.length > 0 && statusList.value[0].length > 0) {
|
||||
const item = statusList.value[0].find(v => v.dictValue === form.status)
|
||||
statusName.value = item ? item.dictLabel : ''
|
||||
}
|
||||
}
|
||||
|
||||
// 状态选择确认
|
||||
function handleStatusConfirm(e) {
|
||||
form.status = e.value[0].dictValue
|
||||
statusName.value = e.value[0].dictLabel
|
||||
showStatusPicker.value = false
|
||||
}
|
||||
|
||||
// 提交
|
||||
function submit() {
|
||||
console.log('submit 被调用')
|
||||
proxy.$refs['uForm'].validate().then(() => {
|
||||
console.log('验证通过', form.dictId)
|
||||
if (form.dictId) {
|
||||
updateType(form).then(() => {
|
||||
console.log('修改成功,将跳转')
|
||||
proxy.$refs['uToast'].show({
|
||||
message: '修改成功', complete() {
|
||||
console.log('complete 被调用,执行跳转')
|
||||
uni.navigateTo({ url: `/pages_mine/pages/system/dict/list` })
|
||||
}
|
||||
})
|
||||
})
|
||||
} else {
|
||||
addType(form).then(() => {
|
||||
console.log('新增成功,将跳转')
|
||||
proxy.$refs['uToast'].show({
|
||||
message: '新增成功', complete() {
|
||||
console.log('complete 被调用,执行跳转')
|
||||
uni.navigateTo({ url: `/pages_mine/pages/system/dict/list` })
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
}).catch(() => {
|
||||
console.log('验证失败')
|
||||
proxy.$refs['uToast'].show({
|
||||
type: 'error',
|
||||
message: '请填写完整信息'
|
||||
})
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.section {
|
||||
margin: 24rpx;
|
||||
padding: 0;
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
|
||||
overflow: hidden;
|
||||
|
||||
.section-title {
|
||||
padding: 16rpx 24rpx;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: #ffffff;
|
||||
line-height: 1.2;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
width: 6rpx;
|
||||
height: 28rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 3rpx;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.form-view {
|
||||
padding: 24rpx;
|
||||
|
||||
.form-btn {
|
||||
padding-top: 16rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
.form-btn .u-button {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
|
||||
border: none !important;
|
||||
border-radius: 24rpx !important;
|
||||
height: 80rpx !important;
|
||||
box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.4) !important;
|
||||
}
|
||||
|
||||
.form-btn .u-button__text {
|
||||
font-size: 30rpx !important;
|
||||
font-weight: 500 !important;
|
||||
letter-spacing: 2rpx !important;
|
||||
}
|
||||
</style>
|
||||
257
src/pages_mine/pages/system/dict/details.vue
Normal file
257
src/pages_mine/pages/system/dict/details.vue
Normal file
@@ -0,0 +1,257 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<u-navbar
|
||||
leftIconSize="40rpx"
|
||||
leftIconColor="#333333"
|
||||
title="字典详情"
|
||||
>
|
||||
</u-navbar>
|
||||
|
||||
<view class="detail-card">
|
||||
<view class="card-header">
|
||||
<view class="header-icon">
|
||||
<uni-icons type="bars" size="24" color="#ffffff"></uni-icons>
|
||||
</view>
|
||||
<view class="header-info">
|
||||
<text class="card-name">{{ detailInfo.dictName }}<text class="card-code">({{ detailInfo.dictType }})</text></text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="card-body">
|
||||
<view class="info-section">
|
||||
<view class="section-title">
|
||||
<view class="title-icon"></view>
|
||||
<text>基本信息</text>
|
||||
</view>
|
||||
<view class="info-list">
|
||||
<view class="list-item">
|
||||
<text class="item-label">字典编号</text>
|
||||
<text class="item-value">{{ detailInfo.dictId }}</text>
|
||||
</view>
|
||||
<view class="list-item">
|
||||
<text class="item-label">字典名称</text>
|
||||
<text class="item-value">{{ detailInfo.dictName }}</text>
|
||||
</view>
|
||||
<view class="list-item">
|
||||
<text class="item-label">字典类型</text>
|
||||
<text class="item-value">{{ detailInfo.dictType }}</text>
|
||||
</view>
|
||||
<view class="list-item">
|
||||
<text class="item-label">状态</text>
|
||||
<text class="item-value" :class="getStatusClass(detailInfo.status)">{{ statusText }}</text>
|
||||
</view>
|
||||
<view class="list-item" v-if="detailInfo.createTime">
|
||||
<text class="item-label">创建时间</text>
|
||||
<text class="item-value">{{ detailInfo.createTime }}</text>
|
||||
</view>
|
||||
<view class="list-item" v-if="detailInfo.updateTime">
|
||||
<text class="item-label">更新时间</text>
|
||||
<text class="item-value">{{ detailInfo.updateTime }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="info-section" v-if="detailInfo.remark">
|
||||
<view class="section-title">
|
||||
<view class="title-icon"></view>
|
||||
<text>备注</text>
|
||||
</view>
|
||||
<view class="remark-content">
|
||||
<text>{{ detailInfo.remark }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<u-toast ref="uToast"></u-toast>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, toRefs, computed } from 'vue'
|
||||
import { getType } from '@/api/system/dict/type'
|
||||
import { getDicts } from "@/api/system/dict/data"
|
||||
import { onLoad } from "@dcloudio/uni-app"
|
||||
|
||||
const id = ref('')
|
||||
const statusList = ref([])
|
||||
const data = reactive({
|
||||
detailInfo: {}
|
||||
})
|
||||
const { detailInfo } = toRefs(data)
|
||||
|
||||
const statusText = computed(() => {
|
||||
if (statusList.value.length > 0) {
|
||||
const item = statusList.value.find(v => v.dictValue === detailInfo.value.status)
|
||||
return item ? item.dictLabel : ''
|
||||
}
|
||||
return ''
|
||||
})
|
||||
|
||||
function getStatusClass(status) {
|
||||
const statusStr = String(status)
|
||||
if (statusStr === '0') {
|
||||
return 'status-normal'
|
||||
}
|
||||
if (statusStr === '1') {
|
||||
return 'status-disabled'
|
||||
}
|
||||
return 'status-default'
|
||||
}
|
||||
|
||||
onLoad((option) => {
|
||||
id.value = option.id
|
||||
getDicts('sys_normal_disable').then(res => {
|
||||
statusList.value = res.data
|
||||
})
|
||||
getInfo()
|
||||
})
|
||||
|
||||
function getInfo() {
|
||||
getType(id.value).then(res => {
|
||||
detailInfo.value = res.data
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
background: #f5f7fa;
|
||||
padding-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.detail-card {
|
||||
margin: 24rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 16rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16rpx 20rpx;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
|
||||
.header-icon {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 16rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 12rpx;
|
||||
backdrop-filter: blur(10rpx);
|
||||
}
|
||||
|
||||
.header-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
|
||||
.card-name {
|
||||
color: #ffffff;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
.card-code {
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
font-size: 28rpx;
|
||||
font-weight: 400;
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 24rpx;
|
||||
}
|
||||
|
||||
.info-section {
|
||||
margin-bottom: 32rpx;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.title-icon {
|
||||
width: 6rpx;
|
||||
height: 28rpx;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border-radius: 3rpx;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
|
||||
text {
|
||||
color: #2c3e50;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.info-list {
|
||||
.list-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20rpx;
|
||||
background: #f8f9fa;
|
||||
border-radius: 8rpx;
|
||||
margin-bottom: 12rpx;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.item-label {
|
||||
color: #7f8c8d;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.item-value {
|
||||
color: #2c3e50;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
text-align: right;
|
||||
|
||||
&.status-normal {
|
||||
color: #52c41a;
|
||||
}
|
||||
|
||||
&.status-disabled {
|
||||
color: #ff4d4f;
|
||||
}
|
||||
|
||||
&.status-default {
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.remark-content {
|
||||
padding: 20rpx;
|
||||
background: #f8f9fa;
|
||||
border-radius: 8rpx;
|
||||
|
||||
text {
|
||||
color: #2c3e50;
|
||||
font-size: 26rpx;
|
||||
line-height: 1.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
597
src/pages_mine/pages/system/dict/list.vue
Normal file
597
src/pages_mine/pages/system/dict/list.vue
Normal file
@@ -0,0 +1,597 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<u-sticky offsetTop="0rpx" customNavHeight="0rpx">
|
||||
<view class="search-view">
|
||||
<u--input v-model="queryParams.dictName" border="false" placeholder="请输入字典名称" class="search-input"
|
||||
@blur="searchBlur" suffixIcon="search" suffixIconStyle="color: #909399">
|
||||
</u--input>
|
||||
<view class="filter-btn" @click="filterPanel = !filterPanel">
|
||||
<uni-icons type="list" size="18" color="#667eea"></uni-icons>
|
||||
<text>筛选</text>
|
||||
</view>
|
||||
<view class="add-btn" @click="handleAdd()">
|
||||
<uni-icons type="plusempty" size="18" color="#667eea"></uni-icons>
|
||||
<text>新增</text>
|
||||
</view>
|
||||
<u-transition :show="filterPanel" mode="fade">
|
||||
<view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
|
||||
<view class="filter-panel-content">
|
||||
<view class="filter-title">字典类型</view>
|
||||
<u--input v-model="queryParams.dictType" placeholder="请输入字典类型" border="surround"></u--input>
|
||||
|
||||
<view class="filter-title">状态</view>
|
||||
<view class="state-list">
|
||||
<view v-for="item in statusList" :key="item.dictValue" class="state-item"
|
||||
:class="item.selected ? 'active' : ''" @click="selectStatus(item)">{{ item.dictLabel }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="btn-box">
|
||||
<view class="btn-reset" @click="resetQuery()">
|
||||
<uni-icons type="reload" size="16" color="#909399"></uni-icons>
|
||||
<text>重置</text>
|
||||
</view>
|
||||
<view class="btn-confirm" @click="searchSubmit()">
|
||||
<uni-icons type="checkmarkempty" size="16" color="#ffffff"></uni-icons>
|
||||
<text>确定</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-transition>
|
||||
</view>
|
||||
</u-sticky>
|
||||
<u-list @scrolltolower="loadmore" :spaceHeight="116" lowerThreshold="100">
|
||||
<u-list-item v-for="(item, index) in listData" :key="index">
|
||||
<view class="list-item" @click="enterDetails(item)">
|
||||
<view class="item-header">
|
||||
<view class="card-name-section">
|
||||
<view class="card-icon">
|
||||
<uni-icons type="bars" size="20" color="#ffffff"></uni-icons>
|
||||
</view>
|
||||
<view class="card-info">
|
||||
<text class="card-name">{{ item.dictName }}<text class="card-code" v-if="item.dictType">({{ item.dictType }})</text></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="balance-section">
|
||||
<view class="status-tag" :class="item.status === '0' ? 'status-normal' : 'status-disabled'">
|
||||
{{ dictStr(item.status, statusList) }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="card-body">
|
||||
<view class="info-row">
|
||||
<view class="info-item" v-if="item.remark">
|
||||
<text class="info-label">备注</text>
|
||||
<text class="info-value">{{ item.remark }}</text>
|
||||
</view>
|
||||
<view class="info-item" v-if="item.createTime">
|
||||
<text class="info-label">创建时间</text>
|
||||
<text class="info-value">{{ item.createTime }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="operate" @click.stop>
|
||||
<view class="btn-data" @click="handleDictData(item)">
|
||||
<uni-icons type="list" size="16" color="#67c23a"></uni-icons>
|
||||
<text>字典数据</text>
|
||||
</view>
|
||||
<view class="btn-edit" @click="handleUpdate(item)">
|
||||
<uni-icons type="compose" size="16" color="#667eea"></uni-icons>
|
||||
<text>修改</text>
|
||||
</view>
|
||||
<view class="btn-delete" @click="handleDelete(item)">
|
||||
<uni-icons type="trash" size="16" color="#f5576c"></uni-icons>
|
||||
<text>删除</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-list-item>
|
||||
<view></view>
|
||||
<u-loadmore :status="loadStatus" loadingIcon="semicircle" height="88" fontSize="32rpx" @loadmore="loadmore" />
|
||||
</u-list>
|
||||
</view>
|
||||
<suspend></suspend>
|
||||
<refresh></refresh>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, computed } from 'vue'
|
||||
import { listType, delType } from '@/api/system/dict/type'
|
||||
import { getDicts } from "@/api/system/dict/data"
|
||||
import { onLoad, onShow } from "@dcloudio/uni-app"
|
||||
import modal from '@/plugins/modal'
|
||||
|
||||
const pageNum = ref(1)
|
||||
const listData = ref([])
|
||||
const isShow = ref(false)
|
||||
const loadStatus = ref('loadmore')
|
||||
const statusList = ref([])
|
||||
const filterPanel = ref(false)
|
||||
|
||||
const queryParams = reactive({
|
||||
dictName: undefined,
|
||||
dictType: undefined,
|
||||
status: undefined
|
||||
})
|
||||
|
||||
const windowHeight = computed(() => {
|
||||
uni.getSystemInfoSync().windowHeight - 50
|
||||
})
|
||||
|
||||
onLoad(() => {
|
||||
getDicts('sys_normal_disable').then(res => {
|
||||
statusList.value = res.data.map(item => ({
|
||||
...item,
|
||||
selected: false
|
||||
}))
|
||||
})
|
||||
getList()
|
||||
})
|
||||
|
||||
onShow(() => {
|
||||
if (isShow.value) {
|
||||
listData.value = []
|
||||
pageNum.value = 1
|
||||
getList()
|
||||
isShow.value = false
|
||||
}
|
||||
})
|
||||
|
||||
// 获取列表
|
||||
function getList() {
|
||||
loadStatus.value = 'loading'
|
||||
listType({ pageSize: 10, pageNum: pageNum.value, ...queryParams }).then(res => {
|
||||
listData.value = listData.value.concat(res.rows)
|
||||
if (listData.value.length < res.total) {
|
||||
loadStatus.value = 'loadmore'
|
||||
} else {
|
||||
loadStatus.value = 'nomore'
|
||||
}
|
||||
}).catch(() => {
|
||||
loadStatus.value = 'nomore'
|
||||
})
|
||||
}
|
||||
|
||||
// 搜索框失焦
|
||||
function searchBlur() {
|
||||
listData.value = []
|
||||
pageNum.value = 1
|
||||
getList()
|
||||
}
|
||||
|
||||
// 选择状态
|
||||
function selectStatus(item) {
|
||||
statusList.value.forEach(v => v.selected = false)
|
||||
item.selected = !item.selected
|
||||
queryParams.status = item.dictValue
|
||||
}
|
||||
|
||||
// 搜索提交
|
||||
function searchSubmit() {
|
||||
listData.value = []
|
||||
pageNum.value = 1
|
||||
filterPanel.value = false
|
||||
getList()
|
||||
}
|
||||
|
||||
// 重置查询
|
||||
function resetQuery() {
|
||||
queryParams.dictName = undefined
|
||||
queryParams.dictType = undefined
|
||||
queryParams.status = undefined
|
||||
listData.value = []
|
||||
pageNum.value = 1
|
||||
statusList.value.forEach(v => v.selected = false)
|
||||
filterPanel.value = false
|
||||
getList()
|
||||
}
|
||||
|
||||
// 上拉加载
|
||||
function loadmore() {
|
||||
pageNum.value += 1
|
||||
if (loadStatus.value == 'loadmore') {
|
||||
getList()
|
||||
}
|
||||
}
|
||||
|
||||
// 新增
|
||||
function handleAdd() {
|
||||
isShow.value = true
|
||||
uni.navigateTo({
|
||||
url: '/pages_mine/pages/system/dict/addEdit'
|
||||
})
|
||||
}
|
||||
|
||||
// 编辑
|
||||
function handleUpdate(row) {
|
||||
isShow.value = true
|
||||
uni.navigateTo({
|
||||
url: `/pages_mine/pages/system/dict/addEdit?id=${row.dictId}`
|
||||
})
|
||||
}
|
||||
|
||||
// 字典数据
|
||||
function handleDictData(row) {
|
||||
isShow.value = true
|
||||
uni.navigateTo({
|
||||
url: `/pages_mine/pages/system/dictData/list?dictId=${row.dictId}`
|
||||
})
|
||||
}
|
||||
|
||||
// 删除
|
||||
function handleDelete(row) {
|
||||
modal.confirm('是否确认删除字典编号为"' + row.dictId + '"的数据项？').then(() => {
|
||||
return delType(row.dictId)
|
||||
}).then(() => {
|
||||
listData.value = []
|
||||
pageNum.value = 1
|
||||
getList()
|
||||
modal.msgSuccess('删除成功')
|
||||
}).catch(() => {})
|
||||
}
|
||||
|
||||
// 进入详情
|
||||
function enterDetails(row) {
|
||||
isShow.value = true
|
||||
uni.navigateTo({
|
||||
url: `/pages_mine/pages/system/dictData/list?dictId=${row.dictId}`
|
||||
})
|
||||
}
|
||||
|
||||
// 字典翻译
|
||||
function dictStr(value, list) {
|
||||
const item = list.find(v => v.dictValue === value)
|
||||
return item ? item.dictLabel : value
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
min-height: 100vh;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.search-view {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20rpx 24rpx;
|
||||
background-color: #ffffff;
|
||||
position: relative;
|
||||
|
||||
.search-input {
|
||||
background: rgba(102, 126, 234, 0.08);
|
||||
color: #333333;
|
||||
flex: 1;
|
||||
margin-right: 16rpx;
|
||||
border-radius: 24rpx;
|
||||
border: 2rpx solid rgba(102, 126, 234, 0.3);
|
||||
height: 66rpx !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.filter-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6rpx;
|
||||
padding: 12rpx 24rpx;
|
||||
background: rgba(102, 126, 234, 0.08);
|
||||
border-radius: 24rpx;
|
||||
border: 2rpx solid rgba(102, 126, 234, 0.3);
|
||||
transition: all 0.3s ease;
|
||||
flex-shrink: 0;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.95);
|
||||
background: rgba(102, 126, 234, 0.12);
|
||||
}
|
||||
|
||||
text {
|
||||
color: #667eea;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
uni-icons {
|
||||
color: #667eea;
|
||||
}
|
||||
}
|
||||
|
||||
.add-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6rpx;
|
||||
padding: 12rpx 24rpx;
|
||||
background: rgba(102, 126, 234, 0.08);
|
||||
border-radius: 24rpx;
|
||||
border: 2rpx solid rgba(102, 126, 234, 0.3);
|
||||
transition: all 0.3s ease;
|
||||
flex-shrink: 0;
|
||||
margin-left: 10rpx;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.95);
|
||||
background: rgba(102, 126, 234, 0.12);
|
||||
}
|
||||
|
||||
text {
|
||||
color: #667eea;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
uni-icons {
|
||||
color: #667eea;
|
||||
}
|
||||
}
|
||||
|
||||
.filter-panel {
|
||||
position: absolute;
|
||||
top: 100rpx;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: #ffffff;
|
||||
z-index: 999;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
|
||||
|
||||
.filter-panel-content {
|
||||
flex: 1;
|
||||
padding: 32rpx;
|
||||
overflow-y: auto;
|
||||
|
||||
.filter-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
margin: 32rpx 0 24rpx 0;
|
||||
color: #303133;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.state-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16rpx;
|
||||
|
||||
.state-item {
|
||||
padding: 16rpx 32rpx;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 32rpx;
|
||||
font-size: 28rpx;
|
||||
color: #606266;
|
||||
|
||||
&.active {
|
||||
background-color: #667eea;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-box {
|
||||
display: flex;
|
||||
padding: 24rpx 32rpx;
|
||||
border-top: 1rpx solid #f0f0f0;
|
||||
|
||||
.btn-reset,
|
||||
.btn-confirm {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20rpx 0;
|
||||
border-radius: 32rpx;
|
||||
font-size: 28rpx;
|
||||
|
||||
text {
|
||||
margin-left: 12rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-reset {
|
||||
background-color: #f5f5f5;
|
||||
color: #909399;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.btn-confirm {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-item {
|
||||
margin: 10rpx 24rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.item-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16rpx 24rpx;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
|
||||
.card-name-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.card-icon {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 12rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.card-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4rpx;
|
||||
|
||||
.card-name {
|
||||
color: #ffffff;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.card-code {
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
font-size: 22rpx;
|
||||
font-weight: 400;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.balance-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
white-space: nowrap;
|
||||
|
||||
.status-tag {
|
||||
padding: 8rpx 20rpx;
|
||||
border-radius: 20rpx;
|
||||
font-size: 22rpx;
|
||||
font-weight: 500;
|
||||
|
||||
&.status-normal {
|
||||
background-color: rgba(82, 196, 26, 0.2);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
&.status-disabled {
|
||||
background-color: rgba(255, 77, 79, 0.2);
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 24rpx;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 24rpx;
|
||||
margin-bottom: 0;
|
||||
|
||||
.info-item {
|
||||
flex: 0 0 calc(50% - 12rpx);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4rpx;
|
||||
min-width: 0;
|
||||
margin-bottom: -5rpx;
|
||||
|
||||
&.info-item-full {
|
||||
flex: 0 0 100%;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-size: 24rpx;
|
||||
color: #667eea;
|
||||
font-weight: 500;
|
||||
background: rgba(102, 126, 234, 0.08);
|
||||
padding: 6rpx 12rpx;
|
||||
border-radius: 8rpx;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
flex: 1;
|
||||
line-height: 1.5;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
&:not(.info-item-full) .info-value {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.operate {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 16rpx 24rpx 24rpx;
|
||||
gap: 8rpx;
|
||||
flex-wrap: nowrap;
|
||||
|
||||
.btn-data,
|
||||
.btn-edit,
|
||||
.btn-delete {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4rpx;
|
||||
padding: 0 14rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 10rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
transition: all 0.3s ease;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-data {
|
||||
background: rgba(103, 194, 58, 0.1);
|
||||
color: #67c23a;
|
||||
border: 1rpx solid rgba(103, 194, 58, 0.3);
|
||||
}
|
||||
|
||||
.btn-edit {
|
||||
background: rgba(102, 126, 234, 0.1);
|
||||
color: #667eea;
|
||||
border: 1rpx solid rgba(102, 126, 234, 0.3);
|
||||
}
|
||||
|
||||
.btn-delete {
|
||||
background: rgba(245, 87, 108, 0.1);
|
||||
color: #f5576c;
|
||||
border: 1rpx solid rgba(245, 87, 108, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
256
src/pages_mine/pages/system/dictData/addEdit.vue
Normal file
256
src/pages_mine/pages/system/dictData/addEdit.vue
Normal file
@@ -0,0 +1,256 @@
|
||||
<template>
|
||||
<view class="container" style="paddingBottom:1rpx;">
|
||||
<u-navbar
|
||||
leftIconSize="40rpx"
|
||||
leftIconColor="#333333"
|
||||
:title="title"
|
||||
>
|
||||
</u-navbar>
|
||||
<view class="section">
|
||||
<view class="section-title">{{ title }}</view>
|
||||
<view class="form-view">
|
||||
<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="auto"
|
||||
:labelStyle="{ color: '#333333', fontSize: '30rpx' }">
|
||||
<u-form-item label="字典类型">
|
||||
<u--input v-model="form.dictType" disabled disabledColor="#ffffff" placeholder="字典类型"
|
||||
inputAlign="right" border="none"></u--input>
|
||||
</u-form-item>
|
||||
|
||||
<u-form-item label="数据标签" prop="dictLabel" required>
|
||||
<u--input v-model="form.dictLabel" placeholder="请输入数据标签"
|
||||
inputAlign="right" border="none"></u--input>
|
||||
</u-form-item>
|
||||
|
||||
<u-form-item label="数据键值" prop="dictValue" required>
|
||||
<u--input v-model="form.dictValue" placeholder="请输入数据键值"
|
||||
inputAlign="right" border="none"></u--input>
|
||||
</u-form-item>
|
||||
|
||||
<u-form-item label="显示排序" prop="dictSort" required>
|
||||
<u--input v-model="form.dictSort" type="number" placeholder="请输入显示排序"
|
||||
inputAlign="right" border="none"></u--input>
|
||||
</u-form-item>
|
||||
|
||||
<u-form-item label="回显样式" prop="listClassName" @click="showListClassPicker = true">
|
||||
<u--input v-model="listClassName" disabled disabledColor="#ffffff" placeholder="请选择回显样式"
|
||||
inputAlign="right" border="none"></u--input>
|
||||
<template #right>
|
||||
<u-icon name="arrow-down"></u-icon>
|
||||
</template>
|
||||
</u-form-item>
|
||||
|
||||
<u-form-item label="状态" prop="statusName" @click="showStatusPicker = true">
|
||||
<u--input v-model="statusName" disabled disabledColor="#ffffff" placeholder="请选择状态"
|
||||
inputAlign="right" border="none"></u--input>
|
||||
<template #right>
|
||||
<u-icon name="arrow-down"></u-icon>
|
||||
</template>
|
||||
</u-form-item>
|
||||
|
||||
<u-form-item label="备注" prop="remark" labelPosition="top">
|
||||
<u--textarea v-model="form.remark" placeholder="请输入备注" border="none" autoHeight inputAlign="right" count
|
||||
maxlength="500" style="padding:18rpx 0;"></u--textarea>
|
||||
</u-form-item>
|
||||
</u--form>
|
||||
<view class="form-btn">
|
||||
<u-button type="primary" text="提交" @click="submit"></u-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<u-toast ref="uToast"></u-toast>
|
||||
<u-picker itemHeight="88" :show="showStatusPicker" :columns="statusList" keyName="dictLabel" @cancel="showStatusPicker = false"
|
||||
@confirm="handleStatusConfirm"></u-picker>
|
||||
<u-picker itemHeight="88" :show="showListClassPicker" :columns="listClassList" keyName="label" @cancel="showListClassPicker = false"
|
||||
@confirm="handleListClassConfirm"></u-picker>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, getCurrentInstance } from 'vue'
|
||||
import { getData, addData, updateData } from '@/api/system/dict/data'
|
||||
import { getDicts } from "@/api/system/dict/data"
|
||||
import { onLoad } from "@dcloudio/uni-app"
|
||||
|
||||
const { proxy } = getCurrentInstance()
|
||||
const statusList = ref([])
|
||||
const listClassList = ref([[
|
||||
{ value: 'default', label: '默认' },
|
||||
{ value: 'primary', label: '主要' },
|
||||
{ value: 'success', label: '成功' },
|
||||
{ value: 'info', label: '信息' },
|
||||
{ value: 'warning', label: '警告' },
|
||||
{ value: 'danger', label: '危险' }
|
||||
]])
|
||||
const title = ref('添加字典数据')
|
||||
const showStatusPicker = ref(false)
|
||||
const showListClassPicker = ref(false)
|
||||
const statusName = ref('')
|
||||
const listClassName = ref('')
|
||||
|
||||
const form = reactive({
|
||||
dictCode: undefined,
|
||||
dictType: undefined,
|
||||
dictLabel: undefined,
|
||||
dictValue: undefined,
|
||||
dictSort: '0',
|
||||
listClass: 'default',
|
||||
status: '0',
|
||||
remark: undefined
|
||||
})
|
||||
|
||||
const rules = {
|
||||
dictLabel: [
|
||||
{ required: true, message: '数据标签不能为空', trigger: ['blur', 'change'] }
|
||||
],
|
||||
dictValue: [
|
||||
{ required: true, message: '数据键值不能为空', trigger: ['blur', 'change'] }
|
||||
],
|
||||
dictSort: [
|
||||
{ required: true, message: '显示排序不能为空', trigger: ['blur', 'change'] }
|
||||
]
|
||||
}
|
||||
|
||||
onLoad((option) => {
|
||||
getDicts('sys_normal_disable').then(res => {
|
||||
statusList.value = [res.data]
|
||||
})
|
||||
|
||||
if (option.dictCode) {
|
||||
title.value = '修改字典数据'
|
||||
getDetail(option.dictCode)
|
||||
} else if (option.dictType) {
|
||||
form.dictType = option.dictType
|
||||
// 新增时默认显示状态和回显样式
|
||||
setTimeout(() => {
|
||||
updateStatusName()
|
||||
updateListClassName()
|
||||
}, 100)
|
||||
}
|
||||
})
|
||||
|
||||
// 获取详情
|
||||
function getDetail(dictCode) {
|
||||
getData(dictCode).then(res => {
|
||||
Object.assign(form, res.data)
|
||||
updateStatusName()
|
||||
updateListClassName()
|
||||
})
|
||||
}
|
||||
|
||||
// 更新状态名称显示
|
||||
function updateStatusName() {
|
||||
if (statusList.value.length > 0 && statusList.value[0].length > 0) {
|
||||
const item = statusList.value[0].find(v => v.dictValue === form.status)
|
||||
statusName.value = item ? item.dictLabel : ''
|
||||
}
|
||||
}
|
||||
|
||||
// 更新回显样式名称显示
|
||||
function updateListClassName() {
|
||||
if (listClassList.value.length > 0 && listClassList.value[0].length > 0) {
|
||||
const item = listClassList.value[0].find(v => v.value === form.listClass)
|
||||
listClassName.value = item ? item.label : ''
|
||||
}
|
||||
}
|
||||
|
||||
// 状态选择确认
|
||||
function handleStatusConfirm(e) {
|
||||
form.status = e.value[0].dictValue
|
||||
statusName.value = e.value[0].dictLabel
|
||||
showStatusPicker.value = false
|
||||
}
|
||||
|
||||
// 回显样式选择确认
|
||||
function handleListClassConfirm(e) {
|
||||
form.listClass = e.value[0].value
|
||||
listClassName.value = e.value[0].label
|
||||
showListClassPicker.value = false
|
||||
}
|
||||
|
||||
// 提交
|
||||
function submit() {
|
||||
proxy.$refs['uForm'].validate().then(() => {
|
||||
if (form.dictCode) {
|
||||
updateData(form).then(() => {
|
||||
proxy.$refs['uToast'].show({
|
||||
message: '修改成功', complete() {
|
||||
uni.navigateTo({ url: `/pages_mine/pages/system/dictData/list?dictType=${form.dictType}` })
|
||||
}
|
||||
})
|
||||
})
|
||||
} else {
|
||||
addData(form).then(() => {
|
||||
proxy.$refs['uToast'].show({
|
||||
message: '新增成功', complete() {
|
||||
uni.navigateTo({ url: `/pages_mine/pages/system/dictData/list?dictType=${form.dictType}` })
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
}).catch(() => {
|
||||
proxy.$refs['uToast'].show({
|
||||
type: 'error',
|
||||
message: '请填写完整信息'
|
||||
})
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.section {
|
||||
margin: 24rpx;
|
||||
padding: 0;
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
|
||||
overflow: hidden;
|
||||
|
||||
.section-title {
|
||||
padding: 16rpx 24rpx;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: #ffffff;
|
||||
line-height: 1.2;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
width: 6rpx;
|
||||
height: 28rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 3rpx;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.form-view {
|
||||
padding: 24rpx;
|
||||
|
||||
.form-btn {
|
||||
padding-top: 16rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
.form-btn .u-button {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
|
||||
border: none !important;
|
||||
border-radius: 24rpx !important;
|
||||
height: 80rpx !important;
|
||||
box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.4) !important;
|
||||
}
|
||||
|
||||
.form-btn .u-button__text {
|
||||
font-size: 30rpx !important;
|
||||
font-weight: 500 !important;
|
||||
letter-spacing: 2rpx !important;
|
||||
}
|
||||
</style>
|
||||
278
src/pages_mine/pages/system/dictData/details.vue
Normal file
278
src/pages_mine/pages/system/dictData/details.vue
Normal file
@@ -0,0 +1,278 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<u-navbar
|
||||
leftIconSize="40rpx"
|
||||
leftIconColor="#333333"
|
||||
title="数据详情"
|
||||
>
|
||||
</u-navbar>
|
||||
|
||||
<view class="detail-card">
|
||||
<view class="card-header">
|
||||
<view class="header-icon">
|
||||
<uni-icons type="star" size="24" color="#ffffff"></uni-icons>
|
||||
</view>
|
||||
<view class="header-info">
|
||||
<text class="card-name">{{ detailInfo.dictLabel }}<text class="card-code">({{ detailInfo.dictValue }})</text></text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="card-body">
|
||||
<view class="info-section">
|
||||
<view class="section-title">
|
||||
<view class="title-icon"></view>
|
||||
<text>基本信息</text>
|
||||
</view>
|
||||
<view class="info-list">
|
||||
<view class="list-item">
|
||||
<text class="item-label">字典编码</text>
|
||||
<text class="item-value">{{ detailInfo.dictCode }}</text>
|
||||
</view>
|
||||
<view class="list-item">
|
||||
<text class="item-label">字典类型</text>
|
||||
<text class="item-value">{{ detailInfo.dictType }}</text>
|
||||
</view>
|
||||
<view class="list-item">
|
||||
<text class="item-label">数据标签</text>
|
||||
<text class="item-value">{{ detailInfo.dictLabel }}</text>
|
||||
</view>
|
||||
<view class="list-item">
|
||||
<text class="item-label">数据键值</text>
|
||||
<text class="item-value">{{ detailInfo.dictValue }}</text>
|
||||
</view>
|
||||
<view class="list-item">
|
||||
<text class="item-label">显示排序</text>
|
||||
<text class="item-value">{{ detailInfo.dictSort }}</text>
|
||||
</view>
|
||||
<view class="list-item">
|
||||
<text class="item-label">回显样式</text>
|
||||
<text class="item-value">{{ listClassText }}</text>
|
||||
</view>
|
||||
<view class="list-item">
|
||||
<text class="item-label">状态</text>
|
||||
<text class="item-value" :class="getStatusClass(detailInfo.status)">{{ statusText }}</text>
|
||||
</view>
|
||||
<view class="list-item" v-if="detailInfo.createTime">
|
||||
<text class="item-label">创建时间</text>
|
||||
<text class="item-value">{{ detailInfo.createTime }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="info-section" v-if="detailInfo.remark">
|
||||
<view class="section-title">
|
||||
<view class="title-icon"></view>
|
||||
<text>备注</text>
|
||||
</view>
|
||||
<view class="remark-content">
|
||||
<text>{{ detailInfo.remark }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<u-toast ref="uToast"></u-toast>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, toRefs, computed } from 'vue'
|
||||
import { getData } from '@/api/system/dict/data'
|
||||
import { getDicts } from "@/api/system/dict/data"
|
||||
import { onLoad } from "@dcloudio/uni-app"
|
||||
|
||||
const id = ref('')
|
||||
const statusList = ref([])
|
||||
const listClassOptions = [
|
||||
{ value: 'default', label: '默认' },
|
||||
{ value: 'primary', label: '主要' },
|
||||
{ value: 'success', label: '成功' },
|
||||
{ value: 'info', label: '信息' },
|
||||
{ value: 'warning', label: '警告' },
|
||||
{ value: 'danger', label: '危险' }
|
||||
]
|
||||
const data = reactive({
|
||||
detailInfo: {}
|
||||
})
|
||||
const { detailInfo } = toRefs(data)
|
||||
|
||||
const statusText = computed(() => {
|
||||
if (statusList.value.length > 0) {
|
||||
const item = statusList.value.find(v => v.dictValue === detailInfo.value.status)
|
||||
return item ? item.dictLabel : ''
|
||||
}
|
||||
return ''
|
||||
})
|
||||
|
||||
const listClassText = computed(() => {
|
||||
const item = listClassOptions.find(v => v.value === detailInfo.value.listClass)
|
||||
return item ? item.label : ''
|
||||
})
|
||||
|
||||
function getStatusClass(status) {
|
||||
const statusStr = String(status)
|
||||
if (statusStr === '0') {
|
||||
return 'status-normal'
|
||||
}
|
||||
if (statusStr === '1') {
|
||||
return 'status-error'
|
||||
}
|
||||
return 'status-default'
|
||||
}
|
||||
|
||||
onLoad((option) => {
|
||||
id.value = option.dictCode
|
||||
getDicts('sys_normal_disable').then(res => {
|
||||
statusList.value = res.data
|
||||
})
|
||||
getInfo()
|
||||
})
|
||||
|
||||
function getInfo() {
|
||||
getData(id.value).then(res => {
|
||||
detailInfo.value = res.data
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
background: #f5f7fa;
|
||||
padding-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.detail-card {
|
||||
margin: 24rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 16rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16rpx 20rpx;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
|
||||
.header-icon {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 16rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 12rpx;
|
||||
backdrop-filter: blur(10rpx);
|
||||
}
|
||||
|
||||
.header-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
|
||||
.card-name {
|
||||
color: #ffffff;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
.card-code {
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
font-size: 28rpx;
|
||||
font-weight: 400;
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 24rpx;
|
||||
}
|
||||
|
||||
.info-section {
|
||||
margin-bottom: 32rpx;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.title-icon {
|
||||
width: 6rpx;
|
||||
height: 28rpx;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border-radius: 3rpx;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
|
||||
text {
|
||||
color: #2c3e50;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.info-list {
|
||||
.list-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20rpx;
|
||||
background: #f8f9fa;
|
||||
border-radius: 8rpx;
|
||||
margin-bottom: 12rpx;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.item-label {
|
||||
color: #7f8c8d;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.item-value {
|
||||
color: #2c3e50;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
text-align: right;
|
||||
|
||||
&.status-normal {
|
||||
color: #52c41a;
|
||||
}
|
||||
|
||||
&.status-error {
|
||||
color: #ff4d4f;
|
||||
}
|
||||
|
||||
&.status-default {
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.remark-content {
|
||||
padding: 20rpx;
|
||||
background: #f8f9fa;
|
||||
border-radius: 8rpx;
|
||||
|
||||
text {
|
||||
color: #2c3e50;
|
||||
font-size: 26rpx;
|
||||
line-height: 1.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
660
src/pages_mine/pages/system/dictData/list.vue
Normal file
660
src/pages_mine/pages/system/dictData/list.vue
Normal file
@@ -0,0 +1,660 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<u-sticky offsetTop="0rpx" customNavHeight="0rpx">
|
||||
<view class="search-view">
|
||||
<view class="dict-name-row">
|
||||
<view class="divider-line"></view>
|
||||
<view class="dict-name-text">
|
||||
<text>字典类型：{{ dictName }}</text>
|
||||
</view>
|
||||
<view class="divider-line"></view>
|
||||
</view>
|
||||
<view class="search-row">
|
||||
<u--input v-model="queryParams.dictLabel" border="false" placeholder="请输入字典标签" class="search-input"
|
||||
@blur="searchBlur" suffixIcon="search" suffixIconStyle="color: #909399">
|
||||
</u--input>
|
||||
<view class="filter-btn" @click="filterPanel = !filterPanel">
|
||||
<uni-icons type="list" size="18" color="#667eea"></uni-icons>
|
||||
<text>筛选</text>
|
||||
</view>
|
||||
<view class="add-btn" @click="handleAdd()">
|
||||
<uni-icons type="plusempty" size="18" color="#667eea"></uni-icons>
|
||||
<text>新增</text>
|
||||
</view>
|
||||
</view>
|
||||
<u-transition :show="filterPanel" mode="fade">
|
||||
<view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
|
||||
<view class="filter-panel-content">
|
||||
<view class="filter-title">状态</view>
|
||||
<view class="state-list">
|
||||
<view v-for="item in statusList" :key="item.dictValue" class="state-item"
|
||||
:class="item.selected ? 'active' : ''" @click="selectStatus(item)">{{ item.dictLabel }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="btn-box">
|
||||
<view class="btn-reset" @click="resetQuery()">
|
||||
<uni-icons type="reload" size="16" color="#909399"></uni-icons>
|
||||
<text>重置</text>
|
||||
</view>
|
||||
<view class="btn-confirm" @click="searchSubmit()">
|
||||
<uni-icons type="checkmarkempty" size="16" color="#ffffff"></uni-icons>
|
||||
<text>确定</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-transition>
|
||||
</view>
|
||||
</u-sticky>
|
||||
<u-list @scrolltolower="loadmore" :spaceHeight="116" lowerThreshold="100">
|
||||
<u-list-item v-for="(item, index) in listData" :key="index">
|
||||
<view class="list-item" @click="enterDetails(item)">
|
||||
<view class="item-header">
|
||||
<view class="card-name-section">
|
||||
<view class="card-icon">
|
||||
<uni-icons type="star" size="20" color="#ffffff"></uni-icons>
|
||||
</view>
|
||||
<view class="card-info">
|
||||
<view class="card-name">
|
||||
<text class="label-text">{{ item.dictLabel }}</text>
|
||||
<text class="value-text" v-if="item.dictValue">{{ item.dictValue }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="balance-section">
|
||||
<view class="status-tag" :class="item.status === '0' ? 'status-normal' : 'status-disabled'">
|
||||
{{ dictStr(item.status, statusList) }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="card-body">
|
||||
<view class="info-row">
|
||||
<view class="info-item">
|
||||
<text class="info-label">显示排序</text>
|
||||
<text class="info-value">{{ item.dictSort }}</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="info-label">字典类型</text>
|
||||
<text class="info-value">{{ item.dictType }}</text>
|
||||
</view>
|
||||
<view class="info-item" v-if="item.createTime">
|
||||
<text class="info-label">创建时间</text>
|
||||
<text class="info-value">{{ item.createTime }}</text>
|
||||
</view>
|
||||
<view class="info-item" v-if="item.listClass">
|
||||
<text class="info-label">回显样式</text>
|
||||
<text class="info-value">{{ item.listClass }}</text>
|
||||
</view>
|
||||
<view class="info-item" v-if="item.remark">
|
||||
<text class="info-label">备注</text>
|
||||
<text class="info-value">{{ item.remark }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="operate" @click.stop>
|
||||
<view class="btn-edit" @click="handleUpdate(item)">
|
||||
<uni-icons type="compose" size="16" color="#667eea"></uni-icons>
|
||||
<text>修改</text>
|
||||
</view>
|
||||
<view class="btn-delete" @click="handleDelete(item)">
|
||||
<uni-icons type="trash" size="16" color="#f5576c"></uni-icons>
|
||||
<text>删除</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-list-item>
|
||||
<view></view>
|
||||
<u-loadmore :status="loadStatus" loadingIcon="semicircle" height="88" fontSize="32rpx" @loadmore="loadmore" />
|
||||
</u-list>
|
||||
</view>
|
||||
<suspend></suspend>
|
||||
<refresh></refresh>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, computed } from 'vue'
|
||||
import { listData as getDataList, delData } from '@/api/system/dict/data'
|
||||
import { getType } from '@/api/system/dict/type'
|
||||
import { getDicts } from "@/api/system/dict/data"
|
||||
import { onLoad, onShow } from "@dcloudio/uni-app"
|
||||
import modal from '@/plugins/modal'
|
||||
|
||||
const pageNum = ref(1)
|
||||
const listData = ref([])
|
||||
const isShow = ref(false)
|
||||
const loadStatus = ref('loadmore')
|
||||
const statusList = ref([])
|
||||
const filterPanel = ref(false)
|
||||
const dictType = ref('')
|
||||
const dictName = ref('')
|
||||
|
||||
const queryParams = reactive({
|
||||
dictType: undefined,
|
||||
dictLabel: undefined,
|
||||
status: undefined
|
||||
})
|
||||
|
||||
const windowHeight = computed(() => {
|
||||
uni.getSystemInfoSync().windowHeight - 50
|
||||
})
|
||||
|
||||
onLoad((option) => {
|
||||
getDicts('sys_normal_disable').then(res => {
|
||||
statusList.value = res.data.map(item => ({
|
||||
...item,
|
||||
selected: false
|
||||
}))
|
||||
})
|
||||
|
||||
if (option.dictId) {
|
||||
// 获取字典类型信息
|
||||
getType(option.dictId).then(res => {
|
||||
queryParams.dictType = res.data.dictType
|
||||
dictType.value = res.data.dictType
|
||||
dictName.value = res.data.dictName
|
||||
// 在获取字典类型后再查询列表
|
||||
getList()
|
||||
})
|
||||
} else {
|
||||
getList()
|
||||
}
|
||||
})
|
||||
|
||||
onShow(() => {
|
||||
if (isShow.value) {
|
||||
listData.value = []
|
||||
pageNum.value = 1
|
||||
getList()
|
||||
isShow.value = false
|
||||
}
|
||||
})
|
||||
|
||||
// 获取列表
|
||||
function getList() {
|
||||
loadStatus.value = 'loading'
|
||||
getDataList({ pageSize: 10, pageNum: pageNum.value, ...queryParams }).then(res => {
|
||||
listData.value = listData.value.concat(res.rows)
|
||||
if (listData.value.length < res.total) {
|
||||
loadStatus.value = 'loadmore'
|
||||
} else {
|
||||
loadStatus.value = 'nomore'
|
||||
}
|
||||
}).catch(() => {
|
||||
loadStatus.value = 'nomore'
|
||||
})
|
||||
}
|
||||
|
||||
// 搜索框失焦
|
||||
function searchBlur() {
|
||||
listData.value = []
|
||||
pageNum.value = 1
|
||||
getList()
|
||||
}
|
||||
|
||||
// 选择状态
|
||||
function selectStatus(item) {
|
||||
statusList.value.forEach(v => v.selected = false)
|
||||
item.selected = !item.selected
|
||||
queryParams.status = item.dictValue
|
||||
}
|
||||
|
||||
// 搜索提交
|
||||
function searchSubmit() {
|
||||
listData.value = []
|
||||
pageNum.value = 1
|
||||
filterPanel.value = false
|
||||
getList()
|
||||
}
|
||||
|
||||
// 重置查询
|
||||
function resetQuery() {
|
||||
queryParams.dictLabel = undefined
|
||||
queryParams.status = undefined
|
||||
listData.value = []
|
||||
pageNum.value = 1
|
||||
statusList.value.forEach(v => v.selected = false)
|
||||
filterPanel.value = false
|
||||
getList()
|
||||
}
|
||||
|
||||
// 上拉加载
|
||||
function loadmore() {
|
||||
pageNum.value += 1
|
||||
if (loadStatus.value == 'loadmore') {
|
||||
getList()
|
||||
}
|
||||
}
|
||||
|
||||
// 新增
|
||||
function handleAdd() {
|
||||
isShow.value = true
|
||||
uni.navigateTo({
|
||||
url: `/pages_mine/pages/system/dictData/addEdit?dictType=${dictType.value}`
|
||||
})
|
||||
}
|
||||
|
||||
// 编辑
|
||||
function handleUpdate(row) {
|
||||
isShow.value = true
|
||||
uni.navigateTo({
|
||||
url: `/pages_mine/pages/system/dictData/addEdit?dictCode=${row.dictCode}`
|
||||
})
|
||||
}
|
||||
|
||||
// 删除
|
||||
function handleDelete(row) {
|
||||
modal.confirm('是否确认删除字典编码为"' + row.dictCode + '"的数据项？').then(() => {
|
||||
return delData(row.dictCode)
|
||||
}).then(() => {
|
||||
listData.value = []
|
||||
pageNum.value = 1
|
||||
getList()
|
||||
modal.msgSuccess('删除成功')
|
||||
}).catch(() => {})
|
||||
}
|
||||
|
||||
// 进入详情
|
||||
function enterDetails(item) {
|
||||
isShow.value = true
|
||||
uni.navigateTo({
|
||||
url: `/pages_mine/pages/system/dictData/details?dictCode=${item.dictCode}`
|
||||
})
|
||||
}
|
||||
|
||||
// 字典翻译
|
||||
function dictStr(value, list) {
|
||||
const item = list.find(v => v.dictValue === value)
|
||||
return item ? item.dictLabel : value
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.container {
|
||||
min-height: 100vh;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.search-view {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 20rpx 24rpx;
|
||||
background-color: #ffffff;
|
||||
position: relative;
|
||||
gap: 16rpx;
|
||||
|
||||
.dict-name-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 16rpx;
|
||||
padding: 0 24rpx;
|
||||
|
||||
.divider-line {
|
||||
flex: 1;
|
||||
height: 2rpx;
|
||||
background: linear-gradient(to right, transparent, #667eea, transparent);
|
||||
}
|
||||
|
||||
.dict-name-text {
|
||||
padding: 0 24rpx;
|
||||
white-space: nowrap;
|
||||
|
||||
text {
|
||||
color: #667eea;
|
||||
font-size: 26rpx;
|
||||
font-weight: 600;
|
||||
letter-spacing: 1rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
background: rgba(102, 126, 234, 0.08);
|
||||
color: #333333;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
margin-right: 16rpx;
|
||||
border-radius: 24rpx;
|
||||
border: 2rpx solid rgba(102, 126, 234, 0.3);
|
||||
height: 66rpx !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.filter-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6rpx;
|
||||
padding: 12rpx 24rpx;
|
||||
background: rgba(102, 126, 234, 0.08);
|
||||
border-radius: 24rpx;
|
||||
border: 2rpx solid rgba(102, 126, 234, 0.3);
|
||||
transition: all 0.3s ease;
|
||||
flex-shrink: 0;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.95);
|
||||
background: rgba(102, 126, 234, 0.12);
|
||||
}
|
||||
|
||||
text {
|
||||
color: #667eea;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
uni-icons {
|
||||
color: #667eea;
|
||||
}
|
||||
}
|
||||
|
||||
.add-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6rpx;
|
||||
padding: 12rpx 24rpx;
|
||||
background: rgba(102, 126, 234, 0.08);
|
||||
border-radius: 24rpx;
|
||||
border: 2rpx solid rgba(102, 126, 234, 0.3);
|
||||
transition: all 0.3s ease;
|
||||
flex-shrink: 0;
|
||||
margin-left: 10rpx;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.95);
|
||||
background: rgba(102, 126, 234, 0.12);
|
||||
}
|
||||
|
||||
text {
|
||||
color: #667eea;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
uni-icons {
|
||||
color: #667eea;
|
||||
}
|
||||
}
|
||||
|
||||
.filter-panel {
|
||||
position: absolute;
|
||||
top: 100rpx;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: #ffffff;
|
||||
z-index: 999;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
|
||||
|
||||
.filter-panel-content {
|
||||
flex: 1;
|
||||
padding: 32rpx;
|
||||
overflow-y: auto;
|
||||
|
||||
.filter-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
margin: 32rpx 0 24rpx 0;
|
||||
color: #303133;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.state-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16rpx;
|
||||
|
||||
.state-item {
|
||||
padding: 16rpx 32rpx;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 32rpx;
|
||||
font-size: 28rpx;
|
||||
color: #606266;
|
||||
|
||||
&.active {
|
||||
background-color: #667eea;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-box {
|
||||
display: flex;
|
||||
padding: 24rpx 32rpx;
|
||||
border-top: 1rpx solid #f0f0f0;
|
||||
|
||||
.btn-reset,
|
||||
.btn-confirm {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20rpx 0;
|
||||
border-radius: 32rpx;
|
||||
font-size: 28rpx;
|
||||
|
||||
text {
|
||||
margin-left: 12rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-reset {
|
||||
background-color: #f5f5f5;
|
||||
color: #909399;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.btn-confirm {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-item {
|
||||
margin: 10rpx 24rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.item-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16rpx 24rpx;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
|
||||
.card-name-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.card-icon {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 12rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.card-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4rpx;
|
||||
|
||||
.card-name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 160rpx;
|
||||
color: #ffffff;
|
||||
font-size: 26rpx;
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
|
||||
.label-text {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.value-text {
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
}
|
||||
|
||||
.card-code {
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
font-size: 22rpx;
|
||||
font-weight: 400;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.balance-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
white-space: nowrap;
|
||||
|
||||
.status-tag {
|
||||
padding: 8rpx 20rpx;
|
||||
border-radius: 20rpx;
|
||||
font-size: 22rpx;
|
||||
font-weight: 500;
|
||||
|
||||
&.status-normal {
|
||||
background-color: rgba(82, 196, 26, 0.2);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
&.status-disabled {
|
||||
background-color: rgba(255, 77, 79, 0.2);
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 24rpx;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 24rpx;
|
||||
margin-bottom: 0;
|
||||
|
||||
.info-item {
|
||||
flex: 0 0 calc(50% - 12rpx);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4rpx;
|
||||
min-width: 0;
|
||||
margin-bottom: -5rpx;
|
||||
|
||||
&.info-item-full {
|
||||
flex: 0 0 100%;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-size: 24rpx;
|
||||
color: #667eea;
|
||||
font-weight: 500;
|
||||
background: rgba(102, 126, 234, 0.08);
|
||||
padding: 6rpx 12rpx;
|
||||
border-radius: 8rpx;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
flex: 1;
|
||||
line-height: 1.5;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
&:not(.info-item-full) .info-value {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.operate {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 16rpx 24rpx 24rpx;
|
||||
gap: 8rpx;
|
||||
flex-wrap: nowrap;
|
||||
|
||||
.btn-edit,
|
||||
.btn-delete {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4rpx;
|
||||
padding: 0 14rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 10rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
transition: all 0.3s ease;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-edit {
|
||||
background: rgba(102, 126, 234, 0.1);
|
||||
color: #667eea;
|
||||
border: 1rpx solid rgba(102, 126, 234, 0.3);
|
||||
}
|
||||
|
||||
.btn-delete {
|
||||
background: rgba(245, 87, 108, 0.1);
|
||||
color: #f5576c;
|
||||
border: 1rpx solid rgba(245, 87, 108, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
137
src/pages_mine/pages/system/index.vue
Normal file
137
src/pages_mine/pages/system/index.vue
Normal file
@@ -0,0 +1,137 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<!-- 系统管理 -->
|
||||
<view class="section-header">
|
||||
<text class="section-title">系统管理</text>
|
||||
</view>
|
||||
<view class="grid-body">
|
||||
<view class="grid-wrapper">
|
||||
<view
|
||||
v-for="(item, index) in systemGridList"
|
||||
:key="index"
|
||||
@click="navigateTo(item.path)"
|
||||
class="grid-item">
|
||||
<view class="item-icon" :style="{ background: item.color }">
|
||||
<uni-icons :type="item.icon" size="22" color="#ffffff"></uni-icons>
|
||||
</view>
|
||||
<text class="item-text">{{ item.text }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
const systemGridList = ref([
|
||||
{ path: '/pages/system/user/index', text: '用户管理', icon: 'person', color: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' },
|
||||
{ path: '/pages/system/role/index', text: '角色管理', icon: 'staff', color: 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)' },
|
||||
{ path: '/pages/system/menu/index', text: '菜单管理', icon: 'list', color: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)' },
|
||||
{ path: '/pages/system/dept/index', text: '部门管理', icon: 'chat', color: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)' },
|
||||
{ path: '/pages/system/post/index', text: '岗位管理', icon: 'contact', color: 'linear-gradient(135deg, #fd79a8 0%, #e84393 100%)' },
|
||||
{ path: '/pages_mine/pages/system/dict/list', text: '字典管理', icon: 'bars', color: 'linear-gradient(135deg, #f6d365 0%, #fda085 100%)' },
|
||||
{ path: '/pages/system/config/index', text: '参数设置', icon: 'gear', color: 'linear-gradient(135deg, #5f72bd 0%, #9b23ea 100%)' },
|
||||
{ path: '/pages/system/notice/index', text: '通知公告', icon: 'notification', color: 'linear-gradient(135deg, #0be881 0%, #0fbcf9 100%)' },
|
||||
{ path: '/pages/system/job/index', text: '定时任务', icon: 'calendar', color: 'linear-gradient(135deg, #6366f1 0%, #a855f7 100%)' },
|
||||
{ path: '/pages/system/log/operlog/index', text: '操作日志', icon: 'compose', color: 'linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%)' },
|
||||
{ path: '/pages/system/log/logininfor/index', text: '登录日志', icon: 'eye', color: 'linear-gradient(135deg, #00d2ff 0%, #3a7bd5 100%)' }
|
||||
])
|
||||
|
||||
function navigateTo(path) {
|
||||
// 字典管理已开发完成,可以跳转
|
||||
if (path === '/pages_mine/pages/system/dict/list') {
|
||||
uni.navigateTo({
|
||||
url: path
|
||||
});
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '功能开发中',
|
||||
icon: 'none',
|
||||
duration: 2000
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
min-height: 100vh;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
/* #ifndef APP-NVUE */
|
||||
/* #endif */
|
||||
|
||||
.content {
|
||||
padding: 12rpx 0;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
padding: 12rpx 24rpx 8rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
position: relative;
|
||||
padding-left: 16rpx;
|
||||
}
|
||||
|
||||
.section-title::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 6rpx;
|
||||
height: 28rpx;
|
||||
background: linear-gradient(135deg, #667eea, #764ba2);
|
||||
border-radius: 3rpx;
|
||||
}
|
||||
|
||||
.grid-body {
|
||||
padding: 0 16rpx;
|
||||
}
|
||||
|
||||
.grid-wrapper {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
width: 25%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 16rpx 8rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.item-icon {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 12rpx;
|
||||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.grid-item:active .item-icon {
|
||||
transform: scale(0.95);
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.item-text {
|
||||
text-align: center;
|
||||
font-size: 22rpx;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
line-height: 1.3;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user