编码规则

src/api/codeManagement/index.js

@@ -0,0 +1,9 @@
+import request from '@/utils/request';
+
+export async function saveNew(data) {
+    const res = await request.post('/main/codemanage/saveNew', data);
+    if (res.data.code == 0) {
+        return res.data;
+    }
+    return Promise.reject(new Error(res.data.message));
+}

src/views/classifyManage/components/addDialog.vue

@@ -0,0 +1,136 @@
+<template>
+  <el-dialog
+    :title="dialogTitle"
+    :visible.sync="addRoleDialog"
+    :before-close="handleClose"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    width="40%"
+  >
+    <div class="dialog_top"></div>
+    <div class="main_container">
+      <el-form :model="addForm" :rules="addFormRules" label-width="120px">
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="父级节点" prop="name">
+                研磨棒（501）
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="层级全览" prop="other">
+              硬质合金-自用合金-研磨棒（121-002-501）
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="节点编码" prop="order">
+              <el-input
+                placeholder="请输入"
+                size="small"
+              ></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="节点名称" prop="remark">
+              <el-input
+                placeholder="请输入"
+                size="small"
+              ></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="与下层分隔" prop="remark">
+              <el-select size="small"  placeholder="请选择" style="width: 100%;">
+                <el-option
+                  v-for="item in options.fgf"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="本层排序" prop="remark">
+              <el-input
+                v-model="addForm.remark"
+                placeholder="请输入"
+                size="small"
+              ></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+    </div>
+    <div class="btns">
+      <el-button type="primary" size="small" @click="submitAdd">保存</el-button>
+      <el-button size="small" @click="handleClose">关闭</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  props: {
+    dialogTitle: {
+      type: String,
+      default: "节点信息",
+    },
+  },
+  // components: { EquipmentDialog, SelectUpload , selectTree},
+  watch: {},
+  data() {
+    return {
+      addRoleDialog: false,
+      addForm: {},
+      addFormRules: {
+        name: [{ required: true, message: "请输入角色名称", trigger: "blur" }],
+        other: [{ required: true, message: "请输入角色别名", trigger: "blur" }],
+      },
+      options:{
+        fgf:[
+          {
+            value: null,
+            label: '无分隔符'
+          },
+          {
+            value: '-',
+            label: '-'
+          },
+          {
+            value: '~',
+            label: '~'
+          },{
+            value: '_',
+            label: '_'
+          },
+        ]
+      }
+    };
+  },
+  created() {
+    // this.getrecipientDep()
+  },
+  methods: {
+    open(){
+      this.addRoleDialog = true
+    },
+    handleClose() {
+      this.addRoleDialog = false;
+    },
+    submitAdd() {},
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.dialog_top {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+}
+.btns {
+  text-align: right;
+  margin: 10px 0;
+}
+</style>

src/views/classifyManage/details.vue

@@ -0,0 +1,167 @@
+<template>
+  <div class="ele-body">
+    <el-card shadow="never">
+      <div class="container-main">
+        <div class="tree-wrap">
+          <el-tree
+            :data="treeData"
+            :props="defaultProps"
+            @node-click="handleNodeClick"
+          ></el-tree>
+        </div>
+        <div class="main-wrap">
+          <div class="top-bar">
+            <el-button size="medium" class="btn" @click="handlOpen"
+              >新建下级节点</el-button
+            >
+            <el-button size="medium" class="btn">编辑节点</el-button>
+          </div>
+          <div class="basic-details-title">
+            <span class="border-span">基本信息</span>
+          </div>
+          <el-descriptions size="medium">
+            <el-descriptions-item label="父级节点"
+              >自用合金（002）</el-descriptions-item
+            >
+            <el-descriptions-item label="层级全览"
+              >硬质合金-自用合金-研磨棒（121-002-501）</el-descriptions-item
+            >
+            <el-descriptions-item label="节点编码">501</el-descriptions-item>
+            <el-descriptions-item label="节点名称">研磨棒</el-descriptions-item>
+            <el-descriptions-item label="与下层分隔">-</el-descriptions-item>
+          </el-descriptions>
+          <div class="fhlb-wrap">
+            <el-button size="medium">返回列表</el-button>
+          </div>
+        </div>
+      </div>
+      <addDialog ref="addDialog"></addDialog>
+    </el-card>
+  </div>
+</template>
+<script>
+import addDialog from './components/addDialog.vue';
+export default {
+  components: {
+    addDialog
+  },
+  data() {
+    return {
+      treeData: [
+        {
+          label: '一级 1',
+          children: [
+            {
+              label: '二级 1-1',
+              children: [
+                {
+                  label: '三级 1-1-1'
+                }
+              ]
+            }
+          ]
+        },
+        {
+          label: '一级 2',
+          children: [
+            {
+              label: '二级 2-1',
+              children: [
+                {
+                  label: '三级 2-1-1'
+                }
+              ]
+            },
+            {
+              label: '二级 2-2',
+              children: [
+                {
+                  label: '三级 2-2-1'
+                }
+              ]
+            }
+          ]
+        },
+        {
+          label: '一级 3',
+          children: [
+            {
+              label: '二级 3-1',
+              children: [
+                {
+                  label: '三级 3-1-1'
+                }
+              ]
+            },
+            {
+              label: '二级 3-2',
+              children: [
+                {
+                  label: '三级 3-2-1'
+                }
+              ]
+            }
+          ]
+        }
+      ],
+      defaultProps: {
+        children: 'children',
+        label: 'label'
+      }
+    };
+  },
+  methods: {
+    handlOpen() {
+      this.$refs.addDialog.open();
+    },
+    handleNodeClick() {}
+  }
+};
+</script>
+<style lang="scss" scoped>
+.container-main {
+  display: flex;
+  height: calc(100vh - 160px);
+  .tree-wrap {
+    width: 220px;
+    border-right: 1px solid #d7d7d7;
+  }
+  .main-wrap {
+    flex: 1;
+    margin-left: 20px;
+  }
+}
+.top-bar {
+  height: 50px;
+  background: #f2f2f2;
+  display: flex;
+  align-items: center;
+  padding-left: 10px;
+}
+.btn {
+  background: #157a2c;
+  color: #ffffff;
+}
+.basic-details-title {
+  margin-bottom: 12px;
+  margin-top: 20px;
+  border-bottom: 1px solid #157a2c;
+  padding-bottom: 8px;
+  display: flex;
+  justify-content: space-between;
+}
+.basic-details-title .border-span {
+  height: 18px;
+  font-size: 16px;
+  border-left: 4px solid #157a2c;
+  padding-left: 8px;
+
+  font-weight: 500;
+}
+.fhlb-wrap {
+  padding: 20px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>

src/views/classifyManage/index.vue

@@ -0,0 +1,120 @@
+<template>
+  <div class="app-container ele-body">
+    <div class="zw-page-table">
+      <!-- 条件区 -->
+      <el-form label-width="100px" class="zw-criterion">
+        <div class="zw-criterion-normal">
+          <el-row>
+            <el-col :span="4">
+              <el-form-item label-width="80px" label="类型编码">
+                <el-input size="small" placeholder="请输入内容"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="4">
+              <el-form-item label-width="80px" label="类型编码">
+                <el-input size="small" placeholder="请输入内容"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="4" style="padding-left: 10px">
+              <el-button
+                type="primary"
+                @click="search"
+                icon="el-icon-search"
+                size="small"
+                >搜索</el-button
+              >
+              <el-button @click="reset" icon="el-icon-refresh-left" size="small"
+                >重置</el-button
+              >
+            </el-col>
+          </el-row>
+        </div>
+      </el-form>
+    </div>
+    <el-table class="table" :data="tableData">
+      <el-table-column prop="s1" label="类型编码" width="180">
+      </el-table-column>
+      <el-table-column prop="name" label="类型名称" width="180">
+      </el-table-column>
+      <el-table-column prop="address" label="描述"></el-table-column>
+      <el-table-column prop="address" label="操作">
+        <template slot-scope="{ row }">
+          <el-button type="text" @click="junmpEdit(row)" size="small">编辑</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <div class="pagination-wrap">
+      <el-pagination
+        background
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="total"
+        :page-size="size"
+        :current-page.sync="page"
+        @current-change="handleCurrentChange"
+        @size-change="handleSizeChange"
+      >
+      </el-pagination>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      searchForm: {},
+      tableData: [
+        {
+            s1:'1'
+        }
+      ],
+      total: 0,
+      size: 10,
+      page: 1,
+    };
+  },
+  methods: {
+    search() {
+      this.pagination.page = 1;
+      this.getData();
+    },
+    reset() {},
+    // 分页器方法
+    handleCurrentChange(page) {
+      this.page = page;
+      this.getData();
+    },
+    handleSizeChange(size) {
+      this.page = 1;
+      this.size = size;
+      this.getData();
+    },
+    getData() {},
+    // 编辑
+    junmpEdit(row){
+      this.$router.push({
+        path:'/classifyManage/details'
+      })
+    }
+  },
+};
+</script>
+<style lang="scss" scoped>
+.app-container {
+  background: #f0f3f3;
+  min-height: calc(100vh - 84px);
+}
+.zw-page-table {
+  background: #ffffff;
+  padding-top: 20px;
+}
+.pagination-wrap {
+  display: flex;
+  justify-content: flex-end;
+  padding: 10px 0;
+}
+.table {
+  width: 100%;
+  margin-top: 10px;
+}
+</style>

src/views/codeManagement/components/addDialog.vue

@@ -0,0 +1,138 @@
+<template>
+  <el-dialog
+    :title="dialogTitle"
+    :visible.sync="addRoleDialog"
+    :before-close="handleClose"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    width="1000px"
+  >
+    <div class="main_container">
+      <el-form :model="addForm" :rules="addFormRules" label-width="120px">
+        <el-card
+          shadow="never"
+          header="基本信息"
+          body-style="padding: 22px 22px 0 22px;"
+        >
+          <div class="form-wrap">
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="编码" prop="code" style="margin-bottom: 22px;">
+                  <el-input
+                    v-model="addForm.code"
+                    type="text"
+                    
+                    placeholder="请输入"
+                  ></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="名称" prop="name" style="margin-bottom: 22px;">
+                  <el-input
+                    v-model="addForm.name"
+                    type="text"
+                    
+                    placeholder="请输入"
+                  ></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="24">
+                <el-form-item label="描述" prop="remark" style="margin-bottom: 22px;">
+                  <el-input
+                    v-model="addForm.remark"
+                    placeholder="请输入"
+                    
+                  ></el-input>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </div>
+        </el-card>
+        <el-card
+          shadow="never"
+          header="编码配置"
+          body-style="padding: 22px 22px 0 22px;"
+        >
+            <myTable ref="myTable"></myTable>
+        </el-card>
+      </el-form>
+    </div>
+    <div class="btns">
+      <el-button type="primary" size="small" @click="submitAdd">保存</el-button>
+      <el-button size="small" @click="handleClose">关闭</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { saveNew } from '@/api/codeManagement/index';
+import myTable from './myTable.vue'
+export default {
+  components:{
+    myTable
+  },
+  watch: {},
+  data() {
+    return {
+      addRoleDialog: false,
+      dialogTitle:'新建编码规则',
+      addForm: {
+        name: '',
+        code: '',
+        remark: ''
+      },
+      addFormRules: {
+        name: [{ required: true, message: '请输入', trigger: 'blur' }],
+        code: [{ required: true, message: '请输入', trigger: 'blur' }]
+      },
+    };
+  },
+  created() {
+    // this.getrecipientDep()
+  },
+  methods: {
+    open(type,row) {
+      if(type == 'add'){
+        this.dialogTitle = '新建编码规则'
+      }else if(type == 'edit'){
+        this.dialogTitle = '编辑编码规则'
+      }
+      this.addRoleDialog = true;
+    },
+    handleClose() {
+      this.restForm();
+      this.addRoleDialog = false;
+    },
+    restForm() {
+      this.addForm = {
+        name: '',
+        code: '',
+        remark: ''
+      };
+    },
+    submitAdd() {
+      let par = {
+        code: this.addForm.code,
+        name: this.addForm.name,
+        remark: this.addForm.remark
+      };
+      saveNew(par).then((res) => {
+        console.log(res);
+      });
+    },
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.dialog_top {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+}
+.btns {
+  text-align: right;
+  margin: 10px 0;
+}
+</style>

src/views/codeManagement/components/myTable.vue

@@ -0,0 +1,236 @@
+<template>
+  <div class="bmpz-wrap">
+    <div class="btn-wrap">
+      <el-button type="primary" @click="add" size="small">添加</el-button>
+      <el-button type="primary" @click="_delete" size="small">删除</el-button>
+    </div>
+    <div class="table-wrap">
+      <el-table
+        ref="multipleTable"
+        @selection-change="selectionChange"
+        :data="tableData"
+        style="width: 100%"
+      >
+        <el-table-column type="selection" width="55"> </el-table-column>
+        <el-table-column prop="date" label="排序" width="100">
+          <template slot-scope="{ row }">
+            <div class="sort-wrap">
+              <i class="el-icon-caret-top" @click="sortTop(row)"></i>
+              <i class="el-icon-caret-bottom" @click="sortBottom(row)"></i>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="type.descp" label="类型" width="130">
+          <template slot-scope="{ row }">
+            <el-select
+              @change="settype(row, $event)"
+              v-model="row.type.code"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options.type"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </template>
+        </el-table-column>
+        <el-table-column prop="content" label="内容" width="180">
+          <template slot-scope="{ row }">
+            <!-- 固定值 -->
+            <el-input
+              v-if="row.type.code == 3"
+              v-model="row.content"
+              placeholder="请输入内容"
+            ></el-input>
+            <!-- 日期 -->
+            <el-select
+              v-if="row.type.code == 1"
+              v-model="row.content"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options.date"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </template>
+        </el-table-column>
+        <el-table-column prop="length" label="长度">
+          <template slot-scope="{ row }">
+            <el-input
+              v-if="row.type.code == 2"
+              v-model="row.length"
+              placeholder="请输入"
+            ></el-input>
+          </template>
+        </el-table-column>
+        <el-table-column prop="currentId" label="当前流水">
+          <template slot-scope="{ row }">
+            <el-input
+              v-if="row.type.code == 2"
+              v-model="row.currentId"
+              placeholder="请输入"
+            ></el-input>
+          </template>
+        </el-table-column>
+        <el-table-column prop="step" label="步长">
+          <template slot-scope="{ row }">
+            <el-input
+              v-if="row.type.code == 2"
+              v-model="row.step"
+              placeholder="请输入"
+            ></el-input>
+          </template>
+        </el-table-column>
+        <el-table-column prop="address" label="说明"></el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      tableData: [],
+      selectData: [],
+      options: {
+        type: [
+          {
+            value: 1,
+            label: '日期'
+          },
+          {
+            value: 2,
+            label: '流水号'
+          },
+          {
+            value: 3,
+            label: '固定值'
+          }
+        ],
+        date: [
+          {
+            value: '年月日',
+            label: '年月日'
+          },
+          {
+            value: '年月日时分秒',
+            label: '年月日时分秒'
+          },
+          {
+            value: '年月日时',
+            label: '年月日时'
+          },
+          {
+            value: '年月',
+            label: '年月'
+          },
+          {
+            value: '年',
+            label: '年'
+          }
+        ]
+      }
+    };
+  },
+  methods: {
+    selectionChange(selection) {
+      if (selection.length > 1) {
+        this.$refs.multipleTable.clearSelection();
+        this.$refs.multipleTable.toggleRowSelection(selection.pop());
+      }
+    },
+
+    settype(row, val) {
+      row.type.descp = this.options.type.find((n) => n.value == val).label;
+      // 重选初始化数据
+      row.content = ''
+      row.length = ''
+      row.currentId = ''
+      row.step = ''
+      row.remark = ''
+    },
+
+    // 获取选中值
+    getSelection() {
+      return this.$refs.multipleTable.selection;
+    },
+    _delete() {
+      let selection = this.getSelection();
+      if (selection.length > 0) {
+        let itemIndex = this.tableData.findIndex((n) => {
+          return n.sort == selection[0].sort;
+        });
+        if (itemIndex !== -1) {
+          this.tableData.splice(itemIndex, 1);
+          this.againSort();
+        }
+      }
+    },
+    add() {
+      this.tableData.push({
+        type: {
+          code: '',
+          descp: ''
+        },
+        content: '',
+        length: '', // 长度
+        currentId: '', // 当前流水
+        step: '', // 步长
+        remark: '', // 说明
+        sort: this.tableData.length + 1
+      });
+    },
+    sortTop(row) {
+      if (row.sort <= 1) {
+        return;
+      }
+      let rowN = this.tableData.find((n) => n.sort == row.sort - 1);
+      rowN.sort += 1;
+      row.sort -= 1;
+      this.tableData.sort((a, b) => {
+        return a.sort - b.sort;
+      });
+    },
+    sortBottom(row) {
+      if (row.sort >= this.tableData.length) {
+        return;
+      }
+      let rowN = this.tableData.find((n) => n.sort == row.sort + 1);
+      rowN.sort -= 1;
+      row.sort += 1;
+      this.tableData.sort((a, b) => {
+        return a.sort - b.sort;
+      });
+    },
+    againSort() {
+      this.tableData.forEach((n, index) => {
+        n.sort = index + 1;
+      });
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+.sort-wrap {
+  i {
+    font-size: 30px;
+    cursor: pointer;
+  }
+  .el-icon-caret-top {
+    color: red;
+  }
+  .el-icon-caret-bottom {
+    color: #157a2c;
+  }
+}
+.btn-wrap{
+  margin-bottom: 20px;
+}
+</style>

src/views/codeManagement/components/tree.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="main">
+    <div class="input-warp">
+        <el-input size="small" suffix-icon="el-icon-search" placeholder="请输入功能名称" v-model="filterText"> </el-input>
+    </div>      
+
+    <el-tree
+      class="filter-tree"
+      :data="data"
+      :props="defaultProps"
+      default-expand-all
+      :highlight-current="true"
+      :filter-node-method="filterNode"
+      @node-click="handleNodeClick"
+      ref="tree"
+    >
+    </el-tree>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    data: {
+      type: Array,
+      default() {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      filterText: "",
+      defaultProps: {
+        children: "children",
+        label: "label",
+      },
+    };
+  },
+  watch: {
+    filterText(val) {
+      this.$refs.tree.filter(val);
+    },
+  },
+  methods: {
+    filterNode(value, data) {
+      if (!value) return true;
+      return data.label.indexOf(value) !== -1;
+    },
+    handleNodeClick(data, Node){
+        this.$emit("change", data);
+    }
+  },
+};
+</script>
+<style lang="scss" scoped>
+.input-warp{
+    padding: 10px;
+}
+.main{
+    background: #ffffff;
+}
+</style>

src/views/codeManagement/details.vue

@@ -0,0 +1,111 @@
+<template>
+  <div class="ele-body">
+    <el-card
+      shadow="never"
+      header="基本信息"
+      body-style="padding: 22px 22px 0 22px;"
+    >
+      <div class="form-wrap">
+        <el-form :model="form" :rules="addFormRules" label-width="120px">
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="编码" prop="name">
+                <el-input
+                  type="text"
+                  size="small"
+                  placeholder="请输入"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="名称" prop="other">
+                <el-input
+                  type="text"
+                  size="small"
+                  placeholder="请输入"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="24">
+              <el-form-item label="描述" prop="order">
+                <el-input placeholder="请输入" size="small"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+      </div>
+    </el-card>
+    <el-card
+      shadow="never"
+      header="编码配置"
+      body-style="padding: 22px 22px 0 22px;"
+    >
+      <div class="bmpz-wrap">
+        <div class="btn-wrap">
+          <el-button type="primary" @click="add" size="small">添加</el-button>
+          <el-button type="primary" @click="_delete" size="small"
+            >删除</el-button
+          >
+        </div>
+        <div class="table-wrap">
+          <el-table :data="tableData" style="width: 100%">
+            <el-table-column prop="date" label="排序" width="180">
+            </el-table-column>
+            <el-table-column prop="name" label="类型" width="180">
+            </el-table-column>
+            <el-table-column prop="address" label="内容"></el-table-column>
+            <el-table-column prop="address" label="长度"></el-table-column>
+            <el-table-column prop="address" label="当前流水"></el-table-column>
+            <el-table-column prop="address" label="步长"></el-table-column>
+            <el-table-column prop="address" label="说明"></el-table-column>
+          </el-table>
+        </div>
+      </div>
+    </el-card>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      form: {},
+      formRules: {},
+      tableData: [
+        {
+          sort: 1,
+          type: '业务变量',
+          content: 'asdad',
+          length: '',
+          running: '',
+          stepSize: ''
+        }
+      ]
+    };
+  },
+  methods: {
+    add() {},
+    _delete() {}
+  }
+};
+</script>
+<style lang="scss" scoped>
+.basic-details-title {
+  margin-bottom: 12px;
+  margin-top: 20px;
+  border-bottom: 1px solid #157a2c;
+  padding-bottom: 8px;
+  display: flex;
+  justify-content: space-between;
+}
+.basic-details-title .border-span {
+  height: 18px;
+  font-size: 16px;
+  border-left: 4px solid #157a2c;
+  padding-left: 8px;
+
+  font-weight: 500;
+}
+.form-wrap {
+  max-width: 700px;
+}
+</style>

src/views/codeManagement/index.vue

@@ -0,0 +1,207 @@
+<template>
+  <div class="app-container ele-body">
+    <div class="zw-page-table">
+      <!-- 条件区 -->
+      <el-form label-width="100px" class="zw-criterion">
+        <div class="zw-criterion-normal">
+          <el-row>
+            <el-col :span="4">
+              <el-form-item label-width="80px" label="类型编码">
+                <el-input placeholder="请输入内容"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="4">
+              <el-form-item label-width="80px" label="类型编码">
+                <el-input placeholder="请输入内容"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="4" style="padding-left: 10px">
+              <el-button
+                type="primary"
+                @click="search"
+                icon="el-icon-search"
+     
+                >搜索</el-button
+              >
+              <el-button @click="reset" icon="el-icon-refresh-left" 
+                >重置</el-button
+              >
+            </el-col>
+          </el-row>
+        </div>
+      </el-form>
+    </div>
+    <div class="butn-wrap">
+      <el-button
+        type="primary"
+        @click="add"
+        icon="el-icon-search"
+        size="small"
+        >新增</el-button
+      >
+    </div>
+    <div class="container-main">
+      <div class="tree-wrap">
+        <tree ref="tree" :data="treeData" @change="treeChange"></tree>
+      </div>
+      <div class="main-wrap">
+        <el-table class="table" :data="tableData">
+          <el-table-column prop="s1" label="编码" width="180">
+          </el-table-column>
+          <el-table-column prop="name" label="名称" width="180">
+          </el-table-column>
+          <el-table-column prop="address" label="描述"></el-table-column>
+          <el-table-column prop="address" label="操作">
+            <template slot-scope="{ row }">
+              <el-button type="text" @click="junmpEdit(row)" size="small"
+                >编辑</el-button
+              >
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <div class="pagination-wrap">
+          <el-pagination
+            background
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="total"
+            :page-size="size"
+            :current-page.sync="page"
+            @current-change="handleCurrentChange"
+            @size-change="handleSizeChange"
+          >
+          </el-pagination>
+        </div>
+      </div>
+    </div>
+    <addDialog ref="addDialog"></addDialog>
+  </div>
+</template>
+<script>
+import tree from './components/tree.vue';
+import addDialog from './components/addDialog.vue'
+export default {
+  components: {
+    tree,
+    addDialog
+  },
+  data() {
+    return {
+      treeData: [
+        {
+          id: 1,
+          label: '一级 1',
+          children: [
+            {
+              id: 4,
+              label: '二级 1-1',
+              children: [
+                {
+                  id: 9,
+                  label: '三级 1-1-1'
+                },
+                {
+                  id: 10,
+                  label: '三级 1-1-2'
+                }
+              ]
+            }
+          ]
+        },
+        {
+          id: 2,
+          label: '一级 2',
+          children: [
+            {
+              id: 5,
+              label: '二级 2-1'
+            },
+            {
+              id: 6,
+              label: '二级 2-2'
+            }
+          ]
+        },
+        {
+          id: 3,
+          label: '一级 3',
+          children: [
+            {
+              id: 7,
+              label: '二级 3-1'
+            },
+            {
+              id: 8,
+              label: '二级 3-2'
+            }
+          ]
+        }
+      ],
+      tableData: [
+        {
+          s1: '1'
+        }
+      ],
+      total: 0,
+      size: 10,
+      page: 1
+    };
+  },
+  methods: {
+    treeChange(val) {
+      console.log(val);
+    },
+    // 编辑
+    junmpEdit(row) {
+      // this.$router.push({
+      //   path: '/codeManagement/details'
+      // });
+      this.$refs.addDialog.open('edit')
+    },
+    search() {},
+    reset() {},
+    handleCurrentChange() {},
+    handleSizeChange() {},
+    add(){
+      this.$refs.addDialog.open('add')
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+.app-container {
+  min-height: calc(100vh - 150px);
+}
+.container-main {
+  display: flex;
+  height: calc(100vh - 230px);
+  .tree-wrap {
+    width: 220px;
+  }
+  .main-wrap {
+    flex: 1;
+    margin-left: 20px;
+  }
+}
+
+.btn {
+  background: #157a2c;
+  color: #ffffff;
+}
+.zw-page-table {
+  background: #ffffff;
+  padding-top: 20px;
+  margin-bottom: 20px;
+}
+.pagination-wrap {
+  display: flex;
+  justify-content: flex-end;
+  padding: 10px 0;
+}
+.tree-wrap {
+  background: #ffffff;
+}
+.butn-wrap{
+  margin-bottom: 10px;
+}
+</style>