index.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367
  1. <template>
  2. <div class="app-container">
  3. <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
  4. <el-form-item label="文件名" prop="fileName">
  5. <el-input
  6. v-model="queryParams.fileName"
  7. placeholder="请输入文件名"
  8. clearable
  9. size="small"
  10. @keyup.enter.native="handleQuery"
  11. />
  12. </el-form-item>
  13. <el-form-item label="原名" prop="originalName">
  14. <el-input
  15. v-model="queryParams.originalName"
  16. placeholder="请输入原名"
  17. clearable
  18. size="small"
  19. @keyup.enter.native="handleQuery"
  20. />
  21. </el-form-item>
  22. <el-form-item label="文件后缀" prop="fileSuffix">
  23. <el-input
  24. v-model="queryParams.fileSuffix"
  25. placeholder="请输入文件后缀"
  26. clearable
  27. size="small"
  28. @keyup.enter.native="handleQuery"
  29. />
  30. </el-form-item>
  31. <el-form-item label="创建时间">
  32. <el-date-picker
  33. v-model="daterangeCreateTime"
  34. size="small"
  35. style="width: 240px"
  36. value-format="yyyy-MM-dd"
  37. type="daterange"
  38. range-separator="-"
  39. start-placeholder="开始日期"
  40. end-placeholder="结束日期"
  41. ></el-date-picker>
  42. </el-form-item>
  43. <el-form-item label="上传人" prop="createBy">
  44. <el-input
  45. v-model="queryParams.createBy"
  46. placeholder="请输入上传人"
  47. clearable
  48. size="small"
  49. @keyup.enter.native="handleQuery"
  50. />
  51. </el-form-item>
  52. <el-form-item label="服务商" prop="service">
  53. <el-input
  54. v-model="queryParams.service"
  55. placeholder="请输入服务商"
  56. clearable
  57. size="small"
  58. @keyup.enter.native="handleQuery"
  59. />
  60. </el-form-item>
  61. <el-form-item>
  62. <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
  63. <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
  64. </el-form-item>
  65. </el-form>
  66. <el-row :gutter="10" class="mb8">
  67. <el-col :span="1.5">
  68. <el-button
  69. type="primary"
  70. plain
  71. icon="el-icon-plus"
  72. size="mini"
  73. @click="handleFile"
  74. v-hasPermi="['system:oss:upload']"
  75. >上传文件</el-button>
  76. </el-col>
  77. <el-col :span="1.5">
  78. <el-button
  79. type="primary"
  80. plain
  81. icon="el-icon-plus"
  82. size="mini"
  83. @click="handleImage"
  84. v-hasPermi="['system:oss:upload']"
  85. >上传图片</el-button>
  86. </el-col>
  87. <el-col :span="1.5">
  88. <el-button
  89. type="danger"
  90. plain
  91. icon="el-icon-delete"
  92. size="mini"
  93. :disabled="multiple"
  94. @click="handleDelete"
  95. v-hasPermi="['system:oss:remove']"
  96. >删除</el-button>
  97. </el-col>
  98. <el-col :span="1.5">
  99. <el-button
  100. :type="previewListResource ? 'danger' : 'warning'"
  101. plain
  102. size="mini"
  103. @click="handlePreviewListResource(!previewListResource)"
  104. v-hasPermi="['system:oss:edit']"
  105. >预览开关 : {{previewListResource ? "禁用" : "启用"}}</el-button>
  106. </el-col>
  107. <el-col :span="1.5">
  108. <el-button
  109. type="info"
  110. plain
  111. icon="el-icon-s-operation"
  112. size="mini"
  113. @click="handleOssConfig"
  114. v-hasPermi="['system:oss:list']"
  115. >配置管理</el-button>
  116. </el-col>
  117. <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
  118. </el-row>
  119. <el-table v-loading="loading" :data="ossList" @selection-change="handleSelectionChange">
  120. <el-table-column type="selection" width="55" align="center" />
  121. <el-table-column label="云存储主键" align="center" prop="ossId" v-if="false"/>
  122. <el-table-column label="文件名" align="center" prop="fileName" />
  123. <el-table-column label="原名" align="center" prop="originalName" />
  124. <el-table-column label="文件后缀" align="center" prop="fileSuffix" />
  125. <el-table-column label="文件展示" align="center" prop="url">
  126. <template slot-scope="scope">
  127. <el-image
  128. v-if="previewListResource && checkFileSuffix(scope.row.fileSuffix)"
  129. style="width: 100px; height: 100px;"
  130. :src="scope.row.url"
  131. :preview-src-list="[scope.row.url]"/>
  132. <span v-text="scope.row.url"
  133. v-if="!checkFileSuffix(scope.row.fileSuffix) || !previewListResource"/>
  134. </template>
  135. </el-table-column>
  136. <el-table-column label="创建时间" align="center" prop="createTime" width="180">
  137. <template slot-scope="scope">
  138. <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
  139. </template>
  140. </el-table-column>
  141. <el-table-column label="上传人" align="center" prop="createBy" />
  142. <el-table-column label="服务商" align="center" prop="service" />
  143. <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
  144. <template slot-scope="scope">
  145. <el-button
  146. size="mini"
  147. type="text"
  148. icon="el-icon-edit"
  149. @click="handleDownload(scope.row)"
  150. v-hasPermi="['system:oss:download']"
  151. >下载</el-button>
  152. <el-button
  153. size="mini"
  154. type="text"
  155. icon="el-icon-delete"
  156. @click="handleDelete(scope.row)"
  157. v-hasPermi="['system:oss:remove']"
  158. >删除</el-button>
  159. </template>
  160. </el-table-column>
  161. </el-table>
  162. <pagination
  163. v-show="total>0"
  164. :total="total"
  165. :page.sync="queryParams.pageNum"
  166. :limit.sync="queryParams.pageSize"
  167. @pagination="getList"
  168. />
  169. <!-- 添加或修改OSS云存储对话框 -->
  170. <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
  171. <el-form ref="form" :model="form" :rules="rules" label-width="80px">
  172. <el-form-item label="文件名">
  173. <fileUpload v-model="form.file" v-if="type === 0"/>
  174. <imageUpload v-model="form.file" v-if="type === 1"/>
  175. </el-form-item>
  176. </el-form>
  177. <div slot="footer" class="dialog-footer">
  178. <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
  179. <el-button @click="cancel">取 消</el-button>
  180. </div>
  181. </el-dialog>
  182. </div>
  183. </template>
  184. <script>
  185. import { listOss, delOss, changePreviewListResource } from "@/api/system/oss";
  186. import { downLoadOss } from "@/utils/download";
  187. export default {
  188. name: "Oss",
  189. data() {
  190. return {
  191. // 按钮loading
  192. buttonLoading: false,
  193. // 遮罩层
  194. loading: true,
  195. // 导出遮罩层
  196. exportLoading: false,
  197. // 选中数组
  198. ids: [],
  199. // 非单个禁用
  200. single: true,
  201. // 非多个禁用
  202. multiple: true,
  203. // 显示搜索条件
  204. showSearch: true,
  205. // 总条数
  206. total: 0,
  207. // OSS云存储表格数据
  208. ossList: [],
  209. // 弹出层标题
  210. title: "",
  211. // 弹出层标题
  212. type: 0,
  213. // 是否显示弹出层
  214. open: false,
  215. // 预览列表图片
  216. previewListResource: true,
  217. // 创建时间时间范围
  218. daterangeCreateTime: [],
  219. // 查询参数
  220. queryParams: {
  221. pageNum: 1,
  222. pageSize: 10,
  223. fileName: undefined,
  224. originalName: undefined,
  225. fileSuffix: undefined,
  226. url: undefined,
  227. createTime: undefined,
  228. createBy: undefined,
  229. service: undefined
  230. },
  231. // 表单参数
  232. form: {},
  233. // 表单校验
  234. rules: {
  235. file: [
  236. { required: true, message: "文件不能为空", trigger: "blur" }
  237. ]
  238. }
  239. };
  240. },
  241. created() {
  242. this.getList();
  243. },
  244. methods: {
  245. /** 查询OSS云存储列表 */
  246. getList() {
  247. this.loading = true;
  248. this.queryParams.params = {};
  249. if (null != this.daterangeCreateTime && '' != this.daterangeCreateTime) {
  250. this.queryParams.params["beginCreateTime"] = this.daterangeCreateTime[0];
  251. this.queryParams.params["endCreateTime"] = this.daterangeCreateTime[1];
  252. }
  253. this.getConfigKey("sys.oss.previewListResource").then(response => {
  254. this.previewListResource = response.msg === undefined ? true : response.msg === 'true';
  255. });
  256. listOss(this.queryParams).then(response => {
  257. this.ossList = response.rows;
  258. this.total = response.total;
  259. this.loading = false;
  260. });
  261. },
  262. checkFileSuffix(fileSuffix) {
  263. let arr = ["png", "jpg", "jpeg"];
  264. return arr.some(type => {
  265. return fileSuffix.indexOf(type) > -1;
  266. });
  267. },
  268. // 取消按钮
  269. cancel() {
  270. this.open = false;
  271. this.reset();
  272. },
  273. // 表单重置
  274. reset() {
  275. this.form = {
  276. file: undefined,
  277. };
  278. this.resetForm("form");
  279. },
  280. /** 搜索按钮操作 */
  281. handleQuery() {
  282. this.queryParams.pageNum = 1;
  283. this.getList();
  284. },
  285. /** 重置按钮操作 */
  286. resetQuery() {
  287. this.daterangeCreateTime = [];
  288. this.resetForm("queryForm");
  289. this.handleQuery();
  290. },
  291. // 多选框选中数据
  292. handleSelectionChange(selection) {
  293. this.ids = selection.map(item => item.ossId)
  294. this.single = selection.length!==1
  295. this.multiple = !selection.length
  296. },
  297. /** 任务日志列表查询 */
  298. handleOssConfig() {
  299. this.$router.push({ path: '/system/oss-config/index'})
  300. },
  301. /** 文件按钮操作 */
  302. handleFile() {
  303. this.reset();
  304. this.open = true;
  305. this.title = "上传文件";
  306. this.type = 0;
  307. },
  308. /** 图片按钮操作 */
  309. handleImage() {
  310. this.reset();
  311. this.open = true;
  312. this.title = "上传图片";
  313. this.type = 1;
  314. },
  315. /** 提交按钮 */
  316. submitForm() {
  317. this.open = false;
  318. this.getList();
  319. },
  320. /** 下载按钮操作 */
  321. handleDownload(row) {
  322. downLoadOss(row.ossId)
  323. },
  324. /** 删除按钮操作 */
  325. handleDelete(row) {
  326. const ossIds = row.ossId || this.ids;
  327. this.$confirm('是否确认删除OSS云存储编号为"' + ossIds + '"的数据项?', "警告", {
  328. confirmButtonText: "确定",
  329. cancelButtonText: "取消",
  330. type: "warning"
  331. }).then(() => {
  332. this.loading = true;
  333. return delOss(ossIds);
  334. }).then(() => {
  335. this.loading = false;
  336. this.getList();
  337. this.msgSuccess("删除成功");
  338. }).finally(() => {
  339. this.loading = false;
  340. });
  341. },
  342. // 预览列表图片状态修改
  343. handlePreviewListResource(previewListResource) {
  344. let text = previewListResource ? "启用" : "停用";
  345. this.$confirm(
  346. '确认要"' + text + '""预览列表图片"配置吗?', "警告", {
  347. confirmButtonText: "确定",
  348. cancelButtonText: "取消",
  349. type: "warning",
  350. }).then(() => {
  351. return changePreviewListResource(previewListResource);
  352. }).then(() => {
  353. this.getList()
  354. this.msgSuccess(text + "成功");
  355. }).catch(() => {
  356. this.previewListResource = previewListResource !== true;
  357. })
  358. }
  359. }
  360. };
  361. </script>