1 . 完善模板管理

src/api/system/table-template.js

@@ -19,3 +19,21 @@ export function item(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/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

@@ -1,22 +1,39 @@
 <script>
 // import LabelTree from "./lable-tree.vue";
 // import TemplateTable from "./template-table.vue";
-import { list, item } from "@/api/system/table-template";
+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,
-      dialogVisible: 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",
@@ -72,15 +89,11 @@ export default {
           label: "更新时间",
           showOverflowTooltip: true,
         },
-        // {
-        //   prop: "sysTemplateItemList",
-        //   label: "zv",
-        //   showOverflowTooltip: true,
-        // },
       ],
     };
   },
   methods: {
+    // 搜索模板列表
     fetchList() {
       list(this.from, this.page).then((res) => {
         let { total, rows } = res;
@@ -88,19 +101,76 @@ export default {
         this.total = total;
       });
     },
+    // 查询模板列表
     onSearch() {
       this.pageNum = 1;
       this.fetchList();
     },
+    //
     onSizeChnage() {
       this.pageNum = 1;
       this.fetchList();
     },
+    //
     onCurrentChange() {
       this.fetchList();
     },
-    onLookRow(props) {
-      this.dialogVisible = true;
+    // 选择待复制模板
+    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;
@@ -115,14 +185,30 @@ export default {
         );
       });
     },
+
+    // 删除模板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;
-
-      console.log(index1, index2);
+      this.form2.sysTemplateItemList = swapArr(
+        this.form2.sysTemplateItemList,
+        index1,
+        index2
+      );
     },
   },
+
   created() {
     this.fetchList();
   },
@@ -163,20 +249,26 @@ export default {
         </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">
-          <!-- <el-table-column
+        <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>
           <el-table-column
             v-for="column in columns"
             :key="column.prop"
@@ -188,13 +280,13 @@ export default {
           <el-table-column fixed="right" label="操作" width="225">
             <template slot-scope="scope">
               <el-button
-                @click.native.prevent="onLookRow(scope.row)"
+                @click.native.prevent="onAuthTemplate(scope.row)"
                 size="small"
               >
-                查看
+                授权
               </el-button>
               <el-button
-                @click.native.prevent="deleteRow(scope.$index, tableData)"
+                @click.native.prevent="onEditTemplate(scope.row)"
                 size="small"
               >
                 修改
@@ -222,15 +314,11 @@ export default {
         </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"
+      :title="itemDialogTitle"
+      :visible.sync="itemDialogVisible"
     >
       <el-row :gutter="20">
         <el-form size="mini" :model="form2" label-position="top">
@@ -309,7 +397,7 @@ export default {
                 <el-table-column fixed="right" label="操作" width="150">
                   <template slot-scope="scope">
                     <el-button
-                      v-if="scope.$index !== 0"
+                      :disabled="scope.$index === 0"
                       @click.native.prevent="
                         onMoveTemplateRow('top', scope.$index)
                       "
@@ -318,8 +406,8 @@ export default {
                     >
                     </el-button>
                     <el-button
-                      v-if="
-                        scope.$index !== form2.sysTemplateItemList.length - 1
+                      :disabled="
+                        scope.$index === form2.sysTemplateItemList.length - 1
                       "
                       @click.native.prevent="
                         onMoveTemplateRow('bottom', scope.$index)
@@ -328,6 +416,12 @@ export default {
                       circle
                     >
                     </el-button>
+                    <el-button
+                      @click.native.prevent="onRemoveTemplateRow(scope.row)"
+                      icon="el-icon-remove"
+                      circle
+                    >
+                    </el-button>
                   </template>
                 </el-table-column>
               </el-table>
@@ -343,13 +437,34 @@ export default {
           </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"
+      <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>
 
@@ -404,4 +519,8 @@ export default {
   justify-content: end;
   align-items: center;
 }
+.el-transfer .el-transfer-panel__footer {
+  display: flex;
+  align-items: center;
+}
 </style>

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

@@ -1,125 +0,0 @@
-<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>