|
|
@@ -0,0 +1,452 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container">
|
|
|
+ <!-- 筛选条件 -->
|
|
|
+ <div class="screen-container">
|
|
|
+ <div class="top clearfix">
|
|
|
+ <div class="title fl">条件筛选</div>
|
|
|
+ </div>
|
|
|
+ <el-form ref="screenForm" :model="screenForm" label-width="60px" size="small" label-position="left">
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :xs="24" :sm="14" :lg="14">
|
|
|
+ <el-form-item label="标题" prop="title">
|
|
|
+ <el-input v-model="screenForm.title" placeholder="请输入标题"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="4" :lg="4">
|
|
|
+ <el-form-item label="是否强制提醒" prop="isNotice" label-width="100px">
|
|
|
+ <el-select v-model="screenForm.isNotice" placeholder="请选择">
|
|
|
+ <el-option
|
|
|
+ v-for="item in [
|
|
|
+ { value: true, label: '是' },
|
|
|
+ { value: false, label: '否' }
|
|
|
+ ]"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="6" :lg="6" class="tr">
|
|
|
+ <el-form-item label="">
|
|
|
+ <el-button size="small" @click="resetScreenForm">清空</el-button>
|
|
|
+ <el-button size="small" type="primary" @click="submitScreenForm">搜索</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="mymain-container">
|
|
|
+ <div class="btn-group clearfix">
|
|
|
+ <div class="fl">
|
|
|
+ <el-button
|
|
|
+ class="fl"
|
|
|
+ size="small"
|
|
|
+ type="primary"
|
|
|
+ icon="el-icon-plus"
|
|
|
+ @click="clickImport()"
|
|
|
+ v-if="userInfo.type == 1"
|
|
|
+ >新增</el-button
|
|
|
+ >
|
|
|
+ <div class="tips fl">导入模板第一行必须为空白行、第一列必须为公司编号（S9219801）、第二列必须为网点S编号</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="table">
|
|
|
+ <el-table
|
|
|
+ v-loading="listLoading"
|
|
|
+ :data="dataList"
|
|
|
+ element-loading-text="Loading"
|
|
|
+ border
|
|
|
+ fit
|
|
|
+ highlight-current-row
|
|
|
+ stripe
|
|
|
+ >
|
|
|
+ <el-table-column align="center" label="操作" fixed width="160">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button type="text" @click="openDetail(scope.row.id)" v-if="checkBtnRole('edit')">详情</el-button>
|
|
|
+ <el-button type="text" @click="download(scope.row)" v-if="checkBtnRole('edit')">下载</el-button>
|
|
|
+ <el-popconfirm
|
|
|
+ style="margin-left: 10px"
|
|
|
+ title="确定删除吗？"
|
|
|
+ @onConfirm="deleteData(scope.row.id)"
|
|
|
+ v-if="userInfo.type == 1"
|
|
|
+ >
|
|
|
+ <el-button slot="reference" type="text">删除</el-button>
|
|
|
+ </el-popconfirm>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ label="标题"
|
|
|
+ prop="title"
|
|
|
+ min-width="140"
|
|
|
+ show-overflow-tooltip
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column align="center" label="操作人" prop="operatorUserName" min-width="140" show-overflow-tooltip>
|
|
|
+ <template slot-scope="scope"> {{ scope.row.operatorNickName }}({{ scope.row.operatorUserName }}) </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column align="center" prop="isNotice" label="是否强制提醒" show-overflow-tooltip>
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ scope.row.isNotice ? '是' : '否' }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column align="center" prop="isPwd" label="是否需要密码">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ scope.row.isPwd ? '是' : '否' }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ prop="remark"
|
|
|
+ label="备注"
|
|
|
+ min-width="140"
|
|
|
+ show-overflow-tooltip
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ label="创建时间"
|
|
|
+ prop="createTime"
|
|
|
+ min-width="160"
|
|
|
+ show-overflow-tooltip
|
|
|
+ ></el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="pagination clearfix">
|
|
|
+ <div class="fr">
|
|
|
+ <el-pagination
|
|
|
+ @size-change="handleSizeChange"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ :current-page="currentPage"
|
|
|
+ :page-sizes="[10, 20, 30, 50]"
|
|
|
+ :page-size="10"
|
|
|
+ layout="total, sizes, prev, pager, next, jumper"
|
|
|
+ :total="listTotal"
|
|
|
+ >
|
|
|
+ </el-pagination>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 新增 -->
|
|
|
+ <el-dialog
|
|
|
+ title="新增"
|
|
|
+ :visible.sync="importFormDialog"
|
|
|
+ :show-close="false"
|
|
|
+ width="40%"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ >
|
|
|
+ <el-form ref="importForm" label-position="left" label-width="80px">
|
|
|
+ <el-form-item label="标题" prop="title">
|
|
|
+ <el-input v-model="importForm.title" placeholder="请输入标题"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="上传文件" prop="fileUrl">
|
|
|
+ <ImageUpload :fileList="fileList" :limit="1" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="是否强制提醒" prop="isNotice" label-width="100px">
|
|
|
+ <el-radio-group v-model="importForm.isNotice">
|
|
|
+ <el-radio :label="true">是</el-radio>
|
|
|
+ <el-radio :label="false">否</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="下载密码" prop="downloadPwd">
|
|
|
+ <el-input v-model="importForm.downloadPwd" placeholder="请输入下载密码"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="备注" prop="remark">
|
|
|
+ <el-input type="textarea" v-model="importForm.remark" placeholder="请输入备注"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="cancelImportForm">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="submitImportForm">确 定</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ <!-- 详情 -->
|
|
|
+ <el-dialog title="详情" :visible.sync="detailDialog" :show-close="false" width="70%" :close-on-click-modal="false">
|
|
|
+ <div class="table" style="margin: 10px 0 20px">
|
|
|
+ <el-table
|
|
|
+ v-loading="detailTable_listLoading"
|
|
|
+ :data="detailTable_dataList"
|
|
|
+ element-loading-text="Loading"
|
|
|
+ tooltip-effect="dark"
|
|
|
+ style="width: 100%"
|
|
|
+ max-height="270"
|
|
|
+ >
|
|
|
+ <el-table-column align="center" label="序号" type="index" width="50"></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ prop="title"
|
|
|
+ label="标题"
|
|
|
+ min-width="140"
|
|
|
+ show-overflow-tooltip
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column align="center" prop="websitNumber" label="网点名称" min-width="140" show-overflow-tooltip>
|
|
|
+ <template slot-scope="scope"> {{ scope.row.websitName }}({{ scope.row.websitNumber }}) </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column align="center" prop="isNotice" label="是否强制提醒" show-overflow-tooltip>
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ scope.row.isNotice ? '是' : '否' }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ prop="remark"
|
|
|
+ label="备注"
|
|
|
+ min-width="140"
|
|
|
+ show-overflow-tooltip
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column align="center" prop="createTime" label="下载时间" min-width="160"></el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ <div class="pagination clearfix">
|
|
|
+ <div class="fr">
|
|
|
+ <el-pagination
|
|
|
+ @current-change="detailTableCurrentChange"
|
|
|
+ :current-page="detailTable_currentPage"
|
|
|
+ :page-size="detailTable_pageSize"
|
|
|
+ background
|
|
|
+ layout="prev, pager, next"
|
|
|
+ :total="detailTable_listTotal"
|
|
|
+ >
|
|
|
+ </el-pagination>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="detailDialog = false">关 闭</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { getToken } from '@/utils/auth'
|
|
|
+import { getList, getDownloadList, deleteData, exportFile, handleImport } from '@/api/fileDeliveryPage/fileDeliveryPage'
|
|
|
+import ImageUpload from '@/components/file-upload'
|
|
|
+import { downloadFiles } from '@/utils/util'
|
|
|
+import request from '@/utils/request'
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ ImageUpload
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ baseURL: process.env.VUE_APP_BASE_API,
|
|
|
+ myHeaders: { 'x-token': getToken() },
|
|
|
+ dataList: null, // 列表数据
|
|
|
+ listLoading: true, // 列表加载loading
|
|
|
+ currentPage: 1, // 当前页码
|
|
|
+ pageSize: 10, // 每页数量
|
|
|
+ listTotal: 0, // 列表总数
|
|
|
+ screenForm: {
|
|
|
+ // 筛选表单数据
|
|
|
+ title: '',
|
|
|
+ isNotice: ''
|
|
|
+ },
|
|
|
+ importForm: {
|
|
|
+ title: '',
|
|
|
+ remark: '',
|
|
|
+ isNotice: false,
|
|
|
+ downloadPwd: ''
|
|
|
+ },
|
|
|
+ importFormDialog: false,
|
|
|
+ fileList: [],
|
|
|
+ detailDialog: false, // 详情 - 弹窗
|
|
|
+ detailTable_dataList: null, // 详情 - 列表数据
|
|
|
+ detailTable_listLoading: true, // 详情 - 列表加载loading
|
|
|
+ detailTable_currentPage: 1, // 详情 - 当前页码
|
|
|
+ detailTable_pageSize: 10, // 详情 - 每页数量
|
|
|
+ detailTable_listTotal: 0 // 详情 - 列表总数
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ userInfo() {
|
|
|
+ return JSON.parse(localStorage.getItem('greemall_user') || '{}')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 查询按钮权限
|
|
|
+ checkBtnRole(value) {
|
|
|
+ return true
|
|
|
+ let btnRole = this.$route.meta.roles
|
|
|
+ if (!btnRole) {
|
|
|
+ return true
|
|
|
+ }
|
|
|
+ let index = btnRole.indexOf(value)
|
|
|
+ return index >= 0 ? true : false
|
|
|
+ },
|
|
|
+
|
|
|
+ // 获取列表
|
|
|
+ getList() {
|
|
|
+ this.listLoading = true
|
|
|
+ let params = {
|
|
|
+ pageNo: this.currentPage,
|
|
|
+ pageSize: this.pageSize,
|
|
|
+ title: this.screenForm.title,
|
|
|
+ isNotice: this.screenForm.isNotice
|
|
|
+ }
|
|
|
+ getList(params).then(res => {
|
|
|
+ this.listLoading = false
|
|
|
+ this.dataList = res.data ? res.data.records : []
|
|
|
+ this.listTotal = res.data ? res.data.total : 0
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ // 更改每页数量
|
|
|
+ handleSizeChange(val) {
|
|
|
+ this.pageSize = val
|
|
|
+ this.currentPage = 1
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+
|
|
|
+ // 更改当前页
|
|
|
+ handleCurrentChange(val) {
|
|
|
+ this.currentPage = val
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+
|
|
|
+ // 提交筛选表单
|
|
|
+ submitScreenForm() {
|
|
|
+ this.currentPage = 1
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+
|
|
|
+ // 重置筛选表单
|
|
|
+ resetScreenForm() {
|
|
|
+ this.$refs.screenForm.resetFields()
|
|
|
+ this.currentPage = 1
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+
|
|
|
+ // 操作 - 删除
|
|
|
+ deleteData(id) {
|
|
|
+ deleteData({ id }).then(res => {
|
|
|
+ this.getList()
|
|
|
+ this.$successMsg()
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ // 详情 - 获取列表
|
|
|
+ getDownloadList() {
|
|
|
+ getDownloadList({
|
|
|
+ pageNo: this.detailTable_currentPage,
|
|
|
+ pageSize: this.detailTable_pageSize,
|
|
|
+ id: this.detailId
|
|
|
+ }).then(res => {
|
|
|
+ this.detailTable_dataList = res.data.records
|
|
|
+ this.detailTable_listTotal = res.data.total
|
|
|
+ this.detailTable_listLoading = false
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ // 详情 - 打开弹窗
|
|
|
+ openDetail(id) {
|
|
|
+ this.detailId = id
|
|
|
+ this.detailDialog = true
|
|
|
+ this.detailTable_currentPage = 1
|
|
|
+ this.getDownloadList()
|
|
|
+ },
|
|
|
+
|
|
|
+ // 详情 - 更改列表当前页
|
|
|
+ detailTableCurrentChange(val) {
|
|
|
+ this.detailTable_currentPage = val
|
|
|
+ this.getDownloadList()
|
|
|
+ },
|
|
|
+
|
|
|
+ // 点击导入
|
|
|
+ clickImport() {
|
|
|
+ this.importFormDialog = true
|
|
|
+ },
|
|
|
+
|
|
|
+ // 取消 导入
|
|
|
+ cancelImportForm() {
|
|
|
+ this.importFormDialog = false
|
|
|
+ this.fileList = []
|
|
|
+ this.importForm.title = ''
|
|
|
+ },
|
|
|
+
|
|
|
+ // 导入
|
|
|
+ async submitImportForm() {
|
|
|
+ if (!this.importForm.title) {
|
|
|
+ return this.$errorMsg('请填写标题')
|
|
|
+ }
|
|
|
+ if (this.fileList.length <= 0) {
|
|
|
+ return this.$errorMsg('请上传文件')
|
|
|
+ }
|
|
|
+ const loading = this.$loading({
|
|
|
+ lock: true,
|
|
|
+ text: 'Loading',
|
|
|
+ spinner: 'el-icon-loading',
|
|
|
+ background: 'rgba(0, 0, 0, 0.7)'
|
|
|
+ })
|
|
|
+ const formData = {
|
|
|
+ file: this.fileList[0].url,
|
|
|
+ title: this.importForm.title,
|
|
|
+ remark: this.importForm.remark,
|
|
|
+ isNotice: this.importForm.isNotice,
|
|
|
+ downloadPwd: this.importForm.downloadPwd
|
|
|
+ }
|
|
|
+ handleImport(formData)
|
|
|
+ .then(res => {
|
|
|
+ this.fileList = []
|
|
|
+ this.getList()
|
|
|
+ this.importFormDialog = false
|
|
|
+ })
|
|
|
+ .catch(res => {
|
|
|
+ this.$errorMsg(res.message)
|
|
|
+ })
|
|
|
+ .finally(res => {
|
|
|
+ loading.close()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //下载
|
|
|
+ download(item) {
|
|
|
+ if (item.isPwd) {
|
|
|
+ this.$prompt('请输入下载密码', '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ inputValidator: value => {
|
|
|
+ //非空验证
|
|
|
+ if (!value) {
|
|
|
+ return '密码不能为空！'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .then(({ value }) => {
|
|
|
+ let screenData = {
|
|
|
+ id: item.id,
|
|
|
+ downloadPwd: value
|
|
|
+ }
|
|
|
+ downloadFiles('comAll/list/download', screenData)
|
|
|
+ })
|
|
|
+ .catch(() => {})
|
|
|
+ } else {
|
|
|
+ this.handleExport(item)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 导出
|
|
|
+ handleExport(item) {
|
|
|
+ let screenData = {
|
|
|
+ id: item.id
|
|
|
+ }
|
|
|
+ downloadFiles('comAll/list/download', screenData)
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.tips {
|
|
|
+ font-size: 14px;
|
|
|
+ color: red;
|
|
|
+ line-height: 32px;
|
|
|
+ margin-left: 10px;
|
|
|
+}
|
|
|
+</style>
|
linwenxin