From 392df7806471cae1ae5f21b6a106e8f931ad3f2d Mon Sep 17 00:00:00 2001
From: Surpriseplus <845948745@qq.com>
Date: 星期四, 14 九月 2023 18:21:32 +0800
Subject: [PATCH] 颜色列表页面新增
---
src/assets/lang/zh.js | 10
src/views/maintenance/systemController.vue | 5
src/views/maintenance/colorTableManage.vue | 676 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
src/assets/lang/en.js | 13 +
src/views/datamanage/dataUpdata.vue | 1
5 files changed, 704 insertions(+), 1 deletions(-)
diff --git a/src/assets/lang/en.js b/src/assets/lang/en.js
index 8b22df5..8f76f22 100644
--- a/src/assets/lang/en.js
+++ b/src/assets/lang/en.js
@@ -300,6 +300,19 @@
},
styleManage: 'Style Manage',
templateManage: 'Template management',
+ colorTableManagement: 'Color Table Management',
+ colorTableObj: {
+ append: 'Add Color List',
+ update: 'Modify Color List',
+ labe11: 'Name',
+ labe12: 'Numerical range',
+ labe13: 'Grade',
+ labe14: 'Classification',
+ labe15: 'Range',
+ },
+
+
+
styleObj: {
index: 'Index',
name: 'Name',
diff --git a/src/assets/lang/zh.js b/src/assets/lang/zh.js
index 6ccc5e9..64d297e 100644
--- a/src/assets/lang/zh.js
+++ b/src/assets/lang/zh.js
@@ -294,6 +294,16 @@
},
styleManage: '鏍峰紡绠＄悊',
templateManage: '妯℃澘绠＄悊',
+ colorTableManagement: '棰滆壊琛ㄧ鐞�',
+ colorTableObj: {
+ append: '鏂板棰滆壊鍒楄〃',
+ update: '淇敼棰滆壊鍒楄〃',
+ labe11: '鍚嶇О',
+ labe12: '鏁板�煎尯闂�',
+ labe13: '鍒嗙骇',
+ labe14: '鍒嗙被',
+ labe15: '鍊煎煙',
+ },
styleObj: {
index: '搴忓彿',
name: '鍚嶇О',
diff --git a/src/views/datamanage/dataUpdata.vue b/src/views/datamanage/dataUpdata.vue
index 4105f52..0d14a8d 100644
--- a/src/views/datamanage/dataUpdata.vue
+++ b/src/views/datamanage/dataUpdata.vue
@@ -2698,6 +2698,7 @@
},
//鏍煎紡鍖栨椂闂�
changetimeFile(res) {
+ if (!res.createTime) return;
var time = new Date(res.createTime);
var y = time.getFullYear();
var m = time.getMonth() + 1;
diff --git a/src/views/maintenance/colorTableManage.vue b/src/views/maintenance/colorTableManage.vue
new file mode 100644
index 0000000..135568e
--- /dev/null
+++ b/src/views/maintenance/colorTableManage.vue
@@ -0,0 +1,676 @@
+<template>
+ <div class="authorityManagement_box">
+ <My-bread :list="[
+ `${$t('dataManage.dataManage')}`,
+ `${$t('dataManage.colorTableManagement')}`,
+ ]"></My-bread>
+ <el-divider />
+ <div
+ class="searchComp subpage_Div"
+ ref="container"
+ >
+ <el-form
+ ref="ruleForm"
+ :model="ruleForm"
+ :inline="true"
+ >
+ <div class="flex_box">
+ <div style="margin-right: auto">
+ <el-form-item :label="$t('userManage.authorityM.name')">
+ <el-input
+ style="width:200px"
+ size="small"
+ v-model="ruleForm.name"
+ :placeholder="$t('userManage.authorityM.nameHolder')"
+ >
+ <i
+ slot="suffix"
+ class="el-icon-search"
+ @click="setSearchTable"
+ ></i>
+ </el-input>
+ </el-form-item>
+ </div>
+ <div>
+
+ <el-form-item>
+ <el-button
+ v-if="btnStatus.insert"
+ icon="el-icon-edit"
+ type="success"
+ size="small"
+ @click="setTableInsert"
+ >{{ $t('common.append') }}</el-button>
+ </el-form-item>
+ <el-form-item>
+ <el-button
+ v-if="btnStatus.delete"
+ icon="el-icon-delete"
+ type="danger"
+ size="small"
+ @click="setTableDelete"
+ >{{ $t('common.delete') }}</el-button>
+ </el-form-item>
+ <el-form-item>
+ <el-button
+ icon="el-icon-refresh"
+ type="info"
+ size="small"
+ @click="setTableRefresh"
+ >{{ $t('common.empty') }}</el-button>
+ </el-form-item>
+ </div>
+ </div>
+
+ </el-form>
+ </div>
+ <div class="dividing-line"></div>
+ <div
+ class="table_box"
+ :style="styleVar"
+ >
+ <el-table
+ :data="tableData"
+ style="width: 100%"
+ border
+ height="calc(100% - 55px)"
+ >
+ <el-table-column
+ type="selection"
+ width="55"
+ />
+ <el-table-column
+ align="center"
+ type="index"
+ :label="$t('dataManage.styleObj.index')"
+ width="70px"
+ />
+ <el-table-column
+ min-width="100"
+ :label="$t('dataManage.dictionaryManageObj.operation')"
+ >
+ <template slot-scope="scope">
+ <el-button
+ v-if="btnStatus.select"
+ type="primary"
+ plain
+ size="small"
+ >{{ $t('dataManage.dictionaryManageObj.lookOver') }}</el-button>
+ <el-button
+ v-if="btnStatus.update"
+ type="warning"
+ plain
+ size="small"
+ >{{ $t('dataManage.dictionaryManageObj.revamp') }}</el-button>
+
+ </template>
+ </el-table-column>
+ </el-table>
+ <div style="margin-top:10px">
+ <el-pagination
+ @size-change="handleSizeChange"
+ @current-change="handleCurrentChange"
+ :current-page="listData.pageIndex"
+ :page-sizes="[10, 20, 50, 100]"
+ :page-size="listData.pageSize"
+ layout="total, sizes, prev, pager, next, jumper"
+ :total="listData.count"
+ >
+ </el-pagination>
+ </div>
+ </div>
+ <!-- 鏂板 -->
+ <el-dialog
+ :title="
+ behavior == '鏂板'
+ ? `${$t('dataManage.colorTableObj.append')}`
+ : `${$t('dataManage.colorTableObj.update')}`
+ "
+ :visible.sync="dialogVisible"
+ >
+ <el-form
+ ref="form"
+ :model="formInline"
+ label-width="100px"
+ >
+ <el-form-item :label="$t('dataManage.colorTableObj.labe11')">
+ <el-input
+ style="width: 100%;"
+ size="small"
+ v-model="formInline.name"
+ ></el-input>
+ </el-form-item>
+ <el-form-item :label="$t('dataManage.colorTableObj.labe12')">
+ <el-row>
+ <el-col :span="10">
+ <div>
+ <el-input-number
+ style="width: 100%;"
+ :step="1"
+ controls-position="right"
+ size="small"
+ v-model="formInline.low"
+ @blur="setformInlineNumberChange()"
+ @change="setformInlineNumberChange()"
+ ></el-input-number>
+ </div>
+ </el-col>
+ <el-col :span="2">
+ <div style="display: flex; align-items: center;justify-content: center;color: white;">鈥斺��</div>
+ </el-col>
+ <el-col :span="12">
+ <div><el-input-number
+ size="small"
+ controls-position="right"
+ :step="1"
+ style="width: 100%;"
+ v-model="formInline.height"
+ @blur="setformInlineNumberChange()"
+ @change="setformInlineNumberChange()"
+ ></el-input-number></div>
+ </el-col>
+ </el-row>
+ </el-form-item>
+ <el-row>
+ <el-col :span="11">
+ <el-form-item :label="$t('dataManage.colorTableObj.labe13')">
+ <el-select
+ style="width: 100%;"
+ v-model="formInline.level"
+ placeholder="璇烽�夋嫨"
+ size="small"
+ @change="setLevelChange"
+ >
+ <el-option
+ v-for="item in leveloptions"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ >
+ </el-option>
+ </el-select>
+ </el-form-item>
+ </el-col>
+ <el-col :span="2">
+ <div style="width: 100%;"> </div>
+ </el-col>
+ <el-col :span="13">
+ <el-form-item :label="$t('dataManage.colorTableObj.labe14')">
+ <el-select
+ style="width: 100%;"
+ v-model="formInline.type"
+ placeholder="璇烽�夋嫨"
+ size="small"
+ >
+ <el-option
+ v-for="item in typeOptions"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ >
+ </el-option>
+ </el-select>
+ </el-form-item>
+
+ </el-col>
+ </el-row>
+
+ </el-form>
+ <div class="dialogContent">
+ <div v-for="(item,index) in listOption">
+ <div class="content">
+ <div>
+ <label>{{ $t('dataManage.colorTableObj.labe15')}} : </label>
+ </div>
+ <div>
+ <el-input-number
+ :disabled="index ==0"
+ style="width: 100%;"
+ :step="0.001"
+ controls-position="right"
+ size="small"
+ v-model="item.low"
+ @blur="setLowNumberChange(item)"
+ @change="setLowNumberChange(item)"
+ ></el-input-number>
+ </div>
+ <div>-</div>
+ <div>
+ <el-input-number
+ :disabled="index ==listOption.length-1"
+ style="width: 100%;"
+ :step="0.001"
+ controls-position="right"
+ size="small"
+ v-model="item.height"
+ @blur="setHeightNumberChange(item)"
+ @change="setHeightNumberChange(item)"
+ ></el-input-number>
+ </div>
+ <div>
+ <el-color-picker
+ size="small"
+ v-model="item.start"
+ show-alpha
+ @change="setColorStartChange(item)"
+ ></el-color-picker>
+ </div>
+ <div
+ v-show="formInline.type == 1"
+ class="contentBackground"
+ :style="{background: item.start}"
+ >
+ </div>
+ <div
+ v-show="formInline.type == 2"
+ class="contentBackground"
+ :style="{ background: `linear-gradient(to right,${ item.start},${item.end}`,}"
+ >
+ </div>
+ <div v-show="formInline.type == 2">
+ <el-color-picker
+ size="small"
+ v-model="item.end"
+ show-alpha
+ @change="setColorEndChange(item)"
+ ></el-color-picker>
+ </div>
+ </div>
+ </div>
+
+ </div>
+ <div style="padding-top: 10px;width: 100%; display: flex; justify-content: end;">
+ <el-button size="mini">{{ $t('common.cancel') }}</el-button>
+ <el-button
+ size="mini"
+ type="primary"
+ >{{ $t('common.confirm') }}</el-button>
+ </div>
+ </el-dialog>
+ <div
+ class="infoBox_box"
+ v-show="showinfoBox"
+ >
+ <div class="infoBox subpage_Div box_div">
+
+ <div
+ slot="header"
+ class="clearfix"
+ >
+ <span>{{ $t('dataManage.styleObj.deInformation') }}</span>
+ <div
+ style="float: right; cursor: pointer"
+ @click="closeDetial"
+ >
+ <i class="el-icon-close"></i>
+ </div>
+ </div>
+ <el-divider></el-divider>
+ <div class="contentBox">
+ <p>
+ <label> {{ $t('dataManage.styleObj.name') }}:</label>
+ <label class="boxlabel">{{ itemdetail.name }}</label>
+ </p>
+ <el-divider></el-divider>
+ <p>
+ <p>
+ <label> {{ $t('common.fileType') }}:</label>
+ <label class="boxlabel">{{ itemdetail.fileType }}</label>
+ </p>
+ </p>
+ <el-divider></el-divider>
+ <p>
+ <label> {{ $t('common.templateType') }}:</label>
+ <label class="boxlabel">{{ itemdetail.code }}</label>
+ </p>
+ <el-divider></el-divider>
+ <p>
+ <label> {{ $t('common.filePath') }}:</label>
+ <label class="boxlabel">{{ itemdetail.fname }}</label>
+ </p>
+ <el-divider></el-divider>
+ <p>
+ <label> {{ $t('common.bak') }}:</label>
+ <label class="boxlabel">{{ itemdetail.bak }}</label>
+ </p>
+ <el-divider></el-divider>
+ <p>
+ <label> {{ $t('dataManage.vmobj.createonuser') }}:</label>
+ <label class="boxlabel">{{ itemdetail.createName }}</label>
+ </p>
+ <el-divider></el-divider>
+ <p>
+ <label> {{ $t('dataManage.vmobj.createontime') }}:</label>
+ <label class="boxlabel">{{ itemdetail.cTime }}</label>
+ </p>
+ <el-divider></el-divider>
+ <p>
+ <label> {{ $t('dataManage.vmobj.updateonuser') }}:</label>
+ <label class="boxlabel">{{ itemdetail.updateName }}</label>
+ </p>
+ <el-divider></el-divider>
+ <p>
+ <label> {{ $t('dataManage.vmobj.updateontime') }}:</label>
+ <label class="boxlabel">{{ itemdetail.uTime }}</label>
+ </p>
+ <el-divider></el-divider>
+ </div>
+
+ </div>
+ </div>
+
+ </div>
+</template>
+
+<script>
+import MyBread from "../../components/MyBread.vue";
+import {
+
+} from "../../api/api.js";
+import { getToken } from "@/utils/auth";
+import { helper } from 'echarts';
+export default {
+ name: "templateManage",
+ components: { MyBread },
+ data() {
+ return {
+
+ behavior: "鏂板",
+
+ editForm: {
+
+ },
+ multipleSelection: [],
+ dialogVisible: false,
+ tableData: [],
+ ruleForm: {
+
+ },
+ formInline: {
+ name: '',
+ low: 0,
+ height: 2000,
+ level: 1,
+ type: 1
+ },
+ listData: {
+ pageIndex: 1,
+ pageSize: 10,
+ name: "",
+ count: 0,
+ },
+ btnStatus: {
+ select: false,
+ delete: false,
+ upload: false,
+ download: false,
+ insert: false,
+ update: false,
+ },
+ tableHeight: 0,
+ timer: 0,
+ styleVar: {
+ height: "calc(100% - 109px)",
+ },
+ typeOption: [],
+ itemdetail: {},
+ showinfoBox: false,
+ leveloptions: [],
+ typeOptions: [],
+ listOption: [],
+ };
+ },
+ created() {
+ this.showPermsBtn();
+ this.setDataStart();
+
+ },
+ beforeDestroy() {
+ this.timer && clearTimeout(this.timer);
+ window.removeEventListener("resize", this.onResize);
+ },
+ mounted() {
+ window.addEventListener("resize", this.onResize);
+ this.calHeight();
+ },
+ methods: {
+ setColorEndChange(res) {
+ if (res.id == this.listOption.length) return;
+ for (var i = 0; i < this.listOption.length; i++) {
+ if (this.listOption[i].id == res.id) {
+ this.listOption[i + 1].start = res.end;
+ }
+ }
+ },
+ setColorStartChange(res) {
+ if (this.formInline.type == 1) return
+ if (res.id == 1) return;
+ for (var i = 0; i < this.listOption.length; i++) {
+ if (this.listOption[i].id == res.id) {
+ this.listOption[i - 1].end = res.start;
+ }
+ }
+ },
+ setLowNumberChange(res) {
+ for (var i = 0; i < this.listOption.length; i++) {
+ if (this.listOption[i].id == res.id) {
+ this.listOption[i - 1].height = res.low;
+ }
+ }
+ },
+ setHeightNumberChange(res) {
+ for (var i = 0; i < this.listOption.length; i++) {
+ if (this.listOption[i].id == res.id) {
+ this.listOption[i + 1].low = res.height;
+ }
+ }
+ },
+ setformInlineNumberChange() {
+ var step = ((this.formInline.height - this.formInline.low) / this.formInline.level).toFixed(3);
+ for (var i = 0; i < this.listOption.length; i++) {
+ if (i == 0) {
+ this.listOption[i].low = this.formInline.low;
+ this.listOption[i].height = (parseFloat(this.formInline.low) + parseFloat(step)).toFixed(3);
+ } else {
+ var val = this.listOption[i - 1]
+ this.listOption[i].low = val.height;
+ this.listOption[i].height = (parseFloat(val.height) + parseFloat(step)).toFixed(3);
+ }
+ }
+ this.listOption[res - 1].height = this.formInline.height
+ },
+
+ //绾у埆鍒囨崲
+ setLevelChange(res) {
+ this.listOption = [];
+ var step = ((this.formInline.height - this.formInline.low) / res).toFixed(3);
+ var color = "rgba(255,0,0,1)"
+ for (var i = 0; i < res; i++) {
+ if (i == 0) {
+ this.listOption.push({
+ low: this.formInline.low,
+ height: (parseFloat(this.formInline.low) + parseFloat(step)).toFixed(3),
+ start: color,
+ end: color,
+ id: i + 1,
+ })
+ } else {
+ var val = this.listOption[i - 1]
+
+ this.listOption.push({
+ low: val.height,
+ height: (parseFloat(val.height) + parseFloat(step)).toFixed(3),
+ start: color,
+ end: color,
+ id: i + 1,
+ })
+ }
+ }
+ this.listOption[res - 1].height = this.formInline.height
+ },
+ //鏂板涓嬫媺妗嗗垵濮嬪寲
+ setDataStart() {
+ for (var i = 1; i < 31; i++) {
+ this.leveloptions.push({
+ value: i,
+ label: i
+ })
+ }
+ this.typeOptions = [{
+ value: 1,
+ label: '鏅��'
+ }, {
+ value: 2,
+ label: '娓愬彉'
+ }]
+ },
+ //鍒嗛〉鍒囨崲
+ handleSizeChange(res) {
+ this.listData.pageSize = res;
+ this.listData.pageIndex = 1;
+ this.setSearchTable();
+ },
+ //鍒嗛〉鍒囨崲
+ handleCurrentChange(res) {
+ this.listData.pageIndex = res;
+ this.setSearchTable();
+ },
+ //鏂板
+ setTableInsert() {
+ this.formInline = {
+ name: '',
+ low: 0,
+ height: 2000,
+ level: 1,
+ type: 1
+ }
+ this.setLevelChange(this.formInline.level);
+ this.behavior = '鏂板';
+ this.dialogVisible = true;
+
+
+ },
+ //鍒犻櫎
+ setTableDelete() {
+
+ },
+ //閲嶇疆
+ setTableRefresh() {
+
+ },
+ //鏌ヨ
+ setSearchTable() {
+
+ },
+ //璇︽儏鍏抽棴
+ closeDetial() {
+
+ },
+ onResize() {
+ this.timer && clearTimeout(this.timer);
+ this.timer = setTimeout(() => {
+ this.calHeight();
+ }, 500);
+ },
+ calHeight() {
+ this.$nextTick(() => {
+ const rect = this.$refs.container.getBoundingClientRect();
+ this.tableHeight = `${rect.height + 97}px`;
+ this.styleVar["height"] = `calc(100% - ${rect.height + 30}px)`;
+
+ });
+ },
+ //鏉冮檺閰嶇疆
+ showPermsBtn() {
+ let currentPerms = this.$store.state.currentPerms;
+ let permsEntity = this.$store.state.permsEntity;
+ permsEntity
+ .filter((item) => item.perms == currentPerms)
+ .map((item) => (this.btnStatus[item.tag.substr(1)] = true));
+ },
+ },
+};
+</script>
+<style lang="less" scoped>
+//@import url(); 寮曞叆鍏叡css绫�
+.authorityManagement_box {
+ height: 98%;
+ width: 98%;
+ padding: 0.5%;
+
+ .el-input {
+ width: 730px;
+ }
+
+ .searchComp {
+ //padding: 8px;
+ //margin-top: 20px;
+
+ border-radius: 5px;
+
+ //margin-bottom: 20px;
+
+ .el-form-item {
+ margin: 5px;
+ }
+ .el-input {
+ width: 467px;
+ }
+ }
+ .leftTree {
+ position: absolute;
+ z-index: 10;
+ z-index: 9999;
+ top: 100px;
+ left: 800px;
+ width: 400px;
+ height: 600px;
+
+ .treeBox {
+ height: 550px;
+ overflow: auto;
+ }
+ .btnBox {
+ width: 160px;
+ margin: 10px auto 0;
+ }
+ }
+ .bottom {
+ width: 100%;
+ height: 85%;
+ .rightTable {
+ height: 100%;
+ width: 100%;
+ .table_box {
+ width: 100%;
+ height: 80%;
+ margin: 0 auto;
+ overflow: auto;
+ }
+ }
+ }
+ .dialogContent {
+ width: 100%;
+ height: 40vh;
+ background: rgba(104, 156, 255, 0.1);
+ .content {
+ padding: 10px;
+ display: flex;
+ align-items: center;
+ justify-content: space-around;
+ div {
+ margin-right: 10px;
+ }
+
+ .contentBackground {
+ min-height: 1.66667vw;
+ flex: 1;
+ }
+ label {
+ color: white;
+ }
+ }
+ }
+}
+</style>
+
diff --git a/src/views/maintenance/systemController.vue b/src/views/maintenance/systemController.vue
index 1481ba2..ab370d1 100644
--- a/src/views/maintenance/systemController.vue
+++ b/src/views/maintenance/systemController.vue
@@ -28,6 +28,7 @@
<role-manage v-if="setMenuFlag == 'roleManage'"></role-manage>
<authority-manage v-if="setMenuFlag == 'authorityManage'"></authority-manage>
<template-manage v-if="setMenuFlag == 'templateManage'"></template-manage>
+ <colorTableManage v-if="setMenuFlag == 'colorTableManagement'"></colorTableManage>
<!-- <user-role-authorization v-if="setMenuFlag == 'userRoleAuthorization'"></user-role-authorization>
<menu-role-authorization v-if="setMenuFlag == 'menuRoleAuthorization'"></menu-role-authorization>
<role-menu-authorization v-if="setMenuFlag == 'roleMenuAuthorization'">
@@ -72,6 +73,7 @@
import parameterConfiguration from '@/views/maintenance/parameterConfiguration.vue'; //绯荤粺閰嶇疆
import downlog from '@/views/maintenance/downlog.vue'; //涓嬭浇鏃ュ織
import templateManage from '@/views/userManage/templateManage.vue'//妯℃澘绠＄悊
+import colorTableManage from '@/views/maintenance/colorTableManage.vue'//妯℃澘绠＄悊
import { selectMenuRecursive, queryMenuTree, getPerms, sign_insertOpLog } from '../../api/api';
import customElMenu from '../../components/customElMenu.vue';
import dataStatistics from '@/views/datamanage/dataStatistics.vue'; //鏁版嵁缁熻
@@ -99,7 +101,8 @@
customElMenu,
downlog,
templateManage,
- dataStatistics
+ dataStatistics,
+ colorTableManage
},
data() {
return {
--
Gitblit v1.9.3