yshop1.7发布,后台升級eladmin2.4(前端,后台权限,代码生成器等重构),修复商品分类等一些问题

src/views/tools/storage/local/index.vue

@@ -2,192 +2,195 @@
   <div class="app-container" style="padding: 8px;">
     <!--工具栏-->
     <div class="head-container">
-      <!-- 搜索 -->
-      <el-input v-model="query.value" clearable placeholder="输入内容模糊搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery"/>
-      <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button>
-      <!-- 新增 -->
-      <div style="display: inline-block;margin: 0px 2px;">
+      <div v-if="crud.props.searchToggle">
+        <!-- 搜索 -->
+        <el-input v-model="query.blurry" clearable size="small" placeholder="输入内容模糊搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
+        <el-date-picker
+          v-model="query.createTime"
+          :default-time="['00:00:00','23:59:59']"
+          type="daterange"
+          range-separator=":"
+          size="small"
+          class="date-item"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+        />
+        <rrOperation :crud="crud" />
+      </div>
+      <crudOperation :permission="permission">
+        <!-- 新增 -->
         <el-button
-          v-permission="['ADMIN','LOCALSTORAGE_ALL','LOCALSTORAGE_CREATE']"
+          slot="left"
+          v-permission="['admin','storage:add']"
           class="filter-item"
           size="mini"
           type="primary"
           icon="el-icon-upload"
-          @click="add">文件上传</el-button>
-      </div>
-      <!-- 多选删除 -->
-      <div style="display: inline-block;margin: 0px 2px;">
-        <el-button
-          :loading="delAllLoading"
-          :disabled="data.length === 0 || $refs.table.selection.length === 0"
-          class="filter-item"
-          size="mini"
-          type="danger"
-          icon="el-icon-delete"
-          @click="open">删除</el-button>
-      </div>
+          @click="crud.toAdd"
+        >上传
+        </el-button>
+      </crudOperation>
     </div>
     <!--表单组件-->
-    <eForm ref="form" :is-add="isAdd"/>
+    <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.add ? '文件上传' : '编辑文件'" width="500px">
+      <el-form ref="form" :model="form" size="small" label-width="80px">
+        <el-form-item label="文件名">
+          <el-input v-model="form.name" style="width: 370px;" />
+        </el-form-item>
+        <!--   上传文件   -->
+        <el-form-item v-if="crud.status.add" label="上传">
+          <el-upload
+            ref="upload"
+            :limit="1"
+            :before-upload="beforeUpload"
+            :auto-upload="false"
+            :headers="headers"
+            :on-success="handleSuccess"
+            :on-error="handleError"
+            :action="fileUploadApi + '?name=' + form.name"
+          >
+            <div class="eladmin-upload"><i class="el-icon-upload" /> 添加文件</div>
+            <div slot="tip" class="el-upload__tip">可上传任意格式文件，且不超过100M</div>
+          </el-upload>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="text" @click="crud.cancelCU">取消</el-button>
+        <el-button v-if="crud.status.add" :loading="loading" type="primary" @click="upload">确认</el-button>
+        <el-button v-else :loading="crud.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
+      </div>
+    </el-dialog>
     <!--表格渲染-->
-    <el-table v-loading="loading" ref="table" :data="data" size="small" style="width: 100%;">
-      <el-table-column type="selection" width="55"/>
-      <el-table-column :show-overflow-tooltip="true" prop="name" label="文件名">
+    <el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
+      <el-table-column type="selection" width="55" />
+      <el-table-column v-if="columns.visible('name')" prop="name" label="文件名">
         <template slot-scope="scope">
-          <el-link :underline="false" :href="baseApi + '/file/' + scope.row.type + '/' + scope.row.realName" target="_blank" type="primary">{{ scope.row.name }}</el-link>
+          <el-popover
+            :content="'file/' + scope.row.type + '/' + scope.row.realName"
+            placement="top-start"
+            title="路径"
+            width="200"
+            trigger="hover"
+          >
+            <a
+              slot="reference"
+              :href="baseApi + '/file/' + scope.row.type + '/' + scope.row.realName"
+              class="el-link--primary"
+              style="word-break:keep-all;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color: #1890ff;font-size: 13px;"
+              target="_blank"
+            >
+              {{ scope.row.name }}
+            </a>
+          </el-popover>
         </template>
       </el-table-column>
-      <el-table-column prop="suffix" label="文件类型"/>
-      <el-table-column prop="type" label="类别"/>
-      <el-table-column prop="size" label="大小"/>
-      <el-table-column prop="operate" label="操作人"/>
-      <el-table-column prop="createTime" label="创建日期">
+      <el-table-column v-if="columns.visible('path')" prop="path" label="预览图">
+        <template slot-scope="{row}">
+          <el-image
+            :src=" baseApi + '/file/' + row.type + '/' + row.realName"
+            :preview-src-list="[baseApi + '/file/' + row.type + '/' + row.realName]"
+            fit="contain"
+            lazy
+            class="el-avatar"
+          >
+            <div slot="error">
+              <i class="el-icon-document" />
+            </div>
+          </el-image>
+        </template>
+      </el-table-column>
+      <el-table-column v-if="columns.visible('suffix')" prop="suffix" label="文件类型" />
+      <el-table-column v-if="columns.visible('type')" prop="type" label="类别" />
+      <el-table-column v-if="columns.visible('size')" prop="size" label="大小" />
+      <el-table-column v-if="columns.visible('operate')" prop="operate" label="操作人" />
+      <el-table-column v-if="columns.visible('createTime')" prop="createTime" label="创建日期">
         <template slot-scope="scope">
           <span>{{ parseTime(scope.row.createTime) }}</span>
         </template>
       </el-table-column>
-      <el-table-column prop="updateTime" label="修改日期">
-        <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.updateTime) }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column v-if="checkPermission(['ADMIN','LOCALSTORAGE_ALL','LOCALSTORAGE_EDIT','LOCALSTORAGE_DELETE'])" label="操作" width="150px" align="center">
-        <template slot-scope="scope">
-          <el-button v-permission="['ADMIN','LOCALSTORAGE_ALL','LOCALSTORAGE_EDIT']" size="mini" type="primary" icon="el-icon-edit" @click="edit(scope.row)"/>
-          <el-popover
-            v-permission="['ADMIN','LOCALSTORAGE_ALL','LOCALSTORAGE_DELETE']"
-            :ref="scope.row.id"
-            placement="top"
-            width="180">
-            <p>确定删除本条数据吗？</p>
-            <div style="text-align: right; margin: 0">
-              <el-button size="mini" type="text" @click="$refs[scope.row.id].doClose()">取消</el-button>
-              <el-button :loading="delLoading" type="primary" size="mini" @click="subDelete(scope.row.id)">确定</el-button>
-            </div>
-            <el-button slot="reference" type="danger" icon="el-icon-delete" size="mini"/>
-          </el-popover>
-        </template>
-      </el-table-column>
     </el-table>
     <!--分页组件-->
-    <el-pagination
-      :total="total"
-      :current-page="page + 1"
-      style="margin-top: 8px;"
-      layout="total, prev, pager, next, sizes"
-      @size-change="sizeChange"
-      @current-change="pageChange"/>
+    <pagination />
   </div>
 </template>
 
 <script>
 import { mapGetters } from 'vuex'
-import checkPermission from '@/utils/permission'
-import initData from '@/mixins/initData'
-import { del, delAll } from '@/api/localStorage'
-import { parseTime } from '@/utils/index'
-import eForm from './form'
+import { getToken } from '@/utils/auth'
+import crudFile from '@/api/tools/localStorage'
+import CRUD, { presenter, header, form, crud } from '@crud/crud'
+import rrOperation from '@crud/RR.operation'
+import crudOperation from '@crud/CRUD.operation'
+import pagination from '@crud/Pagination'
+
+// crud交由presenter持有
+const defaultCrud = CRUD({ title: '文件', url: 'api/localStorage', crudMethod: { ...crudFile }})
+const defaultForm = { id: null, name: '' }
 export default {
-  components: { eForm },
-  mixins: [initData],
+  components: { pagination, crudOperation, rrOperation },
+  mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],
   data() {
     return {
-      delLoading: false, delAllLoading: false,
-      queryTypeOptions: [
-        { key: 'name', display_name: '文件名' },
-        { key: 'suffix', display_name: '后缀' },
-        { key: 'type', display_name: '类型' },
-        { key: 'operate', display_name: '操作人' }
-      ]
+      delAllLoading: false,
+      loading: false,
+      headers: { 'Authorization': getToken() },
+      permission: {
+        edit: ['admin', 'storage:edit'],
+        del: ['admin', 'storage:del']
+      }
     }
   },
   computed: {
     ...mapGetters([
-      'baseApi'
+      'baseApi',
+      'fileUploadApi'
     ])
   },
   created() {
-    this.$nextTick(() => {
-      this.init()
-    })
+    this.crud.optShow.add = false
   },
   methods: {
-    parseTime,
-    checkPermission,
-    beforeInit() {
-      this.url = 'api/localStorage'
-      const sort = 'id,desc'
-      this.params = { page: this.page, size: this.size, sort: sort }
-      const query = this.query
-      const value = query.value
-      if (value) { this.params['blurry'] = value }
-      return true
+    // 上传文件
+    upload() {
+      this.$refs.upload.submit()
     },
-    subDelete(id) {
-      this.delLoading = true
-      del(id).then(res => {
-        this.delLoading = false
-        this.$refs[id].doClose()
-        this.dleChangePage()
-        this.init()
-        this.$notify({
-          title: '删除成功',
-          type: 'success',
-          duration: 2500
-        })
-      }).catch(err => {
-        this.delLoading = false
-        this.$refs[id].doClose()
-        console.log(err.response.data.message)
-      })
-    },
-    add() {
-      this.isAdd = true
-      this.$refs.form.dialog = true
-    },
-    edit(data) {
-      this.isAdd = false
-      const _this = this.$refs.form
-      _this.form = {
-        id: data.id,
-        name: data.name
+    beforeUpload(file) {
+      let isLt2M = true
+      isLt2M = file.size / 1024 / 1024 < 100
+      if (!isLt2M) {
+        this.loading = false
+        this.$message.error('上传文件大小不能超过 100MB!')
       }
-      _this.dialog = true
+      this.form.name = file.name
+      return isLt2M
     },
-    doDelete() {
-      this.delAllLoading = true
-      const data = this.$refs.table.selection
-      const ids = []
-      for (let i = 0; i < data.length; i++) {
-        ids.push(data[i].id)
-      }
-      delAll(ids).then(res => {
-        this.delAllLoading = false
-        this.dleChangePage(ids.length)
-        this.init()
-        this.$notify({
-          title: '删除成功',
-          type: 'success',
-          duration: 2500
-        })
-      }).catch(err => {
-        this.delAllLoading = false
-        console.log(err.response.data.message)
-      })
+    handleSuccess(response, file, fileList) {
+      this.crud.notify('上传成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
+      this.$refs.upload.clearFiles()
+      this.crud.status.add = CRUD.STATUS.NORMAL
+      this.crud.resetForm()
+      this.crud.toQuery()
     },
-    open() {
-      this.$confirm('你确定删除选中的数据吗？', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(() => {
-        this.doDelete()
+    // 监听上传失败
+    handleError(e, file, fileList) {
+      const msg = JSON.parse(e.message)
+      this.$notify({
+        title: msg.message,
+        type: 'error',
+        duration: 2500
       })
+      this.loading = false
     }
   }
 }
 </script>
 
 <style scoped>
-
+  /deep/ .el-image__error, .el-image__placeholder{
+    background: none;
+  }
+  /deep/ .el-image-viewer__wrapper{
+    top: 55px;
+  }
 </style>