1 . 更新物料标签前端页面

2 . 更新Table模板管理前端页面

package.json

@@ -6,6 +6,7 @@
   "license": "MIT",
   "scripts": {
     "dev": "vue-cli-service serve",
+    "dev:highNode": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
     "build:prod": "vue-cli-service build",
     "build:stage": "vue-cli-service build --mode staging",
     "preview": "node build/index.js --preview",

src/api/material/label.js

@@ -0,0 +1,11 @@
+import request from "@/utils/request";
+import { parseStrEmpty } from "@/utils/ruoyi";
+
+// 查询用户列表
+export function listTree(query) {
+  return request({
+    url: "/system/user/list",
+    method: "get",
+    params: query,
+  });
+}

src/api/system/table-template.js

@@ -0,0 +1,21 @@
+import request from "@/utils/request";
+
+import { parseStrEmpty } from "@/utils/ruoyi";
+
+// fetch table template list
+export function list(data, page) {
+  return request({
+    url: "/system/template/list",
+    method: "post",
+    data: data,
+    params: page,
+  });
+}
+
+// fetch table template item
+export function item(id) {
+  return request({
+    url: "/system/template/detail/" + parseStrEmpty(id),
+    method: "get",
+  });
+}

src/views/material/label/index.vue

@@ -0,0 +1,50 @@
+<script>
+import LabelTree from "./lable-tree.vue";
+import LabelTable from "./lable-table.vue";
+export default {
+  name: "MaterialLabel",
+  components: {
+    LabelTree,
+    LabelTable,
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    onNodeClick({ label }) {
+      console.log("213", this);
+      this.$message(label);
+    },
+  },
+};
+</script>
+
+<template>
+  <el-container class="container material-label">
+    <el-aside width="275px">
+      <label-tree></label-tree>
+    </el-aside>
+    <label-table></label-table>
+  </el-container>
+</template>
+
+<style scoped>
+.container {
+  --size: 12px;
+  --margin: var(--size);
+  --padding: var(--size);
+}
+.container {
+  width: calc(100% - calc(var(--size) * 2));
+  height: calc(100vh - calc(var(--size) * 2));
+  margin: var(--margin);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
+}
+.container .el-aside {
+  margin: 0;
+  padding: var(--padding);
+  background-color: rgba(255, 255, 255, 1);
+  border-right: 1px solid #dcdfe6;
+  overflow: hidden;
+}
+</style>

src/views/material/label/lable-table.vue

@@ -0,0 +1,170 @@
+<script>
+export default {
+  name: "MaterialLabelTable",
+  data() {
+    return {
+      from: { input: "", select: "" },
+      options: [
+        {
+          value: "选项1",
+          label: "黄金糕",
+        },
+        {
+          value: "选项2",
+          label: "双皮奶",
+        },
+        {
+          value: "选项3",
+          label: "蚵仔煎",
+        },
+        {
+          value: "选项4",
+          label: "龙须面",
+        },
+        {
+          value: "选项5",
+          label: "北京烤鸭",
+        },
+      ],
+      tableData: [
+        {
+          date: "2016-05-022016-05-022016-05-022016-05-02",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1518 弄",
+        },
+        {
+          date: "2016-05-04",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1517 弄",
+        },
+        {
+          date: "2016-05-01",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1519 弄",
+        },
+        {
+          date: "2016-05-03",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1516 弄",
+        },
+      ],
+    };
+  },
+  methods: {
+    duanduan(value) {
+      this.$message(value + "duanduan");
+    },
+  },
+};
+</script>
+
+<template>
+  <el-container class="material-label-table">
+    <el-header>
+      <div class="table-header-top">
+        <span>查询条件</span>
+        <div>
+          <el-select v-model="from.select" size="small" placeholder="请选择">
+            <el-option
+              v-for="item in options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            >
+            </el-option>
+          </el-select>
+          <el-input
+            v-model="from.input"
+            size="small"
+            placeholder="请输入内容"
+            :readonly="isSearching"
+            @change="onSearch"
+          >
+            <template #suffix>
+              <i
+                v-show="isSearching"
+                class="el-input__icon el-icon-loading"
+              ></i>
+              <i
+                v-show="!isSearching"
+                class="el-input__icon el-icon-search"
+              ></i>
+            </template>
+          </el-input>
+          <el-button size="small">搜索</el-button>
+          <el-button size="small">重置</el-button>
+        </div>
+      </div>
+      <div class="table-header-bottom">
+        <el-button size="small">新增</el-button>
+        <el-button size="small">导入</el-button>
+        <el-button size="small">导出</el-button>
+      </div>
+    </el-header>
+    <el-main>
+      <el-table :data="tableData">
+        <el-table-column
+          type="selection"
+          width="55"
+          fixed="left"
+          align="center"
+          show-overflow-tooltip
+        >
+        </el-table-column>
+        <el-table-column prop="date" label="日期" show-overflow-tooltip>
+        </el-table-column>
+        <el-table-column prop="name" label="姓名" show-overflow-tooltip>
+        </el-table-column>
+        <el-table-column prop="address" label="地址" show-overflow-tooltip>
+        </el-table-column>
+      </el-table>
+    </el-main>
+    <el-footer>
+      <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="currentPage4"
+        :page-sizes="[100, 200, 300, 400]"
+        :page-size="100"
+        layout="total, prev, pager, next, sizes, jumper"
+        :total="400"
+      >
+      </el-pagination>
+    </el-footer>
+  </el-container>
+</template>
+
+<style scoped>
+.material-label-table .el-header {
+  height: fit-content !important;
+  padding-top: var(--padding);
+  padding-bottom: var(--padding);
+  border-bottom: 1px solid #dcdfe6;
+}
+.material-label-table .table-header-top {
+  margin-bottom: var(--margin);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.material-label-table .table-header-top .el-select {
+  width: 150px;
+  margin-right: var(--margin);
+}
+.material-label-table .table-header-top .el-input {
+  width: 250px;
+  margin-right: var(--margin);
+}
+.material-label-table .el-main {
+  padding: 0;
+}
+.material-label-table .el-main .el-table {
+  width: 100%;
+  height: 100%;
+}
+.material-label-table .el-footer {
+  display: flex;
+  justify-content: end;
+  align-items: center;
+}
+</style>

src/views/material/label/lable-tree.vue

@@ -0,0 +1,125 @@
+<script>
+export default {
+  name: "MaterialLabelTree",
+  data() {
+    return {
+      loading: false,
+      form: {
+        radio: 3,
+        input: "",
+      },
+      data: [],
+      defaultProps: {
+        children: "children",
+        label: "label",
+      },
+    };
+  },
+  methods: {
+    fetchMaterialTree() {
+      this.loading = true;
+      setTimeout(() => {
+        this.data = [
+          {
+            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",
+                  },
+                ],
+              },
+            ],
+          },
+        ];
+        this.$message.success("success");
+        this.loading = false;
+      }, 1000);
+    },
+    onSearch() {
+      this.loading = true;
+      setTimeout(() => {
+        console.log(this.form);
+        this.loading = false;
+      }, 3000);
+    },
+    onNodeClick({ label }) {
+      console.log("213", this);
+      this.$parent.$parent.$children[1].duanduan(label);
+      // this.$message(label);
+    },
+  },
+  created() {
+    this.fetchMaterialTree();
+  },
+};
+</script>
+
+<template>
+  <div class="material-label-tree" v-loading="loading">
+    <el-form ref="form" :model="form" label-width="0">
+      <el-radio-group v-model="form.radio" @change="onSearch">
+        <el-radio :label="3">物料分类</el-radio>
+        <el-radio :label="6">物料特征</el-radio>
+      </el-radio-group>
+      <el-input
+        v-model="form.input"
+        size="small"
+        placeholder="请输入内容"
+        @change="onSearch"
+      >
+        <template #suffix>
+          <i class="el-input__icon el-icon-search"></i>
+        </template>
+      </el-input>
+    </el-form>
+    <el-scrollbar>
+      <el-tree
+        :data="data"
+        :props="defaultProps"
+        @node-click="onNodeClick"
+      ></el-tree>
+    </el-scrollbar>
+  </div>
+</template>
+
+<style scoped>
+.material-label-tree {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.material-label-tree .el-input {
+  margin: var(--margin) 0;
+}
+
+.material-label-tree .el-scrollbar {
+  flex: 1;
+}
+.material-label-tree .el-tree {
+  user-select: none;
+}
+</style>

src/views/system/table-template/index.vue

@@ -0,0 +1,407 @@
+<script>
+// import LabelTree from "./lable-tree.vue";
+// import TemplateTable from "./template-table.vue";
+import { list, item } from "@/api/system/table-template";
+export default {
+  name: "TableTemplate",
+  components: {
+    // TemplateTable,
+  },
+  data() {
+    return {
+      loading: false,
+      dialogVisible: false,
+      form1: { input: "", select: "" },
+      form2: { input: "", select: "" },
+      page: { pageNum: 1, pageSize: 25 },
+      total: 0,
+      options: [],
+      tableData: [],
+      columns: [
+        {
+          type: "text",
+          prop: "templateCode",
+          label: "模板编码",
+          showOverflowTooltip: true,
+        },
+        {
+          type: "text",
+          prop: "templateName",
+          label: "模板名称",
+          showOverflowTooltip: true,
+        },
+        {
+          type: "text",
+          prop: "desc",
+          label: "描述",
+          showOverflowTooltip: true,
+        },
+        {
+          type: "text",
+          prop: "remark",
+          label: "备注",
+          showOverflowTooltip: true,
+        },
+        {
+          type: "select",
+          prop: "status",
+          label: "启用状态",
+          showOverflowTooltip: true,
+        },
+        {
+          type: "text",
+          prop: "createBy",
+          label: "创建者",
+          showOverflowTooltip: true,
+        },
+        {
+          type: "text",
+          prop: "createTime",
+          label: "创建时间",
+          showOverflowTooltip: true,
+        },
+        {
+          type: "text",
+          prop: "updateBy",
+          label: "更新者",
+          showOverflowTooltip: true,
+        },
+        {
+          type: "text",
+          prop: "updateTime",
+          label: "更新时间",
+          showOverflowTooltip: true,
+        },
+        // {
+        //   prop: "sysTemplateItemList",
+        //   label: "zv",
+        //   showOverflowTooltip: true,
+        // },
+      ],
+    };
+  },
+  methods: {
+    fetchList() {
+      list(this.from, this.page).then((res) => {
+        let { total, rows } = res;
+        this.tableData = rows;
+        this.total = total;
+      });
+    },
+    onSearch() {
+      this.pageNum = 1;
+      this.fetchList();
+    },
+    onSizeChnage() {
+      this.pageNum = 1;
+      this.fetchList();
+    },
+    onCurrentChange() {
+      this.fetchList();
+    },
+    onLookRow(props) {
+      this.dialogVisible = true;
+      let { id } = props;
+      item(id).then((res) => {
+        let { data } = res;
+        this.form2 = data;
+        this.form2.sysTemplateItemList = data.sysTemplateItemList.map(
+          (item) => ({
+            ...item,
+            isEdit: item.isEdit === "1" ? true : false,
+            isShow: item.isShow === "1" ? true : false,
+            isRequired: item.isRequired === "1" ? true : false,
+          })
+        );
+      });
+    },
+    onMoveTemplateRow(direction, index1) {
+      let index2 = 0;
+
+      index2 = direction === "top" ? index1 - 1 : index1 + 1;
+
+      console.log(index1, index2);
+    },
+  },
+  created() {
+    this.fetchList();
+  },
+};
+</script>
+
+<template>
+  <el-container class="container table-template">
+    <el-container class="table-template-table">
+      <el-header>
+        <div class="table-header-top">
+          <span>查询条件</span>
+          <div>
+            <el-select v-model="form1.select" size="small" placeholder="请选择">
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+            <el-input
+              v-model="form1.input"
+              size="small"
+              placeholder="请输入内容"
+              :readonly="loading"
+              @change="onSearch"
+            >
+              <template #suffix>
+                <i v-show="loading" class="el-input__icon el-icon-loading"></i>
+                <i v-show="!loading" class="el-input__icon el-icon-search"></i>
+              </template>
+            </el-input>
+            <el-button size="small">搜索</el-button>
+            <el-button size="small">重置</el-button>
+          </div>
+        </div>
+        <div class="table-header-bottom">
+          <el-button size="small">新增</el-button>
+          <el-button size="small">导入</el-button>
+          <el-button size="small">导出</el-button>
+        </div>
+      </el-header>
+      <el-main>
+        <el-table :data="tableData">
+          <!-- <el-table-column
+            type="selection"
+            width="55"
+            fixed="left"
+            align="center"
+            show-overflow-tooltip
+          >
+          </el-table-column> -->
+          <el-table-column
+            v-for="column in columns"
+            :key="column.prop"
+            :prop="column.prop"
+            :label="column.label"
+            :show-overflow-tooltip="column.showOverflowTooltip"
+          >
+          </el-table-column>
+          <el-table-column fixed="right" label="操作" width="225">
+            <template slot-scope="scope">
+              <el-button
+                @click.native.prevent="onLookRow(scope.row)"
+                size="small"
+              >
+                查看
+              </el-button>
+              <el-button
+                @click.native.prevent="deleteRow(scope.$index, tableData)"
+                size="small"
+              >
+                修改
+              </el-button>
+              <el-button
+                @click.native.prevent="deleteRow(scope.$index, tableData)"
+                size="small"
+              >
+                删除
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-main>
+      <el-footer>
+        <el-pagination
+          @size-change="onSizeChnage"
+          @current-change="onCurrentChange"
+          :current-page="page.pageNum"
+          :page-sizes="[25, 50, 100]"
+          :page-size="page.pageSize"
+          layout="total, prev, pager, next, sizes, jumper"
+          :total="total"
+        >
+        </el-pagination>
+      </el-footer>
+    </el-container>
+    <!-- <el-backtop
+      target=".el-scrollbar__view"
+      :visibility-height="20"
+    ></el-backtop> -->
+    <el-dialog
+      title="查看"
+      width="75%"
+      destroy-on-close
+      :visible.sync="dialogVisible"
+    >
+      <el-row :gutter="20">
+        <el-form size="mini" :model="form2" label-position="top">
+          <el-col v-for="column in columns" :key="column.prop" :span="6">
+            <el-form-item :label="column.label">
+              <el-input
+                v-if="column.type === 'text'"
+                v-model="form2[column.prop]"
+              ></el-input>
+              <el-select
+                v-if="column.type === 'select'"
+                v-model="form2[column.prop]"
+              >
+                <el-option label="区域一" value="shanghai"></el-option>
+                <el-option label="区域二" value="beijing"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="模板配置">
+              <el-table :data="form2.sysTemplateItemList">
+                <el-table-column type="index" width="50"> </el-table-column>
+                <el-table-column prop="code" label="字段编码" width="200">
+                  <template slot-scope="scope">
+                    <el-input v-model="scope.row.code"></el-input>
+                  </template>
+                </el-table-column>
+                <el-table-column prop="name" label="字段名称" width="200">
+                  <template slot-scope="scope">
+                    <el-input v-model="scope.row.name"></el-input>
+                  </template>
+                </el-table-column>
+                <el-table-column prop="isEdit" label="是否编辑">
+                  <template slot-scope="scope">
+                    <el-switch v-model="scope.row.isEdit"> </el-switch>
+                  </template>
+                </el-table-column>
+                <el-table-column prop="isShow" label="是否显示">
+                  <template slot-scope="scope">
+                    <el-switch v-model="scope.row.isShow"> </el-switch>
+                  </template>
+                </el-table-column>
+                <el-table-column prop="isRequired" label="是否必填">
+                  <template slot-scope="scope">
+                    <el-switch v-model="scope.row.isRequired"> </el-switch>
+                  </template>
+                </el-table-column>
+                <el-table-column
+                  prop="conditionType"
+                  label="字段类型"
+                  width="200"
+                >
+                  <template slot-scope="scope">
+                    <el-input v-model="scope.row.conditionType"></el-input>
+                  </template>
+                </el-table-column>
+                <el-table-column prop="dictId" label="字典ID" width="200">
+                  <template slot-scope="scope">
+                    <el-input v-model="scope.row.dictId"></el-input>
+                  </template>
+                </el-table-column>
+                <el-table-column
+                  prop="textAttribute"
+                  label="文本类型"
+                  width="200"
+                >
+                  <template slot-scope="scope">
+                    <el-input v-model="scope.row.textAttribute"></el-input>
+                  </template>
+                </el-table-column>
+                <el-table-column prop="checkRule" label="校验规则" width="200">
+                  <template slot-scope="scope">
+                    <el-input v-model="scope.row.checkRule"></el-input>
+                  </template>
+                </el-table-column>
+                <el-table-column fixed="right" label="操作" width="150">
+                  <template slot-scope="scope">
+                    <el-button
+                      v-if="scope.$index !== 0"
+                      @click.native.prevent="
+                        onMoveTemplateRow('top', scope.$index)
+                      "
+                      icon="el-icon-top"
+                      circle
+                    >
+                    </el-button>
+                    <el-button
+                      v-if="
+                        scope.$index !== form2.sysTemplateItemList.length - 1
+                      "
+                      @click.native.prevent="
+                        onMoveTemplateRow('bottom', scope.$index)
+                      "
+                      icon="el-icon-bottom"
+                      circle
+                    >
+                    </el-button>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </el-form-item>
+          </el-col>
+          <!-- <el-col :span="12">
+            <el-form-item label="活动区域">
+              <el-select v-model="form2.region" placeholder="请选择活动区域">
+                <el-option label="区域一" value="shanghai"></el-option>
+                <el-option label="区域二" value="beijing"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col> -->
+        </el-form>
+      </el-row>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="dialogVisible = false"
+          >确 定</el-button
+        >
+      </div>
+    </el-dialog>
+  </el-container>
+</template>
+
+<style scoped>
+.container {
+  --size: 12px;
+  --margin: var(--size);
+  --padding: var(--size);
+}
+.container {
+  width: calc(100% - calc(var(--size) * 2));
+  /* height: calc(100vh - calc(var(--size) * 2)); */
+  margin: var(--padding);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
+}
+.container .el-aside {
+  margin: 0;
+  padding: var(--padding);
+  background-color: rgba(255, 255, 255, 1);
+  border-right: 1px solid #dcdfe6;
+  overflow: hidden;
+}
+.table-template-table .el-header {
+  height: fit-content !important;
+  padding-top: var(--padding);
+  padding-bottom: var(--padding);
+  border-bottom: 1px solid #dcdfe6;
+}
+.table-template-table .table-header-top {
+  margin-bottom: var(--margin);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.table-template-table .table-header-top .el-select {
+  width: 150px;
+  margin-right: var(--margin);
+}
+.table-template-table .table-header-top .el-input {
+  width: 250px;
+  margin-right: var(--margin);
+}
+.table-template-table .el-main {
+  padding: 0;
+}
+.table-template-table .el-main .el-table {
+  width: 100%;
+  height: 100%;
+}
+.table-template-table .el-footer {
+  display: flex;
+  justify-content: end;
+  align-items: center;
+}
+</style>

src/views/system/table-template/lable-tree.vue

@@ -0,0 +1,125 @@
+<script>
+export default {
+  name: "MaterialLabelTree",
+  data() {
+    return {
+      loading: false,
+      form: {
+        radio: 3,
+        input: "",
+      },
+      data: [],
+      defaultProps: {
+        children: "children",
+        label: "label",
+      },
+    };
+  },
+  methods: {
+    fetchMaterialTree() {
+      this.loading = true;
+      setTimeout(() => {
+        this.data = [
+          {
+            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",
+                  },
+                ],
+              },
+            ],
+          },
+        ];
+        this.$message.success("success");
+        this.loading = false;
+      }, 1000);
+    },
+    onSearch() {
+      this.loading = true;
+      setTimeout(() => {
+        console.log(this.form);
+        this.loading = false;
+      }, 3000);
+    },
+    onNodeClick({ label }) {
+      console.log("213", this);
+      this.$parent.$parent.$children[1].duanduan(label);
+      // this.$message(label);
+    },
+  },
+  created() {
+    this.fetchMaterialTree();
+  },
+};
+</script>
+
+<template>
+  <div class="material-label-tree" v-loading="loading">
+    <el-form ref="form" :model="form" label-width="0">
+      <el-radio-group v-model="form.radio" @change="onSearch">
+        <el-radio :label="3">物料分类</el-radio>
+        <el-radio :label="6">物料特征</el-radio>
+      </el-radio-group>
+      <el-input
+        v-model="form.input"
+        size="small"
+        placeholder="请输入内容"
+        @change="onSearch"
+      >
+        <template #suffix>
+          <i class="el-input__icon el-icon-search"></i>
+        </template>
+      </el-input>
+    </el-form>
+    <el-scrollbar>
+      <el-tree
+        :data="data"
+        :props="defaultProps"
+        @node-click="onNodeClick"
+      ></el-tree>
+    </el-scrollbar>
+  </div>
+</template>
+
+<style scoped>
+.material-label-tree {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.material-label-tree .el-input {
+  margin: var(--margin) 0;
+}
+
+.material-label-tree .el-scrollbar {
+  flex: 1;
+}
+.material-label-tree .el-tree {
+  user-select: none;
+}
+</style>

src/views/system/table-template/template-table.vue

@@ -0,0 +1,171 @@
+<script>
+import { list, item } from "@/api/system/table-template";
+export default {
+  name: "TableTemplateTable",
+  data() {
+    return {
+      from: { input: "", select: "" },
+      options: [
+        {
+          value: "选项1",
+          label: "黄金糕",
+        },
+        {
+          value: "选项2",
+          label: "双皮奶",
+        },
+        {
+          value: "选项3",
+          label: "蚵仔煎",
+        },
+        {
+          value: "选项4",
+          label: "龙须面",
+        },
+        {
+          value: "选项5",
+          label: "北京烤鸭",
+        },
+      ],
+      tableData: [
+        {
+          date: "2016-05-022016-05-022016-05-022016-05-02",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1518 弄",
+        },
+        {
+          date: "2016-05-04",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1517 弄",
+        },
+        {
+          date: "2016-05-01",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1519 弄",
+        },
+        {
+          date: "2016-05-03",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1516 弄",
+        },
+      ],
+    };
+  },
+  methods: {
+    duanduan(value) {
+      this.$message(value + "duanduan");
+    },
+  },
+};
+</script>
+
+<template>
+  <el-container class="table-template-table">
+    <el-header>
+      <div class="table-header-top">
+        <span>查询条件</span>
+        <div>
+          <el-select v-model="from.select" size="small" placeholder="请选择">
+            <el-option
+              v-for="item in options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            >
+            </el-option>
+          </el-select>
+          <el-input
+            v-model="from.input"
+            size="small"
+            placeholder="请输入内容"
+            :readonly="isSearching"
+            @change="onSearch"
+          >
+            <template #suffix>
+              <i
+                v-show="isSearching"
+                class="el-input__icon el-icon-loading"
+              ></i>
+              <i
+                v-show="!isSearching"
+                class="el-input__icon el-icon-search"
+              ></i>
+            </template>
+          </el-input>
+          <el-button size="small">搜索</el-button>
+          <el-button size="small">重置</el-button>
+        </div>
+      </div>
+      <div class="table-header-bottom">
+        <el-button size="small">新增</el-button>
+        <el-button size="small">导入</el-button>
+        <el-button size="small">导出</el-button>
+      </div>
+    </el-header>
+    <el-main>
+      <el-table :data="tableData">
+        <el-table-column
+          type="selection"
+          width="55"
+          fixed="left"
+          align="center"
+          show-overflow-tooltip
+        >
+        </el-table-column>
+        <el-table-column prop="date" label="日期" show-overflow-tooltip>
+        </el-table-column>
+        <el-table-column prop="name" label="姓名" show-overflow-tooltip>
+        </el-table-column>
+        <el-table-column prop="address" label="地址" show-overflow-tooltip>
+        </el-table-column>
+      </el-table>
+    </el-main>
+    <el-footer>
+      <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="currentPage4"
+        :page-sizes="[100, 200, 300, 400]"
+        :page-size="100"
+        layout="total, prev, pager, next, sizes, jumper"
+        :total="400"
+      >
+      </el-pagination>
+    </el-footer>
+  </el-container>
+</template>
+
+<style scoped>
+.table-template-table .el-header {
+  height: fit-content !important;
+  padding-top: var(--padding);
+  padding-bottom: var(--padding);
+  border-bottom: 1px solid #dcdfe6;
+}
+.table-template-table .table-header-top {
+  margin-bottom: var(--margin);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.table-template-table .table-header-top .el-select {
+  width: 150px;
+  margin-right: var(--margin);
+}
+.table-template-table .table-header-top .el-input {
+  width: 250px;
+  margin-right: var(--margin);
+}
+.table-template-table .el-main {
+  padding: 0;
+}
+.table-template-table .el-main .el-table {
+  width: 100%;
+  height: 100%;
+}
+.table-template-table .el-footer {
+  display: flex;
+  justify-content: end;
+  align-items: center;
+}
+</style>

vue.config.js

@@ -37,7 +37,7 @@ module.exports = {
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       [process.env.VUE_APP_BASE_API]: {
         // target: `http://172.16.100.107:8080/ruoyi-admin`, //生产
-        target: `http://172.16.100.107:8000/drp-admin`, //测试
+        target: `http://172.16.63.202:8000/drp-admin`, //测试
         changeOrigin: true,
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API]: ''