ohplay_system/src/views/operation/recommend/index.vue

<template>
  <div class="app-container">
    <!-- 列表 -->
    <el-table :data="tableData" ref="tableData" row-key="id" :default-sort="{ prop: 'sort', order: 'ascending' }"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
      <el-table-column width="80px">
        <template slot-scope="scope">
          <el-link v-if="scope.row.hidden" :underline="false" class="el-icon-arrow-right" @click="getList(scope.row)" />
        </template>
      </el-table-column>
      <el-table-column label="排序" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.lv === 2">{{ scope.row.sort }}</span>
        </template>
      </el-table-column>
      <el-table-column label="导航名称" align="center" prop="name" show-overflow-tooltip>
        <template slot-scope="scope">
          <span v-if="scope.row.lv === 1">{{ scope.row.name }}</span>
          <span v-else>{{ tabOptions.find(i => i.id == scope.row.categoryId).name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="模块类型" align="center" prop="moduleTypeId" show-overflow-tooltip :formatter="typeFormatter" />
      <el-table-column label="模块名称" align="center" prop="moduleName" show-overflow-tooltip />
      <el-table-column label="模块数量" align="center" prop="moduleNum" />
      <el-table-column label="创建时间" align="center" prop="createTime" show-overflow-tooltip />
      <el-table-column label="有效时间" align="center" width="380px">
        <template slot-scope="scope">
          <span v-if="scope.row.lv === 3">
            {{ scope.row.rsDates[0] }} - {{ scope.row.rsDates[1] }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="当前状态" align="center" prop="isProgressStatus" :formatter="statusFormatter" />
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.lv === 1">
            <el-button type="text" @click="getDialog('新增', scope.row)"
              v-hasPermi="['operation:recommend:add']">新增</el-button>
            <el-button type="text" @click="getHistoryDialog(scope.row.id)">历史记录</el-button>
          </span>
          <span v-else-if="scope.row.lv === 2">
            <el-button type="text" @click="getDetail(scope.row)" v-hasPermi="['operation:recommend:add']">新增</el-button>
            <el-button type="text" @click="getDialog('查看', scope.row)">查看</el-button>
            <el-button type="text" @click="getDialog('编辑', scope.row)"
              v-hasPermi="['operation:recommend:edit']">编辑</el-button>
            <el-button type="delete" @click="getDelete(scope.row)"
              v-hasPermi="['operation:recommend:delete']">删除</el-button>
          </span>
          <span v-else>
            <el-button type="text" @click="getDetail(scope.row, true)">查看</el-button>
            <el-button type="text" @click="getDetail(scope.row)" v-hasPermi="['operation:recommend:edit']">编辑</el-button>
            <el-button type="delete" @click="getDelete(scope.row)"
              v-hasPermi="['operation:recommend:delete']">删除</el-button>
          </span>
        </template>
      </el-table-column>
    </el-table>

    <!-- 弹窗 -->
    <el-dialog :visible.sync="dialogVisible" :title="title" width="500px" :before-close="cancel">
      <el-form :model="dialogForm" :rules="rules" ref="dialogForm" label-width="100px" :disabled="title === '查看'">
        <el-form-item label="模块类型：" prop="moduleTypeId">
          <el-select v-model="dialogForm.moduleTypeId" placeholder="请选择模块类型" :disabled="title === '编辑'">
            <el-option v-for="item in typeOptions" :key="item.typeId" :value="item.typeId" :label="item.typeName" />
          </el-select>
        </el-form-item>
        <el-form-item label="排序：" prop="sort">
          <el-input-number v-model="dialogForm.sort" :min="1" />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="cancel">取消</el-button>
        <el-button v-if="title !== '查看'" type="primary" @click="getSubmit">确定</el-button>
      </div>
    </el-dialog>

    <!-- 历史记录 -->
    <el-dialog :visible.sync="dialogVisible_list" title="历史记录" width="1200px">
      <el-form inline size="mini">
        <el-form-item label="创建时间：">
          <el-date-picker v-model="dialogForm_list.rsDates" type="datetimerange" start-placeholder="开始日期"
            end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss" />
        </el-form-item>
        <el-form-item label="模块名称：">
          <el-input v-model="dialogForm_list.moduleName" placeholder="请输入模块名称" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="getSearch">搜索</el-button>
          <el-button icon="el-icon-refresh" @click="getRefresh">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="dialogTableData" v-loading="loading">
        <el-table-column label="模块名称" prop="moduleName" align="center" show-overflow-tooltip />
        <el-table-column label="模块类型" prop="moduleTypeId" align="center" :formatter="typeFormatter" />
        <el-table-column label="模块数量" prop="moduleNum" align="center" />
        <el-table-column label="有效时间" align="center" width="380px">
          <template slot-scope="scope">
            <span>{{ scope.row.rsDates[0] }} - {{ scope.row.rsDates[1] }}</span>
          </template>
        </el-table-column>
        <el-table-column label="当前状态" prop="isProgressStatus" align="center" :formatter="statusFormatter" />
        <el-table-column label="创建时间" prop="createTime" align="center" show-overflow-tooltip />
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="getDetail(scope.row, true)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total > 0" :total="total" :page.sync="dialogForm_list.pageNum"
        :limit.sync="dialogForm_list.pageSize" @pagination="getHistoryList" />
    </el-dialog>
  </div>
</template>

<script>
import { tabList, typeList, list, submit, listDetail, remove, history, timeChange } from '@/api/operation/recommend'
export default {
  data() {
    return {
      // 遮罩层
      loading: false,
      // 列表
      tableData: [],
      // 弹窗
      dialogVisible: false,
      dialogVisible_list: false,
      // 弹窗表单
      dialogForm: {},
      dialogForm_list: {
        pageNum: 1,
        pageSize: 10
      },
      // 弹窗title
      title: '新增',
      // 弹窗列表
      dialogTableData: [],
      // 总数据
      total: 0,
      // 导航栏
      tabOptions: [],
      // 模块类型
      typeOptions: [],
      // 校验
      rules: {
        categoryId: [{
          required: true, message: '请选择导航', tigger: 'change'
        }],
        moduleTypeId: [{
          required: true, message: '请选择模块类型', tigger: 'change'
        }],
        sort: [{
          required: true, type: 'number', message: '请选择排序', tirgger: 'blur, change'
        }]
      },
      // 当前状态
      statusOptions: [{
        value: 0,
        label: '生效中'
      }, {
        value: 1,
        label: '未生效'
      }, {
        value: 2,
        label: '未配置时间'
      }, {
        value: 3,
        label: '已失效'
      }]
    }
  },
  mounted() {
    this.getTabList()
    this.getTypeList()
  },
  methods: {
    // 导航列表
    getTabList() {
      tabList().then(res => {
        if (res.code === 0) {
          res.data.map(i => {
            i.hidden = true
            i.children = []
          })
          this.tabOptions = res.data
          this.tableData = res.data
        }
      })
    },

    // 模块列表
    getTypeList() {
      typeList().then(res => {
        if (res.code === 0) {
          this.typeOptions = res.data
        }
      })
    },

    // 首次获取二级列表
    getList(row) {
      let e = this.tableData[row.tabIndex - 1]
      list(row.id).then(res => {
        if (res.code === 0) {
          if (res.data.length > 0) {
            e.children = res.data
            e.hidden = false
            this.$nextTick(() => {
              this.$refs.tableData.toggleRowExpansion(row, true)
            })
          } else {
            this.$message.warning('暂无模块！')
          }
        }
      })
    },

    // 提交二级
    getSubmit() {
      this.$refs.dialogForm.validate((valid) => {
        if (valid) {
          submit(this.dialogForm).then(res => {
            if (res.code === 0) {
              this.$message.success('提交成功')
              this.cancel()
              this.getTabList()
            }
          })
        } else {
          return false
        }
      })
    },

    // 取消
    cancel() {
      this.dialogVisible = false
      this.$refs.dialogForm.resetFields()
      this.dialogForm = {}
    },

    // 弹窗
    getDialog(title, row) {
      this.title = title
      this.dialogVisible = true
      this.dialogForm.categoryId = row.id
      if (row.lv === 2) {
        listDetail(row.id).then(res => {
          if (res.code === 0) {
            this.dialogForm = res.data
          }
        })
      }
    },

    // 详情页
    getDetail(row, boolean) {
      this.$router.push({
        path: `/operation/recommend/detail`,
        query: row.lv === 2 ? {
          secondId: row.id,
          moduleTypeId: row.moduleTypeId
        } : {
          threeId: row.id,
          moduleTypeId: row.moduleTypeId,
          boolean: boolean
        }
      })
    },

    // 删除
    getDelete(row) {
      this.$confirm(`是否删除?`, '提醒', {
        type: 'warning'
      }).then(() => {
        remove(row.lv, row.id).then(res => {
          if (res.code === 0) {
            this.$message.success('删除成功！')
            this.getTabList()
          }
        })
      }).catch(() => { })
    },

    // 历史记录
    getHistoryDialog(id) {
      this.dialogVisible_list = true
      this.loading = true
      this.dialogForm_list.categoryId = id
      this.getHistoryList()
    },

    // 历史记录列表
    getHistoryList() {
      history(this.dialogForm_list).then(res => {
        if (res.code === 0) {
          this.dialogTableData = res.data.records
          this.total = res.data.total
          this.loading = false
        }
      })
    },

    // 搜索
    getSearch() {
      this.dialogForm_list.pageNum = 1
      this.getHistoryList()
    },

    // 重置
    getRefresh() {
      this.dialogForm_list = {
        pageNum: 1,
        pageSize: 10,
        categoryId: this.dialogForm_list.categoryId
      }
      this.getHistoryList()
    },

    // 有效时间
    getChange(row) {
      timeChange({
        moduleId: row.id,
        timeList: row.rsDates
      }).then(res => {
        if (res.code === 0) {
          this.$message.success('修改成功！')
          this.getTabList()
        }
      })
    },

    // 字典翻译
    statusFormatter(row) {
      return this.selectDictLabel(this.statusOptions, row.isProgressStatus)
    },

    typeFormatter(row) {
      return row.moduleTypeId ? this.typeOptions.find(i => i.typeId === row.moduleTypeId).typeName : ''
    }
  }
}
</script>

<style lang="scss">
.popper-class {
  .el-picker-panel__footer {
    button:first-child {
      display: none;
    }
  }
}
</style>