小工具管理

src/views/backstage/appletMgt/applet/add.vue

+<template>
+  <!-- 表单渲染 -->
+  <el-dialog append-to-body :close-on-click-modal="false" :before-close="cancelView" :visible="visible" :title="title" width="900px">
+    <el-form ref="formViewRef" :model="formData" :rules="rules" :status-icon="true" label-width="240px">
+      <el-form-item label="选择分类：" class="form-cell" style="margin: 0">
+        <div class="cell-box" style="display: flex">
+          <el-form-item prop="type">
+            <el-select v-model="formData.type" placeholder="请选择">
+              <el-option v-for="item in dict.tools_class" :key="item.id" :label="item.label" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </div>
+      </el-form-item>
+      <el-form-item label="软件工具名称：" class="form-cell" prop="title">
+        <div class="cell-box">
+          <el-input v-model="formData.title" placeholder="单行输入" class="cell-input" />
+        </div>
+      </el-form-item>
+      <el-form-item label="标签：" class="form-cell" prop="feature">
+        <div class="cell-box">
+          <el-tag
+            v-for="tag in feature"
+            :key="tag"
+            closable
+            size="small"
+            :disable-transitions="false"
+            @close="handleClose(tag)"
+          >
+            {{ tag }}
+          </el-tag>
+          <el-input
+            v-show="inputVisible"
+            ref="saveTagInput"
+            v-model="inputValue"
+            class="input-new-tag"
+            placeholder="请输入特点标签文本"
+            @keyup.enter.native="handleInputConfirm"
+            @blur="handleInputConfirm"
+          />
+          <el-button v-show="!inputVisible && feature.length < 3" plain round class="button-new-tag" icon="el-icon-price-tag" @click="showInput">添加</el-button>
+        </div>
+      </el-form-item>
+      <el-form-item label="介绍说明：" class="form-cell" prop="notes">
+        <div class="cell-box">
+          <el-input v-model="formData.contentAbstract" type="textarea" placeholder="请输入文本" maxlength="300" :autosize="{ minRows: 4, maxRows: 4}" show-word-limit resize="none" class="cell-input" />
+        </div>
+      </el-form-item>
+      <el-form-item label="上传软件工具：" class="form-cell">
+        <div class="cell-box">
+          <el-upload
+            ref="uploadApp"
+            :before-upload="beforeUpload"
+            :auto-upload="false"
+            :headers="uploadHeaders"
+            :on-success="handleSuccess"
+            :on-error="handleError"
+            action="/api/miningManagement/uploadExcelOrFbx"
+            :data="{}"
+          >
+            <div class="eladmin-upload"><i class="el-icon-upload" /> 添加.exe文件 </div>
+            <div slot="tip" class="el-upload__tip">请上传文件，且不超过20M</div>
+          </el-upload>
+        </div>
+      </el-form-item>
+      <el-form-item label="上传LOGO：" class="form-cell">
+        <div class="cell-box">
+          <el-upload
+            ref="uploadLogo"
+            :before-upload="beforeUpload"
+            :auto-upload="false"
+            :headers="uploadHeaders"
+            :on-success="handleSuccess"
+            :on-error="handleError"
+            action="/api/miningManagement/uploadExcelOrFbx"
+            :data="{}"
+          >
+            <div class="eladmin-upload"><i class="el-icon-upload" /> 添加.gif/jpg/jpeg文件 </div>
+            <div slot="tip" class="el-upload__tip">请上传文件，且不超过20M</div>
+          </el-upload>
+        </div>
+      </el-form-item>
+
+    </el-form>
+    <div slot="footer" class="dialog-footer" style="text-align: center">
+      <el-button @click="cancelView">关闭</el-button>
+      <el-button type="primary" @click="submitForm(true)">提交</el-button>
+    </div>
+  </el-dialog>
+</template>
+<script>
+import { getToken } from '@/utils/auth'
+import { HttpReq } from '@/api/common'
+
+export default {
+  dicts: ['tools_class'],
+  data() {
+    return {
+      uploadHeaders: { 'Authorization': getToken() },
+      dialogImgUrl: '',
+      dialogImgVisible: false,
+      visible: false,
+      title: '上传小工具',
+      feature: [],
+      inputVisible: false,
+      inputValue: '',
+      formData: {
+        id: null,
+        title: '', // 标题
+        type: '1', // 类型
+        subType: '1',
+        source: '', // 来源
+        content: '', // 内容
+        picture: '', // 图片
+        contentAbstract: '', // 摘要
+        url: '' // 链接
+      },
+      rules: {}
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    // 上传
+    upload() {
+      this.$refs.uploadApp.submit()
+      this.$refs.uploadLogo.submit()
+    },
+    beforeUpload(file) {
+      let isLt2M = true
+      isLt2M = file.size / 1024 / 1024 < 20
+      if (!isLt2M) {
+        this.loading = false
+        this.$message.error('上传文件大小不能超过 100MB!')
+      }
+      return isLt2M
+    },
+    handleSuccess(res, file, fileList) {
+      this.$notify({
+        title: res.msg,
+        type: res.code === 200 ? 'success' : 'error',
+        duration: 2500
+      })
+      if (res.code === 200) {
+        this.cancelView()
+      }
+    },
+    handleError(e, file, fileList) {
+      const msg = JSON.parse(e.message)
+      this.$notify({
+        title: msg.message,
+        type: 'error',
+        duration: 2500
+      })
+      this.loading = false
+    },
+    // 标签
+    handleClose(tag) {
+      this.feature.splice(this.feature.indexOf(tag), 1)
+      this.formData.feature = this.feature.join(';')
+    },
+    showInput() {
+      this.inputVisible = true
+      this.$nextTick(_ => {
+        this.$refs.saveTagInput.$refs.input.focus()
+      })
+    },
+    handleInputConfirm() {
+      const inputValue = this.inputValue
+      if (inputValue && !this.feature.filter(item => { return item === inputValue }).length) {
+        this.feature.push(inputValue)
+        this.formData.feature = this.feature.join(';')
+      }
+      this.inputValue = ''
+      this.inputVisible = false
+    },
+    showView() {
+      this.visible = true
+    },
+    hideView() {
+      if (this.$refs.uploadApp) {
+        this.$refs.uploadApp.clearFiles()
+      }
+      if (this.$refs.uploadLogo) {
+        this.$refs.uploadLogo.clearFiles()
+      }
+      this.$refs.formViewRef.resetFields()
+      this.visible = false
+    },
+    cancelView() {
+      this.hideView()
+    },
+    submitForm(isRelease) {
+      this.$refs.formViewRef.validate((valid, obj) => {
+        if (valid) {
+          if (this.formData.newsPageId) {
+            HttpReq.backstageApi.updateNewsPage(this.formData).then((res) => {
+              this.$notify({
+                title: res.msg,
+                type: res.code === 200 ? 'success' : 'error'
+              })
+              if (res.code === 200) {
+                if (isRelease) {
+                  this.release()
+                } else {
+                  this.cancelView()
+                  this.$parent.loadData()
+                }
+              }
+            })
+          } else {
+            HttpReq.backstageApi.addNewsPage(this.formData).then((res) => {
+              this.$notify({
+                title: res.msg,
+                type: res.code === 200 ? 'success' : 'error'
+              })
+              if (res.code === 200) {
+                if (isRelease) {
+                  this.release()
+                } else {
+                  this.cancelView()
+                  this.$parent.loadData()
+                }
+              }
+            })
+          }
+        } else {
+          this.$message({
+            message: '表单信息有误，请核对无误后提交！',
+            type: 'error'
+          })
+        }
+      })
+    },
+    loadData(item) {
+      this.showView()
+      this.$nextTick(() => {
+
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.grid-content {
+  border: 1px solid rgba(100, 100, 100, 0.3);
+  padding: 0;
+}
+.grid-label {
+  background: #dedede;
+  padding: 0 10px;
+}
+.editor{
+  text-align:left;
+  width: 680px;
+}
+::v-deep .w-e-text-container {
+  height: 560px !important;
+}
+.cell-box {
+  min-width: 120px;
+  .cell-input {
+    width: 420px;
+  }
+  .cell-select {
+    width: 220px;
+  }
+  .el-tag + .el-tag {
+    margin-left: 10px;
+  }
+  .button-new-tag {
+    margin-left: 10px;
+    height: 28px;
+    line-height: 24px;
+    padding: 0 8px;
+  }
+  .input-new-tag {
+    width: 140px;
+    height: 28px;
+    margin-left: 10px;
+    vertical-align: bottom;
+  }
+  >>>.el-input__inner {
+    border: 1px solid rgba(100, 100, 100, 0.1);
+    border-bottom: 1px solid rgba(100, 100, 100, 0.2);
+    border-radius: 5px;
+  }
+  >>>.el-input.is-disabled .el-input__inner {
+    border-radius: 0;
+    border: 0;
+    border-bottom: 1px solid rgba(100, 100, 100, 0.4);
+    background: white;
+    cursor: text;
+  }
+  >>>.el-input.is-disabled .el-input__icon {
+    cursor: text;
+  }
+  >>>.el-icon-circle-check {
+    color: #13ce66;
+  }
+  //>>>.el-icon-arrow-up:before {
+  //  content: '';
+  //}
+}
+</style>

src/views/backstage/appletMgt/applet/index.vue

+<template>
+  <div class="app-container">
+    <!--工具栏-->
+    <div class="head-container">
+      <el-input v-model="query.name" clearable placeholder="请输入工具名称" style="width:280px;" />
+      <el-select v-model="query.type" clearable placeholder="请选择分类" style="width: 150px">
+        <el-option v-for="item in dict.tools_class" :key="item.value" :label="item.label" :value="item.value" />
+      </el-select>
+      <el-input v-model="query.name" clearable placeholder="请输入标签名称" style="width:280px;" />
+      <el-select v-model="query.type" clearable placeholder="请选择状态" style="width: 150px">
+        <el-option v-for="item in dict.norm_status" :key="item.value" :label="item.label" :value="item.value" />
+      </el-select>
+      <date-range-picker v-model="query.updateTime" size="mini" start-placeholder="上架开始日期" style="width: 320px" />
+      <el-button type="success" icon="el-icon-search" @click="toSearch">搜索</el-button>
+      <el-button type="warning" icon="el-icon-refresh" @click="clearLimit">重置</el-button>
+    </div>
+    <div class="toolbar">
+      <div>
+        <el-button type="danger" icon="el-icon-download" :disabled="!multipleSelection.length" @click="batchOperate(0, null)">下架</el-button>
+        <el-button type="success" icon="el-icon-finished" :disabled="!multipleSelection.length" @click="batchOperate(1, null)">上架</el-button>
+      </div>
+      <div style="text-align: right">
+        <el-button type="primary" icon="el-icon-upload2" @click="toAdd">上传app</el-button>
+      </div>
+    </div>
+    <!-- 表格 -->
+    <div class="content">
+      <el-table id="dataTable" ref="dataTable" v-loading="loading" :data="tableData" tooltip-effect="dark" style="width:auto;min-height: 70vh" @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="55" />
+        <el-table-column type="index" width="55" label="序号" :index="indexMethod" />
+        <el-table-column prop="productId" label="ID" width="100" />
+        <el-table-column prop="productName" label="小工具名称" />
+        <el-table-column prop="productType" label="分类" width="140" :formatter="(row, col, val)=>{return dict.label.tools_class[val]}" />
+        <el-table-column prop="productName" label="标签" />
+        <el-table-column label="状态" width="100">
+          <template slot-scope="scope">
+            <div :style="'color:'+textColors[scope.row.status]">{{ dict.label.norm_status[scope.row.status] }}</div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="updateTime" label="最后维护日期" align="center" width="180" />
+        <el-table-column label="操作" align="center" width="200">
+          <template slot-scope="scope">
+            <el-tooltip v-show="scope.row.status==5" content="下架"><el-button round plain type="danger" icon="el-icon-download" @click="batchOperate(0, scope.row)" /></el-tooltip>
+            <el-tooltip v-show="scope.row.status==4" content="上架"><el-button round plain type="success" icon="el-icon-finished" @click="batchOperate(1, scope.row)" /></el-tooltip>
+          </template>
+        </el-table-column>
+      </el-table>
+      <!--分页组件-->
+      <el-pagination :total="total" :current-page="page" :page-size="pageSize" style="margin-top: 8px;" layout="total, prev, pager, next, sizes" @size-change="sizeChange" @current-change="pageChange" />
+    </div>
+    <add-page ref="addPage" />
+  </div>
+</template>
+<script>
+import { HttpReq } from '@/api/common'
+import DateRangePicker from '@/components/DateRangePicker'
+import addPage from './add'
+
+export default {
+  components: { DateRangePicker, addPage },
+  dicts: ['norm_status', 'tools_class'],
+  data() {
+    return {
+      textColors: ['#ccc', '#000', '#f00', '#000',
+        '#000', '#32cd32', '#bba'],
+      loading: false,
+      page: 1,
+      pageSize: 20,
+      total: 0,
+      query: {},
+      tableData: [],
+      currentTime: '',
+      multipleSelection: []
+    }
+  },
+  mounted() {
+    this.currentTimeFn()
+    this.$nextTick(() => {
+      this.loadData()
+    })
+  },
+  methods: {
+    indexMethod(index) {
+      return 1 + index + this.page * this.pageSize - this.pageSize
+    },
+    handleSelectionChange(val) {
+      this.multipleSelection = val
+    },
+    loadData() {
+      // 清除参数无值的情况
+      Object.keys(this.query).length !== 0 && Object.keys(this.query).forEach(item => {
+        if (this.query[item] === null || this.query[item] === '') this.query[item] = undefined
+      })
+      HttpReq.backstageApi.queryProduct({
+        page: this.page - 1,
+        pageSize: this.pageSize,
+        ...this.query
+      }).then((res) => {
+        this.tableData = res.data.data
+        this.total = res.data.total
+      })
+    },
+    batchOperate(type, row) {
+      if (!row && !this.multipleSelection.length) {
+        return this.$message({
+          message: '未选取数据',
+          type: 'info'
+        })
+      }
+      HttpReq.backstageApi.batchReleaseAndRecovery({
+        ids: row ? [row.productId] : this.multipleSelection.map(item => { return item.productId }),
+        type: type
+      }).then((res) => {
+        this.$notify({
+          title: res.msg,
+          type: res.code === 200 ? 'success' : 'error',
+          duration: 2500
+        })
+        this.loadData()
+      })
+    },
+    toAdd() {
+      this.$refs.addPage.loadData()
+    },
+    toEdit(item) {
+      this.$refs.addPage.loadData(item)
+    },
+    toSearch() {
+      this.page = 1
+      this.loadData()
+    },
+    clearLimit() {
+      this.query = {}
+      this.currentTimeFn()
+      this.loadData()
+    },
+    pageChange(e) {
+      this.page = e
+      this.loadData()
+    },
+    sizeChange(e) {
+      this.page = 1
+      this.pageSize = e
+      this.loadData()
+    },
+    currentTimeFn() {
+      var date = new Date()
+      var year = date.getFullYear()
+      var month = date.getMonth() + 1
+      var day = date.getDate()
+      if (month >= 1 && month <= 9) {
+        month = '0' + month
+      }
+      if (day >= 0 && day <= 9) {
+        day = '0' + day
+      }
+      this.currentTime = year + '-' + month + '-' + day
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.toolbar {
+  display: flex;
+  justify-content: space-between;
+}
+.content {
+  margin-top: 15px;
+  overflow: auto;
+}
+</style>