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, scope.row.index)"
          />
        </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>
        </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="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
            >
            <el-button
              type="text"
              @click="getCopy(scope.row)"
              v-hasPermi="['operation:recommend:copy']"
              >复制</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 {
history,
list,
listDetail,
remove,
submit,
tabList,
timeChange,
typeList,
} from "@/api/operation/recommend";
import { dialogCallBack } from "@/utils/DialogUtil";
export default {
  name: "OperationRecommend",
  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: "已失效",
        },
      ],
      // 当前数据缓存
      index: null,
    };
  },
  mounted() {
    this.getTabList();
    this.getTypeList();
  },
  methods: {
    // 导航列表
    getTabList() {
      tabList().then((res) => {
        if (res.code === 0) {
          res.data.map((i, index) => {
            i.index = index;
            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, index) {
      let e = this.tableData[index];
      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.getList(this.tableData[this.index], this.index);
            }
          });
        } else {
          return false;
        }
      });
    },

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

    // 弹窗
    getDialog(title, row) {
      this.index = this.tableData.findIndex((i) => i.id == row.id);
      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) {
      console.log("gadfqwerqweqr====000==");
      // this.dialogVisible_list = true;
      // this.loading = false;
      this.$router.push({
        path: `/operation/homePage/recommend/detail`,
        query:
          row.lv === 2
            ? {
                secondId: row.id,
                moduleTypeId: row.moduleTypeId,
              }
            : {
                threeId: row.id,
                moduleTypeId: row.moduleTypeId,
                boolean: boolean,
              },
      });
    },

    // 删除
    getDelete(row) {
      var that = this;
      dialogCallBack(that, function () {
        that
          .$confirm(`是否删除?`, "提示：", {
            type: "warning",
          })
          .then(() => {
            let index = that.tableData.findIndex((i) => i.id == row.categoryId);
            remove(row.lv, row.id).then((res) => {
              if (res.code === 0) {
                that.$message.success("删除成功！");
                that.getList(that.tableData[index], index);
              }
            });
          })
          .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();
        }
      });
    },

    // 复制
    getCopy(row) {
      this.$router.push({
        path: `/operation/homePage/recommend/detail`,
        query: {
          copyId: row.id,
          moduleTypeId: row.moduleTypeId,
        },
      });
    },

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

    typeFormatter(row) {
      return row.lv !== 1
        ? 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>