dy-admin-manager/src/views/resetTeaming/components/archicesComponents/teamInfo.vue

<template>
  <div>
    <el-alert :closable="false" class="alert marginBtm22" type="info">
      <template slot="title">
        <div class="alerTitle">
          <div class="shapeWrap">
            <span class="shape"></span>
            <p style="margin-right: 5px">乐团资讯</p>
          </div>
          <auth auths="musicGroupNews/add">
            <el-button type="text" @click="addInfo">+新增乐团资讯</el-button>
          </auth>
        </div>
      </template>
    </el-alert>
    <el-table
      :data="tableList"
      :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
    >
      <el-table-column align="center" prop="title" label="资讯标题">
      </el-table-column>
      <el-table-column align="center" prop="author" label="作者">
      </el-table-column>
      <el-table-column align="center" prop="linkUrl" label="资讯链接">
        <template slot-scope="scope">
          <div @click="gotoLink(scope.row.linkUrl)" class="link">
            {{ scope.row.linkUrl }}
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="id" label="添加时间">
        <template slot-scope="scope">
          <div>
            {{ scope.row.createTime | formatTimer }}
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="operatorName" label="添加人">
      </el-table-column>
      <el-table-column align="center" prop="id" label="操作">
        <template slot-scope="scope">
          <div>
            <auth auths="musicGroupNews/update">
              <el-button type="text" @click="resetInfo(scope.row)"
                >修改</el-button
              >
            </auth>
            <auth auths="musicGroupNews/del">
              <el-button type="text" @click="deleteInfo(scope.row)"
                >删除</el-button
              >
            </auth>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      save-key="team-teamInfo"
      sync
      :total.sync="rules.total"
      :page.sync="rules.page"
      :limit.sync="rules.limit"
      :page-sizes="rules.page_size"
      @pagination="getList"
    />

    <el-dialog
      :title="infoTitle"
      :visible.sync="infoVisible"
      width="600px"
      v-if="infoVisible"
    >
      <el-form
        :inline="true"
        :model.sync="form"
        ref="form"
        label-width="80px"
        append-to-body
      >
        <el-form-item
          prop="title"
          label="资讯标题"
          :rules="[{ required: true, message: '请输入资讯标题' }]"
        >
          <el-input
            style="width: 400px !important"
            v-model="form.title"
          ></el-input>
        </el-form-item>
        <el-form-item
          prop="author"
          label="作者"
          :rules="[{ required: true, message: '请输入作者名称' }]"
        >
          <el-input
            style="width: 400px !important"
            v-model="form.author"
          ></el-input>
        </el-form-item>
        <el-form-item
          prop="linkUrl"
          label="资讯链接"
          :rules="[{ required: true, message: '请输入资讯链接' }]"
        >
          <el-input
            style="width: 400px !important"
            v-model="form.linkUrl"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="infoVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitInfo">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getMusicGroupNews,
  addMusicGroupNews,
  resetMusicGroupNews,
  delMusicGroupNews,
} from "./api";
import pagination from "@/components/Pagination/index";
export default {
  components: {
    pagination,
  },
  data() {
    return {
      tableList: [],
      rules: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 1, // 总条数
        page_size: [10, 20, 40, 50], // 选择限制显示条数
      },
      infoVisible: false,
      infoTitle: "新增资讯",
      form: {
        author: "",
        linkUrl: "",
        title: "",
      },
      activeRow: null,
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    addInfo() {
      this.infoTitle = "新增资讯";
      this.infoVisible = true;
      this.$nextTick((res) => {
        this.form = {
          author: "",
          linkUrl: "",
          title: "",
        };
        this.$refs.form.resetFields();
      });
    },
    async getList() {
      try {
        const res = await getMusicGroupNews({
          rows: this.rules.limit,
          page: this.rules.page,
          search: this.$route.query.id,
        });
        this.tableList = res.data.rows;
        this.rules.total = res.data.total;
      } catch (e) {}
    },
    resetInfo(row) {
      this.infoTitle = "修改资讯";
      this.activeRow = row;
      this.form = { ...row };
      this.infoVisible = true;
    },
    deleteInfo(row) {
      this.$confirm("确定删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          delMusicGroupNews({ id: row.id }).then((res) => {
            if (res.code === 200) {
              this.$message.success("删除成功");
              this.getList();
              // this.routeOrderStatus = false;
            }
          });
        })
        .catch();
    },
    submitInfo() {
      this.$refs.form.validate(async (flag) => {
        if (flag) {
          if (this.activeRow) {
            try {
              const res = await resetMusicGroupNews({ ...this.form });
              this.$message.success("修改成功");
              this.infoVisible = false;
              this.getList();
            } catch (e) {
              console.log(e);
            }
            // 修改
          } else {
            try {
              const res = await addMusicGroupNews({
                ...this.form,
                musicGroupId: this.$route.query.id,
              });
              this.$message.success("新增成功");
              this.infoVisible = false;
              this.getList();
            } catch (e) {
              console.log(e);
            }
          }
        }
      });
    },
    gotoLink(url) {
      var p = window.location.protocol;
      if (url.indexOf("http") != -1) {
        console.log(url);
        window.open(url, "_blank");
      } else {
        console.log(url);
        window.open(`${p}//${url}`, "_blank");
      }
    },
  },
};
</script>
<style lang="scss" scoped>
/deep/.el-alert__content {
  width: 100%;
}
.alerTitle {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  .el-button {
    padding: 0 20px !important;
  }
}
.title {
  padding: 8px 16px;
}
.divider {
  margin-top: 0 !important;
}
.marginBtm22 {
  margin-bottom: 22px;
}
.shapeWrap {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  .shape {
    position: relative;
    top: -1px;
    display: block;
    margin-right: 10px;
    height: 14px;
    width: 4px;
    background-color: var(--color-primary);
    z-index: 500;
  }
}
.link {
  color: var(--color-primary);
  cursor: pointer;
}
</style>