新增

src/views/rulesManagement/meteringManagement/dialog.vue

@@ -0,0 +1,206 @@
+<template>
+  <el-dialog
+    :title="`${type}统一门户`"
+    :visible.sync="dialogVisible"
+    width="20%"
+  >
+    <el-form label-width="100px" class="zw-criterion">
+      <el-form-item label="编码" required>
+        <el-input
+          v-model="form.code"
+          placeholder="请输入内容"
+          disabled
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="名称" required>
+        <el-input v-model="form.name" placeholder="请输入内容"></el-input>
+      </el-form-item>
+      <el-form-item label="所属组别" required>
+        <template>
+          <el-select v-model="form.type" placeholder="请选择" disabled>
+            <el-option
+              v-for="item in typeOptions"
+              :label="item.label"
+              :value="item.value"
+              :key="item.value"
+            >
+            </el-option>
+          </el-select>
+        </template>
+      </el-form-item>
+      <el-form-item label="换算类型" required>
+        <el-input v-model="form.name" placeholder="请输入内容"></el-input>
+      </el-form-item>
+      <el-form-item label="精度" required>
+        <el-input
+          v-model="form.sort"
+          type="number"
+          placeholder="请输入内容"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="链接" required>
+        <el-input v-model="form.linkUrl" placeholder="请输入内容"></el-input>
+      </el-form-item>
+      <el-form-item label="备注描述">
+        <el-input v-model="form.remark" placeholder="请输入内容"></el-input>
+      </el-form-item>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button size="small" @click="dialogVisible = false">关 闭</el-button>
+      <el-button size="small" @click="config" type="primary">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+  import { uploadFile } from '@/api/system/file/index.js';
+  import { getImageUrl } from '@/utils/file';
+  import {
+    saveInfo,
+    updateInfo,
+    getDetails
+  } from '@/api/system/unifiedPortal/index.js';
+  export default {
+    data() {
+      return {
+        typeOptions: [
+          {
+            label: '固定',
+            value: 1
+          }
+        ],
+        dialogVisible: false,
+        file: null,
+        type: '新增',
+        form: {},
+        imageUrl: '',
+        options: [
+          {
+            label: '程序应用',
+            value: '1'
+          },
+          {
+            label: '网页应用',
+            value: '2'
+          }
+        ]
+      };
+    },
+    methods: {
+      handleClose() {
+        this.dialogVisible = false;
+      },
+      async open(type, id) {
+        this.type = type;
+        if (type == '新增') {
+          this.form = {};
+          this.imageUrl = '';
+          this.file = null;
+        } else {
+          this.file = null;
+          this.form = await getDetails(id);
+          this.imageUrl = getImageUrl(this.form.iconPath);
+        }
+        this.dialogVisible = true;
+      },
+      handleAvatarChangeIcon(file, fileList) {
+        //选中文件触发的change事件
+        console.log(file);
+        const isJPG = file.raw.type === 'image/jpeg';
+        const isPNG = file.raw.type === 'image/png';
+        const isLt10M = file.raw.size / 1024 / 1024 < 10; //限制上传文件的大小
+        if (!isLt10M) {
+          this.$message.error('上传文件大小不能超过 10MB!');
+          return false;
+        }
+        if (!isPNG && !isJPG && !isLt2M) {
+          this.$message.error('上传图片只能是 JPG/PNG 格式!');
+          return false;
+        } else {
+          this.imageUrl = URL.createObjectURL(file.raw); //赋值图片的url，用于图片回显功能
+          this.file = file.raw; //赋值文件对象，用于上传操作
+        }
+      },
+      async config() {
+        if (!this.form.name) {
+          return this.$message.error('请输入名称');
+        }
+        if (this.form.sort < 0) {
+          return this.$message.error('请输入排序');
+        }
+        if (!this.form.linkUrl) {
+          return this.$message.error('请输入链接');
+        }
+        if (this.form.linkType < 0) {
+          return this.$message.error('请选择链接类型');
+        }
+        if (this.form.architType < 0) {
+          return this.$message.error('请选择架构类型');
+        }
+        // 文件上传操作
+        if (this.file) {
+          try {
+            let res = await uploadFile({
+              multiPartFile: this.file,
+              module: 'gateway'
+            });
+            this.form.icon = res.data.id;
+          } catch (error) {
+            console.log(error);
+            return this.$message.error('上传文件失败');
+          }
+        } else {
+          if (this.type == '新增') {
+            return this.$message.error('请上传图片');
+          }
+        }
+
+        if (this.type == '新增') {
+          // 保存数据
+          try {
+            await saveInfo(this.form);
+            this.$message.success('新增成功');
+            this.dialogVisible = false;
+            this.$emit('reload');
+          } catch (error) {
+            console.log(error);
+            this.$message.error('新增失败');
+          }
+        } else {
+          // 修改
+          try {
+            await updateInfo(this.form);
+            this.$message.success('修改成功');
+            this.dialogVisible = false;
+            this.$emit('reload');
+          } catch (error) {
+            this.$message.error('修改失败');
+          }
+        }
+      }
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .typeSelect {
+    width: 100%;
+  }
+  .avatar-uploader {
+    height: 120px;
+    width: 100%;
+  }
+  .avatar {
+    width: 120px;
+    height: 120px;
+    object-fit: cover;
+  }
+  .avatar-uploader-icon {
+    width: 120px;
+    height: 120px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px dashed #d9d9d9;
+  }
+</style>

src/views/rulesManagement/meteringManagement/index.vue

@@ -0,0 +1,190 @@
+<template>
+  <div id="meteringManagement">
+    <div class="mian">
+      <div class="tree_box">
+        <div class="control">
+          <el-button icon="el-icon-plus" type="primary">新增</el-button>
+        </div>
+        <el-tree
+          class="tree"
+          ref="tree"
+          highlight-current
+          node-key="id"
+          :expand-on-click-node="false"
+          :default-expand-all="true"
+          :data="data"
+          :props="defaultProps"
+          @node-click="handleNodeClick"
+        ></el-tree>
+      </div>
+      <div class="list">
+        <div class="search_bar">
+          <el-input
+            placeholder="请输入关键词"
+            v-model="keyWord"
+            class="input-with-select"
+          >
+            <el-button slot="append" icon="el-icon-search">搜索</el-button>
+          </el-input>
+        </div>
+        <div class="table_box">
+          <ele-pro-table
+            ref="table"
+            :columns="columns"
+            :datasource="datasource"
+          >
+            <!-- 表头工具栏 -->
+            <template v-slot:toolbar>
+              <el-button
+                size="small"
+                type="primary"
+                icon="el-icon-plus"
+                class="ele-btn-icon"
+                @click="openEdit('add')"
+              >
+                新增
+              </el-button>
+            </template>
+          </ele-pro-table>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        // 表格列配置
+        columns: [
+          {
+            columnKey: 'index',
+            type: 'index',
+            label: '序号',
+            width: 50,
+            align: 'center',
+            showOverflowTooltip: true
+          },
+          {
+            prop: 'code',
+            label: '编码',
+            showOverflowTooltip: true
+          },
+          {
+            prop: 'name',
+            label: '名称',
+            showOverflowTooltip: true
+          }
+        ],
+        keyWord: '',
+        tableData: [
+          {
+            name: '包',
+            code: 'bao'
+          },
+          {
+            name: '包',
+            code: 'bao'
+          }
+        ],
+        data: [
+          {
+            label: '包(bao)',
+            children: []
+          },
+          {
+            label: '件(jian)',
+            children: []
+          },
+          {
+            label: '盒(he)',
+            children: []
+          }
+        ],
+        defaultProps: {
+          children: 'children',
+          label: 'label'
+        }
+      };
+    },
+    methods: {
+      datasource({ page, limit, where, order }) {
+        return this.tableData;
+      },
+      handleNodeClick(data) {
+        console.log(data);
+      },
+      openEdit() {
+        console.log('新增');
+      }
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  #meteringManagement {
+    height: calc(100vh - 96px);
+    width: 100%;
+    padding: 10px;
+    box-sizing: border-box;
+    .mian {
+      height: 100%;
+      width: 100%;
+      border-radius: 4px;
+      display: flex;
+      .tree_box {
+        flex: 0 0 200px;
+        background-color: #fff;
+        margin-right: 10px;
+        display: flex;
+        flex-direction: column;
+        border: 1px solid #ddd;
+        .control {
+          flex: 0 0 50px;
+          padding: 10px;
+          box-sizing: border-box;
+          display: flex;
+          align-items: center;
+          background-color: #fafafa;
+          border-bottom: 1px solid #ddd;
+        }
+        .tree {
+          flex: 1 0 auto;
+          height: 0;
+          padding: 10px;
+          box-sizing: border-box;
+          overflow: auto;
+        }
+      }
+      .list {
+        flex: 1;
+        padding: 10px;
+        box-sizing: border-box;
+        border: 1px solid #ddd;
+        background-color: #fff;
+        display: flex;
+        flex-direction: column;
+        .search_bar {
+          height: 50px;
+          box-sizing: border-box;
+          display: flex;
+          align-items: center;
+          > div {
+            width: 300px;
+          }
+        }
+        .table_box {
+          flex: 1 0 auto;
+          height: 0;
+          overflow: hidden;
+          > div {
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+          }
+        }
+      }
+    }
+  }
+</style>