Merge branch 'master' of http://172.16.100.139/new-business/drp-web

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,39 @@
+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",
+  });
+}
+
+// fetch table template item
+export function role(id) {
+  return request({
+    url: "/system/template/template_role/detail/" + parseStrEmpty(id),
+    method: "get",
+  });
+}
+
+// fetch table template list
+export function auth(data, page) {
+  return request({
+    url: "/system/template/role/add",
+    method: "post",
+    data: data,
+    params: page,
+  });
+}

src/views/index.vue

@@ -1,3 +1,17 @@
+<template>
+  <div class="app-container home">
+  </div>
+</template>
+
+<style scoped lang="scss">
+.home{
+  width: 100%;
+  height: calc(100vh - 90px);
+  background-image: url('../assets/images/homePage.png');
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+</style>
 <!-- <template>
   <div class="app-container home">
     <el-row :gutter="20">

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/material/specialAttr/index.vue

@@ -0,0 +1,170 @@
+<template>
+  <div class="specialAttr">
+    <el-row :gutter="10" class="mb10">
+      <el-col :span="1.5">
+
+        <el-select size="small" v-model="textValue" placeholder="请选择">
+        <el-option
+          v-for="item in text"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value">
+        </el-option>
+      </el-select>
+
+      <el-select size="small" v-model="ruleValue" placeholder="请选择">
+        <el-option
+          v-for="item in rule"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value">
+        </el-option>
+      </el-select>
+
+      <el-input
+        v-model="input"
+        size="small"
+        placeholder="请输入"
+        clearable
+        style="width: 240px"
+      />
+
+      </el-col>
+
+      <el-col :span="1.5">
+        <el-button type="primary" size="small" plain>查询</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="primary" size="small" plain>高级查询</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="primary" size="small" plain>重置</el-button>
+      </el-col>
+
+    </el-row>
+
+    <el-card>
+      <el-row :gutter="10" class="contrnt">
+        <el-col :span="6">
+          <el-input
+            placeholder="输入关键字进行过滤"
+            size="small"
+            v-model="filterText">
+          </el-input>
+
+          <el-tree
+            class="filter-tree"
+            :data="data"
+            :props="defaultProps"
+            default-expand-all
+            :filter-node-method="filterNode"
+            ref="tree">
+          </el-tree>
+        </el-col>
+        
+        <el-col :span="18">
+
+          <el-row>
+            <el-button type="primary" size="small" plain>新增</el-button>
+            <el-button type="primary" size="small" plain>删除</el-button>
+          </el-row>
+
+          <el-row>
+            <el-table 
+              :data="taskList" 
+              class="request-table"
+              @selection-change="handleSelectionChange"
+            >
+              <el-table-column type="selection" width="55" />
+              <el-table-column type="index" label="序号" width="55" align="center" />
+              <el-table-column label="属性名称" align="center" prop="name" />
+              <el-table-column label="属性编码" align="center" prop="code" />
+              <el-table-column label="字段类型" align="center" prop="type" />
+              <el-table-column label="字段ID值" align="center" prop="id" />
+              <el-table-column label="排序" align="center" prop="id" />
+              <el-table-column label="字段说明" align="center" prop="remark" />
+            </el-table>
+          </el-row>
+
+        </el-col>
+      </el-row>
+    </el-card>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'specialAttr',
+  watch: {
+    filterText(val) {
+      this.$refs.tree.filter(val);
+    }
+  },
+  data () {
+    return{
+      textValue: 1,
+      text: [{label: '文本字段', value: 1}, {label: '字典字段', value: 2}],
+      ruleValue: 1,
+      rule:[{label: '包含', value: 1}, {label: '不包含', value: 2}, {label: '等于', value: 3}, {label: '不等于', value: 4}],
+      input: '',
+      filterText: '',
+      data: [{
+          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'
+          }]
+      }],
+      defaultProps: {
+          children: 'children',
+          label: 'label'
+      },
+      taskList:[]
+    }
+  },
+  methods: {
+    filterNode(value, data) {
+        if (!value) return true;
+        return data.label.indexOf(value) !== -1;
+    },
+    handleSelectionChange() { }
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.specialAttr {
+  height: calc(100vh - 84px);
+  padding: 12px;
+  box-sizing: border-box;
+}
+</style>

src/views/system/role/index.vue

@@ -1,6 +1,12 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
+    <el-form
+      :model="queryParams"
+      ref="queryForm"
+      size="small"
+      :inline="true"
+      v-show="showSearch"
+    >
       <el-form-item label="角色名称" prop="roleName">
         <el-input
           v-model="queryParams.roleName"
@@ -46,8 +52,16 @@
         ></el-date-picker>
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+        <el-button
+          type="primary"
+          icon="el-icon-search"
+          size="mini"
+          @click="handleQuery"
+          >搜索</el-button
+        >
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
+          >重置</el-button
+        >
       </el-form-item>
     </el-form>
 
@@ -60,7 +74,8 @@
           size="mini"
           @click="handleAdd"
           v-hasPermi="['system:role:add']"
-        >新增</el-button>
+          >新增</el-button
+        >
       </el-col>
       <el-col :span="1.5">
         <el-button
@@ -71,7 +86,8 @@
           :disabled="single"
           @click="handleUpdate"
           v-hasPermi="['system:role:edit']"
-        >修改</el-button>
+          >修改</el-button
+        >
       </el-col>
       <el-col :span="1.5">
         <el-button
@@ -82,7 +98,8 @@
           :disabled="multiple"
           @click="handleDelete"
           v-hasPermi="['system:role:remove']"
-        >删除</el-button>
+          >删除</el-button
+        >
       </el-col>
       <el-col :span="1.5">
         <el-button
@@ -92,16 +109,34 @@
           size="mini"
           @click="handleExport"
           v-hasPermi="['system:role:export']"
-        >导出</el-button>
+          >导出</el-button
+        >
       </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+      <right-toolbar
+        :showSearch.sync="showSearch"
+        @queryTable="getList"
+      ></right-toolbar>
     </el-row>
 
-    <el-table v-loading="loading" :data="roleList" @selection-change="handleSelectionChange">
+    <el-table
+      v-loading="loading"
+      :data="roleList"
+      @selection-change="handleSelectionChange"
+    >
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="角色编号" prop="roleId" width="120" />
-      <el-table-column label="角色名称" prop="roleName" :show-overflow-tooltip="true" width="150" />
-      <el-table-column label="权限字符" prop="roleKey" :show-overflow-tooltip="true" width="150" />
+      <el-table-column
+        label="角色名称"
+        prop="roleName"
+        :show-overflow-tooltip="true"
+        width="150"
+      />
+      <el-table-column
+        label="权限字符"
+        prop="roleKey"
+        :show-overflow-tooltip="true"
+        width="150"
+      />
       <el-table-column label="显示顺序" prop="roleSort" width="100" />
       <el-table-column label="状态" align="center" width="100">
         <template slot-scope="scope">
@@ -113,12 +148,21 @@
           ></el-switch>
         </template>
       </el-table-column>
-      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+      <el-table-column
+        label="创建时间"
+        align="center"
+        prop="createTime"
+        width="180"
+      >
         <template slot-scope="scope">
           <span>{{ parseTime(scope.row.createTime) }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+      <el-table-column
+        label="操作"
+        align="center"
+        class-name="small-padding fixed-width"
+      >
         <template slot-scope="scope" v-if="scope.row.roleId !== 1">
           <el-button
             size="mini"
@@ -126,21 +170,37 @@
             icon="el-icon-edit"
             @click="handleUpdate(scope.row)"
             v-hasPermi="['system:role:edit']"
-          >修改</el-button>
+            >修改</el-button
+          >
           <el-button
             size="mini"
             type="text"
             icon="el-icon-delete"
             @click="handleDelete(scope.row)"
             v-hasPermi="['system:role:remove']"
-          >删除</el-button>
-          <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)" v-hasPermi="['system:role:edit']">
-            <el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button>
+            >删除</el-button
+          >
+          <el-dropdown
+            size="mini"
+            @command="(command) => handleCommand(command, scope.row)"
+            v-hasPermi="['system:role:edit']"
+          >
+            <el-button size="mini" type="text" icon="el-icon-d-arrow-right"
+              >更多</el-button
+            >
             <el-dropdown-menu slot="dropdown">
-              <el-dropdown-item command="handleDataScope" icon="el-icon-circle-check"
-                v-hasPermi="['system:role:edit']">数据权限</el-dropdown-item>
-              <el-dropdown-item command="handleAuthUser" icon="el-icon-user"
-                v-hasPermi="['system:role:edit']">分配用户</el-dropdown-item>
+              <el-dropdown-item
+                command="handleDataScope"
+                icon="el-icon-circle-check"
+                v-hasPermi="['system:role:edit']"
+                >数据权限</el-dropdown-item
+              >
+              <el-dropdown-item
+                command="handleAuthUser"
+                icon="el-icon-user"
+                v-hasPermi="['system:role:edit']"
+                >分配用户</el-dropdown-item
+              >
             </el-dropdown-menu>
           </el-dropdown>
         </template>
@@ -148,7 +208,7 @@
     </el-table>
 
     <pagination
-      v-show="total>0"
+      v-show="total > 0"
       :total="total"
       :page.sync="queryParams.pageNum"
       :limit.sync="queryParams.pageSize"
@@ -163,7 +223,10 @@
         </el-form-item>
         <el-form-item prop="roleKey">
           <span slot="label">
-            <el-tooltip content="控制器中定义的权限字符，如：@PreAuthorize(`@ss.hasRole('admin')`)" placement="top">
+            <el-tooltip
+              content="控制器中定义的权限字符，如：@PreAuthorize(`@ss.hasRole('admin')`)"
+              placement="top"
+            >
               <i class="el-icon-question"></i>
             </el-tooltip>
             权限字符
@@ -171,7 +234,11 @@
           <el-input v-model="form.roleKey" placeholder="请输入权限字符" />
         </el-form-item>
         <el-form-item label="角色顺序" prop="roleSort">
-          <el-input-number v-model="form.roleSort" controls-position="right" :min="0" />
+          <el-input-number
+            v-model="form.roleSort"
+            controls-position="right"
+            :min="0"
+          />
         </el-form-item>
         <el-form-item label="状态">
           <el-radio-group v-model="form.status">
@@ -179,13 +246,26 @@
               v-for="dict in dict.type.sys_normal_disable"
               :key="dict.value"
               :label="dict.value"
-            >{{dict.label}}</el-radio>
+              >{{ dict.label }}</el-radio
+            >
           </el-radio-group>
         </el-form-item>
         <el-form-item label="菜单权限">
-          <el-checkbox v-model="menuExpand" @change="handleCheckedTreeExpand($event, 'menu')">展开/折叠</el-checkbox>
-          <el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll($event, 'menu')">全选/全不选</el-checkbox>
-          <el-checkbox v-model="form.menuCheckStrictly" @change="handleCheckedTreeConnect($event, 'menu')">父子联动</el-checkbox>
+          <el-checkbox
+            v-model="menuExpand"
+            @change="handleCheckedTreeExpand($event, 'menu')"
+            >展开/折叠</el-checkbox
+          >
+          <el-checkbox
+            v-model="menuNodeAll"
+            @change="handleCheckedTreeNodeAll($event, 'menu')"
+            >全选/全不选</el-checkbox
+          >
+          <el-checkbox
+            v-model="form.menuCheckStrictly"
+            @change="handleCheckedTreeConnect($event, 'menu')"
+            >父子联动</el-checkbox
+          >
           <el-tree
             class="tree-border"
             :data="menuOptions"
@@ -198,7 +278,11 @@
           ></el-tree>
         </el-form-item>
         <el-form-item label="备注">
-          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
+          <el-input
+            v-model="form.remark"
+            type="textarea"
+            placeholder="请输入内容"
+          ></el-input>
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -208,7 +292,12 @@
     </el-dialog>
 
     <!-- 分配角色数据权限对话框 -->
-    <el-dialog :title="title" :visible.sync="openDataScope" width="500px" append-to-body>
+    <el-dialog
+      :title="title"
+      :visible.sync="openDataScope"
+      width="500px"
+      append-to-body
+    >
       <el-form :model="form" label-width="80px">
         <el-form-item label="角色名称">
           <el-input v-model="form.roleName" :disabled="true" />
@@ -227,9 +316,21 @@
           </el-select>
         </el-form-item>
         <el-form-item label="数据权限" v-show="form.dataScope == 2">
-          <el-checkbox v-model="deptExpand" @change="handleCheckedTreeExpand($event, 'dept')">展开/折叠</el-checkbox>
-          <el-checkbox v-model="deptNodeAll" @change="handleCheckedTreeNodeAll($event, 'dept')">全选/全不选</el-checkbox>
-          <el-checkbox v-model="form.deptCheckStrictly" @change="handleCheckedTreeConnect($event, 'dept')">父子联动</el-checkbox>
+          <el-checkbox
+            v-model="deptExpand"
+            @change="handleCheckedTreeExpand($event, 'dept')"
+            >展开/折叠</el-checkbox
+          >
+          <el-checkbox
+            v-model="deptNodeAll"
+            @change="handleCheckedTreeNodeAll($event, 'dept')"
+            >全选/全不选</el-checkbox
+          >
+          <el-checkbox
+            v-model="form.deptCheckStrictly"
+            @change="handleCheckedTreeConnect($event, 'dept')"
+            >父子联动</el-checkbox
+          >
           <el-tree
             class="tree-border"
             :data="deptOptions"
@@ -252,12 +353,24 @@
 </template>
 
 <script>
-import { listRole, getRole, delRole, addRole, updateRole, dataScope, changeRoleStatus, deptTreeSelect } from "@/api/system/role";
-import { treeselect as menuTreeselect, roleMenuTreeselect } from "@/api/system/menu";
+import {
+  listRole,
+  getRole,
+  delRole,
+  addRole,
+  updateRole,
+  dataScope,
+  changeRoleStatus,
+  deptTreeSelect,
+} from "@/api/system/role";
+import {
+  treeselect as menuTreeselect,
+  roleMenuTreeselect,
+} from "@/api/system/menu";
 
 export default {
   name: "Role",
-  dicts: ['sys_normal_disable'],
+  dicts: ["sys_normal_disable"],
   data() {
     return {
       // 遮罩层
@@ -290,24 +403,24 @@ export default {
       dataScopeOptions: [
         {
           value: "1",
-          label: "全部数据权限"
+          label: "全部数据权限",
         },
         {
           value: "2",
-          label: "自定数据权限"
+          label: "自定数据权限",
         },
         {
           value: "3",
-          label: "本部门数据权限"
+          label: "本部门数据权限",
         },
         {
           value: "4",
-          label: "本部门及以下数据权限"
+          label: "本部门及以下数据权限",
         },
         {
           value: "5",
-          label: "仅本人数据权限"
-        }
+          label: "仅本人数据权限",
+        },
       ],
       // 菜单列表
       menuOptions: [],
@@ -319,26 +432,26 @@ export default {
         pageSize: 10,
         roleName: undefined,
         roleKey: undefined,
-        status: undefined
+        status: undefined,
       },
       // 表单参数
       form: {},
       defaultProps: {
         children: "children",
-        label: "label"
+        label: "label",
       },
       // 表单校验
       rules: {
         roleName: [
-          { required: true, message: "角色名称不能为空", trigger: "blur" }
+          { required: true, message: "角色名称不能为空", trigger: "blur" },
         ],
         roleKey: [
-          { required: true, message: "权限字符不能为空", trigger: "blur" }
+          { required: true, message: "权限字符不能为空", trigger: "blur" },
         ],
         roleSort: [
-          { required: true, message: "角色顺序不能为空", trigger: "blur" }
-        ]
-      }
+          { required: true, message: "角色顺序不能为空", trigger: "blur" },
+        ],
+      },
     };
   },
   created() {
@@ -348,7 +461,8 @@ export default {
     /** 查询角色列表 */
     getList() {
       this.loading = true;
-      listRole(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
+      listRole(this.addDateRange(this.queryParams, this.dateRange)).then(
+        (response) => {
           this.roleList = response.rows;
           this.total = response.total;
           this.loading = false;
@@ -357,7 +471,7 @@ export default {
     },
     /** 查询菜单树结构 */
     getMenuTreeselect() {
-      menuTreeselect().then(response => {
+      menuTreeselect().then((response) => {
         this.menuOptions = response.data;
       });
     },
@@ -381,14 +495,14 @@ export default {
     },
     /** 根据角色ID查询菜单树结构 */
     getRoleMenuTreeselect(roleId) {
-      return roleMenuTreeselect(roleId).then(response => {
+      return roleMenuTreeselect(roleId).then((response) => {
         this.menuOptions = response.menus;
         return response;
       });
     },
     /** 根据角色ID查询部门树结构 */
     getDeptTree(roleId) {
-      return deptTreeSelect(roleId).then(response => {
+      return deptTreeSelect(roleId).then((response) => {
         this.deptOptions = response.depts;
         return response;
       });
@@ -396,13 +510,17 @@ export default {
     // 角色状态修改
     handleStatusChange(row) {
       let text = row.status === "0" ? "启用" : "停用";
-      this.$modal.confirm('确认要"' + text + '""' + row.roleName + '"角色吗？').then(function() {
-        return changeRoleStatus(row.roleId, row.status);
-      }).then(() => {
-        this.$modal.msgSuccess(text + "成功");
-      }).catch(function() {
-        row.status = row.status === "0" ? "1" : "0";
-      });
+      this.$modal
+        .confirm('确认要"' + text + '""' + row.roleName + '"角色吗？')
+        .then(function () {
+          return changeRoleStatus(row.roleId, row.status);
+        })
+        .then(() => {
+          this.$modal.msgSuccess(text + "成功");
+        })
+        .catch(function () {
+          row.status = row.status === "0" ? "1" : "0";
+        });
     },
     // 取消按钮
     cancel() {
@@ -419,22 +537,22 @@ export default {
       if (this.$refs.menu != undefined) {
         this.$refs.menu.setCheckedKeys([]);
       }
-      this.menuExpand = false,
-      this.menuNodeAll = false,
-      this.deptExpand = true,
-      this.deptNodeAll = false,
-      this.form = {
-        roleId: undefined,
-        roleName: undefined,
-        roleKey: undefined,
-        roleSort: 0,
-        status: "0",
-        menuIds: [],
-        deptIds: [],
-        menuCheckStrictly: true,
-        deptCheckStrictly: true,
-        remark: undefined
-      };
+      (this.menuExpand = false),
+        (this.menuNodeAll = false),
+        (this.deptExpand = true),
+        (this.deptNodeAll = false),
+        (this.form = {
+          roleId: undefined,
+          roleName: undefined,
+          roleKey: undefined,
+          roleSort: 0,
+          status: "0",
+          menuIds: [],
+          deptIds: [],
+          menuCheckStrictly: true,
+          deptCheckStrictly: true,
+          remark: undefined,
+        });
       this.resetForm("form");
     },
     /** 搜索按钮操作 */
@@ -450,9 +568,9 @@ export default {
     },
     // 多选框选中数据
     handleSelectionChange(selection) {
-      this.ids = selection.map(item => item.roleId)
-      this.single = selection.length!=1
-      this.multiple = !selection.length
+      this.ids = selection.map((item) => item.roleId);
+      this.single = selection.length != 1;
+      this.multiple = !selection.length;
     },
     // 更多操作触发
     handleCommand(command, row) {
@@ -469,12 +587,12 @@ export default {
     },
     // 树权限（展开/折叠）
     handleCheckedTreeExpand(value, type) {
-      if (type == 'menu') {
+      if (type == "menu") {
         let treeList = this.menuOptions;
         for (let i = 0; i < treeList.length; i++) {
           this.$refs.menu.store.nodesMap[treeList[i].id].expanded = value;
         }
-      } else if (type == 'dept') {
+      } else if (type == "dept") {
         let treeList = this.deptOptions;
         for (let i = 0; i < treeList.length; i++) {
           this.$refs.dept.store.nodesMap[treeList[i].id].expanded = value;
@@ -483,18 +601,18 @@ export default {
     },
     // 树权限（全选/全不选）
     handleCheckedTreeNodeAll(value, type) {
-      if (type == 'menu') {
-        this.$refs.menu.setCheckedNodes(value ? this.menuOptions: []);
-      } else if (type == 'dept') {
-        this.$refs.dept.setCheckedNodes(value ? this.deptOptions: []);
+      if (type == "menu") {
+        this.$refs.menu.setCheckedNodes(value ? this.menuOptions : []);
+      } else if (type == "dept") {
+        this.$refs.dept.setCheckedNodes(value ? this.deptOptions : []);
       }
     },
     // 树权限（父子联动）
     handleCheckedTreeConnect(value, type) {
-      if (type == 'menu') {
-        this.form.menuCheckStrictly = value ? true: false;
-      } else if (type == 'dept') {
-        this.form.deptCheckStrictly = value ? true: false;
+      if (type == "menu") {
+        this.form.menuCheckStrictly = value ? true : false;
+      } else if (type == "dept") {
+        this.form.deptCheckStrictly = value ? true : false;
       }
     },
     /** 新增按钮操作 */
@@ -507,19 +625,19 @@ export default {
     /** 修改按钮操作 */
     handleUpdate(row) {
       this.reset();
-      const roleId = row.roleId || this.ids
+      const roleId = row.roleId || this.ids;
       const roleMenu = this.getRoleMenuTreeselect(roleId);
-      getRole(roleId).then(response => {
+      getRole(roleId).then((response) => {
         this.form = response.data;
         this.open = true;
         this.$nextTick(() => {
-          roleMenu.then(res => {
-            let checkedKeys = res.checkedKeys
+          roleMenu.then((res) => {
+            let checkedKeys = res.checkedKeys;
             checkedKeys.forEach((v) => {
-                this.$nextTick(()=>{
-                    this.$refs.menu.setChecked(v, true ,false);
-                })
-            })
+              this.$nextTick(() => {
+                this.$refs.menu.setChecked(v, true, false);
+              });
+            });
           });
         });
         this.title = "修改角色";
@@ -527,7 +645,7 @@ export default {
     },
     /** 选择角色权限范围触发 */
     dataScopeSelectChange(value) {
-      if(value !== '2') {
+      if (value !== "2") {
         this.$refs.dept.setCheckedKeys([]);
       }
     },
@@ -535,11 +653,11 @@ export default {
     handleDataScope(row) {
       this.reset();
       const deptTreeSelect = this.getDeptTree(row.roleId);
-      getRole(row.roleId).then(response => {
+      getRole(row.roleId).then((response) => {
         this.form = response.data;
         this.openDataScope = true;
         this.$nextTick(() => {
-          deptTreeSelect.then(res => {
+          deptTreeSelect.then((res) => {
             this.$refs.dept.setCheckedKeys(res.checkedKeys);
           });
         });
@@ -547,24 +665,24 @@ export default {
       });
     },
     /** 分配用户操作 */
-    handleAuthUser: function(row) {
+    handleAuthUser: function (row) {
       const roleId = row.roleId;
       this.$router.push("/system/role-auth/user/" + roleId);
     },
     /** 提交按钮 */
-    submitForm: function() {
-      this.$refs["form"].validate(valid => {
+    submitForm: function () {
+      this.$refs["form"].validate((valid) => {
         if (valid) {
           if (this.form.roleId != undefined) {
             this.form.menuIds = this.getMenuAllCheckedKeys();
-            updateRole(this.form).then(response => {
+            updateRole(this.form).then((response) => {
               this.$modal.msgSuccess("修改成功");
               this.open = false;
               this.getList();
             });
           } else {
             this.form.menuIds = this.getMenuAllCheckedKeys();
-            addRole(this.form).then(response => {
+            addRole(this.form).then((response) => {
               this.$modal.msgSuccess("新增成功");
               this.open = false;
               this.getList();
@@ -574,10 +692,10 @@ export default {
       });
     },
     /** 提交按钮（数据权限） */
-    submitDataScope: function() {
+    submitDataScope: function () {
       if (this.form.roleId != undefined) {
         this.form.deptIds = this.getDeptAllCheckedKeys();
-        dataScope(this.form).then(response => {
+        dataScope(this.form).then((response) => {
           this.$modal.msgSuccess("修改成功");
           this.openDataScope = false;
           this.getList();
@@ -587,19 +705,27 @@ export default {
     /** 删除按钮操作 */
     handleDelete(row) {
       const roleIds = row.roleId || this.ids;
-      this.$modal.confirm('是否确认删除角色编号为"' + roleIds + '"的数据项？').then(function() {
-        return delRole(roleIds);
-      }).then(() => {
-        this.getList();
-        this.$modal.msgSuccess("删除成功");
-      }).catch(() => {});
+      this.$modal
+        .confirm('是否确认删除角色编号为"' + roleIds + '"的数据项？')
+        .then(function () {
+          return delRole(roleIds);
+        })
+        .then(() => {
+          this.getList();
+          this.$modal.msgSuccess("删除成功");
+        })
+        .catch(() => {});
     },
     /** 导出按钮操作 */
     handleExport() {
-      this.download('system/role/export', {
-        ...this.queryParams
-      }, `role_${new Date().getTime()}.xlsx`)
-    }
-  }
+      this.download(
+        "system/role/export",
+        {
+          ...this.queryParams,
+        },
+        `role_${new Date().getTime()}.xlsx`
+      );
+    },
+  },
 };
-</script>
+</script>

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

@@ -0,0 +1,526 @@
+<script>
+// import LabelTree from "./lable-tree.vue";
+// import TemplateTable from "./template-table.vue";
+import { list, item, role, auth } from "@/api/system/table-template";
+import { listRole } from "@/api/system/role";
+export default {
+  name: "TableTemplate",
+  components: {
+    // LabelTree,
+    // TemplateTable,
+  },
+  data() {
+    return {
+      loading: false,
+      // 详情弹窗标题
+      itemDialogTitle: "",
+      // 详情弹窗显隐
+      itemDialogVisible: false,
+      // 授权弹窗显隐
+      authDialogVisible: false,
+      // 授权查询参数
+      authQueryParams: { id: "", pageNum: 1, pageSize: 10 },
+      // 角色列表
+      roleList: [],
+      // 角色总数
+      roleTotal: 0,
+      // 已授权角色列表,
+      authRoleList: [],
+
+      form1: { input: "", select: "" },
+      form2: { input: "", select: "" },
+      page: { pageNum: 1, pageSize: 25 },
+      total: 0,
+      options: [],
+      tableData: [],
+      selectionTableData: [],
+      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,
+        },
+      ],
+    };
+  },
+  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();
+    },
+    // 选择待复制模板
+    onSelectionChange(value) {
+      this.selectionTableData = value;
+    },
+    // 打开授权弹窗
+    onAuthTemplate(props) {
+      let { id } = props;
+      this.authDialogVisible = true;
+      this.authQueryParams.id = id;
+      listRole(this.authQueryParams).then((res) => {
+        let { rows, total } = res;
+        this.roleList = rows.map((item) => ({
+          key: item.roleId,
+          label: item.roleName,
+        }));
+        this.roleTotal = total;
+      });
+      role(id).then((res) => {
+        let { data } = res;
+        this.authRoleList = data.map((item) => item.roleId);
+      });
+    },
+    // 打开编辑弹窗
+    onEditTemplate(props) {
+      this.itemDialogTitle = "编辑";
+      this.itemDialogVisible = 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,
+          })
+        );
+      });
+    },
+    // 提交授权
+    onSubmitAuth() {
+      let templateId = this.authQueryParams.id;
+      let roleIdList = this.authRoleList;
+      auth({ templateId, roleIdList }).then((res) => {
+        let { code } = res;
+        if (code == 200) {
+          this.authDialogVisible = false;
+          this.$message.success("授权成功");
+        }
+      });
+    },
+    // 复制编辑模板
+    onCopyTemplate(props) {
+      this.itemDialogTitle = "复制";
+      this.itemDialogVisible = 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,
+          })
+        );
+      });
+    },
+
+    // 删除模板row
+    onRemoveTemplateRow(props) {
+      let { code } = props;
+      this.form2.sysTemplateItemList = this.form2.sysTemplateItemList.filter(
+        (item) => item.code !== code
+      );
+    },
+    // 移动模板row
+    onMoveTemplateRow(direction, index1) {
+      let index2 = 0;
+      let swapArr = (arr, index1, index2) => {
+        arr[index1] = arr.splice(index2, 1, arr[index1])[0];
+        return arr;
+      };
+      index2 = direction === "top" ? index1 - 1 : index1 + 1;
+      this.form2.sysTemplateItemList = swapArr(
+        this.form2.sysTemplateItemList,
+        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"
+            :disabled="selectionTableData.length !== 1"
+            @click="onCopyTemplate(selectionTableData[0])"
+            >复制</el-button
+          >
+          <el-button size="small">导入</el-button>
+          <el-button size="small">导出</el-button>
+        </div>
+      </el-header>
+      <el-main>
+        <el-table :data="tableData" @selection-change="onSelectionChange">
+          <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="onAuthTemplate(scope.row)"
+                size="small"
+              >
+                授权
+              </el-button>
+              <el-button
+                @click.native.prevent="onEditTemplate(scope.row)"
+                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-dialog
+      width="75%"
+      destroy-on-close
+      :title="itemDialogTitle"
+      :visible.sync="itemDialogVisible"
+    >
+      <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
+                      :disabled="scope.$index === 0"
+                      @click.native.prevent="
+                        onMoveTemplateRow('top', scope.$index)
+                      "
+                      icon="el-icon-top"
+                      circle
+                    >
+                    </el-button>
+                    <el-button
+                      :disabled="
+                        scope.$index === form2.sysTemplateItemList.length - 1
+                      "
+                      @click.native.prevent="
+                        onMoveTemplateRow('bottom', scope.$index)
+                      "
+                      icon="el-icon-bottom"
+                      circle
+                    >
+                    </el-button>
+                    <el-button
+                      @click.native.prevent="onRemoveTemplateRow(scope.row)"
+                      icon="el-icon-remove"
+                      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">
+        <el-button @click="itemDialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="itemDialogVisible = false"
+          >确 定</el-button
+        >
+      </div>
+    </el-dialog>
+    <el-dialog
+      width="fit-content"
+      destroy-on-close
+      title="君权孙授"
+      :visible.sync="authDialogVisible"
+    >
+      <el-transfer
+        v-model="authRoleList"
+        :data="roleList"
+        :titles="['未授权', '已授权']"
+      >
+        <template #left-footer>
+          <el-pagination :total="roleTotal" layout="prev, pager, next">
+          </el-pagination>
+        </template>
+      </el-transfer>
+      <div slot="footer">
+        <el-button @click="authDialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="onSubmitAuth">确 定 </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;
+}
+.el-transfer .el-transfer-panel__footer {
+  display: flex;
+  align-items: center;
+}
+</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,8 +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.13.47:8000/drp-admin`, //本地
+        target: `http://172.16.63.202:8000/drp-admin`, //测试
         changeOrigin: true,
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API]: ''