角色模块完善

src/api/user.js

@@ -141,6 +141,14 @@ export function deleteRole(id) {
   })
 }
 
+// 根据id获取角色详细信息
+export function getRoleById(id) {
+  return request({
+    url: '/sys/role/'+id,
+    method: 'get',
+  })
+}
+
 // 获取所有目录菜单树
 export function getPermissionTreeAll(params) {
   return request({

src/views/culturalRelic/components/InfoEditDialog.vue

@@ -121,14 +121,20 @@
               </el-cascader>
             </el-form-item>
             <el-form-item label="馆藏介绍" :label-width="formLabelWidth">
-              <el-input
+              <!-- <el-input
                 type="textarea"
                 placeholder="请输入馆藏介绍"
                 v-model="dialogForm.intro"
                 maxlength="300"
                 show-word-limit
               >
-              </el-input>
+              </el-input> -->
+              <quill-editor
+                ref="myQuillEditor"
+                v-model="dialogForm.intro"
+                :options="editorOption"
+                class=".editor"
+              />
             </el-form-item>
             <el-form-item label="关联文献" :label-width="formLabelWidth">
               <el-select
@@ -206,7 +212,7 @@
             <el-form-item label="文物图片" :label-width="formLabelWidth">
               <ManualUploader
                 :files="images"
-                :fileLimit="6"
+                :fileLimit="20"
                 :fileSize="50"
                 listType="picture-card"
                 :fileType="['png', 'jpeg', 'jpg']"
@@ -264,10 +270,12 @@ import ManualUploader from "@/components/Uploader/ManualUploader.vue";
 import { mapGetters } from "vuex";
 import { uploadV1 } from "@/utils/file";
 import { deleteFiles } from "@/api/file";
+import { quillEditor } from "vue-quill-editor";
 export default {
   name: "InfoEditDialog",
   components: {
     ManualUploader,
+    quillEditor,
   },
   props: {
     visible: {
@@ -335,6 +343,10 @@ export default {
         // 回填馆藏单位
         if (this.dialogForm.deptId) {
           this.dialogForm.deptId = [this.dialogForm.deptId];
+        } else {
+          // 设置默认值为当前用户的信息
+          const { deptId, regionCode } = this.userInfo;
+          this.dialogForm.deptId = deptId;
         }
       },
       immediate: true,
@@ -342,6 +354,24 @@ export default {
     },
   },
   data() {
+    // 工具栏配置
+    const toolbarOptions = [
+      ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
+      ["blockquote", "code-block"], // 引用  代码块-----['blockquote', 'code-block']
+      [{ header: 1 }, { header: 2 }], // 1、2 级标题-----[{ header: 1 }, { header: 2 }]
+      [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
+      [{ script: "sub" }, { script: "super" }], // 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
+      [{ indent: "-1" }, { indent: "+1" }], // 缩进-----[{ indent: '-1' }, { indent: '+1' }]
+      [{ direction: "rtl" }], // 文本方向-----[{'direction': 'rtl'}]
+      [{ size: ["small", false, "large", "huge"] }], // 字体大小-----[{ size: ['small', false, 'large', 'huge'] }]
+      [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题-----[{ header: [1, 2, 3, 4, 5, 6, false] }]
+      [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }]
+      [{ font: [] }], // 字体种类-----[{ font: [] }]
+      [{ align: [] }], // 对齐方式-----[{ align: [] }]
+      ["clean"], // 清除文本格式-----['clean']
+      // ["image", "video"], // 链接、图片、视频-----['link', 'image', 'video']
+    ];
+
     return {
       dialogForm: {
         ...this.form,
@@ -376,6 +406,17 @@ export default {
         children: "children",
         checkStrictly: true, //单选选择任意一级选项
       },
+      //富文本编辑器配置
+      editorOption: {
+        //  富文本编辑器配置
+        modules: {
+          //工具栏定义的
+          toolbar: toolbarOptions,
+        },
+        //主题
+        theme: "snow",
+        placeholder: "请输入馆藏介绍",
+      },
     };
   },
   async created() {
@@ -519,8 +560,8 @@ export default {
         }
       });
       if (!that.dialogForm.crId) {
-        const { deptId, regionCode } = this.userInfo;
-        const params = { ...this.dialogForm, deptId, regionCode };
+        // const { deptId, regionCode } = this.userInfo;
+        const params = { ...this.dialogForm };
         params.literature = this.literatureValues.join(",");
         params.status = this.dialogForm.status ? 1 : 0;
         // 处理年份

src/views/culturalRelic/config.js

@@ -46,13 +46,13 @@ export const title = [{
   label: "所属地",
   columnAlign: 'center',
 },
-{
-  prop: "intro",
-  label: "馆藏介绍",
-  columnAlign: 'center',
-  showOverFlowToolTip: true,
-  width: 120,
-},
+// {
+//   prop: "intro",
+//   label: "馆藏介绍",
+//   columnAlign: 'center',
+//   showOverFlowToolTip: true,
+//   width: 120,
+// },
 
 {
   prop: "themeWord",

src/views/display/components/InfoEditDialog.vue

@@ -427,7 +427,7 @@ export default {
         },
         //主题
         theme: "snow",
-        placeholder: "请输入单元介绍",
+        placeholder: "请输入展览介绍",
       },
       orgTreeData: [],
       optionProps: {

src/views/display/components/templates/BlueStyle.vue

@@ -712,7 +712,8 @@ $blue: #2069c4;
             .imagesVo-image-container {
               // position: relative;
               .img-container {
-                height: 280px;
+                // height: 280px;
+                height: 100%;
                 width: 100%;
                 img {
                   width: 100%;
@@ -916,53 +917,65 @@ $blue: #2069c4;
         background-size: 1%;
         padding: 50px 0;
         .el-col {
-          &:first-child {
-            .img-container {
-              width: 100%;
-              height: 460px;
-              position: relative;
+          .img-container {
+            width: 100%;
+            height: 460px;
+            position: relative;
 
-              .cr-name-intro {
-                width: 100%;
-                height: 100%;
-                position: absolute;
-                left: 0;
-                top: 0;
-                padding: 100px 28px 50px;
+            .cr-name-intro {
+              width: 100%;
+              height: 100%;
+              position: absolute;
+              left: 0;
+              top: 0;
+              padding: 100px 28px 50px;
 
-                background-image: linear-gradient(
-                  to top,
-                  rgba(0, 0, 0, 0.8),
-                  rgba(0, 0, 0, 0.1)
-                );
-                .cr-name {
-                  font-size: 48px;
-                  font-weight: bold;
-                  color: #ffffff;
-                  text-align: center;
-                  margin-bottom: 40px;
-                }
-                .cr-intro {
-                  font-size: 16px;
-                  font-weight: 400;
-                  color: #ccc;
-                  text-indent: 32px;
-                  line-height: 40px;
-                  overflow: hidden;
-                  text-overflow: ellipsis;
-                  display: -webkit-box;
-                  -webkit-line-clamp: 5;
-                  -webkit-box-orient: vertical;
-                }
+              background-image: linear-gradient(
+                to top,
+                rgba(0, 0, 0, 0.8),
+                rgba(0, 0, 0, 0.1)
+              );
+              .cr-name {
+                font-size: 48px;
+                font-weight: bold;
+                color: #ffffff;
+                text-align: center;
+                margin-bottom: 40px;
+                transition: all 0.5s ease;
               }
-              img {
-                width: 100%;
-                height: 100%;
+              .cr-intro {
+                font-size: 16px;
+                font-weight: 400;
+                color: #ccc;
+                text-indent: 32px;
+                line-height: 40px;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                display: -webkit-box;
+                -webkit-line-clamp: 5;
+                -webkit-box-orient: vertical;
               }
             }
+            img {
+              width: 100%;
+              height: 100%;
+            }
           }
+
           &:not(&:first-child) {
             margin-bottom: 30px;
+            &:hover {
+              .cr-name {
+                opacity: 1;
+              }
+            }
+            .cr-name {
+              font-size: 18px;
+              opacity: 0;
+            }
+            .cr-intro {
+              display: none;
+            }
             .img-container {
               height: 214px;
             }

src/views/role/components/InfoEditDialog.vue

@@ -35,9 +35,11 @@
         </el-form-item>
         <el-form-item label="权限" :label-width="formLabelWidth">
           <el-tree
-            :data="permissionTree"
+            ref="tree"
+            :data="dialogForm.permissionRespNodes"
             show-checkbox
             :props="props"
+            node-key="id"
             @check-change="handleCheckChange"
           >
           </el-tree>
@@ -54,7 +56,12 @@
 </template> 
 
 <script>
-import { addRole, editRole, getPermissionTreeAll,getPermissionById } from "@/api/user";
+import {
+  addRole,
+  editRole,
+  getPermissionTreeAll,
+  getPermissionById,
+} from "@/api/user";
 export default {
   name: "InfoEditDialog",
   props: {
@@ -72,23 +79,24 @@ export default {
       if (this.dialogForm.id) {
         return "修改角色信息";
       } else {
-        return "添加新角色";
+        return "新建角色";
       }
     },
   },
   watch: {
     form: {
       handler: function (value) {
-        debugger
+        // debugger
         let that = this;
         that.dialogForm = JSON.parse(JSON.stringify(value));
         // 编辑状态
         if (that.dialogForm.id) {
           // 回填状态
           that.status = Boolean(Number(that.dialogForm.status));
-
-          // let perm = await getPermissionById
-          that.getPer()
+          that.setPer();
+          // debugger
+        } else {
+          that.getDefaultTree();
         }
       },
       immediate: true,
@@ -109,7 +117,7 @@ export default {
       status: false,
       files: [], //文献文件
       dialogVisible: false,
-      permissionTree: [],
+      // permissionTree: [],
       props: {
         value: "id",
         label: "title",
@@ -118,12 +126,11 @@ export default {
       },
     };
   },
-  async created() {
-    let res = await getPermissionTreeAll();
-    this.permissionTree = res.data
-    console.log(this.permissionTree);
-    // console.log(res);
-  },
+  // async created() {
+
+  //   console.log(this.permissionTree);
+  //   // console.log(res);
+  // },
   methods: {
     handlePreview({ type, file }) {
       console.log(type, file);
@@ -141,18 +148,34 @@ export default {
       let params = JSON.parse(JSON.stringify(this.dialogForm));
       // 修改状态
       params.status = this.status ? 1 : 0;
+      let checkedIds = this.$refs.tree.getCheckedKeys(true); //true代表只获取叶子结点
+      return;
+      console.log(checkedIds);
+      console.log(params);
+      travesePer(params.permissionRespNodes);
+      function travesePer(arr) {
+        // debugger
+        arr.map((item) => {
+          item.checked = checkedIds.indexOf(item.id) !== -1;
+          if (item.children && item.children.length > 0) {
+            travesePer(item.children);
+          }
+        });
+      }
+      console.log(params);
+
       if (params.literatureId) {
-        let res = await editRole(params);
-        if (res.code == 0) {
-          this.$message.success("修改成功！");
-          this.reload();
-        }
+        // let res = await editRole(params);
+        // if (res.code == 0) {
+        //   this.$message.success("修改成功！");
+        //   this.reload();
+        // }
       } else {
-        let res = await addRole(params);
-        if (res.code == 0) {
-          this.$message.success("添加成功！");
-          this.reload();
-        }
+        // let res = await addRole(params);
+        // if (res.code == 0) {
+        //   this.$message.success("添加成功！");
+        //   this.reload();
+        // }
       }
     },
     reload() {
@@ -174,11 +197,33 @@ export default {
       console.log(data, checked, indeterminate);
     },
 
-    async getPer(){
-      let res = await getPermissionById(this.dialogForm.id)
-      debugger
-      console.log(res);
-    }
+    setPer() {
+      let checkedIds = [];
+      getCheckedIds(this.dialogForm.permissionRespNodes);
+      function getCheckedIds(arr) {
+        if (arr.length > 0) {
+          arr.map((item) => {
+            if (item.checked) {
+              checkedIds.push(item.id);
+            } else if (item.children) {
+              getCheckedIds(item.children);
+            }
+          });
+        }
+      }
+      setTimeout(() => {
+        if (checkedIds.length > 0) {
+          this.$refs["tree"].setCheckedKeys(checkedIds);
+        }
+      }, 100);
+    },
+
+    async getDefaultTree() {
+      let res = await getPermissionTreeAll();
+      // this.permissionTree = res.data;
+      this.$set(this.dialogForm, "permissionRespNodes", res.data);
+      // debugger
+    },
   },
 };
 </script>

src/views/role/config.js

@@ -25,7 +25,7 @@ export const title = [{
 },
 {
   prop: "remark",
-  label: "描述",
+  label: "备注",
   columnAlign: 'center',
 },
 

src/views/role/index.vue

@@ -59,9 +59,9 @@
 import TablePage from "@/components/Table/TablePage.vue";
 import TableOperation from "@/components/Table/TableOperation.vue";
 import { title, operates, operations } from "./config";
-import { getRoleList } from "@/api/user";
+import { getRoleList, getRoleById } from "@/api/user";
 import InfoEditDialog from "./components/InfoEditDialog";
-import SearchBar from "@/components/SearchBar"
+import SearchBar from "@/components/SearchBar";
 
 export default {
   components: {
@@ -106,12 +106,10 @@ export default {
       ],
       drawerVisible: false,
       form: {
-        name: "", //名称
-        authors: "", //作者
-        date: "", //日期（出版年份、发布日期）
-        source: "", //文献来源
-        status: false, //上下架状态
-        remark: "", //备注
+        name:'',
+        remark:'',
+        status: 0,
+        permissionRespNodes:[] 
       },
     };
   },
@@ -171,36 +169,21 @@ export default {
       }
     },
     async handleOperation(value, row) {
-      console.log("handleOperation", value, row);
       switch (value.type) {
         case "add":
           this.drawerVisible = true;
-          break;
-        case "view":
-          if (row.files && row.files.length > 0 && row.files[0].url) {
-            previewFile(row.files[0].url, row.name);
-          } else {
-            this.$message.info("暂无文献附件！");
-          }
-          break;
-        case "download":
-          if (row.files && row.files.length > 0 && row.files[0].url) {
-            let url = '/files'+row.files[0].url.split('files')[1]
-            downloadBlob(url, row.name, "pdf");
-          } else {
-            this.$message.info("暂无文献！");
-          }
+          this.form = {
+            status: 0,
+          };
           break;
         case "edit":
-          this.form = row;
+          const { id } = row;
+          let res = await getRoleById(id);
+          this.form = res.data;
           this.drawerVisible = true;
+
           break;
         case "delete":
-          let deleteRes = await deleteLt([row.literatureId]);
-          if (deleteRes.code == 0) {
-            this.$message.success("删除成功！");
-            this.loadData();
-          }
           break;
       }
     },
@@ -237,6 +220,7 @@ export default {
       this.drawerVisible = false;
       this.form = {
         status: true,
+        permissionRespNodes:[]
       };
     },
   },
@@ -253,7 +237,7 @@ export default {
 .pagination {
   margin: 16px;
 }
-.el-button{
+.el-button {
   margin-bottom: 22px;
 }
 ::v-deep .el-card__header {