|
@@ -1,332 +1,154 @@
|
|
|
<template>
|
|
|
<div class="system-parameter-container layout-pd">
|
|
|
<el-card shadow="never">
|
|
|
- <el-divider content-position="center"><h4 class="table-title">系统参数设置</h4></el-divider>
|
|
|
- <el-form :model="state.ruleForm" label-width="200px" ref="ruleFormRef" v-loading="state.loading">
|
|
|
- <el-row :gutter="35">
|
|
|
- <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" v-for="items in state.data" :key="items.id">
|
|
|
- <!-- <el-divider content-position="left">{{ items.groupName }}</el-divider> -->
|
|
|
- <div v-for="item in items.systemSettings" :key="item.id">
|
|
|
- <el-form-item :label="item.settingName">
|
|
|
- <!-- 单选框 -->
|
|
|
- <template v-if="item.valueType === 0">
|
|
|
- <el-radio-group v-model="item.settingValue" class="ml-4" @change="changeVal($event, item.id)">
|
|
|
- <el-radio :label="item1.value" v-for="item1 in item.presetValue" :key="item1.value">{{ item1.key }}</el-radio>
|
|
|
- </el-radio-group>
|
|
|
- </template>
|
|
|
- <!-- 多选框 -->
|
|
|
- <template v-else-if="item.valueType === 1">
|
|
|
- <el-checkbox-group v-model="item.settingValue" @change="changeVal($event, item.id)">
|
|
|
- <el-checkbox v-for="item1 in item.presetValue" :key="item1.value" :label="item1.value">{{ item1.key }}</el-checkbox>
|
|
|
- </el-checkbox-group>
|
|
|
- </template>
|
|
|
- <!-- 文本 -->
|
|
|
- <template v-else-if="item.valueType === 2">
|
|
|
- <el-input
|
|
|
- v-model="item.settingValue"
|
|
|
- :placeholder="'请输入' + item.settingName"
|
|
|
- class="max-width"
|
|
|
- @input="changeVal($event, item.id)"
|
|
|
- />
|
|
|
- </template>
|
|
|
- <!-- 数字 -->
|
|
|
- <template v-else-if="item.valueType === 3">
|
|
|
- <el-input-number v-model="item.settingValue" :placeholder="'请输入' + item.settingName" @input="changeVal($event, item.id)" />
|
|
|
- </template>
|
|
|
- <!-- 下拉框 -->
|
|
|
- <template v-else-if="item.valueType === 4">
|
|
|
- <el-select v-model="item.settingValue" :placeholder="'请选择' + item.settingName" @change="changeVal($event, item.id)">
|
|
|
- <el-option v-for="item1 in item.presetValue" :key="item1.value" :label="item1.key" :value="item1.value" />
|
|
|
- </el-select>
|
|
|
- </template>
|
|
|
- <!-- 开关 -->
|
|
|
- <template v-else-if="item.valueType === 5">
|
|
|
- <el-switch v-model="item.settingValue" @change="changeVal($event, item.id)" />
|
|
|
- </template>
|
|
|
- <!-- 时间 -->
|
|
|
- <template v-else-if="item.valueType === 6">
|
|
|
- <el-time-select
|
|
|
- v-model="item.settingValue"
|
|
|
- start="00:00"
|
|
|
- step="00:30"
|
|
|
- end="23:30"
|
|
|
- :placeholder="'请选择' + item.settingName"
|
|
|
- @change="changeVal($event, item.id)"
|
|
|
- />
|
|
|
- </template>
|
|
|
- <!-- 日期 -->
|
|
|
- <template v-else-if="item.valueType === 7">
|
|
|
- <el-date-picker
|
|
|
- v-model="item.settingValue"
|
|
|
- value-format="YYYY-MM-DD[T]HH:mm:ss"
|
|
|
- type="date"
|
|
|
- :placeholder="'请选择' + item.settingName"
|
|
|
- @change="changeVal($event, item.id)"
|
|
|
- />
|
|
|
- </template>
|
|
|
- <!-- 日期区间 -->
|
|
|
- <template v-else-if="item.valueType === 8">
|
|
|
- <div>
|
|
|
- <el-date-picker
|
|
|
- v-model="item.settingValue"
|
|
|
- value-format="YYYY-MM-DD[T]HH:mm:ss"
|
|
|
- type="daterange"
|
|
|
- :placeholder="'请选择' + item.settingName"
|
|
|
- @change="changeVal($event, item.id)"
|
|
|
- range-separator="至"
|
|
|
- start-placeholder="开始日期"
|
|
|
- end-placeholder="结束日期"
|
|
|
- />
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <!-- 时间区间 -->
|
|
|
- <template v-else-if="item.valueType === 9">
|
|
|
- <el-time-select
|
|
|
- v-model="item.settingValue[0]"
|
|
|
- :max-time="item.settingValue[1]"
|
|
|
- placeholder="开始时间"
|
|
|
- start="00:00"
|
|
|
- step="00:30"
|
|
|
- end="23:30"
|
|
|
- @change="changeVal($event, item.id, 'startTime')"
|
|
|
- />
|
|
|
- <el-time-select
|
|
|
- v-model="item.settingValue[1]"
|
|
|
- :min-time="item.settingValue[0]"
|
|
|
- placeholder="结束时间"
|
|
|
- start="00:00"
|
|
|
- step="00:30"
|
|
|
- end="23:30"
|
|
|
- @change="changeVal($event, item.id, 'endTime')"
|
|
|
- />
|
|
|
- </template>
|
|
|
- <!-- 单个图片上传 -->
|
|
|
- <template v-else-if="item.valueType === 10">
|
|
|
- <el-upload
|
|
|
- class="avatar-uploader"
|
|
|
- accept=".jpg, .jpeg, .png, .gif, .bmp, .JPG, .JPEG, .PBG, .GIF, .BMP"
|
|
|
- action=""
|
|
|
- :show-file-list="false"
|
|
|
- :on-success="handleAvatarSuccess"
|
|
|
- :http-request="(file) => uploadImg(file, item.id)"
|
|
|
- :before-upload="beforeAvatarUpload"
|
|
|
- >
|
|
|
- <img v-if="imageUrl" :src="imageUrl" class="avatar" alt=""/>
|
|
|
- <SvgIcon v-else class="avatar-uploader-icon" name="ele-Plus" size="32px" />
|
|
|
- </el-upload>
|
|
|
- </template>
|
|
|
- <!-- 多个图片上传 -->
|
|
|
- <template v-else-if="item.valueType === 11">
|
|
|
- <el-upload
|
|
|
- v-model:file-list="fileList"
|
|
|
- accept=".jpg, .jpeg, .png, .gif, .bmp, .JPG, .JPEG, .PBG, .GIF, .BMP"
|
|
|
- action=""
|
|
|
- list-type="picture-card"
|
|
|
- ref="uploadListRef"
|
|
|
- :autoUpload="false"
|
|
|
- :on-change="(file) => uploadImgList(file, fileList, item.id)"
|
|
|
- >
|
|
|
- <SvgIcon name="ele-Plus" size="32px" />
|
|
|
- <template #file="file">
|
|
|
- <div style="text-align: center" class="w100 h100">
|
|
|
- <div class="images w100 h100" v-viewer>
|
|
|
- <img class="w100 h100" :src="file.file.url" alt=""/>
|
|
|
- </div>
|
|
|
- <span class="el-upload-list__item-actions">
|
|
|
- <span title="预览图片" class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
|
|
|
- <SvgIcon name="ele-ZoomIn" size="18px" />
|
|
|
- </span>
|
|
|
- <span title="删除图片" class="el-upload-list__item-delete" @click="handleRemove(file)">
|
|
|
- <SvgIcon name="ele-Delete" size="18px" />
|
|
|
- </span>
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </el-upload>
|
|
|
- </template>
|
|
|
- </el-form-item>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <el-form-item>
|
|
|
- <el-button type="primary" @click="submitForm" :loading="state.loading" v-auth="'system:parameter:edit'">保 存 </el-button>
|
|
|
- <el-button @click="resetForm" :loading="state.loading" v-auth="'system:parameter:edit'">重 置</el-button>
|
|
|
+ <el-form
|
|
|
+ :model="state.queryParams"
|
|
|
+ ref="ruleFormRef"
|
|
|
+ :inline="true"
|
|
|
+ @submit.native.prevent
|
|
|
+ >
|
|
|
+ <el-form-item label="参数名称" prop="settingName">
|
|
|
+ <el-input v-model="state.queryParams.settingName" placeholder="请输入参数名称" clearable @keyup.enter="queryList" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="参数" prop="code">
|
|
|
+ <el-input v-model="state.queryParams.code" placeholder="请输入参数" clearable @keyup.enter="queryList" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item >
|
|
|
+ <el-button type="primary" @click="queryList" :loading="state.loading">
|
|
|
+ <SvgIcon name="ele-Search" class="mr5" />查询
|
|
|
+ </el-button>
|
|
|
+ <el-button @click="resetQuery(ruleFormRef)" v-waves class="default-button"> <SvgIcon name="ele-Refresh" class="mr5" />重置 </el-button>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
+ <div class="flex-center-between mb20">
|
|
|
+ <p class="table-title">信息列表</p>
|
|
|
+ <div>
|
|
|
+ <el-button type="primary" @click="addParameter" v-waves v-auth="'system:timeLimit:add'">
|
|
|
+ <SvgIcon name="ele-Plus" class="mr5" />新增
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 表格 -->
|
|
|
+ <el-table :data="state.tableData" v-loading="state.loading">
|
|
|
+ <el-table-column type="index" width="60" label="序号" />
|
|
|
+ <el-table-column prop="settingName" label="参数名称" show-overflow-tooltip></el-table-column>
|
|
|
+ <el-table-column prop="code" label="参数" show-overflow-tooltip width="130"></el-table-column>
|
|
|
+ <el-table-column prop="settingValue" label="参数值" show-overflow-tooltip>
|
|
|
+ <template #default="{ row }">
|
|
|
+ <span v-if="row.settingValue">{{ row.settingValue.join('|') }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="remark" label="参数说明" show-overflow-tooltip width="300"></el-table-column>
|
|
|
+ <el-table-column prop="creator.name" label="创建人" show-overflow-tooltip></el-table-column>
|
|
|
+ <el-table-column prop="afterBegin" label="创建时间" show-overflow-tooltip width="170">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <span>{{ formatDate(row.creationTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="sort" label="排序" show-overflow-tooltip width="60"></el-table-column>
|
|
|
+ <el-table-column label="操作" width="200" fixed="right" align="center">
|
|
|
+ <template #default="{row}">
|
|
|
+ <el-button link type="primary" @click="updateParameter(row)" v-auth="'system:timeLimit:edit'" title="修改参数"> 修改 </el-button>
|
|
|
+ <el-button link type="info" @click="viewParameter(row)" v-auth="'system:timeLimit:detail'" title="查看详情"> 查看 </el-button>
|
|
|
+<!-- <el-button link type="danger" @click="parameterDelete(row)" v-auth="'system:timeLimit:detail'" title="删除参数"> 删除 </el-button>-->
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <template #empty>
|
|
|
+ <Empty />
|
|
|
+ </template>
|
|
|
+ </el-table>
|
|
|
+ <!-- 分页 -->
|
|
|
+ <pagination
|
|
|
+ :total="state.total"
|
|
|
+ v-model:page="state.queryParams.PageIndex"
|
|
|
+ v-model:limit="state.queryParams.PageSize"
|
|
|
+ @pagination="queryList"
|
|
|
+ />
|
|
|
</el-card>
|
|
|
+ <!-- 参数新增 -->
|
|
|
+ <parameter-add ref="ParameterAddRef" @updateList="queryList"/>
|
|
|
+ <!-- 参数编辑 -->
|
|
|
+ <parameter-edit ref="ParameterEditRef" @updateList="queryList"/>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup name="systemParameter">
|
|
|
-import { reactive, ref, onMounted } from 'vue';
|
|
|
-import { getSystemSettings, modifySettings } from '/@/api/system/parameter';
|
|
|
-import { ElMessage } from 'element-plus';
|
|
|
-import type { UploadProps, UploadUserFile } from 'element-plus';
|
|
|
-import { auth } from '/@/utils/authFunction';
|
|
|
+import {reactive, ref, onMounted, defineAsyncComponent} from 'vue';
|
|
|
+import { getSystemSettings } from '/@/api/system/parameter';
|
|
|
+import {ElMessage, ElMessageBox, FormInstance} from 'element-plus';
|
|
|
import { throttle } from '/@/utils/tools';
|
|
|
-import { api as viewerApi } from 'v-viewer';
|
|
|
+import {formatDate} from "/@/utils/formatTime";
|
|
|
|
|
|
-// 定义接口来定义对象的类型
|
|
|
-interface SystemState {
|
|
|
- ruleForm: object;
|
|
|
- data: Array<any>;
|
|
|
- formatData: Array<any>;
|
|
|
- loading: boolean;
|
|
|
-}
|
|
|
+// 引入组件
|
|
|
+const ParameterAdd = defineAsyncComponent(() => import('/@/views/system/parameter/component/Parameter-add.vue'));
|
|
|
+const ParameterEdit = defineAsyncComponent(() => import('/@/views/system/parameter/component/Parameter-edit.vue'));
|
|
|
|
|
|
// 定义变量内容
|
|
|
-const timeRageRef = ref<any>(['', '']);
|
|
|
-const uploadListRef = ref<RefType>();
|
|
|
-const state = reactive<SystemState>({
|
|
|
- ruleForm: {},
|
|
|
- data: [],
|
|
|
- formatData: [],
|
|
|
- loading: false,
|
|
|
+const state = reactive<any>({
|
|
|
+ loading: false, // 加载状态
|
|
|
+ queryParams: { // 查询参数
|
|
|
+ PageIndex: 1,
|
|
|
+ PageSize: 10,
|
|
|
+ settingName: '', // 参数名称
|
|
|
+ code:'' // 参数编码
|
|
|
+ },
|
|
|
+ total: 0, // 总条数
|
|
|
+ tableData: [], // 表格数据
|
|
|
});
|
|
|
-//获取参数列表
|
|
|
-const getSetList = () => {
|
|
|
- if (!auth('system:parameter:query')) ElMessage.error('抱歉,您没有权限获取系统参数!');
|
|
|
- else {
|
|
|
- state.loading = true;
|
|
|
- state.formatData = [];
|
|
|
- getSystemSettings()
|
|
|
- .then((res: any) => {
|
|
|
- state.data = res?.result ?? [];
|
|
|
- for (let j of state.data) {
|
|
|
- for (let i of j.systemSettings) {
|
|
|
- state.formatData.push({
|
|
|
- id: i.id,
|
|
|
- value: i.settingValue ? i.settingValue : i.valueType == 5 ? 'false' : null,
|
|
|
- valueType: i.valueType,
|
|
|
- });
|
|
|
- if (i.presetValue) {
|
|
|
- // 默认数据
|
|
|
- i.presetValue = JSON.parse(i.presetValue);
|
|
|
- }
|
|
|
- if (i.valueType == 1 && i.settingValue == null) {
|
|
|
- //多选
|
|
|
- i.settingValue = [];
|
|
|
- } else if (i.valueType == 1 && i.settingValue) {
|
|
|
- i.settingValue = i.settingValue.split(',');
|
|
|
- } else if (i.valueType == 8 && i.settingValue) {
|
|
|
- i.settingValue = i.settingValue.split(',');
|
|
|
- } else if (i.valueType == 9 && i.settingValue) {
|
|
|
- // 时间区间
|
|
|
- i.settingValue = i.settingValue.split(',');
|
|
|
- timeRageRef.value = [i.settingValue[0], i.settingValue[1]];
|
|
|
- }
|
|
|
- if (i.valueType == 5 && i.settingValue) {
|
|
|
- // 开关
|
|
|
- i.settingValue = JSON.parse(i.settingValue);
|
|
|
- }
|
|
|
- if (i.valueType == 3 && i.settingValue) {
|
|
|
- // 开关
|
|
|
- i.settingValue = Number(i.settingValue);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- state.loading = false;
|
|
|
- })
|
|
|
- .catch(() => {
|
|
|
- state.loading = false;
|
|
|
- });
|
|
|
- }
|
|
|
-};
|
|
|
-// 处理提交数据
|
|
|
-const changeVal = (val: any, id: string | number, startOrEnd?: string) => {
|
|
|
- state.formatData.forEach((item: any) => {
|
|
|
- if (item.id == id) {
|
|
|
- item.value = val;
|
|
|
- if (item.valueType == 1 || item.valueType == 8) {
|
|
|
- // 多选 日期区间
|
|
|
- item.value = val.join(',');
|
|
|
- }
|
|
|
- if (item.valueType == 9) {
|
|
|
- // 时间区间
|
|
|
- if (startOrEnd == 'startTime') {
|
|
|
- // 开始时间
|
|
|
- timeRageRef.value[0] = val;
|
|
|
- item.value = timeRageRef.value.join(',');
|
|
|
- } else if (startOrEnd == 'endTime') {
|
|
|
- // 结束时间
|
|
|
- timeRageRef.value[1] = val;
|
|
|
- item.value = timeRageRef.value.join(',');
|
|
|
- }
|
|
|
- }
|
|
|
- if (item.valueType == 5 || item.valueType == 3) {
|
|
|
- // 开关 数字输入
|
|
|
- item.value = String(val);
|
|
|
- }
|
|
|
- }
|
|
|
- });
|
|
|
-};
|
|
|
-// 单个上传列表
|
|
|
-const imageUrl = ref('https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100');
|
|
|
-const handleAvatarSuccess: UploadProps['onSuccess'] = (response, uploadFile) => {
|
|
|
- imageUrl.value = URL.createObjectURL(uploadFile.raw!);
|
|
|
-};
|
|
|
-// 单个图片上传
|
|
|
-const uploadImg = (response: any, uploadFile: any) => {
|
|
|
- console.log(response, uploadFile);
|
|
|
-};
|
|
|
-// 上传之前限制大小和类型
|
|
|
-const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
|
|
|
- if (rawFile.type !== 'image/jpeg') {
|
|
|
- ElMessage.error('Avatar picture must be JPG format!');
|
|
|
- return false;
|
|
|
- } else if (rawFile.size / 1024 / 1024 > 2) {
|
|
|
- ElMessage.error('Avatar picture size can not exceed 2MB!');
|
|
|
- return false;
|
|
|
- }
|
|
|
- return true;
|
|
|
-};
|
|
|
-// 上传列表
|
|
|
-const fileList = ref<UploadUserFile[]>([
|
|
|
- {
|
|
|
- name: 'food.jpeg',
|
|
|
- url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
|
|
|
- },
|
|
|
-]);
|
|
|
-// 多张图片上传
|
|
|
-const uploadImgList = (file: any, list: any, id: any) => {
|
|
|
- console.log(file, list, id);
|
|
|
- fileList.value = list;
|
|
|
-};
|
|
|
-// 删除图片(多张)
|
|
|
-const handleRemove = (uploadFile: any) => {
|
|
|
- uploadListRef.value[0].handleRemove(uploadFile.file);
|
|
|
-};
|
|
|
-// 预览图片 多张
|
|
|
-const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile: any) => {
|
|
|
- for (let i = 0; i < document.querySelectorAll('.images').length; i++) {
|
|
|
- if (uploadFile.file.url === document.querySelectorAll('.images')[i].getElementsByTagName('img')[0].src) {
|
|
|
- viewerApi({
|
|
|
- options: {
|
|
|
- toolbar: true,
|
|
|
- url: 'url',
|
|
|
- initialViewIndex: i,
|
|
|
- },
|
|
|
- images: fileList.value,
|
|
|
- });
|
|
|
- break;
|
|
|
- }
|
|
|
- }
|
|
|
-};
|
|
|
-// 保存
|
|
|
-const submitForm = throttle(() => {
|
|
|
- modifySettings({ list: state.formatData })
|
|
|
- .then(() => {
|
|
|
- ElMessage.success('配置成功');
|
|
|
- getSetList();
|
|
|
- })
|
|
|
- .catch(() => {});
|
|
|
-}, 500);
|
|
|
-const resetForm = () => {
|
|
|
- getSetList();
|
|
|
+const ruleFormRef = ref<any>(null); // 表单ref
|
|
|
+const ParameterAddRef = ref<RefType>(); // 参数新增
|
|
|
+const ParameterEditRef = ref<RefType>(); // 参数编辑
|
|
|
+
|
|
|
+// 获取参数列表
|
|
|
+const queryList = throttle(() => {
|
|
|
+ state.loading = true;
|
|
|
+ getSystemSettings(state.queryParams).then((res) => {
|
|
|
+ state.loading = false;
|
|
|
+ state.tableData = res.result.items ?? [];
|
|
|
+ state.total = res.result.total ?? 0;
|
|
|
+ }).finally(() => {
|
|
|
+ state.loading = false;
|
|
|
+ })
|
|
|
+}, 1000);
|
|
|
+// 重置表单
|
|
|
+const resetQuery = (formEl: FormInstance | undefined) => {
|
|
|
+ if (!formEl) return;
|
|
|
+ formEl.resetFields();
|
|
|
+ queryList();
|
|
|
};
|
|
|
+// 新增参数
|
|
|
+const addParameter = ()=>{
|
|
|
+ ParameterAddRef.value.openDialog();
|
|
|
+}
|
|
|
+// 修改参数
|
|
|
+const updateParameter = (row:any)=>{
|
|
|
+ ParameterEditRef.value.openDialog(row.id);
|
|
|
+}
|
|
|
+// 查看详情
|
|
|
+const viewParameter = (row:any)=>{
|
|
|
+ ParameterEditRef.value.openDialog(row.id, true);
|
|
|
+}
|
|
|
+// 删除参数
|
|
|
+const parameterDelete = (row:any)=>{
|
|
|
+ ElMessageBox.confirm(`此操作将删除模板:“${row.name}”,是否继续?`, '提示', {
|
|
|
+ confirmButtonText: '确认',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning',
|
|
|
+ draggable: true,
|
|
|
+ cancelButtonClass: 'default-button',
|
|
|
+ autofocus: false,
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ // workflowDelete(row.id).then(() => {
|
|
|
+ ElMessage.success('删除成功');
|
|
|
+ queryList();
|
|
|
+ // });
|
|
|
+ })
|
|
|
+ .catch(() => {});
|
|
|
+}
|
|
|
// 页面加载时
|
|
|
onMounted(() => {
|
|
|
- getSetList();
|
|
|
+ queryList();
|
|
|
});
|
|
|
</script>
|
|
|
|