收集库-菜单弹框

src/assets/styles/archives-manage.scss

@@ -677,33 +677,35 @@
 .closed-btn{
   position: relative;
   position: absolute;
-  left: -23px;
+  left: -22px;
   top: 50%;
   display: block;
   width: 22px;
   height: 60px;
   margin-top: -30px;
-  background: #FFFFFF;
-  box-shadow: -7px 0px 7px 0px rgba(0,0,0,0.07);
-  border: 1px solid #E6E8ED;
-  border-radius: 2px;
-  transform: perspective(0.5em) rotateY(-5deg);
+  background: url("~@/assets/images/collect/zk.png") no-repeat;
+  background-size: 22px 60px;
+  // background: #FFFFFF;
+  // box-shadow: -7px 0px 7px 0px rgba(0,0,0,0.07);
+  // border: 1px solid #E6E8ED;
+  // border-radius: 2px;
+  // transform: perspective(0.5em) rotateY(-5deg);
   z-index: 999;
   cursor: pointer;
-  &::before{
-    position: absolute;
-    left: 6px;
-    top: 50%;
-    font-family: "iconfont" !important;
-    font-style: normal;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    font-size: 12px;
-    text-align: center;
-    content: "\e60e";
-    color: #A6ADB6;
-    transform: rotateY(5deg) translateY(-50%) scale(0.9);
-  }
+  // &::before{
+  //   position: absolute;
+  //   left: 6px;
+  //   top: 50%;
+  //   font-family: "iconfont" !important;
+  //   font-style: normal;
+  //   -webkit-font-smoothing: antialiased;
+  //   -moz-osx-font-smoothing: grayscale;
+  //   font-size: 12px;
+  //   text-align: center;
+  //   content: "\e60e";
+  //   color: #A6ADB6;
+  //   transform: rotateY(5deg) translateY(-50%) scale(0.9);
+  // }
 }
 
 .collect-header{

src/assets/styles/yxk-admin.scss

@@ -1477,6 +1477,22 @@ input[type ='number'] {
       margin-right: 10px;
     }
   }
+  span{
+    display: block;
+    position: relative;
+    padding-left: 14px;
+    &::before{
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 50%;
+      width: 6px;
+      height: 6px;
+      border-radius: 50%;
+      background-color: #9BA6B7;
+      transform: translateY(-50%);
+    }
+  }
 }
 .chapter-setting,
 .waterMark-main{

src/views/collectReorganizi/collectionLibrary/module/collectHeader.vue

@@ -26,8 +26,8 @@
           </el-menu-item-group>
           <el-menu-item-group v-if="(isTitleType === 3 && selectedCategory.isType === 5) || isTitleType === 4 || isTitleType === 6 || (isTitleType === 3 && activeIndex === 1)" class="collect-submenu-group submenu-tree">
             <template slot="title">原文上传</template>
-            <el-menu-item index="1-5" @click="normalUpload">普通上传</el-menu-item>
-            <el-menu-item index="1-6" @click="largeFileUpload">大文件上传</el-menu-item>
+            <el-menu-item index="1-5" @click="fileUpload(0)">普通上传</el-menu-item>
+            <el-menu-item index="1-6" @click="fileUpload(1)">大文件上传</el-menu-item>
           </el-menu-item-group>
         </el-submenu>
         <el-submenu v-if="isTitleType !== 6" index="2">
@@ -36,9 +36,9 @@
             <span>整理</span>
           </template>
           <el-menu-item-group class="collect-submenu-group">
-            <el-menu-item v-if="isTitleType !== 2" index="2-1">批量导入</el-menu-item>
+            <el-menu-item v-if="isTitleType !== 2" index="2-1" @click="bulkImportVisible=true">批量导入</el-menu-item>
             <!-- 项目 / 案卷 / 卷内 / 文件-->
-            <el-menu-item v-if="activeIndex !== 1 || (isTitleType === 3 && selectedCategory.isType === 5 && activeIndex === 1)" index="2-2">批量修改</el-menu-item>
+            <el-menu-item v-if="activeIndex !== 1 || (isTitleType === 3 && selectedCategory.isType === 5 && activeIndex === 1)" index="2-2" @click="handleBlukEditing">批量修改</el-menu-item>
             <el-menu-item v-if="isTitleType !== 2 && !(isTitleType === 3 && (selectedCategory.isType === 3 || selectedCategory.isType === 2) && activeIndex === 1)" index="2-3">档案调整</el-menu-item>
             <el-menu-item v-if="isTitleType !== 2 && !(isTitleType === 3 && (selectedCategory.isType === 3 || selectedCategory.isType === 2) && activeIndex === 1)" index="2-4">档号更新</el-menu-item>
             <!-- 案卷 -->
@@ -121,15 +121,151 @@
     </el-dialog>
 
     <!-- 普通上传 -->
-    <el-dialog class="tip-dialog" title="提示" :close-on-click-modal="false" :modal-append-to-body="false" append-to-body :visible.sync="moveVisible">
+    <el-dialog class="upload-dialog" :title="uploadTitle" :close-on-click-modal="false" :modal-append-to-body="false" append-to-body :visible.sync="uploadVisible">
       <div class="setting-dialog">
-        <div class="tip-content">
-          <p class="tipMsg">此移出将把会所选条目返还到未整理列表</p>
-          <span>你是否还要继续?</span>
+        <div class="upload-container">
+          <i v-if="fileList.length === 0" class="iconfont icon-tianjiawenjian upload-icon" />
+          <div v-for="item in fileList" :key="item.name" class="file-list">
+            <i class="iconfont icon-xiaowenjian" />
+            {{ item.name }}
+            <i class="el-icon-close" @click="deleteFile(item)" />
+          </div>
+          <div class="upload-input">
+            <input ref="fileInput" :key="key" type="file" @change="handleFileChange">
+            <div class="upload-zip"><i class="iconfont icon-shangchuan2" />点击上传</div>
+          </div>
+          <!-- <div class="el-upload__tip">上传限制文件类型：zip</div> -->
+          <div v-if="uploadType === 1" class="el-upload__tip">上传限制文件大小：最大10GB/个</div>
         </div>
         <div slot="footer" class="dialog-footer">
-          <el-button type="text" @click="moveVisible = false">取消</el-button>
-          <el-button type="primary" @click.native="handleMoveConfirm">确定</el-button>
+          <el-button type="text" @click="uploadVisible = false">取消</el-button>
+          <el-button type="primary" @click="handleUploadConfirm">保存</el-button>
+        </div>
+      </div>
+    </el-dialog>
+
+    <!-- 上传详情 -->
+    <el-dialog title="上传详情" :close-on-click-modal="false" :modal-append-to-body="false" append-to-body :visible.sync="uploadDetialVisible">
+      <div class="setting-dialog">
+        <div class="upload-detail">
+          <el-table :data="uploadDetailData" style="width: 100%">
+            <el-table-column prop="number" label="编号" width="120" />
+            <el-table-column prop="operator" label="操作人" width="120" />
+            <el-table-column prop="operationType" label="操作类型" width="120" />
+            <el-table-column prop="file" label="文件" width="160" />
+            <el-table-column prop="createDate" label="操作时间" width="200" />
+            <el-table-column prop="conclusion" label="结论" width="200">
+              <template slot-scope="scope">
+                <div>成功 {{ scope.row.successNumber }} 条; 失败 {{ scope.row.failNumber }} 条</div>
+              </template>
+            </el-table-column>
+          </el-table>
+          <!--分页组件-->
+          <el-pagination
+            :current-page="page.page"
+            :total="page.total"
+            :page-size="page.size"
+            :pager-count="5"
+            layout="total, prev, pager, next, sizes"
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentPage"
+          />
+        </div>
+      </div>
+    </el-dialog>
+
+    <!-- 批量导入 -->
+    <el-dialog title="批量导入" :close-on-click-modal="false" :modal-append-to-body="false" append-to-body :visible.sync="bulkImportVisible">
+      <div class="setting-dialog">
+        <div class="bulk-import-item">
+          <h4 class="bulk-import-title1">下载模板</h4>
+          <a class="template-name" href="/path/to/file.pdf" download><i class="iconfont icon-xiazai" />文书档案（案卷）</a>
+        </div>
+        <div class="bulk-import-item">
+          <h4 class="bulk-import-title2">上传导入</h4>
+          <el-form ref="form" :model="form" :rules="rules" label-width="110px">
+            <el-form-item label="上传Excel" prop="file">
+              <div class="input-import">
+                <input ref="excelInput" type="file" @change="handleFileExcel">
+                <div class="upload-excel"><i class="iconfont icon-shangchuan2" />选择文件</div>
+              </div>
+              <div v-for="item in excelList" :key="item.name" class="file-list">
+                <i class="iconfont icon-xiaowenjian" />
+                {{ item.name }}
+              </div>
+            </el-form-item>
+            <el-form-item label="导入类型" prop="type">
+              <el-select v-model="form.type" placeholder="请选择" style="width: 560px;">
+                <el-option
+                  v-for="item in typeOptions"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="重复验证字段" prop="fields">
+              <el-select v-model="form.fields" multiple placeholder="请选择" style="width: 560px;">
+                <el-option
+                  v-for="item in fieldsOptions"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="导入">
+              <el-button class="import-submit" type="primary" @click="onSubmitImport('form')">上传并导入</el-button>
+            </el-form-item>
+          </el-form>
+        </div>
+        <div class="chapter-tip">
+          <p>注意事项</p>
+          <span>模板中第一行为表单字段名称，从第二行开始填写需要导入的数据。</span>
+          <span>数据之间不能有空行。（若存在空行，仅会导入空行以上的数据）</span>
+        </div>
+      </div>
+    </el-dialog>
+
+    <!--批量修改-->
+    <el-dialog class="upload-dialog" title="批量修改" :close-on-click-modal="false" :modal-append-to-body="false" append-to-body :visible.sync="bulkEditingVisible">
+      <div class="setting-dialog">
+        <div class="bulk-editing-container">
+          <el-form ref="editForm" :model="editForm" :rules="editRules" label-width="100px">
+            <el-form-item label="修改字段" prop="fieldItem">
+              <el-select v-model="editForm.fieldItem" placeholder="请选择" style="width: 360px;">
+                <el-option
+                  v-for="item in fieldItemOptions"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="修改方式" prop="type">
+              <el-select v-model="editForm.type" placeholder="请选择" style="width: 360px;">
+                <el-option
+                  v-for="item in editTypeOptions"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="更新内容" prop="content">
+              <el-input v-model="editForm.content" style="width: 360px;" />
+              <!-- <el-date-picker
+                v-model="editForm.content"
+                type="date"
+                placeholder="选择日期"
+              /> -->
+            </el-form-item>
+          </el-form>
+
+        </div>
+        <div slot="footer" class="dialog-footer">
+          <el-button type="text" @click="bulkEditingVisible = false">取消</el-button>
+          <el-button type="primary" @click.native="bulkEditingVisible = false">确定</el-button>
         </div>
       </div>
     </el-dialog>
@@ -181,7 +317,112 @@ export default {
       formTitle: '项目',
       formPreviewData: [], // 预览界面data
       deleteVisible: false,
-      moveVisible: false
+      moveVisible: false,
+      // 上传
+      uploadVisible: false,
+      uploadTitle: '普通上传',
+      key: 0,
+      file: null,
+      fileList: [],
+      uploadType: 0,
+      // 上传详情
+      uploadDetialVisible: false,
+      uploadDetailData: [
+        {
+          number: '上传编号001    ',
+          operator: 'admin',
+          operationType: '原文目录上传',
+          file: ' xxxxx目录.zip',
+          createDate: '2016-09-21 08:50:08',
+          successNumber: '6',
+          failNumber: '4'
+        }
+      ],
+      page: {
+        page: 1,
+        size: 10,
+        total: 0
+      },
+      // 批量导入
+      bulkImportVisible: false,
+      rules: {
+        name: [
+          { required: true, message: '请输入活动名称', trigger: 'blur' },
+          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
+        ]
+      },
+      form: {
+        file: '',
+        type: '',
+        fields: []
+      },
+      excelList: [],
+      typeOptions: [
+        {
+          value: '追加',
+          label: '追加'
+        }
+      ],
+      fieldsOptions: [
+        {
+          value: '字段1',
+          label: '字段1'
+        }
+      ],
+      // 批量修改
+      bulkEditingVisible: false,
+      editForm: {
+        fieldItem: '',
+        type: '',
+        content: ''
+      },
+      editRules: {
+        fieldItem: [
+          { required: true, message: '请选择修改字段', trigger: 'change' }
+        ],
+        type: [
+          { required: true, message: '请选择修改方式', trigger: 'change' }
+        ],
+        content: [
+          { required: true, message: '请输入', trigger: 'blur' }
+        ]
+      },
+      fieldItemOptions: [
+        {
+          value: '1',
+          label: '非字典项&&文本'
+        },
+        {
+          value: '2',
+          label: '字典项'
+        },
+        {
+          value: '3',
+          label: '日期'
+        },
+        {
+          value: '4',
+          label: '数字'
+        }
+      ],
+      editTypeOptions: [
+        {
+          value: '填充',
+          label: '填充'
+        },
+        {
+          value: '替换',
+          label: '替换'
+        },
+        {
+          value: '增加',
+          label: '增加'
+        },
+        {
+          value: '减少',
+          label: '减少'
+        }
+      ]
     }
   },
   computed: {
@@ -297,23 +538,238 @@ export default {
     handleMoveConfirm() {
       this.moveVisible = false
     },
-    // 普通上传
-    normalUpload() {
+    // 上传
+    fileUpload(uploadType) {
       if (this.selections.length === 0) {
         this.$message('您还未勾选需要操作的条目，请先确认！')
         return false
       }
+      if (this.selections.length > 1) {
+        this.$message('编辑操作只可勾选唯一目标条目，请先确认！')
+        return false
+      }
+      if (uploadType === 0) {
+        this.uploadTitle = '普通上传'
+      } else {
+        this.uploadTitle = '大文件上传'
+      }
+      this.uploadVisible = true
+      this.uploadType = uploadType
     },
-    // 大文件上传
-    largeFileUpload() {
+    // input-upload change
+    handleFileChange(event) {
+      const files = event.target.files
+      this.file = files[0]
+      this.key++
+      let maxMessage
+      let maxSize
+      if (this.uploadType === 0) {
+        maxSize = 10 * 1024 * 1024
+        maxMessage = '上传文件大小不能超过 10MB!'
+      } else {
+        maxSize = 10 * 1024 * 1024 * 1024
+        maxMessage = '上传文件大小不能超过 10GB!'
+      }
+      if (this.file && this.file.size > maxSize) {
+        this.$message.warning(maxMessage)
+        this.fileList = []
+        event.target.value = ''
+        return false
+      }
+      if (this.fileList.length !== 0) {
+        const existingFile = this.fileList.some(file => file.name === this.file.name)
+        if (existingFile) {
+          this.$message.warning('文件已存在')
+          return false
+        }
+      }
+      for (let i = 0; i < files.length; i++) {
+        // this.fileList = []
+        this.fileList.push(files[i])
+      }
+    },
+    // delt file
+    deleteFile(file) {
+      const index = this.fileList.indexOf(file)
+      this.fileList.splice(index, 1)
+      // this.$confirm('此操作将清空所选数据, 是否继续?', '提示', {
+      //   confirmButtonText: '确定',
+      //   cancelButtonText: '取消',
+      //   type: 'warning'
+      // }).then(() => {
+      //   const index = this.fileList.indexOf(file)
+      //   this.fileList.splice(index, 1)
+      //   this.file = null
+      //   this.$message({
+      //     type: 'success',
+      //     message: '删除成功!'
+      //   })
+      // }).catch(() => {
+      //   this.$message({
+      //     type: 'info',
+      //     message: '已取消删除'
+      //   })
+      // })
+    },
+    handleUploadConfirm() {
+      this.uploadVisible = false
+      this.uploadDetialVisible = true
+    },
+    handleSizeChange(size) {
+      this.page.size = size
+      this.page.page = 1
+    },
+    handleCurrentPage(val) {
+      this.page.page = val
+    },
+    handleFileExcel(event) {
+      const files = event.target.files
+      const file = files[0] // 获取上传的文件
+      const allowedExtensions = /(\.xlsx)$/i // 定义允许上传的文件格式，这里只限制为xlsx格式
+      if (!allowedExtensions.exec(file.name)) {
+        this.$message.warning('只能上传Excel文件！') // 弹出提示信息
+        event.target.value = '' // 清空文件输入框内容
+        return false
+      }
+      for (let i = 0; i < files.length; i++) {
+        this.excelList = []
+        this.excelList.push(files[i])
+      }
+    },
+    onSubmitImport(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          alert('submit!')
+        } else {
+          console.log('error submit!!')
+          return false
+        }
+      })
+    },
+    handleBlukEditing() {
       if (this.selections.length === 0) {
         this.$message('您还未勾选需要操作的条目，请先确认！')
         return false
       }
+      this.bulkEditingVisible = true
     }
   }
 }
 </script>
 
 <style lang='scss' scoped>
+.upload-dialog {
+  ::v-deep .el-dialog{
+    width: 536px;
+  }
+}
+.upload-container{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 496px;
+  min-height: 178px;
+  padding: 12px;
+  border-radius: 3px;
+  background: #EDEFF3;
+  border: 1px dashed #BCC2C7;
+  .upload-icon{
+    font-size: 32px;
+    color: #1F55EB;
+  }
+
+  .el-upload__tip{
+    font-size: 12px;
+    color: #A6ADB6;
+  }
+  .file-list{
+    font-size: 12px;
+    line-height: 24px;
+    color: #545B65;
+  }
+}
+
+.upload-input,
+.input-import{
+  position: relative;
+  margin-top: 16px;
+  width: 104px;
+  height: 32px;
+  & input{
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 32px;
+    opacity: 0;
+  }
+}
+.upload-zip,
+.upload-excel{
+  width: 104px;
+  height: 32px;
+  line-height: 32px;
+  font-size: 14px;
+  color: #fff;
+  text-align: center;
+  border-radius: 3px;
+  background: #1F55EB;
+  & i{
+    font-size: 13px;
+  }
+}
+
+.input-import{
+  margin-top: 0;
+}
+.upload-excel{
+  color: #545B65;
+  border: 1px solid #E6E8ED;
+  background-color: transparent;
+}
+
+.bulk-import-item{
+  padding: 0 0 30px 10px;
+  h4{
+    padding-left: 38px;
+    font-size: 16px;
+    line-height: 32px;
+    color: #0C0E1E;
+    &.bulk-import-title1{
+      background: url("~@/assets/images/collect/import1.png") no-repeat left center;
+      background-size: 24px 24px;
+    }
+    &.bulk-import-title2{
+      margin-bottom: 16px;
+      background: url("~@/assets/images/collect/import2.png") no-repeat left center;
+      background-size: 24px 24px;
+
+    }
+  }
+  .template-name{
+    padding-left: 38px;
+    font-size: 14px;
+    line-height: 30px;
+    color: #0348F3;
+    i{
+      font-size: 12px;
+    }
+  }
+  .import-submit{
+    color: #fff;
+    background: #1F55EB;
+  }
+  .file-list{
+    font-size: 12px;
+    color: #A6ADB6;
+    i{
+      font-size: 12px;
+      color: #A6ADB6;
+    }
+  }
+}
+
+.chapter-tip{
+  margin-top: 10px;
+}
 </style>

src/views/system/watermarkManage/index.vue

@@ -124,20 +124,6 @@ export default {
   width: 1220px;
   @include tip-margin;
   span{
-    display: block;
-    position: relative;
-    padding-left: 14px;
-    &::before{
-      content: '';
-      position: absolute;
-      left: 0;
-      top: 50%;
-      width: 6px;
-      height: 6px;
-      border-radius: 50%;
-      background-color: #9BA6B7;
-      transform: translateY(-50%);
-    }
     i{
       font-style: normal;
       font-weight: bold;