颜色列表页面新增

Surpriseplus

2023-09-14 392df7806471cae1ae5f21b6a106e8f931ad3f2d

颜色列表页面新增

 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',

 src/assets/lang/zh.js

@@ -294,6 +294,16 @@
    },
    styleManage: '样式管理',
    templateManage: '模板管理',
    colorTableManagement: '颜色表管理',
    colorTableObj: {
      append: '新增颜色列表',
      update: '修改颜色列表',
      labe11: '名称',
      labe12: '数值区间',
      labe13: '分级',
      labe14: '分类',
      labe15: '值域',
    },
    styleObj: {
      index: '序号',
      name: '名称',

 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;

 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>


 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 {