ylyx-cli 1.0.0

package/templates/vue-app/files/src/views/tools/storage/local/index.vue

@@ -0,0 +1,207 @@
+<template>
+  <div class="app-container" style="padding: 8px">
+    <!--工具栏-->
+    <div class="head-container">
+      <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" />
+        <date-range-picker v-model="query.createTime" class="date-item" />
+        <rrOperation />
+      </div>
+      <crudOperation :permission="permission">
+        <!-- 新增 -->
+        <el-button
+          slot="left"
+          v-permission="['admin', 'storage:add']"
+          class="filter-item"
+          size="mini"
+          type="primary"
+          icon="el-icon-upload"
+          @click="crud.toAdd"
+          >上传
+        </el-button>
+      </crudOperation>
+    </div>
+    <!--表单组件-->
+    <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.status.cu === 2" type="primary" @click="crud.submitCU"
+          >确认</el-button
+        >
+      </div>
+    </el-dialog>
+    <!--表格渲染-->
+    <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 prop="name" label="文件名">
+        <template slot-scope="scope">
+          <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="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 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>
+    <!--分页组件-->
+    <pagination />
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+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';
+import DateRangePicker from '@/components/DateRangePicker';
+
+const defaultForm = { id: null, name: '' };
+export default {
+  components: { pagination, crudOperation, rrOperation, DateRangePicker },
+  cruds() {
+    return CRUD({ title: '文件', url: 'api/localStorage', crudMethod: { ...crudFile } });
+  },
+  mixins: [presenter(), header(), form(defaultForm), crud()],
+  data() {
+    return {
+      delAllLoading: false,
+      loading: false,
+      headers: { Authorization: getToken() },
+      permission: {
+        edit: ['admin', 'storage:edit'],
+        del: ['admin', 'storage:del'],
+      },
+    };
+  },
+  computed: {
+    ...mapGetters(['baseApi', 'fileUploadApi']),
+  },
+  created() {
+    this.crud.optShow.add = false;
+  },
+  methods: {
+    // 上传文件
+    upload() {
+      this.$refs.upload.submit();
+    },
+    beforeUpload(file) {
+      let isLt2M = true;
+      isLt2M = file.size / 1024 / 1024 < 100;
+      if (!isLt2M) {
+        this.loading = false;
+        this.$message.error('上传文件大小不能超过 100MB!');
+      }
+      this.form.name = file.name;
+      return isLt2M;
+    },
+    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();
+    },
+    // 监听上传失败
+    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>
+::v-deep .el-image__error,
+.el-image__placeholder {
+  background: none;
+}
+::v-deep .el-image-viewer__wrapper {
+  top: 55px;
+}
+</style>

package/templates/vue-app/files/src/views/tools/storage/qiniu/form.vue

@@ -0,0 +1,108 @@
+<template>
+  <el-dialog
+    :visible.sync="dialog"
+    :close-on-click-modal="false"
+    title="七牛云配置"
+    append-to-body
+    width="580px">
+    <el-form
+      ref="form"
+      :model="form"
+      :rules="rules"
+      style="margin-top: 6px"
+      size="small"
+      label-width="110px">
+      <el-form-item label="Access Key" prop="accessKey">
+        <el-input
+          v-model="form.accessKey"
+          style="width: 95%"
+          placeholder="accessKey，在安全中心，秘钥管理中查看" />
+      </el-form-item>
+      <el-form-item label="Secret Key" prop="secretKey">
+        <el-input
+          v-model="form.secretKey"
+          type="password"
+          style="width: 95%"
+          placeholder="secretKey，在安全中心，秘钥管理中查看" />
+      </el-form-item>
+      <el-form-item label="空间名称" prop="bucket">
+        <el-input
+          v-model="form.bucket"
+          style="width: 95%"
+          placeholder="存储空间名称作为唯一的 Bucket 识别符" />
+      </el-form-item>
+      <el-form-item label="外链域名" prop="host">
+        <el-input
+          v-model="form.host"
+          style="width: 95%"
+          placeholder="外链域名，可自定义，需在七牛云绑定" />
+      </el-form-item>
+      <el-form-item label="存储区域">
+        <el-select v-model="form.zone" placeholder="请选择存储区域">
+          <el-option v-for="item in zones" :key="item" :label="item" :value="item" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="空间类型" prop="type">
+        <el-radio v-model="form.type" label="公开">公开</el-radio>
+        <el-radio v-model="form.type" label="私有">私有</el-radio>
+      </el-form-item>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button type="text" @click="dialog = false">取消</el-button>
+      <el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { get, update } from '@/api/tools/qiniu';
+export default {
+  data() {
+    return {
+      zones: ['华东', '华北', '华南', '北美', '东南亚'],
+      dialog: false,
+      loading: false,
+      form: { accessKey: '', secretKey: '', bucket: '', host: '', zone: '', type: '' },
+      rules: {
+        accessKey: [{ required: true, message: '请输入accessKey', trigger: 'blur' }],
+        secretKey: [{ required: true, message: '请输入secretKey', trigger: 'blur' }],
+        bucket: [{ required: true, message: '请输入空间名称', trigger: 'blur' }],
+        host: [{ required: true, message: '请输入外链域名', trigger: 'blur' }],
+        type: [{ required: true, message: '空间类型不能为空', trigger: 'blur' }],
+      },
+    };
+  },
+  methods: {
+    init() {
+      get().then(res => {
+        this.form = res;
+      });
+    },
+    doSubmit() {
+      this.$refs['form'].validate(valid => {
+        if (valid) {
+          this.loading = true;
+          update(this.form)
+            .then(res => {
+              this.$notify({
+                title: '修改成功',
+                type: 'success',
+                duration: 2500,
+              });
+              this.$parent.crud.toQuery();
+              this.loading = false;
+              this.dialog = false;
+            })
+            .catch(err => {
+              this.loading = false;
+            });
+        } else {
+          return false;
+        }
+      });
+    },
+  },
+};
+</script>
+
+<style scoped></style>

package/templates/vue-app/files/src/views/tools/storage/qiniu/index.vue

@@ -0,0 +1,241 @@
+<template>
+  <div class="app-container" style="padding: 8px">
+    <!--表单组件-->
+    <eForm ref="form" />
+    <!-- 工具栏 -->
+    <div class="head-container">
+      <div v-if="crud.props.searchToggle">
+        <!-- 搜索 -->
+        <el-input
+          v-model="query.key"
+          clearable
+          size="small"
+          placeholder="输入文件名称搜索"
+          style="width: 200px"
+          class="filter-item"
+          @keyup.enter.native="toQuery" />
+        <date-range-picker v-model="query.createTime" class="date-item" />
+        <rrOperation />
+      </div>
+      <crudOperation :permission="permission">
+        <template slot="left">
+          <!-- 上传 -->
+          <el-button
+            class="filter-item"
+            size="mini"
+            type="primary"
+            icon="el-icon-upload"
+            @click="dialog = true"
+            >上传</el-button
+          >
+          <!-- 同步 -->
+          <el-button
+            :icon="icon"
+            class="filter-item"
+            size="mini"
+            type="warning"
+            @click="synchronize"
+            >同步</el-button
+          >
+          <!-- 配置 -->
+          <el-button
+            class="filter-item"
+            size="mini"
+            type="success"
+            icon="el-icon-s-tools"
+            @click="doConfig"
+            >配置</el-button
+          >
+        </template>
+      </crudOperation>
+      <!-- 文件上传 -->
+      <el-dialog
+        :visible.sync="dialog"
+        :close-on-click-modal="false"
+        append-to-body
+        width="500px"
+        @close="doSubmit">
+        <el-upload
+          :before-remove="handleBeforeRemove"
+          :on-success="handleSuccess"
+          :on-error="handleError"
+          :file-list="fileList"
+          :headers="headers"
+          :action="qiNiuUploadApi"
+          class="upload-demo"
+          multiple>
+          <el-button size="small" type="primary">点击上传</el-button>
+          <div slot="tip" style="display: block" class="el-upload__tip">
+            请勿上传违法文件，且文件不超过15M
+          </div>
+        </el-upload>
+        <div slot="footer" class="dialog-footer">
+          <el-button type="primary" @click="doSubmit">确认</el-button>
+        </div>
+      </el-dialog>
+      <!--表格渲染-->
+      <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 prop="name" :show-overflow-tooltip="true" label="文件名">
+          <template slot-scope="scope">
+            <a
+              href="JavaScript:"
+              class="el-link el-link--primary"
+              target="_blank"
+              type="primary"
+              @click="download(scope.row.id)"
+              >{{ scope.row.key }}</a
+            >
+          </template>
+        </el-table-column>
+        <el-table-column
+          :show-overflow-tooltip="true"
+          prop="suffix"
+          label="文件类型"
+          @selection-change="crud.selectionChangeHandler" />
+        <el-table-column prop="bucket" label="空间名称" />
+        <el-table-column prop="size" label="文件大小" />
+        <el-table-column prop="type" label="空间类型" />
+        <el-table-column prop="updateTime" label="创建日期" />
+      </el-table>
+      <!--分页组件-->
+      <pagination />
+    </div>
+  </div>
+</template>
+
+<script>
+import crudQiNiu from '@/api/tools/qiniu';
+import { mapGetters } from 'vuex';
+import { getToken } from '@/utils/auth';
+import eForm from './form';
+import CRUD, { presenter, header, crud } from '@crud/crud';
+import rrOperation from '@crud/RR.operation';
+import crudOperation from '@crud/CRUD.operation';
+import pagination from '@crud/Pagination';
+import DateRangePicker from '@/components/DateRangePicker';
+
+export default {
+  components: { eForm, pagination, crudOperation, rrOperation, DateRangePicker },
+  cruds() {
+    return CRUD({ title: '七牛云文件', url: 'api/qiNiuContent', crudMethod: { ...crudQiNiu } });
+  },
+  mixins: [presenter(), header(), crud()],
+  data() {
+    return {
+      permission: {
+        del: ['admin', 'storage:del'],
+      },
+      title: '文件',
+      dialog: false,
+      icon: 'el-icon-refresh',
+      url: '',
+      headers: { Authorization: getToken() },
+      dialogImageUrl: '',
+      dialogVisible: false,
+      fileList: [],
+      files: [],
+      newWin: null,
+    };
+  },
+  computed: {
+    ...mapGetters(['qiNiuUploadApi']),
+  },
+  watch: {
+    url(newVal, oldVal) {
+      if (newVal && this.newWin) {
+        this.newWin.sessionStorage.clear();
+        this.newWin.location.href = newVal;
+        // 重定向后把url和newWin重置
+        this.url = '';
+        this.newWin = null;
+      }
+    },
+  },
+  created() {
+    this.crud.optShow.add = false;
+    this.crud.optShow.edit = false;
+  },
+  methods: {
+    // 七牛云配置
+    doConfig() {
+      const _this = this.$refs.form;
+      _this.init();
+      _this.dialog = true;
+    },
+    handleSuccess(response, file, fileList) {
+      const uid = file.uid;
+      const id = response.id;
+      this.files.push({ uid, id });
+    },
+    handleBeforeRemove(file, fileList) {
+      for (let i = 0; i < this.files.length; i++) {
+        if (this.files[i].uid === file.uid) {
+          crudQiNiu.del([this.files[i].id]).then(res => {});
+          return true;
+        }
+      }
+    },
+    handlePictureCardPreview(file) {
+      this.dialogImageUrl = file.url;
+      this.dialogVisible = true;
+    },
+    // 刷新列表数据
+    doSubmit() {
+      this.fileList = [];
+      this.dialogVisible = false;
+      this.dialogImageUrl = '';
+      this.dialog = false;
+      this.crud.toQuery();
+    },
+    // 监听上传失败
+    handleError(e, file, fileList) {
+      const msg = JSON.parse(e.message);
+      this.crud.notify(msg.message, CRUD.NOTIFICATION_TYPE.ERROR);
+    },
+    // 下载文件
+    download(id) {
+      this.downloadLoading = true;
+      // 先打开一个空的新窗口，再请求
+      this.newWin = window.open();
+      crudQiNiu
+        .download(id)
+        .then(res => {
+          this.downloadLoading = false;
+          this.url = res.url;
+        })
+        .catch(err => {
+          this.downloadLoading = false;
+          console.warn(err.message);
+        });
+    },
+    // 同步数据
+    synchronize() {
+      this.icon = 'el-icon-loading';
+      crudQiNiu
+        .sync()
+        .then(res => {
+          this.icon = 'el-icon-refresh';
+          this.$message({
+            showClose: true,
+            message: '数据同步成功',
+            type: 'success',
+            duration: 1500,
+          });
+          this.crud.toQuery();
+        })
+        .catch(err => {
+          this.icon = 'el-icon-refresh';
+          console.warn(err.message);
+        });
+    },
+  },
+};
+</script>
+
+<style scoped></style>

package/templates/vue-app/files/src/views/tools/swagger/index.vue

@@ -0,0 +1,14 @@
+<template>
+  <elFrame :src="swaggerApi" />
+</template>
+<script>
+import { mapGetters } from 'vuex';
+import elFrame from '@/components/Iframe/index';
+export default {
+  name: 'Swagger',
+  components: { elFrame },
+  computed: {
+    ...mapGetters(['swaggerApi']),
+  },
+};
+</script>