From d2077762d180c466fdc9f62bc7bb6e1e0facc942 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=8D=E5=81=9A=E7=A0=81=E5=86=9C?= <599854767@qq.com>
Date: Thu, 10 Mar 2022 15:03:42 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=87=E4=BB=B6=E4=B8=8A=E4=BC=A0=E6=96=B0?=
 =?UTF-8?q?=E5=A2=9E=E5=A4=8D=E5=88=B6=E8=B7=AF=E5=BE=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ZR.Vue/src/views/tool/file/index.vue | 192 ++++++++++++++-------------
 1 file changed, 97 insertions(+), 95 deletions(-)

diff --git a/ZR.Vue/src/views/tool/file/index.vue b/ZR.Vue/src/views/tool/file/index.vue
index e23fd17..3811e3a 100644
--- a/ZR.Vue/src/views/tool/file/index.vue
+++ b/ZR.Vue/src/views/tool/file/index.vue
@@ -6,7 +6,7 @@
         <el-input v-model="queryParams.fileId" placeholder="请输入文件id" clearable size="small" />
       </el-form-item>
       <el-form-item label="上传时间">
-        <el-date-picker v-model="dateRangeCreate_time" size="small" value-format="yyyy-MM-dd" type="daterange" range-separator="-"
+        <el-date-picker v-model="dateRangeAddTime" size="small" value-format="yyyy-MM-dd" type="daterange" range-separator="-"
           start-placeholder="开始日期" end-placeholder="结束日期" placeholder="请选择上传时间"></el-date-picker>
       </el-form-item>
       <el-form-item label="存储类型" prop="storeType">
@@ -62,6 +62,10 @@
       <el-table-column label="操作" align="center" width="200">
         <template slot-scope="scope">
           <el-button type="text" icon="el-icon-view" @click="handleView(scope.row)">查看</el-button>
+          <el-button class="copy-btn-main" icon="el-icon-document-copy" type="text" v-clipboard:copy="scope.row.accessUrl"
+            v-clipboard:success="clipboardSuccess">
+            复制
+          </el-button>
           <el-button v-hasPermi="['tool:file:delete']" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
         </template>
       </el-table-column>
@@ -69,8 +73,8 @@
     <pagination class="mt10" background :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
 
     <!-- 添加或修改文件存储对话框 -->
-    <el-dialog :title="title" :lock-scroll="false" :visible.sync="open" width="400px">
-      <el-form ref="form" :model="form" :rules="rules" label-width="135px" label-position="left">
+    <el-dialog :title="title" :lock-scroll="false" :visible.sync="open" width="380px">
+      <el-form ref="form" :model="form" :rules="rules" label-width="100px" label-position="left">
         <el-row>
           <el-col :lg="24">
             <el-form-item label="存储类型" prop="storeType">
@@ -81,24 +85,24 @@
             </el-form-item>
           </el-col>
           <el-col :lg="24">
-            <el-form-item label="存储文件夹前缀" prop="storePath">
+            <el-form-item prop="storePath">
               <span slot="label">
-                存储文件夹前缀
+                文件夹前缀
                 <el-tooltip content="比如存储到'/uploads' '如果不填写默认按时间存储eg：/2021/12/16(固定段)'" placement="top">
                   <i class="el-icon-question"></i>
                 </el-tooltip>
               </span>
-              <el-input v-model="form.storePath" placeholder="请输入" clearable=""/>
+              <el-input v-model="form.storePath" placeholder="请输入文件夹前缀" clearable="" auto-complete="" />
             </el-form-item>
           </el-col>
           <el-col :lg="24">
             <el-form-item label="自定文件名" prop="fileName">
-              <el-input v-model="form.fileName" placeholder="请输入文件名" clearable=""/>
+              <el-input v-model="form.fileName" placeholder="请输入文件名" clearable="" />
             </el-form-item>
           </el-col>
           <el-col :lg="24">
-            <el-form-item label="上传文件" prop="accessUrl">
-              <UploadFile v-model="form.accessUrl" :uploadUrl="uploadUrl" :fileType="[]" :limit="1" :fileSize="15"
+            <el-form-item label="" prop="accessUrl">
+              <UploadFile v-model="form.accessUrl" :uploadUrl="uploadUrl" :fileType="[]" :limit="1" :fileSize="15" :drag="true"
                 :data="{ 'fileDir' :  form.storePath, 'fileName': form.fileName}" column="accessUrl" @input="handleUploadSuccess" />
             </el-form-item>
           </el-col>
@@ -139,7 +143,12 @@
             <el-form-item label="存储路径">{{formView.fileUrl}}</el-form-item>
           </el-col>
           <el-col :lg="24">
-            <el-form-item label="访问路径">{{formView.accessUrl}}</el-form-item>
+            <el-form-item label="访问路径">{{formView.accessUrl}}
+              <el-button class="copy-btn-main" icon="el-icon-document-copy" type="text" v-clipboard:copy="formView.accessUrl"
+                v-clipboard:success="clipboardSuccess">
+                复制
+              </el-button>
+            </el-form-item>
           </el-col>
         </el-row>
       </el-form>
@@ -147,14 +156,14 @@
   </div>
 </template>
 <script>
-import { listSysfile, delSysfile, getSysfile } from "@/api/tool/file.js";
+import { listSysfile, delSysfile, getSysfile } from '@/api/tool/file.js'
 
 export default {
-  name: "sysfile",
+  name: 'sysfile',
   data() {
     return {
-      labelWidth: "100px",
-      formLabelWidth: "100px",
+      labelWidth: '100px',
+      formLabelWidth: '100px',
       // 选中id数组
       ids: [],
       // 非单个禁用
@@ -170,37 +179,26 @@ export default {
         pageNum: 1,
         pageSize: 20,
         storeType: 1,
-        fileId: undefined,
+        fileId: undefined
       },
       // 弹出层标题
-      title: "",
+      title: '',
       // 是否显示弹出层
       open: false,
       openView: false,
       // 表单参数
       form: {},
       formView: {},
-      columns: [
-        { index: 0, key: "id", label: `自增id`, checked: true },
-        { index: 1, key: "fileName", label: `文件名`, checked: true },
-        { index: 2, key: "fileUrl", label: `文件存储地址`, checked: true },
-        { index: 3, key: "storePath", label: `仓库位置`, checked: true },
-        { index: 4, key: "fileSize", label: `文件大小`, checked: true },
-        { index: 5, key: "fileExt", label: `文件扩展名`, checked: true },
-        { index: 6, key: "create_by", label: `创建人`, checked: true },
-        { index: 7, key: "create_time", label: `上传时间`, checked: true },
-        { index: 8, key: "storeType", label: `存储类型`, checked: true },
-        { index: 9, key: "accessUrl", label: `访问路径`, checked: false },
-      ],
-      //上传时间时间范围
-      dateRangeCreate_time: [],
+      columns: [],
+      // 上传时间时间范围
+      dateRangeAddTime: [],
       // 存储类型选项列表
       storeTypeOptions: [
-        { dictLabel: "本地存储", dictValue: 1 },
-        { dictLabel: "阿里云存储", dictValue: 2 },
+        { dictLabel: '本地存储', dictValue: 1 },
+        { dictLabel: '阿里云存储', dictValue: 2 }
       ],
       // 上传文件地址
-      uploadUrl: "/common/uploadFile",
+      uploadUrl: '/common/uploadFile',
       fileType: [],
       // 数据列表
       dataList: [],
@@ -213,127 +211,131 @@ export default {
         accessUrl: [
           {
             required: true,
-            message: "上传文件不能为空",
-            trigger: "blur",
-          },
+            message: '上传文件不能为空',
+            trigger: 'blur'
+          }
         ],
         storeType: [
           {
             required: true,
-            message: "存储类型不能为空",
-            trigger: "blur",
-          },
-        ],
-      },
-    };
+            message: '存储类型不能为空',
+            trigger: 'blur'
+          }
+        ]
+      }
+    }
   },
   created() {
     // 列表数据查询
-    this.getList();
+    this.getList()
   },
   methods: {
     // 查询数据
     getList() {
-      this.addDateRange(this.queryParams, this.dateRangeCreate_time, 'Create_time');
-      this.loading = true;
+      this.addDateRange(this.queryParams, this.dateRangeAddTime, 'Create_time')
+      this.loading = true
       listSysfile(this.queryParams).then((res) => {
         if (res.code == 200) {
-          this.dataList = res.data.result;
-          this.total = res.data.totalNum;
-          this.loading = false;
+          this.dataList = res.data.result
+          this.total = res.data.totalNum
+          this.loading = false
         }
-      });
+      })
     },
     // 取消按钮
     cancel() {
-      this.open = false;
-      this.reset();
+      this.open = false
+      this.reset()
     },
     // 重置数据表单
     reset() {
       this.form = {
-        fileName: "",
-        fileUrl: "",
-        storePath: "uploads",
+        fileName: '',
+        fileUrl: '',
+        storePath: 'uploads',
         fileSize: 0,
-        fileExt: "",
+        fileExt: '',
         storeType: 1,
-        accessUrl: "",
-      };
-      this.resetForm("form");
+        accessUrl: ''
+      }
+      this.resetForm('form')
     },
     /** 重置查询操作 */
     resetQuery() {
-      this.timeRange = [];
-      //上传时间时间范围
-      this.dateRangeCreate_time = [];
-      this.resetForm("queryForm");
-      this.handleQuery();
+      this.timeRange = []
+      // 上传时间时间范围
+      this.dateRangeAddTime = []
+      this.resetForm('queryForm')
+      this.handleQuery()
     },
     // 多选框选中数据
     handleSelectionChange(selection) {
-      this.ids = selection.map((item) => item.id);
-      this.single = selection.length != 1;
-      this.multiple = !selection.length;
+      this.ids = selection.map((item) => item.id)
+      this.single = selection.length != 1
+      this.multiple = !selection.length
     },
     /** 搜索按钮操作 */
     handleQuery() {
-      this.queryParams.pageNum = 1;
-      this.getList();
+      this.queryParams.pageNum = 1
+      this.getList()
     },
     /** 新增按钮操作 */
     handleAdd() {
-      this.reset();
-      this.open = true;
-      this.title = "上传文件";
-      this.form.storeType = this.queryParams.storeType;
+      this.reset()
+      this.open = true
+      this.title = '上传文件'
+      this.form.storeType = this.queryParams.storeType
     },
     /** 删除按钮操作 */
     handleDelete(row) {
-      const Ids = row.id || this.ids;
+      const Ids = row.id || this.ids
 
       this.$confirm('是否确认删除参数编号为"' + Ids + '"的数据项？')
-        .then(function () {
-          return delSysfile(Ids);
+        .then(function() {
+          return delSysfile(Ids)
         })
         .then(() => {
-          this.handleQuery();
-          this.msgSuccess("删除成功");
+          this.handleQuery()
+          this.msgSuccess('删除成功')
         })
-        .catch(() => {});
+        .catch(() => {})
     },
-    /**查看按钮操作 */
+    /** 查看按钮操作 */
     handleView(row) {
-      const id = row.id || this.ids;
+      const id = row.id || this.ids
       getSysfile(id).then((res) => {
-        const { code, data } = res;
+        const { code, data } = res
         if (code == 200) {
-          this.openView = true;
-          this.formView = data;
+          this.openView = true
+          this.formView = data
         }
-      });
+      })
     },
-    //上传成功方法
+    // 上传成功方法
     handleUploadSuccess(columnName, filelist, data) {
-      this.form[columnName] = filelist;
-      this.queryParams.fileId = data.fileId;
-      this.open = false;
-      this.getList();
+      this.form[columnName] = filelist
+      this.queryParams.fileId = data.fileId
+      this.open = false
+      this.getList()
     },
     // 存储类型字典翻译
     storeTypeFormat(row, column) {
-      return this.selectDictLabel(this.storeTypeOptions, row.storeType);
+      return this.selectDictLabel(this.storeTypeOptions, row.storeType)
     },
     handleSelectStore(val) {
-      this.queryParams.storeType = val;
+      this.queryParams.storeType = val
       if (val == 1) {
-        this.uploadUrl = "/common/uploadFile";
+        this.uploadUrl = '/common/uploadFile'
       } else if (val == 2) {
-        this.uploadUrl = "/common/UploadFileAliyun";
+        this.uploadUrl = '/common/UploadFileAliyun'
       }
     },
-  },
-};
+    /** 复制代码成功 */
+    clipboardSuccess() {
+      this.msgSuccess('复制成功')
+    }
+  }
+}
 </script>
 <style scoped>
 .el-avatar {