政策法规资料模块

2023-10-26 13:37:44 +08:00
parent 63a325d8b9
commit 2755663693
8 changed files with 1739 additions and 2 deletions
@@ -0,0 +1,383 @@
+<template>
+  <div class="main">
+    <!-- 搜索区 -->
+    <div class="search-area">
+      <el-form :modal="searchForm" :inline="true" class="label-input-form">
+        <el-formItem label="1级资料分类" prop="firstType" class="search-item">
+          <el-select v-model="searchForm.firstType"
+                     placeholder="请选择1级资料分类"
+                     clearable>
+            <el-option
+                v-for="opt in dict.firstMaterialType"
+                :key="opt.value"
+                :value="!opt.value ? '' : opt.value" :label="opt.label"
+            >
+              {{ opt.label }}
+            </el-option>
+          </el-select>
+        </el-formItem>
+        <el-formItem label="2级资料分类" prop="secondType" class="search-item">
+          <el-select v-model="searchForm.secondType"
+                     placeholder="请选择2级资料分类"
+                     clearable>
+            <el-option
+                v-for="opt in dict.secondMaterialType"
+                :key="opt.value"
+                :value="!opt.value ? '' : opt.value" :label="opt.label"
+            >
+              {{ opt.label }}
+            </el-option>
+          </el-select>
+        </el-formItem>
+        <el-formItem label="资料标题" prop="name" class="search-item">
+          <el-input v-model="searchForm.name" clearable placeholder="请输入资料标题" :maxlength="100" @keyup.enter.native="onSearch"/>
+        </el-formItem>
+        <el-formItem label="上传时间" prop="uploadTime" class="search-item">
+          <el-date-picker
+              value-format="yyyy-MM-dd"
+              format="yyyy-MM-dd"
+              type="date"
+              clearable
+              :editable="true"
+              placeholder="请选择上传时间"
+              v-model="searchForm.uploadTime"
+          >
+          </el-date-picker>
+        </el-formItem>
+        <el-form-item class="search-item btn-box">
+          <el-button
+              type="primary"
+              size="mini"
+              class="common-button-primary"
+              v-btn-permission="'17af98fabcda36aae6a8c3915f48b31a'"
+              @click="onSearch">
+            查询
+          </el-button>
+          <el-button
+              size="mini"
+              class="common-button-default"
+              v-btn-permission="'aa73f0af9e46aed8bb9fba7340a6b739'"
+              @click="onClear">清空
+          </el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    <!--按钮区-->
+    <div class="action-bar">
+      <el-button class="common-button-default export-button"
+                 size="mini"
+                 title="不勾选时默认导出所有筛选项；勾选时仅导出勾选项"
+                 v-btn-permission="'cca3e020321a3443f38435fd86bb62f0'"
+                 @click="exportData"><i class="iconfont">&#xe6e9;</i>导出
+      </el-button>
+      <el-button class="common-button-default in-button"
+                 size="mini"
+                 v-btn-permission="'11f125d942b845db01d077a8021bac10'"
+                 @click="addImportModal"><i class="iconfont">&#xe6de;</i>导入
+      </el-button>
+      <el-button class="common-button-default in-button"
+                 size="mini"
+                 v-btn-permission="'be26878aa645671c5b16b38c2d44b4eb'"
+                 @click="handleMoudel"><i class="iconfont">&#xe6de;</i>模板下载
+      </el-button>
+      <el-button
+          type="primary"
+          size="mini"
+          class="common-button-primary add-button"
+          v-btn-permission="'3c0bc511645234732bc7e4ea6b7103c6'"
+          @click="openDrawer('add')">
+        <i class="el-icon-plus"></i>新增
+      </el-button>
+    </div>
+    <!-- 表格 -->
+    <div class="content">
+      <el-table
+          ref="tableRef"
+          :data="data"
+          tooltip-effect="dark"
+          style="width:100%;"
+          border
+          class="drag-table"
+          @sort-change="sortChange"
+          :header-cell-style="{background: '#e8e8e8', color: '#333333', fontSize: '16px', fontWeight: 'bold', height: '48px', padding: 0}"
+          @selection-change="selectionChange"
+      >
+        <el-table-column
+            type="selection"
+            width="55"
+            align="center">
+        </el-table-column>
+        <el-table-column
+            prop="firstTypeName"
+            label="1级资料类别"
+            align="center"
+            sortable="custom"
+        >
+        </el-table-column>
+        <el-table-column
+            prop="secondTypeName"
+            label="2级资料类别"
+            align="center"
+            sortable="custom"
+        >
+        </el-table-column>
+        <el-table-column
+            prop="name"
+            label="资料名称"
+            align="center"
+            sortable="custom"
+        >
+          <template slot-scope="{row, column, $index}">
+            <a v-if="hasViewPermission(row)" class="table-jump" style="color: #2d8cf0" @click="handlePreview(row.id)">{{ row.name }}</a>
+            <span v-else>{{ row.name }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+            prop="uploadTime"
+            label="上传时间"
+            align="center"
+            sortable="custom"
+        >
+        </el-table-column>
+        <el-table-column
+            prop="action"
+            label="操作"
+            align="center"
+        >
+          <template slot-scope="scope">
+            <a class="table-jump" v-btn-permission="'5ba6c5466021b86fc9d00b25fd46d5c6'" style="color: #2d8cf0" @click="openDrawer('edit', scope.row)">编辑</a>
+            <a class="table-jump" v-btn-permission="'ead39a6339efe11b1077982ff12fd3cd'" style="color: #f56c6c;margin-left: 10px" @click="onDelete(scope.row.id)">删除</a>
+          </template>
+        </el-table-column>
+      </el-table>
+      <pagination :page="searchForm.page" :total="total" @pageChange="pageChange" @pageSizeChange="pageSizeChange"></pagination>
+      <loading :loading="loading">数据获取中...</loading>
+    </div>
+    <!-- 新增编辑 -->
+    <editDrawer ref="editDrawerRef" :dict="dict" @load="getData"></editDrawer>
+    <!-- 导入 -->
+    <ImportZip :visible.sync="importModalShowFlag" :action="importExcelUrl"></ImportZip>
+    <!-- 导出 -->
+    <ExportDialog ref="exportDialogRef" @exportName="handleExport"></ExportDialog>
+  </div>
+</template>
+
+<script>
+import editDrawer from "./editDrawer";
+import ImportZip from '@/components/hzwlComponents/importZip'
+import ExportDialog from '@/components/hzwlComponents/exportDialog'
+
+export default {
+  name: "RegulatoryMaterialsMain",
+  components: {
+    editDrawer,
+    ImportZip,
+    ExportDialog
+  },
+  props: {
+    treeNodeId: {
+      type: String
+    }
+  },
+  data () {
+    return {
+      url: {
+        page: 'lawss/sarLawsInformation/page',
+        delete: 'lawss/sarLawsInformation/deleteLawsInformation',
+      },
+      searchForm: {},
+      dict: {},
+      // 列表
+      data: [],
+      total: 0,
+      loading: false,
+      selectedList: [],
+      // 新增编辑
+      showDrawer: false,
+      //  导入
+      importModalShowFlag: false,
+      importExcelUrl: '',
+    }
+  },
+  mounted() {
+    this.getDicTypeListCode()
+    this.getData()
+  },
+  watch: {
+    treeNodeId: {
+      handler: function (val, oldVal) {
+        this.getData()
+      },
+      deep: true
+    }
+  },
+  methods: {
+    userToId (userStr) {
+      return (userStr && userStr !== '') ? userStr.split(',').map(item => item.split('(')[1].split(')')[0]) : []
+    },
+    hasViewPermission(row) {
+      const userId = this.$store.getters.userInfo.userId
+      // 未设置可查看者 所有用户 可查看
+      if (!row.viewableBy || row.viewableBy === '') {
+        return true
+      } else {
+        // 设置了查看者 可查看者可查看
+        if (this.userToId(row.viewableBy).find(item => item === userId)) {
+          return true
+        }
+        // 可下载者需要查看权限
+        // 未设置可下载者 创建人和审批人可查看
+        if (!row.downloadableBy || row.downloadableBy === '') {
+          if (this.userToId(row.createAndApproveBy).find(item => item === userId)) {
+            return true
+          }
+        } else {
+          // 设置可下载者 可下载者可查看
+          if (this.userToId(row.downloadableBy).find(item => item === userId)) {
+            return true
+          }
+        }
+      }
+      return false
+    },
+
+    getDicTypeListCode () {
+      this.$http._getData('sys/dictype/getDicTypeListCode').then(res => {
+        this.dict = { ...res.data }
+      })
+    },
+    async getData () {
+      this.searchForm.pageSize = this.searchForm.pageSize || this.$store.getters.userInfo.configContent
+      this.searchForm.page = this.searchForm.page || 1
+      this.searchForm.treeNodeId = this.treeNodeId
+      let params = { ...this.searchForm}
+      const res = await this.$http._getData(this.url.page, params, {_this:this,loading: 'loading'})
+      if (res.ok && res.data) {
+        this.data = res.data.list
+        this.total = res.data.count
+      }
+    },
+    onSearch(){
+      this.getData()
+    },
+    onClear () {
+      this.$set(this, 'searchForm', {})
+      this.getData()
+    },
+
+    // 选择项勾选改变
+    selectionChange (data) {
+      this.selectedList = []
+      for (let i = 0; i < data.length; i++) {
+        this.selectedList.push(data[i].id)
+      }
+    },
+    // 表格排序
+    sortChange({ column, prop, order }) {
+      this.searchForm.sortField = prop
+      this.searchForm.sortMode = 'asc'
+      if (order === 'descending') {
+        this.searchForm.sortMode = 'desc'
+      }
+      if (!order) {
+        this.searchForm.sortField = ''
+        this.searchForm.sortMode = ''
+      }
+      this.getData()
+    },
+    // 分页点击后方法
+    pageChange (page) {
+      this.searchForm.page = page
+      this.getData()
+    },
+    // 分页每页显示数改变后方法
+    pageSizeChange (pageSize) {
+      this.searchForm.pageSize = pageSize
+      this.getData()
+    },
+    // 点击查看
+    handlePreview(id) {
+      let routeUrl = this.$router.resolve({
+        name: 'regulatoryMaterialsDetail',
+        params: { id }
+      })
+      window.open(routeUrl.href, '_blank')
+    },
+
+    // 导出
+    exportData () {
+      this.$refs.exportDialogRef.openModel()
+    },
+    handleExport (exportName) {
+      alert('导出' + exportName)
+      const params = {
+        ...this.form,
+        exportName: exportName,
+        userId: this.$store.getters.userInfo.userId,
+        exportIds: this.ids.join(',')
+      }
+      let query = '?'
+      for(let i in params){
+        if (params[i] && params[i]!=='') {
+          query = query + i + '=' + params[i] + '&'
+        }
+      }
+      query = query.slice(0,-1)
+      window.open('/api/esRevisePlan/es-revise-plan/exportEsRevisePlanInfoExcel' + query)
+      this.$refs.exportDialogRef.cancel()
+      this.$message.success('导出信息成功')
+    },
+    // 导入
+    addImportModal() {
+      alert('导入')
+      this.importModalShowFlag = true
+      this.importExcelUrl = '/api/lawss/sarBussionessStand/importSarBussionessStandFile?'+ 'userId=' + this.$store.getters.userInfo.userId
+    },
+    // 模板下载
+    handleMoudel(){
+      alert('模板下载')
+      window.open('/api/lawss/sarBussionessStand/exportTemplateFile?fileName=企业标准导入模板')
+    },
+    // 新增编辑
+    openDrawer (type, row) {
+      this.showDrawer = false
+      switch (type) {
+        case 'add':
+          this.$refs.editDrawerRef.add(this.treeNodeId)
+          break
+        case 'edit':
+          this.$refs.editDrawerRef.edit(row.id)
+          break
+      }
+    },
+    onDelete (id) {
+      this.$confirm('确认删除这些数据?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+        confirmButtonClass: 'common-button-primary',
+        roundButton: true
+      }).then(() => {
+        this.$http._deleteData(this.url.delete, { id }).then(res => {
+          if (res.ok) {
+            this.$message.success('删除成功')
+            this.getData()
+          }
+        })
+      })
+    },
+  }
+}
+</script>
+
+<style scoped lang="less">
+.main{
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  .content{
+    flex: 1;
+    position: relative;
+  }
+}
+</style>
@@ -0,0 +1,343 @@
+<template>
+  <div style="width: 100%" class="wrapper">
+    <el-input
+        placeholder="输入树状图体系"
+        v-model="filterText">
+    </el-input>
+    <div class="tree">
+      <el-card style="height: 100%;padding-right: 120px;overflow-y:auto">
+        <el-tree
+            ref="tree"
+            node-key="id"
+            class="tree-line"
+            icon-class="icon-tree"
+            :indent="0"
+            :props="props"
+            :data="treeList"
+            :default-expanded-keys="['1716336011358269441']"
+            highlight-current
+            @node-click="treeClick"
+            :filter-node-method="filterNode">
+              <span class="custom-tree-node" slot-scope="{ node, data }" @mouseenter="mouseenter(data)" @mouseleave="mouseleave(data)">
+              <span :class="data.children.length !== 0 ? 'is-show' : 'is-leaf-none'"></span>
+              <span style="font-size:12px"> {{ node.label }} </span>
+              <span>
+                <el-button
+                    type="text"
+                    size="mini"
+                    v-show="data.show"
+                    v-btn-permission="'a7fee733685bf16abb9dffb4e423d632'"
+                    @click="() => append(data)">
+                  新增
+                </el-button>
+                <el-button
+                    type="text"
+                    size="mini"
+                    v-show="data.show"
+                    v-btn-permission="'1e96ef8234a8f7a50cafab999e2e7bdf'"
+                    @click="() => update(data)">
+                  编辑
+                </el-button>
+                <el-button
+                    type="text"
+                    size="mini"
+                    v-show="data.showDel"
+                    v-btn-permission="'b6fa8bd927d679c28109d1c72f0d1d72'"
+                    @click="() => remove(node, data)">
+                  删除
+                </el-button>
+              </span>
+            </span>
+        </el-tree>
+      </el-card>
+    </div>
+    <el-drawer
+        :wrapperClosable="false"
+        :title="DrawerTitle"
+        :visible.sync="DrawerVisible"
+        size="800px"
+        :before-close="handleCancel"
+        label-width="130px"
+    >
+      <div class="demo-drawer-content">
+        <el-form :model="DrawerModel"
+                 ref="DrawerModelRef"
+                 :rules="DrawerRules"
+                 class="label-input-form"
+                 label-width="130px">
+          <el-row>
+            <el-col>
+              <el-form-item label="目录名称" prop="name" class="add-form-item">
+                <el-input v-model.trim="DrawerModel.name" placeholder="请输入目录名称" clearable></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col>
+              <el-form-item label="目录顺序" prop="sort" class="add-form-item">
+                <el-input v-model.number="DrawerModel.sort"
+                          number
+                          placeholder="请输入目录顺序"
+                          :maxlength="4"
+                          clearable></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+      </div>
+      <div class="demo-drawer-footer">
+        <el-button
+            class="common-button-primary"
+            icon="el-icon-check"
+            type="primary"
+            @click="handleSubmit">提交
+        </el-button>
+        <el-button
+            class="common-button-default"
+            icon="el-icon-close"
+            @click="handleCancel">取消
+        </el-button>
+      </div>
+    </el-drawer>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "RegulatoryMaterialsTree",
+  data(){
+    return {
+      treeList: [],
+      filterText: '',
+      props: {
+        label: 'name',
+        children: 'children'
+      },
+
+      // drawer
+      DrawerTitle: '',
+      DrawerVisible: false,
+      DrawerModel: {
+        name: '',
+        parentId: '',
+        sort: ''
+      },
+      DrawerRules: {
+        name: [
+          {required: true, message: '目录名称不能为空', trigger: 'change'}
+        ],
+        sort: [
+          {required: true, message: '目录顺序不能为空', trigger: 'change'}
+        ]
+      },
+
+      url: {
+        getTree: 'lawss/sarLawsInformation/tree/getTree',
+        addTreeNode: 'lawss/sarLawsInformation/tree/addTreeNode',
+        updateTreeNode: 'lawss/sarLawsInformation/tree/updateTreeNode',
+        deleteTreeNode: 'lawss/sarLawsInformation/tree/deleteTreeNode',
+      }
+    }
+  },
+  created() {
+    this.getMenuList()
+  },
+  watch: {
+    filterText(val) {
+      this.$refs.tree.filter(val);
+    },
+  },
+  methods: {
+    getMenuList () {
+      this.$http._getData(this.url.getTree).then(res => {
+        if (res.ok) {
+          this.treeList = res.data
+          this.$emit('treeClick', res.data[0])
+        }
+      })
+    },
+    filterNode(value, data) {
+      if (!value) return true;
+      return data.menuName.indexOf(value) !== -1;
+    },
+    treeClick (treeNode) {
+      this.$emit('treeClick', treeNode)
+    },
+    append(data) {
+      this.DrawerTitle = '新增目录'
+      this.DrawerModel.name = ''
+      this.DrawerModel.parentId = data.id
+      this.DrawerVisible = true
+    },
+    update(data) {
+      this.DrawerModel = data
+      this.DrawerTitle = '编辑目录'
+      this.DrawerVisible = true
+    },
+    remove(node, data) {
+      this.$confirm(data.children.length > 0 ? '该节点下有记录，是否删除？' : '是否删除菜单', '提示', {
+        confirmButtonText: '确定',
+        confirmButtonClass: 'common-button-primary',
+        cancelButtonText: '取消',
+        roundButton: true,
+        type: 'warning'
+      }).then(() => {
+        this.$http._deleteData(this.url.deleteTreeNode, { id: data.id }).then(res => {
+          if (res.ok) {
+            this.$message.success('删除成功')
+            this.getMenuList()
+          } else {
+            this.$message.warning(res.message)
+          }
+        })
+      }).catch(() => {
+        this.$message.info('已取消删除')
+      })
+    },
+    // 树节点鼠标移入移出
+    mouseenter(data){
+      this.$set(data, 'show', true)
+      if(data.parentId !== null){
+        this.$set(data, 'showDel', true)
+      }
+    },
+    mouseleave(data){
+      this.$set(data, 'show', false)
+      this.$set(data, 'showDel', false)
+    },
+
+    handleCancel () {
+      this.$refs.DrawerModelRef.resetFields()
+      this.DrawerModel = {
+        name: '',
+        parentId: '',
+        sort: ''
+      }
+      this.DrawerVisible = false
+    },
+    handleSubmit () {
+      this.$refs.DrawerModelRef.validate(valid => {
+        if (valid) {
+          let method = this.DrawerTitle === '新增目录' ? '_postData' : '_putData'
+          let url = this.DrawerTitle === '新增目录' ? this.url.addTreeNode : this.url.updateTreeNode
+          this.$http[method](url, this.DrawerModel).then(res => {
+            if (res.ok) {
+              this.$message.success('操作成功')
+              this.getMenuList()
+              this.handleCancel()
+            } else {
+              this.$message.warning(res.message)
+            }
+          })
+        }
+      })
+    },
+  }
+}
+</script>
+<style scoped lang="less">
+/deep/ .icon-tree {
+  margin:0  5px 0 10px;
+  position:relative;
+  background:url('~@/assets/images/shangqi/img/tree-add.png');
+  background-size:100% 100%;
+}
+/deep/ .expanded{
+  background:url('~@/assets/images/shangqi/img/tree-sub.png');
+  background-size:100% 100%;
+}
+/deep/ .is-leaf{
+  background-image:none;
+  background-size:100% 100%;
+}
+/deep/ .is-leaf-none{
+  position: relative;
+  display: inline-block;
+  width: 15px;
+  height: 15px;
+  background: url('~@/assets/images/shangqi/img/none-file-new.png');
+  background-size:100% 100%;
+}
+/deep/ .is-show{
+  position: relative;
+  display: inline-block;
+  width: 15px;
+  height: 15px;
+  background:url('~@/assets/images/shangqi/img/tree.png');
+  background-size:100% 100%;
+}
+
+/deep/.tree-line{
+   .el-tree-node {
+     position: relative;
+     padding-left: 0px; // 缩进量
+     line-height: 30px;
+   }
+   .el-tree-node__children {
+     padding-left: 16px; // 缩进量
+   }
+
+   // 竖线
+   .el-tree-node::before {
+     content: "";
+     height: 100%;
+     width: 1px;
+     position: absolute;
+     left: -3px;
+     top: -26px;
+     border-width: 1px;
+     border-left: 1px dashed #858990e0;
+   }
+   // 当前层最后一个节点的竖线高度固定
+   .el-tree-node:last-child::before {
+     height: 38px; // 可以自己调节到合适数值
+   }
+
+   // 横线
+   .el-tree-node::after {
+     content: "";
+     width: 11px;
+     height: 20px;
+     position: absolute;
+     left: -3px;
+     top: 12px;
+     border-width: 1px;
+     border-top: 1px dashed #858990e0;
+   }
+
+   // 去掉最顶层的虚线，放最下面样式才不会被上面的覆盖了
+   & > .el-tree-node::after {
+     border-top: none;
+   }
+   & > .el-tree-node::before {
+     border-left: none;
+   }
+
+   // 展开关闭的icon
+   .el-tree-node__expand-icon{
+     font-size: 16px;
+     // 叶子节点（无子节点）
+     &.is-leaf{
+       color: transparent;
+       // display: none; // 也可以去掉
+     }
+   }
+ }
+</style>
+<style scoped lang="less">
+.tree{
+  /deep/ .el-card__body {
+    padding: 0 !important;
+  }
+  .el-card {
+    width: 500px;
+    min-width: 2000px;
+    max-width: 100%;
+    /* min-width: min-content;*/
+  }
+  height: 95%;
+  width: 95%;
+  position: absolute;
+  left: 0;
+
+}
+
+</style>
@@ -0,0 +1,351 @@
+<template>
+  <el-drawer :title="title"
+             :visible="showDrawer"
+             :wrapperClosable="false"
+             @close="onClose"
+             size="1050px">
+    <div class="drawer-content">
+      <el-form
+          v-if="showDrawer && reloadForm"
+          ref="formRef"
+          :model="form"
+          :rules="rules"
+          class="label-input-form"
+      >
+        <el-col :span="24"><div class="divider-line">基础信息</div></el-col>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item prop="firstType" label-width="150px" class="add-form-item">
+              <template slot="label">1级资料分类</template>
+              <el-select :value="stringToArr(form.firstType)"
+                         @change="handleChange($event,'firstType')"
+                         multiple
+                         placeholder="请选择1级资料分类"
+                         clearable>
+                <el-option
+                    v-for="opt in dict.firstMaterialType"
+                    :key="opt.value"
+                    :value="opt.value" :label="opt.label"
+                >
+                  {{ opt.label }}
+                </el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item prop="thirdType" label-width="150px" class="add-form-item">
+              <template slot="label">3级资料分类</template>
+              <el-select :value="stringToArr(form.thirdType)"
+                         @change="handleChange($event,'thirdType')"
+                         multiple
+                         placeholder="请选择3级资料分类"
+                         clearable>
+                <el-option
+                    v-for="opt in dict.thirdMaterialType"
+                    :key="opt.value"
+                    :value="opt.value" :label="opt.label"
+                >
+                  {{ opt.label }}
+                </el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="资料名称" prop="name" label-width="150px" class="add-form-item">
+              <el-input v-model="form.name"
+                        placeholder="请输入资料名称"
+                        clearable></el-input>
+            </el-form-item>
+            <el-form-item label="作者" prop="author" label-width="150px" class="add-form-item">
+              <el-input v-model="form.author"
+                        placeholder="请输入作者"
+                        clearable></el-input>
+            </el-form-item>
+            <el-form-item label="资料说明" prop="description" label-width="150px" class="add-form-item">
+              <el-input v-model="form.description"
+                        placeholder="请输入资料说明"
+                        clearable></el-input>
+            </el-form-item>
+            <el-form-item label="可查看者" prop="viewableBy" label-width="150px" class="add-form-item">
+              <el-input
+                  clearable
+                  v-model="form.viewableBy"
+                  placeholder="选择可查看者"
+                  readonly
+                  @click.native="choice( '选择可查看者', form.viewableBy)">
+              </el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item prop="secondType" label-width="150px" class="add-form-item">
+              <template slot="label">2级资料分类</template>
+              <el-select :value="stringToArr(form.secondType)"
+                         @change="handleChange($event,'secondType')"
+                         multiple
+                         placeholder="请选择2级资料分类"
+                         clearable>
+                <el-option
+                    v-for="opt in dict.secondMaterialType"
+                    :key="opt.value"
+                    :value="opt.value" :label="opt.label"
+                >
+                  {{ opt.label }}
+                </el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item prop="fourthType" label-width="150px" class="add-form-item">
+              <template slot="label">4级资料分类</template>
+              <el-select :value="stringToArr(form.fourthType)"
+                         @change="handleChange($event,'fourthType')"
+                         multiple
+                         placeholder="请选择4级资料分类"
+                         clearable>
+                <el-option
+                    v-for="opt in dict.fourthMaterialType"
+                    :key="opt.value"
+                    :value="opt.value" :label="opt.label"
+                >
+                  {{ opt.label }}
+                </el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="资料归属部门" prop="department" label-width="150px" class="add-form-item">
+              <el-input v-model="form.department"
+                        placeholder="请输入资料归属部门"
+                        clearable></el-input>
+            </el-form-item>
+            <CustomDatePick
+                :config="{
+                  attrName: '上传时间',
+                  attrField: 'uploadTime'
+                }"
+                v-model="form.uploadTime"
+                disabled
+                placeholder="系统自动生成"
+            ></CustomDatePick>
+            <customFile
+                :config="{
+                  attrName: '资料文件',
+                  attrField: 'informationFile'
+                }"
+                v-model="form.informationFile"
+                :allowType="['.pdf', '.PDF', '.doc','.DOC', '.docx','.DOCX', '.pptx', '.PPTX', '.ppt', '.PPT', '.xls','.XLS', '.xlsx','.XLSX', '.pdg', '.PDG', '.zip']"
+            ></customFile>
+            <el-form-item label="可下载者" prop="viewableBy" label-width="150px" class="add-form-item">
+              <el-input
+                  clearable
+                  v-model="form.downloadableBy"
+                  placeholder="选择可下载者"
+                  readonly
+                  @click.native="choice( '选择可下载者', form.downloadableBy)">
+              </el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+    </div>
+    <div class="drawer-footer">
+      <el-button  icon="el-icon-check" type="primary" @click="onSubmit" :loading="isSubmit">提交</el-button>
+      <el-button  icon="el-icon-close" @click="onClose">取消</el-button>
+    </div>
+    <Role-tree
+        :is-title="choiceTitle"
+        :is-visible.sync="modalShowRoleFlag"
+        @checkedRole="checkedRole"
+        :nodeList="nodeList"
+    ></Role-tree>
+  </el-drawer>
+</template>
+
+<script>
+import CustomDatePick from '@/components/CustomFormComponents/DatePicker'
+import CustomFile from '@/components/CustomFormComponents/File'
+import SelectMultipleFormItem from '@/components/hzwlComponents/SelectMultipleFormItem'
+
+export default {
+  name: "editDrawer",
+  components: {
+    CustomDatePick,
+    CustomFile,
+    SelectMultipleFormItem
+  },
+  props: {
+    dict: {
+      type: Object
+    },
+  },
+  data (){
+    const rules = {
+      firstType: [
+        {required: true, message: '1级资料分类不能为空', trigger: 'change'}
+      ],
+      secondType: [
+        {required: true, message: '2级资料分类不能为空', trigger: 'change'}
+      ],
+      thirdType: [
+        {required: true, message: '3级资料分类不能为空', trigger: 'change'}
+      ],
+      fourthType: [
+        {required: true, message: '4级资料分类不能为空', trigger: 'change'}
+      ],
+      name: [
+        {required: true, type: 'string', message: '资料名称不能为空', trigger: 'change'},
+        {type: 'string', max: 500, message: '资料名称不能超过500个字符', trigger: 'change'}
+      ],
+      department: [
+        {required: true, type: 'string', message: '资料归属部门不能为空', trigger: 'change'},
+        {type: 'string', max: 500, message: '资料归属部门不能超过500个字符', trigger: 'change'}
+      ],
+      author: [
+        {type: 'string', max: 500, message: '资料归属部门不能超过500个字符', trigger: 'change'}
+      ],
+    }
+    const form = {
+      // 基础信息
+      firstType: '',
+      secondType: '',
+      thirdType: '',
+      fourthType: '',
+      name: '',
+      department: '',
+      author: '',
+      uploadTime: '',
+      description: '',
+      informationFile: '',
+      viewableBy: '',
+      downloadableBy: '',
+    }
+    return {
+      title: '',
+      showDrawer: false,
+      rules,
+      form,
+      initForm: { ...form },
+      isSubmit: false,
+      reloadForm: true,
+      // 人员选择
+      choiceTitle: '',
+      modalShowRoleFlag: false,
+      nodeList: [],
+      url: {
+        add: 'lawss/sarLawsInformation/addLawsInformation',
+        update: 'lawss/sarLawsInformation/updateLawsInformationInfo',
+        getLawsInformationInfo: 'lawss/sarLawsInformation/getLawsInformationInfo'
+      }
+    }
+  },
+  methods: {
+    stringToArr (str) {
+      if (str && this.value !== '') {
+        return str.split(',')
+      } else {
+        return []
+      }
+    },
+    handleChange (val, field) {
+      this.form[field] = val.join(',')
+    },
+    add (treeNodeId) {
+      this.form = this.initForm
+      this.form.treeNodeId = treeNodeId
+      this.title = '新增'
+      this.showDrawer = true
+      this.$nextTick(() => {
+        this.$refs['formRef'].resetFields()
+      })
+    },
+    edit (id) {
+      this.title = '修改'
+      this.showDrawer = true
+      this.$http._getData(this.url.getLawsInformationInfo, { id }).then(res => {
+        if (res.ok) {
+          this.$set(this, 'form', res.data)
+          this.reloadForm = false
+          this.$nextTick(() => {
+            this.reloadForm = true
+          })
+        }
+      })
+    },
+    onClose () {
+      this.showDrawer = false
+    },
+    onSubmit () {
+      this.$refs.formRef.validate(valid => {
+        if (valid) {
+          if (this.title === '新增') {
+            this.$http._postData(this.url.add, this.form, { _this: this, loading: 'isSubmit' }).then(res => {
+              if (res.ok) {
+                this.$message.success('新增成功')
+                this.onClose()
+                this.$emit('load')
+              }
+            })
+          } else {
+            this.$http._putData(this.url.update, this.form,{ _this: this, loading: 'isSubmit' }).then(res => {
+              if (res.ok) {
+                this.$message.success('修改成功')
+                this.onClose()
+                this.$emit('load')
+              }
+            })
+          }
+        }
+      })
+    },
+    choice(title, nameId) {
+      this.nodeList = []
+      if (nameId) {
+        let nameId1 = nameId.split(',')
+        let idList = []
+        nameId1.forEach(item => {
+          let a, b
+          a = item.substring(item.indexOf('(') +1)
+          b = a.substring(0, a.lastIndexOf(')'))
+          idList.push(b)
+        })
+        idList = idList.join(',')
+        this.nodeList = idList.split(',')
+      }
+      this.choiceTitle = title
+      this.modalShowRoleFlag = true
+    },
+    checkedRole(data) {
+      let idList = ''
+      let nameList = ''
+      data.forEach(item => {
+        if (nameList.length > 0) {
+          nameList += ','
+          idList += ','
+        }
+        idList += item.id
+        nameList += item.name
+      })
+      let field = ''
+      switch (this.choiceTitle) {
+        case '选择可查看者':
+          field = 'viewableBy'
+          break
+        case '选择可下载者':
+          field = 'downloadableBy'
+          break
+      }
+      this.$set(this.form, field, nameList)
+    },
+  }
+}
+</script>
+
+<style scoped lang="less">
+.drawer-content {
+  padding: 0 19px;
+  overflow-y: auto;
+  flex: auto;
+}
+.drawer-footer {
+  width: 100%;
+  padding: 0 20px;
+  height: 70px;
+  line-height: 69px;
+  border-top: 1px solid #e8e8e8;
+  text-align: right;
+  background: #fff;
+  z-index: 999;
+}
+</style>
@@ -0,0 +1,121 @@
+<template>
+  <div id="regulatoryMaterials">
+    <!--左侧树-->
+    <div id="left" class="tree-content" :class="{ 'tree-closed': sideClose }" >
+      <!-- 政策树 -->
+      <RegulatoryMaterialsTree ref="RegulatoryMaterialsTreeRef" @treeClick="treeClick"></RegulatoryMaterialsTree>
+      <div class="tree-collapse" @click="treeCollapse" :class="{ 'tree-close': sideClose }">
+        <!--切换折叠样式-->
+        <i class="el-icon-arrow-left" v-if="sideClose === false"></i>
+        <i class="el-icon-arrow-right" v-if="sideClose === true"></i>
+      </div>
+    </div>
+    <!-- 可拖拽 -->
+    <div id="resize"></div>
+    <div id="right">
+      <RegulatoryMaterialsMain :treeNodeId="treeNodeId"></RegulatoryMaterialsMain>
+    </div>
+  </div>
+</template>
+
+<script>
+import RegulatoryMaterialsTree from './components/RegulatoryMaterialsTree'
+import RegulatoryMaterialsMain from './components/RegulatoryMaterialsMain'
+
+export default {
+  name: "regulatoryMaterials",
+  data() {
+    return {
+      sideClose: false, // 边栏收展状态
+      treeNodeId: ''
+    }
+  },
+  components: {
+    RegulatoryMaterialsTree,
+    RegulatoryMaterialsMain
+  },
+  mounted() {
+    this.dragControllerLR()
+  },
+  methods: {
+    treeClick (treeNode) {
+      // 点击左侧树 重新获取数据
+      this.treeNodeId = treeNode.id || ''
+      // this.$nextTick(() => {
+      //   this.$refs.policyTableRef.treeClickGetBussionStandTable(treeNode.id || '')
+      // })
+    },
+
+
+
+    // 左侧树收展
+    treeCollapse () {
+      this.sideClose = !this.sideClose
+    },
+
+    // 左右拖动事件
+    dragControllerLR: function() {
+      var resize = document.getElementById("resize");
+      var left = document.getElementById("left");
+      var right = document.getElementById("right");
+      var box = document.getElementById("regulatoryMaterials");
+      resize.onmousedown = function(e){
+        var startX = e.clientX;
+        resize.left = resize.offsetLeft;
+        document.onmousemove = function(e){
+          var endX = e.clientX;
+
+          var moveLen = resize.left + (endX - startX);
+          var maxT = box.clientWidth - resize.offsetWidth;
+          if(moveLen<150) moveLen = 150;
+          if(moveLen>maxT-150) moveLen = maxT-150;
+
+          resize.style.left = moveLen;
+          left.style.width = moveLen + "px";
+          right.style.width = (box.clientWidth - moveLen - 5) + "px";
+        }
+        document.onmouseup = function(evt){
+          document.onmousemove = null;
+          document.onmouseup = null;
+          resize.releaseCapture && resize.releaseCapture();
+        }
+        resize.setCapture && resize.setCapture();
+        return false;
+      }
+    },
+  }
+}
+</script>
+
+<style scoped lang="less">
+#regulatoryMaterials {
+  height: 100%;
+  display: flex;
+  position: relative;
+  .tree-content {
+    position: relative;
+    background: #fff;
+    .tree-collapse {
+      position: absolute;
+      right: 0;
+    }
+  }
+  #left{
+    width: 20%;
+    height:100%;
+    float:left;
+  }
+
+  #resize{
+    width:5px;
+    height:100%;
+    cursor: w-resize;
+    float:left;
+  }
+
+  #right{
+    flex: 1;
+  }
+}
+
+</style>