zc_saas_admin/src/views/2Cport/referralManageMent/tab1/tab1.vue

<template>
  <div id="tab1">
    <div class="postMs">
      <el-tabs v-model="activeName">
        <el-tab-pane label="推荐课程" name="first"></el-tab-pane>
        <el-tab-pane label="推荐题库" name="second"></el-tab-pane>
      </el-tabs>
      <el-button class="topPost" size="mini" type="success" @click="add"
        >添加</el-button
      >
    </div>
    <div>
      <el-table
        v-loading="loading"
        :data="tableData"
        style="width: 100%; margin-top: 10px"
        border
      >
        <template v-for="(item, index) in tableSet">
          <af-table-column
            :width="item.width"
            :key="index"
            :prop="item.prop"
            :label="item.label"
            align="center"
          >
            <template slot-scope="scope">
              <span v-if="item.scope === 'status'">
                {{
                  scope.row[item.prop] === 1
                    ? "启用"
                    : scope.row[item.prop] === 0
                    ? "关闭"
                    : "未知"
                }}
              </span>
              <div v-else-if="item.scope === 'businType'">
                {{ scope.row[item.prop1] + "-" + scope.row[item.prop2] }}
              </div>
              <div v-else-if="item.scope === 'aboutChapter'" class="ulAuto">
                <ul>
                  <template v-for="(itm, inds) in scope.row[item.prop]">
                    <li class="jumpStys" :key="inds" v-if="inds === 0">
                      {{ itm[item.prop1] }}
                    </li>
                  </template>
                </ul>
                <el-popover
                  :key="Math.random()"
                  placement="right"
                  trigger="click"
                >
                  <ul style="overflow: auto; max-height: 500px; margin: 0px">
                    <li
                      v-for="(itm, inds) in scope.row[item.prop]"
                      :key="inds"
                      class="jumpStys"
                    >
                      {{ inds + 1 }}、
                      {{ itm[item.prop1] }}
                    </li>
                  </ul>
                  <el-button
                    slot="reference"
                    style="margin-left: 6px"
                    type="text"
                    v-if="scope.row[item.prop].length > 1"
                    size="mini"
                    >更多</el-button
                  >
                </el-popover>
              </div>
              <div v-else>{{ scope.row[item.prop] }}</div>
            </template></af-table-column
          ></template
        >
        <el-table-column fixed="right" label="操作" width="100" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="editList(scope.row)"
              >修改</el-button
            ><el-button type="text" size="small" @click="del(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <add-gl ref="addGL" />
  </div>
</template>

<script>
import addGl from "./addGL.vue";
export default {
  components: { addGl },
  data() {
    return {
      activeName: "first",
      tableSet: [
        {
          label: "排序",
          prop: "sort",
          width: "120px",
        },
        {
          label: "名称",
          prop: "name",
        },
        {
          label: "教育类型",
          prop: "educationName",
        },
        {
          label: "业务层次",
          prop1: "projectName",
          prop2: "businessName",
          scope: "businType",
        },
        {
          label: "关联商品",
          prop: "goodsList",
          prop1: "goodsName",
          scope: "aboutChapter",
        },
        {
          label: "状态",
          prop: "status",
          scope: "status",
        },
      ],
      tableData: [],
      loading: false,
    };
  },
  watch: {
    activeName(val) {
      this.search();
    },
  },
  mounted() {
    this.search();
  },
  methods: {
    search() {
      this.loading = true;
      this.$api
        .inquireactivityrecommendList({
          platform: 1,
          type: this.activeName === "first" ? 1 : 2
        })
        .then((res) => {
          this.tableData = res.rows;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    /**
     * 新增
     */
    add() {
      this.$refs.addGL.openBox(1);
    },
    editList(row) {
      this.$refs.addGL.openBox(0, row.recommendId);
    },
    del(v) {
      this.$alert(
        "确定删除此内容？<br />内容删除后将无法恢复，请慎重考虑",
        "提示",
        {
          dangerouslyUseHTMLString: true,
        }
      )
        .then(() => {
          var data = {
            recommendId: v.recommendId
          };
          this.$api.removeactivityrecommend(data).then((res) => {
            this.$message.success("删除成功");
            this.search();
          });
        })
        .catch(() => {
        });
    },
  },
};
</script>

<style lang="less" scoped>
.postMs {
  position: relative;
  .topPost {
    position: absolute;
    top: 10%;
    right: 10px;
  }
}
.ulAuto {
  display: flex;
  justify-content: center;
  align-items: center;
  & > ul {
    margin: 0px;
  }
}
</style>